소스 검색

Merge branch 'test' of git.oschina.net:yiguanjia/php into test

洪海涛 8 년 전
부모
커밋
dce10d552b
1개의 변경된 파일31개의 추가작업 그리고 15개의 파일을 삭제
  1. 31 15
      www/vue/src/components/recharge.vue

+ 31 - 15
www/vue/src/components/recharge.vue

@@ -5,12 +5,12 @@
 			<div class="recharge-title">充值余额</div>
 			<div class="recharge-title">充值余额</div>
 			<group>
 			<group>
 				<cell
 				<cell
-					:title="('充值有好礼')"
-					is-link
-					value-align="left"
-					:border-intent="false"
-					:arrow-direction="isActive ? 'up' : 'down'"
-					@click.native="isActive = !isActive"></cell>
+						:title="('充值有好礼')"
+						is-link
+						value-align="left"
+						:border-intent="false"
+						:arrow-direction="isActive ? 'up' : 'down'"
+						@click.native="isActive = !isActive"></cell>
 				<p class="slide" :class="isActive?'animate':''">
 				<p class="slide" :class="isActive?'animate':''">
 					<span>充值1000--赠送:一挂式空调清洗</span>
 					<span>充值1000--赠送:一挂式空调清洗</span>
 					<span>充值3000--赠送:一床一沙发除螨</span>
 					<span>充值3000--赠送:一床一沙发除螨</span>
@@ -21,10 +21,10 @@
 			<ul class="ad-hide list-content list-recharge" style="padding-top: 5px;padding-bottom: 5px;padding-left: 10%;">
 			<ul class="ad-hide list-content list-recharge" style="padding-top: 5px;padding-bottom: 5px;padding-left: 10%;">
 				<li v-for="(item,index) in rechargeLists" class="media" @click="btnRechargeList(item, index)"
 				<li v-for="(item,index) in rechargeLists" class="media" @click="btnRechargeList(item, index)"
 				    v-bind:class="{on: index === isShow}">
 				    v-bind:class="{on: index === isShow}">
-					<div v-if="item.denomination ===1 ">
+					<div v-if="item.denomination ===1 "  >
 						<div class="input-title">其他数额</div>
 						<div class="input-title">其他数额</div>
 						<div class="input-rmb">RMB:</div>
 						<div class="input-rmb">RMB:</div>
-						<input type="text" maxlength="8" name="" v-model="otherAmount" value="otherAmount" class="rechange-input">
+						<input type="text" maxlength="8" name="" v-model="otherAmount" value="otherAmount" class="rechange-input" v-focus="isNum">
 					</div>
 					</div>
 					<div v-else>
 					<div v-else>
 						<div>RMB:{{ item.denomination }}</div>
 						<div>RMB:{{ item.denomination }}</div>
@@ -32,8 +32,8 @@
 				</li>
 				</li>
 			</ul>
 			</ul>
 			<div class="ad-hide" style="text-align: center;clear: both;margin-top: 9rem;"><span style="font-size: 0.6rem">点击立即充值,即表示您已经同意壹管家</span><span
 			<div class="ad-hide" style="text-align: center;clear: both;margin-top: 9rem;"><span style="font-size: 0.6rem">点击立即充值,即表示您已经同意壹管家</span><span
-				style="font-size: 0.6rem;font-weight: 600;display: block;"></span><span style="font-size: 0.6rem;">《<span
-				class="pay-agreement" style="text-decoration: underline;color: #0A246A" @click="activity">充返活动协议</span>》</span>
+					style="font-size: 0.6rem;font-weight: 600;display: block;"></span><span style="font-size: 0.6rem;">《<span
+					class="pay-agreement" style="text-decoration: underline;color: #0A246A" @click="activity">充返活动协议</span>》</span>
 			</div>
 			</div>
 			<div class="btn-add-recharge" @click="btnRecharge">立即去充值</div>
 			<div class="btn-add-recharge" @click="btnRecharge">立即去充值</div>
 			<div style="width: 100%;padding-bottom: 13%;"></div>
 			<div style="width: 100%;padding-bottom: 13%;"></div>
@@ -53,7 +53,8 @@
         isShow: -1,
         isShow: -1,
         rechargeLists: [],
         rechargeLists: [],
         rechargeItem: {},
         rechargeItem: {},
-        otherAmount: ''
+        otherAmount: '',
+        isNum: false
       }
       }
     },
     },
     components: {
     components: {
@@ -69,6 +70,18 @@
     created () {
     created () {
 //      console.log(this.rechargeLists)
 //      console.log(this.rechargeLists)
     },
     },
+    //  自定义指令
+    directives: {
+      //  听我瞎bb --north
+      //  focus 对DOM层操作 自定义 v-focus 使用方法 v-focus="value" 传入值进入 focus 中判断 当value为true 时 选中focus
+      focus: {
+        update: function (el, {value}) {
+          if (value) {
+            el.focus()
+          }
+        }
+      }
+    },
     watch: {
     watch: {
       'otherAmount': function (val) {
       'otherAmount': function (val) {
         if (val !== undefined) {
         if (val !== undefined) {
@@ -91,6 +104,8 @@
       btnRechargeList (item, index) {
       btnRechargeList (item, index) {
         if (index !== 4) {
         if (index !== 4) {
           this.otherAmount = ''
           this.otherAmount = ''
+        } else {
+          this.isNum = !this.isNum
         }
         }
         if (this.isShow === index) {
         if (this.isShow === index) {
           this.isShow = -1
           this.isShow = -1
@@ -163,7 +178,7 @@
 	img {
 	img {
 		display: block;
 		display: block;
 	}
 	}
-	
+
 	.recharge-title {
 	.recharge-title {
 		padding-left: 15px;
 		padding-left: 15px;
 		font-size: 20px;
 		font-size: 20px;
@@ -173,7 +188,7 @@
 		text-align: left;
 		text-align: left;
 		margin-bottom: -20px;
 		margin-bottom: -20px;
 	}
 	}
-	
+
 	ul {
 	ul {
 		padding-top: 5px;
 		padding-top: 5px;
 		padding-bottom: 5px;
 		padding-bottom: 5px;
@@ -229,7 +244,7 @@
 			padding: 0;
 			padding: 0;
 		}
 		}
 	}
 	}
-	
+
 	.btn-add-recharge {
 	.btn-add-recharge {
 		width: 80%;
 		width: 80%;
 		clear: both;
 		clear: both;
@@ -242,6 +257,7 @@
 		transition: all 2s;
 		transition: all 2s;
 		margin-top: 10px;
 		margin-top: 10px;
 	}
 	}
+
 	@media (max-width: 320px) {
 	@media (max-width: 320px) {
 		ul {
 		ul {
 			li.media {
 			li.media {
@@ -267,7 +283,7 @@
 			font-size: 15px;
 			font-size: 15px;
 		}
 		}
 	}
 	}
-	
+
 	.animate {
 	.animate {
 		max-height: 9999px;
 		max-height: 9999px;
 		transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
 		transition-timing-function: cubic-bezier(0.5, 0, 1, 0);