Browse Source

下单优化

master
陈裕财 4 years ago
parent
commit
dc832d8268
  1. 14
      config/index.js
  2. 2
      src/api/mdp/sys/order.js
  3. 39
      src/views/order/createOrder.vue
  4. 259
      src/views/order/enterprise.vue
  5. 2
      src/views/order/index.vue

14
config/index.js

@ -17,13 +17,13 @@ module.exports = {
'^/api/m1/xm': '/xm' '^/api/m1/xm': '/xm'
} }
}, },
// '/api/m1/sys': {
// target: 'http://localhost:7015',
// changeOrigin: true,
// pathRewrite: {
// '^/api/m1/sys': '/sys'
// }
// },
'/api/m1/sys': {
target: 'http://localhost:7015',
changeOrigin: true,
pathRewrite: {
'^/api/m1/sys': '/sys'
}
},
// '/api/m1/pay': { // '/api/m1/pay': {
// target: 'http://localhost:7125', // target: 'http://localhost:7125',

2
src/api/mdp/sys/order.js

@ -3,6 +3,8 @@ import config from '@/common/config'
let base = config.getSysBasePath(); let base = config.getSysBasePath();
export const createOrder = params => { return axios.post(`${base}/mdp/mo/moOrder/create`, params) }; export const createOrder = params => { return axios.post(`${base}/mdp/mo/moOrder/create`, params) };
export const calcOrder = params => { return axios.get(`${base}/mdp/mo/moOrder/calcOrder`, { params: params })};
export const createFlagShipOrder = params => { return axios.post(`${base}/mdp/mo/moOrderFligship/add`, params) }; export const createFlagShipOrder = params => { return axios.post(`${base}/mdp/mo/moOrderFligship/add`, params) };

39
src/views/order/createOrder.vue

