yanzong_qianduan/pages/order/refund/refund1.vue

<template>
	<view class="invoice">
		<view class="invoice-goods">
			<view class="a">
				<image :src="$picUrl+'/static/home/phone.jpg'"></image>
			</view>
			<view class="b">
				<view class="l">产品名称iPhone13</view>
				<view class="r">【配置套餐】<text>x1</text></view>
			</view>
		</view>
		<view class="invoice-info">
			<view class="b">
				<view class="item">
					<view class="l">申请类型：</view>
					<view class="r">
						我要退货退款
					</view>
				</view>
				<view class="item">
					<view class="l">申请原因：</view>
					<view class="r">
						<picker :value="index1" :range="array1" @change="bindPickerChange1">
							<view class="lx" :class="index1==-1?'lx-on':''">{{index1==-1?'点击选择申请原因':array[index1]}}</view>
						</picker>
					</view>
				</view>
				
			</view>
		</view>	
		<view class="invoice-money">
			<view class="a">申请金额</view>
			<view class="b">
				<view class="l">￥
					<view class="money" v-if="toggleIndex">{{value}}</view>
					<input type="number" :focus="true" v-model="value" v-else placeholder-class="box" placeholder="请输入金额" />
				</view>
				<view class="r" @click="toggleItem()">
					<image :src="$picUrl+'/static/news/icon-edit.png'"></image>
					修改金额</view>
			</view>
		</view>
		<view class="invoice-remark">
			<view class="a">
				<view class="l">申请说明<text>（必填）</text></view>
				<view class="r">您还可以输入{{value?(200-value.length):200}}字</view>
			</view>
			<view class="b">
				<u-input v-model="value" maxlength="200" type="textarea" :height="height" placeholder="请您详细填写申请说明"  />
			</view>
			<view class="c">
				<u-upload :action="action" width="160" height="160" :file-list="fileList" :custom-btn="true" max-count="5">
					<template v-slot:addBtn>
						<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<image src="/static/news/icon-upload.png"></image>
							<view class="1">上传图片</view>
							<view class="1">最多5张</view>
						</view>
					</template>
				</u-upload>
			</view>
		</view>
		<view class="invoice-phone">
			联系电话<input type="number" placeholder=""/>
		</view>
		<view class="invoice-fd" @click="toDetail()">
			提交申请
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: 150,
				fileList: [
					{
						url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
					}
				],
				value: "1235",
				content: "确认您的发票信息无误后再提交",
				show: true,
				toggleIndex: true,
				index: -1,
				array: ['已收到货','未收到货'],
				index1: -1,
				array1: ['不喜欢、效果不好','不想要了',"外观、型号、参数与描述不符",'货物与描述不符','商品有划痕或破损','配件、部件、屏幕问题','质量问题','收到商品少件（含少配件）','商品破损或污渍','商家发错货'],
				tabIndex: 2
			};
		},
		methods: {
			onClose() {},
			tabItem(i){
				this.tabIndex = i;
			},
			toggleItem(i){
				this.toggleIndex = !this.toggleIndex;
			},
			toDetail(i){
				uni.navigateTo({
					url: "/pages/order/refund/refundDetail1"
				})
			},
			bindPickerChange(e){
				this.index = e.detail.value
			},
			bindPickerChange1(e){
				this.index1 = e.detail.value
			}
			
		}
	}
</script>

