刮刮前端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

173 lines
3.8 KiB

<template>
<view>
<view class="nav_area"></view>
<view class="setPage">
<view class="">
<view class="banner_area">
<!-- <swiper class="" v-if="editInfo.banner.length>0" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
<swiper-item v-for="(item, index) in editInfo.banner">
<image class="swiper-item" :src="item.url"></image>
</swiper-item>
</swiper> -->
<view class="" v-if="editInfo.image" @click="addImg">
<image class="" :src="editInfo.image"></image>
</view>
<text v-else @click="addImg">点击添加轮播图</text>
</view>
<view style="" class="">
<view class="input_box">
<text>名称:</text>
<input type="text" v-model="editInfo.title" placeholder="请输入轮播名称" placeholder-style="color: #999;">
</view>
<view class="input_box">
<text>排序:</text>
<input type="text" v-model="editInfo.sort" placeholder="请输入轮播排序,数字越小,位置越前" placeholder-style="color: #999;">
</view>
</view>
<view class="submit" @click="confirm()">
确定发布
</view>
</view>
</view>
</view>
</template>
<script>
import API from '@/common/js/api.js'
export default {
data() {
return {
id: '',
editInfo: {title:'',sort:'', image: ''},
}
},
methods: {
addImg(){
uni.chooseImage({
count: 1,
success: (chooseImageRes) => {
const tempFilePaths = chooseImageRes.tempFilePaths;
uni.uploadFile({
url: API.baseUrl+'/rotationChart/upload',
filePath: tempFilePaths[0],
name: 'image',
header: {
token: uni.getStorageSync('user_token')
},
formData: {
},
success: (uploadFileRes) => {
console.log(uploadFileRes.data);
let data = JSON.parse(uploadFileRes.data);
this.editInfo.image = data.data.url;
this.editInfo.img = data.data.path;//短路径用来上传
}
});
}
});
},
confirm(){
let data = {
id: this.id||'',
title: this.editInfo.title,
sort: this.editInfo.sort,
image: this.editInfo.img
};
API.request('/rotationChart/save', data, res=>{
uni.showToast({
title: res.msg
})
setTimeout(()=>{
uni.navigateBack({
delta: 1
})
}, 1500)
})
},
},
onLoad(e) {
if(e){
this.id = e.id;
this.editInfo.title = e.title;
this.editInfo.image = e.image;
this.editInfo.img = e.image.split('/storage')[1];
this.editInfo.sort = e.sort;
}
},
}
</script>
<style lang="scss" scoped>
.nav_area {
position: fixed;
top: 0px;
left: 0px;
z-index: 99;
background-color: #fff;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
width: 700rpx;
padding: 0px 25rpx;
/* #ifdef H5 */
height: 88rpx;padding-top: var(--status-bar-height);
/* #endif */
/* #ifdef APP-PLUS */
height: 2px;
/* #endif */
box-sizing: content-box;
color: #b0b0b0;
font-size: 14px;
}
.setPage{
padding: 40rpx;
font-size: 14px;
color: #999;
}
.banner_area{
width: 670rpx;
height: 248rpx;
border: 1px solid #eee;
border-radius: 5px;
text-align: center;
line-height: 248rpx;
overflow: hidden;
image{
width: 670rpx;
height: 248rpx;
}
}
.input_box{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 40rpx;
input{
width: 572rpx;
height: 80rpx;
border: 1px solid #eee;
border-radius: 5px;
padding: 0px 10px;
box-sizing: border-box;
color: #444;
font-size: 14px;
}
}
.submit{
width: 670rpx;
height: 88rpx;
border-radius: 10px;
font-size: 14px;
text-align: center;
line-height: 88rpx;
color: #fff;
background-color: #e33837;
position: fixed;
bottom: 40rpx;
}
</style>