2BTV-Web/src/util/course.js

import GoodsItem from '../component/GoodsItem';
import Utils from './Utils';
import Consts from './Consts';
import {CommandBus, CMD_TYPE} from './CommandBus';

class Course {
	constructor() {}

	static renderList(data, auth) {
		let main = document.querySelector('#course-main');
		main.innerHTML = '';
		//先获取各课的下载状态
		let recs = []
		for (let idx in data){
		let item = data[idx];
			recs.push(item.id);
		}
		// 现在只按文字模板进行渲染
		main.innerHTML = this.textList(data, auth);
	}

	static textList(data, auth) {
		let content = '';
		function listItem(data, seq, isFree) {
			let btnClass = 'download-btn-lesson-list-ready';
			if (data.downloadStatus == Consts.DOWNLOAD_STATUS_ONGOING){
				btnClass = 'download-btn-lesson-list-ongoing';
			}
			else if (data.downloadStatus == Consts.DOWNLOAD_STATUS_SUCCESS) {
				btnClass = 'download-btn-lesson-list-success';
			} if ( data.downloadStatus == Consts.DOWNLOAD_STATUS_FAILED ) {
				btnClass = 'download-btn-lesson-list-failed';
			}
			return `
				<div data-seq="${seq}">
		        	<div id="lesson-btn-${seq}" data-id="${data.id}" data-name="${data.title}" data-dload="${data.downloadStatus}" data-seq="${seq}" fe-role="Widget" class="text-wrapper">
						${Utils.fixOverflowStr(data.title, 32, '...')}
						<div class="free-flag" style="display: ${isFree ? "block" : "none"}"></div>
					</div>
		        	<div id="download-btn-${data.id}" fe-role="Widget" class="${btnClass}" data-id="${data.id}" data-name="${data.title}" data-seq="${seq}">
					</div>
		        </div>
			`;
		}
		for (let i in data) {
			// 课程未购买的第一课加入free标记
			if (i == 0 && !auth) {
				content += listItem(data[i], i, true);
			} else {
				content += listItem(data[i], i, false);
			}
		}
		return `<div id="list-text-container" class="list-text-container" fe-role="Scroll" fe-cfg="scroll_dir:v,scroll_center:con,scroll_duration:0.2,scroll_easing:linear"><div class="scroll-list clearfix" id="course-main-list">${content}</div></div> `;
	}

	/**
	 * 按钮工厂
	 * @param {Number} location 在goods中的位置
	 * @param {Object} goodsItem
	 */
	static generateBuyButton(location, goodsItem) {
		const { id, terminalPrice, chargeUnit, isInCart } = goodsItem;

		const newPrice = Utils.twoDecimal_f(terminalPrice);
		const oldPrice = Utils.twoDecimal_f(terminalPrice*1.25);
		const newPriceStr = Utils.thousandthFormat(newPrice);
		const oldPriceStr = Utils.thousandthFormat(oldPrice);

		let btnStr = `
			<div fe-role="Widget" class="btn goods-${location}" id="goods-${id}">
				${newPriceStr}元/${chargeUnit}
				<p>原价${oldPriceStr}</p>
			</div>`;

		if (isInCart) {
			btnStr = `<div fe-role="Widget" class="btn added" id="goods-${id}"></div>`;
		}

		return btnStr;
	}

