Ci2Order.vue/App/pages/component/paymentWay/paymentWay.vue

<template>
	<view>
		<z-text  arrow v-model="paywaycontent" :placeholder="placeholder" @click="visible=true"></z-text>
		<z-slide-card title="收费方式" :visible.sync="visible" @beforeClose="beforeClose" rightBtnText="确定" @rightClick="submit"
		 ref="slide">
			<z-tabs class="shadow-2" v-if="showtab" :tabs="tabList" v-model="stateTab" @change="changeTabs" bgcolor="white"
			 textselectedcolor="#333333"></z-tabs>
			<z-card class="mt-40" v-show="stateTab==0">
				<z-cell label="每人价格" height="100rpx">
					<z-input type="number" v-model="perPeoplePrice" placeholder="¥" :max="100000" :min="0" @change="changeperPeoplePrice"></z-input>
				</z-cell>
				<z-cell label="预定人数" height="100rpx" hideline>
					<z-input type="digit" v-model="peopleNum" placeholder="填写预定人数" :max="1000" :min="0"  :decimal="1" :step="0.5" @change="changepeopleNum"></z-input>
				</z-cell>
			</z-card>
			<z-card class="mt-40" v-show="stateTab==1">
				<z-cell label="每桌价格" height="100rpx">
					<z-input type="number" v-model="perTablePrice" placeholder="¥"  :max="100000" :min="0"></z-input>
				</z-cell>
				<z-cell label="预定桌数" height="100rpx" hideline>
					<z-input type="digit" v-model="tableNum" placeholder="填写预定桌数" :max="1000" :min="0"  :decimal="1" :step="0.5"></z-input>
				</z-cell>
			</z-card>
			<z-card class="mt-40" v-show="stateTab==2">
				<z-cell label="场地费" height="100rpx">
					<z-input type="number" v-model="areaMoney" placeholder="¥"  :max="100000" :min="0"></z-input>
				</z-cell>
				<z-cell label="加桌" height="100rpx">
					<switch :checked="addTables" @change="changeaddTables" />
				</z-cell>
				<z-cell label="加人" height="100rpx" :hideline="!addTables&&!addPeoples">
					<switch :checked="addPeoples" @change="changeaddPeoples" />
				</z-cell>
				<template v-if="addTables">
					<z-cell label="每桌价格" height="100rpx">
						<z-input type="number" v-model="perTablePrice" placeholder="¥"  :max="100000" :min="0"></z-input>
					</z-cell>
					<z-cell label="预定桌数" height="100rpx" >
						<z-input type="digit" v-model="tableNum" placeholder="填写预定桌数" :max="1000" :min="0"  :decimal="1" :step="0.5"></z-input>
					</z-cell>
				</template>
				<template v-if="addPeoples">
					<z-cell label="每人价格" height="100rpx">
						<z-input type="number" v-model="perPeoplePrice" placeholder="¥"  :max="100000" :min="0"></z-input>
					</z-cell>
					<z-cell label="预定人数" height="100rpx" hideline>
						<z-input type="digit" v-model="peopleNum" placeholder="填写预定人数" :max="1000" :min="0" :decimal="1" :step="0.5"></z-input>
					</z-cell>
				</template>
			</z-card>
			<z-card class="paytotal mt-40 flex-n fac fje">
				<view class="plr-20">合计：{{totalMoney}}</view>
			</z-card>
			<z-card class="mt-40" v-show="addTables||stateTab==1">
				<z-cell label="备用桌数" hideline>
					<z-input type="number" v-model="bdesks" placeholder="填写备用桌数" :max="1000"></z-input>
				</z-cell>
			</z-card>
		</z-slide-card>
	</view>
</template>

