gxwebsoft/template-10490
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化

Browse Source
This commit is contained in:
赵忠林
2025-01-27 23:24:42 +08:00
parent c8a96306c4
commit 6ae8339299
421 changed files with 35687 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
pages/product/checkout/components/PageBanner.vue Normal file
View 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
View 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>