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.
256 lines
5.4 KiB
256 lines
5.4 KiB
<template>
|
|
<view class="page">
|
|
<navbar title="我的物品" leftClick @leftClick="$utils.navigateBack" />
|
|
|
|
<!-- <view class="tabs">
|
|
<uv-tabs :list="tabs" :activeStyle="{color : '#FD5100', fontWeight : 600}" lineColor="#FD5100" lineHeight="8rpx"
|
|
lineWidth="50rpx" :scrollable="false" @click="clickTabs"></uv-tabs>
|
|
</view> -->
|
|
|
|
<commoditySelect ref="commoditySelect"/>
|
|
|
|
<view class="btn fixed" @click="open">
|
|
<button class="a">添加物品</button>
|
|
</view>
|
|
|
|
<uv-popup ref="addPopup" :round="30">
|
|
|
|
<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" multiple :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>
|
|
|
|
<view class="btn" @click="submit">
|
|
<button class="a">添加</button>
|
|
</view>
|
|
</uv-popup>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import commoditySelect from "../components/commodity/commoditySelect.vue"
|
|
import { mapState } from 'vuex'
|
|
export default {
|
|
components : {
|
|
commoditySelect,
|
|
},
|
|
data() {
|
|
return {
|
|
tabs: [{
|
|
name: '选择租赁物品'
|
|
},
|
|
{
|
|
name: '选择我的物品'
|
|
},
|
|
],
|
|
form : {
|
|
categoryId : 0,
|
|
name : '',
|
|
num : 1,
|
|
length : '',
|
|
wide : '',
|
|
},
|
|
fileList: [],
|
|
type : '',
|
|
}
|
|
},
|
|
computed : {
|
|
...mapState(['category']),
|
|
},
|
|
onLoad(args) {
|
|
this.type = args.type
|
|
if(this.type == 'add'){
|
|
this.$refs.addPopup.open('bottom')
|
|
}
|
|
},
|
|
onShow() {
|
|
this.$refs.commoditySelect.getList()
|
|
},
|
|
methods: {
|
|
//点击tab栏
|
|
clickTabs({
|
|
index,
|
|
name
|
|
}) {
|
|
// this.type = index;
|
|
// this.queryParams.pageSize = 10
|
|
// this.checkboxValue = []
|
|
// this.mixinsListApi = ['orderPage', 'orderPage'][index]
|
|
},
|
|
submit(){
|
|
|
|
this.form.pic = this.fileList.map((item) => item.url).join(",")
|
|
|
|
if (this.$utils.verificationAll(this.form, {
|
|
pic : '请上传物品照片',
|
|
name : '请输入物品名称',
|
|
length : '请输入物品长度',
|
|
wide : '请输入物品宽度',
|
|
})) {
|
|
return
|
|
}
|
|
|
|
this.$api('tablecloth', this.form, res => {
|
|
if(res.code == 200){
|
|
this.$refs.commoditySelect.getList()
|
|
this.$refs.addPopup.close()
|
|
}
|
|
})
|
|
},
|
|
open(){
|
|
this.form = {
|
|
categoryId : 0,
|
|
name : '',
|
|
num : 1,
|
|
length : '',
|
|
wide : '',
|
|
}
|
|
if(this.category.length){
|
|
this.form.categoryId = this.category[0].id
|
|
}
|
|
this.$refs.addPopup.open('bottom')
|
|
},
|
|
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">
|
|
.page{
|
|
padding-bottom: 200rpx;
|
|
.tabs{
|
|
position: sticky;
|
|
top: calc(var(--status-bar-height) + 120rpx);
|
|
background-color: #fff;
|
|
// padding-top: 20rpx;
|
|
}
|
|
.fixed{
|
|
position: fixed;
|
|
bottom: 20rpx;
|
|
}
|
|
.btn {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
|
|
.a {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 90%;
|
|
height: 100rpx;
|
|
color: #FFF;
|
|
background-color: $uni-color;
|
|
border: 1px solid red;
|
|
border-radius: 100rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|