<!-- yangbuyi Copyright (c) https://yby6.com 2023. -->
<script setup>
  import { onLoad, onReady } from '@dcloudio/uni-app'
  import { getCurrentInstance, ref } from "vue";
  import Tabbar from "../tabbar/tabbar.vue";

  // Получить текущий экземпляр
  const { proxy } = getCurrentInstance()
  // слой загрузки
  const loading = ref(false)


  // =========================Жизненный цикл==================== ====
  onLoad(() => {
    console.log('onLoad');
  });

  onReady(() => {
    console.log('onReady');
  });
</script>

<template>
  <view class="app-container">
    <view class="container">
      <!--   верхняя часть   -->
      <view>
        <u-notice-bar color="red" text="Уведомление：Мини Программа может просматривать ограниченное отображение около 50 платежных данных. Для получения полной информации перейдите на сайт. кPCконец!!!"></u-notice-bar>
        <view class="PaymentChannel_title">
          <u-tooltip text="ПК: WeChat Система оплаты: https://lzys522.cn/wx" copyText="https://lzys522.cn/wx"
            overlay></u-tooltip>
        </view>
        <view class="PaymentChannel_title">
          <u-tooltip text="Примечание: 0,4Вот и все, вы можете вернуть список заказов после успешной оплаты.»
            copyText="Примечание: 0,4Вот и все, вы можете вернуть список заказов после успешной оплаты.»
            overlay></u-tooltip>
        </view>
        <view class="PaymentChannel_title"
          style="color: red;  margin-bottom: 10px;font-size: 14px;height: auto !important;">
          <u-tooltip text="Склад с открытым исходным кодом: https://gitee.com/yangbuyi/wxDemo" copyText="https://gitee.com/yangbuyi/wxDemo"
            overlay></u-tooltip>
        </view>
      </view>
      <!--   нижняя часть   -->
      <view>

      </view>

      <!--    слой загрузки    -->
      <u-loading-page :loading="loading"/>
      <!--    меню    -->
      <tabbar selected="1"></tabbar>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  ::v-deep .u-cell__body__content {
    width: 70%;
  }

  .btn {
    margin-left: 6px;
    display: inline-block;
  }

  .payView {
    /*float:right*/
    display: inline-block;
    text-align: right;
    vertical-align: baseline;
    float: right;
  }

  .time {
    @include flex;
    align-items: center;

    &__custom {
      margin-top: 4px;
      width: 22px;
      height: 22px;
      background-color: $u-primary;
      border-radius: 4px;
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      justify-content: center;
      align-items: center;

      &__item {
        color: #fff;
        font-size: 12px;
        text-align: center;
      }
    }

    &__doc {
      color: $u-primary;
      padding: 0px 4px;
    }

    &__item {
      color: #606266;
      font-size: 15px;
      margin-right: 4px;
    }
  }
</style>

    {
      "path": "pages/order/order",
      "style": {
        "navigationBarTitleText": ""
      }
    },

{
  "pagePath": "pages/order/order"
},

// ==========================данные==========================
  const tabList = ref([
    { name: "все" },
    { name: «Не оплачено» },
    { name: «Возврат в процессе» },
    { name: «Возврат» },
    { name: «Платеж успешен» },
    { name: "тайм-аут закрыт" },
    { name: «Отмена пользователя» }
  ]);

<u-tabs
  :list="tabList"
  lineWidth="30"
  lineColor="#ffb9b9"
  :activeStyle="{
  color: '#FF8B8B',
  fontWeight: 'bold',
  transform: 'scale(1.06)',
  }"
  :inactiveStyle="{
  color: '#303133',
  transform: 'scale(1)'
  }"
  itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;margin-bottom: 2px;"
  >
</u-tabs>

код метода

// нижний триггер
const scrolltolower = (data) => {
  console.log(data);
};

// моделированиеданные
const loadmore = () => {
  for (let i = 0; i < 10; i++) {
    indexList.value.push({
      url: urls[2],
    });
  }
};

Данные моделирования загрузки жизненного цикла
  
onLoad(() => {
  loadmore();
  console.log('onLoad');
});
  страницакод <u-list
    @scrolltolower="scrolltolower"
>
  <u-list-item
      v-for="(item, index) in indexList"
      :key="index"
  >
    <u-cell>
      <template #title>
        <view>
          Я - титул
        </view>
        <template #label>
          <view>
            я субтитр
          </view>
        </template>
      </template>
    </u-cell>
  </u-list-item>
</u-list>

// yangbuyi Copyright (c) https://yby6.com 2023.

import request from '@/utils/request'

export default {
    // Список заказов запроса
    orderUniAppPage(data) {
        return request({
            url: '/api/orderInfo/orderUniAppPage',
            method: 'get',
            params: data
        })
    }
}

