wx-qhb/components/kj-flow/kj-flow.vue

<template>
	<view>
		<view class="u-flex u-row-between">
			<view class="" style="width: 28px;height: 28px;"></view>
			<view class="title">{{i18n.flow}}</view>
			<u-icon name="close" @click="close" color="background: #333333;" size="28"></u-icon>
		</view>
		<view v-if="transportList.length>0" class="u-flex" style="margin-top: 56rpx;">
			<scroll-view scroll-y="true" class="left">
				<view v-for="(item,idx) in transportList" :key="idx" @click="changea(item,idx)"
					style="height: 134rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;"
					:style="{background:idx==leftchange? '':'#F7F7F7'}">
					<view class="ititle" v-if="language =='zh-CN'" :style="{fontWeight:idx==leftchange?'600':''}">
						{{item.name_cn}}
					</view>
					<view class="ititle" v-if="language =='en-US'" :style="{fontWeight:idx==leftchange?'600':''}">
						{{item.name_en}}
					</view>
					<view class="ititle" v-if="language =='es-ES'" :style="{fontWeight:idx==leftchange?'600':''}">
						{{item.name_es}}
					</view>
					<view class="ititle" v-if="language =='it-IT'" :style="{fontWeight:idx==leftchange?'600':''}">
						{{item.name_ita}}
					</view>
					<view class="itime" v-if="idx==leftchange&&containerList.length>0">{{i18n.Estimatedtimeofarrival}}
					</view>
					<view class="itime" v-if="idx==leftchange&&containerList.length>0">{{estimated_arrived_date}}</view>
				</view>
			</scroll-view> 
			<scroll-view scroll-y="true" class="right" style="margin-left: 36rpx;">
				<view v-for="(item,idx) in containerList" :key="idx" @click="change(item,idx)"
					style="display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 20rpx 0 16rpx;"
					class="iitem">
					<view class="ititle u-flex u-row-between" style="width: 100%;">
						<view class="ititle">{{i18n.Shipmentdate}}: {{item.estimated_departed_date}}</view>
						<view v-if="language =='zh-CN'" style="font-size: 24rpx;
color: #666666;">{{item.name_cn}}</view>
						<view v-if="language =='en-US'" style="font-size: 24rpx;
color: #666666;">{{item.name_en}}</view>
						<view v-if="language =='es-ES'" style="font-size: 24rpx;
color: #666666;">{{item.name_es}}</view>
						<view v-if="language =='it-IT'" style="font-size: 24rpx;
color: #666666;">{{item.name_ita}}</view>
					</view>
					<view class="u-flex u-row-between" style="margin-top: 16rpx;width: 100%;">
						<view class="price">
							<text style='font-size="24rpx"'>¥</text>
							<text style='font-size="32rpx"'>{{item.unit_price}}</text>
							<!-- <text style='font-size="32rpx"' v-else>{{item.special_delivery_fee}}</text> -->
							<text style='font-size="28rpx"'>/kg</text>
						</view>
						<u-icon v-if="idx==rightchange" name="checkbox-mark" color="rgba(248, 50, 36, 1)"
							size="28"></u-icon>
						<view v-else class="" style="width: 28px;height: 28px;"></view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="" v-else style="height: 300rpx;text-align: center;line-height: 300rpx;font-size: 24rpx;">
			{{i18n.nodata}}
		</view>
		<view class="bottom">
			<view class="btn" @click="enter">{{i18n.enter}}</view>
		</view>
		<!-- <view class=""></view> -->
	</view>
</template>

