商家端 完成我要开店页面 初始化1/4

src/pages.json

@@ -33,6 +33,20 @@
         "navigationBarTitleText": "我的",
         "navigationStyle": "custom"
       }
+    },
+    {
+      "path": "pages/tabbar/mine/openStore/index",
+      "style": {
+        "navigationBarTitleText": "我要开店",
+        "navigationStyle": "default"
+      }
+    },
+    {
+      "path": "pages/tabbar/mine/openStore/selectCategory",
+      "style": {
+        "navigationBarTitleText": "1/4选择品类",
+        "navigationStyle": "default"
+      }
     }
   ],
   "subPackages": [

src/pages/tabbar/mine/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: yizhiyang
  * @Date: 2023-11-30 09:40:24
- * @Description: 
+ * @Description:
 -->
 <template>
   <view class="mine">
@@ -59,8 +59,8 @@
         </view>
       </view>
       <view class="mine__main--setting">
-        <template v-for="item in list1" :key="item.id">
-          <u-cell size="large" :border="false" :title="item.name" isLink url="">
+        <template v-for="item in list1" >
+          <u-cell size="large" :border="false" :title="item.name" isLink :url="item.url">
             <image
               slot="icon"
               src="@/static/tools.jpg"
@@ -70,8 +70,8 @@
         </template>
       </view>
 
-      <view class="mine__main--setting">
-        <template v-for="item in list2" :key="item.id">
+     <view class="mine__main--setting">
+        <template v-for="item in list2" >
           <u-cell size="large" :border="false" :title="item.name" isLink url="">
             <image
               slot="icon"
@@ -104,7 +104,7 @@ export default {
         {
           id: '3',
           name: '我要开店',
-          url: '',
+          url: '/pages/tabbar/mine/openStore/index',
         },
       ],
 

src/pages/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/tabbar/mine/openStore/index.vue

@@ -0,0 +1,118 @@
+<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/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/tabbar/mine/openStore/selectCategory'
+          })
+        }else{
+          uni.showToast({
+            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/tabbar/mine/openStore/selectCategory.vue

@@ -0,0 +1,44 @@
+<template>
+  <view class="container">
+    <view class="top-box">
+      <view class="top-item" v-for="item of tabList" @click="handlerSelectTopItem(item,index)">
+        {{ item.name }}
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default{
+    data(){
+      return{
+        tabList:[
+          {name:'主营业务',id:0},
+          {name:'辅盈业务',id:1}
+        ],
+        current:0
+      }
+    },
+    methods:{
+      // 顶部选择
+      handlerSelectTopItem(item,index){
+        console.log('item',item);
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .container{
+    .top-box{
+      width: 100%;
+      padding: 20rpx 0;
+      display: flex;
+      justify-content: space-around;
+      .top-item{
+        width: 30%;
+        text-align: center;
+      }
+    }
+  }
+</style>