newmyj/pages/user/model/mymodellist.vue

<template>
	<view class="indexBox">
		<view class="hot-list-box">
			<view class="list-box">
				<view class="list" @click="navTo('/pages/user/model/model?mtype=' + item.show_template_id + '&type=3')"
					v-for="(item,index) in navList.orderList">
					<view class="list-image-box">
						<image class="list-image" :src="item.img" mode="widthFix"></image>
					</view>
					<view class="list-content">
						<view class="list-title clamp">
							{{item.title}}
						</view>
						<view v-if="item.is_default==0" class="list-money action" @click.stop="setmodel(item)">
							设为默认
						</view>
						<view v-else class="list-money" @click.stop="setmodel(item)">
							默认模板
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="navList.loadingType"></uni-load-more>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		share
	} from '@/api/wx';
	import {
		userShowTemplateList,
		setShowTemplate
	} from '@/api/model.js';
	export default {
		data() {
			return {
				// 商品列表
				navList: {
					state: 1,
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10, //每次信息条数
					count: 0, //总消息条数
				},
			};
		},
		onLoad: function(option) {
			this.getList();
		},
		// 滚动到底部
		onReachBottom() {
			this.getList();
		},
		methods: {
			// 设为默认
			setmodel(item) {
				const that = this;
				setShowTemplate({
						show_template_id: item.show_template_id
					})
					.then((res) => {
						that.navList.orderList.forEach(item => {
							item.is_default = 0
						})
						item.is_default=1;
						
						uni.showToast({
							title:res.msg
						})
						
					})
					.catch(e => {

					});
			},
			// 获取模板列表
			getList(source) {
				//这里是将订单挂载到tab列表下
				let navItem = this.navList;
				let state = navItem.state;
				if (source === 'tabChange' && navItem.loaded === true) {
					//tab切换只有第一次需要加载数据
					return;
				}
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				if (navItem.loadingType === 'noMore') {
					//防止重复加载
					return;
				}
				// 修改当前对象状态为加载中
				navItem.loadingType = 'loading';
				userShowTemplateList({
						page: navItem.page,
						pageSize: navItem.limit
					})
					.then(({
						data
					}) => {
						let arr = data.list.map(e => {
							return e;
						});
						navItem.orderList = navItem.orderList.concat(arr);
						navItem.page++;
						if (navItem.limit == arr.length) {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							navItem.loadingType = 'more';
							return;
						} else {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							navItem.loadingType = 'noMore';
						}
						uni.hideLoading();
						this.$set(navItem, 'loaded', true);
					})
					.catch(e => {
						console.log(e);
					});

			},
			navTo(url) {
				if (url) {
					if (url.indexOf('http') > -1) {
						// #ifdef H5
						window.location.href = url
						// #endif
						// #ifdef APP
						plus.runtime.openURL(url)
						// #endif
					} else {
						uni.navigateTo({
							url: url
						})
					}
				}
			}
		},
	};
</script>

<style lang="scss">
	page,
	.indexBox {
		height: auto;
		min-height: 100%;
	}

	.hot-list-box {
		padding: $page-row-spacing;
		padding-bottom: 0;

		.list-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: flex-start;
			padding-bottom: 20rpx;

			.list {
				box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
				border-radius: 15rpx;

				.list-image-box {
					width: 330rpx;
					height: 420rpx;
					overflow: hidden;

					.list-image {
						width: 100%;
					}
				}

				.list-content {
					padding: 20rpx;
					line-height: 1;

					.list-title {
						color: $font-color-dark;
						font-size: $font-base;
						margin-bottom: 10rpx;
					}

					.list-money {
						border-radius: 10rpx;
						padding: 20rpx 20rpx;
						background: linear-gradient(to bottom, #ff629f, rgba(255, 98, 159, 0.5));
						text-align: center;
						font-size: $font-lg;
						font-weight: bold;
						color: #FFFFFF;
						&.action{
							background: #FFFFFF;
							color: $font-color-dark;
						}
					}
				}
			}
		}
	}
</style>