655 lines
18 KiB
Vue
655 lines
18 KiB
Vue
<template>
|
||
<view class="user">
|
||
<!--头部-->
|
||
<view class="user-section">
|
||
<image class="bg" :src="userBg"></image>
|
||
<!--用户信息-->
|
||
<view class="user-info-box">
|
||
<view
|
||
class="portrait-box"
|
||
@tap="navTo(userInfo ? '/pages/user/userinfo/userinfo' : 'login')"
|
||
>
|
||
<image
|
||
class="portrait"
|
||
:src="userInfo.image || headImg"
|
||
></image>
|
||
<text class="username" v-if="hasLogin">
|
||
{{
|
||
userInfo.nickname ||
|
||
userInfo.realname ||
|
||
'暂无昵称'
|
||
}}
|
||
</text>
|
||
<text class="username" v-else>登录/注册</text>
|
||
</view>
|
||
</view>
|
||
<!--vip信息-->
|
||
<view class="vip-card-box">
|
||
<image class="card-bg" :src="vipCardBg"></image>
|
||
<view class="tit">
|
||
<i class="iconfont iconiLinkapp-"/>
|
||
欢迎来到魔金微商城
|
||
</view>
|
||
<text class="e-m">魔金 版权所有</text>
|
||
</view>
|
||
</view>
|
||
<!-- 个人中心 内容区-->
|
||
<view
|
||
class="cover-container"
|
||
:style="[{
|
||
transform: coverTransform,
|
||
transition: coverTransition
|
||
}]"
|
||
@touchstart="coverTouchstart"
|
||
@touchmove="coverTouchmove"
|
||
@touchend="coverTouchend"
|
||
>
|
||
<image class="arc" :src="arc"></image>
|
||
|
||
<!--余额 优惠券 积分信息-->
|
||
<view class="promotion-center">
|
||
<list-cell icon="iconwallett" iconColor="#e07472" @eventClick="navTo('/pages/user/account/account')"
|
||
title="我的账户"></list-cell>
|
||
<view class="tj-sction">
|
||
<view class="tj-item" v-for="item in amountList" :key="item.title" @tap="navTo(item.url)">
|
||
<text class="num" :class="item.value > 0 ? 'red' : ''">
|
||
{{ item.value }}
|
||
</text>
|
||
<text>{{ item.title }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 我的订单 -->
|
||
<view class="promotion-center">
|
||
<list-cell icon="iconfapiaoguanli" iconColor="#e07472"
|
||
@eventClick="navTo(`/pages/index/search/search?keyword=搜索我的订单&type=order`)" title="搜索订单"></list-cell>
|
||
<view class="order-section">
|
||
<view
|
||
class="order-item"
|
||
v-for="item in orderSectionList"
|
||
:key="item.title"
|
||
@tap="navTo(item.url)"
|
||
hover-class="common-hover"
|
||
:hover-stay-time="50">
|
||
<i class="iconfont" :class="item.icon"/>
|
||
<text>{{ item.title }}</text>
|
||
<rf-badge type="error" size="small" class="badge" :text="item.num"></rf-badge>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 浏览历史 -->
|
||
<view class="history-section">
|
||
<list-cell icon="iconlishijilu" iconColor="#5eba8f" @eventClick="navTo('/pages/user/footprint/footprint')"
|
||
title="我的足迹"></list-cell>
|
||
<view v-if="hasLogin">
|
||
<scroll-view scroll-x class="h-list" v-if="footPrintList.length > 0">
|
||
<view class="h-item" v-for="item in footPrintList" :key="item.id">
|
||
<image class="h-item-img" @tap.stop="navTo(`/pages/product/product?id=${item.product.id}`)"
|
||
:src="item.product.picture" mode="aspectFill"></image>
|
||
<view class="h-item-text in2line">{{ item.product.name }}</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="no-foot-print" v-else-if="footPrintList.length === 0" @tap="navTo('/pages/product/list')">
|
||
<i class="iconfont iconshare no-foot-print-icon"/>
|
||
先去浏览一些吧~
|
||
</view>
|
||
</view>
|
||
<view class="no-foot-print" v-else @tap="navTo('/pages/user/footprint/footprint')">
|
||
<i class="iconfont iconmima no-foot-print-icon"/>
|
||
登陆后查看
|
||
</view>
|
||
</view>
|
||
|
||
<!--设置中心-->
|
||
<view class="promotion-center">
|
||
<list-cell icon="iconshezhi1" iconColor="#e07472" @eventClick="navTo('/pages/set/set')"
|
||
title="设置中心"></list-cell>
|
||
<view class="tj-sction">
|
||
|
||
<!-- 分类列表 -->
|
||
<view class="category-list">
|
||
<view
|
||
class="category"
|
||
v-for="(item, index) in settingList"
|
||
:key="index"
|
||
@tap.stop="navTo(item.url)"
|
||
>
|
||
<view v-if="item.title!=='分享'">
|
||
<view class="img">
|
||
<text class="iconfont" :style="{color: item.color}" :class="item.icon"></text>
|
||
</view>
|
||
<view class="text">{{ item.title }}</view>
|
||
</view>
|
||
<button class="share-btn" open-type="share" @tap.tap="shareToH5" v-else>
|
||
<view class="img">
|
||
<text class="iconfont" :style="{color: item.color}" :class="item.icon"></text>
|
||
</view>
|
||
<view class="text">{{ item.title }}</view>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!--页面加载动画-->
|
||
<rf-loading v-if="loading"></rf-loading>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
/**
|
||
* @des 个人中心
|
||
*
|
||
* @author 237524947@qq.com
|
||
* @date 2020-01-10 11:41
|
||
* @copyright 2019
|
||
*/
|
||
import {footPrintList, memberInfo} from '@/api/userInfo';
|
||
import listCell from '@/components/rf-list-cell';
|
||
import {mapMutations} from 'vuex';
|
||
import rfBadge from '@/components/rf-badge/rf-badge'
|
||
let startY = 0, moveY = 0, pageAtTop = true;
|
||
export default {
|
||
components: {
|
||
listCell,
|
||
rfBadge
|
||
},
|
||
data() {
|
||
return {
|
||
settingList: this.$mConstDataConfig.settingList,
|
||
orderSectionList: this.$mConstDataConfig.orderSectionList,
|
||
amountList: this.$mConstDataConfig.amountList,
|
||
headImg: this.$mAssetsPath.headImg,
|
||
vipCardBg: this.$mAssetsPath.vipCardBg,
|
||
arc: this.$mAssetsPath.arc,
|
||
userBg: this.$mAssetsPath.userBg,
|
||
coverTransform: 'translateY(0px)',
|
||
coverTransition: '0s',
|
||
moving: false,
|
||
userInfo: { // 用户信息
|
||
promoter: null // 分销商信息
|
||
},
|
||
footPrintList: [], // 足迹列表
|
||
loading: true,
|
||
hasLogin: false
|
||
}
|
||
},
|
||
// 小程序分享
|
||
onShareAppMessage() {
|
||
return {
|
||
title: '欢迎来到魔金商城',
|
||
path: '/pages/index/index'
|
||
}
|
||
},
|
||
async onShow() {
|
||
// 初始化数据
|
||
this.initData();
|
||
},
|
||
// #ifndef MP
|
||
onNavigationBarButtonTap(e) {
|
||
const index = e.index;
|
||
if (index === 0) {
|
||
this.navTo('/pages/set/set');
|
||
} else if (index === 1) {
|
||
// #ifdef APP-PLUS
|
||
const pages = getCurrentPages();
|
||
const page = pages[pages.length - 1];
|
||
const currentWebview = page.$getAppWebview();
|
||
currentWebview.hideTitleNViewButtonRedDot({
|
||
index
|
||
});
|
||
// #endif
|
||
this.$mRouter.push({route: '/pages/index/notice/notice'});
|
||
}
|
||
},
|
||
// #endif
|
||
methods: {
|
||
// h5分享
|
||
shareToH5() {
|
||
// #ifdef H5
|
||
this.$mHelper.toast('请复制连接进行分享');
|
||
// #endif
|
||
},
|
||
...mapMutations(['login']),
|
||
// 数据初始化
|
||
async initData() {
|
||
this.hasLogin = this.$mStore.getters.hasLogin;
|
||
if (this.hasLogin) {
|
||
await this.getMemberInfo();
|
||
} else {
|
||
this.loading = false;
|
||
this.resetSectionData();
|
||
}
|
||
},
|
||
// 设置购物车数量角标
|
||
async initCartItemCount() {
|
||
if (
|
||
this.$mStore.getters.hasLogin &&
|
||
parseInt(uni.getStorageSync('cartNum'), 10) > 0
|
||
) {
|
||
uni.setTabBarBadge({
|
||
index: this.$mConstDataConfig.cartIndex,
|
||
text: uni.getStorageSync('cartNum').toString()
|
||
});
|
||
uni.setTabBarBadge({
|
||
index: this.$mConstDataConfig.notifyIndex,
|
||
text: uni.getStorageSync('notifyNum').toString()
|
||
});
|
||
} else {
|
||
uni.removeStorageSync('cartNum');
|
||
uni.removeTabBarBadge({ index: this.$mConstDataConfig.cartIndex });
|
||
|
||
uni.removeStorageSync('notifyNum');
|
||
uni.removeTabBarBadge({ index: this.$mConstDataConfig.notifyIndex });
|
||
}
|
||
},
|
||
// 获取用户信息
|
||
async getMemberInfo() {
|
||
await this.$http.get(memberInfo).then(async r => {
|
||
this.loading = false;
|
||
this.userInfo = r;
|
||
await uni.setStorageSync('cartNum', r.cart_num);
|
||
// 获取足迹列表
|
||
await this.getFootPrintList();
|
||
await this.setSectionData(r);
|
||
await this.initCartItemCount();
|
||
}).catch(() => {
|
||
// this.hasLogin = false;
|
||
this.userInfo = {};
|
||
this.resetSectionData();
|
||
this.loading = false;
|
||
});
|
||
},
|
||
// 清空个人中心的各模块状态
|
||
resetSectionData() {
|
||
uni.removeTabBarBadge({index: this.$mConstDataConfig.cartIndex});
|
||
this.amountList[0].value = 0;
|
||
this.amountList[1].value = 0;
|
||
this.amountList[2].value = 0;
|
||
this.orderSectionList[0].num = 0;
|
||
this.orderSectionList[1].num = 0;
|
||
this.orderSectionList[2].num = 0;
|
||
this.orderSectionList[3].num = 0;
|
||
this.orderSectionList[4].num = 0;
|
||
},
|
||
// 给个人中心的各模块赋值
|
||
setSectionData(data) {
|
||
const orderSynthesizeNumArr = [];
|
||
for (let item in data.order_synthesize_num) {
|
||
orderSynthesizeNumArr.push(data.order_synthesize_num[item])
|
||
}
|
||
for (let i = 0; i < this.orderSectionList.length; i++) {
|
||
this.orderSectionList[i].num = orderSynthesizeNumArr[i].toString();
|
||
}
|
||
this.amountList[0].value = data.account.user_money || 0;
|
||
this.amountList[1].value = data.coupon_num || 0;
|
||
this.amountList[2].value = data.account.user_integral || 0;
|
||
// 更新userInfo缓存
|
||
uni.setStorageSync('userInfo', data);
|
||
},
|
||
// 获取足迹列表
|
||
async getFootPrintList() {
|
||
await this.$http.get(`${footPrintList}`).then(r => {
|
||
this.footPrintList = r
|
||
});
|
||
},
|
||
// 统一跳转接口,拦截未登录路由
|
||
navTo(route) {
|
||
if (!route) {
|
||
return;
|
||
}
|
||
if (!this.hasLogin) {
|
||
uni.showModal({
|
||
content: '你暂未登陆，是否跳转登录页面？',
|
||
success: (confirmRes) => {
|
||
if (confirmRes.confirm) {
|
||
this.$mRouter.push({route: '/pages/public/logintype'});
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
this.$mRouter.push({route});
|
||
}
|
||
},
|
||
/**
|
||
* 会员卡下拉和回弹
|
||
* 1.关闭bounce避免ios端下拉冲突
|
||
* 2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
|
||
* transition设置0.1秒延迟，让css来过渡这段空窗期
|
||
* 3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
|
||
*/
|
||
coverTouchstart(e) {
|
||
if (pageAtTop === false) {
|
||
return;
|
||
}
|
||
this.coverTransition = 'transform .1s linear';
|
||
startY = e.touches[0].clientY;
|
||
},
|
||
coverTouchmove(e) {
|
||
moveY = e.touches[0].clientY;
|
||
let moveDistance = moveY - startY;
|
||
if (moveDistance < 0) {
|
||
this.moving = false;
|
||
return;
|
||
}
|
||
this.moving = true;
|
||
if (moveDistance >= 80 && moveDistance < 100) {
|
||
moveDistance = 80;
|
||
}
|
||
if (moveDistance > 0 && moveDistance <= 80) {
|
||
this.coverTransform = `translateY(${moveDistance}px)`;
|
||
}
|
||
},
|
||
coverTouchend() {
|
||
if (this.moving === false) {
|
||
return;
|
||
}
|
||
this.moving = false;
|
||
this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
|
||
this.coverTransform = 'translateY(0px)';
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang='scss' scoped>
|
||
page {
|
||
background-color: $page-color-base;
|
||
}
|
||
|
||
.user {
|
||
.user-section {
|
||
background-color: $page-color-base;
|
||
height: 520upx;
|
||
padding: 100upx 30upx 0;
|
||
position: relative;
|
||
|
||
.bg {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
filter: blur(1px);
|
||
opacity: .7;
|
||
}
|
||
|
||
.user-info-box {
|
||
height: 180upx;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
z-index: 1;
|
||
justify-content: space-between;
|
||
|
||
.portrait-box {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.portrait {
|
||
width: 130upx;
|
||
height: 130upx;
|
||
border: 5upx solid #fff;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.username {
|
||
font-size: $font-lg + 6upx;
|
||
color: $color-white;
|
||
margin-left: 20upx;
|
||
}
|
||
|
||
button {
|
||
background-color: transparent;
|
||
font-size: $font-lg + 6upx;
|
||
color: $font-color-dark;
|
||
border: none;
|
||
}
|
||
|
||
button::after {
|
||
border: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.vip-card-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
color: #f7d680;
|
||
height: 240upx;
|
||
background: linear-gradient(to left, rgba(0, 0, 0, .7), rgba(0, 0, 0, .8));
|
||
border-radius: 16upx 16upx 0 0;
|
||
overflow: hidden;
|
||
position: relative;
|
||
padding: 20upx 24upx;
|
||
|
||
.card-bg {
|
||
position: absolute;
|
||
top: 20upx;
|
||
right: 0;
|
||
width: 380upx;
|
||
height: 260upx;
|
||
}
|
||
|
||
.tit {
|
||
font-size: $font-base+2upx;
|
||
color: #f7d680;
|
||
margin-bottom: 28upx;
|
||
|
||
.iconfont {
|
||
color: #f6e5a3;
|
||
display: inline-block;
|
||
margin-right: 16upx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.cover-container {
|
||
margin-top: -150upx;
|
||
padding: 0 30upx 20upx;
|
||
position: relative;
|
||
background-color: $page-color-base;
|
||
|
||
.arc {
|
||
position: absolute;
|
||
left: 0;
|
||
top: -34upx;
|
||
width: 100%;
|
||
height: 36upx;
|
||
}
|
||
|
||
.promotion-center {
|
||
background: #fff;
|
||
margin: 20upx 0;
|
||
/*分类列表*/
|
||
.category-list {
|
||
width: 100%;
|
||
padding: 0 0 30upx 0;
|
||
border-bottom: solid 2upx #f6f6f6;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.category {
|
||
width: 33.3%;
|
||
margin-top: 50upx;
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
|
||
.img {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.iconfont {
|
||
font-size: $font-lg + 24upx;
|
||
}
|
||
}
|
||
|
||
.text {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
font-size: 24upx;
|
||
color: #3c3c3c;
|
||
}
|
||
|
||
.share-btn {
|
||
height: 142upx;
|
||
text-align: left;
|
||
background: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.share-btn:after {
|
||
border: none;
|
||
border-radius: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tj-sction {
|
||
@extend %section;
|
||
display: flex;
|
||
|
||
.tj-item {
|
||
@extend %flex-center;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
margin: 30upx 0;
|
||
font-size: $font-sm;
|
||
color: #75787d;
|
||
/*border-right: 2upx solid rgba(0, 0, 0, 0.2);*/
|
||
}
|
||
|
||
/*.tj-item:last-child {*/
|
||
/*border-right: none;*/
|
||
/*}*/
|
||
.num {
|
||
font-size: $font-base;
|
||
color: $font-color-dark;
|
||
}
|
||
|
||
.red {
|
||
color: $base-color;
|
||
}
|
||
}
|
||
|
||
.order-section {
|
||
@extend %section;
|
||
padding: 28upx 0;
|
||
|
||
.order-item {
|
||
@extend %flex-center;
|
||
width: 120upx;
|
||
height: 120upx;
|
||
border-radius: 10upx;
|
||
font-size: $font-sm;
|
||
color: $font-color-dark;
|
||
position: relative;
|
||
}
|
||
|
||
.badge {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 4upx;
|
||
}
|
||
|
||
.iconfont {
|
||
font-size: 48upx;
|
||
color: #fa436a;
|
||
}
|
||
|
||
.icon-shouhoutuikuan {
|
||
font-size: 44upx;
|
||
}
|
||
}
|
||
|
||
.history-section {
|
||
background: #fff;
|
||
border-radius: 10upx;
|
||
.sec-header {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: $font-base;
|
||
color: $font-color-dark;
|
||
.iconfont {
|
||
color: #5eba8f;
|
||
margin-right: 16upx;
|
||
line-height: 40upx;
|
||
}
|
||
.content {
|
||
flex: 1;
|
||
}
|
||
.iconyou {
|
||
font-size: $font-base + 2upx;
|
||
color: $font-color-base;
|
||
margin-left: $uni-spacing-row-sm;
|
||
}
|
||
}
|
||
.h-list {
|
||
white-space: nowrap;
|
||
padding: 20upx 30upx 0;
|
||
.h-item {
|
||
display: inline-block;
|
||
font-size: $font-sm;
|
||
color: $font-color-base;
|
||
width: 160upx;
|
||
margin-right: 20upx;
|
||
border-radius: 10upx;
|
||
.h-item-img {
|
||
width: 160upx;
|
||
height: 160upx;
|
||
}
|
||
.h-item-text {
|
||
font-size: $font-sm;
|
||
}
|
||
}
|
||
}
|
||
|
||
.no-foot-print {
|
||
text-align: center;
|
||
padding: 48upx 0;
|
||
|
||
.no-foot-print-icon {
|
||
color: $base-color;
|
||
font-size: $font-lg + 2upx;
|
||
margin-right: 10upx;
|
||
}
|
||
}
|
||
|
||
.share-btn {
|
||
height: 102upx;
|
||
text-align: left;
|
||
background: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.share-btn:after {
|
||
border: none;
|
||
border-radius: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
%flex-center {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
%section {
|
||
justify-content: space-around;
|
||
display: flex;
|
||
align-content: center;
|
||
background: #fff;
|
||
border-radius: 10upx;
|
||
}
|
||
</style>
|