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.
169 lines
3.4 KiB
169 lines
3.4 KiB
<template>
|
|
<view class="form">
|
|
<view class="shopName">
|
|
<view>物品分类</view>
|
|
<view class="list">
|
|
<view :class="{act : form.categoryId == item.id}" @click="form.categoryId = item.id" :key="index"
|
|
v-for="(item, index) in category">
|
|
{{ item.name }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="shopName">
|
|
<view>物品照片</view>
|
|
<view>
|
|
<uv-upload :fileList="fileList" :maxCount="1" width="180rpx"
|
|
height="180rpx" multiple
|
|
@afterRead="afterRead" @delete="deleteImage">
|
|
<image src="../../static/help/uploading.png" mode="aspectFill"
|
|
style="width: 180rpx;height: 180rpx;" />
|
|
</uv-upload>
|
|
</view>
|
|
</view>
|
|
<view class="shopName">
|
|
<view>物品名称</view>
|
|
<view>
|
|
<input v-model="form.name" placeholder="请输入物品名称" clearable></input>
|
|
</view>
|
|
</view>
|
|
<view class="shopName">
|
|
<view>物品长度CM</view>
|
|
<view>
|
|
<input v-model="form.length" type="number" placeholder="请输入物品长度" clearable></input>
|
|
</view>
|
|
</view>
|
|
<view class="shopName">
|
|
<view>物品宽度CM</view>
|
|
<view>
|
|
<input v-model="form.wide" type="number" placeholder="请输入物品宽度" clearable></input>
|
|
</view>
|
|
</view>
|
|
<view class="shopName">
|
|
<view>物品数量</view>
|
|
<view>
|
|
<uv-number-box v-model="form.num" :min="1"></uv-number-box>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
export default {
|
|
data() {
|
|
return {
|
|
form: {
|
|
categoryId: 0,
|
|
name: '',
|
|
num: 1,
|
|
length: '',
|
|
wide: '',
|
|
},
|
|
fileList: [],
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['category']),
|
|
},
|
|
mounted() {
|
|
this.closeForm()
|
|
},
|
|
methods: {
|
|
submit(fn) {
|
|
this.form.pic = this.fileList.map((item) => item.url).join(",")
|
|
let form = {
|
|
...this.form
|
|
}
|
|
if (this.$utils.verificationAll(form, {
|
|
pic: '请上传物品照片',
|
|
name: '请输入物品名称',
|
|
length: '请输入物品长度',
|
|
wide: '请输入物品宽度',
|
|
})) {
|
|
return
|
|
}
|
|
fn && fn(form)
|
|
},
|
|
closeForm() {
|
|
this.form = {
|
|
categoryId: 0,
|
|
name: '',
|
|
num: 1,
|
|
length: '',
|
|
wide: '',
|
|
}
|
|
this.fileList = []
|
|
if (this.category.length) {
|
|
this.form.categoryId = this.category[0].id
|
|
}
|
|
},
|
|
deleteImage(e) {
|
|
this.fileList.splice(e.index, 1)
|
|
},
|
|
afterRead(e) {
|
|
let self = this
|
|
e.file.forEach(file => {
|
|
self.$Oss.ossUpload(file.url).then(url => {
|
|
self.fileList.push({
|
|
url
|
|
})
|
|
})
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.form {
|
|
padding: 20rpx 0;
|
|
|
|
.shopName {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #FFF;
|
|
margin: 10rpx 0 0 0;
|
|
padding: 10rpx 20rpx;
|
|
|
|
>view:nth-of-type(1) {
|
|
width: 30%;
|
|
// font-weight: 700;
|
|
}
|
|
|
|
>view:nth-of-type(2) {
|
|
width: 70%;
|
|
// padding: 0 20rpx 0 0;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
|
|
input {
|
|
background-color: #f5f5f5;
|
|
// color: #a4a4a4;
|
|
font-size: 28rpx;
|
|
padding: 8rpx 8rpx 8rpx 15rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
font-size: 22rpx;
|
|
|
|
.act {
|
|
color: $uni-color;
|
|
border: 1px solid $uni-color;
|
|
background-color: #F9E7DE;
|
|
}
|
|
|
|
view {
|
|
border-radius: 15rpx;
|
|
background-color: #F3F3F3;
|
|
border: 1px solid #F3F3F3;
|
|
margin: 10rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 10rpx 20rpx;
|
|
}
|
|
}
|
|
</style>
|