zpj 2 лет назад
Родитель
Сommit
8f537bd41b
4 измененных файлов с 335 добавлено и 27 удалено
  1. 3 0
      common/css/common.css
  2. 7 25
      pages.json
  3. 185 0
      pages/index/search-list.vue
  4. 140 2
      pages/index/search-record.vue

+ 3 - 0
common/css/common.css

@@ -281,6 +281,9 @@ image {
 .p-24{
 .p-24{
 	padding: 24rpx;
 	padding: 24rpx;
 }
 }
+.p-32{
+	padding: 32rpx;
+}
 .p-t-10 {
 .p-t-10 {
 	padding-top: 10rpx;
 	padding-top: 10rpx;
 }
 }

+ 7 - 25
pages.json

@@ -58,6 +58,12 @@
 			"style": {
 			"style": {
 				"navigationBarTitleText": "搜索"
 				"navigationBarTitleText": "搜索"
 			}
 			}
+		},
+		{
+			"path": "pages/index/search-list",
+			"style": {
+				"navigationBarTitleText": "搜索"
+			}
 		}
 		}
 	],
 	],
 	"subPackages": [
 	"subPackages": [
@@ -75,30 +81,6 @@
 		{
 		{
 			"root": "pages-my",
 			"root": "pages-my",
 			"pages": [
 			"pages": [
-				{
-					"path": "user-info",
-					"style": {
-						"navigationBarTitleText": "个人资料"
-					}
-				},
-				{
-					"path": "set-user-name",
-					"style": {
-						"navigationBarTitleText": "昵称设置"
-					}
-				},
-				{
-					"path": "set-user-sex",
-					"style": {
-						"navigationBarTitleText": "性别设置"
-					}
-				},
-				{
-					"path": "set-user-phone",
-					"style": {
-						"navigationBarTitleText": "更换手机号"
-					}
-				},
 				{
 				{
 					"path": "my-ticket",
 					"path": "my-ticket",
 					"style": {
 					"style": {
@@ -149,7 +131,7 @@
 		"current": 0,
 		"current": 0,
 		"list": [{
 		"list": [{
 			"name": "列表调试",
 			"name": "列表调试",
-			"path": "pages-my/set-user-phone",
+			"path": "pages-my/appraise",
 			"query": ""
 			"query": ""
 		}]
 		}]
 	}
 	}

+ 185 - 0
pages/index/search-list.vue

@@ -0,0 +1,185 @@
+<template>
+	<view class="seacrh-record-index iPhone-bottom flex-common-css box-border-box">
+		<view class="seacrh-bg"></view>
+		<Nav title='搜索' bgckgroundBox='transparent'></Nav>
+		
+		<view class="s-input">
+			<view class="input-icon">
+				<uni-icons type="search" size="18" color="#999"></uni-icons>
+			</view>
+			<input v-model="search" type="text" placeholder="店铺名称或者商品名称">
+			<view class="input-buttom fs-28 fc-f fw-500" @click="toList()">搜索</view>
+		</view>
+		
+
+		
+		<scroll-view scroll-y="true" class="scroll-view-css seacrh-info box-border-box p-24" @scrolltolower="scrolltolower">
+			<view class="goos-list-box box-border-box p-24 display-flex" v-for="(item,i) in 10">
+				<image class="left-img" src="../../static/img/my/bg.png" mode="scaleToFill"></image>
+				<view class="flex-1">
+					<view class="align-items-center mb-8">
+						<view class="right-box-title fs-32 fw-600 text-overflow-ellipsis-one">蜜雪冰城(重工页店)122332323232323232323232</view>
+						<image class="right-box-title-img" src="@/static/img/toRight.png" mode=""></image>
+					</view>
+					<view class="align-items-center mb-8">
+						<image class="img-x mr-12" src="@/static/img/my/wdpj.png" mode=""></image>
+						<view class="fs-26 fw-600 fc-FF7F00 mr-12">4.5分</view>
+						<view class="fc-6 fs-24 mr-12">| 预计38分钟 |</view>
+						<view class="fc-6 fs-24 mr-12">855人购买</view>
+					</view>
+					<view class="align-items-center flex-wrap-wrap">
+						<view class="quan-list display-flex mr-12 mb-12" v-for="(item,i) in 3" :key="i">
+							<view class="quan-list-1 fs-24 fc-f">券</view>
+							<view class="quan-list-2 fs-24 fc-FB3D03">10元</view>
+						</view>
+					</view>
+					<view class="goods-items-list display-flex">
+						<view class="goods-items-list-box" v-for="(info,i) in 10">
+							<image class="mb-12" src="@/static/img/my/bg.png" mode=""></image>
+							<view class="mb-8 fw-600 text-overflow-ellipsis-one fs-26">AAAAAAAAAAAAAA</view>
+							<view class="">
+								<span class="fs-24 fc-FB3D03">¥</span>
+								<span class="fs-32 fc-FB3D03 fw-b">3.99</span>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return{
+				search:'',
+			}
+		},
+		onLoad(e) {
+			console.log(e);
+			this.search = e.search
+		},
+		onShow() {
+			
+		},
+		methods:{
+			scrolltolower(){
+				console.log('触底刷新');
+			},
+		},
+	}
+</script>
+
+<style scoped lang="scss">
+	.seacrh-record-index{
+		position: relative;
+		
+		
+		
+		.seacrh-bg{
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 376rpx;
+			background-image: linear-gradient(to right, #C9F7FC,#F9F6E0,#F6F5F3);
+			z-index: -1;
+		}
+		.s-input{
+			margin-top: 24rpx;
+			width: 100%;
+			height: 72rpx;
+			padding: 0 24rpx;
+			box-sizing: border-box;
+			position: relative;
+			.input-icon{
+				position: absolute;
+				left: 48rpx;
+				top: 20rpx;
+			}
+			input{
+				font-size: 32rpx;
+				width: 100%;
+				height: 72rpx;
+				background: #FFFFFF;
+				border-radius: 200rpx;
+				box-sizing: border-box;
+				padding: 0 126rpx 0 78rpx;
+			}
+			.input-buttom{
+				width: 120rpx;
+				height: 60rpx;
+				background: linear-gradient( 90deg, #57CAFF 0%, #41ABF5 100%);
+				border-radius: 200rpx;
+				text-align: center;
+				line-height: 60rpx;
+				position: absolute;
+				right: 30rpx;
+				top: 6rpx;
+			}
+		}
+		.seacrh-info{
+			margin-top: 20rpx;
+			// border-radius: 24rpx 24rpx 0rpx 0rpx;
+		}
+		
+		
+		.goos-list-box{
+			width: 100%;
+			min-height: 428rpx;
+			background: #FFFFFF;
+			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(51,51,51,0.1);
+			border-radius: 20rpx;
+			margin-bottom: 20rpx;
+			.goods-items-list{
+				width: 530rpx;
+				overflow-y: scroll;
+				.goods-items-list-box{
+					width: 140rpx;
+					margin-right: 16rpx;
+					image{
+						width: 140rpx;
+						height: 140rpx;
+						border-radius: 12rpx
+					}
+				}
+			}
+			.left-img{
+				width: 100rpx;
+				height: 100rpx;
+				border-radius: 12rpx;
+				margin-right: 16rpx;
+			}
+			.img-x{
+				width: 24rpx;
+				height: 24rpx;
+			}
+			.right-box-title{
+				width: 438rpx;
+			}
+			.right-box-title-img{
+				width: 32rpx;
+				height: 32rpx;
+				margin-left: auto;
+			}
+			.quan-list{
+				.quan-list-1{
+					width: 32rpx;
+					height: 34rpx;
+					background: #FB3D03;
+					border-radius: 5rpx 0rpx 0rpx 5rpx;
+					text-align: center;
+				}
+				.quan-list-2{
+					box-sizing: border-box;
+					padding: 0 2rpx;
+					height: 34rpx;
+					border-radius: 0 5rpx 5rpx 0;
+					border: 1rpx solid #FB3D03;
+					text-align: center;
+				}
+			}
+		}
+	}
+</style>

+ 140 - 2
pages/index/search-record.vue

@@ -1,17 +1,155 @@
 <template>
 <template>
-	<view class="seacrh-record-index">
+	<view class="seacrh-record-index iPhone-bottom flex-common-css box-border-box">
+		<view class="seacrh-bg"></view>
 		<Nav title='搜索' bgckgroundBox='transparent'></Nav>
 		<Nav title='搜索' bgckgroundBox='transparent'></Nav>
+		
+		<view class="s-input">
+			<view class="input-icon">
+				<uni-icons type="search" size="18" color="#999"></uni-icons>
+			</view>
+			<input v-model="search" type="text" placeholder="店铺名称或者商品名称">
+			<view class="input-buttom fs-28 fc-f fw-500" @click="toList()">搜索</view>
+		</view>
+		
+		<view class="scroll-view-css bgc-f seacrh-info box-border-box p-32">
+			<view class="flex-justify-space mb-32" v-if="list.length > 0">
+				<view class="fs-32 fw-600 fc-3">搜索历史</view>
+				<view class="align-items-center">
+					<view @click="isOpen=!isOpen" class="">{{isOpen?'收起':'展开'}}</view>
+					<view @click="isOpen=!isOpen" :class="isOpen?'down':'up'">
+						<uni-icons type="right" size="14" color="#999"></uni-icons>
+					</view>
+					<view class="view-x"></view>
+					<uni-icons @click="list = []" type="trash" size="18" color="#999"></uni-icons>
+				</view>
+			</view>
+			<view :class="!isOpen?'hide-h':''" class="flex-wrap-wrap mb-50" v-if="list.length > 0">
+				<view class="fs-28 list-item text-overflow-ellipsis-one" @click="toList(item.name)" v-for="(item,i) in list" :key="i">{{item.name}}</view>
+			</view>
+			
+		
+		</view>
 	</view>
 	</view>
 </template>
 </template>
 
 
 <script>
 <script>
 	export default {
 	export default {
-		
+		data(){
+			return{
+				search:'',
+				isOpen:false,
+				list:[{name:'土猪',},{name:'土猪土猪土猪土猪土猪土猪',},{name:'土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪',},{name:'土猪土猪',},{name:'土猪',},
+				{name:'土猪',},{name:'土猪土猪土猪土猪土猪土猪',},{name:'土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪',},{name:'土猪土猪',},{name:'土猪',},
+				{name:'土猪',},{name:'土猪土猪土猪土猪土猪土猪',},{name:'土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪',},{name:'土猪土猪',},{name:'土猪',},
+				{name:'土猪',},{name:'土猪土猪土猪土猪土猪土猪',},{name:'土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪土猪',},{name:'土猪土猪',},{name:'土猪',},],
+			}
+		},
+		onShow() {
+			
+		},
+		methods:{
+			toList(name){
+				let search = '';
+				if(name){
+					search = name;
+				}else{
+					search = this.search;
+				}
+				
+				uni.navigateTo({
+					url:"pages/index/search-list?search=" + search
+				})
+			},
+		},
 	}
 	}
 </script>
 </script>
 
 
 <style scoped lang="scss">
 <style scoped lang="scss">
 	.seacrh-record-index{
 	.seacrh-record-index{
+		position: relative;
+		
+		.hide-h{
+			height: 232rpx !important;
+			overflow: hidden !important;
+		}
+		
+		.down{
+			transform: rotate(-90deg);
+			transition: all 0.5s;
+		}
+		.up{
+			transform: rotate(90deg);
+			transition: all 0.5s;
+		}
+		.view-x{
+			width: 2rpx;
+			height: 20rpx;
+			background-color: #eee;
+			margin: 0 24rpx;
+		}
+		
+		.find-item{
+			width: 48%;
+			text-align: left;
+		}
+		
+		.list-item{
+			max-height: 688rpx;
+			min-width: 10rpx;
+			height: 56rpx;
+			line-height: 56rpx;
+			background: #F7F8FC;
+			border-radius: 200rpx;
+			margin: 0 8rpx 32rpx 0;
+			box-sizing: border-box;
+			padding: 0 24rpx;
+		}
 		
 		
+		.seacrh-bg{
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 376rpx;
+			background-image: linear-gradient(to right, #C9F7FC,#F9F6E0,#F6F5F3);
+			z-index: -1;
+		}
+		.s-input{
+			margin-top: 24rpx;
+			width: 100%;
+			height: 72rpx;
+			padding: 0 24rpx;
+			box-sizing: border-box;
+			position: relative;
+			.input-icon{
+				position: absolute;
+				left: 48rpx;
+				top: 20rpx;
+			}
+			input{
+				font-size: 32rpx;
+				width: 100%;
+				height: 72rpx;
+				background: #FFFFFF;
+				border-radius: 200rpx;
+				box-sizing: border-box;
+				padding: 0 126rpx 0 78rpx;
+			}
+			.input-buttom{
+				width: 120rpx;
+				height: 60rpx;
+				background: linear-gradient( 90deg, #57CAFF 0%, #41ABF5 100%);
+				border-radius: 200rpx;
+				text-align: center;
+				line-height: 60rpx;
+				position: absolute;
+				right: 30rpx;
+				top: 6rpx;
+			}
+		}
+		.seacrh-info{
+			margin-top: 20rpx;
+			border-radius: 24rpx 24rpx 0rpx 0rpx;
+		}
 	}
 	}
 </style>
 </style>