样式修改；新增支付前准备界面
This commit is contained in:
parent
e4e69912a6
commit
dcb4805669
@ -37,6 +37,7 @@ import DictTag from '@/components/DictTag'
|
||||
import VueMeta from 'vue-meta'
|
||||
// 字典数据组件
|
||||
import DictData from '@/components/DictData'
|
||||
import * as ElementUI from "element-ui";
|
||||
|
||||
// 全局方法挂载
|
||||
Vue.prototype.getDicts = getDicts
|
||||
@ -84,3 +85,6 @@ new Vue({
|
||||
store,
|
||||
render: h => h(App)
|
||||
})
|
||||
|
||||
// 全局取消点击dialog以外部分关闭弹窗
|
||||
ElementUI.Dialog.props.closeOnClickModal.default = false
|
||||
|
||||
@ -76,6 +76,11 @@ export const constantRoutes = [
|
||||
component: () => import('@/views/system/userFront/details'),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/cusDetPay/:id',
|
||||
component: () => import('@/views/system/userFront/payBefore'),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
component: Layout,
|
||||
|
||||
@ -88,8 +88,20 @@
|
||||
<!-- </template>-->
|
||||
</el-table-column>
|
||||
<el-table-column label="商品价格" align="center" prop="price" />
|
||||
<el-table-column label="商品简介" align="center" prop="introduction" />
|
||||
<el-table-column label="商品详情" align="center" prop="details" />
|
||||
<el-table-column label="商品简介" align="center" prop="introduction" >
|
||||
<template slot-scope="scope">
|
||||
<div class="introduction" :title="scope.row.introduction">
|
||||
{{ scope.row.introduction }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品详情" align="center" prop="details" >
|
||||
<template slot-scope="scope">
|
||||
<div class="introduction" :title="scope.row.details">
|
||||
{{ scope.row.details }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品资源" align="center" prop="resource" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
@ -373,8 +385,6 @@ export default {
|
||||
/** 查询设计类型列表 */
|
||||
getDesignList() {
|
||||
listDesignType(this.queryParams).then(response => {
|
||||
this.designList = response.rows;
|
||||
|
||||
this.designList = response.rows;
|
||||
this.designTypeMapping = response.rows.reduce((acc, item) => {
|
||||
acc[item.type] = item.name; // 这里假设 type 是唯一的
|
||||
@ -403,3 +413,13 @@ export default {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.introduction {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -14,18 +14,18 @@
|
||||
</el-header>
|
||||
|
||||
<!-- 搜索区域 -->
|
||||
<el-main class="search-section">
|
||||
<h1>毕设网</h1>
|
||||
<p>优质的设计资源共享平台</p>
|
||||
<el-input placeholder="搜索设计"
|
||||
v-model="queryParams.name"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
class="search-box">
|
||||
<el-button slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
|
||||
</el-input>
|
||||
<!-- <el-main class="search-section">-->
|
||||
<!-- <h1>毕设网</h1>-->
|
||||
<!-- <p>优质的设计资源共享平台</p>-->
|
||||
<!-- <el-input placeholder="搜索设计"-->
|
||||
<!-- v-model="queryParams.name"-->
|
||||
<!-- clearable-->
|
||||
<!-- @keyup.enter.native="handleQuery"-->
|
||||
<!-- class="search-box">-->
|
||||
<!-- <el-button slot="append" icon="el-icon-search" @click="handleQuery"></el-button>-->
|
||||
<!-- </el-input>-->
|
||||
|
||||
</el-main>
|
||||
<!-- </el-main>-->
|
||||
|
||||
<!-- 设计详情 -->
|
||||
<el-main>
|
||||
@ -43,8 +43,12 @@
|
||||
<div class="pay-guide">
|
||||
<span style="text-align: center">购买前请点击了解购买须知</span></div>
|
||||
<h3 style="text-align: center;color: rgb(82, 182, 106)">￥{{ goods.price }}</h3>
|
||||
<!-- @click="downloadFile(goods.resource)"-->
|
||||
<div class="pay-but">
|
||||
<el-button class="but-pay" @click="downloadFile(goods.resource)"><i class="el-icon-download"></i> 支付下载</el-button></div>
|
||||
<router-link :to="`/cusDetPay/${goods.id}`">
|
||||
<el-button class="but-pay" ><i class="el-icon-download"></i> 支付下载</el-button>
|
||||
</router-link>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="right-card">
|
||||
<h3>价格: ￥{{ goods.price }}</h3>
|
||||
@ -403,4 +407,10 @@ export default {
|
||||
.pay-but:hover .el-button {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
::v-deep img{
|
||||
|
||||
max-width:100%;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,9 +3,9 @@
|
||||
<!-- 顶部导航栏 -->
|
||||
<el-header class="navbar">
|
||||
<el-menu mode="horizontal" background-color="#333" text-color="#fff" active-text-color="#ffd04b">
|
||||
<el-menu-item index="1">安装教程</el-menu-item>
|
||||
<el-menu-item index="2">开发服务</el-menu-item>
|
||||
<el-menu-item index="3">我的订单</el-menu-item>
|
||||
<!-- <el-menu-item index="1">安装教程</el-menu-item>-->
|
||||
<!-- <el-menu-item index="2">开发服务</el-menu-item>-->
|
||||
<!-- <el-menu-item index="3">我的订单</el-menu-item>-->
|
||||
</el-menu>
|
||||
<div class="user-actions">
|
||||
<el-button type="primary">立即登录</el-button>
|
||||
@ -40,6 +40,7 @@
|
||||
<el-menu mode="horizontal"
|
||||
class="categories"
|
||||
@select="handleQueryByType">
|
||||
<el-menu-item index="" @click="getList()">全部</el-menu-item>
|
||||
<el-menu-item
|
||||
v-for="(item, index) in typeList"
|
||||
:key="item.number"
|
||||
@ -52,28 +53,59 @@
|
||||
|
||||
<!-- 最新设计展示 -->
|
||||
<el-main>
|
||||
<h2 style="display: flex;justify-content: center;align-items: center">最新设计</h2>
|
||||
<h2 style="display: flex;justify-content: center;align-items: center;margin-bottom: 30px;margin-top: 0px">设计展示</h2>
|
||||
<div class="zhong-div">
|
||||
<!-- 标签部分 -->
|
||||
<div class="tags-container">
|
||||
<el-button
|
||||
v-for="(tag, index) in designTypeList"
|
||||
:key="tag.type"
|
||||
:label="tag.name"
|
||||
@click="handleQueryByType(tag.type)"
|
||||
style="margin: 5px;"
|
||||
class="tag">
|
||||
{{ tag.name }}
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="wai">
|
||||
<el-row :gutter="20" class="project-grid">
|
||||
<el-row :gutter="20" >
|
||||
|
||||
<template v-if="goodsList.length > 0">
|
||||
<el-col :span="6" v-for="(item, index) in goodsList" :key="index" style="margin-bottom: 30px">
|
||||
<router-link :to="`/cusDetails/${item.id}`">
|
||||
<el-card :body-style="{ padding: '5px' }">
|
||||
<el-image :src="`http://127.0.0.1:8080${item.cover}`" class="image" style="width:100px;height:160px"/>
|
||||
<el-image :src="`http://127.0.0.1:8080${item.cover}`" class="image" />
|
||||
<div style="padding: 8px;">
|
||||
<span>{{ item.name }}</span>
|
||||
<div class="bottom clearfix">
|
||||
<span class="price" >价格：￥{{ item.price }}</span>
|
||||
<div class="bottom clearfix" style="display: flex;justify-content: center;align-items: center">
|
||||
|
||||
</div>
|
||||
<div style="font-size: 12px">
|
||||
<span style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">
|
||||
{{item.introduction}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tag-div">
|
||||
<div>
|
||||
<span >项目简介：{{item.introduction}}</span>
|
||||
<el-tag type="primary" style="margin-right: 5px;">{{ item.technicalName }}</el-tag>
|
||||
<el-tag type="primary" style="margin-right: 5px;">{{ item.designName }}</el-tag></div>
|
||||
<div>
|
||||
<span class="price" > ￥{{ item.price }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</router-link>
|
||||
</el-col>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="no-data" style="text-align: center; margin-top: 50px;">
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</template>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
@ -82,22 +114,9 @@
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
|
||||
</el-main>
|
||||
|
||||
|
||||
<!-- 标签部分 -->
|
||||
<div class="tags-container">
|
||||
<el-button
|
||||
v-for="(tag, index) in designTypeList"
|
||||
:key="tag.type"
|
||||
:label="tag.name"
|
||||
@click="handleQueryByType(tag.type)"
|
||||
style="margin: 5px;">
|
||||
{{ tag.name }}
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
|
||||
<!--页脚部分-->
|
||||
<footer class="footer">
|
||||
<div class="footer-content">
|
||||
@ -167,6 +186,7 @@ export default {
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
console.log('aaa',this.goodsList)
|
||||
this.getTnList()
|
||||
this.getDnList()
|
||||
},
|
||||
@ -226,8 +246,8 @@ export default {
|
||||
width: 260px; /* 卡片宽度调整 */
|
||||
height: 300px;
|
||||
text-align: center;
|
||||
padding: 10px; /* 给卡片增加一些内边距 */
|
||||
background-color: #f4f4f4; /* 设置背景颜色 */
|
||||
padding: 3px; /* 给卡片增加一些内边距 */
|
||||
background-color:#f4f4f4; /* 设置背景颜色 */
|
||||
border-radius: 8px; /* 圆角样式 */
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
|
||||
}
|
||||
@ -250,7 +270,7 @@ export default {
|
||||
text-align: center;
|
||||
background-color: #333;
|
||||
color: white;
|
||||
padding: 50px 20px;
|
||||
padding: 30px 10px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
@ -262,12 +282,14 @@ export default {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.price {
|
||||
front-size: 16px;
|
||||
color: #ff9900;
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -284,11 +306,30 @@ export default {
|
||||
}
|
||||
|
||||
|
||||
.tags-container {
|
||||
/*.tags-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin: 20px;
|
||||
}*/
|
||||
|
||||
.tags-container {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
margin: 20px;
|
||||
width: 180px;
|
||||
}
|
||||
.tags-container .el-button.tag {
|
||||
front-size: 18px;
|
||||
margin: 10px; /* 每个按钮之间的间距 */
|
||||
padding: 2px 3px 2px 3px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.tags-container span {
|
||||
@ -333,13 +374,37 @@ export default {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 1200px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border-bottom: none; /* 去掉底部的线条 */
|
||||
}
|
||||
.intro-div {
|
||||
height: 40px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.tag-div {
|
||||
margin-bottom: 1px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
.el-card__body {
|
||||
height: 310px;
|
||||
flex: 1; /* 让el-card__body充满剩余空间 */
|
||||
}
|
||||
.zhong-div {
|
||||
min-height: 800px; /* 设置最小高度 */
|
||||
display: flex; /* 设置为 Flex 容器 */
|
||||
flex-direction: row; /* 子元素从左到右排列 */
|
||||
height: 100%; /* 使 el-main 高度占满容器 */
|
||||
padding: 0; /* 可选：移除默认内边距 */
|
||||
}
|
||||
|
||||
|
||||
.no-data {
|
||||
font-size: 30px;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
|
||||
174
ruoyi-ui/src/views/system/userFront/payBefore.vue
Normal file
174
ruoyi-ui/src/views/system/userFront/payBefore.vue
Normal file
@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div class="app">
|
||||
<!-- 顶部导航栏 -->
|
||||
<el-header class="header">
|
||||
<el-menu class="menu" mode="horizontal" background-color="#333" text-color="#fff" active-text-color="#ffd04b">
|
||||
<el-menu-item>安装教程</el-menu-item>
|
||||
<el-menu-item>开题报告</el-menu-item>
|
||||
<el-menu-item>相关疑问</el-menu-item>
|
||||
<el-menu-item>留言评价</el-menu-item>
|
||||
<el-menu-item>我的订单</el-menu-item>
|
||||
</el-menu>
|
||||
</el-header>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<el-main class="content">
|
||||
<div class="product-info">
|
||||
<el-image :src="`http://127.0.0.1:8080${goods.cover}`" class="product-image" />
|
||||
<div class="product-details">
|
||||
<h3>{{ goods.name }}</h3>
|
||||
<p class="price">￥{{ goods.price }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 支付选择 -->
|
||||
<div class="payment">
|
||||
<p>请选择支付方式：</p>
|
||||
<el-button type="success" @click="pay('wechat')">微信支付</el-button>
|
||||
<el-button type="primary" @click="pay('alipay')">支付宝支付</el-button>
|
||||
</div>
|
||||
<div class="payment">
|
||||
<p class="warning">支付完成后会自动获取项目文件下载(最好使用电脑浏览器打开支付，以便于支付成功后项目的下载和安装)</p>
|
||||
</div>
|
||||
</el-main>
|
||||
|
||||
<!-- 备注信息 -->
|
||||
<el-footer class="footer">
|
||||
<p class="warning">注意！如果支付成功后，因分享网链接失效导致无法跳转或下载设计，请联系客服，会为您发送设计。</p>
|
||||
<p class="tip"> (购买无需注册登录)请注意，虚拟内容商品，购买后不支持退货、转让、退换，请斟酌确认。</p>
|
||||
</el-footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getGoods} from "@/api/system/goods";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
// 商品表格数据
|
||||
goods: [],
|
||||
goodsId: null, // 用于存储接收的商品ID
|
||||
|
||||
logoUrl: 'path/to/logo.png', // Logo 图片路径
|
||||
product: {
|
||||
image: 'path/to/product-image.png', // 产品图片路径
|
||||
name: '基于Java(SpringBoot)科研管理系统', // 产品名称
|
||||
price: 199.90 // 产品价格
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.goodsId = this.$route.params.id;
|
||||
this.getGood(this.goodsId);
|
||||
console.log('goodsId',this.goodsId)
|
||||
},
|
||||
methods: {
|
||||
|
||||
/** 查询商品 */
|
||||
getGood(id) {
|
||||
getGoods(id).then(response => {
|
||||
this.goods = response.data;
|
||||
console.log('good',response)
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
pay(method) {
|
||||
if (method === 'wechat') {
|
||||
// 微信支付逻辑
|
||||
alert('跳转到微信支付页面');
|
||||
} else if (method === 'alipay') {
|
||||
// 支付宝支付逻辑
|
||||
alert('跳转到支付宝支付页面');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 页面布局样式 */
|
||||
.container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #333;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.menu {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.content {
|
||||
background-color: #f5f5f5;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.product-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 24px;
|
||||
color: red;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.payment {
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.payment p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 30px;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tip {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user