qingyuan/pages/subPages2/subscription/subscription.vue

<template>
	<view class="subscription">
		<view>
			
		</view>
		<view class="subscription-content">
			<view class="subscription-title">
				<view class="title-content">
					<view class="f-32 col-f">
						温馨提示:
					</view>
					<view class="f-24 col-f p-top-20">
						<view class="p-top-10">
							1、为了您及时接收本程序的消息，请进行手动订阅操作。
						</view>
						<view class="p-top-10">
							2、订阅后面数字代表可发送次数，点击一次增加一次。
						</view>
						<view class="p-top-10">
							3、请选择“总是保存以上选择，不再询问”。
						</view>
					</view>
				</view>
			</view>
			<view class="subscription-box">
				<!-- <view  v-html="oaoao">
					
				</view> -->
				
				<!-- #ifndef H5 -->
					<view class="subscription-box-title f-28 f-w">
						小程序订阅消息
					</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
					<view class="subscription-box-title f-28 f-w">
						公众号订阅消息
					</view>
				<!-- #endif -->
					<view class="subscription-content-box" v-if="sbuscriptionList.list.length > 0">
						<view class="subscription-box-item dis-flex f-28" v-for="(item,index) in sbuscriptionList.list" :key="index" >
							<view style="flex: 0.8;">
								{{item.title}}
							</view>
							<!-- #ifdef H5 -->
							<view style="flex: 0.2;padding-top: 30upx;" >
								<wx-open-subscribe :template="item.id" id="launch-wxapp" @success="success($event,item)">
								
									<script type="text/wxtag-template">
									        <style>
									            .btn2 {
									                height: 50rpx;
									                width: 250rpx;
									                line-height: 50rpx;
									                background-color: #FF4444;
									                color: #FFFFFF;
									                float: right;
									                text-align: center;
									                border: none;
									                font-size: 24rpx;
									            }
									        </style>
									        <button class="btn2">订阅
												<text>{{item.num?'+' + item.num : ''}}</text>
											</button>
									    </script>
									</wx-open-subscribe>
								<!-- <view class="subscription-item-btn t-c" @click="subscriptionClik(item)">
									订阅 <text v-if="item.num != 0">+{{item.num}}</text>
								</view> -->
								
							</view>
							<!-- #endif -->
							<!-- #ifndef H5 -->
							<view style="flex: 0.3;">
								<view class="subscription-item-btn t-c" @click="subscriptionClik(item)">
									订阅 <text v-if="item.num != 0">+{{item.num}}</text>
								</view>
							</view>
							<!-- #endif -->
						</view>
					</view>
					
			</view>
		</view>
		<TabBars :tabBarAct="0" :pageType="''"/>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	import TabBars from '@/components/template/tabBar.vue';
	export default{
		data(){
			return{
				sbuscriptionList:[],
				oaoao:''
			}
		},
		components:{
			TabBars
		},
		onLoad(option) {
			this.getSbuscriptionList();
			this.opens(option);
		},
		methods:{
			opens(options){
				let _this = this;
				
				
				const { openid, action } = options;
						
			},
			subscriptionClik(item){
				let _this = this;
						// #ifndef H5
						uni.requestSubscribeMessage({
							tmplIds: [item.id],
							success(res) {
								console.log(res);
								for(let key in res){
									if(key != 'errMsg'){
										if(res[key] == 'accept'){
											let data = {
												info:{
													form_id:item.id,
													temp_type:item.temp_type,
													scene:Number(item.scene)>9999?1:Number(item.scene) + 1
													
												}
											};
											data.info = JSON.stringify(data.info);
											App._post_form(
												`&do=saveFromId`,
												data,
												res => {
													// console.log(res);
													uni.showToast({
														title:`订阅成功`
													})
													console.log(res);
													_this.getSbuscriptionList();
													// this.sbuscriptionList = res.data;
												},
												false,
												() => {}
											);
										}
									}
								}
							}
						})
						// #endif
				 
						// #ifdef H5
						//记录场景值到缓存，用户授权成功后传给后端
				        uni.setStorageSync('courseInfo', JSON.stringify(item));
						
						let redirect_url = encodeURIComponent(location.href);
						// let appId = uni.getAccountInfoSync().miniProgram.appId;
						// debugger
						// return
						location.href =
							`https://mp.weixin.qq.com/mp/subscribemsg?action=get_confirm&appid=${this.sbuscriptionList.app_id}&scene=${Number(item.scene)>9999?1:Number(item.scene) + 1}&template_id=${this.sbuscriptionList.temp_id}&redirect_url=${redirect_url}&reserved=test#wechat_redirect`;
						
						// #endif

			},
			success(e,item){
				// uni.showToast({
				// 	title:'进来事件'
				// })
				
					
					// let class_id = JSON.parse(uni.getStorageSync('courseInfo'));
					// let token = uni.getStorageSync('weliam_user_token');
					let data = {
						info:{
							form_id:item.id,
							temp_type:item.temp_type,
						}
					};
					data.info = JSON.stringify(data.info);
					App._post_form(
						`&do=saveFromId`,
						data,
						res => {
							// console.log(res);
							console.log(res);
							uni.showToast({
								title:`订阅成功`
							})
							this.sbuscriptionList.list = [];
							this.getSbuscriptionList();
							// this.sbuscriptionList = res.data;
						},
						false,
						() => {}
					);
				
				
			},
			getSbuscriptionList(){
				App._post_form(
					`&do=getTempList`,
					{},
					res => {
						
						this.$forceUpdate();
						// console.log(res);
						this.sbuscriptionList = res.data;
					},
					false,
					() => {}
				);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.subscription{
		.subscription-content{
			.subscription-title{
				width: 750upx;
				height: 355upx;
				background-color: #FF4444;
				
				.title-content{
					padding: 30upx;
				}
			}
			.subscription-box{
				border-radius: 20upx;
				width: 90%;
				position: absolute;
				margin-bottom: 300upx;
				
				// padding: 30upx;
				background-color: #FFFFFF;
				left: 50%;
				top: 22%;
				transform: translate(-50%);
				.subscription-box-title{
					line-height: 100upx;
					height: 100upx;
					border-bottom: 1upx solid #EEEEEE;
					padding: 0upx 30upx;
				}
				.subscription-content-box{
					padding: 0upx 30upx;
					.subscription-box-item{
						line-height: 100upx;
						height: 100upx;
						border-bottom: 1upx solid #EEEEEE;
						padding: 0upx 0upx;
						.subscription-item-btn{
							height: 50upx;
							width: 128upx;
							line-height: 50upx;
							background-color: #FF4444;
							color: #FFFFFF;
							float: right;
							margin-top: 25upx;
							font-size: 24upx;
						}
					}
					.subscription-box-item:last-child{
						border: none;
					}
				}
			}
		}
	}
</style>
<style>
	page{
		background-color: #F8F8F8;
	}
</style>