450 lines
12 KiB
Vue
450 lines
12 KiB
Vue
<template>
|
|
<view class="mine">
|
|
<view class="mine-top">
|
|
<view class="top">
|
|
<u-avatar @click="toOtherPage('/mine/MineInfo')" :src="userInfo.member_avatar + '?' + new Date().getTime()" :size="110"></u-avatar>
|
|
<view class="user-info">
|
|
<!-- <view class="info-left">
|
|
<view class="user-nickname u-line-1">{{ userInfo.member_nickname }}</view>
|
|
<view class="user-medal" @click="toOtherPage('/mine/MedalIntroduction')">
|
|
<image src="/static/image/mine/13.png"></image>
|
|
<view class="rank-title">{{ userInfo.member_grade_name }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="info-right">
|
|
<view class="info-phone">{{ userInfo.member_mobile | phoneFormat }}</view>
|
|
<view class="user-rank">等级:{{ userInfo.member_level || 0 }}级</view>
|
|
</view> -->
|
|
<view class="info-top">
|
|
<view class="user-nickname u-line-1">{{ userInfo.member_nickname }}</view>
|
|
<view class="info-phone">{{ userInfo.member_mobile | phoneFormat }}</view>
|
|
</view>
|
|
<view class="info-bottom">
|
|
<view class="user-medal" @click="toOtherPage('/mine/MedalIntroduction')">
|
|
<image src="/static/image/mine/13.png"></image>
|
|
<view class="rank-title">{{ userInfo.member_grade_name }}</view>
|
|
</view>
|
|
<view class="user-rank">等级:{{ userInfo.member_level || 0 }}级</view>
|
|
</view>
|
|
</view>
|
|
<view class="member-service" @click="toOtherPage('/mine/MemberServe')">会员服务</view>
|
|
</view>
|
|
<view class="bottom">
|
|
<view @click="toOtherPage('/mine/GoodsCollection')">
|
|
<view>{{ userInfo.member_fav_goods_num || 0 }}</view>
|
|
<view>商品收藏</view>
|
|
</view>
|
|
<!-- <view @click="toOtherPage('/mine/StoreCollection')">
|
|
<view>{{ userInfo.member_fav_store_num || 0 }}</view>
|
|
<view>店铺收藏</view>
|
|
</view> -->
|
|
<view @click="toOtherPage('/mine/ImageTextCollection')">
|
|
<view>{{ userInfo.member_fav_article_num || 0 }}</view>
|
|
<view>图文收藏</view>
|
|
</view>
|
|
<view @click="toOtherPage('/mine/Integral')">
|
|
<view>{{ userInfo.member_points || 0 }}</view>
|
|
<view>积分数</view>
|
|
</view>
|
|
<view @click="toOtherPage('/mine/MineConcerns')">
|
|
<view>{{ userInfo.member_snsfrend_num || 0 }}</view>
|
|
<view>关注</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="mine-container">
|
|
<view class="order">
|
|
<view class="title">
|
|
<view class="title-text">我的订单</view>
|
|
<view class="more" @click="toOtherPage('/order/Index')">
|
|
<view class="title-text-more">查看全部订单</view>
|
|
<u-icon name="arrow-right" color="#999" size="22"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<view @click="toOtherPage('/order/Index?current=1')">
|
|
<image src="/static/image/mine/6.png"></image>
|
|
<view>待支付</view>
|
|
</view>
|
|
<view @click="toOtherPage('/order/Index?current=2')">
|
|
<image src="/static/image/mine/35.png"></image>
|
|
<view>待发货</view>
|
|
</view>
|
|
<view @click="toOtherPage('/order/Index?current=3')">
|
|
<image src="/static/image/mine/2.png"></image>
|
|
<view>待收货</view>
|
|
</view>
|
|
<view @click="toOtherPage('/order/Index?current=4')">
|
|
<image src="/static/image/mine/1.png"></image>
|
|
<view>试穿试送</view>
|
|
</view>
|
|
<view @click="toOtherPage('/order/Index?current=5')">
|
|
<image src="/static/image/mine/37.png"></image>
|
|
<view>拼团中</view>
|
|
</view>
|
|
<view @click="toOtherPage('/order/Index?current=6')">
|
|
<image src="/static/image/mine/3.png"></image>
|
|
<view>待评价</view>
|
|
</view>
|
|
<view @click="toOtherPage('/order/Index?current=7')">
|
|
<image src="/static/image/mine/9.png"></image>
|
|
<view>售后</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="tool">
|
|
<view class="title">我的工具</view>
|
|
<view class="content">
|
|
<view @click="toOtherPage('/tool/SendWash')">
|
|
<image src="/static/image/mine/20.png"></image>
|
|
<view>送洗</view>
|
|
</view>
|
|
<view @click="toOtherPage('/tool/Manicure')">
|
|
<image src="/static/image/mine/19.png"></image>
|
|
<view>美甲</view>
|
|
</view>
|
|
<view @click="toOtherPage('/tool/MineHistory')">
|
|
<image src="/static/image/mine/18.png"></image>
|
|
<view>足迹</view>
|
|
</view>
|
|
<view @click="toOtherPage('/tool/MineCoupon')">
|
|
<image src="/static/image/mine/25.png"></image>
|
|
<view>优惠券</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="more-tool">
|
|
<view class="title">更多工具</view>
|
|
<view class="content">
|
|
<view @click="toOtherPage('/more/Address')">
|
|
<image src="/static/image/mine/17.png"></image>
|
|
<view>收货地址</view>
|
|
</view>
|
|
<view @click="toOtherPage('/more/AfterSalesHelp')">
|
|
<image src="/static/image/mine/38.png"></image>
|
|
<view>售后政策</view>
|
|
</view>
|
|
<view @click="toOtherPage('/more/MineHelp')">
|
|
<image src="/static/image/mine/16.png"></image>
|
|
<view>使用帮助</view>
|
|
</view>
|
|
<view @click="toOtherPage('/more/Complaints')">
|
|
<image src="/static/image/mine/15.png"></image>
|
|
<view>投诉意见</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex';
|
|
export default {
|
|
computed: {
|
|
...mapState(['hasLogin', 'token'])
|
|
},
|
|
data() {
|
|
return {
|
|
userInfo: {},
|
|
};
|
|
},
|
|
filters: {
|
|
phoneFormat(value) {
|
|
return value ? value.replace(/^(\d{3})\d*(\d{4})$/, '$1****$2') : '';
|
|
}
|
|
},
|
|
onShow() {
|
|
// 尝试登录
|
|
if (!this.hasLogin) {
|
|
uni.navigateTo({
|
|
url: "../../pageA/login/login"
|
|
})
|
|
}
|
|
this.getUserInfo();
|
|
},
|
|
onNavigationBarButtonTap() {
|
|
this.toOtherPage("/setting/Index");
|
|
},
|
|
methods: {
|
|
getUserInfo() {
|
|
this.$u.api.getMemberInfo().then(res => {
|
|
// uni.stopPullDownRefresh();
|
|
if (res.errCode == 0) {
|
|
// this.userInfo = res.data.MemberArray;
|
|
this.$set(this, 'userInfo', res.data.MemberArray);
|
|
}
|
|
})
|
|
},
|
|
toOtherPage(url) {
|
|
uni.navigateTo({
|
|
url: '/pageE' + url
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.mine {
|
|
min-height: calc(calc(100vh - var(--window-top)));
|
|
background: #ECECEC;
|
|
.mine-top {
|
|
// width: 100%;
|
|
height: 272rpx;
|
|
background-color: #FF7807;
|
|
.top {
|
|
padding: 40rpx 0 0 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 40rpx;
|
|
.user-info {
|
|
margin-left: 30rpx;
|
|
// display: flex;
|
|
.info-left {
|
|
margin-right: 15rpx;
|
|
.user-nickname {
|
|
max-width: 200rpx;
|
|
font-size: 30rpx;
|
|
color: rgba(51,51,51,1);
|
|
margin-bottom: 19rpx;
|
|
}
|
|
.user-medal {
|
|
display: flex;
|
|
width: 110rpx;
|
|
// height: 25rpx;
|
|
background: linear-gradient(269deg,rgba(175,175,175,1) 0%,rgba(224,224,224,1) 100%);
|
|
border-radius: 13rpx;
|
|
align-items: center;
|
|
padding: 0 17rpx 0 10rpx;
|
|
> image {
|
|
margin-right: 9rpx;
|
|
width: 20rpx;
|
|
height: 22rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
.rank-title {
|
|
font-size: 16rpx;
|
|
color: rgba(51,51,51,1);
|
|
}
|
|
}
|
|
}
|
|
.info-right {
|
|
.info-phone {
|
|
font-size: 24rpx;
|
|
color: rgba(51,51,51,1);
|
|
margin-bottom: 26rpx;
|
|
}
|
|
.user-rank {
|
|
font-size: 24rpx;
|
|
color: rgba(51,51,51,1);
|
|
}
|
|
}
|
|
.info-top {
|
|
height: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 19rpx;
|
|
.user-nickname {
|
|
min-width: 110rpx;
|
|
max-width: 200rpx;
|
|
font-size: 30rpx;
|
|
color: rgba(51,51,51,1);
|
|
margin-right: 19rpx;
|
|
}
|
|
.info-phone {
|
|
font-size: 24rpx;
|
|
color: rgba(51,51,51,1);
|
|
// margin-bottom: 26rpx;
|
|
}
|
|
}
|
|
.info-bottom {
|
|
height: 25rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
.user-medal {
|
|
display: flex;
|
|
width: 110rpx;
|
|
height: 25rpx;
|
|
background: linear-gradient(269deg,rgba(175,175,175,1) 0%,rgba(224,224,224,1) 100%);
|
|
border-radius: 13rpx;
|
|
align-items: center;
|
|
padding: 0 17rpx 0 10rpx;
|
|
margin-right: 20rpx;
|
|
> image {
|
|
margin-right: 9rpx;
|
|
width: 20rpx;
|
|
height: 22rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
.rank-title {
|
|
font-size: 16rpx;
|
|
color: rgba(51,51,51,1);
|
|
}
|
|
}
|
|
.user-rank {
|
|
font-size: 24rpx;
|
|
color: rgba(51,51,51,1);
|
|
}
|
|
}
|
|
}
|
|
.member-service {
|
|
height: 52rpx;
|
|
line-height: 52rpx;
|
|
box-sizing: content-box;
|
|
margin-left: auto;
|
|
padding: 0 51rpx 0 22rpx;
|
|
background: rgba(255,255,255,0.32);
|
|
border-radius: 26rpx 0 0 26rpx;
|
|
font-size: 26rpx;
|
|
color:rgba(51,51,51,1);
|
|
}
|
|
}
|
|
.bottom {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 0 10rpx;
|
|
box-sizing: border-box;
|
|
> view {
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
color: #333;
|
|
> view:first-child {
|
|
margin-bottom: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.mine-container {
|
|
@mixin image-size($image-width, $image-height) {
|
|
> image {
|
|
width: $image-width !important;
|
|
height: $image-height !important;
|
|
}
|
|
}
|
|
@mixin common-mine($content-padding-top, $content-padding-bottom, $image-width, $image-height) {
|
|
box-sizing: border-box;
|
|
width: 710rpx;
|
|
background: rgba(255,255,255,1);
|
|
border-radius: 10rpx;
|
|
margin: 20rpx auto 0;
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 76rpx;
|
|
padding: 0 20rpx;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
border-bottom: 1px solid #ececec;
|
|
// &::after {
|
|
// content: "";
|
|
// position: absolute;
|
|
// width: 650rpx;
|
|
// height: 1rpx;
|
|
// background: rgba(234,234,234,1);
|
|
// bottom: 0;
|
|
// left: 50%;
|
|
// transform: translate(-50%,0);
|
|
// }
|
|
}
|
|
.title-text-more {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
.content {
|
|
padding: $content-padding-top 20rpx $content-padding-bottom;
|
|
display: flex;
|
|
> view {
|
|
text-align: center;
|
|
> image {
|
|
width: $image-width;
|
|
height: $image-height;
|
|
margin-bottom: 15rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
> view {
|
|
font-size: 22rpx;
|
|
color: rgba(102,102,102,1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.order {
|
|
@include common-mine(
|
|
$content-padding-top: 22rpx,
|
|
$content-padding-bottom: 30rpx,
|
|
$image-height: 36rpx,
|
|
$image-width: 36rpx
|
|
);
|
|
.title {
|
|
justify-content: space-between;
|
|
.more {
|
|
display: flex;
|
|
align-items: center;
|
|
> image {
|
|
width: 19rpx;
|
|
height: 19rpx;
|
|
margin-left: 10rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
}
|
|
.content {
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
> view {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
> view:nth-child(1){
|
|
@include image-size($image-width: 36rpx, $image-height: 34rpx);
|
|
}
|
|
> view:nth-child(2){
|
|
@include image-size($image-width: 38rpx, $image-height: 36rpx);
|
|
}
|
|
> view:nth-child(3){
|
|
@include image-size($image-width: 40rpx, $image-height: 36rpx);
|
|
}
|
|
> view:nth-child(4){
|
|
@include image-size($image-width: 38rpx, $image-height: 38rpx);
|
|
}
|
|
> view:nth-child(5){
|
|
@include image-size($image-width: 36rpx, $image-height: 40rpx);
|
|
}
|
|
> view:nth-child(6){
|
|
@include image-size($image-width: 36rpx, $image-height: 40rpx);
|
|
}
|
|
}
|
|
}
|
|
.tool {
|
|
@include common-mine(
|
|
$content-padding-top: 24rpx,
|
|
$content-padding-bottom: 25rpx,
|
|
$image-height: 71rpx,
|
|
$image-width: 71rpx
|
|
);
|
|
.content {
|
|
> view:not(:last-child) {
|
|
margin-right: 58rpx;
|
|
}
|
|
}
|
|
}
|
|
.more-tool {
|
|
@include common-mine(
|
|
$content-padding-top: 24rpx,
|
|
$content-padding-bottom: 48rpx,
|
|
$image-height: 71rpx,
|
|
$image-width: 71rpx
|
|
);
|
|
.content {
|
|
> view:not(:last-child) {
|
|
margin-right: 46rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|