<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 { buyBack } from "@/api/trade.js";
|
import '@/components/uview-components/uview-ui';
|
import { getSessionId, userAction } from "@/api/userAction.js";
|
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: [],
|
pageSessionNo:"",
|
actionParam:{
|
sessionId:'',
|
actionType:"PAGE",
|
joinType:"SELF",
|
pageCode:"RECOMMEND_VIDEO_GOODS",
|
pageParams:"{}",
|
pageStatus:"JOIN",
|
pageType:"DETAIL"
|
}
|
}
|
},
|
onUnload() {
|
let param = this.actionParam;
|
if (this.sendOnShow)return
|
param.pageStatus = "LEAVE"
|
userAction(param)
|
},
|
onHide() {
|
this.startHidenTime = Date.now()
|
let param = this.actionParam;
|
this.sendOnShow = true;
|
param.pageStatus = "LEAVE"
|
userAction(param)
|
},
|
onShow() {
|
getSessionId().then(res=>{
|
this.pageSessionNo = res.data.data
|
if(this.pageSessionNo){
|
let param = this.actionParam;
|
param.sessionId = this.pageSessionNo
|
userAction(param)
|
}
|
})
|
},
|
onLoad(option) {
|
this.videoId = option.videoId;
|
this.actionParam.pageParams = JSON.stringify(option)
|
this.getGoodsList();
|
},
|
methods: {
|
selectGoods(goods,id){
|
uni.navigateTo({
|
url: `/pages/product/goods?id=${goods.id}&goodsId=${goods.goodsId}`
|
})
|
},
|
// 获取商品列表
|
async getGoodsList() {
|
getGoodsDetail(this.videoId).then(res => {
|
this.goodsList = res.data.data
|
})
|
},
|
// 生成订单-支付
|
toPay() {
|
const buyList = this.goodsList.map(goods => {
|
return {
|
skuId: goods.id,
|
num: goods.goodsNum
|
}
|
})
|
buyBack(buyList).then(res => {
|
uni.navigateTo({
|
url: "/pages/order/fillorder?way=CART"
|
})
|
})
|
}
|
}
|
}
|
</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>
|
