1.8
Panzihang
parent
91d9db0b72
commit
cab8add6e5
|
|
@ -0,0 +1,181 @@
|
|||
<template>
|
||||
<view class="waterfalls-box" :style="{ height: height + '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] || ' '"
|
||||
@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: "image_url" },
|
||||
// 列数
|
||||
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();
|
||||
},
|
||||
watch: {
|
||||
list() {
|
||||
this.list.map((item,idx) => {
|
||||
item.index = idx
|
||||
return item
|
||||
})
|
||||
}
|
||||
},
|
||||
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 {
|
||||
width: calc((100% - var(--offset) * (var(--cols) - 1)) / var(--cols));
|
||||
position: absolute;
|
||||
// background-color: #fff;
|
||||
border-radius: $border-radius;
|
||||
// 防止刚开始渲染时堆叠在第一幅图的地方
|
||||
left: calc(-50% - var(--offset));
|
||||
.waterfalls-list-image {
|
||||
width: 100%;
|
||||
will-change: transform;
|
||||
border-radius: $border-radius $border-radius 0 0;
|
||||
display: block;
|
||||
&.single {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,55 +4,33 @@
|
|||
<view>
|
||||
<view v-for="(item,index) in leftList" :key="item._render_id"
|
||||
class="list-item"
|
||||
:class="{'show': showPage > item._current_page }"
|
||||
>
|
||||
<!-- :class="{'show': showPage > item._current_page }" -->
|
||||
456
|
||||
<helang-waterfall-item
|
||||
:params="item"
|
||||
tag="left"
|
||||
:index="index"
|
||||
@height="onHeight"
|
||||
@click="onClick"
|
||||
></helang-waterfall-item>
|
||||
<!-- <slot name="slot{{item.index}}"></slot> -->
|
||||
<slot :item="item"></slot>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view v-for="(item,index) in rightList" :key="item._render_id"
|
||||
class="list-item"
|
||||
:class="{'show': showPage > item._current_page }"
|
||||
>
|
||||
456
|
||||
<helang-waterfall-item
|
||||
:params="item"
|
||||
@height="onHeight"
|
||||
@click="onClick"
|
||||
tag="right"
|
||||
:index="index"
|
||||
></helang-waterfall-item>
|
||||
<!-- <slot name="slot{{item.index}}"></slot> -->
|
||||
<slot :item="item"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<slot name="default"></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import helangWaterfallItem from "./waterfall-item.vue"
|
||||
|
||||
export default {
|
||||
name:"helangWaterfallList",
|
||||
options:{
|
||||
virtualHost: true
|
||||
},
|
||||
components: {
|
||||
"helang-waterfall-item": helangWaterfallItem
|
||||
},
|
||||
props:{
|
||||
// 组件状态
|
||||
status:{
|
||||
type: String,
|
||||
default:''
|
||||
},
|
||||
// 待渲染的数据
|
||||
list:{
|
||||
type: Array,
|
||||
|
|
@ -67,19 +45,15 @@
|
|||
},
|
||||
},
|
||||
watch:{
|
||||
"$props.status"(newValue,oldValue){
|
||||
// 状态变更为 加载成功 时，执行瀑布流数据渲染
|
||||
if(newValue == 'success'){
|
||||
this.startRender();
|
||||
}else if(!this.showList){
|
||||
this.resetData();
|
||||
}
|
||||
list() {
|
||||
this.list.map((item,idx) => {
|
||||
item.index = idx
|
||||
return item
|
||||
})
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
showList(){
|
||||
return !["fail","empty"].includes(this.$props.status);
|
||||
}
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -98,10 +72,10 @@
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
if(this.$props.status == 'success'){
|
||||
this.startRender();
|
||||
}
|
||||
console.log('-----',this.list);
|
||||
let that = this
|
||||
setTimeout(() => {
|
||||
that.startRender();
|
||||
},500)
|
||||
},
|
||||
methods: {
|
||||
// 监听高度变化
|
||||
|
|
@ -162,7 +136,6 @@
|
|||
}else{
|
||||
this.leftList.push(item);
|
||||
}
|
||||
console.log('r',this.rightList,this.leftList);
|
||||
},
|
||||
// 重置数据
|
||||
resetData(){
|
||||
|
|
@ -176,11 +149,7 @@
|
|||
},
|
||||
// 启动渲染
|
||||
startRender(){
|
||||
if(!this.showList){
|
||||
this.resetData();
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(this.list);
|
||||
if(!this.$props.list || this.$props.list.length < 1){
|
||||
console.log('河浪瀑布流插件提示：当前数据为空，不会触发列表渲染');
|
||||
return;
|
||||
|
|
@ -198,7 +167,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
<style lang="scss" scoped>
|
||||
.waterfall-box {
|
||||
padding: 20rpx 10rpx;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -215,7 +184,7 @@
|
|||
overflow: hidden;
|
||||
height: 0;
|
||||
|
||||
.show{
|
||||
&.show{
|
||||
margin-bottom: 20rpx;
|
||||
opacity: 1;
|
||||
overflow: auto;
|
||||
|
|
@ -279,7 +279,6 @@
|
|||
.itemList {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
margin-top: 40px;
|
||||
|
|
@ -296,6 +295,7 @@
|
|||
padding: 16px;
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
margin-right: 16px;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1149,6 +1149,7 @@
|
|||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
this.itemList.push(...res.data.data.records)
|
||||
console.log(this.itemList)
|
||||
if (res.data.data.records.length == 10) {
|
||||
this.current++
|
||||
this.loadSumOrder()
|
||||
|
|
|
|||
|
|
@ -67,9 +67,9 @@
|
|||
return {
|
||||
screenHeight: "",
|
||||
// rtoswuhan1 wuhan_ceshi1
|
||||
account: '',
|
||||
account: 'wuhan_ceshi1',
|
||||
// q123456
|
||||
password: '',
|
||||
password: 'q123456',
|
||||
// 登录类型 pad
|
||||
mediaType: "pad",
|
||||
// 登录失败提示
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<view class="details">
|
||||
<head-view :title="title"></head-view>
|
||||
<head-view :title="title" url="/pages/quality/index"></head-view>
|
||||
<view class="container contentFixed">
|
||||
<!-- <view class="userInfo">
|
||||
<p>填报人：{{infoData.qdReportPerson}}</p>
|
||||
|
|
@ -193,7 +193,6 @@
|
|||
success: (res) => {
|
||||
if (res.statusCode == 200) {
|
||||
this.infoData = res.data.data
|
||||
console.log(this.infoData)
|
||||
this.title = `${this.infoData.vinCode} - 质损详情`
|
||||
// 获取板车照片
|
||||
this.infoData.boardCarPhotos.forEach(v => {
|
||||
|
|
|
|||
|
|
@ -348,6 +348,7 @@
|
|||
// 质损图地址
|
||||
hzzsImg: "", // 绘制图
|
||||
zsBase: "",
|
||||
isSign: true,
|
||||
|
||||
// 签名图片地址
|
||||
signUrl: "",
|
||||
|
|
@ -372,13 +373,21 @@
|
|||
this.baseImg(this.signImg, "1")
|
||||
}
|
||||
let hzzsImg = uni.getStorageSync('hzzsImg')
|
||||
console.log(hzzsImg)
|
||||
if (hzzsImg != "") {
|
||||
this.hzzsImg = uni.getStorageSync('hzzsImg')
|
||||
}
|
||||
if (this.hzzsImg != "") {
|
||||
this.baseImg(this.hzzsImg, "2")
|
||||
if (this.isSign != "") {
|
||||
this.isSign = uni.getStorageSync('isSign')
|
||||
}
|
||||
if (this.hzzsImg != "") {
|
||||
if (this.isSign) {
|
||||
this.baseImg(this.hzzsImg, "2")
|
||||
} else {
|
||||
this.zsBase = this.hzzsImg
|
||||
this.initImg(this.zsBase, "6")
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
onLoad(options) {
|
||||
if ('params' in options) {
|
||||
|
|
|
|||
|
|
@ -556,10 +556,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.pageBox {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
// 右侧抽屉筛选
|
||||
/deep/.uni-drawer__content {
|
||||
width: 300px;
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
<head-view title="绘制质损图"></head-view>
|
||||
<view class="containe contentFixedr">
|
||||
<view class="sign-box">
|
||||
|
||||
<canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove"
|
||||
@touchend="touchend" disable-scroll="true"></canvas>
|
||||
<view class="canvasBg">
|
||||
<image :src="imgUrl" mode=""></image>
|
||||
<!-- <image src="../../static/images/zs2.png" mode=""></image> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="sigh-btns">
|
||||
|
|
@ -41,13 +41,14 @@
|
|||
signImg: "",
|
||||
url: "",
|
||||
imgUrl: "",
|
||||
ytImg: "",
|
||||
isSign: false,
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
if ('params' in options) {
|
||||
// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
|
||||
this.imgUrl = JSON.parse(decodeURIComponent(options.params)).imgUrl
|
||||
console.log(this.imgUrl)
|
||||
}
|
||||
this.loginObj = uni.getStorageSync('loginObj')
|
||||
if (this.imgUrl == "") {
|
||||
|
|
@ -68,7 +69,6 @@
|
|||
success: (res) => {
|
||||
if (res.statusCode == 200) {
|
||||
this.imgUrl = res.data
|
||||
console.log(this.imgUrl)
|
||||
this.init()
|
||||
}
|
||||
}
|
||||
|
|
@ -105,6 +105,7 @@
|
|||
#由于uni对canvas的实现有所不同，这里需要把起点存起来
|
||||
* **************************************************/
|
||||
this.points.push(startPoint);
|
||||
this.isSign = true
|
||||
|
||||
//每次触摸开始，开启新的路径
|
||||
this.ctx.beginPath();
|
||||
|
|
@ -131,7 +132,7 @@
|
|||
/* ***********************************************
|
||||
# 绘制笔迹
|
||||
# 1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
|
||||
# 2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
|
||||
# 2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
|
||||
# 3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
|
||||
************************************************ */
|
||||
draw: function() {
|
||||
|
|
@ -164,6 +165,8 @@
|
|||
success: (res) => {
|
||||
if (res.statusCode == 200) {
|
||||
that.initImg(res.data.data[0].ptrDesc)
|
||||
this.ytImg = res.data.data[0].ptrDesc
|
||||
this.isSign = false
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -174,7 +177,6 @@
|
|||
//将签名笔迹上传到服务器，并将返回来的地址存到本地
|
||||
handleConfirm: function() {
|
||||
let that = this
|
||||
console.log(that.points)
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'mycanvas',
|
||||
success: function(e) {
|
||||
|
|
@ -183,7 +185,12 @@
|
|||
// 当操作完成时调用resolve()或reject()
|
||||
pathToBase64(e.tempFilePath).then(path => {
|
||||
that.url = path
|
||||
uni.setStorageSync('hzzsImg', that.url)
|
||||
if (that.isSign) {
|
||||
uni.setStorageSync('hzzsImg', that.url)
|
||||
} else {
|
||||
uni.setStorageSync('hzzsImg', that.ytImg)
|
||||
}
|
||||
uni.setStorageSync('isSign', that.isSign)
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
|
|
@ -200,10 +207,6 @@
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: calc(100vh - 68px);
|
||||
padding-bottom: 30px;
|
||||
|
|
@ -258,6 +261,12 @@
|
|||
|
||||
.mycanvas {
|
||||
margin: auto 0rpx;
|
||||
background-color: transparent;
|
||||
margin-top: 130px;
|
||||
width: 624px;
|
||||
height: 224px;
|
||||
z-index: 999;
|
||||
transform: scale(1.75)
|
||||
}
|
||||
|
||||
.canvasBg {
|
||||
|
|
|
|||
|
|
@ -287,7 +287,6 @@
|
|||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
margin-top: 15px;
|
||||
gap: 16px;
|
||||
padding-bottom: 50px;
|
||||
|
||||
/deep/.o-empty {
|
||||
|
|
@ -301,6 +300,8 @@
|
|||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
margin-right: 16px;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -295,7 +295,6 @@
|
|||
that.peopleArr.push(v)
|
||||
}
|
||||
})
|
||||
console.log(that.peopleArr)
|
||||
that.tqInfo = that.peopleArr[0].weatherType
|
||||
that.peopleArr.forEach(v => {
|
||||
that.zyzsInfo += Number(v.workSuite)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,144 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<custom-waterfalls-flow :value="data.list" class="custom">
|
||||
<template v-slot:default="item">
|
||||
<view class="del" @click="del(item.index)">
|
||||
删除
|
||||
</view>
|
||||
<view class="desc" v-for="(ele,index2) in item.desc" :key="index2">
|
||||
{{
|
||||
ele.a
|
||||
}}
|
||||
</view>
|
||||
</template>
|
||||
</custom-waterfalls-flow>
|
||||
<button @click="toOne">1</button>
|
||||
<button @click="totne">2</button>
|
||||
<button @click="toYne">3</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapActions
|
||||
} from 'vuex'
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isMember: '-1', // 判断用户登录状态 -1为从未进来过 0 为申请注册还未审批 1为申请成功已经是会员 4为申请拒绝
|
||||
data: {
|
||||
list: [{
|
||||
image: '/static/images/cwJl.png',
|
||||
title: '哈哈啊哈哈哈',
|
||||
desc: [{
|
||||
a: 1
|
||||
},
|
||||
{
|
||||
a: 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
image: '/static/images/cwTop16.png',
|
||||
title: '哈哈啊哈哈哈',
|
||||
desc: [{
|
||||
a: 3
|
||||
},
|
||||
{
|
||||
a: 4
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
image: '/static/images/logo.png',
|
||||
title: '哈哈啊哈哈哈',
|
||||
desc: [{
|
||||
a: 6
|
||||
},
|
||||
{
|
||||
a: 9
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapActions([
|
||||
'majax',
|
||||
'najax',
|
||||
'jajax',
|
||||
'goout'
|
||||
]),
|
||||
toYne() {
|
||||
this.data.list.push({
|
||||
image: '/static/images/cwJl.png',
|
||||
title: '哈哈啊哈哈哈',
|
||||
desc: [{
|
||||
a: 1
|
||||
},
|
||||
{
|
||||
a: 2
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
toGo(i) {
|
||||
this.data.list[i].desc.push({
|
||||
a: i
|
||||
})
|
||||
},
|
||||
del(i) {
|
||||
console.log(i);
|
||||
this.data.list.splice(i, 1);
|
||||
console.log(this.data.list);
|
||||
},
|
||||
toOne() {
|
||||
this.data.list.push({
|
||||
image: '/static/images/cwTop16.png',
|
||||
title: '哈哈啊哈哈哈',
|
||||
desc: [{
|
||||
a: 1
|
||||
},
|
||||
{
|
||||
a: 2
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
totne() {
|
||||
this.data.list.push({
|
||||
image: '/static/images/logo.png',
|
||||
title: 'wadapkdop啊哈哈哈',
|
||||
desc: [{
|
||||
a: 1
|
||||
},
|
||||
{
|
||||
a: 2
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.item {
|
||||
height: auto;
|
||||
}
|
||||
.custom image {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
<template>
|
||||
<view class="waterfalls-flow">
|
||||
<view v-for="(item,index) in data.column" :key="index" class="waterfalls-flow-column" :id="`waterfalls_flow_column_${index+1}`" :msg="msg" :style="{'width':w,'margin-left':index==0?0:m}">
|
||||
<view :class="['column-value',{'column-value-show':item2.o}]" v-for="(item2,index2) in columnValue(index)" :key="index2" :style="[s1]" @click.stop="wapperClick(item2)">
|
||||
<view v-for="(item,index) in data.column" :key="index" class="waterfalls-flow-column"
|
||||
:id="`waterfalls_flow_column_${index+1}`" :msg="msg" :style="{'width':w,'margin-left':index==0?0:m}">
|
||||
<view :class="['column-value',{'column-value-show':item2.o}]" v-for="(item2,index2) in columnValue(index)"
|
||||
:key="index2" :style="[s1]" @click.stop="wapperClick(item2)">
|
||||
<view class="inner" v-if="data.seat==1">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<!-- #ifdef VUE2 -->
|
||||
|
|
@ -15,7 +17,10 @@
|
|||
<slot v-bind="item2"></slot>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<image :class="['img',{'img-hide':item2[hideImageKey]==true||item2[hideImageKey]==1},{'img-error':!item2[data.imageKey]}]" :src="item2[data.imageKey]" mode="widthFix" @load="imgLoad(item2,index+1)" @error="imgError(item2,index+1)" @click.stop="imageClick(item2)"></image>
|
||||
<image
|
||||
:class="['img',{'img-hide':item2[hideImageKey]==true||item2[hideImageKey]==1},{'img-error':!item2[data.imageKey]}]"
|
||||
:src="item2[data.imageKey]" mode="widthFix" @load="imgLoad(item2,index+1)"
|
||||
@error="imgError(item2,index+1)" @click.stop="imageClick(item2)"></image>
|
||||
<view class="inner" v-if="data.seat==2">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<!-- #ifdef VUE2 -->
|
||||
|
|
@ -63,6 +68,21 @@
|
|||
},
|
||||
listStyle: { // 单个展示项的样式：eg:{'background':'red'}
|
||||
type: Object
|
||||
},
|
||||
changeValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
biaosTitle:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
idIndex:{
|
||||
type:[String, Number],
|
||||
},
|
||||
idContent:{
|
||||
type:Array,
|
||||
default:[]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -85,7 +105,7 @@
|
|||
curIndex: 0,
|
||||
isRefresh: true,
|
||||
flag: false,
|
||||
refreshDatas: []
|
||||
refreshDatas: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -96,12 +116,16 @@
|
|||
},
|
||||
// 计算margin
|
||||
m() {
|
||||
const column_margin = `${(100-(100 / this.data.column - (+this.data.columnSpace)).toFixed(5)*this.data.column)/(this.data.column-1)}%`;
|
||||
const column_margin =
|
||||
`${(100-(100 / this.data.column - (+this.data.columnSpace)).toFixed(5)*this.data.column)/(this.data.column-1)}%`;
|
||||
return column_margin;
|
||||
},
|
||||
// list样式
|
||||
s1() {
|
||||
return { ...this.listInitStyle, ...this.listStyle };
|
||||
return {
|
||||
...this.listInitStyle,
|
||||
...this.listStyle
|
||||
};
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -145,7 +169,8 @@
|
|||
this.isRefresh = true;
|
||||
this.adds = [];
|
||||
this.data.list = this.value ? this.value : [];
|
||||
this.data.column = this.column < 2 ? 2 : this.column >= this.maxColumn ? this.maxColumn : this.column;
|
||||
this.data.column = this.column < 2 ? 2 : this.column >= this.maxColumn ? this.maxColumn : this
|
||||
.column;
|
||||
this.data.columnSpace = this.columnSpace <= 5 ? this.columnSpace : 5;
|
||||
this.data.imageKey = this.imageKey;
|
||||
this.data.seat = this.seat;
|
||||
|
|
@ -193,7 +218,10 @@
|
|||
for (let i = 1; i <= this.data.column; i++) {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select(`#waterfalls_flow_column_${i}`).boundingClientRect(data => {
|
||||
heightArr.push({ column: i, height: data.height });
|
||||
heightArr.push({
|
||||
column: i,
|
||||
height: data.height
|
||||
});
|
||||
}).exec(() => {
|
||||
if (this.data.column <= heightArr.length) {
|
||||
resolve(this.getMin(heightArr, 'height'));
|
||||
|
|
@ -212,7 +240,12 @@
|
|||
const minHeightRes = await this.getMinColumnHeight();
|
||||
const c = this.data[`column_${minHeightRes.column}_values`];
|
||||
this.data.list[i].column = minHeightRes.column;
|
||||
c.push({ ...this.data.list[i], cIndex: c.length, index: i, o: 0 });
|
||||
c.push({
|
||||
...this.data.list[i],
|
||||
cIndex: c.length,
|
||||
index: i,
|
||||
o: 0
|
||||
});
|
||||
this.msg++;
|
||||
},
|
||||
// 图片加载完成
|
||||
|
|
@ -259,15 +292,17 @@
|
|||
},
|
||||
watch: {
|
||||
value: {
|
||||
deep: true,
|
||||
deep:true,
|
||||
handler(newValue, oldValue) {
|
||||
setTimeout(() => {
|
||||
this.$nextTick(() => {
|
||||
if (this.isRefresh) return false;
|
||||
if (this.isLoaded) {
|
||||
this.data.list = []
|
||||
// if (newValue.length <= this.curIndex) return this.refresh();
|
||||
if (newValue.length <= this.curIndex) return this.change(newValue);
|
||||
this.data.list = newValue;
|
||||
// console.log(this.data.list);
|
||||
this.$nextTick(() => {
|
||||
this.initValue(this.curIndex, 'watch==>');
|
||||
})
|
||||
|
|
@ -278,6 +313,25 @@
|
|||
}, 10)
|
||||
}
|
||||
},
|
||||
changeValue(newValue) {
|
||||
if(newValue) {
|
||||
if(this.biaosTitle == '工班下拉') {
|
||||
this.refresh()
|
||||
// 每列的数据初始化
|
||||
|
||||
console.log(this.idContent);
|
||||
this.data[`column_${this.idIndex}_values`].gbValue = this.idContent[0]
|
||||
this.data[`column_${this.idIndex}_values`].gbTextValue = this.idContent[1]
|
||||
console.log(this.data[`column_${this.idIndex}_values`]);
|
||||
// this.value[this.idIndex].gbTextValue = this.idContent[1]
|
||||
// this.data.list[this.idIndex].gbValue = this.idContent[0]
|
||||
// this.data.list[this.idIndex].gbTextValue = this.idContent[1]
|
||||
// console.log(this.value);
|
||||
}
|
||||
this.$emit("updataValue")
|
||||
}
|
||||
// this.data.list = this.value
|
||||
},
|
||||
column(newValue) {
|
||||
this.refresh();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,98 +0,0 @@
|
|||
<template>
|
||||
<view class="waterfall-item-container">
|
||||
<view class="waterfall-item" @tap="onTap">
|
||||
<image :src="params.url" mode="widthFix" @load="emitHeight" @error="emitHeight"></image>
|
||||
<view class="content">
|
||||
<view>{{params.title}}</view>
|
||||
<view class="money">{{params.money}}元</view>
|
||||
<view style="margin: 0 0 8rpx 0;">
|
||||
<text class="label">{{params.label}}</text>
|
||||
</view>
|
||||
<view class="shop-name">{{params.shop}}</view>
|
||||
123
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"helangWaterfallItem",
|
||||
options:{
|
||||
virtualHost: true
|
||||
},
|
||||
props:{
|
||||
params:{
|
||||
type: Object,
|
||||
default(){
|
||||
return {}
|
||||
}
|
||||
},
|
||||
tag:{
|
||||
type:String | Number,
|
||||
default:''
|
||||
},
|
||||
index:{
|
||||
type:Number,
|
||||
default:-1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
// 发出组件高度信息，在此处可以区分正确和错误的加载，给予错误的提示图片
|
||||
emitHeight(e){
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('.waterfall-item-container').boundingClientRect(data => {
|
||||
let height = Math.floor(data.height);
|
||||
this.$emit("height",height,this.$props.tag);
|
||||
}).exec();
|
||||
},
|
||||
onTap(){
|
||||
this.$emit("click",this.$props.index,this.$props.tag);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.waterfall-item{
|
||||
padding: 16rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
|
||||
image{
|
||||
display: block;
|
||||
width: 100%;
|
||||
// 默认设置一个图片的大约值
|
||||
height: 350rpx;
|
||||
}
|
||||
|
||||
.content{
|
||||
margin-top: 16rpx;
|
||||
|
||||
.money{
|
||||
color: #fa3534;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.label{
|
||||
background-color: #fa3534;
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.shop-name{
|
||||
font-size: 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue