FE_CRM/pages/addCourse/addCourse.vue

<template>
	<view class="page">
		<uni-card :is-shadow="false" :border="false" padding="0" is-full>
			<uni-search-bar class="search" radius="5" placeholder="请输入产品名称" clearButton="auto" cancelButton="none" v-model="keyword" />
		</uni-card>
		
		<ul class="tab">
			<li v-for="(tab, i) in tabs" :class="{active: curTab === tab.id}" @click="tabChange(tab)">{{ tab.name }}</li>
		</ul>
		
		<ul class="list">
			<li v-for="item in list">
				<uni-data-checkbox class="check" multiple v-model="item.check" :localdata="checkData"></uni-data-checkbox>
				<image class="icon" src="../../static/image/course1.png" mode="widthFix"></image>
				{{ item.curriculumName }}
			</li>
		</ul>
		
		<view class="btn-wrap">
			<uni-data-checkbox class="check" multiple v-model="checkAll" :localdata="checkAllData" @change="checkChange"></uni-data-checkbox>
			<view class="btn" @click="submit">确定</view>
		</view>
	</view>
</template>

<script>
	import { curriculumList } from '@/apis/modules/course.js'
	export default {
		data() {
			return {
				orderType: 0,
				curTab: '',
				tabs: [
					{
						name: '不限',
						id: ''
					},
					{
						name: '实训课程',
						id: 1
					},
					{
						name: '理论课程',
						id: 0
					},
					{
						name: '数据产品',
						id: 3
					}
				],
				searchTimer: null,
				orderStatus: '',
				productStatus: '',
				keyword: '',
				list: [],
				listAll: [],
				page: 1,
				pageSize: 10,
				checkData: [{
					text: '',
					value: 1
				}],
				checkAll: [],
				checkAllData: [{
					text: '全部',
					value: 1
				}],
			}
		},
		watch: {
			keyword () {
				clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(() => {
					this.getList()
				}, 500)
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1500)
		},
		onShow() {
			const pages = getCurrentPages()
			this.orderType = pages[pages.length - 1].options.orderType
			this.getList()
		},
		methods: {
			getList() {
				curriculumList({
					curriculumName: this.keyword,
					isEnable: 0,
					pageNum: 1,
					pageSize: 10000
				}).then(({ page }) => {
					const { records } = page
					records.map(e => {
						e.check = []
					})
					this.list = records
				}).catch(e => {})
			},
			// tab切换
			tabChange(tab) {
				this.curTab = tab.id
			},
			// 全选
			checkChange(e) {
				const checked = !!e.detail.value.length
				this.list.map(e => e.check = [checked ? 1 : '']) // 选中则为[1]，取消选中为[]
			},
			// 生成产品参数
			createParam(e) {
				return {
					dataOrCourseId: e.cid, // id
					productName: e.curriculumName, // 名称
					periodOfUse: '', // 使用期限
					startTime: this.$util.formatDate(new Date(), 'yyyy-MM-dd'), // 开始
					endTime: '', // 终止
					remainingPeriod: '', // 剩余期限
					marketValue: '', // 市场价
					marketPrice: e.marketPrice, // 市场单价
					finalPrice: this.orderType === 2 ? 0 : '', // 成交价
					discountRate: '', // 折扣率
					accountNum: '', // 账号数
					totalAmount: '', // 总价
					isEnable: 1, // 启用否：1启用，0禁用
					ship: 0, // 发货否（0未发货，1已发货，默认不发货）
					authority: 1, // 区分权限 0为数据平台权限，1为课程权限
					options: 1,
					settlementPrice: '', // 结算价
					settlementMethod: e.settlementMethod, // 结算方式，0为单价，1为分成
					settlementPriceUnit: e.settlementPrice, // 结算单价
					businessProportion: e.businessProportion, // 商务占比
				}
			},
			// 确定
			submit() {
				const list = this.list.filter(e => e.check.length) // 筛选出选中了的产品
				if (list.length) {
					const result = []
					list.map(e => {
						result.push(this.createParam(e))
					})
					uni.setStorageSync('courses', result) // 把选中的产品添加至缓存
					uni.redirectTo({
						url: `../editCourse/editCourse`
					})
				} else {
					this.$util.errMsg('请选择产品！')
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.page {
	height: calc(100vh - 140rpx);
	overflow: auto;
}
.list {
	li {
		display: flex;
		align-items: center;
		padding: 30rpx 24rpx;
		margin: 16rpx 24rpx;
		font-size: 30rpx;
		color: #333;
		background-color: #fff;
		border-radius: 16rpx;
	}
	.icon {
		width: 80rpx;
		margin: 0 20rpx;
	}
}
/deep/.check {
	.checklist-box {
		margin: 0 !important;
	}
	.checkbox__inner {
		width: 40rpx !important;
		height: 40rpx !important;
		border-radius: 50% !important;
	}
	.checkbox__inner-icon {
		top: 8rpx !important;
		left: 14rpx !important;
	}
}
.btn-wrap {
	justify-content: space-between;
	.btn {
		width: 340rpx;
		margin-left: 27rpx;
	}
}
</style>