components/mine/address-active/index.vue

@@ -25,14 +25,14 @@
 			</view>
 		</view>
 		<view class="edit-btn" @click="confirmBtn">保存地址</view>
-		<u-select v-model="show" 
+		<!-- <u-select v-model="show" 
 				mode="mutil-column-auto" 
 				:list="areaList" 
 				value-name="area_id" 
 				label-name="area_name" 
 				child-name="_child" 
 				@confirm="setArea">
-		</u-select>
+		</u-select> -->
 		<u-toast ref="uToast" />
 	</view>
 </template>

components/remaining/remaining.vue

@@ -48,7 +48,7 @@
 	export default {
 		data() {
 			return {
-				remaining: 10,
+				remaining: 4,
 				type: true,
 				banner: false,
 				protocol: false,

manifest.json

@@ -83,5 +83,15 @@
     },
     "uniStatistics" : {
         "enable" : false
+    },
+    "h5" : {
+        "title" : "deming",
+        "domain" : "http://sdmr.ren",
+        "devServer" : {
+            "https" : false
+        },
+        "router" : {
+            "base" : "history"
+        }
     }
 }

pageA/login/login.vue

@@ -37,7 +37,7 @@
 			</view>
 			<!-- denglu QQ weixin -->
 			<view class="buttones">
-				<u-button @click="loginOn">{{login}}</u-button>
+				<view  @click="loginOn">{{login}}</view>
 			</view>
 			<u-mask :show="show" @click="show = false">
 				<view class="warp">
@@ -383,7 +383,7 @@
 		height: 22rpx;
 	}
 
