完善券兑换码功能

pageMarket/components/choose-coupon.vue

@@ -7,6 +7,7 @@
           <up-icon size="18" name="close" @click="show = false"></up-icon>
         </view>
         <scroll-view
+          ref="couponScroll"
           :scroll-y="true"
           style="max-height: 50vh"
           @scroll="scroll"
@@ -21,21 +22,22 @@
           >
             <view class="u-flex u-row-between">
               <view class="u-flex gap-20">
-                <view class="u-flex" @click.stop="preview(item)">
+                <!-- <view class="u-flex" @click.stop="preview(item)">
                   <up-image
                     :src="item.coverImg"
                     width="80rpx"
                     height="80rpx"
                   ></up-image>
-                </view>
+                </view> -->
 
-                <text class="u-font-32 color-333">{{ item.name }}</text>
+                <text class="u-font-32 color-333">{{ item.title }}</text>
               </view>
               <text class="u-font-32 color-red u-p-l-30"
-                >¥{{ item.lowPrice }}</text
+                ></text
               >
             </view>
           </view>
+          <up-empty v-if="list.length == 0" class="u-p-30" text="暂无数据"></up-empty>
         </scroll-view>
         <view class="bottom">
           <view class="btn cancel" @click="close">{{ cancelText }}</view>
@@ -47,7 +49,6 @@
 </template>
 <script setup>
 import { ref, onMounted, watch } from "vue";
