feat(merchant):新增店铺信息，店铺环境，优化页面

src/api/merchant/merchantAuth.js

@@ -31,3 +31,20 @@ export function getMerchantAuthData(data) {
     },
   });
 }
+
+/**
+ * @description 商家认证接口 - 修改商家商家认证
+ * @param {*} id 商家id
+ * @param {*} data
+ * @returns
+ */
+export function editMerchantAuth(id, data) {
+  return request({
+    url: `/maintain/merchantAuth/${id}`,
+    method: 'PUT',
+    headers: {
+      'content-type': 'application/json',
+    },
+    data,
+  });
+}

src/design/common.css

@@ -99,6 +99,10 @@
   color: #333333;
 }
 
+.text-666 {
+  color: #666666;
+}
+
 .text-white {
   color: #ffffff;
-}
+}

src/pages.json

@@ -381,6 +381,24 @@
             "navigationBarTitleText": "2/3资质信息"
           }
         },
+        {
+          "path": "mine/personalInfo",
+          "style": {
+            "navigationBarTitleText": "店铺信息"
+          }
+        },
+        {
+          "path": "mine/personalInfoEdit",
+          "style": {
+            "navigationBarTitleText": "修改店铺信息"
+          }
+        },
+        {
+          "path": "mine/storeEnviron",
+          "style": {
+            "navigationBarTitleText": "门店环境"
+          }
+        },
         {
           "path": "message/index",
           "style": {

src/pages/merchant/mine/index.vue

@@ -4,7 +4,7 @@
     <view class="mine__nav" :style="{ height: 77 + 'px' }" />
     <view class="mine__person">
       <view class="mine__person--info">
-        <view>
+        <view @click="$Router.push('/pages/merchant/mine/personalInfo')">
           <image
             :src="merchantInfo.logo"
             style="width: 140rpx; height: 140rpx; border-radius: 50%"
@@ -115,6 +115,7 @@
 <script>
 import { getMerchantAuthData } from '@/api/merchant/merchantAuth';
 import { updateBusinessStatus } from '@/api/merchant/mine';
+import { phoneEncryption } from '@/utils/tools';
 
 export default {
   data() {
@@ -143,7 +144,7 @@ export default {
         {
           id: '1',
           name: '门店环境',
-          url: '',
+          url: '/pages/merchant/mine/storeEnviron',
         },
         // {
         //   id: '2',
@@ -210,7 +211,6 @@ export default {
 
     // 修改商家状态
     confirm(val) {
-      console.log(val, '11111111');
       this.state = val.value[0].id;
       this.stateName = val.value[0].label;
       this.show = false;
@@ -244,7 +244,16 @@ export default {
       let res = await getMerchantAuthData();
       if (res.code === 'OK') {
         // 将数据存储到vuex中
-        this.merchantInfo = res.data;
+        this.merchantInfo = Object.assign(
+          {},
+          {
+            ...res.data,
+            mobileNumber: phoneEncryption(res.data.mobileNumber),
+          },
+        );
+
+        console.log();
+
         this.$store.commit('SET_MERCHANTINFO', res.data);
       }
     },
@@ -262,7 +271,7 @@ export default {
   }
 
   &__person {
-    height: 200rpx;
+    height: 160rpx;
     padding: $uni-bg-padding-sm;
     background-color: $uni-bg-color-primary;
     position: relative;
@@ -270,17 +279,15 @@ export default {
     &--info {
       color: #fff;
       display: flex;
-      margin-top: 20rpx;
 
       .userName {
         width: 400rpx;
-        font-size: 40rpx;
-        font-weight: bold;
-        margin: 25rpx 0 0 16rpx;
+        font-size: 36rpx;
+        margin: 20rpx 0 0 16rpx;
 
         .text {
           margin-top: 15rpx;
-          font-size: 30rpx;
+          font-size: 28rpx;
         }
       }
 

src/pages/merchant/mine/openStore/components/ImgsUpload.vue

@@ -11,7 +11,7 @@
     </view>
 
     <view class="images-box" @click="handlerUploadImg" v-else>
-      <image src="/static/icon/QR57a.jpg" mode="aspectFill"></image>
+      <image src="/static/upload.jpg" mode="aspectFill"></image>
     </view>
   </view>
 </template>
@@ -92,7 +92,7 @@ export default {
       this.uploadCount = this.fileList.length;
       // 手动触发组件的重新渲染
       this.$forceUpdate();
-      this.$emit('update', this.fileList,this.value);
+      this.$emit('update', this.fileList, this.value);
     },
   },
 };

src/pages/merchant/mine/openStore/openStoreAppealDetail.vue

@@ -99,7 +99,6 @@ export default {
       list: {},
     };
   },
-
   methods: {},
   onShow() {
     this.list = this.$store.state.data.merchantInfo;

src/pages/merchant/mine/personalInfo.vue

@@ -0,0 +1,143 @@
+<template>
+  <view class="personalInfo">
+    <!-- 账号信息 -->
+    <view>
+      <text class="title">账号信息</text>
+      <view class="personal">
+        <view class="fl-flex fl-justify-between fl-align-center">
+          <view class="item-left">店铺LOGO</view>
+          <view class="fl-flex">
+            <image :src="list.merchant.logo" mode="scaleToFill" v-if="list.merchant.logo" />
+            <image src="/static/QR57a.jpg" mode="scaleToFill" v-else />
+            <u-icon name="arrow-right" color="#acaeb6" size="16"></u-icon>
+          </view>
+        </view>
+        <view
+          class="fl-flex fl-justify-between fl-align-center"
+          @click="handleEditMerchant('店铺名称', list.storeName)"
+        >
+          <view class="item-left">店铺名称</view>
+          <view class="fl-flex">
+            <view class="item-right">{{ list.storeName || '--' }}</view>
+            <u-icon name="arrow-right" color="#acaeb6" size="16"></u-icon>
+          </view>
+        </view>
+        <view class="fl-flex fl-justify-between fl-align-center">
+          <view class="item-left">登录账号</view>
+          <view class="fl-flex">
+            <view class="item-right u-m-r-10">{{ mobileNumber || '--' }}</view>
+            <!-- <u-icon name="arrow-right" color="#acaeb6" size="15"></u-icon> -->
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- 联系方式 -->
+    <view>
+      <text class="title">联系方式</text>
+      <view class="personal">
+        <view class="fl-flex fl-justify-between fl-align-center">
+          <view class="item-left">负责人</view>
+          <view class="item-right">{{ list.merchant.liaison || '--' }}</view>
+        </view>
+        <view class="fl-flex fl-justify-between fl-align-center">
+          <view class="item-left">联系电话</view>
+          <view class="item-right">{{ list.mobileNumber || '--' }}</view>
+        </view>
+        <view class="fl-flex fl-justify-between fl-align-center">
+          <view class="item-left">电子邮箱</view>
+          <view class="item-right">{{ list.email || '--' }}</view>
+        </view>
+        <view class="fl-flex fl-justify-between fl-align-center">
+          <view class="item-left">预约电话</view>
+          <view class="item-right">{{ list.mobileNumber || '--' }}</view>
+        </view>
+        <view class="fl-flex fl-justify-between fl-align-center">
+          <view class="item-left">所在地区</view>
+          <view class="item-right">{{ list.storeAddress || '--' }}</view>
+        </view>
+        <view class="fl-flex fl-justify-between fl-align-center">
+          <view class="item-left">店铺地址</view>
+          <view class="item-right">{{ list.storeAddressDetail || '--' }}</view>
+        </view>
+      </view>
+    </view>
+    <!-- 店铺信息 -->
+    <view>
+      <text class="title">店铺信息</text>
+      <view class="personal">
+        <view class="fl-flex fl-justify-between fl-align-center">
+          <view class="item-left">店铺名称</view>
+          <view class="item-right">{{ list.storeName || '--' }}</view>
+        </view>
+        <view class="fl-flex fl-justify-between fl-align-center">
+          <view class="item-left">主营/辅营</view>
+          <view class="item-right">养车/用车</view>
+        </view>
+        <view class="fl-flex fl-justify-between fl-align-center">
+          <view class="item-left">开店日期</view>
+          <view class="item-right">2023-10-23</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { phoneEncryption } from '@/utils/tools';
+
+export default {
+  data() {
+    return {
+      list: {},
+      mobileNumber: '',
+    };
+  },
+  onShow() {
+    this.list = this.$store.state.data.merchantInfo;
+    this.mobileNumber = phoneEncryption(this.list.mobileNumber);
+  },
+  methods: {
+    handleEditMerchant(name, value) {
+      uni.navigateTo({
+        url: `pages/merchant/mine/personalInfoEdit?name=${name}&value=${value}`,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.personalInfo {
+  min-height: 100%;
+  margin: 20rpx 30rpx;
+  .title {
+    color: #666666;
+    margin: 20rpx;
+  }
+  .personal {
+    background-color: #fff;
+    padding: 20rpx;
+    margin-bottom: 30rpx;
+    margin-top: 20rpx;
+    border-radius: 10rpx;
+
+    .item-left {
+      color: #333;
+      font-size: 30rpx;
+      font-weight: 600;
+      margin: 20rpx 0;
+    }
+
+    .item-right {
+      color: #acaeb6;
+      font-size: 28rpx;
+    }
+
+    image {
+      width: 120rpx;
+      height: 120rpx;
+      border-radius: 50%;
+    }
+  }
+}
+</style>

src/pages/merchant/mine/personalInfoEdit.vue

@@ -0,0 +1,83 @@
+<template>
+  <view class="personalInfoEdit">
+    <view class="personalInfo">
+      <view class="text-black f-s-31 text-bold" style="margin: 30rpx 0">{{ title }}</view>
+      <u--input
+        placeholder="请输入内容"
+        border="surround"
+        v-model="inputValue"
+        @change="change"
+      ></u--input>
+
+      <view style="margin-top: 200rpx">
+        <u-button
+          type="primary"
+          text="确定"
+          shape="circle"
+          @click="handleEdit"
+          :loading="submitLoading"
+        ></u-button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { editMerchantAuth } from '@/api/merchant/merchantAuth';
+export default {
+  data() {
+    return {
+      list: {},
+      inputValue: '',
+      title: '',
+      submitLoading: false,
+    };
+  },
+  onShow() {
+    this.list = this.$store.state.data.merchantInfo;
+  },
+  onLoad(option) {
+    console.log(option);
+    this.inputValue = option.value;
+    this.title = option.name;
+  },
+
+  methods: {
+    change(e) {
+      console.log('change', e);
+      this.inputValue = e;
+    },
+    handleEdit() {
+      this.submitLoading = true;
+      let value = Object.assign({}, { ...this.list, storeName: this.inputValue });
+      editMerchantAuth(this.list.merchant.id, { ...value })
+        .then(res => {
+          console.log(res.code);
+
+          if (res.code === 'OK') {
+            setTimeout(() => {
+              uni.navigateTo({
+                url: '/pages/merchant/mine/index',
+              });
+            }, 1500);
+          }
+        })
+        .finally(() => {
+          this.submitLoading = false;
+        });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.personalInfoEdit {
+  height: 100vh;
+  background-color: #fff;
+  padding: 20rpx 50rpx;
+
+  .personalInfo {
+    margin-top: 40%;
+  }
+}
+</style>

src/pages/merchant/mine/setting/index.vue

@@ -45,14 +45,14 @@
     </view>
 
     <view class="btn-box">
-      <!-- <button class="btn1" @click="showSwitchDialog = true">切换身份</button>
-      <button class="btn2" @click="loginout_show = true">退出登录</button> -->
-      <u-button class="btn1" @click="showSwitchDialog = true" text="切换身份"></u-button>
+      <view class="u-m-b-40">
+        <u-button text="切换身份" shape="circle" @click="showSwitchDialog = true"></u-button>
+      </view>
       <u-button
-        class="btn2"
-        @click="loginout_show = true"
         type="primary"
         text="退出登录"
+        shape="circle"
+        @click="loginOut_show = true"
       ></u-button>
     </view>
     <u-modal
@@ -64,12 +64,12 @@
       @cancel="showSwitchDialog = false"
     ></u-modal>
     <u-modal
-      :show="loginout_show"
+      :show="loginOut_show"
       :content="content1"
       :title="title"
       :showCancelButton="true"
       @confirm="handlerLoginOutConfirm"
-      @cancel="loginout_show = false"
+      @cancel="loginOut_show = false"
     ></u-modal>
   </view>
 </template>
@@ -80,7 +80,7 @@ export default {
     return {
       value: true,
       icon_size: 18,
-      loginout_show: false,
+      loginOut_show: false,
       content: '您确定要从商家端切换到用户端吗',
       content1: '您确定要退出登录？确定将同时退出用户端哦',
       title: '温馨提示',
@@ -113,7 +113,7 @@ export default {
     confirmSwitch() {
       // 点击确认切换身份
       // 处理身份切换逻辑
-      this.$store.dispatch('SwitchIdentity','CUSTOMER')
+      this.$store.dispatch('SwitchIdentity', 'CUSTOMER');
       uni.switchTab({
         url: '/pages/client/tabBar/mine/index',
       });
@@ -133,12 +133,12 @@ export default {
     },
     //点击退出登录
     handlerLoginOutConfirm() {
-      this.loginout_show = false;
-      this.$store.dispatch('Logout').then(()=>{
+      this.loginOut_show = false;
+      this.$store.dispatch('Logout').then(() => {
         uni.navigateTo({
           url: `pages/login/index`,
         });
-      })
+      });
     },
   },
 };
@@ -169,24 +169,7 @@ export default {
   }
 }
 .btn-box {
-  width: 70%;
-  margin: 100rpx auto 0;
-  .btn1,
-  .btn2 {
-    padding: 20rpx;
-    height: 80rpx;
-    font-size: 28rpx;
-    line-height: 40rpx;
-    border-radius: 35rpx;
-  }
-  .btn1 {
-    // background-color: #5992bb;
-    // color: #000;
-  }
-  .btn2 {
-    margin-top: 50rpx;
-    // background-color: #e2e2e2;
-  }
+  margin: 140rpx 40rpx;
 }
 ::v-deep .u-modal__content__text.data-v-713d0fd3 {
   text-align: center;

src/pages/merchant/mine/storeEnviron.vue

@@ -0,0 +1,34 @@
+<template>
+  <view class="storeEnviron">
+    <view class="text-center environ">
+      <ImgsUpload></ImgsUpload>
+      <view style="margin: 20rpx 0">门店图</view>
+    </view>
+    <view class="text-center u-m-t-40 environ">
+      <ImgsUpload></ImgsUpload>
+      <view style="margin: 20rpx 0">门店图</view>
+    </view>
+
+    <view style="margin-top: 140rpx">
+      <u-button type="primary" text="确定" shape="circle"></u-button>
+    </view>
+  </view>
+</template>
+
+<script>
+import ImgsUpload from './openStore/components/ImgsUpload.vue';
+export default {
+  components: { ImgsUpload },
+};
+</script>
+
+<style lang="scss" scoped>
+.storeEnviron {
+  height: 100vh;
+  padding: 20rpx;
+  background-color: #fff;
+  .environ {
+    margin: 20rpx;
+  }
+}
+</style>