hotel-tablecloth-uniapp-24-08-29/pages_order/order/damageReport.vue

<template>
	<!-- 破损上报 -->
	<view class="help">
		<navbar title="破损上报" leftClick @leftClick="$utils.navigateBack" />
		
			
		<uv-radio-group 
		@change="change"
		v-model="form.orderDetailId">
			<view class="flex">
				<view class="server-item"
				v-for="(p, i) in list"
				:key="i">
			
					<view class="radio">
						<uv-radio :name="p.id" 
						:disabled="!!p.status"
						activeColor="#FA5A0A" size="40rpx"
						icon-size="35rpx"></uv-radio>
					</view>
			
					<view class="img-box">
						<image :src="p.pic" mode="aspectFill"></image>
					</view>
			
					<view class="server-info">
			
						<view class="server-title">
							产品名称：{{p.goodsName}}
						</view>
			
						<view class="sales-volume" style="margin-top: 5px;">
							<view class="desc">规格：{{p.sku}}</view>
						</view>
			
						<view class="sales-volume" style="margin-top: 5px;">
							<view class="desc">数量：{{p.num}}</view>
						</view>
			
					</view>
			
				</view>
			</view>
		</uv-radio-group>
		
		
		<view class="type">
			<span>破损数量</span>
			<span>
				<uv-number-box 
				v-model="form.num" :min="1" 
				:max="max"></uv-number-box>
			</span>
		</view>
		
		<view class="help-box">
			<view>
				<uv-textarea
				:count="true" 
				v-model="form.info"
				border="none" height="400"
				placeholder="请输入破损的细节部位....." 
				:text-style="{color:'#000',fontSize:'28rpx'}" />
			</view>

			<view>
				<view class="help-issue">
					<text>上传图片</text>
					<text style="color: #BD3624;">*</text>
				</view>

				<view class="help-screenshot">
					<uv-upload :fileList="fileList" multiple :maxCount="6" width="180rpx"
						height="180rpx" multiple @afterRead="afterRead" @delete="deleteImage">
						<image src="../static/help/uploading.png" mode="aspectFill"
							style="width: 180rpx;height: 180rpx;" />
					</uv-upload>
				</view>
			</view>

			<view class="help-button">
				<view
				@click="submit">提交审核</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mixinOrder from '@/mixins/order.js'
	export default {
		mixins : [mixinOrder],
		data() {
			return {
				fileList: [],
				form : {
					orderDetailId : 0,
					num : 1,
					info : '',
				},
				list: {},
				orderId: 0,
				max : 1,
			}
		},
		onLoad(agrs) {
			this.orderId = agrs.id
		},
		onShow() {
			this.getData()
		},
		methods: {
			change(e){
				this.list.forEach(n => {
					if(n.id == e){
						this.max = n.num
					}
				})
			},
			deleteImage(e){
				this.fileList.splice(e.index, 1)
			},
			afterRead(e){
				let self = this
				e.file.forEach(file => {
					self.$Oss.ossUpload(file.url).then(url => {
						self.fileList.push({
							url
						})
					})
				})
			},
			// 查询订单详情
			getData() {
				this.$api('detailList', {
					id: this.orderId
				}, res => {
					uni.stopPullDownRefresh()
					if (res.code == 200) {
						this.list = res.result
					}
				})
			},
			submit(){
				this.form.pic = this.fileList.map(item=>item.url).join(",")
				if (this.$utils.verificationAll(this.form, {
						orderDetailId : '请选择产品',
						info: '请输入破损的细节部位',
						pic: '请上传图片',
					})) {
					return
				}
				this.orderConfirmedDamage({id : this.orderId}, 2, this.form, 
				() => {
					uni.redirectTo({
						url:'/pages/index/order'
					})
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.help {
		.server-item {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			background: white;
			border-radius: 15rpx;
			box-sizing: border-box;
			margin: 30rpx;
			width: 690rpx;
			
			.radio{
				width: 100rpx;
				height: 180rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		
			.img-box {
				width: 180rpx;
				height: 180rpx;
				border-radius: 10rpx;
				overflow: hidden;
		
				image {
					width: 100%;
					height: 100%;
				}
			}
		
			.server-info {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				box-sizing: border-box;
				padding: 10rpx 15rpx;
		
				.server-title {
					display: flex;
					margin-bottom: 10rpx;
				}
		
				.coupon {
					display: flex;
					justify-content: center;
					align-items: center;
					background: #F29E45;
					color: white;
					width: 120rpx;
					height: 40rpx;
					border-radius: 10rpx;
					margin-left: 10rpx;
					font-size: 22rpx;
				}
		
				.time-coupon,
				.price {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
				}
		
				.time-coupon {
					margin: 10rpx 0rpx;
					font-size: 26rpx;
					justify-content: space-between;
					width: 100%;
		
					.flex {
						justify-content: center;
						align-items: center;
					}
		
					image {
						width: 25rpx;
						height: 25rpx;
					}
		
					.time {
						color: #B8B8B8;
						margin-left: 6rpx;
					}
				}
		
				.sales-volume {
					display: flex;
					align-items: center;
					color: #B8B8B8;
					font-size: 24rpx;
		
					image {
						width: 25rpx;
						height: 25rpx;
					}
				}
			}
		}
		.type {
			display: flex;
			align-items: center;
			background-color: #FFF;
			width: 92%;
			margin: 30rpx 4%;
			padding: 20rpx;
			box-sizing: border-box;
		
			>span:nth-of-type(1) {
				width: 70%;
			}
		
			>span:nth-of-type(2) {
				width: 30%;
			}
		}
		.help-box {
			width: 92%;
			margin-left: 4%;

			.help-issue {
				margin: 20rpx;
				font-size: 28rpx;
				font-weight: 600;
				color: #000;
			}

			.help-screenshot {
				display: flex;
				align-items: center;
				background-color: #fff;
				padding: 20rpx;
			}

			.help-button {
				display: flex;
				justify-content: center;
				font-size: 24rpx;
				flex-shrink: 0;
				margin-top: 60rpx;

				view {
					padding: 14rpx 120rpx;
					border-radius: 38rpx;
				}

				view:nth-child(1) {
					background: $uni-color;
					color: #fff;
				}

				view:nth-child(2) {
					color: #FFFDF6;
					background-color: #C83741;
				}
			}
		}
	}
</style>