H5_module/service/cardDetail/index.vue

<template>
	<view :style="[mainStyle]">
		<view :class="'top-fixed' + (skinNotColor ? ' not-color' : '')" :style="'height: '+ systems.barHeight + 'rpx;'">
			<view class="top-fixed-c" :style="'height: '+ systems.navigationHeight + 'rpx;margin-top:' + systems.ktxStatusHeight + 'rpx;'">
				<navigator url="" hover-class="none" open-type="navigateBack" class="back"><image :src="picUrlss+'back_white.png'"></image></navigator>
				<view class="top-title tover" :style="'line-height: '+ systems.navigationHeight + 'rpx;'">详情</view>
			</view>
		</view>
		<view :style="'height:'+(systems.barHeight)+'rpx;'"></view>
		<view class="info">
			<view class="info-c">
				<view class="status ddflex"><image src="../static/images/dai_sy.png"></image>{{params.state == 2?'已使用':'待使用'}}</view>
				<view class="infos">
					<view class="shop ddflex" v-if="params.showProduct.merchantName"><image src="../static/images/dpico.png"></image>{{params.showProduct.merchantName}}</view>
					<view class="product ddflex">
						<image :src="params.showProduct.pic" mode="aspectFill"></image>
						<view class="fflex">
							<view class="pro-tit">{{params.showProduct.title}}</view>
							<view class="specs" v-if="params.showProduct.specs">规格<text v-for="(it,index) in params.showProduct.specs" :key="index">{{it.value}}</text></view>
							<view class="pro-opt ddflex">
								<view class="price"><text>￥</text>{{params.showProduct.money}}</view>
								<view class="count">×{{params.showProduct.quantity}}</view>
							</view>
						</view>
					</view>
					<view class="code ddflex" v-if="params.state == 1">
						<u-qrcode ref="qrcode" canvas-id="qrcode" :value="params.code" size="180"></u-qrcode>
					</view>
					<view class="code-info">
						<block v-if="params.state == 1">
						<view class="code-sta"><text>待使用</text><block v-if="params.exspireTime">{{params.exspireTime}} 到期</block></view>
						<view class="code-ma">{{params.code}}</view>
						</block>
						<block v-else>
						<view class="code-ma">使用时间：{{params.useTime}}</view>
						<view class="code-ma">核销门店：{{params.writeMerchant}}</view>
						<view class="code-ma">核销人员：{{params.useUser}}</view>
						</block>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const req = require("../../utils/request.js");
	const api = require("../../utils/api.js");
	const app = getApp();
	
	export default {
		data() {
			return {
				mainStyle: app.globalData.mainStyle,
				picUrlss: req.public.picUrls,
				systems: {},
				id: '',
				params: {},
				code: ''
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getData();
		},
		onReachBottom() {
		},
		methods:{
			getData(){
				req.getRequest('/api/v3/secondary/card/detail',{id: this.id},data=>{
					if (data.showProduct.specs && data.showProduct.specs !== 'DEFAULT_SKU') {
						data.showProduct.specs = JSON.parse(data.showProduct.specs);
					} else {
						data.showProduct.specs = ''
					}
					this.params = data;
				})
			},
			checks(item,index){
				let pageList = this.pageList;
				if(pageList[index].isShow){
					pageList[index].isShow = false;
					this.pageList=JSON.parse(JSON.stringify(pageList))
				}else{
					pageList.map((it,dx)=>{
						if(dx==index) it.isShow = true;
						else it.isShow = false;
						return it;
					});
					this.pageList=JSON.parse(JSON.stringify(pageList))
				}
			},
			createCode(item){
				this.currentCard = item;
				this.isShowCard = true
			},
			hideCardPop(){
				this.isShowCard = false
			},
			copyCode(){
				uni.setClipboardData({
					data: this.currentCard.code,
					success() {
						req.msg('复制成功')
					}
				})
			},
			jumpUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			scanCode(){
				uni.scanCode({
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						uni.navigateTo({
							url: '/mine/secondCard/secondCard?code=' + res.result
						})
					}
				})
			}
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale // 导航栏的高度
			};
			systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
			this.systems = systems;
		}
	}
</script>

<style>
	@import "./index.css"
</style>