perf(merchant): 优化代码，解决请求问题

src/api/merchant/mine.js

@@ -9,7 +9,10 @@ import request from '@/utils/request';
 export function updateBusinessStatus(id, data) {
   return request({
     url: `/maintain/merchant/updateBusinessStatus/${id}`,
-    method: 'PUT',
-    data: data,
+    method: 'get',
+    data,
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
   });
 }

src/pageMerchant/mineModule/storeEnviron.vue

@@ -1,12 +1,16 @@
 <template>
   <view class="storeEnviron">
+
     <view class="text-center environ">
-      <ImgsUpload></ImgsUpload>
-      <view style="margin: 20rpx 0">门店图</view>
+      <image :src="list.storeImage" mode="" v-if="list.storeImage"></image>
+      <ImgsUpload v-else />
+      <view style="margin: 20rpx 0">店铺门面图(需包含完整牌匾)</view>
     </view>
+
     <view class="text-center u-m-t-40 environ">
-      <ImgsUpload></ImgsUpload>
-      <view style="margin: 20rpx 0">门店图</view>
+      <image :src="list.storeInnerImage" mode="" v-if="list.storeInnerImage"></image>
+      <ImgsUpload v-else />
+      <view style="margin: 20rpx 0">店内真实环境</view>
     </view>
 
     <view style="margin-top: 140rpx">
@@ -16,19 +20,30 @@
 </template>
 
 <script>
-import ImgsUpload from './certification/components/ImgsUpload.vue';
-export default {
-  components: { ImgsUpload },
-};
+  import ImgsUpload from './certification/components/ImgsUpload.vue';
+  export default {
+    components: {
+      ImgsUpload
+    },
+    data() {
+      return {
+        list: {},
+      };
+    },
+    onShow() {
+      this.list = this.$store.state.data.merchantInfo;
+    },
+  };
 </script>
 
 <style lang="scss" scoped>
