devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp初级入门-05模拟商城完结篇_uniapp应用商店界面代码

作者：羊村懒王 | 2024-05-31 11:11:44

赞

踩

uniapp应用商店界面代码

这个代码就是基本完结了。我把全部代码都贴出来，供大家参考学习。

项目情况截图

代码

api

home index.js

  1. import request from '@/api/request.js'
  2.  
  3.  export const getBannerAds = () => {
  4. 	return request({
  5. 		url:'/lejuClient/home/bannerAds',
  6. 		method: 'GET'
  7. 	})
  8. }
  9.  
  10. export const doLogin = (data) => {
  11. 	return request({
  12. 		url:'/lejuClient/login/doLogin',
  13. 		method: 'POST',
  14. 		data: data
  15. 	})
  16. }
  17.  
  18. export const findCategory = (id) => {
  19. 	return request({
  20. 		url:'/lejuClient/productCategory/findCategory/' + id,
  21. 		method: 'GET'
  22. 	})
  23. }
  24.  
  25. export const getHotList = ()=> {
  26. 	return request({
  27. 		url:'/lejuClient/home/hotList',
  28. 		method: 'GET'
  29. 	})
  30. }
  31.  
  32.  
  33.  
  34.

info index.js

  1. import request from '@/api/request.js'
  2.  
  3.  
  4. export const getDetail = (productId)=> {
  5. 	return request({
  6. 		url: '/lejuClient/product/productDetail/' + productId,
  7. 		method: 'GET'
  8. 	})
  9. }
  10.  
  11. export const addCart = (data)=> {
  12. 	return request({
  13. 		url:'/lejuClient/cart/addCart',
  14. 		method: 'POST',
  15. 		data: data
  16. 	})
  17. }
  18.  
  19. export const addPreOrder = (data)=> {
  20. 	return request({
  21. 		url: '/lejuClient/order/addPreOrder',
  22. 		method: 'POST',
  23. 		data: data
  24. 	})
  25. }
  26.  
  27.

kind goods goods.js

  1. import request from '@/api/request.js'
  2.  
  3.  
  4. export const getProductList = (start,limit,data)=> {
  5. 	return request({
  6. 		url:`/lejuClient/product/findProductList/${start}/${limit}`,
  7. 		method:'POST',
  8. 		data:data
  9. 	})
  10. }
  11.

kind list list.js

  1. import request from '@/api/request.js'
  2.  
  3. export const getCategory = (categoryId)=>{
  4. 	return request({
  5. 		url:'/lejuClient/productCategory/findCategory/' + categoryId,
  6. 		method: 'GET'
  7. 	})
  8. }
  9.  
  10.  
  11. export const getProductList = (start,limit,data)=> {
  12. 	return request({
  13. 		url:`/lejuClient/product/findProductList/${start}/${limit}`,
  14. 		method:'POST',
  15. 		data:data
  16. 	})
  17. }
  18.

kind index.js

  1. import request from '../request.js'
  2.  
  3. export const getAllCategory = ()=> {
  4. 	return request({
  5. 		url:'/lejuClient/productCategory/findAllCategory'
  6. 	})
  7. }
  8.

mine login login.js

  1. import request from '@/api/request.js'
  2.  
  3. export const doLogin = (data)=> {
  4. 	return request({
  5. 		url:'/lejuClient/login/doLogin',
  6. 		method: 'POST',
  7. 		data: data
  8. 	})
  9. }
  10.

mine register index.js

  1. import request from '@/api/request.js'
  2.  
  3. export const doRegister = (data)=> {
  4. 	return request({
  5. 		url:'/lejuClient/member/register',
  6. 		method:'POST',
  7. 		data: data
  8. 	})
  9. }
  10.

mine index.js

  1. import request from '@/api/request.js'
  2.  
  3. export const getMemberInfo = ()=>{
  4. 	return request({
  5. 		url:'/lejuClient/login/getMemberInfo',
  6. 		method: 'GET'
  7. 	})
  8. }
  9.

order addres index.js

  1. import request from '@/api/request.js'
  2.  
  3. export const getAllAddress = ()=> {
  4. 	return request({
  5. 		url:'/lejuClient/address/findAllAddress',
  6. 		method: 'GET'
  7. 	})
  8. }
  9.

order index.js

  1. import request from '@/api/request.js'
  2.  
  3. export const getPreOrderById = (orderId)=> {
  4. 	return request({
  5. 		url:'/lejuClient/order/getPreOrderById/' + orderId,
  6. 		method: 'GET'
  7. 	})
  8. }
  9.  
  10. export const addConfirmOrder = (data)=> {
  11. 	return request({
  12. 		url:'/lejuClient/order/addConfirmOrder',
  13. 		method: 'POST',
  14. 		data: data
  15. 	})
  16. }
  17.

baseurl.js

  1. let baseUrl = "";
  2.  
  3. if(process.env.MODE_ENV == 'development'){
  4. 	console.log("开发环境");
  5. 	baseUrl = "http://leju.bufan.cloud";
  6. }else{
  7. 	console.log("生产环境");
  8. 	baseUrl = "http://leju.bufan.cloud";
  9. }
  10.  
  11. export default baseUrl

request.js

  1. import baseUrl from '@/api/baseUrl.js'
  2.  
  3. let instance  = (config) => {
  4. 	return new Promise((resolve,rejected)=>{
  5. 		uni.request({
  6. 			url: baseUrl + config.url,
  7. 			timeout: 5000,
  8. 			data:config.data,
  9. 			method: config.method,
  10. 			header:{
  11. 				token: uni.getStorageSync("b-token")
  12. 			},
  13. 			success(res){
  14. 				if(res.data.success == false){
  15. 					uni.showToast({
  16. 						title:res.data.message,
  17. 						icon:'none',
  18. 						mask: true,
  19. 						duration: 3000
  20. 					})
  21. 				}else{
  22. 					resolve(res.data);
  23. 				}
  24. 			}
  25. 		})
  26. 	})
  27. }
  28.  
  29. export default instance;
  30.

minxins

index.js

  1. let obj = {
  2. 	methods:{
  3. 		checkLogin(){
  4. 			let token = uni.getStorageSync("b-token");
  5. 			if(token){
  6. 				let userInfo = uni.getStorageSync("b-userInfo");
  7. 				this.userInfo = userInfo;
  8. 				return true;
  9. 			}else{
  10. 				uni.showModal({
  11. 					title:'登录提示',
  12. 					content:'暂未登录，是否重新登录',
  13. 					success(res) {
  14. 						//console.log(res)
  15. 						if(res.confirm){
  16. 							//清空本地数据
  17. 							uni.clearStorageSync();
  18. 							uni.navigateTo({
  19. 								url:'/pages/mine/login/login'
  20. 							});
  21. 						}else{
  22. 							uni.showToast({
  23. 								title:'已取消登录',
  24. 								icon:'error'
  25. 							});
  26. 							uni.clearStorageSync();
  27. 						}
  28. 					}
  29. 				})
  30. 				return false;
  31. 			}
  32. 		}
  33. 	}
  34. }
  35.  
  36. export default obj

