You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
420 lines
13 KiB
420 lines
13 KiB
<template> |
|
<view class="page"> |
|
<template v-for="c in courses"> |
|
<view v-if="c.list.length" class="block"> |
|
<view class="l-title">{{ c.name }}</view> |
|
<uni-icons class="arrow" type="top" size="20" color="#007EFF" @click="toggle(c)"></uni-icons> |
|
<view v-show="!c.shrink"> |
|
<view v-for="(item, i) in c.list"> |
|
<view class="pro-name"> |
|
<view class="left"> |
|
<image class="icon" :src="$util.getIcon(item)" mode="widthFix"></image> |
|
{{ item.productName }} |
|
</view> |
|
<uni-icons class="del" type="trash" size="25" color="#ADADAD" @click="delCourse(c, i)"></uni-icons> |
|
</view> |
|
<view class="form-list"> |
|
<view class="line"> |
|
<view class="name">产品类型</view> |
|
<view class="val">{{ productTypes.find(e => e.id === item.productType).name }}</view> |
|
</view> |
|
<view :class="['line req', {err: err === 'periodOfUse' + item.dataOrCourseId + item.authority}]"> |
|
<view class="name">使用期限</view> |
|
<input class="period" type="number" v-model="item.periodOfUse" placeholder="请输入" @input="calcDate(item, !item.authority)" @change="handleErr(item, 'periodOfUse')"> |
|
<view class="val unit" @click="selectUnit(item)"> |
|
<text>{{ units.find(e => e.id === item.options).text }}</text> |
|
<image class="icon" src="@/static/image/arrow-down.png" mode="widthFix"></image> |
|
</view> |
|
</view> |
|
<view :class="['line req', {err: err === 'startTime' + item.dataOrCourseId + item.authority}]"> |
|
<view class="name">起止日期</view> |
|
<uni-datetime-picker type="date" v-model="item.startTime" :border="false" @change="calcDate(item)"> |
|
<view :class="['ph', {val: item.startTime}]"> |
|
{{ item.endTime ? item.startTime + ' - ' + item.endTime : item.startTime}} |
|
</view> |
|
</uni-datetime-picker> |
|
</view> |
|
<view :class="['line req', {err: err === 'accountNum' + item.dataOrCourseId + item.authority}]"> |
|
<view class="name">数量</view> |
|
<view v-if="item.authority" class="val">1</view> |
|
<input v-else type="number" v-model="item.accountNum" placeholder="请输入账号数量" @input="calcFinalPrice(item)" @change="handleErr(item, 'accountNum')"> |
|
</view> |
|
<view class="line"> |
|
<view class="name">{{ item.authority ? '市场价' : '市场单价' }}</view> |
|
<view class="val">{{ item.marketValue }}元</view> |
|
</view> |
|
<view class="line"> |
|
<view class="name">结算价</view> |
|
<view class="val">{{ item.settlementPrice }}元</view> |
|
</view> |
|
<view class="line"> |
|
<view class="name">折扣率</view> |
|
<view class="val">{{ item.discountRate }}</view> |
|
</view> |
|
<view class="line"> |
|
<view class="name">平台服务费</view> |
|
<view class="val">{{ item.serviceFee }}元</view> |
|
</view> |
|
<view :class="['line req', {err: err === 'finalPrice' + item.dataOrCourseId + item.authority}]"> |
|
<view class="name">成交价</view> |
|
<view class="inline"> |
|
<input type="number" v-model="item.finalPrice" placeholder="请输入" @input="calcFinalValue(item)" @change="handleErr(item, 'finalPrice')"> |
|
元 |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
<view class="btn-wrap"> |
|
<view class="btn" @click="submit">确定</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { getOrderOtherTime } from '@/apis/modules/order.js' |
|
export default { |
|
data() { |
|
return { |
|
orderType: 1, |
|
customerId: '', |
|
timer: null, |
|
units: [{ |
|
text: '日', |
|
id: 0 |
|
}, { |
|
text: '月', |
|
id: 1 |
|
}, { |
|
text: '年', |
|
id: 2 |
|
}], |
|
unitText: ['日', '月', '年'], |
|
productTypes: [ |
|
{ |
|
name: '实训课程', |
|
id: 1 |
|
}, |
|
{ |
|
name: '理论课程', |
|
id: 0 |
|
}, |
|
{ |
|
name: '数据产品', |
|
id: 2 |
|
} |
|
], |
|
courses: {} , // 上一页缓存的产品 |
|
orderRepeat: [], |
|
repeatMsg: '', |
|
err: '' |
|
} |
|
}, |
|
onShow() { |
|
const pages = getCurrentPages() |
|
const { options } = pages[pages.length - 1] |
|
this.orderType = options.orderType |
|
this.customerId = options.customerId |
|
this.handleProduct() |
|
}, |
|
methods: { |
|
// 转换产品列表 |
|
handleProduct() { |
|
const list = uni.getStorageSync('courses') |
|
const courses = { |
|
practice: { |
|
shrink: false, |
|
name: '实训课程产品', |
|
list: [] |
|
}, |
|
theory: { |
|
shrink: false, |
|
name: '理论课程产品', |
|
list: [] |
|
}, |
|
data: { |
|
shrink: false, |
|
name: '数据产品', |
|
list: [] |
|
} |
|
} |
|
// 3个分类的课程分别push到不同数组(0->理论 1-实训 2 数据产品) |
|
list.map(e => { |
|
const type = e.productType |
|
!type ? |
|
courses.theory.list.push(e) : |
|
type === 1 ? |
|
courses.practice.list.push(e) : |
|
courses.data.list.push(e) |
|
|
|
}) |
|
this.courses = courses |
|
try { |
|
uni.removeStorageSync('courses') |
|
} catch (e) {} |
|
}, |
|
selectUnit(item) { |
|
const that = this |
|
uni.showActionSheet({ |
|
title: '标题', |
|
itemList: that.unitText, |
|
success: ({ tapIndex }) => { |
|
item.options = tapIndex |
|
that.calcDate(item) |
|
} |
|
}) |
|
}, |
|
showUnit(i) { |
|
this.$refs.unit[i].show() |
|
}, |
|
// 收缩产品 |
|
toggle(c) { |
|
c.shrink = !c.shrink |
|
}, |
|
// 删除课程 |
|
delCourse(c, i) { |
|
uni.showModal({ |
|
title: '提示', |
|
content: '确定要删除吗？', |
|
success(res) { |
|
res.confirm && c.list.splice(i, 1) |
|
} |
|
}) |
|
}, |
|
// 使用期限转换以及计算剩余天数 |
|
calcDate(row, fromData) { |
|
clearTimeout(this.timer) |
|
this.timer = setTimeout(() => { |
|
const { periodOfUse, options } = row |
|
let optionsData = 0 |
|
if (periodOfUse) { |
|
if (options == 1){ |
|
optionsData = periodOfUse === '12' ? 31536000000 : periodOfUse*30*24*60*60*1000 |
|
} else if (options == 2){ |
|
optionsData = periodOfUse*365*24*60*60*1000 |
|
} else { |
|
optionsData = periodOfUse*24*60*60*1000 |
|
} |
|
} |
|
let time = new Date(row.startTime).getTime() |
|
let endTime = time + optionsData |
|
row.endTime = time + optionsData |
|
let dt = new Date(endTime) |
|
row.endTime = (dt.getFullYear()) + "-" + (dt.getMonth() + 1) + "-" + (dt.getDate()) |
|
let endYear = endTime - time |
|
let endYears = endYear/1000/60/60/24 |
|
row.remainingPeriod = endYears |
|
const unit = row.options // 使用期限单位 |
|
const useUnit = row.periodOfUse // 使用期限 |
|
// 计算市场价 |
|
const price = row.marketPrice // 市场单价 |
|
// 结算单价是元/年，所以如果选择的不是年，要进行换算（日：/365,月：/12) |
|
row.marketValue = (!unit ? |
|
price / 365 * useUnit : |
|
unit === 1 ? |
|
price / 12 * useUnit : |
|
price * useUnit).toFixed(2) |
|
this.dealSettlePrice(row) |
|
// 只有改变了起止日期才需要调接口查询订单，该接口作用是把开始时间传过去，会返回一个提示或者时间，如果是时间，则把时间+1天，如果是提示，则无法保存 |
|
if (!fromData) { |
|
const cId = row.dataOrCourseId |
|
const date = new Date(row.startTime) |
|
const orderRepeat = this.orderRepeat |
|
getOrderOtherTime({ |
|
customerId: this.customerId, |
|
id: cId, |
|
startTime: this.$util.formatDate(date, 'yyyy-MM-dd'), |
|
endTime: row.endTime |
|
}).then(res => { |
|
orderRepeat.includes(cId) && orderRepeat.splice(orderRepeat.findIndex(e => e === cId), 1) |
|
if (res.endTime) { |
|
let time = new Date(res.endTime) |
|
time = new Date(time.setDate(time.getDate() + 1)) |
|
row.startTime = this.$util.formatDate(time, 'yyyy-MM-dd') |
|
} |
|
}).catch(res => { |
|
this.repeatMsg = res.message |
|
orderRepeat.includes(cId) || orderRepeat.push(cId) |
|
}) |
|
} |
|
// 折扣率 |
|
this.calcDiscount(row) |
|
}, 500) |
|
}, |
|
// 计算结算价及平台服务费 |
|
dealSettlePrice(row) { |
|
// 如果是试用，结算价和平台服务费都是0 |
|
if (this.orderType == 2) { |
|
row.settlementPrice = 0 |
|
row.serviceFee = 0 |
|
} else { |
|
const unit = row.options // 使用期限单位 |
|
const useUnit = row.periodOfUse // 使用期限 |
|
let sPrice = '' |
|
if (row.settlementMethod == 0) { |
|
// 结算单价。计算规则：结算单价（**元/年）*购买时长（单位年）*数量(课程为1，数据为账号数量) |
|
const priceUnit = row.settlementPriceUnit |
|
sPrice = ((!unit ? |
|
priceUnit / 365 * useUnit : |
|
unit === 1 ? |
|
priceUnit / 12 * useUnit : |
|
priceUnit * useUnit) * (row.authority ? |
|
1 : |
|
row.accountNum)).toFixed((2)) |
|
} else { |
|
// 比例分成。计算规则：成交价*商务分成比例 |
|
sPrice = (row.finalPrice * row.businessProportion / 100).toFixed((2)) |
|
} |
|
row.settlementPrice = this.$util.handleNaN(sPrice) |
|
// 平台服务费（结算价*10%） |
|
if (row.settlementPrice) { |
|
row.serviceFee = (row.settlementPrice * 0.1).toFixed(2) |
|
} |
|
} |
|
}, |
|
// 计算折扣率 |
|
calcDiscount(row) { |
|
const price = row.authority ? row.finalPrice : row.finalValue |
|
const { marketValue } = row |
|
// (原价-现价)÷原价 x100% |
|
if (price) row.discountRate = marketValue != 0 ? ((marketValue - price) / marketValue * 100).toFixed(2) + '%' : '0%' |
|
}, |
|
// 成交价修改后，计算成交单价，数据才需要 计算规则：成交价/账号数/时间（成交单价为元/账号/年，所以时间要换算成年的单位去计算） |
|
calcFinalValue(row) { |
|
clearTimeout(this.timer) |
|
this.timer = setTimeout(() => { |
|
const { authority, periodOfUse, options, accountNum, finalPrice } = row |
|
if (!authority && periodOfUse && accountNum && finalPrice) { |
|
row.finalValue = (finalPrice / accountNum / periodOfUse).toFixed(2) |
|
} |
|
// 折扣率 |
|
this.calcDiscount(row) |
|
this.dealSettlePrice(row) |
|
}, 500) |
|
}, |
|
// 计算成交价。计算规则：成交单价*账号数*时间（成交单价为元/账号/年，所以时间要换算成年的单位去计算） |
|
calcFinalPrice(row) { |
|
clearTimeout(this.timer) |
|
this.timer = setTimeout(() => { |
|
const { finalValue, accountNum, periodOfUse, finalPrice } = row |
|
if (periodOfUse) { |
|
if (accountNum) { |
|
// 有成交单价，则成交价=成交单价*账号数*时间 |
|
if (finalValue) { |
|
row.finalPrice = Math.round(finalValue * periodOfUse * accountNum) |
|
} else if (!finalValue && finalPrice) { |
|
// 有成交价，没有成交单价，则成交单价=成交价/账号数/时间 |
|
row.finalValue = (finalPrice / periodOfUse / accountNum).toFixed(2) |
|
this.calcDiscount(row) |
|
} |
|
} else if (finalValue && finalPrice && !row.authority) { |
|
// 有成交价、成交单价，没有数量，则数量=成交价/时间/成交单价 |
|
row.accountNum = Math.floor(finalPrice / periodOfUse / finalValue) |
|
} |
|
} |
|
this.dealSettlePrice(row) |
|
}, 500) |
|
}, |
|
// 处理错误提示 |
|
handleErr(e, val) { |
|
if (val + e.dataOrCourseId + e.authority === this.err) this.err = '' |
|
}, |
|
// 确定 |
|
submit() { |
|
const courses = this.courses |
|
const list = [] |
|
let msg = '' |
|
// 全部产品push到一个数组，方便校验 |
|
for (const i in courses) { |
|
list.push(...courses[i].list) |
|
} |
|
console.log(11, list) |
|
// 必填校验 |
|
for (const i in list) { |
|
const e = list[i] |
|
const suf = e.dataOrCourseId + '' + e.authority |
|
if (e.periodOfUse === '') { |
|
this.err = 'periodOfUse' + suf |
|
msg = '请输入使用期限！' |
|
break |
|
} |
|
if (!e.startTime) { |
|
this.err = 'startTime' + suf |
|
msg = '请选择起止日期！' |
|
break |
|
} |
|
if (e.accountNum === '') { |
|
this.err = 'accountNum' + suf |
|
msg = '请输入数量！' |
|
break |
|
} |
|
if (e.finalPrice === '') { |
|
this.err = 'finalPrice' + suf |
|
msg = '请输入成交价！' |
|
break |
|
} |
|
} |
|
console.log(33, this.err) |
|
if (msg) return this.$util.errMsg(msg) |
|
if (this.orderRepeat.length) return this.$util.errMsg(this.repeatMsg) // 有重复订单不能提交 |
|
uni.setStorageSync('courses', this.courses) |
|
uni.navigateBack() |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.page { |
|
padding-bottom: 130rpx; |
|
-webkit-overflow-scrolling: touch; |
|
} |
|
.block { |
|
position: relative; |
|
padding: 0; |
|
.l-title { |
|
margin: 0 24rpx; |
|
} |
|
} |
|
.arrow { |
|
position: absolute; |
|
top: 30rpx; |
|
right: 30rpx; |
|
} |
|
.pro-name { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
padding: 14rpx 24rpx; |
|
font-size: 30rpx; |
|
color: #333; |
|
background: linear-gradient(90deg, #FFF5E5 0%, #FFFFFF 100%); |
|
.left { |
|
display: inline-flex; |
|
align-items: center; |
|
} |
|
.icon { |
|
width: 60rpx; |
|
height: 60rpx; |
|
margin-right: 12rpx; |
|
border-radius: 10rpx; |
|
} |
|
} |
|
.form-list { |
|
padding: 0 24rpx; |
|
border-top: 0; |
|
.period { |
|
text-align: center; |
|
} |
|
.unit { |
|
display: inline-flex; |
|
align-items: center; |
|
.icon { |
|
width: 28rpx; |
|
margin-left: 20rpx; |
|
} |
|
} |
|
} |
|
</style>
|
|
|