|
|
@@ -16,15 +16,24 @@
|
|
|
</view>
|
|
|
<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
|
|
|
<view style="height: 44px;"></view>
|
|
|
-
|
|
|
-
|
|
|
- <view class="tab">
|
|
|
- <view class="tabLine" :class="{tabActive:tabIndex==0}" @click="tabClick(0)">全部</view>
|
|
|
- <view class="tabLine" :class="{tabActive:tabIndex==1}" @click="tabClick(1)">待付款</view>
|
|
|
- <view class="tabLine" :class="{tabActive:tabIndex==2}" @click="tabClick(2)">待服务</view>
|
|
|
- <view class="tabLine" :class="{tabActive:tabIndex==3}" @click="tabClick(3)">已完成</view>
|
|
|
-
|
|
|
+ <!-- 搜索框 -->
|
|
|
+ <view class="newtop">
|
|
|
+ <view class="searchBox">
|
|
|
+ <view class="searchInputBox">
|
|
|
+ <image src="../../static/img/icon_search.png" mode="" class="iconSimg"></image>
|
|
|
+ <input type="text" v-model="name" placeholder="订单号、手机号、联系人" class="searchInput" @confirm="searchCf">
|
|
|
+ </view>
|
|
|
+ <image @click="screenSHowBtn" src="../../static/img/icon_shai.png" mode="" class="iconShai"></image>
|
|
|
+ </view>
|
|
|
+ <view class="tab">
|
|
|
+ <view class="tabLine" :class="{tabActive:tabIndex==0}" @click="tabClick(0)">全部</view>
|
|
|
+ <view class="tabLine" :class="{tabActive:tabIndex==1}" @click="tabClick(1)">待付款</view>
|
|
|
+ <view class="tabLine" :class="{tabActive:tabIndex==2}" @click="tabClick(2)">待服务</view>
|
|
|
+ <view class="tabLine" :class="{tabActive:tabIndex==3}" @click="tabClick(3)">已完成</view>
|
|
|
+
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+
|
|
|
|
|
|
<view class="main">
|
|
|
<view class="itemBg" v-for="(item,index) in items" @click="goDetail(item)">
|
|
|
@@ -53,6 +62,45 @@
|
|
|
|
|
|
<nodata v-show="items==''&&isload"></nodata>
|
|
|
</view>
|
|
|
+ <!-- 筛选弹框 -->
|
|
|
+ <view class="screenBox" v-if="screenSHow" @click="screenHide">
|
|
|
+ <view class="screenCont" @click.stop="">
|
|
|
+ <view class="screenTitle">筛选</view>
|
|
|
+ <view class="screenBt">订单类型</view>
|
|
|
+ <view class="typelineBox">
|
|
|
+ <view class="typeLine " :class="{typeactive:typeLineIndex==0}" @click="typeLineCk(0)">全部</view>
|
|
|
+ <view class="typeLine" :class="{typeactive:typeLineIndex==1}" @click="typeLineCk(1)">商城订单</view>
|
|
|
+ <view class="typeLine" :class="{typeactive:typeLineIndex==2}" @click="typeLineCk(2)">集客订单</view>
|
|
|
+ <view class="typeLine" :class="{typeactive:typeLineIndex==3}" @click="typeLineCk(3)">救援订单</view>
|
|
|
+ <view class="typeLine":class="{typeactive:typeLineIndex==4}" @click="typeLineCk(4)">钣喷订单</view>
|
|
|
+ </view>
|
|
|
+ <view class="screenBt">门店</view>
|
|
|
+ <view class="">
|
|
|
+ <picker @change="bindPickerChange" :value="pickerindex" :range-key="'shopName'" :range="pickerarray">
|
|
|
+ <view class="uniPicker">
|
|
|
+ <view class="uniPickerName">
|
|
|
+ {{shopName}}
|
|
|
+ </view>
|
|
|
+ <image src="../../static/img/jt.png" mode=" " class="jtShopImg"></image>
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+ <view class="screenBt">下单时间</view>
|
|
|
+ <view class="sdTimeBox">
|
|
|
+ <picker mode="date" :value="date1" @change="bindDateChange1">
|
|
|
+ <view class="dateinput">{{date1?date1:'选择日期'}}</view>
|
|
|
+ </picker>
|
|
|
+ <view class="timeHx">-</view>
|
|
|
+ <picker mode="date" :value="date2" @change="bindDateChange2">
|
|
|
+ <view class="dateinput">{{date2?date2:'选择日期'}}</view>
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+ <view class="screenBottom">
|
|
|
+ <view class="screenCz">重置</view>
|
|
|
+ <view class="screenY">确定</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -68,22 +116,67 @@
|
|
|
tabIndex: 0,
|
|
|
items: [],
|
|
|
isload: false,
|
|
|
-
|
|
|
+ name:'',
|
|
|
+ pickerindex:0,
|
|
|
+ pickerarray: [],
|
|
|
+ screenSHow:true,
|
|
|
+ shopName:'',
|
|
|
+ date1:'',
|
|
|
+ date2:'',
|
|
|
+ typeLineIndex:0,
|
|
|
}
|
|
|
},
|
|
|
onLoad(opt) {
|
|
|
|
|
|
- this.getData()
|
|
|
+ this.getData();
|
|
|
+ this.getShopinfo();
|
|
|
+ this.getShopList();
|
|
|
},
|
|
|
onShow() {
|
|
|
console.log(this.tabIndex)
|
|
|
|
|
|
- this.getData()
|
|
|
+ this.getData();
|
|
|
+
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
-
|
|
|
+ typeLineCk(num){
|
|
|
+ this.typeLineIndex=num;
|
|
|
+ },
|
|
|
+ screenSHowBtn(){
|
|
|
+ this.screenSHow=true;
|
|
|
+ },
|
|
|
+ screenHide(){
|
|
|
+ this.screenSHow=false;
|
|
|
+ },
|
|
|
+ bindDateChange1(e){
|
|
|
+ console.log(e)
|
|
|
+ this.date1=e.detail.value
|
|
|
+ },
|
|
|
+ bindDateChange2(e){
|
|
|
+ this.date2=e.detail.value
|
|
|
+ },
|
|
|
+ bindPickerChange(e){
|
|
|
+ console.log(e)
|
|
|
+ this.shopName=this.pickerarray[e.detail.value].shopName
|
|
|
+ },
|
|
|
+ getShopinfo(){
|
|
|
+ this.$http('openH5SetTheGuest/getShopInfo',{},'GET').then(res => {
|
|
|
+ this.shopName=res.data.shopName;
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getShopList(){
|
|
|
+
|
|
|
+ this.$http('openH5SetTheGuest/getShopList', {
|
|
|
+
|
|
|
+ },'GET').then(res => {
|
|
|
+
|
|
|
+ this.pickerarray=res.data;
|
|
|
+ console.log(this.pickerarray[this.pickerindex])
|
|
|
+ })
|
|
|
+ },
|
|
|
goback(){
|
|
|
|
|
|
//app交互
|
|
|
@@ -128,6 +221,9 @@
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
+ searchCf(){
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
getData() {
|
|
|
uni.showLoading({
|
|
|
title: '加载中'
|
|
|
@@ -136,7 +232,8 @@
|
|
|
var padata = {
|
|
|
page: this.page,
|
|
|
limit: 10,
|
|
|
- sheetState: this.tabIndex > 0 ? this.tabIndex : ''
|
|
|
+ sheetState: this.tabIndex > 0 ? this.tabIndex : '',
|
|
|
+ name:this.name
|
|
|
}
|
|
|
|
|
|
this.$http('openH5Indent/getOpenSheetList', padata, 'GET').then(res => {
|
|
|
@@ -171,6 +268,123 @@
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+ .screenBox{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ background: rgba(0 ,0,0,0.5);
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+ .screenBottom{
|
|
|
+ width: 649rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0rpx -2rpx 10rpx 0rpx rgba(153,153,153,0.2);
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+ .screenCz{
|
|
|
+ width: 291rpx;text-align: center;margin-top: 22rpx;
|
|
|
+ height: 74rpx;line-height: 74rpx;
|
|
|
+ background: #F4F5F7;color: #000000;
|
|
|
+ border-radius: 37rpx;font-size: 28rpx;
|
|
|
+ }
|
|
|
+ .screenY{
|
|
|
+ width: 291rpx;text-align: center;margin-top: 22rpx;
|
|
|
+ height: 74rpx;line-height: 74rpx;
|
|
|
+ background: #D53533;color: #FFFFFF;
|
|
|
+ border-radius: 37rpx;font-size: 28rpx;
|
|
|
+ }
|
|
|
+ .screenCont{
|
|
|
+ width: 650rpx;
|
|
|
+ height: 100%;
|
|
|
+ background: #FFFFFF;
|
|
|
+ margin-left: 100rpx;
|
|
|
+ }
|
|
|
+ .screenTitle{
|
|
|
+ font-weight: 400;font-size: 24rpx;padding-top: 70rpx;padding-left: 20rpx;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .screenBt{
|
|
|
+ font-weight: 400;font-size: 24rpx;
|
|
|
+ color: #333333;padding-left: 20rpx;padding-top: 30rpx;
|
|
|
+ }
|
|
|
+ .iconShai{
|
|
|
+ width: 36rpx;height: 39rpx;margin-top: 17rpx;
|
|
|
+ margin-left: 30rpx;
|
|
|
+ }
|
|
|
+ .iconSimg{
|
|
|
+ width: 40rpx;height: 40rpx;margin-top: 16rpx;margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ .searchBox{
|
|
|
+ display: flex;background: #FFFFFF;padding: 24rpx;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ .typeLine{
|
|
|
+ width: 179rpx;color: #3C3C3C;
|
|
|
+ height: 64rpx;font-size: 24rpx;
|
|
|
+ background: #F4F5F7;margin-top: 20rpx;
|
|
|
+ border-radius: 36rpx;margin-right: 30rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 64rpx;
|
|
|
+ }
|
|
|
+ .typeactive{
|
|
|
+ border: 2rpx solid #D53533;height: 60rpx;color: #D53533;background: #FFFFFF;
|
|
|
+ }
|
|
|
+ .typelineBox{
|
|
|
+ display: flex;flex-wrap: wrap;padding-left: 20rpx;
|
|
|
+ }
|
|
|
+ .uniPicker{
|
|
|
+ width: 606rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ background: #F4F5F7;font-size: 24rpx;
|
|
|
+ border-radius: 36rpx;color: #3C3C3C;
|
|
|
+ display: flex;justify-content: space-between;
|
|
|
+ margin-top: 20rpx;margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ .jtShopImg{
|
|
|
+ width: 24rpx;height: 24rpx;margin-top: 20rpx;margin-right: 26rpx;
|
|
|
+ }
|
|
|
+ .uniPickerName{
|
|
|
+ padding-left: 20rpx;line-height: 64rpx;
|
|
|
+ overflow:hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -o-text-overflow:ellipsis;
|
|
|
+ width: 500rpx;
|
|
|
+ }
|
|
|
+ .dateinput{
|
|
|
+ width: 270rpx;color: #999999;
|
|
|
+ height: 64rpx;font-size: 24rpx;line-height: 64rpx;
|
|
|
+ background: #F4F5F7;padding-left: 20rpx;
|
|
|
+ border-radius: 36rpx;
|
|
|
+ }
|
|
|
+ .sdTimeBox{
|
|
|
+ display: flex;
|
|
|
+ padding-top: 20rpx;padding-left: 20rpx;
|
|
|
+ }
|
|
|
+ .timeHx{
|
|
|
+ font-weight: 400;line-height: 64rpx;padding: 0 4rpx;
|
|
|
+ color: #DDDDDD;font-size: 24rpx;
|
|
|
+ }
|
|
|
+ .newtop{
|
|
|
+ position: fixed;z-index: 11;
|
|
|
+ }
|
|
|
+ .searchInputBox{
|
|
|
+ width: 630rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ background: #F4F5F7;
|
|
|
+ border-radius: 36rpx;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .searchInput{
|
|
|
+ font-size: 28rpx;padding-left: 16rpx;height: 72rpx;line-height: 72rpx;
|
|
|
+ }
|
|
|
.box {
|
|
|
min-height: 100vh;
|
|
|
background: #F4F5F7;
|
|
|
@@ -182,7 +396,7 @@
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
- z-index: 9999999;
|
|
|
+ z-index: 99;
|
|
|
|
|
|
|
|
|
}
|
|
|
@@ -230,7 +444,7 @@
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
line-height: 92rpx;
|
|
|
- position: fixed;
|
|
|
+ /* position: fixed; */
|
|
|
width: calc(100vw - 100rpx);
|
|
|
padding-left: 50rpx;
|
|
|
padding-right: 50rpx;
|
|
|
@@ -253,7 +467,7 @@
|
|
|
}
|
|
|
|
|
|
.main {
|
|
|
- padding-top: 92rpx;
|
|
|
+ padding-top: 210rpx;
|
|
|
padding-bottom: 20rpx;
|
|
|
background-color: #F4F5F7;
|
|
|
}
|
