静态页面

src/components/common/MainPageContainer/index.vue

@@ -155,6 +155,8 @@ export default {
         } else {
           this.$router.push({ name: 'SignIn' })
         }
+      } else {
+        this.$emit('UserInfoChange')
       }
     }
   }

src/pages/WoDe/AnQuanZhongXin/BangDingShouJi/index.vue

@@ -7,7 +7,7 @@
             <i class="iconfont iconshouji"></i>
             <div class="flex-item">
               <div>
-                <input type="number" placeholder="请输入您的手机号码">
+                <input type="number" placeholder="请输入您的手机号码" v-model="Phone">
               </div>
             </div>
           </li>
@@ -15,15 +15,15 @@
             <i class="iconfont iconmima"></i>
             <div class="flex-item">
               <div>
-                <input type="number" placeholder="请输入验证码">
+                <input type="number" placeholder="请输入验证码" v-model="Code">
               </div>
             </div>
-            <a>获取验证码</a>
-            <span>59s后重新获取</span>
+            <a v-if="TimeNum === 60" @click="GetCode">获取验证码</a>
+            <span v-else>{{TimeNum > 9 ? TimeNum : `0${TimeNum}`}}s后重新获取</span>
           </li>
         </ul>
         <div class="Btn">
-          <a>立即绑定</a>
+          <a @click="BindPhone">立即绑定</a>
         </div>
       </div>
     </MainPageContainer>
@@ -32,13 +32,23 @@
 
 <script>
 import MainPageContainer from '../../../../components/common/MainPageContainer'
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: '',
   data () {
     return {
+      Phone: '',
+      Code: '',
+      DataLock: false,
+      Timer: null,
+      TimeNum: 60
     }
   },
   computed: {
+    ...mapUserState({
+      UserInfo: x => x.UserInfo
+    })
   },
   components: {
     MainPageContainer
@@ -50,6 +60,52 @@ export default {
     })
   },
   methods: {
+    ...mapUserMutations([
+      'EditUserInfo'
+    ]),
+    ...mapUserActions([
+      'GetRegPhoneCode',
+      'UpdateUserInfo',
+      'CheckRegPhoneCode'
+    ]),
+    BindPhone () { // 绑定手机
+      if (this.DataLock) return
+      this.DataLock = true
+      this.CheckRegPhoneCode({ urlData: { phone: this.Phone }, queryData: { captcha: this.Code } }).then((res) => {
+        this.UpdateUserInfo({ urlData: { id: this.UserInfo.customerId }, data: { phone: this.Phone } }).then(() => {
+          this.Toast('手机绑定成功')
+          this.EditUserInfo({ name: 'phone', value: this.Phone })
+          this.DataLock = false
+          this.$router.go(-1)
+        })
+      })
+    },
+    GetCode () { // 获取手机验证码
+      if (this.DataLock || this.TimeNum !== 60 || !this.IsPhone(this.Phone)) return
+      this.DataLock = false
+      window.clearInterval(this.Timer)
+      this.GetRegPhoneCode({ urlData: { phone: this.Phone } }).then(() => {
+        this.DataLock = false
+        if (this.TimeNum === 60) {
+          this.TimeNum -= 1
+        }
+        this.Timer = window.setInterval(() => {
+          if (this.TimeNum) {
+            this.TimeNum -= 1
+          } else {
+            window.clearInterval(this.Timer)
+            this.TimeNum = 60
+          }
+        }, 1000)
+      }).catch((res) => {
+        this.Toast(res.data.message)
+        this.DataLock = false
+      })
+    },
+    IsPhone (str) { // 校验手机号
+      let myreg = /^[1][3,4,5,7,8][0-9]{9}$/
+      return !!myreg.test(str)
+    }
   }
 }
 </script>

src/pages/WoDe/AnQuanZhongXin/SubIndex/index.vue

@@ -2,8 +2,8 @@
   <div class="Page">
     <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="安全中心">
       <div class="PageContainer">
