xat.vue

<template>
  <view class="container" style="width: 100%;	min-height: 160vh;position: relative;">
    <view
      style="background-image: url('/static/product/zptop.png');background-size: 100% 100%; background-position: center; background-repeat: no-repeat;width: 100%;height: 32vh;">

    </view>
    <view
      style="width: 95%;margin: -18vh auto 10px;border-radius: 10px;box-sizing: border-box;padding: 20px;background-color: #fff;display: flex;justify-content: space-around;">
      <view>昨日收益：{{ yesterdayMoney }}</view>
      <view>累计使用：{{ haveUsed }}</view>
      <view>持有数量：{{ haveNum }}张</view>
    </view>
    <view style="width: 95%;margin: 0vh auto 0;border-radius: 10px;">
      <!-- <view
              style="color:#022360;font-weight: bold;font-size: 18px;width: 100%;text-align: center;margin-top: 8vh;">
              邀请1人领取6000雄安补贴+8000现金</view> -->
      <view v-for="(item, index) in list" :key="index" :style="{
        width: '95%',
      }"
        style="margin: 10px auto;background-color: #fff;box-sizing: border-box;padding: 8px 10px;border-radius: 10px;">
        <view style="display: flex;flex-direction: column;align-items: center;">
          <view :style="{
            backgroundImage: `url('/static/product/c${item.productId}.png')`,
            backgroundSize: '100% 100%',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat',
            width: '250px',
            height: '120px'
          }" style="border-radius: 10px;">
          </view>
          <view style="display: flex;flex-direction: column;margin-top:10px;align-items: center;width: 100%;">
            <!-- <view style="display: flex;flex-direction: column;align-items: center;">
              <view style="font-weight: bold;">
                {{ item.productName }}

              </view>
              <view style="font-size: 10px;">
                {{ item.productTitle }}

              </view>

            </view> -->

            <view style="display: flex;align-items: center;font-size: 10px;justify-content: space-around;width: 100%;">
              <view style="display: flex;align-items: center;flex-direction: column;">
                <view style="font-size: 14px;font-weight: bold;">卡内余额</view>
                <view style="font-size: 14px;color: #e40112;"> {{ item.buttonStyle / 10000 }} 万</view>
              </view>
              <view style="display: flex;align-items: center;flex-direction: column;">
                <view style="font-size: 14px;font-weight: bold;">可取现额度</view>
                <view style="font-size: 14px;color: #e40112;"> {{ item.fontStyle / 10000 }} 万</view>
              </view>
              <view style="display: flex;align-items: center;flex-direction: column;">
                <view style="font-size: 14px;font-weight: bold;">补助收益</view>
                <view style="font-size: 14px;color: #e40112;">{{ item.orderNum }}元/天</view>
              </view>
              <view style="display: flex;align-items: center;flex-direction: column;" v-if="item.productId == 99">
                <view style="font-size: 14px;font-weight: bold;">赠送支票</view>
                <view style="font-size: 14px;color: #e40112;">20万</view>
              </view>
            </view>
          </view>
        </view>
        <view
          style="color:#fff;font-size: 12px;width: 70%;text-align: center;margin: 0px auto;height: 30px; border-radius: 15px;line-height: 30px;background-color: #e40112;margin-top: 5px;"
          @click="zttc(item)">
          查看进度
        </view>
      </view>
    </view>
    <!-- <view class="tabbar">
          <tabbar num="3"></tabbar>
      </view> -->
    <!-- <view class="">
      <Payup @close="payclose" :show="payshow" :url="urls" wechat="1" zfb="1" ysf="1" :mony="paymony" :title="paytitle"
        :type="paytype" payway="0" :zfsm="paysm" btn="立即开通">
      </Payup>
    </view> -->
    <uv-popup mode="bottom" ref="stepPop" customStyle="height: 700rpx;">
      <view
        style=" width: 100%;border-radius: 10px;display: flex;justify-content: space-between;flex-direction: column;overflow-y: auto;box-sizing: border-box;padding: 20px">
        <u-steps :current="stepObj.status" direction="column">
          <u-steps-item :title="item.title" v-for="(item, index) in stepArr1"
            :status="stepObj.status == 0 ? 'finish' : 'wait'">
            <template v-slot:desc>
              <view style="display: flex;justify-content: space-between;">
                <view style="flex: 1;margin-right: 20px;">{{ item.desc }}</view>
                <view class="warpbtn">
                  <view class="btn11" @click="jiaoqian(stepObj.extend4, 1)" v-if="stepObj.extend4 && index == 1">
                    {{ item[`desc${stepObj.extend4}`] }}</view>
                  <view class="btn11" @click="jiaoqian(stepObj.extend5, 2)" v-if="stepObj.extend5 && index == 2">
                    {{ item[`desc${stepObj.extend5}`] }}</view>
                  <view class="btn11" @click="jiaoqian(stepObj.extend6, 3)" v-if="stepObj.extend6 && index == 3">
                    {{ item[`desc${stepObj.extend6}`] }}</view>
                </view>
              </view>
            </template>
          </u-steps-item>
        </u-steps>
      </view>
    </uv-popup>
    <Payup @close="payclose" :productId="productId" :show="payshow" :url="urls" wechat="1" zfb="1" ysf="1" :mony="paymony" :title="paytitle"
      :type="paytype" payway="0" :zfsm="paysm" btn="立即支付">
    </Payup>
  </view>
