|
三种我都试了,还是没有反应
<body>
<div id="wrap">
<van-swipe :autoplay="3000">
<van-swipe-item v-for="(image, index) in images" :key="index">
<img class="wrap-img" :src=image.image />
</van-swipe-item>
</van-swipe>
<div class="content">
<img class="content-img" src="../../image/home/home-lukuang.png" />
<div class="new-customer">
<div class="nav">
<span class="customer-nav days" v-on:click="onJoinNowClick()"><i class="icon-days"></i><span> 期限20天</span></span>
<span class="customer-nav full" @click="onJoinNowClick()"><i class="icon-full"></i><span> 满标起息</span></span>
<span class="customer-nav ctrl" onclick="joinNowClick()"><i class="icon-days"></i><span> 专业风控</span></span>
</div>
<div class="lucky" v-for="(item, key, index) in newCustomers">
<h4>新手福利<i>{{item.luckyQi}}</i>期</h4>
<div class="lucky-wrap">
<div class="lucky-line1">
<div class="part2 left"><b>{{item.expectYears}}</b><i>%</i><span>期望年化</span></div>
<div class="part2 right"><b>{{item.days}}</b><i>天</i><span>期限</span></div>
<div class="center"></div>
</div>
<div class="lucky-line2">
<span class="remain-money">剩余金额:<b>{{item.remainMoney}}</b> 万元</span>
<span class="percent"><i :style=item.percent></i><b>{{item.moneyPercent}}%</b></span>
</div>
<button class="join-now" type="button" name="button" >立即加入</button>
</div>
</div>
</div>
<div class="new-area">
<h4>新手专区</h4>
<div class="area-wrap">
<div class="area-line" v-for="(area, key, index) in newArea">
<p><span>新手福利 <i>{{area.one}}</i> 期</span><i>新手</i></p>
<div class="bottom">
<div class="bottom-one">
<b>15.0</b>
<i>%</i>
<span>期望年化</span>
</div>
<div class="bottom-two">
<i>20天</i>
<span>期限</span>
</div>
<div class="bottom-three">
<div class="bottom-circle" id="circle">
<van-circle
v-model="area.value"
:rate="area.value"
:speed="100"
size="1.2rem"
:text="area.value.toFixed(0) + '%'"
layer-color="#e6ca8e"
color="#ef6c00"
/>
</div>
</div>
<div class="bottom-four">
<button type="button" name="button">立即加入</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../../script/backpack/api.js"></script>
<script type="text/javascript">
apiready = function() {
var wrap = new Vue({
el: '#wrap',
data: {
injoinStyle: '',
newCustomers: [{
id: '1',
luckyQi: '889',
remainMoney: '3.98',
moneyPercent: '50',
expectYears: '15.0',
days: '20',
percent: "",
},
{
id: '2',
luckyQi: '890',
remainMoney: '3.78',
moneyPercent: '70',
expectYears: '15.0',
days: '20',
percent: "",
},
{
id: '3',
luckyQi: '890',
remainMoney: '3.78',
moneyPercent: '60',
expectYears: '15.0',
days: '20',
percent: "",
}
],
newArea: [{
one: 2356,
value: 0,
a: '',
},
{
one: 15415,
value: 89,
a: '',
b: '',
circleContent: null,
},
{
one: 15415,
value: 89,
a: '',
b: '',
circleContent: null,
},
{
one: 15415,
value: 89,
a: '',
b: '',
circleContent: null,
}],
images: [{
image: '../../image/home/home-img.jpg'
},
{
image: '../../image/home/home-img.jpg'
},
{
image: '../../image/home/home-img.jpg'
},
{
image: '../../image/home/home-img.jpg'
}]
},
mounted: function() {
for(var i = 0; i <this.newCustomers.length; i++) {
this.newCustomers.percent = 'width:' + 4.7 * (this.newCustomers.moneyPercent/100) + 'rem;';
}
},
methods: {
onJoinNowClick: function () {
api.alert({
title: 'testtitle',
msg: 'testmsg',
});
console.log('第三了')
}
}
})
}
function joinNowClick() {
api.alert({
title: 'testtitle',
msg: 'testmsg',
}, function(ret, err){
if( ret ){
alert( JSON.stringify( ret ) );
}else{
alert( JSON.stringify( err ) );
}
});
}
</script> |
|