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.
140 lines
3.8 KiB
140 lines
3.8 KiB
2 years ago
|
<template>
|
||
|
<HeaderNav title="付款权益卡" :is-back="true"></HeaderNav>
|
||
|
<view class="body-background" :style="{
|
||
|
backgroundImage:'url('+staticImage.wallpaperBgImage+')'
|
||
|
}"></view>
|
||
|
<view class="app-wallpaper">
|
||
|
|
||
|
<view class="screen-container row">
|
||
|
|
||
|
<view class="list-container">
|
||
|
<view class="list-item" v-for="item in orderCardList">
|
||
|
<view class="card-container row">
|
||
|
<view class="card-container-background col-12"></view>
|
||
|
<view class="card-container-background-main row">
|
||
|
<view class="card-col row" :style="{backgroundImage:'url('+staticImage.cardBackground+')'}">
|
||
|
|
||
|
<view class="card-right">
|
||
|
<view class="card-title">{{item.title}}</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 class="card-btn">
|
||
|
<MzButton
|
||
|
title="开始预约"
|
||
|
font-color="#FFFFFF"
|
||
|
button-color="#4DC3B8"
|
||
|
button-width="255rpx"
|
||
|
padding-tb="10rpx"
|
||
|
font-size="28rpx"
|
||
|
class="card-button"></MzButton>
|
||
|
</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
<view class="item-end row">
|
||
|
— 没有更多内容了 —
|
||
|
</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/screen-active.png',
|
||
|
cardBackground: imghost + '/static/image/order-card-background.png',
|
||
|
wallpaperBgImage:imghost +'/static/image/card-background.png',
|
||
|
dogImage:imghost+'/static/image/index-user-title-dog.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>
|