pco/app/pages/business-entering/item-select.vue

<template>
	<view>
		<view class="input-box">
			<view class="uni-input">
				<input class="input" confirm-type="search"  @input="getBaseGoods()" v-model="p.name"
					@confirm="getBaseGoods()" placeholder="输入关键字搜索" />
				<view class="clear"  @click="clear()">
					<u-icon name="close-circle-fill" color="#ccc" size="38"></u-icon>
				</view>
			</view>
			<view class="btn" @click="getBaseGoods()">搜索</view>
		</view>
		<view class="box pay-way">
			   
			<view class="pay-way-box" style="height: auto;">
				<radio-group @change="radioChange">
					<view class="item" v-for="(item,index) in goodsList" :key="item.id">
						<label>
							<image class="icon" :src="item.avatar"></image>
							<view class="text">
								<text class="title">{{item.name}}</text>
								<text class="p">编号：{{item.code}}</text>
							</view>
							<radio class="pay-radio" :value="item.id" />
						</label>
					</view>
				</radio-group>
			</view>
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				p: { // 查询参数
					status: '1', // 描述 
					pageNo: 1, // 当前页 
					pageSize: 10, // 页大小 
					sortType: 0, // 排序方式 
					dataCount: 0 ,// 排序方式 
					name:''
				},
				goodsList: []
			}
		},
		onLoad() {

		},
		onShow() {
			this.getBaseGoods();
		},
		methods: {
			isInput(){
				
			},clear(){
				
			},
			getBaseGoods() {
				this.$api.getBaseGoods(this.p).then(resp => {
					this.goodsList = resp.data;
					this.p.dataCount = resp.dataCount;
				})
			},
			radioChange(event) {
				let that=this;
				uni.navigateBack({
					data: 1,
					url: '/pages/business-entering/business-entering',
					success: function(resp) {
						uni.$emit('getGoods', {goodsId:event.detail.value}) //触发事件
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.input-box {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 20rpx 30rpx;
		padding-right: 0;
		box-sizing: border-box;
		background-color: #fff;
		position: fixed;
		z-index: 9;
		top: 0;
		left: 0;
		/*#ifdef H5*/
		top: 45px;
	
		/*#endif*/
		.uni-input {
			background-color: #f7f7f7;
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 80rpx 0 30rpx;
			box-sizing: border-box;
			flex: 1;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			position: relative;
	
			.input {
				flex: 1;
				height: 100%;
			}
	
			.clear {
				width: 80rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				right: 0;
			}
		}
	
		.icon {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			background-color: #ddd;
			right: 210rpx;
			border-radius: 50%;
		}
	
		.btn {
			width: 130rpx;
			height: 80rpx;
			color: #191919;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 0 10rpx 10rpx 0;
			font-size: 32rpx;
		}
	}
	.box {
		display: flex;
		margin: 20rpx;
		border-radius: 20rpx;
		flex: 1;

		box-sizing: border-box;
		flex-wrap: wrap;
	}

	.pay-way {
		margin-bottom: 20rpx;
		margin-top:130rpx;

		.top {
			display: flex;
			width: 100%;
			align-items: center;
			margin: 0 30rpx;
			padding: 30rpx 0;

			.title {
				font-size: 34rpx;
				font-weight: bold;
			}
		}

		.pay-way-box {
			width: 100%;
			overflow: hidden;
		}

		.s-H {
			height: 120rpx;
		}

		.e-H {
			height: auto;
		}

		.tab-show {
			width: 100%;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				font-size: 30rpx;
				color: #999;
				margin-right: 20rpx;
			}
		}

		radio-group {
			width: 100%;
			display: flex;
			flex-direction: column;
		}

		.item {
			border-radius: 10rpx;
			margin-top: 5rpx;
			background-color: #fff;

			label {
				display: flex;
				flex: 1;
				align-items: center;
				margin: 0 30rpx;
				min-height: 120rpx;
			}

			.icon {
				width: 60rpx;
				height: 60rpx;
			}

			.text {
				flex: 1;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;

				.title {
					font-size: 30rpx;
					color: #191919;
				}

				.p {
					font-size: 24rpx;
					color: #999;
				}
			}

			.pay-radio {
				margin-left: auto;
			}
		}
	}
</style>