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.
266 lines
8.4 KiB
266 lines
8.4 KiB
3 years ago
|
<template>
|
||
|
|
<view class="page">
|
||
|
|
<view class="block">
|
||
|
|
<view class="l-title">基本信息</view>
|
||
|
|
<uni-icons class="arrow" type="top" size="20" color="#007EFF"></uni-icons>
|
||
|
|
<view v-for="(item, i) in courses">
|
||
|
|
<view class="pro-name">
|
||
|
|
<view class="left">
|
||
|
|
<image class="icon" src="../../static/image/course1.png" mode=""></image>
|
||
|
|
{{ item.productName }}
|
||
|
|
</view>
|
||
|
|
<uni-icons class="del" type="trash" size="25" color="#ADADAD" @click="delCourse(i)"></uni-icons>
|
||
|
|
</view>
|
||
|
|
<view class="form-list">
|
||
|
|
<view class="line">
|
||
|
|
<view class="name">产品类型</view>
|
||
|
|
<view class="val">{{ item.provinceName }}</view>
|
||
|
|
</view>
|
||
|
|
<view class="line">
|
||
|
|
<view class="name">使用期限</view>
|
||
|
|
<input type="text" v-model="item.periodOfUse" placeholder="请输入" @change="calcDate(item)">
|
||
|
|
</view>
|
||
|
|
<view class="line">
|
||
|
|
<view class="name">使用期限单位</view>
|
||
|
|
<uni-data-picker class="picker-input" placeholder="请选择" popup-title="请选择" preload :clear-icon="false" :localdata="units" v-model="item.options" @change="calcDate(item)"></uni-data-picker>
|
||
|
|
</view>
|
||
|
|
<view class="line req">
|
||
|
|
<view class="name">起止日期</view>
|
||
|
|
<uni-datetime-picker type="date" v-model="item.startTime" :border="false">
|
||
|
|
<view :class="['ph', {val: item.startTime}]">
|
||
|
|
{{ item.endTime ? item.startTime + ' - ' + item.endTime : item.startTime}}
|
||
|
|
</view>
|
||
|
|
</uni-datetime-picker>
|
||
|
|
</view>
|
||
|
|
<view class="line req">
|
||
|
|
<view class="name">数量</view>
|
||
|
|
<view v-if="item.authority" class="val">1</view>
|
||
|
|
<input v-else type="text" v-model="item.accountNum" placeholder="请输入" @change="calcFinalPrice(item)">
|
||
|
|
</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">元</view>
|
||
|
|
</view>
|
||
|
|
<view class="line req">
|
||
|
|
<view class="name">成交价</view>
|
||
|
|
<view class="inline">
|
||
|
|
<input type="text" v-model="item.finalPrice" placeholder="请输入" @change="calcFinalValue(item)">
|
||
|
|
元
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="btn-wrap">
|
||
|
|
<view class="btn" @click="submit">确定</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
units: [{
|
||
|
|
text: '日',
|
||
|
|
value: 0
|
||
|
|
}, {
|
||
|
|
text: '月',
|
||
|
|
value: 1
|
||
|
|
}, {
|
||
|
|
text: '年',
|
||
|
|
value: 2
|
||
|
|
}],
|
||
|
|
courses: uni.getStorageSync('courses') // 上一页缓存的产品
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(option) {
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 删除课程
|
||
|
|
delCourse(i) {
|
||
|
|
const that = this
|
||
|
|
uni.showModal({
|
||
|
|
title: '提示',
|
||
|
|
content: '确定要删除吗？',
|
||
|
|
success(res) {
|
||
|
|
res.confirm && that.courses.splice(i, 1)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 使用期限转换以及计算剩余天数
|
||
|
|
calcDate(row) {
|
||
|
|
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())
|
||
|
|
const unit = row.options // 使用期限单位
|
||
|
|
const useUnit = row.periodOfUse // 使用期限
|
||
|
|
// 计算市场价（课程才需要）
|
||
|
|
if (row.authority) {
|
||
|
|
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 (isDate) {
|
||
|
|
// const cId = row.dataOrCourseId
|
||
|
|
// const date = new Date(row.startTime)
|
||
|
|
// const orderRepeat = this.orderRepeat
|
||
|
|
// this.$post(this.api.getOrderOtherTime, {
|
||
|
|
// customerId: this.form.customerId,
|
||
|
|
// id: row.dataOrCourseId,
|
||
|
|
// startTime: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(),
|
||
|
|
// 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 = `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()}`
|
||
|
|
// }
|
||
|
|
// }).catch(res => {
|
||
|
|
// this.repeatMsg = res.message
|
||
|
|
// orderRepeat.includes(cId) || orderRepeat.push(cId)
|
||
|
|
// })
|
||
|
|
// }
|
||
|
|
// 折扣率
|
||
|
|
this.calcDiscount(row)
|
||
|
|
},
|
||
|
|
// 计算结算价及平台服务费
|
||
|
|
dealSettlePrice(row) {
|
||
|
|
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
|
||
|
|
}
|
||
|
|
row.settlementPrice = this.$util.handleNaN(sPrice)
|
||
|
|
// 平台服务费（结算价*10%）
|
||
|
|
if (row.settlementPrice) {
|
||
|
|
// row.
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 计算折扣率
|
||
|
|
calcDiscount(row) {
|
||
|
|
const price = row.authority ? row.finalPrice : row.finalValue
|
||
|
|
const { marketValue } = row
|
||
|
|
// 课程：成交价/市场价；数据：成交单价/市场单价
|
||
|
|
if (price) row.discountRate = marketValue != 0 ? (price / row.marketValue * 100).toFixed(2) + '%' : '0%'
|
||
|
|
},
|
||
|
|
// 成交价修改后，计算成交单价，数据才需要 计算规则：成交价/账号数/时间（成交单价为元/账号/年，所以时间要换算成年的单位去计算）
|
||
|
|
calcFinalValue(row) {
|
||
|
|
const { authority, periodOfUse, options, accountNum, finalPrice } = row
|
||
|
|
if (authority && periodOfUse && accountNum && finalPrice) {
|
||
|
|
row.finalValue = (finalPrice / accountNum / periodOfUse * (!options ?
|
||
|
|
365 :
|
||
|
|
options === 1 ?
|
||
|
|
12 :
|
||
|
|
1)).toFixed(2)
|
||
|
|
}
|
||
|
|
// 折扣率
|
||
|
|
this.calcDiscount(row)
|
||
|
|
},
|
||
|
|
// 计算成交价。计算规则：成交单价*账号数*时间（成交单价为元/账号/年，所以时间要换算成年的单位去计算）
|
||
|
|
calcFinalPrice(row) {
|
||
|
|
const { finalValue, accountNum, periodOfUse, options } = row
|
||
|
|
if (finalValue && accountNum) {
|
||
|
|
row.finalPrice = ((!options ?
|
||
|
|
finalValue / 365 * periodOfUse :
|
||
|
|
options === 1 ?
|
||
|
|
finalValue / 12 * periodOfUse :
|
||
|
|
finalValue * periodOfUse) * accountNum).toFixed(2)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 确定
|
||
|
|
submit() {
|
||
|
|
uni.setStorageSync('courses', this.courses)
|
||
|
|
uni.navigateBack()
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.page {
|
||
|
|
height: calc(100vh - 140rpx);
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
</style>
|