user.vue 47 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600
  1. <template>
  2. <div class="userPage flex-col">
  3. <s-header
  4. :name="sys ? sys.title : $t('user.personalCenter')"
  5. :noback="true"
  6. :isFixed="false"
  7. ></s-header>
  8. <div class="userPageBox">
  9. <div class="userBaseBox">
  10. <div class="baseRow l-flex-RC">
  11. <div class="group2"></div>
  12. <span class="baseText">{{ $t("user.essentialInformation") }}</span>
  13. </div>
  14. <div class="userMessage">
  15. <div class="userId leftCol">
  16. <p class="infoValue">{{ accountDetail.managerId }}</p>
  17. <p class="infoLabel">{{ $t("user.systemId") }}</p>
  18. </div>
  19. <div class="verticalDivider"></div>
  20. <div class="userId rightCol">
  21. <p class="infoValue">{{ accountDetail.username }}</p>
  22. <p class="infoLabel">{{ $t("user.myAccount") }}</p>
  23. </div>
  24. </div>
  25. <div class="userInfoBox">
  26. <!-- 地区 -->
  27. <div
  28. v-if="user.type == '2' && !areaShow"
  29. class="userInfo l-flex-between"
  30. >
  31. <span class="userInfoLeft">{{ $t("user.region") }}</span>
  32. <div class="cust_vantBorder">
  33. <div class="filedInpPad">
  34. <van-field
  35. @click-input="clickShowArea"
  36. readonly
  37. clearable
  38. v-model="fieldValue"
  39. :placeholder="$t('user.regionPlace')"
  40. >
  41. <template #right-icon>
  42. <div class="l-flex-RC">
  43. <van-icon
  44. v-if="fieldValue"
  45. @click="
  46. fieldValue = '';
  47. accountDetail.areaId = '';
  48. "
  49. class="o-mr-6"
  50. name="clear"
  51. />
  52. <van-icon @click="clickShowArea" name="arrow-down" />
  53. </div>
  54. </template>
  55. </van-field>
  56. </div>
  57. </div>
  58. <van-icon name="edit" class="editIcon" @click="editClk(4)" />
  59. </div>
  60. <div
  61. v-if="user.type == '2' && areaShow"
  62. class="userInfo l-flex-between"
  63. >
  64. <span class="userInfoLeft">{{ $t("user.region") }}</span>
  65. <span>{{ fieldValue }}</span>
  66. <van-icon name="edit" class="editIcon" @click="editClk(4)" />
  67. </div>
  68. <!-- 邮箱 -->
  69. <div
  70. v-if="user.type != '0' && !mailboxShow"
  71. class="userInfo l-flex-between"
  72. >
  73. <span class="userInfoLeft">{{ $t("user.mailbox") }}</span>
  74. <div>
  75. <van-field
  76. class="relationClass"
  77. v-model="cofficentForm.mailBox"
  78. :placeholder="$t('user.mailboxPlace')"
  79. >
  80. <template #button>
  81. <van-button
  82. type="primary"
  83. @click="mailboxChg(cofficentForm.mailBox, 2)"
  84. >{{ $t("user.confirmLog") }}
  85. </van-button>
  86. </template>
  87. </van-field>
  88. </div>
  89. <van-icon name="edit" class="editIcon" @click="editClk(2)" />
  90. </div>
  91. <div
  92. v-if="user.type != '0' && mailboxShow"
  93. class="userInfo l-flex-between"
  94. >
  95. <span class="userInfoLeft">{{ $t("user.mailbox") }}</span>
  96. <span>{{ accountDetail.email }}</span>
  97. <van-icon name="edit" class="editIcon" @click="editClk(2)" />
  98. </div>
  99. <!-- 手机号码 -->
  100. <div
  101. v-if="user.type != '0' && !phoneNumberShow"
  102. class="userInfo l-flex-between"
  103. >
  104. <span class="userInfoLeft">{{ $t("user.phoneNumber") }}</span>
  105. <div>
  106. <van-field
  107. class="relationClass"
  108. v-model="cofficentForm.phone"
  109. :placeholder="$t('user.phoneNumberPlace')"
  110. >
  111. <template #button>
  112. <van-button
  113. type="primary"
  114. @click="mailboxChg(cofficentForm.phone, 3)"
  115. >{{ $t("user.confirmLog") }}
  116. </van-button>
  117. </template>
  118. </van-field>
  119. </div>
  120. <van-icon name="edit" class="editIcon" @click="editClk(3)" />
  121. </div>
  122. <div
  123. v-if="user.type != '0' && phoneNumberShow"
  124. class="userInfo l-flex-between"
  125. >
  126. <span class="userInfoLeft">{{ $t("user.phoneNumber") }}</span>
  127. <span>{{ accountDetail.phone }}</span>
  128. <van-icon name="edit" class="editIcon" @click="editClk(3)" />
  129. </div>
  130. <!-- 自定义货币符号 -->
  131. <div v-if="!symbolShow" class="userInfo l-flex-between">
  132. <span class="userInfoLeft">{{ $t("user.currencySymbol") }}</span>
  133. <div>
  134. <van-field
  135. class="relationClass"
  136. v-model="cofficentForm.currencySymbol"
  137. :placeholder="$t('user.currencySymbolPlace')"
  138. >
  139. <template #button>
  140. <van-button
  141. type="primary"
  142. @click="mailboxChg(cofficentForm.currencySymbol, 5)"
  143. >{{ $t("user.confirmLog") }}
  144. </van-button>
  145. </template>
  146. </van-field>
  147. </div>
  148. <van-icon name="edit" class="editIcon" @click="editClk(5)" />
  149. </div>
  150. <div v-else class="userInfo l-flex-between">
  151. <span class="userInfoLeft">{{ $t("user.currencySymbol") }}</span>
  152. <span>{{ accountDetail.currencySymbol }}</span>
  153. <van-icon name="edit" class="editIcon" @click="editClk(5)" />
  154. </div>
  155. <!-- 时区 -->
  156. <div
  157. v-if="user.type > 1 && !timezoneShow"
  158. class="userInfo l-flex-between"
  159. >
  160. <span class="userInfoLeft">{{ $t("user.setTheTimezone") }}: </span>
  161. <div class="cust_vantBorder">
  162. <div class="filedInpPad">
  163. <van-field
  164. @click-input="tzFieldValueInpClk"
  165. readonly
  166. clearable
  167. v-model="tzFieldValue"
  168. :placeholder="$t('user.setTheTimezonePlace')"
  169. >
  170. <template #right-icon>
  171. <div class="l-flex-RC">
  172. <van-icon
  173. v-if="tzFieldValue"
  174. @click="
  175. tzFieldValue = '';
  176. accountDetail.timeZone = '';
  177. "
  178. class="o-mr-6"
  179. name="clear"
  180. />
  181. <van-icon @click="tzFieldValueInpClk" name="arrow-down" />
  182. </div>
  183. </template>
  184. </van-field>
  185. </div>
  186. </div>
  187. <van-icon name="edit" class="editIcon" @click="editClk(7)" />
  188. </div>
  189. <div
  190. v-if="user.type > 1 && timezoneShow"
  191. class="userInfo l-flex-between"
  192. >
  193. <span class="userInfoLeft">{{ $t("user.setTheTimezone") }} </span>
  194. <span>{{ tzFieldValue }}</span>
  195. <van-icon name="edit" class="editIcon" @click="editClk(7)" />
  196. </div>
  197. <!-- DIY使用密码 -->
  198. <div
  199. v-if="user.type == '0' && !diyPasswordShow"
  200. class="userInfo l-flex-between"
  201. >
  202. <span class="userInfoLeft">{{ $t("user.diyPassword") }}</span>
  203. <div>
  204. <van-field
  205. class="relationClass"
  206. v-model="diyPassword"
  207. :placeholder="$t('user.diyPasswordPlace')"
  208. >
  209. <template #button>
  210. <van-button type="primary" @click="mailboxChg(diyPassword, 6)"
  211. >{{ $t("user.confirmLog") }}
  212. </van-button>
  213. </template>
  214. </van-field>
  215. </div>
  216. <van-icon name="edit" class="editIcon" @click="editClk(6)" />
  217. </div>
  218. <div
  219. v-if="user.type == '0' && diyPasswordShow"
  220. class="userInfo l-flex-between"
  221. >
  222. <span class="userInfoLeft">{{ $t("user.diyPassword") }}</span>
  223. <van-icon name="edit" class="editIcon" @click="editClk(6)" />
  224. </div>
  225. <!-- 切换支付平台 -->
  226. <div v-if="chaSzPayShow" class="userInfo l-flex-between">
  227. <span class="userInfoLeft">{{ $t("user.szPayType") }}</span>
  228. <div class="cust_vantBorder">
  229. <van-switch
  230. :model-value="sunzeePay"
  231. active-color="#0090fa"
  232. inactive-color="#30c25c"
  233. style="font-size: 0.5rem"
  234. @update:model-value="changeSunzeePay"
  235. />
  236. </div>
  237. <span class="o-pl-10"
  238. >{{ $t("user.currentChoose") }}:
  239. {{ sunzeePay ? "汇付" : "汇聚" }}</span
  240. >
  241. </div>
  242. <div v-if="chaScPayShow" class="userInfo l-flex-between">
  243. <span class="userInfoLeft">{{ $t("user.scPayType") }}</span>
  244. <div class="cust_vantBorder">
  245. <van-switch
  246. :model-value="sevencloudPay"
  247. active-color="#0090fa"
  248. inactive-color="#30c25c"
  249. style="font-size: 0.5rem"
  250. @update:model-value="changeSevenCloudPay"
  251. />
  252. </div>
  253. <span class="o-pl-10"
  254. >{{ $t("user.currentChoose") }}:
  255. {{ sevencloudPay ? "汇付" : "汇聚" }}</span
  256. >
  257. </div>
  258. <!-- 订单通知 -->
  259. <div v-if="isInWeChat && user.type == '2'" class="userInfo l-flex-RC">
  260. <span class="userInfoLeft l-flex-RC"
  261. >{{ $t("user.orderNotice") }}:
  262. </span>
  263. <div class="cust_vantBorder">
  264. <van-switch
  265. :model-value="orderNotice"
  266. active-color="#0090fa"
  267. style="font-size: 20px"
  268. @update:model-value="changeOrderNotice"
  269. />
  270. </div>
  271. </div>
  272. <!-- 设备上下线提醒 -->
  273. <div
  274. v-if="(isInWeChat || user.ifForeign === '1') && user.type == '2'"
  275. class="userInfo l-flex-RC"
  276. >
  277. <span class="userInfoLeft l-flex-RC"
  278. >{{ $t("user.onOffNotice") }}
  279. </span>
  280. <div class="cust_vantBorder">
  281. <van-switch
  282. :model-value="onOffNotice"
  283. style="font-size: 25px"
  284. @update:model-value="changeOnOffNotice"
  285. />
  286. </div>
  287. </div>
  288. </div>
  289. </div>
  290. <div class="commonOperBox">
  291. <!-- 常用操作 -->
  292. <div class="baseRow l-flex-RC">
  293. <div class="group2"></div>
  294. <span class="baseText">{{ $t("user.commonOperations") }}</span>
  295. </div>
  296. <div class="operListBox">
  297. <!-- 常用工具 -->
  298. <div
  299. class="taskListRow l-flex-RC"
  300. @click="pushPageList('/commonTools')"
  301. >
  302. <div class="taskIcon commonToolsIcon"></div>
  303. <div class="taskRight">
  304. <div class="taskTitle">{{ $t("home.commonTools") }}</div>
  305. </div>
  306. </div>
  307. <!-- 任务消息 -->
  308. <div
  309. v-if="roleCheck()"
  310. class="taskListRow l-flex-RC"
  311. @click="pushPageList('/taskMessage')"
  312. >
  313. <div class="taskIcon taskMessageIcon"></div>
  314. <div class="taskRight">
  315. <div class="taskTitle">{{ $t("user.taskMessage") }}</div>
  316. </div>
  317. </div>
  318. <!-- 提现帐号 -->
  319. <!-- <div v-if="isInland && (user.type == 2 || user.type == 3)" class="taskListRow l-flex-RC"
  320. @click="pushPageList('/settlement')">
  321. <div class="taskIcon joinPayMchIcon"></div>
  322. <div class="taskRight">
  323. <div class="taskTitle">{{ $t("user.settlementAccount") }}</div>
  324. </div>
  325. </div> -->
  326. <!-- 提现帐号 -->
  327. <div
  328. v-if="user.type == 0"
  329. class="taskListRow l-flex-RC"
  330. @click="pushPageList('/bindBankCard')"
  331. >
  332. <div class="taskIcon joinPayMchIcon"></div>
  333. <div class="taskRight">
  334. <div class="taskTitle">绑定银行卡</div>
  335. </div>
  336. </div>
  337. <!-- 提现帐号 -->
  338. <div
  339. v-if="isInland && (user.type == 2 || user.type == 3)"
  340. class="taskListRow l-flex-RC"
  341. @click="pushPageList('/purse')"
  342. >
  343. <div class="taskIcon joinPayMchIcon"></div>
  344. <div class="taskRight">
  345. <div class="taskTitle">钱包</div>
  346. </div>
  347. </div>
  348. <!-- 公告编辑 -->
  349. <div
  350. v-if="user.type == '0'"
  351. class="taskListRow l-flex-RC"
  352. @click="pushPageList('/announcement')"
  353. >
  354. <div class="taskIcon announcementIcon"></div>
  355. <div class="taskRight">
  356. <div class="taskTitle">
  357. {{ $t("user.announcement") }}
  358. </div>
  359. </div>
  360. </div>
  361. <!-- 绑定微信 -->
  362. <div
  363. v-if="isInWeChat"
  364. class="taskListRow l-flex-RC"
  365. @click="pushPageList('/bindWechat')"
  366. >
  367. <div class="taskIcon bindWechatIcon"></div>
  368. <div class="taskRight">
  369. <div class="taskTitle">
  370. {{ $t("user.bindWechat") }}
  371. </div>
  372. </div>
  373. </div>
  374. <!-- 定位修改 -->
  375. <div
  376. v-if="user.type <= '1'"
  377. class="taskListRow l-flex-RC"
  378. @click="pushPageList('/modifyLoc')"
  379. >
  380. <div class="taskIcon modifyLocIcon"></div>
  381. <div class="taskRight">
  382. <div class="taskTitle">
  383. {{ $t("user.modifyLoc") }}
  384. </div>
  385. </div>
  386. </div>
  387. <!-- 数据同步 -->
  388. <div
  389. v-if="user.type == '0'"
  390. class="taskListRow l-flex-RC"
  391. @click="pushPageList('/syncOldData')"
  392. >
  393. <div class="taskIcon syncOldDataIcon"></div>
  394. <div class="taskRight">
  395. <div class="taskTitle">
  396. {{ $t("user.syncOldData") }}
  397. </div>
  398. </div>
  399. </div>
  400. <!-- 修改密码 -->
  401. <div
  402. class="taskListRow l-flex-RC"
  403. @click="pushPageList('/changepassword')"
  404. >
  405. <div class="taskIcon changePasswordIcon"></div>
  406. <div class="taskRight">
  407. <div class="taskTitle">{{ $t("user.changePassword") }}</div>
  408. </div>
  409. </div>
  410. <!-- 意见反馈 -->
  411. <div
  412. v-if="user.type > 1"
  413. class="taskListRow l-flex-RC"
  414. @click="pushPageList('/feedback')"
  415. >
  416. <div class="taskIcon feedbackIcon"></div>
  417. <div class="taskRight">
  418. <div class="taskTitle">{{ $t("user.feedback") }}</div>
  419. </div>
  420. </div>
  421. <div class="taskListRow l-flex-RC" @click="onperExitSys()">
  422. <div class="taskIcon loginOutIcon"></div>
  423. <div class="taskRight">
  424. <div class="taskTitle">{{ $t("user.logOut") }}</div>
  425. </div>
  426. </div>
  427. </div>
  428. </div>
  429. </div>
  430. <!-- 时区弹窗 -->
  431. <kTimezone
  432. @gettimezone="getTimezone"
  433. :selectId="accountDetail.timezone"
  434. @timezonepopfinish="timezonePopFinish"
  435. ref="kTimezoneRef"
  436. ></kTimezone>
  437. <!-- 省市选择弹窗 -->
  438. <van-popup v-model:show="showArea" position="bottom">
  439. <van-cascader
  440. :title="$t('register.areaRequired')"
  441. :options="areaOptions"
  442. @close="showArea = false"
  443. @finish="onConfirmArea"
  444. />
  445. </van-popup>
  446. <!-- 国家选择弹窗 -->
  447. <van-popup v-model:show="showCountry" round position="bottom">
  448. <van-cascader
  449. :title="$t('register.chooseCountryCity')"
  450. :options="countryOptions"
  451. @close="showCountry = false"
  452. @finish="onConfirmCountry"
  453. >
  454. <template #options-top="{ tabIndex }">
  455. <van-search
  456. v-if="tabIndex === 0"
  457. v-model="searchValue"
  458. class="searchCity"
  459. :placeholder="$t('kSelectPop.searchKey')"
  460. @update:model-value="valueChange(tabIndex)"
  461. />
  462. </template>
  463. </van-cascader>
  464. </van-popup>
  465. </div>
  466. </template>
  467. <script>
  468. // 导入时区弹窗
  469. import kTimezone from "@/components/commom/kTimezone/index.vue";
  470. // 导入接口
  471. import { getAdmin } from "@/service/merchantManage";
  472. import { updateAdmin } from "@/service/merchantManage";
  473. import { onMounted, reactive, ref } from "vue";
  474. import sHeader from "@/components/SimpleHeader";
  475. import {
  476. getLocal,
  477. getLoginUser,
  478. $M_EmailAvailable,
  479. $M_PhoneTest,
  480. } from "@/common/js/utils";
  481. import { useRouter } from "vue-router";
  482. import {
  483. tAdminGetRelation,
  484. updatePayPlatform,
  485. updateDIYPassword,
  486. updateOrderNotice,
  487. updateOnOffNotice,
  488. getAreaById,
  489. updateArea,
  490. getCitiesById,
  491. } from "@/service/user";
  492. import {
  493. showFailToast,
  494. showToast,
  495. showSuccessToast,
  496. showConfirmDialog,
  497. } from "vant";
  498. import { useI18n } from "vue-i18n";
  499. import { countriesData } from "@/common/js/countries";
  500. import { countriesDataEn } from "@/common/js/countries-en";
  501. import { useCascaderAreaData } from "@vant/area-data";
  502. export default {
  503. components: { sHeader, kTimezone },
  504. setup() {
  505. let languageName = ref(getLocal("curLang"));
  506. // 引入语言
  507. const { t } = useI18n();
  508. // 账户信息
  509. const accountDetail = ref({});
  510. // 控制地区显示隐藏
  511. const areaShow = ref(true);
  512. // 控制手机显示隐藏
  513. const phoneNumberShow = ref(true);
  514. // 控制邮箱显示隐藏
  515. const mailboxShow = ref(true);
  516. // 控制货币显示隐藏 货币符号,默认“¥”
  517. const symbolShow = ref(true);
  518. // 控制DIY使用密码显示隐藏
  519. const diyPasswordShow = ref(true);
  520. // 控制时区显示隐藏
  521. const timezoneShow = ref(true);
  522. // 控制切换支付平台按钮显示隐藏
  523. const chaSzPayShow = ref(false);
  524. const chaScPayShow = ref(false);
  525. const diyPassword = ref("");
  526. const sunzeePay = ref(false);
  527. const sevencloudPay = ref(false);
  528. // 订单通知开关状态
  529. const orderNotice = ref(false);
  530. // 设备上/离线通知开关状态
  531. const onOffNotice = ref(false);
  532. // 弹窗省市
  533. const showArea = ref(false);
  534. const areaOptions = ref();
  535. // 弹窗国家
  536. const showCountry = ref(false);
  537. const countryOptions = ref(
  538. languageName.value == "zh" ? countriesData : countriesDataEn
  539. );
  540. // 弹窗控制
  541. const clickShowArea = () => {
  542. if (user.ifForeign == 0) {
  543. showArea.value = true;
  544. } else {
  545. showCountry.value = true;
  546. }
  547. };
  548. const user = getLoginUser();
  549. const router = useRouter();
  550. const relationAdminName = ref("");
  551. const relationType = ref(true);
  552. const sys = ref(null);
  553. // 修改的个人信息
  554. const cofficentForm = reactive({
  555. associateParent: relationAdminName.value,
  556. mailBox: accountDetail.value.email,
  557. phone: accountDetail.value.phone,
  558. area: "",
  559. currencySymbol: accountDetail.value.currencySymbol,
  560. timeZone: accountDetail.value.timeZone,
  561. });
  562. //
  563. const params = reactive({
  564. id: "", // 用户ID
  565. payPlatform: "", //支付平台
  566. });
  567. // 点击修改图标
  568. const editClk = (idx) => {
  569. switch (idx) {
  570. case 1:
  571. cofficentForm.associateParent = relationAdminName.value;
  572. relationType.value = !relationType.value;
  573. mailboxShow.value = true;
  574. phoneNumberShow.value = true;
  575. areaShow.value = true;
  576. symbolShow.value = true;
  577. diyPasswordShow.value = true;
  578. timezoneShow.value = true;
  579. break;
  580. case 2:
  581. cofficentForm.mailBox = accountDetail.value.email;
  582. relationType.value = true;
  583. mailboxShow.value = !mailboxShow.value;
  584. phoneNumberShow.value = true;
  585. areaShow.value = true;
  586. symbolShow.value = true;
  587. diyPasswordShow.value = true;
  588. timezoneShow.value = true;
  589. break;
  590. case 3:
  591. cofficentForm.phone = accountDetail.value.phone;
  592. relationType.value = true;
  593. mailboxShow.value = true;
  594. phoneNumberShow.value = !phoneNumberShow.value;
  595. areaShow.value = true;
  596. symbolShow.value = true;
  597. diyPasswordShow.value = true;
  598. timezoneShow.value = true;
  599. break;
  600. case 4:
  601. cofficentForm.area = accountDetail.value.area;
  602. relationType.value = true;
  603. mailboxShow.value = true;
  604. phoneNumberShow.value = true;
  605. areaShow.value = !areaShow.value;
  606. symbolShow.value = true;
  607. diyPasswordShow.value = true;
  608. timezoneShow.value = true;
  609. break;
  610. case 5:
  611. cofficentForm.currencySymbol = accountDetail.value.currencySymbol;
  612. relationType.value = true;
  613. mailboxShow.value = true;
  614. phoneNumberShow.value = true;
  615. areaShow.value = true;
  616. symbolShow.value = !symbolShow.value;
  617. diyPasswordShow.value = true;
  618. timezoneShow.value = true;
  619. break;
  620. case 6:
  621. cofficentForm.currencySymbol = accountDetail.value.currencySymbol;
  622. relationType.value = true;
  623. mailboxShow.value = true;
  624. phoneNumberShow.value = true;
  625. areaShow.value = true;
  626. symbolShow.value = true;
  627. diyPasswordShow.value = !diyPasswordShow.value;
  628. timezoneShow.value = true;
  629. break;
  630. case 7:
  631. cofficentForm.timeZone = accountDetail.value.timeZone;
  632. relationType.value = true;
  633. mailboxShow.value = true;
  634. phoneNumberShow.value = true;
  635. areaShow.value = true;
  636. symbolShow.value = true;
  637. diyPasswordShow.value = true;
  638. timezoneShow.value = !timezoneShow.value;
  639. break;
  640. }
  641. };
  642. // 点击邮箱的确定按钮
  643. const mailboxChg = async (e, idx) => {
  644. switch (idx) {
  645. case 2:
  646. if (!e) {
  647. showToast(t("user.mailboxPlace"));
  648. } else if (!$M_EmailAvailable(e)) {
  649. showToast(t("user.corrEmailPlace"));
  650. } else {
  651. const params = {
  652. id: user.id,
  653. email: e,
  654. };
  655. const { data } = await updateAdmin(params);
  656. mailboxShow.value = true;
  657. if (data.code === "00000") {
  658. showToast(data.message);
  659. setTimeout(() => {
  660. getAcccountDetail();
  661. }, 500);
  662. }
  663. }
  664. break;
  665. case 3:
  666. if (!e) {
  667. showToast(t("user.phoneNumberPlace"));
  668. } else if (!$M_PhoneTest(e)) {
  669. showToast(t("user.corrPhonePlace"));
  670. } else {
  671. const params = {
  672. id: user.id,
  673. phone: e,
  674. };
  675. const { data } = await updateAdmin(params);
  676. phoneNumberShow.value = true;
  677. if (data.code === "00000") {
  678. showToast(data.message);
  679. setTimeout(() => {
  680. getAcccountDetail();
  681. }, 500);
  682. }
  683. }
  684. break;
  685. case 5:
  686. if (!e) {
  687. showToast(t("user.currencySymbolPlace"));
  688. } else {
  689. const params = {
  690. id: user.id,
  691. currencySymbol: e,
  692. };
  693. const { data } = await updateAdmin(params);
  694. symbolShow.value = true;
  695. if (data.code === "00000") {
  696. showToast(data.message);
  697. // 更新本地存储缓存中的currencySymbol的值
  698. user.currencySymbol = e; // 将新的currencySymbol的值赋值给user
  699. localStorage.setItem("loginUser", JSON.stringify(user));
  700. setTimeout(() => {
  701. getAcccountDetail();
  702. }, 1000);
  703. }
  704. }
  705. break;
  706. case 6:
  707. if (!e) {
  708. showToast(t("user.diyPasswordPlace"));
  709. } else {
  710. const params = {
  711. diyPassword: e,
  712. };
  713. const { data } = await updateDIYPassword(params);
  714. diyPasswordShow.value = true;
  715. if (data.code === "00000") {
  716. showToast(t("user.changeSuccess"));
  717. setTimeout(() => {
  718. getAcccountDetail();
  719. }, 1000);
  720. }
  721. }
  722. break;
  723. }
  724. };
  725. // 地区ID
  726. const areaId = ref(null);
  727. // 获取账户详情
  728. const getAcccountDetail = async () => {
  729. getAdmin({ id: user.id }).then((res) => {
  730. accountDetail.value = res.data.data;
  731. if (
  732. accountDetail.value.areaId != null &&
  733. accountDetail.value.type == 2
  734. ) {
  735. areaId.value = accountDetail.value.areaId;
  736. // 查询地址回显
  737. if (accountDetail.value.ifForeign == "0") {
  738. getArea();
  739. } else {
  740. getCities();
  741. }
  742. }
  743. if (accountDetail.value.orderNotice == "1") {
  744. orderNotice.value = true;
  745. }
  746. if (accountDetail.value.onOffNotice == "1") {
  747. onOffNotice.value = true;
  748. }
  749. // 查询时区回显
  750. kTimezoneRef.value.init(accountDetail.value.timeZone);
  751. });
  752. };
  753. // 获取申泽支付平台
  754. const getSunzeeDetail = () => {
  755. getAdmin({ id: 2738 }).then((res) => {
  756. // sunzeePay.value = res.data.data.payPlatform;
  757. if (res.data.data.payPlatform == "1") {
  758. sunzeePay.value = true;
  759. }
  760. });
  761. };
  762. // 获取七云支付平台
  763. const getSevenCloudDetail = () => {
  764. getAdmin({ id: 2739 }).then((res) => {
  765. // sevencloudPay.value = res.data.data.payPlatform;
  766. if (res.data.data.payPlatform == "1") {
  767. sevencloudPay.value = true;
  768. }
  769. });
  770. };
  771. // 点击右侧按钮
  772. const confirmClk = () => {
  773. // 获取缓存的语言
  774. const savedCredentials = localStorage.getItem("savedCredentials");
  775. const curLang = localStorage.getItem("curLang");
  776. // 清空缓存
  777. localStorage.clear();
  778. localStorage.setItem("curLang", curLang);
  779. if (savedCredentials) {
  780. localStorage.setItem("savedCredentials", savedCredentials);
  781. }
  782. if (sys.value) {
  783. setTimeout(() => {
  784. router.push({
  785. path: "login",
  786. query: { relation_admin_id: sys.value.relationAdminId },
  787. });
  788. }, 200);
  789. } else {
  790. setTimeout(() => {
  791. router.push({ path: "login" });
  792. }, 200);
  793. }
  794. };
  795. //切换申泽支付平台
  796. const changeSunzeePay = (value) => {
  797. showConfirmDialog({
  798. title: t("user.tips"),
  799. message: t("user.changeTips"),
  800. })
  801. .then(() => {
  802. params.id = 2738;
  803. if (value) {
  804. params.payPlatform = "1";
  805. } else {
  806. params.payPlatform = "0";
  807. }
  808. const { data } = updatePayPlatform(params);
  809. if (data.code) {
  810. showSuccessToast(t("user.changeSuccess"));
  811. sunzeePay.value = value;
  812. } else {
  813. showFailToast(data.message);
  814. }
  815. })
  816. .catch((error) => {
  817. console.error(error);
  818. });
  819. };
  820. //切换七云支付平台
  821. const changeSevenCloudPay = (value) => {
  822. showConfirmDialog({
  823. title: t("user.tips"),
  824. message: t("user.changeTips"),
  825. })
  826. .then(() => {
  827. params.id = 2739;
  828. if (value) {
  829. params.payPlatform = "1";
  830. } else {
  831. params.payPlatform = "0";
  832. }
  833. const { data } = updatePayPlatform(params);
  834. if (data.code) {
  835. showSuccessToast(t("user.changeSuccess"));
  836. sunzeePay.value = value;
  837. } else {
  838. showFailToast(data.message);
  839. }
  840. })
  841. .catch((error) => {
  842. console.error(error);
  843. });
  844. };
  845. // 切换订单通知开关
  846. const changeOrderNotice = (value) => {
  847. showConfirmDialog({
  848. title: t("user.tips"),
  849. message: orderNotice.value
  850. ? t("user.closeOrderNotice")
  851. : t("user.openOrderNotice"),
  852. })
  853. .then(async () => {
  854. const params = reactive({
  855. adminId: user.id,
  856. orderNotice: value ? "1" : "0",
  857. });
  858. const { data } = await updateOrderNotice(params);
  859. if (data.code == "00000") {
  860. showSuccessToast(
  861. value ? t("user.openSuccess") : t("user.closeSuccess")
  862. );
  863. orderNotice.value = value;
  864. } else if (data.code == "A0001") {
  865. showToast(t("user.pleaseBindWechat"));
  866. } else {
  867. showFailToast(data.message);
  868. }
  869. })
  870. .catch((error) => {
  871. console.error(error);
  872. });
  873. };
  874. // 切换设备通知开关
  875. const changeOnOffNotice = (value) => {
  876. showConfirmDialog({
  877. title: t("user.tips"),
  878. message: onOffNotice.value
  879. ? t("user.closeOnOffNotice")
  880. : t("user.openOnOffNotice"),
  881. })
  882. .then(async () => {
  883. const params = reactive({
  884. adminId: user.id,
  885. onOffNotice: value ? "1" : "0",
  886. });
  887. const { data } = await updateOnOffNotice(params);
  888. if (data.code == "00000") {
  889. showSuccessToast(
  890. value ? t("user.openSuccess") : t("user.closeSuccess")
  891. );
  892. onOffNotice.value = value;
  893. } else if (data.code == "A0001") {
  894. showToast(t("user.pleaseBindWechat"));
  895. } else {
  896. showFailToast(data.message);
  897. }
  898. })
  899. .catch((error) => {
  900. console.error(error);
  901. });
  902. };
  903. // 初始化页面获取列表
  904. onMounted(async () => {
  905. // 加载样式
  906. if (localStorage.getItem("loginSys")) {
  907. const loginSysString = localStorage.getItem("loginSys");
  908. sys.value = JSON.parse(loginSysString);
  909. }
  910. // 获取关联上级
  911. gettAdminGetRelation();
  912. // 获取账户
  913. getAcccountDetail();
  914. if (user.type == 0) {
  915. chaSzPayShow.value = true;
  916. chaScPayShow.value = true;
  917. getSunzeeDetail();
  918. getSevenCloudDetail();
  919. }
  920. // 省市选择器
  921. const areaData = useCascaderAreaData();
  922. areaData.forEach((province) => {
  923. province.children.forEach((city) => {
  924. // 删除城市中的区级信息
  925. delete city.children;
  926. });
  927. });
  928. // 删除台湾、澳门和香港
  929. const provincesToRemove = ["710000", "810000", "820000"];
  930. areaOptions.value = areaData.filter(
  931. (province) => !provincesToRemove.includes(province.value)
  932. );
  933. });
  934. const gettAdminGetRelation = async () => {
  935. const { data } = await tAdminGetRelation({
  936. relationAdminId: user.relationAdminId,
  937. });
  938. if (typeof data === "string") {
  939. relationAdminName.value = data;
  940. }
  941. };
  942. const operUnipay = () => {
  943. router.push({ path: "uniPay" });
  944. };
  945. const onperExitSys = () => {
  946. showConfirmDialog({
  947. title: t("user.tips"),
  948. message: t("user.logOutContent"),
  949. })
  950. .then(() => {
  951. // 获取缓存的语言
  952. const savedCredentials = localStorage.getItem("savedCredentials");
  953. const curLang = localStorage.getItem("curLang");
  954. // 清空缓存
  955. localStorage.clear();
  956. localStorage.setItem("curLang", curLang);
  957. if (savedCredentials) {
  958. localStorage.setItem("savedCredentials", savedCredentials);
  959. }
  960. if (sys.value) {
  961. setTimeout(() => {
  962. router.push({
  963. path: "login",
  964. query: { relation_admin_id: sys.value.relationAdminId },
  965. });
  966. }, 200);
  967. } else {
  968. setTimeout(() => {
  969. router.push({ path: "login" });
  970. }, 200);
  971. }
  972. })
  973. .catch((error) => {
  974. console.error(error);
  975. });
  976. };
  977. const pushPageList = (url) => {
  978. router.push({ path: url });
  979. };
  980. const roleCheck = () => {
  981. if (user.isAdmined) {
  982. return true;
  983. } else {
  984. const menuList = user.menuCodeList.filter((item) => item === "M6");
  985. return menuList.length > 0;
  986. }
  987. };
  988. // 获取地区
  989. const fullName = ref("");
  990. const name = ref("");
  991. // 国内省市
  992. const getArea = async () => {
  993. try {
  994. const { data } = await getAreaById({
  995. areaId: areaId.value,
  996. });
  997. if (data.code === "00000") {
  998. fullName.value = data.data.fullName;
  999. name.value = data.data.name;
  1000. if (fullName.value != name.value) {
  1001. fullName.value = fullName.value.replace(name.value, "").trim();
  1002. fullName.value = fullName.value + "/" + name.value;
  1003. }
  1004. fieldValue.value = fullName.value;
  1005. }
  1006. } catch (error) {
  1007. console.error(error);
  1008. }
  1009. };
  1010. const countryValue = ref("");
  1011. const cityValue = ref("");
  1012. // 国外城市
  1013. const getCities = async () => {
  1014. try {
  1015. const { data } = await getCitiesById({
  1016. areaId: areaId.value,
  1017. });
  1018. if (data.data != "") {
  1019. const citiesCode = data.data.split("/")[0];
  1020. const countriesCode = data.data.split("/")[1];
  1021. countryOptions.value.find((item) => {
  1022. if (item.value === countriesCode) {
  1023. countryValue.value = item.text;
  1024. item.children.find((item) => {
  1025. if (item.value === citiesCode) {
  1026. cityValue.value = item.text;
  1027. }
  1028. });
  1029. }
  1030. });
  1031. if (countryValue.value == cityValue.value) {
  1032. fieldValue.value = cityValue.value;
  1033. } else {
  1034. fieldValue.value = countryValue.value + "/" + cityValue.value;
  1035. }
  1036. }
  1037. } catch (error) {
  1038. console.error(error);
  1039. }
  1040. };
  1041. // 地区弹窗
  1042. const fieldValue = ref("");
  1043. // 地区参数值
  1044. const areaValue = ref("");
  1045. const onConfirmArea = async ({ selectedOptions }) => {
  1046. if (selectedOptions[0]?.text == selectedOptions[1]?.text) {
  1047. fieldValue.value = selectedOptions[0]?.text;
  1048. if (user.ifForeign === "1") {
  1049. areaValue.value = selectedOptions[1]?.value;
  1050. } else {
  1051. areaValue.value = selectedOptions[0]?.text;
  1052. }
  1053. } else {
  1054. fieldValue.value =
  1055. selectedOptions[0]?.text + "/" + selectedOptions[1]?.text;
  1056. if (user.ifForeign === "1") {
  1057. areaValue.value = selectedOptions[1]?.value;
  1058. } else {
  1059. areaValue.value = selectedOptions[0]?.text + selectedOptions[1]?.text;
  1060. }
  1061. }
  1062. const params = {
  1063. adminId: user.id,
  1064. areaValue: areaValue.value,
  1065. };
  1066. const { data } = await updateArea(params);
  1067. if (data.code === "00000") {
  1068. getAcccountDetail();
  1069. }
  1070. showArea.value = false;
  1071. areaShow.value = true;
  1072. };
  1073. const onConfirmCountry = async ({ selectedOptions }) => {
  1074. if (selectedOptions[0]?.text == selectedOptions[1]?.text) {
  1075. fieldValue.value = selectedOptions[1]?.text;
  1076. } else {
  1077. fieldValue.value = selectedOptions
  1078. .map((option) => option.text)
  1079. .join("/");
  1080. }
  1081. areaValue.value = selectedOptions[1]?.value;
  1082. const params = {
  1083. adminId: user.id,
  1084. areaValue: areaValue.value,
  1085. };
  1086. const { data } = await updateArea(params);
  1087. if (data.code === "00000") {
  1088. getAcccountDetail();
  1089. }
  1090. showCountry.value = false;
  1091. areaShow.value = true;
  1092. };
  1093. // 时区弹窗
  1094. const tzFieldValue = ref("");
  1095. const kTimezoneRef = ref(null);
  1096. // 点击时区输入框
  1097. const tzFieldValueInpClk = () => {
  1098. kTimezoneRef.value.openPopup();
  1099. };
  1100. // 选择时区完成
  1101. const timezonePopFinish = async (e) => {
  1102. tzFieldValue.value = e.selectName;
  1103. accountDetail.value.timeZone = e.selectId;
  1104. const params = {
  1105. id: user.id,
  1106. timeZone: e.selectId,
  1107. };
  1108. const { data } = await updateAdmin(params);
  1109. timezoneShow.value = true;
  1110. if (data.code === "00000") {
  1111. showToast(data.message);
  1112. setTimeout(() => {
  1113. getAcccountDetail();
  1114. }, 500);
  1115. }
  1116. };
  1117. const timezoneShowPicker = ref(false);
  1118. const timezoneOnConfirm = ({ selectedOptions }) => {
  1119. timezoneShowPicker.value = false;
  1120. tzFieldValue.value = selectedOptions[0].text;
  1121. };
  1122. const isInWeChat = ref(false);
  1123. const checkInWechat = () => {
  1124. const ua = window.navigator.userAgent.toLowerCase();
  1125. // 如果是在微信中打开
  1126. if (/MicroMessenger/i.test(ua)) {
  1127. isInWeChat.value = true;
  1128. }
  1129. };
  1130. // 是否内陆或海外
  1131. const isInland = ref(true);
  1132. const isAbroad = ref(false);
  1133. // 是否有上级账号
  1134. const haveRelation = ref(false);
  1135. const haveRelationCheck = () => {
  1136. if (user.relationAdminId !== null) {
  1137. haveRelation.value = true;
  1138. }
  1139. };
  1140. const checkIsAbroad = async () => {
  1141. try {
  1142. const userInfo = localStorage.getItem("loginUser");
  1143. const userIfForeign = JSON.parse(userInfo);
  1144. if (userIfForeign.ifForeign === "1") {
  1145. isAbroad.value = true;
  1146. isInland.value = false;
  1147. }
  1148. } catch (error) {
  1149. console.error(error);
  1150. }
  1151. };
  1152. onMounted(() => {
  1153. checkInWechat();
  1154. checkIsAbroad();
  1155. haveRelationCheck();
  1156. });
  1157. // 获取时区回显的值
  1158. const getTimezone = (e) => {
  1159. tzFieldValue.value = e;
  1160. };
  1161. // 搜索关键词
  1162. const searchValue = ref("");
  1163. const countryData = ref(
  1164. languageName.value == "zh" ? countriesData : countriesDataEn
  1165. );
  1166. // 搜索数据
  1167. const valueChange = (index) => {
  1168. let tempOptions = [];
  1169. if (searchValue.value) {
  1170. if (index === 0) {
  1171. // 国家
  1172. countryData.value.forEach((item) => {
  1173. if (item.text.includes(searchValue.value)) {
  1174. tempOptions.push(item);
  1175. }
  1176. });
  1177. countryOptions.value = tempOptions;
  1178. }
  1179. } else {
  1180. countryOptions.value = countryData.value;
  1181. }
  1182. };
  1183. return {
  1184. user,
  1185. operUnipay,
  1186. onperExitSys,
  1187. relationAdminName,
  1188. relationType,
  1189. pushPageList,
  1190. roleCheck,
  1191. sys,
  1192. confirmClk,
  1193. mailboxShow,
  1194. mailboxChg,
  1195. phoneNumberShow,
  1196. editClk,
  1197. cofficentForm,
  1198. params,
  1199. areaShow,
  1200. timezoneShow,
  1201. accountDetail,
  1202. fieldValue,
  1203. tzFieldValue,
  1204. kTimezoneRef,
  1205. tzFieldValueInpClk,
  1206. // areaPopFinish,
  1207. timezonePopFinish,
  1208. timezoneShowPicker,
  1209. isInWeChat,
  1210. getTimezone,
  1211. isAbroad,
  1212. haveRelation,
  1213. checkIsAbroad,
  1214. isInland,
  1215. symbolShow,
  1216. chaSzPayShow,
  1217. chaScPayShow,
  1218. diyPasswordShow,
  1219. diyPassword,
  1220. sunzeePay,
  1221. sevencloudPay,
  1222. changeSunzeePay,
  1223. changeSevenCloudPay,
  1224. orderNotice,
  1225. changeOrderNotice,
  1226. onOffNotice,
  1227. changeOnOffNotice,
  1228. timezoneOnConfirm,
  1229. clickShowArea,
  1230. showArea,
  1231. areaOptions,
  1232. onConfirmArea,
  1233. showCountry,
  1234. countryOptions,
  1235. onConfirmCountry,
  1236. searchValue,
  1237. valueChange,
  1238. };
  1239. },
  1240. };
  1241. </script>
  1242. <style lang="less" scoped>
  1243. @blue: #4d6add;
  1244. @primary-color: #4d6add;
  1245. @text-secondary: #666;
  1246. .userPage {
  1247. background: #f5f6f7;
  1248. min-height: 100vh;
  1249. .card-style() {
  1250. // 卡片公共样式
  1251. background: #fff;
  1252. border-radius: 12px;
  1253. box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  1254. margin-bottom: 12px;
  1255. padding: 16px;
  1256. }
  1257. .userPageBox {
  1258. height: calc(100% - 95px);
  1259. overflow: auto;
  1260. overflow-x: hidden;
  1261. .userBaseBox,
  1262. .commonOperBox {
  1263. margin: 10px;
  1264. .card-style();
  1265. .baseRow {
  1266. margin-bottom: 20px;
  1267. .group2 {
  1268. width: 4px;
  1269. height: 18px;
  1270. background: @primary-color;
  1271. border-radius: 2px;
  1272. margin-right: 12px;
  1273. }
  1274. .baseText {
  1275. font-size: 16px;
  1276. font-weight: 500;
  1277. color: #333;
  1278. }
  1279. }
  1280. .userMessage {
  1281. position: relative;
  1282. display: flex;
  1283. justify-content: center;
  1284. align-items: center;
  1285. background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 100%);
  1286. border-radius: 8px;
  1287. margin: 10px 0;
  1288. .userId {
  1289. flex: 0 0 45%; // 控制两侧宽度
  1290. text-align: center;
  1291. padding: 0 5px;
  1292. white-space: nowrap;
  1293. .infoValue {
  1294. font-size: 15px;
  1295. font-weight: 600;
  1296. color: @primary-color;
  1297. margin-bottom: 6px;
  1298. }
  1299. .infoLabel {
  1300. font-size: 12px;
  1301. color: @text-secondary;
  1302. letter-spacing: 0.5px;
  1303. }
  1304. }
  1305. .verticalDivider {
  1306. position: absolute;
  1307. left: 50%;
  1308. top: 50%;
  1309. transform: translate(-50%, -50%);
  1310. width: 1px;
  1311. height: 40px;
  1312. background: linear-gradient(
  1313. 180deg,
  1314. rgba(200, 200, 200, 0) 0%,
  1315. rgba(200, 200, 200, 1) 50%,
  1316. rgba(200, 200, 200, 0) 100%
  1317. );
  1318. }
  1319. // 添加伪元素强化分割线效果
  1320. &::before {
  1321. content: "";
  1322. position: absolute;
  1323. left: 50%;
  1324. top: 0;
  1325. bottom: 0;
  1326. width: 2px;
  1327. background: rgba(255, 255, 255, 0.5);
  1328. transform: translateX(-50%);
  1329. }
  1330. }
  1331. .userInfoBox {
  1332. background: #ffffff;
  1333. border-radius: 12px;
  1334. box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  1335. padding: 0 16px;
  1336. // 公共项样式
  1337. .userInfo {
  1338. display: flex;
  1339. align-items: center;
  1340. padding: 16px 0;
  1341. border-bottom: 1px solid #f0f3f5;
  1342. &:last-child {
  1343. border-bottom: none;
  1344. }
  1345. .userInfoLeft {
  1346. flex: 0 0 120px;
  1347. color: #606266;
  1348. font-size: 14px;
  1349. font-weight: 500;
  1350. }
  1351. // 编辑图标
  1352. .editIcon {
  1353. color: @primary-color;
  1354. font-size: 18px;
  1355. margin-left: 12px;
  1356. cursor: pointer;
  1357. transition: opacity 0.3s;
  1358. &:hover {
  1359. opacity: 0.8;
  1360. }
  1361. }
  1362. // 输入框区域
  1363. .cust_vantBorder {
  1364. flex: 1;
  1365. margin: 0 12px;
  1366. .van-cell {
  1367. padding: 8px 12px;
  1368. background: #f8fafb;
  1369. border-radius: 6px;
  1370. border: 1px solid #e4e7ed;
  1371. &::after {
  1372. display: none;
  1373. }
  1374. .van-field__control {
  1375. color: #303133;
  1376. }
  1377. .van-icon {
  1378. color: #c0c4cc;
  1379. }
  1380. }
  1381. }
  1382. // 带按钮的输入框
  1383. .relationClass {
  1384. .van-button {
  1385. height: 32px;
  1386. padding: 0 16px;
  1387. border-radius: 6px;
  1388. background: @primary-color;
  1389. border: none;
  1390. font-size: 13px;
  1391. transition: all 0.3s;
  1392. &:active {
  1393. opacity: 0.9;
  1394. transform: scale(0.98);
  1395. }
  1396. }
  1397. }
  1398. // 开关样式
  1399. .van-switch {
  1400. transform: scale(0.9);
  1401. }
  1402. // 状态显示文字
  1403. > span:not(.userInfoLeft) {
  1404. flex: 1;
  1405. color: #303133;
  1406. font-size: 14px;
  1407. padding: 0 12px;
  1408. word-break: break-word;
  1409. }
  1410. // 支付平台切换
  1411. &[v-if*="PayShow"] {
  1412. .cust_vantBorder {
  1413. flex: none;
  1414. }
  1415. > span:last-child {
  1416. flex: none;
  1417. color: @text-secondary;
  1418. font-size: 13px;
  1419. }
  1420. }
  1421. }
  1422. // 移动端适配
  1423. @media (max-width: 768px) {
  1424. padding: 0 12px;
  1425. .userInfo {
  1426. padding: 12px 0;
  1427. flex-wrap: wrap;
  1428. .userInfoLeft {
  1429. flex: 1 1 100%;
  1430. margin-bottom: 8px;
  1431. }
  1432. .cust_vantBorder,
  1433. .relationClass {
  1434. flex: 1;
  1435. margin: 0;
  1436. }
  1437. .editIcon {
  1438. margin-left: auto;
  1439. }
  1440. }
  1441. }
  1442. }
  1443. }
  1444. .operListBox {
  1445. .taskListRow {
  1446. padding: 14px 0;
  1447. border-bottom: 1px solid #f0f0f0;
  1448. &:active {
  1449. background-color: #f8f8f8;
  1450. }
  1451. .taskIcon {
  1452. width: 24px;
  1453. height: 24px;
  1454. margin-right: 12px;
  1455. background-size: contain;
  1456. &.commonToolsIcon {
  1457. background-image: url(../assets/home/commonTools.png);
  1458. }
  1459. &.taskMessageIcon {
  1460. background-image: url(../assets/user/taskMessageIcon.png);
  1461. }
  1462. &.joinPayMchIcon {
  1463. background-image: url(../assets/user/joinPayMchIcon.png);
  1464. }
  1465. &.announcementIcon {
  1466. background-image: url(../assets/user/announcementIcon.png);
  1467. }
  1468. &.bindWechatIcon {
  1469. background-image: url(../assets/user/bindWechatIcon.png);
  1470. }
  1471. &.modifyLocIcon {
  1472. background-image: url(../assets/user/modifyLocIcon.png);
  1473. }
  1474. &.syncOldDataIcon {
  1475. background-image: url(../assets/user/syncOldDataIcon.png);
  1476. }
  1477. &.changePasswordIcon {
  1478. background-image: url(../assets/user/changePasswordIcon.png);
  1479. }
  1480. &.feedbackIcon {
  1481. background-image: url(../assets/user/feedback.png);
  1482. }
  1483. &.loginOutIcon {
  1484. background-image: url(../assets/user/loginOut.png);
  1485. }
  1486. }
  1487. .taskRight {
  1488. flex: 1;
  1489. .taskTitle {
  1490. font-size: 15px;
  1491. color: #333;
  1492. }
  1493. }
  1494. }
  1495. }
  1496. }
  1497. // 弹窗样式调整
  1498. .van-popup {
  1499. border-radius: 12px 12px 0 0;
  1500. overflow: hidden;
  1501. .van-cascader__options {
  1502. height: 50vh;
  1503. }
  1504. .searchCity {
  1505. padding: 8px 16px;
  1506. background: #fff;
  1507. }
  1508. }
  1509. }
  1510. @media (max-width: 768px) {
  1511. .userMessage {
  1512. padding: 16px 0;
  1513. .userId {
  1514. padding: 0 12px;
  1515. .infoValue {
  1516. font-size: 16px;
  1517. }
  1518. }
  1519. .verticalDivider {
  1520. height: 30px;
  1521. }
  1522. }
  1523. }
  1524. </style>