5.28

pageA/chat/chat.vue

@@ -0,0 +1,636 @@
+<template>
+	<!-- 聊天记录 -->
+	<view class="chat">
+		<view class="chat-list">
+			<view class="more-btn" @click="tomore">
+				{{showmore ? '点击查看更多' : '没有更多了'}}
+			</view>
+			<view v-for="(item,index) in list" :key="index">
+				<view class="u-flex u-row-between" style="margin-bottom: 10rpx;">
+					<text :style="{opacity:item.type == 2 ? 1 : 0}"
+						style="margin-bottom: -20rpx;">{{item.create_at}}</text>
+					<text :style="{opacity:item.type == 2 ? 0: 1}">{{item.create_at}}</text>
+				</view>
+				<view class="chat-item u-flex u-col-top u-row-between">
+					<image :src="item.headimg" :style="{opacity:item.type == 2 ? 1 : 0}" class="user-head" mode="">
+					</image>
+					<view class="item-box u-flex-1 u-flex-col"
+						:style="{alignItems: item.type == 2 ? 'flex-start' : 'flex-end'}">
+						<text>{{item.name}}</text>
+						<text v-if="item.is_url == 0"
+							:class="item.type == 2 ? 'text1' : 'text2'">{{item.content}}</text>
+						<view class="" v-if="item.is_url == '1'" @tap="onPlay(item,index)"
+							:class="item.type == 2 ? 'back1' : 'back2'">
+							<view class="record" v-if="item.type==1">
+								<text style="#fff">{{item.time}}</text> "
+								<u-icon custom-style="transform: rotate(-90deg) !important;" name="wifi"
+									size="28"></u-icon>
+							</view>
+							<view class="record1" v-if="item.type==2">
+								<u-icon custom-style="transform: rotate(90deg) !important;" name="wifi"
+									size="28"></u-icon>
+								"
+								<text>{{item.time}}</text>
+							</view>
+						</view>
+					</view>
+					<image :src="item.headimg" :style="{opacity:item.type == 2 ? 0 : 1}" class="user-head" mode="">
+					</image>
+				</view>
+			</view>
+			<view class="" v-for="(item,index) in chatlist" :key="index">
+				<view class="u-flex u-row-between" style="margin-bottom: 10rpx;">
+					<text :style="{opacity:item.type == 2 ? 1 : 0}"
+						style="margin-bottom: -20rpx;">{{item.create_at}}</text>
+					<text :style="{opacity:item.type == 2 ? 0: 1}">{{item.create_at}}</text>
+				</view>
+				<view class="chat-item u-flex u-col-top u-row-between">
+					<image :src="item.headimg" :style="{opacity:item.type == 2 ? 1 : 0}" class="user-head" mode="">
+					</image>
+					<view class="item-box u-flex-1 u-flex-col"
+						:style="{alignItems: item.type == 2 ? 'flex-start' : 'flex-end'}">
+						<text>{{item.name}}</text>
+						<text v-if="item.type1 != 'record'"
+							:class="item.type == 2 ? 'text1' : 'text2'">{{item.content}}</text>
+						<view class="record" v-if="item.type1 == 'record'" :class="item.type == 2 ? 'text1' : 'text2'"
+							@tap="onPlay1(item,index)">
+							<view class="record" v-if="item.type==1">
+								<text>{{item.message}}</text>"<u-icon name="wifi" size="28"></u-icon>
+							</view>
+							<view class="record1" v-if="item.type==2">
+								<u-icon name="wifi" size="28"></u-icon>
+								"
+								<text>{{item.message}}</text>
+							</view>
+						</view>
+					</view>
+					<image :src="item.headimg" :style="{opacity:item.type == 2 ? 0 : 1}" class="user-head" mode="">
+					</image>
+				</view>
+			</view>
+		</view>
+		<view class="" style="height: 170rpx;"></view>
+		<view class="chat-btn u-flex u-row-between">
+			<u-icon v-if="show == false" @click="startRecord" name="mic" size="44"></u-icon>
+			<u-icon v-if="show == true" @click="startRecord1" name="more-circle-fill" size="44"></u-icon>
+			<nb-voice-record v-if="show == true" :vibrate="false" @startRecord="start" @endRecord="end"
+				@cancelRecord="cancel"></nb-voice-record>
+			<input v-if="show == false" type="text" placeholder="请输入" v-model="text">
+			<text v-if="show == false" class="post" @click="send(text)">发送</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				bgAudioManager: '', // 全局音频播放
+				show: false,
+				text: '',
+				hx_username: '',
+				worker_id: '',
+				page: 1,
+				list: [],
+				chatlist: [],
+				myname: '',
+				myheadimg: '',
+				workername: '',
+				workerheadimg: '',
+				voicePath: '',
+				userinfoheadimg: "",
+				ossdata: {},
+				duration: 0,
+				time1: 0,
+				url: "",
+				url1: ""
+			}
+		},
+		onLoad(option) {
+			this.hx_username = option.hx_username
+			this.worker_id = option.worker_id
+			console.log(this.worker_id);
+			console.log(this.hx_username);
+			this.myname = uni.getStorageSync("name")
+			this.myheadimg = uni.getStorageSync("headimg")
+			this.getlist()
+			this.getworker()
+			this.getmsg()
+			let self = this;
+			this.getoss()
+			// this.getaudio()
+		},
+		computed: {
+			showmore() {
+				if (this.list.length % 20 == 0 && this.list.length > 0) {
+					return true
+				} else {
+					return false
+				}
+			}
+		},
+		methods: {
+			onPlay(e, index) {
+				let that = this
+				if (this.url && this.url == e.content) return
+				if (this.url && this.url !== e.content) {
+					this.bgAudioManager.stop()
+					let obj = this.list.find(item => item.content == this.url)
+					clearTimeout(obj.timeOut)
+					obj.time = obj.defaultTime
+				}
+				this.url = e.content
+
+
+				// 我这里没有写暂停播放 需要的可以 设置变量 根据变量状态判断 pause 或 play
+				this.bgAudioManager = uni.createInnerAudioContext()
+				this.bgAudioManager.src = e.content
+				this.bgAudioManager.play()
+				this.time1 = e.time
+
+				var music = wx.setInnerAudioOption({
+					obeyMuteSwitch: false,
+					success: function(res) {
+						console.log("开启静音模式下播放音乐的功能");
+					},
+					fail: function(err) {
+						console.log(err);
+						console.log("静音设置失败");
+					},
+				});
+
+				this.bgAudioManager.onPlay(() => {
+					function time_a(obj) {
+						obj.timeOut = setTimeout(() => {
+							obj.time--
+							obj.time < 0 ? obj.time = that.time1 : time_a(obj)
+						}, 1000)
+					}
+					time_a(this.list[index])
+
+				})
+
+				this.bgAudioManager.onEnded(() => {
+					this.url = ''
+					// this.list[index].time = this.time1
+					this.bgAudioManager.offPlay()
+					this.bgAudioManager.offEnded()
+					this.bgAudioManager = null
+				})
+			},
+			onPlay1(e, index) {
+				let that = this
+				if (this.url1 && this.url1 == e.content) return
+				if (this.url1 && this.url1 !== e.content) {
+					this.bgAudioManager.stop()
+					let obj = this.chatlist.find(item => item.content == this.url1)
+					clearTimeout(obj.timeOut)
+					obj.message = obj.defaultTime
+				}
+				this.url1 = e.content
+
+				this.bgAudioManager = uni.createInnerAudioContext()
+				this.bgAudioManager.src = e.content
+				this.bgAudioManager.play()
+				// this.bgAudioManager.obeyMuteSwitch = false
+				this.time1 = e.message
+				console.log(that.time1);
+				var music = wx.setInnerAudioOption({
+					obeyMuteSwitch: false,
+					success: function(res) {},
+					fail: function(err) {},
+				});
+				this.bgAudioManager.onPlay(() => {
+					function time_a(obj) {
+						obj.timeOut = setTimeout(() => {
+							obj.message--
+							// obj.message < 0 ? obj.message = that.time1 : time_a(obj)
+							if (obj.message < 0) {
+								obj.message = that.time1
+								clearTimeout(obj.timeOut)
+								that.bgAudioManager.offPlay()
+								that.bgAudioManager.offEnded()
+								that.bgAudioManager = null
+								that.url1 = ''
+							} else {
+								// console.log(time_a(obj));
+								// time_a(obj)
+								obj.message = obj.message
+								time_a(obj)
+							}
+						}, 1000)
+					}
+					time_a(this.chatlist[index])
+				})
+			},
+			start() {
+				// 开始录音
+			},
+			getoss() {
+				this.$u.post('/api/Upload/getSignedUrl').then(res => {
+					this.ossdata = res.data
+				})
+			},
+			end(event) {
+				// 结束录音并处理得到的录音文件
+				// event中，app端仅有tempFilePath字段，微信小程序还有duration和fileSize两个字段
+				// this.sendPrivateAudio(event.tempFilePath,event.duration)
+				if (event.duration < 1000) {
+					this.$u.toast("说话时间太短了")
+				} else {
+
+					this.duration = event.duration
+					var key = this.ossdata.key + new Date().getTime() + Math.floor(Math.random() * 150) + '.mp3'
+					uni.uploadFile({
+						url: this.ossdata.host, //输入你的bucketname.endpoint
+						filePath: event.tempFilePath,
+						name: 'file',
+						formData: {
+							key: key,
+							policy: this.ossdata.policy, // 输入你获取的的policy
+							OSSAccessKeyId: this.ossdata.OSSAccessKeyId, // 输入你的AccessKeyId
+							success_action_status: '200', // 让服务端返回200,不然，默认会返回204
+							signature: this.ossdata.Signature, // 输入你获取的的signature
+						},
+						success: (res) => {
+							if (res.statusCode == 200) {
+								this.userinfoheadimg = this.ossdata.host + '/' + key
+								this.send1(this.userinfoheadimg, this.duration)
+							}
+						},
+						fail: (err) => {
+							console.log(err);
+						}
+					})
+				}
+
+			},
+			cancel() {
+				// 用户取消录音
+				console.log(3333);
+			},
+			startRecord() {
+				this.show = true
+			},
+			startRecord1() {
+				this.show = false
+			},
+			tomore() {
+				if (this.showmore) {
+					this.page++
+					this.getlist()
+				}
+			},
+			getmsg() {
+				this.$WebIM.conn.addEventHandler('getmsg', {
+					// 当前用户收到文本消息。
+					onTextMessage: (message) => {
+						console.log(message);
+						this.chatlist.push({
+							content: message.msg,
+							create_at: this.$u.timeFormat(message.time, 'yyyy-mm-dd hh:MM:ss'),
+							headimg: message.from == uni.getStorageSync("hx_username") ? this
+								.myheadimg : this.workerheadimg,
+							name: message.from == uni.getStorageSync("hx_username") ? this.myname :
+								this.workername,
+							type: message.from == uni.getStorageSync("hx_username") ? 1 : 2,
+						})
+						this.$nextTick(() => {
+							uni.pageScrollTo({
+								scrollTop: 99999
+							})
+						})
+					},
+					onAudioMessage: (message) => {
+						this.chatlist.push({
+							// defaultTime:message.length,
+							content: message.url,
+							create_at: this.$u.timeFormat(message.time, 'yyyy-mm-dd hh:MM:ss'),
+							headimg: message.from == uni.getStorageSync("hx_username") ? this
+								.myheadimg : this.workerheadimg,
+							name: message.from == uni.getStorageSync("hx_username") ? this.myname :
+								this.workername,
+							type: message.from == uni.getStorageSync("hx_username") ? 1 : 2,
+							type1: "record",
+							message: message.length
+						})
+						this.$nextTick(() => {
+							uni.pageScrollTo({
+								scrollTop: 99999
+							})
+						})
+					},
+				})
+			},
+			getworker() {
+				this.$u.post('/api/News/get_worker_info', {
+					worker_id: this.worker_id
+				}).then(res => {
+					this.workername = res.data.name
+					this.workerheadimg = res.data.headimg
+				})
+			},
+			getlist() {
+				uni.showLoading({
+					mask: true,
+					title: "请稍后"
+				})
+				this.$u.post('/api/News/news_list', {
+					worker_id: this.worker_id,
+					page_num: 20,
+					page: this.page
+				}).then(res => {
+					var list = res.data
+					list.forEach(val => {
+						val.defaultTime = val.time
+						this.list.unshift(val)
+					})
+					if (this.page == 1) {
+						this.$nextTick(() => {
+							uni.pageScrollTo({
+								scrollTop: 99999
+							})
+						})
+					}
+
+				})
+			},
+			send1(tempFilePath, duration) {
+				var option = {
+					type: "audio",
+					chatType: "singleChat",
+					filename: "tempFilePath",
+					from: uni.getStorageSync("hx_username"),
+					// 消息接收方：单聊为对端用户 ID，群聊和聊天室分别为群组 ID 和聊天室 ID。
+					to: this.hx_username,
+					body: {
+						//文件 URL。
+						url: tempFilePath,
+						//文件类型。
+						type: "audio",
+						//文件名。
+						filename: "tempFilePath",
+						// 音频文件时长，单位为秒。
+						length: Math.ceil(duration / 1000),
+					},
+				};
+
+				// let option = {
+				// 	// 消息类型。
+				// 	type: "audio",
+				// 	file: tempFilePath,
+				// 	// 语音文件长度，单位为秒。
+				// 	length: Math.ceil(duration / 1000),
+				// 	// 消息接收方：单聊为对方用户 ID，群聊和聊天室分别为群组 ID 和聊天室 ID。
+				// 	to: this.hx_username,
+				// 	// 会话类型：单聊、群聊和聊天室分别为 `singleChat`、`groupChat` 和 `chatRoom`。
+				// 	chatType: "singleChat",
+				// 	// 语音文件上传失败。
+				// 	// onFileUploadError: function() {
+				// 	// 	console.log("onFileUploadError");
+				// 	// },
+				// 	// // 语音文件上传进度。
+				// 	// onFileUploadProgress: function(e) {
+				// 	// 	console.log(e);
+				// 	// },
+				// 	// // 语音文件上传成功。
+				// 	// onFileUploadComplete: function() {
+				// 	// 	console.log("onFileUploadComplete");
+				// 	// },
+				// 	// ext: {},
+				// };
+				// let option = {
+				// 	// 消息类型。
+				// 	type: "txt",
+				// 	// 消息内容。
+				// 	msg: tempFilePath,
+				// 	// 消息发送方：单聊为对方用户 ID，群聊和聊天室分别为群组 ID 和聊天室 ID。
+				// 	from: uni.getStorageSync("hx_username"),
+				// 	// 消息接收方：单聊为对方用户 ID，群聊和聊天室分别为群组 ID 和聊天室 ID。
+				// 	to: this.hx_username,
+				// 	// 会话类型：单聊、群聊和聊天室分别为 `singleChat`、`groupChat` 和 `chatRoom`，默认为单聊。
+				// 	chatType: "singleChat",
+				// };
+				let msg = this.$WebIM.message.create(option);
+				console.log(msg);
+				this.$WebIM.conn.send(msg).then(res => {
+					this.$u.post('/api/News/send_news', {
+						worker_id: this.worker_id,
+						content: tempFilePath,
+						type1: "record",
+						time: msg.body.length
+					}).then(res => {
+						this.chatlist.push({
+							defaultTime: msg.body.length,
+							content: tempFilePath,
+							create_at: this.$u.timeFormat(msg.time, 'yyyy-mm-dd hh:MM:ss'),
+							headimg: this.myheadimg,
+							name: this.myname,
+							type: 1,
+							type1: "record",
+							message: msg.body.length
+						})
+						this.$nextTick(() => {
+							uni.pageScrollTo({
+								scrollTop: 99999
+							})
+						})
+
+						console.log(this.chatlist);
+					})
+				})
+			},
+
+
+
+
+			send(text) {
+				if (!text) {
+					this.$u.toast("请输入内容")
+					return
+				}
+				this.text = ''
+				let option = {
+					// 消息类型。
+					type: "txt",
+					// 消息内容。
+					msg: text,
+					// 消息发送方：单聊为对方用户 ID，群聊和聊天室分别为群组 ID 和聊天室 ID。
+					from: uni.getStorageSync("hx_username"),
+					// 消息接收方：单聊为对方用户 ID，群聊和聊天室分别为群组 ID 和聊天室 ID。
+					to: this.hx_username,
+					// 会话类型：单聊、群聊和聊天室分别为 `singleChat`、`groupChat` 和 `chatRoom`，默认为单聊。
+					chatType: "singleChat",
+				};
+				// 创建文本消息。
+				let msg = this.$WebIM.message.create(option);
+				// console.log(msg);
+				this.$WebIM.conn.send(msg).then(res => {
+					this.$u.post('/api/News/send_news', {
+						worker_id: this.worker_id,
+						content: text
+					}).then(res => {
+						this.chatlist.push({
+							content: msg.msg,
+							create_at: this.$u.timeFormat(msg.time, 'yyyy-mm-dd hh:MM:ss'),
+							headimg: this.myheadimg,
+							name: this.myname,
+							type: 1,
+						})
+						this.$nextTick(() => {
+							uni.pageScrollTo({
+								scrollTop: 99999
+							})
+						})
+
+						// console.log(this.chatlist);
+					})
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	page {
+		background-color: #F2F2F2;
+	}
+
+	.record {
+		display: flex;
+		align-items: center;
+		background-color: #1F7EFF;
+		color: #fff;
+		border-radius: 20rpx;
+		box-sizing: border-box;
+	}
+
+	.record1 {
+		display: flex;
+		align-items: center;
+		background-color: #eee;
+		color: #000;
+		border-radius: 20rpx;
+		box-sizing: border-box;
+	}
+
+	.quxiao {
+
+		background: #1F7EFF;
+		border-radius: 12rpx;
+		font-size: 30rpx;
+		font-family: PingFangSC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #000;
+		text-align: center;
+		height: 84rpx;
+		line-height: 84rpx;
+	}
+
+	.fasong {
+		background: limegreen;
+		border-radius: 12rpx;
+		font-size: 30rpx;
+		font-family: PingFangSC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #fff;
+		text-align: center;
+		height: 84rpx;
+		line-height: 84rpx;
+	}
+
+	.chat {
+		.chat-list {
+			padding: 24rpx;
+
+			.more-btn {
+				padding: 10rpx 0;
+				text-align: center;
+			}
+
+			.chat-item {
+				margin-bottom: 44rpx;
+
+				.item-box {
+					text:first-child {
+						font-size: 28rpx;
+						font-weight: 500;
+						// color: #666666;
+						padding: 8rpx 24rpx;
+					}
+
+					text:last-child {
+
+						padding: 9rpx 24rpx;
+						border-radius: 20rpx;
+					}
+
+					.text1 {
+						background-color: #fff;
+						border-radius: 20rpx;
+					}
+
+					.text2 {
+						background-color: #1F7EFF;
+						color: #fff;
+						border-radius: 20rpx;
+					}
+				}
+
+				.user-head {
+					width: 70rpx;
+					height: 70rpx;
+					border-radius: 100rpx;
+				}
+			}
+		}
+
+		.chat-btn {
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			width: 750rpx;
+			height: 166rpx;
+			background: #FFFFFF;
+			z-index: 10;
+			padding: 0 24rpx 60rpx 24rpx;
+
+			input {
+				// width: 540rpx;
+				flex: 1;
+				margin-right: 20rpx;
+				height: 58rpx;
+				background: #F2F2F2;
+				border-radius: 30rpx;
+				padding: 0 28rpx;
+				box-sizing: border-box;
+			}
+
+			.post {
+				width: 102rpx;
+				line-height: 58rpx;
+				background: #1F7EFF;
+				border-radius: 30rpx;
+				text-align: center;
+				font-size: 24rpx;
+				// font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: #FFFFFF;
+			}
+		}
+	}
+
+	::v-deep .record-btn {
+		width: 80vw !important;
+		text-align: center !important;
+		flex: 1 !important;
+	}
+
+	::v-deep .record .u-icon.data-v-6e20bb40 {
+		transform: rotate(-90deg) !important;
+	}
+
+	::v-deep .record1 .u-icon.data-v-6e20bb40 {
+		transform: rotate(90deg) !important;
+	}
+</style>

pageA/chat/news.vue

@@ -0,0 +1,127 @@
+<template>
+	<!-- 聊天消息 -->
+	<view class="back">
+		<view class="input u-flex">
+			<u-icon name="search" color="rgba(153, 153, 153, 1)" size="40"></u-icon>
+			<input type="text" placeholder="搜索聊天记录/团长" style="width: 600rpx;margin-left: 16rpx;" />
+		</view>
+		<!-- 客服 -->
+		<view class="kefu u-flex" @click="tokefu">
+			<image src="/pageA/static/images/kefu.png" style="width: 88rpx;height: 88rpx;" mode=""></image>
+			<view class="u-row-between"
+				style="height: 88rpx;display: flex;flex-direction: column;margin-left: 20rpx;width: 85%;">
+				<view class="u-flex u-row-between">
+					<view class="name">官方客服</view>
+					<view class="time">14:09</view>
+				</view>
+				<view class="u-flex u-row-between">
+					<text class="news">[卡片]</text>
+					<u-badge :type="type" max="99" :value="value"></u-badge>
+				</view>
+			</view>
+		</view>
+		<view class="box " >
+			<view class="u-flex " style="margin-bottom: 26rpx;" v-for="(item,idx) in  6">
+				<image src="/pageA/static/images/kefu.png" style="width: 88rpx;height: 88rpx;" mode=""></image>
+				<view class="u-row-between"
+					style="display: flex;flex-direction: column;margin-left: 20rpx;width: 85%;">
+					<view class="u-flex u-row-between">
+						<view class="name">官方客服</view>
+						<view class="time">14:09</view>
+					</view>
+					<view class="u-flex u-row-between" style="border-bottom: 2rpx solid #979797;padding-bottom: 26rpx;margin-top: 10rpx;">
+						<text class="news">[卡片]</text>
+						<u-badge :type="type" max="99" :value="value"></u-badge>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				type: "error",
+				value: 1
+			};
+		},
+		methods:{
+			tokefu(){
+				uni.navigateTo({
+					url:'/pageA/service/service'
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.back {
+		width: 750rpx;
+		// height: 1624rpx;
+		background: #F4F4F4;
+		padding: 20rpx 24rpx;
+		box-sizing: border-box;
+
+		.input {
+			width: 702rpx;
+			height: 72rpx;
+			background: #FFFFFF;
+			border-radius: 36rpx;
+			padding: 0 24rpx;
+			box-sizing: border-box;
+		}
+
+		.kefu {
+			width: 702rpx;
+			height: 156rpx;
+			background: #FFFFFF;
+			border-radius: 16rpx;
+			padding: 36rpx 24rpx 32rpx;
+			box-sizing: border-box;
+			margin-top: 24rpx;
+		}
+
+		.name {
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 400;
+			font-size: 32rpx;
+			color: #222222;
+			line-height: 44rpx;
+			text-align: left;
+			font-style: normal;
+		}
+
+		.time {
+			font-family: SFPro, SFPro;
+			font-weight: 400;
+			font-size: 20rpx;
+			color: #666666;
+			line-height: 24rpx;
+			text-align: left;
+			font-style: normal;
+		}
+
+		.news {
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 400;
+			font-size: 24rpx;
+			color: #666666;
+			line-height: 34rpx;
+			text-align: left;
+			font-style: normal;
+		}
+
+		.box {
+			width: 702rpx;
+			min-height: 1156rpx;
+			background: #FFFFFF;
+			border-radius: 16rpx;
+			padding: 40rpx 24rpx 20rpx;
+			box-sizing: border-box;
+			margin-top: 20rpx;
+		}
+	}
+</style>

pageA/confirm.vue

@@ -0,0 +1,84 @@
+<template>
+	<!-- 支付结果 -->
+	<view style="background: #fff;height: 100vh;">
+		<view class="u-row-center" style="display: flex;align-items: center;flex-direction: column;">
+			<image src="/pageA/static/images/success.png" style="width: 70rpx;height: 70rpx;margin-top: 152rpx;"
+				mode=""></image>
+			<view class="success">支付成功</view>
+			<view class="order">可在“个人中心-我的订单”查看</view>
+			<view class="look">查看订单</view>
+			<view class="index" @click="toindex">返回首页</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			};
+		},
+		methods: {
+			toindex() {
+				uni.switchTab({
+					url: '/pages/index/index'
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.success {
+		font-family: PingFangTC, PingFangTC;
+		font-weight: 600;
+		font-size: 32rpx;
+		color: #222222;
+		line-height: 44rpx;
+		text-align: left;
+		font-style: normal;
+		margin-top: 32rpx;
+	}
+
+	.order {
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 400;
+		font-size: 24rpx;
+		color: #222222;
+		line-height: 34rpx;
+		text-align: left;
+		font-style: normal;
+		margin-top: 16rpx;
+	}
+
+	.look {
+		width: 310rpx;
+		height: 84rpx;
+		background: #F83224;
+		border-radius: 42rpx;
+		margin-top: 100rpx;
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 500;
+		font-size: 30rpx;
+		color: #FFFFFF;
+		line-height: 84rpx;
+		text-align: center;
+		font-style: normal;
+	}
+
+	.index {
+		width: 310rpx;
+		height: 84rpx;
+		border-radius: 42rpx;
+		border: 2rpx solid rgba(151, 151, 151, 0.2);
+		margin-top: 36rpx;
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 400;
+		font-size: 30rpx;
+		color: #333333;
+		line-height: 84rpx;
+		text-align: center;
+		font-style: normal;
+	}
+</style>

pageA/order.vue

@@ -45,7 +45,7 @@
 		<!-- 物流 -->
 		<view class="logistics u-flex u-row-between">
 			<text style="font-weight: 600;">跨境物流</text>
-			<view class="u-flex">
+			<view class="u-flex" @click="show = true">
 				<text class="change">请选择</text>
 				<u-icon name="arrow-right" size='16'></u-icon>
 			</view>
@@ -104,10 +104,64 @@
 				<text>合计:</text>
 				<text class="money">¥2792.5</text>
 			</view>
-			<view class="order">
+			<view class="order" @click="topay">
 				提交订单
 			</view>
 		</view>
+		<!-- 跨境物流 -->
+		<u-popup :show="show" @close="close" @open="open" mode="bottom" closeIconPos='top-right' round='28'>
+			<view style="padding: 40rpx 28rpx;box-sizing:border-box;">
+				<view class="poptitle">
+					跨境物流
+				</view>
+				<view class="u-flex u-row-between" style="margin-top: 60rpx;flex-wrap: wrap;">
+					<view :class="index==idx?'active':'unactive'" v-for="(item,idx) in 6" @click="change(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">海运散货</view>
+						<view class="wei">¥12/kg</view>
+					</view>
+				</view>
+				<view class="nextto" @click="next">下一步</view>
+			</view>
+		</u-popup>
+		<!-- 跨境物流下一步 -->
+		<u-popup :safeAreaInsetTop='true' :show="show1" @close="close" @open="open" mode="bottom"
+			closeIconPos='top-right' round='28' bgColor='#F4F4F4'>
+			<view style="padding: 40rpx 28rpx;box-sizing:border-box;position: relative;">
+				<view class="poptitle">
+					跨境物流
+				</view>
+				<!-- <scroll-view :scroll-y="true" style="500rpx"> -->
+				<view class="transport" style="margin-top: 32rpx;" @click="activea(idx)" v-for="(item,idx) in 5">
+					<view class="u-flex u-row-between">
+						<text class="yundate">发柜日期 2023-12-09</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>2号海运柜</text>
+							<text style="margin: 0 16rpx;">|</text>
+							<text>预计到达时间22个工作日</text>
+						</view>
+						<view class="mone">
+							<text>¥</text>
+							<text style="font-size: 32rpx;">1820</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">取消</view>
+					<view class="confirm" @click="confirm">确定</view>
+				</view>
+			</view>
+		</u-popup>
 	</view>
 </template>
 
@@ -115,13 +169,195 @@
 	export default {
 		data() {
 			return {
-				value: 1
+				value: 1,
+				show: false,
+				index: '',
+				show1: false,
+				datechan: ''
 			};
+		},
+		methods: {
+			change(index) {
+				this.index = index
+			},
+			next() {
+				this.show = false
+				this.show1 = true
+			},
+			activea(idx) {
+				this.datechan = idx
+			},
+			//确定
+			confirm() {
+				this.show1 = false
+			},
+			// 取消
+			close() {
+				this.show = false
+				this.show1 = false
+			},
+			//提交订单
+			topay(){
+				uni.navigateTo({
+					url:'/pageA/payorder'
+				})
+			}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
+	.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: 600;
+		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;
+	}
+
+	.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;

pageA/payorder.vue

@@ -0,0 +1,220 @@
+<template>
+	<view class="back">
+		<view class="topbox">
+			<view class="" style="position: absolute;top: -30rpx;right: 0;">
+				<view class="state u-flex u-row-between" @click="stateshow = !stateshow">
+					<text>{{state}}</text>
+					<image src="static/images/pull_down.png" style="width: 24rpx;height: 24rpx;" mode=""></image>
+				</view>
+				<view class="state" v-if="stateshow">
+					<view @click="statechange(item,idx)" :class="state_id==idx?'stateac':'unstate'"
+						style="margin-bottom: 20rpx;" v-for="(item,idx) in array">{{item.name}}</view>
+				</view>
+			</view>
+			<view class="u-row-center"
+				style="display: flex;flex-direction: column;align-items: center;margin-top: 56rpx;">
+				<view class="paysum">实付金额</view>
+				<view class="numbe" style="margin-top: 40rpx;">
+					<text>￥</text>
+					<text style="font-size: 60rpx;font-weight: 500;">2792.5</text>
+				</view>
+				<!-- 				<view class="">
+					<text>支付剩余时间 13:50</text>
+				</view> -->
+			</view>
+			<!-- 余额支付 -->
+			<view class="payitem" style="margin-top: 100rpx;display: flex;" @click="change(0)">
+				<image src="static/images/yuer.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
+				<view class="u-flex u-row-between " style="margin-left: 20rpx;flex: 1;">
+					<view class="">
+						<view class="">余额支付</view>
+						<view class="" style="margin-top: 10rpx;color: rgba(248, 50, 36, 1);">
+							当前余额：2387.5
+						</view>
+					</view>
+					<image v-if="mode==0" src="static/images/active.png" mode="" style="width: 36rpx;height: 36rpx;">
+					</image>
+					<image v-else src="static/images/unactive.png" mode="" style="width: 36rpx;height: 36rpx;"></image>
+				</view>
+			</view>
+			<!-- 微信支付 -->
+			<view v-if="state_id==0" class="payitem" style="margin-top: 20rpx;display: flex;" @click="change(1)">
+				<image src="static/images/wx.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
+				<view class="u-flex u-row-between " style="margin-left: 20rpx;flex: 1;">
+					<view class="">
+						<view class="">微信支付</view>
+						<view class="" style="margin-top: 10rpx;color: rgba(121, 121, 121, 1)">
+							适用微信支付
+						</view>
+					</view>
+					<image v-if='mode==1' src="static/images/active.png" mode="" style="width: 36rpx;height: 36rpx;">
+					</image>
+					<image v-else src="static/images/unactive.png" mode="" style="width: 36rpx;height: 36rpx;"></image>
+				</view>
+			</view>
+			<!-- 客服支付 -->
+			<view class="payitem" style="margin-top: 20rpx;display: flex;" @click="change(2)">
+				<image src="static/images/kefu2.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
+				<view class="u-flex u-row-between " style="margin-left: 20rpx;flex: 1;">
+					<view class="">
+						<view class="">客服支付</view>
+						<view class="" style="margin-top: 10rpx;color: rgba(121, 121, 121, 1)">
+							联系微信支付
+						</view>
+					</view>
+					<image v-if='mode==2' src="static/images/active.png" mode="" style="width: 36rpx;height: 36rpx;">
+					</image>
+					<image v-else src="static/images/unactive.png" mode="" style="width: 36rpx;height: 36rpx;"></image>
+				</view>
+			</view>
+		</view>
+		<!-- 付款须知 -->
+		<view class="">
+			<view class="payment" style="margin-top: 24rpx;">付款须知</view>
+			<view class="content" style="margin-top: 18rpx;">1.联系客服付款需走线下支付通道，付款成</view>
+		</view>
+		<view class="confirm" @click="confirm">
+			确认支付
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				mode: 0,
+				stateshow: false,
+				state: '人民币',
+				state_id: 0,
+				array: [{
+					name: '人民币'
+				}, {
+					name: '欧元'
+				}, {
+					name: '美元'
+				}]
+			};
+		},
+		methods: {
+			change(idx) {
+				this.mode = idx
+			},
+			statechange(item, idx) {
+				this.state = item.name
+				this.state_id = idx
+				this.stateshow = !this.stateshow
+			},
+			confirm(){
+				uni.navigateTo({
+					url:'confirm'
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.payment {
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 500;
+		font-size: 24rpx;
+		color: #222222;
+		line-height: 34rpx;
+		text-align: left;
+		font-style: normal;
+	}
+
+	.content {
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 400;
+		font-size: 20rpx;
+		color: #777777;
+		line-height: 28rpx;
+		text-align: left;
+		font-style: normal;
+	}
+
+	.stateac {
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 400;
+		font-size: 24rpx;
+		color: #FF1515;
+		line-height: 34rpx;
+		text-align: left;
+		font-style: normal;
+	}
+
+	.unstate {
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 400;
+		font-size: 24rpx;
+		color: #222222;
+		line-height: 34rpx;
+		text-align: left;
+		font-style: normal;
+	}
+
+	.confirm {
+		position: fixed;
+		bottom: 66rpx;
+		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;
+	}
+
+	.payitem {
+		width: 702rpx;
+		height: 140rpx;
+		background: #FFFFFF;
+		border-radius: 12rpx;
+		padding: 34rpx 24rpx;
+		box-sizing: border-box;
+	}
+
+	.back {
+		padding: 20rpx 24rpx;
+		box-sizing: border-box;
+
+		.topbox {
+			position: relative;
+
+			.state {
+				width: 128rpx;
+				// height: 56rpx;
+				background: #FFFFFF;
+				border-radius: 6rpx;
+				padding: 12rpx;
+				box-sizing: border-box;
+			}
+
+			.paysum {
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 400;
+				font-size: 28rpx;
+				color: #222222;
+				line-height: 40rpx;
+				text-align: left;
+				font-style: normal;
+			}
+
+			.numbe {
+				font-family: HarmonyOS_Sans_Medium;
+				font-size: 28rpx;
+				color: #000000;
+				line-height: 38rpx;
+				text-align: left;
+				font-style: normal;
+				margin-top: 20rpx;
+			}
+		}
+	}
+</style>

pageA/service/service.vue

@@ -0,0 +1,38 @@
+<template>
+	<!-- 客服聊天 -->
+	<view>
+		<u-navbar title="在线客服" :safeAreaInsetTop="true" :placeholder='true'>
+			<view class="u-nav-slot u-flex" slot="left">
+				<u-icon name="arrow-left" size="19"></u-icon>
+				<image src="../static/images/phone.png" style="width: 40rpx;height: 40rpx;margin-left: 44rpx;" mode="">
+				</image>
+			</view>
+		</u-navbar>
+		<view class="box">
+			<view class=""></view>
+		</view>
+		<view class="bottom">
+
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+	.box {
+		width: 750rpx;
+		height: 166rpx;
+		background: #FFFFFF;
+		position: fixed;
+		bottom: 0;
+	}
+</style>

pageA/subsidy.vue

@@ -5,7 +5,7 @@
 			style="width: 750rpx;height: 468rpx;position: absolute;top: 0;left: 0;z-index: -1;" mode=""></image>
 		<u-navbar :safeAreaInsetTop="true" bgColor="rgba(0,0,0,0)" :placeholder='true'>
 			<view class="u-nav-slot u-flex" slot="left">
-				<u-icon name="arrow-left" size="19"></u-icon>
+				<u-icon name="arrow-left" size="19" color='rgba(253, 252, 251, 1)'></u-icon>
 				<view class="input">
 					<u-icon name="search" color="rgba(153, 153, 153, 1)" size="32"></u-icon>
 					<input type="text" placeholder="请输入相关商品名称" />
@@ -14,7 +14,10 @@
 		</u-navbar>
 		<!-- 标签 -->
 		<view class=" u-row-center" style="margin-top: 52rpx;display: flex;flex-direction: column;align-items: center;">
-			<image src="static/images/img1.png" style="width: 484rpx;height: 52rpx;" mode=""></image>
+			<!-- <image src="static/images/img1.png" style="width: 484rpx;height: 52rpx;" mode=""></image> -->
+			<!-- <image src="static/images/img2.png" style="width: 346rpx;height: 64rpx;" mode=""></image> -->
+			<image src="static/images/goshop.png" style="width: 382rpx;height: 52rpx;" mode=""></image>
+			<!-- 			<image src="static/images/img1.png" style="width: 484rpx;height: 52rpx;" mode=""></image> -->
 			<view class="biaopqian" style="margin-top: 20rpx;">
 				<text>品质好货</text>
 				<text style='margin-left:20rpx;margin-right:20rpx'>|</text>
@@ -32,17 +35,50 @@
             transform: 'scale(1.05)'
         }" :list="list1" lineColor='rgba(248, 53, 39, 1)' @click="click"></u-tabs>
 			</view>
-			<view class="item">
+			<view class="item u-flex" v-for="(child,index) in 6">
 				<image src="../static/images/logo.png" style="width: 232rpx;height: 232rpx;" mode=""></image>
-				<view class="">
-					<text>得宝天然无香抽取式面巾纸9…</text>
+				<view class="u-row-between"
+					style="height: 232rpx;display: flex;flex-direction: column;margin-left: 20rpx;">
 					<view class="">
-						<text class="tabs">
-							买贵必赔
-						</text>
+						<text>得宝天然无香抽取式面巾纸9…</text>
+						<view class="u-flex" style="margin-top: 18rpx;column-gap: 18rpx;">
+							<text class="tabs baoyou"
+								style="background:rgba(248, 50, 36, 1) ;border: 2rpx solid rgba(248, 50, 36, 0);color:#FFFFFF ;">包邮</text>
+							<text class="tabs" v-for="(item,idx) in 3" :key="idx">
+								买贵必赔
+							</text>
+						</view>
 					</view>
-					<view class="">
-
+					<view class="backimg" style="position: relative;">
+						<image src="./static/images/tab.png"
+							style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 0;" mode="">
+						</image>
+						<!-- 					<view class="u-flex u-row-between"
+							style="position: relative;z-index: 1;padding:0 24rpx ;text-align: center;line-height: 68rpx;">
+							<view class="">
+								<text class="textone">补贴价</text>
+								<text class='texttwo' style="margin-left: 12rpx;">¥</text>
+								<text class='texttwo' style="font-size: 40rpx;">16</text>
+								<text class='texttwo'>.13</text>
+							</view>
+							<view class="">
+								<text class="textthree">已补</text>
+								<text class='textfour' style="margin-left: 8rpx;">¥</text>
+								<text class='textfour' style="font-size:  28rpx;">25.8</text>
+							</view>
+						</view> -->
+						<view class="u-flex u-row-between"
+							style="position: relative;z-index: 1;padding:0 24rpx ;text-align: center;line-height: 68rpx;">
+							<view class="">
+								<text class="textone">补贴价</text>
+								<text class='texttwo' style="margin-left: 12rpx;">¥</text>
+								<text class='texttwo' style="font-size: 40rpx;">16</text>
+								<text class='texttwo'>.13</text>
+							</view>
+							<!-- <view class=""> -->
+							<image src="static/images/qiang.png" style="width: 48rpx;height: 38rpx;" mode=""></image>
+							<!-- </view> -->
+						</view>
 					</view>
 				</view>
 			</view>
@@ -88,8 +124,68 @@
 		padding: 32rpx;
 		box-sizing: border-box;
 
+		.baoyou {
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 400;
+			font-size: 20rpx;
+			color: #FFFFFF;
+			line-height: 28rpx;
+			text-align: left;
+			font-style: normal;
+		}
+
+		.textone {
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 400;
+			font-size: 20rpx;
+			color: #F83224;
+			line-height: 28rpx;
+			text-align: left;
+			font-style: normal;
+		}
+
+		.texttwo {
+			font-family: HarmonyOS_Sans_Medium;
+			font-size: 24rpx;
+			color: #F83224;
+			line-height: 34rpx;
+			text-align: left;
+			font-style: normal;
+		}
+
+		.textthree {
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 400;
+			font-size: 20rpx;
+			color: #FDFCFB;
+			line-height: 28rpx;
+			text-align: left;
+			font-style: normal;
+		}
+
+		.textfour {
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 400;
+			font-size: 20rpx;
+			color: #FDFCFB;
+			line-height: 28rpx;
+			text-align: left;
+			font-style: normal;
+		}
+
+		.backimg {
+			width: 418rpx;
+			height: 68rpx;
+		}
+
 		.item {
 			margin-top: 36rpx;
+			background: #FDFCFB;
+			border-radius: 16rpx;
+			width: 702rpx;
+			padding: 28rpx 16rpx;
+			box-sizing: border-box;
+			// height: 256rpx;
 		}
 
 		.tabs {

pageB/ParcelExpress.vue

@@ -0,0 +1,565 @@
+<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 title='寄快递' 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">
+					<text class="title">普通包裹｜海运散货</text>
+					<view class="change">更换</view>
+				</view>
+				<view class="box u-row-around u-flex">
+					<view class="flexc">
+						<view class="entrepotname">东莞仓库</view>
+						<view class="adda">始发地</view>
+					</view>
+					<image src="/pageB/static/images/arrows.png" style="width: 130rpx;height: 10rpx;" mode=""></image>
+					<view class="flexc">
+						<view class="entrepotname">澳大利亚</view>
+						<view class="adda">目的地</view>
+					</view>
+				</view>
+				<view class="timea">
+					<text>开始时间：2023-12-31</text>
+					<text>/截止时间：2023-12-31</text>
+				</view>
+			</view>
+			<!-- 地址 -->
+			<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 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 class="u-row-between " style="">
+							<view class="pople">新建寄件人</view>
+							<view class="jiadd" style="margin-top: 14rpx;">点击填写寄件地址信息</view>
+						</view>
+						<view class="u-flex">
+							<view class="" style="color: rgba(151, 151, 151, 1);">|</view>
+							<text class="right">地址簿</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 class="u-row-between " style="">
+							<view class="pople">新建收件人</view>
+							<view class="jiadd" style="margin-top: 14rpx;">点击填写寄件地址信息</view>
+						</view>
+						<view class="u-flex">
+							<view class="" style="color: rgba(151, 151, 151, 1);">|</view>
+							<text class="right">地址簿</text>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="wup">
+				<!-- 物品信息 -->
+				<view class="info u-flex u-row-between">
+					<view class="u-flex">
+						<text class="wupin">物品信息</text>
+						<view class="mast">必填</view>
+					</view>
+					<view class="u-flex">
+						<text class="change">请选择物品信息</text>
+						<image src="/static/express/next1.png" style="width: 28rpx;height: 28rpx;margin-left: 6rpx;"
+							mode=""></image>
+					</view>
+				</view>
+			</view>
+			<!-- 下一步 -->
+			<view class="next  u-flex-between" style="display: flex;">
+				<view class="" style="flex: 1;">
+					<view class="sum">
+						<text>预估总价</text>
+						<text style="color: rgba(248, 50, 36, 1);">¥ - -</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>我阅读并同意</text>
+						<text style="color: rgba(248, 50, 36, 1);">《国际快递服务协议》</text>
+					</view>
+				</view>
+				<view class="tonext " style="">
+					下一步
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				deal: -1,
+				checkboxValue1: [],
+			}
+		},
+		onLoad(options) {
+
+		},
+		methods: {
+			checkboxChange(n) {
+				console.log('change', n);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.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;
+			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>

pageB/Senderinfor.vue

@@ -0,0 +1,237 @@
+<template>
+	<!-- 填写寄件人信息 -->
+	<view class="back">
+		<view class="info">
+			<view class="item u-flex u-row-between">
+				<text class="title">填写寄件人信息</text>
+				<view class="u-flex">
+					<u-icon name="order" color="rgba(0, 0, 0, 0.6)" size="23"></u-icon>
+					<text class="wx">微信地址薄</text>
+				</view>
+			</view>
+			<view class="item u-flex ">
+				<text class="left">姓名</text>
+				<view class="right">
+					<input type="text" placeholder="请填写" />
+				</view>
+			</view>
+			<view class="item u-flex ">
+				<text class="left">手机号</text>
+				<view class="right">
+					<input type="text" placeholder="请填写" />
+				</view>
+			</view>
+			<view class="item u-flex ">
+				<text class="left">省市区</text>
+				<view class="right">
+					<input type="text" placeholder="请选择" disabled="" />
+				</view>
+			</view>
+			<view class="item u-flex ">
+				<text class="left">详细地址</text>
+				<view class="right">
+					<input type="area" placeholder="请填写" disabled="" />
+				</view>
+			</view>
+			<view class="item u-flex ">
+				<input type="area" placeholder="公司名称（选填）" />
+			</view>
+			<!-- 默认地址 -->
+			<view class="u-flex u-row-between" style="margin-top: 22rpx;">
+				<view class="u-flex">
+					<view class="">
+						<u-checkbox-group v-model="checkboxValue1" placement="row" @change="checkboxChange">
+							<u-checkbox shape='circle' :customStyle="{marginRight: '4px'}" :name="name">
+							</u-checkbox>
+						</u-checkbox-group>
+					</view>
+					<text class="clear">默认寄件地址</text>
+				</view>
+				<text class="clear">
+					清空
+				</text>
+			</view>
+		</view>
+		<view class="history">历史地址</view>
+		<view class="add">
+			<view class="">
+				<text class="name">陈盼盼</text>
+				<text class="phone">176****3298</text>
+			</view>
+			<view class="addinfo">江苏省南京市浦口区浦口大道东方万汇城北区</view>
+		</view>
+		<view class="bottom">
+			<view class="btn">
+				确定
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				checkboxValue1: [],
+				name: 1
+			};
+		},
+		methods: {
+			checkboxChange(n) {
+				console.log('change', n);
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.back {
+		padding: 20rpx 24rpx;
+		box-sizing: border-box;
+
+		.bottom {
+			width: 750rpx;
+			height: 166rpx;
+			background: #FFFFFF;
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			padding: 18rpx 24rpx;
+			box-sizing: border-box;
+
+			.btn {
+				width: 702rpx;
+				height: 88rpx;
+				background: #F83224;
+				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;
+			}
+		}
+
+		.add {
+			width: 702rpx;
+			// height: 160rpx;
+			background: #FFFFFF;
+			border-radius: 16rpx;
+			padding: 24rpx;
+			box-sizing: border-box;
+
+			.addinfo {
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 400;
+				font-size: 24rpx;
+				color: #222222;
+				line-height: 34rpx;
+				text-align: left;
+				font-style: normal;
+			}
+
+			.name {
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 500;
+				font-size: 28rpx;
+				color: #333333;
+				line-height: 40rpx;
+				text-align: left;
+				font-style: normal;
+			}
+
+			.phone {
+				font-family: SFPro, SFPro;
+				font-weight: 400;
+				font-size: 24rpx;
+				color: #333333;
+				line-height: 28rpx;
+				text-align: left;
+				font-style: normal;
+				margin-left: 16rpx;
+			}
+		}
+
+		.history {
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 500;
+			font-size: 30rpx;
+			color: #333333;
+			line-height: 42rpx;
+			text-align: left;
+			font-style: normal;
+			margin: 28rpx 0 24rpx;
+		}
+
+		.info {
+			padding: 28rpx 24rpx;
+			box-sizing: border-box;
+			width: 702rpx;
+			// height: 742rpx;
+			background: #FFFFFF;
+			border-radius: 16rpx;
+
+			.clear {
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 400;
+				font-size: 24rpx;
+				color: #333333;
+				line-height: 34rpx;
+				text-align: left;
+				font-style: normal;
+			}
+
+			.item {
+				border-bottom: 2rpx solid rgba(151, 151, 151, 0.1);
+				height: 100rpx;
+				line-height: 100rpx;
+
+				.title {
+					font-family: PingFangSC, PingFang SC;
+					font-weight: 600;
+					font-size: 32rpx;
+					color: #333333;
+					line-height: 44rpx;
+					text-align: left;
+					font-style: normal;
+				}
+
+				.wx {
+					font-family: PingFangSC, PingFang SC;
+					font-weight: 400;
+					font-size: 24rpx;
+					color: #333333;
+					line-height: 34rpx;
+					text-align: left;
+					font-style: normal;
+				}
+
+				.left {
+					font-family: PingFangSC, PingFang SC;
+					font-weight: 400;
+					font-size: 28rpx;
+					color: #222222;
+					line-height: 40rpx;
+					text-align: left;
+					font-style: normal;
+					width: 115rpx;
+				}
+
+				.right {
+					font-family: PingFangSC, PingFang SC;
+					font-weight: 400;
+					font-size: 28rpx;
+					color: #222222;
+					line-height: 40rpx;
+					text-align: left;
+					font-style: normal;
+					margin-left: 60rpx;
+				}
+
+
+			}
+		}
+	}
+</style>

pageB/account.vue

@@ -0,0 +1,645 @@
+<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 title='寄快递' 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="topadd" style="margin-top: 20rpx;">
+				<view class="u-flex u-row-around">
+					<view class="flexc">
+						<view class="entrepotname">东莞仓库</view>
+						<view class="adda">陈盼盼</view>
+					</view>
+					<image src="/pageB/static/images/arrows.png" style="width: 130rpx;height: 10rpx;" mode=""></image>
+					<view class="flexc">
+						<view class="entrepotname">澳大利亚</view>
+						<view class="adda">Curtis Morris</view>
+					</view>
+				</view>
+				<view class="topinfo" style="margin-top: 26rpx;">
+					<text class='toptype'>类型：</text>
+					<text class='toptype' style='color:rgba(34, 34, 34, 1)'>日用品</text>
+					<text class='toptype' style='margin:0 14rpx'>|</text>
+					<text class='toptype'>重量：</text>
+					<text class='toptype' style='color:rgba(34, 34, 34, 1)'>30.00kg</text>
+					<text class='toptype' style='margin:0 14rpx'> |</text>
+					<text class='toptype'>数量：</text>
+					<text class='toptype' style='color:rgba(34, 34, 34, 1)'>20件</text>
+				</view>
+			</view>
+			<!-- 地址 -->
+			<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 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 class="u-row-between " style="">
+							<view class="pople">新建寄件人</view>
+							<view class="jiadd" style="margin-top: 14rpx;">点击填写寄件地址信息</view>
+						</view>
+						<view class="u-flex">
+							<view class="" style="color: rgba(151, 151, 151, 1);">|</view>
+							<text class="right">地址簿</text>
+						</view>
+					</view>
+				</view>
+				<view class="left u-flex"
+					style="display: flex;margin-top: 26rpx;">
+					<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 class="u-row-between " style="">
+							<view class="pople">新建收件人</view>
+							<view class="jiadd" style="margin-top: 14rpx;">点击填写寄件地址信息</view>
+						</view>
+						<view class="u-flex">
+							<view class="" style="color: rgba(151, 151, 151, 1);">|</view>
+							<text class="right">地址簿</text>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="entrepot">
+				<view class="entre u-flex u-row-between" style="margin-top: 20rpx;">
+					<text class="title">普通包裹｜海运散货</text>
+				</view>
+				<view class="box u-row-around u-flex">
+					<view class="flexc">
+						<view class="entrepotname">东莞仓库</view>
+						<view class="adda">始发地</view>
+					</view>
+					<image src="/pageB/static/images/arrows.png" style="width: 130rpx;height: 10rpx;" mode=""></image>
+					<view class="flexc">
+						<view class="entrepotname">澳大利亚</view>
+						<view class="adda">目的地</view>
+					</view>
+				</view>
+			</view>
+			<view class="wup">
+				<!-- 物品信息 -->
+				<view class="info u-flex u-row-between">
+					<view class="u-flex">
+						<text class="wupin">物品信息</text>
+					</view>
+					<view class="u-flex">
+						<text class="chang">30kg</text>
+					</view>
+				</view>
+				<view class="info u-flex u-row-between">
+					<view class="u-flex">
+						<text class="wupin">单价</text>
+					</view>
+					<view class="u-flex">
+						<text class="chang">￥24</text>
+					</view>
+				</view>
+				<view class="info u-flex u-row-right">
+					<view class="u-flex">
+						<text class="wupin">小计：</text>
+					</view>
+					<view class="u-flex">
+						<text class="chang" style="color: rgba(248, 50, 36, 1);">￥</text>
+						<text style="color: rgba(248, 50, 36, 1);font-size: 38rpx;">2642.5</text>
+					</view>
+				</view>
+			</view>
+			<view class="" style="height: 166rpx;"></view>
+			<!-- 下一步 -->
+			<view class="next  u-flex-between" style="display: flex;">
+				<view class="gopay">立即支付</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				deal: -1,
+				checkboxValue1: [],
+			}
+		},
+		onLoad(options) {
+
+		},
+		methods: {
+			checkboxChange(n) {
+				console.log('change', n);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.gopay{
+		width: 686rpx;
+		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;
+	}
+	.topadd {
+		width: 702rpx;
+		height: 278rpx;
+		background: #FFFFFF;
+		border-radius: 16rpx;
+		padding: 40rpx 24rpx 30rpx;
+		box-sizing: border-box;
+
+		.toptype {
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 400;
+			font-size: 24rpx;
+			color: #777777;
+			line-height: 34rpx;
+			text-align: left;
+			font-style: normal;
+		}
+
+		.topinfo {
+			width: 662rpx;
+			height: 92rpx;
+			background: #F4F4F4;
+			border-radius: 12rpx;
+			line-height: 92rpx;
+			padding: 0 24rpx;
+			box-sizing: border-box;
+		}
+
+		.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;
+		}
+	}
+
+	.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: 702rpx;
+		// 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;
+		}
+
+		.chang {
+			font-family: HarmonyOS_Sans_Medium;
+			font-size: 28rpx;
+			color: #222222;
+			line-height: 38rpx;
+			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;
+		}
+	}
+
+	.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>

pageB/citychange.vue

@@ -0,0 +1,77 @@
+<template>
+	<!-- 选择城市 -->
+	<view class="page-main">
+		<liu-indexed-list :dataList="dataList" @click="click"></liu-indexed-list>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				dataList: [{
+					id: '1',
+					name: '刘**',
+					phone: '181****5576',
+					img: 'https://cdn.pixabay.com/photo/2022/03/31/14/53/camp-7103189_1280.png'
+				}, {
+					id: '2',
+					name: '税**',
+					phone: '181****5576',
+					img: 'https://cdn.pixabay.com/photo/2021/07/22/11/25/rabbit-6485072_1280.jpg'
+				}, {
+					id: '3',
+					name: '柴**',
+					phone: '181****5576',
+					img: 'https://cdn.pixabay.com/photo/2020/05/19/13/35/cartoon-5190860_1280.jpg'
+				}, {
+					id: '4',
+					name: '王**',
+					phone: '181****5576',
+					img: 'https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg'
+				}, {
+					id: '5',
+					name: '马**',
+					phone: '181****5576',
+					img: 'https://cdn.pixabay.com/photo/2023/03/07/12/45/child-7835677_1280.jpg'
+				}, {
+					id: '6',
+					name: '韩**',
+					phone: '181****5576',
+					img: 'https://cdn.pixabay.com/photo/2022/11/29/19/05/boho-7625140_1280.jpg'
+				}, {
+					id: '7',
+					name: '张**',
+					phone: '181****5576',
+					img: 'https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg'
+				}, {
+					id: '8',
+					name: '王**',
+					phone: '181****5576',
+					img: 'https://cdn.pixabay.com/photo/2020/05/19/13/35/cartoon-5190860_1280.jpg'
+				}, {
+					id: '9',
+					name: '张**',
+					phone: '18198045576',
+					img: 'https://cdn.pixabay.com/photo/2021/07/22/11/25/rabbit-6485072_1280.jpg'
+				}, {
+					id: '10',
+					name: '李**',
+					phone: '181****5576',
+					img: 'https://cdn.pixabay.com/photo/2022/03/31/14/53/camp-7103189_1280.png'
+				}]
+			};
+		},
+
+		methods: {
+			//点击列表回调事件
+			click(e) {
+				console.log('点击列表回调：', e)
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>

pageB/delivery.vue

@@ -0,0 +1,471 @@
+<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 title='寄快递' 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="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 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 class="u-row-between " style="">
+							<view class="pople">新建寄件人</view>
+							<view class="jiadd" style="margin-top: 14rpx;">点击填写寄件地址信息</view>
+						</view>
+						<view class="u-flex">
+							<view class="" style="color: rgba(151, 151, 151, 1);">|</view>
+							<text class="right">地址簿</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 class="u-row-between " style="">
+							<view class="pople">新建收件人</view>
+							<view class="jiadd" style="margin-top: 14rpx;">点击填写寄件地址信息</view>
+						</view>
+						<view class="u-flex">
+							<view class="" style="color: rgba(151, 151, 151, 1);">|</view>
+							<text class="right">地址簿</text>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="wup">
+				<!-- 物品信息 -->
+				<view class="info u-flex u-row-between">
+					<view class="u-flex">
+						<text class="wupin">物品信息</text>
+						<view class="mast">必填</view>
+					</view>
+					<view class="u-flex">
+						<text class="change">请选择物品信息</text>
+						<image src="../../static/express/next1.png"
+							style="width: 28rpx;height: 28rpx;margin-left: 6rpx;" mode=""></image>
+					</view>
+				</view>
+				<!-- 跨境物流 -->
+				<view class="info u-flex u-row-between">
+					<view class="u-flex">
+						<text class="wupin">跨境物流</text>
+					</view>
+					<view class="u-flex">
+						<text class="change" style="color: rgba(248, 50, 36, 1);">请选择</text>
+						<image src="../../static/express/next1.png"
+							style="width: 28rpx;height: 28rpx;margin-left: 6rpx;" mode=""></image>
+					</view>
+				</view>
+			</view>
+			<!-- 下一步 -->
+			<view class="next  u-flex-between" style="display: flex;">
+				<view class="" style="flex: 1;">
+					<view class="sum">
+						<text>预估总价</text>
+						<text style="color: rgba(248, 50, 36, 1);">¥ - -</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>我阅读并同意</text>
+						<text style="color: rgba(248, 50, 36, 1);">《国际快递服务协议》</text>
+					</view>
+				</view>
+				<view class="tonext " style="">
+					下一步
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				deal:-1,
+				checkboxValue1:[],
+			}
+		},
+		onLoad(options) {
+
+		},
+		methods: {
+			checkboxChange(n) {
+				console.log('change', n);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.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;
+			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>

pageB/goods.vue

@@ -0,0 +1,264 @@
+<template>
+	<!-- 物品信息 -->
+	<view class="back">
+		<view class="top">
+			<view class="u-flex">
+				<text class="title">物品信息</text>
+				<view class="mast">必填</view>
+			</view>
+			<view class="info">填写准确的寄送物品可帮助您推荐更合适的产品</view>
+			<view class="input">
+				<input type="text" placeholder="请输入物品名称" style="width: 100%;" />
+			</view>
+			<view class="u-flex u-row-between" style="margin-top: 28rpx;flex-wrap: wrap;">
+				<view class="about" v-for="(item,idx) in 10">文件</view>
+			</view>
+		</view>
+		<view class="type  u-flex u-row-between">
+			<view class="">
+				<text class="title">商品类型</text>
+			</view>
+			<view class="">
+				<text class="change">请选择</text>
+				<image src="../static/express/next1.png" style="width: 26rpx;height: 26rpx;" mode=""></image>
+			</view>
+		</view>
+		<view class="abouta">
+			<view class="u-flex u-row-between">
+				<view class="title">预估重量</view>
+				<view class="">
+					<u-number-box v-model="value">
+						<view slot="minus" class="minus">
+							<u-icon name="minus" size="12"></u-icon>
+						</view>
+						<text slot="input" style="width: 150rpx;text-align: center;" class="inpu">{{value}}kg</text>
+						<view slot="plus" class="plus">
+							<u-icon name="plus" color="#000000" size="12"></u-icon>
+						</view>
+					</u-number-box>
+				</view>
+			</view>
+			<view class="u-flex u-row-between" style="border-top: 2rpx solid rgba(151, 151, 151, 0.1);padding-top: 30rpx;margin-top: 32rpx;">
+				<view class="title">件数</view>
+				<view class="">
+					<u-number-box v-model="value">
+						<view slot="minus" class="minus">
+							<u-icon name="minus" size="12"></u-icon>
+						</view>
+						<text slot="input" style="width: 150rpx;text-align: center;" class="inpu">{{value}}件</text>
+						<view slot="plus" class="plus">
+							<u-icon name="plus" color="#000000" size="12"></u-icon>
+						</view>
+					</u-number-box>
+				</view>
+			</view>
+			<view class="u-flex" style="margin-top: 28rpx;">
+				<view class="zhu">
+					注：实际重量体积以收派员确定为准，物品在
+					<text class="rule"> 了解计费规则</text>
+				</view>
+			</view>
+		</view>
+		<view class="btn">
+			<view class="button">确定</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				value:1
+			};
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+		.minus {
+			width: 22px;
+			height: 22px;
+			border-width: 1px;
+			border-color: rgba(0, 0, 0, 0);
+			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;
+		}
+	
+		.inpu {
+			padding: 0 20px;
+			width: 150rpx;
+			height: 52rpx;
+			background: #F4F4F4;
+			text-align: center;
+			line-height: 52rpx;
+		}
+	
+		.plus {
+			width: 22px;
+			height: 22px;
+			// background-color: #FF0000;
+			border-radius: 50%;
+			/* #ifndef APP-NVUE */
+			display: flex;
+			/* #endif */
+			justify-content: center;
+			align-items: center;
+		}
+	.back {
+		padding: 20rpx 24rpx;
+
+		.btn {
+			width: 750rpx;
+			height: 166rpx;
+			background: #FFFFFF;
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			padding: 18rpx 32rpx;
+			box-sizing: border-box;
+
+			.button {
+				width: 686rpx;
+				height: 88rpx;
+				background: #F83224;
+				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;
+			}
+		}
+
+		.abouta {
+			padding: 38rpx 20rpx;
+			box-sizing: border-box;
+			width: 702rpx;
+			height: 352rpx;
+			background: #FFFFFF;
+			border-radius: 16rpx;
+			margin-top: 20rpx;
+
+			.zhu {
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 400;
+				font-size: 24rpx;
+				color: #7D7D7D;
+				line-height: 42rpx;
+				text-align: left;
+				font-style: normal;
+			}
+
+			.rule {
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 400;
+				font-size: 24rpx;
+				color: #F83224;
+				line-height: 34rpx;
+				text-align: left;
+				font-style: normal;
+			}
+		}
+
+		.title {
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 600;
+			font-size: 28rpx;
+			color: #222222;
+			line-height: 40rpx;
+			text-align: left;
+			font-style: normal;
+		}
+
+		.type {
+			width: 704rpx;
+			height: 96rpx;
+			background: #FFFFFF;
+			border-radius: 16rpx;
+			margin-top: 20rpx;
+			padding: 28rpx 20rpx;
+			box-sizing: border-box;
+
+			.change {
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 400;
+				font-size: 28rpx;
+				color: #666666;
+				line-height: 40rpx;
+				text-align: left;
+				font-style: normal;
+			}
+		}
+
+		.top {
+			width: 702rpx;
+			// height: 484rpx;
+			background: #FFFFFF;
+			border-radius: 16rpx;
+			padding: 24rpx 28rpx;
+			box-sizing: border-box;
+
+
+
+			.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: 8rpx;
+			}
+
+			.about {
+				width: 202rpx;
+				height: 60rpx;
+				border-radius: 36rpx;
+				border: 1rpx solid rgba(151, 151, 151, 0.5);
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 400;
+				font-size: 26rpx;
+				color: #444444;
+				line-height: 60rpx;
+				text-align: center;
+				font-style: normal;
+				margin-bottom: 20rpx;
+			}
+		}
+
+		.info {
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 400;
+			font-size: 24rpx;
+			color: #222222;
+			line-height: 34rpx;
+			text-align: left;
+			font-style: normal;
+			margin-top: 20rpx;
+		}
+
+		.input {
+			width: 646rpx;
+			height: 68rpx;
+			background: #F5F5F5;
+			border-radius: 44rpx;
+			padding: 14rpx 32rpx;
+			margin-top: 20rpx;
+			box-sizing: border-box;
+		}
+	}
+</style>

pageB/list/list.vue

@@ -0,0 +1,163 @@
+<template>
+	<!-- 拼包列表 -->
+	<view class="back">
+		<view class="label">
+			<view class="" style="display: flex;">
+				<view class="left flexc">
+					<text class="bourn">目的地</text>
+					<view class="addres">澳大利亚</view>
+				</view>
+				<view class="" style="flex: 1;margin-left: 20rpx;">
+					<view class="u-flex u-row-between">
+						<view class="">
+							<text class='bigtitle'>特殊包裹</text>
+							<text style="margin: 0 8rpx;">|</text>
+							<text class='bigtitle'>海运散货</text>
+						</view>
+						<view class="mon">
+							<text class="timeb">单价</text>
+							<text>￥</text>
+							<text style="font-size: 32rpx;">28</text>
+							<text>.00</text>
+						</view>
+					</view>
+					<view class="" style="margin-top: 34rpx;">
+						<u-line-progress activeColor='rgba(255, 21, 21, 1)' :percentage="percentage" 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'>已拼 </text>
+								<text class='timeb' style='color:rgba(255, 21, 21, 1)'>200kg</text>
+							</view>
+							<text style="margin: 0 8rpx;">|</text>
+							<view class="">
+								<text class='timeb'>剩余重量 </text>
+								<text class='timeb' style='color:rgba(255, 21, 21, 1)'>400kg</text>
+							</view>
+						</view>
+						<view class="">
+							<text class="timeb">进度50%</text>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="u-flex u-row-between" style="margin-top: 32rpx;">
+				<text class="timea">开始时间：2023-12-31/截止时间：2023-12-31</text>
+				<view class="pinb">去拼包</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				percentage: 50, //进度条
+			};
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.flexc {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+	.back{
+		padding: 20rpx 24rpx;
+		box-sizing: border-box;
+	}
+	.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;
+	}
+	
+	.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;
+	}
+	.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;
+			}
+		}
+	}
+</style>

pageB/myPackage.vue

@@ -0,0 +1,250 @@
+<template>
+	<!-- 我的包裹 -->
+	<view>
+		<view class="top">
+			<view class="inputbg u-flex">
+				<u-icon name="search" color="#777777" size="32"></u-icon>
+				<input type="text" placeholder="请输入订单编号搜索" style="flex: 1;margin-left: 12rpx;" />
+			</view>
+			<!-- rgba(252, 97, 74, 1) -->
+			<view class="">
+				<u-tabs :scrollable='false' :list="list1" @click="click"></u-tabs>
+			</view>
+		</view>
+		<view class="content">
+			<view class="kg u-flex">
+				<image src="static/images/kg.png" style="width: 36rpx;height: 36rpx;" mode=""></image>
+				<text style="margin-left: 20rpx;">当前页面加载的订单总重量300kg</text>
+			</view>
+			<view class="info" v-if="current==0">
+				<view class="u-flex u-row-between">
+					<view class="u-flex ">
+						<!-- <view class="tab">平台自购</view> -->
+						<view class="tab" style="background: rgba(255, 103, 0, 1);">自寄</view>
+						<text class="order">订单编号：487322109310589</text>
+					</view>
+					<text class="order" style="color:rgba(248, 50, 36, 1) ;">待平台收货</text>
+				</view>
+				<view class="u-flex u-row-around" style="margin-top: 40rpx;">
+					<view class="flexc">
+						<view class="entrepotname">东莞仓库</view>
+						<view class="adda">陈盼盼</view>
+					</view>
+					<image src="/pageB/static/images/arrows.png" style="width: 130rpx;height: 10rpx;" mode=""></image>
+					<view class="flexc">
+						<view class="entrepotname">澳大利亚</view>
+						<view class="adda">Curtis Morris</view>
+					</view>
+				</view>
+				<view class="" style="margin-top: 36rpx;text-align: right;">
+					<text class="sum">合计</text>
+					<text class="money" style="">¥</text>
+					<text class="money" style="font-size: 36rpx;">1280</text>
+					<text class="money">.00</text>
+				</view>
+				<view class="content-bottom u-flex u-row-between">
+					<text class="weight">包裹重量：45kg</text>
+					<view class="u-flex">
+						<!-- 	<view class="btn">冻结</view>
+						<view class="btn">查看详情</view> -->
+						<!-- <view class="btn">恢复</view> -->
+						<view class="btn"
+							style="background-color:rgba(248, 50, 36, 1) ;color: #fff;border: 2rpx solid rgba(248, 50, 36, 0);">
+							立即付款</view>
+						<view class="btn"
+							style="background-color:rgba(248, 50, 36, 1) ;color: #fff;border: 2rpx solid rgba(248, 50, 36, 0);">
+							去寄件</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				current: 0, //tab切换
+				list1: [{
+					name: '发往中转点 4',
+				}, {
+					name: '中转已签收 12',
+				}, {
+					name: '正发往海外 2'
+				}]
+			};
+		},
+		onShow() {
+
+		},
+		methods: {
+			click(item) {
+				console.log('item', item);
+				this.current = item.index
+			}
+		},
+		mounted() {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.flexc {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.content {
+		padding: 20rpx 24rpx;
+		box-sizing: border-box;
+
+
+
+		.content-bottom {
+			border-top: 2rpx solid rgba(151, 151, 151, 0.1);
+			margin-top: 30rpx;
+			padding-top: 30rpx;
+
+			.weight {
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 400;
+				font-size: 26rpx;
+				color: #444444;
+				line-height: 36rpx;
+				text-align: left;
+				font-style: normal;
+			}
+
+			.btn {
+				// width: 132rpx;
+				height: 68rpx;
+				border-radius: 34rpx;
+				border: 1rpx solid rgba(151, 151, 151, 0.7);
+				display: inline;
+				padding: 0 38rpx;
+				box-sizing: border-box;
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 400;
+				font-size: 28rpx;
+				color: #333333;
+				line-height: 68rpx;
+				text-align: center;
+				font-style: normal;
+				margin-left: 20rpx;
+			}
+		}
+
+		.sum {
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 400;
+			font-size: 24rpx;
+			color: #333333;
+			line-height: 34rpx;
+			text-align: left;
+			font-style: normal;
+			margin-right: 8rpx;
+		}
+
+		.money {
+			font-family: JDZhengHT, JDZhengHT;
+			font-weight: 400;
+			// font-size: 26rpx;
+			color: #F83224;
+			line-height: 32rpx;
+			text-align: left;
+			font-style: normal;
+		}
+
+		.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: 500;
+			font-size: 32rpx;
+			color: #222222;
+			line-height: 44rpx;
+			text-align: left;
+			font-style: normal;
+		}
+
+		.tab {
+			// width: 96rpx;
+			height: 36rpx;
+			background: #FF1515;
+			border-radius: 4rpx;
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 400;
+			font-size: 20rpx;
+			color: #FFFFFF;
+			line-height: 36rpx;
+			text-align: center;
+			font-style: normal;
+			margin-right: 8rpx;
+			padding: 0 8rpx;
+		}
+
+		.order {
+			font-family: SFPro, SFPro;
+			font-weight: 400;
+			font-size: 26rpx;
+			color: #333333;
+			line-height: 30rpx;
+			text-align: left;
+			font-style: normal;
+		}
+
+		.info {
+			width: 702rpx;
+			// height: 366rpx;
+			background: #FFFFFF;
+			border-radius: 16rpx;
+			padding: 28rpx 20rpx;
+			box-sizing: border-box;
+			margin-top: 20rpx;
+		}
+
+		.kg {
+			width: 702rpx;
+			// height: 68rpx;
+			background: #FBE8E6;
+			border-radius: 10rpx;
+			padding: 18rpx 26rpx;
+			box-sizing: border-box;
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 400;
+			font-size: 24rpx;
+			color: #F83224;
+			line-height: 34rpx;
+			text-align: left;
+			font-style: normal;
+		}
+	}
+
+	.top {
+		padding: 20rpx 24rpx;
+		box-sizing: border-box;
+		background-color: #fff;
+
+		.inputbg {
+			width: 694rpx;
+			height: 72rpx;
+			background: #F4F4F4;
+			border-radius: 38rpx;
+			padding: 0 38rpx;
+			box-sizing: border-box;
+		}
+	}
+</style>

pageB/parcel.vue

@@ -0,0 +1,87 @@
+<template>
+	<!-- 添加包裹 -->
+	<view class="back">
+		<view class="box">
+			<view class="boxitem u-flex">
+				<text class="name">快递单号</text>
+				<input style="flex: 1;" type="text" placeholder="输入快递单号，快速添加到我的包裹" />
+			</view>
+		</view>
+		<view class="box">
+			<view class="boxitem u-flex">
+				<text class="name">快递公司</text>
+				<input style="flex: 1;" type="text" placeholder="输入快递公司名称" />
+			</view>
+		</view>
+		<view class="box">
+			<view class="boxitem u-flex">
+				<text class="name">包裹重量</text>
+				<input style="flex: 1;" type="text" placeholder="请输入包裹重量" />
+				<text>kg</text>
+			</view>
+		</view>
+		<view class="btn">
+			添加到包裹列表
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			};
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.btn {
+		width: 686rpx;
+		height: 88rpx;
+		background: #F83224;
+		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;
+		margin-top: 94rpx;
+	}
+
+	.back {
+		box-sizing: border-box;
+		padding: 20rpx 24rpx;
+
+	}
+
+	.box {
+		padding: 0 28rpx;
+		box-sizing: border-box;
+		width: 702rpx;
+		// height: 324rpx;
+		background: #FFFFFF;
+		border-radius: 16rpx;
+
+		.boxitem {
+			height: 100rpx;
+			width: 646rpx;
+			border-bottom: 2rpx solid rgba(151, 151, 151, 0.1);
+			box-sizing: border-box;
+		}
+
+		.name {
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 400;
+			font-size: 30rpx;
+			color: #222222;
+			line-height: 42rpx;
+			text-align: left;
+			font-style: normal;
+			margin-right: 44rpx;
+		}
+	}
+</style>

