新增

App.vue

@@ -1,11 +1,8 @@
 <script>
 	export default {
-		onLaunch: function() {
+		onLaunch: function() {},
-		},
+		onShow: function() {},
-		onShow: function() {
+		onHide: function() {}
-		},
-		onHide: function() {
-		}
 	}
 </script>
 

pages/CommodityDetails/CommodityDetails.vue

@@ -6,27 +6,25 @@
 				<!-- <swiper-item v-for="(item ,index) in info" :key="index">
 				</swiper-item> -->
 				<swiper-item>
-					<image style='width:100%;height:750rpx' src="../../static/spjtcs.png" mode=""></image>
+					<image style='width:100%;height:750rpx' :src="baseurl+goodsDetailslist.goodsPictureUrl" mode="">
+					</image>
 				</swiper-item>
 			</swiper>
 		</uni-swiper-dot>
-		<view class="Commodity common" v-for="(item,index) in goodsDetails" :key="index">
+		<view class="Commodity common">
 			<view class="name">
-				{{item.goodsName}}
+				{{goodsDetailslist.goodsName}}
-			</view>
-			<view class="number">
-				200{{item.goodsUnit}}
 			</view>
 			<view class="price">
-				￥{{item.goodsPrice}}
+				￥{{goodsPrice}} 起
 			</view>
 		</view>
-		<view class="choice common"  v-for="(item,index) in goodsDetails" @tap="buyshow=true">
+		<view class="choice common" @tap="buyshow=true">
 			<view class="selected">
 				已选
 			</view>
 			<view class="content">
-				酒精棉片 8盒×1
+				{{updata.goodsAttributeName}}
 			</view>
 			<image src="../../static/jiantou.png" mode=""></image>
 		</view>
@@ -55,45 +53,55 @@
 			<view class="selected">
 				图文服务
 			</view>
-			<image src="../../static/tpcs.png" mode=""></image>
+			<image :src="baseurl+goodsDetailslist.goodsPictureUrl" mode=""></image>
 		</view>
 		<view class="Purchasecolumn">
 			<view class="buy" @tap="buyshow=true">
 				立即购买
 			</view>
 		</view>
-
 		<u-mask :show="buyshow" @click="buyshow = false" class='mask'>
 			<view class="PurchasePage" @click.stop=''>
 				<image class="close" src="../../static/gb.png" mode="" @tap='buyshow=false'></image>
+				</image>
 				<view class="topcontent">
 					<view class="image">
-						<image src="../../static/tpcs.png" mode=""></image>
+						<image :src="baseurl+goodsDetailslist.goodsPictureUrl" mode=""></image>
 					</view>
 					<view class="title">
-						<span>酒精棉片</span> <span style='margin-left: 30rpx;'>200片</span>
+						<span>{{goodsDetailslist.goodsName}}</span>
 					</view>
 					<view class="price">
-						￥36.0
+						￥{{updata.goodsPrice}}
 					</view>
 				</view>
 				<view class="centercontent topcontent">
 					<view class="header">
-						型号
+						商品规格
 					</view>
-					<view class="Productmodel">
+					<view v-for="(item,index) in goodDetailsLists"
-						酒精棉片 8盒
+						:class="item.isActive ? 'Productmodel':'productmodel'" @tap='isActivegoods(item)'>
+						{{item.attributeDetailsName}}
 					</view>
 				</view>
+				<!-- <view class="centercontent topcontent" v-for="(item,index) in goodDetailsLists">
+					<view class="header">
+						{{item.attributeName}}
+					</view>
+					<view v-for="bitem in item.goodAttributeDetailsLists" :key="bitem.attributeDetailsId"
+						:class="bitem.isActive ? 'Productmodel':'productmodel'" @tap='isActivegoods(item,bitem)'>
+						{{bitem.attributeDetailsName}}
+					</view>
+				</view> -->
 				<view class="bottomcontent topcontent">
 					<view class="header">
 						数量
 					</view>
 					<view class="number">
-						<u-number-box :min="1" :max="999"></u-number-box>
+						<u-number-box :min="1" :max="999" v-model="updata.goodsCount"></u-number-box>
 					</view>
 				</view>
-				<view class="buy">
+				<view class="buy" @tap="tapbuy">
 					立即购买
 				</view>
 			</view>
@@ -106,33 +114,115 @@
 		goodsDetails
 	} from '@/api/CommodityDetails/CommodityDetails.js'
 	import baseurl from '@/api/baseurl.js'
