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