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.
505 lines
17 KiB
505 lines
17 KiB
<template> |
|
<HeaderNav title="喂养档案" :is-back="true"></HeaderNav> |
|
<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="['collapse']"> |
|
<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="['collapse']"> |
|
<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="['collapse']"> |
|
<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="['collapse']"> |
|
<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="['collapse']"> |
|
<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="['collapse']"> |
|
<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="['collapse']"> |
|
<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="['collapse']"> |
|
<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 class="footer-menu row" v-if="(type === 'detail')"> |
|
<!-- <view class="footer-button col-6">--> |
|
<!-- <MzButton--> |
|
<!-- title="删除"--> |
|
<!-- button-color="#ffffff"--> |
|
<!-- font-color="##262626"--> |
|
<!-- button-width="250rpx"--> |
|
<!-- @click=""--> |
|
<!-- >--> |
|
<!-- </MzButton>--> |
|
<!-- </view>--> |
|
<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> |
|
</template> |
|
|
|
<script> |
|
import { |
|
imghost |
|
} from '@/config/host.js' |
|
import HeaderNav from '@/components/HeaderNav/Index.vue'; |
|
import FooterNav from '@/components/FooterNav/Index.vue'; |
|
import RightNav from '@/components/RightNav/Index.vue'; |
|
import MzButton from '@/components/MzButton/Index.vue'; |
|
import api from '@/utils/functions.js'; |
|
import {editFeed, feedLog} from "@/api/pet"; |
|
import feed from "@/pages/Feed/index.vue"; |
|
export default { |
|
components: { |
|
HeaderNav, |
|
FooterNav, |
|
RightNav, |
|
MzButton |
|
}, |
|
onShow(){ |
|
this.feedLog(); |
|
}, |
|
data() { |
|
return { |
|
title: 'Hello', |
|
loading: true, |
|
type:'detail', |
|
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:[], |
|
}, |
|
} |
|
}, |
|
onLoad(options) { |
|
this.pet_id = options.pet_id; |
|
this.type = options.type || 'detail'; |
|
this.getFeedLog(options.pet_id); |
|
}, |
|
methods: { |
|
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}) |
|
}) |
|
}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; |
|
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); |
|
}); |
|
}) |
|
}, |
|
|
|
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(); |
|
}) |
|
}) |
|
}); |
|
}, |
|
}, |
|
onPageScroll(res) { |
|
if(res.scrollTop <= 20){ |
|
uni.$emit('isTop', true); |
|
}else{ |
|
uni.$emit('isTop', false); |
|
} |
|
}, |
|
created() { |
|
this.pagePadding = (api.navHeight().navPaddingTop + |
|
api.navHeight().navHeight + (api.navHeight().headerPadding * 2)) |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
@import './components/index.scss'; |
|
</style> |