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

components/lf-jpCoded/lf-jpCoded.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>

components/lf-payPassword/lf-payPassword.vue

@@ -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(){

components/smh-pwd/smh-pwd.vue

@@ -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>
@@ -28,7 +39,7 @@
 		},
 		data(){
 			return {
-				inputStatus:this.focus,
+				inputStatus: this.focus,
 				pwd:"",
 				pwd1:[]
 			}
@@ -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;
 		}
 	}
 }

pages/order/confirm/confirm.vue

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