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.
526 lines
17 KiB
526 lines
17 KiB
<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 |
|
custom-style="margin-top:10rpx;" |
|
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 |
|
custom-style="margin-top:10rpx;" |
|
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 |
|
custom-style="margin-top:10rpx;" |
|
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 |
|
custom-style="margin-top:10rpx;" |
|
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 |
|
custom-style="margin-top:10rpx;" |
|
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 |
|
custom-style="margin-top:10rpx;" |
|
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 |
|
custom-style="margin-top:10rpx;" |
|
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 |
|
custom-style="margin-top:10rpx;" |
|
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, thumb:(item.thumb || item.url)}; |
|
}) |
|
}, |
|
uploadShow(data, fileName = '') { |
|
let result = []; |
|
try { |
|
data.forEach(item => { |
|
result.push({url: item.url, type: item.type,thumb:(item.thumb || item.url)}) |
|
}) |
|
} catch (e) { |
|
this.images[fileName] = []; |
|
} |
|
this.images[fileName] = result; |
|
}, |
|
async 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++) { |
|
const fileType = api.getFileType(lists[i].url); |
|
let thumb; |
|
const file = await api.uploadOssFile(lists[i].url); |
|
if (fileType === 'video') thumb = await api.uploadOssFile(lists[i].thumb); |
|
let item = this.images[fileName][fileListLen]; |
|
|
|
this.images[fileName].splice(fileListLen, 1, { |
|
...item, |
|
status: 'success', |
|
message: '', |
|
url: file.show_path, |
|
thumb: thumb?.show_path ? thumb.show_path : file.show_path, |
|
type: fileType |
|
}); |
|
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> |