TmOct5/BlockChainH5
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

299
pages/instrument/basics.vue
View File

@@ -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;

62
unpackage/dist/dev/app-plus/app-service.js vendored
View File

@@ -44921,10 +44921,30 @@ var render = function() {
)
]
),
_c("view", {
staticClass: _vm._$s("50-" + $30, "sc", "module-hint"),
attrs: { _i: "50-" + $30 }
})
_c(
"view",
{
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()
@@ -44933,14 +44953,14 @@ var render = function() {
_c(
"view",
{
staticClass: _vm._$s(51, "sc", "add-modules"),
attrs: { _i: 51 },
staticClass: _vm._$s(52, "sc", "add-modules"),
attrs: { _i: 52 },
on: { click: _vm.addModule }
},
[
_c("uni-icons", {
staticClass: _vm._$s(52, "sc", "icon"),
attrs: { color: "#8b64fd", size: "20", type: "plus", _i: 52 }
staticClass: _vm._$s(53, "sc", "icon"),
attrs: { color: "#8b64fd", size: "20", type: "plus", _i: 53 }
})
],
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 _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() {
return {
@@ -45146,7 +45160,10 @@ var _uploading = __webpack_require__(/*! @/apis/interfaces/uploading */ 97);func
switch (type) {
case 'logo':
uni.chooseImage({
crop: { width: 300, height: 300 },
crop: {
width: 300,
height: 300 },
success: function success(path) {
(0, _uploading.uploads)([{
name: 'logo',
@@ -45164,7 +45181,10 @@ var _uploading = __webpack_require__(/*! @/apis/interfaces/uploading */ 97);func
break;
case 'videoCover':
uni.chooseImage({
crop: { width: 500, height: 350 },
crop: {
width: 500,
height: 350 },
success: function success(path) {
(0, _uploading.uploads)([{
name: 'logo',

30
unpackage/dist/dev/app-plus/app-view.js vendored
View File

File diff suppressed because one or more lines are too long