wx-qhb/pageD/newBulitOrder/newBulitOrder.vue

<template>
	<view class="page">
		<!-- 地址 -->
		<view class="address" @click="toadd">
			<view class="u-flex u-row-between">
				<view class="add" v-if="JSON.stringify(addinfo) != '{}'">{{
          addinfo.full_address
        }}</view>
				<view class="" v-else>{{ i18n.shippingaddress }}</view>
				<u-icon name="arrow-right" size="16"></u-icon>
			</view>
			<view class="info" v-if="JSON.stringify(addinfo) != '{}'">
				<text>{{ addinfo.name }}</text>
				<text style="margin-left: 20rpx">{{
          replacePhoneToStar(addinfo.mobile)
        }}</text>
			</view>
		</view>
		<!-- 地址 -->

		<!-- 需要下单的商品列表 -->
		<Commodity :goodsList="goodsList" :goodsValue="goodsValue" @changeGoodsNum="changeGoodsNum" />
		<!-- 需要下单的商品列表 -->

		<!-- 选择物流 -->
		<view class="logistics u-flex u-row-between">
			<text style="font-weight: 600; width: 320rpx">{{ i18n.flow }}</text>
			<view class="u-flex" @click="openLogistics">
				<text class="change">{{
          containname ? transportTypeName + " | " + containname : i18n.selection
        }}</text>
				<u-icon name="arrow-right" size="16"></u-icon>
			</view>
		</view>
		<!-- 选择物流 -->

		<!-- 选择物流弹窗 -->
		<SelectLogistics :logisticsShow="logisticsShow" @closeLogistics="closeLogistics" :containerList="containerList"
			:language="language" @openContainer="openContainer" />
		<!-- 选择物流弹窗 -->

		<!-- 选择物流价格之后的下一步 -->
		<NextLogistics :nextLogisticsShow="nextLogisticsShow" :language="language" :goodinfo="goodinfo"
			:goodsValue="goodsValue" :specificationsPrice="specificationsPrice" @closeLogistics="closeLogistics"
			:goodsArr="goodsArr" :addinfo='addinfo' @calculate='calculate'/>
		<!-- 选择物流价格之后的下一步 -->

		<!-- 推荐商品 -->
		<RecommendGoods :swiptlist="swiptlist" />
		<!-- 推荐商品 -->

		<!-- 商品信息 -->
		<GoodsInformation :goodinfo="goodinfo" :containname="containname" :goodsPrice="goodsList.order.goods_amount"
			:countGoodsInformation="countGoodsInformation" :goodsValue="goodsValue"
			:specificationsPrice="specificationsPrice" :goodsWeight="countGoodsInformation.goodsWeight" />
		<!-- 商品信息 -->

		<view class="btn u-flex u-row-right">
			<view class="u-flex">
				<text class="kg"
					v-show="containname">{{ i18n.Atotalof }}{{ countGoodsInformation.goodsWeight }}kg,</text>
				<text>{{ i18n.total }}:</text>
				<text class="money" style="font-size: 28rpx">¥</text>

				<view class="">
					<!--          <text class="money" v-if="countGoodsInformation.containname">{{
            Number(specificationsPrice) + Number(countGoodsInformation.sum)
          }}</text> -->
					<text class="money">{{
            Number(specificationsPrice) + Number(countGoodsInformation.sum)
          }}</text>
				</view>
			</view>
			<view class="order" @click="topay">
				{{ i18n.Submitorder }}
			</view>
		</view>
	</view>
</template>

