businessCard/xiaochengxu/pages/mySet/cardType.vue

<template>
	<view>
		<mescroll-body  ref="mescrollRef" @init="mescrollInit" @up="upCallback" @down="downCallback">
			<u-list @scrolltolower="scrolltolower">
				<u-list-item  v-for='item in cardTypeList'>
					<view class='flex'>
						{{item.name}}
					{{item.circleName}}
						<u-icon v-if='item.circleName!="默认分类"' @click="del(item)" name="trash-fill" color="#2979ff" size="28"></u-icon>
						<u-icon @click="stick(item)" name="pushpin" color="#2979ff" size="28"></u-icon>
					</view>
				</u-list-item>
			</u-list>
		</mescroll-body>
		<u-modal showCancelButton='true'
				@confirm='$u.debounce(confirm, 500)'
				@cancel='show=false' :show="show" title="新增分类" >
			<view class="slot-content">
				<u--input
				v-model="cardTypeData.circleName"
				placeholder="输入分类名称，2-8个字符"
				border="none"
				
				></u--input>
			</view>
		</u-modal>

		<view class="footer">
			<view @click='add' class='button'>新增</view>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				show:false,
				page:1,
				limit:20,
				cardTypeList:[],
				cardTypeData:{},
				userInfo:{},
				canReset:false,
				
			};
		},
		onLoad() {
			
				// this.getList()
		},
		onShow() {
			this.userInfo = uni.getStorageSync("userInfo")
			this.cardTypeData.commonId=uni.getStorageSync("userInfo").id
			this.$nextTick(function() {
				this.canReset && this.mescroll.resetUpScroll() // 重置列表数据为第一页  
				this.canReset && this.mescroll.scrollTo(0, 0) // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题  
				this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
			});
		},
		methods: {
			mescrollInit(){
				
			},
			downCallback(){
				var that = this
				this.$nextTick(() => {
				// mescroll.endSuccess(data.result);
				that.mescroll.resetUpScroll()
				});
				
			},
			upCallback(page){
				var that = this
				uni.showLoading({
						title: '数据加载中'
					})
				this.$request.baseRequest('admin.unimall.cardClassifyInfo', 'list',{
					page:page.num,
					limit:page.size,
					commonId:uni.getStorageSync("userInfo").id
				}, failres => {
					console.log('res+++++', failres.errmsg)
					this.$refs.uToast.show({
						type: 'error',
						message: failres.errmsg,
					})
					uni.hideLoading()
				}).then(res => {
					console.log(res)
					if(page.num == 1) this.cardTypeList = [];
					let curPageLen = res.data.items.length;
					let totalPage = res.data.total;
					if(res.data.items.length>0){
						for(var i=0;i<res.data.items.length;i++){
						res.data.items[i].name=res.data.items[i].circleName[0]
						}
						var itemIndex=res.data.items.findIndex((item)=>{return item.topMarking==1})
						// console.log(itemIndex)
						if(itemIndex!=-1){
							var data=res.data.items.splice(itemIndex,1)
							if(page.num==1){
								data.push({circleName:'默认分类',name:'默'})	
							}
							// console.log(data.concat(res.data.items))
							res.data.items=data.concat(res.data.items)
						}else{
							if(page.num==1){
								res.data.items=[{circleName:'默认分类',name:'默'}].concat(res.data.items)	
							}
						}
						this.cardTypeList=this.cardTypeList.concat(res.data.items)
					}else{
						if(page.num==1){
							this.cardTypeList=[{circleName:'默认分类',name:'默'}]
						 }
					}
					
					
					this.$nextTick(() => {
						console.log(that)
					// mescroll.endSuccess(data.result);
					that.mescroll.endBySize(curPageLen, totalPage)
					});
					
					// if (res.errno == 200) {
					uni.hideLoading()
					
					// }
				})
			},
			del(item){
				uni.showLoading({
					title: '加载中',
					mask:true
				})
				this.$request.baseRequest('admin.unimall.cardClassifyInfo', 'delete',{
					commonId:uni.getStorageSync("userInfo").id,
					id:item.id
				}, failres => {
					console.log('res+++++', failres.errmsg)
					uni.showToast({
					    title: failres.errmsg,
					    icon: 'none',
					    duration: 2000
					})
					uni.hideLoading()
				}).then(res => {
					uni.showToast({
					    title: '删除成功',
					    icon: 'none',
					    duration: 2000
					})
					uni.hideLoading()
					this.mescroll.resetUpScroll( )
				})
			},
			stick(item){
				uni.showLoading({
					title: '加载中',
					mask:true
				})
				var type='',type1='',data={}
				if(item.id){
					type='admin.unimall.cardClassifyInfo'
					type1='top'
					data={
						cardClassifyInfo:JSON.stringify({id:item.id})
					}
				}else{
					type='admin.unimall.cardClassifyInfo'
					type1='topDefault'
					data={
						cardClassifyInfo:JSON.stringify({commonId:this.cardTypeData.commonId})
					}
				}
				this.$request.baseRequest(type, type1,data, failres => {
					console.log('res+++++', failres.errmsg)
					uni.showToast({
					    title: failres.errmsg,
					    icon: 'none',
					    duration: 2000
					})
					uni.hideLoading()
				}).then(res => {
					uni.showToast({
					    title: '置顶成功',
					    icon: 'none',
					    duration: 2000
					})
					uni.hideLoading()
					this.mescroll.resetUpScroll( )
				})
			},
			
			add(){
				// if(){
					
				// }
				this.show=true
			},
			confirm(){
				if(!this.cardTypeData.circleName){
					uni.showToast({
					    title: '分类名称不能为空！',
					    icon: 'none',
					    duration: 2000
					})
					return
				}
				if(this.cardTypeData.circleName<2||this.cardTypeData.circleName>8){
					uni.showToast({
					    title: '类别名称2-8个字！',
					    icon: 'none',
					    duration: 2000
					})
					return
				}
				this.$request.baseRequest('admin.unimall.cardClassifyInfo', 'add',{
						cardClassifyInfo:JSON.stringify(this.cardTypeData)
					}, failres => {
					console.log('res+++++', failres.errmsg)
					uni.showToast({
					    title: failres.errmsg,
					    icon: 'none',
					    duration: 2000
					})
					uni.hideLoading()
				}).then(res => {
					console.log(res)
					// if (res.errno == 200) {
					uni.hideLoading()
					this.show=false
					this.cardTypeData={
						commonId:uni.getStorageSync("userInfo").id,
					}
					this.mescroll.resetUpScroll( )
					// }
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>