index.vue 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830
  1. <template>
  2. <!-- 订单中心 -->
  3. <div class="orderPage flex-col">
  4. <s-header :name="$t('orderCenter.orderCenter')" :noback="false"></s-header>
  5. <div class="orderBox">
  6. <van-list v-model:loading="loading" v-model:error="error" :error-text="$t('public.requestFailed')"
  7. :finished="finished" :finished-text="$t('public.noMore')" offset="300" :immediate-check="false" @load="onLoad">
  8. <div class="main3 flex-col justify-center">
  9. <div class="outer1 flex-col justify-between">
  10. <div class="group4 flex-row justify-between">
  11. <div class="ImageText1 flex-col">
  12. <div class="outer2 flex-row justify-between">
  13. <div class="block1 flex-col"></div>
  14. <div class="TextGroup1 flex-col">
  15. <span class="txt1">{{ $t('orderCenter.dataOverview') }}</span>
  16. </div>
  17. </div>
  18. </div>
  19. <!-- 订单中心搜索 -->
  20. <div class="ImageText2 flex-col" @click="searchClick()">
  21. <div class="group5 flex-row justify-between">
  22. <img class="icon2" src="../../assets/order/search.png" />
  23. <div class="TextGroup2 flex-col">
  24. <span class="txt2">{{ $t("common.search") }}</span>
  25. </div>
  26. </div>
  27. </div>
  28. </div>
  29. </div>
  30. </div>
  31. <dateSelectList @update="update($event)"></dateSelectList>
  32. <typeSelectList @upselectdata="upselectdata($event)"></typeSelectList>
  33. <div v-if="!noData(salesVolume, salesNumber, orderNumber)" class="o-plr-8 o-pt-15">
  34. <div class="outer5 flex-col">
  35. <div class="block5 flex-col">
  36. <div class="outerBox flex-row">
  37. <div class="main4 flex-col justify-between">
  38. <div class="main5 flex-row justify-center">
  39. <span class="word8">&yen;</span>
  40. <span class="word9">{{ salesVolume }}</span>
  41. </div>
  42. <span class="info5">{{ $t("home.totalIncome") }}</span>
  43. </div>
  44. <div class="TextGroup7 flex-col">
  45. <div class="mod3 flex-col justify-between">
  46. <span class="txt8">{{ salesNumber }}</span>
  47. <span class="info6">{{ $t("home.productNum") }}</span>
  48. </div>
  49. </div>
  50. <div class="TextGroup8 flex-col">
  51. <div class="outer6 flex-col justify-between">
  52. <span class="txt9">{{ orderNumber }}</span>
  53. <span class="word10">{{ $t("home.numberOfOrders") }}</span>
  54. </div>
  55. </div>
  56. </div>
  57. </div>
  58. </div>
  59. </div>
  60. <kNoData v-else></kNoData>
  61. <div class="o-mtb-10" style="height: 10px; background: #f5f5f5"></div>
  62. <!-- 时间 -->
  63. <div class="c-text-c c-text-18">
  64. {{ Format_time(searchParams.startDate, 'YYYY-MM-DD') }}--{{ Format_time(searchParams.endDate, 'YYYY-MM-DD')
  65. }}
  66. </div>
  67. <div class="group7 flex-col justify-center">
  68. <div class="main9 flex-col justify-between">
  69. <div class="wrap1 flex-row justify-between">
  70. <div class="ImageText7 flex-col">
  71. <div class="mod5 flex-row justify-between">
  72. <div class="block3 flex-col"></div>
  73. <div class="TextGroup7 flex-col">
  74. <span class="info3">{{ $t('orderCenter.orderDetails') }}</span>
  75. </div>
  76. </div>
  77. </div>
  78. <div class="ImageText8 flex-col" @click="gotoOrderExcel()">
  79. <div class="bd3 flex-row justify-between">
  80. <span class="info4 flex-col">{{ $t('orderCenter.exportToExcel') }}</span>
  81. <div class="outer3 flex-col"></div>
  82. </div>
  83. </div>
  84. </div>
  85. </div>
  86. </div>
  87. <div class="section1 flex-col">
  88. <div class="group8 flex-col">
  89. <div class="section4 flex-col">
  90. <div v-for="(item, index) in orderList" :key="index">
  91. <div class="section5 flex-col" @click="orderClick(item)">
  92. <van-card :thumb="showSugerPhoto(item)">
  93. <template #title>
  94. <span class="word13">{{ $t('orderCenter.tradeName') }}:{{ item.productName }}</span>
  95. </template>
  96. <template #desc>
  97. <span class="word11">{{ $t('orderCenter.equipmentName') }}:{{ item.es }}</span>
  98. </template>
  99. <template #price>
  100. <div class="pricBox flex-row align-end" :class="{ orderError: item.status === 0 }">
  101. <span class="txt9">{{ item.statusText }}:</span>
  102. <span class="info5">&yen;</span>
  103. <span class="word12" v-if="item.status === 3">{{ item.price.toFixed(2) }}</span>
  104. <span class="word12" v-else>{{ item.refundAmount == null ? item.price.toFixed(2) : (item.price -
  105. item.refundAmount).toFixed(2) }}</span>
  106. <span class="word14">{{ $t('orderCenter.dividingDomesticService') }}:&yen;{{ showSubcom(item)
  107. }}</span>
  108. </div>
  109. </template>
  110. <template #price-top>
  111. <span class="time_01">{{ $t('orderCenter.paymentTime') }}:{{ showOrderTime(item, 1) }}</span>
  112. </template>
  113. <template #footer>
  114. <span v-if="item.status === 3">x{{ item.refundQuantity }}</span>
  115. <span v-else>x{{ item.refundQuantity == null ? item.productNumber : (item.productNumber -
  116. item.refundQuantity) }}</span>
  117. </template>
  118. </van-card>
  119. <div v-if="typeof item.status === 'undefined'" class="main11 flex-col orderSuccess"></div>
  120. <div v-else class="main11 flex-col" :class="{
  121. orderSuccess: item.status === 1,
  122. orderError: item.status === 0,
  123. refunding: item.status === 2,
  124. refunded: item.status === 3,
  125. }"></div>
  126. </div>
  127. <!-- <div class="section6 flex-col"></div> -->
  128. </div>
  129. </div>
  130. </div>
  131. </div>
  132. </van-list>
  133. </div>
  134. <!-- 搜索弹出框 -->
  135. <orderSearch ref="searchRef" @search="search($event)"></orderSearch>
  136. <!-- 退款弹窗 -->
  137. <van-popup v-model:show="refundType" position="bottom" round>
  138. <div class="refundBox flex-col">
  139. <div class="section1 flex-col">
  140. <div class="group3 flex-col">
  141. <div class="TextGroup1 l-flex-center">
  142. <div class="outer1 flex-col">
  143. <!-- <span class="txt4">这里是设备名称</span> -->
  144. <span class="info1">{{ $t('orderCenter.business') }}</span>
  145. <span class="txt5">+ {{ refundObject.refundAmount == null ? refundObject.price.toFixed(2) :
  146. (refundObject.price - refundObject.refundAmount).toFixed(2) }}</span>
  147. </div>
  148. </div>
  149. <div class="layer1 flex-col"></div>
  150. <div class="layer2 flex-row justify-between">
  151. <span class="info2">{{ $t('orderCenter.accountBalance') }}</span>
  152. <span class="txt6">{{ accountDetail.altAvilBalance }}</span>
  153. </div>
  154. <div class="layer3 flex-row justify-between">
  155. <span class="word2">{{ $t('orderCenter.orderNo') }}</span>
  156. <span class="info3">{{ refundObject.sn }}</span>
  157. </div>
  158. <div class="layer3 flex-row justify-between">
  159. <span class="word2">{{ $t('orderCenter.commodity') }}</span>
  160. <span class="info3">{{ refundObject.productName }}</span>
  161. </div>
  162. <div class="layer4 flex-row justify-between">
  163. <span class="word3">{{ $t('orderCenter.distribution') }}</span>
  164. <span class="word4">{{ showSubcom(refundObject) }}</span>
  165. </div>
  166. <div class="layer4 flex-row justify-between">
  167. <span class="word3">{{ $t('orderCenter.equipmentNo') }}</span>
  168. <span class="word4">{{ refundObject.clientId }}</span>
  169. </div>
  170. <div class="layer5 flex-row justify-between">
  171. <span class="txt7">{{ $t('orderCenter.state') }}</span>
  172. <span class="word5">{{ showStatus(refundObject) }}</span>
  173. </div>
  174. <div class="layer6 flex-row justify-between">
  175. <span class="word6">{{ $t('orderCenter.paymentMethod') }}</span>
  176. <span class="word7">{{ showPayType(refundObject) }}</span>
  177. </div>
  178. <div class="layer6 flex-row justify-between">
  179. <span class="word6">{{ $t('orderCenter.creationTime') }}</span>
  180. <span class="word7">{{ showOrderTime(refundObject, 2) }}</span>
  181. </div>
  182. <div v-if="refundObject.status === 3" class="layer7 flex-row justify-between">
  183. <span class="word8">{{ $t('orderCenter.refunded') }}</span>
  184. <span class="info4">{{ refundObject.refundAmount }}</span>
  185. </div>
  186. <!-- 发起退款 -->
  187. <!-- 非已付款订单,线下订单要隐藏按钮 -->
  188. <van-button size="small"
  189. v-if="(refundObject.status === 1 && user.ifForeign === '0') || (refundObject.status === 1 && user.ifForeign === '1' && refundObject.isAir === '1')"
  190. @click="noticeClk(refundObject)" round type="primary" style="margin-top: 20px;">
  191. {{ $t('orderCenter.initiateRefund') }}
  192. </van-button>
  193. </div>
  194. </div>
  195. </div>
  196. </van-popup>
  197. <!-- 退款弹窗 -->
  198. <kDialog :isCloseForConfirm="false" :dialogTitle="$t('orderCenter.refundTip')"
  199. :confirmBtnTxt="$t('orderCenter.refundSubmit')" ref="kDialogRef" @confirmclk="confirmClk">
  200. <template #content>
  201. <!-- <van-field colon required type="number" clearable v-model="cofficentForm.price" class="inputAmount"
  202. :placeholder="$t('orderCenter.refundAmountPlace')" :label="$t('orderCenter.refundAmount')">
  203. <template #extra>
  204. {{ $t('orderCenter.most') }}¥{{ cofficentForm.maxPrice }}
  205. </template>
  206. </van-field>
  207. <div class="van-cell l-flex-RC">
  208. <div class="van-field__label van-field__label--required">
  209. <span>{{ $t('orderCenter.refundQuantity') }}: </span>
  210. </div>
  211. <van-stepper v-model="cofficentForm.productNumber" theme="round" button-size="22"
  212. :max="cofficentForm.maxNumber" disable-input />
  213. <span class="o-pl-10">{{ $t('orderCenter.most') + cofficentForm.maxNumber + $t('orderCenter.at') }}</span>
  214. </div> -->
  215. <div class="cust_vantBorder l-flex-RC">
  216. <div v-for="(item, index) in orderDetails" :key="index" class="card01">
  217. <van-checkbox v-model="isChecked[index]" @change="checkGood(index)" icon-size="20px"></van-checkbox>
  218. <van-card :price="item.price.toFixed(2)" :title="item.productName" :thumb="showSugarPic(item.productNo)">
  219. <template #footer>
  220. <van-stepper v-model="refundNum[index]" @plus="plusRefundGood(index)" @minus="minusRefundGood(index)"
  221. theme="round" button-size="22" disable-input
  222. :max="item.refundQuantity == null ? item.productNumber : (item.productNumber - item.refundQuantity)" />
  223. </template>
  224. </van-card>
  225. </div>
  226. </div>
  227. <div class="o-mt-5" style="height: 1px; background: #d7d7e2"></div>
  228. <div class="btnFooter">
  229. <van-checkbox class="checkAllBtn o-mt-5" v-model="checkedAll" @click="checkAll">全选</van-checkbox>
  230. <div class="o-mt-5">
  231. <span class="">{{ $t('orderCenter.totalRefund') }}:</span>
  232. <span class="totalRefund o-pr-15">&yen; {{ totalRefund.toFixed(2) }}</span>
  233. </div>
  234. </div>
  235. </template>
  236. </kDialog>
  237. </div>
  238. </template>
  239. <script>
  240. import { Api_getOnlineExport } from "../../service/order";
  241. // 导入接口
  242. import { getAdminMch } from "../../service/merchantManage";
  243. // 导入弹窗
  244. import kDialog from "../../components/commom/kDialog/index.vue";
  245. // 导入无数据组件
  246. import { Dialog } from 'vant';
  247. import kNoData from "../../components/commom/kNoData/index.vue";
  248. import { onMounted, reactive, ref } from "vue";
  249. import sHeader from "../../components/SimpleHeader";
  250. import orderSearch from "./orderSearch.vue";
  251. import { getOrderList, refundOrder } from "../../service/order/index";
  252. import { Toast } from "vant";
  253. import { getLoginUser, $M_IsDate, Format_time, $M_ExportFile, styleUrl } from "../../common/js/utils";
  254. import { getHuifuId } from "../../service/huifuMch/index";
  255. import dateUtil from "../../utils/dateUtil";
  256. import dateSelectList from "../../components/dateSelectList";
  257. import typeSelectList from "../../components/typeSelectList";
  258. import { getStatistics } from "../../service/home";
  259. import { useI18n } from "vue-i18n";
  260. export default {
  261. name: "order",
  262. components: { sHeader, orderSearch, dateSelectList, typeSelectList, kNoData, kDialog },
  263. setup() {
  264. // 批量修改弹窗
  265. const kDialogRef = ref(null);
  266. // 订单明细
  267. const orderDetails = ref([]);
  268. // 退款商品选择状态
  269. const isChecked = ref([]);
  270. // 全选状态
  271. const checkedAll = ref(false);
  272. // 退款总额
  273. const totalRefund = ref(0);
  274. // 退款商户数量
  275. const refundNum = ref([]);
  276. // 加载状态
  277. // const isLoading = ref(false);
  278. // 监控退款选择框状态
  279. const checkGood = (index) => {
  280. if (isChecked.value[index]) {
  281. totalRefund.value = parseFloat((totalRefund.value + (refundNum.value[index] * orderDetails.value[index].price)).toFixed(2));
  282. } else {
  283. if (totalRefund.value > 0) {
  284. totalRefund.value = parseFloat((totalRefund.value - (refundNum.value[index] * orderDetails.value[index].price)).toFixed(2));
  285. }
  286. }
  287. // 如果都为true,都为全选
  288. if (isChecked.value.every((value) => value === true)) {
  289. checkedAll.value = true;
  290. } else {
  291. checkedAll.value = false;
  292. }
  293. }
  294. // 点击增加按钮
  295. const plusRefundGood = (index) => {
  296. if (isChecked.value[index]) {
  297. totalRefund.value = parseFloat((totalRefund.value + orderDetails.value[index].price).toFixed(2));
  298. }
  299. }
  300. // 点击减少按钮
  301. const minusRefundGood = (index) => {
  302. if (isChecked.value[index]) {
  303. totalRefund.value = parseFloat((totalRefund.value - orderDetails.value[index].price).toFixed(2));
  304. }
  305. }
  306. // 点击弹出退款弹窗
  307. const noticeClk = (row) => {
  308. if (row.orderDetails.length > 0) {
  309. isChecked.value = [];
  310. orderDetails.value = [];
  311. refundNum.value = [];
  312. checkedAll.value = false;
  313. totalRefund.value = 0;
  314. // cofficentForm.price = row.price;
  315. // cofficentForm.maxPrice = row.price;
  316. cofficentForm.id = row.id;
  317. // cofficentForm.maxNumber = row.productNumber;
  318. // cofficentForm.productNumber = row.productNumber;
  319. row.orderDetails.forEach(item => {
  320. if (item.refundStatus == '1' || item.refundStatus == '2') {
  321. orderDetails.value.push(item);
  322. if (item.refundQuantity != null) {
  323. refundNum.value.push(item.productNumber - item.refundQuantity);
  324. } else {
  325. refundNum.value.push(item.productNumber);
  326. }
  327. }
  328. });
  329. // 根据orderDetails的长度,向isChecked添加相应数量的false
  330. isChecked.value = Array.from({ length: orderDetails.value.length }, () => false);
  331. kDialogRef.value.openDialog();
  332. } else {
  333. Toast("请联系管理员");
  334. return;
  335. }
  336. };
  337. // 点击全选按钮
  338. const checkAll = () => {
  339. isChecked.value.forEach((item, index) => {
  340. if (isChecked.value[index]) {
  341. isChecked.value[index] = !isChecked.value[index]
  342. checkedAll.value = false;
  343. } else {
  344. isChecked.value[index] = !isChecked.value[index]
  345. checkedAll.value = true;
  346. }
  347. })
  348. }
  349. // 点击确定按钮
  350. const confirmClk = () => {
  351. cofficentForm.note = "";
  352. cofficentForm.productNumber = 0;
  353. cofficentForm.price = 0;
  354. isChecked.value.forEach((isCheckedValue, index) => {
  355. if (isCheckedValue) {
  356. cofficentForm.note = cofficentForm.note + orderDetails.value[index].productNo + "-" + refundNum.value[index] + ","
  357. cofficentForm.productNumber = cofficentForm.productNumber + refundNum.value[index];
  358. }
  359. })
  360. cofficentForm.price = totalRefund.value;
  361. if (cofficentForm.note === "" || cofficentForm.price === 0 || cofficentForm.price === "") {
  362. Toast(t('orderCenter.refundPlace'));
  363. return;
  364. } else {
  365. Dialog.confirm({
  366. // title: "提示",
  367. message: t('orderCenter.refundCheck'),
  368. }).then(() => {
  369. // isLoading.value = true; // 开始加载
  370. refundAjax();
  371. // isLoading.value = false; // 加载完成
  372. kDialogRef.value.closeDialog();
  373. }).catch(() => {
  374. return;
  375. });
  376. }
  377. }
  378. // 退款操作
  379. const refundAjax = async () => {
  380. try {
  381. const { data } = await refundOrder(cofficentForm);
  382. if (data.code && data.code !== 'B0001') {
  383. Dialog.alert({
  384. message: t('orderCenter.refundSucceeded'),
  385. }).then(() => {
  386. refundType.value = false;
  387. // on close
  388. orderList.value = [];
  389. search({});
  390. });
  391. } else {
  392. Toast.fail(data.message);
  393. }
  394. } catch (error) {
  395. Toast.fail(t('orderCenter.requestFailed'));
  396. }
  397. };
  398. // 修改的价格
  399. const cofficentForm = reactive({
  400. price: 0,
  401. id: "",
  402. productNumber: 0,
  403. note: 0
  404. });
  405. // 引入语言
  406. const { t } = useI18n();
  407. // 订单商品图片路径处理
  408. const showSugerPhoto = (row) => {
  409. if (row.orderDetails != null) {
  410. if (row.orderDetails.length > 0) {
  411. return require(`../../assets/order/spunSugar/goods/${row.orderDetails[0].productNo}.png`);
  412. } else {
  413. if (row.productNo != null) {
  414. return require(`../../assets/order/spunSugar/goods/${row.productNo}.png`);
  415. }
  416. if (row.machineType == null || row.machineType == '0') {
  417. return require(`../../assets/order/spunSugar/goods/A01.png`);
  418. } else {
  419. return require(`../../assets/order/spunSugar/goods/B01.png`);
  420. }
  421. }
  422. } else {
  423. if (row.machineType == null || row.machineType == '0') {
  424. return require(`../../assets/order/spunSugar/goods/A01.png`);
  425. } else {
  426. return require(`../../assets/order/spunSugar/goods/B01.png`);
  427. }
  428. }
  429. };
  430. // 订单明细商品图片路径处理
  431. const showSugarPic = (row) => {
  432. return require(`../../assets/order/spunSugar/goods/${row}.png`);
  433. };
  434. // 如果是空数据
  435. const noData = (volumes, nums) => {
  436. if (!volumes && !nums) {
  437. return true;
  438. }
  439. return false;
  440. };
  441. const user = getLoginUser();
  442. const searchRef = ref(null);
  443. const huifuId = ref(null);
  444. const orderList = ref([]);
  445. const orderTotal = ref(0);
  446. const loading = ref(true);
  447. const error = ref(false);
  448. const finished = ref(false);
  449. // 滚动加载
  450. const onLoad = () => {
  451. if (!finished.value) {
  452. loading.value = true;
  453. searchParams.current = searchParams.current + 1;
  454. getList();
  455. }
  456. };
  457. // 页面列表查询参数
  458. let searchParams = reactive({
  459. adminId: "", // 用户账户id
  460. userName: "", // 用户名 String 没有值时传null
  461. adminType: "", // 判断是否查全部商户 当用户为商家时,“本商户”这个选项为“所有下级用户”传入一个“all”的值,其他情况传null
  462. type: user.ifForeign, // 订单类型 用来区分是国内、海外订单,0:国内,1:海外。默认值一般要根据当前登录用户的类型去选择。区分的参数是admin里ifForeign的值。ifForeign=0则type=0.
  463. // ifForeign现在用于区分国内0,海外1
  464. // isAir海外又分为两种情况,0/null为线下,1是线上
  465. payType: "", // 支付方式 全部时传null 0:无需支付 1:硬币 2:纸币 3:硬币+纸币 4:信用卡 5:电子支付 ALIPAY_NATIVE:支付宝主扫 WEIXIN_NATIVE:微信主扫 ALIPAY_CARD:支付宝反扫 WEIXIN_CARD:微信反扫
  466. productNo: "", // 商品的标识 全部时传null。 Tproductd对象的属性no的值。
  467. clientId: "", // 设备编号 String
  468. dateType: "0", // 所选时间类型 String 0:创建时间 1:退款时间
  469. startDate: "", // 开始时间 Date
  470. endDate: "", // 结束时间 Date
  471. current: 0, // 页数
  472. size: 15, // 页大小
  473. status: "",//支付状态
  474. companyType: "", // 公司平台
  475. machineType: "", // 设备类型
  476. ifForeign: "",
  477. });
  478. let chartType = "day";
  479. // 获取订单列表数据
  480. const getList = async () => {
  481. finished.value = false;
  482. getStatisticsFun();
  483. // 因为订单的时间格式不一样
  484. const params = Object.assign({}, searchParams);
  485. if ($M_IsDate(params.startDate)) {
  486. params.startDate = dateUtil.formateDate(
  487. new Date(params.startDate),
  488. "yyyy-MM-dd hh:mm:ss"
  489. );
  490. } else {
  491. params.startDate = "";
  492. }
  493. if ($M_IsDate(params.endDate)) {
  494. params.endDate = dateUtil.formateDate(
  495. new Date(params.endDate),
  496. "yyyy-MM-dd hh:mm:ss"
  497. );
  498. } else {
  499. params.endDate = "";
  500. }
  501. // 获取订单列表
  502. const { data } = await getOrderList(Object.assign({}, params));
  503. if (data.code === "00000") {
  504. if (data.data.total === 0) {
  505. finished.value = true;
  506. } else {
  507. // orderTotal.value = data.data.total;
  508. if (params.current === 1) {
  509. orderList.value = [];
  510. orderTotal.value = 0;
  511. }
  512. // 列表值叠加
  513. if (data.data.records.length > 0) {
  514. orderList.value = orderList.value.concat(
  515. data.data.records.map((item) => {
  516. return {
  517. ...item,
  518. statusText:
  519. item.altInfo != null
  520. ? t('orderCenter.onlinePayment')
  521. : t('orderCenter.offlinePayment'),
  522. };
  523. })
  524. );
  525. orderTotal.value = data.data.records.length + orderTotal.value;
  526. if (orderTotal.value === data.data.total) {
  527. finished.value = true;
  528. }
  529. } else {
  530. finished.value = true;
  531. }
  532. }
  533. loading.value = false;
  534. } else {
  535. // error.value = true;
  536. Toast.fail("数据加载失败");
  537. }
  538. };
  539. // 搜索表单点击
  540. const searchClick = () => {
  541. searchRef.value.showSearch();
  542. };
  543. // 搜索表单初始化页面及状态查询列表
  544. const search = (data) => {
  545. searchParams = Object.assign(searchParams, data);
  546. // 这个会导致请求两次接口
  547. // finished.value = false;
  548. orderList.value = [];
  549. loading.value = true;
  550. searchParams.current = 1;
  551. getList();
  552. };
  553. // 今日、明日、本周、本月、其他时间选择回调
  554. const update = (uDate) => {
  555. chartType = uDate.chartType;
  556. searchParams = Object.assign(searchParams, uDate);
  557. // console.log("searchParams.ifForeign",searchParams.ifForeign)
  558. searchParams.type = searchParams.ifForeign;
  559. search();
  560. };
  561. // 商户、支付方式、设备、商品选择回调
  562. const upselectdata = (uSData) => {
  563. // console.log('uSData', uSData)
  564. searchParams = Object.assign(searchParams, uSData);
  565. // console.log('searchParams.ifForeign', searchParams.ifForeign)
  566. searchParams.type = searchParams.ifForeign;
  567. search();
  568. };
  569. // 初始化页面获取列表
  570. onMounted(async () => {
  571. // 加载样式
  572. styleUrl('orderCenter');
  573. // orderList.value = [];
  574. // searchParams.current = 1;
  575. if (user) {
  576. searchParams.adminId = user.id;
  577. searchParams.userName = user.username;
  578. const { data } = await getHuifuId({
  579. adminId: user.id,
  580. });
  581. if (data.code === '00000') {
  582. if (data.data != null) {
  583. huifuId.value = data.data.huifuId;
  584. }
  585. }
  586. // 获取当天
  587. let now = new Date();
  588. let startDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
  589. searchParams.startDate = dateUtil.formateDate(startDate, "yyyy-MM-dd hh:mm:ss");
  590. let endDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);
  591. searchParams.endDate = dateUtil.formateDate(endDate, "yyyy-MM-dd hh:mm:ss");
  592. // finished.value = false;
  593. // loading.value = true;
  594. // getList();
  595. onLoad();
  596. addEventListener('load', onLoad);
  597. // 获取账户详情
  598. if (user.ifForeign === '0') {
  599. getAccountDetail(user.id);
  600. }
  601. }
  602. });
  603. // 查询是否有退款权限
  604. const isRefund = user.menuCodeList.some((item) => {
  605. return item === "M16";
  606. });
  607. // 跳转订单导出
  608. const gotoOrderExcel = async () => {
  609. // 显示加载框
  610. const loadingInstance = Toast.loading({
  611. message: '加载中...',
  612. forbidClick: true,
  613. });
  614. try {
  615. const { headers, data } = await Api_getOnlineExport(searchParams);
  616. // 请求完成后隐藏加载框
  617. loadingInstance.clear();
  618. $M_ExportFile(data, headers);
  619. // 处理返回的数据
  620. } catch (error) {
  621. // 请求发生错误时隐藏加载框
  622. loadingInstance.clear();
  623. // 处理错误情况
  624. console.error(error);
  625. }
  626. };
  627. // 订单详情-退款弹窗
  628. const refundType = ref(false);
  629. const refundObject = ref({});
  630. const orderClick = (item) => {
  631. //查询商户余额,要用admin的type去区分 TODO
  632. refundObject.value = item;
  633. refundType.value = true;
  634. };
  635. const accountDetail = ref({});
  636. // 获取账户详情
  637. const getAccountDetail = (id) => {
  638. getAdminMch({ id }).then(res => {
  639. accountDetail.value = res.data.data;
  640. })
  641. };
  642. // 订单时间格式转换
  643. const showOrderTime = (item, idx) => {
  644. if (idx === 1) {
  645. switch (item.status) {
  646. case 1:
  647. return dateUtil.timeZoneDate(new Date(dateUtil.formateDate(new Date(item.payDate), "yyyy-MM-dd hh:mm:ss")));
  648. case 3:
  649. return dateUtil.timeZoneDate(new Date(dateUtil.formateDate(new Date(item.refundDate), "yyyy-MM-dd hh:mm:ss")));
  650. default:
  651. return dateUtil.timeZoneDate(new Date(dateUtil.formateDate(new Date(item.createDate), "yyyy-MM-dd hh:mm:ss")));
  652. }
  653. } else {
  654. return item && item.createDate
  655. ? dateUtil.timeZoneDate(new Date(dateUtil.formateDate(new Date(item.createDate), "yyyy-MM-dd hh:mm:ss")))
  656. : "";
  657. }
  658. };
  659. // 设备编号格式转换
  660. const showClientId = (item) => {
  661. return item && item.clientId
  662. ? item.clientId.substring(item.clientId.length - 6)
  663. : "";
  664. };
  665. // 计算分佣
  666. const showSubcom = (item) => {
  667. let subcom = "0";
  668. if (item.altInfo) {
  669. const altInfo = JSON.parse(item.altInfo);
  670. if (altInfo && altInfo.length > 0) {
  671. // altInfo这个属性里,最后一个实体的altAmount的值就是他的分佣。
  672. subcom = altInfo[altInfo.length - 1]['altAmount'];
  673. }
  674. }
  675. if (item.acctSplitBunch) {
  676. const data = JSON.parse(item.acctSplitBunch);
  677. const targetObj = data.acct_infos.find(obj => obj.huifu_id === huifuId.value);
  678. if (targetObj) {
  679. subcom = targetObj.div_amt;
  680. }
  681. }
  682. return subcom;
  683. };
  684. // 弹窗订单状态
  685. const showStatus = (item) => {
  686. if (typeof item.status === "undefined") {
  687. return t('orderCenter.paymentSucceeded');
  688. } else {
  689. if (item.status === 0) {
  690. return t('orderCenter.unpaid');
  691. }
  692. if (item.status === 1) {
  693. return t('orderCenter.paid');
  694. }
  695. if (item.status === 2) {
  696. return t('orderCenter.refundInProgress');
  697. }
  698. if (item.status === 3) {
  699. return t('orderCenter.refunded');
  700. }
  701. }
  702. return item;
  703. };
  704. const paySouerList = [
  705. { text: t('orderCenter.whole'), values: null },
  706. { text: t('orderCenter.noPaymentRequired'), values: 0 },
  707. { text: t('orderCenter.coin'), values: 1 },
  708. { text: t('orderCenter.notes'), values: 2 },
  709. { text: t('orderCenter.coinsNotes'), values: 3 },
  710. { text: t('orderCenter.creditCard'), values: 4 },
  711. { text: t('orderCenter.electronicPayment'), values: 5 },
  712. { text: t('orderCenter.mainSweepOfAlipay'), values: "ALIPAY_NATIVE" },
  713. { text: t('orderCenter.weChatScanning'), values: "WEIXIN_NATIVE" },
  714. { text: t('orderCenter.antiScanningOfAlipay'), values: "ALIPAY_CARD" },
  715. { text: t('orderCenter.weChatBackScanning'), values: "WEIXIN_CARD" },
  716. ];
  717. // 弹窗支付上述
  718. const showPayType = (item) => {
  719. const payType = user.ifForeign === "0" ? item.frpCode : item.payType;
  720. const paySoure = paySouerList.filter((i) => i.values === payType);
  721. if (paySoure.length > 0) {
  722. return paySoure[0].text;
  723. } else {
  724. return "";
  725. }
  726. };
  727. const salesVolume = ref(0);
  728. const salesNumber = ref(0);
  729. const orderNumber = ref(0);
  730. // 查询图表
  731. const getStatisticsFun = async () => {
  732. // console.log('searchParams', searchParams)
  733. const params = {
  734. adminId: user.id,
  735. chartType: chartType,
  736. endDate: searchParams.endDate,
  737. ifForeign: searchParams.ifForeign == ''? user.ifForeign : searchParams.ifForeign,
  738. startDate: searchParams.startDate,
  739. userName: searchParams.userName,
  740. clientId:
  741. searchParams.clientId === "" ? null : searchParams.clientId,
  742. equipmentId:
  743. searchParams.equipmentId === "" ? null : searchParams.equipmentId,
  744. payType:
  745. searchParams.payType === "" ? null : searchParams.payType,
  746. companyType: searchParams.companyType,
  747. machineType: searchParams.machineType,
  748. isAir: searchParams.isAir === "" ? null : searchParams.isAir,
  749. };
  750. const { data } = await getStatistics(params);
  751. if (data.code && data.data) {
  752. salesVolume.value = 0;
  753. salesNumber.value = 0;
  754. orderNumber.value = 0;
  755. data.data.series[0].data.forEach((item) => {
  756. salesNumber.value = parseInt(salesNumber.value + item);
  757. });
  758. data.data.series[1].data.forEach((item) => {
  759. salesVolume.value = parseInt(salesVolume.value + item);
  760. });
  761. data.data.series[2].data.forEach((item) => {
  762. orderNumber.value = parseInt(orderNumber.value + item);
  763. });
  764. }
  765. };
  766. return {
  767. user,
  768. loading,
  769. error,
  770. finished,
  771. onLoad,
  772. orderList,
  773. orderTotal,
  774. searchRef,
  775. searchClick,
  776. search,
  777. update,
  778. upselectdata,
  779. gotoOrderExcel,
  780. refundType,
  781. refundObject,
  782. orderClick,
  783. showSugerPhoto,
  784. showOrderTime,
  785. showClientId,
  786. showSubcom,
  787. showStatus,
  788. showPayType,
  789. salesVolume,
  790. salesNumber,
  791. orderNumber,
  792. noData,
  793. kDialogRef,
  794. noticeClk,
  795. confirmClk,
  796. cofficentForm,
  797. accountDetail,
  798. Format_time,
  799. searchParams,
  800. orderDetails,
  801. huifuId,
  802. showSugarPic,
  803. isChecked,
  804. refundNum,
  805. checkAll,
  806. checkedAll,
  807. totalRefund,
  808. checkGood,
  809. plusRefundGood,
  810. minusRefundGood,
  811. // isLoading,
  812. isRefund,
  813. };
  814. },
  815. };
  816. </script>
  817. <style lang="less" scoped>
  818. @import "../../common/style/common.less";
  819. </style>