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

添加宠物组件 

喂养页面
预约服务页面
master
396316021 2 years ago
parent
97f35289b9
commit
6dbf3799f9
11 changed files with 1303 additions and 23 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. 8
      components/MzButton/components/index.scss
  2. 8
      components/MzButton/index.vue
  3. 32
      components/PetPage/components/index.scss
  4. 122
      components/PetPage/index.vue
  5. 10
      pages.json
  6. 160
      pages/FeedLog/components/index.scss
  7. 258
      pages/FeedLog/index.vue
  8. 2
      pages/Index/components/HomePage/index.vue
  9. 34
      pages/Index/components/OrderPage/index.vue
  10. 356
      pages/OrderPage/components/index.scss
  11. 336
      pages/OrderPage/index.vue

8
components/MzButton/components/index.scss
Unescape View File

@ -1,14 +1,14 @@
.wy-button-container{
.mz-button-container{
width:100%;
box-sizing: border-box;
.wy-button-background{
.mz-button-background{
border:3rpx solid #131313;
border-radius:45rpx;
width:100%;
box-sizing: border-box;
box-shadow: 1rpx 4rpx 12rpx 0rpx rgba(90,104,103,0.24);
.wy-button-background-main{
.mz-button-background-main{
background: {
color:#ffffff;
};
@ -25,7 +25,7 @@
box-sizing: border-box;
text-align: center;
padding:5rpx 11rpx;
.wy-button-content{
.mz-button-content{
box-sizing: border-box;
padding:15rpx 0;
background:{

8
components/MzButton/index.vue
Unescape View File

@ -1,8 +1,8 @@
<template>
<view class="wy-button-container" :style="{width:buttonWidth}">
<view class="wy-button-background">
<view class="wy-button-background-main" :style="{backgroundColor:buttonColor,color:fontColor}">
<view class="wy-button-content" :style="Object.assign(btnStyle,{
<view class="mz-button-container" :style="{width:buttonWidth}">
<view class="mz-button-background">
<view class="mz-button-background-main" :style="{backgroundColor:buttonColor,color:fontColor}">
<view class="mz-button-content" :style="Object.assign(btnStyle,{
backgroundImage:(isBackground?'url('+staticImage.buttonBackground+')':''),
fontSize:fontSize,
padding:paddingTb+' 0',

32
components/PetPage/components/index.scss
Unescape View File

@ -0,0 +1,32 @@
.pet-page-container{
.pet-page-capsule-container{
position: sticky;
box-sizing: border-box;
width:100%;
padding:10rpx;
border:2rpx solid #262626;
border-radius: 45rpx;
box-shadow: 1rpx 4rpx 12rpx 0rpx rgba(90,104,103,0.24);
background-color: #F8FAFA;
.pet-page-capsule{
box-sizing: border-box;
padding:20rpx;
text-align: center;
font: {
size:30rpx;
weight:500;
}
line-height:30rpx;
border:2rpx solid rgba(0,0,0,0);
&.active{
background:{
color:#4DC3B8;
}
color:#FFFFFF;
border:2rpx solid #262626;
border-radius:35rpx;
}
}
}
}

122
components/PetPage/index.vue
Unescape View File

@ -0,0 +1,122 @@
<template>
<view class="pet-page-container" :style="{width:buttonWidth}">
<view class="pet-page-capsule-container row">
<view class="pet-page-capsule col-4 active">
喵喵
</view>
<view class="pet-page-capsule col-4">
汪汪
</view>
<view class="pet-page-capsule col-4">
其他萌宠
</view>
</view>
</view>
<view class="pet-page-group row" v-for="i in [1,2]">
<view class="order-item row">
<view class="item-title">
宝贝姓名
</view>
<view class="item-content row col">
<view class="item-content-text">
58元优惠券
</view>
</view>
</view>
<view class="order-item row">
<view class="item-title">
宝贝品种
</view>
<view class="item-content row col">
<view class="item-content-text">
58元优惠券
</view>
</view>
</view>
<view class="order-item row">
<view class="item-title">
宝贝体重
</view>
<view class="item-content row col">
<view class="item-content-text">
58元优惠券
</view>
</view>
</view>
</view>
<view class="pet-page-button row">
<MzButton
title="添加喵喵"
button-color="#FFFFFF"
font-color="#262626"
button-width="300rpx"
class=""
>
</MzButton>
</view>
</template>
<script>
import { imghost } from '@/config/host.js';
import MzButton from "@/components/MzButton/Index.vue";
export default{
name:'PetPage',
props:{
title:{
type:String,
default:'确认'
},
buttonColor:{
type:String,
default:'#FFFFFF'
},
fontColor:{
type:String,
default:'#131313'
},
buttonWidth:{
type:String,
default:'100%'
},
isBackground:{
type:Boolean,
default:true
},
fontSize:{
type:String,
default:'30rpx',
},
paddingTb:{
type:String,
default:'15rpx',
},
btnStyle:{
type:Object,
default:{},
},
},
components:{
MzButton
},
data() {
return {
loading: true,
buttonBackground:imghost+"/static/image/small-button-background.png",
staticImage:{
buttonBackground:imghost+'/static/image/small-button-background.png'
}
}
},
onLoad() {
},
methods: {
}
}
</script>
<style lang="scss">
@import './components/index.scss';
</style>

10
pages.json
Unescape View File

@ -56,6 +56,16 @@
"style" : {
"navigationBarTitleText" : "萌宠详情"
}
},{
"path" : "pages/FeedLog/index",
"style" : {
"navigationBarTitleText" : "喂养档案"
}
},{
"path" : "pages/OrderPage/index",
"style" : {
"navigationBarTitleText" : "预约服务"
}
}
],
"globalStyle" : {

160
pages/FeedLog/components/index.scss
Unescape View File

@ -0,0 +1,160 @@
.app-wallpaper{
position: relative;
background: {
size: 100% 100%;
repeat: no-repeat;
}
.feed-container{
position: relative;
box-sizing: border-box;
.feed-content{
box-sizing: border-box;
background:{
color:#ffffff;
}
border:3rpx solid #262626;
border-radius: 26rpx;
}
.feed-background{
position: absolute;
top:25rpx;
left:0;
z-index: -1;
padding:15rpx;
width:100%;
height:100%;
box-sizing: border-box;
.feed-background-content{
box-sizing: border-box;
width:100%;
height:100%;
background:{
color:#4DC3B8;
}
border:3rpx solid #262626;
border-radius: 26rpx;
}
}
}
.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;
.img{
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);
}
}
.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;
}
}
}
}
}
}
.feed-bottom{
position: relative;
.feed-container{
.feed-gun{
text-align: center;
position: absolute;
top:-70rpx;
left:0;
width:100%;
.img{
height:105rpx;
}
}
.feed-content{
padding:{
top:30rpx;
left:30rpx;
right:30rpx;
bottom:0rpx;
};
}
.u-collapse:first-child{
.u-line:first-child{
display: none;
}
}
.u-collapse-item:last-child{
.u-line{
display: none;
}
.u-cell{
.u-line{
display: block;
}
}
}
.u-collapse{
.u-cell{
.u-cell__body{
padding:{
left:0;
top:35rpx;
bottom:35rpx;
}
}
}
.content-class{
padding:20rpx 0;
}
.u-textarea{
padding:30rpx;
background:{
color:#F2F8F8;
}
margin-bottom:20rpx;
}
}
}
}
}
.footer-menu{
padding:30rpx;
position: fixed;
bottom:0;
left:0;
width: 100%;
z-index: 9999;
background: #FFFFFF;
border: 2rpx solid #262626;
box-shadow: 0rpx -2rpx 20rpx 0rpx rgba(0,0,0,0.06);
border-radius: 26rpx 26rpx 0rpx 0rpx;
text-align: center;
.footer-button{
display: flex;
justify-content: center;
}
}

