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.
 
 
 
 
 
 
yanzong_qianduan/pages/news3/components/afterSales.vue

178 lines
3.7 KiB

<template>
<view>
<u-popup v-model="afterSale" width="80%" border-radius="10" :closeable="true" mode="center">
<view class="afterSales">
<view class="filterTitle">
确定转移至售后
</view>
<view class="filterItem">
<view class="filterItemContent">
<view class="itemTitle">
上传照片 <text style="color:#FF5042">*</text><text>最多可传5张图片</text>
</view>
<u-upload
:fileList="finishImageList"
:previewFullImage="true"
@afterRead="afterRead"
:maxCount="8" width="180" height="180"
upload-text="上传照片"
@delete="deletePic"
name="1"
multiple
></u-upload>
</view>
<view class="filterItemContent">
<view class="itemTitle">
备注
</view>
<u-input v-model="remark" placeholder="请输入您的留言" type="textarea" :auto-height="true" />
</view>
</view>
<view class="submit">
确定
</view>
</view>
</u-popup>
</view>
</template>
<script>
export default{
data(){
return{
afterSale:false,
finishImageList:[],
remark:'',
}
},
methods:{
// 新增图片
async afterRead(event) {
let lists = [].concat(event.file)
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)
if(JSON.parse(result).code==1){
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result
}))
fileListLen++
}else{
this[`fileList${event.name}`].splice(fileListLen, 1)
}
}
},
//上传照片
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
// let a = uni.uploadFile({
// url: this.baseUrl+'/api/common/upload', // 仅为示例,非真实的接口地址
// filePath: url,
// name: 'file',
// formData: {
// user: 'test',
// token:getToken()
// },
// success: (res) => {
// if(JSON.parse(res.data).code==1){
// setTimeout(() => {
// this.finishImageList.push({url:JSON.parse(res.data).data.fullurl,path:JSON.parse(res.data).data.url})
// resolve(res.data)
// }, 1000)
// }else{
// uni.$u.toast(JSON.parse(res.data).msg)
// resolve(res.data)
// }
// },
// fail: (res) => {
// console.log(res,"rrr")
// }
// });
})
},
//删除图片
deletePic(event) {
this.finishImageList.splice(event.index, 1)
},
}
}
</script>
<style lang="scss" scoped>
.afterSales{
padding:32upx;
.filterTitle{
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 700;
color: #303030;
text-align: center;
}
.filterItem{
.filterItemContent{
margin-top:40upx;
.itemTitle{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #303030;
margin-bottom:20upx;
text{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #B5B5B5;
}
}
}
::v-deep .u-input{
height: 160upx;
background: #F7F8FA;
border-radius: 3px 3px 3px 3px;
opacity: 1;
}
::v-deep .u-input__textarea{
padding: 20upx;
}
}
.submit{
width: 100%;
height: 100rpx;
background: #FFAAA4;
border-radius: 6px 6px 6px 6px;
opacity: 1;
line-height: 100rpx;
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
margin-top:40upx;
text-align: center;
}
}
</style>