|
|
<template> <view> <lf-nav :spreadOut="false" :showIcon="false" titleColor="white" :bgColor="nav_bg_color" title="会员中心"></lf-nav> <view class="center-top"> <view class="bg-left"></view> <view class="bg-right"></view> <view class="ocupy"></view> <view class="lf-flex lf-p-32 lf-row-between"> <view class="lf-row-between"> <view @click="clickAvatar"> <image :src="userInfo.avatar" mode="widthFix" class="center-img" v-if="userInfo.avatar"></image> <image src="/static/images/empty.png" mode="widthFix" class="center-img" v-else></image> </view> <view class="lf-row-center" @click="clickMobile"> <view class="lf-color-white lf-font-36 lf-m-l-20">{{ userInfo.mobile_replace || '未登录，点此登录' }}</view> <view class="lf-iconfont icon-xiangyou lf-font-20 lf-m-l-10 lf-color-white"></view> </view> </view> <view class="lf-row-between"> <button open-type="contact" style="background:none;height: 88rpx;padding: 0;margin: 0;line-height: 1.6;" class="lf-font-24 lf-m-r-30 lf-color-white lf-row-center lf-flex-column"> <view class="lf-iconfont icon-kefufenxiermaikefu lf-color-white"></view> <view> 客服 </view> </button> <view class="lf-row-center lf-flex-column" style="position: relative; z-index: 9;" @click="$url('/pages/user/member/code')"> <view class="lf-iconfont icon-erweima lf-color-white"></view> <view class="lf-font-24 lf-color-white">支付码</view> </view> </view> </view> <view class="lf-flex lf-row-between center-tag"> <view class="lf-row-center lf-flex-column" @click="$url('/pages/point/detail/detail')"> <view class="lf-font-36 lf-color-white">{{centerInfo.point || 0}}</view> <view class="lf-font-24 lf-color-white">积分</view> </view> <view class="lf-row-center lf-flex-column" @click="$url('/pages/recharge/balance/balance')"> <view class="lf-font-36 lf-color-white">{{centerInfo.balance || 0}}</view> <view class="lf-font-24 lf-color-white">余额(元)</view> </view> <view class="lf-row-center lf-flex-column" @click="$url('/pages/coupon/index/index')"> <view class="lf-font-36 lf-color-white">{{centerInfo.couponCount || 0}}</view> <view class="lf-font-24 lf-color-white">优惠券</view> </view> </view> </view> <view class="center-card" v-if="$isRight(centerInfo.userLevel)"> <view class="lf-p-30 lf-row-between lf-w-100" @click="$url('/pages/user/member/service')"> <view class="lf-flex-column"> <view class="lf-font-bold" style="color: #15716E;"> <text class="lf-font-48">VIP</text> <text class="lf-font-30 lf-m-l-10">{{ centerInfo.userLevel.name }}</text> </view> <!-- <view class="lf-font-28" style="color: #15716E;">卡号: 666666</view> --> </view> <view class="card-tag"> 会员服务 </view> </view> </view> <view class="lf-row-center"> <view class="order-card"> <view class="lf-row-between"> <view class="lf-color-black lf-font-32 lf-font-bold"> 商城订单 </view> <view class="lf-flex" @click="$url('/pages/order/index/onlineorder')"> <view class="lf-font-24 lf-color-777">全部订单</view> <text class="lf-iconfont icon-xiangyou lf-font-20 lf-m-l-10 lf-color-777"></text> </view> </view> <view class="order-tag lf-flex-wrap"> <view class="order-children" @click="$url('/pages/order/index/onlineorder?current=1')"> <view> <view class="function-tag" v-if="centerInfo.newCount != 0 && $isRight(centerInfo)">{{centerInfo.newCount}}</view> <view class="lf-iconfont lf-font-50 icon-daifukuan"></view> </view> <view class="lf-color-black lf-font-28 lf-m-t-20">待付款</view> </view> <view class="order-children" @click="$url('/pages/order/index/onlineorder?current=2')"> <view> <view class="lf-iconfont lf-font-50 icon-31daifahuo"></view> </view> <view class="lf-color-black lf-font-28 lf-m-t-20">待发货</view> </view> <view class="order-children" @click="$url('/pages/order/index/onlineorder?current=3')"> <view> <view class="lf-iconfont lf-font-50 icon-daishouhuo"></view> </view> <view class="lf-color-black lf-font-28 lf-m-t-20">待收货</view> </view> <view class="order-children" @click="$url('/pages/order/index/onlineorder?current=4')"> <view> <view class="function-tag" v-if="centerInfo.receiveCount != 0 && $isRight(centerInfo)">{{centerInfo.receiveCount}}</view> <view class="lf-iconfont lf-font-50 icon-tihuo"></view> </view> <view class="lf-color-black lf-font-28 lf-m-t-20">待提货</view> </view> <!-- <view class="order-children" v-for="(item, index) in order_tablist" :key="index" @click="$url(item.path)"> <view class="lf-iconfont lf-font-50" :class="item.icon"></view> <view class="lf-color-black lf-font-28 lf-m-t-20">{{ item.name }}</view> </view> --> </view> </view> </view> <view class="lf-row-center"> <view class="order-card1"> <view class="lf-row-between"> <view class="lf-color-black lf-font-32 lf-font-bold"> 我的服务 </view> <view></view> </view> <view class="order-tag lf-flex-wrap"> <view class="order-children my-service" v-for="(item, index) in my_service_list" :key="index" @click="$url(item.path)"> <!-- <view class="function-tag"></view> --> <view class="lf-iconfont lf-font-60" :class="item.icon"></view> <view class="lf-color-black lf-font-28 lf-m-t-20" style="white-space: nowrap">{{ item.name }}</view> </view> </view> </view> </view> <!-- 悬浮购物车入口 --> <view class="fixed-right"> <view class="fixed-cart" hover-class="lf-opacity" @click="$url('/pages/store/cart/cart')"> <text class="lf-iconfont icon-gouwulan icon-text"></text> <text class="tips">购物车</text> <block v-if="$isRight(car_num)"> <view class="angle-mark" v-if="car_num<99">{{car_num || 0}}</view> <view class="angle-mark" v-else>99+</view> </block> </view> </view> <lf-tabbar></lf-tabbar> </view></template>
<script> import lfTabbar from '@/components/lf-tabbar/lf-tabbar.vue' import { getUrl, getUpdateUserInfo } from '@/common/js/utils.js'; export default { components: { lfTabbar }, data(){ return { // {
// name: '在线客服',
// icon: 'icon-pinglun',
// path: '/pages/user/my/chatonline'
// },
nav_bg_color: 'transparent' ,// 导航背景颜色
order_tablist: [{ name: '待付款', icon: 'icon-daifukuan', path: '/pages/order/index/onlineorder?current=1' },{ name: '待发货', icon: 'icon-31daifahuo', path: '/pages/order/index/onlineorder?current=2' },{ name: '待收货', icon: 'icon-daishouhuo', path: '/pages/order/index/onlineorder?current=3' },{ name: '待提货', icon: 'icon-tihuo', path: '/pages/order/index/onlineorder?current=4' }], my_service_list: [{ name: '会员服务', icon: 'icon-huiyuan4', path: '/pages/user/member/service' },{ name: '我的收藏', icon: 'icon-Star', path: '/pages/user/my/collect' },{ name: '地址管理', icon: 'icon-Location', path: '/pages/address/list/list' },{ name: '活动报名', icon: 'icon-Bookmark', path: '/pages/user/my/myEventRegistrationList' },{ name: '积分商城订单', icon: 'icon-zhuanjifen', path: '/pages/point/exchangeRecord/exchangeRecord' },{ name: '商家中心', icon: 'icon-dianshangjiashangcheng-xianxing', path: '/pages/business/center/center' }], userInfo: {mobile_replace: '正在获取'}, // 用户信息
token: '', // 用户token
code: '', centerInfo: {}, show_count: 0, car_num: 0 } }, onLoad(){ var token = this.$cookieStorage.get('user_token'); this.token = token; if (token) { // #ifdef MP-WEIXIN
if (this.code) { uni.checkSession({ success: res => { if (res.errMsg != 'checkSession:ok') { this.getCode(); } } }); } else { this.getCode(); } // #endif
} this.getMeInfo(); this.getUcenter(); this.getcarNum(); }, onShow(){ this.show_count++; if(this.show_count > 1){ var token = this.$cookieStorage.get('user_token'); this.token = token || ''; this.getMeInfo(); this.getUcenter(); } }, // 页面滚动
onPageScroll(event){ if(event.scrollTop >= 50){ this.nav_bg_color = '#22A2A0'; }else{ this.nav_bg_color = 'transparent'; } }, methods: { getcarNum() { this.$http .get({ api: 'api/shopping/cart/count', header: { Authorization: this.$cookieStorage.get('user_token') }, }) .then(res => { if (res.data.code == 200) { if(res.data.data == null) { this.car_num = 0; }else { this.car_num = res.data.data; } } else { wx.showModal({ content: '请下拉页面刷新重试', showCancel: false }); } }) .catch(() => { wx.stopPullDownRefresh(); wx.hideLoading(); wx.showModal({ content: '请求失败', showCancel: false }); }); }, // 获取页面信息
getMeInfo(){ this.$http.get({ api: 'api/me', header: { Authorization: this.token } }).then(res => { console.log("---", res); this.userInfo = res.data.data; }) }, // 获取积分等信息
getUcenter(){ this.$http.get({ api: 'api/users/ucenter', header: { Authorization: this.token } }).then(res => { console.log("getUcenter", res); this.centerInfo = res.data.data; }) }, // 用户点击了自己的头像，此时做判断，已有头像就跳转到设置页，没有则授权获取用户微信信息
clickAvatar(){ if(this.token && this.userInfo.avatar){ this.$url('/pages/user/my/setting'); }else{ uni.getUserProfile({ desc: '获取你的昵称、头像、地区及性别', lang: 'zh_CN', complete: result => { console.log("result", result) if(result.errMsg == 'getUserProfile:ok'){ let options = { iv: result.iv, encryptedData: result.encryptedData, code: this.code }; this.updateUserInfo(options); } } }) } }, // 点击手机号，如果没有登录，则跳转到登录
clickMobile(){ if(this.token){ this.$url('/pages/user/my/setting'); }else{ let url = getUrl(); this.$url('/pages/user/register/register?url=' + url); } }, // 静默登录获取code
getCode(){ uni.login({ success: res => { if (res.code) { this.code = res.code; } } }); }, // 更新用户信息
updateUserInfo(data){ uni.showLoading({ title: '完善信息中', mask: true }); this.$http.get({ api: 'api/user/bindUserMiniInfo', data: data, header: { Authorization: this.token } }).then(res => { res = res.data; if (res.status) { // #ifdef MP-WEIXIN
getUpdateUserInfo(this.token); // #endif
uni.hideLoading(); } else { uni.showModal({ content: res.message || '请求失败', showCancel: false }); this.getCode(); uni.hideLoading(); } uni.hideLoading(); }).catch(rej=>{ uni.showModal({ content: rej.message || '请求失败', showCancel: false }); uni.hideLoading(); }); } } }</script>
<style> page{ overflow-x: hidden; }</style><style lang="scss" scoped> .fixed-right{ position: fixed; right: 32rpx; bottom: 400rpx; width: max-content; height: max-content; z-index: 9; .fixed-cart{ width: 110rpx; height: 110rpx; border-radius: 50%; background-color: #FFFFFF; border: 1rpx solid #DEDEDE; display: flex; justify-content: center; align-items: center; flex-direction: column; color: #333333; position: relative; margin-top: 30rpx; .icon-text{ font-size: 50rpx; line-height: 1; } .tips{ font-size: 20rpx; color: #333333; } .angle-mark{ position: absolute; right: 4rpx; top: 4rpx; width: 40rpx; height: 40rpx; background-color: #15716E; border-radius: 50%; font-size: 20rpx; display: flex; justify-content: center; align-items: center; color: #FFFFFF; } } .fixed-live{ background: #15716E; border-radius: 100rpx 5rpx 100rpx 100rpx; border: none; color: #FFFFFF; // animation: bounceIn 1s .2s ease both;
backface-visibility:visible; transform-origin:center center; animation: demo 2s 0s infinite ease normal none ; // &>text:nth-child(1){
// animation: fadeInRightBig 1s .1s ease both;
// }
.tips{ color: #FFFFFF; } } } .order-children { width: 134rpx; position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-right: 27rpx; &>view:nth-child(1){ line-height: 1; } &:nth-child(4n) { margin-right: 0; } &:nth-child(n + 5) { margin-top: 50rpx; } } .my-service{ width: 190rpx; &>view:nth-child(1){ line-height: 1; } &:nth-child(3n){ margin-right: 0; } &:nth-child(4n) { margin-right: 27rpx; } &:nth-child(n+4){ margin-top: 50rpx; } } .function-tag { color: white; font-size: 24rpx; position: absolute; right: 18rpx; width: 39rpx; height: 40rpx; background: red; top: -12rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .order-tag { padding: 50rpx 0; display: flex; flex: wrap; // justify-content: space-around;
align-items: center; } .order-card { padding: 30rpx 30rpx 0 30rpx; width: 686rpx; height: 100%; background: #FFFFFF; box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1); border-radius: 20rpx; // margin: 150rpx 0 30rpx 0;
margin: 30rpx 0 30rpx 0; } .order-card1 { padding: 30rpx 30rpx 0 30rpx; width: 686rpx; height: 100%; background: #FFFFFF; box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1); border-radius: 20rpx; margin-bottom: 30rpx; } .card-tag { width: 144rpx; height: 53rpx; background: linear-gradient(90deg, #22A2A0 0%, #187B7A 100%); border-radius: 30rpx; display: flex; align-items: center; color: white; justify-content: center; font-size: 26rpx; } .center-card { width: 686rpx; height: 160rpx; background: #FFFFFF; display: flex; align-items: center; box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1); border-radius: 20rpx; margin: -40rpx auto 0; position: relative; z-index: 9; // position: absolute;
// bottom: -120rpx;
// left: 32rpx;
// z-index: 9999;
} .center-tag { padding: 0 80rpx 0 80rpx; position: relative; z-index: 9; } .ocupy { height: 160rpx; width: 100%; } .center-top { position: relative; width: 750rpx; height: 512rpx; background: linear-gradient(90deg, #22A2A0 0%, #187B7A 100%); overflow: hidden; .bg-left{ position: absolute; width: 196rpx; height: 196rpx; border-radius: 50%; background-color: rgba(255,255,255,0.04); left: -92rpx; bottom: 60rpx; } .bg-right{ position: absolute; width: 520rpx; height: 520rpx; border-radius: 50%; background-color: rgba(255,255,255,0.04); right: -168rpx; top: -122rpx; } } .center-img { width: 100rpx; height: 100rpx; border: 2rpx solid #FFFFFF; border-radius: 100%; }</style>
|
