Skip to content

E
eMall_miniapp
Commit 4f4d36f5 authored by 高宇's avatar 高宇
Browse files
Options

会员权益,我的卡券页面完成

parent e76bba21
Hide whitespace changes
Inline Side-by-side
Showing with 320 additions and 2 deletions
my/member/index.vue
View file @ 4f4d36f5
<template>
<view class="会员权益"></view>
<view class="memberInterests">
<view class="swiper">
<u-swiper :list="list2" height="100%" :autoplay="false" @change="handleChange" circular></u-swiper>
</view>
<view class="test">~会员权益~</view>
<view class="description">
<image :src="src" style="width: 100%; min-height: 57vh;"></image>
</view>
</view>
</template>
<script>
export default{
data(){
return{
bashUrl: 'http://192.144.239.97:20043/file/',
src: 'http://192.144.239.97:20043/file/banner/20230605/6F749760FE1148369C4081EBD3248C6C.jpeg',
list2: [
{
image: 'http://192.144.239.97:20043/file/banner/20230605/6F749760FE1148369C4081EBD3248C6C.jpeg'
}
],
// 积分获取列表
integrallist: [],
// 会员折扣列表
memberList: [],
value:''
}
},
methods:{
handleChange(){
}
}
}
</script>
<style>
<style lang="scss" scoped>
.memberInterests{
background: #fff;
min-height: 100vh;
.swiper {
margin: 0 34rpx;
height: 30vh;
}
.test {
text-align: center;
padding: 42rpx 0;
font-size: 13px;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 700;
}
.description {
margin: 0 34rpx;
min-height: 57vh;
// border: 1px solid red;
}
}
</style>
\ No newline at end of file
my/myCard/index.vue 0 → 100644
View file @ 4f4d36f5
<template>
<view class="mycard">
<!-- 第一个选项卡 -->
<view class="addressCoupon">
<view class="left" @click="handleClickLeft">
<u-icon style="margin-right: 4rpx;" name="photo" :color="left? 'red': '#333' " size="28"></u-icon>
<view :class="left? 'lefttest': 'lefttest1'">
商场线上券
</view>
</view>
<view style="color: #eee; font-size: 42rpx;">|</view>
<view class="right" @click="handleClickRight">
<u-icon style="margin-right: 4rpx;" name="photo" :color="right? 'red': '#333' " size="28"></u-icon>
<view :class="right? 'righttest1': 'righttest'">
商家线下券
</view>
</view>
<!-- 选择券类型 -->
<view class="couponType">
<view class="pulldown">
<view style="margin-left: 10rpx;">{{test}}</view>
<view>
<u-icon name="arrow-down"></u-icon>
</view>
</view>
<view class="tabs">
<u-tabs v-if="left" :list="leftList" style="width: 100%;" active-color="red" :is-scroll="false" :gutter="40" :current="leftCurrent" @change="handLeftchange"></u-tabs>
<u-tabs v-if="right" :list="rightList" style="width: 100%;" active-color="red" :is-scroll="false" :gutter="40" :current="rightCurrent" @change="handRightchange"></u-tabs>
</view>
</view>
</view>
<!-- 卡券列表 -->
<view class="cardList">
<view>
<!-- 上部分 -->
<view class="upperCard">
<view class="left">
<view class="title">1小时 无金额门槛</view>
<view class="content">[新会员] 1小时停车券</view>
</view>
<view class="right">
<view class="button">
<span class="foot">去使用</span>
</view>
</view>
<!-- 删除按钮 -->
<view class="deleteButton">
<view>
<u-icon name="close"></u-icon>
</view>
</view>
</view>
<view class="lowerCard">
<!-- 期限 -->
<view class="timeLinit">还剩6天到期，至2023-07-11 23:59</view>
<!-- 地点 -->
<view class="locations">天津复悦里券</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default{
data() {
return{
test: '所有券',
left: true,
right: false,
current: 0,
leftCurrent: 0,
rightCurrent: 0,
list:[
{
name: '商场线上券'
},
{
name: '商家线下卷'
}
],
leftList:[
{
name: '可用券'
},
{
name: '历史卷'
},
{
name: '隐藏券'
}
],
rightList:[
{
name: '可用券'
},
{
name: '历史卷'
}
]
}
},
methods:{
// 点击商场线下券
handleClickLeft(){
this.left = true,
this.right = false
},
// 点击商场线上券
handleClickRight(){
this.left = false,
this.right = true
},
// 切换点击商场线下券相应的各种券
handLeftchange(index) {
this.leftCurrent = index;
},
// 切换点击商场线上券相应的各种券
handRightchange(index) {
this.rightCurrent = index;
}
}
}
</script>
<style lang="scss" scoped>
.mycard{
background-color: #eeeeee;
min-height: 100vh;
.addressCoupon{
position: fixed;
display: flex;
width: 100%;
height: 5vh;
background-color: #fff;
.left{
width: 50%;
display: flex;
justify-content: center;
align-items: center;
.lefttest{
color: red;
}
.lefttest1{
color: #333;
}
}
.right{
width: 50%;
display: flex;
justify-content: center;
align-items: center;
.righttest{
color: #333;
}
.righttest1{
color: red;
}
}
}
.couponType{
margin-top: 30rpx;
position: fixed;
top: 85rpx;
display: flex;
width: 100%;
height: 6vh;
background-color: #fff;
.pulldown{
flex: 1;
height: 75rpx;
display: flex;
align-items: center;
margin-left: 36rpx;
}
.tabs{
flex: 1;
height: 75rpx;
width: 50%;
display: flex;
align-items: center;
float: right;
}
}
.cardList{
position: relative;
top: 199rpx;
.upperCard{
margin-top: 30rpx;
display: flex;
margin-left: 4%;
width: 92%;
height: 10vh;
background-color: #fff;
border-radius: 12px;
.left{
margin-left: 30rpx;
.title {
margin-top: 37rpx;
color: red;
}
.content{
color: #333;
}
}
.right{
display: flex;
height: 141rpx;
align-items: center;
position: absolute;
right: 46px;
.button{
width: 138rpx;
height: 67rpx;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid red;
border-radius: 20px;
}
}
.deleteButton{
width: 44rpx;
height: 50rpx;
background-color: darkgray;
border-radius: 12rpx 12rpx 12rpx 12rpx;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 16px;
}
}
.lowerCard{
display: flex;
align-items: center;
margin-left: 4%;
width: 92%;
height: 5vh;
background-color: #fff;
border-radius: 12px;
.timeLinit{
margin-left: 30rpx;
color: darkorange;
}
.locations{
color: #eeeeee;
position: absolute;
right: 42rpx;
}
}
}
}
</style>
\ No newline at end of file
pages.json
View file @ 4f4d36f5
......@@ -231,6 +231,12 @@
"style": {
"navigationBarTitleText": "会员权益"
}
},
{
"path": "myCard/index",
"style": {
"navigationBarTitleText": "我的卡券"
}
}
]
}
......
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