用户登录流程开发接口对接

2021-08-09 17:20:38 +08:00
parent 3c3d946eb5
commit bfea54eb8f
37 changed files with 8399 additions and 8539 deletions
--- a/pages/market/index.vue
+++ b/pages/market/index.vue
@@ -0,0 +1,129 @@
+<template>
+	<view>
+		<view class="tabs">
+			<view class="tabs-item" :class="{'show': tabIndex == 0}" @click="onTabs" data-index="0">最新</view>
+			<view class="tabs-item" :class="{'show': tabIndex == 1}" @click="onTabs" data-index="1">
+				价格
+				<image
+					class="icon"
+					mode="widthFix" :src="require(marketType == 'low' ? '@/static/icons/market_icon_low.png': '@/static/icons/market_icon_high.png')"
+				/>
+			</view>
+		</view>
+		<view class="lists">
+			<view class="item" v-for="(item, index) in 10" :key="index">
+				<image class="cover" src="@/static/dev/good_cover_00.jpg" mode="aspectFill"></image>
+				<view class="content">
+					<view class="title nowrap">易品新境权证<text>*1</text></view>
+					<view class="text nowrap">谷风一木3层软抽面巾纸</view>
+					<view class="text nowrap">转让方：温文尔雅的小阿玉</view>
+					<view class="text nowrap">Hash：djsakljkljfl3213dsaHKLDJS82231csa</view>
+				</view>
+				<view class="price">￥21000.00/个</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				tabIndex	: 0,
+				marketType	: 'low',
+				marketArray : []
+			};
+		},
+		methods:{
+			onTabs(e){
+				let index = e.target.dataset.index
+				if(index == 0 && index == this.tabIndex) return	
+				if(index == 1 && index == this.tabIndex) this.marketType = this.marketType == 'low' ? 'high': 'low'
+				this.tabIndex = index
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.tabs{
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 9;
+		width: 100%;
+		display: flex;
+		justify-content: space-around;
+		background: white;
+		height: 70rpx;
+		line-height: 70rpx;
+		text-align: center;
+		.tabs-item{
+			font-size: $title-size-m;
+			color: $text-gray;
+			.icon{
+				width: 32rpx;
+				height: 32rpx;
+				vertical-align: middle;
+				margin-left: $margin / 3;
+				margin-bottom: 4rpx;
+			}
+			&.show{
+				color: $text-price;
+			}
+		}
+	}
+	// 列表
+	.lists{
+		padding: 70rpx $padding $padding;
+		.item{
+			min-height: 168rpx;
+			position: relative;
+			background: white;
+			border-radius: $radius/2;
+			margin-top: $margin;
+			padding: $padding;
+			.cover{
+				position: absolute;
+				left: $padding;
+				top: $padding;
+				width: 168rpx;
+				height: 168rpx;
+			}
+			.content{
+				padding-left: calc(168rpx + #{$padding});
+				.title{
+					position: relative;
+					font-size: $title-size-lg;
+					color: $text-color;
+					font-weight: bold;
+					line-height: 52rpx;
+					padding-right: 60rpx;
+					text{
+						position: absolute;
+						right: 0;
+						top: 0;
+						width: 60rpx;
+						text-align: right;
+						font-weight: normal;
+					}
+				}
+				.text{
+					font-size: $title-size-sm;
+					color: $text-gray;
+					height: 40rpx;
+					line-height: 40rpx;
+				}
+			}
+			.price{
+				margin-top: $margin - 10;
+				padding-top: $padding - 10;
+				font-size: $title-size-m;
+				text-align: right;
+				border-top: solid 1rpx $border-color;
+				font-weight: bold;
+				color: $text-price;
+			}
+		}
+	}
+</style>