assess-app/common/task/task_ima_tab.vue

<template>
	<view class="m-lr20 r-20">
		<k-tabs-swiper class="r-20" v-model="current" :tabs="navList" :field="'name'" bgColor="#fff" color="#444444"
			activeColor="#10B261" fontSize="28rpx" :bold="true" :scroll="true" height="100rpx" lineHeight="10rpx"
			@change="changeTab" paddingItem="0 50rpx">
		</k-tabs-swiper>
	</view>
</template>

<script>
	import {
		getTaskType
	} from "@/api/task";

	export default {
		name: 'task-ima-tab',
		props: {
			listType: {
				default: 0
			},
			numType: {
				default: 0
			}
		},
		data() {
			return {
				current: 0,

				navList: [{
					id: 0,
					name: '全部',
					product_name: '全部',
					icon: 'https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/task/task-all.png',
					num: 0
				}],
				typeList: [{
						id: 2,
						name: '垫资还款',
						icon: 'https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/task/task-refund.png'
					},
					{
						id: 1,
						name: '房抵业务',
						icon: 'https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/task/task-loan.png'
					},
					{
						id: 3,
						name: '消费金融',
						icon: 'https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/task/task-financial.png'
					},
					{
						id: 4,
						name: '其他服务',
						icon: 'https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/task/task-else.png'
					}
				]
			}
		},
		watch: {

		},
		mounted() {
			if (this.listType === 1) {
				this.navList = this.typeList
			} else {
				this.getTaskType()
			}

		},
		methods: {
			getTaskType() {
				getTaskType({
					'numType': this.numType,
					'listType': this.listType
				}).then(res => {
					if (res.code === 1) {
            this.navList[0].num=0
						res.data.forEach(item => {
							this.navList[0].num += item.num
							if (this.numType > 0) {
								item.name = item.product_name + '(' + item.num + ')'
								this.navList[0].name = this.navList[0].product_name + '(' + this.navList[0]
									.num + ')'
							} else {
								item.name = item.product_name
							}
							this.navList.push(item)
						})
					}
				})
			},

			changeTab(current) {
				this.$emit('setProductId', this.navList[current].id)
			},
		}
	}
</script>

<style lang="scss" scoped>

</style>