396316021
/
pet_uni
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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.
42 Commits
1 Branch
0 Tags
8.0 MiB
 
 
 
Tree: 33f6e052e9
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '33f6e052e9'
${ noResults }
pet_uni/pages/OrderDetail/index.vue

281 lines
11 KiB
Raw Blame History

<template>
<HeaderNav title="订单详情" :is-back="true"></HeaderNav>
<view class="body-background">
<u-image :src="staticImage.orderDetailBackground" width="100%" height="100vh"></u-image>
</view>
<view class="app-wallpaper">
<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.pet_avatar || staticImage.banner"></u-image>-->
<!-- </view>-->
<view class="top-content row">
<view class="order-list-item">
<view class="order-card-container row">
<view class="order-card-container-background-main row" @click="navTo('/pages/OrderDetail/index?id='+item.id)">
<view class="order-card-col row">
<view class="order-card-container-background col-12">
<!-- <view class="order-card-container-background-inside col-12">-->
<!-- </view>-->
</view>
<view class="order-card-left col-12">
<u-image class="img" mode="aspectFill" width="100%" height="350" :src="detail.pet_avatar" radius="26" custom-style="border:3rpx solid #262626"></u-image>
</view>
<view class="order-card-right col-12">
<view class="order-card-title" style="">
<u-text
:text="detail.addr"
color="#131313"
size="40"
line-height="60"
></u-text>
</view>
<view class="order-card-tag-container row">
<view class="order-card-tag" v-for="(server, i) in detail.services" wx:key="i">{{ server }}</view>
</view>
<view class="order-card-day"><text class="card-label">上门时间：</text>{{detail.do_date}} {{ detail.do_time }}
</view>
<view class="order-card-pay-time"><text class="card-label">下单时间：</text>{{detail.create_time}}
</view>
</view>
<!-- <view class="" style="padding:20rpx 0;">-->
<!-- <u-text :text="'订单编号: '+item.no"-->
<!-- color="#131313" size="28"-->
<!-- custom-style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;"></u-text>-->
<!-- </view>-->
<view class="order-card-bottom col-12 row">
<view class="card-button" @click="navTo(`/pages/ChatDetail/index?id=${detail.id}`)">
<MzButton
title="立即沟通"
font-color="#3E3221"
button-color="#F7E1C3"
button-width="255rpx"></MzButton>
</view>
<view class="card-button" @click="navTo('/pages/FeedLog/index?pet_id=' + detail.pet_id)">
<MzButton
title="喂养档案"
font-color="#FFFFFF"
button-color="#4DC3B8"
button-width="255rpx"></MzButton>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="feed-background">
<view class="feed-background-content">
</view>
</view>
</view>
</view>
<view class="pet-detail-bottom-container">
<view class="pet-detail-container">
<view class="pet-detail-gun col">
<image class="img" mode="heightFix" :src="staticImage.petGun"/>
</view>
<view class="pet-detail-content">
<view class="content-item row">
<view class="item-icon">
<image class="img" mode="widthFix" :src="staticImage.petName"/>
</view>
<view class="item-title">
宠托师：
</view>
<view class="item-content">
{{detail.worker_name}}
</view>
</view>
<view class="content-item row">
<view class="item-icon">
<image class="img" mode="widthFix" :src="staticImage.petName"/>
</view>
<view class="item-title">
订单编号：
</view>
<view class="item-content">
{{detail.no}}
</view>
</view>
<view class="content-item row">
<view class="item-icon">
<image class="img" mode="widthFix" :src="staticImage.petName"/>
</view>
<view class="item-title">
增值服务：
</view>
<view class="item-content">
{{detail.services.join(',')}}
</view>
</view>
<view class="content-item row">
<view class="item-icon">
<image class="img" mode="widthFix" :src="staticImage.petName"/>
</view>
<view class="item-title">
萌宠信息：
</view>
<view class="item-content col-12">
<view class="order-card-tag-container row">
<view class="order-card-tag">{{ detail.pet_name }}</view>
<view class="order-card-tag">{{ detail.pet_age }}岁</view>
<view class="order-card-tag">{{ detail.pet_weight }}kg</view>
<view class="order-card-tag">{{ detail.pet_sex }}</view>
</view>
</view>
</view>
<view class="pet-bottom-video-remark row" style="position: relative;">
<view class="content-item pet-detail-video-group" style="width:220rpx;">
<view class="video-content">
<view class="video-content-container">
<video class="img" mode="aspectFill" :src="detail.pet_video" style="width:220rpx;border-radius: 16rpx;border:2rpx solid #262626;"></video>
</view>
<view class="video-content-background"></view>
</view>
</view>
<view class="row col" style="padding:15rpx 30rpx 15rpx 0rpx;">
<view class="content-container col" style="position: relative;height:100%;width:100%;">
<view class="content" style="box-sizing:border-box;padding:25rpx;position:absolute;height:100%;width:100%;left:0;top:0;z-index: 2;border:2rpx solid #262626;border-radius: 16rpx;background-color:#F6F6F6;">
<u-text :text="detail.pet_remarks" color="#263233" size="28"></u-text>
</view>
<view class="content-background" style="position:absolute;top:10rpx;left:10rpx;z-index:1;border:2rpx solid #262626;border-radius: 16rpx;width:100%;height:100%;">
</view>
</view>
</view>
</view>
</view>
<view class="pet-detail-background"></view>
</view>
</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 {delPet, getDetail} from "@/api/pet";
import log from "@/utils/log";
import functions from "@/utils/functions.js";
import {orderDetail} from "@/api/order";
export default {
components: {
HeaderNav,
FooterNav,
RightNav,
MzButton
},
data() {
return {
title: 'Hello',
loading: true,
staticImage: {
screenActiveImg: imghost + '/static/image/order-screen-active.png',
orderCardBackground: imghost + '/static/image/order-card-background.png',
wallpaperBgImage:imghost +'/static/image/background.png',
petGun:imghost +'/static/image/pet_gun.png',
petName:imghost +'/static/image/pet-detail-name.png',
petType:imghost +'/static/image/pet-detail-type.png',
petBirth:imghost +'/static/image/pet-detail-birthday.png',
petSex:imghost +'/static/image/pet-detail-sex.png',
petYm:imghost +'/static/image/pet-detail-ym.png',
petQc:imghost +'/static/image/pet-detail-qc.png',
petHome:imghost +'/static/image/pet-detail-home.png',
petBs:imghost +'/static/image/pet-detail-bs.png',
petVideoTitle:imghost +'/static/image/pet-detail-video-title.png',
petPhotoTitle:imghost +'/static/image/pet-detail-photo-title.png',
orderDetailBackground:imghost+'/static/image/order-detail-background.png',
},
indexBanner: [{
image: imghost + '/static/image/banner.png',
url: '',
}],
user: {
avatar: imghost + '/static/image/banner.png',
nickname: '清晨的风',
coupons: 221,
id: 88685
},
isTop: false,
pagePadding: 100,
petImage: imghost + '/static/image/pet_avatar1.jpeg',
orderCardList:[
{
title:'成都市武侯区丰德国际4栋...',
tags:['刷毛','洗澡'],
do_time:'2023/05/03 15—17时',
create_time:'2023/03/03 15:23:22',
},
{
title:'成都市武侯区丰德国际4栋...',
tags:['刷毛','洗澡'],
do_time:'2023/05/03 15—17时',
create_time:'2023/03/03 15:23:22',
},
],
detail:{},
id:0,
}
},
onLoad(option) {
log(option);
this.id = option.id;
this.getDetail(option.id);
},
methods: {
delPet(){
functions.confirm("确认删除该宠物吗？").then(() => {
delPet(this.id).then((res) => {
functions.success('删除成功').then(() => uni.navigateBack())
})
})
},
navTo(url){
uni.navigateTo({
url:url
})
},
getDetail(id){
orderDetail(id).then(data => {
this.detail = data.data;
log(data);
})
}
},
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>