Commit e76bba21 authored by 高宇's avatar 高宇

停车服务,自组积分,商铺plus页面完成,新建会员权益页面

parent f89138ef
<template>
<view class="filmReceipt">
<!-- z注意事项 -->
<view class="topView">
<view class="needingAttention">
<!-- 小票拍摄示例 -->
<view style="padding-top: 30rpx;">
<span class="ticketTest">小票拍摄示例</span>
<image :src="img" class="ticketimg"></image>
</view>
<!-- 拍摄注意事项 -->
<view style="margin-top: 30rpx;">
<span class="ticketTest">拍摄注意事项</span>
<image :src="img" class="ticketimg"></image>
</view>
</view>
<!-- 请选择店铺 -->
<view class="list">
<view class="list-trim">
<view class="left">
<view class="trim-title">请选择店铺</view>
</view>
<view style="height: 28rpx;">
<image class="rightimage" :src="baseURL+'/static/my/wode_icon_jiantou@2x.png'">
</view>
</view>
</view>
<!-- 拍照积分指南 -->
<view class="photo-guide">
<span class="ticketTest">拍摄积分指南</span>
<span class="guide">有效小票说明,仅限消费小票</span>
<span class="guide">以上最终解释权归商产所有。</span>
</view>
</view>
<!-- 底部按钮 -->
<view style="position: fixed;bottom: 0;">
<view class="bottom-button">
<view class="button" style="background-color: #1aa034;">微信自动积分</view>
<view class="button">拍摄小票</view>
</view>
</view>
</view>
</template>
<script>
export default{
data(){
return{
baseURL: 'http://192.144.239.97:20043/file/',
img: 'http://192.144.239.97:20043/file/banner/20230605/6F749760FE1148369C4081EBD3248C6C.jpeg',
}
}
}
</script>
<style lang="scss" scoped>
.filmReceipt{
background-color: #eeeeee;
min-height: 100vh;
padding-bottom: 288rpx;
.topView{
overflow: scroll;
.needingAttention{
margin-top: 20rpx;
background-color: #FFFFFF;
min-height: 80vh;
.ticketTest{
margin-left: 30rpx;
font-size: 38rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 700;
// color: #222222;
margin-bottom: 30rpx;
line-height: 38rpx;
}
.ticketimg{
margin-top: 30rpx;
width: 92%;
margin-left: 30rpx;
height: 30vh;
border: 1px solid;
}
}
.list{
background: #fff;
margin-top: 22rpx;
padding: 0 34rpx;
.list-trim{
height: 100rpx;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2rpx solid #F1F1F1;
.left{
display: flex;
}
.right{
display: flex;
align-items: center;
.messagenum{
width: 96rpx;
height: 68rpx;
background: #D84848;
border-radius: 30px 30px 30px 30px;
font-size: 32rpx;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
margin-right: 32rpx;
}
}
.leftimage{
width: 40rpx;
height: 40rpx;
margin-right: 22rpx;
}
.trim-title{
font-size: 32rpx;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: red;
}
.rightimage{
width: 28rpx;
height: 28rpx;
}
}
}
.photo-guide{
margin-top: 20rpx;
background-color: #FFFFFF;
.ticketTest{
padding-top: 30rpx;
display: block;
margin-left: 30rpx;
font-size: 38rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 700;
// color: #222222;
margin-bottom: 30rpx;
line-height: 38rpx;
}
.guide{
display: block;
font-size: 28rpx;
margin-left: 30rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
// color: #222222;
margin-bottom: 12rpx;
line-height: 38rpx;
}
}
}
.bottom-button {
padding-top: 30rpx;
height: 288rpx;
background: #FFFFFF;
box-shadow: 0px -1px 0px 1px #F5F5F5;
border-radius: 0px 0px 0px 0px;
padding-left: 30rpx;
width: 105%;
.button {
margin-bottom: 30rpx;
width: 682rpx;
height: 88rpx;
background: #BD1A2D;
border-radius: 22px 22px 22px 22px;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
}
}
}
</style>
\ No newline at end of file
<template >
<view class="parkingService">
<!-- 第一部分图片 -->
<view>
<view>
<image :src="img" mode="widthFix" class="topImg"></image>
</view>
<view style="position: relative;">
<view class="select">
<view style="display: inline-block;">
<u-icon name="map" size="40" style="margin-right: 10rpx;"></u-icon>
</view>
<view class="content">
{{test}}
</view>
</view>
</view>
</view>
<!-- 第二部分卡片 -->
<view style="position: relative;">
<view class="card">
<view>
<image :src="cardImg" class="cardImg" ></image>
</view>
<view class="bottom-button">
<view class="button">添加车牌</view>
</view>
</view>
<!-- 第三部分按钮区 -->
<view class="buttonArea">
<!-- 缴费说明 -->
<view class="itemButton">
<image :src="icon" class="iconImg"></image>
<span class="test">缴费说明</span>
</view>
<!-- 车牌管理-->
<view class="itemButton">
<image :src="icon" class="iconImg"></image>
<span class="test">车牌管理</span>
</view>
<!-- 停车记录 -->
<view class="itemButton">
<image :src="icon" class="iconImg"></image>
<span class="test">停车记录</span>
</view>
</view>
</view>
</view>
</template>
<script>
export default{
data(){
return{
img: 'http://192.144.239.97:20043/file/banner/20230605/6F749760FE1148369C4081EBD3248C6C.jpeg',
test: '上海复地活力城停车场',
cardImg: 'http://192.144.239.97:20043/file/static/my/zanwushuju.png',
icon: 'http://192.144.239.97:20043/file/static/my/wode_icon_youhuiquan%402x.png',
baseList2: [{
name: 'coupon',
title: '缴费说明'
},
{
name: 'email',
title: '车牌管理'
},
{
name: 'star',
title: '停车记录'
}
]
}
},
methods:{
click(){
}
}
}
</script>
<style lang="scss" scoped>
.parkingService{
background-color: #eeeeee;
min-height: 100vh;
// 头部图片的样式
.topImg{
width: 100%;
}
.select{
display: flex;
position: absolute;
top: -469rpx;
background-color: #fff;
margin-left: 30rpx;
border-radius: 20px;
padding: 10rpx 20rpx;
.content{
white-space: nowrap;
}
}
// 第二部分卡片
.card{
position: absolute;
top: -48rpx;
width: 90%;
margin-left: 5%;
height: 33vh;
background-color: #fff;
border-radius: 20px;
.cardImg{
margin-left: 19rpx;
height: 360rpx;
}
.bottom-button {
box-shadow: 0px -1px 0px 1px #F5F5F5;
border-radius: 0px 0px 0px 0px;
margin-left: 2%;
width: 96%;
display: flex;
justify-content: center;
align-items: center;
.button{
width: 682rpx;
height: 88rpx;
background: #BD1A2D;
border-radius: 22px 22px 22px 22px;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
}
}
}
.buttonArea {
display: flex;
position: absolute;
top: 478rpx;
width: 90%;
margin-left: 5%;
height: 17vh;
background-color: #fff;
border-radius: 20px;
.itemButton{
width: 146rpx;
height: 159rpx;
margin: 21px;
.iconImg{
width: 117rpx;
height: 117rpx;
margin-left: 15rpx;
}
.test{
margin-left: 15rpx;
}
}
}
}
</style>
\ No newline at end of file
<template>
<view class="shop">
<!-- 搜索框 -->
<view class="u-search-box">
<view class="u-search-inner">
<u-icon name="search" color="#909399" :size="28"></u-icon>
<u-input class="u-search-text" :disabled="ture" type="text" height="50" @click="toSearch" placeholder="搜商品名称" />
</view>
</view>
<!-- 选择框 -->
<view class="container" style="border-radius: 12px;">
<u-tabs style="border-radius: 12px;" :list="list" active-color="#fa3534" :current="current" @change="change"></u-tabs>
</view>
<!-- 列表区 -->
<view class="gl-body">
<view class="list" v-for="(item,index) in newList" :key="index">
<!-- 图片 -->
<image :src="item.img" :mode=mode style="height: 50%;width: 80%;"></image>
<!-- 类别 -->
<view class="test1">{{item.category}}</view>
<!-- 地点 -->
<view class="test2">{{item.locations}}</view>
<!-- 位置 -->
<view class="test1">{{item.position}}</view>
</view>
</view>
</view>
</template>
<script>
export default{
data() {
return{
mode: 'aspectFill',
keyword:'',
current: 0,
newList: [
{
img: 'http://192.144.239.97:20043/file/banner/20230605/6F749760FE1148369C4081EBD3248C6C.jpeg',
category: '生活类',
locations: '天津复悦里',
position: 'A1-A区'
}
],
img: 'http://192.144.239.97:20043/file/banner/20230605/6F749760FE1148369C4081EBD3248C6C.jpeg',
list: [{
name: 'A1'
},
{
name: 'A2'
},
{
name: 'A3'
},
{
name: 'A4'
},
{
name: 'A5'
},
{
name: 'A6'
},
{
name: 'A7'
},
{
name: 'A8'
},
{
name: 'A9'
},
{
name: 'B1'
},
{
name: 'B2'
},
{
name: 'B3'
},
{
name: 'B4'
},]
}
},
methods: {
toDetail(id){
},
toSearch(){
console.log('点击搜索框')
},
change(index) {
this.current = index;
}
}
}
</script>
<style lang="scss" scoped>
.shop{
background-color: #eeeeee;
min-height: 100vh;
.u-search-box {
padding: 10rpx 30rpx;
.u-search-inner {
background-color: rgb(234, 234, 234);
border-radius: 100rpx;
display: flex;
align-items: center;
padding: 10rpx 16rpx;
}
.u-search-text {
font-size: 24rpx;
color: $u-tips-color;
margin-left: 10rpx;
}
}
.container{
margin-left: 4%;
width: 92%;
height: 6vh;
border-radius: 12px 12px 12px 12px;
background-color: #fff;
}
.gl-body {
display: grid;
grid-template-columns: auto auto;
grid-column-gap: 40rpx;
margin: 30rpx;
.list{
margin-bottom: 30rpx;
width: 100%;
height: 20vh;
.test1{
margin-top: 10rpx;
font-size: 28rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
color: chocolate;
}
.test2{
margin-top: 10rpx;
font-size: 36rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 700;
}
}
}
}
</style>
\ No newline at end of file
<template>
<view class="会员权益"></view>
</template>
<script>
</script>
<style>
</style>
\ No newline at end of file
{ {
"name": "uView", "name": "邻家小铺",
"version": "1.0.0", "version": "1.0.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
......
...@@ -199,8 +199,43 @@ ...@@ -199,8 +199,43 @@
} }
} }
] ]
},
{
"root": "homePage",
"pages": [
{
"path": "parkingService/index",
"style": {
"navigationBarTitleText": "停车服务"
}
},
{
"path": "filmReceipt/index",
"style": {
"navigationBarTitleText": "拍摄小票"
}
},
{
"path": "shop/index",
"style": {
"navigationBarTitleText": "品牌商铺"
}
}
]
},
{
"root": "my",
"pages": [
{
"path": "member/index",
"style": {
"navigationBarTitleText": "会员权益"
}
}
]
} }
], ],
"globalStyle": { "globalStyle": {
"navigationBarTextStyle": "black", "navigationBarTextStyle": "black",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment