user.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754
  1. <template>
  2. <view class="box">
  3. <view class="top">
  4. <view class="customerMes">
  5. <image @click="updateUserInfo" v-if="headImg" :src="headImg" mode="" style="width: 88rpx;height: 88rpx;border-radius: 44rpx;"></image>
  6. <image @click="updateUserInfo" v-else src="../../static/img/icon_me.png" mode="" style="width: 88rpx;height: 88rpx;border-radius: 44rpx;"></image>
  7. <view class="mes">
  8. <view class="nick">
  9. <view class="nickName" v-if="nickName">{{nickName}}</view>
  10. <view class="grade" v-if="numList.levelName">{{numList.levelName}}</view>
  11. </view>
  12. <view class="phone">{{phone}}</view>
  13. </view>
  14. </view>
  15. <view class="headerBox">
  16. <view class="quan" @click="gonavigateTo('../index/discountCard')">
  17. <view class="numStr">{{numList.count?numList.count:0}}</view>
  18. <view class="nameStr">优惠券</view>
  19. </view>
  20. <view class="quan">
  21. <view class="numStr">{{numList.totalIntegral?numList.totalIntegral:0}}</view>
  22. <view class="nameStr">积分</view>
  23. </view>
  24. <view class="quan" @click="gonavigateTo('../index/vipCard')">
  25. <view class="numStr">{{numList.cardNum?numList.cardNum:0}}</view>
  26. <view class="nameStr">会员卡</view>
  27. </view>
  28. </view>
  29. </view>
  30. <!-- 我的订单 -->
  31. <view class="orderBox">
  32. <view class="orderTitle">我的订单</view>
  33. <view class="orderLIneBox">
  34. <view class="orderLine" @click="goorder(1)">
  35. <view class="orderImgBox">
  36. <view class="orderNum" v-show="numList.waitPurchaseSize>0">{{numList.waitPurchaseSize>99?'99+':numList.waitPurchaseSize}}</view>
  37. <image src="../../static/img/icon_daifukuan.png" mode="" class="orderLineImg"></image>
  38. </view>
  39. <view class="orderLineTxt">待付款</view>
  40. </view>
  41. <view class="orderLine" @click="goorder(2)">
  42. <view class="orderImgBox">
  43. <view class="orderNum" v-show="numList.waitServiceSize>0">{{numList.waitServiceSize>99?'99+':numList.waitServiceSize}}</view>
  44. <image src="../../static/img/icon_daifuwu.png" mode="" class="orderLineImg"></image>
  45. </view>
  46. <view class="orderLineTxt">待服务</view>
  47. </view>
  48. <view class="orderLine" @click="goorder(3)">
  49. <view class="orderImgBox">
  50. <view class="orderNum" v-show="numList.hasOverSize>0">{{numList.hasOverSize>99?'99+':numList.hasOverSize}}</view>
  51. <image src="../../static/img/icon_yiwancheng.png" mode="" class="orderLineImg"></image>
  52. </view>
  53. <view class="orderLineTxt">已完成</view>
  54. </view>
  55. <view class="orderLine" @click="goorder(0)">
  56. <view class="orderImgBox">
  57. <view class="orderNum" v-show="numList.allSize>0">{{numList.allSize>99?'99+':numList.allSize}}</view>
  58. <image src="../../static/img/icon_allorder.png" mode="" class="orderLineImg"></image>
  59. </view>
  60. <view class="orderLineTxt">全部</view>
  61. </view>
  62. </view>
  63. </view>
  64. <!-- 店铺信息 -->
  65. <view class="shopBox">
  66. <view class="shopCont">
  67. <view class="shopName">{{numList.shopInfo.shopName}}</view>
  68. <view class="shopRightBox">
  69. <image src="../../static/img/icon_ditu.png" mode="" class="shopRightImg"
  70. style="margin-right: 67rpx;" @click="map"></image>
  71. <image src="../../static/img/icon_phone.png" mode="" class="shopRightImg" @click="call"></image>
  72. </view>
  73. </view>
  74. <view class="shopTime" v-if="numList.shopInfo.startTime && numList.shopInfo.endTime">
  75. {{numList.shopInfo.startTime}}-{{numList.shopInfo.endTime}}</view>
  76. <view class="address">
  77. <view class="Address">
  78. {{numList.shopInfo.provinceName}}{{numList.shopInfo.cityName}}{{numList.shopInfo.areaName}}{{numList.shopInfo.address}}
  79. </view>
  80. <!-- <view class="distance" v-if="numList.shopInfo.distance&&numList.shopInfo.distance!= '0.00'">{{numList.shopInfo.distance}}km</view> -->
  81. </view>
  82. </view>
  83. <!-- 我的 相关 -->
  84. <view class="rowBoxBg">
  85. <view class="rowBox" @click="gonavigateTo('../user/expertServices')">
  86. <view class="leftView">
  87. <image src="../../static/img/icon_me1.png" mode="" class="liftIcon"></image>
  88. <view class="rowTitle">服务专家</view>
  89. </view>
  90. <image src="../../static/img/big_rightArrow.png" mode="" class="big_rightArrow"></image>
  91. </view>
  92. <view class="rowBox" @click="gonavigateTo('./addCar/cailist')">
  93. <view class="leftView">
  94. <image src="../../static/img/icon_me2.png" mode="" class="liftIcon"></image>
  95. <view class="rowTitle">我的车库</view>
  96. </view>
  97. <image src="../../static/img/big_rightArrow.png" mode="" class="big_rightArrow"></image>
  98. </view>
  99. <view class="rowBox" @click="gonavigateTo('myBespeak')">
  100. <view class="leftView">
  101. <image src="../../static/img/icon_me3.png" mode="" class="liftIcon"></image>
  102. <view class="rowTitle">我的预约</view>
  103. </view>
  104. <image src="../../static/img/big_rightArrow.png" mode="" class="big_rightArrow"></image>
  105. </view>
  106. <view class="rowBox" @click="gonavigateTo('historySpend')">
  107. <view class="leftView">
  108. <image src="../../static/img/icon_me4.png" mode="" class="liftIcon"></image>
  109. <view class="rowTitle">历史消费</view>
  110. </view>
  111. <image src="../../static/img/big_rightArrow.png" mode="" class="big_rightArrow"></image>
  112. </view>
  113. <view class="rowBox" @click="gonavigateTo('checkReport')">
  114. <view class="leftView">
  115. <image src="../../static/img/icon_me5.png" mode="" class="liftIcon"></image>
  116. <view class="rowTitle">车检报告</view>
  117. </view>
  118. <image src="../../static/img/big_rightArrow.png" mode="" class="big_rightArrow"></image>
  119. </view>
  120. <!-- <view class="rowBox" @click="gonavigateTo('invite')">
  121. <view class="leftView">
  122. <image src="../../static/img/icon_me6.png" mode="" class="liftIcon"></image>
  123. <view class="rowTitle">分享给好友</view>
  124. </view>
  125. <image src="../../static/img/big_rightArrow.png" mode="" class="big_rightArrow"></image>
  126. </view> -->
  127. <button open-type="share" class="rowBox" >
  128. <view class="leftView">
  129. <image src="../../static/img/icon_me6.png" mode="" class="liftIcon"></image>
  130. <view class="rowTitle">分享给好友</view>
  131. </view>
  132. <image src="../../static/img/big_rightArrow.png" mode="" class="big_rightArrow"></image>
  133. </button>
  134. <view class="rowBox" @click="gonavigateTo('feedBack')">
  135. <view class="leftView">
  136. <image src="../../static/img/icon_me7.png" mode="" class="liftIcon"></image>
  137. <view class="rowTitle">意见反馈</view>
  138. </view>
  139. <image src="../../static/img/big_rightArrow.png" mode="" class="big_rightArrow"></image>
  140. </view>
  141. <view class="rowBox" @click="gonavigateTo('')">
  142. <view class="leftView">
  143. <image src="../../static/img/icon_me8.png" mode="" class="liftIcon"></image>
  144. <view class="rowTitle">清除缓存</view>
  145. </view>
  146. <image src="../../static/img/big_rightArrow.png" mode="" class="big_rightArrow"></image>
  147. </view>
  148. </view>
  149. <!-- <view class="signOut" @click="signOut">退出登录</view> -->
  150. <!-- 手机号授权 -->
  151. <view class="authorizBox" v-if="authorizShow" @click="authorizShow=false">
  152. <view class="authorizCont" @click.stop="">
  153. <view class="authorizName">{{wxOpenData.miniAppName}}</view>
  154. <view class="authorizMs">您好,欢迎访问本店,授权手机号登录能获取我们最新的促销活动哦~</view>
  155. <button class="authorizContbutton" type="default" open-type="getPhoneNumber"
  156. @getphonenumber="decryptPhoneNumber">授权</button>
  157. </view>
  158. <view style="text-align: center;padding-top: 56rpx;">
  159. <image src="../../static/timg/icon_guanbi@2x.png" mode="" class="authorizCloseImg"></image>
  160. </view>
  161. </view>
  162. </view>
  163. </template>
  164. <script>
  165. export default {
  166. data() {
  167. return {
  168. userInfo: '',
  169. shopData: '',
  170. numList: '',
  171. uid: '',
  172. headImg: '',
  173. location: {
  174. lng: '',
  175. lat: '',
  176. },
  177. authorizShow: false,
  178. code: '',
  179. wxOpenData: '',
  180. nickName:'',
  181. phone:'',
  182. ext:'',
  183. }
  184. },
  185. onLoad(opt) {
  186. this.ext=this.$common.getExtStoreId();
  187. },
  188. onShow() {
  189. const wxOpenData = this.$store.state.wxOpenData;
  190. this.wxOpenData=wxOpenData
  191. //console.log()
  192. if (wxOpenData) {
  193. this.uid = wxOpenData.loginInfo.uid;
  194. }
  195. this.userInfo = this.$store.state.userInfo;
  196. if (this.userInfo) {
  197. this.queryMyDetail();
  198. } else {
  199. this.authorizShow = true;
  200. }
  201. },
  202. methods: {
  203. updateUserInfo(){
  204. var that=this;
  205. uni.getUserProfile({
  206. lang:'zh_CN',
  207. desc:'登录',
  208. success:(res)=>{
  209. console.log(res);
  210. that.headImg=res.userInfo.avatarUrl;
  211. that.nickName=res.userInfo.nickName;
  212. that.$http('miniApp2/sys/updateUserInfo', {
  213. nickName:res.userInfo.nickName,
  214. unionId:that.ext.unionId,
  215. headImg: res.userInfo.avatarUrl,
  216. openId: that.wxOpenData.openid
  217. }, 'POST').then(res => {
  218. })
  219. },
  220. fail:(res)=>{
  221. console.log(res)
  222. }
  223. });
  224. },
  225. decryptPhoneNumber: function(e) {
  226. console.log(e);
  227. this.code = e.detail.code
  228. this.wxPhoneLogin()
  229. this.authorizShow = false;
  230. },
  231. wxPhoneLogin() {
  232. var that = this;
  233. this.$http('miniApp2/sys/wxPhoneLogin', {
  234. appId:this.ext.appId,
  235. unionId:this.ext.unionId,
  236. code: this.code,
  237. openId: this.wxOpenData.openid
  238. }, 'POST').then(res => {
  239. var data = res.data;
  240. if (data.loginInfo) {
  241. this.userInfo = data.loginInfo.openUser;
  242. this.wxOpenData = data.loginInfo;
  243. this.$store.commit('mutationswxOpenData', data.loginInfo)
  244. this.$store.commit('mutationsuserInfo', this.userInfo)
  245. this.queryMyDetail()
  246. }
  247. })
  248. },
  249. map() {
  250. console.log("打开地图")
  251. var that = this;
  252. if (!that.numList.shopInfo.lat || !that.numList.shopInfo.lng) {
  253. uni.showToast({
  254. title: '该店铺未设置定位',
  255. icon: 'none',
  256. duration: 3000
  257. });
  258. } else {
  259. uni.openLocation({
  260. latitude: Number(that.numList.shopInfo.lat),
  261. longitude: Number(that.numList.shopInfo.lng),
  262. name: that.numList.shopInfo.shopName,
  263. address: that.numList.shopInfo.provinceName + that.numList.shopInfo.cityName + that.numList
  264. .shopInfo.areaName + that.numList.shopInfo.address,
  265. success: function() {
  266. console.log('success');
  267. },
  268. fail(err) {
  269. console.log(err)
  270. }
  271. });
  272. }
  273. },
  274. call() {
  275. uni.makePhoneCall({
  276. phoneNumber: this.numList.shopInfo.contactorPhone
  277. });
  278. },
  279. goorder(num) {
  280. uni.navigateTo({
  281. url: './myOrder/myOrder?num=' + num
  282. })
  283. },
  284. queryMyDetail() {
  285. uni.showLoading({
  286. title: '加载中'
  287. })
  288. this.$http('openreservation/getInfo', {
  289. lat: this.location.lat ? this.location.lat : '',
  290. lng: this.location.lng ? this.location.lng : '',
  291. }, 'GET').then(res => {
  292. uni.hideLoading();
  293. this.numList = res.data
  294. this.headImg = res.data.openUser.headImg;
  295. this.nickName = res.data.openUser.nickName;
  296. this.phone = res.data.openUser.mobilePhone;
  297. })
  298. },
  299. gonavigateTo(url) {
  300. uni.navigateTo({
  301. url: url
  302. })
  303. },
  304. signOut() {
  305. //uni.clearStorageSync();
  306. uni.removeStorageSync('logodata');
  307. // uni.navigateTo({
  308. // url: '../login/login'
  309. // })
  310. },
  311. },
  312. onShareAppMessage(res) {
  313. return {
  314. title: this.wxOpenData.miniAppName,
  315. //imageUrl:img,
  316. path: 'pages/index/index',
  317. success(res){
  318. uni.showToast({
  319. title:'分享成功'
  320. })
  321. },
  322. fail(res){
  323. uni.showToast({
  324. title:'分享失败',
  325. icon:'none',
  326. duration: 3000
  327. })
  328. }
  329. }
  330. },
  331. // 下拉刷新
  332. onPullDownRefresh() {
  333. this.queryMyDetail()
  334. setTimeout(function() {
  335. uni.stopPullDownRefresh();
  336. }, 1000);
  337. },
  338. }
  339. </script>
  340. <style scoped>
  341. button::after{
  342. border: none;
  343. }
  344. button{
  345. position: relative;
  346. display: block;
  347. margin-left: 0;
  348. margin-right: 0;
  349. padding-left: 0px;
  350. padding-right: 0px;
  351. box-sizing: border-box;
  352. // font-size: 18px;
  353. text-align: center;
  354. text-decoration: none;
  355. // line-height: 1;
  356. line-height: 1.35;
  357. // border-radius: 5px;
  358. -webkit-tap-highlight-color: transparent;
  359. overflow: hidden;
  360. color: #000000;
  361. background-color: #fff;
  362. height: 100%;
  363. }
  364. .box {
  365. width: 100vw;
  366. min-height: 100vh;
  367. background: #F4F5F7;
  368. padding-bottom: 60rpx;
  369. }
  370. .top {
  371. height: 350rpx;
  372. padding: 20rpx 24rpx 0;
  373. background-color: #D53533;
  374. border-radius: 0 0 5% 5%;
  375. }
  376. .customerMes {
  377. display: flex;
  378. }
  379. .mes {
  380. margin-left: 20rpx;
  381. }
  382. .nick {
  383. margin-bottom: 5rpx;
  384. display: flex;
  385. justify-content: flex-start;
  386. align-items: center;
  387. }
  388. .nickName {
  389. font-size: 34rpx;
  390. color: #FFFFFF;
  391. font-weight: bold;
  392. line-height: 48rpx;
  393. height: 48rpx;
  394. }
  395. .grade {
  396. margin-left: 15rpx;
  397. font-size: 24rpx;
  398. color: #FFFFFF;
  399. padding: 0rpx 10rpx;
  400. border: 1rpx solid #FFFFFF;
  401. border-radius: 4rpx;
  402. height: 36rpx;
  403. }
  404. .phone {
  405. font-size: 24rpx;
  406. color: #FFFFFF;
  407. }
  408. .headerBox {
  409. padding: 30rpx 24rpx;
  410. display: flex;
  411. justify-content: space-around;
  412. }
  413. .quan {
  414. display: flex;
  415. flex-direction: column;
  416. align-items: center;
  417. height: 120rpx;
  418. }
  419. .numStr {
  420. font-size: 40rpx;
  421. font-weight: bold;
  422. color: #FFFFFF;
  423. line-height: 56rpx;
  424. }
  425. .nameStr {
  426. font-size: 24rpx;
  427. color: #FFFFFF;
  428. }
  429. .orderBox {
  430. margin: 0rpx 24rpx;
  431. background: #FFFFFF;
  432. padding: 30rpx 20rpx;
  433. border-radius: 10rpx;
  434. margin-top: -100rpx;
  435. }
  436. .orderTitle {
  437. font-size: 30rpx;
  438. color: #333333;
  439. font-weight: bold;
  440. }
  441. .orderAll {
  442. display: flex;
  443. justify-content: space-between;
  444. align-items: center;
  445. }
  446. .orderLine {
  447. width: 25%;
  448. text-align: center;
  449. }
  450. .orderLineImg {
  451. width: 60rpx;
  452. height: 60rpx;
  453. }
  454. .orderLineTxt {
  455. font-size: 24rpx;
  456. color: #333333;
  457. }
  458. .orderImgBox {
  459. text-align: center;
  460. position: relative;
  461. }
  462. .orderLIneBox {
  463. display: flex;
  464. justify-content: space-between;
  465. padding-top: 30rpx;
  466. }
  467. .orderNum {
  468. height: 26rpx;
  469. line-height: 26rpx;
  470. background: #FF0000;
  471. padding: 0 8rpx;
  472. border-radius: 13rpx;
  473. color: #FFFFFF;
  474. font-size: 20rpx;
  475. position: absolute;
  476. left: 90rpx;
  477. z-index: 11;
  478. }
  479. .big_rightArrow {
  480. margin-right: 20rpx;
  481. width: 30rpx;
  482. height: 30rpx;
  483. }
  484. .rowBoxBg {
  485. margin: 20rpx 24rpx;
  486. background: #FFFFFF;
  487. border-radius: 10rpx;
  488. }
  489. .rowBox {
  490. display: flex;
  491. justify-content: space-between;
  492. background: #FFFFFF;
  493. padding: 35rpx 0rpx;
  494. border-radius: 10rpx;
  495. align-items: center;
  496. }
  497. .leftView {
  498. display: flex;
  499. align-items: center;
  500. }
  501. .rightView {
  502. display: flex;
  503. align-items: center;
  504. }
  505. .liftIcon {
  506. width: 34rpx;
  507. height: 34rpx;
  508. margin: 0rpx 20rpx;
  509. }
  510. .rowTitle {
  511. color: #3C3C3C;
  512. font-size: 28rpx;
  513. }
  514. .signOut {
  515. width: 702rpx;
  516. height: 98rpx;
  517. background: #FFFFFF;
  518. border-radius: 10rpx;
  519. font-size: 30rpx;
  520. color: #FF3B30;
  521. line-height: 98rpx;
  522. text-align: center;
  523. margin: 40rpx 24rpx;
  524. }
  525. .shopBox {
  526. padding: 20rpx;
  527. margin: 20rpx 24rpx;
  528. background-color: #FFFFFF;
  529. border-radius: 10rpx;
  530. }
  531. .shopCont {
  532. display: flex;
  533. justify-content: space-between;
  534. align-items: center;
  535. }
  536. .shopName {
  537. font-size: 30rpx;
  538. font-weight: bold;
  539. color: #3C3C3C;
  540. line-height: 42rpx;
  541. }
  542. .shopRightBox {
  543. display: flex;
  544. justify-content: space-between;
  545. }
  546. .address {
  547. display: flex;
  548. justify-content: space-between;
  549. align-items: center;
  550. }
  551. .Address,
  552. .shopTime,
  553. .distance {
  554. color: #999999;
  555. font-size: 24rpx;
  556. padding-top: 15rpx;
  557. /* 隐藏文字显示 ...不换行 */
  558. overflow: hidden;
  559. text-overflow: ellipsis;
  560. white-space: nowrap;
  561. }
  562. .shopRightBox {}
  563. .shopRightImg {
  564. width: 44rpx;
  565. height: 45rpx;
  566. }
  567. .authorizBox {
  568. width: 100vw;
  569. height: 100vh;
  570. background: rgba(0, 0, 0, 0.5);
  571. position: fixed;
  572. top: 0;
  573. left: 0;
  574. }
  575. .authorizCont {
  576. margin-top: 30vh;
  577. width: 564rpx;
  578. height: 408rpx;
  579. background: #FFFFFF;
  580. border-radius: 24rpx;
  581. margin-left: 93rpx;
  582. position: relative;
  583. }
  584. .authorizCloseImg {
  585. width: 62rpx;
  586. height: 62rpx;
  587. }
  588. .sqLogoBox {
  589. width: 180rpx;
  590. height: 180rpx;
  591. background: #FFFFFF;
  592. border-radius: 90rpx;
  593. text-align: center;
  594. position: absolute;
  595. top: -50rpx;
  596. left: 192rpx;
  597. }
  598. .authorizName {
  599. color: #333333;
  600. line-height: 42rpx;
  601. font-size: 30rpx;
  602. text-align: center;
  603. padding-top: 58rpx;
  604. }
  605. .authorizMs {
  606. color: #999999;
  607. line-height: 36rpx;
  608. font-size: 26rpx;
  609. width: 452rpx;
  610. padding-top: 24rpx;
  611. text-align: center;
  612. margin-left: 56rpx;
  613. }
  614. .authorizContbutton {
  615. width: 422rpx;
  616. height: 88rpx;
  617. background: #D53533;
  618. border-radius: 44rpx;
  619. line-height: 88rpx;
  620. text-align: center;
  621. font-size: 30rpx;
  622. color: #FFFFFF;
  623. margin-top: 62rpx;
  624. margin-left: 71rpx;
  625. }
  626. </style>