wxThird/pages/integral/integralConfirm.vue

<template>
 <view class="box">
	 <view class="topTis">
		 <view class="tanhao">!</view>
		 <view class="topTisTxt">提交申请后请到店兑换</view>
	 </view>
	 <view class="cont">
		 <view class="contTitle">商品明细</view>
		 <view class="goodsCont">
			 <img :src="jfgoodsDetail.imgList[0].img" alt="" class="goodsImg" v-if="jfgoodsDetail.imgList.length>0">
			  <image src="../../static/timg/noimg.png"  class="goodsImg" v-else></image>
		     <view class="goodsRight">
				 <view class="goodsName">{{jfgoodsDetail.name}}</view>
				 <view class="goodsNumbox">
					 <view class="Price">￥<span>{{jfgoodsDetail.salePrice}}</span> </view>
					 <view class="goodsNum">x{{goodsnum}}</view>
				 </view>
			 </view>
		 </view>
	 </view>
	 <view class="shopCont">
		 <view class="shopLeft">服务门店</view>
		 <view class="shopName">{{shopName}}</view>
	 </view>
	 <view class="buybtnBox">
	 	<view class="ktyong"><view>合计 <span class="ktyong1">{{goodsnum*jfgoodsDetail.integral}}</span><span class="ktyong2">积分</span>   </view> 
	 	   <view class="kyNum">可用积分：{{avaIntegral}}</view>
	 	</view>
	 	<view class="bottomBtn" @click="goBuy">提交订单</view>
	 </view>
 </view>
</template>

<script>
	export default {
		data() {
			return {
				shopId:'',
				shopName:'',
				avaIntegral:'',
				goodsnum:'',
				jfgoodsDetail:'',
			}
		},
		onLoad(opt) {
			this.jfgoodsDetail=uni.getStorageSync("jfgoodsDetail");
			this.shopName=opt.shopName;
			this.shopId=opt.shopId;
			this.avaIntegral=opt.avaIntegral;
			this.goodsnum=opt.goodsnum;
		},
		methods: {
			
			goDetail(){
				uni.navigateTo({
					url:'integralgoodsDetail'
				})
			}
		}
	}
</script>

<style scoped>
.box{
	background: #F4F5F7;
	min-height: 100vh;
}
 .tanhao{
	 width: 30rpx;
	 height: 30rpx;
	 background: #F19D01;
	 border-radius: 50%;
	 text-align: center;
	 line-height: 30rpx;
	 color: #ffffff;
	 font-size: 30rpx;
 }
.topTis{
	padding: 20rpx 21rpx;
	background: #FDF5E5;
	display: flex;
}
.topTisTxt{
	color: #F19D01;font-size: 26rpx;line-height: 30rpx;padding-left: 10rpx;
}
.cont{
	width: 702rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	margin-left: 24rpx;
	margin-top: 20rpx;
}
.contTitle{
	font-size: 30rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #3C3C3C;
	line-height: 42rpx;
	padding: 26rpx 20rpx;
	border-bottom: 1px solid #EEEEEE;
}
.goodsImg{
	width: 120rpx;
	height: 120rpx;
}
.goodsCont{
	display: flex;
	padding: 30rpx 20rpx;
}
.goodsRight{
	width: 522rpx;
	padding-left: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.goodsName{
	color: #3C3C3C;font-size: 26rpx;
}
.goodsNumbox{
	display: flex;
	justify-content: space-between;
}
.Price{
	color: #3C3C3C;font-size: 22rpx;
}
.Price span{
	font-weight: 500;
	color: #3C3C3C;
	font-size: 32rpx;
}
.goodsNum{
	color: #999999;font-size: 24rpx;padding-top: 5rpx;
}
.buybtnBox{
	width: 750rpx;
	height: 120rpx;
	background: #FFFFFF;
	box-shadow: 0px -2px 10px 0px rgba(153,153,153,0.2000);
	display: flex;
	justify-content: space-between;
	position: fixed;
	left: 0;
	bottom: 0;
	padding-bottom: env(safe-area-inset-bottom);
}
.ktyong{
		font-weight: 500;
		color: #666666;
		font-size: 24rpx;
		padding-left: 30rpx;
		padding-top: 18rpx;
	}
    .ktyong1{
		color: #FF0000;
		font-size: 32rpx;
	}
	.ktyong2{
		color: #FF0000;
		font-size: 24rpx;
	}
	.kyNum{
		color: #999999;
		font-size: 24rpx;
	}
	.bottomBtn{
		width: 204rpx;
		height: 74rpx;
		background: #D53533;
		border-radius: 37rpx;
		line-height: 74rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 30rpx;
		margin-top: 23rpx;
		margin-left: 70rpx;
		margin-right: 30rpx;
	}
.shopCont{
	background: #FEFFFE;
	border-radius: 10rpx;
	width: 702rpx;
	padding: 30rpx 0;
	margin-top: 20rpx;
	margin-left: 24rpx;
	display: flex;
	justify-content: space-between;
}
.shopLeft{
	color: #666666;
	font-size: 28rpx;
	padding-left: 20rpx;
}
.shopName{
	color: #333333;font-size: 28rpx;
	padding-right: 20rpx;
}
</style>