pages

find find.vue

  1. <template>
  2. 	<view>
  3.  
  4. 	</view>
  5. </template>
  6.  
  7. <script>
  8. 	import mix from '@/minxins/index.js'
  9. 	
  10. 	export default {
  11. 		data() {
  12. 			return {
  13. 				
  14. 			};
  15. 		},
  16. 		mixins:[mix],
  17. 		onShow() {
  18. 			this.checkLogin();
  19. 		}
  20. 	}
  21. </script>
  22.  
  23. <style lang="scss" scoped>
  24.  
  25. </style>

home home.vue

  1. <template>
  2. 	<view>
  3. 		<view class="nav-area">
  4. 			<!-- 这里状态栏 -->
  5. 		</view>
  6. 		<!-- 轮播图 -->
  7. 		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
  8. 			<swiper-item v-for="item in barnerList" :key="item.id">
  9. 				<img :src="item.pic" alt="" style="width:100%;">
  10. 			</swiper-item>
  11. 		</swiper>
  12. 		<!-- <button type="default" @tap="login">登录</button> -->
  13. 		<!-- <button type="default" @tap="doFind">获取分类</button> -->
  14. 		<view class="box">
  15. 			
  16. 		</view>
  17. 		
  18. 		<view class="parent">
  19. 			<view v-for="item in 6" :key="item">
  20. 				{{ item}}
  21. 			</view>
  22. 		</view>
  23. 		
  24. 		<swiper 
  25. 			:indicator-dots="true" 
  26. 			:autoplay="true" 
  27. 			:interval="3000" 
  28. 			:duration="1500" 
  29. 			circular 
  30. 			:display-multiple-items="3" >
  31. 			<swiper-item v-for="item in hotList" :key="item.id">
  32. 				<image :src="item.pic" mode="" style="width:95%;"></image>
  33. 			</swiper-item>
  34. 		</swiper>
  35. 	</view>
  36. </template>
  37.  
  38. <script>
  39. 	import { getBannerAds, doLogin, findCategory, getHotList} from '@/api/home/index.js'
  40. 	
  41. 	export default {
  42. 		data() {
  43. 			return { 
  44. 				barnerList:[],
  45. 				hotList:[],
  46. 			};
  47. 		},
  48. 		methods: {
  49. 			// login(){
  50. 			// 	doLogin({
  51. 			// 		username:'17596496508',
  52. 			// 		password: '123456'
  53. 			// 	}).then(res=>{
  54. 			// 		//console.log(res)
  55. 			// 	});
  56. 			// },
  57. 			// doFind(){
  58. 			// 	findCategory(1).then(res=>{
  59. 			// 		//console.log(res)
  60. 			// 	})
  61. 			// }
  62. 		},
  63. 		onLoad(options) {
  64. 			getBannerAds().then(res=>{
  65. 				this.barnerList = res.data.items;
  66. 			})
  67. 			
  68. 			getHotList().then(res=>{
  69. 				console.log(res);
  70. 				this.hotList = res.data.items;
  71. 			})
  72. 		}
  73. 	}
  74. </script>
  75.  
  76. <style lang="scss">
  77. 	.nav-area{
  78. 		height: var(--status-bar-height);
  79. 		width: 100%;
  80. 	}
  81. 	
  82. .box{
  83. 	width: 208rpx;
  84. 	height: 140rpx;
  85. 	background-color: $uni-bg-color-hover;
  86. }
  87.  
  88. .parent {
  89. 	display: flex;
  90. 	align-items: center;
  91. 	overflow-x: auto;
  92. 	view{
  93. 		height: 200rpx;
  94. 		width: 300rpx;
  95. 		background-color: gray;
  96. 		flex-shrink: 0;
  97. 	}
  98. }
  99. </style>

index index.vue

  1. <template>
  2. 	<view class="content">
  3. 		<view>
  4. 			{{text}}
  5. 		</view>
  6. 		<view v-text="text">
  7. 			
  8. 		</view>
  9. 		<view v-for="item in list" :key="item.name" @tap="printName(item)">
  10. 			{{item.name}}
  11. 		</view>
  12. 		
  13. 		<view v-show="isShow">这是一行文字</view>
  14. 		<button type="default" @tap="toggleText">点击控制文字显示与隐藏</button>
  15. 		
  16. 		<view :class="{red:isActive}">文字颜色会变化</view>
  17. 		<button type="default" @tap="changeColor">点击变换颜色</button>
  18. 		
  19. 		<view :style="{color:isChange ? 'red':''}">内联样式变化文字颜色</view>
  20. 		<button type="default" @tap="changeStyle">点击变换style</button>
  21. 	</view>
  22. </template>
  23.  
  24. <script>
  25. 	export default {
  26. 		data(){
  27. 			return {
  28. 				isChange:false,
  29. 				isActive:false,
  30. 				isShow: true,
  31. 				text:'张三',
  32. 				list:[
  33. 					{name:'苹果'},
  34. 					{name:'香蕉'},
  35. 					{name:'橘子'},
  36. 					{name:'火龙果'},
  37. 				]
  38. 			}
  39. 		},
  40. 		methods: {
  41. 			changeStyle(){
  42. 				this.isChange = !this.isChange
  43. 			},
  44. 			changeColor(){
  45. 				this.isActive = !this.isActive;
  46. 			},
  47. 			toggleText(){
  48. 				this.isShow = !this.isShow;
  49. 			},
  50. 			printName(obj){
  51. 				console.log(obj.name);
  52. 			}
  53. 		}
  54. 	}
  55. </script>
  56.  
  57. <style>
  58. 	.red{
  59. 		color: red;
  60. 	}
  61. </style>

