跟新

pages.json

@@ -128,7 +128,8 @@
 				"path" : "merge/index",
 				"style" : 
 				{
-					"navigationBarTitleText" : "证件照合成"
+					"navigationBarTitleText" : "证件照合成",
+					"navigationStyle": "custom"
 				}
 			}
 

pagesA/merge/index.vue

@@ -1,22 +1,204 @@
 <template>
 	<view>
+		<view class="content photo_back">
+			<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" :theme="theme" />
+			<view class="photo_main" :style="'margin-top:'+margin_top+'px'">
+
+				<view class="search_div" style="margin-top: 20rpx;">
+					<view class="search_div_1">
+						<image src="/static/img/common/search_icon.png" />
+					</view>
+					<view class="search_div_2">
+						<u--input placeholder="请输入搜索内容" border="none" v-model="search_text"></u--input>
+					</view>
+					<view class="search_div_3" @tap="goSearch">搜索</view>
+				</view>
+
+
+				<view class="tabs_div">
+					<u-tabs @click="changeTab()"  :current="this_tab" :list="list1" lineWidth="25" lineHeight="10"
+						:lineColor="`url(${lineBg}) 100% 100%`" :activeStyle="{
+					        color: '#333333',
+					        fontWeight: 'bold',
+					        transform: 'scale(1.2)'
+					    }" :inactiveStyle="{
+					        color: '#333333',
+					        transform: 'scale(1)'
+					    }" itemStyle="padding-left: 15; padding-right:15px; height: 100rpx; width:140rpx">
+					</u-tabs>
+				</view>
+
+
+				<scroll-view class="photo_list_div" 
+				enable-flex="true" 
+				scroll-y="true"
+				 scroll-with-animation="true"
+				 @scrolltolower="lower"
+				  
+				 lower-threshold="50">
+					
+					<view class="photo_list_div_one" v-for="(item,key) in temList"  :key="key" @tap="goThis(item.id)">
+						<view class="photo_list_div_one_img"  >
+						
+							<image
+								:src="item.url"
+								mode="aspectFill" />
+						</view>
+						<view class="photo_list_div_one_text">
+							{{item.title}}
+						</view>
+					</view>
+				</scroll-view>
+
+
+			</view>
+
+		</view>
+
 
 	</view>
 </template>
 
 <script>
+	import custom_navbar from "../photo/components/photo_header.vue";
 	export default {
+		components: {
+			custom_navbar
+
+		},
 		data() {
 			return {
+				navbar_title: '证件照合成',
+				theme: "white",
+				search_text: '',
+				margin_top: 0,
+				lineBg: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAOCAYAAABDwm71AAAAAXNSR0IArs4c6QAAAm5JREFUSEu1lD1oFEEUx39vZhOCpghikUIwkMKAjYWFEEELQdQTRfwqLGyMgsFcNDEWEbYQNB+Sw7ugdilSBDQ2tikSsFCwsBFiIVikSBEwQoRLuMzT3ds9z8vtXcjHwOzCzs57v/ef/xshGmdeaLsVUgZQYeZ9t3yN13bz/bpf2wVSYQ7DTNdQMa8Ej1RO76JkRPBQ8JS8OAbfpeX5bkLlHumAcTyxihcIAuSBvlsjMi7nc3pY4TPQFJIq2GiKY3TpF49nfQk27NjwffX25RkzSreJckVggS4FhQ5JZbVHhEwpaxlYsMk4PjYYbk6m5dtOkGUG9ZBzTFjHsUCASrAgh0I6BKMMrFyxeJN15A28susMTTyUxa0A+v3auqeRHqP0GcWLTyURLDL9fOivCHfDpljFAFCZ8oS3P38z98aXlVqQvq/N4jjhKddNcYZApYKrK5ZXw9HQ/OfG9YEoo5UeK1VTcbwhuKPwN9m8VeYNLHqO5cAnxtFs4YBxdFilw4BnXdG3teLFHgO6Q/PHFZ/N6QUDU6I0JSpWL3iVAsrsUA8sr3Cja0SmS9dF6S7LameDMmmgrW6FtSCKTVNUiVDdeootoFy+PSqfYpaSYvGHi2PaIoaXhtAT/wXcFqyrfpQCE2ur9PZmZLncrxvA4sVLWe206+SscqSqWberGHwRSN97KnPVGigRLP75akZPNzjSxnHKgrdlFYuKFQzMWMez+wlAiUeZ1P5XhrV1r+GacZy0cNwo+2s2yT+PLXmOD1aZlTWmB4ZlYTP3YF3FkoLc8bVNGjkYNUqLB82R0VeMY9kTfqw6vg/7mwOpzPMHTiZrgwPNrpsAAAAASUVORK5CYII=',
+				
+				
+				list1: [{
+					name: '普通寸照'
+				}, {
+					name: '考试寸照',
+				},
+				{
+					name: '社会寸照',
+				}],
+				this_tab:0,
+				
+				curPage: 0,
+				total: 0,
+				temList:[]
 
 			}
 		},
+
+		mounted() {
+			//this.getScreenSize();
+			//initListHeight();
+		},
 		methods: {
+			lower(){
+				console.log('this is lower')
+				this.loadMore();
+			},
+			
+			
+			loadMore() {
+			
+				let isLoad = Math.ceil(this.total / 10) > this.curPage;
+				if (isLoad) {
+					this.getList();
+				}
+			},
+			
+			getNavHeight(e) {
+				this.margin_top += e;
+			},
+			goSearch() {
+				this.total =0;
+				this.temList=[];
+				this.curPage = 0;
+				this.getList();
+			},
+			changeTab(e) {
+				this.this_tab = e.index;
+				this.total =0;
+				this.temList = [];
+				this.curPage = 0;
+				let that = this;
+				setTimeout(function(){
+					that.getList();
+				},1000)
+			},
+			
+			onLoad(){
+				this.getList();
+			},
+			
+			getListData(){
+				let list = [];
+				let n= 0;
+				for(n=0;n<10;n++){
+					let t = {};
+					t.url = 'https://img30.360buyimg.com/sku/jfs/t1/221254/4/39390/74349/661e039aF46114279/48532008a0001dd0.jpg'
+					t.id = '123';
+					t.title = '哈哈哈哈哈哈哈哈哈哈或或或哈哈哈哈哈哈哈哈哈哈或或或';
+					list.push(t);
+				}
+				
+				return {total:32,list:list};
+			},
+			getList(){
+				
+				let params = {
+					page: this.curPage + 1,
+					limit: 10,
+					sex: this.this_tab,
+					text:this.search_text				
+				};
+				
+				let res = this.getListData();		
+					
+				
+				this.curPage = params.page;				
+				this.total = res.total;
+				
+				let datas = [...this.temList];
+				
+				if (params.page > 1) {
+					datas.push(...res.list)
+				} else {
+					datas = res.list;					
+				}
+				
+				this.temList = datas;
+				
+			},
+			goThis(id){
+				uni.navigateTo({
+					url:'/pagesA/photo/photo_2?id='+id
+				})
+			}
 			
 		}
+		
 	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	@import '../photo/this.scss';
 
+	// page {
+	// 	//background-color: #E3E8FE !important;
+	// }
+
+	.photo_back {
+		background-color: #E3E8FE;
+		min-height: 100vh;
+		width: 100%;
+		top: 0;
+		left: 0;
+		height: 100%;
+		overflow: hidden;
+	}
 </style>