新增资产权证转让管理部分页面增加分页

pages/market/logs.vue

@@ -1,61 +1,121 @@
 <template>
 	<view>
+		<view class="tabs" v-if="$Route.query.type === 'my'">
+			<view class="item" :class="{ 'show' : tab == 'sell'}" @click="onTasb('sell')">我转让的</view>
+			<view class="item" :class="{ 'show' : tab == 'buys' }" @click="onTasb('buys')">我买到的</view>
+		</view>
 		<block v-if="logs.length > 0">
-			<view class="logs" v-for="(item, index) in logs" :key="index">
-				<view class="logs-item">
-					<label>交易权证</label>
-					{{item.goods.goods_name}}
-				</view>
-				<view class="logs-item">
-					<label>交易单价</label>
-					￥{{item.price}}
-				</view>
-				<view class="logs-item">
-					<label>交易数量</label>
-					{{item.qty}}
-				</view>
-				<view class="logs-item">
-					<label>转让用户</label>
-					{{item.sellUser.nickname}}
-				</view>
-				<view class="logs-item">
-					<label>购买用户</label>
-					{{item.buyUser.nickname}}
-				</view>
-				<view class="logs-item">
-					<label>交易时间</label>
-					{{item.created_at}}
+			<view :class="{'paddingTop': $Route.query.type === 'my'}">
+				<view class="logs" v-for="(item, index) in logs" :key="index">
+					<view class="logs-item">
+						<label>交易权证</label>
+						{{item.goods.goods_name}}
+					</view>
+					<view class="logs-item">
+						<label>交易单价</label>
+						￥{{item.price}}
+					</view>
+					<view class="logs-item">
+						<label>交易数量</label>
+						{{item.qty}}
+					</view>
+					<view class="logs-item">
+						<label>转让用户</label>
+						{{item.sellUser.nickname}}
+					</view>
+					<view class="logs-item">
+						<label>购买用户</label>
+						{{item.buyUser.nickname}}
+					</view>
+					<view class="logs-item">
+						<label>交易时间</label>
+						{{item.created_at}}
+					</view>
 				</view>
 			</view>
 		</block>
+		<block v-else>
+			<view class="list-null">
+				<image class="icon" src="@/static/icons/listnull-icon.png" mode="widthFix" />
+				<view class="sub-title">暂无数据</view>
+			</view>
+		</block>
 	</view>
 </template>
 
 <script>
