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.
428 lines
14 KiB
428 lines
14 KiB
<template>
|
|
<PageBanner :form="form" :active="active"/>
|
|
<div class="page-main md:w-screen-xl m-auto p-3">
|
|
<el-row :gutter="24">
|
|
<el-col :span="16" :xs="24">
|
|
<el-form :model="form" label-width="auto" label-position="left" class="w-full">
|
|
<el-card shadow="hover" class="mb-4">
|
|
<template #header>
|
|
<div class="card-header font-bold">
|
|
<span v-if="form.type === 0">【产品】</span>
|
|
<span v-if="form.type === 1">【插件】</span>
|
|
<span>{{ form.shortName }}</span>
|
|
</div>
|
|
</template>
|
|
<div class="flex flex-col">
|
|
<el-form-item label="应用名称">
|
|
<el-input v-model="cart.appName" style="width: 360px" placeholder="XXX公司官网"></el-input>
|
|
</el-form-item>
|
|
<!-- <el-form-item label="类型">-->
|
|
<!-- <el-radio-button v-if="form.type == 0" border>完整应用</el-radio-button>-->
|
|
<!-- <el-radio-button v-if="form.type == 1" border>插件</el-radio-button>-->
|
|
<!-- </el-form-item>-->
|
|
<!-- <el-form-item label="交付方式" v-if="form.deliveryMethod">-->
|
|
<!-- <el-radio-button v-if="form.deliveryMethod == 1" border>SaaS交付</el-radio-button>-->
|
|
<!-- <el-radio-button v-if="form.deliveryMethod == 2" border>源码交付</el-radio-button>-->
|
|
<!-- </el-form-item>-->
|
|
<!-- <el-form-item label="套餐版本">-->
|
|
<!-- <el-radio-group v-model="form.image">-->
|
|
<!-- <el-radio-button value="1" border>基础版</el-radio-button>-->
|
|
<!-- <el-radio-button value="2" border>标准版</el-radio-button>-->
|
|
<!-- <el-radio-button value="3" border>专业版</el-radio-button>-->
|
|
<!-- </el-radio-group>-->
|
|
<!-- </el-form-item>-->
|
|
<el-form-item label="购买时长" v-if="form.chargingMethod && form.chargingMethod > 1">
|
|
<el-radio-group v-model="cart.month" @change="handleChargingMethod">
|
|
<el-radio-button :value="1" border>1个月</el-radio-button>
|
|
<el-radio-button :value="12" border>1年</el-radio-button>
|
|
<el-radio-button :value="24" border>2年</el-radio-button>
|
|
<el-radio-button :value="36" border>3年</el-radio-button>
|
|
<el-radio-button :value="60" border>5年</el-radio-button>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
|
|
<!-- 单价 {{ form.price }} x 购买时长 {{ cart.month }} x 数量 {{ cart.num }} x 折扣 0.1= {{ cart.totalPrice }}-->
|
|
<!-- <el-form-item label="购买数量">-->
|
|
<!-- <el-input-number v-model="cart.num" :min="1" :max="form.canBuyNumber" @change="handleChange"/>-->
|
|
<!-- </el-form-item>-->
|
|
</div>
|
|
</el-card>
|
|
<el-card shadow="hover" class="mb-4">
|
|
<template #header>
|
|
<div class="card-header font-bold">
|
|
<span>服务协议</span>
|
|
</div>
|
|
</template>
|
|
<div class="flex items-center">
|
|
<el-checkbox v-model="isAgree" @change="changeIsAgree"></el-checkbox>
|
|
<span class="ml-1">我已阅读并同意</span>
|
|
<span class="text-blue-400 hover:text-blue-500 cursor-pointer"
|
|
@click="openSpmUrl(`/detail`, {}, 357, true)">《用户协议》</span>
|
|
<span class="text-blue-400 hover:text-blue-500 cursor-pointer"
|
|
@click="openSpmUrl(`/detail`, {}, 69, true)">《隐私协议》</span>
|
|
<span class="text-blue-400 hover:text-blue-500 cursor-pointer"
|
|
@click="openSpmUrl(`/detail`, {}, 69, true)">《产品购买协议》</span>
|
|
</div>
|
|
</el-card>
|
|
</el-form>
|
|
</el-col>
|
|
<el-col :span="8" :xs="24">
|
|
<el-card shadow="hover" class="mb-4">
|
|
<template #header>
|
|
<div class="card-header font-bold">
|
|
<span>订单详情</span>
|
|
</div>
|
|
</template>
|
|
<el-descriptions :title="`订购产品`" :column="1" class="mb-4">
|
|
<el-descriptions-item label="产品名称：">{{ form.shortName }}</el-descriptions-item>
|
|
<el-descriptions-item label="产品类型：">{{ form.type == 1 ? '插件' : '完整应用' }}</el-descriptions-item>
|
|
<el-descriptions-item label="交付方式：">{{ form.deliveryMethod == 1 ? 'SaaS交付' : '源码交付' }}</el-descriptions-item>
|
|
<el-descriptions-item label="应用名称：">{{ cart.appName }}</el-descriptions-item>
|
|
<!-- <el-descriptions-item label="套餐版本：">标准版</el-descriptions-item>-->
|
|
<el-descriptions-item label="购买数量：">{{ cart.num }} 套</el-descriptions-item>
|
|
<el-descriptions-item label="购买时长：">{{ cart.month }} 个月</el-descriptions-item>
|
|
<!-- <el-descriptions-item label="到期时间：">2025-10-06</el-descriptions-item>-->
|
|
</el-descriptions>
|
|
<el-descriptions title="合计：" :column="1" class="mb-4">
|
|
<el-descriptions-item label="订单金额："><span class="line-through">￥</span><span
|
|
class="text-xl line-through">{{ cart.totalPrice }}</span></el-descriptions-item>
|
|
<el-descriptions-item label="实付金额："><span class="text-red-600">￥</span><span
|
|
class="font-bold text-xl text-red-600">{{ cart.payPrice }}</span></el-descriptions-item>
|
|
</el-descriptions>
|
|
<el-form-item>
|
|
<el-button type="danger" class="w-full" :disabled="!isAgree" size="large" @click="onPay">去支付</el-button>
|
|
</el-form-item>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<el-dialog
|
|
v-model="visible"
|
|
title="订单确认"
|
|
align-center
|
|
width="450"
|
|
:before-close="() => visible = false"
|
|
>
|
|
<div class="flex justify-center pt-3">
|
|
<el-radio-group v-model="cart.payType" @change="handlePayType">
|
|
<el-radio-button :value="102" border>微信支付</el-radio-button>
|
|
<!-- <el-radio-button :value="3" border>支付宝</el-radio-button>-->
|
|
<el-radio-button :value="0" border>余额支付</el-radio-button>
|
|
</el-radio-group>
|
|
</div>
|
|
<div class="flex justify-center py-4" v-if="cart.payType == 102">
|
|
<el-avatar :size="250" :src="wxPayQrCode"
|
|
shape="square"/>
|
|
</div>
|
|
<template #footer>
|
|
<div class="dialog-footer text-center pb-3" v-if="cart.payType != 0">
|
|
<el-tag type="success" size="large">
|
|
使用微信扫码完成支付
|
|
</el-tag>
|
|
</div>
|
|
<div class="flex flex-col justify-center w-1/2 m-auto pb-12" v-if="cart.payType === 0">
|
|
<span class="py-2 text-center">可用余额：￥{{ userInfo?.balance || 0.00 }}</span>
|
|
<div class="flex flex-col">
|
|
<el-input type="password" class="py-2" size="large" v-model="payPassword" maxlength="6" show-password placeholder="请输入支付密码" />
|
|
<el-button type="danger" class="py-2 my-3" size="large" @click="onDone">
|
|
确定支付
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {useConfigInfo, useToken, useUser, useWebsite} from "~/composables/configState";
|
|
import useFormData from '@/utils/use-form-data';
|
|
import type {User} from '@/api/system/user/model';
|
|
import {ref} from 'vue'
|
|
import QRCode from 'qrcode';
|
|
import {useServerRequest} from "~/composables/useServerRequest";
|
|
import type {ApiResult} from "~/api";
|
|
import PageBanner from './components/PageBanner.vue';
|
|
import type {FormInstance} from "element-plus";
|
|
import {useClientRequest} from "~/composables/useClientRequest";
|
|
import type {Company} from "~/api/system/company/model";
|
|
|
|
// 配置信息
|
|
const runtimeConfig = useRuntimeConfig();
|
|
const route = useRoute();
|
|
const activeIndex = ref('');
|
|
const website = useWebsite()
|
|
const isAgree = ref<boolean>(true);
|
|
const active = ref<number>(1);
|
|
const visible = ref<boolean>(false);
|
|
const wxPayQrCode = ref<string>()
|
|
const payPassword = ref<string>()
|
|
const formRef = ref<FormInstance>()
|
|
const config = useConfigInfo();
|
|
const token = useToken();
|
|
const userInfo = useUser();
|
|
const cart = useCart();
|
|
const qrOptions = ref({
|
|
width: 200, // 二维码宽度
|
|
margin: 10, // 二维码边距
|
|
color: { dark: '#000', light: '#fff' }, // 二维码颜色
|
|
});
|
|
|
|
// 配置信息
|
|
const {form, assignFields} = useFormData<Company>({
|
|
companyId: undefined,
|
|
menuId: undefined,
|
|
type: undefined,
|
|
appName: undefined,
|
|
shortName: undefined,
|
|
companyName: undefined,
|
|
companyType: undefined,
|
|
companyTypeMultiple: undefined,
|
|
appType: undefined,
|
|
companyLogo: undefined,
|
|
image: undefined,
|
|
companyCode: undefined,
|
|
domain: undefined,
|
|
phone: undefined,
|
|
tel: undefined,
|
|
email: undefined,
|
|
InvoiceHeader: undefined,
|
|
startTime: undefined,
|
|
expirationTime: undefined,
|
|
version: undefined,
|
|
versionName: undefined,
|
|
versionCode: undefined,
|
|
members: undefined,
|
|
storage: undefined,
|
|
storageMax: undefined,
|
|
buys: undefined,
|
|
clicks: undefined,
|
|
users: undefined,
|
|
departments: undefined,
|
|
industryParent: undefined,
|
|
industryChild: undefined,
|
|
country: undefined,
|
|
province: undefined,
|
|
city: undefined,
|
|
region: undefined,
|
|
address: undefined,
|
|
latitude: undefined,
|
|
longitude: undefined,
|
|
businessEntity: undefined,
|
|
comments: undefined,
|
|
authentication: undefined,
|
|
industryId: undefined,
|
|
industryName: undefined,
|
|
status: undefined,
|
|
userId: undefined,
|
|
official: undefined,
|
|
deliveryMethod: undefined,
|
|
chargingMethod: undefined,
|
|
price: undefined,
|
|
planId: undefined,
|
|
sortNumber: undefined,
|
|
authoritative: undefined,
|
|
merchantId: undefined,
|
|
tenantId: undefined,
|
|
tenantName: undefined,
|
|
tenantCode: undefined,
|
|
modules: undefined,
|
|
requestUrl: undefined,
|
|
socketUrl: undefined,
|
|
serverUrl: undefined,
|
|
modulesUrl: undefined,
|
|
merchantUrl: undefined,
|
|
websiteUrl: undefined,
|
|
mpWeixinCode: undefined,
|
|
mpAlipayCode: undefined,
|
|
h5Code: undefined,
|
|
androidUrl: undefined,
|
|
iosUrl: undefined,
|
|
avatar: undefined,
|
|
nickname: undefined,
|
|
code: undefined,
|
|
createTime: undefined,
|
|
updateTime: undefined,
|
|
password: undefined,
|
|
password2: undefined,
|
|
collection: undefined,
|
|
recommend: undefined,
|
|
title: undefined,
|
|
parentName: undefined,
|
|
categoryName: undefined,
|
|
});
|
|
|
|
const handleChange = (index:any): void => {
|
|
cart.value.num = index;
|
|
computeTotalPrice();
|
|
}
|
|
|
|
const handleChargingMethod = (index: any): void => {
|
|
cart.value.month = index;
|
|
computeTotalPrice();
|
|
}
|
|
|
|
const computeTotalPrice = () => {
|
|
// 计算公式 = (商品价格 * 数量 * 月份) / 折扣率
|
|
cart.value.totalPrice = Math.round(Number(form.price)*Number(cart.value.num)*Number(cart.value.month));
|
|
cart.value.payPrice = Math.round(Number(cart.value.totalPrice) * Number(0.1));
|
|
}
|
|
|
|
const changeIsAgree = (index: any) => {
|
|
if (index) {
|
|
active.value = 2;
|
|
}
|
|
}
|
|
|
|
const handlePayType = (index: any) => {
|
|
cart.value.payType = index;
|
|
onPay();
|
|
}
|
|
|
|
// 统一下单
|
|
const onPay = () => {
|
|
visible.value = true;
|
|
active.value = 3;
|
|
// 余额支付
|
|
if(cart.value.payType == 0){
|
|
return;
|
|
}
|
|
// 微信支付
|
|
if(cart.value.payType == 102){
|
|
useClientRequest<ApiResult<any>>(`/system/wx-native-pay/codeUrl`, {
|
|
method: 'POST',
|
|
body: cart.value
|
|
}).then(async res => {
|
|
if (res.code == 0) {
|
|
console.log(res.data)
|
|
try {
|
|
// 生成二维码图像数据URL
|
|
wxPayQrCode.value = await QRCode.toDataURL(res.data);
|
|
} catch (error) {
|
|
console.error('Error generating QR code:', error);
|
|
}
|
|
} else {
|
|
return ElMessage.error(res.message)
|
|
}
|
|
})
|
|
}
|
|
// 支付宝支付
|
|
if(cart.value.payType == 3){
|
|
return;
|
|
}
|
|
}
|
|
|
|
const onSubmit = async () => {
|
|
const {data: modify} = await useServerRequest<ApiResult<User>>('/auth/user', {
|
|
baseURL: runtimeConfig.public.apiServer,
|
|
method: 'put',
|
|
body: form
|
|
})
|
|
if (modify.value?.code == 0) {
|
|
ElMessage.success('修改成功')
|
|
}
|
|
}
|
|
|
|
const reload = async () => {
|
|
// 要求登录
|
|
if (!token.value || token.value == '') {
|
|
navigateTo(`/passport/login`)
|
|
return false;
|
|
}
|
|
// useClientRequest(`/auth/user`, {}).then(res => {
|
|
// if(res?.data?.balance){
|
|
// cart.value.balance = res?.data?.balance;
|
|
// }
|
|
// })
|
|
const {data: response} = await useServerRequest<ApiResult<Company>>(`/system/company/${getIdBySpm(5)}`, {baseURL: runtimeConfig.public.apiServer})
|
|
if (response.value?.data) {
|
|
assignFields(response.value?.data);
|
|
form.categoryName = '选择套餐';
|
|
cart.value.comments = `购买${response.value?.data.shortName}`;
|
|
if(response.value?.data.price){
|
|
cart.value.payPrice = response.value?.data.price;
|
|
computeTotalPrice();
|
|
}
|
|
useHead({
|
|
title: `${form.shortName}`,
|
|
meta: [{name: website.value.keywords, content: website.value.comments}]
|
|
});
|
|
}
|
|
}
|
|
|
|
// 扫码支付
|
|
const submitForm = async (formEl: FormInstance | undefined) => {
|
|
if (!formEl) return
|
|
ElMessage.error('还没有评分哦!')
|
|
// if (form.rate === 0) {
|
|
// ElMessage.error('还没有评分哦!')
|
|
// return false;
|
|
// }
|
|
// form.productId = props.productId;
|
|
// useClientRequest<ApiResult<any>>(`/cms/cms-product-comment/`, {
|
|
// method: 'POST',
|
|
// body: form
|
|
// }).then(res => {
|
|
// if (res.code == 0) {
|
|
// ElMessage.success(res.message)
|
|
// visible.value = false
|
|
// resetFields();
|
|
// emit('done',1)
|
|
// } else {
|
|
// return ElMessage.error(res.message)
|
|
// }
|
|
// })
|
|
}
|
|
|
|
// 余额支付
|
|
const onDone = () => {
|
|
cart.value.type = 1;
|
|
cart.value.list = [];
|
|
cart.value.list?.push(form);
|
|
useClientRequest<ApiResult<any>>(`/system/order/createOrder`, {
|
|
method: 'POST',
|
|
body: cart.value
|
|
}).then(res => {
|
|
if(res.code == 0){
|
|
ElMessage.success('购买成功');
|
|
visible.value = !visible.value;
|
|
setTimeout(() => {
|
|
navigateTo(`/user/order`)
|
|
},500)
|
|
}
|
|
if(res.code == 1){
|
|
ElMessage.error(res.message);
|
|
}
|
|
|
|
}).catch(res => {
|
|
|
|
})
|
|
|
|
// useClientRequest<ApiResult<any>>(`/system/menu/install`, {
|
|
// method: 'POST',
|
|
// body: {
|
|
// companyId: getIdBySpm(5)
|
|
// }
|
|
// }).then(res => {
|
|
// if (res.code == 0) {
|
|
// ElMessage.success(res.message)
|
|
// } else {
|
|
// return ElMessage.error(res.message)
|
|
// }
|
|
// })
|
|
}
|
|
|
|
watch(
|
|
() => route.path,
|
|
(path) => {
|
|
activeIndex.value = path;
|
|
console.log(path, '=>Path')
|
|
reload();
|
|
},
|
|
{immediate: true}
|
|
);
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.text-a123 {
|
|
color: #f0f2f5;
|
|
}
|
|
</style>
|