deming/pages/mine/index.vue
2020-08-14 20:19:04 +08:00

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>