[...长按删除视频。基础信息李]

This commit is contained in:
2021-10-25 17:21:05 +08:00
parent ad67333bbf
commit 9b1cb130d8
3 changed files with 232 additions and 159 deletions

View File

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

View File

@@ -44921,10 +44921,30 @@ var render = function() {
) )
] ]
), ),
_c("view", { _c(
staticClass: _vm._$s("50-" + $30, "sc", "module-hint"), "view",
attrs: { _i: "50-" + $30 } {
}) staticClass: _vm._$s("50-" + $30, "sc", "module-hint"),
attrs: { _i: "50-" + $30 }
},
[
_vm._$s(
"51-" + $30,
"i",
module.content.video_url.showpath != ""
)
? _c("span", {
staticClass: _vm._$s("51-" + $30, "sc", "delVideo"),
attrs: { _i: "51-" + $30 },
on: {
longpress: function($event) {
return _vm.removeImg("video", moduleIndex, "")
}
}
})
: _vm._e()
]
)
] ]
) )
: _vm._e() : _vm._e()
@@ -44933,14 +44953,14 @@ var render = function() {
_c( _c(
"view", "view",
{ {
staticClass: _vm._$s(51, "sc", "add-modules"), staticClass: _vm._$s(52, "sc", "add-modules"),
attrs: { _i: 51 }, attrs: { _i: 52 },
on: { click: _vm.addModule } on: { click: _vm.addModule }
}, },
[ [
_c("uni-icons", { _c("uni-icons", {
staticClass: _vm._$s(52, "sc", "icon"), staticClass: _vm._$s(53, "sc", "icon"),
attrs: { color: "#8b64fd", size: "20", type: "plus", _i: 52 } attrs: { color: "#8b64fd", size: "20", type: "plus", _i: 53 }
}) })
], ],
1 1
@@ -45058,17 +45078,6 @@ Object.defineProperty(exports, "__esModule", { value: true });exports.default =
@@ -45082,7 +45091,12 @@ Object.defineProperty(exports, "__esModule", { value: true });exports.default =
var _store = __webpack_require__(/*! @/apis/interfaces/store */ 375); var _store = __webpack_require__(/*! @/apis/interfaces/store */ 375);
var _uploading = __webpack_require__(/*! @/apis/interfaces/uploading */ 97);function _toConsumableArray(arr) {return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();}function _nonIterableSpread() {throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(o, minLen) {if (!o) return;if (typeof o === "string") return _arrayLikeToArray(o, minLen);var n = Object.prototype.toString.call(o).slice(8, -1);if (n === "Object" && o.constructor) n = o.constructor.name;if (n === "Map" || n === "Set") return Array.from(o);if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);}function _iterableToArray(iter) {if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);}function _arrayWithoutHoles(arr) {if (Array.isArray(arr)) return _arrayLikeToArray(arr);}function _arrayLikeToArray(arr, len) {if (len == null || len > arr.length) len = arr.length;for (var i = 0, arr2 = new Array(len); i < len; i++) {arr2[i] = arr[i];}return arr2;}var _default = var _uploading = __webpack_require__(/*! @/apis/interfaces/uploading */ 97);function _toConsumableArray(arr) {return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();}function _nonIterableSpread() {throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(o, minLen) {if (!o) return;if (typeof o === "string") return _arrayLikeToArray(o, minLen);var n = Object.prototype.toString.call(o).slice(8, -1);if (n === "Object" && o.constructor) n = o.constructor.name;if (n === "Map" || n === "Set") return Array.from(o);if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);}function _iterableToArray(iter) {if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);}function _arrayWithoutHoles(arr) {if (Array.isArray(arr)) return _arrayLikeToArray(arr);}function _arrayLikeToArray(arr, len) {if (len == null || len > arr.length) len = arr.length;for (var i = 0, arr2 = new Array(len); i < len; i++) {arr2[i] = arr[i];}return arr2;}var _default =
{ {
data: function data() { data: function data() {
return { return {
@@ -45146,7 +45160,10 @@ var _uploading = __webpack_require__(/*! @/apis/interfaces/uploading */ 97);func
switch (type) { switch (type) {
case 'logo': case 'logo':
uni.chooseImage({ uni.chooseImage({
crop: { width: 300, height: 300 }, crop: {
width: 300,
height: 300 },
success: function success(path) { success: function success(path) {
(0, _uploading.uploads)([{ (0, _uploading.uploads)([{
name: 'logo', name: 'logo',
@@ -45164,7 +45181,10 @@ var _uploading = __webpack_require__(/*! @/apis/interfaces/uploading */ 97);func
break; break;
case 'videoCover': case 'videoCover':
uni.chooseImage({ uni.chooseImage({
crop: { width: 500, height: 350 }, crop: {
width: 500,
height: 350 },
success: function success(path) { success: function success(path) {
(0, _uploading.uploads)([{ (0, _uploading.uploads)([{
name: 'logo', name: 'logo',

File diff suppressed because one or more lines are too long