emis-sapp/pages/tabBar/sending/sending.vue

<template>
	<tpx-page>
		<view style="position: relative;background-color: #fff;">
			<view class="customer_nav_bar">
			   <!-- 这里是状态栏 -->
			</view>
			<image class="hdbg" :src="getCdnUrl(`sdg/hdbg.png`)"/>
			<view class="pg-container">
				<view class="header" >
					<u-text size="40" :bold="true" text="探路物流 速运全球" color="#fff"></u-text>
					<u-text margin="22rpx 0 0 0" size="24" :bold="true" text="省钱，省时，省力" color="#fff"></u-text>
					<button class="btn-ljyy" type="primary">立即预约</button>
					<view class="btnlist1">
						<u-row>
							<u-col v-for="(mbItem, mIndex) in mainBtnlist" span="6" align="center" @click="goto(mbItem.url)">
								<view :class="'mb-item ' + (mIndex+1 == mainBtnlist.length ?'noborder': '') ">
									<u-row align="center" justify="center">
										<image class="tb1" style="width: 92rpx;height: 73rpx;" :src="mbItem.icon"/>
										<view class="neirong">
											<u-text size="32" :bold="true" color="#fff" :text="mbItem.title"></u-text>
											<u-text size="22" margin="15rpx 0 0 0" color="#999" :text="mbItem.subTitle"></u-text>
										</view>
									</u-row>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
				
				<view class="pbody">
					<view class="btnlist2">
						<u-row gutter="20" custom-style="flex-wrap: wrap;">
							<u-col v-for="tlItem in toolBtnlist" span="6" @click="handleToolItemClict(tlItem)">
								<view style="margin: 0 0 20rpx 0;background: #F6F6F6;padding: 30rpx 28rpx;border-radius: 20rpx;position: relative;">
									<u-row justify="between" >
										<view class="neirong">
											<u-text size="28" :bold="true" color="#0E0708" :text="tlItem.title"></u-text>
											<u-text size="22" margin="15rpx 0 0 0" color="#999" :text="tlItem.subTitle"></u-text>
										</view>
										<image :src="tlItem.icon" style="height: 50rpx; width: 50rpx;" mode="aspectFit"/>
									</u-row>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
				
				<!-- #ifdef MP-WEIXIN  -->
				<view class="pfoot">
					<u-row v-if="showFollow" justify="between">
						<u-text size="24" color="#fff" text="关注探路者官方公众号，实时接收物流信息"></u-text>
						<u-button type="primary" custom-style="width: 120rpx;border-radius: 30rpx;margin: 0;font-size: 26rpx;" size="mini">去关注</u-button>
					</u-row>
					<official-account style="opacity: 0;" class="pos-abt-all" @load="officialOnload" @error="officialOnError"></official-account>
				</view>
				<!-- #endif -->
				
			</view>
		</view>
	</tpx-page>
</template>
<script>
	
	import getCdnUrl from "@/common/getCdnUrl"
	import { goto, scanCode } from "@/common/untool"
	
	export default {
		props: {
			// hasLeftWin: {
			// 	type: Boolean
			// }
		},
		data() {
			return {
				mainBtnlist: [
					{  title: '下单寄件', subTitle: "上门揽件/寄仓库", icon: getCdnUrl(`sdg/btn-send.png`), url: 'post/post' },
					{  title: '专属小哥', subTitle: "下单给专属业务员", icon: getCdnUrl(`sdg/btn-bindbr.png`), url: 'user/exclusiveCourier' }
				],
				toolBtnlist: [
					{  title: '进仓单', subTitle: "货物进仓信息", icon: getCdnUrl(`sdg/t-jcd.png`), url: 'warehousing/list' },
					{  title: '运费时效', subTitle: "运费预估，时效查看", icon: getCdnUrl(`sdg/t-shisuan.png`), url: 'post/freightCalculate' },
					{  title: '运单列表', subTitle: "寄件，收件运单", icon: getCdnUrl(`sdg/t-dingdan.png`), url: 'tabBar/search/search' },
					{  title: '网点查询', subTitle: "查看收寄件网点", icon: getCdnUrl(`sdg/t-wangdain.png`), url: 'service/list' },
					{  title: '地址簿', subTitle: "收件 寄件地址管理", icon: getCdnUrl(`sdg/t-dizhi.png`), url: 'address/list' },
					{  title: '信息速递', subTitle: "快递信息列表", icon: getCdnUrl(`sdg/t-xuzhi.png`), url: 'service/articlelist' },
					// {  title: 'HSCODE', subTitle: "海关归类信息", icon: getCdnUrl(`sdg/t-HS.png`), url: '' },
					// {  title: 'RECP', subTitle: "优惠税率安排查询", icon: getCdnUrl(`sdg/t-RE.png`), url: '' },
					{  title: '扫码寄件', subTitle: "扫描条码发货", icon: getCdnUrl(`sdg/t-saoma.png`), url: 'action:smjj' },
					{  title: '快递查询', subTitle: "快递单跟踪查询", icon: getCdnUrl(`sdg/t-yundan.png`), url: 'post/query' },
				],
				showFollow: true // TODO!
			}
		},
		onShareAppMessage() {
			return {
				title: '探路物流 速运全球',
				// path: 'TODO'
			}
		},
		methods: {
			getCdnUrl,
			goto,
			async handleToolItemClict(item) {
				if(item.url == 'action:smjj') {
					const code = await scanCode()
				} else {
					goto(item.url)
				}
			},
			officialOnload(e) {
				console.log('公众号组件加载成功===', e.detail.status)
			},
			officialOnError(e) {
				console.log('公众号组件加载失败===', e.detail.status)
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/uni-nvue.scss';
</style>
<style scoped lang="scss">
	.hdbg{
		position: absolute;
		top: 0;
		z-index: 1;
		width: 100%;
		height: 720rpx;
	}
	.pg-container{
		position: relative;
		z-index: 2;
		overflow-x: hidden;
	}
	.header{
		padding: 0 28rpx;
		.btn-ljyy{
			margin-left: 0;
			width: 144rpx;
			margin-top: 40rpx;
			box-sizing: content-box;
			background: #FFF;
			border-radius: 21rpx;
			font-size: 24rpx;
			color: #B12D29;
			padding: 8rpx 0;
			text-align: center;
			line-height: normal;
			border: 0;
			&::after{
				border: 0;
			}
		}
		
		.btnlist1 {
			margin-top: 38rpx;
			background: linear-gradient(0deg, #1D1818 0%, #0E0708 100%);
			border-radius: 30rpx 30rpx 0rpx 0rpx;
			padding: 36rpx 24rpx 22rpx 24rpx;
			
		}
	}
	.mb-item{
		width: 100%;
		position: relative;
		border-right: 2rpx solid rgba(255,255,255,0.5);
		&.noborder{
			border-right: 0;
		}
	}
	.pbody{
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 40rpx 28rpx 100rpx 28rpx;
		.btnlist2{
			
			.neirong{
				margin-left: 22rpx;
			}
		}
	}
	.pfoot {
		position: fixed;
		bottom: 20rpx;
		left: 28rpx;
		right: 28rpx;
		padding: 20rpx 8rpx 20rpx 26rpx;
		background: #0E0708;
		border-radius: 36rpx;
	}
</style>