info info.vue

  1. <template>
  2. 	<view class="info">
  3. 		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
  4. 			<swiper-item v-for="(item,index) in albumPics" :key="index">
  5. 				<view class="swiper-item">
  6. 					<img :src="item" alt="" style="width: 100%;">
  7. 				</view>
  8. 			</swiper-item>
  9. 		</swiper>
  10. 		<view class="row">商品名称：{{productData.name}}</view>
  11. 		<view class="row">商品价格：￥{{productData.price}}</view>
  12. 		<view class="row">商品描述：{{productData.description}}</view>
  13. 		<view class="row">明细标题：{{productData.detailTitle}}</view>
  14. 		<view class="row">明细描述：{{productData.detailDesc}}</view>
  15. 		<view class="row">品牌名称：{{productData.brandName}}</view>
  16. 		<view class="row">品牌目录：{{productData.productCategoryName}}</view>
  17. 		<mp-html :content="productData.detailMobileHtml"></mp-html>
  18. 		
  19. 		<view class="mask" @touchmove.stop.prevent v-if="isMaskShow">
  20. 			<view class="box">
  21. 				<image :src="picUrl" mode="" class="pic"></image>
  22. 				<uni-icons type="close" @tap="isMaskShow = false" style="position: absolute;right: 120rpx;top: 260rpx;"></uni-icons>
  23. 				<view>商品选择</view>
  24. 				<view class="sp-data">
  25. 					<view 
  26. 						v-for="(item,idx) in productData.skuList" 
  27. 						:key="item.id" 
  28. 						class="sp-data-row" 
  29. 						:class="spDataSelectedIndex == idx ? 'active': ''" @tap="spDataSelect(idx)">
  30. 						<text v-for="(ele,index) in item.spData" :key="index" class="sp-data-item">
  31. 							{{ele.key}}:{{ele.value}}
  32. 						</text>
  33. 					</view>
  34. 				</view>
  35. 				<view style="width: 60%;margin: 0 auto;">
  36. 					<button type="warn" size="default" @tap="confirm">购买</button>
  37. 				</view>
  38. 			</view>
  39. 		</view>
  40. 		
  41. 		<view class="fixed-btn">
  42. 			<uni-icons type="headphones" class="btn-icon"></uni-icons>
  43. 			<button type="default" class="btn-cart" @tap="addCart(0)">添加至购物车</button>
  44. 			<button type="primary" class="btn-buy" @tap="goBuy(1)">立即购买</button>
  45. 		</view>
  46. 	</view>
  47. </template>
  48.  
  49. <script>
  50. 	import { getDetail, addCart, addPreOrder } from '@/api/info/index.js'
  51. 	import mix from '@/minxins/index.js'
  52. import { registerRuntimeCompiler } from "vue";
  53. 	
  54. 	export default {
  55. 		
  56. 		mixins:[mix],
  57. 		data() {
  58. 			return {
  59. 				currentTap:0, //0购物车，1立即购买
  60. 				picUrl:'',
  61. 				spDataSelectedIndex: null,
  62. 				isMaskShow: false,
  63. 				productId:null,
  64. 				productData: {},
  65. 				albumPics:[],
  66. 				obj:{
  67. 					img:"width:90%;"
  68. 				}
  69. 			};
  70. 		},
  71. 		methods:{
  72. 			//确认购买
  73. 			confirm(){
  74. 				//先判断是否登录
  75. 				if(!this.checkLogin()){
  76. 					return;
  77. 				}
  78. 				//判断是否选择了规格
  79. 				if(this.spDataSelectedIndex == null) {
  80. 					uni.showToast({
  81. 						title:'请选择规格',
  82. 						icon:'error'
  83. 					});
  84. 					return;	
  85. 				}
  86. 				//获取sku
  87. 				let sku = this.productData.skuList[this.spDataSelectedIndex];
  88. 				
  89. 				if(this.currentTap == 0){
  90. 					console.log('添加至购物车')
  91. 					
  92. 					
  93. 					addCart({
  94. 						  productId: sku.productId,
  95. 						  productSkuId: sku.id,
  96. 						  quantity: 1  //默认了
  97. 					}).then(res=>{
  98. 						console.log(res)
  99. 						uni.showToast({
  100. 							title:res.message,
  101. 							icon:'success'
  102. 						});
  103. 						this.isMaskShow = false;
  104. 					})
  105. 				}else if(this.currentTap == 1){
  106. 					console.log('立即购买');				
  107. 					addPreOrder({
  108. 						  addressId: "",
  109. 						  orderId: "",
  110. 						  orderItemList: [
  111. 						    {
  112. 						      cartId: "",
  113. 						      productId: sku.productId,
  114. 						      productQuantity: 1,
  115. 						      productSkuId: sku.id
  116. 						    }
  117. 						  ],
  118. 						  payType: 0,
  119. 						  sourceType: 1
  120. 					}).then(res=>{
  121. 						console.log(res);
  122. 						this.isMaskShow = false;
  123. 						uni.showToast({
  124. 							title:`下单${res.message},订单号是${res.data.orderId}`,
  125. 							icon:'none',
  126. 							mask:true,
  127. 							duration:2000
  128. 						});
  129. 						setTimeout(()=>{
  130. 							uni.navigateTo({
  131. 								url:'/pages/order/order?orderId=' + res.data.orderId
  132. 							});
  133. 						},2000);
  134. 						
  135. 					})
  136. 				}
  137. 				
  138. 				
  139. 			},
  140. 			//选中
  141. 			spDataSelect(index){
  142. 				this.spDataSelectedIndex = index;
  143. 				this.picUrl = this.productData.skuList[index].pic;
  144. 				
  145. 			},
  146. 			//添加至购物车
  147. 			addCart(val){
  148. 				this.goBuy(val);
  149. 			},
  150. 			//立即购买
  151. 			goBuy(val){
  152. 				this.currentTap = val;
  153. 				this.isMaskShow = !this.isMaskShow;
  154. 				
  155. 				
  156. 			}
  157. 		},
  158. 		onLoad(options) {
  159. 			this.productId = options.id
  160. 			getDetail(this.productId).then(res=>{
  161. 				console.log(res)
  162. 				res.data.product.skuList.forEach(ele=>{
  163. 					ele.spData = JSON.parse(ele.spData);
  164. 				});
  165. 				
  166. 				this.productData = res.data.product;
  167. 				this.albumPics = this.productData.albumPics.split(",");
  168. 				uni.setNavigationBarTitle({
  169. 					title: this.productData.name
  170. 				});
  171. 			
  172. 			})
  173. 		}
  174. 	}
  175. </script>
  176.  
  177. <style lang="scss">
  178. 	.info{
  179. 		
  180. 		.row{
  181. 			min-height: 100rpx;
  182. 			width: 100%;
  183. 			font-size: 18px;
  184. 			padding: 10px 10px;
  185. 			margin-bottom: 20rpx;
  186. 			margin-top: 10rpx;
  187. 		}
  188. 		
  189. 		.mask{
  190. 			width: 100%;
  191. 			height: 100vh;
  192. 			position: fixed;
  193. 			top: 0;
  194. 			left: 0;
  195. 			z-index: 999;
  196. 			background-color: rgba(0,0,0,0.6);
  197. 			display: flex;
  198. 			align-items: center;
  199. 			justify-content: center;
  200. 			.box{
  201. 				width: 80%;
  202. 				min-height: 1000rpx;
  203. 				margin: 0 auto;
  204. 				background-color: #fff;
  205. 				
  206. 				.pic{
  207. 					width: 240rpx;
  208. 					height: 240rpx;
  209. 					border: 2px solid #FFC6CC;
  210. 					border-radius: 100rpx;
  211. 					position: relative;
  212. 					top: -90rpx;
  213. 					left: 60rpx;
  214. 					background-color: #FFC6CC;
  215. 					
  216. 				}
  217. 				
  218. 				.sp-data{
  219. 					height: 500rpx;
  220. 					overflow-y: scroll;
  221. 					
  222. 					.sp-data-row{
  223. 						height: 60rpx;
  224. 						line-height: 60rpx;
  225. 						width: 100%;
  226. 						margin: 15rpx 0;
  227. 						padding-left: 40rpx;
  228. 						box-sizing: border-box;
  229. 						
  230. 						.sp-data-item{
  231. 							margin-left: 25rpx;
  232. 							border: 1px solid green;
  233. 							border-radius: 10rpx;
  234. 							padding: 10rpx;
  235. 							height: 40rpx;
  236. 							font-size: 14px;
  237. 						}
  238. 								
  239. 					}
  240. 					
  241. 					.active{
  242. 						background-color: #E2E2E2;
  243. 					}
  244. 				}
  245. 			}
  246. 		}
  247. 		
  248. 		.fixed-btn{
  249. 			display: flex;
  250. 			align-items: center;
  251. 			position: fixed;
  252. 			bottom: 0;
  253. 			left: 0;
  254. 			width: 100%;
  255. 			border: 1px solid #cccccc;
  256. 			padding: 10px;
  257. 			background-color: #fff;
  258. 			button{
  259. 				width: 40%;
  260. 				margin: 0;
  261. 				border-radius: 0;
  262. 			}
  263. 			.btn-icon{
  264. 				width: 15%;
  265. 			}
  266. 			
  267. 			.btn-cart{
  268. 				background-color: #E2E2E2;
  269. 			}
  270. 			.btn-buy{
  271. 				background-color: #344B44;
  272. 			}
  273. 		}
  274. 	}
  275.  
  276. </style>

