Skip to content

M
mayi-mp-shop
Commit 70e867f4 by 李嘉林
Options

暂时删除直播组件

parent 0bcc3a32
Showing with 0 additions and 1596 deletions
src/components/livedModel/isPauseShow.vue deleted 100644 → 0
<template>
<!-- 直播暂停 -->
<div class="pauseShow">
<p class="tit">主播暂时离开</p>
</div>
</template>
<script type="text/ecmascript-6">
export default {
name: "",
data() {
return {};
},
components: {},
computed: {},
created() {},
mounted() {},
methods: {}
};
</script>
<style lang="scss" scoped>
.pauseShow {
position: absolute;
width: 70vw;
top: 40%;
left: 15vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 2;
.tit {
font-size: 30px;
font-weight: bold;
color: #fff;
}
}
</style>
src/components/livedModel/liveReplay.vue deleted 100644 → 0
<template>
<div class="replay">
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
src/components/livedModel/livedAnnouncement.vue deleted 100644 → 0
<template>
<!-- 公告组件 -->
<div class="livedAnnouncement" v-show="isShow">
<scroll-view :style="{'max-height': '20vh','width':'40vw'}" :scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true">
<div class="label">
<span class="labelTit">公告：</span><span class="test">{{liveNotice}}</span>
</div>
</scroll-view>
</div>
</template>
<script type="text/ecmascript-6">
export default {
props:["liveNotice"],
name: "",
data() {
return {
isShow:true,
scrollTop:0,
};
},
components: {},
computed: {},
created() {},
onLoad(){
console.log('----公告')
this.isShow=true;
setTimeout(() => {
this.scrollTop=1000;
}, 2000);
setTimeout(() => {
this.isShow=false;
}, 7000);
},
mounted() {},
methods: {}
};
</script>
<style lang="scss" scoped>
.livedAnnouncement{
margin-left:12px;
width: 40vw;
background: rgba(#000,0.4);
border-radius: 10px;
padding: 6px;
margin-bottom: 10px;
animation:toLeft 6s linear;
opacity: 0;
span{
font-size: 14px;
color: #f1f1f1;
}
.label{
.labelTit{
color: #f9a93c;
}
}
}
@keyframes toLeft {
0%{
opacity: 1;
}
80%{
opacity: 0.6;
}
100%{
opacity: 0;
}
}
</style>
src/components/livedModel/livedExplainingCommodities.vue deleted 100644 → 0
<template>
<!-- 讲解商品 -->
<div class="livedExplainingCommodities">
<div class="goods clearfix" v-if="!showFixedGoods" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
<div
class="goodsList"
:class="{isEC:item.upperScreenState==1}"
v-for="(item,index) in list"
:key="index"
@click="toGoodsInfo(item)"
>
<!-- <img :src="item.productImgUrl" alt /> -->
<image :src="item.productImgUrl" mode="aspectFill" alt=""></image>
<p class="num">{{item.number}}</p>
<div class="explain" v-if="item.upperScreenState==1">讲解中</div>
</div>
</div>
<!-- 左上角展示讲解中商品 -->
<div class="fixedGoods" v-else-if="showFixedGoods&&fixedGoodsList&&fixedGoodsList.length>0&&!isFocusComments">
<div class="goodsList" v-for="(item,index) in fixedGoodsList" :key="index" @click="toGoodsInfo(item)">
<div class="explain" v-if="item.upperScreenState==1">讲解中</div>
<image :src="item.productImgUrl" mode="aspectFill" alt=""></image>
<div class="price" v-if="item.minPrice">
<span>￥</span> <span>{{item.minPrice}}</span>
</div>
</div>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import { DFSImg } from "@/utils/index";
import live from "@/api/live";
export default {
props: ["updateGoods", "goodsList","isFocusComments"],
name: "",
data() {
return {
showFixedGoods: false, //展示讲解中商品方式 false底部|true左侧固定
list: [],
// 讲解中浮动商品
fixedGoodsList: [],
firstCom: true, //首次进入
liveId: 0,
fixedGoodsTimer : null, //讲解商品隐藏的定时器
reserveList : []
};
},
watch: {
updateGoods() {
console.log(this.goodsList,'---------------------------------46goodsList')
this.goodsList.forEach((item,index) => {
this.$set(this.goodsList[index],'minPrice',Number(item.minPrice).toFixed(2))
})
console.log(this.firstCom,'this.firstCom----------')
if (this.firstCom == true) {
this.list = [];
this.firstCom = false;
let arr1 = [];
let arr2 = [];
this.goodsList.forEach((item, index) => {
if (item.upperScreenState == 1) {
arr1.push(item);
} else if (item.upperScreenState == 0 || item.upperScreenState == 2) {
arr2.push(item);
}
});
this.list = [...arr1, ...arr2];
this.reserveList = arr1;
console.log(this.list,'--------------------------------this.list1212')
this.fixedGoodsTimer = setTimeout(() => {
console.log('这是上屏商品',arr1)
this.fixedGoodsList = arr1 ? arr1 : [];
this.showFixedGoods = true;
}, 5000);
} else {
if (!this.equalsObj(this.list, this.goodsList)) {
let newArr = [];
newArr = this.goodsList.filter((item, index) => {
if (item.upperScreenState == 1) {
return item;
}
});
if (newArr) {
console.log('这是上屏商品',newArr)
this.fixedGoodsList = newArr;
}
}
}
}
},
components: {},
computed: {},
created() {},
onLoad(options) {
if(options.params){
let params = JSON.parse(options.params);
this.liveId = params.liveId;
}else if(options.scene){
var scene = decodeURIComponent(options.scene); //参数二维码传递过来的参数
console.log(scene)
let sceneInfo = scene.split(',')
console.log('sceneInfo',sceneInfo)
this.liveId = sceneInfo[0].split('=')[1]
}
},
onUnload() {
this.fixedGoodsList = [];
this.showFixedGoods = false;
},
mounted() {},
methods: {
// 到商品详情
toGoodsInfo(val) {
// 点击商品埋点
let info={
liveBroadcastId:Number(this.liveId),
liveBroadcastGoodsId:Number(val.productId),
}
live.addLiveUserGoodsByUser(info).then(res=>{});
let query = {
fromLived: 1,
liveId: this.liveId
};
let backPath = `/goods/${val.productId}`;
wx.reLaunch({
url: `../index/main?from=livedToGoodsInfo&backpath=${
backPath
}&params=${JSON.stringify(query)}`
});
},
/**
* 判断此对象是否是Object类型
* @param {Object} obj
*/
isObject(obj) {
return Object.prototype.toString.call(obj) === "[object Object]";
},
/**
* 判断此类型是否是Array类型
* @param {Array} arr
*/
isArray(arr) {
return Object.prototype.toString.call(arr) === "[object Array]";
},
/**
* 深度比较两个对象是否相同
* @param {Object} oldData
* @param {Object} newData
*/
equalsObj(oldData, newData) {
// 类型为基本类型时,如果相同,则返回true
if (oldData === newData) return true;
if (
this.isObject(oldData) &&
this.isObject(newData) &&
Object.keys(oldData).length === Object.keys(newData).length
) {
// 类型为对象并且元素个数相同
// 遍历所有对象中所有属性,判断元素是否相同
for (const key in oldData) {
if (oldData.hasOwnProperty(key)) {
if (!this.equalsObj(oldData[key], newData[key]))
// 对象中具有不相同属性 返回false
return false;
}
}
} else if (
this.isArray(oldData) &&
this.isArray(oldData) &&
oldData.length === newData.length
) {
// 类型为数组并且数组长度相同
for (let i = 0, length = oldData.length; i < length; i++) {
if (!this.equalsObj(oldData[i], newData[i]))
// 如果数组元素中具有不相同元素,返回false
return false;
}
} else {
// 其它类型,均返回false
return false;
}
// 走到这里,说明数组或者对象中所有元素都相同,返回true
return true;
},
touchstart(){
clearTimeout(this.fixedGoodsTimer)
},
touchmove(){
clearTimeout(this.fixedGoodsTimer)
},
touchend(){
this.fixedGoodsTimer = setTimeout(() => {
this.fixedGoodsList = this.reserveList
this.showFixedGoods = true;
},5000)
},
}
};
</script>
<style lang="scss" scoped>
img {
display: block;
}
.fl {
float: left;
}
/*清除浮动*/
.clearfix {
zoom: 1;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
width: 0;
height: 0;
visibility: hidden;
}
.livedExplainingCommodities {
width: 100%;
padding: 0 12px;
overflow-x: auto;
.goods {
overflow-x: auto;
white-space: nowrap;
overflow-y: hidden;
margin-bottom: 10px;
.goodsList {
display: inline-block;
position: relative;
width: 30vw;
height: 30vw;
border: 1px solid #949494;
margin-right: 10px;
overflow: hidden;
image {
width: 30vw;
height: 30vw;
}
.num {
position: absolute;
top: 0;
left: 0;
color: #fff;
font-size: 12px;
background: #666;
padding: 2px 4px;
border-bottom-right-radius: 6px;
}
.explain {
position: absolute;
top: 0;
right: 0;
color: #fff;
font-size: 12px;
background: #ff3334;
padding: 2px 4px;
border-bottom-left-radius: 6px;
}
}
}
.isEC {
border-color: #ff3334;
}
.fixedGoods {
position: fixed;
top: 22vh;
left: 12px;
.goodsList {
width: 78px;
margin-bottom: 15px;
border-radius: 2px;
overflow: hidden;
position: relative;
background-color: white;
image {
width: 22vw;
height: 78px;
}
.num {
position: absolute;
top: 0;
left: 0;
color: #fff;
font-size: 12px;
background: #666;
padding: 2px 4px;
border-bottom-right-radius: 6px;
}
.explain {
position: absolute;
top: 0;
left: 0;
color: #fff;
font-size: 12px;
background: #ff3334;
padding: 2px 4px;
border-bottom-right-radius: 6px;
}
.price{
width: 100%;
color: #FA7018;
background: #fff;
text-align: center;
height: 21px;
font-size: 16px;
line-height: 17px;
}
}
}
}
</style>
src/components/livedModel/livedGoodsDia.vue deleted 100644 → 0
<template>
<div class="livedGoodsList">
<van-popup
:show="showDia"
position="bottom"
custom-style="height: 50vh;border-top-left-radius:10px;border-top-right-radius:10px;"
:close-on-click-overlay="true"
@close="closeDia"
>
<div class="tit" v-if="list.length>0">
<span>商品列表</span>
<span>({{list.length}})</span>
</div>
<div class="list" v-if="list.length>0">
<div class="item" v-for="(item,index) in list" :key="index" @click="toGoodsInfo(item)">
<div class="img" >
<div class="num">{{item.number}}</div>
<!-- <img v-if="item.productImgUrl" :src="item.productImgUrl" alt /> -->
<image v-if="item.productImgUrl" :src="item.productImgUrl" mode="aspectFill" alt=""></image>
</div>
<div class="info">
<div class="name text-overflow2">{{item.productName}}</div>
<div class="bottom">
<div class="price">
<div>
<span>￥</span>
<span>{{item.minPrice}}</span>
</div>
<!-- <p class="del">
<span>￥</span>
<span>{{999}}</span>
</p>-->
</div>
<div class="icon" @click.stop="isLogin(item)">
<img src="../../../static/images/lived/shopCart.png" alt="">
</div>
</div>
</div>
</div>
</div>
<div style="text-align:center;font-size:16px;padding-top:10px;" v-else>暂无商品</div>
</van-popup>
<!-- 选择规格弹层 -->
<livedSelectionSpe
v-if="showSpe"
:show="showSpe"
:productInfoId="itemGoods.productId"
:minSale="itemGoods.minSale"
:maxSale="itemGoods.maxSale"
:goodsImg="itemGoods.goodsImg"
:minSuggestedRetailPrice="itemGoods.minSuggestedRetailPrice"
:maxSuggestedRetailPrice="itemGoods.maxSuggestedRetailPrice"
:goodsLowerShelf="itemGoods.goodsLowerShelf"
@closeSpeDia="closeSpeDia"
></livedSelectionSpe>
</div>
</template>
<script type="text/ecmascript-6">
import livedSelectionSpe from "@/components/livedModel/livedSelectionSpe";
import { DFSImg } from "@/utils/index";
import live from "@/api/live";
export default {
props:["showDia","updateGoods","goodsList"],
name: "",
data() {
return {
liveId: 0,
list: [],
itemGoods: {}, //选中商品
showSpe: false
};
},
components: {
livedSelectionSpe
},
watch:{
updateGoods(){
this.list=this.goodsList;
this.list.forEach((item, index) => {
item.minPrice = Number(item.minPrice).toFixed(2);
});
},
},
computed: {},
created() {},
onLoad(options) {
if(options.params){
let params = JSON.parse(options.params);
this.liveId = params.liveId;
}else if(options.scene){
var scene = decodeURIComponent(options.scene); //参数二维码传递过来的参数
console.log(scene)
let sceneInfo = scene.split(',')
console.log('sceneInfo',sceneInfo)
this.liveId = sceneInfo[0].split('=')[1]
}
},
mounted() {},
methods: {
// 关闭
closeDia() {
this.$emit("changeStatus");
},
// 是否登录
isLogin(val) {
let _this = this;
wx.getStorage({
key: "sessionid",
success(res) {
_this.showSpeDia(val);
},
fail(res) {
console.log("未登录------150");
// 跳转登录页
let backUrl = "/lived/main";
let query = {
liveId: _this.liveId,
fromType: "mini"
};
let url = `/pages/login/main?back=${backUrl}&params=${JSON.stringify(
query
)}`;
wx.navigateTo({
url: url
});
}
});
},
showSpeDia(val) {
if (val.multiSpecificationFlag != 1) {
// 不是多规格直接加入购物车
live
.addCart([{ productGoodsId: val.productGoodsId, qty: 1}])
.then(res => {
if (res.data.code == 200) {
wx.showToast({
title: "加入成功",
icon: "success"
});
this.showSize = false;
} else {
wx.showToast({
title: res.data.msg,
icon: "none"
});
}
});
return;
}
let productId = val.productId;
this.itemGoods.productId = productId;
wx.showLoading({
title: "加载中..."
});
live.getProductInfo(productId).then(res => {
wx.hideLoading();
if (res.data.code == 200) {
this.itemGoods.maxSale = Number(
res.data.data.maxSuggestedRetailPrice
);
this.itemGoods.minSale = Number(
res.data.data.minSuggestedRetailPrice
);
this.itemGoods.maxDiscountPrice = Number(
res.data.data.maxDiscountPrice
);
this.itemGoods.minDiscountPrice = Number(
res.data.data.minDiscountPrice
);
this.itemGoods.productNature = res.data.data.productNature;
this.itemGoods.goodsLowerShelf =
res.data.data.saleStatus != 1 ? true : false; //1 上架 0下架 true 下架
if (
res.data.data.productPictures &&
res.data.data.productPictures.length > 0
) {
this.itemGoods.goodsImg = DFSImg(
res.data.data.productPictures[0].url
);
}
this.showSpe = true;
} else {
wx.showToast({
title: res.data.msg,
icon: "none"
});
}
});
},
closeSpeDia() {
this.showSpe = false;
},
// 到商品详情
toGoodsInfo(val) {
// 点击商品埋点
let info={
liveBroadcastId:Number(this.liveId),
liveBroadcastGoodsId:Number(val.productId),
}
live.addLiveUserGoodsByUser(info).then(res=>{});
let query = {
fromLived: 1,
liveId: this.liveId
};
let backPath = `/goods/${val.productId}`;
wx.reLaunch({
url: `../index/main?from=livedToGoodsInfo&backpath=${
backPath
}&params=${JSON.stringify(query)}`
});
}
}
};
</script>
<style lang="scss" scoped>
img{
display: block;
}
.livedGoodsList {
.tit {
font-size: 16px;
padding: 10px 10px;
}
.list {
overflow-y:auto;
max-height: 44vh;
.item {
padding: 10px 4px;
display: flex;
align-items: center;
padding: 14px;
box-sizing: border-box;
border-bottom: 1rpx solid #EEEEED;
.img {
width: 70px;
height: 70px;
border-radius: 6px;
overflow: hidden;
background: #999;
position: relative;
image {
width: 100%;
height: 100%;
object-fit: cover;
}
.num {
position: absolute;
top: 0;
left: 0;
color: #fff;
font-size: 12px;
background: #666;
padding: 2px 6px;
border-bottom-right-radius: 6px;
}
}
.info {
flex: 1;
height: 80px;
margin-left: 16px;
color: #333;
font-size: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
.name {
text-align: left;
}
.bottom {
display: flex;
justify-content: space-between;
align-items: center;
span {
color: #ff0000;
}
.price {
font-size: 18px;
.del {
font-size: 16px;
text-decoration: line-through;
span {
color: #666;
}
}
}
.icon {
img{
width: 30px;
height: 26px;
}
}
}
}
}
}
}
</style>
src/components/livedModel/livedIsEnded.vue deleted 100644 → 0
<template>
<!-- 直播结束组件 -->
<div class="livedIsEnd">
<div class="end">
<p class="endTxt">直播已{{status == 2 ? '结束' : "失效"}}</p>
<p class="time">
<span>直播时长：</span>
<span>{{status == 2 ? endInfo.liveTime : '00:00:00'}}</span>
</p>
<div class="data">
<div>
<p>{{status == 2 ? endInfo.watchNum : 0}}</p>
<p>观看</p>
</div>
<div>
<p>{{status == 2 ? endInfo.guestBookNum : 0}}</p>
<p>评论</p>
</div>
<div>
<p>{{status == 2 ? endInfo.likeNum : 0}}</p>
<p>赞</p>
</div>
</div>
<!-- 商品列表 -->
<div class="goodsList" v-if="list.length>0">
<div class="tit">
<span>商品列表</span>
<span>({{list.length}})</span>
</div>
<div class="list">
<div class="item" v-for="(item,index) in list" :key="index" :class="{'itemBorder':index!=list.length-1}">
<div class="img" @click="toGoodsInfo(item)">
<div class="num">{{item.number}}</div>
<!-- <img :src="item.productImgUrl" alt /> -->
<image :src="item.productImgUrl" mode="aspectFill" alt=""></image>
</div>
<div class="info">
<p class="name line-clamp2">{{item.productName}}</p>
<div class="price">
<p>
<span>￥</span>
<span>{{item.minPrice}}</span>
</p>
<div class="icon" @click="isLogin(item)">
<img src="../../../static/images/lived/shopCart.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 选择规格弹层 -->
<livedSelectionSpe
v-if="showSpe"
:show="showSpe"
:productInfoId="itemGoods.productId"
:minSale="itemGoods.minSale"
:maxSale="itemGoods.maxSale"
:goodsImg="itemGoods.goodsImg"
:minSuggestedRetailPrice="itemGoods.minSuggestedRetailPrice"
:maxSuggestedRetailPrice="itemGoods.maxSuggestedRetailPrice"
:goodsLowerShelf="itemGoods.goodsLowerShelf"
@closeSpeDia="closeSpeDia"
></livedSelectionSpe>
</div>
</template>
<script type="text/ecmascript-6">
import livedSelectionSpe from "@/components/livedModel/livedSelectionSpe";
import { DFSImg } from "@/utils/index";
import live from "@/api/live";
export default {
props: ["updateGoods", "goodsList", "endInfo","status"],
name: "",
data() {
return {
list: [],
liveId: 0,
itemGoods: {}, //选中商品
showSpe: false
};
},
watch: {
updateGoods() {
this.list = this.goodsList;
}
},
components: {
livedSelectionSpe
},
computed: {},
onLoad(options) {
if(options.params){
let params = JSON.parse(options.params);
this.liveId = params.liveId;
}else if(options.scene){
var scene = decodeURIComponent(options.scene); //参数二维码传递过来的参数
console.log(scene)
let sceneInfo = scene.split(',')
console.log('sceneInfo',sceneInfo)
this.liveId = sceneInfo[0].split('=')[1]
}
},
created() {},
mounted() {},
methods: {
// 到商品详情
toGoodsInfo(val) {
// 点击商品埋点
let info={
liveBroadcastId:Number(this.liveId),
liveBroadcastGoodsId:Number(val.productId),
}
live.addLiveUserGoodsByUser(info).then(res=>{});
let query = {
fromLived: 1,
liveId: this.liveId
};
let backPath = `/goods/${val.productId}`;
wx.reLaunch({
url: `../index/main?from=livedToGoodsInfo&backpath=${backPath}&params=${JSON.stringify(
query
)}`
});
},
// 是否登录
isLogin(val) {
let _this = this;
wx.getStorage({
key: "sessionid",
success(res) {
_this.showSpeDia(val);
},
fail(res) {
console.log("未登录------150");
// 跳转登录页
let backUrl = "/lived/main";
let query = {
liveId: _this.liveId,
fromType: "mini"
};
let url = `/pages/login/main?back=${backUrl}&params=${JSON.stringify(
query
)}`;
wx.navigateTo({
url: url
});
}
});
},
showSpeDia(val) {
if (val.multiSpecificationFlag != 1) {
// 不是多规格直接加入购物车
live
.addCart([{ productGoodsId: val.productGoodsId, qty: 1 }])
.then(res => {
if (res.data.code == 200) {
wx.showToast({
title: "加入成功",
icon: "success"
});
this.showSize = false;
} else {
wx.showToast({
title: res.data.msg,
icon: "none"
});
}
});
return;
}
let productId = val.productId;
this.itemGoods.productId = productId;
wx.showLoading({
title: "加载中..."
});
live.getProductInfo(productId).then(res => {
wx.hideLoading();
if (res.data.code == 200) {
this.itemGoods.maxSale = Number(
res.data.data.maxSuggestedRetailPrice
);
this.itemGoods.minSale = Number(
res.data.data.minSuggestedRetailPrice
);
this.itemGoods.maxDiscountPrice = Number(
res.data.data.maxDiscountPrice
);
this.itemGoods.minDiscountPrice = Number(
res.data.data.minDiscountPrice
);
this.itemGoods.productNature = res.data.data.productNature;
this.itemGoods.goodsLowerShelf =
res.data.data.saleStatus != 1 ? true : false; //1 上架 0下架 true 下架
if (
res.data.data.productPictures &&
res.data.data.productPictures.length > 0
) {
this.itemGoods.goodsImg = DFSImg(
res.data.data.productPictures[0].url
);
}
this.showSpe = true;
} else {
wx.showToast({
title: res.data.msg,
icon: "none"
});
}
});
},
closeSpeDia() {
this.showSpe = false;
}
}
};
</script>
<style lang="scss" scoped>
.line-clamp2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 22px;
word-break: break-all;
}
.livedIsEnd {
position: absolute;
top: 20vh;
bottom: 0;
left: 0;
right: 0;
display: flex;
z-index: 2;
flex-direction: column;
align-items: center;
.end {
p {
text-align: center;
color: #fff;
}
.endTxt {
font-size: 34px;
font-weight: bold;
}
.time {
margin-top: 10px;
font-size: 16px;
}
.data {
margin-top: 20px;
width: 70vw;
display: flex;
justify-content: space-around;
align-items: center;
& > div {
p {
text-align: center;
font-size: 20px;
}
}
}
.goodsList {
position: absolute;
bottom: 0;
left: 0;
background: rgba(#000, 0.4);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding: 12px;
width: 100%;
box-sizing: border-box;
p,
span {
color: #fff;
}
.tit {
font-size: 16px;
padding: 0 4px 6px 0;
}
.list {
max-height: 48vh;
overflow-y: auto;
.item {
padding: 14px 4px;
display: flex;
.img {
width: 100px;
height: 100px;
border-radius: 6px;
overflow: hidden;
position: relative;
image {
width: 100%;
height: 100%;
object-fit: cover;
}
.num {
position: absolute;
top: 0;
left: 0;
color: #fff;
font-size: 12px;
background: #666;
padding: 2px 6px;
border-bottom-right-radius: 6px;
}
}
.info {
flex: 1;
height: 100px;
margin-left: 16px;
color: #fff;
font-size: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
.name {
text-align: left;
}
.price {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 18px;
span {
color: #ff0000;
}
.icon {
img{
width: 30px;
height: 26px;
}
}
}
}
}
.itemBorder{
border-bottom: 0.5px solid #EEEEED;
}
}
}
}
}
</style>
src/components/livedModel/livedIsMsg.vue deleted 100644 → 0
<template>
<!-- 评论模块 -->
<div class="livedIsMsg" v-if="list.length>0" :class="{'livedIsMsgFixed':isSend}" :style="{'bottom':isSend?(fixedHeight+50)+'px':''}">
<div class="list">
<scroll-view :style="{'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 list" :key="index">
<div class="user">
<p class="live"></p>
<div class="name">
<span>{{item.customerName}}：</span><span class="test">{{item.guestbookContent}}</span>
</div>
</div>
</div>
</scroll-view>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import liveApi from "@/api/live";
export default {
props:["guestBookList","updateVal","isSend","fixedHeight","liveId","info"],
name: "",
data() {
return {
list: [],
scrollTop:0,
};
},
watch:{
updateVal(){
if(!this.info.playbackUrl || this.info.liveBroadcastState == 1 || this.info.liveBroadcastState == 3){
console.log('2222222222222')
this.list=[...this.list,...this.guestBookList];
this.scrollTop=this.list.length*1000;
}
}
},
components: {},
computed: {},
created() {},
onLoad(){
if(this.info.playbackUrl && this.info.playbackUrl[0] && (this.info.liveBroadcastState != 1 || this.info.liveBroadcastState != 3)){
this.init()
}
},
mounted() {},
methods: {
scrolltolower(){
},
init(){
let query = {
id : this.liveId,
userActivebeginTime : 1,
beginTime : 1
}
liveApi.queryPlaybackComments(query).then(res => {
if(res.data.code == '200'){
this.list= res.data.data.guestBookList.slice(-100);
this.scrollTop=this.list.length*1000;
}
})
}
}
};
</script>
<style lang="scss" scoped>
/* 一行否则出现省略号 */
.line-clamp1 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.livedIsMsg {
margin-left: 12px;
padding: 8px;
margin-bottom: 10px;
position: relative;
width: 60vw;
.list {
width: 50vw;
overflow: hidden;
bottom: 0;
padding-left: 10px;
border-radius: 9px;
.item {
width: 50vw;
border-radius: 9px;
margin-bottom: 4px;
.user {
max-width: 50vw;
padding: 4px 8px;
display: inline-block;
line-height: 18px;
border-radius: 9px;
background-color: rgba(0,0,0,0.3);
box-sizing: border-box;
.name {
color: #f9a93c;
font-size: 14px;
}
}
.test {
font-size: 14px;
color: #f1f1f1;
word-break: break-all;
}
}
}
}
.livedIsMsgFixed{
position: absolute;
margin: 0;
left: 12px;
}
</style>
src/components/livedModel/notStarted.vue deleted 100644 → 0
<template>
<div class="notStarted">
<div class="title">{{info.title}}</div>
<p class="tit">直播倒计时</p>
<div class="time">
<timeDown v-if="startTime" :startTime="startTime"></timeDown>
</div>
<div class="remindBtn" @click="isLogin">开播提醒</div>
</div>
</template>
<script type="text/ecmascript-6">
import live from "@/api/live";
import timeDown from "@/components/livedModel/timeDown";
export default {
props: ["info"],
name: "",
data() {
return {
liveId: 0,
startTime: null
};
},
components: {
timeDown
},
computed: {},
created() {},
onLoad(options) {
if(options.params){
let params = JSON.parse(options.params);
this.liveId = params.liveId;
}else if(options.scene){
var scene = decodeURIComponent(options.scene); //参数二维码传递过来的参数
console.log(scene)
let sceneInfo = scene.split(',')
console.log('sceneInfo',sceneInfo)
this.liveId = sceneInfo[0].split('=')[1]
}
this.startTime = this.info.startTime;
console.log(this.info)
},
mounted() {},
methods: {
// 开播提醒
remind() {
let _this = this;
wx.getSetting({
withSubscriptions: true,
success (res) {
console.log(res.subscriptionsSetting,'subscriptionsSetting')
if(!res.subscriptionsSetting.mainSwitch){
wx.showModal({
content: '检测到您没打开订阅消息的权限，是否去设置打开？',
confirmText : '确认',
confirmColor : '#07c160',
success : (res2) => {
if (res2.confirm) {
wx.openSetting({
withSubscriptions : true,
success (res1) {
console.log(res1.authSetting,'authSetting')
}
})
}
}
})
}else{
try {
const subscribeMessageObj = _this.$store.state.subscribeMessageObj;
if (
subscribeMessageObj &&
Object.keys(subscribeMessageObj).length > 0
) {
// TODO 开播订阅
const tmplIds = [];
for (var key in subscribeMessageObj) {
// 改成开播key
if (key == "start_live") {
tmplIds.push(subscribeMessageObj[key]);
}
}
if (tmplIds.length > 0) {
wx.requestSubscribeMessage({
tmplIds: tmplIds,
success:(res)=> {
console.log(res,res[tmplIds[0]],'---------------------58')
if(res[tmplIds[0]]=="accept"){
wx.showToast({
title: "您已成功订阅~",
icon: "success"
});
let query = {
liveBroadcastId: Number(_this.liveId),
openId: wx.getStorageSync("openid"),
subMessageTemplateId:tmplIds[0],
};
live.addLiveNoticeByCustomer(query).then(res => {});
}
console.log("message success response: ", res);
},
fail(res) {
console.log("message fail response: ", res);
wx.showToast({
title: '订阅失败，是否授权或者网络错误',
icon: "none"
});
}
});
}
}else{
wx.showToast({
title: '订阅失败，是否授权或者网络错误',
icon: "none"
});
console.log('开播失败')
}
} catch (err) {
wx.showToast({
title: '订阅失败，是否授权或者网络错误',
icon: "none"
});
console.error("subscribeMessage-err", err);
}
}
}
})
},
// 是否登录
isLogin() {
let _this = this;
wx.getStorage({
key: "sessionid",
success(res) {
_this.remind();
},
fail(res) {
console.log("未登录------150");
// 跳转登录页
let backUrl = "/lived/main";
let query = {
liveId: _this.liveId,
fromType: "mini"
};
let url = `/pages/login/main?back=${backUrl}&params=${JSON.stringify(
query
)}`;
wx.navigateTo({
url: url
});
}
});
}
}
};
</script>
<style lang="scss" scoped>
.notStarted {
position: absolute;
width: 70vw;
top: 35%;
left: 15vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 2;
.title{
font-size: 18px;
font-weight: bold;
color: #fff;
margin-bottom: 20px;
}
.tit {
font-size: 16px;
color: #fff;
}
.time {
margin-top: 16px;
}
.remindBtn {
margin-top: 16px;
height: 20px;
line-height: 20px;
text-align: center;
border-radius: 6px;
color: #fff;
font-size: 18px;
padding: 14px 40px;
background: linear-gradient(to right, #ff877d, #fb566d);
}
}
</style>
\ No newline at end of file
src/components/livedModel/timeDown.vue deleted 100644 → 0
<template>
<!-- 倒计时组件 -->
<div class="days">
<template v-if="days-0>0">
<span class="item">{{days}}</span>
<span class="label">天</span>
</template>
<template v-if="hours-0>0">
<span class="item">{{hours}}</span>
<span class="label">时</span>
</template>
<span class="item">{{minute}}</span>
<span class="label">分</span>
</div>
</template>
<script type="text/ecmascript-6">
let d = null;
// 倒计时方法
if (typeof xcsoft == "undefined") var xcsoft = new function() {}();
xcsoft.countdown = function(a, b, c) {
d = new Object();
var e = 0;
if (typeof a == "object") {
var f = parseInt(new Date().getTime() / 1000);
var g = a.startTime ? parseInt(a.startTime) : 0;
g = g == 0 ? f : g;
var h = a.endTime;
var x = g - f;
d.decimal = parseInt(a.msec ? a.msec : 0);
} else {
var f = 0;
var x = 0;
d.decimal = 0;
var h = a;
var i = h.toString();
if (i.indexOf(".") > 0) {
d.decimal = i.split(".")[1];
if (d.decimal > 3) {
d.decimal = 3;
}
}
}
d.time = h;
d.finish = false;
if (isNaN(h)) {
var j = h.substring(0, 19);
j = j.replace(/-/g, "/");
d.time = new Date(j).getTime() / 1000;
}
var k = d.decimal == 0 ? 100 : 100;
d.day = 0;
d.hour = 0;
d.minute = 0;
d.second = 0;
d.t = setInterval(function() {
e = new Date().getTime();
f = parseInt(e / 1000 + x);
var l = d.time - f;
if (l <= 0) {
e = 0;
l = 0;
}
if (l >= 0) {
d = xcsoft.getTimeObject(d, l);
}
if (d.decimal == 1) {
d.msecZero = d.msec = parseInt(10 - (e % 1000) / 100);
if (d.msec == 10 || l == 0) {
d.msecZero = d.msec = 0;
}
} else if (d.decimal == 2) {
d.msecZero = d.msec = parseInt(100 - (e % 1000) / 10);
if (d.msec < 10) {
d.msecZero = "0" + d.msec;
} else if (d.msec == 100 || l == 0) {
d.msec = 0;
d.msecZero = "0" + d.msec;
}
} else {
d.msecZero = d.msec = parseInt(1000 - e % 1000);
if (d.msec < 10) {
d.msecZero = "00" + d.msec;
} else if (d.msec < 100) {
d.msecZero = "0" + d.msec;
} else if (d.msec == 1000 || l == 0) {
d.msec = 0;
d.msecZero = "00" + d.msec;
}
}
if (b) {
b(d);
}
if (l <= 0 || d.stop == true) {
clearInterval(d.t);
d.finish = true;
if (c) c(d);
}
}, k);
};
xcsoft.getTimeObject = function(a, l) {
var b = 60;
var c = b * b;
var d = 24 * c;
a.days = Math.floor(l / d);
a.year = Math.floor(a.days / 365);
a.day = Math.floor(a.days % 365);
a.hour = Math.floor((l % d) / c);
a.minute = Math.floor((l - (a.days * d + a.hour * c)) / b);
a.second = Math.floor(l % b);
a.dayZero = a.day < 10 ? "0" + a.day : a.day;
a.daysZero = a.days < 10 ? "0" + a.days : a.days;
a.hourZero = a.hour < 10 ? "0" + a.hour : a.hour;
a.minuteZero = a.minute < 10 ? "0" + a.minute : a.minute;
a.secondZero = a.second < 10 ? "0" + a.second : a.second;
return a;
};
export default {
props: ["startTime"],
name: "",
data() {
return {
days: 0,
hours: 0,
minute: 0,
second: 0
};
},
onLoad() {
let _this = this;
console.log(this.startTime, "--------129");
xcsoft.countdown(
this.startTime,
function(time) {
// console.log(time.day,time.hourZero, time.minuteZero, time.secondZero,'--------39')
_this.days = time.dayZero;
_this.hours = time.hourZero;
_this.minute = time.minuteZero;
_this.second = time.secondZero;
},
function(time) {
//倒计时结束后的操作
}
);
},
onUnload() {
// 清除未开播倒计时
d.stop = true;
},
components: {},
computed: {},
mounted() {},
methods: {}
};
</script>
<style lang="scss" scoped>
.days{
font-size: 28px;
font-weight: bold;
color: #fff;
span{
padding: 0 2px;
}
}
</style>
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