myc/pages/coupon/details.vue

<template>
	<view class="content">
		<!-- <view class="flex_item coupon">
			<view class="coupon_img"><image src="/static/xpy/025.png"></image></view>
			<view class="coupon_name">
				<view class="coupon_text">星拼乐100元商城购物卡通用元商城购物卡通用</view>
				<view class="coupon_money">￥100</view>
			</view>
		</view> -->
		<view class="row-box">
			<view class="title">付款金额</view>
			<view class="row">
				<text class="tit">￥</text>
				<input class="input" type="number" v-model="money" placeholder="请输入转让金额" placeholder-class="placeholder" />
			</view>
			<button class="add-btn up" :class="{ 'active-bg': payLoding }" @click="!payLoding ? confirm() : ''">生成二维码</button>
		</view>
		<view class="coupon_transfer" v-if="showcode">
			<view class="erwema">
				<tki-qrcodes
					:cid="cid"
					ref="qrcode"
					:val="val"
					:size="size"
					:unit="unit"
					:background="background"
					:foreground="foreground"
					:pdground="pdground"
					:icon="icon"
					:iconSize="iconSize"
					:lv="lv"
					:onval="onval"
					:loadMake="loadMake"
					:usingComponents="usingComponents"
					@result="qrR"
				></tki-qrcodes>
			</view>
			<view class="upload" @click="upload()">复制二维码</view>
			<view class="transfer">通过扫描此二维码转让购物卡</view>
			<!-- 	<view class="transfer_image" @click="baocun(image)"><image :src="image"></image></view> -->
		</view>
		<!-- <view class="orderDetialBox">
			<view class="f-header m-t">
				<view class="f-left-ic····························on"></view>
				<view class="tit-box"><text class="tit">卡片信息</text></view>
			</view>
			<view class="item flex">
				<view class="title-left flex">
					<text class="title">订单编号:</text>
					<view class="text">45875487854</view>
				</view>
			</view>
			<view class="item flex">
				<view class="title-left flex">
					<text class="title">付款时间:</text>
					<view class="text">2018-09-09 12:00:31</view>
				</view>
			</view>
			<view class="item flex">
				<view class="title-left flex">
					<text class="title">拼中时间:</text>
					<view class="text">2018-09-09 12:00:31</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
