cashier_wx/pages/index/indexs.vue

<template>
	<view class="content">
		<view
			class="contentbox"
			:style="
				'background:url(' +
				(shopExtend ? shopExtend[0].value : 'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/indexs/shuangbackground.png') +
				') no-repeat center center / cover'
			"
		>
			<view class="contentboxitem flex-between">
				<view class="contentboxitemleft flex-colum" @click="scanCodehandle(0)">
					<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/indexs/Xdiancan.png" mode="aspectFill"></image>
					<text class="contentboxitemlefttextone">点餐</text>
					<text class="contentboxitemlefttexttow">在线点不排队</text>
				</view>
				<view class="contentboxitemright">
					<!-- 	<view class="contentboxitemright_item flex-between"
						@click="memberindex('user/member/memberdetails')"> -->
					<view class="contentboxitemright_item flex-between" @click="tomember">
						<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/indexs/Xvip.png" mode="aspectFill"></image>
						<view class="contentboxitemright_itembox flex-colum">
							<text>会员</text>
							<text>入会享权益</text>
						</view>
					</view>
					<!-- <view class="contentboxitemright_item flex-between" 
					@click="memberindex('user/member/index')"
					> -->

					<view class="contentboxitemright_item flex-between" @click="toCharge">
						<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/indexs/Xchong.png" mode="aspectFill"></image>
						<view class="contentboxitemright_itembox flex-colum">
							<text>充值</text>
							<text>充值享更多优惠</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { getMemberConfig, getRechargeConfig } from '@/common/api/index/index.js';
import { ref, reactive, defineProps, defineEmits, onMounted } from 'vue';

// 定义接收的属性
const props = defineProps({
	shopExtend: {
		type: Array,
		default: []
	}
});

import { productStore } from '@/stores/user.js';

const scanCodehandle = async (i) => {
	const store = productStore();
	await store.scanCodeactions();
};

const memberindex = (url) => {
	uni.pro.navigateTo(url, {
		shopId: uni.cache.get('shopId'),
		type: 'index'
	});
};

function tomember() {
	if (isMember.value) {
		const shopUserInfo = uni.cache.get('shopUserInfo') || {};
		const shopId = uni.cache.get('shopId');
		if (!shopUserInfo.isVip) {
			uni.navigateTo({
				url: '/user/vip/buy-vip?shopId=' + shopId
			});
			return;
		}
		uni.navigateTo({
			url: '/user/vip/vip?shopId=' + shopId
		});
	} else {
		uni.showToast({
			title: '暂未开放',
			icon: 'none'
		});
	}
}

function toCharge() {
	if (isCharge.value) {
		const shopId = uni.cache.get('shopId');
		uni.navigateTo({
			url: '/pages/user/member/czzx?shopId=' + shopId
		});
	} else {
		uni.showToast({
			title: '暂未开放',
			icon: 'none'
		});
	}
}
const getQueryString = (url, name) => {
	//解码
	var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i');
	var r = url.substr(1).match(reg);
	if (r != null) {
		return r[2];
	}
	return null;
};

// 获取会员配置
const isMember = ref(0);
const isCharge = ref(0);
async function getVipConfig() {
	try {
		const res1 = await getMemberConfig({ shopId: uni.cache.get('shopId') });
		const res2 = await getRechargeConfig({ shopId: uni.cache.get('shopId') });

		isMember.value = +res1.memberConfig.isOpen;
		isCharge.value = +res2.isEnable;
	} catch (error) {
		console.log(error);
	}
}

onMounted(() => {
	getVipConfig();
});

defineExpose({
	getVipConfig
});
</script>

<style scoped lang="scss">
page {
	background: #f6f8fa;
}

.content {
	.contentbox {
		position: relative;
		width: 100%;
		height: 1046rpx;
		padding: 0 24rpx;

		.contentboxitem {
			position: absolute;
			bottom: 0;
			width: 90%;
			left: 50%;
			transform: translate(-50%, 50%);
			padding: 38rpx 0 26rpx 0;
			background: rgba(255, 255, 255, 0.98);
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.contentboxitemleft {
				width: 50%;
				border-right: 2rpx solid #623618;

				image {
					width: 134rpx;
					height: 134rpx;
				}

				.contentboxitemlefttextone {
					margin-top: 10rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
				}

				.contentboxitemlefttexttow {
					margin-top: 2rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}

			.contentboxitemright {
				width: 50%;
				padding: 0 34rpx;

				.contentboxitemright_item:nth-child(2) {
					margin-top: 30rpx;
				}

				.contentboxitemright_item {
					image {
						width: 96rpx;
						height: 96rpx;
					}

					.contentboxitemright_itembox {
						width: 170rpx;

						text:nth-child(1) {
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 32rpx;
							color: #333333;
						}

						text:nth-child(2) {
							margin-top: 2rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}
					}
				}
			}
		}
	}
}
</style>