503 lines
13 KiB
Vue
503 lines
13 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-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="btn">
|
|
<view class="member-service" @click="toOtherPage('/mine/MemberServe')">会员服务</view>
|
|
<view class="member-service" @click="toOtherPage('/mine/Contact')">联系我们</view>
|
|
</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 v-for="(item, index) in orderList" :key="index" @click="toOtherPage(item.link)">
|
|
<image :src="item.img"></image>
|
|
<view>{{ item.title }}</view>
|
|
<view class="order-num" v-if="item.number">
|
|
<text>{{ item.number }}</text>
|
|
</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 @click="toOtherPage('/order/Index?current=4')">
|
|
<image src="/static/image/mine/39.png"></image>
|
|
<view>试穿试送</view>
|
|
</view>
|
|
<view @click="toCartPage">
|
|
<image src="/static/image/common/33.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 class="badge-box" @click="toOtherPage('/more/Complaints')">
|
|
<image src="/static/image/mine/15.png"></image>
|
|
<view>投诉意见</view>
|
|
<u-badge size="mini" :count="userInfo.feedback_show" :offset="offset" type="error"></u-badge>
|
|
</view>
|
|
<view @click="toOtherPage('/more/ApplyLive')">
|
|
<image src="/static/image/mine/45.png"></image>
|
|
<view>达人申请</view>
|
|
</view>
|
|
<view @click="toOtherPage('/more/MineInvoice')">
|
|
<image src="/static/image/mine/46.png"></image>
|
|
<view>我的发票</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex';
|
|
export default {
|
|
computed: {
|
|
...mapState(['hasLogin', 'token'])
|
|
},
|
|
data() {
|
|
return {
|
|
userInfo: {},
|
|
orderList: [
|
|
{
|
|
name: 'wait_pay',
|
|
title: '待支付',
|
|
img: '/static/image/mine/6.png',
|
|
link: '/order/Index?current=1',
|
|
number: '',
|
|
},
|
|
{
|
|
name: 'already_pay',
|
|
title: '待发货',
|
|
img: '/static/image/mine/35.png',
|
|
link: '/order/Index?current=2',
|
|
number: '',
|
|
},
|
|
{
|
|
name: 'wait_receipt',
|
|
title: '待收货',
|
|
img: '/static/image/mine/2.png',
|
|
link: '/order/Index?current=3',
|
|
number: '',
|
|
},
|
|
{
|
|
name: 'pintuan',
|
|
title: '拼团中',
|
|
img: '/static/image/mine/37.png',
|
|
link: '/order/Index?current=5',
|
|
number: '',
|
|
},
|
|
{
|
|
name: 'wait_evaluation',
|
|
title: '待评价',
|
|
img: '/static/image/mine/3.png',
|
|
link: '/order/Index?current=6',
|
|
number: '',
|
|
},
|
|
{
|
|
name: 'refund',
|
|
title: '退款售后',
|
|
img: '/static/image/mine/9.png',
|
|
link: '/order/Index?current=7',
|
|
number: '',
|
|
},
|
|
],
|
|
offset: [-10,6]
|
|
};
|
|
},
|
|
filters: {
|
|
phoneFormat(value) {
|
|
return value ? value.replace(/^(\d{3})\d*(\d{4})$/, '$1****$2') : '';
|
|
}
|
|
},
|
|
onShow() {
|
|
// 尝试登录
|
|
if (!this.hasLogin) {
|
|
uni.navigateTo({
|
|
url: "../../pageA/login/login"
|
|
})
|
|
} else {
|
|
this.getOrderNumber();
|
|
this.getUserInfo();
|
|
}
|
|
},
|
|
onNavigationBarButtonTap(e) {
|
|
// console.log(e);
|
|
if(e.index == 0) this.$u.route('/pageE/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);
|
|
}
|
|
})
|
|
},
|
|
getOrderNumber() {
|
|
this.$u.api.getOrderNumber().then(res => {
|
|
const object = res.data;
|
|
for (const key in object) {
|
|
if (object.hasOwnProperty(key)) {
|
|
let element = object[key];
|
|
const order = this.orderList.filter(item => item.name == key);
|
|
if(element > 99) element = "99+";
|
|
this.$set(order[0], 'number', element);
|
|
}
|
|
}
|
|
// console.log(this.orderList);
|
|
})
|
|
},
|
|
toOtherPage(url) {
|
|
// console.log(url);
|
|
uni.navigateTo({
|
|
url: '/pageE' + url
|
|
});
|
|
},
|
|
toCartPage() {
|
|
this.$u.route('/pageC/cart/index');
|
|
},
|
|
}
|
|
};
|
|
</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;
|
|
position: relative;
|
|
.top {
|
|
padding: 40rpx 0 0 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 40rpx;
|
|
.user-info {
|
|
margin-left: 30rpx;
|
|
// display: flex;
|
|
.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);
|
|
}
|
|
}
|
|
}
|
|
.btn {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 43rpx;
|
|
.member-service {
|
|
height: 52rpx;
|
|
line-height: 52rpx;
|
|
box-sizing: content-box;
|
|
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);
|
|
&:not(:last-child) {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.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-row, $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;
|
|
}
|
|
.title-text-more {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
.content {
|
|
padding: $content-padding-top $content-padding-row $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-row: 30rpx,
|
|
$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;
|
|
position: relative;
|
|
.order-num {
|
|
position: absolute;
|
|
top: -14rpx;
|
|
}
|
|
.order-num > text {
|
|
z-index: 9;
|
|
float: left;
|
|
border: 1rpx solid #FF7807;
|
|
height: 24rpx;
|
|
border-radius: 12rpx;
|
|
padding: 6rpx 8rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #FF7807;
|
|
background-color: #ffffff;
|
|
font-size: 18rpx;
|
|
color:rgba(255,120,15,1);
|
|
}
|
|
}
|
|
> view:not(:nth-child(6)) {
|
|
.order-num {
|
|
left: 40rpx;
|
|
}
|
|
}
|
|
> view:nth-child(1){
|
|
@include image-size($image-width: 33rpx, $image-height: 36rpx);
|
|
}
|
|
> view:nth-child(2){
|
|
@include image-size($image-width: 38rpx, $image-height: 32rpx);
|
|
}
|
|
> view:nth-child(3){
|
|
@include image-size($image-width: 41rpx, $image-height: 33rpx);
|
|
}
|
|
> view:nth-child(4){
|
|
@include image-size($image-width: 35rpx, $image-height: 35rpx);
|
|
}
|
|
> view:nth-child(5){
|
|
@include image-size($image-width: 35rpx, $image-height: 35rpx);
|
|
}
|
|
> view:nth-child(6){
|
|
@include image-size($image-width: 33rpx, $image-height: 35rpx);
|
|
.order-num {
|
|
left: 44rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.tool {
|
|
@include common-mine(
|
|
$content-padding-top: 24rpx,
|
|
$content-padding-row: 20rpx,
|
|
$content-padding-bottom: 25rpx,
|
|
$image-height: 71rpx,
|
|
$image-width: 71rpx
|
|
);
|
|
.content {
|
|
> view {
|
|
width: 100rpx;
|
|
}
|
|
> view:not(:last-child) {
|
|
margin-right: 16rpx;
|
|
}
|
|
}
|
|
}
|
|
.more-tool {
|
|
@include common-mine(
|
|
$content-padding-top: 24rpx,
|
|
$content-padding-row: 20rpx,
|
|
$content-padding-bottom: 48rpx,
|
|
$image-height: 71rpx,
|
|
$image-width: 71rpx
|
|
);
|
|
.content {
|
|
> view {
|
|
width: 100rpx;
|
|
}
|
|
> view:not(:last-child) {
|
|
margin-right: 16rpx;
|
|
}
|
|
}
|
|
.badge-box {
|
|
position: relative;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|