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

宠物列表 

权益卡详情
master
396316021 2 years ago
parent
68e05388eb
commit
2be61f0b6c
7 changed files with 892 additions and 4 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. 10
      pages.json
  2. 11
      pages/Card/index.vue
  3. 316
      pages/CardDetail/components/index.scss
  4. 186
      pages/CardDetail/index.vue
  5. 250
      pages/Pet/components/index.scss
  6. 121
      pages/Pet/index.vue
  7. 2
      pages/UserCoupons/index.vue

10
pages.json
Unescape View File

@ -36,6 +36,16 @@
"style" : {
"navigationBarTitleText" : "付款权益卡"
}
},{
"path" : "pages/CardDetail/index",
"style" : {
"navigationBarTitleText" : "付款权益卡详情"
}
},{
"path" : "pages/Pet/index",
"style" : {
"navigationBarTitleText" : "萌宠画册"
}
}
],
"globalStyle" : {

11
pages/Card/index.vue
Unescape View File

@ -34,7 +34,7 @@
抵扣券有效期：购卡后
</view>
</view>
<view class="card-btn">
<view class="card-btn" @click="navTo('/pages/CardDetail/index')">
<MzButton
title="开始预约"
font-color="#FFFFFF"
@ -42,7 +42,8 @@
button-width="255rpx"
padding-tb="10rpx"
font-size="28rpx"
class="card-button"></MzButton>
class="card-button"
></MzButton>
</view>
</view>
</view>
@ -119,7 +120,11 @@
},
methods: {
navTo(url){
wx.navigateTo({
url:url
})
},
},
onPageScroll(res) {
if(res.scrollTop <= 20){

316
pages/CardDetail/components/index.scss
Unescape View File

@ -0,0 +1,316 @@
.app-wallpaper{
position: relative;
background:{
size: 100% 100%;
repeat: no-repeat;
};
padding:0;
padding-bottom: 30rpx;
padding-top: 30rpx;
.item-end{
font-size: 28rpx;
font-weight: 400;
color: #ACB4B6;
line-height: 30rpx;
justify-content: center;
margin-top:8rpx;
}
.detail-box-top{
//height:300rpx;
width:100%;
position: relative;
bottom:30rpx;
.top-shadow{
width:100%;
height:70rpx;
background: #F7F7F7;
clip-path: polygon(95% 0%, 100% 100%, 0% 100%, 5% 0%);
box-shadow: 0rpx -9rpx 27rpx 0rpx rgba(51,72,70,0.2);
position: absolute;
bottom:0;
left:0;
z-index: 1;
border-top-left-radius: 150rpx;
border-top-right-radius: 150rpx;
}
.card-padding{
padding:30rpx;
padding-top:0;
padding-bottom:0;
}
.card-container{
background:{
position: 0 0;
size: 100% 100%;
}
.card-container-background{
}
width:100%;
box-sizing: border-box;
padding:30rpx 30rpx;
padding-bottom: 0;
position: relative;
z-index: 2;
.card-container-background{
width:100%;
height:90%;
position: absolute;
left:0rpx;
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:#EED9AD;
//};
}
.card-container-background-main{
width:100%;
//background:{
// color:#FFFFFF;
//}
border-radius: 26rpx;
//border: 3rpx solid #262626;
padding:7rpx;
box-sizing:border-box;
.card-col{
width:100%;
box-sizing: border-box;
padding:30rpx;
background:{
size:100% 100%;
position: center center;
repeat:no-repeat;
}
}
}
.card-right{
padding-bottom:30rpx;
width:100%;
.card-title{
font-size: 40rpx;
font-weight: bold;
color: #18181B;
}
.card-desc-container{
display: flex;
padding:20rpx 0rpx;
.card-desc{
padding:10rpx 0;
position: relative;
.card-desc-text{
position: relative;
z-index: 2;
font-size: 30rpx;
font-weight: 500;
color: #18181B;
}
.card-desc-background{
position: absolute;
bottom:0;
left:0;
z-index: 1;
width:100%;
height:50%;
background:{
color:#E3BF77;
}
}
}
}
.card-content-container{
justify-content: flex-start;
.card-avatar{
width:70rpx;
height:70rpx;
.img{
width:70rpx;
height:70rpx;
}
}
.card-content{
font-size: 24rpx;
font-weight: 400;
color: #656565;
margin-left:22rpx;
}
}
.card-title{
padding-top:5px;
font-size:32rpx;
font-weight: 500;
line-height: 1;
color:#131313;
}
}
}
}
.detail-box-bottom{
background:{
color:#ffffff;
}
min-height:200rpx;
.coupons-list{
padding:50rpx 30rpx;
box-sizing: border-box;
.coupons-item-container{
padding:{
bottom:7rpx;
}
background:{
size: 100% 100%;
repeat: no-repeat;
};
.coupons-item{
box-sizing: border-box;
height:178rpx;
padding:{
top:28rpx;
bottom:46rpx;
left:10rpx;
right:59rpx;
}
.coupons-left{
width:170rpx;
padding-top:0rpx;
.coupons-big-title-group{
align-items: flex-end;
justify-content: center;
.coupons-big-title{
text-align: center;
font-size: 62rpx;
font-weight: 800;
color: #FFFFFF;
line-height: 1;
text-shadow: 0rpx 0rpx 14rpx rgba(209,145,70,0.21);
}
.coupons-big-desc{
font-size: 32rpx;
font-weight: bold;
color: #FFFFFF;
line-height: 70rpx;
text-shadow: 0rpx 0rpx 14rpx rgba(209,145,70,0.21);
}
}
.coupons-cause{
margin-top:15rpx;
text-align: center;
font-size: 26rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
}
}
.coupons-right{
padding:10rpx 0 0 20rpx;
justify-content: space-between;
.coupons-gq{
width:80rpx;
height:80rpx;
.img{
width:75rpx;
height:75rpx;
}
}
.coupons-title{
font-size: 32rpx;
font-weight: 500;
color: #161616;
}
.coupons-btn{
margin-left:auto;
color:#4EC2B7;
font-size:28rpx;
font-weight: 400;
border:1rpx dashed #4EC2B7;
border-radius: 10rpx;
background:{
color:#E3FEFB;
}
padding:3rpx 15rpx;
}
.coupons-desc{
margin:20rpx 0;
font-size: 24rpx;
font-weight: 400;
color: #999999;
}
.coupons-bottom{
border-top: 1px solid #F0F1F6;
align-items: center;
justify-content: space-between;
margin:15rpx 0;
.coupons-rule{
font-size: 24rpx;
font-weight: 400;
color: #999999;
.u-icon{
margin-left:3rpx;
position: relative;
top:2rpx;
flex-direction: row;
align-items: center;
}
}
.coupons-button{
padding:10rpx;
font-size: 26rpx;
font-weight: 500;
color: #FFFFFF;
line-height: 30rpx;
text-shadow: 0rpx 3rpx 2rpx rgba(77,195,184,0.16);
}
}
}
}
}
}
}
}
.body-background{
background:{
size: 110% 110%;
repeat: no-repeat;
};
height:500rpx;
}
.footer-menu{
align-items: center;
padding:30rpx;
position: fixed;
bottom:0;
left:0;
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-checkbox{
margin-right:8rpx;
width: 28rpx;
height: 28rpx;
background: #FFFFFF;
border: 2px solid #131313;
border-radius: 50%;
}
.foot-menu-title{
font-size: 26rpx;
.foot-menu-url{
color:#4DC3B8;
}
}
}

186
pages/CardDetail/index.vue
Unescape View File

@ -0,0 +1,186 @@
<template>
<HeaderNav title="付款权益卡" :is-back="true"></HeaderNav>
<view class="body-background" :style="{
backgroundImage:'url('+staticImage.wallpaperBgImage+')'
}"></view>
<view class="app-wallpaper">
<view class="detail-box-container">
<view class="detail-box-top">
<view class="card-padding">
<view class="card-container row" :style="{backgroundImage:'url('+staticImage.cardDetailCard+')'}">
<view class="card-container-background col-12"></view>
<view class="card-container-background-main row">
<view class="card-col row" >
<view class="card-right">
<view class="card-title">宠托10次权益卡</view>
<view class="card-desc-container">
<view class="card-desc">
<view class="card-desc-text">300元购500元券包</view>
<view class="card-desc-background"></view>
</view>
</view>
<view class="card-content-container row">
<view class="card-avatar">
<image class="img" mode="aspectFit" :src="staticImage.dogImage"/>
</view>
<view class="card-content">
<view class="card-content-top">
券内含50元抵扣券10张
</view>
<view class="card-content-bottom">
抵扣券有效期：购卡后
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="top-shadow">
</view>
</view>
<view class="detail-box-bottom">
<view class="coupons-list">
<view v-for="item in couponsList" class="coupons-item-container" :style="{
backgroundImage:'url('+(staticImage.couponsBackground)+')'
}">
<view class="coupons-item row">
<view class="coupons-left ">
<view class="coupons-big-title-group row">
<view class="coupons-big-title">{{item.price}}</view>
<view class="coupons-big-desc">元</view>
</view>
<view class="coupons-cause">
{{item.cause}}
</view>
</view>
<view class="coupons-right col row">
<view class=" row">
<view class="coupons-title-group col-12 row">
<view class="coupons-title">
{{item.title}}
</view>
<view class="coupons-btn">
10张
</view>
</view>
<view class="coupons-desc col-12">{{item.time}}</view>
</view>
<view class="coupons-gq " v-show="item.is_timeout">
<image class="img" :src="staticImage.couponsGQ" mode="aspectFill" />
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="footer-menu row">
<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>
<MzButton
title="立即购买"
button-color="#4DC3B8"
font-color="#FFFFFF"
button-width="200rpx"
>
</MzButton>
</view>
<!-- <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 api from '@/utils/functions.js';
export default {
components: {
HeaderNav,
FooterNav,
RightNav,
MzButton
},
data() {
return {
title: 'Hello',
loading: true,
staticImage: {
screenActiveImg: imghost + '/static/image/screen-active.png',
cardBackground: imghost + '/static/image/order-card-background.png',
wallpaperBgImage:imghost +'/static/image/card-detail-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',
},
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使用',
time: '满0.01元使用仅限线上预约下单使用',
is_timeout: false,
}]
}
},
onLoad() {
},
methods: {
},
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>

