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

<template>
	
	<view class="container">
		<view v-if="companyId!=2" class="cu-form-group">
			<view class="title">卖方</view>
			<view class="title">{{seller}}</view>
		</view>
		<view v-if="companyId!=2" class="cu-form-group">
			<view class="title">卖方电话</view>
			<view class="title">{{sellerPhone}}</view>
		</view>
		<view class="cu-form-group">
			<text class="tit">我的信息</text>
			<view v-if='bankNameList.length>0'>
				<picker @change="bankNameChange" :value="bankNameIndex" :range="bankNameList">
					<view class="picker">
						{{bankNameIndex>-1?bankNameList[bankNameIndex]:'点击选择名头'}}
					</view>
				</picker>
			</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 v-if='isFutures==1' class="title">库容</view>
			<view v-if='isFutures==0' class="title">库存量</view>
			<view class="title">{{exsitCount}}</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 class="cu-form-group">
			<view class="title">购买数量（吨）</view>
			<input placeholder="请填写" name="input" @input="countInput"></input>
		</view>
		<!-- <view v-if='isFutures==0' 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 v-if="companyId!=2" class="cu-form-group">
			<view class="title">包装方式</view>
			<input placeholder="请填写 例:袋装XX斤/散装" name="input" @input='packingInput'></input>
		</view>
		<view  v-else class="cu-form-group margin-top">
			<view class="title">包装方式</view>
			<picker @change="packingChange" :value="packingIndex" :range="packingType">
				<view class="picker">
					{{packingIndex>-1?packingType[packingIndex]:'请选择'}}
				</view>
			</picker>
		</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>
			<view class="title">25KG(含25)以内40元/吨，50KG(含50)以内20元/吨</view>
		</view>
		
		<view v-if="companyId==2" class="cu-form-group">
			<view class="title">结算价格（自动计算）</view>
			<view class="title">{{(Number(unitPrice) + Number(basis) + Number(invoiceMoney) +  Number(packingMoney))*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="请填写包装规格、质量、包装物要求。例:50kg袋装、大粒、彩包"></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:'',
						packingMoney:0,
						type:0,
					},
					invoiceTypeIndex:0,
					invoiceTypeIndex1:0,
					acceptTypeIndex:0,
					priceTypeIndex:0,
					bankNameIndex:0,
					packingIndex:0,
					packingType: ['散装', '袋装'],
					invoiceType: ['不开发票', '普通发票', '增值税发票'],
					invoiceType1: ['不开发票','增值税发票'],
					acceptType: ['第三方检验（国家检验资质）', '交收地库或港出具的检验', '现场看货','其他'],
					priceType: ['库内价', '到库价', '到港价'],
					priceTypeIndex1:'库内价',
					region: [],
					salebuyId:0,
					packing:'',
					memo:'',
					buyer:'',
					buyerPhone:'',
					unitPrice:0,
					address:'',
					count:0,
					price:'库内价',
					invoice:'不开发票',
					accept:'',
					seller:'',
					sellerPhone:'',
					minSale:'',
					province:'',
					city:'',
					area:'',
					storeName:'',
					exsitCount:0,
					isFutures:'',
					bankNameList:'',
					Company:[],
					companyId:'',
					tradeCompanyId:'',
					basis:0,
					basisBig:0,
					basisSmall:0,
					invoiceMoney:0,
					unloadingFee:0,
					packingMoney:0,
					packingIndex:0,
					packing:'散装'
				};
			},
			onLoad(options) {
				this.salebuyId = options.id
				this.seller = options.seller
				this.sellerPhone = options.sellerPhone
				this.isFutures = options.isFutures
				this.minSale = options.minSale
				this.companyId=options.companyId
				this.province = options.province
				this.city = options.city
				this.area = options.area
				this.storeName=options.storeName
				this.exsitCount = Math.floor(options.exsitCount * 100) / 100
				this.basis = options.basis
				this.basisBig = options.basisBig
				this.basisSmall = options.basisSmall
				this.unloadingFee = options.unloadingFee
			},
			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=[]
						this.Company=res.data.data
						if(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)
							}
						}
						if(this.Company){
							this.buyer =this.Company[0].companyName
							this.buyerPhone=this.Company[0].companyPhone
							this.tradeCompanyId=this.Company[0].id
						}
						that.bankNameList=data
						uni.hideLoading()
					}else{
						that.$api.msg(res.data.code)
						uni.hideLoading()
					}
				})
				// uni.getLocation({
				//     type: 'wgs84',
				// 	geocode:true,
				//     success: function (res) {
				//         console.log('当前位置的经度：' + res.longitude);
				//         console.log('当前位置的纬度：' + res.latitude);
				//     }
				// });
			},
			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.buyer =this.Company[e.detail.value].companyName
					this.buyerPhone=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];
					if(this.packingIndex == 0){
						this.packingMoney = 0
					}
					else if(this.packingIndex == 1){
						this.packingMoney = this.basisBig - this.basis
					}
					else if(this.packingIndex == 2){
						this.packingMoney = this.basisSmall - this.basis
					}
				},
				changeZhihang(){
					uni.navigateTo({
						url: '/pageA/pages/newcompany'
					})
				},
				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];
				},
				textareaInput(e) {
					this.memo = e.detail.value
				},
				packingInput(e){
					this.packing = e.detail.value
				},
				buyerInput(e){
					this.buyer = e.detail.value
				},
				buyerPhoneInput(e){
					this.buyerPhone = e.detail.value
				},
				unitPriceInput(e){
					this.unitPrice = e.detail.value
				},
				addressInput(e){
					this.address = 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.count > that.exsitCount){
					// 	that.$api.msg('购买数量大于库存量');
					// 	return
					// }
					//this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
					
					//this.$api.msg(`地址${this.manageType=='edit' ? '修改': '添加'}成功`);
					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.packingMoney = that.packingMoney
					that.tradeInfo.memo = that.memo
					that.tradeInfo.seller = that.seller
					that.tradeInfo.sellerPhone = that.sellerPhone
					that.tradeInfo.tradeCompanyId = that.tradeCompanyId
					that.tradeInfo.invoiceMoney = that.invoiceMoney
					// that.tradeInfo.unloadingFee = that.unloadingFee
					uni.showLoading({
						title: '正在提交',
						mask:true
					})
					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 scoped>
	.cu-form-group input {
		text-align: right;
	}
	.cu-form-group textarea {
		text-align: right;
	}
	.margin-bottom{
		margin-bottom:30px;
	}
	.c-row {
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    align-items: center;
	    padding: 20rpx 30rpx;
	    position: relative;
	}
	.con-list {
	    -webkit-box-flex: 1;
	    -webkit-flex: 1;
	    flex: 1;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-orient: vertical;
	    -webkit-box-direction: normal;
	    -webkit-flex-direction: column;
	    flex-direction: column;
	    color: #303133;
	    line-height: 40rpx;
	    text-align: right;
	    padding-right: 20rpx;
	}
</style>