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>{{type1}}</text><text>/</text><text>{{type2}}</text><text>/</text><text>{{type3}}</text>
			</view>
			<view class="row3" v-if="curNow==0">
				<u-tabs :list="list1" @click="click" keyName="typeName" current='1'></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>
			<mescroll-body v-if="curNow==0" ref="mescrollRef" @init="mescrollInit" @up="upCallback1" :down="downOption"
				:up="upOption">
				<view class="price-list">
					<view class="row-style" style="display: flex;justify-content: space-between;">
						<view class="">
							最新价格
						</view>
						<view class="">
							单位（万元）
						</view>
					</view>
					<view class="row-style" style="display: flex;justify-content: space-between;"
						v-for="item in priceList">
						<view class="">
							{{new Date(item.collection).toLocaleDateString() }}
						</view>
						<view class="">
							{{item.price}}
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
		<mescroll-body v-if="curNow==1" ref="mescrollRef" @init="mescrollInit" @up="upCallback" :down="downOption"
			:up="upOption">
			<view class="jyjl">
				以下为近期成交数据
			</view>
			<view v-for="data in dataList" class="row">
				<view class="left">
					<image :src="data.urlPath" mode="widthFix" class="price-img" @click="fdImg(data.urlPath)"></image>
					<u-popup :show="show" @close="close" @open="open" mode="center">
						<image :src="selectSrc" mode="widthFix"></image>
					</u-popup>
				</view>
				<view class="right">
					<view class="right-row" style="color:#fca87d;font-size:20px;font-weight:700">
						¥{{data.price}}万元
					</view>
					<view class="right-row">
						名称:{{data.grade}}
					</view>
					<view class="right-row">
						编号：{{data.number}}
					</view>
					<view class="right-row">
						状态:{{data.status}}
					</view>
					<view class="right-row">
						交易日期:
						<text
							style="color:#fca87d;font-size:12px">{{new Date(data.collection).toLocaleDateString() }}</text>

					</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">
					{{nowItem.series}}
				</view>
			</view>
			<view class="row">
				<view class="left">
					品名
				</view>
				<view class="right">
					{{nowItem.product}}
				</view>
			</view>
			<view class="row">
				<view class="left">
					官网编号
				</view>
				<view class="right">
					{{nowItem.number}}
				</view>
			</view>
			<view class="row">
				<view class="left">
					年份
				</view>
				<view class="right">
					{{nowItem.year}}
				</view>
			</view>
			<view class="row">
				<view class="left">
					面值
				</view>
				<view class="right">
					{{nowItem.face}}
				</view>
			</view>
			<view class="row">
				<view class="left">
					版别
				</view>
				<view class="right">
					{{nowItem.edition}}
				</view>
			</view>
			<view class="row">
				<view class="left">
					地区
				</view>
				<view class="right">
					{{nowItem.region}}
				</view>
			</view>
			<view class="row">
				<view class="left">
					分值/等级
				</view>
				<view class="right">
					{{nowItem.grade}}
				</view>
			</view>
			<view class="row">
				<view class="left">
					同分数量/增量
				</view>
				<view class="right">
					{{nowItem.tongFen}}
				</view>
			</view>
			<view class="row">
				<view class="left">
					高分数量
				</view>
				<view class="right">
					{{nowItem.highScores}}
				</view>
			</view>
			<view class="row">
				<view class="left">
					收集时间
				</view>
				<view class="right">
					{{nowItem.collection}}
				</view>
			</view>

			<view class="detail-view">
				<view class="title">
					详细介绍
				</view>
				<view class="">
					{{nowItem.introduction}}
				</view>
				<view class="imgList">
					<!-- <image :src="item" mode="widthFix" v-for="item in nowItem.urlPath.split(',')" style="width: 50%;">
					</image> -->
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		onLoad() {
			this.info = uni.getStorageSync("selectInfo")
			this.list1 = this.info.children
			if (this.info.children.length != 0) {
				this.nowItem = this.info
				this.orderId = this.info.children[1].id
				this.type1 = this.info.series
				this.type2 = this.info.secondName
				this.type3 = this.info.children[1].typeId
				// for (let i = 0; i < this.info.children.length; i++) {

				// }
			}


		},
		data() {
			return {
				selectSrc: '',
				show: false,
				x: [],
				y: [],
				type1: '',
				type2: '',
				type3: '',
				orderId: '',
				info: {},
				downOption: {},
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
				downOption1: {},
				upOption1: {
					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: 0,
				list1: []
			}
		},
		methods: {
			close() {
				this.show = false
				// console.log('close');
			},
			fdImg(src) {
				this.selectSrc = src
				this.show = true
			},
			sectionChange(index) {
				this.curNow = index;
			},
			click(item) {
				this.orderId = item.id
				this.type3 = item.typeId
				this.mescroll.resetUpScroll()
			},
			makeData(val) {
				for (let i = 0; i < val.length; i++) {
					if (val[i].children) {
						for (let j = 0; j < val[i].children.length; j++) {
							let _obj = val[i].children[j]
							_obj.typeName = val[i].children[j].secondName
							val[i].children[j] = _obj
							if (val[i].children[j].children) {
								for (let k = 0; k < val[i].children[j].children.length; k++) {
									let _obj1 = val[i].children[j].children[k]
									_obj1.typeName = val[i].children[j].children[k].typeId
									val[i].children[j].children[k] = _obj1
								}
							}
						}
					}
				}
				this.listData = val
				// console.log(this.data)
			},
			upCallback1(page) {
				this.x = []
				this.y = []
				this.$request.baseRequest('admin.gubi.gubiPriceHis', 'list', {
					pageNum: page.num,
					pageSize: page.size,
					orderId: this.orderId
				}, failres => {
					console.log('res+++++', failres.errmsg)
					this.$refs.uToast.show({
						type: 'error',
						message: failres.errmsg,
					})
					uni.hideLoading()
				}).then(res => {
					// if (res.errno == 200) {
					uni.hideLoading()
					let curPageData = res.data.items;
					let totalPage = res.data.total;
					let curPageLen = curPageData.length;
					this.mescroll.endByPage(curPageLen, totalPage);
					// this.makeData(res.data)
					if (page.num == 1) this.priceList = []; //如果是第一页需手动置空列表
					this.priceList = this.priceList.concat(curPageData); //追加新数据
					for (let i = 0; i < this.priceList.length; i++) {
						console.log(new Date(this.priceList[i].collection).toLocaleDateString())
						this.x.push(new Date(this.priceList[i].collection).toLocaleDateString());
						this.y.push(this.priceList[i].price)
					}
					let _data = {
						categories: this.x,
						series: [{
							name: "价格",
							data: this.y
						}]
					};
					console.log("x", this.x)
					console.log("y", this.y)
					this.chartData = JSON.parse(JSON.stringify(_data));
					// }

				})
			},
			upCallback(page) {
				this.$request.baseRequest('admin.gubi.gubiTransaction', 'list', {
					pageNum: page.num,
					pageSize: page.size,
					orderId: this.orderId
				}, failres => {
					console.log('res+++++', failres.errmsg)
					this.$refs.uToast.show({
						type: 'error',
						message: failres.errmsg,
					})
					uni.hideLoading()
				}).then(res => {
					// if (res.errno == 200) {
					uni.hideLoading()
					console.log(11)
					let curPageData = res.data.items;
					let totalPage = res.data.total;
					let curPageLen = curPageData.length;
					this.mescroll.endByPage(curPageLen, totalPage);
					console.log(res.data)
					// this.makeData(res.data)
					if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
					this.dataList = this.dataList.concat(curPageData); //追加新数据
					for (let i = 0; i < this.dataList.length; i++) {
						// this.dataList[i].urlPath = this.dataList[i].urlPath.split(",")
					}
					// }

				})
				// // 此处可以继续请求其他接口
				// // 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()
				// 	}
				// })

			},

		}
	}
</script>

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

	.row2 {
		margin: 20rpx 0;
	}

	.title {
		margin: 20rpx 0;
		font-weight: 700;
	}

	.row-style,
	.row {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #ebebeb;
		padding: 20rpx;
	}

	// .imgList {
	// 	display: flex;
	// }
	.jyjl {
		color: rgb(60, 156, 255);
		border: 1px solid rgb(60, 156, 255);
		width: 300rpx;
		padding: 10rpx;
		border-radius: 10rpx;
	}

	.price-img {
		width: 200rpx;
	}

	.right-row {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
</style>