kind goods goods.vue

  1. <template>
  2. 	<view>
  3. 		<view class="tab">
  4. 			<view class="tab-item" v-for="(item,index) in tabList" :key="index">
  5. 				<view :class="{active: index == currentTabIndex }" @tap="tabClick(index)">
  6. 					{{item.name}}
  7. 				</view>
  8. 				<view v-if=" item.name == '销量' || item.name == '价格'" class="icon-box">
  9. 					<uni-icons type="up" size="16" :color="item.current == 'up'?'#dd524d': ''"></uni-icons>
  10. 					<uni-icons type="down" size="16" :color="item.current == 'down'?'#dd524d': ''"></uni-icons>
  11. 				</view>
  12. 			</view>
  13. 		</view>
  14. 		<ul class="product-area">
  15. 			<li v-for="item in productList" :key="item.id" @tap="goInfo(item)">
  16. 				<img :src="item.pic" alt="" />
  17. 				<view>{{item.name}}</view>
  18. 				<view>￥{{item.price}}</view>
  19. 				<view>{{item.brandName}}</view>
  20. 			</li>
  21. 		</ul>
  22. 	</view>
  23. </template>
  24.  
  25. <script>
  26. 	import { getProductList } from '@/api/kind/goods/goods.js'
  27. 	
  28. 	export default {
  29. 		data() {
  30. 			return {
  31. 				total: 0,
  32. 				start: 1,
  33. 				limit: 4,
  34. 				sortBy:'',
  35. 				desc: 0,
  36. 				currentTabIndex: 0,
  37. 				categoryId: 0,
  38. 				productList:[],
  39. 				tabList:[
  40. 					{
  41. 						name:'新品',
  42. 						current:'default', //default up down
  43. 					},
  44. 					{
  45. 						name:'销量',
  46. 						current:'default', //default up down
  47. 					},
  48. 					{
  49. 						name:'价格',
  50. 						current:'default', //default up down
  51. 					},
  52. 					{
  53. 						name:'筛选',
  54. 						current:'default', //default up down
  55. 					},
  56. 				]
  57. 			}
  58. 		},
  59. 		methods: {
  60. 			goInfo(item){
  61. 				console.log(item)
  62. 				uni.navigateTo({
  63. 					url:'/pages/info/info?id=' + item.id
  64. 				})
  65. 			},
  66. 			tabClick(index){
  67. 				//重置数据
  68. 				this.productList = [];
  69. 				//当前索引保存起来
  70. 				this.currentTabIndex = index;
  71. 				//除了当前点击项，其余项恢复默认标识
  72. 				this.tabList.forEach((ele,idx)=>{
  73. 					if(idx != index){
  74. 						ele.current = 'default';
  75. 					}
  76. 				});
  77. 				
  78. 				//获取当前项
  79. 				let item = this.tabList[index];
  80. 				//判断是升序，还是降序
  81. 				if(item.current == 'default'){
  82. 					this.tabList[index].current = 'up';
  83. 					this.desc = 0; //升序
  84. 				}else if(item.current == 'up'){
  85. 					this.tabList[index].current = 'down';
  86. 					this.desc = 1; //降序
  87. 				}else {
  88. 					this.tabList[index].current = 'up';
  89. 					this.desc = 0; //升序
  90. 				}
  91. 				
  92. 				//判断是销量排序，还是价格排序
  93. 				if(item.name =='销量'){
  94. 					this.sortBy = 'sale'
  95. 				}else if(item.name =='价格'){
  96. 					this.sortBy = 'price'
  97. 				}
  98. 				//请求接口获取数据
  99. 				this.getData();
  100. 			},
  101. 			getData(){
  102. 				let data = {
  103. 				  "brandId": "",
  104. 				  "categoryId": this.categoryId,
  105. 				  "isDesc": this.desc,
  106. 				  "keywords": "",
  107. 				  "sortBy": this.sortBy
  108. 				}
  109. 				//调用接口函数
  110. 				getProductList(this.start,this.limit,data).then(res=>{
  111. 					//console.log(res)
  112. 					this.productList.push(...res.data.rows);
  113. 					this.total = res.data.total;
  114. 					uni.stopPullDownRefresh();
  115. 				})
  116. 			}
  117. 		},
  118. 		onLoad(options) {
  119. 			//从页面传参中获取id
  120. 			this.categoryId = options.id;
  121. 			//然后获取数据
  122. 			this.getData();
  123. 		},
  124. 		//上拉加载
  125. 		onReachBottom(){
  126. 			//判断目前数据小于总数据时，继续获取数据
  127. 			if(this.productList.length < this.total){
  128. 				this.start += 1;
  129. 				this.getData();
  130. 			}else
  131. 			{
  132. 				console.log("没有更多了")
  133. 			}
  134. 			
  135. 		},
  136. 		//下拉刷新
  137. 		onPullDownRefresh(){
  138. 			this.start = 1;
  139. 			this.productList = [];
  140. 			this.getData();
  141. 			
  142. 		}
  143. 	}
  144. </script>
  145.  
  146. <style lang="scss">
  147. 	.tab{
  148. 		display: flex;
  149. 		align-items: center;
  150. 		justify-content: space-around;
  151. 		padding: 10px 0;
  152. 		.tab-item{
  153. 			display: flex;
  154. 			align-items: center;
  155. 			.icon-box{
  156. 				display: flex;
  157. 				align-items: center;
  158. 				justify-content: center;
  159. 				flex-direction: column;
  160. 			}
  161. 			.active{
  162. 				color: #dd524d;
  163. 			}
  164. 		}
  165. 	}
  166. 	
  167. .product-area{
  168. 	list-style: none;
  169. 	width: 100%;
  170. 	padding: 10rpx;
  171. 	li{
  172. 		width: 45%;
  173. 		height: 600rpx;
  174. 		float: left;
  175. 		border: 1px solid gray;
  176. 		text-align: center;
  177. 		margin: 10rpx;
  178. 		img{
  179. 			width: 100%;
  180. 			height: 400rpx;
  181. 		}
  182. 		text{
  183. 			color: gray;
  184. 		}
  185. 	}
  186. }
  187. </style>

