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 {
  data() {
    return {
      tagList:[
				{
					name:'随时退',
					refundLabel:1
				},
				{
					name:'过期自动退',
					refundLabel:2
				}
			],
			tagCurrent:null,
			verifyList:[
				{
					name:'需要确认',
					refundConfirm:1
				},
				{
					name:'无需确认',
					refundConfirm:0
				}
			],
			verifyCurrent:null,
			refundLabel:[],
			refundConfirm:[],
			
    };
  },
  methods: {
    closePopup() {
      this.$emit('close');
    },
    confirm() {
			if(this.refundLabel.length ==0 || this.refundConfirm.length ==0 ){
				console.log('5555')
				uni.showToast({
					title: '请选择退款规则',
					icon:'none'
				});
			}else{
				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
		}
  }
};
</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>