-.storeEnviron {
-  height: 100vh;
-  padding: 20rpx;
-  background-color: #fff;
-  .environ {
-    margin: 20rpx;
+  .storeEnviron {
+    height: 100vh;
+    padding: 20rpx;
+    background-color: #fff;
+
+    .environ {
+      margin: 20rpx;
+    }
   }
-}
 </style>

src/pageMerchant/tabbar/mine.vue

@@ -4,17 +4,10 @@
     <view class="mine__nav" :style="{ height: 77 + 'px' }" />
     <view class="mine__person">
       <view class="mine__person--info">
-        <view @click="handlerSkipUserInfo">
-          <image
-            :src="merchantInfo.merchant.logo"
-            style="width: 140rpx; height: 140rpx; border-radius: 50%"
-            v-if="merchantInfo.merchant.logo"
-          />
-          <image
-            src="@/static/QR57a.jpg"
-            style="width: 140rpx; height: 140rpx; border-radius: 50%"
-            v-else
-          />
+        <view @click="$Router.push('/pageMerchant/mineModule/personalInfo')">
+          <image :src="merchantInfo.merchant.logo" style="width: 140rpx; height: 140rpx; border-radius: 50%"
+            v-if="merchantInfo.merchant.logo" />
+          <image src="@/static/QR57a.jpg" style="width: 140rpx; height: 140rpx; border-radius: 50%" v-else />
         </view>
         <view class="userName">
           <view>
@@ -26,15 +19,14 @@
               +86 {{ merchantInfo.mobileNumber }}
             </view>
             <view v-else class="text">
-              <text style="color: #f6bf3f"> 您当前还未认证，</text> <span @click="toApprove">去认证></span>
+              <text style="color: #f6bf3f"> 您当前还未认证，</text>
+              <text @click="$Router.push('/pageMerchant/mineModule/certification/index')">
+                去认证>
+              </text>
             </view>
           </view>
         </view>
-        <view
-          class="status"
-          :style="{ 'background-color': getStatusColor(state) }"
-          @click="show = true"
-        >
+        <view class="status" :style="{ 'background-color': getStatusColor(state) }" @click="show = true">
           <view style="margin-right: 6rpx">{{ stateName }}</view>
           <u-icon name="play-right-fill" color="#fff" size="12" />
         </view>
@@ -51,23 +43,20 @@
           </view>
         </view>
         <view class="walletInfo">
-          <view v-for="index in 4" :key="index">
-            <view class="text-title">借钱(元)</view>
-            <view class="text-data">
-              30
-              <text style="font-size: 24rpx; margin-left: 5rpx">万</text>
-            </view>
-            <view class="text-info">最高可用</view>
+          <view v-for="item,index in incomeList" :key="index">
+            <view class="text-title">{{item.title}}</view>
+            <view class="text-data">￥{{item.num}}</view>
+            <!-- <view class="text-info">最高可用</view> -->
           </view>
         </view>
-        <view class="shortcut">
+        <!--        <view class="shortcut">
           <view style="display: flex">
             <view>快捷支付</view>
             <view style="margin: 0 20rpx">|</view>
             <view>一银升级银行卡用于麦付</view>
           </view>
           <u-icon name="arrow-right" color="#fff" size="14" />
-        </view>
+        </view> -->
       </view>
 
       <view class="mine__main--setting">
@@ -79,8 +68,8 @@
       </view>
 
       <view class="mine__main--setting">
-        <template v-for="item in list2" @click="tap(item)">
-          <u-cell size="large" :border="false" @tap="" :key="item.name" :title="item.name" isLink :url="item.url">
+        <template v-for="item in list2">
+          <u-cell size="large" :border="false" :key="item.name" :title="item.name" isLink :url="item.url">
             <image slot="icon" src="@/static/tools.jpg" style="width: 60rpx; height: 60rpx" />
           </u-cell>
         </template>
@@ -88,300 +77,284 @@
     </view>
 
     <!-- 营业状态选择弹框 -->
-    <u-picker
-      :show="show"
-      :columns="columns"
-      @cancel="cancel"
-      @confirm="confirm"
-      keyName="label"
-    ></u-picker>
+    <u-picker :show="show" :columns="columns" @cancel="cancel" @confirm="confirm" keyName="label"></u-picker>
 
     <!-- 商家认证的弹框 -->
-    <u-modal
-      :show="showAut"
-      :title="title"
-      :content="content"
-      :confirmText="'开始认证'"
-      :cancelText="'返回用户端'"
-      :showCancelButton="true"
-      @confirm="confirmSwitch"
-      @cancel="showAut = false"
-    ></u-modal>
+    <u-modal :show="showAut" :title="title" :content="content" :confirmText="'开始认证'" :cancelText="'返回用户端'"
+      :showCancelButton="true" @confirm="confirmSwitch" @cancel="showAut = false"></u-modal>
 
     <!-- <tabbar currentTab="merchantMine" /> -->
   </view>
 </template>
 
 <script>
-import { getMerchantAuthData } from '@/api/merchant/merchantAuth';
-import { updateBusinessStatus } from '@/api/merchant/mine';
-import { phoneEncryption } from '@/utils/tools';
-
-export default {
-  data() {
-    return {
-      state: 0,
-      stateName: '营业中',
-      show: false,
-      showAut: false,
-      title: '商家认证',
-      content: '进入商家端前，我们需要一定的认证',
-      merchantInfo: {},
-      columns: [
-        // 营业状态 0-营业中，1-休息中
-        [
+  import {
+    getMerchantAuthData
+  } from '@/api/merchant/merchantAuth';
+  import {
+    updateBusinessStatus
+  } from '@/api/merchant/mine';
+  import {
+    phoneEncryption
+  } from '@/utils/tools';
+
+  export default {
+    data() {
+      return {
+        state: 0,
+        stateName: '营业中',
+        show: false,
+        showAut: false,
+        title: '商家认证',
+        content: '进入商家端前，我们需要一定的认证',
+        merchantInfo: {},
+        incomeList: [{
+            num: '0.00',
+            title: '总收益',
+          },
+          {
+            num: '0.00',
+            title: '本月收益',
+          },
           {
-            label: '营业中',
-            id: '0',
+            num: '0.00',
+            title: '本周收益',
           },
           {
-            label: '休息中',
+            num: '0.00',
+            title: '可提现',
+          },
+        ],
+        columns: [
+          // 营业状态 0-营业中，1-休息中
+          [{
+              label: '营业中',
+              id: '0',
+            },
+            {
+              label: '休息中',
+              id: '1',
+            },
+          ],
+        ],
+        list1: [{
             id: '1',
+            name: '门店环境',
+            url: '/pageMerchant/mineModule/storeEnviron',
+          },
+          // {
+          //   id: '2',
+          //   name: '我要开店',
+          //   url: '/pages/merchant/mine/openStore/index',
+          // },
+          {
+            id: '3',
+            name: '资质信息',
+            url: '/pageMerchant/mineModule/openStoreAppealDetail',
           },
         ],
-      ],
-      list1: [
-        {
-          id: '1',
-          name: '门店环境',
-          url: '/pageMerchant/mineModule/storeEnviron',
-        },
-        // {
-        //   id: '2',
-        //   name: '我要开店',
-        //   url: '/pages/merchant/mine/openStore/index',
-        // },
-        {
-          id: '3',
-          name: '资质信息',
-          url: '/pageMerchant/mineModule/openStoreAppealDetail',
-        },
-      ],
-
-      list2: [
-        {
-          id: '1',
-          name: '帮助中心',
-          url: '',
-        },
-        {
-          id: '2',
-          name: '设置',
-          url: '/pageMerchant/mineModule/setting/index',
-        },
-      ],
-    };
-  },
-
-  onShow() {
-    this.getMerchantAuth();
-    setTimeout(() => {
-      if (this.merchantInfo) {
-        this.showAut = false;
-      } else {
-        this.showAut = true;
-      }
-    }, 300);
-  },
 
-  methods: {
-    tap(item) {
-      console.log('item', item);
+        list2: [{
+            id: '1',
+            name: '意见反馈',
+            url: '',
+          },
+          {
+            id: '2',
+            name: '设置',
+            url: '/pageMerchant/mineModule/setting/index',
+          },
+        ],
+      };
     },
 
-    // changeStatus() {
-    //   this.show = true;
-    // },
-
-    // 开始认证
-    confirmSwitch() {
-      uni.navigateTo({
-        url:'/pageMerchant/mineModule/certification/index'
-      });
-    },
-    // handelCancel() {
-    //   uni.switchTab({
-    //     url: '/pages/client/tabBar/home/index',
-    //   });
-    // },
-    // 修改商家状态
-    confirm(val) {
-      this.state = val.value[0].id;
-      this.stateName = val.value[0].label;
-      this.show = false;
-
-      updateBusinessStatus(this.merchantInfo.merchant.id, { businessStatus: this.state }).then(
-        res => {
-          if (res.code === 'OK') {
-            this.$u.toast('修改成功');
-          }
-        },
-      );
+    created() {
+      this.getMerchantAuth();
     },
 
-    getStatusColor(state) {
-      if (state === 0) {
-        return '#19be6b';
-      } else if (state === 1) {
-        return '#ff9900';
+    mounted() {
+      if (this.merchantInfo) {
+        this.showAut = false;
+      } else {
+        this.showAut = true;
       }
-    },
 
-    // 点击跳转到设置
-    handlerSkipSetting() {
-      uni.navigateTo({
-        url: '/pages/merchant/mine/setting/index',
-      });
+      console.log(this.merchantInfo.merchant.id, '111111111');
     },
 
-    // 获取商家信息
-    async getMerchantAuth() {
-      let res = await getMerchantAuthData();
-      if (res.code === 'OK') {
-        // 将数据存储到vuex中
-        this.merchantInfo = Object.assign(
-          {},
-          {
+    methods: {
+      /*===========================================================*/
+      // 获取商家信息
+      async getMerchantAuth() {
+        let res = await getMerchantAuthData();
+        if (res.code === 'OK') {
+          // 将数据存储到vuex中
+          this.merchantInfo = Object.assign({}, {
             ...res.data,
             mobileNumber: phoneEncryption(res.data.mobileNumber),
+          }, );
+
+          this.$store.commit('SET_MERCHANTINFO', res.data);
+        }
+      },
+
+      /*===========================================================*/
+      // 开始认证
+      confirmSwitch() {
+        uni.navigateTo({
+          url: '/pageMerchant/mineModule/certification/index'
+        });
+      },
+
+      /*===========================================================*/
+
+      // 修改商家状态
+      confirm(val) {
+        this.state = val.value[0].id;
+        this.stateName = val.value[0].label;
+        this.show = false;
+
+        updateBusinessStatus(this.merchantInfo.merchant.id, {
+          businessStatus: this.state
+        }).then(
+          res => {
+            if (res.code === 'OK') {
+              this.$u.toast('修改成功');
+            }
           },
         );
-        this.$store.commit('SET_MERCHANTINFO', res.data);
-      }
-    },
+      },
 
-	// 跳转到商家认证
-	toApprove(){
-		uni.navigateTo({
-			url:'/pageMerchant/mineModule/certification/index'
-		})
-	},
-  // 点击跳转到个人信息
-  handlerSkipUserInfo(){
-    uni.navigateTo({
-      url:'/pageMerchant/mineModule/personalInfo'
-    })
-  }
-  },
-};
+      getStatusColor(state) {
+        if (state === 0) {
+          return '#19be6b';
+        } else if (state === 1) {
+          return '#ff9900';
+        }
+      },
+
+      /*===========================================================*/
+
+    },
+  };
 </script>
 
 <style lang="scss" scoped>
-.mine {
-  min-height: calc(100vh - 80rpx);
-  box-sizing: border-box;
+  .mine {
+    min-height: calc(100vh - 80rpx);
+    box-sizing: border-box;
 
-  &__nav {
-    background-color: $uni-bg-color-primary;
-  }
+    &__nav {
+      background-color: $uni-bg-color-primary;
+    }
 
-  &__person {
-    height: 160rpx;
-    padding: $uni-bg-padding-sm;
-    background-color: $uni-bg-color-primary;
-    position: relative;
+    &__person {
+      height: 160rpx;
+      padding: $uni-bg-padding-sm;
+      background-color: $uni-bg-color-primary;
+      position: relative;
 
-    &--info {
-      color: #fff;
-      display: flex;
+      &--info {
+        color: #fff;
+        display: flex;
 
-      .userName {
-        width: 400rpx;
-        font-size: 36rpx;
-        margin: 20rpx 0 0 16rpx;
+        .userName {
+          width: 400rpx;
+          font-size: 36rpx;
+          margin: 20rpx 0 0 16rpx;
 
-        .text {
-          margin-top: 15rpx;
-          font-size: 28rpx;
+          .text {
+            margin-top: 15rpx;
+            font-size: 28rpx;
+          }
         }
-      }
 
-      .status {
-        display: flex;
-        position: absolute;
-        bottom: 80rpx;
-        padding-left: 20rpx;
-        right: 0;
-        width: 150rpx;
-        height: 60rpx;
-        font-size: 25rpx;
-        align-items: center;
-        justify-content: center;
-        box-sizing: border-box;
-        border-radius: 30rpx 0 0 30rpx;
-        background-color: rgba(255, 255, 255, 0.3);
+        .status {
+          display: flex;
+          position: absolute;
+          bottom: 80rpx;
+          padding-left: 20rpx;
+          right: 0;
+          width: 150rpx;
+          height: 60rpx;
+          font-size: 25rpx;
+          align-items: center;
+          justify-content: center;
+          box-sizing: border-box;
+          border-radius: 30rpx 0 0 30rpx;
+          background-color: rgba(255, 255, 255, 0.3);
+        }
       }
     }
-  }
-
-  &__main {
-    padding: $uni-bg-padding-sm;
 
-    &--purse {
-      background-color: $uni-bg-color;
+    &__main {
       padding: $uni-bg-padding-sm;
-      border-radius: $uni-border-radius-base;
 
-      .wallet {
-        display: flex;
-        justify-content: space-between;
-        font-size: 28rpx;
+      &--purse {
+        background-color: $uni-bg-color;
+        padding: $uni-bg-padding-sm;
+        border-radius: $uni-border-radius-base;
 
-        &--title {
-          color: #000;
-          font-size: 36rpx;
-          font-weight: 700;
+        .wallet {
+          display: flex;
+          justify-content: space-between;
+          font-size: 28rpx;
+
+          &--title {
+            color: #000;
+            font-size: 36rpx;
+            font-weight: 700;
+          }
+
+          &--more {
+            color: #333;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
         }
 
-        &--more {
+        .walletInfo {
+          margin: 40rpx 0;
           color: #333;
           display: flex;
-          justify-content: center;
-          align-items: center;
+          text-align: center;
+          justify-content: space-around;
         }
-      }
 
-      .walletInfo {
-        margin: 40rpx 0;
-        color: #333;
-        display: flex;
-        text-align: center;
-        justify-content: space-around;
+        // .shortcut {
+        //   height: 70rpx;
+        //   padding: 0 20rpx;
+        //   color: #fff;
+        //   font-size: 28rpx;
+        //   display: flex;
+        //   align-items: center;
+        //   justify-content: space-between;
+        //   background-color: $uni-bg-color-primary;
+        //   border-radius: $uni-border-radius-sm;
+        // }
       }
 
-      .shortcut {
-        height: 70rpx;
-        padding: 0 20rpx;
-        color: #fff;
-        font-size: 28rpx;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        background-color: $uni-bg-color-primary;
-        border-radius: $uni-border-radius-sm;
+      &--setting {
+        margin: 20rpx 0;
+        background-color: $uni-bg-color;
+        padding: $uni-bg-padding-sm;
+        border-radius: $uni-border-radius-base;
       }
     }
-
-    &--setting {
-      margin: 20rpx 0;
-      background-color: $uni-bg-color;
-      padding: $uni-bg-padding-sm;
-      border-radius: $uni-border-radius-base;
-    }
   }
-}
 
-.text-title {
-  font-size: 34rpx;
-}
+  .text-title {
+    font-size: 34rpx;
+  }
 
-.text-data {
-  font-size: 40rpx;
-  margin: 15rpx 0;
-  font-weight: 700;
-}
+  .text-data {
+    font-size: 40rpx;
+    margin: 15rpx 0;
+    font-weight: 700;
+  }
 
-.text-info {
-  font-size: 24rpx;
-}
+  .text-info {
+    font-size: 24rpx;
+  }
 </style>

src/pageMerchant/tabbar/order.vue

@@ -2,89 +2,95 @@
   <view>
     <view class="order">
       <view style="background-color: #fff; padding: 15rpx">
-        <u-tabs
-          :list="list1"
-          lineWidth="30"
-          lineColor="$uni-bg-color-primary"
-          :activeStyle="{
+        <u-tabs :list="list1" lineWidth="30" lineColor="$uni-bg-color-primary" :activeStyle="{
             color: '#000',
             fontWeight: 'bold',
             fontSize: '32rpx',
             transform: 'scale(1.05)',
             marginBottom: '15rpx',
-          }"
-          :inactiveStyle="{
+          }" :inactiveStyle="{
             color: '#333',
             fontSize: '30rpx',
             transform: 'scale(1)',
             marginBottom: '15rpx',
-          }"
-          itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
-          @click="handlerChangeItem"
-        ></u-tabs>
+          }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @click="handlerChangeItem"></u-tabs>
       </view>
 
-      <!-- <orderItem :list="orderList" :typeStyle.sync="typeStyle"></orderItem> -->
+      <orderItem :list="orderList" :typeStyle.sync="typeStyle"></orderItem>
     </view>
     <tabbar currentTab="merchantOrder" />
   </view>
 </template>
 
 <script>
-// import orderItem from '@/pages/merchant/order/components/orderItem.vue';
-import { getOrderListApi } from '@/api/merchant/order';
-export default {
-  // components: { orderItem },
-  data() {
-    return {
-      list1: [
-        { id: '0', name: '全部' },
-        { id: '1', name: '待核销' },
-        { id: '2', name: '已核销' },
-        { id: '3', name: '退款' },
-      ],
-      orderList: [],
-      params: {
-        pageNum: 1,
-        pageSize: 10,
-      },
-      typeStyle: 0,
-      status: '0',
-    };
-  },
-
-  methods: {
-    // 点击切换顶部导航栏
-    handlerChangeItem(item) {
-      this.typeStyle = item.index;
-      this.getOrderList(item.id);
+  import orderItem from './orderItem.vue';
+  import {
+    getOrderListApi
+  } from '@/api/merchant/order';
+  export default {
+    components: {
+      orderItem
+    },
+    data() {
+      return {
+        list1: [{
+            id: '0',
+            name: '全部'
+          },
+          {
+            id: '1',
+            name: '待核销'
+          },
+          {
+            id: '2',
+            name: '已核销'
+          },
+          {
+            id: '3',
+            name: '退款'
+          },
+        ],
+        orderList: [],
+        params: {
+          pageNum: 1,
+          pageSize: 10,
+        },
+        typeStyle: 0,
+        status: '0',
+      };
     },
 
-    async getOrderList(status) {
-      let result = Object.assign(
-        {},
-        {
+    methods: {
+      // 点击切换顶部导航栏
+      handlerChangeItem(item) {
+        this.typeStyle = item.index;
+        this.getOrderList(item.id);
+      },
+
+      async getOrderList(status) {
+        let result = Object.assign({}, {
           paging: `${this.params.pageNum},${this.params.pageSize}`,
           status: status || 0,
-        },
-      );
-      let res = await getOrderListApi({ ...result });
-      if (res.code === 'OK') {
-        this.orderList = res.data.records;
-      }
+        }, );
+        let res = await getOrderListApi({
+          ...result
+        });
+        if (res.code === 'OK') {
+          this.orderList = res.data.records;
+        }
+      },
     },
-  },
 
-  onShow() {
-    this.getOrderList();
-  },
-};
+    created() {
+      this.getOrderList();
+    },
+  };
 </script>
 
 <style lang="scss" scoped>
-.order {
-  min-height: calc(100vh - 80rpx);
-  background-color: $uni-bg-color-page;
-  padding-top: 80rpx;
-}
+  .order {
+    min-height: calc(100vh - 80rpx);
+    background-color: $uni-bg-color-page;
+    padding-top: 80rpx;
+  }
 </style>

src/pageMerchant/tabbar/orderItem.vue

@@ -0,0 +1,200 @@
+<template>
+  <!-- 一些功能暂定 -->
+  <view class="">
+    <view class="order__info" v-for="item in list" :key="item.id">
+      <view class="order__info--phone">
+        <view>
+          <view style="font-size: 35rpx; margin-bottom: 20rpx">
+            182***4342
+            <text class="tipInfo" style="margin-left: 10rpx">(预留手机)</text>
+          </view>
+          <!-- <view class="tipInfo">近90天第16次下单</view> -->
+        </view>
+        <u-icon name="phone" color="#2979ff" size="28" @click="handlerMakePhone"></u-icon>
+      </view>
+
+      <view class="order__info--pay">
+        <view class="service">
+          <view class="orderInfo" v-for="ele in item.goodsInfo" :key="ele.id">
+            <image slot="icon" :src="ele.goodsPic" style="width: 150rpx; height: 150rpx" />
+            <view>{{ ele.goodsName }}</view>
+          </view>
+        </view>
+
+        <!-- <view class="description">
+          <view class="description--title">汽车维修与保养</view>
+          <view class="tipInfo">专业维修保界</view>
+          <view class="description--text">服务描述……</view>
+        </view> -->
+      </view>
+
+      <view class="order__info--compute">
+        <!-- <view class="computeFlex">
+          <view>发票信息</view>
+          <view class="tipInfo">不需要</view>
+        </view> -->
+        <!-- <view class="computeFlex">
+          <view>技术服务费</view>
+          <view class="tipInfo">￥15</view>
+        </view> -->
+        <view class="computeFlex">
+          <view>支付金额</view>
+          <view class="tipInfo" style="color: #df5f5f">{{ `￥${item.totalAmount}` || '--' }}</view>
+        </view>
+        <view class="computeFlex">
+          <view>优惠金额</view>
+          <view class="tipInfo" style="color: #df5f5f">{{ `￥${item.couponAmount}` || '--' }}</view>
+        </view>
+      </view>
+
+      <view class="order__info--tip">
+        <view class="tip-l">
+          <view class="tipInfo"> 订单编号：{{ item.orderSn }}</view>
+          <!-- <view class="tipInfo"> 交易快照：发生争议时，可作为判断依据</view> -->
+          <view class="tipInfo"> 下单时间：{{ $u.timeFormat(item.createTime) }}</view>
+        </view>
+        <view class="tip-r">
+          <view class="r-btn" v-if="typeStyle == 1" @click="handlerCloseOrder"> 关闭交易 </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {};
+    },
+    props: {
+      typeStyle: {
+        type: Number,
+        default: 0,
+      },
+      list: {
+        type: Array,
+        default: [],
+      },
+    },
+    watch: {
+      typeStyle(newValue, oldValue) {
+        console.log('newValue', newValue);
+      },
+    },
+    methods: {
+      // 点击拨打电话
+      handlerMakePhone() {
+        uni.makePhoneCall({
+          phoneNumber: '114', //仅为示例
+        });
+      },
+      // 删除订单
+      handlerCloseOrder() {
+        uni.showToast({
+          title: '么的',
+          icon: 'none',
+        });
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .order {
+    &__info {
+      margin: 20rpx 0;
+      background-color: $uni-bg-color;
+      padding: $uni-bg-padding-sm;
+
+      &--phone {
+        display: flex;
+        justify-content: space-between;
+        padding-bottom: 20rpx;
+        border-bottom: 2rpx solid #ececec;
+      }
+
+      &--pay {
+        margin: 20rpx 0;
+        position: relative;
+
+        >text {
+          font-size: 36rpx;
+          color: #333;
+        }
+
+        .service {
+          display: flex;
+          width: 100%;
+          overflow-x: auto;
+          white-space: nowrap;
+
+          .orderInfo {
+            height: 200rpx;
+            widows: 150rpx;
+            padding: 10rpx;
+            text-align: center;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            font-size: 26rpx;
+          }
+        }
+
+        .description {
+          height: 200rpx;
+          position: absolute;
+          right: 0;
+          top: 0;
+          padding: 40rpx 20rpx 30rpx 20rpx;
+          background-color: rgba($color: #fff, $alpha: 0.9);
+
+          &--title {
+            font-size: 34rpx;
+            font-weight: 700;
+            margin-bottom: 10rpx;
+          }
+
+          &--text {
+            font-size: 30rpx;
+            color: #333;
+          }
+        }
+      }
+
+      &--compute {
+        margin-top: 40rpx;
+        padding-bottom: 20rpx;
+        border-bottom: 2rpx solid #ececec;
+
+        .computeFlex {
+          margin-bottom: 20rpx;
+          display: flex;
+          justify-content: space-between;
+        }
+      }
+
+      &--tip {
+        margin-top: 30rpx;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .tip-r {
+          .r-btn {
+            padding: 10rpx 20rpx;
+            border-radius: 20rpx;
+            border: 2rpx solid #ff9480;
+            color: #ff9480;
+            font-size: 26rpx;
+            background-color: #fff;
+          }
+        }
+      }
+    }
+  }
+
+  .tipInfo {
+    font-size: 24rpx;
+    color: #666;
+  }
+</style>

src/pageMerchant/tabbar/store.vue

@@ -4,17 +4,17 @@
     <view class="shop__data">
       <view class="shop__data--left">
         <view class="text-title">店铺分</view>
-        <view class="text-num">{{ store.score || '--' }}</view>
+        <view class="text-num">{{ listScore.score || '--' }}</view>
       </view>
       <view class="shop__data--right">
         <view>
           <view class="text-title">今日收入（元）</view>
-          <view class="text-num">{{ store.amount || '0' }}</view>
+          <view class="text-num">{{ listScore.amount || '0' }}</view>
         </view>
         <view class="line"></view>
         <view>
           <view class="text-title">今日订单（单）</view>
-          <view class="text-num">{{ store.orderCount || '0' }}</view>
+          <view class="text-num">{{ listScore.orderCount || '0' }}</view>
         </view>
       </view>
     </view>
@@ -25,11 +25,7 @@
 
     <view class="shop__tools">
       <u-grid :border="false" col="5">
-        <u-grid-item
-          v-for="(listItem, listIndex) in list"
-          :key="listIndex"
-          @click="handlerSkip(listItem, listIndex)"
-        >
+        <u-grid-item v-for="(listItem, listIndex) in list" :key="listIndex" @click="handlerSkip(listItem, listIndex)">
           <image src="@/static/tools.jpg" />
           <text class="grid-text">{{ listItem.title }}</text>
         </u-grid-item>
@@ -43,25 +39,18 @@
     </view>
 
     <view>
-      <u-tabs
-        :list="list1"
-        lineWidth="40"
-        lineColor="$uni-bg-color-primary"
-        :activeStyle="{
+      <u-tabs :list="list1" lineWidth="40" lineColor="$uni-bg-color-primary" :activeStyle="{
           color: '#000',
           fontWeight: 'bold',
           fontSize: '32rpx',
           transform: 'scale(1.05)',
           marginBottom: '15rpx',
-        }"
-        :inactiveStyle="{
+        }" :inactiveStyle="{
           color: '#333',
           fontSize: '30rpx',
           transform: 'scale(1)',
           marginBottom: '15rpx',
-        }"
-        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
-      ></u-tabs>
+        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"></u-tabs>
 
       <view style="background-color: #fff; height: 400rpx; margin-top: 20rpx"> 1111111111 </view>
     </view>
@@ -70,187 +59,182 @@
 </template>
 
 <script>
-import { getOrderQuantityApi } from '@/api/merchant/order';
-export default {
-  data() {
-    return {
-      text1:
-        'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
+  import {
+    getOrderQuantityApi
+  } from '@/api/merchant/order';
+  export default {
+    data() {
+      return {
+        text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
+
+        list1: [{
+            name: '商家社区',
+          },
+          {
+            name: '活动中心',
+          },
+          {
+            name: '商品优惠',
+          },
+        ],
+
+        list: [{
+            title: '店铺管理',
+          },
+          {
+            title: '顾客评价',
+          },
+          {
+            title: '商品核销',
+          },
+          {
+            title: '商品优惠',
+          },
+          {
+            title: '经营数据',
+          },
+          {
+            title: '我的团队',
+          },
+          {
+            title: '活动中心',
+          },
+          {
+            title: '当前佣金',
+          },
+          {
+            title: '商家社区',
+          },
+          {
+            title: '预约列表',
+          },
+        ],
+        listScore: {},
+        merchantId: '',
+      };
+    },
+    created() {
+      // 获取商家id
+      let merchantInfo = this.$store.state.data.merchantInfo;
+      this.merchantId = merchantInfo.merchant.id;
+    },
 
-      list1: [
-        {
-          name: '商家社区',
-        },
-        {
-          name: '活动中心',
-        },
-        {
-          name: '商品优惠',
-        },
-      ],
+    mounted() {
+      // 查商家端查询订单量以及今日收入
+      this.getOrderQuantity(this.merchantId);
+    },
 
-      list: [
-        {
-          title: '店铺管理',
-        },
-        {
-          title: '顾客评价',
-        },
-        {
-          title: '商品核销',
-        },
-        {
-          title: '商品优惠',
-        },
-        {
-          title: '经营数据',
-        },
-        {
-          title: '我的团队',
-        },
-        {
-          title: '活动中心',
-        },
-        {
-          title: '当前佣金',
-        },
-        {
-          title: '商家社区',
-        },
-        {
-          title: '预约列表',
-        },
-      ],
-      store: {
-        amount: 0,
-        orderCount: 0,
-        score: 0,
+    methods: {
+      // 点击跳转
+      handlerSkip(item, index) {
+        console.log('index', index);
+        switch (index) {
+          case 0:
+            uni.navigateTo({
+              url: '/pages/merchant/store/shopManage',
+            });
+            break;
+          case 1:
+            uni.navigateTo({
+              url: '/pages/merchant/store/evaluateManagement',
+            });
+            break;
+          case 3:
+            uni.navigateTo({
+              url: '/pages/merchant/store/couponManage',
+            });
+            break;
+          case 5:
+            uni.navigateTo({
+              url: '/pages/merchant/store/myTeam',
+            });
+            break;
+          case 9:
+            uni.navigateTo({
+              url: '/pages/merchant/store/appointList',
+            });
+            break;
+        }
+      },
+      async getOrderQuantity(id) {
+        let res = await getOrderQuantityApi(id);
+        if (res.code === "OK") {
+          this.listScore = res.data
+        }
       },
-
-      merchantId: '',
-    };
-  },
-  onShow() {
-    // 获取商家id
-    let merchantInfo = this.$store.state.data.merchantInfo;
-    this.merchantId = merchantInfo.merchant.id;
-
-    // 查商家端查询订单量以及今日收入
-    this.getOrderQuantity(this.merchantId);
-
-    console.log(this.merchantId, 'ooooooooooo');
-  },
-
-  methods: {
-    // 点击跳转
-    handlerSkip(item, index) {
-      console.log('index', index);
-      switch (index) {
-        case 0:
-          uni.navigateTo({
-            url: '/pages/merchant/store/shopManage',
-          });
-          break;
-        case 1:
-          uni.navigateTo({
-            url: '/pages/merchant/store/evaluateManagement',
-          });
-          break;
-        case 3:
-          uni.navigateTo({
-            url: '/pages/merchant/store/couponManage',
-          });
-          break;
-        case 5:
-          uni.navigateTo({
-            url: '/pages/merchant/store/myTeam',
-          });
-          break;
-        case 9:
-          uni.navigateTo({
-            url: '/pages/merchant/store/appointList',
-          });
-          break;
-      }
-    },
-    async getOrderQuantity(id) {
-      let res = await getOrderQuantityApi(id);
-      if (res.code === 200) {
-        // this.orderCount = res.data.orderCount;
-        this.store = Object.assign({}, { ...this.store }, { ...res.data });
-        console.log(this.store, 'this.store');
-      }
     },
-  },
-};
+  };
 </script>
 
 <style lang="scss" scoped>
-.text-title {
-  font-size: 28rpx;
-  color: #333;
-  margin-bottom: 20rpx;
-}
+  .text-title {
+    font-size: 28rpx;
+    color: #333;
+    margin-bottom: 20rpx;
+  }
 
-.text-num {
-  font-size: 40rpx;
-  font-weight: bold;
-  color: $uni-bg-color-primary;
-}
+  .text-num {
+    font-size: 40rpx;
+    font-weight: bold;
+    color: $uni-bg-color-primary;
+  }
 
-.shop {
-  min-height: calc(100vh - 80rpx);
-  background-color: $uni-bg-color-page;
-  padding-top: 80rpx;
-  &__data {
-    display: flex;
-    text-align: center;
+  .shop {
+    min-height: calc(100vh - 80rpx);
+    background-color: $uni-bg-color-page;
+    padding-top: 80rpx;
 
-    &--left {
-      flex: 1;
-      padding: 30rpx 20rpx;
-      background-color: $uni-bg-color;
-      margin-right: 20rpx;
-      border-radius: $uni-border-radius-base;
+    &__data {
+      display: flex;
+      text-align: center;
+
+      &--left {
+        flex: 1;
+        padding: 30rpx 20rpx;
+        background-color: $uni-bg-color;
+        margin-right: 20rpx;
+        border-radius: $uni-border-radius-base;
+      }
+
+      &--right {
+        flex: 3;
+        display: flex;
+        justify-content: space-around;
+        padding: 30rpx 20rpx;
+        background-color: $uni-bg-color;
+        border-radius: $uni-border-radius-base;
+
+        .line {
+          width: 2rpx;
+          height: 65%;
+          margin-top: 35rpx;
+          background-color: #f5f5f5;
+        }
+      }
     }
 
-    &--right {
-      flex: 3;
-      display: flex;
-      justify-content: space-around;
-      padding: 30rpx 20rpx;
+    &__note {
+      margin: 30rpx 0;
+    }
+
+    /* 工具 */
+    &__tools {
+      padding: 20rpx 10rpx;
       background-color: $uni-bg-color;
       border-radius: $uni-border-radius-base;
-      .line {
-        width: 2rpx;
-        height: 65%;
-        margin-top: 35rpx;
-        background-color: #f5f5f5;
+
+      image {
+        width: 100rpx;
+        height: 100rpx;
+        display: block;
+        margin: 15rpx 0 25rpx 0;
       }
     }
   }
 
-  &__note {
-    margin: 30rpx 0;
-  }
-
-  /* 工具 */
-  &__tools {
-    padding: 20rpx 10rpx;
-    background-color: $uni-bg-color;
-    border-radius: $uni-border-radius-base;
-    image {
-      width: 100rpx;
-      height: 100rpx;
-      display: block;
-      margin: 15rpx 0 25rpx 0;
-    }
+  ::v-deep .u-cell__title-text {
+    border: 0;
+    font-weight: bold;
+    font-size: 36rpx;
   }
-}
-
-::v-deep .u-cell__title-text {
-  border: 0;
-  font-weight: bold;
-  font-size: 36rpx;
-}
 </style>