修改物流弹窗及个人中心企业工具弹窗及员工模块的发货单管理，退换货管理新增
This commit is contained in:
538
pages/store/basics.vue
Normal file
538
pages/store/basics.vue
Normal file
@@ -0,0 +1,538 @@
|
||||
<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">点击查看封面/视频，长按删除封面
|
||||
<span class='delVideo' v-if="module.content.video_url.showpath != ''"
|
||||
@longpress="removeImg('video', moduleIndex, '')">长按删除视频</span>
|
||||
</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(){
|
||||
console.log('添加模板，，，，')
|
||||
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 : '',
|
||||
title : ''
|
||||
}]
|
||||
}
|
||||
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;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
.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;
|
||||
.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>
|
||||
Reference in New Issue
Block a user