商家端迁移完成

src/pages.json

@@ -267,6 +267,86 @@
 			    "navigationStyle": "custom"
 			  }
 			},
+			{
+			  "path": "tabBar/mine/setting/index",
+			  "style": {
+			    "navigationBarTitleText": "设置",
+			    "navigationStyle": "default"
+			  }
+			},
+			{
+			  "path": "tabBar/mine/setting/accountSafety",
+			  "style": {
+			    "navigationBarTitleText": "账号与安全"
+			  }
+			},
+			{
+			  "path": "tabBar/mine/setting/bindPhoneAndEmail",
+			  "style": {
+			    "navigationBarTitleText": ""
+			  }
+			},
+			{
+			  "path": "tabBar/mine/setting/phoneAndEmail",
+			  "style": {
+			    "navigationBarTitleText": ""
+			  }
+			},
+			
+			{
+			  "path": "tabBar/mine/setting/privacyPolicy",
+			  "style": {
+			    "navigationBarTitleText": ""
+			  }
+			},
+			
+			{
+			  "path": "tabBar/mine/openStore/index",
+			  "style": {
+			    "navigationBarTitleText": "我要开店",
+			    "navigationStyle": "default"
+			  }
+			},
+			{
+			  "path": "tabBar/mine/openStore/selectCategory",
+			  "style": {
+			    "navigationBarTitleText": "1/4选择品类",
+			    "navigationStyle": "default"
+			  }
+			},
+			{
+			  "path": "tabBar/mine/openStore/storeInformation",
+			  "style": {
+			    "navigationBarTitleText": "2/4门店信息",
+			    "navigationStyle": "default"
+			  }
+			},
+			{
+			  "path": "tabBar/mine/openStore/corporateInformation",
+			  "style": {
+			    "navigationBarTitleText": "3/4法人信息"
+			  }
+			},
+			{
+			  "path": "tabBar/mine/openStore/messageSubmit",
+			  "style": {
+			    "navigationBarTitleText": "4/4资质信息"
+			  }
+			},
+			{
+			  "path": "tabBar/mine/openStore/openStoreAppealDetail",
+			  "style": {
+			    "navigationBarTitleText": "开店申请详情"
+			  }
+			},
+			{
+			  "path": "tabBar/mine/openStore/qualificationInformation",
+			  "style": {
+			    "navigationBarTitleText": "4/4资质信息"
+			  }
+			},
+			
+			
 			{
 			  "path": "tabBar/message/index",
 			  "style": {

src/pages/client/clientUser/mine/setting.vue

@@ -89,7 +89,7 @@
 				// 处理身份切换逻辑
 				uni.setStorageSync('tabbar_type', false);
 				uni.navigateTo({
-					url: '/pages/merchant/tabBar/extend/index'
+					url: '/pages/merchant/tabBar/mine/index'
 				})
 				// ... 其他操作
 			},

src/pages/merchant/tabBar/message/index.vue

@@ -134,7 +134,7 @@ export default {
     // 点击跳转到系统通知
     handlerSkipSystemNotice(value){
       uni.navigateTo({
-        url:`/pages/tabbar/message/systemNotice?type=${value.id}`
+        url:`/pages/merchant/tabBar/message/systemNotice?type=${value.id}`
       })
     }
   }

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

@@ -7,7 +7,7 @@
   <view class="mine">
     <!-- 状态栏占位 -->
     <!-- <view class="mine__nav" :style="{ height: statusBarHeight + 'px' }" /> -->
-    <!-- <view class="mine__nav" style="height: 80rpx" /> -->
+    <view class="mine__nav" style="height: 80rpx" />
 
     <view class="mine__person">
       <!-- <view class="mine__person--icon">
@@ -128,7 +128,7 @@ export default {
         {
           id: '3',
           name: '我要开店',
-          url: '/pages/tabbar/mine/openStore/index',
+          url: '/pages/merchant/tabBar/mine/openStore/index',
         },
       ],
 
@@ -141,7 +141,7 @@ export default {
         {
           id: '2',
           name: '设置',
-          url: '/pages/tabbar/mine/setting/index',
+          url: '/pages/merchant/tabBar/mine/setting/index',
         },
       ],
     };
