110 lines
2.9 KiB
Vue
110 lines
2.9 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<view class="padding-tb-lg padding-lr bg-white">
|
||
|
|
<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>
|
||
|
|
<view class="margin-bottom-lg certern-height-with-scroll">
|
||
|
|
<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>
|
||
|
|
</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">确定</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "product-pick",
|
||
|
|
props: {
|
||
|
|
specsList: {
|
||
|
|
type: Array,
|
||
|
|
default: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</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;
|
||
|
|
overflow: scroll;
|
||
|
|
}
|
||
|
|
</style>
|