邃芒慧影、口播(PC) https://neuver.metavatar.cc/
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
 
 
 
 

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