<style lang="scss" scoped>
.invoice{
	&-goods{
		padding: 0 20rpx 0 40rpx;
		overflow: hidden;
		background-color: #fff;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		.a{
			width: 145rpx;
			height: 135rpx;
			margin-right: 20rpx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}
		.b{
			flex: 1;
			overflow: hidden;
			.l{
				white-space: nowrap;
				text-overflow: ellipsis;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #262626;
				overflow: hidden;
			}
			.r{
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #838383;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;
				text{
					display: block;
					font-size: 28rpx;
					color: #555;
				}
			}
		}
	}
	&-info{
		margin-top: 20rpx;
		background-color: #fff;
		overflow: hidden;
		.a{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 30rpx 20rpx 60rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #F3F3F3;
			font-size: 32rpx;
			font-weight: 500;
			color: #262626;
			text{
				color: #006AFF;
				padding-right: 40rpx;
				position: relative;
				&::after{
					content: "";
					width: 16rpx;
					height: 16rpx;
					border-top: 1px solid #006AFF;
					border-left: 1px solid #006AFF;
					position: absolute;
					right: 0;
					top: 14rpx;
					z-index: 1;
					transform: rotate(135deg);
				}
			}
		}
		.b{
			padding: 0 30rpx 0 45rpx;
			box-sizing: border-box;
			overflow: hidden;
			.item{
				padding: 30rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				border-top: 1px solid #F3F3F3;
				font-size: 32rpx;
				font-weight: 500;
				color: #262626;	
				overflow: hidden;
				&:first-child{
					border-top-color: #fff;
				}
				.l{
					width: 180rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: #656565;
				}
				.r{
					flex: 1;
					display: flex;
					align-items: center;
					font-size: 32rpx;
					font-weight: 400;
					color: #262626;
					.li{
						width: 150rpx;
						height: 78rpx;
						background: #F3F3F3;
						border-radius: 8rpx;
						text-align: center;
						line-height: 78rpx;
						font-size: 32rpx;
						font-weight: 400;
						color: #262626;
						margin-right: 12rpx;
						&-on{
							background: #FDF4F4;
							background: url(/static/invoice/select-active.png) center top no-repeat;
							background-size: contain;
						}
					}
					input {
						flex: 1;
					}
					picker{
						flex: 1;
						.tt{
							width: 180rpx;
							position: relative;
							color: #4894FF;
							text-align: right;
							&::after{
								content: "";
								width: 16rpx;
								height: 16rpx;
								border-top: 1px solid #4894FF;
								border-left: 1px solid #4894FF;
								position: absolute;
								right: -50rpx;
								top: 14rpx;
								z-index: 1;
								transform: rotate(135deg);
							}
						}
						.lx{
							width: 100%;
							position: relative;
							&-on{
								color: #B8B8B8;
							}
							&::after{
								content: "";
								width: 16rpx;
								height: 16rpx;
								border-top: 1px solid #B8B8B8;
								border-left: 1px solid #B8B8B8;
								position: absolute;
								right: 20rpx;
								top: 14rpx;
								z-index: 1;
								transform: rotate(135deg);
							}
						}
					}
				}
			}
			
		}
	}
	&-fd{
		width: 664rpx;
		height: 104rpx;
		background: #F55349;
		border-radius: 8rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 60rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	&-money{
		width: 100%;
		background: #FFFFFF;
		margin-top: 20rpx;
		padding: 26rpx 26rpx 26rpx 48rpx;
		box-sizing: border-box;
		overflow: hidden;
		.a{
			padding-bottom: 10rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #838383;
		}
		.b{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.l{
				font-size: 40rpx;
				font-weight: 600;
				color: #262626;
				display: flex;
				align-items: baseline;
				input,.money{
					width: 400rpx;
					font-size: 52rpx;
					color: #212121;
					margin-left: 15rpx;
				}
				.box{
					font-size: 26rpx;
					color: #B8B8B8;
					font-weight: normal;
				}
			}
			.r{
				font-size: 28rpx;
				font-weight: 400;
				color: #C2C2C2;
				display: flex;
				align-items: center;
				image{
					width: 36rpx;
					height: 36rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
	&-remark{
		width: 100%;
		background: #FFFFFF;
		overflow: hidden;
		margin-top: 20rpx;
		padding: 26rpx 26rpx 26rpx 48rpx;
		box-sizing: border-box;
		.a{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 15rpx 0;
			.l{
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #838383;
				text{
					font-size: 28rpx;
					font-weight: 400;
					color: #F55349;
				}
			}
			.r{
				font-size: 24rpx;
				font-weight: 400;
				color: #A8A8A8;
			}
		}
		.c{
			padding-bottom: 20rpx;
			overflow: hidden;
			.slot-btn{
				width: 80px;
				height: 80px;
				background: #FFFFFF;
				border-radius: 10rpx;
				border: 1px solid #C0C0C0;
				text-align: center;
				font-size: 24rpx;
				font-weight: 500;
				color: #D1D1D1;
				image{
					width: 50rpx;
					height: 50rpx;
					margin-top: 20rpx;
				}
			}
		}
	}
	&-phone{
		overflow: hidden;
		background-color: #fff;
		padding: 30rpx 26rpx 30rpx 48rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #838383;
		display: flex;
		align-items: center;
		justify-content: space-between;
		input {
			flex: 1;
			margin-left: 20rpx;
			font-size: 32rpx;
			color: #212121;
		}
	}
}
</style>