feat(uniapp): 新增优惠券楼层组件（含未登录跳登录）

pages/product/shopPage.vue

@@ -192,6 +192,7 @@
           <group v-if="item.type == 'group'" :res="item.options" />
           <!-- <joinGroup v-if="item.type == 'joinGroup'" :res="item.options" /> -->
           <integral v-if="item.type == 'integral'" :res="item.options" />
+          <coupon v-if="item.type == 'coupon'" :res="item.options" />
           <!-- <spike v-if="item.type == 'spike'" :res="item.options" /> -->
           <blank v-if="item.type == 'blank'" :res="item.options" />
           <lineLayout v-if="item.type == 'line'" :res="item.options" />
@@ -232,6 +233,7 @@ import blank from '@/pages/tabbar/home/template/tpl_blank.vue'
 import lineLayout from '@/pages/tabbar/home/template/tpl_line.vue'
 import richText from '@/pages/tabbar/home/template/tpl_rich_text.vue'
 import integral from '@/pages/tabbar/home/template/tpl_integral.vue'
+import coupon from '@/pages/tabbar/home/template/tpl_coupon.vue'
 import goodsTemplate from '@/components/m-goods-list/list.vue'
 import { getStoreBaseInfo, getStoreCategory } from '@/api/store.js'
 import {

pages/tabbar/home/index.vue

@@ -47,6 +47,7 @@
       <lineLayout v-if="item.type == 'line'" :res="item.options" />
       <richText v-if="item.type == 'richText'" :res="item.options" />
       <integral v-if="item.type == 'integral'" :res="item.options" />
+      <coupon v-if="item.type == 'coupon'" :res="item.options" />
     </view>
     <fetchCoupon ref="couponRef" />
   </view>
@@ -86,6 +87,7 @@ import blank from '@/pages/tabbar/home/template/tpl_blank.vue'
 import lineLayout from '@/pages/tabbar/home/template/tpl_line.vue'
 import richText from '@/pages/tabbar/home/template/tpl_rich_text.vue'
 import integral from '@/pages/tabbar/home/template/tpl_integral.vue'
+import coupon from '@/pages/tabbar/home/template/tpl_coupon.vue'
 import { getFloorData } from '@/api/home'
 
 const HOME_LAYOUT_PADDING_RPX = 16

pages/tabbar/home/template/tpl_coupon.vue

@@ -0,0 +1,127 @@
+<template>
+  <view class="tpl-coupon" :style="wrapperStyle" v-if="couponList.length">
+    <view class="coupon-title" v-if="title">{{ title }}</view>
+    <view
+      class="coupon-item"
+      v-for="item in couponList"
+      :key="item.id"
+      @click="receive(item)"
+    >
+      <view class="coupon-left">
+        <view class="coupon-amount">
+          <template v-if="item.couponType == 'DISCOUNT'">
+            <text class="coupon-value">{{ item.couponDiscount }}</text>
+            <text class="coupon-symbol">折</text>
+          </template>
+          <template v-else>
+            <text class="coupon-symbol">¥</text>
+            <text class="coupon-value">{{ unitPrice(item.price) }}</text>
+          </template>
+        </view>
+        <view class="coupon-threshold">满{{ unitPrice(item.consumeThreshold) }}元可用</view>
+      </view>
+      <view class="coupon-right">
+        <view class="coupon-name">
+          {{ item.storeName == 'platform' ? '全平台通用' : item.storeName + '店铺' }}
+        </view>
+        <view class="coupon-btn">立即领取</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue";
+import { getAllCoupons } from "@/api/promotions.js";
+import { receiveCoupons } from "@/api/members.js";
+import { isLogin, navigateToLogin, unitPrice } from "@/utils/filters.js";
+
+const props = defineProps<{ res: any }>();
+
+const couponList = ref<any[]>([]);
+
+const title = computed(() => props.res?.list?.[0]?.title || "");
+const count = computed(() => props.res?.list?.[0]?.count || 3);
+
+const wrapperStyle = computed(() => ({
+  background: props.res?.bgColor || "#FFFFFF",
+  padding: `20rpx ${props.res?.paddingX ?? 0}rpx`,
+  marginBottom: `${props.res?.pageGap ?? 10}rpx`,
+  borderRadius: `${props.res?.borderRadius ?? 0}rpx`,
+  overflow: "hidden",
+}));
+
+onMounted(() => {
+  getAllCoupons({ pageNumber: 1, pageSize: count.value }).then((res) => {
+    if (res.data.code == 200 && res.data.result) {
+      couponList.value = (res.data.result.records || []).slice(0, count.value);
+    }
+  });
+});
+
+function receive(item: any) {
+  if (!isLogin("auth")) {
+    navigateToLogin("redirectTo");
+    return;
+  }
+  receiveCoupons(item.id).then((res) => {
+    if (res.data.code == 200) {
+      uni.showToast({ title: "领取成功", icon: "none" });
+    } else {
+      uni.showToast({ title: res.data.message, icon: "none" });
+    }
+  });
+}
+</script>
+
+<style lang="scss" scoped>
+.tpl-coupon {
+  font-size: 26rpx;
+}
+.coupon-title {
+  font-size: 30rpx;
+  font-weight: 600;
+  padding: 8rpx 24rpx 20rpx;
+}
+.coupon-item {
+  display: flex;
+  margin: 0 20rpx 20rpx;
+  border-radius: 12rpx;
+  overflow: hidden;
+  background: linear-gradient(90deg, #ffece8, #fff5f4);
+}
+.coupon-left {
+  width: 180rpx;
+  padding: 24rpx 0;
+  text-align: center;
+  color: var(--theme-primary, #e1251b);
+  border-right: 2rpx dashed #f0c0bb;
+}
+.coupon-value {
+  font-size: 40rpx;
+  font-weight: 700;
+}
+.coupon-symbol {
+  font-size: 24rpx;
+}
+.coupon-threshold {
+  font-size: 22rpx;
+}
+.coupon-right {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24rpx;
+}
+.coupon-name {
+  color: #333;
+}
+.coupon-btn {
+  background: var(--theme-primary, #e1251b);
+  color: #fff;
+  font-size: 24rpx;
+  padding: 8rpx 20rpx;
+  border-radius: 24rpx;
+}
+</style>

pages/tabbar/special/special.vue

@@ -47,6 +47,7 @@
       <blank v-if="item.type == 'blank'" :res="item.options" />
       <lineLayout v-if="item.type == 'line'" :res="item.options" />
       <richText v-if="item.type == 'richText'" :res="item.options" />
+      <coupon v-if="item.type == 'coupon'" :res="item.options" />
     </div>
     <u-no-network></u-no-network>
   </div>
@@ -78,6 +79,7 @@ import blank from '@/pages/tabbar/home/template/tpl_blank'
 import lineLayout from '@/pages/tabbar/home/template/tpl_line'
 import richText from '@/pages/tabbar/home/template/tpl_rich_text'
 import integral from '@/pages/tabbar/home/template/tpl_integral'
+import coupon from '@/pages/tabbar/home/template/tpl_coupon'
 import { toSpecial, getSpecial } from '@/api/home'
 import permision from '@/js_sdk/wa-permission/permission.js'
 import config from '@/config/config'