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({
+const classId = defineModel({default: 0});
-  classId: {
-    type: Number,
-    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;
+      width: 340px;
-      margin-bottom: 10px;
+      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

@@ -7,19 +7,16 @@
     :close-on-click-overlay="false"
     :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 {ref, watch} from 'vue';
-import { IconFont } from "@nutui/icons-vue-taro";
+import {IconFont} from '@nutui/icons-vue-taro';
-import Taro from "@tarojs/taro";
+import Taro from '@tarojs/taro';
-import { payOrder } from "@/api/order";
+import {payOrder} from '@/api/order';
-import { getPersonalInfo } from "@/api/user";
+import {getPersonalInfo} from '@/api/user';
 
 const prop = defineProps({
   interval: {
@@ -78,7 +73,7 @@ const prop = defineProps({
   },
 });
 
-const emit = defineEmits(["closePay", "successPay"]);
+const emit = defineEmits(['closePay', 'successPay']);
 
 const info = ref<{integral?: any}>({});
 
@@ -86,7 +81,7 @@ 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,8 +100,8 @@ const getInfo = async () => {
 const goPay = async (type: number) => {
   if (!prop.jfInfo)
     return Taro.showToast({
-      title: "未获取到订单信息~",
+      title: '未获取到订单信息~',
-      icon: "none",
+      icon: 'none',
     });
   try {
     console.log(prop.jfInfo);
@@ -128,53 +123,53 @@ const goPay = async (type: number) => {
             paySign: data.data.paySign,
             success: function () {
               Taro.showToast({
-                title: "支付成功",
+                title: '支付成功',
-                icon: "success",
+                icon: 'success',
                 duration: 2000,
               });
-              emit("successPay", false);
+              emit('successPay', false);
             },
             fail: function () {
               Taro.showToast({
-                title: "支付失败",
+                title: '支付失败',
-                icon: "none",
+                icon: 'none',
                 duration: 2000,
               });
-              emit("closePay", false);
+              emit('closePay', false);
             },
           });
         } else {
           Taro.showToast({
-            title: "支付失败，请稍后再试~",
+            title: '支付失败，请稍后再试~',
-            icon: "none",
+            icon: 'none',
           });
-          emit("closePay", false);
+          emit('closePay', false);
         }
         break;
       default:
         Taro.showToast({
-          title: "支付成功",
+          title: '支付成功',
-          icon: "none",
+          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: "取消支付",
+    title: '取消支付',
-    icon: "none",
+    icon: 'none',
   });
-  emit("closePay", false);
+  emit('closePay', false);
 };
 </script>
 

src/pages/cart/index.vue

@@ -12,9 +12,8 @@
         </nut-cell>
         <nut-checkbox-group
           v-model="itm.state.checkboxgroup"
-          :ref="(el) => getGroup(el, idx)"
+          :ref="el => getGroup(el, idx)"
-          @change="(label) => changeBox(label, itm)"
+          @change="label => changeBox(label, itm)">
-        >
           <nut-cell v-for="(item, idx1) in itm.Goods" :key="idx1">
             <nut-checkbox :label="item.gid" style="width: 10%"></nut-checkbox>
             <view class="box">
@@ -33,8 +32,7 @@
                 readonly
                 :min="-1"
                 @add.stop="() => onAdd(item)"
-                @reduce.stop="() => onReduce(item)"
+                @reduce.stop="() => onReduce(item)" />
-              />
             </view>
           </nut-cell>
         </nut-checkbox-group>
@@ -44,7 +42,7 @@
     <view>
       <view style="height: 100rpx"></view>
     </view>
-    <view class="bottom-box">
+    <view class="bottom-box" v-if="list.length > 0">
       <view class="left">
         <!-- <nut-checkbox v-model="selectAllVal" @change="selectAll"
           >全选
@@ -55,16 +53,14 @@
             <nut-price
               v-model:price="localCount.price"
               size="normal"
-              :need-symbol="false"
+              :need-symbol="false" />
-            />
           </view>
           <view class="text-box">
             总积分：
             <nut-price
               v-model:price="localCount.exchange"
               size="normal"
-              :need-symbol="false"
+              :need-symbol="false" />
-            />
           </view>
         </view>
       </view>
@@ -75,17 +71,16 @@
       :is-show-pay="isShowPay"
       :interval="true"
       v-model:jfInfo="orderData"
-      @closePay="closePay"
+      @closePay="closePay" />
-    />
   </view>
 </template>
 
 <script lang="ts" setup>
-import { nextTick, ref } from "vue";
+import {nextTick, ref} from 'vue';
-import Taro from "@tarojs/taro";
+import Taro from '@tarojs/taro';
-import { addCart, getAllCart } from "@/api/cart";
+import {addCart, getAllCart} from '@/api/cart';
-import { createActiveOrder } from "@/api/goods";
+import {createActiveOrder} from '@/api/goods';
-import Pay from "@/components/Pay.vue";
+import Pay from '@/components/Pay.vue';
 
 interface CardList {
   name: string;
@@ -134,7 +129,7 @@ const changeBox = (label: string[], item: any) => {
     exchange: 0,
   };
 
-  item["Count"] = {
+  item['Count'] = {
     priceCount: 0,
     exchangeCount: 0,
   };
@@ -143,8 +138,8 @@ const changeBox = (label: string[], item: any) => {
     label.forEach((id: string) => {
       item.Goods.forEach((itm: any) => {
         if (itm.gid === id) {
-          item["Count"].priceCount += itm.price;
+          item['Count'].priceCount += itm.price;
-          item["Count"].exchangeCount += itm.exchange;
+          item['Count'].exchangeCount += itm.exchange;
         }
       });
     });
@@ -193,12 +188,12 @@ const orderData = ref<any>([]);
 
 const sub = async () => {
   const arr: any = list.value.filter(
-    (item: any) => item.state.checkboxgroup.length > 0
+    (item: any) => item.state.checkboxgroup.length > 0,
   );
   if (arr.length === 0) {
     Taro.showToast({
-      title: "请选择商品",
+      title: '请选择商品',
-      icon: "none",
+      icon: 'none',
     });
     return;
   }
@@ -214,7 +209,7 @@ const sub = async () => {
   } catch (e) {
     Taro.showToast({
       title: e.msg,
-      icon: "none",
+      icon: 'none',
     });
   }
 };
@@ -224,7 +219,7 @@ const closePay = async (val: boolean) => {
   orderData.value = [];
   await getList();
   Taro.navigateTo({
-    url: "/pages/users/order_list/index?type=0",
+    url: '/pages/users/order_list/index?type=0',
   });
 };
 
@@ -239,7 +234,7 @@ const getList = async () => {
     list.value = list.value.map((item: any) => ({
       ...item,
       Goods: item.Goods.sort(
-        (a: CardList, b: CardList) => Number(a.gid) - Number(b.gid)
+        (a: CardList, b: CardList) => Number(a.gid) - Number(b.gid),
       ),
       state: {
         indeterminate: false,
@@ -277,13 +272,13 @@ const add_cart = async (item: CardList, num: number = 1) => {
     });
     Taro.showToast({
       title: res.msg,
-      icon: "none",
+      icon: 'none',
     });
     await getList();
   } catch (e) {
     Taro.showToast({
       title: e.msg,
-      icon: "none",
+      icon: 'none',
     });
   }
 };
@@ -291,7 +286,7 @@ const add_cart = async (item: CardList, num: number = 1) => {
 
 <style lang="scss">
 .index {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;

src/pages/index/index.scss

@@ -1,5 +1,5 @@
 page {
-  background-image: url("//p0.meituan.net/csc/aaaccd28594119e4b838d07d30739471440261.png");
+  background-image: url('//p0.meituan.net/csc/aaaccd28594119e4b838d07d30739471440261.png');
   background-size: 100% 57%;
   background-repeat: no-repeat;
   box-sizing: border-box;
@@ -10,10 +10,6 @@ page {
   display: flex;
   align-items: flex-end;
   color: #fff;
-
-  text {
-    font-size: 25px;
-  }
 }
 
 .search {
@@ -43,7 +39,7 @@ page {
 
 .banner {
   .title {
-    background-image: url("//p0.meituan.net/csc/542112fc072d4687b437848bc29b0a1730495.png");
+    background-image: url('//p0.meituan.net/csc/542112fc072d4687b437848bc29b0a1730495.png');
     background-size: 100% 100%;
     width: 600px;
     height: 90px;
@@ -52,7 +48,7 @@ page {
 
   .jf-btn {
     margin: 15px auto;
-    background-image: url("//p1.meituan.net/csc/e125184432dc591137c24a26abe5796a25262.png");
+    background-image: url('//p1.meituan.net/csc/e125184432dc591137c24a26abe5796a25262.png');
     background-size: 100% 100%;
     width: 350px;
     height: 70px;
@@ -66,21 +62,21 @@ page {
     padding: 0 15px;
 
     .btn-1 {
-      background-image: url("//p0.meituan.net/csc/7708348ee250eae910328bb7c12197f029562.png");
+      background-image: url('//p0.meituan.net/csc/7708348ee250eae910328bb7c12197f029562.png');
       background-size: 100% 100%;
       width: 200px;
       height: 220px;
     }
 
     .btn-2 {
-      background-image: url("//p1.meituan.net/csc/8cc2b518031eb7424b184d90a583d805146287.png");
+      background-image: url('//p1.meituan.net/csc/8cc2b518031eb7424b184d90a583d805146287.png');
       background-size: 100% 100%;
       width: 300px;
       height: 220px;
     }
 
     .btn-3 {
-      background-image: url("//p0.meituan.net/csc/31bd1f5c791c95557758dfa5c96e001529545.png");
+      background-image: url('//p0.meituan.net/csc/31bd1f5c791c95557758dfa5c96e001529545.png');
       background-size: 100% 100%;
       width: 200px;
       height: 220px;
@@ -91,13 +87,12 @@ page {
 .navigation {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  grid-gap: 10px;
+  grid-gap: 40px;
-  margin: 10px auto;
+  margin: 20px;
-  width: 730px;
   height: auto;
   background-color: #fff;
   border-radius: 20px;
-  padding: 20px;
+  padding: 32px 26px;
 
   .item {
     display: flex;
@@ -112,15 +107,15 @@ page {
 
     .text {
       color: #333333;
-      font-size: 23px;
+      font-size: 26px;
       margin-top: 6px;
     }
   }
 }
 
 .ad {
-  background-image: url("https://jdt168.oss-cn-guangzhou.aliyuncs.com/ad.png");
+  background-image: url('https://jdt168.oss-cn-guangzhou.aliyuncs.com/ad.png');
   background-size: 100% 100%;
-  width: 100%;
   height: 180px;
+  margin: 20px;
 }

src/pages/index/index.vue

@@ -3,7 +3,7 @@
     <view :style="{marginTop: BarHeight + 'px'}"></view>
     <view class="local">
       <view class="iconfont icon-dizhi" style="font-size: 20px"></view>
-      <text>{{ address }}</text>
+      <text class="text-[28px]">{{ address }}</text>
     </view>
     <view class="search">
       <view
@@ -31,12 +31,7 @@
         v-for="(item, index) in navigationList"
         :key="index"
         @click="toPage(item)">
-        <view
+        <image class="icon" :src="item.icon" />
-          class="icon"
-          :style="{
-            backgroundImage: `url(${item.icon})`,
-          }">
-        </view>
         <view class="text">{{ item.name }}</view>
       </view>
     </view>
@@ -72,6 +67,7 @@ Taro.useShareAppMessage(() => ({
 }));
 
 const searchVal = ref('');
+
 const clickSearch = () => {
   if (!searchVal.value)
     return Taro.showToast({
@@ -97,7 +93,7 @@ const getUserLocal = async () => {
         method: 'GET',
         success: res => {
           const data = res.data.result.address_component;
-          address.value = `${data.city}${data.district}${data.street_number}`;
+          address.value = `${data.district}${data.street_number}`;
         },
       });
     },

src/pages/search/index.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import {ref, onMounted} from 'vue';
-import Taro from "@tarojs/taro";
+import Taro from '@tarojs/taro';
-import MerList from "@/components/MerList.vue";
+import MerList from '@/components/MerList.vue';
 
-const classId = ref<null | number>(null);
+const classId = ref();
 
-Taro.useLoad((e) => {
+onMounted(() => {
+  const e = Taro.getCurrentInstance().router?.params as any;
   Taro.setNavigationBarTitle({
     title: e.name,
   });
@@ -14,9 +15,7 @@ Taro.useLoad((e) => {
 </script>
 
 <template>
-  <view>
+  <MerList v-model="classId" />
-    <MerList :classId="classId" />
-  </view>
 </template>
 
 <style lang="scss"></style>

src/pages/user/index.vue

@@ -43,24 +43,24 @@
         </view>
       </view>
     </view>
-    <view class="user-acc flex justify-center items-center text-center">
+    <view class="user-acc flex items-center text-center justify-evenly px-10">
       <view>
-        <view class="text-[#CFAA32]">豆子</view>
+        <view class="text-[#ffc300] text-[40px] font-bold">{{
-        <view class="text-[#ffc300] text-[35px] font-bold">{{
           userInfo.data?.pulse || 0
         }}</view>
+        <view class="text-[#CFAA32] text-[28px]">豆子</view>
       </view>
       <view class="line"></view>
       <view>
-        <view class="text-[#CFAA32]">积分</view>
+        <view class="text-[#ffc300] text-[40px] font-bold">{{
-        <view class="text-[#ffc300] text-[35px] font-bold">{{
           userInfo.data?.integral || 0
         }}</view>
+        <view class="text-[#CFAA32] text-[28px]">积分</view>
       </view>
     </view>
     <view class="container">
       <!--我的订单-->
-      <view class="border-box bg-[#fff] p-[30px]">
+      <view class="border-box bg-[#fff] p-[20px]">
         <view class="flex justify-between items-center">
           <view class="text-[#333333]">我的订单</view>
           <view
@@ -70,13 +70,13 @@
             <ArrowRight size="10" />
           </view>
         </view>
-        <view class="flex justify-between text-[#666] pl-[30px] pr-[30px]">
+        <view class="flex justify-between text-[#666] px-[20px]">
           <view
             class="mt-[30px] flex flex-col items-center"
             @click="toOrderList(1)">
             <IconFont
               name="http://p0.meituan.net/csc/9943f6c938fc0e310141a2b99d5bde6617483.png"
-              size="40" />
+              size="42" />
             <view class="mt-[15px] text-[25px] text-[#333333]">待付款</view>
           </view>
           <view
@@ -84,7 +84,7 @@
             @click="toOrderList(2)">
             <IconFont
               name="http://p0.meituan.net/csc/5306d094d7b4b61848dd21c86b693a9515523.png"
-              size="40" />
+              size="42" />
             <view class="mt-[15px] text-[25px] text-[#333333]">待使用</view>
           </view>
           <view
@@ -92,7 +92,7 @@
             @click="toOrderList(3)">
             <IconFont
               name="http://p0.meituan.net/csc/32ea9bbf51e3bbb0cbd75bc0fea97ca815779.png"
-              size="40" />
+              size="42" />
             <view class="mt-[15px] text-[25px] text-[#333333]">已使用</view>
           </view>
           <view
@@ -100,7 +100,7 @@
             @click="toOrderList(4)">
             <IconFont
               name="http://p0.meituan.net/csc/2e0dee89e9a3e3f2e7bf65db355fa11c11630.png"
-              size="40" />
+              size="42" />
             <view class="mt-[15px] text-[25px] text-[#333333]">已失效</view>
           </view>
         </view>
@@ -115,11 +115,11 @@
               v-if="item.type !== 333"
               class="box-mini"
               @click="toPage(item.url)">
-              <IconFont size="40" :name="item.icon"></IconFont>
+              <IconFont size="42" :name="item.icon"></IconFont>
               <view class="label">{{ item.label }}</view>
             </view>
             <button v-else class="kf-btn" open-type="contact">
-              <IconFont class="IconFont" size="40" :name="item.icon"></IconFont>
+              <IconFont class="IconFont" size="42" :name="item.icon"></IconFont>
               <view class="label">{{ item.label }}</view>
             </button>
           </view>
@@ -131,44 +131,44 @@
         class="user-center"
         v-if="userInfo.data?.bid && userInfo.store_status === 1">
         <view class="text-[#333333]">商家服务</view>
-        <nut-grid :gutter="0" :border="false">
+        <view class="box">
-          <nut-grid-item
+          <view
-            :border="false"
             v-if="userInfo.data.permission.dd"
-            text="点单"
+            class="box-mini"
             @click="toPage('/pages/admin/add_order/index')">
             <IconFont
-              size="40"
+              size="42"
               name="http://p0.meituan.net/csc/72a389ac6a441061fd534b96644c431b7839.png"></IconFont>
-          </nut-grid-item>
+            <view class="label">后结点单</view>
-          <nut-grid-item
+          </view>
-            :border="false"
+          <view
             v-if="userInfo.data.permission.hx"
-            text="订单核销"
+            class="box-mini"
             @click="toPage('/pages/admin/verify/index')">
             <IconFont
-              size="40"
+              size="42"
               name="http://p1.meituan.net/csc/c236a8b7a73178da25218e1fb59a96f06610.png"></IconFont>
-          </nut-grid-item>
+            <view class="label">订单核销</view>
-          <nut-grid-item
+          </view>
-            :border="false"
+          <view
             v-if="userInfo.data.permission.tj"
-            text="订单统计"
+            class="box-mini"
             @click="toPage('/pages/admin/order_manage/index')">
             <IconFont
-              size="40"
+              size="42"
               name="http://p0.meituan.net/csc/bd9aca457a109b4d69a692a9109a73ed9045.png"></IconFont>
-          </nut-grid-item>
+            <view class="label">订单统计</view>
-          <nut-grid-item
+          </view>
-            :border="false"
+          <view
             v-if="userInfo.data.permission.tx"
-            text="收益提现"
+            class="box-mini"
             @click="toPage('/pages/admin/withdrawal/index')">
             <IconFont
-              size="40"
+              size="42"
               name="http://p0.meituan.net/csc/f85d7dc1bf9eda8977e9089b260a586b7440.png"></IconFont>
-          </nut-grid-item>
+            <view class="label">收益提现</view>
-        </nut-grid>
+          </view>
+        </view>
       </view>
 
       <!--    版权    -->
@@ -428,10 +428,10 @@ const scanCode = () => {
   -nut-grid-item-text-color: #333;
 
   .box {
-    margin-top: 20px;
+    margin-top: 30px;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
-    grid-gap: 20px;
+    grid-gap: 20px 100px;
     box-sizing: border-box;
     line-height: 1.5;