cte-share/pages/dache/Xiaoxijiaohu.vue

<template>
	<view>
		<customNav :shownav="true" :title="viewTitle" titledetl=""></customNav>
		<view class="contentColumn" style="width: 90%;margin-left: 5%;margin-top: 30rpx;">
			<view v-for="(item,index) in xiaoxiList">
				<view v-if="item.type!=1" class="contentColumn">
					<view class="contentInRowL">
						<text style="font-size: 32rpx;">{{item.rcuser}}</text>
						<text style="font-size: 28rpx;color: darkgray;">{{item.time}}</text>
					</view>
					<view class="contentInRowL">
						<text class="msgctst">{{item.msg}}</text>
					</view>
					
				</view>
				<view v-if="item.type==1" class="contentColumn">
					<view class="contentInRowR">
						<text style="font-size: 28rpx;color: darkgray;">{{item.time}}</text>
					</view>
					<view class="contentInRowR">
						<text class="mymsgctst">{{item.msg}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bottomfloatV">
			<view class="contentInRowC" style="height: 180rpx;align-items: flex-start">
				<input class="inputVst" type="text" :value="msg" :placeholder="$t('dache.shuruxiaoxi')"  @input="msgInput">
				<uni-icons class="updatamsg" custom-prefix="custom-icon" color="#1A1A1A" type="plusempty" size="36" @click="onupdatamsg"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
import api from "@/pages/api/api.js"
	export default {
		data() {
			return {
				viewTitle:'',
				msg:'',
				id:'',
				obj:'',
				xiaoxiList:[]
			}
		},
		onLoad(option) {
			var id=option.id;
			this.getObjDetail(id);
			this.viewTitle='';
			uni.onPushMessage((res) => {
				console.log('onPushMessage',res);
				if(null==res.data.payload||undefined==res.data.payload||''==res.data.payload){
					return;
				}
				this.getxiaoxiList();
			});
		},
		onShow() {
			this.getxiaoxiList();
		},
		methods: {
			getxiaoxiList(){
				var List = uni.getStorageSync('dachexiaoxi');
				if(''==List||null==List||undefined==List){
					return;
				}
				else{
					var tempList=[];
					for(var i=0;i<List.length;i++){
						var tempStr = List[i];
						tempList.push(JSON.parse(tempStr));
					}
					this.xiaoxiList = tempList;
				}
			},
			msgInput(event){
				this.msg = event.target.value;
			},
			getObjDetail(id){
				api('getTxorder',{
					id:id,
				},res=>{
					console.log(res)
					if(res.data.code==200){
						this.obj=res.data.data;
						this.viewTitle=this.obj.driver.nickName;
					}
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			onupdatamsg(){
				if(this.msg.length>0&&this.obj!=''){
					this.pushMsg(this.obj.driver.cid,this.msg)
				}
			},
			pushMsg(cid,msg){//消息推送
				var time=new Date();
				var n,y,r,h,m,s;
				n=time.getFullYear();
				y=time.getMonth()+1;
				r=time.getDate();
				h=time.getHours();
				m=time.getMinutes();
				s=time.getSeconds();
				
				var timsStr = n+'-'+y+'-'+r+' '+h+':'+m+':'+s;
				var payloadData={
					rcuser:'尾号：'+this.obj.user.phone.slice(-4),
					time:timsStr,
					msg:msg,
					type:1
				}
				api('pushMsgQS',{
					cid:cid,
					title:'New Message',
					content:msg,
					payload:payloadData
				},res=>{
					console.log(res)
					this.msg='';
					
					var xiaoxiList = uni.getStorageSync('dachexiaoxi');
					if(''==xiaoxiList||null==xiaoxiList||undefined==xiaoxiList){
						xiaoxiList=[];
					}
					xiaoxiList.push(JSON.stringify(payloadData));
					uni.setStorageSync('dachexiaoxi',xiaoxiList);
					this.getxiaoxiList();
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
		}
	}
</script>

<style lang="scss">
page{
	background-color: #F4F4F4;
}

.msgctst{
	font-size: 32rpx;
	color: #1a1a1a;
	background-color: white;
	border-radius: 12rpx;
	padding: 16rpx;
}
.mymsgctst{
	font-size: 32rpx;
	color:white;
	background-color: #7a7a7a;
	border-radius: 12rpx;
	padding: 16rpx;
}

.bottomfloatV{
	position: fixed;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	background-color: white;
}
.inputVst{
	margin-top: 10rpx;
	width: 76%;
	background-color: #F4F4F4;
	height: 80rpx;
	border-radius: 20rpx;
}
.updatamsg{
	margin-left: 10rpx;
	margin-top: 10rpx;
	font-weight: bold;
}

</style>