smartswrtch-app/page_user/Feedback.vue

<template>
	<view class="pages">
		<u-navbar title="咨询客服" :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff"
			title-size='36' height='50'></u-navbar>
        <image class="topimg" src="https://api.ccttiot.com/smartmeter/img/static/u9XgHi1QDOJ9G0vPA1g2" mode="aspectFit"></image> 


		<!-- 咨询客服 -->
		<view class="list">
			<view v-for="(item, index) in list" :key="index" class="kflist">
				<view class="name">
					{{item.name == null ? '--' : item.name}}
				</view>
				<view class="shangb">
					上班时间：{{item.workTimeStart == null ? '--' : item.workTimeStart}}~{{item.workTimeEnd == null ? '--' : item.workTimeEnd}}
				</view>
				<view class="shangb">
					非上班时间无人接听 请勿拨打
				</view>
				<view class="bd">
					<view class="lt" @click="previewImage">
						<image :src="item.wx" lazy-load :show-menu-by-longpress="true" @longpress="handleLongPress" mode=""></image>
					</view>
					<view class="rt">
						<view class="">
							长按识别二维码
						</view>
						<view class="">
							添加客服微信
						</view>
					</view>
				</view>
				<view class="bds">
					<view class="lt">
						手机号：{{item.mobile == null ? '--' : item.mobile}}
					</view>
					<view class="rt">
						<view class="" @click="btntel(item.mobile)">
							立即拨打
						</view>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnmsk: false,
				bgc: {
					backgroundColor: "#8883f0",
				},
				textValue: '',
				currentCount: 0,
				cutidx: -1,
				imglist: [],
				token: '',
				contact: '',
				stause: false,
				list:[]
			}
		},
		computed: {

		},
		onLoad() {
			this.getstause()
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '创想物联',
				path: '/pages/shouye/index'
			}
		},

		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '创想物联',
				query: '',
				path: '/pages/shouye/index'
			}
		},
		methods: {
			// 长按识别二维码
			handleLongPress(){
			    setTimeout(() => {
			        // 取消二维码所在弹窗的显示
			        // popupKfShow.value = false   
			    },500)
			},
			
			// 点击拨打咨询电话
			btntel(mobile) {
				uni.makePhoneCall({
					phoneNumber: mobile,
					success: function(res) {
						console.log('拨打电话成功', res)
					},
					fail: function(err) {
						
					}
				})
			},
			
			
			
			btnfzsj(text) {
				uni.setClipboardData({
					data:text, 
					success: () => {
						uni.showToast({
							title: '复制成功',
							duration: 2000,
							icon: 'success'
						});
					}
				})
			},
			btnfzwx(text) {
                uni.setClipboardData({
                	data:text, 
                	success: () => {
                		uni.showToast({
                			title: '复制成功',
                			duration: 2000,
                			icon: 'success'
                		});
                	}
                })
			},
            // 请求客服列表
			getstause() {
				this.$u.get(`/app/customerService/list?pageSize=999&pageNum=1&orderByColumn=sort&isAsc=desc`).then((res) => {
					if (res.code == 200) {
                        this.list = res.rows
					}
				})
			},
			hidePlaceholder() {
				this.placeholderVisible = false
			},
			showPlaceholder() {
				if (!this.textValue) {
					this.placeholderVisible = true
				}
			},
			updateWordCount() {
				this.currentCount = this.textValue.trim().replace(/\s+/g, '').length
			},
		}
	}
</script>

