✨ 优惠劵列表：接入完成

pages/coupon/list.vue

@@ -1,265 +1,231 @@
 <!-- 优惠券中心  -->
 <template>
-	<s-layout title="优惠券" :bgStyle="{ color: '#f2f2f2' }">
-		<su-sticky bgColor="#fff">
-			<su-tabs :list="tabMaps" :scrollable="false" @change="onTabsChange" :current="state.currentTab"></su-tabs>
-		</su-sticky>
-		<s-empty v-if="state.pagination.total === 0" icon="/static/coupon-empty.png" text="暂无优惠券"></s-empty>
-		<template v-if="state.currentTab == '0'">
-			<view v-for="item in state.pagination.list" :key="item.id">
-				<s-coupon-list :data="item" @tap="
-					            sheep.$router.go('/pages/coupon/detail', {
-					              data: JSON.stringify(item),
-					            })">
-
-					<template #default>
-						<button class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center"
-							:class="item.get_status != 'can_get' ? 'border-btn' : ''" @click.stop="getBuy(item.id)"
-							:disabled="item.get_status != 'can_get'">
-							<!-- {{ item.status_text }} -->
-							{{item.status_text|| '立即使用' }}
-						</button>
-					</template>
-				</s-coupon-list>
-			</view>
-		</template>
-		<template v-else>
-			<view v-for="item in state.pagination.list" :key="item.id">
-				<s-coupon-list :data="item" type="user" @tap="
-					            sheep.$router.go('/pages/coupon/detail', {
-					              data: JSON.stringify(item),
-					            })
-					          ">
-
-					<template #default>
-						<button class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center" :class="
-                item.status == 'can_get' || item.status == 'can_use'
-                  ? ''
-                  : item.status == 'used' || item.status == 'expired'
-                  ? 'disabled-btn'
-                  : 'border-btn'
-              " :disabled="item.status != 'can_get' && item.status != 'can_use'" @click.stop="
+  <s-layout title="优惠券" :bgStyle="{ color: '#f2f2f2' }">
+    <su-sticky bgColor="#fff">
+      <su-tabs
+        :list="tabMaps"
+        :scrollable="false"
+        @change="onTabsChange"
+        :current="state.currentTab"
+      />
+    </su-sticky>
+    <s-empty
+      v-if="state.pagination.total === 0"
+      icon="/static/coupon-empty.png"
+      text="暂无优惠券"
+    />
+    <!-- 情况一：领劵中心 -->
+    <template v-if="state.currentTab == '0'">
+      <view v-for="item in state.pagination.list" :key="item.id">
+        <s-coupon-list
+          :data="item"
+          @tap="
+            sheep.$router.go('/pages/coupon/detail', {
+              data: JSON.stringify(item),
+            })
+          "
+        >
+          <template #default>
+            <button
+              class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center"
+              :class="!item.canTake ? 'border-btn' : ''"
+              @click.stop="getBuy(item.id)"
+              :disabled="!item.canTake"
+            >
+              {{ item.canTake ? '立即领取' : '已领取' }}
+            </button>
+          </template>
+        </s-coupon-list>
+      </view>
+    </template>
+    <!-- 情况二：我的优惠劵 -->
+    <template v-else>
+      <view v-for="item in state.pagination.list" :key="item.id">
+        <s-coupon-list
+          :data="item"
+          type="user"
+          @tap="
+            sheep.$router.go('/pages/coupon/detail', {
+              data: JSON.stringify(item),
+            })
+          "
+        >
+          <template #default>
+            <button
+              class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center"
+              :class=" item.status !== 1 ? 'disabled-btn': ''"
+              :disabled="item.status !== 1"
+              @click.stop="
                 sheep.$router.go('/pages/coupon/detail', {
                   id: item.coupon_id,
                   user_coupon_id: item.id,
                 })
-              ">
-							<!-- {{ item.status_text }} -->
-							{{item.status_text|| '立即使用' }}
-						</button>
-					</template>
-				</s-coupon-list>
-			</view>
-		</template>
+              "
+            >
+              {{ item.status === 1 ? '立即使用' : item.status === 2 ? '已使用' : '已过期' }}
+            </button>
+          </template>
+        </s-coupon-list>
+      </view>
+    </template>
 
-		<!-- <uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
+    <uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
         contentdown: '上拉加载更多',
-      }" @tap="loadmore" /> -->
-	</s-layout>
+      }" @tap="loadMore" />
+  </s-layout>
 </template>
 
 <script setup>