@ -7,7 +7,7 @@
<div class="content"> <div class="content">
<div class="top_desc"> <div class="top_desc">
<h2>购买信息</h2> <h2>购买信息</h2>
<p>团队名:&nbsp;&nbsp;擎勤科技</p>
<p>团队名:&nbsp;&nbsp;{{userInfo.branchName?userInfo.branchName:userInfo.branchId}}</p>
</div> </div>
<div class="order_detail"> <div class="order_detail">
@ -19,7 +19,7 @@
<div class="desc"> <div class="desc">
<el-descriptions size="larget" :column="3" > <el-descriptions size="larget" :column="3" >
<el-descriptions-item label="购买版本">企业版</el-descriptions-item> <el-descriptions-item label="购买版本">企业版</el-descriptions-item>
<el-descriptions-item label="创建人">谢家豪</el-descriptions-item>
<el-descriptions-item label="创建人">{{userInfo.username}}</el-descriptions-item>
<!-- <el-descriptions-item label="手机号码">18826103122</el-descriptions-item> --> <!-- <el-descriptions-item label="手机号码">18826103122</el-descriptions-item> -->
<el-descriptions-item label="支付方式">{{data.payway == 'aliPay' ? '支付宝' : '微信'}}</el-descriptions-item> <el-descriptions-item label="支付方式">{{data.payway == 'aliPay' ? '支付宝' : '微信'}}</el-descriptions-item>
</el-descriptions> </el-descriptions>
@ -28,9 +28,10 @@
<el-table <el-table
size="larget" size="larget"
border border
:data="data.data"
:data="data.modules"
style="width: 100%" style="width: 100%"
height="250"> height="250">
<!--
<el-table-column <el-table-column
prop="name" prop="name"
label="产品类型" label="产品类型"
@ -40,15 +41,26 @@
scope.row.mcate == '2' ? '项目管理' : '商城'}}</span> scope.row.mcate == '2' ? '项目管理' : '商城'}}</span>
</template> </template>
</el-table-column> </el-table-column>
-->
<el-table-column <el-table-column
prop="name" prop="name"
label="产品名称"
label="产品名称" min-width="150"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="num"
prop="musers"
label="账号数量" label="账号数量"
width="120">
min-width="120">
</el-table-column>
<el-table-column
prop="orginFee"
label="原价"
min-width="120">
</el-table-column>
<el-table-column
prop="finalFee"
label="折扣价"
min-width="120">
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
@ -56,7 +68,7 @@
<div class="bottom"> <div class="bottom">
<span class="allAmount"> <span class="allAmount">
总金额: <b>{{data.amount}}</b>
总金额: <b>{{data.order.ofinalFee}}</b>
</span> </span>
<el-button size="larget" @click="returnPage">上一步</el-button> <el-button size="larget" @click="returnPage">上一步</el-button>
<el-button size="larget" type="primary" :loading="createOrderLonding" @click="createOrder">确认支付</el-button> <el-button size="larget" type="primary" :loading="createOrderLonding" @click="createOrder">确认支付</el-button>
@ -83,13 +95,22 @@
</template> </template>
<script> <script>
import { mapGetters } from 'vuex';
import {createOrder} from '@/api/mdp/sys/order' import {createOrder} from '@/api/mdp/sys/order'
import {aliPay, weixinPay, checkWxPayStatus} from '@/api/mdp/pay/pay' import {aliPay, weixinPay, checkWxPayStatus} from '@/api/mdp/pay/pay'
export default { export default {
computed: {
...mapGetters([
'userInfo'
]),
},
data() { data() {
return { return {
data: null,
data: {},
createOrderLonding: false, createOrderLonding: false,
weixinPayVisible: false, weixinPayVisible: false,
codeUrl: "" codeUrl: ""
@ -112,7 +133,7 @@ export default {
createOrder(this.data).then(res => { createOrder(this.data).then(res => {
if(res.data.tips.isOk){ if(res.data.tips.isOk){
// //
let orderId = res.data.data;
let orderId = res.data.data.id;
if(this.data.payway == 'aliPay') { if(this.data.payway == 'aliPay') {
this.toAliPay(orderId); this.toAliPay(orderId);
return; return;

259
src/views/order/enterprise.vue

@ -27,42 +27,32 @@
<i class="selected el-icon-check"></i> <i class="selected el-icon-check"></i>
</div> </div>
</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>
</div> </div>
<!-- <div class="buy_count">
<div class="buy_count">
<h2> <h2>
购买数量 购买数量
<span>(购买账号不能少于10人)</span> <span>(购买账号不能少于10人)</span>
</h2> </h2>
<div class="buy_count_items"> <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>
<el-input-number v-model="form.ousers"></el-input-number>
</div> </div>
</div> </div>
</div> -->
<div class="buy_date"> <div class="buy_date">
<h2>期限选择</h2> <h2>期限选择</h2>
<div class="buy_date_items"> <div class="buy_date_items">
<div class="oItem" @click="selectBuyDate(item)" v-for="(item, index) in useTimeOptions" :key="index">
<div class="oItem" @click="selectBuyDate(item)" v-for="(item, index) in odaysOptions" :key="index">
<div class="header"> <div class="header">
{{item.label}} {{item.label}}
<i v-if="item.isChecked" class="select el-icon-success"></i> <i v-if="item.isChecked" class="select el-icon-success"></i>
</div> </div>
<div class="bottom"> <div class="bottom">
<img v-if="item.isHot" src="@/assets/image/module/hot.png" alt=""> <img v-if="item.isHot" src="@/assets/image/module/hot.png" alt="">
<p>{{item.price}}/</p>
<p>{{item.price}}/</p>
</div> </div>
</div> </div>
</div> </div>
@ -82,7 +72,7 @@
<div class="pay_allAmount"> <div class="pay_allAmount">
<h2>订单总额</h2> <h2>订单总额</h2>
<p class="allAmount"><b>{{allAmount}}</b>/</p>
<p class="allAmount"><b>{{orders.order?orders.order.ofinalFee:''}}</b>/</p>
<el-checkbox v-model="form.checked">同意</el-checkbox> <a style="font-size: 14px;color: #409EFF">服务协议</a> <el-checkbox v-model="form.checked">同意</el-checkbox> <a style="font-size: 14px;color: #409EFF">服务协议</a>
</div> </div>
</div> </div>
@ -91,6 +81,8 @@
<script> <script>
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import {getAllMenuModule, getBuyMenuModule} from '@/api/mdp/sys/modules' import {getAllMenuModule, getBuyMenuModule} from '@/api/mdp/sys/modules'
import {calcOrder} from '@/api/mdp/sys/order'
import aliPay from '@/assets/image/module/alipay.png'; import aliPay from '@/assets/image/module/alipay.png';
import weixinPay from '@/assets/image/module/weixin.png' import weixinPay from '@/assets/image/module/weixin.png'
import Decimal from "decimal.js" // import Decimal from "decimal.js" //
@ -117,36 +109,38 @@ export default {
isChecked: false isChecked: false
} }
], ],
useTimeOptions: [
odaysOptions: [
{ {
label: '1年', label: '1年',
val: '12',
val: '360',
isHot: true, isHot: true,
isChecked: true, isChecked: true,
price: '200.00'
price: '2'
}, },
{ {
label: '6个月', label: '6个月',
val: '6',
val: '180',
isHot: false, isHot: false,
isChecked: false, isChecked: false,
price: '200.00'
price: '2'
}, },
{ {
label: '3个月', label: '3个月',
val: '3',
val: '90',
isHot: false, isHot: false,
isChecked: false, isChecked: false,
price: '200.00'
price: '2'
}, },
], ],
form: { form: {
moduleIds:[],
payway: 'aliPay', payway: 'aliPay',
usetime: '12',
odays: '360',
ousers:10,
phone: '', phone: '',
checked: false, checked: false,
amount: 0
}
},
orders:{order:null,modules:[]},
} }
}, },
@ -154,203 +148,33 @@ export default {
...mapGetters([ ...mapGetters([
'userInfo' 'userInfo'
]), ]),
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);
if(tempData.length == 0) return 0;
//
let amount = new Decimal(0);
// * * *
tempData.forEach(t => {
let numDiscount = 1;
let monthDiscount = 1;
//
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(getDecimal(t.uniFee, 0).mul(new Decimal(t.num)).mul(numDiscount).mul(monthDiscount));
}
//
if(t.billMode == 2) {
amount = amount.add(getDecimal(t.fee, 0));
}
})
this.form.amount = amount;
return amount;
}
}, },
watch: { watch: {
allAmount: {
handler(val, oval) {
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);
if(tempData.length == 0) return;
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(getDecimal(t.uniFee, 0).mul(new Decimal(t.num)).mul(numDiscount).mul(monthDiscount));
}
if(element.val == "6") {
halfYearAmount = halfYearAmount.add(getDecimal(t.uniFee, 0).mul(new Decimal(t.num)).mul(numDiscount).mul(monthDiscount));
}
if(element.val == "3") {
quarter = quarter.add(getDecimal(t.uniFee, 0).mul(new Decimal(t.num)).mul(numDiscount).mul(monthDiscount));
}
});
}else {
yearAmount = yearAmount.add(getDecimal(t.uniFee, 0).mul(new Decimal(t.num)));
halfYearAmount = halfYearAmount.add(getDecimal(t.uniFee, 0).mul(new Decimal(t.num)));
quarter = quarter.add(getDecimal(t.uniFee, 0).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;
'form.ousers':function(){
this.calcOrder();
} }
}, },
methods: { 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;
calcOrder:function() {
calcOrder(this.form).then(res=>{
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 )
})
})
}, },
selectItem(item) { 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;
}
});
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) { selectPayWay(item) {
@ -364,24 +188,21 @@ export default {
}, },
selectBuyDate(item) { selectBuyDate(item) {
this.form.usetime = item.val;
this.useTimeOptions.forEach(element => {
this.form.odays = item.val;
this.odaysOptions.forEach(element => {
element.isChecked = false; element.isChecked = false;
if(item.val == element.val) { if(item.val == element.val) {
element.isChecked = true; element.isChecked = true;
} }
}); });
this.form.odays=item.val
this.calcOrder();
}, },
getForm() { 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 = { let obj = {
data: tempData,
...this.orders,
...this.form ...this.form
} }
return obj; return obj;

2
src/views/order/index.vue

@ -113,7 +113,7 @@ export default {
} }
// //
if(data.data.length <= 0) {
if(data.moduleIds.length <= 0) {
this.$message({ this.$message({
message: '请选择要购买的模块', message: '请选择要购买的模块',
type: 'warning' type: 'warning'

Loading…
Cancel
Save