12 changed files with 2280 additions and 2044 deletions
@ -0,0 +1,507 @@
|
||||
<template> |
||||
<view class="app-wallpaper" :style="{ |
||||
backgroundImage:'url('+staticImage.wallpaperBgImage+')' |
||||
}"> |
||||
<view class="feed-top"> |
||||
<view class="feed-container"> |
||||
<view class="feed-content"> |
||||
<view class="top-img"> |
||||
<u-image class="img" mode="aspectFill" width="100%" height="600" :src="detail.avatar || staticImage.banner"> |
||||
|
||||
</u-image> |
||||
</view> |
||||
<view class="top-content row"> |
||||
<view class="content-item col-6 row"> |
||||
<view class="item-title">爱称：</view> |
||||
<view class="item-content">{{detail.name}}</view> |
||||
</view> |
||||
<view class="content-item col-6 row"> |
||||
<view class="item-title">性别：</view> |
||||
<view class="item-content">{{detail.sex}}</view> |
||||
</view> |
||||
<view class="content-item col-6 row"> |
||||
<view class="item-title">体重：</view> |
||||
<view class="item-content">{{detail.weight}}kg</view> |
||||
</view> |
||||
<view class="content-item col-6 row"> |
||||
<view class="item-title">种类：</view> |
||||
<view class="item-content">{{detail.type_name}}</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="feed-background"> |
||||
<view class="feed-background-content"></view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="feed-bottom"> |
||||
<view class="feed-container"> |
||||
<view class="feed-gun"> |
||||
<image class="img" mode="heightFix" :src="staticImage.feedGun" /> |
||||
</view> |
||||
<view class="feed-content"> |
||||
<u-collapse :value="collapseValue"> |
||||
<u-collapse-item |
||||
name="collapse" |
||||
title="水碗饭碗" |
||||
> |
||||
<u-textarea border="none" :disabled="(type !== 'create')" v-model="detail.feedlist.meal" placeholder="请输入内容" ></u-textarea> |
||||
<uv-upload |
||||
width="160rpx" |
||||
height="160rpx" |
||||
accept="media" |
||||
:fileList="images.meal_imgs" |
||||
name="1" |
||||
multiple |
||||
:maxCount="(type === 'create')?10:images.meal_imgs.length" |
||||
:disabled="(type !== 'create')" |
||||
:deletable="(type === 'create')" |
||||
@delete="(res) => {uploadDel(res,'meal_imgs')}" |
||||
@afterRead="(res) => {uploadPut(res,'meal_imgs')}" |
||||
> |
||||
<u-image :src="staticImage.feedUpload" |
||||
mode="widthFix" width="130rpx" height="130rpx"></u-image> |
||||
</uv-upload> |
||||
</u-collapse-item> |
||||
|
||||
</u-collapse> |
||||
<u-collapse :value="collapseValue"> |
||||
<u-collapse-item |
||||
name="collapse" |
||||
title="主食情况" |
||||
> |
||||
<u-textarea border="none" :disabled="(type !== 'create')" v-model="detail.feedlist.food" placeholder="请输入内容" ></u-textarea> |
||||
<uv-upload |
||||
width="160rpx" |
||||
height="160rpx" |
||||
accept="media" |
||||
:fileList="images.food_imgs" |
||||
name="1" |
||||
multiple |
||||
:maxCount="(type === 'create')?10:images.food_imgs.length" |
||||
:disabled="(type !== 'create')" |
||||
:deletable="(type === 'create')" |
||||
@delete="(res) => {uploadDel(res,'food_imgs')}" |
||||
@afterRead="(res) => {uploadPut(res,'food_imgs')}" |
||||
> |
||||
<u-image :src="staticImage.feedUpload" |
||||
mode="widthFix" width="130rpx" height="130rpx"></u-image> |
||||
</uv-upload> |
||||
</u-collapse-item> |
||||
|
||||
</u-collapse> |
||||
<u-collapse :value="collapseValue"> |
||||
<u-collapse-item |
||||
name="collapse" |
||||
title="零食小吃" |
||||
> |
||||
<u-textarea border="none" :disabled="(type !== 'create')" v-model="detail.feedlist.snack" placeholder="请输入内容" ></u-textarea> |
||||
<uv-upload |
||||
width="160rpx" |
||||
height="160rpx" |
||||
accept="media" |
||||
:fileList="images.snack_imgs" |
||||
name="1" |
||||
multiple |
||||
:maxCount="(type === 'create')?10:images.snack_imgs.length" |
||||
:disabled="(type !== 'create')" |
||||
:deletable="(type === 'create')" |
||||
@delete="(res) => {uploadDel(res,'snack_imgs')}" |
||||
@afterRead="(res) => {uploadPut(res,'snack_imgs')}" |
||||
> |
||||
<u-image :src="staticImage.feedUpload" |
||||
mode="widthFix" width="130rpx" height="130rpx"></u-image> |
||||
</uv-upload> |
||||
</u-collapse-item> |
||||
|
||||
</u-collapse> |
||||
<u-collapse :value="collapseValue"> |
||||
<u-collapse-item |
||||
name="collapse" |
||||
title="喂药擦药" |
||||
> |
||||
<u-textarea border="none" :disabled="(type !== 'create')" v-model="detail.feedlist.drug" placeholder="请输入内容" ></u-textarea> |
||||
<uv-upload |
||||
width="160rpx" |
||||
height="160rpx" |
||||
accept="media" |
||||
:fileList="images.drug_imgs" |
||||
name="1" |
||||
multiple |
||||
:maxCount="(type === 'create')?10:images.drug_imgs.length" |
||||
:disabled="(type !== 'create')" |
||||
:deletable="(type === 'create')" |
||||
@delete="(res) => {uploadDel(res,'drug_imgs')}" |
||||
@afterRead="(res) => {uploadPut(res,'drug_imgs')}" |
||||
> |
||||
<u-image :src="staticImage.feedUpload" |
||||
mode="widthFix" width="130rpx" height="130rpx"></u-image> |
||||
</uv-upload> |
||||
</u-collapse-item> |
||||
|
||||
</u-collapse> |
||||
<u-collapse :value="collapseValue"> |
||||
<u-collapse-item |
||||
name="collapse" |
||||
title="需要注意" |
||||
> |
||||
<u-textarea border="none" :disabled="(type !== 'create')" v-model="detail.feedlist.note" placeholder="请输入内容" ></u-textarea> |
||||
<uv-upload |
||||
width="160rpx" |
||||
height="160rpx" |
||||
accept="media" |
||||
:fileList="images.note_imgs" |
||||
name="1" |
||||
multiple |
||||
:maxCount="(type === 'create')?10:images.note_imgs.length" |
||||
:disabled="(type !== 'create')" |
||||
:deletable="(type === 'create')" |
||||
@delete="(res) => {uploadDel(res,'note_imgs')}" |
||||
@afterRead="(res) => {uploadPut(res,'note_imgs')}" |
||||
> |
||||
<u-image :src="staticImage.feedUpload" |
||||
mode="widthFix" width="130rpx" height="130rpx"></u-image> |
||||
</uv-upload> |
||||
</u-collapse-item> |
||||
|
||||
</u-collapse> |
||||
<u-collapse :value="collapseValue"> |
||||
<u-collapse-item |
||||
name="collapse" |
||||
title="用品位置" |
||||
> |
||||
<u-textarea border="none" :disabled="(type !== 'create')" v-model="detail.feedlist.goods" placeholder="请输入内容" ></u-textarea> |
||||
<uv-upload |
||||
width="160rpx" |
||||
height="160rpx" |
||||
accept="media" |
||||
:fileList="images.goods_imgs" |
||||
name="1" |
||||
multiple |
||||
:maxCount="(type === 'create')?10:images.goods_imgs.length" |
||||
:disabled="(type !== 'create')" |
||||
:deletable="(type === 'create')" |
||||
@delete="(res) => {uploadDel(res,'goods_imgs')}" |
||||
@afterRead="(res) => {uploadPut(res,'goods_imgs')}" |
||||
> |
||||
<u-image :src="staticImage.feedUpload" |
||||
mode="widthFix" width="130rpx" height="130rpx"></u-image> |
||||
</uv-upload> |
||||
</u-collapse-item> |
||||
|
||||
</u-collapse> |
||||
<u-collapse :value="collapseValue"> |
||||
<u-collapse-item |
||||
name="collapse" |
||||
title="外出路线" |
||||
> |
||||
<u-textarea border="none" :disabled="(type !== 'create')" v-model="detail.feedlist.line" placeholder="请输入内容" ></u-textarea> |
||||
<uv-upload |
||||
width="160rpx" |
||||
height="160rpx" |
||||
accept="media" |
||||
:fileList="images.line_imgs" |
||||
name="1" |
||||
multiple |
||||
:maxCount="(type === 'create')?10:images.line_imgs.length" |
||||
:disabled="(type !== 'create')" |
||||
:deletable="(type === 'create')" |
||||
@delete="(res) => {uploadDel(res,'line_imgs')}" |
||||
@afterRead="(res) => {uploadPut(res,'line_imgs')}" |
||||
> |
||||
<u-image :src="staticImage.feedUpload" |
||||
mode="widthFix" width="130rpx" height="130rpx"></u-image> |
||||
</uv-upload> |
||||
</u-collapse-item> |
||||
|
||||
</u-collapse> |
||||
<u-collapse :value="collapseValue"> |
||||
<u-collapse-item |
||||
name="collapse" |
||||
title="其它事项" |
||||
> |
||||
<u-textarea border="none" :disabled="(type !== 'create')" v-model="detail.feedlist.other" placeholder="请输入内容" ></u-textarea> |
||||
<uv-upload |
||||
width="160rpx" |
||||
height="160rpx" |
||||
accept="media" |
||||
:fileList="images.other_imgs" |
||||
name="1" |
||||
multiple |
||||
:maxCount="(type === 'create')?10:images.other_imgs.length" |
||||
:disabled="(type !== 'create')" |
||||
:deletable="(type === 'create')" |
||||
@delete="(res) => {uploadDel(res,'other_imgs')}" |
||||
@afterRead="(res) => {uploadPut(res,'other_imgs')}" |
||||
> |
||||
<u-image :src="staticImage.feedUpload" |
||||
mode="widthFix" width="130rpx" height="130rpx"></u-image> |
||||
</uv-upload> |
||||
</u-collapse-item> |
||||
|
||||
</u-collapse> |
||||
</view> |
||||
<view class="feed-background"> |
||||
<view class="feed-background-content"></view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view v-if="show_button"> |
||||
<view class="footer-menu row" v-if="(type === 'detail')"> |
||||
<view class="footer-button col-12"> |
||||
<MzButton |
||||
title="修改" |
||||
button-color="#4DC3B8" |
||||
font-color="#FFFFFF" |
||||
button-width="250rpx" |
||||
@click="redirtTo('/pages/FeedLog/index?type=create&pet_id='+pet_id)" |
||||
> |
||||
</MzButton> |
||||
</view> |
||||
</view> |
||||
<view class="footer-menu row" v-if="(type === 'create')"> |
||||
<view class="footer-button col-6"> |
||||
<MzButton |
||||
title="取消" |
||||
button-color="#ffffff" |
||||
font-color="##262626" |
||||
button-width="250rpx" |
||||
@click="redirtTo('/pages/FeedLog/index?type=detail&pet_id='+pet_id)" |
||||
> |
||||
</MzButton> |
||||
</view> |
||||
<view class="footer-button col-6"> |
||||
<MzButton |
||||
title="保存" |
||||
button-color="#4DC3B8" |
||||
font-color="#FFFFFF" |
||||
button-width="250rpx" |
||||
@click="submit" |
||||
> |
||||
</MzButton> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<u-overlay :show="imageShow" @click="imageShow = false"> |
||||
<view class="" style="display:flex;align-items: center;justify-content:center;width:100%;height:100vh;"> |
||||
<u-image mode="widthFix" :src="imageUrl" height="auto" width="100vw"></u-image> |
||||
</view> |
||||
</u-overlay> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
imghost |
||||
} from '@/config/host.js' |
||||
import MzButton from '@/components/MzButton/Index.vue'; |
||||
import api from '@/utils/functions.js'; |
||||
import {editFeed, feedLog} from "@/api/pet"; |
||||
export default { |
||||
components: { |
||||
MzButton |
||||
}, |
||||
props:{ |
||||
pet_id:{ |
||||
type:Number, |
||||
default:0, |
||||
}, |
||||
type:{ |
||||
type:String, |
||||
default: 'detail', |
||||
}, |
||||
show_button:{ |
||||
type:Boolean, |
||||
default: true, |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
collapseValue:[], |
||||
imageShow:false, |
||||
imageUrl:'', |
||||
title: 'Hello', |
||||
loading: true, |
||||
staticImage: { |
||||
screenActiveImg: imghost + '/order-screen-active.png', |
||||
orderCardBackground: imghost + '/order-card-background.png', |
||||
wallpaperBgImage:imghost +'/background.png', |
||||
petGun:imghost +'/pet_gun.png', |
||||
feedGun:imghost +'/feed-gun.png', |
||||
addPet:imghost +'/add-pet.png', |
||||
banner:imghost +'/banner.png', |
||||
feedUpload:imghost +'/feed-upload.png', |
||||
}, |
||||
// pet_id:0, |
||||
detail:{ |
||||
name:'', |
||||
sex:'', |
||||
weight:'', |
||||
type_name:'', |
||||
avatar:'', |
||||
feedlist:{ |
||||
meal:'', |
||||
meal_imgs:[], |
||||
food:'', |
||||
food_imgs:[], |
||||
snack:'', |
||||
snack_imgs:[], |
||||
drug:'', |
||||
drug_imgs:[], |
||||
goods:'', |
||||
goods_imgs:[], |
||||
line:'', |
||||
line_imgs:[], |
||||
note:'', |
||||
note_imgs:[], |
||||
other:'', |
||||
other_imgs:[], |
||||
}, |
||||
}, |
||||
images:{ |
||||
meal_imgs:[], |
||||
food_imgs:[], |
||||
snack_imgs:[], |
||||
drug_imgs:[], |
||||
goods_imgs:[], |
||||
line_imgs:[], |
||||
note_imgs:[], |
||||
other_imgs:[], |
||||
}, |
||||
} |
||||
}, |
||||
methods: { |
||||
showImage(url){ |
||||
this.imageUrl = url; |
||||
this.imageShow = true; |
||||
}, |
||||
redirtTo(url){ |
||||
uni.redirectTo({ |
||||
url:url |
||||
}) |
||||
}, |
||||
uploadSubmit(data,fileName = ''){ |
||||
this.detail.feedlist[fileName] = data.map(item => { |
||||
return {url:item.url,type:item.type}; |
||||
}) |
||||
}, |
||||
uploadShow(data,fileName = ''){ |
||||
let result = []; |
||||
try{ |
||||
data.forEach(item => { |
||||
result.push({url:item.url,type:item.type}) |
||||
}) |
||||
}catch (e){ |
||||
this.images[fileName] = []; |
||||
} |
||||
this.images[fileName] = result; |
||||
}, |
||||
uploadPut(event,fileName = ''){ |
||||
let lists = [].concat(event.file); |
||||
let fileListLen = this.images[fileName].length; |
||||
lists.map((item) => { |
||||
this.images[fileName].push({ |
||||
...item, |
||||
status: 'uploading', |
||||
message: '上传中', |
||||
}); |
||||
}); |
||||
for (let i = 0; i < lists.length; i++) { |
||||
|
||||
api.uploadOssFile(lists[i].url).then(res => { |
||||
let item = this.images[fileName][fileListLen]; |
||||
this.images[fileName].splice(fileListLen, 1, { |
||||
...item, |
||||
status: 'success', |
||||
message: '', |
||||
url: res.show_path, |
||||
thumb: res.show_path, |
||||
type:api.getFileType(res.show_path) |
||||
}); |
||||
fileListLen++; |
||||
}) |
||||
} |
||||
}, |
||||
uploadDel(fileIndex,fileName = ''){ |
||||
this.images[fileName].splice(fileIndex.index,1); |
||||
}, |
||||
navTo(url){ |
||||
uni.navigateTo({ |
||||
url:url |
||||
}) |
||||
}, |
||||
getFeedLog(pet_id) { |
||||
let that = this; |
||||
feedLog(pet_id).then(data => { |
||||
let feedlist = this.detail.feedlist; |
||||
this.detail = data.data; |
||||
if(data.data.feedlist.length===0){ |
||||
this.detail.feedlist = feedlist; |
||||
} |
||||
this.detail = data.data; |
||||
// if(this.type !== 'detail'){ |
||||
let images = [ |
||||
'meal_imgs', |
||||
'food_imgs', |
||||
'snack_imgs', |
||||
'drug_imgs', |
||||
'goods_imgs', |
||||
'line_imgs', |
||||
'note_imgs', |
||||
'other_imgs' |
||||
]; |
||||
images.forEach((item,index) => { |
||||
that.uploadShow(data.data.feedlist[item],item); |
||||
}); |
||||
this.collapseValue = ['collapse']; |
||||
// } |
||||
}) |
||||
}, |
||||
|
||||
submit(){ |
||||
let that = this; |
||||
let data = [ |
||||
'meal_imgs', |
||||
'food_imgs', |
||||
'snack_imgs', |
||||
'drug_imgs', |
||||
'goods_imgs', |
||||
'line_imgs', |
||||
'note_imgs', |
||||
'other_imgs' |
||||
]; |
||||
new Promise((resolve,reject)=>{ |
||||
data.forEach((item,index) => { |
||||
that.uploadSubmit(this.images[item],item); |
||||
if(index === data.length-1){ |
||||
resolve() |
||||
} |
||||
}); |
||||
}).then(res => { |
||||
console.log('this.detail.feedlist',this.detail.feedlist) |
||||
this.detail.feedlist.pet_id = this.pet_id |
||||
editFeed(this.detail.feedlist).then(res => { |
||||
console.log(res) |
||||
api.success('保存成功').then(() => { |
||||
uni.navigateBack(); |
||||
}) |
||||
}) |
||||
}); |
||||
}, |
||||
}, |
||||
mounted() { |
||||
this.getFeedLog(this.pet_id); |
||||
}, |
||||
watch:{ |
||||
pet_id(newValue){ |
||||
if(this.type === 'detail'){ |
||||
this.getFeedLog(newValue); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
@import './index.scss'; |
||||
</style> |
||||
Loading…
Reference in new issue