king list list.vue

  1. <template>
  2. 	<view>
  3. 		二级分类页
  4. 		<button type="default" @tap="goKind">api方式跳转回分类页</button>
  5. 		<button type="default" @tap="goBack">返回上级菜单</button>
  6. 		<navigator url="/pages/kind/kind" open-type="switchTab">组件方式跳转回分类页</navigator>
  7. 		<navigator :delta="1" open-type="navigateBack">组件方式回退上一级</navigator>
  8. 		<view class="nav-item" v-for="item in categoryList" :key="item.id" @tap="catetoryClick(item)">
  9. 			<!-- <image :src="item.icon" mode=""></image> -->
  10. 			<text>{{item.name}}</text>
  11. 		</view>
  12. 	</view>
  13. </template>
  14.  
  15. <script>
  16. 	import { getCategory} from '@/api/kind/list/list.js'
  17.  
  18. 	
  19. 	export default {
  20. 		data() {
  21. 			return {
  22. 				categoryId:0,
  23. 				categoryList:[]
  24. 			};
  25. 		},
  26. 		methods:{
  27. 			catetoryClick(obj){
  28. 				console.log(obj)
  29. 				uni.navigateTo({
  30. 					url:'/pages/kind/goods/goods?id=' + obj.id
  31. 				})
  32. 			},
  33. 			goKind(){
  34. 				uni.switchTab({
  35. 					url:'/pages/kind/kind'
  36. 				})
  37. 			},
  38. 			goBack(){
  39. 				uni.navigateBack({
  40. 					delta:1
  41. 				})
  42. 			}
  43. 		},
  44. 		onLoad(options) {
  45. 			this.categoryId = options.id;
  46. 			getCategory(this.categoryId).then(res=>{
  47. 				//console.log(res)
  48. 				this.categoryList = res.data.category.children;
  49. 			})
  50. 		}
  51. 	}
  52. </script>
  53.  
  54. <style lang="scss" scoped>
  55. .nav-item{
  56. 	width: 100%;
  57. 	height: 110rpx;
  58. 	border: 1px solid gray;
  59. 	margin-bottom: 10px;
  60. 	box-sizing: border-box;
  61. 	text-align: center;
  62. 	font-size: 18px;
  63. 	font-weight: bold;
  64. 	line-height: 110rpx;
  65. 	background-color: $uni-bg-color-grey;
  66. }
  67. </style>

kind kind.vue

  1. <template>
  2. 	<view>
  3. 		<button type="default" @tap="goProduct">api方式跳转到商品页</button>
  4. 		<navigator url="/pages/kind/list/list">组件方式跳转至商品页</navigator>
  5. 		<view class="nav-item" v-for="item in categoryList" :key="item.pmsProductCategory.id" @tap="catetoryClick(item)">
  6. 			<!-- <image :src="item.pmsProductCategory.icon" mode=""></image> -->
  7. 			<text>{{item.pmsProductCategory.name}}</text>
  8. 		</view>
  9. 	</view>
  10. </template>
  11.  
  12. <script>
  13. 	import { getAllCategory } from '@/api/kind/index.js'
  14. 	
  15. 	export default {
  16. 		data() {
  17. 			return {
  18. 				categoryList:[]
  19. 			};
  20. 		},
  21. 		methods: {
  22. 			goProduct(){
  23. 				uni.navigateTo({
  24. 					url:'/pages/kind/list/list'
  25. 				})
  26. 			},
  27. 			catetoryClick(obj){
  28. 				uni.navigateTo({
  29. 					url:'/pages/kind/list/list?id=' + obj.pmsProductCategory.id
  30. 				})
  31. 			}
  32. 		},
  33. 		onLoad() {
  34. 			getAllCategory().then(res=>{
  35. 				console.log(res)
  36. 				this.categoryList = res.data.items;
  37. 			})
  38. 		}
  39. 	}
  40. </script>
  41.  
  42. <style lang="scss">
  43. 	
  44. 	navigator{
  45. 		width: 100%;
  46. 		height: 150rpx;
  47. 		line-height: 150rpx;
  48. 		text-align: center;
  49. 	}
  50. 	
  51. .nav-item{
  52. 	width: 100%;
  53. 	height: 150rpx;
  54. 	border: 1px solid gray;
  55. 	margin-bottom: 10px;
  56. 	box-sizing: border-box;
  57. 	text-align: center;
  58. 	font-size: 18px;
  59. 	font-weight: bold;
  60. 	line-height: 150rpx;
  61. 	background-color: $uni-bg-color-grey;
  62. }
  63. </style>

mine login login.vue

  1. <template>
  2. 	<view class="login-area">
  3. 		<view class="row">
  4. 			<image src="/static/logo.png" style="width: 300rpx;height: 250rpx;margin: 0 auto;display: block;"></image>
  5. 		</view>
  6. 		<view class="row">
  7. 			<input type="text" class="input" placeholder="用户名" v-model="loginForm.username"/>
  8. 		</view>
  9. 		<view class="row">
  10. 			<input type="password" class="input" placeholder="密码" v-model="loginForm.password"/>
  11. 		</view>
  12. 		<view class="row">
  13. 			<button type="default" @tap="login" class="btn">登录</button>
  14. 		</view>
  15. 		<navigator url="/pages/mine/register/register" class="register">没有账号？注册一个</navigator>
  16. 	</view>
  17. </template>
  18.  
  19. <script>
  20. 	import {doLogin} from '@/api/mine/login/login.js'
  21. 	import { getMemberInfo } from '@/api/mine/index.js'
  22. 	
  23. 	export default {
  24. 		data() {
  25. 			return {
  26. 				loginForm:{
  27. 					username:'17596496508',
  28. 					password:'123456'
  29. 				}
  30. 			};
  31. 		},
  32. 		methods:{
  33. 			login(){
  34. 				doLogin(this.loginForm).then(res=>{
  35. 					console.log(res)
  36. 					uni.showToast({
  37. 						title:'登录成功',
  38. 						icon:'success'
  39. 					});
  40. 					//登录成功，存token
  41. 					uni.setStorageSync("b-token",res.data.token);
  42. 					//同时获取用户信息，存用户
  43. 					getMemberInfo().then(res=>{
  44. 						uni.setStorageSync("b-userInfo",res.data.userInfo);
  45. 					});
  46. 					setTimeout(()=>{
  47. 						uni.switchTab({
  48. 							url:'/pages/mine/mine'
  49. 						});
  50. 					},1200);
  51. 					
  52. 				})
  53. 			}
  54. 		}
  55. 	}
  56. </script>
  57.  
  58. <style lang="scss">
  59.  
  60. .login-area{
  61. 	
  62. 	background-color: #F3EDE7;
  63. 	width: 100%;
  64. 	
  65. 	
  66. 	.row{
  67. 		margin: 15rpx auto;
  68. 		min-height: 150rpx;
  69. 		width: 80%;
  70. 	
  71. 		
  72. 		.input{
  73. 			margin-top: 30rpx;
  74. 			border: 1px solid gray;
  75. 			box-sizing: border-box;
  76. 			height: 100rpx;
  77. 			width: 100%;
  78. 			font-size: 30rpx;
  79. 			line-height: 30rpx;
  80. 			border-radius: 50rpx;
  81. 			padding: 15rpx 20rpx;
  82. 		}
  83. 		
  84. 		.btn{
  85. 			background-color: #344B44;
  86. 			border-radius: 50rpx;
  87. 			color: #ffffff;
  88. 		}
  89. 	}
  90. 	.register{
  91. 		text-align: center;
  92. 		font-size: 14px;
  93. 		color: #625D5E;
  94. 	}
  95. }
  96. 	
  97. 	
  98. </style>

