newmyj/pages/index/index.vue

<template>
	<view class="indexBox">
		<view class="topSearchBox" @click="navTo('./search')">
			<view class="search flex">
				<text>搜索附近的服务人员</text><uni-icons type="search" size="30rpx" color="#FFFFFF"></uni-icons>
			</view>
		</view>
		<swiper class="top-swiper" autoplay="true" duration="400" interval="5000" @change="swiperChange">
			<swiper-item :key='ind' v-for="(item,ind) in imagelist" class="carousel-item" @click="openXcx(item.url)">
				<image class="imageitem" :src="item.img" />
			</swiper-item>
		</swiper>
		<view v-if="textList.length>0" class="padding-t-30">
			<uni-notice-bar @click="navTo(textList[0].url)" show-icon scrollable :text="textList[0].title" />
		</view>
		<view class="hot-list-box">
			<view class="title-box flex">
				<view class="flex">
					<image class="hot margin-r-10" src="../../static/icon/hot.png" mode="scaleToFill"></image>
					<view class="title">
						热门名片
					</view>
				</view>
				<view class="right flex" @click="navTo('/pages/user/model/modelList?ishot=1')">
					<text class="margin-r-10">
						更多
					</text>
					<image src="../../static/icon/next1.png" mode="scaleToFill" class="tip"></image>
				</view>
			</view>
			<view class="hot-list">
				<view class="item" :key='ind' v-for="(item,ind) in rmList"
					@click="navTo('/pages/user/model/model?mtype=' + item.id+'&type=0')">
					<view class="hot-image-box">
						<image class="hot-image" :src="item.img" mode="widthFix"></image>
					</view>
					<view class="hot-title clamp">
						{{item.title}}
					</view>
					<!-- #ifdef MP -->
					<view class="hot-money flex clamp" v-if="systeam!='ios'">
						<text class="money">
							￥{{item.price}}
						</text>
						<text class="oldmoney">
							{{item.old_price}}
						</text>
					</view>
					<!-- #endif -->
					<!-- #ifndef MP -->
					<view class="hot-money flex clamp">
						<text class="money">
							￥{{item.price}}
						</text>
						<text class="oldmoney">
							{{item.old_price}}
						</text>
					</view>
					<!-- #endif -->
				</view>
			</view>
			<view class="flex">
				<view class="banner" @click="navTo('/pages/public/video')">
					<image v-if="baseURL" :src="baseURL+'/static/img/indexLeft.png'" mode="widthFix"></image>
				</view>
				<view class="banner" @click="navTo('/pages/user/model/phb')">
					<image v-if="baseURL" :src="baseURL+'/static/img/indexRight.png'" mode="widthFix"></image>
				</view>
			</view>

			<view class="title-box flex padding-b-30" v-if="jxList.length > 0">
				<view class="flex">
					<image class="hot margin-r-10" src="../../static/icon/hot.png" mode="scaleToFill"></image>
					<view class="title">
						精选名片推荐
					</view>
				</view>
				<!-- <navigator url="/pages/index/listModel?type=1">
					<view class="right flex">
						<text class="margin-r-10">
							更多
						</text>
						<image src="../../static/icon/next1.png" mode="scaleToFill" class="tip"></image>
					</view>
				</navigator> -->
			</view>
			<cmy-mys-list :list='jxList'></cmy-mys-list>
			<view class="title-box flex padding-t-30 padding-b-30">
				<view class="flex">
					<image class="hot margin-r-10" src="../../static/icon/hot.png" mode="scaleToFill"></image>
					<view class="title">
						最新名片推荐
					</view>
				</view>
				<!-- <navigator url="/pages/index/listModel?type=2">
					<view class="right flex">
						<text class="margin-r-10">
							更多
						</text>
						<image src="../../static/icon/next1.png" mode="scaleToFill" class="tip"></image>
					</view>
				</navigator> -->
			</view>
			<cmy-mys-list :list='zxList'></cmy-mys-list>
		</view>
		<view class="footer">
			仅显示50条
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		share
	} from '@/api/wx';
	import {
		getBannerList,
		getShowTemplateList
	} from '@/api/model.js';
	import {
		getWorkerList,
		getGoodWorkerList,
		getNewWorkerList
	} from '@/api/index.js'
	export default {
		data() {
			return {
				// 通知列表
				textList: [],
				//轮播图
				imagelist: [],
				// 推荐商品
				navList: {
					state: 1,
					text: '通知',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10, //每次信息条数
					count: 0, //总消息条数
				},
				// 热门商品
				rmList: [],
				jxList: [], //精选列表
				zxList: [],
			};
		},
		computed: {
			...mapState('user', ['userInfo']),
			// #ifdef MP
			...mapState(['systeam', 'baseURL']),
			// #endif
		},
		onLoad: function(option) {
			const that = this;
			if (option.spread) {
				// 存储其他邀请人
				uni.setStorageSync('spread', option.spread);
			}
			// #ifdef MP
			if (option.scene) {
				// 存储小程序邀请人
				uni.setStorage({
					key: 'spread_code',
					data: option.scene
				});
			}
			// #endif
			// 加载分享信息
			this.share()
		},
		onShow() {
			this.loadIndexs();
			this.getWorkerList()
			this.getNewWorkerList();
		},
		// #ifdef MP
		onShareAppMessage(options) {
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			let pages = getCurrentPages(); //获取加载的页面
			let currentPage = pages[pages.length - 1]; //获取当前页面的对象
			let url = currentPage.route; //当前页面url
			let item = currentPage.options; //如果要获取url中所带的参数可以查看options
			let shareObj = {
				title: this.shareData.title, // 默认是小程序的名称(可以写slogan等)
				path: this.shareData.query, // 默认是当前页面，必须是以‘/’开头的完整路径
				// imageUrl: this.shareData.img,
				desc: this.shareData.content,
				success: function(res) {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {}
				},
				fail: function() {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				}
			};
			// 判断是否可以邀请
			if (this.userInfo.uid) {
				shareObj.path += '&spread=' + this.userInfo.uid;
			}
			return shareObj;
		},
		// #endif
		methods: {
			// 打开小程序
			openXcx(url) {
				// #ifdef MP
				wx.navigateToMiniProgram({
					appId: "wx3fa16889ff680ac8",
					path: url,
				})
				// #endif
			},
			getWorkerList() {
				try {
					getGoodWorkerList({
						page: 1,
						pageSize: 50,
					}).then(res => {
						let arr = []
						res.data.list.forEach(item => {
							let cc = false
							arr.forEach(itemt => {
								if (itemt.uid == item.uid) {
									cc = true
								}
							})
							if (!cc) {
								arr.push(item)
							}
						})
						this.jxList = arr
					})
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
			// 最新名片
			getNewWorkerList() {
				try {
					getNewWorkerList({
						page: 1,
						pageSize: 50,
					}).then(res => {
						let arr = []
						res.data.list.forEach(item => {
							let cc = false
							arr.forEach(itemt => {
								if (itemt.uid == item.uid) {
									cc = true
								}
							})
							if (!cc) {
								arr.push(item)
							}
						})
						this.zxList = arr
					})
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}

			},
			swiperChange() {

			},
			share() {
				const that = this;
				// 请求获取默认数据
				share({}).then(({
					data
				}) => {
					that.shareData = data.data
				});
			},

			// 首页初始化
			loadIndexs() {
				const that = this;
				// 轮播图
				getBannerList().then(
					(res) => {
						that.imagelist = res.data.list
					}
				).catch(
					(res) => {
						console.log(res);
					}
				)
				// 获取广告
				getBannerList({
					page_id: 71
				}).then(
					(res) => {
						that.textList = res.data.list
					}
				).catch(
					(res) => {
						console.log(res);
					}
				)
				// 获取热门
				getShowTemplateList({
					is_hot: 1,
					pageSize: 3
				}).then(
					(res) => {
						that.rmList = res.data.list.map((res) => {
							res.price = +res.price
							res.old_price = +res.old_price
							return res
						})
					}
				).catch(
					(res) => {
						console.log(res);
					}
				)
			},
			// 获取模板列表
			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">
	.indexBox {
		height: auto;
		min-height: 100%;
	}

	// .app-status {
	// 	height: var(--status-bar-height);
	// 	background-color: #ff629f;
	// }

	.top-swiper {
		margin: auto;
		width: 750rpx;
		height: 273rpx;
		padding: 0 $page-row-spacing;
		background: linear-gradient(to bottom, #ff629f, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 1));

		.carousel-item {
			border-radius: 20rpx;

			.imageitem {
				// margin: auto;
				width: 690rpx;
				height: 273rpx;
			}
		}
	}

	.hot-list-box {
		padding: $page-row-spacing;
		background-color: #FFFFFF;
		padding-bottom: 0;

		.title-box {
			line-height: 1;

			.hot {
				width: 36rpx;
				height: 36rpx;

			}

			.title {
				font-size: $font-lg;
				font-weight: bold;
			}

			.right {
				font-size: $font-sm;
				color: #999999;

				.tip {
					width: 15rpx;
					height: 25rpx;
				}
			}
		}

		.hot-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: flex-start;
			padding-top: 30rpx;
			padding-bottom: 15rpx;

			.item-none {
				width: 220rpx;
			}

			.item {
				padding: 13rpx;
				width: 220rpx;
				border-radius: 10rpx;
				border: 2px solid #F65486;
				margin-bottom: 16rpx;
				line-height: 1;

				.hot-title {
					color: $font-color-dark;
					font-size: $font-base;
					padding: 10rpx 0;
				}

				.hot-image-box {
					width: 194rpx;
					height: 228rpx;
					overflow: hidden;

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

				.hot-money {
					.money {
						font: $font-lg;
						color: #FF3342;
					}

					.oldmoney {
						color: #969696;
						font-size: $font-sm;
						text-decoration: line-through;
					}
				}
			}
		}

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

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

				.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: 20rpx;
					}

					.list-money {
						.money {
							font: $font-lg;
							color: #FF3342;
						}
					}
				}
			}
		}
	}

	.sy-top {
		position: relative;
		height: 100rpx;
		width: 100%;

		image {
			width: 374rpx;
			height: 30rpx;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
		}

		.top-tit {
			font-size: 32rpx;
			font-weight: bold;
			color: #FF478B;
			text-align: center;
			line-height: 100rpx;
		}

	}

	.bd-btm-item {
		border-top: #f2f2f2 1px solid;
		flex-direction: column;
		width: 330rpx;
		height: 520rpx;

		&:first-of-type {
			border-top: none;
		}

		margin-bottom: 20rpx;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(46, 46, 49, 0.06);
		border-radius: 20rpx;

		.item-info {
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			width: 100%;
			height: 100%;
			padding-left: 20rpx;
			padding-top: 20rpx;

			.item-name {
				font-size: 31rpx;
				font-weight: bold;
				color: #333333;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				image {
					width: 100rpx;
					height: 30rpx;
					margin-left: 10rpx;
				}
			}

			.item-zy {
				padding: 6rpx 20rpx;
				background: #fee7e4;
				border-radius: 5rpx;
				font-size: 22rpx;
				font-weight: 500;
				color: #F86859;
				margin: 16rpx 0 20rpx;
			}

			.item-vist,
			.item-where {
				font-weight: 500;
				color: #969696;
			}

			.item-vist {
				font-size: 22rpx;
				justify-items: flex-end;
			}

			.item-where {
				font-size: 24rpx;
			}
		}

		.item-img {
			flex-shrink: 0;
			width: 330rpx;
			height: 330rpx;
			background-color: #eee;
		}

	}

	.jg {
		height: 20rpx;
	}

	.banner {
		image {
			width: 348rpx;
			margin: auto;
		}

		padding: 20rpx 0;
	}

	.footer {
		text-align: center;
		color: $font-color-light;
		margin-top: 30rpx;
	}
	.topSearchBox{
		background-color: #ff629f;
		padding: 0 30rpx 20rpx;
		line-height: 1;
		.search{
			color: #FFF;
			font-size: 28rpx;
			padding: 20rpx 30rpx;
			border-radius: 100rpx;
			background-color: rgba(0, 0, 0, 0.1);
		}
	}
</style>