Skip to content

M
mayi-mp-shop
Commit c55539ab by 程默
Options

Merge branch 'product_dev' of http://code.mayi888.com/chengmo/mayi-mp-shop into product_dev

parents 55977c02 83e55891
Showing with 4516 additions and 82 deletions
src/App.vue
...@@ -47,4 +47,7 @@ export default { ...@@ -47,4 +47,7 @@ export default {
-webkit-transition: width 2s; -webkit-transition: width 2s;
-o-transition: width 2s; -o-transition: width 2s;
} }
@import url("../static/font/iconfont.css");
@import url('../static/css/common.scss');
</style> </style>
src/api/live.js
...@@ -69,4 +69,8 @@ export default { ...@@ -69,4 +69,8 @@ export default {
addShareRecord(options) { addShareRecord(options) {
return requestPOST(`${process.env.OLSHOP_URL}/liveBroadcastInfo/addShareRecord`,options); return requestPOST(`${process.env.OLSHOP_URL}/liveBroadcastInfo/addShareRecord`,options);
}, },
//获取服务器时间戳
queryServerTimeNow(){
return requestGET(`${process.env.OLSHOP_URL}/liveBroadcastInfo/getServerTimeNow`)
}
}; };
\ No newline at end of file
src/api/liveing.js 0 → 100644
import {requestPOST,requestGET} from "@/utils/request.js";
export default {
//获取直播间列表
queryLiveList(){
return requestGET(`${process.env.OLSHOP_URL}/liveBroadcastInfo/getList`)
},
//获取直播间详情
queryLiveDetail(options){
return requestGET(`${process.env.OLSHOP_URL}/liveBroadcastInfo/queryDetail`,options)
},
//更新直播状态
updateLiveStatus(options){
return requestPOST(`${process.env.OLSHOP_URL}/liveBroadcastInfo/updateStateByLiveId`,options)
},
//获取直播评论
queryLiveComments(options){
return requestPOST(`${process.env.OLSHOP_URL}/liveBroadcastInfo/getLiveStateById`,options)
},
//获取商品列表接口
queryProductList(options){
return requestGET(`${process.env.OLSHOP_URL}/liveBroadcastGoods/getListByLiveBroadcastId`,options)
},
//直播商品上下屏
queryProductUpDown(options){
return requestPOST(`${process.env.OLSHOP_URL}/liveBroadcastGoods/updateUpperScreenByGoodsIdAndLiveId`,options)
},
//获取已完成的直播
queryCompleteLive(options){
return requestPOST(`${process.env.OLSHOP_URL}/liveBroadcastInfo/historyRecord`,options)
},
//完成的直播详情
queryCompleteDetail(options){
return requestGET(`${process.env.OLSHOP_URL}/liveBroadcastInfo/getLiveStatisticsById`,options)
},
//获取服务器时间戳
queryServerTimeNow(){
return requestGET(`${process.env.OLSHOP_URL}/liveBroadcastInfo/getServerTimeNow`)
}
}
\ No newline at end of file
src/app.json
...@@ -7,7 +7,11 @@ ...@@ -7,7 +7,11 @@
"pages/wxPay/main", "pages/wxPay/main",
"pages/counter/main", "pages/counter/main",
"pages/address/main", "pages/address/main",
"pages/contact/main" "pages/contact/main",
"pages/liveList/main",
"pages/historyLive/main",
"pages/liveOver/main",
"pages/live/main"
], ],
"window": { "window": {
"backgroundTextStyle": "light", "backgroundTextStyle": "light",
......
src/components/comments/index.vue 0 → 100644
<template>
<!-- 评论模块 -->
<div class="livedIsMsg">
<div class="list">
<scroll-view :style="{'max-height': '24vh','width':'52vw'}" :scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true" @scrolltolower="scrolltolower">
<div class="item flex" v-for="(item,index) in commentsList" :key="index">
<div class="user">
<p class="live"></p>
<div class="name">
<span class="user">{{item.customerName}}：</span><span class="test">{{item.guestbookContent}}</span>
</div>
</div>
</div>
</scroll-view>
</div>
</div>
</template>
<script type="text/ecmascript-6">
export default {
name: "",
props:{
id:{
type:Number,
default:0
},
commentsList:{
type:Array,
default:null
},
updateVal:{
type:{
type:Number,
default:0
}
}
},
data() {
return {
list: [],
scrollTop:0,
};
},
watch:{
updateVal(){
this.scrollTop=this.commentsList.length*1000;
}
},
onLoad(){
},
methods: {
scrolltolower(){
},
}
};
</script>
<style lang="scss" scoped>
/* 一行否则出现省略号 */
.line-clamp1 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.livedIsMsg {
padding: 8px;
margin-bottom: 10px;
position: fixed;
left: 12px;
bottom: 20vh;
.list {
width: 50vw;
overflow: hidden;
bottom: 0;
padding-left: 10px;
background-color: rgba(0,0,0,0.3);
.item {
width: 50vw;
padding: 4px 0;
display: flex;
align-items: flex-start;
.user {
.name {
color: #f9a93c;
font-size: 12px;
}
}
.test {
font-size: 12px;
color: #f1f1f1;
word-break: break-all;
}
}
}
}
</style>
src/components/common/navbar.vue 0 → 100644
<template>
<div
class="navbar"
:style="{'height' : navHeight + 'px','padding-top':navTop+'px'}"
>
<div class="back" @click="back">
<span class="iconfont iconzuo"></span>
</div>
<div class="user-info" v-if="!isSetBeauty" :style="{'width' : liveInfo.liveBroadcastState != 0 ? '160px' : '114px'}">
<div class="user-info-left">
<div class="avatar">
<img :src="liveInfo.logoUrl" alt="">
</div>
<div class="username text-overflow" v-if="!status">{{liveInfo.shopName}}</div>
</div>
<div class="logining-info" v-if="status">
<div class="info-left">
<div class="login-name text-overflow">{{liveInfo.title}}</div>
<div class="login-time">{{time}}</div>
</div>
</div>
<div class="over-live" @click="endLive" v-if="liveInfo.liveBroadcastState ==1 || liveInfo.liveBroadcastState == 3">结束</div>
</div>
</div>
</template>
<script>
import { setTimes } from '../../utils'
import liveApi from '@/api/liveing'
export default {
props:{
navTop:{
type:Number,
default:0
},
navHeight:{
type:Number,
default:0
},
type:{ //1:直播间 2：结束直播间
type:Number,
default:1
},
isLive : {
type:Boolean,
default : false
},
//直播间id
id : {
type : Number,
default:0
},
isSetBeauty : {
type:Boolean,
default:false
},
pusher:{
type:Object,
default:null
},
realStartTime:{
type:Number,
default:0
},
liveInfo:{
type:Object,
default : null
}
},
data(){
return{
status : false,
userInfo : null,
time : '00:00:00',
starttime : 0,
timer : null,
}
},
watch:{
isLive(newVal,oldVal){
this.status = newVal && this.type == 1 ? true : false
this.starttime = this.realStartTime
if(newVal){
this.liveTimeHandler()
}
}
},
created(){
},
onShow(){
clearInterval(this.timer)
},
onReady(){
this.userInfo = this.$store.state.userInfo;
},
onHide(){
clearInterval(this.timer)
},
onUnload(){
clearInterval(this.timer)
},
methods:{
//结束直播
endLive(){
wx.showModal({
title: '',
content: '是否结束本场直播',
confirmText : '结束直播',
confirmColor : '#07c160',
success : res => {
if (res.confirm) {
this.$emit('changeOver',0);
this.changeLiveStatus(2);
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
back(){
if(this.isSetBeauty){
this.$emit('closeSetBeauty',false)
}else{
if(this.type == 1 && this.liveInfo.liveBroadcastState == 1){
liveApi.updateLiveStatus({
id : this.id,
liveBroadcastState : 3
}).then(res => {
if(res.data.code == '200'){
console.log('stop')
this.pusher.pause()
clearInterval(this.timer); //结束直播
wx.reLaunch({url:'../liveList/main'})
}
})
}else if(this.type == 1 && this.liveInfo.liveBroadcastState == 0){
wx.reLaunch({url:'../liveList/main'})
}else if(this.type == 2){
wx.reLaunch({url:'../liveList/main'})
}else if(this.type == 3){
wx.redirectTo({url:`../historyLive/main`})
}else{
wx.navigateBack();
}
}
},
//改变直播状态
changeLiveStatus(val){
liveApi.updateLiveStatus({
id : this.id,
liveBroadcastState : val
}).then(res => {
if(res.data.code == '200'){
if(val == 2){
// console.log(this.queryDataTimer + '2222222')
console.log('over')
clearInterval(this.timer); //结束直播
this.$emit('clearAllInterval')
}
//
console.log(this.id)
console.log(JSON.stringify(this.liveInfo))
this.$set(this.liveInfo,'boStream','')
this.$set(this.liveInfo,'tuiStream','')
wx.navigateTo({url:`../liveOver/main?id=${this.id}&liveInfo=${JSON.stringify(this.liveInfo)}`})
// wx.reLaunch({url:`../liveList/main`})
}
})
},
liveTimeHandler(){
if(this.isLive){
this.time = setTimes(++this.starttime);
this.timer = setInterval(() => {
this.time = setTimes(++this.starttime);
},1000)
}
}
}
}
</script>
<style scoped lang="scss">
.navbar{
box-sizing: border-box;
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 100;
display: flex;
align-items: center;
.back{
width: 33.5px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.iconzuo{
color: white;
font-size: 13px;
}
}
.user-info{
.user-info-left{
display: flex;
justify-content: flex-start;
align-items: center;
}
height: 30px;
line-height: 30px;
background-color: rgba(0,0,0,.6);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: space-between;
.avatar{
width: 26px;
height: 26px;
border-radius: 50%;
overflow: hidden;
// background-color: rosybrown;
// padding: 4px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
img{
width: 100%;
height: 100%;
}
}
.username{
width: 75px;
text-align: center;
font-size: 12px;
color: white;
}
.logining-info{
.info-left{
text-align: center;
width: 70px;
color: white;
margin-left: 10px;
.login-name{
width: 70px;
font-size: 12px;
line-height: 14px;
}
.login-time{
font-size: 10px;
line-height: 14px;
}
}
}
.over-live{
width: 35px;
height: 19px;
border-radius: 9.5px;
text-align: center;
line-height: 19px;
font-size: 12px;
color: white;
margin-right : 4px;
background-image:-webkit-linear-gradient(to right,#FF877D, #FB566D);
background-image:-moz-linear-gradient(to right,#FF877D, #FB566D);
background-image:-o-linear-gradient(to right,#FF877D, #FB566D);
background-image: linear-gradient(to right,#FF877D, #FB566D);
}
}
}
</style>
\ No newline at end of file
src/components/product/index.vue 0 → 100644
<template>
<div class="popup-wrap">
<van-popup
:show="productDialogStatus"
position="bottom"
:overlay="true"
@close="close"
custom-style="height:399px;border-top-left-radius: 16px;border-top-right-radius: 16px;z-index:100;"
lock-scoll= "true"
>
<div class="product-title" v-if="productList.length">商品列表({{productList.length}})</div>
<div class="product-list" v-if="productList.length">
<div class="item" v-for="(item,index) in productList" :key="index">
<div class="item-index">{{item.number}}</div>
<div class="item-img">
<image :src="item.productImgUrl" mode="aspectFill" alt=""></image>
</div>
<div class="item-detail">
<div class="product-name text-overflow2">
{{item.productName}}
</div>
<div class="product-bottom">
<div class="product-price">￥{{item.minPrice}}</div>
<div
class="product-do product-up"
@click="setProductStatus(1,item.productId,item)"
v-if="item.upperScreenState == 0 || item.upperScreenState == 2"
>
上屏
</div>
<div
class="product-do product-down"
@click="setProductStatus(0,item.productId,item)"
v-if="item.upperScreenState == 1"
>
下屏
</div>
</div>
</div>
</div>
</div>
<div class="product-no-list" v-else >
暂无商品
</div>
</van-popup>
</div>
</template>
<script>
export default {
props:{
productDialogStatus:{
type:Boolean,
default:false
},
productList:{
type:Array,
default:null
}
},
data(){
return {
list : [],
}
},
watch:{
productList(newVal){
this.productList = newVal
}
},
created(){
},
methods:{
close(){
this.$emit('hideProductPopup',false)
},
setProductStatus(type,id,item,index){
this.$emit('changeProduct',type,id,item)
}
}
}
</script>
<style scoped lang="scss">
.popup-wrap{
position: relative;
z-index: 100;
}
.product-title{
width: 100%;
height: 45px;
line-height: 45px;
font-size: 16px;
color: #333333;
padding-left: 16.5px;
box-sizing: border-box;
}
.product-list{
width: 100%;
height: 350px;
overflow-y: auto;
.item{
display: flex;
justify-content: space-between;
padding: 16px 16.5px;
border-bottom: 1px solid #EEEEED;
position: relative;
.item-index{
position: absolute;
width: 19px;
height: 16px;
color: white;
text-align: center;
line-height: 16px;
background-color: #999;
border-top-left-radius: 4px;
border-bottom-right-radius: 4px;
font-size: 12px;
}
.item-img{
width: 90px;
height: 90px;
border-radius:4px;
background-color: #B1B1B1;
margin-right: 16.5px;
overflow: hidden;
image{
width: 100%;
height: 100%;
object-fit: cover;
}
}
.item-detail{
width: 220.5px;
position: relative;
.product-name{
font-size: 15px;
color: #333333;
}
.product-bottom{
width: 100%;
margin-top: 25px;
position: absolute;
bottom: 0;
left: 0;
.product-price{
font-size: 18px;
color: #FF0000;
float: left;
}
.product-do{
width: 64px;
height: 24px;
text-align: center;
line-height: 24px;
border-radius: 12px;
font-size: 15px;
box-sizing: border-box;
float: right;
}
.product-up{
color: white;
background-image:-webkit-linear-gradient(to right,#FF877D, #FB566D);
background-image:-moz-linear-gradient(to right,#FF877D, #FB566D);
background-image:-o-linear-gradient(to right,#FF877D, #FB566D);
background-image: linear-gradient(to right,#FF877D, #FB566D);
}
.product-down{
color: #FF4240;
border: 1px solid #FF4240;
}
}
}
}
}
.product-no-list{
text-align: center;
padding-top: 40px;
line-height: 18px;
color: #999;
}
</style>
\ No newline at end of file
src/components/setting/index.vue 0 → 100644
<template>
<div class="setting-wrap">
<div class="set-box">
<div class="set-content" :style="{'bottom':isLive ? '150px' : '190px'}">
<div class="beauty" v-show="active == 1">
<slider
left-icon="cancel"
right-icon="success_no_circle"
min="0"
max="9"
:value="beauty"
activeColor="#FF9900"
block-color="#FF9900"
block-size="24"
@changing="setBeauty"
/>
</div>
<div class="whitening" v-show="active == 2">
<slider
left-icon="cancel"
right-icon="success_no_circle"
min="0"
max="9"
:value="whiteness"
activeColor="#FF9900"
block-color="#FF9900"
block-size="24"
@changing="setWhiteness"
/>
</div>
<div class="clear" v-show="active == 3">
<div class="clear-content">
<div class="clear-item" v-for="(item,index) in clearList" @click="setClear(item)" :key="index">
<div class="clear-item-name" :class="item.id == clearActive ? 'clear-active' :''">{{item.name}}</div>
</div>
</div>
</div>
<div class="equipment-wrap" v-show="active == 4">
<div class="equipment">
<div class="equ-item" v-for="(item,index) in equipmentList" :key="index" @click="equipmentSet(item,index)">
<div class="equ-item-img">
<!-- <img :src="item.imgActive" v-if="item.active" alt=""> -->
<img :src="item.img" alt="">
</div>
<div class="equ-item-name">
{{item.name}}
</div>
</div>
</div>
</div>
</div>
<div class="select-wrap">
<div class="select-list">
<div class="item" v-for="(item,index) in selectList" :key="index" @click="active = item.id">
<div class="item-img">
<img :src="item.img" v-show="item.id != active" alt="">
<img :src="item.activeImg" v-show="item.id == active" alt="">
</div>
<div class="item-name">
{{item.name}}
</div>
</div>
</div>
<div class="start-btn" @click="startLive" v-if="!isLive && liveInfo.liveBroadcastState == 0">
确认开始
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props:{
pusher:{
type:Object,
default:null
},
//美颜
beauty:{
type:Number,
default:0
},
//美白
whiteness:{
type:Number,
default:0
},
//清晰度
clear:{
type:String,
default:'HD'
},
//前置或后置
devicePosition:{
type:String,
default:'front'
},
//麦克风是否开启
enableMic:{
type:Boolean,
default : true
},
//镜像
remoteMirror:{
type:String,
default : 'enable'
},
//是否在直播
isLive:{
type:Boolean,
default:false
},
liveInfo:{
type:Object,
default:null
}
},
data(){
return{
selectList:[
{
id : 1,
name : '美颜',
img : require('../../../static/images/meiyan.png'),
activeImg : require('../../../static/images/meiyan1.png')
},
{
id : 2,
name : '美白',
img : require('../../../static/images/meibai.png'),
activeImg : require('../../../static/images/meibai1.png')
},
{
id : 3,
name : '清晰度',
img : require('../../../static/images/qingxi.png'),
activeImg : require('../../../static/images/qingxi1.png')
},
{
id : 4,
name : '设备',
img : require('../../../static/images/shebei.png'),
activeImg : require('../../../static/images/shebei1.png')
}
],
active : 1,
equipmentList :[
{
id : 1,
name : '反转',
img :require('../../../static/images/xiangji.png'),
imgActive : require('../../../static/images/xiangji1.png'),
active : true,
},
{
id : 2,
name : '镜像',
img :require('../../../static/images/jingxiang.png'),
imgActive : require('../../../static/images/jingxiang1.png'),
active : false,
},
{
id : 3,
name : '声音',
img :require('../../../static/images/shengyin.png'),
imgActive : require('../../../static/images/shengyin1.png'),
active : true,
}
],
clearList:[
{
id : 1,
name : '标清',
val : 'SD'
},
{
id : 2,
name : '高清',
val : 'HD'
},
{
id : 3,
name : '超清',
val : 'FHD'
}
],
clearActive:2,
}
},
methods:{
setBeauty(e){
this.$emit('updateBeauty',e.mp.detail.value)
},
setWhiteness(e){
this.$emit('updateWhiteness',e.mp.detail.value)
},
setClear(item){
this.clearActive = item.id;
this.$emit('updateClear',item.val)
},
equipmentSet(item,index){
//反转
if(item.id == 1){
this.pusher.switchCamera({
success : (res) => {
if(res.errMsg == 'operateXWebLivePusher:ok'){
this.$set(this.equipmentList[index],'active',!item.active)
}
}
})
}else if(item.id == 2){
this.$set(this.equipmentList[index],'active',!item.active)
this.$emit('updateRemoteMirror',this.remoteMirror == 'disable' ? 'enable' : 'disable')
}else if(item.id == 3){
this.$set(this.equipmentList[index],'active',!item.active)
this.$emit('updateEnableMic',this.enableMic == true ? false : true)
}
},
//开始直播
startLive(){
//判断网络环境
wx.getNetworkType({
success : (res) => {
if(res.errMsg == 'getNetworkType:ok'){
if(res.networkType != 'wifi'){
wx.showModal({
title: '流量提醒',
content: '你目前处于非WIFI环境，是否继续',
confirmText : '继续',
confirmColor : '#07c160',
success : (res1) => {
if (res1.confirm) {
this.$emit('setBeautyStart','start')
console.log('用户点击确定')
} else if (res1.cancel) {
// console.log('用户点击取消')
}
}
})
}else{
this.$emit('setBeautyStart','start')
}
}
}
})
}
}
}
</script>
<style lang="scss" scoped>
.set-content{
width: 289px;
position: fixed;
left: 50%;
margin-bottom: 60px;
margin-left: -149px;
.beauty,.whitening{
padding: 0 18px;
box-sizing: border-box;
}
.clear{
.clear-content{
display: flex;
justify-content:space-between;
.clear-item{
display: flex;
align-items: flex-end;
.clear-item-name{
font-size: 19px;
color: white;
}
.clear-active{
font-size: 30px;
position: relative;
&::after{
content: "";
position: absolute;
width: 7px;
height: 7px;
background-color: #FF9900;
border-radius: 50%;
bottom: -12px;
left: 50%;
margin-left: -3.5px;
}
}
}
}
}
.equipment-wrap{
.equipment{
display: flex;
justify-content: space-around;
align-items: center;
.equ-item{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
&:nth-child(1){
.equ-item-img{
width: 26.5px;
height: 21px;
}
}
&:nth-child(2){
.equ-item-img{
width: 27px;
height: 24.5px;
}
}
&:nth-child(3){
.equ-item-img{
width: 25px;
height: 21.5px;
}
}
&:nth-child(4){
.equ-item-img{
width: 24.5px;
height: 24px;
}
}
.equ-item-img{
img{
width: 100%;
height: 100%;
}
}
.equ-item-name{
font-size: 12px;
color: white;
margin-top: 13px;
}
.name-active{
color: #FF9900;
}
}
}
}
}
.select-wrap{
width: 289px;
// height: 265px;
padding-bottom: 15px;
background-color: rgba(0,0,0,.5);
border-radius: 5px;
position: fixed;
bottom: 82px;
left: 50%;
margin-left: -145.5px;
box-sizing: border-box;
.select-list{
display: flex;
justify-content: space-around;
align-items: center;
padding-top: 13px;
.item{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
&:nth-child(1){
.item-img{
width: 28px;
height:27px;
}
}
&:nth-child(2){
.item-img{
width: 23px;
height: 30px;
}
}
&:nth-child(3){
.item-img{
width:30px;
height: 30px;
}
}
&:nth-child(4){
.item-img{
width: 29px;
height: 29px;
}
}
.item-img{
img{
width: 100%;
height: 100%;
}
}
.item-name{
font-size: 12px;
color: white;
margin-top: 10px;
}
}
}
.start-btn{
width: 144px;
height: 39.5px;
text-align: center;
line-height: 39.5px;
font-size: 18px;
color: white;
border-radius: 5px;
margin: 10px auto 0;
background-image:-webkit-linear-gradient(to right,#FF877D, #FB566D);
background-image:-moz-linear-gradient(to right,#FF877D, #FB566D);
background-image:-o-linear-gradient(to right,#FF877D, #FB566D);
background-image: linear-gradient(to right,#FF877D, #FB566D);
}
}
</style>
\ No newline at end of file
src/pages/historyLive/index.vue 0 → 100644
<template>
<div class="container" :style="{'padding-top':navHeight +'px'}">
<div class="navbar" :style="{'height' : navHeight + 'px','padding-top':navTop+'px'}">
<div @click="toLiveList" class="history-btn">
<span class="iconfont iconzuo"></span>
</div>
<div class="navbar-title">直播计划</div>
</div>
<div class="uprefresh" v-if="isUprefresh">正在刷新...</div>
<div class="history-list">
<div class="list-item" v-for="(item,index) in list" :key="index" @click="liveDetail(item)">
<div class="item-top">
<div class="top-img">
<img :src="item.logoUrl" alt="">
</div>
<div class="top-name">{{item.shopName}}</div>
</div>
<div class="item-info">
<div class="info-poster">
<image :src="item.coverUrl" mode="aspectFill" alt=""></image>
</div>
<div class="info-detail">
<div class="detail-name">{{item.title}}</div>
<div class="detail-time">开播时间:{{item.startTime}}</div>
<div class="detail-data">
<div class="look data-icon">
<span class="iconfont iconyanjing"></span>
{{item.watchNum}}
</div>
<div class="thumbs data-icon">
<span class="iconfont iconicon_huabanfuben"></span>
{{item.likeNum}}
</div>
<div class="comment data-icon">
<span class="iconfont iconpinglun"></span>
{{item.guestBookNum}}
</div>
</div>
</div>
</div>
</div>
</div>
<van-divider
class="no-more"
v-if="isNoMore"
contentPosition="center"
customStyle="border-color: #ccc;"
>
已经到底了
</van-divider>
</div>
</template>
<script>
import liveApi from '@/api/liveing'
import { DFSImg,getNavbarInfo } from '../../utils/common.js'
export default {
data(){
return{
list:[],
currentPage : 1,
pageSize : 5,
pages : 0,
navTop : '',
navHeight : '',
isUprefresh :false,
isNoMore : false,
}
},
methods:{
getLiveHandler(type){
if(type == 'init'){
wx.showLoading({
title : '加载中'
})
}
liveApi.queryCompleteLive({
pageSize : this.pageSize,
currentPage : this.currentPage
}).then(res => {
if(res.data.code == '200'){
wx.hideLoading()
this.pages = res.data.pages;
if(type == 'refresh'){
wx.hideNavigationBarLoading();
this.isUprefresh = false;
// 停止下拉动作
wx.stopPullDownRefresh();
res.data.data.forEach(item => {
item.coverUrl = DFSImg(item.coverUrl)
item.logoUrl = DFSImg(item.logoUrl)
item.startTime = `${item.startTime.split(' ')[0]} ${item.startTimeByWeek} ${item.startTime.split(' ')[1].substr(0,5)}`
})
this.list = res.data.data;
}else if(type == 'more'){
res.data.data.forEach(item => {
item.coverUrl = DFSImg(item.coverUrl)
item.logoUrl = DFSImg(item.logoUrl)
item.startTime = `${item.startTime.split(' ')[0]} ${item.startTimeByWeek} ${item.startTime.split(' ')[1].substr(0,5)}`
this.list.push(item)
})
if(res.data.current == res.data.pages){
this.isNoMore = true;
}
}else{
res.data.data.forEach(item => {
item.coverUrl = DFSImg(item.coverUrl)
item.logoUrl = DFSImg(item.logoUrl)
item.startTime = `${item.startTime.split(' ')[0]} ${item.startTimeByWeek} ${item.startTime.split(' ')[1].substr(0,5)}`
})
this.list = res.data.data;
}
}
}).catch(error => {
wx.showToast({ title: error, icon: "none" });
wx.hideLoading()
})
},
liveDetail(item){
wx.navigateTo({url:`../liveOver/main?id=${item.id}&type=3&liveInfo=${JSON.stringify(item)}`})
},
toLiveList(){
wx.reLaunch({url:`../liveList/main`})
}
},
onShow(){
this.isUprefresh = false;
this.isNoMore = false;
this.currentPage = 1;
this.getLiveHandler('init')
},
created(){
//获取导航栏信息
getNavbarInfo((res) => {
this.navTop = res.navTop
this.navHeight = res.navHeight
})
},
onPullDownRefresh(){
this.isUprefresh = true;
this.currentPage = 1;
this.getLiveHandler('refresh');
wx.showNavigationBarLoading();
},
onReachBottom(){
if(this.currentPage < this.pages){
++this.currentPage;
this.getLiveHandler('more');
}
},
}
</script>
<style scoped lang="scss">
img{
width: 100%;
height: 100%;
}
.container{
min-height: 100vh;
background-color: #efefef;
padding-bottom: 24px;
}
.navbar{
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background-color: white;
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 10;
.history-btn{
width: 24px;
height: 24px;
position: absolute;
left: 16px;
.iconfont{
font-size: 15px;
color: #323232;
}
}
.navbar-title{
font-size: 14px;
color: #000;
text-align: center;
}
}
.uprefresh{
line-height: 30px;
font-size: 16px;
color: #999;
text-align: center;
}
.history-list{
width: 100%;
box-sizing: border-box;
padding: 12px 12px 0 12px;
.list-item{
width: 100%;
background-color: white;
border-radius: 4px;
padding: 0 12px 16px;
margin-bottom: 12px;
box-sizing: border-box;
.item-top{
display: flex;
justify-content: flex-start;
align-items: center;
height: 42px;
margin-bottom: 4px;
.top-img{
width: 27px;
height: 27px;
border-radius: 50%;
overflow: hidden;
background-color: #B5B5B5;
margin-right: 6px;
}
.top-name{
font-size: 15px;
color: #333333;
}
}
.item-info{
width: 100%;
display: flex;
justify-content: flex-start;
justify-items: center;
.info-poster{
width: 90px;
height: 90px;
border-radius: 3px;
background-color: #B5B5B5;
margin-right: 16px;
overflow: hidden;
image{
width: 100%;
height: 100%;
}
}
.info-detail{
.detail-name{
font-size: 15px;
color: #333333;
}
.detail-time{
font-size: 13px;
color: #999999;
line-height: 34px;
}
}
.detail-data{
color: #999;
font-size: 13px;
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 14px;
.data-icon{
margin-right: 16px;
font-size: 13px;
}
}
}
}
}
.no-more{
width: 90%;
line-height: 30px;
font-size: 16px;
color: #999;
text-align: center;
}
</style>
\ No newline at end of file
src/pages/historyLive/main.js 0 → 100644
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
src/pages/historyLive/main.json 0 → 100644
{
"navigationBarTitleText":"直播计划",
"enablePullDownRefresh":true,
"navigationStyle":"custom",
"usingComponents": {
"van-divider": "/static/vant/divider/index"
}
}
\ No newline at end of file
src/pages/index/index.vue
...@@ -94,6 +94,10 @@ export default { ...@@ -94,6 +94,10 @@ export default {
} else if (options.from && options.from == "livedBackShop") { } else if (options.from && options.from == "livedBackShop") {
//直播页back到商城 //直播页back到商城
this.page = decodeURIComponent(options.backpath); this.page = decodeURIComponent(options.backpath);
} else if(options.from && options.from == "liveList"){
//从主播端跳到商品
this.page = decodeURIComponent(options.backpath);
this.params += "&" + serialize(options.params);
} else if (options.from && options.from == "livedToGoodsInfo") { } else if (options.from && options.from == "livedToGoodsInfo") {
//从直播详情商品列表到商城商品详情 //从直播详情商品列表到商城商品详情
this.page = decodeURIComponent(options.backpath); this.page = decodeURIComponent(options.backpath);
......
src/pages/live/index.vue 0 → 100644
<template>
<div class="container" :style="{'padding-top':navHeight +'px'}">
<div class="masker"></div>
<live-pusher
id="pusher"
:url="tuiStream"
:mode="clear"
bindstatechange="statechange"
:beauty="beauty"
:enable-camera="enableCamera"
:whiteness="whiteness"
:device-position="devicePosition"
:enable-mic="enableMic"
:remote-mirror="remoteMirror"
:local-mirror="remoteMirror"
style="width: 100%; height: 100vh;position:fixed;top:0;left:0;z-index:-1"
@statechange="statechange"
@error="binderror"
@netstatus="bindnetstatus"
/>
<image class="bg-img" v-if="isBgImg" :src="liveInfo.coverUrl" mode="aspectFill" alt=""></image>
<div class="content" :style="{'padding-top':navHeight +'px'}">
<navBar
:navTop="navTop"
:navHeight="navHeight"
:isSetBeauty="isSetBeauty"
:isLive="isLive"
:type="1"
:id="liveId"
:pusher="pusher"
:liveInfo="liveInfo"
:realStartTime="realStartTime"
@closeSetBeauty="closeSetBeauty"
@clearAllInterval="clearAllInterval"
@changeOver="changeOver"
>
</navBar>
<div class="live-active" v-if="!isSetBeauty">
<span>{{look}} 观看</span>
<span>{{praise}} 赞</span>
<span>{{online}} 在线</span>
</div>
<!-- 开播倒计时 -->
<div class="countdown" v-show="isCountDown">
{{liveCountDown}}
</div>
<!-- 还没开始直播 -->
<div class="wait-start" v-show="noStartLive">
<div class="title">{{liveInfo.title}}</div>
<div class="open-live-title">{{!liveTimeStatus ? '开播倒计时' : '已超时，请尽快开始'}}</div>
<div class="wait-time">{{liveTime}}</div>
<div class="start-btn" @click="toSetBeauty('start')">开始直播</div>
</div>
<!-- 直播异常 -->
<div class="unusual-wrap" v-show="recoverLive">
<div class="title">{{liveInfo.title}}</div>
<div class="unusual-text">直播异常中断</div>
<div class="recover-btn" @click="checkLiveEnv('recover')">恢复直播</div>
</div>
<!-- 公告 -->
<div class="notice" v-show="!isSetBeauty">
公告：{{liveInfo.liveNotice}}
</div>
<!-- 设置 -->
<div class="setting-wrap" @click="setBeauty" v-show="!isSetBeauty && !isCountDown">
<img class="set-img" src="../../../static/images/shezhi.png" alt="">
</div>
<!-- 商品 -->
<div class="product-wrap" v-show="!isSetBeauty && liveInfo.liveBroadcastSales == 0" @click="showPopup">
<div class="product-num">{{productList.length}}</div>
<img class="product-img" src="../../../static/images/shangpin.png" alt="">
</div>
<!-- 商品弹窗 -->
<product
:productList="productList"
:productDialogStatus="productDialogStatus"
@hideProductPopup="hideProductPopup"
@changeProduct="changeProduct"
>
</product>
<!-- 讲解商品列表 -->
<div class="speak-product" v-show="!isSetBeauty && isLive">
<!-- <div class="speak-product"> -->
<div class="speak-item" v-for="(item,index) in speakProductList" :key="index">
<div class="item-status">
讲解中
</div>
<div class="item-top">
<img :src="item.productImgUrl" alt="">
</div>
<div class="item-bottom">
￥{{item.minPrice}}
</div>
</div>
</div>
<!-- 设置 -->
<setting
:pusher="pusher"
:beauty="beauty"
:whiteness="whiteness"
:clear="clear"
:devicePosition="devicePosition"
:enableMic="enableMic"
:remoteMirror="remoteMirror"
:isLive="isLive"
:liveInfo="liveInfo"
@updateBeauty="updateBeauty"
@updateWhiteness="updateWhiteness"
@updateClear="updateClear"
@updateDevicePosition="updateDevicePosition"
@updateRemoteMirror="updateRemoteMirror"
@updateEnableMic="updateEnableMic"
v-if="isSetBeauty"
@setBeautyStart="startLive"
>
</setting>
<!-- 评论 -->
<comments v-if="!isSetBeauty" :updateVal="updateVal" :id="liveId" :commentsList="commentsList"></comments>
<!-- 用户进入通知 -->
<div class="userComing userComingAni" v-if="userComing && !isSetBeauty">
<span>{{entryNoticeText}}</span>
<span>来了</span>
</div>
</div>
</div>
</template>
<script>
import navBar from '@/components/common/navbar.vue'
import product from '@/components/product'
import setting from '@/components/setting'
import comments from '@/components/comments'
import { getNavbarInfo,DFSImg } from '../../utils/common.js'
import liveApi from '@/api/liveing'
export default {
data(){
return{
navTop : '',
navHeight : '',
isSetBeauty : false, //是否点击了设置
isUsual : false, //直播异常
productDialogStatus : false, //商品弹出框状态
isLive : false, //是否在直播
enableCamera : false, //是否开启摄像头
isPruductUp : false,
speakProductList : [],
pusher:null,
beauty:5, //美颜
whiteness:5,//美白
clear:'HD',
devicePosition : 'front', //前置或者后置 back => 后置
enableMic: true, //麦克风是否开启
remoteMirror:'enable', //镜像
userInfo : null,
liveInfo : {}, //直播信息
liveTime :'', //开播时间
liveTimeStatus : false , //是否超时
liveCountDown : 3, //开播倒计时
isCountDown : false, //是否显示倒计时
liveId : '', //直播间id
userComing: false,
entryNoticeText : '', //进入通知
online : 0, //在线
look : 0, //观看
praise:0, //点赞
commentsList : [], //评论
noStartLive : false,//还没开始直播,
recoverLive : false,//恢复直播
openLiveTimer : null, //开播时间定时器
tuiStream : '', //推流
productList : [], //商品列表
realStartTime : 0, //直播时间
liveDetailTimer : null, //获取直播评论等数据的定时器
getProductTimer : null, //刷新商品定时器
isBgImg : true, //是否展示背景图片
openRecordSet : false, //控制录音授权
openCameraSet : false, //控制相机授权
isChangeProduct : true, //是否可以上下屏,防止多次点击上下屏
isTimeLock : true, //时间锁
isTimeFirstReq : true, //第一次数据请求
updateVal : 0,
overOrStop : 1, //是暂停还是结束
}
},
watch:{
//用户通知
entryNoticeText(){
if(this.entryNoticeText){
this.userComing=true;
setTimeout(() => {
this.userComing=false;
}, 4600);
}else{
this.userComing=false;
}
},
//开关摄像头
enableCamera(){
if(this.isLive){
this.enableCamera = true
this.isBgImg = false;
}
},
// tuiStream(oldval,newval){
// if(newval){
// console.log('tuiStream',newval)
// this.tuiStream = newval
// }
// }
},
components:{
navBar,
product,
setting,
comments
},
created(){
//获取导航栏信息
getNavbarInfo((res) => {
this.navTop = res.navTop
this.navHeight = res.navHeight
})
},
onLoad(options){
this.isLive = false;
this.enableCamera = false;
this.isSetBeauty = false;
this.noStartLive = false;
this.recoverLive = false;
this.realStartTime = 0;
this.isBgImg = true;
this.isTimeLock = true;
this.isTimeFirstReq = true;
this.overOrStop = 1;
this.online = 0 //在线
this.look = 0 //观看
this.praise = 0 //点赞
this.liveInfo = {}
this.liveTime = '';
this.liveId = options.id;
this.getLiveDetail(options.id); //传入直播间id
this.getServerTimeNow(); //获取服务器时间戳
},
onReady(){
this.userInfo = this.$store.state.userInfo;
this.pusher = wx.createLivePusherContext('pusher')
},
onShow(){
wx.setKeepScreenOn({
keepScreenOn: true
})
if(this.openRecordSet){
this.openRecordSet = false;
this.getAuthSet('record')
}
if(this.openCameraSet){
this.openCameraSet = false;
this.getAuthSet('camera');
}
},
onHide(){
this.commentsList = []
this.clearAllInterval()
console.log('onHide',this.overOrStop)
if(this.overOrStop){
if(this.liveInfo.liveBroadcastState == 1){
this.changeLiveStatus(3)
this.isSetBeauty = false;
}
}
// this.isSetBeauty = false;
},
onUnload(){
this.commentsList = []
this.clearAllInterval()
this.changeLiveStatus(3)
},
methods:{
getAuthSet(type){
wx.getSetting({
success :(res) => {
if(type == 'record'){
if (!res.authSetting["scope.record"]) {
this.openConfirm(type);
}
}else if(type == 'camera'){
if (!res.authSetting["scope.camera"]) {
this.openConfirm(type);
}else{
this.enableCamera = true;
}
}
},
fail(res) {
console.log("调用失败");
}
});
},
openConfirm(type){
let contentText = '';
if(type == 'record'){
contentText = '检测到您没打开麦克风的权限，是否去设置打开？'
}else if(type == 'camera'){
this.enableCamera = false;
contentText = '检测到您没打开摄像头的权限，是否去设置打开？'
}
wx.showModal({
content: contentText,
confirmText : '确认',
confirmColor : '#07c160',
success : (res) => {
if (res.confirm) {
wx.openSetting({
success : (res1) => {
if(type == 'record'){
this.openRecordSet = true;
}else if(type == 'camera'){
this.openCameraSet = true;
}
}
});
} else if (res.cancel) {
wx.reLaunch({url:`../liveList/main`})
}
}
})
},
//点击设置美颜
setBeauty(){
this.enableCamera = true;
this.noStartLive = false;
this.recoverLive = false
this.isBgImg = false;
this.isSetBeauty = true;
this.pusher.startPreview()
},
showPopup(){
this.productDialogStatus = true
this.getProductList()
},
hideProductPopup(){
this.productDialogStatus = false
},
//设置美颜
updateBeauty(val){
this.beauty = val;
},
//设置美白
updateWhiteness(val){
this.whiteness = val;
},
//设置清晰度
updateClear(val){
this.clear = val
},
//镜像
updateRemoteMirror(val){
this.remoteMirror = val;
},
//麦克风
updateEnableMic(val){
this.enableMic = val;
},
//获取直播间详情
getLiveDetail(id){
liveApi.queryLiveDetail({id}).then(res => {
if(res.data.code == '200'){
let result = res.data.data
result.coverUrl = DFSImg(result.coverUrl)
result.logoUrl = DFSImg(result.logoUrl)
this.liveInfo = result;
this.tuiStream = result.tuiStream
if(result.liveBroadcastState == 0){
this.isLive = false
this.isBgImg = true;
this.noStartLive = true;
}else if(result.liveBroadcastState == 1){
this.enableCamera = true
this.isLive = true
this.isBgImg = false;
}else if(result.liveBroadcastState == 3){
this.recoverLive = true;
this.isUsual = true;
this.isBgImg = true;
}
if(result.realStartTime){
this.realStartTime = Math.floor((new Date().getTime() - new Date(result.realStartTime.replace(/-/g, '/').replace(/-/g, '/')).getTime())/1000)
}else{
this.realStartTime = 0
}
this.getLiveTimeHandler(result.startTime)
// clearInterval(this.openLiveTimer)
this.openLiveTimer = setInterval(() => {
this.getLiveTimeHandler(result.startTime)
},5000)
this.getProductList(); //获取商品列表
this.getProductTimer = setInterval(() => {
this.getProductList(); //获取商品列表
},30000)
}
})
},
//获取开播时间
getLiveTimeHandler(time){
let getTime = new Date(time.replace(/-/g, '/')).getTime() - new Date().getTime();
let getTimeAbs = Math.abs(getTime)
let hours = '';
let minute = '';
let day = '';
if(getTime > 0){
this.liveTimeStatus = false
}else{
this.liveTimeStatus = true
}
day = Math.floor(getTimeAbs / (3600*1000*24))
hours = Math.floor((getTimeAbs%(24*3600*1000))/(3600*1000));
minute = Math.ceil((getTimeAbs%(24*3600*1000)%(3600*1000) )/(60*1000))
if(getTime > 0){
if(day > 0){
this.liveTime = `${day >= 10 ? day : '0' + day}天${hours >= 10 ? hours : '0' + hours}小时${minute >= 10 ? minute : '0' + minute}分`
}else if(day <= 0 && hours > 0){
this.liveTime = `${hours >= 10 ? hours : '0' + hours}小时${minute >= 10 ? minute : '0' + minute}分`
}else if(day <= 0 && hours <= 0 && minute > 0){
this.liveTime = `${minute >= 10 ? minute : '0' + minute}分`
}
}else{
this.liveTime = `${15 - minute}分钟后关闭`
}
},
//开始直播去设置美颜
toSetBeauty(type){
this.noStartLive = false;
this.isSetBeauty = true;
this.enableCamera = true;
this.isBgImg = false;
this.pusher.startPreview()
},
//检测直播环境
checkLiveEnv(type){
wx.getNetworkType({
success :(res) => {
if(res.errMsg == 'getNetworkType:ok'){
if(res.networkType != 'wifi'){
wx.showModal({
title: '流量提醒',
content: '你目前处于非WIFI环境，是否继续',
confirmText : '继续',
confirmColor : '#07c160',
success :(res1) => {
if (res1.confirm) {
liveApi.queryLiveDetail({id : this.liveId}).then(res2 => {
if(res2.data.code == '200'){
if(res2.data.data.liveBroadcastState == 4 || res2.data.data.liveBroadcastState == 2){
wx.showModal({
title: '提示',
content: '直播超时已关闭',
success (res3) {
if (res3.confirm) {
wx.reLaunch({url:`../liveList/main`})
} else if (res3.cancel) {
console.log('用户点击取消')
}
}
})
}else{
this.startLive(type);
}
}
})
} else if (res1.cancel) {
// console.log('用户点击取消')
}
}
})
}else{
this.startLive(type);
}
}
}
})
},
//开始直播
startLive(type){
if(type == 'recover'){
this.recoverLive = false;
this.isUsual = false;
}else if(type == 'start'){
this.noStartLive = false;
}
this.isPruductUp = true;
this.liveCountDown = 3;
this.isCountDown = true;
let timer = setInterval(() => {
--this.liveCountDown;
if(this.liveCountDown == 0){
console.log('开始直播')
this.pusher.start(); //开始推流
this.isCountDown = false;
this.isSetBeauty = false;
clearInterval(timer)
this.changeLiveStatus(1);
}
},1000)
},
//改变直播状态
changeLiveStatus(val){
liveApi.updateLiveStatus({
id : this.liveId,
liveBroadcastState : val
}).then(res => {
if(res.data.code == '200'){
if(val == 1){
this.isLive = true;
this.enableCamera = true;
this.isBgImg = false;
this.pusher.resume();
}else if(val == 3){
this.isLive = false;
this.recoverLive = true;
this.isBgImg = true;
this.enableCamera = false;
this.pusher.pause();
}
this.$set(this.liveInfo,'liveBroadcastState',val)
// this.pusher.resume();
}
})
},
//设置点击右上角返回
closeSetBeauty(val){
this.isSetBeauty = val;
this.isBgImg = true;
this.enableCamera = false;
if(this.liveInfo.liveBroadcastState == 0){
this.noStartLive = true;
}else if(this.liveInfo.liveBroadcastState == 1){
this.noStartLive = false;
this.recoverLive = false;
}else if(this.liveInfo.liveBroadcastState ==3){
this.recoverLive = true;
}
},
//定时查询数据
timeGetInfo(serverTime){
let newCommentsTime = serverTime
clearInterval(this.liveDetailTimer)
this.liveDetailTimer = setInterval(() => {
if(this.isTimeLock){
//第一次请求用服务器的时间减去2秒
this.isTimeLock = false;
let dataTime = this.isTimeFirstReq ? serverTime - 2000 : newCommentsTime
liveApi.queryLiveComments({
id: Number(this.liveId),
beginTime: dataTime
}).then(res => {
if(res.data.code == '200'){
this.isTimeFirstReq = false;
this.isTimeLock = true;
let result = res.data.data;
if(result.liveState == 'IN_LIVE' || result.liveState == 'SUSPEND_LIVE' || result.liveState == 'NO_LIVE'){
//用户通知
this.entryNoticeText = "";
if (result.entryNoticeList.length > 0) {
if (result.entryNoticeList.length == 1) {
this.entryNoticeText = `${result.entryNoticeList[0].userName}`;//用户进入
} else {
this.entryNoticeText = `${
result.entryNoticeList[0].userName
}等${result.entryNoticeList.length}人`;//用户进入
}
}
//在线
this.look = result.historyWatchNum;
//观看
this.online = result.watchNum
//点赞
this.praise = result.likeInfo.likeNum
//评论
result.guestBookList.forEach(item => {
this.commentsList.push(item)
})
if(result.guestBookList && result.guestBookList.length){
newCommentsTime = result.guestBookList[result.guestBookList.length - 1].createTimeStamp
}
this.updateVal = new Date().getTime(); //监听使用数据
}
}
})
}else{
console.log('上次请求未结束，进行了下一次请求')
}
},2000)
},
//服务器时间戳
getServerTimeNow(){
liveApi.queryServerTimeNow().then(res => {
if(res.data.code == 200){
//定时查询数据
this.timeGetInfo(res.data.data);
}
})
},
//推流状态
statechange(e){
console.log('statechange',e.mp.detail)
if(e.mp.detail.code == -1307){
this.isLive = false;
this.clearAllInterval()
wx.showToast({ title: e.mp.detail.message, icon: "none" });
}
},
binderror(e){
console.log('binderror',e.mp.detail)
if(e.mp.detail.errCode == 10002){ //禁用麦克风
this.getAuthSet('record')
}
if(e.mp.detail.errCode == 10001){ //禁用摄像头
this.getAuthSet('camera')
}
},
bindnetstatus(e){
console.log('binderror',e.mp.detail)
},
//获取商品列表
getProductList(){
liveApi.queryProductList({id : this.liveId}).then(res => {
if(res.data.code == '200'){
let productIdArr = []
let productIdArr1 = []
this.productList.forEach(item2 => {
productIdArr.push(item2.productId)
})
res.data.data.forEach(item1 => {
productIdArr1.push(item1.productId)
})
if(JSON.stringify(productIdArr) != JSON.stringify(productIdArr1)){
this.speakProductList = [];
res.data.data.forEach(item => {
item.productImgUrl = DFSImg(item.productImgUrl)
item.minPrice = Number(item.minPrice).toFixed(2)
if(item.upperScreenState == '1'){
this.speakProductList.push(item)
}
})
this.productList = res.data.data
}
}
})
},
//商品上下屏
changeProduct(type,id,item){
if(this.isChangeProduct){
this.isChangeProduct = false;
liveApi.queryProductUpDown({
productId : id,
liveBroadcastId : this.liveId,
upperScreenState : type
}).then(res => {
this.isChangeProduct = true;
if(res.data.code == '200'){
console.log('上下屏')
if(type == 1){
if(this.speakProductList.length == 1){
if(Number(item.number) < Number(this.speakProductList[0].number)){
this.speakProductList.unshift(item)
}else{
this.speakProductList.push(item)
}
}else{
this.speakProductList.push(item)
}
this.productList.forEach((productItem,productIndex) => {
if(productItem.productId == id){
this.$set(this.productList[productIndex],'upperScreenState',1)
}
})
}else{
this.speakProductList.forEach((i,index) => {
if(i.productId == id){
this.speakProductList.splice(index,1)
}
})
this.productList.forEach((productItem,productIndex) => {
if(productItem.productId == id){
this.$set(this.productList[productIndex],'upperScreenState',0)
}
})
}
console.log(this.productList)
}else{
wx.showModal({
title: '提示',
content: res.data.msg,
success (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
})
}
},
//结束直播清除相关定时器
clearAllInterval(){
clearInterval(this.openLiveTimer)
clearInterval(this.getProductTimer)
clearInterval(this.liveDetailTimer)
},
changeOver(val){
this.overOrStop = 0;
}
}
}
</script>
<style scoped lang="scss">
@mixin btn {
width: 148px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 16px;
color: white;
border-radius: 8px;
background-image:-webkit-linear-gradient(to right,#FF877D, #FB566D);
background-image:-moz-linear-gradient(to right,#FF877D, #FB566D);
background-image:-o-linear-gradient(to right,#FF877D, #FB566D);
background-image: linear-gradient(to right,#FF877D, #FB566D);
}
.container{
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
box-sizing: border-box;
}
.masker{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(102,102,102,0.38);
}
.bg-img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.content{
width: 100%;
height: 100vh;
z-index: 10;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.live-active{
width: 155px;
height: 17px;
background-color: rgba(0,0,0,.6);
margin-left: 36px;
border-radius: 17px;
font-size: 10px;
color: white;
display: flex;
align-items: center;
justify-content: space-around;
}
.wait-start{
text-align: center;
margin-top: 20vh;
.title{
font-size: 18px;
color: white;
font-weight: bold;
}
.open-live-title{
font-size: 15px;
color: #EEEEED;
line-height: 50px;
}
.wait-time{
font-size: 36px;
color: white;
font-weight: bold;
}
.start-btn{
@include btn;
margin: 23px auto 0;
}
}
.countdown{
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,.38);
padding-top: 35vh;
color: white;
font-size: 40px;
text-align: center;
z-index: 120;
}
.unusual-wrap{
text-align: center;
margin-top: 20vh;
color: white;
.title{
font-size: 18px;
font-weight: bold;
}
.unusual-text{
font-size: 36px;
line-height: 80px;
font-weight: bold;
}
.recover-btn{
@include btn;
margin: 20px auto 0;
}
}
.notice{
position: fixed;
left: 16px;
bottom: 60px;
width: 195px;
background-color: rgba(0,0,0,.4);
border-radius: 14px;
box-sizing: border-box;
padding: 10px 7px 7px 10px;
font-size: 12px;
color: white;
line-height: 18px;
}
.product-wrap{
position: fixed;
left: 19px;
bottom: 14px;
width: 31px;
height: 29px;
.product-num{
font-size:12px;
color: white;
width: 100%;
text-align: center;
position: absolute;
bottom: 4px;
}
.product-img{
width: 100%;
height: 100%;
}
}
.setting-wrap{
position: fixed;
right: 13px;
bottom: 14px;
width: 37px;
height: 37px;
.set-img{
width: 100%;
height: 100%;
}
}
.speak-product{
position: fixed;
left: 8px;
top:20vh;
.speak-item{
width: 78px;
margin-bottom: 15px;
border-radius: 2px;
overflow: hidden;
position: relative;
.item-status{
position: absolute;
top: 0;
left: 0;
width: 39px;
height: 12px;
color: white;
background-color: #FF4240;
border-bottom-right-radius: 2px;
font-size: 11px;
text-align: center;
line-height: 12px;
}
.item-top{
height: 78px;
background-color: #B1B1B1;
img{
width: 100%;
height: 100%;
}
}
.item-bottom{
height: 23px;
background-color: white;
text-align: center;
line-height: 23px;
font-size: 14px;
color: #FA7018;
}
}
}
.userComing {
margin-bottom: 10px;
background: rgba(#000, 0.4);
color: #fff;
font-size: 16px;
height: 26px;
line-height: 26px;
border-radius: 26px;
padding: 0 8px;
display: inline-block;
position: fixed;
bottom: 30vh;
}
.userComingAni {
animation: userComingAni 4.7s linear;
}
@keyframes userComingAni {
0% {
transform: translateX(150vw);
opacity: 0.3;
}
30% {
transform: translateX(24px);
opacity: 1;
}
80% {
transform: translateX(24px);
opacity: 1;
}
100% {
transform: translateX(-150vw);
opacity: 0;
}
}
</style>
\ No newline at end of file
src/pages/live/main.js 0 → 100644
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
src/pages/live/main.json 0 → 100644
{
"navigationStyle":"custom",
"usingComponents": {
"van-popup": "/static/vant/popup/index"
}
}
\ No newline at end of file
src/pages/liveList/index.vue 0 → 100644
<template>
<!-- <div class="container1" :style="{'padding-top':navHeight +'px'}"> -->
<div class="container1">
<!-- <div class="navbar" :style="{'height' : navHeight + 'px','padding-top':navTop+'px'}"> -->
<!-- <div @click="toHistory" class="history-btn" v-show="isLogin">
<img class="btn-img" src="../../../static/images/history.png" alt="">
</div> -->
<!-- <div @click="toHistory" class="history-btn">
<img class="btn-img" src="../../../static/images/history.png" alt="">
</div>
<div class="navbar-title">直播计划</div>
</div> -->
<div class="history-wrap">
<div class="history-box" @click="toHistory">
<img class="history-img" src="../../../static/images/history.png" alt="">
<span class="history-text">直播历史</span>
</div>
</div>
<div class="live-list" v-if="isLogin">
<div class="live-item" @click="toLive(item.id)" v-for="(item,index) in liveList" :key="index">
<div class="live-item-top">
<div class="top-img">
<img :src="item.logoUrl" alt="">
</div>
<div class="top-name">{{item.shopName}}</div>
</div>
<div class="live-posters">
<div class="posters-img">
<image :src="item.coverUrl" mode="aspectFill" alt=""></image>
<div class="masker"></div>
</div>
<div class="live-status">
<span class="status-text" v-show="item.liveBroadcastState == 0">
未开始
</span>
<span class="status-text" v-show="item.liveBroadcastState == 1">
直播中
</span>
<span class="status-text" v-show="item.liveBroadcastState == 2">
直播完成
</span>
<span class="status-text" v-show="item.liveBroadcastState == 3">
暂停直播
</span>
</div>
</div>
<div class="live-info">
{{item.title}}
</div>
<div class="live-time">开播时间： {{item.startTime}}</div>
</div>
</div>
<!-- 未登陆 -->
<div class="no-login-wrap" v-else>
<div class="no-info">
<div class="info-row1">暂无计划</div>
<div class="info-row2">授权登陆后查看</div>
</div>
<button class="login-btn" lang="zh_CN" open-type="getUserInfo" @getuserinfo="getUserInfo">立即登陆</button>
</div>
<div class="no-list" v-if="!liveList.length && isLogin">
暂无直播
</div>
<!-- 绑定手机号 -->
<div class="toCLogin1" v-if="isShowPhone">
<div class="btn_info1">
<h1>绑定手机号</h1>
<span class="hint">检测到您的账号还未绑定手机号，请绑定手机号</span>
<button class="btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">绑定手机号一键绑定</button>
<!-- <div class="btn2" @click="handbindHandle">手动绑定手机号</div> -->
</div>
<div class="layer" @click="isShowPhone=false"></div>
</div>
</div>
</template>
<script>
import { getNavbarInfo,DFSImg } from '../../utils/common.js'
import { wx_decode } from "@/utils/wxIndex.js";
import login from "@/api/login";
import indexApi from '@/api/liveing'
export default {
data(){
return{
navTop : '',
navHeight : '',
//直播计划列表
liveList : [],
//登录状态
isLogin : false,
isHaveUnion : '',
appid : '',
session_key: "",
openid : '',
unionId: "",
userInfo : '',
phoneNumber : '',
isShowPhone : false,//绑定手机号码状态
code : '',
shopId: process.env.SHOP_MIXID,
baseUrl: process.env.BASE_URL,
}
},
created(){
//获取导航栏信息
getNavbarInfo((res) => {
this.navTop = res.navTop
this.navHeight = res.navHeight
})
},
onShow(){
wx.setKeepScreenOn({
keepScreenOn: false
})
this.checkIsLogin();//检测登录状态
wx.checkSession({
success : () => {
//session_key 未过期，并且在本生命周期一直有效
wx.login({
success: res => {
this.code = res.code;
},
fail: err => {
reject(err);
}
}) //重新登录
},
fail : () => {
// session_key 已经失效，需要重新执行登录流程
wx.login({
success: res => {
this.code = res.code;
},
fail: err => {
reject(err);
}
}) //重新登录
}
})
},
onLoad(){
},
methods:{
//去商城首页
toIndex(){
let backPath = `/`;
let query = {
sessionid : wx.getStorageSync('sessionid') || '',
}
wx.reLaunch({
url: `../index/main?from=liveList&backpath=${
backPath
}&params=${JSON.stringify(query)}`
});
},
toHistory(){
wx.navigateTo({url:'../historyLive/main'})
},
//去直播间
toLive(id){
let openId = '';
this.liveList.forEach(item => {
if(item.liveBroadcastState == 3 || item.liveBroadcastState == 1){
openId = item.id
}
})
if(openId){
if(openId == id){
wx.navigateTo({url:'../live/main?id=' + id})
}else{
wx.showToast({ title: '同时只能开播一个直播间', icon: "none" });
}
}else{
wx.navigateTo({url:'../live/main?id=' + id})
}
},
getUserInfo(e){
wx.showLoading({
title: "加载中"
});
if(e.target.errMsg == "getUserInfo:ok"){
this.init().then(res => {
//存入openid
wx.setStorage({
key: "openid",
data: res.data.data.openid
});
if (res.data.data.isHaveUnion == "true") {
wx.setStorage({
key: "sessionid",
data: res.data.data.sessionId
});
this.isHaveUnion = true;
}else {
//需要绑定
this.isHaveUnion = false;
}
this.appid = res.data.data.appid;
this.session_key = res.data.data.session_key;
this.openid = res.data.data.openid;
this.checkLogin(e);
}).catch(error => {
wx.hideLoading();
wx.showToast({ title: error, icon: "none" });
})
}else{
wx.hideLoading();
wx.showToast({ title: "获取用户信息失败", icon: "none" });
}
},
init(){
return new Promise((resolve, reject) => {
login.miniLogin({ code: this.code}).then(res1 => {
if (res1.data.code == 200) {
resolve(res1);
} else {
reject(res1.data.msg);
}
})
.catch(err => {
reject(err);
});
});
},
checkLogin(e) {
if (this.isHaveUnion) {
wx.hideLoading();
var data = wx_decode(
this.appid,
this.session_key,
e.mp.detail.encryptedData,
e.mp.detail.iv
);
this.userInfo = JSON.parse(e.target.rawData);
this.$store.commit('setUserInfo',this.userInfo)
console.log(this.userInfo)
//是会员 直接登录
this.$store.commit('setLoginStatus',1)
this.isLogin = true;
this.isShowPhone = false;
this.getLiveList()
} else {
var data = wx_decode(
this.appid,
this.session_key,
e.mp.detail.encryptedData,
e.mp.detail.iv
);
this.unionId = data.unionId || "";
this.userInfo = JSON.parse(e.target.rawData);
this.$store.commit('setUserInfo',this.userInfo)
if (this.unionId) {
wx.hideLoading();
login.checkUnionid({ unionId: this.unionId, openId: this.openid })
.then(res => {
if (res.data.code == 200) {
if (res.data.data.isHaveUnion == "true") {
console.log('true===========')
wx.setStorage({
key: "sessionid",
data: res.data.data.sessionId
});
this.isLogin = true
this.$store.commit('setLoginStatus',1)
this.isShowPhone = false;
this.getLiveList()
} else {
//不是会员需要绑定手机号
this.isShowPhone = true;
}
}else{
this.isShowPhone = true;
}
})
.catch(err => {
wx.showToast({ title: err, icon: "none" });
wx.hideLoading();
});
}
else {
wx.hideLoading();
//不是会员需要绑定手机号
this.isShowPhone = true;
}
}
},
getPhoneNumber(e){
wx.checkSession({
success: () => {
//session_key 未过期，并且在本生命周期一直有效
if (e.target.errMsg == "getPhoneNumber:ok") {
// this.isShowPhone = false;
this.phoneNumber = wx_decode(
this.appid,
this.session_key,
e.mp.detail.encryptedData,
e.mp.detail.iv + ""
).phoneNumber;
this.bindUser();
}
},
fail: () => {
// session_key 已经失效，需要重新执行登录流程
// wx.login() //重新登录
}
});
},
bindUser() {
let query = {
openId: this.openid,
phoneNumber: this.phoneNumber,
unionId: this.unionId,
headImgUrl: this.userInfo.avatarUrl,
gender: this.userInfo.gender,
nickname: this.userInfo.nickName,
country: this.userInfo.country,
province: this.userInfo.province,
city: this.userInfo.city,
otherPhone: 0
};
login.bindUser(query).then(res => {
//绑定成功
if (res.data.code == 200) {
wx.setStorage({
key: "sessionid",
data: res.data.data.sessionId
});
this.isShowPhone = false;
wx.hideLoading();
this.$store.commit('setLoginStatus',1)
this.isLogin = true;
this.getLiveList()
}else{
wx.showToast({ title: res.data.msg, icon: "none" });
this.isShowPhone = false;
}
})
.catch(err => {
wx.showToast({ title: res.data.msg, icon: "none" });
console.log(err, "bindusererr");
});
},
checkIsLogin(){
let getOpenid = wx.getStorageSync("openid");
let getSessionid = wx.getStorageSync("sessionid");
if (getOpenid == "" || getSessionid == "") {
this.isLogin = false;
}
if(getOpenid && getSessionid){
this.$store.commit('setLoginStatus',1)
console.log('getOpenid2',getOpenid)
this.isLogin = true
this.getLiveList(); //获取直播计划列表
}
},
//获取直播计划列表
getLiveList(type){
wx.showLoading({
title : '加载中'
})
indexApi.queryLiveList().then(res => {
if(res.data.code == "200"){
wx.hideLoading()
if(type == 'refresh'){ //下拉刷新
wx.hideNavigationBarLoading();
// 停止下拉动作
wx.stopPullDownRefresh();
}
res.data.data.forEach(item => {
item.coverUrl = DFSImg(item.coverUrl)
item.logoUrl = DFSImg(item.logoUrl)
item.startTime = `${item.startTime.split(' ')[0]} ${item.startTimeByWeek} ${item.startTime.split(' ')[1].substr(0,5)}`
})
this.liveList = res.data.data;
}
}).catch(error => {
wx.showToast({ title: error, icon: "none" });
wx.hideLoading()
})
},
},
onPullDownRefresh(){
// wx.showLoading({
// title : '加载中'
// })
this.getLiveList('refresh')
}
}
</script>
<style scoped lang="scss">
@mixin btn {
width: 148px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 16px;
color: white;
border-radius: 8px;
background-image:-webkit-linear-gradient(to right,#FF877D, #FB566D);
background-image:-moz-linear-gradient(to right,#FF877D, #FB566D);
background-image:-o-linear-gradient(to right,#FF877D, #FB566D);
background-image: linear-gradient(to right,#FF877D, #FB566D);
}
img{
width: 100%;
height: 100%;
}
.container1{
min-height: 100vh;
height: 50vh;
padding-bottom: 12px;
background-color: #efefef;
}
.history-wrap{
width: 100%;
height: 50px;
background-color: white;
display: flex;
justify-content: flex-end;
border-top: 1px solid #efefef;
box-sizing: border-box;
.history-box{
width: 40%;
height: 50px;
box-sizing: border-box;
padding-right: 10px;
display: flex;
justify-content: flex-end;
align-items: center;
.history-img{
width: 21px;
height: 21px;
margin-right: 6px;
}
.history-text{
font-size: 16px;
color: #666;
}
}
}
.navbar{
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background-color: white;
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 10;
.history-btn{
width: 21px;
height: 21px;
position: absolute;
left: 16px;
.btn-img{
width: 100%;
height: 100%;
}
}
.navbar-title{
font-size: 14px;
color: #000;
text-align: center;
}
}
.live-list{
box-sizing: border-box;
padding: 12px 12px 0 12px;
.live-item{
width: 100%;
background-color: white;
border-radius: 4px;
padding: 0 12px 16px;
box-sizing: border-box;
margin-bottom: 12px;
.live-item-top{
display: flex;
justify-content: flex-start;
align-items: center;
height: 42px;
.top-img{
object-fit: fill;
width: 27px;
height: 27px;
border-radius: 50%;
overflow: hidden;
background-color: #B5B5B5;
margin-right: 6px;
}
.top-name{
font-size: 15px;
color: #333333;
}
}
.live-posters{
width: 100%;
height: 184px;
background-color: #B5B5B5;
border-radius: 4px;
position: relative;
overflow: hidden;
.posters-img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 4px;
overflow: hidden;
.masker{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background-color: rgba(102,102,102,.38);
}
image{
width: 100%;
height: 100%;
}
}
.live-status{
padding: 0 9px;
height: 20px;
border-radius: 2px;
background-color: rgba(0, 0, 0, 0.8);
color: #FEFEFE;
font-size: 12px;
position: absolute;
bottom: 5px;
left: 5px;
line-height: 20px;
box-sizing: border-box;
padding-left: 22px;
z-index: 3;
.status-text{
&::before{
content: "";
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: white;
top:8px;
left: 10px;
}
}
}
}
.live-info{
font-size: 15px;
color: #333333;
line-height: 34px;
}
.live-time{
font-size: 13px;
color: #999999;
}
}
}
.no-login-wrap{
text-align: center;
padding-top: 20vh;
.no-info{
.info-row1{
font-size: 30px;
color: #999999;
}
.info-row2{
font-size: 15px;
line-height: 30px;
color: #999999;
}
}
.login-btn{
@include btn;
margin: 45px auto 0;
}
}
.no-list{
text-align: center;
padding-top: 20vh;
font-size: 30px;
color: #999999;
}
.toCLogin1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 10;
.btn_info1 {
position: absolute;
top: 30vh;
box-sizing: border-box;
left: 10%;
width: 80%;
color: #000;
align-items: center;
justify-content: space-around;
border: 1px solid #000;
border-radius: 5px;
padding: 15px;
z-index: 10;
background-color: #fff;
h1 {
text-align: center;
font-size: 22px;
margin: 10px 15px;
font-weight: 700;
}
.btn {
margin-top: 25px;
background-color: #01d10c;
color: #fff;
height: 45px;
line-height: 45px;
border-radius:5px;
font-size: 16px;
}
}
.layer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 1;
}
}
</style>
\ No newline at end of file
src/pages/liveList/main.js 0 → 100644
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
src/pages/liveList/main.json 0 → 100644
{
"enablePullDownRefresh":true,
"navigationBarTitleText":"直播计划"
}
\ No newline at end of file
src/pages/liveOver/index.vue 0 → 100644
<template>
<div class="container" :style="{'padding-top':navHeight +'px'}">
<image class="bg-img" :src="overInfo.coverUrl" mode="aspectFill" alt=""></image>
<navBar :navTop="navTop" :liveInfo="liveInfo" :navHeight="navHeight" :type="type"></navBar>
<div class="live-over">
<div class="over-text">直播已结束</div>
<div class="live-time">直播时长：{{overInfo.liveTime}}</div>
</div>
<div class="live-info">
<div class="info-row item-row-one">
<div class="info-item">
<div class="item-num">{{overInfo.watchNum}}</div>
<div class="item-text">观看</div>
</div>
<div class="info-item">
<div class="item-num">{{overInfo.goodsClickNum}}</div>
<div class="item-text">商品点击</div>
</div>
</div>
<div class="info-row">
<div class="info-item">
<div class="item-num">{{overInfo.shareNum}}</div>
<div class="item-text">分享</div>
</div>
<div class="info-item">
<div class="item-num">{{overInfo.guestBookNum}}</div>
<div class="item-text">评论</div>
</div>
<div class="info-item">
<div class="item-num">{{overInfo.likeNum}}</div>
<div class="item-text">赞</div>
</div>
</div>
</div>
</div>
</template>
<script>
import navBar from '@/components/common/navbar.vue'
import { getNavbarInfo,DFSImg } from '../../utils/common.js'
import liveApi from '@/api/liveing'
export default {
data(){
return{
navTop : '',
navHeight : '',
type : 2,
overInfo : {},
liveInfo : {}
}
},
components:{
navBar
},
created(){
//获取导航栏信息
getNavbarInfo((res) => {
this.navTop = res.navTop
this.navHeight = res.navHeight
})
},
onShow(){
this.overInfo = {}
},
onLoad(options){
this.overInfo = {}
if(options.type){
this.type = options.type;
}
this.liveInfo = JSON.parse(options.liveInfo)
this.getOverInfo(options.id)
},
methods:{
getOverInfo(id){
liveApi.queryCompleteDetail({
id : id
}).then(res => {
// console.log(res.data.code == 200)
if(res.data.code == 200){
// console.log(res.data.data)
res.data.data.coverUrl = DFSImg(res.data.data.coverUrl)
this.overInfo = res.data.data
console.log(this.overInfo)
}
})
}
},
}
</script>
<style scoped lang="scss">
.container{
width: 100%;
height: 100vh;
box-sizing: border-box;
background-color: rgba(102,102,102,.38);
overflow: hidden;
position: fixed;
top: 0;
left: 0;
.bg-img{
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.live-over{
color: white;
text-align: center;
padding-top: 25vh;
.over-text{
font-size: 36px;
color: #FFFFFF;
font-weight: bold;
}
.live-time{
font-size: 15px;
line-height: 30px;
}
}
.live-info{
font-size: 18px;
color: white;
margin-top: 10vh;
width: 100%;
.info-row{
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 40px;
font-weight: bold;
.info-item{
text-align: center;
}
}
.item-row-one{
width: 100%;
padding: 0 60px;
box-sizing: border-box;
.info-item{
width: 50%;
}
}
}
}
</style>
\ No newline at end of file
src/pages/liveOver/main.js 0 → 100644
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
src/pages/liveOver/main.json 0 → 100644
{
"navigationStyle":"custom"
}
\ No newline at end of file
src/pages/lived/index.vue
...@@ -120,7 +120,12 @@ export default { ...@@ -120,7 +120,12 @@ export default {
hasInvitationStatus: 0, // 邀请资格：0-不能够邀请下级，1-能够邀请下级 hasInvitationStatus: 0, // 邀请资格：0-不能够邀请下级，1-能够邀请下级
spokesmanObj: {}, //分销员信息 spokesmanObj: {}, //分销员信息
navTop: 0, navTop: 0,
navHeight: 0 navHeight: 0,
isTimeLock : true, //时间锁
isTimeFirstReq : true, //第一次数据请求
newCommentsTime : 0,
}; };
}, },
components: { components: {
...@@ -131,6 +136,9 @@ export default { ...@@ -131,6 +136,9 @@ export default {
}, },
computed: {}, computed: {},
onLoad(options) { onLoad(options) {
this.isTimeLock = true;
this.isTimeFirstReq = true;
this.newCommentsTime = 0;
wx.setKeepScreenOn({ wx.setKeepScreenOn({
keepScreenOn: true keepScreenOn: true
}); });
...@@ -170,16 +178,14 @@ export default { ...@@ -170,16 +178,14 @@ export default {
}); });
} }
this.init(); this.init();
setTimeout(() => {
this.infoTiming = setInterval(() => {
this.timingGetInfo();
}, 5000);
}, 2000);
this.userEntry("IN"); this.userEntry("IN");
// 通过分享进入直播间重新查询订阅消息配置 // 通过分享进入直播间重新查询订阅消息配置
this.getMsgConfig(); this.getMsgConfig();
this.isLogin(); this.isLogin();
this.getServerTimeNow();
}, },
onShareAppMessage(options) { onShareAppMessage(options) {
...@@ -254,6 +260,7 @@ export default { ...@@ -254,6 +260,7 @@ export default {
// 调直播结束 // 调直播结束
this.endLived(); this.endLived();
} else { } else {
console.log('这里')
this.timingGetInfo(); this.timingGetInfo();
} }
if (this.liveNoticeInfo.liveBroadcastState != 2 && !this.goodTiming) { if (this.liveNoticeInfo.liveBroadcastState != 2 && !this.goodTiming) {
...@@ -330,84 +337,97 @@ export default { ...@@ -330,84 +337,97 @@ export default {
}); });
}, },
// 定时查询直播数据 // 定时查询直播数据
timingGetInfo() { timingGetInfo(serverTime) {
// 前五秒 if(this.isTimeLock){
let query = { this.isTimeLock = false;
id: Number(this.liveId), let dataTime = this.isTimeFirstReq ? serverTime - 2000 : this.newCommentsTime
beginTime: new Date().getTime() - 5000 // 前五秒
}; let query = {
live.getLiveStateById(query).then(res => { id: Number(this.liveId),
if (res.data.code == 200) { beginTime: dataTime
let resData = res.data.data; };
// 1、判断状态如果发生改变才init(); live.getLiveStateById(query).then(res => {
// 2、直播中给用户进入通知、评论、点赞数赋值 this.isTimeFirstReq = false;
if ( this.isTimeLock = true;
this.liveNoticeInfo.liveBroadcastState == 0 && if (res.data.code == 200) {
resData.liveState == "NO_LIVE"
) { let resData = res.data.data;
// 未开始且接口也未开始不作操作 // 1、判断状态如果发生改变才init();
} else if ( // 2、直播中给用户进入通知、评论、点赞数赋值
this.liveNoticeInfo.liveBroadcastState == 1 && if (
resData.liveState == "IN_LIVE" this.liveNoticeInfo.liveBroadcastState == 0 &&
) { resData.liveState == "NO_LIVE"
} else if ( ) {
this.liveNoticeInfo.liveBroadcastState == 0 && // 未开始且接口也未开始不作操作
resData.liveState == "IN_LIVE" } else if (
) { this.liveNoticeInfo.liveBroadcastState == 1 &&
console.log("未开始----直播中"); resData.liveState == "IN_LIVE"
// 未开始且接口直播中/直播中且接口已结束 ) {
this.init(); } else if (
} else if ( this.liveNoticeInfo.liveBroadcastState == 0 &&
(this.liveNoticeInfo.liveBroadcastState == 2 && resData.liveState == "IN_LIVE"
resData.liveState == "END_LIVE") || ) {
(this.liveNoticeInfo.liveBroadcastState == 1 && console.log("未开始----直播中");
resData.liveState == "END_LIVE") // 未开始且接口直播中/直播中且接口已结束
) {
console.log(
this.liveNoticeInfo.liveBroadcastState,
resData.liveState,
this.firstComing,
"直播中----结束",
"结束----结束"
);
//直播结束且接口已结束
if (this.firstComing) {
this.firstComing = false;
this.init(); this.init();
} else if (
(this.liveNoticeInfo.liveBroadcastState == 2 &&
resData.liveState == "END_LIVE") ||
(this.liveNoticeInfo.liveBroadcastState == 1 &&
resData.liveState == "END_LIVE")
) {
console.log(
this.liveNoticeInfo.liveBroadcastState,
resData.liveState,
this.firstComing,
"直播中----结束",
"结束----结束"
);
//直播结束且接口已结束
if (this.firstComing) {
this.firstComing = false;
this.init();
}
} else if (
this.liveNoticeInfo.liveBroadcastState == 1 &&
resData.liveState == "PAUSE_LIVE"
) {
this.liveNoticeInfo.liveBroadcastState = 3;
} else if (
this.liveNoticeInfo.liveBroadcastState == 3 &&
resData.liveState == "IN_LIVE"
) {
this.liveNoticeInfo.liveBroadcastState = 1;
} }
} else if ( // console.log("resData.guestBookList---》", resData.guestBookList)
this.liveNoticeInfo.liveBroadcastState == 1 && this.guestBookList = resData.guestBookList; //评论列表
resData.liveState == "PAUSE_LIVE" if(resData.guestBookList && resData.guestBookList.length){
) { this.newCommentsTime = resData.guestBookList[resData.guestBookList.length - 1].createTimeStamp
this.liveNoticeInfo.liveBroadcastState = 3;
} else if (
this.liveNoticeInfo.liveBroadcastState == 3 &&
resData.liveState == "IN_LIVE"
) {
this.liveNoticeInfo.liveBroadcastState = 1;
}
this.guestBookList = resData.guestBookList; //评论列表
this.likeInfo = resData.likeInfo; //点赞信息
// 直播中且接口直播中---主要操作
// 数据初始化
this.entryNoticeText = "";
this.liveNoticeInfo.watchNum = resData.watchNum; //观看人数
if (resData.entryNoticeList.length > 0) {
if (resData.entryNoticeList.length == 1) {
this.entryNoticeText = `${resData.entryNoticeList[0].userName}`; //用户进入
} else {
this.entryNoticeText = `${resData.entryNoticeList[0].userName}等${
resData.entryNoticeList.length
}人`; //用户进入
} }
this.likeInfo = resData.likeInfo; //点赞信息
// 直播中且接口直播中---主要操作
// 数据初始化
this.entryNoticeText = "";
this.liveNoticeInfo.watchNum = resData.watchNum; //观看人数
if (resData.entryNoticeList.length > 0) {
if (resData.entryNoticeList.length == 1) {
this.entryNoticeText = `${resData.entryNoticeList[0].userName}`; //用户进入
} else {
this.entryNoticeText = `${resData.entryNoticeList[0].userName}等${
resData.entryNoticeList.length
}人`; //用户进入
}
}
this.updateVal = Math.random(); //监听使用数据
} else {
// if (this.infoTiming) {
// clearInterval(this.infoTiming);
// }
} }
this.updateVal = Math.random(); //监听使用数据 });
} else { }else{
if (this.infoTiming) { console.log('上次请求未结束，进行了下一次请求')
clearInterval(this.infoTiming); }
}
}
});
}, },
// 获取商品列表 // 获取商品列表
getGoodsList() { getGoodsList() {
...@@ -459,6 +479,23 @@ export default { ...@@ -459,6 +479,23 @@ export default {
} }
}); });
}, },
//服务器时间戳
getServerTimeNow(){
live.queryServerTimeNow().then(res => {
if(res.data.code == 200){
//定时查询数据
// this.timingGetInfo(res.data.data);
this.newCommentsTime = res.data.data
console.log('newCommentsTime',this.newCommentsTime)
// setTimeout(() => {
this.infoTiming = setInterval(() => {
this.timingGetInfo(res.data.data);
}, 2000);
// }, 2000);
}
})
},
error(res) { error(res) {
console.log(res, "------------------237"); console.log(res, "------------------237");
}, },
......
src/store/mutations.js
...@@ -11,5 +11,28 @@ const mutations = { ...@@ -11,5 +11,28 @@ const mutations = {
state.offlineShopCode = code; state.offlineShopCode = code;
}, },
//设置登录状态
setLoginStatus(state,val){
wx.setStorage({
key: "isLogin",
data: val
});
state.isLogin = val;
},
//设置用户信息
setUserInfo(state,obj){
wx.setStorage({
key: "userInfo",
data: JSON.stringify(obj)
});
state.userInfo = obj;
},
//退出登录
logout(state){
wx.clearStorage()
state.isLogin = 0;
state.userInfo = null;
}
}; };
export default mutations export default mutations
\ No newline at end of file
src/store/state.js
let isLogin = 0;
let userInfo = null;
if(wx.getStorageSync('isLogin')){
isLogin = wx.getStorageSync('isLogin')
}
if(wx.getStorageSync('userInfo')){
userInfo = JSON.parse(wx.getStorageSync('userInfo'))
}
const state = { const state = {
spokesmanGroupId: "", spokesmanGroupId: "",
spokesmanShopId: "", spokesmanShopId: "",
spokesmanRelId: "", spokesmanRelId: "",
subscribeMessageObj: {}, subscribeMessageObj: {},
offlineShopCode:"", offlineShopCode:"",
isLogin,
userInfo,
}; };
export default state export default state
\ No newline at end of file
src/utils/common.js 0 → 100644
export function getNavbarInfo(fn){
let menuInfo = wx.getMenuButtonBoundingClientRect(); //右上角胶囊信息
wx.getSystemInfo({
success : (res) =>{
fn({
navTop : res.statusBarHeight, //状态栏高度
navHeight : res.statusBarHeight + menuInfo.height + (menuInfo.top - res.statusBarHeight)*2 //导航栏高度
})
}
})
}
export function DFSImg(path, w, h){
let baseImg = process.env.IMG_DOMAIN ;
if (!Array.isArray(baseImg) && (baseImg.indexOf('aliyun') >= 0 || baseImg.indexOf('cdn') >= 0 )) {
var style = '';
if (w) style += ',w_' + w;
if (h) style += ',h_' + h;
if (style.length > 0) {
if(path.indexOf('?x-oss-process') == -1){
path += '?x-oss-process=image/resize,m_pad,limit_0' + style
}
}
if (path.indexOf('http') == 0) {
return path;
}
return baseImg + path;
} else {
if (path.indexOf('http') == 0) {
return path;
}
if (path.indexOf('/') != 0) {
path = '/' + path;
}
if (w && h) {
path += '.' + w + 'x' + h + '.jpg';
}
return baseImg[Math.floor(Math.random() * 100) % baseImg.length] + path;
}
}
\ No newline at end of file
src/utils/index.js
...@@ -89,3 +89,13 @@ export function getNavbarInfo(fn) { ...@@ -89,3 +89,13 @@ export function getNavbarInfo(fn) {
} }
}) })
} }
export function setTimes(value){
let result = parseInt(value)
　　let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600)
　　let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60))
　　let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60))
　　result = `${h}:${m}:${s}`
　　return result
}
\ No newline at end of file
src/utils/request.js
...@@ -11,7 +11,8 @@ export async function requestGET(url, options) { ...@@ -11,7 +11,8 @@ export async function requestGET(url, options) {
header: { header: {
"Shop-Mixid": shopMixid, "Shop-Mixid": shopMixid,
"Offline-Shop-Code": store.state.offlineShopCode, "Offline-Shop-Code": store.state.offlineShopCode,
"dubbo-tag": "ljx" "dubbo-tag": "ljx",
"Authorization": wx.getStorageSync('sessionid') || ""
}, },
success: function (res) { success: function (res) {
resolve(res) resolve(res)
......
static/css/common.scss 0 → 100644
.text-overflow{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.text-overflow2{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
@mixin btn {
width: 148px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 16px;
color: white;
border-radius: 8px;
background-image:-webkit-linear-gradient(to right,#FF877D, #FB566D);
background-image:-moz-linear-gradient(to right,#FF877D, #FB566D);
background-image:-o-linear-gradient(to right,#FF877D, #FB566D);
background-image: linear-gradient(to right,#FF877D, #FB566D);
}
static/font/demo.css 0 → 100644
/* Logo 字体 */
@font-face {
font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}
.logo {
font-family: "iconfont logo";
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* tabs */
.nav-tabs {
position: relative;
}
.nav-tabs .nav-more {
position: absolute;
right: 0;
bottom: 0;
height: 42px;
line-height: 42px;
color: #666;
}
#tabs {
border-bottom: 1px solid #eee;
}
#tabs li {
cursor: pointer;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 16px;
border-bottom: 2px solid transparent;
position: relative;
z-index: 1;
margin-bottom: -1px;
color: #666;
}
#tabs .active {
border-bottom-color: #f00;
color: #222;
}
.tab-container .content {
display: none;
}
/* 页面布局 */
.main {
padding: 30px 100px;
width: 960px;
margin: 0 auto;
}
.main .logo {
color: #333;
text-align: left;
margin-bottom: 30px;
line-height: 1;
height: 110px;
margin-top: -50px;
overflow: hidden;
*zoom: 1;
}
.main .logo a {
font-size: 160px;
color: #333;
}
.helps {
margin-top: 40px;
}
.helps pre {
padding: 20px;
margin: 10px 0;
border: solid 1px #e7e1cd;
background-color: #fffdef;
overflow: auto;
}
.icon_lists {
width: 100% !important;
overflow: hidden;
*zoom: 1;
}
.icon_lists li {
width: 100px;
margin-bottom: 10px;
margin-right: 20px;
text-align: center;
list-style: none !important;
cursor: default;
}
.icon_lists li .code-name {
line-height: 1.2;
}
.icon_lists .icon {
display: block;
height: 100px;
line-height: 100px;
font-size: 42px;
margin: 10px auto;
color: #333;
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
-moz-transition: font-size 0.25s linear, width 0.25s linear;
transition: font-size 0.25s linear, width 0.25s linear;
}
.icon_lists .icon:hover {
font-size: 100px;
}
.icon_lists .svg-icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em;
/* 图标和文字相邻时，垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
}
.icon_lists li .name,
.icon_lists li .code-name {
color: #666;
}
/* markdown 样式 */
.markdown {
color: #666;
font-size: 14px;
line-height: 1.8;
}
.highlight {
line-height: 1.5;
}
.markdown img {
vertical-align: middle;
max-width: 100%;
}
.markdown h1 {
color: #404040;
font-weight: 500;
line-height: 40px;
margin-bottom: 24px;
}
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
color: #404040;
margin: 1.6em 0 0.6em 0;
font-weight: 500;
clear: both;
}
.markdown h1 {
font-size: 28px;
}
.markdown h2 {
font-size: 22px;
}
.markdown h3 {
font-size: 16px;
}
.markdown h4 {
font-size: 14px;
}
.markdown h5 {
font-size: 12px;
}
.markdown h6 {
font-size: 12px;
}
.markdown hr {
height: 1px;
border: 0;
background: #e9e9e9;
margin: 16px 0;
clear: both;
}
.markdown p {
margin: 1em 0;
}
.markdown>p,
.markdown>blockquote,
.markdown>.highlight,
.markdown>ol,
.markdown>ul {
width: 80%;
}
.markdown ul>li {
list-style: circle;
}
.markdown>ul li,
.markdown blockquote ul>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown>ul li p,
.markdown>ol li p {
margin: 0.6em 0;
}
.markdown ol>li {
list-style: decimal;
}
.markdown>ol li,
.markdown blockquote ol>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown code {
margin: 0 3px;
padding: 0 5px;
background: #eee;
border-radius: 3px;
}
.markdown strong,
.markdown b {
font-weight: 600;
}
.markdown>table {
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
border: 1px solid #e9e9e9;
width: 95%;
margin-bottom: 24px;
}
.markdown>table th {
white-space: nowrap;
color: #333;
font-weight: 600;
}
.markdown>table th,
.markdown>table td {
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;
}
.markdown>table th {
background: #F7F7F7;
}
.markdown blockquote {
font-size: 90%;
color: #999;
border-left: 4px solid #e9e9e9;
padding-left: 0.8em;
margin: 1em 0;
}
.markdown blockquote p {
margin: 0;
}
.markdown .anchor {
opacity: 0;
transition: opacity 0.3s ease;
margin-left: 8px;
}
.markdown .waiting {
color: #ccc;
}
.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
opacity: 1;
display: inline-block;
}
.markdown>br,
.markdown>p>br {
clear: both;
}
.hljs {
display: block;
background: white;
padding: 0.5em;
color: #333333;
overflow-x: auto;
}
.hljs-comment,
.hljs-meta {
color: #969896;
}
.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
color: #df5000;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
color: #a71d5d;
}
.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute {
color: #0086b3;
}
.hljs-section,
.hljs-name {
color: #63a35c;
}
.hljs-tag {
color: #333333;
}
.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #795da3;
}
.hljs-addition {
color: #55a532;
background-color: #eaffea;
}
.hljs-deletion {
color: #bd2c00;
background-color: #ffecec;
}
.hljs-link {
text-decoration: underline;
}
/* 代码高亮 */
/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
static/font/demo_index.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>IconFont Demo</title>
<link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
<script src="iconfont.js"></script>
<!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
<!-- 代码高亮 -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li>
<li class="dib"><span>Font class</span></li>
<li class="dib"><span>Symbol</span></li>
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1686837" target="_blank" class="nav-more">查看项目</a>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe609;</span>
<div class="name">左</div>
<div class="code-name">&amp;#xe609;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60f;</span>
<div class="name">右</div>
<div class="code-name">&amp;#xe60f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe641;</span>
<div class="name">评论</div>
<div class="code-name">&amp;#xe641;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe857;</span>
<div class="name">眼睛</div>
<div class="code-name">&amp;#xe857;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62b;</span>
<div class="name">心</div>
<div class="code-name">&amp;#xe62b;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
<ul>
<li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
<li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
</ul>
<blockquote>
<p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
</blockquote>
<p>Unicode 使用步骤如下：</p>
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont iconzuo"></span>
<div class="name">
左
</div>
<div class="code-name">.iconzuo
</div>
</li>
<li class="dib">
<span class="icon iconfont iconyou"></span>
<div class="name">
右
</div>
<div class="code-name">.iconyou
</div>
</li>
<li class="dib">
<span class="icon iconfont iconpinglun"></span>
<div class="name">
评论
</div>
<div class="code-name">.iconpinglun
</div>
</li>
<li class="dib">
<span class="icon iconfont iconyanjing"></span>
<div class="name">
眼睛
</div>
<div class="code-name">.iconyanjing
</div>
</li>
<li class="dib">
<span class="icon iconfont iconicon_huabanfuben"></span>
<div class="name">
心
</div>
<div class="code-name">.iconicon_huabanfuben
</div>
</li>
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
<hr>
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
<p>与 Unicode 使用方式相比，具有如下特点：</p>
<ul>
<li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
<li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont iconxxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzuo"></use>
</svg>
<div class="name">左</div>
<div class="code-name">#iconzuo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyou"></use>
</svg>
<div class="name">右</div>
<div class="code-name">#iconyou</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconpinglun"></use>
</svg>
<div class="name">评论</div>
<div class="code-name">#iconpinglun</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyanjing"></use>
</svg>
<div class="name">眼睛</div>
<div class="code-name">#iconyanjing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconicon_huabanfuben"></use>
</svg>
<div class="name">心</div>
<div class="code-name">#iconicon_huabanfuben</div>
</li>
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>
<hr>
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
<ul>
<li>支持多色图标了，不再受单色限制。</li>
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
&lt;/style&gt;
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
&lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.tab-container .content:first').show()
$('#tabs li').click(function (e) {
var tabContent = $('.tab-container .content')
var index = $(this).index()
if ($(this).hasClass('active')) {
return
} else {
$('#tabs li').removeClass('active')
$(this).addClass('active')
tabContent.hide().eq(index).fadeIn()
}
})
})
</script>
</body>
</html>
static/font/iconfont.css 0 → 100644
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1584323888536'); /* IE9 */
src: url('iconfont.eot?t=1584323888536#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAATAAAsAAAAACZAAAARxAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDSAqGAIUVATYCJAMYCw4ABCAFhG0HWhtNCBFVnHHJvjgwtrWkx4oVNPJ3JfGea44qoYl0n/Ph6dT3799dwAJOV3NwfZPSDsBlczoDwcSsM9MAAQR6EwZvd2uqGRsFQAUQL5jjMc+inpK35JP1SXu8DBehstIC2AD8417VzPMPlvUsFpeXOSflQuHQBArQmJ0LeyVrxSpYEe0iu5a4B/t5IADk8KVDCus0KoMULPAYAUC6d6lqD2nCCLaCIJBq+IJrWZDp4CBlJjGXAUzzfp68QXxSgAFHgWeLKmt3Qq5NViNQ0Y5WDgmi4ewA+JsACkAHYAEyvNA5EDRI6lDI1d/AogEAJaRgwNpkNo0typZXI9jtJKToJVCSf3kAAQMOFCxAeIBSydAbpTjAJrP0IKpKA3owoIoCYbUqD7hAgRpB/Iy0/IAdWsADgAxr0sFzBAx4sKC8SqXVyqgcolQ6OkbF/tDDOulLK6v6VW8yuFbONa4XXfRzOlW7Vc0zbDQ6d5otbuhoTC4jFkuF9ZlgflJuejzUZCozm8vLhDO1rVbBYmm+9qjhWPUR8XA73xDcsYveKtS9yGRqsfu695IbSftu+S292azItdEQJeVtEMNNpjYD2meLLhJfXjPP4GqxtDxqMVgxoag2Zx1zEAoh/mZmb7LOpM5oytXVOmmRs/miOVpvnLtwscS6NQv0cuMWZIsiPuTMXx0d1O8DPuhL0McOHcbb1qoCr4V37izwKvRa4E5duqNekEC4J+xqLx+Mviuk6zdDz+31+WSltymLgY7bAw9WzXI/TH9fo4vQutMiIZ5MmV2R3u4w/ZNBgkUX5K5fHpcYnxyfGOeB5aeACEwMEGfXLIf9cT5p3owUMOiM55OoWHr9skp1+Tqsj96+jP+9vqDxsaJjBY18jAkFSiNy4zXFM7iXS3Lqf4j8YCODTD9zH7TqL4R17B2hLyrSR6Tl9oifNs3S5abp7ykqitCnJQS25mZt9WoQwbQdJbYlGR2TSceOxJFlwFNGiUxbnV/Tx8PeKv67NO/84CKN+yGlcuK0o505v+JBU48O5tQYDgCwT6M87c8xx1INHf6y2fQf7QoA9A9zFrBvoZ9p6U+2D311uTvbajK/SRVPdOru7P/ogH0si+7CP0WFxqJfStRwiNUkaOJZZbDVBgKAR+13EGcAyMkY8CN5HT0cSu3SuBwgkMIlAgYS+ACFFMFklq4DDgqNROBJ5YBclPhmBSdqiUwGINIXBYTWNzDUjgGl9UNm6X/AcfUPPG1LkKvI6Z4KoTWHAsXMsIT8E5pCmEyLHfzKK1auzzQu8RhP1KmJQOgF6UyMjDrEBdOriswISGWAC/Uy7HuBUaXFwrzabDz7PhV9kVfIMDsooFDGoBLIfQKNgmDkTDaHzPdfoYrTy2jFQJX3CalJszoIeYIG5FjJjQYuZfPkpRIxhphDRIkBuIAd9SQpwFi8q4UKxlN3iI/OfHoUNVV606uHu7wEIIefwccQSljCEZ5IQO9kOUTctnfDVe94OyTjNlQcr+SSpHZZnjG5HHk2AwAAAA==') format('woff2'),
url('iconfont.woff?t=1584323888536') format('woff'),
url('iconfont.ttf?t=1584323888536') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1584323888536#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.iconzuo:before {
content: "\e609";
}
.iconyou:before {
content: "\e60f";
}
.iconpinglun:before {
content: "\e641";
}
.iconyanjing:before {
content: "\e857";
}
.iconicon_huabanfuben:before {
content: "\e62b";
}
static/font/iconfont.js 0 → 100644
!function(d){var t,a='<svg><symbol id="iconzuo" viewBox="0 0 1024 1024"><path d="M721.80622223 12.74311111l-495.84355556 496.29866667 495.84355555 499.48444444 51.65511111-51.31377777-444.75733333-448.0568889 444.64355554-444.98488888z" ></path></symbol><symbol id="iconyou" viewBox="0 0 1024 1024"><path d="M748.80341333 546.07872c8.73813333 0 17.47626667-3.34961778 24.02986667-9.90321778 13.25283555-13.25283555 13.25283555-34.80689778 0-48.05973333L299.22645333 14.36330667c-13.25283555-13.25283555-34.80689778-13.25283555-48.05973333 0-13.25283555 13.25283555-13.25283555 34.80689778 0 48.05973333l473.60682667 473.60682667c6.69923555 6.69923555 15.29173333 10.04885333 24.02986666 10.04885333z" ></path><path d="M275.19658667 1019.68554667c8.73813333 0 17.47626667-3.34961778 24.02986666-9.90321778l473.60682667-473.60682667c13.25283555-13.25283555 13.25283555-34.80689778 0-48.05973333-13.25283555-13.25283555-34.80689778-13.25283555-48.05973333 0L251.16672 961.57696c-13.25283555 13.25283555-13.25283555 34.80689778 0 48.05973333 6.5536 6.69923555 15.29173333 10.04885333 24.02986667 10.04885334z" ></path></symbol><symbol id="iconpinglun" viewBox="0 0 1024 1024"><path d="M512.45511111 880.75377778c-32.42666667 0-64.17066667-2.73066667-95.00444444-7.62311111L194.78755555 1003.52V786.432C78.50666667 707.81155555 4.096 587.20711111 4.096 451.69777778c0-236.88533333 227.55555555-428.94222222 508.35911111-428.94222223 280.91733333 0 508.47288889 192.05688889 508.47288889 428.94222223s-227.55555555 429.056-508.47288889 429.056z m0-796.78577778c-245.64622222 0-444.87111111 164.75022222-444.87111111 367.72977778 0 124.70044445 75.20711111 234.72355555 190.00888889 301.056l-2.048 142.336L405.04888889 808.39111111c34.47466667 7.05422222 70.31466667 11.15022222 107.29244444 11.15022222 245.76 0 444.98488889-164.52266667 444.98488889-367.72977778 0.11377778-203.09333333-199.11111111-367.84355555-444.87111111-367.84355555z m254.29333334 428.94222222c-35.15733333 0-63.60177778-27.42044445-63.60177778-61.21244444 0-33.90577778 28.55822222-61.21244445 63.60177778-61.21244445 35.15733333 0 63.488 27.42044445 63.488 61.21244445 0.11377778 33.90577778-28.33066667 61.21244445-63.488 61.21244444z m-254.29333334 0c-35.04355555 0-63.488-27.42044445-63.488-61.21244444 0-33.90577778 28.55822222-61.21244445 63.488-61.21244445 35.15733333 0 63.60177778 27.42044445 63.60177778 61.21244445 0 33.90577778-28.44444445 61.21244445-63.60177778 61.21244444z m-254.17955556 0c-35.15733333 0-63.488-27.42044445-63.488-61.21244444 0-33.90577778 28.33066667-61.21244445 63.488-61.21244445s63.60177778 27.42044445 63.60177778 61.21244445c0 33.90577778-28.44444445 61.21244445-63.60177778 61.21244444z m0 0" ></path></symbol><symbol id="iconyanjing" viewBox="0 0 1024 1024"><path d="M512 671.14895011c-87.50021927 0-159.14895011-71.01467124-159.14895011-159.14895011S424.49978073 352.85104989 512 352.85104989s159.14895011 71.01467124 159.14895011 159.14895011-71.64873083 159.14895011-159.14895011 159.14895011z m0-267.57313574c-59.60159869 0-108.42418563 48.82258572-108.42418563 108.42418563s48.82258572 108.42418563 108.42418563 108.42418563 108.42418563-48.82258572 108.42418563-108.42418563-48.82258572-108.42418563-108.42418563-108.42418563z" ></path><path d="M512 837.90661526c-211.14183376 0-390.58068943-159.14895011-478.7149695-253.62382484-37.40951438-40.57981232-37.40951438-103.35170894 0-143.93152125 88.13427886-94.47487473 267.57313453-253.62382484 478.7149695-253.62382484s390.58068943 159.14895011 478.7149695 253.62382484c37.40951438 40.57981232 37.40951438 103.35170894 0 143.93152125-88.13427886 94.47487473-267.57313453 253.62382484-478.7149695 253.62382484z m0-601.08846483c-192.12004739 0-358.87771133 149.00399673-441.93951471 237.77233519-19.65584596 20.92396513-19.65584596 53.89506241 0 74.81902876 82.42774258 88.76833845 249.81946732 237.77233518 441.93951471 237.77233519s358.87771133-149.00399673 441.93951471-237.77233519c19.65584596-20.92396513 19.65584596-53.89506241 0-74.81902876-83.06180218-88.76833845-249.81946732-237.77233518-441.93951471-237.77233519z" ></path></symbol><symbol id="iconicon_huabanfuben" viewBox="0 0 1024 1024"><path d="M92.83809629 522.67850251c-50.32397657-52.77880432-77.9407926-121.8822165-77.94079259-194.79061196 0-75.3632232 29.33519649-146.3077562 82.72770773-199.5775271S221.83931534 45.5826557 297.20253854 45.5826557c83.70963962 0 161.52769056 36.45419773 214.79746146 99.05231434 53.2697709-62.59811789 131.08782185-99.05231562 214.79746146-99.05231434 75.3632232 0 146.3077562 29.33519649 199.57752711 82.72770775S1009.1026963 252.52466605 1009.1026963 327.88789055c0 67.13954974-24.05731605 132.31523572-67.63051503 183.25291922l-41.97756145-35.84049078C934.59866203 434.3046894 953.86906294 381.89410874 953.86906294 327.88789055c0-125.19623447-101.87536701-227.07160148-227.07160148-227.07160278-77.9407926 0-149.49903253 39.27725041-191.47659398 105.06664462l-23.32086748 36.45419773-23.32086748-36.45419773C446.70157237 140.09353818 375.14333114 100.81628777 297.20253854 100.81628777c-125.19623447 0-227.07160148 101.87536701-227.07160148 227.07160278 0 58.67039168 22.21619394 114.27224997 62.72085824 156.61803377l-40.01369901 38.17257819z" ></path><path d="M512.61370693 978.4173443c-6.5052943 0-13.13333026-2.3320861-18.41121068-6.99625961-11.41495109-10.18753722-12.39688167-27.61681602-2.20934575-39.03176711L899.86284476 474.80935369c10.18753722-11.41495109 27.61681602-12.39688167 39.03176711-2.20934574 11.41495109 10.18753722 12.39688167 27.61681602 2.20934576 39.03176841L533.23426337 969.21173894c-5.40062208 6.13707066-13.01058862 9.20560534-20.62055644 9.20560536z" ></path><path d="M512.61370693 978.4173443c-7.60996783 0-15.09719271-3.06853468-20.62055643-9.20560536L92.34713101 522.06479557c-10.18753722-11.41495109-9.20560534-28.84422991 2.20934575-39.03176712s28.84422991-9.20560534 39.03176711 2.20934446l399.6460195 447.14694467c10.18753722 11.41495109 9.20560534 28.84422991-2.20934574 39.03176711-5.27788044 4.66417349-11.90591638 6.99625961-18.4112107 6.99625961z" ></path></symbol></svg>',e=(t=document.getElementsByTagName("script"))[t.length-1].getAttribute("data-injectcss");if(e&&!d.__iconfont__svg__cssinject__){d.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}!function(t){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(t,0);else{var e=function(){document.removeEventListener("DOMContentLoaded",e,!1),t()};document.addEventListener("DOMContentLoaded",e,!1)}else document.attachEvent&&(c=t,o=d.document,i=!1,(a=function(){try{o.documentElement.doScroll("left")}catch(t){return void setTimeout(a,50)}n()})(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,n())});function n(){i||(i=!0,c())}var c,o,i,a}(function(){var t,e,n,c,o,i;(t=document.createElement("div")).innerHTML=a,a=null,(e=t.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",n=e,(c=document.body).firstChild?(o=n,(i=c.firstChild).parentNode.insertBefore(o,i)):c.appendChild(n))})}(window);
\ No newline at end of file
static/font/iconfont.json 0 → 100644
{
"id": "1686837",
"name": "蚂蚁直播",
"font_family": "iconfont",
"css_prefix_text": "icon",
"description": "",
"glyphs": [
{
"icon_id": "6318177",
"name": "左",
"font_class": "zuo",
"unicode": "e609",
"unicode_decimal": 58889
},
{
"icon_id": "13000530",
"name": "右",
"font_class": "you",
"unicode": "e60f",
"unicode_decimal": 58895
},
{
"icon_id": "5121501",
"name": "评论",
"font_class": "pinglun",
"unicode": "e641",
"unicode_decimal": 58945
},
{
"icon_id": "8288891",
"name": "眼睛",
"font_class": "yanjing",
"unicode": "e857",
"unicode_decimal": 59479
},
{
"icon_id": "12685009",
"name": "心",
"font_class": "icon_huabanfuben",
"unicode": "e62b",
"unicode_decimal": 58923
}
]
}
static/font/iconfont.svg 0 → 100644
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<!--
2013-9-30: Created.
-->
<svg>
<metadata>
Created by iconfont
</metadata>
<defs>
<font id="iconfont" horiz-adv-x="1024" >
<font-face
font-family="iconfont"
font-weight="500"
font-stretch="normal"
units-per-em="1024"
ascent="896"
descent="-128"
/>
<missing-glyph />
<glyph glyph-name="zuo" unicode="&#58889;" d="M721.80622223 883.25688889l-495.84355556-496.29866667 495.84355555-499.48444444 51.65511111 51.31377777-444.75733333 448.0568889 444.64355554 444.98488888z" horiz-adv-x="1024" />
<glyph glyph-name="you" unicode="&#58895;" d="M748.80341333 349.92128c8.73813333 0 17.47626667 3.34961778 24.02986667 9.90321778 13.25283555 13.25283555 13.25283555 34.80689778 0 48.05973333L299.22645333 881.63669333c-13.25283555 13.25283555-34.80689778 13.25283555-48.05973333 0-13.25283555-13.25283555-13.25283555-34.80689778 0-48.05973333l473.60682667-473.60682667c6.69923555-6.69923555 15.29173333-10.04885333 24.02986666-10.04885333zM275.19658667-123.68554667000001c8.73813333 0 17.47626667 3.34961778 24.02986666 9.90321778l473.60682667 473.60682667c13.25283555 13.25283555 13.25283555 34.80689778 0 48.05973333-13.25283555 13.25283555-34.80689778 13.25283555-48.05973333 0L251.16672-65.57695999999999c-13.25283555-13.25283555-13.25283555-34.80689778 0-48.05973333 6.5536-6.69923555 15.29173333-10.04885333 24.02986667-10.04885334z" horiz-adv-x="1024" />
<glyph glyph-name="pinglun" unicode="&#58945;" d="M512.45511111 15.24622222000005c-32.42666667 0-64.17066667 2.73066667-95.00444444 7.62311111L194.78755555-107.51999999999998V109.56799999999998C78.50666667 188.18844445000002 4.096 308.79288889 4.096 444.30222222c0 236.88533333 227.55555555 428.94222222 508.35911111 428.94222223 280.91733333 0 508.47288889-192.05688889 508.47288889-428.94222223s-227.55555555-429.056-508.47288889-429.056z m0 796.78577778c-245.64622222 0-444.87111111-164.75022222-444.87111111-367.72977778 0-124.70044445 75.20711111-234.72355555 190.00888889-301.056l-2.048-142.336L405.04888889 87.60888889c34.47466667-7.05422222 70.31466667-11.15022222 107.29244444-11.15022222 245.76 0 444.98488889 164.52266667 444.98488889 367.72977778 0.11377778 203.09333333-199.11111111 367.84355555-444.87111111 367.84355555z m254.29333334-428.94222222c-35.15733333 0-63.60177778 27.42044445-63.60177778 61.21244444 0 33.90577778 28.55822222 61.21244445 63.60177778 61.21244445 35.15733333 0 63.488-27.42044445 63.488-61.21244445 0.11377778-33.90577778-28.33066667-61.21244445-63.488-61.21244444z m-254.29333334 0c-35.04355555 0-63.488 27.42044445-63.488 61.21244444 0 33.90577778 28.55822222 61.21244445 63.488 61.21244445 35.15733333 0 63.60177778-27.42044445 63.60177778-61.21244445 0-33.90577778-28.44444445-61.21244445-63.60177778-61.21244444z m-254.17955556 0c-35.15733333 0-63.488 27.42044445-63.488 61.21244444 0 33.90577778 28.33066667 61.21244445 63.488 61.21244445s63.60177778-27.42044445 63.60177778-61.21244445c0-33.90577778-28.44444445-61.21244445-63.60177778-61.21244444z m0 0" horiz-adv-x="1024" />
<glyph glyph-name="yanjing" unicode="&#59479;" d="M512 224.85104989c-87.50021927 0-159.14895011 71.01467124-159.14895011 159.14895011S424.49978073 543.14895011 512 543.14895011s159.14895011-71.01467124 159.14895011-159.14895011-71.64873083-159.14895011-159.14895011-159.14895011z m0 267.57313574c-59.60159869 0-108.42418563-48.82258572-108.42418563-108.42418563s48.82258572-108.42418563 108.42418563-108.42418563 108.42418563 48.82258572 108.42418563 108.42418563-48.82258572 108.42418563-108.42418563 108.42418563zM512 58.09338474000003c-211.14183376 0-390.58068943 159.14895011-478.7149695 253.62382484-37.40951438 40.57981232-37.40951438 103.35170894 0 143.93152125 88.13427886 94.47487473 267.57313453 253.62382484 478.7149695 253.62382484s390.58068943-159.14895011 478.7149695-253.62382484c37.40951438-40.57981232 37.40951438-103.35170894 0-143.93152125-88.13427886-94.47487473-267.57313453-253.62382484-478.7149695-253.62382484z m0 601.08846483c-192.12004739 0-358.87771133-149.00399673-441.93951471-237.77233519-19.65584596-20.92396513-19.65584596-53.89506241 0-74.81902876 82.42774258-88.76833845 249.81946732-237.77233518 441.93951471-237.77233519s358.87771133 149.00399673 441.93951471 237.77233519c19.65584596 20.92396513 19.65584596 53.89506241 0 74.81902876-83.06180218 88.76833845-249.81946732 237.77233518-441.93951471 237.77233519z" horiz-adv-x="1024" />
<glyph glyph-name="icon_huabanfuben" unicode="&#58923;" d="M92.83809629 373.32149748999996c-50.32397657 52.77880432-77.9407926 121.8822165-77.94079259 194.79061196 0 75.3632232 29.33519649 146.3077562 82.72770773 199.5775271S221.83931534 850.4173443 297.20253854 850.4173443c83.70963962 0 161.52769056-36.45419773 214.79746146-99.05231434 53.2697709 62.59811789 131.08782185 99.05231562 214.79746146 99.05231434 75.3632232 0 146.3077562-29.33519649 199.57752711-82.72770775S1009.1026963 643.47533395 1009.1026963 568.1121094499999c0-67.13954974-24.05731605-132.31523572-67.63051503-183.25291922l-41.97756145 35.84049078C934.59866203 461.6953106 953.86906294 514.10589126 953.86906294 568.1121094499999c0 125.19623447-101.87536701 227.07160148-227.07160148 227.07160278-77.9407926 0-149.49903253-39.27725041-191.47659398-105.06664462l-23.32086748-36.45419773-23.32086748 36.45419773C446.70157237 755.90646182 375.14333114 795.18371223 297.20253854 795.18371223c-125.19623447 0-227.07160148-101.87536701-227.07160148-227.07160278 0-58.67039168 22.21619394-114.27224997 62.72085824-156.61803377l-40.01369901-38.17257819zM512.61370693-82.41734429999997c-6.5052943 0-13.13333026 2.3320861-18.41121068 6.99625961-11.41495109 10.18753722-12.39688167 27.61681602-2.20934575 39.03176711L899.86284476 421.19064631c10.18753722 11.41495109 27.61681602 12.39688167 39.03176711 2.20934574 11.41495109-10.18753722 12.39688167-27.61681602 2.20934576-39.03176841L533.23426337-73.21173894000003c-5.40062208-6.13707066-13.01058862-9.20560534-20.62055644-9.20560536zM512.61370693-82.41734429999997c-7.60996783 0-15.09719271 3.06853468-20.62055643 9.20560536L92.34713101 373.93520443c-10.18753722 11.41495109-9.20560534 28.84422991 2.20934575 39.03176712s28.84422991 9.20560534 39.03176711-2.20934446l399.6460195-447.14694467c10.18753722-11.41495109 9.20560534-28.84422991-2.20934574-39.03176711-5.27788044-4.66417349-11.90591638-6.99625961-18.4112107-6.99625961z" horiz-adv-x="1024" />
</font>
</defs></svg>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment