滚动列表插件

推荐插件     mescroll.js  可以在pc与移动端滚动

//网址： http://www.mescroll.com/api.html#mescrollvue


//以下为实际开发时的订单列表页面 可参考
<template>
  <div id="My">
    <div class="userInfo">
      <div class="userLogin">
        <div class="userLogin_left">
          <img src="../assets/icon/icon_avatar.png" class="avatar" />
          <div class="loginStatus" v-if="!isLogin">未登录</div>
          <div class="loginStatus" v-if="isLogin">用户名：{{ mobile }}</div>
        </div>
       
          <template>
            <img @click="$router.push('/set')" style="width: 20px" src="../assets/icon/icon_set.png" alt="" />
            <span @click="$router.push('/set')" style="
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #5a5a5a;
              " class="operation">
              设置
            </span>
          </template>
        </div>
      </div>
      <div class="orderSelect">
        <span :class="i == currentKey ? 'isSelected' : ''" v-for="(item, i) in orderSelectList" @click="orderSwitch(item, i)" :key="item.value">{{ item.name }}
          <div class="underLine" v-show="i == currentKey"></div>
        </span>
      </div>
    </div>

    <div class="NoLogin" v-if="!isLogin">
      <img class="bg" src="../assets/imgs/NoLogin.png" alt="" />
      <div class="tips">您暂未登录，登录后可查看订单</div>
      <nut-button v-show="isWeixin()" style="
          background: linear-gradient(90deg, #ff8040 0%, #ff5040 100%);
          width: 255px;
          display: block;
        " block shape="circle" @click="toLogin">
        去登录
      </nut-button>
    </div>

    <div class="signedIn" v-if="isLogin">
      <div class="noticeBar">
        <img src="../assets/icon/icon__safe.png" alt="" />
        <div>
          如您购买的商品有任何问题，请直接与购买门店联系，门店会为您处理，让您售后无忧！
        </div>
      </div>
      <div v-if="isLoadingOk&&list.length > 0" class="list">

        <!--mescroll滚动区域的基本结构-->
        <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
          <!--内容...-->

          <template v-if="form.status != 2">
            <div class="orderList" v-for="(item, i) in list" :key="i" @click="jumpOrderDetails(item)">
              <div class="title">
                <img class="icon" src="../assets/icon/icon_shop.png" alt="" />
                <span class="title_name overflowLineOne">
                  {{ item.orderItemDtos[0].prodName || '' }}
                </span>

                <span>
                  <span class="font14" :style="StatusObj[item.status].style" v-if="currentKey !== 0">
                    {{ StatusObj[item.status].text }}
                  </span>
                  <span class="arrow-right" style="width: 10px; height: 10px"></span>
                </span>
              </div>
              <div class="content">
                <img class="picture" :src="item.orderItemDtos[0].pic" alt="" />
                <div class="right">
                  <div class="expirationTime" v-if="currentKey === 0">
                    {{ item.orderCouponInfoVo.expirationTime }} 到期
                  </div>
                  <div class="orderTime" v-else>
                    下单时间：{{ item.createTime }}
                  </div>
                  <div class="pickupTime"></div>
                  <div class="payInfo">
                    <span>实付：￥{{ item.actualTotal }}</span>
                    <span>数量：{{ item.productNums }}</span>
                  </div>
                </div>
              </div>
              <div class="btns">
                <div class="left">
                  <div class="del" @click.stop="deleteOrder(item)" v-if="[2, 3, 6].includes(item.status)">
                    <img class="icon_del" src="../assets/icon/icon_delete.png" alt="" />
                    <span>删除</span>
                  </div>
                </div>
                <div class="right">
                  <nut-button v-show="item.status === 1&&currentKey=='0'" @click.stop="jumpMechantList(item.storeApiVoList)" small :style="{
                        color: '#FF5040',
                        background: '#fff',
                        border: '1px solid #FF5040',
                        borderRadius: '2px',
                        overflow: 'hidden',
                        'margin-right': '16px',
                      }">
                    查看门店
                  </nut-button>
                  <nut-button @click.stop="clickHandler(item)" :disabled="disabled" small :style="{
                        color: item.status === 1 ? '#fff' : '#FF5040',
                        background: item.status === 1 ? '#FF5040' : '#fff',
                        border:
                          item.status === 1 ? '#FF5040' : '1px solid #FF5040',
                        borderRadius: '2px',
                        overflow: 'hidden',
                      }">
                    {{ item.status === 1 ? '展示券码' : '再次购买' }}
                  </nut-button>
                </div>
              </div>
              <div class="bottomInfo" v-if="currentKey === 0">
                <span style="display:flex;align-items: center;">
                  <img src="../assets/icon/icon_user.png" alt="" style="
                        width: 18px;
                        margin-right: 4px;
                      " />
                  <span>{{ item.realSalesNum || 0 }}人买过</span>
                </span>
                <!-- <span>17.2万人点赞</span> -->
                <span style="display:flex;align-items: center;">
                  <img src="../assets/icon/icon_eye.png" alt="" style="
                        width: 18px;
                        margin-right: 4px;
                      " />
                  <span>{{ item.clickFlow || 0 }}人看过</span>
                </span>
              </div>
            </div>
          </template>

          <!-- 奖品列表 -->
          <template v-else-if="form.status == 2">
            <div class="orderList" v-for="(item, i) in list" :key="i" @click="jumpOrderDetails(item)">
              <div class="title">
                <img class="icon" src="../assets/icon/icon_shop.png" alt="" />
                <span class="title_name overflowLineOne">
                  {{ item.name || '' }}
                </span>

                <span>
                  <!-- infoState 0不需要填写的 -->
                  <span class="font14" :style="PrizeStatusObj[item.awardState].style" v-if="currentKey !== 0 && item.infoState == '0'">
                    {{ PrizeStatusObj[item.awardState].text }}
                  </span>

                  <!-- 需要填写 1未填写 -->
                  <span class="font14" style="color: #ff8f1f" v-else-if="currentKey !== 0 && item.infoState == '1'">
                    待使用
                  </span>

                  <!-- 需要填写 2已填写 -->
                  <span class="font14" style="color: #999999" v-else-if="currentKey !== 0 && item.infoState == '2'">
                    已填写
                  </span>

                  <!-- 需要填写 3已过期 -->
                  <span class="font14" style="color: #999999" v-else-if="currentKey !== 0 && item.infoState == '3'">
                    已过期
                  </span>

                  <span class="arrow-right" style="width: 10px; height: 10px"></span>
                </span>
              </div>
              <div class="content">
                <img class="picture" :src="item.picture" alt="" />
                <div class="right">
                  <div class="expirationTime">{{ item.useDate }} 到期</div>

                  <div class="pickupTime"></div>
                  <div class="payInfo">
                    <span>价值：￥{{ item.price }}</span>
                    <span>数量：1</span>
                  </div>
                </div>
              </div>
              <div class="btns">
                <div class="left">
                  <!-- <div class="del" @click.stop="deleteOrder(item)" v-if="[2,3,6].includes(item.status)">
                      <img class="icon_del" src="../assets/icon/icon_delete.png" alt="">
                      <span>删除</span>
                    </div> -->
                </div>
                <div class="right">
                  <template v-if="item.awardState == 1 && item.infoState == '0'">
                    <nut-button @click.stop="jumpMechantList(item.list)" small :style="{
                          color: '#FF5040',
                          background: '#fff',
                          border: '1px solid #FF5040',
                          borderRadius: '2px',
                          overflow: 'hidden',
                          'margin-right': '16px',
                        }">
                      查看门店
                    </nut-button>

                    <nut-button @click.stop="showPrizeCouponCode(item)" small :style="{
                          color: '#fff',
                          background: '#FF5040',
                          border: '#FF5040',
                          borderRadius: '2px',
                          overflow: 'hidden',
                        }">
                      展示券码
                    </nut-button>
                  </template>

                  <template v-else-if="item.infoState == '1'">
                    <nut-button small :style="{
                          color: item.infoState == 1 ? '#fff' : '#FF5040',
                          background: item.infoState == 1 ? '#FF5040' : '#fff',
                          border:
                            item.infoState == 1
                              ? '#FF5040'
                              : '1px solid #FF5040',
                          borderRadius: '2px',
                          overflow: 'hidden',
                        }">
                      填写信息
                    </nut-button>
                  </template>
                </div>
              </div>
            </div>
          </template>
        </mescroll-vue>

        <nut-button class="goShopping" style="
            background: linear-gradient(90deg, #ff8040 0%, #ff5040 100%);
            display: block;
            margin:2px auto 0;
            min-height: 44px;
          " block shape="circle" @click="$router.replace('/index')">
          去购物
        </nut-button>
      </div>

      <div style="
          text-align: center;
          background-color: #fff;
          padding: 28px 12px;
          margin: 0 12px;
          border-radius: 8px;
        " v-else-if="isLoadingOk&&list.length==0">
        <img src="../assets/imgs/Nodata.png" alt="" style="width: 100%" />
        <div style="
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
          ">
          {{ form.status == 2 ? '您还未获得奖品哦' : '暂无数据' }}
        </div>
      </div>
      <div class="list" v-else>

      </div>
    </div>

    <nut-tabbar @tab-switch="tabSwitch3" :replace="true" :tabbar-list="isWeixin()?tabList1:tabList2" :bottom="true">
    </nut-tabbar>

    <div class="mask" style="
        position: fixed;
        background-color: rgba(0, 0, 0, 0.7);
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 84px 0;
      " v-show="couponCodeShow" @click="couponCodeShow = false">
      <div class="couponCode">
        <div class="couponCode_title">
          {{ orderCouponInfo.prodName }}
        </div>

        <div ref="qrCodeDiv2" id="qrcode2" style="height: 170px; width: 170px; margin: 35px auto"></div>
        <CodeTips></CodeTips>

        <div class="orderTips">
          <div>
            <div class="name">券号：{{ orderCouponInfo.couponCode }}</div>
            <div class="orderTips_tips">
              <span>{{ orderCouponInfo.expirationTime }}到期</span>
            </div>
          </div>
        </div>
      </div>

      <img src="../assets/icon/icon_close.png" alt="" style="width: 32px; margin-top: 48px" />
    </div>
  </div>
</template>

<script>
import MescrollVue from "mescroll.js/mescroll.vue";
import CodeTips from "@/components/codeTips.vue";
import inobounce from "inobounce";
import { GetURLParams, compareVersion } from "@/utils/common";
import { mapState } from "vuex";
import {
  logout,
  getOrderList,
  App_getUser,
  checkToken,
  deleteMyOrder,
  buryingPoint,
  getPrizeList,
  getOrderStatus,
  getPrizeStatus,
} from "@/api";
import QRCode from "qrcodejs2";
export default {
  name: "My",
  components: {
    CodeTips,
    MescrollVue,
  },
  computed: {
    ...mapState({
      token: (state) => state.token,
      mobile: (state) => state.mobile,
      isLogin: (state) => state.isLogin,
    }),
  },
  data() {
    return {
      mescroll: null,
      mescrollDown: {
        callback: this.upCallback1,
        afterLoading: function (mescroll) {
          // 结束下拉之前的回调. 返回延时执行结束下拉的时间,默认0ms; 常用于结束下拉之前再显示另外一小段动画,才去结束下拉的场景, 参考案例【dotJump】
          return 500;
        },
        auto: false,
        textOutOffset: "下拉刷新",
      }, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
      mescrollUp: {
        // 上拉加载的配置.
        callback: this.upCallback2,
        auto: false,
        htmlNodata: '<p class="upwarp-nodata"> 没有更多了 </p>',
      },
      getListTimer: null,
      couponCodeShow: false,
      currentKey: 0,
      orderSelectList: [
        {
          name: "待使用",
          value: 1,
        },

        {
          name: "全部订单",
          value: 99,
        },
        {
          name: "奖品订单",
          value: 2,
        },
      ],

      tabList1: [
        {
          tabTitle: "首页",
          curr: false,
          icon: require("../assets/icon/icon_index.png"),
          activeIcon: require("../assets/icon/icon_index_active.png"),
          //  href: "https://dcdn.mynj.cn/kfcsrk/lingshou/index.html#/index",
          href: "#/",
          tabHref: "home",
        },
        {
          tabTitle: "我的",
          curr: true,
          icon: require("../assets/icon/icon_my.png"),
          activeIcon: require("../assets/icon/icon_my_isactive.png"),
          href: "#/my",
          tabHref: "my",
        },
        {
          tabTitle: "功能",
          curr: false,
          icon: require("../assets/icon/icon_use.png"),
          activeIcon: require("../assets/icon/icon_use_isactive.png"),
          href: "#/use",
          tabHref: "use",
        },
      ],
      tabList2: [
        {
          tabTitle: "首页",
          curr: false,
          icon: require("../assets/icon/icon_index.png"),
          activeIcon: require("../assets/icon/icon_index_active.png"),
          //  href: "https://dcdn.mynj.cn/kfcsrk/lingshou/index.html#/index",
          href: "#/",
          tabHref: "home",
        },
        {
          tabTitle: "我的",
          curr: true,
          icon: require("../assets/icon/icon_my.png"),
          activeIcon: require("../assets/icon/icon_my_isactive.png"),
          href: "#/my",
          tabHref: "my",
        },
      ],

      list: [],
      disabled: false,
      form: {
        status: 1,
        pageNum: 1,
        pageSize: 10,
      },

      StatusObj: {
        0: {
          text: "待付款",
          style: {
            color: "#FF8F1F",
          },
        },
        1: {
          text: "待使用",
          style: {
            color: "#FF8F1F",
          },
        },
        2: {
          text: "已使用",
          style: {
            color: "#989898",
          },
        },
        3: {
          text: "已取消",
          style: {
            color: "#989898",
          },
        },
        4: {
          text: "过期可退",
          style: {
            color: "#FF5040",
          },
        },

        5: {
          text: "审核中",
          style: {
            color: "#FF5040",
          },
        },
        6: {
          text: "已退款",
          style: {
            color: "#989898",
          },
        },
        7: {
          text: "退款失败",
          style: {
            color: "#989898",
          },
        },
      },
      // 奖品状态
      PrizeStatusObj: {
        1: {
          text: "待使用",
          style: {
            color: "#FF8F1F",
          },
        },
        2: {
          text: "已使用",
          style: {
            color: "#989898",
          },
        },
        3: {
          text: "已过期",
          style: {
            color: "#989898",
          },
        },
      },

      orderCouponInfo: {
        orderNo: "",
        prodName: "",
        couponCode: "",
        couponUrl: "",
        expirationTime: "",
      },

      isUnMore1: false,
      isLoading1: false,
      maxPages2: 1,
      timers: null,
      maxPages: "",
      startTime: Date.now(),
      couponCodeTimer: null,
      timeLimitTimer: null,
      currentOrderInfo: {},

      isLoadingOk: false,
    };
  },
  watch: {
    couponCodeShow: {
      handler(newVal, oldVal) {
        if (!this.isLogin) return;
        if (newVal) {
          //轮训任务
          console.log("this.currentOrderInfo", this.currentOrderInfo);
          this.couponCodeTimer = setInterval(() => {
            if (this.form.status == 2) {
              getPrizeStatus({ record: this.currentOrderInfo.id }).then(
                (res) => {
                  console.log("statusInfo", res);
                  if (res.code !== 200 || res.data !== 1) {
                    this.couponCodeShow = false;
                    // this.endTimerGetList();
                    this.orderSwitch(
                      {
                        name: "全部订单",
                        value: 99,
                      },
                      1
                    );
                  }
                }
              );
            } else {
              getOrderStatus({ orderNo: this.currentOrderInfo.orderNo }).then(
                (res) => {
                  console.log("statusInfo", res);
                  if (res.data !== this.currentOrderInfo.status) {
                    this.couponCodeShow = false;
                    // this.endTimerGetList();
                    this.orderSwitch(
                      {
                        name: "全部订单",
                        value: 99,
                      },
                      1
                    );
                  }
                }
              );
            }
          }, 3000);
          //轮训上限1分钟
          this.timeLimitTimer = setTimeout(() => {
            this.couponCodeShow = false;
            this.endTimerGetList();
            console.log("超过一分钟");
          }, 60000);
        } else {
          this.endTimer();
        }
      },
    },
    currentKey: {
      handler(val) {
        this.isLoadingOk = false;
        console.log({ val });
        this.$store.commit("SET_MY_CURRENTKEY", val);
        if (val == "0") {
          this.form.status = 1;
        }
        if (val == "1") {
          this.form.status = 99;
        }
        if (val == "2") {
          this.form.status = 2;
        }
      },
      deep: true,
    },
  },
  created() {
    // console.log('currentKey:',this.$store.state.currentKey);
    let u = navigator.userAgent;
    if (u.indexOf("iPhone") > -1) {
      inobounce.enable();
    }
    if (!this.isWeixin()) {
      //跳转奖品的话取路径上参数
      // this.form.status = this.$route.query.status || 1
      this.currentKey =
        this.$route.query.status || this.$store.state.currentKey || 0;
      return;
    }
    if (this.isWeixin()) {
      //跳转奖品的话取路径上参数
      // this.form.status = GetURLParams('status', window.location.href) || 1
      this.currentKey =
        GetURLParams("status", window.location.href) ||
        this.$store.state.currentKey ||
        0;
    }
  },
  mounted() {
    this.mescrollInit();
    buryingPoint({
      platform: this.isWeixin() ? "1" : "2",
      valueType: "open",
      value: "1",
      operateType: "my",
      operateTarget: "my",
      deviceType: navigator.userAgent.toLowerCase().includes("iphone")
        ? "ios"
        : "android",
      trackTime: this.$getNowDate(), //触发时间
      preField1: "",
      preField2: "",
      preField3: "",
    });
    this.getListTimer = setTimeout(() => {
      this.getList();
      // clearTimeout(this.getListTimer);
    }, 1000);
  },
  methods: {
    mescrollInit(mescroll) {
      this.mescroll = mescroll; // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
    },
    //下拉
    upCallback1(page, mescroll) {
      console.log({ page });
      this.list = [];
      this.form.pageNum = 1;
      this.getList(page, mescroll, "down");
    },
    //上拉
    upCallback2(page, mescroll) {
      console.log({ page });
      this.form.pageNum++;
      if (this.form.pageNum <= this.maxPages) {
        this.getList(page, mescroll, "up");
      } else {
        this.mescroll.showNoMore();
        this.mescroll.endSuccess(0, false);
      }
    },

    pulldown() {
      this.isLoading1 = true;
      clearTimeout(this.timers);
      this.timers = setTimeout(() => {
        this.isLoading1 = false;
        this.isUnMore1 = false;
        this.form.pageNum = 1;
        this.form.pageSize = 10;
        this.list = [];
        this.getList();
      }, 3000);
    },
    loadMoreVert() {
      this.isLoading1 = true;
      if (this.form.pageNum > this.maxPages) {
        this.isUnMore1 = true;
        this.isLoading1 = false;
      } else {
        clearTimeout(this.timers);
        this.timers = setTimeout(() => {
          this.isLoading1 = false;
          this.isUnMore1 = false;
          this.form.pageNum++;
          this.getList();
        }, 300);
      }
    },
    // 获取订单列表
    getList(mescroll, way) {
      if (this.isLogin) {
        if (
          !this.isWeixin() &&
          (this.$store.state.agreementInfo.authored == "0" ||
            this.$store.state.agreementInfo.userVersion !=
              this.$store.state.agreementInfo.currentVersion)
        ) {
          this.$emit("agreementClick");
          return;
        }
        // 订单
        if (this.form.status != 2) {
          getOrderList(this.form).then((res) => {
            console.log(res.data);
            if (res && res.code == 200 && res.data) {
              this.isLoadingOk = true;
              this.maxPages = Math.ceil(res.data.totalCount / 10);
              // if (res.data.data.length <= 0) {
              //   // this.$toast.text("数据已经全部加载完毕");
              //   return;
              // }
              let arr = res.data.data;
              if (this.form.pageNum > this.maxPages) {
                mescroll.showNoMore();
                this.mescroll.endSuccess(arr.length);
                return;
              }

              this.list = [...this.list, ...res.data.data];
              // 数据渲染成功后,隐藏下拉刷新的状态
              this.$nextTick(() => {
                if (way == "down") {
                  mescroll.endDownScroll();
                }
              });

              this.$nextTick(() => {
                this.mescroll.endSuccess(arr.length);
              });
            }
          });
          return;
        }

        // 奖品
        getPrizeList(this.form).then((res) => {
          console.log({ res });
          if (res && res.code == 200 && res.data) {
            this.isLoadingOk = true;
            this.maxPages = Math.ceil(res.data.totalCount / 10);
            let arr = res.data.data;
            //可加可不加
            // if (res.data.data.length <= 0) {
            //   // this.$toast.text("数据已经全部加载完毕");
            //   return;
            // }
            if (this.form.pageNum > this.maxPages) {
              mescroll.showNoMore();
              return;
            }

            this.list = [...this.list, ...res.data.data];
            console.log("list:", this.list);
            this.$nextTick(() => {
              if (way == "down") {
                mescroll.endDownScroll();
                return;
              }
            });
            this.$nextTick(() => {
              this.mescroll.endSuccess(arr.length);
            });
          }
        });
      }
    },
    tabSwitch3(event, i) {

    },
    orderSwitch(item, i) {
      console.log({ item }, i);
      this.currentKey = i;
      this.form.status = item.value;
      this.form.pageNum = 1;
      this.form.pageSize = 10;
      this.list = [];
      //未登录 跳转登录页面
      if (!this.isLogin) {
        this.$toast.text("您还未登录，请登录后查看");
        return;
      }
      // 商品/奖品列表接口
      this.getList();
    },
    //展示券码
    clickHandler(item) {
      console.log({ item });
      if (item.status != 1) {
        if (this.isWeixin()) {
          wx.miniProgram.navigateTo({
            url: `/retailMall/pages/productDetails?spuid=${item.spuId}&token=${this.$store.state.token}`,
          });
          return;
        }
        this.$router.push({
          path: "/productDetails",
          query: {
            spuid: item.spuId,
          },
        });
        return;
      }

      this.orderCouponInfo = item.orderCouponInfoVo;
      this.orderCouponInfo.prodName = item.prodName;
      // 生成券码
      const qrCodeDiv2 = this.$refs.qrCodeDiv2;
      if (qrCodeDiv2.innerHTML) {
        qrCodeDiv2.innerHTML = "";
      }
      new QRCode(document.getElementById("qrcode2"), {
        text: this.orderCouponInfo.couponUrl,
        width: parseInt(qrCodeDiv2.style.width),
        height: parseInt(qrCodeDiv2.style.height),
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
      this.currentOrderInfo = item;
      this.couponCodeShow = true;
    },
    //展示奖品券码
    showPrizeCouponCode(item) {
      this.orderCouponInfo = {
        prodName: item.name,
        qrcode: item.qrcode,
        couponCode: item.couponCode,
        expirationTime: item.useDate,
      };

      // 生成券码
      const qrCodeDiv2 = this.$refs.qrCodeDiv2;
      if (qrCodeDiv2.innerHTML) {
        qrCodeDiv2.innerHTML = "";
      }
      new QRCode(document.getElementById("qrcode2"), {
        text: this.orderCouponInfo.qrcode,
        width: parseInt(qrCodeDiv2.style.width),
        height: parseInt(qrCodeDiv2.style.height),
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
      this.currentOrderInfo = item;
      this.couponCodeShow = true;
    },
    toLogin() {
      // 微信端登录
      if (this.isWeixin()) {
        console.log("跳小程序登录");
        wx.miniProgram.redirectTo({ url: "/retailMall/pages/login" });
        return;
      }

      this.getUser();
    },
    getUser() {
   //调用登录接口
   //校验登录状态接口
    checkLogin(token) {
      checkToken({
        token: token,
      }).then((res) => {
        console.log(res);
        if (res.code == 200 && res.data && res.data == "0") {
          this.$store.commit("SET_ISLOGIN", true);
        } else {
          this.$store.commit("SET_ISLOGIN", false);
          localStorage.setItem("token", "");
          localStorage.setItem("mobile", "");
          this.$store.commit("SET_TOKEN", "");
          this.$store.commit("SET_MOBILE", "");
        }
      });
    },

    // 删除订单
    deleteOrder(item) {
      console.log(item);
      let _this = this;
      this.$dialog({
        title: "确定删除此订单？",
        content: "删除后将从你的记录里消失，无法找回",
        onOkBtn(event) {
          //确定按钮点击事件
          deleteMyOrder(item.orderNo).then((res) => {
            _this.$toast.text("删除订单成功");
            _this.form.pageNum = 1;
            _this.form.pageSize = 10;
            _this.list = [];
            _this.getList();
            this.close(); //关闭对话框
            buryingPoint({
              platform: _this.isWeixin() ? "1" : "2",
              valueType: "money",
              value: "1",
              operateType: "delete",
              operateTarget: item.orderNo,
              deviceType: navigator.userAgent.toLowerCase().includes("iphone")
                ? "ios"
                : "android",
              trackTime: _this.$getNowDate(), //触发时间
              preField1: "",
              preField2: "",
              preField3: "",
            });
          });
        },
      });
    },

    logout() {
      let _this = this;
      this.$dialog({
        title: "您是否确认要退出当前帐户？",
        onOkBtn(event) {
          console.log("this:", _this);
          //确定按钮点击事件
          logout({
            token: _this.token,
          }).then((res) => {
            console.log("res:", res);
            if (res.code == 200 || res.code == 401) {
              _this.isLogin = false;
              _this.$store.commit("SET_TOKEN", "");
              _this.$store.commit("SET_MOBILE", "");
              _this.$store.commit("SET_ISLOGIN", false);
              localStorage.setItem("token", "");
              localStorage.setItem("mobile", "");

              buryingPoint({
                platform: _this.isWeixin() ? "1" : "2",
                valueType: "logout",
                value: "1",
                operateType: "",
                operateTarget: "",
                deviceType: navigator.userAgent.toLowerCase().includes("iphone")
                  ? "ios"
                  : "android",
                trackTime: _this.$getNowDate(), //触发时间
                preField1: "",
                preField2: "",
                preField3: "",
              });
            }
          });
          this.close(); //关闭对话框
        },
      });
    },

    jumpOrderDetails(item) {
      console.log(item);
      // 点击的是奖品列表
      if (this.form.status == 2) {
        this.$router.push({
          path: "/prizeOrderDetails",
          query: item,
        });
        return;
      }

      this.$router.push({
        path: "/orderDetails",
        query: {
          orderNo: item.orderNo,
        },
      });
    },

    jumpMechantList(list) {
      this.$router.push({
        path: "/merchantList",
        query: {
          storeApiVoList: JSON.stringify(list),
        },
      });
    },
    //轮询关闭获取订单列表
    endTimerGetList() {
      if (this.isLogin) {
        // 订单
        if (this.form.status != 2) {
          getOrderList(this.form).then((res) => {
            if (res && res.code == 200 && res.data) {
              this.maxPages = Math.ceil(res.data.totalCount / 10);
              this.list = res.data.data;
            }
          });
          return;
        }

        // 奖品
        getPrizeList(this.form).then((res) => {
          console.log({ res });
          if (res && res.code == 200 && res.data) {
            this.maxPages = res.data.totalPage;
            this.list = res.data.data;
            console.log("list:", this.list);
          }
        });
      }
    },
    //轮询终止
    endTimer() {
      this.currentOrderInfo = {};
      //关闭券码窗口清除两个定时任务
      clearInterval(this.couponCodeTimer);
      this.couponCodeTimer = null;
      clearTimeout(this.timeLimitTimer);
      this.timeLimitTimer = null;
    },
  },
  beforeDestroy() {
    // 首页停留时长
    buryingPoint({
      platform: this.isWeixin() ? "1" : "2",
      valueType: "stay",
      value: Date.now() - this.startTime,
      operateType: "my",
      operateTarget: "my",
      deviceType: navigator.userAgent.toLowerCase().includes("iphone")
        ? "ios"
        : "android",
      trackTime: this.$getNowDate(), //触发时间
      preField1: "",
      preField2: "",
      preField3: "",
    });
    //页面销毁清除券码窗口两个定时任务
    clearInterval(this.couponCodeTimer);
    this.couponCodeTimer = null;
    clearTimeout(this.timeLimitTimer);
    this.timeLimitTimer = null;
    clearTimeout(this.getListTimer);
    this.getListTimer = null;
  },
};
</script>
<style lang="scss" scoped>
#My {
  width: 375px;
  height: 100%;
  background-color: #f4f4f4;
  overflow-x: hidden;
  overflow-y: hidden;
  .userInfo {
    background: url("../assets/imgs/loginUserTop.png") no-repeat center/cover;
    padding: 28px 12px 25px;
    box-sizing: border-box;
    margin-bottom: 8px;
    // background-color: salmon;
    .userLogin {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .userLogin_left {
        display: flex;
        align-items: center;
        .avatar {
          width: 40px;
          height: 40px;
          margin: 0 12px 0 4px;
        }
        .loginStatus {
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #303236;
        }
      }
      .userLogin_right {
        display: flex;
        align-items: center;
        .operation {
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #303236;
          margin-left: 4px;
        }
      }
    }
    .orderSelect {
      margin: 20px 0 0;
      width: 351px;
      height: 54px;
      background: #ffffff;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #303236;

      .isSelected {
        color: #ff8040 !important;
        font-weight: 500;
      }
      span {
        &:first-child {
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          // margin-right: 127px;
        }

        display: flex;
        flex-direction: column;
        align-items: center;
        .underLine {
          margin-top: 4px;
          width: 28px;
          height: 2px;
          background: #ff8040;
          border-radius: 1px;
        }
      }
    }
  }

  .NoLogin {
    width: 375px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .bg {
      width: 100%;
    }
    .tips {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      text-align: center;
      margin: 12px 0 41px;
    }
  }

  .signedIn {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-top: -22px;
    .noticeBar {
      margin: 0 12px 8px 12px;
      padding: 0 12px;
      height: 56px;
      min-height: 56px;
      background: #fffdee;
      border-radius: 8px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ac7339;
      line-height: 18px;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      img {
        width: 22px;
        // height: 24px;
        margin-right: 8px;
      }
    }

    .list {
      flex: 1;
      height: calc(100% - 64px);
      overflow-x: hidden;
      // overflow-y: scroll;
      // -webkit-overflow-x: hidden;
      // -webkit-overflow-y: scroll;
      margin: 0 0 240px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
    }
    .orderList {
      margin: 0 12px 8px;
      padding: 0 12px;
      background: #ffffff;
      border-radius: 8px;
      // box-sizing: border-box;
      overflow-x: hidden;
      // overflow-y: scroll;
      .title {
        .icon {
          width: 28px;
          height: 28px;
          margin-right: 12px;
        }
        padding: 13px 0;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #303236;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title_name {
          flex: 1;
          padding-right: 20px;
        }
      }
      .content {
        border-top: 1px solid #f1f1f1;
        display: flex;
        padding: 15px 0 12px;

        .picture {
          width: 62px;
          object-fit: contain;
          height: 62px;
          margin-right: 12px;
        }
        .right {
          .expirationTime,
          .orderTime,
          .pickupTime {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #5a5a5a;
            margin-bottom: 8px;
          }
        }
        .payInfo {
          display: flex;
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #5a5a5a;
          span:first-child {
            margin-right: 26px;
          }
        }
      }
      .btns {
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
          .icon_del {
            width: 16px;
            margin-right: 4px;
          }
          .del {
            display: flex;
            align-items: center;
          }
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #989898;
        }
        .right {
          display: flex;
          align-items: center;
        }
      }

      .bottomInfo {
        border-top: 1px solid #f1f1f1;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #989898;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 15px 0;
      }
    }
  }

  .couponCode {
    width: calc(100% - 24px);
    background: #ffffff;
    border-radius: 8px;
    .couponCode_title {
      text-align: center;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #303236;
      line-height: 20px;
      margin: 0 12px;
      padding: 24px 0;
      border-bottom: 1px dashed #e8e8e8;
    }
  }

  .orderTips {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 12px;
    border-top: 1px dashed #e8e8e8;
    .name {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #303236;
      margin-bottom: 8px;
    }
    .orderTips_tips {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #989898;
      line-height: 17px;
    }
  }

  .nut-tabbar {
    height: 83px;
  }
  .goShopping {
    width: 351px;
  }
  /deep/.icon-box {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .icon {
      width: 21px;
      height: 20px;
      margin-bottom: 6px;
    }
  }
}
</style>