-
 	export default {
 		data() {
 			return {
-				goodsDetails:[],
+				baseurl: '', //url
-				goodsInfoId:"1",
+				goodsPrice: '', //页面价格
+				goodsDetailslist: [], //商品list
+				goodDetailsLists: [], //提前预备商品规格数组
 				buyshow: false, //立即购买遮罩层开关
-				//轮播内容
+				info: [{}],
-				info: [{
-					content: '内容 A'
-				}],
 				current: 0, //轮播初始下标
 				mode: 'dot', //轮播点样式
 				swiperDotIndex: 0, //轮播可视图
 				number: 1, //数量
+				updata: { //订单
+					goodsPrice: 0.00,
+					goodsName: "",
+					goodsAttributeName: '',
+					goodsCount: 1,
+					nurseStationId: '',
+					img: '',
+					totalprice: null,
+				}
 			};
 		},
-
-		onLoad(options) {
-			//获取传值
-			console.log(options)
-			this.goodsDetailsinfo()
-			// this.title = options.title
-			this.goodsInfoId = options.goodsInfoId
-			// this.goodsListinfo()
-		},
 		methods: {
+			//立即购买跳转确认订单页面
+			tapbuy() {
+				this.updata.totalprice = (this.updata.goodsPrice * this.updata.goodsCount).toFixed(2)
+				console.log(this.updata)
+			},
+			// tapbuy() {
+			// 	this.goodsDetailslist.goodDetailsLists.forEach(e => {
+			// 		e.goodAttributeDetailsLists.forEach(el => {
+			// 			if (el.isActive == true) {
+			// 				this.updata.goodsAttributeName += el.attributeDetailsName + '  '
+			// 				this.updata.totalprice = (this.updata.goodsPrice * this.updata.goodsCount)
+			// 					.toFixed(2)
+			// 			}
+			// 		})
+			// 	})
+			// },
+			//选择商品
+			isActivegoods(item) {
+				this.updata.goodsPrice = 0
+				this.updata.goodsAttributeName = ''
+				if (item.isActive == true) {
+					this.goodDetailsLists.forEach(e => {
+						e.isActive = false
+					})
+				} else {
+					this.goodDetailsLists.forEach(e => {
+						e.isActive = false
+					})
+					item.isActive = true
+					this.updata.goodsAttributeName = item.attributeDetailsName
+					this.updata.goodsPrice = item.goodsPrice
+					this.updata.goodsPrice = this.updata.goodsPrice.toFixed(2)
+				}
+			},
+
+			// isActivegoods(item, bitem) {
+			// 	if (item.attributeName.includes('服务')) {} else {
+			// 		if (bitem.isActive == true) {
+			// 			item.goodAttributeDetailsLists.forEach(e => {
+			// 				e.isActive = false
+			// 			})
+			// 		} else {
+			// 			item.goodAttributeDetailsLists.forEach(e => {
+			// 				e.isActive = false
+			// 			})
+			// 			bitem.isActive = true
+			// 		}
+			// 	}
+			// 	this.updata.goodsPrice = 0
+			// 	this.updata.goodsAttributeName = ''
+			// 	this.goodsDetailslist.goodDetailsLists.forEach(e => {
+			// 		e.goodAttributeDetailsLists.forEach(el => {
+			// 			if (el.isActive == true) {
+			// 				this.updata.goodsPrice += el.goodsPrice
+			// 				this.updata.goodsAttributeName += el.attributeDetailsName + '  '
+			// 			}
+			// 		})
+			// 	})
+			// 	this.updata.goodsPrice = this.updata.goodsPrice.toFixed(2)
+			// },
+			// 查询商品详细信息
+			goodsDetailsinfo(goodsInfoId) {
+				goodsDetails(goodsInfoId).then(res => {
+					res.data[0].goodDetailsLists.forEach(e => {
+						e.isActive = false
+					})
+					this.goodsDetailslist = res.data[0]
+					this.updata.goodsName = this.goodsDetailslist.goodsName
+					this.updata.nurseStationId = this.goodsDetailslist.nurseStationId
+					this.updata.img = this.goodsDetailslist.goodsPictureUrl
+					this.goodDetailsLists = res.data[0].goodDetailsLists
+					// res.data[0].goodDetailsLists.forEach(e => {
+					// 	e.goodAttributeDetailsLists.forEach(el => {
+					// 		el.isActive = false
+					// 		el.goodsPrice = Number(el.goodsPrice)
+					// 	})
+					// })
+					// this.goodsDetailslist = res.data[0]
+					// this.updata.goodsName = this.goodsDetailslist.goodsName
+					// this.updata.nurseStationId = this.goodsDetailslist.nurseStationId
+					// this.updata.img = this.goodsDetailslist.goodsPictureUrl
+					// this.goodDetailsLists = res.data[0].goodDetailsLists
+				})
+			},
 			//滑动轮播切换
 			change(e) {
 				this.current = e.detail.current;
@@ -141,234 +231,15 @@
 			clickItem(e) {
 				this.swiperDotIndex = e
 			},
-			// 查询商品详细信息
+		},
-			goodsDetailsinfo(){
+		onLoad(options) { //获取传值
-				goodsDetails(this.goodsInfoId).then(res => {
+			this.goodsPrice = options.goodsPrice //页面价格
-					// res.data.forEach(e => {
+			this.baseurl = baseurl;
-					// 	e.goodsCatrgoryPicture = baseurl + e.goodsCatrgoryPicture
+			this.goodsDetailsinfo(options.goodsInfoId)
-					// })
+		},
-					this.goodsDetails = res.data
-					console.log(this.goodsDetails)
-				})
-			}
-		}
 	}
 </script>
 
 <style lang="scss">