<script>
	export default {
		props: {
			multiple: Boolean,
			value: String | Array,
			placeholder: String,
			showtab: {
				type: Boolean,
				default: true
			},
			payTypes: Array
		},
		model: {
			prop: 'value',
			event:'input'
		},
		data() {
			return {
				visible: false,
				stateTab: 0,
				paywayList:[],
				tabList:[],
				addTables: false,
				addPeoples: false,
				paywaycontent: '',
				perTablePrice: '',
				tableNum: '',
				perPeoplePrice: '',
				peopleNum: '',
				areaMoney: '',
				bdesks: '',

				oldpayTypes: [],
				oldstateTab: '01'
			}
		},
	onBackPress() {
		  if(this.visible) {  
		    this.visible = false;  
		    return true;  
		  }  
		},
		mounted() {
			this.getPaywayList()
		},
		computed: {
			totalMoney() {
				if (this.stateTab == 0) {
					return Number(this.perPeoplePrice || 0) * Number(this.peopleNum || 0);
				}
				if (this.stateTab == 1) {
					return Number(this.perTablePrice || 0) * Number(this.tableNum || 0);
				}
				if (this.stateTab == 2) {
					var money = 0;
					if (this.addPeoples) {
						money += Number(this.perPeoplePrice || 0) * Number(this.peopleNum || 0);
					}
					if (this.addTables) {
						money += Number(this.perTablePrice || 0) * Number(this.tableNum || 0);
					}
					money += Number(this.areaMoney || 0);
					return money;

				}

			}
		},
		watch: {
			value(newval, oldval) {
				this.oldstateTab = newval||'01';
				this.getState(newval);
			},
			payTypes(newval, oldval) {
				this.oldpayTypes = newval;
				this.getData(newval);
			}
		},
		methods: {
			changeperPeoplePrice(data){
				this.perPeoplePrice=data;
			},
			changepeopleNum(data){
				this.peopleNum=data;
			},
			getPaywayList(){
				 this.$axios.post('app/dic/payTypeCode', {
				                    "parentId": "1001",
				                    "dicType": " pay_type_code "
				                }).then(res => {
				                    console.log('收费方式', res.data)
				                    this.paywayList = res.data.list;
									for(var i in this.paywayList){
										this.tabList.push(this.paywayList[i].dicName);
									}
				                }).catch(err => {
				                    console.log(err.msg);
				                })
			},
			getState(state) {
				if (state == '01') {
					this.stateTab = 0;
				} else if (state == '02') {
					this.stateTab = 1;
				} else {
					this.stateTab = 2;
				}
			},
			getData(payTypes) {
				for (var i in payTypes) {
					if (payTypes[i].payTypeCode == '01') {
						if (this.stateTab == 2) {
							this.addPeoples = true;
						}

						this.perPeoplePrice = payTypes[i].onePrice;
						this.peopleNum = payTypes[i].orderCount;
					}
					if (payTypes[i].payTypeCode == '02') {
						if (this.stateTab == 2) {
							this.addTables = true;
						}
						this.bdesks = payTypes[i].bakOrderCount;
						this.perTablePrice = payTypes[i].onePrice;
						this.tableNum = payTypes[i].orderCount;


					}
					if (payTypes[i].payTypeCode == '03') {
						this.areaMoney = payTypes[i].housePrice;
					}
				}
				this.getContent();


			},
			getContent() {
				if (this.stateTab == 0) {
					this.paywaycontent = (this.perPeoplePrice||0) + '元 * ' + (this.peopleNum||0) + '人 = ' + this.totalMoney + '元';
				} else if (this.stateTab == 1) {
					this.paywaycontent = (this.perTablePrice||0) + '元 * ' + (this.tableNum||0) + '桌 = ' + this.totalMoney + '元' + (this.bdesks ?
						('(备' + this.bdesks + ')') : '');
				} else {
					var content = '';
					content += (this.areaMoney||0) + '元/场,';
					if ((this.addTables && this.tableNum) || (this.addPeoples && this.peopleNum)) {
						content += '另加';
						if (this.tableNum) {
							content += (this.tableNum||0) + '桌' + (this.bdesks ? ('(备' + this.bdesks + '桌)') : '') + ',';
						}
						if (this.peopleNum) {
							content += (this.peopleNum||0) + '人,'
						}
					}
					if (content.length > 0)
						content = content.substring(0, content.length - 1);
						
						
					this.paywaycontent = content;

				}
				
			},
			changeaddTables(e) {
				this.addTables = e.detail.value;
			},
			changeaddPeoples(e) {
				this.addPeoples = e.detail.value;
			},
			changeTabs() {
				this.addTables = false;
				this.addPeoples = false;
				this.perTablePrice = '';
				this.tableNum = '';
				this.perPeoplePrice = '';
				this.peopleNum = '';
				this.areaMoney = '';
				this.bdesks = '';
				
			},
			beforeClose() {
				this.getState(this.oldstateTab);
				this.getData(this.oldpayTypes);
			},
			submit() {
				// this.visible=false;
				var payTypes = [];
				if (this.stateTab == 0) {
					if (this.perPeoplePrice == '') {
						return uni.showToast({
							title: '请输入每人价格',
							icon: 'none'
						});
					}
					if (this.peopleNum == '') {
						return uni.showToast({
							title: '请输入预定人数',
							icon: 'none'
						});
					}
					payTypes.push({
						onePrice: this.perPeoplePrice,
						payType: '01',
						orderCount: this.peopleNum,
						payTypeCode: '01',
					});


				}
				if (this.stateTab == 1) {
					if (this.perTablePrice == '') {
						return uni.showToast({
							title: '请输入每桌价格',
							icon: 'none'
						});
					}
					if (this.tableNum == '') {
						return uni.showToast({
							title: '请输入预定桌数',
							icon: 'none'
						});
					}
					payTypes.push({
						onePrice: this.perTablePrice,
						payType: '02',
						payTypeCode: '02',
						orderCount: this.tableNum,
						bakOrderCount: this.bdesks
					});
				}
				if (this.stateTab == 2) {
					if (this.perTablePrice == '' && this.addTables) {
						return uni.showToast({
							title: '请输入每桌价格',
							icon: 'none'
						});
					}
					if (this.tableNum == '' && this.addTables) {
						return uni.showToast({
							title: '请输入预定桌数',
							icon: 'none'
						});
					}
					if (this.perPeoplePrice == '' && this.addPeoples) {
						return uni.showToast({
							title: '请输入每人价格',
							icon: 'none'
						});
					}
					if (this.peopleNum == '' && this.addPeoples) {
						return uni.showToast({
							title: '请输入预定人数',
							icon: 'none'
						});
					}
					if (this.addPeoples) {
						payTypes.push({
							onePrice: this.perPeoplePrice,
							payType: '01',
							orderCount: this.peopleNum,
							payTypeCode: '01',
						});
					}
					if (this.addTables) {
						payTypes.push({
							onePrice: this.perTablePrice,
							payType: '02',
							payTypeCode: '02',
							orderCount: this.tableNum,
							bakOrderCount: this.bdesks
						});
					}
					payTypes.push({
						housePrice: this.areaMoney,
						payType: '03',
						payTypeCode: '03'
					});


				}
				this.getContent();
				this.$emit('payTypes', payTypes)
				this.$emit('input',this.paywayList[this.stateTab].dicCode);
				this.$refs.slide.close();
				this.$emit('getMainPayTypeText',this.tabList[this.stateTab]);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.paytotal {
		color: #999999;
		line-height: 86rpx;
		font-size: 32rpx;
	}
</style>