Skip to content

U
uni-pdtravel
Commit 8e35f636 authored by cc_inu's avatar cc_inu
Browse files
Options

相册拖拽排序BUG处理

parent ce564048
Hide whitespace changes
Inline Side-by-side
Showing with 91 additions and 70 deletions
App.vue
View file @ 8e35f636
...@@ -10,9 +10,9 @@ ...@@ -10,9 +10,9 @@
let openid=uni.getStorageSync("openid") let openid=uni.getStorageSync("openid")
if(!openid&&path.indexOf("pages/ourPayment/ourPayment")==-1){//扫码支付页面不需要在此登录 if(!openid&&path.indexOf("pages/ourPayment/ourPayment")==-1){//扫码支付页面不需要在此登录
setTimeout(()=>{//解决关联普通二维码扫码首次进入时一直显示登录中 setTimeout(()=>{//解决关联普通二维码扫码首次进入时一直显示登录中
uni.navigateTo({ // uni.navigateTo({
url: "/pages/login/login" // url: "/pages/login/login"
}) // })
},300) },300)
} }
//#ifdef MP-ALIPAY //#ifdef MP-ALIPAY
......
pages.json
View file @ 8e35f636
...@@ -211,12 +211,12 @@ ...@@ -211,12 +211,12 @@
"style" : "style" :
{ {
"navigationBarTitleText": "照片调整", "navigationBarTitleText": "照片调整",
"enablePullDownRefresh": false "enablePullDownRefresh": false,
"navigationBarBackgroundColor":"#ffffff",
"navigationBarTextStyle": "black"
} }
} }
], ],
"globalStyle": { "globalStyle": {
"navigationBarTextStyle": "white", "navigationBarTextStyle": "white",
......
pages/index/index.vue
View file @ 8e35f636
<template> <template>
<view > <view >
<!-- #ifdef MP-ALIPAY --> <!-- #ifdef MP-ALIPAY -->
<view class="top"> <!-- <view class="top">
<view class="top-search"> <view class="top-search">
</view> </view>
<view class="top-content"> <view class="top-content">
...@@ -63,11 +63,13 @@ ...@@ -63,11 +63,13 @@
<view class="top-img"> <view class="top-img">
</view> </view>
</view> -->
</view>
<!--#endif--> <!--#endif-->
<!-- <button @click="getUserInfo()"> 授权获取头像昵称 </button> --> <!-- <button @click="getUserInfo()"> 授权获取头像昵称 </button> -->
<view class="bottom"> <view class="bottom">
<navigator url="../vlog/vlogIndex/vlogIndex">
<button type="default">vlog</button>
</navigator>
<!-- <web-view src="https://wx.pangdly.com"></web-view> --> <!-- <web-view src="https://wx.pangdly.com"></web-view> -->
</view> </view>
</view> </view>
......
pages/vlog/components/dragImg/dragImg.vue
View file @ 8e35f636
...@@ -5,16 +5,26 @@ ...@@ -5,16 +5,26 @@
:class="['item', cur == index ? 'cur' : '', curZ == index ? 'zIndex' : '', itemTransition && index !== cur ? 'itemTransition' : '']" :class="['item', cur == index ? 'cur' : '', curZ == index ? 'zIndex' : '', itemTransition && index !== cur ? 'itemTransition' : '']"
v-for="(item, index) in list" :key="index" :id="'item' + index" :data-key="item.key" :data-index="index" v-for="(item, index) in list" :key="index" :id="'item' + index" :data-key="item.key" :data-index="index"
:style="{ transform: `translate3d(${index === cur ? tranX : item.tranX}px, ${index === cur ? tranY : item.tranY}px, 0px)`, width: `${100 / columns}%` }" :style="{ transform: `translate3d(${index === cur ? tranX : item.tranX}px, ${index === cur ? tranY : item.tranY}px, 0px)`, width: `${100 / columns}%` }"
@tap="itemClick(index)" @longpress="longPress" @touchmove.stop="touchMove" @touchend.stop="touchEnd"> @tap="itemClick(index,item.data.images)" @longpress="longPress" @touchmove.stop="touchMove" @touchend.stop="touchEnd">
<!-- start:请在该区域编写自己的渲染逻辑 --> <!-- start:请在该区域编写自己的渲染逻辑 -->
<view class="info"> <view class="info">
<view class="info__item"> <view class="info__item">
<image class="image" :src="item.data.images"></image> <image class="image" :src="item.data.images" mode="widthFix"></image>
</view>
<view class="info__item_btn" @click.stop="replace(item.key)">
更换
</view> </view>
</view> </view>
<!-- end:请在该区域编写自己的渲染逻辑 --> <!-- end:请在该区域编写自己的渲染逻辑 -->
</view> </view>
</view> </view>
<u-popup v-model="show" mode="bottom" height="50%">
<view style="display: flex;flex-wrap: wrap;width: 100%;">
<view style="width: 25%;padding: 10rpx;" v-for="(item,index) in listData" :key="index">
<image :src="item.images" style="width: 100%;" mode="widthFix" @click="changeImglist(item.images)"></image>
</view>
</view>
</u-popup>
</view> </view>
</template> </template>
...@@ -34,6 +44,8 @@ ...@@ -34,6 +44,8 @@
}, },
data() { data() {
return { return {
alterKey:"",//点击更改图片的key
show:false,//照片图库弹出层
cur: -1, // 当前激活的元素 cur: -1, // 当前激活的元素
curZ: -1, // 当前激活的元素, 用于控制激活元素z轴显示 curZ: -1, // 当前激活的元素, 用于控制激活元素z轴显示
tranX: 0, // 当前激活元素的 X轴 偏移量 tranX: 0, // 当前激活元素的 X轴 偏移量
...@@ -56,6 +68,25 @@ ...@@ -56,6 +68,25 @@
this.init() this.init()
}, },
methods: { methods: {
changeImglist(src){
this.list[this.alterKey].data.images=src
this.alterKey=""
this.show=false
let list=JSON.parse(JSON.stringify(this.list))
let listData = []
list.forEach(item => {
listData[item.key] = item.data
})
this.$emit('change', { //给父组件传递数据
listData: listData
})
},
replace(key){//更换图片
this.show=true
this.alterKey=key
console.log(this.alterKey);
},
init() { init() {
// 空值判断, 避免获取不到节点信息报错问题 // 空值判断, 避免获取不到节点信息报错问题
if (this.listData.length == 0) { if (this.listData.length == 0) {
...@@ -315,7 +346,13 @@ ...@@ -315,7 +346,13 @@
}, 0) }, 0)
}, },
//点击每一项后触发事件 //点击每一项后触发事件
itemClick(index) { itemClick(index,src) {
let urls=[]
urls.push(src)
console.log(urls);
uni.previewImage({
urls:urls,
})
let item = this.list[index] let item = this.list[index]
this.$emit('click', { this.$emit('click', {
oldKey: index, oldKey: index,
...@@ -398,12 +435,24 @@ ...@@ -398,12 +435,24 @@
overflow: hidden; overflow: hidden;
padding: 10rpx; padding: 10rpx;
box-sizing: border-box; box-sizing: border-box;
.image { .image {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
&__item_btn{
height: 50rpx;
width: 50rpx;
position: absolute;
right: 12rpx;
bottom: 12rpx;
background-color: rgba($color: #000000, $alpha: 0.5);
border-radius: 10rpx;
color: #fff;
text-align: center;
line-height: 50rpx;
font-size: 20rpx;
}
} }
.cell { .cell {
......
pages/vlog/pictureFormat/pictureFormat.vue
View file @ 8e35f636
<template> <template>
<view class="content"> <view class="content">
<view class="title">
<u-icon name="bell-fill" color="#6C8EF3"></u-icon><text style="margin-left: 20rpx;">提醒:长按拖拽排序</text>
</view>
<view class="top"> <view class="top">
<dragImg :listData="imgList" @change="changeImgList" :columns="4" @click="clickItem" ></dragImg> <dragImg :listData="imgList" @change="changeImgList" :columns="4" @click="clickItem" ></dragImg>
</view> </view>
<view class="bottom" @click="next">
下一步
</view>
</view> </view>
</template> </template>
...@@ -43,62 +49,9 @@ ...@@ -43,62 +49,9 @@
}, },
{ {
images: '/static/images/swipe/10.png' images: '/static/images/swipe/10.png'
},
{
images: '/static/images/swipe/1.png'
},
{
images: '/static/images/swipe/2.png'
},
{
images: '/static/images/swipe/3.png'
},
{
images: '/static/images/swipe/4.png'
},
{
images: '/static/images/swipe/5.png'
},
{
images: '/static/images/swipe/6.png'
},
{
images: '/static/images/swipe/7.png'
},
{
images: '/static/images/swipe/8.png'
},
{
images: '/static/images/swipe/9.png'
},
{
images: '/static/images/swipe/10.png'
},
{
images: '/static/images/swipe/1.png'
},
{
images: '/static/images/swipe/2.png'
},
{
images: '/static/images/swipe/3.png'
},
{
images: '/static/images/swipe/4.png'
},
{
images: '/static/images/swipe/5.png'
},
{
images: '/static/images/swipe/6.png'
},
{
images: '/static/images/swipe/7.png'
},
{
images: '/static/images/swipe/8.png'
} }
] ],
sortImglist:[]
} }
}, },
onLoad() { //代替 vue 里面的 created onLoad() { //代替 vue 里面的 created
...@@ -107,10 +60,14 @@ ...@@ -107,10 +60,14 @@
}, },
methods: { methods: {
changeImgList(res) { changeImgList(res) {
console.log(res); this.sortImglist=res
console.log(this.sortImglist);
}, },
clickItem(res){ clickItem(res){
console.log(res); console.log(res);
},
next(){//下一步
} }
} }
} }
...@@ -121,7 +78,20 @@ ...@@ -121,7 +78,20 @@
padding: 0 20rpx; padding: 0 20rpx;
height: 100%; height: 100%;
width: 100%; width: 100%;
text-align: center;
position: relative; position: relative;
.title{
width: 100%;
height: 50rpx;
line-height: 50rpx;
color: #ABABAB;
background-color: #fff;
position: fixed;top: 0;z-index: 10;
}
.top{
margin-top: 50rpx;
border-top: 1px dashed #ccc;
margin-bottom: 100rpx;
}
.bottom{position: fixed;bottom: 0;width: 100%;height: 100rpx;background-color:#FFE600;right: 0;line-height: 100rpx;font-size: 32rpx;font-weight: bold;border-top-left-radius: 10rpx;border-top-right-radius: 10rpx;z-index: 10;text-align: center;}
} }
</style> </style>
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