Skip to content

M
mayi-mp-shop
Commit b3f1fc6b by 李嘉林
Options

接口对接

parent 99291d7d
Showing with 279 additions and 107 deletions
src/components/livedModel/livedControls.vue
......@@ -12,21 +12,26 @@
<!-- 带货商品层 -->
<livedExplainingCommodities v-if="info.liveBroadcastState==1"></livedExplainingCommodities>
<!-- 商品列表弹层 -->
<livedGoodsDia :showDia="showDia" @changeStatus="changeStatus"></livedGoodsDia>
<livedGoodsDia
:showDia="showDia"
:info="info"
v-if="info.goodsRespDTOs&&showDia"
@changeStatus="changeStatus"
></livedGoodsDia>
<!-- 底部控制层 -->
<div class="control flex">
<template v-if="!isSend">
<div class="goodsImg" @click="showGoodsList">
<img src="../../../static/images/lived/goodsImg.png" alt />
<p class="goodsNum">99</p>
<p class="goodsNum" v-if="info.goodsRespDTOs.length>0">{{info.goodsRespDTOs.length}}</p>
</div>
<div class="iptCopy" @click="toSendOut">跟主播说点什么...</div>
<div class="iptCopy" @click="isLogin">跟主播说点什么...</div>
<div class="shareIcon">
<van-icon name="share" />
</div>
<div class="heardIcon" @click="addLike(1)">
<van-icon name="like" class="like" />
<p class="heardNum">{{likeNumCopy}}</p>
<p class="heardNum" v-if="likeNum>0">{{likeNumCopy}}</p>
<div class="box">
<div class="img" v-for="(item,index) in imgList" :key="index">
<img :src="item.img" alt />
......@@ -36,7 +41,14 @@
</template>
<template v-else>
<div class="sendOut">
<input class="sendIpt" :focus="getFocus" type="text" @blur="onblur" v-model="sendVal" placeholder="和主播说点什么吧~">
<input
class="sendIpt"
:focus="getFocus"
type="text"
@blur="onblur"
v-model="sendVal"
placeholder="和主播说点什么吧~"
/>
<div class="send" :class="{'noSendVal':sendVal==''}" @click="toSend">发送</div>
</div>
</template>
......@@ -50,10 +62,11 @@ import livedIsMsg from "@/components/livedModel/livedIsMsg";
import livedExplainingCommodities from "@/components/livedModel/livedExplainingCommodities";
import livedGoodsDia from "@/components/livedModel/livedGoodsDia";
export default {
props:["info"],
props: ["info"],
name: "",
data() {
return {
liveId: 0,
likeNum: 0, //点赞数
imgList: [],
iconList: [
......@@ -65,9 +78,9 @@ export default {
num: 0,
userComing: false,
showDia: false, //显示商品列表弹窗
isSend:false,//显示评论输入框
sendVal:'',//输入内容
getFocus:false,//获取焦点
isSend: false, //显示评论输入框
sendVal: "", //输入内容
getFocus: false //获取焦点
};
},
components: {
......@@ -82,11 +95,11 @@ export default {
}
},
created() {},
onLoad(){
},
mounted() {
onLoad(options) {
let params = JSON.parse(options.params);
this.liveId = params.liveId;
},
mounted() {},
methods: {
// 数量大于1w
watchMan(val) {
......@@ -94,6 +107,10 @@ export default {
},
// 点赞
addLike(val) {
if (!this.info.liveBroadcastState < 1) {
this.notAgainLive();
return;
}
if (val == 1) {
this.likeNum++;
}
......@@ -107,6 +124,18 @@ export default {
});
}, 300);
},
// 直播未开始提示
notAgainLive() {
wx.showModal({
content: "直播还未开始",
confirmColor: "#ff877d",
success: function(res) {
if (res.confirm) {
} else if (res.cancel) {
}
}
});
},
// 接口获取触发点赞
getAdd() {
if (this.imgList.length > 20) {
......@@ -125,25 +154,53 @@ export default {
changeStatus() {
this.showDia = false;
},
// 是否登录
isLogin() {
let _this = this;
wx.getStorage({
key: "sessionid",
success(res) {
_this.toSendOut();
},
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
});
}
});
},
// 发送评论
toSendOut(){
toSendOut() {
if (!this.info.liveBroadcastState < 1) {
this.notAgainLive();
return;
}
// 登录及未开始判断
this.isSend=true;
this.getFocus=true;
this.isSend = true;
this.getFocus = true;
},
// 失焦点
onblur(){
onblur() {
setTimeout(() => {
this.isSend = false;
this.sendVal = "";
}, 10);
},
// 点击发送留言
toSend(){
if(this.sendVal == ""){
this.getFocus=true;
}else{
toSend() {
if (this.sendVal == "") {
this.getFocus = true;
} else {
}
}
}
......@@ -297,7 +354,7 @@ export default {
}
}
}
.sendOut{
.sendOut {
display: flex;
align-items: center;
justify-content: space-between;
......@@ -308,12 +365,12 @@ export default {
border-radius: 38px;
line-height: 38px;
font-size: 16px;
.sendIpt{
.sendIpt {
width: 60vw;
color: #999;
padding-left: 10px;
}
.send{
.send {
color: #fff;
height: 30px;
width: 80px;
......@@ -322,8 +379,8 @@ export default {
border-radius: 30px;
background: linear-gradient(to right, #ff877d, #fb566d);
}
.noSendVal{
background:#ababa9;
.noSendVal {
background: #ababa9;
}
}
}
......
src/components/livedModel/livedGoodsDia.vue
......@@ -10,22 +10,22 @@
<div class="list">
<div class="item" v-for="(item,index) in goodsList" :key="index">
<div class="img" @click="toGoodsInfo(item)">
<img :src="item.productImgUrl" alt />
<img v-if="item.goodsImageUrl" :src="item.goodsImageUrl" alt />
</div>
<div class="info">
<p class="name line-clamp2">{{item.productName}}</p>
<p class="name line-clamp2">{{item.goodsName}}</p>
<div class="bottom">
<div class="price">
<p>
<span>￥</span>
<span>{{item.minPrice}}</span>
<span>{{item.goodsPrice}}</span>
</p>
<p class="del">
<!-- <p class="del">
<span>￥</span>
<span>{{999}}</span>
</p>
</p> -->
</div>
<div class="icon" @click="showSpeDia(item)">
<div class="icon" @click="isLogin(item)">
<van-icon name="shopping-cart" />
</div>
</div>
......@@ -34,7 +34,18 @@
</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>
<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>
......@@ -44,28 +55,15 @@ import { DFSImg } from "@/utils/index";
import live from "@/api/live";
export default {
props: {
showDia: {
type: Boolean,
default: false
}
showDia: Boolean,
info: Object,
},
name: "",
data() {
return {
liveId:0,
goodsList: [
{
productId: "266",
productName: "瑞士进口 雀巢（Nestle) 金牌 黑咖啡粉 至臻原味 速溶 咖啡豆微研磨",
productImgUrl:'http://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/jpg/de6ca6a1-f161-49da-8b76-3450144b4d47.jpg',
},
{
productId: "102",
productName: "ad新 外衣",
productImgUrl:'http://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/jpg/58ab315c-61d5-4799-8d1b-f0d3b0e1f0ad.jpg',
},
],
itemGoods:{},//选中商品
liveId: 0,
goodsList: [],
itemGoods: {}, //选中商品
showSpe: false
};
},
......@@ -74,12 +72,14 @@ export default {
},
computed: {},
created() {},
onLoad(options){
onLoad(options) {
let params = JSON.parse(options.params);
this.liveId=params.liveId;
this.goodsList.forEach((item,index)=>{
item.img=DFSImg(item.productImgUrl);
})
this.liveId = params.liveId;
this.goodsList=this.info.goodsRespDTOs;
this.goodsList.forEach((item, index) => {
item.goodsPrice=Number(item.goodsPrice);
item.goodsImageUrl = DFSImg(item.goodsImageUrl);
});
},
mounted() {},
methods: {
......@@ -87,43 +87,82 @@ export default {
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) {
let productId=val.productId;
this.itemGoods.productId=productId;
let productId = val.productId;
this.itemGoods.productId = productId;
wx.showLoading({
title: '加载中...',
})
live.getProductInfo(productId).then(res=>{
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);
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.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;
}
})
});
},
closeSpeDia() {
this.showSpe = false;
},
// 到商品详情
toGoodsInfo(val){
let query={
fromLived:1,
liveId:this.liveId,
}
this.backPath=`/goods/${val.productId}`;
toGoodsInfo(val) {
let query = {
fromLived: 1,
liveId: this.liveId
};
this.backPath = `/goods/${val.productId}`;
wx.reLaunch({
url: `../index/main?from=livedToGoodsInfo&backpath=${
this.backPath
}&params=${JSON.stringify(query)}`
})
});
}
}
};
......@@ -141,6 +180,7 @@ export default {
height: 70px;
border-radius: 6px;
overflow: hidden;
background: #999;
img {
width: 100%;
height: 100%;
......
src/components/livedModel/livedSelectionSpe.vue
......@@ -280,6 +280,7 @@ export default {
changeQty(event){
console.log(event.mp.detail,'------------------------------279')
this.buyQty=event.mp.detail;
this.getMixId(1,true);
},
// 默认选中一组规格
// 两个参数goodsSpc,allSpc sku及所有规格
......@@ -376,7 +377,7 @@ export default {
}
},
// 取价格
getMixId(val) {
getMixId(val,getNewPrice) {
if(!this.isDefault){
wx.showLoading({
title: '加载中...',
......@@ -422,9 +423,10 @@ export default {
Number(res.data.data.goodsSuggestedRetailPrice);
this.product_goods_info.singleItemActivityId =
res.data.data.singleItemActivityId||'';
if(!getNewPrice){
this.buyQty =
this.product_goods_info.productMinCount > 0 ? this.product_goods_info.productMinCount :1;
}
if (
this.product_goods_info.oversoldFlag != 1 &&
this.product_goods_info.sellMaxQty - 0 <= 0
......
src/components/livedModel/notStarted.vue
......@@ -4,7 +4,7 @@
<div class="time">
<timeDown v-if="startTime" :startTime="startTime"></timeDown>
</div>
<div class="remindBtn" @click="remind">开播提醒</div>
<div class="remindBtn" @click="isLogin">开播提醒</div>
</div>
</template>
......@@ -15,6 +15,7 @@ export default {
name: "",
data() {
return {
liveId:0,
startTime:null,
};
},
......@@ -23,7 +24,9 @@ export default {
},
computed: {},
created() {},
onLoad(){
onLoad(options){
let params = JSON.parse(options.params);
this.liveId=params.liveId;
console.log(this.info,'--------------------126')
this.startTime=this.info.startTime;
},
......@@ -31,7 +34,30 @@ export default {
methods: {
// 开播提醒
remind() {
console.log("开播");
console.log("点击开播,'------------34")
},
// 是否登录
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
});
}
});
}
}
};
......
src/pages/lived/index.vue
......@@ -17,8 +17,8 @@
</div>
<div class="info">
<p class="name line-clamp1" v-if="shopName">{{shopName}}</p>
<p class="num">
<span>999</span>
<p class="num" v-if="liveNoticeInfo.liveBroadcastState>0">
<span>{{liveNoticeInfo.watchNum}}</span>
<span>观看</span>
</p>
</div>
......@@ -39,7 +39,7 @@
<live-player
v-if="liveNoticeInfo.liveBroadcastState==1"
class="livePlayer"
:src="livedUrl"
:src="liveNoticeInfo.boStreamM3U8"
mode="RTC"
autoplay
bindstatechange="statechange"
......@@ -138,6 +138,27 @@ export default {
wx.reLaunch({
url: `../index/main?from=livedToIndex&backpath=${this.backPath}`
});
},
// 是否登录
isLogin(){
wx.getStorage({
key: "sessionid",
success(res) {
console.log("登录----------147")
},
fail(res) {
console.log("未登录------150")
// 跳转登录页
let backUrl='/lived/main';
let query={
liveId:this.liveId,
}
let url = `/pages/login/main?backpath=${backUrl}&params=${JSON.stringify(query)}`;
wx.reLaunch({
url: url
});
}
});
}
}
};
......
src/pages/login/index.vue
......@@ -61,7 +61,8 @@ export default {
testd: "",
test_sessionId: "",
test_isHaveUnion: "",
test_unionId: ""
test_unionId: "",
fromType:'',//来源类型 mini:小程序跳转到当前登录页
};
},
created() {},
......@@ -72,6 +73,8 @@ export default {
}
if (options.params) {
this.backParams = serialize(options.params);
let params = JSON.parse(options.params);
this.fromType = params.fromType;
}
this.getshop();
},
......@@ -179,11 +182,14 @@ export default {
if (this.isHaveUnion) {
wx.hideLoading();
//是会员 直接登录
wx.reLaunch({
url: `../index/main?from=login&backpath=${
this.backPath
}&params=${encodeURIComponent(this.backParams)}`
});
// 0318写直播改后面注释逻辑相同
// wx.reLaunch({
// url: `../index/main?from=login&backpath=${
// this.backPath
// }&params=${encodeURIComponent(this.backParams)}`
// });
// 跳转回小程序页面
this.pushPageType();
} else {
var data = wx_decode(
this.appid,
......@@ -210,11 +216,13 @@ export default {
key: "sessionid",
data: res.data.data.sessionId
});
wx.reLaunch({
url: `../index/main?from=login&backpath=${
this.backPath
}&params=${encodeURIComponent(this.backParams)}`
});
// 跳转回小程序页面
this.pushPageType();
// wx.reLaunch({
// url: `../index/main?from=login&backpath=${
// this.backPath
// }&params=${encodeURIComponent(this.backParams)}`
// });
} else {
//不是会员需要绑定手机号
this.isShowPhone = true;
......@@ -232,6 +240,20 @@ export default {
}
}
},
// 是否跳转h5或小程序
pushPageType(){
if(this.fromType=='mini'){
wx.navigateBack({
delta: 1
});
}else{
wx.reLaunch({
url: `../index/main?from=login&backpath=${
this.backPath
}&params=${encodeURIComponent(this.backParams)}`
});
}
},
getPhoneNumber(e) {
wx.checkSession({
success: () => {
......@@ -287,11 +309,13 @@ export default {
key: "sessionid",
data: res.data.data.sessionId
});
wx.reLaunch({
url: `../index/main?from=login&backpath=${
this.backPath
}&params=${encodeURIComponent(this.backParams)}`
});
// 跳转回小程序页面
this.pushPageType();
// wx.reLaunch({
// url: `../index/main?from=login&backpath=${
// this.backPath
// }&params=${encodeURIComponent(this.backParams)}`
// });
}
})
.catch(err => {
......@@ -299,11 +323,13 @@ export default {
});
},
backMainHandle() {
wx.reLaunch({
url: `../index/main?from=login&backpath=${
this.backPath
}&params=${encodeURIComponent(this.backParams)}`
});
// 跳转回小程序页面
this.pushPageType();
// wx.reLaunch({
// url: `../index/main?from=login&backpath=${
// this.backPath
// }&params=${encodeURIComponent(this.backParams)}`
// });
},
eLogin() {
//企业员工登录
......
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