import { rechargemoneys } from '@/api/wallet.js';
import tkiQrcodes from '@/components/tki-qrcode/tki-qrcode.vue';
import { orderDetail } from '@/api/order.js';
export default {
	components: { tkiQrcodes },
	props: {
		qrval: {
			// 要生成的二维码值
			type: String
		}
	},
	data() {
		return {
			image: 'http://img03.taobaocdn.com/tfscom/TB2Drm1jVXXXXakXpXXXXXXXXXX_!!2-dgshop.png_300x300.jpg',
			payLoding: false, //是否加载中
			showcode: false, //显示二维码页面
			money: '',
			url: '',
			uid: '',
			qrsize: 120, // 二维码大小
			cid: 'tki-qrcode-canvas', //canvasId，页面存在多个二维码组件时需设置不同的ID
			size: 180, //生成的二维码大小
			unit: 'upx', //大小单位尺寸
			// show: true,//默认使用组件中的image标签显示二维码
			val: '', //要生成的内容
			background: '#ffffff', //二维码背景色
			foreground: '#333333', //二维码前景色
			pdground: '#333333', //二维码角标色
			icon: '', //二维码图标URL（必须是本地图片，网络图需要先下载至本地）
			iconSize: 40, //二维码图标大小
			lv: 3, //容错级别
			onval: true, //监听val值变化自动重新生成二维码
			loadMake: false, //组件初始化完成后自动生成二维码，val需要有值
			usingComponents: false, //是否使用了自定义组件模式（主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题）
			showLoading: false, //是否显示loading
			loadingText: '二维码生成中', //loading文字
			src: '', // 二维码生成后的图片地址或base64
			ratio: 1, //页面比例用于计算
			ctxSrc: '', //要显示的图片
			loading: true, //是否载入图片中
			canHeight: '',
			canWeidth: ''
		};
	},
	onLoad() {
		this.loadlist;
		let value = uni.getStorageSync('userInfo');
		this.uid = value.uid;
	},
	methods: {
		// 創建二维码
		creatQrcode() {
			console.log(this.$refs.qrcode._makeCode);
			this.$refs.qrcode._makeCode();
		},
		// 保存二维码到图库
		saveQrcode() {
			this.$refs.qrcode._saveCode();
		},
		// 生成二维码后返回base64
		qrR(res) {
			this.src = res;
		},
		//清空二维码（清空二维码会触发result回调 返回值为空）
		clearQrcode(e) {
			this.$refs.qrcode._clearCode();
			this.val = '';
		},
		// 载入订单详细
		loadlist() {},
		// 提交
		confirm() {
			let obj = this;
			if (!obj.money || obj.money == '') {
				uni.showToast({
					title: '请填写转让金额',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			obj.showcode = true;
			obj.payLoding = true;
			/**rechargemoneys({
				money: obj.money,
			})
				.then(e => {
					 console.log(e.data)
					 obj.val='{"url":"'+e.data.url+'"}';
				})
				.catch(e => {
					uni.showModal({
						title: '失败',
						content: '转入失败',
						content: JSON.stringify(e),
						showCancel: false
					});
				});**/

			obj.val = '{"money":"' + obj.money + '","id":"' + obj.uid + '"}';
			this.$nextTick(function() {
				this.creatQrcode();
			});
		},
		upload() {
			this.$refs.qrcode._saveCode();
		}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
}
.asdf {
	width: 110rpx;
	height: 110rpx;
}
.content {
	border-top: 2rpx solid #f2f3f5;
}
// 订单详细
.orderDetialBox {
	margin-top: 20rpx;
	padding: 0 30rpx;
	background-color: #ffffff;
	font-size: $font-base;
	color: $font-color-base;
	.item {
		height: 80rpx;
		.text {
			padding-left: 10rpx;
		}
		.buttom-right {
			width: 180rpx;
			border-radius: 99rpx;
			padding: 10rpx;
			text-align: center;
			border: 1px solid $border-color-light;
		}
	}
}

// 标题头
.f-header {
	display: flex;
	align-items: center;
	height: 80rpx;
	.tit-box {
		@extend %font-title-box;
		border-bottom: 2rpx solid #f0f0f0;
		padding: 25rpx 0rpx;
	}
	.tit {
		@extend %font-title;
	}
	.f-left-icon {
		@extend %f-left-icon;
	}
}
// 共有底部高度
$btHeight: 100rpx;
.btHeight {
	height: $btHeight;
}
.coupon {
	width: 100%;
	background-color: #ffffff;
	padding: 25rpx 25rpx;
	font-size: 30rpx;
	.coupon_img {
		width: 200rpx;
		height: 118rpx;
		margin-right: 15rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.coupon_name {
		height: 118rpx;
		width: 70%;
		.coupon_text {
			padding-bottom: 25rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
		.coupon_money {
			font-weight: 500;
			color: rgba(102, 102, 102, 1);
			.coupon_time {
				padding-left: 25rpx;
			}
		}
	}
}
.coupon_transfer {
	background-color: #ffffff;
	padding: 40rpx 25rpx;
	width: 100%;
	height: 100%;
	margin-top: 25rpx;
}
.transfer_image {
	width: 100%;
	height: 220rpx;
	text-align-last: center;
}
.transfer_image image {
	width: 220rpx;
	height: 220rpx;
}
.upload {
	width: 28%;
	background: linear-gradient(90deg, rgba(253, 59, 51, 1) 0%, rgba(254, 75, 52, 1) 100%);
	border-radius: 10rpx;
	color: #ffffff;
	font-size: 26rpx;
	margin: 25rpx auto;
	padding: 20rpx 30rpx;
	text-align: center;
}
.transfer {
	width: 100%;
	text-align: center;
	font-size: 26rpx;
}
.row-box {
	margin-top: 30rpx;
	padding: 20rpx 30rpx;
	background: #fff;
	.title {
		font-size: $font-base + 2rpx;
		color: $font-color-dark;
		padding-bottom: 25rpx;
	}
	.row {
		display: flex;
		align-items: center;
		position: relative;
		height: 80rpx;
		.tit {
			flex-shrink: 0;
			width: 40rpx;
			font-size: 30rpx;
			color: $font-color-dark;
		}
		.input {
			flex: 1;
			font-size: 30rpx;
			color: $font-color-dark;
		}
		.iconlocation {
			font-size: 36rpx;
			color: $font-color-light;
		}

		.buttom {
			color: $font-color;
			font-size: $font-base;
		}
	}
}
.add-btn {
	&.modified {
		color: $base-color;
	}
	&.up {
		background: #5dbc7c;
		border-radius: 40px;
		color: #fff;
	}
	&.to {
		border: 1px solid rgba(252, 42, 63, 1);
		border-radius: 40px;
		border-radius: 40px;
		color: #fc2a3f;
	}
	display: flex;
	align-items: center;
	justify-content: center;
	width: 560rpx;
	height: 75rpx;
	margin: 0 auto;
	margin-top: 25rpx;
	font-size: $font-lg;
	border-radius: 10rpx;
	// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
.erwema {
	width: 135px;
	height: 140px;
	background-color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0rpx auto;
}
</style>