xuan-pay-cweb/subpackages/groupBuyingConfiguration/groupVerify/groupVerify.vue

<template>
	<view class="all-container backcor9  pd-main  font15">
			<view v-if="detailData">
				<view class="border-8r backcorfff marb10    pd-main border-box " >
					<view class="bgLight border-8r paddbotm15 fcorfff">
						<view class="pd10 ">
							<view class="font22 fontwig6 fontspec">{{detailData.name}}</view>
							<view class=" dis-flex margle font18 mart10 ">
								<view class=" dis-flex fontspec">现价:¥<view class="font18 fontwig6 ">{{detailData.price}}</view>
								</view>
								<view class="corf6 dis-flex  fontspec margle text-lt font13" v-if="detailData.originalPrice">原价:¥<view>{{detailData.originalPrice}}</view>
								</view>
							</view>
						</view>
						<view class=" width100 circle  pr">
							<view class="border-dash width100"></view>
						</view>
					</view> 
					
					<view class="  paddtop10">
						<view class="dis-flex marb5" >
							<view class="flex-s0 fcor333 paddtright10 fontwig6">限制</view>
							<view class="dis-flex flex-1">
								{{detailData.astrict}}
							</view>
						</view>
						<view class="dis-flex marb5" >
							<view class="flex-s0 fcor333 paddtright10 fontwig6">须知</view>
							<view class="dis-flex flex-1">
								<text>{{detailData.serviceTime}}</text>
								<text class="icon-ymt to-right font13 fontColor "></text>
							</view>
						</view>
						<!-- <view class="dis-flex marb5" >
							<view class="flex-s0 fcor333 paddtright10 fontwig6">保障</view>
							<view class="dis-flex flex-1">
								<text>随时退</text>
							</view>
						</view> -->
					</view>
				</view>
	
				<view class="  font16 fontwig6 paddtop10 paddbotm10 ">
					团购
				</view>
				<view class="border-8r backcorfff marb10   font14  pd-main border-box " v-if="detailData.groupDetails">
					<view :class=" 'paddbotm5 '+(index<detailData.groupDetails.length-1?'border-b-666':'') "
						v-for="(item,index) in detailData.groupDetails" :key="index">
						<view class="dis-flex paddtop5  ">
							<view class="dot bgb2"></view>
							<view class="fontwig6">
								{{item.name}}
							</view>
						</view>
						<view class=" dis-flex flex-sp " v-for="(item2,index2) in item.list" :key="item2.id">
							<view class="flex-1 fc333 paddleft10 dis-flex ">
								<view class="dot bg33"></view>
								<view class="dis-flex flex-1 flex-sp">
									<view>{{item2.productName}}</view>
									<view>({{item2.count}}份)</view>
								</view>
							</view>
							<!-- <view class="flex-s0 paddleft10">
								￥{{item2.price}}
							</view> -->
						</view>
					</view>
				</view>
	
				<view class="  font16 fontwig6 paddtop10 paddbotm10 ">
					购买须知
				</view>
				<view class="border-8r backcorfff  marb10  font14  pd-main border-box ">
					<view class=" paddbotm5 border-b-666 ">
						<view class=" paddtop5  fontwig6">有效期</view>
						<view class=" dis-flex paddleft10">
							<view class="dot bgb2"></view>
							<view>
								{{detailData.validity.replace(',','至') || ''}}
							</view>
						</view>
					</view>
					<view class=" paddbotm5 border-b-666 ">
						<view class=" paddtop5  fontwig6">使用时间</view>
						<view class=" dis-flex paddleft10">
							<view class="dot bgb2"></view>
							<view>
								{{detailData.serviceTime || ''}}
							</view>
						</view>
					</view>
					<view class=" paddbotm5  " v-if="detailData.storeGroupServeRule">
						<view class=" paddtop5  fontwig6">使用规则</view>
						<view class=" dis-flex paddleft10">
							<view class="dot bgb2"></view>
							<view>
								{{detailData.storeGroupServeRule.content || ''}}
							</view>
						</view>
					</view>
				</view>
				<view class="btn92 mart10 marb10" @click="comfirmVerify()">
					立即核销
				</view>
			</view>
			
			
		</view>
</template>

<script>
	import {getGroupContentByCode,gorOrderNotify} from '@/Utils/groupBuying.js';
	
	const app = getApp();
		export default {
			data(){
				return{
					groupCode:'',
					detailData:null,//详情信息
					imgUrl: app.globalData.imgUrl, //图片访问地址
					instructionList:[],//使用须知
					
				}
			},
			onLoad(option){
				if(option.orderKey){
					this.groupCode = option.orderKey;
					this.getGroupContentByCode();//查询信息
				}
				
			},
			methods:{
				getGroupContentByCode(){
					let params={
						groupCode:this.groupCode
					}
					uni.showLoading({
						title:"加载中...",
						mask:true,
					})
					getGroupContentByCode(params).then(res=>{
						uni.hideLoading();
						if (res.return_code == '000000') {
							this.detailData = res.return_data;
													
						} else {
							uni.showToast({
								title: res.return_msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				},
				/* 立即核销 */
				comfirmVerify(){
					uni.showLoading({
						title:"核销中...",
						mask:true,
					})
					let params={
						groupCode:this.groupCode,
						storeId:app.globalData.userInfo.store.id
					}
					gorOrderNotify(params).then(res=>{
						uni.hideLoading();
						if (res.return_code == '000000') {
							uni.showToast({
								title:res.return_data,
								icon: 'none',
								duration: 2000
							})
							// setTimeout(()=>{
							// 	uni.navigateBack();
							// },1000)
													
						} else {
							uni.showToast({
								title: res.return_msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				},
			}
		}
</script>

<style lang="scss" scoped>
	.pr {
		position: relative;
	}

	.border-box{
		box-sizing: border-box;
	}
	.text-lt{
		text-decoration: line-through;
	}
	/* ======== */

	.bgLight {
		background-color: #089bf5;
	}

	.pd10 {
		padding: 10px;
	}

	.border-dash {
		border-bottom: 1px dashed #f6f6f6;
		position: absolute;
		top: 9px;
	}

	.circle {
		height:40px;
		&::before {
			content: "";
			width: 20px;
			height: 20px;
			background-color: #ffffff;
			position: absolute;
			left: -10px;
			top: 0px;
			display: block;
			z-index: 99;
			border-radius: 50%;
		}

		&::after {
			content: "";
			display: block;
			width: 20px;
			height: 20px;
			background-color: #ffffff;
			position: absolute;
			right: -10px;
			top: 0px;
			z-index: 99;
			border-radius: 50%;
			
		}
	}

	//end

	//content
	.dot {
		width: 5px;
		height: 5px;
		border-radius: 50%;
		flex-shrink: 0;
		margin-right: 8px;

		&.bgb2 {
			background-color: #b2b2b2;
		}

		&.bg33 {
			background-color: #333333;
		}
	}
</style>