购物车，积分，订单详情

src/pages/mall/subs/components/coupon-dialog.vue

@@ -0,0 +1,120 @@
+<template>
+  <uni-popup type='bottom' ref='popupRef' :mask-click='false'>
+    <view class='popup-content c-flex-column'>
+      <view class='c-flex-row'>
+        <text>优惠券</text>
+        <text @click.stop='close'>确定</text>
+      </view>
+
+      <scroll-view>
+        <coupon-item v-for='item in coupons' :item='item' />
+      </scroll-view>
+    </view>
+  </uni-popup>
+</template>
+
+<script lang='ts' setup>
+import CouponItem from '../components/coupon-item.vue';
+
+const popupRef = ref();
+const coupons = [{
+  id: 1,
+  title: '优惠券',
+  desc: '满100减10',
+  price: 100,
+  threshold: 10,
+  priceDesc: '满100减10',
+  useTime: '2021-12-31',
+  status: 1,
+  useStatus: '未使用'
+}, {
+  id: 1,
+  title: '优惠券',
+  desc: '满100减10',
+  price: 200,
+  threshold: 80,
+  priceDesc: '满100减10',
+  useTime: '2021-01-01',
+  status: 1,
+  useStatus: '未使用'
+}, {
+  id: 1,
+  title: '优惠券',
+  desc: '满100减10',
+  price: 300,
+  threshold: 60,
+  priceDesc: '满100减10',
+  useTime: '2023-12-31',
+  status: '0',
+  useStatus: '未使用'
+}, {
+  id: 1,
+  title: '优惠券',
+  desc: '满100减10',
+  price: 50,
+  threshold: 50,
+  priceDesc: '满100减10',
+  useTime: '2021-10-31',
+  status: 0,
+  useStatus: '未使用'
+}, {
+  id: 1,
+  title: '优惠券',
+  desc: '满1000减30',
+  price: 200,
+  threshold: 30,
+  priceDesc: '满100减10',
+  useTime: '2024-12-31',
+  status: 0,
+  useStatus: '未使用'
+}];
+
+const show = () => {
+  popupRef.value.open();
+};
+
+const close = () => {
+  popupRef.value.close();
+};
+
+defineExpose({
+  show
+});
+</script>
+
+<style lang='scss' scoped>
+.popup-content {
+  background: #FFFFFF;
+  border-radius: 20rpx 20rpx 0 0;
+  padding: 38rpx 45rpx 0 45rpx;
+
+  view:nth-of-type(1) {
+    display: flex;
+    margin-bottom: 70rpx;
+    position: relative;
+
+    text:nth-of-type(1) {
+      font-weight: bold;
+      font-size: 30rpx;
+      color: #333333;
+      position: absolute;
+      left: 0;
+      right: 0;
+      text-align: center;
+    }
+
+    text:nth-of-type(2) {
+      font-weight: bold;
+      font-size: 30rpx;
+      color: #F32B2B;
+      position: absolute;
+      right: 0;
+    }
+  }
+
+  scroll-view {
+    max-height: 600rpx;
+  }
+
+}
+</style>