pageB/recipientinfo.vue

@@ -0,0 +1,249 @@
+<template>
+	<!-- 填写收件人信息 -->
+	<view class="back">
+		<view class="info">
+			<view class="item u-flex u-row-between">
+				<text class="title">填写收件人信息</text>
+			</view>
+			<view class="item u-flex ">
+				<text class="left">国家</text>
+				<view class="right u-flex u-row-between" style="flex: 1;">
+					<input type="text" placeholder="请选择" />
+					<image src="../static/express/next1.png" style="width: 36rpx;height: 36rpx;" mode=""></image>
+				</view>
+			</view>
+			<view class="item u-flex ">
+				<text class="left">姓名</text>
+				<view class="right">
+					<input type="text" placeholder="请输入收件人姓名" />
+				</view>
+			</view>
+			<view class="item u-flex ">
+				<text class="left">手机号</text>
+				<view class="right">
+					<input type="text" placeholder="请输入手机号" />
+				</view>
+			</view>
+			<view class="item u-flex ">
+				<text class="left">邮编</text>
+				<view class="right">
+					<input type="text" placeholder="请输入邮编" />
+				</view>
+			</view>
+			<view class="item u-flex ">
+				<text class="left">省市区</text>
+				<view class="right u-flex u-row-between " style="flex: 1;">
+					<input type="text" placeholder="请选择" disabled="" />
+					<image src="../static/express/next1.png" style="width: 36rpx;height: 36rpx;" mode=""></image>
+				</view>
+			</view>
+			<view class="item u-flex ">
+				<text class="left">详细地址</text>
+				<view class="right">
+					<input type="area" placeholder="详细地址精确到门牌号" />
+				</view>
+			</view>
+			<view class="item u-flex ">
+				<text class="left">公司名称</text>
+				<view class="right">
+					<input type="area" placeholder="请输入公司名称（选填）" />
+				</view>
+			</view>
+			<view class="item u-flex ">
+				<text class="left">电子邮箱</text>
+				<view class="right">
+					<input type="area" placeholder="请输入电子邮箱（选填）" />
+				</view>
+			</view>
+			<!-- 默认地址 -->
+			<view class="u-flex u-row-between" style="margin-top: 22rpx;">
+				<view class="u-flex">
+					<view class="">
+						<u-checkbox-group v-model="checkboxValue1" placement="row" @change="checkboxChange">
+							<u-checkbox shape='circle' :customStyle="{marginRight: '4px'}" :name="name">
+							</u-checkbox>
+						</u-checkbox-group>
+					</view>
+					<text class="clear">保存到地址薄</text>
+				</view>
+				<text class="clear">
+					清空
+				</text>
+			</view>
+		</view>
+		<view class="" style="height: 166rpx;"></view>
+		<view class="bottom">
+			<view class="btn">
+				确定
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				checkboxValue1: [],
+				name: 1
+			};
+		},
+		methods: {
+			checkboxChange(n) {
+				console.log('change', n);
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.back {
+		padding: 20rpx 24rpx;
+		box-sizing: border-box;
+
+		.bottom {
+			width: 750rpx;
+			height: 166rpx;
+			background: #FFFFFF;
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			padding: 18rpx 24rpx;
+			box-sizing: border-box;
+
+			.btn {
+				width: 702rpx;
+				height: 88rpx;
+				background: #F83224;
+				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;
+			}
+		}
+
+		.add {
+			width: 702rpx;
+			// height: 160rpx;
+			background: #FFFFFF;
+			border-radius: 16rpx;
+			padding: 24rpx;
+			box-sizing: border-box;
+
+			.addinfo {
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 400;
+				font-size: 24rpx;
+				color: #222222;
+				line-height: 34rpx;
+				text-align: left;
+				font-style: normal;
+			}
+
+			.name {
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 500;
+				font-size: 28rpx;
+				color: #333333;
+				line-height: 40rpx;
+				text-align: left;
+				font-style: normal;
+			}
+
+			.phone {
+				font-family: SFPro, SFPro;
+				font-weight: 400;
+				font-size: 24rpx;
+				color: #333333;
+				line-height: 28rpx;
+				text-align: left;
+				font-style: normal;
+				margin-left: 16rpx;
+			}
+		}
+
+		.history {
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 500;
+			font-size: 30rpx;
+			color: #333333;
+			line-height: 42rpx;
+			text-align: left;
+			font-style: normal;
+			margin: 28rpx 0 24rpx;
+		}
+
+		.info {
+			padding:  0 24rpx 28rpx;
+			box-sizing: border-box;
+			width: 702rpx;
+			// height: 742rpx;
+			background: #FFFFFF;
+			border-radius: 16rpx;
+
+			.clear {
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 400;
+				font-size: 24rpx;
+				color: #333333;
+				line-height: 34rpx;
+				text-align: left;
+				font-style: normal;
+			}
+
+			.item {
+				border-bottom: 2rpx solid rgba(151, 151, 151, 0.1);
+				height: 100rpx;
+				line-height: 100rpx;
+
+				.title {
+					font-family: PingFangSC, PingFang SC;
+					font-weight: 600;
+					font-size: 32rpx;
+					color: #333333;
+					line-height: 44rpx;
+					text-align: left;
+					font-style: normal;
+				}
+
+				.wx {
+					font-family: PingFangSC, PingFang SC;
+					font-weight: 400;
+					font-size: 24rpx;
+					color: #333333;
+					line-height: 34rpx;
+					text-align: left;
+					font-style: normal;
+				}
+
+				.left {
+					font-family: PingFangSC, PingFang SC;
+					font-weight: 400;
+					font-size: 28rpx;
+					color: #222222;
+					line-height: 40rpx;
+					text-align: left;
+					font-style: normal;
+					width: 115rpx;
+				}
+
+				.right {
+					font-family: PingFangSC, PingFang SC;
+					font-weight: 400;
+					font-size: 28rpx;
+					color: #222222;
+					line-height: 40rpx;
+					text-align: left;
+					font-style: normal;
+					margin-left: 60rpx;
+				}
+
+
+			}
+		}
+	}
+</style>

pages.json

@@ -22,7 +22,8 @@
 			"path": "pages/express/express",
 			"style": {
 				"navigationBarTitleText": "",
-				"enablePullDownRefresh": false
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
 			}
 		},
 		{
@@ -99,6 +100,42 @@
 						"enablePullDownRefresh": false,
 						"navigationStyle": "custom"
 					}
+				},
+				{
+					"path": "chat/chat",
+					"style": {
+						"navigationBarTitleText": "",
+						"enablePullDownRefresh": false
+					}
+				},
+				{
+					"path": "chat/news",
+					"style": {
+						"navigationBarTitleText": "消息",
+						"enablePullDownRefresh": false
+					}
+				},
+				{
+					"path": "service/service",
+					"style": {
+						"navigationBarTitleText": "",
+						"enablePullDownRefresh": false,
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "payorder",
+					"style": {
+						"navigationBarTitleText": "支付订单",
+						"enablePullDownRefresh": false
+					}
+				},
+				{
+					"path": "confirm",
+					"style": {
+						"navigationBarTitleText": "支付结果",
+						"enablePullDownRefresh": false
+					}
 				}
 			]
 		},
