浏览代码

商家端 我的 设置模块 完成70%

zxl 1 年之前
父节点
当前提交
a091364345

+ 32 - 1
src/pages.json

@@ -10,6 +10,37 @@
         "navigationStyle": "custom"
       }
     },
+    {
+      "path": "pages/tabbar/mine/setting/index",
+      "style": {
+        "navigationBarTitleText": "设置",
+        "navigationStyle": "default"
+      }
+    },
+    {
+      "path": "pages/tabbar/mine/setting/privacyPolicy",
+      "style": {
+        "navigationBarTitleText": ""
+      }
+    },
+    {
+      "path": "pages/tabbar/mine/setting/accountSafety",
+      "style": {
+        "navigationBarTitleText": "账号与安全"
+      }
+    },
+    {
+      "path": "pages/tabbar/mine/setting/phoneAndEmail",
+      "style": {
+        "navigationBarTitleText": ""
+      }
+    },
+    {
+      "path": "pages/tabbar/mine/setting/bindPhoneAndEmail",
+      "style": {
+        "navigationBarTitleText": ""
+      }
+    },
     {
       "path": "pages/tabbar/order/index",
       "style": {
@@ -64,7 +95,7 @@
         "navigationBarTitleText": "回复评价"
       }
     },
-    
+
     {
       "path": "pages/tabbar/mine/openStore/index",
       "style": {

+ 7 - 1
src/pages/tabbar/mine/index.vue

@@ -10,7 +10,7 @@
 
     <view class="mine__person">
       <view class="mine__person--icon">
-        <u-icon name="setting" color="#fff" size="22" />
+        <u-icon name="setting" color="#fff" size="22" @click="handlerSkipSetting"/>
         <u-icon name="chat" color="#fff" size="22" />
       </view>
       <view class="mine__person--info">
@@ -123,6 +123,12 @@ export default {
     };
   },
   methods: {
+    // 点击跳转到设置
+    handlerSkipSetting(){
+      uni.navigateTo({
+        url:'/pages/tabbar/mine/setting/index'
+      })
+    },
     //计算导航栏总高度
     getHeight() {
       // 获取系统信息

+ 70 - 0
src/pages/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>

+ 158 - 0
src/pages/tabbar/mine/setting/bindPhoneAndEmail.vue

@@ -0,0 +1,158 @@
+<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">手机号</p>
+          <u--input
+              placeholder="请输入手机号"
+              v-model="phone_text"
+              type='number'
+              maxlength='11'
+            ></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="handlerGetCode">{{ btn_text }}</button>
+        </view>
+      </view>
+    </view>
+    <view class="btn-box">
+      <button class="btn" @click="handlerConfirmBtn"> 确定 </button>
+      <p class="btn-text" v-if="btn_disabled" >已向手机{{ phone_text.substring(0, 3) + '****' + phone_text.substring(7) }} 发送验证码 </p>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default{
+    data(){
+      return{
+        phone_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:{
+      // 点击获取验证码
+      handlerGetCode(){
+        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.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(){
+
+      }
+    }
+  }
+</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>

+ 150 - 0
src/pages/tabbar/mine/setting/index.vue

@@ -0,0 +1,150 @@
+<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="handlerSwitchAccount">切换账号</button>
+      <button class='btn2' @click="loginout_show = true">退出登录</button>
+    </view>
+
+    <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
+          }
+        ]
+      }
+    },
+    methods:{
+      // 点击切换账号
+      handlerSwitchAccount(){
+
+      },
+      // 跳转到账号与安全
+      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>

+ 77 - 0
src/pages/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 ? 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>

+ 91 - 0
src/pages/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>

+ 1 - 1
src/pages/tabbar/store/components/evaluateItem.vue

@@ -23,7 +23,7 @@
       <view class="content-box">
         <p class="content-text">服务非常好服务非常好服务非常好服务非常好服务非常好服务非常好服务非常好</p>
         <view class="content-img-box">
-          <img class="content-img" src="@/static/QR57a.jpg" >
+          <img class="content-img" src="@/static/QR57a.jpg" v-for="itm of 6">
 
         </view>
       </view>

+ 9 - 3
src/pages/tabbar/store/myTeam.vue

@@ -8,7 +8,9 @@
     <view class="group-item-box">
       <view class="item-top">
         <view class="top-l">团队成员</view>
-        <view class="top-r">></view>
+        <view class="top-r">
+          <u-icon name="arrow-right" color="#C0C0C0" size="16"></u-icon>
+        </view>
       </view>
       <view class="item-content">
         <img
@@ -24,7 +26,9 @@
     <view class="group-item-box">
       <view class="item-top">
         <view class="top-l">最近动态</view>
-        <view class="top-r">></view>
+        <view class="top-r">
+          <u-icon name="arrow-right" color="#C0C0C0" size="16"></u-icon>
+        </view>
       </view>
       <view class="item-content dynamic-img-box">
         <img class="dynamic-img" src="@/static/QR57a.jpg" alt="" />
@@ -34,7 +38,9 @@
     <view class="group-item-box">
       <view class="item-top">
         <view class="top-l">团队任务</view>
-        <view class="top-r">></view>
+        <view class="top-r">
+          <u-icon name="arrow-right" color="#C0C0C0" size="16"></u-icon>
+        </view>
       </view>
       <view class="item-content">
         <img

二进制
src/static/mine/icon_mine_email.png


二进制
src/static/mine/icon_mine_phone.png