<view v-for="(item,index) in product" :key="item.id" class="flex" :animation="item.animation_data" @click="receive(index,item.id)" v-if="item.staue">
<view class="flex product_price">
<view>¥</view>
<view>{{item.money}}</view>
</view>
<view class="product_cents">
<view class="flex">
僅限{{item.title}}產品使用
</view>
<view>有效期:{{item.start_time}}至{{item.end_time}}</view>
<view>滿{{item.where}}元可以使用</view>
<view>點擊領取> </view>
</view>
</view>
uni.request({
url: that.url_href+'/index/index/youhuilist',
method:'POST',
success: (res) => {
if(res.data.data.length>0){
let arr_data=res.data.data.map((data)=>{
let obj={};
obj.id=data.id;
obj.end_time=data.end_time;
obj.money=data.money;
obj.start_time=data.start_time;
obj.title=data.title;
obj.where=data.where;
obj.staue=true;
obj.animation_data={};
return obj
});
console.log("數據1111111111111111",arr_data)
that.product=arr_data;
}
}
});
// 領取優惠券
receive(index,id){
let that=this;
uni.request({
url: that.url_href+'/index/index/getyouhui',
method:'POST',
data:{
id:id
},
success: (res) => {
console.log("結果",res)
if(res.data.code==1){
uni.showToast({
icon:'none',
title: res.data.msg,
duration: 500
});
that.product[index].animation_data = uni.createAnimation({
duration:500,
timingFunction:'linear',
delay:100
});
that.product[index].animation_data.translateX(that.windowWidth).step();
setTimeout(function(){
that.product[index].staue=false;
},600);
}else{
uni.showToast({
icon:'none',
title: res.data.msg,
duration: 2000
});
}
}
});
}
點擊每個優惠券時,創建動畫,向右移動 ,直至消失
uni-app動畫:https://uniapp.dcloud.io/api/ui/animation?id=unicreateanimationobject