-	import sheep from '@/sheep';
-	import {
-		onLoad,
-		onReachBottom
-	} from '@dcloudio/uni-app';
-	import {
-		computed,
-		reactive
-	} from 'vue';
-	import _ from 'lodash';
+  import sheep from '@/sheep';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import { reactive } from 'vue';
+  import _ from 'lodash';
+  import { resetPagination } from '@/sheep/util';
+  import CouponApi from '@/sheep/api/promotion/coupon';
+
+  // 数据
+  const state = reactive({
+    currentTab: 0, // 当前 tab
+    type: '1',
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 5
+    },
+    loadStatus: '',
+  });
+
+  const tabMaps = [
+    {
+      name: '领券中心',
+      value: 'all',
+    },
+    {
+      name: '已领取',
+      value: '1',
+    },
+    {
+      name: '已使用',
+      value: '2',
+    },
+    {
+      name: '已失效',
+      value: '3',
+    },
+  ];
 
-	const pagination = {
-		data: [],
-		current_page: 1,
-		total: 1,
-		last_page: 1,
-	};
-	// 数据
-	const state = reactive({
-		currentTab: 0,
-		pagination: {
-			data: [],
-			current_page: 1,
-			total: 1,
-			last_page: 1,
-		},
-		loadStatus: '',
-		type: '1',
-	});
+  // TODO yunai:
+  function onTabsChange(e) {
+    state.currentTab = e.index;
+    state.type = e.value;
+    resetPagination(state.pagination)
+    if (state.currentTab == 0) {
+    	getData();
+    } else {
+      getCoupon();
+    }
+  }
 
