<template> <uni-popup ref="goodsPopup" type="bottom"> <view class="wrap w-100"> <view class="flex j-start a-center" v-if="goods" > <image class="goods-cover mr-2" :src="goods.cover" mode="aspectFit" /> <view class="font-28 font-bold">{{goods.title}}</view> </view> <scroll-view scroll-y class="sku-list w-100 font-28"> <view class="sku-item py-2" v-for="(item, index) in skuData" :key="item.sku_id" > <view class="w-100 flex j-between a-center mb-2"> <view class="flex-1">{{item.spec_str}}</view> <view class="step-wrap"> <input-number :defaultVal="item.counts" :index="index" @change="numberChange" /> </view> </view> <view class="w-100 flex j-between a-center"> <view class="flex-1 text-left price-txt"> <!-- 如果不是阶梯价 ? 价格 === 0 ? 询价 : 固定售价 --> <text v-if="item.is_tiered === '1'">¥{{item.tiered_pri}}</text> <text v-else-if="item.is_tiered === '0' && item.price === '0'">询价</text> <text v-else>¥{{item.price}}</text> <text class="originPrice ml-1">¥{{item.original_price}}</text> </view> <view class="flex-1 text-center">库存:{{item.inventory}}</view> <view class="payCount text-center">{{item.origin_number_sku}}件起购</view> </view> </view> </scroll-view> <view class="flex w-100 a-center flex-column font-28 mt-2"> <view class="as-end"> 共<text class="btn-theme">{{totalCounts}}</text>件 <text class=" ml-2 price btn-theme">¥{{totalPrice}}</text> </view> </view> <!-- btn --> <view class="w-100 btn-wrap flex j-between a-center text-center font-32"> <view class="btn-cart flex-1" @click.stop="handleCart">加入购物车</view> <view class="btn-pay flex-1" @click.stop="handlePay">立即购买</view> </view> </view> </uni-popup> </template> <script> import uniPopup from '@/components/uni-popup/index.vue' import price from '@/components/price/index.vue' import inputNumber from '@/components/inputNumber/index.vue' import { addCart } from '@/apis/carts.js' import { mapActions } from 'vuex' export default { name: 'goods-popup', data() { return { goods: null, skuData: [], currentSku: null, // 一次只能提交一个规格到购物车: 0, totalCounts: 0, totalPrice: 0 } }, components: { uniPopup, inputNumber, price }, computed: { // 总数 // totalCounts() { // return this.skuData.reduce((pre, cur) => { // return pre + cur.counts // }, 0) // }, // // 总价 // totalPrice() { // return 1 // } }, methods: { ...mapActions('cart', ['setCount']), /** * @param {Object} params * goodsInfo: { cover 封面 title } goodsSku sku */ async show(params) { try{ console.log(params) this.goods = params.goodsInfo this.skuData = params.skuData this.skuData.forEach(item => item.counts = 0) this.$refs.goodsPopup.open() }catch(e){ console.log(e) this.$toast({title: e.msg || '程序错误'}) } }, hide() { this.$refs.goodsPopup.close() this.showSku = false this.detail = null this.currentSku = null this.skuData = [] this.goods = null }, numberChange(e) { console.log(e) const skuData = this.skuData const idx = e.index const value = e.val this.currentSku = { goods_id: skuData[idx].goods_id, cart_number: value, sku_id: skuData[idx].sku_id } this.$set(this.skuData[idx], 'counts', value) this.total() }, total() { const skuData = this.skuData this.totalCounts = skuData.reduce((pre, cur) => { return pre + cur.counts}, 0) this.totalPrice = skuData.reduce((pre, cur) => { return pre + ~~cur.price * cur.counts }, 0) }, // 加入购物车 async handleCart() { console.log('33333333') try{ console.log('00003333') console.log(this.currentSku) if(!this.currentSku) return const { status, data } = await addCart(this.currentSku) if(status) { this.$toast({title: '加入购物车成功', cb: this.hide}) this.setCount() } }catch(e){ console.log(e) this.$toast({title: '加入购物车失败'}) //TODO handle the exception } }, // 下单 handlePay() { console.log('00000') } } } </script> <style lang="scss" scoped> .wrap { position: relative; @include borderBox(20rpx, 20rpx); padding-bottom: 118rpx;// 20 + 98 background-color: #fff; .goods-cover { width: 160rpx; height: 160rpx; } .sku-list { height: 372rpx; @include borderBox(30rpx, 20rpx); .sku-item { border-bottom: 1rpx solid $line; } .step-wrap { flex: 0 0 224rpx; width: 224rpx; height: 64rpx; } .payCount { flex: 0 0 224rpx; font-size: 20rpx; color: $desc; } .price-txt { color: $primary; .originPrice { color: $desc; text-decoration: line-through; } } } .btn-wrap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 98rpx; .btn-cart, .btn-pay { color: #fff; font-weight: bold; line-height: 98rpx; } .btn-cart { background-color: #FFBB33; } .btn-pay { background-color: $primary; } } .btn-theme { color: $primary; } } </style>