完成首页接口对接

components/product-item/product-item.vue

@@ -5,12 +5,12 @@
 			<text class="title"><text class="sxzg-icon">省心直供</text>{{title}}</text>
 		</view>
 		<view class="row row-2">
-			<text class="org-price">￥2.9</text>
+			<text class="org-price">￥{{orgPrice}}</text>
 			<text class="sales">月销15.8万</text>
 		</view>
 		<view class="row row-3">
 			<text class="sxj-icon">省心价</text>
-			<text class="price">￥1.99</text>
+			<text class="price">￥{{price}}</text>
 		</view>
 	</view>
 </template>
@@ -36,15 +36,15 @@
 				default: "list"
 			},
 			sales: {
-				type: Number,
+				type: [String, Number],
 				default: 0
 			},
 			orgPrice: {
-				type: Number,
+				type: [String, Number],
 				default: 0
 			},
 			price: {
-				type: Number,
+				type: [String, Number],
 				default: 0
 			}
 		}

http.js

@@ -1,6 +1,7 @@
 import store from './store'
 
 const baseUrl = "http://192.168.1.101:8000/api";
+const baseImageUrl = "http://192.168.1.101:8000/";
 
 function initPramas() {
 	arguments[0].url = baseUrl + arguments[0].url;
@@ -40,11 +41,12 @@ function initPramas() {
 	}
 
 	if (store.state.user.token) {
-		arguments[0].header["HTTP_TOKEN"] = store.state.user.token;
+		arguments[0].header["token"] = store.state.user.token;
 	}
 	return arguments[0];
 }
 export default {
+	baseImageUrl: baseImageUrl,
 	get: function() {
 		let obj = initPramas(arguments[0]);
 		obj.method = "GET";

main.js

@@ -11,9 +11,20 @@ Vue.prototype.$store = store
 Vue.config.productionTip = false
 App.mpType = 'app'
 
+Vue.filter('imagesFilter', (images) => {
+	let image = '';
+	if (images) {
+		image = images.split(',')[0]
+	}
+	if (image.indexOf("http") !== 0) {
+		image = http.baseImageUrl + image;		
+	}
+	return image;
+})
+
+
 const app = new Vue({
 	...App,
 	store
 })
 app.$mount()
-

pages/home/home.vue

@@ -1,5 +1,5 @@
 <template>
-	<view style="background-color: #f7f7f5;overflow: hidden;">
+	<view id="home" style="background-color: #f7f7f5;overflow: hidden;">
 		<view class="top-bg"></view>
 		<view class="section carousel-wrapper">
 			<swiper class="carousel" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
@@ -22,10 +22,10 @@
 			</view>
 			<view class="hot-rank">
 				<scroll-view scroll-x="true" :show-scrollbar="false" :enable-flex="true" style="white-space: nowrap;">
-					<product-item type="swiper" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
-					<product-item type="swiper" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
-					<product-item type="swiper" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
-					<product-item type="swiper" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
+					<template v-for="product in rankProducts">
+						<product-item type="swiper" :image="product.images|imagesFilter" :title="product.name" :org-price="product.org_price"
+						 :price="product.price"></product-item>
+					</template>
 				</scroll-view>
 			</view>
 		</view>
@@ -36,10 +36,10 @@
 			</view>
 			<view class="new-rank">
 				<scroll-view scroll-x="true" :show-scrollbar="false" :enable-flex="true" style="white-space: nowrap;">
-					<product-item type="swiper" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
-					<product-item type="swiper" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
-					<product-item type="swiper" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
-					<product-item type="swiper" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
+					<template v-for="product in newProducts">
+						<product-item type="swiper" :image="product.images|imagesFilter" :title="product.name" :org-price="product.org_price"
+						 :price="product.price"></product-item>
+					</template>
 				</scroll-view>
 			</view>
 
@@ -49,10 +49,10 @@
 				<image src="../../static/images/like.png" mode="scaleToFill" style="height: 28rpx;width: 363rpx;"></image>
 			</view>
 			<view class="like">
-				<product-item type="list" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
-				<product-item type="list" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
-				<product-item type="list" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
-				<product-item type="list" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
+				<template v-for="product in likeProducts">
+					<product-item type="list" :image="product.images|imagesFilter" :title="product.name" :org-price="product.org_price"
+					 :price="product.price"></product-item>
+				</template>
 			</view>
 		</view>
 	</view>
@@ -62,23 +62,28 @@
 	export default {
 		data() {
 			return {
-				title: 'Hello',
+				rankProducts: [],
+				newProducts: [],
+				likeProducts: [],
+				page: 1,
+				pageLoading: false
 			}
 		},
 		components: {},
 		onLoad() {
-			console.log(this.$http)
+			this.getRankProductData();
+			this.getNewProductData();
+			this.getLikeProductsData();
 		},
-		onShow() {
-			this.$http.get({
-				url: "/demo/test",
-				data: {
-					category: 'test'
-				},
-				success: (res) => {
-
+		onShow() {},
+		onPageScroll(e) {
+			const query = uni.createSelectorQuery();
+			query.select("#home").boundingClientRect(data => {
+				if (e.scrollTop > data.height - uni.getSystemInfoSync().windowHeight * 2) {					
+					this.getLikeProductsData();
 				}
-			})
+			}).exec();
+
 		},
 		onNavigationBarButtonTap(e) {
 			// console.log(e)
@@ -92,7 +97,48 @@
 					break;
 			}
 		},
-		methods: {}
+		methods: {
+			getRankProductData() {
+				this.$http.get({
+					url: "/product/rand",
+					data: {
+						limit: 10
+					},
+					success: (res) => {
+						this.rankProducts = res.data.data
+					}
+				})
+			},
+			getNewProductData() {
+				this.$http.get({
+					url: "/product/rand",
+					data: {
+						limit: 10
+					},
+					success: (res) => {
+						this.newProducts = res.data.data
+					}
+				})
+			},
+			getLikeProductsData() {
+				if (!this.pageLoading) {
+					console.log("加载下一页");
+					this.pageLoading = true;
+					this.$http.get({
+						url: "/product/lists",
+						data: {
+							limit: 10,
+							page: this.page,
+						},
+						success: (res) => {
+							this.likeProducts = [...this.likeProducts, ...res.data.data.rows]
+							this.page++;
+							this.pageLoading = false;
+						}
+					})
+				}
+			}
+		}
 	}
 </script>
 

pages/user/setting.vue

@@ -7,7 +7,7 @@
 			</view>
 			<view class="row">
 				<view class="label">
-					昵称
+					昵称 <text class="info">{{nickname}}</text>
 				</view>
 				<view class="option">
 					修改
@@ -29,7 +29,7 @@
 
 		<view class="block b3">
 			<view class="row">
-				<view class="label">修改手机号 <text class="info">18111897865</text></view>
+				<view class="label">修改手机号 <text class="info">{{mobile}}</text></view>
 				<view class="option">已绑定</view>
 			</view>
 			<view class="line"></view>
@@ -41,8 +41,8 @@
 
 		<view class="block b4">
 			<view class="row">
-				<view class="label">清除缓存 <text class="info">18.20MB</text></view>
-				<view class="option"><button class="clear-cache-btn" type="default">清除缓存</button></view>
+				<view class="label">清除缓存 <text class="info">{{fileSizeString}}</text></view>
+				<view class="option"><button class="clear-cache-btn" type="default" @tap="clearCache()">清除缓存</button></view>
 			</view>
 		</view>
 
@@ -53,22 +53,92 @@
 </template>
 
 <script>
+	import {
+		mapState
+	} from 'vuex'
+
 	export default {
 		data() {
 			return {
-
+				fileSizeString: "计算中..."
 			}
 		},
+		computed: mapState({
+			nickname: state => state.user.nickname,
+			mobile: state => state.user.mobile
+		}),
+		onLoad() {
+			const info = uni.getStorageInfoSync();
+			console.log(info)
+			this.formatSize();
+		},
 		methods: {
-			logout() {				
+			logout() {
 				uni.navigateBack({
 					delta: 999,
-					animationType:'none'
+					animationType: 'none'
 				})
 				uni.navigateTo({
 					url: '/pages/user/login'
 				})
 				this.$store.dispatch("user/logout")
+			},
+			formatSize() {
+				let that = this;
+				plus.cache.calculate(function(size) {
+					let sizeCache = parseInt(size);
+					if (sizeCache == 0) {
+						that.fileSizeString = "0B";
+					} else if (sizeCache < 1024) {
+						that.fileSizeString = sizeCache + "B";
+					} else if (sizeCache < 1048576) {
+						that.fileSizeString = (sizeCache / 1024).toFixed(2) + "KB";
+					} else if (sizeCache < 1073741824) {
+						that.fileSizeString = (sizeCache / 1048576).toFixed(2) + "MB";
+					} else {
+						that.fileSizeString = (sizeCache / 1073741824).toFixed(2) + "GB";
+					}
+				});
+			},
+			clearCache() {
+				let that = this;
+				let os = plus.os.name;
+				if (os == 'Android') {
+					let main = plus.android.runtimeMainActivity();
+					let sdRoot = main.getCacheDir();
+					let files = plus.android.invoke(sdRoot, "listFiles");
+					let len = files.length;
+					for (let i = 0; i < len; i++) {
+						let filePath = '' + files[i]; // 没有找到合适的方法获取路径，这样写可以转成文件路径  
+						plus.io.resolveLocalFileSystemURL(filePath, function(entry) {
+							if (entry.isDirectory) {
+								entry.removeRecursively(function(entry) { //递归删除其下的所有文件及子目录  
+									uni.showToast({
+										icon:'none',
+										title: '缓存清理完成',
+										duration: 2000
+									});
+									that.formatSize(); // 重新计算缓存  
+								}, function(e) {
+									console.log(e.message)
+								});
+							} else {
+								entry.remove();
+							}
+						}, function(e) {
+							console.log('文件路径读取失败')
+						});
+					}
+				} else { // ios暂时未找到清理缓存的方法，以下是官方提供的方法，但是无效，会报错  
+					plus.cache.clear(function() {
+						uni.showToast({
+							icon:'none',
+							title: '缓存清理完成',
+							duration: 2000
+						});
+						that.formatSize();
+					});
+				}
 			}
 		}
 	}

store/modules/user.js

@@ -1,5 +1,6 @@
 const defaults = {
-	nickname: "未设置昵称"
+	nickname: "未设置昵称",
+	token: "",
 }
 const state = JSON.parse(JSON.stringify(defaults));