视频商品点击跳转页面

xiangpei

2025-06-16 948da1610a8b2a41b98ebfcd8643029c3bd7f469

视频商品点击跳转页面

 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

 pages.json

@@ -964,6 +964,16 @@
                    "style": {
                        "navigationBarTitleText": "视频编辑"
                    }
                },
                {
                    "path" : "video-goods-detail",
                    "style" : 
                    {
                        "navigationBarTitleText" : "视频推荐商品",
                        "componentPlaceholder": {
                            "u-button": "view"
                        }
                    }
                }
            ]
        },

 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;

 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>

 pages/video/video-goods-detail.vue

New file
@@ -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>