w-front-end / select_good · Files

<template>
<div class="records_back">
    <!-- 占位 -->
    <div  class="title_box_lh" :style="'padding-top: ' + (($parent.top.value)+8) + 'px'">

    </div>
    <!--返回按钮-->
    <div class="title_box" :style="'padding-top: ' + (($parent.top.value)+8) + 'px'" >
        <div class="title">      <!--返回按钮-->
          <img  @click="goback"
              class="goback" src="static/img/icon_back.png" />
          <div class="text">兑换记录</div>
        </div>
    </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">
            收货人: {{item.address_name}}{{item.address_phone}}{{item.address_address}}
          </div>
          
          <div class="exchange_type">
            <!-- 500积分+9.9元             -->
          </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>
        </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 {
      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 && item.address_name && item.address_phone && item.address_address) {  // 1实物 2是虚拟商品 3红包        
        // 判断APP内
        if (this.isCNLive.value) {
          // （判断app内是否有该方法）
          if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.jumpOrderDes) {
            // 跳转到原生的任务列表
            window.webkit.messageHandlers.jumpOrderDes.postMessage({ body: { orderId: item.id, type: 1 } })
          } else if (window.obj && window.obj.jumpOrderDes) {
            // 跳转到原生的任务列表
            window.obj.jumpOrderDes(JSON.stringify({ orderId: item.id, type: 1 }));
          }
        }
      } else if (item.shop_type == 3) {
        // 虚拟商品
        // 显示查看地址弹框
        let options = {
          message: "付费音频已存入您的账户，可前往“我的”—“我的付费内容”—“已购内容收听”",
          messageAlign: "center",
          confirmButtonText: "我知道了",
          confirmButtonCallback: null,
        };
        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();
      }
    },
    // 填写地址
    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);
          }
        }
      });
    },
    // 下拉刷新
    loadMore () {
      this.loading = true;
      this.page++;
      this.getmyLuckDraw(this.page);
    },
    // 抽奖记录
    /**
     * 获取活动详情页信息
     * @param {string} id [活动id]
     * * @param {string} uid [用户id]
     */
    getmyLuckDraw (page) {
      if (this.isMore == 1) {
        // 加载中提示
        Indicator.open("加载中...");
        // 请求接口
        this.http(
          "/Api/" + this.getApiVersion().LuckDraw + "/myLuckIntegralOrder",
          {
            uid: this.getStore("uid"),
            page: page,
            type: "3" // 1亲子嘉年华 2 康疫健步 3 积分商城
          },
          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();
        }
      }
    },
  },
  //请求数据
  created () {
    if (this.isiPhone.value) {
      this.pointsToast_control = this.$route.query.pointsToast_control;
    } else {
      let ext = window.localStorage.getItem("ext");
      this.pointsToast_control = this.getParameterByName(
        "pointsToast_control",
        ext
      );
    }
  },
  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") {

    // }
  }
}
</script>

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