523 lines
12 KiB
Vue
523 lines
12 KiB
Vue
<template>
|
||
<view class="ios-bottom">
|
||
<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" 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="输入文字内容" 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">点击查看封面/视频，长按删除封面/视频</view>
|
||
</view>
|
||
</block>
|
||
<view class="add-modules" @click="addModule">
|
||
<uni-icons class="icon" type="plus" size="18" color="#c82626"/> 添加展示模块
|
||
</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 => {
|
||
console.log(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'
|
||
})
|
||
})
|
||
},
|
||
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)
|
||
},
|
||
|
||
// 保存基础信息
|
||
onNavigationBarButtonTap(e){
|
||
basicsInfo('PUT', {
|
||
cover : this.logo,
|
||
description : this.description,
|
||
address : this.address,
|
||
extends : this.modules
|
||
}).then(res => {
|
||
uni.showModal({
|
||
title : '提示',
|
||
content : '基本信息已保存',
|
||
showCancel : false,
|
||
success : modalRes=> {
|
||
if(modalRes.confirm){
|
||
this.$Router.back()
|
||
}
|
||
}
|
||
})
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 基础信息
|
||
.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{
|
||
line-height: 90rpx;
|
||
text-align: center;
|
||
color: $text-price;
|
||
background: white;
|
||
margin-top: $margin;
|
||
.icon{
|
||
vertical-align: middle;
|
||
margin-right: $margin/3;
|
||
}
|
||
}
|
||
// 展示模块
|
||
.module-item{
|
||
background: white;
|
||
padding: $padding/2 $padding;
|
||
margin-top: $margin;
|
||
.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: $text-price;
|
||
text-align: right;
|
||
font-size: $title-size-m;
|
||
}
|
||
}
|
||
.module-textarea{
|
||
padding: $padding 0 $padding/2;
|
||
width: 100%;
|
||
font-size: $title-size;
|
||
line-height: 50rpx;
|
||
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;
|
||
}
|
||
.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>
|