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. 6
      components/goods-sku-popup/index.vue
  2. 25
      pages/goods/components/SkuPopup.vue
  3. 146
      pages/goods/detail.vue
  4. 3
      pages/news/user/index.vue
  5. 12
      pages/sureOrder/index.vue
  6. 6
      pages/user/index.vue

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

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

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

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

146
pages/goods/detail.vue
Unescape View File

@ -84,18 +84,21 @@
</view>
</view>
<view class="orderInfo">
<!-- -->
<!--
<view class="chosed" v-if="goods.spec_type == 20">
<view class="title">已选</view>
<view class="info" v-if="goods.skuList.length>0">
<view class="title">已选</view>
<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件
</view>
</view>
</view> -->
<!-- </view>
<view class="chosed" v-else>
<view class="title">已选</view>
<view class="info">1件</view>
</view>
<view class="chosed">
</view>-->
<view class="chosed" v-if="goods.skuList && goods.skuList.length > 0 && goods.skuList[0].stock_num > 0">
<view class="title">送至</view>
<view class="info">
<view class="infoLeft">
@ -198,15 +201,36 @@
</view>
<view class="fooRight">
<view class="addCar" v-if="!isPre" @click="addCar()">
加入购物车
</view>
<view class="buyNow" v-if="!isPre" @click="buyNow">
立即购买
</view>
<view class="buyNow" @click="onReservation" v-if="isPre">
立即预约
</view>
<template v-if="goods.skuList && goods.skuList.length > 0 && goods.skuList[0].stock_num == 0">
<view class="btn-bg">
暂无库存
</view>
</template>
<template v-if="goods.status == 20">
<view class="btn-bg">
已下架
</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>
@ -311,20 +335,26 @@
<view class="toTop" v-if="isTop" @click="openScrollTo()">
<image :src="$picUrl+'/static/toTop.png'"></image>
</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>
</template>
<script>
import ShareSheet from '@/components/share-sheet'
import * as GoodsApi from '@/api/goods'
import * as goodsCar from '@/api/cart.js'
import SkuPopup from './components/SkuPopup'
import * as address from '@/api/address.js'
export default {
components: {
SkuPopup
SkuPopup,
ShareSheet
},
data() {
return {
showShareSheet: false,
cityInfo: {},
currenIndex: 0,
isTop: false,
@ -332,7 +362,9 @@
goodShow:false,
showSkuPopup: false,
allPicture: '',
keyword: '',
keyword: '',
// 模式 1:都显示 2:只显示购物车 3:只显示立即购买
skuMode: 1,
diaShow: false,
searchValue: '',
isPre: false,
@ -504,8 +536,19 @@
uni.navigateTo({
url: "/pages/search/index"
})
},
// 更新购物车数量
onAddCart(total) {
console.log(total)
},
choseSku() {
choseSku(skuMode) {
if(!uni.getStorageSync("AccessToken")) {
uni.navigateTo({
url: "/pages/login/index"
})
return ;
}
this.skuMode = skuMode
this.showSkuPopup = true
},
copyNum(msg) {
@ -537,9 +580,9 @@
info.goods_images1.push(a.preview_url)
})
}
if(info.skuList && info.skuList.length > 0){
info.skuList = info.skuList.reverse();
}
// if(info.skuList && info.skuList.length > 0){
// info.skuList = info.skuList.reverse();
// }
info.content = info.content
.replace(/style=""/g,'')
@ -638,12 +681,6 @@
}
// 立即下单
console.log(this.token,'登录信息')
// if(!this.token){
// this.$toast('请登录')
// uni.navigateTo({
// url:'/pages/login/index'
// })
// }
if(this.goods.stock_total==0){
return this.$toast('库存不足，请选择其他商品购买')
}
@ -656,7 +693,34 @@
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>
<style lang="scss" scoped>
@ -672,7 +736,7 @@
height: 47px;
background: #FFFFFF;
border-radius: 50%;
z-index:999;
z-index: 19;
display: flex;
align-items: center;
justify-content: center;
@ -789,7 +853,7 @@
position: absolute;
bottom: 20rpx;
right: 0;
z-index: 22;
z-index: 10;
font-size: 28rpx;
font-weight: 400;
color: #FFFFFF;
@ -1199,9 +1263,11 @@
align-items: center;
}
.fooRight {
.fooRight {
flex: 1;
display: flex;
align-items: center;
align-items: center;
justify-content: flex-end;
margin-right: 20rpx;
}
@ -1272,6 +1338,18 @@
line-height: 78rpx;
text-align: center;
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;
}
}

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

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

12
pages/sureOrder/index.vue
Unescape View File

@ -1,7 +1,7 @@
<template>
<view class="sureOrder">
<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>
</view>
<view class="buyType">
@ -246,13 +246,12 @@
} from '@/core/payment'
export default {
data() {
let img = 'https://www.royaum.com.cn/static/member/head.png'
return {
remark: '',
payType: 'weChat',
buyType: 'sm',
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',
},
goodsInfo: {},
@ -477,10 +476,11 @@
<style lang="scss" scoped>
.sureOrder {
width: 750rpx;
width: 750rpx;
min-height: 750rpx;
padding-bottom: 120rpx;
background-image: url('https://www.royaum.com.cn/static/home/homeback.png');
background-size: 100% 100%;
background: url('https://www.royaum.com.cn/static/member/head.png') center top no-repeat;
background-size: 100% auto;
}
.buyType {

6
pages/user/index.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save