OfficeApp/subpkg/townTask/gatherRecords.vue

<template>
	<view class="personnel_list">

		<u-tabs style="background-color: #fff;" :list="tabLists" @click="changeTypeCurrent" lineColor='#0022C7'
			lineWidth='40' inactiveStyle='color:#0022C7' activeStyle="color:#0022C7"></u-tabs>
		<view class="" style="height: 20rpx;">
		</view>
		<view class="card" v-for="(item,index) in gatherList" :key="index" v-show="page==1"
			@click="navgo(`/subpkg/townTask/townGather?type=plant&task_id=${task_id}&index=${index}`)">
			<view class="card_head">
				<view class="">
					养植信息
				</view>
				<view class="">
					点击查看
				</view>
			</view>
			<view class="card_content" @click="navgo(`/subpkg/townTask/townGather?type=supply&task_id=${task_id}`)">
				<view class="" style="margin-bottom: 20rpx;">
					法人姓名: {{item.planting[0].entityName}}
				</view>
				<view class="">
					联系电话: {{item.planting[0].phone}}
				</view>
			</view>
		</view>
		<view class="card" v-for="(item,index) in gatherList" :key="index" v-show="page==2">
			<view class="card_head">
				<view class="">
					批发商信息
				</view>
				<view class="">
					点击查看
				</view>
			</view>
			<view class="card_content">
				<view class="" style="margin-bottom: 20rpx;">
					店主姓名: {{item.supply[0].storeName}}
				</view>
				<view class="">
					联系电话: {{item.supply[0].shopkeeperPhone}}
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="close" :round="10" mode="center" @open="open">
			<view style="padding: 20rpx;">
				<u-button type="primary" @click="navgo(`/subpkg/townTask/townGather?type=plant&task_id=${task_id}`)"
					style="margin-bottom: 20rpx;" color="#0122C7" text="养殖基地信息"></u-button>
				<u-button type="primary" @click="navgo(`/subpkg/townTask/townGather?type=supply&task_id=${task_id}`)"
					text="批发商信息" color="#0122C7"></u-button>


			</view>
		</u-popup>
		<mybtn text="新建信息收集" @click="show=true">
		</mybtn>

	</view>
</template>

<script>
	import mybtn from "@/components/mybtn/mybtn.vue"
	import {
		townMasterTask3List
	} from "@/api/task.js"

	export default {


		data() {
			return {
				show: false,
				gatherList: [],
				page: 1,
				task_id: "",
				tabLists: [{
					name: '镇种养殖基地信息收集表',
					id: 1
				}, {
					name: '镇批发商信息收集表',
					id: 2
				}, ],

			}
		},

		onLoad(option) {
			this.task_id = option.task_id
			townMasterTask3List({
				id: option.task_id
			}).then(res => {

				this.gatherList = res.data.template_info.extend.purchase_sales_info

			})
			// townTask3List()
		},
		methods: {
			open() {
				this.show = true
			},
			close() {
				this.show = false
			},

			navgo(url) {
				uni.navigateTo({
					url
				})
			},
			changeTypeCurrent(e) {
				this.page = e.id
				// if(e.)
				console.log(e.id)
			}
		}


	}
</script>


<style lang="scss">
	.new_btn {
		position: fixed;
		bottom: 28rpx;
		left: 50%;
		transform: translate(-50%);
		margin-top: 32rpx;
		// margin-bottom: 40rpx;
		width: 694rpx;
		height: 84rpx;
		background: $theme-oa-color;
		border-radius: 42rpx 42rpx 42rpx 42rpx;
		color: #fff;
		line-height: 80rpx;
		text-align: center;
	}

	.personnel_list {
		margin-bottom: 130rpx;

		.card {
			margin: 0 auto;
			margin-bottom: 28rpx;
			width: 694rpx;
			background: #ffffff;
			border-radius: 30rpx;
			opacity: 1;
			overflow: hidden;
			// box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);

			.card_head {
				padding: 28rpx;
				background-color: $theme-oa-color;
				color: white;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.card_content {
				padding: 28rpx;


				.left {
					text-align: center;
					// padding: 15rpx 25rpx;
					padding-top: 20rpx;


					width: 160rpx;
					// background-color: $theme-oa-color;
					color: white;
					// border-radius: 40rpx;

					.cir {
						width: 120rpx;
						height: 120rpx;
						background-color: #ffffff;
						margin-left: 25rpx;
						// border-radius: 120rpx;
						position: relative;
					}
				}

				.right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					view {
						text:nth-child(2) {
							margin-left: 20rpx;
						}
					}
				}
			}

			.u_avatar {
				position: absolute;
				top: 50%;
				left: 50%;

				transform: translate(-50%, -50%);
			}



		}



	}
</style>