unimall/unimall-app/pageA/pages/deliver_goods.vue

<template>
	<view>
		<view v-if='listData.length>0'>
			<block v-for="(item,index) in listData" :key="code">
				<view class="cardwrap">
					<view class='flex justify-between'>
						<view>车号</view>
					    <view>{{item.carNo}}</view>
					</view>
					<view v-if="item.memo" class='flex justify-between'>
						<view class="th">件数</view>
						<view class="td">{{item.memo}}</view>
					</view>
					<view class='flex justify-between'>
						<view class="th ">发货日期</view>
						<view class="td">{{item.issuance | dateFormat1}}</view>
					</view>
					<view v-if="contractType =='销售合同'" class='flex justify-between'>
						<view class="th ">结算价(元/吨)</view>
						<view class="td" v-if="item.unitPrice1 == 0">未结算</view>
						<view class="td" v-else>{{item.unitPrice1}}</view>
					</view>
					<view  class='flex justify-between'>
						<view class="th ">净重(吨)</view>
						<view class="td" v-if='item.netWeight'>{{item.netWeight}}(发)</view>
						<view class="td" v-if='item.netWeightRec'>{{item.netWeightRec}}(收)</view>
					</view>
					<view v-if="contractType =='销售合同' " class='flex justify-between'>
						<view class="th ">验收情况</view>
						<view class="td" v-if='item.checkType==1'>已验收</view>
						<view class="td" v-else>未验收</view>
					</view>
					<view v-if="contractType =='销售合同' " class='flex justify-between'>
						<view class="th">扣款(元/吨)</view>
						<view class="td">{{item.remarks}}</view>
					</view>
					<view v-if="contractType =='销售合同'&&item.poundImg " class='flex justify-between'>
						<view class="poundtital">到货磅单</view>
							<view class="grid col-2 grid-square bg-img" v-if="item.poundImg != ''" @tap="ViewImage" :data-url="item.poundImg">
							 <image class='poundimg' :src="item.poundImg" mode="aspectFit"></image>
						</view>
					</view>
					<view v-if="contractType =='采购合同'&&item.poundImg " class='flex justify-between'>
						<view class="poundtital">发货磅单</view>
							<view class="grid col-2 grid-square bg-img" v-if="item.poundImg != ''" @tap="ViewImage" :data-url="item.poundImg">
							 <image class='poundimg' :src="item.poundImg" mode="aspectFit"></image>
						</view>
					</view>
					<view v-if="item.taskStatus==4 && contractType =='销售合同'" class="padding flex flex-direction">
						<button class="cu-btn bg-orange margin-tb-sm" @click="commit">确认卸货</button>
					</view>
				</view>
			</block>
		</view>
		<view style='text-align:center;' v-else>
			当前合同暂无车辆
		</view>
		<drag-button 
			v-if="contractType =='销售合同'&& tradeStatus!='4'"
			:isDock="true"
			:existTabBar="true"
			text="发货"
			location="100"
			background="rgba(36, 90, 141, 0.5)"
			boxshadow="0 0 6rpx rgba(36, 90, 141, 0.5)"
			@btnClick="deliver"
			/>
			<!-- <block v-if="tradeStatus!='3' && tradeStatus!='4'">
			<drag-button
				:isDock="true"
				:existTabBar="true"
				text="点价"
				location="40"
				background='rgba(36, 90, 141, 0.5)'
				boxshadow='0 0 6rpx rgba(36, 90, 141, 0.5)'
				@btnClick="price"
			/>
			</block> -->
		
		<!-- <view v-show='showPopup' class="popupItem">
			<view class='wrap'>
				
				<view class="btnPopup">
					<button type="default" @click="btnCancel">取消</button>
					<button class='btnConfirm' @click="btnConfirm">确定</button>
				</view>
			</view>
		</view> -->
		<u-modal v-model="showPopup"
		    :mask-close-able="true"
			title="修改点价"
			show-cancel-button="true"
			confirm-text="确定"
			cancel-text="取消"
			@confirm="btnConfirm"
			@cancel="btnCancel">
			<view class="cu-form-group">
				<view  class="title">允许点价时间段:</view>
			</view>
			<view class="cu-form-group">
				11:30-12：30
			</view>
			<view class="cu-form-group">
				15:00-20:00
			</view>
			<view class="cu-form-group">
				23:00-8:00
			</view>
			<view class="cu-form-group">
				<view  class="title">点价金额</view>
				<input placeholder="请输入点价" @input="btnDown" v-model="unitPrice"></input>
			</view>
		</u-modal>
	</view>
