项目初始化

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

@@ -0,0 +1,114 @@
+<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-38 ss-m-l-20 ss-m-b-40">活动优惠</view>
+      <scroll-view
+        class="model-content ss-m-l-20"
+        scroll-y
+        :scroll-with-animation="false"
+        :enable-back-to-top="true"
+      >
+        <view v-for="(item, index) in state.orderInfo.promo_infos" :key="index">
+          <view class="ss-flex ss-m-b-40 subtitle">
+            <view>共{{ item.goods_ids.length }}件，</view>
+            <view v-if="item.activity_type === 'full_discount'">
+              满{{ item.discount_rule.full }}打{{ item.discount_rule.discount }}折,已减
+            </view>
+            <view v-if="item.activity_type === 'full_gift'">满赠</view>
+            <view v-if="item.activity_type === 'full_reduce'">
+              满{{ item.discount_rule.full }}减{{ item.discount_rule.discount }},已减
+            </view>
+            <view class="price-text">￥{{ item.promo_discount_money || '0.00' }}</view>
+          </view>
+          <scroll-view class="scroll-box" scroll-x scroll-anchoring>
+            <view class="ss-flex">
+              <view v-for="i in item.goods_ids" :key="i">
+                <image class="content-img" :src="sheep.$url.cdn(getGoodsImg(i))" />
+              </view>
+            </view>
+          </scroll-view>
+        </view>
+      </scroll-view>
+    </view>
+    <view class="modal-footer ss-flex">
+      <button class="confirm-btn ss-reset-button" @tap="emits('close')">确认</button>
+    </view>
+  </su-popup>
+</template>
+<script setup>
+  import { computed, reactive } from 'vue';
+  import sheep from '@/sheep';
+  const props = defineProps({
+    promoInfo: {
+      type: Array,
+      default: () => [],
+    },
+    goodsList: {
+      type: Array,
+      default: () => [],
+    },
+    modelValue: {
+      type: Object,
+      default() {},
+    },
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  });
+  const emits = defineEmits(['close']);
+  const state = reactive({
+    orderInfo: computed(() => props.modelValue),
+  });
+  const getGoodsImg = (e) => {
+    let goodsImg = '';
+    state.orderInfo.goods_list.forEach((i) => {
+      if (e == i.goods_id) {
+        goodsImg = i.goods.image;
+      }
+    });
+    return goodsImg;
+  };
+</script>
+<style lang="scss" scoped>
+  .model-box {
+    height: 60vh;
+  }
+  .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;
+  }
+  .content-img {
+    width: 140rpx;
+    height: 140rpx;
+    margin-right: 20rpx;
+    margin-bottom: 20rpx;
+  }
+  .subtitle {
+    font-size: 28rpx;
+    font-weight: 500;
+    color: #333333;
+  }
+  .price-text {
+    color: #ff3000;
+  }
+</style>