苹果支付构建版本

pages/bookShop/classify.vue

@@ -17,14 +17,14 @@
 		<!-- 二级分类、商品 -->
 		<view class="twoBox" style="">
 			<!-- <u-sticky> -->
-			<u-tabs :list="towLevel" :inactiveStyle="{fontSize:'28rpx'}" lineWidth="40" @click="getCategoryList"
+			<u-tabs v-if="utabs" :list="towLevel" :current = "0" :inactiveStyle="{fontSize:'28rpx'}" lineWidth="40" @click="getCategoryList"
 				:activeStyle="{transform: 'scale(1.01)'}"></u-tabs>
 			<!-- </u-sticky> -->
 		</view>
 		<view class="classfyBody">
 			<!-- 二级分类、商品 -->
 			<view class="towLevel" v-if="towLevel.length > 0">
-				<view class="towLevelContent" v-if="commodityList.length > 0">
+				<view class="towLevelContent" v-if="commodityList && commodityList.length > 0">
 					<view class="commodityItem" v-for="(item,index) in commodityList" :key="index"
 						@click.stop="toDetail(item.productId)">
 						<view class="box">
@@ -59,6 +59,9 @@
 				暂无分类
 			</view>
 		</view>
+		<view>
+			<u-back-top :scroll-top="scrollTop" bottom="60" :customStyle='bgiStyle' :iconStyle="iconStyle"></u-back-top>
+		</view>
 	</view>
 </template>
 
@@ -72,9 +75,20 @@
 			return {
 				highlight: '', // 高亮下标
 				current: 0,
+				twocurrent:0,
 				oneLevel: [],
 				towLevel: [],
-				commodityList: [] // 商品列表			
+				commodityList: [] ,// 商品列表		
+				utabs:false,
+				bgiStyle: {
+					background: '#2ab58833'
+				},
+				iconStyle: {
+					fontSize: '40rpx',
+					fontWeight: 'bold',
+					color: '#54a966',
+				},
+				scrollTop: 0,
 			}
 		},
 		// contentButtonClick(e) {
@@ -96,8 +110,16 @@
 		},
 		computed: {
 			...mapState(['userInfo']),
+		},		
+		mounted () {
+		    setTimeout(() => { // 解决vant-tab组件官方问题：底部条位置错误
+		      this.utabs = true
+		    }, 200)
 		},
 		methods: {
+			onPageScroll(e) {
+				this.scrollTop = e.scrollTop;
+			},
 			// 跳转
 			onPageJump(url) {
 				uni.navigateTo({
@@ -116,6 +138,9 @@
 			},
 			// 点击一级分类
 			getTowLevel(e) {
+				this.utabs = false
+				// this.twocurrent = 0; 	
+				uni.showLoading()
 				this.$http
 					.post(`book/shopcategory/getTwoLevel?catId=${e.catId}`)
 					.then(res => {
@@ -133,7 +158,9 @@
 							// console.log(this.towLevel, 'towLevel')
 							this.getCategoryList(res.list[0])
 						}
-						
+						uni.hideLoading()
+						this.utabs = true
+						uni.stopPullDownRefresh();
 					})
 			},
 
@@ -141,7 +168,7 @@
 			getCategoryList(e) {
 				// console.log(e)
 				// return false
-				// this.highlight = index
+				// this.highlight = index			
 				this.$http
 					.post('book/shopproduct/appGetCategoryList', {
 						'catId': e.catId
@@ -237,7 +264,12 @@
 				uni.navigateTo({
 					url: `./commodityDetail?id=${id}`
 				})
-			}
+			}			
+		},
+		onPullDownRefresh(){
+			// console.log('refresh');
+			this.commodityList = []
+			this.getOneLevel()			
 		}
 	}
 </script>
@@ -335,7 +367,9 @@
 				flex-wrap: wrap;
 				padding: 10rpx 20rpx;
 				width: 100%;
-
+				align-items: stretch;
+				// align-content:center;
+				align-content:start;
 				.commodityItem {
 					width: 50%;
 					// background-color: #fff;					

pages/bookShop/commodityDetail.vue

@@ -28,9 +28,11 @@
 			<!-- 详情 + 评价1 -->
 			<view class="bookInfo">
 				<u-row customStyle="margin-bottom: 10px">
-					<u-col span="6"><span>书名：{{productInfo.productName}}</span></u-col>
-					<u-col span="6" v-if="productInfo.author"><span>作者：{{productInfo.author}}</span></u-col>
-					</u-row>
+					<u-col ><span>书名：{{productInfo.productName}}</span></u-col>					
+			  </u-row>
+			  <u-row customStyle="margin-bottom: 10px">
+				  <u-col v-if="productInfo.author"><span>作者：{{productInfo.author}}</span></u-col>
+				  </u-row>
 				<u-row>
 				
 					<u-col span="6" v-if="productInfo.publisher"><span>出版社：{{productInfo.publisher}}</span></u-col>