-	import { marketsLogs } from '@/apis/interfaces/market'
+	import { marketsLogs, marketsOrdersLogs } from '@/apis/interfaces/market'
 	export default {
 		data() {
 			return {
 				logs: [],
-				page: {}
+				page: {},
+				tab	: 'sell'
 			};
 		},
 		created(){
-			marketsLogs().then(res => {
-				console.log(res.data)
-				this.logs = res.data
-				this.page = res.page
-			}).catch(err => {
-				uni.showToast({
-					title: err.message,
-					icon : 'none'
+			this.getList()
+		},
+		methods:{
+			onTasb(e){
+				this.tab = e
+				this.getList()
+			},
+			// 获取列表
+			getList(){
+				if(this.$Route.query.type === 'my'){
+					marketsOrdersLogs({}, this.tab).then(res =>{
+						console.log(res)
+						this.logs = res.data
+						this.page = res.page
+					}).catch(err => {
+						uni.showToast({
+							title: err.message,
+							icon : 'none'
+						})
+					})
+					return
+				}
+				marketsLogs().then(res => {
+					this.logs = res.data
+					this.page = res.page
+				}).catch(err => {
+					uni.showToast({
+						title: err.message,
+						icon : 'none'
+					})
 				})
-			})
+			}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
+	.tabs{
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		z-index: 99;
+		background-color: white;
+		height: 90rpx;
+		line-height: 90rpx;
+		display: flex;
+		justify-content: space-around;
+		.item{
+			border-bottom: solid 2rpx white;
+			box-sizing: border-box;
+			&.show{
+				border-color: $text-price;
+				color: $text-price;
+			}
+		}
+	}
+	
+	.paddingTop{
+		padding-top: 90rpx;
+	}
+	
 	.logs{
 		background: white;
 		margin-top: $margin;
@@ -78,4 +138,29 @@
 			}
 		}
 	}
+	
+	// 空提示
+	.list-null{
+		width: 100vw;
+		height: 100vh;
+		box-sizing: border-box;
+		text-align: center;
+		background: white;
+		padding-bottom: 20vh;
+		@extend .vertical;
+		.sub-title{
+			color: $text-gray;
+			font-size: $title-size-m;
+		}
+		.icon{
+			width: 288rpx;
+		}
+	}
+	.employees-null{
+		text-align: center;
+		line-height: 10vh;
+		padding-bottom: $padding;
+		font-size: $title-size-m;
+		color: $text-gray;
+	}
 </style>

pages/market/management.vue

@@ -0,0 +1,169 @@
+<template>
+	<view class="NumberWeight">
+		<!-- 有订单列表 -->
+		<view v-if="lists.length > 0">
+			<block v-for="(item, index) in lists" :key="index">
+				<view class="order-item">
+					<view class="order-info">
+						<image class="order-cover" :src="item.goods.cover" mode="aspectFill"></image>
+						<view class="title">数字权证<text>{{item.surplus}}/{{item.stock}}</text></view>
+						<view class="text">锚定商品：{{item.goods.goods_name}}</view>
+						<view class="text">交易哈希：{{item.hash}}</view>
+						<view class="text">发布时间：{{item.created_at}}</view>
+					</view>
+					<view class="order-tool">
+						<view class="price">{{item.price}}/个</view>
+						<view class="order-btn" v-if="item.status.value === 1" @click="removeGoods(item.market_id, index)">取消转让</view>
+						<view class="order-status" v-if="item.status.value === 2">{{item.status.text}}</view>
+					</view>
+				</view>
+			</block>
+		</view>
+		<!-- 没有订单列表 -->
+		<no-list v-if="lists.length === 0" name="no-order" txt="暂无数据~" />
+		<u-toast ref="uToast" />
+	</view>
+</template>
+
+<script>
+import { marketsMag, marketsCancel } from '@/apis/interfaces/market';
+export default {
+	data() {
+		return {
+			lists: [],
+			page: 1,
+			total: 0
+		};
+	},
+	onLoad() {
+		this.getList();
+	},
+	onReachBottom() {
+		if (this.total > this.lists.length) {
+			this.page = this.page + 1;
+			this.getList();
+		} else {
+			this.$refs.uToast.show({
+				title: '吼吼吼~我是有底的~',
+				type: 'error',
+				icon: false,
+				duration: 3000
+			});
+		}
+	},
+	methods: {
+		getList() {
+			let data = {
+				perPage: 10,
+				page: this.page
+			};
+			marketsMag(data)
+				.then(res => {
+					console.log(res.markets.data);
+					this.lists = this.lists.concat(res.markets.data);
+					this.total = res.markets.page.total;
+				})
+				.catch(err => {
+					this.$refs.uToast.show({
+						title: err.message,
+						type: 'error',
+						icon: false,
+						duration: 3000
+					});
+				});
+		},
+		// 取消转让
+		removeGoods(id, index) {
+			marketsCancel(id).then(res => {
+				uni.showToast({
+					icon : 'none',
+					title: res
+				})
+				let statusObj = this.lists[index]
+				statusObj.status = {
+					value: 2,
+					text : '已取消',
+				}
+				this.$set(this.lists, index, statusObj)
+			}).catch(err => {
+				uni.showToast({
+					icon : 'none',
+					title: err.message
+				})
+			})
+		}
+	},
+	onNavigationBarButtonTap(){
+		this.$Router.push({name: "marketLogs", params: {type: 'my'}})
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+	.NumberWeight {
+		box-sizing: border-box;
+		// 订单列表
+		.order-item {
+			background-color: white;
+			margin: $margin;
+			border-radius: $radius;
+			padding: $padding;
+			.order-info{
+				position: relative;
+				padding-left: 188rpx;
+				min-height: 168rpx;
+				.order-cover{
+					position: absolute;
+					top: 0;
+					left: 0;
+					height: 168rpx;
+					width: 168rpx;
+				}
+				.title{
+					font-weight: bold;
+					font-size: $title-size-lg;
+					color: $text-color;
+					line-height: 48rpx;
+					height: 48rpx;
+					display: flex;
+					justify-content: space-between;
+					text{
+						font-size: 80%;
+						font-weight: normal;
+					}
+				}
+				.text{
+					line-height: 40rpx;
+					height: 40rpx;
+					font-size: $title-size-sm;
+					color: $text-gray;
+					@extend .nowrap;
+				}
+			}
+			.order-tool{
+				margin-top: $margin - 10;
+				padding-top: $padding - 10;
+				border-top: solid 1rpx $border-color;
+				display: flex;
+				justify-content: space-between;
+				.price{
+					color: $text-price;
+					font-weight: bold;
+					font-size: $title-size-m;
+					line-height: 50rpx;
+				}
+				.order-btn{
+					background: $text-price;
+					color: white;
+					padding: 0 $padding;
+					line-height: 50rpx;
+					border-radius: 25rpx;
+					font-size: $title-size-m;
+				}
+				.order-status{
+					color: $text-gray-m;
+				}
+			}
+		}
+	}
+</style>