-	const tabMaps = [
-		// {
-		//   name: '领券中心',
-		//   value: 'all',
-		// },
-		{
-			name: '已领取',
-			value: '1',
-		},
-		{
-			name: '已使用',
-			value: '2',
-		},
-		{
-			name: '已失效',
-			value: '3',
-		},
-	];
+  // 获得优惠劵模版列表
+  async function getData() {
+    state.loadStatus = 'loading';
+    const { data, code } = await CouponApi.getCouponTemplatePage({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
 
-	function onTabsChange(e) {
-		state.pagination = pagination
-		state.currentTab = e.index;
-		state.type = e.value;
-		// if (state.currentTab == 0) {
-		// 	getData();
-		// } else {
-		getCoupon();
-		// }
-	}
-	async function getData(page = 1, list_rows = 5) {
-		state.loadStatus = 'loading';
-		const res = await sheep.$api.coupon.list({
-			list_rows,
-			page
-		});
-		if (res.error === 0) {
-			let couponlist = _.concat(state.pagination.data, res.data.data);
-			state.pagination = {
-				...res.data,
-				data: couponlist,
-			};
-			if (state.pagination.current_page < state.pagination.last_page) {
-				state.loadStatus = 'more';
-			} else {
-				state.loadStatus = 'noMore';
-			}
-		}
-	}
+  // 获得我的优惠劵
+  async function getCoupon() {
+    state.loadStatus = 'loading';
+    const { data, code } = await CouponApi.getCouponPage({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+      status: state.type
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
 
-	async function getCoupon(page = 1, list_rows = 5) {
-		state.loadStatus = 'loading';
-		let res = await sheep.$api.coupon.userCoupon({
-			status: state.type,
-			pageSize: list_rows,
-			pageNo: page
-		});
-		if (res.code === 0) {
-			// 拦截修改数据
-			let obj = {
-				1: '可用',
-				2: '已用',
-				3: '过期'
-			}
-			let obj2 = {
-				1: '满减',
-				2: '折扣'
-			}
-			res.data.list = res.data.list.map(item => {
-				return {
-					...item,
-					enough: (item.usePrice / 100).toFixed(2),
-					amount: (item.discountPrice / 100).toFixed(2),
-					use_start_time: sheep.$helper.timeFormat(item.validStartTime, 'yyyy-mm-dd hh:MM:ss'),
-					use_end_time: sheep.$helper.timeFormat(item.validEndTime, 'yyyy-mm-dd hh:MM:ss'),
-					status_text: obj[item.status],
-					type_text: obj2[item.discountType]
-				}
-			});
-			if (page >= 2) {
-				let couponlist = _.concat(state.pagination.data, res.data.list);
+  // 领取优惠劵
+  async function getBuy(id) {
+    const { code } = await CouponApi.takeCoupon(id);
+    if (code !== 0) {
+      return;
+    }
+    uni.showToast({
+      title: '领取成功',
+    });
+    setTimeout(() => {
+      resetPagination(state.pagination);
+      getData();
+    }, 1000);
+  }
 
-				state.pagination = {
-					...res.data,
-					data: couponlist,
-				};
-				console.log(state.pagination, '拿到的优惠券数据');
-			} else {
-				state.pagination = res.data;
-				console.log(state.pagination, '拿到的优惠券数据');
-			}
-			// if (state.pagination.current_page < state.pagination.last_page) {
-			// 	state.loadStatus = 'more';
-			// } else {
-			// 	state.loadStatus = 'noMore';
-			// }
-		}
-	}
-	async function getBuy(id) {
-		const {
-			error,
-			msg
-		} = await sheep.$api.coupon.get(id);
-		if (error === 0) {
-			uni.showToast({
-				title: msg,
-			});
-			setTimeout(() => {
-				state.pagination = pagination
-				getData();
-			}, 1000);
-		}
-	}
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    if (state.currentTab === 0) {
+      getData();
+    } else {
+      getCoupon();
+    }
+  }
 
-	// 加载更多
-	function loadmore() {
-		if (state.loadStatus !== 'noMore') {
-			if (state.currentTab == 0) {
-				getData(state.pagination.current_page + 1);
-			} else {
-				getCoupon(state.pagination.current_page + 1);
-			}
-		}
-	}
-	onLoad((Option) => {
-		// if (Option.type === 'all' || !Option.type) {
-		// 	getData();
-		// } else {
-		// state.type = Option.type;
-		// Option.type === 'geted' ?
-		// 	() :
-		// 	Option.type === 'used' ?
-		// 	(state.currentTab = 1 && state.type = 2) :
-		// 	(state.currentTab = 2 && state.type = 3);
+  onLoad((Option) => {
+    // 领劵中心
+    if (Option.type === 'all' || !Option.type) {
+      getData();
+    // 我的优惠劵
+    } else {
+      state.type = Option.type;
+      Option.type === 'geted'
+        ? (state.currentTab = 1)
+        : Option.type === 'used'
+          ? (state.currentTab = 2)
+          : (state.currentTab = 3);
+      getCoupon();
+    }
+  });
 
-		if (Option.type == 'geted') {
-			state.currentTab = 0
-			state.type = 1
-		} else if (Option.type == 'used') {
-			state.currentTab = 1
-			state.type = 2
-		} else {
-			state.currentTab = 2
-			state.type = 3
-		}
-		getCoupon();
-		// }
-	});
-	onReachBottom(() => {
-		loadmore();
-	});
+  onReachBottom(() => {
+    loadMore();
+  });
 </script>
 <style lang="scss" scoped>
-	.card-btn {
-		// width: 144rpx;
-		padding: 0 16rpx;
-		height: 50rpx;
-		border-radius: 40rpx;
-		background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
-		color: #ffffff;
-		font-size: 24rpx;
-		font-weight: 400;
-	}
+  .card-btn {
+    // width: 144rpx;
+    padding: 0 16rpx;
+    height: 50rpx;
+    border-radius: 40rpx;
+    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    color: #ffffff;
+    font-size: 24rpx;
+    font-weight: 400;
+  }
 
-	.border-btn {
-		background: linear-gradient(90deg, var(--ui-BG-Main-opacity-4), var(--ui-BG-Main-light));
-		color: #fff !important;
-	}
+  .border-btn {
+    background: linear-gradient(90deg, var(--ui-BG-Main-opacity-4), var(--ui-BG-Main-light));
+    color: #fff !important;
+  }
 
-	.disabled-btn {
-		background: #cccccc;
-		background-color: #cccccc !important;
-		color: #fff !important;
-	}
-</style>
+  .disabled-btn {
+    background: #cccccc;
+    background-color: #cccccc !important;
+    color: #fff !important;
+  }
+</style>

pages/index/search.vue

@@ -1,3 +1,4 @@
+<!-- 搜索界面 -->
 <template>
   <s-layout class="set-wrap" title="搜索" :bgStyle="{ color: '#FFF' }">
     <view class="ss-p-x-24">
@@ -33,14 +34,18 @@
   import { reactive } from 'vue';
   import sheep from '@/sheep';
   import { onLoad } from '@dcloudio/uni-app';
+
   const state = reactive({
     historyList: [],
   });
 
   // 搜索
   function onSearch(keyword) {
-    if (!keyword) return;
+    if (!keyword) {
+      return;
+    }
     saveSearchHistory(keyword);
+    // 前往商品列表（带搜索条件）
     sheep.$router.go('/pages/goods/list', { keyword });
   }
 
@@ -53,7 +58,7 @@
     // 置顶关键词
     state.historyList.unshift(keyword);
 
-    // 最多保留10条记录
+    // 最多保留 10 条记录
     if (state.historyList.length >= 10) {
       state.historyList.length = 10;
     }
@@ -72,6 +77,7 @@
       },
     });
   }
+
   onLoad(() => {
     state.historyList = uni.getStorageSync('searchHistory') || [];
   });

sheep/api/coupon.js

@@ -12,18 +12,7 @@ export default {
 				showLoading: false,
 			},
 		}),
