front-end/hdApp/src/admin/billing/affirm.vue

<template>
	<view class="affirm-page">
		<view class="affirm-view overscroll">
			<form>
				<view class="module-com">
					<view class="commodity-view">
						<view class="commodity-list">
							<view class="commodity-item" v-for="(item, index) in selectList" :key="index" >
								<image class="item-icon" :src="item.cover" />
								<view class="item-info">
									<view class="info-line">
										<text class="item-name">{{ item.itemName }}</text>
										<text class="item-price">
											<text class="price">
												¥{{ item.userPrice ? parseFloat(item.userPrice) : 0 }}
											</text>
										</text>
									</view>
									<view class="info-line">
										<text class="item-type" v-if="item.ratioType == 0">{{item.ratio}}{{item.smallUnit}}/{{item.bigUnit}}</text>
										<text class="item-type" v-else>若干{{item.smallUnit}}/{{item.bigUnit}}</text>
										<text class="item-count">
											x <text v-if="Number(item.bigCount) > 0">{{ item.bigCount }}{{item.bigUnit}}</text>
											<text v-if="Number(item.smallCount) > 0">{{ item.smallCount }}{{item.smallUnit}}</text>
										</text>
									</view>
								</view>
							</view>
						</view>
						<view class="summary-bar">
							<view class="operate-view" @click="gobackEvent">
								<text class="iconfont icongouwuche"></text>返回修改
							</view>
							<view class="describe-view">
								共<text v-if="Number(allCount.bigLength)>0">{{ allCount.bigLength }}扎</text>
								<text v-if="Number(allCount.smallLength)>0">{{ allCount.smallLength }}支</text>，
								合计 <text class="price">¥{{ allPrice }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="module-com input-line-wrap">
					<tui-list-cell class="line-cell" :hover="false" :arrow="false">
						<view class="tui-title ">客户</view>
						<view class="tui-input" v-if="clientInfo.id">{{ clientInfo.name }}</view>
						<view class="tui-placeholder" style="width: 100%" v-else>游客</view>
					</tui-list-cell>

					<tui-list-cell class="line-cell" :hover="false" :arrow="false">
						<view class="tui-title">结账方式</view>
						<button @tap="hasPay = 1" class="admin-button-com middle" :class="hasPay == 1 ? 'blue' : 'default'">线下</button>
						<button @click="hasPay = 2" class="admin-button-com middle" :class="hasPay == 2 ? 'blue' : 'default'">赊账</button>
					</tui-list-cell>

					<tui-list-cell class="line-cell" :arrow="true" v-if="hasPay == 1">
						<div class="tui-title">线下方式</div>
						<picker mode="selector" :value="payWay" :range="payWayList" range-key="name" @change="payWayChange" class="tui-input" >
						<input v-model="payWay" name="payWay" type="text" hidden />
						<div style="padding:6upx 0 6upx 0;">{{payWayList[payWayindex].name}}</div>
						</picker>
					</tui-list-cell>

					<tui-list-cell class="line-cell" :hover="false" :arrow="false" >
						<view class="tui-title ">包装费</view>
						<input type="number" placeholder="包装费" @input="countAllPrices()" v-model="packingMoney" placeholder-class="tui-placeholder">
					</tui-list-cell>

					<tui-list-cell class="line-cell" :hover="false" :arrow="false" >
						<view class="tui-title ">运费</view>
						<input type="number" placeholder="选填" v-model="freight" @input="countAllPrices()" placeholder-class="tui-placeholder">
					</tui-list-cell>

					<tui-list-cell class="line-cell" :hover="false" :arrow="false" >
						<view class="tui-title">总金额</view>
						<text style="color: #3385FF" >{{	(allPrice+Number(packingMoney)+Number(freight)).toFixed(2)  }}</text>
					</tui-list-cell>

					<tui-list-cell class="line-cell" :hover="false" :arrow="false" >
						<view class="tui-title">实收金额</view>
						<view class="flex-space" style="width: 100%;">
							<input style="border: 1px solid #eee;color: #3385FF;width: 60%;height:70upx;" type="number" @focus="modifyPrice='',discountIndex=0" v-model="modifyPrice" placeholder-class="tui-placeholder"/>
							<picker style="border: 1px solid #eee;width: 30%;" @change="discountChange" :value="discountIndex" :range="discount">
								<view class="flex-space" style="height:70upx;">
									<view class="uni-input">{{discount[discountIndex]}}</view>
									<i class="iconfont iconxiangyou"></i>
								</view>
							</picker>
						</view>
						<!--<input style="border: 1px solid #eee;color: #3385FF;width: calc(100%);" type="number" @focus="modifyPrice=''" v-model="modifyPrice" placeholder-class="tui-placeholder"/>-->
					</tui-list-cell>

					<tui-list-cell class="line-cell" :hover="false" :arrow="false" >
						<view class="tui-title">优惠</view>
						<text style="color: #3385FF">{{	((allPrice+Number(packingMoney)+Number(freight)).toFixed(2) - modifyPrice).toFixed(2) }}</text>
					</tui-list-cell>
				</view>
			</form>
		</view>
		<view class="under-bar">
			<view class="price-view">
				<text class="price-title">收款</text>
				<text class="price-number">
					¥ <text class="large">{{ modifyPrice }}</text>
				</text>
			</view>
			<button class="admin-button-com blue big" @click="affirmFormSubmit">开单</button>
		</view>
		<!-- 选择客户 -->
		<AppCustomerSel :show.sync="showCustomer" @change="changeCustomerFn" />
	</view>
</template>

<script>
import TuiListCell from "@/components/plugin/list-cell";
import AppAvatarModule from "@/components/module/app-avatar";
import SimpleAddress from "@/components/plugin/simple-address";
import AppAreaSel from "@/components/app-area-sel";
import AppCustomerSel from "@/components/app-customer-sel";
import productMins from "@/mixins/product";
import appFormRadioBtn from "@/components/app-formRadio-btn";
import appAddressGroup from "@/components/app-address-group";
import appSendTime from "@/components/app-send-time";
const formUtil = require("@/utils/formValidation.js");
import { createOrder } from "@/api/order/index";
import { mapActions, mapGetters } from "vuex";
export default {
	name: "affirm",
	components: {
		TuiListCell,
		AppAvatarModule,
		SimpleAddress,
		AppAreaSel,
		AppCustomerSel,
		appFormRadioBtn,
		appAddressGroup,
		appSendTime
	},
	mixins: [productMins],
	data() {
		return {
			autoLoad: false,
			packingMoney:'',//包装费
			freight:'',//运费
			modifyPrice:0,//真实金额
			payWay:0,//支付类型
			clientInfo: '',//客户信息
			showCustomer: false,
			sendType:1,
			discountIndex:0,
			discount:['打折','95折','9折','85折','8折','75折','7折','65折','6折'],
			payWayList:[{name:"线下微信",id:0},{name:"线下支付宝",id:1},{name:"现金",id:4},{name:"银行卡",id:5}],
			payWayindex:0,
			hasPay:1
		};
	},
	onLoad() {
		if (!this.getMerchantInfo) {
			this.initMerchantInfo().then(data => {
				uni.setNavigationBarTitle({
					title: data.name
				});
			});
		} else {
			uni.setNavigationBarTitle({
				title: this.getMerchantInfo.name
			});
		}
		this.modifyPrice = this.allPrice.toFixed(2);
	},
	computed: {
		...mapGetters(["getMerchantInfo", "getLoginInfo","getDictionariesInfo"])
	},
	methods: {
		...mapActions(["initMerchantInfo"]),
		payWayChange(e){
			let index = e.detail.value
			this.payWayindex = index
      		this.payWay = this.payWayList[index].id
		},
		discountChange(e){
			this.discountIndex = e.target.value;
			let discount = 0;
			let Prices = this.allPrice.toFixed(2)
			let allPrices = (Number(Prices) + Number(this.freight) + Number(this.packingMoney)).toFixed(2);
			switch (e.target.value) {
				case '0':
					discount = 0
					break;
				case '1':
					discount = (allPrices - (allPrices * 0.95)).toFixed(2);
					break;
				case '2':
					discount = (allPrices - (allPrices * 0.9)).toFixed(2);
					break;
				case '3':
					discount = (allPrices - (allPrices * 0.85)).toFixed(2);
					break;
				case '4':
					discount = (allPrices - (allPrices * 0.8)).toFixed(2);
					break;
				case '5':
					discount = (allPrices - (allPrices * 0.75)).toFixed(2);
					break;
				case '6':
					discount = (allPrices - (allPrices * 0.7)).toFixed(2);
					break;
				case '7':
					discount = (allPrices - (allPrices * 0.65)).toFixed(2);
					break;
				case '8':
					discount = (allPrices - (allPrices * 0.6)).toFixed(2);
					break;
			}
			this.modifyPrice = (allPrices - discount).toFixed(2);
		},
		countAllPrices(){
			let allPrices = this.allPrice.toFixed(2)
			this.modifyPrice = (Number(allPrices) + Number(this.freight) + Number(this.packingMoney)).toFixed(2);
		},
		changeCustomerFn(info) {
			this.clientInfo = info;
		},
		affirmFormSubmit(){

			if(this.$util.isEmpty(this.selectList)){
				this.$msg('请选择花材')
				return false
			}

			let product = []
			this.selectList.forEach((item,idx,arr) => {
				let unitType = Number(item.bigCount)>0 ? 0 : 1
				let num = Number(item.bigCount)>0 ? Number(item.bigCount) : Number(item.smallCount)
				let unitPrice = item.userPrice ? item.userPrice : 0
				let current = {productId:item.id,bigNum:item.bigCount,smallNum:item.smallCount,classId:item.classId,num:num,
				itemId:item.itemId,property:item.property,unitType:unitType,unitPrice:unitPrice}
				product.push(current)
			})
			let packingFee = Number(this.packingMoney) > 0 ? Number(this.packingMoney) : 0 
			let options = {
				orderType:2,//开单类型，1商品开单 2花材开单
				packingFee:packingFee,
				sendCost:this.freight,
				customId:this.clientInfo.id,
				payWay:this.payWay,
				sendType:this.sendType,
				modifyPrice: this.modifyPrice,
				product:JSON.stringify(product),
				hasPay:this.hasPay
			};
			let that = this;
			that.$util.confirmModal({content:'确认开单？'},() => {
				uni.showLoading({mask:true})
				createOrder(options).then(res => {
					uni.hideLoading()
					that.removeFromSaveDirect()
					const { data: { id } } = res
					let url = `/admin/billing/result?orderId=${id}`;
					uni.redirectTo({url: url})
				})
			})
		},
		gobackEvent() {
			if(this.option.customId){
				this.$util.pageTo({url: '/admin/billing/index',type:2,query: {customId: this.option.customId}})
			}else{
				this.$util.pageTo({url: '/admin/billing/index',type:2})
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.admin-button-com {
	margin-right: 20upx;
}
.affirm-page {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	.affirm-view {
		flex: 1;
		padding: 20upx;
		background-color: #f0f2f6;
		.commodity-view {
			display: flex;
			flex-direction: column;
			.commodity-list {
				padding: 20upx;
				.commodity-item {
					display: flex;
					margin-bottom: 20upx;
					.item-icon {
						flex-shrink: 0;
						width: 140upx;
						height: 140upx;
					}
					.item-info {
						display: flex;
						flex-direction: column;
						justify-content: center;
						flex: 1;
						margin-left: 20upx;
						.info-line {
							margin-bottom: 20upx;
							display: flex;
							justify-content: space-between;
							align-items: flex-end;
							.item-name {
								color: #333333;
								font-size:30upx;
								font-weight:bold;
							}
							.item-price {
								color: #333;
								font-size: 22upx;
								.price {
									font-size: 32upx;
									font-weight: bold;
								}
							}
							.item-type {
								color: #999;
								font-size: 24upx;
							}
							.item-count {
								color: #666;
								font-size: 24upx;
							}
						}
					}
				}
			}
			.summary-bar {
				padding: 0 20upx;
				height: 90upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-top: 1px solid #eeeeee;
				.operate-view {
					display: flex;
					align-items: center;
					color: #3385ff;
					font-size: 30upx;
					font-weight:bold;
					.iconfont {
						margin-right: 20upx;
						font-size: 40upx;
					}
				}
				.describe-view {
					display: flex;
					align-items: center;
					color: #333;
					font-size: 24upx;
					.price {
						font-weight: bold;
						font-size: 34upx;
						margin-left:8upx;
					}
				}
			}
		}
		.module-com {
			background-color: #fff;
			margin-bottom: 20upx;
			border-radius: 10upx;
			overflow: hidden;
			.member-wrap {
				.member-det {
					font-size: 24upx;
					margin-left: 20upx;
				}
			}
			.remark-wrap {
				align-items: flex-start;
				.remark {
					height: 240upx;
				}
			}
		}
	}
	.under-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20upx;
		width: 100%;
		height: 100upx;
		background-color: #fff;
		box-shadow: 0upx -1px 6upx 0upx rgba(4, 0, 0, 0.06);
		.price-view {
			display: flex;
			align-items: center;
			font-size: 24upx;
			.price-title {
				color: #333;
			}
			.price-number {
				margin: 0 20upx;
				color: #ff2842;
				.large {
					font-size: 40upx;
				}
			}
		}
		.admin-button-com {
			width: 200upx;
		}
	}
}
</style>