feat: 伴宠师认证流程;

components/dForm/index.vue

@@ -131,11 +131,22 @@
 		})
 	}
 
+	const setData = (data) => {
+		list.forEach(item => {
+			const { key } = item
+			formData[key] = data[key] || null
+		})
+	}
+
+	const getData = () => {
+		return formData
+	}
+
 	const validate = () => {
 		return dFormRef.value.validate()
 	}
 
-	defineExpose({ validate })
+	defineExpose({ setData, getData, validate })
 </script>
 
 <style>

otherPages/authentication/examination/end.vue

@@ -22,11 +22,12 @@
 								</view>
 							</view>
 							<view class="info">
+								<!-- todo: 实名认证 -->
 								<view class="size-22 color-777">
-									真实姓名：刘思恩
+									{{ `真实姓名：${form.name}` }}
 								</view>
 								<view class="size-22 color-777">
-									身份证号码：48234792837458923
+									{{ `身份证号码：${form.idCard}` }}
 								</view>
 							</view>
 						</view>
@@ -44,9 +45,13 @@
 									<image class="img" src="@/static/images/ydd/end13.png" mode="widthFix"></image>
 									<text class="size-30 color-000 fw700">履约保证金缴纳</text>
 								</view>
-								<view class="size-22 color-ffb jiao">
+								<view class="size-22 color-ffb jiao" @click="jumpToBond">
 									去缴纳
 								</view>
+								<!-- todo -->
+								<!-- <view class="size-22 highlight">
+									已完成
+								</view> -->
 							</view>
 							<view class="info color-777 size-22">
 								请缴纳履约保证金，保证金注销时可申请退还
@@ -66,11 +71,11 @@
 									<image class="img" src="@/static/images/ydd/end1(4).png" mode="widthFix"></image>
 									<text class="size-30 color-000 fw700">添加客服微信</text>
 								</view>
-								<view class="size-22 color-ffb jiao">
-									去缴纳
+								<view class="size-22 highlight">
+									请自行添加
 								</view>
 							</view>
-							<view class="info color-777 size-22 flex-rowc">
+							<view class="info color-777 size-22 flex-rowl">
 								<text class="size-22 color-777">微信二维码</text>
 								<image src="" mode="" style="width: 150rpx;height: 150rpx;"></image>
 							</view>
@@ -89,20 +94,25 @@
 									<image class="img" src="@/static/images/ydd/end13.png" mode="widthFix"></image>
 									<text class="size-30 color-000 fw700">服务工具准备</text>
 								</view>
-								<view class="size-22">
-									查看工具包
+								<!-- todo -->
+								<view class="size-22 flex-rowr">
+									<text>查看工具包</text>
+									<up-icon name="arrow-down" color="#7F7F7F" size="17rpx" style="margin-left: 5rpx;"></up-icon>
 								</view>
 							</view>
 							<view class="info color-777 size-22">
 								<view class="flex-between">
 									<text class="size-22">所在地区:</text>
-									<input type="text" placeholder="请选择" />
+                  <view plain class="flex-rowr" @click="selectAddr">
+										<text>{{ form.area ? form.area : '请选择' }}</text>
+										<up-icon style="margin-left: 22rpx;" name="arrow-down" color="#7F7F7F" size="21rpx"></up-icon>
+                  </view>
 								</view>
 							</view>
 							<view class="info color-777 size-22 mt20">
 								<view class="flex-between">
 									<text class="size-22">详细地址:</text>
-									<input type="text" placeholder="请输入道路、小区、门牌号等" />
+									<input v-model="form.address" type="text" placeholder="请输入道路、小区、门牌号等" />
 								</view>
 							</view>
 						</view>
@@ -119,69 +129,64 @@
 			</view>
 
 		</view>
-		<image src="@/static/images/ydd/chat.png" mode="widthFix" class="chat"></image>
+		<button plain class="chat" open-type="contact">
+			<image src="@/static/images/ydd/chat.png" mode="widthFix"></image>
+		</button>
 	</view>
 </template>
 
 <script setup>
-	import {
-		reactive
-	} from "vue";
+	import { reactive } from "vue";
+	import { onShow } from '@dcloudio/uni-app'
+
 	import stepProgress from '../components/stepProgress.vue';
 
