✨ 优惠劵详情：50%

pages/coupon/detail.vue

@@ -6,94 +6,134 @@
       <view class="detail-wrap ss-p-20">
         <view class="detail-box">
           <view class="tag-box ss-flex ss-col-center ss-row-center">
-						<image class="tag-image" :src="sheep.$url.static('/static/img/shop/app/coupon_icon.png')"
+            <image
-							mode="aspectFit"></image>
+              class="tag-image"
+              :src="sheep.$url.static('/static/img/shop/app/coupon_icon.png')"
+              mode="aspectFit"
+            />
           </view>
           <view class="top ss-flex-col ss-col-center">
-						<view class="title ss-m-t-50 ss-m-b-20 ss-m-x-20">{{ state.list.name }}</view>
+            <view class="title ss-m-t-50 ss-m-b-20 ss-m-x-20">{{ state.coupon.name }}</view>
-						<view class="subtitle ss-m-b-50">满{{ state.list.enough }}减{{ state.list.amount }}</view>
+            <view class="subtitle ss-m-b-50">
-						<!-- (state.list.get_status != 'can_get' && state.list.get_status != 'can_use') ||
+              满 {{ fen2yuan(state.coupon.usePrice) }} 元，
-						 state.userCouponId -->
+              {{ state.coupon.discountType === 1
-						<button class="ss-reset-button ss-m-b-30" :class="
+                ? '减 ' + fen2yuan(state.coupon.discountPrice) + ' 元'
-                state.list.get_status == 'can_get' || state.list.get_status == 'can_use'
+                : '打 ' + state.coupon.discountPercent / 10.0 + ' 折' }}
-                  ? 'use-btn'
+            </view>
-                  : 'disable-btn' " :disabled="state.list.status_text=='已过期'" @click="getCoupon">
+            <button
-							<!-- {{ state.list.get_status_text }} -->
+              class="ss-reset-button ss-m-b-30"
-							立即使用
+              :class="state.coupon.canTake || state.coupon.status === 1
+                  ? 'use-btn' // 优惠劵模版（可领取）、优惠劵（可使用）
+                  : 'disable-btn'
+              "
+              :disabled="!state.coupon.canTake"
+              @click="getCoupon"
+            >
+              <text v-if="state.id > 0">{{ state.coupon.canTake ? '立即领取' : '已领取' }}</text>
+              <text v-else>
+                {{ state.coupon.status === 1 ? '立即使用' : state.coupon.status === 2 ? '已使用' : '已过期' }}
+              </text>
             </button>
-						<view class="time ss-m-y-30" v-if="
+            <view class="time ss-m-y-30" v-if="state.coupon.validityType === 2">
-                state.list.get_status == 'can_get' ||
+              有效期：领取后 {{ state.coupon.fixedEndTerm }} 天内可用
-                state.list.get_status == 'cannot_get' ||
-                state.list.get_status == 'get_over'
-              ">
-							领取时间：{{ state.list.get_start_time }}至{{ state.list.get_end_time }}
             </view>
             <view class="time ss-m-y-30" v-else>
-							有效期：{{ state.list.use_start_time }}至{{ state.list.use_end_time }}
+              有效期: {{ sheep.$helper.timeFormat(state.coupon.validStartTime, 'yyyy-mm-dd') }} 至
+              {{ sheep.$helper.timeFormat(state.coupon.validEndTime, 'yyyy-mm-dd') }}
             </view>
             <view class="coupon-line ss-m-t-14"></view>
           </view>
           <view class="bottom">
             <view class="type ss-flex ss-col-center ss-row-between ss-p-x-30">
               <view>优惠券类型</view>
-							<view>{{ state.list.type_text }}</view>
+              <view>{{ state.coupon.discountType === 1 ? '满减券' : '折扣券' }}</view>
             </view>
+            <!-- TODO 芋艿：可优化，增加优惠劵的描述 -->
             <uni-collapse>
-							<uni-collapse-item title="优惠券说明" v-if="state.list.description">
+              <uni-collapse-item title="优惠券说明" v-if="state.coupon.description">
                 <view class="content ss-p-b-20">
-									<text class="des ss-p-l-30">{{ state.list.description }}</text>
+                  <text class="des ss-p-l-30">{{ state.coupon.description }}</text>
                 </view>
               </uni-collapse-item>
             </uni-collapse>
           </view>
         </view>
       </view>
+
       <!-- 适用商品 -->
