[...长按删除视频。基础信息李]
This commit is contained in:
@@ -31,25 +31,17 @@
|
||||
<view class="remove-btn" @click="removeModule(moduleIndex)">删除</view>
|
||||
</view>
|
||||
<view class="module-imgs">
|
||||
<view
|
||||
class="item"
|
||||
v-for="(item, index) in module.content.image"
|
||||
:key="index"
|
||||
>
|
||||
<image
|
||||
class="cover"
|
||||
:src="item.showpath"
|
||||
mode="aspectFill"
|
||||
<view class="item" v-for="(item, index) in module.content.image" :key="index">
|
||||
<image class="cover" :src="item.showpath" mode="aspectFill"
|
||||
@click="openImg(module.content.image, index, 'imgs')"
|
||||
@longpress="removeImg('imgs', moduleIndex, index)"
|
||||
/>
|
||||
@longpress="removeImg('imgs', moduleIndex, index)" />
|
||||
<view class="item-input">
|
||||
<input type="text" v-model="item.title" placeholder="输入标题" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="item" @click="updImgs(moduleIndex)">
|
||||
<view class="item-upd cover">
|
||||
<uni-icons type="plus" size="20" color="#999"/>
|
||||
<uni-icons type="plus" size="20" color="#999" />
|
||||
<view>上传图片</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -64,118 +56,123 @@
|
||||
<view class="module-videos">
|
||||
<view class="item">
|
||||
<block v-if="module.content.video_image.showpath != ''">
|
||||
<image
|
||||
class="cover"
|
||||
:src="module.content.video_image.showpath"
|
||||
mode="aspectFill"
|
||||
<image class="cover" :src="module.content.video_image.showpath" mode="aspectFill"
|
||||
@click="openImg([module.content.video_image.showpath], 0, 'videos')"
|
||||
@longpress="removeImg('videoCover', moduleIndex, '')"
|
||||
/>
|
||||
@longpress="removeImg('videoCover', moduleIndex, '')" />
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="item-upd" @click="updImg('videoCover', moduleIndex)">
|
||||
<uni-icons type="plus" size="20" color="#999"/>
|
||||
<uni-icons type="plus" size="20" color="#999" />
|
||||
<view>上传视频封面</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="item">
|
||||
<video
|
||||
class="cover"
|
||||
v-if="module.content.video_url.showpath != ''"
|
||||
:src="module.content.video_url.showpath"
|
||||
@longpress="removeImg('video', moduleIndex, '')"
|
||||
/>
|
||||
<video class="cover" v-if="module.content.video_url.showpath != ''"
|
||||
:src="module.content.video_url.showpath" @longpress="removeImg('video', moduleIndex, '')" />
|
||||
<view class="item-upd" @click="updImg('video', moduleIndex)" v-else>
|
||||
<uni-icons type="plus" size="20" color="#999"/>
|
||||
<uni-icons type="plus" size="20" color="#999" />
|
||||
<view>上传视频</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="module-hint">点击查看封面/视频，长按删除封面/视频</view>
|
||||
<view class="module-hint">点击查看封面/视频，长按删除封面
|
||||
<span class='delVideo' v-if="module.content.video_url.showpath != ''"
|
||||
@longpress="removeImg('video', moduleIndex, '')">长按删除视频</span>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view @click="addModule" class="add-modules"><uni-icons class="icon" color="#8b64fd" size="20" type="plus"></uni-icons>添加模块</view>
|
||||
<view @click="addModule" class="add-modules">
|
||||
<uni-icons class="icon" color="#8b64fd" size="20" type="plus"></uni-icons>添加模块
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { basicsInfo, basicsConfig } from '@/apis/interfaces/store'
|
||||
import { uploads } from '@/apis/interfaces/uploading'
|
||||
import {
|
||||
basicsInfo,
|
||||
basicsConfig
|
||||
} from '@/apis/interfaces/store'
|
||||
import {
|
||||
uploads
|
||||
} from '@/apis/interfaces/uploading'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
logo : '',
|
||||
description : '',
|
||||
address : '',
|
||||
modules : [],
|
||||
modulesType : []
|
||||
logo: '',
|
||||
description: '',
|
||||
address: '',
|
||||
modules: [],
|
||||
modulesType: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
Promise.all([basicsInfo('GET', {}), basicsConfig()]).then(res => {
|
||||
let info = res[0]
|
||||
this.logo = info.base.cover
|
||||
let info = res[0]
|
||||
this.logo = info.base.cover
|
||||
this.description = info.base.description
|
||||
this.modules = info.extends
|
||||
this.address = info.info.address
|
||||
this.modules = info.extends
|
||||
this.address = info.info.address
|
||||
this.modulesType = res[1]
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
onNavigationBarButtonTap(){
|
||||
onNavigationBarButtonTap() {
|
||||
this.onBasicsInfo()
|
||||
},
|
||||
methods:{
|
||||
methods: {
|
||||
// 图片预览
|
||||
openImg(paths, index, type){
|
||||
if(type === 'imgs'){
|
||||
openImg(paths, index, type) {
|
||||
if (type === 'imgs') {
|
||||
paths = paths.map(val => {
|
||||
return val.showpath
|
||||
})
|
||||
}
|
||||
uni.previewImage({
|
||||
urls : paths,
|
||||
current : index,
|
||||
urls: paths,
|
||||
current: index,
|
||||
indicator: 'number'
|
||||
})
|
||||
},
|
||||
// 删除图片
|
||||
removeImg(type, moduleIndex, index){
|
||||
removeImg(type, moduleIndex, index) {
|
||||
let modulesObj = this.modules[moduleIndex]
|
||||
if(type === 'videoCover'){
|
||||
if (type === 'videoCover') {
|
||||
modulesObj.content.video_image.showpath = ''
|
||||
modulesObj.content.video_image.path = ''
|
||||
}
|
||||
if(type === 'imgs'){
|
||||
if (type === 'imgs') {
|
||||
modulesObj.content.image.splice(index, 1)
|
||||
}
|
||||
if(type === 'video'){
|
||||
if (type === 'video') {
|
||||
modulesObj.content.video_url.showpath = ''
|
||||
modulesObj.content.video_url.path = ''
|
||||
}
|
||||
this.$set(this.modules, moduleIndex, modulesObj)
|
||||
},
|
||||
// 单图上传
|
||||
updImg(type, index){
|
||||
switch(type){
|
||||
updImg(type, index) {
|
||||
switch (type) {
|
||||
case 'logo':
|
||||
uni.chooseImage({
|
||||
crop: {width: 300, height: 300},
|
||||
success: path=> {
|
||||
crop: {
|
||||
width: 300,
|
||||
height: 300
|
||||
},
|
||||
success: path => {
|
||||
uploads([{
|
||||
name: 'logo',
|
||||
uri : path.tempFilePaths[0]
|
||||
uri: path.tempFilePaths[0]
|
||||
}]).then(res => {
|
||||
this.logo = res.url[0]
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
@@ -183,11 +180,14 @@
|
||||
break
|
||||
case 'videoCover':
|
||||
uni.chooseImage({
|
||||
crop: {width: 500, height: 350},
|
||||
success: path=> {
|
||||
crop: {
|
||||
width: 500,
|
||||
height: 350
|
||||
},
|
||||
success: path => {
|
||||
uploads([{
|
||||
name: 'logo',
|
||||
uri : path.tempFilePaths[0]
|
||||
uri: path.tempFilePaths[0]
|
||||
}]).then(res => {
|
||||
let modulesObj = this.modules[index]
|
||||
modulesObj.content.video_image.showpath = res.url[0]
|
||||
@@ -196,7 +196,7 @@
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
@@ -204,10 +204,10 @@
|
||||
break
|
||||
case 'video':
|
||||
uni.chooseVideo({
|
||||
success: path=> {
|
||||
success: path => {
|
||||
uploads([{
|
||||
name: 'video',
|
||||
uri : path.tempFilePath
|
||||
uri: path.tempFilePath
|
||||
}]).then(res => {
|
||||
let modulesObj = this.modules[index]
|
||||
modulesObj.content.video_url.showpath = res.url[0]
|
||||
@@ -216,7 +216,7 @@
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
@@ -225,23 +225,23 @@
|
||||
}
|
||||
},
|
||||
// 批量上传图片
|
||||
updImgs(index){
|
||||
updImgs(index) {
|
||||
uni.chooseImage({
|
||||
success: res=>{
|
||||
success: res => {
|
||||
let path = res.tempFiles.map((val, index) => {
|
||||
return {
|
||||
name: 'uploads' + index,
|
||||
uri : val.path
|
||||
uri: val.path
|
||||
}
|
||||
})
|
||||
uploads(path).then(pathRes => {
|
||||
let modulesObj = this.modules[index],
|
||||
paths = []
|
||||
for(let i in pathRes.path){
|
||||
paths = []
|
||||
for (let i in pathRes.path) {
|
||||
paths.push({
|
||||
showpath: pathRes.url[i],
|
||||
path : pathRes.path[i],
|
||||
title : ''
|
||||
path: pathRes.path[i],
|
||||
title: ''
|
||||
})
|
||||
}
|
||||
modulesObj.content.image = [...modulesObj.content.image, ...paths]
|
||||
@@ -249,23 +249,23 @@
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 添加展示模块
|
||||
addModule(){
|
||||
addModule() {
|
||||
let modulesList = this.modulesType.map(val => {
|
||||
return val.value
|
||||
})
|
||||
|
||||
|
||||
uni.showActionSheet({
|
||||
itemList: modulesList,
|
||||
success : res => {
|
||||
success: res => {
|
||||
let content
|
||||
switch(this.modulesType[res.tapIndex].id){
|
||||
switch (this.modulesType[res.tapIndex].id) {
|
||||
case 1:
|
||||
content = {
|
||||
content: ''
|
||||
@@ -275,50 +275,50 @@
|
||||
content = {
|
||||
image: []
|
||||
}
|
||||
break
|
||||
break
|
||||
case 3:
|
||||
content = {
|
||||
video_image: {
|
||||
showpath: '',
|
||||
path : ''
|
||||
path: ''
|
||||
},
|
||||
video_url : {
|
||||
video_url: {
|
||||
showpath: '',
|
||||
path : ''
|
||||
path: ''
|
||||
}
|
||||
}
|
||||
break
|
||||
break
|
||||
}
|
||||
|
||||
|
||||
this.modules.push({
|
||||
type : this.modulesType[res.tapIndex].id,
|
||||
title : '',
|
||||
content : content
|
||||
type: this.modulesType[res.tapIndex].id,
|
||||
title: '',
|
||||
content: content
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
// 删除展示模块
|
||||
removeModule(index){
|
||||
removeModule(index) {
|
||||
this.modules.splice(index, 1)
|
||||
},
|
||||
|
||||
|
||||
// 保存基础信息
|
||||
onBasicsInfo(){
|
||||
onBasicsInfo() {
|
||||
basicsInfo('PUT', {
|
||||
cover : this.logo,
|
||||
description : this.description,
|
||||
address : this.address,
|
||||
extends : this.modules
|
||||
cover: this.logo,
|
||||
description: this.description,
|
||||
address: this.address,
|
||||
extends: this.modules
|
||||
}).then(res => {
|
||||
uni.showModal({
|
||||
title : '提示',
|
||||
content : '基本信息已保存',
|
||||
showCancel : false,
|
||||
title: '提示',
|
||||
content: '基本信息已保存',
|
||||
showCancel: false,
|
||||
confirmColor: '#8b64fd',
|
||||
success : modalRes=> {
|
||||
if(modalRes.confirm){
|
||||
success: modalRes => {
|
||||
if (modalRes.confirm) {
|
||||
this.$Router.back()
|
||||
}
|
||||
}
|
||||
@@ -326,7 +326,7 @@
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
@@ -335,17 +335,18 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.basics-content{
|
||||
|
||||
}
|
||||
.basics-content {}
|
||||
|
||||
// 基础信息
|
||||
.info{
|
||||
.info {
|
||||
background: white;
|
||||
padding: 0 $padding;
|
||||
.item{
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
padding: $padding 0 $padding 200rpx;
|
||||
&::after{
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
@@ -354,53 +355,62 @@
|
||||
height: 1rpx;
|
||||
background: #eee;
|
||||
}
|
||||
&:last-child::after{
|
||||
|
||||
&:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.info-logo{
|
||||
|
||||
.info-logo {
|
||||
text-align: right;
|
||||
padding-right: 40rpx;
|
||||
label{
|
||||
|
||||
label {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
}
|
||||
image{
|
||||
|
||||
image {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 50%;
|
||||
vertical-align: top;
|
||||
background: $border-color-lg;
|
||||
}
|
||||
.icon{
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
.info-text{
|
||||
label{
|
||||
|
||||
.info-text {
|
||||
label {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
textarea{
|
||||
|
||||
textarea {
|
||||
line-height: 40rpx;
|
||||
width: 100%;
|
||||
height: 160rpx;
|
||||
}
|
||||
input{
|
||||
|
||||
input {
|
||||
height: 40rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 添加模块
|
||||
.add-modules{
|
||||
.add-modules {
|
||||
margin: $margin 0;
|
||||
line-height: 88rpx;
|
||||
height: 88rpx;
|
||||
@@ -409,70 +419,82 @@
|
||||
background: white;
|
||||
box-sizing: border-box;
|
||||
font-size: $title-size-lg;
|
||||
.icon{
|
||||
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
margin-right: $margin/3;
|
||||
}
|
||||
}
|
||||
|
||||
// 展示模块
|
||||
.module-item{
|
||||
.module-item {
|
||||
background: white;
|
||||
padding: $padding/2 $padding;
|
||||
margin-top: $margin - 10;
|
||||
.module-title{
|
||||
|
||||
.module-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: $padding/2;
|
||||
border-bottom: solid 1rpx $border-color;
|
||||
.title-input{
|
||||
|
||||
.title-input {
|
||||
width: calc(100% - 150rpx);
|
||||
height: 70rpx;
|
||||
font-size: $title-size;
|
||||
}
|
||||
.remove-btn{
|
||||
|
||||
.remove-btn {
|
||||
line-height: 70rpx;
|
||||
color: $text-price;
|
||||
text-align: right;
|
||||
font-size: $title-size-m;
|
||||
}
|
||||
}
|
||||
.module-textarea{
|
||||
|
||||
.module-textarea {
|
||||
padding: $padding 0 $padding/2;
|
||||
width: 100%;
|
||||
font-size: $title-size;
|
||||
line-height: 50rpx;
|
||||
box-sizing: border-box;
|
||||
textarea{
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
}
|
||||
}
|
||||
.module-imgs{
|
||||
|
||||
.module-imgs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-top: $padding/2;
|
||||
margin-left: -10rpx;
|
||||
margin-right: -10rpx;
|
||||
.item{
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
background: #F8F8F8;
|
||||
width: calc(25% - 20rpx);
|
||||
padding-top: calc(25% - 20rpx);
|
||||
margin: 10rpx;
|
||||
.cover{
|
||||
|
||||
.cover {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.item-input{
|
||||
|
||||
.item-input {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba($color: #000000, $alpha: .7);
|
||||
input{
|
||||
|
||||
input {
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
font-size: 28rpx;
|
||||
@@ -481,7 +503,8 @@
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.item-upd{
|
||||
|
||||
.item-upd {
|
||||
@extend .vertical;
|
||||
text-align: center;
|
||||
font-size: $title-size-m;
|
||||
@@ -489,24 +512,35 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.module-hint{
|
||||
|
||||
.module-hint {
|
||||
color: $text-gray;
|
||||
font-size: $title-size-sm;
|
||||
padding: $padding/2 0;
|
||||
line-height: 50rpx;
|
||||
.delVideo{
|
||||
display: inline-block;
|
||||
background-color: $mian-color;
|
||||
color: #fff;
|
||||
margin-left: 30rpx;
|
||||
padding:2rpx 20rpx ;
|
||||
}
|
||||
}
|
||||
.module-videos{
|
||||
|
||||
.module-videos {
|
||||
display: flex;
|
||||
padding: $padding 0 ($padding/2);
|
||||
margin-left: -10rpx;
|
||||
margin-right: -10rpx;
|
||||
.item{
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
width: calc(50% - #{$margin/2});
|
||||
padding-top: calc(35% - #{$margin/2});
|
||||
background: #f8f8f8;
|
||||
margin: 0 10rpx;
|
||||
.item-upd{
|
||||
|
||||
.item-upd {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -518,7 +552,8 @@
|
||||
line-height: 40rpx;
|
||||
@extend .vertical;
|
||||
}
|
||||
.cover{
|
||||
|
||||
.cover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
Reference in New Issue
Block a user