cbz/page_index/pages/purchase/receivingDetail.vue

<template>
	<view class="content">
		<view class="box hflex astart">
			<image :src="user.user.headimg" class="item_avatar"></image>
			<view class="vflex" style="padding-left: 20rpx;">
				<view class="item_name text_hide">{{user.username}}</view>
				<view class="hflex acenter cell">
					<u-icon name="phone-fill" color="#b8b8b8" size="14"></u-icon>
					<view class="text_style1" style="padding-left: 16rpx;">{{user.user.phone}}</view>
				</view>
				<view class="hflex astart cell">
					<u-icon name="map-fill" color="#b8b8b8" size="14"></u-icon>
					<view class="text_style1" style="padding-left: 16rpx;">{{user.addr}}</view>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="item_name">接单需求</view>
			<view class="input_bg">{{user.description}}</view>
			<view class="item_name">营业执照或者身份证件照</view>
			<image :src="user.business_img"  mode="aspectFill" class="img2"></image>
		</view>
		<view class="box">
			<view class="item_name">图片以及资质证件图片</view>
			<view class="hflex fwrap">
				<block v-for="(item,index) in user.imgs" :key="index">
					<image :src="item"  mode="aspectFill" class="img1"></image>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				id: '',
				user: {
				}
			}
		},
		onLoad(options) {
			that = this
			that.id = options.id
			that.getData()
		},
		methods: {
			getData() {
				$api.req({
					url: '/data/api.auth.Purchase/needs_show',
					data: {
						id: that.id
					}
				}, function(res) {
					if(res.code == 1) {
						that.user = res.data
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background: url('https://ship-expert.zhousi.hdlkeji.com/common/background.png') #f4f4f4 no-repeat;
		background-size: 100%;
		padding: 0 30rpx;
		.box {
			margin-top: 20rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 24rpx 20rpx;
			background: #FFFFFF;
			border-radius: 10px;
			.item_avatar {
				width: 84rpx;
				height: 84rpx;
				border-radius: 50%;
			}
			.cell {
				margin-top: 20rpx;
			}
			.item_name {
				max-width: 500rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #222222;
				// padding: 20rpx 0;
			}
			.input_bg {
				margin: 24rpx 0;
				width: 100%;
				background: #F5F5F5;
				border-radius: 16rpx;
				box-sizing: border-box;
				padding: 22rpx 20rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #303030;
			}
			.text_style1 {
				font-size: 24rpx;
				font-weight: 400;
				color: #888888;
			}
			.img2 {
				width: 320rpx;
				height: 200rpx;
				border-radius: 16rpx;
				margin: 16rpx 20rpx 0 0;
			}
			.img1 {
				width: 310rpx;
				height: 200rpx;
				border-radius: 16rpx;
				margin: 16rpx 20rpx 0 0;
			}
			.img1:nth-child(2n+2) {
				margin: 16rpx 0 0;
			}
		}
	}
</style>