zh_order_food_xcx/pages-takeout/run-errands.vue

<template>
	<view class="flex-common-css iPhone-bottom box-border-box p-24">
		<Nav title="跑腿代拿" leftIconColor="#333" titleColor="#333"></Nav>
		<scroll-view :scroll-y="true" class="scroll-view-css">
			<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='100' :placeholder="errandsData.desc" />
					</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" v-if="errandsData.errands_id != 2">
					<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_address" maxlength='100' :placeholder="errandsData.add_str" />
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		errandsBanner,
		errandsServe
	} from "@/api/errands.js"
	import tools from '@/service/tools';
	import {
		upLoadingFileOss
	} from "@/service/upLoadingFile.js"
	export default {
		components: {},
		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: '',
					images: []
				}
			};
		},
		onLoad(data) {},
		mounted() {
			this.getBanner()
			this.getErrandsServe()
		},
		methods: {
			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
			},
			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]
					}
				})
			},
			change(e) {
				this.current = e.detail.current
			},
		},
	}
</script>

<style lang="scss" scoped>
	.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: 200rpx;
	}

	.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;
		}
	}
</style>