user.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463
  1. <template>
  2. <view class="container">
  3. <view class="user-section">
  4. <image class="bg" src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/55fe2551ab3fd04275f3e1cc384081de.png"></image>
  5. <view class="user-info-box">
  6. <view class="portrait-box">
  7. <image class="portrait" :src="userInfo.avatar ? userInfo.avatar : '/static/missing-face.png'"></image>
  8. </view>
  9. <view class="info-box">
  10. <text class="username">{{userInfo.username || '游客'}}</text>
  11. </view>
  12. </view>
  13. <view class="vip-card-box">
  14. <!-- <image class="card-bg" src="/static/vip-card-bg.png" mode=""></image> -->
  15. <!-- <view class="b-btn">
  16. 立即开通
  17. </view> -->
  18. <view class="tit" v-if="userInfo.group">
  19. <text class="yticon icon-iLinkapp-"></text>
  20. {{userInfo.group.name}}
  21. </view>
  22. <view v-else>
  23. <button class="get-user-info" @click="getUserInfo">提供资料成为会员</button>
  24. </view>
  25. </view>
  26. </view>
  27. <view
  28. class="cover-container"
  29. :style="[{
  30. transform: coverTransform,
  31. transition: coverTransition
  32. }]"
  33. @touchstart="coverTouchstart"
  34. @touchmove="coverTouchmove"
  35. @touchend="coverTouchend"
  36. >
  37. <image class="arc" src="/static/arc.png"></image>
  38. <!-- 订单 -->
  39. <view class="order-header">
  40. <view class="title">我的订单</view>
  41. <view class="item" @click="$api.navTo('/pages/order/order?state=0')" >查看全部订单
  42. <text class="yticon right icon-you"></text>
  43. </view>
  44. </view>
  45. <view class="order-section">
  46. <view class="order-item" @click="$api.navTo('/pages/order/order?state=1')" hover-class="common-hover" :hover-stay-time="50">
  47. <text class="yticon icon-daifukuan"></text>
  48. <text class="num" v-if="orderNum.unpaid > 0">{{orderNum.unpaid}}</text>
  49. <text>待付款</text>
  50. </view>
  51. <view class="order-item" @click="$api.navTo('/pages/order/order?state=2')" hover-class="common-hover" :hover-stay-time="50">
  52. <text class="yticon icon-daifahuo"></text>
  53. <text class="num" v-if="orderNum.undelivered > 0">{{orderNum.undelivered}}</text>
  54. <text>待发货</text>
  55. </view>
  56. <view class="order-item" @click="$api.navTo('/pages/order/order?state=3')" hover-class="common-hover" :hover-stay-time="50">
  57. <text class="yticon icon-daishouhuo"></text>
  58. <text class="num" v-if="orderNum.unreceived > 0">{{orderNum.unreceived}}</text>
  59. <text>待收货</text>
  60. </view>
  61. <view class="order-item" @click="$api.navTo('/pages/order/order?state=4')" hover-class="common-hover" :hover-stay-time="50">
  62. <text class="yticon icon-pingjia"></text>
  63. <text class="num" v-if="orderNum.uncomment > 0">{{orderNum.uncomment}}</text>
  64. <text>评价</text>
  65. </view>
  66. <view class="order-item" @click="$api.navTo('/pages/order/order?state=5')" hover-class="common-hover" :hover-stay-time="50">
  67. <text class="yticon icon-shouhou"></text>
  68. <text class="num" v-if="orderNum.refund > 0">{{orderNum.refund}}</text>
  69. <text>退款/售后</text>
  70. </view>
  71. </view>
  72. <!-- 浏览历史 -->
  73. <view class="history-section icon">
  74. <!-- <view class="sec-header">
  75. <text class="yticon icon-lishijilu"></text>
  76. <text>浏览历史</text>
  77. </view> -->
  78. <!-- <scroll-view scroll-x class="h-list">
  79. <image @click="navTo('/pages/product/product')" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553105186633&di=c121a29beece4e14269948d990f9e720&imgtype=0&src=http%3A%2F%2Fimg004.hc360.cn%2Fm8%2FM04%2FDE%2FDE%2FwKhQplZ-QteEBvsbAAAAADUkobU751.jpg" mode="aspectFill"></image>
  80. <image @click="navTo('/pages/product/product')" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553105231218&di=09534b9833b5243296630e6d5b728eff&imgtype=0&src=http%3A%2F%2Fimg002.hc360.cn%2Fm1%2FM05%2FD1%2FAC%2FwKhQcFQ3iN2EQTo8AAAAAHQU6_8355.jpg" mode="aspectFill"></image>
  81. <image @click="navTo('/pages/product/product')" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553105320890&di=c743386be51f2c4c0fd4b75754d14f3c&imgtype=0&src=http%3A%2F%2Fimg007.hc360.cn%2Fhb%2FMTQ1OTg4ODY0MDA3Ny05OTQ4ODY1NDQ%3D.jpg" mode="aspectFill"></image>
  82. <image @click="navTo('/pages/product/product')" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2691146630,2165926318&fm=26&gp=0.jpg" mode="aspectFill"></image>
  83. <image @click="navTo('/pages/product/product')" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553105443324&di=8141bf13f3f208c61524d67f9bb83942&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01ac9a5548d29b0000019ae98e6d98.jpg" mode="aspectFill"></image>
  84. <image @click="navTo('/pages/product/product')" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=191678693,2701202375&fm=26&gp=0.jpg" mode="aspectFill"></image>
  85. </scroll-view> -->
  86. <list-cell icon="icon-daifukuan" iconColor="#e07472" title="我的积分" :tips="info.score" @eventClick="$api.navTo('/pages/wallet/integral')"></list-cell>
  87. <list-cell icon="icon-daifukuan" iconColor="#e07472" title="我的钱包" tips="查看余额,积分和提现" @eventClick="$api.navTo('/pages/wallet/index')"></list-cell>
  88. <list-cell icon="icon-dizhi" iconColor="#5fcda2" title="地址管理" @eventClick="$api.navTo('/pages/address/address')"></list-cell>
  89. <list-cell icon="icon-shoucang-setting" iconColor="#54b4ef" title="我的收藏" @eventClick="$api.navTo('/pages/favorite/favorite')"></list-cell>
  90. <list-cell icon="icon-setting" iconColor="#e07472" title="我的团队" border="" @eventClick="$api.navTo('/pages/term/index')"></list-cell>
  91. <list-cell icon="icon-shoucang" iconColor="#9789f7" title="我的海报" @eventClick="$api.navTo('/pages/poster/index')"></list-cell>
  92. </view>
  93. </view>
  94. </view>
  95. </template>
  96. <script>
  97. import listCell from '@/components/mix-list-cell';
  98. import {
  99. mapMutations,
  100. mapState
  101. } from 'vuex';
  102. let startY = 0, moveY = 0, pageAtTop = true;
  103. export default {
  104. components: {
  105. listCell
  106. },
  107. data() {
  108. return {
  109. coverTransform: 'translateY(0px)',
  110. coverTransition: '0s',
  111. moving: false,
  112. orderNum: {
  113. unpaid: 0,
  114. undelivered: 0,
  115. unreceived: 0,
  116. uncomment: 0,
  117. refund: 0
  118. },
  119. info:""
  120. }
  121. },
  122. onLoad(){
  123. },
  124. onShow() {
  125. if (this.hasLogin) {
  126. this.getOrderNum();
  127. this.getinfo();
  128. }
  129. },
  130. // #ifndef MP
  131. onNavigationBarButtonTap(e) {
  132. const index = e.index;
  133. if (index === 0) {
  134. this.navTo('/pages/set/set');
  135. }else if(index === 1){
  136. // #ifdef APP-PLUS
  137. const pages = getCurrentPages();
  138. const page = pages[pages.length - 1];
  139. const currentWebview = page.$getAppWebview();
  140. currentWebview.hideTitleNViewButtonRedDot({
  141. index
  142. });
  143. // #endif
  144. uni.navigateTo({
  145. url: '/pages/notice/notice'
  146. })
  147. }
  148. },
  149. // #endif
  150. computed: {
  151. ...mapState(['hasLogin','userInfo'])
  152. },
  153. methods: {
  154. /**
  155. * 会员卡下拉和回弹
  156. * 1.关闭bounce避免ios端下拉冲突
  157. * 2.由于touchmove事件的缺陷(以前做小程序就遇到,比如20跳到40,h5反而好很多),下拉的时候会有掉帧的感觉
  158. * transition设置0.1秒延迟,让css来过渡这段空窗期
  159. * 3.回弹效果可修改曲线值来调整效果,推荐一个好用的bezier生成工具 http://cubic-bezier.com/
  160. */
  161. ...mapMutations(['login', 'logout', 'setUserInfo']),
  162. coverTouchstart(e){
  163. if(pageAtTop === false){
  164. return;
  165. }
  166. this.coverTransition = 'transform .1s linear';
  167. startY = e.touches[0].clientY;
  168. },
  169. coverTouchmove(e){
  170. moveY = e.touches[0].clientY;
  171. let moveDistance = moveY - startY;
  172. if(moveDistance < 0){
  173. this.moving = false;
  174. return;
  175. }
  176. this.moving = true;
  177. if(moveDistance >= 80 && moveDistance < 100){
  178. moveDistance = 80;
  179. }
  180. if(moveDistance > 0 && moveDistance <= 80){
  181. this.coverTransform = `translateY(${moveDistance}px)`;
  182. }
  183. },
  184. coverTouchend(){
  185. if(this.moving === false){
  186. return;
  187. }
  188. this.moving = false;
  189. this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
  190. this.coverTransform = 'translateY(0px)';
  191. },
  192. async getUserInfo() {
  193. uni.getUserProfile({
  194. desc: '系统将获取你的用户信息',
  195. success: async (res) => {
  196. let [error, loginRes] = await uni.login({
  197. provider: 'weixin'
  198. });
  199. if (loginRes.hasOwnProperty('code')) {
  200. let data = await this.$api.request('/user/registerUserGroup?code=' + loginRes.code, 'POST', res.userInfo);
  201. const userInfo = await this.$wechatMiniLogin(true);
  202. this.login(userInfo)
  203. }
  204. },
  205. fail: (res) => {
  206. this.$api.msg('注册失败')
  207. }
  208. })
  209. },
  210. // 获取订单数量
  211. async getOrderNum(){
  212. let data = await this.$api.request('/order/count');
  213. if (data) {
  214. this.orderNum = {
  215. unpaid: data.unpaid ? data.unpaid : 0,
  216. undelivered: data.undelivered ? data.undelivered : 0,
  217. unreceived: data.unreceived ? data.unreceived : 0,
  218. uncomment: data.uncomment ? data.uncomment : 0,
  219. refund: data.refund ? data.refund : 0
  220. };
  221. }
  222. },
  223. async getinfo() {
  224. let data = await this.$api.request('/wallet/index');
  225. console.log(data)
  226. this.info = data;
  227. },
  228. }
  229. }
  230. </script>
  231. <style lang='scss'>
  232. page{
  233. background: #f5f5f5;
  234. }
  235. %flex-center {
  236. display:flex;
  237. flex-direction: column;
  238. justify-content: center;
  239. align-items: center;
  240. }
  241. %section {
  242. display:flex;
  243. justify-content: space-around;
  244. align-content: center;
  245. background: #fff;
  246. border-radius: 10upx;
  247. }
  248. .user-section{
  249. height: 520upx;
  250. padding: 100upx 30upx 0;
  251. position:relative;
  252. .bg{
  253. position:absolute;
  254. left: 0;
  255. top: 0;
  256. width: 100%;
  257. height: 100%;
  258. filter: blur(1px);
  259. }
  260. }
  261. .user-info-box{
  262. height: 150upx;
  263. display:flex;
  264. align-items:center;
  265. position:relative;
  266. z-index: 1;
  267. .portrait{
  268. width: 130upx;
  269. height: 130upx;
  270. border-radius: 50%;
  271. }
  272. .username{
  273. font-size: $font-lg + 6upx;
  274. color: $font-color-dark;
  275. margin-left: 20upx;
  276. }
  277. }
  278. .vip-card-box{
  279. display:flex;
  280. flex-direction: column;
  281. color: #f7d680;
  282. height: 240upx;
  283. background: linear-gradient(left, rgba(0,0,0,.7), rgba(0,0,0,.8));
  284. border-radius: 16upx 16upx 0 0;
  285. overflow: hidden;
  286. position: relative;
  287. padding: 20upx 24upx;
  288. .card-bg{
  289. position:absolute;
  290. top: 20upx;
  291. right: 0;
  292. width: 380upx;
  293. height: 260upx;
  294. }
  295. .b-btn{
  296. position: absolute;
  297. right: 20upx;
  298. top: 16upx;
  299. width: 132upx;
  300. height: 40upx;
  301. text-align: center;
  302. line-height: 40upx;
  303. font-size: 22upx;
  304. color: #36343c;
  305. border-radius: 20px;
  306. background: linear-gradient(left, #f9e6af, #ffd465);
  307. z-index: 1;
  308. }
  309. .tit{
  310. font-size: $font-base+2upx;
  311. color: #000000;
  312. margin-bottom: 28upx;
  313. .yticon{
  314. color: #f6e5a3;
  315. margin-right: 16upx;
  316. }
  317. }
  318. .e-b{
  319. font-size: $font-sm;
  320. color: #d8cba9;
  321. margin-top: 10upx;
  322. }
  323. }
  324. .cover-container{
  325. margin-top: -150upx;
  326. padding: 0 30upx;
  327. position:relative;
  328. background: #f5f5f5;
  329. padding-bottom: 20upx;
  330. .arc{
  331. position:absolute;
  332. left: 0;
  333. top: -34upx;
  334. width: 100%;
  335. height: 36upx;
  336. }
  337. }
  338. .tj-sction{
  339. @extend %section;
  340. .tj-item{
  341. @extend %flex-center;
  342. flex-direction: column;
  343. height: 140upx;
  344. font-size: $font-sm;
  345. color: #75787d;
  346. }
  347. .num{
  348. font-size: $font-lg;
  349. color: $font-color-dark;
  350. margin-bottom: 8upx;
  351. }
  352. }
  353. .order-header {
  354. @extend %section;
  355. padding: 28upx 0 0;
  356. border-radius: 10upx 10upx 0 0;
  357. margin-top: 20upx;
  358. font-size: $font-base;
  359. .title {
  360. width: 50%;
  361. color: $font-color-dark;
  362. margin-left: 30upx;
  363. }
  364. .item {
  365. width: 50%;
  366. color:$font-color-base;
  367. text-align: right;
  368. margin-right: 8upx;
  369. }
  370. }
  371. .order-section{
  372. @extend %section;
  373. border-radius: 0 0 10upx 10upx;
  374. padding: 28upx 0;
  375. .order-item {
  376. @extend %flex-center;
  377. width: 120upx;
  378. height: 120upx;
  379. border-radius: 10upx;
  380. font-size: $font-sm;
  381. color: $font-color-dark;
  382. position: relative;
  383. .num{
  384. border: 4rpx solid #fa436a;
  385. width: 40rpx;
  386. height: 40rpx;
  387. color: #fa436a;
  388. text-align: center;
  389. border-radius: 40rpx;
  390. position: absolute;
  391. background: #ffffff;
  392. top: 0;
  393. right: 18rpx;
  394. }
  395. }
  396. .yticon{
  397. font-size: 48upx;
  398. margin-bottom: 18upx;
  399. color: #fa436a;
  400. }
  401. .icon-shouhoutuikuan{
  402. font-size:44upx;
  403. }
  404. }
  405. .history-section{
  406. padding: 0;
  407. margin-top: 20upx;
  408. background: #fff;
  409. border-radius:10upx;
  410. .sec-header{
  411. display:flex;
  412. align-items: center;
  413. font-size: $font-base;
  414. color: $font-color-dark;
  415. line-height: 40upx;
  416. margin-left: 30upx;
  417. .yticon{
  418. font-size: 44upx;
  419. color: #5eba8f;
  420. margin-right: 16upx;
  421. line-height: 40upx;
  422. }
  423. }
  424. .h-list{
  425. white-space: nowrap;
  426. padding: 30upx 30upx 0;
  427. image{
  428. display:inline-block;
  429. width: 160upx;
  430. height: 160upx;
  431. margin-right: 20upx;
  432. border-radius: 10upx;
  433. }
  434. }
  435. }
  436. button.get-user-info {
  437. margin: 0px;
  438. width: 260rpx;
  439. height: 60rpx;
  440. line-height: 60rpx;
  441. font-size: 14px;
  442. }
  443. </style>