feat: 更多功能&解除绑定

component/comPopup/Confirm.vue

@@ -1,13 +1,13 @@
 <template>
   <view class="modal-mask" v-if="value">
     <view class="confirm-container">
-      <view class="popup-title">{{ dialogInfo.title }}</view>
+      <view class="popup-title">{{ dialogInfo.title || $t('温馨提示') }}</view>
       <view class="popup-content">{{ dialogInfo.text }}</view>
       <view class="flex-row modal-footer">
         <view class="show-btn cencel-btn-pop" v-if="dialogInfo.showCancelButton" @tap="cancel">
-          {{ dialogInfo.cancelBtnText }}
+          {{ dialogInfo.cancelBtnText || $t('取消') }}
         </view>
-        <view class="show-btn ok-btn-pop" @tap="confirm">{{ dialogInfo.confirmBtnText }}</view>
+        <view class="show-btn ok-btn-pop" @tap="confirm">{{ dialogInfo.confirmBtnText || $t('确定') }}</view>
       </view>
     </view>
   </view>

libs/css/layout.scss

@@ -10,7 +10,7 @@
 .zx-page-linear {
     width: 100%;
     min-height: 100vh;
-    background: linear-gradient(180deg, #CFD1DE 0%, #F1F3F4 100%), #F1F3F4;
+    background: linear-gradient(180deg, $baseBgColor 0%, $pageBgColor 100%), $pageBgColor;
     background-size: 100% 528rpx;
     background-repeat: no-repeat;
 }
@@ -30,4 +30,22 @@
   &.is-submit {
       background: #000;
   }
+  &.fix-bottom-btn {
+    width: 93%;
+    position: absolute;
+    bottom: 48rpx;
+  }
+}
+
+.zx-container {
+  width: 100%;
+  min-height: 100vh;
+  padding: 32rpx 24rpx;
+  background: $pageBgColor;
+  .zx-wrap {
+    width: 100%;
+    background: #fff;
+    padding: 40rpx 32rpx;
+    border-radius: 40rpx;
+  }
 }

libs/css/variables.scss

@@ -1 +1,2 @@
-$baseBgColor: #F1F3F4;
+$pageBgColor: #F1F3F4;
+$baseBgColor: #CFD1DE;

package.json

@@ -31,6 +31,7 @@
     "dependencies": {
         "crypto-js": "^4.2.0",
         "uview-ui": "^1.8.8",
-        "vue-i18n": "^11.0.1"
+        "vue-i18n": "^11.0.1",
+        "vuedraggable": "^2.24.3"
     }
 }

pages.json

@@ -78,6 +78,21 @@
 				"navigationBarTitleText": "开启感应解锁"
 			}
 		},