-	.buttones .u-btn {
+	.buttones > view {
 		width: 628rpx;
 		height: 98rpx;
 		background: rgba(255, 120, 15, 1) !important;
@@ -391,10 +391,11 @@
 		margin: 0 auto;
 		font-size: 36rpx;
 		color: rgba(255, 255, 255, 1) !important;
-		line-height: 36px;
+		line-height: 98rpx;
 		border: 1px #ff780f solid;
 		outline: none;
 		border-color: rgba(255, 120, 15, 1) !important;
+		text-align: center;
 	}
 
 	.warp {

pageA/register/register.vue

@@ -36,7 +36,7 @@
 				<text class="other" @click="mask_u">其他方式登录</text>
 			</view>
 			<!-- denglu QQ weixin -->
-			<u-button @click="loginIn">{{login}}</u-button>
+			<view class="u-btn" @click="loginIn">{{login}}</view>
 			<u-mask :show="show" @click="show = false">
 				<view class="warp">
 					<view class="rect" @tap.stop>
@@ -238,7 +238,7 @@
 
 		.labales {
 			border-bottom: 1px #fff solid;
-			margin-bottom: 90rpx;
+			margin-bottom: 20rpx;
 			height: 70rpx;
 			line-height: 70rpx;
 			color: #fff;
@@ -267,28 +267,6 @@
 		letter-spacing: 2rpx;
 	}
 
-	.pact text {
-		font-size: 22rpx;
-		font-weight: 400;
-		color: rgba(255, 255, 255, 1);
-		line-height: 36px;
-	}
-
-	.pact_text {
-		font-size: 22px;
-		font-weight: 400;
-		color: rgba(129, 188, 253, 1) !important;
-		line-height: 36px;
-	}
-
-	//单选框的样式
-	.pact {
-		position: relative;
-		padding-left: 40rpx;
-		overflow: hidden; //超出的文本隐藏
-		text-overflow: ellipsis; //溢出用省略号显示
-		white-space: nowrap; //溢出不换行
-	}
 
 	.u-checkbox-group {
 		position: absolute;
@@ -312,10 +290,11 @@
 		margin: 0 auto;
 		font-size: 36rpx;
 		color: rgba(255, 255, 255, 1) !important;
-		line-height: 36px;
+		line-height: 98rpx;
 		border: 1px #ff780f solid;
 		outline: none;
 		border-color: rgba(255, 120, 15, 1) !important;
+		text-align: center;
 	}
 
 	.warp {
@@ -414,4 +393,32 @@
 		bottom: 0;
 		left: 0;
 	}
+	.pact text {
+		font-size: 22rpx;
+		font-weight: 400;
+		color: rgba(255, 255, 255, 1);
+		// line-height: 36px;
+	}
+	
+	.pact>view:first-child {
+		float: left;
+	
+	}
+	
+	.pact_text {
+		font-size: 22px;
+		font-weight: 400;
+		color: rgba(129, 188, 253, 1) !important;
+		// line-height: 36px;
+	}
+	
+	//单选框的样式
+	.pact {
+		position: relative;
+		padding-left: 40rpx;
+		overflow: hidden;
+		// overflow: hidden; //超出的文本隐藏
+		// text-overflow: ellipsis; //溢出用省略号显示
+		// white-space: nowrap; //溢出不换行
+	}
 </style>

pageD/chat/chat.vue

@@ -0,0 +1,544 @@
+<template>
+	<view class="content">
+		<view class="content-box" @touchstart="touchstart" id="content-box" :class="{'content-showfn':showFunBtn}">
+			<!-- 背景图- 定位方式 -->
+			<image class="content-box-bg" :src="_user_info.chatBgImg" :style="{ height: imgHeight }"></image>
+			<view class="content-box-loading" v-if="!loading"><u-loading mode="flower"></u-loading></view>
+			<view class="message" v-for="(item, index) in messageList" :key="index" :id="`msg-${item.hasBeenSentId}`">
+				<view class="message-item " :class="item.isItMe ? 'right' : 'left'">
+					<image class="img" :src="item.fromUserHeadImg" mode="" @tap="linkToBusinessCard(item.fromUserId)"></image>
+					<!-- contentType = 1 文本 -->
+					<view class="content" v-if="item.contentType == 1">{{ item.content }}</view>
+					<!-- contentType = 2 语音 -->
+					<view
+						class="content contentType2"
+						:class="[{ 'content-type-right': item.isItMe }]"
+						v-if="item.contentType == 2"
+						@tap="handleAudio(item)"
+						hover-class="contentType2-hover-class"
+						:style="{width:`${130+(item.contentDuration*2)}rpx`}"
+					>
+						<view
+							class="voice_icon"
+							:class="[
+								{ voice_icon_right: item.isItMe },
+								{ voice_icon_left: !item.isItMe },
+								{ voice_icon_right_an: item.anmitionPlay && item.isItMe },
+								{ voice_icon_left_an: item.anmitionPlay && !item.isItMe }
+							]"
+						></view>
+						<view class="">{{ item.contentDuration }}''</view>
+					</view>
+					<!-- contentType = 3 图片 -->
+					<view 
+						class="content contentType3" 	
+						v-if="item.contentType == 3"
+						@tap="viewImg([item.content])"
+					>
+						<image :src="item.content" class="img" mode="widthFix"></image>
+					</view>
+				</view>
+			</view> 
+		</view>
+		
+		<!-- 底部聊天输入框 -->
+		<view class="input-box" :class="{ 'input-box-mpInputMargin': mpInputMargin }">
+			<view class="input-box-flex">
+				<!-- #ifndef H5 -->
+				<image v-if="chatType === 'voice'" class="icon_img" :src="require('@/static/pageD/voice.png')"  @click="switchChatType('keyboard')"></image>
+				<image v-if="chatType === 'keyboard'" class="icon_img" :src="require('@/static/pageD/keyboard.png')"  @click="switchChatType('voice')"></image>
+				<!-- #endif -->
+				<view class="input-box-flex-grow"> 
+					<input
+						v-if="chatType === 'voice'"
+						type="text"
+						class="content"
+						id="input"
+						v-model="formData.content"
+						:hold-keyboard="true"
+						:confirm-type="'send'"
+						:confirm-hold="true"
+						placeholder-style="color:#DDDDDD;"
+						:cursor-spacing="10"
+						@confirm="sendMsg(null)"
+					/>
+					<view
+						class="voice_title"
+						v-if="chatType === 'keyboard'"
+						:style="{ background: recording ? '#c7c6c6' : '#FFFFFF' }"
+						@touchstart.stop.prevent="startVoice"
+						@touchmove.stop.prevent="moveVoice"
+						@touchend.stop="endVoice"
+						@touchcancel.stop="cancelVoice"
+					>
+						{{ voiceTitle }}
+					</view>
+				</view>
+				
+				<!-- 功能性按钮 -->
+				<image class=" icon_btn_add" :src="require('@/static/pageD/add.png')" @tap="switchFun"></image>
+				
+				<!-- #ifdef H5 --> 
+				<button class="btn" type="primary" size="mini" @touchend.prevent="sendMsg(null)">发送</button>
+				<!-- #endif -->
+			</view>
+			
+			<view class="fun-box" :class="{'show-fun-box':showFunBtn}">
+				<u-grid :col="4"  hover-class="contentType2-hover-class" :border="false" @click="clickGrid">
+					<u-grid-item v-for="(item, index) in funList" :index="index" :key="index" bg-color="#eaeaea">
+						<u-icon :name="item.icon" :size="52"></u-icon>
+						<view class="grid-text">{{ item.title }}</view>
+					</u-grid-item>
+				</u-grid>
+			</view>
+
+		</view>
+		
+		<!-- //语音动画 -->
+		<view class="voice_an"  v-if="recording">
+			<view class="voice_an_icon">
+				<view id="one" class="wave"></view>
+				<view id="two" class="wave"></view>
+				<view id="three" class="wave"></view>
+				<view id="four" class="wave"></view>
+				<view id="five" class="wave"></view>
+				<view id="six" class="wave"></view>
+				<view id="seven" class="wave"></view>
+			</view>
+			<view class="text">{{voiceIconText}}</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			fromUserInfo: {},
+			formData: {
+				content: '',
+				limit: 15,
+				index: 1
+			},
+			messageList: [],
+			loading: true, //标识是否正在获取数据
+			imgHeight: '1000px',
+			mpInputMargin: false, //适配微信小程序 底部输入框高度被顶起的问题
+			chatType:"voice",  // 图标类型 'voice'语音 'keyboard'键盘
+			voiceTitle: '按住 说话',
+			Recorder: uni.getRecorderManager(),
+			Audio: uni.createInnerAudioContext(),
+			recording: false, //标识是否正在录音
+			isStopVoice: false, //加锁 防止点击过快引起的当录音正在准备(还没有开始录音)的时候,却调用了stop方法但并不能阻止录音的问题
+			voiceInterval:null,
+			voiceTime:0, //总共录音时长
+			canSend:true, //是否可以发送
+			PointY:0, //坐标位置
+			voiceIconText:"正在录音...",
+			showFunBtn:false, //是否展示功能型按钮
+			AudioExam:null, //正在播放音频的实例
+			funList: [
+				{ icon:"photo-fill",title:"照片",uploadType:["album"] },
+				{ icon:"camera-fill",title:"拍摄",uploadType:["camera"] },
+			],
+		};
+	},
+	methods: {
+		//拼接消息 处理滚动
+		async joinData() {
+			if (!this.loading) {
+				//如果没有获取数据 即loading为false时，return 避免用户重复上拉触发加载
+				return;
+			}
+			this.loading = false;
+			const data = await this.getMessageData();
+			//获取节点信息
+			const { index } = this.formData;
+			const sel = `#msg-${index > 1 ? this.messageList[0].hasBeenSentId : data[data.length - 1].hasBeenSentId}`;
+			this.messageList = [...data, ...this.messageList];
+			//填充数据后，视图会自动滚动到最上面一层然后瞬间再跳回bindScroll的指定位置 ---体验不是很好，后期优化
+			this.$nextTick(() => {
+				this.bindScroll(sel);
+				//如果还有数据
+				if (this.formData.limit >= data.length) {
+					this.formData.index++;
+					setTimeout(() => {
+						this.loading = true;
+					}, 200);
+				}
+			});
+		},
+		//处理滚动
+		bindScroll(sel, duration = 0) {
+			const query = uni.createSelectorQuery().in(this);
+			query
+				.select(sel)
+				.boundingClientRect(data => {
+					uni.pageScrollTo({
+						scrollTop: data && data.top - 40,
+						duration
+					});
+				})
+				.exec();
+		},
+		//获取消息
+		getMessageData() {
+			let getData = () => {
+				let arr = [];
+				let startIndex = (this.formData.index - 1) * this.formData.limit;
+				let endIndex = startIndex + this.formData.limit;
+				for (let i = startIndex; i < endIndex; i++) {
+					const isItMe = Math.random() > 0.5 ? true : false;
+					arr.unshift({
+						hasBeenSentId: i, //已发送过去消息的id
+						content: `很高兴认识你，这是第${i + 1}条消息。`,
+						fromUserHeadImg: isItMe ? this._user_info.headImg : this.fromUserInfo.fromUserHeadImg, //用户头像
+						fromUserId: isItMe ? this._user_info.id : this.fromUserInfo.fromUserId,
+						isItMe, //true此条信息是我发送的 false别人发送的
+						createTime: Date.now(),
+						contentType: 1, // 1文字文本 2语音
+						anmitionPlay: false //标识音频是否在播放
+					});
+				}
+				return arr;
+			};
+			return new Promise((resolve, reject) => {
+				const data = getData();
+				setTimeout(() => {
+					resolve(data);
+				}, 500);
+			});
+		},
+		//切换语音或者键盘方式
+		switchChatType(type) {
+			this.chatType = type;
+			this.showFunBtn =false;
+		},
+		//切换功能性按钮
+		switchFun(){
+			this.chatType = 'keyboard'
+			this.showFunBtn = !this.showFunBtn;
+			uni.hideKeyboard()
+		},
+		//发送消息
+		sendMsg(data) {
+			const params = {
+				hasBeenSentId: Date.now(), //已发送过去消息的id
+				content: this.formData.content,
+				fromUserHeadImg: this._user_info.headImg, //用户头像
+				fromUserId: this._user_info.id,
+				isItMe: true, //true此条信息是我发送的  false别人发送的
+				createTime: Date.now(),
+				contentType: 1
+			};
+
+			if (data) {
+				if(data.contentType == 2){
+					//说明是发送语音
+					params.content = data.content;
+					params.contentType = data.contentType;
+					params.contentDuration = data.contentDuration;
+					params.anmitionPlay = false;
+				}else if(data.contentType == 3){
+					//发送图片
+					params.content = data.content;
+					params.contentType = data.contentType;
+				}
+			} else if (!this.$u.trim(this.formData.content)) {
+				//验证输入框书否为空字符传
+				return;
+			}
+
+			this.messageList.push(params);
+
+			this.$nextTick(() => {
+				this.formData.content = '';
+				// #ifdef MP-WEIXIN
+					if(params.contentType == 1){
+						uni.pageScrollTo({
+							scrollTop: 99999,
+							duration: 0, //小程序如果有滚动效果 input的焦点也会随着页面滚动...
+						});
+					}else{
+						setTimeout(()=>{
+							uni.pageScrollTo({
+								scrollTop: 99999,
+								duration: 0, //小程序如果有滚动效果 input的焦点也会随着页面滚动...
+							});
+						},150)
+					}
+				// #endif
+					
+				// #ifndef MP-WEIXIN
+					uni.pageScrollTo({
+						scrollTop: 99999,
+						duration: 100
+					});
+				// #endif
+				
+				if(this.showFunBtn){
+					this.showFunBtn = false;
+				}
+				
+				// #ifdef MP-WEIXIN 
+				if (params.contentType == 1) {
+					this.mpInputMargin = true;
+				} 
+				// #endif
+				//h5浏览器并没有很好的办法控制键盘一直处于唤起状态 而且会有样式性的问题
+				// #ifdef H5
+				uni.hideKeyboard();
+				// #endif
+			});
+		},
+		//用户触摸屏幕的时候隐藏键盘
+		touchstart() {
+			uni.hideKeyboard();
+		},
+		// userid 用户id
+		linkToBusinessCard(userId) {
+			this.$u.route({
+				url: 'pages/businessCard/businessCard',
+				params: {
+					userId
+				}
+			});
+		},
+		//准备开始录音
+		startVoice(e) {
+			if(!this.Audio.paused){
+				//如果音频正在播放 先暂停。
+				this.stopAudio(this.AudioExam)
+			}
+			this.recording = true;
+			this.isStopVoice = false;
+			this.canSend = true;
+			this.voiceIconText = "正在录音..."
+			this.PointY = e.touches[0].clientY;
+			this.Recorder.start({
+				format: 'mp3'
+			});
+		},
+		//录音已经开始
+		beginVoice(){
+			if (this.isStopVoice) {
+				this.Recorder.stop();
+				return;
+			}
+			this.voiceTitle = '松开 结束'
+			this.voiceInterval =  setInterval(()=>{
+				this.voiceTime ++;
+			},1000)
+		},
+		//move 正在录音中
+		moveVoice(e){
+			const PointY = e.touches[0].clientY
+			const slideY = this.PointY - PointY;
+			if(slideY > uni.upx2px(120)){
+				this.canSend = false;
+				this.voiceIconText = '松开手指 取消发送 '
+			}else if(slideY > uni.upx2px(60)){
+				this.canSend = true;
+				this.voiceIconText = '手指上滑 取消发送 '
+			}else{
+				this.voiceIconText = '正在录音... '
+			}
+		},
+		//结束录音
+		endVoice() {
+			this.isStopVoice = true; //加锁 确保已经结束录音并不会录制
+			this.Recorder.stop();
+			this.voiceTitle = '按住 说话'
+		},
+		//录音被打断
+		cancelVoice(e){
+			this.voiceTime = 0;
+			this.voiceTitle = '按住 说话';
+			this.canSend = false;
+			this.Recorder.stop();
+		},
+		//处理录音文件
+		handleRecorder({ tempFilePath,duration }) {
+			let contentDuration;
+			// #ifdef MP-WEIXIN
+			this.voiceTime = 0;
+			if (duration < 600) {
+				this.voiceIconText="说话时间过短";
+				setTimeout(()=>{
+					this.recording = false;
+				},200)
+				return;
+			} 
+			contentDuration = duration/1000;
+			// #endif
+			
+			// #ifdef APP-PLUS
+			contentDuration = this.voiceTime +1;
+			this.voiceTime = 0;
+			if(contentDuration <= 0) {
+				this.voiceIconText="说话时间过短";
+				setTimeout(()=>{
+					this.recording = false;
+				},200)
+				return;
+			};
+			// #endif
+			
+			this.recording = false;
+			const params = {
+				contentType: 2,
+				content: tempFilePath,
+				contentDuration: Math.ceil(contentDuration)
+			};
+			this.canSend && this.sendMsg(params);
+		},
+		//控制播放还是暂停音频文件
+		handleAudio(item) {
+			this.AudioExam = item;
+			this.Audio.paused ? this.playAudio(item) : this.stopAudio(item);
+		},
+		//播放音频
+		playAudio(item) {
+			this.Audio.src = item.content;
+			this.Audio.hasBeenSentId = item.hasBeenSentId;
+			this.Audio.play();
+			item.anmitionPlay = true;
+		},
+		//停止音频
+		stopAudio(item) {
+			item.anmitionPlay = false;
+			this.Audio.src = '';
+			this.Audio.stop();
+		},
+		//关闭动画
+		closeAnmition() {
+			const hasBeenSentId = this.Audio.hasBeenSentId;
+			const item = this.messageList.find(it => it.hasBeenSentId == hasBeenSentId);
+			item.anmitionPlay = false;
+		},
+		//点击宫格时触发
+		clickGrid(index){
+			if(index == 0){
+				this.chooseImage(['album'])
+			}else if(index == 1){
+				this.chooseImage(['camera'])
+			}
+		},
+		//发送图片
+		chooseImage(sourceType){
+			uni.chooseImage({
+				sourceType,
+				sizeType:['compressed'], 
+				success:res=>{ 
+					this.showFunBtn = false;
+					for(let i = 0;i<res.tempFilePaths.length;i++){
+						const params = {
+							contentType: 3,
+							content: res.tempFilePaths[i],
+						};
+						this.sendMsg(params)
+					}
+				}
+			})
+		},
+		//查看大图
+		viewImg(imgList){
+			uni.previewImage({
+				urls: imgList,
+				// #ifndef MP-WEIXIN
+				indicator: 'number'
+				// #endif
+			});
+		},
+	},
+	onPageScroll(e) {
+		if (e.scrollTop < 50) {
+			this.joinData();
+		}
+	},
+	onNavigationBarButtonTap({ index }) {
+		if (index == 0) {
+			//用户详情 设置
+		} else if (index == 1) {
+			//返回按钮
+			this.$u.route({
+				type: 'switchTab',
+				url: 'pages/home/home'
+			});
+		}
+	},
+	//返回按钮事件
+	onBackPress(e) {
+		//以下内容对h5不生效
+		//--所以如果用浏览器自带的返回按钮进行返回的时候页面不会重定向 正在寻找合适的解决方案
+		this.$u.route({
+			type: 'switchTab',
+			url: 'pages/home/home'
+		});
+		return true;
+	},
+	onLoad(info) {
+		// { messageId,fromUserName,fromUserHeadImg } = info
+		const userInfo = this.firendList.filter(item => item.userId == info.fromUserId)[0];
+		console.log(userInfo)
+		this.fromUserInfo = {
+			fromUserName: userInfo.userName,
+			fromUserHeadImg: userInfo.headImg,
+			fromUserId: 4,
+			messageId: 2
+		};
+
+		//录音开始事件
+		this.Recorder.onStart(e => {
+			
+			this.beginVoice();
+		});
+		//录音结束事件
+		this.Recorder.onStop(res => {
+			clearInterval(this.voiceInterval);
+			this.handleRecorder(res);
+		});
+
+		//音频停止事件
+		this.Audio.onStop(e => {
+			this.closeAnmition();
+		});
+
+		//音频播放结束事件
+		this.Audio.onEnded(e => {
+			this.closeAnmition();
+		});
+	},
+	onReady() {
+		//自定义返回按钮 因为原生的返回按钮不可阻止默认事件
+		// #ifdef H5
+		const icon = document.getElementsByClassName('uni-page-head-btn')[0];
+		icon.style.display = 'none';
+		// #endif
+
+		uni.setNavigationBarTitle({
+			title: this.fromUserInfo.fromUserName
+		});
+		this.joinData();
+		uni.getSystemInfo({
+			success: res => {
+				this.imgHeight = res.windowHeight + 'px';
+			}
+		});
+		
+		uni.onKeyboardHeightChange(res => {
+			if (res.height == 0) {
+				// #ifdef MP-WEIXIN
+				this.mpInputMargin = false;
+				// #endif
+			}else{
+				this.showFunBtn = false;
+			}
+		});
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+ @import './index.scss'
+</style>

pageD/chat/index.scss

@@ -0,0 +1,354 @@
+page {
+	background-color: #f3f3f3;
+}
+
+.content {
+	&-showfn{
+		padding-bottom: 0rpx;
+		padding-bottom: calc(420rpx + constant(safe-area-inset-bottom));
+		padding-bottom: calc(420rpx + env(safe-area-inset-bottom) );
+		/* #ifdef MP-WEIXIN */
+		/* #endif */
+	}
+	&-box {
+		width: 100%;
+		height: auto;
+		min-height: calc(100vh - env(safe-area-inset-top) - 200rpx);
+		box-sizing: content-box;
+		position: relative;
+		padding-bottom: 120rpx;
+		
+		/* #ifdef APP-PLUS  */
+		margin-bottom: 0rpx;
+		margin-bottom: constant(safe-area-inset-bottom);
+		margin-bottom: env(safe-area-inset-bottom);
+		/* #endif */
+		/* #ifdef MP-WEIXIN */
+		padding-bottom: 0rpx;
+		padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
+		padding-bottom: calc(120rpx + env(safe-area-inset-bottom) );
+		/* #endif */
+	
+		&-bg {
+			width: 100%;
+			position: fixed;
+			/* #ifdef MP-WEIXIN */
+			bottom: 0;
+			bottom: constant(safe-area-inset-bottom);
+			bottom: env(safe-area-inset-bottom);
+			/* #endif */
+			/* #ifndef MP-WEIXIN */
+			top: 0;
+			left: 0;
+			/* #endif */
+		}
+
+		&-loading {
+			text-align: center;
+			padding: 20rpx 0;
+		}
+
+		.message {
+			padding: 13rpx 20rpx;
+		}
+		
+		.message-item {
+			display: flex;
+			justify-content: flex-start;
+			align-items: flex-start;
+			align-content: flex-start;
+			flex-wrap: nowrap;
+			flex-direction: row;
+
+			.img {
+				width: 80rpx;
+				height: 80rpx;
+				border-radius: 5rpx;
+			}
+
+			.content {
+				padding: 20rpx;
+				max-width: 500rpx;
+				border-radius: 10rpx;
+				font-size: 28rpx;
+			}
+			
+			// 语音
+			.contentType2 {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				.voice_icon {
+					height: 34rpx;
+					width: 34rpx; 
+					background-repeat: no-repeat;
+					background-size: 100%;
+				}
+				.voice_icon_right {
+					background-image: url(../../static/voice-left-3.png);
+					margin-left: 10rpx;
+				}
+				.voice_icon_left {
+					background-image: url(../../static/voice-right-3.png);
+					margin-right: 10rpx;
+				}
+				.voice_icon_right_an {
+					animation: voiceAn_right 1s linear alternate infinite;
+				}
+				.voice_icon_left_an {
+					animation: voiceAn_left 1s linear alternate infinite;
+				}
+				@keyframes voiceAn_right {
+					0% {
+						background-image: url(../../static/voice-left-1.png);
+					}
+					50% {
+						background-image: url(../../static/voice-left-2.png);
+					}
+					100% {
+						background-image: url(../../static/voice-left-3.png);
+					}
+				}
+				@keyframes voiceAn_left {
+					0% {
+						background-image: url(../../static/voice-right-1.png);
+					}
+					50% {
+						background-image: url(../../static/voice-right-2.png);
+					}
+					100% {
+						background-image: url(../../static/voice-right-3.png);
+					}
+				}
+			}
+			
+			//图片
+			.contentType3{
+				padding: 0;
+				border-radius: 2rpx;
+				background-color: transparent !important;
+				.img{
+					width: 200rpx;
+					height: auto;
+					max-width: 300rpx;
+					max-height: 400rpx;
+				}
+			}
+			.contentType3::after{
+				border: none !important;
+				display: none !important;
+			}
+			.content-type-right {
+				flex-direction: row-reverse;
+			}
+
+			&.right {
+				flex-direction: row-reverse;
+
+				.content {
+					background-color: $uni-color-success;
+					margin-right: 28rpx;
+					word-break: break-all;
+					line-height: 36rpx;
+					position: relative;
+
+					&::after {
+						content: '';
+						display: block;
+						width: 0;
+						height: 0;
+						border-top: 10rpx solid transparent;
+						border-bottom: 10rpx solid transparent;
+						border-left: 16rpx solid $uni-color-success;
+						position: absolute;
+						right: -16rpx;
+						top: 30rpx;
+					}
+				}
+			}
+
+			&.left {
+				.content {
+					background-color: $uni-text-color-inverse;
+					margin-left: 28rpx;
+					word-break: break-all;
+					line-height: 36rpx;
+					position: relative;
+
+					&::after {
+						content: '';
+						display: block;
+						width: 0;
+						height: 0;
+						border-top: 10rpx solid transparent;
+						border-bottom: 10rpx solid transparent;
+						border-right: 16rpx solid $uni-text-color-inverse;
+						position: absolute;
+						left: -16rpx;
+						top: 30rpx;
+					}
+				}
+			}
+		}
+	}
+
+	.input-box {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		box-sizing: content-box;
+		z-index: 999;
+		background-color: #eaeaea;
+		
+		/* #ifdef APP-PLUS */
+		margin-bottom: 0rpx;
+		margin-bottom: constant(safe-area-inset-bottom);
+		margin-bottom: env(safe-area-inset-bottom);
+		/* #endif */
+		/* #ifdef MP-WEIXIN */
+		padding-bottom: 0rpx;
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+		/* #endif */
+
+		&-flex {
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+			flex-wrap: nowrap;
+			flex-direction: row;
+			padding: 20rpx;
+			box-sizing: border-box;
+			image{
+				width: 56rpx;
+				height: 56rpx;
+			}
+			.icon_img {
+				margin-right: 20rpx;
+			}
+			.icon_btn_add{
+				margin-left: 20rpx;
+			}
+			&-grow {
+				flex-grow: 1;
+
+				.content {
+					box-sizing: border-box;
+					background-color: #fff;
+					height: 80rpx;
+					padding: 0 20rpx;
+					border-radius: 12rpx;
+					font-size: 28rpx;
+					caret-color: $uni-color-success;
+				}
+
+				.voice_title {
+					text-align: center;
+					background-color: #ffffff;
+					height: 80rpx;
+					line-height: 80rpx;
+					border-radius: 12rpx;
+				}
+			}
+
+			.btn {
+				margin-left: 20rpx;
+				background-color: $u-type-success;
+				border: none;
+			}
+		}
+		
+		.fun-box{
+			opacity: 0;
+			transition: all 0.1s ease-in-out;
+			height: 0;
+			.grid-text{
+				padding-top: 10rpx;
+				color: $uni-text-color-grey;
+			}
+			
+		}
+		.show-fun-box{
+			opacity: 1;
+			height: 300rpx;
+		}
+	}
+
+	.input-box-mpInputMargin {
+		/* #ifdef MP-WEIXIN */
+		padding-bottom: 0rpx;
+		/* #endif */
+	}
+	.voice_an{
+		width: 300rpx;
+		height: 300rpx;
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%,-55%);
+		background-color: rgba(41,41,41,0.7);
+		color: white;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		text-align: center;
+		border-radius: 10rpx;
+		.text{
+			padding-top: 30rpx;
+		}
+		@keyframes runVoice{
+			0%{
+				height: 10%;
+			}
+			20%{
+				height: 50%;
+			}
+			50%{
+				height: 100%;
+			}
+			80%{
+				height: 50%;
+			}
+			100%{
+				height: 0%;
+			}
+		}	
+		.wave{
+			width:6rpx;
+			height: 100%;
+			margin-left: 10rpx;
+			border-radius: 50rpx;
+			background-color: #999;
+			vertical-align: middle;
+			display: inline-block;
+		}
+		.voice_an_icon{
+			width: 200rpx;
+			height: 100rpx;
+			line-height: 50rpx;
+			margin: 50rpx 0;
+		}
+		.voice_an_icon #one{
+			animation:runVoice 0.6s infinite 0.1s;
+		}
+		.voice_an_icon #two{
+			animation:runVoice 0.6s infinite 0.3s;
+		}
+		.voice_an_icon #three{
+			animation:runVoice 0.6s infinite 0.6s;
+		}
+		.voice_an_icon #four{
+			animation:runVoice 0.6s infinite 0.1s;
+		}
+		.voice_an_icon #five{
+			animation:runVoice 0.6s infinite 0.3s;
+		}
+		.voice_an_icon #six{
+			animation:runVoice 0.6s infinite 0.6s;
+		}
+		.voice_an_icon #seven{
+			animation:runVoice 0.6s infinite 0.1s;
+		}
+	}
+}

