407 lines
9.6 KiB
Vue
407 lines
9.6 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>
|
||
<block v-for="(module,index) in modules" :key="index">
|
||
<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(index)">删除</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(index)">删除</view>
|
||
</view>
|
||
<view class="module-imgs">
|
||
<view class="item" v-for="(item, index) in module.content.image.showpath" :key="index">
|
||
<image class="cover" :src="item" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="item" @click="updImgs(index)">
|
||
<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(index)">删除</view>
|
||
</view>
|
||
<view class="module-videos">
|
||
<view class="item">
|
||
<image class="cover" v-if="module.content.video_image.showpath != ''" :src="module.content.video_image.showpath" mode="aspectFill" />
|
||
<view class="item-upd" @click="updImg('videoCover', index)" v-else>
|
||
<uni-icons type="plus" size="20" color="#999"/>
|
||
<view>上传视频封面</view>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<video class="cover" v-if="module.content.video_url.showpath != ''" :src="module.content.video_url.showpath" />
|
||
<view class="item-upd" @click="updImg('video', index)" 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 { uploading, uploads } from '@/apis/interfaces/uploading'
|
||
export default {
|
||
data() {
|
||
return {
|
||
logo : '',
|
||
description : '',
|
||
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.modulesType = res[1]
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
methods:{
|
||
// 单图上传
|
||
updImg(type, index){
|
||
console.log(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':
|
||
console.log('封面')
|
||
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 = [...modulesObj.content.video_image.showpath, ...res.url]
|
||
modulesObj.content.video_image.path = [...modulesObj.content.video_image.path, ...res.path]
|
||
|
||
this.$set(this.modules, index, modulesObj)
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
}
|
||
})
|
||
break
|
||
case 'video':
|
||
uni.chooseVideo({
|
||
success: path=> {
|
||
console.log(path)
|
||
}
|
||
})
|
||
console.log('上传视频')
|
||
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]
|
||
|
||
modulesObj.content.image.showpath = [...modulesObj.content.image.showpath, ...pathRes.url]
|
||
modulesObj.content.image.path = [...modulesObj.content.image.path, ...pathRes.path]
|
||
|
||
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: {
|
||
showpath: [],
|
||
path : []
|
||
}
|
||
}
|
||
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){
|
||
console.log(this.modules)
|
||
}
|
||
}
|
||
}
|
||
</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;
|
||
}
|
||
}
|
||
}
|
||
// 模块
|
||
.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-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>
|