<template>
	<!-- 兼职注册 -->
	<page-meta :page-style="routePopupVisible ? 'overflow: hidden;' : 'overflow: visible;'"></page-meta>
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
					<uni-icons type="left" size="28"></uni-icons>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="box1">
				<view class="reg-name">
					<text style="color:red;">*</text> 姓名
				</view>
				<view class="reg-value">
					<input type="text" v-model="formData.name" placeholder="请填写姓名"
						style="background: rgba(247, 248, 248, 0.6);height: 80rpx;line-height: 80rpx;padding: 18rpx 20rpx;border-radius: 20rpx;">
				</view>
			</view>

			<view class="box1">
				<view class="reg-name">
					<text style="color:red;">*</text> 学生证上传 <text
						style="font-weight: 400;color: #777;font-size: 11px;">身份信息仅用于认证身份，平台会严格保密</text>
				</view>
				<view class="reg-value">
					<img @tap="pictureAdd('mentou')"
						src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/89d37db7e34c490da24c5dd62183bf2d.png" alt=""
						style="width: 160rpx;height: 160rpx;background-size: 100%;margin-right: 20rpx;" />
					<img @tap="largeImg" :src="formData.studentCard" alt=""
						style="width: 160rpx;height: 160rpx;background-size: 100%;" />
				</view>
			</view>
			<view class="box1">
				<view class="reg-name">
					<text style="color:red;">*</text> 超出3楼以上额外收费
				</view>
				<view class="reg-value">
					<input type="digit" v-model="formData.highFloorFee" placeholder="可设置金额"
						:adjust-position="false"
						@input="onHighFloorFeeInput"
						style="background: rgba(247, 248, 248, 0.6);height: 80rpx;line-height: 80rpx;padding: 18rpx 20rpx;border-radius: 20rpx;">
				</view>
			</view>
			<view class="box1">
				<view class="reg-name">
					<text style="color:red;">*</text> 送达地点
				</view>
				<view class="reg-value" style="display: flex;">
					<view class="box-check-btn delivery-location-btn" @tap="selectDeliveryLocation(0)"
						:style="{background:formData.deliveryLocation == 0?'rgba(180, 255, 238, 0.27)':'rgba(247, 248, 248, 0.6)',border:formData.deliveryLocation == 0?'1px solid rgba(180, 255, 238, 1)':'1px solid #777'}">
						送上楼
					</view>
					<view class="box-check-btn delivery-location-btn" @tap="selectDeliveryLocation(1)"
						:style="{background:formData.deliveryLocation == 1?'rgba(180, 255, 238, 0.27)':'rgba(247, 248, 248, 0.6)',border:formData.deliveryLocation == 1?'1px solid rgba(180, 255, 238, 1)':'1px solid #777'}">
						送到宿舍门口
					</view>
				</view>
			</view>
			<view class="box1">
				<view class="reg-name">
					<text style="color:red;">*</text> 手机号
				</view>
				<view class="reg-value">
					<input type="number" v-model="formData.mobile" placeholder="手机号"
						style="background: rgba(247, 248, 248, 0.6);height: 80rpx;line-height: 80rpx;padding: 18rpx 20rpx;border-radius: 20rpx;">
				</view>
			</view>
			<view class="box1">
				<view class="reg-name">
					<text style="color:red;">*</text> 兼职类型
				</view>
				<view class="reg-value" style="display: flex;">
					<view class="box-check-btn" @tap="waimaOrpaotui('waima')"
						:style="{background:formData.waima?'rgba(180, 255, 238, 0.27)':'rgba(247, 248, 248, 0.6)',border:formData.waima?'1px solid rgba(180, 255, 238, 1)':'1px solid #777'}">
						外卖
					</view>
					<view class="box-check-btn" @tap="waimaOrpaotui('paotui')"
						:style="{background:formData.paotui?'rgba(180, 255, 238, 0.27)':'rgba(247, 248, 248, 0.6)',border:formData.paotui?'1px solid rgba(180, 255, 238, 1)':'1px solid #777'}">
						快递
					</view>
				</view>
			</view>
			<view class="box1" v-if="formData.waima != false || formData.paotui != false">
				<view class="reg-name rule-section-title">
					<text style="color:red;">*</text> 我的赚钱地盘
				</view>
				<view class="rule-section-desc">选择你愿意配送的取货点和楼栋，再设置最低配送费。系统只会按这些范围给你派单。</view>
				<view class="reg-value">
					<view class="value1" v-if="formData.waima">
						<view class="value-title">
							<view class="title-1">
								外卖赚钱地盘
								<text class="rule-summary">{{getRuleSummary(waimaRuleList)}}</text>
							</view>
							<view class="title-2" @tap="checkAddress('waima')">
								选择路线
								<uni-icons type="right" size="12"></uni-icons>
							</view>
						</view>
						<view class="rule-empty-card" v-if="waimaRuleList.length == 0" @tap="checkAddress('waima')">
							<view class="rule-empty-icon">地盘</view>
							<view class="rule-empty-title">你还没有划定外卖赚钱地盘</view>
							<view class="rule-empty-desc">点这里选择食堂和宿舍楼，设置后才能收到对应区域的指派单。</view>
						</view>
						<view class="guize-list">
							<view class="guize1 route-card" v-for="(item, index) in waimaRuleList" :key="index">
								<view class="route-main">
									<view class="route-points">
										<view class="route-point">
											<text class="route-badge">取</text>
											<text class="route-name">{{item.getAreaName}}</text>
										</view>
										<view class="route-point">
											<text class="route-badge route-badge--send">送</text>
											<text class="route-name route-name--send">{{item.putAreaName}}</text>
										</view>
									</view>
									<view class="route-price">
										<text>￥</text>
										<input type="digit" :value="item.orderBkge" placeholder="最低价"
											:adjust-position="false"
											@input="onOrderBkgeInput($event, item)">
									</view>
									<view class="route-delete" @tap="removeRule('waima', index)">×</view>
								</view>
								<view class="route-remark">
									<text>备注(选填)</text>
									<input type="text" v-model="item.remark" placeholder="如：大件/限时可加钱">
								</view>
							</view>
						</view>
					</view>
					<view class="value1" v-if="formData.paotui">
						<view class="value-title">
							<view class="title-1">
								快递赚钱地盘
								<text class="rule-summary">{{getRuleSummary(paotuiRuleList)}}</text>
							</view>
							<view class="title-2" @tap="checkAddress('paotui')">
								选择路线
								<uni-icons type="right" size="12"></uni-icons>
							</view>
						</view>
						<view class="rule-empty-card" v-if="paotuiRuleList.length == 0" @tap="checkAddress('paotui')">
							<view class="rule-empty-icon">地盘</view>
							<view class="rule-empty-title">你还没有划定快递赚钱地盘</view>
							<view class="rule-empty-desc">选择快递站和宿舍楼，系统才会把符合范围的快递单派给你。</view>
						</view>
						<view class="guize-list">
							<view class="guize1 route-card" v-for="(item, index) in paotuiRuleList" :key="index">
								<view class="route-main">
									<view class="route-points">
										<view class="route-point">
											<text class="route-badge">取</text>
											<text class="route-name">{{item.getAreaName}}</text>
										</view>
										<view class="route-point">
											<text class="route-badge route-badge--send">送</text>
											<text class="route-name route-name--send">{{item.putAreaName}}</text>
										</view>
									</view>
									<view class="route-price">
										<text>￥</text>
										<input type="digit" :value="item.orderBkge" placeholder="最低价"
											:adjust-position="false"
											@input="onOrderBkgeInput($event, item)">
									</view>
									<view class="route-delete" @tap="removeRule('paotui', index)">×</view>
								</view>
								<view class="route-remark">
									<text>备注(选填)</text>
									<input type="text" v-model="item.remark" placeholder="如：大件/限时可加钱">
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="earning-simulator">
					<view class="earning-title">收益模拟</view>
					<view class="earning-main">按当前设置，预计今日可接 {{earningEstimate.orderRange}} 单</view>
					<view class="earning-money">预估收入 {{earningEstimate.incomeRange}}</view>
					<view class="earning-tip">预估值仅供参考，实际以当天订单为准。</view>
				</view>
			</view>

			<view class="official-card">
				<img show-menu-by-longpress
					src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d23a9043a8c24731831ec4db909fe3b4.jpg" alt=""
					class="official-qr" />
				<view class="official-info">
					<view class="official-title">长按 关注公众号</view>
					<view class="official-desc">关注后可提现佣金，有新订单会及时通知你。</view>
				</view>
			</view>
			<view class="btn" @click="submit">
				提交注册
			</view>
		</view>
		<!-- 查看大图弹出层 -->
		<uni-popup ref="imgPopup" background-color="#fff">
			<view class="img-popup-content">
				<img :src="bigImg" alt="" style="width: 100%;height: 100%;">
			</view>
		</uni-popup>
		<!-- 温馨提示弹出层 -->
		<uni-popup ref="lianggePopup" background-color="#fff" @change="changePopup">
			<view class="liangge-popup-content">
				<view class="liangge-title">
					温馨提示
				</view>
				<view class="liangge-text">
					1.送单规则，需要在<text style="color:red">配送</text>页面开启才能生效
				</view>
				<view class="liangge-text">
					2.您还没有关注公众号，关注公众号后可提现佣金
				</view>
			</view>
		</uni-popup>
		<!-- 新手引导弹窗 -->
		<uni-popup ref="onboardingPopup" background-color="#fff">
			<view class="onboarding-popup">
				<view class="onboarding-title">三步开始接赚钱单</view>
				<view class="onboarding-step">
					<view class="onboarding-num">1</view>
					<view>
						<view class="onboarding-step-title">圈地盘</view>
						<view class="onboarding-step-desc">选择你想送货的楼栋/区域。</view>
					</view>
				</view>
				<view class="onboarding-step">
					<view class="onboarding-num">2</view>
					<view>
						<view class="onboarding-step-title">定价格</view>
						<view class="onboarding-step-desc">设置你愿意接受的最低配送费。</view>
					</view>
				</view>
				<view class="onboarding-step">
					<view class="onboarding-num">3</view>
					<view>
						<view class="onboarding-step-title">自动接单</view>
						<view class="onboarding-step-desc">上线并开启派单后，只接符合要求的订单。</view>
					</view>
				</view>
				<view class="onboarding-btn" @tap="closeOnboarding">去划定赚钱地盘</view>
			</view>
		</uni-popup>
		<!-- 规则选择弹出层 -->
		<uni-popup ref="guizePopup" type="bottom" background-color="transparent" @change="onRoutePopupChange">
			<view class="guize-popup-content">
				<view class="area-popup-title">{{currentConfigType == 'waima' ? '生成外卖接单路线' : '生成快递接单路线'}}</view>
				<view class="area-popup-scroll">
					<view class="area-popup-desc">选中的取货点和送达区域会两两组合生成路线，新路线默认使用本弹窗填写的最低配送费和备注。</view>
					<view class="route-default-card">
						<view class="route-default-row">
							<view class="route-default-label">本次最低配送费</view>
							<view class="route-default-input">
								<text>￥</text>
								<input type="digit" v-model="defaultRoutePrice" placeholder="如 1"
									:adjust-position="false"
									@input="onDefaultRoutePriceInput">
							</view>
						</view>
						<view class="route-default-row route-default-row--remark">
							<view class="route-default-label">统一备注</view>
							<input class="route-default-remark" type="text" v-model="defaultRouteRemark"
								placeholder="选填，如：大件不接/限时加钱">
						</view>
					</view>
					<view class="area-section-title">
						<text>选择取货点</text>
						<view>
							<text @tap="toggleAreaCheck('qucan', true)">全选</text>
							<text class="area-action" @tap="toggleAreaCheck('qucan', false)">清空</text>
						</view>
					</view>
					<view class="area-options">
						<view class="box-check-btn" @tap="qucanOrsongcan('qucan',index)" v-for="(item,index) in qucan"
							:key="index" style="float: left;padding: 0 20rpx;width: auto;margin-bottom:20rpx;"
							:style="{background:item.checked?'rgba(180, 255, 238, 0.27)':'rgba(247, 248, 248, 0.6)',border:item.checked?'1px solid rgba(180, 255, 238, 1)':'1px solid #777'}">
							{{item.title}}
						</view>
						<view v-if="qucan.length==0" style="color:#999;font-size:24rpx;margin:20rpx 0;">暂无可选取货区域</view>
					</view>
					<view class="area-section-title area-section-title--second">
						<text>选择送达区域</text>
						<view>
							<text @tap="toggleAreaCheck('songcan', true)">全选</text>
							<text class="area-action" @tap="toggleAreaCheck('songcan', false)">清空</text>
						</view>
					</view>
					<view class="area-options">
						<view class="box-check-btn" @tap="qucanOrsongcan('songcan',index)" v-for="(item,index) in songcan"
							:key="index" style="float: left;padding: 0 20rpx;width: auto;margin-bottom:20rpx;"
							:style="{background:item.checked?'rgba(180, 255, 238, 0.27)':'rgba(247, 248, 248, 0.6)',border:item.checked?'1px solid rgba(180, 255, 238, 1)':'1px solid #777'}">
							{{item.title}}
						</view>
						<view v-if="songcan.length==0" style="color:#999;font-size:24rpx;margin:20rpx 0;">暂无可送货区域</view>
					</view>
				</view>
				<view class="guize-btn area-fixed-btn" @tap="closeGuize">
					生成接单路线
				</view>
				<view class="area-close" @tap.stop="$refs.guizePopup.close()">
					<uni-icons type="close" size="26" color="#00231C"></uni-icons>
				</view>
			</view>
		</uni-popup>
		<common-loading />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {},
				formData: {
					name: '',
					highFloorFee: 0,
					deliveryLocation: 0,
					paotui: false,
					waima: false,
					mobile: '',
					studentCard: '',
				},
				bigImg: '',
				qucan: [],
				songcan: [],
				shopArea: [],
				waimaRuleList: [],
				paotuiRuleList: [],
				currentConfigType: '',
				defaultRoutePrice: '1',
				defaultRouteRemark: '',
				routePopupVisible: false
			}
		},
		components: {

		},
		computed: {
			earningEstimate() {
				const count = this.waimaRuleList.length + this.paotuiRuleList.length
				const commissionPerOrder = 2
				if (count == 0) {
					return {
						orderRange: '0',
						incomeRange: '￥0'
					}
				}
				const lowOrders = Math.max(1, Math.ceil(count * 0.25))
				const highOrders = Math.max(lowOrders, Math.ceil(count * 0.6))
				const lowIncome = Math.floor(lowOrders * commissionPerOrder * 100) / 100
				const highIncome = Math.floor(highOrders * commissionPerOrder * 100) / 100
				return {
					orderRange: lowOrders + '-' + highOrders,
					incomeRange: '￥' + this.formatDisplayMoney(lowIncome) + '-' + this.formatDisplayMoney(highIncome)
				}
			}
		},
		onLoad() {
			this.getShopArea()
			this.getWorkerMessage()
			this.showOnboardingOnce()
		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		},
		methods: {
			formatMoneyInput(value) {
				value = String(value || '');
				value = value.replace(/[^\d.]/g, '');
				const dotIndex = value.indexOf('.');
				if (dotIndex !== -1) {
					value = value.slice(0, dotIndex + 1) + value.slice(dotIndex + 1).replace(/\./g, '');
					const parts = value.split('.');
					value = parts[0] + '.' + parts[1].slice(0, 2);
				}
				return value;
			},
			formatOneDecimalInput(value) {
				value = String(value || '').replace(/[^\d.]/g, '');
				const dotIndex = value.indexOf('.');
				if (dotIndex !== -1) {
					value = value.slice(0, dotIndex + 1) + value.slice(dotIndex + 1).replace(/\./g, '');
					const parts = value.split('.');
					value = parts[0] + '.' + parts[1].slice(0, 1);
				}
				return value;
			},
			onHighFloorFeeInput(e) {
				const value = this.formatOneDecimalInput(e.detail.value);
				this.formData.highFloorFee = value;
				return value;
			},
			formatDisplayMoney(value) {
				const amount = parseFloat(value)
				if (isNaN(amount)) return '0'
				return amount.toFixed(2).replace(/\.?0+$/, '')
			},
			getMinFee(list) {
				const fees = (list || []).map(item => parseFloat(item.orderBkge)).filter(item => !isNaN(item) && item > 0)
				if (fees.length == 0) return 0
				return Math.min.apply(null, fees)
			},
			getRuleSummary(list) {
				if (!list || list.length == 0) return '未设置'
				const minFee = this.getMinFee(list)
				return '已覆盖 ' + list.length + ' 条路线' + (minFee > 0 ? '，最低￥' + this.formatDisplayMoney(minFee) + '起' : '')
			},
			showOnboardingOnce() {
				this.$nextTick(() => {
					if (uni.getStorageSync('part_time_rule_onboarding_seen')) return
					setTimeout(() => {
						if (this.$refs.onboardingPopup) {
							this.$refs.onboardingPopup.open()
						}
					}, 300)
				})
			},
			closeOnboarding() {
				uni.setStorageSync('part_time_rule_onboarding_seen', 1)
				this.$refs.onboardingPopup.close()
			},
			onDefaultRoutePriceInput(e) {
				const value = this.formatMoneyInput(e.detail.value)
				this.defaultRoutePrice = value
				return value
			},
			normalizeOrderBkge(item) {
				const value = this.formatMoneyInput(item.orderBkge);
				const amount = parseFloat(value);
				item.orderBkge = isNaN(amount) ? '' : (Math.floor(amount * 100) / 100).toFixed(2).replace(/\.?0+$/, '');
				return item.orderBkge;
			},
			onOrderBkgeInput(e, item) {
				const value = this.formatMoneyInput(e.detail.value);
				item.orderBkge = value;
				return value;
			},
			getWorkerMessage() {
				let that = this
				that.tui.request("/app/workerRelaPrice/getByWorkerId?workerId=" + uni.getStorageSync('worker').workerId,
					"GET", {}, false, true).then((res) => {
					if (res.code == 200) {
						if (res.result != null) {
							let data = res.result;
							if (data.workerName) that.formData.name = data.workerName;
							if (data.cardPicture) that.formData.studentCard = data.cardPicture;
							if (data.mobile) that.formData.mobile = data.mobile;
							if (data.highFloorFee !== undefined && data.highFloorFee !== null) that.formData
								.highFloorFee = data.highFloorFee;
							if (data.deliveryLocation !== undefined && data.deliveryLocation !== null) that.formData
								.deliveryLocation = data.deliveryLocation;

							let list = data.workerRelaPriceList || [];
							let waimaList = list.filter(item => item.orderType == 0);
							let paotuiList = list.filter(item => item.orderType == 1);

							if (waimaList.length > 0) {
								that.formData.waima = true;
								that.waimaRuleList = waimaList;
							}
							if (paotuiList.length > 0) {
								that.formData.paotui = true;
								that.paotuiRuleList = paotuiList;
							}
							that.$forceUpdate();
						}
					} else {
						that.tui.toast(res.message)
						return
					}
				}).catch((res) => {})
			},
			getShopArea() {
				let that = this
				that.tui.request("/app/shopArea/getByParentId/" + JSON.parse(uni.getStorageSync('area')).id, "GET", {},
					false, true).then((res) => {
					if (res.code == 200) {
						if (res.result != null) {
							for (let m = 0; m < res.result.length; m++) {
								that.shopArea.push(res.result[m])
							}
						}
					} else {
						that.tui.toast(res.message)
						return
					}
				}).catch((res) => {})
			},
			back() {
				uni.navigateBack()
			},
			//查看大图
			largeImg(img) {
				this.bigImg = this.formData.studentCard;
				this.$refs.imgPopup.open()
			},
			waimaOrpaotui(type) {
				if (type == 'waima') {
					this.formData.waima = !this.formData.waima
				} else {
					this.formData.paotui = !this.formData.paotui
				}
				this.$forceUpdate()
			},
			selectDeliveryLocation(value) {
				this.formData.deliveryLocation = value
				this.$forceUpdate()
			},
			qucanOrsongcan(type, index) {
				if (type == 'qucan') {
					this.qucan[index].checked = !this.qucan[index].checked
				} else {
					this.songcan[index].checked = !this.songcan[index].checked
				}
				this.$forceUpdate()
			},
			toggleAreaCheck(type, checked) {
				const list = type == 'qucan' ? this.qucan : this.songcan
				list.forEach(item => {
					item.checked = checked
				})
				this.$forceUpdate()
			},
			closeGuize() {
				let selectedQucan = this.qucan.filter(item => item.checked);
				let selectedSongcan = this.songcan.filter(item => item.checked);

				if (selectedQucan.length == 0 || selectedSongcan.length == 0) {
					uni.showToast({
						title: '请至少选择一个取货地址和一个送货地址',
						icon: 'none'
					});
					return;
				}

				let currentRuleList = this.currentConfigType == 'waima' ? this.waimaRuleList : this.paotuiRuleList;
				let newRules = [];
				let userId = uni.getStorageSync('id') || '';
				selectedQucan.forEach(q => {
					selectedSongcan.forEach(s => {
						let existing = currentRuleList.find(r => r.getAreaId == q.id && r.putAreaId == s
							.id);
						if (existing) {
							newRules.push(existing);
						} else {
							newRules.push({
								workerId: "W" + userId,
								getAreaId: q.id,
								getAreaName: q.title,
								putAreaId: s.id,
								putAreaName: s.title,
								orderBkge: this.formatMoneyInput(this.defaultRoutePrice),
								orderType: this.currentConfigType == 'waima' ? 0 : 1,
								remark: this.defaultRouteRemark || ''
							});
						}
					});
				});

				if (this.currentConfigType == 'waima') {
					this.waimaRuleList = newRules;
				} else {
					this.paotuiRuleList = newRules;
				}

				uni.showToast({
					title: '已生成' + newRules.length + '条路线',
					icon: 'none'
				});
				this.$refs.guizePopup.close()
			},
			changePopup(e){
				if(e.show == false){
					uni.navigateBack()
				}
			},
			onRoutePopupChange(e) {
				this.routePopupVisible = !!e.show
			},
			checkAddress(type) {
				let that = this
				this.currentConfigType = type;
				this.qucan = [];
				this.songcan = [];
				let currentRuleList = type == 'waima' ? this.waimaRuleList : this.paotuiRuleList;
				let isCanteenVal = type == 'waima' ? 1 : 2;

				this.shopArea.forEach(item => {
					let isGetChecked = currentRuleList.some(r => r.getAreaId == item.id);
					let isPutChecked = currentRuleList.some(r => r.putAreaId == item.id);

					if (item.isCanteen == isCanteenVal) {
						that.qucan.push({
							...item,
							checked: isGetChecked
						});
					} else {
						that.songcan.push({
							...item,
							checked: isPutChecked
						});
					}
				});
				this.$refs.guizePopup.open()
			},
			removeRule(type, index) {
				if (type == 'waima') {
					this.waimaRuleList.splice(index, 1);
				} else {
					this.paotuiRuleList.splice(index, 1);
				}
			},
			submit() {
				if (!this.formData.name) return uni.showToast({
					title: '请填写姓名',
					icon: 'none'
				});
				if (!this.formData.studentCard) return uni.showToast({
					title: '请上传学生证',
					icon: 'none'
				});
				if (!this.formData.waima && !this.formData.paotui) return uni.showToast({
					title: '请至少选择一种兼职类型',
					icon: 'none'
				});

				if (this.formData.waima && this.waimaRuleList.length == 0) {
					return uni.showToast({
						title: '请先划定外卖赚钱地盘',
						icon: 'none'
					});
				}
				if (this.formData.paotui && this.paotuiRuleList.length == 0) {
					return uni.showToast({
						title: '请先划定快递赚钱地盘',
						icon: 'none'
					});
				}

				let workerRelaPriceList = [];
				if (this.formData.waima) {
					this.waimaRuleList.forEach(item => this.normalizeOrderBkge(item));
					let invalid = this.waimaRuleList.find(item => !item.orderBkge);
					if (invalid) return uni.showToast({
						title: '请填写外卖最低配送费',
						icon: 'none'
					});
					workerRelaPriceList = workerRelaPriceList.concat(this.waimaRuleList);
				}
				if (this.formData.paotui) {
					this.paotuiRuleList.forEach(item => this.normalizeOrderBkge(item));
					let invalid = this.paotuiRuleList.find(item => !item.orderBkge);
					if (invalid) return uni.showToast({
						title: '请填写快递最低配送费',
						icon: 'none'
					});
					workerRelaPriceList = workerRelaPriceList.concat(this.paotuiRuleList);
				}

				let submitData = {
					userId: uni.getStorageSync('id'),
					workerName: this.formData.name,
					cardPicture: this.formData.studentCard,
					highFloorFee: this.formatOneDecimalInput(this.formData.highFloorFee),
					deliveryLocation: this.formData.deliveryLocation,
					mobile: this.formData.mobile,
					workerRelaPriceList: workerRelaPriceList
				};

				uni.showLoading({
					title: '提交中...',
					mask: true
				});
				this.tui.request('/app/workerRelaPrice/batchAdd', 'post', submitData).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						let user = res.result;
						uni.setStorageSync('officialAccountOpenid', user.officialAccountOpenid)
						if (user.officialAccountOpenid == null || user.officialAccountOpenid == '' || user
							.officialAccountOpenid == undefined) {
							this.$refs.lianggePopup.open()
						} else {
							uni.showToast({
								title: '提交成功'
							});
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				}).catch(err => {
					uni.hideLoading();
				});
			},
			pictureAdd() {
				let that = this
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['camera', 'album'],
					success(res) {
						uni.showLoading({
							title: '加载中...',
							mask: true
						})
						for (let i = 0; i < res.tempFiles.length; i++) {

							that.upLoadFile(res.tempFiles[i].tempFilePath)
						}

					}
				})
			},
			async upLoadFile(path) {
				let that = this;
				let hiver_token = uni.getStorageSync("hiver_token")
				await uni.uploadFile({
					url: that.tui.interfaceUrl() + '/upload/file',
					filePath: path,
					name: 'file',
					header: {
						"content-type": "multipart/form-data",
						'accessToken': hiver_token
					},
					formData: {},
					success: (uploadFileRes) => {
						let pathData = JSON.parse(uploadFileRes.data)
						that.formData.studentCard = pathData.result
						that.$forceUpdate()
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							title: JSON.stringify(err),
							icon: 'none'
						})
					}
				});
				await setTimeout(res => {
					uni.hideLoading();
				}, 1000)
			},
		}

	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}

	.page1 {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		position: relative;
	}

	.title {
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/461dd2d5ba1f462ca05da7e2379d1d90.png') no-repeat;
		width: 100%;
		height: 640rpx;
		background-size: 100%;
	}

	.title-sreach {
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}

	.back-btn {
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.content {
		position: absolute;
		top: 450rpx;
		width: 100%;
		border-radius: 40rpx;
		background: #fff;
		padding: 16rpx 20rpx;
	}

	.reg-name {
		font-size: 32rpx;
		font-weight: 700;
		height: 70rpx;
		line-height: 70rpx;
		margin-top: 20rpx;
	}

	.reg-value {
		margin-top: 10rpx;
	}

	.img-popup-content {
		width: 500rpx;
		height: 500rpx;
	}

	.liangge-popup-content {
		background: #fff;
		border-radius: 10px;
		padding: 10px;
		height: 150px;
	}
	.liangge-title{
		
		    height: 50px;
		    line-height: 35px;
		    text-align: center;
		    font-size: 16px;
		    font-weight: 700;

	}
	.liangge-text{
		height: 30px;
		font-size: 14px;
		font-weight: 700;
	}
	.box-check-btn {
		width: 160rpx;
		height: 70rpx;
		background: rgba(180, 255, 238, 0.27);
		text-align: center;
		line-height: 70rpx;
		border-radius: 70rpx;
		font-weight: 700;
		border: 1px solid rgba(180, 255, 238, 1);
		margin-right: 20rpx;
	}

	.delivery-location-btn {
		width: 240rpx;
	}

	.rule-section-title {
		line-height: 48rpx;
		height: auto;
	}

	.rule-section-desc {
		margin-top: 8rpx;
		color: #6f7d79;
		font-size: 24rpx;
		line-height: 36rpx;
	}

	.value1 {
		background: #f8fffc;
		border-radius: 28rpx;
		padding: 24rpx;
		margin-bottom: 22rpx;
		border: 1px solid rgba(166, 255, 234, 0.45);
	}

	.value-title {

		display: flex;
		min-height: 70rpx;
		line-height: 42rpx;
		font-size: 30rpx;
		font-weight: 400;
		align-items: center;

	}

	.title-1 {
		font-weight: 700;
		flex: 1;
	}

	.title-2 {
		width: 176rpx;
		height: 58rpx;
		line-height: 58rpx;
		border-radius: 58rpx;
		color: #00624f;
		background: rgba(166, 255, 234, 0.42);
		text-align: right;
		padding-right: 16rpx;
		font-weight: 800;
		box-sizing: border-box;

	}

	.rule-summary {
		display: block;
		margin-top: 4rpx;
		color: #0b6b5a;
		font-size: 22rpx;
		font-weight: 700;
		line-height: 30rpx;
	}

	.rule-empty-card {
		margin-top: 18rpx;
		padding: 38rpx 24rpx;
		border: 1px dashed rgba(0, 35, 28, 0.18);
		border-radius: 24rpx;
		background: rgba(255, 255, 255, 0.78);
		text-align: center;
	}

	.rule-empty-icon {
		width: 132rpx;
		height: 132rpx;
		line-height: 132rpx;
		margin: 0 auto 20rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #e3ff96, #a6ffea);
		color: #07372f;
		font-size: 24rpx;
		font-weight: 900;
	}

	.rule-empty-title {
		color: #00231C;
		font-size: 30rpx;
		font-weight: 900;
	}

	.rule-empty-desc {
		margin-top: 10rpx;
		color: #7b8a85;
		font-size: 24rpx;
		line-height: 36rpx;
	}

	.guize1 {
		margin-top: 18rpx;
	}

	.route-card {
		padding: 20rpx 0;
		border-bottom: 1px solid rgba(0, 35, 28, 0.08);
	}

	.route-main {
		display: flex;
		align-items: center;
	}

	.route-points {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 12rpx;
	}

	.route-point {
		display: flex;
		align-items: center;
		max-width: 240rpx;
	}

	.route-badge {
		width: 38rpx;
		height: 38rpx;
		line-height: 38rpx;
		flex-shrink: 0;
		border-radius: 50%;
		background: #00231C;
		color: #fff;
		font-size: 20rpx;
		font-weight: 900;
		text-align: center;
	}

	.route-badge--send {
		background: #005849;
	}

	.route-name {
		height: 42rpx;
		line-height: 42rpx;
		padding: 0 16rpx;
		margin-left: -8rpx;
		border-radius: 0 42rpx 42rpx 0;
		background: rgba(166, 255, 234, 0.58);
		font-size: 24rpx;
		font-weight: 800;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.route-name--send {
		background: rgba(209, 206, 255, 0.78);
	}

	.route-price {
		width: 120rpx;
		height: 60rpx;
		padding: 0 14rpx;
		margin-left: 12rpx;
		display: flex;
		align-items: center;
		border-radius: 18rpx;
		background: #fff;
		font-size: 26rpx;
		font-weight: 900;
		box-shadow: inset 0 0 0 1px rgba(0, 35, 28, 0.08);
		box-sizing: border-box;
	}

	.route-price input {
		flex: 1;
		min-width: 0;
		margin-left: 4rpx;
		font-weight: 900;
	}

	.route-delete {
		width: 48rpx;
		height: 48rpx;
		line-height: 44rpx;
		margin-left: 10rpx;
		border-radius: 50%;
		color: #ff3b30;
		font-size: 40rpx;
		text-align: center;
	}

	.route-remark {
		display: flex;
		align-items: center;
		margin-top: 16rpx;
		padding: 0 16rpx;
		height: 64rpx;
		border-radius: 16rpx;
		background: #fff;
		box-sizing: border-box;
	}

	.route-remark text {
		margin-right: 16rpx;
		color: #6f7d79;
		font-size: 24rpx;
		font-weight: 800;
	}

	.route-remark input {
		flex: 1;
		min-width: 0;
		font-size: 24rpx;
	}

	.qusong1 {
		width: 40rpx;
		height: 40rpx;
		background: rgba(0, 35, 28, 1);
		color: #fff;
		border-radius: 40rpx;
		text-align: center;
		line-height: 40rpx;
		font-size: 20rpx;
		z-index: 80;
	}

	.qusong2 {
		height: 40rpx;
		font-size: 24rpx;
		line-height: 38rpx;
		text-align: center;
		background: rgba(166, 255, 234, 0.5);
		padding: 0 20rpx;
		margin-left: -10rpx;
		font-weight: 700;
		border-top-right-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
	}

	.qusong3 {
		width: 190rpx;
		height: 70rpx;
		background: #fff;
		border-radius: 10rpx;
		padding: 10rpx 20rpx;
		flex: 1;
	}

	.earning-simulator {
		margin: 24rpx 0 8rpx;
		padding: 30rpx;
		border-radius: 28rpx;
		background:
			radial-gradient(circle at 92% 10%, rgba(166, 255, 234, 0.58) 0, rgba(166, 255, 234, 0) 180rpx),
			linear-gradient(135deg, #fffdf2, #f6fffb);
		box-shadow: 0 12rpx 28rpx rgba(0, 35, 28, 0.06);
	}

	.earning-title {
		color: #00231C;
		font-size: 30rpx;
		font-weight: 900;
	}

	.earning-main {
		margin-top: 16rpx;
		color: #304842;
		font-size: 28rpx;
		font-weight: 800;
	}

	.earning-money {
		margin-top: 10rpx;
		color: #0b6b5a;
		font-size: 36rpx;
		font-weight: 900;
	}

	.earning-tip {
		margin-top: 10rpx;
		color: #89948f;
		font-size: 22rpx;
		line-height: 32rpx;
	}

	.official-card {
		width: 95%;
		margin: 28rpx auto 10rpx;
		padding: 24rpx;
		display: flex;
		align-items: center;
		border-radius: 28rpx;
		background: linear-gradient(135deg, rgba(227, 255, 150, 0.46), rgba(166, 255, 234, 0.42));
		box-shadow: 0 12rpx 28rpx rgba(0, 35, 28, 0.06);
		box-sizing: border-box;
	}

	.official-qr {
		width: 150rpx;
		height: 150rpx;
		flex-shrink: 0;
		border-radius: 22rpx;
		background: #fff;
	}

	.official-info {
		flex: 1;
		min-width: 0;
		margin-left: 24rpx;
	}

	.official-title {
		color: #00231C;
		font-size: 32rpx;
		font-weight: 900;
	}

	.official-desc {
		margin-top: 12rpx;
		color: #526964;
		font-size: 24rpx;
		line-height: 36rpx;
		font-weight: 700;
	}

	.btn {
		width: 95%;
		height: 100rpx;
		font-size: 32rpx;
		font-weight: 700;
		background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
		border-radius: 100rpx;
		line-height: 100rpx;
		text-align: center;
		margin: 40rpx auto;
	}

	.guize-popup-content {
		width: 100%;
		height: 66vh;
		background: #fff;
		padding: 40rpx 40rpx 28rpx;
		border-radius: 40rpx 40rpx 0 0;
		margin: 0 auto;
		overflow: hidden;
		position: relative;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.onboarding-popup {
		width: 620rpx;
		padding: 40rpx 34rpx;
		box-sizing: border-box;
		border-radius: 36rpx;
		background: #fff;
	}

	.onboarding-title {
		color: #00231C;
		font-size: 36rpx;
		font-weight: 900;
		text-align: center;
		margin-bottom: 26rpx;
	}

	.onboarding-step {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1px solid rgba(0, 35, 28, 0.08);
	}

	.onboarding-num {
		width: 52rpx;
		height: 52rpx;
		line-height: 52rpx;
		margin-right: 18rpx;
		flex-shrink: 0;
		border-radius: 50%;
		background: linear-gradient(135deg, #e3ff96, #a6ffea);
		color: #00231C;
		font-size: 26rpx;
		font-weight: 900;
		text-align: center;
	}

	.onboarding-step-title {
		color: #00231C;
		font-size: 28rpx;
		font-weight: 900;
	}

	.onboarding-step-desc {
		margin-top: 6rpx;
		color: #7b8a85;
		font-size: 24rpx;
		line-height: 34rpx;
	}

	.onboarding-btn {
		height: 88rpx;
		line-height: 88rpx;
		margin-top: 32rpx;
		border-radius: 88rpx;
		background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
		color: #00231C;
		font-size: 30rpx;
		font-weight: 900;
		text-align: center;
	}

	.area-popup-title {
		color: #00231C;
		font-size: 34rpx;
		font-weight: 900;
		text-align: center;
	}

	.area-popup-desc {
		margin-top: 14rpx;
		padding: 18rpx;
		border-radius: 18rpx;
		background: rgba(166, 255, 234, 0.24);
		color: #61736e;
		font-size: 24rpx;
		line-height: 36rpx;
	}

	.area-popup-scroll {
		flex: 1;
		min-height: 0;
		height: auto;
		overflow: scroll;
		padding-bottom: 34rpx;
		box-sizing: border-box;
	}

	.route-default-card {
		margin-top: 18rpx;
		padding: 20rpx;
		border-radius: 22rpx;
		background: linear-gradient(135deg, rgba(227, 255, 150, 0.52), rgba(166, 255, 234, 0.34));
	}

	.route-default-row {
		display: flex;
		align-items: center;
	}

	.route-default-row--remark {
		margin-top: 16rpx;
	}

	.route-default-label {
		width: 210rpx;
		color: #00231C;
		font-size: 26rpx;
		font-weight: 900;
	}

	.route-default-input {
		width: 190rpx;
		height: 66rpx;
		padding: 0 18rpx;
		display: flex;
		align-items: center;
		border-radius: 18rpx;
		background: #fff;
		font-size: 28rpx;
		font-weight: 900;
		box-sizing: border-box;
	}

	.route-default-input input {
		flex: 1;
		min-width: 0;
		margin-left: 6rpx;
		font-weight: 900;
	}

	.route-default-remark {
		flex: 1;
		min-width: 0;
		height: 66rpx;
		line-height: 66rpx;
		padding: 0 18rpx;
		border-radius: 18rpx;
		background: #fff;
		font-size: 24rpx;
		box-sizing: border-box;
	}

	.area-section-title {
		margin-top: 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #00231C;
		font-size: 28rpx;
		font-weight: 900;
	}

	.area-section-title view {
		color: #1E90FF;
		font-size: 24rpx;
		font-weight: 800;
	}

	.area-action {
		margin-left: 24rpx;
	}

	.area-section-title--second {
		margin-top: 42rpx;
	}

	.area-options {
		margin-top: 20rpx;
		min-height: 90rpx;
		overflow: hidden;
	}

	.guize-btn {
		background: #00231c;
		border-radius: 100rpx;
		height: 100rpx;
		width: 100%;
		margin: 120rpx auto 0;
		color: #b4ffee;
		clear: both;
		text-align: center;
		line-height: 100rpx;
		font-size: 30rpx;
		font-weight: 700
	}

	.area-fixed-btn {
		width: 100%;
		margin: 18rpx 0 0;
		flex-shrink: 0;
		box-shadow: 0 14rpx 28rpx rgba(0, 35, 28, 0.18);
	}

	.area-close {
		position: absolute;
		top: 24rpx;
		right: 24rpx;
		width: 56rpx;
		height: 56rpx;
		line-height: 56rpx;
		border-radius: 50%;
		background: rgba(247, 248, 248, 0.9);
		text-align: center;
	}
</style>