mkm/new_shop_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

多规格商品规格调整

Browse Source
This commit is contained in:
zmj 2024-05-15 18:35:26 +08:00
parent 3b092814a2
commit 55c4cba147
2 changed files with 85 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
components/productWindow/index.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<view :style="viewColor"> <view :style="viewColor">
<view class="product-window" :class="(attr.cartAttr === true ? 'on' : '') + ' ' + (iSbnt || destri?'join':'') + ' ' + (isPresell ?'presell-window':'')"> <view class="product-window"
:class="(attr.cartAttr === true ? 'on' : '') + ' ' + (iSbnt || destri?'join':'') + ' ' + (isPresell ?'presell-window':'')">
<view class="textpic acea-row row-between-wrapper"> <view class="textpic acea-row row-between-wrapper">
<view class="pictrue"> <view class="pictrue">
<image :src="attr.productSelect.image ? attr.productSelect.image : image" @click="loookImg"></image> <image :src="attr.productSelect.image ? attr.productSelect.image : image" @click="loookImg"></image>
@ -13,7 +14,8 @@
<view> <view>
预售价 预售价
￥<text class="num">{{ attr.productSelect.price }}</text> ￥<text class="num">{{ attr.productSelect.price }}</text>
<text v-if="presell_type === 2">定金￥<text class="num">{{ attr.productSelect.down_price }}</text></text> <text v-if="presell_type === 2">定金￥<text
class="num">{{ attr.productSelect.down_price }}</text></text>
</view> </view>
<text class="stock" v-if='isShow'>库存: {{ attr.productSelect.stock }}</text> <text class="stock" v-if='isShow'>库存: {{ attr.productSelect.stock }}</text>
<text class='stock' v-if="limitNum">限量: {{attr.productSelect.quota_show}}</text> <text class='stock' v-if="limitNum">限量: {{attr.productSelect.quota_show}}</text>
@ -23,7 +25,8 @@
<view class="acea-row row-middle"> <view class="acea-row row-middle">
<view v-if="type=='points'" class="points_money"> <view v-if="type=='points'" class="points_money">
<image :src="`${domain}/static/images/jf-point.png`" mode=""></image> <image :src="`${domain}/static/images/jf-point.png`" mode=""></image>
<text class="points-num">{{attr.productSelect.ot_price}}</text>积分 <text v-if="attr.productSelect.price > 0">+{{attr.productSelect.price}}元</text> <text class="points-num">{{attr.productSelect.ot_price}}</text>积分 <text
v-if="attr.productSelect.price > 0">+{{attr.productSelect.price}}元</text>
<text v-if="limitCount > 0" class="points-limit">限购{{limitCount}}件</text> <text v-if="limitCount > 0" class="points-limit">限购{{limitCount}}件</text>
</view> </view>
<view v-else> <view v-else>
@ -49,8 +52,8 @@
<view class="item" v-for="(item, indexw) in attr.productAttr" :key="indexw"> <view class="item" v-for="(item, indexw) in attr.productAttr" :key="indexw">
<view class="title">{{ item.attr_name }}</view> <view class="title">{{ item.attr_name }}</view>
<view class="listn acea-row row-middle"> <view class="listn acea-row row-middle">
<view class="itemn" :class="item.index === itemn.attr ? 'on' : ''" v-for="(itemn, indexn) in item.attr_value" <view class="itemn" :class="item.index === itemn.attr ? 'on' : ''"
@click="tapAttr(indexw, indexn)" :key="indexn"> v-for="(itemn, indexn) in item.attr_value" @click="tapAttr(indexw, indexn)" :key="indexn">
{{itemn.attr}} {{itemn.attr}}
</view> </view>
</view> </view>
@ -60,25 +63,32 @@
<view class="title">数量</view> <view class="title">数量</view>
<view class="carnum acea-row row-left"> <view class="carnum acea-row row-left">
<view class="buy_limit" v-if="minCount>0 || maxCount>0"> <view class="buy_limit" v-if="minCount>0 || maxCount>0">
(<text v-if="minCount>0">{{minCount}}件起购<text v-if="minCount>0 && maxCount>0">，</text></text><text v-if="maxCount>0">最多{{maxCount}}件</text>) (<text v-if="minCount>0">{{minCount}}件起购<text
v-if="minCount>0 && maxCount>0">，</text></text><text
v-if="maxCount>0">最多{{maxCount}}件</text>)
</view> </view>
<view class="item reduce" :class="(attr.productSelect.cart_num <= 1 || (minCount>0 && attr.productSelect.cart_num<=minCount)) ? 'on' : ''" @click="CartNumDes"> <view class="item reduce"
:class="(attr.productSelect.cart_num <= 1 || (minCount>0 && attr.productSelect.cart_num<=minCount)) ? 'on' : ''"
@click="CartNumDes">
- -
</view> </view>
<view class='item num'> <view class='item num'>
<input type="number" v-model="attr.productSelect.cart_num" data-name="productSelect.cart_num" @input="bindCode(attr.productSelect.cart_num)" @keydown.native="btKeyDown" @keyup.native="btKeyUp"></input> <input type="number" v-model="attr.productSelect.cart_num" data-name="productSelect.cart_num"
@input="bindCode(attr.productSelect.cart_num)" @keydown.native="btKeyDown"
@keyup.native="btKeyUp"></input>
</view> </view>
<view v-if="iSplus" class="item plus" :class="(attr.productSelect.cart_num >= attr.productSelect.stock || destri || (maxCount>0&&attr.productSelect.cart_num>=maxCount)) ? 'on' : ''" <view v-if="iSplus" class="item plus"
:class="(attr.productSelect.cart_num >= attr.productSelect.stock || destri || (maxCount>0&&attr.productSelect.cart_num>=maxCount)) ? 'on' : ''"
@click="CartNumAdd">+</view> @click="CartNumAdd">+</view>
<view v-else class='item plus' :class='((attr.productSelect.cart_num >= attr.productSelect.quota_show) <view v-else class='item plus'
:class='((attr.productSelect.cart_num >= attr.productSelect.quota_show)
|| (attr.productSelect.cart_num >= attr.productSelect.product_stock) || (maxCount>0&&attr.productSelect.cart_num>=maxCount)) ? "on":""' || (attr.productSelect.cart_num >= attr.productSelect.product_stock) || (maxCount>0&&attr.productSelect.cart_num>=maxCount)) ? "on":""'
@click='CartNumAdd'>+</view> @click='CartNumAdd'>+</view>
</view> </view>
</view> </view>
<view class="joinBnt b-color" v-if="destri && attr.productSelect.stock>0" @click="goCat">立即购买</view> <view class="joinBnt b-color" v-if="destri && attr.productSelect.stock>0" @click="goCat">立即购买</view>
<view class="joinBnt on" v-else-if="destri && attr.productSelect.stock<=0">已售罄</view> <view class="joinBnt on" v-else-if="destri && attr.productSelect.stock<=0">已售罄</view>
<view class="joinBnt b-color" v-if="iSbnt && attr.productSelect.stock>0" <view class="joinBnt b-color" v-if="iSbnt && attr.productSelect.stock>0" @click="goCat">我要参团</view>
@click="goCat">我要参团</view>
<view class="joinBnt on" v-else-if="(iSbnt && attr.productSelect.stock<=0)">已售罄</view> <view class="joinBnt on" v-else-if="(iSbnt && attr.productSelect.stock<=0)">已售罄</view>
</view> </view>
<view class="mask" @touchmove.prevent :hidden="attr.cartAttr === false" @click="closeAttr"></view> <view class="mask" @touchmove.prevent :hidden="attr.cartAttr === false" @click="closeAttr"></view>
@ -95,7 +105,9 @@
// +---------------------------------------------------------------------- // +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com> // | Author: CRMEB Team <admin@crmeb.com>
// +---------------------------------------------------------------------- // +----------------------------------------------------------------------
import { mapGetters } from "vuex"; import {
mapGetters
} from "vuex";
export default { export default {
props: { props: {
attr: { attr: {
@ -165,8 +177,7 @@
}, },
computed: mapGetters(['viewColor']), computed: mapGetters(['viewColor']),
data() { data() {
return { return {};
};
}, },
mounted() { mounted() {
console.log(this.maxCount) console.log(this.maxCount)
@ -195,7 +206,8 @@
e.target.value = e.target.value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g, ""); e.target.value = e.target.value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g, "");
}, },
btKeyUp(e) { btKeyUp(e) {
e.target.value = e.target.value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g,"") e.target.value = e.target.value.replace(
/[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g, "")
}, },
closeAttr: function() { closeAttr: function() {
this.$emit('myevent'); this.$emit('myevent');
@ -251,55 +263,67 @@
padding-bottom: calc(140rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/ padding-bottom: calc(140rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);
transition: all .3s cubic-bezier(.25, .5, .5, .9); transition: all .3s cubic-bezier(.25, .5, .5, .9);
&.presell-window { &.presell-window {
padding-bottom: 200rpx; padding-bottom: 200rpx;
padding-bottom: calc(200rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/ padding-bottom: calc(200rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
padding-bottom: calc(200rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/ padding-bottom: calc(200rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
} }
} }
.product-window.on { .product-window.on {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
.product-window.join { .product-window.join {
padding-bottom: 30rpx; padding-bottom: 30rpx;
} }
.product-window .textpic { .product-window .textpic {
padding: 0 80rpx 0 30rpx; padding: 0 80rpx 0 30rpx;
margin-top: 29rpx; margin-top: 29rpx;
position: relative; position: relative;
} }
.product-window .textpic .pictrue { .product-window .textpic .pictrue {
width: 150rpx; width: 150rpx;
height: 150rpx; height: 150rpx;
} }
.product-window .textpic .pictrue image { .product-window .textpic .pictrue image {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 10rpx; border-radius: 10rpx;
} }
.product-window .textpic .text { .product-window .textpic .text {
width: 460rpx; width: 460rpx;
font-size: 32rpx; font-size: 32rpx;
color: #202020; color: #202020;
} }
.product-window .textpic .text .money { .product-window .textpic .text .money {
font-size: 24rpx; font-size: 24rpx;
margin-top: 26rpx; margin-top: 26rpx;
font-weight: 700; font-weight: 700;
color: var(--view-priceColor); color: var(--view-priceColor);
} }
.product-window .textpic .text .money .points_money { .product-window .textpic .text .money .points_money {
font-weight: normal; font-weight: normal;
display: flex; display: flex;
align-items: baseline; align-items: baseline;
} }
.product-window .textpic .text .money .points_money image { .product-window .textpic .text .money .points_money image {
width: 26rpx; width: 26rpx;
height: 26rpx; height: 26rpx;
} }
.product-window .textpic .text .money .points_money .points-num { .product-window .textpic .text .money .points_money .points-num {
font-size: 34rpx; font-size: 34rpx;
} }
.product-window .textpic .text .money .points_money .points-limit { .product-window .textpic .text .money .points_money .points-limit {
display: flex; display: flex;
padding: 0 10rpx; padding: 0 10rpx;
@ -313,42 +337,52 @@
margin-left: 10rpx; margin-left: 10rpx;
font-size: 18rpx; font-size: 18rpx;
} }
.product-window .stock_count { .product-window .stock_count {
margin-top: 5rpx; margin-top: 5rpx;
} }
.product-window .textpic .text .money .num { .product-window .textpic .text .money .num {
font-size: 36rpx; font-size: 36rpx;
} }
.product-window .textpic .text .money .stock { .product-window .textpic .text .money .stock {
color: #999; color: #999;
margin-left: 18rpx; margin-left: 18rpx;
font-weight: normal; font-weight: normal;
} }
.product-window .textpic .text .presell_price { .product-window .textpic .text .presell_price {
color: #FF7F00; color: #FF7F00;
.num { .num {
display: inline-block; display: inline-block;
margin-right: 20rpx; margin-right: 20rpx;
} }
.stock { .stock {
margin-left: 0; margin-left: 0;
} }
} }
.vip-money { .vip-money {
color: #282828; color: #282828;
font-size: 22rpx; font-size: 22rpx;
margin-left: 6rpx; margin-left: 6rpx;
} }
.vipImg { .vipImg {
width: 65rpx; width: 65rpx;
height: 28rpx; height: 28rpx;
margin-left: 4rpx; margin-left: 4rpx;
image { image {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
} }
} }
.product-window .textpic .iconfont { .product-window .textpic .iconfont {
position: absolute; position: absolute;
right: 30rpx; right: 30rpx;
@ -356,22 +390,27 @@
font-size: 35rpx; font-size: 35rpx;
color: #8a8a8a; color: #8a8a8a;
} }
.product-window .productWinList { .product-window .productWinList {
max-height: 395rpx; max-height: 395rpx;
overflow: auto; overflow: auto;
margin-top: 36rpx; margin-top: 36rpx;
} }
.product-window .productWinList .item~.item { .product-window .productWinList .item~.item {
margin-top: 36rpx; margin-top: 36rpx;
} }
.product-window .productWinList .item .title { .product-window .productWinList .item .title {
font-size: 30rpx; font-size: 30rpx;
color: #999; color: #999;
padding: 0 30rpx; padding: 0 30rpx;
} }
.product-window .productWinList .item .listn { .product-window .productWinList .item .listn {
padding: 0 30rpx 0 16rpx; padding: 0 30rpx 0 16rpx;
} }
.product-window .productWinList .item .listn .itemn { .product-window .productWinList .item .listn .itemn {
border: 1px solid #bbb; border: 1px solid #bbb;
font-size: 26rpx; font-size: 26rpx;
@ -380,11 +419,13 @@
border-radius: 6rpx; border-radius: 6rpx;
margin: 14rpx 0 0 14rpx; margin: 14rpx 0 0 14rpx;
} }
.product-window .productWinList .item .listn .itemn.on { .product-window .productWinList .item .listn .itemn.on {
color: #fff; color: #fff;
background-color: var(--view-theme); background-color: var(--view-theme);
border-color: var(--view-theme); border-color: var(--view-theme);
} }
.product-window .cart { .product-window .cart {
margin-top: 36rpx; margin-top: 36rpx;
padding: 0 30rpx; padding: 0 30rpx;
@ -397,20 +438,24 @@
-ms-flex-pack: justify; -ms-flex-pack: justify;
justify-content: space-between; justify-content: space-between;
} }
.product-window .cart .title { .product-window .cart .title {
font-size: 30rpx; font-size: 30rpx;
color: #999; color: #999;
line-height: 54rpx; line-height: 54rpx;
} }
.product-window .cart .carnum { .product-window .cart .carnum {
height: 54rpx; height: 54rpx;
align-items: center; align-items: center;
} }
.product-window .cart .carnum .buy_limit { .product-window .cart .carnum .buy_limit {
font-size: 22rpx; font-size: 22rpx;
color: var(--view-theme); color: var(--view-theme);
margin-right: 30rpx; margin-right: 30rpx;
} }
.product-window .cart .carnum .item { .product-window .cart .carnum .item {
border: 1px solid #a4a4a4; border: 1px solid #a4a4a4;
width: 84rpx; width: 84rpx;
@ -420,28 +465,34 @@
color: #a4a4a4; color: #a4a4a4;
font-size: 45rpx; font-size: 45rpx;
} }
.product-window .cart .carnum .reduce { .product-window .cart .carnum .reduce {
border-right: 0; border-right: 0;
border-radius: 6rpx 0 0 6rpx; border-radius: 6rpx 0 0 6rpx;
line-height: 48rpx; line-height: 48rpx;
} }
.product-window .cart .carnum .reduce.on { .product-window .cart .carnum .reduce.on {
border-color: #e3e3e3; border-color: #e3e3e3;
color: #dedede; color: #dedede;
} }
.product-window .cart .carnum .plus { .product-window .cart .carnum .plus {
border-left: 0; border-left: 0;
border-radius: 0 6rpx 6rpx 0; border-radius: 0 6rpx 6rpx 0;
line-height: 46rpx; line-height: 46rpx;
} }
.product-window .cart .carnum .plus.on { .product-window .cart .carnum .plus.on {
border-color: #e3e3e3; border-color: #e3e3e3;
color: #dedede; color: #dedede;
} }
.product-window .cart .carnum .num { .product-window .cart .carnum .num {
color: #282828; color: #282828;
font-size: 28rpx; font-size: 28rpx;
} }
.product-window .joinBnt { .product-window .joinBnt {
font-size: 30rpx; font-size: 30rpx;
width: 620rpx; width: 620rpx;
@ -451,10 +502,12 @@
line-height: 86rpx; line-height: 86rpx;
color: #fff; color: #fff;
margin: 21rpx auto 0 auto; margin: 21rpx auto 0 auto;
&.b-color { &.b-color {
background-color: var(--view-theme); background-color: var(--view-theme);
} }
} }
.product-window .joinBnt.on { .product-window .joinBnt.on {
background-color: #bbb; background-color: #bbb;
color: #fff; color: #fff;

7
pages/goods_details/index.vue
View File

@ -336,13 +336,14 @@
</view> </view>
<view v-if="description.content && description.content.image" class="pictures"> <view v-if="description.content && description.content.image" class="pictures">
<view class="" v-for="(item,index) in description.content.image" :key="index"> <view class="" v-for="(item,index) in description.content.image" :key="index">
<view style="position: relative;" <view style="position: relative;" v-if='videoTypeList.includes(getSuffix(item))'
v-if='videoTypeList.includes(getSuffix(item))' @click="navGoPlay(item)"> @click="navGoPlay(item)">
<!-- #ifdef APP-PLUS --> <!-- #ifdef APP-PLUS -->
<image :src="item+coverUrl" mode="widthFix" <image :src="item+coverUrl" mode="widthFix"
style="background-color: #fff;width: 100vw;" /> style="background-color: #fff;width: 100vw;" />
<!-- <image class="image-play-icon" src="/static/images/stop.png"> --> <!-- <image class="image-play-icon" src="/static/images/stop.png"> -->
<u--image class="image-play-icon" src="/static/images/stop.png" width="100rpx" height="100rpx" ></u--image> <u--image class="image-play-icon" src="/static/images/stop.png"
width="100rpx" height="100rpx"></u--image>
</image> </image>
<!-- #endif --> <!-- #endif -->
<!-- #ifndef APP-PLUS --> <!-- #ifndef APP-PLUS -->