hwnc/pagesE/pages/plotdetails/plotdetails.vue

<template>
	<view class="container" :class="[AppTheme]">
		<view class="parcel_information" v-if="orderdeleti">
			<view class="mess_deitle_1">
				<view class="soil_mass">
					<image mode="aspectFill" :src="orderdeleti.soil_cover_pic"></image>
				</view>
				<view class="soil_mass_1">
					<view class="soil_mass_2">{{ orderdeleti.soil_name }} {{orderdeleti.subdivision.name}}</view>
					<view class="soil_mass_3">{{orderdeleti.period_time}} 到期</view>
					<view v-if="orderdeleti.status_period==1" class="soil_mass_4 bg-primary"
						@click="renewal(orderdeleti.id)">续 租
					</view>
				</view>
				<view class="soil_mass_5">
					<u-icon name="arrow-right" :bold="true" color="#999" size="16" @click="pkxunzhe()">
					</u-icon>
				</view>
			</view>
			<view class="mess_deitle_2">
				<view class="farm_name">菜园信息（{{orderdeleti.subdivision.area}}）</view>
				<view class="bor_solp"></view>
				<view class="box_form_1">
					<view class="titem" v-for="(item, index) in orderdeleti.seeds" :key="index">
						<view class="titems">
							<view class="titem_1">
								<image mode="aspectFill" :src="item.ripe_pic"></image>
								<view class="titem_2">{{item.seed_name}} ({{item.seed_num+ 'm²'}})</view>
							</view>
							<view class="titem_3" v-if="orderdeleti.status_period==1" @click="cropseed(item.id)">管理
								<u-icon name="arrow-right" :bold="true" color="#999" size="16"></u-icon>
							</view>
						</view>
						<view class="bor_solp"></view>
					</view>
				</view>
				<view class="titems_one" v-if="orderdeleti.totalaera">
					<view class="titems_one_1">
						<image mode="aspectFill" :src="settingFile.root_img+'/static/app/imgs/mine/dis/37.png?t=555'">
						</image>
						<view class="titems_one_2">空闲地块 ({{orderdeleti.totalaera+ 'm²'}})</view>
					</view>
					<view class="titems_one_3" @click="chooseseed()" v-if="orderdeleti.status_period==1">播种
						<u-icon name="arrow-right" :bold="true" color="#999" size="16"></u-icon>
					</view>
				</view>
				<view class="bor_solp"></view>
				<view class="farm_name_1">
					<view class="farm_name_2">菜园装饰</view>
					<view class="farm_name_3" @click="decoration(orderdeleti.id)">土地菜园装饰
						<u-icon name="arrow-right" :bold="true" color="#999" size="16"></u-icon>
					</view>
				</view>
			</view>
			<view class="mess_deitle_3">
				<view class="farm_name_1">
					<view class="farm_name_2">配送信息</view>
					<view class="farm_name_3" @click="navTo('/pagesD/pages/address/address?source=1')">收货地址管理
						<u-icon name="arrow-right" :bold="true" color="#999" size="16"></u-icon>
					</view>
				</view>
				<view class="bor_solp"></view>
				<view v-if="orderdeleti.status_period==1" class="tab_vie" @click="servicesgroup(orderdeleti.soil_id)">
					<view class="vbtn bg-primary">
						<text style="color: #fff;padding: 0rpx 5rpx;">升级服务
							<span style="color: #df0000;padding: 0rpx 15rpx;">  免费配送</span>
						</text>
					</view>
				</view>
				<view v-else class="tab_vie">
					<view class="vbtn" style="background-color: #bdbdbd;">
						<text style="color: #595959;">
							订单不在租赁中
						</text>
					</view>
				</view>
			</view>
			<view class="mess_deitle_4">
				<view class="farm_name">菜园服务</view>
				<view class="bor_solp"></view>
				<view class="box_form_4">
					<view class="farm_name_4" @click="services(orderdeleti.soil_id)">
						<view class="farm_name_5">
							<image mode="aspectFill"
								:src="settingFile.root_img+'/static/app/imgs/mine/dis/32.png?t=199'">
							</image>
							土地服务
						</view>
						<view class="farm_name_6">
							{{orderdeleti.serve_name}}
							<u-icon name="arrow-right" :bold="true" color="#999" size="16"></u-icon>
						</view>
					</view>
					<view class="bor_solp"></view>
					<view class="farm_name_4" @click="register(orderdeleti.soil_id,orderdeleti.subdivision_id)">
						<view class="farm_name_5">
							<image mode="aspectFill"
								:src="settingFile.root_img+'/static/app/imgs/mine/dis/35.png?t=199'">
							</image>
							巡检记录
						</view>
						<view class="farm_name_6">
							<u-icon name="arrow-right" :bold="true" color="#999" size="16"></u-icon>
						</view>
					</view>
					<view class="bor_solp"></view>
					<view class="farm_name_4" @click="navTo('/pages/land/land')">
						<view class="farm_name_5">
							<image mode="aspectFill"
								:src="settingFile.root_img+'/static/app/imgs/mine/dis/37.png?t=1989'">
							</image>
							租赁新土地
						</view>
						<view class="farm_name_6">
							<u-icon name="arrow-right" :bold="true" color="#999" size="16"></u-icon>
						</view>
					</view>
					<view class="bor_solp"></view>
					<view class="farm_name_4" @click="operator(orderdeleti.id)">
						<view class="farm_name_5">
							<image mode="aspectFill"
								:src="settingFile.root_img+'/static/app/imgs/mine/dis/40.png?t=19889'">
							</image>
							订单信息
						</view>
						<view class="farm_name_6">
							<u-icon name="arrow-right" :bold="true" color="#999" size="16"></u-icon>
						</view>
					</view>
					<view class="bor_solp"></view>
					<view class="farm_name_4" @click="orderdetail(orderdeleti.id)">
						<view class="farm_name_5">
							<image mode="aspectFill"
								:src="settingFile.root_img+'/static/app/imgs/mine/dis/38.png?t=19889'">
							</image>
							土地详情
						</view>
						<view class="farm_name_6">
							<u-icon name="arrow-right" :bold="true" color="#999" size="16"></u-icon>
						</view>
					</view>
					<view class="bor_solp"></view>
					<view class="farm_name_4" @click="navTo('/pagesE/pages/user/problem/problem')">
						<view class="farm_name_5">
							<image mode="aspectFill" :src="settingFile.root_img+'/static/app/imgs/mine/dis/33.png'">
							</image>
							常见问题
						</view>
						<view class="farm_name_6">
							<u-icon name="arrow-right" :bold="true" color="#999" size="16"></u-icon>
						</view>
					</view>
					<view class="bor_solp"></view>
					<view class="farm_name_4">
						<view class="farm_name_5">
							<image mode="aspectFill"
								:src="settingFile.root_img+'/static/app/imgs/mine/dis/36.png?t=19889'">
							</image>
							土地巡检员
						</view>
						<view class="farm_name_6">
							<view v-if="orderdeleti.ipc_username&&orderdeleti.ipc_phone" style="font-size: 28rpx;">
								{{orderdeleti.ipc_username}} , {{orderdeleti.ipc_phone}}
							</view>
							<view v-else style="font-size: 28rpx;">无</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view style="height: 40rpx;"></view> -->
			<u-picker :show="show" :columns="soilorder" @cancel='cancel' @confirm='confirm' keyName="label"></u-picker>
		</view>
	</view>
