MiniPrograms/subpkg/mine/msgList.vue

<template>
	<view class="page-view">
		<top-return :color="'#FFF'" text="个人通知"></top-return>
		<view class="bg-box2"></view>
		<view class="card-view" style="margin-top: 140rpx;">
			<view class="card-item" style="width: 100%;" v-for="(item,index) in userData.msgList" :key="index">
				<view class="card-title" style="margin-right: 10rpx;">
					<view class="t-icon t-icon-tongzhihuotixing"></view>
					<view class="title" style="margin-left: 20rpx;font-weight: 400;">{{item.title}}</view>
					<view class="subtitle" style="margin-left: auto;font-size: 24rpx;">{{item.msgTime}}</view>
				</view>
				<view class="title" style="margin: 0 30rpx;font-size: 28rpx;">{{item.content}}</view>
				<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>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		computed: {
			...mapState('m_parent', ['userData'])
		},
		data() {
			return {
				tmplIds: ['tmMsJJSh3bVhbCh34x15pTqNwPXIL52mk7r64Z8BnZs'],
			};
		},
		onLoad() {
			this.sendMsg()
		},
		methods: {
			...mapMutations('m_parent', ['updateUserData']),
			//删除信息
			deleteMsg(index) {
				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 {
		margin: 20rpx auto;
		width: 94%;
		height: 300rpx;
		border-radius: 20rpx;
	}

	.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>