云服务器 99 / 年,新老同享(可以99/年续费),开发者力荐特惠渠道,新客户在享受9折
阿里云推广

vue页面style标签里面使用接口返回颜色变量实践

  • 内容
  • 评论
  • 相关
<template>

  <div>
    <loading v-if="is_loading" />
    <div class="box" v-if="!is_loading">
      <div class="top1">
        <img v-lazy="config_info.theme1_top_img" />
        <div class="address"
          :style="`fontSize:${config_info['company_name_font_size']};font-weight:${config_info['company_name_font_bold']}`"
          v-if="!!config_info.company==true || !!config_info.linkman==true  || !!config_info.linktel==true ">
          <span>{{config_info.company}}</span>
          <span>{{config_info.linkman}}
            <font v-if="!!config_info.linkman==true && !!config_info.linktel==true ">:</font> <a style="color:black;"
              :href="`tel:${config_info['linktel']}`">{{config_info.linktel}}</a>

            &nbsp;
            <a v-if="!!config_info.linktel==true " style="float: right;margin-top: 2px;"
              :href="`tel:${config_info['linktel']}`"> <img src="../assets/tel.png" style="width:20px;height:20px;"></a>


          </span>
        </div>
      </div>
      <div class="bottom1">
        <div class="left1"  :style="`width:${config_info['left_width']}%;`"    ref="left1" v-on:scroll="scroll_left()">
          <div class="nav" v-for="(item,index) in catList" :key="index" style="text-align: center;">
            <p  :style="leftcolordisplay== index?check:no_check"
              :class="{'leftcolorchange':leftcolordisplay==index,cate1:1}" @click="getList(item.id,item.type,index)">
              {{item.name}}
            </p>
          </div>
        </div>

        <!-- 侧导航内容-->
        <div class="right1" ref="right1" v-on:scroll="scroll_right()"
          :style="`width:${config_info['right_width']}%;background-image:url(${config_info['theme1_bg_img']});background-size:100%;`">
          <div v-if="tabcontentShow">

            <dl class="goods" v-if="type==1" v-for="item in this.goods" :key="item.id" @click="navGoodDetail(item.id)">
              <dt
                :style="`border:${config_info['good_img_border_px']}  ${config_info['good_img_border_type']}  ${config_info['good_img_border_color']} ;`">
                <img :src="item.file">
              </dt>
              <dd class="title" style="text-align: center;">
                <span class="good_name"
                  :style="`color:${config_info['good_name_color']};font-size:${config_info['good_name_size']};font-weight:${config_info['good_name_weight']}`">{{item.name}}</span>
                <br />
                <span class="good_price"
                  :style="`color:${config_info['good_price_color']};font-size:${config_info['good_price_size']};font-weight:${config_info['good_price_weight']}`">{{item.market_integral}}</span>
              </dd>
            </dl>


            <dl class="goods1" v-if="type==2" v-for="item in this.goods1" :key="item.index">
              <dt><img :src="item.file"></dt>
            </dl>


            <div
              style="width:90%;border:1px solid rgba(158, 154, 154, 0.58);display: flex;flex-direction: row;height: 80px;border-radius:10px;"
              class="goods" v-if="type==3" v-for="item in this.goods2" :key="item.index">
              <div style="width:25%;display:flex;flex-direction:column;justify-content: center;align-items: center;">
                <div
                  v-if="item.extension=='jpg' || item.extension=='jpeg' || item.extension=='png'  || item.extension=='gif' ">
                  <img src="../assets/img.svg" width="50px" height="50px;">
                </div>
                <div v-else-if="item.extension=='xls' || item.extension=='xlsx' "><img src="../assets/xlsx.svg"
                    width="50px" height="50px;"></div>
                <div v-else-if="item.extension=='doc' || item.extension=='docx' "><img src="../assets/docx.svg"
                    width="50px" height="50px;"></div>
                <div v-else-if="item.extension=='ppt' || item.extension=='pptx' "><img src="../assets/ppt.svg"
                    width="50px" height="50px;"></div>
                <div v-else-if="item.extension=='zip' || item.extension=='rar' "><img src="../assets/zip.svg"
                    width="50px" height="50px;"></div>
                <div v-else-if="item.extension=='pdf'  "><img src="../assets/pdf.svg" width="50px" height="50px;"></div>
                <div v-else><img src="../assets/weizhi.svg" width="50px" height="50px;"></div>
              </div>
              <div
                style="width:40%;text-overflow: ellipsis;display:flex;flex-direction:column;justify-content: center;font-size: 13px;">
                {{item.name}}
              </div>
              <div
                style="display:flex;flex-direction:column;justify-content: space-around;width:35%;align-items: center;">
                <van-button type="primary" size="small" @click="downLoadFile(item.file,item.id)">下载文件</van-button>
                <van-button type="info" size="small" v-clipboard:copy="item.file" @click="copy_log(item.file,item.id)"
                  v-clipboard:success="onCopy" v-clipboard:error="onError">复制链接</van-button>
              </div>

            </div>



          </div>
          <div class="most">
            没有更多了
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import wx from 'weixin-js-sdk';
  import {
    Toast
  } from 'vant';
  export default {
    data() {
      return {
        catList: [],
        tabcontentShow: true,
        goods: [],
        goods1: [],
        goods2: [],
        isActive: 0,
        classify_id: '',
        articleTask: '',
        id: "id",
        config_info: '',
        type: 0,
        leftcolordisplay: 0,
        is_loading: true,
        copy_link: "http://www.baidu.com",
        scroll_left1: 0,
        scroll_right1: 0,
        huace_id: '',
        check: {
          "--check_bg_color": "#a4def2",
          "--new_font_color":"black",
          "--new_height":"3.6rem",
        },
        no_check: {
          "--bg_color": "#fff",
          "--new_font_color":"black",
          "--new_height":"3.6rem",
        },

      };
    },
    methods: {
      initShow() {
        const app = this
        //画册的id
        var id = this.$route.query.id

        app.huace_id = id;
        //会员的token
        var token = localStorage.getItem("token")
        this.$http.get(URL +
          'action=get_config&id=' + id + '&token=' + token
        ).then(res => {
          console.log("get_config_home_initshow", res)
          if (res.data.sta != '200') {
            return
          }
          this.config_info = res.data.res
          //console.log(this.config_info)
          this.check={"--check_bg_color": res.data.res.left_background_check_color?res.data.res.left_background_check_color:'#a4def2',"--new_font_color": res.data.res.left_font_color?res.data.res.left_font_color:'#a4def2',"--new_height": res.data.res.left_height?res.data.res.left_height:'3.6rem'};
          this.no_check={"--bg_color": res.data.res.left_background_color?res.data.res.left_background_color:"#fff", "--new_font_color": res.data.res.left_font_color?res.data.res.left_font_color:'#a4def2',"--new_height": res.data.res.left_height?res.data.res.left_height:'3.6rem'};

          this.id = res.data.res.id
          let theme_id = res.data.res.id

          this.$http.get(URL + 'action=get_classify&theme_id=' + theme_id + '&token=' + token)
            .then(res => {
              app.catList = res.data.res
              app.is_loading = false
              app.getList(app.catList[0].id, app.catList[0].type, 0)

            })
        })

      },
      getList(cat_id, type, index) {
        let app = this
        let huace_id = app.huace_id
        Toast.loading({
          message: '加载中...',
          forbidClick: true,
        });
        this.leftcolordisplay = index
        //渲染颜色

        var token = localStorage.getItem("token")
        if (type == '商品列表') {
          this.type = 1
          this.$http.get(URL + `action=get_goodlist&classify_id=${cat_id}&token=${token}&id=${huace_id}`)
            .then(res => {
              this.$refs.right1.scrollTop = 0;
              this.goods = res.data.res;
              Toast.clear();
            })
        } else if (type == '多图展示') {
          this.type = 2
          this.$http.get(URL + `action=get_goodlist&classify_id=${cat_id}&token=${token}&id=${huace_id}`)
            .then(res => {
              this.goods1 = res.data.res;
              Toast.clear();
            })
        } else if (type == '文件下载') {
          this.type = 3
          this.$http.get(URL + `action=get_goodlist&classify_id=${cat_id}&token=${token}&id=${huace_id}`)
            .then(res => {
              this.goods2 = res.data.res;
              Toast.clear();
            })
        }


      },
      navGoodDetail(goods_id) {
        //id是画册的id
        var id = this.$route.query.id
        this.$router.push({
          path: '/detail',
          query: {
            id: id,
            goods_id: goods_id,
          }
        })
      },
      // //文件下载
      downLoadFile(link_url, file_id) {
        //调用日志记录接口
        var id = this.$route.query.id
        var token = localStorage.getItem("token")
        var app = this
        var pathUrl = URL +
          `action=add_download_log&id=${id}&token=${token}&link_url=${link_url}&file_id=${file_id}`
        this.$http.request({
          url: pathUrl
        }, 'GET').then(res => {

          let a = document.createElement('a')
          a.href = link_url
          a.click();

        })

      },


      //微信分享
      wechatShare() {
        var id = this.$route.query.id
        var token = localStorage.getItem("token")
        var app = this
        //必须要url编码,如果不变吗,url的参数值里面有&拼接会被当做接口参数以及参数值,再次发送
        let url = encodeURIComponent(window.location.href)
        var pathUrl = URL +
          `action=get_config&id=${id}&token=${token}&url=${url}`
        this.$http.request({
          url: pathUrl
        }, 'GET').then(res => {
          console.log("wechatShare_get_config", res)
          if (res.data.sta == 200) {
            let data = res.data

            //设置网页标题
            document.title = res.data.res.share_title

            //通过config接口注入权限验证配置
            wx.config({
              debug: 0,
              appId: data.res.appId,
              timestamp: data.res.timestamp,
              nonceStr: data.res.nonceStr,
              signature: data.res.signature,
              jsApiList: ["updateTimelineShareData", "updateAppMessageShareData", "showAllNonBaseMenuItem",
                "hideAllNonBaseMenuItem", "showMenuItems", "onMenuShareAppMessage", "onMenuShareTimeline"
              ],
            });
            //console.log(data.res.appId)
            //console.log(data.res.timestamp)
            //console.log(data.res.nonceStr)
            //console.log(data.res.signature)

            //通过ready接口处理成功验证
            wx.ready(function() {
              //展示所有基础类型按钮,20211012日,微信增加了直接访问网址,出现一个拦截,这种情况下不显示分享按钮,先收藏然后在分享就可以,bug
              wx.showAllNonBaseMenuItem();
              /*
              wx.hideAllNonBaseMenuItem();
              wx.showMenuItems({
                menuList: ["menuItem:share:appMessage", "menuItem:share:timeline",
                  "updateAppMessageShareData", "updateAppMessageShareData"
                ] // 要显示的菜单项,所有menu项见附录3
              });*/
              /*
              //注释掉新版,旧的才会生效
              wx.updateAppMessageShareData({
                title: data.res.share_title,
                desc: data.res.share_desc,
                link: window.location.href,
                //link: "http://www.baidu.com",
                imgUrl: data.res.share_img,
                success: function() {
                  console.log("设置成功1")
                },
                cancel: function(res) {
                  console.log('分享失败1');
                },
                complete: function(res) {
                  console.log("complete1");
                },
                trigger: function(res) {
                  console.log("trigger1");
                }
              })
              wx.updateTimelineShareData({
                title: data.res.share_title,
                desc: data.res.share_desc,
                link: window.location.href,
                //link: "http://xiu.lizengtong.com/index.php?id=600",
                imgUrl: data.res.share_img,
                success: function(res) {
                  console.log('设置成功2');
                },
                cancel: function(res) {
                  console.log('分享失败2');
                },
                complete: function(res) {
                  console.log("complete2");
                },
                trigger: function(res) {
                  console.log("trigger2");
                }
              });
              */
              //旧的版本还有分享成功回调。不过不知道能用多久还
              wx.onMenuShareAppMessage({
                title: data.res.share_title, // 分享标题
                desc: data.res.share_desc, // 分享描述
                link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: data.res.share_img, // 分享图标
                type: '', // 分享类型,music、video或link,不填默认为link
                dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
                success: function() {
                  // 用户点击了分享后执行的回调函数
                  //alert("分享执行成功了1")
                  var link = escape(window.location.href)
                  var desc = data.res.share_desc
                  var title = data.res.share_title
                  var imgUrl = data.res.share_img
                  var share_type = "1"
                  var pathUrl = URL +
                    `action=notify_share_success&id=${id}&token=${token}&link=${link}&desc=${desc}&title=${title}&imgUrl=${imgUrl}&share_type=${share_type}`
                  app.$http.request({
                    url: pathUrl
                  }, 'GET').then(res => {
                    console.log("notify_share_success", res)
                  })


                }
              });
              wx.onMenuShareTimeline({
                title: data.res.share_title, // 分享标题
                link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: data.res.share_img, // 分享图标
                success: function() {
                  // 用户点击了分享后执行的回调函数
                  //alert("分享执行成功了2")
                  var link = escape(window.location.href)
                  var desc = ""
                  var title = data.res.share_title
                  var imgUrl = data.res.share_img
                  var share_type = "2"
                  var pathUrl = URL +
                    `action=notify_share_success&id=${id}&token=${token}&link=${link}&desc=${desc}&title=${title}&imgUrl=${imgUrl}&share_type=${share_type}`
                  app.$http.request({
                    url: pathUrl
                  }, 'GET').then(res => {
                    console.log("notify_share_success", res)
                  })
                }
              });


            });
          }
        })
      },

      // 复制成功时的回调函数
      onCopy(e) {
        Toast.success('内容已复制到剪切板');
      },
      copy_log(link_url, file_id) {
        //调用日志记录接口
        var id = this.$route.query.id
        var token = localStorage.getItem("token")
        var app = this
        var pathUrl = URL +
          `action=add_copy_log&id=${id}&token=${token}&link_url=${link_url}&file_id=${file_id}`
        this.$http.request({
          url: pathUrl
        }, 'GET').then(res => {})


      },


      // 复制失败时的回调函数
      onError(e) {
        Toast.fail('抱歉,复制失败!');
      },
      scroll_left() {
        let scroll_left1 = this.$refs.left1.scrollTop
        //console.log(scroll_left1);
        //存储 scrollTop 的值
        this.scroll_left1 = scroll_left1;

      },
      scroll_right() {
        let scroll_right1 = this.$refs.right1.scrollTop
        //console.log(scroll_right1);
        //存储 scrollTop 的值
        this.scroll_right1 = scroll_right1;

      }

    },
    created() {

      //初始化
      this.initShow()

    },
    mounted() {

    },
    activated() {

      //微信分享,第一次加载执行created和activated,但是从详情页面切换回来,只能执行activated,所以,分享内容重置以及title改变放到这里面
      this.wechatShare()

      if (this.$refs.left1) {
        this.$refs.left1.scrollTop = this.scroll_left1
        this.$refs.right1.scrollTop = this.scroll_right1
      }

    }
  }
