ソースを参照

【界面优化】优化装修秒杀列表的样式,补全关键信息

卢越 1 年間 前
コミット
f10c9ec16c
1 ファイル変更50 行追加28 行削除
  1. 50 28
      sheep/components/s-seckill-block/s-seckill-block.vue

+ 50 - 28
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%);
 		}
 	}