KunWeb/fapp/ciyon_ap/pages/main/me_problechat.vue

<template>
	<ciy-header title="我的工单" ref="header"></ciy-header>
	<view v-if="init.code != 1" class="px4 py4">
		<view style="height:4em;width:100%;" class="ciy-skeleton"></view>
		<view style="height:3em;width:60%;" class="ciy-skeleton"></view>
		<view style="height:8em;width:60%;margin-left:40%;" class="ciy-skeleton"></view>
		<view style="height:5em;width:60%;" class="ciy-skeleton"></view>
	</view>
	<view v-else class="flex flexcol" :style="'height:calc(100vh - ' + (header_statusbar_height+header_title_height) + 'px);'">
		<scroll-view @scrolltoupper="chgupper" :scroll-top="top" id="id_chats" class="flex1" style="overflow: auto;" scroll-y>
			<view class="ciy-list">
				<view class="l2" v-html="tobr(init.once.data.content)"></view>
				<ciy-showimgs :src="init.once.data.imgs" label="图片截图"></ciy-showimgs>
				<view class="rt">
					<button class="btn smm" @tap="closechat">关闭工单</button>
				</view>
				<view class="rb">{{todatetime(init.once.data.addtimes)}} 提交</view>
			</view>
			<view :class="item._od" class="vchat" v-for="(item,index) in init.list" :key="item.id">
				<view class="nick" v-if="item.nick">{{item.nick}}</view>
				<view class="chat" v-html="tobr(item.content)"></view>
				<view class="time">{{todatetime(item.addtimes,'st')}}</view>
			</view>
		</scroll-view>
		<form @submit="submitsend" v-if="init.once.data.closetimes==0">
			<view class="bg2 vchatsend">
				<!-- <view><button class="btn def" @tap="sendimg">图片</button></view> -->
				<view style="flex:1;"><ciy-textarea name="content" v-model="content"></ciy-textarea></view>
				<view><button form-type="submit" class="btn">发送</button></view>
			</view>
		</form>
		<view class="bg2 txt-center px4 py4" v-else>
			工单已关闭
		</view>
		<view class="bg2" :style="{height:footer_safe_height+'px'}"></view>
	</view>
</template>

<style>
	.vchatsend {
		display: flex;
		align-items: center;
		border-top: 2px solid var(--bg1);
		padding: 0 0.5em;
		gap: 0.5em;
	}

	.vchat {
		padding: 0.5em 1em;
	}

	.vchat .nick {
		font-size: 0.7em;
		color: var(--txt1);
		margin-left: 0.5em;
	}

	.vchat .time {
		font-size: 0.5em;
		color: var(--txt1);
		margin-left: 0.5em;
	}

	.vchat.me {
		text-align: right;
	}

	.vchat.me .chat {
		background: var(--succ4);
		display: inline-block;
		clear: both;
		padding: 0.5em;
		border-radius: 0.5em;
		min-width: 5em;
		text-align: left;
	}

	.vchat.you .chat {
		background: var(--bg1);
		display: inline-block;
		clear: both;
		padding: 0.5em;
		border-radius: 0.5em;
		min-width: 5em;
	}
</style>

<script>
	export default {
		data() {
			return {
				top: 0,
				content: ''
			}
		},
		onLoad() {
			this.maxid = 0;
			this.minid = 2147483647;
			this.getlist();
			this._tout = setInterval(() => {
				this.getnew(true);
			}, 3000);
		},
		onUnload(opn) {
			if (this._tout)
				clearTimeout(this._tout);
		},
		watch: {},
		computed: {},
		methods: {
			async getlist() {
				if (this.minid == 0)
					return;
				if (this._loading)
					return;
				this._loading = true;
				var retjson = await this.callajax({
					func: 'me.problechat_get',
					data: {
						mid: this.minid,
						op: 'min',
						id: this.opn.id,
						once: !this.init.once
					}
				});
				this._loading = false;
				this.callist(retjson.list);
				this.init = this.objdeepmerge(this.init, retjson, true);
				if (retjson.list.length < retjson.pagecount)
					this.minid = 0;
			},
			async getnew(blong) {
				var retjson = await this.callajax({
					func: 'me.problechat_get',
					data: {
						mid: this.maxid,
						op: 'max',
						id: this.opn.id,
						once: !this.init.once
					}
				});
				if (retjson.list.length == 0)
					return;
				this.callist(retjson.list);
				this.init = this.objdeepmerge(this.init, retjson);
				setTimeout(() => {
					this.top = 999999999 + this.maxid;
				}, 300);
			},
			callist(list) {
				for (var i in list) {
					var id = parseInt(list[i].id);
					if (id > this.maxid)
						this.maxid = id;
					if (id < this.minid)
						this.minid = id;
					if (list[i].sendtype == 1) {
						list[i]._od = 'me';
					} else if (list[i].sendtype == 2) {
						list[i].nick = '工程师回复';
						list[i]._od = 'you';
					} else {
						list[i].nick = 'AI助手';
						list[i]._od = 'you';
					}
				}
			},
			chgupper(e) {
				this.getlist();
			},
			async submitsend(e) {
				if (!e.detail.value.content)
					return this.toast('请输入内容');
				if (this._loading)
					return;
				this._loading = true;
				e.detail.value.id = this.opn.id;
				var retjson = await this.callajax({
					func: 'me.problechat_send',
					data: e.detail.value
				});
				this._loading = false;
				this.content = '';
				retjson.list = [retjson.data];
				this.callist(retjson.list);
				this.init = this.objdeepmerge(this.init, retjson);
				setTimeout(() => {
					this.top = 999999999 + this.maxid;
				}, 300);
			},
			async closechat(e) {
				if (await this.askmsg('是否关闭工单？', '关闭') != 'ok')
					return;
				if (this._loading)
					return;
				this._loading = true;
				var retjson = await this.callajax({
					func: 'me.problechat_close',
					data: {
						id: this.opn.id
					}
				});
				this._loading = false;
				uni.navigateBack();
			},
			sendimg() {}
		}
	}
</script>