update: 作业详情页面

subpkg/datalist/workReport.vue

@@ -108,15 +108,30 @@
 							<u-icon name="arrow-right" color="#616367" size="15"></u-icon>
 						</view>
 					</view>
-
-
 				</view>
-			</view>
-
-			<view class="card-item">
+				
+				<view class="cutting-line"></view>
+				
 				<view class="title-box">
 					<view class="title-tag"></view>
-					<view class="title">作业分趋势</view>
+					<view class="title">诊断分析</view>
+				</view>
+				
+				<view class="analysis-box">
+							<view class="subtitle">本次作业孩子在:</view>
+							<view class="title" style="color: #ff5959;">[化学能与热能]、[反应速率与化学平衡]</view>
+							<view class="subtitle">等知识点上的掌握低于班级平均水平，请重点加强练习。</view>
+					</view>
+					<view class="subtitle" style="margin:30rpx;font-size: 26rpx;">#结果由系统维度分析得出，仅供参考#</view>
+					<view class="btn">
+						<view class="btn-text">获取练习方案</view>
+					</view>
+				</view>
+				<view class="card-item">
+					<view class="title-box">
+						<view class="title-tag"></view>
+						<view class="title">作业分趋势</view>
+					</view>
 				</view>
 			</view>
 		</view>
@@ -348,7 +363,7 @@
 		}
 
 		.point-analyse {
-			margin: 0 20rpx 20rpx 20rpx;
+			margin: 0 20rpx 40rpx 20rpx;
 			border-radius: $border-radius;
 			display: flex;
 			flex-direction: column;
@@ -413,5 +428,48 @@
 				}
 			}
 		}
+		.cutting-line {
+			margin: 0 50rpx 20rpx 50rpx;
+			height: 1px;
+			background-color: #e6e7eb;
+		}
+		
+		.analysis-box {
+			display: flex;
+			flex-direction: column;
+			margin: 10rpx 30rpx;
+		
+			.title {
+				margin: 10rpx;
+				line-height: 35rpx;
+				font-size: 35rpx;
+				color: $color-pink;
+			}
+		
+			.subtitle {
+				line-height: 30rpx;
+				font-size: 30rpx;
+				font-weight: 400;
+				color: $title;
+			}
+		}
+		
+		.btn {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 80rpx;
+			margin: 0 30rpx 30rpx 30rpx;
+			background-color: #f9c752;
+			border-radius: $border-radius;
+			box-shadow: $box-shadow;
+		
+			.btn-text {
+				line-height: 38rpx;
+				font-size: 38rpx;
+				color: #FFF;
+				font-family: YSfont;
+			}
+		}
 	}
 </style>

subpkg/mine/msgList.vue

@@ -13,6 +13,11 @@
 				<image class="msg-poster" :src="item.image" mode="scaleToFill"></image>
 			</view>
 		</view>
+		<view>
+			 <button type="btn" @click="openAuth()">
+				<view class="btn-text">发送消息</view>
+			</button>
+		</view>
 	</view>
 </template>
 