	static renderDetail(data) {
		const { auth, detail, digest, beginTime, endTime } = data;
		let goods = data.goods;
		if (!goods) {
			goods = [];
		}

		let beginTimeStr = '';
		let endTimeStr = '';
		if (beginTime) {
			beginTimeStr = this.dateFormat(beginTime);
		}
		if (endTime) {
			endTimeStr = this.dateFormat(endTime);
		} else {
			endTimeStr = '永久';
		}

		let main = document.querySelector('#course-main');
		main.innerHTML = '';
		let duration = '';
		let btn = '';
		let buyedIcon = '';
		let desc = `<p class="desc" id="desc">${detail || ''}</p>`;

		if (auth) {
			duration = `
				<p class="use-duration" id="use-duration">
					使用期限：${beginTimeStr}-${endTimeStr}
				</p>`;
			buyedIcon = '<div class="buy-icon"></div>';
		} else {
			duration = `<p class="use-duration" id="use-duration">${digest || ''}</p>`;
		}
		let btnContainer = [];
		for (let i in goods) {
			// 这里限制只选择goods列表里的前三个
			if (i >= 3) break;
			btnContainer.push(this.generateBuyButton(i, goods[i]));
		}

		btn = `<div class="btn-panel">${btnContainer.join('')}</div>`;
		const desc_wrapper = `<div class="desc-wrapper">${duration + desc + buyedIcon}</div>`;
		main.innerHTML = `<div class="detail-container" id="course-main-detail">${desc_wrapper + btn}</div>`;
	}

	static renderPeriphery(dataset) {
		let main = document.getElementById('course-main');
		main.innerHTML = '';
		let listHtml = '';
		for (let i in dataset) {
			const { title, subTitle, coverUrl, goods } = dataset[i];
			let price = '';
			if (goods && Array.isArray(goods) && goods.length >= 1) {
				price = goods[0].terminalPrice || '';
			}
			let data = {
				price,
				img: `${Consts.IMG_PATH}/${coverUrl}`,
				title: title || '',
				correlative: subTitle || ''
			};
			listHtml += `
				<div fe-role="Widget" data-index="${i}" id="periphery-wrapper-${dataset[i].id}" class="periphery-wrapper ">
					${GoodsItem.createHTMLString(data)}
				</div>`;
		}

		if (dataset.length > 0) {
			main.innerHTML = `
				<div class="periphery-container" fe-role="Scroll" fe-cfg="scroll_dir:h">
					<div class="scroll-list" id="course-main-periphery">${listHtml}</div>
				</div>`;
		} else {
			main.innerHTML = `<div class="empty-periphery">暂无周边配套</div>`;
		}
	}

	static renderPeripheryDetail(data) {
		const { id, title, subTitle, detail, goods } = data;
		let price = 0;
		let goodsId;
		let isInCart;
		if (goods && goods.length >= 1) {
			price = goods[0].terminalPrice;
			goodsId = goods[0].id;
			isInCart = goods[0].isInCart;
		}
		let main = document.getElementById('course-main');
		let _detailContent = document.querySelector('#periphery-detail-content');
		if (_detailContent) {
			main.removeChild(_detailContent);
		}
		let detailContent = document.createElement('div');
		detailContent.setAttribute('class', 'periphery-detail-content');
		detailContent.setAttribute('id', 'periphery-detail-content');
		detailContent.setAttribute('fe-role', 'Switch');

		let icon = '';
		if (isInCart) {
			icon = '<div fe-role="Widget" class="periphery-icon added" id="periphery-add-cart"></div>';
		} else {
			icon = `<div fe-role="Widget" class="periphery-icon add-cart" id="periphery-add-cart" data-goodsId="${goodsId}"></div>`;
		}
		let list = '';
		list = `
			<div id="periphery-detail-wrapper-${id}" class="periphery-detail-wrapper">
				<div class="periphery-slide" id="slide-wrapper-${id}">
					<div></div>
				</div>
				<div class="periphery-detail">
					<p class="periphery-name">${title + '&nbsp;&nbsp;' + subTitle}</p>
					<p class="periphery-price">¥${Utils.twoDecimal_f(price)}</p>
					<p class="periphery-desc">${detail || ''}</p>
					${icon}
				</div>
			</div>`;

		detailContent.innerHTML = `
			<div class="left" id="left"></div>
			${list}
			<div class="right" id="right"></div>`;
		main.appendChild(detailContent);
	}

	static dateFormat(time) {
		let date = new Date(time);
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		return [year, month, day].join('/');
	}
}

module.exports = Course;