cashier_weapp/pages/group_order/refund.vue

<template>
	<!-- 退款 -->
	<view class="refund">
		<view class="refundBox">
			<view class="refundBoxA">
				<image src="../../static/avatar.png"
					style="width: 86rpx;height: 86rpx;border-radius: 12rpx 12rpx 12rpx 12rpx;" mode=""></image>
				<view>
					【辣与不辣随心选】汉堡3选1MT19
				</view>
			</view>
			<view style="width: 100%;height: 2rpx;background-color: #E6E6E6;margin-top: 18rpx;"> </view>
			<view class="refundBoxB">
				<view>
					退款数量
				</view>
				<view>
					最多可退1张
				</view>
				<!-- 计步器 -->
				<u-number-box class="Unumber" v-model="Unumbervalue" style="position: absolute;right: 20rpx;"
					:disabled="true"></u-number-box>
			</view>
			<view style="width: 100%;height: 2rpx;background-color: #E6E6E6;margin-top: 32rpx;"> </view>
			<view class="refundBoxC">
				<view>
					退款金额
				</view>
				<view>
					1-3 个工作日退还至原支付方，以实际退款金额为准
				</view>
				<view>$9.9</view>
			</view>
			<view style="width: 100%;height: 2rpx;background-color: #E6E6E6;margin-top: 32rpx;"> </view>
			<view class="refundBoxD">
				<view>退款原因 <text style="color: #FF4C11;">*</text> </view>
				<view>请至少选择一项 <u-icon name="arrow-right" color="#000" size="28"></u-icon></view>
			</view>
			<view style="width: 100%;height: 2rpx;background-color: #E6E6E6;margin-top: 32rpx;"> </view>
			<view class="refundBoxE">
				<view>退款说明 </view>
				<textarea placeholder-style="font-size: 24rpx;color: #999999;" @input="sumfontnum" :value='tareaValue'
					placeholder="请输入退款说明，我们将用心倾听你的任何不满" name="" id="" maxlength="200" cols="30" rows="10"
					style="padding: 16rpx 26rpx;margin-top: 16rpx;border: solid 2rpx #999;border-radius: 18rpx 18rpx 18rpx 18rpx;"></textarea>
				<view class="Unumberxz"><text>{{fontNum}}</text>/200</view>
			</view>
		</view>
		<view class="buttonBox">
			<button class="buttonStyle">
				提交订单
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Unumbervalue: 1,
				tareaValue: '',
				fontNum: 0
			}
		},
		methods: {
			// 限制文本框字数
			sumfontnum(e) {
				console.log(e)
				this.fontNum = e.detail.value.length
			}
		}
	}
</script>

<style lang="less" scoped>
	.refundBox {
		background-color: #fff;
		padding: 32rpx 64rpx;

		.refundBoxA {
			.df(flex-start, stretch);

			>view {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}
		}

		.refundBoxB {
			position: relative;

			>view:first-child {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				margin-top: 16rpx;
			}

			>view:nth-child(2) {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				margin-top: 16rpx;
			}

			.Unumber {

				// transform: translateY(-50%);
			}
		}

		.refundBoxC {
			position: relative;

			>view:first-child {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				margin-top: 16rpx;
			}

			>view:nth-child(2) {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				margin-top: 16rpx;
			}

			>view:last-child {
				position: absolute;
				right: 0rpx;
				top: 20rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FF4C11;
			}
		}

		.refundBoxD {
			.df(space-between);
			// margin-top: 32rpx;
			padding-top: 32rpx;

			>view:first-child {
				font-weight: 500;
				font-size: 28rpx;
			}

			>view:last-child {
				.df();
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
			}
		}

		.refundBoxE {
			margin-top: 32rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			position: relative;

			.Unumberxz {
				position: absolute;
				right: 40rpx;
				bottom: 14rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;

				>text {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}

	.buttonBox {
		width: 100%;
		height: 136rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		// .df(center,center);

		.buttonStyle {
			margin-left: 50%;
			margin-top: 40rpx;
			transform: translateX(-50%);
			width: 712rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			background: linear-gradient(110deg, #F1A666 0%, #FF4C11 100%);
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #FFFFFF;
		}
	}

	.df(@start: flex-start, @position: center) {
		// @start:     flex-start(默认)     space-between(两端对齐)     space-around(间隔相等)
		// @position:stretch(默认) center(垂直居中)
		display: flex;
		align-items: @position;
		justify-content: @start;
	}
</style>
<style>
	/deep/ .u-number-box {
		position: absolute;
		right: 0;
		top: 30%;
	}
</style>