mine register register.vue

  1. <template>
  2. 	<view class="register-area">
  3. 		<view class="row">
  4. 			<image src="/static/logo.png" style="width: 300rpx;height: 250rpx;margin: 0 auto;display: block;"></image>
  5. 		</view>
  6. 		<view class="row">
  7. 			<input type="text" class="input" placeholder="用户名 该用户名将用于账号登录" v-model="relForm.username"/>
  8. 		</view>
  9. 		<view class="row">
  10. 			<input type="password" class="input" placeholder="请输入登录密码" v-model="relForm.password"/>
  11. 		</view>
  12. 		<view class="row">
  13. 			<input type="text" class="input" placeholder="手机号" v-model="relForm.phone"/>
  14. 		</view>
  15. 		<view class="row">
  16. 			<input type="text" class="input" placeholder="请输入昵称" v-model="relForm.nickname"/>
  17. 		</view>
  18. 		<view class="row">
  19. 			<button type="default" @tap="register" class="btn">注 册</button>
  20. 		</view>
  21. 		<navigator url="/pages/mine/login/login" class="register">返回登录</navigator>
  22. 	</view>
  23. </template>
  24.  
  25. <script>
  26. 	import { doRegister } from '@/api/mine/register/index.js'
  27. 	
  28. 	export default {
  29. 		data() {
  30. 			return {
  31. 				relForm:{
  32. 					phone:'',
  33. 					password:'',
  34. 					username:'',
  35. 					nickname:''
  36. 				}
  37. 			};
  38. 		},
  39. 		methods:{
  40. 			register(){
  41. 				doRegister(this.relForm).then(res=>{
  42. 					console.log(res)
  43. 					if(res.success){
  44. 						uni.showToast({
  45. 							title:res.message,
  46. 							icon:'success'
  47. 						})
  48. 					}else{
  49. 						uni.showToast({
  50. 							title:res.message,
  51. 							icon:'none'
  52. 						})
  53. 					}
  54. 				})
  55. 			}
  56. 		}
  57. 	}
  58. </script>
  59.  
  60. <style lang="scss">
  61. .register-area{
  62. 	
  63. 	background-color: #F3EDE7;
  64. 	width: 100%;
  65. 	
  66. 	
  67. 	.row{
  68. 		margin: 10rpx auto;
  69. 		min-height: 120rpx;
  70. 		width: 90%;
  71. 	
  72. 		.input{
  73. 			margin-top: 20rpx;
  74. 			border: 1px solid gray;
  75. 			box-sizing: border-box;
  76. 			height: 100rpx;
  77. 			width: 100%;
  78. 			font-size: 30rpx;
  79. 			line-height: 30rpx;
  80. 			border-radius: 50rpx;
  81. 			padding: 10rpx 50rpx;
  82. 		}
  83. 		
  84. 		.btn{
  85. 			background-color: #344B44;
  86. 			border-radius: 50rpx;
  87. 			color: #ffffff;
  88. 		}
  89. 	}
  90. 	.register{
  91. 		text-align: center;
  92. 		font-size: 14px;
  93. 		color: #625D5E;
  94. 	}
  95. }
  96. </style>

mine mine.vue

  1. <template>
  2. 	<view class="info">
  3. 		<view class="user-info">
  4. 			<image :src="userInfo.icon" mode="" class="avatar"></image>
  5. 			<text class="nickname">{{userInfo.nickname}}</text>
  6. 			<text class="username">用户名：{{userInfo.username}}</text>
  7. 		</view>
  8. 		<navigator url="/pages/mine/login/login">登录</navigator>
  9. 	</view>
  10. </template>
  11.  
  12. <script>
  13. 	import {getMemberInfo} from '@/api/mine/index.js'
  14. 	import mix from '@/minxins/index.js'
  15. 	
  16. 	export default {
  17. 		name:'Mine',
  18. 		mixins:[mix],
  19. 		data() {
  20. 			return {
  21. 				userInfo:null
  22. 			};
  23. 		},
  24. 		methods:{
  25. 			// getUser(){
  26. 			// 	let token = uni.getStorageSync("b-token");
  27. 			// 	if(token){
  28. 			// 		let userInfo = uni.getStorageSync("b-userInfo");
  29. 			// 		this.userInfo = userInfo;
  30. 			// 	}else{
  31. 			// 		uni.showModal({
  32. 			// 			title:'登录提示',
  33. 			// 			content:'暂未登录，是否重新登录',
  34. 			// 			success(res) {
  35. 			// 				console.log(res)
  36. 			// 				if(res.confirm){
  37. 			// 					//清空本地数据
  38. 			// 					uni.clearStorageSync();
  39. 			// 					uni.navigateTo({
  40. 			// 						url:'/pages/mine/login/login'
  41. 			// 					});
  42. 			// 				}
  43. 			// 			}
  44. 			// 		})
  45. 			// 	}
  46. 			// }
  47. 		},
  48. 		onLoad() {
  49. 			//this.getUser();
  50. 		},
  51. 		onShow() {
  52. 			this.checkLogin();
  53. 		}
  54. 		
  55. 	}
  56. </script>
  57.  
  58. <style lang="scss">
  59. 	.info{
  60. 		background-color: #F3EDE7;
  61. 		width: 100%;
  62. 		
  63. 		.user-info{
  64. 			width: 100%;
  65. 			height: 300rpx;
  66. 			.avatar{
  67. 				width: 230rpx;
  68. 				height: 230rpx;
  69. 				border: 1px solid black;
  70. 				border-radius: 50%;
  71. 				margin-top: 40rpx;
  72. 				margin-left: 40rpx;
  73. 				
  74. 			}
  75. 			
  76. 			.nickname{
  77. 				font-size: 30px;
  78. 				position: absolute;
  79. 				top: 100rpx;
  80. 				left: 320rpx;
  81. 				color: #6C7A77;
  82. 			}
  83. 			
  84. 			.username{
  85. 				font-size: 14px;
  86. 				position: absolute;
  87. 				top: 200rpx;
  88. 				left: 320rpx;
  89. 				color: #C5C1C0;
  90. 			}
  91. 		}
  92. 		
  93. 		
  94. 	}
  95. 	
  96. </style>

