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