+	const form = reactive({
+		name: null,
+		idCard: null,
+		area: null,
+		latitude: null,
+		longitude: null,
+		address: null,
+	})
+
+	onShow(() => {
+		// todo: delete test data
+
+		form.name = '李*乐'
+		form.idCard = '4211********5624'
 
-	const state = reactive({
-		list: [{
-				type: "input",
-				label: "姓名",
-				key: "name",
-				placeholder: "请输入您的真实姓名",
-			},
-			{
-				type: "input",
-				label: "身份证号",
-				key: "idCard",
-				placeholder: "请输入您的真实身份证号",
-			},
-			{
-				type: "radio",
-				label: "性别",
-				key: "sex",
-				options: [{
-						name: "男"
-					},
-					{
-						name: "女"
-					}
-				]
-			},
-			{
-				type: "input",
-				label: "年龄",
-				key: "gender",
-				placeholder: "请输入您的年龄",
-			},
-			{
-				type: "input",
-				label: "养宠经验",
-				key: "shij",
-				placeholder: "请输入您的养宠年限",
-				unit: "年"
-			},
-			{
-				type: "select",
-				label: "是否有专业执照",
-				key: "shij",
-				placeholder: "请选择",
-				options: [{
-					name: "是"
-				}, {
-					name: "没有"
-				}]
-			},
-		]
 	})
 
+	const jumpToBond = () => {
+		uni.navigateTo({
+			url: "/otherPages/myOrdersManage/bond/index"
+		})
+	}
+
+	const setAddress = (res) => {
+		//经纬度信息
+		form.latitude = res.latitude
+		form.longitude = res.longitude
+
+		if (!res.address && res.name) { //用户直接选择城市的逻辑
+			return form.area = res.name
+		}
+		if (res.address || res.name) {
+			return form.area = res.address + res.name
+		}
+		form.area = '' //用户啥都没选就点击勾选
+	}
+
+	const selectAddr = () => {
+		console.log('--selectAddr')
+		uni.chooseLocation({
+			success: function(res) {
+				setAddress(res)
+			}
+		})
+	}
+
 	const onClick = () => {
 		// todo
 	}
@@ -189,12 +194,18 @@
 
 <style lang="scss" scoped>
 	.chat {
-		width: 96rpx;
 		position: fixed;
 		right: 20rpx;
 		bottom: 400rpx;
 		z-index: 9999;
-		background-color: #fff;
+		border: none;
+		padding: 0;
+		width: 97rpx;
+		height: auto;
+
+		image {
+			width: 100%;
+		}
 	}
 
 	.line {
@@ -356,4 +367,8 @@
 			}
 		}
 	}
+
+	.highlight {
+		color: #FFBF60;
+	}
 </style>

otherPages/authentication/list/index.vue

@@ -84,6 +84,8 @@
 
 <script setup>
 	import { ref, reactive } from "vue";
+	import { ossUpload } from '@/utils/oss-upload/oss/index.js'
+
 	import dForm from "@/components/dForm/index.vue"
 	import stepProgress from '../components/stepProgress.vue';
 
@@ -175,9 +177,16 @@
 			value: 4,
 		},
 	]
-	const afterRead = () => {
-		// todo
-	}
+	const afterRead = (event) => {
+		event.file.forEach(n => {
+			ossUpload(n.url)
+				.then(url => {
+					licenseData.fileList.push({
+						url
+					})
+				})
+		})
+	};
 	const deletePic = (event) => {
 		licenseData.fileList.splice(event.index, 1);
 	};

otherPages/myOrdersManage/bond/detail.vue

@@ -2,37 +2,85 @@
 	<!-- <div>保证金明细</div> -->
 	<view class="box">
 		<view class="top flex" :style="{ borderRadius: '31.5rpx' }">
-			<view class="income flex element" :style="{ borderRadius: '31.5rpx' }">
-				收入明细
-			</view>
-			<view class="income flex element" :style="{ borderRadius: '31.5rpx' }">
-				支出明细
+			<view 
+				class="income flex element" 
+				v-for="(tab, tIdx) in tabs"
+				:key="`tab-${tIdx}`"
+				:class="[queryParams.status === tab.value ? 'is-active' : '']" 
+			>
+				{{ tab.title }}
 			</view>
 		</view>
