!82 【功能修复】修复拼团详情页的价格

Merge pull request !82 from 卢越/master

pages/goods/groupon.vue

@@ -80,7 +80,7 @@
         <!-- 功能卡片 -->
         <view class="detail-cell-card detail-card ss-flex-col">
           <!-- 规格 -->
-          <detail-cell-sku :sku="state.selectedSkuPrice" @tap="state.showSelectSku = true" />
+          <detail-cell-sku :sku="state.selectedSku" @tap="state.showSelectSku = true" />
         </view>
 
         <!-- 参团列表 -->
@@ -90,6 +90,7 @@
         <s-select-groupon-sku
           :show="state.showSelectSku"
           :goodsInfo="state.goodsInfo"
+		  :selectedSku="state.selectedSku"
           :grouponAction="state.grouponAction"
           :grouponNum="state.grouponNum"
           @buy="onBuy"
@@ -125,7 +126,7 @@
             :disabled="state.goodsInfo.stock === 0 || state.activity.status !== 0"
           >
             <view class="btn-price">{{
-              fen2yuan(state.activity.price || state.goodsInfo.price)
+              fen2yuan(state.selectedSku.price * state.selectedSku.count || state.activity.price * state.selectedSku.count || state.goodsInfo.price * state.selectedSku.count || state.goodsInfo.price)
             }}</view>
             <view v-if="state.activity.startTime > new Date().getTime()">未开始</view>
             <view v-else-if="state.activity.endTime <= new Date().getTime()">已结束</view>
@@ -168,7 +169,7 @@
     goodsInfo: {}, // 商品信息
     goodsSwiper: [], // 商品轮播图
     showSelectSku: false, // 显示规格弹框
-    selectedSkuPrice: {}, // 选中的规格价格
+    selectedSku: {}, // 选中的规格属性
     activity: {}, // 团购活动
     grouponId: 0, // 团购ID
     grouponNum: 0, // 团购人数
@@ -183,7 +184,7 @@
 
   // 规格变更
   function onSkuChange(e) {
-    state.selectedSkuPrice = e;
+    state.selectedSku = e;
   }
 
   function onSkuClose() {

sheep/components/s-groupon-block/s-groupon-block.vue

@@ -1,37 +1,38 @@
 <!-- 装修组件 - 拼团 -->
 <template>
 	<view>
-		<view v-if="layoutType === 'threeCol'" class="goods-sm-box ss-flex ss-flex-wrap"
-			:style="[{ margin: '-' + data.space + 'rpx' }]">
-			<view v-for="product in productList" :key="product.id" class="goods-card-box" :style="[
-          {
-            padding: data.space + 'rpx',
-          },
-        ]">
-				<s-goods-column class="goods-card" size="sm" :goodsFields="data.fields" :tagStyle="tagStyle"
-					:data="product" :titleColor="data.fields.name?.color" :topRadius="data.borderRadiusTop"
-					:bottomRadius="data.borderRadiusBottom" @click="
-            sheep.$router.go('/pages/goods/groupon', {
-              id: props.data.activityId,
-            })
-          "></s-goods-column>
+		<view v-if="layoutType === 'threeCol'" class="goods-sm-box ss-flex ss-flex-wrap" :style="[{ margin: '-' + data.space + 'rpx' }]">
+			<view v-for="product in productList" class="goods-card-box" :key="product.id" :style="[{padding: data.space + 'rpx',},]">
+				<s-goods-column
+					class="goods-card"
+					size="sm"
+					:goodsFields="goodsFields"
+					:tagStyle="badge"
+					:data="product"
+					:titleColor="data.fields.name?.color"
+					:topRadius="data.borderRadiusTop"
+					:bottomRadius="data.borderRadiusBottom"
+					@click="sheep.$router.go('/pages/goods/groupon', { id: props.data.activityId, })">
+				</s-goods-column>
 			</view>
 		</view>
 		<!-- 样式2 一行一个 图片左 文案右 -->
 		<view class="goods-box" v-if="layoutType === 'oneCol'">