@@ -185,7 +185,7 @@ export default {
     // 点击跳转到设置
     handlerSkipSetting() {
       uni.navigateTo({
-        url: '/pages/tabbar/mine/setting/index',
+        url: '/pages/merchant/tabBar/mine/setting/index',
       });
     },
 

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

@@ -0,0 +1,97 @@
+<template>
+	<view class="imgs-upload-container">
+    <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="1"
+      width="275" height="150">
+      <image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="widthFix"
+        style="width: 670rpx;height: 150px;"></image>
+    </u-upload>
+    
+	</view>
+</template>
+
+<script>
+export default {
+		props:{
+			filelist:{
+				type:Array
+			},
+			value:{
+				type:Number
+			}
+		},
+		data() {
+			return {
+				fileList: [],
+				img_upload_list: [],
+			}
+		},
+		onLoad(option) {
+		},
+		mounted() {
+		},
+		methods: {
+			// 删除图片
+			deletePic(event) {
+				this[`fileList${event.name}`].splice(event.index, 1)
+				this.img_upload_list.splice(event.index, 1)
+			},
+			// 新增图片
+			async afterRead(event) {
+				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
+				const { index, file} = event
+				let lists = [].concat(event.file)
+				let fileListLen = this[`fileList${event.name}`].length
+				lists.map((item) => {
+					this[`fileList${event.name}`].push({
+						...item,
+						status: 'uploading',
+						message: '上传中'
+					})
+				})
+				for (let i = 0; i < lists.length; i++) {
+					const result = await this.uploadFilePromise(lists[i].url)
+					let item = this[`fileList${event.name}`][fileListLen]
+					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
+						status: 'success',
+						message: '',
+						url: result
+					}))
+					fileListLen++
+				}
+			},
+			uploadFilePromise(url) {
+				return new Promise((resolve, reject) => {
+					let a = uni.uploadFile({
+						url: `http://192.168.2.21:7001/upload`, // 仅为示例，非真实的接口地址
+						filePath: url,
+						name: 'file',
+						header: {
+							Authorization: localStorage.getItem('App-Token')
+						},
+						formData: {},
+						success: (res) => {
+							setTimeout(() => {
+								resolve(res.data.data)
+								this.img_upload_list.push(JSON.parse(res.data).data.relativePath)
+								this.$emit('update:filelist', this.img_upload_list)
+							}, 1000)
+						}
+					});
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.upload-textbox {
+		margin-top: 10rpx;
+
+		.upload-img {
+			width: 80rpx;
+			height: 80rpx;
+		}
+
+		.span-box {}
+	}
+</style>

src/pages/merchant/tabBar/mine/openStore/components/top-process.vue

@@ -0,0 +1,75 @@
+<template>
+  <view class="container">
+    <view class="top-box">
+      <span class="top-title">商家开店流程</span>
+      <view class="process-box">
+        <view class="process-item">
+          <view class="item">
+              1
+          </view>
+          <span>提交资料</span>
+        </view>
+        <view class="border"></view>
+        <view class="process-item">
+          <view class="item">
+              2
+          </view>
+          <span>平台审核</span>
+        </view>
+        <view class="border"></view>
+        <view class="process-item">
+          <view class="item">
+              3
+          </view>
+          <span>开始营业</span>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default{
+    data(){
+      return{
+
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .container{
+    .top-box{
+      background-color: #F7F7F7;
+      padding: 40rpx;
+      border-radius: 20rpx;
+
+      .process-box{
+        display: flex;
+        justify-content: space-around;
+        margin-top: 30rpx;
+        width: 100%;
+        .process-item{
+          .item{
+            background-color: #5992BB;
+            width: 100rpx;
+            height: 100rpx;
+            border-radius: 50%;
+            color: #fff;
+            font-size: 36rpx;
+            text-align: center;
+            line-height: 100rpx;
+            margin: 0 auto 20rpx;
+          }
+        }
+        .border{
+          width: 15%;
+          height: 2rpx;
+          border-bottom: 2rpx solid #000;
+          margin-top: 8%;
+        }
+      }
+    }
+  }
+</style>

src/pages/merchant/tabBar/mine/openStore/corporateInformation.vue

@@ -0,0 +1,174 @@
+<template>
+  <view class="container">
+    <view class="content-box">
+      <view class="content-item">
+        <view class="item-l"> 法人名称 </view>
+        <view class="item-r">
+          <u--input placeholder="请输入法人名称" border="surround" v-model="value"></u--input>
+        </view>
+      </view>
+      <view class="content-item">
+        <view class="item-l"> 性别 </view>
+        <view class="item-r2">
+          <view class="sex-item" v-for="(item,index) of sex_list"
+                :class="current == index ? 'act-sex' : ''"
+                :key="index" @click="handlerSelectGender(item)">
+            {{ item.name }}
+          </view>
+        </view>
+      </view>
+      <view class="content-item">
+        <view class="item-l"> 证件号 </view>
+        <view class="item-r">
+          <u--input placeholder="请输入证件号" border="surround" v-model="value" ></u--input>
+        </view>
+      </view>
+      <view class="content-item">
+        <view class="item-l"> 证件类型 </view>
+        <view class="item-r2"> 居民身份证 </view>
+      </view>
+      <view class="content-item">
+        <view class="item-l"> 有效期 </view>
+        <view class="item-r">
+          <u--input placeholder="请输入证件有效期" border="surround" v-model="value" ></u--input>
+        </view>
+      </view>
+    </view>
+
+
+    <view class="content-box">
+      <imgs-upload :filelist.sync="filelist"></imgs-upload>
+      <p class='upload-text'>证件正面图(国徽图)</p>
+    </view>
+
+    <view class="content-box">
+      <imgs-upload :filelist.sync="filelist"></imgs-upload>
+      <p class='upload-text'>证件反面图(人像图)</p>
+    </view>
+
+
+    <button class="btn" @click="handlerSkipNext">下一步</button>
+  </view>
+</template>
+
+<script>
+  import ImgsUpload from "@/pages/merchant/tabBar/mine/openStore/components/ImgsUpload.vue"
+  export default {
+    data() {
+      return {
+        value: '',
+        current: 0,
+        sex_list:[
+          {name:'男',id:0},
+          {name:'女',id:1},
+          {name:'沃尔玛塑料袋',id:2},
+        ],
+        filelist: [],
+      }
+    },
+    components:{ImgsUpload},
+    methods: {
+      // 跳转到4/4资质信息
+      handlerSkipNext() {
+        uni.navigateTo({
+          url: '/pages/merchant/tabBar/mine/openStore/qualificationInformation'
+        })
+      },
+      change(e) {
+        console.log("e:", e);
+      },
+      // 选择性别
+      handlerSelectGender(item){
+        this.current = item.id
+        console.log('current',this.current);
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .container {
+    background-color: #F7F7F7 !important;
+    padding-bottom: 40rpx;
+    .top-box {
+      color: #666666;
+      font-size: 26rpx;
+      text-align: center;
+      padding: 20rpx 40rpx;
+      background-color: #fff;
+    }
+
+    .content-box {
+      padding: 20rpx 40rpx;
+      background-color: #fff;
+      margin: 10rpx 0;
+
+      .content-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        width: 100%;
+        margin: 20rpx 0;
+
+        .item-l {
+          width: 30%;
+        }
+
+        .item-r,.item-r2 {
+          width: 70%;
+          background-color: #F7F7F7;
+          border-radius: 20rpx;
+          display: flex;
+
+          .data_select {
+            width: 90%;
+          }
+        }
+        .item-r2{
+          background-color: #fff;
+          display: flex;
+          justify-content: space-between;
+          .sex-item{
+            padding: 20rpx 30rpx;
+            background-color: #F7F7F7;
+            border-radius: 10rpx;
+            text-align: center;
+            font-size: 28rpx;
+          }
+          .act-sex{
+            border: 2rpx solid #5992BB;
+            background-color: #5992BB;
+            color: #fff !important;
+          }
+        }
+
+      }
+      .upload-text{
+        text-align: center;
+        color: #666666;
+        font-size:28rpx;
+        margin-top: 20rpx;
+      }
+    }
+
+    .btn {
+      background-color: #5992BB !important;
+      color: #fff;
+      font-size: 32rpx;
+      border-radius: 40rpx;
+      margin-top: 40rpx;
+      width: 95%;
+    }
+  }
+
+  ::v-deep .u-input__content__field-wrapper__field.data-v-fdbb9fe6 {}
+
+  ::v-deep .uni-select {
+    border: none !important;
+  }
+
+  ::v-deep .uni-select__input-placeholder {
+    font-size: 28rpx !important;
+    color: #CBCED4 !important;
+  }
+</style>

src/pages/merchant/tabBar/mine/openStore/index.vue

@@ -0,0 +1,119 @@
+<template>
+  <view class="container">
+    <topProcess></topProcess>
+
+    <view class="center-box">
+      <span class="center-title">你需要准备以下材料：</span>
+
+      <view class="content-item-box">
+        <view class="center-item" v-for="(item,index) of centerList">
+          <img class="l-img" src="@/static/logo.png" alt="">
+          <view class="item-r">
+            <p class="r-text1">{{ index+1 }} 、{{ item.title }}</p>
+            <p class="r-text2">{{ item.content }}</p>
+          </view>
+        </view>
+      </view>
+
+      <view class="radoi-box">
+        <u-checkbox-group v-model="checked" >
+          <u-checkbox  shape="circle" name='1' />
+        </u-checkbox-group>
+        <span>我已阅读并签署 <span style="color: #5992BB;">《开店说明》</span> </span>
+      </view>
+    </view>
+
+    <button class="btn" @click="handlerSkipOpenShop">我已经准备好了</button>
+  </view>
+</template>
+
+<script>
+  import topProcess from "@/pages/merchant/tabBar/mine/openStore/components/top-process.vue"
+  export default{
+    data(){
+      return{
+        centerList:[
+          {
+            img:'',
+            title:'实体店照片',
+            content:'需要提供有完整拍的门店照片和真实的内部环境照片'
+          },
+          {
+            img:'',
+            title:'法人身份证',
+            content:'需要提供营业执照的法人身份证正反面照片'
+          },
+          {
+            img:'',
+            title:'营业执照',
+            content:'需要提供有效的营业执照或监管部门认可的具有与营业执照相同法律效力的其他证件'
+          }
+        ],
+        checked:[]
+      }
+    },
+    components:{topProcess},
+    methods:{
+      // 点击跳转到开店
+      handlerSkipOpenShop(){
+        if(this.checked.length != 0){
+          uni.navigateTo({
+            url:'/pages/merchant/tabBar/mine/openStore/selectCategory'
+          })
+        }else{
+          uni.showToast({
+            // title:'请签署开店说明协议',
+            title:'爬',
+            icon:'none'
+          })
+          return
+        }
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+.container{
+  padding: 20rpx;
+  .center-box{
+    padding: 20rpx;
+    margin-top: 20rpx;
+    .center-item{
+      display: flex;
+      width: 100%;
+      margin: 20rpx 0;
+      .l-img{
+        width: 35%;
+        height: 180rpx;
+      }
+      .item-r{
+        margin-left: 50rpx;
+        width: 300rpx;
+        flex-wrap: wrap;
+        .r-text1{
+
+        }
+        .r-text2{
+          color: #9E9E9E;
+          font-size:24rpx;
+          margin-top: 10rpx;
+        }
+      }
+    }
+  }
+  .radoi-box{
+    display: flex;
+    color: #9E9E9E;
+    font-size: 26rpx;
+    margin-top: 40rpx;
+  }
+  .btn{
+    background-color: #5992BB !important;
+    color: #fff;
+    font-size:32rpx;
+    border-radius: 40rpx;
+    margin-top: 40rpx;
+  }
+}
+</style>

src/pages/merchant/tabBar/mine/openStore/messageSubmit.vue

@@ -0,0 +1,90 @@
+<template>
+  <view class="container">
+    <view class="top-box">
+      <img class="img" src="@/static/mine/icon_mine_success.png" alt="">
+      <p class="top-text">提交成功</p>
+    </view>
+
+    <view class="content-box">
+      <view class="content-item">
+        <view class="item-l">店铺名称</view>
+        <view class="item-r">yizhiyang的xxx</view>
+      </view>
+      <view class="content-item">
+        <view class="item-l">店铺名称</view>
+        <view class="item-r">yizhiyang的xxx</view>
+      </view>
+      <view class="content-item">
+        <view class="item-l">店铺名称</view>
+        <view class="item-r">yizhiyang的xxx</view>
+      </view>
+    </view>
+
+    <button class="btn" @click="handlerSkipComplate">完成</button>
+  </view>
+</template>
+
+<script>
+  export default{
+    data(){
+      return{
+
+      }
+    },
+    methods:{
+      // 点击跳转到开店详情页面
+      handlerSkipComplate(){
+        uni.redirectTo({
+          url: '/pages/merchant/tabBar/mine/openStore/openStoreAppealDetail'
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .container{
+    .top-box{
+      text-align: center;
+      margin-top: 100rpx;
+      .img{
+        width: 200rpx;
+        height: 200rpx;
+      }
+      .top-text{
+        font-size:40rpx;
+        font-weight: bold;
+        margin-top: 20rpx;
+      }
+    }
+
+    .content-box{
+      margin: 200rpx auto 50rpx;
+      width: 80%;
+      border-top: 2rpx solid #F3F3F3;
+      border-bottom: 2rpx solid #F3F3F3;
+      padding: 20rpx;
+      .content-item{
+        display: flex;
+        justify-content: space-between;
+        margin: 20rpx 0;
+        font-size:28rpx;
+        .item-l{
+          color: #000;
+        }
+        .item-r{
+          color: #9A9A9A;
+        }
+      }
+    }
+
+    .btn {
+      background-color: #5992BB !important;
+      color: #fff;
+      font-size: 32rpx;
+      border-radius: 40rpx;
+      margin-top: 40rpx;
+      width: 95%;
+    }
+  }
+</style>s

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

@@ -0,0 +1,155 @@
+<template>
+  <view class="container">
+    <view class="top-box">
+      <p>您的开店申请已经提交成功。</p>
+      <p>我们将在1-3个工作日内完成线上审核工作，请您耐心等候，并留意审核进程。</p>
+    </view>
+
+    <view class="content-item">
+      <view class="item-l">
+        <p> 负责人 : 张店长 </p>
+        <p> 手机号 : +6819932049921 </p>
+      </view>
+      <img class="img" src="@/static/mine/icon_mine_underReview.png" alt="">
+    </view>
+
+    <view class="content-item">
+      <view class="item-l">
+        <p> 店铺类型 : 餐饮店铺 </p>
+        <p> 手机号 : +6819932049921 </p>
+      </view>
+    </view>
+
+    <view class="content-item">
+      <view class="item-l">
+        <p> 中文店名字 : yizhiyang的鲜花店(云岩区店) </p>
+        <p> 英文店名字 : yizhiyang Flowers Shop(Yunyan District Store) </p>
+        <p> 所在地 : yizhiyang的鲜花店 </p>
+        <p> 详细地址 : yizhiyang的鲜花店 </p>
+      </view>
+    </view>
+
+    <view class="content-item2">
+      <view class="item2-box">
+        <img class="img2" src="@/static/logo.png" alt="">
+        <view class='img-text'>店铺门面图(需包含完整牌匾)</view>
+      </view>
+        <view class="item2-box">
+          <img class="img2" src="@/static/logo.png" alt="">
+          <view class='img-text'>店内真实环境</view>
+        </view>
+    </view>
+
+    <view class="content-item2">
+      <view class="item-l">
+        <p> 法人姓名 : yizhiyang的鲜花店(云岩区店) </p>
+        <p> 性别 : yizhiyang Flowers Shop(Yunyan District Store) </p>
+        <p> 证件类型 : yizhiyang的鲜花店 </p>
+        <p> 证件号码 : yizhiyang的鲜花店 </p>
+        <p> 有效期 : yizhiyang的鲜花店 </p>
+      </view>
+      <view class="item2-box">
+        <img class="img2" src="@/static/logo.png" alt="">
+        <view class='img-text'>证件正面图(国徽图)</view>
+      </view>
+        <view class="item2-box">
+          <img class="img2" src="@/static/logo.png" alt="">
+          <view class='img-text'>证件反面图(人像图)</view>
+        </view>
+    </view>
+
+    <view class="content-item2">
+      <view class="item-l">
+        <p> 证件名称 : yizhiyang的鲜花店(云岩区店) </p>
+        <p> 证件编号 : yizhiyang Flowers Shop(Yunyan District Store) </p>
+        <p> 有效期 : yizhiyang的鲜花店 </p>
+      </view>
+      <view class="item2-box">
+        <img class="img2" src="@/static/logo.png" alt="">
+        <view class='img-text'>证件正面图</view>
+      </view>
+    </view>
+
+    <button class="btn" @click="handlerSkipHome">确定</button>
+
+  </view>
+</template>
+
+<script>
+  export default{
+    data(){
+      return{
+
+      }
+    },
+    methods:{
+      // 点击跳转到主页
+      handlerSkipHome(){
+        uni.switchTab({
+          url:'/pages/merchant/tabBar/mine/index'
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  page{
+
+  }
+  .container{
+    padding: 20rpx;
+    background-color: #F5F5F5 !important;
+    .top-box{
+      color: #8B8B8B;
+      padding: 0 20rpx;
+    }
+    .content-item{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background-color: #fff;
+      border-radius: 20rpx;
+      padding: 20rpx;
+      margin: 20rpx 0;
+      .item-l{
+        p{
+          margin: 20rpx 0;
+          line-height: 50rpx;
+        }
+      }
+      .img{
+        width: 130rpx;
+        height: 100rpx;
+      }
+    }
+    .content-item2{
+      background-color: #fff;
+      border-radius: 20rpx;
+      padding: 20rpx;
+      margin: 20rpx 0;
+      .item-l{
+        p{
+          margin: 20rpx 0;
+          line-height: 50rpx;
+        }
+      }
+      .item2-box{
+        text-align: center;
+        margin-bottom: 20rpx;
+        .img2{
+          width: 100%;
+          height: 400rpx;
+        }
+      }
+    }
+    .btn {
+      background-color: #5992BB !important;
+      color: #fff;
+      font-size: 32rpx;
+      border-radius: 40rpx;
+      margin-top: 40rpx;
+      width: 95%;
+    }
+  }
+</style>

src/pages/merchant/tabBar/mine/openStore/qualificationInformation.vue

@@ -0,0 +1,179 @@
+<template>
+  <view class="container">
+    <!-- =====================证件类型===================== -->
+    <view class="content-box">
+      <view class="content-item">
+        <view class="item-l"> 证件类型 </view>
+        <view class="item-r2"> 营业执照 </view>
+      </view>
+      <view class="content-item">
+        <view class="item-l"> 证件编号 </view>
+        <view class="item-r">
+          <u--input placeholder="请输入证件有效期" border="surround" v-model="value" ></u--input>
+        </view>
+      </view>
+      <view class="content-item">
+        <view class="item-l"> 有效期 </view>
+        <view class="item-r">
+          <u--input placeholder="请输入证件有效期" border="surround" v-model="value" ></u--input>
+        </view>
+      </view>
+      <view class="content-item">
+        <imgs-upload :filelist.sync="filelist"></imgs-upload>
+      </view>
+      <p class='upload-text'>证件正面图</p>
+    </view>
+
+    <!-- =====================证件类型===================== -->
+    <view class="content-box">
+      <view class="content-item">
+        <view class="item-l"> 证件类型 </view>
+        <view class="item-r2"> 经营许可证 </view>
+      </view>
+      <view class="content-item">
+        <view class="item-l"> 证件编号 </view>
+        <view class="item-r">
+          <u--input placeholder="请输入证件编号" border="surround" v-model="value" ></u--input>
+        </view>
+      </view>
+      <view class="content-item">
+        <view class="item-l"> 有效期 </view>
+        <view class="item-r">
+          <u--input placeholder="请输入证件有效期" border="surround" v-model="value" ></u--input>
+        </view>
+      </view>
+      <view class="content-item">
+        <imgs-upload :filelist.sync="filelist"></imgs-upload>
+      </view>
+      <p class='upload-text'>证件正面图</p>
+    </view>
+
+
+    <button class="btn" @click="handlerSkipNext">提交审核</button>
+  </view>
+</template>
+
+<script>
+  import ImgsUpload from "@/pages/merchant/tabBar/mine/openStore/components/ImgsUpload.vue"
+  export default {
+    data() {
+      return {
+        value: '',
+        current: 0,
+        sex_list:[
+          {name:'男',id:0},
+          {name:'女',id:1},
+          {name:'沃尔玛塑料袋',id:2},
+        ],
+        filelist: [],
+      }
+    },
+    components:{ImgsUpload},
+    methods: {
+      // 跳转到提交成功页面
+      handlerSkipNext() {
+        uni.navigateTo({
+          url: '/pages/merchant/tabBar/mine/openStore/messageSubmit'
+        })
+      },
+      change(e) {
+        console.log("e:", e);
+      },
+      // 选择性别
+      handlerSelectGender(item){
+        this.current = item.id
+        console.log('current',this.current);
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .container {
+    background-color: #F7F7F7 !important;
+    padding-bottom: 40rpx;
+    .top-box {
+      color: #666666;
+      font-size: 26rpx;
+      text-align: center;
+      padding: 20rpx 40rpx;
+      background-color: #fff;
+    }
+
+    .content-box {
+      padding: 20rpx 40rpx;
+      background-color: #fff;
+      margin: 10rpx 0;
+
+      .content-item,.content-item2 {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        width: 100%;
+        margin: 20rpx 0;
+
+        .item-l {
+          width: 30%;
+        }
+
+        .item-r,.item-r2 {
+          width: 70%;
+          background-color: #F7F7F7;
+          border-radius: 20rpx;
+          display: flex;
+
+          .data_select {
+            width: 90%;
+          }
+        }
+        .item-r2{
+          background-color: #fff;
+          display: flex;
+          justify-content: space-between;
+          .sex-item{
+            padding: 20rpx 30rpx;
+            background-color: #F7F7F7;
+            border-radius: 10rpx;
+            text-align: center;
+            font-size: 28rpx;
+          }
+          .act-sex{
+            border: 2rpx solid #5992BB;
+            background-color: #5992BB;
+            color: #fff !important;
+          }
+        }
+
+      }
+      .content-item2{
+        display: none;
+      }
+      .upload-text{
+        text-align: center;
+        color: #666666;
+        font-size:28rpx;
+        margin-top: 20rpx;
+      }
+    }
+
+    .btn {
+      background-color: #5992BB !important;
+      color: #fff;
+      font-size: 32rpx;
+      border-radius: 40rpx;
+      margin-top: 40rpx;
+      width: 95%;
+    }
+  }
+
+  ::v-deep .u-input__content__field-wrapper__field.data-v-fdbb9fe6 {}
+
+  ::v-deep .uni-select {
+    border: none !important;
+  }
+
+  ::v-deep .uni-select__input-placeholder {
+    font-size: 28rpx !important;
+    color: #CBCED4 !important;
+  }
+</style>

src/pages/merchant/tabBar/mine/openStore/selectCategory.vue

@@ -0,0 +1,448 @@
+<template>
+  <view class="u-wrap">
+
+    <view class="top-box">
+      <view class="switch-box">
+        <u-tabs :list="list1" lineWidth="30" lineColor="$uni-bg-color-primary" @click='handlerChangeTab' :activeStyle="{
+            color: '#000',
+            fontSize: '28rpx',
+            transform: 'scale(1.05)',
+            marginBottom: '15rpx',
+          }" :inactiveStyle="{
+            color: '#333',
+            fontSize: '30rpx',
+            transform: 'scale(1)',
+            marginBottom: '15rpx',
+          }" itemStyle="width:50%;padding:0;margin:5px 0;"></u-tabs>
+      </view>
+    </view>
+
+    <!-- 在售中 -->
+    <view class="u-menu-wrap" >
+      <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
+        :scroll-into-view="itemId">
+        <view v-for="(item,index) in tabbar" :key="index" class="u-tab-item"
+          :class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
+          <text class="u-line-1">{{item.name}}</text>
+        </view>
+      </scroll-view>
+      <scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll">
+        <view class="page-view">
+          <view class="class-item" :id="'item' + index" v-for="(item , index) in tabbar" :key="index">
+            <view class="item-title">
+              <text>{{item.name}}</text>
+            </view>
+            <view class="item-box" >
+              <view class="item"  v-for="(itm,idx) of item.foods" :key="idx" :class="itm.type ? 'act-type' : ''" @click="handlerSelectItem(itm,idx)">
+                {{ itm.name }}
+              </view>
+            </view>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+    <button class="btn" @click="handlerSkipNext">下一步</button>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        scrollTop: 0, //tab标题的滚动条位置
+        oldScrollTop: 0, // tab标题的滚动条旧位置
+        current: 0, // 预设当前项的值
+        menuHeight: 0, // 左边菜单的高度
+        menuItemHeight: 0, // 左边菜单item的高度
+        itemId: '', // 栏目右边scroll-view用于滚动的id
+        arr: [], // 储存距离顶部高度的数组
+        scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
+        timer: null, // 定时器
+        tabbar: [{
+            "name": "蔬菜水果",
+            "foods": [{
+                "cat": 383,
+                "name": "蔬菜",
+                "icon": "http://nq348.com/uploads/category/20220315/1aeed6fa43b54cd68cce0c4883160f91.png",
+                "key": "蔬菜",
+                "type":false
+              },
+              {
+                "cat": 384,
+                "name": "食用菌",
+                "icon": "http://nq348.com/uploads/category/20220418/09839c618b35b510d50151f9a17793ee.png",
+                "key": "食用菌",
+                "type":false
+              },
+              {
+                "cat": 385,
+                "name": "水果",
+                "icon": "http://nq348.com/uploads/category/20220418/5294ad2fc7effc9629cbfdb8baf41773.png",
+                "key": "水果",
+                "type":false
+              }
+            ]
+          },
+          {
+            "name": "其他",
+            "foods": [{
+                "cat": 434,
+                "name": "包装",
+                "icon": "http://nq348.com/uploads/category/20220418/ebdfd326333344825adbe81dbd89e2c9.png",
+                "key": "包装",
+                "type":false
+              },
+              {
+                "cat": 435,
+                "name": "安全溯源",
+                "icon": "http://nq348.com/uploads/category/20220418/03230c63f066f46005abf5f576df0ed1.png",
+                "key": "安全溯源",
+                "type":false
+              },
+              {
+                "cat": 436,
+                "name": "农用百货",
+                "icon": "http://nq348.com/uploads/category/20220418/93393f2df3264faba86bb449a0c10a79.png",
+                "key": "农用百货",
+                "type":false
+              },
+              {
+                "cat": 437,
+                "name": "仓储物流",
+                "icon": "http://nq348.com/uploads/category/20220418/f553505ebabbcb1bf762b288716cf1e7.png",
+                "key": "仓储物流",
+                "type":false
+              }
+            ]
+          }
+        ],
+        list1: [{
+          name: '主营服务',
+        }, {
+          name: '辅盈服务(选填)',
+        }],
+      }
+    },
+    /**
+     * 获取一个目标元素的高度
+     * @elClass 元素的类名
+     * @dataVal 储存高度的对象
+     */
+    onReady() {
+      this.getMenuItemTop()
+    },
+    watch: {
+      delete_type(newValue) {
+        this.scrollRightTop = 0
+        this.current = 0
+      }
+    },
+    methods: {
+      getElRect(elClass, dataVal) {
+        new Promise((resolve, reject) => {
+          const query = uni.createSelectorQuery().in(this);
+          query.select('.' + elClass).fields({
+            size: true
+          }, res => {
+            // 如果节点尚未生成，res值为null，循环调用执行
+            if (!res) {
+              setTimeout(() => {
+                this.getElRect(elClass);
+              }, 10);
+              return;
+            }
+            this[dataVal] = res.height;
+            resolve();
+          }).exec();
+        })
+      },
+
+      getMenuItemTop() {
+        new Promise(resolve => {
+          let selectorQuery = uni.createSelectorQuery();
+          selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
+            // 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
+            if (!rects.length) {
+              setTimeout(() => {
+                this.getMenuItemTop();
+              }, 10);
+              return;
+            }
+            rects.forEach((rect) => {
+              // 视情况而定，这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
+              this.arr.push(rect.top - rects[0].top);
+              // this.arr.push(rect.top)
+              resolve();
+            })
+          }).exec()
+        })
+      },
+      /**
+       * 观测元素相交状态
+       * 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
+       * 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
+       */
+      async observer() {
+        this.tabbar.map((val, index) => {
+          let observer = uni.createIntersectionObserver(this);
+          observer.relativeTo('.right-box', {
+            top: 0
+          }).observe('#item' + index, res => {
+            if (res.intersectionRatio > 0) {
+              let id = res.id.substring(4);
+              this.leftMenuStatus(id);
+            }
+          })
+        })
+      },
+      /**
+       * 设置左边菜单的滚动状态
+       * @index 传入的 ID
+       */
+      async leftMenuStatus(index) {
+        this.current = index;
+        // 如果为0，意味着尚未初始化
+        if (this.menuHeight == 0 || this.menuItemHeight == 0) {
+          await this.getElRect('menu-scroll-view', 'menuHeight');
+          await this.getElRect('u-tab-item', 'menuItemHeight');
+        }
+        // 将菜单活动item垂直居中
+        this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
+      },
+      /**
+       * 点击左边的栏目切换
+       * @index 传入的 ID
+       */
+      async swichMenu(index) {
+        if (this.arr.length == 0) {
+          await this.getMenuItemTop();
+        }
+        if (index == this.current) return;
+        this.scrollRightTop = this.oldScrollTop;
+        this.$nextTick(function() {
+          this.scrollRightTop = this.arr[index];
+          this.current = index;
+          this.leftMenuStatus(index);
+        })
+      },
+      /**
+       * 右边菜单滚动
+       * 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
+       */
+      async rightScroll(e) {
+        this.oldScrollTop = e.detail.scrollTop;
+        if (this.arr.length == 0) {
+          await this.getMenuItemTop();
+        }
+        if (this.timer) return;
+        if (!this.menuHeight) {
+          await this.getElRect('menu-scroll-view', 'menuHeight');
+        }
+        setTimeout(() => { // 节流
+          this.timer = null;
+          // scrollHeight为右边菜单垂直中点位置
+          // let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
+          // scrollHeight为右边菜单头部位置
+          let scrollHeight = e.detail.scrollTop + 20;
+          for (let i = 0; i < this.arr.length; i++) {
+            let height1 = this.arr[i];
+            let height2 = this.arr[i + 1];
+            if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
+              this.leftMenuStatus(i);
+              return;
+            }
+          }
+        }, 10)
+      },
+
+      // 搜索按钮
+      handlerSearchBtn() {
+        console.log('search', this.search);
+      },
+      // 切换tab
+      handlerChangeTab(e) {
+        if (e.index == 1) {
+          this.delete_type = true
+        } else {
+          this.delete_type = false
+        }
+      },
+      // 选择类型
+      handlerSelectItem(itm,idx){
+        console.log('itm',itm,idx);
+        itm.type = !itm.type
+      },
+      // 跳转到下一步
+      handlerSkipNext(){
+        uni.navigateTo({
+          url:'pages/merchant/tabBar/mine/openStore/storeInformation'
+        })
+      }
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  .top-box {
+    padding: 0 0 20rpx;
+    width: 100%;
+
+    .switch-box {
+      width: 100%;
+    }
+
+    .search-box {
+      display: flex;
+      justify-content: space-around;
+      width: 90%;
+      margin: 20rpx auto 0;
+
+      .btn {
+        width: 160rpx;
+        height: 70rpx;
+        background-color: #5992BB;
+        color: #fff;
+        text-align: center;
+        line-height: 70rpx;
+        font-size: 26rpx;
+        border-radius: 30rpx;
+        margin-left: 20rpx;
+      }
+    }
+  }
+
+  .u-wrap {
+    /* #ifdef H5 */
+    height: calc(100vh - var(--window-top));
+    /* #endif */
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    background-color: #FAFAFA;
+  }
+
+  .u-search-box {
+    padding: 18rpx 30rpx;
+  }
+
+  .u-menu-wrap {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+  }
+
+  .u-tab-view {
+    width: 200rpx;
+    background-color: #f6f6f6;
+  }
+
+  .u-tab-item {
+    height: 110rpx;
+    background: #f6f6f6;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 26rpx;
+    color: #444;
+    font-weight: 400;
+    line-height: 1;
+    padding: 16rpx 0;
+
+  }
+
+  .u-tab-item-active {
+    position: relative;
+    color: #5F96BE;
+    font-size: 30rpx;
+    font-weight: 500;
+    background: #FFF;
+  }
+
+  .u-tab-item-active::before {
+    content: "";
+    position: absolute;
+    border-left: 4px solid #5F96BE;
+    height: 52rpx;
+    left: 0;
+    top: 29rpx;
+  }
+
+  .u-tab-view {
+    height: 100%;
+  }
+
+  .right-box {
+    background-color: rgb(250, 250, 250);
+  }
+
+  .page-view {
+    padding: 16rpx;
+  }
+
+  .class-item,
+  .class-item2 {
+    margin-bottom: 30rpx;
+    background-color: #fff;
+    padding: 16rpx;
+    border-radius: 8rpx;
+  }
+
+  .class-item2 {
+    margin-bottom: 0;
+  }
+
+  .item-title {
+    font-size: 26rpx;
+    text-align: center;
+    color: #5F96BE;
+    margin-bottom: 20rpx;
+  }
+
+  .item-box {
+    display: grid;
+    grid-template-columns: 30% 30% 30%;
+    justify-content: space-between;
+    .item{
+      margin-bottom: 10rpx;
+      background-color: #EDEBEB;
+      color:#000;
+      padding: 10rpx;
+      text-align: center;
+      border-radius: 10rpx;
+    }
+    .act-type{
+      border: 2rpx solid #5992BB !important;
+      color: #5992BB !important;
+    }
+  }
+
+  .bottom-box {
+    width: 100%;
+    background-color: #fff;
+    padding: 10rpx 20rpx;
+    height: 100rpx;
+    border-top: 2rpx solid #F7F7F7;
+    box-shadow: 0px 7px 10px 7px rgba(0, 0, 0, 0.1);
+    display: flex;
+    justify-content: space-around;
+    line-height: 100rpx;
+    font-size: 28rpx;
+
+  }
+  .btn {
+    background-color: #5992BB !important;
+    color: #fff;
+    font-size: 32rpx;
+    border-radius: 40rpx;
+    margin-bottom: 40rpx;
+    width: 95%;
+  }
+  ::v-deep .u-input--radius.data-v-fdbb9fe6,
+  .u-input--square.data-v-fdbb9fe6 {
+    background-color: #F7F7F7 !important;
+    padding: 40rpx;
+    border-radius: 50rpx;
+  }
+</style>

src/pages/merchant/tabBar/mine/openStore/storeInformation.vue

@@ -0,0 +1,185 @@
+<template>
+  <view class="container">
+    <view class="top-box">
+      为了方便我们与您尽快联系达成合作，请如实填写以下资料，谢谢您的支持与配合
+    </view>
+    <view class="content-box">
+      <view class="content-item">
+        <view class="item-l"> 负责人 </view>
+        <view class="item-r">
+          <u--input placeholder="请输入负责人名称" border="surround" v-model="value"></u--input>
+        </view>
+      </view>
+      <view class="content-item">
+        <view class="item-l"> 手机号码 </view>
+        <view class="item-r">
+          <u--input placeholder="请输入手机号码" border="surround" v-model="value" type='number'></u--input>
+        </view>
+      </view>
+    </view>
+    <view class="content-box">
+      <view class="content-item">
+        <view class="item-l"> 主营服务 </view>
+        <view class="item-r">
+          <!-- <u--input placeholder="请选择主营服务" border="surround" suffixIcon="arrow-right" v-model="value" ></u--input> 111-->
+          <uni-data-select class="data_select" placeholder="请选择主营服务" v-model="value1" :localdata="range"
+            @change="change"></uni-data-select>
+          <u-icon name="arrow-right" color="#97989A" size="18"></u-icon>
+        </view>
+      </view>
+      <view class="content-item">
+        <view class="item-l"> 辅营服务 </view>
+        <view class="item-r">
+          <!-- <u--input placeholder="请选择辅营服务" border="surround" suffixIcon="arrow-right" v-model="value"
+            ></u--input> -->
+          <uni-data-select class="data_select" placeholder="请选择辅营服务" v-model="value1" :localdata="range"
+            @change="change"></uni-data-select>
+          <u-icon name="arrow-right" color="#97989A" size="18"></u-icon>
+        </view>
+      </view>
+    </view>
+
+    <view class="content-box">
+      <view class="content-item">
+        <view class="item-l"> 店铺名称 </view>
+        <view class="item-r">
+          <u--input placeholder="请输入店铺名称" border="surround" v-model="value" ></u--input>
+        </view>
+      </view>
+      <view class="content-item">
+        <view class="item-l"> 所在地 </view>
+        <view class="item-r">
+          <u--input placeholder="请选择所在地" border="surround" suffixIcon="arrow-right" v-model="value"
+           ></u--input>
+        </view>
+      </view>
+      <view class="content-item">
+        <view class="item-l"> 详细地址 </view>
+        <view class="item-r">
+          <u--input placeholder="请输入门店详细地址" border="surround" v-model="value" ></u--input>
+        </view>
+      </view>
+    </view>
+
+    <view class="content-box">
+      <imgs-upload :filelist.sync="filelist"></imgs-upload>
+      <p class='upload-text'>店铺门面图(需要包含完整牌匾)</p>
+    </view>
+
+    <view class="content-box">
+      <imgs-upload :filelist.sync="filelist"></imgs-upload>
+      <p class='upload-text'>店内真实环境图</p>
+    </view>
+
+
+    <button class="btn" @click="handlerSkipNext">下一步</button>
+  </view>
+</template>
+
+<script>
+  import ImgsUpload from "@/pages/merchant/tabBar/mine/openStore/components/ImgsUpload.vue"
+  export default {
+    data() {
+      return {
+        value: '',
+        value1: -1,
+        range: [{
+            value: 0,
+            text: "篮球"
+          },
+          {
+            value: 1,
+            text: "足球"
+          },
+          {
+            value: 2,
+            text: "游泳"
+          },
+        ],
+        filelist: [],
+      }
+    },
+    components:{ImgsUpload},
+    methods: {
+      // 跳转到3/4法人信息
+      handlerSkipNext() {
+        uni.navigateTo({
+          url: '/pages/merchant/tabBar/mine/openStore/corporateInformation'
+        })
+      },
+      change(e) {
+        console.log("e:", e);
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .container {
+    background-color: #F7F7F7 !important;
+    padding-bottom: 40rpx;
+    .top-box {
+      color: #666666;
+      font-size: 26rpx;
+      text-align: center;
+      padding: 20rpx 40rpx;
+      background-color: #fff;
+    }
+
+    .content-box {
+      padding: 20rpx 40rpx;
+      background-color: #fff;
+      margin: 10rpx 0;
+
+      .content-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        width: 100%;
+        margin: 20rpx 0;
+
+        .item-l {
+          width: 30%;
+        }
+
+        .item-r {
+          width: 70%;
+          background-color: #F7F7F7;
+          border-radius: 20rpx;
+          display: flex;
+
+          .data_select {
+            width: 90%;
+          }
+        }
+
+      }
+      .upload-text{
+        text-align: center;
+        color: #666666;
+        font-size:28rpx;
+        margin-top: 20rpx;
+      }
+    }
+
+    .btn {
+      background-color: #5992BB !important;
+      color: #fff;
+      font-size: 32rpx;
+      border-radius: 40rpx;
+      margin-top: 40rpx;
+      width: 95%;
+    }
+  }
+
+  ::v-deep .u-input__content__field-wrapper__field.data-v-fdbb9fe6 {}
+
+  ::v-deep .uni-select {
+    border: none !important;
+  }
+
+  ::v-deep .uni-select__input-placeholder {
+    font-size: 28rpx !important;
+    color: #CBCED4 !important;
+  }
+</style>

src/pages/merchant/tabBar/mine/setting/accountSafety.vue

@@ -0,0 +1,70 @@
+<template>
+  <view class="container">
+    <view class="item-content">
+      <view class="item-box" @click="handlerUpdate(0)">
+        <view class="item-l"> 手机号 </view>
+        <view class="item-r">
+          <p>{{ phone.substring(0, 5) + '****' + phone.substring(10) }}</p><u-icon name="arrow-right" color="#C0C0C0" :size="icon_size"></u-icon>
+        </view>
+      </view>
+      <view class="item-box" @click="handlerUpdate(1)">
+        <view class="item-l"> 邮箱 </view>
+        <view class="item-r">
+          <p>未绑定</p><u-icon name="arrow-right" color="#C0C0C0" :size="icon_size"></u-icon>
+        </view>
+      </view>
+      <view class="item-box">
+        <view class="item-l"> 注销账号 </view>
+        <view class="item-r">
+          <u-icon name="arrow-right" color="#C0C0C0" :size="icon_size"></u-icon>
+        </view>
+      </view>
+    </view>
+
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        phone:'+8618226537738'
+      }
+    },
+    methods:{
+      //跳转到 修改手机号 修改邮箱
+      handlerUpdate(e){
+        uni.navigateTo({
+          url:`/pages/tabBar/mine/setting/phoneAndEmail?type=${e}`
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .container {
+    background-color: #F5F5F5;
+    min-height: calc(100vh - 40rpx);
+    padding-top: 40rpx;
+
+    .item-content {
+      margin-bottom: 40rpx;
+
+      .item-box {
+        display: flex;
+        justify-content: space-between;
+        background-color: #fff;
+        padding: 20rpx 40rpx;
+        font-size: 30rpx;
+
+        .item-r {
+          display: flex;
+          font-size: 26rpx;
+          color: #B0B0B0;
+        }
+      }
+    }
+  }
+
+</style>

src/pages/merchant/tabBar/mine/setting/bindPhoneAndEmail.vue

@@ -0,0 +1,187 @@
+<template>
+  <view class="container">
+    <view class="top-box">
+      <template v-if="type == 0">
+        <p class="p1">更换手机号</p>
+        <p class="p2">请输入新手机号，作为登陆账号</p>
+      </template>
+      <template v-else>
+        <p class="p1">更换邮箱</p>
+      </template>
+
+
+      <view class="ipt-box">
+        <view class="ipt-item">
+          <p class="ipt-text">{{ type == 0 ? '手机号' : '电子邮箱' }}</p>
+          <u--input v-if="type == 0" placeholder="请输入手机号" v-model="phone_text" type='number' maxlength='11' clearable></u--input>
+          <u--input v-else placeholder="请输入电子邮箱" v-model="email_text" type='text' clearable></u--input>
+        </view>
+        <view class="ipt-item">
+          <p class="ipt-text">验证码 </p>
+          <u--input placeholder="请输入验证码" v-model="code_text"></u--input>
+          <button class="ipt-btn" :disabled="btn_disabled" :class="btn_disabled ? 'act-ipt-btn' : ''"
+            @click="handlerGetCodeBtn">{{ btn_text }}</button>
+        </view>
+      </view>
+    </view>
+    <view class="btn-box">
+      <button class="btn" @click="handlerConfirmBtn"> 确定 </button>
+      <p  class="btn-text" v-if="btn_disabled && type == 0">已向手机{{ phone_text.substring(0, 3) + '****' + phone_text.substring(7) }} 发送验证码 </p>
+      <p  class="btn-text" v-if="btn_disabled && type == 1">已向邮箱{{ email_text.substring(0, 3) + '****' + email_text.substring(6) }} 发送验证码 </p>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        phone_text: '',
+        email_text: '',
+        code_text: '',
+        type: 0,
+        time: 60,
+        btn_text: '发送验证码',
+        btn_disabled: false
+      }
+    },
+    onLoad(option) {
+      this.type = option.type
+      switch (this.type) {
+        case '0':
+          uni.setNavigationBarTitle({
+            title: '绑定手机号'
+          });
+          break;
+        case '1':
+          uni.setNavigationBarTitle({
+            title: '绑定邮箱'
+          });
+          break;
+      }
+    },
+    methods: {
+      // 点击获取验证码按钮
+      handlerGetCodeBtn() {
+        if (this.type == 0) {
+          let ResPhone = /^[1][3,4,5,6.7,8,9][0-9]{9}$/
+          if (!ResPhone.test(this.phone_text)) {
+            uni.showToast({
+              title: '请输入正确的手机号',
+              icon: 'none'
+            })
+            return
+          } else {
+            this.handlerGetCode()
+          }
+        } else {
+          let ResEmail = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+          if (!ResEmail.test(this.email_text)) {
+            uni.showToast({
+              title: '请输入正确的电子邮箱',
+              icon: 'none'
+            })
+            return
+          } else {
+            this.handlerGetCode()
+          }
+        }
+      },
+      // 获取验证码
+      handlerGetCode() {
+        this.timers = setInterval(() => {
+          this.btn_disabled = true
+          this.time--
+          this.btn_text = `${this.time}后重新获取`
+          if (this.time == 0) {
+            clearInterval(this.timers)
+            this.time = 60
+            this.btn_text = `发送验证码`
+            this.btn_disabled = false
+          }
+        }, 1000)
+      },
+      // 确定按钮
+      handlerConfirmBtn() {
+        uni.showToast({
+          title:`${this.type == 0 ? '手机号' : '电子邮箱'}更换成功`,
+          icon:'none'
+        })
+        setTimeout(()=>{
+          uni.navigateBack({
+            delta:2
+          })
+        },1500)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .container {
+    .top-box {
+      padding: 80rpx 60rpx 0;
+
+      .p1 {
+        font-size: 44rpx;
+        color: #000;
+      }
+
+      .p2 {
+        font-size: 26rpx;
+        color: #A2A2A2;
+        margin-top: 10rpx;
+      }
+
+      .ipt-box {
+        margin-top: 60rpx;
+
+        .ipt-item {
+          display: flex;
+          align-items: center;
+          border-bottom: 2rpx solid #F7F7F7;
+          margin-bottom: 30rpx;
+          padding-bottom: 16rpx;
+
+          .ipt-text {}
+
+          .ipt-btn {
+            width: 30%;
+            background-color: #Fff;
+            border: 2rpx solid #83ADCC;
+            color: #83ADCC;
+            border-radius: 30rpx;
+            font-size: 26rpx;
+            padding: 0;
+            margin: 0;
+          }
+
+          .act-ipt-btn {
+            background-color: #F7F7F7;
+          }
+        }
+      }
+    }
+
+    .btn-box {
+      margin-top: 100rpx;
+      text-align: center;
+
+      .btn {
+        background-color: #83ADCC;
+        color: #fff;
+        border-radius: 40rpx;
+        width: 90%;
+        height: 80rpx;
+        line-height: 80rpx;
+        font-size: 28rpx;
+      }
+
+      .btn-text {
+        font-size: 26rpx;
+        color: #A2A2A2;
+        margin-top: 20rpx;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,160 @@
+<template>
+  <view class="container">
+    <view class="item-content">
+      <view class="item-box" @click="handlerSkipAccountSafety">
+        <view class="item-l"> 账号与安全 </view>
+        <view class="item-r">
+          <u-icon name="arrow-right" color="#C0C0C0" size="16"></u-icon>
+        </view>
+      </view>
+    </view>
+
+    <view class="item-content">
+      <view class="item-box">
+        <view class="item-l"> 新消息通知 </view> 
+        <view class="item-r">
+          <u-switch v-model="value" activeColor="#5992BB"></u-switch>
+        </view>
+      </view>
+      <view class="item-box">
+        <view class="item-l"> 隐私管理 </view>
+        <view class="item-r">
+          <u-icon name="arrow-right" color="#C0C0C0" :size="icon_size"></u-icon>
+        </view>
+      </view>
+      <view class="item-box">
+        <view class="item-l"> 选择语言 </view>
+        <view class="item-r">
+          <p>简体中文</p><u-icon name="arrow-right" color="#C0C0C0" :size="icon_size"></u-icon>
+        </view>
+      </view>
+    </view>
+
+    <view class="item-content">
+      <view class="item-box" v-for="(item,index) of privacy_list" :key="item.id" @click="handlerSkipPrivacy(item)">
+        <view class="item-l"> {{ item.name }} </view>
+        <view class="item-r">
+          <u-icon name="arrow-right" color="#C0C0C0" :size="icon_size"></u-icon>
+        </view>
+      </view>
+    </view>
+
+    <view class="btn-box">
+      <button class='btn1' @click="showSwitchDialog = true">切换账号</button>
+      <button class='btn2' @click="loginout_show = true">退出登录</button>
+    </view>
+	<u-modal :show="showSwitchDialog" showCancelButton='true' :title="title" :content='content' @confirm='confirmSwitch' @cancel='showSwitchDialog = false'></u-modal>
+    <u-modal :show="loginout_show" :content='content' showCancelButton='true' @confirm='handlerLoginOutConfirm' @cancel='loginout_show = false'></u-modal>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: true,
+        icon_size: 18,
+        loginout_show:false,
+        content:'退出后店铺状态将变更为休息中，是否退出当前帐号',
+        privacy_list:[
+          {
+            name:'应用权限说明',
+            id:0
+          },
+          {
+            name:'个人信息收集清单',
+            id:1
+          },
+          {
+            name:'第三方共享个人信息清单',
+            id:2
+          },
+          {
+            name:'关于我们',
+            id:3
+          }
+        ],
+		showSwitchDialog:false
+      }
+    },
+    methods:{
+      // 点击切换账号
+      // handlerSwitchAccount(){
+
+      // },
+	  confirmSwitch() {
+	  	// 点击确认切换身份
+	  	// 处理身份切换逻辑
+	  	uni.setStorageSync('tabbar_type', true);
+	  	uni.switchTab({
+	  		url: '/pages/client/tabBar/mine/index'
+	  	})
+	  	// ... 其他操作
+	  },
+      // 跳转到账号与安全
+      handlerSkipAccountSafety(){
+        uni.navigateTo({
+          url:`/pages/tabBar/mine/setting/accountSafety`
+        })
+      },
+      // 点击跳转到隐私页面
+      handlerSkipPrivacy(item){
+        uni.navigateTo({
+          url:`/pages/tabBar/mine/setting/privacyPolicy?type=${item.id}`
+        })
+      },
+      //点击退出登录
+       handlerLoginOutConfirm(){
+          this.loginout_show = false
+       }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .container {
+    background-color: #F5F5F5;
+    min-height: calc(100vh - 40rpx);
+    padding-top: 40rpx;
+
+    .item-content {
+      margin-bottom: 40rpx;
+
+      .item-box {
+        display: flex;
+        justify-content: space-between;
+        background-color: #fff;
+        padding: 20rpx 40rpx;
+        font-size: 30rpx;
+
+        .item-r {
+          display: flex;
+          font-size: 26rpx;
+          color: #B0B0B0;
+        }
+      }
+    }
+
+  }
+  .btn-box{
+    width: 90%;
+    margin: 200rpx auto 0;
+    .btn1,.btn2{
+      padding: 20rpx;
+      height: 80rpx;
+      font-size:28rpx;
+      line-height: 40rpx;
+    }
+    .btn1{
+      background-color: #5992BB;
+      color: #000;
+    }
+    .btn2{
+      margin-top: 50rpx;
+      background-color: #E2E2E2;
+    }
+  }
+  ::v-deep .u-modal__content__text.data-v-713d0fd3 {
+    text-align: center;
+  }
+</style>

src/pages/merchant/tabBar/mine/setting/phoneAndEmail.vue

@@ -0,0 +1,77 @@
+<template>
+  <view class="container">
+    <view class="top-img">
+      <img class="img" :src="type == 0 ? require('@/static/mine/icon_mine_phone.png') : require('@/static/mine/icon_mine_email.png')" alt="">
+    </view>
+
+    <view class="text-box">
+      当前绑定{{  type == 0 ? '手机号' : '邮箱' }} {{  type == 0 ? phone.substring(0, 5) + '****' + phone.substring(10) : email.substring(0, 3) + '**' + email.substring(6)  }}
+    </view>
+    <view class="btn-box">
+      <button class="btn" @click="handlerSkipBindPage"> {{ type == 0 ? '更换手机号' : '更换邮箱号' }} </button>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default{
+    data(){
+      return{
+        type:0,
+        phone:'+8618226537738',
+        email:'743180155@qq.com'
+      }
+    },
+    onLoad(option){
+      this.type = option.type
+      switch (this.type) {
+        case '0':
+          uni.setNavigationBarTitle({
+            title: '绑定手机号'
+          });
+          break;
+        case '1':
+          uni.setNavigationBarTitle({
+            title: '绑定邮箱'
+          });
+          break;
+      }
+    },
+    methods:{
+      // 点击绑定手机号 / 邮箱号
+      handlerSkipBindPage(){
+        uni.navigateTo({
+          url:`/pages/tabBar/mine/setting/bindPhoneAndEmail?type=${this.type}`
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .top-img{
+    margin: 100rpx auto;
+    text-align: center;
+    .img{
+      width: 400rpx;
+      height: 400rpx;
+    }
+  }
+  .text-box{
+    text-align: center;
+    margin: 50rpx 0;
+  }
+  .btn-box{
+    margin-top: 100rpx;
+    .btn{
+      background-color: #fff;
+      border: 2rpx solid #83ADCC;
+      color: #83ADCC;
+      border-radius: 40rpx;
+      width: 80%;
+      height: 80rpx;
+      line-height: 80rpx;
+      font-size:28rpx;
+    }
+  }
+</style>

src/pages/merchant/tabBar/mine/setting/privacyPolicy.vue

@@ -0,0 +1,91 @@
+<template>
+  <view class="container">
+    <u-parse :content="template_text"></u-parse>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        template_text: `<p class="title">
+      概述
+    </p>
+    <p class="text">
+      我们将非常重视您的个人信息保护。在您使用我们的服务前，请您仔细阅读并了解<隐私条款>。我们将严格按照本隐私条款使用和保护您的个人信息
+    </p>
+
+    <p class="title">
+      信息收集
+    </p>
+    <p class="text">
+      我们将非常重视您的个人信息保护。在您使用我们的服务前，请您仔细阅读并了解<隐私条款>。我们将严格按照本隐私条款使用和保护您的个人信息
+    </p>
+
+    <p class="title">
+      信息使用
+    </p>
+    <p class="text">
+      我们将非常重视您的个人信息保护。在您使用我们的服务前，请您仔细阅读并了解<隐私条款>。我们将严格按照本隐私条款使用和保护您的个人信息
+    </p>
+
+    <p class="title">
+      信息保护
+    </p>
+    <view class="text">
+      我们将非常重视您的个人信息保护。在您使用我们的服务前，请您仔细阅读并了解<隐私条款>。我们将严格按照本隐私条款使用和保护您的个人信息
+    </p>
+
+    <p class="title">
+      信息披露
+    </p>
+    <p class="text">
+      我们将非常重视您的个人信息保护。在您使用我们的服务前，请您仔细阅读并了解<隐私条款>。我们将严格按照本隐私条款使用和保护您的个人信息
+    </p>`
+      }
+    },
+    onLoad(option) {
+      let type = option.type
+      switch (type) {
+        case '0':
+          uni.setNavigationBarTitle({
+            title: '应用权限说明'
+          });
+          break;
+        case '1':
+          uni.setNavigationBarTitle({
+            title: '个人信息收集清单'
+          });
+          break;
+        case '2':
+          uni.setNavigationBarTitle({
+            title: '第三方共享个人信息清单'
+          });
+          break;
+        case '3':
+          uni.setNavigationBarTitle({
+            title: '关于我们'
+          });
+          break;
+      }
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .container {
+    padding: 40rpx;
+
+    .title {
+      font-size: 28rpx;
+      color: #000;
+      font-weight: bold;
+    }
+
+    .text{
+      margin: 20rpx 0 40rpx;
+      color: #6B7280;
+    }
+  }
+</style>

src/pages/merchant/tabBar/order/components/orderItem.vue

@@ -0,0 +1,174 @@
+<template>
+  <view class="">
+    <view class="order__info" v-for="index in 2" :key="index">
+      <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">
+        <text>顾客待付款</text>
+        <view class="service">
+          <image
+            slot="icon"
+            src="@/static/QR57a.jpg"
+            style="width: 200rpx; height: 200rpx"
+          />
+          <view class="description">
+            <view class="description--title">汽车维修与保养</view>
+            <view class="tipInfo">专业维修保界</view>
+            <view class="description--text">服务描述……</view>
+          </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;">￥723.7</view>
+        </view>
+      </view>
+
+      <view class="order__info--tip">
+        <view class="tip-l">
+          <view class="tipInfo"> 订单编号：12232964103521日</view>
+          <view class="tipInfo"> 交易快照：发生争议时，可作为判断依据</view>
+          <view class="tipInfo"> 下单时间：12-0318：03</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
+      }
+    },
+    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;
+      > text {
+        font-size: 36rpx;
+        color: #333;
+      }
+
+      .service {
+        display: flex;
+        margin-top: 20rpx;
+        .description {
+          margin-left: 20rpx;
+          &--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-l{
+
+      }
+      .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/pages/merchant/tabBar/order/index.vue

@@ -29,7 +29,7 @@
         ></u-tabs>
       </view>
 
-      <!-- <orderItem :typeStyle.sync='typeStyle'></orderItem> -->
+      <orderItem :typeStyle.sync='typeStyle'></orderItem>
 
     </view>
 	<tabbar currentTab="merchantOrder" />
@@ -37,7 +37,7 @@
 </template>
 
 <script>
-  // import orderItem from "@/pages/tabbar/order/components/orderItem.vue"
+  import orderItem from "@/pages/merchant/tabBar/order/components/orderItem.vue"
 export default {
   data() {
     return {
@@ -51,7 +51,7 @@ export default {
       typeStyle:0
     };
   },
-  // components:{orderItem},
+  components:{orderItem},
   methods:{
     // 点击切换顶部导航栏
     handlerChangeItem(item){