distribution-uni/package2/other/internationalLogistics.vue

<template>
	<view>
		<view style="width: 100%;height: 80rpx;line-height: 80rpx;display: flex;background: #fff;border-bottom: 1px solid #eee;border-top: 1px solid #eee;">
			<view style="width: 30%;padding-left: 20rpx;">
				物品种类:
			</view>
			<input type="text" placeholder="点击选择物品种类" v-model="checkTypeName.name" disabled @tap="openPopup" style="height: 80rpx;line-height: 80rpx;width: 65%;overflow: hidden;">
		</view>
		<view style="display: flex;background: #fff;">
			<input type="digit" v-model="productLength" @blur="changenum($event,'productLength')" placeholder="物品长度(cm)" class="input-num" />
			<input type="digit" v-model="productWidth" @blur="changenum($event,'productWidth')" placeholder="物品宽度(cm)" class="input-num" />
			<input type="digit" v-model="productHeight" @blur="changenum($event,'productHeight')" placeholder="物品高度(cm)" class="input-num" />
		</view>
		<view style="display: flex;background: #fff;">
			<input type="digit" v-model="productWeight" @blur="changenum($event,'productWeight')" placeholder="物品重量(kg)" class="input-num" style="width: 95%;" />
		</view>
		<view style="display: flex;background: #fff;">
			<input type="digit" v-model="totalNumber" @blur="changenum($event,'totalNumber')" placeholder="数量" class="input-num" style="width: 95%;" />
		</view>
		<view style="width: 100%;background: #fff;height: 100rpx;">
			<view @tap="countPrice" style="border-radius:20rpx;width: 95%;height: 80rpx;background: #088FEB;line-height: 80rpx;text-align: center;color: #fff;margin:10rpx auto;">
				计算
			</view>
		</view>
		<view style="display: flex;height: 80rpx;line-height: 80rpx;font-weight: bold;text-align: center;">
			<view style="width: 33%;">
				密度：{{productDensity}}
			</view>
			<view style="width: 33%;">
				单价：{{price}}
			</view>
			<view style="width: 33%;">
				总价：{{totalPrice}}
			</view>
		</view>
		<view style="width: 95%;margin: 0 auto;height: 700rpx;" @tap="largeImg">
			<img :src="checkTypeName.pic" alt="" style="width: 100%;height: 100%;" />
		</view>
		<!-- 弹出输入框 -->
		<uni-popup ref="inputDialog" background-color="#fff">
			<view class="popup-pay-content">
				<view style="width: 100%;height: 80rpx;line-height: 80rpx;display: flex;background: #fff;border-bottom: 1px solid #eee;border-top: 1px solid #eee;">
					<input type="text" placeholder="输入物品种类查询" v-model="productType" @input="selectType" style="width: 100%;height: 80rpx;line-height: 80rpx;padding-left: 20rpx;"/>
				</view>
				<view>
					<view v-for="(item,index) in sreachType" :key="index" @tap="checkType(item)" class="type-box">
						{{item.name}}
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productType:'',
				eluosiPrice:0.3,
				productLength:'', //高度
				productWidth:'', //宽度
				productHeight:'', //高度
				productWeight:'', //重量
				productVolume:'', //体积
				productDensity:'', //密度
				productList:[{
					name:'手动工具/电动工具/机械设备/包装袋/餐具/文具/五金建材',
					pic:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/f8be2abe10464584b4b3a709dedf9c98.jpg',
					value:[{
						max:100,
						min:0,
						price:240
					},{
						max:110,
						min:100,
						price:2.6
					},{
						max:120,
						min:110,
						price:2.5
					},{
						max:130,
						min:120,
						price:2.4
					},{
						max:140,
						min:130,
						price:2.3
					},{
						max:150,
						min:140,
						price:2.2
					},{
						max:160,
						min:150,
						price:2.1
					},{
						max:170,
						min:160,
						price:2.0
					},{
						max:180,
						min:170,
						price:1.9
					},{
						max:190,
						min:180,
						price:1.8
					},{
						max:200,
						min:190,
						price:1.7
					},{
						max:250,
						min:200,
						price:1.6
					},{
						max:300,
						min:250,
						price:1.5
					},{
						max:350,
						min:300,
						price:1.4
					},{
						max:400,
						min:350,
						price:1.3
					},{
						max:999999999,
						min:400,
						price:1.2
					}]
				},{
					name:'文具/体育用品/包装袋/服装辅料/美妆美甲用品/宠物用品塑料袋/包装袋/纸袋/纸质包装盒/纸売/拉链/拉锁/花边/服装吊牌/化妆刷/化妆蛋/美甲锉刀打磨条/宠物用品',
					pic:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/93619e1b7cdb401a9da7e2cb2c64314e.jpg',
					value:[{
						max:100,
						min:0,
						price:200
					},{
						max:110,
						min:100,
						price:2.3
					},{
						max:120,
						min:110,
						price:2.2
					},{
						max:130,
						min:120,
						price:2.1
					},{
						max:140,
						min:130,
						price:2.0
					},{
						max:150,
						min:140,
						price:1.9
					},{
						max:160,
						min:150,
						price:1.8
					},{
						max:170,
						min:160,
						price:1.7
					},{
						max:180,
						min:170,
						price:1.6
					},{
						max:190,
						min:180,
						price:1.5
					},{
						max:200,
						min:190,
						price:1.4
					},{
						max:250,
						min:200,
						price:1.3
					},{
						max:300,
						min:250,
						price:1.2
					},{
						max:400,
						min:300,
						price:1.1
					},{
						max:9999999999,
						min:400,
						price:1.0
					}]
				},{
					name:'化妆品/箱包/手机配件',
					pic:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/f8997f71e74048dcb72b603fafd5ac61.jpg',
					value:[{
						max:100,
						min:0,
						price:250
					},{
						max:110,
						min:100,
						price:2.5
					},{
						max:120,
						min:110,
						price:2.4
					},{
						max:130,
						min:120,
						price:2.3
					},{
						max:140,
						min:130,
						price:2.2
					},{
						max:150,
						min:140,
						price:2.1
					},{
						max:160,
						min:150,
						price:2.0
					},{
						max:170,
						min:160,
						price:1.9
					},{
						max:180,
						min:170,
						price:1.8
					},{
						max:190,
						min:180,
						price:1.7
					},{
						max:200,
						min:190,
						price:1.6
					},{
						max:250,
						min:200,
						price:1.5
					},{
						max:300,
						min:250,
						price:1.4
					},{
						max:350,
						min:300,
						price:1.3
					},{
						max:400,
						min:350,
						price:1.2
					},{
						max:9999999999,
						min:400,
						price:1.1
					}]
				},{
					name:'灯具',
					pic:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/ee1c9aaeac354d4388b2494b17740e73.jpg',
					value:[{
						max:100,
						min:0,
						price:240
					},{
						max:110,
						min:100,
						price:2.4
					},{
						max:120,
						min:110,
						price:2.3
					},{
						max:130,
						min:120,
						price:2.2
					},{
						max:140,
						min:130,
						price:2.1
					},{
						max:150,
						min:140,
						price:2.0
					},{
						max:160,
						min:150,
						price:1.9
					},{
						max:170,
						min:160,
						price:1.8
					},{
						max:180,
						min:170,
						price:1.7
					},{
						max:190,
						min:180,
						price:1.6
					},{
						max:200,
						min:190,
						price:1.5
					},{
						max:250,
						min:200,
						price:1.4
					},{
						max:300,
						min:250,
						price:1.3
					},{
						max:9999999999,
						min:300,
						price:1.2
					}]
				},{
					name:'家具',
					pic:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/8e447ed1128b4addb78a20c9b9e1bfad.jpg',
					value:[{
						max:100,
						min:0,
						price:230
					},{
						max:110,
						min:100,
						price:2.4
					},{
						max:120,
						min:110,
						price:2.3
					},{
						max:130,
						min:120,
						price:2.2
					},{
						max:140,
						min:130,
						price:2.1
					},{
						max:150,
						min:140,
						price:2.0
					},{
						max:160,
						min:150,
						price:1.9
					},{
						max:170,
						min:160,
						price:1.8
					},{
						max:180,
						min:170,
						price:1.7
					},{
						max:190,
						min:180,
						price:1.6
					},{
						max:200,
						min:190,
						price:1.5
					},{
						max:250,
						min:200,
						price:1.4
					},{
						max:300,
						min:250,
						price:1.3
					},{
						max:9999999999,
						min:300,
						price:1.2
					}]
				},{
					name:'小家电',
					pic:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/2a7984e6a1ee49e381911f5318118684.jpg',
					value:[{
						max:100,
						min:0,
						price:260
					},{
						max:110,
						min:100,
						price:2.6
					},{
						max:120,
						min:110,
						price:2.5
					},{
						max:130,
						min:120,
						price:2.4
					},{
						max:140,
						min:130,
						price:2.3
					},{
						max:150,
						min:140,
						price:2.2
					},{
						max:160,
						min:150,
						price:2.1
					},{
						max:170,
						min:160,
						price:2.0
					},{
						max:180,
						min:170,
						price:1.9
					},{
						max:190,
						min:180,
						price:1.8
					},{
						max:200,
						min:190,
						price:1.7
					},{
						max:300,
						min:200,
						price:1.6
					},{
						max:400,
						min:300,
						price:1.5
					},{
						max:9999999999,
						min:400,
						price:1.4
					}]
				},{
					name:'汽配',
					pic:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/3658d3681311491488bbf868e8dd64ca.jpg',
					value:[{
						max:100,
						min:0,
						price:230
					},{
						max:110,
						min:100,
						price:2.5
					},{
						max:120,
						min:110,
						price:2.4
					},{
						max:130,
						min:120,
						price:2.3
					},{
						max:140,
						min:130,
						price:2.2
					},{
						max:150,
						min:140,
						price:2.1
					},{
						max:160,
						min:150,
						price:2.0
					},{
						max:170,
						min:160,
						price:1.9
					},{
						max:180,
						min:170,
						price:1.8
					},{
						max:190,
						min:180,
						price:1.7
					},{
						max:200,
						min:190,
						price:1.6
					},{
						max:250,
						min:200,
						price:1.5
					},{
						max:300,
						min:250,
						price:1.4
					},{
						max:350,
						min:300,
						price:1.3
					},{
						max:400,
						min:350,
						price:1.2
					},{
						max:999999999,
						min:400,
						price:1.1
					}]
				},{
					name:'小百',
					pic:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/fafa75eb78ea42a7958df49bf47a46be.jpg',
					value:[{
						max:100,
						min:0,
						price:360
					},{
						max:110,
						min:100,
						price:3.6
					},{
						max:120,
						min:110,
						price:3.5
					},{
						max:130,
						min:120,
						price:3.4
					},{
						max:140,
						min:130,
						price:3.3
					},{
						max:150,
						min:140,
						price:3.2
					},{
						max:160,
						min:150,
						price:3.1
					},{
						max:170,
						min:160,
						price:3.0
					},{
						max:180,
						min:170,
						price:2.9
					},{
						max:190,
						min:180,
						price:2.8
					},{
						max:200,
						min:190,
						price:2.7
					},{
						max:250,
						min:200,
						price:2.6
					},{
						max:300,
						min:250,
						price:2.5
					},{
						max:350,
						min:300,
						price:2.4
					},{
						max:400,
						min:350,
						price:2.3
					},{
						max:999999999,
						min:400,
						price:2.2
					}]
				},{
					name:'鞋',
					pic:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/32bcf26db6244c1b9add7a6499a4c74e.jpg',
					value:[{
						max:100,
						min:0,
						price:220
					},{
						max:110,
						min:100,
						price:2.5
					},{
						max:120,
						min:110,
						price:2.4
					},{
						max:130,
						min:120,
						price:2.3
					},{
						max:140,
						min:130,
						price:2.2
					},{
						max:150,
						min:140,
						price:2.1
					},{
						max:160,
						min:150,
						price:2.0
					},{
						max:170,
						min:160,
						price:1.9
					},{
						max:180,
						min:170,
						price:1.8
					},{
						max:190,
						min:180,
						price:1.7
					},{
						max:200,
						min:190,
						price:1.6
					},{
						max:999999999,
						min:200,
						price:1.5
					}]
				},{
					name:'玩具',
					pic:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/1c3952b8722742e5b014416f621307d5.jpg',
					value:[{
						max:100,
						min:0,
						price:230
					},{
						max:110,
						min:100,
						price:2.6
					},{
						max:120,
						min:110,
						price:2.5
					},{
						max:130,
						min:120,
						price:2.4
					},{
						max:140,
						min:130,
						price:2.3
					},{
						max:150,
						min:140,
						price:2.2
					},{
						max:160,
						min:150,
						price:2.1
					},{
						max:170,
						min:160,
						price:2.0
					},{
						max:180,
						min:170,
						price:1.9
					},{
						max:190,
						min:180,
						price:1.8
					},{
						max:200,
						min:190,
						price:1.7
					},{
						max:999999999,
						min:200,
						price:1.6
					}]
				},{
					name:'北疆服装',
					pic:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/046c1b9d82864ff79af4097cc6d9fa1d.jpg',
					value:[{
						max:100,
						min:0,
						price:2.8
					},{
						max:999999999,
						min:100,
						price:2.6
					}]
				},{
					name:'北疆电商',
					pic:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/046c1b9d82864ff79af4097cc6d9fa1d.jpg',
					value:[{
						max:100,
						min:0,
						price:null
					},{
						max:999999999,
						min:100,
						price:2.6
					}]
				},{
					name:'北疆空运',
					pic:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/046c1b9d82864ff79af4097cc6d9fa1d.jpg',
					value:[{
						max:160,
						min:0,
						price:11
					},{
						max:999999999,
						min:160,
						price:10
					}]
				}],
				sreachType:[],
				checkTypeName:{},
				totalPrice:0, //总价
				totalNumber:1,
				price:""
			}
		},
		onShow() {
			
		},
		onLoad() {
			
		},
		methods: {
			largeImg(){
				
				// 预览图片
				uni.previewImage({
					urls: [this.checkTypeName.pic],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							
						},
						fail: function(err) {
							
						}
					}
				});
			},
			changenum(e,type){
				if(type == 'productLength'){
					this.productLength = Number(e.target.value)
				}else if(type == 'productWidth'){
					this.productWidth = Number(e.target.value)
				}else if(type == 'productHeight'){
					this.productHeight = Number(e.target.value)
				}else if(type == 'productWeight'){
					this.productWeight = Number(e.target.value)
				}else if(type == 'totalNumber'){
					this.totalNumber = Number(e.target.value)
				}
				
			},
			countPrice(){
				if((this.productLength == '' || this.productLength == 0) || (this.productWidth == '' || this.productWidth == 0) || (this.productHeight == '' || this.productHeight == 0) || (this.productWeight == '' || this.productWeight == 0)){
					return;
				}
				//体积
				this.productVolume = Number(this.productLength) * Number(this.productWidth) * Number(this.productHeight)
				//密度
				this.productDensity = (this.productWeight / (this.productVolume / 1000000)).toFixed(2)
				for(let i=0;i<this.checkTypeName.value.length;i++){
					if(this.checkTypeName.value[i].min < this.productDensity && this.productDensity <= this.checkTypeName.value[i].max){
						if(this.checkTypeName.value[i].min == 0 && this.checkTypeName.name != '北疆服装' && this.checkTypeName.name != '北疆电商' && this.checkTypeName.name != '北疆空运'){
							
							this.price = this.checkTypeName.value[i].price + '/立方米'
							this.totalPrice = ((this.productVolume / 1000000) * this.checkTypeName.value[i].price) * this.totalNumber
						}else{
							if(this.price = this.checkTypeName.value[i].price == null){
								this.price = '暂无报价'
							}else{
								this.price = this.checkTypeName.value[i].price+ '/kg'
							}
							
							this.totalPrice = (this.productWeight * this.checkTypeName.value[i].price) * this.totalNumber
						}
					}
				}
			},
			openPopup(){
				this.$refs.inputDialog.open('bottom')
				this.sreachType = this.productList
			},
			selectType(){
				
				if(this.productType == ''){
					this.sreachType = this.productList
				}else{
					this.sreachType = []
					for(let i=0;i<this.productList.length;i++){
						if(this.productList[i].name.indexOf(this.productType) != -1){
							this.sreachType.push(this.productList[i])
						}
					}
				}
			},
			checkType(item){
				this.productLength = ""
				this.productWidth = ""
				this.productHeight = ""
				this.productWeight = ""
				this.totalNumber = 1
				this.$forceUpdate()
				this.checkTypeName = item
				
				this.$refs.inputDialog.close()
			}
		}
	}
</script>

<style>
	.popup-pay-content {
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		width: 100%;
		height: 1200rpx;
		background-color: #fff;
		overflow: scroll;
	}
	.input-num{
		width: 30%;
		height: 80rpx;
		margin-left: 3%;
		border: 1px solid #eee;
		margin: 20rpx 0 20rpx 3%;
		text-align: center;
	}
	.type-box{
		background: #eee;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding: 20rpx;
	}
</style>