mycajt/pages/index/index.vue

<template>
	<view class="container">
		<!-- 顶部logo and 搜索 start-->
		<view class="status_bar"></view>
		<!-- 背景图片 -->
		<view class="top-bg">
			<!-- <image :style="{ 'background':'#'+ titleNViewBackground }"></image> -->
			<image src="../../static/img/index.png"></image>
		</view>

		<view class="top-search flex">
			<view
				class="search-box flex"
				@click="clickSearch()">
				<image
					class="search"
					src="../../static/sy-img/img8.png"
					mode=""></image>
				<view class="search-font">输入关键词搜索</view>
			</view>
		</view>
		<!-- 顶部logo and 搜索 end-->
		<view
			class="jg"
			style="background-color: #fff"></view>
		<!-- 轮播图 start -->
		<swiper
			class="top-swiper"
			autoplay="true"
			duration="400"
			interval="5000"
			@change="swiperChange">
			<swiper-item
				v-for="(item, index) in processedCarouselList"
				:key="index"
				class="carousel-item"
				@click="bannerNavToUrl(item)">
				<image :src="item.pic" />
			</swiper-item>
		</swiper>
		<!-- 轮播图 end -->
		<!-- 分类 start -->
		<view class="cate-section flex">
			<view
				class="cate-item flex"
				@click="navto('/pages/category/category')">
				<view class="img-wrapper flex">
					<image
						src="../../static/sy-img/img10.png"
						mode=""></image>
				</view>
				<view class="item-title">所有商品</view>
			</view>
			<view
				class="cate-item flex"
				@click="navto('/pages/store/store')">
				<view class="img-wrapper flex">
					<image
						src="../../static/sy-img/img4.png"
						mode=""></image>
				</view>
				<view class="item-title">合作门店</view>
			</view>

			<view
				class="cate-item flex"
				@click="navto('/pages/gift/gift')">
				<view class="img-wrapper flex">
					<image
						src="../../static/sy-img/img11.png"
						mode=""></image>
				</view>
				<view class="item-title">礼包</view>
			</view>
			<view
				class="cate-item flex"
				@click="navto('/pages/shareQrCode/index')">
				<view class="img-wrapper flex">
					<image
						src="../../static/sy-img/yq.png"
						mode=""></image>
				</view>
				<view class="item-title">邀请好友</view>
			</view>
		</view>
		<view class="goodsList">
			<view class="goodsList-title flex">
				<!-- <view class="goodsList-title flex"> -->
				<view class="xian"></view>
				<view class="title">积分兑换商城</view>
				<view class="xian"></view>
				<!-- </view> -->
			</view>
		</view>
		<!-- 普通商品列表start -->
		<view class="goodsList-box flex">
			<view
				class="goodsList-item"
				v-for="(ls, ind) in firstList"
				:key="ind"
				@click="navTo('/pages/product/product?id=' + ls.id)">
				<view class="image-wrapper">
					<image
						class="image"
						:src="ls.image"
						mode="scaleToFill"></image>
				</view>
				<view
					class="list-item"
					style="width: 229rpx; height: 195rpx">
					<view class="title clamp2">
						{{ ls.store_name }}
					</view>
					<view class="little">
						{{ ls.unit_name || "" }}
					</view>
					<view class="hot-price">
						<view
							class="price"
							style="
								font-size: 26rpx;
								color: #ff4c4c;
								font-weight: bold;
								display: flex;
								white-space: nowrap;
							">
							￥{{ ls.price }}+{{ ls.min_integral }}积分
							<image
								class="imgCart"
								src="../../static/sy-img/cart.png"
								mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { uview } from "uview-ui";
	import { loadIndexs, groom } from "@/api/index.js";
	import { getUserInfo, spread } from "@/api/user.js";
	import {
		getBargainList,
		getProducts,
		goodsDetail,
		poster,
	} from "@/api/product.js";
	import { saveUrl, interceptor } from "@/utils/loginUtils";
	import { mapState, mapMutations } from "vuex";
	// #ifdef H5
	import { weixindata, shareLoad } from "@/utils/wxAuthorized";
	// #endif
	export default {
		data() {
			return {
				img: "",
				titleNViewBackground: "",
				text: "", //客服微信
				current: 0,
				swiperHeight: 0,
				checkid: 0,
				titleNViewBackground: "",
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [], //轮播列表
				page: 1,
				limit: 10,
				loadingType: "more",
				firstList: [],
				shareImage: "",
				text1: ["省委副书记亲临实地考察数字"],
				max_integral: "", //最大积分
				min_integral: "", //最小积分
				openid: uni.getStorageSync("openid"),
			};
		},
		computed: {
			...mapState("user", ["hasLogin", "userInfo"]),
		},
		onShareAppMessage(options) {
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			let pages = getCurrentPages(); //获取加载的页面
			let currentPage = pages[pages.length - 1]; //获取当前页面的对象
			let url = currentPage.route; //当前页面url
			let item = currentPage.options; //如果要获取url中所带的参数可以查看options
			let shareObj = {};
			if (this.userInfo.uid) {
				shareObj = {
					title: this.userInfo.nickname + "邀请您加入华中康新堂", // 默认是小程序的名称(可以写slogan等)
					path: url + "?scene=" + this.userInfo.uid, // 默认是当前页面，必须是以‘/’开头的完整路径
					imageUrl: "",
					success: function (res) {
						// 转发成功之后的回调
						if (res.errMsg == "shareAppMessage:ok") {
						}
					},
					fail: function () {
						// 转发失败之后的回调
						if (res.errMsg == "shareAppMessage:fail cancel") {
							// 用户取消转发
						} else if (res.errMsg == "shareAppMessage:fail") {
							// 转发失败，其中 detail message 为详细失败信息
						}
					},
				};
			} else {
				shareObj = {
					title: "华中康新堂", // 默认是小程序的名称(可以写slogan等)
					path: url, // 默认是当前页面，必须是以‘/’开头的完整路径
					imageUrl: "",
					success: function (res) {
						// 转发成功之后的回调
						if (res.errMsg == "shareAppMessage:ok") {
						}
					},
					fail: function () {
						// 转发失败之后的回调
						if (res.errMsg == "shareAppMessage:fail cancel") {
							// 用户取消转发
						} else if (res.errMsg == "shareAppMessage:fail") {
							// 转发失败，其中 detail message 为详细失败信息
						}
					},
				};
			}

			return shareObj;
		},
		onReachBottom() {
			this.getgroom();
		},
		onLoad: function (option) {
			// #ifdef MP
			if (option.scene) {
				// 存储小程序邀请人
				uni.setStorage({
					key: "spread_code",
					data: option.scene,
				});
			}
			// #endif
			// #ifdef H5
			if (option.spread) {
				// 存储小程序邀请人
				uni.setStorage({
					key: "spread",
					data: option.spread,
				});
			}
			// #endif
		},
		onShow: function () {
			this.page = 1;
			this.limit = 10;
			this.loadingType = "more";
			this.firstList = [];
			this.loadData();
			this.getgroom();
			if (this.hasLogin) {
				this.getuser();
			}
		},
		computed: {
			processedCarouselList() {
				return this.carouselList.map(item => {
					// 如果颜色值没有带#前缀，则添加#前缀
					if (!item.color.startsWith("#")) {
						return {
							...item,
							color: `#${item.color}`,
						};
					}
					return item;
				});
			},
		},
		methods: {
			...mapMutations("user", ["setUserInfo"]),
			getuser() {
				getUserInfo({})
					.then(({ data }) => {
						this.setUserInfo(data);
					})
					.catch(e => {
						console.log(e);
					});
			},
			getgroom() {
				const obj = this;
				if (
					obj.loadingType == "nomore" ||
					obj.loadingType == "loading"
				) {
					return;
				}
				obj.loadingType = "loading";
				groom(
					{
						page: this.page,
						limit: this.limit,
					},
					3
				).then(({ data }) => {
					console.log(data, "123456");
					// obj.firstList = obj.firstList.concat(data.list)
					obj.page++;
					if (obj.limit == data.list.length) {
						obj.loadingType = "more";
					} else {
						obj.loadingType = "nomore";
					}
				});
			},
			navto(url, type = 0) {
				if (type == 1) {
					if (!this.hasLogin) {
						// 保存地址
						saveUrl();
						// 登录拦截
						interceptor();
					} else {
						uni.navigateTo({
							url,
							fail() {
								uni.switchTab({
									url,
								});
							},
						});
					}
				} else {
					uni.navigateTo({
						url,
						fail() {
							uni.switchTab({
								url,
							});
						},
					});
				}
			},
			navTo(url) {
				if (url == "") {
					this.$api.msg("暂未开通，敬请期待");
				} else {
					this.navto(url);
				}
			},
			// 點擊搜索框
			clickSearch() {
				uni.navigateTo({
					url: "/pages/product/search",
				});
			},
			// 监听图片加载完成
			onImageError(key, index) {
				this[key][index].image = "/static/error/errorImage.jpg";
			},
			// 请求载入数据
			async loadData() {
				loadIndexs({})
					.then(({ data }) => {
						let goods = data.info;
						console.log(goods, "商品信息");
						this.carouselList = data.banner;
						this.swiperLength = this.carouselList.length;
						this.firstList = data.integral; //首页商品
						uni.stopPullDownRefresh();
					})
					.catch(e => {
						uni.stopPullDownRefresh();
					});
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				// console.log('1111',index);
				this.swiperCurrent = index;
				this.titleNViewBackground = this.carouselList[index].color;
				// console.log(this.titleNViewBackground,'titleNViewBackground');
				this.img = this.carouselList[index].pic;
				console.log(this.img, "img");
			},
			// 轮播图跳转
			bannerNavToUrl(item) {
				// #ifdef H5
				console.log(item.wap_url.indexOf("http"), "banner");
				if (item.wap_url.indexOf("http") >= 0) {
					window.location.href = item.wap_url;
				}
				// #endif
				//测试数据没有写id，用title代替
				uni.navigateTo({
					url: item.wap_url,
				});
			},
			comfirm(text) {
				console.log(text);
				const result = this.uniCopy(text);
				if (result === false) {
					uni.showToast({
						title: "不支持",
					});
				} else {
					uni.showToast({
						title: "复制成功",
						icon: "none",
					});
				}
				this.$refs.popupkf.close();
			},
			uniCopy(content) {
				/**
				 * 小程序端 和 app端的复制逻辑
				 */
				//#ifndef H5
				uni.setClipboardData({
					data: content,
					success: function () {
						console.log("success");
						return true;
					},
				});
				//#endif

				/**
				 * H5端的复制逻辑
				 */
				// #ifdef H5
				if (!document.queryCommandSupported("copy")) {
					//为了兼容有些浏览器 queryCommandSupported 的判断
					// 不支持
					return false;
				}
				let textarea = document.createElement("textarea");
				textarea.value = content;
				textarea.readOnly = "readOnly";
				document.body.appendChild(textarea);
				textarea.select(); // 选择对象
				textarea.setSelectionRange(0, content.length); //核心
				let result = document.execCommand("copy"); // 执行浏览器复制命令
				textarea.remove();
				return result;
				// #endif
			},
			// 打开客服
			openKf() {
				this.$refs.popupkf.open();
			},
			// 关闭客服
			cancel() {
				this.$refs.popupkf.close();
			},
		},
	};
