浏览代码

支付

dev
chutingting 1年前
父节点
当前提交
b72534ac83
共有 7 个文件被更改,包括 1228 次插入534 次删除
  1. +1
    -2
      src/apis/myStore.js
  2. 二进制
      src/assets/img/alipay.png
  3. 二进制
      src/assets/img/weChat.png
  4. +0
    -2
      src/types/auto-imports.d.ts
  5. +4
    -0
      src/types/components.d.ts
  6. +1152
    -0
      src/views/myStore/index copy.vue
  7. +71
    -530
      src/views/myStore/index.vue

+ 1
- 2
src/apis/myStore.js 查看文件

@@ -13,7 +13,6 @@ export function packageInfoApi() {
})
}


/**
* @description 订单详情
* @params
@@ -21,7 +20,7 @@ export function packageInfoApi() {
*/
export function orderDetailApi(id) {
return request({
url: `/api/productOrder/findByNumber?id=${id}`,
url: `/api/productOrder/findByNumber?orderNumber=${id}`,
method: 'get'
})
}


二进制
src/assets/img/alipay.png 查看文件

之前 之后
宽度: 200  |  高度: 200  |  大小: 3.7 KiB

二进制
src/assets/img/weChat.png 查看文件

之前 之后
宽度: 200  |  高度: 200  |  大小: 4.0 KiB

+ 0
- 2
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<typeof import('vue')['EffectScope']>
readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']>
readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>


+ 4
- 0
src/types/components.d.ts 查看文件

