335 lines
8.3 KiB
Vue
335 lines
8.3 KiB
Vue
<template>
|
|
<view class="mine">
|
|
<view class="mine-top">
|
|
<view class="top">
|
|
<u-avatar @click="toOtherPage('/mine/MineInfo')" :src="userInfo.member_avatar" :size="110"></u-avatar>
|
|
<view class="user-info">
|
|
<view class="info-left">
|
|
<view class="user-nickname">{{ userInfo.member_nickname }}</view>
|
|
<view class="user-medal" @click="toOtherPage('/mine/MedalIntroduction')">
|
|
<img src="/static/image/mine/13.png" />
|
|
<view class="rank-title">勋章</view>
|
|
</view>
|
|
</view>
|
|
<view class="info-right">
|
|
<view class="info-phone">{{ userInfo.member_mobile | phoneFormat }}</view>
|
|
<view class="user-rank">等级:{{ userInfo.member_level }}级</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 }}</view>
|
|
<view>店铺收藏</view>
|
|
</view>
|
|
<view @click="toOtherPage('/mine/ImageTextCollection')">
|
|
<view>9</view>
|
|
<view>图文收藏</view>
|
|
</view>
|
|
<view @click="toOtherPage('/mine/Integral')">
|
|
<view>{{ userInfo ? userInfo.member_points : 0 }}</view>
|
|
<view>积分数</view>
|
|
</view>
|
|
<view @click="toOtherPage('/mine/MineConcerns')">
|
|
<view>{{ userInfo.member_snsfrend_num }}</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>查看全部订单</view>
|
|
<img src="/static/image/mine/21.png" />
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<view @click="toOtherPage('/order/Index?current=1')">
|
|
<img src="/static/image/mine/6.png" />
|
|
<view>待支付</view>
|
|
</view>
|
|
<view @click="toOtherPage('/order/Index?current=2')">
|
|
<img src="/static/image/mine/14.png" />
|
|
<view>已取消</view>
|
|
</view>
|
|
<view @click="toOtherPage('/order/Index?current=3')">
|
|
<img src="/static/image/mine/2.png" />
|
|
<view>待收货</view>
|
|
</view>
|
|
<view @click="toOtherPage('/order/Index?current=4')">
|
|
<img src="/static/image/mine/1.png" />
|
|
<view>试穿试送</view>
|
|
</view>
|
|
<view @click="toOtherPage('/order/Index?current=5')">
|
|
<img src="/static/image/mine/3.png" />
|
|
<view>待评价</view>
|
|
</view>
|
|
<view @click="toOtherPage('/order/Index?current=6')">
|
|
<img src="/static/image/mine/9.png" />
|
|
<view>售后</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="tool">
|
|
<view class="title">我的工具</view>
|
|
<view class="content">
|
|
<view @click="toOtherPage('/tool/SendWash')">
|
|
<img src="/static/image/mine/20.png" />
|
|
<view>送洗</view>
|
|
</view>
|
|
<view @click="toOtherPage('/tool/Manicure')">
|
|
<img src="/static/image/mine/19.png" />
|
|
<view>美甲</view>
|
|
</view>
|
|
<view @click="toOtherPage('/tool/MineHistory')">
|
|
<img src="/static/image/mine/18.png" />
|
|
<view>足迹</view>
|
|
</view>
|
|
<view @click="toOtherPage('/tool/MineCoupon')">
|
|
<img src="/static/image/mine/25.png" />
|
|
<view>优惠券</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="more-tool">
|
|
<view class="title">更多工具</view>
|
|
<view class="content">
|
|
<view @click="toOtherPage('/more/Address')">
|
|
<img src="/static/image/mine/17.png" />
|
|
<view>收货地址</view>
|
|
</view>
|
|
<view @click="toOtherPage('/more/AfterSalesHelp')">
|
|
<img src="/static/image/mine/9.png" />
|
|
<view>售后政策</view>
|
|
</view>
|
|
<view @click="toOtherPage('/more/MineHelp')">
|
|
<img src="/static/image/mine/16.png" />
|
|
<view>使用帮助</view>
|
|
</view>
|
|
<view @click="toOtherPage('/more/Complaints')">
|
|
<img src="/static/image/mine/15.png" />
|
|
<view>投诉意见</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
userInfo: {},
|
|
};
|
|
},
|
|
filters: {
|
|
phoneFormat(value) {
|
|
return value ? value.replace(/^(\d{3})\d*(\d{4})$/, '$1****$2') : '';
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getUserInfo();
|
|
},
|
|
onNavigationBarButtonTap() {
|
|
this.toOtherPage("/setting/Index");
|
|
},
|
|
methods: {
|
|
getUserInfo() {
|
|
this.$u.api.getMemberInfo().then(res => {
|
|
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)) - 50px);
|
|
background: #ECECEC;
|
|
.mine-top {
|
|
// width: 100%;
|
|
height: 272rpx;
|
|
background: #FF780F;
|
|
.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 {
|
|
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;
|
|
> img {
|
|
margin-right: 9rpx;
|
|
width: 20rpx;
|
|
height: 22rpx;
|
|
}
|
|
.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);
|
|
}
|
|
}
|
|
}
|
|
.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 {
|
|
box-sizing: border-box;
|
|
padding: 0 30rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
> view {
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
color:rgba(51,51,51,1);
|
|
> view:first-child {
|
|
margin-bottom: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.mine-container {
|
|
@mixin common-mine($content-padding-top, $content-padding-bottom, $image-height) {
|
|
box-sizing: border-box;
|
|
width: 690rpx;
|
|
background: rgba(255,255,255,1);
|
|
border-radius: 10rpx;
|
|
margin: 30rpx auto 0;
|
|
padding: 0 20rpx;
|
|
.title {
|
|
height: 76rpx;
|
|
font-size: 28rpx;
|
|
color: rgba(51,51,51,1);
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 650rpx;
|
|
height: 1rpx;
|
|
background: rgba(234,234,234,1);
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translate(-50%,0);
|
|
}
|
|
}
|
|
.content {
|
|
padding: $content-padding-top 0 $content-padding-bottom;
|
|
display: flex;
|
|
> view {
|
|
text-align: center;
|
|
> img {
|
|
height: $image-height;
|
|
margin-bottom: 15rpx;
|
|
}
|
|
> 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
|
|
);
|
|
.title {
|
|
justify-content: space-between;
|
|
.more {
|
|
display: flex;
|
|
align-items: center;
|
|
> img {
|
|
height: 19rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
.content {
|
|
justify-content: space-between;
|
|
> view {
|
|
text-align: center;
|
|
};
|
|
}
|
|
}
|
|
.tool {
|
|
@include common-mine(
|
|
$content-padding-top: 8rpx,
|
|
$content-padding-bottom: 25rpx,
|
|
$image-height: 71rpx
|
|
);
|
|
.content {
|
|
> view:not(:last-child) {
|
|
margin-right: 58rpx;
|
|
}
|
|
}
|
|
}
|
|
.more-tool {
|
|
@include common-mine(
|
|
$content-padding-top: 8rpx,
|
|
$content-padding-bottom: 48rpx,
|
|
$image-height: 71rpx
|
|
);
|
|
.content {
|
|
> view:not(:last-child) {
|
|
margin-right: 46rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|