xuan-pay-cweb/subpackages/applyPeriod/feePaidList.vue

<template>
	<view>
		<!-- tabs栏 -->
		<view class=" mart10 marb20 alijus">
			<view class="font16 fcor333 paddtop5 paddbotm5  margle20  marRight20" v-for="(item,index) in feePaidList"
				@click="switchid(index)" :class="[showPaidItem.platformType == item.platformType ? 'fcor089 borbtom fontwig6' : ' borb ']"
				:key="index">
				{{item.platformTypeName}}
			</view>
		</view>
		<view class="width100 line1"></view>

		<view class="mart20  marb20">
			<view class="dis-flex height40 bor-botm1 backcor6">
				<view class="flex-1 fotct fontwig6">支付方式</view>
				<view class="flex-1 fotct fontwig6">贴息方式</view>
				<view class="flex-1 fotct fontwig6">操作</view>
			</view>

			<view class="dis-flex bor-botm1 paddtop10 paddbotm10 " v-for="(item,index) in showPaidItem.payTypeList"
				:key="index">

				<view class="flex-1 fotct text1">
					{{item.payTypeName}}
				</view>
				<view class="flex-1 fotct ">
					{{item.feePaidList | filterStatus}}
				</view>
				<view class="flex-1 fotct fcor089"  >
					<view v-if="showPaidItem.platformPeriod"  @click.stop="openPupup(item)">编辑</view>
				</view>

			</view>
		</view>


		<!-- 编辑桌台 -->
		<uni-popup ref="popupUpdateFeePaid" type="center">
			<view style="width: 80vw;" class="backcorfff  border-10r pd-main font16" v-if="updatePaidDetail">
				<view class="dis-flex mart20 marb10 paddbotm10 bor-botm1">
					<view class=" marRight10 fontwig6 padleft15 paddtright10">平台类型:
					</view>
					<view class=" flex-1 ">
						{{showPaidItem.platformTypeName}}
					</view>
				</view>
				<view class="dis-flex mart20 marb10 paddbotm10 bor-botm1">
					<view class=" marRight10 fontwig6 padleft15 paddtright10">支付方式:
					</view>
					<view class=" flex-1 ">
						{{updatePaidDetail.payTypeName}}
					</view>
				</view>
				<view class=" mart20 marb10 paddbotm10 bor-botm1">
					<view class=" marRight10 fontwig6 padleft15 paddtright10 marb10">贴息方式:
					</view>
					<radio-group @change="radioChange">
						<view class="dis-flex flex-sp flex-wrap ">
							<label v-for="(item,index) in updatePaidDetail.feePaidList" class="marb5">
								<radio :value="item.feePaid+''" :checked="item.currentSettle" />{{item.feePaid | filterFeePaid}}
							</label>
						</view>
					</radio-group>
				</view>
				<button class="btnw50 " @click.stop="updateFeePaid()">保存</button>
			</view>
		</uni-popup>




	</view>
</template>

<script>
	import {
		getFeePaidList,
		updateFeePaid,
	} from '@/Utils/Api.js';
	export default {
		data() {
			return {
				merNo: '', //商户号
				platformPeriodIndex: 0,
				feePaidList: [], //数据列表
				feeList:[
					{
							id: 1,
							name: '商户贴息',
							
						},
						{
							id: 2,
							name: '用户贴息',
							
						},
						{
							id: 3,
							name: '商户用户各一半',
						},
				],
				updatePaidDetail: null,
				updateParams: {
					merNo: '', //商户号
					platformPeriodType: '', //平台类型  1：零零购
					payType: '', //支付方式  1： 银联分期  2：花呗分期
					feePaid: '', //贴息方式   1：商户贴息  2：用户贴息  3：商户用户各一半
				}

			}
		},

		computed: {
			showPaidItem() {
				if (this.feePaidList.length > 0) {
					return this.feePaidList[this.platformPeriodIndex]
				} else {
					return []
				}
			}
		},
		filters: {
			/* 1：商户贴息  2：用户贴息  3：商户用户各一半 */
			filterStatus(typeArr) {
				if (typeArr.length == 0 || !typeArr) {
					return '暂无'
				} else {
					let strArr = typeArr.filter(item => item.currentSettle);
					switch (strArr[0].feePaid) {
						case 1:
							return '商户贴息';
						case 2:
							return '用户贴息';
						case 3:
							return '商户用户各一半';
						default:
							return '未知';
					}
				}
			},
			filterFeePaid(type) {
				switch (type) {
					case 1:
						return '商户贴息';
					case 2:
						return '用户贴息';
					case 3:
						return '商户用户各一半';
					default:
						return '未知';
				}
			}
		},

		onLoad(option) {
			this.merNo = option.merNo;
			this.updateParams.merNo = this.merNo;
			this.getFeePaidList(); //查询贴息列表
		},
		methods: {
			/*查询贴息列表  */
			getFeePaidList(bool=true) {
				let params = {
					merNo: this.merNo
				}
				if(bool){
					uni.showLoading({
						title: "加载中",
						mask: true
					})
				}
				
				getFeePaidList(params).then(res => {
					if(bool){
						uni.hideLoading();
					}
					
					if (res.return_code == '000000') {
						this.feePaidList = res.return_data;
						if (this.feePaidList.length > 0) {
							this.switchid(this.platformPeriodIndex)
						}
					} else {
						uni.showToast({
							title: res.return_msg,
							duration: 2000,
							icon: 'none'
						})
					}
				})

			},
			/* 平台类型change切换 */
			switchid(index) {
				this.platformPeriodIndex = index;
			},
			openPupup(item) {
				this.updatePaidDetail = item;
				this.updateParams.platformPeriodType = this.showPaidItem.platformType;
				this.updateParams.payType = item.payType;
				this.updateParams.feePaid =  item.feePaidList.filter(item => item.currentSettle)[0].feePaid;
	
				this.$refs.popupUpdateFeePaid.open('center');
			},
			//点击保存按钮
			updateFeePaid() {
				if(this.updateParams.feePaid==''){
					uni.showToast({
						title:'请选择贴息方式',
						icon:'none'
					})
					return 
				}
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				updateFeePaid(this.updateParams).then(res=>{
					uni.hideLoading()
					
					this.$refs.popupUpdateFeePaid.close();
					
					if (res.return_code == '000000') {
						uni.showToast({
							title: res.return_data,
							duration: 2000,
							icon: 'none'
						})
						
						this.getFeePaidList(false);
						
					
					} else {
						uni.showToast({
							title: res.return_msg,
							duration: 2000,
							icon: 'none'
						})
					}
				})
			},
			/* 贴息方式change */
			radioChange(e) {
				this.updateParams.feePaid = e.detail.value
			},

		}
	}
</script>

<style lang="scss" scoped>
	.borbtom {
		border-bottom: 3px solid #089bf5;
	}

	.borb {
		border-bottom: 3px solid transparent;
	}

	.border-10r {
		border-radius: 10px;
	}
	
	.flex-wrap{
		flex-wrap: wrap;
	}
</style>