hyshop/user/page/coupon.vue

<template>
	<view class="content">
	<!-- 二维码 -->
		<tki-qrcode v-if="info.store&&info.status==0" :cid="cid" ref="qrcode" :val="info.code" :size="size" :unit="unit" :background="background"
		     :foreground="foreground" :pdground="pdground" :iconSize="iconSize" :lv="lv" :onval="onval"
		     :loadMake="loadMake" :usingComponents="usingComponents" @result="qrR" />
			 <view class="text" v-if="info.store&&info.status==0">
			 	{{info.code}}
			 </view>
			 <view class="text"  v-if="info.store&&info.status==0">
			 	请向核销员出示
			 </view>
			 
		<view class="store" v-if="info.store">
			
			<view class="">
				商家名称: <text class="item">{{info.store.name}}</text> 
			</view>
			<view class="">
				商家电话: <text class="item">{{info.store.phone}}</text> 
			</view>
			<view class="">
				商家地址:<text class="item">{{info.store.address}}{{info.store.detailed_address}}</text> 
			</view>
		</view>
		<view class="title">
			优惠券名称: <text class="item">{{info.coupon_title}}</text>  
		</view>
		<view class="title">
			优惠: <text class="red item">{{info.coupon_price}}￥</text> 
		</view>
		<view class="title"  v-if="info.use_min_price!='0.00'">
			使用条件:<text class="item">满{{info.use_min_price}}￥可使用</text>  
		</view>
		<view class="title" v-else>
			使用条件: <text class="item">无门槛</text> 
		</view>
		<view class="title">
			有效期:<text class="item"> {{info._add_time}}至{{info._end_time}}</text>
		</view>
		<view class="title">
			优惠券状态:<text class="item">{{info._msg}}</text>  
		</view>
		<view class=""  v-if="info.store">
			<!-- #ifdef H5 -->
			<button class="dh"@click.stop="toGaodeMap(info.store.latitude,info.store.longitude,info.store.name)">导航到商家</button>
			<!-- #endif -->
			<!-- #ifdef MP -->
			<button class="dh"@click.stop="dh(info.store)">导航到商家</button>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
import {CouponsDetails } from '@/api/order.js';
export default{
	components: {
		tkiQrcode
	},
	data() {
		return {
			info:'',
			id:0,
			cid: 'tki-qrcode-canvas', //canvasId，页面存在多个二维码组件时需设置不同的ID
			size: 362, //生成的二维码大小
			unit: 'upx', //大小单位尺寸
			show: true, //默认使用组件中的image标签显示二维码
			background: '#ffffff', //二维码背景色
			foreground: '#333333', //二维码前景色
			pdground: '#333333', //二维码角标色
			icon: '', //二维码图标URL（必须是本地图片，网络图需要先下载至本地）
			iconSize: 40, //二维码图标大小
			lv: 3, //容错级别
			onval: true, //监听val值变化自动重新生成二维码
			loadMake: true, //组件初始化完成后自动生成二维码，val需要有值
			usingComponents: false, //是否使用了自定义组件模式（主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题）
			showLoading: false, //是否显示loading
			loadingText: '二维码生成中', //loading文字
			src: '', // 二维码生成后的图片地址或base64
			ratio: 1, //页面比例用于计算
			ctxSrc: '', //要显示的图片
			loading: true, //是否载入图片中
			canHeight: '', //画布高度
			canWeidth: '' //画布宽度
			
		};
	},
	onLoad(options) {
		this.id=options.id
		this.loadData();
	},
	methods: {
		// 核销码事件
		qrR(){},
		// 导航事件
		dh(){
			uni.openLocation({
						latitude:this.info.store.latitude,
						longitude:this.info.store.longitude,
						success: function () {
							console.log('success');
						}
					});
		},
		//返回首页
		navTo(){
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		//获取优惠券详情
		loadData() {
			let t=this
			console.log(0)
			CouponsDetails({
					id:this.id,
				})
				.then(({ data }) => {
					console.log(data,'909090')
					t.info=data[0]
				})
				.catch(e => {
					console.log(e);
				})
		},
		// 导航
		dh(item) {
			wx.openLocation({
				latitude: item.latitude * 1,
				longitude: item.longitude * 1,
				name: item.name,
				address: item.detailed_address
			})
		},
		// 调用高德
		toGaodeMap(latitude, longitude, address) {
			window.location.href = `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${address}`;
		},
	}
};
</script>

<style lang="scss">
// 卡卷可用时颜色
$card-color-action: #fc4141;
page,
.content {
	padding: 40rpx;
	text-align: center;
	border-radius: 20rpx;
	margin: 2%;
	background:#fff;
	width: 96%;
	height: 94%;
}
.title,.store{
	letter-spacing:8rpx;
	margin: 20rpx;
	font-size: 32rpx;
	text-align: left;
}
.red{
	color:$card-color-action ;
}
.item{
	letter-spacing:4rpx;
	font-size: 24rpx;
}
.dh{
	margin-top: 60rpx;
	color: #fff;
	background-color: $card-color-action;
}
.text{
	font-size: 24rpx;
	letter-spacing:4rpx;
	margin-top: 20rpx;
}

</style>