w-front-end / select_good · Files

<template>
    <div class="records_back">
        
        <!--返回按钮-->
        <div id="aaa" class="title_box" :style="'padding-top: ' + (($parent.top.value / 2) + 8) + 'px'" >
            <div class="title">
                
                <!--返回按钮-->
                <img @click="goback" class="goback" src="static/img/icon_back.png" />
                <div class="text">{{ title }}</div>
            </div>
        </div>

        <!-- 占位 -->
        <div id="bbb" class="title_box_lh" :style="'padding-top: ' + (($parent.top.value / 2) + 8) + 'px'"></div>
        
        <div class="com_box" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" :infinite-scroll-distance="list.length">
            
            <div @click="jumpOrderDes(item)" class="item_box" v-for="(item, index) in list" :key="index">
                <img v-lazy="item.simg" src="item" alt="" />
                <div class="right">
                    <div class="name">{{item.title}}</div>
                    <div v-show="item.address_name && item.address_address && item.address_phone" class="address_name">
                        收货人: <span> {{item.address_name}}</span> <span> {{resetPhone(item.address_phone)}}</span> <span> {{item.address_address}}</span>
                    </div>
                    <div v-show="item.price || item.total" class="exchange_type">
                        <span v-show="item.total && $route.query.type==3">{{item.total}}积分</span>
                        <span class="灰色" v-show="item.total && $route.query.type==7">{{item.total}}健康值</span>
                        <span v-show="item.price>0"> + {{item.price}}元</span>          
                    </div>
                    <div class="exchange_time">
                        兑换时间 {{item.create_time * 1000 | datetime('yyyy-MM-dd hh:mm:ss')}}
                    </div>
                    <div v-show="item.shop_type == 1 && !item.address_name && !item.address_address && !item.address_phone" class="btn-box">
                        
                        <!-- 需要填写地址状态 -->
                        <!-- <div @click.stop="addAddressInfo(item)" class="btn">
                            填写地址 
                            <img src="static/img/red_right_icon.png" alt=""/>
                        </div> -->
                        
                        <!-- 已填写地址等待发货状态 -->
                        <div v-show="item.sendtime && item.sendtime>0" class="look_logistics">查看物流</div>
                    </div>
                    <div v-show="item.shop_type == 4" class="btn-box">
                        
                        <!-- 已填写地址等待发货状态 -->
                        <div class="gray" v-show="item.sendtime && item.sendtime>0">已领取</div>
                        <div class="look_logistics" v-show="item.sendtime && item.sendtime==0">确认领取</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 暂无记录展示 -->
        <div v-show="list.length == 0 && isCall" class="no_gift_tip">
            <img src="static/img/no_gift_tip.png" alt=""/>
            <div class="text">暂无订单</div>
        </div>
        <div v-show="list.length>0 && isMore ==0" class="is_more">
            没有更多了
        </div>
        
        <!-- 地址信息组件 -->
        <!-- <app-address-toast ref="itemsInfo" @toUpdate="updateAddressInfo" v-show="pointsToast_control"></app-address-toast> -->
    </div>
</template>