+		{
+			"path": "pages/carFunctionSet/more",
+			"style": {
+				"titleNView": false,
+				"navigationBarTitleText": "更多功能"
+			}
+		},
+		{
+			"path": "pages/carFunctionSet/unbind",
+			"style": {
+				"titleNView": false,
+				"navigationBarTitleText": "解除绑定"
+			}
+		},
+
 		{
 			"path": "pages/service/service",
 			"style": {}

pages/bluetoothUnlock/bluetoothUnlockAuth.vue

@@ -0,0 +1,37 @@
+<template>
+    <view>
+        <AndroidUnlockAuth v-model="show" v-if="platform === 'android'" />
+        <IosUnlockAuth v-model="show" v-else-if="platform === 'ios'" />
+    </view>
+</template>
+
+<script>
+import AndroidUnlockAuth from './components/AndroidUnlockAuth.vue'
+import IosUnlockAuth from './components/IosUnlockAuth.vue'
+
+export default {
+    components: {
+        AndroidUnlockAuth,
+        IosUnlockAuth
+    },
+    data() {
+        return {
+            platform: 'android',
+            show: false
+        }
+    },
+    onLoad() {
+        this._initPlatform();
+    },
+    methods: {
+        open() {
+            this.show = true;
+            console.log(111, this.platform)
+        },
+        _initPlatform() {
+            const systemInfo = uni.getSystemInfoSync();
+            this.platform = systemInfo.platform;
+        }
+    }
+}
+</script>

pages/bluetoothUnlock/components/AndroidUnlockAuth.vue

@@ -0,0 +1,214 @@
+<template>
+    <u-popup v-model="showDialog" mode="bottom" border-radius="28" @close="close">
+        <view class="dialog-content">
+            <view class="title">{{ $t('开启感应解锁') }}</view>
+            <view class="tips">为保证 感应解锁 的正常使用，请依次开以下权限，开启后可以显著提高解锁成功率，且不会明显增加手机电量消耗</view>
+            <view class="authorization-wrap">
+                <view class="corner-mark">{{ $t('授权引导') }}</view>
+                <view class="step-item-container">
+                    <view class="step-item" v-for="(auth, idx) in authStepList" :key="idx">
+                        <view :class="['icon', `icon_${auth.type}`]"></view>
+                        <view class="desc-wrap">
+                            <view class="title-row">
+                                <view class="title">{{ auth.title }}</view>
+                                <view class="turn-on-switch is-open">{{ $t('已开启') }}</view>
+                            </view>
+                            <view class="desc">{{ auth.desc }}</view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <view class="btn" @tap="linkTo">{{ $t('我已开启') }}</view>
+        </view>
+    </u-popup>
+</template>
+
+<script>
+export default {
+    props: {
+        value: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            showDialog: this.value,
+        }
+    },
+    computed: {
+        authStepList() {
+            const lang = v => this.$t(v)
+            return  [
+                { title: lang('位置权限'), type: 'location', desc: '打开手机定位，并运行APP始终使用' },
+                { title: lang('电池优化'), type: 'battery', desc: '打开电池优化设置， 将弗兰克APP加入保护名单' },
+                { title: lang('后台运行'), type: 'backstage', desc: '打开后台运行权限 清选择手动控制' },
+                { title: lang('打开应用锁'), type: 'appLock', desc: '打开应用权限锁' },
+            ]
+        }
+    },
+    watch: {
+        value(newValue) {
+            this.showDialog = newValue;
+        }
+    },
+    methods: {
+        linkTo() {
+            uni.navigateTo({ url: '/pages/bluetoothUnlock/bluetoothPair' })
+        },
+        close() {
+            this.$emit('input', false);
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.dialog-content {
+    width: 100%;
+    height: 100%;
+    background: #F1F3F4;
+    padding: 40rpx 32rpx;
+
+    .title {
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 600;
+        font-size: 40rpx;
+        color: #060809;
+    }
+
+    .tips {
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 400;
+        font-size: 24rpx;
+        color: #828DA2;
+        line-height: 40rpx;
+        margin: 32rpx 0 40rpx;
+    }
+
+    .authorization-wrap {
+        background: #fff;
+        width: 100%;
+        border-radius: 40rpx;
+        position: relative;
+
+        .corner-mark {
+            width: 224rpx;
+            height: 100rpx;
+            background: #0A59F7;
+            border-radius: 40rpx 0 0 0;
+            display: flex;
+            color: #fff;
+            line-height: 86rpx;
+            text-align: center;
+            justify-content: flex-end;
+
+            &::after {
+                content: "";
+                width: 86rpx;
+                height: 80rpx;
+                background: url('https://qiniu.bms16.com/FibAaPERzqi6m95EP2jREUKixjUi');
+                background-size: 100%;
+            }
+        }
+
+        .step-item-container {
+            background: #fff;
+            border-top-left-radius: 40rpx;
+            padding: 30rpx 24rpx;
+            margin-top: -24rpx;
+        }
+
+        .step-item {
+            width: 100%;
+            background: #F4F5F6;
+            border-radius: 24rpx;
+            padding: 32rpx 28rpx;
+            margin-bottom: 24rpx;
+            display: flex;
+            align-items: center;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            .desc-wrap {
+                flex: 1;
+                margin-left: 24rpx;
+            }
+
+            .title-row {
+                display: flex;
+                justify-content: space-between;
+                margin-bottom: 24rpx;
+
+                .title {
+                    font-family: PingFangSC, PingFang SC;
+                    font-weight: 500;
+                    font-size: 32rpx;
+                    color: #060809;
+                    font-weight: bold;
+                }
+
+                .turn-on-switch {
+                    background: #2ADA62;
+                    border-radius: 20rpx;
+                    font-size: 22rpx;
+                    color: #FFFFFF;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    padding: 8rpx 20rpx;
+                }
+            }
+
+            .desc {
+                font-size: 24rpx;
+                color: #060809;
+            }
+            .icon {
+                width: 66rpx;
+                height: 70rpx;
+            }
+            .icon_location {
+                background: url('https://qiniu.bms16.com/FpNU0wp-E5Iin60nT8_NwT1_h_xm');
+                background-size: 100% 100%;
+            }
+
+            .icon_battery {
+                background: url('https://qiniu.bms16.com/FjD4CXHuNUL85_JYI7w2MDucjeI-');
+                background-size: 100% 100%;
+            }
+
+            .icon_backstage {
+                background: url('https://qiniu.bms16.com/Fo7RGbv1gokn1iUQpF8tca5aUWkD');
+                background-size: 100% 100%;
+            }
+
+            .icon_appLock {
+                background: url('https://qiniu.bms16.com/FoWg_FjfV5_v9fxvFQ2dHzXOCDPD');
+                background-size: 100% 100%;
+            }
+        }
+    }
+
+    .btn {
+        margin-top: 40rpx;
+        width: 100%;
+        height: 80rpx;
+        background: #060809;
+        border-radius: 40rpx;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 500;
+        font-size: 32rpx;
+
+        &:active {
+            opacity: 0.8;
+        }
+    }
+}
+</style>

pages/bluetoothUnlock/components/UnlockNotification.vue → pages/bluetoothUnlock/components/IosUnlockAuth.vue

@@ -1,6 +1,7 @@
 <template>
     <u-popup v-model="showDialog" mode="bottom" border-radius="28" @close="close">
         <view class="dialog-content">
+            IOS
             <view class="title">清先开启位置授权</view>
             <view class="tips">为保证 感应解锁 的正常使用，请 开启位置授权 并 打开精准位置 开关，可提高解锁成功率，且不会明显增加手机电量消耗。</view>
             <view class="authorization-wrap">

pages/carFunctionSet/more.vue

@@ -0,0 +1,228 @@
+<template>
+  <view class="zx-container car-function-set-more">
+    <view class="fn-wrap">
+      <view class="title">
+        {{ $t('固定导航栏') }}
+        <text class="sort-num">{{ realActiveTabs.length }} / {{ MAX_TAB_LEN }}</text>
+      </view>
+      <draggable v-model="activeTabs" :delay="0" :animation="200" class="tab-item-container">
+        <view v-for="(tab, index) in activeTabs" :class="['tab-item']" :key="index" @longpress="toggleEdit"
+          @tap="deleteTab(tab)">
+          <image v-if="tab.isLock && isActiveEdit" :src="icons.lock" class="right-icon" />
+          <image v-if="getMovableItem(tab)" :src="icons.edit" class="right-icon" />
+          <image :src="tab.iconUrl" class="icon" />
+          <view :class="['name', getMovableItem(tab) && 'shake']">{{ tab.name }}</view>
+        </view>
+      </draggable>
+    </view>
+    <view class="fn-wrap">
+      <view class="title">{{ $t('其他功能') }}</view>
+      <view class="tab-item-container is-to-be-select">
+        <view v-for="tab in toBeSelectTabs" :key="tab.name" class="tab-item" @longpress="toggleEdit"
+          @tap="addItemTab(tab)">
+          <image v-if="showAddIcon" :src="icons.add" class="right-icon" />
+          <image :src="tab.iconUrl" class="icon" />
+          <view class="name">{{ tab.name }}</view>
+        </view>
+      </view>
+    </view>
+    <view class="tips">{{ $t('长按拖动可调整顺序，可增减固定导航栏内容') }}</view>
+    <view class="un-bind-btn" @tap="toUnbind">{{ $t('解除绑定') }}</view>
+  </view>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import { QINIU_URL } from '@/common/constant'
+
+const ICONS = {
+  lock: `${QINIU_URL}FgMCTZCySvEgLYgkzU65BUR4f4Ls`,
+  edit: `${QINIU_URL}Fq3V1Zi5tKH7ibTwG1nO7N96CU8m`,
+  add: `${QINIU_URL}FqLEWbMe8DcnQtNz6GdDDD87ObZK`,
+  placeholder: `${QINIU_URL}FpKvfFNSDbx0d9RDwyGAQdFb7Kt6`
+}
+
+export default {
+  components: {
+    // draggable
+  },
+  data() {
+    const MAX_TAB_LEN = 4
+    return {
+      QINIU_URL,
+      MAX_TAB_LEN,
+      icons: ICONS,
+      isActiveEdit: false,
+      placeholderTab: {
+        name: '',
+        icon: ICONS.placeholder,
+        isLock: false,
+        isPlaceholder: true
+      },
+      activeTabs: [],
+      toBeSelectTabs: []
+    }
+  },
+  computed: {
+    realActiveTabs() {
+      return this.activeTabs.filter(tab => tab.name)
+    },
+    showAddIcon() {
+      return this.isActiveEdit && this.realActiveTabs.length < this.MAX_TAB_LEN
+    }
+  },
+  created() {
+    this.initializeTabs()
+  },
+  methods: {
+    getMovableItem(tab) {
+      return this.isActiveEdit && !tab.isLock && !tab.isPlaceholder
+    },
+    initializeTabs() {
+      const lang = v => this.$t(v)
+      this.activeTabs = [
+        { name: lang('开机'), iconUrl: `${QINIU_URL}Fp5T9lSNakoiioji6S7W4DmFQ_ys`, isLock: true },
+        { name: lang('闪灯鸣笛'), iconUrl: `${QINIU_URL}FpeQsDh2dbeTullNLI-HhWj4WAQS` },
+        { name: lang('打开座桶'), iconUrl: `${QINIU_URL}FppwhbFzrEmDeJQgZJtDTu6WOoMZ` },
+        { name: lang('打开尾箱'), iconUrl: `${QINIU_URL}Fv3KLuYWEeV5IM4_2sMbmur7yZtz` }
+      ]
+      this.toBeSelectTabs = [
+        { name: lang('胎压'), iconUrl: `${QINIU_URL}FmbcjmvoB4J3CT1hrbjNX4kxv9Zq` },
+        { name: lang('点出信息'), iconUrl: `${QINIU_URL}Fnx_4tLoq1ytvVA0UemepWisI73A` },
+        { name: lang('导航'), iconUrl: `${QINIU_URL}FrA_ouJtDp-39g7rMBI0EYr2czVE` }
+      ]
+      this.addPlaceholders()
+    },
+    toggleEdit() {
+      this.isActiveEdit = !this.isActiveEdit
+    },
+    deleteTab(tab) {
+      if (tab.isLock) return
+      const index = this.activeTabs.findIndex(t => t.name === tab.name)
+      if (index !== -1) {
+        const removedTab = this.activeTabs.splice(index, 1)[0]
+        this.toBeSelectTabs.push(removedTab)
+        this.addPlaceholders()
+      }
+    },
+    addItemTab(tab) {
+      const index = this.toBeSelectTabs.findIndex(t => t.name === tab.name)
+      if (index !== -1) {
+        const removedTab = this.toBeSelectTabs.splice(index, 1)[0]
+        const placeholderIndex = this.activeTabs.findIndex(v => v.isPlaceholder)
+        this.activeTabs.splice(placeholderIndex, 1, removedTab)
+        if (this.realActiveTabs.length > this.MAX_TAB_LEN - 1) {
+          this.isActiveEdit = false
+        }
+      }
+    },
+    addPlaceholders() {
+      while (this.activeTabs.length < this.MAX_TAB_LEN) {
+        this.activeTabs.push({ ...this.placeholderTab })
+      }
+    },
+    toUnbind() {
+      uni.navigateTo({
+        url: '/pages/carFunctionSet/unbind'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/libs/css/layout.scss";
+
+.car-function-set-more {
+  .fn-wrap {
+    width: 100%;
+    background: #FFFFFF;
+    border-radius: 40rpx;
+    margin-bottom: 20rpx;
+    padding: 40rpx 0 48rpx;
+
+    .title {
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 400;
+      font-size: 36rpx;
+      color: #060809;
+      margin-bottom: 16rpx;
+      padding-left: 40rpx;
+
+      .sort-num {
+        margin-left: 12rpx;
+        width: 36rpx;
+        font-family: Futura, Futura;
+        font-size: 30rpx;
+        color: #060809;
+      }
+    }
+
+    .tab-item-container {
+      display: flex;
+
+      &.is-to-be-select {
+        flex-wrap: wrap;
+      }
+    }
+
+    .tab-item {
+      text-align: center;
+      width: 25%;
+      position: relative;
+      margin-top: 24rpx;
+
+      .right-icon {
+        position: absolute;
+        right: 20rpx;
+        top: 0;
+        width: 40rpx;
+        height: 40rpx;
+        z-index: 9;
+      }
+
+      .icon {
+        width: 112rpx;
+        height: 112rpx;
+        margin-bottom: 20rpx;
+      }
+
+      .name {
+        font-size: 28rpx;
+        color: #060809;
+
+        &.shake {
+          animation: shake 0.2s ease-in-out infinite;
+        }
+      }
+    }
+  }
+
+  .tips {
+    font-size: 24rpx;
+    color: #060809;
+    text-align: center;
+    margin-top: 32rpx;
+  }
+
+  .un-bind-btn {
+    position: absolute;
+    bottom: 56rpx;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 93%;
+    padding: 24rpx;
+    text-align: center;
+    background: #E4E7EC;
+    border-radius: 40rpx;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: bold;
+    font-size: 32rpx;
+    color: #060809;
+
+    &:active {
+      opacity: .7;
+    }
+  }
+}
+</style>

pages/carFunctionSet/unbind.vue

@@ -0,0 +1,127 @@
+<template>
+    <view class="zx-container unbind-page">
+      <view class="zx-wrap car-info-wrap">
+        <image :src="icons.carImg" class="car-img" />
+        <view class="car-name">
+          {{ '智能电动摩托车智驾 M7' }}
+        </view>
+      </view>
+      <view class="zx-wrap input-wrap">
+        <view class="title">{{ $t('输入注册账号的密码即可解绑') }}</view>
+        <ZxInput
+          v-model="passwd"
+          :placeholder="$t('请输入密码')"
+          background="#F3F8FF"
+          is-password
+        />
+      </view>
+      <view class="tips-wrap">
+        <view class="title">{{ $t('提示信息') }}</view>
+        <view class="text">
+          <text>1、</text>
+          解绑后，您将失去当前设备的控制权，其他人可以连接绑定您的设备。
+        </view>
+        <view class="text">
+          <text>2、</text>
+          解绑后将立即删除家庭账号，感应解锁等数据。
+        </view>
+      </view>
+      <view
+        :class="[
+          'zx-form-btn', 'fix-bottom-btn',
+          passwd && 'is-submit'
+        ]"
+        @tap="unbindTap"
+      >
+        {{ $t('完成并解绑') }}
+      </view>
+      <Confirm
+        v-model="showConfirm"
+        :dialog-info="{
+          text: $t('是否确定解除绑定'),
+          showCancelButton: true
+        }"
+        @confirm="unbindSubmit"
+      />
+    </view>
+  </template>
+  
+  <script>
+  import Confirm from '@/component/comPopup/Confirm'
+  import ZxInput from '../loginRegister/components/ZxInput.vue'
+  import { QINIU_URL } from '@/common/constant'
+  
+  const ICONS = {
+    carImg: `${QINIU_URL}Fr7v719WrP6TmCfGtvJd-nAHhiCj`
+  }
+  
+  export default {
+    components: {
+      Confirm,
+      ZxInput
+    },
+    data() {
+      return {
+        icons: ICONS,
+        showConfirm: false,
+        passwd: ''
+      }
+    },
+    methods: {
+      unbindTap() {
+        if (!this.passwd) {
+          return
+        }
+        this.showConfirm = true
+      },
+      unbindSubmit() {
+        console.log('解除绑定', this.passwd)
+      }
+    }
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+  @import "@/libs/css/layout.scss";
+  .unbind-page {
+    .car-info-wrap {
+        .car-img {
+            width: 100%;
+            height: 492rpx;
+        }
+        .car-name {
+            text-align: center;
+            color: #060809;
+            font-weight: bold;
+            font-size: 34rpx;
+        }
+    }
+    .input-wrap {
+        margin: 20rpx 0 40rpx;
+        .title {
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            font-size: 36rpx;
+            color: #060809;
+            margin-bottom: 40rpx;
+        }
+    }
+    .tips-wrap {
+        padding: 0 32rpx;
+        .title {
+            font-size: 32rpx;
+            color: #060809;
+            font-weight: bold;
+            margin-bottom: 20rpx;
+        }
+        .text {
+            font-weight: 400;
+            font-size: 24rpx;
+            color: #828DA2;
+            line-height: 36rpx;
+            display: flex;
+        }
+    }
+  }
+  </style>
+  

pages/index/components/control/control.vue

@@ -17,7 +17,7 @@
 				<img class="contril-item-img" src="https://qiniu.bms16.com/FjgrfPEufqSzOxb6Aobuc_bbbtJE" alt="">
 				<text>{{$t("打开尾箱")}}</text>
 			</view>
-			<view class="contril-item flex-row">
+			<view class="contril-item flex-row" @tap="toMoreFunctionSet">
 				<img class="contril-item-img" src="https://qiniu.bms16.com/Ft3pNyStT22LP8Ds1Mru2LoTHadx" alt="">
 				<text>{{$t("更多功能")}}</text>
 			</view>
@@ -107,6 +107,11 @@ export default {
 			uni.navigateTo({
 				url:'/pages/carLocation/carLocation'
 			})
+		},
+		toMoreFunctionSet() {
+			uni.navigateTo({
+				url: '/pages/carFunctionSet/more'
+			})
 		}
 	}
 };

pages/index/index.vue

@@ -57,7 +57,7 @@
 			<view class="config-view">
 				<view class="flex-row config-car-view">
 					<view class="margin_r_20"><img class="icon_style_64" src="https://qiniu.bms16.com/Ftzyvs5whxDdMFksYChHaWKVb0Uk" alt=""></view>
-					<view class="flex-row config-text-view">
+					<view class="flex-row config-text-view" @tap="inductiveUnlockHandle">
 						<view class="flex-row font_w_600">{{$t("感应解锁")}}</view>
 						<view class="flex-row tip-text-config">{{$t("请先链接蓝牙")}}</view>
 					</view>
@@ -85,6 +85,7 @@
 		<block>
 			<!-- <UnleasedPages/> -->
 		</block>
+		<BluetoothUnlockAuth ref="bluetoothUnlockAuth" />
 		<CustomTabbar />
 	</view>
 </template>
@@ -99,7 +100,7 @@
 	import MapCard from './components/mapCard/mapCard'
 	import UnleasedPages from './components/unleasedPages/unleasedPages'
 	import CustomTabbar from '@/component/customTabbar/index';
-	
+	import BluetoothUnlockAuth from '../bluetoothUnlock/bluetoothUnlockAuth.vue'
 
 
 	export default {
@@ -125,7 +126,8 @@
 			Control,
 			MapCard,
 			CustomTabbar,
-			UnleasedPages
+			UnleasedPages,
+			BluetoothUnlockAuth
 		},
 		/**
 		 * 生命周期函数--监听页面加载
@@ -154,6 +156,9 @@
 					fail: function(res) {},
 					complete: function(res) {}
 				});
+			},
+			inductiveUnlockHandle() {
+				this.$refs.bluetoothUnlockAuth.open();
 			}
 
 		}

pages/loginRegister/changePassword.vue

@@ -2,30 +2,18 @@
     <view class="changePassword-page">
         <ZxInput
             v-model="form.oldPassword"
-            :type="passwordType"
             :placeholder="$t('请输入旧密码')"
-            :showEyeIcon="true"
-            @focus="handleFocusOrBlur('oldPassword')"
-            @blur="handleFocusOrBlur('oldPassword', false)"
-            @update:type="passwordType = $event"
+            isPassword
         />
         <ZxInput
             v-model="form.password"
-            :type="passwordType"
             :placeholder="$t('请输入新密码')"
-            :showEyeIcon="true"
-            @focus="handleFocusOrBlur('oldPassword')"
-            @blur="handleFocusOrBlur('oldPassword', false)"
-            @update:type="passwordType = $event"
+            isPassword
         />
         <ZxInput
             v-model="form.passwordAgain"
-            :type="passwordType"
             :placeholder="$t('请再次输入新密码')"
-            :showEyeIcon="true"
-            @focus="handleFocusOrBlur('oldPassword')"
-            @blur="handleFocusOrBlur('oldPassword', false)"
-            @update:type="passwordType = $event"
+            isPassword
         />
    
         <view :class="['zx-form-btn', isSubmit && 'is-submit']" style="margin-top: 64rpx;" @tap="changePassword">
@@ -40,7 +28,6 @@ import ZxInput from './components/ZxInput.vue'
 export default {
     data() {
         return {
-            passwordType: 'password',
             form: {
 
             }

pages/loginRegister/components/ZxInput.vue

@@ -1,89 +1,109 @@
 <template>
-    <view :class="['input-item', isFocus && 'is-focus', hightlight && 'hightlight']">
-      <input
-        v-model="inputValue"
-        :type="localType"
-        :placeholder="placeholder"
-        placeholder-class="input-placeholder"
-        @focus="handleFocus"
-        @blur="handleBlur"
-      >
-      <view v-if="isFocus && inputValue && !showEyeIcon" class="input-icon clear-icon" @tap="clearInput" />
+  <view
+    :class="[
+      'input-item',
+      isFocus && 'is-focus',
+      hightlight && 'hightlight'
+    ]"
+    :style="{ background }"
+  >
+    <input
+      v-model="inputValue"
+      :type="isPassword ? localType : 'text'"
+      :placeholder="placeholder"
+      placeholder-class="input-placeholder"
+      @focus="handleFocus"
+      @blur="handleBlur"
+    >
+    <view v-if="showIcon">
       <view
-        v-if="isFocus && inputValue && showEyeIcon"
-        :class="['input-icon', 'eye-icon', localType === 'text' && 'show']"
+        v-if="isPassword"
+        :class="[
+          'input-icon',
+          'eye-icon', localType === 'text' && 'show'
+        ]"
         @tap="togglePasswordType"
       />
+      <view
+        v-else
+        class="input-icon clear-icon"
+        @tap="clearInput"
+      />
     </view>
-  </template>
-  
-  <script>
-  export default {
-    props: {
-      value: {
-        type: String,
-        default: ''
-      },
-      type: {
-        type: String,
-        default: 'text'
-      },
-      inputType: {
-        type: String,
-        default: ''
-      },
-      placeholder: {
-        type: String,
-        default: ''
-      },
-      showEyeIcon: {
-        type: Boolean,
-        default: false
-      },
-      hightlight: {
-        type: Boolean,
-        default: false
-      }
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: ''
     },
-    data() {
-      return {
-        isFocus: false,
-        inputValue: this.value,
-        localType: this.type
-      };
+    inputType: {
+      type: String,
+      default: ''
     },
-    watch: {
-      inputValue(val) {
-        this.$emit('input', val);
-      },
-      type(newVal) {
-        this.localType = newVal;
-      }
+    placeholder: {
+      type: String,
+      default: ''
     },
-    methods: {
-      handleFocus() {
-        this.isFocus = true;
-        this.$emit('focus');
-      },
-      handleBlur() {
-        this.isFocus = false;
-        this.$emit('blur');
-      },
-      clearInput() {
-        this.inputValue = '';
-        this.$emit('input', '');
-      },
-      togglePasswordType() {
-        this.localType = this.localType === 'text' ? 'password' : 'text';
-        this.$emit('update:type', this.localType);
-      }
+    hightlight: {
+      type: Boolean,
+      default: false
+    },
+    isPassword: {
+      type: Boolean,
+      default: false
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  },
+  data() {
+    return {
+      isFocus: false,
+      inputValue: this.value,
+      localType: 'password'
     }
-  };
-  </script>
-  
-  <style lang="scss" scoped>
-  @import "@/libs/css/layout.scss";
-  
+  },
+  computed: {
+    showIcon() {
+      return this.isFocus && this.inputValue
+    }
+  },
+  watch: {
+    inputValue(val) {
+      this.$emit('input', val)
+    },
+    type(newVal) {
+      this.localType = newVal
+    }
+  },
+  methods: {
+    handleFocus() {
+      this.isFocus = true
+      this.$emit('focus')
+    },
+    handleBlur() {
+      this.isFocus = false
+      this.$emit('blur')
+    },
+    clearInput() {
+      this.inputValue = ''
+      this.$emit('input', '')
+    },
+    togglePasswordType() {
+      this.localType = this.localType === 'text' ? 'password' : 'text'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/libs/css/layout.scss";
+
 .input-item {
   position: relative;
   width: 100%;
@@ -91,7 +111,7 @@
   background: #FFFFFF;
   border-radius: 24rpx;
   margin-bottom: 32rpx;
-  padding: 0 32rpx;
+  padding: 0 74rpx 0 32rpx;
   box-sizing: border-box;
   border: 4rpx solid transparent;
   input {
@@ -136,5 +156,4 @@
       }
   }
 }
-
-  </style>
+</style>

pages/loginRegister/forgetPassword.vue

@@ -3,8 +3,6 @@
         <zx-input
             v-model="email"
             :placeholder="$t('请输入要重置的邮箱账号')"
-            @focus="handleFocusOrBlur(true)"
-            @blur="handleFocusOrBlur( false)"
         />
         <view :class="['zx-form-btn', email && 'is-submit']" style="margin-top: 48rpx;"  @tap="resetHandle">
             {{ $t('重置密码') }}
@@ -33,7 +31,6 @@ export default {
     data() {
         return {
             isSendSucceed: false,
-            emailFocus: false,
             email: ''
         }
     },
@@ -43,9 +40,6 @@ export default {
         }
     },
     methods: {
-        handleFocusOrBlur(show) {
-            this.emailFocus = show
-        },
         resetHandle() {
             if (!emailRegex.test(this.email)) {
                 uni.showToast({ title: this.$t('请输入有效的邮箱地址'), icon: 'none' })

pages/loginRegister/login.vue

@@ -9,17 +9,11 @@
             v-model="form.email"
             :hightlight="checkShakeObj.email"
             :placeholder="$t('请输入邮箱账号')"
-            @focus="handleFocusOrBlur('email')"
-            @blur="handleFocusOrBlur('email', false)"
         />
         <ZxInput
             v-model="form.passwd"
-            :type="passwordType"
             :placeholder="$t('请输入密码')"
-            :showEyeIcon="true"
-            @focus="handleFocusOrBlur('password')"
-            @blur="handleFocusOrBlur('password', false)"
-            @update:type="passwordType = $event"
+            isPassword
         />
         <view 
           :class="['agreement-row', checkShakeObj.agreemen && 'shake']" 
@@ -67,9 +61,6 @@
     data() {
       return {
         QINIU_URL,
-        passwordType: 'password',
-        emailFocus: false,
-        passwordFocus: false,
         isCheckAgreement: false,
         checkShakeObj: {
           email: false,
@@ -91,15 +82,9 @@
       }
     },
     methods: {
-      handleFocusOrBlur(val, flag = true) {
-        this[`${val}Focus`] = flag
-      },
       clearInput(val) {
         this.$set(this.form, val, '')
       },
-      eyeTypeChange() {
-        this.passwordType = this.passwordType === 'text' ? 'password' : 'text';
-      },
       routerLink(url) {
         uni.navigateTo({ url })
       },

pages/loginRegister/register.vue

@@ -3,26 +3,16 @@
         <ZxInput
             v-model="form.email"
             :placeholder="$t('请输入邮箱账号')"
-            @focus="handleFocusOrBlur('email')"
-            @blur="handleFocusOrBlur('email', false)"
         />
         <ZxInput
             v-model="form.passwd"
-            :type="passwordType"
             :placeholder="$t('请输入密码')"
-            :showEyeIcon="true"
-            @focus="handleFocusOrBlur('password')"
-            @blur="handleFocusOrBlur('password', false)"
-            @update:type="passwordType = $event"
+            isPassword
         />
         <ZxInput
             v-model="form.second_passwd"
-            :type="passwordType"
             :placeholder="$t('请再次输入密码')"
-            :showEyeIcon="true"
-            @focus="handleFocusOrBlur('second_passwd')"
-            @blur="handleFocusOrBlur('second_passwd', false)"
-            @update:type="passwordType = $event"
+            isPassword
         />
         <view 
           :class="['agreement-row', checkShakeObj.agreemen && 'shake']" 
@@ -59,17 +49,11 @@ export default {
     data() {
         return {
             isCheckAgreement: false,
-            passwordType: 'password',
             isSendSucceed: false,
             form: {},
             emailFocus: false,
             checkShakeObj: {
                 agreemen: false
-            },
-            focusInput: {
-                email: false,
-                passwd: false,
-                second_passwd: false
             }
         }
     },
@@ -82,17 +66,11 @@ export default {
         }
     },
     methods: {
-        eyeTypeChange() {
-            this.passwordType = this.passwordType === 'text' ? 'password' : 'text';
-        },
         handleAgreementLink(id) {
             uni.navigateTo({
                 url: `/pages/contract/contract?contract_id=${id}`
             })
         },
-        handleFocusOrBlur(val, flag = true) {
-            this.focusInput[val] = flag
-        },
         _applyCheck(field, message) {
             this.checkShakeObj[field] = true;
             setTimeout(() => {

pages/message/deviceInfo.vue

@@ -1,5 +1,5 @@
 <template>
-    <view class="deviceInfo-container">
+    <view class="zx-container deviceInfo-container">
         <view v-for="(item, index) in msgList" :key="index" class="list-item">
             <view class="time">{{ item.time }}</view>
             <view class="msg-wrap">
@@ -44,9 +44,6 @@ export default {
 <style lang="scss" scoped>
 @import "@/libs/css/layout.scss";
 .deviceInfo-container {
-    width: 100%;
-    min-height: 100vh;
-    background: $baseBgColor;
     padding: 24rpx 24rpx 150rpx;
     .list-item {
         width: 100%;

pages/message/index.vue

@@ -93,7 +93,7 @@ export default {
     }
 
     .device-msg-wrap {
-        margin: 60rpx 0 24rpx;
+        margin: 24rpx 0;
 
         .row {
             margin-bottom: 40rpx;
@@ -185,6 +185,9 @@ export default {
         .msg-item {
             padding: 40rpx 0;
             border-bottom: 1px solid #F1F4F5;
+            &:last-child {
+                border-bottom: none;
+            }
 
             .msg {
                 font-family: PingFangSC, PingFang SC;

pages/my/my.scss

@@ -1,10 +1,8 @@
+
+@import "@/libs/css/layout.scss";
 .container-view {
-    min-height: 100vh;
     padding: 36rpx 32rpx 264rpx;
     box-sizing: border-box;
-    background: linear-gradient(180deg, #CFD1DE 0%, #F1F3F4 100%), #F1F3F4;
-    background-size: 100% 528rpx;
-    background-repeat: no-repeat;
 
     .user-switch-row {
         display: flex;

pages/my/my.vue

@@ -1,106 +1,128 @@
 <template>
-    <view class="container-view">
-        <view class="user-switch-row">
-            <!-- <view class="name-wrap">{{ userInfo.name }}</view> -->
-            <image class="message" @tap="routerLink({ url: '/pages/message/index' })"
-                :src="QINIU_URL + 'FlL5BtEdMES2-mntjR9D3CX_LWYv'" />
+    <view class="container-view zx-page-linear">
+      <view class="user-switch-row">
+        <image
+          :src="QINIU_URL + 'FlL5BtEdMES2-mntjR9D3CX_LWYv'"
+          class="message"
+          @tap="routerLink({ url: '/pages/message/index' })"
+        />
+      </view>
+      <view class="user-info-wrap" @tap="loginHandle">
+        <image :src="userInfo.headimg || defaultAvatarUrl" class="head-img" />
+        <view class="user-name">{{ userInfo.nickname || '请点击登录' }}</view>
+        <view
+          v-if="userInfo.user_name"
+          class="e-mail"
+        >
+          {{ userInfo.user_name }}
         </view>
-        <view class="user-info-wrap" @tap="loginHandle">
-            <image class="head-img" :src="userInfo.headimg || defaultAvatarUrl" />
-            <view class="user-name">{{ userInfo.nickname || '请点击登录' }}</view>
-            <view class="e-mail" v-if="userInfo.user_name">{{ userInfo.user_name }}</view>
+      </view>
+      <view class="common-tabs">
+        <view
+          v-for="(item, index) in commonTabs"
+          :key="index"
+          class="item"
+          @click="routerLink(item)"
+        >
+          <image :src="QINIU_URL + item.icon" class="icon" />
+          <view class="name">{{ item.name }}</view>
         </view>
-        <view class="common-tabs">
-            <view class="item" v-for="(item, index) in commonTabs" :key="index" @click="routerLink(item)">
-                <image :src="QINIU_URL + item.icon" class="icon" />
-                <view class="name">{{ item.name }}</view>
-            </view>
+      </view>
+      <view class="tabs-wrap">
+        <view
+          v-for="(item, index) in baseTabs"
+          :key="index"
+          class="tab-item"
+          @click="routerLink(item)"
+        >
+          <image :src="QINIU_URL + item.icon" class="icon" />
+          <view class="name">{{ item.name }}</view>
         </view>
-        <view class="tabs-wrap">
-            <view class="tab-item" v-for="(item, index) in baseTabs" :key="index" @click="routerLink(item)">
-                <image :src="QINIU_URL + item.icon" class="icon" />
-                <view class="name">{{ item.name }}</view>
-            </view>
-        </view>
-        <Confirm v-model="comboDialoginfo.showConfirm" :dialogInfo="comboDialoginfo" @confirm="dialogConfirm" />
-        <CustomTabbar curtTab="my" />
+      </view>
+      <Confirm
+        v-model="comboDialoginfo.showConfirm"
+        :dialog-info="comboDialoginfo"
+        @confirm="dialogConfirm"
+      />
+      <CustomTabbar curt-tab="my" />
     </view>
-</template>
-
-<script>
-const storage = require('@/common/storage.js');
-import Confirm from '@/component/comPopup/Confirm'
-import { QINIU_URL, defaultHeadImg } from '@/common/constant'
-import CustomTabbar from '@/component/customTabbar/index';
-export default {
+  </template>
+  
+  <script>
+  const storage = require('@/common/storage.js')
+  import Confirm from '@/component/comPopup/Confirm'
+  import { QINIU_URL, defaultHeadImg } from '@/common/constant'
+  import CustomTabbar from '@/component/customTabbar/index'
+  export default {
     components: {
-        Confirm,
-        CustomTabbar
+      Confirm,
+      CustomTabbar
     },
     data() {
-        return {
-            QINIU_URL,
-            defaultAvatarUrl: defaultHeadImg,
-            comboDialoginfo: {
-                showConfirm: false,
-                title: '温馨提示',
-                opType: 'combo',
-                text: '您还未购买换电套餐，是否前往进行换电套餐？',
-                confirmBtnText: '前往购买',
-                showCancelButton: false
-            },
-            userInfo: {}
-        }
+      return {
+        QINIU_URL,
+        defaultAvatarUrl: defaultHeadImg,
+        comboDialoginfo: {
+          showConfirm: false,
+          title: '温馨提示',
+          opType: 'combo',
+          text: '您还未购买换电套餐，是否前往进行换电套餐？',
+          confirmBtnText: '前往购买',
+          showCancelButton: false
+        },
+        userInfo: {}
+      }
     },
     computed: {
-        commonTabs() {
-            return [
-                { name: `${this.$t('我的车辆')}`, url: '', icon: 'Fp6G-Kzb-YUGkP2WR-kjTlIbbTj1' },
-                { name: `${this.$t('用车人')}`, url: '', icon: 'FnxGW52BCkTkK9HxsTdVrghU7B4D' },
-                { name: `${this.$t('换电套餐')}`, jumpCheck: 'combo', url: '', icon: 'FsOsd1SxYDHDm00aiwrTib_k0Mbr' },
-            ]
-        },
-        baseTabs() {
-            const lang = t => this.$t(t)
-            return [
-                { name: `${lang('我的订单')}`, url: '/pages/order/order', icon: 'FkLJGLo1faYtJWhW4Q0gt5dphI7g' },
-                { name: `${lang('换电记录')}`, url: '', icon: 'FnSjwcN7Mcpa-WA7Cqx2cGTvX2V1' },
-                { name: `${lang('关于我们')}`, url: '/pages/bluetoothUnlock/unlockSet', icon: 'Fmin1_DG6ZkENCdsI1qJZJpDNkhQ' },
-                { name: `${lang('客服中心')}`, url: '/pages/bluetoothUnlock/bluetoothPair', icon: 'FhA9TUbTMF0e7ma6NZXqPrkscN6l' },
-                { name: `${lang('设置')}`, url: '/pages/my/set', icon: 'Fu3f2iRi5BspRfbVLPcw8ryWc4lu' },
-            ]
-        }
+      commonTabs() {
+        return [
+          { name: `${this.$t('我的车辆')}`, url: '', icon: 'Fp6G-Kzb-YUGkP2WR-kjTlIbbTj1' },
+          { name: `${this.$t('用车人')}`, url: '', icon: 'FnxGW52BCkTkK9HxsTdVrghU7B4D' },
+          { name: `${this.$t('换电套餐')}`, jumpCheck: 'combo', url: '', icon: 'FsOsd1SxYDHDm00aiwrTib_k0Mbr' }
+        ]
+      },
+      baseTabs() {
+        const lang = t => this.$t(t)
+        return [
+          { name: `${lang('我的订单')}`, url: '/pages/order/order', icon: 'FkLJGLo1faYtJWhW4Q0gt5dphI7g' },
+          { name: `${lang('换电记录')}`, url: '', icon: 'FnSjwcN7Mcpa-WA7Cqx2cGTvX2V1' },
+        //   { name: `${lang('关于我们')}`, url: '/pages/bluetoothUnlock/unlockSet', icon: 'Fmin1_DG6ZkENCdsI1qJZJpDNkhQ' },
+          { name: `${lang('客服中心')}`, url: '/pages/bluetoothUnlock/bluetoothPair', icon: 'FhA9TUbTMF0e7ma6NZXqPrkscN6l' },
+          { name: `${lang('设置')}`, url: '/pages/my/set', icon: 'Fu3f2iRi5BspRfbVLPcw8ryWc4lu' }
+        ]
+      }
     },
     onShow() {
-        const user_token = storage.getUserToken()
-        user_token && this.loadUserInfo()
+      const user_token = storage.getUserToken()
+      user_token && this.loadUserInfo()
     },
     methods: {
-        loadUserInfo() {
-            const userInfo = storage.getUserInfoData()
-            console.log('userInfo', userInfo)
-            this.setData({ userInfo })
-        },
-        loginHandle() {
-            uni.navigateTo({ url: '/pages/loginRegister/login' })
-        },
-        checkHandle_combo() {
-            this.comboDialoginfo.showConfirm = true
-        },
-        dialogConfirm(type) {
-            console.log('dialogConfirm', type)
-        },
-        routerLink({ url, jumpCheck }) {
-            if (jumpCheck) {
-                this[`checkHandle_${jumpCheck}`]()
-                return
-            }
-            uni.navigateTo({ url })
+      loadUserInfo() {
+        const userInfo = storage.getUserInfoData()
+        console.log('userInfo', userInfo)
+        this.setData({ userInfo })
+      },
+      loginHandle() {
+        uni.navigateTo({ url: '/pages/loginRegister/login' })
+      },
+      checkHandle_combo() {
+        this.comboDialoginfo.showConfirm = true
+      },
+      dialogConfirm(type) {
+        console.log('dialogConfirm', type)
+      },
+      routerLink({ url, jumpCheck }) {
+        if (jumpCheck) {
+          this[`checkHandle_${jumpCheck}`]()
+          return
         }
+        uni.navigateTo({ url })
+      }
     }
-}
-</script>
-
-<style lang="scss" scoped>
-@import './my.scss';
-</style>
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+  @import './my.scss';
+  </style>
+  

pages/my/set.vue

@@ -1,113 +1,115 @@
 <template>
-    <view class="set-page base-bg-wrap">
-        <image class="head-img" :src="userInfo.headImg || defaultHeadImg" />
-        <view class="list-wrap">
-            <view class="item" v-for="(item, index) in list" :key="index" @tap="routerLink(item.url)">
-                <view class="title">{{ item.title }}</view>
-                <view :class="['text-right', item.hideArrow && 'hide-arrow']">
-                    {{ userInfo[item.textProp] || '' }}
-                </view>
-            </view>
+    <view class="set-page zx-container">
+      <image :src="userInfo.headImg || defaultHeadImg" class="head-img" />
+      <view class="list-wrap">
+        <view
+          v-for="(item, index) in list"
+          :key="index"
+          class="item"
+          @tap="routerLink(item.url)"
+        >
+          <view class="title">{{ item.title }}</view>
+          <view :class="['text-right', item.hideArrow && 'hide-arrow']">
+            {{ userInfo[item.textProp] || '' }}
+          </view>
         </view>
-        <view class="logout-btn" @tap="handleQuit">退出登录</view>
+      </view>
+      <view class="zx-form-btn fix-bottom-btn logout-btn" @tap="handleQuit">退出登录</view>
     </view>
-</template>
-
-<script>
-const storage = require('@/common/storage.js');
-import { QINIU_URL, defaultHeadImg } from '@/common/constant'
-export default {
+  </template>
+  
+  <script>
+  const storage = require('@/common/storage.js')
+  import { QINIU_URL, defaultHeadImg } from '@/common/constant'
+  export default {
     data() {
-        return {
-            QINIU_URL,
-            defaultHeadImg,
-            userInfo: {},
-            list: [
-                { title: '昵称', url: '', textProp: 'nickname' },
-                { title: '注册时间', textProp: 'registrationTime', hideArrow: true },
-                { title: '修改密码', url: '/pages/loginRegister/changePassword' },
-                { title: '关于我们', url: '/pages/aboutMy/aboutMy', textProp: 'version' },
-                { title: '隐私协议', url: '/pages/contract/contract?contract_id=270' },
-                { title: '用户条款', url: '/pages/contract/contract?contract_id=102' },
-            ]
-        }
+      return {
+        QINIU_URL,
+        defaultHeadImg,
+        userInfo: {},
+        list: [
+          { title: '昵称', url: '', textProp: 'nickname' },
+          { title: '注册时间', textProp: 'registrationTime', hideArrow: true },
+          { title: '修改密码', url: '/pages/loginRegister/changePassword' },
+          { title: '关于我们', url: '/pages/aboutMy/aboutMy', textProp: 'version' },
+          { title: '隐私协议', url: '/pages/contract/contract?contract_id=270' },
+          { title: '用户条款', url: '/pages/contract/contract?contract_id=102' }
+        ]
+      }
     },
     onShow() {
-        const user_token = storage.getUserToken()
-        user_token && this.loadUserInfo()
+      const user_token = storage.getUserToken()
+      user_token && this.loadUserInfo()
     },
     methods: {
-        loadUserInfo() {
-            const userInfo = storage.getUserInfoData()
-            console.log('userInfo', userInfo)
-            this.setData({ userInfo })
-        },
-        routerLink(url) {
-            uni.navigateTo({ url })
-        },
-        handleQuit() {
-            uni.showModal({
-                title: '提示',
-                content: '您确定要退出当前账号吗？',
-                showCancel: true,
-                cancelText: '取消',
-                confirmText: '确定',
-                success: function (res) {
-                    if (res.confirm) {
-                        storage.clearStorage()
-                        uni.reLaunch({
-                            url: '/pages/index/index',
-                        })
-                    }
-                }
-            })
-        }
+      loadUserInfo() {
+        const userInfo = storage.getUserInfoData()
+        console.log('userInfo', userInfo)
+        this.setData({ userInfo })
+      },
+      routerLink(url) {
+        uni.navigateTo({ url })
+      },
+      handleQuit() {
+        uni.showModal({
+          title: '提示',
+          content: '您确定要退出当前账号吗？',
+          showCancel: true,
+          cancelText: '取消',
+          confirmText: '确定',
+          success: function(res) {
+            if (res.confirm) {
+              storage.clearStorage()
+              uni.reLaunch({
+                url: '/pages/index/index'
+              })
+            }
+          }
+        })
+      }
     }
-}
-</script>
-
-<style lang="scss">
-@import "@/libs/css/layout.scss";
-
-.set-page {
+  }
+  </script>
+  
+  <style lang="scss">
+  @import "@/libs/css/layout.scss";
+  
+  .set-page {
     display: flex;
     flex-direction: column;
     align-items: center;
-    background: $baseBgColor;
-    width: 100%;
-    min-height: 100vh;
     padding: 66rpx 32rpx 48rpx;
-
+  
     .head-img {
         width: 174rpx;
         height: 174rpx;
         margin: 0 auto 40rpx;
         border-radius: 50%;
     }
-
+  
     .list-wrap {
         width: 100%;
         background: #FFFFFF;
         border-radius: 40rpx;
         padding: 8rpx 32rpx;
-
+  
         .item {
             padding: 40rpx 0;
             display: flex;
             justify-content: space-between;
             border-bottom: 2px solid #F1F4F5;
-
+  
             &:last-child {
                 border-bottom: 0;
             }
-
+  
             .title {
                 font-family: PingFangSC, PingFang SC;
                 font-weight: bold;
                 font-size: 32rpx;
                 color: #060809;
             }
-
+  
             .text-right {
                 font-family: Futura, Futura;
                 font-weight: 500;
@@ -115,7 +117,7 @@ export default {
                 color: #060809;
                 display: flex;
                 align-items: center;
-
+  
                 &::after {
                     content: "";
                     width: 28rpx;
@@ -124,7 +126,7 @@ export default {
                     background: url('https://qiniu.bms16.com/FtGhNkwKlhR7hOZsaj0gmRl9KjPx');
                     background-size: 100%;
                 }
-
+  
                 &.hide-arrow {
                     &::after {
                         display: none;
@@ -133,24 +135,11 @@ export default {
             }
         }
     }
-
+  
     .logout-btn {
-        width: 100%;
-        height: 80rpx;
-        margin-top: 100rpx;
-        background: #E4E7EC;
-        border-radius: 40rpx;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-family: PingFangSC, PingFang SC;
-        font-weight: 500;
-        font-size: 32rpx;
         color: #FA2918;
-
-        &:active {
-            opacity: .7;
-        }
+        background: #E4E7EC;
     }
-}
-</style>
+  }
+  </style>
+