打赏的页面

最新推荐文章于 2024-04-19 21:08:03 发布

肖肖肖丽珠

最新推荐文章于 2024-04-19 21:08:03 发布

阅读量995

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_33769914/article/details/71343995

版权

vue 专栏收录该内容

191 篇文章 5 订阅

订阅专栏

<div class="reward mui-text-center" v-if="show">
           <button type="button" class="mui-btn mui-btn-red" @click="show=false">打赏</button>
           <p>{{dashang.count}}人已打赏</p>
           <div class="zce mui-clearfix" v-for="item in dashang.list">
               <img :src="item.head_url" class="man" />   //这是已经打赏的人的头像
            </div>

</div>

点击上面的打赏按钮，上面的内容隐藏，下面的内容出现。所以你要在这个页面显示的时候才访问这个页面内容所需要的接口。

        <div v-if="show==false" class="rewardmoney mui-text-center">
           <h5 class="mui-text-left">请选择打赏的金额：</h5>
           <span @tap="ward(db.money)" v-for="db in da">{{db.money}}<i>元</i></span>

img.man {
        float: left;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 8px;
    }
    .reward{padding:15px;}
    .reward p{margin:5px auto;}
     .rewardmoney{width:90%;margin:10px auto;}
    .rewardmoney span{padding:8px 10px;border:1px solid #f38200;color:#f38200;margin:1%;border-radius: 5px;font-size:20px;width:88px;display:inline-block;text-align: center;}
    .rewardmoney span i{font-style: normal;font-size:14px;}
    .other{display:block;font-size:14px;}

created() {

   this.$api("Bssong/firstEndImg").then(data => {
               this.dashang=data;
            });
}，

data(){

return {

show:true,//开始显示的

dashang:{
     count:0,list:[]
      },
     da:[]

}

}，

methods：{

ward(num){
               this.$api("Bsfamily/ArticleOrder",{money:num,wid:this.$route.params.id,cid:this.wid}).then(data => {
           wxapi.pay(num, 5);
           });

    other(){
               var vm=this;
               var btnArray=['取消','打赏'];
               mui.prompt("","请输入打赏金额比如:100.00","自定义金额",btnArray,(e)=>{ /注意注意，如果你没有使用es6的语法那么你下面的this.$api就会报错。原始的绿色的地方是这样的function(e)
               if(e.index==1){
                   if(parseFloat(e.value)<=0){
                       return mui.toast("请输入正确的金额！");
                       }

                   else{
                    this.$api("Bsfamily/ArticleOrder",{money:e.value,wid:this.$route.params.id,cid:this.wid}).then(data => { wxapi.pay(e.value,5);});
                     }
                 }
               })
               },

watch: {

      show(m){    //只有在show是false的时候也就是点击了之后才会访问这个接口
               if(m==false){
                   this.$api("Bssay/dsMoney",{},3).then(data => {
             this.da=data;
             });
               }
            }

}