order.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527
  1. <template>
  2. <div class="list-box" :class="{ 'mobile-order': isMobile }">
  3. <template v-if="pageData.count">
  4. <div class="items">
  5. <div class="order-item" v-for="item in pageData.list" :key="item.id">
  6. <div class="order-info">
  7. <div class="order-left">
  8. <div class="label label-num">
  9. <span class="num">{{t('myInfo.orderNo')}}:</span>
  10. <span>{{ item.orderNumber }}</span>
  11. </div>
  12. <div class="label">
  13. <span class="time">{{t('myInfo.orderTime')}}:</span>
  14. <span>{{ item.createDate }}</span>
  15. </div>
  16. <div class="label" v-if="userStore.getLang =='zh-CN'">
  17. <span class="way">支付方式:</span>
  18. <span v-if="item.payMethod == 'zfb' || item.payMethod == 'zfb_h5'">支付宝 {{ item.payMethod == "zfb" ? "PC端" : "H5端" }}</span>
  19. <span v-if="item.payMethod == 'wx' || item.payMethod == 'wx_h5'">微信 {{ item.payMethod == "wx" ? "PC端" : "H5端" }}</span>
  20. </div>
  21. <div class="label">
  22. <span class="time">{{ $t("myInfo.orderStatus") }}:</span>
  23. <span>
  24. <span v-if="item.payStatus == 0">{{$t("myInfo.waitingPayment")}}</span>
  25. <span v-else-if="item.payStatus == 1">{{$t("myInfo.paymentSuccess")}}</span>
  26. <span v-else>{{ $t("myInfo.paymentFailed") }}</span>
  27. </span>
  28. </div>
  29. </div>
  30. <div class="order-right">
  31. <span>{{t('myInfo.payAmount')}}:</span>
  32. <span v-if="userStore.getLang == 'en-US'">$</span>
  33. <span class="price">{{ item.payPrice }}</span>
  34. <span v-if="userStore.getLang == 'zh-CN'">元</span>
  35. </div>
  36. </div>
  37. <div class="report">
  38. <div class="report-title">{{ item.researchBriefReportTitle }}</div>
  39. <div class="report-btns">
  40. <n-button type="primary" color="#2683F0" @click="handleTools(item, 'pay')" v-if="item.payStatus == 0&&userStore.getLang == 'zh-CN'">
  41. {{t('myInfo.toPay')}}
  42. </n-button>
  43. <n-button type="primary" color="#2683F0" @click="goPay(item)" v-if="item.payStatus == 0&&userStore.getLang == 'en-US'">
  44. {{t('myInfo.toPay')}}
  45. </n-button>
  46. <n-button type="primary" color="#2683F0" @click="handleClosePay(item)" v-if="item.payStatus == 0">
  47. {{t('myInfo.cancelPay')}}
  48. </n-button>
  49. <n-button type="primary" color="#2683F0" v-if="item.payStatus == 1&&userStore.getLang == 'en-US'&&!item.email" @click="openInpEmail(item)">
  50. Check email
  51. </n-button>
  52. <n-button type="primary" v-if="userStore.getLang =='zh-CN'" color="#2683F0" @click="handleTools(item, 'pdf')">
  53. PDF下载
  54. </n-button>
  55. <n-button type="primary" v-if="userStore.getLang =='zh-CN'" color="#2683F0" @click="handleTools(item, 'ppt')">
  56. PPT下载
  57. </n-button>
  58. </div>
  59. </div>
  60. </div>
  61. </div>
  62. <div class="pagination">
  63. <n-pagination :page="queryParams?.pageNo" :page-count="pageData?.count" :page-size="queryParams?.pageSize" size="large" :on-update-page="changePage" :page-slot="7" />
  64. </div>
  65. </template>
  66. <div class="empty" v-else>
  67. <n-empty :description="t('myInfo.noData')" size="huge"> </n-empty>
  68. </div>
  69. <n-modal :show="payVisible" preset="dialog" :title="payTitle" :showIcon="false" :z-index="9" @close="payVisible = false" @esc="payVisible = false" @mask-click="payVisible = false" :class="{ 'login-dialog': isMobile }">
  70. <div class="wxQRCode">
  71. <h3>微信支付</h3>
  72. <qrcode-vue :value="wxQRCode" size="200" level="H" render-as="svg" />
  73. <p>请使用微信扫码支付</p>
  74. <p v-if="payShow" style="color: red">支付状态请求中,请勿重复支付</p>
  75. </div>
  76. </n-modal>
  77. <n-modal v-model:show="closePayVisible" preset="dialog" :title="t('myInfo.tip')" :showIcon="false" :content="t('myInfo.confirmCancelPayment')" positive-text="确认" negative-text="取消" :close-on-esc="false" :mask-closable="false" @positive-click="submitClosePayCallback" @negative-click="cancelClosePayCallback" :class="{ 'login-dialog': isMobile }" />
  78. <n-spin class="load" :description="description" :show="spinShow" :delay="1000">
  79. <div style="width: 150px"></div>
  80. </n-spin>
  81. <n-modal :show="emailShow" preset="dialog" title="Check email address" :showIcon="false" :close-on-esc="false" :mask-closable="false" @close="close" :class="{ 'login-dialog': !pcShow }">
  82. <n-form :model="model" :rules="rules" label-align="right" label-placement="left" label-width="auto" require-mark-placement="left">
  83. <n-form-item label="Enter email address:" class="ms" path="email">
  84. <n-input v-model:value="model.email" placeholder="email address" />
  85. </n-form-item>
  86. <n-form-item label="Confrm email address:" class="ms" path="affirmEmail">
  87. <n-input v-model:value="model.affirmEmail" placeholder="email address" />
  88. </n-form-item>
  89. <n-form-item label="" class="ms">
  90. <div class="tig">*Email addresses do not match</div>
  91. </n-form-item>
  92. </n-form>
  93. <n-button class="login-btn" attr-type="button" type="info" color="#18A058" :disabled="submitLoading" @click="submitEmit()">
  94. {{
  95. submitLoading
  96. ? $t("report.demand.submitting")
  97. : $t("report.demand.submit")
  98. }}
  99. </n-button>
  100. </n-modal>
  101. </div>
  102. </template>
  103. <script lang="ts" setup>
  104. import { useI18n } from "#imports";
  105. import { ref, reactive, onMounted, watch, onUnmounted } from "vue";
  106. import {
  107. NButton,
  108. NPagination,
  109. createDiscreteApi,
  110. NEmpty,
  111. NModal,
  112. NSpin,
  113. } from "naive-ui";
  114. import QrcodeVue from "qrcode.vue";
  115. import { useUserStore } from "@/store/user";
  116. const config = useRuntimeConfig();
  117. const BaseUrl = ref(config.public.baseUrl);
  118. const { t, locale, setLocale } = useI18n();
  119. const pageSize = 10;
  120. const userStore = useUserStore();
  121. const pcShow = ref(true);
  122. const props = defineProps({
  123. isMobile: {
  124. type: Boolean,
  125. default: false,
  126. },
  127. });
  128. const queryParams = reactive({
  129. pageNo: 1,
  130. pageSize: 5,
  131. orderNumber: "",
  132. });
  133. const pageData = ref({});
  134. const wxQRCode = ref("");
  135. const payVisible = ref<boolean>(false);
  136. const payTitle = ref<string>("");
  137. const count = ref(0);
  138. const timer = ref();
  139. const spinShow = ref(false);
  140. const description = ref(t('myInfo.loading'));
  141. const payShow = ref(false);
  142. const closePayVisible = ref(false);
  143. const closePayId = ref(null);
  144. const emailShow=ref(false);
  145. const activeItem=ref();
  146. // const Message = createDiscreteApi(["message"]);
  147. const model=ref({
  148. email:"",
  149. affirmEmail:""
  150. })
  151. const openInpEmail = (item) => {
  152. activeItem.value = item;
  153. emailShow.value = true;
  154. }
  155. const getList = async () => {
  156. spinShow.value = true;
  157. description.value = t('myInfo.loading');
  158. let apiFun = getMyOrder_Api;
  159. if (userStore.getLang != "zh-CN") {
  160. apiFun = websiteUserResearchOrderList
  161. }
  162. const { code, data } = await apiFun(queryParams);
  163. if (code === 200) {
  164. pageData.value = data;
  165. }
  166. spinShow.value = false;
  167. };
  168. // 提交邮箱
  169. const submitEmit = () => {
  170. if (model.value.affirmEmail != model.value.email) {
  171. message.message.error("The email addresses are inconsistent.");
  172. return
  173. }
  174. let param = {
  175. id: activeItem.value.id,
  176. email: model.value.email
  177. }
  178. websiteUserResearchOrderUpdateEmail(param).then(res => {
  179. if (res.code == 200) {
  180. message.message.success(t("report.demand.submitSuccess"));
  181. close();
  182. queryParams.pageNo=1;
  183. getList()
  184. }
  185. })
  186. }
  187. const close=()=>{
  188. emailShow.value=false
  189. }
  190. // onMounted(() => {
  191. getList();
  192. // });
  193. onBeforeMount(async () => {
  194. pcShow.value = !isMobile();
  195. });
  196. onUnmounted(() => {
  197. payEnd();
  198. });
  199. watch(
  200. () => payVisible.value,
  201. (newVal, oldVal) => {
  202. if (newVal === false) {
  203. payEnd();
  204. }
  205. }
  206. );
  207. const searchData = (val: string | any) => {
  208. queryParams.orderNumber = val;
  209. getList();
  210. };
  211. const goPay = (item) => {
  212. window.open(item.orderPayUrl);
  213. }
  214. const message = createDiscreteApi(["message"]);
  215. // 下载
  216. const handleTools = async (item: Object, fileType: string) => {
  217. if (fileType == "pay") {
  218. if (props.isMobile) {
  219. if (item.payMethod == "zfb" || item.payMethod == "wx") {
  220. return message.message.info("请前往PC端个人中心支付订单");
  221. }
  222. } else {
  223. if (item.payMethod == "zfb_h5" || item.payMethod == "wx_h5") {
  224. return message.message.info("请前往H5端个人中心支付订单");
  225. }
  226. }
  227. toPay(item);
  228. } else {
  229. const { code, data } = await getDownUrl_Api({
  230. researchBriefReportId: item.researchBriefReportId,
  231. fileType: fileType,
  232. });
  233. if (code === 200) {
  234. let url = `${BaseUrl}/fileupload/${data.filePath}${data.fileName}`;
  235. if (typeof window !== "undefined") {
  236. window.open(url);
  237. }
  238. }
  239. }
  240. };
  241. const toPay = (item) => {
  242. if (item.payMethod == "wx") {
  243. payVisible.value = true;
  244. wxQRCode.value = item.orderPayUrl;
  245. setTimeout(() => {
  246. payDetail(item);
  247. }, 500);
  248. } else {
  249. downloadFile(item.orderPayUrl);
  250. }
  251. };
  252. const payDetail = async (item) => {
  253. payShow.value = true;
  254. const { code, data } = await bulletinDetailPay_Api({
  255. researchBriefReportId: item.researchBriefReportId,
  256. orderNumber: item.orderNumber,
  257. });
  258. if (code === 200) {
  259. if (data.payStatus == 1) {
  260. message.message.success("支付成功");
  261. payEnd();
  262. } else if (data.payStatus != 1) {
  263. if (payVisible.value) {
  264. if (count.value >= 5) {
  265. payEnd();
  266. message.message.error("请检查是否支付完成");
  267. } else {
  268. timer.value = setTimeout(() => {
  269. count.value++;
  270. payDetail(item);
  271. }, 10 * 1000);
  272. }
  273. }
  274. }
  275. }
  276. };
  277. const payEnd = () => {
  278. count.value = 0;
  279. payVisible.value = false;
  280. clearTimeout(timer.value);
  281. };
  282. const handleClosePay = async (item) => {
  283. closePayId.value = item.id;
  284. closePayVisible.value = true;
  285. };
  286. const submitClosePayCallback = async () => {
  287. let apiFun = closePay_Api;
  288. if (userStore.getLang == 'en-US') {
  289. // 英文 取消订单
  290. apiFun = websiteUserResearchCancelOrder;
  291. }
  292. const { code } = await apiFun({
  293. id: closePayId.value,
  294. });
  295. if (code === 200) {
  296. getList();
  297. message.message.success(t('myInfo.PaymentOrderCancelledSuccessfully'));
  298. }
  299. closePayId.value = null;
  300. closePayVisible.value = false;
  301. };
  302. const cancelClosePayCallback = () => {
  303. closePayId.value = null;
  304. closePayVisible.value = false;
  305. };
  306. // 改变页数
  307. const changePage = (page: number) => {
  308. document.documentElement.scrollTop = 0;
  309. queryParams.pageNo = page;
  310. getList();
  311. };
  312. defineExpose({
  313. searchData,
  314. });
  315. </script>
  316. <style lang="scss" scoped>
  317. .list-box {
  318. height: 100%;
  319. .items {
  320. height: calc(100% - 50px);
  321. overflow: hidden;
  322. overflow-y: scroll;
  323. }
  324. .pagination {
  325. display: flex;
  326. justify-content: center;
  327. align-items: center;
  328. height: 50px;
  329. }
  330. .empty {
  331. padding: 50px 0;
  332. }
  333. }
  334. .order-item {
  335. margin-bottom: 30px;
  336. background-color: #ffffff;
  337. border: 1px solid #6ac796;
  338. .order-info {
  339. display: flex;
  340. justify-content: space-between;
  341. align-items: center;
  342. padding: 20px 30px;
  343. background-color: #e6fff2;
  344. font-size: 16px;
  345. color: #808080;
  346. .order-left {
  347. .label-num {
  348. font-weight: bold;
  349. color: #18a058;
  350. }
  351. .label {
  352. .time,
  353. .way {
  354. color: #1a1a1a;
  355. }
  356. }
  357. }
  358. .order-right {
  359. .price {
  360. font-size: 30px;
  361. color: #666666;
  362. }
  363. }
  364. }
  365. .report {
  366. padding: 30px;
  367. padding-bottom: 50px;
  368. font-size: 24px;
  369. color: #1a1a1a;
  370. .report-title {
  371. margin-bottom: 20px;
  372. overflow: hidden;
  373. text-overflow: ellipsis;
  374. white-space: nowrap;
  375. }
  376. .report-btns {
  377. .n-button {
  378. width: 140px;
  379. height: 50px;
  380. margin-right: 20px;
  381. font-size: 18px;
  382. border-radius: 8px;
  383. }
  384. }
  385. }
  386. }
  387. .mobile-order {
  388. .order-item {
  389. margin-bottom: 15px;
  390. .order-info {
  391. padding: 10px 15px;
  392. font-size: 14px;
  393. .order-right {
  394. .price {
  395. font-size: 18px;
  396. }
  397. }
  398. }
  399. .report {
  400. padding: 15px;
  401. padding-bottom: 20px;
  402. font-size: 18px;
  403. .report-title {
  404. margin-bottom: 10px;
  405. }
  406. .report-btns {
  407. :deep(.n-button) {
  408. width: 90px;
  409. height: 45px;
  410. margin-right: 10px;
  411. margin-bottom: 10px;
  412. font-size: 14px;
  413. border-radius: 4px;
  414. }
  415. }
  416. }
  417. }
  418. }
  419. .login-dialog.n-dialog {
  420. min-width: auto;
  421. padding-top: 20px;
  422. border-radius: 10px;
  423. .n-dialog__title {
  424. font-size: 18px;
  425. }
  426. .n-dialog__content {
  427. .container {
  428. padding: 20px 10px;
  429. .login-btn {
  430. height: 45px;
  431. }
  432. }
  433. }
  434. }
  435. .login-dialog .n-dialog {
  436. min-width: auto;
  437. padding-top: 20px;
  438. border-radius: 10px;
  439. .n-dialog__title {
  440. font-size: 18px;
  441. }
  442. .n-dialog__content {
  443. .container {
  444. padding: 20px 10px;
  445. .login-btn {
  446. height: 45px;
  447. }
  448. .n-form {
  449. .n-form-item {
  450. .n-form-item-label {
  451. width: 85px !important;
  452. font-size: 12px;
  453. }
  454. .n-form-item-feedback-wrapper {
  455. min-height: 10px;
  456. }
  457. }
  458. }
  459. }
  460. }
  461. }
  462. .login-btn {
  463. display: block;
  464. width: 50%;
  465. height: 50px;
  466. color: #fff;
  467. font-size: 18px;
  468. border-radius: 8px;
  469. margin: 0 auto;
  470. :deep(.n-button__content) {
  471. display: block;
  472. }
  473. }
  474. .tig {
  475. font-size: 16px;
  476. color: #18A058;
  477. margin-left:205px;
  478. }
  479. </style>