userCenterEssentialInformation.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421
  1. <template>
  2. <div class="boxs">
  3. <div style="width: 500px; margin: auto; margin-top: 30px">
  4. <div style="height: 100px; position: relative">
  5. <el-upload
  6. class="avatar-uploader"
  7. action="/api/file/upload/img?module=personnel"
  8. :show-file-list="false"
  9. :on-success="handleAvatarSuccess"
  10. :headers="myHeaders"
  11. :before-upload="beforeAvatarUpload"
  12. >
  13. <img
  14. v-if="form.userPic"
  15. :src="'api/file/pub/' + form.userPic"
  16. class="avatar"
  17. />
  18. <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  19. </el-upload>
  20. <img
  21. src="@/assets/img/userCenter/setUp.png"
  22. alt=""
  23. style="position: absolute; right: 180px; bottom: -10px; width: 40px"
  24. />
  25. <!-- <img :src="'api/file/pub/'+ form.photo" alt="" style="width: 100px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);"/> -->
  26. </div>
  27. </div>
  28. <div style="height: 400px; position: relative; width: 100%">
  29. <el-form
  30. ref="form"
  31. :model="form"
  32. label-width="140px"
  33. style="
  34. position: absolute;
  35. left: 53%;
  36. top: 55%;
  37. transform: translate(-55%, -50%);
  38. width: 400px;
  39. height: 400px;
  40. "
  41. >
  42. <el-form-item :label="$t('common.MobilePhone')">
  43. <el-input v-model="form.userPreferredMobile" disabled></el-input>
  44. <!-- <span style="margin-left: 20px;color: #2c5589;" class="cursor" @click="dialogVisibles(1)">修改邮箱</span>-->
  45. </el-form-item>
  46. <el-form-item :label="$t('common.Email') + ':'">
  47. <el-input v-model="form.userEmail" disabled></el-input>
  48. <!-- <span style="margin-left: 20px;color: #2c5589;" class="cursor" @click="dialogVisibles(1)">修改邮箱</span>-->
  49. </el-form-item>
  50. <el-form-item :label="$t('common.DateOfRegistration')">
  51. <el-input v-model="form.userAccountRegistertime" disabled></el-input>
  52. </el-form-item>
  53. <el-form-item :label="$t('common.CustomerType')">
  54. <el-input v-model="form.region" disabled></el-input>
  55. </el-form-item>
  56. <el-form-item :label="$t('common.LogInLast')">
  57. <el-input v-model="form.lastLoginTime" disabled></el-input>
  58. </el-form-item>
  59. <!-- <el-form-item label="修改密码:">
  60. <el-input v-model="form.date3" disabled></el-input>
  61. <span style="margin-left: 20px;color: #2c5589;" class="cursor" @click="dialogVisibles(2)">修改密码</span>
  62. </el-form-item>-->
  63. </el-form>
  64. </div>
  65. <div>
  66. <el-dialog
  67. :title="title"
  68. :visible.sync="dialogVisible"
  69. width="30%"
  70. height="50%"
  71. v-if="ifDiaslog == 2"
  72. >
  73. <div style="height: 200px; position: relative; width: 100%">
  74. <el-form
  75. ref="form"
  76. :model="form"
  77. label-width="80px"
  78. style="
  79. position: absolute;
  80. left: 56%;
  81. top: 55%;
  82. transform: translate(-55%, -50%);
  83. width: 400px;
  84. "
  85. >
  86. <el-form-item :label="$t('common.OriginalPassword')">
  87. <el-input v-model="passWord.passWord1"></el-input>
  88. </el-form-item>
  89. <el-form-item :label="$t('common.NewPassword')">
  90. <el-input v-model="passWord.passWord2"></el-input>
  91. </el-form-item>
  92. <el-form-item :label="$t('common.ConfirmPassword')">
  93. <el-input v-model="passWord.passWord3"></el-input>
  94. </el-form-item>
  95. </el-form>
  96. </div>
  97. <span slot="footer" class="dialog-footer">
  98. <el-button @click="dialogVisible = false">{{
  99. $t("common.Cancel")
  100. }}</el-button>
  101. <el-button type="primary" @click="dialogVisible = false">{{
  102. $t("common.Confirm")
  103. }}</el-button>
  104. </span>
  105. </el-dialog>
  106. <el-dialog
  107. :title="title"
  108. :visible.sync="dialogVisible"
  109. width="30%"
  110. height="50%"
  111. v-if="ifDiaslog == 1"
  112. >
  113. <div style="height: 200px; position: relative; width: 100%">
  114. <el-form
  115. ref="form"
  116. :model="form"
  117. label-width="100px"
  118. style="
  119. position: absolute;
  120. left: 56%;
  121. top: 55%;
  122. transform: translate(-55%, -50%);
  123. width: 400px;
  124. "
  125. >
  126. <el-form-item :label="$t('common.Mailbox')">
  127. <el-input v-model="passWord.passWord1"></el-input>
  128. </el-form-item>
  129. <el-form-item :label="$t('common.VerificationCode')">
  130. <el-input v-model="passWord.passWord2"></el-input>
  131. <span
  132. v-show="show"
  133. @click="getCode"
  134. style="margin-left: 20px; color: #2c5589"
  135. class="cursor"
  136. >{{ $t("common.GetCaptcha") }}</span
  137. >
  138. <span
  139. v-show="!show"
  140. class="count"
  141. style="margin-left: 20px; color: #999"
  142. >{{ count }}{{ $t("common.SendInSeconds") }}</span
  143. >
  144. </el-form-item>
  145. </el-form>
  146. </div>
  147. <span slot="footer" class="dialog-footer">
  148. <el-button @click="dialogVisible = false">{{
  149. $t("common.Cancel")
  150. }}</el-button>
  151. <el-button type="primary" @click="dialogVisible = false">{{
  152. $t("common.Confirm")
  153. }}</el-button>
  154. </span>
  155. </el-dialog>
  156. </div>
  157. </div>
  158. </template>
  159. <script>
  160. import { findBasicInfo, saveUserPic } from "@/api/user";
  161. import { getDicts } from "@/api/dict";
  162. import { getToken } from "@/utils/auth";
  163. import { addIntegral, addGrowth } from "@/utils/toCompleteTask";
  164. import { getUserPointPage } from "@/api/user";
  165. export default {
  166. name: "userCenterEssentialInformation",
  167. data() {
  168. return {
  169. informationsClass: "1",
  170. dialogVisible: false,
  171. ifDiaslog: "",
  172. imageUrl: "",
  173. title: "",
  174. form: {
  175. userPreferredMobile: "",
  176. userAccountRegistertime: "",
  177. userEmail: "",
  178. name: "1233@163.com",
  179. region: "",
  180. date1: "2018-05-19",
  181. date3: "2018-05-19",
  182. date2: "2020-05-25 11:20:23",
  183. delivery: false,
  184. type: [],
  185. resource: "",
  186. userPic: "/def/user.png",
  187. desc: "",
  188. },
  189. passWord: {
  190. passWord1: "",
  191. passWord2: "",
  192. passWord3: "",
  193. },
  194. Emal: {
  195. newEmal: "",
  196. VerificationCode: "",
  197. },
  198. userUsertypeDicts: [],
  199. show: true,
  200. count: "",
  201. timer: null,
  202. myHeaders: { Authorization: "Bearer " + getToken() },
  203. user: {
  204. umsUser: {},
  205. },
  206. pointStatus: null,
  207. };
  208. },
  209. computed: {
  210. userUsertypeMap: function () {
  211. return this.userUsertypeDicts.array2Obj("value", "label");
  212. },
  213. },
  214. watch: {
  215. "$i18n.locale"() {
  216. this.initData();
  217. this.userBasicInfo();
  218. },
  219. },
  220. created() {
  221. this.initData();
  222. this.userBasicInfo();
  223. },
  224. methods: {
  225. initData: function () {
  226. getUserPointPage().then((res) => {
  227. this.pointStatus = res.data.umsUserPoints[0].pointStatus;
  228. });
  229. },
  230. async userBasicInfo() {
  231. if (this.$i18n.locale.toUpperCase() == "EN") {
  232. await getDicts("USERTYPE_DICT_EN").then((result) => {
  233. if (result.data) {
  234. this.userUsertypeDicts = result.data["0"] || [];
  235. }
  236. });
  237. } else {
  238. await getDicts("USERTYPE_DICT").then((result) => {
  239. if (result.data) {
  240. this.userUsertypeDicts = result.data["0"] || [];
  241. }
  242. });
  243. }
  244. await findBasicInfo().then((result) => {
  245. this.form = result.data;
  246. console.log("this.form", this.form);
  247. if (!this.form.userPic) {
  248. this.form.userPic = "/def/user.png";
  249. }
  250. console.log(this.form.userAccountRegistertime);
  251. const regtime = this.YymmddFormat(
  252. new Date(this.form.userAccountRegistertime)
  253. );
  254. const logintime = this.YymmddFormat(new Date(this.form.lastLoginTime));
  255. if (this.form.userAccountRegistertime !== undefined)
  256. this.form.userAccountRegistertime = regtime;
  257. if (this.form.lastLoginTime !== undefined)
  258. this.form.lastLoginTime = logintime;
  259. var userUsertypeMap = this.userUsertypeDicts.array2Obj(
  260. "value",
  261. "label"
  262. );
  263. if (result.data.userUsertypeDict !== undefined) {
  264. console.log(userUsertypeMap[result.data.userUsertypeDict]);
  265. this.form.region = userUsertypeMap[result.data.userUsertypeDict];
  266. }
  267. if (this.form.userPreferredMobile) {
  268. this.form.userPreferredMobile =
  269. this.form.userPreferredMobile.substr(4, 3) +
  270. "****" +
  271. this.form.userPreferredMobile.substr(11);
  272. }
  273. });
  274. },
  275. getInformation(num) {
  276. this.informationsClass = num;
  277. },
  278. // handleClose(done) {
  279. // this.$confirm('确认关闭?')
  280. // .then(_ => {
  281. // done();
  282. // })
  283. // .catch(_ => {});
  284. // },
  285. //中国标准时间 转 yy-MM-dd hh:mm:ss
  286. YymmddFormat(newDate) {
  287. let Month = newDate.getMonth() + 1;
  288. Month = Month >= 10 ? Month : "0" + Month;
  289. let d = newDate.getDate();
  290. d = d >= 10 ? d : "0" + d;
  291. return [
  292. [newDate.getFullYear(), Month, d].join("-"),
  293. [newDate.getHours(), newDate.getMinutes(), newDate.getSeconds()].join(
  294. ":"
  295. ),
  296. ].join(" ");
  297. },
  298. dialogVisibles(num) {
  299. this.ifDiaslog = num;
  300. if (num == 1) {
  301. this.title = "修改邮箱";
  302. this.$router.push({
  303. name: "",
  304. });
  305. } else if (num == 2) {
  306. this.title = "修改密码";
  307. this.$router.push({
  308. name: "",
  309. });
  310. }
  311. // this.dialogVisible=true
  312. },
  313. getCode() {
  314. const TIME_COUNT = 60;
  315. if (!this.timer) {
  316. this.count = TIME_COUNT;
  317. this.show = false;
  318. this.timer = setInterval(() => {
  319. if (this.count > 0 && this.count <= TIME_COUNT) {
  320. this.count--;
  321. } else {
  322. this.show = true;
  323. clearInterval(this.timer);
  324. this.timer = null;
  325. }
  326. }, 1000);
  327. }
  328. },
  329. handleAvatarSuccess(res, file) {
  330. this.form.userPic = res.data;
  331. //保存图像
  332. saveUserPic(this.form.userPic)
  333. .then((result) => {
  334. if (
  335. this.user.umsUser.userUsertypeDict !== "2" &&
  336. this.pointStatus == "y"
  337. ) {
  338. addIntegral("point_task_upload_head_portrait", 20);
  339. addGrowth("point_task_upload_head_portrait");
  340. }
  341. this.$forceUpdate();
  342. this.$message({
  343. message: this.$t("common.uploadSuccess"),
  344. type: "success",
  345. });
  346. //头像路径更新到localstorage
  347. let user = JSON.parse(window.localStorage.getItem("user"));
  348. user.umsUser.userPic = this.form.userPic;
  349. window.localStorage.setItem("user", JSON.stringify(user));
  350. })
  351. .catch((error) => {
  352. this.$message({
  353. message: error.msg,
  354. type: "error",
  355. });
  356. });
  357. },
  358. beforeAvatarUpload(file) {
  359. const isJPG = file.type === "image/jpeg";
  360. const isLt2M = file.size / 1024 / 1024 < 2;
  361. /* if (!isJPG) {
  362. this.$message.error('上传头像图片只能是 JPG 格式!');
  363. return;
  364. }*/
  365. /*if (!isLt2M) {
  366. this.$message.error(this.$t('common.uploadInfo'));
  367. return;
  368. }*/
  369. // return isJPG && isLt2M;
  370. },
  371. },
  372. };
  373. </script>
  374. <style scoped>
  375. .box1:after {
  376. display: block;
  377. clear: both;
  378. content: "";
  379. visibility: hidden;
  380. height: 0;
  381. }
  382. .el-input {
  383. width: 75%;
  384. }
  385. .el-form {
  386. width: 500px !important;
  387. }
  388. .avatar-uploader .el-upload {
  389. border: 1px dashed #d9d9d9;
  390. border-radius: 6px;
  391. cursor: pointer;
  392. position: relative;
  393. overflow: hidden;
  394. }
  395. .avatar-uploader .el-upload:hover {
  396. border-color: #409eff;
  397. }
  398. .avatar-uploader-icon {
  399. font-size: 28px;
  400. color: #8c939d;
  401. width: 125px;
  402. height: 110px;
  403. line-height: 178px;
  404. text-align: center;
  405. }
  406. .avatar {
  407. width: 105px;
  408. height: 110px;
  409. display: block;
  410. border-radius: 60px;
  411. overflow: hidden;
  412. }
  413. .boxs >>> .el-upload {
  414. position: absolute;
  415. left: 50%;
  416. top: 0;
  417. transform: translateX(-50%);
  418. }
  419. </style>