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