root
/
school_uni
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

组件

master
tianyi 4 weeks ago
parent
8cdb441936
commit
ddc90fe941
2 changed files with 239 additions and 8 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 244
      components/tab-bar/delivery.vue
  2. 3
      components/tab-bar/myCenter.vue

244
components/tab-bar/delivery.vue
View File

@ -1,12 +1,140 @@
<template> <template>
<view> <view class="page1">
<view style="background: #ff0000; color: white; padding: 30px;"> <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>
<view style="margin-top: 200px;"> <view class="tabs1" @tap="checkTab1('daisong')"
<button type="primary" @getphonenumber="ceshi" open-type="getPhoneNumber"> :style="{'color':tab1Checked == 'daisong'?'#000':'#777','font-size':tab1Checked== 'daisong'?'36rpx':'30rpx'}">
获取手机号 待送达
</button> <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>
</view> </view>
</template> </template>
@ -15,7 +143,8 @@
export default { export default {
data() { data() {
return { return {
tab1Checked: 'daiqu',
menuButtonInfo: {},
} }
}, },
props:{ props:{
@ -23,8 +152,22 @@
}, },
watch: { watch: {
},
onReachBottom() {
if (this.searchForm.pageNumber >= this.totalPages) return;
// this.status = 'loading';
this.searchForm.pageNumber++;
this.getShopList();
}, },
methods: { methods: {
init(){
console.log("配送初始化")
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
},
checkTab1(type) {
this.tab1Checked = type
},
ceshi(e) { ceshi(e) {
console.log("11111111",e) console.log("11111111",e)
if (e.detail.code) { if (e.detail.code) {
@ -49,5 +192,90 @@
</script> </script>
<style> <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> </style>

3
components/tab-bar/myCenter.vue
View File

@ -30,6 +30,9 @@
}, },
methods: { methods: {
init(){
console.log("我的初始化")
},
navigatorTo(e){ navigatorTo(e){
let url = "" let url = ""
if(e=='addgoods'){ if(e=='addgoods'){

Write Preview
Loading…
Cancel
Save