components/informations/titles/titles.vue

@@ -1,7 +1,7 @@
 <template>
 	<view id="info_title">
 		<view>
-    		<view class="url_info" v-for="(item,index) in list" :key="index">
+			<view class="url_info" v-for="(item,index) in list" :key="index" @click="route_skip(index)">
 				<image :src="item.url"></image>
 				<text>{{item.text}}</text>
 			</view>
@@ -14,6 +14,7 @@
 		float: left;
 		flex: 1;
 	}
+
 	.url_info image {
 		width: 84rpx;
 		height: 84rpx;
@@ -21,12 +22,14 @@
 		display: block;
 		margin-bottom: 16rpx;
 	}
+
 	.url_info text {
 		display: block;
 		text-align: center;
 		font-size: 28rpx;
 		color: rgba(102, 102, 102, 1);
 	}
+
 	.sousuo {
 		height: 113rpx;
 		border: 1px #f00 solid;
@@ -38,18 +41,21 @@
 		padding: 37rpx 0;
 
 	}
+
 	#info_title>view {
 		overflow: hidden;
 		zoom: 1;
 		display: flex;
 		flex-wrap: wrap;
-		  display: -webkit-flex; /* Safari */
+		display: -webkit-flex;
+		/* Safari */
 	}
 </style>
 <script>
 	export default {
 		name: "info_title",
 		data() {
+
 			return {
 				list: [{
 						id: 0,
@@ -75,6 +81,36 @@ export default {
 
 				],
 			}
+		},
+		methods: {
+			// 点击顶部的标题模块跳转
+			route_skip(index) {
+				console.log(index)
+				switch (index) {
+					case 0:
+						uni.navigateTo({
+							url: '/pageD' + "/notice/notice"
+						});
+						break;
+					case 1:
+						uni.navigateTo({
+							url: '/pageD' + "/activity/activity"
+						});
+						break;
+					case 2:
+						uni.navigateTo({
+							url: '/pageD' + "/logistics/logistics"
+						});
+						break;
+					case 3:
+						uni.navigateTo({
+							url: '/pageD' + "/attention/attention"
+						});
+						break;
+					default:
+						break;
+				}
+			}
 		}
 	}
 </script>

pageA/login/login.vue

@@ -13,8 +13,14 @@
 				<view class="labales">
 					<!-- <text></text> -->
 					<input type="tel" placeholder="请输入验证码" />
-					<text class="identifying" @click="getCode">{{text}}</text>
+					<!-- <text class="identifying" @click="getCode">{{text}}</text> -->
+					<view class="wrap">
+						<u-toast ref="uToast"></u-toast>
+						<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-verification-code>
+						<view class="view_getcode" @tap="getCode">{{tips}}</view>
 					</view>
+				</view>
+			
 				<!-- 服务协议 -->
 				<view class="pact">
 					<view></view>
@@ -34,7 +40,9 @@
 				<text class="other" @click="mask_u">其他方式登录</text>
 			</view>
 			<!-- denglu QQ weixin -->
+			<view class="buttones">
 				<u-button>{{login}}</u-button>
+			</view>
 			<u-mask :show="show" @click="show = false">
 				<view class="warp">
 					<view class="rect" @tap.stop>
@@ -64,7 +72,10 @@
 				value: '',
 				text: '获取验证码',
 				login: '登录',
-				show: false
+				show: false,
+				tips: '',
+				// refCode: null,
+				seconds: 60,
 			};
 		},
 		methods: {
@@ -86,12 +97,59 @@
 			},
 			loading() {
 
+			},
+			codeChange(text) {
+				this.tips = text;
+			},
+			getCode() {
+				if (this.$refs.uCode.canGetCode) {
+					// 模拟向后端请求验证码
+					uni.showLoading({
+						title: '正在获取验证码'
+					})
+					setTimeout(() => {
+						uni.hideLoading();
+						// 这里此提示会被this.start()方法中的提示覆盖
+						this.$u.toast('验证码已发送');
+						// 通知验证码组件内部开始倒计时
+						this.$refs.uCode.start();
+					}, 2000);
+				} else {
+					this.$u.toast('倒计时结束后再发送');
+				}
+			},
+			end() {
+				this.$u.toast('倒计时结束');
+			},
+			start() {
+				this.$u.toast('倒计时开始');
 			}
 		}
 	};
 </script>
 
 <style lang="scss" scoped>
+	.wrap {
+		background: none;
+		width: 200rpx;
+		position: absolute;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		margin: auto;
+		font-size: 30rpx;
+		
+		.view_getcode{
+			height: 50rpx;
+			line-height: 50rpx;
+			font-size: 30rpx;
+			color: #FF780F!important;
+		}
+	}
+	.warp .view_getcode{
+		width: 200rpx;
+		color: #FF780F!important;
+	}
 	.login {
 
 		// background: url(../../static/pageA/loginbackground.png) no-repeat!important;
@@ -170,18 +228,12 @@
 		}
 
 		 .identifying {
-			position: absolute;
+			
-			right: 0;
-			top: 0;
-			bottom: 0;
-			margin: auto;
-			font-size: 30rpx;
-			font-weight: 500;
-			color: rgba(255, 120, 15, 1);
-			line-height: 20px;
 		}
 	}
