9 changed files with 315 additions and 47 deletions
@ -1,8 +1,8 @@ |
|||||||
// const host='http://192.168.2.92:9505/api'
|
// const host='http://192.168.2.92:9505/api'
|
||||||
const host='https://weiyang.test.scyp.ink/api' |
const host='https://wechat.wwxtx.com/api' |
||||||
// const host='https://bml.test.scyp.ink/api'
|
// const host='https://bml.test.scyp.ink/api'
|
||||||
// const host='http://192.168.2.92:9503/api'
|
// const host='http://192.168.2.92:9503/api'
|
||||||
const imghost='https://weiyang.test.scyp.ink/static/image' |
const imghost='https://wechat.wwxtx.com/static/image' |
||||||
const title = '汪汪行天下' |
const title = '汪汪行天下' |
||||||
const oss = 'https://pet-feed.'+'oss-cn-chengdu.aliyuncs.com' |
const oss = 'https://pet-feed.'+'oss-cn-chengdu.aliyuncs.com' |
||||||
// const codehost='http://code.baomingle.cn'
|
// const codehost='http://code.baomingle.cn'
|
||||||
|
|||||||
@ -0,0 +1,215 @@ |
|||||||
|
<script setup> |
||||||
|
|
||||||
|
import FomItem from "./fomItem.vue"; |
||||||
|
import {reactive, ref, defineProps} from "vue"; |
||||||
|
import {onReady} from "@dcloudio/uni-app"; |
||||||
|
import {orderServiceInfo} from "../../../api/order"; |
||||||
|
import {imghost} from "../../../config/host"; |
||||||
|
|
||||||
|
const service = reactive({startService:{}}); |
||||||
|
|
||||||
|
const props = defineProps({id: {type:[Number,String]}}) |
||||||
|
|
||||||
|
|
||||||
|
const staticImage = { |
||||||
|
petGun:imghost +'/pet_gun.png', |
||||||
|
} |
||||||
|
getDetail() |
||||||
|
const show = ref(false); |
||||||
|
function getDetail(){ |
||||||
|
let id = props.id |
||||||
|
orderServiceInfo(id).then(res => { |
||||||
|
service.value =res.data; |
||||||
|
show.value = true; |
||||||
|
// service.endService =res.data.endService; |
||||||
|
|
||||||
|
}) |
||||||
|
} |
||||||
|
const imageUrl = ref(''); |
||||||
|
const imageShow = ref(false); |
||||||
|
function showBigImage(imgUrl){ |
||||||
|
imageUrl.value = imgUrl; |
||||||
|
imageShow.value = true; |
||||||
|
} |
||||||
|
|
||||||
|
const videoUrl = ref(''); |
||||||
|
const videoShow = ref(false); |
||||||
|
function showBigVideo(videoUrl) { |
||||||
|
videoUrl.value = videoUrl; |
||||||
|
videoShow.value = true; |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<view v-if="show"> |
||||||
|
<view v-if="service?.startService" 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"><view>开始订单</view></view> |
||||||
|
<FomItem @showBigImage="showBigImage" @showBigVideo="showBigVideo" :data="service.startService.arrival_time" name="到达时间" type="text"></FomItem> |
||||||
|
<FomItem @showBigImage="showBigImage" @showBigVideo="showBigVideo" :data="service.startService.worker_confirm" name="宠物师确认" type="media"></FomItem> |
||||||
|
<FomItem @showBigImage="showBigImage" @showBigVideo="showBigVideo" :data="service.startService.hand_disinfect" name="手部消毒" type="media"></FomItem> |
||||||
|
<FomItem @showBigImage="showBigImage" @showBigVideo="showBigVideo" :data="service.startService.body_disinfect" name="全身消毒" type="media"></FomItem> |
||||||
|
<FomItem @showBigImage="showBigImage" @showBigVideo="showBigVideo" :data="service.startService.key" name="钥匙开启/收取" type="media"></FomItem> |
||||||
|
<FomItem @showBigImage="showBigImage" @showBigVideo="showBigVideo" :data="service.startService.key_info" name="钥匙描述" type="text"></FomItem> |
||||||
|
<FomItem @showBigImage="showBigImage" @showBigVideo="showBigVideo" :data="service.startService.service_tools" name="服务工具" type="text"></FomItem> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="pet-detail-background"></view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.pet-detail-bottom-container{ |
||||||
|
padding:15rpx; |
||||||
|
.pet-detail-container{ |
||||||
|
.pet-detail-gun{ |
||||||
|
width:100%; |
||||||
|
text-align: center; |
||||||
|
.img{ |
||||||
|
height:90rpx; |
||||||
|
} |
||||||
|
|
||||||
|
position: absolute; |
||||||
|
top:-70rpx; |
||||||
|
left:0; |
||||||
|
} |
||||||
|
position: relative; |
||||||
|
.pet-detail-content{ |
||||||
|
padding:50rpx 0; |
||||||
|
border: 3rpx solid #262626; |
||||||
|
background:{ |
||||||
|
color:#FFFFFF; |
||||||
|
} |
||||||
|
border-radius: 26rpx; |
||||||
|
.content-item{ |
||||||
|
align-items: center; |
||||||
|
padding:15rpx 30rpx; |
||||||
|
.item-icon{ |
||||||
|
width:32rpx; |
||||||
|
height:32rpx; |
||||||
|
.img{ |
||||||
|
width:32rpx; |
||||||
|
height:32rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
.item-title{ |
||||||
|
font-size: 30rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #111111; |
||||||
|
margin-left:3rpx; |
||||||
|
} |
||||||
|
.item-content { |
||||||
|
font-size: 30rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #4D4D4D; |
||||||
|
margin-left:10rpx; |
||||||
|
&.item-textarea{ |
||||||
|
width:100%; |
||||||
|
padding:30rpx; |
||||||
|
background:{ |
||||||
|
color:#F2F8F8; |
||||||
|
} |
||||||
|
margin-left:0; |
||||||
|
margin-top:20rpx; |
||||||
|
min-height:100rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.pet-detail-video-group{ |
||||||
|
.video-title{ |
||||||
|
.img{ |
||||||
|
height:35rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
.video-content{ |
||||||
|
padding:0rpx; |
||||||
|
position: relative; |
||||||
|
.video-content-container{ |
||||||
|
height:300rpx; |
||||||
|
background-color:rgba(0,0,0,1); |
||||||
|
border-radius: 16rpx; |
||||||
|
position: relative; |
||||||
|
z-index: 2; |
||||||
|
.img{ |
||||||
|
height:250rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
.video-content-background{ |
||||||
|
width:100%; |
||||||
|
height:100%; |
||||||
|
position: absolute; |
||||||
|
top:10rpx; |
||||||
|
left:10rpx; |
||||||
|
z-index: 1; |
||||||
|
border:1rpx solid #000; |
||||||
|
border-radius: 16rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&.pet-detail-photo-group{ |
||||||
|
box-sizing: border-box; |
||||||
|
.video-content{ |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
.video-title{ |
||||||
|
.img{ |
||||||
|
height:35rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
.photo-item{ |
||||||
|
|
||||||
|
box-sizing: border-box; |
||||||
|
padding:10rpx; |
||||||
|
.photo-item-container{ |
||||||
|
position: relative; |
||||||
|
box-sizing: border-box; |
||||||
|
.photo-content{ |
||||||
|
box-sizing: border-box; |
||||||
|
position: relative; |
||||||
|
border:1rpx solid #000; |
||||||
|
border-radius: 20rpx; |
||||||
|
z-index: 2; |
||||||
|
|
||||||
|
} |
||||||
|
.photo-background{ |
||||||
|
box-sizing: border-box; |
||||||
|
position: absolute; |
||||||
|
top:10rpx; |
||||||
|
left:0; |
||||||
|
z-index: 1; |
||||||
|
width:100%; |
||||||
|
height:100%; |
||||||
|
border:1rpx solid #000; |
||||||
|
border-radius: 20rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.img{ |
||||||
|
width:100%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.pet-detail-background{ |
||||||
|
position: absolute; |
||||||
|
width:100%; |
||||||
|
height:100%; |
||||||
|
top:0; |
||||||
|
left:0; |
||||||
|
z-index: -1; |
||||||
|
border-radius: 26rpx; |
||||||
|
transform: rotateZ(2grad); |
||||||
|
background:{ |
||||||
|
color:#4DC3B8; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue