hwnc/pagesB/pages/updateorder/changeseed.vue

<template>
	<view :class="[AppTheme]" class="contrin">
		<!-- 头部切换 -->
		<view class="head_case bg-primary">
			<view class="head_case_item" @click="caseheaditem(index)" v-for="(item, index) in typeset" :key="index"
				:class="[senumber === index ? 'head_case_item_back' : '']">
				<u-icon :name="item.iconname" :color="setbackcolor(index)" size="45"></u-icon>
				<view class="head_case_title">
					{{ item.casetitle }}
					<text v-if="index === 0">{{ landareanum }}㎡</text>
				</view>
			</view>
		</view>
		<!-- 种子列表 -->
		<view class="seedlist" v-if="senumber === 0">
			<view class="seed_item" v-for="(item, index) in orderseedlist" :key="index">
				<image class="seeditem_thumbnail" :src="item.seeditem.ripe_pic" mode="aspectFill"></image>
				<view class="seeditem_deti">
					<view class="seeditem_deti_title">{{ item.seeditem.seed_name }}</view>
					<view class="seeditem_deti_subtitle">
						最低种植：{{ item.seeditem.min_plant_area }}㎡；产量：{{ item.seeditem.seed_yield }}kg/㎡</view>
					<view class="priceanum">
						<view class="sedprice text-neutral">￥{{ item.seeditem.price }}</view>
						<view class="unumber_box">
							<!-- <u-number-box v-model="item.seednum" @plus="plus(item,index)" @minus="mixin(item,index)" :max="num"></u-number-box> -->
							<u-icon size="35" color="#222" name="minus" @click="changeseednum('minus', index)"></u-icon>
							<view class="unumnum">{{ item.seednum }}</view>
							<u-icon size="35" color="#222" name="plus" @click="changeseednum('plus', index)"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class=""></view>
		<!-- 待播种 -->
		<view v-if="senumber === 1" class="seedlist">待播种</view>
		<!-- 种植中 -->
		<view v-if="senumber === 2" class="seedlist">种植中</view>
		<!-- 已成熟 -->
		<view v-if="senumber === 3" class="seedlist">已成熟</view>
		<view class="vacantplot">
			<view class="title_price">
				<view class="footer_case_title">空闲地块</view>
				<view class="footer_case_price">已选:{{ seedarea() }}/{{ landareanum }}㎡,总计:{{ seedtariff() }}元</view>
			</view>
			<u-button class=" button bg-linear-gradient" type="success" shape="square" size="medium"
				@click="configseed()">确认</u-button>
		</view>
		<!-- 通知 -->
		<view class="load_window">
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	import Landapi from '@/api/land/index.js';
	export default {
		data() {
			return {
				primary: this.$theme.primary,
				settingFile: getApp().globalData.siteinfo,
				// 订单信息
				ordermess: {},
				// 空闲土地面积
				landareanum: 0,
				//当前选中类型下标
				senumber: 0,
				typeset: [{
					casetitle: '空闲土地',
					iconname: 'hourglass-half-fill'
				}],
				//种子列表
				seeddatalist: [],
				//选中种子
				orderseedlist: [],
				// 选择完毕种子后订单信息
				seedordermy: {},
				//追加种子订单
				addseedparams: null,
				orderseed: {}
			};
		},
		onLoad(options) {
			let params = JSON.parse(options.params);
			this.orderseed = params.seeds;
			this.landareanum = parseInt(params.selelanditemtext.area);
			this.vueinit();
			this.getList();
		},
		methods: {
			//初始化页面所需数据
			vueinit() {
				var that = this;
				// that.ordermess = that.$store.state.landleaseorder;
			},
			//进入页面获取种子数据
			getList() {
				var that = this;
				Landapi.seed_list({
					type: that.senumber + 1,
					p: 1
				}).then(res => {
					if (res.status == 1) {

						that.orderseedlist = [];
						that.seeddatalist = res.data;
						that.seeddatalist.forEach((item, index) => {
							that.orderseedlist.push({
								//种子详情
								seeditem: item,
								//种植面积
								seednum: 0
							});
						});
						that.orderseed.forEach((item, index) => {
							that.orderseedlist.forEach((item2, index2) => {
								if (item.seeditem.id === item2.seeditem.id) {
									that.orderseedlist[index2].seednum = that.orderseed[index]
										.seednum + that.orderseedlist[index2].seednum;
								}
							});
						});
					} else {
						that.$api.msg('获取种子数据失败!');
					}
				});
			},
			//设置图标颜色
			setbackcolor(senumber) {
				if (senumber === this.senumber) {
					return '#FFFFFF';
				} else {
					return '#56AB2F';
				}
			},
			//切换选中模块
			caseheaditem(senumber) {
				this.senumber = senumber;
				this.getList();
			},
			//更改步进器值
			changeseednum(changtype, index) {
				var that = this;
				if (that.orderseedlist.length > 0) {
					if (changtype === 'minus') {
						if (that.orderseedlist[index].seednum > that.orderseedlist[index].seeditem.min_plant_area) {
							that.orderseedlist[index].seednum = that.orderseedlist[index].seednum - 1;
						} else {
							if (that.orderseedlist[index].seednum - that.orderseedlist[index].seeditem.min_plant_area >=
								0) {
								that.orderseedlist[index].seednum = that.orderseedlist[index].seednum - that.orderseedlist[
									index].seeditem.min_plant_area;
							}
						}
					} else if (changtype === 'plus') {
						let ocedlandarea = 0;
						that.orderseedlist.forEach((item, index) => {
							ocedlandarea = ocedlandarea + item.seednum;
						});
						//判断当前可用面积是否有剩余
						if (ocedlandarea < that.landareanum) {
							//判断是否满足最低种植面积，满足则每次+1，否则补充为最低种植面积
							if (that.orderseedlist[index].seednum >= that.orderseedlist[index].seeditem.min_plant_area) {
								//判断土地是否满足增加种植量
								if (that.landareanum - ocedlandarea >= 1) {
									that.orderseedlist[index].seednum = that.orderseedlist[index].seednum + 1;
								} else {
									that.$refs.uToast.show({
										title: '该地块可用面积不足了~',
										type: 'error'
									});
								}
							} else {
								//判断土地是否满足增加最低种植量
								if (that.landareanum - ocedlandarea >= that.orderseedlist[index].seeditem.min_plant_area) {
									that.orderseedlist[index].seednum = that.orderseedlist[index].seednum + that
										.orderseedlist[index].seeditem.min_plant_area;
								} else {
									that.$refs.uToast.show({
										title: '该地块可用面积不足了~',
										type: 'error'
									});
								}
							}
						} else {
							that.$refs.uToast.show({
								title: '该地块选择的种子已经够了，可以下单了~',
								type: 'success'
							});
						}
					}
				}
			},
			//反馈信息
			showToast(type, promptstatement) {
				var that = this;
				that.$refs.uToast.show({
					type: type,
					title: promptstatement
				});
			},

			// 实时计算已选种子占用土地面积
			seedarea() {
				var comattribute = 0;
				this.orderseedlist.forEach(item => {
					comattribute = comattribute + item.seednum;
				});
				return comattribute;
			},
			// 实时计算已选种子总金额
			seedtariff() {
				var comattribute = 0;
				this.orderseedlist.forEach(item => {
					comattribute += item.seednum * parseInt(item.seeditem.price);
				});
				return comattribute;
			},
			//确定选择完毕种子
			configseed() {
				var that = this;
				let orderlist = that.orderseedlist;
				that.orderseedlist = [];
				orderlist.forEach((item, index) => {
					if (item.seednum !== 0) {
						that.orderseedlist.push(item);
					}
				});
				that.seedordermy = {
					seedtariff: that.seedtariff(),
					seedarea: that.seedarea(),
					allarea: that.landareanum,
					orderseedlist: that.orderseedlist
				};
				that.ordermess.seedordermy = that.seedordermy;
				let params = {
					setupseed: true,
					ordermess: that.ordermess
				};
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				if (prevPage.$vm) {
					prevPage.$vm.ordermess.seedordermy = that.ordermess.seedordermy; //修改上一页data里面的sercode参数值
					prevPage.$vm.calprice();
				}
				uni.navigateBack({
					//uni.navigateTo跳转的返回，默认1为返回上一级
					delta: 1
				});
			}
		}
	};