-	.app {
+	@import "./CommodityDetailsstyle.scss";
-		.mask {
-			.PurchasePage {
-				position: fixed;
-				top: 40%;
-				width: 100%;
-				height: 60%;
-				background: #FFFFFF;
-				border-radius: 30rpx 30rpx 0px 0px;
-				font-size: 36rpx;
-
-				.close {
-					width: 31rpx;
-					height: 31rpx;
-					position: absolute;
-					top: 5%;
-					right: 5%;
-				}
-
-				.topcontent {
-					width: 90%;
-					margin: 0 auto;
-					padding-bottom: 24rpx;
-					border-bottom: 1rpx solid #D8D4D4;
-
-					.price {
-						color: #D43953;
-						position: absolute;
-						top: 23%;
-						left: 40%;
-					}
-
-					.title {
-						position: absolute;
-						top: 13%;
-						left: 40%;
-						font-weight: 600;
-					}
-
-					.image {
-						width: 215rpx;
-						height: 215rpx;
-						background: rgba(150, 147, 148, 0.21);
-						margin: 60rpx 0 0 0;
-
-						image {
-							width: 201rpx;
-							height: 201rpx;
-							margin: 7rpx 0 0 7rpx;
-						}
-
-					}
-				}
-
-				.buy {
-					width: 60%;
-					height: 71rpx;
-					background: #4C7BC9;
-					color: #FFFFFF;
-					text-align: center;
-					line-height: 71rpx;
-					border-radius: 26rpx;
-					margin: 40rpx 0 0 20%;
-				}
-
-				.bottomcontent {
-					margin-top: 34rpx;
-					padding-bottom: 35rpx;
-
-					.header {
-						display: inline-block;
-						vertical-align: middle;
-					}
-
-					.number {
-						display: inline-block;
-						position: absolute;
-						right: 10%;
-					}
-				}
-
-				.centercontent {
-					margin-top: 34rpx;
-					padding-bottom: 35rpx;
-
-					.Productmodel {
-						width: 344rpx;
-						height: 80rpx;
-						background: #ECF1FA;
-						border: 1rpx solid #4C7BC9;
-						line-height: 80rpx;
-						border-radius: 25rpx;
-						color: #4C7BC9;
-						text-align: center;
-						margin-top: 27rpx;
-					}
-				}
-			}
-		}
-
-		.Purchasecolumn {
-			width: 100%;
-			height: 110rpx;
-			background: #FFFFFF;
-			position: fixed;
-			bottom: 0;
-
-			.buy {
-				width: 263rpx;
-				height: 80rpx;
-				background: #4C7BC9;
-				border-radius: 25rpx;
-				font-size: 38rpx;
-				color: #FFFFFF;
-				line-height: 80rpx;
-				text-align: center;
-				position: absolute;
-				right: 5%;
-				top: 15rpx;
-			}
-		}
-
-		.common {
-			padding-left: 5%;
-		}
-
-		.choice,
-		.Discount,
-		.service {
-			height: 80rpx;
-			background: #FFFFFF;
-			box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
-			font-size: 34rpx;
-			line-height: 80rpx;
-			margin-bottom: 15rpx;
-			position: relative;
-
-			image {
-				width: 17rpx;
-				height: 26rpx;
-				position: absolute;
-				right: 5%;
-				top: 50%;
-				transform: translateY(-50%);
-			}
-
-			.content {
-				display: inline-block;
-				position: absolute;
-				left: 25%;
-			}
-
-			.selected {
-				color: #969394;
-				display: inline-block;
-			}
-		}
-
-		.picture {
-			background: #FFFFFF;
-			box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
-			position: relative;
-			padding-bottom: 110rpx;
-
-			.selected {
-				padding: 20rpx 0 0 5%;
-				color: #969394;
-				display: inline-block;
-			}
-
-			image {
-				margin-top: 20rpx;
-				height: 850rpx;
-				width: 100%;
-			}
-		}
-
-		.service {
-			height: 130rpx;
-			line-height: 65rpx;
-
-			.content {
-				display: inline-block;
-				position: absolute;
-				left: 25%;
-			}
-
-			.selected {
-				color: #969394;
-				display: inline-block;
-			}
-		}
-
-		.Commodity {
-			height: 160rpx;
-			background: #FFFFFF;
-			margin: 15rpx 0 15rpx 0;
-			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
-			font-size: 36rpx;
-			line-height: 75rpx;
-
-			.name,
-			.number {
-				display: inline-block;
-			}
-
-			.price {
-				color: #D43953;
-			}
-
-			.number {
-				padding-left: 30rpx;
-			}
-		}
-	}
 </style>

pages/CommodityDetails/CommodityDetailsstyle.scss

@@ -0,0 +1,246 @@
+.app {
+		.mask {
+			.PurchasePage {
+				position: fixed;
+				bottom: 0;
+				width: 100%;
+				background: #FFFFFF;
+				border-radius: 30rpx 30rpx 0px 0px;
+				font-size: 36rpx;
+				padding-bottom: 20rpx;
+
+				.close {
+					width: 31rpx;
+					height: 31rpx;
+					position: absolute;
+					top: 2%;
+					right: 2%;
+				}
+
+				.topcontent {
+					width: 90%;
+					margin: 0 auto;
+					padding-bottom: 24rpx;
+					border-bottom: 1rpx solid #D8D4D4;
+					position: relative;
+
+					.price {
+						color: #D43953;
+						position: absolute;
+						top: 60%;
+						left: 37%;
+					}
+
+					.title {
+						font-size: 36rpx;
+						position: absolute;
+						top: 12%;
+						left: 38%;
+						font-weight: 600;
+						width: 58%;
+						height: 85rpx;
+						display: -webkit-box;
+						-webkit-box-orient: vertical;
+						-webkit-line-clamp: 2;
+						overflow: hidden;
+					}
+
+					.image {
+						width: 215rpx;
+						height: 215rpx;
+						background: rgba(150, 147, 148, 0.21);
+						margin: 35rpx 0 0 0;
+
+						image {
+							width: 201rpx;
+							height: 201rpx;
+							margin: 7rpx 0 0 7rpx;
+						}
+
+					}
+				}
+
+				.buy {
+					width: 60%;
+					height: 71rpx;
+					background: #4C7BC9;
+					color: #FFFFFF;
+					text-align: center;
+					line-height: 71rpx;
+					border-radius: 26rpx;
+					margin: 40rpx 0 0 20%;
+				}
+
+				.bottomcontent {
+					margin-top: 34rpx;
+					padding-bottom: 35rpx;
+
+					.header {
+						display: inline-block;
+						vertical-align: middle;
+					}
+
+					.number {
+						display: inline-block;
+						position: absolute;
+						right: 10%;
+					}
+				}
+
+				.centercontent {
+					margin-top: 34rpx;
+					font-size: 36rpx;
+					.header {
+						margin-bottom: 20rpx;
+					}
+					.productmodel {
+						font-size: 24rpx;
+						display: inline-block;
+						width: 30%;
+						height: 60rpx;
+						border: 1rpx solid #D8D4D4;
+						line-height: 60rpx;
+						border-radius: 25rpx;
+						text-align: center;
+						margin: 15rpx 10rpx 0 0;
+					}
+
+					.Productmodel {
+						font-size: 24rpx;
+						display: inline-block;
+						width: 30%;
+						height: 60rpx;
+						background: #ECF1FA;
+						border: 1rpx solid #4C7BC9;
+						line-height: 60rpx;
+						border-radius: 25rpx;
+						color: #4C7BC9;
+						text-align: center;
+						margin: 15rpx 10rpx 0 0;
+					}
+				}
+			}
+		}
+
+		.Purchasecolumn {
+			width: 100%;
+			height: 110rpx;
+			background: #FFFFFF;
+			position: fixed;
+			bottom: 0;
+
+			.buy {
+				width: 263rpx;
+				height: 80rpx;
+				background: #4C7BC9;
+				border-radius: 25rpx;
+				font-size: 38rpx;
+				color: #FFFFFF;
+				line-height: 80rpx;
+				text-align: center;
+				position: absolute;
+				right: 5%;
+				top: 15rpx;
+			}
+		}
+
+		.common {
+			padding-left: 5%;
+		}
+
+		.choice,
+		.Discount,
+		.service {
+			height: 80rpx;
+			background: #FFFFFF;
+			box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
+			font-size: 34rpx;
+			line-height: 80rpx;
+			margin-bottom: 15rpx;
+			position: relative;
+
+			image {
+				width: 17rpx;
+				height: 26rpx;
+				position: absolute;
+				right: 5%;
+				top: 50%;
+				transform: translateY(-50%);
+			}
+
+			.content {
+				width: 65%;
+				display: inline-block;
+				position: absolute;
+				left: 25%;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				white-space: nowrap;
+				color: #000111;
+			}
+
+			.selected {
+				color: #969394;
+				display: inline-block;
+			}
+		}
+
+		.picture {
+			background: #FFFFFF;
+			box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
+			position: relative;
+			padding-bottom: 110rpx;
+
+			.selected {
+				padding: 20rpx 0 0 5%;
+				color: #969394;
+				display: inline-block;
+			}
+
+			image {
+				margin-top: 20rpx;
+				height: 850rpx;
+				width: 100%;
+			}
+		}
+
+		.service {
+			height: 130rpx;
+			line-height: 65rpx;
+
+			.content {
+				display: inline-block;
+				position: absolute;
+				left: 25%;
+			}
+
+			.selected {
+				color: #969394;
+				display: inline-block;
+			}
+		}
+
+		.Commodity {
+			background: #FFFFFF;
+			margin: 15rpx 0 15rpx 0;
+			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
+			font-size: 36rpx;
+			line-height: 60rpx;
+
+			.name,
+			.number {
+				width: 100%;
+				display: inline-block;
+				line-height: 50rpx;
+			}
+
+			.price {
+				color: #D43953;
+				line-height: 70rpx;
+			}
+
+			.number {
+				padding-left: 30rpx;
+			}
+		}
+	}

