<template>
|
<view class="mine">
|
<view class="nav-bar"></view>
|
<view class="personal-message">
|
<view class="base-message">
|
<image class="avater" src="@/static/uni.png" mode="aspectFill"></image>
|
<view class="name-phone">
|
<view class="name">正义的蜻蜓队长</view>
|
<view class="phone">
|
<image class="icon" src="@/static/mine/wd_ic_phone.png" mode="aspectFill"></image>
|
157****7760
|
</view>
|
</view>
|
<view class="sign-in">签到</view>
|
</view>
|
|
</view>
|
<view class="count-statistics">
|
<view class="count-item">
|
<view class="count-value">178</view>
|
<view class="count-title">关注</view>
|
</view>
|
<view class="count-item">
|
<view class="count-value">178</view>
|
<view class="count-title">收藏</view>
|
</view>
|
<view class="count-item">
|
<view class="count-value">178</view>
|
<view class="count-title">勋章</view>
|
</view>
|
</view>
|
<view class="moudle-option integral-plan">
|
<view class="option">
|
<view>
|
<view class="option-title">咖豆中心</view>
|
<view class="option-sub-title">更多优惠在这里</view>
|
</view>
|
<image class="option-icon" src="@/static/mine/wd_ic_kadou.png" mode=""></image>
|
</view>
|
<view class="line"></view>
|
<view class="option">
|
<view>
|
<view class="option-title">订阅计划</view>
|
<view class="option-sub-title">更多选择在这里</view>
|
</view>
|
<image class="option-icon" src="@/static/mine/wd_ic_dingyue.png" mode=""></image>
|
</view>
|
</view>
|
<view class="moudle-option order">
|
<view class="order-header">
|
<view class="order-title">我的订单</view>
|
<view class="sub-title">全部<uni-icons type="forward" color="#999999" size="16"></uni-icons></view>
|
</view>
|
<view class="order-status">
|
<view v-for="(item, index) in orderType" :key="index" class="order-item">
|
<image class="order-icon" :src="item.icon" mode=""></image>
|
<view class="">{{ item.name }}</view>
|
</view>
|
</view>
|
</view>
|
<view class="moudle-option function">
|
<view class="function-title">常用功能</view>
|
<view class="function-status">
|
<view
|
v-for="(item, index) in functions"
|
:key="index"
|
class="function-item"
|
@click="funcAction(index)"
|
>
|
<image class="function-icon" :src="item.icon" mode=""></image>
|
<view class="">{{ item.name }}</view>
|
</view>
|
</view>
|
</view>
|
<view class="moudle-option setting">
|
<view v-for="(item, index) in setting" :key="index" class="setting-itme">
|
<view>{{ item }}</view>
|
<view class="invitation">
|
<template v-if="index==0">
|
邀请成功可得咖豆
|
</template>
|
<uni-icons type="forward" color="#999999" size="16"></uni-icons></view>
|
</view>
|
|
</view>
|
<view style="height: 114rpx;;"></view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
orderType: [
|
{ name: '待付款', icon: require('@/static/mine/wd_ic_daifukuan.png') },
|
{ name: '待发货', icon: require('@/static/mine/wd_ic_daifahuo.png') },
|
{ name: '待收货', icon: require('@/static/mine/wd_ic_daishouhuo.png') },
|
{ name: '待评价', icon: require('@/static/mine/wd_ic_daipingjia.png') },
|
{ name: '退款/售后', icon: require('@/static/mine/wd_ic_tuikuan.png') },
|
],
|
functions: [
|
{ name: '商城', icon: require('@/static/mine/wd_ic_shangcheng.png') },
|
{ name: '购物车', icon: require('@/static/mine/wd_ic_gouwuche.png') },
|
{ name: '优惠券', icon: require('@/static/mine/wd_ic_youhuiquan.png') },
|
{ name: '咖豆订单', icon: require('@/static/mine/wd_ic_kadoudingdan.png') },
|
{ name: '我的活动', icon: require('@/static/mine/wd_ic_wodehuodong.png') },
|
{ name: '创作中心', icon: require('@/static/mine/wd_ic_chuangzuo.png') },
|
{ name: '商家中心', icon: require('@/static/mine/wd_ic_shangjia.png') },
|
{ name: '敬请期待', icon: require('@/static/mine/wd_ic_jingqingqidai.png') },
|
],
|
setting: [
|
'推荐「哇咖哇咖」给好友',
|
'商务合作',
|
'联系客服',
|
'关于我们',
|
'条款与证照'
|
]
|
}
|
},
|
methods: {
|
funcAction(index) {
|
// 0 商城 1优惠券 2优惠券 3咖豆订单 4我的活动 5创作中心 6商家中心 7敬请期待
|
switch(index) {
|
case 0:
|
break;
|
case 1:
|
break;
|
case 2:
|
break;
|
case 3:
|
break;
|
case 4:
|
break;
|
case 5:
|
uni.navigateTo({
|
url: '/pages/creationCenter/creationCenter'
|
})
|
break;
|
case 6:
|
uni.navigateTo({
|
// url: '/pages/merchant/applyMerchant/merchantApproveFail'
|
url: '/pages/merchant/merchatCenter/merchantCenter'
|
})
|
break;
|
case 7:
|
break;
|
default:
|
console.log('其他')
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang='scss' scoped>
|
.mine {
|
background-color: #f5f5f5;
|
font-family: PingFang SC-Semibold, PingFang SC;
|
}
|
.nav-bar {
|
background: linear-gradient(rgb(216, 143, 141),rgb(248, 248, 248));
|
height: 400rpx;
|
}
|
.personal-message {
|
/* height: 1000rpx; */
|
/* background-color: red; */
|
margin-top: -200rpx;
|
padding: 32rpx;
|
.base-message {
|
height: 114rpx;
|
display: flex;
|
flex-direction: row;
|
.avater {
|
width: 114rpx;
|
height: 114rpx;
|
border-radius: 50%;
|
}
|
.name-phone {
|
flex: 1;
|
padding: 20rpx;
|
.name {
|
font-size: 36rpx;
|
font-weight: 600;
|
color: #333333;
|
line-height: 42rpx;
|
margin-bottom: 8rpx;
|
}
|
.phone {
|
height: 24rpx;
|
font-size: 24rpx;
|
font-family: PingFang SC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #999999;
|
line-height: 24rpx;
|
.icon {
|
width: 14rpx;
|
height: 18rpx;
|
margin-right: 10rpx;
|
}
|
}
|
|
}
|
.sign-in {
|
width: 116rpx;
|
height: 48rpx;
|
margin: auto 0;
|
background: linear-gradient(270deg, #D20A0A 0%, #D95A5A 100%);
|
border-radius: 24rpx;
|
text-align: center;
|
color: #FFFFFF;
|
font-weight: 500;
|
font-size: 24rpx;
|
line-height: 48rpx;
|
}
|
}
|
}
|
.count-statistics {
|
height: 100rpx;
|
display: flex;
|
justify-content: space-around;
|
margin-top: 48rpx;
|
text-align: center;
|
.count-item {
|
.count-value {
|
height: 28rpx;
|
font-size: 28rpx;
|
font-weight: 600;
|
color: #333333;
|
line-height: 28rpx;
|
margin-bottom: 8rpx;
|
}
|
.count-title {
|
height: 24rpx;
|
font-size: 24rpx;
|
color: #999999;
|
line-height: 24rpx;
|
}
|
}
|
}
|
.moudle-option {
|
background: #FFFFFF;
|
box-shadow: 0rpx 8rpx 12rpx 0rpx rgba(0,0,0,0.02);
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
padding: 28rpx;
|
box-sizing: border-box;
|
margin: 20rpx 32rpx;
|
}
|
.integral-plan {
|
height: 152rpx;
|
display: flex;
|
.option {
|
flex: 1;
|
display: flex;
|
justify-content: space-between;
|
.option-title {
|
height: 32rpx;
|
font-size: 32rpx;
|
font-weight: 600;
|
color: #333333;
|
line-height: 32rpx;
|
margin: 10rpx 0;
|
}
|
.option-sub-title {
|
height: 34rpx;
|
font-size: 24rpx;
|
font-weight: 400;
|
color: #999999;
|
line-height: 28rpx;
|
}
|
.option-icon {
|
width: 58rpx;
|
height: 58rpx;
|
margin: auto 0;
|
}
|
}
|
.line {
|
width: 2rpx;
|
background-color: #FAFAFA;
|
margin: 0 28rpx;
|
}
|
}
|
.order {
|
height: 242rpx;
|
.order-header {
|
margin-top: 4rpx;
|
display: flex;
|
justify-content: space-between;
|
.order-title {
|
height: 32rpx;
|
font-size: 32rpx;
|
font-weight: 600;
|
color: #333333;
|
line-height: 32rpx;
|
}
|
.sub-title {
|
height: 32rpx;
|
font-size: 24rpx;
|
font-weight: 400;
|
color: #999999;
|
line-height: 28rpx;
|
}
|
}
|
.order-status {
|
margin-top: 36rpx;
|
display: flex;
|
justify-content: space-around;
|
.order-item {
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #333333;
|
line-height: 24rpx;
|
text-align: center;
|
.order-icon {
|
width: 52rpx;
|
height: 52rpx;
|
margin-bottom: 16rpx;
|
}
|
}
|
}
|
}
|
.function {
|
height: 350rpx;
|
.function-title {
|
margin-top: 4rpx;
|
height: 32rpx;
|
font-size: 32rpx;
|
font-weight: 600;
|
color: #333333;
|
line-height: 32rpx;
|
}
|
.function-status {
|
margin-top: 36rpx;
|
display: flex;
|
flex-wrap: wrap;
|
/* justify-content: space-around; */
|
.function-item {
|
width: 25%;
|
margin-bottom: 34rpx;
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #333333;
|
line-height: 24rpx;
|
text-align: center;
|
.function-icon {
|
width: 52rpx;
|
height: 52rpx;
|
margin-bottom: 16rpx;
|
}
|
}
|
}
|
}
|
.setting {
|
padding: 0 28rpx;
|
height: 468rpx;
|
:not(:last-child) {
|
border-bottom: 2rpx solid #F4F5F4;
|
}
|
.setting-itme {
|
height: 92rpx;
|
line-height: 92rpx;
|
font-size: 28rpx;
|
font-weight: 500;
|
color: #333333;
|
display: flex;
|
justify-content: space-between;
|
.invitation {
|
font-size: 24rpx;
|
font-weight: 400;
|
color: #D20A0A;
|
}
|
}
|
}
|
</style>
|
