first

pages/order/order.vue

@@ -0,0 +1,140 @@
+<template>
+  <JeepayBackground>
+    <JeepayCustomNavbar>
+      <view class="store-name" @tap="selectedStore">{{ vdata.store.storeName  }}<image src="/static/iconImg/icon-arrow-black.svg" mode="scaleToFill" /></view>
+    </JeepayCustomNavbar>
+    <view class="input-wrapper">
+      <view class="input-main" @tap="go.toSearchPage('payOrder')">
+        <image src="/static/iconImg/icon-search.svg" mode="scaleToFill" />
+        <input type="text" placeholder="搜索订单号" disabled placeholder-style="color:rgba(0, 0, 0, 0.35)" />
+      </view>
+      <view class="screen-wrapper flex-center" @tap="screen.open()">
+        <image src="/static/iconImg/icon-screen.svg" mode="scaleToFill" />
+        筛选
+      </view>
+    </view>
+    <JeepayTableList ref="jeepayTableListRef" :reqTableDataFunc="reqTableDataFunc" :searchData="vdata.searchData">
+      <template #tableBody="{ record }">
+        <PayOrderRender :record="record" />
+      </template>
+    </JeepayTableList>
+    <OrderScreen ref="screen" />
+  </JeepayBackground>
+
+  <!-- 选择门店 -->
+  <JeepayBizinfoSelect :isShowAllBiz="true" ref="jeepayPopupListSelect" />
+</template>
+
+<script setup>
+import { reactive, ref, computed, provide } from 'vue'
+import { onReachBottom, onUnload } from '@dcloudio/uni-app'
+import go from '@/commons/utils/go.js'
+import { stateList } from './components/stateList.js'
+import OrderScreen from './components/OrderScreen.vue'
+import PayOrderRender from '@/pages/list/render/PayOrderRender.vue'
+import { req, reqLoad, API_URL_PAY_ORDER_LIST, API_URL_MCH_STORE_LIST } from '@/http/apiManager.js'
+import emit from '@/commons/utils/emit.js'
+
+onReachBottom(() => {})
+
+// 监听 更新事件
+onUnload(() => uni.$off(emit.ENAME_REF_PAY_ORDER))
+uni.$on(emit.ENAME_REF_PAY_ORDER, function (data) {
+  jeepayTableListRef.value.refTable(true)
+})
+
+const screen = ref(null) //获取抽屉实例
+const jeepayTableListRef = ref()
+// 获取门店选择弹窗实例
+const jeepayPopupListSelect = ref(null)
+const vdata = reactive({
+  // 搜索对象 默认查询条件 今天  成功和已退款
+  searchData: {
+    queryDateRange: 'today',
+    unionOrderState: '2,5',
+  },
+  store: {
+    storeId: '',
+    storeName: '全部门店',
+  },
+})
+
+// 向子组件注入： 搜索条件
+provide(
+  'searchData',
+  computed(() => vdata.searchData)
+)
+
+provide('refTableFunc', refTableFunc)
+const toDetail = () => uni.navigateTo({ url: '/pages/order/orderDetail' })
+
+// 请求
+function reqTableDataFunc(params) {
+  return reqLoad.list(API_URL_PAY_ORDER_LIST, params)
+}
+// 选择门店
+const selectedStore = () => {
+  jeepayPopupListSelect.value.open(vdata.store).then((selected) => {
+    if (selected) {
+      vdata.store = selected
+      vdata.searchData.storeId = selected.storeId
+      refTableFunc()
+    }
+  })
+}
+// 点击筛选条件的确定按钮
+function refTableFunc() {
+  jeepayTableListRef.value.refTable(true)
+}
+</script>
+
+<style lang="scss" scoped>
+.store-name {
+  display: flex;
+  align-items: center;
+  font-size: 33rpx;
+  font-weight: 500;
+  image {
+    width: 44rpx;
+    height: 44rpx;
+    margin-left: 5rpx;
+    transform: rotate(180deg);
+  }
+}
+.input-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 30rpx;
+  padding-top: 22rpx;
+  height: 110rpx;
+  background-color: $J-bg-ff;
+  .input-main {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    height: 70rpx;
+    background: $J-bg-f5;
+    border-radius: $J-b-r12;
+    image {
+      padding: 22rpx;
+      width: 26rpx;
+      height: 26rpx;
+    }
+    input {
+      flex: 1;
+      font-size: 27rpx;
+    }
+  }
+  .screen-wrapper {
+    margin: 0 12rpx 0 20rpx;
+    font-size: 32rpx;
+    color: $J-color-t99;
+    image {
+      width: 28rpx;
+      height: 26rpx;
+      padding: 0 21rpx;
+    }
+  }
+}
+</style>