升档

zhouhao

2021-11-03 4a311630af63b915e2c5747a141975ce5ad9ef13

 src/views/main/product.vue

@@ -7,7 +7,6 @@
 -->
<template>
  <div class="product-box h-100-g">

    <nav class="product-title">
      产品管理
    </nav>
@@ -17,218 +16,198 @@
      <p>支付宝扫码收款</p>
    </div>


    <div class="product-list grid">
      <div class="list-title">办理分期</div>
      <div class="item flex-center-g" @click="handlerClick(item)" v-for="(item, index) in menu" :key="index" :class="item.icon.replace('#','')">
        <div class="text-center-g" >
          <svg class="icon"  aria-hidden="true" :style="{fill:item.color}">
      <div class="item flex-center-g" @click="handlerClick(item)" v-for="(item, index) in menu" :key="index" :class="item.icon.replace('#', '')">
        <div class="text-center-g">
          <svg class="icon" aria-hidden="true" :style="{ fill: item.color }">
            <use :xlink:href="item.icon"></use>
          </svg>
          <p class="label">{{item.label}}</p>
          <p class="label">{{ item.label }}</p>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: "product",
    data() {
      return {
        // 菜单栏
        menu: [
          {
            icon: '#iconxinyongkafenqi',
            label: '信用卡分期',
            path: '',
            color:'#896EDB'
export default {
  name: "product",
  data() {
    return {
      // 菜单栏
      menu: [
        {
          icon: "#iconxinyongkafenqi",
          label: "信用卡分期",
          path: "",
          color: "#896EDB",
        },
        {
          icon: "#iconhuabeifenqi",
          label: "花呗分期",
          color: "#896EDB",
        },
        {
          icon: "#iconshoujifenqi",
          label: "手机分期",
          color: "#896EDB",
        },
        {
          icon: "#icongoujizhijiang",
          label: "购机直降",
          color: "#ccc",
        },
        {
          icon: "#iconzhixianghua",
          label: "智享花",
          color: "#896EDB",
        },
        {
          icon: "#iconzhixianghua",
          label: "信用购",
          color: "#896EDB",
        },
        {
          icon: "#icondangmianfu",
          label: "商户收款",
          color: "#ccc",
        },
        {
          icon: "#iconhuabeiheyueji",
          label: "花呗合约机",
          color: "#896EDB",
        },
        {
          icon: "#iconhuabeitie",
          label: "花呗提额",
          color: "#896EDB",
        },
      ],
    };
  },
  created() {
    // this.openAuto();
  },
  methods: {
    openAuto() {
      let openId = window.localStorage.getItem("pOpenId");
      let codeId = window.localStorage.getItem("pCodeId");
      alert("openId:" + openId);
      alert("codeId:" + codeId);
      if (codeId == undefined) {
        var strUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + "wx594ab33e0466eccf" + "&redirect_uri=" + "https%3a%2f%2fsie.jycash.cn%2fsib_wx_scoreq%2f%23%2f" + "&response_type=code&scope=snsapi_userinfo" + "#wechat_redirect";
        window.location.href = strUrl;
      } else if (openId == undefined) {
        this.$api.getWeChatUserInfo({ code: codeId }).then(
          (res) => {
            let openId = res.body;
            window.localStorage.setItem("pOpenId", openId);
            this.$api.setUserOpenId({ openId: openId }).then(
              (res) => {
                alert("updateOpenId:" + openId);
              },
              (error) => {
                statusCodeManage.showTipOfStatusCode(error, this);
              }
            );
          },
          {
            icon: '#iconhuabeifenqi',
            label: '花呗分期',
            color:'#896EDB'
          },
          {
            icon: '#iconshoujifenqi',
            label: '手机分期',
            color:'#896EDB'
          },
          {
            icon: '#icongoujizhijiang',
            label: '购机直降',
            color:'#ccc'
          },
          {
            icon: '#iconzhixianghua',
            label: '智享花',
            color:'#896EDB'
          },
          {
            icon: '#iconzhixianghua',
            label: '信用购',
            color:'#896EDB'
          },
          {
            icon: '#icondangmianfu',
            label: '商户收款',
            color:'#ccc'
          },
          {
            icon: '#iconhuabeiheyueji',
            label: '花呗合约机',
            color:'#896EDB'
          },
          {
            icon: '#iconhuabeitie',
            label: '花呗提额',
            color:'#896EDB'
          },

        ]
          (error) => {
            statusCodeManage.showTipOfStatusCode(error, this);
          }
        );
      }
    },
    created() {
       // this.openAuto();
    handlerClick(item) {
      if (item.path) {
        this.$router.push(item.path);
        return false;
      }

      switch (item.label) {
        case "信用卡分期":
          this.Click_XYK();
          break;
        case "花呗分期":
          this.Click_HBFQ();
          break;
      }
    },
    methods: {
        openAuto(){
            let openId = window.localStorage.getItem("pOpenId");
            let codeId = window.localStorage.getItem("pCodeId");
            alert("openId:"+openId);
            alert("codeId:"+codeId);
            if(codeId == undefined) {
                var strUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + "wx594ab33e0466eccf" +
                    "&redirect_uri=" + "https%3a%2f%2fsie.jycash.cn%2fsib_wx_scoreh%2f%23%2f" + "&response_type=code&scope=snsapi_userinfo" + "#wechat_redirect";
                window.location.href = strUrl;
            }else if(openId ==  undefined){
                this.$api.getWeChatUserInfo({"code":codeId}).then(
                    res => {
                        let openId = res.body;
                        window.localStorage.setItem("pOpenId",openId);
                        this.$api.setUserOpenId({"openId":openId}).then(
                            res => {
                                alert("updateOpenId:"+ openId);
                            },
                            error => {
                                statusCodeManage.showTipOfStatusCode(error, this);
                            }
                        );
                    },
                    error => {
                        statusCodeManage.showTipOfStatusCode(error, this);
                    }
                );
            }
        },
      handlerClick(item) {
        if (item.path) {
          this.$router.push(item.path);
          return false;
        }

        switch (item.label) {
          case '信用卡分期':
            this.Click_XYK();
            break;
          case '花呗分期':
            this.Click_HBFQ();
            break;
        }
      },
    //信用卡分期点击
    Click_XYK() {},


      //信用卡分期点击
      Click_XYK() {
        console.log('信用卡分期点击');
      },

      //花呗分期
      Click_HBFQ() {
        console.log('花呗分期');
      },


    }
  }
    //花呗分期
    Click_HBFQ() {},
  },
};
</script>

<style scoped lang="less">
  .product-box {
      padding-bottom: 100px;
.product-box {
  padding-bottom: 100px;

    //产品标题
    .product-title {
      .lh(44px);
      background: @c-black;
      font-size: @font-16;
      color: @c-fff;
      font-weight: bold;
      text-align: center;
    }


    .alipay{
      width: 360px;
      margin: 0 auto;
      .flex(center,center,warp,column);
      margin-top: 20px;
      min-height: 130px;
      background-color: @c-fff;
      .van-icon{
        font-size: 55px;
        margin-bottom: 15px;
        color: @c-default;
      }
      p{
        font-size: @font-12;
        color: @c-default;
      }
    }


    //产品列表
    .grid {
      margin: 15px auto 0 auto;
      width: 360px;
      background-color: @c-bg-fff;
      .flex(flex-start, center, wrap);
      z-index: @zIndex-20;
      box-shadow: 0 8px 20px 0 rgba(66, 61, 93, 0.05);
      border-radius: 3px;
      .item {
        width: 120px;
        height: 122px;
      }
      .icon{
        width:35px;
        height:35px;
       /* fill:@c-default;*/
      }
      .label {
        margin-top: 15px;
        color: @c-text-666;
      }
    }



    .list-title{
      width: 100%;
      .lh(44px);
      padding-left: 25px;
      border-bottom: 1px solid #c7c7c7;
    }


    //单独修改某一单元格样式
    .iconshoujifenqi{

    }



  //产品标题
  .product-title {
    .lh(44px);
    background: @c-black;
    font-size: @font-16;
    color: @c-fff;
    font-weight: bold;
    text-align: center;
  }

  .alipay {
    width: 360px;
    margin: 0 auto;
    .flex(center, center, warp, column);
    margin-top: 20px;
    min-height: 130px;
    background-color: @c-fff;
    .van-icon {
      font-size: 55px;
      margin-bottom: 15px;
      color: @c-default;
    }
    p {
      font-size: @font-12;
      color: @c-default;
    }
  }

  //产品列表
  .grid {
    margin: 15px auto 0 auto;
    width: 360px;
    background-color: @c-bg-fff;
    .flex(flex-start, center, wrap);
    z-index: @zIndex-20;
    box-shadow: 0 8px 20px 0 rgba(66, 61, 93, 0.05);
    border-radius: 3px;
    .item {
      width: 120px;
      height: 122px;
    }
    .icon {
      width: 35px;
      height: 35px;
      /* fill:@c-default;*/
    }
    .label {
      margin-top: 15px;
      color: @c-text-666;
    }
  }

  .list-title {
    width: 100%;
    .lh(44px);
    padding-left: 25px;
    border-bottom: 1px solid #c7c7c7;
  }

  //单独修改某一单元格样式
  .iconshoujifenqi {
  }
}
</style>