Commit ee688964 by honghong

图片拖拽

parent 609adeda
......@@ -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
......@@ -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) {
......
......@@ -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('打开文档成功');
......
......@@ -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,
......
......@@ -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,
......
......@@ -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
......
......@@ -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}`
})
......
......@@ -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
},
......
......@@ -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;
......
......@@ -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
......
......@@ -170,7 +170,7 @@
queryParams: {
pageNum: 1,
pageSize: 10,
cityId: '上海市'
cityId: '青浦区'
},
demandList: [], //需求列表
total: 0,
......
# 图片拖拽排序插件
<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 | 删除确认,见上方示例
## 2.0.2(2022-09-17)
- 修复图片删除
## 2.0.1(2022-09-16)
- 修改文档
## 2.0.0(2022-09-16)
- 支持 Vue 3
- 图片数组支持对象元素
- 新增删除确认
- 解决了一些已知问题
- 调整为 uni_modules 目录规范
{
"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