@@ -110,8 +147,83 @@
 						"navigationBarTitleText": "",
 						"enablePullDownRefresh": false
 					}
+				},
+				{
+					"path": "parcel",
+					"style": {
+						"navigationBarTitleText": "添加包裹",
+						"enablePullDownRefresh": false
+					}
+				},
+				{
+					"path": "delivery",
+					"style": {
+						"navigationBarTitleText": "",
+						"enablePullDownRefresh": false,
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "goods",
+					"style": {
+						"navigationBarTitleText": "物品信息",
+						"enablePullDownRefresh": false
+					}
+				},
+				{
+					"path": "Senderinfor",
+					"style": {
+						"navigationBarTitleText": "填写寄件人信息",
+						"enablePullDownRefresh": false
+					}
+				},
+				{
+					"path": "recipientinfo",
+					"style": {
+						"navigationBarTitleText": "填写收件人信息",
+						"enablePullDownRefresh": false
+					}
+				},
+				{
+					"path": "citychange",
+					"style": {
+						"navigationBarTitleText": "选择城市",
+						"enablePullDownRefresh": false
+					}
+				},
+				{
+					"path": "list/list",
+					"style": {
+						"navigationBarTitleText": "拼单列表",
+						"enablePullDownRefresh": false
+					}
+				},
+				{
+					"path" : "ParcelExpress",
+					"style" : 
+					{
+						"navigationBarTitleText" : "",
+						"enablePullDownRefresh" : false,
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path" : "account",
+					"style" : 
+					{
+						"navigationBarTitleText" : "",
+						"enablePullDownRefresh" : false,
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path" : "myPackage",
+					"style" : 
+					{
+						"navigationBarTitleText" : "我的包裹",
+						"enablePullDownRefresh" : false
+					}
 				}
-
 			]
 		},
 		{
@@ -134,10 +246,9 @@
 					}
 				},
 				{
-					"path" : "balanceDetail/balanceDetail",
-					"style" : 
-					{
-						"navigationBarTitleText" : "余额明细",
+					"path": "balanceDetail/balanceDetail",
+					"style": {
+						"navigationBarTitleText": "余额明细",
 						"backgroundColor": "#ffffff",
 						"app-plus": {
 							"background": "#ffffff"
@@ -145,83 +256,72 @@
 					}
 				},
 				{
-					"path" : "recharge/recharge",
-					"style" : 
-					{
-						"navigationBarTitleText" : "充值"
+					"path": "recharge/recharge",
+					"style": {
+						"navigationBarTitleText": "充值"
 					}
 				},
 				{
-					"path" : "withdrawal/withdrawal",
-					"style" : 
-					{
-						"navigationBarTitleText" : "余额提现"
+					"path": "withdrawal/withdrawal",
+					"style": {
+						"navigationBarTitleText": "余额提现"
 					}
 				},
 				{
-					"path" : "withdrawalDetail/withdrawalDetail",
-					"style" : 
-					{
-						"navigationBarTitleText" : "提现明细",
+					"path": "withdrawalDetail/withdrawalDetail",
+					"style": {
+						"navigationBarTitleText": "提现明细",
 						"backgroundColor": "#ffffff"
 					}
 				},
 				{
-					"path" : "ensureMoney/ensureMoney",
-					"style" : 
-					{
-						"navigationBarTitleText" : "保证金余额"
+					"path": "ensureMoney/ensureMoney",
+					"style": {
+						"navigationBarTitleText": "保证金余额"
 					}
 				},
 				{
-					"path" : "ensureExplain/ensureExplain",
-					"style" : 
-					{
-						"navigationBarTitleText" : "保证金说明"
+					"path": "ensureExplain/ensureExplain",
+					"style": {
+						"navigationBarTitleText": "保证金说明"
 					}
 				},
 				{
-					"path" : "mineFollow/mineFollow",
-					"style" : 
-					{
-						"navigationBarTitleText" : "",
+					"path": "mineFollow/mineFollow",
+					"style": {
+						"navigationBarTitleText": "",
 						"navigationStyle": "custom"
 					}
-					
+
 				},
 				{
-					"path" : "accountSetup/accountSetup",
-					"style" : 
-					{
-						"navigationBarTitleText" : "账号设置"
+					"path": "accountSetup/accountSetup",
+					"style": {
+						"navigationBarTitleText": "账号设置"
 					}
 				},
 				{
-					"path" : "switchLanguage/switchLanguage",
-					"style" : 
-					{
-						"navigationBarTitleText" : "切换语言"
+					"path": "switchLanguage/switchLanguage",
+					"style": {
+						"navigationBarTitleText": "切换语言"
 					}
 				},
 				{
-					"path" : "personalInformation/personalInformation",
-					"style" : 
-					{
-						"navigationBarTitleText" : "个人信息"
+					"path": "personalInformation/personalInformation",
+					"style": {
+						"navigationBarTitleText": "个人信息"
 					}
 				},
 				{
-					"path" : "editName/editName",
-					"style" : 
-					{
-						"navigationBarTitleText" : ""
+					"path": "editName/editName",
+					"style": {
+						"navigationBarTitleText": ""
 					}
 				},
 				{
-					"path" : "addressManagement/addressManagement",
-					"style" : 
-					{
-						"navigationBarTitleText" : ""
+					"path": "addressManagement/addressManagement",
+					"style": {
+						"navigationBarTitleText": ""
 					}
 				}
 			]

pages/express/express.vue

@@ -1,7 +1,198 @@
 <template>
-	<!-- 快递 -->
-	<view>
-
+	<!-- 商城 -->
+	<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(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;">
+					<image src="../../static/images/index/xiaoxi.png" mode="" style="width: 40rpx;height: 40rpx;">
+					</image>
+					<image 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 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 class="u-row-between " style="">
+							<view class="pople">新建寄件人</view>
+							<view class="jiadd" style="margin-top: 14rpx;">点击填写寄件地址信息</view>
+						</view>
+						<view class="u-flex">
+							<view class="" style="color: rgba(151, 151, 151, 1);">|</view>
+							<text class="right">地址簿</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 class="u-row-between " style="">
+							<view class="pople">新建收件人</view>
+							<view class="jiadd" style="margin-top: 14rpx;">点击填写寄件地址信息</view>
+						</view>
+						<view class="u-flex">
+							<view class="" style="color: rgba(151, 151, 151, 1);">|</view>
+							<text class="right">地址簿</text>
+						</view>
+					</view>
+				</view>
+				<!-- 物品信息 -->
+				<view class="info u-flex u-row-between">
+					<view class="u-flex">
+						<text class="wupin">物品信息</text>
+						<view class="mast">必填</view>
+					</view>
+					<view class="u-flex">
+						<text class="change">请选择物品信息</text>
+						<image src="../../static/express/next1.png"
+							style="width: 28rpx;height: 28rpx;margin-left: 6rpx;" mode=""></image>
+					</view>
+				</view>
+				<!-- 跨境物流 -->
+				<view class="info u-flex u-row-between">
+					<view class="u-flex">
+						<text class="wupin">跨境物流</text>
+					</view>
+					<view class="u-flex">
+						<text class="change" style="color: rgba(248, 50, 36, 1);">请选择</text>
+						<image 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">
+						去寄件
+					</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">分享给好友</text>
+					</view>
+					<view class="friend">|</view>
+					<view class="u-flex">
+						<image src="/static/images/index/compile.png" style="width: 36rpx;height: 36rpx;" mode="">
+						</image>
+						<text class="friend">物流计算器</text>
+					</view>
+				</view>
+			</view>
+			<!-- 我的包裹 -->
+			<view class="parcel">
+				<view class="u-flex u-row-between">
+					<view class="myparcel">
+						<text>我的</text>
+						<text style="color: rgba(248, 50, 36, 1);">包裹</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">添加寄往中转点包裹</text>
+					</view>
+				</view>
+				<view class="u-flex u-row-around" style="margin-top: 44rpx;">
+					<view class="flexc" style="position: relative;">
+						<!-- <view class="" style="position: absolute;top: 0;right: 0;"> -->
+						<u-badge :absolute='true' :offset="[0,10]" :type="type" max="99" :value="value"></u-badge>
+						<!-- </view> -->
+						<image src="/static/express/address.png" style='width:68rpx;height:68rpx' mode=""></image>
+						<text style='margin-top:16rpx'>发往中转点</text>
+					</view>
+					<view class="flexc" style="position: relative;">
+						<u-badge :absolute='true' :offset="[0,10]" :type="type" max="99" :value="value"></u-badge>
+						<image src="/static/express/sign.png" style='width:68rpx;height:68rpx' mode=""></image>
+						<text style='margin-top:16rpx'>中转已签收</text>
+					</view>
+					<view class="flexc" style="position: relative;">
+						<u-badge :absolute='true' :offset="[0,10]" :type="type" max="99" :value="value"></u-badge>
+						<image src="../../static/express/send.png" style='width:68rpx;height:68rpx' mode=""></image>
+						<text style='margin-top:16rpx'>正发往海外</text>
+					</view>
+				</view>
+			</view>
+			<!-- 拼包 -->
+			<view class="u-flex u-row-between" style="margin-top: 32rpx;">
+				<view class="u-flex">
+					<text class="hai">拼包发海外</text>
+					<image style="width: 180rpx;height: 32rpx;" src="/static/express/label.png" mode=""></image>
+				</view>
+				<view class="u-flex">
+					<text class="more">更多</text>
+					<image src="../../static/express/next2.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
+				</view>
+			</view>
+			<!-- 拼包数据 -->
+			<view class="label">
+				<view class="" style="display: flex;">
+					<view class="left flexc">
+						<text class="bourn">目的地</text>
+						<view class="addres">澳大利亚</view>
+					</view>
+					<view class="" style="flex: 1;margin-left: 20rpx;">
+						<view class="u-flex u-row-between">
+							<view class="">
+								<text class='bigtitle'>特殊包裹</text>
+								<text style="margin: 0 8rpx;">|</text>
+								<text class='bigtitle'>海运散货</text>
+							</view>
+							<view class="mon">
+								<text class="timeb">单价</text>
+								<text>￥</text>
+								<text style="font-size: 32rpx;">28</text>
+								<text>.00</text>
+							</view>
+						</view>
+						<view class="" style="margin-top: 34rpx;">
+							<u-line-progress activeColor='rgba(255, 21, 21, 1)' :percentage="percentage" 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'>已拼 </text>
+									<text class='timeb' style='color:rgba(255, 21, 21, 1)'>200kg</text>
+								</view>
+								<text style="margin: 0 8rpx;">|</text>
+								<view class="">
+									<text class='timeb'>剩余重量 </text>
+									<text class='timeb' style='color:rgba(255, 21, 21, 1)'>400kg</text>
+								</view>
+							</view>
+							<view class="">
+								<text class="timeb">进度50%</text>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="u-flex u-row-between" style="margin-top: 32rpx;">
+					<text class="timea">开始时间：2023-12-31/截止时间：2023-12-31</text>
+					<view class="pinb">去拼包</view>
+				</view>
+			</view>
+		</view>
 		<kj-tabbar :value1=0></kj-tabbar>
 	</view>
 </template>
@@ -10,12 +201,329 @@
 	export default {
 		data() {
 			return {
-				
-			};
+				//顶部分段器
+				list: ['跨境速递', '商城'],
+				current: 0,
+				type: "error",
+				value: 1, //徽标数量
+				percentage: 50, //进度条
+			}
+		},
+		onLoad(options) {
+			if (options.current) {
+				this.current = options.current
+			}
+		},
+		methods: {
+			//分段器切换
+			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">
+<style lang="scss" scoped>
+	.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;
+		}
 
-</style>
+		.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;
+			}
+		}
+
+		.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>

pages/index/index.vue

@@ -129,7 +129,8 @@
 					</view>
 				</view>
 				<view class="u-flex u-row-between" style="flex-wrap: wrap;">
-					<view class="bigbox" v-for="(item,index) in 6" style="position: relative;height: 556rpx;" @click="todetail">
+					<view class="bigbox" v-for="(item,index) in 6" style="position: relative;height: 556rpx;"
+						@click="todetail">
 						<image src="../../static/images/index/discount.png"
 							style="width: 60rpx;height: 36rpx;position: absolute;left: 12rpx;top: 12rpx;" mode="">
 						</image>
@@ -202,19 +203,27 @@
 				show: true
 			}
 		},
-		onLoad() {
-
+		onLoad(options) {
+			if(options.current){
+				this.current = options.current
+			}
 		},
 		methods: {
 			//分段器切换
 			sectionChange(index) {
 				this.current = index;
 				console.log(index);
+				if (this.current == 0) {
+					uni.switchTab({
+						url: '/pages/express/express?current=0'
+					})
+					this.current = 1
+				}
 			},
 			//详情
-			todetail(){
+			todetail() {
 				uni.navigateTo({
-					url:'/pageA/productdetails'
+					url: '/pageA/productdetails'
 				})
 			}
 		}
@@ -258,7 +267,6 @@
 		line-height: 28rpx;
 		text-align: left;
 		font-style: normal;
-
 	}
 
 	.money {

uni_modules/liu-indexed-list/changelog.md

@@ -0,0 +1,18 @@
+## 1.0.8（2023-06-09）
+增加预览
+## 1.0.7（2023-05-31）
+增加license
+## 1.0.6（2023-05-31）
+增加license
+## 1.0.5（2023-05-31）
+优化回到顶部
+## 1.0.4（2023-05-25）
+隐藏滚动条
+## 1.0.3（2023-05-18）
+优化
+## 1.0.2（2023-05-18）
+增加示例
+## 1.0.1（2023-05-18）
+增加示例
+## 1.0.0（2023-05-18）
+初始化发布

uni_modules/liu-indexed-list/components/liu-indexed-list/liu-indexed-list.vue

@@ -0,0 +1,390 @@
+<template>
+	<view class="liu-list">
+		<scroll-view class="liu-scroll-left" scroll-y="true" :scroll-with-animation="true"
+			:scroll-into-view="scrollIntoView">
+			<view class="liu-search" id="TOP">
+				<image class="liu-search-img" src="../../static/search.png"></image>
+				<input class="liu-input" @input="search" v-model="searchStr" placeholder="请输入国家或地区中文名称" maxlength="50"
+					placeholder-class="liu-placeholder" />
+			</view>
+			<view class="" style="padding: 24rpx ;background-color: #fff;">
+				<view class="use">最近使用</view>
+				<view class="" style="margin-top: 24rpx;">
+					<view class="item" style="display: inline; " @click="tosearch">
+						马拉西亚
+					</view>
+				</view>
+			</view>
+			<view class="left-list" v-for="(item,index) of scrollLeftObj" :key="index" :id="index!='#'?index:'BOTTOM'">
+				<view class="left-item-title" v-if="item && item.length">{{index}}</view>
+				<view class="left-item-card" v-for="(mess,inx) in item" @click.stop="chooseItem(mess)">
+					<image :style="'border-radius:'+radius" class="left-item-card-img img-info" :src="mess[imgKey]"
+						v-if="mess[imgKey]" @click.stop="preview(mess[imgKey])"></image>
+					<view :style="'border-radius:'+radius" class="left-item-card-img" v-else>
+						{{mess[nameKey] && mess[nameKey].slice(0,1) || ''}}
+					</view>
+					<view class="left-item-card-info"
+						:style="inx<item.length-1?'border-bottom: solid #F4F4F4 1rpx;':''">
+						<view class="left-item-card-name">{{mess[nameKey] || ''}}</view>
+						<view class="left-item-card-phone" v-if="mess[phoneKey]">{{mess[phoneKey]}}</view>
+					</view>
+				</view>
+			</view>
+			<view class="no-data" v-if="!hasData">
+				<image class="no-data-img" src="../../static/noData.png"></image>
+				<view class="no-data-name">暂无数据</view>
+			</view>
+		</scroll-view>
+		<view class="liu-scroll-right" v-if="hasData">
+			<image class="liu-scroll-right-top" src="../../static/top.png" @click.stop="scrollIntoView = 'TOP'"></image>
+			<view :class="{'liu-scroll-right-name':true,'liu-scroll-right-select':item==scrollIntoView}"
+				v-for="(item,index) in scrollRightList" :key="index" @click.stop="chooseType(item)">{{item}}
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		pinyinUtil
+	} from './pinyinUtil.js';
+	export default {
+		props: {
+			//数据源
+			dataList: {
+				type: Array,
+				required: true,
+				default: () => {
+					return []
+				}
+			},
+			//显示的主键key值
+			idKey: {
+				type: String,
+				default: 'id'
+			},
+			//显示的名字key值
+			nameKey: {
+				type: String,
+				default: 'name'
+			},
+			//显示的电话key值
+			phoneKey: {
+				type: String,
+				default: 'phone'
+			},
+			//显示的头像key值
+			imgKey: {
+				type: String,
+				default: 'img'
+			},
+			//头像圆角(rpx、px、%)
+			radius: {
+				type: String,
+				default: '6rpx'
+			},
+		},
+		data() {
+			return {
+				searchStr: '',
+				scrollIntoView: '',
+				scrollLeftObj: {},
+				oldObj: {},
+				scrollRightList: [],
+				hasData: true
+			};
+		},
+		watch: {
+			dataList: {
+				immediate: true,
+				deep: true,
+				handler(newList) {
+					if (newList && newList.length) this.cleanData(newList)
+				},
+			},
+		},
+		methods: {
+			tosearch(){
+				this.searchStr = 111
+				this.search()
+			},
+			search() {
+				if (this.searchStr) {
+					let has = false
+					this.scrollLeftObj = JSON.parse(JSON.stringify(this.oldObj))
+					for (let i in this.scrollLeftObj) {
+						this.scrollLeftObj[i] = this.scrollLeftObj[i].filter(item => {
+							return (item[this.nameKey].indexOf(this.searchStr) != -1) || item[this.phoneKey]
+								.indexOf(this.searchStr) != -1
+						})
+						if (this.scrollLeftObj[i].length) has = true
+					}
+					if (has) this.hasData = true
+					else this.hasData = false
+				} else {
+					this.hasData = true
+					this.scrollLeftObj = JSON.parse(JSON.stringify(this.oldObj))
+				}
+			},
+			cleanData(list) {
+				this.scrollRightList = this.getLetter()
+				let newList = []
+				list.forEach(res => {
+					let initial = pinyinUtil.getFirstLetter(res.name.trim())
+					let firsfirs = initial ? initial.substring(0, 1) : ''
+					if (!newList[firsfirs]) newList[firsfirs] = []
+					newList[firsfirs].push({
+						[this.idKey]: res[this.idKey] || '',
+						[this.nameKey]: res[this.nameKey].trim() || '',
+						[this.phoneKey]: res[this.phoneKey] || '',
+						[this.imgKey]: res[this.imgKey] || ''
+					})
+				})
+				this.scrollRightList.forEach(t => {
+					if (newList[t]) {
+						this.$set(this.scrollLeftObj, t, newList[t])
+					} else {
+						this.$set(this.scrollLeftObj, t, [])
+					}
+				})
+				let surplusList = []
+				for (var i in newList) {
+					let han = this.scrollRightList.find(v => {
+						return v == i
+					})
+					if (!han) surplusList.push(newList[i])
+				}
+				surplusList.forEach(item => {
+					this.scrollLeftObj['#'] = this.scrollLeftObj['#'].concat(item)
+				})
+				this.oldObj = JSON.parse(JSON.stringify(this.scrollLeftObj))
+			},
+			getLetter() {
+				let list = []
+				for (var i = 0; i < 26; i++) {
+					list.push(String.fromCharCode(65 + i))
+				}
+				list.push('#')
+				return list
+			},
+			chooseType(item) {
+				if (item == '#') item = 'BOTTOM'
+				this.scrollIntoView = item
+			},
+			preview(img) {
+				uni.previewImage({
+					current: 0,
+					urls: [img]
+				})
+			},
+			chooseItem(item) {
+				this.$emit('click', item)
+			}
+		},
+	};
+</script>
+<style>
+	/deep/ ::-webkit-scrollbar {
+		width: 0;
+		height: 0;
+		color: transparent;
+		display: none;
+	}
+</style>
+<style lang="scss" scoped>
+	.use {
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 400;
+		font-size: 28rpx;
+		color: #222222;
+		line-height: 40rpx;
+		text-align: left;
+		font-style: normal;
+	}
+
+	.item {
+		// width: 128rpx;
+		padding: 10rpx 36rpx;
+		height: 60rpx;
+		background: #F5F5F5;
+		border-radius: 30rpx;
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 400;
+		font-size: 28rpx;
+		color: #222222;
+		line-height: 60rpx;
+		text-align: center;
+		font-style: normal;
+	}
+
+	.liu-list {
+		width: 100%;
+		height: 100vh;
+		background-color: #F4F4F4;
+		box-sizing: border-box;
+		padding-top: 1px;
+
+		.liu-scroll-left {
+			height: 100%;
+
+			.liu-search {
+				width: 100%;
+				height: 106rpx;
+				background-color: #FFFFFF;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				position: relative;
+
+				.liu-search-img {
+					width: 32rpx;
+					height: 32rpx;
+					position: absolute;
+					left: 64rpx;
+				}
+
+				.liu-input {
+					width: calc(100% - 64rpx);
+					height: 72rpx;
+					background: #EEEEEE;
+					border-radius: 36rpx;
+					padding: 0 32rpx 0 80rpx;
+					box-sizing: border-box;
+					color: #333333;
+				}
+
+				.liu-placeholder {
+					color: #777777;
+				}
+			}
+
+			.left-list {
+				height: auto;
+
+				.left-item-title {
+					width: calc(100% - 24rpx);
+					height: 60rpx;
+					padding-left: 24rpx;
+					text-align: left;
+					line-height: 60rpx;
+					font-size: 30rpx;
+					color: #666666;
+				}
+
+				.left-item-card {
+					width: 100%;
+					height: 112rpx;
+					background-color: #FFFFFF;
+					box-sizing: border-box;
+					padding-left: 24rpx;
+					display: flex;
+					align-items: center;
+					justify-content: flex-start;
+
+					.left-item-card-img {
+						width: 80rpx;
+						min-width: 80rpx;
+						height: 80rpx;
+						background-color: #CFCFCF;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						font-size: 36rpx;
+						font-weight: bold;
+						color: #FFFFFF;
+					}
+
+					.img-info {
+						background: none;
+						border: solid #f0f0f0 1rpx;
+					}
+
+					.left-item-card-info {
+						width: 100%;
+						margin-left: 32rpx;
+						height: 100%;
+						display: flex;
+						align-items: flex-start;
+						justify-content: center;
+						flex-direction: column;
+
+						.left-item-card-name {
+							font-size: 30rpx;
+							line-height: 30rpx;
+							color: #333333;
+						}
+
+						.left-item-card-phone {
+							margin-top: 14rpx;
+							font-size: 28rpx;
+							line-height: 28rpx;
+							color: #999999;
+						}
+					}
+				}
+			}
+
+			.no-data {
+				width: 100%;
+				display: flex;
+				align-items: center;
+				justify-items: center;
+				flex-direction: column;
+				margin-top: 25%;
+
+				.no-data-img {
+					width: 200rpx;
+					height: 200rpx;
+				}
+
+				.no-data-name {
+					margin-top: 20rpx;
+					font-size: 28rpx;
+					color: #666666;
+				}
+			}
+		}
+
+		.liu-scroll-right {
+			position: fixed;
+			right: 0rpx;
+			top: 50%;
+			transform: translateY(-47%);
+			z-index: 999 !important;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-direction: column;
+
+			.liu-scroll-right-top {
+				width: 32rpx;
+				height: 32rpx;
+				margin-right: 14rpx;
+				z-index: 999 !important;
+			}
+
+			.liu-scroll-right-name {
+				width: 32rpx;
+				padding-right: 14rpx;
+				height: 28rpx;
+				font-size: 22rpx;
+				color: #333333;
+				line-height: 22rpx;
+				margin-top: 8rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			.liu-scroll-right-select {
+				padding: 0;
+				margin-right: 14rpx;
+				width: 28rpx;
+				height: 28rpx;
+				border-radius: 50%;
+				background: #2991FF;
+				color: #FFFFFF;
+			}
+		}
+	}
+</style>

uni_modules/liu-indexed-list/license.md

@@ -0,0 +1,6 @@
+### 1、本插件可免费下载使用；
+### 2、未经许可，严禁复制本插件派生同类插件上传插件市场；
+### 3、未经许可，严禁在插件市场恶意复制抄袭本插件进行违规获利;
+### 4、对本软件的任何使用都必须遵守这些条款，违反这些条款的个人或组织将面临法律追究。
+
+

uni_modules/liu-indexed-list/package.json

@@ -0,0 +1,85 @@
+{
+	"id": "liu-indexed-list",
+	"displayName": "通讯录、城市、地址索引列表",
+	"version": "1.0.8",
+	"description": "通讯录、城市、地址索引列表组件，自带搜索功能，可自定义显示字段，用于通讯录列表、城市列表、地址列表等",
+	"keywords": [
+        "通讯录",
+        "索引列表",
+        "索引",
+        "地址",
+        "城市"
+    ],
+	"repository": "",
+	"engines": {
+		"HBuilderX": "^3.1.0"
+	},
+	"dcloudext": {
+		"type": "component-vue",
+		"sale": {
+			"regular": {
+				"price": "0.00"
+			},
+			"sourcecode": {
+				"price": "0.00"
+			}
+		},
+		"contact": {
+			"qq": ""
+		},
+		"declaration": {
+			"ads": "无",
+			"data": "无",
+			"permissions": "无"
+		},
+		"npmurl": ""
+	},
+	"uni_modules": {
+		"dependencies": [],
+		"encrypt": [],
+		"platforms": {
+			"cloud": {
+				"tcb": "y",
+				"aliyun": "y"
+			},
+			"client": {
+				"Vue": {
+					"vue2": "y",
+					"vue3": "u"
+				},
+				"App": {
+					"app-vue": "u",
+					"app-nvue": "u"
+				},
+				"H5-mobile": {
+					"Safari": "y",
+					"Android Browser": "y",
+					"微信浏览器(Android)": "y",
+					"QQ浏览器(Android)": "y"
+				},
+				"H5-pc": {
+					"Chrome": "u",
+					"IE": "u",
+					"Edge": "u",
+					"Firefox": "u",
+					"Safari": "u"
+				},
+				"小程序": {
+					"微信": "y",
+					"阿里": "u",
+					"百度": "u",
+					"字节跳动": "u",
+					"QQ": "u",
+					"钉钉": "u",
+					"快手": "u",
+					"飞书": "u",
+					"京东": "u"
+				},
+				"快应用": {
+					"华为": "u",
+					"联盟": "u"
+				}
+			}
+		}
+	}
+}

uni_modules/liu-indexed-list/readme.md

@@ -0,0 +1,95 @@
+# liu-indexed-list适用于uni-app项目的通讯录、城市、地址索引列表组件
+### 本组件目前兼容微信小程序、H5
+### 本组件是通讯录、城市、地址索引列表组件，自带搜索功能，可自定义显示字段，用于通讯录列表、城市列表、地址列表等
+# --- 扫码预览、关注我们 ---
+
+## 扫码关注公众号，查看更多插件信息，预览插件效果！ 
+
+![](https://uni.ckapi.pro/uniapp/publicize.png)
+
+### 使用示例
+``` 
+<template>
+	<view class="page-main">
+		<liu-indexed-list :dataList="dataList" @click="click"></liu-indexed-list>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				dataList: [{
+					id: '1',
+					name: '刘**',
+					phone: '181****5576',
+					img: 'https://cdn.pixabay.com/photo/2022/03/31/14/53/camp-7103189_1280.png'
+				}, {
+					id: '2',
+					name: '税**',
+					phone: '181****5576',
+					img: 'https://cdn.pixabay.com/photo/2021/07/22/11/25/rabbit-6485072_1280.jpg'
+				}, {
+					id: '3',
+					name: '柴**',
+					phone: '181****5576',
+					img: 'https://cdn.pixabay.com/photo/2020/05/19/13/35/cartoon-5190860_1280.jpg'
+				}, {
+					id: '4',
+					name: '王**',
+					phone: '181****5576',
+					img: 'https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg'
+				}, {
+					id: '5',
+					name: '马**',
+					phone: '181****5576',
+					img: 'https://cdn.pixabay.com/photo/2023/03/07/12/45/child-7835677_1280.jpg'
+				}, {
+					id: '6',
+					name: '韩**',
+					phone: '181****5576',
+					img: 'https://cdn.pixabay.com/photo/2022/11/29/19/05/boho-7625140_1280.jpg'
+				}, {
+					id: '7',
+					name: '张**',
+					phone: '181****5576',
+					img: 'https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg'
+				}, {
+					id: '8',
+					name: '王**',
+					phone: '181****5576',
+					img: 'https://cdn.pixabay.com/photo/2020/05/19/13/35/cartoon-5190860_1280.jpg'
+				}, {
+					id: '9',
+					name: '张**',
+					phone: '18198045576',
+					img: 'https://cdn.pixabay.com/photo/2021/07/22/11/25/rabbit-6485072_1280.jpg'
+				}, {
+					id: '10',
+					name: '李**',
+					phone: '181****5576',
+					img: 'https://cdn.pixabay.com/photo/2022/03/31/14/53/camp-7103189_1280.png'
+				}]
+			}
+		},
+		methods: {
+			//点击列表回调事件
+			click(e) {
+				console.log('点击列表回调：', e)
+			}
+		}
+	}
+</script>
+```
+
+### 属性说明
+| 名称                         | 类型            | 默认值                 | 描述             |
+| ----------------------------|--------------- | ---------------------- | ---------------|
+| dataList                    | Array          | []                     | 数据源
+| idKey                       | String         | id                     | 显示的主键key值
+| nameKey                     | String         | name                   | 显示的名字key值
+| phoneKey                    | String         | phone                  | 显示的电话key值
+| imgKey                      | String         | img                    | 显示的头像key值
+| radius                      | Number         | 4rpx                   | 头像圆角(rpx、px、%)
+| @click                      | Function       |                        | 点击列表回调事件
+