-			<view class="goods-list" v-for="(product, index) in productList" :key="index"
-				:style="[{ marginBottom: space + 'px' }]">
-				<s-goods-column class="goods-card" size="lg" :goodsFields="data.fields" :tagStyle="tagStyle"
-					:data="product" :titleColor="data.fields.name?.color"
-					:subTitleColor="data.fields.introduction?.color" :topRadius="data.borderRadiusTop"
-					:bottomRadius="data.borderRadiusBottom" @click="
-            sheep.$router.go('/pages/goods/groupon', {
-              id: props.data.activityId,
-            })
-          ">
+			<view class="goods-list" v-for="(product, index) in productList" :key="index" :style="[{ marginBottom: space + 'px' }]">
+				<s-goods-column
+					class="goods-card" size="lg"
+					:grouponTag="true"
+					:goodsFields="goodsFields"
+					:tagStyle="badge"
+					:data="product"
+					:titleColor="data.fields.name?.color"
+					:subTitleColor="data.fields.introduction?.color"
+					:topRadius="data.borderRadiusTop"
+					:bottomRadius="data.borderRadiusBottom"
+					@click="sheep.$router.go('/pages/goods/groupon', { id: props.data.activityId, })">
 					<template v-slot:cart>
 						<button class="ss-reset-button cart-btn" :style="[buyStyle]">
-							{{ btnBuy?.type === 'text' ? btnBuy.text : '' }}
+							{{ btnBuy?.type === 'text' ? btnBuy.text : '去拼团' }}
 						</button>
 					</template>
 				</s-goods-column>
@@ -47,6 +48,7 @@
 	import {
 		computed,
 		onMounted,
+		reactive,
 		ref
 	} from 'vue';
 	import sheep from '@/sheep';
@@ -55,28 +57,46 @@
 
 	// 接收参数
 	const props = defineProps({
+		// 装修数据
 		data: {
 			type: Object,
-			default () {},
+			default: () => ({}),
 		},
+		// 装修样式
 		styles: {
 			type: Object,
-			default () {},
+			default: () => ({}),
 		},
 	});
+	
+	// 设置相关信息是否显示
+	const goodsFields = reactive({
+	  // 商品价格
+	  price: { show: true },
+	  // 库存
+	  stock: { show: true },
+	  // 商品名称
+	  name: { show: true },
+	  // 商品介绍
+	  introduction: { show: true },
+	  // 市场价
+	  marketPrice: { show: true },
+	  // 销量
+	  salesCount: { show: true },
+	});
 
 	let {
 		layoutType,
-		tagStyle,
+		badge,
 		btnBuy,
-		space
+		space,
 	} = props.data;
 	let {
 		marginLeft,
 		marginRight
 	} = props.styles;
 
-	// 购买按钮样式
+	// 购买按钮样式（暂未实现）
 	const buyStyle = computed(() => {
 		let btnBuy = props.data.btnBuy;
 		if (btnBuy?.type === 'text') {
@@ -106,7 +126,7 @@
 		} = await SpuApi.getSpuDetail(activity.spuId)
 		// 循环活动信息，赋值拼团最低价格
 		activity.products.forEach((product) => {
-		  spu.price = Math.min(spu.price, product.combinationPrice); // 设置 SPU 的最低价格
+			spu.price = Math.min(spu.price, product.combinationPrice); // 设置 SPU 的最低价格
 		});
 		productList.value = [spu];
 	});
@@ -127,6 +147,7 @@
 			border-radius: 25rpx;
 			font-size: 24rpx;
 			color: #fff;
+			background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
 		}
 	}
 

sheep/components/s-seckill-block/s-seckill-block.vue

@@ -2,37 +2,39 @@
 <template>
 	<view>
 		<!-- 样式一：三列 - 上图下文 -->
-		<view v-if="layoutType === 'threeCol'" class="goods-sm-box ss-flex ss-flex-wrap"
-			:style="[{ margin: '-' + data.space + 'rpx' }]">
-			<view v-for="product in productList" :key="product.id" class="goods-card-box" :style="[
-          {
-            padding: data.space + 'rpx',
-          },
-        ]">
-				<s-goods-column class="goods-card" size="sm" :goodsFields="data.fields" :tagStyle="tagStyle"
-					:data="product" :titleColor="data.fields.name?.color" :topRadius="data.borderRadiusTop"
-					:bottomRadius="data.borderRadiusBottom" @click="
-            sheep.$router.go('/pages/goods/seckill', {
-              id: props.data.activityId,
-            })
-          "></s-goods-column>
+		<view v-if="layoutType === 'threeCol'" class="goods-sm-box ss-flex ss-flex-wrap" :style="[{ margin: '-' + data.space + 'rpx' }]">
+			<view v-for="product in productList" :key="product.id" class="goods-card-box" :style="[{padding: data.space + 'rpx',},]">
+				<s-goods-column
+					class="goods-card" size="sm"
+					:goodsFields="goodsFields"
+					:tagStyle="badge"
+					:data="product"
+					:titleColor="data.fields.name?.color"
+					:topRadius="data.borderRadiusTop"
+					:bottomRadius="data.borderRadiusBottom"
+					@click="sheep.$router.go('/pages/goods/seckill', { id: props.data.activityId, })">
+				</s-goods-column>
 			</view>
 		</view>
 		<!-- 样式二：一列 - 左图右文 -->
 		<view class="goods-box" v-if="layoutType === 'oneCol'">
 			<view class="goods-list" v-for="(product, index) in productList" :key="index"
 				:style="[{ marginBottom: space + 'px' }]">
