heshanApp/pages_im/pages/conversation/course/courseList.vue

<template>
	<view class="course-list-container">
		<view class="wechat-info" @tap="changeFun">
			<view class="wechat-icon">
				<image src="/static/image/course/icon_qiyewechat.png" mode=""></image>
			</view>
			<view class="wechat-name">
				<view>{{this.selectData && this.selectData.qwUserName}}</view>
				<view>{{this.selectData && this.selectData.companyName}}</view>
			</view>
			<view class="switch-button">
				<image src="/static/image/course/icon_switch.png" mode=""></image>
			</view>
		</view>
		<view class="course-list" v-if="courseList.length>0">
			<view v-for="(item, index) in courseList" :key="index" class="course-item" @tap="detail(item)">
				<view class="course-icon">
					<image src="/static/image/course/icon_class_video.png" mode=""></image>
				</view>
				<view class="course-name">{{ item.dictLabel }}</view>
				<view class="arrow-icon">
					<image src="/static/image/course/icon_more_right.png" mode=""></image>
				</view>
			</view>
		</view>
		<u-empty style="padding-top: 20vh;" mode="data" v-else="imgurl"
			icon="https://cos.his.cdwjyyh.com/fs/20240423/cf4a86b913a04341bb44e34bb4d37aa2.png" text="暂无数据"></u-empty>

		<u-picker :show="show" @close="show=false" @cancel="show=false" :closeOnClickOverlay="true" @confirm="confirm"
			:columns="columns"></u-picker>
	</view>
</template>

<script>
	import {
		getQwUserListByCompanyUserId,
		getCourseListByCompany,
	} from '@/api/course.js'
	export default {
		data() {
			return {
				courseList: [],
				show: false,
				columns: [],
				userList: [],
				selectData: '',
				sendUserId: null,
			};
		},
		onLoad(options) {
			if (options.userId) {
				this.sendUserId = options.userId
			}
			this.selectData = uni.getStorageSync('sendCourseQiWeiData')
			if(!this.selectData){
				this.getQwUserListByCompanyUserIdFun()
			}
			this.getCourseListByCompanyFun()
		},
		methods: {
			changeFun() {
				this.getQwUserListByCompanyUserIdFun()
				this.show=true
			},
			confirm(e) {
				const index = e.indexs[0]
				this.selectData = this.userList[index]
				uni.setStorageSync('sendCourseQiWeiData',this.selectData)
				this.show = false
			},
			detail(e) {
				uni.navigateTo({
					url: `/pages_im/pages/conversation/course/courseSend?id=${e.dictValue}&corpId=${this.selectData.corpId}&qwUserId=${this.selectData.id}&sendUserId=${this.sendUserId}`
				})
			},
			async getQwUserListByCompanyUserIdFun() {
				let params = {
					userId: this.sendUserId
				}
				const res = await getQwUserListByCompanyUserId(params)
				if (res.code == 200) {
					if (res.data.length <= 0) {
						uni.showToast({
							icon: 'none',
							title: '当前用户未与销售绑定'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
						return
					}
					this.columns = []
					this.columns.push(res.data.map(item => {
						return `${item.qwUserName}-${item.companyName}`
					}))
					this.userList = res.data
					this.show = true
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}
			},
			async getCourseListByCompanyFun() {
				const res = await getCourseListByCompany()
				if (res.code == 200) {
					this.courseList = res.list
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}
			}
		}
	};
</script>

<style lang="scss">
	.course-list-container {
		padding: 20rpx;

		.wechat-info {
			display: flex;
			align-items: center;
			padding: 20rpx;
			background-color: #ff7f00;
			border-radius: 10rpx;
			color: #fff;

			.wechat-icon {
				width: 80rpx;
				height: 80rpx;
				margin-right: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.wechat-name {
				flex: 1;
			}

			.switch-button {
				width: 40rpx;
				height: 40rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.course-list {
			margin-top: 20rpx;

			.course-item {
				display: flex;
				align-items: center;
				padding: 20rpx;
				background-color: #fff;
				border-radius: 10rpx;
				margin-bottom: 20rpx;

				.course-icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.course-name {
					flex: 1;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.arrow-icon {
					width: 30rpx;
					height: 30rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>