You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
391 lines
9.7 KiB
391 lines
9.7 KiB
<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)':'#F5F5F5','color':tab2Checked=='quanbu'?'#000':'#777'}">
|
|
全部</view>
|
|
<view class="tabs2" @tap="checkTabs2('daifu')"
|
|
:style="{'background':tab2Checked=='daifu'?'rgba(166, 255, 234, 1)':'#F5F5F5','color':tab2Checked=='daifu'?'#000':'#777'}">
|
|
待付款</view>
|
|
<view class="tabs2" @tap="checkTabs2('daifa')"
|
|
:style="{'background':tab2Checked=='daifa'?'rgba(166, 255, 234, 1)':'#F5F5F5','color':tab2Checked=='daifa'?'#000':'#777'}">
|
|
待发货</view>
|
|
<view class="tabs2" @tap="checkTabs2('daishou')"
|
|
:style="{'background':tab2Checked=='daishou'?'rgba(166, 255, 234, 1)':'#F5F5F5','color':tab2Checked=='daishou'?'#000':'#777'}">
|
|
待收货</view>
|
|
<view class="tabs2" @tap="checkTabs2('daiping')"
|
|
:style="{'background':tab2Checked=='daiping'?'rgba(166, 255, 234, 1)':'#F5F5F5','color':tab2Checked=='daiping'?'#000':'#777'}">
|
|
待评价</view>
|
|
<view class="tabs2" @tap="checkTabs2('guanbi')"
|
|
:style="{'background':tab2Checked=='guanbi'?'rgba(166, 255, 234, 1)':'#F5F5F5','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 style="height: 20px;line-height: 20px;background: linear-gradient(90deg, rgba(255, 77, 0, 1), rgba(255, 184, 84, 1));padding: 0 8px;border-radius: 20px;color: #fff;margin: 7px 10px 0 0;">
|
|
饭团
|
|
</view>
|
|
竹仔园牛仔农庄(第六分店)
|
|
</view>
|
|
<view style="display: flex;padding: 10px;background: #F5F5F5;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 #F5F5F5;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 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: #F5F5F5;
|
|
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: #F5F5F5;
|
|
border-top-right-radius: 10px;
|
|
border-bottom-left-radius: 10px;
|
|
font-weight: 700;
|
|
height: 28px;
|
|
width: 60px;
|
|
text-align: center;
|
|
line-height: 28px;
|
|
color: #fff;
|
|
}
|
|
|
|
.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: #F5F5F5;
|
|
border-radius: 30px;
|
|
color: #777;
|
|
font-weight: 700;
|
|
float: right;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.bottom-btn {
|
|
|
|
height: 40px;
|
|
}
|
|
</style>
|