</template>

<script>
	import Landapi from '@/api/land/index.js';
	export default {
		data() {
			return {
				primary: this.$theme.primary,
				settingFile: getApp().globalData.siteinfo,
				//顶部距离
				scrollTop: 0,
				orderdeleti: null,
				customstyle: {
					background: '#F4F6F8'
				},
				wxpay: '微信支付',
				yepay: '余额支付',
				servicemess: [],
				logo: '',
				name: '',
				show: false,
				soilorder: []
			};
		},
		onLoad(options) {

			this.lookorderbyid(options.orderid);
		},
		onReady() {},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			decoration(id) {
				uni.redirectTo({
					url: '/pagesE/pages/seedlist/decoration/decoration?id=' + id
				})
			},
			confirm(e) {
				console.log(e, 'eeeeeee')
				this.show = false
				let orderid = e.value[0].id
				console.log(orderid, 'orderidorderid')
				this.lookorderbyid(orderid)
			},
			cancel() {
				this.show = false
			},
			pkxunzhe() {
				this.show = true
			},
			navTo(url) {
				this.$until.toUrl(url);
			},
			cropseed(id) {
				uni.redirectTo({
					url: '/pagesE/pages/seedlist/crop?id=' + id
				});
			},
			chooseseed() {

				if (this.orderdeleti.serve_type == 3) {
					uni.showToast({
						title: "当前无服务,请升级服务在购买",
						icon: "none"
					})
					return false
				}
				uni.redirectTo({
					url: '/pagesE/pages/seedlist/seedlist?soil=' + JSON.stringify(this.orderdeleti)
				});
			},
			register(id, ids) {
				uni.navigateTo({
					url: '/pagesE/pages/register/register?soil_id=' + id + '&subdivision_id=' + ids
				})
			},
			services(id) {
				uni.navigateTo({
					url: '/pagesB/pages/chooseland/landservice/landservice?soil_id=' + id
				})
			},
			operator(id) {

				uni.navigateTo({
					url: '/pagesE/pages/serviceorder/detaillist/detaillist?soil_id=' + id
				})
			},
			servicesgroup(id) {

				if (this.orderdeleti.serve_type == 1) {
					uni.showToast({
						title: "您已是最高服务，没有可升级服务了",
						icon: "none"
					})
					return false
				} else {
					uni.redirectTo({
						url: '/pagesB/pages/chooseland/landservice/landservice?soil=' + JSON.stringify(this
							.orderdeleti) + '&type=1'
					})
				}

			},
			renewal(id) {
				uni.redirectTo({
					url: '/pagesE/pages/renewal/renewal?orderid=' + id
				})
			},
			orderdetail(id) {
				uni.navigateTo({
					url: '/pagesB/pages/orderdeleti/orderdeleti?orderid=' + id
				})
			},
			//查看服务信息
			seletserbyid(order_sn) {
				let that = this;
				let params = {
					order_sn: order_sn
				};
				Landapi.selordermessbyid(params).then(res => {
					if (res.status == 1) {
						that.servicemess = res.data.data;
						that.logo = res.data.site.logo;
						that.name = res.data.site.name;
						console.log(that.servicemess, "that.servicemess")
					} else {
						// that.$api.msg(res.msg);
					}
				});
			},
			//根据id获取订单信息
			lookorderbyid(orderid) {

				let that = this;
				let parms = {
					id: orderid
				};
				Landapi.lookorderbyids(parms).then(res => {
					console.log(res, "订单信息")
					if (res.status == 1) {
						that.orderdeleti = res.data;
						that.soilorder = res.data.soilorder;

						console.log(that.soilorder, 'that.soilorder')
						that.orderdeleti.serve_price = that.orderdeleti.serve_price + '元';
						that.orderdeleti.period_days = that.orderdeleti.period_days + '天';
						that.orderdeleti.show_price = that.orderdeleti.show_price + '元';
						that.orderdeleti.subdivision.area = that.orderdeleti
							.subdivision.area + 'm²';
						that.orderdeleti.order_money = that.orderdeleti.order_money + '元';
						that.seletserbyid(that.orderdeleti.order_sn);
					} else {
						that.$api.msg(res.msg);
					}
				});
			},
			//计算单种种子总价格
			calculation(price, num) {
				return parseFloat(price) * parseInt(num);
			}
		}
	};
