GEKE_PHONE/pages/user/appzf.vue

<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">会员开通</block>
		</cu-custom>
		<scroll-view scroll-y class="page">
			<image src="/static/bj001.jpeg " mode="widthFix" class="response">
			</image>
			
			<view class="nav-list" >
				<navigator hover-class="none" class="nav-li" navigateTo :class="'bg-'+item.color" 
				 :style="[{width:'100%',animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in elements" :key="index">
					<view class="nav-name">{{item.title}}<view  class="cu-avatar round" :style="{margin:'20px',backgroundImage: 'url(' + item.cuIcon + ')'}"></view></view>
					<ul>
						<!-- <li>
							<div class="card" @click="ts()">
								<h2 style="color: #000000;text-align: center;margin-top: 15px;">半年vip</h2>
								<div>
									<h2 style="color: red;text-align: center;margin-top: 20px;">299元/半年</h2>
								</div>
								<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 25px;"></div>
								<div>
									<h3 style="color: red;text-align: center;margin-top: 20px;">50万套皮肤免费使用</h3>
								</div>
							</div>
						</li>
						<li>
							<div class="card" @click="tss()">
								<h2 style="color: #000000;text-align: center;margin-top: 15px;">永久vip</h2>
								<div>
									<h2 style="color: red;text-align: center;margin-top: 20px;">499元/终身</h2>
								</div>
								<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 25px;"></div>
								<div>
									<h3 style="color: red;text-align: center;margin-top: 20px;">百万套皮肤免费使用</h3>
								</div>
							</div>
						</li> -->
						<li>
							<div class="tt">
								 <view   style="margin-left: 20px;margin-top: 25px;">
								<canvas  canvas-id="myQrcode"></canvas>
								</view>
							</div>
							
						</li>
					</ul>
					<view style="margin-left: 80px;margin-top: 10px;"><image src="../../static/zfb.png" style="width: 30px;height: 30px;"></image>
						</view>
						<view style="margin-left: 130px;margin-top: -35px;"><h3><span style="color: #0081FF;">支付宝支付</span></h3>
						</view>
					
				</navigator>
				
			</view>
			
		</scroll-view>
	</view>
</template>

<script>
	const qrCode = require('../../common/util/weapp-qrcode')
	import api from '@/api/api'
	export default {
		name: 'user',
		data() {
			return {
				elements: [{
						title: '开通账号:  ',
						name: 'exit',
						color: 'cyan',
						cuIcon: '',
						
					}
				],
				ul:'/sys/test/toPay',
				ulr:'/sys/test/notify_url'
				
			}
		},
		created() {
			 let avatar=(this.$store.getters.avatar && this.$store.getters.avatar.length > 0)? api.getFileAccessHttpUrl(this.$store.getters.avatar):'/static/avatar_boy.png'
			this.elements[0].title+=this.$store.getters.realname;
			this.elements[0].cuIcon=avatar;
			this.appzf(3);
			window.setInterval(() => {
				this.hd();
			  setTimeout(fun, 0)
			}, 30000)
		},
		methods: {
			ts:function(){
				
				this.appzf(3);
			},
			tss:function(){
	
				this.appzf(2);
			},
			initQrCode:function(s){
							new qrCode('myQrcode', {
								text: s,
								width: 160,
								height: 160,
								colorDark: "#333333",
								colorLight: "#FFFFFF",
								correctLevel: qrCode.CorrectLevel.H
							})
						},

			appzf:function(){
				var obj="终身vip";
				var jg="0.01";
				this.$http.get(this.ul,{params:{subject:obj,money:jg}}).then(res=>{
					console.log(res)
					this.initQrCode(res.data.qrCode)
					
				}).catch(err => {
					console.log(err);
				}); 
			},
			hd:function(){
				this.$http.post(this.ulr,{params:{}}).then(res=>{
					console.log(res)
				
					
				}).catch(err => {
					console.log(err);
				}); 
			}
		}
	}
</script>

<style>
	.card{
		
		 background-color: #FFFFFF; 
		width: 150px;
		height: 200px;
		border-radius:10px 10px 10px 10px;
		 border:3px solid  red; 
		margin-top: 10px;
		box-shadow:0 4px 8px 0 rgba(255, 255, 255, 0.2),0 6px 20px 0 rgba(255, 255, 255, 0.2);
		
		
	}
	
	.tt{
		margin-left: 20px;
		margin-top: 70px;
		width: 200px;
		height: 200px;
		background-color: #FFFFFF;
		border-radius: 5px 5px 5px 5px;
		border:1px solid  #0081FF;
	}
	ul li{
		list-style-type:none;
		
		
	}
	
</style>