pages.json

@@ -277,6 +277,7 @@
 						}
 					}
 				},
+				
 				{
 					"path": "activity/activity",
 					"style": {

unpackage/dist/build/app-plus/__uniappview.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+  <head>
+    <meta charset="UTF-8" />
+    <script>
+      var __UniViewStartTime__ = Date.now();
+      document.addEventListener('DOMContentLoaded', function() {
+          document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
+      })
+      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
+        CSS.supports('top: constant(a)'))
+      document.write(
+        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
+        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
+    </script>
+    <title>View</title>
+    <link rel="stylesheet" href="view.css" />
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script src="__uniappes6.js"></script>
+    <script src="view.umd.min.js"></script>
+    <script src="app-view.js"></script>
+  </body>
+
+</html>

unpackage/dist/build/app-plus/app-config.js

@@ -0,0 +1 @@
+(function(e){function r(r){for(var n,i,l=r[0],f=r[1],a=r[2],c=0,s=[];c<l.length;c++)i=l[c],o[i]&&s.push(o[i][0]),o[i]=0;for(n in f)Object.prototype.hasOwnProperty.call(f,n)&&(e[n]=f[n]);p&&p(r);while(s.length)s.shift()();return u.push.apply(u,a||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,l=1;l<t.length;l++){var f=t[l];0!==o[f]&&(n=!1)}n&&(u.splice(r--,1),e=i(i.s=t[0]))}return e}var n={},o={"app-config":0},u=[];function i(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,i),t.l=!0,t.exports}i.m=e,i.c=n,i.d=function(e,r,t){i.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},i.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,r){if(1&r&&(e=i(e)),8&r)return e;if(4&r&&"object"===typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(i.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)i.d(t,n,function(r){return e[r]}.bind(null,n));return t},i.n=function(e){var r=e&&e.__esModule?function(){return e["default"]}:function(){return e};return i.d(r,"a",r),r},i.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},i.p="/";var l=this["webpackJsonp"]=this["webpackJsonp"]||[],f=l.push.bind(l);l.push=r,l=l.slice();for(var a=0;a<l.length;a++)r(l[a]);var p=f;t()})([]);

