s-coupon-select.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. <!-- 订单确认的优惠劵选择弹窗 -->
  2. <template>
  3. <su-popup
  4. :show="show"
  5. type="bottom"
  6. round="20"
  7. @close="emits('close')"
  8. showClose
  9. backgroundColor="#f2f2f2"
  10. >
  11. <view class="model-box">
  12. <view class="title ss-m-t-16 ss-m-l-20 ss-flex">优惠券</view>
  13. <scroll-view
  14. class="model-content"
  15. scroll-y
  16. :scroll-with-animation="false"
  17. :enable-back-to-top="true"
  18. >
  19. <!--可使用的优惠券区域-->
  20. <view class="subtitle ss-m-l-20">可使用优惠券</view>
  21. <view v-for="(item, index) in state.couponInfo.filter(coupon => coupon.match)" :key="index">
  22. <s-coupon-list :data="item" type="user" :disabled="false">
  23. <template v-slot:reason>
  24. <view class="ss-flex ss-m-t-24">
  25. <view class="reason-title">可用原因:</view>
  26. <view class="reason-desc">{{ item.description || '已达到使用门槛' }}</view>
  27. </view>
  28. </template>
  29. <template #default>
  30. <label class="ss-flex ss-col-center" @tap="radioChange(item.id)">
  31. <radio
  32. color="var(--ui-BG-Main)"
  33. style="transform: scale(0.8)"
  34. :checked="state.couponId === item.id"
  35. @tap.stop="radioChange(item.id)"
  36. />
  37. </label>
  38. </template>
  39. </s-coupon-list>
  40. </view>
  41. <!--不可使用的优惠券区域-->
  42. <view class="subtitle ss-m-t-40 ss-m-l-20">不可使用优惠券</view>
  43. <view v-for="item in state.couponInfo.filter(coupon => !coupon.match)" :key="item.id">
  44. <s-coupon-list :data="item" type="user" :disabled="true">
  45. <template v-slot:reason>
  46. <view class="ss-flex ss-m-t-24">
  47. <view class="reason-title"> 不可用原因:</view>
  48. <view class="reason-desc">{{ item.description || '未达到使用门槛' }}</view>
  49. </view>
  50. </template>
  51. </s-coupon-list>
  52. </view>
  53. </scroll-view>
  54. </view>
  55. <view class="modal-footer ss-flex">
  56. <button class="confirm-btn ss-reset-button" @tap="onConfirm">确认</button>
  57. </view>
  58. </su-popup>
  59. </template>
  60. <script setup>
  61. import { computed, reactive } from 'vue';
  62. const props = defineProps({
  63. modelValue: { // 优惠劵列表
  64. type: Object,
  65. default() {},
  66. },
  67. show: {
  68. type: Boolean,
  69. default: false,
  70. },
  71. });
  72. const emits = defineEmits(['confirm', 'close']);
  73. const state = reactive({
  74. couponInfo: computed(() => props.modelValue), // 优惠劵列表
  75. couponId: undefined, // 选中的优惠劵编号
  76. });
  77. // 选中优惠劵
  78. function radioChange(couponId) {
  79. if (state.couponId === couponId) {
  80. state.couponId = undefined;
  81. } else {
  82. state.couponId = couponId;
  83. }
  84. }
  85. // 确认优惠劵
  86. const onConfirm = () => {
  87. emits('confirm', state.couponId);
  88. }
  89. </script>
  90. <style lang="scss" scoped>
  91. :deep() {
  92. .uni-checkbox-input {
  93. background-color: var(--ui-BG-Main);
  94. }
  95. }
  96. .model-box {
  97. height: 60vh;
  98. }
  99. .title {
  100. font-size: 36rpx;
  101. height: 80rpx;
  102. font-weight: bold;
  103. color: #333333;
  104. }
  105. .subtitle {
  106. font-size: 26rpx;
  107. font-weight: 500;
  108. color: #333333;
  109. }
  110. .model-content {
  111. height: 54vh;
  112. }
  113. .modal-footer {
  114. width: 100%;
  115. height: 120rpx;
  116. background: #fff;
  117. }
  118. .confirm-btn {
  119. width: 710rpx;
  120. margin-left: 20rpx;
  121. height: 80rpx;
  122. background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
  123. border-radius: 40rpx;
  124. color: #fff;
  125. }
  126. .reason-title {
  127. font-weight: 600;
  128. font-size: 20rpx;
  129. line-height: 26rpx;
  130. color: #ff0003;
  131. }
  132. .reason-desc {
  133. font-weight: 600;
  134. font-size: 20rpx;
  135. line-height: 26rpx;
  136. color: #434343;
  137. }
  138. </style>