hwnc/pages/mall/mall.vue

<template>
	<view :class="[AppTheme]" class="aall_box box">
		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<u-navbar title="在线商城" :titleStyle="{color:'#ffffff'}" :bgColor="primary" :autoBack="false" :fixed="true"
			:placeholder="true" :height="45">
			<view class="u-nav-slot" slot="left"></view>
		</u-navbar>
		<!-- #endif -->
		<swiper v-if="gzList.length > 0" :interval="3000" :current="currentIndex1" :style="wrapper_style1"
			@change="changeSwiper1">
			<swiper-item v-for="(item, index) in gzList" :key="item.id" @click="navtopage(index)">
				<view :id="'contentwrap1' + index" style="width: 100%;">
					<image mode="widthFix" @load="setSwiperHeight('#contentwrap1' + index,1)" :src="item.ad_pic"
						style="width: 100%;"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="application">
			<view v-for="(item, index) in Classification" @click="$until.toUrl(item.url)" :key="index" class="app_to">
				<image class="a-img" :src="item.img" mode=""></image>
				<view class="p">{{item.modularname}}</view>
			</view>
		</view>
		<Ugoods2 ref="goodlist" :datas="{buynow_bg_color:$theme.primary}"></Ugoods2>
		<view class="NewProducts" v-show="gzList">
			<view class="center">
				<view class="line1 bg-primary"></view>
				<p class="subtitle text-primary">好产品上-农场商城</p>
				<view class="line2 bg-primary"></view>
			</view>
			<swiper v-if="gzList.length > 0" :interval="3000" :current="currentIndex2" :style="wrapper_style2"
				@change="changeSwiper2">
				<swiper-item v-for="(item, index) in gzList" :key="item.id" @click="navtopage(index)">
					<view :id="'contentwrap2' + index" style="width: 100%;">
						<image mode="widthFix" @load="setSwiperHeight('#contentwrap2' + index,2)" :src="item.ad_pic"
							style="width: 100%;"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="tag">
				<view class="tag-box text-primary border-primary " @click="$until.toUrl('/pagesE/pages/mall/list')">
					<u-icon name="shopping-cart-fill" :color="primary" size="50"></u-icon>
					<text>产品在线购物</text>
				</view>
				<view class="tag-box text-primary border-primary"
					@click="$until.toUrl('/pagesE/pages/broadcast/broadcast')">
					<u-icon name="camera-fill" :color="primary" size="50"></u-icon>
					<text>农场在线看</text>
				</view>
				<view class="tag-box text-primary border-primary"
					@click="$until.toUrl('/pages/index/adoplist/adoplist')" open-type="switchTab">
					<u-icon name="bag-fill" :color="primary" size="50"></u-icon>
					<text>农场产品认养</text>
				</view>
			</view>
			<view style="height: 20rpx;" />
		</view>
		<admyself :opshow="true"></admyself>
		<tabbar :primary="primary"></tabbar>
		<!-- 分享 -->
		<sharebox ref="sbox" v-if="sharedata" :data="sharedata"></sharebox>
		<view style="height: 120rpx;" />
	</view>
