zh_order_food_xcx/pages-buy/group-code.vue

<template>
	<view class="flex-common-css">
		<Nav title=" " leftIconColor="#333" titleColor="#333" bgckgroundBox='transparent'></Nav>
		<scroll-view :scroll-y="true" class="scroll-view-css p-24 box-border-box" @scrolltolower="scrolltolower">
			<view class="text-align-center fs-34 fc-3 fw-600 mb-20">
				{{codeData.goods_name || ''}}
			</view>
			<view class="fs-26 fc-9 mb-20 text-align-center">
				有效期：{{codeData.end_time || ''}}
			</view>
			<view class="bgc-f b-rad-20 p-24 box-border-box">
				<view class="fs-30 fc-3 fw-500 mb-20">
					券码 <span class="fs-26 fc-9" v-if="codeData.code">（{{codeData.code.length || ''}}张）</span>
				</view>
				<view class="align-items-center flex-wrap-wrap">
					<view class="" v-for="(item,index) in codeData.code" :key="index">
						<view class="fs-26 fw-600 mr-20" v-show="index<=2">
							{{item.code}}
						</view>
					</view>
				</view>
				<view class="fs-28">
					...
				</view>
				<view class="flex-direction align-items-center flex-justify-center">
					<canvasCode ref="canvasCodeRef" class="mb-20"></canvasCode>
					<view class="but bgc-41ABF5 b-rad-200 fs-30 fc-f text-align-center" @click="groupOrderCode()">
						刷新券码
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import canvasCode from '../components/canvas-code/code.vue'
	import {
		groupOrderCode
	} from "@/api/groupOrder.js"
	import tools from "@/service/tools";
	export default {
		components: {
			canvasCode
		},
		data() {
			return {
				order_id: 0,
				codeData: {
					code: []
				},
				time: ''
			};
		},
		onLoad(data) {
			if (data) {
				this.order_id = data.order_id
				this.groupOrderCode()
				this.time = setInterval(() => {
					this.groupOrderCode()
				}, 5000)
			}
		},
		onUnload() {
			clearInterval(this.time)
		},
		mounted() {},
		methods: {
			scrolltolower() {
				console.log('触底');
			},
			groupOrderCode() {
				groupOrderCode({
					order_id: this.order_id
				}).then((res) => {
					if (res.code === 1) {
						if (res.data.code.length === 0) {
							tools.error('暂无可用券')
							setTimeout(() => {
								tools.leftClick()
							}, 1000)
						}
						if (this.codeData.code.length != 0) {
							if (this.codeData.code.length == res.data.code.length) {
								return
							}
						}
						this.codeData = res.data
						this.$refs.canvasCodeRef.getCode(this.codeData.code[0].code)
					} else {
						tools.leftClick()
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.but {
		width: 100%;
		padding: 15rpx 0;
		box-sizing: border-box;
	}
</style>