-				<s-goods-column class="goods-card" size="lg" :goodsFields="data.fields" :tagStyle="tagStyle"
-					:data="product" :titleColor="data.fields.name?.color"
-					:subTitleColor="data.fields.introduction?.color" :topRadius="data.borderRadiusTop"
-					:bottomRadius="data.borderRadiusBottom" @click="
-            sheep.$router.go('/pages/goods/seckill', {
-              id: props.data.activityId,
-            })
-          ">
+				<s-goods-column
+					class="goods-card"
+					size="lg"
+					:goodsFields="goodsFields"
+					:seckillTag="true"
+					:tagStyle="badge"
+					:data="product"
+					:titleColor="data.fields.name?.color"
+					:subTitleColor="data.fields.introduction?.color"
+					:topRadius="data.borderRadiusTop"
+					:bottomRadius="data.borderRadiusBottom"
+					@click="sheep.$router.go('/pages/goods/seckill', { id: props.data.activityId, })">
 					<template v-slot:cart>
 						<button class="ss-reset-button cart-btn" :style="[buyStyle]">
-							{{ btnBuy?.type === 'text' ? btnBuy.text : '' }}
+							{{ btnBuy?.type === 'text' ? btnBuy.text : '立即秒杀' }}
 						</button>
 					</template>
 				</s-goods-column>
@@ -50,6 +52,7 @@
 	import {
 		computed,
 		onMounted,
+		reactive,
 		ref
 	} from 'vue';
 	import sheep from '@/sheep';
@@ -58,21 +61,39 @@
 
 	// 接收参数
 	const props = defineProps({
+		// 装修数据
 		data: {
 			type: Object,
-			default () {},
+			default: () => ({}),
 		},
+		// 装修样式
 		styles: {
 			type: Object,
-			default () {},
+			default: () => ({}),
 		},
 	});
-
+	
+	// 设置相关信息是否显示
+	const goodsFields = reactive({
+	  // 商品价格
+	  price: { show: true },
+	  // 库存
+	  stock: { show: true },
+	  // 商品名称
+	  name: { show: true },
+	  // 商品介绍
+	  introduction: { show: true },
+	  // 市场价
+	  marketPrice: { show: true },
+	  // 销量
+	  salesCount: { show: true },
+	});
+	
 	let {
 		layoutType,
-		tagStyle,
+		badge,
 		btnBuy,
-		space
+		space,
 	} = props.data;
 	let {
 		marginLeft,
@@ -139,6 +160,7 @@
 			border-radius: 25rpx;
 			font-size: 24rpx;
 			color: #fff;
+			background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
 		}
 	}
 

sheep/components/s-select-groupon-sku/s-select-groupon-sku.vue

@@ -22,7 +22,7 @@
             </view>
           </view>
           <view class="header-right-bottom ss-flex ss-col-center ss-row-between">
-            <view class="price-text"> {{ fen2yuan(goodsInfo.price) }}</view>
+            <view class="price-text"> {{ fen2yuan(state.selectedSku.price || goodsInfo.price || state.selectedSku.marketPrice) }}</view>
 
             <view class="stock-text ss-m-l-20">
               库存{{ state.selectedSku.stock || goodsInfo.stock }}件
@@ -63,7 +63,7 @@
               <view class="btn-title">{{ grouponNum + '人团' }}</view>
             </button>
             <button class="ss-reset-button btn-tox ss-flex-col" @tap="onBuy">
-              <view class="btn-price">{{ fen2yuan(goodsInfo.price) }}</view>
+              <view class="btn-price">{{ fen2yuan(state.selectedSku.price * state.selectedSku.count || goodsInfo.price * state.selectedSku.count || state.selectedSku.marketPrice * state.selectedSku.count || goodsInfo.price) }}</view>
               <view v-if="grouponAction === 'create'">立即开团</view>
               <view v-else-if="grouponAction === 'join'">参与拼团</view>
             </button>