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