-			<view class="all-user ss-flex ss-row-center ss-col-center" v-if="state.list.use_scope == 'all_use'">
+      <view
+        class="all-user ss-flex ss-row-center ss-col-center"
+        v-if="state.list.use_scope == 'all_use'"
+      >
         {{ state.list.use_scope_text }}
       </view>
 
       <su-sticky v-else bgColor="#fff">
         <view class="goods-title ss-p-20">{{ state.list.use_scope_text }}</view>
-				<su-tabs :scrollable="true" :list="state.tabMaps" @change="onTabsChange" :current="state.currentTab"
+        <su-tabs
-					v-if="state.list.use_scope == 'category'"></su-tabs>
+          :scrollable="true"
+          :list="state.tabMaps"
+          @change="onTabsChange"
+          :current="state.currentTab"
+          v-if="state.list.use_scope == 'category'"
+        ></su-tabs>
       </su-sticky>
       <view v-if="state.list.use_scope == 'goods' || state.list.use_scope == 'disabled_goods'">
         <view v-for="(item, index) in state.list.items_value" :key="index">
-					<s-goods-column class="ss-m-20" size="lg" :data="item"
+          <s-goods-column
+            class="ss-m-20"
+            size="lg"
+            :data="item"
             :titleColor="props.goodsFieldsStyle?.title?.color"
             :subTitleColor="props.goodsFieldsStyle?.subtitle?.color"
-						@click="sheep.$router.go('/pages/goods/index', { id: item.id })" :goodsFields="{
+            @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
+            :goodsFields="{
               title: { show: true },
               subtitle: { show: true },
               price: { show: true },
               original_price: { show: true },
               sales: { show: true },
               stock: { show: false },
-            }" :buttonShow="state.list.use_scope != 'disabled_goods'"></s-goods-column>
+            }"
+            :buttonShow="state.list.use_scope != 'disabled_goods'"
+          />
         </view>
       </view>
       <view v-if="state.list.use_scope == 'category'">
         <view v-for="(item, index) in state.pagination.data" :key="index">
-					<s-goods-column class="ss-m-20" size="lg" :data="item"
+          <s-goods-column
+            class="ss-m-20"
+            size="lg"
+            :data="item"
             :titleColor="props.goodsFieldsStyle?.title?.color"
             :subTitleColor="props.goodsFieldsStyle?.subtitle?.color"
-						@click="sheep.$router.go('/pages/goods/index', { id: item.id })" :goodsFields="{
+            @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
+            :goodsFields="{
               title: { show: true },
               subtitle: { show: true },
               price: { show: true },
               original_price: { show: true },
               sales: { show: true },
               stock: { show: false },
-            }" :buttonShow="state.list.use_scope != 'disabled_goods'"></s-goods-column>
+            }"
+            :buttonShow="state.list.use_scope != 'disabled_goods'"
+          ></s-goods-column>
         </view>
       </view>
-			<uni-load-more v-if="state.pagination.total > 0 && state.list.use_scope == 'category'"
+      <uni-load-more
-				:status="state.loadStatus" :content-text="{
+        v-if="state.pagination.total > 0 && state.list.use_scope == 'category'"
+        :status="state.loadStatus"
+        :content-text="{
           contentdown: '上拉加载更多',
-        }" @tap="loadmore" />
+        }"
-			<s-empty v-if="state.list.use_scope == 'category' && state.pagination.total === 0" paddingTop="0"
+        @tap="loadMore"
-				icon="/static/soldout-empty.png" text="暂无商品">
+      />
+      <s-empty
+        v-if="state.list.use_scope == 'category' && state.pagination.total === 0"
+        paddingTop="0"
+        icon="/static/soldout-empty.png"
+        text="暂无商品"
+      >
       </s-empty>
     </view>
   </s-layout>
@@ -101,14 +141,11 @@
 
 <script setup>
   import sheep from '@/sheep';
-	import {
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
-		onLoad,
+  import { reactive } from 'vue';
-		onReachBottom
-	} from '@dcloudio/uni-app';
-	import {
-		reactive
-	} from 'vue';
   import _ from 'lodash';
