396316021
/
pet_uni
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

订单详情页面

master
396316021 1 year ago
parent
09885bd039
commit
8756645fba
6 changed files with 312 additions and 153 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      api/order.js
  2. 6
      pages.json
  3. 2
      pages/Index/components/OrderPage/index.vue
  4. 181
      pages/OrderDetail/components/index.scss
  5. 260
      pages/OrderDetail/index.vue
  6. 2
      pages/UserOrderPage/index.vue

14
api/order.js
Unescape View File

@ -79,4 +79,18 @@ export function createOrderPrice(data = {
method: 'post',
data:data
})
}
/**
* 订单详情
* @param id
* @returns {Promise<unknown>}
*/
export function orderDetail(id){
return request({
url:"pet/order-info",
method: 'post',
data:{
order_service_id:id
}
})
}

6
pages.json
Unescape View File

@ -97,6 +97,12 @@
"navigationBarTitleText": "我的订单"
}
},
{
"path": "pages/OrderDetail/index",
"style": {
"navigationBarTitleText": "订单详情"
}
},
{
"path": "pages/PrivacyPolicy/PrivacyPolicy",
"style": {

2
pages/Index/components/OrderPage/index.vue
Unescape View File

@ -42,7 +42,7 @@
<view class="order-list-item" v-for="(item,index) in orderList">
<view class="order-card-container row">
<view class="order-card-container-background col-12"></view>
<view class="order-card-container-background-main row">
<view class="order-card-container-background-main row" @click="navTo('/pages/OrderDetail/index?id='+item.id)">
<view class="order-card-col row" :style="{backgroundImage:'url('+staticImage.orderCardBackground+')'}">
<view class="order-card-left">
<image class="img" :src="item.pet_avatar" mode="aspectFill" />

181
pages/OrderDetail/components/index.scss
Unescape View File

@ -1,9 +1,180 @@
.order-card-tag-container{
padding-top:18rpx;
.order-card-tag{
padding:9rpx 20rpx;
background:{
color:#E9FBF7;
}
color:#4DC3B8;
font-size:26rpx;
font-weight:400;
line-height:1;
border-radius:6rpx;
&+.order-card-tag{
margin-left:9rpx;
}
}
}
.feed-top{
box-sizing: border-box;
//margin-bottom:40rpx;
.feed-container{
box-sizing: border-box;
.feed-content{
box-sizing: border-box;
padding:15rpx;
.top-img{
box-sizing: border-box;
width:100%;
border:3rpx solid #262626;
box-sizing: border-box;
border-radius: 26rpx;
box-shadow: 3rpx 7rpx 5rpx 0rpx rgba(137,137,137,0.3);
.img{
}
}
.top-content{
padding:{
top:5rpx;
//bottom:30rpx;
//left:30rpx;
//right:30rpx;
};
.content-item{
margin-top:25rpx;
//justify-content: center;
.item-title{
font-size: 28rpx;
font-weight: 400;
color: #1B1B1B;
}
.item-content{
margin-left:15rpx;
font-size: 28rpx;
font-weight: 400;
color: #767676;
}
}
}
}
}
}
.order-list-item{
margin-bottom:30rpx;
width:100%;
box-sizing: border-box;
.order-card-container{
width:100%;
box-sizing: border-box;
//padding:10rpx 10rpx;
position: relative;
box-sizing: border-box;
.order-card-container-background,.order-card-container-background-inside{
box-sizing: border-box;
width:100%;
height:100%;
position: absolute;
left:0rpx;
top:20rpx;
z-index: -1;
bottom:0rpx;
border: 3rpx solid #262626;
box-shadow: 2rpx 6rpx 11rpx 0rpx rgba(159,167,185,0.3);
border-radius: 26rpx;
background: {
color:#fff;
};
padding:30rpx;
}
.order-card-container-background-inside{
top:20rpx;
z-index: -1;
}
.order-card-container-background-main{
position: relative;
padding:30rpx;
width:100%;
background:{
color:#FFFFFF;
}
border-radius: 26rpx;
border: 3rpx solid #262626;
padding:7rpx;
box-sizing:border-box;
.order-card-col{
position: relative;
width:100%;
box-sizing: border-box;
padding:15rpx;
background:{
size:100% 100%;
position: center center;
repeat:no-repeat;
}
}
}
.order-card-left{
position: relative;
z-index: 2;
.img{
width:200rpx;
height:200rpx;
border-radius: 30rpx;
}
}
.order-card-right{
padding-left:20rpx;
.order-card-title{
padding-top:5px;
font-size:32rpx;
font-weight: 500;
line-height: 30rpx;
color:#131313;
}
.order-card-day{
}
.order-card-pay-time{
}
.order-card-day,.order-card-pay-time{
padding-top:20rpx;
font-size:28rpx;
font-weight:400;
line-height:30rpx;
color:#767676;
.card-label{
color:#1B1B1B;
}
}
}
.order-card-bottom{
padding-top:30rpx;
justify-content: center;
}
.card-button{
&:nth-child(1){
padding-right:23rpx;
}
&:nth-child(2){
padding-left:23rpx;
}
}
}
}
.app-wallpaper{
position: relative;
background:{
size: 100% 100%;
repeat: no-repeat;
};
padding:35rpx;
padding-bottom:50rpx;
.order-capsule-container{
position: sticky;
@ -310,7 +481,7 @@
}
}
.video-content{
padding:10rpx;
padding:0rpx;
position: relative;
.video-content-container{
height:250rpx;
@ -324,10 +495,10 @@
}
.video-content-background{
width:100%;
height:75%;
height:100%;
position: absolute;
bottom:0;
left:0;
top:10rpx;
left:10rpx;
z-index: 1;
border:1rpx solid #000;
border-radius: 16rpx;
@ -387,7 +558,7 @@
left:0;
z-index: -1;
border-radius: 26rpx;
transform: rotateZ(1.5grad);
transform: rotateZ(2grad);
background:{
color:#4DC3B8;
}

260
pages/OrderDetail/index.vue
Unescape View File

@ -1,202 +1,168 @@
<template>
<HeaderNav title="萌宠详情" :is-back="true"></HeaderNav>
<view class="app-wallpaper" :style="{
backgroundImage:'url('+staticImage.wallpaperBgImage+')'
}">
<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="order-screen-container row">
<view class="order-list-container">
<view class="order-list-item">
<view v-show="false" class="pet-gun" :style="{
backgroundImage:'url('+staticImage.petGun+')'
}"></view>
<view class="order-card-container row">
<view class="order-card-container-background col-12"></view>
<view class="order-card-container-background-main row">
<view class="order-card-col row">
<view class="order-card-left">
<view class="left-background">
<image class="img" :src="pet.avatar" mode="aspectFill" />
</view>
</view>
<view class="order-card-right col row">
<view class="col">
<view class="name ">{{ pet.name }}</view>
<view class="old">{{ pet.age }}岁</view>
</view>
<view class="col">
<view class="type">{{ pet.type_name }}</view>
<view class="weight">{{ pet.weight }}kg</view>
<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>
<view class="feed-background">
<view class="feed-background-content">
</view>
</view>
</view>
</view>
</view>
</view>
</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">
{{ pet.name }}
</view>
</view>
<view class="content-item row">
<view class="item-icon">
<image class="img" mode="widthFix" :src="staticImage.petType"/>
</view>
<view class="item-title">
宝贝品种：
</view>
<view class="item-content">
{{ pet.type_name }}
</view>
</view>
<view class="content-item row">
<view class="item-icon">
<image class="img" mode="widthFix" :src="staticImage.petBirth"/>
</view>
<view class="item-title">
出生日期：
</view>
<view class="item-content">
{{ pet.birthday.substr(0, 10) }}
</view>
</view>
<view class="content-item row">
<view class="item-icon">
<image class="img" mode="widthFix" :src="staticImage.petSex"/>
<image class="img" mode="widthFix" :src="staticImage.petName"/>
</view>
<view class="item-title">
宝贝性别：
宠托师：
</view>
<view class="item-content">
<span v-if="pet.sex === 1">男</span>
<span v-if="pet.sex === 2">女</span>
<span v-else>保密</span>
{{detail.worker_name}}
</view>
</view>
<view class="content-item row">
<view class="item-icon">
<image class="img" mode="widthFix" :src="staticImage.petYm"/>
<image class="img" mode="widthFix" :src="staticImage.petName"/>
</view>
<view class="item-title">
最近疫苗时间：
订单编号：
</view>
<view class="item-content">
{{ pet.last_vaccine_time.substr(0, 10) }}
{{detail.no}}
</view>
</view>
<view class="content-item row">
<view class="item-icon">
<image class="img" mode="widthFix" :src="staticImage.petQc"/>
<image class="img" mode="widthFix" :src="staticImage.petName"/>
</view>
<view class="item-title">
最近驱虫时间
增值服务：
</view>
<view class="item-content">
{{ pet.last_insect_repellent_time.substr(0, 10) }}
{{detail.services.join(',')}}
</view>
</view>
<view class="content-item row">
<view class="item-icon">
<image class="img" mode="widthFix" :src="staticImage.petHome"/>
<image class="img" mode="widthFix" :src="staticImage.petName"/>
</view>
<view class="item-title">
宝贝户口（犬证）：
萌宠信息：
</view>
<view class="item-content">
<span v-if="pet.is_home === 1">有</span>
<span v-else>无</span>
<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="content-item row">
<view class="item-icon">
<image class="img" mode="widthFix" :src="staticImage.petBs"/>
</view>
<view class="item-title">
过往病史：
</view>
<view class="item-content item-textarea">
<span v-if="pet.remarks">{{ pet.remarks }}</span>
<span v-else>无</span>
</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="content-item pet-detail-video-group">
<view class="video-title">
<image class="img" mode="heightFix" :src="staticImage.petVideoTitle"/>
</view>
<view class="video-content">
<view class="video-content-container">
<video class="img" mode="aspectFill" :src="pet.video"></video>
<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 class="video-content-background"></view>
</view>
</view>
<view class="content-item pet-detail-photo-group" v-if="pet.images.length > 0">
<view class="video-title">
<image class="img" mode="heightFix" :src="staticImage.petPhotoTitle"/>
</view>
<view class="video-content row" >
<view class="photo-item col-4" v-for="(item, index) in pet.images" >
<view class="photo-item-container">
<view class="photo-content">
<image class="img" mode="widthFix" :src="item ? item : staticImage.wallpaperBgImage"/>
</view>
<view class="photo-background"></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>
<view class="footer-menu row">
<view class="footer-button col-6">
<MzButton
title="删除"
button-color="#ffffff"
font-color="##262626"
button-width="250rpx"
@click="delPet()"
>
</MzButton>
</view>
<view class="footer-button col-6">
<MzButton
title="修改"
button-color="#4DC3B8"
font-color="#FFFFFF"
button-width="250rpx"
@click="navTo('/pages/Pet/create?id='+id)"
>
</MzButton>
</view>
</view>
<!-- <RightNav></RightNav> -->
</template>
<script>
@ -211,6 +177,7 @@
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,
@ -237,6 +204,7 @@
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',
@ -265,7 +233,7 @@
create_time:'2023/03/03 15:23:22',
},
],
pet:{},
detail:{},
id:0,
}
},
@ -288,8 +256,8 @@
})
},
getDetail(id){
getDetail(id).then(data => {
this.pet = data.data;
orderDetail(id).then(data => {
this.detail = data.data;
log(data);
})
}

2
pages/UserOrderPage/index.vue
Unescape View File

@ -47,7 +47,7 @@
<view class="order-list-item" v-for="(item,index) in orderList">
<view class="order-card-container row">
<view class="order-card-container-background col-12"></view>
<view class="order-card-container-background-main row">
<view class="order-card-container-background-main row" @click="navTo('/pages/OrderDetail/index?id='+item.id)">
<view class="order-card-col row" :style="{backgroundImage:'url('+staticImage.orderCardBackground+')'}">
<view class="order-card-left">
<image class="img" :src="item.pet_avatar" mode="aspectFill" />

Write Preview
Loading…
Cancel
Save