13 changed files with 1234 additions and 33 deletions
-
235components/lf-jpCoded/lf-jpCoded.vue
-
80components/lf-payPassword/lf-payPassword.vue
-
101components/lf-seckill/lf-seckill.vue
-
44pages.json
-
8pages/index/index/index.vue
-
138pages/point/detail/detail.vue
-
26pages/point/rule/rule.vue
-
22pages/user/agreement/agreement.less
-
51pages/user/agreement/agreement.vue
-
123pages/user/member/service.vue
-
173pages/user/my/myEventRegistrationList.vue
-
136pages/user/my/setPassword.vue
-
130pages/user/my/verificationPhone.vue
@ -0,0 +1,235 @@ |
|||||
|
<template> |
||||
|
<view class="wallet_class"> |
||||
|
<view class="pay-pwd-input" v-if="pawType==='one'" :style="'width:' + width + 'rpx'" @tap="tokey"> |
||||
|
<view class="pay-pwd-grid uni-flex uni-row" v-for="(value, index) in payPwdGrid" :key="index"> |
||||
|
<view :style="('width:'+ width1 + 'rpx;') + ((focusType&&(index==list.length))?borderCheckStyle:'') ">{{value.text}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="input-row" v-if="pawType==='two'" :style="'width:' + width + 'rpx'" @tap="tokey"> |
||||
|
<view class="pay-pwd-grid uni-flex uni-row" v-for="(value, index) in payPwdGrid" :key="index"> |
||||
|
<view :class="'item'" :style="('width:'+ width1 + 'rpx;') + ((focusType&&(index==list.length))?borderCheckStyle:'') ">{{ value.text }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<input v-if="keyType" :type="inputType" :style="'width:' + width + 'rpx'" :maxlength="places" class="input_info" @input="inputVal" |
||||
|
@focus="focus" @blur="blur" /> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'wallet_category', |
||||
|
props: { |
||||
|
pawType: { //输入框样式 |
||||
|
type: String, |
||||
|
default: 'one' |
||||
|
}, |
||||
|
places: { // 密码框位数 |
||||
|
type: Number, |
||||
|
default: 6 |
||||
|
}, |
||||
|
width: { |
||||
|
type: Number, |
||||
|
default: 750 |
||||
|
}, |
||||
|
borderCheckStyle: { |
||||
|
type: String, |
||||
|
default: 'border: 1px solid #f00;' |
||||
|
}, |
||||
|
codes: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
keyType: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
isPwy:{ |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
inputType:{ |
||||
|
type: String, |
||||
|
default: 'number' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
focusType: false, |
||||
|
width1: 110, |
||||
|
list: [], |
||||
|
payPwdGrid: [] |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
// 组件文档地址：https://ext.dcloud.net.cn/plugin?id=2695 |
||||
|
this.list = this.codes.split('') |
||||
|
this.width1 = (this.width - 90) / this.places |
||||
|
this.payPwdGrid = [] |
||||
|
for (let a = 0; a < this.places; a++) { |
||||
|
this.payPwdGrid.push({ |
||||
|
text: '' |
||||
|
}) |
||||
|
} |
||||
|
if(this.isPwy){ |
||||
|
for (let a = 0; a < this.list.length; a++) { |
||||
|
this.payPwdGrid[a].text = '●' |
||||
|
} |
||||
|
}else{ |
||||
|
for (let a = 0; a < this.list.length; a++) { |
||||
|
this.payPwdGrid[a].text = this.list[a] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
places() { |
||||
|
this.list = this.codes.split('') |
||||
|
this.width1 = (this.width - 90) / this.places |
||||
|
this.payPwdGrid = [] |
||||
|
for (let a = 0; a < this.places; a++) { |
||||
|
this.payPwdGrid.push({ |
||||
|
text: '' |
||||
|
}) |
||||
|
} |
||||
|
if(this.isPwy){ |
||||
|
for (let a = 0; a < this.list.length; a++) { |
||||
|
this.payPwdGrid[a].text = '●' |
||||
|
} |
||||
|
}else{ |
||||
|
for (let a = 0; a < this.list.length; a++) { |
||||
|
this.payPwdGrid[a].text = this.list[a] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
codes() { |
||||
|
this.list = this.codes.split('') |
||||
|
this.payPwdGrid = [] |
||||
|
for (let a = 0; a < this.places; a++) { |
||||
|
this.payPwdGrid.push({ |
||||
|
text: '' |
||||
|
}) |
||||
|
} |
||||
|
if(this.isPwy){ |
||||
|
for (let a = 0; a < this.list.length; a++) { |
||||
|
this.payPwdGrid[a].text = '●' |
||||
|
} |
||||
|
}else{ |
||||
|
for (let a = 0; a < this.list.length; a++) { |
||||
|
this.payPwdGrid[a].text = this.list[a] |
||||
|
} |
||||
|
} |
||||
|
this.$emit('inputVal', this.codes); |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
focus() { |
||||
|
this.focusType = true |
||||
|
}, |
||||
|
blur() { |
||||
|
this.focusType = false |
||||
|
}, |
||||
|
tokey(){ |
||||
|
this.$emit('tokey'); |
||||
|
}, |
||||
|
inputVal(e) { |
||||
|
let inputValues = e.detail.value; |
||||
|
this.list = inputValues.split('') |
||||
|
this.payPwdGrid = [] |
||||
|
for (let a = 0; a < this.places; a++) { |
||||
|
this.payPwdGrid.push({ |
||||
|
text: '' |
||||
|
}) |
||||
|
} |
||||
|
if(this.isPwy){ |
||||
|
for (let a = 0; a < this.list.length; a++) { |
||||
|
this.payPwdGrid[a].text = '●' |
||||
|
} |
||||
|
}else{ |
||||
|
for (let a = 0; a < this.list.length; a++) { |
||||
|
this.payPwdGrid[a].text = this.list[a] |
||||
|
} |
||||
|
} |
||||
|
this.$emit('inputVal', inputValues); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.wallet_class { |
||||
|
position: relative; |
||||
|
height: 100%; |
||||
|
|
||||
|
.pay-pwd-input { |
||||
|
height: 100%; |
||||
|
line-height: 100%; |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
|
||||
|
.pay-pwd-grid { |
||||
|
margin: 0upx auto; |
||||
|
height: 100%; |
||||
|
line-height: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
|
||||
|
view { |
||||
|
width: 110upx; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
border: #cececd solid 0.1upx; |
||||
|
border-radius: 10upx; |
||||
|
font-size: 36upx; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.xaunz { |
||||
|
border: #f00 solid 0.1upx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.input-row { |
||||
|
height: 100%; |
||||
|
line-height: 100%; |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
|
||||
|
.pay-pwd-grid { |
||||
|
margin: 0upx auto; |
||||
|
height: 100%; |
||||
|
line-height: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
|
||||
|
.item { |
||||
|
width: 110rpx; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 36upx; |
||||
|
font-weight: 600; |
||||
|
border-bottom: 1px solid #c8c8c8; |
||||
|
} |
||||
|
|
||||
|
.item-active { |
||||
|
position: relative; |
||||
|
transform: scale(1.2); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.input_info { |
||||
|
width: 1200rpx; |
||||
|
height: 100%; |
||||
|
line-height: 100%; |
||||
|
opacity: 0; |
||||
|
position: absolute; |
||||
|
top: 0rpx; |
||||
|
left: 0; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,80 @@ |
|||||
|
<template> |
||||
|
<view class="page"> |
||||
|
<view class="content"> |
||||
|
<view class="title">请设置6位支付密码</view> |
||||
|
<view class="password"> |
||||
|
<lf-jp-coded :width="686" @inputVal="inputVal"></lf-jp-coded> |
||||
|
</view> |
||||
|
</view> |
||||
|
<button class="btn" hover-class="lf-opacity" @click="comfirm">确认</button> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import lfJpCoded from '@/components/lf-jpCoded/lf-jpCoded.vue' |
||||
|
export default { |
||||
|
components: { |
||||
|
lfJpCoded |
||||
|
}, |
||||
|
data(){ |
||||
|
return { |
||||
|
code: '' |
||||
|
} |
||||
|
}, |
||||
|
created(){ |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
inputVal(event){ |
||||
|
this.code = event; |
||||
|
}, |
||||
|
comfirm(){ |
||||
|
if(this.code.length < 6){ |
||||
|
return this.$msg('请输入完整支付密码'); |
||||
|
} |
||||
|
this.$emit('comfirm', this.code); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped="scoped"> |
||||
|
.page{ |
||||
|
width: 750rpx; |
||||
|
height: 100vh; |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
background-color: #FFFFFF; |
||||
|
z-index: 999; |
||||
|
} |
||||
|
.content{ |
||||
|
height: max-content; |
||||
|
width: 750rpx; |
||||
|
box-sizing: border-box; |
||||
|
padding: 0rpx 32rpx 0; |
||||
|
position: absolute; |
||||
|
top: 350rpx; |
||||
|
left: 0; |
||||
|
.title{ |
||||
|
font-size: 28rpx; |
||||
|
color: #222222; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.password{ |
||||
|
height: 100rpx; |
||||
|
margin-top: 50rpx; |
||||
|
} |
||||
|
} |
||||
|
.btn{ |
||||
|
position: absolute; |
||||
|
width: 550rpx; |
||||
|
height: 100rpx; |
||||
|
background: #15716E; |
||||
|
border-radius: 50rpx; |
||||
|
bottom: 10vh; |
||||
|
left: calc(50% - 275rpx); |
||||
|
line-height: 100rpx; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,101 @@ |
|||||
|
<template> |
||||
|
<view class="content"> |
||||
|
<view class="card"> |
||||
|
<view class="title">秒杀购</view> |
||||
|
<view class="desc">低价不等人，快来秒杀啦～</view> |
||||
|
<scroll-view class="scroll-view" :scroll-x="true"> |
||||
|
<view class="lf-flex"> |
||||
|
<view class="goods-item" v-for="(item, index) in 4" :key="index"> |
||||
|
<image class="goods-img"></image> |
||||
|
<view class="lf-line-1 goods-title">日本sk-ll小灯跑</view> |
||||
|
<view class="goods-price"> |
||||
|
<text>¥888</text> |
||||
|
<text>¥888</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
onLoad(){ |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped="scoped"> |
||||
|
.content{ |
||||
|
padding: 60rpx 32rpx 0; |
||||
|
width: 750rpx; |
||||
|
height: max-content; |
||||
|
box-sizing: border-box; |
||||
|
.card{ |
||||
|
width: 686rpx; |
||||
|
height: 471rpx; |
||||
|
background: #F3F8F8; |
||||
|
border-radius: 20rpx; |
||||
|
padding: 40rpx; |
||||
|
box-sizing: border-box; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
.title{ |
||||
|
font-size: 32rpx; |
||||
|
font-weight: bold; |
||||
|
color: #15716E; |
||||
|
} |
||||
|
.desc{ |
||||
|
width: 317rpx; |
||||
|
height: 33rpx; |
||||
|
background: #15716E; |
||||
|
border-radius: 17rpx; |
||||
|
font-size: 24rpx; |
||||
|
color: #FFFFFF; |
||||
|
text-align: center; |
||||
|
line-height: 33rpx; |
||||
|
margin-top: 10rpx; |
||||
|
margin-bottom: 40rpx; |
||||
|
} |
||||
|
.scroll-view, .scroll-view>view{ |
||||
|
width: 100%; |
||||
|
} |
||||
|
.goods-item{ |
||||
|
margin-right: 33rpx; |
||||
|
width: 180rpx; |
||||
|
.goods-img{ |
||||
|
width: 180rpx; |
||||
|
height: 180rpx; |
||||
|
border-radius: 10rpx; |
||||
|
background-color: #EEEEEE; |
||||
|
} |
||||
|
.goods-title{ |
||||
|
font-size: 24rpx; |
||||
|
color: #222222; |
||||
|
margin-top: 10rpx; |
||||
|
} |
||||
|
.goods-price>text:nth-child(1n){ |
||||
|
font-size: 28rpx; |
||||
|
font-weight: #F63434; |
||||
|
} |
||||
|
.goods-price>text:nth-child(2n){ |
||||
|
font-size: 24rpx; |
||||
|
font-weight: #777777; |
||||
|
margin-left: 15rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,138 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<lf-nav title="积分" :showIcon="true" :spreadOut="false" bgColor="transparent" titleColor="#fff"></lf-nav> |
||||
|
<view class="head"> |
||||
|
<view class="bg-left"></view> |
||||
|
<view class="bg-right"></view> |
||||
|
<view class="head-content"> |
||||
|
<view> |
||||
|
<text class="lf-iconfont icon-- lf-font-50"></text> |
||||
|
</view> |
||||
|
<view class="point">78326478</view> |
||||
|
<view class="head-menu"> |
||||
|
<view>兑换礼品 ></view> |
||||
|
<view @click="$url('/pages/point/rule/rule')">积分规则 ></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="main"> |
||||
|
<view class="lf-row-between lf-m-b-30"> |
||||
|
<view class="lf-font-32 lf-color-black lf-font-bold">积分变动明细</view> |
||||
|
<picker mode='date' :value="date" @change="dateChange"> |
||||
|
<view style="width: 440rpx; text-align: right;"> |
||||
|
<text>{{ date || '2021-09-01' }}</text> |
||||
|
<text class="lf-iconfont icon--1 lf-m-l-10"></text> |
||||
|
</view> |
||||
|
</picker> |
||||
|
</view> |
||||
|
<view class="item" v-for="(item, index) in 10" :key="index"> |
||||
|
<view class="lf-row-between"> |
||||
|
<text class="lf-font-36 lf-color-black lf-font-bold" :class="{'lf-color-price': index % 2}">{{ index % 2 ? '-250' : '+80' }}</text> |
||||
|
<text class="lf-font-24 lf-color-777">2021-09-01 18:27:58</text> |
||||
|
</view> |
||||
|
<view class="lf-m-t-20"> |
||||
|
<text class="lf-font-24 lf-color-555">商城内消费</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return { |
||||
|
date: '' |
||||
|
} |
||||
|
}, |
||||
|
onLoad(){ |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
dateChange(event){ |
||||
|
this.date = event.detail.value; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
page{ |
||||
|
overflow-x: hidden; |
||||
|
} |
||||
|
</style> |
||||
|
<style lang="scss" scoped="scoped"> |
||||
|
.head{ |
||||
|
width: 750rpx; |
||||
|
height: 512rpx; |
||||
|
background: linear-gradient(90deg, #22A2A0 0%, #187B7A 100%); |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
display: flex; |
||||
|
align-items: flex-end; |
||||
|
box-sizing: border-box; |
||||
|
padding: 60rpx 32rpx; |
||||
|
color: #FFFFFF; |
||||
|
.bg-left{ |
||||
|
position: absolute; |
||||
|
width: 196rpx; |
||||
|
height: 196rpx; |
||||
|
border-radius: 50%; |
||||
|
background-color: rgba(255,255,255,0.04); |
||||
|
left: -92rpx; |
||||
|
bottom: 60rpx; |
||||
|
} |
||||
|
.bg-right{ |
||||
|
position: absolute; |
||||
|
width: 520rpx; |
||||
|
height: 520rpx; |
||||
|
border-radius: 50%; |
||||
|
background-color: rgba(255,255,255,0.04); |
||||
|
right: -168rpx; |
||||
|
top: -122rpx; |
||||
|
} |
||||
|
.head-content{ |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
&>view{ |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.head-menu{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding: 0 78rpx; |
||||
|
font-size: 24rpx; |
||||
|
margin-top: 50rpx; |
||||
|
} |
||||
|
.point{ |
||||
|
font-size: 72rpx; |
||||
|
letter-spacing: 2rpx; |
||||
|
font-weight: bold; |
||||
|
word-break: break-all; |
||||
|
line-height: 1; |
||||
|
margin-top: 10rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.main{ |
||||
|
padding: 30rpx 32rpx; |
||||
|
width: 750rpx; |
||||
|
height: max-content; |
||||
|
box-sizing: border-box; |
||||
|
.item{ |
||||
|
width: 686rpx; |
||||
|
height: max-content; |
||||
|
background: #F4F8F8; |
||||
|
border-radius: 10rpx; |
||||
|
margin-bottom: 26rpx; |
||||
|
padding: 30rpx; |
||||
|
box-sizing: border-box; |
||||
|
line-height: 1; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,26 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<lf-nav title="积分规则" :showIcon="true"></lf-nav> |
||||
|
<view style="color: #9A7E4C;" v-for="(item, index) in 20" :key="index">积分规则</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
onLoad(){ |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped="scoped"> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,123 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<lf-nav title="会员服务" :showIcon="true"></lf-nav> |
||||
|
<view class="content"> |
||||
|
<view class="head"> |
||||
|
<image mode="aspectFill" src="https://picsum.photos/seed/picsum/200/300"></image> |
||||
|
</view> |
||||
|
<view class="main"> |
||||
|
<view class="item" v-for="(item, index) in 9" :key="index"> |
||||
|
<image class="img"></image> |
||||
|
<view class="title">会员饮品</view> |
||||
|
<view class="desc">每月免费赠饮</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="height: 120rpx;"></view> |
||||
|
<view class="fixed"> |
||||
|
<view class="btn1" hover-class="lf-opacity">在线客服</view> |
||||
|
<view class="btn2" hover-class="lf-opacity">拨打客服电话</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
onLoad(){ |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped="scoped"> |
||||
|
.content{ |
||||
|
padding: 30rpx 32rpx; |
||||
|
.head{ |
||||
|
width: 686rpx; |
||||
|
height: 300rpx; |
||||
|
border-radius: 20rpx; |
||||
|
overflow: hidden; |
||||
|
&>image{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
.main{ |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
.item{ |
||||
|
width: 200rpx; |
||||
|
height: max-content; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
margin-top: 40rpx; |
||||
|
margin-right: 43rpx; |
||||
|
&:nth-child(3n){ |
||||
|
margin-right: 0rpx; |
||||
|
} |
||||
|
.img{ |
||||
|
width: 200rpx; |
||||
|
height: 200rpx; |
||||
|
background-color: #D8D8D8; |
||||
|
} |
||||
|
.title{ |
||||
|
font-size: 28rpx; |
||||
|
color: #222222; |
||||
|
margin-top: 20rpx; |
||||
|
} |
||||
|
.desc{ |
||||
|
font-size: 24rpx; |
||||
|
color: #777777; |
||||
|
margin-top: 10rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.fixed{ |
||||
|
height: 120rpx; |
||||
|
width: 750rpx; |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
z-index: 2; |
||||
|
background-color: #FFFFFF; |
||||
|
border-top: 1rpx solid #e5e5e5; |
||||
|
box-sizing: border-box; |
||||
|
padding: 0 32rpx; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
.btn1{ |
||||
|
width: 243rpx; |
||||
|
height: 100rpx; |
||||
|
border-radius: 50rpx; |
||||
|
border: 2rpx solid #15716E; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
color: #15716E; |
||||
|
font-size: 32rpx; |
||||
|
} |
||||
|
.btn2{ |
||||
|
width: 423rpx; |
||||
|
height: 100rpx; |
||||
|
background: #15716E; |
||||
|
border-radius: 50rpx; |
||||
|
color: #FFFFFF; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,173 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<lf-nav title="我的报名" :showIcon="true" @changeHeight="e => nav_height = e"></lf-nav> |
||||
|
<view v-if="tab_list.length"> |
||||
|
<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="tab_current" @change="tabChange"></u-tabs> |
||||
|
</view> |
||||
|
<swiper :style="{height: autoHeight}" :current="tab_current" @change="swiperChange"> |
||||
|
<swiper-item v-for="(item, index) in tab_list" :key="index"> |
||||
|
<scroll-view :style="{height: autoHeight}" :scroll-y="true"> |
||||
|
<view class="scroll-content"> |
||||
|
<view class="card" v-for="(item, index) in 3" :key="index"> |
||||
|
<view class="cover"> |
||||
|
<image class="img"></image> |
||||
|
<view class="label" :class="'theme-'+ (index+1)">待参加</view> |
||||
|
</view> |
||||
|
<view class="info"> |
||||
|
<view class="title">海蓝之谜美颜会 9月15日场10:30场</view> |
||||
|
<view class="date">2021.09.01-2021.09.15</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="height: 30rpx;"></view> |
||||
|
</scroll-view> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
let _public = { |
||||
|
page: 1, |
||||
|
isPage: true, |
||||
|
loadingClass: true, |
||||
|
loadingText: '正在加载中' |
||||
|
} |
||||
|
return { |
||||
|
tab_current: 0, |
||||
|
tab_list: [{ |
||||
|
name: '全部', |
||||
|
list: [], |
||||
|
..._public |
||||
|
},{ |
||||
|
name: '待参加', |
||||
|
list: [], |
||||
|
..._public |
||||
|
},{ |
||||
|
name: '已参加', |
||||
|
list: [], |
||||
|
..._public |
||||
|
},{ |
||||
|
name: '已过期', |
||||
|
list: [], |
||||
|
..._public |
||||
|
}], |
||||
|
scrollH: 0, |
||||
|
nav_height: 0 |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
autoHeight(){ |
||||
|
return `calc(${this.scrollH}px - ${this.nav_height}px - 86rpx)`; |
||||
|
} |
||||
|
}, |
||||
|
onLoad(){ |
||||
|
let info = uni.getSystemInfoSync(); |
||||
|
this.scrollH = info.screenHeight; |
||||
|
}, |
||||
|
methods: { |
||||
|
tabChange(event){ |
||||
|
this.tab_current = event; |
||||
|
}, |
||||
|
swiperChange(event){ |
||||
|
this.tab_current = event.detail.current; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped="scoped"> |
||||
|
.scroll-content{ |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: center; |
||||
|
.card{ |
||||
|
width: 686rpx; |
||||
|
height: max-content; |
||||
|
background-color: #FFFFFF; |
||||
|
box-shadow: 1rpx 1rpx 6rpx 3rpx #e5e5e5; |
||||
|
margin-top: 30rpx; |
||||
|
border-radius: 20rpx; |
||||
|
overflow: hidden; |
||||
|
.cover{ |
||||
|
width: 686rpx; |
||||
|
height: 300rpx; |
||||
|
position: relative; |
||||
|
.img{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background-color: #EEEEEE; |
||||
|
} |
||||
|
.label{ |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 118rpx; |
||||
|
height: 57rpx; |
||||
|
border-radius: 20rpx 0rpx 20rpx 0rpx; |
||||
|
text-align: center; |
||||
|
line-height: 57rpx; |
||||
|
color: #FFFFFF; |
||||
|
font-size: 26rpx; |
||||
|
} |
||||
|
} |
||||
|
.info{ |
||||
|
width: 686rpx; |
||||
|
height: max-content; |
||||
|
padding: 20rpx 30rpx; |
||||
|
box-sizing: border-box; |
||||
|
.title{ |
||||
|
font-size: 28rpx; |
||||
|
color: #222222; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.date{ |
||||
|
margin-top: 20rpx; |
||||
|
font-size: 24rpx; |
||||
|
color: #555555; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.theme-1{ |
||||
|
background-color: #15716E; |
||||
|
} |
||||
|
.theme-2{ |
||||
|
background-color: #1789E4; |
||||
|
} |
||||
|
.theme-3{ |
||||
|
background-color: #777777; |
||||
|
} |
||||
|
|
||||
|
// tabs 样式修改 |
||||
|
/deep/.u-scroll-box { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
/deep/.u-scroll-box .u-tab-bar { |
||||
|
background-color: #15716E!important; |
||||
|
width: 80rpx!important; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: -12rpx; |
||||
|
} |
||||
|
|
||||
|
/deep/.special_tab .u-tabs .u-scroll-box .u-tab-bar { |
||||
|
background-color: #15716E!important; |
||||
|
width: 56rpx!important; |
||||
|
position: absolute; |
||||
|
height: 5rpx!important; |
||||
|
left: 8rpx; |
||||
|
bottom: -4rpx; |
||||
|
} |
||||
|
|
||||
|
/deep/ .u-tab-item { |
||||
|
font-size: 28rpx!important; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,136 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<lf-nav title="设置密码" :showIcon="true"></lf-nav> |
||||
|
<view class="content"> |
||||
|
<view class="list"> |
||||
|
<view class="lf-flex"> |
||||
|
<input class="input" placeholder="请输入手机号" v-model="phone" maxlength="11" /> |
||||
|
</view> |
||||
|
<view class="clear" v-if="phone.length" @click="phone = ''"> |
||||
|
<text class="lf-iconfont icon--"></text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="list"> |
||||
|
<view class="lf-flex"> |
||||
|
<input class="input input-code" placeholder="请输入验证码" maxlength="8" v-model="code" /> |
||||
|
</view> |
||||
|
<view class="code" :class="{'active-bg': is_code}" @click="getCode"> |
||||
|
<text>{{ is_code ? num +'秒后重新获取' : '获取验证码' }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<button class="next-btn" hover-class="lf-opacity" @click="next">下一步</button> |
||||
|
<lf-pay-password v-if="show_pay" @comfirm="payComfirm"></lf-pay-password> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import lfPayPassword from '@/components/lf-payPassword/lf-payPassword.vue' |
||||
|
export default { |
||||
|
components: { |
||||
|
lfPayPassword |
||||
|
}, |
||||
|
data(){ |
||||
|
return { |
||||
|
phone: '', |
||||
|
code: '', |
||||
|
is_code: false, |
||||
|
timer: null, |
||||
|
num: 10, |
||||
|
show_pay: false |
||||
|
} |
||||
|
}, |
||||
|
onLoad(){ |
||||
|
|
||||
|
}, |
||||
|
onUnload(){ |
||||
|
if(this.timer){ |
||||
|
clearInterval(this.timer); |
||||
|
this.timer = null; |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
getCode(){ |
||||
|
if(this.is_code) return; |
||||
|
this.is_code = true; |
||||
|
if(this.timer){ |
||||
|
clearInterval(this.timer); |
||||
|
this.timer = null; |
||||
|
} |
||||
|
console.log("测试重复点击", Math.random()) |
||||
|
// TODO 在此发送网络请求 |
||||
|
this.timer = setInterval(() => { |
||||
|
this.num--; |
||||
|
if(this.num <= 0){ |
||||
|
clearInterval(this.timer); |
||||
|
this.timer = null; |
||||
|
this.num = 10; |
||||
|
this.is_code = false; |
||||
|
} |
||||
|
}, 1000); |
||||
|
}, |
||||
|
next(){ |
||||
|
this.show_pay = true; |
||||
|
}, |
||||
|
payComfirm(event){ |
||||
|
console.log("支付密码为:", event); |
||||
|
this.show_pay = false; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped="scoped"> |
||||
|
.content{ |
||||
|
padding: 0 32rpx; |
||||
|
} |
||||
|
.next-btn{ |
||||
|
width: 550rpx; |
||||
|
height: 100rpx; |
||||
|
background: #15716E; |
||||
|
border-radius: 50rpx; |
||||
|
position: fixed; |
||||
|
bottom: 10vh; |
||||
|
left: calc(50% - 275rpx); |
||||
|
line-height: 100rpx; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
.list{ |
||||
|
height: 106rpx; |
||||
|
width: 100%; |
||||
|
border-bottom: 1rpx solid #e5e5e5; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
&:nth-child(2n){ |
||||
|
margin-top: 30rpx; |
||||
|
} |
||||
|
.input{ |
||||
|
width: 540rpx; |
||||
|
height: 80rpx; |
||||
|
font-size: 32rpx; |
||||
|
} |
||||
|
.input-code{ |
||||
|
width: 430rpx; |
||||
|
} |
||||
|
.clear{ |
||||
|
padding: 20rpx; |
||||
|
} |
||||
|
.code{ |
||||
|
min-width: 180rpx; |
||||
|
max-width: 220rpx; |
||||
|
height: 64rpx; |
||||
|
padding: 0 4rpx; |
||||
|
font-size: 24rpx; |
||||
|
color: #15716E; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
border-radius: 32rpx; |
||||
|
border: 2rpx solid #15716E; |
||||
|
} |
||||
|
.active-bg{ |
||||
|
background: #efefef; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,130 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<lf-nav title="旧手机号验证" :showIcon="true"></lf-nav> |
||||
|
<view class="content"> |
||||
|
<view class="list"> |
||||
|
<view class="lf-flex"> |
||||
|
<view class="lf-font-28 lf-color-black" style="width: 140rpx;">旧手机号</view> |
||||
|
<input class="input" placeholder="请输入手机号" v-model="phone" maxlength="11" /> |
||||
|
</view> |
||||
|
<view class="clear" v-if="phone.length" @click="phone = ''"> |
||||
|
<text class="lf-iconfont icon--"></text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="list"> |
||||
|
<view class="lf-flex"> |
||||
|
<view class="lf-font-28 lf-color-black" style="width: 140rpx;">验证码</view> |
||||
|
<input class="input input-code" placeholder="请输入验证码" maxlength="8" v-model="code" /> |
||||
|
</view> |
||||
|
<view class="code" :class="{'active-bg': is_code}" @click="getCode"> |
||||
|
<text>{{ is_code ? num +'秒后重新获取' : '获取验证码' }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<button class="next-btn" hover-class="lf-opacity" @click="next">下一步</button> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return { |
||||
|
phone: '', |
||||
|
code: '', |
||||
|
is_code: false, |
||||
|
timer: null, |
||||
|
num: 10 |
||||
|
} |
||||
|
}, |
||||
|
onLoad(){ |
||||
|
|
||||
|
}, |
||||
|
onUnload(){ |
||||
|
if(this.timer){ |
||||
|
clearInterval(this.timer); |
||||
|
this.timer = null; |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
getCode(){ |
||||
|
if(this.is_code) return; |
||||
|
this.is_code = true; |
||||
|
if(this.timer){ |
||||
|
clearInterval(this.timer); |
||||
|
this.timer = null; |
||||
|
} |
||||
|
console.log("测试重复点击", Math.random()) |
||||
|
// TODO 在此发送网络请求 |
||||
|
this.timer = setInterval(() => { |
||||
|
this.num--; |
||||
|
if(this.num <= 0){ |
||||
|
clearInterval(this.timer); |
||||
|
this.timer = null; |
||||
|
this.num = 10; |
||||
|
this.is_code = false; |
||||
|
} |
||||
|
}, 1000); |
||||
|
}, |
||||
|
next(){ |
||||
|
// this.$url('/pages/user/my/setPassword', {type: 'redirect'}); |
||||
|
this.$url('/pages/user/my/setPassword'); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped="scoped"> |
||||
|
.content{ |
||||
|
padding: 0 32rpx; |
||||
|
} |
||||
|
.next-btn{ |
||||
|
width: 550rpx; |
||||
|
height: 100rpx; |
||||
|
background: #15716E; |
||||
|
border-radius: 50rpx; |
||||
|
position: fixed; |
||||
|
bottom: 10vh; |
||||
|
left: calc(50% - 275rpx); |
||||
|
line-height: 100rpx; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
.list{ |
||||
|
height: 106rpx; |
||||
|
width: 100%; |
||||
|
border-bottom: 1rpx solid #e5e5e5; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
&:nth-child(2n){ |
||||
|
margin-top: 30rpx; |
||||
|
} |
||||
|
.input{ |
||||
|
width: 380rpx; |
||||
|
height: 80rpx; |
||||
|
font-size: 32rpx; |
||||
|
margin-left: 50rpx; |
||||
|
} |
||||
|
.input-code{ |
||||
|
width: 290rpx; |
||||
|
} |
||||
|
.clear{ |
||||
|
padding: 20rpx; |
||||
|
} |
||||
|
.code{ |
||||
|
min-width: 180rpx; |
||||
|
max-width: 220rpx; |
||||
|
height: 64rpx; |
||||
|
padding: 0 4rpx; |
||||
|
font-size: 24rpx; |
||||
|
color: #15716E; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
border-radius: 32rpx; |
||||
|
border: 2rpx solid #15716E; |
||||
|
} |
||||
|
.active-bg{ |
||||
|
background: #efefef; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue