zhywpt-sp/orders/refund-deposit-card.vue

<template>
	<nav-bar title="申请退款"></nav-bar>
	<view class="oderPage">
		<view class="details">
			<view class="header">
				<image :src="`${$imgUrl}order/no1.png`" mode=""></image>
				<text>GZ92400001</text>
			</view>
			<view class="hr">
			</view>
			<view class="row">
				<view class="">
					圈存金额：
				</view>
				<text>10000</text>
			</view>
			<view class="row">
				<view class="">
					圈存状态：
				</view>
				<text>未使用（半条）</text>
			</view>
			<view class="row">
				<view class="">
					当前卡内金额读取：
				</view>
				<text style="color: #FF8000;">99.00元</text>
			</view>
		</view>
		<view class="choice">
			<view class="tips">
				<text style="color: red;">*</text>退款原因：
			</view>
			<u-checkbox-group @change="checkboxGroupChange">
				<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list" :key="index"
					:name="item.name" active-color="#00B38B">{{item.name}}</u-checkbox>
			</u-checkbox-group>
		</view>

		<button class="submit">提交申请</button>
	</view>

</template>

<script setup lang="ts">
	import {
		ref,
		reactive
	} from "vue";

	const reason = ref('')

	// 单选数据列表
	const list = reactive([{
			name: '退货原因1',
			disabled: false
		},
		{
			name: '退货原因2',
			disabled: false
		},
		{
			name: '退货原因3',
			disabled: false
		},
		{
			name: '退货原因4',
			disabled: false
		},
		{
			name: '退货原因5',
			disabled: false
		},
	], )


	const checkboxGroupChange = (n) => {
		console.log('checkboxGroupChange', n);
	}

	const checkboxChange = (n) => {
		console.log('checkboxChange', n);
	}
</script>


<style>
	page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #F3F3F3;
	}
</style>
<style lang="scss" scoped>
	.oderPage {
		flex: 1;
		width: 100%;
		background-color: #EEF7F7;
		padding: 30rpx;

		.details {
			width: 100%;
			// height: 300rpx;
			background: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
			height: 302rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
			border-radius: 20rpx;
			position: relative;

			.header {
				align-items: center;
				display: flex;
				padding-bottom: 30rpx;
				// border-bottom: 1px solid #DCDCDC;

				image {
					width: 51rpx;
					height: 31rpx;
				}

				text {
					font-size: 30rpx;
					margin-left: 20rpx;
					font-weight: 600;
				}
			}

			.hr {
				width: 100%;
				height: 1rpx;
				background: #DCDCDC;
				position: absolute;
				transform: translate(-50%);
				left: 50%;
			}

			.row {
				display: flex;
				margin: 20rpx 0;
				font-size: 26rpx;
				font-family: Noto Sans S Chinese;
				font-weight: 400;
				color: #333333;
				line-height: 30rpx;

				view {
					font-size: 26rpx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: #999999;
					line-height: 30rpx;

				}
			}
		}

		.choice {
			width: 100%;
			min-height: 300rpx;
			background: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
			margin-top: 30rpx;
			box-sizing: border-box;

			.tips {
				padding: 20rpx 0;
				font-size: 30rpx;
				font-weight: 600;
				margin-bottom: 30rpx;
			}

			::v-deep .u-checkbox {
				width: 50% !important;
				margin-bottom: 30rpx;
			}
		}

		.submit {
			height: 80rpx;
			background: linear-gradient(-90deg, #43A1E0 0%, #13E7C1 100%);
			box-shadow: 0rpx 4rpx 11rpx 1rpx rgba(223, 223, 223, 0.5);
			border-radius: 40rpx;
			font-size: 32rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 80rpx;
			position: fixed;
			bottom: 70rpx;
			width: 670rpx;
			left: 50%;
			transform: translate(-50%);
		}
	}
</style>