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