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

2022年4月16日 1条评论

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>

 
<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标签里面使用接口返回颜色变量实践

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