order order.vue

  1. <template>
  2. 	<view class="order">
  3. 		<navigator url="/pages/order/address/address">选择收货地址</navigator>
  4. 		<view class="address">
  5. 			<text class="address-name">姓名：{{address.name}}</text>
  6. 			<text class="address-phone">电话：{{address.phoneNumber}}</text>
  7. 			<view class="address-detail">地址：{{address.province}}{{address.city}}{{address.region}}{{address.detailAddress}}</view>
  8. 		</view>
  9. 		<view class="row">id:{{orderData.orderBase && orderData.orderBase.id}}</view>
  10. 		<view class="row">orderSn:{{orderData.orderBase && orderData.orderBase.orderSn}}</view>
  11. 		<view class="row">totalAmount:{{orderData.orderBase && orderData.orderBase.totalAmount}}</view>
  12. 		<view class="row">status:{{orderData.orderBase && orderData.orderBase.status}}</view>
  13. 		<view class="order-items">
  14. 			<view class="order-item" v-for="(item,index) in orderData.orderItems" :key="index">
  15. 				<view class="item-row">id:{{item.id}}</view>
  16. 				<view class="item-row">orderId:{{item.orderId}}</view>
  17. 				<view class="item-row">orderSn:{{item.orderSn}}</view>
  18. 				<view class="item-row">productId:{{item.productId}}</view>
  19. 				<view class="item-row">productName:{{item.productName}}</view>
  20. 				<view class="item-row">productSn:{{item.productSn}}</view>
  21. 				<view class="item-row">productQuantity:{{item.productQuantity}}</view>
  22. 				<view class="item-row">productSkuId:{{item.productSkuId}}</view>
  23. 				<view class="item-row">productCategoryId:{{item.productCategoryId}}</view>
  24. 				<view class="item-row">realAmount:{{item.realAmount}}</view>
  25. 				<view class="item-row">totalPrice:{{item.totalPrice}}</view>
  26. 				<view class="item-row">productAttr:{{item.productAttr}}</view>
  27. 			</view>
  28. 		</view>
  29. 		<view>
  30. 			<button type="primary" @tap="save">确认付款</button>
  31. 		</view>
  32. 	</view>
  33. </template>
  34.  
  35. <script>
  36. 	import {getPreOrderById, addConfirmOrder} from '@/api/order/index.js'
  37. 	
  38. 	export default {
  39. 		data() {
  40. 			return {
  41. 				orderId:null,
  42. 				orderData:{},
  43. 				address:null
  44. 			};
  45. 		},
  46. 		methods: {
  47. 			save(){
  48. 				addConfirmOrder({
  49. 					addressId: uni.getStorageSync("b-address").id,
  50. 					orderId: this.orderId,
  51. 					orderItemList: this.orderData.orderItems,
  52. 					payType: "",
  53. 					sourceType: ""
  54. 				}).then(res=>{
  55. 					console.log(res)
  56. 					uni.showToast({
  57. 						title:`付款${res.message},订单号是${res.data.orderId},订单查询码是${res.data.ordersn},总金额是${res.data.totalAmount}`,
  58. 						icon:'none',
  59. 						mask:true,
  60. 						duration:2000
  61. 					});
  62. 					setTimeout(()=>{
  63. 						uni.switchTab({
  64. 							url:'/pages/home/home'
  65. 						});
  66. 					},1500);
  67. 					
  68. 				})
  69. 			}
  70. 		},
  71. 		onLoad(options) {
  72. 			this.orderId = options.orderId;
  73. 			getPreOrderById(this.orderId).then(res=>{
  74. 				console.log(res);
  75. 				this.orderData = res.data;
  76. 			})
  77. 		},
  78. 		onShow() {
  79. 			let address = uni.getStorageSync("b-address");
  80. 			this.address = address;
  81. 		}
  82. 	}
  83. </script>
  84.  
  85. <style lang="scss">
  86. .order{
  87. 	background-color: #F3EDE7;
  88. 	width: 100%;
  89. 	height: 100vh;
  90. 	
  91. 	.address{
  92. 		padding: 10rpx;
  93. 		.address-name{
  94. 			font-size: 40rpx;
  95. 			font-weight: bold;
  96. 		}
  97. 		
  98. 		.address-phone{
  99. 			font-size: 30rpx;
  100. 			margin-left: 100rpx;
  101. 		}
  102. 		
  103. 		.address-detail{
  104. 			font-size: 30rpx;
  105. 		}
  106. 	}
  107. 	
  108. 	.row{
  109. 		width: 100%;
  110. 		height: 30rpx;
  111. 		padding: 2rpx 10rpx;
  112. 		
  113. 	}
  114. 	
  115. 	.order-items{
  116. 		width: 90%;
  117. 		margin: 0 auto;
  118. 		background-color: #fff;
  119. 		border-radius: 30rpx;
  120. 		
  121. 		.order-item{
  122. 			min-height: 300rpx;
  123. 			margin-top: 20rpx;
  124. 			.item-row{
  125. 				font-size: 14px;
  126. 				min-height: 20rpx;
  127. 				line-height: 20rpx;
  128. 				padding: 2rpx 10rpx;
  129. 				margin-top: 15rpx;
  130. 				
  131. 			}
  132. 		}
  133. 	}
  134. }
  135. </style>

order address address.vue

  1. <template>
  2. 	<view class="address">
  3. 		<view class="row" v-for="item in addressList" :key="item.id" @tap="save(item)">
  4. 			<text class="item-name">{{item.name}}</text>
  5. 			<text class="item-address">{{item.province}}{{item.city}}{{item.region}}</text>
  6. 			<text class="item-detail">{{item.detailAddress}}</text>
  7. 		</view>
  8. 		
  9. 		<button type="default" @tap="add" style="background-color:#344B44; border-radius: 50rpx;color: white;">新增地址</button>
  10. 	</view>
  11. </template>
  12.  
  13. <script>
  14.  
  15. 	
  16. 	import {getAllAddress} from '@/api/order/address/index.js'
  17. 	import mix from '@/minxins/index.js'
  18. 	
  19. 	export default {
  20. 		mixins:[mix],
  21. 		data() {
  22. 			return {
  23. 				addressList:[]
  24. 			};
  25. 		},
  26. 		methods:{
  27. 			add(){
  28. 				
  29. 			},
  30. 			save(obj){
  31. 				uni.setStorageSync("b-address",obj);
  32. 				//回退一层
  33. 				uni.navigateBack({
  34. 					delta:1
  35. 				});
  36. 			}
  37. 		},
  38. 		onLoad() {
  39. 			//先判断是否登录
  40. 			if(!this.checkLogin()){
  41. 				uni.showToast({
  42. 					title:'请先登录',
  43. 					icon:'none'
  44. 				});
  45. 				return;
  46. 			}
  47. 			getAllAddress().then(res=>{
  48. 				console.log(res)
  49. 				this.addressList = res.data.items;
  50. 			})
  51. 		}
  52. 	}
  53. </script>
  54.  
  55. <style lang="scss">
  56. .address{
  57. 	background-color: #F3EDE7;
  58. 	width: 100%;
  59. 	height: 100vh;
  60. 	
  61. 	.row{
  62. 		width: 100%;
  63. 		height: 100rpx;
  64. 		line-height: 100rpx;
  65. 		border-bottom: 1px solid #E4DED9;
  66. 		
  67. 		.item-name{
  68. 			padding: 20rpx;
  69. 			font-size: 45rpx;
  70. 			margin-right: 40rpx;
  71. 		}
  72. 		
  73. 	}
  74. }
  75. </style>