+  import CouponApi from '@/sheep/api/promotion/coupon';
+  import { fen2yuan } from '@/sheep/hooks/useGoods';
 
   const pagination = {
     data: [],
@@ -117,9 +154,11 @@
     last_page: 1,
   };
   const state = reactive({
+    id: 0, // 优惠劵模版编号 templateId
+    couponId: 0, // 用户优惠劵编号 couponId
+    coupon: {}, // 优惠劵信息
+
     list: {},
-		couponId: 0,
-		userCouponId: 0,
     pagination: {
       data: [],
       current_page: 1,
@@ -133,24 +172,10 @@
 
   // 接收参数
   const props = defineProps({
-		includes: {
-			type: Array,
-			default () {
-				return [];
-			},
-		},
-		list: {
-			type: Array,
-			default: () => [],
-		},
     goodsFieldsStyle: {
       type: Object,
-			default () {},
+      default() {},
-		},
+    }
-		buyData: {
-			type: Object,
-			default () {},
-		},
   });
 
   function onTabsChange(e) {
@@ -159,6 +184,7 @@
     state.categoryId = e.value;
     getGoodsList(state.categoryId);
   }
+
   async function getGoodsList(categoryId, page = 1, list_rows = 5) {
     state.loadStatus = 'loading';
     const res = await sheep.$api.goods.list({
@@ -180,56 +206,55 @@
       }
     }
   }
+
   async function getCoupon() {
-		const {
+    const { error, msg } = await sheep.$api.coupon.get(state.id);
-			error,
-			msg
-		} = await sheep.$api.coupon.get(state.couponId);
     if (error === 0) {
       uni.showToast({
         title: msg,
       });
       setTimeout(() => {
-				getCouponContent(state.couponId, state.userCouponId);
+        getCouponContent(state.id, state.couponId);
       }, 1000);
     }
   }
-	async function getCouponContent(id, c) {
+
-		const {
+  async function getCouponContent() {
-			data
+    const { code, data } = state.id > 0 ? await CouponApi.getCouponTemplate(state.id)
-		} = await sheep.$api.coupon.detail(id, c);
+      : await CouponApi.getCoupon(state.couponId);
+    if (code !== 0) {
+      return;
+    }
+    state.coupon = data;
+    if (true) {
+      return;
+    }
     state.list = data;
     data.items_value.forEach((i) => {
-			state.tabMaps.push({
+      state.tabMaps.push({ name: i.name, value: i.id });
-				name: i.name,
-				value: i.id
-			});
     });
     state.pagination = pagination;
     if (state.list.use_scope == 'category') {
       getGoodsList(state.tabMaps[0].value);
     }
   }
+
   // 加载更多
-	function loadmore() {
+  function loadMore() {
     if (state.loadStatus !== 'noMore') {
       getGoodsList(state.categoryId, state.pagination.current_page + 1);
     }
   }
+
   onLoad((options) => {
-		if (options.data) {
+    state.id = options.id;
-			let data = JSON.parse(options.data);
+    state.couponId = options.couponId;
-			console.log(data);
+    getCouponContent(state.id, state.couponId);
-			state.list = data;
-			return;
-		}
-		state.couponId = options.id;
-		state.userCouponId = options.user_coupon_id;
-		getCouponContent(state.couponId, state.userCouponId);
   });
+
   // 上拉加载更多
   onReachBottom(() => {
-		loadmore();
+    loadMore();
   });
 </script>
 
@@ -241,11 +266,13 @@
   }
 
   .detail-wrap {
-		background: linear-gradient(180deg,
+    background: linear-gradient(
+      180deg,
       var(--ui-BG-Main),
       var(--ui-BG-Main-gradient),
       var(--ui-BG-Main),
-				#fff);
+      #fff
+    );
   }
 
   .detail-box {
@@ -253,7 +280,6 @@
     border-radius: 6rpx;
     position: relative;
     margin-top: 100rpx;
-
     .tag-box {
       width: 140rpx;
       height: 140rpx;

sheep/api/promotion/coupon.js

@@ -25,6 +25,14 @@ const CouponApi = {
       params,
     });
   },
+  // 获得优惠劵模版
+  getCouponTemplate: (id) => {
+    return request({
+      url: '/app-api/promotion/coupon-template/get',
+      method: 'GET',
+      params: { id },
+    });
+  },
   // 我的优惠劵列表
   getCouponPage: (params) => {
     return request({
@@ -41,6 +49,14 @@ const CouponApi = {
       data: { templateId },
     });
   },
+  // 获得优惠劵
+  getCoupon: (id) => {
+    return request({
+      url: '/app-api/promotion/coupon/get',
+      method: 'GET',
+      params: { id },
+    });
+  },
 };
 
 export default CouponApi;

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

@@ -80,12 +80,7 @@
   import { fen2yuan } from '../../hooks/useGoods';
   import sheep from '../../index';
 
-  const state = reactive({
+  const state = reactive({});
-    stateMap: {
-      0: '立即领取',
-      1: '去使用',
-    },
-  });
 
   const isDisable = computed(() => {
     if (props.type === 'coupon') {