wx-qhb/pages/express/express.vue

<template>
	<!-- 商城 -->
	<view class="" style="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>
			<u-navbar bgColor='rgba(255, 215,215, 1)' :placeholder='true' :safeAreaInsetTop="true">
				<view class="u-nav-slot" slot="left" style="display: flex;">
					<image @click="tochat" src="../../static/images/index/xiaoxi.png" mode=""
						style="width: 40rpx;height: 40rpx;">
					</image>
					<image @click="counter" src="../../static/images/index/compile.png" mode=""
						style="width: 40rpx;height: 40rpx;margin-left: 22rpx;"></image>
					<image src="../../static/images/index/dianhua.png" mode=""
						style="width: 40rpx;height: 40rpx;margin-left: 22rpx;"></image>
				</view>
				<view class="u-nav-slot" slot="center" style="width: 226rpx;">
					<u-subsection bgColor='rgba(248, 50, 36, 0.1)' activeColor='#F83224' inactiveColor='#222'
						:list="list" :current="current" @change="sectionChange"></u-subsection>
				</view>
			</u-navbar>
			<!-- 地址 -->
			<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(0)">
							<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="send">
							<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(1)">
							<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">
					<view class="u-flex">
						<image src="../../static/express/share.png" style="width: 36rpx;height: 36rpx;" mode=""></image>
						<text class="friend">{{i18n.share}}</text>
					</view>
					<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" style="position: relative;" @click="pack(0)">
						<!-- <view class="" style="position: absolute;top: 0;right: 0;"> -->
						<u-badge :absolute='true' :offset="[0,10]" :type="type" max="99" :value="transit"></u-badge>
						<!-- </view> -->
						<image src="/static/express/address.png" style='width:68rpx;height:68rpx' mode=""></image>
						<text style='margin-top:16rpx' class="bao">{{i18n.deliver}}</text>
					</view>
					<view class="flexc" style="position: relative;" @click="pack(1)">
						<u-badge :absolute='true' :offset="[0,10]" :type="type" max="99" :value="receipt"></u-badge>
						<image src="/static/express/sign.png" style='width:68rpx;height:68rpx' mode=""></image>
						<text style='margin-top:16rpx' class="bao">{{i18n.Sign}}</text>
					</view>
					<view class="flexc" style="position: relative;" @click="pack(2)">
						<u-badge :absolute='true' :offset="[0,10]" :type="type" max="99" :value="overseas"></u-badge>
						<image src="../../static/express/send.png" style='width:68rpx;height:68rpx' mode=""></image>
						<text style='margin-top:16rpx' class="bao">{{i18n.overseas}}</text>
					</view>
				</view>
			</view>
			<!-- 拼包 -->
			<view class="u-flex u-row-between" style="margin-top: 32rpx;">
				<view class="u-flex">
					<text class="hai">{{i18n.parceling}}</text>
					<image style="width: 180rpx;height: 32rpx;" src="/static/express/label.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'>{{item.type_name}}</text>
								<text style="margin: 0 8rpx;">|</text>
								<text class='bigtitle'>{{item.transportType.name}}</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-popup round='28' :show="logshow" @close="close">
			<view class="pop">
				<kj-flow :goodstype="this.goodinfo.goodtype" ref="child" :province_id='province_id' @success='success'
					@close='logshow=false'></kj-flow>
			</view>
		</u-popup>
		<!-- <u-button @click="show = true">打开</u-button> -->
		<view class="" style="height: 160rpx;"></view>
		<kj-tabbar :value1=0></kj-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//顶部分段器
				list: [],
				current: 0,
				type: "error",
				percentage: 50, //进度条
				logshow: false, //物流选择
				status_collection: '', //我的包裹选择值
				transit: 0, //发往中转点
				receipt: 0, //中转已签收
				overseas: 0, //正发往海外
				topadd: {}, //新建寄件人
				bottomadd: {}, //新建收件人
				province_id: '',
				leftname: '',
				rightname: '',
				container_id: '', //货柜列表
				language: 'zh-CN',
				goodinfo: {}, //物品信息
				unit_price: '',
				expressList: []
			}
		},
		onLoad(options) {
			this.list = [this.i18n.border, this.i18n.shop]
			if (options.current) {
				this.current = options.current
			}

		},
		onShow() {
			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()
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},
		methods: {

			//拼包列表
			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
			},
			//物流选择
			changewu() {
				if (this.province_id) {
					this.logshow = true
					setTimeout(() => {
						this.$refs.child.transport();
					}, 800)
				} else {
					this.$u.toast('请先选择城市')
				}
			},
			//改变地址
			changeadd() {
				var a = {}
				a = this.topadd
				this.topadd = this.bottomadd
				this.bottomadd = a
				this.province_id = this.bottomadd.province_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?index=" + index,
					events: {
						getadd(res) {
							if (index == 0) {
								that.topadd = res
								console.log('topadd', that.topadd);
							} else {
								that.bottomadd = res
								console.log('bottom', that.bottomadd);
								that.province_id = that.bottomadd.province_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() {
				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
				})
			},
			count() {
				uni.navigateTo({
					url: '/pageB/account'
				})
			},
			pack(index) {
				uni.navigateTo({
					url: '/pageB/myPackage?index=' + index
				})
			},
			more() {
				uni.navigateTo({
					url: '/pageB/list/list'
				})
			},
			//拼包快递
			toaccount(info) {
				uni.navigateTo({
					url: '/pageB/ParcelExpress?expressinfo=' + encodeURIComponent(JSON.stringify(info))
				})
			},
			//物流计算器
			counter() {
				uni.navigateTo({
					url: '/pageA/counter'
				})
			},
			//消息
			tochat() {
				uni.navigateTo({
					url: '/pageA/chat/news'
				})
			},
			//物品信息
			goods() {
				var that = this
				uni.navigateTo({
					url: '/pageB/goods',
					events: {
						goodinfo: function(res) {
							that.goodinfo = res
						}
					}
				})
			},
			//寄件人信息
			send() {
				uni.navigateTo({
					url: '/pageB/Senderinfor'
				})
			},
			recipirnt() {
				uni.navigateTo({
					url: '/pageB/recipientinfo'
				})
			},
			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>
	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: right;
		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;
	}

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