xiejiahao
4 years ago
23 changed files with 1476 additions and 339 deletions
-
25config/index.js
-
1src/App.vue
-
6src/api/mdp/pay/pay.js
-
1src/api/mdp/sys/modules.js
-
6src/api/mdp/sys/order.js
-
BINsrc/assets/image/module/xm/xm_gongshi.png
-
5src/common/config.js
-
6src/components/ModulesMenu/index.scss
-
3src/components/ModulesMenu/modulesOfIcon.js
-
9src/router/routes_my_work.js
-
18src/router/routes_order.js
-
2src/views/login/components/login.vue
-
73src/views/myWork/message/index.scss
-
78src/views/myWork/message/index.vue
-
84src/views/order/components/orderSkeleton.vue
-
223src/views/order/createOrder.vue
-
399src/views/order/enterprise.vue
-
143src/views/order/flagShip.vue
-
367src/views/order/index.scss
-
298src/views/order/index.vue
-
15src/views/order/list.vue
-
35src/views/order/paySuccess.vue
@ -0,0 +1,6 @@ |
|||||
|
import axios from '@/utils/request' |
||||
|
import config from '@/common/config' |
||||
|
let base = config.getPayBasePath(); |
||||
|
|
||||
|
export const aliPay = params => { return axios.post(`${base}/alipay/uniOrder`, params) } |
||||
|
export const weixinPay = params => { return axios.post(`${base}/wxpay/uniOrder/native`, params) } |
||||
@ -0,0 +1,6 @@ |
|||||
|
import axios from '@/utils/request' |
||||
|
import config from '@/common/config' |
||||
|
let base = config.getSysBasePath(); |
||||
|
|
||||
|
export const createOrder = params => { return axios.post(`${base}/mdp/mo/moOrder/create`, params) }; |
||||
|
|
||||
|
After Width: 800 | Height: 800 | Size: 32 KiB |
@ -0,0 +1,73 @@ |
|||||
|
.message_card { |
||||
|
font-size: 24px; |
||||
|
font-weight: bold; |
||||
|
color: #303030; |
||||
|
line-height: 54px; |
||||
|
.message_type { |
||||
|
cursor: pointer; |
||||
|
margin-right: 58px; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.message_type_active { |
||||
|
color: #4779F6; |
||||
|
} |
||||
|
|
||||
|
.message_type_active::after { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
width: 100px; // 边框的宽度 |
||||
|
height: 2px; |
||||
|
border-radius: 3px; |
||||
|
left: 50%; //距离 view 标签的距离 |
||||
|
bottom: -10px; |
||||
|
background-color: #4779F6; // 颜色 |
||||
|
transform: translateX(-50%); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.message_content { |
||||
|
margin-top: 20px; |
||||
|
background: #fff; |
||||
|
height: calc(100vh - 172px); |
||||
|
overflow: auto; |
||||
|
cursor: pointer; |
||||
|
padding: 20px; |
||||
|
.message_content_box { |
||||
|
.title { |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
color: #303030; |
||||
|
line-height: 54px; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.title::after { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
width: 12px; |
||||
|
height: 12px; |
||||
|
border-radius: 50%; |
||||
|
background-color: #E52929; |
||||
|
top: 8px; |
||||
|
} |
||||
|
|
||||
|
.date { |
||||
|
color: #606060; |
||||
|
} |
||||
|
|
||||
|
.text { |
||||
|
display: inline-block; |
||||
|
margin-top: 20px; |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
color: #606060; |
||||
|
line-height: 14px; |
||||
|
} |
||||
|
.line { |
||||
|
margin: 30px 0 15px 0; |
||||
|
border-bottom: 1px solid #D7D7D7; |
||||
|
opacity: 0.43; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,78 @@ |
|||||
|
<template> |
||||
|
<div class="m_container"> |
||||
|
<div class="m_content"> |
||||
|
<div class="message_card"> |
||||
|
<span :class="{'message_type_active' : currentType == 1}" class="message_type" @click="currentType = 1">全部消息</span> |
||||
|
<span :class="{'message_type_active' : currentType == 2}" class="message_type " @click="currentType = 2">审批消息</span> |
||||
|
</div> |
||||
|
<div class="message_content"> |
||||
|
<div class="message_content_box" v-for="(item, index) in messageData" :key="index"> |
||||
|
<p class="title">{{item.type}}</p> |
||||
|
<p class="date">{{item.time}}</p> |
||||
|
<span class="text">{{item.text}}</span> |
||||
|
<div class="line"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
currentType: 1, |
||||
|
messageData: [ |
||||
|
{ |
||||
|
type: '审批消息', |
||||
|
time: '2022-04-26 12:00:00', |
||||
|
text: '李孝基发起申请领用办公电脑，因工作要求，自己没有电脑所以申请使用公司现有的huaWei办公电脑' |
||||
|
}, |
||||
|
{ |
||||
|
type: '系统消息', |
||||
|
time: '2022-04-26 12:00:00', |
||||
|
text: '李孝基发起申请领用办公电脑，因工作要求，自己没有电脑所以申请使用公司现有的huaWei办公电脑' |
||||
|
}, |
||||
|
{ |
||||
|
type: '审批消息', |
||||
|
time: '2022-04-26 12:00:00', |
||||
|
text: '李孝基发起申请领用办公电脑，因工作要求，自己没有电脑所以申请使用公司现有的huaWei办公电脑' |
||||
|
}, |
||||
|
{ |
||||
|
type: '审批消息', |
||||
|
time: '2022-04-26 12:00:00', |
||||
|
text: '李孝基发起申请领用办公电脑，因工作要求，自己没有电脑所以申请使用公司现有的huaWei办公电脑' |
||||
|
}, |
||||
|
{ |
||||
|
type: '审批消息', |
||||
|
time: '2022-04-26 12:00:00', |
||||
|
text: '李孝基发起申请领用办公电脑，因工作要求，自己没有电脑所以申请使用公司现有的huaWei办公电脑' |
||||
|
}, |
||||
|
{ |
||||
|
type: '审批消息', |
||||
|
time: '2022-04-26 12:00:00', |
||||
|
text: '李孝基发起申请领用办公电脑，因工作要求，自己没有电脑所以申请使用公司现有的huaWei办公电脑' |
||||
|
}, |
||||
|
|
||||
|
], |
||||
|
|
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods() { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
mounted: { |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import '../common.scss'; |
||||
|
@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,223 @@ |
|||||
|
<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="top_desc"> |
||||
|
<h2>购买信息</h2> |
||||
|
<p>团队名: 擎勤科技</p> |
||||
|
</div> |
||||
|
|
||||
|
<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="购买版本">企业版</el-descriptions-item> |
||||
|
<el-descriptions-item label="创建人">谢家豪</el-descriptions-item> |
||||
|
<!-- <el-descriptions-item label="手机号码">18826103122</el-descriptions-item> --> |
||||
|
<el-descriptions-item label="支付方式">{{data.payWay == 'aliPay' ? '支付宝' : '微信'}}</el-descriptions-item> |
||||
|
</el-descriptions> |
||||
|
</div> |
||||
|
<div class="table"> |
||||
|
<el-table |
||||
|
size="larget" |
||||
|
border |
||||
|
:data="data.data" |
||||
|
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="产品名称" |
||||
|
> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="num" |
||||
|
label="账号数量" |
||||
|
width="120"> |
||||
|
</el-table-column> |
||||
|
<!-- <el-table-column |
||||
|
prop="city" |
||||
|
label="单价" |
||||
|
width="120"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="address" |
||||
|
label="有效期" |
||||
|
width="300"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="zip" |
||||
|
label="总金额" |
||||
|
> |
||||
|
</el-table-column> --> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="bottom"> |
||||
|
<span class="allAmount"> |
||||
|
总金额: <b>{{data.amount}}￥</b> |
||||
|
</span> |
||||
|
<el-button size="larget">上一步</el-button> |
||||
|
<el-button size="larget" type="primary" @click="createOrder">确认支付</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import {createOrder} from '@/api/mdp/sys/order' |
||||
|
import {aliPay, weixinPay} from '@/api/mdp/pay/pay' |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
data: null, |
||||
|
createOrderLonding: false |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
createOrder() { |
||||
|
// this.$router.push('/my/order/paySuccess') |
||||
|
//调取下单接口 |
||||
|
console.log(this.data, 'data'); |
||||
|
//来源s |
||||
|
this.data.osource = "1"; |
||||
|
//订单类型 |
||||
|
this.data.otype = "1"; |
||||
|
//备注 |
||||
|
this.data.remark = ""; |
||||
|
this.data.name = "模块开通订单" |
||||
|
this.createOrderLonding = true; |
||||
|
createOrder(this.data).then(res => { |
||||
|
if(res.data.tips.isOk){ |
||||
|
console.log(res, "res--->"); |
||||
|
//获取订单号 |
||||
|
let orderId = res.data.data; |
||||
|
if(this.data.payway == 'aliPay') { |
||||
|
this.toAliPay(orderId); |
||||
|
return; |
||||
|
} |
||||
|
if(this.data.payway == 'weixinPay') { |
||||
|
this.toWeixinPay(orderId); |
||||
|
return; |
||||
|
} |
||||
|
}else{ |
||||
|
this.$message.error(res.data.tips.msg); |
||||
|
} |
||||
|
}).catch(err => { |
||||
|
this.$message.error(err.msg); |
||||
|
}).finally(() => { |
||||
|
this.createOrderLonding = false; |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
toAliPay(orderId) { |
||||
|
let params = { |
||||
|
id: orderId, |
||||
|
otype: 1, |
||||
|
returnUrl: "www.baidu.com" |
||||
|
} |
||||
|
aliPay(params).then(res => { |
||||
|
console.log(res, "res---->"); |
||||
|
const div = document.createElement("divform"); |
||||
|
div.innerHTML = res.data.data.htmlStr; |
||||
|
document.body.appendChild(div); |
||||
|
document.forms[0].submit(); |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
toWeixinPay(orderId) { |
||||
|
let params = { |
||||
|
orderId: orderId |
||||
|
} |
||||
|
weixinPay(params).then(res => { |
||||
|
console.log(res, "res---->"); |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
}, |
||||
|
|
||||
|
created() { |
||||
|
let data = JSON.parse(window.localStorage.getItem("BUY_MODULES")); |
||||
|
this.data = data |
||||
|
console.log(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 { |
||||
|
padding: 20px; |
||||
|
.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,399 @@ |
|||||
|
<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"> |
||||
|
<div class="module" v-for="(item, index) in menus[active]" :key="index" > |
||||
|
<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.isChecked == true" :class="{module_bottom_active: item.isChecked == true}" class="module_bottom"> |
||||
|
<i class="selected el-icon-check"></i> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="footer" v-if="item.isChecked == true"> |
||||
|
<el-input-number style="width: 180px;" @change="numChange(item)" v-model="item.num" :min="10" :max="99999" ></el-input-number> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="buy_count"> |
||||
|
<h2> |
||||
|
购买数量 |
||||
|
<span>(购买账号不能少于10人)</span> |
||||
|
</h2> |
||||
|
|
||||
|
<div class="buy_count_items"> |
||||
|
<div class="oItem" v-for="(item, index) in totalList" :key="index"> |
||||
|
<div class="item_header"> |
||||
|
<p>{{item.name}}</p> |
||||
|
</div> |
||||
|
<div class="item_bottom"> |
||||
|
<span>{{item.val}}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="buy_date"> |
||||
|
<h2>期限选择</h2> |
||||
|
<div class="buy_date_items"> |
||||
|
<div class="oItem" @click="selectBuyDate(item)" v-for="(item, index) in useTimeOptions" :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>{{allAmount}}</b>/年</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 aliPay from '@/assets/image/module/alipay.png'; |
||||
|
import weixinPay from '@/assets/image/module/weixin.png' |
||||
|
import Decimal from "decimal.js" // 具体文件中引入 |
||||
|
import { months } from 'moment'; |
||||
|
|
||||
|
export default { |
||||
|
props: ['menus'], |
||||
|
data() { |
||||
|
return { |
||||
|
menuLoading: false, |
||||
|
active: "xmgl", |
||||
|
payWayOptions: [ |
||||
|
{ |
||||
|
label: '支付宝', |
||||
|
val: 'aliPay', |
||||
|
icon: aliPay, |
||||
|
isChecked: true |
||||
|
}, |
||||
|
{ |
||||
|
label: '微信', |
||||
|
val: 'weixinPay', |
||||
|
icon: weixinPay, |
||||
|
isChecked: false |
||||
|
} |
||||
|
], |
||||
|
useTimeOptions: [ |
||||
|
{ |
||||
|
label: '1年', |
||||
|
val: '12', |
||||
|
isHot: true, |
||||
|
isChecked: true, |
||||
|
price: '200.00' |
||||
|
}, |
||||
|
{ |
||||
|
label: '6个月', |
||||
|
val: '6', |
||||
|
isHot: false, |
||||
|
isChecked: false, |
||||
|
price: '200.00' |
||||
|
}, |
||||
|
{ |
||||
|
label: '3个月', |
||||
|
val: '3', |
||||
|
isHot: false, |
||||
|
isChecked: false, |
||||
|
price: '200.00' |
||||
|
}, |
||||
|
], |
||||
|
form: { |
||||
|
payway: 'aliPay', |
||||
|
usetime: '12', |
||||
|
phone: '', |
||||
|
checked: false, |
||||
|
amount: 0 |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
computed: { |
||||
|
totalList() { |
||||
|
if(this.menus == null) return; |
||||
|
let obj = [{key: 'xmgl',name: '项目管理', val : 0},{key: 'oa',name: '智慧协同办公系统',val : 0},{key: 'mall',name: '商城',val : 0}] |
||||
|
let xmCount = 0; |
||||
|
let oaConut = 0; |
||||
|
let mallCount = 0; |
||||
|
this.menus.xmgl.forEach(m => { |
||||
|
if(m.isChecked) { |
||||
|
xmCount += m.num; |
||||
|
} |
||||
|
}); |
||||
|
this.menus.oa.forEach(m => { |
||||
|
if(m.isChecked) { |
||||
|
oaConut += m.num; |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
this.menus.mall.forEach(m => { |
||||
|
if(m.isChecked) { |
||||
|
mallCount += m.num; |
||||
|
} |
||||
|
}); |
||||
|
obj[0].val = xmCount; |
||||
|
obj[1].val = oaConut; |
||||
|
obj[2].val = mallCount; |
||||
|
return obj |
||||
|
}, |
||||
|
|
||||
|
allAmount() { |
||||
|
if(this.menus == null) return; |
||||
|
//计费规则 |
||||
|
let tempData = []; |
||||
|
let xm = this.menus.xmgl.filter(res => {return res.isChecked == true;}) |
||||
|
let oa = this.menus.oa.filter(res => {return res.isChecked == true;}) |
||||
|
let mall = this.menus.mall.filter(res => {return res.isChecked == true;}) |
||||
|
tempData = Array.concat(xm).concat(oa).concat(mall); |
||||
|
|
||||
|
//计算价格，每个单独计算 |
||||
|
let amount = new Decimal(0); |
||||
|
let allNum = 0; |
||||
|
//人均费用 * 数量 * 数量折扣优惠 * 月份折扣优惠 |
||||
|
tempData.forEach(t => { |
||||
|
let numDiscount = 1; |
||||
|
let monthDiscount = 1; |
||||
|
allNum += t.num; |
||||
|
|
||||
|
//免费 |
||||
|
if(t.billMode == 0) { |
||||
|
amount = amount.add(0); |
||||
|
} |
||||
|
|
||||
|
if(t.billMode == 1) { |
||||
|
if(t.discount != null && t.discount != "" && t.discount != undefined) { |
||||
|
let discount = JSON.parse(t.discount); |
||||
|
//用户数量折扣 |
||||
|
numDiscount = this.getNumDiscount(discount.userNum, t.num); |
||||
|
//用户月份折扣 |
||||
|
monthDiscount = this.getMonthDiscount(discount.months, this.form.usetime); |
||||
|
} |
||||
|
amount = amount.add(new Decimal(t.uniFee).mul(new Decimal(t.num)).mul(numDiscount).mul(monthDiscount)); |
||||
|
} |
||||
|
|
||||
|
//总包模式 |
||||
|
if(t.billMode == 2) { |
||||
|
amount = amount.add(new Decimal(t.fee)); |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
this.form.amount = amount; |
||||
|
|
||||
|
return amount; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
watch: { |
||||
|
allAmount: { |
||||
|
handler(val, oval) { |
||||
|
let tempData = []; |
||||
|
let xm = this.menus.xmgl.filter(res => {return res.isChecked == true;}) |
||||
|
let oa = this.menus.oa.filter(res => {return res.isChecked == true;}) |
||||
|
let mall = this.menus.mall.filter(res => {return res.isChecked == true;}) |
||||
|
tempData = Array.concat(xm).concat(oa).concat(mall); |
||||
|
let yearAmount = new Decimal(0); |
||||
|
let halfYearAmount = new Decimal(0); |
||||
|
let quarter = new Decimal(0); |
||||
|
let allNum = 0; |
||||
|
|
||||
|
tempData.forEach(t => { |
||||
|
let numDiscount = 1; |
||||
|
let monthDiscount = 1; |
||||
|
allNum += t.num; |
||||
|
if(t.discount != null && t.discount != "" && t.discount != undefined) { |
||||
|
let discount = JSON.parse(t.discount); |
||||
|
//用户数量折扣 |
||||
|
numDiscount = this.getNumDiscount(discount.userNum, t.num); |
||||
|
this.useTimeOptions.forEach(element => { |
||||
|
//用户月份折扣 |
||||
|
monthDiscount = this.getMonthDiscount(discount.months, element.val); |
||||
|
if(element.val == "12") { |
||||
|
yearAmount = yearAmount.add(new Decimal(t.uniFee).mul(new Decimal(t.num)).mul(numDiscount).mul(monthDiscount)); |
||||
|
} |
||||
|
|
||||
|
if(element.val == "6") { |
||||
|
halfYearAmount = halfYearAmount.add(new Decimal(t.uniFee).mul(new Decimal(t.num)).mul(numDiscount).mul(monthDiscount)); |
||||
|
} |
||||
|
|
||||
|
if(element.val == "3") { |
||||
|
quarter = quarter.add(new Decimal(t.uniFee).mul(new Decimal(t.num)).mul(numDiscount).mul(monthDiscount)); |
||||
|
} |
||||
|
}); |
||||
|
}else { |
||||
|
yearAmount = yearAmount.add(new Decimal(t.uniFee).mul(new Decimal(t.num))); |
||||
|
halfYearAmount = halfYearAmount.add(new Decimal(t.uniFee).mul(new Decimal(t.num))); |
||||
|
quarter = quarter.add(new Decimal(t.uniFee).mul(new Decimal(t.num))); |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
this.useTimeOptions.forEach(element => { |
||||
|
if(element.val == "12" && yearAmount != 0) { |
||||
|
element.price = yearAmount.div(allNum).toFixed(2, Decimal.ROUND_HALF_UP); |
||||
|
} |
||||
|
if(element.val == "6" && halfYearAmount != 0) { |
||||
|
element.price = halfYearAmount.div(allNum).toFixed(2, Decimal.ROUND_HALF_UP); |
||||
|
} |
||||
|
if(element.val == "3" && quarter != 0) { |
||||
|
element.price = quarter.div(allNum).toFixed(2, Decimal.ROUND_HALF_UP); |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
immediate: true |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
|
||||
|
getNumDiscount(discount, num) { |
||||
|
let sale = new Decimal(1); |
||||
|
let nums = discount.split("\n"); |
||||
|
var map = new Map(); |
||||
|
nums.forEach(element => { |
||||
|
let t = element.split(":"); |
||||
|
map.set(t[0], t[1]); |
||||
|
}); |
||||
|
|
||||
|
map.forEach(function(value,key){ |
||||
|
let t = key.split("-"); |
||||
|
if(num >= t[0] && num <= t[1]) { |
||||
|
sale = new Decimal(value).div(new Decimal(100)) |
||||
|
} |
||||
|
}); |
||||
|
return sale; |
||||
|
}, |
||||
|
|
||||
|
getMonthDiscount(discount, month) { |
||||
|
let sale = new Decimal(1); |
||||
|
let condition = discount.split("\n"); |
||||
|
var map = new Map(); |
||||
|
condition.forEach(element => { |
||||
|
let t = element.split(":"); |
||||
|
map.set(t[0], t[1]); |
||||
|
}); |
||||
|
map.forEach(function(value, key){ |
||||
|
if(new Decimal(month).comparedTo(key) >= 0) { |
||||
|
sale = new Decimal(value).div(new Decimal(100)) |
||||
|
} |
||||
|
}); |
||||
|
return sale; |
||||
|
}, |
||||
|
|
||||
|
numChange(item) { |
||||
|
item.isChecked = true; |
||||
|
}, |
||||
|
|
||||
|
selectItem(item) { |
||||
|
if(this.active == 'xmgl') { |
||||
|
this.menus.xmgl.forEach(element => { |
||||
|
if(element.id == item.id) { |
||||
|
element.isChecked ? element.isChecked = !element.isChecked : element.isChecked = true; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
if(this.active == 'mall') { |
||||
|
this.menus.mall.forEach(element => { |
||||
|
if(element.id == item.id) { |
||||
|
element.isChecked ? element.isChecked = !element.isChecked : element.isChecked = true; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
if(this.active == 'oa') { |
||||
|
this.menus.oa.forEach(element => { |
||||
|
if(element.id == item.id) { |
||||
|
element.isChecked ? element.isChecked = !element.isChecked : element.isChecked = true; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
selectPayWay(item) { |
||||
|
this.form.payway = item.val; |
||||
|
this.payWayOptions.forEach(element => { |
||||
|
element.isChecked = false; |
||||
|
if(item.val == element.val) { |
||||
|
element.isChecked = true; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
selectBuyDate(item) { |
||||
|
this.form.usetime = item.val; |
||||
|
this.useTimeOptions.forEach(element => { |
||||
|
element.isChecked = false; |
||||
|
if(item.val == element.val) { |
||||
|
element.isChecked = true; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
getForm() { |
||||
|
let tempData = []; |
||||
|
let xm = this.menus.xmgl.filter(res => {return res.isChecked == true;}) |
||||
|
let oa = this.menus.oa.filter(res => {return res.isChecked == true;}) |
||||
|
let mall = this.menus.mall.filter(res => {return res.isChecked == true;}) |
||||
|
tempData = Array.concat(xm).concat(oa).concat(mall); |
||||
|
|
||||
|
let obj = { |
||||
|
data: tempData, |
||||
|
...this.form |
||||
|
} |
||||
|
|
||||
|
return obj; |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
created() { |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import './index.scss'; |
||||
|
</style> |
||||
@ -0,0 +1,143 @@ |
|||||
|
<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() { |
||||
|
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: { |
||||
|
contacts: '', |
||||
|
usePeoples: '', |
||||
|
needs: [], |
||||
|
}, |
||||
|
rules: { |
||||
|
contacts: [ |
||||
|
{ required: true, message: '请输入联系人', trigger: 'blur' }, |
||||
|
], |
||||
|
phone: [ |
||||
|
{ required: true, message: '请输入联系电话', trigger: 'blur' }, |
||||
|
], |
||||
|
usePeoples: [ |
||||
|
{ required: true, message: '请选择使用人数', trigger: 'blur' }, |
||||
|
], |
||||
|
needs: [ |
||||
|
{ required: true, message: '请选择服务需求', trigger: 'blur' }, |
||||
|
], |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
getForm() { |
||||
|
//验证表单 |
||||
|
console.log("验证表单"); |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
}, |
||||
|
|
||||
|
|
||||
|
} |
||||
|
</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,15 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
订单列表 |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,35 @@ |
|||||
|
<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;">您已成功支付￥299.00元</p> |
||||
|
<p style="margin-bottom: 6px;font-size: 16px;">支付方式： 支付宝</p> |
||||
|
<p style="margin-bottom: 6px;font-size: 16px;">订单号：2022042417501233 （查看订单）</p> |
||||
|
</template> |
||||
|
<template slot="extra"> |
||||
|
<el-button type="primary" size="larget">继续购买</el-button> |
||||
|
<el-button size="larget">返回首页</el-button> |
||||
|
</template> |
||||
|
</el-result> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
|
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.result { |
||||
|
height: 600px; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue