chatGpt/pages/main/prompt/prompt-list.vue

<template>
	<view>
		<cu-custom bgColor="bg-cyan" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">提示词分类</block>
		</cu-custom>
		
		<scroll-view scroll-x class="bg-white nav margin-bottom-xs" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item" :class="item.value == tabCur ? 'text-cyan cur' : ''"
				v-for="(item, index) in navList" :key="index" @tap="e => tabSelect(e, item, index)" :data-id="item.value">
				{{ item.label }}
			</view>
		</scroll-view>
		<PromptList :promptList="promptList"></PromptList>
		<view v-if="loadStatus !== 'none'" class="cu-load text-grey" :class="loadStatus === 'loading' ? 'loading' : 'over'"></view>
		<view v-else class="cu-load text-grey info"></view>
	</view>
</template>

<script>
	import PromptList from '@/components/prompt-list/prompt-list.vue'
	import { findPromptListApi } from '@/api/chat.js'
	export default {
		components: { PromptList },
		data() {
			return {
				tabCur: 'personal',
				scrollLeft: 0,
				contentScrollWidth: 0,
				// Array.prototype.slice.call($(".checkboxList_autc").getElementsByTagName("li")).map(x => ({value: x.getElementsByTagName("label")[0].getAttribute("for").replaceAll("showcase_checkbox_id_", ""), label: x.getElementsByTagName("label")[0].childNodes[0].data}));
				navList: [
					// {
					// 	"value": "favorite",
					// 	"label": "常用"
					// },
					{
						"value": "latest",
						"label": "最新"
					},
					{
						"value": "personal",
						"label": "个人"
					},
					{
						"value": "contribute",
						"label": "投稿"
					},
					{
						"value": "write",
						"label": "写作辅助"
					},
					{
						"value": "language",
						"label": "语言/翻译"
					},
					{
						"value": "article",
						"label": "文章/报告"
					},
					{
						"value": "code",
						"label": "IT/编程"
					},
					{
						"value": "social",
						"label": "心理/社交"
					},
					{
						"value": "tool",
						"label": "工具"
					},
					{
						"value": "mind",
						"label": "发散思维"
					},
					{
						"value": "ai",
						"label": "AI"
					},
					{
						"value": "interesting",
						"label": "趣味知识"
					},
					{
						"value": "life",
						"label": "自助百科"
					},
					{
						"value": "living",
						"label": "生活质量"
					},
					{
						"value": "speech",
						"label": "辩论/演讲"
					},
					{
						"value": "music",
						"label": "音乐"
					},
					{
						"value": "philosophy",
						"label": "哲学/宗教"
					},
					{
						"value": "comments",
						"label": "点评/评鉴"
					},
					{
						"value": "company",
						"label": "企业职位"
					},
					{
						"value": "pedagogy",
						"label": "教育/学生"
					},
					{
						"value": "academic",
						"label": "学术/教师"
					},
					{
						"value": "professional",
						"label": "行业顾问"
					},
					{
						"value": "doctor",
						"label": "医生"
					},
					{
						"value": "finance",
						"label": "金融顾问"
					},
					{
						"value": "games",
						"label": "游戏"
					},
					{
						"value": "interpreter",
						"label": "终端/解释器"
					},
					{
						"value": "seo",
						"label": "SEO"
					},
					{
						"value": "text",
						"label": "文本/词语"
					}
				],
				promptList: [],
				current: 1,
				loadStatus: 'none' // none/loading/over
			}
		},
		created() {
			this.findList()
		},
		mounted() {
			this.getScrollWidth()
		},
		onReachBottom() {
			if (this.loadStatus === 'over') {
				return
			}
			this.current ++
			this.fetchData()
		},
		methods: {
			findList() {
				this.loadStatus = 'none'
				this.promptList = []
				this.current = 1
				this.fetchData()
			},
			fetchData() {
				this.loadStatus = 'loading'
				findPromptListApi({ 
					current: this.current,
					tags: this.tabCur
				}).then(({ status, data }) => {
					if (status === 'success') {
						if(data.records && data.records.length > 0) {
							this.promptList.push(...data.records)
							if (data.records.length < 20) {
								this.loadStatus = 'over'
							} else {
								this.loadStatus = 'none'
							}
						} else {
							this.loadStatus = 'over'
						}
					}
				})
			},
			tabSelect(e, item, index) {
				this.tabCur = e.currentTarget.dataset.id
				// 当前点击子元素距离左边栏的距离 - scroll-view 宽度的一半  + 当前点击子元素一半的宽度 实现居中展示
				this.scrollLeft = this.navList[index].left - this.contentScrollWidth / 2 + this.navList[index].width / 2
				this.findList()
			},
			getScrollWidth() {
				const query = uni.createSelectorQuery().in(this)
				query.select('.nav').boundingClientRect(data => {
					// 拿到 scroll-view 组件宽度                    
					this.contentScrollWidth = data.width
				}).exec()
				
				query.selectAll('.cu-item').boundingClientRect(data => {
				let dataLen = data.length;
					for (let i = 0; i < dataLen; i++) {
						//  scroll-view 子元素组件距离左边栏的距离
						this.navList[i].left = data[i].left
						//  scroll-view 子元素组件宽度
						this.navList[i].width = data[i].width
					}
				}).exec()
			},
		}
	}
</script>

<style lang="scss">
	
</style>