1.0yangche/pages/packageOne/user/feedback/feedback.vue

<template>
	<view class="wrap">
		<view class="header">
		    <view :class="['header_item',active === index?'active':'']" @tap="changeActive(item,index)" v-for="item,index in header" :key="index">
				<view class="header_title">{{item.title}}</view>
				<!-- 下划线 -->
				<view class="line"></view>
				<!-- 回复数量 -->
				<view class="message_num" v-if="item.news === 1">{{replyNumber}}</view>
		    </view>
		</view>
		<view class="my_message" v-if="active == 0">
			<!-- 输入框 -->
			<view class="inp">
				<input class="inp_title"v-model="from.title" placeholder="输入您的留言标题" placeholder-class="inp_title_place"></input>
				<textarea class="inp_text" v-model="from.content" placeholder="输入您的留言信息" placeholder-class="inp_title_place"></textarea>
				<!-- 按钮 -->
				<view class="inp_btn clear">
					<view class="btn_submit" @tap="submit">提交</view>
					<view class="btn_reset" @tap="reset">重置</view>
				</view>
			</view>
			<!-- 留言列表 -->
			<view class="message_list">
			    <view class="message_list_item" v-for="item,index in allData.reedback" :key="index">
					<view class="message_list_item_wrap">
						<view class="content" :style="item.txtStyle" @touchstart="touchS" @touchmove="touchM" @touchend="touchE" :data-index="index">
							<view class="message_list_item_header clear">
								<view class="item_header_lf">{{item.title}}</view>
								<view class="item_header_rg">{{item.date}}</view>
							</view>
							<view class="item_content">{{item.content}}</view>
						</view>
						<!-- 删除按钮 -->
						<view class="delete">删除</view>
					</view>
			    </view>
			</view>
		</view>
		<view class="feedback" v-else>
			<view class="message_list">
			    <view class="message_list_item" v-for="item,index in message" :key="index">
					<view class="message_list_item_header clear">
						<view class="item_header_lf">{{item.tips}}
							<view class="logo"><view class="logo_white"></view> </view>
						</view>
						<view class="item_header_rg">{{item.date}}</view>
					</view>
					<view class="item_content">{{item.reply}}</view>
			    </view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "../../../../api.js";
	import schema from 'async-validator';
	let app = getApp();
	export default {
		data() {
			return {
				header:[
				    { id: 1, news:0,title:'我的留言'},
				    { id: 2, news:1,title:'留言回复'}
				],
				active:0, //导航栏点击
				replyNumber:'',//留言回复个数
				from:{
					title:'',//留言标题
					content:'',//留言内容
				},
				allData:null,//页面数据
				descriptor:{
					title:{
						type: "string",
						required: true,
						message:'请输入留言标题'
					},
					content: {
					  type: "string",
					  required: true,
					  message:'请输入留言内容'
					},
				},
				delBtnWidth: 87, //删除按钮的宽度单位
				startX: '' ,//收支触摸开始滑动的位置
				message:[],//回复内容
			}
		},
		onLoad() {
			this.getData();
			this.getReply();
		},
		methods: {
			//加载数据
			getData(){
				let data = {
					token:app.globalData.token
				}
				api.getUserFeedBack(data).then((res)=>{
					console.log(res);
					this.allData = res.data.data;
				})
			},
			//导航栏点击切换
			changeActive(item,index){
				this.active = index;
			},
			//重置按钮
			reset(){
				this.from.title = '';
				this.from.content = '';
			},
			//提交按钮
			submit(){
				let data = {
					token:app.globalData.token,
					...this.from
				}
				let validator = new schema(this.descriptor);
				validator.validate(data).then(() => {
					api.submitUserFeenBack(data).then((res)=>{
						console.log(res);
						if(res.is){
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:2000,
							})
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:2000,
							})
						}
					})
				}).catch(({ errors, fields }) => {
					uni.showToast({
						icon: 'none',
						duration:2000,
						title:errors[0].message
					})
				})
			},
			//手指触摸开始
			touchS:function(e){
			    if (e.touches.length == 1) {
					this.startX = e.touches[0].clientX;
			    }
			},
			//手指触摸移动
			touchM:function(e){
			    if (e.touches.length == 1) {
			        let moveX = e.touches[0].clientX;
			        let disX = this.startX - moveX; //计算移动的距离
			        let delBtnWidth = this.delBtnWidth; //删除按钮的宽度
			        let txtStyle = '';
			        if (disX === 0 || disX < 0) {//如果移动距离小于等于0，说明向右滑动，文本层位置不变
						txtStyle = 'left:0';
			        } else if (disX > 0) { //移动距离大于0，文本层left值等于手指移动距离
						txtStyle = 'left-:' + disX + "px";
						if (disX > delBtnWidth){ //删除按钮完全展示出来
							txtStyle = "left-" + delBtnWidth + "px"
						}
			        }
			        //获取手指触摸的是哪一项
			        let index = e.currentTarget.dataset.index;
					//更新列表的状态;
					this.$set(this.allData.reedback[index],'txtStyle',txtStyle);
			    }
			},
			//手指触摸结束
			touchE:function(e){
			    if (e.changedTouches.length == 1) {
			        //手指移动结束后水平位置
			        let endX = e.changedTouches[0].clientX;
			        //触摸开始与结束，手指移动的距离
			        let disX = this.startX - endX;
			        let delBtnWidth = this.delBtnWidth;
			        //如果距离小于删除按钮的1/2，不显示删除按钮
			        let txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px";
			        //获取手指触摸的是哪一项
			        let index = e.currentTarget.dataset.index;
					//更新列表的状态
					this.$set(this.allData.reedback[index],'txtStyle',txtStyle);
			    }
			},
			//加载留言反馈内容
			getReply(){
				let data = {
					token:app.globalData.token,
					status:2
				}
				api.getUserFeedReply(data).then((res)=>{
					this.message = res.data.data;
					this.replyNumber = res.data.data.length;
					console.log(this.message)
				})
			}
		}
	}
