deming/pageE/tool/WashOrder.vue

<template>
	<view class="wash-order">
		<view>
			<u-tabs-swiper ref="tabs" :list="list" :is-scroll="false" active-color="#FF780F" :current="current" font-size="32" :show-bar="false" @change="tabsChange" height="88"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @animationfinish="animationfinish" class="aaa" :style="{ minHeight: swiperHeight }">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="order-info">
						<view class="order-name" @click="showPopup=true">
							<view class="title titles" >
								<text>选择订单:</text>
								<image src="../../static/image/shop/2.png" mode=""></image>
							</view>
							<!-- <u-icon name="arrow-dwon" color="#2979ff" size="28"></u-icon> -->
						</view>
						<view class="choose-info" v-if="choose">
							<view class="store">
								<view>
									<image :src="checkedGoods.store.store_avatar"></image>{{ checkedGoods.store.store_name }}
								</view>
								<view>
									订单编号：{{ checkedGoods.order_sn }}
								</view>
							</view>
							<view class="store_info">
								<view class="info_img">
									<image :src="checkedGoods.goods.goods_image" mode="">
								</view>
								<view class="info_txt">
									<view class="content u-line-2">
										{{ checkedGoods.goods.goods_name }}
									</view>
									<view class="much">
										<text>￥{{ checkedGoods.goods.goods_pay_price }}</text>
										<text>x{{ checkedGoods.goods.goods_num }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="order-view order-phone">
							<view class="title">衣服状况:</view>
							<input type="text" v-model="goodsStatus" />
						</view>
						<view class="order-view order-type" @click="showClothesType=true">
							<view class="title">商品类型:</view>
							<input type="text" v-model="type.label" disabled />
						</view>
						<view class="order-view order-name">
							<view class="title">送洗人:</view>
							<input type="text" v-model="name" />
						</view>
						<view class="order-view order-phone">
							<view class="title">手机号:</view>
							<input type="text" v-model="phone" maxlength="11" />
						</view>
						<view class="order-view order-area" @click="showAddress=true">
							<view class="title">省市区:</view>
							<input type="text" v-model="area" disabled />
						</view>
						<view class="order-view order-address">
							<view class="title">详细地址:</view>
							<input type="text" v-model="address" />
						</view>
					</view>
					<view class="upload-image">
						<view class="title">上传商品图片</view>
						<u-upload 
							ref="platform"
							:custom-btn="true" 
							:max-count="count"
							:action="uaction"
							:auto-upload="false"
							:header="uheader"
							:form-data="uformData"
							:name="uname"
							@on-uploaded="setImageList"
						>
							<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
								<image src="../static/mine/27.png"></image>
							</view>
						</u-upload>
					</view>
					<view class="wash-btn" @click="$u.throttle(submitImage, 2000)">确认送洗</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="order-info">
					<view class="order-view order-name">
						<view class="title">商品名称:</view>
						<input type="text" v-model="goodsName" />
					</view>
					<view class="order-view order-phone">
						<view class="title">衣服状况:</view>
						<input type="text" v-model="goodsStatus" />
					</view>
					<view class="order-view order-phone" @click="showClothesType=true">
						<view class="title">商品类型:</view>
						<input type="text" v-model="type.label" disabled />
					</view>
					<view class="order-view order-name">
						<view class="title">送洗人:</view>
						<input type="text" v-model="name" />
					</view>
					<view class="order-view order-phone">
						<view class="title">手机号:</view>
						<input type="text" v-model="phone" maxlength="11" />
					</view>
					<view class="order-view order-area" @click="showAddress=true">
						<view class="title">省市区:</view>
						<input type="text" v-model="area" disabled />
					</view>
					<view class="order-view order-address">
						<view class="title">详细地址:</view>
						<input type="text" v-model="address" />
					</view>
				</view>
				<view class="upload-image">
					<view class="title">上传商品图片</view>
					<u-upload 
						ref="physical"
						:custom-btn="true" 
						:max-count="count"
						:action="uaction"
						:auto-upload="false"
						:header="uheader"
						:form-data="uformData"
						:name="uname"
						@on-uploaded="setImageList"
					>
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<image src="../static/mine/27.png"></image>
						</view>
					</u-upload>
				</view>
				<view class="wash-btn" @click="$u.throttle(submitImage, 2000)">确认送洗</view>
			</swiper-item>
		</swiper>
		<u-select v-model="showClothesType" :list="typeList" value-name="id" label-name="name" @confirm="confirmType" mode="single-column"></u-select>
		<u-select v-model="showAddress" 
				mode="mutil-column-auto" 
				:list="areaList" 
				value-name="area_id" 
				label-name="area_name" 
				child-name="_child" 
				@confirm="setArea"
				:safe-area-inset-bottom="true">
		</u-select>
		<u-popup v-model="showPopup" mode="bottom" border-radius="20">
			<view class="order-popup">
				<view class="check">
					<text>选择订单</text>
					<u-icon name="close" color="#A29FA3" size="32" @click="showPopup=false"></u-icon>
				</view>
				<scroll-view scroll-y class="order-list" @scrolltolower="onreachBottom">
					<u-radio-group v-model="value" @change="radioChange">
						<view v-for="(items, index) in orderList" :key="index" class="order-item">
							<view class="store">
								<view class="name">
									<image :src="items.extend_store.store_avatar" mode=""></image>
									<text>{{ items.store_name }}</text>
								</view>
								<view class="order-sn">
									订单编号：{{ items.order_sn }}
								</view>
							</view>
							<view class="checkd">
								<label class="radio-view" v-for="(item, index) in items.extend_order_goods" :key="index">
									<view class="radio">
										<u-radio color="#F0AD4E" :name="items.order_id + ' ' + item.goods_id" active-color="#FF780F" icon-size="24" shape="circle"></u-radio>
									</view>
									<view class="store_info">
										<view class="info_img">
											<image :src="item.goods_image" mode="">
										</view>
										<view class="info_txt">
											<view class="content u-line-2">
												{{ item.goods_name }}
											</view>
											<view class="much">
												<text>￥{{ item.goods_pay_price }}</text>
												<text>x{{ item.goods_num }}</text>
											</view>
										</view>
									</view>
								</label>
							</view>
						</view>
					</u-radio-group>
					<u-loadmore :status="loadStatu" bgColor="#FFFFFF" font-size="14" margin-top="20" margin-bottom="20"></u-loadmore>
				</scroll-view>
				<view class="order-btn" @click="confirm">确认</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
export default {
	data() {
		return {
			// items: [],
			count: 4, // 最大图片数量
			type: {}, // 商品类型
			name: '', // 送洗人
			phone: '', // 手机号
			area: '', // 省市区
			goodsStatus: '', // 衣服状况
			address: '',　// 详细地址
			goodsName: '', // 商品名称
			list: [{
				name: '平台历史订单'
			}, {
				name: '实体店历史订单'
			}],
			typeList: [], // 商品类型列表
			orderList: [], // 商品列表
			page: 1,
			current: 0,
			swiperCurrent: 0,
			areaList: [], //　地址列表
			showClothesType: false,
			showAddress: false,
			showPopup : false,
			swiperHeight: '',
			value: '', // radio
			checkedGoods: {}, // 选中的商品
			choose: false, // 是否选择了商品
			filesArr: [], // 选择的图片
			uploadImage: [], // 图片名称(后台返回)列表
			uaction: this.$u.http.config.baseUrl + '/Upload/uploadfile', // 下面是上传图片的参数
			uheader: {
				"authorization": 'Bearer' + " " + uni.getStorageSync('token')
			},
			uname: 'common',　// 与formData name 一样
			uformData: {
				name: 'common', // 其他图片
			},
			debounce: true,
			timer: true,
			loadStatu: 'loadmore'
		}
	},
	onShow() {
		this.debounce = true;
		// this.current = 0;
		// this.swiperCurrent = 0;
		this.showPopup = false;
	},
	onLoad() {
		this.getOrderList();
		this.setViewHeight();
		this.getAreaData();
		this.getClothesTypeList();
	},
	watch: {
		swiperCurrent() {
			this.goodsStatus = '';
			this.type = {};
			this.name = '';
			this.phone = '';
			this.area = '';
			this.address = '';
			this.choose = false;
		}
	},
	methods: {
		getClothesTypeList() {
			this.$u.api.getClothesTypeList().then(res => {
				if (res.errCode == 0) {
					this.typeList = res.data.typeList;
				} else {
					this.typeList = [];
				}
				// console.log(this.typeList);
			})
		},
		confirmType(e) {
			// console.log(e);
			this.type = e[0];
		},
		onreachBottom() {
			if(!this.timer) return false;
			this.timer = false;
			this.loadStatu = "loading";
			this.page++;
			this.getOrderList({ load: 'loadmore' }).then(length => {
				if(length == 0) {
					this.page--;
					this.loadStatu = "nomore";
				} else {
					this.loadStatu = "loadmore";
				}
			}).catch(() => {
				this.loadStatu = "nomore";
				this.page--;
			})
		},
		async getOrderList({ load = 'reload' } = {}) {
			const res = await this.$u.api.getSendOrderList({
				page: this.page,
			})
			this.timer = true;
			if(res.errCode == 0) {
				if(load == 'reload') this.orderList = res.data;
				else this.orderList.push(...res.data);
			}
			return res.data.length;
		},
		submitImage() {
			// console.log(222);
			if(!this.debounce) return false;
			// console.log(111);
			this.debounce = false;
			this.current == 0 ? this.$refs.platform.upload() : this.$refs.physical.upload();
		},
		tabsChange(index) {
			this.swiperCurrent = index;
		},
		setImageList(lists) {
			// console.log(lists);
			let imageList = [];
			lists.forEach(res => {
				if(res.response.errCode == 0) imageList.push(res.response.data.file_name);
			})
			// console.log(imageList);
			this.filesArr = imageList;
			// console.log(this.filesArr);
			this.confirmSend();
		},
		validationParams() {
			if (this.current == 1) {
				if(this.$u.test.isEmpty(this.goodsName)) {
					this.$u.toast('商品名称不能为空');
					return false;
				}
			}
			if(this.current == 0) {
				if(JSON.stringify(this.checkedGoods) == '{}') {
					this.$u.toast('订单不能为空');
					return false;
				}
			}
			if(this.$u.test.isEmpty(this.goodsStatus)) {
				this.$u.toast('衣服状况不能为空');
				return false;
			}
			if(JSON.stringify(this.type) == '{}') {
				this.$u.toast('商品类型不能为空');
				return false;
			}
			if(this.$u.test.isEmpty(this.name)) {
				this.$u.toast('送洗人不能为空');
				return false;
			}
			if(this.$u.test.isEmpty(this.phone)) {
				this.$u.toast('手机号不能为空');
				return false;
			}
			if(!this.$u.test.mobile(this.phone)) {
				this.$u.toast('手机号错误');
				return false;
			}
			if(this.$u.test.isEmpty(this.area)) {
				this.$u.toast('地址不能为空');
				return false;
			}
			if(this.$u.test.isEmpty(this.address)) {
				this.$u.toast('详细地址不能为空');
				return false;
			}
			return true;
		},
		confirmSend() {
			if(!this.validationParams()) return false;
			let params = {
				tid: this.type.value,
				member_name: this.name,
				area_info: this.area,
				address_info: this.address,
				goods_images: this.filesArr,
				member_phone: this.phone,
				condition: this.goodsStatus,
			}
			if(this.current == 0) {
				Object.assign(params, {
					type: 1,
					order_id: this.checkedGoods.order_id,
					goods_id: this.checkedGoods.goods.goods_id,
				});
			} else if(this.current == 1) {
				Object.assign(params, {
					type: 2,
					goods_name: this.goodsName,
				});
			}
			// console.log(params);
			this.$u.api.sendLaundrySave(params).then(res => {
				// this.$u.toast(res.message);
				if(res.errCode == 0) {
					this.$refs.uToast.show({
						title: res.message,
						back: true,
					})
				} else {
					this.$u.toast(res.message);
					this.debounce = true;
				}
			})
		},
		radioChange(e){
			const ids = e.split(" ");
			// console.log(ids)
			let checkedGoods;
			this.orderList.forEach(order => {
				if(order.order_id == ids[0]) {
					checkedGoods = {
						store: order.extend_store,
						order_sn: order.order_sn,
						order_id: order.order_id,
						reciver_info: order.extend_order_common.reciver_info,
						reciver_name: order.extend_order_common.reciver_name
					}
					order.extend_order_goods.forEach(goods => {
						if(goods.goods_id == ids[1]) {
							Object.assign(checkedGoods, { goods: goods });
							this.checkedGoods = checkedGoods;
						}
					})
				}
			})
			this.setDefaultValue();
		},
		setDefaultValue() {
			this.name = this.checkedGoods.reciver_name;
			this.phone = this.checkedGoods.reciver_info.mob_phone;
			this.area = this.checkedGoods.reciver_info.area;
			this.address = this.checkedGoods.reciver_info.street;
		},
		setArea(area) {
			// console.log(area);
			this.area_id = area[0].value;
			this.city_id = area[1].value;
			let temp = '';
			area.forEach(e => {
				temp += e.label;
			});
			this.area = temp;
		},
		getAreaData() {
			this.$u.api.getArea().then((res)=>{
				if (res.errCode == 0) {
					this.areaList = res.data;
				} else {
					this.areaList = [];
				}
			})
		},
		animationfinish(e) {
			// 可重新提交订单
			this.debounce = true;
			let current = e.detail.current;
			this.swiperCurrent = current;
			this.current = current;
		},
		setViewHeight() {
			const res = uni.getSystemInfoSync();
			this.swiperHeight = res.windowHeight - (res.windowWidth / 750) * 88 + 'px';
		},
		confirm(e){
			this.showPopup = false;
			if(JSON.stringify(this.checkedGoods) != '{}'){
				this.choose = true;
			}else{
				this.choose = false;
			}
		},
	},
};
</script>
<style lang="scss" scoped>
.wash-order {
	height: calc(100vh - 1rpx);
	overflow: hidden;
	border-top: 1rpx solid #ECECEC;
	> uni-swiper {
		flex: 1;
		// height: 95vh;
	}
    .aaa {
        overflow-y: scroll;
    }
	.order-info {
		.choose-info{
			display: flex;flex-wrap: wrap;
			height: 335rpx;
			.store{
				>view{
					>image {
						width:60rpx;
						height:60rpx;
						border-radius: 50%;
						vertical-align: middle;
						margin-right: 12rpx;
					}
				}
				font-size: 28rpx;
				color:rgba(51,51,51,1);
				line-height: 60rpx;
			}
			.store_info{
				display: flex;
				flex-wrap: nowrap;
				width: 100%;
				height: 150rpx;
				.info_img {
					>image {
						width: 180rpx;
						height: 160rpx;
						background-color: aqua;
						border-radius: 10rpx;
					}
				}
				.info_txt {
					padding-left: 30rpx;
					padding-right: 30rpx;
					display: flex;
					flex-wrap: wrap;
					width: 100%;
					.content {
						height: 74rpx;
						line-height: 37rpx;
						font-size: 30rpx;
						color:rgba(51,51,51,1);
					}
					.much{
						display: flex;
						justify-content: space-between;
						width: 100%;
					}
				}
			}
		}
		> view {
			width: 750rpx;
			height: 98rpx;
			background: rgba(255,255,255,1);
			padding: 35rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 2rpx;
				background-color: #ECECEC;
			}
			.title {
				font-size: 30rpx;
				color: rgba(51,51,51,1);
				margin-right: 10rpx;
			}
			.titles {
				font-size: 30rpx;
				color: rgba(51,51,51,1);
				margin-right: 10rpx;
				display: flex;
				width: 100%;
				justify-content: space-between;
				align-items: center;
				>image{
					width: 27rpx;
					height: 12rpx;
				}
			}
			> input {
				flex: 1;
			}
			
		}
		.order-area {
			.location {
				margin-left: 20rpx;
				text-align: center;
				font-size: 22rpx;
				color: rgba(255,120,15,1);
				> image {
					width: 26rpx;
					height: 32rpx;
					margin-bottom: 10rpx;
				}
			}		
		}
		.order-view {
			.title {
				width: 140rpx;
				font-size: 30rpx;
				color: rgba(51,51,51,1);
				margin-right: 10rpx;
			}
			> input {
				text-align: left;
			}
		}
	}
	.upload-image {
		padding: 35rpx 30rpx;
		.title {
			font-size: 30rpx;
			color: rgba(51,51,51,1);
			margin-bottom: 34rpx;
		}
		.slot-btn {
			width: 140rpx;
			height: 140rpx;
			background: rgba(236,236,236,1);
			border-radius: 10rpx;
			text-align: center;
			> image {
				width: 54rpx;
				height: 49rpx;
				margin-top: 48rpx;
			}
		}
	}
	.bottom_btn{
		position: fixed;
		width: 100%;
		height: 100rpx;
		bottom: 0;
	}
	.wash-btn {
		width: 690rpx;
		height: 98rpx;
		background: rgba(255,120,15,1);
		border-radius: 49rpx;
		margin: 30rpx auto 30rpx;
		font-size: 36rpx;
		color:rgba(255,255,255,1);
		text-align: center;
		line-height: 98rpx;
	}
	.order-popup {
		.check{
			padding: 30rpx;
			border-bottom: 1rpx solid rgba(236, 236, 236, 1);
			display: flex;
			align-items: center;
			justify-content: space-between;
			> text {
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(51,51,51,1);
			}
		}
		.order-list {
			height: 60vh;
			padding: 30rpx;
			box-sizing: border-box;
			.order-item {
				margin-bottom: 30rpx;
				.store {
					.name {
						margin-bottom: 20rpx;
						font-size: 28rpx;
						color:rgba(51,51,51,1);
						> image {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
							vertical-align: middle;
							margin-right: 13rpx;
						}
					}
					.order-sn {
						margin-bottom: 20rpx;
						font-size: 24rpx;
						color: rgba(153,153,153,1);
					}
				}
				.checkd {
					.radio-view {
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;
						.radio {
							margin-right: 20rpx;
						}
						.store_info {
							display: flex;
							flex-wrap: nowrap;
							width: 100%;
							.info_img{
								>image{
									width: 180rpx;
									height: 160rpx;
									background-color: aqua;
									border-radius: 10rpx;
								}
							}
							.info_txt{
								padding-left: 30rpx;
								padding-right: 30rpx;
								display: flex;
								flex-wrap: wrap;
								width: 100%;
								.content{
									height: 74rpx;
									line-height: 37rpx;
									font-size: 30rpx;
									color:rgba(51,51,51,1);
								}
								.much{
									display: flex;
									justify-content: space-between;
									width: 100%;
								}
							}
						}
					}
				}
			}
		}
		.order-btn {
			width: 690rpx;
			height: 98rpx;
			background: rgba(255,120,15,1);
			border-radius: 49rpx;
			line-height: 98rpx;
			text-align: center;
			margin: 0 auto 40rpx;
			font-size: 36rpx;
			color: rgba(255,255,255,1);
		}
	}
}
</style>