130 lines
3.5 KiB
Vue
130 lines
3.5 KiB
Vue
<template>
|
|
<view>
|
|
<view class="padding-lr bg-white main-container">
|
|
<view class="cu-list menu-avatar margin-bottom-sm">
|
|
<view class="cu-item padding-bottom-sm">
|
|
<view class="cu-avatar xl" :style="'background-image:url(' + curSpec.picUrl + ');'">
|
|
</view>
|
|
<view class="content margin-left">
|
|
<text class="text-price text-red text-xxl">{{curSpec.salePrice}}</text>
|
|
<text class="text-gray text-sm flex justify-between">
|
|
{{curSpec.comments}}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex justify-between margin-lr-sm margin-tb-sm padding-lr">
|
|
<view>购买型号</view>
|
|
<view>购买数量</view>
|
|
</view>
|
|
<scroll-view class="certern-height-with-scroll" :scroll-y="true" :scroll-with-animation="true">
|
|
<view class="flex justify-between margin-lr-sm margin-tb-sm" v-for="(item,index) in specsList"
|
|
:key="item.id">
|
|
<view class='cu-tag padding' :class="curSpec.id === item.id ? 'line-main-color' : 'line-default'"
|
|
@click="chooseSpecs(item)">{{item.name}}</view>
|
|
<uni-number-box :min="0" :max="item.maxPieces" :value="0" @change="changePiecesNum($event, index)">
|
|
</uni-number-box>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<!-- 底部操作条 -->
|
|
<view class="cu-bar bg-white tabbar border shop fixed-bottom-bar">
|
|
<view class="action">
|
|
<view class="cuIcon-cartfill">
|
|
<view class="cu-tag badge" v-if="totalPickCount > 0">{{totalPickCount}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="action text-df center-grid">
|
|
<text class="margin-lr-xs">共计</text>
|
|
<text class="text-red text-price">{{totalPrice}}</text>
|
|
</view>
|
|
<view class="bg-main-color submit" @click="submit">确定</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "product-pick",
|
|
props: {
|
|
specsList: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
orderNow: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
curSpec: {},
|
|
// specsList: [],
|
|
totalPrice: 0,
|
|
pickList: [],
|
|
totalPickCount: 0
|
|
}
|
|
},
|
|
onReady() {
|
|
this.loadData();
|
|
},
|
|
methods: {
|
|
loadData() {
|
|
this.curSpec = this.specsList[0];
|
|
this.specsList.forEach(function(item) {
|
|
this.pickList.push({
|
|
price: item.price,
|
|
salePrice: item.salePrice,
|
|
pickCount: 0
|
|
})
|
|
}.bind(this));
|
|
},
|
|
changePiecesNum(piecesNum, index) {
|
|
let spec = this.pickList[index];
|
|
this.totalPrice -= spec.salePrice * (spec.pickCount - piecesNum);
|
|
this.totalPickCount -= spec.pickCount - piecesNum
|
|
this.pickList[index].pickCount = piecesNum;
|
|
},
|
|
chooseSpecs(item) {
|
|
this.curSpec = item;
|
|
},
|
|
submit() {
|
|
if (this.orderNow) {
|
|
// 从立即订购按钮进来的直接跳转到订单详情确认页
|
|
uni.navigateTo({
|
|
url: '../order/order-detail'
|
|
})
|
|
} else {
|
|
// 从加入购物车按钮进来的触发父页面事件
|
|
uni.$emit('product-detail_add2Cart', this.totalPickCount)
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fixed-bottom-bar .cuIcon-cartfill:before {
|
|
font-size: 64rpx;
|
|
}
|
|
|
|
.fixed-bottom-bar .text-df {
|
|
font-size: 28rpx !important;
|
|
}
|
|
|
|
.fixed-bottom-bar .center-grid {
|
|
width: 43% !important;
|
|
text-align: left;
|
|
}
|
|
|
|
.certern-height-with-scroll {
|
|
height: 600rpx;
|
|
margin-bottom: calc(100rpx - constant(safe-area-inset-bottom)/2);
|
|
margin-bottom: calc(100rpx - env(safe-area-inset-bottom)/2);
|
|
}
|
|
|
|
.main-container {
|
|
padding-top: 45rpx;
|
|
}
|
|
</style>
|