新增全局颜色变量

pages/watching_history/watching_history.vue

@@ -0,0 +1,126 @@
+<template>
+	<view class="container">
+		<view class="list">
+			<view class="item" v-for="item in listData.list" :key="item.id">
+				<view class="cover">
+					<image class="img" :src="item.titleImg" mode="aspectFill"></image>
+				</view>
+				<view class="info">
+					<view class="title">
+						{{ item.title }}
+					</view>
+					<view class="record">看到{{ item.courseDetailsName }}</view>
+					<view class="btm">
+						<view class="num">
+							<view v-if="item.courseDetailsCount">更新{{ item.courseDetailsCount }}</view>
+						</view>
+						<view class="btn">继续观看</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+
+import { selectByUserId } from '@/api/me/me.js';
+
+const type = ref(1);
+const typeList = ref([
+	{
+		type: 1,
+		label: '我的追剧'
+	},
+	{
+		type: 3,
+		label: '最近观看'
+	}
+]);
+
+const listData = reactive({
+	list: [],
+	page: 1,
+	size: 10
+});
+
+// 获取数据
+async function selectByUserIdAjax() {
+	try {
+		const res = await selectByUserId({
+			page: listData.page,
+			limit: listData.size,
+			classify: type.value
+		});
+		console.log(res);
+		if (res.code === 0) {
+			listData.list = res.data.records;
+		}
+	} catch (error) {
+		console.log(error);
+	}
+}
+
+onReachBottom(() => {
+	listData.page++;
+	selectByUserIdAjax();
+});
+
+onLoad((e) => {
+	if (e.type) {
+		type.value = e.type;
+		uni.setNavigationBarTitle({
+			title: typeList.value.find((item) => item.type == type.value).label
+		});
+	}
+	selectByUserIdAjax();
+});
+</script>
+
+<style scoped lang="scss">
+.container {
+	padding: 28upx;
+	color: #333;
+	font-size: 29upx;
+}
+.list {
+	.item {
+		padding: 28upx 0;
+		display: flex;
+		.cover {
+			width: 150upx;
+			height: 200upx;
+			margin-right: 28upx;
+			.img {
+				width: 100%;
+				height: 100%;
+				display: block;
+				border-radius: 20upx;
+			}
+		}
+		.info {
+			display: flex;
+			flex-direction: column;
+			gap: 4px;
+			.title {
+				font-size: 32upx;
+				font-weight: bold;
+			}
+			.record {
+				color: $uni-zj-color-primary;
+			}
+			.btm {
+				display: flex;
+				justify-content: space-between;
+				.btn {
+					padding: 4upx 12upx;
+					color: #fff;
+					background: $uni-zj-color-primary;
+				}
+			}
+		}
+	}
+}
+</style>