258
pages/FeedLog/index.vue
Unescape View File

@ -0,0 +1,258 @@
<template>
<HeaderNav title="喂养档案" :is-back="true"></HeaderNav>
<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">
<image class="img" mode="widthFix" :src="staticImage.banner"/>
</view>
<view class="top-content row">
<view class="content-item col-6 row">
<view class="item-title">爱称：</view>
<view class="item-content">靓仔</view>
</view>
<view class="content-item col-6 row">
<view class="item-title">性别：</view>
<view class="item-content">弟弟</view>
</view>
<view class="content-item col-6 row">
<view class="item-title">体重：</view>
<view class="item-content">5kg</view>
</view>
<view class="content-item col-6 row">
<view class="item-title">种类：</view>
<view class="item-content">柯基</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>
<u-collapse-item
title="水碗饭碗"
>
<u--textarea v-model="value1" placeholder="请输入内容" ></u--textarea>
<u-upload
name="1"
multiple
:maxCount="10"
>
<image :src="staticImage.feedUpload"
mode="widthFix" style="width: 130rpx;height: 130rpx;"></image>
</u-upload>
</u-collapse-item>
</u-collapse>
<u-collapse>
<u-collapse-item
title="主食情况"
>
<u--textarea v-model="value1" placeholder="请输入内容" ></u--textarea>
<u-upload
name="1"
multiple
:maxCount="10"
>
<image :src="staticImage.feedUpload"
mode="widthFix" style="width: 130rpx;height: 130rpx;"></image>
</u-upload>
</u-collapse-item>
</u-collapse>
<u-collapse>
<u-collapse-item
title="零食小吃"
>
<u--textarea v-model="value1" placeholder="请输入内容" ></u--textarea>
<u-upload
name="1"
multiple
:maxCount="10"
>
<image :src="staticImage.feedUpload"
mode="widthFix" style="width: 130rpx;height: 130rpx;"></image>
</u-upload>
</u-collapse-item>
</u-collapse>
<u-collapse>
<u-collapse-item
title="喂药擦药"
>
<u--textarea v-model="value1" placeholder="请输入内容" ></u--textarea>
<u-upload
name="1"
multiple
:maxCount="10"
>
<image :src="staticImage.feedUpload"
mode="widthFix" style="width: 130rpx;height: 130rpx;"></image>
</u-upload>
</u-collapse-item>
</u-collapse>
<u-collapse>
<u-collapse-item
title="需要注意"
>
<u--textarea v-model="value1" placeholder="请输入内容" ></u--textarea>
<u-upload
name="1"
multiple
:maxCount="10"
>
<image :src="staticImage.feedUpload"
mode="widthFix" style="width: 130rpx;height: 130rpx;"></image>
</u-upload>
</u-collapse-item>
</u-collapse>
<u-collapse>
<u-collapse-item
title="用品位置"
>
<u--textarea v-model="value1" placeholder="请输入内容" ></u--textarea>
<u-upload
name="1"
multiple
:maxCount="10"
>
<image :src="staticImage.feedUpload"
mode="widthFix" style="width: 130rpx;height: 130rpx;"></image>
</u-upload>
</u-collapse-item>
</u-collapse>
<u-collapse>
<u-collapse-item
title="外出路线"
>
<u--textarea v-model="value1" placeholder="请输入内容" ></u--textarea>
<u-upload
name="1"
multiple
:maxCount="10"
>
<image :src="staticImage.feedUpload"
mode="widthFix" style="width: 130rpx;height: 130rpx;"></image>
</u-upload>
</u-collapse-item>
</u-collapse>
<u-collapse>
<u-collapse-item
title="其它事项"
>
<u--textarea v-model="value1" placeholder="请输入内容" ></u--textarea>
<u-upload
name="1"
multiple
:maxCount="10"
>
<image :src="staticImage.feedUpload"
mode="widthFix" style="width: 130rpx;height: 130rpx;"></image>
</u-upload>
</u-collapse-item>
</u-collapse>
</view>
<view class="feed-background">
<view class="feed-background-content"></view>
</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"
>
</MzButton>
</view>
<view class="footer-button col-6">
<MzButton
title="修改"
button-color="#4DC3B8"
font-color="#FFFFFF"
button-width="250rpx"
>
</MzButton>
</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';
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',
feedGun:imghost +'/static/image/feed-gun.png',
addPet:imghost +'/static/image/add-pet.png',
banner:imghost +'/static/image/banner.png',
feedUpload:imghost +'/static/image/feed-upload.png',
},
}
},
onLoad() {
},
methods: {
navTo(url){
wx.navigateTo({
url:url
})
},
},
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>

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

