2020-08-13 08:12:57 +00:00
|
|
|
|
<template>
|
|
|
|
|
|
<div class="broadcast-details" :style="'height:'+windowH+'px'">
|
|
|
|
|
|
<view class="hd-wrapper" :class="active === true ? 'on' : ''">
|
|
|
|
|
|
<scroll-view scroll-y="true" style="height: 100%; overflow: hidden;" :scroll-top="scrollTop" scroll-with-animation="true">
|
|
|
|
|
|
<div class="broadcast-details_order">
|
|
|
|
|
|
<div class="broadcast-details_box" v-if="productId && productInfo.id">
|
|
|
|
|
|
<div class="broadcast_details_img">
|
|
|
|
|
|
<img :src="productInfo.image" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="broadcast_details_picBox">
|
|
|
|
|
|
<div class="broadcast_details_tit" v-text="productInfo.storeName"></div>
|
|
|
|
|
|
<div class="acea-row row-between">
|
|
|
|
|
|
<div class="broadcast_details_pic">
|
|
|
|
|
|
￥{{ productInfo.price
|
|
|
|
|
|
}}<span class="broadcast_details_pic_num">￥{{ productInfo.otPrice }}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="broadcast_details_btn" @click="sendProduct">
|
|
|
|
|
|
发送客服
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="broadcast_box" v-if="orderId && orderInfo.id">
|
|
|
|
|
|
<div class="broadcast-details_num broadcast_num">
|
|
|
|
|
|
<span>订单号：{{ orderInfo.order_id }}</span>
|
|
|
|
|
|
<span>{{ orderInfo.add_time_y }} {{ orderInfo.add_time_h }}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="broadcast-details_box">
|
|
|
|
|
|
<div class="broadcast_details_img">
|
|
|
|
|
|
<img :src="cartInfo.productInfo.image" />
|
|
|
|
|
|
<div class="broadcast_details_model">
|
|
|
|
|
|
{{ orderInfo.cartInfo ? orderInfo.cartInfo.length : 0 }}件商品
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="broadcast_details_picBox">
|
|
|
|
|
|
<div class="broadcast_details_tit">
|
|
|
|
|
|
{{ cartInfo.productInfo.store_name }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="acea-row row-between">
|
|
|
|
|
|
<div class="broadcast_details_pic">
|
|
|
|
|
|
￥{{ cartInfo.productInfo.price
|
|
|
|
|
|
}}<span class="broadcast_details_pic_num">￥{{ cartInfo.productInfo.ot_price }}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="broadcast_details_btn" @click="sendOrder">
|
|
|
|
|
|
发送客服
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="chat" ref="chat" >
|
|
|
|
|
|
<template v-for="item in history">
|
|
|
|
|
|
<div class="item acea-row row-top" v-if="item.uid === toUid" :key="item.id">
|
|
|
|
|
|
<div class="pictrue"><img :src="item.avatar" /></div>
|
|
|
|
|
|
<div class="text">
|
|
|
|
|
|
<div class="name">{{ item.nickname }}</div>
|
|
|
|
|
|
<div class="acea-row">
|
|
|
|
|
|
<!--商品链接-->
|
|
|
|
|
|
<div v-if="item.msn_type === 6 && item.orderInfo.id">
|
|
|
|
|
|
<router-link class="broadcast-details_num" :to="{
|
|
|
|
|
|
path: '/pages/admin/orderDetail/index?id=' + item.orderInfo.order_id
|
|
|
|
|
|
}">
|
|
|
|
|
|
<span>订单号：{{ item.orderInfo.order_id }}</span>
|
|
|
|
|
|
</router-link>
|
|
|
|
|
|
<div class="conter acea-row row-middle">
|
|
|
|
|
|
<div class="broadcast-details_order noPad" v-for="(val, inx) in item.orderInfo.cartInfo" :key="val.id">
|
|
|
|
|
|
<router-link class="broadcast-details_box noPad" :to="{ path: '/pages/goods_details/index?id=' + val.product_id }" v-if="inx == 0">
|
|
|
|
|
|
<div class="broadcast_details_img">
|
|
|
|
|
|
<img :src="val.productInfo.image" />
|
|
|
|
|
|
<div class="broadcast_details_model">
|
|
|
|
|
|
{{
|
|
|
|
|
|
item.orderInfo.cartInfo
|
|
|
|
|
|
? item.orderInfo.cartInfo.length
|
|
|
|
|
|
: 0
|
|
|
|
|
|
}}件商品
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="broadcast_details_picBox noPad">
|
|
|
|
|
|
<div class="broadcast_details_tit" v-text="val.productInfo.store_name"></div>
|
|
|
|
|
|
<div class="broadcast_details_pic">
|
|
|
|
|
|
￥{{ val.productInfo.price }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</router-link>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!--商品链接-->
|
|
|
|
|
|
<div class="conter acea-row row-middle" v-if="item.msn_type === 5">
|
|
|
|
|
|
<div class=" noPad">
|
|
|
|
|
|
<router-link class="acea-row row-column-around noPad" v-if="item.productInfo.id" :to="{ path: '/pages/goods_details/index?id=' + item.productInfo.id }">
|
|
|
|
|
|
<div class="broadcast_details_img_no">
|
|
|
|
|
|
<img :src="item.productInfo.image" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="broadcast_details_picBox_no noPad">
|
|
|
|
|
|
<div class="broadcast_details_pic">
|
|
|
|
|
|
￥{{ item.productInfo.price }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="broadcast_details_tit_no" v-text="item.productInfo.store_name"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</router-link>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="conter acea-row row-middle" v-if="item.msn_type === 4">
|
|
|
|
|
|
<img src="/static/images/signal2.gif" class="signal" style="margin-right: 0.27rem;" />12’’
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="conter acea-row row-middle" v-if="item.msn_type === 3">
|
|
|
|
|
|
<img :src="item.msn" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="conter acea-row row-middle" v-if="item.msn_type === 2">
|
|
|
|
|
|
<i class="em" :class="item.msn"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="conter acea-row row-middle" v-if="item.msn_type === 1">
|
|
|
|
|
|
{{ item.msn }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="item acea-row row-top row-right" v-else :key="item.id">
|
|
|
|
|
|
<div class="text textR">
|
|
|
|
|
|
<div class="name">{{ item.nickname }}</div>
|
|
|
|
|
|
<div class="acea-row ">
|
|
|
|
|
|
<!--商品链接-->
|
|
|
|
|
|
<router-link v-if="item.msn_type === 6 && item.orderInfo.id" :to="{
|
|
|
|
|
|
path: '/pages/admin/orderDetail/index?id=' + item.orderInfo.order_id
|
|
|
|
|
|
}">
|
|
|
|
|
|
<div class="broadcast-details_num">
|
|
|
|
|
|
<span>订单号：{{ item.orderInfo.order_id }}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="conter acea-row row-middle">
|
|
|
|
|
|
<div class="broadcast-details_order noPad" v-for="(val, inx) in item.orderInfo.cartInfo" :key="val.id">
|
|
|
|
|
|
<div class="broadcast-details_box noPad" v-if="inx == 0">
|
|
|
|
|
|
<div class="broadcast_details_img">
|
|
|
|
|
|
<img :src="val.productInfo.image" />
|
|
|
|
|
|
<div class="broadcast_details_model">
|
|
|
|
|
|
{{
|
|
|
|
|
|
item.orderInfo.cartInfo
|
|
|
|
|
|
? item.orderInfo.cartInfo.length
|
|
|
|
|
|
: 0
|
|
|
|
|
|
}}件商品
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="broadcast_details_picBox noPad">
|
|
|
|
|
|
<div class="broadcast_details_tit" v-text="val.productInfo.store_name"></div>
|
|
|
|
|
|
<div class="broadcast_details_pic">
|
|
|
|
|
|
￥{{ val.productInfo.price }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</router-link>
|
|
|
|
|
|
|
|
|
|
|
|
<!--商品链接-->
|
|
|
|
|
|
<div class="conter acea-row row-middle" v-if="item.msn_type === 5">
|
|
|
|
|
|
<div class=" noPad">
|
|
|
|
|
|
<router-link class="acea-row row-column-around noPad" v-if="item.productInfo.id" :to="{ path: '/pages/goods_details/index?id=' + item.productInfo.id }">
|
|
|
|
|
|
<div class="broadcast_details_img_no">
|
|
|
|
|
|
<img :src="item.productInfo.image" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="broadcast_details_picBox_no noPad">
|
|
|
|
|
|
<div class="broadcast_details_pic">
|
|
|
|
|
|
￥{{ item.productInfo.price }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="broadcast_details_tit_no" v-text="item.productInfo.store_name"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</router-link>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="conter acea-row row-middle" v-if="item.msn_type === 3">
|
|
|
|
|
|
<img :src="item.msn" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="conter acea-row row-middle" v-if="item.msn_type === 2">
|
|
|
|
|
|
<i class="em" :class="item.msn"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="conter acea-row row-middle" v-if="item.msn_type === 1">
|
|
|
|
|
|
{{ item.msn }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="pictrue"><img :src="item.avatar" /></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div :style=" active === true
|
|
|
|
|
|
? 'height:' + footerConH + 'rem;'
|
|
|
|
|
|
: 'height:' + footerH + 'rem;'
|
|
|
|
|
|
"></div>
|
|
|
|
|
|
</scroll-view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<div class="footerCon" :class="active === true ? 'on' : ''" :style="'transform: translate3d(0,' + percent + '%,0);'" ref="footerCon">
|
|
|
|
|
|
<form>
|
|
|
|
|
|
<div class="footer acea-row row-between row-bottom" ref="footer">
|
|
|
|
|
|
<!--<img-->
|
|
|
|
|
|
<!--:src="-->
|
|
|
|
|
|
<!--voice === true-->
|
|
|
|
|
|
<!--? require('@assets/images/keyboard.png')-->
|
|
|
|
|
|
<!--: require('@assets/images/voice.png')-->
|
|
|
|
|
|
<!--"-->
|
|
|
|
|
|
<!--@click="voiceBnt"-->
|
|
|
|
|
|
<!--/>-->
|
|
|
|
|
|
|
|
|
|
|
|
<img @click="uploadImg" src="/static/images/plus.png" />
|
|
|
|
|
|
<img :src="
|
|
|
|
|
|
active === true
|
|
|
|
|
|
? '/static/images/keyboard.png'
|
|
|
|
|
|
: '/static/images/face.png'
|
|
|
|
|
|
"
|
|
|
|
|
|
@click="emoticon" />
|
|
|
|
|
|
<div class="voice acea-row row-center-wrapper" v-if="voice" @touchstart.prevent="start" @touchmove.prevent="move"
|
|
|
|
|
|
@touchend.prevent="end">
|
|
|
|
|
|
{{ speak }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- <p contenteditable="true" class="input" ref="input" v-show="!voice" @keydown="keydown($event)" @keyup="keyup" @focus="focus"></p> -->
|
|
|
|
|
|
<input type="text" placeholder="请输入内容" class="input" ref="input" v-show="!voice" @input="bindInput" @keyup="keyup"
|
|
|
|
|
|
@focus="focus" cursor-spacing="20" v-model="textCon">
|
|
|
|
|
|
<div class="send" :class="sendColor === true ? 'font-color-red' : ''" @click="sendTest">
|
|
|
|
|
|
发送
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</form>
|
|
|
|
|
|
<div class="banner slider-banner">
|
|
|
|
|
|
<swiper class="swiper-wrapper" :autoplay="autoplay" :circular="circular" :interval="interval" :duration="duration"
|
|
|
|
|
|
v-if="emojiGroup.length > 0">
|
|
|
|
|
|
<block v-for="(emojiList, index) in emojiGroup" :key="index">
|
|
|
|
|
|
<swiper-item>
|
|
|
|
|
|
<i class="em" :class="emoji" v-for="emoji in emojiList" :key="emoji" @click="addEmoji(emoji)"></i>
|
|
|
|
|
|
<img src="/static/images/del.png" class="emoji-outer" />
|
|
|
|
|
|
</swiper-item>
|
|
|
|
|
|
</block>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <swiper-slide class="swiper-slide acea-row" v-for="(emojiList, index) in emojiGroup" :key="index">
|
|
|
|
|
|
<i class="em" :class="emoji" v-for="emoji in emojiList" :key="emoji" @click="addEmoji(emoji)"></i>
|
|
|
|
|
|
<img src="/static/images/del.png" class="emoji-outer" />
|
|
|
|
|
|
</swiper-slide>
|
|
|
|
|
|
<div class="swiper-pagination" slot="pagination"></div> -->
|
|
|
|
|
|
</swiper>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="recording" v-if="recording">
|
|
|
|
|
|
<img src="/static/images/recording.png" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<home></home>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import emojiList from "@/utils/emoji";
|
|
|
|
|
|
import Socket from "@/libs/chat";
|
|
|
|
|
|
import {
|
|
|
|
|
|
getChatRecord
|
|
|
|
|
|
} from "@/api/user";
|
|
|
|
|
|
import {
|
|
|
|
|
|
getProductDetail
|
|
|
|
|
|
} from "@/api/store";
|
|
|
|
|
|
import {
|
|
|
|
|
|
getOrderDetail
|
|
|
|
|
|
} from "@/api/order";
|
|
|
|
|
|
import easyUpload from '@/components/easy-upload/easy-upload.vue'
|
|
|
|
|
|
import {
|
|
|
|
|
|
TOKENNAME,
|
|
|
|
|
|
HTTP_REQUEST_URL
|
|
|
|
|
|
} from '@/config/app.js';
|
|
|
|
|
|
import home from '@/components/home';
|
|
|
|
|
|
|
|
|
|
|
|
const chunk = function(arr, num) {
|
|
|
|
|
|
num = num * 1 || 1;
|
|
|
|
|
|
var ret = [];
|
|
|
|
|
|
arr.forEach(function(item, i) {
|
|
|
|
|
|
if (i % num === 0) {
|
|
|
|
|
|
ret.push([]);
|
|
|
|
|
|
}
|
|
|
|
|
|
ret[ret.length - 1].push(item);
|
|
|
|
|
|
});
|
|
|
|
|
|
return ret;
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const NAME = "CustomerService";
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
|
name: NAME,
|
|
|
|
|
|
components: {
|
|
|
|
|
|
easyUpload,
|
|
|
|
|
|
home
|
|
|
|
|
|
},
|
|
|
|
|
|
props: {
|
|
|
|
|
|
couponList: {
|
|
|
|
|
|
type: Array,
|
|
|
|
|
|
default: () => []
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data: function() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
url: `${HTTP_REQUEST_URL}/api/upload/image`,
|
|
|
|
|
|
headers: {
|
|
|
|
|
|
"Authori-zation": "Bearer " + this.$store.state.app.token
|
|
|
|
|
|
},
|
|
|
|
|
|
emojiGroup: chunk(emojiList, 20),
|
|
|
|
|
|
active: false,
|
|
|
|
|
|
voice: false,
|
|
|
|
|
|
speak: "按住 说话",
|
|
|
|
|
|
recording: false,
|
|
|
|
|
|
swiperOption: {
|
|
|
|
|
|
pagination: {
|
|
|
|
|
|
el: ".swiper-pagination",
|
|
|
|
|
|
clickable: true
|
|
|
|
|
|
},
|
|
|
|
|
|
speed: 1000,
|
|
|
|
|
|
observer: true,
|
|
|
|
|
|
observeParents: true
|
|
|
|
|
|
},
|
|
|
|
|
|
percent: 0,
|
|
|
|
|
|
footerConH: 0,
|
|
|
|
|
|
footerH: 1.08,
|
|
|
|
|
|
socket: null,
|
|
|
|
|
|
toUid: 0,
|
|
|
|
|
|
page: 1,
|
|
|
|
|
|
limit: 30,
|
|
|
|
|
|
loading: false,
|
|
|
|
|
|
loaded: false,
|
|
|
|
|
|
history: [],
|
|
|
|
|
|
sendColor: false,
|
|
|
|
|
|
sendtxt: "",
|
|
|
|
|
|
productId: 0,
|
|
|
|
|
|
productInfo: {},
|
|
|
|
|
|
orderId: "",
|
|
|
|
|
|
orderInfo: {},
|
|
|
|
|
|
cartInfo: {},
|
|
|
|
|
|
autoplay: false,
|
|
|
|
|
|
circular: true,
|
|
|
|
|
|
interval: 3000,
|
|
|
|
|
|
duration: 500,
|
|
|
|
|
|
upload_max: 2, //图片大小
|
|
|
|
|
|
//上传的图片地址
|
|
|
|
|
|
uploadImages: [],
|
|
|
|
|
|
//展示的图片地址
|
|
|
|
|
|
uploads: [],
|
|
|
|
|
|
// 超出限制数组
|
|
|
|
|
|
exceeded_list: [],
|
|
|
|
|
|
windowH: 0,
|
|
|
|
|
|
isBQ: false,
|
|
|
|
|
|
scrollTop:0 ,//滚动距离
|
|
|
|
|
|
textCon:'' //文字
|
|
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
watch: {
|
|
|
|
|
|
$route(n) {
|
|
|
|
|
|
if (n.name === NAME) {
|
|
|
|
|
|
if (n.params.productId) this.productId = n.params.productId;
|
|
|
|
|
|
else this.productId = 0;
|
|
|
|
|
|
|
|
|
|
|
|
if (n.query.orderId) this.orderId = n.query.orderId;
|
|
|
|
|
|
else this.orderId = "";
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
|
this.socket && this.socket.close();
|
|
|
|
|
|
},
|
|
|
|
|
|
onLoad(option) {
|
|
|
|
|
|
let self = this
|
|
|
|
|
|
this.toUid = option.uid || 0;
|
|
|
|
|
|
this.productId = parseInt(option.productId) || 0;
|
|
|
|
|
|
this.orderId = option.orderId || ""
|
|
|
|
|
|
uni.getSystemInfo({
|
|
|
|
|
|
success: function(res) {
|
|
|
|
|
|
self.windowH = res.windowHeight
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
onReady: function() {
|
|
|
|
|
|
this.height();
|
|
|
|
|
|
this.getHistory();
|
|
|
|
|
|
this.getproductInfo();
|
|
|
|
|
|
this.getOrderInfo();
|
|
|
|
|
|
this.socket = new Socket();
|
|
|
|
|
|
this.socket.vm(this);
|
|
|
|
|
|
this.$on(["reply", "chat"], data => {
|
|
|
|
|
|
this.history.push(data);
|
|
|
|
|
|
this.$nextTick(function() {
|
|
|
|
|
|
window.scrollTo(0, document.documentElement.scrollHeight + 999);
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
this.$on("socket_error", () => {
|
|
|
|
|
|
this.$dialog.error("连接失败");
|
|
|
|
|
|
});
|
|
|
|
|
|
this.$on("err_tip", data => {
|
2020-11-05 08:21:06 +00:00
|
|
|
|
this.$dialog.error(data);
|
2020-08-13 08:12:57 +00:00
|
|
|
|
});
|
|
|
|
|
|
this.$on("socket_open", () => {
|
|
|
|
|
|
this.socket.send({
|
|
|
|
|
|
data: {
|
|
|
|
|
|
id: this.toUid
|
|
|
|
|
|
},
|
|
|
|
|
|
type: "to_chat"
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
document.addEventListener("scroll", this.scroll, false);
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
destroyed() {
|
|
|
|
|
|
document.removeEventListener("scroll", this.scroll);
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
uploadImg() {
|
|
|
|
|
|
let self = this
|
|
|
|
|
|
uni.chooseImage({
|
|
|
|
|
|
count: 1, //默认1
|
|
|
|
|
|
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
|
|
|
|
|
sourceType: ['album', 'camera'], //从相册选择
|
|
|
|
|
|
success: (res) => {
|
|
|
|
|
|
for (let i = 0; i < res.tempFiles.length; i++) {
|
|
|
|
|
|
if (Math.ceil(res.tempFiles[i].size / 1024) < this.upload_max * 1024) {
|
|
|
|
|
|
this.uploads.push(res.tempFiles[i].path)
|
|
|
|
|
|
this.uploadImages.push(res.tempFiles[i].path)
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.exceeded_list.push(i === 0 ? 1 : i + 1);
|
|
|
|
|
|
uni.showModal({
|
|
|
|
|
|
title: '提示',
|
|
|
|
|
|
content: `第${[...new Set(this.exceeded_list)].join(',')}张图片超出限制${this.upload_max}MB,已过滤`
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
uni.uploadFile({
|
|
|
|
|
|
url: self.url, //仅为示例，非真实的接口地址
|
|
|
|
|
|
filePath: self.uploadImages[0],
|
|
|
|
|
|
name: 'file',
|
|
|
|
|
|
header: {
|
|
|
|
|
|
"Authori-zation": "Bearer " + self.$store.state.app.token
|
|
|
|
|
|
},
|
|
|
|
|
|
//请求参数
|
|
|
|
|
|
success: (uploadFileRes) => {
|
|
|
|
|
|
let data = JSON.parse(uploadFileRes.data)
|
|
|
|
|
|
self.sendMsg(data.data.url, 3)
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
fail: (err) => {
|
|
|
|
|
|
uni.showModal({
|
|
|
|
|
|
content: JSON.stringify(err)
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
getOrderInfo() {
|
|
|
|
|
|
if (!this.orderId) return;
|
|
|
|
|
|
getOrderDetail(this.orderId).then(res => {
|
|
|
|
|
|
this.orderInfo = res.data;
|
|
|
|
|
|
if (this.orderInfo.add_time_h) {
|
|
|
|
|
|
this.orderInfo.add_time_h = this.orderInfo.add_time_h.substring(
|
|
|
|
|
|
0,
|
|
|
|
|
|
this.orderInfo.add_time_h.lastIndexOf(":")
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
if (this.orderInfo.cartInfo.length) {
|
|
|
|
|
|
this.cartInfo = this.orderInfo.cartInfo[0];
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
getproductInfo() {
|
|
|
|
|
|
let that = this;
|
|
|
|
|
|
if (!this.productId) return;
|
|
|
|
|
|
getProductDetail(this.productId).then(res => {
|
|
|
|
|
|
that.productInfo = res.data.storeInfo;
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
scroll() {
|
|
|
|
|
|
if (window.scrollY < 300 && !this.loaded && !this.loading)
|
|
|
|
|
|
this.getHistory();
|
|
|
|
|
|
},
|
|
|
|
|
|
imageuploaded(res) {
|
2020-11-05 08:21:06 +00:00
|
|
|
|
if (res.status !== 200) return this.$dialog.error(res || "上传图片失败");
|
2020-08-13 08:12:57 +00:00
|
|
|
|
this.sendMsg(res.data.url, 3);
|
|
|
|
|
|
},
|
|
|
|
|
|
getHistory() {
|
|
|
|
|
|
if (this.loading || this.loaded) return;
|
|
|
|
|
|
this.loading = true;
|
|
|
|
|
|
getChatRecord(this.toUid, {
|
|
|
|
|
|
page: this.page,
|
|
|
|
|
|
limit: this.limit
|
|
|
|
|
|
})
|
|
|
|
|
|
.then(({
|
|
|
|
|
|
data
|
|
|
|
|
|
}) => {
|
|
|
|
|
|
this.history = data.list.concat(this.history);
|
|
|
|
|
|
if (this.page === 1) {
|
|
|
|
|
|
this.$nextTick(function() {
|
|
|
|
|
|
window.scrollTo(0, document.documentElement.scrollHeight + 999);
|
|
|
|
|
|
this.height();
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
this.page++;
|
|
|
|
|
|
this.loading = false;
|
|
|
|
|
|
this.loaded = data.length < this.limit;
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(err => {
|
2020-11-05 08:21:06 +00:00
|
|
|
|
this.$dialog.error(err || "加载失败");
|
2020-08-13 08:12:57 +00:00
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
focus: function() {
|
|
|
|
|
|
this.active = false;
|
|
|
|
|
|
},
|
|
|
|
|
|
keyup: function() {
|
|
|
|
|
|
if (this.$refs.input.innerHTML.length > 0) {
|
|
|
|
|
|
this.sendColor = true;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.sendColor = false;
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
addEmoji(name) {
|
|
|
|
|
|
this.sendMsg(name, 2);
|
|
|
|
|
|
},
|
|
|
|
|
|
sendMsg(msn, type) {
|
|
|
|
|
|
this.height();
|
|
|
|
|
|
this.socket.send({
|
|
|
|
|
|
data: {
|
|
|
|
|
|
msn,
|
|
|
|
|
|
type,
|
|
|
|
|
|
to_uid: this.toUid
|
|
|
|
|
|
},
|
|
|
|
|
|
type: "chat"
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
sendTest() {
|
|
|
|
|
|
this.sendMsg(this.textCon, 1);
|
|
|
|
|
|
this.textCon = ''
|
|
|
|
|
|
this.height();
|
|
|
|
|
|
},
|
|
|
|
|
|
sendProduct() {
|
|
|
|
|
|
this.sendMsg(this.productId, 5);
|
|
|
|
|
|
this.productId = 0;
|
|
|
|
|
|
this.productInfo = {};
|
|
|
|
|
|
},
|
|
|
|
|
|
sendOrder() {
|
|
|
|
|
|
this.sendMsg(this.orderId, 6);
|
|
|
|
|
|
this.orderId = 0;
|
|
|
|
|
|
this.orderInfo = {};
|
|
|
|
|
|
},
|
|
|
|
|
|
bindInput: function(e) {
|
|
|
|
|
|
if(e.detail.value){
|
|
|
|
|
|
this.sendColor = true
|
|
|
|
|
|
}else{
|
|
|
|
|
|
this.sendColor = false
|
|
|
|
|
|
}
|
|
|
|
|
|
this.height();
|
|
|
|
|
|
},
|
|
|
|
|
|
start() {
|
|
|
|
|
|
var that = this;
|
|
|
|
|
|
this.longClick = 0;
|
|
|
|
|
|
this.timeOutEvent = setTimeout(function() {
|
|
|
|
|
|
that.longClick = 1;
|
|
|
|
|
|
}, 500);
|
|
|
|
|
|
that.speak = "松开 结束";
|
|
|
|
|
|
that.recording = true;
|
|
|
|
|
|
},
|
|
|
|
|
|
move() {
|
|
|
|
|
|
clearTimeout(this.timeOutEvent);
|
|
|
|
|
|
this.timeOutEvent = 0;
|
|
|
|
|
|
},
|
|
|
|
|
|
end() {
|
|
|
|
|
|
clearTimeout(this.timeOutEvent);
|
|
|
|
|
|
if (this.timeOutEvent !== 0 && this.longClick === 0) {
|
|
|
|
|
|
//点击
|
|
|
|
|
|
//此处为点击事件----在此处添加跳转详情页
|
|
|
|
|
|
}
|
|
|
|
|
|
this.speak = "按住 说话";
|
|
|
|
|
|
this.recording = false;
|
|
|
|
|
|
return false;
|
|
|
|
|
|
},
|
|
|
|
|
|
voiceBnt: function() {
|
|
|
|
|
|
this.active = false;
|
|
|
|
|
|
if (this.voice === true) {
|
|
|
|
|
|
this.voice = false;
|
|
|
|
|
|
this.$nextTick(function() {
|
|
|
|
|
|
this.$refs.input.focus();
|
|
|
|
|
|
});
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.voice = true;
|
|
|
|
|
|
}
|
|
|
|
|
|
window.scrollTo(0, document.documentElement.scrollHeight);
|
|
|
|
|
|
this.percent = 0;
|
|
|
|
|
|
this.footerConH = 0;
|
|
|
|
|
|
this.footerH = 0;
|
|
|
|
|
|
this.$nextTick(function() {
|
|
|
|
|
|
this.height();
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
emoticon: function() {
|
|
|
|
|
|
this.voice = false;
|
|
|
|
|
|
if (this.active === true) {
|
|
|
|
|
|
this.active = false;
|
|
|
|
|
|
this.isBQ = false
|
|
|
|
|
|
// this.$nextTick(function() {
|
|
|
|
|
|
// this.$refs.input.focus();
|
|
|
|
|
|
// });
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.active = true;
|
|
|
|
|
|
this.isBQ = true
|
|
|
|
|
|
// this.$nextTick(function() {
|
|
|
|
|
|
// this.$refs.input.blur();
|
|
|
|
|
|
// });
|
|
|
|
|
|
}
|
|
|
|
|
|
this.height();
|
|
|
|
|
|
},
|
|
|
|
|
|
height() {
|
|
|
|
|
|
let scrollTop = 0
|
|
|
|
|
|
let footerConH = this.$refs.footerCon.offsetHeight;
|
|
|
|
|
|
let footerH = this.$refs.footer.offsetHeight;
|
|
|
|
|
|
let scale = 750 / window.screen.availWidth;
|
|
|
|
|
|
this.footerConH = (footerConH * scale) / 100;
|
|
|
|
|
|
this.footerH = (footerH * scale) / 100;
|
|
|
|
|
|
this.percent = ((this.footerConH - this.footerH) / this.footerConH) * 100;
|
|
|
|
|
|
setTimeout(res=>{
|
|
|
|
|
|
let info = uni.createSelectorQuery().select(".chat");
|
|
|
|
|
|
info.boundingClientRect(function(data) { //data - 各种参数
|
2021-01-19 02:16:45 +00:00
|
|
|
|
// 获取元素宽度
|
2020-08-13 08:12:57 +00:00
|
|
|
|
scrollTop = data.height
|
|
|
|
|
|
}).exec()
|
|
|
|
|
|
if(this.active){
|
|
|
|
|
|
this.scrollTop = scrollTop+500
|
|
|
|
|
|
}else{
|
|
|
|
|
|
this.scrollTop = scrollTop+100
|
|
|
|
|
|
}
|
|
|
|
|
|
},600)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
|
page {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* #ifdef H5 */
|
|
|
|
|
|
@import url("@/plugin/emoji-awesome/css/google.min.css");
|
|
|
|
|
|
|
|
|
|
|
|
/* #endif */
|
|
|
|
|
|
.broadcast_num {
|
|
|
|
|
|
padding: 0 10rpx !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.noPad {
|
|
|
|
|
|
padding: 0 !important;
|
|
|
|
|
|
margin-bottom: 0 !important;
|
|
|
|
|
|
height: auto !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details_num {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 80rpx;
|
|
|
|
|
|
line-height: 80rpx;
|
|
|
|
|
|
color: #000000;
|
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
|
|
|
|
|
|
padding: 0 24rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details_order {
|
|
|
|
|
|
padding: 15rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details_box {
|
|
|
|
|
|
padding: 24rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
|
margin-bottom: 24rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast_details_model {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 43rpx;
|
|
|
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
|
|
|
border-radius: 0px 0px 8px 8px;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
z-index: 2;
|
|
|
|
|
|
bottom: 0;
|
|
|
|
|
|
font-size: 22rpx;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
line-height: 43rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast_details_img {
|
|
|
|
|
|
width: 140rpx;
|
|
|
|
|
|
height: 140rpx;
|
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast_details_img img {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast_details_img_no {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: auto;
|
|
|
|
|
|
border-radius: 8px 8px 0px 0px;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
margin-bottom: 10rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast_details_picBox_no {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast_details_img_no img {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast_details_tit {
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
height: 85rpx;
|
|
|
|
|
|
font-weight: 800;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
|
display: -webkit-box;
|
|
|
|
|
|
-webkit-line-clamp: 2;
|
|
|
|
|
|
-webkit-box-orient: vertical;
|
|
|
|
|
|
text-align: left !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast_details_tit_no {
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
font-weight: 800;
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
margin-top: 5rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast_details_picBox {
|
|
|
|
|
|
width: 75%;
|
|
|
|
|
|
margin-left: 24rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast_details_pic {
|
|
|
|
|
|
font-size: 36rpx;
|
2021-06-11 09:41:16 +00:00
|
|
|
|
color: $theme-color;
|
2020-08-13 08:12:57 +00:00
|
|
|
|
text-align: left;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast_details_pic_num {
|
|
|
|
|
|
text-decoration: line-through;
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
color: rgba(0, 0, 0, 0.5);
|
|
|
|
|
|
margin-left: 0.1rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast_details_btn {
|
|
|
|
|
|
width: 160rpx;
|
|
|
|
|
|
height: 50rpx;
|
|
|
|
|
|
background: #e83323;
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
border-radius: 125rpx;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
line-height: 50rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details .chat {
|
|
|
|
|
|
padding: 1rpx 23rpx 0 3rpx;
|
|
|
|
|
|
margin-bottom: 3rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details .chat .item {
|
|
|
|
|
|
margin-top: 37rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details .chat .item .pictrue {
|
|
|
|
|
|
width: 80rpx;
|
|
|
|
|
|
height: 80rpx;
|
|
|
|
|
|
margin-top: 10rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details .chat .item .pictrue img {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details .chat .item .text {
|
|
|
|
|
|
margin-left: 20rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details .chat .item .text.textR {
|
|
|
|
|
|
text-align: right;
|
|
|
|
|
|
margin: 0 20rpx 0 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details .chat .item .text .name {
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
color: #999;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details .chat .item .text .name .return {
|
|
|
|
|
|
color: #509efb;
|
|
|
|
|
|
margin-left: 17rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details .chat .item .text.textR .name .return {
|
|
|
|
|
|
margin: 0 0.17rem 0 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details .chat .item .text .conter {
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
border-radius: 8rpx;
|
|
|
|
|
|
padding: 16rpx 20rpx;
|
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
max-width: 496rpx;
|
|
|
|
|
|
margin-top: 2rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details .chat .item .text .spot {
|
|
|
|
|
|
width: 15rpx;
|
|
|
|
|
|
height: 15rpx;
|
|
|
|
|
|
background-color: #c00000;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
margin-left: 20rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details .chat .item .text .conter:before {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
content: "";
|
|
|
|
|
|
width: 0;
|
|
|
|
|
|
height: 0;
|
|
|
|
|
|
border-bottom: 9rpx solid transparent;
|
|
|
|
|
|
border-right: 14rpx solid #fff;
|
|
|
|
|
|
border-top: 9rpx solid transparent;
|
|
|
|
|
|
left: -14rpx;
|
|
|
|
|
|
top: 25rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details .chat .item .text.textR .conter:before {
|
|
|
|
|
|
left: unset;
|
|
|
|
|
|
right: -14rpx;
|
|
|
|
|
|
transform: rotateY(180deg);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details .chat .item .text .conter img {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details .chat .item .text .conter .signal {
|
|
|
|
|
|
width: 48rpx;
|
|
|
|
|
|
height: 48rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details .chat .item .text .conter .signal.signalR {
|
|
|
|
|
|
transform: rotate(180deg);
|
|
|
|
|
|
-ms-transform: rotate(180deg);
|
|
|
|
|
|
-webkit-transform: rotate(180deg);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details .footerCon {
|
|
|
|
|
|
|
|
|
|
|
|
height: 100rpx;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
transition: all 0.005s cubic-bezier(0.25, 0.5, 0.5, 0.9);
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details .footerCon.on {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
top: -300rpx;
|
|
|
|
|
|
transform: translate3d(0, 0, 0) !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details .footerCon .banner .swiper-slide {
|
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
-webkit-flex-wrap: wrap;
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
padding-bottom: 50rpx;
|
|
|
|
|
|
border-top: 1px solid #f5f5f5;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details .footerCon .banner .swiper-slide .emoji-outer,
|
|
|
|
|
|
.swiper-slide .em {
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
width: 50rpx;
|
|
|
|
|
|
height: 50rpx;
|
|
|
|
|
|
margin: 40rpx 0 0 50rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details .footerCon .banner .swiper-container-horizontal>.swiper-pagination-bullets {
|
|
|
|
|
|
bottom: 10rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details .footerCon .slider-banner .swiper-pagination-bullet-active {
|
|
|
|
|
|
background-color: #999;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details .recording {
|
|
|
|
|
|
width: 300rpx;
|
|
|
|
|
|
height: 300rpx;
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
top: 40%;
|
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
margin-left: -150rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details .recording img {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details .footer {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
padding: 17rpx 26rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details .footer img {
|
|
|
|
|
|
width: 61rpx;
|
|
|
|
|
|
height: 60rpx;
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details .footer .input,
|
|
|
|
|
|
.broadcast-details .footer .voice {
|
|
|
|
|
|
width: 440rpx;
|
|
|
|
|
|
border-radius: 10rpx;
|
|
|
|
|
|
background-color: #e5e5e5;
|
|
|
|
|
|
/* padding: 17rpx 30rpx; */
|
|
|
|
|
|
height: 60rpx;
|
|
|
|
|
|
padding-left: 20rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.input {}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details .footer .input {
|
|
|
|
|
|
max-height: 150rpx;
|
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details .footer .send {
|
|
|
|
|
|
width: 70rpx;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
height: 60rpx;
|
|
|
|
|
|
line-height: 60rpx;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.em {
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
width: 50rpx;
|
|
|
|
|
|
height: 50rpx;
|
|
|
|
|
|
margin: 40rpx 0 0 50rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.emoji-outer {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
right: 50rpx;
|
|
|
|
|
|
bottom: 30rpx;
|
|
|
|
|
|
width: 50rpx;
|
|
|
|
|
|
height: 50rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.broadcast-details {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
.hd-wrapper {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
&.on{
|
|
|
|
|
|
padding-bottom: 300rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
