整合订单流程接口完成

.env.development

 # 页面标题
-VITE_APP_TITLE = 若依管理系统
+VITE_APP_TITLE = 先进公共服务平台
 
 # 开发环境配置
 VITE_APP_ENV = 'development'

.env.production

 # 页面标题
-VITE_APP_TITLE = 若依管理系统
+VITE_APP_TITLE = 先进公共服务平台
 
 # 生产环境配置
 VITE_APP_ENV = 'production'

.env.staging

 # 页面标题
-VITE_APP_TITLE = 若依管理系统
+VITE_APP_TITLE = 先进公共服务平台
 
 # 生产环境配置
 VITE_APP_ENV = 'staging'

index.html

@@ -7,7 +7,7 @@
   <meta name="renderer" content="webkit">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <link rel="icon" href="/favicon.ico">
-  <title>若依管理系统</title>
+  <title>先进公共服务平台</title>
   <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
   <style>
     html,

src/api/computingResource.js

 import request from '@/utils/request'
 
 // 获取计算资源菜单
-export function computilityMenu(query) {
+export function computilityMenu (query) {
   return request({
     url: '/api/v1/computilityMenu',
     method: 'get',
     params: query
   })
 }
+
+
+// 根据应用类别返回对应计算机资源列表
+export function getRListByCategory (query) {
+  return request({
+    url: '/api/v1/getRListByCategory',
+    method: 'get',
+    params: query
+  })
+}
+
+
+// 计算资源详情
+export function getRDetail (query) {
+  return request({
+    url: '/api/v1/getRDetail',
+    method: 'get',
+    params: query
+  })
+}
+
+// 计算资源计算价格
+export function orderComputer (query) {
+  return request({
+    url: '/api/v1/orderComputer',
+    method: 'post',
+    data: query
+  })
+}
+
+// 计算资源确认订单
+export function orderBuy (query) {
+  return request({
+    url: '/api/v1/orderBuy',
+    method: 'post',
+    data: query
+  })
+}
+
+// 确认订单回显数据
+export function confirmOrderInfo (query) {
+  return request({
+    url: '/api/v1/' + query.id,
+    method: 'get'
+  })
+}
+
+
+// 计算资源提交订单
+export function orderSubmit (query) {
+  return request({
+    url: '/api/v1/orderSubmit',
+    method: 'post',
+    data: query
+  })
+}
+
+
+// 计算资源加购物车
+export function shoppingAdd (query) {
+  return request({
+    url: '/api/v1/shoppingAdd',
+    method: 'post',
+    data: query
+  })
+}
+
+// 计算资源购物车列表
+export function shoppingList (query) {
+  return request({
+    url: '/api/v1/list',
+    method: 'get'
+  })
+}
+
+// 计算资源购物车修改数量
+export function shoppingEdit (query) {
+  return request({
+    url: '/api/v1/shoppingEdit',
+    method: 'put',
+    data: query
+  })
+}
+
+// 计算资源购物车删除接口
+export function shoppingDelete (ids) {
+  return request({
+    url: `/api/v1/${ids}`,
+    method: 'delete'
+  })
+}
+
+// 计算资源购物车提交接口
+export function shoppingSubmit (ids) {
+  return request({
+    url: `/api/v1/shoppingComputer/${ids}`,
+    method: 'get'
+  })
+}
+

src/layout/user-layout.vue

@@ -18,7 +18,7 @@
               <template #title>计算资源</template>
               <el-menu-item
                   v-for="item in computilityMenuData"
-                  :index="'/computingResource/resourceList/'+item.value">
+                  :index="'/computingResource/resourceList?type='+item.value">
                 {{ item.name }}
               </el-menu-item>
             </el-sub-menu>
@@ -29,7 +29,7 @@
         </div>
 
         <div class="right-menu">
-          <el-button type="primary">登录/注册</el-button>
+          <el-button type="primary" @click="$router.push('/login')">登录/注册</el-button>
         </div>
       </div>
     </div>
@@ -47,25 +47,22 @@ const route = useRoute()
 const router = useRouter()
 
 const activeMenu = computed(() => {
-  const {meta, path} = route
-  console.log(route)
-  // if set path, the sidebar will highlight the path you set
+  const {meta, path, fullPath} = route
   if (meta.activeMenu) {
     return meta.activeMenu
   }
-  return path
+  const titleList = ['计算资源']
+  return titleList.includes(meta.title) ? fullPath : path
 })
 
 function menuSelect (val) {
   router.push(val)
-  // console.log(val)
 }
 
 const computilityMenuData = ref([])
 
 function getComputilityMenu () {
   computilityMenu().then(res => {
-    console.log(res)
     computilityMenuData.value = res.data
   })
 }

src/router/index.js

@@ -78,7 +78,7 @@ export const constantRoutes = [
     meta: {title: '计算资源'},
     children: [
       {
-        path: 'resourceList/:type(\\d+)',
+        path: 'resourceList',
         component: () => import('@/views/computingResource/resourceList.vue'),
         name: 'ResourceList',
         meta: {title: '计算资源'}

src/views/computingResource/confirmOrder.vue

@@ -69,26 +69,20 @@
         <!--          </tbody>-->
         <!--        </table>-->
         <el-table :data="tableData">
-          <el-table-column label="资源类别/型号">
-            <template #default="{row}">
-              <p>{{ row.typeName }}</p>
-              <p>{{ row.model }}</p>
-            </template>
-          </el-table-column>
+          <el-table-column label="资源型号" prop="model"/>
           <el-table-column label="配置详情" width="200px">
             <template #default="{row}">
-              <p>CPU：I7-13900</p>
-              <p>GPU：4070TI</p>
-              <p>内存：DDR5 16GB</p>
-              <p>存储：6*4T,2*0.48T SSD</p>
+              <p>CPU：{{ row.cpu }}</p>
+              <p>GPU：{{ row.gpu }}</p>
+              <p>内存：{{ row.memory }}</p>
+              <p>存储：{{ row.storage }}</p>
             </template>
           </el-table-column>
-          <el-table-column label="虚拟器存储" prop="virtualStorage"/>
-          <el-table-column label="网络带宽" prop="bandwidth"/>
-          <el-table-column label="公网IP" prop="ip"/>
-          <el-table-column label="申请时长" prop="duration"/>
-          <el-table-column label="申请数量" prop="number"/>
-          <el-table-column label="配置费用" prop=""/>
+          <el-table-column v-for="param in params" :key="param.id" :label="param.name">
+            {{ param.valueName }}
+          </el-table-column>
+          <el-table-column label="使用数量" prop="useNum"/>
+          <!--<el-table-column label="配置费用" prop="publicTotalPrice"/>-->
         </el-table>
       </div>
     </div>
@@ -100,9 +94,9 @@
         <div class="flex-align-center">
           <div class="mr20">
             <div class="price">￥1546.00</div>
-<!--            <div>约￥15/月</div>-->
+            <!--<div>约￥15/月</div>-->
           </div>
-          <el-button type="primary" @click="$router.push('/computingResource/orderResult')">提交</el-button>
+          <el-button type="primary" @click="submit">提交</el-button>
         </div>
       </div>
     </div>
@@ -110,34 +104,28 @@
 </template>
 
 <script name="ConfirmOrder" setup>
-const tableData = [
-  {
-    typeName: '天河超级计算机',
-    model: '天河一号纯机（无CPU）',
-    cpu: 'I7-13900',
-    gpu: '4070TI',
-    memory: '1TB SSD',
-    storage: '0.044元/CPU核/小时',
-    virtualStorage: '',
-    bandwidth: '',
-    ip: '',
-    duration: '',
-    number: ''
-  },
-  {
-    typeName: '天河超级计算机',
-    model: '天河一号纯机（无CPU）',
-    cpu: 'I7-13900',
-    gpu: '4070TI',
-    memory: '1TB SSD',
-    storage: '0.044元/CPU核/小时',
-    virtualStorage: '',
-    bandwidth: '',
-    ip: '',
-    duration: '',
-    number: ''
+import { confirmOrderInfo, orderSubmit } from '@/api/computingResource.js'
+import { useRoute, useRouter } from 'vue-router'
+import { ref } from 'vue'
+
+const route = useRoute()
+const router = useRouter()
+const tableData = ref([])
+const totalPrice = ref(0)
+const params = ref([])
+confirmOrderInfo({id: route.query.id}).then(res => {
+  totalPrice.value = res.data.publicTotalPrice
+  params.value = JSON.parse(res.data.param)
+  tableData.value = [res.data]
+})
+
+function submit () {
+  orderSubmit({id: route.query.id}).then(res => {
+    if (res.data === 1) {
+      router.replace('/computingResource/orderResult')
     }
-]
+  })
+}
 
 </script>
 
@@ -229,13 +217,15 @@ const tableData = [
 
 .footer-bar {
   padding: 18px;
-  background-color: #FFFFFF;
-  position: fixed;
-  bottom: 0;
-  width: 100%;
+  //background-color: #FFFFFF;
+  //position: fixed;
+  //bottom: 0;
+  //width: 100%;
 
   .content {
     margin: 0 auto;
+    background-color: #FFFFFF;
+    padding: 20px 24px;
     width: 1280px;
   }
 

src/views/computingResource/orderResult.vue

@@ -4,10 +4,10 @@
     <div class="text">申请成功</div>
     <div class="sub-text">如有需要可返回产品页继续选购</div>
     <div>
-      <el-button type="primary">继续选购</el-button>
+      <el-button type="primary" @click="$router.replace('/computingResource/resourceList')">继续选购</el-button>
     </div>
     <div>
-      <el-button type="default">返回首页</el-button>
+      <el-button type="default" @click="$router.replace('/')">返回首页</el-button>
     </div>
   </div>
 </template>

src/views/computingResource/shoppingCart.vue

@@ -10,85 +10,84 @@
       </div>
     </div>
     <div class="page-title">
-      <div>购物车 (总共{{tableData.length}})</div>
+      <div>购物车 (总共{{ tableData.length }})</div>
     </div>
 
     <div class="page-main">
       <div class="detail-info">
-        <el-table :data="tableData">
+        <el-table :data="tableData" @selection-change="tableSelectionChange">
           <el-table-column type="selection"/>
-          <el-table-column label="资源类别/型号">
+          <el-table-column label="资源型号" prop="model"/>
+          <el-table-column label="配置详情" width="150px">
             <template #default="{row}">
-              <p>{{ row.typeName }}</p>
-              <p>{{ row.model }}</p>
+              <p>CPU：{{ row.cpu }}</p>
+              <p>GPU：{{ row.gpu }}</p>
+              <p>内存：{{ row.memory }}</p>
+              <p>存储：{{ row.storage }}</p>
             </template>
           </el-table-column>
-          <el-table-column label="配置详情" width="200px">
-            <template #default="{row}">
-              <p>CPU：I7-13900</p>
-              <p>GPU：4070TI</p>
-              <p>内存：DDR5 16GB</p>
-              <p>存储：6*4T,2*0.48T SSD</p>
-            </template>
-          </el-table-column>
-          <el-table-column label="虚拟器存储(TB)" prop="virtualStorage">
-            <template #default="{row}">
-              <el-input-number
-                  v-model="row.virtualStorage"
-                  :min="1"
-                  :max="10"
-                  controls-position="right"
-                  style="width: 80px"/>
+
+          <el-table-column v-for="(item,index) in params[0]" :key="item.id" :label="item.name"
+                           :width="item?.name?.length >= 8 ? '150px':''">
+            <template #default="scope">
+              {{ params[scope.$index][index]['valueName'] }}
             </template>
           </el-table-column>
-          <el-table-column label="网络带宽(MB)" prop="bandwidth">
+
+          <el-table-column label="申请数量" prop="useNum">
             <template #default="{row}">
               <el-input-number
-                  v-model="row.bandwidth"
+                  v-model="row.useNum"
                   :min="1"
-                  :max="10"
                   controls-position="right"
+                  @change="edit(row)"
                   style="width: 80px"/>
             </template>
           </el-table-column>
-          <el-table-column label="申请时长" prop="duration">
+          <el-table-column label="配置费用" prop="publicTotalPrice"/>
+          <el-table-column align="center" label="操作">
             <template #default="{row}">
-              <el-select v-model="row.duration" style="width: 90px">
-                <el-option label="半年" value="1"></el-option>
-                <el-option label="一年" value="2"></el-option>
-              </el-select>
+              <el-popconfirm title="确认删除当前订单吗" width="180px" @confirm="confirmDel(row)">
+                <template #reference>
+                  <el-button link>删除</el-button>
                 </template>
-          </el-table-column>
-          <el-table-column label="申请数量" prop="number">
-            <template #default="{row}">
-              <el-input-number
-                  v-model="row.number"
-                  :min="1"
-                  :max="10"
-                  controls-position="right"
-                  style="width: 80px"/>
+              </el-popconfirm>
             </template>
           </el-table-column>
-          <el-table-column label="配置费用" prop=""/>
-          <el-table-column align="center" label="操作">
-            <el-button text>删除</el-button>
-          </el-table-column>
         </el-table>
+
+        <pagination
+            v-show="total > 0"
+            :total="total"
+            v-model:page="pageNum"
+            v-model:limit="pageSize"
+            @pagination="getList"/>
       </div>
     </div>
 
     <div class="footer-bar">
       <div class="content flex-space-between flex-align-center">
+        <div class="flex-align-center" style="font-size: 16px">
+          <span>已选 ({{ ids.length }})</span>
+          <el-popconfirm title="确认删除当前订单吗" width="180px" @confirm="confirmDel()">
+            <template #reference>
               <div>
-          <span>已选 (3)</span>
-          <span style="margin-left: 40px;cursor: pointer">删除</span>
+                <el-button
+                    :disabled="!ids.length"
+                    link
+                    style="margin-left: 40px;margin-top:2px;font-size: 16px">
+                  删除
+                </el-button>
+              </div>
+            </template>
+          </el-popconfirm>
         </div>
 
-        <div class="flex-align-center">
+        <div class="flex-align-center right">
           <div class="mr20">
-            <div class="price">￥1546.00</div>
+            <div class="price">￥{{ totalPrice }}</div>
           </div>
-          <el-button type="primary" @click="$router.push('/computingResource/orderResult')">提交</el-button>
+          <el-button :disabled="!ids.length" type="primary" @click="submit">提交</el-button>
         </div>
       </div>
     </div>
@@ -96,35 +95,79 @@
 </template>
 
 <script name="ConfirmOrder" setup>
+import { shoppingList, shoppingEdit, shoppingDelete, shoppingSubmit } from '@/api/computingResource.js'
+import { ref, computed } from 'vue'
+import { ElMessageBox } from 'element-plus'
+import { useRouter } from 'vue-router'
 
-const tableData = [
-  {
-    typeName: '天河超级计算机',
-    model: '天河一号纯机（无CPU）',
-    cpu: 'I7-13900',
-    gpu: '4070TI',
-    memory: '1TB SSD',
-    storage: '0.044元/CPU核/小时',
-    virtualStorage: '',
-    bandwidth: '',
-    ip: '',
-    duration: '',
-    number: ''
-  },
+const router = useRouter()
+
+const total = ref(0)
+const pageNum = ref(1)
+const pageSize = ref(10)
+const tableData = ref([])
+
+const params = ref([])
+
+function getList () {
+  shoppingList({pageNum: pageNum.value, pageSize: pageSize.value}).then(res => {
+    console.log(res)
+    tableData.value = res.rows
+    total.value = res.total
+    params.value = res.rows.map(item => {
+      return JSON.parse(item.param)
+    })
+  })
+}
+
+getList()
+
+const ids = ref([])
+
+function tableSelectionChange (value) {
+  ids.value = value.map(row => row.id)
+}
+
+const totalPrice = computed(() => {
+  const list = tableData.value.filter(item => {
+    return ids.value.includes(item.id)
+  })
+  let price = 0
+  list.forEach(i => price += parseFloat(i.publicTotalPrice))
+  return price
+})
+
+function edit (row) {
+  shoppingEdit({id: row.id, useNum: row.useNum}).then(res => {
+    getList()
+  })
+}
+
+function confirmDel (row) {
+  const idsValue = row?.id ? row.id : ids.value
+  shoppingDelete(idsValue).then(res => {
+    getList()
+  })
+  console.log(row)
+}
+
+
+function submit () {
+  ElMessageBox.confirm(
+      '确认提交订单吗',
+      '提示',
       {
-    typeName: '天河超级计算机',
-    model: '天河一号纯机（无CPU）',
-    cpu: 'I7-13900',
-    gpu: '4070TI',
-    memory: '1TB SSD',
-    storage: '0.044元/CPU核/小时',
-    virtualStorage: '',
-    bandwidth: '',
-    ip: '',
-    duration: '',
-    number: ''
+        confirmButtonText: '确认提交',
+        cancelButtonText: '关闭',
+        icon: 'QuestionFilled'
       }
-]
+  ).then(() => {
+    shoppingSubmit(ids.value).then(res => {
+      router.push('/computingResource/orderResult')
+    })
+  }).catch(() => {
+  })
+}
 
 </script>
 
@@ -218,6 +261,7 @@ const tableData = [
   padding: 18px;
   background-color: #FFFFFF;
   position: fixed;
+  z-index: 99;
   bottom: 0;
   width: 100%;
 
@@ -239,7 +283,7 @@ const tableData = [
     }
   }
 
-  .el-button {
+  .right .el-button {
     width: 180px;
     height: 46px;
     font-size: 20px;

src/views/information/detail.vue

@@ -5,6 +5,7 @@
         <el-breadcrumb separator="/">
           <el-breadcrumb-item>首页</el-breadcrumb-item>
           <el-breadcrumb-item>活动资讯</el-breadcrumb-item>
+          <el-breadcrumb-item>活动资讯详情</el-breadcrumb-item>
         </el-breadcrumb>
       </div>
     </div>

src/views/login.vue

 <template>
   <div class="login">
     <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">若依后台管理系统</h3>
+      <h3 class="title">先进公共服务平台</h3>
       <el-form-item prop="username">
         <el-input
           v-model="loginForm.username"

src/views/register.vue

 <template>
   <div class="register">
     <el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form">
-      <h3 class="title">若依后台管理系统</h3>
+      <h3 class="title">先进公共服务平台</h3>
       <el-form-item prop="username">
         <el-input
           v-model="registerForm.username"