|
|
<template>
|
|
|
<view class="userbox" :class="['theme', themeObj.name]">
|
|
|
<!-- 头部个人信息 不变-->
|
|
|
<view class="userHeader">
|
|
|
<image src="/static/images/user/user-bg.png" class="user_bg"></image>
|
|
|
<view class="nav">
|
|
|
<view class="user" @click="onLogin">
|
|
|
<image :src="userdata.avatar" v-if="userdata.avatar"></image>
|
|
|
<image src="../../../static/images/face.jpg" v-else></image>
|
|
|
<view class="text">{{userdata.realname || '-'}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="vip">
|
|
|
<image src="/static/images/user/vip-card.png" class="vip_bg"></image>
|
|
|
<view class="vipname">
|
|
|
<text class="iconfont icon-zuanshi zuanshi"></text>
|
|
|
<text class="names">
|
|
|
商城尊享会员
|
|
|
</text>
|
|
|
<text class="vip_level">会员</text>
|
|
|
</view>
|
|
|
<view class="banquan">
|
|
|
商城版权所有©
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 中间菜单栏 -->
|
|
|
<!-- #ifndef H5 -->
|
|
|
<view class="userMenu" @touchstart="coverTouchStart" @touchmove="coverTouchMove" @touchend="coverTouchEnd" :style="'transform:' + coverTransform + ';transition:' + coverTransition">
|
|
|
<image src="/static/images/user/arc.png" class="arc"></image>
|
|
|
<!-- 我的账户 -->
|
|
|
<my-account :colors="colors"></my-account>
|
|
|
<!-- 全部订单 -->
|
|
|
<my-order :orderText="orderText" :colors="colors"></my-order>
|
|
|
<!-- 我的足迹 -->
|
|
|
<my-footprint :logList="logList" :colors="colors"></my-footprint>
|
|
|
<!-- 我的服务 -->
|
|
|
<my-server :serverList="serverList" :colors="colors" :userinfo="userdata"></my-server>
|
|
|
</view>
|
|
|
<!-- #endif -->
|
|
|
<!-- #ifdef H5 -->
|
|
|
<view class="userMenu" @touchmove.stop.prevent="moveHandle" @touchstart="coverTouchStart" @touchmove="coverTouchMove" @touchend="coverTouchEnd" :style="'transform:' + coverTransform + ';transition:' + coverTransition">
|
|
|
<image src="/static/images/user/arc.png" class="arc"></image>
|
|
|
<!-- 我的账户 -->
|
|
|
<!-- <my-account :colors="colors"></my-account> -->
|
|
|
</view>
|
|
|
<view class="place" >
|
|
|
<!-- 全部订单 -->
|
|
|
<my-order :orderText="orderText" :colors="colors"></my-order>
|
|
|
<!-- 我的足迹 -->
|
|
|
<my-footprint :logList="logList" :colors="colors"></my-footprint>
|
|
|
<!-- 我的服务 -->
|
|
|
<my-server :serverList="serverList" :colors="colors"></my-server>
|
|
|
</view>
|
|
|
<!-- #endif -->
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
let app = getApp();
|
|
|
import { getConfig, getUserInfo,getToken, getGoodsHistory } from '@/utils/auth';
|
|
|
import myAccount from "../../commponent/user/my-account";
|
|
|
import listCell from "../../commponent/user/list-cell";
|
|
|
import myOrder from "../../commponent/user/my-order";
|
|
|
import myFootprint from "../../commponent/user/my-footprint";
|
|
|
import myServer from "../../commponent/user/my-server";
|
|
|
import { ORDER_NAVS } from '../../../config/order.js'
|
|
|
import { getStatusList } from '@/api/index.js'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
colors: '',
|
|
|
themeObj: app.globalData.themeObj,
|
|
|
startY: 0,
|
|
|
//原始坐标
|
|
|
moving: false,
|
|
|
//当前元素的状态（是否移动）
|
|
|
coverTransform: 'translateY(0px)',
|
|
|
//元素的移动
|
|
|
coverTransition: '0s',
|
|
|
//动画效果
|
|
|
orderText: ORDER_NAVS.slice(1),
|
|
|
logList: [],
|
|
|
serverList: [{
|
|
|
name: '我的收藏',
|
|
|
icon: 'icon-shoucang',
|
|
|
url: '/pages/views/user/mycollection',
|
|
|
id: 1,
|
|
|
elseUrl: ''
|
|
|
},
|
|
|
// {
|
|
|
// name: '地址管理',
|
|
|
// icon: 'icon-dizhi',
|
|
|
// url: '/pages/views/user/myaddress',
|
|
|
// id: 2,
|
|
|
// elseUrl: ''
|
|
|
// },
|
|
|
{
|
|
|
name: '分销中心',
|
|
|
icon: 'icon-fenxiao',
|
|
|
url: '/pages/views/user/mydistribution',
|
|
|
id: 6,
|
|
|
elseUrl: ''
|
|
|
}, {
|
|
|
name: '分享',
|
|
|
icon: 'icon-fenxiang1',
|
|
|
url: '/pages/views/user/extension',
|
|
|
id: 7,
|
|
|
elseUrl: ''
|
|
|
}, {
|
|
|
name: '联系我们',
|
|
|
icon: 'icon-kefu1',
|
|
|
url: '/pages/views/user/contactUs',
|
|
|
id: 8,
|
|
|
elseUrl: ''
|
|
|
}, {
|
|
|
name: '设置',
|
|
|
icon: 'icon-shezhi2',
|
|
|
url: '/pages/views/setting/index',
|
|
|
id: 9,
|
|
|
elseUrl: ''
|
|
|
}],
|
|
|
oldcolor: '',
|
|
|
userdata: {}
|
|
|
};
|
|
|
},
|
|
|
|
|
|
components: {
|
|
|
myAccount,
|
|
|
listCell,
|
|
|
myOrder,
|
|
|
myFootprint,
|
|
|
myServer
|
|
|
},
|
|
|
props: {},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面加载
|
|
|
*/
|
|
|
onLoad: function (options) {
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面初次渲染完成
|
|
|
*/
|
|
|
onReady: function () {},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面显示
|
|
|
*/
|
|
|
onShow: function () {
|
|
|
this.themeObj = app.globalData.themeObj
|
|
|
uni.setTabBarStyle({
|
|
|
selectedColor: this.themeObj .color
|
|
|
});
|
|
|
this.themeObj .tabList.forEach((v, index) => {
|
|
|
uni.setTabBarItem({
|
|
|
//设置tabBar 首页图标
|
|
|
index: index,
|
|
|
selectedIconPath: v
|
|
|
});
|
|
|
})
|
|
|
if (!getToken()) {
|
|
|
uni.navigateTo({
|
|
|
url: '/pages/login/index1'
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
this.logList = getGoodsHistory()
|
|
|
let colors = app.globalData.newColor;
|
|
|
|
|
|
let oldcolor = this.colors;
|
|
|
let userdata = getUserInfo() || {};
|
|
|
this.userdata = userdata
|
|
|
this.getOrderStatus()
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面隐藏
|
|
|
*/
|
|
|
onHide: function () {},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面卸载
|
|
|
*/
|
|
|
onUnload: function () {},
|
|
|
|
|
|
/**
|
|
|
* 页面相关事件处理函数--监听用户下拉动作
|
|
|
*/
|
|
|
onPullDownRefresh: function () {},
|
|
|
|
|
|
/**
|
|
|
* 页面上拉触底事件的处理函数
|
|
|
*/
|
|
|
onReachBottom: function () {},
|
|
|
|
|
|
/**
|
|
|
* 用户点击右上角分享
|
|
|
*/
|
|
|
onShareAppMessage: function () {},
|
|
|
methods: {
|
|
|
getOrderStatus() {
|
|
|
getStatusList({userId: getUserInfo().id}).then(res => {
|
|
|
const result = res.result
|
|
|
const obj = {
|
|
|
'state6': result.unconfirmed,
|
|
|
state0: result.unpaid,
|
|
|
state1: result.notSend,
|
|
|
// state2: result.send,
|
|
|
// state3: result.complete,
|
|
|
// state4: result.other,
|
|
|
// state5: result.cancel,
|
|
|
}
|
|
|
const navs = ORDER_NAVS.slice(1).map((v, index) => {
|
|
|
v._num = obj['state' + (v.id + '')] || 0
|
|
|
return v
|
|
|
})
|
|
|
this.orderText = navs
|
|
|
})
|
|
|
|
|
|
},
|
|
|
onLogin(){
|
|
|
let token = getToken()
|
|
|
if(getToken()){
|
|
|
return
|
|
|
}
|
|
|
uni.navigateTo({
|
|
|
url:'../../login/login'
|
|
|
})
|
|
|
},
|
|
|
coverTouchStart(e) {
|
|
|
//滑动开始 记录目标原始坐标
|
|
|
this.setData({
|
|
|
startY: e.touches[0].clientY,
|
|
|
coverTransition: 'transform .2s linear'
|
|
|
});
|
|
|
},
|
|
|
moveHandle(){ //阻止下拉默认事件
|
|
|
|
|
|
},
|
|
|
coverTouchMove(e) {
|
|
|
//滑动中
|
|
|
let moveY = e.touches[0].clientY; //记录移动的坐标
|
|
|
let startY = this.startY;
|
|
|
let moveDistance = moveY - startY; //计算当前坐标与原始坐标的差
|
|
|
if (moveDistance < 0) {
|
|
|
//如果小于0 不做操作
|
|
|
this.setData({
|
|
|
moving: false
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
this.setData({
|
|
|
moving: true
|
|
|
});
|
|
|
|
|
|
if (moveDistance >= 60) {
|
|
|
//如果差在该区间内
|
|
|
moveDistance = 60;
|
|
|
}
|
|
|
|
|
|
if (moveDistance > 0 && moveDistance <= 60) {
|
|
|
this.setData({
|
|
|
coverTransform: `translateY(${moveDistance}px)`
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
|
|
|
coverTouchEnd(e) {
|
|
|
//滑动结束 回到原始位置
|
|
|
if (this.moving == false) {
|
|
|
return;
|
|
|
}
|
|
|
this.setData({
|
|
|
coverTransform: 'translateY(0px)',
|
|
|
moving: false,
|
|
|
coverTransition: 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)'
|
|
|
});
|
|
|
},
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
.userHeader {
|
|
|
height: 520upx;
|
|
|
width: 100vw;
|
|
|
position: relative;
|
|
|
padding: 50upx 4%;
|
|
|
}
|
|
|
|
|
|
.userHeader .user_bg {
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
display: block;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
}
|
|
|
|
|
|
.userHeader .nav {
|
|
|
height: 180upx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
|
|
|
.user {
|
|
|
display: flex;
|
|
|
-webkit-box-align: center;
|
|
|
-webkit-align-items: center;
|
|
|
align-items: center;
|
|
|
overflow: hidden;
|
|
|
z-index: 200;
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.user image {
|
|
|
width: 130upx;
|
|
|
height: 130upx;
|
|
|
border: 5upx solid #fff;
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
|
|
|
.user .text {
|
|
|
font-size: 24upx;
|
|
|
color: #fff;
|
|
|
margin-left: 20upx;
|
|
|
width: 76%;
|
|
|
line-height: 30upx;
|
|
|
height: 30upx;
|
|
|
white-space: break-spaces;
|
|
|
}
|
|
|
|
|
|
.vip {
|
|
|
height: 240upx;
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
padding: 20upx 24upx;
|
|
|
border-radius: 16upx 16upx 0 0;
|
|
|
width: 100%;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.banquan {
|
|
|
position: absolute;
|
|
|
color: #f6e5a3;
|
|
|
top: 100upx;
|
|
|
left: 24upx;
|
|
|
font-size: 24upx;
|
|
|
}
|
|
|
|
|
|
.vip .vip_bg {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
}
|
|
|
|
|
|
.vipname {
|
|
|
z-index: 5;
|
|
|
display: flex;
|
|
|
width: 100%;
|
|
|
height: 60upx;
|
|
|
position: relative;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.vipname .zuanshi {
|
|
|
color: #f6e5a3;
|
|
|
font-size: 42upx;
|
|
|
line-height: 60upx;
|
|
|
}
|
|
|
|
|
|
.vipname .names {
|
|
|
color: #f6e5a3;
|
|
|
line-height: 20upx;
|
|
|
font-size: 24upx;
|
|
|
margin-left: 20upx;
|
|
|
}
|
|
|
|
|
|
.vip_level {
|
|
|
width: 115upx;
|
|
|
height: 35upx;
|
|
|
text-align: center;
|
|
|
line-height: 35upx;
|
|
|
font-size: 20upx;
|
|
|
color: #333;
|
|
|
background: linear-gradient(270deg, #f9e6af, #ffd465);
|
|
|
border-radius: 20upx;
|
|
|
position: absolute;
|
|
|
top: 12upx;
|
|
|
right: 10upx;
|
|
|
}
|
|
|
|
|
|
/* 中间菜单栏 */
|
|
|
.userMenu {
|
|
|
margin-top: -178upx;
|
|
|
padding: 0 4%;
|
|
|
position: relative;
|
|
|
background-color: #f8f8f8;
|
|
|
padding-bottom: 10upx;
|
|
|
}
|
|
|
|
|
|
.userMenu .arc {
|
|
|
width: 100%;
|
|
|
height: 36upx;
|
|
|
position: absolute;
|
|
|
top: -34upx;
|
|
|
left: 0;
|
|
|
}
|
|
|
.place{
|
|
|
padding: 0 4%;
|
|
|
position: relative;
|
|
|
background-color: #f8f8f8;
|
|
|
padding-bottom: 40upx;
|
|
|
}
|
|
|
</style>
|
