emis-app/pages/tabBar/deal/deal.vue

<template>
	<view>
		<view class="dl-head">操作</view>
		
		<view class="dl-blcok">
			<view class="font-32 font-weight">网点发件</view>
			<view class="mt-10">
				<u-row justify="start" gutter="18" custom-style="flex-wrap: wrap;">
					<u-col v-for="(item, index) in faBtnlist" span="3">
						<view class="dlb-item">
							<u-image height="80" width="80" :src="item.icon"></u-image>
							<view class="pt-10">{{item.title}}</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		
		<view class="dl-blcok">
			<view class="font-32 font-weight">网点到件</view>
			<view class="mt-10">
				<u-row justify="start" gutter="18" custom-style="flex-wrap: wrap;">
					<u-col v-for="(item, index) in daoBtnlist" span="3">
						<view class="dlb-item">
							<u-image height="80" width="80" :src="item.icon"></u-image>
							<view class="pt-10">{{item.title}}</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</view> 
		
		<view class="dl-blcok">
			<view class="font-32 font-weight">其他</view>
			<view class="mt-10">
				<u-row justify="start" gutter="18"  custom-style="flex-wrap: wrap;">
					<u-col v-for="(item, index) in otherBtnlist" span="3">
						<view class="dlb-item">
							<u-image height="80" width="80" :src="item.icon"></u-image>
							<view class="pt-10">{{item.title}}</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
	</view>
</template>
<script>
	import getCdnUrl from "@/common/getCdnUrl"
	import { goto } from "@/common/untool"
	export default {
		props: {
			// hasLeftWin: {
			// 	type: Boolean
			// }
		},
		data() {
			return {
				
				faBtnlist: [
					{  title: '运单录入', subTitle: "", icon: getCdnUrl(`home/ydluru.png`), url: '' },
					{  title: '揽收扫描', subTitle: "", icon: getCdnUrl(`home/lshsm.png`), url: '' },
					{  title: '发件扫描', subTitle: "", icon: getCdnUrl(`home/fajiansm.png`), url: '' },
					{  title: '合包扫描', subTitle: "", icon: getCdnUrl(`home/hebaosm.png`), url: '' },
					{  title: '运单修改', subTitle: "", icon: getCdnUrl(`home/ydxiugai.png`), url: '' },
					{  title: '收货入库', subTitle: "", icon: getCdnUrl(`home/shhruku.png`), url: '' },
					{  title: '发件清单', subTitle: "", icon: getCdnUrl(`home/fjqingdan.png`), url: 'fjqingdan.png' },
					{  title: '拆包扫描', subTitle: "", icon: getCdnUrl(`home/chaibsm.png`), url: 'chaibsm.png' },
					{  title: '报关扫描', subTitle: "", icon: getCdnUrl(`home/baogsm.png`), url: 'baogsm.png' },
					{  title: '清关扫描', subTitle: "", icon: getCdnUrl(`home/qinggsm.png`), url: 'qinggsm.png' },
					{  title: '装车扫描', subTitle: "", icon: getCdnUrl(`home/zhuangchesm.png`), url: 'zhuangchesm.png' },
					{  title: '面单补打', subTitle: "", icon: getCdnUrl(`home/mdbuda.png`), url: '' }
				],
				daoBtnlist: [
					{  title: '到件扫描', subTitle: "", icon: getCdnUrl(`home/daohsm.png`), url: '' },
					{  title: '派件扫描', subTitle: "", icon: getCdnUrl(`home/paijsm.png`), url: '' },
					{  title: '签收扫描', subTitle: "", icon: getCdnUrl(`home/qianshsm.png`), url: '' },
					{  title: '到派扫描', subTitle: "", icon: getCdnUrl(`home/daojsm.png`), url: '' },
					{  title: '卸车扫描', subTitle: "", icon: getCdnUrl(`home/xiechesm.png`), url: '' },
					{  title: '到件清单', subTitle: "", icon: getCdnUrl(`home/daojqd.png`), url: '' },
					{  title: '派件清单', subTitle: "", icon: getCdnUrl(`home/paijqd.png`), url: '' },
					{  title: '留仓扫描', subTitle: "", icon: getCdnUrl(`home/licsm.png`), url: '' },
					{  title: '转件扫描', subTitle: "", icon: getCdnUrl(`home/zhuanjsm.png`), url: '' },
					{  title: '进仓查询', subTitle: "", icon: getCdnUrl(`home/jincchx.png`), url: '' }
				],
				otherBtnlist: [
					{  title: '运单查询', subTitle: "", icon: getCdnUrl(`home/kdchxun.png`), url: '' },
					{  title: '我的二维码', subTitle: "", icon: getCdnUrl(`home/woderwm.png`), url: '' },
					{  title: '报价试算', subTitle: "", icon: getCdnUrl(`home/baojshs.png`), url: '' },
					{  title: '问题件', subTitle: "", icon: getCdnUrl(`home/wentijian.png`), url: '' },
					{  title: '面单补打', subTitle: "", icon: getCdnUrl(`home/mdbuda.png`), url: '' },
					{  title: '税费预估', subTitle: "", icon: getCdnUrl(`home/shfgs.png`), url: '' }
				]
			}
		},
		onShareAppMessage() {
			return {
				// title: '',
				// path: 'TODO'
			}
		},
		methods: {
			getCdnUrl,
			goto,
		}
	}
</script>

<style lang="scss">
	@import '@/common/uni-nvue.scss';
	
</style>
<style scoped lang="scss">
	.dl-head{
		background-color: #B12D29;
		padding: 100rpx 30rpx 60rpx 30rpx;
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
	}
	.dl-blcok{
		background-color: #fff;
		margin-top: 20rpx;
		padding: 30rpx;
	}
	.dlb-item{
		margin-top:20rpx;
		flex-direction: column;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 2rpx solid #F6F6F6;
		border-radius: 16rpx;
		height: 172rpx;
	}
</style>