pages/InformationFilling/InformationFilling.vue

@@ -112,7 +112,7 @@
 			height: 373rpx;
 			background: #FFFFFF;
 			box-shadow: 0rpx 9rpx 3r1px 9rpx rgba(0, 0, 0, 0.03);
-			border-radius: 20px;
+			border-radius: 20rpx;
 			margin: 0 auto;
 			display: block;
 			font-size: 36rpx;
@@ -147,7 +147,7 @@
 			background: #FFFFFF;
 			font-size: 36rpx;
 			box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
-			border-radius: 20px;
+			border-radius: 20rpx;
 			margin-top: 15rpx;
 			font-size: 36rpx;
 
@@ -159,8 +159,8 @@
 			width: 99%;
 			height: 105rpx;
 			background: #FFFFFF;
-			box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
+			box-shadow: 0px 9rpx 31rpx 9px rgba(0, 0, 0, 0.03);
-			border-radius: 20px;
+			border-radius: 20rpx;
 			margin-top: 15rpx;
 			font-size: 36rpx;
 

pages/ProductList/ProductList.vue

@@ -2,14 +2,16 @@
 	<view class="app">
 		<view class="productlist">
 			<view class="item" @tap='goCommodityDetails(item)' v-for="(item,index) in goodsList" :key="index">
-				<image :src="item.goodsPictureUrl" mode=""></image>
+				<image :src="baseurl+item.goodsPictureUrl" mode=""></image>
 				<view class="title">
-					{{item.goodsName}}  1{{item.goodsUnit}}
+					{{item.goodsName}}
 				</view>
 				<view class="price">
 					￥{{item.goodsPrice}}
 				</view>
 			</view>
+			<view class="item" v-if="goodsList.length%2!=0">
+			</view>
 		</view>
 	</view>
 </template>
