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.
478 lines
18 KiB
478 lines
18 KiB
<template>
|
|
<view class="center-page">
|
|
<!-- 顶部背景和个人信息 -->
|
|
<view class="header" :style="{ backgroundImage: `url(${configList.config_bg_image})` }">
|
|
|
|
<view class="user-info">
|
|
<image class="avatar" :src="userInfo.headImage" mode="aspectFill"></image>
|
|
<view class="user-name-id">
|
|
<text class="user-name">{{ userInfo.nickName }}</text>
|
|
<text class="user-id">ID:{{ userInfo.id }}</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">{{ identity === 0 ? '团员功能' : '团长功能' }}</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" v-if="userInfo.isManager === '1'" @tap="gotoManage">
|
|
<view class="function-icon">
|
|
<uv-icon name="list" 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'
|
|
|
|
export default {
|
|
components: {
|
|
tabber
|
|
},
|
|
data() {
|
|
return {
|
|
identity: uni.getStorageSync('identity') || 0
|
|
}
|
|
},
|
|
methods: {
|
|
gotoManage(){
|
|
// 先判断是否是管理员身份
|
|
if(this.userInfo && this.userInfo.isManager === '1'){
|
|
this.navigateTo('/pages/index/orderManage?tabIndex=0')
|
|
}else{
|
|
uni.showToast({
|
|
title: '您不是管理员身份',
|
|
icon: 'error'
|
|
})
|
|
}
|
|
},
|
|
navigateTo(url) {
|
|
this.$utils.navigateTo({
|
|
url
|
|
})
|
|
},
|
|
switchIdentity() {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: `确定要切换为${this.identity ? '团员' : '团长'}吗？`,
|
|
confirmColor: '#019245',
|
|
success: (res) => {
|
|
if (res.confirm){
|
|
// 这里的切换逻辑
|
|
if (this.identity == 0){
|
|
this.$api('queryLeaderInfo', {}, res => {
|
|
if (res.code == 200){
|
|
if (res.result == null){
|
|
// 如果申请都没有提交过
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '您还没有提交过团长申请，请先提交申请',
|
|
confirmColor: '#019245',
|
|
confirmText: '提交申请',
|
|
showCancel: false,
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this.$utils.navigateTo({
|
|
url: '/pages_order/mine/team'
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}else if (res.result.status == '1'){
|
|
this.identity = 1
|
|
uni.setStorageSync('identity', this.identity)
|
|
uni.showToast({
|
|
title: '切换成功',
|
|
icon: 'success',
|
|
duration: 1000
|
|
})
|
|
}else if (res.result.status == '2'){
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '团长申请失败，请重新申请',
|
|
confirmColor: '#019245',
|
|
confirmText: '重新申请',
|
|
showCancel: false,
|
|
success: (res) => {
|
|
if (res.confirm){
|
|
this.$utils.navigateTo({
|
|
url: '/pages_order/mine/team'
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}else if (res.result.status == '0'){
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '团长申请审核中，请耐心等待',
|
|
confirmColor: '#019245',
|
|
confirmText: '重新申请',
|
|
cancelText: '等待申请',
|
|
success: (res) => {
|
|
if (res.confirm){
|
|
this.$utils.navigateTo({
|
|
url: '/pages_order/mine/team'
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}else if (this.identity == 1){
|
|
this.identity = 0
|
|
uni.setStorageSync('identity', this.identity)
|
|
uni.showToast({
|
|
title: '切换成功',
|
|
icon: 'success',
|
|
duration: 1000
|
|
})
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
},
|
|
computed: {
|
|
imageUrl() {
|
|
return '/static/image/红烧肉.webp'
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.$store.commit('getUserInfo')
|
|
}
|
|
}
|
|
</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>
|