school_uni/components/tab-bar/delivery.vue

<template>
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view style="position: absolute;display: flex;" :style="{'top': menuButtonInfo.top +'px'}">
					<view class="sort-member" style="width: 260rpx;">
						<view class="tab1">
							<view class="tabs1" @tap="checkTab1('daiqu')"
								:style="{'color':tab1Checked == 'daiqu'?'#000':'#777','font-size':tab1Checked== 'daiqu'?'36rpx':'30rpx'}">
								待取货
								<img v-if="tab1Checked == 'daiqu'"
									src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4bb5fc7725cb4a7a84d1d3a15f05b39c.png" alt=""
									style="width: 120rpx;height: 12rpx;position: absolute;bottom: 4rpx;left: 30rpx;" />
							</view>
							<view class="tabs1" @tap="checkTab1('daisong')"
								:style="{'color':tab1Checked == 'daisong'?'#000':'#777','font-size':tab1Checked== 'daisong'?'36rpx':'30rpx'}">
								待送达
								<img v-if="tab1Checked == 'daisong'"
									src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4bb5fc7725cb4a7a84d1d3a15f05b39c.png" alt=""
									style="width: 80rpx;height: 14rpx;position: absolute;bottom: 4rpx;left: 32rpx;" />
							</view>
						</view>
					</view>
					<view class="sort-member" style="margin-right: 10px;display: flex;padding-left: 5px;background: #fff;border-radius: 60rpx;flex: 1;">
						<uni-icons type="search" size="12"></uni-icons>
						<input type="text" placeholder="搜索" style="height: 60rpx;line-height: 60rpx;" v-model="keyword" @confirm="getShopList">
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="box1">
				<view class="maotou">
					#<text>021</text>
				</view>
				<view style="width: 100%;line-height: 70rpx;font-size: 28rpx;font-weight: 700;display: flex;">
					<view style="height: 40rpx;line-height: 40rpx;background: rgba(255, 233, 89, 1);padding: 0 16rpx;border-radius: 40rpx;margin: 14rpx 20rpx 0 0;">
						代买饭
					</view>
					<!-- <view style="height: 40rpx;line-height: 40rpx;background: rgba(166, 255, 234, 1);padding: 0 16rpx;border-radius: 40rpx;margin: 14rpx 20rpx 0 0;">
						指派单-代买饭
					</view>
					<view style="height: 40rpx;line-height: 40rpx;background: rgba(255, 220, 199, 1);padding: 0 16rpx;border-radius: 40rpx;margin: 14rpx 20rpx 0 0;">
						代取快递
					</view>
					<view style="height: 40rpx;line-height: 40rpx;background: rgba(130, 255, 130, 1);padding: 0 16rpx;border-radius: 40rpx;margin: 14rpx 20rpx 0 0;">
						代跑腿
					</view> -->
					立即送达（10：30前）
				</view>
				<view class="" style="background: #f5f5f5;height: 40px;line-height: 40px;font-weight: 500;padding: 0 10px;border-radius: 10px;">
					备注：不要葱，不要香菜
				</view>
				<view class="" style="background: #f5f5f5;line-height: 40px;font-weight: 500;padding: 0 10px;border-radius: 10px;margin-top: 10px;">
					<view style="display: flex;">
						<view style="flex:1">
							取件方式（3件）
						</view>
						<!-- <view class="">
							取件码截图
						</view>
						<view class="">
							取件码取件
						</view> -->
						<view style="flex:1;text-align: right;">
							手机尾号
						</view>
					</view>
					
					<!-- <view class="">
						<img src="" alt="" />
					</view>
					<view class="">
						<view class="">
							1-3-1290
						</view>
					</view> -->
					<view class="">
						<view class="">
							手机尾号 - 5741
						</view>
					</view>
				</view>
				<view style="display: flex;border-radius: 20rpx;margin-top: 16px;">
					<view class="goods-content">
						<view class="goods-name" style="font-size: 24rpx;line-height: 50rpx;display: flex;">
							<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/1f77398a73454a6595c12a3c18731599.png" alt="" style="width: 50rpx;height: 50rpx;" />
							<view style="flex: 1;">
								<view class="">
									沁园春第三食堂A20窗口
								</view>
								<view style="color: #777;">
									18829382718
								</view>
							</view>
							<view class="right">
								<img @tap="makeCall(shopItem.contactPhone)" src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/869a7af6a1c24bf3a0d523c4a18b55c6.png" alt="" style="width: 30px;height: 30px;"/>
							</view>
						</view>
						<view class="goods-name" style="font-size: 24rpx;line-height: 50rpx;display: flex;margin-top: 14rpx;">
							<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d0764fb4138747769538cf1cafa3b017.png" alt="" style="width: 50rpx;height: 50rpx;" />
							<view style="flex: 1;">
								<view class="">
									11号宿舍楼610
								</view>
								<view style="color: #777;">
									18829382718
								</view>
							</view>
							<view class="right">
								<img @tap="makeCall(shopItem.contactPhone)" src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/869a7af6a1c24bf3a0d523c4a18b55c6.png" alt="" style="width: 30px;height: 30px;"/>
							</view>
						</view>
					</view>
				</view>
				<view style="display: flex;border-radius: 20rpx;margin-top: 5px;">
					<view class="goods-content">
						<view class="goods-name" style="font-size: 24rpx;line-height: 50rpx;display: flex;">
							<img src="" alt="" style="width: 50rpx;height: 50rpx;" />
							<view style="flex: 1;display: flex;">
								<view style="color: #777;">
									配送佣金
								</view>
								<view style="flex: 1;text-align: right;">
									￥5.00 <text style="color: #777;font-size: 10px;">（包含￥2平台佣金）</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="width: 100%;height: 50px;margin-top: 16px;">
					<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/c318cf292a4f40b296995c30e5e539ea.png" alt="" style="width: 100%;height: 50px;background-size: 100%;" />
				</view>
			</view>
			
			<view style="width: 100%;height: 80px;"></view>
			<uni-load-more :status="loadStatus" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab1Checked: 'daiqu',
				menuButtonInfo: {},
			}
		},
		props:{
			
		},
		watch: {
			
		},
		onReachBottom() {
			if (this.searchForm.pageNumber >= this.totalPages) return;
			// this.status = 'loading';
			this.searchForm.pageNumber++;
			this.getShopList();
		
		},
		methods: {
			init(){
				console.log("配送初始化")
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			},
			checkTab1(type) {
				this.tab1Checked = type
			},
			ceshi(e) {
				console.log("11111111",e)
				if (e.detail.code) {
					// 将 code 发送给后端
					this.tui.request("/social/wechat/getPhone", "POST", {
						code:e.detail.code
					}, false, true).then((res) => {
						if (res.code == 200) {
							
						} else {
							this.tui.toast(res.message)
						}
					
					})
				} else {
					// 用户拒绝授权
					console.log('用户取消授权');
				}
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}
	
	.page1 {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		position: relative;
		display: flex;
		flex-direction: column;
	}
	.title {
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
		width: 100%;
		height: 190px;
	}
	.title-sreach{
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}
	.sort-member {
		line-height: 60rpx;
		text-align: center;
		height: 60rpx;
	}
	.tab1 {
		    height: 60rpx;
		    line-height: 60rpx;
		    display: flex;
	}
	
	.tabs1 {
		position: relative;
		font-size: 30rpx;
		font-weight: 700;
		color: #777;
		flex: 1;
	}
	.content {
		flex: 1;
		width: 95%;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		margin: -90px auto 0;
	}
	.box1 {
		width: 100%;
		margin: 20rpx auto 20rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		position:relative;
	}
	
	.goods-content {
		flex: 1;
	}
	
	.goods-name {
		font-size: 32rpx;
		font-weight: 900;
	}
	.maotou {
		width: 90rpx;
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/a1584a13e9db4b6fbcc66890219d0018.png') no-repeat;
		height: 90rpx;
		    background-size: 100%;
		    position: absolute;
		    top: -20rpx;
		    right: 20rpx;
		    text-align: center;
		    line-height: 90rpx;
		    font-weight: 900;
		    font-size: 24rpx;
	}
	.right{
		    width: 30px;
		    padding-top: 10px;
	}
</style>