wx-qhb/pageD/newBulitOrder/component/nextLogistics.vue

<template>
	<view class="list">
		<u-popup :safeAreaInsetTop="false" :show="nextLogisticsShow" @close="$emit('closeLogistics')" mode="bottom"
			closeIconPos="top-right" round="28" bgColor="#F4F4F4">
			<view style="padding: 40rpx 28rpx; box-sizing: border-box; position: relative">
				<view class="u-flex u-row-between">
					<view class="" style="width: 28px; height: 28px"></view>
					<view class="poptitle">
						{{ i18n.flow }}
					</view>
					<u-icon name="close" @click="$emit('closeLogistics')" color="background: #333333;"
						size="28"></u-icon>
				</view>
				<scroll-view :scroll-y="true" style="500rpx">
					<view class="transport" style="margin-top: 32rpx" @click="activea(item, idx)"
						v-for="(item, idx) in containerList" v-if="item.sum != 0">
						<view class="u-flex u-row-between">
							<text class="yundate">{{ i18n.Shipmentdate }} {{ item.end_date }}</text>
							<image v-if="datechan == idx" src="../../../static/mine/330.png"
								style="width: 36rpx; height: 36rpx" mode=""></image>
							<image v-else src="../../../static/mine/327.png" style="width: 36rpx; height: 36rpx"
								mode=""></image>
						</view>
						<view class="u-flex u-row-between" style="margin-top: 28rpx">
							<view class="chest">
								<text>{{ item.name_cn }}</text>
								<text v-if="language == 'en-US'">{{ item.name_en }}</text>
								<text v-if="language == 'es-ES'">{{ item.name_es }}</text>
								<text v-if="language == 'it-IT'">{{ item.name_ita }}</text>
								<text style="margin: 0 16rpx">|</text>
								<text>{{ i18n.Estimatedtimeofarrival }}{{ item.transport_days
                  }}{{ i18n.Workingday }}</text>
							</view>
							<view class="mone">
								<text>¥</text>
								<text style="font-size: 48rpx; font-weight: 600">{{
                  item.sum
                }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="" style="height: 166rpx"></view>
				<view class="enbottom u-flex u-row-between">
					<view class="cancel" @click="$emit('closeLogistics')">{{
            i18n.Cancel
          }}</view>
					<view class="confirm" @click="confirm">{{ i18n.enter }}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		name: "nextLogistics",
		props: {
			nextLogisticsShow: {
				typeof: Boolean,
				default: false,
			},
			language: {
				typeof: String,
				default: "",
			},
			goodinfo: {
				typeof: Object,
				default: () => {
					return {};
				},
			},
			goodsValue: {
				typeof: Number,
				default: 0,
			},
			//商品规格价格
			specificationsPrice: {
				typeof: String,
				default: "",
			},
			//多商品
			goodsArr: {
				typeof: Object,
				default: () => {
					return {};
				},
			},
			addinfo: {
				typeof: Object,
				default: () => {
					return {};
				},
			},
		},
		computed: {
			i18n() {
				return this.$t("index");
			},
		},
		data() {
			return {
				containerList: [], //货柜列表
				unit_price: "",
				recommend_weight: "",
				containname: "",
				sum: "", //运费
				containid: "", //货柜id
				datechan: "", //当前选中的货柜列表下标
				max_weight: "", //推荐重量。当满足当前重量，减少价格
				min_weight: "",
				unit_fee: "", //满减价格
				unchangedFreight: "", //基础运费，不会变
				unchangedUnit_price: "",
				goodsWeight: 0,
			};
		},
		watch: {
			//打开窗口，获取货柜
			nextLogisticsShow(newVal) {
				if (newVal) {
					uni.$u.http
						.get("/api/container-base", {
							params: {
								is_page: 0,
								province_id: this.goodinfo.province_id,
								country_id:this.goodinfo.country_id,
								transport_type_id: this.goodinfo.transport_type_id,
								weight: Number(this.goodinfo.weight),
								length: Number(this.goodinfo.length), //		是	String	长
								width: this.goodinfo.width, //		是	String	宽
								height: this.goodinfo.height, //		是	String	高
								cart_id: "",
								goods_arr: JSON.stringify(this.goodsArr),
							},
						})
						.then((res) => {
							res.forEach((item) => {
								this.containerList = []
								if (item.sum != 0) {
									this.containerList.push(item);
								}
							});

							if (this.goodinfo.is_shipping == 0) {
								this.sum = 0;
								this.unchangedFreight = 0;
							} else {
								this.sum = this.containerList[0].sum;
								this.unchangedFreight = this.containerList[0].sum;
							}
							this.unit_price = this.containerList[0].unit_price;
							this.unchangedUnit_price = this.containerList[0].unit_price;
							this.recommend_weight = this.containerList[0].recommend_weight;
							this.containid = this.containerList[0].id;
							this.goodsWeight = this.containerList[0].weight_total;
							console.log(this.language);
							if (this.language == "zh-CN") {
								this.containname = this.containerList[0].name_cn;
							}
							if (this.language == "en-US") {
								this.containname = this.containerList[0].name_en;
							}
							if (this.language == "es-ES") {
								this.containname = this.containerList[0].name_es;
							}
							if (this.language == "it-IT") {
								this.containname = this.containerList[0].name_ita;
							}
						})
						.catch(() => {});
				}
			},
		},
		methods: {
			//运费满减
			async config() {
				var that = this;
				await uni.$u.http
					.get("/api/config", {
						params: {
							module: "free_shipping",
						},
					})
					.then((res) => {
						let goodsum = "";
						goodsum = Number(that.specificationsPrice);
						if (goodsum > res.free_shipping) {
							that.sum = 0;
							that.unit_price = 0;
						} else {
							this.sum = this.unchangedFreight;
							this.unit_price = this.unchangedUnit_price;
						}
					})
					.catch(() => {});
			},

			//推荐重量
			async recommendweight() {
				await uni.$u.http
					.get("/api/express-order/recommend-container", {
						params: {
							container_id: this.containid,
							type: "normal",
						},
					})
					.then((res) => {
						this.max_weight = res.max_weight;
						this.min_weight = res.min_weight;
						this.unit_fee = res.unit_fee;
					})
					.catch(() => {});
			},
			//下单前计算数据
			//确定选择货柜
			confirm() {
				this.recommendweight();
				this.config();
				//异步跳转
				const timer = setTimeout(() => {
					let data = {
						type: "second",
						containname: this.containname,
						containid: this.containid,
						recommend_weight: this.recommend_weight,
						unit_price: this.unit_price,
						sum: this.sum,
						max_weight: this.max_weight,
						min_weight: this.min_weight,
						unit_fee: this.unit_fee,
						unchangedFreight: this.unchangedFreight,
						unchangedUnit_price: this.unchangedUnit_price,
						goodsWeight: this.goodsWeight,
					};
					console.log(data);
					this.$emit("closeLogistics", data);
					this.$emit("calculate");
					clearTimeout(timer);
				}, 200);
			},

			activea(item, idx) {
				this.datechan = idx;
				this.sum = item.sum;
				this.unchangedFreight = item.sum;
				this.unit_price = item.unit_price;
				this.recommend_weight = item.recommend_weight;
				this.containid = item.id;
				this.containname = item.name_cn; //等待后续更改language删除掉
				if (this.language == "zh-CN") {
					this.containname = item.name_cn;
				}
				if (this.language == "en-US") {
					this.containname = item.name_en;
				}
				if (this.language == "es-ES") {
					this.containname = item.name_es;
				}
				if (this.language == "it-IT") {
					this.containname = item.name_ita;
				}
			},
		},
	};
