zh_order_food_xcx/pages-takeout/run-errands.vue

<template>
	<view class="flex-common-css iPhone-bottom box-border-box">
		<Nav title="跑腿代拿" leftIconColor="#333" titleColor="#333"></Nav>
		<scroll-view :scroll-y="true" class="scroll-view-css box-border-box p-24">
			<view class="box-border-box mb-20">
				<uni-swiper-dot :info="bannerList" mode="dot" :dotsStyles="dotStyle" :current="current">
					<swiper class="swiper" @change="change" :autoplay='true' :circular='true' interval="4000">
						<swiper-item v-for="(item,i) in bannerList" :key="i">
							<image class="swiper-item" :src="item.image" mode="aspectFill">
							</image>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			<view class="align-items-center p-16 box-border-box b-rad-20 bgc-f mb-20">
				<view class="flex-1 flex-direction align-items-center b-rad-20 ptb-15" v-for="(item,index) in serveData"
					:key="index" @click="serveClick(item)"
					:class="formData.errands_id === item.errands_id?'bgc-BCEAFF':'bgc-f'">
					<image class="item-img mb-8 b-rad-16" :src="item.img" mode=""></image>
					<view class="text-align-center fs-26">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="form-box bgc-f b-rad-16 p-20 box-border-box">
				<view class="align-items-flex-start mb-20">
					<view class="fs-26 fc-3 mr-20 flex-shrink0 pt-15">
						<text class="fc-ff3939">*</text>服务描述 :
					</view>
					<view class="textarea-box flex-1 bgc-F6F6F6 b-rad-16">
						<textarea class="textarea" v-model="formData.serve_desc" maxlength='50'
							:placeholder="errandsData.desc" />
						<view class="fs-24 fc-6 tj-num">
							{{formData.serve_desc.length}}/50
						</view>
					</view>
				</view>
				<view class="align-items-flex-start mb-20">
					<view class="fs-26 fc-3 mr-20 flex-shrink0 pt-15">
						图片介绍 :
					</view>
					<view class="up-img-box align-items-center flex-wrap-wrap">
						<view class="up-img" v-for="(item, index) in formData.images" :key="index">
							<image class="img" :src="item" mode="aspectFill"></image>
							<uni-icons @click="deleteImg(index)" class="delete-icons" color="#000" type="clear"
								size="20"></uni-icons>
						</view>
						<view @click="upImg" v-if="formData.images.length<= 5"
							class="add-img-box flex-direction flex-justify-center align-items-center bgc-F6F6F6">
							<image class="add-img" src="@/static/img/my/sc.png" mode=""></image>
							<view class="fs-20 fc-9">
								上传照片
							</view>
							<view class="fs-20 fc-9">
								(最多6张)
							</view>
						</view>
					</view>
				</view>
				<view class="align-items-flex-start mb-20">
					<view class="fs-26 fc-3 mr-20 flex-shrink0 pt-15">
						<text class="fc-ff3939">*</text>服务地址 :
					</view>
					<view class="textarea-box flex-1 bgc-F6F6F6 b-rad-16">
						<textarea class="textarea" cursor-spacing='30' v-model="formData.serve_address" maxlength='50'
							:placeholder="errandsData.add_str" />
						<view class="fs-24 fc-6 tj-num">
							{{formData.serve_address.length}}/50
						</view>
					</view>
				</view>
				<view class="align-items-center ptb-24 b-b-EFF2F5 mb-20" @click="openAddress">
					<view class="fs-26 fc-3 mr-20 flex-shrink0">
						<text class="fc-ff3939" v-if="errandsData.errands_id != 4">*</text>送达地址 :
					</view>
					<view class="text-overflow-ellipsis-one fs-26" :class="formData.address_id?'fc-0':'fc-9'">
						{{formData.address_id?addressData.school_name + addressData.dorm_name + addressData.address :'选择地址'}}
					</view>
				</view>
				<view class="align-items-center ptb-24 b-b-EFF2F5 mb-20" @click="openTime">
					<view class="fs-26 fc-3 mr-20 flex-shrink0">
						<text class="fc-ff3939">*</text>{{errandsData.time_str}} :
					</view>
					<view class="text-overflow-ellipsis-one fs-26" :class="deliverText?'fc-0':'fc-9'">
						{{deliverText?'预计'+ deliverText+ '送达':'选择'+ errandsData.time_str}}
					</view>
				</view>
				<view class="align-items-center ptb-24 b-b-EFF2F5 mb-20" @click="openItem"
					v-if="errandsData.item && errandsData.item.length>0">
					<view class="fs-26 fc-3 mr-20 flex-shrink0">
						<text class="fc-ff3939">*</text>{{errandsData.item_name}} :
					</view>
					<view class="text-overflow-ellipsis-one fs-26" :class="itemData.item_id?'fc-0':'fc-9'">
						{{itemData.item_id?itemData.name:'选择'+ errandsData.item_name}}
					</view>
				</view>
				<view class="align-items-center ptb-24 b-b-EFF2F5 mb-20">
					<view class="fs-26 fc-3 mr-20 flex-shrink0">
						<text class="fc-ff3939">*</text>是否上楼 :
					</view>
					<view class="fs-26 align-items-center">
						<view class="align-items-center mr-50" @click="isUpClick(0)">
							<uni-icons class="mr-10" v-if="formData.is_up === 0" type="checkbox-filled" size="22"
								color="#4495FD"></uni-icons>
							<uni-icons class="mr-10" v-else type="circle" size="22" color="#000"></uni-icons>
							<view class="fs-28 mr-10">
								否
							</view>
							<view class="fs-28">
								(0元)
							</view>
						</view>
						<view class="align-items-center" @click="isUpClick(1)">
							<uni-icons class="mr-10" v-if="formData.is_up === 1" type="checkbox-filled" size="22"
								color="#4495FD"></uni-icons>
							<uni-icons class="mr-10" v-else type="circle" size="22" color="#000"></uni-icons>
							<view class="fs-28 mr-10">
								是
							</view>
							<view class="fs-28 mr-10 fc-FB3D03">
								￥{{errandsData.up_price}}
							</view>
						</view>
					</view>
				</view>
				<view class="align-items-center ptb-24 b-b-EFF2F5 mb-20">
					<view class="fs-26 fc-3 mr-20 flex-shrink0">
						打赏金额 :
					</view>
					<view class="">
						<input v-model="formData.reward_money" type="digit" cursor-spacing='20' class="uni-input"
							placeholder="自定义金额 0~1000" @blur="amountNum" />
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="bgc-f b-t-F9F9F9 plr-24 box-border-box">
			<view class="but-box align-items-center box-border-box flex-justify-space b-rad-200">
				<view class="but-left align-items-center flex-1 bgc-3 pl-24 box-border-box" @click="openPop">
					<view class="fs-32 fc-FB4845 mr-20 fw-600">
						￥ {{amount}}
					</view>
					<view class="fs-24 fc-f">
						(点击展开明细)
					</view>
				</view>
				<view class="but bgc-5CC2FF fs-26 fc-f text-align-center" @click.stop="goToUrl">
					去下单
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" background-color="#fff"
			:is-mask-click="false">
			<view class="pop-box box-border-box">
				<uni-icons @click="closePop" class="box-close" type="closeempty" size="20"></uni-icons>
				<view class="bgc-f p-24 box-border-box">
					<view class="fs-34 fw-600 mb-20">
						费用明细
					</view>
					<view class="align-items-center flex-justify-space mb-20">
						<view class="fs-28 fc-6">
							基础服务费
						</view>
						<view class="fs-28 fc-0">
							￥ {{errandsData.price}}
						</view>
					</view>
					<view class="align-items-center flex-justify-space mb-20">
						<view class="fs-28 fc-6">
							{{errandsData.item_name}}加价
						</view>
						<view class="fs-28 fc-0">
							￥ {{itemData.price?itemData.price:'0.00'}}
						</view>
					</view>
					<view class="align-items-center flex-justify-space mb-20">
						<view class="fs-28 fc-6">
							上楼加价
						</view>
						<view class="fs-28 fc-0">
							￥ {{formData.is_up === 1?errandsData.up_price:'0.00'}}
						</view>
					</view>
					<view class="align-items-center flex-justify-space">
						<view class="fs-28 fc-6">
							打赏金额
						</view>
						<view class="fs-28 fc-0">
							￥ {{formData.reward_money?(Number(formData.reward_money)).toFixed(2):'0.00'}}
						</view>
					</view>
				</view>
				<view class="p-20 box-border-box bgc-f b-t-F9F9F9">
					<view class="but-box align-items-center box-border-box flex-justify-space b-rad-200">
						<view class="but-left align-items-center flex-1 bgc-3 pl-24 box-border-box" @click="closePop">
							<view class="fs-32 fc-FB4845 mr-20 fw-600">
								￥ {{amount}}
							</view>
						</view>
						<view class="but bgc-5CC2FF fs-26 fc-f text-align-center" @click.stop="goToUrl">
							去下单
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<selectAddressVue ref="selectAddress" @giveAddress='giveAddress'></selectAddressVue>
		<timeVue ref="selectTime" @giveTime='giveTime' @timeAndType='timeAndType'></timeVue>
		<selectModVue ref="selectModRef" @selectData='selectData' :popTitleName='errandsData.item_name'></selectModVue>
	</view>
