emis-sapp/components/buns-paytype-sheet/buns-paytype-sheet.vue

<template>
	<tpx-dialog :show="show" title="付款方式" @onClose="handleCloseModal()">
		<view style="position: relative;height: calc(60vh);">
			<tpx-layout>
				<template v-slot:body>
					<view class="shet-cont">
						<view class="">
							<tpx-checkitems :list="dataList" 
								v-model:value="model.value" v-slot="dlCurrent" min-checked="1" type="single" 
								@onChange="handleDataItemChange"
							>
								<view :class="`pay-item ${dlCurrent.checked?'active':''} `">
									<u-row justify="between" style="margin-bottom: 10rpx;">
										<u-col span="10">
											<u-text size="30" :text="dlCurrent.item.title"></u-text>
										</u-col>
										<view v-if="dlCurrent.item.val != payTypeEnum.postMonth" span="2" class="chk-icon">
											<u-checkbox-group>
												<u-checkbox :checked="dlCurrent.checked" shape="circle" size="32" activeColor="#B12D29"></u-checkbox>
											</u-checkbox-group>
										</view>
									</u-row>
									<u-text v-if="dlCurrent.item.desc" size="28" :text="dlCurrent.item.desc" color="#999"></u-text>
									
									<view v-if="dlCurrent.item.val == payTypeEnum.other" class="pb-20">
										<u-textarea v-model="model.otherDesc" border="surround" height="120" placeholder="请填写"
											maxlength="50" count></u-textarea>
									</view>
									
									<view v-if="dlCurrent.item.val == payTypeEnum.postMonth" class="pt-20">
										<tpx-checkitems :list="cardList"
											v-model:value="model.cardId" v-slot="caCurrent" min-checked="1" type="single" 
										>
											<view slot class="pt-10 pb-10">
												<u-row justify="between">
													<u-col span="10">
														{{caCurrent.item.title}}
													</u-col>
													<view span="2" class="chk-icon">
														<u-checkbox-group>
															<u-checkbox :checked="caCurrent.checked" shape="circle" size="32" activeColor="#B12D29"></u-checkbox>
														</u-checkbox-group>
													</view>
												</u-row>
											</view>
										</tpx-checkitems>
										
										
										<u-row>
											<uni-icons type="wallet" size="18" color="#B12D29"></uni-icons>
											<text style="font-size: 28rpx;color: #B12D29;" class="pl-10">管理月结卡</text>
										</u-row>
										
									</view>
									
								</view>
							</tpx-checkitems>
						</view>
					</view>
				</template>
				
				<template v-slot:footer>
					<view class="blcok-white-noradius" style="margin-top: 0;margin-bottom: 0;">
						<u-button @click="handleEditItem()" type="primary" size="large" shape="circle" 
							custom-style="height:80rpx;font-size: 30rpx;"
						>确认</u-button>
					</view>
				</template>
			</tpx-layout>
		</view>
	</tpx-dialog>
</template>

<script>
	import { payTypeEnum } from "@/common/enum"
	export default {
		// computed: {
		// 	filDataList() {
		// 		return []
		// 	},
		// },
		props: {
			show: {
				default () {
					return false
				}
			},
			value: {
				default () {
					return ''
				}
			},
			otherDesc: {
				default () {
					return ''
				}
			},
			cardId: {
				default () {
					return ''
				}
			}
			
		},
		data() {
			return {
				...(JSON.parse(JSON.stringify({payTypeEnum}))),
				model: {
					value: this.value,
					cardId: this.cardId,
					otherDesc: this.otherDesc
				},
				dataList: [
					{ title: '寄付现结', val: 1, desc: '快递员取件后，寄方可通过在线支付，扫码，现金等方式付款' },
					{ title: '到付', val: 2, desc: '签收后，收方可通过在线支付，扫码，现金等方式付款' },
					{ title: '其他', val: payTypeEnum.other, desc: '' },
					{ title: '寄付月结', val: payTypeEnum.postMonth, desc: '按月结算运费，需提前开通月结卡' }
				],
				cardList: [
					{ title: '上海风向电子科技有限公司', val: 1},
					{ title: '浙江宁波时尚制衣有限公司', val: 2 }
				],
			}
		},
		created() {

		},
		onHide() {

		},
		destroyed() {},

		methods: {
			handleCloseModal() {
				this.$emit('update:show', false)
				
			},
			handleDataItemChange(val) {
			},
			updateValue(val) {
				
			},
			handleEditItem() {
				const { value, cardId, otherDesc } = this.model
				this.$emit('onChange', this.model)
				this.$emit('update:value', value)
				this.$emit('update:cardId', cardId)
				this.$emit('update:otherDesc', otherDesc)
				this.handleCloseModal()
			}
		}
	}
</script>

<style scoped lang="scss">
	.shet-cont{
		padding: 10rpx 0 30rpx 0;
	}
	.chk-icon{
		position: relative;
		&::after {
			position: absolute;
			content: ' ';
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}
	}
	.pay-item {
		margin-bottom: 30rpx;
		padding: 20rpx 30rpx;
		background: #F6F6F6;
		border-radius: 20rpx;
		border: 2rpx solid transparent;
		&.active {
			border-color: $uni-color-primary;
		}
	}
</style>