LocalLivingServicesUniapp/components/product/refund.vue

<template>
	<view class="popup" @tap="closePopup">
		<view class="model" @tap.stop>
			<view class="title">
				<text>退款规则</text>
				<image src="/static/index/cut.png" mode="" @tap="closePopup"></image>
			</view>
			<view class="popup-body">
				<view class="tag">
					<view class="tips">
						退款标签
					</view>
					<view class="item" v-for="(item,index) in tagList" :key="index" @click="selectTag(item,index)">
						{{item.name}}
						<image src="/static/product/select.png" mode="" v-if="tagCurrent == index"></image>
						<image src="/static/product/round.png" mode="" v-else></image>
					</view>
				</view>
				<view class="tag">
					<view class="tips">
						退款是否商家确认
					</view>
					<view class="item" v-for="(item,index) in verifyList" :key="index" @click="selectverify(item,index)">
						{{item.name}}
						<image src="/static/product/select.png" mode="" v-if="verifyCurrent == index"></image>
						<image src="/static/product/round.png" mode="" v-else></image>
					</view>
				</view>
			</view>
			<view class="foot">
				<view class="cancel" @tap="closePopup">取消</view>
				<view class="sub" @tap="confirm">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			Confirm: {
				type: String,
				default: ''
			},
			Label: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				tagList: [{
						name: '随时退',
						refundLabel: 1
					},
					{
						name: '过期自动退',
						refundLabel: 2
					}
				],
				tagCurrent: null,
				verifyList: [{
						name: '需要确认',
						refundConfirm: 1
					},
					{
						name: '无需确认',
						refundConfirm: 0
					}
				],
				verifyCurrent: null,
				refundLabel: {
					name: '随时退',
					refundLabel: 1
				},
				refundConfirm: {
					name: '需要确认',
					refundConfirm: 1
				},

			};
		},
		methods: {
			closePopup() {
				this.$emit('close');
			},
			confirm() {
				if (!this.refundLabel && !this.refundConfirm) {
					uni.showToast({
						title: '请选择退款规则',
						icon: 'none'
					});
				} else {
					console.log(this.refundLabel, this.refundConfirm);
					this.$emit('confirm', {
						refundLabel: this.refundLabel,
						refundConfirm: this.refundConfirm
					});
					this.closePopup();
				}

			},
			selectTag(item, index) {
				this.tagCurrent = index
				this.refundLabel = item
			},
			selectverify(item, index) {
				this.verifyCurrent = index
				this.refundConfirm = item
			}
		},
		mounted() {
			setTimeout(() => {
				this.tagCurrent = this.Label
				this.verifyCurrent = this.Confirm
				this.$forceUpdate()
			}, 100)

		}
	};
</script>

<style lang="scss" scoped>
	.popup {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.4);
		display: flex;
		//   align-items: end;
		align-items: flex-end;
		z-index: 99;

		.model {
			width: 100%;
			background-color: #fff;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			padding: 0rpx 24rpx;
			padding-bottom: 20rpx;

			.title {
				width: 100%;
				height: 86rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				border-bottom: 1px solid #eeeeee;
				margin-bottom: 24rpx;

				image {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					right: 0px;
				}
			}

			.popup-body {
				.tag {
					margin-bottom: 24rpx;

					.tips {
						font-size: 28rpx;
					}

					.item {
						width: 100%;
						height: 70rpx;
						font-size: 26rpx;
						border-bottom: 1px solid #EEEEEE;
						display: flex;
						align-items: center;
						justify-content: space-between;

						image {
							width: 28rpx;
							height: 28rpx;
						}
					}
				}
			}

			.foot {
				display: flex;
				justify-content: space-between;
				border-top: 1px solid #eeeeee;
				padding-top: 16rpx;

				.cancel {
					width: 324rpx;
					height: 76rpx;
					border-radius: 54rpx;
					border: 1px solid #CCCCCC;
					font-size: 28rpx;
					color: #999999;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.sub {
					width: 324rpx;
					height: 76rpx;
					background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
					border-radius: 54rpx;
					border: 1px solid #CCCCCC;
					font-size: 28rpx;
					color: #ffffff;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>