wx-qhb/pageA/order.vue

<template>
	<view class="back">
		<!-- 地址 -->
		<view class="address" @click="toadd">
			<view class="u-flex u-row-between">
				<view class="add" v-if="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="addinfo">
				<text>{{ addinfo.name }}</text>
				<text style="margin-left: 20rpx">{{
          replacePhoneToStar(addinfo.mobile)
        }}</text>
			</view>
		</view>
		<!-- 商品 -->
		<view class="shop">
			<view class="" v-if="typea == 'shop'">
				<view class="u-flex" style="margin-top: 32rpx" v-for="(item, idx) in selelist" :key="idx">
					<image :src="item.image" style="width: 184rpx; height: 184rpx" mode=""></image>
					<view class=" " style="
              margin-left: 20rpx;
              flex-direction: column;
              justify-content: space-between;
              height: 184rpx;
              display: flex;
              flex: 1;
            ">
						<view class="">
							<text class="toptitle">{{ item.name_cn }}</text>
							<view class="weight">{{ item.sku_item[0].item }} </view>
						</view>
						<view class="u-flex u-row-between">
							<view class="">
								<text class="money">¥</text>
								<text class="money" style="font-size: 34rpx">{{
                  item.sku_item[0].discount_price
                }}</text>
							</view>
							<view class=""> x {{ item.cart.goods_num }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-else>
				<view class="">
					<image :src="goodinfo.merchant.image" style="width: 38rpx; height: 38rpx" mode=""></image>
					<text class="name">{{ goodinfo.merchant.merchant_name }}</text>
				</view>
				<view class="u-flex" style="margin-top: 32rpx">
					<image :src="sku_info.image" style="width: 184rpx; height: 184rpx" mode=""></image>
					<view class=" " style="
              margin-left: 20rpx;
              flex-direction: column;
              justify-content: space-between;
              height: 184rpx;
              display: flex;
              flex: 1;
            ">
						<view class="">
							<text class="toptitle">{{ goodinfo.name_cn }}</text>
							<view class="weight">{{ sku_info.item }} </view>
							<!-- <view class="">{{Number(sku_info.weight)*value}}kg</view> -->
						</view>
						<view class="u-flex u-row-between">
							<view class="">
								<text class="money">¥</text>
								<text class="money" style="font-size: 34rpx">{{
                  goodinfo.is_discount == 1
                    ? (Number(sku_info.price * 1000) * Number(value * 1000)) /
                      1000000
                    : (Number(sku_info.discount_price * 1000) *
                        Number(value) *
                        1000) /
                      1000000
                }}</text>
							</view>
							<u-number-box v-model="value">
								<view slot="minus" class="">
									<u-icon name="minus" size="12"></u-icon>
								</view>
								<input slot="input" v-model="value" style="width: 40px; text-align: center"
									class="input" />
								<view slot="plus" class="">
									<u-icon name="plus" size="12"></u-icon>
								</view>
							</u-number-box>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 物流 -->
		<view class="logistics u-flex u-row-between">
			<text style="font-weight: 600; width: 320rpx">{{ i18n.flow }}</text>
			<view class="u-flex" @click="show = true">
				<text class="change">{{
          containname1 ? type1 + " | " + containname1 : i18n.selection
        }}</text>
				<u-icon name="arrow-right" size="16"></u-icon>
			</view>
		</view>
		<!-- 推荐 -->
		<view class="recommend">
			<view class="top">
				<image src="static/images/recommend.png" style="width: 124rpx; height: 30rpx" mode=""></image>
			</view>
			<view class="bottom">
				<scroll-view scroll-x class="u-flex" style="column: gap 28rpx; display: flex">
					<view class="u-flex" style="column-gap: 16rpx">
						<view class="" v-for="(item, idx) in swiptlist" :key="idx" @click="todetail(item.id)">
							<image :src="item.image" style="width: 156rpx; height: 156rpx" mode="">
							</image>
							<view class="title" v-if="language == 'zh-CN'">
								{{ item.name_cn }}
							</view>
							<view class="title" v-if="language == 'en-US'">
								{{ item.name_en }}
							</view>
							<view class="title" v-if="language == 'es-ES'">
								{{ item.name_es }}
							</view>
							<view class="title" v-if="language == 'it-IT'">
								{{ item.name_ita }}
							</view>
							<view class="money" style="color: #f83224; font-size: 20rpx">
								<text>¥</text>
								<text style="font-size: 28rpx">{{
                  item.is_discount == 0
                    ? item.discount_price.slice(0, -3)
                    : item.price.slice(0, -3)
                }}</text>
								<text>{{
                  item.is_discount == 0
                    ? item.discount_price.slice(-3)
                    : item.price.slice(-3)
                }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 商品相关 -->
		<view class="abount" style="margin-top: 20rpx">
			<view class="u-flex u-row-between" style="margin-bottom: 40rpx">
				<view class="name">{{ i18n.Commodityamount }}</view>
				<view class="" v-if="typea == 'shop'">{{ goodsPrice }}</view>
				<view class="money" v-else>
					¥{{
            goodinfo.is_discount == 1
              ? (Number(sku_info.price * 100) * Number(value * 100)) / 10000
              : (Number(sku_info.discount_price * 100) * Number(value * 100)) /
                10000
          }}
				</view>
			</view>
			<view class="u-flex u-row-between" v-show="containname1">
				<view class="name">{{ i18n.Grosscommodityweight }}</view>
				<!-- 				<view class="money" v-if="typea=='shop'">{{
					goodsWeight
				}}kg</view> -->
				<!-- <view class="money" v-else>{{Number(sku_info.weight)*value}}kg</view> -->
				<view class="money">{{ weight_total }}</view>
			</view>
			<view class="back u-flex" v-if="containname1">
				<image src="static/images/warning.png" style="width: 32rpx; height: 32rpx" mode=""></image>
				<text
					style="margin-left: 12rpx; font-size: 24rpx">{{ i18n.buy }}{{ recommend_weight }}kg{{ i18n.price }}¥{{ unit_fee }}，{{
            i18n.morefavorable
          }}</text>
			</view>
			<view class="u-flex u-row-between" style="margin-bottom: 40rpx; margin-top: 20rpx">
				<view class="name">{{ i18n.Costperkilogram }}</view>
				<view class="money">{{
          containname1 ? unit_price : i18n.shippingmethod
        }}</view>
			</view>
			<view class="u-flex u-row-between">
				<view class="name">{{ i18n.freight }}</view>
				<view class="money">{{
          containname1 ? sum : i18n.shippingmethod
        }}</view>
			</view>
			<view class="zong u-flex u-row-right">
				<view class="">
					<text class="small">{{ i18n.subtotal }}</text>
					<text class="mon">¥</text>
					<text class="mon" v-if="typea == 'shop'">{{ goodsPrice }}</text>
					<text class="mon" v-else style="font-size: 40rpx">{{
            goodinfo.is_discount == 1
              ? (Number(sku_info.price * 100) * Number(value * 100)) / 10000
              : (Number(sku_info.discount_price * 100) * Number(value * 100)) /
                10000
          }}</text>
				</view>
			</view>
		</view>
		<view class="" style="height: 166rpx"></view>
		<view class="btn u-flex u-row-right">
			<view class="u-flex">
				<!-- 				<text v-if="typea == 'shop'">{{i18n.Atotalof}}{{goodsWeight}}kg,</text>
				<text v-else class="kg">{{i18n.Atotalof}}{{Number(sku_info.weight) * value}}kg,</text> -->
				<text class="kg" v-show="containname1">{{ i18n.Atotalof }}{{ weight_total }}kg,</text>
				<text>{{ i18n.total }}:</text>
				<text class="money" style="font-size: 28rpx">¥</text>
				<text style="font-weight: bold" class="money" v-if="typea == 'shop'">{{
          Number(sum * 10000 + Number(goodsPrice) * 10000) / 10000
        }}</text>
				<view class="" v-else>
					<text class="money" v-if="goodinfo.is_discount == 1" style="font-weight: bold">{{
              Number(
                sum * 10000 + Number(sku_info.price) * Number(value) * 10000
              ) / 10000
            }}</text>
					<text class="money" v-if="goodinfo.is_discount == 0" style="font-weight: bold">{{
              Number(
                sum * 10000 +
                  Number(sku_info.discount_price) * Number(value) * 10000
              ) / 10000
            }}</text>
				</view>
			</view>
			<view class="order" @click="topay">
				{{ i18n.Submitorder }}
			</view>
		</view>
		<!-- 跨境物流 -->
		<u-popup :show="show" @close="close" mode="bottom" closeIconPos="top-right" round="28">
			<view style="padding: 40rpx 28rpx; box-sizing: border-box">
				<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="close" color="background: #333333;" size="28"></u-icon>
				</view>
				<view class="u-flex" style="margin-top: 60rpx; flex-wrap: wrap; column-gap: 16rpx">
					<view :class="index == idx ? 'active' : 'unactive'" v-for="(item, idx) in containerList"
						@click="change(item, idx)" style="
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              margin-bottom: 28rpx;
              position: relative;
            ">
						<image v-if="index == idx" src="static/images/change.png" style="
                width: 36rpx;
                height: 32rpx;
                position: absolute;
                top: 0;
                right: 0;
              " mode=""></image>
						<view class="logname" v-if="language == 'zh-CN'">{{
              item.name_cn
            }}</view>
						<view class="logname" v-if="language == 'en-US'">{{
              item.name_en
            }}</view>
						<view class="logname" v-if="language == 'es-ES'">{{
              item.name_es
            }}</view>
						<view class="logname" v-if="language == 'it-IT'">{{
              item.name_ita
            }}</view>
						<!-- 						<view class="wei">¥{{goodinfo.cate==0?item.normal_delivery_fee:item.special_delivery_fee}}/kg</view> -->
						<view class="wei" style="font-size: 32rpx; font-weight: 600">¥{{ item.unit_price }}/kg</view>
					</view>
				</view>
				<view class="nextto" @click="next">{{ i18n.next }}</view>
			</view>
		</u-popup>
		<!-- 跨境物流下一步 -->
		<u-popup :safeAreaInsetTop="true" :show="show1" @close="close" 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="close" 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 containlist" 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="/pageA/static/images/active.png"
								style="width: 36rpx; height: 36rpx" mode=""></image>
							<image v-else src="/pageA/static/images/unactive.png" style="width: 36rpx; height: 36rpx"
								mode=""></image>
						</view>
						<view class="u-flex u-row-between" style="margin-top: 28rpx">
							<view class="chest">
								<text v-if="language == 'zh-CN'">{{ 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="close">{{ i18n.Cancel }}</view>
					<view class="confirm" @click="confirm">{{ i18n.enter }}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 1,
				show: false,
				index: "",
				show1: false,
				datechan: "",
				sku_info: {},
				goodinfo: {},
				swiptlist: [], //推荐列表
				language: "zh-CN",
				containerList: [], //列表
				province_id: "",
				transport_type_id: "",
				containlist: [],
				containid: "", //货柜id
				containname: "", //货柜名称
				type: "", //货运方式名称
				containname1: "",
				type1: "",
				sum: "",
				unit_price: "",
				recommend_weight: "",
				sum1: "",
				unit_price1: "",
				recommend_weight1: "",
				max_weight: "",
				min_weight: "",
				unit_fee: "",
				addinfo: "",
				huoid: "",
				selelist: [],
				typea: "",
				goodsPrice: "",
				goodsWeight: "",
				stringcheck: "",
				cartid: "",
				weight_total: "",
			};
		},
		computed: {
			i18n() {
				return this.$t("index");
			},
		},
		onLoad(options) {
			// url: '/pageA/order?sku=' + this.sku_info + '&value=' + this.value+'&goodinfo='+this.goodinfo
			if (options.typea) {
				console.log(22222);
				this.typea = options.typea;
				this.selelist = JSON.parse(decodeURIComponent(options.selelist));
				this.goodsPrice = options.goodsPrice;
				this.goodsWeight = options.goodsWeight;
				this.stringcheck = options.stringcheck;
				this.cartid = options.cartid;
			} else if (options) {
				this.value = options.value;
				this.sku_info = JSON.parse(decodeURIComponent(options.sku));
				this.goodinfo = JSON.parse(decodeURIComponent(options.goodinfo));
				if (options.share_merchant_id) {
					this.share_merchant_id = options.share_merchant_id;
				}
			}
		},
		onShow() {
			if (uni.getStorageSync("language") != "") {
				this.language = uni.getStorageSync("language");
			}
			this.recommend();
			// this.container()
		},
		methods: {
			todetail(id) {
				uni.navigateTo({
					url: "/pageA/productdetails?id=" + id,
				});
			},
			//正则匹配手机号
			replacePhoneToStar: function(phone) {
				if (phone) {
					return phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
				}
			},
			//推荐重量
			recommendweight() {
				uni.$u.http
					.get("/api/express-order/recommend-container", {
						params: {
							container_id: this.containid,
							type: this.goodinfo.cate == 0 ? "normal" : "special",
						},
					})
					.then((res) => {
						console.log(res);
						this.max_weight = res.max_weight;
						this.min_weight = res.min_weight;
						this.unit_fee = res.unit_fee;
					})
					.catch(() => {});
			},
			//货运类型列表
			transport() {
				uni.$u.http
					.get("/api/transport-type", {
						params: {
							province_id: this.province_id,
						},
					})
					.then((res) => {
						this.containerList = res;
						this.transport_type_id = res[0].id;
						if (this.language == "zh-CN") {
							this.type = res[0].name_cn;
						}
						if (this.language == "en-US") {
							this.type = res[0].name_en;
						}
						if (this.language == "es-ES") {
							this.type = res[0].name_es;
						}
						if (this.language == "it-IT") {
							this.type = res[0].name_ita;
						}
					})
					.catch(() => {});
			},
			//跳转到填写地址
			toadd() {
				var that = this;
				uni.navigateTo({
					url: "/pageC/addressManagement/addressManagement?tabs=" + Number(0),
					events: {
						getadd(res) {
							that.addinfo = res;
							that.province_id = res.province_id;
							that.transport();
						},
					},
				});
			},
			//货柜列表
			container() {
				this.containlist = [];
				uni.$u.http
					.get("/api/container-base", {
						params: {
							is_page: 0,
							province_id: this.province_id,
							transport_type_id: this.transport_type_id,
							weight: this.typea == "shop" ?
								"" : Number(this.sku_info.weight) * this.value,
							type: this.typea == "shop" ?
								"" : this.goodinfo.cate == 0 ?
								"normal" : "special",
							length: this.typea == "shop" ?
								"" : Number(this.sku_info.length) * this.value, //		是	String	长
							width: this.sku_info.width, //		是	String	宽
							height: this.sku_info.height, //		是	String	高
							cart_id: this.cartid,
							// cart_id: '147,148'
						},
					})
					.then((res) => {
						res.forEach((item) => {
							if (item.sum != 0) {
								this.containlist.push(item);
							}
							console.log(this.containlist);
						});
						if (this.cartid.length == 0 && this.typea == "shop") {
							console.log("his.cartid.length", this.cartid.length);
							this.sum = 0;
						}
						// this.sum = this.containlist[0].sum
						// this.unit_price = this.containlist[0].unit_price
						if (this.goodinfo.is_shipping == 0) {
							this.sum = 0;
						} else {
							this.sum = this.containlist[0].sum;
						}
						if (this.goodinfo.is_shipping == 0) {
							this.unit_price = 0;
						} else {
							this.unit_price = this.containlist[0].unit_price;
						}
						this.recommend_weight = this.containlist[0].recommend_weight;
						this.weight_total = this.containlist[0].weight_total;
						this.containid = this.containlist[0].id;
						if (this.language == "zh-CN") {
							this.containname = this.containlist[0].name_cn;
						}
						if (this.language == "en-US") {
							this.containname = this.containlist[0].name_en;
						}
						if (this.language == "es-ES") {
							this.containname = this.containlist[0].name_es;
						}
						if (this.language == "it-IT") {
							this.containname = this.containlist[0].name_ita;
						}
					})
					.catch(() => {});
			},
			//运费满减
			config() {
				var that = this;
				uni.$u.http
					.get("/api/config", {
						params: {
							module: "free_shipping",
						},
					})
					.then((res) => {
						if (
							Number(that.goodsPrice) > res.free_shipping &&
							that.typea == "shop"
						) {
							console.log("goodsPrice", that.goodsPrice);
							console.log("res.free_shipping", res.free_shipping);
							that.sum = 0;
							that.unit_price = 0;
						}
						let goodsum = "";
						if (that.goodinfo.is_discount == 1) {
							goodsum =
								(Number(that.sku_info.price * 100) * Number(that.value * 100)) /
								10000;
							console.log("that.sum", that.sum);
							console.log("that.goodsum", goodsum);
							if (goodsum > res.free_shipping) {
								that.sum = 0;
								that.unit_price = 0;
							}
						} else {
							goodsum =
								(Number(that.sku_info.discount_price * 100) *
									Number(that.value * 100)) /
								10000;
							if (goodsum > res.free_shipping) {
								that.sum = 0;
								that.unit_price = 0;
							}
						}
					})
					.catch(() => {});
			},
			//商品推荐
			recommend() {
				uni.$u.http
					.post("/api/goods/recommend", {
						keyword: "",
					})
					.then((res) => {
						this.swiptlist = res;
					})
					.catch(() => {});
			},
			change(item, index) {
				this.transport_type_id = item.id;
				this.index = index;
				if (this.language == "zh-CN") {
					this.type = item.name_cn;
				}
				if (this.language == "en-US") {
					this.type = item.name_en;
				}
				if (this.language == "es-ES") {
					this.type = item.name_es;
				}
				if (this.language == "it-IT") {
					this.type = item.name_ita;
				}
			},
			next() {
				this.show = false;
				this.show1 = true;
				this.type1 = this.type;
				this.container();
			},
			activea(item, idx) {
				this.datechan = idx;
				this.sum = item.sum;
				this.unit_price = item.unit_price;
				this.recommend_weight = item.recommend_weight;
				this.containid = item.id;
				this.weight_total = item.weight_total;
				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;
				}
			},
			//确定
			confirm() {
				this.show1 = false;
				this.containname1 = this.containname;
				this.recommendweight();
				this.config();
			},
			// 取消
			close() {
				this.show = false;
				this.show1 = false;
			},
			//提交订单
			topay() {
				uni.$u.http
					.post("/api/order", {
						address_id: this.addinfo.id, //3	是	String	地址ID
						goods_id: this.goodinfo.id, //65	是	String	商品id
						goods_num: this.value, //2	是	String	商品数量
						sku_item_id: this.sku_info.id, //60	是	String	规格id
						cart_ids: this.stringcheck, //8,9	是	String	购物车id
						remark: "", //备注	是	String	备注
						merchant_goods_id: this.goodinfo.merchant_goods_id || "", //39	是	String	团长商品id
						container_id: this.containid, //1	是	String	货柜id
						share_member_id: this.share_merchant_id, //	是	String	分享团长id 分享商品的时候传
						belong: this.goodinfo.source || "", //0	是	String	商品归属 0团长 1平台自营 2团长发布或者分享的平台自营商品、供应链商品
					})
					.then((res) => {
						console.log("share_merchant_id", this.share_merchant_id);
						console.log(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(() => {});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.toptitle {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		// font-size: 22rpx;
		color: #222222;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
		// width: 148rpx;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		word-break: break-all;
	}

	::v-deep .u-status-bar {
		height: 0 !important;
	}

	.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;
	}

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

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

	.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;
	}

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

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

	.nextto {
		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;
		margin-top: 108rpx;
	}

	.logname {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
		text-align: right;
		font-style: normal;
		overflow: hidden;
		width: 220rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: center;
		word-break: break-all;
	}

	.wei {
		font-family: JDZhengHT, JDZhengHT;
		font-weight: 400;
		font-size: 32rpx;
		color: #f83224;
		line-height: 40rpx;
		text-align: right;
		font-style: normal;
		margin-top: 8rpx;
	}

	.active {
		width: 218rpx;
		height: 148rpx;
		background: rgba(247, 50, 36, 0.05);
		border-radius: 8rpx;
		border: 1rpx solid #f83224;
	}

	.unactive {
		width: 218rpx;
		height: 148rpx;
		border-radius: 12rpx;
		border: 1rpx solid #c3c3c3;
	}

	.poptitle {
		width: 142rpx;
		height: 50rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 36rpx;
		color: #333333;
		text-align: center;
		width: 100%;
	}

	.back {
		background: rgba(244, 244, 244, 1);
		padding: 20rpx 24rpx;
		box-sizing: border-box;

		.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;
			}
		}

		//商品相关
		.abount {
			padding: 28rpx 24rpx;
			box-sizing: border-box;
			background: #ffffff;
			border-radius: 16rpx;
			width: 702rpx;

			.zong {
				width: 654rpx;
				padding: 22rpx 0 0 0;
				border-top: 2rpx solid rgba(151, 151, 151, 0.1);
				margin-top: 32rpx;

				.small {
					font-family: PingFangTC, PingFangTC;
					font-weight: 400;
					font-size: 24rpx;
					color: #444444;
					line-height: 34rpx;
					text-align: left;
					font-style: normal;
				}

				.mon {
					font-family: HarmonyOS_Sans_Medium;
					font-size: 28rpx;
					color: #f83224;
					line-height: 38rpx;
					text-align: left;
					font-style: normal;
					margin-left: 12rpx;
					font-weight: bold;
				}
			}

			.back {
				background: rgba(244, 244, 244, 1);
				padding: 22rpx 16rpx;
				box-sizing: border-box;
				margin-top: 10rpx;
				// margin-bottom: 20rpx;
			}

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

			.money {
				font-family: HarmonyOS_Sans_Medium;
				font-size: 28rpx;
				color: #222222;
				line-height: 38rpx;
				text-align: left;
				font-style: normal;
				font-weight: 600;
			}
		}

		.recommend {
			margin-top: 20rpx;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #222222;
				line-height: 32rpx;
				text-align: left;
				font-style: normal;
				width: 148rpx;
				height: 64rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				word-break: break-all;
			}

			.top {
				width: 702rpx;
				height: 64rpx;
				background: linear-gradient(180deg,
						#ffe7e3 0%,
						rgba(255, 255, 255, 1) 100%);
				border-radius: 16rpx 16rpx 0 0;
				padding: 24rpx 22rpx;
				box-sizing: border-box;
			}

			.bottom {
				padding: 0 20rpx 22rpx;
				box-sizing: border-box;
				background: #fff;
			}
		}

		//物流
		.logistics {
			width: 702rpx;
			// height: 96rpx;
			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;
			}
		}

		//商城
		.shop {
			width: 702rpx;
			// height: 322rpx;
			background: #ffffff;
			border-radius: 16rpx;
			padding: 30rpx 24rpx;
			margin-top: 20rpx;
			box-sizing: border-box;

			.bu {
				width: 120rpx;
				height: 40rpx;
				border-radius: 20rpx;
				border: 1rpx solid rgba(151, 151, 151, 0.3);
			}

			.money {
				font-family: HarmonyOS_Sans_Medium;
				font-size: 24rpx;
				color: #f83224;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
				font-weight: 600;
			}

			.name {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #222222;
				line-height: 42rpx;
				text-align: left;
				font-style: normal;
				margin-left: 10rpx;
			}

			.weight {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(34, 34, 34, 0.6);
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
				margin-top: 16rpx;
			}
		}

		// 地址
		.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;
			}
		}
	}

	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #e6e6e6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #ff0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>