-        <ul>
-          <router-link tag="li" :to="{ name: 'YaoQingZhuCe' }" class="flex-h">
+        <ul v-if="UserInfo !== null">
+          <!-- <router-link tag="li" :to="{ name: 'YaoQingZhuCe' }" class="flex-h">
             <span class="flex-item">邀请注册</span>
             <i class="iconfont iconjiantouright"></i>
           </router-link>
@@ -12,7 +12,7 @@
             <i class="iconfont iconjinggao"></i>
             <span>未绑定</span>
             <i class="iconfont iconjiantouright"></i>
-          </li>
+          </li> -->
           <li class="flex-h">
             <span class="flex-item">绑定支付宝</span>
             <i class="iconfont iconjinggao"></i>
@@ -21,8 +21,8 @@
           </li>
           <router-link tag="li" :to="{ name: 'BangDingShouJi' }" class="flex-h">
             <span class="flex-item">绑定手机号</span>
-            <i class="iconfont iconjinggao"></i>
-            <span>未绑定</span>
+            <i class="iconfont iconjinggao" v-if="UserInfo.phone === '' || UserInfo.phone === null"></i>
+            <span>{{UserInfo.phone || '未绑定'}}</span>
             <i class="iconfont iconjiantouright"></i>
           </router-link>
         </ul>
@@ -33,7 +33,8 @@
 
 <script>
 import MainPageContainer from '../../../../components/common/MainPageContainer'
-import { mapMutations } from 'vuex'
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: mapUserState } = createNamespacedHelpers('user')
 export default {
   name: '',
   data () {
@@ -41,25 +42,20 @@ export default {
     }
   },
   computed: {
+    ...mapUserState({
+      UserInfo: x => x.UserInfo
+    })
   },
   components: {
     MainPageContainer
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '安全中心' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
   },
   mounted () {
     this.$nextTick(() => {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ])
   }
 }
 </script>

src/pages/WoDe/GeRenSheZhi/ZhangHuSheZhi/EditUserNick/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="Page">
-    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="设置昵称">
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="设置昵称" @UserInfoChange="Init">
       <div class="PageContainer">
         <div class="Form">
-          <input type="text" placeholder="请输入2~12个字符">
+          <input type="text" placeholder="请输入2~12个字符" v-model="Name" @input="Name = Name.substring(0, 12)">
         </div>
         <span>填写成功后不可更改</span>
         <div class="Btn">
-          <a>确认</a>
+          <a @click="EditName">确认</a>
         </div>
       </div>
     </MainPageContainer>
@@ -16,13 +16,19 @@
 
 <script>
 import MainPageContainer from '../../../../../components/common/MainPageContainer'
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: '',
   data () {
     return {
+      Name: ''
     }
   },
   computed: {
+    ...mapUserState({
+      UserInfo: x => x.UserInfo
+    })
   },
   components: {
     MainPageContainer
@@ -34,6 +40,23 @@ export default {
     })
   },
   methods: {
+    ...mapUserMutations([
+      'EditUserInfo'
+    ]),
+    ...mapUserActions([
+      'UpdateUserInfo'
+    ]),
+    Init () {
+      this.Name = this.UserInfo.name
+    },
+    EditName () {
+      if (this.Name !== '') {
+        this.UpdateUserInfo({ urlData: { id: this.UserInfo.customerId }, data: { name: this.Name } }).then(() => {
+          this.Toast('昵称更新成功')
+          this.EditUserInfo({ name: 'name', value: this.Name })
+        })
+      }
+    }
   }
 }
 </script>

src/pages/WoDe/GeRenSheZhi/ZhangHuSheZhi/UserInfo/index.vue

@@ -2,17 +2,18 @@
   <div class="Page">
     <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="账户设置">
       <div class="PageContainer">
-        <ul>
-          <li class="flex-h">
+        <ul v-if="UserInfo !== null">
+          <li class="flex-h" @click="$refs.IconFile.click()">
             <span class="flex-item">头像</span>
             <div class="Icon">
-              <img src="" class="centerLabel cover" alt="">
+              <img :src="UserInfo.avatar" class="centerLabel cover" alt="">
             </div>
             <i class="iconfont iconjiantouright"></i>
