wip:

src/components/MerList.vue

@@ -88,17 +88,16 @@ import {calculateDistance, parseQueryString} from '@/utils';
 import {bindParent, getBanner} from '@/api/user';
 import {getMerList} from '@/api/goods';
 
-const props = defineProps({
-  classId: {
-    type: Number,
-    default: 0,
-  },
-});
+const classId = defineModel({default: 0});
 
 const list1 = ref<Array<MerData>>([]);
 const list2 = ref<Array<MerData>>([]);
 
-Taro.useLoad(async () => {
+Taro.useLoad(() => {
+  init();
+});
+
+const init = async () => {
   Taro.showLoading({
     title: '加载中',
   });
@@ -119,7 +118,7 @@ Taro.useLoad(async () => {
     }
   }
   Taro.hideLoading();
-});
+};
 
 interface MerData {
   ID: number;
@@ -149,11 +148,10 @@ const get_mer_list = async () => {
       userLocalNum.value.t = res.latitude;
     },
   });
-
   const res = await getMerList({
     PageNum: pageVal.value.page,
     PageSize: 10,
-    class_id: props.classId,
+    class_id: classId.value,
   });
   pageVal.value.total = res.data.total;
 
@@ -209,6 +207,7 @@ Taro.useReachBottom(() => {
 
 <style lang="scss">
 .list-box {
+  margin: 20px;
   padding: 10px;
   display: flex;
   flex-wrap: wrap;
@@ -218,8 +217,8 @@ Taro.useReachBottom(() => {
     overflow: scroll;
 
     .item {
-      width: 350px;
-      margin-bottom: 10px;
+      width: 340px;
+      margin-bottom: 18px;
       border-radius: 20px;
       background-color: #fff;
 
@@ -233,7 +232,7 @@ Taro.useReachBottom(() => {
 
         .title {
           color: #333333;
-          font-size: 28px;
+          font-size: 30px;
           overflow: hidden;
           text-overflow: ellipsis;
           // white-space: nowrap;
@@ -252,7 +251,7 @@ Taro.useReachBottom(() => {
           }
 
           .desc {
-            font-size: 25px;
+            font-size: 28px;
           }
         }
       }

src/components/Pay.vue

@@ -5,21 +5,18 @@
     round
     safe-area-inset-bottom
     :close-on-click-overlay="false"
-    :style="{ height: 'auto' }"
+    :style="{height: 'auto'}"
     :visible="isShowPay"
-    @click-close-icon="closePay"
-  >
+    @click-close-icon="closePay">
     <view class="div">
       <view style="text-align: center">支付方式</view>
       <nut-cell-group
-        :style="{ margin: interval ? '40rpx 0 150rpx 0' : '40rpx 0' }"
-      >
+        :style="{margin: interval ? '40rpx 0 150rpx 0' : '40rpx 0'}">
         <nut-cell
           title="微信支付"
           desc="使用微信快捷支付"
           is-link
-          @click="goPay(1)"
-        >
+          @click="goPay(1)">
           <template v-slot:icon>
             <IconFont size="30" :name="require('../static/wx.png')" />
           </template>
@@ -28,8 +25,7 @@
           title="平台积分支付"
           :desc="`剩余积分:${info.integral || 0}`"
           is-link
-          @click="goPay(2)"
-        >
+          @click="goPay(2)">
           <template v-slot:icon>
             <IconFont size="30" :name="require('../static/pt.png')" />
           </template>
@@ -38,8 +34,7 @@
           title="天才小猪积分支付"
           :desc="`剩余积分:${jfInfo.jh_info?.integral || 0}`"
           is-link
-          @click="goPay(3)"
-        >
+          @click="goPay(3)">
           <template v-slot:icon>
             <IconFont size="30" :name="require('../static/jh.png')" />
           </template>
@@ -50,11 +45,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from "vue";
-import { IconFont } from "@nutui/icons-vue-taro";
-import Taro from "@tarojs/taro";
-import { payOrder } from "@/api/order";
-import { getPersonalInfo } from "@/api/user";
+import {ref, watch} from 'vue';
+import {IconFont} from '@nutui/icons-vue-taro';
+import Taro from '@tarojs/taro';
+import {payOrder} from '@/api/order';
+import {getPersonalInfo} from '@/api/user';
 
 const prop = defineProps({
   interval: {
@@ -78,15 +73,15 @@ const prop = defineProps({
   },
 });
 
-const emit = defineEmits(["closePay", "successPay"]);
+const emit = defineEmits(['closePay', 'successPay']);
 
-const info = ref<{ integral?: any }>({});
+const info = ref<{integral?: any}>({});
 
 watch(
   () => prop.isShowPay,
   () => {
     getInfo();
-  }
+  },
 );
 
 const getInfo = async () => {
@@ -96,7 +91,7 @@ const getInfo = async () => {
   } catch (error) {
     Taro.showToast({
       title: error.msg,
-      icon: "none",
+      icon: 'none',
     });
     throw error;
   }
@@ -105,13 +100,13 @@ const getInfo = async () => {
 const goPay = async (type: number) => {
   if (!prop.jfInfo)
     return Taro.showToast({
-      title: "未获取到订单信息~",
-      icon: "none",
+      title: '未获取到订单信息~',
+      icon: 'none',
     });
   try {
     console.log(prop.jfInfo);
     // 1微信支付 2积分支付 3专属积分兑换
-    const { data } = await payOrder({
+    const {data} = await payOrder({
       oid: prop.jfInfo.oid,
       OrderType: prop.OrderType,
       PayType: type,
@@ -128,53 +123,53 @@ const goPay = async (type: number) => {
             paySign: data.data.paySign,
             success: function () {
               Taro.showToast({
-                title: "支付成功",
-                icon: "success",
+                title: '支付成功',
+                icon: 'success',
                 duration: 2000,
               });
-              emit("successPay", false);
+              emit('successPay', false);
             },
             fail: function () {
               Taro.showToast({
-                title: "支付失败",
-                icon: "none",
+                title: '支付失败',
+                icon: 'none',
                 duration: 2000,
               });
-              emit("closePay", false);
+              emit('closePay', false);
             },
           });
         } else {
           Taro.showToast({
-            title: "支付失败，请稍后再试~",
-            icon: "none",
+            title: '支付失败，请稍后再试~',
+            icon: 'none',
           });
-          emit("closePay", false);
+          emit('closePay', false);
         }
         break;
       default:
         Taro.showToast({
-          title: "支付成功",
-          icon: "none",
+          title: '支付成功',
+          icon: 'none',
         });
-        emit("successPay", false);
+        emit('successPay', false);
         break;
     }
   } catch (e) {
     Taro.showToast({
       title: e.msg,
-      icon: "none",
+      icon: 'none',
     });
-    emit("closePay", false);
+    emit('closePay', false);
     throw e;
   }
 };
 
 const closePay = () => {
   Taro.showToast({
-    title: "取消支付",
-    icon: "none",
+    title: '取消支付',
+    icon: 'none',
   });
-  emit("closePay", false);
+  emit('closePay', false);
 };
 </script>