</script>

<style scoped="scoped">
  /*商品名字默认值*/
  .good_name {
    color: black;
    font-size: 14px;
    font-weight: 400
  }

  /*商品价格默认值*/
  .good_price {
    color: black;
    font-size: 14px;
    font-weight: 400
  }

  .top1 img {
    width: 100%;
  }

  .top1 .address {
    width: 100%;
    height: 1.6rem;
    line-height: 1.6rem;
    background-color: #f2f2f2;
    display: flex;
    justify-content: space-around;
    margin-top: -0.1875rem;
    font-size: 0.625rem;
  }

  .bottom1 {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    justify-content: space-between;
    margin-top: 0rem;
  }

  .bottom1 .left1 {
    width: 26%;
    /* background-color:#00982E; */
    /* overflow: scroll; */
    margin-top: 0rem;
    background-color: #fff;
    display: block;
    /*    justify-content: center;
    flex-wrap: wrap; */
    margin-left: 0rem;
    /* height: 35rem; */
    height: calc(100vh - 180px);
    overflow: hidden;
    overflow-y: scroll;
  }

  .left1 .nav {
    width: 95%;
    margin: -0.3125rem auto;
  }


  .left1 .cate1 {
    font-size: 0.825rem;
    background-color: var(--bg_color);
    color: var(--new_font_color);
    height: var(--new_height);
    width: 95%;
    //height: 3.6rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border: 0.0625rem solid #B0B6BD;
    border-radius: 10px;
    margin-bottom: 0.3rem;
    /* margin-left: 0.625rem; */
    /* color: #a4def2; */
    /* font-weight: bold; */
    font-family: "微软雅黑";
  }

  .left1 .leftcolorchange {
    /*background-color: #a4def2 !important;*/
    background-color: var(--check_bg_color);
    color: var(--new_font_color);
    height: var(--new_height);
    border-radius: 10px;
    border: none !important;
  }

  /*通过hover的方式废弃,因为点击别的空白区域取消选中,页面第一次打开默认第一个选中也无法实现
  .cate1:hover {
    background-color: #a4def2 !important;
    border-radius: 10px;
    border: none !important;
  }
  */


  .bottom1 .right1 {
    width: 73%;
    height: calc(100vh - 180px);
    overflow: hidden;
    overflow-y: scroll;
  }

  .right1 .goods {
    width: 40%;
    height: 10.5rem;
    display: inline-block;
    margin-left: 1.3rem;
    margin-top: 0.6875rem;
    position: relative;
    /* top: 0.625rem; */
    left: -0.8rem;
  }

  .right1 .goods dt {
    width: 7rem;
    height: 7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    /*border: 0.0625rem solid #a4def2;*/
    /*border-radius: 15px;*/
    border: 1px solid #b6b6b6;
    border-radius: 5px;
    margin-top: 1.25rem;
  }

  .right1 .goods dt img {
    width: 6.5rem;
    height: 6.1875rem;
  }

  .right1 .goods .title {
    width: 6.25rem;
    position: absolute;
    top: 8.5rem;
    left: -1.875rem;
    color: #646464 !important;
    font-family: "微软雅黑";
    font-size: 0.75rem;
  }

  .right1 .goods .price {
    position: absolute;
    top: 18.75rem;
    left: 2.1875rem;
    color: #646464;
    font-family: "微软雅黑";
    font-weight: 500;
    font-size: 20px;
  }

  .goods1 img {
    width: 99%;
    margin-left: 0;
    margin-top: -0.8rem;
  }

  .right1 .most {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: #999;
    font-size: 14px;
    margin-top: 3.75rem;
  }
</style>

本文标签:

版权声明:若无特殊注明,本文皆为《菜鸟站长》原创,转载请保留文章出处。

本文链接:vue页面style标签里面使用接口返回颜色变量实践 - https://wlphp.com/?post=344

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论

1条评论
  1. avatar

    Henrywet Lv.1 回复

    现在每个人都可以赚多少钱。 https://wet.187sued.de/gotodate/promo

    IP数据库文件不存在或者禁止访问或者已经被删除!