parent
515a5a6680
commit
529086f842
@ -0,0 +1,59 @@
|
||||
import { reactive } from "vue";
|
||||
import { aiMusic } from "@/apis/api";
|
||||
export default function () {
|
||||
const token = uni.getStorageSync("token");
|
||||
const { safeAreaInsets } = uni.getSystemInfoSync();
|
||||
|
||||
const data: any = reactive({
|
||||
token: token,
|
||||
safeBottom: safeAreaInsets?.bottom,
|
||||
btnLoading: false,
|
||||
describe: "", //描述
|
||||
inputValueLength: 0, //内容长度
|
||||
});
|
||||
|
||||
//输入内容改变
|
||||
function inputChange(e: any) {
|
||||
data.inputValueLength = parseInt(e.length);
|
||||
}
|
||||
|
||||
//立即生成
|
||||
function toMake() {
|
||||
if (data.describe == "") {
|
||||
uni.showToast({
|
||||
title: "请输入音乐内容描述",
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
const param = {
|
||||
token: data.token,
|
||||
prompt: data.describe,
|
||||
};
|
||||
data.btnLoading = true;
|
||||
uni.showLoading({
|
||||
title: "生成中...",
|
||||
mask: true,
|
||||
});
|
||||
aiMusic(param).then((res: any) => {
|
||||
uni.hideLoading();
|
||||
data.btnLoading = false;
|
||||
if (res.success) {
|
||||
data.aiResult = res.message;
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.message,
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
data,
|
||||
toMake,
|
||||
inputChange,
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,59 @@
|
||||
import { reactive } from "vue";
|
||||
import { aiVideo } from "@/apis/api";
|
||||
export default function () {
|
||||
const token = uni.getStorageSync("token");
|
||||
const { safeAreaInsets } = uni.getSystemInfoSync();
|
||||
|
||||
const data: any = reactive({
|
||||
token: token,
|
||||
safeBottom: safeAreaInsets?.bottom,
|
||||
btnLoading: false,
|
||||
describe: "", //描述
|
||||
inputValueLength: 0, //内容长度
|
||||
});
|
||||
|
||||
//输入内容改变
|
||||
function inputChange(e: any) {
|
||||
data.inputValueLength = parseInt(e.length);
|
||||
}
|
||||
|
||||
//立即生成
|
||||
function toMake() {
|
||||
if (data.describe == "") {
|
||||
uni.showToast({
|
||||
title: "请输入视频内容描述",
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
const param = {
|
||||
token: data.token,
|
||||
prompt: data.describe,
|
||||
};
|
||||
data.btnLoading = true;
|
||||
uni.showLoading({
|
||||
title: "生成中...",
|
||||
mask: true,
|
||||
});
|
||||
aiVideo(param).then((res: any) => {
|
||||
uni.hideLoading();
|
||||
data.btnLoading = false;
|
||||
if (res.success) {
|
||||
data.aiResult = res.message;
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.message,
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
data,
|
||||
toMake,
|
||||
inputChange,
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,133 @@
|
||||
import { reactive } from "vue";
|
||||
import { createOrder } from "@/apis/api";
|
||||
|
||||
export default function () {
|
||||
const token = uni.getStorageSync("token");
|
||||
const { safeAreaInsets } = uni.getSystemInfoSync();
|
||||
const { screenWidth } = uni.getWindowInfo();
|
||||
const payList = [
|
||||
{ id: 1, rmb: 1, jinDou: 10 },
|
||||
{ id: 2, rmb: 5, jinDou: 50 },
|
||||
{ id: 3, rmb: 10, jinDou: 100 },
|
||||
{ id: 4, rmb: 20, jinDou: 200 },
|
||||
{ id: 5, rmb: 50, jinDou: 500 },
|
||||
];
|
||||
|
||||
const data = reactive({
|
||||
safeBottom: safeAreaInsets?.bottom,
|
||||
btnLoading: false,
|
||||
itemWidth: Math.floor((screenWidth - 40) / 3), //支付按钮适配宽度
|
||||
paySelect: 1, //默认1元 索引
|
||||
payRmb: 1, //默认1元
|
||||
token: token,
|
||||
});
|
||||
|
||||
//支付协议
|
||||
function toPayAgree() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/my/agreement/payAgree",
|
||||
});
|
||||
}
|
||||
|
||||
//更改支付金额
|
||||
function changePaytemp(info: any) {
|
||||
data.paySelect = info.id;
|
||||
data.payRmb = info.rmb;
|
||||
}
|
||||
|
||||
//确认支付
|
||||
const toPay = async () => {
|
||||
data.btnLoading = true;
|
||||
uni.showLoading({
|
||||
title: "请稍等...",
|
||||
});
|
||||
const order: any = await createOrderFn();
|
||||
if (order === "支付失败") {
|
||||
data.btnLoading = false;
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "支付失败！",
|
||||
});
|
||||
} else {
|
||||
const provider: any = await getProviderFn();
|
||||
if (provider === "服务商获取失败") {
|
||||
data.btnLoading = false;
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "服务商获取失败！",
|
||||
});
|
||||
} else {
|
||||
const orderInfo = {
|
||||
rmb: data.payRmb,
|
||||
};
|
||||
uni.requestPayment({
|
||||
provider: provider[0],
|
||||
orderInfo: orderInfo, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
|
||||
timeStamp: order.timeStamp,
|
||||
nonceStr: order.nonceStr,
|
||||
package: order.packageValue,
|
||||
signType: order.signType,
|
||||
paySign: order.paySign,
|
||||
success: (res: any) => {
|
||||
data.btnLoading = false;
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "支付成功！",
|
||||
});
|
||||
},
|
||||
fail: (res: any) => {
|
||||
data.btnLoading = false;
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "支付失败！",
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//服务提供商
|
||||
function getProviderFn() {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.getProvider({
|
||||
service: "payment",
|
||||
success: (res: any) => {
|
||||
resolve(res.provider);
|
||||
},
|
||||
fail: (res: any) => {
|
||||
reject("服务商获取失败");
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
//创建订单
|
||||
function createOrderFn() {
|
||||
const param = {
|
||||
token: data.token,
|
||||
total: data.payRmb,
|
||||
};
|
||||
return new Promise((resolve, reject) => {
|
||||
createOrder(param).then((res: any) => {
|
||||
if (res.success) {
|
||||
resolve(res.result);
|
||||
} else {
|
||||
reject("支付失败");
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
data,
|
||||
toPayAgree,
|
||||
toPay,
|
||||
payList,
|
||||
changePaytemp,
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<view
|
||||
class="recharge-container"
|
||||
:style="'padding-bottom:' + data.safeBottom + 'px'"
|
||||
>
|
||||
<view class="content">
|
||||
<view class="title">
|
||||
<view class="flag"></view>
|
||||
充值套餐
|
||||
</view>
|
||||
<view class="pay-list">
|
||||
<view
|
||||
:style="
|
||||
'width:' + data.itemWidth + 'px; height:' + data.itemWidth + 'px'
|
||||
"
|
||||
v-for="(item, index) in payList"
|
||||
:class="
|
||||
'pay-item border-radius ' +
|
||||
(item.id === data.paySelect ? ' active' : '') +
|
||||
((index + 1) % 3 === 0 ? ' margin-right-none' : '')
|
||||
"
|
||||
@click="changePaytemp(item)"
|
||||
:key="item.id"
|
||||
>
|
||||
<view class="item-row">
|
||||
<text>¥ </text>
|
||||
<text class="font-weight">{{ item.rmb }}</text>
|
||||
<text class="font-small"> 元</text>
|
||||
</view>
|
||||
<view class="item-row">
|
||||
<image
|
||||
style="width: 32rpx; height: 32rpx"
|
||||
src="../../static/jd.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<text class="font-weight">{{ item.jinDou }}</text>
|
||||
<text class="font-small"> 金豆</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<button
|
||||
:disabled="data.btnLoading"
|
||||
:loading="data.btnLoading"
|
||||
class="make-btn-style"
|
||||
@click="toPay"
|
||||
>
|
||||
确认协议并支付 <text>{{ data.payRmb + " 元" }}</text>
|
||||
</button>
|
||||
<view class="pay-document"
|
||||
>支付前请阅读<text class="to-document" @click="toPayAgree"
|
||||
>《支付协议》</text
|
||||
></view
|
||||
>
|
||||
</view>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import getData from "./recharge";
|
||||
const { data, toPay, toPayAgree, payList, changePaytemp } = getData();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.recharge-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: $uni-spacing-col-base;
|
||||
box-sizing: border-box;
|
||||
.content {
|
||||
width: 100%;
|
||||
height: calc(100% - 132rpx);
|
||||
padding-bottom: $uni-spacing-col-base;
|
||||
overflow-y: scroll;
|
||||
box-sizing: border-box;
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: $uni-font-size-lg;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
.flag {
|
||||
width: 10rpx;
|
||||
height: 35rpx;
|
||||
border-radius: 10rpx;
|
||||
background-color: $uni-color-primary;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
.pay-list {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: $uni-spacing-col-base 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.pay-item {
|
||||
padding: $uni-spacing-col-base;
|
||||
box-sizing: border-box;
|
||||
margin-right: $uni-spacing-col-base;
|
||||
border: 1px solid $uni-border-color;
|
||||
margin-bottom: $uni-spacing-col-base;
|
||||
font-size: $uni-font-size-lg;
|
||||
.item-row {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
border-bottom: 1px dashed $uni-border-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.font-small {
|
||||
font-size: $uni-font-size-sm;
|
||||
margin-left: 5rpx;
|
||||
}
|
||||
.font-weight {
|
||||
font-weight: bold;
|
||||
margin-left: 5rpx;
|
||||
}
|
||||
}
|
||||
:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
.margin-right-none {
|
||||
margin-right: 0;
|
||||
}
|
||||
.active {
|
||||
background-color: #f8f3ff;
|
||||
border-color: #b8acda;
|
||||
}
|
||||
}
|
||||
}
|
||||
.make-btn-style {
|
||||
width: 100%;
|
||||
height: 92rpx;
|
||||
line-height: 92rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.pay-document {
|
||||
width: 100%;
|
||||
height: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: $uni-font-size-sm;
|
||||
.to-document {
|
||||
color: $uni-color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue