jiaoyi-uni2/奥莱优品/components/kfService/kfService.vue

<template>
	<view>
		<uni-popup ref="servicePop" type="bottom" border-radius="10px 10px 0 0" background-color="#ffffff" :mask-click="false">
			<view class="service-popup">
				<view class="login-title">
					<view class="login-logo">
						<view class="logo"><image src="/static/logo.jpg" mode="widthFix"></image></view>
						<view class="name">奥莱优品</view>
					</view>
					<view class="login-close" @click="showService(2)"><text class="cuIcon-close"></text></view>
				</view>
				<view class="login-desc">售前、售后问题，随时为您解答</view>
				<view class="top">
					<view class="item">客服时间：{{storeData.start_at}}-{{storeData.end_at}}</view>
					<view class="item">
						<button class="btn" @click="$dialog.jumpUri('/pages/service/chat/chat?poi='+storeData.poi_id+'&source=home',1);showService(2)">在线咨询商家</button>
					</view>
					<view class="item" v-if="storeData.service_mobile" @click="callMobile(storeData.service_mobile)">商家客服电话</view>
				</view>
				<view class="foot" @click="showService(2)">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	name:"kfService",
	data() {
		return {
			storeData:null
		};
	},
	methods: {
		showService(type){
			if (type == 1) {
				this.$refs.servicePop.open()
			} else {
				uni.showTabBar();
				this.$refs.servicePop.close()
			}
		},
		open(data) {
			uni.hideTabBar();
			this.storeData = data;
			this.$nextTick(()=>{
				this.$refs.servicePop.open()
			})
		}
	}
}
</script>

<style>
.service-popup .item{height: 100upx;line-height: 100upx;text-align: center;font-size: 28upx;color: #333;border-bottom: 2upx solid #f8f8f8;}
.service-popup .item:last-child{border-bottom: 0;}
.service-popup .item .btn{background-color: #fff;border: 0;height: 100upx;line-height: 100upx;text-align: center;font-size: 28upx;color: #333;}
.service-popup .item .btn::after{border: 0;}
.service-popup .foot{height: 100upx;line-height: 100upx;text-align: center;font-size: 28upx;color: #333;border-top: 20upx solid #f8f8f8;}
.login-title{display: flex;align-items: center;justify-content: space-between;padding: 20rpx;}
.service-popup .login-title .login-logo{display: flex;align-items: center;gap: 15rpx;}
.service-popup .login-title .login-logo image{width: 50rpx;height: 50rpx;border-radius: 100%;}
.service-popup .login-title .name{font-weight: bold;font-family: "bluevBold";color: #000;font-size: 28rpx;}
.login-desc{line-height: 2;color: #666;font-size: 24rpx;margin: 20rpx 0;text-align: center;}
</style>