gubi/yinyuan/pages/index/price.vue

<template>
	<view class="content">
		<view class="content1">
			<view class="row1">
				<u-subsection :list="btnList" mode="subsection" :current="curNow" @change="sectionChange">
				</u-subsection>
			</view>
			<view class="row2" v-if="curNow!=2">
				<text>123</text><text>/</text><text>123</text><text>/</text><text>123</text>
			</view>
			<view class="row3" v-if="curNow==0">
				<u-tabs :list="list1" @click="click"></u-tabs>
			</view>
		</view>
		<view class="content2" v-if="curNow==0">
			<view class="title">
				价格趋势图
			</view>
			<qiun-data-charts type="line" :opts="opts" :chartData="chartData" :ontouch="true" />
		</view>
		<view class="content3" v-if="curNow==0">
			<view class="title">
				价格历史记录
			</view>
			<view class="price-list">
				<view class="" style="display: flex;justify-content: space-between;">
					<view class="">
						最新价格
					</view>
					<view class="">
						单位（万元）
					</view>
				</view>
				<view class="" style="display: flex;justify-content: space-between;" v-for="item in priceList">
					<view class="">
						{{item.date}}
					</view>
					<view class="">
						{{item.price}}
					</view>
				</view>
			</view>

		</view>
		<mescroll-body v-if="curNow==1" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption">

			<view v-for="data in dataList" class="row">
				<view class="left">
					<view class="">
						图片1
					</view>
					<view class="">
						图片2
					</view>
				</view>
				<view class="right">
					<view class="">
						0.19万
					</view>
					<view class="">
						编号
					</view>
					<view class="">
						分值
					</view>
					<view class="">
						状态
					</view>
					<view class="">
						交易日期
					</view>
				</view>
			</view>
		</mescroll-body>
		<view class="bz" v-if="curNow==2">
			<view class="title">
				存量/增量
			</view>
			<view class="row">
				<view class="left">
					系列
				</view>
				<view class="right">
					原乡
				</view>
			</view>
			<view class="detail-view">
				<view class="title">
					详细介绍
				</view>
				<view class="">
					1212332231123司法鉴定副书记奥克斯的风景两地分居上课了撒娇分类法就是浪费加速度计发介绍来的
				</view>
				<view class="imgList">
					<view class="">
						图片1
					</view>
					<view class="">
						图片2
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				downOption: {},
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
				dataList: [{
					img1: "",
					img2: '',
					price: '0.19',
					number: '8777',
					fVal: '35',
					status: '酱彩',
				}],
				priceList: [{
						date: '2022-10-31',
						price: '0.27'
					},
					{
						date: '2022-10-31',
						price: '0.27'
					},
				],
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					enableScroll: true,
					legend: {},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 4
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2
						}
					}
				},
				btnList: ['价格概况', '交易记录', '币种介绍'],
				curNow: 1,
				list1: [{
					name: '关注',
				}, {
					name: '推荐',
				}, {
					name: '电影'
				}, {
					name: '科技'
				}, {
					name: '音乐'
				}, {
					name: '美食'
				}, {
					name: '文化'
				}, {
					name: '财经'
				}, {
					name: '手工'
				}]
			}
		},
		methods: {
			sectionChange(index) {
				this.curNow = index;
			},
			click(item) {
				console.log('item', item);
			},
			upCallback(page) {
				// // 此处可以继续请求其他接口
				// // if(page.num == 1){
				// // 	// 请求其他接口...
				// // }

				// // 如果希望先请求其他接口,再触发upCallback,可参考以下写法
				// // if(!this.isInitxx){
				// // 	apiGetxx().then(res=>{
				// // 		this.isInitxx = true
				// // 		this.mescroll.resetUpScroll() // 重新触发upCallback
				// // 	}).catch(()=>{
				// // 		this.mescroll.endErr()
				// // 	})
				// // 	return // 此处return,先获取xx
				// // }

				// let pageNum = page.num; // 页码, 默认从1开始
				// let pageSize = page.size; // 页长, 默认每页10条
				// uni.request({
				// 	url: 'xxxx?pageNum=' + pageNum + '&pageSize=' + pageSize,
				// 	success: (data) => {
				// 		// 接口返回的当前页数据列表 (数组)
				// 		// let curPageData = data.xxx;
				// 		// // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
				// 		// let curPageLen = curPageData.length;
				// 		// // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
				// 		// let totalPage = data.xxx;
				// 		// // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
				// 		// let totalSize = data.xxx;
				// 		// // 接口返回的是否有下一页 (true/false)
				// 		// let hasNext = data.xxx;

				// 		//设置列表数据
				// 		if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
				// 		this.dataList = this.dataList.concat(curPageData); //追加新数据

				// 		// 请求成功,隐藏加载状态
				// 		//方法一(推荐): 后台接口有返回列表的总页数 totalPage
				// 		// this.mescroll.endByPage(curPageLen, totalPage);
				// 		this.mescroll.endByPage(0, 0);
				// 		setTimeout(() => {
				// 			// this.mescroll.endSuccess(curPageLen)
				this.mescroll.endSuccess(0)
				// 		}, 20)
				// 	},
				// 	fail: () => {
				// 		//  请求失败,隐藏加载状态
				// 		this.mescroll.endErr()
				// 	}
				// })

			},
			getServerData() {
				setTimeout(() => {
					let res = {
						categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
						series: [{
							name: "目标值",
							data: [35, 36, 31, 33, 13, 34]
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			}
		},
		onReady() {
			this.getServerData();
		},
	}
</script>

<style lang="scss">
	.content {
		padding: 20rpx;
	}
</style>