@@ -22,44 +24,59 @@
 	export default {
 		data() {
 			return {
+				baseurl: '',
 				title: '医路优品', //导航栏标题
 				pageNum: 1,
-				pageSize: 999,
+				pageSize: 10,
-				goodsCategoryId:"",
+				goodsCategoryId: '', //请求值
-				goodsList:[],
+				goodsList: [], //商品列表list
+				total: 0, //list总长度
 			};
 		},
-		onReady() {
+		onLoad(options) { //获取传值
-			//更改导航栏文字
+			this.title = options.title //导航栏标题
+			this.goodsCategoryId = options.goodsCategoryId //请求id
+			this.baseurl = baseurl;
+			this.goodsListinfo(this.pageSize, this.pageNum, options.goodsCategoryId)
+		},
+		methods: {
+			// 查询商品列表
+			goodsListinfo(pageSize, pageNum, goodsCategoryId) {
+				goodsList(pageSize, pageNum, goodsCategoryId).then(res => {
+					res.rows.forEach(e => {
+						this.goodsList.push(e)
+					})
+					this.total = res.total
+				})
+			},
+			//跳转详情页
+			goCommodityDetails(item) {
+				uni.navigateTo({
+					url: `/pages/CommodityDetails/CommodityDetails?goodsPrice=${item.goodsPrice}&goodsInfoId=${item.goodsInfoId}`
+				})
+			},
+		},
+		onReady() { //更改导航栏文字
 			uni.setNavigationBarTitle({
 				title: this.title,
 			});
 		},
-		onLoad(options) {
+		onReachBottom() { //下滑加载
-			//获取传值
+			if (this.goodsList.length >= this.total) {} else {
-			console.log(options)
+				this.pageNum++;
-			this.title = options.title
+				this.goodsListinfo(this.pageSize, this.pageNum, this.goodsCategoryId)
-			this.goodsCategoryId = options.goodsCategoryId
+			}
-			this.goodsListinfo()
 		},
-		methods: {
+		onPullDownRefresh() { //下拉刷新
-			// 查询商品列表
+			this.pageNum = 1;
-			goodsListinfo(){
+			goodsList(this.pageSize, this.pageNum, this.goodsCategoryId).then(res => {
-				goodsList(this.patientId).then(res => {
+				this.goodsList = res.rows
-					res.data.forEach(e => {
+				this.total = res.total
-						e.goodsPictureUrl = baseurl + e.goodsPictureUrl
 			})
-					this.goodsList = res.data
+			setTimeout(function() {
-					console.log(this.goodsCategoryList)
+				uni.stopPullDownRefresh();
-				})
+			}, 1000);
-			},
+		}
-			//跳转详情页
-			goCommodityDetails() {
-				uni.navigateTo({
-					url: '/pages/CommodityDetails/CommodityDetails'
-				})
-			},
-		},
 	}
 </script>
 
@@ -93,6 +110,9 @@
 					color: #000000;
 					line-height: 69rpx;
 					padding-left: 20rpx;
+					text-overflow: ellipsis;
+					overflow: hidden;
+					white-space: nowrap;
 				}
 
 				image {

pages/appointmenttime/appointmenttime.vue

@@ -353,7 +353,6 @@
 		.Consumablespackage {
 			width: 94%;
 			height: 188rpx;
-			;
 			margin: 10rpx auto;
 			padding: 3%;
 			font-size: 35rpx;

pages/doctorslist/doctorslist.scss

@@ -0,0 +1,60 @@
+.app {
+		.visual {
+			text-align: center;
+			width: 94%;
+			margin: 0 auto;
+			background-color: #F4F5F7;
+			padding-top: 20rpx;
+			display: flex;
+
+			.list {
+				width: 72%;
+				background: #FFFFFF;
+				box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
+				border-radius: 0px 20rpx 20rpx 0px;
+				padding-bottom: 100rpx;
+
+				.information {
+					width: 90%;
+					position: relative;
+					margin: 37rpx auto 0;
+					padding-bottom: 60rpx;
+					border-bottom: 1rpx solid #D8D4D4;
+
+					.name {
+						font-size: 36rpx;
+						position: absolute;
+						left: 45%;
+						top: 10%;
+					}
+
+					.image {
+						width: 135rpx;
+						height: 138rpx;
+						background: #BFBFBF;
+						border-radius: 25rpx;
+						margin-left: 6%;
+					}
+				}
+			}
+
+			.department {
+				width: 28%;
+
+				.item {
+					line-height: 100rpx;
+					width: 100%;
+					height: 100rpx;
+					background: #ffffff;
+					box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
+					border-radius: 20rpx 0px 0px 20rpx;
+					margin-bottom: 6rpx;
+				}
+
+				.departmentitem {
+					background: #4C7BC9;
+					color: #ffffff;
+				}
+			}
+		}
+	}

pages/doctorslist/doctorslist.vue

@@ -48,64 +48,5 @@
 </script>
 
 <style lang="scss">
-	.app {
+	@import "./doctorslist.scss";
-		.visual {
-			text-align: center;
-			width: 94%;
-			margin: 0 auto;
-			background-color: #F4F5F7;
-			padding-top: 20rpx;
-			display: flex;
-
-			.list {
-				width: 72%;
-				background: #FFFFFF;
-				box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
-				border-radius: 0px 20rpx 20rpx 0px;
-				padding-bottom: 100rpx;
-
-				.information {
-					width: 90%;
-					position: relative;
-					margin: 37rpx auto 0;
-					padding-bottom: 60rpx;
-					border-bottom: 1rpx solid #D8D4D4;
-
-					.name {
-						font-size: 36rpx;
-						position: absolute;
-						left: 45%;
-						top: 10%;
-					}
-
-					.image {
-						width: 135rpx;
-						height: 138rpx;
-						background: #BFBFBF;
-						border-radius: 25rpx;
-						margin-left: 6%;
-					}
-				}
-			}
-
-			.department {
-				width: 28%;
-
-				.item {
-					line-height: 100rpx;
-					width: 100%;
-					height: 100rpx;
-					background: #ffffff;
-					box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
-					border-radius: 20rpx 0px 0px 20rpx;
-					margin-bottom: 6rpx;
-				}
-
-				.departmentitem {
-					background: #4C7BC9;
-					color: #ffffff;
-				}
-			}
-		}
-	}
 </style>

pages/homepage/homepage.vue

@@ -13,29 +13,31 @@
 					就医
 				</view>
 			</view>
-			<view class="item knowledge">
-				<image src="../../static/zs.png" mode=""></image>
-				<view class="title">
-					健康知识
-				</view>
-			</view>
 			<view class="elderly item">
 				<image src="../../static/ylfw.png" mode=""></image>
-				<view class="title" style="font-size: 42rpx;">
+				<view class="title" style="font-size: 40rpx;">
 					国家老年病中心
 				</view>
 			</view>
-			<view class="smallitem">
+			<view class="item Bodyguard">
 				<image src="../../static/pb.png" mode=""></image>
 				<view class="title">
 					体卫融合
 				</view>
 			</view>
-			<view style="width:56% ;">
+			<view class="item knowledge">
+				<image src="../../static/zs.png" mode=""></image>
+				<view class="title">
+					专病管理
+				</view>
+			</view>
+			<view class='item shopping' @tap="goshopping">
+				<image src="../../static/shopping.png" mode=""></image>
+				<view class="title">
+					商城
+				</view>
 			</view>
 		</view>
-
-
 	</view>
 </template>
 
@@ -45,6 +47,12 @@
 			return {};
 		},
 		methods: {
+			//跳转商城页面
+			goshopping() {
+				uni.navigateTo({
+					url: '/pages/shopping/shopping'
+				})
+			},
 			//跳转就医页面
 			gomedicine() {
 				uni.navigateTo({
@@ -57,48 +65,21 @@
 
 <style lang="scss">
 	.app {
-		// background-color: #F4F5F7;
-		// width: 100%;
-		// height: 100vh;
-		// position: relative;
-
 		.cards {
-
+			.shopping {
-			.smallitem {
+				background: #F58540;
-				width: 30%;
-				height: 200rpx;
-				margin-bottom: 40rpx;
-				border-radius: 25rpx;
-				position: relative;
-				background: #9E4DD0;
-
-				.title {
-					width: 90%;
-					text-align: center;
-					font-size: 26rpx;
-					color: #FCFCFC;
-					position: absolute;
-					top: 60%;
-					left: 50%;
-					transform: translateX(-50%);
 			}
 
-				image {
+			.Bodyguard {
-					width: 70rpx;
+				background-color: #00C176;
-					height: 70rpx;
-					position: absolute;
-					top: 20%;
-					left: 50%;
-					transform: translateX(-50%);
-				}
 			}
 
 			.knowledge {
-				background-color: #E1AE3C;
+				background: #9E4DD0;
 			}
 
 			.elderly {
-				background-color: #00C176;
+				background-color: #E1AE3C;
 			}
 
 			.expert {

pages/information/information.scss

@@ -0,0 +1,141 @@
+.app {
+		.service {
+			width: 90%;
+			margin: 0 auto;
+			padding-bottom: 15rpx;
+
+			.Multiplechoice {
+				font-size: 32rpx;
+				color: #FFFFFF;
+				width: 100%;
+
+				.choices {
+					background: #4C7BC9;
+					display: inline-block;
+					text-align: center;
+					line-height: 70rpx;
+					width: 190rpx;
+					height: 70rpx;
+					border-radius: 26rpx;
+					margin: 30rpx 30rpx 0 0;
+				}
+
+				.choice {
+					display: inline-block;
+					text-align: center;
+					line-height: 70rpx;
+					width: 190rpx;
+					height: 70rpx;
+					background: #BFBFBF;
+					border-radius: 26rpx;
+					margin: 30rpx 30rpx 0 0;
+				}
+			}
+
+			.title {
+				font-size: 36rpx;
+				padding-top: 36rpx;
+			}
+		}
+
+		.info {
+			width: 94%;
+			margin: 0 auto 20rpx;
+			background-color: #FFFFFF;
+			border-radius: 20rpx;
+			padding-bottom: 5rpx;
+			box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
+		}
+
+
+		.userinfo {
+			.item {
+				width: 90%;
+				margin: 0 auto;
+				height: 120rpx;
+				line-height: 120rpx;
+				border-bottom: 1rpx solid #D8D4D4;
+				display: flex;
+
+				view {
+					height: 120rpx;
+					font-size: 32rpx;
+					line-height: 120rpx;
+				}
+
+				span {
+					display: inline-block;
+					line-height: 120rpx;
+					height: 120rpx;
+					width: 30%;
+					font-size: 32rpx;
+				}
+
+				::v-deep .u-input__input {
+					height: 120rpx;
+					font-size: 32rpx;
+				}
+
+				::v-deep .uni-input-wrapper {
+					height: 120rpx;
+					line-height: 120rpx;
+				}
+
+				::v-deep .u-input {
+					width: 70%;
+					height: 120rpx;
+					line-height: 120rpx;
+				}
+			}
+
+			.item:nth-child(6) {
+				border: 0;
+			}
+		}
+
+		.mask {
+			.information {
+				width: 70%;
+				height: 400rpx;
+				margin: 50% auto;
+				background: #FFFFFF;
+				border-radius: 30rpx;
+				text-align: center;
+				color: #FFFFFF;
+				position: relative;
+
+				.determine,
+				.cancel {
+					width: 200rpx;
+					height: 70rpx;
+					border-radius: 26rpx;
+					font-size: 34rpx;
+					line-height: 70rpx;
+					position: absolute;
+					top: 74%;
+				}
+
+				.determine {
+					background: #4C7BC9;
+					right: 36rpx;
+				}
+
+				.cancel {
+					background: #C5BFBF;
+					left: 36rpx;
+				}
+
+				.title {
+					font-size: 42rpx;
+					margin-top: 40rpx;
+					color: #000000;
+				}
+
+				image {
+					width: 100rpx;
+					height: 100rpx;
+					margin: 10% 0 0 0;
+				}
+			}
+		}
+	}

pages/information/information.vue

@@ -199,145 +199,5 @@
 	}
 </script>
 <style lang="scss">
-	.app {
+	@import './information.scss';
-		.service {
-			width: 90%;
-			margin: 0 auto;
-			padding-bottom: 15rpx;
-
-			.Multiplechoice {
-				font-size: 32rpx;
-				color: #FFFFFF;
-				width: 100%;
-
-				.choices {
-					background: #4C7BC9;
-					display: inline-block;
-					text-align: center;
-					line-height: 70rpx;
-					width: 190rpx;
-					height: 70rpx;
-					border-radius: 26rpx;
-					margin: 30rpx 30rpx 0 0;
-				}
-
-				.choice {
-					display: inline-block;
-					text-align: center;
-					line-height: 70rpx;
-					width: 190rpx;
-					height: 70rpx;
-					background: #BFBFBF;
-					border-radius: 26rpx;
-					margin: 30rpx 30rpx 0 0;
-				}
-			}
-
-			.title {
-				font-size: 36rpx;
-				padding-top: 36rpx;
-			}
-		}
-
-		.info {
-			width: 94%;
-			margin: 0 auto 20rpx;
-			background-color: #FFFFFF;
-			border-radius: 20rpx;
-			padding-bottom: 5rpx;
-			box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
-		}
-
-
-		.userinfo {
-			.item {
-				width: 90%;
-				margin: 0 auto;
-				height: 120rpx;
-				line-height: 120rpx;
-				border-bottom: 1rpx solid #D8D4D4;
-				display: flex;
-
-				view {
-					height: 120rpx;
-					font-size: 32rpx;
-					line-height: 120rpx;
-				}
-
-				span {
-					display: inline-block;
-					line-height: 120rpx;
-					height: 120rpx;
-					width: 30%;
-					font-size: 32rpx;
-				}
-
-				::v-deep .u-input__input {
-					height: 120rpx;
-					font-size: 32rpx;
-				}
-
-				::v-deep .uni-input-wrapper {
-					height: 120rpx;
-					line-height: 120rpx;
-				}
-
-				::v-deep .u-input {
-					width: 70%;
-					height: 120rpx;
-					line-height: 120rpx;
-				}
-			}
-
-			.item:nth-child(6) {
-				border: 0;
-			}
-		}
-
-		.mask {
-			.information {
-				width: 70%;
-				height: 400rpx;
-				margin: 50% auto;
-				background: #FFFFFF;
-				border-radius: 30rpx;
-				text-align: center;
-				color: #FFFFFF;
-				position: relative;
-
-				.determine,
-				.cancel {
-					width: 200rpx;
-					height: 70rpx;
-					border-radius: 26rpx;
-					font-size: 34rpx;
-					line-height: 70rpx;
-					position: absolute;
-					top: 74%;
-				}
-
-				.determine {
-					background: #4C7BC9;
-					right: 36rpx;
-				}
-
-				.cancel {
-					background: #C5BFBF;
-					left: 36rpx;
-				}
-
-				.title {
-					font-size: 42rpx;
-					margin-top: 40rpx;
-					color: #000000;
-				}
-
-				image {
-					width: 100rpx;
-					height: 100rpx;
-					margin: 10% 0 0 0;
-				}
-			}
-		}
-	}
 </style>

pages/login/login.scss

@@ -0,0 +1,89 @@
+	.app {
+		font-family: DengXian;
+		color: #C3C1C1;
+		font-weight: 400;
+
+		.switch {
+			text-align: center;
+			height: 100rpx;
+			color: #46ABD7;
+			position: absolute;
+			top: 67%;
+			left: 10%;
+		}
+
+		.loginbtn {
+			width: 80%;
+			height: 100rpx;
+			text-align: center;
+			line-height: 100rpx;
+			background: #4C7BC9;
+			border-radius: 51rpx;
+			font-size: 41rpx;
+			color: #FFFFFF;
+			position: absolute;
+			top: 57%;
+			left: 10%;
+		}
+
+		.loginphone {
+			background-color: #fff;
+			width: 80%;
+			height: 162rpx;
+			position: absolute;
+			left: 10%;
+			top: 23%;
+
+			input {
+				font-size: 45rpx;
+				color: #000000;
+			}
+
+			::v-deep .uni-input-placeholder {
+				padding-left: 40rpx;
+				font-size: 41rpx;
+				font-weight: 400;
+				color: #C3C1C1;
+			}
+
+			.phone {
+				padding-left: 40rpx;
+				height: 100%;
+				box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
+			}
+		}
+
+		.logincode {
+			position: absolute;
+			left: 10%;
+
+			.obtaincode {
+				text-align: center;
+				font-size: 37rpx;
+				color: #4C7BC9;
+				line-height: 162rpx;
+				position: absolute;
+				left: 65%;
+				top: 0%;
+			}
+
+			::v-deep .u-input__input {
+				padding-left: 20rpx;
+				color: #000000;
+				font-size: 42rpx;
+				font-weight: 400;
+				height: 100%;
+			}
+		}
+
+		.title {
+			height: 50rpx;
+			font-size: 52rpx;
+			font-weight: bold;
+			color: #000000;
+			line-height: 44rpx;
+			position: absolute;
+			top: 13%;
+			left: 13%;
+		}
+	}

pages/login/login.vue

@@ -257,93 +257,5 @@
 </script>
 
 <style lang="scss">
-	.app {
+	@import "./login.scss";
-		font-family: DengXian;
-		color: #C3C1C1;
-		font-weight: 400;
-
-		.switch {
-			text-align: center;
-			height: 100rpx;
-			color: #46ABD7;
-			position: absolute;
-			top: 67%;
-			left: 10%;
-		}
-
-		.loginbtn {
-			width: 80%;
-			height: 100rpx;
-			text-align: center;
-			line-height: 100rpx;
-			background: #4C7BC9;
-			border-radius: 51rpx;
-			font-size: 41rpx;
-			color: #FFFFFF;
-			position: absolute;
-			top: 57%;
-			left: 10%;
-		}
-
-		.loginphone {
-			background-color: #fff;
-			width: 80%;
-			height: 162rpx;
-			position: absolute;
-			left: 10%;
-			top: 23%;
-
-			input {
-				font-size: 45rpx;
-				color: #000000;
-			}
-
-			::v-deep .uni-input-placeholder {
-				padding-left: 40rpx;
-				font-size: 41rpx;
-				font-weight: 400;
-				color: #C3C1C1;
-			}
-
-			.phone {
-				padding-left: 40rpx;
-				height: 100%;
-				box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
-			}
-		}
-
-		.logincode {
-			position: absolute;
-			left: 10%;
-
-			.obtaincode {
-				text-align: center;
-				font-size: 37rpx;
-				color: #4C7BC9;
-				line-height: 162rpx;
-				position: absolute;
-				left: 65%;
-				top: 0%;
-			}
-
-			::v-deep .u-input__input {
-				padding-left: 20rpx;
-				color: #000000;
-				font-size: 42rpx;
-				font-weight: 400;
-				height: 100%;
-			}
-		}
-
-		.title {
-			height: 50rpx;
-			font-size: 52rpx;
-			font-weight: bold;
-			color: #000000;
-			line-height: 44rpx;
-			position: absolute;
-			top: 13%;
-			left: 13%;
-		}
-	}
 </style>

pages/register/register.scss

@@ -0,0 +1,80 @@
+	.app {
+		font-family: DengXian;
+		color: #C3C1C1;
+		font-weight: 400;
+
+		.switch {
+			text-align: center;
+			line-height: 60rpx;
+			color: #46ABD7;
+			position: absolute;
+			top: 66%;
+			left: 10%;
+		}
+
+		.loginbtn {
+			width: 80%;
+			height: 100rpx;
+			text-align: center;
+			line-height: 100rpx;
+			background: #4C7BC9;
+			border-radius: 51rpx;
+			font-size: 41rpx;
+			color: #FFFFFF;
+			position: absolute;
+			top: 57%;
+			left: 10%;
+		}
+
+		.loginphone {
+			background-color: #fff;
+			width: 80%;
+			height: 162rpx;
+			position: absolute;
+			left: 10%;
+			top: 23%;
+
+			input {
+				font-size: 40rpx;
+				color: #000000;
+			}
+
+			::v-deep .uni-input-placeholder {
+				padding-left: 40rpx;
+				font-size: 41rpx;
+				font-weight: 400;
+				color: #C3C1C1;
+			}
+
+			.phone {
+				padding-left: 40rpx;
+				height: 100%;
+				box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
+			}
+		}
+
+		.logincode {
+			position: absolute;
+			left: 10%;
+
+			::v-deep .u-input__input {
+				padding-left: 20rpx;
+				color: #000000;
+				font-size: 41rpx;
+				font-weight: 400;
+				height: 100%;
+			}
+
+		}
+
+		.title {
+			height: 50rpx;
+			font-size: 52rpx;
+			font-weight: bold;
+			color: #000000;
+			line-height: 44rpx;
+			position: absolute;
+			top: 13%;
+			left: 13%;
+		}
+	}

pages/register/register.vue

@@ -61,84 +61,5 @@
 </script>
 
 <style lang="scss">
-	.app {
+	@import "./register.scss";
-		font-family: DengXian;
-		color: #C3C1C1;
-		font-weight: 400;
-
-		.switch {
-			text-align: center;
-			line-height: 60rpx;
-			color: #46ABD7;
-			position: absolute;
-			top: 66%;
-			left: 10%;
-		}
-
-		.loginbtn {
-			width: 80%;
-			height: 100rpx;
-			text-align: center;
-			line-height: 100rpx;
-			background: #4C7BC9;
-			border-radius: 51rpx;
-			font-size: 41rpx;
-			color: #FFFFFF;
-			position: absolute;
-			top: 57%;
-			left: 10%;
-		}
-
-		.loginphone {
-			background-color: #fff;
-			width: 80%;
-			height: 162rpx;
-			position: absolute;
-			left: 10%;
-			top: 23%;
-
-			input {
-				font-size: 40rpx;
-				color: #000000;
-			}
-
-			::v-deep .uni-input-placeholder {
-				padding-left: 40rpx;
-				font-size: 41rpx;
-				font-weight: 400;
-				color: #C3C1C1;
-			}
-
-			.phone {
-				padding-left: 40rpx;
-				height: 100%;
-				box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
-			}
-		}
-
-		.logincode {
-			position: absolute;
-			left: 10%;
-
-			::v-deep .u-input__input {
-				padding-left: 20rpx;
-				color: #000000;
-				font-size: 41rpx;
-				font-weight: 400;
-				height: 100%;
-			}
-
-		}
-
-		.title {
-			height: 50rpx;
-			font-size: 52rpx;
-			font-weight: bold;
-			color: #000000;
-			line-height: 44rpx;
-			position: absolute;
-			top: 13%;
-			left: 13%;
-		}
-	}
 </style>

pages/shopping/shopping.vue

@@ -3,13 +3,12 @@
 		<view class="cards">
 			<view class="item" :style="{background:listcolor[index]}" @tap='goProductList(item)'
 				v-for="(item,index) in goodsCategoryList" :key="index">
-				<!-- <image src="../../static/sp.png" mode=""></image> -->
+				<image :src="baseurl+item.goodsCatrgoryPicture" mode=""></image>
-				<image :src="item.goodsCatrgoryPicture" mode=""></image>
 				<view class="title" style="font-size:42rpx">
 					{{item.goodsCategoryName}}
 				</view>
 			</view>
-			<view class="item">
+			<view class="item" v-if="goodsCategoryList.length%2!=0">
 			</view>
 		</view>
 	</view>
@@ -22,13 +21,16 @@
 	export default {
 		data() {
 			return {
-				pageNum: 1,
+				baseurl: '', //url
-				pageSize: 999,
+				pageNum: 1, //页
-				goodsCategoryList: [],
+				pageSize: 10, //列
-				listcolor: ['#00C176', '#D43953', '#E1AE3C', '#4C7BC9', '#00C176'],
+				total: 0, //list总长度
+				goodsCategoryList: [], //商品列表list
+				listcolor: ['#00C176', '#D43953', '#E1AE3C', '#4C7BC9', '#00C176', '#D43953', '#E1AE3C', '#4C7BC9'], //颜色随动
 			};
 		},
-		onLoad(options) {
+		onLoad(options) { //初始化加载
+			this.baseurl = baseurl
 			this.goodsCategory()
 		},
 		methods: {
@@ -41,14 +43,31 @@
 			},
 			//获取商城信息
 			goodsCategory() {
-				goodsCategoryList(this.pageSize, this.pageNum, ).then(res => {
+				goodsCategoryList(this.pageSize, this.pageNum).then(res => {
-					res.data.forEach(e => {
+					res.rows.forEach(e => {
-						e.goodsCatrgoryPicture = baseurl + e.goodsCatrgoryPicture
+						this.goodsCategoryList.push(e)
 					})
-					this.goodsCategoryList = res.data
+					this.total = res.total
 				})
 			}
 		},
+		onReachBottom() { //下滑加载
+			if (this.goodsCategoryList.length >= this.total) {} else {
+				this.pageNum++;
+				this.goodsCategory()
+			}
+		},
+		onPullDownRefresh() { //下拉刷新
+			// console.log('refresh');
+			this.pageNum = 1;
+			goodsCategoryList(this.pageSize, this.pageNum).then(res => {
+				this.goodsCategoryList = res.rows
+				this.total = res.total
+			})
+			setTimeout(function() {
+				uni.stopPullDownRefresh();
+			}, 1000);
+		}
 	}
 </script>
 

pages/startup/startup.vue

@@ -35,7 +35,7 @@
 		height: 200rpx;
 		position: absolute;
 		left: 25%;
-		top:28%;
+		top: 28%;
 	}
 
 	.title {

pages/u-picker/style.components.scss

@@ -1,7 +0,0 @@
-// 定义混入指令，用于在非nvue环境下的flex定义，因为nvue没有display属性，会报错
-@mixin vue-flex($direction: row) {
-	/* #ifndef APP-NVUE */
-	display: flex;
-	flex-direction: $direction;
-	/* #endif */
-}