From 948da1610a8b2a41b98ebfcd8643029c3bd7f469 Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期一, 16 六月 2025 15:30:42 +0800
Subject: [PATCH] 视频商品点击跳转页面
---
pages/tabbar/video/video.vue | 2
pages.json | 10 +++
pages/video/video-goods-detail.vue | 101 +++++++++++++++++++++++++++++++++
api/video.js | 13 ++++
pages/tabbar/index/home.vue | 8 ++
5 files changed, 132 insertions(+), 2 deletions(-)
diff --git a/api/video.js b/api/video.js
index 4d5e90d..6c830ed 100644
--- a/api/video.js
+++ b/api/video.js
@@ -36,6 +36,19 @@
}
/**
+ * 鑾峰彇瑙嗛鎮寕鍟嗗搧
+ *
+ * @param videoId
+ */
+ export function getGoodsDetail(videoId) {
+ return http.request({
+ url: "/lmk/video/goods/detail/" + videoId,
+ method: Method.GET,
+ needToken: true
+ });
+}
+
+/**
* 淇濆瓨瑙嗛鎾斁璁板綍
*
* @param params
diff --git a/pages.json b/pages.json
index 5931aad..a1d9881 100644
--- a/pages.json
+++ b/pages.json
@@ -964,6 +964,16 @@
"style": {
"navigationBarTitleText": "瑙嗛缂栬緫"
}
+ },
+ {
+ "path" : "video-goods-detail",
+ "style" :
+ {
+ "navigationBarTitleText" : "瑙嗛鎺ㄨ崘鍟嗗搧",
+ "componentPlaceholder": {
+ "u-button": "view"
+ }
+ }
}
]
},
diff --git a/pages/tabbar/index/home.vue b/pages/tabbar/index/home.vue
index d665256..57c31bb 100644
--- a/pages/tabbar/index/home.vue
+++ b/pages/tabbar/index/home.vue
@@ -86,7 +86,7 @@
<view class="goods-link">
<swiper @change="goodsChange" :autoplay="true" :interval="4000" style="height: 120rpx;">
<swiper-item v-for="goods in item.goodsList" :key="goods.goodsId">
- <view class="goods-container">
+ <view class="goods-container" @click="jumpToPay(item.id)">
<!-- 鍟嗗搧鍥剧墖 -->
<image class="goods-image" :src="goods.thumbnail" mode="aspectFill"></image>
@@ -319,6 +319,12 @@
this.initVideoContexts();
},
methods: {
+ // 鐐瑰嚮鍟嗗搧璺宠浆
+ jumpToPay(videoId) {
+ uni.navigateTo({
+ url: '/pages/video/video-goods-detail?videoId=' + videoId
+ });
+ },
// 杞挱鍥惧彉鍖�
imgChange(e) {
this.currentImgIndex = e.detail.current;
diff --git a/pages/tabbar/video/video.vue b/pages/tabbar/video/video.vue
index 4a7c780..ffeb496 100644
--- a/pages/tabbar/video/video.vue
+++ b/pages/tabbar/video/video.vue
@@ -132,7 +132,7 @@
<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.selectNum"/>
+ <uni-number-box v-model="goods.selectNum" :min="0"/>
</view>
</view>
</view>
diff --git a/pages/video/video-goods-detail.vue b/pages/video/video-goods-detail.vue
new file mode 100644
index 0000000..d12c0d1
--- /dev/null
+++ b/pages/video/video-goods-detail.vue
@@ -0,0 +1,101 @@
+<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 UButton from '@/uview-components/uview-ui/components/u-button/u-button.vue';
+ export default {
+ components: {UButton},
+ 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>
--
Gitblit v1.8.0