wangmingchuan
/
yanzong_qianduan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sku弹窗与详情页优化

Browse Source
version/0412
syt 1 year ago
parent 8737255adc
commit ca57d968bf
6 changed files with 141 additions and 57 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      components/goods-sku-popup/index.vue
  2. 23
      pages/goods/components/SkuPopup.vue
  3. 136
      pages/goods/detail.vue
  4. 3
      pages/news/user/index.vue
  5. 10
      pages/sureOrder/index.vue
  6. 6
      pages/user/index.vue

2
components/goods-sku-popup/index.vue
Unescape View File

@ -450,6 +450,7 @@
that.selectArr.push(''); that.selectArr.push('');
that.subIndex.push(-1); that.subIndex.push(-1);
}); });
that.checkItem(); // 计算sku里面规格形成路径 that.checkItem(); // 计算sku里面规格形成路径
that.checkInpath(-1); // 传-1是为了不跳过循环 that.checkInpath(-1); // 传-1是为了不跳过循环
if (!notAutoClick) that.autoClickSku(); // 自动选择sku策略 if (!notAutoClick) that.autoClickSku(); // 自动选择sku策略
@ -790,6 +791,7 @@
that.checkSelectComplete({ that.checkSelectComplete({
success: function(selectShop) { success: function(selectShop) {
selectShop.buy_num = that.selectNum; selectShop.buy_num = that.selectNum;
console.log(selectShop)
that.$emit('buy-now', selectShop); that.$emit('buy-now', selectShop);
that.$emit('buy', selectShop); that.$emit('buy', selectShop);
} }

23
pages/goods/components/SkuPopup.vue
Unescape View File

@ -48,21 +48,23 @@
return hex2rgba(this.appTheme.mainBg, 0.1) return hex2rgba(this.appTheme.mainBg, 0.1)
} }
}, },
created() { mounted() {
const app = this const app = this
const { goods } = app const { goods } = app
app.goodsInfo = { setTimeout(()=>{
_id: goods.goods_id, app.goodsInfo = {
name: goods.goods_name, _id: goods.goods_id,
goods_thumb: goods.goods_image, name: goods.goods_name,
sku_list: app.getSkuList(), goods_thumb: goods.goods_image,
spec_list: app.getSpecList() sku_list: app.getSkuList(),
} spec_list: app.getSpecList()
app.maxBuyNum = app.getMaxBuyNum() }
console.log(111,app.goodsInfo)
app.maxBuyNum = app.getMaxBuyNum()
},500)
}, },
methods: { methods: {
// 监听组件显示隐藏 // 监听组件显示隐藏
onChangeValue(val) { onChangeValue(val) {
this.$emit('update:modelValue', val) this.$emit('update:modelValue', val)
@ -172,6 +174,7 @@
// 立即购买 // 立即购买
buyNow(selectShop) { buyNow(selectShop) {
console.log("buyNow",selectShop)
// 跳转到订单结算页 // 跳转到订单结算页
this.$navTo('pages/sureOrder/index', { this.$navTo('pages/sureOrder/index', {
mode: 'buyNow', mode: 'buyNow',

136
pages/goods/detail.vue
Unescape View File

@ -84,18 +84,21 @@
</view> </view>
</view> </view>
<view class="orderInfo"> <view class="orderInfo">
<!-- --> <!--
<view class="chosed" v-if="goods.spec_type == 20"> <view class="chosed" v-if="goods.spec_type == 20">
<view class="title">已选</view> <view class="title">已选</view>
<view class="info" v-if="goods.skuList.length>0"> <view class="info">{{
}}</view>-->
<!-- <view class="info" v-if="goods.skuList.length>0">
<text v-for="(a,idx) in goods.skuList[0].goods_props" :key="idx" style="margin-right: 10rpx;">{{a.group.name}}{{a.value.name}}</text>1件 <text v-for="(a,idx) in goods.skuList[0].goods_props" :key="idx" style="margin-right: 10rpx;">{{a.group.name}}{{a.value.name}}</text>1件
</view> </view> -->
</view> <!-- </view>
<view class="chosed" v-else> <view class="chosed" v-else>
<view class="title">已选</view> <view class="title">已选</view>
<view class="info">1件</view> <view class="info">1件</view>
</view> </view>-->
<view class="chosed"> <view class="chosed" v-if="goods.skuList && goods.skuList.length > 0 && goods.skuList[0].stock_num > 0">
<view class="title">送至</view> <view class="title">送至</view>
<view class="info"> <view class="info">
<view class="infoLeft"> <view class="infoLeft">
@ -198,15 +201,36 @@
</view> </view>
<view class="fooRight"> <view class="fooRight">
<view class="addCar" v-if="!isPre" @click="addCar()"> <template v-if="goods.skuList && goods.skuList.length > 0 && goods.skuList[0].stock_num == 0">
加入购物车 <view class="btn-bg">
</view> 暂无库存
<view class="buyNow" v-if="!isPre" @click="buyNow"> </view>
立即购买 </template>
</view> <template v-if="goods.status == 20">
<view class="buyNow" @click="onReservation" v-if="isPre"> <view class="btn-bg">
立即预约 已下架
</view> </view>
</template>
<template v-else>
<view class="addCar" v-if="!isPre" @click="choseSku(2)">
加入购物车
</view>
<view class="buyNow" v-if="!isPre" @click="choseSku(3)">
立即购买
</view>
<view class="buyNow" @click="onReservation" v-if="isPre">
立即预约
</view>
<!-- <view class="addCar" v-if="!isPre" @click="choseSku(1)">
加入购物车
</view>
<view class="buyNow" v-if="!isPre" @click="buyNow">
立即购买
</view>
<view class="buyNow" @click="onReservation" v-if="isPre">
立即预约
</view> -->
</template>
</view> </view>
</view> </view>
@ -311,20 +335,26 @@
<view class="toTop" v-if="isTop" @click="openScrollTo()"> <view class="toTop" v-if="isTop" @click="openScrollTo()">
<image :src="$picUrl+'/static/toTop.png'"></image> <image :src="$picUrl+'/static/toTop.png'"></image>
</view> </view>
<SkuPopup v-if="!isLoading" v-model="showSkuPopup" :skuMode="skuMode" :goods="goods" @addCart="onAddCart" /> <SkuPopup v-model="showSkuPopup" :skuMode="skuMode" :goods="goods" @updateSku="updateSku" @addCart="onAddCart" />
<!-- 分享菜单 -->
<share-sheet v-model="showShareSheet" :shareTitle="goods.goods_name" :shareImageUrl="goods.goods_image" :posterApiCall="posterApiCall"
:posterApiParam="{ goodsId }" />
</view> </view>
</template> </template>
<script> <script>
import ShareSheet from '@/components/share-sheet'
import * as GoodsApi from '@/api/goods' import * as GoodsApi from '@/api/goods'
import * as goodsCar from '@/api/cart.js' import * as goodsCar from '@/api/cart.js'
import SkuPopup from './components/SkuPopup' import SkuPopup from './components/SkuPopup'
import * as address from '@/api/address.js' import * as address from '@/api/address.js'
export default { export default {
components: { components: {
SkuPopup SkuPopup,
ShareSheet
}, },
data() { data() {
return { return {
showShareSheet: false,
cityInfo: {}, cityInfo: {},
currenIndex: 0, currenIndex: 0,
isTop: false, isTop: false,
@ -333,6 +363,8 @@
showSkuPopup: false, showSkuPopup: false,
allPicture: '', allPicture: '',
keyword: '', keyword: '',
// 模式 1:都显示 2:只显示购物车 3:只显示立即购买
skuMode: 1,
diaShow: false, diaShow: false,
searchValue: '', searchValue: '',
isPre: false, isPre: false,
@ -505,7 +537,18 @@
url: "/pages/search/index" url: "/pages/search/index"
}) })
}, },
choseSku() { // 更新购物车数量
onAddCart(total) {
console.log(total)
},
choseSku(skuMode) {
if(!uni.getStorageSync("AccessToken")) {
uni.navigateTo({
url: "/pages/login/index"
})
return ;
}
this.skuMode = skuMode
this.showSkuPopup = true this.showSkuPopup = true
}, },
copyNum(msg) { copyNum(msg) {
@ -537,9 +580,9 @@
info.goods_images1.push(a.preview_url) info.goods_images1.push(a.preview_url)
}) })
} }
if(info.skuList && info.skuList.length > 0){ // if(info.skuList && info.skuList.length > 0){
info.skuList = info.skuList.reverse(); // info.skuList = info.skuList.reverse();
} // }
info.content = info.content info.content = info.content
.replace(/style=""/g,'') .replace(/style=""/g,'')
@ -638,12 +681,6 @@
} }
// 立即下单 // 立即下单
console.log(this.token,'登录信息') console.log(this.token,'登录信息')
// if(!this.token){
// this.$toast('请登录')
// uni.navigateTo({
// url:'/pages/login/index'
// })
// }
if(this.goods.stock_total==0){ if(this.goods.stock_total==0){
return this.$toast('库存不足，请选择其他商品购买') return this.$toast('库存不足，请选择其他商品购买')
} }
@ -656,6 +693,33 @@
shareCancel() { shareCancel() {
// //
}, },
},
/**
* 分享当前页面
*/
onShareAppMessage() {
const app = this
// 构建页面参数
const params = app.$getShareUrlParams({
goodsId: app.goodsId,
})
return {
title: app.goods.goods_name,
path: `/pages/goods/detail?${params}`
}
},
/**
* 分享到朋友圈
* 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
* https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
*/
onShareTimeline() {
const app = this
return {
title: app.goods.goods_name,
path: `/pages/goods/detail?goodsId=${app.goodsId}`
}
} }
} }
</script> </script>
@ -672,7 +736,7 @@
height: 47px; height: 47px;
background: #FFFFFF; background: #FFFFFF;
border-radius: 50%; border-radius: 50%;
z-index:999; z-index: 19;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -789,7 +853,7 @@
position: absolute; position: absolute;
bottom: 20rpx; bottom: 20rpx;
right: 0; right: 0;
z-index: 22; z-index: 10;
font-size: 28rpx; font-size: 28rpx;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #FFFFFF;
@ -1200,8 +1264,10 @@
} }
.fooRight { .fooRight {
flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end;
margin-right: 20rpx; margin-right: 20rpx;
} }
@ -1273,6 +1339,18 @@
text-align: center; text-align: center;
margin-left: 8rpx; margin-left: 8rpx;
} }
.btn-bg {
flex: 1;
height: 78rpx;
background: #cecece;
border-radius: 42rpx;
opacity: 1;
font-size: 24rpx;
font-weight: 600;
color: #FFFFFF;
line-height: 78rpx;
text-align: center;
}
} }
.dia { .dia {

3
pages/news/user/index.vue
Unescape View File

@ -98,7 +98,7 @@
background: { background: {
background: 'url(https://www.royaum.com.cn/static/news/login-bg.png) centertop no-repeat', background: 'url(https://www.royaum.com.cn/static/news/login-bg.png) centertop no-repeat',
// background: 'url('+ img+') center top no-repeat', // background: 'url('+ img+') center top no-repeat',
backgroundSize: '100%', backgroundSize: '100% auto',
} }
} }
}, },
@ -122,6 +122,7 @@
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
background: url(https://www.royaum.com.cn/static/news/login-bg.png) center top no-repeat; background: url(https://www.royaum.com.cn/static/news/login-bg.png) center top no-repeat;
background-size: 100% auto; background-size: 100% auto;
min-height: 100vh; min-height: 100vh;
&-hd{ &-hd{

10
pages/sureOrder/index.vue
Unescape View File

@ -1,7 +1,7 @@
<template> <template>
<view class="sureOrder"> <view class="sureOrder">
<view> <view>
<u-navbar title="确认订单" back-icon-color="#fff" :border-bottom="false" title-color="#333" <u-navbar title="确认订单" :border-bottom="false" title-color="#333"
:background="background"></u-navbar> :background="background"></u-navbar>
</view> </view>
<view class="buyType"> <view class="buyType">
@ -246,13 +246,12 @@
} from '@/core/payment' } from '@/core/payment'
export default { export default {
data() { data() {
let img = 'https://www.royaum.com.cn/static/member/head.png'
return { return {
remark: '', remark: '',
payType: 'weChat', payType: 'weChat',
buyType: 'sm', buyType: 'sm',
background: { background: {
background: 'url(' + img + ') center top no-repeat', background: 'url(https://www.royaum.com.cn/static/member/head.png) center top no-repeat',
backgroundSize: '100% auto', backgroundSize: '100% auto',
}, },
goodsInfo: {}, goodsInfo: {},
@ -478,9 +477,10 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.sureOrder { .sureOrder {
width: 750rpx; width: 750rpx;
min-height: 750rpx;
padding-bottom: 120rpx; padding-bottom: 120rpx;
background-image: url('https://www.royaum.com.cn/static/home/homeback.png'); background: url('https://www.royaum.com.cn/static/member/head.png') center top no-repeat;
background-size: 100% 100%; background-size: 100% auto;
} }
.buyType { .buyType {

6
pages/user/index.vue
Unescape View File

@ -127,7 +127,7 @@
</view> </view>
<view class="coupon" v-if="isLogin == false || userInfo.user_type != 40"> <view class="coupon" v-if="isLogin == false || userInfo.user_type != 40">
<view class="walletList"> <view class="walletList">
<view class="listItem" @click="goJump('pages/news/park/recordHistory')"> <view class="listItem" @click="goJump('/pages/news/park/recordHistory')">
<view class="num"> <view class="num">
{{actionCountsInfo.reservation_number?actionCountsInfo.reservation_number:0}} {{actionCountsInfo.reservation_number?actionCountsInfo.reservation_number:0}}
</view> </view>
@ -135,7 +135,7 @@
预约记录 预约记录
</view> </view>
</view> </view>
<view class="listItem" @click="goJump('pages/news/park/browsingHistory')"> <view class="listItem" @click="goJump('/pages/news/park/browsingHistory')">
<view class="num"> <view class="num">
{{actionCountsInfo.view_number?actionCountsInfo.view_number:0}} {{actionCountsInfo.view_number?actionCountsInfo.view_number:0}}
</view> </view>
@ -151,7 +151,7 @@
{{isLogin==false || userInfo.user_type <= 20?'发货记录':'提货记录'}} {{isLogin==false || userInfo.user_type <= 20?'发货记录':'提货记录'}}
</view> </view>
</view> </view>
<view class="listItem" @click="goJump('pages/news/coupon/list')"> <view class="listItem" @click="goJump('/pages/news/coupon/list')">
<view class="num"> <view class="num">
{{actionCountsInfo.view_number?actionCountsInfo.view_number:0}} {{actionCountsInfo.view_number?actionCountsInfo.view_number:0}}
</view> </view>

Write Preview
Loading…
Cancel
Save