end

pages/index/index.vue

@@ -20,33 +20,33 @@
 		</swiper>
 		<!-- 轮播图 end -->
 		<!-- 积分 -->
-		
-			<view class="common-wrap" v-if="list.length > 0">
-				<view class="tit">
-					<view class="cate">
-						特惠折扣 <text>限量抢购</text>
-					</view>
-					<view class="more" @click="navto('/pages/index/yuyue?state=1')">
-						查看更多<image src="../../static/index/in-go.png" mode=""></image>
-					</view>
+
+		<view class="common-wrap" v-if="list.length > 0">
+			<view class="tit">
+				<view class="cate">
+					特惠折扣 <text>限量抢购</text>
 				</view>
-				<view class="goods-wrap flex-start">
-					<view class="goods" v-for="good in list"
-						@click="navto('/pages/product/product?id=' + good.id)">
-						<image :src="good.image" mode="" class="goods-img"></image>
-						<view class="goods-tit clamp">
-							{{good.store_name}}
-						</view>
-						<view class="goods-price" >
-							<text class="new-price">
-								<text class="rmb">￥</text>{{good.price*1}}
-							</text>
-						</view>
+				<view class="more" @click="navto('/pages/index/yuyue?state=1')">
+					查看更多<image src="../../static/index/in-go.png" mode=""></image>
+				</view>
+			</view>
+			<view class="goods-wrap flex-start">
+				<view class="goods" v-for="good in list" @click="navto('/pages/product/product?id=' + good.id)">
+					<image :src="good.image" mode="" class="goods-img"></image>
+					<view class="goods-tit clamp2">
+						{{good.store_name}}
+					</view>
+					<view class="goods-price">
+						<text class="new-price">
+							<text class="rmb">￥</text>{{good.price*1}}
+						</text>
 					</view>
 				</view>
 			</view>
+		</view>
 		<view class="in-banner">
-			<image v-for="item in inBanner" :src="'../../static/img/in-b'+item.state + '.png'" mode="widthFix" @click="navto('/pages/index/yuyue?state=' + item.state)"></image>
+			<image v-for="item in inBanner" :src="'../../static/img/in-b'+item.state + '.png'" mode="widthFix"
+				@click="navto('/pages/index/yuyue?state=' + item.state)"></image>
 		</view>
 		<view class="in-btm">
 			<image src="../../static/img/in-ed.png" mode=""></image>
@@ -89,11 +89,11 @@
 					// 	tit: '洗衣'
 					// },
 					{
-						state:2,
+						state: 2,
 						tit: '家政'
 					},
 					{
-						state:3,
+						state: 3,
 						tit: '维修'
 					}
 				],
