xnsred/pages/index/yue.vue

<template>
	<view class="content">
		<image :src="$store.state.baseURL + art.image" mode="widthFix" class="logo"></image>
		<view class="art-info">
			<view class="tit">
				{{art.title}}
			</view>
			<view class="des">
				{{art.synopsis}}
			</view>
			<view class="join">
				善款接受：{{$store.state.baseName}}
			</view>
			<view class="join">
				执行机构：{{$store.state.baseName}}
			</view>
			<view class="share-num">
				<image src="../../static/icon/sharenum.png" mode=""></image>已有{{art.num}}人参与
			</view>
			<image src="../../static/icon/share1.png" mode="" class="share" @click="isShowBase = true"></image>
		</view>
		<view class="art-detail">
			<view class="de-tit flex">
				<view class="line"></view>
				<view class="ct">项目介绍</view>
				<view class="line"></view>
			</view>
			<view class="notice-item">
				<jyf-parser :html="description" ref="article"></jyf-parser>
			</view>
		</view>
		<view class="tc">

		</view>
		<view class="btn" v-show="!isOpen" @click="openTc">
			<view class="">
				参与月捐
			</view>
			<view class="tip">开通月捐后，每月自动扣费，可随时取消</view>
		</view>
		<uni-popup ref="popup" type="bottom" @change="changeTc">
			<view class="tc-wrap">
				<view class="tit flex">
					<view class="">
						捐款金额
					</view>
					<image src="../../static/icon/cl.png" mode="" @click="closeTc"></image>
				</view>
				<view class="m-list flex">
					<view class="mitem" v-for="item in list" :class="{'action': item == money}" @click="money = item">
						￥{{item}}/月
					</view>
				</view>
				<view class="sy-wrap flex">
					<input type="number" placeholder="请输入自定义金额" class="user-inp" v-if="diy" v-model="money" />
					<view class="user-inp" v-if="!diy" @click="diy = true">自定义金额</view>
					<view @click="sy" class="flex" style="align-items: center;">
						<image src="../../static/icon/re.png" mode="" class="re"></image>
						<view class="sy">
							随缘
						</view>
					</view>

				</view>
				
				<view class="" style="text-align: center;padding: 20rpx;">
					<checkbox style="transform:scale(0.7)" :value="isok" :checked="isok" @click="changeOK"/>我已阅读并同意<text style="color: #4768c9;" @click="openxy">用户协议</text>
				</view>
				<view class="" style="text-align: center;font-size: 24rpx;padding-top: 10rpx;color: red;">
					开通月捐后，每月自动扣费，可随时取消
				</view>
				<view class="go" @click="go">
					确认支付{{money}}元/月
				</view>
			</view>
		</uni-popup>
		<image v-if="isShowBase" src="../../static/images/shareimg.png" mode="" class="sharebase"
			@click="isShowBase = false"></image>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	import { weixindata } from '@/utils/wxAuthorized.js';
	
	import { getPlanInfo} from '@/api/money.js'
	import {
		details,
		deconstructArticle
	} from '@/api/info.js';
	import jyfParser from "@/components/jyf-parser/jyf-parser.vue";
	export default {
		components: {
			jyfParser
		},
		computed: {
			...mapState('user', ['hasLogin', 'userInfo']),
		},
		data() {
			return {
				isok: false,
				isShowBase: false,
				diy: false,
				isOpen: false,
				money: 100,
				umoney: '',
				list: [50, 100, 200],
				description: '',
				art: {},
				id: 0
			}
		},
		onLoad(opt) {
			if(opt.id) {
				this.id = opt.id
				uni.setStorageSync('boai',this.id)
				this.getInfo()
			}else {
				let id = uni.getStorageSync('boai') || ''
				if(id) {
					this.id = id
					this.getInfo()
				}else {
					uni.switchTab({
						url:'/pages/index/index'
					})
				}
			}
		},
		methods: {
			openxy() {
				
			},
			changeOK(e) {
				// console.log(e);
				this.isok = !this.isok
			},
			go() {
				if(this.isok) {
					uni.showModal({
						title: '提示',
						content: '功能审核中...',
						success(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
							
						}
					})
				}else {
					uni.showModal({
						title: '提示',
						content: '请先阅读并同意用户协议',
						success(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
							
						}
					})
				}
				
			},
			goShare() {

			},
			getInfo() {

				getPlanInfo({
					id: this.id
				}).then(e => {
					this.art = e.data[0];
					if (this.art.text != null) {
						this.description = this.art.text.replace(/<img/g, "<img class='baseimg'");
					} //小程序商品详情图超出屏幕问题
					this.IndexShare(this.art.title,this.art.info)
				});
			},
			changeTc(e) {
				console.log(e);
			},
			closeTc() {
				this.$refs.popup.close()
			},
			openTc() {
				if (this.hasLogin) {
					uni.navigateTo({
						url:'/pages/index/pay?id=' + this.art.plan_id+ '&tit=' + this.art.title
					})
				} else {
					if(this.id) {
						uni.setStorageSync('boai',this.id)
					}
					saveUrl();
					uni.showModal({
						title: '登录',
						content: '您未登录，是否马上登陆?',
						success: e => {
							if (e.confirm) {
								interceptor();
							}
						},
						fail: e => {
							console.log(e);
						}
					});
				}
				
			},
			sy() {
				this.diy = true
				this.money = Math.floor(Math.random() * 500) + 1;
			},
			IndexShare(title,desc) {
				let obj = this;
				// let money = obj.money;
				let item = {
					link: this.$store.state.baseURL + '/index/#/pages/index/yue?id=' + obj.id , // 分享链接
					imgUrl: this.$store.state.baseURL + '/index/static/img/002.png',
					desc: desc,
					title: title,
					success() {
						console.log('分享成功');
					}
				};
				weixindata(item);
			},
		}
	}
