sailun
/
sailun-shop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
							<!DOCTYPE html>
<html class="">
<!--STATUS OK-->
<head>
    <meta name="referrer" content="always" />
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <meta name="description" content="">
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" type="text/css" href="css/vant-ui.css" />
    <link rel="stylesheet" type="text/css" href="css/iconfont.css">
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <script src="js/vue.js"></script>
    <script src="js/vant-ui.js"></script>
    <script src="js/main.js"></script>
    <title></title>
</head>
<style>
    .youhuijuan {
        padding-top: 0.86rem;
    }

    .scan {
        position: absolute;
        right: 0.2rem;
        top: 0.2rem;
        width: 0.5rem;
        height: 0.5rem;
    }
</style>

<body>
    <div id="app" v-cloak>
        <div class="pageView youhuijuan mescroll-touch-y mescroll" id="mescroll">
            <div class="title flex jlr a-center" style="top:0rem;z-index:22;padding-top : 0.2rem;padding-bottom:0.1rem;background-color:#fff">
                <div class="item flex a-center j-center" v-for="status in statuses" v-bind:class="chooseStatusData.code == status.code ? 'on' : ''" v-on:click="chooseStatus(status)">{{ status.name }}</div>
            </div>
            <ul>
                <div v-for="(item,index) in list" :key="index">
                    <li class="flex a-center">
                        <div class="youhuiLeft flex a-center j-center">
                            <div class="flex a-end j-center">
                                <em>￥</em>
                                <h2>{{ item.amount }}</h2>
                            </div>
                        </div>
                        <div class="youhuiInfos flex col">
                            <img src="./image/scan.png" class="scan" v-on:click="createCode(item.couponCode)" />
                            <div class="infos">
                                <h2>{{ item.statusName }}</h2>
                                <span>{{ item.couponCode }}</span>
                            </div>
                            <div class="bottom flex a-center jlr" @click="showInfo(index)">
                                <span>详细信息</span>
                                <div class="circle flex a-center j-center"><svg t="1589209216514" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4491" width="12" height="12"><path d="M511.700683 639.423111 191.917496 319.596945 319.830771 319.596945 511.700683 511.715521 703.570595 319.596945 831.48387 319.596945Z" p-id="4492" fill="#ffffff"></path></svg></div>
                            </div>
                        </div>
                    </li>
                    <div class="youhuiFooterss" v-if="item.state">
                        <h4>金额：{{ item.amount }}</h4>
                        <div class="item flex">
                            <p>创建时间: {{ item.createTime }}</p>
                            <p>审核时间: {{ item.auditStatus }}</p>
                        </div>
                        <div class="item flex">
                            <p>使用时间:{{ item.useTime }}</p>
                            <!-- <p>入库码: A93989895393</p> -->
                        </div>
                    </div>
                </div>
                <div v-show="list.length == 0" style="text-align:center">
                  <img src="./image/noData.png" style="margin:2rem auto" />
                </div>
                <div v-show="list.length > 0 && hasOther" style="width:100%;padding : 0.5rem;text-align : center;font-size : 0.3rem">暂无更多数据</div>
            </ul>
            <van-popup v-model="show" style="width:80%;padding-bottom : 0.2rem;text-align:center;padding : 0.1rem">
                <div id="qrcode"></div>
            </van-popup>
        </div>
    </div>
</body>
<link rel="stylesheet" href="./mescroll/mescroll.min.css">
<script type="text/javascript" src="./js/qrcode.min.js"></script>
<script type="text/javascript" src="../script/aui-scroll.js"></script>
<script type="text/javascript" src="./mescroll/mescroll.min.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/httpRequest.js"></script>
<script type="text/javascript" src="../script/vue_plugins.js"></script>
<script type="text/javascript">
    apiready = function() {
        new Vue({
            el: '#app',
            data: {
                list: [],
                userId: '',
                page: 1,
                size: 10,
                frist: 1,
                show: false,
                qrcode: '',
                hasOther : false,
                statuses : [{
                  name : '待审核',
                  code : '0'
                },{
                  name : '已审核',
                  code : '4'
                },{
                  name : '已过期',
                  code : '3'
                }],
                chooseStatusData : {name : '待审核',code : '0'}
            },
            methods: {
                init: function() {
                    this.userId = $api.getStorage('userid');
                    this.getHxList();
                },
                configs: function() {
                  var _this = this;
                  this.frist = 2;
                  this.configDownAndPull("mescroll", function(mescroll) {
                    _this.current = 1;
                    _this.mescroll = mescroll;
                    _this.getHxList(mescroll);
                  }, function(mescroll) {
                    if (_this.current < _this.totalPages) {
                      _this.current = _this.current + 1;
                      _this.getHxList(mescroll, 1);
                    } else {
                      mescroll.endSuccess(_this.size, false);
                    }
                  })
                },
                addMore: function() {
                  var _this = this;
                  if (_this.current < _this.totalPages) {
                    _this.current = _this.current + 1;
                    _this.getHxList(_this.mescroll, 1);
                  } else {
                    _this.hasOther = true;
                  }
                },
                /**
                 *  获取门店核销码列表
                 */
                getHxList: function(mescroll) {
                    var url = "getHxListU",
                        _this = this;
                    var data = {
                        storeId: this.userId,
                        status : this.chooseStatusData.code,
                        url: "json",
                        type: 'body'
                    }
                    this.$post(url, data, function(ret) {
                        if (ret.code == 0 || ret.code == '0') {
                            _this.totalPages = ret.data.pages;
                            _this.list = _this.page == 1 ? ret.data.records : _this.list.concat(ret.data.records);
                            if (mescroll) {
                                mescroll.endSuccess(_this.size, true);
                            }
                            if (_this.frist == 1) {
                                _this.$nextTick(function() {
                                    _this.configs();
                                })
                            }
                        }
                    })
                },
                /**
                 *  配置上拉加载下拉刷新
                 */
                // configs: function() {
                //     var _this = this;
                //     this.frist = 2;
                //     this.configDownAndPull("mescroll", function(mescroll) {
                //         _this.hasOther = false;
                //         _this.page = 1;
                //         _this.getHxList(mescroll);
                //     }, function(mescroll) {
                //         if (_this.page < _this.totalPages) {
                //             _this.page = _this.page + 1;
                //             _this.getHxList(mescroll, 1);
                //         } else {
                //             mescroll.endSuccess(_this.size, false);
                //         }
                //     },false);
                //     this.configBottomRefush(function(){
                //       if (_this.page < _this.totalPages) {
                //           _this.page = _this.page + 1;
                //           _this.getHxList(mescroll, 1);
                //       } else {
                //           // mescroll.endSuccess(_this.size, false);
                //           _this.hasOther = true;
                //       }
                //     })
                // },
                //  展示详细信息
                showInfo: function(index) {
                    this.$set(this.list[index], "state", (this.list[index].state == true ? false : true));
                },
                //  生成二维码
                createCode: function(code) {
                    this.show = true;
                    var _this = this;
                    if (this.qrcode != '') {
                        document.getElementById("qrcode").innerHTML = "";
                    }
                    this.$nextTick(function() {
                        _this.qrcode = new QRCode(document.getElementById("qrcode"), code);
                    })
                },
                //  选择状态
                chooseStatus : function(status){
                  this.chooseStatusData = status;
                  this.getHxList();
                }
            },
            mounted: function() {
                this.init();
            }
        })
    }
</script>

</html>