<template>
|
<view>
|
<view class="product-window"
|
:class="(attr.cartAttr === true ? 'on' : '') + ' ' + (iSbnt?'join':'') + ' ' + (iScart?'joinCart':'')">
|
<view class="textpic acea-row row-between-wrapper">
|
<view class="pictrue">
|
<image :src="productSelect.image"></image>
|
</view>
|
<view class="text">
|
<view class="line1">
|
{{ productSelect.storeName }}
|
</view>
|
<view class="money font-color">
|
<block v-if="productSelect.payWay==1">
|
<text class="color-blue" v-if="productSelect.selectPrice>0">￥<text class="num">{{ toNumber(productSelect.selectPrice) }}</text></text>
|
<text class="color-blue" v-if="toNumber(productSelect.selectPrice)>0&&toNumber(productSelect.selectCareBeanNumber)>0">+</text>
|
<text class="num color-blue" v-if="toNumber(productSelect.selectCareBeanNumber)>0">{{ toThousands(toNumber(productSelect.selectCareBeanNumber)) }}悦养豆</text>
|
</block>
|
<text class="color-blue" v-if="productSelect.payWay==2">
|
￥<text class="num ">{{ toNumber(productSelect.selectPrice) }}</text>
|
</text>
|
<block v-if="productSelect.payWay==3">
|
<text class="num color-blue">{{ toThousands(toNumber(productSelect.selectCareBeanNumber)) }}悦养豆</text>
|
</block>
|
<text class="stock" v-if='isShow'>库存: {{ toThousands(toNumber(productSelect.stock||0)*toNumber(productSelect.numberItem||1)) }}</text>
|
<text class='stock' v-if="limitNum">限量: {{productSelect.quota}}</text>
|
<view class="carnum acea-row row-left">
|
<view class="item reduce" :class="cart_num <= 1 ? '' : 'on'"
|
@click="CartNumDes">
|
-
|
</view>
|
<view class='item input_num'>
|
<!-- 改用text，小程序兼容性最好，正则限制输入 -->
|
<input
|
type="text"
|
v-model="cart_num"
|
@input="handleCartInput"
|
@blur="handleCartBlur"
|
/>
|
</view>
|
<view v-if="iSplus" class="item plus" :class="cart_num >= productSelect.stock ? '' : 'on'" @click="CartNumAdd">
|
+
|
</view>
|
<view v-else class='item plus'
|
:class='(cart_num >= productSelect.quota) || (cart_num >= productSelect.stock) || (cart_num >= productSelect.num)? "on":""'
|
@click='CartNumAdd'>+</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="iconfont icon-guanbi" @click="closeAttr"></view>
|
<view class="rollTop">
|
<view class="productWinList">
|
<view class="item" v-for="(item, indexw) in attr.productAttr" :key="indexw">
|
<view class="title">{{ item.attrName }}</view>
|
<view class="listn acea-row row-middle">
|
<view class="itemn" :class="item.index === itemn ? 'on' : ''"
|
v-for="(itemn, indexn) in item.attrValues" @click="tapAttr(indexw, indexn)"
|
:key="indexn">
|
{{ itemn }}
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="careBean_box" v-if="productSelect.payWay==1">
|
<view class="label borRadius14"
|
style="padding: 10rpx;font-size: 23rpx;line-height: 34rpx;color:#0265CA;background-color: #f2f8fc;text-align: center;margin-bottom:10rpx;">
|
悦养豆使用规则：支持手动调整数量，需为{{toThousands(careBeanStep*25)}}的整数倍<text @click="goToThird"
|
style="padding-right: 25rpx;background: url('https://ossacmall.bluedeer.com.cn/app/static/images/icon_gonglue.jpg') right center/auto 1em no-repeat;display:block;margin:0 auto;width:max-content;font-weight: bold;">查看更多赚豆攻略</text>
|
</view>
|
<view class="careBean_info">
|
<view class="careBean_infoText" style="opacity:0;pointer-events: none;">抵扣范围：{{toThousands(productSelect.careBeanMinNumber)}}-{{toThousands(productSelect.careBeanMaxNumber)}}悦养豆</view>
|
<view class="carnum acea-row row-left">
|
<view class="item reduce" :class="localCareBean >= productSelect.careBeanMinNumber+careBeanStep*25 ? 'on' : ''"
|
@click="careBeanDes">
|
-
|
</view>
|
<view class='item input_num'>
|
<input type="text" v-model="localCareBean" @blur="bindBlurCare"/>
|
</view>
|
<view class="item plus" :class="localCareBean+careBeanStep*25 <= productSelect.careBeanMaxNumber ? 'on' : ''" @click="careBeanAdd">
|
+
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="joinBnt bg-color" v-if="iSbnt && productSelect.stock>0 &&productSelect.quota>0" @click="goCat">我要参团</view>
|
<view class="joinBnt on" v-else-if="(iSbnt && productSelect.quota<=0)||(iSbnt &&productSelect.stock<=0)">已售罄</view>
|
<view class="joinBnt bg-color" v-if="iScart && productSelect.stock" @click="goCat">确定</view>
|
<view class="joinBnt on" v-else-if="(iScart && !productSelect.stock)">已售罄</view>
|
</view>
|
<view class="mask" @touchmove.prevent :hidden="attr.cartAttr === false" @click="closeAttr"></view>
|
</view>
|
</template>
|
|
<script>
|
import { HTTP_REQUEST_URL, THIRD_APPID } from '@/config/app';
|
export default {
|
props: {
|
attr: {
|
type: Object,
|
default: () => {}
|
},
|
productSelect: {
|
type: Object,
|
default: () => {}
|
},
|
careBeanStep: {
|
type: Number,
|
default: 0
|
},
|
limitNum: {
|
type: Number,
|
default: 0
|
},
|
isShow: {
|
type: Number,
|
default: 0
|
},
|
iSbnt: {
|
type: Number,
|
default: 0
|
},
|
iSplus: {
|
type: Number,
|
default: 0
|
},
|
iScart: {
|
type: Number,
|
default: 0
|
}
|
},
|
data() {
|
return {
|
// 购买数量
|
cart_num: 1,
|
// 悦养豆本地变量，不直接修改props
|
localCareBean: 0
|
};
|
},
|
watch: {
|
// 切换规格、父组件更新选中商品，重置数量
|
productSelect: {
|
handler(newVal) {
|
console.log("productSelect:",newVal)
|
this.cart_num = Math.max(Number(newVal.cart_num) || 1, 1)
|
console.log("productSelect cart_num:",this.cart_num)
|
this.localCareBean = Number(newVal.selectCareBeanNumber) || newVal.careBeanMinNumber || 0
|
},
|
deep: true
|
}
|
},
|
mounted() {},
|
onShow() {
|
console.log(this.attr);
|
},
|
methods: {
|
previewImage(url) {
|
uni.previewImage({ urls: [url] })
|
},
|
goToThird() {
|
let that = this;
|
function go() {
|
let miniProgramInfo = uni.getAccountInfoSync().miniProgram;
|
|
let url = 'pages/main/index?tab=welfare&sourceScene=order';
|
|
url += '&agentNo=' + ((that.$store.getters.belong && that.$store.getters.belong.agentNo) ? that.$store.getters.belong
|
.agentNo : '');
|
url += '&agentChannel=' + ((that.$store.getters.belong && that.$store.getters.belong.channel) ? that.$store.getters
|
.belong.channel : ''); //归属代理人渠道
|
url += '&agentCompany=' + ((that.$store.getters.belong && that.$store.getters.belong.companyCode) ? that.$store.getters
|
.belong.companyCode : ''); //agentCompany
|
url += '&agentBranch=' + ((that.$store.getters.belong && that.$store.getters.belong.branchCode) ? that.$store.getters
|
.belong
|
.branchCode : ''); //归属代理人支公司
|
url += '&custAgentOrgNo=' + ((that.$store.getters.belong && that.$store.getters.belong.subCode) ? that.$store.getters
|
.belong.subCode : ''); //归属代理人机构编码
|
url += '&unionId=' + that.$store.getters.unionId;
|
url += '&mobile=' + ((that.$store.getters.belong && that.$store.getters.belong.mobile) ? that.$store.getters.belong
|
.mobile : that.$store.getters.userInfo.mobile);
|
console.log(url);
|
uni.navigateToMiniProgram({
|
appId: THIRD_APPID,
|
path: url,
|
envVersion: miniProgramInfo.envVersion == 'release' ? 'release' : 'trial',
|
})
|
}
|
if (!that.$store.getters.isLogin) {
|
toLogin(that);
|
that.loginBackFn = go
|
} else {
|
go();
|
}
|
},
|
goCat() {
|
this.$emit('goCat');
|
},
|
|
// 输入中实时校验：禁止0开头、只能数字
|
handleCartInput() {
|
// 正则：只保留纯数字
|
let val = String(this.cart_num).replace(/[^\d]/g, '')
|
// 禁止开头为0，多个0直接置1
|
if (/^0+/.test(val)) {
|
val = '1'
|
}
|
this.cart_num = val
|
this.$emit('iptCartNum', Number(this.cart_num));
|
},
|
|
// 失焦最终兜底校验：空、0、非法值全部强制=1
|
handleCartBlur() {
|
let num = Number(this.cart_num)
|
if (isNaN(num) || num < 1) {
|
num = 1
|
}
|
// 最大不能超过库存/限购
|
const max = Math.min(this.productSelect.stock, this.productSelect.quota || 9999)
|
if (num > max) num = max
|
this.cart_num = num
|
this.$emit('blurCartNum', num);
|
},
|
|
closeAttr() {
|
this.$emit('myevent');
|
},
|
|
// 减数量：本地先变更再通知父
|
CartNumDes() {
|
if (this.cart_num > 1) {
|
this.cart_num--
|
this.$emit('ChangeCartNum', false, this.cart_num);
|
}
|
},
|
// 加数量
|
CartNumAdd() {
|
const max = Math.min(this.productSelect.stock, this.productSelect.quota || 9999)
|
if (this.cart_num < max) {
|
this.cart_num++
|
console.log("CartNumAdd this.cart_num:::",this.cart_num)
|
this.$emit('ChangeCartNum', true, this.cart_num);
|
}
|
},
|
|
// 悦养豆减
|
careBeanDes() {
|
const step = this.careBeanStep * 25
|
let val = this.localCareBean - step
|
if (val >= this.productSelect.careBeanMinNumber) {
|
this.localCareBean = val
|
this.$emit('ChangeCareBeanNum', false, this.localCareBean);
|
}
|
},
|
// 悦养豆加
|
careBeanAdd() {
|
const step = this.careBeanStep * 25
|
let val = this.localCareBean + step
|
if (val <= this.productSelect.careBeanMaxNumber) {
|
this.localCareBean = val
|
this.$emit('ChangeCareBeanNum', true, this.localCareBean);
|
}
|
},
|
// 悦养豆失焦规整步长
|
bindBlurCare() {
|
let num = Number(this.localCareBean)
|
const min = this.productSelect.careBeanMinNumber
|
const max = this.productSelect.careBeanMaxNumber
|
const step = this.careBeanStep * 25
|
if (isNaN(num) || num < min) num = min
|
// 规整为步长倍数
|
const diff = (num - min) % step
|
if (diff !== 0) num = num - diff
|
if (num > max) num = max
|
this.localCareBean = num
|
this.$emit('blurCareBeanNum', num);
|
},
|
|
tapAttr(indexw, indexn) {
|
this.$emit("attrVal", { indexw, indexn });
|
// 不推荐直接修改props attr，最好emit出去父组件修改
|
this.$set(this.attr.productAttr[indexw], 'index', this.attr.productAttr[indexw].attrValues[indexn]);
|
let value = this.getCheckedValue().join(",");
|
this.$emit("ChangeAttr", value);
|
},
|
getCheckedValue() {
|
let productAttr = this.attr.productAttr;
|
let value = [];
|
for (let i = 0; i < productAttr.length; i++) {
|
for (let j = 0; j < productAttr[i].attrValues.length; j++) {
|
if (productAttr[i].index === productAttr[i].attrValues[j]) {
|
value.push(productAttr[i].attrValues[j]);
|
}
|
}
|
}
|
return value;
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
/* 样式完全保留原样，无需改动 */
|
.product-window {
|
position: fixed;
|
bottom: 0;
|
width: 100%;
|
left: 0;
|
background-color: #fff;
|
z-index: 77;
|
border-radius: 16rpx 16rpx 0 0;
|
padding-bottom: 190rpx;
|
padding-top: 30rpx;
|
transform: translate3d(0, 100%, 0);
|
transition: all .3s cubic-bezier(.25, .5, .5, .9);
|
}
|
|
.product-window.on {
|
transform: translate3d(0, 0, 0);
|
}
|
|
.product-window.join {
|
padding-bottom: 30rpx;
|
}
|
|
.product-window.joinCart {
|
padding-bottom: 230rpx;
|
z-index: 999;
|
}
|
|
.product-window .textpic {
|
padding: 0 130rpx 0 30rpx;
|
margin-top: 29rpx;
|
position: relative;
|
}
|
|
.product-window .textpic .pictrue {
|
width: 150rpx;
|
height: 150rpx;
|
}
|
|
.product-window .textpic .pictrue image {
|
width: 100%;
|
height: 100%;
|
border-radius: 10rpx;
|
}
|
|
.product-window .textpic .text {
|
width: 410rpx;
|
font-size: 32rpx;
|
color: #333333;
|
}
|
|
.product-window .textpic .text .money {
|
font-size: 24rpx;
|
margin-top: 20rpx;
|
white-space: nowrap;
|
}
|
|
.product-window .textpic .text .money .num {
|
font-size: 36rpx;
|
font-weight: bold;
|
}
|
|
.product-window .textpic .text .money .stock {
|
color: #999;
|
display: block;
|
padding-bottom: 10rpx;
|
padding-top: 10rpx;
|
}
|
|
.product-window .icon-guanbi {
|
position: absolute;
|
right: 32rpx;
|
top: 32rpx;
|
font-size: 35rpx;
|
color: #000000;
|
}
|
|
.product-window .rollTop {
|
max-height: 500rpx;
|
overflow: auto;
|
margin-top: 36rpx;
|
}
|
|
.product-window .productWinList .item~.item {
|
margin-top: 36rpx;
|
}
|
|
.product-window .productWinList .item .title {
|
font-size: 30rpx;
|
color: #999;
|
padding: 0 30rpx;
|
}
|
|
.product-window .productWinList .item .listn {
|
padding: 0 30rpx 0 16rpx;
|
}
|
|
.product-window .productWinList .item .listn .itemn {
|
border: 1px solid #F2F2F2;
|
font-size: 26rpx;
|
color: #282828;
|
padding: 7rpx 33rpx;
|
border-radius: 40rpx;
|
margin: 20rpx 0 0 14rpx;
|
background-color: #F2F2F2;
|
}
|
|
.product-window .productWinList .item .listn .itemn.on {
|
color: $theme-color;
|
background: rgba(255, 244, 243, 1);
|
border-color: $theme-color;
|
}
|
|
.product-window .productWinList .item .listn .itemn.limit {
|
color: #999;
|
text-decoration: line-through;
|
}
|
|
.product-window .careBean_box {
|
margin-top: 36rpx;
|
padding: 0 30rpx;
|
}
|
.carnum {
|
height: 54rpx;
|
position: absolute;
|
right: 0;
|
bottom: 0;
|
}
|
.careBean_box .carnum{
|
right: -30rpx;
|
}
|
.careBean_info{
|
position: relative;
|
margin-bottom: 20rpx;
|
}
|
.careBean_infoText{
|
font-size: 26rpx;
|
line-height: 54rpx;
|
font-weight: bold;
|
color: #000000;
|
}
|
.product-window .carnum view {
|
width: 84rpx;
|
text-align: center;
|
height: 100%;
|
line-height: 54rpx;
|
color: #dedede;
|
font-size: 45rpx;
|
}
|
|
.product-window .carnum .reduce {
|
line-height: 48rpx;
|
&.on{
|
color: #282828;
|
}
|
}
|
.product-window .carnum .plus {
|
line-height: 48rpx;
|
&.on{
|
color: #282828;
|
}
|
}
|
|
.product-window .carnum .input_num {
|
background: rgba(242, 242, 242, 1);
|
color: #282828;
|
font-size: 28rpx;
|
line-height: 54rpx;
|
height: 54rpx;
|
border-radius: 12rpx;
|
input {
|
font-size: 28rpx;
|
line-height: 54rpx!important;
|
height: 54rpx!important;
|
text-align: center;
|
}
|
}
|
.product-window .careBean_info .carnum .input_num{
|
width: 140rpx;
|
}
|
.product-window .joinBnt {
|
font-size: 30rpx;
|
width: 620rpx;
|
height: 86rpx;
|
border-radius: 50rpx;
|
text-align: center;
|
line-height: 86rpx;
|
color: #fff;
|
margin: 21rpx auto 0 auto;
|
}
|
|
.product-window .joinBnt.on {
|
background-color: #bbb;
|
color: #fff;
|
}
|
</style>
|