</template>
<script>
	import {  
	    mapState 
	} from 'vuex';
	export default {
		data() {
			return {
				listData:[],
				id:'',
				showPopup:false,
				unitPrice:'',
				contractType:'',
				tradeStatus:''
			};
		},
		computed: {
		},
		onShow() {
			this.loadData()
		},
		onLoad(options) {
			const that = this
			that.id=options.id
			that.contractType = options.contractType
			that.tradeStatus=options.tradeStatus
		},
		onReady(){
			
		},

		methods: {
			
			ViewImage(e) {
				var img = [];
				img = e.currentTarget.dataset.url.split(' ')
				uni.previewImage({
					current:0,
					urls: img
				});
			},
			ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {
						//上传图片
						//图片路径可自行修改
						uploadImage(res.tempFilePaths[0], 'carNoImg/',
							result => {
								this.poundImg = result
								uni.hideLoading();
							}
						)
					}
				});
			},
			btnDown(e){
				this.unitPrice=e.detail.value
			},
			deliver(){
				const that = this
				uni.navigateTo({
					url: `/pageA/pages/account?tradeContractId=${that.id}`
				})
			},
			price(){
				this.showPopup=true
			},
			//下拉刷新
			onPullDownRefresh() {
				this.pages = 1
				this.isLoadMore = false
				this.loadStatus = 'loading'
				this.loadData()
			},
			btnCancel(){
				this.showPopup=false
			},
			loadData(){
				const that = this
				uni.showLoading({
					title: '正在加载',
					mask:true
				})
				that.$api.request('tradeContract', 'getTradeContractDetail', {
					id: that.id
				}, failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
					uni.stopPullDownRefresh()
				}).then(res => {
					if(res.data.code=='SUCCESS'){
						that.listData = res.data.data
					}else{
						that.$api.msg('暂无物流信息')
					}
					uni.hideLoading()
					uni.stopPullDownRefresh()
				})
			},
			btnConfirm(){
				var that =this
				if(!this.unitPrice){
					that.$api.msg('请输入点价价格')
					return
				}
				uni.showLoading({
					title: '正在加载',
					mask:true
				})
				that.$api.request('trade', 'changePrice', {
					id: that.id,
					unitPrice:that.unitPrice
				}, failres => {
					that.$api.msg(failres.errmsg)
					setTimeout(()=>{
						},1000);
					uni.hideLoading()
				}).then(res => {
					that.$api.msg('修改点价成功')
					setTimeout(()=>{
						this.showPopup=false
						},1000);
					uni.hideLoading()
				})
			},
			commit(){
				var that =this
				uni.showLoading({
					title: '正在加载',
					mask:true
				})
				that.$api.request('trade', 'confirm', {
					id: that.id
				}, failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {
					that.$api.msg('确认成功')
					this.showPopup=false
					uni.hideLoading()
					this.isLoadMore = false
					this.loadStatus = 'loading'
					this.loadData()
				})
			}
			
		},
	}
</script>

<style scoped>
	.grid.grid-square {
	    height: 100px;
	}
	.poundimg{
		    width: 100px;
		    height: 100px;
	}
	.poundtital{
		line-height: 100px;
	}
	.cardwrap{
		/* background: rgba(255,255,255,0.3); */
		background: #fff;
		padding: 10px;
		margin: 10px 10px;
		box-shadow: 0 2px 6px #ccc;
		border-radius: 3px;
	}
	/* .cardwrap .flex view{
		background-image: linear-gradient(135deg, #1fa2ff, #a6ffcb);
		 font-size: 20px; 
		font-weight: bold;
		-webkit-background-clip: text;
		-moz-background-clip: text;
		background-clip: text;
		box-decoration-break: clone;
		-webkit-box-decoration-break: clone;
		-moz-box-decoration-break: clone;
		color: transparent;
	} */
	.popupItem{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.3);
		z-index: 1000000;
	}
	.wrap{
		text-align: center;
		background: white;
		z-index: 99;
		position: absolute;
		top: 50%; left: 50%;
		transform:translate(-50%,-50%);
		border-radius: 5%;
		padding:40rpx;
	}
	.btnPopup{
		display:flex;
		justify-content: space-between;
		margin: 10px 0 0;
	}
	.btnPopup button{
		height: 60rpx;
		line-height: 60rpx;
		font-size: 27rpx;
	}
	.btnConfirm{
		background: #39b54a;
		color:#fff;
	}
</style>