|
|
@@ -0,0 +1,402 @@
|
|
|
+<template>
|
|
|
+ <ay-container :showSpac="false">
|
|
|
+ <ay-sticky relativeTo="#orderList" targetSelector="#top">
|
|
|
+ <div class="center pt-spac pb-spac" id="top">
|
|
|
+ <uni-datetime-picker
|
|
|
+ v-model="data.range"
|
|
|
+ type="daterange"
|
|
|
+ :clearIcon="false"
|
|
|
+ @change="methods.changeDate"
|
|
|
+ />
|
|
|
+ <button
|
|
|
+ type="primary"
|
|
|
+ plain="true"
|
|
|
+ size="mini"
|
|
|
+ class="ml-spac"
|
|
|
+ @click="methods.showFilters"
|
|
|
+ >
|
|
|
+ 筛选{{ data.checkCount ? ` · ${data.checkCount}` : '' }}
|
|
|
+ </button>
|
|
|
+ <!-- <uni-badge type="primary" :text="data.checkCount" absolute="rightTop" :offset="[-3, 3]">
|
|
|
+ <uni-icons
|
|
|
+ class="ml-spacd2"
|
|
|
+ type="settings"
|
|
|
+ color=""
|
|
|
+ size="24"
|
|
|
+ @click="methods.showFilters"
|
|
|
+ />
|
|
|
+ </uni-badge> -->
|
|
|
+ </div>
|
|
|
+ </ay-sticky>
|
|
|
+ <div class="center justify-between s-fz tags">
|
|
|
+ <div
|
|
|
+ class="text-center chunk tag"
|
|
|
+ v-for="(t, i) in data.tags"
|
|
|
+ :key="i"
|
|
|
+ :class="{ odd: i % 2 === 0 }"
|
|
|
+ >
|
|
|
+ <div>{{ t.title }}</div>
|
|
|
+ <div>{{ t.unit }}</div>
|
|
|
+ <div class="font-bold p-fz">
|
|
|
+ {{ func.convert.nullView(t.value, 1) }}
|
|
|
+ <!-- <ay-numer :value="func.convert.nullView(t.value, 1)" /> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="orderList">
|
|
|
+ <div
|
|
|
+ class="chunk childs-fcjb-mbd2"
|
|
|
+ :class="{ 'm-b-0': i === data.orderList.length - 1 }"
|
|
|
+ v-for="(o, i) in data.orderList"
|
|
|
+ :key="i"
|
|
|
+ @click="methods.goDetail(o)"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <div class="font-bold p-fz">{{ o.nickName }}</div>
|
|
|
+ <div>{{ func.convert.getOrderStatusStr(o.settleStatus) }}</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div>加气量(公斤)</div>
|
|
|
+ <div>{{ o.gasQty }}</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div>小计(元)</div>
|
|
|
+ <div class="font-bold bs-fz">{{ o.allAmount }}</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="gray-color">{{ func.getDate(o.createDate).format() }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <ay-drawer
|
|
|
+ ref="drawer"
|
|
|
+ mode="right"
|
|
|
+ :maskClick="true"
|
|
|
+ :width="config.common.SystemInfo.windowWidth"
|
|
|
+ :top="topHeightPX"
|
|
|
+ @change="methods.drawerChange"
|
|
|
+ >
|
|
|
+ <div class="m-spac">
|
|
|
+ <div class="center b-fz mb-spac">
|
|
|
+ <div class="font-bold">
|
|
|
+ <span>筛选</span>
|
|
|
+ <span v-if="checkCount">
|
|
|
+ <span>·</span>
|
|
|
+ <span class="p-color">{{ checkCount }}</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <uni-icons
|
|
|
+ type="closeempty"
|
|
|
+ color=""
|
|
|
+ size="24"
|
|
|
+ class="abs-right"
|
|
|
+ @click="methods.closeFilters"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div>
|
|
|
+ <div v-for="(f, i) in filtersView" :key="i" :class="{ 'nmt-spac': f.type === 1 }">
|
|
|
+ <div
|
|
|
+ class="section"
|
|
|
+ :class="{
|
|
|
+ 'font-bold': !f.type,
|
|
|
+ 'ml-spacd2': f.type === 1,
|
|
|
+ 's-fz': f.type === 1,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{ f.label }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="center justify-between flex-wrap s-fz">
|
|
|
+ <div
|
|
|
+ class="center whitespace-nowrap p-spacd2 chunk f-item"
|
|
|
+ :class="{
|
|
|
+ 'checked-full': item.checked,
|
|
|
+ isall: item.value === staticData.nullValue,
|
|
|
+ }"
|
|
|
+ v-for="(item, ii) in f.items"
|
|
|
+ :key="ii"
|
|
|
+ @click="methods.filterCheck(f, item)"
|
|
|
+ >
|
|
|
+ <!-- <div class="tag-rb" v-if="item.isPerson">个人支付</div> -->
|
|
|
+ {{ item.label }}
|
|
|
+ </div>
|
|
|
+ <div class="f-item" v-if="f.items.length % 3 === 2"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="btns">
|
|
|
+ <button @click="methods.clearFilters">清除</button>
|
|
|
+ <button type="primary" @click="methods.saveFilters">确定</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </ay-drawer>
|
|
|
+ </ay-container>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+const staticData = {
|
|
|
+ /** 缓存筛选条件key名 */
|
|
|
+ fcn: 'filterCheckeds',
|
|
|
+ /** 全部选项的value值 */
|
|
|
+ nullValue: '-1',
|
|
|
+ payTypeGroups: [
|
|
|
+ { label: '支付方式', type: 0, hasStatus: ['-1', '10'] },
|
|
|
+ { label: '个人支付', type: 1, hasStatus: ['3'] },
|
|
|
+ { label: '所属物流', type: 1, hasStatus: ['0', '1', '2'] },
|
|
|
+ ],
|
|
|
+}
|
|
|
+const drawer = ref()
|
|
|
+const topHeight = computed(() => config.common.safeAreaTopHeight)
|
|
|
+const topHeightPX = computed(() => `${topHeight.value}px`)
|
|
|
+
|
|
|
+const data = ay.initData({
|
|
|
+ /** 确定选中条件数量 */
|
|
|
+ checkCount: 0,
|
|
|
+ filters: [
|
|
|
+ {
|
|
|
+ label: '结算状态',
|
|
|
+ value: 'settleStatus',
|
|
|
+ items: func.convert.getCheckItem(config.common.settleStatus),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '支付方式',
|
|
|
+ value: 'payType',
|
|
|
+ items: func.convert.getCheckItem(config.common.payTypes),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '交易模式',
|
|
|
+ value: 'tradeTypes',
|
|
|
+ items: func.convert.getCheckItem(config.common.tradeType),
|
|
|
+ },
|
|
|
+ ] as any[],
|
|
|
+ range: [],
|
|
|
+ orderList: [] as 订单详情[],
|
|
|
+ tags: [
|
|
|
+ {
|
|
|
+ field: 'allValue',
|
|
|
+ title: '加气总额',
|
|
|
+ unit: '(元)',
|
|
|
+ value: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'allQty',
|
|
|
+ title: '加气总量',
|
|
|
+ unit: '(公斤)',
|
|
|
+ value: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'count',
|
|
|
+ title: '订单总数',
|
|
|
+ unit: '(笔)',
|
|
|
+ value: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'allPrefer',
|
|
|
+ title: '优惠总额',
|
|
|
+ unit: '(元)',
|
|
|
+ value: '',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+})
|
|
|
+const filtersView = computed(() => {
|
|
|
+ const rv = [...data.filters]
|
|
|
+ const payTypeIndex = rv.findIndex((f) => f.value === 'payType')
|
|
|
+ const payTypeItem = rv[payTypeIndex]
|
|
|
+ const groups = staticData.payTypeGroups.map((m) => {
|
|
|
+ return {
|
|
|
+ label: m.label,
|
|
|
+ type: m.type,
|
|
|
+ items: payTypeItem.items.filter((f) => m.hasStatus.includes(f.value)),
|
|
|
+ target: payTypeItem,
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ rv.splice(payTypeIndex, 1, ...groups)
|
|
|
+ return rv
|
|
|
+})
|
|
|
+/** 选中的条件 */
|
|
|
+const filterCheckeds = computed(() => {
|
|
|
+ const fcs: Record<string, string[]> = {}
|
|
|
+ data.filters.forEach((f) => {
|
|
|
+ const curItems = f.items
|
|
|
+ .filter((ff) => ff.checked && ff.value !== staticData.nullValue)
|
|
|
+ .map((m) => m.value)
|
|
|
+ if (curItems.length) {
|
|
|
+ fcs[f.value] = curItems
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return fcs
|
|
|
+})
|
|
|
+/** 临时选中条件数量 */
|
|
|
+const checkCount = computed(() =>
|
|
|
+ Object.values(filterCheckeds.value)
|
|
|
+ .map((m) => m.length + (m.includes(staticData.nullValue) ? -1 : 0))
|
|
|
+ .reduce((a, b) => a + b, 0),
|
|
|
+)
|
|
|
+const methods = {
|
|
|
+ goDetail(od) {
|
|
|
+ ay.goPage(config.pages.order_orderDetail, { params: od })
|
|
|
+ },
|
|
|
+ /** 从缓存 初始化查询条件选中状态 */
|
|
|
+ getStoreFilterCheckeds() {
|
|
|
+ return uni.getStorageSync(staticData.fcn) || {}
|
|
|
+ },
|
|
|
+ /** 从缓存 初始化查询条件选中状态 */
|
|
|
+ initFiltersCheck() {
|
|
|
+ const filterCheckeds: any = methods.getStoreFilterCheckeds()
|
|
|
+ if (Object.keys(filterCheckeds).length) {
|
|
|
+ data.filters.forEach((f) => {
|
|
|
+ if (filterCheckeds[f.value]) {
|
|
|
+ f.items.forEach((ff) => {
|
|
|
+ ff.checked = filterCheckeds[f.value]?.includes(ff.value)
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ f.items[0].checked = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 计算条件选中数量 */
|
|
|
+ setCheckCount() {
|
|
|
+ const filterCheckeds = methods.getStoreFilterCheckeds()
|
|
|
+ if (filterCheckeds) {
|
|
|
+ data.checkCount = Object.values<string[]>(filterCheckeds)
|
|
|
+ .map((m) => m.length + (m.includes(staticData.nullValue) ? -1 : 0))
|
|
|
+ .reduce((a, b) => a + b, 0)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ drawerChange(args) {
|
|
|
+ // 打开抽屉初始化条件选择状态
|
|
|
+ if (args) {
|
|
|
+ methods.initFiltersCheck()
|
|
|
+ } else {
|
|
|
+ // 关闭抽屉计算选中数量
|
|
|
+
|
|
|
+ methods.setCheckCount()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ saveFilters() {
|
|
|
+ // 有选中的条件
|
|
|
+ if (Object.keys(filterCheckeds.value).length) {
|
|
|
+ uni.setStorageSync(staticData.fcn, filterCheckeds.value)
|
|
|
+ } else {
|
|
|
+ uni.removeStorageSync(staticData.fcn)
|
|
|
+ }
|
|
|
+ methods.closeFilters()
|
|
|
+ methods.getOrderList()
|
|
|
+ },
|
|
|
+ clearFilters() {
|
|
|
+ data.filters.forEach((f) => {
|
|
|
+ f.items.forEach((ff) => {
|
|
|
+ ff.checked = false
|
|
|
+ if (ff.value === staticData.nullValue) {
|
|
|
+ ff.checked = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ filterCheck(fg, item) {
|
|
|
+ // 点击全部
|
|
|
+ const realfg = fg.target ? fg.target : fg
|
|
|
+ if (item.value === staticData.nullValue) {
|
|
|
+ realfg.items.forEach((f) => (f.checked = false))
|
|
|
+ item.checked = true
|
|
|
+ } else {
|
|
|
+ item.checked = !item.checked
|
|
|
+
|
|
|
+ realfg.items[0].checked = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getOrderList(cras = store.curPage.getDefAyContainerRefreshArgs()) {
|
|
|
+ const paramFilters: Record<string, string> = {}
|
|
|
+ const storeFilterCheckeds = methods.getStoreFilterCheckeds()
|
|
|
+ Object.keys(storeFilterCheckeds).forEach(
|
|
|
+ (f) => (paramFilters[f] = storeFilterCheckeds[f].toString()),
|
|
|
+ )
|
|
|
+ webapi.strategy
|
|
|
+ .get_order_list<{ param: { gasstationId?: string } }>(
|
|
|
+ {
|
|
|
+ page: cras.page,
|
|
|
+ size: cras.size,
|
|
|
+ param: {
|
|
|
+ startCreateDate: data.range[0] + ' 00:00:00',
|
|
|
+ endCreateDate: data.range[1] + ' 23:59:59',
|
|
|
+ ...paramFilters,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ { showLoading: !cras.isAdd },
|
|
|
+ )
|
|
|
+ .then((res) => {
|
|
|
+ data.tags.forEach((f) => {
|
|
|
+ f.value = res[f.field]
|
|
|
+ })
|
|
|
+ if (cras.isAdd) {
|
|
|
+ data.orderList.push(...res.page.records)
|
|
|
+ } else {
|
|
|
+ data.orderList = res.page.records
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ changeDate(e) {
|
|
|
+ methods.getOrderList()
|
|
|
+ },
|
|
|
+ showFilters() {
|
|
|
+ drawer.value.open()
|
|
|
+ },
|
|
|
+ closeFilters() {
|
|
|
+ drawer.value.close()
|
|
|
+ },
|
|
|
+}
|
|
|
+
|
|
|
+ay.entrance((args) => {
|
|
|
+ if (args.loadType === enums.LoadType.onLoad) {
|
|
|
+ // 初始化日期范围
|
|
|
+ const endDate = func.getDate(Date.now())
|
|
|
+ const startDate = endDate.add(-30, 'day')
|
|
|
+ data.range = [
|
|
|
+ func.getDate(startDate).format(enums.FormatType.YMD),
|
|
|
+ func.getDate(endDate).format(enums.FormatType.YMD),
|
|
|
+ ]
|
|
|
+
|
|
|
+ methods.setCheckCount()
|
|
|
+ }
|
|
|
+ methods.getOrderList(args.cras)
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.abs-right {
|
|
|
+ position: absolute;
|
|
|
+ right: $p-spac;
|
|
|
+}
|
|
|
+.f-item {
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 31%;
|
|
|
+ &.isall {
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ &.checked {
|
|
|
+ color: $p-color;
|
|
|
+ }
|
|
|
+}
|
|
|
+.tags {
|
|
|
+ > .tag {
|
|
|
+ min-width: 20%;
|
|
|
+ max-width: 25%;
|
|
|
+ padding: $p-spacd2 0;
|
|
|
+ background-color: #d5f8e9;
|
|
|
+ }
|
|
|
+ .odd {
|
|
|
+ background-color: #d5e9fa;
|
|
|
+ }
|
|
|
+ // > div:nth-child(odd) {
|
|
|
+ // background-color: #d5e9fa;
|
|
|
+ // }
|
|
|
+ // > div:nth-child(even) {
|
|
|
+ // background-color: #d5f8e9;
|
|
|
+ // }
|
|
|
+}
|
|
|
+</style>
|