2023-10-28 16:31:53 +08:00
|
|
|
|
<template name="create-float-page">
|
|
|
|
|
<view>
|
|
|
|
|
<view class="do-box">
|
|
|
|
|
<view class="do-box-top">
|
|
|
|
|
<text>请输入直播主题:</text>
|
|
|
|
|
<view class="cover-input">
|
|
|
|
|
<input type="text" v-model="livename" placeholder="请输入内容,吸引更多观众"
|
|
|
|
|
placeholder-class="cover-inputplaceholder" />
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="do-box-top" @click="chooseImage">
|
|
|
|
|
<text>请上传直播封面:</text>
|
|
|
|
|
<view class="cover-box">
|
|
|
|
|
<image :src="imageSrc" mode="aspectFill" v-if='imageSrc'></image>
|
|
|
|
|
<view class="cover-box-img" v-else>
|
|
|
|
|
|
|
|
|
|
<image src="@/static/img/xj.png" mode="aspectFit"></image>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="cover-text web-font"v-if='imageSrc'>更新封面</view>
|
|
|
|
|
<view class="cover-text web-font"v-else style="color: #B3B3B3;">上传图片</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="do-box-check">
|
|
|
|
|
<view class="do-box-check-top">
|
|
|
|
|
<view class="do-box-check-left">
|
|
|
|
|
<view class="check-top-imga">
|
|
|
|
|
<image src="@/static/img/c2.png" mode="aspectFit"></image>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="check-top-txt">请选择直播商品</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="do-box-check-right">
|
|
|
|
|
<view class="check-top-imgb" @click="shop">
|
|
|
|
|
<image src="@/static/img/c1.png" mode="aspectFit"></image>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="" v-if="goodlist.length>0" @click="editshop(goodlist)">
|
|
|
|
|
<scroll-view scroll-x="true" scroll-left="0" style="width: 450rpx;white-space: nowrap;">
|
|
|
|
|
<view class="" v-for="(item,i) in goodlist" :key='i'
|
|
|
|
|
style="width: 100rpx;height: 100rpx;margin-right: 20rpx;display:inline-block;">
|
|
|
|
|
<image :src="item.app_goods_pic" mode="aspectFit" style="width: 100rpx;height: 100rpx;">
|
|
|
|
|
</image>
|
|
|
|
|
</view>
|
|
|
|
|
</scroll-view>
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="start-but web-font" @click="create_live_room">开始直播</view>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<uni-popup ref="popup" type="bottom" style="height: 560rpx;">
|
|
|
|
|
<shoppinglist @getProduct="getProduct" :checkedObj="productList" @close='close'></shoppinglist>
|
|
|
|
|
</uni-popup>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import {
|
|
|
|
|
HTTP_REQUEST_URL
|
|
|
|
|
} from '@/config/app';
|
|
|
|
|
|
|
|
|
|
import {
|
|
|
|
|
good,
|
|
|
|
|
createPushLive
|
|
|
|
|
} from '@/api/api.js'
|
|
|
|
|
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
2023-10-28 21:43:15 +08:00
|
|
|
|
|
2023-10-28 16:31:53 +08:00
|
|
|
|
import shoppinglist from '@/components/shoppinglist/shoppinglist.vue'
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
uniPopup,
|
|
|
|
|
shoppinglist
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
|
|
livename: '',
|
|
|
|
|
imageSrc: '',
|
|
|
|
|
cover_path: '',
|
|
|
|
|
inputValue: '新建直播间',
|
|
|
|
|
|
|
|
|
|
productList: [],
|
|
|
|
|
goodlist: [],
|
|
|
|
|
userinfo: {}
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
if (this.isUserInfoExist) {
|
|
|
|
|
console.log('用户信息存在');
|
|
|
|
|
} else {
|
|
|
|
|
console.log('用户信息不存在');
|
|
|
|
|
uni.showModal({
|
|
|
|
|
// title: '标题',
|
|
|
|
|
content: '用户信息不存在,是否重新登录',
|
|
|
|
|
showCancel: true,
|
|
|
|
|
cancelText: '取消',
|
|
|
|
|
confirmText: '确定',
|
|
|
|
|
success: function(res) {
|
|
|
|
|
if (res.confirm) {
|
|
|
|
|
// 用户点击了确定按钮
|
|
|
|
|
uni.redirectTo({
|
|
|
|
|
url: '/pages/login/login'
|
|
|
|
|
})
|
|
|
|
|
} else if (res.cancel) {
|
|
|
|
|
// 用户点击了取消按钮
|
|
|
|
|
console.log('用户点击了取消按钮');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
isUserInfoExist() {
|
|
|
|
|
const userInfo = this.$store.state.app.userInfo;
|
|
|
|
|
|
|
|
|
|
uni.sendHostEvent('userinfo', userInfo, (ret) => {
|
|
|
|
|
//发送消息成功回调
|
|
|
|
|
console.log('消息成功' + JSON.stringify(userInfo));
|
|
|
|
|
});
|
|
|
|
|
return !!userInfo; // 如果 userInfo 为空,则返回 false;否则返回 true
|
|
|
|
|
},
|
|
|
|
|
//关闭弹窗
|
|
|
|
|
close() {
|
|
|
|
|
this.$refs.popup.close()
|
|
|
|
|
},
|
|
|
|
|
//选择商品
|
|
|
|
|
shop() {
|
|
|
|
|
this.$refs.popup.open()
|
|
|
|
|
},
|
|
|
|
|
editshop(e) {
|
|
|
|
|
let arr1 = []
|
|
|
|
|
for (let i in e) {
|
|
|
|
|
arr1.push({
|
|
|
|
|
product_id: e[i].app_goods_id,
|
|
|
|
|
store_name: e[i].app_goods_name,
|
|
|
|
|
image: e[i].app_goods_pic,
|
|
|
|
|
price: e[i].app_goods_price,
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
this.productList = arr1
|
|
|
|
|
this.$refs.popup.open()
|
|
|
|
|
},
|
|
|
|
|
//获取商品数据
|
|
|
|
|
getProduct(e) {
|
|
|
|
|
|
|
|
|
|
this.goodlist = []
|
|
|
|
|
for (let i in e) {
|
|
|
|
|
this.goodlist.push({
|
|
|
|
|
app_goods_id: e[i].product_id,
|
|
|
|
|
app_goods_name: e[i].store_name,
|
|
|
|
|
app_goods_pic: e[i].image,
|
|
|
|
|
app_goods_price: e[i].price,
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.$refs.popup.close()
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
//创建房间
|
|
|
|
|
create_live_room: function(e) {
|
|
|
|
|
|
|
|
|
|
if (this.cover_path == '') {
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '请上传封面',
|
|
|
|
|
duration: 2000,
|
|
|
|
|
icon: 'none'
|
|
|
|
|
});
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
if (this.livename == '') {
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '请填写标题',
|
|
|
|
|
duration: 2000,
|
|
|
|
|
icon: 'none'
|
|
|
|
|
});
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
if (this.goodlist.length == 0) {
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '请添加商品',
|
|
|
|
|
duration: 2000,
|
|
|
|
|
icon: 'none'
|
|
|
|
|
});
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
createPushLive({
|
|
|
|
|
live_name: this.livename,
|
|
|
|
|
cover: this.cover_path,
|
|
|
|
|
app_name: "shop",
|
|
|
|
|
app_user_id: this.$store.state.app.userInfo.uid,
|
|
|
|
|
goods: this.goodlist
|
|
|
|
|
}).then(res => {
|
|
|
|
|
console.log(res)
|
|
|
|
|
uni.sendHostEvent('log', res, (ret) => {
|
|
|
|
|
//发送消息成功回调
|
|
|
|
|
console.log('消息成功' + JSON.stringify(res));
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (res.code == 1) {
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
url: '/pages/live/anchor?data=' + encodeURIComponent(JSON.stringify(res
|
|
|
|
|
.data))
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: res.msg,
|
|
|
|
|
duration: 2000,
|
|
|
|
|
icon: 'none'
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}).catch((err) => {
|
|
|
|
|
uni.sendHostEvent('log', err, (ret) => {
|
|
|
|
|
//发送消息成功回调
|
|
|
|
|
console.log('消息成功' + JSON.stringify(err));
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
},
|
2023-10-28 21:43:15 +08:00
|
|
|
|
|
2023-10-28 16:31:53 +08:00
|
|
|
|
chooseImage: function() {
|
|
|
|
|
let that = this;
|
|
|
|
|
that.$util.uploadImageOne('upload/image', function(res) {
|
|
|
|
|
// console.log(res.data.path)
|
|
|
|
|
that.cover_path = res.data.path
|
|
|
|
|
that.imageSrc = res.data.path
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
}
|
2023-10-28 21:43:15 +08:00
|
|
|
|
|
2023-10-28 16:31:53 +08:00
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
2023-10-28 21:43:15 +08:00
|
|
|
|
<style lang="scss" scoped>
|
2023-10-28 16:31:53 +08:00
|
|
|
|
page {
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.top-do-box {
|
|
|
|
|
width: 90%;
|
|
|
|
|
margin: auto;
|
|
|
|
|
/* #ifdef MP-WEIXIN */
|
|
|
|
|
margin-top: 120upx;
|
|
|
|
|
/* #endif */
|
|
|
|
|
/* #ifdef APP-PLUS */
|
|
|
|
|
margin-top: 60upx;
|
|
|
|
|
/* #endif */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ico-box {
|
|
|
|
|
width: 70upx;
|
|
|
|
|
height: 70upx;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ico {
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
font-size: 48upx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lico {
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
font-size: 28upx;
|
|
|
|
|
margin-right: 4upx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.do-box {
|
|
|
|
|
width: 90%;
|
|
|
|
|
padding: 40upx 0;
|
|
|
|
|
flex-wrap: nowrap;
|
|
|
|
|
margin: auto;
|
|
|
|
|
z-index: 9999;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.do-box-top {
|
|
|
|
|
.cover-box {
|
|
|
|
|
width: 193rpx;
|
|
|
|
|
height: 193rpx;
|
|
|
|
|
background: #F4F4F4;
|
|
|
|
|
border-radius: 10upx;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
position: relative;
|
|
|
|
|
margin-top: 32rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cover-box-img {
|
|
|
|
|
width: 72rpx;
|
|
|
|
|
height: 72rpx;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
margin-top: 30rpx;
|
|
|
|
|
|
|
|
|
|
image {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cover-inputplaceholder {
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #737373;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cover-input {
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #000;
|
|
|
|
|
margin-top: 32rpx;
|
|
|
|
|
margin-bottom: 70rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.cover-text {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 30rpx;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 50upx;
|
|
|
|
|
line-height: 50upx;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 28upx;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cover-box image {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.do-box-check {
|
|
|
|
|
margin-top: 35rpx;
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
|
|
|
|
.do-box-check-top {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
margin-bottom: 30rpx;
|
|
|
|
|
|
|
|
|
|
.do-box-check-left {
|
|
|
|
|
display: flex;
|
|
|
|
|
.check-top-imga {
|
|
|
|
|
width: 44rpx;
|
|
|
|
|
height: 44rpx;
|
|
|
|
|
margin-right: 20rpx;
|
|
|
|
|
image {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.check-top-txt {
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
color: #333333;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.do-box-check-right {
|
|
|
|
|
.check-top-imgb {
|
|
|
|
|
width: 48rpx;
|
|
|
|
|
height: 48rpx;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
image {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.check-lable {
|
|
|
|
|
width: 200upx;
|
|
|
|
|
height: 60upx;
|
|
|
|
|
line-height: 60upx;
|
|
|
|
|
border-radius: 60upx;
|
|
|
|
|
background-color: rgba(0, 0, 0, .2);
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
font-size: 28upx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uni-input {
|
|
|
|
|
background: none !important;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
font-size: 40upx;
|
|
|
|
|
margin-top: 20upx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 底部分享 */
|
|
|
|
|
.uni-share {
|
|
|
|
|
/* #ifndef APP-NVUE */
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
/* #endif */
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
padding: 0 40upx;
|
|
|
|
|
border-top-left-radius: 20upx;
|
|
|
|
|
border-top-right-radius: 20upx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uni-share-title {
|
|
|
|
|
line-height: 60rpx;
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
padding: 15rpx 0;
|
|
|
|
|
text-align: center;
|
|
|
|
|
border-bottom: 2upx solid #F0F0F0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uni-share-content {
|
|
|
|
|
/* #ifndef APP-NVUE */
|
|
|
|
|
/* display: flex; */
|
|
|
|
|
/* #endif */
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
/* justify-content: space-around; */
|
|
|
|
|
padding: 15px 0;
|
|
|
|
|
/* padding-bottom: 0; */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.content-image {
|
|
|
|
|
width: 60rpx;
|
|
|
|
|
height: 60rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uni-share-content-text {
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
color: #333;
|
|
|
|
|
padding-top: 5px;
|
|
|
|
|
padding-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uni-share-btn {
|
|
|
|
|
height: 90rpx;
|
|
|
|
|
line-height: 90rpx;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
border-top-color: #f5f5f5;
|
|
|
|
|
border-top-width: 1px;
|
|
|
|
|
border-top-style: solid;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.type-lable {
|
|
|
|
|
width: 20%;
|
|
|
|
|
margin-left: 2.5%;
|
|
|
|
|
height: 60upx;
|
|
|
|
|
line-height: 60upx;
|
|
|
|
|
border-radius: 60upx;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #666666;
|
|
|
|
|
font-size: 24upx;
|
|
|
|
|
border: 2upx solid #F0F0F0;
|
|
|
|
|
margin-bottom: 20upx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.type-lable-active {
|
|
|
|
|
background-color: #ff2d54;
|
|
|
|
|
border: 2upx solid #ff2d54;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ok-but {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 90upx;
|
|
|
|
|
line-height: 90upx;
|
|
|
|
|
border-radius: 90upx;
|
|
|
|
|
font-size: 28upx;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
text-align: center;
|
|
|
|
|
background-color: #ff2d54;
|
|
|
|
|
margin: 20upx auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ok-but-none {
|
|
|
|
|
background-color: #F0F0F0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.loc-lable {
|
|
|
|
|
line-height: 70upx;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 32upx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.loc-lable-active {
|
|
|
|
|
color: #ff2d54;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.start-but {
|
|
|
|
|
width: 60%;
|
|
|
|
|
height: 90upx;
|
|
|
|
|
line-height: 90upx;
|
|
|
|
|
border-radius: 90upx;
|
|
|
|
|
font-size: 36upx;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
text-align: center;
|
|
|
|
|
background-color: #ff2d54;
|
|
|
|
|
position: fixed;
|
|
|
|
|
bottom: 100upx;
|
|
|
|
|
left: 20%;
|
|
|
|
|
}
|
|
|
|
|
</style>
|