Files
cashier_wx/pages/index/indexs.vue

316 lines
7.2 KiB
Vue

<template>
<view class="content">
<view class="contentbox">
<template v-if="shopExtend.length">
<image class="bg" :src="shopExtend[0].value" mode="aspectFill" v-if="!isJsonArrayString(shopExtend[0].value)"></image>
<swiper class="swiper" autoplay circular v-else>
<swiper-item class="swiper-item" v-for="item in JSON.parse(shopExtend[0].value)">
<image class="swiper-bg" :src="item"></image>
</swiper-item>
</swiper>
</template>
<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>
<u-popup :show="popupShow" :safe-area-inset-bottom="false" mode="center" @close="popupShow = false">
<view class="popup-content">
<view class="header-wrap">
<text class="t">请选择</text>
<view class="close" @click="popupShow = false">
<u-icon name="close" size="16" color="#666"></u-icon>
</view>
</view>
<view class="btn-content">
<view class="btn">
<u-button color="#E8AD7B" plain="" shape="circle" @click="beforehandOrderHandle">预点单</u-button>
</view>
<view class="btn">
<u-button color="#E8AD7B" shape="circle" @click="scanOrderHandle">扫码点单</u-button>
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script setup>
import { getMemberConfig, getRechargeConfig } from '@/common/api/index/index.js';
import { ref, reactive, defineProps, defineEmits, onMounted } from 'vue';
import { isJsonArrayString } from '@/utils/util.js';
// 定义接收的属性
const props = defineProps({
shopExtend: {
type: Array,
default: []
}
});
import { productStore } from '@/stores/user.js';
// 显示弹窗
const popupShow = ref(false);
const scanCodehandle = (i) => {
popupShow.value = true;
};
// 预点单
function beforehandOrderHandle() {
popupShow.value = false;
let shopUserInfo = uni.cache.get('shopUserInfo');
uni.cache.set('dinersNum', 1);
uni.cache.set('tableCode', shopUserInfo.id);
uni.navigateTo({
url: '/pages/product/index?type=beforehand'
});
}
// 扫码点餐
async function scanOrderHandle() {
popupShow.value = false;
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;
}
.swiper {
width: 100%;
height: 100%;
.swiper-item {
width: 100%;
height: 100%;
.swiper-bg {
width: 100%;
height: 100%;
}
}
}
.content {
.contentbox {
position: relative;
width: 100%;
height: 1046rpx;
.bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.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;
}
}
}
}
}
}
}
.popup-content {
width: 90vw;
background-color: #fff;
border-radius: 8px;
.header-wrap {
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #ececec;
padding: 0 28upx;
.t {
font-size: 32upx;
color: #333;
}
.close {
$size: 60upx;
width: $size;
height: $size;
display: flex;
align-items: center;
justify-content: center;
}
}
.btn-content {
height: 86px;
display: flex;
align-items: center;
justify-content: center;
gap: 60upx;
.btn {
width: 248upx;
}
}
}
</style>