wxThird/pages/integral/recordDetail.vue

<template>
	<view class="box">

		<!-- 自定义导航 -->
		<view class="zdyNavBox">
			<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
			<view class="zdyNav">
				<view class="zdyNavLeft">
					<image src="../../static/img/nav_icon_back.png" mode="aspectFit" class="backImg" @click="goback">
					</image>
					<!-- <image src="../../static/img/nav_icon_home.png" mode="" class="homeImg" @click="gohome"></image> -->
				</view>
				<view class="zdyNavTitle">详情</view>
				<view style="width: 50px;"></view>
			</view>
		</view>
		<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
		<view style="height: 44px;"></view>


		<view class="top" :style="{background:'#'+themeColor}">
			<view class="orderState">
				<image src="../../static/img/icon_order_def.png" mode="" style="width: 44rpx;height: 44rpx;"></image>

				<!--  hState 0已取消1未兑换2已兑换 -->
				<view class="SheetState" v-if="orderData.hState == 1">未兑换</view>
				<view class="SheetState" v-if="orderData.hState == 2">已兑换</view>
				<view class="SheetState" v-if="orderData.hState == 0">已取消</view>


			</view>


		</view>

		<!-- 兑换码 -->
		<view class="orderTop" v-if="orderData.hState==1 || orderData.hState==2">

			<view class="maBox">

				<view class="timeLeft">
					<span>兑换码</span>
				</view>
				<view style="text-decoration:line-through; color: #999999; font-size: 26rpx;"
					v-if="orderData.hState==2 && orderData.qrCode!=null">{{orderData.qrCode}}</view>
				<view class="rightShou" v-if="orderData.hState==1">
					<view class="timeRight" style="color: #FF2400;" @click="showMa">{{isShowMa==true?'收起':'展开'}}</view>
					<image src="../../static/img/icon_arrow_up_orange.png" style="width: 17rpx; height: 11rpx;">
					</image>
				</view>
				<view style="color: #999999; font-size: 26rpx;" v-if="orderData.hState==2">已使用</view>
			</view>
			<!-- 兑换码 -->
			<view class="querenMa" v-if="isShowMa==true && orderData.hState==1">
				<view style="color: #FF2400; font-size: 24rpx; text-align: center;">请到店出示券码即可开始服务</view>
				<view class="maBoximg">
					<tki-qrcode cid="qrcode1" ref="qrcode" :val="orderData.qrCode" :size="308" :unit="unit"
						:pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval"
						:loadMake="loadMake" :usingComponents="true" @result="qrR" />
				</view>
				<view style="color: #333333; font-size: 26rpx; font-weight: bold; text-align: center;">
					{{orderData.qrCode}}
				</view>
			</view>

		</view>


		<!-- 店铺信息 -->
		<view class="shopBox" :class="{wuMa:orderData.hState==0}">
			<image src="../../static/img/icon_store.png" mode="" class="shopBoximg"></image>
			<view class="shopCont">
				<view class="shopName">{{orderData.shopInfo.shopName}}</view>
				<view class="Address">
					{{orderData.shopInfo.provinceName}}{{orderData.shopInfo.cityName}}{{orderData.shopInfo.areaName}}{{orderData.shopInfo.address?orderData.shopInfo.address:''}}
				</view>

			</view>
			<view class="shopRightBox" @click="map">

				<image src="../../static/img/icon_ditu.png" mode="" class="shopRightImg"></image>

				<view class="shopRihgtTxt">地图</view>
			</view>
			<view class="shopsx"></view>
			<view class="shopRightBox" @click="call">

				<image src="../../static/img/icon_phone.png" mode="" class="shopRightImg"></image>

				<view class="shopRihgtTxt">电话</view>
			</view>
		</view>

	
		<!-- 商品明细 -->
		<view class="information">

			<view class="detailedTitle">商品明细</view>
			<view class="goodsBox">
				<image :src="orderData.integralGoods.img" mode="" style="width: 120rpx;height: 120rpx;"></image>
				<view class="goodsRight">
					<view class="goodsName">{{orderData.integralGoods.name}}</view>
					<view class="goodsCount">
						<view class="jifen">{{orderData.integral/orderData.qty}}<span
								style="font-size: 24rpx; color: #333333; margin-left: 5rpx;">积分</span>
						</view>
						<view class="count">x{{orderData.qty}}</view>
					</view>
				</view>
			</view>

			<view class="sum">
				<span style="font-size: 24rpx; color: #666666; margin-right: 10rpx;">总计</span>
				<span style="font-size: 32rpx; color: #EC0F0A; 
			font-weight: 500; margin-right: 5rpx;">{{orderData.integral}}</span>
				<span style=" font-size: 24rpx; color: #EC0F0A;">积分</span>
			</view>

		</view>

		

		<!-- 订单信息 -->
		<view class="information">
			<view class="detailedTitle">订单信息</view>
			<view class="informationLine">
				<view class="informationTxt">申请单号：</view>
				<view class="informationNum">{{orderData.code}}<span class="codeCopy"
						@click="copy(orderData.code)">复制</span></view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">手机号：</view>
				<view class="informationNum">{{orderData.mobilephone}}</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">申请时间：</view>
				<view class="informationNum">{{orderData.createtime}}</view>
			</view>

			

		</view>

		
		<view style="height: 50rpx;background-color: #F4F5F7;"></view>

		<view class="bottom" v-if="orderData.hState == 1">

			<view class="cancel" @click="cancelBespeak">取消订单</view>
			
		</view>



	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {

				id: '',
				iStatusBarHeight: '',
				SheetType: '', //SheetType 1 商品2项目3套餐4救援5钣喷6集客
				orderData: '',

				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				size: 500,
				qrcodeShow: false,
				qrcodeTop: '-100vh',
				qrcodeTopVal: '',
				ifShow: false,
				val: '二维码', // 要生成的二维码值
				unit: 'upx', // 单位
				background: '#b4e9e2', // 背景色
				foreground: '#309286', // 前景色
				pdground: '#262637', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				src: '', // 二维码生成后的图片地址或base64
				isShowMa: true,
                themeColor:'',

			}
		},
		onLoad(opt) {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.id = opt.id
			this.SheetType = opt.SheetType
            this.themeColor = uni.getStorageSync("themeColor");
			if (this.id) {
				this.getData()
			}


		},


		methods: {

			showMa() {
				this.isShowMa = !this.isShowMa
			},

			copy(txt) {
				uni.setClipboardData({
					data: txt,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},

			cancelBespeak() {
				var that = this
				uni.showModal({
					title: '提示',
					content: '是否取消该订单',
					cancelText: '否',
					confirmText: '是',
					success: function(res) {
						if (res.confirm) {

							uni.showLoading({
								title: '加载中'
							})

							that.$http('openIntegralMall/cancelExchange', {

								id: that.id,

							}, 'POST').then(res => {
								uni.hideLoading();
								// var list = res.data.Items

								uni.showToast({
									title: '取消成功',
									icon: 'none',
									duration: 2000
								});
								//setTimeout(function() {
									that.getData();
								//}, 1000);
							})


						} else if (res.cancel) {

						}
					}
				});
			},

			map() {
				console.log("打开地图")
				var that = this;
				if (!that.orderData.shopInfo.lat || !that.orderData.shopInfo.lng) {
					uni.showToast({
						title: '该店铺未设置定位',
						icon: 'none',
						duration: 3000
					});
				} else {
					uni.openLocation({
						latitude: Number(that.orderData.shopInfo.lat),
						longitude: Number(that.orderData.shopInfo.lng),
						name: that.orderData.shopInfo.shopName,
						address: that.orderData.shopInfo.provinceName + that.orderData.shopInfo.cityName + that
							.orderData.shopInfo.areaName + that.orderData.shopInfo.address,
						success: function() {
							console.log('success');
						},
						fail(err) {
							console.log(err)
						}
					});
				}

			},

			call() {
				uni.makePhoneCall({
					phoneNumber: this.orderData.shopInfo.mobilePhone
				});
			},


			getData() {
				uni.showLoading({
					title: '加载中'
				});

				this.$http('openIntegralMall/exchangeDetail', {

					id: this.id,
				}, 'GET').then(res => {
					uni.hideLoading();
					this.orderData = res.data;
					

				})
			},

			goback() {
				uni.navigateBack({
					delta: 1
				})
			},
			gohome() {
				uni.switchTab({
					url: '../index/index'
				})
			},

		},
		onPullDownRefresh() {

			this.getData()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},

	}
</script>

<style scoped>
	.box {
		min-height: 100vh;
		background: #F4F5F7;
		padding-bottom: 135rpx;
	}

	.zdyNavBox {
		width: 100vw;
		background: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}

	.zdyNav {
		height: 44px;
		display: flex;
		justify-content: space-between;

		align-items: center;
	}

	.backImg {
		width: 50rpx;
		height: 50rpx;
		margin-left: 10rpx;
		margin-right: 20rpx;
	}

	.homeImg {
		width: 44rpx;
		height: 44rpx;

	}

	.zdyNavLeft {
		display: flex;
		align-items: center;
	}

	.zdyNavTitle {
		width: 100vw;
		height: 44px;
		background: #FFFFFF;
		text-align: center;
		font-size: 34rpx;
		line-height: 44px;
	}


	.top {
		height: 190rpx;
		background-color: #EC0F0A;

	}

	.orderState {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 40rpx;
	}

	.SheetState {
		display: flex;
		justify-content: center;
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin-left: 15rpx;

	}

	.orderTop {
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 20rpx 24rpx;
		
		margin-top: -60rpx;
	}

	.timeLeft {
		font-size: 30rpx;
		color: #3C3C3C;
        font-weight: 500;
	}

	.timeRight {
		font-size: 26rpx;
		color: #3F90F7;
		margin-right: 8rpx;
	}


	.rightShou {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.maBox {
		display: flex;
		justify-content: space-between;
		padding: 26rpx 20rpx;
	}

	.querenMa {

		margin: 20rpx 0;
		padding-bottom: 30rpx;
	}

	.maBoximg {
		width: 308rpx;
		height: 308rpx;
		margin: 30rpx 197rpx;


	}
















	.timeEditImg {
		width: 25rpx;
		height: 25rpx;
		padding-left: 20rpx;
	}



	.shopBoximg {
		width: 40rpx;
		height: 40rpx;
	}

	.shopRightImg {
		width: 44rpx;
		height: 45rpx;
	}

	.shopsx {
		width: 1px;
		height: 50rpx;
		background: #EEEEEE;
		margin-top: 30rpx;
		margin-left: 28rpx;
	}

	.shopBox {

		display: flex;
		padding: 30rpx 20rpx;
		margin: 0rpx 24rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;

	}
	.wuMa{
		margin-top: -60rpx;
	}

	.shopCont {
		width: 405rpx;
		padding-left: 20rpx;

	}

	.shopName {
		font-size: 30rpx;
		font-weight: bold;
		color: #3C3C3C;
		line-height: 42rpx;
	}

	.Address {
		color: #999999;
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.shopRihgtTxt {
		color: #999999;
		font-size: 24rpx;

	}

	.shopRightBox {

		padding-left: 28rpx;
	}





	.detailedTitle {
		padding: 23rpx 20rpx;
		display: flex;
		text-align: center;
		align-content: flex-start;
		border-bottom: 1rpx solid #EEEEEE;

		font-size: 30rpx;
		font-weight: bold;
		color: #3C3C3C;
	}


	.detailedLine {
		display: flex;
		padding: 16rpx 20rpx;
		justify-content: space-between;
		align-items: center;
	}

	.detailedImg {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
	}



	.detailedName {
		display: flex;
		align-items: center;


	}

	.code {
		font-size: 26rpx;
		color: #333333;
		font-weight: bold;
		width: 180rpx
	}

	.old {
		color: #999999;

		font-weight: 400;
		text-decoration: line-through;
	}

	.redPoint {
		width: 10rpx;
		height: 10rpx;
		background: #EC0F0A;
		border-radius: 10rpx;
		margin-right: 10rpx;
	}

	.quanState {
		font-size: 22rpx;
		color: #F19D01;
		padding: 0 10rpx;

		border: 1rpx solid #F19D01;

		border-radius: 4rpx;
		margin-left: 20rpx;
	}

	.quanState2 {
		font-size: 22rpx;
		color: #999999;
		padding: 0 10rpx;

		border: 1rpx solid #DDDDDD;

		border-radius: 4rpx;
		margin-left: 20rpx;
	}



	.information {

		background: #FFFFFF;
		border-radius: 10rpx;

		margin: 20rpx 24rpx;
		padding-bottom: 15rpx;
	}



	.goodsBox {
		display: flex;
		padding: 30rpx 20rpx;

		border-bottom: 1rpx solid #EEEEEE;
	}

	.goodsRight {
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.goodsName {
		width: 522rpx;

		font-size: 26rpx;
		font-weight: 400;
		color: #3C3C3C;
		line-height: 37rpx;
		margin-bottom: 15rpx;
	}

	.goodsCount {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.jifen {

		height: 45rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		line-height: 45rpx;

	}

	.count {
		height: 33rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		line-height: 33rpx;
	}

	.sum {
		margin-top: 34rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding-right: 20rpx;
	}

	.informationLine {
		display: flex;

		padding: 15rpx 20rpx;
	}

	.informationLine2 {
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		padding: 0 20rpx;
	}

	.salePrice {

		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
		line-height: 45rpx;
	}

	
	.informationTxt {
		width: 190rpx;
		font-size: 26rpx;
		color: #999999;
	}

	.line {
		height: 20rpx;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #EEEEEE;
	}

	

	.informationNum {
		color: #333333;
		font-size: 26rpx;
	}

	.codeCopy {
		width: 77rpx;
		height: 36rpx;
		background: #F4F5F7;
		border-radius: 22rpx;
		font-size: 24rpx;
		color: #333333;
		text-align: center;
		line-height: 33rpx;
		padding: 0 15rpx;
		margin-left: 20rpx;
	}

	.orderBottom {
		width: 750rpx;
		height: 98rpx;
		background: #FFFFFF;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: flex-end;
	}






	.bottom {
		display: flex;
		justify-content: flex-end;
		padding: 20rpx;
		background-color: #FFFFFF;
		align-items: center;
		height: 98rpx;
		width: 100vw;
		position: fixed;
		bottom: 0rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.cancel {
		color: #3C3C3C;
		font-size: 28rpx;
		width: 150rpx;
		height: 56rpx;
		border-radius: 36rpx;
		border: 1rpx solid #DDDDDD;
		text-align: center;
		line-height: 56rpx;
		margin-right: 40rpx;
	}

	.defer {
		color: #EC0F0A;
		font-size: 28rpx;
		width: 150rpx;
		height: 56rpx;
		border-radius: 36rpx;
		border: 1rpx solid #EC0F0A;
		text-align: center;
		line-height: 56rpx;
		margin-right: 40rpx;
	}

	.itemBox {
		margin: 20rpx;
		border-radius: 10rpx;
		border: 2rpx solid #EEEEEE;
	}

	.itemTop {
		padding: 18rpx 20rpx;
		padding-right: 0;
		background-color: #FFEFD5;

		display: flex;
		justify-content: space-between;
		align-content: center;
	}

	.topTitle {
		width: 104rpx;
		font-size: 26rpx;
		color: #333333;
		margin-right: 20rpx;
		text-align: right;
	}


	.leftItem {
		font-size: 26rpx;
		color: #333333;
		margin-right: 20rpx;
		flex-grow: 1;
		/* 隐藏文字显示 ...不换行 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.itemContent {
		padding: 20rpx;
		padding-right: 0;
		background-color: #FFFFFF;

		display: flex;
		justify-content: space-between;
		align-content: center;
	}

	
</style>