goufangtong3/pages/index/fuli-info.vue

<template>
	<view class="fuli-info">
		<u-parse :html="content"></u-parse>
		<view class="" style="height: 170rpx;"></view>
		<view class="houses-btn u-flex u-row-between">
			<text @click="opentel">隐私电话</text>
			<text @click="tochat">在线咨询</text>
		</view>
		<u-popup v-model="showtocall" mode="center" background="rgba(0,0,0,0)">
			<view class="tocall-box u-flex-col u-col-center">
				<image class="tocall-img" src="../../static/images/popup1-1.png" mode=""></image>
				<view class="u-flex-col u-col-center tocall-text">您是否进行呼叫？</view>
				<view class="u-flex u-row-between tocall-btn">
					<text @click="showtocall = false">取消</text>
					<text @click="totel">确定</text>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showlogin" mode="center" background="rgba(0,0,0,0)">
			<view class="tocall-box u-flex-col u-col-center">
				<image class="tocall-img" src="../../static/images/popup1-1.png" mode=""></image>
				<view class="u-flex-col u-col-center tocall-text">你目前处于未登录状态请前往登录</view>
				<view class="u-flex u-row-between tocall-btn">
					<text @click="showlogin = false">取消</text>
					<text @click="tologin">确定</text>
				</view>
			</view>
		</u-popup>
		<gf-chat ref="chatlist" @over="getuser"></gf-chat>
		<gf-tel ref="tellist" @over="getuser"></gf-tel>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				content: '',
				worker_id: 0,
				worker_phone: '',
				worker_hx_username: '',
				showtocall: false,
				showlogin: false,
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getdata()
		},
		onShow() {
			if (uni.getStorageSync("token")) {
				this.getuser()
			}
		},
		methods: {
			tologin() {
				this.showlogin = false
				uni.navigateTo({
					url: "/pages/mine/login"
				})
			},
			opentel() {
				if (uni.getStorageSync("token")) {
					this.showtocall = true
				} else {
					this.showlogin = true
				}

			},
			getuser() {
				this.$u.post('/api/Member/member_info').then(res => {
					this.worker_id = res.data.worker_id
					this.worker_phone = res.data.worker_phone
					this.worker_hx_username = res.data.worker_hx_username
				})
			},
			totel() {
				if (uni.getStorageSync("token")) {
					this.showtocall = false
					if (this.worker_id == 0) {
						this.$refs.tellist.open(this.id, 2)
					} else {
						this.$u.post('/api/Member/consult_record', {
							type: 1
						})
						uni.makePhoneCall({
							phoneNumber: this.worker_phone
						})
					}
				} else {
					this.showlogin = true
				}
			},
			tochat() {
				if (uni.getStorageSync("token")) {
					if (this.worker_id == 0) {
						this.$refs.chatlist.open(this.id, 2)
					} else {
						this.$u.post('/api/Member/consult_record', {
							type: 2
						})
						uni.navigateTo({
							url: "./chat?hx_username=" + this.worker_hx_username + "&worker_id=" + this.worker_id
						})
					}
				} else {
					this.showlogin = true
				}
			},
			getdata() {
				this.$u.post("/api/welfare/welfare_detail", {
					id: this.id
				}).then(res => {
					const regex = new RegExp('<img', 'gi')
					this.content = res.data.content.replace(regex, `<img style="max-width: 100%; height: auto"`)
				})
			}
		}
	}
</script>

<style lang="scss">
	.fuli-info {
		padding: 24rpx;

		.tocall-box {
			position: relative;

			.tocall-img {
				width: 650rpx;
				height: 476rpx;
			}

			.tocall-btn {
				position: absolute;
				bottom: 70rpx;
				left: 0;
				width: 100%;
				padding: 0 48rpx;

				text:first-child {
					width: 254rpx;
					line-height: 80rpx;
					background: #FFA120;
					border-radius: 20rpx;
					text-align: center;
					font-size: 34rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}

				text:last-child {
					width: 254rpx;
					line-height: 80rpx;
					background: #1F7EFF;
					border-radius: 20rpx;
					text-align: center;
					font-size: 34rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}

			.tocall-text {
				text-align: center;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				position: absolute;
				top: 244rpx;
				left: 0;
				z-index: 10;
				width: 100%;
			}
		}

		.houses-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			height: 166rpx;
			background: #FFFFFF;
			padding: 0 24rpx 54rpx 24rpx;
			z-index: 1;

			text:first-child {
				width: 338rpx;
				line-height: 84rpx;
				background: #FFA120;
				border-radius: 20rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}

			text:last-child {
				width: 338rpx;
				line-height: 84rpx;
				background: #1F7EFF;
				border-radius: 20rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>