567 lines
13 KiB
Vue
567 lines
13 KiB
Vue
<template>
|
||
<view class="basics-content">
|
||
<view class="info">
|
||
<view class="item info-logo" @click="updImg('logo', '')">
|
||
<label>企业LOGO</label>
|
||
<image :src="logo" mode="aspectFill"></image>
|
||
<uni-icons class="icon" color="#999" size="18" type="arrowright"></uni-icons>
|
||
</view>
|
||
<view class="item info-text">
|
||
<label>企业简介</label>
|
||
<textarea v-model="description" maxlength="-1" placeholder="输入企业简介" />
|
||
</view>
|
||
<view class="item info-text">
|
||
<label>企业地址</label>
|
||
<input v-model="address" placeholder="输入企业地址" />
|
||
</view>
|
||
</view>
|
||
<block v-for="(module, moduleIndex) in modules" :key="moduleIndex">
|
||
<view class="module-item" v-if="module.type === 1">
|
||
<view class="module-title">
|
||
<input class="title-input" type="text" v-model="module.title" placeholder="输入标题" />
|
||
<view class="remove-btn" @click="removeModule(moduleIndex)">删除</view>
|
||
</view>
|
||
<view class="module-textarea">
|
||
<textarea placeholder="输入文字内容" maxlength="-1" v-model="module.content.content" />
|
||
</view>
|
||
</view>
|
||
<view class="module-item" v-if="module.type === 2">
|
||
<view class="module-title">
|
||
<input class="title-input" type="text" v-model="module.title" placeholder="输入标题" />
|
||
<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"
|
||
@click="openImg(module.content.image, index, 'imgs')"
|
||
@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" />
|
||
<view>上传图片</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="module-hint">点击查看图片，长按删除图片</view>
|
||
</view>
|
||
<view class="module-item" v-if="module.type === 3">
|
||
<view class="module-title">
|
||
<input class="title-input" type="text" v-model="module.title" placeholder="输入标题" />
|
||
<view class="remove-btn" @click="removeModule(moduleIndex)">删除</view>
|
||
</view>
|
||
<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"
|
||
@click="openImg([module.content.video_image.showpath], 0, 'videos')"
|
||
@longpress="removeImg('videoCover', moduleIndex, '')" />
|
||
</block>
|
||
<block v-else>
|
||
<view class="item-upd" @click="updImg('videoCover', moduleIndex)">
|
||
<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, '')" />
|
||
<view class="item-upd" @click="updImg('video', moduleIndex)" v-else>
|
||
<uni-icons type="plus" size="20" color="#999" />
|
||
<view>上传视频</view>
|
||
</view>
|
||
</view>
|
||
</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>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
basicsInfo,
|
||
basicsConfig
|
||
} from '@/apis/interfaces/store'
|
||
import {
|
||
uploads
|
||
} from '@/apis/interfaces/uploading'
|
||
export default {
|
||
data() {
|
||
return {
|
||
logo: '',
|
||
description: '',
|
||
address: '',
|
||
modules: [],
|
||
modulesType: []
|
||
};
|
||
},
|
||
created() {
|
||
Promise.all([basicsInfo('GET', {}), basicsConfig()]).then(res => {
|
||
let info = res[0]
|
||
this.logo = info.base.cover
|
||
this.description = info.base.description
|
||
this.modules = info.extends
|
||
this.address = info.info.address
|
||
this.modulesType = res[1]
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
},
|
||
onNavigationBarButtonTap() {
|
||
this.onBasicsInfo()
|
||
},
|
||
methods: {
|
||
// 图片预览
|
||
openImg(paths, index, type) {
|
||
if (type === 'imgs') {
|
||
paths = paths.map(val => {
|
||
return val.showpath
|
||
})
|
||
}
|
||
uni.previewImage({
|
||
urls: paths,
|
||
current: index,
|
||
indicator: 'number'
|
||
})
|
||
},
|
||
// 删除图片
|
||
removeImg(type, moduleIndex, index) {
|
||
let modulesObj = this.modules[moduleIndex]
|
||
if (type === 'videoCover') {
|
||
modulesObj.content.video_image.showpath = ''
|
||
modulesObj.content.video_image.path = ''
|
||
}
|
||
if (type === 'imgs') {
|
||
modulesObj.content.image.splice(index, 1)
|
||
}
|
||
if (type === 'video') {
|
||
modulesObj.content.video_url.showpath = ''
|
||
modulesObj.content.video_url.path = ''
|
||
}
|
||
this.$set(this.modules, moduleIndex, modulesObj)
|
||
},
|
||
// 单图上传
|
||
updImg(type, index) {
|
||
switch (type) {
|
||
case 'logo':
|
||
uni.chooseImage({
|
||
crop: {
|
||
width: 300,
|
||
height: 300
|
||
},
|
||
success: path => {
|
||
uploads([{
|
||
name: 'logo',
|
||
uri: path.tempFilePaths[0]
|
||
}]).then(res => {
|
||
this.logo = res.url[0]
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
}
|
||
})
|
||
break
|
||
case 'videoCover':
|
||
uni.chooseImage({
|
||
crop: {
|
||
width: 500,
|
||
height: 350
|
||
},
|
||
success: path => {
|
||
uploads([{
|
||
name: 'logo',
|
||
uri: path.tempFilePaths[0]
|
||
}]).then(res => {
|
||
let modulesObj = this.modules[index]
|
||
modulesObj.content.video_image.showpath = res.url[0]
|
||
modulesObj.content.video_image.path = res.path[0]
|
||
this.$set(this.modules, index, modulesObj)
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
}
|
||
})
|
||
break
|
||
case 'video':
|
||
uni.chooseVideo({
|
||
success: path => {
|
||
uploads([{
|
||
name: 'video',
|
||
uri: path.tempFilePath
|
||
}]).then(res => {
|
||
let modulesObj = this.modules[index]
|
||
modulesObj.content.video_url.showpath = res.url[0]
|
||
modulesObj.content.video_url.path = res.path[0]
|
||
this.$set(this.modules, index, modulesObj)
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
}
|
||
})
|
||
break
|
||
}
|
||
},
|
||
// 批量上传图片
|
||
updImgs(index) {
|
||
uni.chooseImage({
|
||
success: res => {
|
||
let path = res.tempFiles.map((val, index) => {
|
||
return {
|
||
name: 'uploads' + index,
|
||
uri: val.path
|
||
}
|
||
})
|
||
uploads(path).then(pathRes => {
|
||
let modulesObj = this.modules[index],
|
||
paths = []
|
||
for (let i in pathRes.path) {
|
||
paths.push({
|
||
showpath: pathRes.url[i],
|
||
path: pathRes.path[i],
|
||
title: ''
|
||
})
|
||
}
|
||
modulesObj.content.image = [...modulesObj.content.image, ...paths]
|
||
this.$set(this.modules, index, modulesObj)
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 添加展示模块
|
||
addModule() {
|
||
let modulesList = this.modulesType.map(val => {
|
||
return val.value
|
||
})
|
||
|
||
uni.showActionSheet({
|
||
itemList: modulesList,
|
||
success: res => {
|
||
let content
|
||
switch (this.modulesType[res.tapIndex].id) {
|
||
case 1:
|
||
content = {
|
||
content: ''
|
||
}
|
||
break
|
||
case 2:
|
||
content = {
|
||
image: []
|
||
}
|
||
break
|
||
case 3:
|
||
content = {
|
||
video_image: {
|
||
showpath: '',
|
||
path: ''
|
||
},
|
||
video_url: {
|
||
showpath: '',
|
||
path: ''
|
||
}
|
||
}
|
||
break
|
||
}
|
||
|
||
this.modules.push({
|
||
type: this.modulesType[res.tapIndex].id,
|
||
title: '',
|
||
content: content
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
// 删除展示模块
|
||
removeModule(index) {
|
||
this.modules.splice(index, 1)
|
||
},
|
||
|
||
// 保存基础信息
|
||
onBasicsInfo() {
|
||
basicsInfo('PUT', {
|
||
cover: this.logo,
|
||
description: this.description,
|
||
address: this.address,
|
||
extends: this.modules
|
||
}).then(res => {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '基本信息已保存',
|
||
showCancel: false,
|
||
confirmColor: '#8b64fd',
|
||
success: modalRes => {
|
||
if (modalRes.confirm) {
|
||
this.$Router.back()
|
||
}
|
||
}
|
||
})
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.basics-content {}
|
||
|
||
// 基础信息
|
||
.info {
|
||
background: white;
|
||
padding: 0 $padding;
|
||
|
||
.item {
|
||
position: relative;
|
||
padding: $padding 0 $padding 200rpx;
|
||
|
||
&::after {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
right: -$padding;
|
||
content: " ";
|
||
height: 1rpx;
|
||
background: #eee;
|
||
}
|
||
|
||
&:last-child::after {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.info-logo {
|
||
text-align: right;
|
||
padding-right: 40rpx;
|
||
|
||
label {
|
||
position: absolute;
|
||
left: 0;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
}
|
||
|
||
image {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
border-radius: 50%;
|
||
vertical-align: top;
|
||
background: $border-color-lg;
|
||
}
|
||
|
||
.icon {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 50%;
|
||
margin-top: -10px;
|
||
}
|
||
}
|
||
|
||
.info-text {
|
||
label {
|
||
position: absolute;
|
||
left: 0;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
textarea {
|
||
line-height: 40rpx;
|
||
width: 100%;
|
||
height: 160rpx;
|
||
}
|
||
|
||
input {
|
||
height: 40rpx;
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 添加模块
|
||
.add-modules {
|
||
margin: $margin 0;
|
||
line-height: 88rpx;
|
||
height: 88rpx;
|
||
text-align: center;
|
||
color: $mian-color;
|
||
background: white;
|
||
box-sizing: border-box;
|
||
font-size: $title-size-lg;
|
||
|
||
.icon {
|
||
vertical-align: middle;
|
||
margin-right: $margin/3;
|
||
}
|
||
}
|
||
|
||
// 展示模块
|
||
.module-item {
|
||
background: white;
|
||
padding: $padding/2 $padding;
|
||
margin-top: $margin - 10;
|
||
|
||
.module-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-bottom: $padding/2;
|
||
border-bottom: solid 1rpx $border-color;
|
||
|
||
.title-input {
|
||
width: calc(100% - 150rpx);
|
||
height: 70rpx;
|
||
font-size: $title-size;
|
||
}
|
||
|
||
.remove-btn {
|
||
line-height: 70rpx;
|
||
color: $mian-color;
|
||
text-align: right;
|
||
font-size: $title-size-m;
|
||
}
|
||
}
|
||
|
||
.module-textarea {
|
||
padding: $padding 0 $padding/2;
|
||
width: 100%;
|
||
font-size: $title-size;
|
||
line-height: 50rpx;
|
||
box-sizing: border-box;
|
||
|
||
textarea {
|
||
width: 100%;
|
||
height: 200rpx;
|
||
}
|
||
}
|
||
|
||
.module-imgs {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding-top: $padding/2;
|
||
margin-left: -10rpx;
|
||
margin-right: -10rpx;
|
||
|
||
.item {
|
||
position: relative;
|
||
background: #F8F8F8;
|
||
width: calc(25% - 20rpx);
|
||
padding-top: calc(25% - 20rpx);
|
||
margin: 10rpx;
|
||
|
||
.cover {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.item-input {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: rgba($color: #000000, $alpha: .7);
|
||
|
||
input {
|
||
height: 50rpx;
|
||
line-height: 50rpx;
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
z-index: 4;
|
||
color: white;
|
||
}
|
||
}
|
||
|
||
.item-upd {
|
||
@extend .vertical;
|
||
text-align: center;
|
||
font-size: $title-size-m;
|
||
color: $text-gray-m;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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 {
|
||
display: flex;
|
||
padding: $padding 0 ($padding/2);
|
||
margin-left: -10rpx;
|
||
margin-right: -10rpx;
|
||
|
||
.item {
|
||
position: relative;
|
||
width: calc(50% - #{$margin/2});
|
||
padding-top: calc(35% - #{$margin/2});
|
||
background: #f8f8f8;
|
||
margin: 0 10rpx;
|
||
|
||
.item-upd {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
text-align: center;
|
||
font-size: $title-size-m;
|
||
color: $text-gray-m;
|
||
line-height: 40rpx;
|
||
@extend .vertical;
|
||
}
|
||
|
||
.cover {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|