yiliangyiyun-app/pageA/product/sale_trade.vue

<template>
	
	<view class="container">
		<view class="detail-desc">
			<view class="c-list">
				<view class="c-row b-b">
					<text class="tit">卖方</text>
					<view class="con-list">
						<view v-if='goods.customerTypeFlag==1' class="title">{{goods.customerName}}</view>
						<view v-if='goods.customerTypeFlag==2' class="title">{{goods.compName}}</view>
					</view>
				</view>
				<view class="c-row">
					<text class="tit">买方</text>
					<view class="con-list">
						<view class="title">{{seller}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="detail-desc">
			<view class="c-list">
				<view class="c-row b-b">
					<text class="tit">收货地区</text>
					<view class="con-list">
						<view  class="title">{{receivePrivate}}{{receiveCity}}{{receiveArea}}</view>
					</view>
				</view>
				<view v-if='pcFlag==1' class="c-row  b-b">
					<text class="tit">收货库</text>
					<view class="con-list">
						<view class="title">{{receiveWarehouse}}</view>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">货名</text>
					<view class="con-list">
						<view class="title">{{goodsName}}</view>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">最小成交量（吨）</text>
					<view class="con-list">
						<view class="title">{{minimumVolume}}</view>
					</view>
				</view>
				<view class="c-row">
					<text class="tit">今日基差（元/吨）</text>
					<view class="con-list">
						<view class="title">{{basisPrice}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="detail-desc">
			<view class="c-list">
				<view class="c-row  b-b">
					<text class="tit">发票类型</text>
					<picker style="text-align:right;" @change="InvoiceTypeChange1" :value="invoiceTypeIndex1" :range="invoiceType1">
						<view class="picker">
							{{invoiceTypeIndex1>-1?invoiceType1[invoiceTypeIndex1]:'请选择'}}
						</view>
					</picker>
				</view>
				<view class="c-row b-b">
					<text class="tit">出售数量（吨）<text style='color:#FC3535;'>*</text></text>
					<view class="con-list">
						<input v-model='list.transactionsNumber' type="digit">
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">发票类型</text>
					<picker style="text-align:right;" @change="packingChange" :value="packingIndex" :range="packingType">
						<view class="picker">
							{{packingIndex>-1?packingType[packingIndex]:'请选择'}}
						</view>
					</picker>
				</view>
				<view class='b-b' style='padding:10px 15px;'>
					<text class="tit">袋装备注</text>
					<view style='position:relative;' class='con-list'>
						<textarea maxlength='30' v-model='list.baggingNotes' placeholder="请输入袋装备注，如王中王彩袋，49公斤，大粒" class='textarea' name="" id=""  cols="30" rows="3"></textarea>
					<text style='position:absolute;right:0;bottom:2px;'>{{list.baggingNotes.length}}/30个字</text>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">点价（元/吨）<text style='color:#FC3535;'>*</text></text>
					<view class="con-list">
						<input v-model='list.pointPrice' placeholder="请输入出售数量" type="digit">
					</view>
				</view>
				<view  v-if='invoiceTypeIndex1==0&&goods.customerTypeFlag==1' class="c-row b-b">
					<text class="tit">发票费用（元/吨）</text>
					<view class="con-list">
						<input disabled value='-20' placeholder="请输入出售数量" type="digit">
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">包装费（元/吨）</text>
					<view class="con-list">
						<input v-model='list.packingFee' placeholder="请输入包装费" type="digit">
					</view>
				</view>
				<view  style='padding:10px 15px;'>
					<view class='flex justify-between'>
						<text class="tit">结算价格（元/吨）</text>
						<view class="con-list">
							<input disabled v-model='list.settlementPrice' placeholder="请输入包装费" type="digit">
						</view>
					</view>
					<view style='font-size:11px;color:#AFB3BF;'>结算价格=点价+基差+发票费用+包装费</view>
				</view>
			</view>
		</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 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 {
					goodsName:'',
					goods:{},
					receiveWarehouse:'',
					receivePrivate:'',
					receiveCity:'',
					receiveArea:'',
					minimumVolume:0,
					basisPrice:0,
					pcFlag:0,
					list:{
						transactionsNumber:0,
						baggingNotes:'',
						pointPrice:0,
						packingFee:'',
						settlementPrice:0
					},
					invoiceTypeIndex:0,
					invoiceTypeIndex1:0,
					acceptTypeIndex:0,
					priceTypeIndex:0,
					bankNameIndex:0,
					packingIndex:0,
					packingType: ['散装', '大装','小袋'],
					invoiceType: ['不开发票', '普通发票', '增值税发票'],
					invoiceType1: ['不开发票','增值税发票'],
					acceptType: ['第三方检验（国家检验资质）', '交收地库或港出具的检验', '现场看货','其他'],
					priceType: ['库内价', '到库价', '到港价'],
					priceTypeIndex1:'库内价',
					region: [],
					id: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.receiveWarehouse=options.receiveWarehouse
				this.receivePrivate=options.receivePrivate
				this.receiveCity=options.receiveCity
				this.receiveArea=options.receiveArea
				this.minimumVolume=options.minimumVolume
				this.basisPrice=options.basisPrice
				this.id = options.id
				this.pcFlag = options.pcFlag
				this.goodsName = options.goodsName
				this.seller = options.seller
				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() {
				this.$api.doRequest('get', '/identityAuthenticationInfo/getInfo',{commonId:111111}).then(res => {
					if(res.data.code==200){
						this.goods=res.data.data
					}
					uni.hideLoading()
				})
				// 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()
						if(failres.errmsg){
							uni.showToast({
								title: failres.errmsg,
								icon: 'none',
								duration: 2000
							})
						}
						else{
							uni.showToast({
								title: "系统异常，请联系管理员",
								icon: 'none',
								duration: 2000
							})
						}
						
					}).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;
	}
	/*  详情 */
	.detail-desc {
		background: #fff;
		margin-top: 16upx;
		margin:10px;
		position:relative;
		z-index:4;
		border-radius:5px;
		.d-header {
			display: flex;
			padding:10px;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			position: relative;
			border-bottom:1px solid #EEEEEE;
			text {
				padding: 0 20upx;
				position: relative;
				z-index: 1;
			}
		}
	}
	.c-list picker .picker {
	    line-height: 80rpx;
	    font-size: 24rpx;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    overflow: hidden;
	    width: 100%;
	    text-align: right;
	}
	.c-list picker {
	    -webkit-box-flex: 1;
	    -webkit-flex: 1;
	    flex: 1;
	    padding-right: 10px;
	    overflow: hidden;
	    position: relative;
	}
	.c-list {
		font-size: $font-sm + 2upx;
		color: $font-color-base;
		background: #fff;
	
		.c-row {
			display: flex;
			align-items: center;
			padding: 20upx 30upx;
			position: relative;
		}
	
		.tit {
			width: 220upx;
		}
	
		.con {
			flex: 1;
			color: $font-color-dark;
	
			.selected-text {
				margin-right: 10upx;
			}
		}
	
		.bz-list {
			height: 40upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;
	
			text {
				display: inline-block;
				margin-right: 30upx;
			}
		}
	
		.con-list {
			flex: 1;
			display: flex;
			flex-direction: column;
			color: $font-color-dark;
			line-height: 40upx;
			text-align: right;
			padding-right: 20upx;
		}
	
		.red {
			color: $uni-color-primary;
		}
	}
	.textarea{
		background:#F9F9FA;
		font-size:12px;
		text-align:left;
		width:100%;
		height:60px;
		padding:10px;
		border-radius:5px;
		margin-top:10px;
	}
</style>