businessCard/xiaochengxu/pages/mySet/cardType.vue

<template>
	<view class="content">
		<u-loading-page loading-mode='spinner' image="/static/imgs/logo.png" iconSize='60' :loading='loading'></u-loading-page>
		<view v-show='!loading' class="content1">
			<view v-for='item in cardTypeList'>
				<view class='flex row flex-between'>
					<view class="left flex">
						<view class="f-text flex flex-all-center">{{item.circleName[0]}}</view>
						<view class="text">{{item.circleName}}</view>
					</view>
					<view class="right">
						<image src="../../static/imgs/mySet/del.png" class="img" mode="widthFix"
							v-if='item.circleName!="默认分类"' @click="del(item)"></image>
						<image src="../../static/imgs/mySet/zd.png" class="img" mode="widthFix" @click="stick(item)">
						</image>
					</view>
				</view>
			</view>
		</view>
		<u-modal showCancelButton='true' @confirm='$u.debounce(confirm, 500)' @cancel='show=false' :show="show"
			title="新增分类" confirmColor="#112253">
			<view class="slot-content">
				<u--input v-model="cardTypeData.circleName" placeholder="输入分类名称，2-8个字符" border="none"></u--input>
			</view>
		</u-modal>

		<view @click='add' class='button'>新增</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	var that;
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				show: false,
				cardTypeList: [],
				cardTypeData: {},
				userInfo: {},
				canReset: false,
				loading:true,
			};
		},
		onLoad() {
			that = this
		},
		onShow() {
			this.userInfo = uni.getStorageSync("userInfo")
			this.cardTypeData.commonId = uni.getStorageSync("userInfo").id
			this.getList()
		},
		methods: {
			getList() {
				uni.showLoading({
					title: '数据加载中'
				})
				this.$request.baseRequest('admin.unimall.cardClassifyInfo', 'list', {
					commonId: uni.getStorageSync("userInfo").id
				}, failres => {
					console.log('res+++++', failres.errmsg)
					this.$refs.uToast.show({
						type: 'error',
						message: failres.errmsg,
					})
					uni.hideLoading()
				}).then(res => {
					// this.cardTypeList = res.data.items
					uni.hideLoading()
					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
						// })
						// if (itemIndex != -1) {
						// 	var data = res.data.items.splice(itemIndex, 1)
						// 	res.data.items = data.concat(res.data.items)
							
						// } else {
						// 	res.data.items = [].concat(res.data.items)
						// }
						this.cardTypeList = res.data.items
					} else {
						this.cardTypeList = []
					}
					setTimeout(()=>{
						that.loading=false
					},1000)
				})
			},
			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.hideLoading()
					this.$refs.uToast.show({
						type: 'success',
						message: '删除成功!',
						complete() {
							that.getList()
						}
					})
				})
			},
			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
						})
					}
				} 
				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.hideLoading()
					this.$refs.uToast.show({
						type: 'success',
						message: '置顶成功!',
						complete() {
							that.getList()
						}
					})
				})
			},

			add() {
				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)
					this.$refs.uToast.show({
						type: 'error',
						message: failres.errmsg,
					})
					uni.hideLoading()
				}).then(res => {
					uni.hideLoading()
					this.show = false
					this.cardTypeData = {
						commonId: uni.getStorageSync("userInfo").id,
					}
					this.$refs.uToast.show({
						type: 'success',
						message: '操作成功',
						complete() {
							that.getList()
						}

					})
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.content1 {
		.row {
			margin: 20rpx 20rpx 0 20rpx;
			background-color: #fff;
			padding: 20rpx;
			border-radius: 20rpx;

			.f-text {
				width: 58rpx;
				height: 58rpx;
				background-color: #112253;
				border-radius: 50%;
				color: #fff;
				margin-right: 20rpx;
				font-size: 32rpx;
			}

			.img {
				width: 48rpx;
				height: auto;
				margin-left: 20rpx;
			}
		}
	}

	.button {
		position: fixed;
		bottom: 108rpx;
		width: calc(100% - 40rpx);
		padding: 24rpx 0;
		color: #fff;
		background-color: #112253;
		text-align: center;
		margin: 0 20rpx;
		border-radius: 20rpx;
	}
	.slot-content{
		width:100%;
	}
</style>