Skip to content

U
uni-zijinjianguan-staff-wechat
Commit ee688964 by honghong
Options

图片拖拽

parent 609adeda
Showing with 953 additions and 53 deletions
components/custom/dynamic.vue
......@@ -10,6 +10,11 @@
<view class="dynamic-content text-overflow-two" v-if="itemDetail && itemDetail.content">
<u-parse :content="this.$utilsMethods.replaceSpecialCharFixed(itemDetail.content)"></u-parse>
</view>
<view class="imgs">
<image :src="item" mode="aspectFit" class="" v-for="(item,index) in itemDetail.imgs" :key="index"></image>
</view>
<!-- <view class="dynamic-content text-overflow-two">{{itemDetail.content}}</view>
<view class="d-flex flex-wrap dynamic-picture">
<image @click="previewImage(item.picUrl)" v-for="(info,ix) in 3" class="dynamic-picture-item"
......@@ -34,7 +39,7 @@
</view>
<view class="d-flex">
<view v-if="isEdit" class="dynamic-delete mr-2" @click.stop="handleEdit(itemDetail.forumId)">编辑</view>
<view v-if="userInfot.userId == itemDetail.userId" class="dynamic-delete" @click.stop="handleDelete(itemDetail.forumId)">删除</view>
<view v-if="userInfot.userId == itemDetail.userId " class="dynamic-delete" @click.stop="handleDelete(itemDetail.forumId)">删除</view>
</view>
</view>
</view>
......@@ -210,4 +215,15 @@
.picture:not(:nth-child(3n+3)) {
margin-right: 16rpx;
}
.imgs{
display: flex;
flex-wrap: wrap;
margin-top: 20rpx;
>image{
width: 200rpx;
height: 200rpx;
margin-right: 10rpx;
}
}
</style>
\ No newline at end of file
components/evaluate/index.vue
......@@ -117,7 +117,8 @@
},
methods: {
handleReply(row) {
this.$emit('reply', row.commentId, row.userId, row.nickName)
let id = 1
this.$emit('reply', row.commentId, row.userId, row.nickName,id)
// this.$parent.isReply = true
// this.$parent.$refs.childPopup.show = true
// this.$refs.childPopup.show = true;
......@@ -136,7 +137,9 @@
},
handleReplyChild(row) {
this.$emit('reply', row.repliedId, row.userId, row.nickName)
let commentIdData= this.itemDetail.commentId
let id = 2
this.$emit('reply', row.commentId, row.userId, row.nickName,id, commentIdData)
},
// 预览图片
prviewImage(imageStr, index) {
......
homePage/contractDload/index.vue
......@@ -49,14 +49,15 @@
})
},
//签订合同下载
download(v) {
download(v) {
uni.downloadFile({
url: v.url, //下载地址接口返回
success: (data) => {
if (data.statusCode === 200) {
console.log(data, 'data====')
uni.openDocument({
showMenu: true,
showMenu: true,
fileType:"pdf",
filePath: data.tempFilePath,
success: function(res) {
// console.log('打开文档成功');
......
homePage/merchant/dynamicDetail.vue
......@@ -133,7 +133,10 @@
this.$refs.childPopup.show = true;
},
// 回复按钮点击事件
handleOpenRely(replyId,replyUserId,replyUserName){
handleOpenRely(replyId,replyUserId,replyUserName,id, commentIdData){
this.dataid = id
this.commentIdDatas = commentIdData
this.replyData = {
commentId:replyId,//回复对话的id
userId:replyUserId,//回复人的id
......@@ -149,7 +152,7 @@
// 表示回复
params = {
forumId: this.detailData.forumId,
parentCommentId:this.replyData.commentId,
parentCommentId: this.dataid=='1'?this.replyData.commentId:this.commentIdDatas,
repliedId:this.replyData.commentId,
repliedUserId:this.replyData.userId,
commentType: this.forumType,
......
homePage/merchant/forumDetails.vue
......@@ -22,7 +22,7 @@
</view>
</u-navbar>
<view class="" style="width: 720rpx; margin: 0 auto;">
<u-swiper height="750rpx" :list="imgs" circular imgMode='scaleToFill' duration="500"></u-swiper>
<u-swiper height="750rpx" :list="imgs" circular imgMode='aspectFit' duration="500"></u-swiper>
</view>
<view style="padding:36rpx 0 0;">
......@@ -35,7 +35,10 @@
</view>
</view>
<view class="u-content">
<u-parse :content="detailData.content"></u-parse>
<!-- <u-parse :content="detailData.content"></u-parse> -->
<view class="" style="white-space: pre-line; padding: 10rpx 0; font-size: 30rpx;">
{{ detailData.content }}
</view>
</view>
</view>
......@@ -180,7 +183,10 @@
this.$refs.childPopup.show = true;
},
// 回复按钮点击事件
handleOpenRely(replyId, replyUserId, replyUserName) {
handleOpenRely(replyId, replyUserId, replyUserName,id, commentIdData) {
this.dataid = id
this.commentIdDatas = commentIdData
this.replyData = {
commentId: replyId, //回复对话的id
userId: replyUserId, //回复人的id
......@@ -196,7 +202,7 @@
// 表示回复
params = {
forumId: this.detailData.forumId,
parentCommentId: this.replyData.commentId,
parentCommentId: this.dataid=='1'?this.replyData.commentId:this.commentIdDatas,
repliedId: this.replyData.commentId,
repliedUserId: this.replyData.userId,
commentType: this.forumType,
......
homePage/merchant/index.vue
......@@ -92,13 +92,14 @@
<template v-if="forumList.length">
<view class="distence" v-for="(item,index) in forumList" :key="index"
@click="handleDetail(item.forumId)">
<dynamicList :itemDetail="item" :isDelete='false' @refersh="handleRefersh"></dynamicList>
<dynamicList :itemDetail="item" :isDelete='false' @delete='handledelete' @refersh="handleRefersh"></dynamicList>
</view>
</template>
<u-empty v-else marginTop="20" width="260" height="260" textSize="26" mode="data"
icon="http://cdn.uviewui.com/uview/empty/data.png">
</u-empty>
</view>
<!-- 评价模块 -->
<view v-else v-if="currentChecked == 2" class="px-one">
<template v-if="evalList.length">
......@@ -156,7 +157,8 @@
listForumGET,
collectOrUncollect,
listCommentByDemandId,
addCommentPOST
addCommentPOST,
deleteForumItem
} from '@/api/workbench/index.js';
import {
mapGetters
......@@ -231,6 +233,12 @@
async getList() {
this.$set(this.queryParams, 'userId', this.businessInfo.userId)
const res = await listForumGET(this.queryParams)
res.rows.forEach((item, index) => {
if(item.imgs){
item.imgs = item.imgs.split(',')
}
})
this.forumList = res.rows
this.total = res.total
},
......@@ -267,7 +275,9 @@
this.$refs.childPopup.show = true;
},
// 回复按钮点击事件
handleOpenRely(replyId, replyUserId, replyUserName) {
handleOpenRely(replyId, replyUserId, replyUserName,id, commentIdData) {
this.dataid = id
this.commentIdDatas = commentIdData
this.replyData = {
commentId: replyId, //回复对话的id
userId: replyUserId, //回复人的id
......@@ -283,7 +293,7 @@
// 表示回复
params = {
forumId: this.businessInfo.userId,
parentCommentId: this.replyData.commentId,
parentCommentId: this.dataid=='1'?this.replyData.commentId:this.commentIdDatas,
repliedId: this.replyData.commentId,
repliedUserId: this.replyData.userId,
commentType: 'merchant',
......@@ -331,9 +341,30 @@
// 动态详情
handleDetail(forumId) {
uni.navigateTo({
url: `./dynamicDetail?forumId=${forumId}&forumType=dynamic`
// url: `./dynamicDetail?forumId=${forumId}&forumType=dynamic`
url: `/homePage/merchant/forumDetails?forumId=${forumId}&forumType=dynamic`
})
},
handledelete(id){
uni.showModal({
title: '提示',
content: '您确定要删除动态吗?',
success: async res => {
if (res.confirm) {
const res = await deleteForumItem(id)
console.log(res, '删除')
uni.showToast({
title: '删除成功!',
icon: 'none'
})
this.getList()
} else if (res.cancel) {
console.log('取消');
}
}
});
},
business(businessId) {
businessIdGET(businessId).then((res) => {
this.businessInfo = res.data
......
my/operate/comment.vue
......@@ -134,11 +134,16 @@
// })
// }
if(row.forumType=="comment"){
uni.navigateTo({
url: `/homePage/merchant/index?businessId=${row.forumId}`
})
}else{
}else if(row.forumType=="demand"){
uni.navigateTo({
url: `/homePage/demand/detail?demandId=${row.forumId}`
})
}else if( row.forumType=="invitation"){
uni.navigateTo({
url: `/homePage/merchant/forumDetails?forumId=${row.forumId}&forumType=${row.forumType}`
})
......
my/operate/dynamic.vue
......@@ -33,6 +33,7 @@
pageSize: 10,
userId: '',
forumTitle: '',
userType:"merchant",
forumType: ''
},
forumList: [],
......@@ -63,6 +64,11 @@
},
async getList() {
const res = await listForumGET(this.queryParams)
res.rows.forEach((item, index) => {
if(item.imgs){
item.imgs = item.imgs.split(',')
}
})
this.forumList = [...this.forumList,...res.rows]
this.total = res.total
},
......
my/operate/like.vue
......@@ -7,10 +7,10 @@
</view>
</u-sticky>
<view class="px-three pb-four">
<view class="px-three pb-four" :class="currentChecked == 0?'active' :''">
<template v-if="currentChecked == 0">
<template v-if="likedList.length">
<view class="conntainer" v-for="(item,index) in likedList" :key="item.likeId"
<view class="conntainer conntainer1" v-for="(item,index) in likedList" :key="item.likeId"
@click="handleDetail(item)">
<dynamicList :itemDetail="item" :showAuthor="true" :showState="false"></dynamicList>
</view>
......@@ -45,7 +45,7 @@
bePraisedListGet
} from '@/api/workbench/index.js'
import tabsList from '@/components/custom/tabs.vue'
import dynamicList from '@/components/custom/dynamic.vue'
import dynamicList from '@/components/custom/dynamics.vue'
import articleList from './components/articleList.vue'
export default {
components: {
......@@ -92,6 +92,11 @@
methods: {
async getLikeList() {
const res = await listLikedGet(this.queryParams)
res.rows.forEach((item, index) => {
if(item.imgs){
item.imgs = item.imgs.split(',')
}
})
this.likedList =[ ...this.likedList,...res.rows]
this.total = res.total
console.log(res, '赞过')
......@@ -123,22 +128,38 @@
// 动态详情
handleDetail(row) {
console.log(row, 'row=========')
if (row.forumType == 'comment') return
if(row.forumType=='dynamic'){
uni.navigateTo({
url: `/homePage/merchant/dynamicDetail?forumId=${row.forumId}&forumType=${row.forumType}`
})
}else if(row.forumType=='invitation'){
uni.navigateTo({
url: `/homePage/merchant/forumDetails?forumId=${row.forumId}&forumType=${row.forumType}`
})
}
uni.navigateTo({
url: `/homePage/merchant/forumDetails?forumId=${row.forumId}&forumType=${row.forumType}`
})
// if(row.forumType=='dynamic'){
// uni.navigateTo({
// url: `/homePage/merchant/forumDetails?forumId=${row.forumId}&forumType=${row.forumType}`
// })
// }else if(row.forumType=='invitation'){
// uni.navigateTo({
// url: `/homePage/merchant/forumDetails?forumId=${row.forumId}&forumType=${row.forumType}`
// })
// }
}
}
}
</script>
<style lang="scss" scoped>
.active {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.conntainer1 {
width: 48%;
padding: 0;
}
/deep/.u-empty{
width: 100%;
}
}
.conntainer {
background: #fff;
padding: 26rpx 24rpx;
......
pages/forum/publish.vue
......@@ -8,8 +8,9 @@
}">
<view class="container">
<!-- 照片 -->
<u-form-item label="照片" labelWidth="180" prop="imgs" ref="item1" required="" v-if="type=='invitation'">
<com-upload ref="upload" imgType="takePictures" @changeList="changeList"></com-upload>
<u-form-item label="照片" labelWidth="180" prop="imgs" ref="item1" required="" >
<!-- <com-upload ref="upload" imgType="takePictures" @changeList="changeList"></com-upload> -->
<shmily-drag-image v-model="list10" :addImage="addImage" :delImage="delImage"></shmily-drag-image>
</u-form-item>
<u-form-item label="标题" prop="forumTitle" ref="item1" required="" labelWidth="180">
......@@ -19,7 +20,7 @@
padding:'28rpx 30rpx'
}"></u--input>
</u-form-item>
<u-form-item label="正文" labelWidth="180" ref="item1" required="" prop='content' v-if="type=='invitation'">
<u-form-item label="正文" labelWidth="180" ref="item1" required="" prop='content' >
<u--textarea maxlength='-1' v-model="model.content" height='100px'
class="com-textarea" :focus="focus" placeholder="请输入内容"
:customStyle="{
......@@ -33,15 +34,15 @@
</u-form-item>
</view>
<u-form-item prop="content" ref="item1" v-if="type=='dynamic'">
<!-- <u-form-item prop="content" ref="item1" v-if="type=='dynamic'">
<jx-editor ref="editoRef" @input="input" v-model="model.content"></jx-editor>
</u-form-item>
</u-form-item> -->
</u-form>
</view>
<view class="placeholder padding-secure"></view>
<view class="fixed d-flex a-center padding-secure">
<button class="full-button1" @click="handlePreview" v-if="type=='invitation'">预览</button>
<button class="full-button1" @click="handlePreview">预览</button>
<button class="full-button" @click="handleSave">
<image src="../../static/images/publish.png" mode="" class="icon"></image>
发布</button>
......@@ -85,7 +86,8 @@
trigger: ['change', 'change']
}]
},
type:''
type:'',
list10:[],
}
},
computed: {
......@@ -99,20 +101,20 @@
},
onLoad(option) {
console.log(option.forumType, 'option.forumType')
this.type = option.forumType
//this.type = option.forumType
this.$set(this.model, 'forumType', option.forumType)
if (option.forumId) {
this.getDetailData(option.forumId)
}
},
methods: {
changeList(v){
let imageArr = []
v.map(item=>{
imageArr.push(item.url||item)
})
this.imgs = imageArr.join(',')
},
// changeList(v){
// let imageArr = []
// v.map(item=>{
// imageArr.push(item.url||item)
// })
// this.imgs = imageArr.join(',')
// },
async getDetailData(forumId) {
const res = await detailForumItemById(forumId)
......@@ -121,17 +123,14 @@
this.$set(this.model, 'content', res.data.content)
this.$set(this.model, 'forumType', res.data.forumType)
this.$set(this.model, 'userType', res.data.userType)
this.$refs.editoRef.onEditorReady()
if(res.data.imgs){
let uimgs = res.data.imgs.split(',')
let imglist = uimgs.map(item => ({
url: item
}));
console.log(imglist,"tupian000")
this.$refs.upload.fileList6 = imglist;
console.log(uimgs,"tupian1111")
this.list10= uimgs
}
// console.log(this.$refs.editoRef.onEditorReady(),'================')
},
input(val) {
......@@ -143,8 +142,10 @@
this.$set(this.model, 'content', cleanedHtmlContent)
},
handleSave() {
this.imgs = this.list10.join(',')
this.$set(this.model, 'imgs', this.imgs)
console.log(this.model,"============================")
this.$refs.uForm.validate().then(res => {
if (this.model.forumId) {
modifyForumItem(this.model).then(response => {
......@@ -166,8 +167,8 @@
//预览
handlePreview(){
console.log(this.model,"================")
this.imgs = this.list10.join(',')
this.$set(this.model, 'imgs', this.imgs)
if(this.model.forumTitle==''||this.model.forumTitle==undefined ){
uni.$u.toast('请填写标题')
return
......
pages/index/index.vue
......@@ -170,7 +170,7 @@
queryParams: {
pageNum: 1,
pageSize: 10,
cityId: '上海市'
cityId: '青浦区'
},
demandList: [], //需求列表
total: 0,
......
uni_modules/shmily-drag-image/README.md 0 → 100644
# 图片拖拽排序插件
<font color='red'>1. H5 和微信小程序已测试通过</font>
<font color='red'>2. App 和其他平台小程序未测试，大概率支持</font>
<font color='red'>3. 非uni_modules版本未更新</font>
## shmily-drag-image
> 点击预览、长按拖拽排序、自定义添加图片、删除确认、支持对象数组
## 预览
您可以通过微信扫码，查看最佳的演示效果。
![wp](https://web.shmily.ren/shmily-drag-image/static/wp.jpg)
## 基本使用：
```
<shmily-drag-image v-model="list"></shmily-drag-image>
export default {
data() {
return {
list: [
'http://static-11ea0c21-6b8f-47f7-b77f-cb0c7ea3f355.bspapp.com/shmily-drag-image/static/1.jpg',
'http://static-11ea0c21-6b8f-47f7-b77f-cb0c7ea3f355.bspapp.com/shmily-drag-image/static/2.jpg',
'http://static-11ea0c21-6b8f-47f7-b77f-cb0c7ea3f355.bspapp.com/shmily-drag-image/static/3.jpg',
]
}
}
}
```
## 自定义添加、删除确认：
```
<shmily-drag-image v-model="list" :addImage="addImage" :delImage="delImage"></shmily-drag-image>
export default {
data() {
return {
list: [
'http://static-11ea0c21-6b8f-47f7-b77f-cb0c7ea3f355.bspapp.com/shmily-drag-image/static/1.jpg',
'http://static-11ea0c21-6b8f-47f7-b77f-cb0c7ea3f355.bspapp.com/shmily-drag-image/static/2.jpg',
'http://static-11ea0c21-6b8f-47f7-b77f-cb0c7ea3f355.bspapp.com/shmily-drag-image/static/3.jpg',
]
}
},
methods:{
addImage() {
// 将图片地址添加到图片数组
this.list.push('http://static-11ea0c21-6b8f-47f7-b77f-cb0c7ea3f355.bspapp.com/shmily-drag-image/static/4.jpg')
},
delImage(done) {
uni.showModal({
content: '是否删除?',
success: (res) => {
if(res.confirm) {
// 执行 done() 删除
done()
}
}
})
}
}
}
```
## 支持对象数组：
```
<shmily-drag-image v-model="list" keyName="src"></shmily-drag-image>
export default {
data() {
return {
list: [
{
src: 'http://static-11ea0c21-6b8f-47f7-b77f-cb0c7ea3f355.bspapp.com/shmily-drag-image/static/1.jpg',
},
{
src: 'http://static-11ea0c21-6b8f-47f7-b77f-cb0c7ea3f355.bspapp.com/shmily-drag-image/static/2.jpg',
},
{
src: 'http://static-11ea0c21-6b8f-47f7-b77f-cb0c7ea3f355.bspapp.com/shmily-drag-image/static/3.jpg',
}
]
}
}
}
```
---
## 属性说明
属性名 | 类型 | 默认值 | 说明
:-:|:-:|:-:|---
v-model | Array | [ ] | 图片数组，元素为图片地址字符串或对象，默认为`Array<String>`
keyName | String | null | 从图片数组元素对象中读取的键名
number | Number | 6 | 图片数量限制
imageWidth | Number | 0 | 图片父容器宽度（实际显示的图片宽度为 imageWidth / 1.1 ），单位 rpx。imageWidth > 0 则 cols 无效
cols | Number | 3 | 图片列数（cols > 0 则 imageWidth 无效）
borderRadius | Number | 0 | 图片圆角，单位 rpx
padding | Number | 10 | 图片周围空白填充，单位 rpx
scale | Number | 1.1 | 拖动图片时放大倍数 [0, ∞)
opacity | Number | 0.7 | 拖动图片时不透明度
addImage | Function | null | 自定义添加，见上方示例
delImage | Function | null | 删除确认，见上方示例
uni_modules/shmily-drag-image/changelog.md 0 → 100644
## 2.0.2（2022-09-17）
- 修复图片删除
## 2.0.1（2022-09-16）
- 修改文档
## 2.0.0（2022-09-16）
- 支持 Vue 3
- 图片数组支持对象元素
- 新增删除确认
- 解决了一些已知问题
- 调整为 uni_modules 目录规范
uni_modules/shmily-drag-image/components/shmily-drag-image/shmily-drag-image.vue 0 → 100644
<template>
<view class="con" style="width:600rpx;">
<template v-if="viewWidth">
<movable-area class="area" :style="{ height: areaHeight }" @mouseenter="mouseenter" @mouseleave="mouseleave">
<movable-view v-for="(item, index) in imageList" :key="item.id" class="view" direction="all" :y="item.y"
:x="item.x" :damping="40" :disabled="item.disable" @change="onChange($event, item)"
@touchstart="touchstart(item)" @mousedown="touchstart(item)" @touchend="touchend(item)"
@mouseup="touchend(item)" :style="{
width: viewWidth + 'px',
height: viewWidth + 'px',
'z-index': item.zIndex,
opacity: item.opacity
}">
<view class="area-con" :style="{
width: childWidth,
height: childWidth,
borderRadius: borderRadius + 'rpx',
transform: 'scale(' + item.scale + ')'
}">
<image class="pre-image" :src="item.src" mode="aspectFill" v-if="item.src"></image>
<view class="del-con" @click="delImages(item, index)" @touchstart.stop="delImageMp(item, index)"
@touchend.stop="nothing()" @mousedown.stop="nothing()" @mouseup.stop="nothing()">
<view class="del-wrap">
<image class="del-image"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAhdEVYdENyZWF0aW9uIFRpbWUAMjAyMDowNzoyNSAyMTo1NDoyOU4TkJAAAADcSURBVFhH7ZfRCoMwDEXLvkjwwVf/bH/emmAyN6glTW9WBjsgwm28OeCLpj81Sil7zvlJ90UiONS/yY5VogsO6XrBg3IEQ5a/s8vRSWUAKmLqp2w5jz5BiNQEGMo3GbloDLtFXJ1IkaEuhAiiY6gEIqB4yqACSk9piIBiKQ8VUFpLviKg3C2rESKgWERCBZSWiEfgIfffYvrrsAgoISJ3Apy3zuTxcSxLQkV6ykNEPKVQkZEyiAiiZKgDIaC4upACSlcn5fM/+WuDCAHF1E/Z/N9AhkMZnPNDPI+UDjPIXgAQIGjNAAAAAElFTkSuQmCC">
</image>
</view>
</view>
</view>
</movable-view>
<view class="add" v-if="imageList.length < number"
:style="{ top: add.y, left: add.x, width: viewWidth + 'px', height: viewWidth + 'px' }" @click="addImages">
<view class="add-wrap" :style="{ width: childWidth, height: childWidth, borderRadius: borderRadius + 'rpx' }">
<image style="width: 54rpx;height: 54rpx;"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAYAAACMRWrdAAABIUlEQVRoQ+2a2w2DMAxFeQzWrsMUbadAsEw3S1CqVgppKwLX8BEOP4iHTXx8uUgWdVXoVhdaV0VhSmf7vr/H8V3XzY6V3P9iD+nYOI5P7/01LMI596AwoZV0TIBXIUWFXhKLFBWYSFGhhxQN6SFFQ5i4ogITKSr0cEVDekjRECauqMBEigq9U7piOk2yAti27SUe5ljlTfPEQ6KZecTvwl4P3ytvOv06R2HDMNzes7+6aRrvnHvtf50L13Lp50rx88zcvNlS3JpwKQ67XyK04nq2nFbk/LqVjin0TvmBNgQ2S4UUDcliHgpMpKjQwxUN6SFFQ5i4ogITKSr0cEVDekjRECauqMAsVoph+hVPtYr5+03p9tbYQ96xrYtT4ootbAJGVxxVTapVswAAAABJRU5ErkJggg==">
</image>
</view>
</view>
</movable-area>
</template>
</view>
</template>
<script>
import {
orderStatisticsPOST
} from '@/api/upload.js';
export default {
emits: ['input', 'update:modelValue'],
props: {
// 排序图片
value: {
type: Array,
default: function() {
return []
}
},
// 排序图片
modelValue: {
type: Array,
default: function() {
return []
}
},
// 从 list 元素对象中读取的键名
keyName: {
type: String,
default: null
},
// 选择图片数量限制
number: {
type: Number,
default: 10
},
// 图片父容器宽度（实际显示的图片宽度为 imageWidth / 1.1 ），单位 rpx
// imageWidth > 0 则 cols 无效
imageWidth: {
type: Number,
default: 0
},
// 图片列数
cols: {
type: Number,
default: 4
},
// 图片圆角，单位 rpx
borderRadius: {
type: Number,
default: 0
},
// 图片周围空白填充，单位 rpx
padding: {
type: Number,
default: 10
},
// 拖动图片时放大倍数 [0, ∞)
scale: {
type: Number,
default: 1.1
},
// 拖动图片时不透明度
opacity: {
type: Number,
default: 0.7
},
// 自定义添加
addImage: {
type: Function,
default: null
},
// 删除确认
delImage: {
type: Function,
default: null
}
},
data() {
return {
imageList: [],
width: 0,
add: {
x: 0,
y: 0
},
colsValue: 0,
viewWidth: 0,
tempItem: null,
timer: null,
changeStatus: true,
preStatus: true,
first: true,
}
},
computed: {
areaHeight() {
let height = ''
// return '355px'
if (this.imageList.length < this.number) {
height = (Math.ceil((this.imageList.length + 1) / this.colsValue) * this.viewWidth).toFixed() + 'px'
} else {
height = (Math.ceil(this.imageList.length / this.colsValue) * this.viewWidth).toFixed() + 'px'
}
console.log('areaHeight', height)
return height
},
childWidth() {
return this.viewWidth - this.rpx2px(this.padding) * 2 + 'px'
},
},
watch: {
value: {
handler(n) {
if (!this.first && this.changeStatus) {
console.log('watch', n)
let flag = false
for (let i = 0; i < n.length; i++) {
if (flag) {
this.addProperties(this.getSrc(n[i]))
continue
}
if (this.imageList.length === i || this.imageList[i].src !== this.getSrc(n[i])) {
flag = true
// console.log("111111111")
this.imageList.splice(i)
this.addProperties(this.getSrc(n[i]))
}
}
}
},
deep: true
},
modelValue: {
handler(n) {
if (!this.first && this.changeStatus) {
console.log('watch', n)
let flag = false
for (let i = 0; i < n.length; i++) {
if (flag) {
this.addProperties(this.getSrc(n[i]))
continue
}
if (this.imageList.length === i || this.imageList[i].src !== this.getSrc(n[i])) {
flag = true
// console.log("2222222222")
this.imageList.splice(i)
this.addProperties(this.getSrc(n[i]))
}
}
}
},
deep: true
},
},
created() {
this.width = uni.getSystemInfoSync().windowWidth
},
mounted() {
const query = uni.createSelectorQuery().in(this)
query.select('.con').boundingClientRect(data => {
this.colsValue = this.cols
this.viewWidth = data.width / this.cols
if (this.imageWidth > 0) {
this.viewWidth = this.rpx2px(this.imageWidth)
this.colsValue = Math.floor(data.width / this.viewWidth)
}
let list = this.value
// #ifdef VUE3
list = this.modelValue
// #endif
for (let item of list) {
this.addProperties(this.getSrc(item))
}
this.first = false
})
query.exec()
},
methods: {
getSrc(item) {
if(this.keyName !== null) {
return item[this.keyName]
}
return item
},
onChange(e, item) {
if (!item) return
item.oldX = e.detail.x
item.oldY = e.detail.y
if (e.detail.source === 'touch') {
if (item.moveEnd) {
item.offset = Math.sqrt(Math.pow(item.oldX - item.absX * this.viewWidth, 2) + Math.pow(item.oldY - item
.absY * this.viewWidth, 2))
}
let x = Math.floor((e.detail.x + this.viewWidth / 2) / this.viewWidth)
if (x >= this.colsValue) return
let y = Math.floor((e.detail.y + this.viewWidth / 2) / this.viewWidth)
let index = this.colsValue * y + x
if (item.index != index && index < this.imageList.length) {
this.changeStatus = false
for (let obj of this.imageList) {
if (item.index > index && obj.index >= index && obj.index < item.index) {
this.change(obj, 1)
} else if (item.index < index && obj.index <= index && obj.index > item.index) {
this.change(obj, -1)
} else if (obj.id != item.id) {
obj.offset = 0
obj.x = obj.oldX
obj.y = obj.oldY
setTimeout(() => {
this.$nextTick(() => {
obj.x = obj.absX * this.viewWidth
obj.y = obj.absY * this.viewWidth
})
}, 0)
}
}
item.index = index
item.absX = x
item.absY = y
if (!item.moveEnd) {
setTimeout(() => {
this.$nextTick(() => {
item.x = item.absX * this.viewWidth
item.y = item.absY * this.viewWidth
})
}, 0)
}
// console.log('bbb', JSON.parse(JSON.stringify(item)));
this.sortList()
}
}
},
change(obj, i) {
obj.index += i
obj.offset = 0
obj.x = obj.oldX
obj.y = obj.oldY
obj.absX = obj.index % this.colsValue
obj.absY = Math.floor(obj.index / this.colsValue)
setTimeout(() => {
this.$nextTick(() => {
obj.x = obj.absX * this.viewWidth
obj.y = obj.absY * this.viewWidth
})
}, 0)
},
touchstart(item) {
this.imageList.forEach(v => {
v.zIndex = v.index + 9
})
item.zIndex = 99
item.moveEnd = true
this.tempItem = item
this.timer = setTimeout(() => {
item.scale = this.scale
item.opacity = this.opacity
clearTimeout(this.timer)
this.timer = null
}, 200)
},
touchend(item) {
this.previewImage(item)
item.scale = 1
item.opacity = 1
item.x = item.oldX
item.y = item.oldY
item.offset = 0
item.moveEnd = false
setTimeout(() => {
this.$nextTick(() => {
item.x = item.absX * this.viewWidth
item.y = item.absY * this.viewWidth
this.tempItem = null
this.changeStatus = true
})
// console.log('ccc', JSON.parse(JSON.stringify(item)));
}, 0)
// console.log('ddd', JSON.parse(JSON.stringify(item)));
},
previewImage(item) {
if (this.timer && this.preStatus && this.changeStatus && item.offset < 28.28) {
clearTimeout(this.timer)
this.timer = null
const list = this.value || this.modelValue
let srcList = list.map(v => this.getSrc(v))
console.log(list, srcList);
uni.previewImage({
urls: srcList,
current: item.src,
success: () => {
this.preStatus = false
setTimeout(() => {
this.preStatus = true
}, 600)
},
fail: (e) => {
console.log(e);
}
})
} else if (this.timer) {
clearTimeout(this.timer)
this.timer = null
}
},
mouseenter() {
//#ifdef H5
this.imageList.forEach(v => {
v.disable = false
})
//#endif
},
mouseleave() {
//#ifdef H5
if (this.tempItem) {
this.imageList.forEach(v => {
v.disable = true
v.zIndex = v.index + 9
v.offset = 0
v.moveEnd = false
if (v.id == this.tempItem.id) {
if (this.timer) {
clearTimeout(this.timer)
this.timer = null
}
v.scale = 1
v.opacity = 1
v.x = v.oldX
v.y = v.oldY
this.$nextTick(() => {
v.x = v.absX * this.viewWidth
v.y = v.absY * this.viewWidth
this.tempItem = null
})
}
})
this.changeStatus = true
}
//#endif
},
addImages() {
// if (typeof this.addImage === 'function') {
// this.addImage.bind(this.$parent)()
// } else {
let token = uni.getStorageSync("token")
//console.log('获取token成功', token)
let checkNumber = this.number - this.imageList.length
uni.chooseImage({
count: checkNumber,
sourceType: ['album', 'camera'],
success: res => {
let count = checkNumber <= res.tempFilePaths.length ? checkNumber : res.tempFilePaths.length
for (let i = 0; i < count; i++) {
uni.uploadFile({
url: orderStatisticsPOST, // 仅为示例，非真实的接口地址
filePath: res.tempFilePaths[i],
name: 'file',
formData: {
user: 'test'
},
header: {
'Content-Type': 'application/json;charset=UTF-8',
'Authorization': `Bearer ${token}`
},
success:res =>{
const dat = JSON.parse(res.data)
console.log(dat.data.url,"====")
this.addProperties(dat.data.url)
this.sortList()
}
// success: ({
// data
// }) => {
// const dat = JSON.parse(data)
// const {
// url
// } = dat.data;
// console.log(dat,"========================")
// this.addProperties(url)
// }
});
// this.addProperties(res.tempFilePaths)
}
}
})
// }
},
delImages(item, index) {
if (typeof this.delImage === 'function') {
this.delImage.bind(this.$parent)(() => {
this.delImageHandle(item, index)
})
} else {
this.delImageHandle(item, index)
}
},
delImageHandle(item, index) {
this.imageList.splice(index, 1)
for (let obj of this.imageList) {
if (obj.index > item.index) {
obj.index -= 1
obj.x = obj.oldX
obj.y = obj.oldY
obj.absX = obj.index % this.colsValue
obj.absY = Math.floor(obj.index / this.colsValue)
this.$nextTick(() => {
obj.x = obj.absX * this.viewWidth
obj.y = obj.absY * this.viewWidth
})
}
}
this.add.x = (this.imageList.length % this.colsValue) * this.viewWidth + 'px'
this.add.y = Math.floor(this.imageList.length / this.colsValue) * this.viewWidth + 'px'
this.sortList()
},
delImageMp(item, index) {
//#ifdef MP
this.delImages(item, index)
//#endif
},
sortList() {
console.log('sortList');
const result = []
let source = this.value
// #ifdef VUE3
source = this.modelValue
// #endif
let list = this.imageList.slice()
list.sort((a, b) => {
return a.index - b.index
})
for (let s of list) {
let item = source.find(d => this.getSrc(d) == s.src)
if (item) {
result.push(item)
} else {
if(this.keyName !== null) {
result.push({
[this.keyName]: s.src
})
} else {
result.push(s.src)
}
}
}
this.$emit("input", result);
this.$emit("update:modelValue", result);
},
addProperties(item) {
// console.log(item);
let absX = this.imageList.length % this.colsValue
let absY = Math.floor(this.imageList.length / this.colsValue)
let x = absX * this.viewWidth
let y = absY * this.viewWidth
// console.log(absX,absY,x,y,"==========");
this.imageList.push({
src: item,
x,
y,
oldX: x,
oldY: y,
absX,
absY,
scale: 1,
zIndex: 9,
opacity: 1,
index: this.imageList.length,
id: this.guid(16),
disable: false,
offset: 0,
moveEnd: false
})
console.log(this.imageList,"000==========");
this.add.x = (this.imageList.length % this.colsValue) * this.viewWidth + 'px'
this.add.y = Math.floor(this.imageList.length / this.colsValue) * this.viewWidth + 'px'
},
nothing() {},
rpx2px(v) {
return this.width * v / 750
},
guid(len = 32) {
const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')
const uuid = []
const radix = chars.length
for (let i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix]
uuid.shift()
return `u${uuid.join('')}`
}
}
}
</script>
<style lang="scss" scoped>
.con {
// padding: 30rpx;
.area {
width: 100%;
.view {
display: flex;
justify-content: center;
align-items: center;
.area-con {
position: relative;
overflow: hidden;
.pre-image {
width: 100%;
height: 100%;
}
.del-con {
position: absolute;
top: 0rpx;
right: 0rpx;
padding: 0 0 20rpx 20rpx;
.del-wrap {
width: 36rpx;
height: 36rpx;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 0 0 0 10rpx;
display: flex;
justify-content: center;
align-items: center;
.del-image {
width: 20rpx;
height: 20rpx;
}
}
}
}
}
.add {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
.add-wrap {
display: flex;
justify-content: center;
align-items: center;
background-color: #eeeeee;
}
}
}
}
</style>
uni_modules/shmily-drag-image/package.json 0 → 100644
{
"id": "shmily-drag-image",
"displayName": "图片拖拽排序",
"version": "2.0.2",
"description": "图片排序、图片拖动排序",
"keywords": [
"drag",
"图片",
"排序",
"拖拽",
"拖动"
],
"repository": "https://github.com/shmilyany/shmily-drag-image",
"engines": {
"HBuilderX": "^3.2.8"
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": "617942150"
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "",
"type": "component-vue"
},
"uni_modules": {
"dependencies": ["uni-scss"],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "u",
"app-nvue": "u"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "n",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
\ No newline at end of file
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