index.vue 30 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312
  1. <template>
  2. <view class="new-users copy-data" :style="{height:pageHeight}">
  3. <view class="top" :style="colorStyle">
  4. <!-- #ifdef MP || APP-PLUS -->
  5. <view class="sys-head">
  6. <view class="sys-bar" :style="{height:sysHeight}"></view>
  7. <!-- #ifdef MP -->
  8. <view class="sys-title" :style="member_style==3?'color:#333':''">{{$t('个人中心')}}</view>
  9. <!-- #endif -->
  10. <view class="bg" :style="member_style==3?'background:#f5f5f5':''"></view>
  11. </view>
  12. <!-- #endif -->
  13. </view>
  14. <view class="mid" style="flex:1;overflow: hidden;" :style="colorStyle">
  15. <scroll-view scroll-y="true" style="height: 100%;">
  16. <view class="head">
  17. <view class="user-card" :class="member_style==3?'unBg':''">
  18. <view class="bg"></view>
  19. <view class="user-info">
  20. <view>
  21. <!-- #ifndef APP-PLUS -->
  22. <view class="avatar-box" :class="{on:userInfo.is_money_level}">
  23. <image class="avatar" :src='userInfo.avatar' v-if="userInfo.avatar"
  24. @click="goEdit()">
  25. </image>
  26. <image v-else class="avatar" src="/static/images/f.png" mode="" @click="goEdit()">
  27. </image>
  28. <view class="headwear" v-if="userInfo.is_money_level && userInfo.svip_open">
  29. <image src="/static/images/headwear.png"></image>
  30. </view>
  31. </view>
  32. <!-- #endif -->
  33. <!-- #ifdef APP-PLUS -->
  34. <view class="avatar-box" :class="{on:userInfo.is_money_level}">
  35. <image class="avatar" :src='userInfo.avatar' v-if="userInfo.avatar"
  36. @click="goEdit()">
  37. </image>
  38. <image v-else class="avatar" src="/static/images/f.png" mode="" @click="goEdit()">
  39. </image>
  40. <view class="headwear" v-if="userInfo.is_money_level && userInfo.svip_open">
  41. <image src="/static/images/headwear.png"></image>
  42. </view>
  43. </view>
  44. <!-- #endif -->
  45. </view>
  46. <view class="info">
  47. <!-- #ifdef MP -->
  48. <view class="name" v-if="!userInfo.uid" @click="openAuto"
  49. style="height: 100%; display: flex; align-items: center;">
  50. {{$t('请点击授权')}}
  51. </view>
  52. <!-- #endif -->
  53. <!-- #ifdef H5 -->
  54. <view class="name" v-if="!userInfo.uid && isWeixin" @click="openAuto"
  55. style="height: 100%; display: flex; align-items: center;">
  56. {{$t('请点击授权')}}
  57. </view>
  58. <!-- #endif -->
  59. <view class="name" v-if="userInfo.uid">
  60. {{userInfo.nickname}}
  61. <image class="live" :src="userInfo.vip_icon" v-if="userInfo.vip_icon"></image>
  62. <view class="vip" v-if="userInfo.is_money_level> 0 && userInfo.svip_open">
  63. <image src="/static/images/svip.png"></image>
  64. </view>
  65. </view>
  66. <view class="num" v-if="userInfo.phone" @click="goEdit()">
  67. <view class="num-txt">ID:{{userInfo.uid}}</view>
  68. <!-- <view class="icon">
  69. <image src="/static/images/edit.png" mode=""></image>
  70. </view> -->
  71. </view>
  72. <view class="phone" v-if="!userInfo.phone && isLogin" @tap="bindPhone">
  73. {{$t('绑定手机号')}}
  74. </view>
  75. </view>
  76. <view class="message">
  77. <navigator url="/pages/users/user_info/index" hover-class="none">
  78. <view class="iconfont icon-shezhi"></view>
  79. </navigator>
  80. </view>
  81. </view>
  82. <view class="num-wrapper">
  83. <view class="num-item" v-if="userInfo.balance_func_status"
  84. @click="goMenuPage('/pages/users/user_money/index')">
  85. <text class="num">{{userInfo.now_money || 0}}</text>
  86. <view class="txt">{{$t('余额')}}</view>
  87. </view>
  88. <view class="num-item" @click="goMenuPage('/pages/users/user_spread_money/index?type=2')">
  89. <text class="num">{{userInfo.brokerage_price || 0}}</text>
  90. <view class="txt">{{$t('佣金')}}</view>
  91. </view>
  92. <view class="num-item" @click="goMenuPage('/pages/users/message_center/index')">
  93. <text class="num">{{userInfo.service_num >= 100 ? '99+' : userInfo.service_num}}</text>
  94. <view class="txt">{{$t('消息')}}</view>
  95. </view>
  96. </view>
  97. </view>
  98. <view class="order-wrapper" style="margin-top: -100rpx;" :class="userInfo.svip_open?'':'height'">
  99. <view class="order-hd flex">
  100. <view class="left">{{$t('订单中心')}}</view>
  101. <navigator class="right flex" hover-class="none" url="/pages/goods/order_list/index"
  102. open-type="navigate">
  103. {{$t('查看全部')}}
  104. <text class="iconfont icon-xiangyou"></text>
  105. </navigator>
  106. </view>
  107. <view class="order-bd">
  108. <block v-for="(item,index) in orderMenu" :key="index">
  109. <navigator class="order-item" hover-class="none" :url="item.url">
  110. <view class="pic">
  111. <!-- <image :src="item.img" mode=""></image> -->
  112. <text class="iconfont" :class="item.img"></text>
  113. <text class="order-status-num" v-if="item.num > 0">{{ item.num > 99?'99+':item.num }}</text>
  114. </view>
  115. <view class="txt">{{$t(item.title)}}</view>
  116. </navigator>
  117. </block>
  118. </view>
  119. </view>
  120. <view class="order-wrapper" :class="userInfo.svip_open?'':'height'">
  121. <view class="order-hd flex">
  122. <view class="left">我的服务</view>
  123. <navigator class="right flex" hover-class="none" url="/pages/rent/orderList?status=-1"
  124. open-type="navigate">
  125. {{$t('查看全部')}}
  126. <text class="iconfont icon-xiangyou"></text>
  127. </navigator>
  128. </view>
  129. <view class="order-bd">
  130. <block v-for="(item,index) in rentMenu" :key="index">
  131. <navigator class="order-item max-width" hover-class="none" :url="item.url">
  132. <view class="pic">
  133. <text class="iconfont" :class="item.img"></text>
  134. <text class="order-status-num" v-if="item.num > 0">{{ item.num > 99?'99+':item.num }}</text>
  135. </view>
  136. <view class="txt">{{ item.title }}</view>
  137. </navigator>
  138. </block>
  139. </view>
  140. </view>
  141. </view>
  142. <!-- 轮播 -->
  143. <view class="slider-wrapper" v-if="imgUrls.length>0 && my_banner_status">
  144. <swiper indicator-dots="true" :autoplay="autoplay" :circular="circular" :interval="interval"
  145. :duration="duration" indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
  146. <block v-for="(item,index) in imgUrls" :key="index">
  147. <swiper-item>
  148. <view @click="goMenuPage(item.url)" class='slide-navigator acea-row row-between-wrapper'
  149. hover-class='none'>
  150. <image :src="item.pic" class="slide-image"></image>
  151. </view>
  152. </swiper-item>
  153. </block>
  154. </swiper>
  155. </view>
  156. <!-- 会员菜单 -->
  157. <view class="user-menus" style="margin-top: 20rpx;">
  158. <view class="list-box">
  159. <!-- #ifdef APP-PLUS || H5 -->
  160. <block v-for="(item,index) in MyMenus" :key="index">
  161. <view class="item" v-if="item.url!='#' && item.url!='/pages/service/index'"
  162. @click="goMenuPage(item.url, item.name)">
  163. <view class="acea-row row-middle">
  164. <image :src="item.pic"></image>
  165. <view>{{$t(item.name)}}</view>
  166. </view>
  167. <view class="iconfont icon-xiangyou"></view>
  168. </view>
  169. </block>
  170. <!-- #endif -->
  171. <!-- #ifdef MP -->
  172. <block v-for="(item,index) in MyMenus" :key="index">
  173. <view class="item" v-if="item.url!='#'
  174. && item.url!='/pages/service/index'
  175. && item.url!='/pages/extension/customer_list/chat'
  176. || (item.url=='/pages/extension/customer_list/chat' && routineContact == 0)"
  177. @click="goMenuPage(item.url, item.name)">
  178. <image :src="item.pic"></image>
  179. <text>{{$t(item.name)}}</text>
  180. </view>
  181. </block>
  182. <button class="item" open-type='contact' v-if="routineContact == 1">
  183. <image src="/static/images/contact.png"></image>
  184. <text>{{$t('联系客服')}}</text>
  185. </button>
  186. <!-- #endif -->
  187. <!-- #ifdef APP-PLUS -->
  188. <view class="item" hover-class="none" @click="goMenuPage('/pages/users/privacy/index?type=3')">
  189. <view class="acea-row row-middle">
  190. <image src="/static/images/menu.png"></image>
  191. <text>{{$t('隐私协议')}}</text>
  192. </view>
  193. <view class="iconfont icon-xiangyou"></view>
  194. </view>
  195. <!-- #endif -->
  196. </view>
  197. </view>
  198. <image :src="copyRightPic" alt="" class='support'></image>
  199. <view class="uni-p-b-98"></view>
  200. </scroll-view>
  201. <editUserModal :isShow="editModal" @closeEdit="closeEdit" @editSuccess="editSuccess">
  202. </editUserModal>
  203. </view>
  204. <pageFooter></pageFooter>
  205. </view>
  206. </template>
  207. <script>
  208. let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
  209. import {
  210. getMenuList,
  211. getUserInfo,
  212. setVisit,
  213. updateUserInfo
  214. } from '@/api/user.js';
  215. import {
  216. wechatAuthV2,
  217. silenceAuth
  218. } from '@/api/public.js'
  219. import {
  220. toLogin
  221. } from '@/libs/login.js';
  222. import {
  223. mapState,
  224. mapGetters
  225. } from "vuex";
  226. // #ifdef H5
  227. import Auth from '@/libs/wechat';
  228. // #endif
  229. const app = getApp();
  230. import dayjs from '@/plugin/dayjs/dayjs.min.js';
  231. import Routine from '@/libs/routine';
  232. import colors from '@/mixins/color';
  233. import pageFooter from '@/components/pageFooter/index.vue'
  234. import {
  235. getCustomer
  236. } from '@/utils/index.js'
  237. import editUserModal from '@/components/eidtUserModal/index.vue'
  238. export default {
  239. components: {
  240. pageFooter,
  241. editUserModal
  242. },
  243. // computed: mapGetters(['isLogin','cartNum']),
  244. computed: {
  245. ...mapGetters({
  246. cartNum: 'cartNum',
  247. isLogin: 'isLogin'
  248. })
  249. },
  250. filters: {
  251. coundTime(val) {
  252. var setTime = val * 1000
  253. var nowTime = new Date()
  254. var rest = setTime - nowTime.getTime()
  255. var day = parseInt(rest / (60 * 60 * 24 * 1000))
  256. // var hour = parseInt(rest/(60*60*1000)%24) //小时
  257. return day + this.$t('day')
  258. },
  259. dateFormat: function(value) {
  260. return dayjs(value * 1000).format('YYYY-MM-DD');
  261. }
  262. },
  263. mixins: [colors],
  264. data() {
  265. return {
  266. editModal: false, // 编辑头像信息
  267. orderMenu: [
  268. {
  269. img: 'icon-daifukuan',
  270. title: '待付款',
  271. url: '/pages/goods/order_list/index?status=0'
  272. },
  273. {
  274. img: 'icon-daifahuo',
  275. title: '待发货',
  276. url: '/pages/goods/order_list/index?status=1'
  277. },
  278. {
  279. img: 'icon-daishouhuo',
  280. title: '待收货',
  281. url: '/pages/goods/order_list/index?status=2'
  282. },
  283. {
  284. img: 'icon-daipingjia',
  285. title: '待评价',
  286. url: '/pages/goods/order_list/index?status=3'
  287. },
  288. {
  289. img: 'icon-a-shouhoutuikuan',
  290. title: '售后/退款',
  291. url: '/pages/users/user_return_list/index'
  292. },
  293. ],
  294. rentMenu: [{
  295. img: 'icon-daifukuan-ju',
  296. title: '待支付',
  297. url: '/pages/rent/order/orderList?status=0'
  298. },{
  299. img: 'icon-daifahuo-ju',
  300. title: '进行中',
  301. url: '/pages/rent/order/orderList?status=1'
  302. }, {
  303. img: 'icon-daishouhuo-ju',
  304. title: '已完成',
  305. url: '/pages/rent/order/orderList?status=2'
  306. }, {
  307. img: 'icon-shouhou-tuikuan-ju',
  308. title: '已释放',
  309. url: '/pages/rent/order/orderList?status=3'
  310. }],
  311. imgUrls: [],
  312. autoplay: true,
  313. circular: true,
  314. interval: 3000,
  315. duration: 500,
  316. isAuto: false, //没有授权的不会自动授权
  317. isShowAuth: false, //是否隐藏授权
  318. orderStatusNum: {},
  319. rentStatusNum: {}, //我的服务数量
  320. userInfo: {},
  321. MyMenus: [],
  322. sysHeight: sysHeight,
  323. mpHeight: 0,
  324. showStatus: 1,
  325. activeRouter: '',
  326. // #ifdef H5 || MP
  327. pageHeight: '100%',
  328. routineContact: 0,
  329. // #endif
  330. // #ifdef APP-PLUS
  331. pageHeight: app.globalData.windowHeight,
  332. // #endif
  333. // #ifdef H5
  334. isWeixin: Auth.isWeixin(),
  335. //#endif
  336. footerSee: false,
  337. member_style: 1,
  338. my_banner_status: 1,
  339. is_diy: uni.getStorageSync('is_diy'),
  340. copyRightPic: '/static/images/support.png', //版权图片
  341. }
  342. },
  343. onLoad(option) {
  344. uni.hideTabBar()
  345. let that = this;
  346. // #ifdef MP
  347. // 小程序静默授权
  348. if (!this.$store.getters.isLogin) {
  349. // Routine.getCode()
  350. // .then(code => {
  351. // Routine.silenceAuth(code).then(res => {
  352. // this.onLoadFun();
  353. // })
  354. // })
  355. // .catch(res => {
  356. // uni.hideLoading();
  357. // });
  358. }
  359. // #endif
  360. // #ifdef H5 || APP-PLUS
  361. if (that.isLogin == false) {
  362. toLogin()
  363. }
  364. //获取用户信息回来后授权
  365. let cacheCode = this.$Cache.get('snsapi_userinfo_code');
  366. let res1 = cacheCode ? option.code != cacheCode : true;
  367. if (this.isWeixin && option.code && res1 && option.scope === 'snsapi_userinfo') {
  368. this.$Cache.set('snsapi_userinfo_code', option.code);
  369. Auth.auth(option.code).then(res => {
  370. this.getUserInfo();
  371. }).catch(err => {})
  372. }
  373. // #endif
  374. // #ifdef APP-PLUS
  375. that.$set(that, 'pageHeight', app.globalData.windowHeight);
  376. // #endif
  377. let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
  378. let curRoute = routes[routes.length - 1].route //获取当前页面路由
  379. this.activeRouter = '/' + curRoute
  380. this.getCopyRight();
  381. },
  382. onReady() {
  383. let self = this
  384. // #ifdef MP
  385. let info = uni.createSelectorQuery().select(".sys-head");
  386. info.boundingClientRect(function(data) { //data - 各种参数
  387. self.mpHeight = data.height
  388. }).exec()
  389. // #endif
  390. },
  391. onShow: function() {
  392. let that = this;
  393. // #ifdef APP-PLUS
  394. uni.getSystemInfo({
  395. success: function(res) {
  396. that.pageHeight = res.windowHeight + 'px'
  397. }
  398. });
  399. // #endif
  400. if (that.isLogin) {
  401. this.getUserInfo();
  402. this.getMyMenus();
  403. this.setVisit();
  404. };
  405. this.getCopyRight();
  406. },
  407. onPullDownRefresh() {
  408. this.onLoadFun();
  409. },
  410. methods: {
  411. getWechatuserinfo() {
  412. //#ifdef H5
  413. Auth.isWeixin() && Auth.toAuth('snsapi_userinfo', '/pages/user/index');
  414. //#endif
  415. },
  416. getRoutineUserInfo(e) {
  417. updateUserInfo({
  418. userInfo: e.detail.userInfo
  419. }).then(res => {
  420. this.getUserInfo();
  421. return this.$util.Tips(this.$t('更新用户信息成功'));
  422. }).catch(res => {
  423. })
  424. },
  425. editSuccess() {
  426. this.editModal = false
  427. this.getUserInfo();
  428. },
  429. closeEdit() {
  430. this.editModal = false
  431. },
  432. // 记录会员访问
  433. setVisit() {
  434. setVisit({
  435. url: '/pages/user/index'
  436. }).then(res => {})
  437. },
  438. // 打开授权
  439. openAuto() {
  440. toLogin();
  441. },
  442. // 授权回调
  443. onLoadFun() {
  444. this.getUserInfo();
  445. this.getMyMenus();
  446. this.setVisit();
  447. },
  448. Setting: function() {
  449. uni.openSetting({
  450. success: function(res) {}
  451. });
  452. },
  453. // 授权关闭
  454. authColse: function(e) {
  455. this.isShowAuth = e
  456. },
  457. // 绑定手机
  458. bindPhone() {
  459. uni.navigateTo({
  460. url: '/pages/users/user_phone/index'
  461. })
  462. },
  463. /**
  464. * 获取个人用户信息
  465. */
  466. getUserInfo: function() {
  467. let that = this;
  468. getUserInfo().then(res => {
  469. that.userInfo = res.data
  470. that.$store.commit("SETUID", res.data.uid);
  471. that.rentMenu.forEach((item, index) => {
  472. switch (item.title) {
  473. case '待支付':
  474. item.num = res.data.rentStatusNum.unpaid_count
  475. break
  476. break
  477. case '进行中':
  478. item.num = res.data.rentStatusNum.progress_count+res.data.rentStatusNum.not_binding_count
  479. break
  480. case '已完成':
  481. item.num = res.data.rentStatusNum.finish_count
  482. break
  483. case '已释放':
  484. item.num = res.data.rentStatusNum.unbinding_count
  485. break
  486. }
  487. });
  488. that.orderMenu.forEach((item, index) => {
  489. switch (item.title) {
  490. case '待付款':
  491. item.num = res.data.orderStatusNum.unpaid_count
  492. break
  493. case '待发货':
  494. item.num = res.data.orderStatusNum.unshipped_count
  495. break
  496. case '待收货':
  497. item.num = res.data.orderStatusNum.received_count
  498. break
  499. case '待评价':
  500. item.num = res.data.orderStatusNum.evaluated_count
  501. break
  502. case '售后/退款':
  503. item.num = res.data.orderStatusNum.refunding_count
  504. break
  505. }
  506. })
  507. uni.stopPullDownRefresh();
  508. });
  509. },
  510. //小程序授权api替换 getUserInfo
  511. getUserProfile() {
  512. toLogin();
  513. },
  514. /**
  515. *
  516. * 获取个人中心图标
  517. */
  518. switchTab(order) {
  519. this.orderMenu.forEach((item, index) => {
  520. switch (item.title) {
  521. case '待付款':
  522. item.img = order.dfk
  523. break
  524. case '待发货':
  525. item.img = order.dfh
  526. break
  527. case '待收货':
  528. item.img = order.dsh
  529. break
  530. case '待评价':
  531. item.img = order.dpj
  532. break
  533. case '售后/退款':
  534. item.img = order.sh
  535. break
  536. }
  537. })
  538. },
  539. getMyMenus: function() {
  540. let that = this;
  541. // if (this.MyMenus.length) return;
  542. getMenuList().then(res => {
  543. let storeMenu = []
  544. let myMenu = []
  545. res.data.routine_my_menus.forEach((el, index, arr) => {
  546. if (el.url == '/pages/admin/order/index' || el.url ==
  547. '/pages/admin/order_cancellation/index' || el.name ==
  548. '客服接待') {
  549. storeMenu.push(el)
  550. } else {
  551. myMenu.push(el)
  552. }
  553. })
  554. this.member_style = Number(res.data.diy_data.value)
  555. this.my_banner_status = res.data.diy_data.my_banner_status
  556. let order01 = {
  557. dfk: 'icon-daifukuan',
  558. dfh: 'icon-daifahuo',
  559. dsh: 'icon-daishouhuo',
  560. dpj: 'icon-daipingjia',
  561. sh: 'icon-a-shouhoutuikuan'
  562. }
  563. let order02 = {
  564. dfk: 'icon-daifukuan-lan',
  565. dfh: 'icon-daifahuo-lan',
  566. dsh: 'icon-daishouhuo-lan',
  567. dpj: 'icon-daipingjia-lan',
  568. sh: 'icon-shouhou-tuikuan-lan'
  569. }
  570. let order03 = {
  571. dfk: 'icon-daifukuan-ju',
  572. dfh: 'icon-daifahuo-ju',
  573. dsh: 'icon-daishouhuo-ju',
  574. dpj: 'icon-daipingjia-ju',
  575. sh: 'icon-shouhou-tuikuan-ju'
  576. }
  577. let order04 = {
  578. dfk: 'icon-daifukuan-fen',
  579. dfh: 'icon-daifahuo-fen',
  580. dsh: 'icon-daishouhuo-fen',
  581. dpj: 'icon-daipingjia-fen',
  582. sh: 'icon-a-shouhoutuikuan-fen'
  583. }
  584. let order05 = {
  585. dfk: 'icon-daifukuan-lv',
  586. dfh: 'icon-daifahuo-lv',
  587. dsh: 'icon-daishouhuo-lv',
  588. dpj: 'icon-daipingjia-lv',
  589. sh: 'icon-shouhou-tuikuan-lv'
  590. }
  591. switch (res.data.diy_data.order_status) {
  592. case 1:
  593. this.switchTab(order01)
  594. break
  595. case 2:
  596. this.switchTab(order02)
  597. break
  598. case 3:
  599. this.switchTab(order03)
  600. break
  601. case 4:
  602. this.switchTab(order04)
  603. break
  604. case 5:
  605. this.switchTab(order05)
  606. break
  607. }
  608. that.$set(that, 'MyMenus', myMenu);
  609. that.$set(that, 'storeMenu', storeMenu);
  610. this.imgUrls = res.data.routine_my_banner
  611. this.routineContact = Number(res.data.routine_contact_type)
  612. });
  613. },
  614. // 编辑页面
  615. goEdit() {
  616. if (this.isLogin == false) {
  617. toLogin();
  618. } else {
  619. // #ifdef MP
  620. if (this.userInfo.is_default_avatar) {
  621. this.editModal = true
  622. return
  623. }
  624. // #endif
  625. uni.navigateTo({
  626. url: '/pages/users/user_info/index'
  627. })
  628. }
  629. },
  630. // 签到
  631. goSignIn() {
  632. uni.navigateTo({
  633. url: '/pages/users/user_sgin/index'
  634. })
  635. },
  636. // goMenuPage
  637. goMenuPage(url, name) {
  638. if (this.isLogin) {
  639. if (url.indexOf('http') === -1) {
  640. // #ifdef H5 || APP-PLUS
  641. if (name && name === '客服接待') {
  642. // return window.location.href = `${location.origin}${url}`
  643. return uni.navigateTo({
  644. url: `/pages/annex/web_view/index?url=${location.origin}${url}`
  645. });
  646. } else if (name && name === '联系客服') {
  647. return getCustomer(url)
  648. } else if (name === '订单核销') {
  649. return uni.navigateTo({
  650. url: url
  651. });
  652. // return window.location.href = `${location.origin}${url}`
  653. }
  654. // #endif
  655. // #ifdef MP
  656. if (name && name === '联系客服') {
  657. return getCustomer(url)
  658. }
  659. if (url != '#' && url == '/pages/users/user_info/index') {
  660. uni.openSetting({
  661. success: function(res) {}
  662. });
  663. }
  664. // #endif
  665. uni.navigateTo({
  666. url: url,
  667. fail(err) {
  668. uni.switchTab({
  669. url: url
  670. })
  671. }
  672. })
  673. } else {
  674. uni.navigateTo({
  675. url: `/pages/annex/web_view/index?url=${url}`
  676. });
  677. }
  678. } else {
  679. // #ifdef MP
  680. this.openAuto()
  681. // #endif
  682. }
  683. },
  684. goRouter(item) {
  685. var pages = getCurrentPages();
  686. var page = (pages[pages.length - 1]).$page.fullPath;
  687. if (item.link == page) return
  688. uni.switchTab({
  689. url: item.link,
  690. fail(err) {
  691. uni.redirectTo({
  692. url: item.link
  693. })
  694. }
  695. })
  696. },
  697. getCopyRight() {
  698. const copyRight = uni.getStorageSync('copyRight')
  699. if (copyRight.copyrightImage) {
  700. this.copyRightPic = copyRight.copyrightImage
  701. }
  702. }
  703. }
  704. }
  705. </script>
  706. <style lang="scss">
  707. page,
  708. body {
  709. height: 100%;
  710. }
  711. .height {
  712. margin-top: -100rpx !important;
  713. }
  714. .unBg {
  715. background-color: unset !important;
  716. .user-info {
  717. .info {
  718. .name {
  719. color: #333333 !important;
  720. font-weight: 600;
  721. }
  722. .num {
  723. color: #333 !important;
  724. .num-txt {
  725. height: 38rpx;
  726. background-color: rgba(51, 51, 51, 0.13);
  727. padding: 0 12rpx;
  728. border-radius: 16rpx;
  729. }
  730. }
  731. }
  732. }
  733. .num-wrapper {
  734. color: #333 !important;
  735. font-weight: 600;
  736. .num-item {
  737. .txt {
  738. color: rgba(51, 51, 51, 0.7) !important;
  739. }
  740. }
  741. }
  742. .message {
  743. .iconfont {
  744. color: #333 !important;
  745. }
  746. .num {
  747. color: #fff !important;
  748. background-color: var(--view-theme) !important;
  749. }
  750. }
  751. .setting {
  752. .iconfont {
  753. color: #333 !important;
  754. }
  755. }
  756. }
  757. .cardVipB {
  758. background-color: #343A48;
  759. width: 100%;
  760. height: 124rpx;
  761. border-radius: 16rpx 16rpx 0 0;
  762. padding: 22rpx 30rpx 0 30rpx;
  763. margin-top: 16px;
  764. .left-box {
  765. .small {
  766. color: #F8D5A8;
  767. font-size: 28rpx;
  768. margin-left: 18rpx;
  769. }
  770. .pictrue {
  771. width: 40rpx;
  772. height: 45rpx;
  773. image {
  774. width: 100%;
  775. height: 100%;
  776. }
  777. }
  778. }
  779. .btn {
  780. color: #BBBBBB;
  781. font-size: 26rpx;
  782. }
  783. .icon-xiangyou {
  784. margin-top: 6rpx;
  785. }
  786. }
  787. .cardVipA {
  788. position: absolute;
  789. background: url('~@/static/images/member.png') no-repeat;
  790. background-size: 100% 100%;
  791. width: 750rpx;
  792. height: 84rpx;
  793. bottom: -2rpx;
  794. left: 0;
  795. padding: 0 56rpx 0 135rpx;
  796. .left-box {
  797. font-size: 26rpx;
  798. color: #905100;
  799. font-weight: 400;
  800. }
  801. .btn {
  802. color: #905100;
  803. font-weight: 400;
  804. font-size: 24rpx;
  805. }
  806. .iconfont {
  807. font-size: 20rpx;
  808. margin: 4rpx 0 0 4rpx;
  809. }
  810. }
  811. .new-users {
  812. display: flex;
  813. flex-direction: column;
  814. height: 100%;
  815. background-color: rgba(32, 33, 53, 1);
  816. .sys-head {
  817. position: relative;
  818. width: 100%;
  819. // background: linear-gradient(90deg, $bg-star1 0%, $bg-end1 100%);
  820. .bg {
  821. position: absolute;
  822. left: 0;
  823. top: 0;
  824. width: 100%;
  825. height: 100%;
  826. background: var(--view-theme);
  827. background-size: 100% auto;
  828. background-position: left bottom;
  829. }
  830. .sys-title {
  831. z-index: 10;
  832. position: relative;
  833. height: 43px;
  834. text-align: center;
  835. line-height: 43px;
  836. font-size: 36rpx;
  837. color: #FFFFFF;
  838. }
  839. }
  840. .head {
  841. // background: #fff;
  842. .user-card {
  843. position: relative;
  844. width: 100%;
  845. height: 380rpx;
  846. margin: 0 auto;
  847. padding: 35rpx 28rpx;
  848. background-image: url("~@/static/images/user01.png");
  849. background-size: 100% auto;
  850. background-color: var(--view-theme);
  851. .user-info {
  852. z-index: 20;
  853. position: relative;
  854. display: flex;
  855. .headwear {
  856. position: absolute;
  857. right: -4rpx;
  858. top: -14rpx;
  859. width: 44rpx;
  860. height: 44rpx;
  861. image {
  862. width: 100%;
  863. height: 100%;
  864. }
  865. }
  866. .live {
  867. width: 28rpx;
  868. height: 28rpx;
  869. margin-left: 20rpx;
  870. }
  871. .bntImg {
  872. width: 120rpx;
  873. height: 120rpx;
  874. border-radius: 50%;
  875. text-align: center;
  876. line-height: 120rpx;
  877. background-color: unset;
  878. position: relative;
  879. .avatarName {
  880. font-size: 16rpx;
  881. color: #fff;
  882. text-align: center;
  883. background-color: rgba(0, 0, 0, 0.6);
  884. height: 37rpx;
  885. line-height: 37rpx;
  886. position: absolute;
  887. bottom: 0;
  888. left: 0;
  889. width: 100%;
  890. }
  891. }
  892. .avatar-box {
  893. position: relative;
  894. display: flex;
  895. align-items: center;
  896. justify-content: center;
  897. width: 120rpx;
  898. height: 120rpx;
  899. border-radius: 50%;
  900. &.on {
  901. .avatar {
  902. border: 2px solid #FFAC65;
  903. border-radius: 50%;
  904. box-sizing: border-box;
  905. }
  906. }
  907. }
  908. .avatar {
  909. position: relative;
  910. width: 120rpx;
  911. height: 120rpx;
  912. border-radius: 50%;
  913. }
  914. .info {
  915. flex: 1;
  916. display: flex;
  917. flex-direction: column;
  918. justify-content: space-between;
  919. margin-left: 20rpx;
  920. padding: 15rpx 0;
  921. .name {
  922. display: flex;
  923. align-items: center;
  924. color: #fff;
  925. font-size: 31rpx;
  926. .vip {
  927. margin-left: 10rpx;
  928. image {
  929. width: 78rpx;
  930. height: 30rpx;
  931. display: block;
  932. }
  933. }
  934. }
  935. .num {
  936. display: flex;
  937. align-items: center;
  938. font-size: 26rpx;
  939. color: rgba(255, 255, 255, 0.6);
  940. image {
  941. width: 22rpx;
  942. height: 23rpx;
  943. margin-left: 20rpx;
  944. }
  945. }
  946. }
  947. }
  948. .message {
  949. align-self: flex-start;
  950. position: relative;
  951. margin-top: 15rpx;
  952. margin-right: 20rpx;
  953. .num {
  954. position: absolute;
  955. top: -8rpx;
  956. left: 18rpx;
  957. padding: 0 6rpx;
  958. height: 28rpx;
  959. border-radius: 12rpx;
  960. background-color: #fff;
  961. font-size: 18rpx;
  962. line-height: 28rpx;
  963. text-align: center;
  964. color: var(--view-theme);
  965. }
  966. .iconfont {
  967. font-size: 40rpx;
  968. color: #fff;
  969. }
  970. }
  971. .num-wrapper {
  972. z-index: 30;
  973. position: relative;
  974. display: flex;
  975. align-items: center;
  976. justify-content: space-between;
  977. margin-top: 22rpx;
  978. // padding: 0 47rpx;
  979. color: #fff;
  980. .num-item {
  981. width: 33.33%;
  982. text-align: center;
  983. &~.num-item {
  984. position: relative;
  985. &:before {
  986. content: '';
  987. position: absolute;
  988. width: 1rpx;
  989. height: 28rpx;
  990. top: 50%;
  991. margin-top: -14rpx;
  992. background-color: rgba(255, 255, 255, 0.4);
  993. left: 0;
  994. }
  995. }
  996. .num {
  997. font-size: 42rpx;
  998. font-weight: bold;
  999. }
  1000. .txt {
  1001. margin-top: 8rpx;
  1002. font-size: 26rpx;
  1003. color: rgba(255, 255, 255, 0.6);
  1004. }
  1005. }
  1006. }
  1007. .sign {
  1008. z-index: 200;
  1009. position: absolute;
  1010. right: -12rpx;
  1011. top: 80rpx;
  1012. display: flex;
  1013. align-items: center;
  1014. justify-content: center;
  1015. width: 120rpx;
  1016. height: 60rpx;
  1017. background: linear-gradient(90deg, rgba(255, 225, 87, 1) 0%, rgba(238, 193, 15, 1) 100%);
  1018. border-radius: 29rpx 4rpx 4rpx 29rpx;
  1019. color: #282828;
  1020. font-size: 28rpx;
  1021. font-weight: bold;
  1022. }
  1023. }
  1024. .order-wrapper {
  1025. background: rgba(22, 23, 38, 1);
  1026. margin: 0 30rpx;
  1027. border-radius: 16rpx;
  1028. position: relative;
  1029. margin-top: -10rpx;
  1030. .order-hd {
  1031. justify-content: space-between;
  1032. padding: 20rpx 20rpx 20rpx 30rpx;
  1033. margin-top: 25rpx;
  1034. font-size: 30rpx;
  1035. color: #FFFFFF;
  1036. border-bottom: 2px solid var(--view-theme);
  1037. .left {
  1038. font-weight: bold;
  1039. }
  1040. .right {
  1041. display: flex;
  1042. align-items: center;
  1043. color: #FFFFFF;
  1044. font-size: 26rpx;
  1045. .icon-xiangyou {
  1046. margin-left: 5rpx;
  1047. font-size: 26rpx;
  1048. }
  1049. }
  1050. }
  1051. .order-bd {
  1052. display: flex;
  1053. padding: 0 0;
  1054. .order-item {
  1055. display: flex;
  1056. flex-direction: column;
  1057. justify-content: center;
  1058. align-items: center;
  1059. width: 20%;
  1060. height: 140rpx;
  1061. &.max-width {
  1062. width: 25%;
  1063. }
  1064. .pic {
  1065. position: relative;
  1066. text-align: center;
  1067. .iconfont {
  1068. font-size: 48rpx;
  1069. color: rgba(255, 255, 255, 1);
  1070. }
  1071. image {
  1072. width: 58rpx;
  1073. height: 48rpx;
  1074. }
  1075. }
  1076. .txt {
  1077. margin-top: 6rpx;
  1078. font-size: 26rpx;
  1079. color: rgba(255, 255, 255, 1);
  1080. }
  1081. }
  1082. }
  1083. }
  1084. }
  1085. .slider-wrapper {
  1086. margin: 20rpx 30rpx;
  1087. height: 130rpx;
  1088. swiper,
  1089. swiper-item {
  1090. height: 100%;
  1091. }
  1092. image {
  1093. width: 100%;
  1094. height: 130rpx;
  1095. border-radius: 16rpx;
  1096. }
  1097. }
  1098. .user-menus {
  1099. background-color: rgba(22, 23, 38, 1);
  1100. margin: 0 30rpx;
  1101. border-radius: 16rpx;
  1102. .menu-title {
  1103. padding: 30rpx 30rpx 40rpx;
  1104. font-size: 30rpx;
  1105. color: #FFFFFF;
  1106. font-weight: bold;
  1107. }
  1108. .list-box {
  1109. display: flex;
  1110. flex-wrap: wrap;
  1111. padding: 15rpx 30rpx;
  1112. }
  1113. .item {
  1114. position: relative;
  1115. display: flex;
  1116. align-items: center;
  1117. justify-content: space-between;
  1118. width: 100%;
  1119. font-size: 26rpx;
  1120. color: #FFFFFF;
  1121. line-height: 1;
  1122. padding: 15rpx 0;
  1123. border-bottom: 2px solid var(--view-theme);
  1124. ;
  1125. image {
  1126. width: 52rpx;
  1127. height: 52rpx;
  1128. margin-right: 10rpx;
  1129. }
  1130. &:last-child::before {
  1131. display: none;
  1132. }
  1133. &:last-child {
  1134. border-bottom: none;
  1135. }
  1136. }
  1137. button {
  1138. font-size: 28rpx;
  1139. }
  1140. }
  1141. .phone {
  1142. color: #fff;
  1143. background-color: #CCC;
  1144. border-radius: 15px;
  1145. width: max-content;
  1146. padding: 0 10px;
  1147. }
  1148. .order-status-num {
  1149. min-width: 12rpx;
  1150. background-color: #fff;
  1151. color: var(--view-theme);
  1152. border-radius: 15px;
  1153. position: absolute;
  1154. right: -14rpx;
  1155. top: -15rpx;
  1156. font-size: 20rpx;
  1157. padding: 0 8rpx;
  1158. border: 1px solid var(--view-theme);
  1159. }
  1160. .support {
  1161. width: 219rpx;
  1162. height: 74rpx;
  1163. margin: 54rpx auto;
  1164. display: block;
  1165. }
  1166. }
  1167. .card-vip {
  1168. display: flex;
  1169. align-items: center;
  1170. justify-content: space-between;
  1171. position: relative;
  1172. width: 690rpx;
  1173. height: 134rpx;
  1174. margin: -72rpx auto 0;
  1175. background: url('~@/static/images/user_vip.png');
  1176. background-size: cover;
  1177. padding-left: 118rpx;
  1178. padding-right: 34rpx;
  1179. .left-box {
  1180. font-size: 24rpx;
  1181. color: #AE5A2A;
  1182. .big {
  1183. font-size: 28rpx;
  1184. }
  1185. .small {
  1186. opacity: 0.8;
  1187. margin-top: 10rpx;
  1188. }
  1189. }
  1190. .btn {
  1191. height: 52rpx;
  1192. line-height: 52rpx;
  1193. padding: 0 10rpx;
  1194. text-align: center;
  1195. background: #fff;
  1196. border-radius: 28rpx;
  1197. font-size: 26rpx;
  1198. color: #AE5A2A;
  1199. }
  1200. }
  1201. .setting {
  1202. margin-top: 15rpx;
  1203. margin-left: 15rpx;
  1204. color: #fff;
  1205. .iconfont {
  1206. font-size: 40rpx;
  1207. }
  1208. }
  1209. .new-users {
  1210. padding-bottom: 0;
  1211. padding-bottom: constant(safe-area-inset-bottom);
  1212. padding-bottom: env(safe-area-inset-bottom);
  1213. }
  1214. </style>