dccloud/uni-app-front/pages/template/SelectRelationContract/SelectRelationContract.vue

<template>
	<view> 
		<uni-forms ref="form" @submit="submitForm">
			<uni-list>
				<radio-group @change="radioChange">
					<uni-list-item v-for="(item,index) in contractList" :key="index">
						<!-- 自定义 header -->
						<view slot="header" class="slot-box-header">
							<radio :value="item.contractCode" />
						</view>
						<!-- 自定义 body -->
						<view slot="body" class="slot-box-body">
							{{item.contractName}}
						</view>
						<!-- 自定义 footer-->
						<view slot="footer" class="slot-box-footer">
							{{item.contractDate}}
						</view>
					</uni-list-item>
				</radio-group>
			</uni-list>
			<view class="uni-btn-v uni-column">
				<button type="primary" form-type="submit" style="border-radius: 15px;">选择成功，确认</button>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	import {
		GetRelationRequistionContract
	} from "@/common/api/requisitionApi.js";
	export default {
		data() {
			return {
				contractList: [],
				radioValue: [],
				searchVal: ''
			}
		},
		onLoad: function() {
			//console.info('授权');
			//console.info(this.$auth);
			this.$util.persistLogin(this);
		},
		created: function() {

			this.getcontractList();
		},
		methods: {
			getcontractList: function() {
				var that = this;
				let projectcode = this.$store.state.projectCode;
				let requisitionCode=this.$util.getQuery("requisitionCode");
				
				uni.showLoading({
					title: "页面努力加载中，请稍候...",
					mask: true
				});
				GetRelationRequistionContract(projectcode, requisitionCode).then((res) => {
					uni.hideLoading();
					console.info('GetRelationRequistionContract', res);
					//console.info(projectCode);
					//console.info(res);
					//return;
					res.forEach(function(item, index, array) {
						item.contractDate=item.contractDate.substring(0,10);
						that.$set(that.contractList, index, item);
					});
					//console.info(that.contractList);
				});
			},
			radioChange: function(evt) {
				//console.info(evt);
				//console.info(evt.target.value);
				//console.info('contractList',this.contractList);
				for (let i = 0; i < this.contractList.length; i++) {
					if (this.contractList[i].contractCode === evt.target.value) {
						console.info(evt.target.value);
						this.current = i;
						this.radioValue = this.contractList[i];
						console.info('this.radioValue', this.radioValue);
						break;
					}
				}
			},
			submitForm(e) {
				console.info('submitForm',this.radioValue);
				//return;
				//先记录值，下面this指向会不一样
				let relationContractCodes = this.radioValue;
				if (relationContractCodes.length<=0) {
					uni.showToast({
						title: '请选择申请单',
						duration: 3000,
						icon: 'none'
					})
					return;
				}
				
				let selectChecked = [];
				selectChecked.push({
						contractCode: relationContractCodes.contractCode,
						contractName: relationContractCodes.contractName,
						 contract:relationContractCodes
					});
				console.info('selectChecked',selectChecked);
				//return;
			//将数据发射到父级监听事件中
			uni.$emit('contract', selectChecked);
			//关闭当前窗口
			uni.navigateBack({});
		},
		 
	}
	}
</script>

<style scoped>
	.slot-box-header {
		margin: 5px 5px;
		width: 40px;
	}

	.slot-box-body {
		margin: 5px 5px;
		width: 240px;
	}

	.slot-box-footer {
		margin: 5px 5px;
		width: 120px;
	}

	.uni-btn-v {
		position: fixed;
		bottom: 0;
		width: 100%;

	}

	uni-view {
		font-size: 15px;
	}
</style>