UserIndex.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480
  1. <template>
  2. <div class="userPage flex-col">
  3. <div class="userPageBox">
  4. <s-header :name="sys ? sys.title : $t('user.personalCenter')" :noback="true" :isFixed="false"></s-header>
  5. <div class="userBaseBox">
  6. <!-- 基本信息 -->
  7. <div class="baseRow flex-row justify-between">
  8. <div class="group2 flex-col"></div>
  9. <span class="baseText">{{ $t("user.essentialInformation") }}</span>
  10. </div>
  11. <div class="userMessage flex-row justify-between">
  12. <!-- 初始份额 stockNum -->
  13. <div class="userId">
  14. <!-- <p class="userText">{{ accountDetail.stockNum }}</p> -->
  15. <p class="userText">{{ stockShares }}</p>
  16. <p class="userText">剩余份额</p>
  17. </div>
  18. <!-- 竖线 -->
  19. <div class="userLine"></div>
  20. <!-- 会员等级 level -->
  21. <div class="userId">
  22. <van-image v-for="(icon, index) in icons" :key="index" :src="icon" round width="0.4rem" height="0.4rem"
  23. @click="showTop = true"></van-image>
  24. <van-popup v-model:show="showTop" round position="top"
  25. :style="{ height: '10%' }"><br />一个⭐代表1贡献值<br />一个🌙代表5贡献值</van-popup>
  26. <p class="userText">奋斗贡献值</p>
  27. </div>
  28. <div class="userLine"></div>
  29. <!-- 用户名 userName -->
  30. <div class="userId">
  31. <p class="userText">{{ accountDetail.userName }}</p>
  32. <!-- <p class="userText">test</p> -->
  33. <p class="userText">用户名</p>
  34. </div>
  35. </div>
  36. <div class="userInfoBox">
  37. <!-- 手机号码 -->
  38. <div v-if="!phoneNumberShow" class="userInfo l-flex-between">
  39. <span class="userInfoLeft">{{ $t("user.phoneNumber") }}: </span>
  40. <div>
  41. <van-field class="relationClass" v-model="cofficentForm.phone" :placeholder="$t('user.phoneNumberPlace')">
  42. <template #button>
  43. <van-button type="primary" @click="mailboxChg(cofficentForm.phone, 1)" size="small">确定
  44. </van-button>
  45. </template>
  46. </van-field>
  47. </div>
  48. <van-icon name="close" class="editIcon" @click="editClk(1)" />
  49. </div>
  50. <div v-else class="userInfo l-flex-between">
  51. <span class="userInfoLeft">{{ $t("user.phoneNumber") }}: </span>
  52. <span>{{ accountDetail.phone }}</span>
  53. <van-icon name="edit" class="editIcon" @click="editClk(1)" />
  54. </div>
  55. <!-- 邮箱 -->
  56. <div v-if="!mailboxShow" class="userInfo l-flex-between">
  57. <span class="userInfoLeft">{{ $t("user.mailbox") }}: </span>
  58. <div>
  59. <van-field class="relationClass" v-model="cofficentForm.mailBox" :placeholder="$t('user.mailboxPlace')">
  60. <!-- 邮箱修改按钮 -->
  61. <template #button>
  62. <van-button type="primary" @click="mailboxChg(cofficentForm.mailBox, 2)" size="small">{{
  63. $t("user.confirmLog") }}
  64. </van-button>
  65. </template>
  66. </van-field>
  67. </div>
  68. <van-icon name="close" class="editIcon" @click="editClk(2)" />
  69. </div>
  70. <div v-else class="userInfo l-flex-between">
  71. <span class="userInfoLeft">{{ $t("user.mailbox") }}: </span>
  72. <span>{{ accountDetail.email }}</span>
  73. <!-- 编辑按钮 -->
  74. <!-- <van-icon name="edit" class="editIcon" @click="editClk(2)" /> -->
  75. </div>
  76. <!-- 支付宝账号 payeeCode -->
  77. <div class="userInfo l-flex-between">
  78. <span class="userInfoLeft">支付宝账号: </span>
  79. <span>{{ accountDetail.payeeCode }}</span>
  80. </div>
  81. <!-- 银行卡号 cardNo -->
  82. <div class="userInfo l-flex-between">
  83. <span class="userInfoLeft">银行卡号: </span>
  84. <span>{{ eyeOpen ? cardNo : hiddenCardNo }}</span>
  85. <van-icon class="l-eye" :name="eyeOpen ? 'eye-o' : 'closed-eye'" size="20" @click="clickEye" />
  86. </div>
  87. </div>
  88. </div>
  89. <div class="lineBox"></div>
  90. <div class="commonOperBox">
  91. <!-- 常用操作 -->
  92. <div class="baseRow flex-row justify-between">
  93. <div class="group2 flex-col"></div>
  94. <span class="baseText">{{ $t("user.commonOperations") }}</span>
  95. </div>
  96. <div class="operListBox">
  97. <!-- 系统管理 -->
  98. <div v-if="isAdmin" class="taskListRow flex-col" @click="pushPageList('/taskMessage')">
  99. <div class="taskIcon sysManageIcon"></div>
  100. <div class="taskRight">
  101. <div class="taskTitle">系统管理</div>
  102. </div>
  103. </div>
  104. <!-- 买家确认付款 -->
  105. <div v-if="!isAdmin" class="taskListRow flex-col" @click="pushPageList('/buyConfList')">
  106. <div class="taskIcon buyConfIcon"></div>
  107. <div class="taskRight">
  108. <div class="taskTitle">
  109. 买入付款确认
  110. </div>
  111. </div>
  112. </div>
  113. <!-- 卖家收款确认 -->
  114. <div v-if="!isAdmin" class="taskListRow flex-col" @click="pushPageList('/sellConfList')">
  115. <div class="taskIcon sellConfIcon"></div>
  116. <div class="taskRight">
  117. <div class="taskTitle">
  118. 卖家收款确认
  119. </div>
  120. </div>
  121. </div>
  122. <!-- 首页通知 -->
  123. <div v-if="isAdmin" class="taskListRow flex-col" @click="pushPageList('/announcement')">
  124. <div class="taskIcon announcementIcon"></div>
  125. <div class="taskRight">
  126. <div class="taskTitle">
  127. 首页通知
  128. </div>
  129. </div>
  130. </div>
  131. <!-- 异议反馈 -->
  132. <div class="taskListRow flex-col" @click="pushPageList('/objectionFeedback')">
  133. <div class="taskIcon feedbackIcon"></div>
  134. <div class="taskRight">
  135. <div class="taskTitle">
  136. 异议反馈
  137. </div>
  138. </div>
  139. </div>
  140. <!-- 修改密码 -->
  141. <div class="taskListRow flex-col" @click="pushPageList('/changepassword')">
  142. <div class="taskIcon changePasswordIcon"></div>
  143. <div class="taskRight">
  144. <div class="taskTitle">{{ $t("user.changePassword") }}</div>
  145. </div>
  146. </div>
  147. <!-- 退出登录 -->
  148. <div class="taskListRow flex-col" @click="onperExitSys()">
  149. <div class="taskIcon logoutIcon"></div>
  150. <div class="taskRight">
  151. <div class="taskTitle">{{ $t("user.logOut") }}</div>
  152. </div>
  153. </div>
  154. <div style="height: 100px;"></div>
  155. </div>
  156. </div>
  157. </div>
  158. <!-- <nav-bar></nav-bar> -->
  159. <!-- 退出登录弹窗 -->
  160. <kDialog :dialogTitle="$t('user.logOutTips')" :cancelBtnTxt="$t('user.cancelLog')"
  161. :confirmBtnTxt="$t('user.confirmLog')" ref="kDialogRef" :dialogContent="$t('user.logOutContent')"
  162. @confirmclk="confirmClk">
  163. </kDialog>
  164. </div>
  165. </template>
  166. <script>
  167. // 导入接口
  168. import { getLoginInfo } from "@/service/merchantManage";
  169. import { updateAdmin } from "@/service/merchantManage";
  170. // 引入弹窗
  171. import kDialog from "@/components/commom/kDialog/index.vue";
  172. import { onMounted, reactive, ref, computed } from "vue";
  173. import sHeader from "@/components/SimpleHeader";
  174. import {
  175. getLoginUser,
  176. $M_EmailAvailable,
  177. $M_PhoneTest,
  178. } from "@/common/js/utils";
  179. import { useRouter } from "vue-router";
  180. import { showToast } from 'vant';
  181. import { useI18n } from "vue-i18n";
  182. import { styleUrl } from "@/common/js/utils";
  183. import { queryAllowNum } from "@/service/user.js";
  184. export default {
  185. components: { sHeader, kDialog },
  186. setup() {
  187. // 引入语言
  188. const { t } = useI18n();
  189. // 账户信息
  190. const accountDetail = ref({});
  191. // 控制手机显示隐藏
  192. const phoneNumberShow = ref(true);
  193. // 控制邮箱显示隐藏
  194. const mailboxShow = ref(true);
  195. const isAdmin = ref()
  196. const adminId = ref('')
  197. console.log("adminId", adminId);
  198. const checkIsAdmin = async () => {
  199. if (user.phone === "12345678901") {
  200. isAdmin.value = true
  201. }
  202. }
  203. const diyPassword = ref("");
  204. const sunzeePay = ref(false);
  205. const sevencloudPay = ref(false);
  206. const user = getLoginUser();
  207. const router = useRouter();
  208. const relationAdminName = ref("");
  209. const level = ref('');
  210. level.value = user.level;
  211. const cardNo = ref('');
  212. cardNo.value = user.cardNo;
  213. const starsCount = ref(Math.floor(level.value % 5));
  214. const moonsCount = ref(Math.floor(level.value / 5));
  215. const icons = computed(() => {
  216. const iconsArray = [];
  217. for (let i = 0; i < moonsCount.value; i++) {
  218. iconsArray.push(require('@/assets/user/moon.png'));
  219. }
  220. for (let i = 0; i < starsCount.value; i++) {
  221. iconsArray.push(require('@/assets/user/star.png'));
  222. }
  223. return iconsArray;
  224. });
  225. const showTop = ref(false);
  226. const sys = ref(null);
  227. // 修改的个人信息
  228. const cofficentForm = reactive({
  229. associateParent: relationAdminName.value,
  230. mailBox: accountDetail.value.email,
  231. phone: accountDetail.value.phone,
  232. area: "",
  233. currencySymbol: accountDetail.value.currencySymbol,
  234. });
  235. //
  236. const params = reactive({
  237. id: '', // 用户ID
  238. });
  239. // 点击修改图标
  240. const editClk = (idx) => {
  241. switch (idx) {
  242. case 1:
  243. cofficentForm.phone = accountDetail.value.phone;
  244. phoneNumberShow.value = !phoneNumberShow.value;
  245. mailboxShow.value = true;
  246. break;
  247. case 2:
  248. cofficentForm.mailBox = accountDetail.value.email;
  249. phoneNumberShow.value = true;
  250. mailboxShow.value = !mailboxShow.value;
  251. break;
  252. }
  253. };
  254. // 点击邮箱的确定按钮
  255. const mailboxChg = async (e, idx) => {
  256. switch (idx) {
  257. case 1:
  258. if (!e) {
  259. showToast(t("user.phoneNumberPlace"));
  260. } else if (!$M_PhoneTest(e)) {
  261. showToast(t("user.corrPhonePlace"));
  262. } else {
  263. const params = {
  264. userId: user.id,
  265. phone: e,
  266. };
  267. const { data } = await updateAdmin(params);
  268. phoneNumberShow.value = true;
  269. if (data.code === "00000") {
  270. showToast(data.message);
  271. setTimeout(() => {
  272. getAcccountDetail();
  273. }, 500);
  274. }
  275. }
  276. break;
  277. case 2:
  278. if (!e) {
  279. showToast(t("user.mailboxPlace"));
  280. } else if (!$M_EmailAvailable(e)) {
  281. showToast(t("user.corrEmailPlace"));
  282. } else {
  283. const params = {
  284. userId: user.id,
  285. email: e,
  286. };
  287. const { data } = await updateAdmin(params);
  288. mailboxShow.value = true;
  289. if (data.code === "00000") {
  290. showToast(data.message);
  291. setTimeout(() => {
  292. getAcccountDetail();
  293. }, 500);
  294. }
  295. }
  296. break;
  297. }
  298. };
  299. const hiddenCardNo = ref('');
  300. if (user.cardNo) {
  301. hiddenCardNo.value = user.cardNo.replace(/^(\d{4}).*?(\d{4})$/, "$1********$2");
  302. }
  303. const eyeOpen = ref(false);
  304. const clickEye = () => {
  305. eyeOpen.value = !eyeOpen.value;
  306. }
  307. // 获取账户详情
  308. const getAcccountDetail = () => {
  309. getLoginInfo().then((res) => {
  310. accountDetail.value = res.data.data;
  311. });
  312. };
  313. // 退出登录弹窗
  314. const kDialogRef = ref(null);
  315. // 点击右侧按钮
  316. const confirmClk = () => {
  317. // 获取缓存的语言
  318. const savedCredentials = localStorage.getItem('savedCredentials');
  319. const curLang = localStorage.getItem("curLang");
  320. // 清空缓存
  321. localStorage.clear();
  322. localStorage.setItem("curLang", curLang);
  323. if (savedCredentials) {
  324. localStorage.setItem('savedCredentials', savedCredentials);
  325. }
  326. if (sys.value) {
  327. setTimeout(() => {
  328. router.push({
  329. path: "login",
  330. query: { relation_admin_id: sys.value.relationAdminId },
  331. });
  332. }, 200);
  333. } else {
  334. setTimeout(() => {
  335. router.push({ path: "login" });
  336. }, 200);
  337. }
  338. };
  339. // 剩余份额-allowSellNum 允许售卖的数量
  340. const stockShares = ref(0)
  341. async function getStockShares() {
  342. const { data } = await queryAllowNum()
  343. if (data.code === '00000') {
  344. stockShares.value = data.data.allowSellNum;
  345. }
  346. }
  347. // 初始化页面获取列表
  348. onMounted(async () => {
  349. // 加载样式
  350. styleUrl('user');
  351. // if (localStorage.getItem("loginSys")) {
  352. // const loginSysString = localStorage.getItem("loginSys");
  353. // sys.value = JSON.parse(loginSysString);
  354. // }
  355. // 获取账户
  356. getAcccountDetail()
  357. checkIsAdmin()
  358. getStockShares()
  359. });
  360. const onperExitSys = () => {
  361. kDialogRef.value.openDialog();
  362. };
  363. const pushPageList = (url) => {
  364. router.push({ path: url });
  365. };
  366. // 选择地区完成
  367. const areaPopFinish = async (e) => {
  368. console.log("e", e);
  369. accountDetail.value.areaId = e.selectId;
  370. const params = {
  371. userId: user.id,
  372. areaId: e.selectId,
  373. };
  374. const { data } = await updateAdmin(params);
  375. // areaShow.value = true;
  376. if (data.code === "00000") {
  377. showToast(data.message);
  378. setTimeout(() => {
  379. getAcccountDetail();
  380. }, 500);
  381. }
  382. };
  383. const isInWeChat = ref(false);
  384. // 是否有上级账号
  385. const haveRelation = ref(false);
  386. const haveRelationCheck = () => {
  387. if (user.relationAdminId !== null) {
  388. haveRelation.value = true;
  389. }
  390. }
  391. onMounted(() => {
  392. haveRelationCheck();
  393. })
  394. return {
  395. user,
  396. onperExitSys,
  397. relationAdminName,
  398. pushPageList,
  399. sys,
  400. kDialogRef,
  401. confirmClk,
  402. mailboxChg,
  403. editClk,
  404. cofficentForm,
  405. params,
  406. accountDetail,
  407. areaPopFinish,
  408. isInWeChat,
  409. haveRelation,
  410. diyPassword,
  411. sunzeePay,
  412. sevencloudPay,
  413. level,
  414. icons,
  415. showTop,
  416. hiddenCardNo,
  417. phoneNumberShow,
  418. mailboxShow,
  419. clickEye,
  420. eyeOpen,
  421. cardNo,
  422. isAdmin,
  423. stockShares
  424. };
  425. }
  426. };
  427. </script>
  428. <style lang="less" scoped>
  429. @import "../../common/style/mixin.less";
  430. @import "../../styles/user/index.less";
  431. </style>