<template>
|
<view style="padding: 0 20rpx;">
|
<view
|
class="goods-item"
|
v-for="(goods, index) in goodsList"
|
:key="goods.goodsId"
|
@click="selectGoods(goods, index)"
|
>
|
<image :src="goods.thumbnail" class="goods-image"></image>
|
<view class="goods-info">
|
<text class="goods-name">{{ goods.goodsName }}</text>
|
<view style="display: flex;">
|
<view class="goods-price" style="flex: 1;">¥{{ goods.price }}</view>
|
<view @click.stop="() => {}" style="flex: 1;display: flex;justify-content: center;align-items: center;">
|
<view style="width: 90rpx">数量：</view>
|
<uni-number-box v-model="goods.goodsNum" :min="0"/>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view style="position: fixed;bottom: 80rpx;display: flex;align-items: center;padding: 0 20rpx;width: calc(100% - 40rpx);">
|
<view style="flex:7">已选{{totalNum}}个商品,合计：<text class="goods-price">￥{{totalMoney}}</text></view>
|
<view style="flex:3;display: flex;align-items: flex-end">
|
<u-button @click="toPay" type="success" size="medium" :disabled="totalNum < 1">去支付</u-button>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {getGoodsDetail} from "@/api/video.js"
|
|
import '@/components/uview-components/uview-ui';
|
export default {
|
computed: {
|
totalMoney() {
|
return this.goodsList.reduce((total, goods) => {
|
return total + (goods.price * goods.goodsNum)
|
}, 0)
|
},
|
totalNum() {
|
return this.goodsList.filter(goods => goods.goodsNum !== 0).length;
|
}
|
},
|
data() {
|
return {
|
videoId: '',
|
goodsList: []
|
}
|
},
|
onLoad(option) {
|
this.videoId = option.videoId;
|
this.getGoodsList();
|
},
|
methods: {
|
// 获取商品列表
|
async getGoodsList() {
|
getGoodsDetail(this.videoId).then(res => {
|
this.goodsList = res.data.data
|
})
|
},
|
// 生成订单-支付
|
toPay() {
|
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.goods-item {
|
display: flex;
|
align-items: center;
|
padding: 20rpx 0;
|
border-bottom: 1rpx solid #f5f5f5;
|
}
|
.goods-image {
|
width: 100rpx;
|
height: 100rpx;
|
border-radius: 8rpx;
|
margin-right: 20rpx;
|
}
|
.goods-info {
|
flex: 1;
|
}
|
.goods-name {
|
font-size: 28rpx;
|
color: #333;
|
margin-bottom: 10rpx;
|
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
-webkit-box-orient: vertical;
|
overflow: hidden;
|
}
|
.goods-price {
|
font-size: 28rpx;
|
color: #f44;
|
font-weight: bold;
|
}
|
</style>
|
