From dcb4805669e0d4a06aee5e30b231085262956430 Mon Sep 17 00:00:00 2001
From: lixiang <935448346@qq.com>
Date: Thu, 24 Oct 2024 18:11:57 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9=EF=BC=9B?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=94=AF=E4=BB=98=E5=89=8D=E5=87=86=E5=A4=87?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/main.js                          |   4 +
 ruoyi-ui/src/router/index.js                  |   5 +
 ruoyi-ui/src/views/system/goods/index.vue     |  28 ++-
 .../src/views/system/userFront/details.vue    |  34 ++--
 ruoyi-ui/src/views/system/userFront/index.vue | 123 ++++++++++---
 .../src/views/system/userFront/payBefore.vue  | 174 ++++++++++++++++++
 6 files changed, 323 insertions(+), 45 deletions(-)
 create mode 100644 ruoyi-ui/src/views/system/userFront/payBefore.vue

diff --git a/ruoyi-ui/src/main.js b/ruoyi-ui/src/main.js
index ebd94b9d..ae033d19 100644
--- a/ruoyi-ui/src/main.js
+++ b/ruoyi-ui/src/main.js
@@ -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
diff --git a/ruoyi-ui/src/router/index.js b/ruoyi-ui/src/router/index.js
index 36c79424..5233eca9 100644
--- a/ruoyi-ui/src/router/index.js
+++ b/ruoyi-ui/src/router/index.js
@@ -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,
diff --git a/ruoyi-ui/src/views/system/goods/index.vue b/ruoyi-ui/src/views/system/goods/index.vue
index d47057a6..2f728918 100644
--- a/ruoyi-ui/src/views/system/goods/index.vue
+++ b/ruoyi-ui/src/views/system/goods/index.vue
@@ -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>
diff --git a/ruoyi-ui/src/views/system/userFront/details.vue b/ruoyi-ui/src/views/system/userFront/details.vue
index 60244e44..c8a81906 100644
--- a/ruoyi-ui/src/views/system/userFront/details.vue
+++ b/ruoyi-ui/src/views/system/userFront/details.vue
@@ -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>
diff --git a/ruoyi-ui/src/views/system/userFront/index.vue b/ruoyi-ui/src/views/system/userFront/index.vue
index 10ebb11d..b879ddfb 100644
--- a/ruoyi-ui/src/views/system/userFront/index.vue
+++ b/ruoyi-ui/src/views/system/userFront/index.vue
@@ -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>
diff --git a/ruoyi-ui/src/views/system/userFront/payBefore.vue b/ruoyi-ui/src/views/system/userFront/payBefore.vue
new file mode 100644
index 00000000..0e9c0d67
--- /dev/null
+++ b/ruoyi-ui/src/views/system/userFront/payBefore.vue
@@ -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>