</script>
<style scoped lang="scss">
	.poptitle {
		width: 142rpx;
		height: 50rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 36rpx;
		color: #333333;
		text-align: center;
		width: 100%;
	}

	.transport {
		width: 702rpx;
		height: 164rpx;
		background: #ffffff;
		border-radius: 12rpx;
		padding: 24rpx 20rpx;
		box-sizing: border-box;
	}

	.yundate {
		font-family: PingFangSC, PingFang SC;
		font-weight: 550;
		font-size: 32rpx;
		color: #333333;
		line-height: 44rpx;
		text-align: left;
		font-style: normal;
	}

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

	.mone {
		font-family: JDZhengHT, JDZhengHT;
		font-weight: 400;
		font-size: 26rpx;
		color: #f83224;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
	}

	.enbottom {
		width: 750rpx;
		height: 166rpx;
		background: #ffffff;
		position: absolute;
		left: 0rpx;
		bottom: 0;
		padding: 0 24rpx;
		box-sizing: border-box;

		.confirm {
			width: 398rpx;
			height: 84rpx;
			background: #f83224;
			border-radius: 42rpx;
			text-align: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #ffffff;
			line-height: 84rpx;
			text-align: center;
			font-style: normal;
		}

		.cancel {
			width: 280rpx;
			height: 84rpx;
			border-radius: 42rpx;
			border: 2rpx solid rgba(151, 151, 151, 0.3);
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #444444;
			line-height: 84rpx;
			text-align: center;
			font-style: normal;
		}
	}
</style>