@@ -29,6 +29,10 @@ declare module '@vue/runtime-core' {
ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioButto: typeof import('element-plus/es')['ElRadioButto']
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
ElSwitch: typeof import('element-plus/es')['ElSwitch']


+ 1152
- 0
src/views/myStore/index copy.vue
文件差异内容过多而无法显示
查看文件


+ 71
- 530
src/views/myStore/index.vue 查看文件

@@ -2,12 +2,7 @@
<div class="page">
<div class="commoditylIst" ref="scrollContainerRef" @wheel="handleWheel">
<div class="item" v-for="item in packageList" :key="item.typeDesc">
<!-- 遮罩层 -->
<!-- <div class="mask" v-if="item.type != 1">
<el-icon><i-ep-Lock /></el-icon>
</div> -->
<!-- clickPayDialog(item) -->
<div @click="getOrderDetail(item)">
<div @click="clickPayDialog(item)">
<div class="line" :style="`background-color:${item.color} ;`"></div>
<div class="info">
<!-- 商品信息 -->
@@ -27,120 +22,19 @@
币值<span>{{ item.glod }}</span
>
</div>
<div class="button" :style="`background-color: #f3af00 ;`">
方案选择
</div>
<!-- <div
v-if="item.type != 1"
class="button"
:style="`background-color:${item.color} ;`"
>
{{ $t("createVideo.comingSoon") }}
<div class="button" @click="createOrder(item)" :style="`background-color: #f3af00 ;`">
创建订单
</div>
<div
v-else
class="button"
:style="`background-color:${item.color} ;`"
>
{{ $t("shop.selectPlan") }}
</div> -->
</div>
<!-- 商品权益 -->
<div class="authority">
<div v-html="item.detail"></div>
<!-- <div class="authority-item">
{{ $t("shop.InviteGetscore") }}:

<span>
<i>{{ item.inviteUserCredit }}</i
>{{ $t("shop.score") }}</span
>
</div>
<div class="authority-item">
{{ $t("shop.createVideoPrice") }}:<span
><i>{{ item.videoPrice }}</i
>{{ $t("shop.score") }}</span
>
</div>
<div class="authority-item">
{{ $t("shop.AIGeneratesPhotoPrices") }}:<span
><i>{{ item.photoPrice }}</i
>{{ $t("shop.score") }}</span
>
</div>
<div class="authority-item">
{{ $t("shop.UnitChargeDuration") }}:<span
><i>{{ item.chargeTime }}</i
>{{ $t("shop.second") }}</span
>
</div> -->

<!-- <div class="authority-item">
{{ $t("shop.Language") }}:<span
><i>{{ item.userPackageDetails[0].languageDesc }}</i></span
>
</div>
<div class="authority-item">
{{ $t("shop.sound") }}:<span
><i>{{ item.userPackageDetails[0].soundDesc }}</i></span
>
</div>
<div class="authority-item">
{{ $t("shop.IndividualVideoDuration") }}:<span
><i>{{ item.userPackageDetails[0].videoTime }}</i
>{{ $t("shop.second") }}</span
>
</div>
<div class="authority-item">
{{ $t("shop.Watermark") }}:<span>{{
item.userPackageDetails[0].aiPortrait == 0
? $t("shop.yes")
: $t("shop.no")
}}</span>
</div>
<div class="authority-item">
{{ $t("shop.AIGeneratedPortrait") }}:<span>{{
item.userPackageDetails[0].aiPortrait == 0
? $t("shop.no")
: $t("shop.yes")
}}</span>
</div>
<div class="authority-item">
{{ $t("shop.PhotoSinging") }}:<span>{{
item.userPackageDetails[0].photoSing == 0
? $t("shop.no")
: $t("shop.yes")
}}</span>
</div>
<div class="authority-item">
{{ $t("shop.AIGeneratedText") }}:<span
><i>{{ item.userPackageDetails[0].aiCreateTime }}</i></span
>
</div>
<div class="authority-item">
{{ $t("shop.VideoResolution") }}:<span>{{
item.userPackageDetails[0].resolutionRatioDesc
}}</span>
</div> -->
<!-- <div class="authority-item">
{{ $t("shop.DigitalPersonTemplate") }}:{{
item.userPackageDetails[0].humanTemplateDesc
}}
</div> -->
<!-- <div
class="authority-item"
v-for="items in item.authority"
:key="items"
>
<span>✔</span>{{ items }}
</div> -->
</div>
</div>
</div>
</div>
<!-- 企业版 -->
<div class="item" @click="showTalkUsDialog = true">
<!-- 遮罩层 -->
<!-- <div class="item" @click="showTalkUsDialog = true">
<div class="mask" v-if="false">
<el-icon><i-ep-Lock /></el-icon>
</div>
@@ -152,7 +46,6 @@
{{ $t("shop.Ent") }}
</div>
</div>
<!-- 描述 -->
<div class="description">
<div>
{{ lanChange == "zh-cn" ? "所有权限" : "All Pro Benefits" }}
@@ -183,129 +76,20 @@
</div>
</div>
</div>
</div>
</div> -->
</div>
<!-- 对话框 v-if="false"-->
<el-dialog v-model="showPayDialog" width="60%" center>
<el-dialog v-model="showPayDialog"
title="选择支付方式" width="300px">
<div class="payDialog">
<div class="left">
<!-- <div class="title">{{ $t(presentItme.value.title) }}</div> -->
<div class="title">{{ $t(presentItme.value.typeDesc) }}</div>
<div class="money">
<span class="price">{{
lanChange == "zh-cn"
? presentItme.value.rmb + "¥"
: presentItme.value.dollar + "$"
}}</span
>/{{ presentItme.value.validityDuration }}{{ $t("shop.day") }}
</div>
<div class="time">
<span>{{ presentItme.value.credit }}</span
>{{ $t("shop.score") }}
</div>
<!-- 套餐内容 -->
<div class="authority">
<div class="authority-item">
{{ $t("shop.InviteGetscore") }}:
<span>
<i>{{ presentItme.value.inviteUserCredit }}</i
>{{ $t("shop.score") }}</span
>
</div>
<div class="authority-item">
{{ $t("shop.createVideoPrice") }}:<span
><i>{{ presentItme.value.videoPrice }}</i
>{{ $t("shop.score") }}</span
>
</div>
<div class="authority-item">
{{ $t("shop.AIGeneratesPhotoPrices") }}:<span
><i>{{ presentItme.value.photoPrice }}</i
>{{ $t("shop.score") }}</span
>
</div>
<div class="authority-item">
{{ $t("shop.UnitChargeDuration") }}:<span
><i>{{ presentItme.value.chargeTime }}</i
>{{ $t("shop.second") }}</span
>
</div>

<div class="authority-item">
{{ $t("shop.Language") }}:<span
><i>{{
presentItme.value.userPackageDetails[0].languageDesc
}}</i></span
>
</div>
<div class="authority-item">
{{ $t("shop.sound") }}:<span
><i>{{
presentItme.value.userPackageDetails[0].soundDesc
}}</i></span
>
</div>
<div class="authority-item">
{{ $t("shop.IndividualVideoDuration") }}:<span
><i>{{ presentItme.value.userPackageDetails[0].videoTime }}</i
>{{ $t("shop.second") }}</span
>
</div>
<div class="authority-item">
{{ $t("shop.Watermark") }}:<span>{{
presentItme.value.userPackageDetails[0].aiPortrait == 0
? $t("shop.yes")
: $t("shop.no")
}}</span>
</div>
<div class="authority-item">
{{ $t("shop.AIGeneratedPortrait") }}:<span>{{
presentItme.value.userPackageDetails[0].aiPortrait == 0
? $t("shop.no")
: $t("shop.yes")
}}</span>
</div>
<div class="authority-item">
{{ $t("shop.PhotoSinging") }}:<span>{{
presentItme.value.userPackageDetails[0].photoSing == 0
? $t("shop.no")
: $t("shop.yes")
}}</span>
</div>
<div class="authority-item">
{{ $t("shop.AIGeneratedText") }}:<span
><i>{{
presentItme.value.userPackageDetails[0].aiCreateTime
}}</i></span
>
</div>
<div class="authority-item">
{{ $t("shop.VideoResolution") }}:<span>{{
presentItme.value.userPackageDetails[0].resolutionRatioDesc
}}</span>
</div>
</div>
</div>
<div class="right">
<div
style="background-color: #07c160; cursor: pointer"
@click="showOrderCode(2)"
>
{{ $t("shop.WeChatPay") }}
</div>
<div
style="background-color: #1378fe; cursor: pointer"
@click="showOrderCode(4)"
>
{{ $t("shop.Alipay") }}
</div>
<div
style="background-color: #0070ba; cursor: pointer"
@click="showOrderCode(3)"
>
Paypal
</div>
</div>
<el-radio-group v-model="payVendor">
<el-radio label="4" border>
<img src="../../assets/img/alipay.png" alt="" />支付宝
</el-radio>
<el-radio label="2" border>
<img src="../../assets/img/weChat.png" alt="" />微信
</el-radio>
</el-radio-group>
</div>
<!-- 二维码弹出框 -->
<el-dialog
@@ -338,13 +122,21 @@
: `Scan the QR code for payment`
}}
</div>
<div class="btnBox">
<!-- <div class="btnBox">
<div @click="RefreshQR">
{{ lanChange == "zh-cn" ? `刷新二维码` : `Refresh QR code` }}
</div>
</div>
</div> -->
</div>
</el-dialog>
<template #footer>
<span class="dialog-footer">
<el-button size="small" @click="showPayDialog = false">取消</el-button>
<el-button size="small" type="primary" @click="payConfirm">
确定
</el-button>
</span>
</template>
</el-dialog>