<script>
	import Commodity from "./component/commodity.vue";
	import SelectLogistics from "./component/selectLogistics.vue";
	import NextLogistics from "./component/nextLogistics.vue";
	import RecommendGoods from "./component/recommendGoods.vue";
	import GoodsInformation from "./component/goodsInformation.vue";
	export default {
		components: {
			Commodity,
			SelectLogistics,
			NextLogistics,
			RecommendGoods,
			GoodsInformation,
		},
		data() {
			return {
				addinfo: {}, //地址信息
				province_id: "",
				country_id:'',
				containerList: [],
				transport_type_id: "", //运输方式ID
				transportTypeName: "", //运输方式名称
				swiptlist: [], //推荐商品
				goodsList: [], //需要下单的商品
				logisticsShow: false, //打开选择物流窗口
				language: this._language, //语言
				nextLogisticsShow: false, //打开选择货柜窗口
				goodinfo: {}, //商品信息
				goodsValue: 0, //商品数量
				sku_info: {},
				containname: "", //货柜名称
				countGoodsInformation: {},
				goodsWeight: 0, //商品重量
				goodsId: "", //商品id
				sku_item_id: "", //商品规格id
				merchant_goods_id: "", //店铺商品id
				goodsSource: "", //商品归属
				isDiscount: "", //商品是否存在打折
				specificationsPrice: 0, //订单商品总金额
				goodsArr: [], //多商品用的商品规格
			};
		},
		computed: {
			i18n() {
				return this.$t("index");
			},
		},
		onLoad(options) {
			this.getOrderGoods(options.orderId);
			this.recommend();
		},
		onShow() {
			console.log(this.language);
			// if (uni.getStorageSync("language") != "") {
			//   this.language = uni.getStorageSync("language");
			// }
		},
		methods: {
			//关闭选择物流窗口
			closeLogistics(data) {
				this.logisticsShow = false;
				this.nextLogisticsShow = false;
				//判断是哪一步关闭，接受数据
				if (data.type == "second" && data.containname) {
					this.containname = data.containname;
					this.countGoodsInformation = data;
					this.calculate()
				}
			},
			//			//下单前计算数据
			calculate() {
				uni.$u.http
					.post("/api/order/calculate", {
						address_id: this.addinfo.id, //3	是	String	地址ID
						merchant_goods_id: this.merchant_goods_id || "", //39	是	String	团长商品id
						container_id: this.countGoodsInformation.containid, //1	是	String	货柜id
						share_member_id: "", //	是	String	分享团长id 分享商品的时候传
						belong: this.goodsSource || "", //0	是	String	商品归属 0团长 1平台自营 2团长发布或者分享的平台自营商品、供应链商品
						goods_arr: JSON.stringify(this.goodsArr),
					})
					.then((res) => {
						console.log(res);
						this.countGoodsInformation.sum = res.freight
					})
					.catch(() => {});
			},

			//打开选择货柜弹窗
			openContainer(data) {
				this.goodinfo.province_id = this.province_id;
				this.goodinfo.country_id = this.country_id;
				this.goodinfo.transport_type_id = this.transport_type_id;
				let weight = 0;
				let height = 0;
				let length = 0;
				let price = 0;
				let width = 0;
				this.goodsList.goods.map((item) => {
					console.log(item);
					weight += item.sku_item.weight;
					height += item.sku_item.height;
					length += item.sku_item.length;
					width += item.sku_item.width;
					price += Number(item.sku_item.price);
					// this.goodinfo.type = item.goods.status;
				});
				//等待后端解决多商品之后放开注释
				// this.goodinfo.weight = weight;
				// this.goodinfo.height = height;
				// this.goodinfo.length = length;
				// this.goodinfo.width = width;
				// this.goodinfo.price = price;
				//等待后端解决多商品删除，采用上面几行
				this.goodinfo.weight = 10;
				this.goodinfo.height = 10;
				this.goodinfo.length = 10;
				this.goodinfo.width = 10;
				this.goodinfo.price = 10;
				this.logisticsShow = false;
				this.nextLogisticsShow = true;

				//判断打开的窗口是第几步，将选中的运输方式传回
				if (data.type == "first" && data.transportTypeName) {
					this.transportTypeName = data.transportTypeName;
				}
			},

			//运费满减
			async config() {
				var that = this;
				await uni.$u.http
					.get("/api/config", {
						params: {
							module: "free_shipping",
						},
					})
					.then((res) => {
						let goodsum = "";
						goodsum = Number(that.specificationsPrice) * that.goodsValue;
						if (goodsum > res.free_shipping) {
							that.countGoodsInformation.sum = 0;
							that.countGoodsInformation.unit_price = 0;
						} else {
							this.countGoodsInformation.sum =
								this.countGoodsInformation.unchangedFreight;
							this.countGoodsInformation.unit_price =
								this.countGoodsInformation.unchangedUnit_price;
						}
					})
					.catch(() => {});
			},

			//提交订单
			topay() {
				uni.$u.http
					.post("/api/order", {
						address_id: this.addinfo.id, //3	是	String	地址ID
						goods_id: this.goodsId, //65	是	String	商品id
						goods_num: this.goodsValue, //2	是	String	商品数量
						sku_item_id: this.sku_item_id, //60	是	String	规格id
						cart_ids: "", //8,9	是	String	购物车id
						remark: "", //备注	是	String	备注
						merchant_goods_id: this.merchant_goods_id || "", //39	是	String	团长商品id
						container_id: this.countGoodsInformation.containid, //1	是	String	货柜id
						share_member_id: "", //	是	String	分享团长id 分享商品的时候传
						belong: this.goodsSource || "", //0	是	String	商品归属 0团长 1平台自营 2团长发布或者分享的平台自营商品、供应链商品
						goods_arr: JSON.stringify(this.goodsArr),
					})
					.then((res) => {
						uni.navigateTo({
							// url: '/pageA/payorder?sum=' + (Number(this.sum*10000+ Number(this.sku_info.discount_price)*Number(this.value)*10000))/10000 +'&orderid=' + res.id
							url: "/pageA/payorder?orderid=" + res.id + "&sum=" + res.amount,
						});
					})
					.catch(() => {});
			},

			//打开选择物流窗口
			openLogistics() {
				this.logisticsShow = true;
				this.transport();
			},

			//获取订单商品
			getOrderGoods(id) {
				uni.$u.http.get(`/api/order/read?id=${id}`).then((res) => {
					this.goodsList = res;
					this.goodsValue = this.goodsList.goods[0].goods_num;
					this.goodsList.goods.map((item) => {
						this.goodsId = item.goods_id;
						this.sku_item_id = item.sku_item_id;
						this.merchant_goods_id = item.merchant_goods_id;
						// this.goodsSource = item.goods.source;
						//库存商品大于需要购买的数量
						if (item.true_stock > item.goods_num) {
							this.goodsWeight += item.sku_item.weight * item.goods_num; //商品重量
							//多商品获取规格商品id
							let obj = {
								merchant_goods_id: item.merchant_goods_id,
								goods_num: item.goods_num,
								sku_item_id: item.sku_item_id,
							};
							this.goodsArr.push(obj);
							//获取订单商品总金额
							this.specificationsPrice +=
								Number(item.discount_price) * item.goods_num;
						}
					});
					if (this.goodsArr.length < this.goodsList.goods.length) {
						uni.showToast({
							title: "已自动去除库存不足的商品",
							icon: "none",
						});
					}
				});
			},

			//跳转到填写地址
			toadd() {
				var that = this;
				uni.navigateTo({
					url: "/pageC/addressManagement/addressManagement?tabs=" + Number(0),
					events: {
						getadd(res) {
							console.log(res);
							that.addinfo = res;
							that.province_id = res.province_id;
							that.country_id = res.country_id
							that.transport();
						},
					},
				});
			},

			//货运类型列表
			transport() {
				uni.$u.http
					.get("/api/transport-type", {
						params: {
							province_id: this.province_id,
							country_id:this.country_id
						},
					})
					.then((res) => {
						this.containerList = res;
						this.transport_type_id = res[0].id;
						this.transportTypeName = res[0].name_cn; //等待后续更改language删除掉
						//根据不同的语言选择不用的类型
						if (this.language == "zh-CN") {
							this.transportTypeName = res[0].name_cn;
						}
						if (this.language == "en-US") {
							this.transportTypeName = res[0].name_en;
						}
						if (this.language == "es-ES") {
							this.transportTypeName = res[0].name_es;
						}
						if (this.language == "it-IT") {
							this.transportTypeName = res[0].name_ita;
						}
					})
					.catch(() => {});
			},

			//正则匹配手机号
			replacePhoneToStar: function(phone) {
				if (phone) {
					return phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
				}
			},

			//商品推荐
			recommend() {
				uni.$u.http
					.post("/api/goods/recommend", {
						keyword: "",
					})
					.then((res) => {
						this.swiptlist = res;
					})
					.catch(() => {});
			},

			//增加 or 减少 商品数量
			changeGoodsNum(type) {
				if (type == "increase") {
					this.goodsValue++;
					this.config();
				} else if (this.goodsValue > 1) {
					this.goodsValue--;
					this.config();
				}
			},
		},
	};