</template>

<script>
	import selectAddressVue from './confirm-mod/select-address.vue';
	import timeVue from './confirm-mod/time.vue';
	import selectModVue from './run-errands-mod/select-mod.vue';
	import {
		getAddressDefault
	} from '@/api/member.js'
	import {
		errandsBanner,
		errandsServe,
		errandsCreate
	} from "@/api/errands.js"
	import tools from '@/service/tools';
	import {
		upLoadingFileOss
	} from "@/service/upLoadingFile.js"
	export default {
		components: {
			selectAddressVue,
			timeVue,
			selectModVue
		},
		data() {
			return {
				bannerList: [],
				dotStyle: {
					width: 6,
					bottom: 6,
					backgroundColor: 'rgba(51, 51, 51,0.3)',
					border: '1px rgba(0,0,0,0) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(79, 179, 239,0.9)',
					selectedBorder: '1px rgba(0,0,0,0) solid'
				},
				current: 0,
				serveData: [], // 类型
				errandsData: {}, // 类型对应的数据
				formData: {
					errands_id: 0,
					serve_desc: '',
					serve_address: '',
					images: [],
					address_id: '',
					time_type: '',
					serve_time: '',
					item_id: 0,
					is_up: 0,
					reward_money: ''
				},
				deliverText: '',
				addressData: {},
				itemData: {},
				amount: '0.00',
			};
		},
		onShow() {
			let isConfirmAddressFlag = uni.getStorageSync('isConfirmAddressFlag');
			if (isConfirmAddressFlag.flag) {
				this.openAddress(isConfirmAddressFlag);
			}
		},
		onHide() {
			uni.removeStorageSync('isConfirmAddressFlag');
		},
		onUnload() {
			uni.removeStorageSync('isConfirmAddressFlag');
		},
		onLoad(data) {
			this.getAddressDefault();
		},
		mounted() {
			this.getBanner()
			this.getErrandsServe()
		},
		methods: {
			goToUrl() {
				errandsCreate(this.formData).then((res) => {
					if(res.code === 1) {
						uni.redirectTo({
							url: `/pages-takeout/run-errands-mod/pay-page?orderId=${res.data.order_id}`
						});
					}
				})
			},
			isUpClick(num) {
				this.formData.is_up = num
				this.amountNum()
			},
			amountNum() {
				this.amount = 0
				if (this.errandsData.price) {
					this.amount = (Number(this.amount) + Number(this.errandsData.price)).toFixed(2)
				}
				if (this.itemData.price) {
					this.amount = (Number(this.amount) + Number(this.itemData.price)).toFixed(2)
				}
				if (this.formData.is_up === 1) {
					this.amount = (Number(this.amount) + Number(this.errandsData.up_price)).toFixed(2)
				}
				if (this.formData.reward_money) {
					this.amount = (Number(this.amount) + Number(this.formData.reward_money)).toFixed(2)
				}
			},
			openPop() {
				this.$refs.popup.open()
			},
			closePop() {
				this.$refs.popup.close()
			},
			selectData(item) {
				if (item) {
					this.itemData = item
					this.formData.item_id = item.item_id
					this.amountNum()
				}
			},
			openItem() {
				this.$refs.selectModRef.getList(this.formData.item_id, this.errandsData.item);
			},
			openTime() {
				// 选择时间
				this.$refs.selectTime.getList(0, this.errandsData.time);
			},
			timeAndType(type, time) {
				// 时间选择
				this.formData.time_type = type
				this.formData.serve_time = time
				if (type == 1) {
					this.deliverText = '今天' + time
				} else {
					this.deliverText = '明天' + time
				}
				console.log(type, time, '&&&&&&&&&&&&&&&&&&&&&&&&');
			},
			giveTime(e) {
				console.log(e);
			},
			openAddress(addressData) {
				// 选择地址
				if (this.addressData.id) {
					this.$refs.selectAddress.id = this.addressData.id;
				}
				if (addressData && addressData.is_default == 1) {
					this.$refs.selectAddress.id = addressData.id;
					this.$refs.selectAddress.getList(addressData.id);
				} else {
					this.$refs.selectAddress.getList();
				}
			},
			// 获取默认地址
			getAddressDefault() {
				getAddressDefault().then((res) => {
					if (res.code === 1) {
						this.addressData = res.data
						if (this.addressData.id) {
							this.formData.address_id = this.addressData.id;
						}
					}
				})
			},
			giveAddress(e) {
				this.addressData = e;
				this.formData.address_id = this.addressData.id;
			},
			deleteImg(index) {
				this.formData.images.splice(index, 1)
			},
			upImg() {
				uni.chooseImage({
					count: 6,
					sizeType: ["compressed", "camera"],
					sourceType: ["album", "camera"],
					success: (res) => {
						res.tempFiles.forEach((file) => {
							this.uploadingFile(file);
						})
					}
				})
			},
			uploadingFile(file) {
				upLoadingFileOss(file.path).then((res) => {
					if (res) {
						this.formData.images.push(res)
					} else {
						tools.error('图片上传失败')
					}
				})
			},
			serveClick(item) {
				if (this.formData.errands_id === item.errands_id) {
					return
				}
				this.formData.errands_id = item.errands_id
				this.errandsData = item
				this.itemData = {}
				this.deliverText = ''
				this.amountNum()
			},
			getBanner() {
				errandsBanner().then((res) => {
					if (res.code === 1) {
						this.bannerList = res.data;
					}
				})
			},
			getErrandsServe() {
				errandsServe().then((res) => {
					if (res.code === 1) {
						this.serveData = res.data
						this.formData.errands_id = this.serveData[0].errands_id
						this.errandsData = this.serveData[0]
						this.amountNum()
					}
				})
			},
			change(e) {
				this.current = e.detail.current
			},
		},
	}
