diff --git a/package.json b/package.json index 1a88922..9dafff1 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "vue": "^3.2.45", "vue-cropper": "^1.0.9", "vue-i18n": "9", + "vue-qr": "^4.0.9", "vue-router": "^4.0.13" }, "devDependencies": { diff --git a/src/apis/pay.js b/src/apis/pay.js new file mode 100644 index 0000000..04922ce --- /dev/null +++ b/src/apis/pay.js @@ -0,0 +1,27 @@ +import request from "@/utils/request.js"; + +/** +* @description:购买金币下单 +* @param productId +* @return: data +*/ +export function createOrderApi(data) { + return request({ + url: `api/productOrder/createOrder`, + method: 'post', + data + }) +} + +/** +* @description:获取订单数据 +* @param data +* @return: data +*/ +export function createPayApi(data) { + return request({ + url: `api/productOrder/createPay`, + method: 'post', + data + }) +} \ No newline at end of file diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts index e5c7bdb..9ea2d5d 100644 --- a/src/types/auto-imports.d.ts +++ b/src/types/auto-imports.d.ts @@ -2,7 +2,6 @@ export {} declare global { const EffectScope: typeof import('vue')['EffectScope'] - const ElForm: typeof import('element-plus/es')['ElForm'] const ElMessage: typeof import('element-plus/es')['ElMessage'] const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] @@ -271,7 +270,6 @@ import { UnwrapRef } from 'vue' declare module 'vue' { interface ComponentCustomProperties { readonly EffectScope: UnwrapRef - readonly ElForm: UnwrapRef readonly ElMessage: UnwrapRef readonly ElMessageBox: UnwrapRef readonly asyncComputed: UnwrapRef diff --git a/src/types/components.d.ts b/src/types/components.d.ts index 3ec7dc5..713f9b5 100644 --- a/src/types/components.d.ts +++ b/src/types/components.d.ts @@ -18,13 +18,10 @@ declare module '@vue/runtime-core' { ElDropdown: typeof import('element-plus/es')['ElDropdown'] ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'] ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu'] - ElForm: typeof import('element-plus/es')['ElForm'] - ElFormItem: typeof import('element-plus/es')['ElFormItem'] ElIcon: typeof import('element-plus/es')['ElIcon'] ElInput: typeof import('element-plus/es')['ElInput'] ElInputNumber: typeof import('element-plus/es')['ElInputNumber'] ElOption: typeof import('element-plus/es')['ElOption'] - ElPagination: typeof import('element-plus/es')['ElPagination'] ElSelect: typeof import('element-plus/es')['ElSelect'] ElSwitch: typeof import('element-plus/es')['ElSwitch'] ElTooltip: typeof import('element-plus/es')['ElTooltip'] @@ -32,19 +29,13 @@ declare module '@vue/runtime-core' { GithubCorner: typeof import('./../components/GithubCorner/index.vue')['default'] Hamburger: typeof import('./../components/Hamburger/index.vue')['default'] IconSelect: typeof import('./../components/IconSelect/index.vue')['default'] - IEpCloseBold: typeof import('~icons/ep/close-bold')['default'] - IEpDelete: typeof import('~icons/ep/delete')['default'] IEpDocumentAdd: typeof import('~icons/ep/document-add')['default'] - IEpDownload: typeof import('~icons/ep/download')['default'] IEpEdit: typeof import('~icons/ep/edit')['default'] IEpGoods: typeof import('~icons/ep/goods')['default'] - IEpLoading: typeof import('~icons/ep/loading')['default'] IEpLock: typeof import('~icons/ep/lock')['default'] IEpMenu: typeof import('~icons/ep/menu')['default'] IEpPhone: typeof import('~icons/ep/phone')['default'] - IEpSearch: typeof import('~icons/ep/search')['default'] IEpUser: typeof import('~icons/ep/user')['default'] - IEpVideoPlay: typeof import('~icons/ep/video-play')['default'] LangSelect: typeof import('./../components/LangSelect/index.vue')['default'] MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default'] MyLoading: typeof import('./../components/myLoading.vue')['default'] diff --git a/src/views/myStore/index.vue b/src/views/myStore/index.vue index 5f6bd2f..ddcf8b9 100644 --- a/src/views/myStore/index.vue +++ b/src/views/myStore/index.vue @@ -186,28 +186,111 @@
{{ $t(presentItme.value.typeDesc) }}
-
- {{ presentItme.value.price }} - 元/{{ presentItme.value.priceTime }} +
+ {{ + lanChange == "zh-cn" + ? presentItme.value.rmb + "¥" + : presentItme.value.dollar + "$" + }}/{{ presentItme.value.validityDuration }}{{ $t("shop.day") }}
-
- {{ item }}123 +
+ {{ presentItme.value.credit }}{{ $t("shop.score") }} +
+ +
+
+ {{ $t("shop.InviteGetscore") }}: + + {{ presentItme.value.inviteUserCredit }}{{ $t("shop.score") }} +
+
+ {{ $t("shop.createVideoPrice") }}:{{ presentItme.value.videoPrice }}{{ $t("shop.score") }} +
+
+ {{ $t("shop.AIGeneratesPhotoPrices") }}:{{ presentItme.value.photoPrice }}{{ $t("shop.score") }} +
+
+ {{ $t("shop.UnitChargeDuration") }}:{{ presentItme.value.chargeTime }}{{ $t("shop.second") }} +
+ +
+ {{ $t("shop.Language") }}:{{ + presentItme.value.userPackageDetails[0].languageDesc + }} +
+
+ {{ $t("shop.sound") }}:{{ + presentItme.value.userPackageDetails[0].soundDesc + }} +
+
+ {{ $t("shop.IndividualVideoDuration") }}:{{ presentItme.value.userPackageDetails[0].videoTime }}{{ $t("shop.second") }} +
+
+ {{ $t("shop.Watermark") }}:{{ + presentItme.value.userPackageDetails[0].aiPortrait == 0 + ? $t("shop.yes") + : $t("shop.no") + }} +
+
+ {{ $t("shop.AIGeneratedPortrait") }}:{{ + presentItme.value.userPackageDetails[0].aiPortrait == 0 + ? $t("shop.no") + : $t("shop.yes") + }} +
+
+ {{ $t("shop.PhotoSinging") }}:{{ + presentItme.value.userPackageDetails[0].photoSing == 0 + ? $t("shop.no") + : $t("shop.yes") + }} +
+
+ {{ $t("shop.AIGeneratedText") }}:{{ + presentItme.value.userPackageDetails[0].aiCreateTime + }} +
+
+ {{ $t("shop.VideoResolution") }}:{{ + presentItme.value.userPackageDetails[0].resolutionRatioDesc + }} +
{{ $t("shop.WeChatPay") }}
{{ $t("shop.Alipay") }}
@@ -225,11 +308,17 @@ width="30%" append-to-body destroy-on-close + @closed="clearCode" >
- - + +
扫描二维码进行付款
@@ -254,6 +343,9 @@ import { getCurrentInstance, ref, onMounted } from "vue"; import { useI18n } from "vue-i18n"; import talkUs from "@/components/talkUs.vue"; import { useRoute, useRouter } from "vue-router"; +import { createOrderApi, createPayApi } from "@/apis/pay"; +import vueQr from "vue-qr/src/packages/vue-qr.vue"; + const route = useRoute(); const router = useRouter(); const { locale } = useI18n(); @@ -472,12 +564,15 @@ function clickPayDialog(item) { presentItme.value = item; showPayDialog.value = true; } -function showOrderCode(type) { - orderCodeDialogShow.value = true; -} + //#endregion ------------------------------------ //#region 点击套餐内的支付 +function showOrderCode(type) { + orderCodeDialogShow.value = true; + myPayVendor.value = type; + createOrderFunc(); +} const orderCodeDialogShow = ref(false); const orderCodeUrl = ref(null); //#endregion ------------------------------------ @@ -520,11 +615,65 @@ const updateShowTalkUsDialog = (newValue) => { //#region 页面初始化 onMounted(async () => { // getPackageList(); + // createOrderFunc(); }); //#endregion ------------------------------------ -//#region - +//#region 支付 +const myPayVendor = ref(null); // 2微信 4支付宝 +const payCodeUrl = ref(null); //付款二维码地址 +const payCodeImg = ref(null); //付款二维码图片 +// 支付失败处理 +function payErrorHandle() { + orderCodeDialogShow.value = false; + ElMessage.error( + lanChange.value == "zh-cn" + ? `获取订单失败,请重试` + : `Failed to get the order, please try again` + ); +} +// 获取订单 +async function createOrderFunc() { + const data = { + productId: 30, + }; + try { + const res = await createOrderApi(data); + if (res.code == 200) { + createPayFunc(res.data); + } else { + payErrorHandle(); + } + } catch (error) { + payErrorHandle(); + } +} +// 获取订单详情 +async function createPayFunc(orderNumber) { + const data = { + orderNumber, + payVendor: myPayVendor.value, + }; + try { + const res = await createPayApi(data); + if (res.code == 200) { + payCodeUrl.value = res.data.codeUrl; + } else { + payErrorHandle(); + } + } catch (error) { + payErrorHandle(); + } +} +// 生成二维码 +function qrcode() { + return; +} +// 关闭二维码弹窗 +function clearCode(params) { + myPayVendor.value = null; // 2微信 4支付宝 + payCodeUrl.value = null; +} //#endregion ------------------------------------ //#region @@ -744,7 +893,8 @@ onMounted(async () => { font-size: 30px; text-align: center; } - .price { + .money { + text-align: center; span { font-size: 30px; font-weight: 700; @@ -752,7 +902,40 @@ onMounted(async () => { } } .authority { - padding: 10px 20px; + margin-top: 10px; + &-item { + display: flex; + justify-content: space-between; + cursor: pointer; + font-weight: 400; + font-size: 14px; + padding: 2px 3px; + color: #7c7c7a; + + span { + cursor: pointer; + color: #7c7c7a; + margin-right: 30px; + } + i { + font-size: 20px; + font-style: normal; + margin-right: 5px; + background-image: -webkit-linear-gradient( + left, + #4b61dc, + #15d1b8 25%, + #4b61dc 50%, + #15d1b8 75%, + #4b61dc + ) !important; + -webkit-text-fill-color: transparent !important; + -webkit-background-clip: text !important; + background-clip: text !important; + -webkit-background-size: 200% 100% !important; + background-size: 200% 100% !important; + } + } } } .right { diff --git a/yarn.lock b/yarn.lock index 1d67308..45ebaf9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2289,6 +2289,13 @@ decode-uri-component@^0.2.0: resolved "https://registry.npmmirror.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz" integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ== +decompress-response@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-6.0.0.tgz#ca387612ddb7e104bd16d85aab00d5ecf09c66fc" + integrity sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ== + dependencies: + mimic-response "^3.1.0" + dedent@0.7.0: version "0.7.0" resolved "https://registry.npmmirror.com/dedent/-/dedent-0.7.0.tgz" @@ -3182,6 +3189,17 @@ glob@7.2.3, glob@^7.1.3: once "^1.3.0" path-is-absolute "^1.0.0" +glob@^8.0.1: + version "8.1.0" + resolved "https://registry.yarnpkg.com/glob/-/glob-8.1.0.tgz#d388f656593ef708ee3e34640fdfb99a9fd1c33e" + integrity sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ== + dependencies: + fs.realpath "^1.0.0" + inflight "^1.0.4" + inherits "2" + minimatch "^5.0.1" + once "^1.3.0" + global-dirs@^0.1.1: version "0.1.1" resolved "https://registry.npmmirror.com/global-dirs/-/global-dirs-0.1.1.tgz" @@ -3759,6 +3777,11 @@ js-base64@^2.1.9: resolved "https://registry.npmmirror.com/js-base64/-/js-base64-2.6.4.tgz" integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ== +js-binary-schema-parser@^2.0.2: + version "2.0.3" + resolved "https://registry.yarnpkg.com/js-binary-schema-parser/-/js-binary-schema-parser-2.0.3.tgz#3d7848748e8586e63b34e8911b643f59cfb6396e" + integrity sha512-xezGJmOb4lk/M1ZZLTR/jaBHQ4gG/lqQnJqdIv4721DMggsa1bDVlHXNeHYogaIEHD9vCRv0fcL4hMA+Coarkg== + js-sdsl@^4.1.4: version "4.4.0" resolved "https://registry.npmmirror.com/js-sdsl/-/js-sdsl-4.4.0.tgz" @@ -4299,6 +4322,11 @@ mimic-fn@^4.0.0: resolved "https://registry.npmmirror.com/mimic-fn/-/mimic-fn-4.0.0.tgz" integrity sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw== +mimic-response@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9" + integrity sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ== + min-indent@^1.0.0: version "1.0.1" resolved "https://registry.npmmirror.com/min-indent/-/min-indent-1.0.1.tgz" @@ -4311,6 +4339,13 @@ minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2: dependencies: brace-expansion "^1.1.7" +minimatch@^5.0.1: + version "5.1.6" + resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96" + integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g== + dependencies: + brace-expansion "^2.0.1" + minimatch@^6.1.6: version "6.2.0" resolved "https://registry.npmjs.org/minimatch/-/minimatch-6.2.0.tgz" @@ -4565,7 +4600,7 @@ ohash@^1.1.1: resolved "https://registry.npmjs.org/ohash/-/ohash-1.1.2.tgz" integrity sha512-9CIOSq5945rI045GFtcO3uudyOkYVY1nyfFxVQp+9BRgslr8jPNiSSrsFGg/BNTUFOLqx0P5tng6G32brIPw0w== -once@^1.3.0: +once@^1.3.0, once@^1.3.1: version "1.4.0" resolved "https://registry.npmmirror.com/once/-/once-1.4.0.tgz" integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w== @@ -4665,6 +4700,11 @@ parent-module@^1.0.0: dependencies: callsites "^3.0.0" +parenthesis@^3.1.5: + version "3.1.8" + resolved "https://registry.yarnpkg.com/parenthesis/-/parenthesis-3.1.8.tgz#3457fccb8f05db27572b841dad9d2630b912f125" + integrity sha512-KF/U8tk54BgQewkJPvB4s/US3VQY68BRDpH638+7O/n58TpnwiwnOtGIOsT2/i+M78s61BBpeC83STB88d8sqw== + parse-json@^5.0.0: version "5.2.0" resolved "https://registry.npmmirror.com/parse-json/-/parse-json-5.2.0.tgz" @@ -5271,6 +5311,20 @@ signal-exit@^4.0.1: resolved "https://registry.npmmirror.com/signal-exit/-/signal-exit-4.0.2.tgz" integrity sha512-MY2/qGx4enyjprQnFaZsHib3Yadh3IXyV2C321GY0pjGfVBu4un0uDJkwgdxqO+Rdx8JMT8IfJIRwbYVz3Ob3Q== +simple-concat@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/simple-concat/-/simple-concat-1.0.1.tgz#f46976082ba35c2263f1c8ab5edfe26c41c9552f" + integrity sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q== + +simple-get@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/simple-get/-/simple-get-4.0.1.tgz#4a39db549287c979d352112fa03fd99fd6bc3543" + integrity sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA== + dependencies: + decompress-response "^6.0.0" + once "^1.3.1" + simple-concat "^1.0.0" + sirv@^2.0.2: version "2.0.3" resolved "https://registry.npmmirror.com/sirv/-/sirv-2.0.3.tgz" @@ -5471,6 +5525,13 @@ string-argv@^0.3.1: resolved "https://registry.npmmirror.com/string-argv/-/string-argv-0.3.2.tgz" integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q== +string-split-by@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/string-split-by/-/string-split-by-1.0.0.tgz#53895fb3397ebc60adab1f1e3a131f5372586812" + integrity sha512-KaJKY+hfpzNyet/emP81PJA9hTVSfxNLS9SFTWxdCnnW1/zOOwiV248+EfoX7IQFcBaOp4G5YE6xTJMF+pLg6A== + dependencies: + parenthesis "^3.1.5" + string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz" @@ -6268,6 +6329,16 @@ vue-i18n@9: "@intlify/vue-devtools" "9.2.2" "@vue/devtools-api" "^6.2.1" +vue-qr@^4.0.9: + version "4.0.9" + resolved "https://registry.yarnpkg.com/vue-qr/-/vue-qr-4.0.9.tgz#6cb965dd0c5a0dff947e6ef582ef149b0780b986" + integrity sha512-pAISV94T0MNEYA3NGjykUpsXRE2QfaNxlu9ZhEL6CERgqNc21hJYuP3hRVzAWfBQlgO18DPmZTbrFerJC3+Ikw== + dependencies: + glob "^8.0.1" + js-binary-schema-parser "^2.0.2" + simple-get "^4.0.1" + string-split-by "^1.0.0" + vue-router@^4.0.13: version "4.0.13" resolved "https://registry.npmjs.org/vue-router/-/vue-router-4.0.13.tgz"