<script>
	export default {
		props: {
			weight: {
				typeof: Number
			},
			length: {
				typeof: Number
			},
			width: {
				typeof: Number
			},
			height: {
				typeof: Number
			},
			province_id: {
				typeof: Number
			},
			country_id: {
				typeof: Number
			},
			goodstype: {
				typeof: String,
				default: "normal"
			},
			leftchangea: {
				type: String,
				default: ''
			},
			rightchangea: {
				type: String,
				default: ''
			},
			typeida: {
				type: String,
				default: ''
			},
			language: {
				type: String,
				default: 'zh-CN'
			}
		},
		name: "kj-flow",
		data() {
			return {
				leftchange: 0,
				rightchange: 0,
				containerList: [],
				transportList: [],
				estimated_arrived_date: '',
				leftname: '',
				rightname: '',
				dateid: '',
				unit_price: '',
				// language: 'zh-CN',
				typeid: '',
			};
		},
		created() {
			// this.transport()
		},
		mounted() {
			// if (uni.getStorageSync('language') != '') {
			// 	this.language = uni.getStorageSync('language')
			// 	console.log('222222',this.language);
			// }
		},
		computed: {
			i18n() {
				return this.$t('index')
			},
		},
		methods: {
			//货柜列表
			container(id) {
				uni.$u.http.get('/api/container-base', {
					params: {
						is_page: 0,
						province_id: this.province_id,
						country_id: this.country_id,
						transport_type_id: id,
						type: this.goodstype,
						weight: this.weight,
						length: this.length,
						width: this.width,
						height: this.height,
					}
				}).then((res) => {
					this.containerList = res
					this.estimated_arrived_date = res[0].estimated_arrived_date
					this.dateid = res[0].id
					if (this.language == 'en-US') {
						this.rightname = res[0].name_en
					}
					if (this.language == 'es-ES') {
						this.rightname = res[0].name_es
					}
					if (this.language == 'it-IT') {
						this.rightname = res[0].name_ita
					}

					if (this.language == 'zh-CN') {
						this.rightname = res[0].name_cn
					}
					this.unit_price = res[0].unit_price
				}).catch(() => {

				})
			},
			transport() {
				uni.$u.http.get('/api/transport-type', {
					params: {
						province_id: this.province_id,
						country_id: this.country_id
					}
				}).then((res) => {
					this.transportList = res
					if (this.typeida) {
						console.log(this.typeida);
						this.leftchange = this.leftchangea
						this.rightchange = this.rightchangea
						this.container(this.typeida)
						this.typeid = this.transportList[0].id  
					} else {
						this.leftchange = index
						this.typeid = res[0].id
						this.container(res[0].id)
						if (this.language == 'en-US') {
							this.leftname = item.name_en
						}
						if (this.language == 'es-ES') {
							this.leftname = item.name_es                                                                               
						}
						if (this.language == 'it-IT') {
							this.leftname = item.name_ita
						}

						if (this.language == 'zh-CN') {
							this.leftname = item.name_cn
						}
					}
				}).catch(() => {

				})
			},

			//左边切换
			changea(item, index) {
				this.leftchange = index
				this.typeid = item.id
				this.container(item.id)
				this.rightname = '',
				this.dateid = ''
				if (this.language == 'en-US') {
					this.leftname = item.name_en
				}
				if (this.language == 'es-ES') {
					this.leftname = item.name_es
				}
				if (this.language == 'it-IT') {
					this.leftname = item.name_ita
				}

				if (this.language == 'zh-CN') {
					this.leftname = item.name_cn
				}

			},
			//右边切换
			change(item, idx) {

				this.rightchange = idx
				this.dateid = item.id
				if (this.language == 'en-US') {
					this.rightname = item.name_en
				}
				if (this.language == 'es-ES') {
					this.rightname = item.name_es
				}
				if (this.language == 'it-IT') {
					this.rightname = item.name_ita
				}

				if (this.language == 'zh-CN') {
					this.rightname = item.name_cn
				}
				this.unit_price = item.unit_price
			},
			close() {
				this.$emit('close')
			},
			enter() {
				if (this.dateid == '') {
					this.$u.toast('请选择货柜')
				} else {
					this.$emit('success', {
						dateid: this.dateid,
						rightname: this.rightname,
						leftname: this.leftname,
						unit_price: this.unit_price,
						leftchange: this.leftchange,
						rightchange: this.rightchange,
						typeid: this.typeid
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.iitem {
		border-bottom: 2rpx solid rgba(151, 151, 151, 0.1);
		box-sizing: border-box;
	}

	.price {
		font-family: SFPro, SFPro;
		font-weight: 500;
		font-size: 24rpx;
		color: #F83224;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
	}

	.right {
		flex: 1;
		width: 474rpx;
		height: 642rpx;
	}

	.bottom {
		width: 750rpx;
		// height: 166rpx;
		background: #FFFFFF;
		padding: 20rpx 24rpx 0;
		box-sizing: border-box;
	}

	.btn {
		width: 702rpx;
		height: 84rpx;
		background: #F83224;
		border-radius: 44rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 84rpx;
		text-align: center;
		font-style: normal;
	}

	.title {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #333333;
		line-height: 50rpx;
		text-align: left;
		font-style: normal;
	}

	.left {
		width: 212rpx;
		height: 642rpx;
	}

	.ititle {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #222222;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
	}

	.itime {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #333333;
		line-height: 28rpx;
		text-align: center;
		font-style: normal;
	}
</style>