Fix:[#988,#987,#986,#985,#983]修复测试反馈的问题和调整内容

2024-03-22 11:51:18 +08:00
parent 0febe3a5a4
commit 18aeb9bdfd
12 changed files with 536 additions and 282 deletions
@@ -0,0 +1,142 @@
+<template>
+  <view class="components-coupons">
+    <image class="coupons__cover" :src="data.image" mode="widthFix"/>
+
+    <view class="coupons__section flex jc-between ai-center">
+      <view>有效期至：
+        <text>{{ data.endTime }}</text>
+      </view>
+      <view class="coupons__tag coupons__tag-expire" v-if="data.status===2">已到期</view>
+      <view class="coupons__tag" @click="goGoods()" v-if="data.status===0 && !radioModel">去使用</view>
+      <view @click="selectCoupon">
+        <radio :value="data.id" :checked="data.checked" color="#FF564A" v-if="radioModel && data.status===0"/>
+      </view>
+    </view>
+
+    <view class="coupons__rules">
+      <view class="coupons__rules-title" @click="changeRules()">使用规则
+        <image :class="{'open':isOpen}" :src="webUrl+'/20231125220409665027.png'" mode="scaleToFill"/>
+      </view>
+      <view
+        :class="isOpen ? 'auto-height' : ''"
+        class="coupon-html"
+      >
+        <rich-text :nodes="data.description" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "Coupons",
+  props: {
+    data: Object,
+    radioModel: {
+      type: Boolean,
+      default: false
+    },
+    checked: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      isOpen: false
+    }
+  },
+  methods: {
+    changeRules() {
+      this.isOpen = !this.isOpen
+    },
+    goGoods() {
+      uni.switchTab({url: '/pages/home/landMark'})
+      // this.$global.navToGoods(this.data.productId)
+    },
+    selectCoupon() {
+      if (!this.radioModel) return
+      this.$emit('change', this.data.id)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.components-coupons {
+  width: 686rpx;
+  box-sizing: border-box;
+  border: 2rpx solid #FF564A;
+  border-radius: 16rpx;
+  overflow: hidden;
+
+  image {
+    vertical-align: middle;
+  }
+
+  .coupons__cover {
+    width: 100%;
+    height: auto;
+  }
+
+  .coupons__section {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 18rpx 20rpx 16rpx 16rpx;
+    font-size: 32rpx;
+    line-height: 1;
+
+    text {
+      color: #EA1C1C;
+      font-weight: bold;
+    }
+
+    .coupons__tag {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 120rpx;
+      height: 52rpx;
+      box-sizing: border-box;
+      border-radius: 8rpx;
+      border: 2px solid #0DC5C5;
+      color: #0DC5C5;
+      font-size: 32rpx;
+      line-height: 1;
+    }
+
+    .coupons__tag-expire {
+      border: 2rpx solid #BFBFBF;
+      color: #999999;
+    }
+  }
+
+  .coupons__rules {
+    padding: 0 20rpx 20rpx 16rpx;
+
+    .coupons__rules-title {
+      color: #999999;
+      font-size: 28rpx;
+
+      image {
+        width: 26rpx;
+        height: 26rpx;
+        margin-left: 6rpx;
+      }
+
+      .open {
+        transform: rotate(180deg);
+      }
+    }
+    .coupon-html {
+      height: 80rpx;
+      overflow: hidden;
+      transition: all .3s;
+      &.auto-height {
+        height: auto;
+      }
+    }
+  }
+}
+</style>