<html lang="en">
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<button class='up'>销量升序</button>
		<button class='down'>销量降序</button>
		<ul></ul>

		<script>
			var cups = [{
					type: 1,
					price: 100,
					color: 'black',
					sales: 3000,
					name: '牛客logo马克杯'
				},
				{
					type: 2,
					price: 40,
					color: 'blue',
					sales: 1000,
					name: '无盖星空杯'
				},
				{
					type: 4,
					price: 60,
					color: 'green',
					sales: 200,
					name: '老式茶杯'
				},
				{
					type: 3,
					price: 50,
					color: 'green',
					sales: 600,
					name: '欧式印花杯'
				}
			]
			var ul = document.querySelector('ul');
			var upbtn = document.querySelector('.up');
			var downbtn = document.querySelector('.down');
			// 补刀耕火种
			var status;
			upbtn.onclick = function() {
				status = 0;
				cups = cups.sort(sortFn('sales'))
				//自己在模板中渲染  省略
				console.log(cups)
			}
			downbtn.onclick = function() {
				status = 1;
				cups.sort(sortFn('sales'))
				cups = cups.sort(sortFn('sales'))
				//自己在模板中渲染  省略
				console.log(cups)
			}

			function sortFn(target) {
				return function(a, b) {
					var value1 = a[target];
					var value2 = b[target];
					if (status == 0) {
						return value1 - value2; //升序
					} else if (status == 1) {
						return value2 - value1; //降序
					}

				}
			}
		</script>
	</body>
</html>