juliancheng/pages/index/jiameng.vue

<template>
	<view class="main">
		<view class="top">
			<image src="../../static/index/img1.png" mode=""></image>
		</view>
		<view class="protocol">
			<view class="protocol-btn" @click="protocol" data-target="protocol">查看协议</view>
			<view class="protocol-content">
				<image src="../../static/apply/jiangjin.png" mode="" class="protocol-content-img"></image>
				<view class="title">销售拿奖金</view>
				<view class="txt">成为推广人后，推广其他用户下单，您可以获得奖金</view>
			</view>
		</view>
		<view class="tabs">
			<view @click="join(index)" class="tab" :key="index" v-for="( item , index ) in tabs">
				<view class="tab-img">
					<image :src="item.img" mode="" class="i1"></image>
				</view>
				<view class="tab-txt">
					<view>{{index == 1 ? item.txt+money+'元即可': item.txt}}</view>
					<view>{{item.txt2}}</view>
				</view>
				<view class="tab-foot-img">
					<image :src="item.gimg" mode="" class="i2"></image>
				</view>

			</view>
		</view>
		<!-- 公告栏 -->
		<view class="cu-modal" :class="modalName == 'protocol'?'show':''">
			<view class="cu-dialog offset-top">
				<view class="cu-bar bg-white justify-end">
					<view class="content">协议</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close yellow" />
					</view>
				</view>
				<view class="padding-xl">
					<u-parse :content="promote_agreement == null? '暂无文章数据' : promote_agreement" @preview="preview" @navigate="navigate"
					 className="articleDetailContent" />
				</view>
			</view>
		</view>
		<!-- 获取微信信息弹窗框 -->
		<view class="cu-modal" :class="modalName == 'login' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">登录</view>
					<view class="action" @tap="modalName = ''">
						<text class="cuIcon-close yellow" />
					</view>
				</view>
				<view class="padding-xl">
					<view class="top-title" style="">
						<text class="top-title1">您还未登陆</text></br>
						<text class="top-title2">请先登录再进行操作</text>
					</view>
					<view class="flex justify-around">
						<button type="primary" @tap="modalName = ''" class="cu-btn round greyBg lg">暂不登录</button>
						<button type="primary" @click="gotologin" class="cu-btn round yellowBg lg" hover-class="btn-hover">立刻登录</button>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var user = require('../../common/user.js');
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex';
	import uParse from '@/components/u-parse/u-parse.vue'
	export default {
		components: {
			uParse
		},
		data() {
			return {
				promote_agreement: '',
				money: '',
				modalName: null, //协议框状态
				tabs: [{
						img: '../../static/apply/xiadan.png',
						txt: '完成任意订单即可',
						txt2: '享受推广人特权',
						gimg: '../../static/apply/godan.png'
					},
					{
						img: '../../static/apply/qianbao.png',
						txt: '支付',
						txt2: '享受推广人特权',
						gimg: '../../static/apply/gopay.png'
					},
				]

			}
		},
		onLoad() {

		},
		computed: {
			...mapGetters({
				hasLogin: 'verifyJwt'
			}),
			...mapState(['user'])
		},
		mounted() {
			this.configData()
		},
		methods: {
			...mapActions({
				getUser: 'getUser' // 将 `this.getUser()` 映射为 `this.$store.dispatch('getUser')`
			}),
			configData: async function() {
				let res = await this.$request.post('/api/SystemConfig/getSysteConfig');
				console.log(res)
				if (res.code == 200) {
					this.money = res.data.promote_price
					this.promote_agreement = res.data.promote_agreement
				}
			},
			// 协议
			protocol(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			onBridgeReady: function(res) {
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": res.data.appId,
						"timeStamp": res.data.timeStamp,
						"nonceStr": res.data.nonceStr,
						"package": res.data.package,
						"signType": res.data.signType,
						"paySign": res.data.paySign
					},
					function(re) {
						if (re.err_msg == "get_brand_wcpay_request:ok") {
							uni.showToast({
								icon: 'success',
								title: '支付成功',
								duration: 1000
							});
							setTimeout(function() {
								uni.navigateBack();
							}, 1000);
						}
					});
			},
			async join(index) {
				if (index == 1) {
					if (this.hasLogin) {
						if (this.$util.is_weixin()) {
							console.log("weixin")
							// let res = await this.$request.post('/api/payment/payPromote', {
							// 	plat_type: 1
							// });
							// if (res.code == 200) {
							// 	if (typeof WeixinJSBridge == "undefined") {
							// 		if (document.addEventListener) {
							// 			document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
							// 		} else if (document.attachEvent) {
							// 			document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
							// 			document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
							// 		}
							// 	} else {
							// 		this.onBridgeReady(res)
							// 	}
							// 	// uni.requestPayment({
							// 	// 	provider: 'wxpay',
							// 	// 	timeStamp: res.data.timeStamp,
							// 	// 	nonceStr: res.data.nonceStr,
							// 	// 	package: res.data.package,
							// 	// 	signType: res.data.signType,
							// 	// 	paySign: res.data.paySign,
							// 	// 	success: function(res) {
							// 	// 		uni.showToast({
							// 	// 			icon: 'success',
							// 	// 			title: '支付成功'
							// 	// 		});
							// 	// 		setTimeout(function() {
							// 	// 			uni.navigateTo({
							// 	// 				url: 'index'
							// 	// 			})
							// 	// 		}, 2000)
							// 	// 	},
							// 	// 	fail: function(res) {
							// 	// 		uni.showToast({
							// 	// 			icon: 'none',
							// 	// 			title: '支付失败'
							// 	// 		})
							// 	// 	},
							// 	// 	complete: function(res) {
							// 	// 		console.log('支付过程结束');
							// 	// 	}
							// 	// });
							// } else {
							// 	uni.showToast({
							// 		icon: 'none',
							// 		title: res.message
							// 	})
							// }
						} else {
							console.log("进来了")
							// let res = await this.$request.post("/api/payment/webPayPromote")
							// console.log(res)
						}

					} else {
						this.modalName = 'login'
					}
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}
			},
			gotologin() {
				this.modalName = '';
				uni.navigateTo({
					url: "../login/login",
					fail: (err) => {
						console.log(err)
					}
				})
			}
			// wxLogin: function(e) {
			// 	if (e.detail.userInfo == undefined) {
			// 		uni.showToast({
			// 			title: '微信登录失败'
			// 		});
			// 		return;
			// 	}
			// 	user.loginByWeixin(e.detail.userInfo)
			// 		.then(res => {
			// 			this.getUser(true);
			// 		})
			// 		.catch(res => {
			// 			uni.showToast({
			// 				title: '微信登录失败'
			// 			});
			// 		});
			// }
		}
	}
