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.
131 lines
3.4 KiB
131 lines
3.4 KiB
<!-- 底部菜单--库存--新增商品 -->
|
|
<template>
|
|
<view>
|
|
<view class="formBox">
|
|
<uni-forms ref="form" :modelValue="formData" :rules="rules" labelWidth="85px">
|
|
<uni-forms-item label="图片" name="productPicture">
|
|
<view v-if="formData.productPicture !=''">
|
|
<img :src="formData.productPicture" alt="" class="upload-img">
|
|
</view>
|
|
<u-upload :fileList="formData.productPicture" @afterRead="afterRead" @delete="deletePic" name="1" multiple
|
|
:maxCount="1"></u-upload>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="描述" name="productIntro">
|
|
<uni-easyinput type="textarea" autoHeight v-model="formData.productIntro" placeholder="请简要说明问题"
|
|
trim="all" />
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
|
|
<u-button type="primary" @tap.stop="submit()">保存</u-button>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
formData: {
|
|
productPicture: [],
|
|
productIntro: ''
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
// 删除图片
|
|
deletePic(event) {
|
|
this[`fileList${event.name}`].splice(event.index, 1)
|
|
},
|
|
// 新增图片
|
|
async afterRead(event) {
|
|
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|
let lists = [].concat(event.file)
|
|
if (this.formData.productPicture == undefined) this.formData.productPicture = [];
|
|
let fileListLen = this[`fileList${event.name}`].length
|
|
|
|
lists.map((item) => {
|
|
this[`fileList${event.name}`].push({
|
|
...item,
|
|
status: 'uploading',
|
|
message: '上传中'
|
|
})
|
|
})
|
|
|
|
for (let i = 0; i < lists.length; i++) {
|
|
const result = await this.uploadFilePromise(lists[i].url)
|
|
let item = this[`fileList${event.name}`][fileListLen]
|
|
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
|
status: 'success',
|
|
message: '',
|
|
url: result
|
|
}))
|
|
fileListLen++
|
|
}
|
|
},
|
|
uploadFilePromise(url) {
|
|
|
|
return new Promise((resolve, reject) => {
|
|
let a = uni.uploadFile({
|
|
url: 'https://storage.xenjoyou.com/hiver/upload/file',
|
|
filePath: url,
|
|
name: 'file',
|
|
header: {
|
|
"content-type": "multipart/form-data",
|
|
'accessToken': this.tui.getToken()
|
|
},
|
|
formData: {},
|
|
success: (uploadFileRes) => {
|
|
|
|
let path = JSON.parse(uploadFileRes.data)
|
|
//后端返回的地址，存入图片地址
|
|
this.formData.productPicture = path.result
|
|
}
|
|
});
|
|
})
|
|
},
|
|
// 触发提交表单
|
|
submit() {
|
|
let that = this;
|
|
let url = ''
|
|
this.$refs.form.validate().then(res => {
|
|
if(that.dataList !=''){
|
|
url = '/app/product/edit'
|
|
res.id = that.dataList.id
|
|
}else{
|
|
url = '/app/product/save'
|
|
}
|
|
that.tui.request(url, "post", res, false, false).then((res1) => {
|
|
if (res1.code == 200) {
|
|
uni.navigateBack({
|
|
delta: 2
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: "添加失败",
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
}).catch(err => {
|
|
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.formBox {
|
|
margin: 20rpx;
|
|
padding: 20rpx 26rpx;
|
|
border-radius: 14rpx;
|
|
box-shadow: 0px 1px 10px 2px #e2e2e2;
|
|
background-color: #fff;
|
|
}
|
|
.upload-img{
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
}
|
|
</style>
|