-import { getCouponList } from "@/http/api/coupon.js";
 const modelValue = defineModel({
   type: String,
   default: "",
@@ -56,7 +57,7 @@ const show = defineModel("show", {
   type: String,
   default: "",
 });
-const goodsName = defineModel("goodsName", {
+const couponName = defineModel("couponName", {
   type: String,
   default: "",
 });
@@ -74,6 +75,10 @@ const props = defineProps({
     type: String,
     default: "取消",
   },
+  list: {
+    type: Array,
+    default: () => [],
+  },
 });
 
 const selGoods = ref("");
@@ -84,7 +89,6 @@ function itemClick(item) {
   }
   selGoods.value = item;
 }
-const list = ref([]);
 
 const scrollTop = ref(0);
 function scroll(e) {
@@ -99,22 +103,22 @@ watch(
   () => modelValue.value,
   (newVal, oldVal) => {
     console.log(newVal, oldVal);
-    selGoods.value = list.value.find((item) => item.id == newVal);
+    selGoods.value = props.list.find((item) => item.id == newVal);
     console.log(selGoods.value);
     if (selGoods.value) {
-      goodsName.value = selGoods.value.name;
+      couponName.value = selGoods.value.title;
     }
   }
 );
 
 watch(
-  () => list.value.length,
+  () => props.list.length,
   (newVal, oldVal) => {
-    selGoods.value = list.value.find((item) => item.id == modelValue.value);
+    selGoods.value = props.list.find((item) => item.id == modelValue.value);
     console.log(selGoods.value);
     if (selGoods.value) {
       modelValue.value = selGoods.value.id;
-      goodsName.value = selGoods.value.name;
+      couponName.value = selGoods.value.title;
     }
   }
 );
@@ -122,6 +126,8 @@ watch(
 function close() {
   show.value = false;
 }
+
+const emit = defineEmits(["confirm"]);
 function confirm() {
   if (!selGoods.value) {
     uni.showToast({
@@ -132,12 +138,9 @@ function confirm() {
   }
   modelValue.value = selGoods.value.id;
   show.value = false;
+  emit("confirm", selGoods.value);
 }
-onMounted(() => {
-  getCouponList().then((res) => {
-    list.value = res;
-  });
-});
+
 </script>
 
 <style lang="scss">

pageMarket/components/coupon-list.vue

@@ -1,22 +1,92 @@
 <template>
   <view>
+    <view
+      class="u-flex u-row-between u-m-b-24"
+      style="gap: 40rpx"
+      v-for="(item, index) in modelValue"
+      :key="index"
+    >
+      <view
+        class="choose-coupon u-flex-1 u-flex u-row-between"
+        @click="showCoupon(item, index)"
+      >
+        <template v-if="item.title">
+          <text>{{ item.title }}</text>
+          <view class="u-flex" @click.stop="item.title = ''">
+            <up-icon name="close" size="14"></up-icon>
+          </view>
+        </template>
 
-
-    <chooseCoupon v-model="chooseCouponData.couponId" :show="chooseCouponData.show"></chooseCoupon>
+        <template v-else>
+          <text class="color-999">选择赠送券</text>
+          <up-icon name="arrow-down" size="14"></up-icon>
+        </template>
+      </view>
+      <view class="u-flex-1 u-flex">
+        <view class="u-flex-1 choose-coupon u-flex">
+        <input
+          class="u-flex-1"
+          placeholder=""
+          type="number"
+          v-model="item.num"
+          placeholder-class="color-999 u-font-28"
+        />
+        <text class="no-wrap color-999">张/1个码</text>
+      </view>
+      <view class="u-m-l-20">
+        <up-icon name="minus-circle-fill" color="#EB4F4F" size="18" @click="removeCoupon(index)"></up-icon>
+      </view>
+      </view>
+     
+    </view>
+    <chooseCoupon
+      v-model="chooseCouponData.couponId"
+      v-model:show="chooseCouponData.show"
+      @confirm="confirmCoupon"
+      :list="couponList"
+    ></chooseCoupon>
   </view>
 </template>
 
 <script setup>
-import { reactive } from "vue";
+import { reactive, ref, onMounted } from "vue";
 import chooseCoupon from "./choose-coupon.vue";
-const chooseCouponData=reactive({
-  couponId:'',
-  show:true
-})
+import { couponPage } from "@/http/api/market/index.js";
+
+const chooseCouponData = reactive({
+  couponId: "",
+  show: false,
+  index: -1,
+  item: null,
+});
 const modelValue = defineModel({
   type: Array,
   default: () => [],
 });
+const couponList = ref([]);
+function showCoupon(item, index) {
+  chooseCouponData.couponId = item ? item.id : "";
+  chooseCouponData.show = true;
+  chooseCouponData.index = index;
+  chooseCouponData.item = item;
+}
+function confirmCoupon(e) {
+  modelValue.value[chooseCouponData.index].id = e.id;
+  modelValue.value[chooseCouponData.index].title = e.title;
+}
+function removeCoupon(index) {
+  modelValue.value.splice(index, 1);
+}
+onMounted(() => {
+  couponPage({ size: 999 }).then((res) => {
+    couponList.value = res.records;
+  });
+});
 </script>
 <style lang="scss" scoped>
-</style>
+.choose-coupon {
+  padding: 10rpx 20rpx;
+  border-radius: 8rpx;
+  border: 1px solid #d9d9d9;
+}
+</style>

pageMarket/components/modal.vue

@@ -1,84 +1,84 @@
 <template>
-    <view>
-        <up-popup :show="show" mode="center">
-            <view class="popup-content">
-                <view class="top u-flex u-row-between">
-                    <text class="font-bold u-font-32 color-333">{{title}}</text>
-                    <up-icon size="18" name="close" @click="show=false"></up-icon>
-                </view>
-                <up-line></up-line>
-                <scroll-view style="max-height:50vh;">
-                <slot></slot>
-                </scroll-view>
-                <up-line></up-line>
+  <view>
+    <up-popup :show="show" mode="center">
+      <view class="popup-content">
+        <view class="top u-flex u-row-between">
+          <text class="font-bold u-font-32 color-333">{{ title }}</text>
+          <up-icon size="18" name="close" @click="show = false"></up-icon>
+        </view>
+        <up-line></up-line>
+        <scroll-view style="max-height: 50vh" :scroll-y="true">
+          <slot></slot>
+        </scroll-view>
+        <up-line></up-line>
 
-                <view class="bottom">
-                    <view class="btn success" @click="confirm">{{confirmText}}</view>
-                    <view class="btn cancel" @click="close">{{cancelText}}</view>
-                </view>
-            </view>
-        </up-popup>
-    </view>
+        <view class="bottom">
+          <view class="btn cancel" @click="close">{{ cancelText }}</view>
+          <view class="btn success" @click="confirm">{{ confirmText }}</view>
+        </view>
+      </view>
+    </up-popup>
+  </view>
 </template>
 
-<script setup> 
+<script setup>
 import { ref } from "vue";
 const props = defineProps({
-    title: {
-        type: String,
-        default: "标题",
-    },
-    confirmText: {
-        type: String,
-        default: "保存",
-    },
-    cancelText: {
-        type: String,
-        default: "取消",
-    },
+  title: {
+    type: String,
+    default: "标题",
+  },
+  confirmText: {
+    type: String,
+    default: "保存",
+  },
+  cancelText: {
+    type: String,
+    default: "取消",
+  },
 });
 const show = defineModel({
-    type: Boolean,
-    default: false,
-})
-const emits=defineEmits(['close','confirm'])
-function close(){
-    show.value=false
-    emits('close')
+  type: Boolean,
+  default: false,
+});
+const emits = defineEmits(["close", "confirm"]);
+function close() {
+  show.value = false;
+  emits("close");
 }
-function confirm(){
-    emits('confirm')
+function confirm() {
+  emits("confirm");
 }
 </script>
 <style lang="scss">
-.popup-content{
-    background: #fff;
-    width: 640rpx;
-    border-radius: 18rpx;
+.popup-content {
+  background: #fff;
+  width: 640rpx;
+  border-radius: 18rpx;
 }
-.top{
-    padding: 40rpx 48rpx;
+.top {
+  padding: 40rpx 48rpx;
 }
-.bottom{
-    padding: 48rpx 52rpx;
-    display: flex;
-    justify-content: space-between;
-    gap: 50rpx;
-    .btn{
-        flex:1;
-        text-align: center;
-        padding: 18rpx 60rpx;
-        border-radius: 100rpx;
-        font-size: 32rpx;
-        border: 2rpx solid transparent;
-        &.success{
-            background-color: $my-main-color;
-            color:#fff;
-        }
-        &.cancel{
-            border-color:#D9D9D9;
-            box-shadow: 0 4rpx 0 0 #00000005;
-        }
+.bottom {
+  padding: 48rpx 52rpx;
+  display: flex;
+  justify-content: space-between;
+  gap: 50rpx;
+  .btn {
+    flex: 1;
+    text-align: center;
+    padding: 18rpx 60rpx;
+    border-radius: 100rpx;
+    font-size: 32rpx;
+    border: 2rpx solid transparent;
+    &.success {
+      background-color: $my-main-color;
+      color: #fff;
     }
+    &.cancel {
+      border-color: #d9d9d9;
+      box-shadow: 0 4rpx 0 0 #00000005;
+    }
+  }
 }
-</style>
+</style>