unpackage/dist/build/app-plus/manifest.json

@@ -0,0 +1 @@
+{"@platforms":["android","iPhone","iPad"],"id":"__UNI__10450AF","name":"deming","version":{"name":"1.0.0","code":"100"},"description":"","launch_path":"__uniappview.html","developer":{"name":"","email":"","url":""},"permissions":{"OAuth":{},"UniNView":{"description":"UniNView原生渲染"}},"plus":{"useragent":{"value":"uni-app","concatenate":true},"splashscreen":{"target":"id:1","autoclose":true,"waiting":true,"delay":0},"popGesture":"close","launchwebview":{"id":"1","kernel":"WKWebview"},"statusbar":{"immersed":"supportedDevice","style":"dark","background":"#F8F8F8"},"usingComponents":true,"nvueCompiler":"uni-app","compilerVersion":3,"distribute":{"google":{"permissions":["<uses-feature android:name=\"android.hardware.camera\"/>","<uses-feature android:name=\"android.hardware.camera.autofocus\"/>","<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>","<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>","<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>","<uses-permission android:name=\"android.permission.CALL_PHONE\"/>","<uses-permission android:name=\"android.permission.CAMERA\"/>","<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>","<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>","<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>","<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>","<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>","<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>","<uses-permission android:name=\"android.permission.READ_LOGS\"/>","<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>","<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>","<uses-permission android:name=\"android.permission.VIBRATE\"/>","<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>","<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>","<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"]},"apple":{},"plugins":{"ad":{},"oauth":{"qq":{"appid":"101884160"}},"audio":{"mp3":{"description":"Android平台录音支持MP3格式文件"}}}},"allowsInlineMediaPlayback":true,"safearea":{"background":"#ffffff","bottom":{"offset":"auto"}},"uni-app":{"compilerVersion":"2.6.16","control":"uni-v3","nvueCompiler":"uni-app","renderer":"auto","nvue":{"flex-direction":"column"},"nvueLaunchMode":"normal"},"tabBar":{"color":"#999999","selectedColor":"#FFC023","borderStyle":"rgba(255,255,255,0.4)","backgroundColor":"#ffffff","list":[{"pagePath":"pages/index/index","iconPath":"static/image/tabbar/home.png","selectedIconPath":"static/image/tabbar/home2.png","text":"首页"},{"pagePath":"pages/shop/index","iconPath":"static/image/tabbar/mall.png","selectedIconPath":"static/image/tabbar/mall2.png","text":"商城"},{"pagePath":"pages/information/information","iconPath":"static/image/tabbar/message.png","selectedIconPath":"static/image/tabbar/message2.png","text":"消息"},{"pagePath":"pages/mine/index","iconPath":"static/image/tabbar/mine.png","selectedIconPath":"static/image/tabbar/mine2.png","text":"我的"}],"height":"50px"},"launch_path":"__uniappview.html"}}

unpackage/dist/build/app-plus/static/css/normalize.css

@@ -0,0 +1,352 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+view{
+  box-sizing: border-box;
+}
+
+html {
+  line-height: 1; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}