</script>

<style lang="scss">
	.contrin {
		background-color: #fafafa;
		min-height: 100vh;
	}

	.head_case {
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
	}

	.head_case_item {
		width: 100%;
		text-align: center;
		padding: 25rpx 0;
	}

	.head_case_title {
		font-size: 24rpx;
		margin-top: 15rpx;
	}

	.head_case_item_back {
		// background-color: #56ab2f;
		color: #ffffff;
	}

	.seedlist {
		margin: 0 2.5%;
		width: 95%;
	}

	.seed_item {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin: 25rpx 0;
		background-color: #ffffff;
		border-radius: 15rpx;
		box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
	}

	.seeditem_thumbnail {
		width: 220rpx;
		height: 220rpx;
		border-radius: 10rpx;
	}

	.seeditem_deti {
		margin-left: 35rpx;
	}

	.seeditem_deti_title {
		color: #000000;
		font-size: 30rpx;
	}

	.seeditem_deti_subtitle {
		font-size: 26rpx;
		color: #999999;
		margin: 25rpx 0 50rpx 0;
	}

	.priceanum {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.sedprice {
		// color: red;
		font-size: 32rpx;
		font-weight: 800;
	}

	.load_window {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 100%;
		transform: translate(-50%, -50%);
	}

	.unumber_box {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.unumnum {
		font-size: 28rpx;
		color: rgb(50, 50, 51);
		margin: 0 25rpx;
	}

	.vacantplot {
		position: fixed;
		width: 100%;
		padding: 10rpx 20rpx;
		bottom: env(safe-area-inset-bottom);
		background-color: #FFFFFF;
		// background: transparent;
		display: flex;
		justify-content: space-between;

		.button {
			color: #fff;
		}
	}

	.title_price {}

	.footer_case_title {
		font-size: 30rpx;
		color: #000000;
	}

	.footer_case_price {
		font-size: 24rpx;
		color: #666;
		margin-top: 10rpx;
	}
</style>