@ -72,7 +72,7 @@
backgroundImage:imghost+'/static/image/index-button-one.png',
serviceImage:imghost+'/static/image/index-button-bg-one.png',
buttonImage:imghost+'/static/image/index-button-bg-btn-one.png',
url:'/pages/Order/index'
url:'/pages/OrderPage/index'
},{
backgroundImage:imghost+'/static/image/index-button-two.png',
serviceImage:imghost+'/static/image/index-button-bg-two.png',

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

@ -65,18 +65,20 @@
</view>
</view>
<view class="order-card-bottom col-12 row">
<MzButton
title="立即沟通"
font-color="#3E3221"
button-color="#F7E1C3"
button-width="255rpx"
class="card-button "></MzButton>
<MzButton
title="喂养档案"
font-color="#FFFFFF"
button-color="#4DC3B8"
button-width="255rpx"
class="card-button"></MzButton>
<view class="card-button">
<MzButton
title="立即沟通"
font-color="#3E3221"
button-color="#F7E1C3"
button-width="255rpx"></MzButton>
</view>
<view class="card-button" @click="navTo('/pages/FeedLog/index')">
<MzButton
title="喂养档案"
font-color="#FFFFFF"
button-color="#4DC3B8"
button-width="255rpx"></MzButton>
</view>
</view>
</view>
</view>
@ -147,7 +149,11 @@
},
methods: {
navTo(url){
wx.navigateTo({
url:url
})
},
},
onPageScroll(res) {
if(res.scrollTop <= 20){
@ -164,5 +170,5 @@
</script>
<style lang="scss">
@import '@/pages/Index/components/OrderPage/components/index.scss';
@import './components/index.scss';
</style>

356
pages/OrderPage/components/index.scss
Unescape View File

@ -0,0 +1,356 @@
.app-wallpaper{
position: relative;
background:{
size: 100% 100%;
repeat: no-repeat;
};
.addr-container{
box-sizing: border-box;
position: relative;
.addr-content-container{
padding:10rpx;
box-sizing: border-box;
.addr-content{
box-sizing: border-box;
background:{
color:#ffffff;
}
padding:4rpx 7rpx;
border: 3rpx solid #262626;
border-radius: 26rpx;
.addr-content-main{
align-items: center;
box-sizing: border-box;
height:150rpx;
background:{
size: 100% 100%;
repeat: no-repeat;
}
padding:0 26rpx;
.main-img{
.img{
width:85rpx;
}
}
.main-content{
margin-left:30rpx;
.img{
height:35rpx;
margin-bottom:5rpx;
}
.main-content-text{
font-size: 30rpx;
font-weight: 400;
color: #131313;
}
}
.main-select-btn{
display: flex;
margin-left:auto;
align-items: center;
justify-content: center;
text-align: center;
.main-select-btn-gun{
height:45rpx;
width:3rpx;
background:{
color:#262626;
}
}
.content-img{
.img{
width:45rpx;
}
}
.content-text{
font-size: 26rpx;
font-weight: 400;
color: #131313;
}
}
}
}
}
.addr-background-container{
position: absolute;
width:100%;
height:100%;
left:0;
bottom:0rpx;
z-index: -1;
padding:{
top:30rpx;
}
box-sizing: border-box;
.addr-background-content{
box-sizing: border-box;
width:100%;
height:100%;
background:{
color:#4DC3B8;
}
border: 3rpx solid #262626;
border-radius: 26rpx;
position: relative;
//top:10rpx;
}
}
}
.order-container{
box-sizing: border-box;
position: relative;
margin-top:30rpx;
.order-content-container{
padding:10rpx;
box-sizing: border-box;
.order-content{
box-sizing: border-box;
background:{
color:#ffffff;
}
padding:15rpx;
border: 3rpx solid #262626;
border-radius: 26rpx;
.order-content-main{
box-sizing: border-box;
.order-content-main-title-img{
padding-top: 20rpx;
.img{
height: 40rpx;
}
}
.order-item{
padding:25rpx 10rpx;
align-items: center;
border-bottom:1rpx solid #BBB;
box-sizing: border-box;
&:last-child{
border-bottom: none;
}
.item-content{
justify-content: flex-end;
box-sizing: border-box;
.item-content-text{
font-size: 28rpx;
font-weight: 400;
color: #636363;
}
.item-content-tag{
margin-right: 20rpx;
position: relative;
box-sizing: border-box;
padding:12rpx;
background:{
color: rgba(79,225,212,0.14);;
}
border: 1rpx solid #262626;
border-radius: 16rpx;
font-size: 28rpx;
font-weight: 400;
color: #131313;
line-height: 1;
}
.tag-text{
}
.tag-close{
position: absolute;
top:-10rpx;
right:-10rpx;
background:{
color:#fff;
}
.img{
width:23rpx;
height:23rpx;
}
}
}
}
}
}
}
.order-background-container{
position: absolute;
width:100%;
height:100%;
left:0;
bottom:0rpx;
z-index: -1;
padding:{
top:30rpx;
}
box-sizing: border-box;
.order-background-content{
box-sizing: border-box;
width:100%;
height:100%;
background:{
color:#fff;
}
border: 3rpx solid #262626;
border-radius: 26rpx;
position: relative;
//top:10rpx;
}
}
}
}
.body-background{
background:{
size: 110% 110%;
repeat: no-repeat;
};
height:100%;
}
.footer-menu{
align-items: center;
padding:30rpx;
padding-top:25rpx;
position: fixed;
bottom:0;
left:0;
z-index: 9999;
width: 100%;
background: #FFFFFF;
border: 2rpx solid #262626;
box-shadow: 0rpx -2rpx 20rpx 0rpx rgba(0,0,0,0.06);
border-radius: 26rpx 26rpx 0rpx 0rpx;
.foot-menu-main-title{
margin-bottom:15rpx;
align-items: flex-end;
.main-title{
font-size: 28rpx;
font-weight: 500;
color: #131313;
}
.main-price{
font-size: 36rpx;
font-weight: 500;
color: #F48021;
}
}
.foot-menu-checkbox-group{
align-items: center;
}
.foot-menu-checkbox{
margin-right:8rpx;
width: 26rpx;
height: 26rpx;
background: #FFFFFF;
border: 2rpx solid #131313;
border-radius: 50%;
}
.foot-menu-title{
font-size: 26rpx;
color:#8F8F8F;
.foot-menu-url{
color:#4DC3B8;
}
}
}
.pet-page{
width:100%;
}
.order-item.pet-page-item{
padding:{
left:0 !important;
right:0 !important;
}
border-bottom: none !important;
}
.pet-page-group{
margin-top:20rpx;
padding:0 20rpx;
background:{
color:#F3FDFC;
}
border-radius: 20rpx;
}
.pet-page-button{
width: 100%;
text-align: center;
padding:55rpx 0 15rpx 0;
justify-content: center;
}
.order-item-container{
width:100%;
box-sizing: border-box;
.order-item-col{
box-sizing: border-box;
.order-item-content-group{
position: relative;
box-sizing: border-box;
padding:{
left:12rpx;
right:12rpx;
};
.count-group-content{
position: relative;
box-sizing: border-box;
border: 2rpx solid #131313;
border-radius: 20rpx;
//height:200rpx;
z-index: 2;
background: #fff;
text-align: center;
.img{
margin-top:3rpx;
height:120rpx;
}
.group-checkbox{
.u-radio{
justify-content: center;
text-align: center;
}
.u-radio__icon-wrap{
border-color:#262626 !important;
}
}
//background: {
// color:red;
//};
}
.count-group-background{
position: absolute;
box-sizing: border-box;
top:0;
left:0;
height:100%;
width: 100%;
padding:0rpx 26rpx;
z-index: 1;
.count-background{
position: relative;
top: 13rpx;
box-sizing: border-box;
height:100%;
width: 100%;
background:{
color:#FBF8D4;
}
border: 2rpx solid #131313;
border-radius: 20rpx;
}
}
}
}
}
.order-content-main{
.u-radio-group{
box-sizing: border-box;
display: block;
}
.order-content-main-title-img{
.img{
margin-left:15rpx;
}
}
}
.u-popup__content{
border-radius: 40rpx 40rpx 0rpx 0rpx;
}

336
pages/OrderPage/index.vue
Unescape View File

@ -0,0 +1,336 @@
<template>
<view class="body-background" :style="{
backgroundImage:'url('+staticImage.wallpaperBgImage+')'
}"></view>
<HeaderNav title="预约服务" :is-back="true"></HeaderNav>
<view class="app-wallpaper">
<view class="addr-container">
<view class="addr-content-container">
<view class="addr-content">
<view class="addr-content-main row" :style="{
backgroundImage:'url('+staticImage.addrBg+')'
}">
<view class="main-img">
<image mode="widthFix" class="img" :src="staticImage.addrAvatar"/>
</view>
<view class="main-content">
<image mode="heightFix" class="img" :src="staticImage.addrFw"/>
<view class="main-content-text">
请输入具体地址
</view>
</view>
<view class="main-select-btn ">
<view class="main-select-btn-gun"></view>
<view class="main-select-btn-content row">
<view class="content-img col-12">
<image mode="widthFix" class="img" :src="staticImage.addrBook"/>
</view>
<view class="content-text col-12">
选择地址
</view>
</view>
</view>
</view>
</view>
</view>
<view class="addr-background-container">
<view class="addr-background-content"></view>
</view>
</view>
<view class="order-container">
<view class="order-content-container">
<view class="order-content">
<view class="order-content-main row">
<view class="order-item row">
<view class="item-title">
服务日期
</view>
<view class="item-content row col">
<view class="item-content-tag">
<view class="tag-text">
2023/5/25
</view>
<view class="tag-close">
<image mode="heightFix" class="img" :src="staticImage.tagClose"/>
</view>
</view>
<view class="item-content-tag">
<view class="tag-text">
2023/5/25
</view>
<view class="tag-close">
<image mode="heightFix" class="img" :src="staticImage.tagClose"/>
</view>
</view>
</view>
<view class="item-icon">
<u-icon name="arrow-right"></u-icon>
</view>
</view>
<view class="order-item row">
<view class="item-title">
增值服务
</view>
<view class="item-content row col">
<view class="item-content-tag">
<view class="tag-text">
洗澡
</view>
<view class="tag-close">
<image mode="heightFix" class="img" :src="staticImage.tagClose"/>
</view>
</view>
<view class="item-content-tag">
<view class="tag-text">
剪指甲
</view>
<view class="tag-close">
<image mode="heightFix" class="img" :src="staticImage.tagClose"/>
</view>
</view>
</view>
<view class="item-icon">
<u-icon name="arrow-right"></u-icon>
</view>
</view>
<view class="order-item row">
<view class="item-title">
选择优惠
</view>
<view class="item-content row col">
<view class="item-content-text">
58元优惠券
</view>
</view>
<view class="item-icon">
<u-icon name="arrow-right"></u-icon>
</view>
</view>
</view>
</view>
</view>
<view class="order-background-container">
<view class="order-background-content"></view>
</view>
</view>
<view class="order-container">
<view class="order-content-container">
<view class="order-content">
<view class="order-content-main row">
<view class="order-content-main-title-img">
<image mode="heightFix" class="img" :src="staticImage.selectPet"/>
</view>
<view class="order-item pet-page-item row">
<PetPage class="pet-page"></PetPage>
</view>
</view>
</view>
</view>
<view class="order-background-container">
<view class="order-background-content"></view>
</view>
</view>
<view class="order-container">
<view class="order-content-container">
<view class="order-content">
<view class="order-content-main row">
<view class="order-content-main-title-img col-12">
<image mode="heightFix" class="img" :src="staticImage.selectService"/>
</view>
<u-radio-group
v-model="radioValue1"
placement="row"
@change="groupChange"
:size="30"
:icon-size="30"
icon-color="#4DC3B8"
active-color="#ffffff"
>
<view class="order-item pet-page-item row">
<view class="order-item-container row" >
<view class="order-item-col col-4" v-for="(item,index) in [1,2,3]">
<view class="order-item-content-group">
<view class="count-group-content">
<image mode="heightFix" class="img" :src="staticImage.groupImg"/>
<view class="group-title">专业服务</view>
<view class="group-desc">标准</view>
<view class="group-checkbox">
<u-radio
:customStyle="{marginBottom: '8px'}"
:key="index"
:name="item"
@change="radioChange"
>
</u-radio>
</view>
</view>
<view class="count-group-background">
<view class="count-background"></view>
</view>
</view>
</view>
</view>
</view>
</u-radio-group>
</view>
</view>
</view>
<view class="order-background-container">
<view class="order-background-content"></view>
</view>
</view>
</view>
<view class="footer-menu row">
<view class="row col">
<view class="foot-menu-main-title row">
<view class="main-title">费用共计</view>
<view class="main-price">￥58.8</view>
<view class="main-title">元</view>
</view>
<view class="foot-menu-checkbox-group row col">
<view class="foot-menu-checkbox"></view>
<view class="foot-menu-title">
<text>阅读并同意</text><text class="foot-menu-url">《上门喂养协议》</text>
</view>
</view>
</view>
<view class="">
<MzButton
title="立即下单"
button-color="#4DC3B8"
font-color="#FFFFFF"
button-width="200rpx"
>
</MzButton>
</view>
</view>
<u-calendar :show="true" mode="multiple" title="选择服务日期" @confirm="confirm"></u-calendar>
<!-- <RightNav></RightNav> -->
</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 PetPage from '../../components/PetPage/Index.vue';
import api from '@/utils/functions.js';
import {cardDetail} from "../../api/card";
export default {
components: {
HeaderNav,
FooterNav,
RightNav,
MzButton,
PetPage
},
data() {
return {
radioValue1:[],
list: ['未付款', '待评价', '已付款'],
curNow: 0,
id:'',
title: 'Hello',
loading: true,
staticImage: {
screenActiveImg: imghost + '/static/image/screen-active.png',
cardBackground: imghost + '/static/image/order-card-background.png',
wallpaperBgImage:imghost +'/static/image/background.png',
dogImage:imghost+'/static/image/index-user-title-dog.png',
cardDetailCard:imghost+'/static/image/card-detail-card.png',
couponsBackground:imghost+'/static/image/card-detail-coupons.png',
addrBg:imghost+'/static/image/order-create-addr-bg.png',
addrAvatar:imghost+'/static/image/order-create-addr-avatar.png',
addrFw:imghost+'/static/image/order-create-addr-fw.png',
addrBook:imghost+'/static/image/order-create-addr-book.png',
tagClose:imghost+'/static/image/order-create-tag-close.png',
selectPet:imghost+'/static/image/order-create-select-pet.png',
selectService:imghost+'/static/image/order-create-select-service.png',
groupImg:imghost+'/static/image/order-create-group-1.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',
},
],
couponsList: [{
price: '57',
title: '57元抵扣券',
cause: '满0.01使用',
coupons_number:10,
time: '满0.01元使用仅限线上预约下单使用',
is_timeout: false,
}]
}
},
onLoad(options) {
this.id = options.id;
this.getCardDetail();
},
methods: {
getCardDetail(){
cardDetail({
id:this.id
}).then((res) => {
console.log(res)
})
},
sectionChange(index) {
this.curNow = index;
},
radioChange(n) {
console.log('radioChange', n);
},
groupChange(n) {
console.log('radioChange', n);
},
confirm(){},
},
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>
Write Preview
Loading…
Cancel
Save