<template>
|
<div class="PayCard">
|
<div class="imageArea" v-if="data.pics.length">
|
<ImageShow class="activeImg" :src="activeImg.url" />
|
<div class="imgList">
|
<ImageShow
|
v-for="(item, index) in data.pics"
|
class="preImg"
|
:src="item.url"
|
:key="index"
|
alt=""
|
:class="{ active: activeImg.index == index }"
|
@click.native="selectImg(index, item.url)"
|
/>
|
</div>
|
</div>
|
|
<div class="content">
|
<div class="title">
|
<div class="name">{{ data.productName }}</div>
|
<div class="tagList">
|
<!-- <span class="tag" v-for="(name, index) in labels" :key="index">{{
|
name
|
}}</span> -->
|
<span class="tag red" v-if="data.productType == 1">软件</span>
|
<span class="tag orange" v-if="data.productType == 4">应用</span>
|
<span class="tag lightBlue" v-if="data.productType == 3">SDK</span>
|
<span class="tag" v-if="data.productType == 2">软硬一体</span>
|
<span class="tag blue" v-if="data.productType == 5">产品密钥</span>
|
</div>
|
</div>
|
<div class="des">{{ data.description }}</div>
|
<div class="typeVersion">
|
<div class="label">型号:</div>
|
<div class="typeVersionContent">
|
{{ data.productModel ? data.productModel : "-" }}
|
</div>
|
<div class="label">版本:</div>
|
<div class="typeVersionContent">
|
{{ data.productVersion ? data.productVersion : "-" }}
|
</div>
|
</div>
|
|
<!-- <div class="price">
|
<div class="label">价格</div>
|
<div class="number">￥{{ this.totalMoney }}.00</div>
|
</div> -->
|
|
<!-- <div class="row">
|
<div class="label">购买数量</div>
|
<el-input-number
|
v-model="cartItem.devCount"
|
:disabled="data.productType == 5"
|
size="small"
|
:min="1"
|
label="描述文字"
|
></el-input-number>
|
</div>
|
|
<div class="row">
|
<div class="label">服务时长</div>
|
<el-button-group class="serviceYearOpt">
|
<el-button
|
type="default"
|
size="small"
|
:class="cartItem.timeLength == 1 ? 'selected' : ''"
|
@click="selectYear(1)"
|
>一年</el-button
|
>
|
<el-button
|
type="default"
|
size="small"
|
:class="cartItem.timeLength == 2 ? 'selected' : ''"
|
@click="selectYear(2)"
|
>两年</el-button
|
>
|
<el-button
|
type="default"
|
size="small"
|
:class="cartItem.timeLength == 3 ? 'selected' : ''"
|
@click="selectYear(3)"
|
>三年</el-button
|
>
|
</el-button-group>
|
</div> -->
|
|
<div class="row" v-if="data.productBaseDetail && data.productBaseDetail.hasModulePrice">
|
<div class="label">配置模块</div>
|
<div class="check-component">
|
<div class="check-list">
|
<div
|
class="check-item"
|
v-for="(item, index) in cartItem.modules"
|
:key="index + 'c'"
|
:style="isSmartCalDot ? { cursor: 'default' } : {}"
|
:class="item.selected ? 'selected' : ''"
|
@click="selectModel(index)"
|
>
|
{{ item.moduleName }}
|
</div>
|
</div>
|
<div class="checked-list" v-if="!isSmartCalDot">
|
<div class="label">已选</div>
|
<div class="list">
|
<div
|
class="checked-item"
|
v-for="(item, index) in cartItem.modules"
|
v-show="item.selected"
|
:key="index + 'd'"
|
>
|
{{ item.moduleName }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="row" v-if="data.productType == 5">
|
<div class="label">请求码</div>
|
<el-input type="textarea" autosize placeholder="请输入请求码" v-model="cartItem.requestCode"> </el-input>
|
</div>
|
|
<div class="row" v-if="data.productBaseDetail && data.productBaseDetail.hasAuthPrice">
|
<div class="label">通道数量</div>
|
<el-input-number
|
v-model="cartItem.chCount"
|
@change="handleChangeCh"
|
:disabled="!data.hasChUnitPrice"
|
size="small"
|
:min="1"
|
:max="16"
|
label="描述文字"
|
></el-input-number>
|
<span class="desText">最大支持16路</span>
|
</div>
|
|
<div class="row" v-if="data.productBaseDetail && data.productBaseDetail.hasAuthPrice">
|
<div class="label">授权数量</div>
|
<el-input-number
|
v-model="cartItem.authCount"
|
@change="handleChangeAuth"
|
:disabled="!data.hasAuthPrice"
|
size="small"
|
:min="this.cartItem.chCount"
|
label="描述文字"
|
></el-input-number>
|
<span class="desText">可支持的轮询路数</span>
|
</div>
|
|
<div
|
class="row"
|
v-if="
|
data.productBaseDetail &&
|
data.productBaseDetail.hasPriceBase &&
|
data.productType != 5 &&
|
!isSmartCalDot &&
|
cartItem.sdks.length > 0
|
"
|
>
|
<div class="label">配置算法</div>
|
<div class="check-component">
|
<div class="check-list">
|
<div
|
class="check-item"
|
v-for="(item, index) in cartItem.sdks"
|
:key="index + 'c'"
|
:class="item.selected ? 'selected' : ''"
|
@click="selectAlgorithm(index)"
|
>
|
{{ item.sdkName }}
|
</div>
|
</div>
|
<div class="checked-list" v-if="data.productType != 3 && data.productType != 4">
|
<div class="label">已选</div>
|
<div class="list">
|
<div
|
class="checked-item"
|
v-for="(item, index) in cartItem.sdks"
|
v-show="item.selected"
|
:key="index + 'd'"
|
>
|
{{ item.sdkName }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="row" v-if="data.productType != 2 && data.productType != 1 && data.productType != 5">
|
<div class="label">芯片架构</div>
|
<el-select
|
v-model="cartItem.targetPlatform"
|
placeholder="请选择使用芯片"
|
style="
|
width: 329px;
|
height: 40px;
|
border-color: #ddd;
|
border-radius: 0;
|
"
|
>
|
<el-option
|
v-for="item in data.productBaseDetail && data.productBaseDetail.platforms"
|
style="font-size: 12px"
|
:key="item.id"
|
:label="item.id"
|
:value="item.id"
|
:title="item.name"
|
></el-option>
|
</el-select>
|
</div>
|
|
<div
|
class="row"
|
v-if="
|
data.productType != 2 &&
|
data.productType != 1 &&
|
data.productType != 5 &&
|
data.productType == 3 &&
|
(cartItem.targetPlatform.includes('x86') || cartItem.targetPlatform.includes('X86'))
|
"
|
>
|
<div class="label">显卡型号</div>
|
<el-select
|
v-model="cartItem.vGpu"
|
style="
|
width: 329px;
|
height: 40px;
|
border-color: #ddd;
|
border-radius: 0;
|
"
|
placeholder="请选择显卡型号"
|
>
|
<el-option
|
v-for="item in data.productBaseDetail && data.productBaseDetail.vGpus"
|
style="font-size: 12px"
|
:key="item.id"
|
:label="item.id"
|
:value="item.id"
|
:title="item.name"
|
></el-option>
|
</el-select>
|
</div>
|
|
<div class="row" v-if="data.productType != 2 && data.productType != 1 && data.productType != 5">
|
<div class="label">设备ID</div>
|
|
<!-- :multiple-limit="cartItem.devCount" -->
|
<el-select
|
collapse-tags
|
multiple
|
v-model="cartItem.devIdList"
|
placeholder="请选择设备ID"
|
:popper-append-to-body="false"
|
style="
|
width: 329px;
|
height: 40px;
|
border-color: #ddd;
|
border-radius: 0;
|
"
|
>
|
<el-option
|
v-for="item in devList"
|
style="font-size: 12px"
|
:key="item.id"
|
:label="item.id"
|
:value="item.id"
|
:title="item.id"
|
>
|
<span class="option-lt" :title="item.id">{{ item.id }}</span>
|
<span class="option-rt" :title="item.name">{{ item.name }}</span>
|
</el-option>
|
</el-select>
|
</div>
|
|
<div class="btns">
|
<!-- <div class="button addCar">加入购物车</div> -->
|
<div class="button pay" @click="confirmNow">立即安装</div>
|
</div>
|
</div>
|
|
<ConfirmOrder v-if="showOrder" :orderId="orderId" @close="showOrder = false"></ConfirmOrder>
|
</div>
|
</template>
|
|
<script>
|
import { findDevListByUser } from "@/api/device"
|
import { getReleaseProduct } from "@/api/product"
|
import { resumeOrder } from "@/api/shopcart"
|
import ConfirmOrder from "@/views/productDetail/components/ConfirmOrder"
|
import { resumePay } from "@/api/order"
|
|
export default {
|
props: {
|
dataInfo: {}
|
},
|
components: {
|
ConfirmOrder
|
},
|
created() {
|
this.data = this.dataInfo.data
|
this.labels = this.dataInfo.labels
|
this.cartItem.id = this.data.id
|
this.getDevList()
|
if (this.dataInfo.data.pics.length > 0) {
|
this.activeImg.url = this.dataInfo.data.pics[0].url
|
}
|
this.getInfo()
|
},
|
data() {
|
return {
|
data: {},
|
labels: [],
|
cartItem: {
|
id: "",
|
productName: "",
|
modules: [],
|
sdks: [],
|
authCount: 1,
|
chCount: 1,
|
camCount: 1,
|
moduleIds: [],
|
sdkIds: [],
|
devCount: 1,
|
targetPlatform: "",
|
devIdList: [],
|
timeLength: 1,
|
totalPrice: 0,
|
isAdded: false,
|
requestCode: ""
|
},
|
timeLength: 1,
|
isSmartCalDot: false,
|
devList: [],
|
byChecked: true,
|
baseProductList: [],
|
activeImg: {
|
index: 0,
|
url: ""
|
},
|
showOrder: false,
|
orderId: ""
|
}
|
},
|
computed: {
|
totalMoney() {
|
let modulesPrice = 0
|
this.cartItem.moduleIds.forEach((id) => {
|
this.data.modulePriceSet.forEach((module) => {
|
if (module.moduleId === id) {
|
modulesPrice += module.modulePrice
|
}
|
})
|
})
|
|
let priceSingle =
|
this.data.priceBase +
|
this.data.authPrice * this.cartItem.authCount +
|
this.data.chUnitPrice * this.cartItem.chCount +
|
modulesPrice
|
|
console.log(this.data)
|
|
return priceSingle * this.cartItem.devCount * this.cartItem.timeLength
|
}
|
},
|
methods: {
|
getInfo() {
|
getReleaseProduct({ productType: this.data.productType })
|
.then((res) => {
|
this.cartItem.id = this.data.id
|
this.cartItem.productName = this.data.productName
|
this.cartItem.authCount = 0
|
this.cartItem.chCount = 0
|
this.cartItem.devCount = 1
|
this.cartItem.timeLength = 1
|
this.cartItem.priceBase = this.data.priceBase
|
this.cartItem.authPrice = this.data.authPrice
|
this.cartItem.chUnitPrice = this.data.chUnitPrice
|
this.cartItem.targetPlatform = ""
|
this.cartItem.devIdList = []
|
this.cartItem.totalPrice = 0
|
this.cartItem.isAdded = false
|
this.cartItem.modules = []
|
this.cartItem.sdks = []
|
this.cartItem.moduleIds = []
|
this.cartItem.sdkIds = []
|
this.cartItem.hasAuthPrice = false
|
this.cartItem.hasChUnitPrice = false
|
this.baseProductList = res.data.menus
|
|
let curProdObj = this.baseProductList.find((item) => item.id === this.data.id)
|
if (!curProdObj) return
|
this.cartItem.hasAuthPrice = this.data.hasAuthPrice = curProdObj && curProdObj.hasAuthPrice
|
if (curProdObj.hasAuthPrice) {
|
this.cartItem.authCount = 1
|
}
|
this.cartItem.hasChUnitPrice = this.data.hasChUnitPrice = curProdObj && curProdObj.hasChUnitPrice
|
if (curProdObj.hasChUnitPrice) {
|
this.cartItem.chCount = 1
|
}
|
|
this.isSmartCalDot = this.data.productBaseDetail.name == "智能计算节点"
|
this.cartItem.modules =
|
curProdObj.modules &&
|
curProdObj.modules.map((item) => ({
|
id: item.id,
|
moduleName: item.moduleName,
|
modulePrice: this.data.modulePriceSet.find((obj) => obj.moduleId === item.id).modulePrice,
|
selected: this.isSmartCalDot
|
}))
|
|
this.cartItem.sdks =
|
curProdObj.sdks &&
|
curProdObj.sdks.map((item) => ({
|
id: item.id,
|
sdkName: item.sdkName,
|
selected: this.data.productType == 3 ? true : false
|
}))
|
this.cartItem.sdks.forEach((sdk) => {
|
if (sdk.selected) {
|
this.cartItem.sdkIds.push(sdk.id)
|
}
|
})
|
})
|
.catch((err) => {
|
this.$notify({
|
type: "error",
|
message: err,
|
duration: 2500,
|
offset: 57
|
})
|
})
|
},
|
selectYear(year) {
|
this.timeLength = year
|
this.cartItem.timeLength = year
|
},
|
selectModel(index) {
|
if (this.isSmartCalDot) {
|
return
|
}
|
this.cartItem.modules[index].selected = !this.cartItem.modules[index].selected
|
this.cartItem.modules.forEach((item) => {
|
if (item.selected && this.cartItem.moduleIds.indexOf(item.id) < 0) {
|
this.cartItem.moduleIds.push(item.id)
|
}
|
if (!item.selected && this.cartItem.moduleIds.indexOf(item.id) >= 0) {
|
this.cartItem.moduleIds.splice(this.cartItem.moduleIds.indexOf(item.id), 1)
|
}
|
})
|
},
|
handleChangeCh() {
|
if (this.cartItem.authCount < this.cartItem.chCount) {
|
this.cartItem.authCount = this.cartItem.chCount
|
}
|
},
|
selectAlgorithm(index) {
|
this.cartItem.sdks[index].selected = !this.cartItem.sdks[index].selected
|
this.cartItem.sdks.forEach((item) => {
|
if (item.selected && this.cartItem.sdkIds.indexOf(item.id) < 0) {
|
this.cartItem.sdkIds.push(item.id)
|
}
|
if (!item.selected && this.cartItem.sdkIds.indexOf(item.id) >= 0) {
|
this.cartItem.sdkIds.splice(this.cartItem.sdkIds.indexOf(item.id), 1)
|
}
|
})
|
},
|
getDevList() {
|
findDevListByUser()
|
.then((res) => {
|
this.devList = res.data.menus
|
})
|
.catch((err) => {
|
console.log(err)
|
})
|
},
|
handleChangeAuth() {
|
if (this.cartItem.authCount < this.cartItem.chCount) {
|
// this.cartItem.auth = this.cartItem.chCount
|
this.$notify({
|
type: "warning",
|
message: "授权数量不能小于通道数量",
|
duration: 2500,
|
offset: 57
|
})
|
this.byChecked = false
|
} else {
|
this.byChecked = true
|
}
|
},
|
selectImg(index, url) {
|
this.activeImg.index = index
|
this.activeImg.url = url
|
},
|
confirmNow() {
|
let products = [
|
{
|
activateCode: this.cartItem.requestCode,
|
authCount: this.cartItem.authCount,
|
chCount: this.cartItem.chCount,
|
devCount: this.cartItem.devCount,
|
devIdList: this.cartItem.devIdList,
|
moduleIds: this.cartItem.moduleIds,
|
productId: this.cartItem.id,
|
productPrice: this.cartItem.totalPrice,
|
quantity: 1,
|
sdkIds: this.cartItem.sdkIds,
|
serveYear: this.cartItem.timeLength,
|
targetPlatform: this.cartItem.targetPlatform,
|
vGpu: this.cartItem.vGpu
|
}
|
]
|
resumeOrder({
|
// orderMoney: this.numeral(this.totalMoney).value(),
|
orderMoney: 0,
|
payMethod: 0,
|
products,
|
status: 0,
|
userId: JSON.parse(sessionStorage.getItem("userInfo")).id
|
}).then((res) => {
|
if (res.success) {
|
this.orderId = res.data.orderId
|
|
if (this.totalMoney == 0) {
|
resumePay({ orderId: this.orderId, payMethod: 5 }).then((res) => {
|
if (res.success) {
|
this.$router.push({
|
path: "/personalCenter",
|
query: {
|
id: 0
|
}
|
})
|
this.$notify({
|
type: "success",
|
message: "成功试用",
|
duration: 2500,
|
offset: 57
|
})
|
}
|
})
|
return
|
} else {
|
this.showOrder = true
|
}
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.PayCard {
|
box-sizing: border-box;
|
display: flex;
|
margin-bottom: 24px;
|
padding: 40px;
|
background-color: #fff;
|
|
.imageArea {
|
width: 400px;
|
.activeImg {
|
margin-bottom: 10px;
|
width: 400px;
|
height: 300px;
|
}
|
|
.imgList {
|
display: flex;
|
flex-wrap: wrap;
|
|
img {
|
width: 68px;
|
height: 50px;
|
margin-right: 10px;
|
border: 2px solid #fff;
|
|
&.active {
|
border: 2px solid #ff6a00;
|
}
|
|
&:nth-child(5n) {
|
margin-right: 0;
|
}
|
}
|
}
|
}
|
|
.content {
|
padding-left: 30px;
|
flex: 1;
|
|
.title {
|
display: flex;
|
margin-bottom: 10px;
|
|
.name {
|
margin-right: 20px;
|
font-size: 18px;
|
font-weight: 700;
|
}
|
|
.tagList {
|
display: flex;
|
|
.tag {
|
margin-right: 10px;
|
padding: 2px 5px;
|
border: 1px solid #ff5033;
|
color: #ff5033;
|
|
&.red {
|
color: #ff4f32;
|
border-color: #ff4f32;
|
}
|
|
&.orange {
|
color: #ff9500;
|
border-color: #ff9500;
|
}
|
|
&.lightBlue {
|
color: #00bee7;
|
border-color: #00bee7;
|
}
|
|
&.blue {
|
color: #0064ff;
|
border-color: #0064ff;
|
}
|
}
|
}
|
}
|
|
.des {
|
margin-bottom: 20px;
|
font-size: 14px;
|
line-height: 21px;
|
}
|
|
.typeVersion {
|
display: flex;
|
margin-bottom: 20px;
|
font-size: 14px;
|
|
.label {
|
color: #666666;
|
margin-right: 5px;
|
}
|
|
.typeVersionContent {
|
margin-right: 30px;
|
font-weight: 700;
|
}
|
}
|
|
.price {
|
display: flex;
|
margin-bottom: 30px;
|
padding-left: 20px;
|
height: 70px;
|
line-height: 70px;
|
background: #f0f5fa;
|
|
.label {
|
margin-right: 48px;
|
}
|
|
.number {
|
font-size: 30px;
|
color: #ff6000;
|
}
|
}
|
|
.row {
|
margin-left: 20px;
|
margin-bottom: 30px;
|
display: flex;
|
align-items: center;
|
|
.label {
|
margin-right: 20px;
|
width: 56px;
|
font-size: 14px;
|
color: #666666;
|
}
|
|
.el-input-number ::v-deep {
|
* {
|
border-radius: 0;
|
border-color: #c0c5cc !important;
|
}
|
|
.el-input-number__decrease,
|
.el-input-number__increase {
|
background-color: #fff;
|
|
&.is-disabled {
|
background: #e9ebee;
|
}
|
}
|
}
|
|
.serviceYearOpt {
|
.el-button {
|
margin-right: 10px;
|
width: 80px;
|
height: 32px;
|
border: 1px solid #c0c5cc;
|
border-radius: 0;
|
|
&:hover,
|
&.selected {
|
color: #fff;
|
background: #0065ff;
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.check-component {
|
flex: 1;
|
.check-list {
|
display: flex;
|
flex-wrap: wrap;
|
.check-item {
|
margin-right: 10px;
|
margin-bottom: 10px;
|
padding: 2px 5px;
|
border: 1px solid #0065ff;
|
color: #0065ff;
|
}
|
}
|
|
.checked-list {
|
.list {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
.checked-item {
|
margin-right: 10px;
|
margin-bottom: 10px;
|
padding: 2px 5px;
|
border: 1px solid #0065ff;
|
color: #0065ff;
|
}
|
}
|
}
|
|
.el-textarea ::v-deep {
|
textarea {
|
border: 1px solid #c0c5cc;
|
border-radius: 0;
|
}
|
}
|
|
.desText {
|
margin: 0 10px;
|
}
|
|
.el-select ::v-deep {
|
input {
|
border: 1px solid #c0c5cc;
|
border-radius: 0;
|
}
|
|
.el-tag {
|
margin-top: 0;
|
}
|
|
.el-select__tags-text {
|
color: #999;
|
}
|
}
|
}
|
|
.btns {
|
display: flex;
|
margin-left: 20px;
|
margin-top: 60px;
|
text-align: center;
|
|
.addCar {
|
margin-right: 10px;
|
width: 215px;
|
height: 40px;
|
line-height: 40px;
|
background: #ffba4a;
|
color: #fff;
|
}
|
|
.pay {
|
width: 215px;
|
height: 40px;
|
line-height: 40px;
|
background: #ff6a00;
|
color: #fff;
|
}
|
}
|
}
|
}
|
</style>
|