<!-- 联系我们对话框 -->
@@ -363,7 +155,8 @@ import { useI18n } from "vue-i18n";
import talkUs from "@/components/talkUs.vue";
import { useRoute, useRouter } from "vue-router";
import { createOrderApi, createPayApi, getOrderStatusApi } from "@/apis/pay";
import { orderDetailApi } from '@/apis/myStore.js'
import { orderDetailApi, findStatusApi } from '@/apis/myStore.js'
import vueQr from 'vue-qr/src/packages/vue-qr.vue';

const route = useRoute();
const router = useRouter();
@@ -373,204 +166,6 @@ const lanChange = ref(locale);
const AccessToken = localStorage.getItem("AccessToken"); // 判断有没有登录
//#endregion ------------------------------------

//#region 各个套餐的逻辑
// const packageList = ref([
// {
// id: 1,
// type: 1,
// typeDesc: "基础版",
// englishName: "Trial",
// dollar: "0.00",
// rmb: "0.00",
// credit: 100,
// validityDuration: 30,
// inviteUserCredit: 10,
// videoPrice: 10,
// photoPrice: 10,
// talkPrice: 20,
// chargeTime: 60,
// createDate: 1686814258000,
// updateDate: 1686814258000,
// isDel: 0,
// color: "#f3af00",
// userPackageDetails: [
// {
// id: 1,
// detailType: 1,
// detailTypeDesc: "照片说话",
// packageId: 1,
// watermark: 1,
// watermarkDesc: "是",
// language: 1,
// languageDesc: "50+",
// sound: 1,
// soundDesc: "400+",
// videoTime: 60,
// aiPortrait: 0,
// aiPortraitDesc: "否",
// photoSing: 0,
// photoSingDesc: "否",
// aiCreateTime: 0,
// resolutionRatio: 1,
// resolutionRatioDesc: "720p",
// createDate: 1686882177000,
// updateDate: 1686882177000,
// isDel: 0,
// },
// {
// id: 4,
// detailType: 2,
// detailTypeDesc: "口播",
// packageId: 1,
// watermark: 1,
// watermarkDesc: "是",
// language: 1,
// languageDesc: "50+",
// sound: 1,
// soundDesc: "400+",
// videoTime: 60,
// aiCreateTime: 0,
// resolutionRatio: 1,
// resolutionRatioDesc: "720p",
// humanTemplate: 1,
// humanTemplateDesc: "免费",
// createDate: 1686882177000,
// updateDate: 1686882177000,
// isDel: 0,
// },
// ],
// },
// {
// id: 2,
// type: 2,
// typeDesc: "专业版",
// englishName: "Pro",
// dollar: "7.99",
// rmb: "49.99",
// credit: 200,
// validityDuration: 30,
// inviteUserCredit: 10,
// videoPrice: 6,
// photoPrice: 6,
// talkPrice: 16,
// chargeTime: 60,
// createDate: 1686814258000,
// updateDate: 1686814258000,
// isDel: 0,
// color: "#c971ff",
// userPackageDetails: [
// {
// id: 2,
// detailType: 1,
// detailTypeDesc: "照片说话",
// packageId: 2,
// watermark: 0,
// watermarkDesc: "否",
// language: 1,
// languageDesc: "50+",
// sound: 1,
// soundDesc: "400+",
// videoTime: 300,
// aiPortrait: 1,
// aiPortraitDesc: "是",
// photoSing: 1,
// photoSingDesc: "是",
// aiCreateTime: 30,
// resolutionRatio: 2,
// resolutionRatioDesc: "1080p",
// createDate: 1686882177000,
// updateDate: 1686882177000,
// isDel: 0,
// },
// {
// id: 5,
// detailType: 2,
// detailTypeDesc: "口播",
// packageId: 2,
// watermark: 0,
// watermarkDesc: "否",
// language: 1,
// languageDesc: "50+",
// sound: 1,
// soundDesc: "400+",
// videoTime: 300,
// aiCreateTime: 100,
// resolutionRatio: 2,
// resolutionRatioDesc: "1080p",
// humanTemplate: 2,
// humanTemplateDesc: "VIP",
// createDate: 1686882177000,
// updateDate: 1686882177000,
// isDel: 0,
// },
// ],
// },
// {
// id: 3,
// type: 3,
// typeDesc: "加强版",
// englishName: "Advanced",
// dollar: "39.99",
// rmb: "279.99",
// credit: 1200,
// validityDuration: 30,
// inviteUserCredit: 10,
// videoPrice: 5,
// photoPrice: 5,
// talkPrice: 15,
// chargeTime: 60,
// createDate: 1686814258000,
// updateDate: 1686814258000,
// isDel: 0,
// color: "#7b61ff",
// userPackageDetails: [
// {
// id: 3,
// detailType: 1,
// detailTypeDesc: "照片说话",
// packageId: 3,
// watermark: 0,
// watermarkDesc: "否",
// language: 1,
// languageDesc: "50+",
// sound: 1,
// soundDesc: "400+",
// videoTime: 300,
// aiPortrait: 1,
// aiPortraitDesc: "是",
// photoSing: 1,
// photoSingDesc: "是",
// aiCreateTime: 200,
// resolutionRatio: 2,
// resolutionRatioDesc: "1080p",
// createDate: 1686882177000,
// updateDate: 1686882177000,
// isDel: 0,
// },
// {
// id: 6,
// detailType: 2,
// detailTypeDesc: "口播",
// packageId: 3,
// watermark: 0,
// watermarkDesc: "否",
// language: 1,
// languageDesc: "50+",
// sound: 1,
// soundDesc: "400+",
// videoTime: 300,
// aiCreateTime: 200,
// resolutionRatio: 2,
// resolutionRatioDesc: "1080p",
// humanTemplate: 2,
// humanTemplateDesc: "VIP",
// createDate: 1686882177000,
// updateDate: 1686882177000,
// isDel: 0,
// },
// ],
// },
// ]);
const packageList = ref([]);
async function getPackageList() {
const res = await packageInfoApi();
@@ -597,17 +192,6 @@ const orderCodeDialogShow = ref(false);
const orderCodeUrl = ref(null);
//#endregion ------------------------------------

//#region $t在script中的使用
// const {
// appContext: {
// config: { globalProperties },
// },
// } = getCurrentInstance();

// const string = "createVideo.typeScript";
// const t = globalProperties.$t(string);
//#endregion ------------------------------------

//#region 页面滚动
const scrollContainerRef = ref(null);
function handleWheel(event) {
@@ -676,7 +260,7 @@ const iframeDom = ref(null);
async function createPayFunc(orderNumber) {
const data = {
orderNumber,
payVendor: myPayVendor.value,
payVendor: payVendor.value,
};
try {
const res = await createPayApi(data);
@@ -685,11 +269,13 @@ async function createPayFunc(orderNumber) {
if (res.data.body) {
iframeBody.value = res.data.body;
iframeDom.value = document.getElementById("myIframe");
iframeDom.value.srcdoc = iframeBody.value;
// iframeDom.value.srcdoc = iframeBody.value;
}
// 直接获取二维码
if (res.data.codeUrl) {
payCodeUrl.value = res.data.codeUrl;
// showOrderCode(payVendor.value)
orderCodeDialogShow.value = true;
}
await getStatusOfOrderFunc(orderNumber);
} else {
@@ -760,16 +346,46 @@ function RefreshQR() {
//#region

//#endregion ------------------------------------


const payVendor = ref('4')
const orderNumber = ref('')
// 创建订单
function createOrder(item) {
createOrderApi({productId: item.id}).then(res => {
orderNumber.value = res.data
})
}
// 创建支付
function payConfirm() {
createPayFunc(orderNumber.value);
}
// 获取订单详情
function getOrderDetail(item) {
orderDetailApi(item.id).then(res => {
})
}
</script>
//每隔一分钟运行一次保存方法
// const timer = setInterval(()=>{
// findStatus()
// },1000)

function findStatus() {
let data = {
orderNumber: '',
payVendor: ''
}
findStatusApi(data).then(res => {
if (res.data !== 2) { // 如果是2就不停的调,直到返回1、3、4
clearInterval(timer);
}
})
}
</script>
<style>
.el-dialog {
border-radius: 5px !important;
}</style>
<style lang="scss" scoped>

.page {
// min-width: calc(100vw - 210px);
height: calc(100vh - 80px);
@@ -791,14 +407,6 @@ function getOrderDetail(item) {
overflow-x: scroll;
padding: 30px 20px 20px 10px;
max-width: 100%;
// height: 75%;
// overflow: hidden;
// overflow-x: scroll;
// scrollbar-width: none; /* 隐藏滚动条(Chrome、Firefox) */
// -ms-overflow-style: none; /* 隐藏滚动条(IE、Edge) */
// &::-webkit-scrollbar {
// display: none; /* 隐藏滚动条(Safari、Chrome) */
// }

.item {
position: relative;
@@ -968,82 +576,15 @@ function getOrderDetail(item) {
}
}
// 支付弹窗
.payDialog {
display: flex;
position: relative;
min-height: 500px;
.left {
width: 35%;
border-right: 1px solid #7c7c7a;
.title {
color: #242625;
font-weight: 700;
font-size: 30px;
text-align: center;
}
.money {
text-align: center;
span {
font-size: 30px;
font-weight: 700;
color: #242625;
}
}
.authority {
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 {
width: 65%;
position: absolute;
top: 20%;
right: 0%;
padding-left: 20%;
> div {
width: 200px;
height: 40px;
// border: 1px solid #242625;
border-radius: 10px;
text-align: center;
line-height: 40px;
margin: 30px;
color: #fff;
}
.el-radio{
width: 100px;
img {
vertical-align: middle;
margin-right: 5px;
width: 16px;
}
}

// 二维码弹窗
.orderCodeDialog {
width: 100%;


正在加载...
取消
保存