速智手机APP编程第一课:初学 uniapp

代码如下:

<template>
	<view>
		<!--	
			先看下面 <script> 中 data 模块中的变量定义
			
		block 空标签 只为判断,v-if  判断 服务器返回值StatusCode是否等于200
		判断为真是  开始循环  v-for 渲染数据
		-->
		<view class="title">产品列表</view>

		<view>
			<block v-if="StatusCode==200">
				<view v-for="(Sp, i) in goods" :key="Sp.Id">
					<text class="Id">{{ (i+1)+(pageCurrent-1) * pageSize}}</text>
					<text>
						名称:{{ Sp.GoodsName }},类型:{{ Sp.GoodsType }},数量:{{ Sp.Quantity }},单位:{{ Sp.Unit }},规格:{{ Sp.Specifications }}</text>

				</view>
				<view>共:{{nMax}}条数据;共 {{pageCount}} 页;当前第: {{ pageCurrent }} 页</view>
				<label for="">页码：</label>
				<input class="weui-input input" confirm-type="search" @confirm="searchClick" auto-focus
					placeholder="输入页码" />


			</block>
			<block v-else>
				<text>数据异常404!</text>
			</block>



		</view>
	</view>
</template>

<script>
	//引入集中管理API js
	var api = require('@/common/http.api.js');
	//定义常量取得域名
	const host = api.HOST;

	export default {
		data() {
			return {
				StatusCode: 0, //服务端返回状态码
				goods: {}, //商品列表,用空数组接收            

				pageCurrent: 1, //当前页码
				pageSize: 5, //每页行数
				nMax: 0, //总记录数
				pageCount: 0, //总页数

				//商品字段
				Sp: {
					GoodsName: '',
					GoodsType: '',
					Quantity: '',
					Unit: '',
					Specifications: '',
					StockHouse: '',
					CreateTime: ''

				},
				
				//索引值 并作为行号 
				i: 0
			};
		},
		methods: {
			searchClick: function(e) {
				this.pageCurrent = e.detail.value;
				this.loaddata(e.detail.value);
			},

			//自定义一个函数 获取服务端API数据 参数1 当前页码,参数2 每页条数
			loaddata: function(pagenum = 1, limit = 5) {
				var that = this;
				var pages=0;
				//利用load加载层
				uni.showLoading({
					title: '数据加载中...',
					mask: true,
					success() {
						//用uniapi 发起请求 帮助文档 https://uniapp.dcloud.io/api/request/request
						uni.request({
							url: host + 'api/goods/GoodsList',
							data: {
								page: that.pageCurrent,
								limit: that.pageSize
							},
							success(res) {
								that.StatusCode = res.data.Code;
								if (that.StatusCode == 200) {
									that.pageCurrent = pagenum;
									that.goods = res.data.Data;
									that.nMax = res.data.count;
									pages=(that.nMax / that.pageSize)
									if ((that.nMax % that.pageSize) > 0) pages++;
									that.pageCount = parseInt(pages); //计算出总页数

								} else {
									uni.showToast({
										title: '网络请求异常,错误:' + res.code
									});
								}


							}
						});

					}
				});
				//200ms关闭load层
				setTimeout(function() {
					uni.hideLoading();
				}, 200);



			}
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,

		onLoad: function(options) {
			this.loaddata();
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {}

	};
</script>
<style>
	/* pages/Goods/Goods.wxss */
	.input {

		border: 1rpx solid red;
		flex-direction: column;
		align-items: center;
		font-size: large;
		color: rgb(39, 6, 226);
		margin: 30rpx;
		padding: 10rpx;
		width: 50%;
	}

	.title {
		text-align: center;
		margin: 10rpx;
		font-size: large;
		background-color: blue;
		padding: 20rpx;
		color: white;

	}

	.Id {


		border-radius: 15rpx;
		background-color: red;
		color: white;
		font-size: small;
	}
</style>