静态页面

package-lock.json

       "dependencies": {
         "regenerator-runtime": {
           "version": "0.10.5",
-          "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.10.5.tgz?cache=0&sync_timestamp=1595456095182&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fregenerator-runtime%2Fdownload%2Fregenerator-runtime-0.10.5.tgz",
+          "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.10.5.tgz",
           "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg="
         }
       }
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },

src/pages/WoDe/EditMiMa/index.vue

+<template>
+  <div class="Page">
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="修改密码" @UserInfoChange="Init">
+      <div class="PageContainer">
+        <div class="Form">
+          <input type="password" placeholder="请输入原始密码" v-model="LoginPassword" @input="LoginPassword = LoginPassword.substring(0, 12)">
+        </div>
+        <div class="Form">
+          <input type="password" placeholder="请输入新密码" v-model="NewPassword" @input="NewPassword = NewPassword.substring(0, 12)">
+        </div>
+        <div class="Form">
+          <input type="password" placeholder="请确认您的密码" v-model="PasswordAgain" @input="PasswordAgain = PasswordAgain.substring(0, 12)">
+        </div>
+        <div class="Btn">
+          <a @click="EditMiMa">确认</a>
+        </div>
+      </div>
+    </MainPageContainer>
+  </div>
+</template>
+
+<script>
+import md5 from 'js-md5'
+import MainPageContainer from '../../../components/common/MainPageContainer'
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: mapUserState, mapActions: mapUserActions } = createNamespacedHelpers('user')
+export default {
+  name: '',
+  data () {
+    return {
+      LoginPassword: '',
+      NewPassword: '',
+      PasswordAgain: '',
+      DataLock: false
+    }
+  },
+  computed: {
+    ...mapUserState({
+      UserInfo: x => x.UserInfo
+    })
+  },
+  components: {
+    MainPageContainer
+  },
+  created () {
+  },
+  mounted () {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+    ...mapUserActions([
+      'EditPassword'
+    ]),
+    Init () {
+    },
+    EditMiMa () {
+      if (this.DataLock || this.NewPassword === '' || this.PasswordAgain === '' || (this.UserInfo.cashPass !== null && this.LoginPassword === '')) return
+      this.DataLock = true
+      if (this.LoginPassword === '') {
+        this.Toast('原始密码不能为空')
+        this.DataLock = false
+        return false
+      }
+      if (this.NewPassword !== this.PasswordAgain) {
+        this.Toast('新密码与确认密码不一致')
+        this.DataLock = false
+        return false
+      }
+      this.EditPassword({ data: { newPassword: md5(this.NewPassword), originPassword: md5(this.LoginPassword) } }).then(() => {
+        this.Toast('修改密码成功')
+        this.DataLock = false
+        window.localStorage.niucaiadminname = null
+        window.localStorage.niucaiadminpassword = null
+        window.setTimeout(() => {
+          this.$router.push({ name: 'SignIn' })
+        }, 1000)
+      }).catch((res) => {
+        this.Toast(res.data.message)
+        this.DataLock = false
+      })
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/pages/WoDe/EditMiMa/page.scss

+.Page {
+  background: #f2f2f2;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  .PageContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    > .Form {
+      padding: 0.15rem;
+      background: #fff;
+      > input {
+        display: block;
+        font-size: 0.14rem;
+        line-height: 0.2rem;
+        width: 100%;
+      }
+    }
+    > span {
+      display: block;
+      font-size: 0.12rem;
+      color: #adadad;
+      line-height: 0.2rem;
+      margin-top: 0.05rem;
+      text-indent: 0.15rem;
+    }
+    > .Btn {
+      padding: 0 0.15rem;
+      margin-top: 0.5rem;
+      > a {
+        display: block;
+        text-align: center;
+        font-size: 0.16rem;
+        color: #fff;
+        background: #d91d36;
+        border-radius: 0.06rem;
+        line-height: 0.42rem;
+      }
+    }
+  }
+}

src/pages/WoDe/GeRenSheZhi/index.vue

   <div class="Page">
     <MainPageContainer :ShowMainHeader="true" :MainHeaderTitle="`个人设置`" :ShowMainHeaderBack="true">
       <ul>
+        <li class="flex-h">
+          <router-link tag="span" class="flex-item" :to="{ name: 'EditMiMa' }">修改密码</router-link>
+          <i class="iconfont iconjiantouright"></i>
+        </li>
         <li class="flex-h">
           <router-link tag="span" class="flex-item" :to="{ name: 'GuanYuWoMen' }">关于我们</router-link>
           <i class="iconfont iconjiantouright"></i>

src/router/index.js

             name: 'GuanYuWoMen',
             component: resolve => (require(['@/pages/WoDe/GuanYuWoMen'], resolve))
           },
+          {
+            path: '/WoDe/EditMiMa', // 个人中心-修改密码
+            name: 'EditMiMa',
+            component: resolve => (require(['@/pages/WoDe/EditMiMa'], resolve))
+          },
           {
             path: '/WoDe/XiaZaiErWeiMa', // 个人中心-下载二维码
             name: 'XiaZaiErWeiMa',

src/store/user/index.js

     }
   },
   actions: {
+    EditPassword (context, payload) { // 修改密码
+      return new Promise((resolve, reject) => {
+        ToolClass.Axios(resolve, reject, Api.EditPassword, context, payload, 1000)
+      })
+    },
     AliShiMingRenZheng (context, payload) { // 支付宝实名认证
       return new Promise((resolve, reject) => {
         ToolClass.Axios(resolve, reject, Api.AliShiMingRenZheng, context, payload, 1000)

src/util/Api.js

 const prefix = '/api'
 
 const $api = {
+  EditPassword: { // 修改密码
+    method: 'put',
+    url: `${prefix}/shop/resetpassword`
+  },
   AliShiMingRenZheng: { // 支付宝实名认证
     method: 'put',
     url: `${prefix}/app/shop/:id`