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

<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>