250
pages/Pet/components/index.scss
Unescape View File

@ -0,0 +1,250 @@
.app-wallpaper{
position: relative;
background:{
size: 100% 100%;
repeat: no-repeat;
};
.order-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;
.order-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;
}
}
}
.order-screen-container{
.order-screen{
padding:40rpx 0 20rpx 0;
padding-right: 66rpx;
font-size: 28rpx;
line-height: 53rpx;
color:#646464;
font-weight: 400;
&.active{
color:#000000;
font-size: 32rpx;
font-weight: 500;
.order-screen-active{
display:flex;
}
}
.order-screen-active{
display: none;
align-items: center;
justify-content: center;
.img{
width:37rpx;
}
}
}
.order-screen-time-container{
flex:1;
margin-left:auto;
justify-content: flex-end;
.order-screen{
// padding-right:0;
}
}
.order-screen-time-title{
color:#B5B5B5;
font-size:26rpx;
font-weight: 400;
line-height:53rpx;
padding-right: 16rpx;
}
.order-screen-time-buttton-container{
padding-right: 0;
}
.order-screen-time-buttton{
padding:8rpx 19rpx;
color:#4EC2B7;
font-size: 28rpx;
font-weight: 400;
background-color:#ffffff;
border:1px solid #4EC2B7;
border-radius: 10rpx;
line-height: 28rpx;
box-shadow: 0rpx 4rpx 5rpx 0rpx rgba(82,84,84,0.1), 2rpx -4rpx 0rpx 0rpx rgba(78,194,183,0.2);
}
}
.order-list-container{
width:100%;
max-height: 1000rpx;
height: 100%;
overflow: auto;
box-sizing: border-box;
.order-list-item{
position: relative;
.pet-gun{
background:{
size: 80% 100%;
repeat: no-repeat;
position: center center;
}
height:90rpx;
width:100%;
position: absolute;
top:-60rpx;
z-index: 1;
}
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{
width:100%;
height:90%;
position: absolute;
left:0rpx;
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:#EED9AD;
};
}
.order-card-container-background-main{
width:100%;
background:{
color:#FFFFFF;
}
border-radius: 26rpx;
border: 3rpx solid #262626;
padding:7rpx;
box-sizing:border-box;
.order-card-col{
width:100%;
box-sizing: border-box;
padding:20rpx;
background:{
size:100% 100%;
position: center center;
repeat:no-repeat;
}
}
}
.order-card-left{
align-items: center;
.left-background{
box-sizing: border-box;
width:135rpx;
height:135rpx;
border-radius: 50%;
align-items: center;
justify-content: center;
display: flex;
background:{
color:#EED9AD;
}
}
//height:auto;
margin-right: 25rpx;
.img{
width:110rpx;
height:110rpx;
border-radius: 50%;
}
}
.order-card-right{
border-radius: 30rpx;
align-items: center;
justify-content: center;
background:{
color:#FBF5E7;
}
text-align: center;
padding:30rpx;
padding-left:20rpx;
.order-card-title{
padding-top:5px;
font-size:32rpx;
font-weight: 500;
line-height: 30rpx;
color:#131313;
}
.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;
}
}
}
.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;
}
}
}
}
}
}

121
pages/Pet/index.vue
Unescape View File

@ -0,0 +1,121 @@
<template>
<HeaderNav title="萌宠画册" :is-back="true"></HeaderNav>
<view class="app-wallpaper" :style="{
backgroundImage:'url('+staticImage.wallpaperBgImage+')'
}">
<view class="order-screen-container row">
<view class="order-list-container">
<view class="order-list-item" v-for="(item,index) in orderCardList">
<view v-show="index!=0" 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="petImage" mode="aspectFill" />
</view>
</view>
<view class="order-card-right col row">
<view class="col">
<view class="name ">靓仔</view>
<view class="old">2岁</view>
</view>
<view class="col">
<view class="type">英短</view>
<view class="weight">8kg</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- <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 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',
},
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',
},
]
}
},
onLoad() {
},
methods: {
},
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/UserCoupons/index.vue
Unescape View File

@ -141,5 +141,5 @@
</script>
<style lang="scss">
@import '@/pages/UserCoupons/components/index.scss';
@import './components/index.scss';
</style>
Write Preview
Loading…
Cancel
Save