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.
245 lines
8.9 KiB
245 lines
8.9 KiB
<template>
|
|
<PageBanner :form="form" title="订单确认"/>
|
|
<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>云·企业官网（SaaS交付）</span>
|
|
</div>
|
|
</template>
|
|
<div class="flex flex-col">
|
|
<el-form-item label="购买个数">
|
|
<el-input-number v-model="form.specs" :min="1" :max="10" @change="handleChange" />
|
|
</el-form-item>
|
|
<el-form-item label="购买时长">
|
|
<el-radio-group v-model="form.code">
|
|
<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-button value="120" border>10年</el-radio-button>
|
|
</el-radio-group>
|
|
</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-group>
|
|
</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 flex-col">
|
|
<el-form-item label="是否需要设计服务">
|
|
<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-group>
|
|
</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-group>
|
|
</el-form-item>
|
|
</div>
|
|
</el-card>
|
|
<!-- <el-form-item label="证件号码">-->
|
|
<!-- <el-input v-model="form.idCard" placeholder="请输入证件号码" />-->
|
|
<!-- </el-form-item>-->
|
|
<!-- <el-form-item label="身份证(正面)">-->
|
|
<!-- <Upload />-->
|
|
<!-- </el-form-item>-->
|
|
<!-- <el-form-item label="身份证(反面)">-->
|
|
<!-- <Upload />-->
|
|
<!-- </el-form-item>-->
|
|
</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="云·企业官网（SaaS交付）" :column="1" class="mb-4">
|
|
<el-descriptions-item label="套餐版本：">标准版【需备案】</el-descriptions-item>
|
|
<el-descriptions-item label="购买时长：">1年</el-descriptions-item>
|
|
</el-descriptions>
|
|
<el-descriptions title="设计服务" :column="1" class="mb-4">
|
|
<el-descriptions-item label="是否需要设计：">需要</el-descriptions-item>
|
|
<el-descriptions-item label="套餐版本：">标准版</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-form-item>
|
|
<el-button type="danger" class="w-full" size="large" @click="openSpmUrl(`/product/checkout`)">确认订单</el-button>
|
|
</el-form-item>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<!-- <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 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 handleChange = (e) => {
|
|
console.log(e)
|
|
}
|
|
|
|
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>
|