main
JING
8 months ago
parent
8e99deccd4
commit
38490f2de4
@ -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'; |
||||
|
||||
</style> |
||||
// page { |
||||
// //background-color: #E3E8FE !important; |
||||
// } |
||||
|
||||
.photo_back { |
||||
background-color: #E3E8FE; |
||||
min-height: 100vh; |
||||
width: 100%; |
||||
top: 0; |
||||
left: 0; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue