pay.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418
  1. <!--
  2. * @Author: wangwei
  3. * @Date: 2020-12-29 16:05:36
  4. * @LastEditTime: 2021-01-15 19:12:51
  5. * @LastEditors: Please set LastEditors
  6. * @Description: 支付密码
  7. * @FilePath: /java-pc/src/views/member/center/accountSafe.vue
  8. -->
  9. <template>
  10. <div class="sld_pay_password_mange">
  11. <MemberTitle :memberTitle="L['支付密码']"></MemberTitle>
  12. <div class="container">
  13. <div class="title">
  14. {{ memberInfo.data.hasPayPassword ? "修改" : "设置" }}支付密码
  15. </div>
  16. <div class="mange_con">
  17. <div class="without_phone_tip" v-if="!memberInfo.data.memberMobile">
  18. 请先绑定手机号,再进行支付密码操作!
  19. </div>
  20. <!-- 设置支付密码 start -->
  21. <template v-if="!memberInfo.data.hasPayPassword">
  22. <span class="current"
  23. >当前手机号
  24. {{
  25. memberInfo.data.memberMobile ? memberInfo.data.memberMobile : "--"
  26. }}</span
  27. >
  28. <div class="sms_code_con flex_row_center_center">
  29. <el-input
  30. v-model="sms_code"
  31. placeholder="请输入短信验证码"
  32. ></el-input>
  33. <div class="get_sms pointer" @click="getSmsCode">
  34. {{ countDownM ? countDownM + L["s后获取"] : L["获取验证码"] }}
  35. </div>
  36. </div>
  37. <el-input
  38. type="password"
  39. class="password input"
  40. v-model="password"
  41. placeholder="请输入支付密码"
  42. ></el-input>
  43. <el-input
  44. type="password"
  45. class="password input"
  46. v-model="confirm_password"
  47. placeholder="请再次输入支付密码"
  48. >
  49. </el-input>
  50. <div class="error_tip">
  51. <span
  52. v-if="errorMsg"
  53. style="color: #e1251b; font-size: 14px"
  54. class="iconfont icon-jubao"
  55. ></span>
  56. {{ errorMsg }}
  57. </div>
  58. <div class="next flex_row_center_center pointer" @click="next">
  59. 设置支付密码
  60. </div>
  61. </template>
  62. <!-- 设置支付密码 end -->
  63. <!-- 修改支付密码 start -->
  64. <template v-if="memberInfo.data.hasPayPassword">
  65. <el-input
  66. type="password"
  67. class="password input"
  68. v-model="old_password"
  69. placeholder="请输入原支付密码"
  70. >
  71. </el-input>
  72. <el-input
  73. type="password"
  74. class="password input"
  75. v-model="password"
  76. placeholder="请输入新支付密码"
  77. ></el-input>
  78. <el-input
  79. type="password"
  80. class="password input"
  81. v-model="confirm_password"
  82. placeholder="请再次输入新支付密码"
  83. >
  84. </el-input>
  85. <div class="error_tip">
  86. <span
  87. v-if="errorMsg"
  88. style="color: #e1251b; font-size: 14px"
  89. class="iconfont icon-jubao"
  90. ></span>
  91. {{ errorMsg }}
  92. </div>
  93. <div class="next flex_row_center_center pointer" @click="next">
  94. 修改支付密码
  95. </div>
  96. </template>
  97. <!-- 修改支付密码 end -->
  98. </div>
  99. <div class="manage_tips">
  100. <p class="tips_title">{{ L["温馨提示"] }}:</p>
  101. <p>• {{ L["为了保障您的账号安全,变更重要信息需进行身份验证。"] }}</p>
  102. <p>• {{ L["复杂的密码可使账号更安全且建议定期更换密码。"] }}</p>
  103. </div>
  104. </div>
  105. </div>
  106. </template>
  107. <script setup>
  108. import { ElInput, ElMessage } from "element-plus";
  109. import { getCurrentInstance, reactive, ref, watch, onMounted } from "vue";
  110. // import { lang_zn } from "@/assets/language/zh";
  111. import { getCurLanguage } from '@/composables/common.js';
  112. import { useFiltersStore } from "@/store/filter.js";
  113. const filtersStore = useFiltersStore();
  114. // const L = lang_zn;
  115. const L = getCurLanguage();
  116. definePageMeta({
  117. layout: "member",
  118. middleware: ["auth"],
  119. });
  120. const { proxy } = getCurrentInstance();
  121. const errorMsg = ref("");
  122. const sms_code = ref("");
  123. const password = ref(""); //输入新密码
  124. const confirm_password = ref(""); //再次输入新密码
  125. const old_password = ref(""); //输入旧密码
  126. // const confirm_password = ref("");
  127. const router = useRouter();
  128. const timeOutId = ref(""); //定时器的返回值
  129. const countDownM = ref(0); //短信验证码倒计时
  130. const memberInfo = reactive({ data: filtersStore.getMemberInfo });
  131. const isSmsClick = ref(false);
  132. const getSmsCode = () => {
  133. if (isSmsClick.value) {
  134. return;
  135. } else if (countDownM.value) {
  136. return false;
  137. }
  138. isSmsClick.value = true;
  139. var param = {};
  140. param.verifyType = 2;
  141. param.verifyAddr = memberInfo.data.memberMobile;
  142. get("v3/msg/front/commons/sendVerifyCode", param).then((res) => {
  143. if (res.state == 200) {
  144. countDownM.value = 60;
  145. countDown();
  146. isSmsClick.value = false;
  147. } else {
  148. ElMessage.error(res.msg);
  149. isSmsClick.value = false;
  150. }
  151. });
  152. };
  153. const next = () => {
  154. isSmsClick.value = false;
  155. if (!memberInfo.data.memberMobile) {
  156. ElMessage.warning("请先绑定手机号,再进行操作!");
  157. return false;
  158. }
  159. let url = "";
  160. let param = {};
  161. if (memberInfo.data.hasPayPassword) {
  162. //修改支付密码
  163. if (!old_password.value) {
  164. errorMsg.value = "请输入旧支付密码";
  165. return false;
  166. }
  167. if (!password.value) {
  168. errorMsg.value = "请输入新支付密码";
  169. return false;
  170. }
  171. if (!confirm_password.value) {
  172. errorMsg.value = "请再次输入新支付密码";
  173. return false;
  174. }
  175. if (password.value != confirm_password.value) {
  176. errorMsg.value = "请输入一致的新支付密码";
  177. return false;
  178. }
  179. //验证新密码是否符合规则
  180. let checkPwdVal = checkPwd(password.value);
  181. if (checkPwdVal !== true) {
  182. errorMsg.value = checkPwdVal;
  183. return false;
  184. }
  185. url = "v3/member/front/memberPassword/editPayPwd";
  186. param.oldPayPwd = old_password.value;
  187. param.payPwd = password.value;
  188. } else {
  189. //设置支付密码
  190. //验证码校验
  191. if (!sms_code.value) {
  192. errorMsg.value = "请输入短信验证码";
  193. return false;
  194. } else {
  195. let checkSmsCodeVal = checkSmsCode(sms_code.value);
  196. if (checkSmsCodeVal !== true) {
  197. errorMsg.value = checkSmsCodeVal;
  198. return false;
  199. }
  200. }
  201. if (!password.value) {
  202. errorMsg.value = "请输入支付密码";
  203. return false;
  204. }
  205. if (!confirm_password.value) {
  206. errorMsg.value = "请再次输入支付密码";
  207. return false;
  208. }
  209. if (password.value != confirm_password.value) {
  210. errorMsg.value = "请输入一致的支付密码";
  211. return false;
  212. }
  213. //验证新密码是否符合规则
  214. let checkPwdVal = checkPwd(password.value);
  215. if (checkPwdVal !== true) {
  216. errorMsg.value = checkPwdVal;
  217. return false;
  218. }
  219. url = "v3/member/front/memberPassword/addPayPwd";
  220. param.memberMobile = memberInfo.data.memberMobile;
  221. param.verifyCode = sms_code.value;
  222. param.payPwd = password.value;
  223. }
  224. post(url, param).then((res) => {
  225. if (res.state == 200) {
  226. ElMessage.success(res.msg);
  227. if (!memberInfo.data.hasPayPassword) {
  228. memberInfo.data.hasPayPassword = 1;
  229. filtersStore.setMemberInfo(memberInfo.data)
  230. }
  231. if (window.history.state.back.indexOf("/buy/Pay") > -1) {
  232. router.back();
  233. } else {
  234. sms_code.value = "";
  235. password.value = "";
  236. errorMsg.value = "";
  237. confirm_password.value = "";
  238. }
  239. } else {
  240. errorMsg.value = res.msg;
  241. }
  242. });
  243. };
  244. //倒计时
  245. const countDown = () => {
  246. countDownM.value--;
  247. if (countDownM.value == 0) {
  248. isSmsClick.value = false;
  249. clearTimeout(timeOutId.value);
  250. } else {
  251. timeOutId.value = setTimeout(countDown, 1000);
  252. }
  253. };
  254. watch([old_password, password, confirm_password], () => {
  255. old_password.value = old_password.value.substring(0, 20);
  256. password.value = password.value.substring(0, 20);
  257. confirm_password.value = confirm_password.value.substring(0, 20);
  258. });
  259. onMounted(() => {});
  260. </script>
  261. <style lang="scss" scoped>
  262. @use "@/assets/style/theme.scss" as *;
  263. .sld_pay_password_mange {
  264. width: 1007px;
  265. float: left;
  266. margin-left: 10px;
  267. .container {
  268. background-color: white;
  269. width: 100%;
  270. box-sizing: border-box;
  271. border: 1px solid #eaeaea;
  272. padding: 25px 40px;
  273. .manage_tips {
  274. width: 938px;
  275. background: #fffdee;
  276. border: 1px solid #edd28b;
  277. padding: 15px 36px;
  278. margin-top: 117px;
  279. p {
  280. color: #555555;
  281. margin-top: 10px;
  282. }
  283. .tips_title {
  284. font-weight: bold;
  285. margin-bottom: 11px;
  286. margin-top: 0;
  287. }
  288. }
  289. .title {
  290. font-size: 18px;
  291. border-bottom: 1px dashed #eaeaea;
  292. padding-bottom: 25px;
  293. font-weight: 600;
  294. margin-bottom: 20px;
  295. }
  296. .mange_con {
  297. width: 360px;
  298. margin: 62px auto 0;
  299. .current {
  300. line-height: 56px;
  301. font-size: 14px;
  302. color: #000000;
  303. }
  304. .error_tip {
  305. height: 15px;
  306. margin-top: 10px;
  307. color: #f30213;
  308. i {
  309. margin-right: 10px;
  310. }
  311. }
  312. .without_phone_tip {
  313. line-height: 56px;
  314. font-size: 16px;
  315. color: $colorMain2;
  316. }
  317. .sms_code_con {
  318. width: 100%;
  319. .get_sms {
  320. width: 100px;
  321. height: 40px;
  322. line-height: 38px;
  323. background: #00985e;
  324. text-align: center;
  325. color: white;
  326. font-size: 14px;
  327. border-radius: 0 3px 3px 0;
  328. }
  329. }
  330. .margin {
  331. margin-top: 20px;
  332. }
  333. .next {
  334. width: 170px;
  335. height: 40px;
  336. background: #00985e;
  337. color: #fff;
  338. font-size: 18px;
  339. font-weight: bold;
  340. text-align: center;
  341. color: white;
  342. margin-top: 20px;
  343. line-height: 40px;
  344. border-radius: 3px;
  345. margin: 42px auto 0;
  346. }
  347. }
  348. }
  349. }
  350. </style>
  351. <style lang="scss">
  352. .sld_pay_password_mange {
  353. .el-input {
  354. width: 280px;
  355. height: 40px;
  356. border-radius: 3px 0 0 3px;
  357. position: inherit;
  358. }
  359. .el-input__inner {
  360. width: 280px;
  361. height: 40px;
  362. border-radius: 3px 0 0 3px;
  363. }
  364. .input {
  365. width: 100%;
  366. height: 40px;
  367. margin-top: 20px;
  368. border-radius: 3px;
  369. .el-input__inner {
  370. height: 40px;
  371. border-radius: 3px;
  372. width: 100%;
  373. }
  374. }
  375. }
  376. .el-input__inner:focus {
  377. border-color: $colorMain;
  378. outline: 0;
  379. }
  380. /**
  381. * 解决el-input设置类型为number时,中文输入法光标上移问题
  382. **/
  383. .el-input__inner {
  384. line-height: 1px !important;
  385. }
  386. </style>