陈裕财
2 years ago
10 changed files with 1941 additions and 0 deletions
-
324src/views/order/addUsersIndex.vue
-
84src/views/order/components/orderSkeleton.vue
-
284src/views/order/createOrder.vue
-
297src/views/order/enterprise.vue
-
164src/views/order/flagShip.vue
-
367src/views/order/index.scss
-
207src/views/order/index.vue
-
15src/views/order/list.vue
-
65src/views/order/paySuccess.vue
-
134src/views/order/renewIndex.vue
@ -0,0 +1,324 @@ |
|||||
|
<template> |
||||
|
<div class="full_continer"> |
||||
|
<div class="banner"> |
||||
|
<p>购买流程: 1.选择模块 》2.确认订单 》 3.支付 》 4.完成</p> |
||||
|
</div> |
||||
|
|
||||
|
<div class="flux_continer"> |
||||
|
<div class="content"> |
||||
|
<div class="top_desc"> |
||||
|
<h2>升级所有已购买产品可用人数</h2> |
||||
|
<p>团队名: {{userInfo.branchName?userInfo.branchName:userInfo.branchId}}</p> |
||||
|
</div> |
||||
|
<div class="version_all"> |
||||
|
<div class="enterprise"> |
||||
|
<div class="buy_count"> |
||||
|
<h2> |
||||
|
购买总人数 |
||||
|
<span>(10人起购) 当前企业已有<font color="red">{{branchUsersCpd.maxUsers}}</font>个账户可用 </span> |
||||
|
</h2> |
||||
|
|
||||
|
<div class="buy_count_items"> |
||||
|
<el-input type="number" style="width:30%;" v-model="data.ousers" :min="10" @change="formOusersChange"></el-input> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="buy_count"> |
||||
|
<h2> |
||||
|
产品明细 |
||||
|
<span> 增加人数将自动分配人员额度给企业已购买的产品，涉及的产品明细如下 </span> |
||||
|
</h2> |
||||
|
|
||||
|
<div class="buy_count_items"> |
||||
|
<el-table |
||||
|
size="larget" |
||||
|
border |
||||
|
:data="orders.modules" |
||||
|
style="width: 100%" > |
||||
|
<!-- |
||||
|
<el-table-column |
||||
|
prop="name" |
||||
|
label="产品类型" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<span style="margin-left: 10px">{{ scope.row.mcate == '1' ? '智慧协同办公系统' : |
||||
|
scope.row.mcate == '2' ? '项目管理' : '商城'}}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
--> |
||||
|
<el-table-column |
||||
|
prop="name" |
||||
|
label="产品名称" min-width="150" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<div class="avatar-container"> |
||||
|
<div class="avatar-wrapper"> |
||||
|
<img v-if=" scope.row.logoUrl" class="user-avatar" :src="scope.row.logoUrl"> |
||||
|
<span class="username"> {{scope.row.name}}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="ousers" |
||||
|
label="可使用人数" |
||||
|
min-width="120"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="musers" |
||||
|
label="计价人数" |
||||
|
min-width="120"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="orginFee" |
||||
|
label="原价" |
||||
|
min-width="120"> |
||||
|
<template slot-scope="scope"> |
||||
|
￥{{scope.row.orginFee}} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="finalFee" |
||||
|
label="折扣价" |
||||
|
min-width="120"> |
||||
|
<template slot-scope="scope"> |
||||
|
￥{{scope.row.finalFee}} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="pay_way"> |
||||
|
<h2>支付方式</h2> |
||||
|
<div class="pay_way_items"> |
||||
|
<div class="oItem" @click="selectPayWay(item)" v-for="(item, index) in payWayOptions" :key="index"> |
||||
|
<img :src="item.icon"> |
||||
|
<span>{{item.label}}</span> |
||||
|
<i v-if="item.isChecked" class="select el-icon-success"></i> |
||||
|
</div> |
||||
|
</div> |
||||
|
<el-input size="larget" style="width:30%;" v-model="data.phone" class="phone" placeholder="输入手机号"></el-input> |
||||
|
</div> |
||||
|
|
||||
|
<div class="pay_allAmount"> |
||||
|
<h2>订单总额</h2> |
||||
|
<p class="allAmount">￥<b>{{orders.order?orders.order.ofinalFee:''}}</b>/{{data.label}}</p> |
||||
|
<el-checkbox v-model="data.checked">同意</el-checkbox> <a style="font-size: 14px;color: #409EFF">《服务协议》</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<el-button :loading="load.add" @click="createOrder" size="larget" class="submit" type="primary"> |
||||
|
提交 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<el-dialog |
||||
|
title="微信支付" |
||||
|
:visible.sync="weixinPayVisible" |
||||
|
:show-close="false" |
||||
|
@close="closeDialog" |
||||
|
width="350px" |
||||
|
> |
||||
|
<qriously :value="codeUrl" :size="300" /> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
import {getAllMenuModule, getBuyMenuModule} from '@/api/mdp/sys/modules' |
||||
|
import {modulesOfIcon} from "../layout/ModulesMenu/modulesOfIcon.js"; |
||||
|
import {createAddUsersOrder,calcAddUsersOrder} from '@/api/mdp/sys/order'; |
||||
|
|
||||
|
import aliPayImg from '@/assets/image/module/alipay.png'; |
||||
|
import weixinPayImg from '@/assets/image/module/weixin.png'; |
||||
|
|
||||
|
import { mapGetters } from 'vuex' |
||||
|
import {aliPay, weixinPay, checkWxPayStatus} from '@/api/mdp/pay/pay' |
||||
|
|
||||
|
export default { |
||||
|
components: { }, |
||||
|
|
||||
|
computed: { |
||||
|
...mapGetters([ 'userInfo' ]), |
||||
|
|
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
payWayOptions: [ |
||||
|
{ |
||||
|
label: '支付宝', |
||||
|
val: '2', |
||||
|
icon: aliPayImg, |
||||
|
isChecked: true |
||||
|
}, |
||||
|
{ |
||||
|
label: '微信', |
||||
|
val: '1', |
||||
|
icon: weixinPayImg, |
||||
|
isChecked: false |
||||
|
} |
||||
|
], |
||||
|
load:{add:false,calc:false,list:false}, |
||||
|
orders:{ |
||||
|
modules: null, |
||||
|
order:null, |
||||
|
}, |
||||
|
data:{ |
||||
|
phone:'', |
||||
|
name:'', |
||||
|
ousers:10, |
||||
|
payType:'1', |
||||
|
checked:true,//是否同意协议 |
||||
|
}, |
||||
|
|
||||
|
branchUsersCpd:{istatus:'1',maxUsers:50,ilvlId:'2',ilvlName:'黄金会员'}, |
||||
|
weixinPayVisible: false, |
||||
|
codeUrl: "" |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
|
||||
|
formOusersChange(val){ |
||||
|
this.calcOrder(); |
||||
|
}, |
||||
|
calcOrder:function() { |
||||
|
if(!this.data.ousers){ |
||||
|
return; |
||||
|
} |
||||
|
var params={ousers:this.data.ousers} |
||||
|
calcAddUsersOrder(params).then(res=>{ |
||||
|
this.orders.order=res.data.data |
||||
|
var modules=res.data.modules |
||||
|
var defIcon=modulesOfIcon[0] |
||||
|
modules.forEach(i=>{ |
||||
|
var e=modulesOfIcon.find(k=>k.id==i.moduleId) |
||||
|
if(e && e.id){ |
||||
|
i.logoUrl = e.logoUrl; |
||||
|
}else{ |
||||
|
i.logoUrl=defIcon.logoUrl |
||||
|
} |
||||
|
}) |
||||
|
this.orders.modules=modules |
||||
|
}) |
||||
|
}, |
||||
|
selectPayWay(item) { |
||||
|
this.data.payType = item.val; |
||||
|
this.payWayOptions.forEach(element => { |
||||
|
element.isChecked = false; |
||||
|
if(item.val == element.val) { |
||||
|
element.isChecked = true; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
createOrder() { |
||||
|
//来源 |
||||
|
this.data.osource = "1"; |
||||
|
//订单类型 |
||||
|
this.data.otype = "1"; |
||||
|
//备注 |
||||
|
this.data.remark = ""; |
||||
|
this.data.name = "模块开通订单" |
||||
|
this.load.add = true; |
||||
|
createAddUsersOrder(this.data).then(res => { |
||||
|
if(res.data.tips.isOk){ |
||||
|
//获取订单号 |
||||
|
let orderId = res.data.data.id; |
||||
|
if(this.data.payType == '2') { |
||||
|
this.toAliPay(orderId); |
||||
|
return; |
||||
|
} |
||||
|
if(this.data.payType == '1') { |
||||
|
this.toWeixinPay(orderId); |
||||
|
return; |
||||
|
} |
||||
|
}else{ |
||||
|
this.$notify.error(res.data.tips.msg); |
||||
|
} |
||||
|
}).catch(err => { |
||||
|
this.$notify.error(err.msg); |
||||
|
}).finally(() => { |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
toAliPay(orderId) { |
||||
|
let params = { |
||||
|
id: orderId, |
||||
|
otype: 1, |
||||
|
returnUrl: `${window.location.protocol+"//"+window.location.host}/${process.env.CONTEXT}/${process.env.VERSION}/#/my/order/paySuccess` |
||||
|
} |
||||
|
aliPay(params).then(res => { |
||||
|
if(res.data.tips.isOk) { |
||||
|
const div = document.createElement("divform"); |
||||
|
div.innerHTML = res.data.data.htmlStr; |
||||
|
document.body.appendChild(div); |
||||
|
document.forms[0].submit(); |
||||
|
}else { |
||||
|
this.$notify.error(res.data.tips.msg); |
||||
|
} |
||||
|
}).finally(() => { |
||||
|
setTimeout(() => { |
||||
|
this.load.add = false; |
||||
|
}, 2000); |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
toWeixinPay(orderId) { |
||||
|
let params = { |
||||
|
id: orderId, |
||||
|
otype: 1, |
||||
|
returnUrl: "" |
||||
|
} |
||||
|
weixinPay(params).then(res => { |
||||
|
if(res.data.tips.isOk) { |
||||
|
this.codeUrl = res.data.data.codeUrl; |
||||
|
this.weixinPayVisible = true; |
||||
|
this.timer = setInterval(() => { |
||||
|
this.queryOrderStatus(orderId) |
||||
|
}, 3000) |
||||
|
}else { |
||||
|
this.$notify.error(res.data.tips.msg); |
||||
|
} |
||||
|
}).finally(() => { |
||||
|
setTimeout(() => { |
||||
|
this.load.add = false; |
||||
|
}, 2000); |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
//查询订单支付状态 |
||||
|
queryOrderStatus(orderId) { |
||||
|
console.log("查询订单"); |
||||
|
checkWxPayStatus({'orderId': orderId, "otype": "1"}).then(res => { |
||||
|
if(res.data.tips.isOk) { |
||||
|
this.$router.push({path:'/my/order/paySuccess', query:{total_amount: this.data.amount, out_trade_no: orderId}}); |
||||
|
clearInterval(this.timer); |
||||
|
}else { |
||||
|
} |
||||
|
}).finally(() => { |
||||
|
|
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
closeDialog() { |
||||
|
clearInterval(this.timer); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
mounted(){ |
||||
|
this.calcOrder(); |
||||
|
getBranchInterestsDetail().then(res=>{ |
||||
|
this.branchUsersCpd=res.data.data |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import './index.scss'; |
||||
|
</style> |
||||
@ -0,0 +1,84 @@ |
|||||
|
<template> |
||||
|
<el-skeleton style="width: 100%; margin-top: 20px;" animated > |
||||
|
<template slot="template"> |
||||
|
<div> |
||||
|
<el-skeleton-item variant="h1" style="width: 10%" /> |
||||
|
</div> |
||||
|
<el-skeleton-item variant="p" style="width: 20%; margin-top: 20px;" /> |
||||
|
<div style="margin-top: 20px;"> |
||||
|
<el-skeleton-item variant="h1" style="width: 10%" /> |
||||
|
</div> |
||||
|
|
||||
|
<div style="display: flex; margin-top: 30px;"> |
||||
|
<el-skeleton-item variant="image" style="width: 220px; height: 110px; margin-right: 20px;" /> |
||||
|
<el-skeleton-item variant="image" style="width: 240px; height: 110px;" /> |
||||
|
</div> |
||||
|
|
||||
|
<div style="margin-top: 30px;"> |
||||
|
<el-skeleton-item variant="h1" style="width: 10%" /> |
||||
|
<el-skeleton-item variant="span" style="width: 10%; margin: 0 30px;" /> |
||||
|
<el-skeleton-item variant="span" style="width: 10%; margin-right: 30px;" /> |
||||
|
<el-skeleton-item variant="span" style="width: 10%" /> |
||||
|
</div> |
||||
|
|
||||
|
<div style="display: flex; margin-top: 30px;"> |
||||
|
<el-skeleton-item variant="image" style="width: 180px; height: 200px; margin-right: 20px;" /> |
||||
|
<el-skeleton-item variant="image" style="width: 180px; height: 200px; margin-right: 20px;" /> |
||||
|
<el-skeleton-item variant="image" style="width: 180px; height: 200px; margin-right: 20px;" /> |
||||
|
<el-skeleton-item variant="image" style="width: 180px; height: 200px; margin-right: 20px;" /> |
||||
|
<el-skeleton-item variant="image" style="width: 180px; height: 200px; margin-right: 20px;" /> |
||||
|
</div> |
||||
|
|
||||
|
<div style="margin-top: 30px;"> |
||||
|
<el-skeleton-item variant="h1" style="width: 10%" /> |
||||
|
<el-skeleton-item variant="span" style="width: 10%; margin: 0 30px;" /> |
||||
|
</div> |
||||
|
|
||||
|
<div style="margin-top: 30px;"> |
||||
|
<el-skeleton-item variant="text " style="width: 200px; height: 120px; margin-right: 20px;" /> |
||||
|
<el-skeleton-item variant="text " style="width: 200px; height: 120px; margin-right: 20px;" /> |
||||
|
<el-skeleton-item variant="text " style="width: 200px; height: 120px; margin-right: 20px;" /> |
||||
|
</div> |
||||
|
|
||||
|
<div style="margin-top: 30px;"> |
||||
|
<el-skeleton-item variant="text " style="width: 200px; height: 120px; margin-right: 20px;" /> |
||||
|
<el-skeleton-item variant="text " style="width: 200px; height: 120px; margin-right: 20px;" /> |
||||
|
<el-skeleton-item variant="text " style="width: 200px; height: 120px; margin-right: 20px;" /> |
||||
|
</div> |
||||
|
|
||||
|
<div style="display: flex; margin-top: 30px;"> |
||||
|
<el-skeleton-item variant="image" style="width: 180px; height: 200px; margin-right: 20px;" /> |
||||
|
<el-skeleton-item variant="image" style="width: 180px; height: 200px; margin-right: 20px;" /> |
||||
|
</div> |
||||
|
|
||||
|
<div style="margin-top: 30px;"> |
||||
|
<el-skeleton-item variant="h1" style="width: 32%" /> |
||||
|
</div> |
||||
|
|
||||
|
<div style="margin-top: 30px;"> |
||||
|
<el-skeleton-item variant="h1" style="width: 10%" /> |
||||
|
</div> |
||||
|
|
||||
|
<div style="margin-top: 30px;"> |
||||
|
<el-skeleton-item variant="text" style="width: 50px;" /> |
||||
|
</div> |
||||
|
|
||||
|
<div style="margin-top: 30px;"> |
||||
|
<el-skeleton-item variant="text" style="width: 100px;" /> |
||||
|
</div> |
||||
|
|
||||
|
<el-skeleton-item style="margin-top: 30px; width: 100px;" variant="button" /> |
||||
|
|
||||
|
</template> |
||||
|
</el-skeleton> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,284 @@ |
|||||
|
<template> |
||||
|
<div class="full_continer"> |
||||
|
<div class="banner"> |
||||
|
<p>购买流程: 1.选择模块 》 <span style="color:red;">2.确认订单 》</span> 3.支付 》 4.完成</p> |
||||
|
</div> |
||||
|
<div class="flux_continer"> |
||||
|
<div class="content"> |
||||
|
<div class="order_detail"> |
||||
|
<h2>订单详情</h2> |
||||
|
<div class="order_box"> |
||||
|
<div class="content"> |
||||
|
<div class="middle"> |
||||
|
<div class="desc"> |
||||
|
<el-descriptions size="larget" :column="3"> |
||||
|
<el-descriptions-item label="购买版本">企业版 ( {{data.ousers}} 人 )</el-descriptions-item> |
||||
|
<el-descriptions-item label="企业">{{data.order && data.order.obranchName?data.order.obranchName: ''}}</el-descriptions-item> |
||||
|
<!-- <el-descriptions-item label="手机号码">18826103122</el-descriptions-item> --> |
||||
|
<el-descriptions-item label="支付方式">{{data.payType == '2' ? '支付宝' : '微信'}}</el-descriptions-item> |
||||
|
</el-descriptions> |
||||
|
</div> |
||||
|
<div class="table"> |
||||
|
<el-table |
||||
|
size="larget" |
||||
|
border |
||||
|
:data="data.modules" |
||||
|
style="width: 100%" |
||||
|
height="250"> |
||||
|
<!-- |
||||
|
<el-table-column |
||||
|
prop="name" |
||||
|
label="产品类型" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<span style="margin-left: 10px">{{ scope.row.mcate == '1' ? '智慧协同办公系统' : |
||||
|
scope.row.mcate == '2' ? '项目管理' : '商城'}}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
--> |
||||
|
<el-table-column |
||||
|
prop="name" |
||||
|
label="产品名称" min-width="150" |
||||
|
> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="ousers" |
||||
|
label="可用人数" |
||||
|
min-width="120"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="musers" |
||||
|
label="计价人数" |
||||
|
min-width="120"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="orginFee" |
||||
|
label="原价" |
||||
|
min-width="120"> |
||||
|
<template slot-scope="scope"> |
||||
|
￥{{scope.row.orginFee}} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="finalFee" |
||||
|
label="折扣价" |
||||
|
min-width="120"> |
||||
|
<template slot-scope="scope"> |
||||
|
￥{{scope.row.finalFee}} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="bottom"> |
||||
|
<span class="allAmount"> |
||||
|
总金额: <b>{{data.order?data.order.ofinalFee:''}}￥</b> |
||||
|
</span> |
||||
|
<el-button size="larget" @click="returnPage">上一步</el-button> |
||||
|
<el-button size="larget" type="primary" :loading="load.add" @click="createOrder">确认支付</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<el-dialog |
||||
|
title="微信支付" |
||||
|
:visible.sync="weixinPayVisible" |
||||
|
:show-close="false" |
||||
|
@close="closeDialog" |
||||
|
width="350px" |
||||
|
> |
||||
|
<qriously :value="codeUrl" :size="300" /> |
||||
|
|
||||
|
|
||||
|
</el-dialog> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
import { mapGetters } from 'vuex'; |
||||
|
import {createOrder} from '@/api/mdp/sys/order' |
||||
|
import {aliPay, weixinPay, checkWxPayStatus} from '@/api/mdp/pay/pay' |
||||
|
|
||||
|
export default { |
||||
|
|
||||
|
|
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'userInfo' |
||||
|
]), |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
data: {}, |
||||
|
load:{add:false,}, |
||||
|
weixinPayVisible: false, |
||||
|
codeUrl: "" |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
returnPage() { |
||||
|
this.$router.back(); |
||||
|
}, |
||||
|
|
||||
|
createOrder() { |
||||
|
//来源 |
||||
|
this.data.osource = "1"; |
||||
|
//订单类型 |
||||
|
this.data.otype = "1"; |
||||
|
//备注 |
||||
|
this.data.remark = ""; |
||||
|
this.data.name = "模块开通订单" |
||||
|
this.load.add = true; |
||||
|
var params={...this.data} |
||||
|
params.order=null |
||||
|
params.modules=null |
||||
|
|
||||
|
createOrder(params).then(res => { |
||||
|
if(res.data.tips.isOk){ |
||||
|
//获取订单号 |
||||
|
let orderId = res.data.data.id; |
||||
|
if(this.data.payType == '2') { |
||||
|
this.toAliPay(orderId); |
||||
|
return; |
||||
|
} |
||||
|
if(this.data.payType == '1') { |
||||
|
this.toWeixinPay(orderId); |
||||
|
return; |
||||
|
} |
||||
|
}else{ |
||||
|
this.$notify.error(res.data.tips.msg); |
||||
|
} |
||||
|
}).catch(err => { |
||||
|
this.$notify.error(err.msg); |
||||
|
}).finally(() => { |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
toAliPay(orderId) { |
||||
|
let params = { |
||||
|
id: orderId, |
||||
|
otype: 1, |
||||
|
returnUrl: `${window.location.protocol+"//"+window.location.host}/${process.env.CONTEXT}/${process.env.VERSION}/#/my/order/paySuccess` |
||||
|
} |
||||
|
aliPay(params).then(res => { |
||||
|
if(res.data.tips.isOk) { |
||||
|
const div = document.createElement("divform"); |
||||
|
div.innerHTML = res.data.data.htmlStr; |
||||
|
document.body.appendChild(div); |
||||
|
document.forms[0].submit(); |
||||
|
}else { |
||||
|
this.$notify.error(res.data.tips.msg); |
||||
|
} |
||||
|
}).finally(() => { |
||||
|
setTimeout(() => { |
||||
|
this.load.add = false; |
||||
|
}, 2000); |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
toWeixinPay(orderId) { |
||||
|
let params = { |
||||
|
id: orderId, |
||||
|
otype: 1, |
||||
|
returnUrl: "" |
||||
|
} |
||||
|
weixinPay(params).then(res => { |
||||
|
if(res.data.tips.isOk) { |
||||
|
this.codeUrl = res.data.data.codeUrl; |
||||
|
this.weixinPayVisible = true; |
||||
|
this.timer = setInterval(() => { |
||||
|
this.queryOrderStatus(orderId) |
||||
|
}, 3000) |
||||
|
}else { |
||||
|
this.$notify.error(res.data.tips.msg); |
||||
|
} |
||||
|
}).finally(() => { |
||||
|
setTimeout(() => { |
||||
|
this.load.add = false; |
||||
|
}, 2000); |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
//查询订单支付状态 |
||||
|
queryOrderStatus(orderId) { |
||||
|
console.log("查询订单"); |
||||
|
checkWxPayStatus({'orderId': orderId, "otype": "1"}).then(res => { |
||||
|
if(res.data.tips.isOk) { |
||||
|
this.$router.push({path:'/my/order/paySuccess', query:{total_amount: this.data.amount, out_trade_no: orderId}}); |
||||
|
clearInterval(this.timer); |
||||
|
}else { |
||||
|
} |
||||
|
}).finally(() => { |
||||
|
|
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
closeDialog() { |
||||
|
clearInterval(this.timer); |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
created() { |
||||
|
let data = JSON.parse(window.localStorage.getItem("BUY_MODULES")); |
||||
|
this.data = data; |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import './index.scss'; |
||||
|
.order_detail { |
||||
|
margin-top: 30px; |
||||
|
.order_box { |
||||
|
margin-top: 30px; |
||||
|
width: 100%; |
||||
|
max-height: 500px; |
||||
|
border: 1px solid #E3E4E6; |
||||
|
.content { |
||||
|
.header { |
||||
|
height: 60px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding-left: 20px; |
||||
|
border-bottom: 2px solid #F4F5F8; |
||||
|
} |
||||
|
.middle { |
||||
|
.desc { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
flex-wrap: wrap; |
||||
|
span { |
||||
|
margin-right: 60px; |
||||
|
margin-bottom: 20px; |
||||
|
color: #606060; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.bottom { |
||||
|
padding: 20px; |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
align-items: center; |
||||
|
.allAmount { |
||||
|
margin-right: 40px; |
||||
|
b { |
||||
|
font-size: 24px; |
||||
|
color: #FA5A55; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,297 @@ |
|||||
|
<template> |
||||
|
<div class="enterprise"> |
||||
|
<div class="sys_type"> |
||||
|
<div class="sys_desc"> |
||||
|
<h2>选择产品</h2> |
||||
|
<div class="selectItem"> |
||||
|
<div class="item" :class="{active: active == 'xmgl' }" @click="active = 'xmgl'"> |
||||
|
<span>项目管理系统</span> |
||||
|
</div> |
||||
|
<div class="item" :class="{active: active == 'oa' }" @click="active = 'oa'"> |
||||
|
<span>智慧协同办公系统</span> |
||||
|
</div> |
||||
|
<div class="item" :class="{active: active == 'mall' }" @click="active = 'mall'"> |
||||
|
<span>电商定制系统</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="sys_modules" v-if="this.modules != null"> |
||||
|
<div v-for="(item, index) in modules[active]" :key="index"> |
||||
|
<div v-if="ooper==='2' && item.billMode!=='0' && item.isBuy" class="module"> |
||||
|
<div class="head" :class="{active: item.isChecked == true}" @click="selectItem(item, index)"> |
||||
|
<div class="module_top"> |
||||
|
<img :src="item.logoUrl" alt=""> |
||||
|
<span>{{item.name}}</span> |
||||
|
</div> |
||||
|
<div v-if="item.isBuy" class="module_bottom"> |
||||
|
<i v-if="item.isChecked" class="selected el-icon-success"></i> |
||||
|
<span> <font color="red"> 待续费 </font> <font title="到期" style="font-size:10px;"> {{formatDate(item.endTime)}} </font></span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-else-if="ooper!=='2' && item.billMode!=='0' " class="module"> |
||||
|
<div class="head" :class="{active: item.isChecked == true}" @click="selectItem(item, index)"> |
||||
|
<div class="module_top"> |
||||
|
<img :src="item.logoUrl" alt=""> |
||||
|
<span>{{item.name}}</span> |
||||
|
</div> |
||||
|
<div v-if=" item.billMode==='0'" class="module_bottom"> |
||||
|
<span> <font color="red">免费 </font> <font color="blue">已开通</font></span> |
||||
|
</div> |
||||
|
<div v-else-if="item.isBuy" class="module_bottom"> |
||||
|
<span> <font color="blue">已开通</font></span> |
||||
|
</div> |
||||
|
<div v-else class="module_bottom" > |
||||
|
<i v-if="item.isChecked" class="selected el-icon-success"></i> |
||||
|
<span> <font color="red">待开通</font></span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="buy_count"> |
||||
|
<h2> |
||||
|
购买总人数 |
||||
|
<span>(10人起购,请按企业(团队)总人数填写，企业(团队)总人数代表了企业在唛盟平台可开立免费账户的总个数)</span> |
||||
|
</h2> |
||||
|
|
||||
|
<div class="buy_count_items"> |
||||
|
<el-input-number v-if="branchUsersCpd.ilvlId>1" v-model="form.ousers" :min="branchUsersCpd.maxUsers" @change="formOusersChange"></el-input-number> |
||||
|
|
||||
|
<el-input-number v-else v-model="form.ousers" :min="10" @change="formOusersChange"></el-input-number> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="buy_date"> |
||||
|
<h2>期限选择</h2> |
||||
|
<div class="buy_date_items"> |
||||
|
<div class="oItem" @click="selectBuyDate(item)" v-for="(item, index) in odaysOptions" :key="index"> |
||||
|
<div class="header"> |
||||
|
{{item.label}} |
||||
|
<i v-if="item.isChecked" class="select el-icon-success"></i> |
||||
|
</div> |
||||
|
<div class="bottom"> |
||||
|
<img v-if="item.isHot" src="@/assets/image/module/hot.png" alt=""> |
||||
|
<p>￥{{item.price}}/人天</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="pay_way"> |
||||
|
<h2>支付方式</h2> |
||||
|
<div class="pay_way_items"> |
||||
|
<div class="oItem" @click="selectPayWay(item)" v-for="(item, index) in payWayOptions" :key="index"> |
||||
|
<img :src="item.icon"> |
||||
|
<span>{{item.label}}</span> |
||||
|
<i v-if="item.isChecked" class="select el-icon-success"></i> |
||||
|
</div> |
||||
|
</div> |
||||
|
<el-input size="larget" v-model="form.phone" class="phone" placeholder="输入手机号"></el-input> |
||||
|
</div> |
||||
|
|
||||
|
<div class="pay_allAmount"> |
||||
|
<h2>订单总额</h2> |
||||
|
<p class="allAmount">￥<b>{{orders.order?orders.order.ofinalFee:''}}</b>/{{form.label}}</p> |
||||
|
<el-checkbox v-model="form.checked">同意</el-checkbox> <a style="font-size: 14px;color: #409EFF">《服务协议》</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
import { mapGetters } from 'vuex'; |
||||
|
import {getAllMenuModule, getBuyMenuModule} from '@/api/mdp/sys/modules' |
||||
|
import {calcOrder} from '@/api/mdp/sys/order' |
||||
|
|
||||
|
import aliPay from '@/assets/image/module/alipay.png'; |
||||
|
import weixinPay from '@/assets/image/module/weixin.png' |
||||
|
import Decimal from "decimal.js" // 具体文件中引入 |
||||
|
import getDecimal from '@/utils/decimalUtil.js' |
||||
|
|
||||
|
export default { |
||||
|
props: ['modules', 'ooper'], |
||||
|
data() { |
||||
|
return { |
||||
|
menuLoading: false, |
||||
|
active: "xmgl", |
||||
|
payWayOptions: [ |
||||
|
{ |
||||
|
label: '支付宝', |
||||
|
val: '2', |
||||
|
icon: aliPay, |
||||
|
isChecked: true |
||||
|
}, |
||||
|
{ |
||||
|
label: '微信', |
||||
|
val: '1', |
||||
|
icon: weixinPay, |
||||
|
isChecked: false |
||||
|
} |
||||
|
], |
||||
|
odaysOptions: [ |
||||
|
{ |
||||
|
label: '1年', |
||||
|
val: '360', |
||||
|
isHot: true, |
||||
|
isChecked: true, |
||||
|
price: '2' |
||||
|
}, |
||||
|
{ |
||||
|
label: '6个月', |
||||
|
val: '180', |
||||
|
isHot: false, |
||||
|
isChecked: false, |
||||
|
price: '2' |
||||
|
}, |
||||
|
{ |
||||
|
label: '3个月', |
||||
|
val: '90', |
||||
|
isHot: false, |
||||
|
isChecked: false, |
||||
|
price: '2' |
||||
|
}, |
||||
|
], |
||||
|
form: { |
||||
|
moduleIds:[], |
||||
|
payType: '1', |
||||
|
odays: '360', |
||||
|
label:'1年', |
||||
|
ousers:10, |
||||
|
phone: '', |
||||
|
checked: false, |
||||
|
}, |
||||
|
orders:{order:{ofinalFee:0},modules:[]}, |
||||
|
branchUsersCpd:{istatus:'1',maxUsers:50,ilvlId:'2',ilvlName:'黄金会员'} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'userInfo' |
||||
|
]), |
||||
|
}, |
||||
|
|
||||
|
watch: { |
||||
|
|
||||
|
'form.ousers':function(val,oldValue){ |
||||
|
this.calcOrder(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
formatDate(dateStr){ |
||||
|
if(dateStr){ |
||||
|
return dateStr.substring(0,10) |
||||
|
}else{ |
||||
|
return ''; |
||||
|
} |
||||
|
}, |
||||
|
formOusersChange(val){ |
||||
|
if(this.branchUsersCpd && this.branchUsersCpd.istatus=='1'){ |
||||
|
if(val<=this.branchUsersCpd.maxUsers){ |
||||
|
this.form.ousers=this.branchUsersCpd.maxUsers |
||||
|
this.$notify({position:"bottom-left",message:"您当前已拥有创建"+this.branchUsersCpd.maxUsers+"个账户资格，企业总人数不能低于"+this.branchUsersCpd.maxUsers,type:"warning"}) |
||||
|
|
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
calcOrder:function() { |
||||
|
if(!this.form.moduleIds || this.form.moduleIds.length==0){ |
||||
|
if(this.orders && this.orders.order){ |
||||
|
this.orders={order:{ofinalFee:0},moduleIds:[]} |
||||
|
} |
||||
|
return; |
||||
|
} |
||||
|
this.form.ooper=this.ooper; |
||||
|
calcOrder(this.form).then(res=>{ |
||||
|
var tips = res.data.tips; |
||||
|
if(tips.isOk){ |
||||
|
this.orders.order=res.data.data |
||||
|
this.orders.modules=res.data.modules |
||||
|
this.odaysOptions.forEach(i=>{ |
||||
|
i.price=parseInt(this.orders.order.ofinalFee/this.form.ousers/this.form.odays ) |
||||
|
}) |
||||
|
}else{ |
||||
|
this.$notify({position:"bottom-left",message:tips.msg,type:"error"}) |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
}, |
||||
|
selectItem(item) { |
||||
|
|
||||
|
if(this.ooper!='2' && item.isBuy){ |
||||
|
this.$notify({position:"bottom-left",message:"【"+item.name+"】已购买，如需调整，请进入【我的订单->加购】 处理",type:"warning"}) |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
if( item.billMode==='0'){ |
||||
|
this.$notify({position:"bottom-left",message:"【"+item.name+"】为免费开通，无须下单。",type:"warning"}) |
||||
|
return false; |
||||
|
} |
||||
|
item.isChecked=!item.isChecked; |
||||
|
if(item.isChecked==false){ |
||||
|
this.form.moduleIds=this.form.moduleIds.filter(i=>i!=item.id) |
||||
|
}else if(item.isChecked==true && !this.form.moduleIds.some(i=>i==item.id)){ |
||||
|
this.form.moduleIds.push(item.id) |
||||
|
} |
||||
|
this.calcOrder(); |
||||
|
}, |
||||
|
|
||||
|
selectPayWay(item) { |
||||
|
this.form.payType = item.val; |
||||
|
this.payWayOptions.forEach(element => { |
||||
|
element.isChecked = false; |
||||
|
if(item.val == element.val) { |
||||
|
element.isChecked = true; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
selectBuyDate(item) { |
||||
|
this.form.odays = item.val; |
||||
|
this.odaysOptions.forEach(element => { |
||||
|
element.isChecked = false; |
||||
|
if(item.val == element.val) { |
||||
|
element.isChecked = true; |
||||
|
} |
||||
|
}); |
||||
|
this.form.odays=item.val |
||||
|
this.form.label=item.label |
||||
|
this.calcOrder(); |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
getData() { |
||||
|
let obj = { |
||||
|
...this.orders, |
||||
|
...this.form, |
||||
|
opper:this.ooper, |
||||
|
} |
||||
|
return obj; |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
mounted() { |
||||
|
this.form.phone = this.userInfo.phoneno; |
||||
|
this.$mdp.getBranchInterestsDetail().then(res=>{ |
||||
|
Object.assign(this.branchUsersCpd,res.data.data); |
||||
|
if(this.branchUsersCpd.branchId && this.branchUsersCpd.istatus=='1'){ |
||||
|
this.form.ousers=this.branchUsersCpd.maxUsers |
||||
|
//this.calcOrder(); |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import './index.scss'; |
||||
|
</style> |
||||
@ -0,0 +1,164 @@ |
|||||
|
<template> |
||||
|
<div class="flagShip"> |
||||
|
<h2>购买信息</h2> |
||||
|
<span class="desc">填写你的联系方式，我们产品顾问将会尽快联系你。</span> |
||||
|
<el-form class="form" label-position="left" ref="form" :model="form" :rules="rules" label-width="80px"> |
||||
|
<el-form-item label="联系人" prop="contacts"> |
||||
|
<el-input class="inp" v-model="form.contacts"></el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="联系电话" prop="phone"> |
||||
|
<el-input class="inp" v-model="form.phone"></el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="使用人数"> |
||||
|
<el-select class="inp" v-model="form.usePeoples" placeholder="使用人数"> |
||||
|
<el-option |
||||
|
v-for="item in usePeopleOptions" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="服务需求"> |
||||
|
<el-select class="inp" multiple v-model="form.needs" placeholder="服务需求"> |
||||
|
<el-option |
||||
|
v-for="item in needOptions" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<span>想要我们提供哪些服务（可多选）</span> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
// 自定义验证 |
||||
|
const validPhone = (rule, value, callback) => { |
||||
|
const reg = /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/ |
||||
|
if (!value) { |
||||
|
callback(new Error('请输入电话号码')) |
||||
|
} else if (!reg.test(value)) { //判断用户输入的值是否符合规则 |
||||
|
callback(new Error('请输入正确的11位手机号码')) |
||||
|
} else { |
||||
|
callback() |
||||
|
} |
||||
|
} |
||||
|
return { |
||||
|
usePeopleOptions: [ |
||||
|
{ |
||||
|
label: '51-100', |
||||
|
value: '51-100' |
||||
|
}, |
||||
|
{ |
||||
|
label: '101-500', |
||||
|
value: '101-500' |
||||
|
}, |
||||
|
{ |
||||
|
label: '501-1000', |
||||
|
value: '501-1000' |
||||
|
}, |
||||
|
{ |
||||
|
label: '1000以上', |
||||
|
value: '1000以上' |
||||
|
} |
||||
|
], |
||||
|
needOptions: [ |
||||
|
{ |
||||
|
label: '预约演示', |
||||
|
value: '预约演示' |
||||
|
}, |
||||
|
{ |
||||
|
label: '产品报价', |
||||
|
value: '产品报价' |
||||
|
}, |
||||
|
{ |
||||
|
label: '部署方式', |
||||
|
value: '部署方式' |
||||
|
}, |
||||
|
{ |
||||
|
label: '新增功能', |
||||
|
value: '新增功能' |
||||
|
}, |
||||
|
{ |
||||
|
label: '其它', |
||||
|
value: '其它' |
||||
|
} |
||||
|
], |
||||
|
form: { |
||||
|
phone: '', |
||||
|
contacts: '', |
||||
|
usePeoples: '', |
||||
|
needs: [], |
||||
|
}, |
||||
|
rules: { |
||||
|
contacts: [ |
||||
|
{ required: true, message: '请输入联系人', trigger: 'blur' }, |
||||
|
], |
||||
|
phone: [ |
||||
|
{ required: true, trigger: 'blur', validator: validPhone } |
||||
|
], |
||||
|
usePeoples: [ |
||||
|
{ required: true, message: '请选择使用人数', trigger: 'blur' }, |
||||
|
], |
||||
|
needs: [ |
||||
|
{ required: true, message: '请选择服务需求', trigger: 'blur' }, |
||||
|
], |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
getData() { |
||||
|
//验证表单 |
||||
|
return new Promise((resolve, reject) => { |
||||
|
this.$refs['form'].validate((valid) => { |
||||
|
if (valid) { |
||||
|
resolve(this.form); |
||||
|
} else { |
||||
|
reject(new Error('前检查表单项是否填写正确')) |
||||
|
} |
||||
|
}); |
||||
|
}) |
||||
|
}, |
||||
|
clearForm() { |
||||
|
this.form.phone = ""; |
||||
|
this.form.contacts = ""; |
||||
|
this.form.usePeoples = ""; |
||||
|
this.form.needs = []; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.flagShip { |
||||
|
margin-top: 30px; |
||||
|
h2 { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
.desc { |
||||
|
color: #7D7D7D; |
||||
|
} |
||||
|
.form { |
||||
|
margin-top: 40px; |
||||
|
.inp { |
||||
|
width: 280px; |
||||
|
} |
||||
|
|
||||
|
span { |
||||
|
margin-left: 78px; |
||||
|
color: #7D7D7D; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,367 @@ |
|||||
|
.full_continer { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
position: relative; |
||||
|
.banner { |
||||
|
margin-top: 35px; |
||||
|
height: 32px; |
||||
|
text-align: center; |
||||
|
border-bottom: 32px solid; |
||||
|
border-image: -webkit-linear-gradient(-180deg, rgba(255,255,255,0.00) 0%,#D8E0F5 40%, rgba(255,255,255,0.00) 99%) 2 2 2 2; |
||||
|
p { |
||||
|
line-height: 32px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
h2 { |
||||
|
font-size: 28px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
color: #303030; |
||||
|
} |
||||
|
|
||||
|
.flux_continer { |
||||
|
width: 80%; |
||||
|
height: 100%; |
||||
|
margin: 0 auto; |
||||
|
.content { |
||||
|
.top_desc { |
||||
|
h2 { |
||||
|
margin-top: 60px; |
||||
|
} |
||||
|
p { |
||||
|
margin-top: 34px; |
||||
|
color: #7D7D7D; |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.version { |
||||
|
margin-top: 38px; |
||||
|
.version_item { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
.oItem:nth-child(2) { |
||||
|
background-color: #F8F6F4; |
||||
|
} |
||||
|
.oItem { |
||||
|
position: relative; |
||||
|
margin-top: 24px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
width: 220px; |
||||
|
height: 110px; |
||||
|
margin-right: 20px; |
||||
|
border-radius: 5px; |
||||
|
background-color: #F4F5F8; |
||||
|
cursor: pointer; |
||||
|
img { |
||||
|
width: 110px; |
||||
|
height: 110px; |
||||
|
} |
||||
|
.desc { |
||||
|
margin-left: 8px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
font-size: 16px; |
||||
|
p:nth-child(2) { |
||||
|
margin-top: 8px; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.select { |
||||
|
font-size: 30px; |
||||
|
position: absolute; |
||||
|
right: 5px; |
||||
|
top: 2px; |
||||
|
color: #409EFF; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.submit { |
||||
|
margin-top: 35px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
.enterprise { |
||||
|
.sys_type { |
||||
|
margin-top: 52px; |
||||
|
.sys_desc { |
||||
|
display: flex; |
||||
|
height: 46px; |
||||
|
width: 100%; |
||||
|
h2 { |
||||
|
margin-right: 44px; |
||||
|
line-height: 46px; |
||||
|
} |
||||
|
.selectItem { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
.item { |
||||
|
display: flex; |
||||
|
margin-right: 60px; |
||||
|
height: 46px; |
||||
|
align-items: center; |
||||
|
cursor: pointer; |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
.active { |
||||
|
font-size: 22px; |
||||
|
color: rgb(116, 155, 242); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.sys_modules { |
||||
|
margin-top: 30px; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
.active { |
||||
|
border: 2px solid rgb(116, 155, 242) !important; |
||||
|
} |
||||
|
.module { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
background: #FFFFFF; |
||||
|
margin-right: 30px; |
||||
|
margin-top:30px; |
||||
|
.head { |
||||
|
width: 180px; |
||||
|
height: 200px; |
||||
|
border: 1px solid #E3E4E6; |
||||
|
border-radius: 8px; |
||||
|
position: relative; |
||||
|
cursor: pointer; |
||||
|
.module_top { |
||||
|
display: flex; |
||||
|
height: 170px; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
text-align: center; |
||||
|
img { |
||||
|
width: 90px; |
||||
|
height: 90px; |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
span { |
||||
|
color: #606060; |
||||
|
margin-top: 20px; |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
} |
||||
|
.module_bottom { |
||||
|
.selected { |
||||
|
font-size: 30px; |
||||
|
position: absolute; |
||||
|
right: 10px; |
||||
|
top:5px; |
||||
|
color: #409EFF; |
||||
|
} |
||||
|
span{ |
||||
|
font-size: 14px; |
||||
|
position: absolute; |
||||
|
left: 10px; |
||||
|
top: 5px; |
||||
|
color: #409EFF; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.footer { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.buy_count { |
||||
|
margin-top: 32px; |
||||
|
h2 { |
||||
|
span { |
||||
|
font-size: 18px; |
||||
|
margin-left: 5px; |
||||
|
color: #C7C7C7; |
||||
|
} |
||||
|
} |
||||
|
.buy_count_items { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
margin-top: 30px; |
||||
|
.oItem { |
||||
|
margin-right: 30px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
width: 200px; |
||||
|
height: 120px; |
||||
|
border: 2px solid #E3E4E6; |
||||
|
justify-content: center; |
||||
|
border-radius: 6px; |
||||
|
.item_header { |
||||
|
height: 40px; |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
line-height: 30px; |
||||
|
color: #606060; |
||||
|
border-bottom: 2px solid #E3E4E6; |
||||
|
} |
||||
|
.item_bottom { |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
line-height: 60px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.buy_date { |
||||
|
margin-top: 50px; |
||||
|
h2 { |
||||
|
margin-bottom: 30px; |
||||
|
} |
||||
|
.buy_date_items { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
.oItem { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
width: 200px; |
||||
|
height: 144px; |
||||
|
border-radius: 8px; |
||||
|
margin-right: 30px; |
||||
|
border: 2px solid #E3E4E6; |
||||
|
cursor: pointer; |
||||
|
.header { |
||||
|
position: relative; |
||||
|
height: 44px; |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
line-height: 44px; |
||||
|
color: #424141; |
||||
|
border-bottom: 2px solid #E3E4E6; |
||||
|
.select { |
||||
|
font-size: 30px; |
||||
|
position: absolute; |
||||
|
right: 10px; |
||||
|
top: 5px; |
||||
|
color: #409EFF; |
||||
|
} |
||||
|
} |
||||
|
.bottom { |
||||
|
height: 100px; |
||||
|
width: 100%; |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
img { |
||||
|
width: 113px; |
||||
|
height: 40px; |
||||
|
} |
||||
|
p { |
||||
|
margin-top: 12px; |
||||
|
} |
||||
|
.normal { |
||||
|
margin-top: 57px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.pay_way { |
||||
|
margin-top: 50px; |
||||
|
h2 { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
.pay_way_items { |
||||
|
display: flex; |
||||
|
.oItem { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
width: 200px; |
||||
|
height: 80px; |
||||
|
margin-right: 30px; |
||||
|
border: 2px solid #E3E4E6; |
||||
|
border-radius: 8px; |
||||
|
margin-top: 5px; |
||||
|
position: relative; |
||||
|
cursor: pointer; |
||||
|
img { |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
margin: 13px 18px 13px 40px; |
||||
|
} |
||||
|
.select { |
||||
|
font-size: 30px; |
||||
|
position: absolute; |
||||
|
right: 5px; |
||||
|
top: 5px; |
||||
|
color: #409EFF; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.phone { |
||||
|
margin-top: 10px !important; |
||||
|
width: 440px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.pay_allAmount { |
||||
|
margin-top: 30px; |
||||
|
h2 { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
.allAmount { |
||||
|
font-size: 22px; |
||||
|
font-weight: bold; |
||||
|
color: #FA5A55; |
||||
|
margin-bottom: 20px; |
||||
|
b { |
||||
|
font-size: 38px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.avatar-container { |
||||
|
height: 50px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
.avatar-wrapper { |
||||
|
cursor: pointer; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
.user-avatar { |
||||
|
height: 34px; |
||||
|
width: 34px; |
||||
|
border-radius: 50%; |
||||
|
margin-right: 12px; |
||||
|
} |
||||
|
.username{ |
||||
|
color: #7D7D7D; |
||||
|
font-size: 18px; |
||||
|
margin-right: 2px; |
||||
|
} |
||||
|
.el-icon-caret-bottom { |
||||
|
font-size: 22px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,207 @@ |
|||||
|
<template> |
||||
|
<div class="full_continer"> |
||||
|
<div class="banner"> |
||||
|
<p>购买流程: 1.选择模块 》2.确认订单 》 3.支付 》 4.完成</p> |
||||
|
</div> |
||||
|
|
||||
|
<div class="flux_continer"> |
||||
|
|
||||
|
<orderSkeleton v-if="menuLoading" /> |
||||
|
|
||||
|
<div class="content" v-else> |
||||
|
<div class="top_desc"> |
||||
|
<h2>购买订单</h2> |
||||
|
<p>团队名: {{userInfo.branchName?userInfo.branchName:userInfo.branchId}}</p> |
||||
|
</div> |
||||
|
|
||||
|
<div class="version"> |
||||
|
<h2>选择版本</h2> |
||||
|
<div class="version_item"> |
||||
|
<div @click="selectVersion(item)" class="oItem" v-for="(item, index) in version" :key="index"> |
||||
|
<img :src='item.img'> |
||||
|
<div class="desc"> |
||||
|
<p>{{item.name}}</p> |
||||
|
<p>{{item.desc}}</p> |
||||
|
</div> |
||||
|
<i v-if="item.isChecked" class="select el-icon-success"></i> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="version_all"> |
||||
|
<flag-ship ref="flagship" v-if="currentSelectVersion == '旗舰版'"></flag-ship> |
||||
|
<enterprise ref="enterprise" :modules="modules" v-if="currentSelectVersion == '企业版'" :ooper="'1'"></enterprise> |
||||
|
</div> |
||||
|
|
||||
|
<el-button :loading="submitLoading" @click="submitOrder" size="larget" class="submit" type="primary"> |
||||
|
{{currentSelectVersion == '企业版' ? '提交订单' : '提交信息'}} |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
//图标 |
||||
|
import EnterpriseVersionIcon from '@/assets/image/module/mo_enterprise.png' |
||||
|
import FlagShipIcon from '@/assets/image/module/mo_flagship.png' |
||||
|
//组件 |
||||
|
import FlagShip from './flagShip' |
||||
|
import Enterprise from './enterprise' |
||||
|
import orderSkeleton from './components/orderSkeleton' |
||||
|
import {getAllMenuModule, getBuyMenuModule} from '@/api/mdp/sys/modules' |
||||
|
import {modulesOfIcon} from "../layout/ModulesMenu/modulesOfIcon.js"; |
||||
|
import {createFlagShipOrder} from '@/api/mdp/sys/order'; |
||||
|
|
||||
|
import { mapGetters } from 'vuex' |
||||
|
|
||||
|
export default { |
||||
|
components: {FlagShip, Enterprise, orderSkeleton}, |
||||
|
|
||||
|
computed: { |
||||
|
...mapGetters([ 'userInfo' ]), |
||||
|
|
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
version: [ |
||||
|
{ |
||||
|
name: '企业版', |
||||
|
desc: '(10人起购)', |
||||
|
isChecked: true, |
||||
|
img: EnterpriseVersionIcon |
||||
|
}, |
||||
|
{ |
||||
|
name: '旗舰版', |
||||
|
desc: '(50人起购)', |
||||
|
isChecked: false, |
||||
|
img: FlagShipIcon |
||||
|
} |
||||
|
], |
||||
|
currentSelectVersion: '企业版', |
||||
|
menuLoading: false, |
||||
|
modules: null, |
||||
|
submitLoading: false, |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
selectVersion(item) { |
||||
|
this.currentSelectVersion = item.name; |
||||
|
this.version.forEach(element => { |
||||
|
element.isChecked = false; |
||||
|
if(item.name == element.name) { |
||||
|
element.isChecked = true; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
submitOrder() { |
||||
|
//验证参数 |
||||
|
if(this.currentSelectVersion == "企业版") { |
||||
|
let data = this.$refs.enterprise.getData(); |
||||
|
//验证手机号是否填写 |
||||
|
if(data.phone == "" || data.phone == null || data.phone == undefined) { |
||||
|
this.$notify({ |
||||
|
message: '请输入手机号', |
||||
|
type: 'warning' |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
//验证是否同意服务协议 |
||||
|
if(!data.checked) { |
||||
|
this.$notify({ |
||||
|
message: '请先同意服务协议', |
||||
|
type: 'warning' |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
//保存购买模块信息到本地 |
||||
|
if(data.moduleIds.length <= 0) { |
||||
|
this.$notify({ |
||||
|
message: '请选择要购买的模块', |
||||
|
type: 'warning' |
||||
|
}); |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
window.localStorage.setItem("BUY_MODULES", JSON.stringify(data)) |
||||
|
this.$router.push('/my/order/create') |
||||
|
}else { |
||||
|
let flagData = this.$refs.flagship.getData(); |
||||
|
flagData.then((res) => { |
||||
|
//创建订单 |
||||
|
res.needs = JSON.stringify(res.needs); |
||||
|
this.submitLoading = true; |
||||
|
createFlagShipOrder(res).then(res => { |
||||
|
if(res.data.tips.isOk){ |
||||
|
this.$notify.success("信息已提交，稍后我们将会联系您"); |
||||
|
this.$refs.flagship.clearForm(); |
||||
|
}else{ |
||||
|
this.$notify.error(res.data.tips.msg); |
||||
|
} |
||||
|
}).catch(err => { |
||||
|
this.$notify.error(err.msg); |
||||
|
}).finally(() => { |
||||
|
this.submitLoading = false; |
||||
|
}) |
||||
|
}).catch(err => { |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//获取所有模块 |
||||
|
getAllModules() { |
||||
|
this.menuLoading = true |
||||
|
getAllMenuModule({}).then(res => { |
||||
|
let tempData = res.data.data; |
||||
|
tempData.forEach(i=>{ |
||||
|
i.isChecked=false |
||||
|
i.musers=10 |
||||
|
i.isBuy=false |
||||
|
i.endTime='' |
||||
|
}) |
||||
|
getBuyMenuModule({}).then(res2 => { |
||||
|
let branchModules = res2.data.data; |
||||
|
tempData.forEach(k => { |
||||
|
branchModules.forEach(element => { |
||||
|
if(k.id == element.moduleId && element.status=='1') { |
||||
|
k.isBuy = true; |
||||
|
k.musers=element.musers |
||||
|
k.endTime=element.endTime |
||||
|
} |
||||
|
}); |
||||
|
modulesOfIcon.forEach(element => { |
||||
|
if(k.id == element.id) { |
||||
|
k.logoUrl = element.logoUrl; |
||||
|
} |
||||
|
}); |
||||
|
}) |
||||
|
let xmMenus = tempData.filter(res => {return res.mcate == '2'}) |
||||
|
let oaMunus = tempData.filter(res => {return res.mcate == '1'}) |
||||
|
let mallMenus = tempData.filter(res => {return res.mcate == '3'}) |
||||
|
this.modules = { |
||||
|
"xmgl": xmMenus, |
||||
|
"oa" : oaMunus, |
||||
|
"mall": mallMenus |
||||
|
} |
||||
|
}) |
||||
|
}).finally(() => this.menuLoading = false) |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
mounted(){ |
||||
|
this.getAllModules(); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import './index.scss'; |
||||
|
</style> |
||||
@ -0,0 +1,15 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
订单列表 |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,65 @@ |
|||||
|
<template> |
||||
|
<div class="result"> |
||||
|
<el-result icon="success"> |
||||
|
<template slot="title"> |
||||
|
<p style="font-size: 24px;">恭喜您，支付成功！</p> |
||||
|
</template> |
||||
|
<template class="subTitle" slot="subTitle"> |
||||
|
<p style="margin-bottom: 6px;font-size: 16px;">您已成功支付￥ {{params.total_amount}} 元</p> |
||||
|
<p style="margin-bottom: 6px;font-size: 16px;">订单号：{{params.out_trade_no}} （查看订单）</p> |
||||
|
</template> |
||||
|
<template slot="extra"> |
||||
|
<el-button type="primary" size="larget" @click="goBuyAgain()">继续购买</el-button> |
||||
|
<el-button size="larget" @click="returnHome()">返回首页</el-button> |
||||
|
</template> |
||||
|
</el-result> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
params: {}, |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
created() { |
||||
|
const href = window.location.href; |
||||
|
this.params = this.urlParamsHash(href); |
||||
|
console.log(this.params, "params"); |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
returnHome() { |
||||
|
this.$router.push({path:'/dashboard'}) |
||||
|
}, |
||||
|
|
||||
|
goBuyAgain() { |
||||
|
this.$router.push({path:'/my/order/index'}) |
||||
|
}, |
||||
|
|
||||
|
urlParamsHash(url) { |
||||
|
var params = {} |
||||
|
var h |
||||
|
var hash = url.slice(url.indexOf('?') + 1).split('&') |
||||
|
for(var i = 0; i < hash.length; i++) { |
||||
|
h = hash[i].split('=') |
||||
|
params[h[0]] = h[1] |
||||
|
} |
||||
|
return params; |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.result { |
||||
|
height: 600px; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,134 @@ |
|||||
|
<template> |
||||
|
<div class="full_continer"> |
||||
|
<div class="banner"> |
||||
|
<p>购买流程: 1.选择模块 》2.确认订单 》 3.支付 》 4.完成</p> |
||||
|
</div> |
||||
|
|
||||
|
<div class="flux_continer"> |
||||
|
|
||||
|
<orderSkeleton v-if="menuLoading" /> |
||||
|
|
||||
|
<div class="content" v-else> |
||||
|
<div class="top_desc"> |
||||
|
<h2>续费订单</h2> |
||||
|
<p>团队名: {{userInfo.branchName?userInfo.branchName:userInfo.branchId}}</p> |
||||
|
</div> |
||||
|
<div class="version_all"> |
||||
|
<enterprise ref="enterprise" :modules="modules" :ooper="'2'"></enterprise> |
||||
|
</div> |
||||
|
<el-button :loading="submitLoading" @click="submitOrder" size="larget" class="submit" type="primary"> |
||||
|
提交订单 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
//组件 |
||||
|
import Enterprise from './enterprise' |
||||
|
import orderSkeleton from './components/orderSkeleton' |
||||
|
import {getAllMenuModule, getBuyMenuModule} from '@/api/mdp/sys/modules' |
||||
|
import {modulesOfIcon} from "../layout/ModulesMenu/modulesOfIcon.js"; |
||||
|
|
||||
|
import { mapGetters } from 'vuex' |
||||
|
|
||||
|
export default { |
||||
|
components: {Enterprise, orderSkeleton}, |
||||
|
|
||||
|
computed: { |
||||
|
...mapGetters([ 'userInfo' ]), |
||||
|
|
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
menuLoading: false, |
||||
|
modules: null, |
||||
|
submitLoading: false, |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
submitOrder() { |
||||
|
let data = this.$refs.enterprise.getData(); |
||||
|
//验证手机号是否填写 |
||||
|
if(data.phone == "" || data.phone == null || data.phone == undefined) { |
||||
|
this.$notify({ |
||||
|
message: '请输入手机号', |
||||
|
type: 'warning' |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
//验证是否同意服务协议 |
||||
|
if(!data.checked) { |
||||
|
this.$notify({ |
||||
|
message: '请先同意服务协议', |
||||
|
type: 'warning' |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
//保存购买模块信息到本地 |
||||
|
if(data.moduleIds.length <= 0) { |
||||
|
this.$notify({ |
||||
|
message: '请选择要购买的模块', |
||||
|
type: 'warning' |
||||
|
}); |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
window.localStorage.setItem("BUY_MODULES", JSON.stringify(data)) |
||||
|
this.$router.push('/my/order/create') |
||||
|
}, |
||||
|
|
||||
|
//获取所有模块 |
||||
|
getAllModules() { |
||||
|
this.menuLoading = true |
||||
|
getAllMenuModule({}).then(res => { |
||||
|
let tempData = res.data.data; |
||||
|
tempData.forEach(i=>{ |
||||
|
i.isChecked=false |
||||
|
i.musers=10 |
||||
|
i.isBuy=false |
||||
|
i.endTime='' |
||||
|
}) |
||||
|
getBuyMenuModule({}).then(res2 => { |
||||
|
let branchModules = res2.data.data; |
||||
|
tempData.forEach(k => { |
||||
|
branchModules.forEach(element => { |
||||
|
if(k.id == element.moduleId && element.status=='1') { |
||||
|
k.isBuy = true; |
||||
|
k.musers=element.musers |
||||
|
k.endTime=element.endTime |
||||
|
} |
||||
|
}); |
||||
|
modulesOfIcon.forEach(element => { |
||||
|
if(k.id == element.id) { |
||||
|
k.logoUrl = element.logoUrl; |
||||
|
} |
||||
|
}); |
||||
|
}) |
||||
|
let xmMenus = tempData.filter(res => {return res.mcate == '2'}) |
||||
|
let oaMunus = tempData.filter(res => {return res.mcate == '1'}) |
||||
|
let mallMenus = tempData.filter(res => {return res.mcate == '3'}) |
||||
|
this.modules = { |
||||
|
"xmgl": xmMenus, |
||||
|
"oa" : oaMunus, |
||||
|
"mall": mallMenus |
||||
|
} |
||||
|
}) |
||||
|
}).finally(() => this.menuLoading = false) |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
mounted(){ |
||||
|
this.getAllModules(); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import './index.scss'; |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue