Skip to content

M
mallapp
Commit 7610a517 authored by Mac's avatar Mac
Browse files
Options

首页的瀑布流

parent 0c9fbe11
Hide whitespace changes
Inline Side-by-side
Showing with 501 additions and 6 deletions
components/matchmaking/index.vue
View file @ 7610a517
<template>
<view class="matchmaking" style="margin-bottom:70px;">
<view class="matchmaking-box" v-for="(item,index) in navs.list" :key='index' @click="goDetail(item)">
<view class="matchmaking" style="margin-bottom:10px;">
<view v-if='navs.listStyle == 1' >
<waterfallsFlow :single="true" :list="navs.list" @wapper-lick='goDetail()'>
<view v-for="(item, index) of navs.list" :key="index" slot="slot{{index}}">
<view class="pb-box">
<u-avatar :src="item.Photo" size="72"></u-avatar>
<image class="gstyle2" v-if="item.SexStr=='男'" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nan-b.png" ></image>
<image class="gstyle2" v-if="item.SexStr=='女'" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nv-b.png" ></image>
<view class="boxt-center">
<view class="row">
<view class="box-name">{{item.name}}</view>
</view>
<view class="row">
<view class="boxtc-b-item">{{item.Age}}岁</view>
</view>
</view>
</view>
</view>
</waterfallsFlow>
</view>
<view class="matchmaking-box" v-for="(item,index) in navs.list" :key='index' @click="goDetail(item)" v-if="navs.listStyle==-1 || navs.listStyle==0">
<view class="box-top">
<u-avatar :src="item.Photo" size="80"></u-avatar>
<image class="gstyle" v-if="item.SexStr=='男'" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nan-b.png" ></image>
<image class="gstyle" v-if="item.SexStr=='女'" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nv-b.png" ></image>
<view class="boxt-center">
<view class="row">
<!-- <view class="boxtc-t-f" :style="{color:mainColor}">
{{item.Score}}分
</view> -->
<view class="box-name">{{item.name}}</view>
</view>
<view class="row">
......@@ -38,8 +54,10 @@
</template>
<script>
import waterfallsFlow from './maramlee-waterfalls-flow.vue'
export default {
props: ["navs"],
components: { waterfallsFlow },
data(){
return{
type:2,
......@@ -86,6 +104,7 @@
width: 32rpx;
height: 32rpx;
}
.matchmaking .boxt-center{
width: 1px;
flex: 1;
......@@ -160,4 +179,22 @@
margin-right: 10px;
overflow: hidden;
}
.matchmaking .pb-box{
width: 100%;
padding: 10px 5px;
background: #FFF;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
display: flex;
align-items: center;
position: relative;
}
.matchmaking .gstyle2{
position: absolute;
left: 64rpx;
top: 64rpx;
width: 24rpx;
height: 24rpx;
}
</style>
components/matchmaking/maramlee-waterfalls-flow.vue 0 → 100644
View file @ 7610a517
<template>
<view class="waterfalls-box" :style="{ height: (height+10) + 'px' }">
<!-- #ifdef MP-WEIXIN -->
<view
v-for="(item, index) of list"
class="waterfalls-list"
:key="item[idKey]"
:id="'waterfalls-list-id-' + item[idKey]"
:ref="'waterfalls-list-id-' + item[idKey]"
:style="{
'--offset': offset + 'px',
'--cols': cols,
top: allPositionArr[index].top || 0,
left: allPositionArr[index].left || 0,
}"
@click="$emit('wapper-lick', item)"
>
<image
class="waterfalls-list-image"
mode="widthFix"
:class="{ single }"
:style="imageStyle"
:src="item[imageSrcKey][0] || ' '"
@load="imageLoadHandle(index)"
@error="imageLoadHandle(index)"
@click="$emit('image-click', item)"
/>
<slot name="slot{{index}}" />
</view>
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<view
v-for="(item, index) of list"
class="waterfalls-list"
:key="item[idKey]"
:id="'waterfalls-list-id-' + item[idKey]"
:ref="'waterfalls-list-id-' + item[idKey]"
:style="{
'--offset': offset + 'px',
'--cols': cols,
...listStyle,
...(allPositionArr[index] || {}),
}"
@click="$emit('wapper-lick', item)"
>
<image
class="waterfalls-list-image"
:class="{ single }"
mode="widthFix"
:style="imageStyle"
:src="item[imageSrcKey] || ' '"
@load="imageLoadHandle(index)"
@error="imageLoadHandle(index)"
@click="$emit('image-click', item)"
/>
<slot v-bind="item" />
</view>
<!-- #endif -->
</view>
</template>
<script>
export default {
props: {
list: { type: Array, required: true },
// offset 间距，单位为 px
offset: { type: Number, default: 10 },
// 列表渲染的 key 的键名，值必须唯一，默认为 id
idKey: { type: String, default: "id" },
// 图片 src 的键名
imageSrcKey: { type: String, default: "AlbumList" },
// 列数
cols: { type: Number, default: 2, validator: (num) => num >= 2 },
imageStyle: { type: Object },
// 是否是单独的渲染图片的样子，只控制图片圆角而已
single: { type: Boolean, default: false },
// #ifndef MP-WEIXIN
listStyle: { type: Object },
// #endif
},
data() {
return {
topArr: [], // left, right 多个时依次表示第几列的数据
allPositionArr: [], // 保存所有的位置信息
allHeightArr: [], // 保存所有的 height 信息
height: 0, // 外层包裹高度
oldNum: 0,
num: 0,
};
},
created() {
this.refresh();
},
methods: {
imageLoadHandle(index) {
const id = "waterfalls-list-id-" + this.list[index][this.idKey],
query = uni.createSelectorQuery().in(this);
query
.select("#" + id)
.fields({ size: true }, (data) => {
this.num++;
this.$set(this.allHeightArr, index, data.height);
if (this.num === this.list.length) {
for (let i = this.oldNum; i < this.num; i++) {
const getTopArrMsg = () => {
let arrtmp = [...this.topArr].sort((a, b) => a - b);
return {
shorterIndex: this.topArr.indexOf(arrtmp[0]),
shorterValue: arrtmp[0],
longerIndex: this.topArr.indexOf(arrtmp[this.cols - 1]),
longerValue: arrtmp[this.cols - 1],
};
};
const { shorterIndex, shorterValue } = getTopArrMsg();
const position = {
top: shorterValue + "px",
left: (data.width + this.offset) * shorterIndex + "px",
};
this.$set(this.allPositionArr, i, position);
this.topArr[shorterIndex] =
shorterValue + this.allHeightArr[i] + this.offset;
this.height = getTopArrMsg().longerValue - this.offset;
}
this.oldNum = this.num;
// 完成渲染 emit `image-load` 事件
this.$emit("image-load");
}
})
.exec();
},
refresh() {
let arr = [];
for (let i = 0; i < this.cols; i++) {
arr.push(0);
}
this.topArr = arr;
this.num = 0;
this.oldNum = 0;
this.height = 0;
},
},
};
</script>
<style lang="scss" scoped>
// 这里可以自行配置
$border-radius: 6px;
.waterfalls-box {
position: relative;
width: 100%;
overflow: hidden;
.waterfalls-list {
margin-left: 15px;
width: calc((100% - var(--offset) * (var(--cols) - 1)) / var(--cols) - 15px);
position: absolute;
background-color: #fff;
border-radius: $border-radius;
// 防止刚开始渲染时堆叠在第一幅图的地方
left: calc(-50% - var(--offset));
box-shadow: 0px 5px 25px 0px rgba(218, 220, 230, 0.85);
// border: 1px solid rgba(218, 220, 230, 0.85);
.waterfalls-list-image {
width: 100%;
will-change: transform;
// border-radius: $border-radius $border-radius 0 0;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
display: block;
&.single {
// border-radius: $border-radius;
}
}
}
}
</style>
pages.json
View file @ 7610a517
......@@ -595,6 +595,8 @@
"style": {
"navigationStyle": "custom"
}
},{
"path":"userList"//用户列表
}]
},
//韩国馆项目 { "root": "pages/kotra", "pages": [{ "path": "contanctus" },{ "path": "contanctDetail" },{ "path": "compInformation" },{
......
pages/blindDate/userList.vue 0 → 100644
View file @ 7610a517
<template>
<div :style="{'background-color': '#f6f6f6','height': '100vh','overflow': 'hidden'}">
<u-empty v-if="data.list.length == 0" text="暂无内容" mode="list"></u-empty>
<view style="height: 100%;" v-if="data.list.length > 0">
<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower"
style="height: 100%; padding-bottom: 0px;">
<matchmaking :navs="data" ></matchmaking>
<u-loadmore
:status="status"
:load-text="loadText"
:font-size="24"
:margin-top="20"
:margin-bottom="20"
bg-color="#f6f6f6"
/>
</scroll-view>
</view>
</div>
</template>
<script>
import matchmaking from "@/components/matchmaking/index"
export default {
components:{
matchmaking
},
data() {
return {
mainColor: '',
active: 0,
searchKey:"",
typeList: [],
msg:{
pageIndex:1,
pageSize:20,
BrandName:'',
ProjectType:'',
Plumbing:-1,
Caliber:-1,
Sewage:-1,
RanQi:-1,
DianLiang:-1,
PaiYan:-1,
KongTiao:-1,
XinFeng:-1,
BrandClassId:0,
},
loadText: {
loadmore: "轻轻上拉，加载更多",
loading: "努力加载中",
nomore: "没有更多了",
},
page_count:1,
status: "loadmore",
data:{
listStyle:1,
list:[
{
"id":123978,
"name":"哈哈",
"Photo":"https://thirdwx.qlogo.cn/mmopen/vi_32/MIcwibwjkSRA23jiaQUmdC91JnB0GRaOm2NUwgdepCzlhWAia5fA7EP5qQ3wI4cAsGrfkNwmnwV8ZB9ZFoNBic1C0g/132",
"SexStr":"女",
"Age":"31",
"Education":"硕士及以上",
"Marriage":"未婚",
"MatchingRate":90,
"Score":0,
"Album":"[\u0022https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637517704869416565.jpg\u0022,\u0022https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637517704878459534.jpg\u0022,\u0022https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637517704888225159.jpg\u0022,\u0022https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637517704897121643.jpg\u0022]",
"AlbumList":[
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637517704869416565.jpg",
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637517704878459534.jpg",
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637517704888225159.jpg",
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637517704897121643.jpg"
]
},
{
"id":123560,
"name":"仅此丶而已。",
"Photo":"https://thirdwx.qlogo.cn/mmopen/vi_32/ZuZMw8YxMw3AibVB9YUNeHY1TYic8IsLia5FTjbAKGkFPJHUXttibAKuvJicl16ibcHg7nQPxp8VOliceoVgOOk7E7NCA/132",
"SexStr":"男",
"Age":"31",
"Education":"本科",
"Marriage":"未婚",
"MatchingRate":90,
"Score":0,
"Album":"[\u0022https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637508232714043127.jpg\u0022,\u0022https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637508232721601720.jpg\u0022,\u0022https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637508232729384924.jpg\u0022,\u0022https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637508232735810705.jpg\u0022,\u0022https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637508232742988439.jpg\u0022,\u0022https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637508232751308752.jpg\u0022]",
"AlbumList":[
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637508232714043127.jpg",
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637508232721601720.jpg",
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637508232729384924.jpg",
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637508232735810705.jpg",
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637508232742988439.jpg",
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637508232751308752.jpg"
]
},
{
"id":123559,
"name":"Undefined",
"Photo":"https://thirdwx.qlogo.cn/mmopen/vi_32/BtFBmPKu5rtx5zJRfnNjEzY7EiaUicwcqKRyTLW4kcGI4TYLWvqZU8uAf0wQNBxicqYc04NXUKl4WQaeQJMiaOWtvQ/132",
"SexStr":"男",
"Age":"31",
"Education":"高中及以下",
"Marriage":"未婚",
"MatchingRate":90,
"Score":0,
"Album":"[\u0022https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637508215242324377.jpg\u0022,\u0022https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637508215251865392.jpg\u0022,\u0022https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637508215261103674.jpg\u0022,\u0022https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637508215271396642.jpg\u0022,\u0022https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637508215280742345.jpg\u0022,\u0022https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637508215290947424.jpg\u0022,\u0022https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637508215300859533.jpg\u0022,\u0022https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637508215311377111.jpg\u0022]",
"AlbumList":[
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637508215242324377.jpg",
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637508215251865392.jpg",
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637508215261103674.jpg",
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637508215271396642.jpg",
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637508215280742345.jpg",
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637508215290947424.jpg",
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637508215300859533.jpg",
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637508215311377111.jpg"
]
}
]
}
};
},
onLoad(options) {
if(options && options.id){
this.msg.BrandClassId = options.id
}
// this.init();
},
created() {
this.mainColor = this.$uiConfig.mainColor;
},
mounted() {
uni.setNavigationBarTitle({
title: '用户列表',
});
},
methods: {
init() {
this.request2(
{
url: '/api/AppletTrade/GetBrandPageList',
data: this.msg
},
res => {
if(res.resultCode==1){
this.data.list = this.data.list.concat(res.data.pageData);
this.page_count = res.data.pageCount;
if (this.page_count == 1) {
this.status = "nomore";
}
}
}
);
},
lower(e) {
if (this.msg.pageIndex < this.page_count) {
this.msg.pageIndex++;
this.status = "loading";
this.init();
} else {
this.status = "nomore";
}
},
changeHandler(i) {
this.active = i;
this.msg.BrandClassId = this.typeList[i].ID;
this.msg.pageIndex = 1;
this.data.list= [];
this.init();
},
}
};
</script>
<style>
.good_study_two {
position: relative;
margin-bottom: 12px;
border: 1rpx solid transparent;
border-radius: 10rpx;
overflow: hidden;
box-shadow: 0 4px 10px 1px #e6e5e5;
background-color: #fff;
}
.good_study_two .tips {
width: 64rpx;
height: 64rpx;
position: absolute;
top: 0;
left: 0;
z-index: 4;
}
.good_study_two .img-box {
width: 100%;
height: 0;
padding-top: 100%;
position: relative;
overflow: hidden;
}
.good_study_two .img-box .img-show {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 338rpx;
overflow: hidden;
}
.good_study_two .guding {
position: relative;
}
.good_study_two .guding .img-box {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.good_study_two .good-info {
padding: 15rpx;
height: 112rpx;
}
.good_study_two .good-info .good-name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
margin-bottom: 8px;
color: #111111;
font-size: 26rpx;
font-weight: bold;
}
.good_study_two .good-info .good-price-info {
display: flex;
color: #999999;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
font-size: 22rpx;
}
.good_study_two .good-info .good-price-info .price {
color: #999999;
/* flex: 1; */
font-size: 11px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.good_study_two .good-info .good-price-info .buy {
width: 24px;
text-align: right;
}
</style>
pages/index/index.vue
View file @ 7610a517
......@@ -60,6 +60,7 @@
<educationteacher v-if="d.id == 'educationteacher'" :goods="d.data" :key="di"></educationteacher>
<!--导航栏-->
<navpage v-if="d.id == 'nav-page'" :navs="d.data" :key="di"></navpage>
<!-- 相亲的人物模板 -->
<matchmaking v-if="d.id == 'miaiuser'" :navs="d.data" :key="di"></matchmaking>
<!-- 相亲活动 -->
<miaiactivitytype v-if="d.id == 'miaiactivitytype'" :goods="d.data"></miaiactivitytype>
......@@ -1133,7 +1134,7 @@
yj(){
uni.navigateTo({
url: '/pages/kotra/identification'
url: '/pages/blindDate/userList'
// url: '/pages/kotra/carrier/list'
})
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment