陈裕财
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