+            <input type="file" ref="IconFile" @change="IconFileChange" style="display: none">
           </li>
           <router-link tag="li" class="flex-h" :to="{name: 'EditUserNick'}">
             <span class="flex-item">昵称</span>
-            <span>未设置</span>
+            <span>{{UserInfo.name || '未设置'}}</span>
             <i class="iconfont iconjiantouright"></i>
           </router-link>
         </ul>
@@ -23,6 +24,8 @@
 
 <script>
 import MainPageContainer from '../../../../../components/common/MainPageContainer'
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: '',
   data () {
@@ -30,6 +33,9 @@ export default {
     }
   },
   computed: {
+    ...mapUserState({
+      UserInfo: x => x.UserInfo
+    })
   },
   components: {
     MainPageContainer
@@ -41,6 +47,24 @@ export default {
     })
   },
   methods: {
+    ...mapUserMutations([
+      'EditUserInfo'
+    ]),
+    ...mapUserActions([
+      'ImgUpload',
+      'UpdateUserInfo'
+    ]),
+    IconFileChange (e) {
+      let aFormData = new FormData()
+      aFormData.append('file', e.target.files[0])
+      this.ImgUpload({ urlData: { plat: 'app' }, data: aFormData, headers: { 'Content-Type': 'multipart/form-data' } }).then((res) => {
+        this.$refs.IconFile.value = ''
+        this.UpdateUserInfo({ urlData: { id: this.UserInfo.customerId }, data: { avatar: res.data.data } }).then(() => {
+          this.Toast('头像更新成功')
+          this.EditUserInfo({ name: 'avatar', value: res.data.data })
+        })
+      })
+    }
   }
 }
 </script>

src/store/user/index.js

@@ -42,6 +42,9 @@ export default {
     EmptyUserInfo (state) { // 清空用户信息
       state.UserInfo = null
     },
+    EditUserInfo (state, data) { // 编辑用户信息
+      state.UserInfo[data.name] = data.value
+    },
     AddDaLeTouCart (state, data) { // 新增大乐透购物车
       state.DaLeTouCart.push(data)
     },
@@ -111,6 +114,16 @@ export default {
     }
   },
   actions: {
+    ImgUpload (context, payload) { // 上传图片
+      return new Promise((resolve, reject) => {
+        ToolClass.Axios(resolve, reject, Api.ImgUpload, context, payload, 1000)
+      })
+    },
+    UpdateUserInfo (context, payload) { // 更新用户信息
+      return new Promise((resolve, reject) => {
+        ToolClass.Axios(resolve, reject, Api.UpdateUserInfo, context, payload, 1000)
+      })
+    },
     CheckRegPhoneCode (context, payload) { // 校验注册手机验证码
       return new Promise((resolve, reject) => {
         ToolClass.Axios(resolve, reject, Api.CheckRegPhoneCode, context, payload, 1000)

src/util/Api.js

@@ -65,6 +65,14 @@ const $api = {
   GetMixData: { // 获取混合比赛数据
     method: 'get',
     url: `${prefix}/app/sport/mix-match`
+  },
+  ImgUpload: { // 图片上传
+    method: 'post',
+    url: `${prefix}/:plat/image`
+  },
+  UpdateUserInfo: { // 更新用户信息
+    method: 'put',
+    url: `${prefix}/app/customer/:id`
   }
 }
 

src/util/PublicMethod.js

@@ -78,12 +78,18 @@ const ToolClass = {
     if (window.localStorage.Jwt !== undefined && window.localStorage.JwtTime !== undefined && window.localStorage.JwtTime + 24 * 60 * 60 * 1000 >= Date.now()) { // 本地获取token
       Header['x-authorization-jwt'] = window.localStorage.Jwt
     }
-    Axios({
+    if (payload.headers !== undefined) {
+      for (let key in payload.headers) {
+        Header[key] = payload.headers[key]
+      }
+    }
+    let aParams = {
       method: target.method,
       url: Url,
-      data: { ...Data },
+      data: Data,
       headers: { ...Header }
-    }).then(res => {
+    }
+    Axios({ ...aParams }).then(res => {
       const token = res.headers['x-authorization-jwt']
       if (token) { // 更新本地存储token
         window.localStorage.Jwt = token