</script>

<style lang="scss" scoped>
	.pop-box {
		position: relative;
	}

	.box-close {
		position: absolute;
		top: 24rpx;
		right: 22rpx;
	}

	.swiper {
		width: 702rpx;
		height: 280rpx;
		border-radius: 20rpx;

		.swiper-item {
			width: 702rpx;
			height: 280rpx;
			border-radius: 20rpx;
		}
	}

	.item-img {
		width: 60rpx;
		height: 60rpx;
	}

	.up-img {
		width: 150rpx;
		height: 150rpx;
		margin: 0 8rpx 8rpx 0;
		position: relative;

		.img {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}

		.delete-icons {
			position: absolute;
			right: 0;
			top: 0;
		}
	}

	.textarea-box {
		height: 150rpx;
		position: relative;
	}

	.tj-num {
		position: absolute;
		right: 10rpx;
		bottom: 10rpx;
	}

	.textarea {
		width: 100%;
		height: 100%;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.add-img-box {
		width: 150rpx;
		height: 150rpx;
		border: 1px dashed #666;

		.add-img {
			width: 36rpx;
			height: 36rpx;
		}
	}

	.but-box {
		height: 80rpx;
	}

	.but-left {
		height: 100%;
		line-height: 80rpx;
		border-radius: 200rpx 0 0 200rpx;
	}

	.but {
		width: 180rpx;
		height: 100%;
		line-height: 80rpx;
		border-radius: 0 200rpx 200rpx 0;
	}
</style>