初始化
This commit is contained in:
67
pages/product/checkout/components/PageBanner.vue
Normal file
67
pages/product/checkout/components/PageBanner.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div class="banner m-auto relative sm:flex">
|
||||
<svg viewBox="0 0 1440 181" fill="none" xmlns="http://www.w3.org/2000/svg"
|
||||
class="pointer-events-none absolute w-full top-[-2px] transition-all text-green-5 flex-shrink-0 opacity-100 duration-[400ms] opacity-80 -z-10">
|
||||
<mask id="path-1-inside-1_414_5526" fill="white">
|
||||
<path d="M0 0H1440V181H0V0Z"></path>
|
||||
</mask>
|
||||
<path d="M0 0H1440V181H0V0Z" fill="url(#paint0_linear_414_5526)" fill-opacity="0.22"></path>
|
||||
<path d="M0 2H1440V-2H0V2Z" fill="url(#paint1_linear_414_5526)" mask="url(#path-1-inside-1_414_5526)"></path>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_414_5526" x1="720" y1="0" x2="720" y2="181" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="currentColor"></stop>
|
||||
<stop offset="1" stop-color="currentColor" stop-opacity="0"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_414_5526" x1="0" y1="90.5" x2="1440" y2="90.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="currentColor" stop-opacity="0"></stop>
|
||||
<stop offset="0.395" stop-color="currentColor"></stop>
|
||||
<stop offset="1" stop-color="currentColor" stop-opacity="0"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<div class="md:w-screen-xl m-auto px-3">
|
||||
<Breadcrumb :data="form" />
|
||||
<div class="md:py-8 sm:py-16 md:px-0 px-4 py-8" _path="/templates" _dir="" _draft="false" _partial="false"
|
||||
_locale=""
|
||||
_id="content:4.templates.yml" _type="yaml" _source="content" _file="4.templates.yml" _stem="4.templates"
|
||||
_extension="yml">
|
||||
<el-steps
|
||||
style="max-width: 600px"
|
||||
:space="200"
|
||||
class="px-3"
|
||||
:active="active"
|
||||
finish-status="success"
|
||||
>
|
||||
<el-step title="选择套餐" />
|
||||
<el-step title="订单确认" />
|
||||
<el-step title="支付订单" />
|
||||
<el-step title="完成订购" />
|
||||
</el-steps>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {openSpmUrl} from "~/utils/common";
|
||||
import Breadcrumb from "~/components/Breadcrumb.vue";
|
||||
import type {Article} from "~/api/cms/article/model";
|
||||
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
title?: string;
|
||||
desc?: string;
|
||||
buyUrl?: string;
|
||||
form?: Article;
|
||||
active?: number;
|
||||
}>(),
|
||||
{
|
||||
title: 'Templates',
|
||||
desc: 'Explore community templates to get up and running in a few seconds.',
|
||||
demoUrl: '/product/website',
|
||||
buyUrl: 'https://github.com/websoft9/ansible-templates',
|
||||
}
|
||||
);
|
||||
|
||||
</script>
|
||||
226
pages/product/checkout/index.vue
Normal file
226
pages/product/checkout/index.vue
Normal file
@@ -0,0 +1,226 @@
|
||||
<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-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.title }}</el-descriptions-item>
|
||||
<el-descriptions-item label="产品类型：">{{ form.type == 1 ? '插件' : '完整应用' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="套餐版本：">标准版</el-descriptions-item>
|
||||
<el-descriptions-item label="购买数量：">1 {{ form.unitName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="购买时长：">1 年</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="UI设计服务：">不包含</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions title="合计：" :column="1" class="mb-4">
|
||||
<el-descriptions-item label="总金额：">￥3000.00</el-descriptions-item>
|
||||
<el-descriptions-item label="优惠价格：">￥1280.00</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</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" @click="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>
|
||||
</div>
|
||||
</el-card>
|
||||
</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>
|
||||
<div class="flex justify-center">
|
||||
<el-radio-group v-model="form.code">
|
||||
<el-radio-button value="1" border>微信支付</el-radio-button>
|
||||
<el-radio-button value="12" border>支付宝</el-radio-button>
|
||||
<el-radio-button value="24" border>余额支付</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="flex justify-center py-4">
|
||||
<el-avatar :size="250" src="https://oss.wsdns.cn/20240409/247a492abda94b08ace33fa5405628ca.jpeg"
|
||||
shape="square" />
|
||||
</div>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="danger" :disabled="!isAgree" class="w-full" size="large" @click="onSubmit">去支付</el-button>
|
||||
</el-form-item>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
{{ form }}
|
||||
<!-- <div class="login-layout mt-[100px] m-auto sm:w-screen-xl w-full">-->
|
||||
<!-- <div class="mt-[100px] m-auto flex sm:flex-row flex-col sm:p-0 p-3">-->
|
||||
<!-- <div class="flash bg-white rounded-lg px-7 py-4 w-full">-->
|
||||
<!-- <el-tabs class="flash bg-white ml-0">-->
|
||||
<!-- <el-tab-pane label="个人开发者">-->
|
||||
<!-- <el-form :model="form" label-width="auto" size="large" label-position="top" class="sm:w-screen-md w-full sm:py-2">-->
|
||||
<!-- <el-form-item label="商品类型">-->
|
||||
<!-- <el-input v-model="form.title" placeholder="请输入真实姓名" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="资源包类型">-->
|
||||
<!-- <el-input v-model="form.productId" placeholder="请输入证件号码" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="身份证(正面)">-->
|
||||
<!-- <Upload />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="身份证(反面)">-->
|
||||
<!-- <Upload />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item>-->
|
||||
<!-- <el-button type="primary" size="large" @click="onSubmit">提交</el-button>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
<!-- </el-tab-pane>-->
|
||||
<!-- </el-tabs>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {useConfigInfo, useToken, useWebsite} from "~/composables/configState";
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import type {User} from '@/api/system/user/model';
|
||||
import {ref} from 'vue'
|
||||
import {useServerRequest} from "~/composables/useServerRequest";
|
||||
import type {ApiResult} from "~/api";
|
||||
import type {Product} from "~/api/oa/product/model";
|
||||
import PageBanner from "./components/PageBanner.vue";
|
||||
|
||||
// 配置信息
|
||||
const runtimeConfig = useRuntimeConfig();
|
||||
const route = useRoute();
|
||||
const activeIndex = ref('');
|
||||
const website = useWebsite()
|
||||
const isAgree = ref<boolean>(false);
|
||||
const active = ref<number>(2);
|
||||
const config = useConfigInfo();
|
||||
const token = useToken();
|
||||
const userInfo = ref<User>();
|
||||
|
||||
// 配置信息
|
||||
const {form, assignFields} = useFormData<Product>({
|
||||
// 自增ID
|
||||
productId: undefined,
|
||||
// 类型 0软件产品 1实物商品 2虚拟商品
|
||||
type: undefined,
|
||||
// 产品编码
|
||||
code: undefined,
|
||||
// 产品标题
|
||||
title: undefined,
|
||||
// 封面图
|
||||
image: undefined,
|
||||
// 产品详情
|
||||
content: undefined,
|
||||
// 父级分类ID
|
||||
parentId: undefined,
|
||||
// 产品分类ID
|
||||
categoryId: undefined,
|
||||
// 产品规格 0单规格 1多规格
|
||||
specs: undefined,
|
||||
// 货架
|
||||
position: undefined,
|
||||
// 单位名称 (个)
|
||||
unitName: undefined,
|
||||
// 进货价格
|
||||
price: undefined,
|
||||
// 销售价格
|
||||
salePrice: undefined,
|
||||
// 库存计算方式(10下单减库存 20付款减库存)
|
||||
deductStockType: undefined,
|
||||
// 轮播图
|
||||
files: undefined,
|
||||
// 销量
|
||||
sales: undefined,
|
||||
// 库存
|
||||
stock: undefined,
|
||||
// 消费赚取积分
|
||||
gainIntegral: undefined,
|
||||
// 推荐
|
||||
recommend: undefined,
|
||||
// 商户ID
|
||||
merchantId: undefined,
|
||||
// 状态（0：未上架，1：上架）
|
||||
isShow: undefined,
|
||||
// 状态, 0上架 1待上架 2待审核 3审核不通过
|
||||
status: undefined,
|
||||
// 备注
|
||||
comments: undefined,
|
||||
// 排序号
|
||||
sortNumber: undefined,
|
||||
// 用户ID
|
||||
userId: undefined,
|
||||
// 是否删除, 0否, 1是
|
||||
deleted: undefined,
|
||||
// 租户id
|
||||
tenantId: undefined,
|
||||
// 创建时间
|
||||
createTime: undefined,
|
||||
// 修改时间
|
||||
updateTime: undefined,
|
||||
});
|
||||
|
||||
const changeIsAgree = (index: number) => {
|
||||
if(index){
|
||||
active.value = 3;
|
||||
}
|
||||
}
|
||||
|
||||
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 () => {
|
||||
const {data: response} = await useServerRequest<ApiResult<Product>>(`/cms/cms-product/${getIdBySpm(5)}`, {baseURL: runtimeConfig.public.apiServer})
|
||||
if (response.value?.data) {
|
||||
assignFields(response.value?.data);
|
||||
form.categoryName = '订单确认'
|
||||
useHead({
|
||||
title: `${form.title}`,
|
||||
meta: [{name: website.value.keywords, content: website.value.comments}]
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
(path) => {
|
||||
activeIndex.value = path;
|
||||
console.log(path, '=>Path')
|
||||
reload();
|
||||
},
|
||||
{immediate: true}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.text-a123 {
|
||||
color: #f0f2f5;
|
||||
}
|
||||
</style>
|
||||
81
pages/product/components/CardList.vue
Normal file
81
pages/product/components/CardList.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div class="xl:w-screen-xl sm:flex xl:p-0 p-4 m-auto relative">
|
||||
<el-row :gutter="24" class="flex">
|
||||
<template v-for="(item,index) in data?.list" :key="index">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb-5 min-w-xs">
|
||||
<el-card shadow="hover" :body-style="{ padding: '0px' }" class="hover:bg-gray-50 cursor-pointer"
|
||||
@click="openSpmUrl(`/item`, item,item.companyId,true)">
|
||||
<el-image
|
||||
:src="item.image"
|
||||
:fit="fit" :lazy="true" class="w-full md:h-[150px] h-[199px] cursor-pointer bg-gray-50"/>
|
||||
<div class="flex-1 px-4 py-5 sm:p-6 !p-4">
|
||||
<div class="text-gray-700 dark:text-white text-base font-semibold flex flex-col gap-1.5">
|
||||
<div class="flex-1 text-xl cursor-pointer flex items-center">
|
||||
{{ item.shortName }}
|
||||
<el-tag v-if="item.chargingMethod === 0" size="small" type="success" class="text-white ml-2"
|
||||
effect="dark">免费
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 py-2 text-gray-500 justify-between">
|
||||
<div class="text-gray-500 line-clamp-2">{{ item.comments }}</div>
|
||||
</div>
|
||||
<div class="button-group flex justify-between items-center mt-3">
|
||||
<el-space class="flex items-end">
|
||||
<el-avatar size="small" :src="item.companyLogo"/>
|
||||
<span class="text-gray-400 line-clamp-1 pr-2">{{ item.companyName }}</span>
|
||||
</el-space>
|
||||
<template v-if="item.isBuy">
|
||||
<el-button v-if="item.installed" type="primary" @click.stop="loginDeveloperCenterByToken(item)">控制台</el-button>
|
||||
<el-button v-else type="primary" @click.stop="loginDeveloperCenterByToken(item)">控制台</el-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-button v-if="item.chargingMethod == 0" type="primary" @click.stop="loginDeveloperCenterByToken(item)">控制台</el-button>
|
||||
<el-button v-else type="warning" @click.stop="openSpmUrl(`/product/create`,item,item.companyId,true)">立即开通
|
||||
</el-button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="flex justify-center py-3">
|
||||
<el-pagination background layout="prev, pager, next" :total="data?.count" @change="onPage"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {loginAdminByToken, loginByToken, openSpmUrl} from "~/utils/common";
|
||||
import type {Company} from "~/api/system/company/model";
|
||||
import type {PageResult} from "~/api";
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
data?: PageResult<Company>;
|
||||
disabled?: boolean;
|
||||
fit?: any;
|
||||
}>(),
|
||||
{
|
||||
fit: 'cover'
|
||||
}
|
||||
);
|
||||
|
||||
const tid = ref<number>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done', index: number): void;
|
||||
}>();
|
||||
|
||||
// const load = () => {
|
||||
// if(!props.disabled){
|
||||
// emit('done')
|
||||
// }
|
||||
// }
|
||||
|
||||
const onPage = (index: number) => {
|
||||
emit('done', index)
|
||||
}
|
||||
tid.value = localStorage.getItem('TenantId');
|
||||
</script>
|
||||
67
pages/product/create/components/PageBanner.vue
Normal file
67
pages/product/create/components/PageBanner.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div class="banner m-auto relative sm:flex">
|
||||
<svg viewBox="0 0 1440 181" fill="none" xmlns="http://www.w3.org/2000/svg"
|
||||
class="pointer-events-none absolute w-full top-[-2px] transition-all text-green-5 flex-shrink-0 opacity-100 duration-[400ms] opacity-80 -z-10">
|
||||
<mask id="path-1-inside-1_414_5526" fill="white">
|
||||
<path d="M0 0H1440V181H0V0Z"></path>
|
||||
</mask>
|
||||
<path d="M0 0H1440V181H0V0Z" fill="url(#paint0_linear_414_5526)" fill-opacity="0.22"></path>
|
||||
<path d="M0 2H1440V-2H0V2Z" fill="url(#paint1_linear_414_5526)" mask="url(#path-1-inside-1_414_5526)"></path>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_414_5526" x1="720" y1="0" x2="720" y2="181" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="currentColor"></stop>
|
||||
<stop offset="1" stop-color="currentColor" stop-opacity="0"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_414_5526" x1="0" y1="90.5" x2="1440" y2="90.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="currentColor" stop-opacity="0"></stop>
|
||||
<stop offset="0.395" stop-color="currentColor"></stop>
|
||||
<stop offset="1" stop-color="currentColor" stop-opacity="0"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<div class="md:w-screen-xl m-auto px-3">
|
||||
<Breadcrumb :data="form" />
|
||||
<div class="md:py-8 sm:py-16 md:px-0 px-4 py-8" _path="/templates" _dir="" _draft="false" _partial="false"
|
||||
_locale=""
|
||||
_id="content:4.templates.yml" _type="yaml" _source="content" _file="4.templates.yml" _stem="4.templates"
|
||||
_extension="yml">
|
||||
<el-steps
|
||||
style="max-width: 600px"
|
||||
:space="200"
|
||||
class="px-3"
|
||||
:active="active"
|
||||
finish-status="success"
|
||||
>
|
||||
<el-step title="选择套餐" />
|
||||
<el-step title="订单确认" />
|
||||
<el-step title="支付订单" />
|
||||
<el-step title="完成订购" />
|
||||
</el-steps>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {openSpmUrl} from "~/utils/common";
|
||||
import Breadcrumb from "~/components/Breadcrumb.vue";
|
||||
import type {Article} from "~/api/cms/article/model";
|
||||
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
title?: string;
|
||||
desc?: string;
|
||||
buyUrl?: string;
|
||||
form?: Article;
|
||||
active?: number;
|
||||
}>(),
|
||||
{
|
||||
title: 'Templates',
|
||||
desc: 'Explore community templates to get up and running in a few seconds.',
|
||||
demoUrl: '/product/website',
|
||||
buyUrl: 'https://github.com/websoft9/ansible-templates'
|
||||
}
|
||||
);
|
||||
|
||||
</script>
|
||||
439
pages/product/create/index.vue
Normal file
439
pages/product/create/index.vue
Normal file
@@ -0,0 +1,439 @@
|
||||
<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-radio-group v-model="form.image">
|
||||
<el-radio-button value="1" border>基础版</el-radio-button>
|
||||
<el-radio-button value="2" border disabled>专业版</el-radio-button>
|
||||
<el-radio-button value="3" border disabled>定制版</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="项目名称">
|
||||
<el-input v-model="cart.appName" style="width: 360px" placeholder="网宿软件"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="二级域名">
|
||||
<el-input
|
||||
v-model="cart.domain"
|
||||
style="width: 360px"
|
||||
placeholder="websoft"
|
||||
>
|
||||
<template #prepend>Https://</template>
|
||||
<template #append>.wsdns.cn</template>
|
||||
</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="购买时长" 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) {
|
||||
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;
|
||||
cart.value.adminUrl = response.value?.data.domain;
|
||||
cart.value.menuId = response.value?.data.menuId;
|
||||
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(() => {
|
||||
openSpmUrl(`https://console.websoft.top/cost-center/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>
|
||||
389
pages/product/create/product.vue
Normal file
389
pages/product/create/product.vue
Normal file
@@ -0,0 +1,389 @@
|
||||
<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.title }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex flex-col">
|
||||
<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="套餐版本">
|
||||
<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.deliveryMethod">-->
|
||||
<!-- <el-tag v-if="form.deliveryMethod == 1">SaaS交付</el-tag>-->
|
||||
<!-- <el-tag v-if="form.deliveryMethod == 2">源码交付</el-tag>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="购买时长" v-if="form.chargingMethod && form.chargingMethod > 1">
|
||||
<el-radio-group v-model="form.chargingMethod" @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>
|
||||
<!-- <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.title }}</el-descriptions-item>
|
||||
<el-descriptions-item label="产品类型：">{{ form.type == 1 ? '插件' : '完整应用' }}</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-2xl text-red-600">{{ cart.totalPrice }}</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="400"
|
||||
: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">
|
||||
<el-avatar :size="250" src="https://oss.wsdns.cn/20240409/247a492abda94b08ace33fa5405628ca.jpeg"
|
||||
shape="square"/>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer text-center pb-3">
|
||||
<el-button type="success" @click="onDone">
|
||||
已完成支付
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {useConfigInfo, useToken, useWebsite} from "~/composables/configState";
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import type {User} from '@/api/system/user/model';
|
||||
import {ref} from 'vue'
|
||||
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";
|
||||
import type {CmsProduct} from "~/api/cms/cmsProduct/model";
|
||||
import type {CmsProductParameter} from "~/api/cms/cmsProductParameter/model";
|
||||
import type {CmsProductUrl} from "~/api/cms/cmsProductUrl/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 formRef = ref<FormInstance>()
|
||||
const config = useConfigInfo();
|
||||
const token = useToken();
|
||||
const userInfo = ref<User>();
|
||||
const cart = useCart();
|
||||
|
||||
// 配置信息
|
||||
const {form, assignFields} = useFormData<CmsProduct>({
|
||||
// 自增ID
|
||||
productId: undefined,
|
||||
// 类型 0软件产品 1实物商品 2虚拟商品
|
||||
type: undefined,
|
||||
// 产品编码
|
||||
code: undefined,
|
||||
// 产品标题
|
||||
title: undefined,
|
||||
// 封面图
|
||||
image: undefined,
|
||||
// 产品详情
|
||||
content: undefined,
|
||||
// 父级分类ID
|
||||
parentId: undefined,
|
||||
// 产品分类ID
|
||||
categoryId: undefined,
|
||||
// 产品规格 0单规格 1多规格
|
||||
specs: undefined,
|
||||
// 货架
|
||||
position: undefined,
|
||||
// 单位名称 (个)
|
||||
unitName: undefined,
|
||||
// 进货价格
|
||||
price: undefined,
|
||||
// 销售价格
|
||||
salePrice: undefined,
|
||||
// 库存计算方式(10下单减库存 20付款减库存)
|
||||
deductStockType: undefined,
|
||||
// 轮播图
|
||||
files: undefined,
|
||||
// 销量
|
||||
sales: undefined,
|
||||
// 库存
|
||||
stock: undefined,
|
||||
// 安装次数
|
||||
install: undefined,
|
||||
// 消费赚取积分
|
||||
gainIntegral: undefined,
|
||||
// 计费方式
|
||||
durationMethod: undefined,
|
||||
// 推荐
|
||||
recommend: undefined,
|
||||
// 商户ID
|
||||
merchantId: undefined,
|
||||
merchantName: undefined,
|
||||
merchantAvatar: undefined,
|
||||
merchantComments: undefined,
|
||||
// 状态（0：未上架，1：上架）
|
||||
isShow: undefined,
|
||||
// 状态, 0上架 1待上架 2待审核 3审核不通过
|
||||
status: undefined,
|
||||
// 备注
|
||||
comments: undefined,
|
||||
// 排序号
|
||||
sortNumber: undefined,
|
||||
// 用户ID
|
||||
userId: undefined,
|
||||
// 是否删除, 0否, 1是
|
||||
deleted: undefined,
|
||||
// 租户id
|
||||
tenantId: undefined,
|
||||
// 创建时间
|
||||
createTime: undefined,
|
||||
// 修改时间
|
||||
updateTime: undefined,
|
||||
// 父级分类名称
|
||||
parentName: undefined,
|
||||
// 父级分类路径
|
||||
parentPath: undefined,
|
||||
// 分类名称
|
||||
categoryName: undefined,
|
||||
// 评分
|
||||
rate: undefined,
|
||||
// 是否已购买
|
||||
isBuy: undefined,
|
||||
// 是否已安装插件
|
||||
installed: undefined,
|
||||
// 产品参数
|
||||
parameters: undefined,
|
||||
// 产品链接
|
||||
links: undefined,
|
||||
// 插件入口
|
||||
path: undefined,
|
||||
// 标签
|
||||
tag: undefined,
|
||||
// 菜单ID
|
||||
menuId: 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 = cart.value.num * cart.value.payPrice * cart.value.month;
|
||||
// cart.value.totalPrice = Math.round(cart.value.totalPrice * 100) / 100;
|
||||
}
|
||||
|
||||
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;
|
||||
useClientRequest<ApiResult<any>>(`/shop/shop-order/createOrder`, {
|
||||
method: 'POST',
|
||||
body: cart.value
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
ElMessage.success(res.message)
|
||||
} else {
|
||||
return ElMessage.error(res.message)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
const {data: response} = await useServerRequest<ApiResult<CmsProduct>>(`/cms/cms-product/${getIdBySpm(5)}`)
|
||||
console.log(response.value?.data,'response')
|
||||
if (response.value?.data) {
|
||||
assignFields(response.value?.data);
|
||||
form.categoryName = '选择套餐';
|
||||
if(response.value?.data.price){
|
||||
cart.value.payPrice = response.value?.data.price;
|
||||
cart.value.comments = `${response.value?.data.title}`;
|
||||
if(cart.value.num){
|
||||
cart.value.totalPrice = response.value?.data.price * cart.value.num
|
||||
}
|
||||
let goodsName = '';
|
||||
// if(form.type == 0){
|
||||
// goodsName = `【软件】${form.title}`
|
||||
// }
|
||||
// if(form.type == 1){
|
||||
// goodsName = `【插件】${form.title}`
|
||||
// }
|
||||
// cart.value.orderProduct?.push({
|
||||
// goodsId: form.productId,
|
||||
// goodsName: goodsName,
|
||||
// image: form.image,
|
||||
// price: response.value?.data.price,
|
||||
// totalPrice: cart.value.totalPrice,
|
||||
// num: cart.value.num,
|
||||
// month: cart.value?.month,
|
||||
// payType: cart.value.payType
|
||||
// });
|
||||
}
|
||||
useHead({
|
||||
title: `${form.title}`,
|
||||
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 = () => {
|
||||
useClientRequest<ApiResult<any>>(`/system/menu/install`, {
|
||||
method: 'POST',
|
||||
body: {
|
||||
productId: 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>
|
||||
25
pages/product/createWebsite/index.vue
Normal file
25
pages/product/createWebsite/index.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
// 创建站点
|
||||
import {useServerRequest} from "~/composables/useServerRequest";
|
||||
import type {ApiResult} from "~/api";
|
||||
import type {Company} from "~/api/system/company/model";
|
||||
|
||||
const {data: website} = await useServerRequest<ApiResult<Company>>('/cms/website/createWebsite', {
|
||||
baseURL: 'http://127.0.0.1:9002/api',
|
||||
method: 'post',
|
||||
body: company.value?.data
|
||||
})
|
||||
if (website.value?.code == 401) {
|
||||
console.log('网站不存在', website.value)
|
||||
}
|
||||
if (website.value?.code == 0) {
|
||||
console.log('网站存在', website.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
25
pages/product/createWebsite/index2.vue
Normal file
25
pages/product/createWebsite/index2.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
// 创建站点
|
||||
import {useServerRequest} from "~/composables/useServerRequest";
|
||||
import type {ApiResult} from "~/api";
|
||||
import type {Company} from "~/api/system/company/model";
|
||||
|
||||
const {data: website} = await useServerRequest<ApiResult<Company>>('/cms/website/createWebsite', {
|
||||
baseURL: 'http://127.0.0.1:9002/api',
|
||||
method: 'post',
|
||||
body: company.value?.data
|
||||
})
|
||||
if (website.value?.code == 401) {
|
||||
console.log('网站不存在', website.value)
|
||||
}
|
||||
if (website.value?.code == 0) {
|
||||
console.log('网站存在', website.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
168
pages/product/detail/[id].vue
Normal file
168
pages/product/detail/[id].vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<el-affix :offset="0" @change="onAffix">
|
||||
<div class="affix justify-between p-2 opacity-90 border-b-solid border-gray-200 border-b-1" :class="affix ? 'bg-white w-full' : 'hidden'">
|
||||
<div class="w-3/4 m-auto flex justify-between">
|
||||
<a class="goods-name text-xl font-bold cursor-pointer hover:text-gray-900">{{ goods?.goodsName }}</a>
|
||||
<div class="affix-bar">
|
||||
<el-anchor :offset="100" direction="horizontal" :marker="false">
|
||||
<el-anchor-link :href="`#basic`">
|
||||
参数信息
|
||||
</el-anchor-link>
|
||||
<el-anchor-link :href="`#photo`">
|
||||
图文详情
|
||||
</el-anchor-link>
|
||||
<el-anchor-link :href="`#comment`">
|
||||
用户评价
|
||||
</el-anchor-link>
|
||||
<el-anchor-link :href="`#buynow`">
|
||||
<el-button type="danger" size="small">立即购买</el-button>
|
||||
</el-anchor-link>
|
||||
</el-anchor>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-affix>
|
||||
|
||||
<div id="buynow" class="flex flex-col w-full md:w-screen-xl m-auto md:pt-[60px]" v-if="goods">
|
||||
|
||||
<Breadcrumb :data="goods" />
|
||||
|
||||
<div class="content bg-white rounded-xl">
|
||||
|
||||
<!-- <ProductShopInfo :data="goods?.merchant" />-->
|
||||
|
||||
<div id="buynow" class="bg-white p-4 mt-4 flex gap-xl rounded-xl">
|
||||
<div class="goods-image flex gap-xl">
|
||||
<div class="gap-xs flex flex-col" v-if="goods?.files">
|
||||
<el-avatar v-for="item in JSON.parse(goods.files)" :src="item.url" size="large" shape="square" />
|
||||
</div>
|
||||
<el-image :src="goods?.image" fit="contain" class="w-2xl h-2xl bg-gray-100 border-radius:30px"></el-image>
|
||||
</div>
|
||||
<div class="goods-info flex flex-col gap-xs">
|
||||
<div class="goods-name text-2xl">{{ goods.goodsName }}</div>
|
||||
<div class="goods-price text-2xl red">￥{{ Number(goods?.salePrice) * Number(goods?.num) }}</div>
|
||||
<div class="text-green-7">购买得积分</div>
|
||||
<div class="text-gray-4">配送：无需配送</div>
|
||||
<div class="text-gray-4">保障：假一赔四 退货包运费 极速退款</div>
|
||||
<div class="text-gray-4">销量： {{ goods.sales }}</div>
|
||||
<!-- <template v-for="spec in goods?.goodsSpecValue">-->
|
||||
<!-- <div class="flex items-center">-->
|
||||
<!-- <div class="text-gray-4">{{ spec.value }}：</div>-->
|
||||
<!-- <el-radio-group v-model="goods.radio">-->
|
||||
<!-- <el-radio v-for="(specValue,specIndex) in spec.detail" :label="specIndex" border>{{ specValue }}</el-radio>-->
|
||||
<!-- </el-radio-group>-->
|
||||
<!-- </div>-->
|
||||
<!-- </template>-->
|
||||
<div class="text-gray-4">
|
||||
已选中：{{ goods.radio }}
|
||||
</div>
|
||||
<div class="text-gray-4">
|
||||
数量：
|
||||
<el-input-number v-model="goods.num" :min="1" :max="10" label="描述文字"></el-input-number>
|
||||
</div>
|
||||
<div class="py-5">
|
||||
<el-button-group size="large">
|
||||
<el-button type="danger">立即购买</el-button>
|
||||
<el-button type="warning">加入购物车</el-button>
|
||||
</el-button-group>
|
||||
<el-button size="large" class="ml-3">收藏</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="basic" class="bg-white p-4 mt-4 flex gap-xl rounded-xl">
|
||||
<el-descriptions class="margin-top" title="参数信息" :column="1" border>
|
||||
<el-descriptions-item label="品牌">websoft</el-descriptions-item>
|
||||
<el-descriptions-item label="版本">2.0</el-descriptions-item>
|
||||
<el-descriptions-item label="开发语言">Java、Vue3、Nuxt</el-descriptions-item>
|
||||
<el-descriptions-item label="版本">
|
||||
<el-tag size="small">授权版</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="备注">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
|
||||
<div id="photo" class="bg-white p-4 mt-4 flex gap-xl rounded-xl flex-col">
|
||||
<div class="font-bold">图文详情</div>
|
||||
<div class="files flex flex-col w-3/4" v-if="goods?.files">
|
||||
<el-image v-for="item in JSON.parse(goods.files)" :src="item.url" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="comment" class="bg-white p-4 mt-4 flex gap-xl rounded-xl">
|
||||
<div class="font-bold">用户评价</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!goods">
|
||||
<el-empty description="404 该商品找不到了222"></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import type {ApiResult} from "~/api";
|
||||
import {useServerRequest} from "~/composables/useServerRequest";
|
||||
import type {Goods} from "~/api/shop/goods/model";
|
||||
import Breadcrumb from "~/components/Breadcrumb.vue";
|
||||
import type {Navigation} from "~/api/cms/navigation/model";
|
||||
import {useProductAffix} from "~/composables/configState";
|
||||
import {getIdBySpm} from "~/utils/common";
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const affix = useProductAffix();
|
||||
|
||||
// 商品ID
|
||||
const goodsId = ref();
|
||||
// 页面信息
|
||||
const form = ref<Navigation>();
|
||||
// 商品信息
|
||||
const goods = ref<Goods>();
|
||||
|
||||
const onAffix = (index: boolean) => {
|
||||
affix.value = index;
|
||||
}
|
||||
|
||||
// 加载数据
|
||||
const reload = async () => {
|
||||
// TODO 请求导航页面数据
|
||||
// const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/navigation/getNavigationByPath',{
|
||||
// query: {
|
||||
// path: goodsId.value
|
||||
// }
|
||||
// })
|
||||
// if(nav.value?.data){
|
||||
// form.value = nav.value.data;
|
||||
// }
|
||||
|
||||
// TODO 获取商品详情
|
||||
console.log(goodsId.value,'sss')
|
||||
const { data: info } = await useServerRequest<ApiResult<Goods>>('/shop/goods/' + getIdBySpm(5))
|
||||
|
||||
goods.value = info.value?.data;
|
||||
console.log(goods.value)
|
||||
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route.query.spm,
|
||||
(spm) => {
|
||||
console.log(spm)
|
||||
// TODO 方案一：从spm参数提取商品ID
|
||||
const spmValue = String(spm).split('.')
|
||||
if(spmValue[5]){
|
||||
goodsId.value = spmValue[5];
|
||||
}
|
||||
console.log(goodsId.value)
|
||||
// TODO 方案二(优先级更高)：从params获取商品ID
|
||||
const { detail } = route.params
|
||||
const split = String(detail).split('.');
|
||||
if(Number(split[0]) > 0){
|
||||
goodsId.value = split[0];
|
||||
}
|
||||
|
||||
reload();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
75
pages/product/index.vue
Normal file
75
pages/product/index.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<PageBanner :layout="layout" :title="`${form?.categoryName}`" :desc="`${form?.comments}`" />
|
||||
<CardList :param="{type: 0}" :data="data" :disabled="disabled" @done="onSearch" />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import type {ApiResult, PageResult} from "~/api";
|
||||
import {useServerRequest} from "~/composables/useServerRequest";
|
||||
import {useWebsite} from "~/composables/configState";
|
||||
import type {Navigation} from "~/api/cms/navigation/model";
|
||||
import type {Company, CompanyParam} from "~/api/system/company/model";
|
||||
import CardList from './components/CardList.vue';
|
||||
import {getIdBySpm} from "~/utils/common";
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
// 页面信息
|
||||
const runtimeConfig = useRuntimeConfig();
|
||||
const data = ref<PageResult<Company>>();
|
||||
const page = ref<number>(0);
|
||||
const resultText = ref('');
|
||||
const layout = ref<any>();
|
||||
const disabled = ref<boolean>(false);
|
||||
|
||||
// 获取状态
|
||||
const form = ref<Navigation>();
|
||||
|
||||
// 搜索表单
|
||||
const where = reactive<CompanyParam>({
|
||||
keywords: ''
|
||||
});
|
||||
|
||||
const onSearch = (index: number) => {
|
||||
page.value = index;
|
||||
reload();
|
||||
}
|
||||
|
||||
// 请求数据
|
||||
const reload = async () => {
|
||||
const {data: response} = await useServerRequest<ApiResult<PageResult<Company>>>('/system/company/page',{baseURL: runtimeConfig.public.apiServer, params: {
|
||||
page: page.value,
|
||||
limit: 12,
|
||||
categoryId: getIdBySpm(5),
|
||||
keywords: where.keywords
|
||||
}})
|
||||
if(response.value?.data){
|
||||
data.value = response.value?.data;
|
||||
}
|
||||
}
|
||||
|
||||
const { data: nav } = await useServerRequest<ApiResult<Navigation>>(`/cms/cms-navigation/${getIdBySpm(5)}`)
|
||||
if(nav.value?.data){
|
||||
form.value = nav.value?.data;
|
||||
useHead({
|
||||
title: `${form.value.title} - WEBSOFT`,
|
||||
bodyAttrs: {
|
||||
class: "page-container",
|
||||
}
|
||||
});
|
||||
}
|
||||
// 页面布局
|
||||
if(form.value?.layout){
|
||||
layout.value = JSON.parse(form.value?.layout)
|
||||
}
|
||||
|
||||
|
||||
|
||||
watch(
|
||||
() => getIdBySpm(5),
|
||||
(id) => {
|
||||
console.log(id,'id = .>>>>')
|
||||
reload();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
Reference in New Issue
Block a user