</template>
<script>
import tabbar from "@/components/TarBar/TarBar.vue";
import Payup from "@/components/payup/payup.vue";

export default {
  components: {
    Payup,
    tabbar,
  },
  data() {
    return {
      height: 1280,
      hbimg: "",
      invitnum: '',
      linkstr: '',
      qr: false,
      link: false,
      invit: false,
      show: false,
      missionList: '',
      list: '',
      arrList: {
        code: 'https://qm.qq.com/cgi-bin/qm/qr?k=LKqML292dD2WvwQfAJXBUmvgbiB_TZWF&noverify=0',
        size: 250, // 二维码大小
        type: 'none',
        padding: 1,
      },
      yesterdayMoney: null,
      haveUsed: null,
      haveNum: null,
      productId: '',
      stepObj: { status: 1 },
      payshow: false,
      paysm: '',
      paytitle: '绑定支付宝',
      paytype: 12,
      paymony: 199,
      urls: '/ops/daybook',
      stepArr: [
        { title: '申购成功', desc: "恭喜您申购成功，请耐心等待" },
        { title: '正在制卡中', desc: "正在为您制卡中", desc1: "立即制卡", desc2: "制卡中", desc3: '已制卡' },
        { title: '银行备案中', desc: "资料已送报工信局备案", desc1: "提交资料费", desc2: "审核中", desc3: '已审核' },
        { title: '备案完成', desc: "您的专属工作人员已成功取卡，准备为您上门", desc1: "快递上门服务费", desc2: "审核中", desc3: '已审核' },
        { title: '上门中', desc: "请保持电话24小时畅通，以免错过电话" },
      ],
      stepArr1: []
    };
  },
  onPullDownRefresh() {
    uni.startPullDownRefresh();
  },
  onLoad() {

    this.action = getApp().globalData.base;

    this.$request("/ops/appmenu/list", {}, "get").then((res) => {
      this.menulist = res.data.rows.filter((item) => item.amenuType == 1);
      this.fornum = this.menulist.length % 4;
      if (this.fornum == 0) {
        this.fornum = 4;
      }
      // 邀请图片
    });
    this.getInfo()
    this.getList()

  },
  onShow() {
    uni.hideTabBar();

    this.$request(
      "/system/config/configKey/mous/apk_version",
      {},
      "get",
      true,
      true
    ).then((res) => {
      this.kfUrl = res.data.msg;
    });

    this.$request("/system/user/qRCode", {}, "get").then((res) => {
      // this.linkstr = res.data.data
      this.invitnum = res.data.data.slice(-6);
    });
    this.getuserinfo();
    this.getList()
  },
  methods: {
    zttc(item) {
      this.stepObj = item
      this.$refs.stepPop.open('bottom')
      this.stepArr1 = this.stepArr.filter((v, index) => index <= item.status)
    },
    jiaoqian(type, type1) {
      if (type != 1) {
        return false
      }
      this.paytype = 12
      this.paymony = 199
      this.productId = this.stepObj.id
      if (type1 == 1) {
        this.paytitle = '制卡费'
      }
      if (type1 == 2) {
        this.paytitle = '提交资料费'
      }
      if (type1 == 3) {
        this.paytitle = '快速上门服务费'
      }
      this.payshow = true
    },
    getList() {
      this.$request("/system/user/xatList", {}, "get").then((res) => {
        // this.linkstr = res.data.data
        // this.invitnum = res.data.data.slice(-6);
        this.list = res.data.data.xatList

        this.yesterdayMoney = res.data.yesterdayMoney
        this.haveUsed = res.data.data.haveUsed
        this.haveNum = res.data.data.number
      });
    },
    missionClick(item) {
      console.log(item.status)
      if (item.status == 0) {
        this.goyq()
      }
      if (item.status == 2) {

      }
      if (item.status == 1) {

        this.$request(" /system/user/claimRewards ", { id: item.id }, "post").then((res) => {
          uni.showToast({
            title: '领取成功',
            icon: 'none'
          })
          this.getuserinfo();
          this.getInfo()
        });
      }
    },
    getInfo() {
      this.$request("/system/user/allTask", {}, 'get').then((res) => {
        console.log(res.data)
        this.missionList = res.data.data.sort((obj1, obj2) => Number(obj1.column1) - Number(obj2.column1));
      })
    },

    paste(value) {
      uni.setClipboardData({
        data: value
      });
    },
    qrshare() {
      uni.navigateTo({
        url: '/components/invite/haibao'
      })
    },

    bc() {
      uni.showToast({
        title: '若遇保存失败,请截图分享',
        icon: 'none'
      })
    },
    gojp() {
      if (!this.smpd) {
        uni.showToast({
          title: "请先进行实名认证",
          icon: "none",
        });

        let sm = setTimeout(() => {
          uni.navigateTo({
            url: "/components/my/shiming",
          });
          clearTimeout(sm);
        }, 1500);
        return;
      }
      uni.navigateTo({
        url: "/components/my/jp",
      });
    },
    gomx(tab) {
      uni.navigateTo({
        url: `/components/my/zjmx/zjmx?tab=${tab}`,
      });

    },
    closedh() {
      this.showdh = false;
    },
    qhxj() {
      if (!this.smpd) {
        uni.showToast({
          title: "请先进行实名认证",
          icon: "none",
        });

        let sm = setTimeout(() => {
          uni.navigateTo({
            url: "/components/my/shiming",
          });
          clearTimeout(sm);
        }, 1500);
        return;
      }

      this.showdh = true;
    },

    payclose(i) {
      this.payshow = i;
    },

    tytsconfirm() {
      this.tyts = false;
      uni.reLaunch({
        url: "/pages/index/index",
      });
    },

    sign() {
      this.$request("/system/user/sign", {}, "Put", true).then((res) => {
        if (res.data.code == 200) {
          this.getuserinfo();
          // this.isshowqd = true
          uni.showToast({
            title: "恭喜您签到成功",
            icon: "none",
          });
          // this.showMask = true
        } else {
          uni.showToast({
            title: res.data.msg,
            icon: "none",
          });
        }
        // console.log(res);
      });
    },
    close(i) {
      this.show = i;
    },

    //获取用户信息
    getuserinfo() {
      this.$request("/system/user/", {}, "get").then((res) => {
        this.wsm = res.data.nickName;
        this.pname = res.data.pname;

        if (res.data.q0 || res.data.q0 == 0) {
          this.q0 = res.data.q0;
        }
        if (res.data.q1 || res.data.q1 == 0) {
          this.q1 = res.data.q1;
        }
        if (res.data.q2 || res.data.q2 == 0) {
          this.q2 = res.data.q2;
        }
        if (res.data.q3 || res.data.q3 == 0) {
          this.q3 = res.data.q3;
        }
        if (res.data.q4 || res.data.q4 == 0) {
          this.q4 = res.data.q4;
        }
        if (res.data.q5) {
          this.q5 = res.data.q5;
        }
        if (res.data.q6) {
          this.q6 = res.data.q6;
        }
        if (res.data.q7) {
          this.q7 = res.data.q7;
        }
        if (res.data.vip) {
          this.vip = res.data.vip;
        }
        this.username = res.data;
        this.signs = res.data.todaySign;
        // console.log(res.data);
        if (res.data.data == "true") {
          this.smpd = true;
          //判断用户是否实名
          this.shiming = res.data.data;
        }
      });
    },


    yj() {
      console.log("111111")
      if (this.username.smCount < 3) {
        uni.showToast({
          title: "请先邀请3人实名注册",
          icon: "none",
        });
      } else {
        uni.showToast({
          title: "请等待开放提现服务",
          icon: "none",
        });
      }

    },




    // 跳转导航
    go(url, amenuContent) {
      if (amenuContent == 1) {
        this.edit();
      } else if (amenuContent == 2) {
        // #ifdef APP
        // void plus.runtime.openWeb(encodeURI(url));
        plus.runtime.openURL(encodeURI(this.kfUrl));
        // #endif
        // #ifdef H5
        location.href = this.kfUrl;
        // #endif
      } else {
        uni.navigateTo({
          url: url,
        });
      }
    },

    go1() {
      uni.navigateTo({
        url: "/components/my/xgzl",
      });
    },
    go22() {
      uni.navigateTo({
        url: "/components/my/bank/bank",
      });
    },
    go2() {
      uni.navigateTo({
        url: "/components/ptzw12",
      });
    },
    go21() {
      uni.navigateTo({
        url: "/components/ptzw12a",
      });
    },
    go3() {
      uni.navigateTo({
        url: "/components/my/withdraw/withdraw",
      });
    },
    go4() {
      uni.navigateTo({
        url: "/components/my/team",
      });
    },
    go5() {
      uni.navigateTo({
        url: "/components/my/shdz/shdz",
      });
    },
    go6() {
      uni.navigateTo({
        url: "/components/my/tzjl",
      });
    },
    go8() {
      uni.navigateTo({
        url: "/components/my/download/download",
      });
    },
    go9() {
      let kfUrl = 'https://kf.xiongaxsd.com/#/chat'
      // #ifdef APP

      plus.runtime.openURL(encodeURI(kfUrl));
      // #endif
      // #ifdef H5

      location.href = kfUrl;
      // #endif
    },
    // 跳转邀请
    goyq(item) {
      console.log(item)
      let data = JSON.stringify(item)
      uni.navigateTo({
        url: `/components/buytk?item=${data}`,
      });
    },
    gotdz() {
      uni.navigateTo({
        url: "/pages/tdzqy/tdzqy",
      });
    },

    // 提现
    gotx() {

    },

    // 跳转到提现页面
    gopay(balance, type, title) {
      console.log(balance, "balance")
      console.log(type, "type")
      console.log(title, "title")
      if (balance <= 0) {
        uni.showToast({
          title: "余额不足",
          icon: "none",
        });
      } else {
        uni.navigateTo({
          url: `/components/my/tixian/tixian?balance=${balance}&type=${type}&title=${title}`,
        });
      }
    },
    // 跳转充值
    gocz() {
      uni.navigateTo({
        url: "/components/my/chongzhi",
      });
    },

    gotz() {
      uni.navigateTo({
        url: "/components/my/tzjl",
      });
    },

    //跳转资金明细
    gozijin(val) {
      uni.navigateTo({
        url: `/components/my/zjmx/zjmx?tab=${val}`,
      });
    },

    edit() {
      uni.showModal({
        title: "退出确认",
        content: "您确定要退出登录吗?",
        success(res) {
          if (res.confirm) {
            uni.removeStorageSync("token"),
              uni.reLaunch({
                url: "/pages/Login/Login",
                success() {
                  history.pushState(null, null, location.href);
                },
              });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  // background-image: url('../../static/my/bg.png');

  // padding-top: 30px;
}

.top {
  // background-image: url("../../static/vv1.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  color: #000;
  // background-image: linear-gradient(to top, #f7cf72 0%, #ff973e 100%);
  height: 280rpx;
  // width: 95%;
  margin: 0 auto;
  // border-radius: 12px;

  display: flex;
  // flex-direction: column;
  align-items: center;

}

.btn {
  width: 75%;
  height: 40px;
  font-size: 18px;
  font-weight: bold;
  line-height: 35px;
  text-align: center;
  color: #fff;
  border-radius: 28px;
  margin-top: 20px;
  margin-left: 20%;
  // margin: 50px auto 0;
  // background-color: #227be1;
  // background-image: linear-gradient(to top, #ff7d38 0%, #ffb60d 100%) // background-image: url('../../static/ljsq.png');
}

.warpbtn {
  display: flex;

  .btn11 {
    width: 240rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    border-radius: 50rpx;
    background: red;
    color: #fff;
  }
}

.zc {
  // background-color: red;
  // background-image: url('../../static/my/zcbg.png');
  // box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.5);
  width: 100%;
  margin: -105rpx auto 0;
  // height: 440rpx;
  box-sizing: border-box;
  padding-top: 45rpx;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

  .zcitem1 {
    margin-bottom: 10px;
    border-radius: 8px;
    // margin-right: 5px;
    height: 198rpx;
    width: 32%;
    padding: 20rpx 0rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background-image: linear-gradient(to top, #eac7d4 0%, #fefdfe 100%);
    // background-image: url('../../static/my/gryl.png');
  }
}

.botoom {
  padding: 40rpx 0 10px;
  border-radius: 12px;
  box-sizing: border-box;
  width: 97%;
  margin: 10px auto 0;
  background-color: #fff;
}

.nav {
  display: flex;
  // flex-direction: column;
  justify-content: space-around;
  flex-wrap: wrap;

  // background-image: url('../../static/my/navbg.png');
  // height: 300px;
  padding: 10px 0;

  .nav-item {
    // background-color: red;
    // border-bottom: 1px solid #ccc;
    // border-radius: 6px;
    // height: 45px;
    display: flex;
    text-align: center;
    // flex-direction: column;
    align-items: center;
    // background-color: rebeccapurple;
    justify-content: center;
    box-sizing: border-box;
    padding: 7px 0;
    margin: 0px auto;
    width: 32%;
    color: #000;
  }

  .zh {
    border-bottom: none;
  }
}

.edit {
  // background-image: url('../../static/my/tc.png');
  font-size: 16px;
  text-align: center;
  height: 55px;
  line-height: 55px;
  width: 94%;
  color: rgba(248, 231, 191, 1);
  border-radius: 12px;
  margin: 10px auto 20px;
}

.btn1 {
  background-color: #999;
}
</style>