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'
......
.env.production
# 页面标题
VITE_APP_TITLE = 若依管理系统
VITE_APP_TITLE = 先进公共服务平台
# 生产环境配置
VITE_APP_ENV = 'production'
......@@ -8,4 +8,4 @@ VITE_APP_ENV = 'production'
VITE_APP_BASE_API = '/prod-api'
# 是否在打包时开启压缩，支持 gzip 和 brotli
VITE_BUILD_COMPRESS = gzip
\ No newline at end of file
VITE_BUILD_COMPRESS = gzip
.env.staging
# 页面标题
VITE_APP_TITLE = 若依管理系统
VITE_APP_TITLE = 先进公共服务平台
# 生产环境配置
VITE_APP_ENV = 'staging'
......@@ -8,4 +8,4 @@ VITE_APP_ENV = 'staging'
VITE_APP_BASE_API = '/stage-api'
# 是否在打包时开启压缩，支持 gzip 和 brotli
VITE_BUILD_COMPRESS = gzip
\ No newline at end of file
VITE_BUILD_COMPRESS = gzip
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,
......@@ -212,4 +212,4 @@
<script type="module" src="/src/main.js"></script>
</body>
</html>
\ No newline at end of file
</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/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 @@
<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/resourceList.vue
......@@ -49,7 +49,7 @@
<svg-icon v-show="showVersion === 2" color="#2E77E3" icon-class="list-1"/>
<svg-icon v-show="showVersion === 1" color="#2E77E3" icon-class="table"/>
</div>
<el-tabs v-model="tabActive">
<el-tabs v-model="tabActive" @tab-change="tabChange">
<el-tab-pane
v-for="productType in productTypes"
:key="productType.value"
......@@ -57,21 +57,17 @@
:name="productType.value">
<div v-if="showVersion === 1" class="version-1">
<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="cpu" label="CPU" sortable/>
<el-table-column prop="gpu" label="GPU" sortable/>
<el-table-column prop="memory" 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">
<template #default="{row}">
<el-button class="action-button">加入购物车</el-button>
<el-button type="primary" class="action-button" @click="showDrawer = true">立即申请</el-button>
<el-button class="action-button" @click="selectedProduct(1,row.id)">加入购物车</el-button>
<el-button type="primary" class="action-button" @click="selectedProduct(2,row.id)">立即申请
</el-button>
</template>
</el-table-column>
</el-table>
......@@ -82,17 +78,17 @@
<el-col v-for="(item,index) in tableData" :key="index" :span="6">
<div class="product-card">
<div class="top-info">
<div class="title">{{ item.name }}</div>
<div class="title">{{ item.model }}</div>
<div class="tag">
<el-tag type="warning" effect="dark">性价比</el-tag>
<el-tag type="info" effect="plain">专家推荐</el-tag>
<!--<el-tag type="warning" effect="dark">性价比</el-tag>-->
<!--<el-tag type="info" effect="plain">专家推荐</el-tag>-->
</div>
<div class="desc">提供通用计算性能和网络流量，适合小型网站、小程序和Web开发场景</div>
<div class="desc">{{ item.remark }}</div>
</div>
<div class="bottom-info">
<div class="label">型号</div>
<div class="value">{{ item.model }}</div>
<el-divider></el-divider>
<!--<div class="label">型号</div>-->
<!--<div class="value">{{ item.model }}</div>-->
<!--<el-divider></el-divider>-->
<el-row>
<el-col :span="12">
<div>
......@@ -121,12 +117,13 @@
</el-col>
</el-row>
<el-divider></el-divider>
<div class="flex-justify-end price">￥1546.00</div>
<div class="flex-justify-end month-expenses">约￥15/月</div>
<div class="flex-justify-end price">￥{{ item.publicPrice }}</div>
<!--<div class="flex-justify-end month-expenses">约￥15/月</div>-->
<el-divider></el-divider>
<div class="footer-action flex">
<el-button class="action-button">加入购物车</el-button>
<el-button type="primary" class="action-button" @click="showDrawer = true">立即申请</el-button>
<el-button class="action-button" @click="selectedProduct(1,item.id)">加入购物车</el-button>
<el-button type="primary" class="action-button" @click="selectedProduct(2,item.id)">立即申请
</el-button>
</div>
</div>
</div>
......@@ -149,82 +146,60 @@
<div class="info-block">
<div class="info-item flex-align-center flex-space-between">
<div class="label">类别</div>
<div class="value">天河超级计算机</div>
<div class="value">{{ productDetail.category }}</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">型号</div>
<div class="value">天河一号纯机 (无CPU)</div>
<div class="value">{{ productDetail.model }}</div>
</div>
</div>
<div class="info-block">
<div class="info-item flex-align-center flex-space-between">
<div class="label">CPU</div>
<div class="value">I7-13900</div>
<div class="value">{{ productDetail.cpu }}</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">GPU</div>
<div class="value">4070TI</div>
<div class="value">{{ productDetail.gpu }}</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">内存</div>
<div class="value">DDR5 16GB</div>
<div class="value">{{ productDetail.memory }}</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">存储</div>
<div class="value">1TB SSD</div>
<div class="value">{{ productDetail.storage }}</div>
</div>
</div>
<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 class="label">公网IP（个）</div>
<div class="value">
<el-input-number v-model="form.num1" :min="1" :max="10" style="width: 110px"/>
</div>
</div>
<div v-for="item in productDetail.options" :key="item.id"
class="info-item flex-align-center flex-space-between">
<div class="label">{{ item.label }}</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">虚拟机内存（TB）</div>
<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 class="info-block">
<div class="info-item flex-align-center flex-space-between">
<div class="label">使用数量（个）</div>
<div class="value">
<el-input-number v-model="form.num3" :min="1" :max="10" 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>
<el-input-number v-model="form.num" :min="0" style="width: 110px"/>
</div>
</div>
</div>
......@@ -236,10 +211,10 @@
<div class="flex-align-center">
<div class="mr20">
<div class="price">￥1546.00</div>
<!-- <div>约￥15/月</div>-->
<div class="price">￥{{ orderPrice }}</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>
</template>
......@@ -257,66 +232,147 @@
</template>
<script name="ResourceList" setup>
import { ref } from 'vue'
import pcDefaultImg from '@/assets/images/pc-default.png'
import { ref, watch } from 'vue'
import { ElMessageBox } from 'element-plus'
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 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 = [
{name: '天河超级计算机', value: 1},
{name: 'CPU裸金属服务器', value: 2},
{name: '存储', value: 3},
{name: '云计算资源', value: 4}
]
function getTypeData () {
computilityMenu().then(res => {
productTypes.value = res.data
if (route.query.type) {
tabActive.value = route.query.type
} else {
tabActive.value = res.data[0].value
}
getList()
})
}
const total = ref(1)
const pageNum = ref(1)
const pageSize = ref(10)
getTypeData()
const tableData = [
{
img: pcDefaultImg,
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: '-'
watch(() => route.query.type, (value, oldValue) => {
if (value) {
tabActive.value = value
}
]
})
function tabChange () {
pageNum.value = 1
getList()
}
function getList () {
getRListByCategory({nav: tabActive.value, pageNum: '', pageSize: ''}).then(res => {
total.value = res.total
tableData.value = res.rows
})
}
const showDrawer = ref(false)
const form = ref({
radio1: '',
num1: '',
num2: '',
num3: '',
radio2: ''
num: 1
})
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>
<style scoped lang="scss">
......@@ -448,15 +504,14 @@ const form = ref({
.product-card {
margin-bottom: 24px;
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 {
border: 1px solid #2E77E3;
box-sizing: border-box;
}
box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.08);
border-radius: 0px 0px 0px 0px;
.top-info {
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;
......@@ -484,7 +539,7 @@ const form = ref({
}
.bottom-info {
padding: 12px 24px 10px 24px;
padding: 12px 24px 20px 24px;
.el-divider {
margin: 12px 0;
......
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">
<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>
</template>
</el-table-column>
<el-table-column label="申请数量" prop="number">
<el-table-column label="配置费用" prop="publicTotalPrice"/>
<el-table-column align="center" label="操作">
<template #default="{row}">
<el-input-number
v-model="row.number"
:min="1"
:max="10"
controls-position="right"
style="width: 80px"/>
<el-popconfirm title="确认删除当前订单吗" width="180px" @confirm="confirmDel(row)">
<template #reference>
<el-button link>删除</el-button>
</template>
</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>
<span>已选 (3)</span>
<span style="margin-left: 40px;cursor: pointer">删除</span>
<div class="flex-align-center" style="font-size: 16px">
<span>已选 ({{ ids.length }})</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 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: ''
},
{
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(
'确认提交订单吗',
'提示',
{
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"
type="text"
size="large"
auto-complete="off"
<el-input
v-model="registerForm.username"
type="text"
size="large"
auto-complete="off"
placeholder="账号"
>
<template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
......@@ -17,7 +17,7 @@
<el-input
v-model="registerForm.password"
type="password"
size="large"
size="large"
auto-complete="off"
placeholder="密码"
@keyup.enter="handleRegister"
......@@ -29,7 +29,7 @@
<el-input
v-model="registerForm.confirmPassword"
type="password"
size="large"
size="large"
auto-complete="off"
placeholder="确认密码"
@keyup.enter="handleRegister"
......@@ -39,7 +39,7 @@
</el-form-item>
<el-form-item prop="code" v-if="captchaEnabled">
<el-input
size="large"
size="large"
v-model="registerForm.code"
auto-complete="off"
placeholder="验证码"
......@@ -55,7 +55,7 @@
<el-form-item style="width:100%;">
<el-button
:loading="loading"
size="large"
size="large"
type="primary"
style="width:100%;"
@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