</template>
<!-- 商城 -->
<script>
	import api from '@/api/mall/index.js';
	import api2 from '@/api/home/index.js';
	import homeApi from '@/api/home/index.js';
	import tabbar from '@/components/tabbar/tabbar.vue'
	import Ugoods2 from '@/components/ui-component/U_goods2/m/index.vue';
	export default {
		data() {
			return {
				primary: this.$theme.primary,
				shopList: [],
				settingFile: getApp().globalData.siteinfo,
				list_name: '',
				gzList: [],
				btList: [],
				Classification: [],
				sharedata: null,
				styles: {},
				currentIndex1: 0,
				currentIndex2: 0,
				swiperHeight1: 0,
				swiperHeight2: 0
			};
		},

		components: {
			tabbar,
			Ugoods2
		},
		computed: {
			/** 样式 */
			wrapper_style1() {
				const {
					swiperHeight,
				} = {
					swiperHeight: this.swiperHeight1
				};
				return `
					height:${swiperHeight}px;
				`;
			},
			/** 样式 */
			wrapper_style2() {
				const {
					swiperHeight,
				} = {
					swiperHeight: this.swiperHeight2
				};
				return `
					height:${swiperHeight}px;
				`;
			}
		},
		onPullDownRefresh() {
			let that = this
			that.shop();
			that.advertisement()
			that.$refs.goodlist.toBottom(1)
		},
		onReachBottom() {
			let that = this
			that.$refs.goodlist.toBottom()
		},
		onLoad(options) {
			let that = this;
			that.$bindid.getbindid(options, that.$store);
			that.shop();
			that.advertisement()
			that.$init_config(2, function(res) {
				if (that.$config) {
					that.sharedata = that.$config.sharedata
				}
			})
		},
		onShareAppMessage(res) {
			let that = this
			let data = {
				title: that.sharedata.title,
				imageUrl: that.sharedata.imageUrl,
				path: that.sharedata.path
			};
			return data;
		},
		onShareTimeline(res) {
			let that = this
			return {
				title: that.sharedata.title,
				imageUrl: that.sharedata.imageUrl,
				path: that.sharedata.path
			}
		},
		onShow: function() {
			let that = this;
			that.$init_config();
			if (that.primary == '' || that.primary != that.$theme.primary) {
				that.primary = that.$theme.primary;
			}
			this.shop();
		},
		methods: {
			shop() {
				api.shop().then(res => {
					if (res.status == 200) {
						this.shopList = res.data;
						this.list_name = res.data.shop.list_name
						this.Classification = res.data.modular1
					} else {
						this.$api.msg(res.msg);
					}
				});
			},
			//手动切换题目
			changeSwiper1(e) {
				let that = this;
				that.currentIndex1 = e.detail.current;
				//动态设置swiper的高度，使用nextTick延时设置
				that.$nextTick(() => {
					that.setSwiperHeight("#content-wrap1" + that.currentIndex1, 1);
				});
			},
			//手动切换题目
			changeSwiper2(e) {
				let that = this;
				that.currentIndex2 = e.detail.current;
				//动态设置swiper的高度，使用nextTick延时设置
				that.$nextTick(() => {
					that.setSwiperHeight("#content-wrap2" + that.currentIndex2, 2);
				});
			},
			//动态设置swiper的高度
			setSwiperHeight(element, type) {
				let query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.exec((res) => {
					if (res && res[0]) {
						if (type == 1) {
							if (this.swiperHeight1 < res[0].height) {
								this.swiperHeight1 = res[0].height;
							}
						} else if (type == 2) {
							if (this.swiperHeight2 < res[0].height) {
								this.swiperHeight2 = res[0].height;
							}

						}
					}
				});
			},
			advertisement() {
				api.advertisement().then(res => {
					var list = res.data.filter(item => item.pid == 6);
					if (list.length) {
						this.gzList = list;
					} else {
						this.gzList = 0;
					}
					this.btList = this.gzList;
				})
			},
			navtopage(index) {
				homeApi.navtopage(this.gzList[index]);
			},
			navToDetailPage(id) {
				uni.navigateTo({
					url: `/pagesD/pages/product/product?id=${id}`
				});
			}
		}
	};
</script>

<style lang="scss">
	$color-fff: #fff;

	@mixin lineH($index) {
		height: $index;
		line-height: $index;
	}

	.tltile {
		font-size: 12px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.box {
		.carousel-item {
			width: 100%;

			image {
				width: 100% !important;
				height: 100% !important;
			}

			.s-img {
				width: 100%;
				height: 100%;
			}

			.swiper-dots {
				left: 45rpx;
				bottom: 40rpx;
			}
		}

		.application {
			background-color: #fff;
			display: flex;
			padding: 15rpx 20rpx 15rpx 20rpx;
			justify-content: space-around;
			align-items: center;

			.a-img {
				width: 90rpx;
				height: 90rpx;
			}

			.app_to {
				.p {
					margin: 0;
					padding-bottom: 10rpx;
					text-align: center;
					color: #383838;
					font-size: 24rpx;
				}
			}
		}

		.NewProducts {
			background-color: $color-fff;
			margin-top: 20rpx;

			.content {

				width: 100%;
				padding: 20rpx;
				box-sizing: border-box;
				min-height: 500rpx;

				.content_box {
					// border: 1rpx solid #efefef;
					box-shadow: $box-shadow;
					border-radius: 15rpx;
					width: 345rpx;
					padding-bottom: 10rpx;
					display: inline-block;

					&:nth-child(2n-1) {
						margin-bottom: 20rpx;
						margin-right: 20rpx;
					}

					.new-img {
						width: 100%;
						height: 355rpx;
					}

					.message {
						box-sizing: border-box;
						padding: 10rpx;

						.message_bot {
							height: 84rpx;
							margin-top: 20rpx;
							border-top: 0.5rpx solid #efefef;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.f_left {
								margin-top: 10rpx;
								font-size: 24rpx;

								.color_org {
									margin-top: 10rpx;
								}

								.old_price {
									color: #999;
									margin-top: 10rpx;
									text-decoration: line-through;
								}
							}

							.f_right {
								width: 56rpx;
								height: 56rpx;
								margin-right: 10rpx;
							}
						}
					}
				}
			}

			.center {
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin: 7.5rpx 0;
				line-height: 45px;

				.subtitle {
					// width: 180rpx;
					text-align: center;
					font-weight: 700;
				}

				.line1,
				.line2 {
					height: 2rpx;
					width: 30%;
				}
			}

			.tag {
				display: flex;
				justify-content: space-around;
				margin-top: 20rpx;

				.tag-box {
					width: 200rpx;
					height: 140rpx;
					border-width: 1rpx;
					border-style: solid;
					border-radius: 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					font-size: 24rpx;

					.tag-img {
						width: 60rpx;
						height: 60rpx;
					}
				}
			}
		}


		.stats_enabled {
			// height: 200rpx !important;
		}
	}
</style>