Ci2Order.vue/App/pages/settlement/detail/index.vue

<template>
	<view>
		<z-navbar :title="type==0?'预定结算详情':'婚庆预定结算详情'" back diyBack @goBack="goBack">
			<view slot="right" class="iconfont iconjuxing13" @click="gotoPage(0)"></view>
		</z-navbar>
		<z-tabs v-if="type==1" shadow :tabs="['预定详情','婚庆预定详情']" v-model="stateTab" bgcolor="white" textselectedcolor="#333333"
		 @change="changeTabInfo"></z-tabs>
		<template v-if="stateTab==0">
			<z-cell label="客户姓名" :content="info.customName"></z-cell>
			<z-cell label="客户电话" :content="info.phone||'无'"></z-cell>
			<z-cell label="预定时间" :content="info.orderDate+' '+info.activityBeginTime+'~'+info.activityEndTime"></z-cell>
			<z-cell label="预定场地" :content="info.houseName"></z-cell>
			<z-cell label="收费方式" :contentStyle="{'text-align':'right'}" :content="(info.mainPayTypeText||'无')+(info.paytypeContent||'')"></z-cell>
			<z-cell label="套餐内容" :content="(info.packageName||'无')+(info.packageContent&&info.packageContent.length?('('+info.packageContent+')'):'')"></z-cell>
			<z-cell label="增加项目" :content="info.extraRealMoney+'元'+(info.orderExtraContent&&info.orderExtraContent.length?('('+info.orderExtraContent+')'):'')"></z-cell>
			<z-cell label="已收订金" :content="info.downPayment+'元'"></z-cell>
			<z-cell label="总计应收" :content="(info.orderMoney||0)+'元'"></z-cell>
			<z-cell label="提醒日期" :content="info.alertDate||'无'"></z-cell>
			<z-cell label="预定类型" :content="info.orderTypeText"></z-cell>
			<z-cell label="预定状态" :content="info.orderStateText"></z-cell>
			<z-cell label="顾客来源" :content="info.customFromText" :hideline="type==0?false:true"></z-cell>
			<!-- 没有婚庆时这里有备注 -->
			<template v-if="type==0">
				<z-cell label="备注信息" hideline></z-cell>
				<view class="plr-30 remark">
					{{info.remark||''}}
				</view>
			</template>
		</template>
		<template v-else>
			<z-cell label="新郎姓名" :content="wedinfo.maleName"></z-cell>
			<z-cell label="新娘姓名" :content="wedinfo.femaleName"></z-cell>
			<z-cell label="手机号码" :content="wedinfo.phoneMale||'无'"></z-cell>
			<z-cell label="其他手机号码" :content="wedinfo.phoneFemale||'无'"></z-cell>
			<z-cell label="典礼开始时间" :content="wedinfo.weddingBeginTime"></z-cell>
			<z-cell label="婚庆价格" :content="(wedinfo.orderMoney||0)+'元'"></z-cell>
			<z-cell label="套餐内容" :content="(wedinfo.weddingPackageName||'无')+ (wedinfo.packageContent?wedinfo.packageContent:'')"></z-cell>
			<z-cell label="增加项目" :content="wedinfo.exItemMoney+'元'+(wedinfo.orderExtraContent?wedinfo.orderExtraContent:'')"></z-cell>
			<z-cell label="已收婚庆订金" :content="wedinfo.downPayment+'元'"></z-cell>
			<z-cell label="下单日期" :content="wedinfo.createTime"></z-cell>
			<z-cell label="备注信息" hideline></z-cell>
			<view class="plr-30 remark">
				{{wedinfo.remark}}
			</view>
		</template>
		<template v-if="(type==0&&info.confirmState!='01'&&info.confirmState!='02')||(type==1&&wedinfo.confirmState!='01'&&wedinfo.confirmState!='02')">
			<view class="common_handle_style_zw"></view>
			<view class="common_handle_style shadow-2 flex-n fac fja">
				<view class="common_handle_style_item " @click="gotoPage(1)">
					<view class="common_handle_style_img iconfont iconjuxing26"></view>
					<view class="common_handle_style_text">确认收款</view>
				</view>
				<view class="common_handle_style_item " @click="gotoPage(2)">
					<view class="common_handle_style_img iconfont iconjuxing27"></view>
					<view class="common_handle_style_text">结算订单</view>
				</view>
				<view class="common_handle_style_item " @click="gotoPage(3)" v-if="type==0">
					<view class="common_handle_style_img iconfont iconjuxing27kaobei"></view>
					<view class="common_handle_style_text">取消</view>
				</view>
				<view class="common_handle_style_item " @click="gotoPage(4)" v-else>
					<view class="common_handle_style_img iconfont iconjuxing27kaobei"></view>
					<view class="common_handle_style_text">取消</view>
				</view>
			</view>
		</template>
		<template v-if="(type==0&&info.confirmState=='02')||(type==1&&wedinfo.confirmState=='02')">
			<view class="common_handle_style_zw"></view>
			<view class="common_handle_style shadow-2 flex-n fac fja">
				<view class="common_handle_style_item " @click="gotoPage(5)">
					<view class="common_handle_style_img iconfont iconjuxing26"></view>
					<view class="common_handle_style_text">补账</view>
				</view>
			</view>
		</template>
		<u-toast ref="uToast"></u-toast>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				stateTab: 0,
				isWedding: 0,
				hasWedding: 0,
				type: 0,

				id: '',
				info: {},
				wedinfo: {},
				tabidx:0,
			}
		},
		mounted() {

		},
		onLoad(option) {
			this.type = option.type;
			this.id = option.id;
			this.tabidx=option.idx;
		},
		onShow() {
			this.getData(this.id);
		},
		methods: {
			goBack(){
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2]; //上一个页面

				prevPage.$vm.chooseState=Number(this.tabidx);
				console.warn(prevPage.$vm)
				prevPage.$vm.changeTab(Number(this.type));//重点$vm
				uni.navigateBack({
					delta:1
				})
			},
			changeTabInfo(data) {
				this.stateTab = data;

			},
			getData(orderId) {
				this.$axios.get('app/order/orderDetailById/' + orderId).then(res => {
					console.log(res)
					this.info = res.data;
					this.wedinfo = res.data.orderWedding[0] || [];
					uni.setStorage({
						key: 'orderFollowList',
						data: res.data.orderFollowList
					})
					var packageContent = '',
						orderExtraContent = '',
						paytypeContent = '';

					//普通套餐内容
					for (var i in this.info.orderPackage.itemsExs) {
						packageContent += this.info.orderPackage.itemsExs[i].itemName + '、';
					}
					for (var i in this.info.orderPackage.itemsFoods) {
						packageContent += this.info.orderPackage.itemsFoods[i].foodName + '、';
					}
					if (packageContent.substring(packageContent.length - 1, packageContent.length) == '、') {
						this.info.packageContent = packageContent.substring(0, packageContent.length - 1)||''
					}
					//增加项目内容
					for (var i in this.info.orderExtra.itemsExs) {
						orderExtraContent += this.info.orderExtra.itemsExs[i].itemName + ':' + this.info.orderExtra.itemsExs[i].itemPrice +
							'*' +
							this.info.orderExtra.itemsExs[i].itemCount + '、';
					}
					for (var i in this.info.orderExtra.itemsFoods) {
						orderExtraContent += this.info.orderExtra.itemsFoods[i].foodName + ':' + this.info.orderExtra.itemsFoods[i].foodPrice +
							'*' + this.info.orderExtra.itemsFoods[i].foodCount + '、';
					}
					if (orderExtraContent.substring(orderExtraContent.length - 1, orderExtraContent.length) == '、') {
						this.info.orderExtraContent = orderExtraContent.substring(0, orderExtraContent.length - 1)
					}

					for (var i in this.info.payTypes) {
						if (this.info.payTypes[i].payTypeCode == '03') {
							paytypeContent += '<br/>' + (this.info.payTypes[i].housePrice||0 )+ '元/场'
						}
						if (this.info.payTypes[i].payTypeCode == '01') {
							paytypeContent += '<br/>' + (this.info.payTypes[i].onePrice||0) + '元*' + (this.info.payTypes[i].orderCount||0) + '人=' +
								((this.info.payTypes[i].onePrice||0) * (this.info.payTypes[i].orderCount||0)) + '元';
						}
						if (this.info.payTypes[i].payTypeCode == '02') {
							paytypeContent += '<br/>' + (this.info.payTypes[i].onePrice||0) + '元*' + (this.info.payTypes[i].orderCount||0) + '桌=' +
								((this.info.payTypes[i].onePrice||0) * (this.info.payTypes[i].orderCount||0)) + '元' + (this.info.payTypes[i].bakOrderCount ?
									('（备桌' + this.info.payTypes[i].bakOrderCount + '桌）') : '');
						}
					}


					this.info.paytypeContent = paytypeContent
					if (this.type) {
						var wedpackageContent = '',
							wedorderExtraContent = '';
						for (var i in this.wedinfo.weddingItemsExs) {
							wedpackageContent += this.wedinfo.weddingItemsExs[i].itemName + '、';
						}
						if (wedpackageContent.substring(wedpackageContent.length - 1, wedpackageContent.length) == '、') {
							wedpackageContent = wedpackageContent.substring(0, wedpackageContent.length - 1)
						}

						for (var i in this.wedinfo.extra) {
							wedorderExtraContent += this.wedinfo.extra[i].itemName + ':' + this.wedinfo.extra[i].itemPrice + '*' + this.wedinfo
								.extra[i].itemCount + '、';
						}
						if (wedorderExtraContent.substring(wedorderExtraContent.length - 1, wedorderExtraContent.length) == '、') {
							wedorderExtraContent = wedorderExtraContent.substring(0, wedorderExtraContent.length - 1)
						}
						this.wedinfo.packageContent = wedpackageContent;
						this.wedinfo.orderExtraContent = wedorderExtraContent;
					}
					
				}).catch(err => {
					console.log(err)
					this.$refs.uToast.error(err.msg);
				})
			},
			look() {

			},
			gotoPage(page) {
				console.log(page)
				switch (page) {
					case 0://历史记录
						uni.navigateTo({
							url: '../history/index?id=' + (this.type == 0 ? this.id : this.info.weddingId) + '&type=' + this.type,
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
						break;
					case 1://确认收款
						uni.navigateTo({
							url: '../collection/index?id=' + (this.type == 0 ? this.id : this.info.weddingId) + '&type=' + this.type,
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
						break;
					case 2://结算
						uni.navigateTo({
							url: '../settlement/index?id=' + this.id + (this.type == 0 ? '' : ('&wedId=' + this.info.weddingId)) +
								'&type=' + this.type,
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
						break;
					case 3://取消
						if (this.info.hasWedding == '0') {
							uni.navigateTo({
								url: '../cancel/index?id=' +  this.id+ '&type=' + this.type,
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
						} else {
							this.$refs.uToast.error('此订单存在婚庆订单，请先将婚庆订单取消，再进行取消操作');
						}

						break;
					case 4://取消
					uni.navigateTo({
						url: '../cancel/index?id=' + this.info.weddingId + '&type=' + this.type,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
					break;
					case 5://补账
					uni.navigateTo({
						url: '../supplement/index?id=' + (this.type == 0 ? this.id : this.info.weddingId) + '&type=' + this.type,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
					break;
					
				}
			}
		},

	}
</script>

<style lang="scss" scoped>
	.remark {
		font-size: 28rpx;
		color: #555555;
	}

	.common_handle_style_zw {
		height: 139rpx;
	}

	.iconjuxing13 {
		font-size: 38rpx;
	}

	.common_handle_style {
		position: fixed;
		background: white;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 119rpx;

		.common_handle_style_item {
			text-align: center;
			width: 200rpx;

			.common_handle_style_img {
				width: 53rpx;
				height: 50rpx;
				font-size: 50rpx;
				color: #007AFF;
				margin: 0 auto;
			}

			.common_handle_style_text {
				color: #007AFF;
				font-size: 24rpx;
				line-height: 24rpx;
				margin-top: 10rpx;
			}
		}
	}
</style>