打赏的页面

xiaoxiao2021-02-28  80

<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>

            <a href="javascript:void(0)" @tap="other" class="other">其他金额</a>

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

}

}

转载请注明原文地址: https://www.6miu.com/read-80261.html

最新回复(0)