386 lines
7.9 KiB
Vue
386 lines
7.9 KiB
Vue
<template>
|
|
<view class="my" v-if="ifLoading">
|
|
<status-nav :ifReturn="false" :titleColor="titleColor" :backgroudColor="backgroudColor"></status-nav>
|
|
<image src="/static/public/my-bg.jpg" mode="" class="allbg" mode="widthFix"></image>
|
|
<view class="my-content">
|
|
<view class="my-word">
|
|
<view class="face">
|
|
<image :src="userInfo.mobile ? baseHttps+userInfo.headimgurl : headimgUrl" mode="widthFix" class="image"></image>
|
|
</view>
|
|
<view class="text">
|
|
<text>
|
|
<text class="st u-m-t-10" v-if="userInfo.mobile">{{userInfo.nickname}}</text>
|
|
<text class="st u-m-t-10" v-else @tap="goPage('/pagesA/login/login')">点击登录</text>
|
|
</text>
|
|
<view class="phone">
|
|
<text v-if="userInfo.mobile">{{userInfo.mobile}}</text>
|
|
<text v-else class="fs24">Hello,欢迎来到打水商城</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="my-group">
|
|
<view class="my-title flex">
|
|
<view class="lg">我的订单</view>
|
|
</view>
|
|
|
|
<view class="my-list my-order">
|
|
<view class="boxs" v-for="(item,index) in myOrder" :key="index" @tap="goPage(item.src)">
|
|
<view class="title">
|
|
<image :src="item.icon" mode="heightFix"></image>
|
|
</view>
|
|
<view class="st">{{item.text}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="my-group">
|
|
<view class="my-title flex">
|
|
<view class="lg">我的功能</view>
|
|
</view>
|
|
|
|
<view class="my-list my-use">
|
|
<view class="boxs" v-for="(item,index) in myUse" :key="index" @tap="goPage(item.src,item.type)">
|
|
<view class="title">
|
|
<view class="image">
|
|
<image :src="item.icon" mode="heightFix"></image>
|
|
</view>
|
|
</view>
|
|
<view class="st">{{item.text}}</view>
|
|
|
|
<button open-type="contact" bindcontact="handleContact" session-from="sessionFrom" v-if="item.type == 'service'" class="service-btns"></button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 尾部 -->
|
|
<foot-bar :current="2"></foot-bar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
postUserInfo,
|
|
} from "@/api/index";
|
|
export default {
|
|
data() {
|
|
return {
|
|
titleColor:'#ffffff', //状态栏文字颜色
|
|
backgroudColor:'none', //导航栏背景
|
|
baseHttps:`${getApp().globalData.hostapi}`, //接口链接
|
|
userInfo:{},//我的数据
|
|
headimgUrl:'/static/public/logo-avatar.png',
|
|
ifLoading:false,
|
|
order_count:{},//订单角标
|
|
myOrder:[
|
|
{
|
|
icon:'/static/my/order-04.png',
|
|
text:'全部订单',
|
|
src:'/pagesA/order/order?index=all',
|
|
},
|
|
{
|
|
icon:'/static/my/order-01.png',
|
|
text:'待付款',
|
|
src:'/pagesA/order/order?index=0',
|
|
},
|
|
{
|
|
icon:'/static/my/order-02.png',
|
|
text:'待收货',
|
|
src:'/pagesA/order/order?index=2',
|
|
},
|
|
{
|
|
icon:'/static/my/order-03.png',
|
|
text:'已完成',
|
|
src:'/pagesA/order/order?index=3',
|
|
}
|
|
],
|
|
myUse:[
|
|
{
|
|
src:'/pages/my/information',
|
|
icon:'/static/my/nav-01.png',
|
|
text:'个人信息'
|
|
},
|
|
{
|
|
src:'/pagesA/address/address',
|
|
icon:'/static/my/nav-02.png',
|
|
text:'地址列表'
|
|
},
|
|
{
|
|
src:'',
|
|
icon:'/static/my/nav-04.png',
|
|
text:'我的推广',
|
|
type:'none2',
|
|
},
|
|
{
|
|
src:'',
|
|
icon:'/static/my/nav-05.png',
|
|
text:'积分明细',
|
|
type:'none2',
|
|
},
|
|
{
|
|
src:'',
|
|
icon:'/static/my/nav-06.png',
|
|
text:'商务合作',
|
|
type:'phone'
|
|
},
|
|
{
|
|
src:'',
|
|
icon:'/static/my/nav-01.png',
|
|
text:'我的客服',
|
|
type:'service'
|
|
},
|
|
],
|
|
};
|
|
},
|
|
onLoad() {
|
|
},
|
|
onShow() {
|
|
this.getUserInfo();
|
|
},
|
|
methods: {
|
|
getUserInfo() {
|
|
postUserInfo().then(res => {
|
|
if(res.code == 0){
|
|
this.userInfo = res.data.baseInfo;
|
|
if(this.userInfo.mobile !== '') {
|
|
this.userInfo.mobile = this.$toolAll.tools.hideMPhone(this.userInfo.mobile);
|
|
}
|
|
this.ifLoading = true;
|
|
uni.setStorageSync('userInfo',res.data.baseInfo)//缓存用户信息
|
|
}
|
|
})
|
|
},
|
|
|
|
// 跳转页面
|
|
goPage(url,type) {
|
|
if (this.$toolAll.tools.judgeAuth()) {
|
|
if(type == 'phone') {
|
|
uni.makePhoneCall({
|
|
phoneNumber:uni.getStorageSync("baseInfo").business_tel
|
|
})
|
|
}else if(type == 'none') {
|
|
this.$toolAll.tools.showToast('暂未开放，敬请期待');
|
|
}else {
|
|
uni.navigateTo({
|
|
url:url
|
|
})
|
|
}
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
image {
|
|
height: 0;
|
|
}
|
|
.my {
|
|
position: relative;
|
|
background-color: #f7f7f7;
|
|
min-height: 100vh;
|
|
}
|
|
.allbg {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 9;
|
|
}
|
|
|
|
.my-content {
|
|
margin: 0 20rpx;
|
|
position: relative;
|
|
z-index: 99;
|
|
}
|
|
|
|
.my-word {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
position: relative;
|
|
}
|
|
.my-word .face {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 100%;
|
|
margin-right: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #fff;
|
|
overflow: hidden;
|
|
}
|
|
.my-word .face .image {
|
|
width: 100%;
|
|
}
|
|
.my-word .text {
|
|
height: 100%;
|
|
display: flex;
|
|
line-height: 50rpx;
|
|
flex-direction: column;
|
|
}
|
|
.my-word .text .st {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
.my-word .text .phone {
|
|
font-size: 28rpx;
|
|
color: rgba(51,51,51,0.8);
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.my-list {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 30rpx 0;
|
|
background-color: #fff;
|
|
border-radius: 10rpx;
|
|
justify-content: space-around;
|
|
}
|
|
.my-list .boxs {
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.my-jf .boxs .title {
|
|
font-size: 28rpx;
|
|
line-height: 54rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 54rpx;
|
|
position: relative;
|
|
}
|
|
.my-jf .boxs .title image {
|
|
width: 50rpx;
|
|
}
|
|
.my-jf .boxs .st {
|
|
font-size: 22rpx;
|
|
line-height: 44rpx;
|
|
color: rgba(51,51,51,0.8);
|
|
}
|
|
.my-jf .boxs .vip-st {
|
|
font-size: 22rpx;
|
|
color: #fff;
|
|
background-color: #f00;
|
|
height: 40rpx;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 40rpx;
|
|
padding: 0 24rpx;
|
|
}
|
|
.price {
|
|
font-size: 32rpx !important;
|
|
color: #f72e2e!important;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
.price text {
|
|
font-size: 22rpx;
|
|
}
|
|
.my-order .boxs .title image {
|
|
display: inline-block;
|
|
height: 44rpx;
|
|
}
|
|
.my-order .boxs .st {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin-top: 10rpx;
|
|
}
|
|
.my-use .boxs .title .image {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width:76rpx;
|
|
height: 76rpx;
|
|
background: #f3e8de;
|
|
border-radius: 50%;
|
|
}
|
|
.my-use {
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
}
|
|
.my-use .boxs {
|
|
width: 25%;
|
|
margin: 18rpx 0;
|
|
}
|
|
.my-use .boxs .title .image image {
|
|
height: 40rpx;
|
|
display: block;
|
|
}
|
|
.my-use .boxs .st {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
margin-top: 10rpx;
|
|
}
|
|
.my-use .boxs .service-btns {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
z-index: 9;
|
|
}
|
|
.writeOff {
|
|
position: absolute;
|
|
right: -20rpx;
|
|
top: 27rpx;
|
|
display: inline-block;
|
|
padding: 0 30rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
background-color: #fff;
|
|
color: #333;
|
|
font-size: 26rpx;
|
|
border-radius: 50rpx 0 0 50rpx;
|
|
box-shadow: 0 2px 14rpx rgba(0,0,0,0.1);
|
|
}
|
|
.my-order .title {
|
|
position: relative;
|
|
}
|
|
.my-order .title .icon {
|
|
position: absolute;
|
|
right: -3rpx;
|
|
top: -18rpx;
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
background-color: #f00;
|
|
border-radius: 50%;
|
|
color: #fff;
|
|
font-size: 20rpx;
|
|
text-align: center;
|
|
line-height: 36rpx;
|
|
}
|
|
.my-group {
|
|
margin-top: 30rpx;
|
|
background-color: #fff;
|
|
border-radius: 10rpx;
|
|
}
|
|
.my-title {
|
|
height: 88rpx;
|
|
padding: 0 30rpx;
|
|
border-bottom: 1px dashed #E5E5E5;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.my-title .lg {
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.my-title .muted {
|
|
color: #999999;
|
|
font-size: 26rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style>
|