-	userCoupon: (params) =>
-		request2({
-			url: 'promotion/coupon/page',
-			method: 'GET',
-			params,
-		}),
-	// userCoupon: (params) =>
-	//   request({
-	//     url: 'user/coupon',
-	//     method: 'GET',
-	//     params,
-	//   }),
+
 	detail: (id, user_coupon_id) =>
 		request({
 			url: 'coupon/' + id,
@@ -37,9 +26,4 @@ export default {
 			url: 'coupon/get/' + id,
 			method: 'POST',
 		}),
-	listByGoods: (id) =>
-		request({
-			url: 'coupon/listByGoods/' + id,
-			method: 'GET',
-		}),
 };

sheep/api/promotion/coupon.js

@@ -1,6 +1,6 @@
 import request from '@/sheep/request';
 
-export default {
+const CouponApi = {
   // 获得优惠劵模板列表
   getCouponTemplateListByIds: (ids) => {
     return request({
@@ -17,4 +17,30 @@ export default {
       params: { spuId, productScope, count },
     });
   },
+  // 获得优惠劵模版分页
+  getCouponTemplatePage: (params) => {
+    return request({
+      url: '/app-api/promotion/coupon-template/page',
+      method: 'GET',
+      params,
+    });
+  },
+  // 我的优惠劵列表
+  getCouponPage: (params) => {
+    return request({
+      url: '/app-api/promotion/coupon/page',
+      method: 'GET',
+      params,
+    });
+  },
+  // 领取优惠券
+  takeCoupon: (templateId) => {
+    return request({
+      url: '/app-api/promotion/coupon/take',
+      method: 'POST',
+      data: { templateId },
+    });
+  },
 };
+
+export default CouponApi;

sheep/components/s-coupon-list/s-coupon-list.vue

@@ -1,195 +1,210 @@
 <template>
-	<view class="ss-m-20" :style="{ opacity: disabled ? '0.5' : '1' }">
-		<view class="content">
-			<!--      <view
+  <view class="ss-m-20" :style="{ opacity: disabled ? '0.5' : '1' }">
+    <view class="content">
+      <view
         class="tag ss-flex ss-row-center"
-        :class="
-          data.status == 'expired' || data.status == 'used' ? 'disabled-bg-color' : 'info-bg-color'
-        "
-        >{{ data.type_text }}</view
-      > -->
-			<view class="title ss-m-x-30 ss-p-t-18">
-				<view class="ss-flex ss-row-between">
-					<view class="value-text ss-flex-1 ss-m-r-10" :class="
-              data.status == 'expired' || data.status == 'used' ? 'disabled-color' : 'info-color'
-            ">{{ data.name }}</view>
-					<view>
-						<view class="ss-flex ss-col-bottom" :class="
-                data.status != 'expired' && data.status != 'used' ? 'price-text' : 'disabled-color'
-              ">
-							<view class="value-reduce ss-m-b-10" v-if="data.type === 'reduce'">￥</view>
-							<view class="value-price">{{ data.amount }}</view>
-							<view class="value-discount ss-m-b-10 ss-m-l-4" v-if="data.type === 'discount'">折</view>
-						</view>
-					</view>
-				</view>
-				<view class="ss-flex ss-row-between ss-m-t-16">
-					<view class="sellby-text" :class="
-              data.status == 'expired' || data.status == 'used'
-                ? 'disabled-color'
-                : 'subtitle-color'
-            ">
-						{{'有效期：' + data.use_start_time.substring(0, 11) }}至
-						{{ data.use_end_time.substring(0, 11)  }}
-						<!-- 				{{
-              type === 'user'
-                ? '有效期：' + data.use_start_time.substring(0, 11)
-                : '领取时间：' + data.get_start_time.substring(0, 11)
-            }}至
-						{{
-              type === 'user'
-                ? data.use_end_time.substring(0, 11)
-                : data.get_end_time.substring(0, 11)
-            }} -->
-					</view>
-					<view class="value-enough" :class="
-              data.status == 'expired' || data.status == 'used'
-                ? 'disabled-color'
-                : 'subtitle-color'
-            ">满{{ data.enough }}可用</view>
-				</view>
-			</view>
-		</view>
-
-		<view class="desc ss-flex ss-row-between">
-			<view>
-				<view class="desc-title">
-					{{ data.description }}
-				</view>
-				<view>
-					<slot name="reason">
-					</slot>
-				</view>
-			</view>
-			<view>
-				<slot></slot>
-			</view>
-		</view>
-	</view>
+        :class="isDisable ? 'disabled-bg-color' : 'info-bg-color'"
+      >
+        {{ data.discountType === 1 ? '满减券' : '折扣券' }}
+      </view>
+      <view class="title ss-m-x-30 ss-p-t-18">
+        <view class="ss-flex ss-row-between">
+          <view
+            class="value-text ss-flex-1 ss-m-r-10"
+            :class="isDisable ? 'disabled-color' : 'info-color'"
+          >
+            {{ data.name }}
+          </view>
+          <view>
+            <view
+              class="ss-flex ss-col-bottom"
+              :class="isDisable ? 'disabled-color' : 'price-text'"
+            >
+              <view class="value-reduce ss-m-b-10" v-if="data.discountType === 1">￥</view>
+              <view class="value-price">
+                {{
+                  data.discountType === 1
+                    ? fen2yuan(data.discountPrice)
+                    : data.discountPercent / 10.0
+                }}
+              </view>
+              <view class="value-discount ss-m-b-10 ss-m-l-4" v-if="data.discountType === 2"
+                >折</view
+              >
+            </view>
+          </view>
+        </view>
+        <view class="ss-flex ss-row-between ss-m-t-16">
+          <view
+            class="sellby-text"
+            :class=" isDisable ? 'disabled-color' : 'subtitle-color'"
+            v-if="data.validityType === 2"
+          >
+            有效期：领取后 {{ data.fixedEndTerm }} 天内可用
+          </view>
+          <view
+            class="sellby-text"
+            :class=" isDisable ? 'disabled-color' : 'subtitle-color'"
+            v-else
+          >
+            有效期: {{ sheep.$helper.timeFormat(data.validStartTime, 'yyyy-mm-dd') }} 至
+            {{ sheep.$helper.timeFormat(data.validEndTime, 'yyyy-mm-dd') }}
+          </view>
+          <view
+            class="value-enough"
+            :class="isDisable ? 'disabled-color' : 'subtitle-color'"
+          >
+            满 {{ fen2yuan(data.usePrice) }} 可用
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- TODO 芋艿：可优化，增加优惠劵的描述 -->
+    <view class="desc ss-flex ss-row-between">
+      <view>
+        <view class="desc-title">{{ data.description }}</view>
+        <view>
+          <slot name="reason" />
+        </view>
+      </view>
+      <view>
+        <slot />
+      </view>
+    </view>
+  </view>
 </template>
 
 <script setup>
-	import {
-		reactive
-	} from 'vue';
-	import sheep from '@/sheep';
-	const state = reactive({
-		stateMap: {
-			0: '立即领取',
-			1: '去使用',
-		},
-	});
-	// 接受参数
-	const props = defineProps({
-		data: {
-			type: Object,
-			default: {},
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		type: {
-			type: String,
-			default: 'coupon',
-		},
-	});
+  import { computed, reactive } from 'vue';
+  import { fen2yuan } from '../../hooks/useGoods';
+  import sheep from '../../index';
+
+  const state = reactive({
+    stateMap: {
+      0: '立即领取',
+      1: '去使用',
+    },
+  });
+
+  const isDisable = computed(() => {
+    if (props.type === 'coupon') {
+      return false;
+    }
+    return props.data.status !== 1;
+  });
+
+  // 接受参数
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: {},
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    type: {
+      type: String,
+      default: 'coupon', // coupon 优惠劵模版；user 用户优惠劵
+    },
+  });
 </script>
 
 <style lang="scss" scoped>
-	.info-bg-color {
-		background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
-	}
-
-	.disabled-bg-color {
-		background: #999;
-	}
-
-	.info-color {
-		color: #333;
-	}
-
-	.subtitle-color {
-		color: #666;
-	}
-
-	.disabled-color {
-		color: #999;
-	}
-
-	.content {
-		width: 100%;
-		background: #fff;
-		border-radius: 20rpx 20rpx 0 0;
-		-webkit-mask: radial-gradient(circle at 12rpx 100%, #0000 12rpx, red 0) -12rpx;
-		box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04);
-
-		.tag {
-			width: 100rpx;
-
-			color: #fff;
-			height: 40rpx;
-			font-size: 24rpx;
-			border-radius: 20rpx 0 20rpx 0;
-		}
-
-		.title {
-			padding-bottom: 22rpx;
-			border-bottom: 2rpx dashed #d3d3d3;
-
-			.value-text {
-				font-size: 32rpx;
-				font-weight: 600;
-			}
-
-			.sellby-text {
-				font-size: 24rpx;
-				font-weight: 400;
-			}
-
-			.value-price {
-				font-size: 64rpx;
-				font-weight: 500;
-				line-height: normal;
-				font-family: OPPOSANS;
-			}
-
-			.value-reduce {
-				line-height: normal;
-				font-size: 32rpx;
-			}
-
-			.value-discount {
-				line-height: normal;
-				font-size: 28rpx;
-			}
-
-			.value-enough {
-				font-size: 24rpx;
-				font-weight: 400;
-				font-family: OPPOSANS;
-			}
-		}
-	}
-
-	.desc {
-		width: 100%;
-		background: #fff;
-		-webkit-mask: radial-gradient(circle at 12rpx 0%, #0000 12rpx, red 0) -12rpx;
-		box-shadow: rgba(#000, 0.1);
-		box-sizing: border-box;
-		padding: 24rpx 30rpx;
-		box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04);
-		border-radius: 0 0 20rpx 20rpx;
-
-		.desc-title {
-			font-size: 24rpx;
-			color: #999;
-			font-weight: 400;
-		}
-	}
-
-	.price-text {
-		color: #ff0000;
-	}
+  .info-bg-color {
+    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+  }
+
+  .disabled-bg-color {
+    background: #999;
+  }
+
+  .info-color {
+    color: #333;
+  }
+
+  .subtitle-color {
+    color: #666;
+  }
+
+  .disabled-color {
+    color: #999;
+  }
+
+  .content {
+    width: 100%;
+    background: #fff;
+    border-radius: 20rpx 20rpx 0 0;
+    -webkit-mask: radial-gradient(circle at 12rpx 100%, #0000 12rpx, red 0) -12rpx;
+    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04);
+
+    .tag {
+      width: 100rpx;
+
+      color: #fff;
+      height: 40rpx;
+      font-size: 24rpx;
+      border-radius: 20rpx 0 20rpx 0;
+    }
+
+    .title {
+      padding-bottom: 22rpx;
+      border-bottom: 2rpx dashed #d3d3d3;
+
+      .value-text {
+        font-size: 32rpx;
+        font-weight: 600;
+      }
+
+      .sellby-text {
+        font-size: 24rpx;
+        font-weight: 400;
+      }
+
+      .value-price {
+        font-size: 64rpx;
+        font-weight: 500;
+        line-height: normal;
+        font-family: OPPOSANS;
+      }
+
+      .value-reduce {
+        line-height: normal;
+        font-size: 32rpx;
+      }
+
+      .value-discount {
+        line-height: normal;
+        font-size: 28rpx;
+      }
+
+      .value-enough {
+        font-size: 24rpx;
+        font-weight: 400;
+        font-family: OPPOSANS;
+      }
+    }
+  }
+
+  .desc {
+    width: 100%;
+    background: #fff;
+    -webkit-mask: radial-gradient(circle at 12rpx 0%, #0000 12rpx, red 0) -12rpx;
+    box-shadow: rgba(#000, 0.1);
+    box-sizing: border-box;
+    padding: 24rpx 30rpx;
+    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04);
+    border-radius: 0 0 20rpx 20rpx;
+
+    .desc-title {
+      font-size: 24rpx;
+      color: #999;
+      font-weight: 400;
+    }
+  }
+
+  .price-text {
+    color: #ff0000;
+  }
 </style>