@@ -27,13 +32,12 @@
 			...mapState('m_parent', ['userData'])
 		},
 		data() {
-			return {};
+			return {
+				tmplIds: ['tmMsJJSh3bVhbCh34x15pTqNwPXIL52mk7r64Z8BnZs'],
+			};
 		},
 		onLoad() {
-			// 延时
-			// uni.$u.sleep(1500).then(() => {
-			// 	this.loading = false
-			// })
+			this.sendMsg()
 		},
 		methods: {
 			...mapMutations('m_parent', ['updateUserData']),
@@ -42,20 +46,103 @@
 				let msgList = this.userData.msgList
 				let data = msgList.splice(index, 1)
 				this.updateUserData(data)
-			}
+			},
+			openAuth() {
+				let templateId = this.tmplIds[0]
+				uni.requestSubscribeMessage({
+					tmplIds: this.tmplIds,
+					success: res => {
+						console.log('确认按钮', res);
+						this.sendMsg()
+					}
+				})
+			},
+			// 获取access_token
+			getAccessToken() {
+				return new Promise((resolve, reject) => {
+					uni.request({
+						url: 'https://api.weixin.qq.com/cgi-bin/token',
+						data: {
+							appid: 'wx5705da8747c77cfe',
+							secret: 'd5adf260a866ca43e74fbb40cec00799',
+							grant_type: 'client_credential'
+						},
+						success: (res) => {
+							console.log('返回access_token',res);
+							resolve(res.data.access_token)
+						},
+						fail: (err) => {
+							reject(err)
+						}
+					})
+				})
+			},
+
+			async sendMsg() {
+				const openid = uni.getStorageSync('token').miniappData.openid
+				const access_token = await this.getAccessToken();
+				uni.request({
+					url: 'https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=' +
+						access_token,
+					method: 'POST',
+					data: {
+						touser: openid,
+						template_id: this.tmplIds[0], // 第一个模板id
+						page: "pages/init/init", // 点击消息卡片跳转地址
+						data: { // data是模板内容，属性名为模板中所给，value值是需要传递的。
+							name1: {
+								value: '测试用户'
+							},
+							time2: {
+								value: '2022-07-11 20:33:44'
+							},
+							thing3: {
+								value: '测试测评'
+							},
+							number4: {
+								value: 123
+							}
+						}
+					},
+					success: (res) => {
+						console.log('发送模板消息',res);
+					}
+				})
+			},
+
+
 		}
 	}
 </script>
 
 <style lang="scss">
-	.msg-poster{
+	.msg-poster {
 		margin: 20rpx auto;
 		width: 94%;
 		height: 300rpx;
 		border-radius: 20rpx;
 	}
-	.t-icon{
+
+	.t-icon {
 		width: 40rpx;
 		height: 40rpx;
 	}
+
+	.btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 80rpx;
+		margin: 0 20rpx 20rpx 20rpx;
+		background-color: #4169E1;
+		border-radius: $border-radius;
+		box-shadow: $box-shadow;
+
+		.btn-text {
+			line-height: 38rpx;
+			font-size: 38rpx;
+			color: #FFF;
+			font-family: YSfont;
+		}
+	}
 </style>

unpackage/dist/dev/mp-weixin/subpkg/datalist/workReport.wxss

@@ -202,7 +202,7 @@
   margin-right: 10rpx;
 }
 .card-item .point-analyse {
-  margin: 0 20rpx 20rpx 20rpx;
+  margin: 0 20rpx 40rpx 20rpx;
   border-radius: 12rpx;
   display: flex;
   flex-direction: column;
@@ -261,4 +261,42 @@
   font-weight: bold;
   color: #616367;
 }
+.card-item .cutting-line {
+  margin: 0 50rpx 20rpx 50rpx;
+  height: 1px;
+  background-color: #e6e7eb;
+}
+.card-item .analysis-box {
+  display: flex;
+  flex-direction: column;
+  margin: 10rpx 30rpx;
+}
+.card-item .analysis-box .title {
+  margin: 10rpx;
+  line-height: 35rpx;
+  font-size: 35rpx;
+  color: #ff8caf;
+}
+.card-item .analysis-box .subtitle {
+  line-height: 30rpx;
+  font-size: 30rpx;
+  font-weight: 400;
+  color: #303133;
+}
+.card-item .btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 80rpx;
+  margin: 0 30rpx 30rpx 30rpx;
+  background-color: #f9c752;
+  border-radius: 12rpx;
+  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
+}
+.card-item .btn .btn-text {
+  line-height: 38rpx;
+  font-size: 38rpx;
+  color: #FFF;
+  font-family: YSfont;
+}
 

unpackage/dist/dev/mp-weixin/subpkg/mine/msgList.wxss

@@ -8,4 +8,20 @@
   width: 40rpx;
   height: 40rpx;
 }
+.btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 80rpx;
+  margin: 0 20rpx 20rpx 20rpx;
+  background-color: #4169E1;
+  border-radius: 12rpx;
+  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
+}
+.btn .btn-text {
+  line-height: 38rpx;
+  font-size: 38rpx;
+  color: #FFF;
+  font-family: YSfont;
+}