源文件

2024-05-23 14:39:33 +08:00
commit a1128dd791
2997 changed files with 500069 additions and 0 deletions
--- a/jeepay-ui-uapp-face/pages/order/components/OrderCard.vue
+++ b/jeepay-ui-uapp-face/pages/order/components/OrderCard.vue
@@ -0,0 +1,102 @@
+<template>
+  <view class="card-wrapper" @tap="emits('click')">
+    <view class="img-box" :style="{ backgroundColor: payImg(wayCodeType).bgColor }">
+      <image :src="payImg(wayCodeType).imgUrl" mode="scaleToFill" />
+    </view>
+    <view class="card-info">
+      <view class="card-title">
+        <view class="title">收款</view>
+        <view class="num">+{{ (amount / 100).toFixed(2) }}</view>
+      </view>
+      <view class="order-number">
+        <view class="order-title">订单编号：</view>
+        {{ payOrderId }}
+      </view>
+      <view class="card-time">
+        <view class="created-time">{{ createdAt }}</view>
+        <view class="card-state" :style="{ backgroundColor: payState(state).color }">{{ payState(state).text }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+const emits = defineEmits(['click'])
+const props = defineProps({
+  payOrderId: { type: String }, //订单编号
+  createdAt: { type: String }, //创建 时间
+  amount: { type: [String, Number] }, //收款金额
+  wayCodeType: { type: String }, // 支付方式
+  state: { type: [String, Number] }, // 状态
+})
+const payImg = uni.$J.dataMap.payImg
+const payState = uni.$J.dataMap.payStateMap
+</script>
+
+<style lang="scss" scoped>
+.card-wrapper {
+  display: flex;
+
+  margin: 30rpx;
+  padding: 20rpx 0 20rpx 20rpx;
+  background-color: #fff;
+  border-radius: 15rpx;
+
+  .img-box {
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 30rpx;
+    width: 20%;
+    border-radius: 14rpx;
+
+    image {
+      width: 80%;
+      height: 80%;
+    }
+  }
+
+  .card-info {
+    flex: 1;
+
+    .card-title {
+      display: flex;
+      justify-content: space-between;
+      font-size: 28rpx;
+      font-weight: 600;
+
+      .num {
+        margin-right: 20rpx;
+        color: rgba(45, 218, 119, 1);
+      }
+    }
+
+    .order-number {
+      display: flex;
+      margin: 20rpx 0;
+      font-size: 18rpx;
+      color: rgba(102, 102, 102, 1);
+    }
+
+    .card-time {
+      display: flex;
+      justify-content: space-between;
+
+      .created-time {
+        font-size: 18rpx;
+        color: rgba(179, 179, 179, 1);
+      }
+
+      .card-state {
+        padding: 8rpx 30rpx;
+        background-color: rgba(45, 218, 119, 1);
+        border-radius: 20rpx 0 0 20rpx;
+        font-size: 12rpx;
+        color: #fff;
+        letter-spacing: 2rpx;
+      }
+    }
+  }
+}
+</style>
--- a/jeepay-ui-uapp-face/pages/order/components/OrderScreen.vue
+++ b/jeepay-ui-uapp-face/pages/order/components/OrderScreen.vue
@@ -0,0 +1,173 @@
+<template>
+  <uni-drawer ref="refDrawer" mode="right">
+    <uni-nav-bar statusBar :border="false" backgroundColor="transparent" />
+    <view class="title">根据时间筛选</view>
+    <view class="time-wrapper">
+      <view class="time-star" @tap="refStarTime.show" :style="{ color: vdata.starTime ? '#000' : '#999' }">{{ vdata.starTime || '开始时间' }}</view>
+      ---
+      <view class="time-end" @tap="refEndTime.show" :style="{ color: vdata.endTime ? '#000' : '#999' }">{{ vdata.endTime || '结束时间' }}</view>
+    </view>
+    <view class="title">支付方式</view>
+    <view class="pay-model">
+      <block v-for="v in payModelList" :key="v.value">
+        <view class="model-item" :class="{ 'selected-item': vdata.payModel.includes(v.value) }" @tap="selectedItem(v.value, 'payModel')">{{ v.label }}</view>
+      </block>
+    </view>
+    <view class="title">订单状态</view>
+    <view class="state-list pay-model">
+      <block v-for="v in stateList" :key="v.value">
+        <view class="state-item model-item" :class="{ 'selected-item': vdata.payState.includes(v.value) }" @tap="selectedItem(v.value, 'payState')">{{ v.label }}</view>
+      </block>
+    </view>
+    <view class="footer-button">
+      <view @tap="reset">重置</view>
+      <view class="confirm" @tap="confirm">确认</view>
+    </view>
+  </uni-drawer>
+  <xp-picker ref="refStarTime" mode="ymdhi" v-model="vdata.starTime" @confirm="confirmStart"><view></view></xp-picker>
+  <xp-picker ref="refEndTime" mode="ymdhi" v-model="vdata.endTime" @confirm="confirmEnd"><view></view></xp-picker>
+</template>
+
+<script setup>
+import { inject, onMounted, reactive, ref } from 'vue'
+import { startAndEndTime } from '@/commons/utils/timeInspect'
+import dayjs from 'dayjs'
+const params = inject('params') //引入 父级注入的依赖
+const emits = defineEmits(['confirm'])
+const payModelList = [
+  { label: '云闪付', value: 'YSFPAY' },
+  { label: '支付宝', value: 'ALIPAY' },
+  { label: '银联', value: 'UNIONPAY' },
+  { label: '微信', value: 'WECHAT' },
+  { label: '其他', value: 'OTHER' },
+]
+const stateList = [
+  { label: '订单生成', value: '0' },
+  { label: '支付中', value: '1' },
+  { label: '支付成功', value: '2' },
+  { label: '支付失败', value: '3' },
+  { label: '已撤销', value: '4' },
+  { label: '已退款', value: '5' },
+  { label: '订单关闭', value: '6' },
+]
+const vdata = reactive({
+  starTime: '',
+  endTime: '',
+  payModel: [],
+  payState: [],
+})
+const refStarTime = ref(null)
+const refEndTime = ref(null)
+const refDrawer = ref(null)
+const open = () => {
+  refDrawer.value.open()
+}
+const close = () => {
+  refDrawer.value.close()
+}
+const confirmStart = (e) => {
+  vdata.starTime = dayjs(e.timestamp).format('YYYY-MM-DD hh:mm')
+  console.log(e)
+}
+const confirmEnd = (e) => {
+  vdata.endTime = dayjs(e.timestamp).format('YYYY-MM-DD hh:mm')
+}
+const selectedItem = (v, key) => {
+  if (vdata[key].includes(v))
+    return vdata[key].splice(
+      vdata[key].findIndex((item) => item == v),
+      1
+    )
+
+  vdata[key].push(v)
+}
+const confirm = () => {
+  if (vdata.starTime || vdata.endTime) {
+    if (!startAndEndTime(vdata.starTime, vdata.endTime)) return
+    params.queryDateRange = `customDateTime_${vdata.starTime + ':00'}_${vdata.endTime + ':00'}`
+  }
+  params.unionOrderState = vdata.payState.join(',')
+  params.unionWayCodeType = vdata.payModel.join(',')
+  emits('confirm')
+  close()
+}
+const reset = () => {
+  vdata.starTime = ''
+  vdata.endTime = ''
+  vdata.payModel = []
+  vdata.payState = []
+}
+defineExpose({ open, close })
+</script>
+
+<style lang="scss" scoped>
+.title {
+  margin-top: 20rpx;
+  margin-left: 30rpx;
+  font-size: 24rpx;
+  font-weight: 600;
+  letter-spacing: 2rpx;
+}
+.time-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 20rpx;
+  font-size: 16rpx;
+  letter-spacing: 2rpx;
+  .time-star,
+  .time-end {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 30rpx;
+    height: 50rpx;
+    background-color: rgb(235, 227, 227);
+    border-radius: 10rpx;
+  }
+}
+.pay-model {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 10rpx;
+  .model-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    margin: 20rpx;
+    height: 50rpx;
+    width: 24%;
+    font-size: 16rpx;
+    letter-spacing: 2rpx;
+    background-color: rgba($color: #000000, $alpha: 0.15);
+    border-radius: 10rpx;
+  }
+}
+.footer-button {
+  display: flex;
+  justify-content: space-around;
+  padding: 30rpx;
+  margin-top: 80rpx;
+  color: #fff;
+  font-size: 18rpx;
+  letter-spacing: 2rpx;
+  view {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 220rpx;
+    height: 60rpx;
+    border-radius: 10rpx;
+    background-color: rgba($color: #666666, $alpha: 0.3);
+  }
+  .confirm {
+    background-color: $v-primary;
+  }
+}
+.selected-item {
+  background-color: $v-primary !important;
+  color: #fff;
+}
+</style>
--- a/jeepay-ui-uapp-face/pages/order/order.vue
+++ b/jeepay-ui-uapp-face/pages/order/order.vue
@@ -0,0 +1,138 @@
+<template>
+  <view class="page-content">
+    <!-- #ifdef MP-WEIXIN -->
+    <uni-nav-bar statusBar :border="false" leftIcon="left" fixed title="订单列表" backgroundColor="#f5f7f5"
+      @clickLeft="navBack" />
+    <!-- #endif -->
+    <!--#ifdef  MP-ALIPAY  -->
+    <uni-nav-bar statusBar :border="false" title="订单列表" fixed backgroundColor="#f5f7f5" @clickLeft="navBack" />
+    <!-- #endif -->
+    <view class="order-search-content">
+      <view class="order-search">
+        <image src="/static/iconImg/icon-search.svg" mode="scaleToFill" />
+        <input type="text" v-model="vdata.unionOrderId" confirm-type="search" @confirm="search"
+          placeholder="请输入订单号查询" />
+      </view>
+      <image class="screen" src="/static/iconImg/icon-screen.svg" mode="scaleToFill" @tap="refScreen.open" />
+    </view>
+    <!-- 卡片部分 -->
+    <block v-for="v in vdata.orderList" :key="v.payOrderId">
+      <OrderCard v-bind="v" @click="toDetails(v.payOrderId)" />
+    </block>
+    <view class="list-null" v-if="!vdata.hasNext">暂无更多数据</view>
+  </view>
+  <OrderScreen ref="refScreen" @confirm="search" />
+</template>
+
+<script setup>
+import { provide, reactive, ref } from 'vue'
+import { onLoad, onReachBottom, onUnload } from '@dcloudio/uni-app'
+import { req, API_URL_PAY_ORDER_LIST } from '@/http/apiManager.js'
+import OrderScreen from './components/OrderScreen'
+import OrderCard from './components/OrderCard.vue'
+const refScreen = ref(null)
+const vdata = reactive({
+  orderList: [],
+  unionOrderId: '',
+  hasNext: true,
+})
+const params = { pageSize: 10, pageNumber: 1, queryDateRange: '' }
+provide('params', params)
+const getList = () => {
+  if (!vdata.hasNext) return
+  req.list(API_URL_PAY_ORDER_LIST, params).then(({ bizData }) => {
+    vdata.orderList.push(...bizData.records)
+    vdata.hasNext = bizData.hasNext
+  })
+}
+getList()
+const search = () => {
+  params.unionOrderId = vdata.unionOrderId
+  vdata.orderList = []
+  params.pageNumber = 1
+  vdata.hasNext = true
+  getList()
+}
+onReachBottom(() => {
+  params.pageNumber += 1
+  getList()
+})
+// 跳转详情页
+const toDetails = (orderId) => uni.navigateTo({ url: '/pages/order/orderDetails?orderId=' + orderId })
+uni.$on('ORDER_LIST', (data) => {
+  console.log('刷新列表');
+  vdata.orderList = []
+  params.pageNumber = 1
+  getList()
+})
+const navBack = () => {
+  uni.navigateBack()
+}
+onUnload(() => {
+  uni.$off('ORDER_LIST')
+})
+</script>
+
+<style lang="scss" scoped>
+.page-content {
+  padding: 0.1rpx;
+  min-height: calc(100vh - 5rpx);
+  background-color: #f5f7f5;
+
+  .order-search-content {
+    display: flex;
+    align-items: center;
+
+    .order-search {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      margin: 30rpx;
+      margin-bottom: 0;
+      height: 80rpx;
+      background-color: #fff;
+      border-radius: 15rpx;
+
+      image {
+        margin-left: 20rpx;
+        width: 35rpx;
+        height: 35rpx;
+      }
+
+      input {
+        width: 100%;
+        height: 100%;
+        font-size: 22rpx;
+        margin-left: 20rpx;
+      }
+    }
+
+    .screen {
+      margin-right: 30rpx;
+      transform: translateY(15rpx);
+      width: 50rpx;
+      height: 50rpx;
+    }
+  }
+}
+
+.list-null {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #666;
+  margin: 30rpx 0;
+  padding: 0 30rpx;
+  font-size: 24rpx;
+  font-weight: 600;
+
+  &::after,
+  &::before {
+    content: "";
+    display: block;
+    width: 35%;
+    height: 2rpx;
+    background-color: #ededed;
+  }
+}
+</style>
--- a/jeepay-ui-uapp-face/pages/order/orderDetails.vue
+++ b/jeepay-ui-uapp-face/pages/order/orderDetails.vue
@@ -0,0 +1,133 @@
+<template>
+  <view class="details-header-card">
+    <view class="order-num">
+      <view class="img-box" :style="{ backgroundColor: payModel(vdata.wayCodeType).bgColor }">
+        <image :src="payModel(vdata.wayCodeType).imgUrl" mode="scaleToFill" />
+      </view>
+      <view class="payment">￥{{ (vdata.amount / 100).toFixed(2) }}</view>
+    </view>
+    <view class="card-text">收款金额</view>
+    <view class="refund" v-if="vdata.refundState != 2" @tap="toRefund">退款</view>
+  </view>
+  <view class="line" style="height: 20rpx"></view>
+  <view class="order-info">
+    <view class="title">订单金额</view>
+    <view class="info">￥{{ (vdata.amount / 100).toFixed(2) }}</view>
+  </view>
+  <view class="order-info">
+    <view class="title">退款金额</view>
+    <view class="info">￥{{ (vdata.refundAmount / 100).toFixed(2) }}</view>
+  </view>
+  <view class="order-info">
+    <view class="title">订单号</view>
+    <view class="info">{{ vdata.payOrderId }}</view>
+  </view>
+  <view class="order-info">
+    <view class="title">订单时间</view>
+    <view class="info">{{ vdata.createdAt }}</view>
+  </view>
+  <view class="line"></view>
+  <view class="order-info">
+    <view class="title">支付方式</view>
+    <view class="info">{{ payModel(vdata.wayCodeType).title }}</view>
+  </view>
+  <view class="order-info">
+    <view class="title">订单状态</view>
+    <view class="info">{{ payState(vdata.state).text }}</view>
+  </view>
+  <view class="line"></view>
+  <view class="order-info">
+    <view class="title">门店名称</view>
+    <view class="info">{{ vdata.storeName }}</view>
+  </view>
+  <view class="order-info">
+    <view class="title">操作员名称</view>
+    <view class="info">{{ vdata.storeUserName }}</view>
+  </view>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+import { onLoad, onUnload } from '@dcloudio/uni-app'
+import { req, API_URL_PAY_ORDER_LIST } from '@/http/apiManager.js'
+onLoad((options) => {
+  getDetails(options.orderId)
+})
+const vdata = reactive({})
+const payModel = uni.$J.dataMap.payImg
+const payState = uni.$J.dataMap.payStateMap
+const getDetails = (id) => {
+  req.getById(API_URL_PAY_ORDER_LIST, id).then(({ bizData }) => {
+    Object.assign(vdata, bizData)
+  })
+}
+const toRefund = (oderId) => uni.navigateTo({ url: '/pages/orderRefund/orderRefund?orderId=' + vdata.payOrderId })
+uni.$on('ORDER_DETAILS', (data) => {
+  getDetails(vdata.payOrderId)
+})
+onUnload(() => {
+  uni.$off('ORDER_DETAILS')
+})
+</script>
+
+<style lang="scss" scoped>
+.details-header-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 280rpx;
+  .order-num {
+    display: flex;
+    align-items: center;
+    .img-box {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-right: 20rpx;
+      width: 80rpx;
+      height: 80rpx;
+      border-radius: 14rpx;
+      image {
+        width: 80%;
+        height: 80%;
+      }
+    }
+    .payment {
+      display: flex;
+      justify-content: center;
+      text-align: center;
+      font-size: 40rpx;
+      font-weight: 700;
+      color: rgba(45, 218, 119, 1);
+    }
+  }
+  .card-text {
+    margin-top: 30rpx;
+    color: #666;
+    font-size: 24rpx;
+  }
+}
+.line {
+  width: 100%;
+  height: 2rpx;
+  background-color: #ededed;
+}
+.order-info {
+  display: flex;
+  justify-content: space-between;
+  margin: 30rpx 20rpx;
+  font-size: 22rpx;
+  .info {
+    color: #666;
+  }
+}
+.refund {
+  padding: 15rpx 30rpx;
+  background-color: tomato;
+  margin-top: 30rpx;
+  border-radius: 14rpx;
+  color: rgba($color: #fff, $alpha: 0.7);
+  font-size: 20rpx;
+}
+</style>