Skip to content

phsl / client

Go to a project
Commit 52f9144b by 赵月辉
Options

整合订单流程接口完成

parent d40f1ddc
Showing with 457 additions and 273 deletions
.env.development
# 页面标题 # 页面标题
VITE_APP_TITLE = 若依管理系统 VITE_APP_TITLE = 先进公共服务平台
# 开发环境配置 # 开发环境配置
VITE_APP_ENV = 'development' VITE_APP_ENV = 'development'
......
.env.production
# 页面标题 # 页面标题
VITE_APP_TITLE = 若依管理系统 VITE_APP_TITLE = 先进公共服务平台
# 生产环境配置 # 生产环境配置
VITE_APP_ENV = 'production' VITE_APP_ENV = 'production'
...@@ -8,4 +8,4 @@ VITE_APP_ENV = 'production' ...@@ -8,4 +8,4 @@ VITE_APP_ENV = 'production'
VITE_APP_BASE_API = '/prod-api' VITE_APP_BASE_API = '/prod-api'
# 是否在打包时开启压缩，支持 gzip 和 brotli # 是否在打包时开启压缩，支持 gzip 和 brotli
VITE_BUILD_COMPRESS = gzip VITE_BUILD_COMPRESS = gzip
\ No newline at end of file
.env.staging
# 页面标题 # 页面标题
VITE_APP_TITLE = 若依管理系统 VITE_APP_TITLE = 先进公共服务平台
# 生产环境配置 # 生产环境配置
VITE_APP_ENV = 'staging' VITE_APP_ENV = 'staging'
...@@ -8,4 +8,4 @@ VITE_APP_ENV = 'staging' ...@@ -8,4 +8,4 @@ VITE_APP_ENV = 'staging'
VITE_APP_BASE_API = '/stage-api' VITE_APP_BASE_API = '/stage-api'
# 是否在打包时开启压缩，支持 gzip 和 brotli # 是否在打包时开启压缩，支持 gzip 和 brotli
VITE_BUILD_COMPRESS = gzip VITE_BUILD_COMPRESS = gzip
\ No newline at end of file
index.html
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<meta name="renderer" content="webkit"> <meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<title>若依管理系统</title> <title>先进公共服务平台</title>
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]--> <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
<style> <style>
html, html,
...@@ -212,4 +212,4 @@ ...@@ -212,4 +212,4 @@
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
src/api/computingResource.js
import request from '@/utils/request' import request from '@/utils/request'
// 获取计算资源菜单 // 获取计算资源菜单
export function computilityMenu(query) { export function computilityMenu (query) {
return request({ return request({
url: '/api/v1/computilityMenu', url: '/api/v1/computilityMenu',
method: 'get', method: 'get',
params: query 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/assets/images/banner.png
src/assets/images/banner.png

1.46 MB | W: | H:

src/assets/images/banner.png

390 KB | W: | H:

src/assets/images/banner.png
src/assets/images/banner.png
src/assets/images/banner.png
src/assets/images/banner.png
  • 2-up
  • Swipe
  • Onion skin
src/layout/user-layout.vue
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<template #title>计算资源</template> <template #title>计算资源</template>
<el-menu-item <el-menu-item
v-for="item in computilityMenuData" v-for="item in computilityMenuData"
:index="'/computingResource/resourceList/'+item.value"> :index="'/computingResource/resourceList?type='+item.value">
{{ item.name }} {{ item.name }}
</el-menu-item> </el-menu-item>
</el-sub-menu> </el-sub-menu>
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
</div> </div>
<div class="right-menu"> <div class="right-menu">
<el-button type="primary">登录/注册</el-button> <el-button type="primary" @click="$router.push('/login')">登录/注册</el-button>
</div> </div>
</div> </div>
</div> </div>
...@@ -47,25 +47,22 @@ const route = useRoute() ...@@ -47,25 +47,22 @@ const route = useRoute()
const router = useRouter() const router = useRouter()
const activeMenu = computed(() => { const activeMenu = computed(() => {
const {meta, path} = route const {meta, path, fullPath} = route
console.log(route)
// if set path, the sidebar will highlight the path you set
if (meta.activeMenu) { if (meta.activeMenu) {
return meta.activeMenu return meta.activeMenu
} }
return path const titleList = ['计算资源']
return titleList.includes(meta.title) ? fullPath : path
}) })
function menuSelect (val) { function menuSelect (val) {
router.push(val) router.push(val)
// console.log(val)
} }
const computilityMenuData = ref([]) const computilityMenuData = ref([])
function getComputilityMenu () { function getComputilityMenu () {
computilityMenu().then(res => { computilityMenu().then(res => {
console.log(res)
computilityMenuData.value = res.data computilityMenuData.value = res.data
}) })
} }
......
src/router/index.js
...@@ -78,7 +78,7 @@ export const constantRoutes = [ ...@@ -78,7 +78,7 @@ export const constantRoutes = [
meta: {title: '计算资源'}, meta: {title: '计算资源'},
children: [ children: [
{ {
path: 'resourceList/:type(\\d+)', path: 'resourceList',
component: () => import('@/views/computingResource/resourceList.vue'), component: () => import('@/views/computingResource/resourceList.vue'),
name: 'ResourceList', name: 'ResourceList',
meta: {title: '计算资源'} meta: {title: '计算资源'}
......
src/views/computingResource/confirmOrder.vue
...@@ -69,26 +69,20 @@ ...@@ -69,26 +69,20 @@
<!-- </tbody>--> <!-- </tbody>-->
<!-- </table>--> <!-- </table>-->
<el-table :data="tableData"> <el-table :data="tableData">
<el-table-column label="资源类别/型号"> <el-table-column label="资源型号" prop="model"/>
<template #default="{row}">
<p>{{ row.typeName }}</p>
<p>{{ row.model }}</p>
</template>
</el-table-column>
<el-table-column label="配置详情" width="200px"> <el-table-column label="配置详情" width="200px">
<template #default="{row}"> <template #default="{row}">
<p>CPU：I7-13900</p> <p>CPU：{{ row.cpu }}</p>
<p>GPU：4070TI</p> <p>GPU：{{ row.gpu }}</p>
<p>内存：DDR5 16GB</p> <p>内存：{{ row.memory }}</p>
<p>存储：6*4T,2*0.48T SSD</p> <p>存储：{{ row.storage }}</p>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="虚拟器存储" prop="virtualStorage"/> <el-table-column v-for="param in params" :key="param.id" :label="param.name">
<el-table-column label="网络带宽" prop="bandwidth"/> {{ param.valueName }}
<el-table-column label="公网IP" prop="ip"/> </el-table-column>
<el-table-column label="申请时长" prop="duration"/> <el-table-column label="使用数量" prop="useNum"/>
<el-table-column label="申请数量" prop="number"/> <!--<el-table-column label="配置费用" prop="publicTotalPrice"/>-->
<el-table-column label="配置费用" prop=""/>
</el-table> </el-table>
</div> </div>
</div> </div>
...@@ -100,9 +94,9 @@ ...@@ -100,9 +94,9 @@
<div class="flex-align-center"> <div class="flex-align-center">
<div class="mr20"> <div class="mr20">
<div class="price">￥1546.00</div> <div class="price">￥1546.00</div>
<!-- <div>约￥15/月</div>--> <!--<div>约￥15/月</div>-->
</div> </div>
<el-button type="primary" @click="$router.push('/computingResource/orderResult')">提交</el-button> <el-button type="primary" @click="submit">提交</el-button>
</div> </div>
</div> </div>
</div> </div>
...@@ -110,34 +104,28 @@ ...@@ -110,34 +104,28 @@
</template> </template>
<script name="ConfirmOrder" setup> <script name="ConfirmOrder" setup>
const tableData = [ import { confirmOrderInfo, orderSubmit } from '@/api/computingResource.js'
{ import { useRoute, useRouter } from 'vue-router'
typeName: '天河超级计算机', import { ref } from 'vue'
model: '天河一号纯机（无CPU）',
cpu: 'I7-13900', const route = useRoute()
gpu: '4070TI', const router = useRouter()
memory: '1TB SSD', const tableData = ref([])
storage: '0.044元/CPU核/小时', const totalPrice = ref(0)
virtualStorage: '', const params = ref([])
bandwidth: '', confirmOrderInfo({id: route.query.id}).then(res => {
ip: '', totalPrice.value = res.data.publicTotalPrice
duration: '', params.value = JSON.parse(res.data.param)
number: '' tableData.value = [res.data]
}, })
{
typeName: '天河超级计算机', function submit () {
model: '天河一号纯机（无CPU）', orderSubmit({id: route.query.id}).then(res => {
cpu: 'I7-13900', if (res.data === 1) {
gpu: '4070TI', router.replace('/computingResource/orderResult')
memory: '1TB SSD', }
storage: '0.044元/CPU核/小时', })
virtualStorage: '', }
bandwidth: '',
ip: '',
duration: '',
number: ''
}
]
</script> </script>
...@@ -229,13 +217,15 @@ const tableData = [ ...@@ -229,13 +217,15 @@ const tableData = [
.footer-bar { .footer-bar {
padding: 18px; padding: 18px;
background-color: #FFFFFF; //background-color: #FFFFFF;
position: fixed; //position: fixed;
bottom: 0; //bottom: 0;
width: 100%; //width: 100%;
.content { .content {
margin: 0 auto; margin: 0 auto;
background-color: #FFFFFF;
padding: 20px 24px;
width: 1280px; width: 1280px;
} }
......
src/views/computingResource/orderResult.vue
...@@ -4,10 +4,10 @@ ...@@ -4,10 +4,10 @@
<div class="text">申请成功</div> <div class="text">申请成功</div>
<div class="sub-text">如有需要可返回产品页继续选购</div> <div class="sub-text">如有需要可返回产品页继续选购</div>
<div> <div>
<el-button type="primary">继续选购</el-button> <el-button type="primary" @click="$router.replace('/computingResource/resourceList')">继续选购</el-button>
</div> </div>
<div> <div>
<el-button type="default">返回首页</el-button> <el-button type="default" @click="$router.replace('/')">返回首页</el-button>
</div> </div>
</div> </div>
</template> </template>
......
src/views/computingResource/resourceList.vue
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
<svg-icon v-show="showVersion === 2" color="#2E77E3" icon-class="list-1"/> <svg-icon v-show="showVersion === 2" color="#2E77E3" icon-class="list-1"/>
<svg-icon v-show="showVersion === 1" color="#2E77E3" icon-class="table"/> <svg-icon v-show="showVersion === 1" color="#2E77E3" icon-class="table"/>
</div> </div>
<el-tabs v-model="tabActive"> <el-tabs v-model="tabActive" @tab-change="tabChange">
<el-tab-pane <el-tab-pane
v-for="productType in productTypes" v-for="productType in productTypes"
:key="productType.value" :key="productType.value"
...@@ -57,21 +57,17 @@ ...@@ -57,21 +57,17 @@
:name="productType.value"> :name="productType.value">
<div v-if="showVersion === 1" class="version-1"> <div v-if="showVersion === 1" class="version-1">
<el-table :data="tableData" :max-height="490" style="width: 100%"> <el-table :data="tableData" :max-height="490" style="width: 100%">
<el-table-column prop="img" label="图片" width="80px">
<template #default="{row}">
<img :src="row.img" style="width: 50px;height: 50px;display: block" alt="">
</template>
</el-table-column>
<el-table-column prop="model" label="型号" width="190px" sortable/> <el-table-column prop="model" label="型号" width="190px" sortable/>
<el-table-column prop="cpu" label="CPU" sortable/> <el-table-column prop="cpu" label="CPU" sortable/>
<el-table-column prop="gpu" label="GPU" sortable/> <el-table-column prop="gpu" label="GPU" sortable/>
<el-table-column prop="memory" label="内存" sortable/> <el-table-column prop="memory" label="内存" sortable/>
<el-table-column prop="storage" label="存储" sortable/> <el-table-column prop="storage" label="存储" sortable/>
<el-table-column prop="quotation" label="报价" sortable/> <el-table-column prop="publicPrice" label="报价" sortable/>
<el-table-column label="操作" width="204px"> <el-table-column label="操作" width="204px">
<template #default="{row}"> <template #default="{row}">
<el-button class="action-button">加入购物车</el-button> <el-button class="action-button" @click="selectedProduct(1,row.id)">加入购物车</el-button>
<el-button type="primary" class="action-button" @click="showDrawer = true">立即申请</el-button> <el-button type="primary" class="action-button" @click="selectedProduct(2,row.id)">立即申请
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -82,17 +78,17 @@ ...@@ -82,17 +78,17 @@
<el-col v-for="(item,index) in tableData" :key="index" :span="6"> <el-col v-for="(item,index) in tableData" :key="index" :span="6">
<div class="product-card"> <div class="product-card">
<div class="top-info"> <div class="top-info">
<div class="title">{{ item.name }}</div> <div class="title">{{ item.model }}</div>
<div class="tag"> <div class="tag">
<el-tag type="warning" effect="dark">性价比</el-tag> <!--<el-tag type="warning" effect="dark">性价比</el-tag>-->
<el-tag type="info" effect="plain">专家推荐</el-tag> <!--<el-tag type="info" effect="plain">专家推荐</el-tag>-->
</div> </div>
<div class="desc">提供通用计算性能和网络流量，适合小型网站、小程序和Web开发场景</div> <div class="desc">{{ item.remark }}</div>
</div> </div>
<div class="bottom-info"> <div class="bottom-info">
<div class="label">型号</div> <!--<div class="label">型号</div>-->
<div class="value">{{ item.model }}</div> <!--<div class="value">{{ item.model }}</div>-->
<el-divider></el-divider> <!--<el-divider></el-divider>-->
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<div> <div>
...@@ -121,12 +117,13 @@ ...@@ -121,12 +117,13 @@
</el-col> </el-col>
</el-row> </el-row>
<el-divider></el-divider> <el-divider></el-divider>
<div class="flex-justify-end price">￥1546.00</div> <div class="flex-justify-end price">￥{{ item.publicPrice }}</div>
<div class="flex-justify-end month-expenses">约￥15/月</div> <!--<div class="flex-justify-end month-expenses">约￥15/月</div>-->
<el-divider></el-divider> <el-divider></el-divider>
<div class="footer-action flex"> <div class="footer-action flex">
<el-button class="action-button">加入购物车</el-button> <el-button class="action-button" @click="selectedProduct(1,item.id)">加入购物车</el-button>
<el-button type="primary" class="action-button" @click="showDrawer = true">立即申请</el-button> <el-button type="primary" class="action-button" @click="selectedProduct(2,item.id)">立即申请
</el-button>
</div> </div>
</div> </div>
</div> </div>
...@@ -149,82 +146,60 @@ ...@@ -149,82 +146,60 @@
<div class="info-block"> <div class="info-block">
<div class="info-item flex-align-center flex-space-between"> <div class="info-item flex-align-center flex-space-between">
<div class="label">类别</div> <div class="label">类别</div>
<div class="value">天河超级计算机</div> <div class="value">{{ productDetail.category }}</div>
</div> </div>
<div class="info-item flex-align-center flex-space-between"> <div class="info-item flex-align-center flex-space-between">
<div class="label">型号</div> <div class="label">型号</div>
<div class="value">天河一号纯机 (无CPU)</div> <div class="value">{{ productDetail.model }}</div>
</div> </div>
</div> </div>
<div class="info-block"> <div class="info-block">
<div class="info-item flex-align-center flex-space-between"> <div class="info-item flex-align-center flex-space-between">
<div class="label">CPU</div> <div class="label">CPU</div>
<div class="value">I7-13900</div> <div class="value">{{ productDetail.cpu }}</div>
</div> </div>
<div class="info-item flex-align-center flex-space-between"> <div class="info-item flex-align-center flex-space-between">
<div class="label">GPU</div> <div class="label">GPU</div>
<div class="value">4070TI</div> <div class="value">{{ productDetail.gpu }}</div>
</div> </div>
<div class="info-item flex-align-center flex-space-between"> <div class="info-item flex-align-center flex-space-between">
<div class="label">内存</div> <div class="label">内存</div>
<div class="value">DDR5 16GB</div> <div class="value">{{ productDetail.memory }}</div>
</div> </div>
<div class="info-item flex-align-center flex-space-between"> <div class="info-item flex-align-center flex-space-between">
<div class="label">存储</div> <div class="label">存储</div>
<div class="value">1TB SSD</div> <div class="value">{{ productDetail.storage }}</div>
</div> </div>
</div> </div>
<div class="info-block"> <div class="info-block">
<div class="info-item flex-align-center flex-space-between">
<div class="label">网络</div>
<div class="value">
<el-radio-group v-model="form.radio1" size="">
<el-radio-button label="2M(默认)" value="2"/>
<el-radio-button label="10M" value="10"/>
<el-radio-button label="50M" value="50"/>
<el-radio-button label="100M" value="100"/>
</el-radio-group>
</div>
</div>
<div class="info-item flex-align-center flex-space-between"> <div v-for="item in productDetail.options" :key="item.id"
<div class="label">公网IP（个）</div> class="info-item flex-align-center flex-space-between">
<div class="value"> <div class="label">{{ item.label }}</div>
<el-input-number v-model="form.num1" :min="1" :max="10" style="width: 110px"/>
</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">虚拟机内存（TB）</div>
<div class="value"> <div class="value">
<el-input-number v-model="form.num2" :min="1" :max="10" style="width: 110px"/> <el-input-number v-if="item.type === 2" v-model="item.value" :min="0" @change="orderComputerPrice" style="width: 110px"/>
<el-radio-group v-if="[0,1].includes(item.type)" v-model="item.value" @change="orderComputerPrice">
<el-radio-button v-for="option in item.options" :label="option.id">
{{ option.model + option.unit }}
</el-radio-button>
</el-radio-group>
</div> </div>
</div> </div>
</div> </div>
<div class="info-block"> <div class="info-block">
<div class="info-item flex-align-center flex-space-between"> <div class="info-item flex-align-center flex-space-between">
<div class="label">使用数量（个）</div> <div class="label">使用数量（个）</div>
<div class="value"> <div class="value">
<el-input-number v-model="form.num3" :min="1" :max="10" style="width: 110px"/> <el-input-number v-model="form.num" :min="0" style="width: 110px"/>
</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">使用时长（年）</div>
<div class="value">
<el-radio-group v-model="form.radio2" size="">
<el-radio-button label="半年" value="0.5"/>
<el-radio-button label="1年" value="1"/>
<el-radio-button label="2年" value="2"/>
<el-radio-button label="3年" value="3"/>
<el-radio-button label="5年" value="5"/>
</el-radio-group>
</div> </div>
</div> </div>
</div> </div>
...@@ -236,10 +211,10 @@ ...@@ -236,10 +211,10 @@
<div class="flex-align-center"> <div class="flex-align-center">
<div class="mr20"> <div class="mr20">
<div class="price">￥1546.00</div> <div class="price">￥{{ orderPrice }}</div>
<!-- <div>约￥15/月</div>-->
</div> </div>
<el-button type="primary" @click="$router.push('/computingResource/confirmOrder')">确认配置</el-button> <el-button type="primary" @click="submit">{{ selectedType === 1 ? '加入购物车' : '立即申请' }}
</el-button>
</div> </div>
</div> </div>
</template> </template>
...@@ -257,66 +232,147 @@ ...@@ -257,66 +232,147 @@
</template> </template>
<script name="ResourceList" setup> <script name="ResourceList" setup>
import { ref } from 'vue' import { ref, watch } from 'vue'
import pcDefaultImg from '@/assets/images/pc-default.png' import { ElMessageBox } from 'element-plus'
import SvgIcon from '@/components/SvgIcon/index.vue' import SvgIcon from '@/components/SvgIcon/index.vue'
import {
computilityMenu,
getRListByCategory,
getRDetail,
orderBuy,
shoppingAdd,
orderComputer
} from '@/api/computingResource.js'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const showVersion = ref(2) const showVersion = ref(2)
const tabActive = ref()
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)
const tabActive = ref(1) const productTypes = ref([])
const tableData = ref([])
const productTypes = [ function getTypeData () {
{name: '天河超级计算机', value: 1}, computilityMenu().then(res => {
{name: 'CPU裸金属服务器', value: 2}, productTypes.value = res.data
{name: '存储', value: 3}, if (route.query.type) {
{name: '云计算资源', value: 4} tabActive.value = route.query.type
] } else {
tabActive.value = res.data[0].value
}
getList()
})
}
const total = ref(1) getTypeData()
const pageNum = ref(1)
const pageSize = ref(10)
const tableData = [ watch(() => route.query.type, (value, oldValue) => {
{ if (value) {
img: pcDefaultImg, tabActive.value = value
typeName: '天河超级计算机',
model: '天河一号纯机（无CPU）',
cpu: 'I7-13900',
gpu: '4070TI',
memory: '-',
storage: '-'
},
{
img: pcDefaultImg,
typeName: '天河超级计算机',
model: '天河一号纯机（无CPU）',
cpu: 'I7-13900',
gpu: '4070TI',
memory: '-',
storage: '-'
},
{
img: pcDefaultImg,
typeName: '天河超级计算机',
model: '天河一号纯机（无CPU）',
cpu: 'I7-13900',
gpu: '4070TI',
memory: '-',
storage: '-'
} }
] })
function tabChange () {
pageNum.value = 1
getList()
}
function getList () { function getList () {
getRListByCategory({nav: tabActive.value, pageNum: '', pageSize: ''}).then(res => {
total.value = res.total
tableData.value = res.rows
})
} }
const showDrawer = ref(false) const showDrawer = ref(false)
const form = ref({ const form = ref({
radio1: '', num: 1
num1: '',
num2: '',
num3: '',
radio2: ''
}) })
const selectedType = ref()
const selectedId = ref()
const productDetail = ref({})
function selectedProduct (type, id) {
selectedType.value = type
selectedId.value = id
getRDetail({id}).then(res => {
res.data.options.forEach(item => {
if ([0, 1].includes(item.type)) {
item.value = item.options[0].id
}
if (item.type === 2) {
item.value = 1
}
})
productDetail.value = res.data
orderComputerPrice()
showDrawer.value = true
})
}
function initSubmitData () {
return {
id: selectedId.value,
num: form.value.num,
computerItems: productDetail.value.options.map(item => {
if ([0, 1].includes(item.type)) {
return {
id: item.id,
name: item.label,
valueId: item.value
}
}
return {
id: item.id,
name: item.label,
valueId: item.options[0].id,
value: item.value.toString()
}
})
}
}
const orderPrice = ref(0)
function orderComputerPrice () {
orderComputer(initSubmitData()).then(res => {
orderPrice.value = res.data.totalInnerPrice
})
}
function submit () {
const data = initSubmitData()
if (selectedType.value === 1) {
shoppingAdd(data).then(res => {
ElMessageBox.confirm(
'添加到购物车成功',
{
confirmButtonText: '去提交',
cancelButtonText: '关闭',
type: 'success'
}
).then(() => {
router.push('/computingResource/shoppingCart')
}).catch(() => {
})
})
}
if (selectedType.value === 2) {
orderBuy(data).then(res => {
router.push({
path: '/computingResource/confirmOrder',
query: {id: res.data}
})
})
}
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -448,15 +504,14 @@ const form = ref({ ...@@ -448,15 +504,14 @@ const form = ref({
.product-card { .product-card {
margin-bottom: 24px; margin-bottom: 24px;
border: 1px solid rgba(0, 0, 0, 0.08); border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.08);
border-radius: 0px 0px 0px 0px;
&:hover { &:hover {
border: 1px solid #2E77E3; border: 1px solid #2E77E3;
box-sizing: border-box; box-sizing: border-box;
} }
box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.08);
border-radius: 0px 0px 0px 0px;
.top-info { .top-info {
padding: 18px 20px 12px 20px; padding: 18px 20px 12px 20px;
background: linear-gradient(153deg, rgba(255, 175, 175, 0) 0%, #FDE7E7 100%), linear-gradient(145deg, #EDFCFF 0%, rgba(97, 227, 255, 0) 100%), #F0F6FF; background: linear-gradient(153deg, rgba(255, 175, 175, 0) 0%, #FDE7E7 100%), linear-gradient(145deg, #EDFCFF 0%, rgba(97, 227, 255, 0) 100%), #F0F6FF;
...@@ -484,7 +539,7 @@ const form = ref({ ...@@ -484,7 +539,7 @@ const form = ref({
} }
.bottom-info { .bottom-info {
padding: 12px 24px 10px 24px; padding: 12px 24px 20px 24px;
.el-divider { .el-divider {
margin: 12px 0; margin: 12px 0;
......
src/views/computingResource/shoppingCart.vue
...@@ -10,85 +10,84 @@ ...@@ -10,85 +10,84 @@
</div> </div>
</div> </div>
<div class="page-title"> <div class="page-title">
<div>购物车 (总共{{tableData.length}})</div> <div>购物车 (总共{{ tableData.length }})</div>
</div> </div>
<div class="page-main"> <div class="page-main">
<div class="detail-info"> <div class="detail-info">
<el-table :data="tableData"> <el-table :data="tableData" @selection-change="tableSelectionChange">
<el-table-column type="selection"/> <el-table-column type="selection"/>
<el-table-column label="资源类别/型号"> <el-table-column label="资源型号" prop="model"/>
<el-table-column label="配置详情" width="150px">
<template #default="{row}"> <template #default="{row}">
<p>{{ row.typeName }}</p> <p>CPU：{{ row.cpu }}</p>
<p>{{ row.model }}</p> <p>GPU：{{ row.gpu }}</p>
<p>内存：{{ row.memory }}</p>
<p>存储：{{ row.storage }}</p>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="配置详情" width="200px">
<template #default="{row}"> <el-table-column v-for="(item,index) in params[0]" :key="item.id" :label="item.name"
<p>CPU：I7-13900</p> :width="item?.name?.length >= 8 ? '150px':''">
<p>GPU：4070TI</p> <template #default="scope">
<p>内存：DDR5 16GB</p> {{ params[scope.$index][index]['valueName'] }}
<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"/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="网络带宽(MB)" prop="bandwidth">
<el-table-column label="申请数量" prop="useNum">
<template #default="{row}"> <template #default="{row}">
<el-input-number <el-input-number
v-model="row.bandwidth" v-model="row.useNum"
:min="1" :min="1"
:max="10"
controls-position="right" controls-position="right"
@change="edit(row)"
style="width: 80px"/> style="width: 80px"/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="申请时长" prop="duration"> <el-table-column label="配置费用" prop="publicTotalPrice"/>
<template #default="{row}"> <el-table-column align="center" label="操作">
<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>
</template>
</el-table-column>
<el-table-column label="申请数量" prop="number">
<template #default="{row}"> <template #default="{row}">
<el-input-number <el-popconfirm title="确认删除当前订单吗" width="180px" @confirm="confirmDel(row)">
v-model="row.number" <template #reference>
:min="1" <el-button link>删除</el-button>
:max="10" </template>
controls-position="right" </el-popconfirm>
style="width: 80px"/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="配置费用" prop=""/>
<el-table-column align="center" label="操作">
<el-button text>删除</el-button>
</el-table-column>
</el-table> </el-table>
<pagination
v-show="total > 0"
:total="total"
v-model:page="pageNum"
v-model:limit="pageSize"
@pagination="getList"/>
</div> </div>
</div> </div>
<div class="footer-bar"> <div class="footer-bar">
<div class="content flex-space-between flex-align-center"> <div class="content flex-space-between flex-align-center">
<div> <div class="flex-align-center" style="font-size: 16px">
<span>已选 (3)</span> <span>已选 ({{ ids.length }})</span>
<span style="margin-left: 40px;cursor: pointer">删除</span> <el-popconfirm title="确认删除当前订单吗" width="180px" @confirm="confirmDel()">
<template #reference>
<div>
<el-button
:disabled="!ids.length"
link
style="margin-left: 40px;margin-top:2px;font-size: 16px">
删除
</el-button>
</div>
</template>
</el-popconfirm>
</div> </div>
<div class="flex-align-center"> <div class="flex-align-center right">
<div class="mr20"> <div class="mr20">
<div class="price">￥1546.00</div> <div class="price">￥{{ totalPrice }}</div>
</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> </div>
</div> </div>
...@@ -96,35 +95,79 @@ ...@@ -96,35 +95,79 @@
</template> </template>
<script name="ConfirmOrder" setup> <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 = [ const router = useRouter()
{
typeName: '天河超级计算机', const total = ref(0)
model: '天河一号纯机（无CPU）', const pageNum = ref(1)
cpu: 'I7-13900', const pageSize = ref(10)
gpu: '4070TI', const tableData = ref([])
memory: '1TB SSD',
storage: '0.044元/CPU核/小时', const params = ref([])
virtualStorage: '',
bandwidth: '', function getList () {
ip: '', shoppingList({pageNum: pageNum.value, pageSize: pageSize.value}).then(res => {
duration: '', console.log(res)
number: '' tableData.value = res.rows
}, total.value = res.total
{ params.value = res.rows.map(item => {
typeName: '天河超级计算机', return JSON.parse(item.param)
model: '天河一号纯机（无CPU）', })
cpu: 'I7-13900', })
gpu: '4070TI', }
memory: '1TB SSD',
storage: '0.044元/CPU核/小时', getList()
virtualStorage: '',
bandwidth: '', const ids = ref([])
ip: '',
duration: '', function tableSelectionChange (value) {
number: '' 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(
'确认提交订单吗',
'提示',
{
confirmButtonText: '确认提交',
cancelButtonText: '关闭',
icon: 'QuestionFilled'
}
).then(() => {
shoppingSubmit(ids.value).then(res => {
router.push('/computingResource/orderResult')
})
}).catch(() => {
})
}
</script> </script>
...@@ -218,6 +261,7 @@ const tableData = [ ...@@ -218,6 +261,7 @@ const tableData = [
padding: 18px; padding: 18px;
background-color: #FFFFFF; background-color: #FFFFFF;
position: fixed; position: fixed;
z-index: 99;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
...@@ -239,7 +283,7 @@ const tableData = [ ...@@ -239,7 +283,7 @@ const tableData = [
} }
} }
.el-button { .right .el-button {
width: 180px; width: 180px;
height: 46px; height: 46px;
font-size: 20px; font-size: 20px;
......
src/views/information/detail.vue
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<el-breadcrumb separator="/"> <el-breadcrumb separator="/">
<el-breadcrumb-item>首页</el-breadcrumb-item> <el-breadcrumb-item>首页</el-breadcrumb-item>
<el-breadcrumb-item>活动资讯</el-breadcrumb-item> <el-breadcrumb-item>活动资讯</el-breadcrumb-item>
<el-breadcrumb-item>活动资讯详情</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
</div> </div>
......
src/views/login.vue
<template> <template>
<div class="login"> <div class="login">
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form"> <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-form-item prop="username">
<el-input <el-input
v-model="loginForm.username" v-model="loginForm.username"
......
src/views/register.vue
<template> <template>
<div class="register"> <div class="register">
<el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form"> <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-form-item prop="username">
<el-input <el-input
v-model="registerForm.username" v-model="registerForm.username"
type="text" type="text"
size="large" size="large"
auto-complete="off" auto-complete="off"
placeholder="账号" placeholder="账号"
> >
<template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template> <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<el-input <el-input
v-model="registerForm.password" v-model="registerForm.password"
type="password" type="password"
size="large" size="large"
auto-complete="off" auto-complete="off"
placeholder="密码" placeholder="密码"
@keyup.enter="handleRegister" @keyup.enter="handleRegister"
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
<el-input <el-input
v-model="registerForm.confirmPassword" v-model="registerForm.confirmPassword"
type="password" type="password"
size="large" size="large"
auto-complete="off" auto-complete="off"
placeholder="确认密码" placeholder="确认密码"
@keyup.enter="handleRegister" @keyup.enter="handleRegister"
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
</el-form-item> </el-form-item>
<el-form-item prop="code" v-if="captchaEnabled"> <el-form-item prop="code" v-if="captchaEnabled">
<el-input <el-input
size="large" size="large"
v-model="registerForm.code" v-model="registerForm.code"
auto-complete="off" auto-complete="off"
placeholder="验证码" placeholder="验证码"
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
<el-form-item style="width:100%;"> <el-form-item style="width:100%;">
<el-button <el-button
:loading="loading" :loading="loading"
size="large" size="large"
type="primary" type="primary"
style="width:100%;" style="width:100%;"
@click.prevent="handleRegister" @click.prevent="handleRegister"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment