You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
409 lines
14 KiB
409 lines
14 KiB
<template>
|
|
<view class="center-page">
|
|
<!-- 顶部背景和个人信息 -->
|
|
<view class="header" :style="{ 'background-image': 'url(/static/image/红烧肉.webp)' }">
|
|
|
|
<view class="user-info">
|
|
<image class="avatar" :src="userInfo.avatarUrl" mode="aspectFill"></image>
|
|
<view class="user-name-id">
|
|
<text class="user-name">{{ userInfo.nickName }}</text>
|
|
<text class="user-id">ID:{{ userInfo.userId }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="role-switch-btn" @tap="switchIdentity">
|
|
<uv-icon name="reload" size="30rpx" color="#fff" style="margin-right: 6rpx;" />
|
|
<text>切换为{{ !identity ? '团长' : '团员'}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 我的订单区域 -->
|
|
<view class="orders-section">
|
|
<view class="section-header">
|
|
<text class="section-title">我的订单</text>
|
|
<view class="view-all" @tap="navigateTo('/pages/index/order?status=all')">
|
|
<text>全部</text>
|
|
<uv-icon name="arrow-right" size="30rpx" color="#999" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="order-types">
|
|
<view class="order-type-item" v-if="identity === 0"
|
|
@tap="navigateTo('/pages/index/order?status=pending')">
|
|
<view class="order-icon-wrapper">
|
|
<view class="green-circle">
|
|
<uv-icon name="red-packet" size="44rpx" color="#fff" />
|
|
</view>
|
|
<uv-badge max="9" absolute :offset="[-10, -12]" bgColor="#FF2A2A"
|
|
:value="userInfo.waitingPayCount" style="padding: 10rpx 15rpx;" />
|
|
</view>
|
|
<text class="order-type-text">待支付</text>
|
|
</view>
|
|
|
|
<view class="order-type-item" @tap="navigateTo('/pages/index/order?status=processing')">
|
|
<view class="order-icon-wrapper">
|
|
<view class="green-circle">
|
|
<uv-icon name="chat" size="44rpx" color="#fff" />
|
|
</view>
|
|
<uv-badge max="9" absolute :offset="[-10, -12]" bgColor="#FF2A2A"
|
|
:value="userInfo.waitingDiningCount" style="padding: 10rpx 15rpx;" />
|
|
</view>
|
|
<text class="order-type-text">待出餐</text>
|
|
</view>
|
|
|
|
<view class="order-type-item" @tap="navigateTo('/pages/index/order?status=shipping')">
|
|
<view class="order-icon-wrapper">
|
|
<view class="green-circle">
|
|
<uv-icon name="chat" size="44rpx" color="#fff" />
|
|
</view>
|
|
<uv-badge max="9" absolute :offset="[-10, -12]" bgColor="#FF2A2A"
|
|
:value="userInfo.deliveringCount" style="padding: 10rpx 15rpx;" />
|
|
</view>
|
|
<text class="order-type-text">送餐中</text>
|
|
</view>
|
|
|
|
<view class="order-type-item" @tap="navigateTo('/pages/index/order?status=delivered')">
|
|
<view class="order-icon-wrapper">
|
|
<view class="green-circle">
|
|
<uv-icon name="chat" size="44rpx" color="#fff" />
|
|
</view>
|
|
<uv-badge max="9" absolute :offset="[-10, -12]" bgColor="#FF2A2A" :value="userInfo.pickupCount"
|
|
style="padding: 10rpx 15rpx;" />
|
|
</view>
|
|
<text class="order-type-text">待取餐</text>
|
|
</view>
|
|
|
|
<view class="order-type-item" @tap="navigateTo('/pages/index/order?status=completed')">
|
|
<view class="order-icon-wrapper">
|
|
<view class="green-circle">
|
|
<uv-icon name="chat" size="44rpx" color="#fff" />
|
|
</view>
|
|
<uv-badge max="9" absolute :offset="[-10, -12]" bgColor="#FF2A2A"
|
|
:value="userInfo.completedCount" style="padding: 10rpx 15rpx;" />
|
|
</view>
|
|
<text class="order-type-text">已完成</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 团员功能区域 -->
|
|
<view class="member-functions">
|
|
<view class="section-header">
|
|
<text class="section-title">团员功能</text>
|
|
</view>
|
|
|
|
<view class="function-grid" v-if="identity === 0">
|
|
<view class="function-item" @tap="navigateTo('/pages_order/mine/updateUser')">
|
|
<view class="function-icon">
|
|
<uv-icon name="chat" size="94rpx" color="#019245" />
|
|
</view>
|
|
<text class="function-text">资料修改</text>
|
|
</view>
|
|
|
|
<view class="function-item" @tap="navigateTo('/pages_order/mine/team')">
|
|
<view class="function-icon">
|
|
<uv-icon name="chat" size="94rpx" color="#019245" />
|
|
</view>
|
|
<text class="function-text">团长申请</text>
|
|
</view>
|
|
|
|
<view class="function-item" @tap="navigateTo('/pages_order/mine/unbindTeam')">
|
|
<view class="function-icon">
|
|
<uv-icon name="chat" size="94rpx" color="#019245" />
|
|
</view>
|
|
<text class="function-text">解绑团长</text>
|
|
</view>
|
|
|
|
<view class="function-item" @tap="navigateTo('/pages_order/mine/share')">
|
|
<view class="function-icon">
|
|
<uv-icon name="chat" size="94rpx" color="#019245" />
|
|
</view>
|
|
<text class="function-text">推广链接</text>
|
|
</view>
|
|
|
|
<view class="function-item" @tap="navigateTo('/pages_order/mine/coupon')">
|
|
<view class="function-icon">
|
|
<uv-icon name="chat" size="94rpx" color="#019245" />
|
|
</view>
|
|
<text class="function-text">优惠券</text>
|
|
</view>
|
|
|
|
<view class="function-item" @tap="navigateTo('/pages_order/mine/wallet')">
|
|
<view class="function-icon">
|
|
<uv-icon name="chat" size="94rpx" color="#019245" />
|
|
</view>
|
|
<text class="function-text">钱包</text>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="function-grid" v-else>
|
|
<view class="function-item" @tap="navigateTo('/pages_order/mine/updateUser')">
|
|
<view class="function-icon">
|
|
<uv-icon name="chat" size="94rpx" color="#019245" />
|
|
</view>
|
|
<text class="function-text">我的资料</text>
|
|
</view>
|
|
|
|
<view class="function-item" @tap="navigateTo('/pages_order/mine/myTeam')">
|
|
<view class="function-icon">
|
|
<uv-icon name="chat" size="94rpx" color="#019245" />
|
|
</view>
|
|
<text class="function-text">我的团员</text>
|
|
</view>
|
|
|
|
<view class="function-item" @tap="navigateTo('/pages_order/mine/team')">
|
|
<view class="function-icon">
|
|
<uv-icon name="chat" size="94rpx" color="#019245" />
|
|
</view>
|
|
<text class="function-text">团长信息</text>
|
|
</view>
|
|
|
|
<view class="function-item" @tap="navigateTo('/pages_order/mine/share')">
|
|
<view class="function-icon">
|
|
<uv-icon name="chat" size="94rpx" color="#019245" />
|
|
</view>
|
|
<text class="function-text">推广链接</text>
|
|
</view>
|
|
|
|
|
|
<view class="function-item" @tap="navigateTo('/pages_order/mine/wallet')">
|
|
<view class="function-icon">
|
|
<uv-icon name="chat" size="94rpx" color="#019245" />
|
|
</view>
|
|
<text class="function-text">钱包</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<tabber select="center" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tabber from '@/components/base/tabbar.vue'
|
|
import { mockUserInfo } from '@/static/js/mockUserInfo.js'
|
|
|
|
// import { unix } from 'dayjs'
|
|
|
|
export default {
|
|
components: {
|
|
tabber
|
|
},
|
|
data() {
|
|
return {
|
|
userInfo: mockUserInfo,
|
|
identity: 0
|
|
}
|
|
},
|
|
methods: {
|
|
navigateTo(url) {
|
|
this.$utils.navigateTo({
|
|
url
|
|
})
|
|
},
|
|
switchIdentity() {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: `确定要切换为${this.identity === 0 ? '团长' : '团员'}吗？`,
|
|
confirmColor: '#019245',
|
|
// cancelColor: '#FF2A2A',
|
|
success: (res) => {
|
|
if (res.confirm){
|
|
// 这里的切换逻辑
|
|
uni.showLoading({
|
|
title: '切换中...'
|
|
})
|
|
setTimeout(() => {
|
|
uni.hideLoading();
|
|
this.identity = this.identity === 0 ? 1 : 0;
|
|
uni.setStorageSync('identity', this.identity)
|
|
uni.showToast({
|
|
title: '切换成功',
|
|
icon: 'success',
|
|
duration: 2000
|
|
})
|
|
}, 1000);
|
|
}
|
|
}
|
|
})
|
|
}
|
|
},
|
|
onLoad (){
|
|
// 进来加载的时候 会检查一次信息是否完整 若不完整 重新进入登录界面
|
|
// 因为是开发模式 取消这个限制
|
|
// this.$store.commit('getUserInfo')
|
|
uni.setStorageSync('identity', 0) // 一开始的身份默认为团员
|
|
this.identity = uni.getStorageSync('identity') // 获取身份
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.center-page {
|
|
// min-height: 100vh;
|
|
background-color: #f5f5f5;
|
|
padding-bottom: 120rpx;
|
|
}
|
|
|
|
.header {
|
|
position: relative;
|
|
height: 340rpx;
|
|
background-size: cover;
|
|
background-position: center;
|
|
color: #fff;
|
|
padding: 60rpx 30rpx 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: start;
|
|
position: relative;
|
|
|
|
.user-info {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 30rpx;
|
|
z-index: 2;
|
|
left: 30rpx;
|
|
top: 120rpx;
|
|
|
|
.avatar {
|
|
width: 110rpx;
|
|
height: 110rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.user-name-id {
|
|
margin-left: 30rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.user-name {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 6rpx;
|
|
}
|
|
|
|
.user-id {
|
|
font-size: 24rpx;
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
}
|
|
|
|
.role-switch-btn {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 180rpx;
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
border-radius: 30rpx 0 0 30rpx;
|
|
padding: 10rpx 20rpx;
|
|
font-size: 24rpx;
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.orders-section {
|
|
background-color: #fff;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
margin: -70rpx auto 0;
|
|
padding: 15rpx;
|
|
position: relative;
|
|
z-index: 3;
|
|
width: 90%;
|
|
// margin: 0 auto;
|
|
}
|
|
|
|
.member-functions {
|
|
background-color: #fff;
|
|
padding: 30rpx;
|
|
margin-top: 20rpx;
|
|
width: 88%;
|
|
border-radius: 20rpx;
|
|
margin: 30rpx auto 0;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 40rpx;
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
position: relative;
|
|
padding-left: 15rpx;
|
|
}
|
|
|
|
.view-all {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 26rpx;
|
|
color: $uni-color-third;
|
|
}
|
|
}
|
|
|
|
.order-types {
|
|
// background-color: red;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
.order-type-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
// width: 20%;
|
|
|
|
.order-icon-wrapper {
|
|
position: relative;
|
|
margin-bottom: 4rpx;
|
|
|
|
.green-circle {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
background-color: $uni-color;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.order-type-text {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
margin-top: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.function-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.function-item {
|
|
width: 25%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 40rpx;
|
|
|
|
.function-icon {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.function-text {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
</style>
|