</script>

<style lang="scss">
	.logo {
		width: 750rpx;
	}

	.art-info {
		background-color: #fff;
		padding: 0 30rpx 35rpx;
		margin-bottom: 20rpx;
		position: relative;

		.tit,
		.des {
			width: 80%;
		}

		.tit {
			font-weight: bold;
			font-size: 42rpx;
			color: #1B282E;
			padding-top: 30rpx;
		}

		.des {
			font-size: 28rpx;
			color: #898d8f;
			padding: 15rpx 0 30rpx;
		}

		.share-num {
			font-weight: 500;
			font-size: 24rpx;
			color: #FB2D42;

			image {
				width: 28rpx;
				height: 26rpx;
				vertical-align: bottom;
				margin-right: 8rpx;
			}
		}

		.share {
			width: 44rpx;
			height: 44rpx;
			position: absolute;
			right: 26rpx;
			top: 32rpx;
		}
	}

	.art-detail {
		width: 100%;
		background-color: #fff;
		padding: 30rpx;

		.de-tit {
			text-align: center;
			font-size: 31rpx;
			color: #898d8f;
			align-items: center;
			justify-content: center;

			.line {
				width: 38rpx;
				height: 2rpx;
				background-color: #E0E0DF;
				margin: 0 20rpx;
			}
		}
	}

	.tc {
		height: 99rpx;
	}

	.btn {
		width: 750rpx;
		height: 120rpx;
		background: #f3392c;
		position: fixed;
		bottom: 0;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		.tip {
			font-size: 24rpx;
		}
	}

	.tc-wrap {
		width: 750rpx;
		// height: 578rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0 0;
		padding: 0 31rpx 66rpx 32rpx;

		.tit {
			height: 114rpx;
			align-items: center;
			justify-content: space-between;
			font-weight: bold;
			font-size: 42rpx;
			color: #1E2B31;
			border-bottom: 1px solid #EDF0F2;

			image {
				width: 34rpx;
				height: 34rpx;
			}
		}

		.m-list {
			justify-content: space-between;
			padding: 30rpx 0;

			.mitem {
				width: 215rpx;
				line-height: 96rpx;
				background: #FFFFFF;
				border-radius: 5rpx;
				border: 1px solid #78919d;
				text-align: center;
				font-weight: bold;
				font-size: 29rpx;
				color: #1E2B31;
			}

			.action {
				background: #fdecee;
				border: 1px solid #ed3142;
				color: #ED3142;
			}

		}

		.sy-wrap {
			align-items: center;
			justify-content: space-between;
		}

		.user-inp {
			display: inline-block;
			width: 554rpx;
			height: 81rpx;
			line-height: 81rpx;
			background: #FFFFFF;
			border-radius: 5rpx;
			border: 1px solid #78919d;
			text-align: center;
			font-weight: bold;
			font-size: 29rpx;
			color: #1E2B31;
		}

		.re {
			width: 30rpx;
			height: 30rpx;
			margin-left: 33rpx;
			margin-right: 14rpx;
		}

		.sy {
			font-weight: bold;
			font-size: 29rpx;
			color: #0C0C0C;
		}

		.go {
			width: 100%;
			line-height: 94rpx;
			background: #f3392c;
			border-radius: 46rpx;
			text-align: center;
			font-weight: bold;
			font-size: 33rpx;
			color: #FFFFFF;
			margin-top: 20rpx;
		}
	}

	.notice_name {
		font-size: 35rpx !important;
		color: #303133;
		padding: 25rpx 25rpx 0rpx 25rpx;
		margin-bottom: 25rpx;
	}

	.course-video {
		width: 100%;
		height: 500rpx;
	}

	.notice-item {
		width: 100%;
		height: 100%;
		color: #666666;
		padding: 35rpx 0;
		font-size: 23rpx;
		padding-bottom: 30rpx;
	}

	.baseimg {
		max-width: 100%;
		height: auto;
	}

	.sharebase {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.join {
		padding-bottom: 10rpx;
	}
</style>