maishidaSJ/components/tuikanPop/tuikanPop.vue

<template>
	<view>
		<view class="contentColumnC popopayCt">
			<text class="titleTextB titleTx">退款</text>
			<view class="contentInRowC" style="margin-top: 30rpx;">
				<text>退款金额</text>
				<input class="noinputV" type="number" :value="refund_fee" placeholder=""  @input="feeinput">
			</view>
			<view class="contentInRowS" style="width: 80%;margin-top: 40rpx;">
				<text class="tuukuanBtj" @click="jujuetk">拒绝</text>
				<text class="tuukuanBtq" @click="quxiao">取消</text>
				<text class="tuukuanBtt" @click="queren">确认</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"tuikanPop",
		props:{
			refund_fee:0,
		},
		data() {
			return {
				jiner:-1
			};
		},
		methods:{
			queren(){
				if(this.jiner>this.refund_fee){
					uni.showToast({
						title:'退款金额大于订单金额',
						icon:"none",
						duration: 1200
					});
					return
				}
				if(this.jiner==''){
					uni.showToast({
						title:'请填写退款金额',
						icon:"none",
						duration: 1200
					});
					return
				}
				if(this.jiner==-1){
					this.jiner = this.refund_fee;
				}
				
				this.$emit('Etuikanresult',this.jiner);
			},
			quxiao(){
				this.$emit('Etuikanresult',-1);
			},
			jujuetk(){
				this.$emit('Etuikanresult',-2);
			},
			feeinput(event){
				this.jiner = event.target.value;
			},
		},
	}
</script>

<style lang="scss">
	
.popopayCt{
	padding-top: 10rpx;
	padding-left: 30rpx;
	padding-right: 30rpx;
	padding-bottom: 30rpx;
	
	width: 580rpx;
	background-color:#F6F6F6;
	border-radius:20rpx 20rpx 20rpx 20rpx;
	box-shadow: 0rpx 0rpx 10rpx 0rpx darkgray;
	max-height: 80vh;
	background-color: white;
}
.titleTx{
	margin-top: 30rpx;
}
.noinputV{
	margin-left: 10rpx;
	width: 60%;
	color: black;
	border-radius: 8rpx;
	border: 1rpx solid lightgray;
}

.tuukuanBtj{
	line-height: 40rpx;
	padding-left: 12rpx;
	padding-right: 12rpx;
	border-radius: 20rpx;
	border: 2rpx solid #E03021;
	color: #E03021;
	background-color: #F6F6F6;
}
.tuukuanBtq{
	line-height: 40rpx;
	padding-left: 12rpx;
	padding-right: 12rpx;
	border-radius: 20rpx;
	border: 2rpx solid #E03021;
	color: darkmagenta;
	background-color: #F6F6F6;
}
.tuukuanBtt{
	line-height: 40rpx;
	padding-left: 12rpx;
	padding-right: 12rpx;
	border-radius: 20rpx;
	border: 2rpx solid #E03021;
	background-color: #F6F6F6;
}

</style>