<script>
// 引入组件
import { Toast, Indicator } from "mint-ui";
// import appAddressToast from "@/components/appAddressToast/appAddressToast"; 
export default {
  data () {
    return {
      title: "", // 标题
      list: [], // 订单列表记录列表
      page: 0,
      isMore: 1, // 0没有更多1有更多
      addressInfo: null, // 暂存已选商品发货地址信息
      isCall: false, // 是否调用接口
      // pointsToast_control: this.$route.query.pointsToast_control,
    }
  },
  //部件
  components: {
    // appAddressToast
  },
  //静态
  props: [
  ],
  //对象内部的属性监听，也叫深度监听
  watch: {
  },
  //属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  computed: {
  },
  //方法表示一个具体的操作，主要书写业务逻辑；
  methods: {
    // 跳转原生商品详情页
    jumpOrderDes (item) {
      if (item.shop_type == 1) {  // 1实物 2是虚拟商品 3红包 && item.address_name && item.address_phone && item.address_address        
        // 判断APP内
        if (this.isCNLive.value) {
          // （判断app内是否有该方法）
          if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.jumpOrderDes) {
            // 跳转到原生的任务列表
            window.webkit.messageHandlers.jumpOrderDes.postMessage({ body: { orderId: item.price>0?item.order_id:item.id, type: item.price>0? 4 :1 } })
          } else if (window.obj && window.obj.jumpOrderDes) {
            // 跳转到原生的任务列表
            window.obj.jumpOrderDes(JSON.stringify({ orderId:item.price>0?item.order_id:item.id, type: item.price>0? 4 :1}));
          }
        }
      } else if (item.shop_type == 3) {
        // 虚拟商品
        // 显示查看地址弹框
        let options = {
          message: "付费音频已存入您的账户，可前往“我的”—“我的付费内容”—“已购内容收听”",
          messageAlign: "center",
          confirmButtonText: "我知道了",
          confirmButtonCallback: null,
          confirmButtonCallback: this.jumpType,
          params:item.shop_type
        };
        this.$set(this.$parent, "showOptions", options);
        // 显示通用浮层
        this.$parent.$refs.showModal.showLayer();
      } else if (item.shop_type == 2) {
        // 虚拟商品
        // 显示查看地址弹框
        let options = {
          message: "红包已存入您的账户，可前往“我的”—”我的卡券查看”",
          messageAlign: "center",
          confirmButtonText: "我知道了",
          confirmButtonCallback: null,
        };
        this.$set(this.$parent, "showOptions", options);
        // 显示通用浮层
        this.$parent.$refs.showModal.showLayer();
      } else if (item.shop_type == 4 && item.sendtime == 0) {
        // 线下领取商品
        // 校验登录
        if (this.$parent.checkLogin()) {
          // 提示用积分值兑换兑换
          let options = {
            title: "",
            message: "确认领取？",
            confirmButtonText: "确定",
            confirmButtonCallback: this.finishLuckIntegralOrder,
            showCancelButton: true,
            cancelButtonText: "取消",
            params:item
          };
          // 调用showModal层参数
          this.$set(this.$parent, "showOptions", options);
          // 显示通用浮层
          this.$parent.$refs.showModal.showLayer();
        }
      }
    },

    /**
     * 确认领取
     * @param {object} item [订单信息]
     */
    finishLuckIntegralOrder(item) {
      
      // 加载中提示
      Indicator.open("确认中...");
        
        // 请求接口
        this.http("/Api/" + this.getApiVersion().LuckDraw + "/finishLuckIntegralOrder", {
          id: item.id,
          uid: this.getStore("uid")
        }, this.finishLuckIntegralOrderCallback, {
          method: "POST",
          item
        });
    },
    
    /**
     * 确认领取回调
     * @param {Object} res [服务器返回数据]
     * @param {Object} ext [扩展参数]
     */
     finishLuckIntegralOrderCallback (res, ext) {

      console.log('finishLuckIntegralOrderCallback', res, ext);

      // 加载完成
      Indicator.close();

      // 提示标题
      let title = '';

      // 返回处理
      if (res.code == 200) {
        
        // 领取成功
        title = '领取成功';

        // 设置领取成功状态
        ext.item.sendtime = new Date().getTime();
      } else {

        // 领取失败
        title = '领取失败';
      }

      // 显示查看地址弹框
      let options = {
          title: title,
          message: "",
          messageAlign: "center",
          confirmButtonText: "我知道了",
          confirmButtonCallback: ""
        };

        this.$set(this.$parent, "showOptions", options);

        // 显示通用浮层
        this.$parent.$refs.showModal.showLayer();
     },

    // 填写地址
    // addAddressInfo (item) {
    //   // 如果是实物弹起填写地址弹窗
    //   this.pointsToast_control = true;
    //   // 礼品兑换弹框派发
    //   this.$refs.itemsInfo.getItemInfo(item, item.id);
    // },
    // 填写完地址回调
    // updateAddressInfo (orderInfo, addressInfo) {
    //   console.log(orderInfo);
    //   this.list.forEach(item => {
    //     let obj = item;
    //     for (let key in obj) {
    //       if (item.id == orderInfo.id) {
    //         this.$set(item, "address_name", addressInfo.name);
    //         this.$set(item, "address_phone", addressInfo.phone);
    //         this.$set(item, "address_address", addressInfo.address);
    //       }
    //     }
    //   });
    // },
      // type=2跳转原生优惠券列表3跳转原生购买内容列表
    jumpType(type){
        // 判断APP内
      if (this.isCNLive.value) {
        if(type == 2){
          // （判断app内是否有该方法）
          if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.jumpCoupon) {
            // 跳转到优惠券列表
            window.webkit.messageHandlers.jumpCoupon.postMessage({ body: {} });
          } else if (window.obj && window.obj.jumpCoupon) {
            // 跳转到优惠券列表
            window.obj.jumpCoupon();
          }
        }else if(type == 3){
           // （判断app内是否有该方法）
          if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.JumpToPaidContent) {
            // 跳转到付费内容
            window.webkit.messageHandlers.JumpToPaidContent.postMessage({ body: {} });
          } else if (window.obj && window.obj.JumpToPaidContent) {
            // 跳转到付费内容
            window.obj.JumpToPaidContent();
          }
        }
      }
    },
    // 下拉刷新
    loadMore () {
      this.loading = true;
      this.page++;
      this.getmyLuckDraw(this.page);
    },

    /**
     * 获取订单列表
     * @param {String} page [页码]
     */
    getmyLuckDraw(page) {

      // 判断是否有更多
      if (this.isMore == 1) {
        
        // 加载中提示
        Indicator.open("加载中...");
        
        // 请求接口
        this.http("/Api/" + this.getApiVersion().LuckDraw + "/myLuckIntegralOrder", {
          uid: this.getStore("uid"),
          page: page,
          type: this.$route.query.type // 1亲子嘉年华 2 康疫健步 3 积分商城 4 脐橙 7 健康商城 11 积分兑换订单列表
        }, this.myLuckDrawCallback, {
          method: "POST"
        });
      }
    },

    /**
     * 获取抽奖记录信息回调
     * @param {object} res [服务器返回数据]
     * @param {object} ext [扩展参数]
     */
    myLuckDrawCallback (res, ext) {
      
      this.loading = false;
      
      // 加载完成
      Indicator.close();
      this.isCall = true;
      
      // 返回处理
      if (res.code == 200) {
        // 解构数据
        let { data: datas } = res;
        if (datas.list.length == 0) {
          this.isMore = 0;
        } else {
          
          /* 获取积分兑换订单数据 开始 */
          for (let i = 1; i <= datas.list.length; i++) {
            this.list.push(datas.list[i - 1]);
          }
        }

        /* 获取积分兑换订单数据 结束 */
      } else if (res.code == 400) {
        
        // 获取订单失败
        Toast(res.message);
      } else {
        
        // 获取订单失败
        Toast("获取订单失败");
      }
    },
    /**
         * 后退
         */
    goback () {

      // 判断是否有处理函数
      if (typeof this.$parent.back === 'function') {

        // 后退
        this.$parent.back();
      } else {

        // 后退
        window.history.go(-1);
      }
    },
    /**
    * app选中地址回选
    * @param {Object} addressInfo [服务器返回数据]
    */
    appSelectAddressCallback (addressInfo) {
      if (this.isAndroid.value) {
        this.$refs.itemsInfo.getAppAddressInfo(addressInfo);
      } else {
        if (addressInfo) {
          this.$refs.itemsInfo.getAppAddressInfo(JSON.parse(addressInfo));
        } else {
          this.$refs.itemsInfo.getAppAddressInfo();
        }
      }
    },
    // 隐藏号码中间四位
    resetPhone(phone) {
      var str = String(phone)
      var len = str.length;
      if (len >= 7) {
          var reg = str.slice(-7, -3)
          return str.replace(reg, "****")
      } else if (len < 7 && len >= 6) {
          //1234567
          var reg = str.slice(-4, -2)
          return str.replace(reg, "**")
      }
    }
  },
  //请求数据
  created () {
    // 设置标题
    this.$set(this, "title", "我的订单");

    if (this.isiPhone.value || this.isiPad.value) {
      this.pointsToast_control = this.$route.query.pointsToast_control;
    } else {
      let ext = window.localStorage.getItem("ext");
      this.pointsToast_control = this.getParameterByName(
        "pointsToast_control",
        ext
      );
    }
  },
  //对象内部的属性监听，也叫深度监听
  head: {
    title () {
      return {
        inner: this.title
      }
    }
  },
  watch: {
    // 设置页面标题
    title (newVal) {
      if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
        this.$iFrame.insertIFrame(newVal);
      } else {
        this.$emit("updateHead");
      }
    }
  },
  mounted () {
    // 地址回选原生回调
    var that = this;
    window["appSelectAddressCallback"] = function (result) {
      that.appSelectAddressCallback(result);
    };
    // if (this.plat == "i") {
    //   var that = this;
    //   function resolution (data) {
    //     that.appSelectAddressCallback();
    //   }
    //   this.$bridge.registerHandler("appSelectAddressCallback", function (
    //     data,
    //     responseCallback
    //   ) {
    //     resolution(data);

    //     responseCallback(data);
    //   });
    // } else if (this.plat == "a") {

    // }
    // 页面显示监听 
    document.addEventListener('visibilitychange', () => {
      // 页面显示出来了
      if (document.hidden === false) {
       this.list = []; // 中奖记录列表
       this.page = 0;
       this.isMore = 1; // 0没有更多1有更多
       this.isCall = false;
       this.loadMore();
      }
    });
  }
}
</script>

<style rel="stylesheet/less" scoped lang="less">
@import 'pointsExchangeRecords';
</style>