|
@@ -1,55 +1,195 @@
|
|
|
<template>
|
|
|
<view class="shopTourRecord-wrap">
|
|
|
- <!-- 顶部筛选条件 -->
|
|
|
- <u-dropdown ref="uDropdown" class="uDropdown">
|
|
|
- <u-dropdown-item v-model="searchForm.isAll" title="全部" :options="options1"></u-dropdown-item>
|
|
|
- <u-dropdown-item v-model="searchForm.inspectionMethod" title="检查方式" :options="options2"></u-dropdown-item>
|
|
|
- <u-dropdown-item v-model="searchForm.state" title="状态" :options="options2"></u-dropdown-item>
|
|
|
- <u-dropdown-item title="筛选">
|
|
|
- <view class="slot-content" style="background-color: #FFFFFF;">
|
|
|
- <scroll-view scroll-y="true" style="height: 200upx;">
|
|
|
- <view class="u-text-center u-content-color u-m-t-20 u-m-b-20">无言独上西楼</view>
|
|
|
- <view class="u-text-center u-content-color u-m-t-20 u-m-b-20">月如钩</view>
|
|
|
- <view class="u-text-center u-content-color u-m-t-20 u-m-b-20">寂寞梧桐深院锁清秋</view>
|
|
|
- <view class="u-text-center u-content-color u-m-t-20 u-m-b-20">剪不断</view>
|
|
|
- <view class="u-text-center u-content-color u-m-t-20 u-m-b-20">理还乱</view>
|
|
|
- <view class="u-text-center u-content-color u-m-t-20 u-m-b-20">是离愁</view>
|
|
|
- <view class="u-text-center u-content-color u-m-t-20 u-m-b-20">别是一般滋味在心头</view>
|
|
|
- </scroll-view>
|
|
|
- <u-button type="primary" @click="closeDropdown">确定</u-button>
|
|
|
+ <u-sticky offset-top="0">
|
|
|
+ <!-- 顶部筛选条件 -->
|
|
|
+ <u-dropdown ref="uDropdown" class="uDropdown">
|
|
|
+ <u-dropdown-item v-model="searchForm.isAll" title="全部" :options="screenClass"></u-dropdown-item>
|
|
|
+ <u-dropdown-item v-model="searchForm.inspectionMethod" title="检查方式" :options="screenMethod"></u-dropdown-item>
|
|
|
+ <u-dropdown-item v-model="searchForm.state" title="状态" :options="screenState"></u-dropdown-item>
|
|
|
+ <u-dropdown-item title="筛选" class="screen-dropdown">
|
|
|
+ <view class="slot-content">
|
|
|
+ <scroll-view class="scroll-view" scroll-y="true">
|
|
|
+ <view class="screen-module">
|
|
|
+ <text class="screen-tit">时间区间:</text>
|
|
|
+ <view class="screen-time-val">
|
|
|
+ <text @click="onShowDatePicker('range')">{{ range.length == 0 ? '请选择' : range[0] + '~' + range[1] }}</text>
|
|
|
+ <u-icon v-show="range.length != 0" name="close-circle-fill" color="#c8c0cc" size="32" class="close-circle" @click="range=[]"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="screen-module">
|
|
|
+ <text class="screen-tit">门店:</text>
|
|
|
+ <view class="screen-inp-val">
|
|
|
+ <u-input class="screen-inp" v-model="searchForm.store" :height="52" placeholder="请输入" type="text" :border="true" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="screen-module">
|
|
|
+ <text class="screen-tit">巡店人:</text>
|
|
|
+ <view class="screen-inp-val">
|
|
|
+ <u-input class="screen-inp" v-model="searchForm.shopInspector" :height="52" placeholder="请输入" type="text" :border="true" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <u-button type="primary" @click="closeDropdown">确定</u-button>
|
|
|
+ </view>
|
|
|
+ </u-dropdown-item>
|
|
|
+ </u-dropdown>
|
|
|
+ </u-sticky>
|
|
|
+ <!-- 列表数据 -->
|
|
|
+ <view class="list-con">
|
|
|
+ <scroll-view scroll-y class="scroll-con" @scrolltolower="onreachBottom">
|
|
|
+ <view class="record-con">
|
|
|
+ <u-sticky offset-top="80">
|
|
|
+ <view v-show="searchForm.creatTime.length != 0" class="alert-tips">
|
|
|
+ <text>{{searchForm.creatTime[0]}} ~ {{searchForm.creatTime[1]}}</text>
|
|
|
+ </view>
|
|
|
+ </u-sticky>
|
|
|
+ <view class="record-item" v-for="(item,index) in list" :key="index">
|
|
|
+ <view class="item-head">
|
|
|
+ <text class="item-c-tit">{{item.name}}</text>
|
|
|
+ <u-tag class="item-c-type" :text="item.orderStatus" type="primary" />
|
|
|
+ </view>
|
|
|
+ <view class="item-main">
|
|
|
+ <text class="item-tit">巡店人:</text>
|
|
|
+ <text class="item-val">{{item.shopInspector}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item-main">
|
|
|
+ <text class="item-tit">创建时间:</text>
|
|
|
+ <text class="item-val">{{item.creatTime}}</text>
|
|
|
+ </view>
|
|
|
+ <u-grid class="item-grid" :col="4" hover-class="none">
|
|
|
+ <u-grid-item>
|
|
|
+ <text class="grid-num text-blue">18</text>
|
|
|
+ <text class="grid-text">检查项</text>
|
|
|
+ </u-grid-item>
|
|
|
+ <u-grid-item>
|
|
|
+ <text class="grid-num text-green">13</text>
|
|
|
+ <text class="grid-text">合格</text>
|
|
|
+ </u-grid-item>
|
|
|
+ <u-grid-item>
|
|
|
+ <text class="grid-num text-red">3</text>
|
|
|
+ <text class="grid-text">不合格</text>
|
|
|
+ </u-grid-item>
|
|
|
+ <u-grid-item>
|
|
|
+ <text class="grid-num text-yellow">2</text>
|
|
|
+ <text class="grid-text">不适用</text>
|
|
|
+ </u-grid-item>
|
|
|
+ </u-grid>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </u-dropdown-item>
|
|
|
- </u-dropdown>
|
|
|
+ <u-empty text="暂无数据" img-width="120" v-if="list.length == 0 && status != 'loading'" mode="list"></u-empty>
|
|
|
+ <u-loadmore bg-color="#f8f8f8" v-if="list.length < total || status == 'loading'" :status="status" class="loadmore" />
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 选择时间区间 -->
|
|
|
+ <mx-date-picker class="choose-date-wrap" :show="showPicker" :type="type" :value="searchForm.creatTime" :show-tips="true" :begin-text="'开始'" :end-text="'结束'" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue"
|
|
|
export default{
|
|
|
+ components: { MxDatePicker },
|
|
|
data(){
|
|
|
return{
|
|
|
- value1: 1,
|
|
|
- value2: 2,
|
|
|
- options1: [
|
|
|
- { label: '默认排序', value: 1, },
|
|
|
- { label: '距离优先', value: 2, },
|
|
|
- { label: '价格优先', value: 3, }
|
|
|
+ screenClass: [
|
|
|
+ { label: '全部', value: 1, },
|
|
|
+ { label: '我的巡店', value: 2, }
|
|
|
],
|
|
|
- options2: [
|
|
|
- { label: '去冰', value: 1, },
|
|
|
- { label: '加冰', value: 2, },
|
|
|
+ screenMethod: [
|
|
|
+ { label: '现场巡店', value: 1, },
|
|
|
+ { label: '视频巡店', value: 2, },
|
|
|
+ { label: '点检任务', value: 3, }
|
|
|
+ ],
|
|
|
+ screenState: [
|
|
|
+ { label: '全部', value: 1, },
|
|
|
+ { label: '待处理', value: 2, },
|
|
|
+ { label: '进行中', value: 3, },
|
|
|
+ { label: '已完成', value: 4, },
|
|
|
+ { label: '已过期', value: 5, }
|
|
|
],
|
|
|
searchForm: {
|
|
|
- isAll: '',
|
|
|
- inspectionMethod: '',
|
|
|
- state: '',
|
|
|
- screen: ''
|
|
|
- }
|
|
|
+ isAll: '1', // 全部(全部、我的巡店)
|
|
|
+ inspectionMethod: '', // 检查方式(现场巡店、视频巡店、点检任务)
|
|
|
+ state: '1', // 状态(全部、待处理、进行中、已完成、已过期)
|
|
|
+ creatTime: '', // 时间区间(天)
|
|
|
+ store: '', // 门店
|
|
|
+ shopInspector: '' // 巡店人
|
|
|
+ },
|
|
|
+ showPicker: false, // 是否选择创建时间
|
|
|
+ range: [], // 筛选创建时间的默认值
|
|
|
+ type: 'range', // 日期时间类型
|
|
|
+ pageNo: 1, // 当前页码
|
|
|
+ pageSize: 15, // 一页多少条
|
|
|
+ total: 0, // 总条数
|
|
|
+ // status: 'loading', // 加载状态
|
|
|
+ status: 'loadmore', // 加载状态
|
|
|
+ noDataText: '暂无数据', // 列表数据为空时提示文字
|
|
|
+ list: [ // 数据列表
|
|
|
+ { name: '常青二店', creatTime: '2020-09-08 09:16', orderStatus: 'haveInHand', shopInspector: '张三' },
|
|
|
+ { name: '常青二店', creatTime: '2020-09-08 09:16', orderStatus: 'invalid', shopInspector: '李四' },
|
|
|
+ { name: '常青二店', creatTime: '2020-09-08 09:16', orderStatus: 'haveInHand', shopInspector: '王五' },
|
|
|
+ { name: '常青二店常青二店常青二店常青二店常青二店常青二店常青二店常青二店常青二店常青二店常青二店常青二店常青二店常青二店常青二店常青二店常青二店常青二店常青二店常青二店常青二店常青二店常青二店常青二店常青二店常青二店常青二店常青二店常青二店常青二店', creatTime: '2020-09-08 09:16', orderStatus: 'completed', shopInspector: '王权富贵' },
|
|
|
+ { name: '常青二店', creatTime: '2020-09-08 09:16', orderStatus: 'completed', shopInspector: '钱六' },
|
|
|
+ ],
|
|
|
}
|
|
|
},
|
|
|
+ onLoad() {
|
|
|
+ this.pageInit()
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ pageInit(){
|
|
|
+ this.range = [ this.get7day(-6), this.get7day(0) ]
|
|
|
+ this.searchForm.creatTime = [ this.get7day(-6), this.get7day(0) ]
|
|
|
+ this.total = 0
|
|
|
+ this.pageNo = 1
|
|
|
+ },
|
|
|
+ // 获取近几天的数据
|
|
|
+ get7day(day){
|
|
|
+ let today = new Date()
|
|
|
+ let targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
|
|
|
+ today.setTime(targetday_milliseconds) //注意,这行是关键代码
|
|
|
+ let tYear = today.getFullYear()
|
|
|
+ let tMonth = today.getMonth()
|
|
|
+ let tDate = today.getDate()
|
|
|
+ tMonth = this.doHandleMonth(tMonth + 1)
|
|
|
+ tDate = this.doHandleMonth(tDate)
|
|
|
+ return tYear + "-" + tMonth + "-" + tDate
|
|
|
+ },
|
|
|
+ // 月份
|
|
|
+ doHandleMonth(month){
|
|
|
+ let m = month
|
|
|
+ if(month.toString().length == 1){
|
|
|
+ m = "0" + month
|
|
|
+ }
|
|
|
+ return m
|
|
|
+ },
|
|
|
+ // scroll-view到底部加载更多
|
|
|
+ onreachBottom() {
|
|
|
+ // if(this.list.length < this.total){
|
|
|
+ // this.pageNo += 1
|
|
|
+ // this.pageInit()
|
|
|
+ // }else{
|
|
|
+ // this.status = "nomore"
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ // 关闭筛选
|
|
|
closeDropdown() {
|
|
|
this.$refs.uDropdown.close()
|
|
|
- }
|
|
|
+ },
|
|
|
+ // 显示日期选择
|
|
|
+ onShowDatePicker(type){
|
|
|
+ this.type = type
|
|
|
+ this.showPicker = true
|
|
|
+ this.searchForm.creatTime = this[type]
|
|
|
+ },
|
|
|
+ // 日期选择
|
|
|
+ onSelected(e) {
|
|
|
+ this.showPicker = false
|
|
|
+ if(e) {
|
|
|
+ this[this.type] = e.value
|
|
|
+ }
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -60,8 +200,136 @@
|
|
|
height: calc(100vh - 44px);
|
|
|
}
|
|
|
.shopTourRecord-wrap{
|
|
|
+ // 筛选条件
|
|
|
.uDropdown{
|
|
|
-
|
|
|
+ background-color: #fff;
|
|
|
+ .screen-dropdown{
|
|
|
+ .slot-content{
|
|
|
+ background-color: #fff;
|
|
|
+ .scroll-view{
|
|
|
+ height: 300upx;
|
|
|
+ .screen-module{
|
|
|
+ margin: 20upx 30upx 20upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .screen-tit{
|
|
|
+ color: #464646;
|
|
|
+ font-size: 26upx;
|
|
|
+ width: 140upx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .screen-time-val{
|
|
|
+ flex-grow: 1;
|
|
|
+ font-size: 26upx;
|
|
|
+ background-color: #f4f4f4;
|
|
|
+ border-radius: 12upx;
|
|
|
+ padding: 10upx 14upx;
|
|
|
+ margin: 10upx 0;
|
|
|
+ text-align: center;
|
|
|
+ text{
|
|
|
+ display: inline-block;
|
|
|
+ width: 85%;
|
|
|
+ }
|
|
|
+ .close-circle{
|
|
|
+ display: inline-block;
|
|
|
+ padding-left: 3%;
|
|
|
+ vertical-align: bottom;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .screen-inp-val{
|
|
|
+ flex-grow: 1;
|
|
|
+ .screen-inp{
|
|
|
+ color: #464646;
|
|
|
+ font-size: 26upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 列表数据
|
|
|
+ .list-con{
|
|
|
+ .scroll-con{
|
|
|
+ height: 100%;
|
|
|
+ // 列表
|
|
|
+ .record-con{
|
|
|
+ .alert-tips{
|
|
|
+ padding: 20upx 30upx 10upx;
|
|
|
+ background-color: #fff;
|
|
|
+ text{
|
|
|
+ display: block;
|
|
|
+ font-size: 24upx;
|
|
|
+ padding: 4upx 10upx;
|
|
|
+ border: 1upx solid #fcbd71;
|
|
|
+ background-color: #fdf6ec;
|
|
|
+ border-radius: 6upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .record-item{
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 20upx 30upx 20upx;
|
|
|
+ padding: 14upx 30upx 20upx;
|
|
|
+ border-radius: 12upx;
|
|
|
+ .item-head{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10upx 0;
|
|
|
+ .item-c-tit{
|
|
|
+ flex-grow: 1;
|
|
|
+ padding-right: 18upx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .item-c-type{
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-main{
|
|
|
+ font-size: 26upx;
|
|
|
+ line-height: 48upx;
|
|
|
+ padding: 6upx 0;
|
|
|
+ position: relative;
|
|
|
+ .item-tit{
|
|
|
+ display: inline-block;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 8upx;
|
|
|
+ }
|
|
|
+ .item-val{
|
|
|
+ display: inline-block;
|
|
|
+ padding-left: 130upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-grid{
|
|
|
+ margin-top: 10upx;
|
|
|
+ .text-blue{
|
|
|
+ color: #2979ff;
|
|
|
+ }
|
|
|
+ .text-green{
|
|
|
+ color: #19be6b;
|
|
|
+ }
|
|
|
+ .text-red{
|
|
|
+ color: #fa3534;
|
|
|
+ }
|
|
|
+ .text-yellow{
|
|
|
+ color: #ff9900;
|
|
|
+ }
|
|
|
+ .grid-num{
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .grid-text{
|
|
|
+ font-size: 26upx;
|
|
|
+ padding-top: 10upx;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .loadmore{
|
|
|
+ padding: 30upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|