-		<view class="Recharge flex">
-			<view class="flex">
-				<image src="https://img1.baidu.com/it/u=3034232350,1041791648&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500"
-					mode=""></image>
-				<view class="text1">
-					<view class="text2">
-						押金充值
-					</view>
-					<view>
-						2020-12-29 12:54:54
+		<view>
+			<view class="Recharge flex"
+				v-for="(item, index) in list"
+				:key="`record-${index}`"
+			>
+				<view class="flex">
+					<image src="https://img1.baidu.com/it/u=3034232350,1041791648&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500"
+						mode=""></image>
+					<view class="text1">
+						<view class="text2">
+							{{ item.title }}
+						</view>
+						<view>
+							{{ item.createTime }}
+						</view>
 					</view>
 				</view>
-			</view>
-			<view class="text3">
-				¥200
+				<view class="text3">
+					{{ `¥${item.price}` }}
+				</view>
 			</view>
 		</view>
 	</view>
 </template>
 
-<script>
+<script setup>
+import { reactive } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
+import { usePageList } from "@/utils/pageList";
+
+const tabs = reactive([
+	{
+		title: '收入明细',
+		value: '0',
+	},
+	{
+		title: '支出明细',
+		value: '1',
+	},
+])
+
+// todo
+const { queryParams, list, total, getData } = usePageList()
+
+onShow(() => {
+	list.value = [
+		{
+			title: '提现',
+			price: 168,
+			status: '1',
+			createTime: '2020-12-29 12:54:54'
+		},
+		{
+			title: '提现',
+			price: 168,
+			status: '1',
+			createTime: '2020-12-29 12:54:54'
+		},
+		{
+			title: '提现',
+			price: 168,
+			status: '1',
+			createTime: '2020-12-29 12:54:54'
+		},
+	]
+})
+
 </script>
 
-<style>
+<style lang="scss" scoped>
 	.box {
 		width: 750rpx;
 		height: 1452rpx;
@@ -47,10 +95,13 @@
 		background-color: #F3F3F3;
 	}
 
