unimall/unimall-app/pageA/product/trade_buy.vue

<template>
	
	<view class="container">
		<view v-if="companyId!=2" class="cu-form-group">
			<view class="title">买方</view>
			<view class="title">{{buyer}}</view>
		</view>
		<view v-if="companyId!=2" class="cu-form-group">
			<view class="title">买方电话</view>
			<view class="title">{{buyerPhone}}</view>
		</view>
		<view class="cu-form-group">
			<text class="tit">我的信息</text>
			<view class="con-list">
				<view v-if='bankNameList'>
					<picker @change="bankNameChange" :value="bankNameIndex" :range="bankNameList">
					<view class="picker">
						{{bankNameIndex>-1?bankNameList[bankNameIndex]:'点击选择名头'}}
					</view>
				</picker>
				</view>
				
			</view>
			<button class='cu-btn bg-green shadow' @click="changeZhihang">添加名头</button>
		</view>
		<view  v-if="companyId!=2" class="cu-form-group margin-top">
			<view class="title">价格类型</view>
			<picker @change="PriceTypeChange" :value="priceTypeIndex" :range="priceType">
				<view class="picker">
					{{priceTypeIndex>-1?priceType[priceTypeIndex]:'请选择'}}
				</view>
			</picker>
		</view>
		<view v-if='companyId!=2' class="cu-form-group">
			<view class="title">交接区域</view>
			<picker mode="region" @change="RegionChange" :value="region">
				<view class="picker" v-if="region.length>0">
					{{region[0]}}{{region[1]}}{{region[2]}}
				</view>
				<view class="picker" v-else>
					请选择
				</view>
			</picker>
		</view>
		<view v-if='companyId!=2' class="cu-form-group">
			<view class="title">详细交收地址</view>
			<input placeholder="请填写" name="input" @input="addressInput"></input>
		</view>
		<view v-if='companyId==2' class="cu-form-group">
			<view class="title">库点地址</view>
			<view class="title">{{province+city+area+storeName}}</view>
		</view>
		<view class="cu-form-group">
			<view class="title">最小成交量（吨）</view>
			<view class="title">{{minSale}}</view>
		</view>
		<view v-if="companyId==2" class="cu-form-group">
			<view  class="title">发票类型</view>
			<picker @change="InvoiceTypeChange1" :value="invoiceTypeIndex1" :range="invoiceType1">
				<view class="picker">
					{{invoiceTypeIndex1>-1?invoiceType1[invoiceTypeIndex1]:'请选择'}}
				</view>
			</picker>
		</view>
		<view v-else class="cu-form-group">
			<view  class="title">发票类型</view>
			<picker @change="InvoiceTypeChange" :value="invoiceTypeIndex" :range="invoiceType">
				<view class="picker">
					{{invoiceTypeIndex>-1?invoiceType[invoiceTypeIndex]:'请选择'}}
				</view>
			</picker>
		</view>
		<view v-if='companyId!=2' class="cu-form-group margin-top margin-bottom">
			<view class="title">质量验收方式</view>
			<picker @change="AcceptTypeChange" :value="acceptTypeIndex" :range="acceptType">
				<view class="picker">
					{{acceptTypeIndex>-1?acceptType[acceptTypeIndex]:'请选择'}}
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">出售数量（吨）</view>
			<input placeholder="请填写" name="input" @input="countInput"></input>
		</view>
		<view class="cu-form-group">
			<view v-if='companyId!=2' class="title">协议单价（元/吨）</view>
			<view v-else class="title" style='color:red'>点价（元/吨）</view>
			<input placeholder="请填写" name="input" @input="unitPriceInput"></input>
		</view>
		<view v-if="companyId==2" class="cu-form-group">
			<view class="title">基差</view>
			<view class="title">{{basis}}</view>
		</view>
		<view v-if="companyId==2" class="cu-form-group">
			<view class="title">发票费用（元/吨）</view>
			<view class="title">{{invoiceMoney}}</view>
		</view>
		<view v-if="companyId==2&&unloadingFee" class="cu-form-group">
			<view class="title">卸车费（元/吨）</view>
			<view class="title">{{unloadingFee}}</view>
		</view>
		<view v-if="companyId!=2" class="cu-form-group">
			<view class="title">包装方式</view>
			<input placeholder="请填写 例:袋装XX斤/散装" name="input" @input='packingInput'></input>
		</view>
		<!-- <view class="cu-form-group align-start">
			<view class="title">备注</view>
			<textarea maxlength="-1" :disabled="modalName!=null" @input="textareaInput" placeholder="备注"></textarea>
		</view> -->
		<view v-if="companyId==2" class="cu-form-group">
			<view class="title">总金额（自动计算）</view>
			<view class="title">{{(Number(unitPrice) + Number(basis)+ Number(unloadingFee) + Number(invoiceMoney))*count}}元</view>
		</view>
		<view v-else class="cu-form-group">
			<view class="title">总金额（自动计算）</view>
			<view class="title">{{unitPrice*count}}元</view>
		</view>
		<view v-if="companyId==2" class="cu-form-group align-start">
			<!-- <view class="title">结算价格=点价+基差+发票+卸车费</view> -->
			<view class="title">最终以纸质合同为准</view>
		</view>
		<view  class="cu-form-group align-start">
			<view class="title">备注</view>
			<textarea maxlength="-1" :disabled="modalName!=null" @input="textareaInput" placeholder="备注"></textarea>
		</view>
		<view class="padding flex flex-direction">
			<button class="cu-btn bg-red margin-tb-sm lg" @click="commit">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
			data() {
				return {
					tradeInfo:{
						salebuyId:0,
						packing:'',
						memo:'',
						buyer:'',
						buyerPhone:'',
						unitPrice:0,
						address:'',
						count:0,
						province:'',
						area:'',
						priceType:'',
						invoiceType:'',
						acceptType:'',
						seller:'',
						sellerPhone:'',
						type:1
					},
					invoiceTypeIndex:0,
					invoiceTypeIndex1:0,
					acceptTypeIndex:0,
					priceTypeIndex:0,
					bankNameIndex:0,
					packingType: ['散装', '大袋(50kg)', '小袋(25kg)'],
					invoiceType: ['增值税发票', '普通发票', '不开发票'],
					invoiceType1: ['增值税发票',  '不开发票'],
					acceptType: ['第三方检验（国家检验资质）', '交收地库或港出具的检验', '现场看货','其他'],
					priceType: ['库内价', '到库价', '到港价'],
					priceTypeIndex1:'库内价',
					region: [],
					salebuyId:0,
					packing:'',
					memo:'',
					buyer:'',
					buyerPhone:'',
					unitPrice:0,
					address:'',
					count:0,
					price:'库内价',
					invoice:'增值税发票',
					accept:'',
					seller:'',
					province:'',
					city:'',
					area:'',
					storeName:'',
					sellerPhone:'',
					minSale:0,
					exsitCount:0,
					isFutures:'',
					companyId:'',
					bankNameList:'',
					Company:[],
					tradeCompanyId:'',
					basis:0,
					invoiceMoney:0,
					unloadingFee:0
				};
			},
			onShow() {
				var that=this
				this.$api.request('company', 'getCompany', failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {
					if(res.data.code=='SUCCESS'){
						var data=[]
						if(res.data.data){
							this.Company=res.data.data
						for(let i=0;i<res.data.data.length;i++){
							data.push(res.data.data[i].companyName+' '+res.data.data[i].companyPhone)
						}
						that.bankNameList=data
							this.seller =this.Company[0].companyName
							this.sellerPhone=this.Company[0].companyPhone
							this.tradeCompanyId=this.Company[0].id
						}
						uni.hideLoading()
					}else{
						that.$api.msg(res.data.code)
						uni.hideLoading()
					}
				})
			},
			onLoad(options) {
				console.log(options)
				this.packing = options.packing
				this.salebuyId = options.id
				this.buyer = options.buyer
				this.buyerPhone = options.buyerPhone
				this.minSale = options.minSale
				this.exsitCount = options.exsitCount
				this.isFutures= options.isFutures
				this.province = options.province
				this.city = options.city
				this.area = options.area
				this.storeName=options.storeName
				this.companyId=options.companyId
				this.basis = options.basis
				this.unloadingFee = options.unloadingFee
			},
			methods: {
				InvoiceTypeChange(e) {
					this.invoiceTypeIndex = e.detail.value
					this.invoice = this.invoiceType[this.invoiceTypeIndex];
				},
				InvoiceTypeChange1(e) {
					this.invoiceTypeIndex1 = e.detail.value
					this.invoice = this.invoiceType1[this.invoiceTypeIndex1];
					if(this.invoiceTypeIndex1 == 0){
						this.invoiceMoney = 0
					}
					else{
						this.invoiceMoney = -20
					}
				},
				bankNameChange(e){
					this.bankNameIndex=e.detail.value
					this.seller =this.Company[e.detail.value].companyName
					this.sellerPhone=this.Company[e.detail.value].companyPhone
					this.tradeCompanyId=this.Company[e.detail.value].id
				},
				AcceptTypeChange(e) {
					this.acceptTypeIndex = e.detail.value
					this.accept = this.acceptType[this.acceptTypeIndex];
				},
				packingChange(e){
					this.packingIndex = e.detail.value
					this.packing = this.packingType[this.packingIndex];
				},
				PriceTypeChange(e) {
					this.priceTypeIndex = e.detail.value
					this.price = this.priceType[this.priceTypeIndex]
				},
				RegionChange(e) {
					this.region = e.detail.value
					this.province = this.region[0];
					this.area = this.region[0]+this.region[1]+this.region[2];
				},
				changeZhihang(){
					uni.navigateTo({
						url: '/pageA/pages/newcompany'
					})
				},
				textareaInput(e) {
					this.memo = e.detail.value
				},
				sellerInput(e){
					this.seller = e.detail.value
				},
				sellerPhoneInput(e){
					this.sellerPhone = e.detail.value
				},
				unitPriceInput(e){
					this.unitPrice = e.detail.value
				},
				addressInput(e){
					this.address = e.detail.value
				},
				packingInput(e){
					this.packing = e.detail.value
				},
				countInput(e){
					this.count = e.detail.value
				},
				commit(){
					const that = this
					if (that.companyId !=2 && !that.area ) {
						that.$api.msg('请选择省市区');
						return
					}
					if (that.companyId !=2 && !that.address) {
						that.$api.msg('请填写详细交收地址')
						return
					}
					if (!that.price) {
						that.$api.msg('请选择价格类型')
						return
					}
					if (!that.invoice) {
						that.$api.msg('请选择发票类型')
						return
					}
					// if(!that.accept&&that.isFutures==0){
					// 	that.$api.msg('请选择质量验收方式');
					// 	return
					// }
					if(!that.unitPrice){
						that.$api.msg('请填写协议价格（元/吨）');
						return
					}
					if(!that.count){
						that.$api.msg('请填写出售数量（吨）');
						return
					}
					if(Number(that.count) < Number(that.minSale)){
						that.$api.msg('出售数量不能小于最小成交量');
						return
					}
					if(!that.tradeCompanyId){
						that.$api.msg('请选择公司名头');
						return
					}
					// if(that.isFutures == 0 && that.count > that.exsitCount){
					// 	that.$api.msg('购买数量大于库存量');
					// 	return
					// }
					//this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
					
					//this.$api.msg(`地址${this.manageType=='edit' ? '修改': '添加'}成功`);
					uni.showLoading({
						title: '正在提交',
						mask:true
					})
					that.tradeInfo.salebuyId = that.salebuyId
					that.tradeInfo.buyer = that.buyer
					that.tradeInfo.buyerPhone = that.buyerPhone
					that.tradeInfo.priceType = that.price
					that.tradeInfo.unitPrice = that.unitPrice
					that.tradeInfo.province = that.province
					that.tradeInfo.area = that.area
					that.tradeInfo.address = that.address
					that.tradeInfo.count = that.count
					that.tradeInfo.acceptType = that.accept
					that.tradeInfo.invoiceType = that.invoice
					that.tradeInfo.packing = that.packing
					that.tradeInfo.memo = that.memo
					that.tradeInfo.seller = that.seller
					that.tradeInfo.sellerPhone = that.sellerPhone
					that.tradeInfo.tradeCompanyId = that.tradeCompanyId
					that.tradeInfo.unloadingFee = that.unloadingFee
					that.tradeInfo.invoiceMoney = that.invoiceMoney
					
					that.$api.request('trade', 'addTrade',that.tradeInfo, failres => {
						uni.hideLoading()
						that.$api.msg(failres.errmsg);
						
					}).then(res => {
						uni.hideLoading()
						uni.showModal({
							title: '提示',
							content: "交易申请提交成功",
							showCancel: false,
							confirmText: '确定',
							success: () => {
								uni.navigateBack({
									delta: 2
								})
							}
						})
						// that.$api.prePage().refreshList(data, that.manageType);
					})
				
				}
			}
		}
</script>

<style>
	.cu-form-group input {
		text-align: right;
	}
	.cu-form-group textarea {
		text-align: right;
	}
	.margin-bottom{
		margin-bottom:30px;
	}
</style>