项目初始化

2025-01-21 01:46:34 +08:00
parent 364021b042
commit 48153e7761
962 changed files with 172070 additions and 0 deletions
--- a/sheep/components/s-coupon-get/s-coupon-get.vue
+++ b/sheep/components/s-coupon-get/s-coupon-get.vue
@@ -0,0 +1,109 @@
+<!-- 商品详情 - 优惠劵领取 -->
+<template>
+  <su-popup
+    :show="show"
+    type="bottom"
+    round="20"
+    @close="emits('close')"
+    showClose
+    backgroundColor="#f2f2f2"
+  >
+    <view class="model-box">
+      <view class="title ss-m-t-16 ss-m-l-20 ss-flex">优惠券</view>
+      <scroll-view
+        class="model-content"
+        scroll-y
+        :scroll-with-animation="false"
+        :enable-back-to-top="true"
+      >
+        <view class="subtitle ss-m-l-20">可使用优惠券</view>
+        <view v-for="item in state.couponInfo" :key="item.id">
+          <s-coupon-list :data="item">
+            <template #default>
+              <button
+                class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center"
+                :class="!item.canTake ? 'boder-btn' : ''"
+                @click.stop="getBuy(item.id)"
+                :disabled="!item.canTake"
+              >
+                {{ item.canTake ? '立即领取' : '已领取' }}
+              </button>
+            </template>
+          </s-coupon-list>
+        </view>
+      </scroll-view>
+    </view>
+  </su-popup>
+</template>
+<script setup>
+  import { computed, reactive } from 'vue';
+
+  const props = defineProps({
+    modelValue: {
+      type: Object,
+      default() {},
+    },
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  const emits = defineEmits(['get', 'close']);
+
+  const state = reactive({
+    couponInfo: computed(() => props.modelValue)
+  });
+
+  // 领取优惠劵
+  const getBuy = (id) => {
+    emits('get', id);
+  };
+</script>
+<style lang="scss" scoped>
+  .model-box {
+    height: 60vh;
+    .title {
+      font-size: 36rpx;
+      height: 80rpx;
+      font-weight: bold;
+      color: #333333;
+    }
+    .subtitle {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #333333;
+    }
+  }
+  .model-content {
+    height: 54vh;
+  }
+  .modal-footer {
+    width: 100%;
+    height: 120rpx;
+    background: #fff;
+  }
+  .confirm-btn {
+    width: 710rpx;
+    margin-left: 20rpx;
+    height: 80rpx;
+    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    border-radius: 40rpx;
+    color: #fff;
+  }
+  // 优惠券按钮
+  .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;
+  }
+  .boder-btn {
+    background: linear-gradient(90deg, var(--ui-BG-Main-opacity-4), var(--ui-BG-Main-light));
+    color: #fff !important;
+  }
+</style>