-	.uni-input-input, .uni-input-placeholder{
+
+	.uni-input-input,
+	.uni-input-placeholder {
 		color: #fff !important;
 		letter-spacing: 2rpx;
 	}
@@ -223,7 +275,7 @@
 		height: 22rpx;
 	}
 
-	.u-btn {
+	.buttones .u-btn {
 		width: 628rpx;
 		height: 98rpx;
 		background: rgba(255, 120, 15, 1) !important;
@@ -254,19 +306,24 @@
 		position: relative;
 		display: flex;
 		flex-wrap: wrap;
-		 display: -webkit-flex; /* Safari */
+		display: -webkit-flex;
+
+		/* Safari */
 		.rect_view {
 			width: 100rpx;
 			height: 100rpx;
+
 			.image {
 				width: 45rpx;
 				height: 53rpx;
 				display: inline-block;
 
 			}
+
 			flex:1;
 			margin-top: 77rpx;
 		}
+
 		.rect_view:nth-child(2) image {
 			width: 57rpx;
 			height: 45rpx;
@@ -281,6 +338,7 @@
 			line-height: 85rpx;
 			border-top: 1px #999999 solid;
 		}
+
 		view {
 			color: #666;
 			font-size: 24rpx;
@@ -288,30 +346,40 @@
 
 		}
 	}
-	.rect_view:nth-child(1) image,.rect_view:nth-child(1) view{
+
+	.rect_view:nth-child(1) image,
+	.rect_view:nth-child(1) view {
 		float: right;
 	}
+
 	.rect_view:nth-child(1) image {
 		margin-right: 20rpx;
 	}
+
 	.rect_view:nth-child(1) {
 		position: relative;
 		margin-right: 79rpx;
 	}
+
 	.rect_view:nth-child(1) view {
 		position: absolute;
 		bottom: 0;
 		right: 0;
 	}
-	.rect_view:nth-child(2) image,.rect_view:nth-child(2) view{
+
+	.rect_view:nth-child(2) image,
+	.rect_view:nth-child(2) view {
 		float: left;
 	}
+
 	.rect_view:nth-child(2) image {
 		margin-left: 20rpx;
 	}
+
 	.rect_view:nth-child(2) {
 		position: relative;
 	}
+
 	.rect_view:nth-child(2) view {
 		position: absolute;
 		bottom: 0;

pageD/information/information.vue

@@ -16,7 +16,7 @@
 		<!-- 消息通知 -->
 		<view class="backes">
 			<view id="information">
-				<view class="information_dl" v-for="(item,index) in information_dl">
+				<view class="information_dl" v-for="(item,index) in information_dl" :key="index" >
 					<view>
 						<image :src="item.url"></image>
 					</view>
@@ -44,14 +44,14 @@
 						title: '2020-7-21'
 					},
 					{
-							id: 0,
+						id: 1,
 						url: '../../static/pageD/info(11).png',
 						text: '通知消息',
 						contentes: '亲，您购物车中的 [新鲜盆栽] 降价4.00元。',
 						title: '2020-7-21'
 					},
 					{
-								id: 0,
+						id: 2,
 						url: '../../static/pageD/info(11).png',
 						text: '通知消息',
 						contentes: '亲，您购物车中的 [新鲜盆栽] 降价4.00元。',
@@ -76,6 +76,7 @@
 			mask_u() {
 				this.show = !this.show
 			},
+			
 		},
 		components: {
 			titles,
@@ -88,9 +89,11 @@
 		height: 113rpx;
 		border: 1px #f00 solid;
 	}
+
 	.slot-wrap {
 		display: flex;
 		align-items: center;
+
 		/* 如果您想让slot内容占满整个导航栏的宽度 */
 		/* flex: 1; */
 		/* 如果您想让slot内容与导航栏左右有空隙 */
@@ -101,6 +104,7 @@
 			position: absolute;
 			right: 90rpx;
 		}
+
 		image:nth-child(2) {
 			width: 34rpx;
 			height: 40rpx;
@@ -108,10 +112,12 @@
 			right: 30rpx;
 		}
 	}
+
 	.backes {
 		background: #fff;
 		margin-bottom: 10rpx;
 	}
+
 	.information_dl {
 		width: 710rpx;
 		margin: 0 auto;
@@ -121,15 +127,18 @@
 		padding-bottom: 23rpx;
 		border-bottom: 1px #ececec solid;
 		padding: 20rpx 5rpx 23rpx 5rpx;
+
 		image {
 			width: 84rpx;
 			height: 84rpx;
 			margin-right: 16rpx;
 		}
+
 		view {
 			float: left;
 			display: block;
 		}
+
 		.title {
 			font-size: 30rpx;
 			color: #333;
@@ -137,12 +146,14 @@
 			margin-bottom: 15rpx;
 			margin-top: 9rpx;
 		}
+
 		.contentes {
 			font-size: 20rpx;
 			color: #999;
 			width: 600rpx;
 		}
 	}
+
 	.times {
 		position: absolute;
 		top: 30rpx;
@@ -150,8 +161,9 @@
 		color: #333333;
 		font-size: 20rpx;
 	}
-	uni-page-wrapper{
+
-	}
+	uni-page-wrapper {}
+
 	page {
 		background: #ececec !important;
 	}