</script>

<style>
	page{
	  width:100%;
	  height:100%;
	  background-color: #f9f9f9;
	}
	.header{
	  height:86rpx;
	  line-height: 86rpx;
	  border-top:1px solid #f2f2f2;
	  box-sizing: border-box;
	  display: flex;
	  background-color: #ffffff;
	}
	.header_item{
	  flex:1;
	  text-align: center;
	  position: relative;
	}
	.header_title{
	  font-size: 30rpx;
	  color:#222222;
	}
	.line{
	  width:38rpx;
	  height:4rpx;
	  background:linear-gradient(270deg,rgba(254,107,21,1) 0%,rgba(254,163,48,1) 100%);
	  position: absolute;
	  bottom:0rpx;
	  left:50%;
	  transform: translateX(-50%);
	  display: none;
	}
	.active .header_title{
	  font-size:34rpx;
	  font-weight:600;
	  background:linear-gradient(270deg, rgba(254,107,21,1) 0%, rgba(254,163,48,1) 100%);
	  -webkit-background-clip:text;
	  -webkit-text-fill-color:transparent;
	}
	.active .line{
	  display: block;
	}
	.message_num{
	  width:28rpx;
	  height:28rpx;
	  background:rgba(225,21,33,1);
	  text-align: center;
	  line-height: 28rpx;
	  font-size: 18rpx;
	  color:#ffffff;
	  border-radius: 50%;
	  position: absolute;
	  right:106rpx;
	  top:10rpx;
	}
	.clear:after{
	  content: "";
	  display: block;
	  clear: both;
	}
	.inp{
	  margin-top:20rpx;
	  padding:0 30rpx;
	  box-sizing: border-box;
	  overflow: hidden;
	  background-color: #ffffff;
	}
	.inp_title{
	  width:100%;
	  height:88rpx;
	  background:rgba(249,249,249,1);
	  border-radius:6rpx;
	  border:1px solid rgba(202,202,202,1);
	  margin-top:30rpx;
	  padding-left: 20rpx;
	  box-sizing: border-box;
	}
	.inp_title_place{
	  font-size: 26rpx;
	  color:#999999;
	}
	.inp_text{
	  width:100%;
	  height:200rpx;
	  background:rgba(249,249,249,1);
	  border-radius:6rpx;
	  border:1px solid rgba(202,202,202,1);
	  padding:14rpx 0 0 20rpx;
	  box-sizing: border-box;
	  margin-top:20rpx;
	  position: relative;
	}
	.inp_text_num{
	  font-size: 24rpx;
	  color:#999999;
	  position: absolute;
	  right:12rpx;
	  bottom:10rpx;
	}
	.inp_btn{
	  margin-top:30rpx;
	  margin-bottom: 40rpx;
	}
	.btn_submit{
	  width:96rpx;
	  height:44rpx;
	  background:linear-gradient(270deg,rgba(254,107,21,1) 0%,rgba(254,163,48,1) 100%);
	  border-radius:2rpx;
	  text-align: center;
	  line-height: 44rpx;
	  font-size: 22rpx;
	  color:#ffffff;
	  float:right;
	}
	.btn_reset{
	  width:96rpx;
	  height:44rpx;
	  border-radius:2rpx;
	  border:1px solid rgba(231,120,23,1);
	  text-align: center;
	  line-height: 44rpx;
	  box-sizing: border-box;
	  font-size: 22rpx;
	  color:#E77817;
	  float:right;
	  margin-right: 20rpx;
	}
	.message_list{
	  width:100%;
	  margin-top:20rpx;
	}
	.message_list_item{
	  width:100%;
	  height:130rpx;
	  padding:0 30rpx;
	  box-sizing: border-box;
	  background-color: #ffffff;
	  margin-bottom: 20rpx;
	  overflow: hidden;
	}
	.message_list_item_wrap{
	  width:100%;
	  height:100%;
	  position: relative;
	}
	.content{
	  width:100%;
	  height:130rpx;
	  background-color: #ffffff;
	  overflow: hidden;
	  position: absolute;
	  top:0;
	  left:0;
	  z-index:10;
	  transition: left 0.2s ease-in-out;
	}
	.delete{
	  width:174rpx;
	  height:134rpx;
	  background:rgba(225,21,33,1);
	  text-align: center;
	  line-height: 134rpx;
	  font-size: 30rpx;
	  color:#ffffff;
	  position: absolute;
	  top:0;
	  right:0;
	  z-index:5;
	}
	.message_list_item_header{
	  margin-top:24rpx;
	}
	.item_header_lf{
	  font-size: 30rpx;
	  color:#222222;
	  font-weight: bold;
	  float:left;
	}
	.item_header_rg{
	  font-size: 22rpx;
	  color:#cccccc;
	  float:right;
	  margin-top:6rpx;
	}
	.item_content{
	  font-size: 24rpx;
	  color:#999999;
	  margin-top:10rpx;
	  margin-bottom:24rpx;
	}
</style>