@@ -210,27 +210,27 @@
 		onHide() {},
 		methods: {
 			swiperChange() {
-				
+
 			},
 			showW() {
 				// if(this.cateList.length > 4 && )
-				if(this.cateList.length < 4) {
+				if (this.cateList.length < 4) {
 					return '33.3%'
-				}else if(this.cateList.length >=4 && this.cateList.length % 4 == 0 ) {
+				} else if (this.cateList.length >= 4 && this.cateList.length % 4 == 0) {
 					console.log('zhe25')
 					return '25%'
-				}else {
+				} else {
 					console.log('zhe20')
 					return '20%'
 				}
 			},
 			getProducts() {
 				getProducts({
-					is_housekeeping:0,
-					is_maintenance:0
+					is_housekeeping: 0,
+					is_maintenance: 0
 				}).then(res => {
 					this.list = res.data
-					console.log(this.cunList,'cunList')
+					console.log(this.cunList, 'cunList')
 				})
 				//
 				getProducts({
@@ -318,20 +318,20 @@
 						})
 					}
 				} else {
-					
+
 					// #ifdef MP-WEIXIN
 					// if(url)
-					if(url.charAt(0)=='#') {
+					if (url.charAt(0) == '#') {
 						return wx.navigateToMiniProgram({
-							    shortLink:url,
-							    //develop开发版；trial体验版；release正式版
-							    envVersion: 'release', 
-							    success(res) {
-							      // 打开成功
-							      console.log("跳转小程序成功！",res);
-							    } 
-							})
-					}else {
+							shortLink: url,
+							//develop开发版；trial体验版；release正式版
+							envVersion: 'release',
+							success(res) {
+								// 打开成功
+								console.log("跳转小程序成功！", res);
+							}
+						})
+					} else {
 						uni.navigateTo({
 							url,
 							fail() {
@@ -873,10 +873,12 @@
 				padding-left: 10rpx;
 				position: relative;
 				z-index: 2;
+
 				text {
 					font-size: 24rpx;
 					padding-left: 10rpx;
 				}
+
 				&::before {
 					z-index: 1;
 					content: '';
@@ -924,6 +926,7 @@
 				}
 
 				.goods-tit {
+					height: 100rpx;
 					font-size: 26rpx;
 					font-weight: 500;
 					padding: 15rpx 0 8rpx;
@@ -965,19 +968,23 @@
 	.rmb {
 		font-size: 24rpx;
 	}
+
 	.in-banner {
 		background-color: #ffffff;
 		padding: 20rpx 0;
+
 		image {
 			width: 704rpx;
 			// height: ;
 			display: block;
-			margin:20rpx auto;
+			margin: 20rpx auto;
 		}
 	}
+
 	.in-btm {
 		padding-bottom: 30rpx;
 		background-color: #fff;
+
 		image {
 			width: 700rpx;
 			height: 141rpx;

pages/money/pay.vue

@@ -5,7 +5,6 @@
 			<text class="price">{{ money }}</text>
 		</view>
 		<view class="pay-type-list">
-			<!-- #ifndef H5 -->
 			<view class="type-item b-b" @click="changePayType(1)">
 				<text class="icon iconfont iconweixin"></text>
 				<view class="con">
@@ -14,7 +13,6 @@
 				</view>
 				<label class="radio"><radio value="" color="#5dbc7c" :checked="payType == 1"></radio></label>
 			</view>
-			<!-- #endif -->
 			<!-- #ifdef APP-PLUS -->
 			<!-- <view class="type-item b-b" @click="changePayType(2)">
 				<text class="icon iconfont iconzhifubao"></text>

pages/product/product.vue

@@ -1,15 +1,22 @@
 <template>
 	<view class="container">
 		<view class="carousel">
-			<swiper indicator-dots :circular="true" duration="400">
-				<swiper-item class="swiper-item" v-for="(item, index) in imgList" :key="index">
-					<view class="image-wrapper">
-						<image :src="item" class="loaded" mode="scaleToFill"></image>
-					</view>
-				</swiper-item>
-			</swiper>
+			
 		</view>
-
+		<swiper
+		  :current="currIndex"
+		  @change="changeSwiper"
+		  style="width: 750rpx;"
+		  :style="{ height: swiperHeight + 'rpx' }"
+		  indicator-dots
+		  autoplay
+		  circular
+		  :duration="1000"
+		>
+		  <swiper-item v-for="(item, i) in imgList" :key="i" >
+		    <image :id="'wrap' + i" style="width: 750rpx;" :src="item" mode="widthFix" />
+		  </swiper-item>
+		</swiper>
 		<view class="introduce-section seckill-box-title" v-if="goodsType == 1">
 			<view class="title flex">
 				<view class="title-box">
@@ -161,6 +168,8 @@
 		},
 		data() {
 			return {
+				currIndex: 0,
+				swiperHeight: 0,
 				isfg: 0,
 				details: '',
 				reply: '', //评论
@@ -217,6 +226,7 @@
 			};
 		},
 		async onLoad(options) {
+		
 			let obj = this;
 			if (options.isfg) {
 				this.isfg = options.isfg
@@ -275,6 +285,32 @@
 			...mapState('user', ['userInfo', 'hasLogin'])
 		},
 		methods: {
+			/* 切换 swiper 滑块 */
+			changeSwiper(e) {
+			  this.currIndex = e.detail.current;
+			  this.$nextTick(() => {
+			    this.setSwiperHeight(); // 动态设置 swiper 的高度
+			  });
+			},
+			/* 动态设置 swiper 的高度 */
+			setSwiperHeight() {
+			  // const element = "#wrap" + this.currIndex;
+			  // const query = uni.createSelectorQuery().in(this);
+			  // query.select(element).boundingClientRect();
+			  // query.exec(res => {
+			  //   if (res && res[0]) this.swiperHeight = res[0].height;
+			  // });
+			  // console.log(this.swiperHeight,'this.swiperHeight');
+			  let that = this
+			  uni.getImageInfo({
+			  	src:that.imgList[that.currIndex],
+				success(e) {
+					console.log(e,'dddd');
+					that.swiperHeight = e.height * 750 / e.width
+					console.log(that.swiperHeight,'that.swiperHeight');
+				}
+			  })
+			},
 			navTo(url) {
 				uni.navigateTo({
 					url
@@ -308,6 +344,10 @@
 					// console.log()
 					obj.reply = data.reply; //保存评论列表
 					obj.imgList = goods.slider_image; //保存轮播图
+					obj.$nextTick(() => {
+					    obj.setSwiperHeight(); // 动态设置 swiper 的高度
+					});
+					
 					obj.specList = data.productAttr; //保存分类列表
 					console.log(data.productAttr);
 					obj.productValue = data.productValue; //保存分类查询数据
@@ -332,9 +372,14 @@
 					//保存默认选中的对象字符串名称
 					let str = obj.specSelected.join(',');
 					// 设置默认值
-					obj.actionImage = obj.productValue[str].image;
-					obj.uniqueId = obj.productValue[str].unique;
-					obj.goodIntegral = obj.productValue[str].integral
+					try{
+						obj.actionImage = obj.productValue[str].image;
+						obj.uniqueId = obj.productValue[str].unique;
+						obj.goodIntegral = obj.productValue[str].integral
+					}catch(e){
+						//TODO handle the exception
+					}
+					
 
 					// #ifdef H5
 					obj.shareDate();
@@ -538,31 +583,6 @@
 		/* #ifdef APP-PLUS */
 		padding-top: var(--status-bar-height);
 		/* #endif */
-		height: 722rpx;
-		position: relative;
-
-		swiper {
-			height: 100%;
-		}
-
-		.image-wrapper {
-			width: 100%;
-			height: 100%;
-		}
-
-		.swiper-item {
-			display: flex;
-			justify-content: center;
-			align-content: center;
-			// height: 750rpx;
-			height: 710rpx;
-			overflow: hidden;
-
-			image {
-				width: 100%;
-				height: 100%;
-			}
-		}
 	}
 
 	// 秒杀