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

修复确认订单页面渲染报错，更换密码输入组件并优化样式

master
邓平艺 4 years ago
parent
6febd2cdbc
commit
0c6528d6c4
4 changed files with 35 additions and 264 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. 10
      components/lf-payPassword/lf-payPassword.vue
  3. 38
      components/smh-pwd/smh-pwd.vue
  4. 14
      pages/order/confirm/confirm.vue

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

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

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

@ -3,8 +3,7 @@
<view class="content">
<view class="title">{{ title }}</view>
<view class="password">
<lf-jp-coded :width="686" @inputVal="inputVal"></lf-jp-coded>
<!-- <smh-pwd :unit="6" :focus="true" :ontime="true" @change="inputVal"></smh-pwd> -->
<smh-pwd :unit="6" :focus="true" :ontime="true" @change="inputVal"></smh-pwd>
</view>
<view class="lf-flex lf-m-t-45 lf-row-center" v-if="showCountdown">
<view class="lf-font-24 lf-m-r-10" style="color:#FF9D9D">
@ -28,13 +27,11 @@
<script>
import countdownTime from '@/components/uni-countdown/uni-countdown';
import lfJpCoded from '@/components/lf-jpCoded/lf-jpCoded.vue'
// import smhPwd from '@/components/smh-pwd/smh-pwd.vue';
import smhPwd from '@/components/smh-pwd/smh-pwd.vue';
export default {
components: {
lfJpCoded,
countdownTime,
// smhPwd
smhPwd
},
props: {
title: {
@ -64,7 +61,6 @@
this.$emit('dateFinish');
},
inputVal(event){
console.log("11111", event)
this.code = event;
},
comfirm(){

38
components/smh-pwd/smh-pwd.vue
View File

@ -2,11 +2,22 @@
<view>
<view class="action">
<view class="pwd" @click="changeStatus">
<view v-for="(item,index) in unit" :class="{pwd1:pwd.length>=(index+1)}" class="number"></view>
<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" />
<input :maxlength="unit"
@input="change1"
v-model="pwd"
v-show="true"
type="number"
:focus="inputStatus"
@blur="inputStatus = false"
@focus="inputStatus = true"
/>
</view>
</view>
</template>
@ -52,27 +63,24 @@
</script>
<style lang="scss" scoped>
.action{
width:690rpx;
width:686rpx;
margin: 0 auto;
.pwd{
width:100%;
height: 80rpx;
height: 100rpx;
margin: 20rpx auto;
border: 1px solid #e5e5e5;
display: flex;
margin-bottom: 40rpx;
justify-content: space-between;
.number{
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex: 1;
width: 100rpx;
position: relative;
border-right: 1px solid #e5e5e5;
&:last-child{
border: 0;
}
border: 1rpx solid #979797;
border-radius: 5rpx;
}
.pwd1{
&::after{
@ -83,11 +91,9 @@
border-radius: 50%;
background-color: #000;
}
// &:nth-last-child{
// &::after{
// }
// }
}
.docus-border{
border: 4rpx solid #15716E;
}
}
}

14
pages/order/confirm/confirm.vue
View File

@ -44,7 +44,7 @@
暂无收货地址,请前往添加
</view>
</view>
<view class="card goods">
<view class="card goods" v-if="$isRight(order_detail.order) && $isRight(order_detail.order.items)">
<view @click="$url('/pages/shop/shopdetail?id='+ order_detail.order.brand.id)">
<text class="lf-iconfont icon-Group- lf-font-30"></text>
<text class="shop-name">{{ order_detail.order.brand.name }}</text>
@ -169,7 +169,7 @@
token: '',
address: {},
address_id: null,
order_detail: {coupons: []},
order_detail: {},
show_coupon: false,
coupon_index: null,
goods_type: 1,
@ -179,10 +179,14 @@
},
computed: {
showCouponTitle(){
let order_detail = this.order_detail;
if(typeof order_detail.coupons == 'undefined'){
order_detail.coupons = [];
}
if(this.coupon_index != null){
return this.order_detail.coupons[this.coupon_index].discount.title;
return order_detail.coupons[this.coupon_index].discount.title;
}else{
if(this.order_detail.coupons.length){
if(order_detail.coupons.length){
return '不使用优惠券';
}else{
return '暂无可用优惠券';
@ -249,7 +253,7 @@
// 计算金额
calcAmount(){
let detail = this.order_detail;
let items = detail.order.items;
let items = detail.order.items || [];
let itemsPrice = new Bigc(0);
// 所有商品总计
items.map(item => {

Write Preview
Loading…
Cancel
Save