feat:聊天页面代码移植

src/components/bar/arrow-bar.vue

@@ -0,0 +1,64 @@
+<template>
+	<view class="arrow-bar">
+		<text class="icon iconfont" :class="icon" :style="{color: textColor}"></text>
+		<text class="title">{{ title }}</text>
+		<uni-icons class="arrow" type="right" size="16"></uni-icons>
+	</view>
+</template>
+
+<script>
+export default {
+	name: "arrow-bar",
+	props: {
+		title: {
+			type: String,
+			required: true
+		},
+		icon: {
+			type: String,
+			default: ''
+		}
+	},
+	data() {
+		return {
+			colors: ["#5daa31", "#c7515a", "#e03697", "#85029b",
+				"#c9b455", "#326eb6"]
+		}
+	},
+	computed:{
+		textColor() {
+			let hash = 0;
+			for (var i = 0; i < this.title.length; i++) {
+				hash += this.title.charCodeAt(i);
+			}
+			return this.colors[hash % this.colors.length];
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.arrow-bar {
+	width: 100%;
+	height: 90rpx;
+	font-size: $im-font-size;
+	color: $im-text-color;
+	margin-top: 5rpx;
+	background-color: white;
+	line-height: 90rpx;
+	display: flex;
+	
+	.icon {
+		margin-left: 40rpx;
+	}
+	
+	.title {
+		flex: 1;
+		margin-left: 10rpx;
+	}
+
+	.arrow {
+		margin-right: 40rpx;
+	}
+}
+</style>

src/components/bar/bar-group.vue

@@ -0,0 +1,17 @@
+<template>
+	<view class="bar-group">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+export default {
+	name: "bar-group"
+}
+</script>
+
+<style lang="scss" scoped>
+.bar-group {
+	margin: 20rpx 0;
+}
+</style>

src/components/bar/btn-bar.vue

@@ -0,0 +1,68 @@
+<template>
+	<view class="btn-bar" :style="style">
+		<text v-if="icon" class="icon iconfont" :class="icon"></text>
+		<text class="title">{{ title }}</text>
+	</view>
+</template>
+
+<script>
+export default {
+	name: "btn-bar",
+	props: {
+		title: {
+			type: String,
+			required: true
+		},
+		icon: {
+			type: String,
+			required: false
+		},
+		type: {
+			type: String,
+			default: "normal"
+		},
+		color: {
+			type: String,
+			default: "#000"
+		}
+	},
+	computed: {
+		style() {
+			let color = "#000";
+			switch (this.type) {
+				case 'danger':
+					color = "#f14747";
+					break;
+				case 'primary':
+					color = "#35567f";
+					break;
+			}
+			return `color: ${color};`
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.btn-bar {
+	width: 100%;
+	height: 100rpx;
+	margin-top: 5rpx;
+	background-color: white;
+	line-height: 100rpx;
+	text-align: center;
+	display: flex;
+	justify-content: center;
+
+	.icon {
+		font-size: 40rpx;
+		font-weight: 600;
+		margin-right: 10rpx;
+	}
+
+	.title {
+		font-size: 32rpx;
+		font-weight: 600;
+	}
+}
+</style>

src/components/bar/switch-bar.vue

@@ -0,0 +1,61 @@
+<template>
+	<view class="switch-bar">
+		<text class="title">{{ title }}</text>
+		<switch class="switch" :checked="checked" color="#18bc37" @change="onChange"></switch>
+	</view>
+</template>
+
+<script>
+export default {
+	name: "switch-bar",
+	props: {
+		title: {
+			type: String,
+			required: true
+		},
+		checked: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			value: this.checked
+		}
+	},
+	methods: {
+		onChange(e) {
+			this.value = true;
+			setTimeout(() => {
+				this.value = false;
+			}, 100)
+			//this.value = false;
+
+			this.$emit('change', e);
+		}
+	}
+
+}
+</script>
+
+<style lang="scss" scoped>
+.switch-bar {
+	width: 100%;
+	height: 100rpx;
+	font-size: 34rpx;
+	color: black;
+	margin-top: 5rpx;
+	background-color: white;
+	line-height: 100rpx;
+	display: flex;
+
+	.title {
+		flex: 1;
+		margin-left: 40rpx;
+	}
+
+	.switch {
+		margin-right: 40rpx;
+	}
+}
+</style>