</script>

<style>
	@import url("@/components/u-parse/u-parse.css");

	page {
		background: #F5F5F5;
	}

	.main {
		width: 100vw;
		height: auto;
		margin-bottom: 20px;
	}

	.top {
		width: 100%;
		height: auto;
	}

	.top image {
		width: 100vw;
		height: 42vw;
		padding: 10px;
	}

	.protocol {
		width: 90vw;
		height: 140px;
		background: #fff;
		border-radius: 5px;
		padding: 20px 10px;
		margin: 5vw;
		position: relative;
	}

	.protocol .protocol-btn {
		/* 	width: auto;
		height: auto; */
		width: 160rpx;
		height: 48rpx;
		line-height: 48rpx;
		/* padding: 3px 20px; */
		color: #F5CC57;
		font-size: 24rpx;
		font-weight: 500;
		text-align: center;
		font-family: PingFangSC-Regular, sans-serif;
		background: rgba(236, 207, 125, 0.2);
		border-radius: 8px;
		float: right;
	}

	.protocol .protocol-content .protocol-content-img {
		width: 120rpx;
		height: 120rpx;
		position: absolute;
		top: 60px;
	}

	.protocol .protocol-content .title {
		width: calc(90vw - 90px);
		height: 45rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 300;
		font-family: PingFangSC-Regular, sans-serif;
		color: #555864;
		position: absolute;
		top: 60px;
		left: 80px;
	}

	.protocol .protocol-content .txt {
		width: calc(90vw - 90px);
		height: 66rpx;
		line-height: 66rpx;
		font-size: 24rpx;
		font-weight: 300;
		font-family: PingFangSC-Regular, sans-serif;
		line-height: 20px;
		color: #777;
		position: absolute;
		top: 85px;
		left: 80px;
	}

	.tabs {
		width: 90vw;
		height: auto;
		margin: 0 5vw;
		display: flex;
		justify-content: space-between;
	}

	.tabs .tab {
		width: 42.5vw;
		height: auto;
		border-radius: 5px;
		background: #fff;
		padding: 20px 0;
	}

	.tab .i1 {
		width: 36px;
		height: 36px;
		margin: 0 calc(21.25vw - 18px);
	}

	.tab .tab-txt {
		width: 81%;
		height: auto;
		line-height: 20px;
		text-align: center;
		margin: 10px 10%;
		font-size: 30rpx;
		font-weight: 300;
		font-family: PingFangSC-Regular, sans-serif;
		color: #555864;
	}

	.tab .i2 {
		width: 100px;
		height: 30px;
		margin: 0 calc(21.25vw - 50px);
	}

	.yellow {
		color: #F5CC57;
	}

	.yellowBg {
		background: #F5CC57 !important;
	}

	.greyBg {
		background: grey !important;
	}

	.top-title {
		margin-bottom: 15px;
	}

	.top-title .top-title1 {
		font-size: 19px;
		color: #000000;
		margin-top: 10px;
	}

	.top-title .top-title2 {
		font-size: 13px;
		color: #999;
	}

	.offset-top {
		bottom: 200px;
	}
</style>