发布v1.0.3

2022-11-22 15:45:36 +08:00
commit 01f091fcd8
525 changed files with 80922 additions and 0 deletions
@@ -0,0 +1,189 @@
+<!-- 优惠券组  -->
+<template>
+  <view>
+    <!-- 样式1 -->
+    <view class="lg-coupon-wrap" v-if="mode == 1">
+      <scroll-view class="scroll-box" scroll-x scroll-anchoring>
+        <view class="coupon-box ss-flex">
+          <view
+            class="coupon-item"
+            :style="[couponBg, { marginLeft: data.space + 'px' }]"
+            v-for="(item, index) in couponList"
+            :key="index"
+          >
+            <su-coupon
+              size="lg"
+              :textColor="data.fill.color"
+              background=""
+              :couponId="item.id"
+              :title="item.amount_text"
+              :value="item.amount"
+              :surplus="item.stock"
+              :sellBy="`${item.get_start_time.substring(0, 10)} 至 ${item.get_end_time.substring(
+                0,
+                10,
+              )}`"
+            >
+              <template v-slot:btn>
+                <button
+                  class="ss-reset-button card-btn"
+                  :style="[btnStyles]"
+                  @click.stop="onGetCoupon(item.id)"
+                >
+                  {{ item.get_status_text }}
+                </button>
+              </template>
+            </su-coupon>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+    <!-- 样式2 -->
+    <view class="md-coupon-wrap" v-if="mode == 2">
+      <scroll-view class="scroll-box" scroll-x scroll-anchoring>
+        <view class="coupon-box ss-flex">
+          <view
+            class="coupon-item"
+            :style="[couponBg, { marginLeft: data.space + 'px' }]"
+            v-for="(item, index) in couponList"
+            :key="index"
+          >
+            <su-coupon
+              size="md"
+              :textColor="data.fill.color"
+              background=""
+              :title="item.amount_text"
+              :value="item.amount"
+              :surplus="item.stock"
+              :couponId="item.id"
+              :sellBy="`${item.get_start_time.substring(0, 10)} 至 ${item.get_end_time.substring(
+                0,
+                10,
+              )}`"
+            >
+              <template v-slot:btn>
+                <button
+                  @click.stop="onGetCoupon(item.id)"
+                  class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center"
+                  :style="[btnStyles]"
+                >
+                  <view class="btn-text">{{ item.get_status_text }}</view>
+                </button>
+              </template>
+            </su-coupon>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+    <!-- 样式3 -->
+    <view class="xs-coupon-wrap" v-if="mode == 3">
+      <scroll-view class="scroll-box" scroll-x scroll-anchoring>
+        <view class="coupon-box ss-flex">
+          <view
+            class="coupon-item"
+            :style="[couponBg, { marginLeft: data.space + 'px' }]"
+            v-for="(item, index) in couponList"
+            :key="index"
+          >
+            <su-coupon
+              size="xs"
+              :textColor="data.fill.color"
+              background=""
+              :title="item.amount_text"
+              :value="item.amount"
+              :surplus="item.stock"
+              :couponId="item.id"
+              :sellBy="`${item.get_start_time.substring(0, 10)} 至 ${item.get_end_time.substring(
+                0,
+                10,
+              )}`"
+            >
+              <template v-slot:btn>
+                <button
+                  class="ss-reset-button card-btn"
+                  :style="[btnStyles]"
+                  @click.stop="onGetCoupon(item.id)"
+                >
+                  {{ item.get_status_text }}
+                </button>
+              </template>
+            </su-coupon>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { ref, onMounted } from 'vue';
+
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    styles: {
+      type: Object,
+      default: () => ({}),
+    },
+  });
+  const { mode, button } = props.data;
+  const couponBg = {
+    background: `url(${sheep.$url.cdn(props.data.fill.bgImage)}) no-repeat top center / 100% 100%`,
+  };
+  const btnStyles = {
+    background: button.bgColor,
+    color: button.color,
+  };
+  const couponList = ref([]);
+  //立即领取优惠券
+  async function onGetCoupon(id) {
+    const { error, msg } = await sheep.$api.coupon.get(id);
+    if (error === 0) {
+      uni.showToast({
+        title: msg,
+        icon: 'none',
+      });
+    } else {
+      let { data } = await sheep.$api.coupon.list({ ids: props.data.couponIds.join(',') });
+      couponList.value = [...data.data];
+    }
+  }
+  onMounted(async () => {
+    let { data } = await sheep.$api.coupon.list({ ids: props.data.couponIds.join(',') });
+    // couponList.value = [...data.data, ...data.data, ...data.data, ...data.data];
+    couponList.value = [...data.data];
+  });
+</script>
+
+<style lang="scss" scoped>
+  .card-btn {
+    width: 140rpx;
+    height: 50rpx;
+    border-radius: 25rpx;
+    font-size: 24rpx;
+    line-height: 50rpx;
+  }
+  .coupon-item {
+    &:nth-of-type(1) {
+      margin-left: 0 !important;
+    }
+  }
+  .md-coupon-wrap {
+    .card-btn {
+      width: 50rpx;
+      height: 140rpx;
+      margin: auto 0;
+      margin-right: 20rpx;
+
+      .btn-text {
+        font-size: 24rpx;
+        text-align: center;
+        writing-mode: vertical-lr;
+        writing-mode: tb-lr;
+      }
+    }
+  }
+</style>