<u-list-item
  v-for="(item, index) in orderList" :key="index">
     <u-cell>
       <template #title>
       <view>
       <view>
       <view style="display: inline-block">
       <u-tag :text="item.title"></u-tag>
       </view>

       <view class="payView">
       <view>
       <u-tag :text="item.orderStatus" v-if="item.orderStatus === 'еще нетплатить'"></u-tag>
       <u-tag :text="item.orderStatus" v-if="item.orderStatus === «Платеж успешен»» type="success"></u-tag>
       <u-tag :text="item.orderStatus" v-if="item.orderStatus === «Тайм-аут закрыт»» type="warning"></u-tag>
       <u-tag :text="item.orderStatus" v-if="item.orderStatus === «Пользователь отменен»» type="info"></u-tag>
       <u-tag :text="item.orderStatus" v-if="item.orderStatus === «Возврат в процессе»» type="danger"></u-tag>
       <u-tag :text="item.orderStatus" v-if="item.orderStatus === «Возврат» type="info"></u-tag>
       </view>

       </view>
       <view style="margin-top: 5px;">
       Плательщик заказа: {{ item.title.split('-')[1] ? item.title.split('-')[1] : «Пользователи ПК» }}
  </view>
    </view>
    </view>


    <template #label>
    <view style="float:left;">
    <view style="text-align: left;">
    Сумма заказа: {{ item.totalFee / 100 }} Юань
    </view>
    <view style="text-align: left;">
    <view style="display: inline-block;">
    Время заказа: {{ item.createTime }}
  </view>
    </view>
    </view>
    <view style="float:right;margin-top: 5px;">

    <view class="btn" v-if="item.orderStatus === «Платеж успешен»»>
    <u-button size="small" type="primary"
 
    text="Возвращать деньги"></u-button>
      </view>

      <view class="btn" v-if="item.orderStatus === 'еще нетплатить'">
      <u-button size="small" type="primary" :disabled="payBtnDisabled"
   
    text="платить"></u-button>
      </view>

      <view class="btn" v-if="item.orderStatus === 'еще нетплатить'">
      <u-button size="small" type="error"
   
    text="Отмена"></u-button>
      </view>
      </view>
      </template>
      </template>
      </u-cell>
      </u-list-item>

// Пользователь активно отменяет заказ
const cancelOrder = (obj) => {
  console.log(obj);
}
// Оплата точки останова пользователя
const toPay = (obj) => {
  console.log(obj);
}
// Пользователь активно возвращает деньги
const refund = (obj) => {
  console.log(obj);
}

// Отменить заказ
export function cancel(orderNo) {
    return request({
        url: '/api/wx-pay/native/cancel/' + orderNo,
        method: 'post'
    })
}

// Пользователь активно отменяет заказ
const cancelOrder = (obj) => {
  console.log(obj);
  loading.value = true;
  cancel(obj.orderNo).then((res) => {
    toast("Заказ успешно отменен");
    // Обновить список
    loadmore();
  });
}

// Единый заказ JSAPI
export function JSAPI(productId, openId) {
    return request({
        'url': `/api/wx-pay/js-api/${ productId }`,
        'method': 'post',
        'params': {
            "openId": openId
        }
    })
}

// Оплата точки останова пользователя
const toPay = (obj) => {
  console.log(obj);

  const storageSync = uni.getStorageSync('token');
  const nickName = uni.getStorageSync('nickName');
  payBtnDisabled.value = true;
  if (!storageSync || !nickName) {
    payBtnDisabled.value = false;
    toast("Еще не авторизован!");
    return;
  }

  JSAPI(obj.productId, storageSync + "|" + nickName)
      .then((res) => {
        const wx = res.data;
        toast("Заказ успешно создан, инициируется оплата. Пожалуйста, подождите...");
        uni.requestPayment({
          provide: 'wxpay',
          timeStamp: wx.timeStamp,
          nonceStr: wx.nonceStr,
          package: wx.package,
          signType: wx.signType,
          paySign: wx.paySign,
          success: (res) => {
            console.log(res);
            payBtnDisabled.value = false;
          },
          fail: (res) => {
            console.log(res);
            toast("Отменить платеж, вы можете продолжить нажимать кнопку платежа, чтобы инициировать его снова");
            payBtnDisabled.value = false;
          },
        });
      })
      .catch((err) => {
        console.log(err);
        payBtnDisabled.value = false;
      });
}

// Всплывающее окно возврата средств
const refundDialogVisible = ref(false);
// Форма возврата
const refundForm = ref({
  orderNo: '',
  refundNo: '',
  reason: '',
});
// Форма правила проверки возврата
const rules = ref({
  'refundNo': {
    type: 'number',
    required: true,
    max: 4,
    message: 'Пожалуйста, введите последние четыре цифры транзакции. заказа(число)',    trigger: [ 'blur', 'change' ]
  },
  'reason': {
    type: 'string',
    required: true,
    message: 'Пожалуйста, укажите причину возврата',
    trigger: [ 'blur', 'change' ]
  },
})

      <!--  всплывающий слой Возврат   -->
      <u-modal
          :loading="loading"
          title="Подать заявку на возврат"
          :show="refundDialogVisible"
          showCancelButton
          @confirm="refundOrder"
          @cancel="closeDialog "
      >
        <view>
          <!-- Обратите внимание: если вам нужна совместимость с WeChat Mini программе, лучше всего устанавливать правила через метод setRules -->
          <u-form
              labelPosition="left"
              :model="refundForm"
              :rules="rules"
              ref="uForm"
          >
            <u-form-item
                labelWidth="100px"
                label="Торговый Номер заказа"
                prop="refundNo"
                borderBottom
                ref="item1"
            >
              <u-input
                  v-model="refundForm.refundNo"
                  border="none"
              ></u-input>
            </u-form-item>
            <u-form-item
                labelWidth="100px"
                label="Причина возврата"
                prop="reason"
                borderBottom
                ref="item2"
            >
              <u-input
                  v-model="refundForm.reason"
                  border="none"
              ></u-input>
            </u-form-item>
          </u-form>
        </view>
      </u-modal>

//Закрываем диалоговое окно возврата
const closeDialog = () => {
  console.log('close.................');
  refundDialogVisible.value = false;
  refundForm.value = {
    orderNo: '',
    refundNo: '',
    reason: '',
  };
  refundSubmitBtnDisabled.value = false;
};

// Подать заявку на возврат средств
export function refunds(orderNo, reason, refundNo) {
    return request({
        url: '/api/wx-pay/native/refunds/' + orderNo + '/' + refundNo + "/" + reason,
        method: 'post'
    })
}