Browse Source
Merge branch 'master' of http://8.134.10.79:3000/Leadfyy.co/ec.uniapp-master
Merge branch 'master' of http://8.134.10.79:3000/Leadfyy.co/ec.uniapp-master
# Conflicts: # pages/shop/goodsdetail.vuemaster
10 changed files with 209 additions and 277 deletions
-
235components/lf-jpCoded/lf-jpCoded.vue
-
8components/lf-payPassword/lf-payPassword.vue
-
105components/smh-pwd/smh-pwd.vue
-
2pages/article/details.vue
-
2pages/business/login/login.vue
-
8pages/index/index/index.vue
-
116pages/order/confirm/confirm.vue
-
6pages/point/shoppingMall/shoppingMall.vue
-
2pages/shop/goodsdetail.vue
-
2pages/user/loginType/loginType.vue
@ -1,235 +0,0 @@ |
|||||
<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,105 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<view class="action"> |
||||
|
<view class="pwd" @click="changeStatus"> |
||||
|
<view v-for="(item,index) in unit" |
||||
|
:class="{pwd1:pwd.length>=(index+1), 'docus-border': (pwd.length == index) && inputStatus}" |
||||
|
class="number"> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="input1"> |
||||
|
<input :maxlength="unit" |
||||
|
@input="change1" |
||||
|
v-model="pwd" |
||||
|
v-show="true" |
||||
|
type="number" |
||||
|
:focus="inputStatus" |
||||
|
@blur="inputStatus = false" |
||||
|
@focus="inputStatus = true" |
||||
|
/> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
props:{ |
||||
|
unit:{ |
||||
|
type:Number, |
||||
|
default:6 |
||||
|
}, |
||||
|
focus:{ |
||||
|
type:Boolean, |
||||
|
default:false |
||||
|
}, |
||||
|
ontime:{ |
||||
|
type:Boolean, |
||||
|
default:false |
||||
|
} |
||||
|
}, |
||||
|
data(){ |
||||
|
return { |
||||
|
inputStatus: this.focus, |
||||
|
pwd:"", |
||||
|
pwd1:[] |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
changeStatus(){ |
||||
|
this.inputStatus=!this.inputStatus |
||||
|
}, |
||||
|
change1(e){ |
||||
|
this.pwd1=String(e.target.value).split('') |
||||
|
if(this.ontime){ |
||||
|
this.$emit('change',e.target.value) |
||||
|
}else{ |
||||
|
if(this.pwd1.length==this.unit){ |
||||
|
this.$emit('change',e.target.value) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.action{ |
||||
|
width:686rpx; |
||||
|
margin: 0 auto; |
||||
|
.pwd{ |
||||
|
width:100%; |
||||
|
height: 100rpx; |
||||
|
margin: 20rpx auto; |
||||
|
display: flex; |
||||
|
margin-bottom: 40rpx; |
||||
|
justify-content: space-between; |
||||
|
.number{ |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
width: 100rpx; |
||||
|
position: relative; |
||||
|
border: 1rpx solid #979797; |
||||
|
border-radius: 5rpx; |
||||
|
} |
||||
|
.pwd1{ |
||||
|
&::after{ |
||||
|
position: absolute; |
||||
|
content: ""; |
||||
|
width: 20rpx; |
||||
|
height: 20rpx; |
||||
|
border-radius: 50%; |
||||
|
background-color: #000; |
||||
|
} |
||||
|
} |
||||
|
.docus-border{ |
||||
|
border: 4rpx solid #15716E; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.input1{ |
||||
|
width: 0; |
||||
|
height: 0; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue