wx-qhb/pageB/ParcelExpress.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 :autoBack='true' :title='i18n.delivery' bgColor="rgba(248, 50, 36, 0.2)" :placeholder='true'
				:safeAreaInsetTop="true" style="position: absolute;z-index: 110;background-color: rgba(0,0,0,0);">
				<view class="u-nav-slot" slot="left" style="display: flex;">
					<u-icon name="arrow-left" color="rgba(0, 0, 0, 1)" size="24" @click="uni.navigateBack()"></u-icon>
				</view>
			</u-navbar>
			<view class="entrepot">
				<view class="entre u-flex u-row-between">
					<view class="" style="width: 520rpx;" >
						<text class='bigtitle' v-if="expressinfo.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'>{{expressinfo.transportType.name_cn}}</text>
						<text v-if="language =='en-US'" class='bigtitle'>{{expressinfo.transportType.name_en}}</text>
						<text v-if="language =='es-ES'" class='bigtitle'>{{expressinfo.transportType.name_es}}</text>
						<text v-if="language =='it-IT'" class='bigtitle'>{{expressinfo.transportType.name_ita}}</text>
					</view>
					<view class="change" @click="changeji">{{i18n.Toggle}}</view>
				</view>
				<view class="box u-row-around u-flex">
					<view class="flexc">
						<view class="entrepotname">{{expressinfo.transit_full_address.slice(0,6)}}</view>
						<view class="adda">{{i18n.Starting}}</view>
					</view>
					<image src="/pageB/static/images/arrows.png" style="width: 130rpx;height: 10rpx;" mode=""></image>
					<view class="flexc">
						<view class="entrepotname">{{expressinfo.containerBase.country_name}}</view>
						<view class="adda">{{i18n.destination}}</view>
					</view>
				</view>
				<view class="timea">
					<text>{{i18n.start}}：{{expressinfo.begin_date}}</text>
					<text>{{i18n.cut}}：{{expressinfo.end_date}}</text>
				</view>
			</view>
			<!-- 地址 -->
			<view class="address">
				<view class="left u-flex" style="display: flex;" @click="send">
					<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.stop="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)"
					@click="recipirnt">
					<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>
			<view class="wup" @click="goods">
				<!-- 物品信息 -->
				<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.stop='goods'>
						<text class="change">{{i18n.selection}}</text>
						<image src="/static/express/next1.png" style="width: 28rpx;height: 28rpx;margin-left: 6rpx;"
							mode=""></image>
					</view>
					<view v-else class="goodname" @click.stop='goods'>
						{{goodinfo.goodname}},{{goodinfo.weight}}kg
					</view>
				</view>
			</view>
			<!-- 下一步 -->
			<view class="next  u-flex-between" style="display: flex;">
				<view class="" style="flex: 1;">
					<view class="sum">
						<text style="font-size: 24rpx;margin-right: 12rpx;">{{i18n.Estimatedprice}}</text>
						<text style="color: rgba(248, 50, 36, 1);font-size: 26rpx;">¥ </text>
						<text style="color: rgba(248, 50, 36, 1);font-size: 36rpx;font-weight: 600;">
							{{sum?sum:'--'}}</text>
					</view>
					<view class="deal u-flex" style="margin-top: 16rpx;">
						<u-checkbox-group shape='circle' v-model="checkboxValue1" placement="column"
							@change="checkboxChange">
							<u-checkbox :customStyle="{marginBottom: '8px',marginTop:'5px'}" :name="deal">
							</u-checkbox>
						</u-checkbox-group>
						<text>{{i18n.readandagree}}</text>
						<text style="color: rgba(248, 50, 36, 1);"
							@click="internationalshowa">《{{i18n.International}}》</text>
					</view>
				</view>
				<view class="tonext " style="" @click="next">
					{{i18n.next}}
				</view>
			</view>
			<u-popup :show="internationalshow" :round="20" @close="close()" :closeable='true'>
				<view style="
			  padding: 48rpx 24rpx;
			  box-sizing: border-box;
			  position: relative;
			  border-radius: 20rpx 20rpx 0 0;
			">
					<view class="" style="text-align: center;font-size: 30rpx;font-weight: 600;margin-bottom: 20rpx;">{{contenttitle}}</view>
					<u-parse :content="content"></u-parse>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				deal: -1,
				checkboxValue1: [],
				expressinfo: {},
				topadd: {},
				bottomadd: {},
				province_id: '',
				goodinfo: {}, //物品信息
				sum: '',
				internationalshow: false,
				content: '',
				contenttitle: '',
				language: "zh-CN",
			}
		},
		onLoad(options) {
			this.expressinfo = JSON.parse(decodeURIComponent(options.expressinfo));
			if (uni.getStorageSync("language") != "") {
				this.language = uni.getStorageSync("language");
			}
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},
		methods: {
			changeji(){
				uni.navigateBack()
			},
			close() {
				this.internationalshow = false
			},
			internationalshowa() {
				this.internationalshow = true
				this.international()
			},
			//国际快递服务协议
			international() {
				uni.$u.http.get('/api/agreement', {
					params: {
						code: 'international_express_service'
					}
				}).then((res) => {
					console.log(res);
					if (this.language == 'zh-CN') {
						this.content = res.content_cn
						this.contenttitle = res.name_cn
					}
					if (this.language == 'en-US') {
						this.content = res.content_en
						this.contenttitle = res.name_en
					}
					if (this.language == 'es-ES') {
						this.content = res.content_es
						this.contenttitle = res.content_ita
					}
					if (this.language == 'it-IT') {
						this.content = res.content_cn
						this.contenttitle = res.name_ita
					}
				}).catch(() => {})
			},
			//改变地址
			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
							}
						}
					}
				})
			},
			//物品信息
			goods() {
				if(JSON.stringify(this.topadd)=="{}"){
					this.$u.toast('请填写寄件地址')
					return 
				}
				if(JSON.stringify(this.bottomadd)=="{}"){
					this.$u.toast('请填写收件地址')
					return 
				}
				var that = this
				if (JSON.stringify(this.goodinfo) == '{}') {
					uni.navigateTo({
						url: '/pageB/goods',
						events: {
							goodinfo: function(res) {
								that.goodinfo = res
								that.calculate()
							}
						}
					})
				} else {
					uni.navigateTo({
						url: '/pageB/goods?goodinfo=' + encodeURIComponent(JSON.stringify(this.goodinfo)),
						events: {
							goodinfo: function(res) {
								that.goodinfo = res
								console.log(res);
								that.calculate()
							}
						}
					})
				}
				// uni.navigateTo({
				// 	url: '/pageB/goods',
				// 	events: {
				// 		goodinfo: function(res) {
				// 			that.goodinfo = res
				// 			that.calculate()
				// 		}
				// 	}
				// })
			},
			//寄件人信息
			send() {
				uni.navigateTo({
					url: '/pageB/Senderinfor'
				})
			},
			recipirnt() {
				uni.navigateTo({
					url: '/pageB/recipientinfo'
				})
			},
			checkboxChange(n) {
				console.log('change', n);
			},
			//下单
			next() {
				if (JSON.stringify(this.topadd) === '{}') {
					this.$u.toast('请填写寄货地址')
					return
				}
				if (JSON.stringify(this.bottomadd) === '{}') {
					this.$u.toast('请填写收货地址')
					return
				}
				if (JSON.stringify(this.goodinfo) === '{}') {
					this.$u.toast('请填写物品信息')
					return
				}
				if (this.checkboxValue1.length == 0) {
					this.$u.toast('请勾选协议')
					return
				}
				uni.$u.http.post('/api/express-order/group-create', {
					group_package_id: this.expressinfo.id, //		是	String	拼包ID
					from_address_id: this.topadd.id, //		是	String	寄出地址ID
					to_address_id: this.bottomadd.id, //		是	String	目标地址ID
					goods_name: this.goodinfo.goodname, //是	String	商品名称
					goods_num: this.goodinfo.number, //是	String	商品数量
					goods_weight: this.goodinfo.weight, //		是	String	商品重量
					goods_length: Number(this.goodinfo.length), //		是	String	长
					goods_width: Number(this.goodinfo.width), //		是	String	宽
					goods_height: Number(this.goodinfo.height),
				}).then((res) => {
					this.orderinfo = res
					uni.navigateTo({
						url: '/pageB/account?goodinfo=' + encodeURIComponent(JSON.stringify(this
								.goodinfo)) +
							'&topadd=' + encodeURIComponent(JSON.stringify(this.topadd)) + '&bottomadd=' +
							encodeURIComponent(JSON.stringify(this.bottomadd)) + '&expressinfo=' +
							encodeURIComponent(
								JSON.stringify(this.expressinfo)) + '&orderinfo=' + encodeURIComponent(JSON
								.stringify(
									this.orderinfo))
					})
				}).catch(() => {

				})
			},
			calculate() {
				uni.$u.http.post('/api/express-order/group-calculate', {
					group_package_id: this.expressinfo.id, //		是	String	拼包ID
					weight: this.goodinfo.weight, //		是	String	商品重量
					length: this.goodinfo.length, //		是	String	长
					width: this.goodinfo.width, //		是	String	宽
					height: this.goodinfo.height,
				}).then((res) => {
					this.sum = res.amount
				}).catch(() => {

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.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;
	}

	.entrepot {
		width: 702rpx;
		// height: 360rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		// margin-bottom: 20rpx;
		padding: 0 20rpx 32rpx;
		box-sizing: border-box;

		.timea {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #444444;
			line-height: 36rpx;
			text-align: left;
			font-style: normal;
			margin-top: 30rpx;
		}

		.adda {
			margin-top: 8rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #222222;
			line-height: 34rpx;
			text-align: right;
			font-style: normal;
		}

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

		.box {
			width: 662rpx;
			height: 128rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
		}

		.entre {
			width: 662rpx;
			height: 100rpx;
			border-bottom: 2rpx solid rgba(151, 151, 151, 0.1);
			line-height: 100rpx;

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

			.change {
				// width: 100rpx;
				padding: 10rpx 26rpx;
				// height: 52rpx;
				display: inline;
				background: rgba(255, 21, 21, 0.1);
				border-radius: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #F83224;
				line-height: 32rpx;
				text-align: center;
				font-style: normal;
				box-sizing: border-box;
			}
		}
	}

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

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

	.tonext {
		width: 286rpx;
		height: 88rpx;
		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: 88rpx;
		text-align: center;
		font-style: normal;
	}

	.next {
		width: 750rpx;
		height: 166rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 12rpx 24rpx;
		box-sizing: border-box;
	}

	.wup {
		width: 704rpx;
		// height: 220rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 20rpx;
		padding: 0rpx 20rpx;
		box-sizing: border-box;
	}

	.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;
			padding: 0 10rpx;
			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;
		}
	}

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



		.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: 500;
				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>