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

<template>
	<!-- 商城 -->
	<view class="">


		<scroll-view class="" scroll-y="true" style="height: calc(100vh - 300rpx); padding: 0 24rpx">
			<view style="position: relative; padding-bottom: 20rpx">
				<!-- 自定义导航栏 -->
				<image src="../../static/images/index/back.png" style="
          width: 750rpx;
          height: 1200rpx;
          position: absolute;
          top: 0;
          z-index: -1;
          left: -24rpx;
        " mode="">
				</image>
				<!-- 地址 -->
				<view class="address">
					<view class="left u-flex" style="display: flex">
						<view class="u-row-between left" style="display: flex; flex-direction: column">
							<image src="../../static/express/ji.png" style="width: 40rpx; height: 40rpx" mode="">
							</image>
							<image @click="changeadd" src="../../static/express/change.png"
								style="width: 40rpx; height: 40rpx" mode="">
							</image>
						</view>
						<view class="u-row-between left" style="
              flex: 1;
              margin-left: 28rpx;
              border-bottom: 2rpx solid rgba(151, 151, 151, 0.08);
              display: flex;
            ">
							<view v-if="JSON.stringify(topadd) == '{}'" class="u-row-between" style="" @click="send">
								<view class="pople">{{ i18n.sender }}</view>
								<view class="jiadd" style="margin-top: 14rpx">{{
                i18n.informat
              }}</view>
							</view>
							<view v-else class="u-row-between" style="" @click="send">
								<view class="">
									<text class="topname">{{ topadd.name }}</text>
									<text class="topaddress" style="margin-left: 8rpx">{{
                  replacePhoneToStar(topadd.mobile)
                }}</text>
								</view>
								<view class="topaddress" style="margin-top: 14rpx">{{
                topadd.full_address
              }}</view>
							</view>
							<view class="u-flex" @click.stop="addbook(1)">
								<view class="" style="color: rgba(151, 151, 151, 1)">|</view>
								<text class="right">{{ i18n.addressbook }}</text>
							</view>
						</view>
					</view>
					<view class="left u-flex" style="
            display: flex;
            margin-top: 26rpx;
            border-bottom: 2rpx solid rgba(151, 151, 151, 0.08);
          ">
						<view class="u-row-between left" style="display: flex; flex-direction: column">
							<image src="../../static/express/shou.png" style="width: 40rpx; height: 40rpx" mode="">
							</image>
							<!-- <image src="../../static/express/change.png" style='width: 40rpx;;height:40rpx ;' mode=""> -->
							<!-- </image> -->
						</view>
						<view class="u-row-between left" style="flex: 1; margin-left: 28rpx; display: flex">
							<view v-if="JSON.stringify(bottomadd) == '{}'" class="u-row-between" style=""
								@click="recipirnt">
								<view class="pople">{{ i18n.recipient }}</view>
								<view class="jiadd" style="margin-top: 14rpx">{{
                i18n.informate
              }}</view>
							</view>
							<view v-else class="u-row-between" style="" @click="recipirnt">
								<view class="">
									<text class="topname">{{ bottomadd.name }}</text>
									<text class="topaddress" style="margin-left: 8rpx">{{
                  replacePhoneToStar(bottomadd.mobile)
                }}</text>
								</view>
								<view class="topaddress" style="margin-top: 14rpx">{{
                bottomadd.full_address
              }}</view>
							</view>
							<view class="u-flex" @click.stop="addbook(0)">
								<view class="" style="color: rgba(151, 151, 151, 1)">|</view>
								<text class="right">{{ i18n.addressbook }}</text>
							</view>
						</view>
					</view>
					<!-- 物品信息 -->
					<view class="info u-flex u-row-between">
						<view class="u-flex">
							<text class="wupin">{{ i18n.item }}</text>
							<view class="mast">{{ i18n.required }}</view>
						</view>
						<view v-if="JSON.stringify(goodinfo) === '{}'" class="u-flex" @click="goods">
							<view class="change">{{ i18n.selection }}</view>
							<image src="../../static/express/next1.png"
								style="width: 28rpx; height: 28rpx; margin-left: 6rpx" mode=""></image>
						</view>
						<view v-else class="goodname" @click="goods">
							{{ goodinfo.goodname }},{{ goodinfo.weight }}kg
						</view>
					</view>
					<!-- 跨境物流 -->
					<view class="info u-flex u-row-between">
						<view class="u-flex">
							<text class="wupin">{{ i18n.flow }}</text>
						</view>
						<view class="u-flex" @click="changewu">
							<!-- <text class="change" style="color: rgba(248, 50, 36, 1);">{{i18n.selection}}</text> -->
							<text class="change" style="color: rgba(248, 50, 36, 1)">{{
              leftname ? leftname + " |  " + rightname : i18n.selection
            }}</text>
							<image v-if="leftname == ''" src="../../static/express/next1.png"
								style="width: 28rpx; height: 28rpx; margin-left: 6rpx" mode=""></image>
						</view>
					</view>
					<!-- 去寄件 -->
					<view class="" style="margin-top: 34rpx">
						<view class="mail" @click="todev">
							{{ i18n.mail }}
						</view>
					</view>
					<view class="bottom u-flex u-row-between">
						<button style="
              background-color: transparent;
              padding-left: 0 !important;
              padding-right: 0 !important;
              margin: 0 !important;
            " open-type="share" class="u-flex">
							<image src="../../static/express/share.png" style="width: 36rpx; height: 36rpx" mode="">
							</image>
							<text class="friend">{{ i18n.share }}</text>
						</button>
						<view class="friend">|</view>
						<view class="u-flex" @click="counter">
							<image src="/static/images/index/compile.png" style="width: 36rpx; height: 36rpx" mode="">
							</image>
							<text class="friend">{{ i18n.compute }}</text>
						</view>
					</view>
				</view>
				<!-- 我的包裹 -->
				<view class="parcel">
					<view class="u-flex u-row-between">
						<view class="myparcel">
							<text>{{ i18n.mine }}</text>
							<text style="color: rgba(248, 50, 36, 1)">{{ i18n.parcel }}</text>
						</view>
						<view class="add u-flex">
							<image src="../../static/express/add.png" mode="" style="width: 44rpx; height: 44rpx">
							</image>
							<text class="addtext" @click="toparcel">{{ i18n.addsign }}</text>
						</view>
					</view>
					<view class="u-flex u-row-around" style="margin-top: 44rpx">
						<view class="flexc" @click="pack('to_transit')">
							<view class="" style="position: relative; width: 68rpx; height: 68rpx">
								<u-badge :absolute="true" :offset="[0, -15]" :type="type" max="99"
									:value="transit"></u-badge>
								<image src="/static/express/address.png" style="width: 68rpx; height: 68rpx" mode="">
								</image>
							</view>
							<text style="margin-top: 16rpx" class="bao">{{
              i18n.deliver
            }}</text>
						</view>
						<view class="flexc" style="position: relative" @click="pack('transit_receipt')">
							<view class="" style="position: relative; width: 68rpx; height: 68rpx">
								<u-badge :absolute="true" :offset="[0, -15]" :type="type" max="99"
									:value="receipt"></u-badge>
								<image src="/static/express/sign.png" style="width: 68rpx; height: 68rpx" mode="">
								</image>
							</view>
							<text style="margin-top: 16rpx" class="bao">{{ i18n.Sign }}</text>
						</view>
						<view class="flexc" style="position: relative" @click="pack('to_overseas')">
							<view class="" style="position: relative; width: 68rpx; height: 68rpx">
								<u-badge :absolute="true" :offset="[0, -15]" :type="type" max="99"
									:value="overseas"></u-badge>
								<image src="../../static/express/send.png" style="width: 68rpx; height: 68rpx" mode="">
								</image>
							</view>
							<text style="margin-top: 16rpx" class="bao">{{
              i18n.overseas
            }}</text>
						</view>
					</view>
				</view>
				<!-- 拼包 -->
				<view class="u-flex u-row-between" style="margin-top: 32rpx; width: 702rpx">
					<view class="u-flex">
						<text class="hai">{{ i18n.parceling }}</text>
						<image v-if="language == 'zh-CN'" style="width: 180rpx; height: 32rpx"
							src="/static/express/label.png" mode=""></image>
						<image v-if="language == 'en-US'" style="width: 300rpx; height: 32rpx"
							src="/static/express/label1.png" mode=""></image>
						<image v-if="language == 'es-ES'" style="width: 334rpx; height: 32rpx"
							src="/static/express/label2.png" mode=""></image>
						<image v-if="language == 'it-IT'" style="width: 366rpx; height: 32rpx"
							src="/static/express/label3.png" mode=""></image>
					</view>
					<view class="u-flex">
						<text class="more" @click="more">{{ i18n.more }}</text>
						<image src="../../static/express/next2.png" style="width: 30rpx; height: 30rpx" mode=""></image>
					</view>
				</view>
				<!-- 拼包数据 -->
				<view class="label" v-for="(item, idx) in expressList" :key="idx">
					<view class="" style="display: flex">
						<view class="left flexc">
							<text class="bourn">{{ i18n.destination }}</text>
							<view class="addres">{{ item.containerBase.country_name }}</view>
							<view class="addres">{{ item.containerBase.province_name }}</view>
						</view>
						<view class="" style="flex: 1; margin-left: 20rpx">
							<view class="u-flex u-row-between">
								<view class="">
									<text class="bigtitle" v-if="item.type == 'normal'">{{
                  i18n.Ordinary
                }}</text>
									<text class="bigtitle" v-else>{{ i18n.Special }}</text>
									<text style="margin: 0 8rpx">|</text>
									<text v-if="language == 'zh-CN'" class="bigtitle">{{
                  item.transportType.name_cn
                }}</text>
									<text v-if="language == 'en-US'" class="bigtitle">{{
                  item.transportType.name_en
                }}</text>
									<text v-if="language == 'es-ES'" class="bigtitle">{{
                  item.transportType.name_es
                }}</text>
									<text v-if="language == 'it-IT'" class="bigtitle">{{
                  item.transportType.name_ita
                }}</text>
								</view>
								<view class="mon">
									<text class="timeb">{{ i18n.price }}</text>
									<text>￥</text>
									<text v-if="item.price" style="font-size: 32rpx">{{
                  item.price.slice(0, -3)
                }}</text>
									<text v-if="item.price">{{ item.price.slice(-3) }}</text>
								</view>
							</view>
							<view class="" style="margin-top: 34rpx">
								<u-line-progress activeColor="rgba(255, 21, 21, 1)" :percentage="item.progress"
									height="6" :showText="false"></u-line-progress>
							</view>
							<view class="u-flex u-row-between" style="margin-top: 20rpx">
								<view class="u-flex">
									<view class="">
										<text class="timeb">{{ i18n.already }} </text>
										<text class="timeb"
											style="color: rgba(255, 21, 21, 1)">{{ item.used_weight }}kg</text>
									</view>
									<text style="margin: 0 8rpx">|</text>
									<view class="">
										<text class="timeb">{{ i18n.residue }} </text>
										<text class="timeb"
											style="color: rgba(255, 21, 21, 1)">{{ item.residual_weight }}kg</text>
									</view>
								</view>
								<view class="">
									<text class="timeb">{{ i18n.plan }}{{ item.progress }}%</text>
								</view>
							</view>
						</view>
					</view>
					<view class="u-flex u-row-between" style="margin-top: 32rpx">
						<text class="timea">{{ i18n.start }}：{{ item.begin_date }}/{{ i18n.cut }}：{{
              item.end_date
            }}</text>
						<view class="pinb" @click="toaccount(item)">{{
            i18n.goparceling
          }}</view>
					</view>
				</view>
			</view>

			<!-- <u-button @click="show = true">打开</u-button> -->
			<!-- <view class="" style="height: 160rpx;"></view> -->
		</scroll-view>
		<u-popup round="28" :show="logshow" @close="close">
			<view class="pop">
				<kj-flow :weight='goodinfo.weight' :length='goodinfo.length' :width=' goodinfo.width'
					:height='goodinfo.height' :language="language" :goodstype="goodinfo.goodtype" ref="child"
					:province_id="province_id" @success="success" @close="close()" :leftchangea="leftchange"
					:rightchangea="rightchange" :typeida="typeid" :country_id='country_id'></kj-flow>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		conn
	} from "@/utils/WebIM";
	export default {
		props: {
			language: ''
		},
		data() {
			return {
				//顶部分段器
				list: [],
				current: 0,
				type: "error",
				percentage: 50, //进度条
				logshow: false, //物流选择
				status_collection: "", //我的包裹选择值
				transit: 0, //发往中转点
				receipt: 0, //中转已签收
				overseas: 0, //正发往海外
				topadd: {}, //新建寄件人
				bottomadd: {}, //新建收件人
				province_id: "",
				country_id: '',
				leftname: "",
				rightname: "",
				container_id: "", //货柜列表
				// language: "zh-CN",
				goodinfo: {}, //物品信息
				unit_price: "",
				expressList: [],
				leftchange: "",
				rightchange: "",
				typeid: "",
				unReadCount: 0,
			};
		},
		created(options) {
			this.list = [this.i18n.border, this.i18n.shop];
			// if (options.current) {
			// 	this.current = options.current
			// }
			this.topadd = {}; //新建寄件人
			this.bottomadd = {}; //新建收件人
		},
		mounted() {
			this.list[0] = this.i18n.border;
			this.list[1] = this.i18n.shop;
			// uni.setNavigationBarTitle({
			// 	title: this.i18n.setup
			// })
			// this.express(); //获取包裹数量  
			// if (uni.getStorageSync("language") != "") {
			//   this.language = uni.getStorageSync("language");
			// }
			// this.getexpress();
			// this.getlist();
		},
		computed: {
			i18n() {
				return this.$t("index");
			},
		},
		methods: {
			getlist() {
				this.unReadCount = 0;
				conn
					.getServerConversations({
						pageSize: 50,
						cursor: "",
					})
					.then((res) => {
						console.log(res);
						res.data.conversations.forEach((item) => {
							this.unReadCount += item.unReadCount;
						});
					});
			},
			onShareAppMessage(res) {
				if (res.from === "button") {
					// 来自页面内分享按钮
					console.log(res.target);
				}
				return {
					title: this.i18n.border,
					path: "/pages/index/index?current=0",
				};
			},
			callphone() {
				uni.$u.http
					.get("/api/config", {
						params: {
							module: "basic",
						},
					})
					.then((res) => {
						console.log(res);

						uni.makePhoneCall({
							phoneNumber: res.service_mobile,
						});
					})
					.catch(() => {});
			},
			//价格计算
			calculate() {
				uni.$u.http
					.get("/api/express-order/calculate", {
						params: {
							container_id: this.container_id, // 是 String 货柜ID
							weight: this.goodinfo.weight, //是 String 重量(kg)
							length: this.goodinfo.length, //是 String 长(m)
							width: this.goodinfo.width, //是 String 宽(m)
							height: this.goodinfo.height, //是 String 高(m)
							type: this.goodinfo.goodtype, //是 String 商品类型: normal.普通商品,
						},
					})
					.then((res) => {
						console.log(res);
						uni.navigateTo({
							url: "/pageB/delivery?goodinfo=" +
								encodeURIComponent(JSON.stringify(this.goodinfo)) +
								"&topadd=" +
								encodeURIComponent(JSON.stringify(this.topadd)) +
								"&bottom=" +
								encodeURIComponent(JSON.stringify(this.bottomadd)) +
								"&leftname=" +
								this.leftname +
								"&rightname=" +
								this.rightname +
								"&container_id=" +
								this.container_id +
								"&unit_price=" +
								this.unit_price +
								"&all=" +
								res,
						});
					})
					.catch(() => {});
			},
			//拼包列表
			getexpress() {
				uni.$u.http
					.get("/api/express-group-package", {
						params: {
							is_page: 0,
							page: 1,
							limit: 3,
							transport_type_id: "",
							container_base_id: "",
							type: "",
						},
					})
					.then((res) => {
						this.expressList = res;
					})
					.catch(() => {});
			},
			//跨境物流选择
			success(msg) {
				this.logshow = false;
				this.leftname = msg.leftname;
				this.container_id = msg.dateid;
				this.rightname = msg.rightname;
				this.unit_price = msg.unit_price;
				this.leftchange = msg.leftchange;
				this.rightchange = msg.rightchange;
				this.typeid = msg.typeid;
			},
			//物流选择
			changewu() {
				var that = this;
				if (this.province_id) {
					this.logshow = true;
					setTimeout(() => {
						console.log("2222222", this.$refs.child);
						that.$refs.child.transport();
					}, 800);
				} else {
					this.$u.toast(this.i18n.selectcity);
				}
			},
			//改变地址
			changeadd() {
				var a = {};
				a = this.topadd;
				this.topadd = this.bottomadd;
				this.bottomadd = a;
				this.province_id = this.bottomadd.province_id;
				this.country_id = this.bottomadd.country_id;
			},
			//正则匹配手机号
			replacePhoneToStar: function(phone) {
				if (phone) {
					return phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
				}
			},
			//地址薄
			addbook(index) {
				var that = this;
				uni.navigateTo({
					url: "/pageC/addressManagement/addressManagement?tabs=" + index,
					events: {
						getadd(res) {
							if (index == 1) {
								that.topadd = res;
								console.log("topadd", that.topadd);
							} else {
								that.bottomadd = res;
								console.log("bottom", that.bottomadd);
								that.province_id = that.bottomadd.province_id;
								that.country_id = that.bottomadd.country_id;
							}
						},
					},
				});
			},
			//我的包裹
			express() {
				uni.$u.http
					.get("/api/express-order/status-count", {})
					.then((res) => {
						console.log(res);
						this.overseas = res.to_overseas;
						this.receipt = res.transit_receipt;
						this.transit = res.to_transit;
					})
					.catch(() => {});
			},
			todev() {
				if (JSON.stringify(this.topadd) === "{}") {
					this.$u.toast("请填写寄件人地址");
				} else if (JSON.stringify(this.bottomadd) === "{}") {
					this.$u.toast("请填写收件人地址");
				} else if (JSON.stringify(this.goodinfo) === "{}") {
					this.$u.toast(this.i18n.select);
				} else if (this.leftname == "") {
					this.$u.toast(this.i18n.logisticsMethod);
				} else {
					this.calculate();
				}
			},
			count() {
				uni.navigateTo({
					url: "/pageB/account",
				});
			},
			pack(index) {
				uni.navigateTo({
					// url: '/pageB/myPackage?index=' + index
					url: "/pageC/myPackage/myPackage?type=" + index,
				});
			},
			more() {
				uni.navigateTo({
					url: "/pageB/list/list",
				});
			},
			//拼包快递
			toaccount(info) {
				uni.navigateTo({
					url: "/pageB/ParcelExpress?expressinfo=" +
						encodeURIComponent(JSON.stringify(info)) +
						"&type=" +
						"pin",
				});
			},
			//物流计算器
			counter() {
				uni.navigateTo({
					url: "/pageA/counter",
				});
			},
			//消息
			tochat() {
				uni.navigateTo({
					url: "/pageA/chat/news",
				});
			},
			//物品信息
			goods() {
				var that = this;
				if (JSON.stringify(this.goodinfo) == "{}") {
					uni.navigateTo({
						url: "/pageB/goods",
						events: {
							goodinfo: function(res) {
								console.log("goodinfo", res);
								that.goodinfo = res;
							},
						},
					});
				} else {
					uni.navigateTo({
						url: "/pageB/goods?goodinfo=" +
							encodeURIComponent(JSON.stringify(this.goodinfo)),
						events: {
							goodinfo: function(res) {
								that.goodinfo = res;
								console.log(res);
							},
						},
					});
				}
			},
			//寄件人信息
			send() {
				var that = this;
				if (JSON.stringify(that.topadd) == "{}") {
					uni.navigateTo({
						url: "/pageC/addEditAddress/addEditAddress",
						events: {
							topadd: function(res) {
								// console.log(res);
								that.topadd = res;
							},
						},
					});
				} else {
					var that = this;
					uni.navigateTo({
						url: "/pageC/addEditAddress/addEditAddress?id=" + that.topadd.id,
						events: {
							topadd: function(res) {
								// console.log(res);
								that.topadd = res;
							},
						},
					});
				}
			},
			recipirnt() {
				var that = this;
				if (JSON.stringify(that.bottomadd) == "{}") {
					uni.navigateTo({
						url: "/pageB/recipientinfo",
						events: {
							bottomadd: function(res) {
								console.log(res);
								that.bottomadd = res;
								that.province_id = res.province_id;
								that.country_id = res.country_id;
							},
						},
					});
				} else {
					uni.navigateTo({
						url: "/pageB/recipientinfo?id=" + that.bottomadd.id,
						events: {
							bottomadd: function(res) {
								console.log(res);
								that.bottomadd = res;
								that.province_id = res.province_id;
								that.country_id = res.country_id;
							},
						},
					});
				}
			},
			close() {
				this.logshow = false;
			},
			//分段器切换
			sectionChange(index) {
				this.current = index;
				console.log(index);
				if (this.current == 1) {
					uni.switchTab({
						url: "/pages/index/index?current=1",
					});
					this.current = 0;
				}
			},
			toparcel() {
				uni.navigateTo({
					url: "/pageB/parcel",
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	button {
		border: 0rpx solid rgba(0, 0, 0, 1) !important;
	}

	page {
		background-color: rgba(0, 0, 0, 0);
	}

	.bao {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #222222;
		line-height: 36rpx;
		text-align: center;
		font-style: normal;
	}

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

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

	.topaddress {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #777777;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
	}

	.pop {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #333333;
		line-height: 50rpx;
		text-align: left;
		font-style: normal;
		padding: 32rpx 28rpx 0 0;
		box-sizing: border-box;
	}

	.mon {
		font-family: HarmonyOS_Sans_Medium;
		font-size: 20rpx;
		color: #f83224;
		line-height: 26rpx;
		text-align: left;
		font-style: normal;
		font-weight: 600;
	}

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

	.timeb {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #666666;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
	}

	.timea {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #555555;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
	}

	.pinb {
		width: 148rpx;
		height: 64rpx;
		background: #ff1515;
		border-radius: 42rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 64rpx;
		text-align: center;
		font-style: normal;
	}

	.label {
		margin-top: 20rpx;
		width: 702rpx;
		// height: 288rpx;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 32rpx 20rpx;
		box-sizing: border-box;

		.left {
			width: 144rpx;
			height: 144rpx;
			background: #f5f5f5;
			border-radius: 8rpx;

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

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

	.flexc {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.hai {
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 32rpx;
		color: #222222;
		line-height: 44rpx;
		text-align: left;
		font-style: normal;
		margin-right: 10rpx;
	}

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

	.parcel {
		width: 702rpx;
		// height: 260rpx;
		background: #ffffff;
		border-radius: 16rpx;
		margin-top: 20rpx;
		padding: 24rpx;
		box-sizing: border-box;

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

		.add {
			// width: 240rpx;
			height: 48rpx;
			background: rgba(248, 50, 36, 0.06);
			border-radius: 24rpx;

			.addtext {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 20rpx;
				color: #000000;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
			}
		}
	}

	.address {
		width: 702rpx;
		// height: 776rpx;
		background: #ffffff;
		border-radius: 20rpx;
		padding: 48rpx 24rpx 36rpx;
		box-sizing: border-box;
		margin-top: 38rpx;

		.bottom {
			padding: 0 76rpx;
			box-sizing: border-box;
			margin-top: 48rpx;

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

		.mail {
			width: 646rpx;
			height: 84rpx;
			background: #f83224;
			box-shadow: 0rpx 16rpx 40rpx -12rpx rgba(255, 21, 21, 0.5);
			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;
		}

		.info {
			height: 100rpx;
			border-bottom: 2rpx solid rgba(151, 151, 151, 0.08);

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

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

			.mast {
				// width: 62rpx;
				height: 30rpx;
				border-radius: 16rpx;
				border: 1rpx solid #f83224;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #ff1515;
				line-height: 30rpx;
				text-align: center;
				font-style: normal;
				margin-left: 12rpx;
				padding: 0 4rpx;
				box-sizing: border-box;
			}
		}

		.left {
			height: 128rpx;

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

			.jiadd {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #777777;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
			}

			.right {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 26rpx;
				color: #222222;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
				margin-left: 18rpx;
			}
		}
	}

	// ::v-deep .u-navbar__content.data-v-1194bf80 {
	// 	background-color: rgba(0, 0, 0, 0) !important;
	// }

	// ::v-deep .u-status-bar.data-v-13f16680 {
	// 	background-color: rgba(0, 0, 0, 0) !important;
	// }

	::v-deep .u-subsection--button.data-v-b14d3440 {
		/* padding: 6rpx 34rpx !important; */
		border-radius: 64rpx !important;
	}

	::v-deep .u-subsection--button__bar.data-v-b14d3440 {
		border-radius: 32rpx !important;
	}
</style>