177 lines
4.3 KiB
Vue
177 lines
4.3 KiB
Vue
|
<template>
|
|||
|
|
<view class="main">
|
|||
|
|
<view class="list">
|
|||
|
|
<view class="list-item">
|
|||
|
|
<text class="label">分类排序：</text>
|
|||
|
|
<uni-number-box :min="0" :value="infor.thisSort" @change="numberChange"></uni-number-box>
|
|||
|
|
</view>
|
|||
|
|
<view class="list-item">
|
|||
|
|
<text class="label">分类名称：</text>
|
|||
|
|
<input type="text" placeholder="请输入分类名称" v-model="infor.name" class="input"/>
|
|||
|
|
</view>
|
|||
|
|
<view class="list-item">
|
|||
|
|
<text class="label">分类状态：</text>
|
|||
|
|
<picker mode="selector" range-key="name" class="flex-grow" @change="bindPickerChange" :value="pickerIndex" :range="pickerArr">
|
|||
|
|
<view class="uni-input">{{pickerArr[pickerIndex].name}}</view>
|
|||
|
|
</picker>
|
|||
|
|
</view>
|
|||
|
|
<view class="list-item bor-no cell">
|
|||
|
|
<text class="name">分类描述：</text>
|
|||
|
|
<textarea type="text" placeholder="请输入您的分类描述(100字以内)" :maxlength="100" v-model="infor.details" class="flex-grow textarea"/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="grid flex flex-between" @click="uploadImg()">
|
|||
|
|
<text>分类图片：</text>
|
|||
|
|
<view class="flex flex-center box">
|
|||
|
|
<text class="iconfont font60" v-if="!classImg"></text>
|
|||
|
|
<image :src="classImg" mode="" class="image" v-else></image>
|
|||
|
|
<!-- <text class="iconfont color-red del" v-if="classImg" @tap.stop="onDel()"></text> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<button type="primary" class="bg-base btn" :loading="loading" :disabled="loading" @click="commit()">确定</button>
|
|||
|
|
|
|||
|
|
<avatar @upload="myUpload" ref="avatar"></avatar>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import url from "@/common/http/url.js"
|
|||
|
|
import upload from "@/common/http/upload.js"
|
|||
|
|
import avatar from "@/components/yq-avatar/yq-avatar.vue";
|
|||
|
|
import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
|
|||
|
|
export default{
|
|||
|
|
components: { avatar, uniNumberBox },
|
|||
|
|
data(){
|
|||
|
|
return {
|
|||
|
|
loading: false,
|
|||
|
|
isEdit: false,
|
|||
|
|
classImg: "",
|
|||
|
|
infor: {},
|
|||
|
|
pickerArr: [
|
|||
|
|
{name: "正常", value: 1},
|
|||
|
|
{name: "隐藏", value: 2}
|
|||
|
|
],
|
|||
|
|
pickerIndex: 0,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(opt){
|
|||
|
|
if (opt.isEdit) {
|
|||
|
|
this.isEdit = true
|
|||
|
|
uni.setNavigationBarTitle({
|
|||
|
|
title: "编辑分类"
|
|||
|
|
})
|
|||
|
|
let detail = uni.getStorageSync("classDetail")
|
|||
|
|
uni.removeStorageSync("classDetail")
|
|||
|
|
this.infor = detail
|
|||
|
|
console.log(this.infor)
|
|||
|
|
delete this.infor.resourcesList
|
|||
|
|
this.pickerIndex = detail.status - 1
|
|||
|
|
this.classImg = detail.mainImage
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
commit(){
|
|||
|
|
this.loading = true
|
|||
|
|
let path = url.store.addCategory
|
|||
|
|
if (this.isEdit) path = url.store.updateCategory
|
|||
|
|
this.$http("POST", path, this.infor).then(res=>{
|
|||
|
|
this.$msg(res.data)
|
|||
|
|
this.$navigateBack(1, 500)
|
|||
|
|
}).catch(()=>{
|
|||
|
|
this.loading = false
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
uploadImg(){
|
|||
|
|
upload.showAvatarModal(this, 500, 500)
|
|||
|
|
},
|
|||
|
|
myUpload(rsp){
|
|||
|
|
this.classImg = rsp.path
|
|||
|
|
upload.getOssSignature(rsp.path, 12, 1).then(data=>{
|
|||
|
|
upload.uploadImageOss(data).then(list=>{
|
|||
|
|
this.infor.mainImage = JSON.stringify({
|
|||
|
|
resourceTemporaryUUID: list[0].resourceTemporaryUUID
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
bindPickerChange(e){
|
|||
|
|
this.infor.status = this.pickerArr[e.detail.value].value
|
|||
|
|
},
|
|||
|
|
numberChange(e){
|
|||
|
|
this.infor.thisSort = e
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.main{
|
|||
|
|
padding: 20rpx;
|
|||
|
|
.list{
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
background-color: white;
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
&-item{
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 120rpx;
|
|||
|
|
border-bottom: 2rpx solid #f5f3f7;
|
|||
|
|
color: #555;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
.input{
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
}
|
|||
|
|
.icon{
|
|||
|
|
font-size: 44rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.cell{
|
|||
|
|
height: auto;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
padding: 30rpx 0;
|
|||
|
|
.textarea{
|
|||
|
|
height: 200rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid{
|
|||
|
|
padding: 20rpx 30rpx;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
color: #555;
|
|||
|
|
background-color: white;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
.box{
|
|||
|
|
width: 250rpx;
|
|||
|
|
height: 250rpx;
|
|||
|
|
border: 2rpx solid #EEEEEE;
|
|||
|
|
border-radius: 14rpx;
|
|||
|
|
position: relative;
|
|||
|
|
.img{
|
|||
|
|
width: 187rpx;
|
|||
|
|
height: 187rpx;
|
|||
|
|
}
|
|||
|
|
.image{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.del{
|
|||
|
|
position: absolute;
|
|||
|
|
top: -20rpx;
|
|||
|
|
right: -20rpx;
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.btn{
|
|||
|
|
margin: 50rpx 0;
|
|||
|
|
border-radius: 50rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|