</script>

<style lang="scss">
	page {
		min-height: 100%;
		height: auto;
		background: #ffffff;
	}
	// 背景图片
	.top-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 750rpx;
		height: 346rpx;

		image {
			width: 100%;
			background: linear-gradient(to bottom, #ff0000, #ffffff);
		}
	}

	// 顶部搜索
	.top-search {
		position: relative;
		z-index: 2;
		height: 80rpx;
		padding: 0 20rpx;
		// background-color: #fff;

		.top-logo {
			width: 50rpx;
			// height: 50rpx;
			margin-right: 10rpx;

			image {
				width: 48rpx;
			}
		}

		.search-box {
			justify-content: center;
			width: 698rpx;
			height: 60rpx;
			background: rgba(#ffffff, 0.47);
			box-shadow: 0rpx 9rpx 21rpx 0rpx rgba(4, 114, 69, 0.22);
			border-radius: 30rpx;

			.search {
				width: 34rpx;
				height: 34rpx;
			}

			.search-font {
				margin-left: 14rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
		}
	}

	// 顶部轮播图
	.top-swiper {
		margin: 20rpx auto 0;
		width: 700rpx;
		border-radius: 14rpx;

		image {
			width: 700rpx;
			height: 300rpx;
		}
	}

	.swiper-btm {
		height: 60rpx;
		width: 750rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;

		.btm-item {
			flex-grow: 1;
			justify-content: center;

			image {
				width: 25rpx;
				height: 25rpx;
				margin-right: 14rpx;
			}
		}
	}

	.jg {
		height: 20rpx;
		background: #f8f8f8;
	}

	// 分类
	.cate-section {
		justify-content: space-around;
		background-color: #fff;
		padding: 30rpx 0 30rpx;

		.cate-item {
			flex-grow: 0;
			width: 20%;
			flex-direction: column;
			text-align: center;
			align-items: center;
			justify-content: center;

			.img-wrapper {
				width: 100rpx;
				height: 100rpx;
				border-radius: 20rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}

			.item-title {
				margin-top: 15rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #333333;
			}
		}
	}

	.popup-box {
		width: 522rpx;
		height: 605rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		position: relative;

		.img {
			position: relative;
			top: -56rpx;
			left: 0;
			width: 522rpx;
			height: 132rpx;
			display: flex;
			justify-content: center;

			image {
				border-radius: 20rpx 20rpx 0 0;
				width: 450rpx;
				height: 132rpx;
			}
		}

		.mian {
			margin-top: -44rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			// padding: 32rpx 32rpx;
			background-color: #ffffff;
			border-radius: 0 0 20rpx 20rpx;
			text-align: center;

			.delivery {
				font-size: 40rpx;
				color: #333333;
				display: flex;
				align-items: center;
				flex-direction: column;

				image {
					margin-top: 48rpx;
					width: 172rpx;
					height: 160rpx;
				}
			}

			.nocancel {
				font-size: 32rpx;
				color: #333333;
				margin-top: 14rpx;
			}

			.comfirm-box {
				margin-top: 52rpx;
				display: flex;
				// margin-bottom: 32rpx;

				// justify-content: space-around;
				.cancel {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 197rpx;
					height: 74rpx;
					border: 1px solid #dcc786;
					border-radius: 38rpx;

					font-size: 32rpx;
					color: #605128;
				}

				.comfirm {
					margin-left: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 197rpx;
					height: 74rpx;
					background: linear-gradient(
						-90deg,
						#d1ba77 0%,
						#f7e8ad 100%
					);
					border-radius: 38px;
					font-size: 32rpx;
					color: #605128;
				}
			}
		}
	}

	.jhq {
		margin: 0 auto;
		width: 750rpx;

		image {
			width: 100%;
		}
	}

	.goodsList {
		background: #ffffff;
		padding-top: 41rpx;

		.goodsList-title {
			margin: 0 auto 32rpx;
			justify-content: center;
			// width: 376rpx;
			// height: 34rpx;

			.xian {
				width: 120rpx;
				height: 1rpx;
				background: #999999;
			}
			.title {
				margin: 0 70rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #363636;
			}
		}
	}

	.goodsList-box {
		background: #ffffff;
		padding: 26rpx 20rpx 20rpx;
		flex-wrap: wrap;

		.goodsList-item {
			width: 345rpx;
			background-color: #ffffff;
			border-radius: 12rpx;
			box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.2);
			margin-bottom: 20rpx;

			.image-wrapper {
				width: 345rpx;
				height: 345rpx;
				border-radius: 3px;
				position: relative;

				.image {
					width: 100%;
					height: 100%;
					opacity: 1;
					border-radius: 12rpx 12rpx 0 0;
				}
			}

			.title {
				margin-top: 28rpx;
				padding: 0 20rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-overflow: ellipsis; /* 溢出显示省略号 */
				overflow: hidden; /* 溢出隐藏 */
				white-space: nowrap; /* 强制不换行 */
			}
			.little {
				width: 154rpx;
				height: 25rpx;
				margin-top: 16rpx;
				margin-left: 20rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}

			.imgCart {
				margin-left: 12rpx;
				width: 44rpx;
				height: 44rpx;
			}

			.hot-price {
				margin-top: 50rpx;
				width: 195rpx;
				height: 29rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.price {
					margin-left: 10rpx;
					font-size: 32rpx;
					color: #9c0b18;
					font-weight: 500;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.ot-price {
						margin-right: 7rpx;
						font-size: 26rpx;
						font-weight: 500;
						text-decoration: line-through;
						color: #999999;
					}
				}
			}
		}
	}
</style>