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

订单列表

master
tianyi 4 weeks ago
parent
203036955c
commit
2667bce0e1
1 changed files with 382 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 383
      package1/order/orderList.vue

383
package1/order/orderList.vue
View File

@ -1,9 +1,390 @@
<template>
<!-- 订单列表 -->
<view class="page1">
<view class="title">
<view class="title-sreach">
<view class="back-btn" @tap="back" :style="{'padding-top': menuButtonInfo.top +'px'}">
<uni-icons type="left" size="28"></uni-icons>
</view>
<view class="title-search" :style="{'margin-top': menuButtonInfo.top +'px'}">
<uni-icons type="search" size="18" style="margin: 9rpx;"></uni-icons>
<input type="text" placeholder="搜索" v-model="searchForm.keyWord" @confirm="goSearch"
confirm-type="search" />
</view>
</view>
</view>
<view class="nav-tab">
<view class="tab1">
<view class="tabs1" @tap="checkTab1('quanbu')"
:style="{'color':tab1Checked == 'quanbu'?'#000':'#777','font-size':tab1Checked== 'quanbu'?'18px':'15px'}">
全部订单
<img v-if="tab1Checked == 'quanbu'"
src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4bb5fc7725cb4a7a84d1d3a15f05b39c.png" alt=""
style="width: 60px;height: 6px;position: absolute;bottom: 8px;left: 15px;" />
</view>
<view class="tabs1" @tap="checkTab1('fantuan')"
:style="{'color':tab1Checked == 'fantuan'?'#000':'#777','font-size':tab1Checked== 'fantuan'?'18px':'15px'}">
饭团
<img v-if="tab1Checked == 'fantuan'"
src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4bb5fc7725cb4a7a84d1d3a15f05b39c.png" alt=""
style="width: 40px;height: 7px;position: absolute;bottom: 6px;left: 16px;" />
</view>
<view class="tabs1" @tap="checkTab1('paotui')"
:style="{'color':tab1Checked == 'paotui'?'#000':'#777','font-size':tab1Checked== 'paotui'?'18px':'15px'}">
快递/跑腿
<img v-if="tab1Checked == 'paotui'"
src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4bb5fc7725cb4a7a84d1d3a15f05b39c.png" alt=""
style="width: 90px;height: 7px;position: absolute;bottom: 6px;left: 16px;" />
</view>
<view class="tabs1" @tap="checkTab1('ershou')"
:style="{'color':tab1Checked == 'ershou'?'#000':'#777','font-size':tab1Checked== 'ershou'?'18px':'15px'}">
二手
<img v-if="tab1Checked == 'ershou'"
src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4bb5fc7725cb4a7a84d1d3a15f05b39c.png" alt=""
style="width: 40px;height: 7px;position: absolute;bottom: 4px;left: 16px;" />
</view>
</view>
<view class="tab2">
<view class="tabs2" @tap="checkTabs2('quanbu')"
:style="{'background':tab2Checked=='quanbu'?'rgba(166, 255, 234, 1)':'#eee','color':tab2Checked=='quanbu'?'#000':'#777'}">
全部</view>
<view class="tabs2" @tap="checkTabs2('daifu')"
:style="{'background':tab2Checked=='daifu'?'rgba(166, 255, 234, 1)':'#eee','color':tab2Checked=='daifu'?'#000':'#777'}">
待付款</view>
<view class="tabs2" @tap="checkTabs2('daifa')"
:style="{'background':tab2Checked=='daifa'?'rgba(166, 255, 234, 1)':'#eee','color':tab2Checked=='daifa'?'#000':'#777'}">
待发货</view>
<view class="tabs2" @tap="checkTabs2('daishou')"
:style="{'background':tab2Checked=='daishou'?'rgba(166, 255, 234, 1)':'#eee','color':tab2Checked=='daishou'?'#000':'#777'}">
待收货</view>
<view class="tabs2" @tap="checkTabs2('daiping')"
:style="{'background':tab2Checked=='daiping'?'rgba(166, 255, 234, 1)':'#eee','color':tab2Checked=='daiping'?'#000':'#777'}">
待评价</view>
<view class="tabs2" @tap="checkTabs2('guanbi')"
:style="{'background':tab2Checked=='guanbi'?'rgba(166, 255, 234, 1)':'#eee','color':tab2Checked=='guanbi'?'#000':'#777'}">
已关闭</view>
</view>
</view>
<view class="content">
<view class="box1">
<view class="ziqu-xuanfu" style="background:red">
待支付
</view>
<!-- <view class="ziqu-xuanfu" style="background:rgba(166, 255, 234, 1)">
待商家接单
</view>
<view class="ziqu-xuanfu" style="background:rgba(166, 255, 234, 1)">
待骑手接单
</view>
<view class="ziqu-xuanfu" style="background:rgba(166, 255, 234, 1)">
待配送
</view>
<view class="ziqu-xuanfu" style="background:rgba(255, 193, 236, 1)">
配送中
</view>
<view class="ziqu-xuanfu">
已送达
</view>
<view class="ziqu-xuanfu">
已取消
</view>
<view class="ziqu-xuanfu">
已完成
</view>
<view class="ziqu-xuanfu">
待评价
</view> -->
<view style="width: 100%;line-height: 35px;font-size: 14px;font-weight: 700;display: flex;">
<view class="">
饭团
</view>
竹仔园牛仔农庄(第六分店)
</view>
<view style="display: flex;padding: 10px;background: #eee;border-radius: 10px;">
<view class="goods-img">
<img src="/static/images/img/shangpintu.png" alt="">
</view>
<view class="goods-content">
<view class="goods-name">
牛仔农庄(医专店)
</view>
<view class="goods-content-center">
<view>
打分；不要啦
</view>
</view>
<view class="goods-content-bottom">
<view style="width: 45%;">
X1
</view>
<view class="pintuan-left-price">
￥90.00
</view>
</view>
</view>
</view>
<view style="height: 50px;border: 1px solid #eee;display: flex;line-height: 50px;">
<view style="flex: 1;color: #777;">
待支付 <text style="font-size: 16px;color: red;font-weight: 700;">23:59:23</text>
</view>
<view style="font-size: 14px;font-weight: 700;">
实付<text style="font-size: 10px;color: #777;">（含包装/配送费）</text> <text
style="color: red;">￥24</text>
</view>
</view>
<view class="bottom-btn">
<view class="btn1">
取消订单
</view>
<view class="btn1"
style="background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));color: #000;">
去支付
</view>
<view class="btn1" style="background: rgba(166, 255, 234, 0.3);color: #000;">
查看订单
</view>
<!-- <view class="btn1" style="background: rgba(166, 255, 234, 0.3);color: #000;">
去评价
</view>
<view class="btn1">
删除订单
</view> -->
</view>
</view>
<uni-load-more :status="loadStatus" />
</view>
</view>
</template>
<script>
export default {
data() {
return {
loadStatus: 'more',
tab1Checked: 'quanbu',
tab2Checked: 'quanbu',
loadStatus: 'more',
totalPages: 1,
menuButtonInfo: {}
}
},
onReachBottom() {
if (this.searchForm.pageNumber >= this.totalPages) return;
// this.status = 'loading';
this.searchForm.pageNumber++;
this.getShopList();
},
onLoad(option) {
},
onShow() {
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
},
methods: {
checkTab1(type) {
this.tab1Checked = type
},
checkTabs2(type) {
this.tab2Checked = type
},
back() {
uni.navigateBack()
}
}
}
</script>
<style>
<style lang="scss">
page {
width: 100%;
min-height: 100%;
font-size: 24rpx;
background: #F5F8F5;
color: #00231C;
}
.page1 {
width: 100%;
min-height: 100vh;
font-size: 24rpx;
position: relative;
display: flex;
flex-direction: column;
}
.title {
flex-shrink: 0;
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
background-size: 100%;
width: 100%;
height: 200px;
padding-bottom: 20rpx;
}
.title-sreach {
width: 75%;
display: flex;
height: 200rpx;
}
.back-btn {
padding-top: 55px;
}
.title-search {
margin-top: 55px;
display: flex;
background: #fff;
height: 54rpx;
margin-left: 20rpx;
border-radius: 54rpx;
width: 380rpx;
flex: 1;
input {
height: 54rpx;
line-height: 54rpx;
}
}
.nav-tab {
flex-shrink: 0;
position: absolute;
top: 100px;
left: 2.5%;
background: #fff;
width: 95%;
border-radius: 10px;
padding: 10px;
}
.content {
flex: 1;
width: 95%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
position: absolute;
top: 225px;
left: 2.5%;
}
.tab1 {
height: 40px;
line-height: 40px;
display: flex;
}
.tabs1 {
position: relative;
font-size: 15px;
font-weight: 700;
color: #777;
padding: 0 15px;
}
.tab2 {
height: 35px;
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
margin-top: 10px;
white-space: nowrap;
}
.tabs2 {
width: 78px;
height: 35px;
line-height: 35px;
text-align: center;
background: #eee;
border-radius: 10px;
font-weight: 700;
margin-right: 10px;
display: inline-block;
-webkit-overflow-scrolling: touch;
}
.ziqu-xuanfu {
position: absolute;
top: 0;
right: 0;
background: #eee;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
font-weight: 700;
height: 28px;
width: 60px;
text-align: center;
line-height: 28px;
}
.box1 {
width: 100%;
margin: 0 auto 10px;
background: #fff;
border-radius: 10px;
padding: 10px;
}
.goods-img {
width: 160rpx;
height: 160rpx;
position: relative;
img {
width: 100%;
background-size: 100%;
height: 100%;
}
}
.goods-content {
flex: 1;
padding-left: 20rpx;
}
.goods-name {
font-size: 32rpx;
font-weight: 900;
}
.goods-content-center {
display: flex;
margin: 16rpx 0;
color: #777;
}
.pintuan-left-price {
width: 55%;
text-align: right;
font-weight: 700;
color: #000;
}
.goods-content-bottom {
display: flex;
line-height: 28px;
color: #777;
}
.btn1 {
width: 70px;
height: 30px;
line-height: 30px;
text-align: center;
margin-top: 10px;
background: #eee;
border-radius: 30px;
color: #777;
font-weight: 700;
float: right;
margin-left: 10px;
}
.bottom-btn {
height: 40px;
}
</style>
Write Preview
Loading…
Cancel
Save