<style lang="scss">
	/deep/ .u-title {
		padding-bottom: 22rpx;
	}

	/deep/ .u-icon__icon {
		padding-bottom: 22rpx;
	}
    .topimg{
		margin-top: 10rpx;
		width: 100%;
		height: 198rpx;
	}
	.list{
		width: 100%;
		height: 71vh;
		overflow: scroll;
	}
	.kflist {
		margin-top: 32rpx;
        background-color: #fff;
		padding: 22rpx;
		border-radius: 30rpx;
		width: 686rpx;
		max-height: 622rpx;
		margin: auto;
		background: #F2F1FF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 40rpx 50rpx;
		box-sizing: border-box;
		margin-bottom: 24rpx;
		.name{
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
		}
		.shangb{
			font-size: 32rpx;
			color: #3D3D3D;
			margin-top: 10rpx;
		}
		.bd{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 28rpx;
			.lt{
				width: 272rpx;
				height: 272rpx;
				background-color: #fff;
				padding: 20rpx;
				box-sizing: border-box;
				border-radius: 10rpx;
			}
			.rt{
				text-align: center;
				view{
					font-size: 32rpx;
					color: #3D3D3D;
					margin-top: 16rpx;
				}
			}
		}
		.bds{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 34rpx;
			.lt{
				font-size: 32rpx;
				color: #3D3D3D;
			}
			.rt{
				view{
					width: 166rpx;
					height: 54rpx;
					background: #8883F0;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					text-align: center;
					line-height: 54rpx;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.btn {
		width: 590rpx;
		height: 84rpx;
		background: #8883F0;
		filter: blur(0px);
		color: #fff;
		font-size: 36rpx;
		line-height: 84rpx;
		text-align: center;
		border-radius: 50rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 96rpx;
	}

	page {
		background-color: #F7FAFE !important;
	}

	.pages {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.leix {
		margin-top: 34rpx;

		.title {
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			line-height: 50rpx;
		}

		.lxxz {
			display: flex;

			view {
				border-radius: 15rpx;
				border: 2rpx solid #C4C4C4;
				padding: 14rpx 34rpx 14rpx 34rpx;
				box-sizing: border-box;
				margin-right: 28rpx;
				margin-top: 40rpx;
				position: relative;
				overflow: hidden;

				text {
					position: absolute;
					bottom: 0;
					right: 0;
					display: inline-block;
					width: 31rpx;
					height: 19rpx;
					background: #8883F0;
					color: #fff;
					border-radius: 5rpx;
					font-size: 18rpx;
					text-align: center;
					line-height: 19rpx;
				}
			}
		}
	}

	.active {
		border: 2rpx solid #8883F0 !important;

		image {
			display: block !important;
		}
	}

	.problem {
		margin-top: 40rpx;

		.title {
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			line-height: 50rpx;
		}
	}

	.lxfs {
		margin-top: 40rpx;

		.title {
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			line-height: 50rpx;
		}

		input {
			margin-top: 32rpx;
			width: 612rpx;
			height: 80rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
			border-radius: 20rpx;
			padding-left: 20rpx;
		}
	}

	.scpic {
		margin-top: 40rpx;

		.title {
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			line-height: 50rpx;
		}

		text {
			display: block;
			margin-top: 40rpx;
			font-size: 28rpx;
			color: #95989D;
			line-height: 38rpx;
		}

		.icon {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin-top: 40rpx;

			.imgbox {
				width: 33%;

				image {
					width: 142rpx;
					height: 142rpx;
				}
			}

		}
	}


	.input-container {
		position: relative;
		width: 612rpx;
		height: 248rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
		border-radius: 20rpx;
		margin-top: 40rpx;
		overflow: hidden;
		padding-right: 38rpx;
		box-sizing: border-box;
	}

	.placeholder {
		position: absolute;
		top: 18rpx;
		left: 38rpx;
		color: #999;
		/* placeholder颜色 */
		pointer-events: none;
		/* 确保点击事件可以穿透到textarea上 */
	}

	.custom-textarea {
		width: 100%;
		height: 100%;
		/* 设置一个合适高度 */
		padding-top: 18rpx;
		/* 为placeholder留出空间 */
		padding-left: 38rpx;
		box-sizing: border-box;
		border: 1px solid #ccc;
		padding-bottom: 50rpx;
	}

	.word-count {
		position: absolute;
		right: 10px;
		bottom: 10px;
		font-size: 12px;
		color: #999;
	}
</style>