-	.element:hover {
+	.element {
+		border-radius: 32rpx;
 
-		background-color: #FFBF60;
-		color: white;
+		&.is-active {
+			background-color: #FFBF60;
+			color: white;
+		}
 	}
 
 	.income {
@@ -64,9 +115,10 @@
 
 
 	.Recharge {
-		padding: 3% 3% 0 2%;
+		padding: 20rpx 0;
 		box-sizing: border-box;
 		justify-content: space-between;
+		border-bottom: 1rpx solid #E0E0E0;
 	}
 
 	.flex {

otherPages/myOrdersManage/bond/index.vue

@@ -7,10 +7,10 @@
 					账户总览
 				</view>
 				<view class="level text4">
-					<view>
+					<view @click="jumpToDetail">
 						资金明细
 					</view>
-					<view class="line">
+					<view @click="jumpToRefund" class="line">
 						申请退还
 					</view>
 				</view>
@@ -18,9 +18,9 @@
 			<view class="level Recharge">
 				<view class="money level">
 					<text>¥</text>
-					<input type="text" />
+					<input v-model="money" type="text" />
 				</view>
-				<view class="text2" :style="{ borderRadius: '23.5rpx' }">
+				<view class="text2" :style="{ borderRadius: '23.5rpx' }" @click="onPay">
 					去充值
 				</view>
 			</view>
@@ -41,7 +41,27 @@
 
 </template>
 
-<script>
+<script setup>
+	import { ref } from 'vue'
+
+	const money = ref()
+
+	const jumpToDetail = () => {
+		uni.navigateTo({
+			url: "/otherPages/myOrdersManage/bond/detail"
+		})
+	}
+
+	const jumpToRefund = () => {
+		uni.navigateTo({
+			url: "/otherPages/myOrdersManage/bond/refund"
+		})
+	}
+
+	const onPay = () => {
+		// todo: wx pay
+	}
+
 </script>
 
 <style scoped lang="scss">

otherPages/myOrdersManage/detail/index.vue → otherPages/myOrdersManage/bond/refund.vue

@@ -6,22 +6,11 @@
 				<view class="">
 					账户总览
 				</view>
-				<view class="level text2">
-					<view>
-						资金明细
-					</view>
-					<view class="line">
-						申请退还
-					</view>
-				</view>
 			</view>
 			<view class="level Recharge">
 				<view class="money level">
 					<text>¥</text>
-					<input type="text" />
-				</view>
-				<view class="text3" :style="{ borderRadius: '23.5rpx' }">
-					去充值
+					<input v-model="money" type="text" />
 				</view>
 			</view>
 		</view>
@@ -47,37 +36,54 @@
 				《履约保证金&认证费协议》
 			</view>
 		</view>
-		<view class="buttom level" :style="{ borderRadius: '41rpx' }">
+		<view class="buttom level" :style="{ borderRadius: '41rpx' }" @click="onRefund">
 			<text>退还并注销伴宠师</text>
 		</view>
-		<!-- <up-popup :show="show" mode="top" @close="close" @open="open">
-			<view>
-				<text>人生若只如初见，何事秋风悲画扇</text>
+
+		<up-popup 
+			:show="popupVisible"
+			mode="center" 
+			bgColor="transparent"
+			@close="onPopupClose" 
+		>
+			<view class="popup">
+				<image class="popup-bg" src="../static/bond/bg-popup.png"></image>
+
+				<view class="flex-colc popup-content">
+					<text>您已申请退还，请联系服务顾问</text>
+
+					<image class="qr" :src="qrCodeImage" mode="widthFix"></image>
+				</view>
+
+				<view class="btn-close" @click="popupVisible = false">
+					<up-icon name="close-circle-fill" color="#ffffff" size="60rpx"></up-icon>
+				</view>
 			</view>
-		</up-popup> -->
+		</up-popup>
 	</view>
 </template>
 
 <script setup>
-	// import {
-	// 	ref
-	// } from 'vue';
-
-	// // 创建响应式数据  
-	// const show = ref(false);
-
-	// // 定义方法  
-	// function open() {
-	// 	// 打开逻辑，比如设置 show 为 true  
-	// 	show.value = true;
-	// 	// console.log('open');  
-	// }
-
-	// function close() {
-	// 	// 关闭逻辑，设置 show 为 false  
-	// 	show.value = false;
-	// 	// console.log('close');  
-	// }
+	import { ref } from 'vue'
+
+	const money = ref()
+	const qrCodeImage = ref()
+
+	const popupVisible = ref(false)
+
+	const onPopupClose = () => {
+		uni.reLaunch({
+			 url: '/pages/workbenchManage/index'
+		})
+	}
+
+	
+	const onRefund = () => {
+		// todo: subimt refund and fetch qrcode and open popup 
+
+		popupVisible.value = true
+	}
+
 </script>
 
 <style scoped lang="scss">
@@ -200,4 +206,40 @@
 		color: #FFFFFF;
 		font-size: 30rpx;
 	}
+
+	.popup {
+		width: 632rpx;
+		height: 835rpx;
+		position: relative;
+
+		&-bg,
+		&-content {
+			width: 100%;
+			height: 100%;
+		}
+
+		&-content {
+			position: absolute;
+			top: 0;
+			left: 0;
+
+			padding-top: 276rpx;
+			box-sizing: border-box;
+			color: #707070;
+			font-size: 28rpx;
+			line-height: 37rpx;
+
+			.qr {
+				margin-top: 89rpx;
+				width: 307rpx;
+				height: auto;
+			}
+		}
+
+		.btn-close {
+			position: absolute;
+			top: -27rpx;
+			right: -13rpx;
+		}
+	}
 </style>

pages.json

@@ -208,14 +208,14 @@
 						"navigationBarTitleText": "保证金"
 					}
 				}, {
-					"path": "withdrawal/index",
+					"path": "bond/refund",
 					"style": {
-						"navigationBarTitleText": "提现"
+						"navigationBarTitleText": "保证金退还"
 					}
 				}, {
-					"path": "detail/index",
+					"path": "withdrawal/index",
 					"style": {
-						"navigationBarTitleText": "保证金退还"
+						"navigationBarTitleText": "提现"
 					}
 				}, {
 					"path": "transaction/index",