app.vue

  1. <script>
  2. 	export default {
  3. 		onLaunch: function() {
  4. 			console.log('App Launch')
  5. 		},
  6. 		onShow: function() {
  7. 			console.log('App Show')
  8. 		},
  9. 		onHide: function() {
  10. 			console.log('App Hide')
  11. 		}
  12. 	}
  13. </script>
  14.  
  15. <style>
  16. 	/*每个页面公共css */
  17. 	* {
  18. 		padding: 0;
  19. 		margin: 0;
  20. 	}
  21. 	
  22. </style>

pages.json

  1. {
  2. 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
  3. 		{
  4. 			"path" : "pages/home/home",
  5. 			"style" : 
  6. 			{
  7. 				"navigationBarTitleText" : "首页",
  8. 				"enablePullDownRefresh" : false,
  9. 				//也可以去掉导航栏
  10. 				"navigationStyle": "custom"
  11. 				//在h5中，去掉导航栏
  12. 				// "h5": {
  13. 				// 	"titleNView": false
  14. 				// }
  15. 			}
  16. 		},
  17. 		{
  18. 			"path" : "pages/kind/kind",
  19. 			"style" : 
  20. 			{
  21. 				"navigationBarTitleText" : "分类",
  22. 				"enablePullDownRefresh" : false
  23. 			}
  24. 		},
  25. 		{
  26. 			"path" : "pages/find/find",
  27. 			"style" : 
  28. 			{
  29. 				"navigationBarTitleText" : "发现",
  30. 				"enablePullDownRefresh" : false
  31. 			}
  32. 		},
  33. 		{
  34. 			"path" : "pages/mine/mine",
  35. 			"style" : 
  36. 			{
  37. 				"navigationBarTitleText" : "我的",
  38. 				"enablePullDownRefresh" : false
  39. 			}
  40. 		},
  41. 		{
  42. 			"path" : "pages/index/index",
  43. 			"style" : 
  44. 			{
  45. 				"navigationBarTitleText" : "",
  46. 				"enablePullDownRefresh" : false
  47. 			}
  48. 		},
  49. 		{
  50. 			"path": "pages/index2/index2",
  51. 			"style": {
  52. 				"navigationBarTitleText": "首页",
  53. 				"enablePullDownRefresh" : false
  54. 			}
  55. 		},
  56. 		{
  57. 			"path" : "pages/kind/list/list",
  58. 			"style" : 
  59. 			{
  60. 				"navigationBarTitleText" : "",
  61. 				"enablePullDownRefresh" : false
  62. 			}
  63. 		},
  64. 		{
  65. 			"path" : "pages/kind/goods/goods",
  66. 			"style" : 
  67. 			{
  68. 				"navigationBarTitleText" : "",
  69. 				"enablePullDownRefresh" : true
  70. 				
  71. 			}
  72. 		},
  73. 		{
  74. 			"path" : "pages/info/info",
  75. 			"style" : 
  76. 			{
  77. 				"navigationBarTitleText" : "",
  78. 				"enablePullDownRefresh" : false
  79. 			}
  80. 		},
  81. 		{
  82. 			"path" : "pages/mine/login/login",
  83. 			"style" : 
  84. 			{
  85. 				"navigationBarTitleText" : "",
  86. 				"enablePullDownRefresh" : false
  87. 			}
  88. 		},
  89. 		{
  90. 			"path" : "pages/mine/register/register",
  91. 			"style" : 
  92. 			{
  93. 				"navigationBarTitleText" : "",
  94. 				"enablePullDownRefresh" : false
  95. 			}
  96. 		},
  97. 		{
  98. 			"path" : "pages/order/order",
  99. 			"style" : 
  100. 			{
  101. 				"navigationBarTitleText" : "",
  102. 				"enablePullDownRefresh" : false
  103. 			}
  104. 		},
  105. 		{
  106. 			"path" : "pages/order/address/address",
  107. 			"style" : 
  108. 			{
  109. 				"navigationBarTitleText" : "",
  110. 				"enablePullDownRefresh" : false
  111. 			}
  112. 		}
  113. 	],
  114. 	"globalStyle": {
  115. 		"navigationBarTextStyle": "black",
  116. 		"navigationBarTitleText": "uni-app",
  117. 		"navigationBarBackgroundColor": "#F8F8F8",
  118. 		"backgroundColor": "#F8F8F8"
  119. 	},
  120. 	"uniIdRouter": {},
  121. 	"tabBar": {
  122. 		"color": "#7A7E83",
  123. 		"selectedColor": "#3cc51f",
  124. 		"borderStyle": "black",
  125. 		"backgroundColor": "#ffffff",
  126. 		"list": [
  127. 			{
  128. 				"pagePath": "pages/home/home",
  129. 				"iconPath": "static/images/icon1.png",
  130. 				"selectedIconPath": "static/images/icon2.png",
  131. 				"text": "首页"
  132. 			}, 
  133. 			{
  134. 				"pagePath": "pages/kind/kind",
  135. 				"iconPath": "static/images/icon1.png",
  136. 				"selectedIconPath": "static/images/icon2.png",
  137. 				"text": "分类"
  138. 			}, 
  139. 			{
  140. 				"pagePath": "pages/find/find",
  141. 				"iconPath": "static/images/icon1.png",
  142. 				"selectedIconPath": "static/images/icon2.png",
  143. 				"text": "发现"
  144. 			}, 
  145. 			{
  146. 				"pagePath": "pages/mine/mine",
  147. 				"iconPath": "static/images/icon1.png",
  148. 				"selectedIconPath": "static/images/icon2.png",
  149. 				"text": "我的"
  150. 			}
  151. 		]
  152. 	}
  153. }
  154.  
  155. /*
  156. 接口文档
  157. http://leju.bufan.cloud/swagger-ui.html#/23458251433147158583614129289367102716922359/addCartUsingPOST_1
  158.  
  159. */

测试

首页

 分类

 我的

 登录

 注册

二级分类

 商品列表

商品详情

 立即购买

 初始订单

 地址列表

 确认付款

以上就是全部代码了，虽然我没有按照视频教程中的内容把剩余的步骤完成。但是这个我学习的差不多了，需要吸收一下。

后续如果我还有uniapp的代码，还是会贴出来的。

感谢大家。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/652003
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号