</script>

<style scoped lang="scss">
	.page {
		background: rgba(244, 244, 244, 1);
		padding: 20rpx 24rpx;
		box-sizing: border-box;
		padding-bottom: 200rpx;

		// 地址
		.address {
			width: 702rpx;
			// height: 182rpx;
			background: #ffffff;
			border-radius: 16rpx;
			padding: 32rpx 24rpx;
			box-sizing: border-box;

			.add {
				font-family: SFPro, SFPro;
				font-weight: 500;
				font-size: 32rpx;
				color: #222222;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
			}

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

		//物流
		.logistics {
			width: 702rpx;
			background: #ffffff;
			border-radius: 16rpx;
			padding: 28rpx 22rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.change {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #f83224;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				margin-right: 8rpx;
			}
		}

		.btn {
			width: 750rpx;
			height: 166rpx;
			background: #ffffff;
			box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(0, 0, 0, 0.05);
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 0 24rpx 5rpx 5rpx;
			box-sizing: border-box;

			.money {
				font-family: HarmonyOS_Sans_Medium;
				font-size: 48rpx;
				color: #f83224;
				line-height: 38rpx;
				text-align: left;
				font-style: normal;
				// font-weight: 500;
				font-weight: bold;
			}

			.kg {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
			}

			.order {
				width: 232rpx;
				height: 80rpx;
				background: #f83224;
				border-radius: 40rpx;
				font-family: PingFangTC, PingFangTC;
				font-weight: 500;
				font-size: 32rpx;
				color: #ffffff;
				line-height: 80rpx;
				text-align: center;
				font-style: normal;
				margin-left: 20rpx;
			}
		}
	}
</style>