</script>

<style lang="scss">
	table {
		width: 100%;
		border-color: #DFE2E5;
		border-collapse: collapse;
		text-align: center;
		color: #303133;
	}

	table,
	th,
	td {
		border: 1px solid #999;
		padding: 10rpx;
	}

	.container {
		position: relative;

	}

	.head_backn {
		width: 100%;
		z-index: 99;
		padding: 20rpx 20rpx 0rpx 20rpx;

		.icon_view {
			width: 100%;
			text-align: center;
			margin-top: 10rpx;
		}
	}


	.parcel_information {
		// width: 93%;
		// margin: 0 3.5%;

	}

	.mess_deitle {
		width: 100%;
		padding: 30rpx 0;
		margin: 25rpx 0;
		background-color: #ffffff;
		box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
		border-radius: 15rpx;
	}

	.mess_deitle_2 {
		width: 100%;
		padding: 20rpx 0;
		margin: 25rpx 0;
		background-color: #ffffff;

		.farm_name_1 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;

			.farm_name_2 {
				font-size: 32rpx;
			}

			.farm_name_3 {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				color: #999;
				font-size: 28rpx;
				margin-right: 2vh;
			}
		}

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

			.titems_one_1 {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 0 20rpx;

				image {
					width: 80rpx;
					height: 80rpx;
				}

				.titems_one_2 {
					margin-left: 2vh;
					font-size: 30rpx;
				}
			}


			.titems_one_3 {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-right: 4vh;
				font-size: 30rpx;
				color: #999;
			}
		}
	}

	.mess_deitle_3 {
		width: 100%;
		padding: 20rpx 0;
		margin: 25rpx 0;
		background-color: #ffffff;

		.farm_name_1 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;

			.farm_name_2 {
				font-size: 32rpx;
			}

			.farm_name_3 {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				color: #999;
				font-size: 28rpx;
				margin-right: 2vh;
			}
		}

		.tab_vie {

			text-align: center;
			padding: 30rpx 0;
            display: flex;
			justify-content: center;
			.vbtn {
				width: 95%;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 50rpx;
				font-size: 28rpx;
			}
		}
	}


	.mess_deitle_4 {
		width: 100%;
		padding: 20rpx 0;
		margin: 25rpx 0;
		background-color: #ffffff;

		.farm_name_4 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;

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

				image {
					width: 45rpx;
					height: 45rpx;
				}

				font-size: 28rpx;
			}

			.farm_name_6 {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				color: #999;
				font-size: 26rpx;
				margin-right: 2vh;
			}
		}

	}

	.mess_deitle_1 {
		width: 100%;
		padding: 20rpx;
		margin: 25rpx 0;
		background-color: #ffffff;
		box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);

		display: flex;
		justify-content: flex-start;
		align-items: center;

		.soil_mass {

			image {
				width: 150rpx;
				height: 150rpx;
			}
		}

		.soil_mass_1 {
			margin-left: 2vh;
			width: 52%;

			.soil_mass_2 {
				font-size: 30rpx;
				font-weight: 300;

				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.soil_mass_3 {
				font-size: 28rpx;
				color: #999;
				padding: 20rpx 0;
			}

			.soil_mass_4 {
				width: 150rpx;
				line-height: 50rpx;
				height: 50rpx;
				padding: 5rpx;
				text-align: center;
				border-radius: 50rpx;
				font-size: 26rpx;
				color: #fff;
			}
		}

		.soil_mass_5 {
			margin-left: 5vh;
			font-weight: 600;
		}
	}

	.order_item {
		width: 100%;
		margin: 25rpx 0;
		padding: 30rpx 0;
		background-color: #ffffff;
		box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
	}

	.farm_name {
		font-size: 32rpx;
		color: #000;
		padding: 0 20rpx;
	}

	.bor_solp {
		background-color: #999;
		height: 1rpx;
		width: 100%;
		transform: scaleY(0.3);
		margin: 25rpx 0;
	}

	.order_detil {
		padding: 0 20rpx;
		text-align: center;
	}

	.seed_item_thumbnail {
		object-fit: cover;
		border-radius: 10rpx;
		width: 100%;
		height: 300rpx;
	}

	.right_deile {
		width: 100%;
	}

	.article_title_p2 {
		font-size: 26rpx;
		color: #000;
		margin: 15rpx 0;
	}

	.box_form {
		margin: 0 5%;
		width: 95%;
	}

	.box_form_1 {
		padding: 20rpx;

		.titem {
			display: flex;
			flex-direction: column;

			.titems {
				display: flex;
				justify-content: space-between;

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

					image {
						width: 80rpx;
						height: 80rpx;
					}

					.titem_2 {
						margin-left: 2vh;
						font-size: 28rpx;
					}
				}
			}


			.titem_3 {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-right: 2vh;
				color: #999;
				font-size: 28rpx;
			}
		}
	}

	.u-border-bottom:after,
	.u-border-left:after,
	.u-border-right:after,
	.u-border-top-bottom:after,
	.u-border-top:after,
	.u-border:after {
		border-bottom-color: #999;
	}

	.tab_vie {
		padding-left: 15rpx;
		padding-right: 15rpx;

		.theard {
			display: flex;
			padding: 10rpx;
			justify-content: space-evenly;
			// background-color: #d5d5d5;
		}

		.titem {
			display: flex;
			padding-top: 25rpx;
			font-size: 26rpx;
			color: #767676;
			justify-content: space-evenly;

			.titem_1 {

				image {
					width: 150rpx;
					height: 150rpx;
				}
			}
		}

		.td {
			width: 25%;
			text-align: center;
		}
	}

	.all_box {
		padding: 0 5%;
		background-color: #ffffff;

		.time_1 {
			float: right;
			margin-top: 20px;
			color: #999;
			font-size: 25rpx;

		}

		.album {
			@include flex;
			align-items: flex-start;

			&__avatar {
				background-color: $u-bg-color;
				padding: 5px;
				border-radius: 3px;
			}

			&__content {
				margin-left: 10px;
				flex: 1;
			}
		}
	}

	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 28rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 26rpx;
		margin: 15rpx 0;
	}

	.u-order-time {
		font-size: 26rpx;
		color: #000;
	}

	.imgitem {
		width: 120rpx;
		height: 120rpx;
	}

	.wl_statui {
		color: #2979ff;
		width: 100%;
		padding-top: 5rpx;
		padding-bottom: 5rpx;
		font-size: 22rpx;
		background-color: rgba(41, 121, 255, 0.2);
		line-height: 27rpx;
	}
</style>