feat: 我的

config.js

@@ -3,7 +3,7 @@ const config = {
 	// baseUrl: 'https://vue.ruoyi.vip/prod-api',
 	//cloud后台网关地址
 	// baseUrl: 'http://192.168.10.3:8080',
-	baseUrl: 'http://192.168.100.114:9527',
+	baseUrl: 'http://192.168.85.114:9527',
 	// 应用信息
 	appInfo: {
 		// 应用名称

pages.json

@@ -92,6 +92,20 @@
 			"style": {
 				"navigationBarTitleText": "订单处理"
 			}
+		},
+		{
+			"path" : "pages/myCenter/withdrawal",
+			"style" : 
+			{
+				"navigationBarTitleText" : "提现"
+			}
+		},
+		{
+			"path" : "pages/myCenter/bad",
+			"style" : 
+			{
+				"navigationBarTitleText" : "差评申诉"
+			}
 		}
 	    
         // ,{
@@ -320,7 +334,8 @@
 		"selectedColor": "#000000",
 		"borderStyle": "white",
 		"backgroundColor": "#ffffff",
-		"list": [{
+		"list": [
+			{
 				"pagePath": "pages/index",
 				"iconPath": "static/images/tabbar/home.png",
 				"selectedIconPath": "static/images/tabbar/home_.png",

pages/classify.vue

@@ -4,7 +4,7 @@
 			color: 'rgba(255, 87, 4, 1)',
 			fontWeight: 'bold',
 			transform: 'scale(1.05)'
-		}" lineColor="rgba(255, 87, 4, 1)">
+		}" lineColor="rgba(255, 87, 4, 1)" :current="tabKey" >
 		</up-tabs>
 		<view class="list">
 			<List :data="data" v-if="data.length > 0" />
@@ -24,13 +24,16 @@ import { provide } from 'vue';
 import { getVolunteerOrderList } from '@/api/volunteer.js'
 import { onMounted } from 'vue';
 import {useDict} from '@/utils/dict.js';
+import { onLoad, onShow } from '@dcloudio/uni-app';
 
 const { order_status } = useDict('order_status');
 
 provide('order_status', order_status);//订单/服务状态
 
 
-const tab = ref({});
+const tab = ref('');
+const tabKey = ref(0);
+
 const data = ref([]);
 
 /**
@@ -59,6 +62,7 @@ const column = [
 	}
 ]
 
+
 async function getList(parmas) {
 	console.log('getList', parmas);
 	try {
@@ -66,7 +70,7 @@ async function getList(parmas) {
 		uni.showLoading({
 			title: '数据加载中...'
 		});
-		const res = await getVolunteerOrderList({ orderStatus: tab.value.value });
+		const res = await getVolunteerOrderList({ orderStatus: tab.value });
 		data.value = res.data;
 	} catch (error) {
 		console.log('error', error);
@@ -101,17 +105,30 @@ provide('onClick', btnClick);
 
 
 function onChange(tabItem) {
-	tab.value = tabItem;
+	tab.value = tabItem.value;
 	getList();
 	console.log('change', tabItem, tab.value);
 }
 
 
-async function init(){
-	getList();
-}
 
-onMounted(init)
+// onMounted(init)
+
+onLoad((options) => {
+	console.log('options',options);
+	tab.value = options.status;
+})
+
+onShow(() => {
+	const params = getApp().globalData.switchTabParams; 
+	tabKey.value = params.tabKey;
+	console.log(params);  // { id: 123, type: "test" }
+	onChange(column[tabKey.value])
+	// 使用后建议清除参数，避免重复读取 
+	getApp().globalData.switchTabParams  = null;
+
+	// init();
+})
 </script>
 
 <style lang="scss" scoped>

pages/mine.vue

@@ -1,279 +1,319 @@
 <template>
-	<view class="mine-container" :style="{height: `${windowHeight}px`}">
-		<!--顶部个人信息栏-->
-		<view class="header-section">
-			<view class="flex padding justify-between">
-				<view class="flex align-center">
-					<view v-if="!avatar" class="cu-avatar xl round bg-white">
-						<view class="iconfont icon-people text-gray icon"></view>
-					</view>
-					<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round"
-						mode="widthFix">
-					</image>
-					<view v-if="!name" @click="handleToLogin" class="login-tip">
-						点击登录
-					</view>
-					<view v-if="name" @click="handleToInfo" class="user-info">
-						<view class="u_title">
-							用户名：{{ name }}
-						</view>
+	<view class="mine-container" :style="{ height: `${windowHeight}px` }">
+		<view class="mine-top-bgc"></view>
+		<view class="mine-box">
+			<view class="mine-user">
+				<view class="user-name-box">
+					<view class="user-avatar">
+						<up-avatar :src="avatarSrc" shape="square"></up-avatar>
 					</view>
+					<view class="user-name">战三</view>
 				</view>
-				<view @click="handleToInfo" class="flex align-center">
-					<image :src="imagePath" mode="aspectFit" style="width: 50rpx;height: 50rpx;"></image>
+				<up-divider></up-divider>
+				<view class="service-list">
+					<up-grid :border="false" col="4">
+						<up-grid-item v-for="(listItem, listIndex) in serviceList" :key="listIndex"
+							@click="onClick(listItem)">
+							<view class="grid-box">
+								<!-- <up-badge :isDot="true" type="success" class="item-badge"></up-badge> -->
+								<up-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.iconName"
+									:size="22"></up-icon>
+								<text class="grid-text">{{ listItem.name }}</text>
+							</view>
+						</up-grid-item>
+					</up-grid>
 				</view>
 			</view>
-		</view>
 
-		<view class="content-section">
-			<view class="Wrapper-grid">
-				<up-grid :border="false" col="4" @click="handleGridClick">
-					<up-grid-item v-for="(item, index) in serviceList" :key="index"
-						:custom-style="{ padding: '20rpx' }">
-						<!-- 图标 -->
-						<image :src="item.icon" class="service-img" mode="aspectFit" />
+			<view class="mine-card price-box">
+				<view class="price-item" v-for="item in priceList" :key="item.key">
+					<view class="price-name flex-center"> {{ item.name }} </view>
+					<view class="price-data flex-center">
+						<up-count-to :startVal="0" :endVal="data[item.key]" :decimals="item.decimals"></up-count-to>
+					</view>
+				</view>
+			</view>
 
-						<!-- 文本 -->
-						<text class="grid-text">{{ item.name }}</text>
+			<view class="mine-card">
+				<up-grid :border="false" col="4">
+					<up-grid-item v-for="(listItem, listIndex) in orderList" :key="listIndex">
+						<view class="grid-box">
+							<text class="grid-text">{{ listItem.name }}</text>
+							<up-count-to :startVal="0" :endVal="data[listItem.key]"></up-count-to>
+						</view>
 					</up-grid-item>
 				</up-grid>
+			</view>
+
+			<view class="mine-card rate-box">
+				<view class="rate-left">
+					<label>好评率：</label>
+					<up-rate v-model="rateValue" active-color="rgba(255, 87, 4, 1)" inactive-color="#b2b2b2" gutter="20"
+						readonly></up-rate>
+				</view>
+
+				<view class="rate-rigth">
+					<label class="rate-count">{{ rateValue }}</label>
+					分
+				</view>
 
-				<up-toast ref="uToastRef" />
 			</view>
-			<!-- 
-      <view class="menu-list">
-        <view class="list-cell list-cell-arrow" @click="handleToEditInfo">
-          <view class="menu-item-box">
-            <view class="iconfont icon-user menu-icon"></view>
-            <view>编辑资料</view>
-          </view>
-        </view>
-        <view class="list-cell list-cell-arrow" @click="handleHelp">
-          <view class="menu-item-box">
-            <view class="iconfont icon-help menu-icon"></view>
-            <view>常见问题</view>
-          </view>
-        </view>
-        <view class="list-cell list-cell-arrow" @click="handleAbout">
-          <view class="menu-item-box">
-            <view class="iconfont icon-aixin menu-icon"></view>
-            <view>关于我们</view>
-          </view>
-        </view>
-        <view class="list-cell list-cell-arrow" @click="handleToSetting">
-          <view class="menu-item-box">
-            <view class="iconfont icon-setting menu-icon"></view>
-            <view>应用设置</view>
-          </view>
-        </view>
-      </view> -->
+
 		</view>
 	</view>
-	<!-- <view>
-	  <uni-popup ref="popup" type="dialog">
-	    <uni-popup-dialog type="info" cancelText="关闭" confirmText="退出"
-	                      title="通知" content="确定注销并退出系统吗" 
-	    				  @confirm="dialogConfirm"
-	                      @close="dialogClose">
-	    </uni-popup-dialog>
-	  </uni-popup>
-  </view> -->
 </template>
 
 <script setup>
-	import storage from '@/utils/storage'
-	import store from '@/store'
-	import {
-		ref
-	} from "vue";
-	import config from '@/config.js'
-	const name = store.state.user.name;
-	const version = config.appInfo.version;
-	const avatar = ref(store.state.user.avatar);
-	const windowHeight = ref(uni.getSystemInfoSync().windowHeight - 50);
-	const popup = ref(null);
-	const imagePath = '/static/设置.png';
-
-	uni.$on('refresh', () => {
-		avatar.value = store.state.user.avatar;
-	})
-
-
-	const serviceList = ref([{
-			icon: '/static/my/待付款.png',
-			name: '待付款'
-		},
-		{
-			icon: '/static/my/待服务.png',
-			name: '待服务'
-		},
-		{
-			icon: '/static/my/已完成.png',
-			name: '已完成'
-		},
-		{
-			icon: '/static/my/评论.png',
-			name: '评论'
-		},
-		{
-			icon: '/static/my/钱包.png',
-			name: '钱包'
-		},
-		{
-			icon: '/static/my/浏览记录.png',
-			name: '浏览记录'
-		},
-		{
-			icon: '/static/my/收藏.png',
-			name: '收藏'
-		},
-		{
-			icon: '/static/my/客服.png',
-			name: '帮助与客服'
-		},
-	]);
-
-	function handleToInfo() {
-		uni.navigateTo({
-			url: '/pages_mine/pages/info/index'
-		});
-	};
-
+import { ref } from 'vue';
+const serviceList = ref([
+	{
+		name: '待服务',
+		iconName: 'clock',
+		page: '/pages/classify',
+		value:1
+	},
+
+	{
+		name: '进行中',
+		iconName: 'car',
+		page: '/pages/classify',
+		value:2
+	},
+	{
+		name: '已完成',
+		iconName: 'car-fill',
+		page: '/pages/classify',
+		value:3
+	},
+	{
+		name: '差评申述',
+		iconName: 'edit-pen',
+		page: '/pages/myCenter/bad'
+	},
+	{
+		name: '钱包',
+		iconName: 'rmb-circle',
+		page: '/pages/myCenter/withdrawal'
+	},
+	{
+		name: '帮助与客服',
+		iconName: 'kefu-ermai',
+	},
+]);
+
+const priceList = [
+	{
+		name: '余额',
+		key: 'balance',
+		decimals: 2
+	},
+	{
+		name: '订单总数',
+		key: 'orderCount',
+		decimals: 0
+	}
+]
+const orderList = ref([
+	{
+		name: '预约单',
+		key: 'orderCount'
+	},
+
+	{
+		name: '进行单',
+		key: 'orderCount'
+
+	},
+	{
+		name: '完成单',
+		key: 'orderCount'
+
+	},
+	{
+		name: '取消单',
+		key: 'orderCount'
 
-	function handleToAvatar() {
-		uni.navigateTo({
-			url: '/pages_mine/pages/avatar/index'
-		});
-	};
-
-	function handleLogout() {
-		popup.value.open();
-	};
-
-	function dialogConfirm() {
-		//console.log('----------------点击确认------------')
-		store.dispatch('LogOut').then(() => {
-			uni.reLaunch({
-				url: '/pages/login'
-			});
-		})
-	};
-
-	function dialogClose() {
-		//console.log('点击关闭')
-	};
-
-	function handleHelp() {
-		uni.navigateTo({
-			url: '/pages_mine/pages/help/index'
+	}
+]);
+
+const avatarSrc = ref('/static/my/客服.png');
+const data = ref({
+	balance: 0.0,
+	orderCount: 0,
+});
+const rateValue = ref(3);
+const onClick = (record) => {
+	console.log('record', record, record.page);
+	if (record.page && record.value) {
+		const app = getApp();
+		app.globalData.switchTabParams  = { tabKey: record.value };
+		// JS跳转 
+		uni.switchTab({
+			url: record.page
 		});
-	};
-
-	function handleAbout() {
+		return;
+	}
+	if(record.page){
 		uni.navigateTo({
-			url: '/pages_mine/pages/about/index'
-		});
-	};
-
-	function handleJiaoLiuQun() {
-		uni.showToast({
-			title: 'QQ群：133713780',
-			mask: false,
-			icon: "none",
-			duration: 1000
-		});
-	};
-
-	function handleBuilding() {
-		uni.showToast({
-			title: '模块建设中~',
-			mask: false,
-			icon: "none",
-			duration: 1000
+			url: record.page
 		});
 	}
-</script>
+}
 
-<style lang="scss">
-	page {
-		background-color: #f5f6f7;
-	}
 
-	.mine-container {
-		width: 100%;
-		height: 100%;
+</script>
 
+<style lang="scss" scoped>
+.mine-card {
+	border-radius: 8px;
+	background: rgba(255, 255, 255, 1);
+	padding: 12px;
+	margin-bottom: 12px;
+}
+
+.mine-container {
+	position: fixed;
+	top: 0px;
+	left: 0px;
+	right: 0px;
+	bottom: 0px;
+	background: rgba(245, 245, 245, 1);
+
+	.mine-top-bgc {
+		height: 120px;
+		background: linear-gradient(180deg, rgba(255, 219, 171, 1) 0%, rgba(242, 151, 99, 1) 100%);
 
-		.header-section {
-			padding: 15px 15px 45px 15px;
-			background-color: #3c96f3;
-			color: white;
+	}
 
-			.login-tip {
-				font-size: 18px;
-				margin-left: 10px;
-			}
+	.mine-box {
+		position: absolute;
+		top: 40px;
+		left: 12px;
+		right: 12px;
+		bottom: 0px;
+		overflow-y: auto;
 
-			.cu-avatar {
-				border: 2px solid #eaeaea;
 
-				.icon {
-					font-size: 40px;
-				}
-			}
+		.mine-user {
+			border-radius: 8px;
+			background: rgba(255, 255, 255, 1);
+			margin-bottom: 12px;
 
-			.user-info {
-				margin-left: 15px;
+			.user-name-box {
+				display: flex;
+				align-items: center;
+				padding: 12px 12px 0;
 
-				.u_title {
-					font-size: 18px;
-					line-height: 30px;
-				}
-			}
-		}
+				.user-avatar {}
 
-		.content-section {
-			position: relative;
-			top: -50px;
-
-			.mine-actions {
-				margin: 15px 15px;
-				padding: 20px 0px;
-				border-radius: 8px;
-				background-color: white;
-
-				.action-item {
-					.icon {
-						font-size: 28px;
-					}
-
-					.text {
-						display: block;
-						font-size: 13px;
-						margin: 8px 0px;
-					}
+				.user-name {
+					font-size: 18px;
+					font-weight: 700;
+					line-height: 21.09px;
+					color: rgba(51, 51, 51, 1);
+					margin-left: 12px;
 				}
 			}
 		}
 	}
 
-
-	.Wrapper-grid {
-		margin-top: 120rpx;
-	}
-
-	/* 图标样式 */
 	.service-img {
 		width: 60rpx;
 		height: 60rpx;
 		margin-bottom: 10rpx;
 	}
 
-	/* 文本样式 */
+	.service-list {
+		padding-bottom: 12px;
+	}
+
 	.grid-text {
-		font-size: 24rpx;
-		color: #333;
-		text-align: center;
-		margin-top: 10rpx;
+		font-size: 14px;
+		color: #909399;
+		padding: 10rpx 0 20rpx 0rpx;
+		/* #ifndef APP-PLUS */
+		box-sizing: border-box;
+		/* #endif */
+	}
+
+	.grid-box {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		position: relative;
+
+		.item-badge {
+			position: absolute;
+		}
 	}
+
+	.price-box {
+		display: flex;
+		align-content: center;
+		justify-content: space-between;
+		// padding: 12px;
+
+		.price-item {
+			width: 50%;
+			padding: 12px;
+
+			.price-name {
+				font-size: 16px;
+				font-weight: 700;
+				line-height: 23.17px;
+				color: rgba(51, 51, 51, 1);
+				margin-bottom: 12px;
+			}
+
+			.price-data {
+				font-size: 20px;
+				font-weight: 700;
+				line-height: 23.44px;
+				color: rgba(51, 51, 51, 1);
+			}
+		}
+
+		.price-item:first-child {
+			border-right: 1px solid #dcdfe6;
+
+		}
+
+	}
+
+
+	.rate-box {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		.rate-left {
+			font-size: 14px;
+			font-weight: 500;
+			letter-spacing: 0px;
+			line-height: 20.27px;
+			color: rgba(0, 0, 0, 1);
+
+			display: flex;
+			align-items: center;
+			justify-content: left;
+
+			flex: 1;
+		}
+
+		.rate-rigth {
+			font-size: 14px;
+			font-weight: 500;
+			letter-spacing: 0px;
+			line-height: 20.27px;
+			color: rgba(0, 0, 0, 1);
+
+			.rate-count {
+				color: rgba(237, 123, 47, 1);
+			}
+		}
+	}
+
+
+}
 </style>

pages/myCenter/bad.vue

@@ -0,0 +1,22 @@
+<template>
+    <view class="bad-main">
+       11
+    </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+</script>
+
+<style lang="scss" scoped>
+.bad-main {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    background-color: #fff;
+    padding: 0 12px;
+}
+</style>

pages/myCenter/withdrawal.vue

@@ -0,0 +1,137 @@
+<template>
+    <view class="withdrawal-main">
+        <view class="withdrawal-item">
+            <label class="withdrawal-label">提现到账</label>
+            <view class="withdrawal-item-right" @click="openSheet">
+                <view class="withdrawal-text">微信零钱</view>
+                <up-icon name="arrow-right"></up-icon>
+            </view>
+        </view>
+        <view class="withdrawal-item" >
+            <label class="withdrawal-label">提现金额</label>
+        </view>
+        <view class="price-box">
+            <up-icon name="rmb" size="28" color="rgba(0, 0, 0, 1)"></up-icon>
+            <input class="price-input" placeholder="请输入提现金额" border="none" v-model="priceValue" @change="change" />
+        </view>
+        <view class="withdrawal-item">
+            <label class="withdrawal-label">可提现余额  <up-icon name="rmb"></up-icon>{{ maxPrice }}</label>
+            <view class="withdrawal-item-right" @click="onMaxChange">
+                <view class="withdrawal-text">全部提现</view>
+            </view>
+        </view>
+
+        <view style="margin-top: 45px;">
+            <up-button type="primary" text="确定提现" @click="onSubmit" ></up-button> 
+        </view>
+
+
+        <up-action-sheet
+			:show="show"
+			@close="close"
+			@select="select"
+			:actions="actions"
+		>
+		</up-action-sheet>
+    </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const actions = [
+    {
+        name: '微信零钱',
+    }
+]
+
+const show = ref(false);
+
+const maxPrice = ref(1200);
+
+
+
+const priceValue = ref('');
+const change = (e) => {
+    console.log('change', e);
+    const regex = /^\d*\.?\d*$/;
+    if (!regex.test(e.detail.value)) {
+        priceValue.value = priceValue.value.replace(/[^\d.]/g, '');
+    }
+};
+
+const openSheet = (index) => {
+    show.value = true;
+}
+const close = () => {
+    show.value = false;
+}
+const select = (index) => {
+    console.log('select', index);
+}
+
+const onSubmit = () => {
+    uni.showToast({
+        title: '提交成功',
+        icon: 'none'
+    })
+}
+
+const onMaxChange = () => {
+    priceValue.value = maxPrice.value;
+}
+
+</script>
+
+<style lang="scss" scoped>
+.withdrawal-main {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    background-color: #fff;
+    padding: 0 12px;
+
+    .withdrawal-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 12px 0;
+
+        .withdrawal-label {
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 20.27px;
+            color: rgba(153, 153, 153, 1);
+
+            display: flex;
+            align-items: center;
+        }
+
+        .withdrawal-item-right {
+            display: flex;
+            align-items: center;
+
+            .withdrawal-text {
+                font-size: 16px;
+                font-weight: 700;
+                line-height: 23.17px;
+                color: rgba(0, 0, 0, 1);
+                margin-right: 6px;
+            }
+
+        }
+    }
+
+    .price-box {
+        display: flex;
+        .price-input {
+            flex: 1;
+            height: 58px;
+            padding: 0  12px;
+            font-size: 28px;
+        }
+    }
+}
+</style>

static/scss/global.scss

@@ -116,4 +116,10 @@
 }
 .u-form-item__body__left {
   padding-left: 8px;
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }