邃芒慧影、口播(PC) https://neuver.metavatar.cc/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

1153 line
31 KiB

  1. <template>
  2. <div class="page">
  3. <div class="commoditylIst" ref="scrollContainerRef" @wheel="handleWheel">
  4. <div class="item" v-for="item in packageList" :key="item.typeDesc">
  5. <!-- 遮罩层 -->
  6. <!-- <div class="mask" v-if="item.type != 1">
  7. <el-icon><i-ep-Lock /></el-icon>
  8. </div> -->
  9. <!-- clickPayDialog(item) getOrderDetail-->
  10. <div @click="clickPayDialog(item)">
  11. <div class="line" :style="`background-color:${item.color} ;`"></div>
  12. <div class="info">
  13. <!-- 商品信息 -->
  14. <div class="content">
  15. <div class="titleBox">
  16. <div class="title">
  17. {{ item.title }}
  18. </div>
  19. </div>
  20. <div class="money">
  21. <span class="price">{{
  22. item.sellPriceRmb
  23. }} ¥</span
  24. >/ <span style="text-decoration:line-through;">原价{{ item.priceRmb }}</span>
  25. </div>
  26. <div class="time">
  27. 币值<span>{{ item.glod }}</span
  28. >
  29. </div>
  30. <div class="button" :style="`background-color: #f3af00 ;`">
  31. 方案选择
  32. </div>
  33. <div class="button" @click="createOrder(item)" :style="`background-color: #f3af00 ;`">
  34. 创建订单
  35. </div>
  36. <!-- <div
  37. v-if="item.type != 1"
  38. class="button"
  39. :style="`background-color:${item.color} ;`"
  40. >
  41. {{ $t("createVideo.comingSoon") }}
  42. </div>
  43. <div
  44. v-else
  45. class="button"
  46. :style="`background-color:${item.color} ;`"
  47. >
  48. {{ $t("shop.selectPlan") }}
  49. </div> -->
  50. </div>
  51. <!-- 商品权益 -->
  52. <div class="authority">
  53. <div v-html="item.detail"></div>
  54. <!-- <div class="authority-item">
  55. {{ $t("shop.InviteGetscore") }}:
  56. <span>
  57. <i>{{ item.inviteUserCredit }}</i
  58. >{{ $t("shop.score") }}</span
  59. >
  60. </div>
  61. <div class="authority-item">
  62. {{ $t("shop.createVideoPrice") }}:<span
  63. ><i>{{ item.videoPrice }}</i
  64. >{{ $t("shop.score") }}</span
  65. >
  66. </div>
  67. <div class="authority-item">
  68. {{ $t("shop.AIGeneratesPhotoPrices") }}:<span
  69. ><i>{{ item.photoPrice }}</i
  70. >{{ $t("shop.score") }}</span
  71. >
  72. </div>
  73. <div class="authority-item">
  74. {{ $t("shop.UnitChargeDuration") }}:<span
  75. ><i>{{ item.chargeTime }}</i
  76. >{{ $t("shop.second") }}</span
  77. >
  78. </div> -->
  79. <!-- <div class="authority-item">
  80. {{ $t("shop.Language") }}:<span
  81. ><i>{{ item.userPackageDetails[0].languageDesc }}</i></span
  82. >
  83. </div>
  84. <div class="authority-item">
  85. {{ $t("shop.sound") }}:<span
  86. ><i>{{ item.userPackageDetails[0].soundDesc }}</i></span
  87. >
  88. </div>
  89. <div class="authority-item">
  90. {{ $t("shop.IndividualVideoDuration") }}:<span
  91. ><i>{{ item.userPackageDetails[0].videoTime }}</i
  92. >{{ $t("shop.second") }}</span
  93. >
  94. </div>
  95. <div class="authority-item">
  96. {{ $t("shop.Watermark") }}:<span>{{
  97. item.userPackageDetails[0].aiPortrait == 0
  98. ? $t("shop.yes")
  99. : $t("shop.no")
  100. }}</span>
  101. </div>
  102. <div class="authority-item">
  103. {{ $t("shop.AIGeneratedPortrait") }}:<span>{{
  104. item.userPackageDetails[0].aiPortrait == 0
  105. ? $t("shop.no")
  106. : $t("shop.yes")
  107. }}</span>
  108. </div>
  109. <div class="authority-item">
  110. {{ $t("shop.PhotoSinging") }}:<span>{{
  111. item.userPackageDetails[0].photoSing == 0
  112. ? $t("shop.no")
  113. : $t("shop.yes")
  114. }}</span>
  115. </div>
  116. <div class="authority-item">
  117. {{ $t("shop.AIGeneratedText") }}:<span
  118. ><i>{{ item.userPackageDetails[0].aiCreateTime }}</i></span
  119. >
  120. </div>
  121. <div class="authority-item">
  122. {{ $t("shop.VideoResolution") }}:<span>{{
  123. item.userPackageDetails[0].resolutionRatioDesc
  124. }}</span>
  125. </div> -->
  126. <!-- <div class="authority-item">
  127. {{ $t("shop.DigitalPersonTemplate") }}:{{
  128. item.userPackageDetails[0].humanTemplateDesc
  129. }}
  130. </div> -->
  131. <!-- <div
  132. class="authority-item"
  133. v-for="items in item.authority"
  134. :key="items"
  135. >
  136. <span>✔</span>{{ items }}
  137. </div> -->
  138. </div>
  139. </div>
  140. </div>
  141. </div>
  142. <!-- 企业版 -->
  143. <div class="item" @click="showTalkUsDialog = true">
  144. <!-- 遮罩层 -->
  145. <div class="mask" v-if="false">
  146. <el-icon><i-ep-Lock /></el-icon>
  147. </div>
  148. <div class="line" :style="`background-color:#000 ;`"></div>
  149. <div class="info">
  150. <div class="content" style="border-bottom: none">
  151. <div class="titleBox">
  152. <div class="title">
  153. {{ $t("shop.Ent") }}
  154. </div>
  155. </div>
  156. <!-- 描述 -->
  157. <div class="description">
  158. <div>
  159. {{ lanChange == "zh-cn" ? "所有权限" : "All Pro Benefits" }}
  160. </div>
  161. <div>
  162. {{
  163. lanChange == "zh-cn" ? "克隆数字双元" : "Clone DigItal Double"
  164. }}
  165. </div>
  166. <div>
  167. {{
  168. lanChange == "zh-cn" ? "专属定制头像" : "Customized Avatar"
  169. }}
  170. </div>
  171. <div>
  172. {{
  173. lanChange == "zh-cn"
  174. ? "专属定制声纹"
  175. : "Customized Voiceprint"
  176. }}
  177. </div>
  178. </div>
  179. <div v-if="true" class="button" :style="`background-color:#000 ;`">
  180. {{ $t("shop.talkUs") }}
  181. </div>
  182. <div v-else class="button" :style="`background-color:#000 ;`">
  183. {{ $t("shop.talkUs") }}
  184. </div>
  185. </div>
  186. </div>
  187. </div>
  188. </div>
  189. <!-- 对话框 v-if="false"-->
  190. <el-dialog v-model="showPayDialog" width="60%" center>
  191. <div class="payDialog">
  192. <div class="left">
  193. <!-- <div class="title">{{ $t(presentItme.value.title) }}</div> -->
  194. <div class="title">{{ $t(presentItme.value.typeDesc) }}</div>
  195. <div class="money">
  196. <span class="price">{{
  197. lanChange == "zh-cn"
  198. ? presentItme.value.rmb + "¥"
  199. : presentItme.value.dollar + "$"
  200. }}</span
  201. >/{{ presentItme.value.validityDuration }}{{ $t("shop.day") }}
  202. </div>
  203. <div class="time">
  204. <span>{{ presentItme.value.credit }}</span
  205. >{{ $t("shop.score") }}
  206. </div>
  207. <!-- 套餐内容 -->
  208. <div class="authority">
  209. <div class="authority-item">
  210. {{ $t("shop.InviteGetscore") }}:
  211. <span>
  212. <i>{{ presentItme.value.inviteUserCredit }}</i
  213. >{{ $t("shop.score") }}</span
  214. >
  215. </div>
  216. <div class="authority-item">
  217. {{ $t("shop.createVideoPrice") }}:<span
  218. ><i>{{ presentItme.value.videoPrice }}</i
  219. >{{ $t("shop.score") }}</span
  220. >
  221. </div>
  222. <div class="authority-item">
  223. {{ $t("shop.AIGeneratesPhotoPrices") }}:<span
  224. ><i>{{ presentItme.value.photoPrice }}</i
  225. >{{ $t("shop.score") }}</span
  226. >
  227. </div>
  228. <div class="authority-item">
  229. {{ $t("shop.UnitChargeDuration") }}:<span
  230. ><i>{{ presentItme.value.chargeTime }}</i
  231. >{{ $t("shop.second") }}</span
  232. >
  233. </div>
  234. <div class="authority-item">
  235. {{ $t("shop.Language") }}:<span
  236. ><i>{{
  237. presentItme.value.userPackageDetails[0].languageDesc
  238. }}</i></span
  239. >
  240. </div>
  241. <div class="authority-item">
  242. {{ $t("shop.sound") }}:<span
  243. ><i>{{
  244. presentItme.value.userPackageDetails[0].soundDesc
  245. }}</i></span
  246. >
  247. </div>
  248. <div class="authority-item">
  249. {{ $t("shop.IndividualVideoDuration") }}:<span
  250. ><i>{{ presentItme.value.userPackageDetails[0].videoTime }}</i
  251. >{{ $t("shop.second") }}</span
  252. >
  253. </div>
  254. <div class="authority-item">
  255. {{ $t("shop.Watermark") }}:<span>{{
  256. presentItme.value.userPackageDetails[0].aiPortrait == 0
  257. ? $t("shop.yes")
  258. : $t("shop.no")
  259. }}</span>
  260. </div>
  261. <div class="authority-item">
  262. {{ $t("shop.AIGeneratedPortrait") }}:<span>{{
  263. presentItme.value.userPackageDetails[0].aiPortrait == 0
  264. ? $t("shop.no")
  265. : $t("shop.yes")
  266. }}</span>
  267. </div>
  268. <div class="authority-item">
  269. {{ $t("shop.PhotoSinging") }}:<span>{{
  270. presentItme.value.userPackageDetails[0].photoSing == 0
  271. ? $t("shop.no")
  272. : $t("shop.yes")
  273. }}</span>
  274. </div>
  275. <div class="authority-item">
  276. {{ $t("shop.AIGeneratedText") }}:<span
  277. ><i>{{
  278. presentItme.value.userPackageDetails[0].aiCreateTime
  279. }}</i></span
  280. >
  281. </div>
  282. <div class="authority-item">
  283. {{ $t("shop.VideoResolution") }}:<span>{{
  284. presentItme.value.userPackageDetails[0].resolutionRatioDesc
  285. }}</span>
  286. </div>
  287. </div>
  288. </div>
  289. <div class="right">
  290. <div
  291. style="background-color: #07c160; cursor: pointer"
  292. @click="showOrderCode(2)"
  293. >
  294. {{ $t("shop.WeChatPay") }}
  295. </div>
  296. <div
  297. style="background-color: #1378fe; cursor: pointer"
  298. @click="showOrderCode(4)"
  299. >
  300. {{ $t("shop.Alipay") }}
  301. </div>
  302. <div
  303. style="background-color: #0070ba; cursor: pointer"
  304. @click="showOrderCode(3)"
  305. >
  306. Paypal
  307. </div>
  308. </div>
  309. </div>
  310. <!-- 二维码弹出框 -->
  311. <el-dialog
  312. v-model="orderCodeDialogShow"
  313. width="30%"
  314. append-to-body
  315. destroy-on-close
  316. @closed="clearCode"
  317. :close-on-click-modal="false"
  318. >
  319. <div class="orderCodeDialog">
  320. <div class="codeImg">
  321. <my-Loading-Icon2
  322. v-if="!payCodeUrl && !iframeBody"
  323. ></my-Loading-Icon2>
  324. <!-- :callback="qrcode" -->
  325. <vue-qr v-if="payCodeUrl" :text="payCodeUrl" :size="280"></vue-qr>
  326. <iframe
  327. v-show="iframeBody"
  328. id="myIframe"
  329. width="305px"
  330. height="305px"
  331. frameborder="0"
  332. ></iframe>
  333. </div>
  334. <div class="tips">
  335. {{
  336. lanChange == "zh-cn"
  337. ? `扫描二维码进行付款`
  338. : `Scan the QR code for payment`
  339. }}
  340. </div>
  341. <div class="btnBox">
  342. <div @click="RefreshQR">
  343. {{ lanChange == "zh-cn" ? `刷新二维码` : `Refresh QR code` }}
  344. </div>
  345. </div>
  346. </div>
  347. </el-dialog>
  348. </el-dialog>
  349. <!-- 联系我们对话框 -->
  350. <talkUs
  351. :showTalkUsDialog="showTalkUsDialog"
  352. @updateShowTalkUsDialog="updateShowTalkUsDialog"
  353. ></talkUs>
  354. </div>
  355. </template>
  356. <script setup>
  357. //#region 导入
  358. import { getCurrentInstance, ref, onMounted } from "vue";
  359. import { packageInfoApi } from "@/apis/myStore";
  360. import { useI18n } from "vue-i18n";
  361. import talkUs from "@/components/talkUs.vue";
  362. import { useRoute, useRouter } from "vue-router";
  363. import { createOrderApi, createPayApi, getOrderStatusApi } from "@/apis/pay";
  364. import { orderDetailApi, findStatusApi } from '@/apis/myStore.js'
  365. const route = useRoute();
  366. const router = useRouter();
  367. const { locale } = useI18n();
  368. const lanChange = ref(locale);
  369. const AccessToken = localStorage.getItem("AccessToken"); // 判断有没有登录
  370. //#endregion ------------------------------------
  371. //#region 各个套餐的逻辑
  372. // const packageList = ref([
  373. // {
  374. // id: 1,
  375. // type: 1,
  376. // typeDesc: "基础版",
  377. // englishName: "Trial",
  378. // dollar: "0.00",
  379. // rmb: "0.00",
  380. // credit: 100,
  381. // validityDuration: 30,
  382. // inviteUserCredit: 10,
  383. // videoPrice: 10,
  384. // photoPrice: 10,
  385. // talkPrice: 20,
  386. // chargeTime: 60,
  387. // createDate: 1686814258000,
  388. // updateDate: 1686814258000,
  389. // isDel: 0,
  390. // color: "#f3af00",
  391. // userPackageDetails: [
  392. // {
  393. // id: 1,
  394. // detailType: 1,
  395. // detailTypeDesc: "照片说话",
  396. // packageId: 1,
  397. // watermark: 1,
  398. // watermarkDesc: "是",
  399. // language: 1,
  400. // languageDesc: "50+",
  401. // sound: 1,
  402. // soundDesc: "400+",
  403. // videoTime: 60,
  404. // aiPortrait: 0,
  405. // aiPortraitDesc: "否",
  406. // photoSing: 0,
  407. // photoSingDesc: "否",
  408. // aiCreateTime: 0,
  409. // resolutionRatio: 1,
  410. // resolutionRatioDesc: "720p",
  411. // createDate: 1686882177000,
  412. // updateDate: 1686882177000,
  413. // isDel: 0,
  414. // },
  415. // {
  416. // id: 4,
  417. // detailType: 2,
  418. // detailTypeDesc: "口播",
  419. // packageId: 1,
  420. // watermark: 1,
  421. // watermarkDesc: "是",
  422. // language: 1,
  423. // languageDesc: "50+",
  424. // sound: 1,
  425. // soundDesc: "400+",
  426. // videoTime: 60,
  427. // aiCreateTime: 0,
  428. // resolutionRatio: 1,
  429. // resolutionRatioDesc: "720p",
  430. // humanTemplate: 1,
  431. // humanTemplateDesc: "免费",
  432. // createDate: 1686882177000,
  433. // updateDate: 1686882177000,
  434. // isDel: 0,
  435. // },
  436. // ],
  437. // },
  438. // {
  439. // id: 2,
  440. // type: 2,
  441. // typeDesc: "专业版",
  442. // englishName: "Pro",
  443. // dollar: "7.99",
  444. // rmb: "49.99",
  445. // credit: 200,
  446. // validityDuration: 30,
  447. // inviteUserCredit: 10,
  448. // videoPrice: 6,
  449. // photoPrice: 6,
  450. // talkPrice: 16,
  451. // chargeTime: 60,
  452. // createDate: 1686814258000,
  453. // updateDate: 1686814258000,
  454. // isDel: 0,
  455. // color: "#c971ff",
  456. // userPackageDetails: [
  457. // {
  458. // id: 2,
  459. // detailType: 1,
  460. // detailTypeDesc: "照片说话",
  461. // packageId: 2,
  462. // watermark: 0,
  463. // watermarkDesc: "否",
  464. // language: 1,
  465. // languageDesc: "50+",
  466. // sound: 1,
  467. // soundDesc: "400+",
  468. // videoTime: 300,
  469. // aiPortrait: 1,
  470. // aiPortraitDesc: "是",
  471. // photoSing: 1,
  472. // photoSingDesc: "是",
  473. // aiCreateTime: 30,
  474. // resolutionRatio: 2,
  475. // resolutionRatioDesc: "1080p",
  476. // createDate: 1686882177000,
  477. // updateDate: 1686882177000,
  478. // isDel: 0,
  479. // },
  480. // {
  481. // id: 5,
  482. // detailType: 2,
  483. // detailTypeDesc: "口播",
  484. // packageId: 2,
  485. // watermark: 0,
  486. // watermarkDesc: "否",
  487. // language: 1,
  488. // languageDesc: "50+",
  489. // sound: 1,
  490. // soundDesc: "400+",
  491. // videoTime: 300,
  492. // aiCreateTime: 100,
  493. // resolutionRatio: 2,
  494. // resolutionRatioDesc: "1080p",
  495. // humanTemplate: 2,
  496. // humanTemplateDesc: "VIP",
  497. // createDate: 1686882177000,
  498. // updateDate: 1686882177000,
  499. // isDel: 0,
  500. // },
  501. // ],
  502. // },
  503. // {
  504. // id: 3,
  505. // type: 3,
  506. // typeDesc: "加强版",
  507. // englishName: "Advanced",
  508. // dollar: "39.99",
  509. // rmb: "279.99",
  510. // credit: 1200,
  511. // validityDuration: 30,
  512. // inviteUserCredit: 10,
  513. // videoPrice: 5,
  514. // photoPrice: 5,
  515. // talkPrice: 15,
  516. // chargeTime: 60,
  517. // createDate: 1686814258000,
  518. // updateDate: 1686814258000,
  519. // isDel: 0,
  520. // color: "#7b61ff",
  521. // userPackageDetails: [
  522. // {
  523. // id: 3,
  524. // detailType: 1,
  525. // detailTypeDesc: "照片说话",
  526. // packageId: 3,
  527. // watermark: 0,
  528. // watermarkDesc: "否",
  529. // language: 1,
  530. // languageDesc: "50+",
  531. // sound: 1,
  532. // soundDesc: "400+",
  533. // videoTime: 300,
  534. // aiPortrait: 1,
  535. // aiPortraitDesc: "是",
  536. // photoSing: 1,
  537. // photoSingDesc: "是",
  538. // aiCreateTime: 200,
  539. // resolutionRatio: 2,
  540. // resolutionRatioDesc: "1080p",
  541. // createDate: 1686882177000,
  542. // updateDate: 1686882177000,
  543. // isDel: 0,
  544. // },
  545. // {
  546. // id: 6,
  547. // detailType: 2,
  548. // detailTypeDesc: "口播",
  549. // packageId: 3,
  550. // watermark: 0,
  551. // watermarkDesc: "否",
  552. // language: 1,
  553. // languageDesc: "50+",
  554. // sound: 1,
  555. // soundDesc: "400+",
  556. // videoTime: 300,
  557. // aiCreateTime: 200,
  558. // resolutionRatio: 2,
  559. // resolutionRatioDesc: "1080p",
  560. // humanTemplate: 2,
  561. // humanTemplateDesc: "VIP",
  562. // createDate: 1686882177000,
  563. // updateDate: 1686882177000,
  564. // isDel: 0,
  565. // },
  566. // ],
  567. // },
  568. // ]);
  569. const packageList = ref([]);
  570. async function getPackageList() {
  571. const res = await packageInfoApi();
  572. packageList.value = res.data;
  573. }
  574. const showPayDialog = ref(false); //套餐信息dialog显示隐藏
  575. const presentItme = reactive({}); //点击的套餐项
  576. // const presentItme = ref({}); //点击的套餐项
  577. function clickPayDialog(item) {
  578. presentItme.value = item;
  579. showPayDialog.value = true;
  580. }
  581. //#endregion ------------------------------------
  582. //#region 点击套餐内的支付
  583. function showOrderCode(type) {
  584. orderCodeDialogShow.value = true;
  585. myPayVendor.value = type;
  586. createOrderFunc();
  587. }
  588. const orderCodeDialogShow = ref(false);
  589. const orderCodeUrl = ref(null);
  590. //#endregion ------------------------------------
  591. //#region $t在script中的使用
  592. // const {
  593. // appContext: {
  594. // config: { globalProperties },
  595. // },
  596. // } = getCurrentInstance();
  597. // const string = "createVideo.typeScript";
  598. // const t = globalProperties.$t(string);
  599. //#endregion ------------------------------------
  600. //#region 页面滚动
  601. const scrollContainerRef = ref(null);
  602. function handleWheel(event) {
  603. const scrollContainer = scrollContainerRef.value; // 获取滚动容器的引用
  604. const scrollAmount = 150; // 每次滚动的距离
  605. // 检查滚动方向
  606. if (event.deltaY > 0) {
  607. // 向右滚动
  608. scrollContainer.scrollLeft += scrollAmount;
  609. } else {
  610. // 向左滚动
  611. scrollContainer.scrollLeft -= scrollAmount;
  612. }
  613. event.preventDefault(); // 防止页面上下滚动
  614. }
  615. //#endregion ------------------------------------
  616. //#region 联系我们弹窗
  617. const showTalkUsDialog = ref(false);
  618. const updateShowTalkUsDialog = (newValue) => {
  619. showTalkUsDialog.value = newValue;
  620. };
  621. //#endregion ------------------------------------
  622. //#region 页面初始化
  623. onMounted(async () => {
  624. getPackageList();
  625. // createOrderFunc();
  626. });
  627. //#endregion ------------------------------------
  628. //#region 支付
  629. const myPayVendor = ref(null); // 2微信 4支付宝
  630. const payCodeUrl = ref(null); //付款二维码地址
  631. const payCodeImg = ref(null); //付款二维码图片
  632. // 支付失败处理
  633. function payErrorHandle() {
  634. orderCodeDialogShow.value = false;
  635. ElMessage.error(
  636. lanChange.value == "zh-cn"
  637. ? `获取订单失败,请重试`
  638. : `Failed to get the order, please try again`
  639. );
  640. }
  641. // 获取订单
  642. const myOrderNumber = ref(null); //订单号
  643. async function createOrderFunc() {
  644. const data = {
  645. productId: 30,
  646. };
  647. try {
  648. const res = await createOrderApi(data);
  649. if (res.code == 200) {
  650. myOrderNumber.value = res.data;
  651. createPayFunc(res.data);
  652. } else {
  653. payErrorHandle();
  654. }
  655. } catch (error) {
  656. payErrorHandle();
  657. }
  658. }
  659. // 获取订单详情
  660. let iframeBody = ref(null);
  661. const iframeDom = ref(null);
  662. async function createPayFunc(orderNumber) {
  663. const data = {
  664. orderNumber,
  665. payVendor: myPayVendor.value,
  666. };
  667. try {
  668. const res = await createPayApi(data);
  669. if (res.code == 200) {
  670. // 支付宝获取iframe内容
  671. if (res.data.body) {
  672. iframeBody.value = res.data.body;
  673. iframeDom.value = document.getElementById("myIframe");
  674. iframeDom.value.srcdoc = iframeBody.value;
  675. }
  676. // 直接获取二维码
  677. if (res.data.codeUrl) {
  678. payCodeUrl.value = res.data.codeUrl;
  679. }
  680. await getStatusOfOrderFunc(orderNumber);
  681. } else {
  682. payErrorHandle();
  683. }
  684. } catch (error) {
  685. payErrorHandle();
  686. }
  687. }
  688. // 获取订单支付状态 payStatus 查询支付状态 0:待支付,2:支付中,3:已支付
  689. async function getStatusOfOrderFunc(orderNumber) {
  690. if (
  691. route.path != "/myStore" ||
  692. orderCodeDialogShow.value == false ||
  693. orderNumber != myOrderNumber.value
  694. ) {
  695. return;
  696. }
  697. try {
  698. let payVendor = myPayVendor.value;
  699. const res = await getOrderStatusApi(orderNumber, payVendor);
  700. if (res.code == 200) {
  701. if (res.data.orderStatus == 3) {
  702. orderCodeDialogShow.value = false;
  703. ElMessage.success(
  704. lanChange.value == "zh-cn" ? `支付成功!` : `Payment is successful!`
  705. );
  706. return;
  707. } else {
  708. setTimeout(() => {
  709. getStatusOfOrderFunc(orderNumber);
  710. }, 3000);
  711. }
  712. } else {
  713. setTimeout(() => {
  714. getStatusOfOrderFunc(orderNumber);
  715. }, 3000);
  716. }
  717. } catch (error) {
  718. console.log(error, "error");
  719. ElMessage.error(
  720. lanChange.value == "zh-cn"
  721. ? `获取订单失败,请重试`
  722. : `Failed to get the order, please try again`
  723. );
  724. }
  725. }
  726. // 生成二维码
  727. // function qrcode() {
  728. // return;
  729. // }
  730. // 关闭二维码弹窗
  731. function clearCode() {
  732. myPayVendor.value = null; // 2微信 4支付宝
  733. payCodeUrl.value = null;
  734. iframeBody.value = null;
  735. }
  736. // 刷新二维码
  737. function RefreshQR() {
  738. payCodeUrl.value = null;
  739. iframeBody.value = null;
  740. // createOrderFunc();
  741. createPayFunc(myOrderNumber.value);
  742. }
  743. //#endregion ------------------------------------
  744. //#region
  745. //#endregion ------------------------------------
  746. // 创建订单
  747. function createOrder(item) {
  748. createOrderApi({productId: item.id}).then(res => {
  749. createPayFunc(res.data);
  750. })
  751. }
  752. // 获取订单详情
  753. function getOrderDetail(item) {
  754. orderDetailApi(item.id).then(res => {
  755. })
  756. }
  757. //每隔一分钟运行一次保存方法
  758. // const timer = setInterval(()=>{
  759. // findStatus()
  760. // },1000)
  761. function findStatus() {
  762. let data = {
  763. orderNumber: '',
  764. payVendor: ''
  765. }
  766. findStatusApi(data).then(res => {
  767. if (res.data !== 2) { // 如果是2就不停的调,直到返回1、3、4
  768. clearInterval(timer);
  769. }
  770. })
  771. }
  772. </script>
  773. <style lang="scss" scoped>
  774. .page {
  775. // min-width: calc(100vw - 210px);
  776. height: calc(100vh - 80px);
  777. width: 1690px;
  778. padding: 0px 20px 0 20px;
  779. background-color: #fff;
  780. border-radius: 25px 0 0;
  781. padding: 20px;
  782. user-select: none;
  783. overflow: hidden;
  784. ::-webkit-scrollbar {
  785. display: none;
  786. }
  787. }
  788. // 方案列表
  789. .commoditylIst {
  790. display: flex;
  791. justify-content: flex-start;
  792. overflow-x: scroll;
  793. padding: 30px 20px 20px 10px;
  794. max-width: 100%;
  795. // height: 75%;
  796. // overflow: hidden;
  797. // overflow-x: scroll;
  798. // scrollbar-width: none; /* 隐藏滚动条(Chrome、Firefox) */
  799. // -ms-overflow-style: none; /* 隐藏滚动条(IE、Edge) */
  800. // &::-webkit-scrollbar {
  801. // display: none; /* 隐藏滚动条(Safari、Chrome) */
  802. // }
  803. .item {
  804. position: relative;
  805. width: 480px;
  806. // height: 680px;
  807. margin-left: 45px;
  808. background-color: #fffefd;
  809. flex-shrink: 0; /* 防止缩小宽度 */
  810. border: 1px solid #c0bfbd;
  811. border-radius: 20px;
  812. overflow: hidden;
  813. transition: all 0.2s;
  814. cursor: pointer;
  815. &:hover {
  816. .mask {
  817. display: block;
  818. }
  819. }
  820. // 遮罩层
  821. .mask {
  822. position: absolute;
  823. top: 0;
  824. left: 0;
  825. display: none;
  826. width: 100%;
  827. height: 100%;
  828. line-height: 780px;
  829. font-size: 120px;
  830. font-weight: 900;
  831. text-align: center;
  832. background-color: rgba(0, 0, 0, 0.2);
  833. cursor: pointer;
  834. }
  835. .line {
  836. height: 20px;
  837. background-color: pink;
  838. cursor: pointer;
  839. }
  840. .info {
  841. padding: 20px;
  842. cursor: pointer;
  843. .content {
  844. // height: 220px;
  845. padding: 20px;
  846. border-bottom: 1px solid #c0bfbd;
  847. cursor: pointer;
  848. .titleBox {
  849. display: flex;
  850. justify-content: space-between;
  851. }
  852. .title {
  853. font-size: 30px;
  854. font-weight: 700;
  855. width: 100%;
  856. margin-bottom: 10px;
  857. cursor: pointer;
  858. text-align: center;
  859. .el-icon {
  860. line-height: 30px;
  861. width: 40px;
  862. height: 40px;
  863. font-size: 40px;
  864. color: #000;
  865. text-align: center;
  866. vertical-align: sub;
  867. cursor: pointer;
  868. }
  869. }
  870. .money {
  871. margin-bottom: 10px;
  872. font-size: 20px;
  873. color: #7c7c7a;
  874. cursor: pointer;
  875. text-align: end;
  876. .price {
  877. font-size: 30px;
  878. font-weight: 700;
  879. color: #242625;
  880. cursor: pointer;
  881. }
  882. }
  883. .time {
  884. text-align: end;
  885. margin-bottom: 10px;
  886. font-size: 20px;
  887. color: #7c7c7a;
  888. cursor: pointer;
  889. margin-bottom: 20px;
  890. span {
  891. font-weight: 700;
  892. color: #242625;
  893. cursor: pointer;
  894. margin-right: 5px;
  895. }
  896. }
  897. .button {
  898. width: 100%;
  899. height: 40px;
  900. font-size: 16px;
  901. border-radius: 10px;
  902. text-align: center;
  903. line-height: 40px;
  904. color: #fff;
  905. font-weight: 700;
  906. background-color: yellow;
  907. cursor: pointer;
  908. }
  909. .description {
  910. cursor: pointer;
  911. margin-top: 50px;
  912. margin-bottom: 30px;
  913. width: 100%;
  914. display: flex;
  915. flex-direction: column;
  916. align-items: center;
  917. font-size: 18px;
  918. color: #7c7c7a;
  919. > div {
  920. cursor: pointer;
  921. margin-bottom: 20px;
  922. }
  923. }
  924. }
  925. .authority {
  926. margin-top: 10px;
  927. &-item {
  928. display: flex;
  929. justify-content: space-between;
  930. cursor: pointer;
  931. font-weight: 400;
  932. font-size: 18px;
  933. padding: 5px 10px;
  934. color: #7c7c7a;
  935. span {
  936. cursor: pointer;
  937. color: #7c7c7a;
  938. margin-right: 30px;
  939. }
  940. i {
  941. font-size: 20px;
  942. font-style: normal;
  943. margin-right: 5px;
  944. background-image: -webkit-linear-gradient(
  945. left,
  946. #4b61dc,
  947. #15d1b8 25%,
  948. #4b61dc 50%,
  949. #15d1b8 75%,
  950. #4b61dc
  951. ) !important;
  952. -webkit-text-fill-color: transparent !important;
  953. -webkit-background-clip: text !important;
  954. background-clip: text !important;
  955. -webkit-background-size: 200% 100% !important;
  956. background-size: 200% 100% !important;
  957. }
  958. }
  959. }
  960. }
  961. &:hover {
  962. cursor: pointer;
  963. transform: translateY(-20px);
  964. box-shadow: #00000026 2px 2px 2px 2px;
  965. }
  966. }
  967. }
  968. // 支付弹窗
  969. .payDialog {
  970. display: flex;
  971. position: relative;
  972. min-height: 500px;
  973. .left {
  974. width: 35%;
  975. border-right: 1px solid #7c7c7a;
  976. .title {
  977. color: #242625;
  978. font-weight: 700;
  979. font-size: 30px;
  980. text-align: center;
  981. }
  982. .money {
  983. text-align: center;
  984. span {
  985. font-size: 30px;
  986. font-weight: 700;
  987. color: #242625;
  988. }
  989. }
  990. .authority {
  991. margin-top: 10px;
  992. &-item {
  993. display: flex;
  994. justify-content: space-between;
  995. cursor: pointer;
  996. font-weight: 400;
  997. font-size: 14px;
  998. padding: 2px 3px;
  999. color: #7c7c7a;
  1000. span {
  1001. cursor: pointer;
  1002. color: #7c7c7a;
  1003. margin-right: 30px;
  1004. }
  1005. i {
  1006. font-size: 20px;
  1007. font-style: normal;
  1008. margin-right: 5px;
  1009. background-image: -webkit-linear-gradient(
  1010. left,
  1011. #4b61dc,
  1012. #15d1b8 25%,
  1013. #4b61dc 50%,
  1014. #15d1b8 75%,
  1015. #4b61dc
  1016. ) !important;
  1017. -webkit-text-fill-color: transparent !important;
  1018. -webkit-background-clip: text !important;
  1019. background-clip: text !important;
  1020. -webkit-background-size: 200% 100% !important;
  1021. background-size: 200% 100% !important;
  1022. }
  1023. }
  1024. }
  1025. }
  1026. .right {
  1027. width: 65%;
  1028. position: absolute;
  1029. top: 20%;
  1030. right: 0%;
  1031. padding-left: 20%;
  1032. > div {
  1033. width: 200px;
  1034. height: 40px;
  1035. // border: 1px solid #242625;
  1036. border-radius: 10px;
  1037. text-align: center;
  1038. line-height: 40px;
  1039. margin: 30px;
  1040. color: #fff;
  1041. }
  1042. }
  1043. }
  1044. // 二维码弹窗
  1045. .orderCodeDialog {
  1046. width: 100%;
  1047. .codeImg {
  1048. display: flex;
  1049. margin: auto;
  1050. justify-content: space-evenly;
  1051. align-items: center;
  1052. width: 350px;
  1053. height: 350px;
  1054. border: 1px solid #ccc;
  1055. border-radius: 15px;
  1056. overflow: hidden;
  1057. padding: 10px;
  1058. img {
  1059. width: 100%;
  1060. height: 100%;
  1061. }
  1062. }
  1063. .tips {
  1064. padding-top: 10px;
  1065. text-align: center;
  1066. }
  1067. .btnBox {
  1068. padding: 15px 40px;
  1069. display: flex;
  1070. justify-content: space-evenly;
  1071. > div {
  1072. padding: 10px 20px;
  1073. color: #000;
  1074. background-color: #fff;
  1075. border: #000 solid 1px;
  1076. border-radius: 10px;
  1077. transition: all 0.3s;
  1078. cursor: pointer;
  1079. &:hover {
  1080. color: #fff;
  1081. background-color: #000;
  1082. }
  1083. }
  1084. }
  1085. }
  1086. // 联系我们弹窗
  1087. .TalkUsDialog {
  1088. display: flex;
  1089. flex-direction: column;
  1090. align-items: center;
  1091. &-content {
  1092. width: 100%;
  1093. display: flex;
  1094. justify-content: space-between;
  1095. > div {
  1096. width: 30%;
  1097. display: flex;
  1098. flex-direction: column;
  1099. align-items: center;
  1100. img {
  1101. width: 100px;
  1102. height: 100px;
  1103. margin-bottom: 40px;
  1104. }
  1105. }
  1106. .sendEmail {
  1107. text-decoration: underline;
  1108. cursor: pointer;
  1109. }
  1110. }
  1111. .close {
  1112. margin-top: 50px;
  1113. width: 100px;
  1114. height: 50px;
  1115. font-size: 18px;
  1116. line-height: 50px;
  1117. text-align: center;
  1118. border-radius: 15px;
  1119. border: 2px solid #ccc;
  1120. cursor: pointer;
  1121. }
  1122. }
  1123. </style>