Leadfyy.co
/
ec.uniapp-master
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'master' of http://8.134.10.79:3000/Leadfyy.co/ec.uniapp-master

master
Enzo 4 years ago
parent
6bdc17b9f7 fd2c940091
commit
ee342f3610
13 changed files with 1234 additions and 33 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. 235
      components/lf-jpCoded/lf-jpCoded.vue
  2. 80
      components/lf-payPassword/lf-payPassword.vue
  3. 101
      components/lf-seckill/lf-seckill.vue
  4. 44
      pages.json
  5. 8
      pages/index/index/index.vue
  6. 138
      pages/point/detail/detail.vue
  7. 26
      pages/point/rule/rule.vue
  8. 22
      pages/user/agreement/agreement.less
  9. 51
      pages/user/agreement/agreement.vue
  10. 123
      pages/user/member/service.vue
  11. 173
      pages/user/my/myEventRegistrationList.vue
  12. 136
      pages/user/my/setPassword.vue
  13. 130
      pages/user/my/verificationPhone.vue

235
components/lf-jpCoded/lf-jpCoded.vue
View File

@ -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>

80
components/lf-payPassword/lf-payPassword.vue
View File

@ -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>

101
components/lf-seckill/lf-seckill.vue
View File

@ -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>

44
pages.json
View File

@ -166,7 +166,7 @@
{
"path": "pages/user/agreement/agreement",
"style": {
"navigationBarTitleText": "关于果酱",
"navigationBarTitleText": "关于我们",
"backgroundColor": "#fff"
}
},
@ -741,6 +741,48 @@
"navigationBarTitleText": "分类",
"navigationStyle": "custom"
}
},
{
"path" : "pages/user/my/verificationPhone",
"style" : {
"navigationBarTitleText": "旧手机号验证",
"navigationStyle": "custom"
}
},
{
"path" : "pages/user/my/setPassword",
"style" : {
"navigationBarTitleText": "设置密码",
"navigationStyle": "custom"
}
},
{
"path" : "pages/point/detail/detail",
"style" : {
"navigationBarTitleText": "积分",
"navigationStyle": "custom"
}
},
{
"path" : "pages/point/rule/rule",
"style" : {
"navigationBarTitleText": "积分规则",
"navigationStyle": "custom"
}
},
{
"path" : "pages/user/member/service",
"style" : {
"navigationBarTitleText": "会员服务",
"navigationStyle": "custom"
}
},
{
"path" : "pages/user/my/myEventRegistrationList",
"style" : {
"navigationBarTitleText": "我的报名",
"navigationStyle": "custom"
}
}
],
"globalStyle": {

8
pages/index/index/index.vue
View File

@ -90,6 +90,10 @@
<view class="lf-activity" v-if="item.name == 'micro_page_componet_nav' && item.value && item.value.length" @click="$msg('活动页入口')">
<image src="https://picsum.photos/200" mode="aspectFill"></image>
</view>
<!-- TODO 新做秒杀模块 -->
<view v-if="item.name == 'micro_page_componet_nav' && item.value && item.value.length">
<lf-seckill></lf-seckill>
</view>
<!-- TODO 广告活动模块 -->
<view v-if="item.name == 'micro_page_componet_nav' && item.value && item.value.length">
<lf-multi-column-ad></lf-multi-column-ad>
@ -394,6 +398,7 @@
import lfShopGoodsCard from '@/components/lf-shopGoodsCard/lf-shopGoodsCard.vue';
import lfWaterfall from '@/components/lf-waterfall-shopdetails/lf-waterfall.vue';
import lfMultiColumnAd from '@/components/lf-multiColumnAd/lf-multiColumnAd.vue';
import lfSeckill from '@/components/lf-seckill/lf-seckill.vue';
var app = getApp();
export default {
data() {
@ -503,7 +508,8 @@
lfIndexShopMatrix,
lfShopGoodsCard,
lfWaterfall,
lfMultiColumnAd
lfMultiColumnAd,
lfSeckill
},
onShow(e) {

138
pages/point/detail/detail.vue
View File

@ -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>

26
pages/point/rule/rule.vue
View File

@ -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>

22
pages/user/agreement/agreement.less
View File

@ -1,9 +1,20 @@
@import '../../../common/css/global';
.agreement_index{
padding:10px 0 0 0 ;
// padding:10px 0 0 0;
padding: 30rpx 32rpx;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
flex-direction: column;
.logo{
width: 300rpx;
height: 300rpx;
margin-bottom: 50rpx;
border-radius: 10rpx;
}
.item{
background-color: #FFFFFF;
padding: 0 15px;
display:flex;
align-items: center;
justify-content: space-between;
@ -11,11 +22,12 @@
line-height: 44px;
color:#999999;
font-size: 14px;
width: 100%;
.txt{
color: #333333;
font-weight: 600;
font-size: 32rpx;
color: #222222;
font-weight: bold;
}
}
.mask {
position: fixed;

51
pages/user/agreement/agreement.vue
View File

@ -1,36 +1,30 @@
<template>
<div class="agreement_index">
<div class="item mx-1px-bottom" @tap="chageAgreement('privite')">
<div class="txt">
隐私协议
</div>
<div class="rigth iconfont icon--xiangyoujiantou">
</div>
</div>
<div class="item" @tap="chageAgreement('serve')">
<div class="txt">
服务协议
</div>
<div class="rigth iconfont icon--xiangyoujiantou">
</div>
</div>
<view class="mask" v-if="showAgreement">
<view class="agreement_index">
<image src="https://picsum.photos/seed/picsum/200/300" class="logo"></image>
<view class="item" @tap="chageAgreement('privite')">
<view class="txt">隐私协议</view>
<view class="rigth lf-iconfont icon--1"></view>
</view>
<view class="greement-box" v-if="showAgreement">
<view class="title mx-1px-bottom">
{{message}}
<view class="item" @tap="chageAgreement('serve')">
<view class="txt">服务协议</view>
<view class="rigth lf-iconfont icon--1"></view>
</view>
<view class="item" @click="dial">
<view class="txt">客服电话</view>
<view class="rigth">
<text class="lf-m-r-14">0351-8378888</text>
<text class="lf-iconfont icon--1"></text>
</view>
</view>
<view class="mask" v-if="showAgreement"></view>
<view class="greement-box" v-if="showAgreement">
<view class="title mx-1px-bottom">{{message}}</view>
<view class="content">
<u-parse :content="contents" />
</view>
<view class="btn mx-1px-top" @tap="chageAgreement">
确定
</view>
<view class="btn mx-1px-top" @tap="chageAgreement">确定</view>
</view>
</div>
</view>
</template>
<script>
@ -80,6 +74,11 @@
});
},
dial(){
uni.makePhoneCall({
phoneNumber: '1343344444'
})
}
}
}

123
pages/user/member/service.vue
View File

@ -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>

173
pages/user/my/myEventRegistrationList.vue
View File

@ -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>

136
pages/user/my/setPassword.vue
View File

@ -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>

130
pages/user/my/verificationPhone.vue
View File

@ -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