【金秋打卡】第21天 破解JavaScript高级玩法 第七讲

课程名称： 破解JavaScript高级玩法

课程章节： 如果不用vue，react框架，如何操作DOM？

主讲老师： Cloud

课程内容：

今天学习的内容包括：

DOM的操作

课程收获：

7.1 心得：

var vm = new Vue({
	el: "#wrap",
	data: {
		collectList: [],
		user: {}
	},
	created() {
		if (!account.islogin()) {
			window.location.href = "login.html";
		}

		this.user = JSON.parse(account.getUserInfo());
		ajaxPage(1, this.user.id);
	},
	mounted() {

	}
});

function cancelCollect(e) {
	var scenicSpotId = e.ScenicSpotId;
	var userId = vm.user.id;
	var isCancel = confirm("确认取消收藏吗？");
	if (isCancel == true) {
		$.ajax({
			type: "GET",
			url: getHttpUrl() + config.CancelCollection,
			data: {
				scenicSpotId: scenicSpotId,
				userId: userId
			},
			dataType: "json",
			success: function (data) {
				ajaxPage(1, userId);
			}
		});
	}
}


//结合Ajax使用，仅供参考
function ajaxPage(page, userId) {
	var p = page || 1;
	$.ajax({
		type: "GET",
		url: getHttpUrl() + config.GetCollectList,
		data: {
			userId: userId,
			pageNum: p,
			pageSize: 10,
		},
		dataType: "json",
		success: function (data) {
			//数据处理
			if (data.result) {
				vm.collectList = data.data.rows;

				// 调用分页插件
				$("#myPage").sPage({
					page: p,//当前页码
					pageSize: 10,//每页显示多少条数据，默认10条
					total: data.data.records,//数据总条数,后台返回
					backFun: function (page) {
						//点击分页按钮回调函数，返回当前页码
						ajaxPage(page, userId);
					}
				});
			}
		},
		error: function (e) {
			console.log(e);
		}
	});
}

var vm = new Vue({
	el: "#wrap",
	data: {
		cur: 0, //默认选中第一个tab
		couponList: [],
		user: {}
	},
	created() {
		if (!account.islogin()) {
			window.location.href = "login.html";
		}

		this.user = JSON.parse(account.getUserInfo());
		datatime();
		ajaxPage(1, this.cur, this.user.id);
	},
	mounted() {

	}
});

function changeStatus(status) {
	ajaxPage(1, status, vm.user.id);
}

//结合Ajax使用，仅供参考
function ajaxPage(page, status, userId) {
	var p = page || 1;
	$.ajax({
		type: "GET",
		url: getHttpUrl() + config.GetCouponList,
		data: {
			userId: userId,
			status: status,
			pageNum: p,
			pageSize: 8,
		},
		dataType: "json",
		success: function (data) {
			//数据处理
			if (data.result) {
				vm.couponList = data.data.rows;
				vm.cur = status;

				// 调用分页插件
				$("#myPage").sPage({
					page: p,//当前页码
					pageSize: 10,//每页显示多少条数据，默认10条
					total: data.data.records,//数据总条数,后台返回
					backFun: function (page) {
						//点击分页按钮回调函数，返回当前页码
						ajaxPage(page, status, openId);
					}
				});
			}
		},
		error: function (e) {
			console.log(e);
		}
	});
}

//时间函数
function datatime() {
	Date.prototype.format = function (format) {
		var o = {
			"M+": this.getMonth() + 1, //month
			"d+": this.getDate(), //day
			"h+": this.getHours(), //hour
			"m+": this.getMinutes(), //minute
			"s+": this.getSeconds(), //second
			"q+": Math.floor((this.getMonth() + 3) / 3), //quarter
			"S": this.getMilliseconds() //millisecond
		}

		if (/(y+)/.test(format)) {
			format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
		}

		for (var k in o) {
			if (new RegExp("(" + k + ")").test(format)) {
				format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
			}
		}
		return format;
	}
}

var vm = new Vue({
	el: "#wrap",
	data: {
		cur: 0, //默认选中第一个tab
		orderList: [],
		user: {}
	},
	created() {
		if(!account.islogin())
		{
			window.location.href = getWebUrl() + "/html/login.html";
		}

		this.user=JSON.parse(account.getUserInfo());
		ajaxPage(1, this.cur, this.user.id);
	},
	mounted() {

	},
	methods: {
		GotoDetail: function (id) {
			var _id = CryptoJS.AES.encrypt(id, "id");
			var url = "../html/orderDetail.html?id=" + _id;
			window.open(url, '_blank');
		}
	}
});

function changeStatus(status) {
	ajaxPage(1, status, vm.user.id);
}


//结合Ajax使用，仅供参考
function ajaxPage(page, status, userId) {
	var p = page || 1;
	$.ajax({
		type: "GET",
		url: getHttpUrl() + config.GetOrderList,
		data: {
			userId: userId,
			status: status,
			pageNum: p,
			pageSize: 10,
		},
		dataType: "json",
		success: function (data) {
			//数据处理
			if (data.result) {
				vm.orderList = data.data.rows;
				vm.cur = status;

				// 调用分页插件
				$("#myPage").sPage({
					page: p,//当前页码
					pageSize: 10,//每页显示多少条数据，默认10条
					total: data.data.records,//数据总条数,后台返回
					backFun: function (page) {
						//点击分页按钮回调函数，返回当前页码
						ajaxPage(page, status, userId);
					}
				});
			}
		},
		error: function (e) {
			console.log(e);
		}
	});
}