Commit b70012fa authored by wxf's avatar wxf

feat: 飞鹤预约分包代码

parent bf26bf60
import requestModule from './reservation-request.js'
const {
api
} = requestModule
/**
* 获取手机号
* @returns
* @param {string} memberId 用户memberId
* @param {string} code 微信code
*/
export const decodePhone = (data) => api.post('/decode_phone.php', data)
/**
* 获取日期
* @returns
* @param {string} memberId 用户memberId
*/
export const getDateConfig = (data) => api.post('/get_day.php', data)
/**
* 获取时间
* @returns
* @param {string} memberId 用户memberId
* @param {string} day 日期
*/
export const getTimeConfig = (data) => api.post('/get_time.php', data)
/**
* 获取工厂
* @returns
* @param {string} memberId 用户memberId
*/
export const getGround = (data) => api.post('/get_ground.php', data)
/**
* 预约列表
* @returns
* @param {string} memberId 用户memberId
*/
export const reservationList = (data) => api.post('/reservation_list.php', data)
/**
* 预约详情
* @returns
* @param {string} id 预约id
*/
export const reservationDetail = (data) =>
api.post('/reservation_detail.php', data)
/**
* 取消预约
* @returns
* @param {string} id 预约id
*/
export const reservationCancel = (data) =>
api.post('/reservation_cancel.php', data)
/**
* 发起预约
* @returns
* @param {string} data.memberId 用户memberId
* @param {string} data.reservation_date 预约日期
* @param {string} data.reservation_time 预约时间
* @param {string} data.realname 预约人姓名
* @param {string} data.telephone 预约人手机号
* @param {string} data.visitor_number 访客人数
* @param {string} data.type 访客类型
*/
export const reservation = (data) => api.post('/reservation.php', data)
\ No newline at end of file
import {
HTTP_STATUS
} from '../config.js'
// request.js
// 通常可以吧 baseUrl 单独放在一个 js 文件了
// const baseUrl = "http://172.16.224.178:7777/pmall";
// const baseUrl = "https://momclub-uat.feihe.com/pmall";//测试环境
const baseUrl = 'https://essence.jzvcode.com/feihe' //生产环境
const request = (options = {}) => {
// 对options.data 进行一些处理
// 如果没有传入 memberId ,则从本地存储中获取
console.log(options.data, 'options.data')
if (!options.data?.memberId) {
options.data.memberId = uni.getStorageSync('memberId') || ''
}
return new Promise((resolve, reject) => {
uni
.request({
url: baseUrl + options.url || '',
method: options.type || 'GET',
data: options.data || {},
header: {
...options.header,
},
})
.then((data) => {
console.log('request data ===>', data)
if (data.statusCode !== HTTP_STATUS.SUCCESS) {
uni.showToast({
title: data.errMsg,
icon: 'none',
})
reject(data)
} else {
resolve(data.data)
}
// else if (!data.data?.ok) {
// uni.showToast({
// title: data.data?.message,
// icon: 'none',
// })
// reject(data.data)
// }
})
.catch((error) => {
reject(error)
})
})
}
const get = (url, data, options = {}) => {
options.type = 'GET'
options.data = data
options.url = url
return request(options)
}
const post = (url, data, options = {}) => {
options.type = 'POST'
options.data = data
options.url = url
return request(options)
}
export default {
request,
api: {
get,
post,
},
}
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon-下拉</title>
<g id="UI-绿" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="1-首页-1" transform="translate(-185, -827)" stroke="#EEEEEE" stroke-width="2">
<g id="icon-下拉" transform="translate(193, 839)">
<polyline id="路径备份" transform="translate(8, 4) scale(1, -1) translate(-8, -4)" points="0 8 8 0 16 8"></polyline>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="19px" height="19px" viewBox="0 0 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon-右</title>
<g id="UI-绿" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="2-预约信息" transform="translate(-118, -180)" stroke="#DAB97B" stroke-width="1.58333333">
<g id="icon-右" transform="translate(127.5, 189.5) rotate(-90) translate(-127.5, -189.5)translate(122.75, 187.125)">
<polyline id="路径备份" transform="translate(4.75, 2.375) scale(1, -1) translate(-4.75, -2.375)" points="0 4.75 4.75 0 9.5 4.75"></polyline>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="19px" height="19px" viewBox="0 0 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon-右</title>
<g id="UI-绿" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="2-预约信息" transform="translate(-118, -180)" stroke="#ffffff" stroke-width="1.58333333">
<g id="icon-右" transform="translate(127.5, 189.5) rotate(-90) translate(-127.5, -189.5)translate(122.75, 187.125)">
<polyline id="路径备份" transform="translate(4.75, 2.375) scale(1, -1) translate(-4.75, -2.375)" points="0 4.75 4.75 0 9.5 4.75"></polyline>
</g>
</g>
</g>
</svg>
\ No newline at end of file
This diff is collapsed.
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"navigationStyle": "custom"
}
},
{
"path": "pages/person/person",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
},
{
"path": "pages/webview/webview",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
},
{
"path": "pages/search/search",
"style": {
"navigationStyle": "custom",
"usingComponents": {
"van-tab": "../../wxcomponents/vant/tab/index",
"van-tabs": "../../wxcomponents/vant/tabs/index"
}
}
},
{
"path" : "pages/product/product",
"style" :
{
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black"
}
},
{
"path": "pages/library/ContentLibrary",
"style": {
"navigationStyle": "custom"
}
},
{
"path" : "pages/goodsDetail/goodsDetail",
"style" :
{
"navigationBarTitleText" : ""
}
},
{
"path" : "pages/rightsDetail/rightsDetail",
"style" :
{
"navigationBarTitleText" : ""
}
},
{
"path" : "pages/naming/naming",
"style" :
{
"navigationBarTitleText" : "宝宝取名",
"enablePullDownRefresh" : false,
"navigationStyle": "custom"
}
},
{
"path" : "pages/naming/namingResult",
"style" :
{
"navigationBarTitleText" : "AI-宝宝取名",
"enablePullDownRefresh" : false,
"navigationStyle": "custom"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"navigationStyle": "default"
},
"uniIdRouter": {}
{
"pages": [{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"navigationStyle": "custom"
}
},
{
"path": "pages/person/person",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
},
{
"path": "pages/webview/webview",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
},
{
"path": "pages/search/search",
"style": {
"navigationStyle": "custom",
"usingComponents": {
"van-tab": "../../wxcomponents/vant/tab/index",
"van-tabs": "../../wxcomponents/vant/tabs/index"
}
}
},
{
"path": "pages/product/product",
"style": {
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black"
}
},
{
"path": "pages/library/ContentLibrary",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/goodsDetail/goodsDetail",
"style": {
"navigationBarTitleText": ""
}
},
{
"path": "pages/rightsDetail/rightsDetail",
"style": {
"navigationBarTitleText": ""
}
},
{
"path": "pages/naming/naming",
"style": {
"navigationBarTitleText": "宝宝取名",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
"path": "pages/naming/namingResult",
"style": {
"navigationBarTitleText": "AI-宝宝取名",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}
],
"subPackages": [{
"root": "reservation",
"pages": [{
"path": "home/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "subscribe/index",
"style": {
"navigationBarTitleText": "预约"
}
},
{
"path": "record/index",
"style": {
"navigationBarTitleText": "预约记录"
}
},
{
"path": "record/detail",
"style": {
"navigationBarTitleText": "预约详情"
}
},
{
"path": "status/index",
"style": {
"navigationBarTitleText": "预约状态"
}
}
]
}],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"navigationStyle": "default"
},
"uniIdRouter": {}
}
\ No newline at end of file
<template>
<view class="custom-picker" v-if="show">
<!-- 遮罩层 -->
<view class="mask" @click="close"></view>
<!-- 内容 -->
<view class="custom-picker-content">
<view class="custom-picker-header">
<view>{{ title }}</view>
<view class="close"> </view>
</view>
<picker-view
:indicator-style="indicatorStyle"
:indicator-class="indicatorClass"
:value="value"
:mask-style="maskStyle"
:immediate-change="true"
@change="bindChange"
class="picker-view"
>
<picker-view-column>
<view
class="item"
v-for="(item, index) in range"
:class="{ active: activeIndex == index }"
:key="index"
>{{ item.name }}</view
>
</picker-view-column>
</picker-view>
<view class="custom-picker-footer">
<fh-button>确认选择</fh-button>
</view>
</view>
</view>
</template>
<script>
import fhButton from './fh-button.vue'
export default {
name: '',
components: {
fhButton,
},
props: {
// 是否显示 接收v-model
show: {
type: Boolean,
default: false,
},
// 标题
title: {
type: String,
default: '请选择',
},
// 范围
range: {
type: Array,
default: () => [],
},
// 范围的key
rangeKey: {
type: String,
default: 'id',
},
},
data() {
return {
indicatorClass: 'indicatorClass',
indicatorStyle: `height: 50px;`,
activeIndex: 0,
maskStyle: `background: transparent !important;`,
value: [0],
}
},
mounted() {
this.show = this.show
},
methods: {
bindChange(e) {
console.log(e)
this.value = e.detail.value
this.activeIndex = e.detail.value[0]
},
close() {
this.$emit('close')
},
},
}
</script>
<style lang="scss" scoped>
::v-deep {
.indicatorClass:before,
.indicatorClass:after {
color: transparent !important;
border-color: transparent !important;
}
}
.custom-picker {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: 1000;
}
&-content {
width: 100%;
padding: 0 52rpx;
box-sizing: border-box;
height: 850rpx;
overflow: hidden;
background: #ffffff;
box-shadow: 0rpx 19rpx 37rpx 0rpx rgba(0, 64, 152, 0.1);
border-radius: 34rpx 34rpx 0rpx 0rpx;
position: absolute;
bottom: 0;
left: 0;
z-index: 1001;
display: flex;
flex-direction: column;
}
&-header {
width: 100%;
padding-top: 42rpx;
text-align: center;
position: relative;
padding-bottom: 20rpx;
.close {
position: absolute;
right: 0;
top: 0;
width: 100rpx;
}
}
&-footer {
width: 100%;
padding: 20rpx 0rpx 52rpx;
box-sizing: border-box;
.confirm {
width: 100%;
height: 97rpx;
background: #dab97b;
color: #fff;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 36rpx;
border-radius: 50rpx;
}
}
.picker-view {
overflow: hidden;
flex: 1;
.item {
height: 50px !important;
text-align: center;
font-size: 30rpx;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s linear;
}
.active {
color: #d3a358;
font-weight: bold;
font-size: 40rpx;
}
}
}
</style>
<template>
<view class="fh-button" :class="type">
<slot></slot>
</view>
</template>
<script setup>
const props = defineProps({
type: {
type: String,
default: 'primary',
},
})
</script>
<style lang="less" scoped>
.fh-button {
width: 100%;
height: 97rpx;
background-color: #fff;
border-radius: 50rpx;
font-size: 34rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
border: 2rpx solid transparent;
}
.primary {
background-color: #dab97b;
border: 2rpx solid #dab97b;
color: #fff;
}
.plain {
background-color: #fff;
color: #dab97b;
border: 2rpx solid #dab97b;
}
</style>
export const baseUrl = 'https://essence.jzvcode.com/feihe'
// 声明字体
@font-face {
font-family: 'fz';
src: url('https://essence.jzvcode.com/feihe/images/fz.ttf') format('truetype');
}
@font-face {
font-family: 'fz-bold';
src: url('https://essence.jzvcode.com/feihe/images/fz-bold.ttf')
format('truetype');
}
.blur-bg {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.3) 100%
);
box-shadow: 0rpx 19rpx 37rpx 0rpx rgba(0, 0, 0, 0.3);
border-radius: 26rpx;
border: 2rpx solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(15px);
}
.fz {
font-family: 'fz';
}
.fz-bold {
font-family: 'fz-bold';
}
.home {
width: 100%;
height: 100vh;
.scroll {
width: 100%;
height: 100%;
}
.scroll-item {
width: 100%;
flex-shrink: 0;
height: 100vh;
scroll-snap-align: start;
scroll-snap-stop: always;
}
}
.home-page {
width: 100%;
height: 100%;
background-size: 100% 100%;
background-position: top;
overflow: hidden;
.logo {
margin: 37rpx auto;
text-align: center;
image {
width: 320rpx;
height: 37rpx;
}
}
}
.footer {
position: fixed;
bottom: 130rpx;
width: 100%;
padding: 30rpx;
box-sizing: border-box;
left: 0;
display: flex;
justify-content: space-around;
font-size: 34rpx;
font-family: 'fz';
color: #fff;
.footer-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 200rpx;
height: 200rpx;
overflow: hidden;
image {
width: 54rpx;
height: 54rpx;
}
}
}
.footer-down {
position: fixed;
bottom: 30rpx;
left: 0;
width: 100%;
height: 80rpx;
text-align: center;
image {
width: 60rpx;
height: 60rpx;
}
}
.title {
font-size: 86rpx;
margin-top: 153rpx;
font-family: 'fz-bold';
}
.sub-title {
font-size: 37rpx;
margin-top: 44rpx;
font-family: 'fz-bold';
}
.desc {
font-size: 22rpx;
margin-top: 24rpx;
line-height: 37rpx;
text-align: left;
font-family: 'fz';
}
.page1,
.page2,
.page3,
.page4 {
position: relative;
color: #fff;
padding: 0 37rpx;
box-sizing: border-box;
text-align: center;
}
.page1 {
padding: 0 108rpx;
}
.page2 {
padding: 0;
.title {
margin-top: 74rpx;
}
.desc {
text-align: center;
width: 400rpx;
margin: 40rpx auto;
}
.swiper {
width: 100%;
height: 450rpx;
.swiper-item {
height: 450rpx;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
.swiper-item-box {
width: 490rpx;
height: 365rpx;
overflow: hidden;
padding: 18rpx;
box-sizing: border-box;
background: transparent;
}
.swiper-item-active {
width: 597rpx;
height: 448rpx;
}
image {
width: 100%;
height: 100%;
transition: all 0.6s;
}
}
}
}
.page4 {
.title {
margin-top: 74rpx;
}
.card {
margin-top: 40rpx;
padding: 39rpx 50rpx 39rpx 75rpx;
box-sizing: border-box;
font-size: 21rpx;
font-family: 'fz';
color: #fff;
text-align: left;
.card-item {
margin-bottom: 20rpx;
position: relative;
line-height: 30rpx;
}
.card-item::before {
content: '';
margin-right: 10rpx;
position: absolute;
width: 7rpx;
height: 7rpx;
background: #8bd278;
border-radius: 50%;
left: -20rpx;
top: 10rpx;
}
.card-item:last-child {
margin-bottom: 0;
}
}
}
<template>
<view class="home">
<swiper class="scroll" vertical :current="current" @change="handleScrollChange">
<swiper-item>
<home-page1 class="scroll-item"></home-page1>
</swiper-item>
<swiper-item>
<home-page2 class="scroll-item"></home-page2>
</swiper-item>
<swiper-item>
<home-page3 class="scroll-item"></home-page3>
</swiper-item>
<swiper-item>
<home-page4 class="scroll-item"></home-page4>
</swiper-item>
</swiper>
<!-- 底部导航 -->
<view class="footer">
<view class="footer-item blur-bg" @click="goToPage()">
<view>
<image style="width: 59rpx; height: 59rpx" src="@/assets/reservation-images/twitter.png" mode="widthFix">
</image>
</view>
<view>了解飞鹤</view>
</view>
<view class="footer-item blur-bg" @click="goToPage('/reservation/subscribe/index')">
<view>
<image src="@/assets/reservation-images/briefcase.png" mode="widthFix"></image>
</view>
<view>现在预约</view>
</view>
<view class="footer-item blur-bg" @click="goToPage('/reservation/record/index')">
<view>
<image src="@/assets/reservation-images/calendar.png" mode="widthFix"></image>
</view>
<view>预约记录</view>
</view>
</view>
<!-- 底部箭头 -->
<view class="footer-down" @click="changeCurrent" v-if="current < 3">
<image src="@/assets/reservation-images/icon-down.svg" mode="widthFix"></image>
</view>
</view>
</template>
<script setup>
import {
useUserStore
} from "@/stores/user.js";
import homePage1 from './page1.vue'
import homePage2 from './page2.vue'
import homePage3 from './page3.vue'
import homePage4 from './page4.vue'
import {
ref,
onMounted
} from 'vue'
const current = ref(0) // 当前页码
const userStore = useUserStore();
onMounted(() => {
let cuk = uni.getStorageSync('cuk')
let memberId = uni.getStorageSync('memberId')
// 如果本地没有缓存登录信息,则需要登录
if (!cuk || !memberId) {
userStore.wxAutoLogin();
}
})
const changeCurrent = () => {
if (current.value >= 3) {
current.value = 0
} else {
current.value++
}
}
const handleScrollChange = (e) => {
console.log(e)
current.value = e.detail.current
}
const goToPage = (path) => {
if (!path) return
uni.navigateTo({
url: path,
})
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>
\ No newline at end of file
<template>
<view
class="home-page page1"
:style="{ backgroundImage: `url(${baseUrl}/images/bg-1.png)` }"
>
<view class="logo">
<image src="@/assets/reservation-images/logo.svg" mode="widthFix"></image>
</view>
<!-- 内容 -->
<view class="title"> 探秘之旅 </view>
<view class="sub-title"> 探秘中国飞鹤世界级智能工厂 </view>
<view class="desc">
奇趣探秘、知识科普、多样互动,了解WCM世界级工厂管理体系见证一滴牛奶华丽变身为奶粉的过程,探索探索中国飞鹤对高品质奶粉不懈追求背后的故事。
</view>
</view>
</template>
<script setup>
import { baseUrl } from '@/reservation/config'
defineOptions({
name: 'page1',
})
</script>
<style lang="less" scoped>
@import './index.less';
</style>
<template>
<view
class="home-page page2"
:style="{ backgroundImage: `url(${baseUrl}/images/bg-2.png)` }"
>
<view class="logo">
<image src="@/assets/reservation-images/logo.svg" mode="widthFix"></image>
</view>
<!-- 内容 -->
<view class="title"> 环节介绍 </view>
<view class="desc">
见证一滴牛奶华丽变身为奶粉的全过程, 了解高品质产品背后的科学知识
</view>
<!-- 轮播图 -->
<swiper
class="swiper"
:circular="true"
previous-margin="90rpx"
next-margin="90rpx"
:current="current"
@change="handleChange"
>
<block v-for="(item, index) in list" :key="index">
<swiper-item>
<view class="swiper-item">
<view
class="swiper-item-box blur-bg"
:class="current === index ? 'swiper-item-active' : ''"
>
<image class="" :src="item.image" mode="scaleToFill" />
</view>
</view>
</swiper-item>
</block>
</swiper>
<!-- -->
<view class="sub-title"> {{ list[current].title }} </view>
<view class="desc" style="width: 450rpx">
{{ list[current].desc }}
</view>
</view>
</template>
<script setup>
import { ref } from 'vue'
// 导入图片
import { baseUrl } from '@/reservation/config'
import s1 from '@/assets/reservation-images/s-1.png'
import s2 from '@/assets/reservation-images/s-2.png'
defineOptions({
name: 'page2',
})
const current = ref(0)
const list = ref([
{
image: s1,
title: '寓教于乐的互动体验',
desc: '显微镇观察实验、冰淇淋DIY、手工奶片DIY、 牛奶「烟花」等',
},
{
image: s2,
title: '冰淇淋DIY',
desc: '寓教于乐的互动体验,冰淇淋DIY、手工奶片DIY、 牛奶「烟花」',
},
{
image: s1,
title: '手工奶片DIY、 牛奶',
desc: '冰淇淋DIY',
},
])
const handleChange = (e) => {
current.value = e.detail.current
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>
<template>
<view class="home-page page2" :style="{ backgroundImage: `url(${baseUrl}/images/bg-3.png)` }">
<view class="logo">
<image src="@/assets/reservation-images/logo.svg" mode="widthFix"></image>
</view>
<!-- 内容 -->
<view class="title"> 环节介绍 </view>
<view class="desc">
见证一滴牛奶华丽变身为奶粉的全过程, 了解高品质产品背后的科学知识
</view>
<!-- 轮播图 -->
<swiper class="swiper" :circular="true" previous-margin="90rpx" next-margin="90rpx" :current="current"
@change="handleChange">
<block v-for="(item, index) in list" :key="index">
<swiper-item>
<view class="swiper-item">
<view class="swiper-item-box blur-bg" :class="current === index ? 'swiper-item-active' : ''">
<image class="" :src="item.image" mode="scaleToFill" />
</view>
</view>
</swiper-item>
</block>
</swiper>
<!-- -->
<view class="sub-title"> {{ list[current].title }} </view>
<view class="desc" style="width: 450rpx">
{{ list[current].desc }}
</view>
</view>
</template>
<script setup>
import {
baseUrl
} from '@/reservation/config'
import {
ref
} from 'vue'
import s1 from '@/assets/reservation-images/s-1.png'
import s2 from '@/assets/reservation-images/s-2.png'
defineOptions({
name: 'page3',
})
const current = ref(0)
const list = ref([{
image: s1,
title: '寓教于乐的互动体验',
desc: '显微镇观察实验、冰淇淋DIY、手工奶片DIY、 牛奶「烟花」等',
},
{
image: s2,
title: '冰淇淋DIY',
desc: '寓教于乐的互动体验,冰淇淋DIY、手工奶片DIY、 牛奶「烟花」',
},
{
image: s1,
title: '手工奶片DIY、 牛奶',
desc: '冰淇淋DIY',
},
])
const handleChange = (e) => {
current.value = e.detail.current
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>
\ No newline at end of file
<template>
<view
class="home-page page4"
:style="{ backgroundImage: `url(${baseUrl}/images/bg-4.png)` }"
>
<view class="logo">
<image src="@/assets/reservation-images/logo.svg" mode="widthFix"></image>
</view>
<!-- 内容 -->
<view class="title"> 注意事项 </view>
<view class="card blur-bg">
<view class="card-item" v-for="(item, index) in list" :key="index">
{{ item }}
</view>
</view>
</view>
</template>
<script setup>
import { baseUrl } from '@/reservation/config'
import { ref } from 'vue'
defineOptions({
name: 'page4',
})
const list = ref([
'若有特殊参观要求,如参观路线、时长,讲解内容等,请联系工厂工作人员。',
'提交预约信息后,工作人员审核后生效。请抵达工厂时向正作人员出示入场二维码。',
'每日可提交次日预约信息,如遇时段已满或闭馆情况,请更换预约时间。',
'所有参观人员须实名预约,实名入场参观。',
'除特殊工作犬外,不得携带任何宠物。',
'馆内禁止吸烟,请自觉维护环境卫生,勿丢弃杂物。',
'酗酒者、衣冠不整者以及无行为能力或限制行为能力者、无监护人陪伴的,谢绝入馆。',
'管制械具、打火机等易燃易爆品,饮料、食品及宠物等禁止带入场馆,请提前处理。',
'参观前请路将随身包裹奇存,贵重物品自行保管。',
'参观时清自觉遵守参观秩序,不要大声喧哗,以免影响其他观众。请将手机设置为静音。',
])
</script>
<style lang="less" scoped>
@import './index.less';
</style>
<template>
<view class="record record-detail">
<view class="record-bg" :style="{ backgroundImage: `url(${baseUrl}/images/bg-6.png)` }"></view>
<view class="record-content">
<view class="tips">请凭下方预约二维码现场签到进场</view>
<view class="card detail">
<view class="title">{{ detail.title }}</view>
<view class="date">
{{ detail.reservation_date }} {{ detail.week }}{{ detail.reservation_start_time }} -
{{ detail.reservation_end_time }}
</view>
<view class="line"></view>
<view class="info">
预约人:{{ detail.realname }}
</view>
<view class="info">
手机:{{ detail.telephone }}
</view>
<view class="info">
访客人数:{{ detail.visitor_number }}
</view>
<view class="qrcode">
<image :src="detail.qrcode" mode="widthFix" />
</view>
</view>
<view class="buttons" @click="cancelReservation">
<fh-button type="plain" @click="cancelReservation">
取消预约
</fh-button>
</view>
</view>
</view>
</template>
<script setup>
import {
baseUrl
} from '@/reservation/config'
import {
onLoad
} from "@dcloudio/uni-app";
import fhButton from "../components/fh-button.vue";
import {
ref
} from 'vue'
import {
reservationDetail,
reservationCancel
} from '@/api/reservation'
defineOptions({
name: 'record-detail',
})
// 获取参数
const id = ref(0)
const detail = ref({
title: '', // 预约标题
reservation_date: '', // 预约日期
reservation_start_time: '', // 预约开始时间
reservation_end_time: '', // 预约结束时间
week: '', // 星期
qrcode: '', // 预约二维码
realname: '', // 预约人姓名
telephone: '', // 预约人手机号
visitor_number: '', // 访客人数
})
onLoad((options) => {
id.value = options.id
console.log(id.value)
options.id && getDetail()
})
const getDetail = () => {
reservationDetail({
id: id.value,
}).then((res) => {
detail.value = res.data
// 翻译星期
detail.value.week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][Number(detail.value.week)]
})
}
const cancelReservation = () => {
console.log('取消预约')
reservationCancel({
id: id.value,
}).then((res) => {
console.log(res)
if (res.code == 0) {
uni.showToast({
title: '取消成功',
icon: 'success',
})
uni.navigateBack()
} else {
uni.showToast({
title: res.msg,
icon: 'none',
})
}
})
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>
\ No newline at end of file
// 声明字体
@font-face {
font-family: 'fz';
src: url('https://essence.jzvcode.com/feihe/images/fz.ttf') format('truetype');
}
@font-face {
font-family: 'fz-bold';
src: url('https://essence.jzvcode.com/feihe/images/fz-bold.ttf')
format('truetype');
}
.record {
background: #eee;
width: 100%;
height: 100vh;
overflow: hidden;
&-bg {
width: 100%;
height: 600rpx;
background-size: 100% auto;
background-repeat: no-repeat;
background-position: top center;
}
&-content {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
padding: 52rpx;
box-sizing: border-box;
padding-top: 120rpx;
.tips {
font-size: 26rpx;
color: #fff;
font-family: 'fz';
margin-left: 55rpx;
margin-bottom: 28rpx;
text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.56);
}
.buttons {
position: absolute;
bottom: 100rpx;
left: 0;
width: 100%;
padding: 0 52rpx;
box-sizing: border-box;
}
.card {
min-height: 40vh;
max-height: 70vh;
overflow-y: auto;
background: #fff;
box-shadow: 0rpx 19rpx 37rpx 0rpx rgba(0, 0, 0, 0.04);
border-radius: 26rpx;
padding: 37rpx 42rpx;
box-sizing: border-box;
&-tab {
display: flex;
justify-content: center;
align-items: center;
background: #ffffff;
border-radius: 37rpx;
border: 2rpx solid #be8e38;
padding: 8rpx;
box-sizing: border-box;
width: 388rpx;
height: 74rpx;
margin: 0 auto;
.card-tab-item {
width: 188rpx;
height: 59rpx;
border-radius: 33rpx;
color: #be8e38;
display: flex;
justify-content: center;
align-items: center;
font-size: 26rpx;
transition: all 0.3s ease;
font-family: 'fz';
}
.active {
background: #dab97b;
color: #fff;
font-size: 28rpx;
font-family: 'fz-bold';
}
}
&-list {
width: 100%;
height: 100%;
.card-list-item {
height: 180rpx;
border-bottom: 2rpx solid #efefef;
display: flex;
align-items: center;
&-icon {
width: 68rpx;
height: 80rpx;
}
&-right {
margin-left: 44rpx;
.record-name {
font-size: 34rpx;
color: #1d1e25;
font-family: 'fz-bold';
margin-bottom: 8rpx;
}
.record-time {
font-size: 26rpx;
color: #a0a0a0;
font-family: 'fz';
display: flex;
align-items: center;
font-size: 0rpx;
}
}
}
.card-list-item:last-child {
border-bottom: none;
}
}
}
}
.detail {
padding-top: 70rpx;
.title {
font-size: 37rpx;
color: #d3a358;
font-family: 'fz-bold';
margin-bottom: 28rpx;
}
.line {
margin: 28rpx 0;
height: 2rpx;
background: #efefef;
}
.info {
font-size: 30rpx;
color: #1d1e25;
font-family: 'fz';
line-height: 35rpx;
margin-bottom: 12rpx;
}
.qrcode {
width: 425rpx;
height: 425rpx;
margin: 35rpx auto;
image {
width: 100%;
height: 100%;
}
}
}
}
<template>
<view class="record">
<view class="record-bg" :style="{ backgroundImage: `url(${baseUrl}/images/bg-6.png)` }"></view>
<view class="record-content">
<view class="card">
<view class="card-tab">
<view class="card-tab-item" :class="{ active: type == 1 }" @click="
type = 1;
getList()
">
<text>未出行</text>
</view>
<view class="card-tab-item" :class="{ active: type == 2 }" @click="
type = 2;
getList()
">
<text>已完成</text>
</view>
</view>
<view class="card-list">
<view class="card-list-item" v-for="item in list" :key="item.id" @click="goToDetail(item.id)">
<image class="card-list-item-icon" src="@/assets/reservation-images/icon-list.png" mode="widthFix" />
<view class="card-list-item-right">
<view class="record-name">{{ item.title }}</view>
<view class="record-time">
<image style="width: 30rpx; height: 30rpx; margin-right: 12rpx"
src="@/assets/reservation-images/calendar-gray.png" mode="widthFix" />
<text style="font-size: 26rpx">{{ item.date }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import {
baseUrl
} from '@/reservation/config'
import {
ref,
onMounted
} from 'vue'
import {
reservationList
} from '@/api/reservation'
defineOptions({
name: 'record',
})
const list = ref([])
const type = ref(1) // 1: 未出行 2: 已完成
onMounted(() => {
getList()
})
const getList = () => {
reservationList({
type: type.value,
}).then((res) => {
list.value = res.data
})
}
const goToDetail = (id) => {
uni.navigateTo({
url: '/reservation/record/detail?id=' + id,
})
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>
\ No newline at end of file
// 声明字体
@font-face {
font-family: 'fz';
src: url('https://essence.jzvcode.com/feihe/images/fz.ttf') format('truetype');
}
@font-face {
font-family: 'fz-bold';
src: url('https://essence.jzvcode.com/feihe/images/fz-bold.ttf')
format('truetype');
}
.record {
background: #eee;
width: 100%;
height: 100vh;
overflow: hidden;
&-bg {
width: 100%;
height: 600rpx;
background-size: 100% auto;
background-repeat: no-repeat;
background-position: top center;
}
&-content {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
padding: 52rpx;
box-sizing: border-box;
.card {
margin-top: 120rpx;
min-height: 40vh;
max-height: 60vh;
overflow-y: auto;
background: #fff;
box-shadow: 0rpx 19rpx 37rpx 0rpx rgba(0, 0, 0, 0.04);
border-radius: 26rpx;
padding: 37rpx 86rpx;
box-sizing: border-box;
font-family: 'fz';
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.title {
font-size: 52rpx;
color: #d3a358;
line-height: 67rpx;
text-align: left;
}
.image {
width: 370rpx;
height: 370rpx;
margin: 0 auto;
image {
width: 100%;
height: 100%;
}
}
.desc {
font-size: 30rpx;
color: #000000;
line-height: 45rpx;
text-align: left;
font-style: normal;
margin-top: 20rpx;
}
}
}
.buttons {
position: absolute;
left: 0;
width: 100%;
padding: 0 52rpx;
box-sizing: border-box;
bottom: 100rpx;
}
}
<template>
<view class="record">
<view
class="record-bg"
:style="{ backgroundImage: `url(${baseUrl}/images/bg-6.png)` }"
></view>
<view class="record-content">
<view class="card">
<view class="title">预约成功!</view>
<view class="image">
<image
src="@/assets/reservation-images/success.png"
mode="widthFix"
/>
</view>
<view class="desc"
>您的预约已完成,届时请凭预约详情内二维码现场签到进场。</view
>
</view>
<view class="buttons">
<view style="margin-bottom: 37rpx" @click.stop="handleDetail">
<fh-button>查看预约详情</fh-button>
</view>
<view @click.stop="handleHome">
<fh-button>返回首页</fh-button>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { baseUrl } from '@/reservation/config'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import fhButton from '../components/fh-button.vue'
defineOptions({
name: 'record',
})
const id = ref(0)
onLoad((options) => {
id.value = options.id
console.log(id.value)
})
const handleDetail = () => {
uni.redirectTo({
url: '/reservation/record/detail?id=' + id.value,
})
}
const handleHome = () => {
uni.reLaunch({ url: '/reservation/home/index' })
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>
<template>
<view class="date-panel"> </view>
</template>
<script setup>
defineOptions({
name: 'datePanel',
})
</script>
<style lang="less" scoped>
.date-panel {
width: 100%;
height: 100%;
}
</style>
// 声明字体
@font-face {
font-family: 'fz';
src: url('https://essence.jzvcode.com/feihe/images/fz.ttf') format('truetype');
}
@font-face {
font-family: 'fz-bold';
src: url('https://essence.jzvcode.com/feihe/images/fz-bold.ttf')
format('truetype');
}
.subscribe {
width: 100%;
height: auto;
background-size: cover;
background-repeat: no-repeat;
background-position: top;
background-color: #fff;
box-sizing: border-box;
padding: 30rpx;
padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
.record {
padding-left: 40rpx;
color: #fff;
font-size: 26rpx;
display: flex;
align-items: center;
font-family: 'fz-bold';
margin-bottom: 28rpx;
}
.card {
padding: 30rpx 60rpx 60rpx;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.2);
box-shadow: 0rpx 19rpx 37rpx 0rpx rgba(0, 0, 0, 0.3);
border-radius: 26rpx;
border: 2rpx solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(15px);
color: #fff;
position: relative;
margin-bottom: 37rpx;
.card-title {
font-size: 34rpx;
font-family: 'fz-bold';
margin-bottom: 24rpx;
}
.card-image {
width: 100%;
height: 410rpx;
border-radius: 26rpx;
overflow: hidden;
border: 2rpx solid rgba(255, 255, 255, 0.2);
image {
width: 100%;
height: 100%;
}
}
.card-swiper {
width: 100%;
height: 410rpx;
position: relative;
.swiper-item {
width: 100%;
}
}
.name {
font-size: 37rpx;
font-family: 'fz';
text-align: center;
margin-top: 39rpx;
margin-bottom: 29rpx;
position: relative;
line-height: 45rpx;
.swiper-left,
.swiper-right {
position: absolute;
top: 0rpx;
width: 44rpx;
height: 44rpx;
image {
width: 100%;
height: 100%;
}
}
.swiper-left {
left: 0;
transform: rotate(180deg);
}
.swiper-right {
right: 0;
}
}
.desc {
font-size: 22rpx;
font-family: 'fz';
}
.line {
width: 100%;
height: 2rpx;
background: rgba(255, 255, 255, 0.2);
margin: 50rpx 0;
}
}
}
.phone-code {
display: flex;
align-items: center;
justify-content: space-between;
.phone-code-btn {
width: 270rpx;
height: 60rpx;
background: #dab97b;
border-radius: 30rpx;
font-size: 28rpx;
color: #ffffff;
line-height: 34rpx;
text-align: center;
font-style: normal;
font-family: 'fz-bold';
line-height: 60rpx;
margin-left: 26rpx;
}
}
.form-item {
padding-bottom: 10rpx;
width: 100%;
border-bottom: 2rpx solid rgba(255, 255, 255, 0.2);
margin-bottom: 50rpx;
box-sizing: border-box;
padding-left: 12rpx;
.form-item__label {
font-size: 34rpx;
font-family: 'fz-bold';
color: #fff;
margin-bottom: 30rpx;
}
.form-item__value {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
font-size: 28rpx;
.area {
display: flex;
align-items: center;
width: 130rpx;
image {
width: 44rpx;
height: 44rpx;
transform: rotate(90deg);
}
}
.area-line {
width: 2rpx;
height: 30rpx;
background: rgba(255, 255, 255, 0.2);
margin-right: 22rpx;
}
input {
flex: 1;
font-size: 28rpx;
font-weight: 400;
font-family: 'fz';
}
.form-item__value-text {
font-family: 'fz';
flex: 1;
color: #fff;
&-placeholder {
color: rgba(255, 255, 255, 0.5);
}
}
image {
width: 44rpx;
height: 44rpx;
transform: rotate(90deg);
}
}
}
.popup-box {
background: #fff;
width: 100%;
padding: 44rpx 37rpx;
box-sizing: border-box;
box-shadow: 0rpx 19rpx 37rpx 0rpx rgba(0, 64, 152, 0.1);
border-radius: 34rpx 34rpx 0rpx 0rpx;
display: flex;
flex-direction: column;
font-family: 'fz';
padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx);
.popup-header {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-sizing: border-box;
margin-bottom: 40rpx;
.close {
position: absolute;
right: 40rpx;
top: 50;
width: 44rpx;
height: 44rpx;
image {
width: 40rpx;
height: 40rpx;
}
}
}
.popup-content {
flex: 1;
overflow-y: auto;
margin-bottom: 40rpx;
.date-line {
width: 100%;
height: 2rpx;
background: #efefef;
margin: 10rpx 0 30rpx;
}
.date-card {
display: flex;
flex-wrap: wrap;
.date-item {
width: 150rpx;
height: 150rpx;
border: 2rpx solid #dab97b;
border-radius: 22rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #1d1e25;
line-height: 32rpx;
margin-right: 18rpx;
margin-bottom: 18rpx;
&-week {
margin-bottom: 22rpx;
}
&-active {
background: #dab97b;
color: #fff;
}
&-disabled {
color: #ccc;
border-color: #ccc;
}
}
.date-item:nth-child(4n) {
margin-right: 0;
}
}
.time-card {
display: flex;
flex-wrap: wrap;
.time-item {
width: 318rpx;
height: 97rpx;
border: 2rpx solid #dab97b;
border-radius: 22rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #1d1e25;
line-height: 32rpx;
margin-right: 18rpx;
margin-bottom: 18rpx;
&-week {
margin-bottom: 22rpx;
}
&-active {
background: #dab97b;
color: #fff;
}
&-disabled {
color: #ccc;
border-color: #ccc;
}
}
.time-item:nth-child(2n) {
margin-right: 0;
}
}
}
}
::v-deep {
.indicatorClass:before,
.indicatorClass:after {
color: transparent !important;
border-color: transparent !important;
}
}
.picker-view {
overflow: hidden;
height: 500rpx;
.item {
height: 50px !important;
text-align: center;
font-size: 30rpx;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s linear;
}
.active {
color: #d3a358;
font-weight: bold;
font-size: 40rpx;
}
}
This diff is collapsed.
import { defineStore } from "pinia";
import {
defineStore
} from "pinia";
import {
autoLoginByCode,
fetchUserInfo,
......@@ -8,8 +10,12 @@ import {
fetchBabyInfoById,
updateBabyInfo,
} from "../api/user.js";
import { useGlobalStore } from "./global.js";
import { useHomeStore } from "./home.js";
import {
useGlobalStore
} from "./global.js";
import {
useHomeStore
} from "./home.js";
import md from "../md.js";
const globalStore = useGlobalStore();
......@@ -46,7 +52,9 @@ export const useUserStore = defineStore("userInfo", {
async changeBabySelected(babyId) {
// 更新选中状态
const { data } = await fetchBabyInfoById(babyId);
const {
data
} = await fetchBabyInfoById(babyId);
console.log("babyInfo", data);
if (data?.memberId !== "not_login") {
this.babyInfo = data;
......@@ -69,13 +77,14 @@ export const useUserStore = defineStore("userInfo", {
// console.log('wxAutoLogin', res);
if (res.errMsg === "login:ok") {
// 用户手机授权
const { data: babyExistence } = await fetchAutoPhone({
const {
data: babyExistence
} = await fetchAutoPhone({
phoneEncryptedData: data.encryptedData,
phoneIv: data.iv,
code: data.code,
codeLogin: res.code,
});
!babyExistence && onOpenRegisterFn && onOpenRegisterFn();
const homeStore = useHomeStore();
......@@ -97,9 +106,13 @@ export const useUserStore = defineStore("userInfo", {
* 获取用户信息
*/
async loadUserInfo() {
const { data } = await fetchUserInfo();
const {
data
} = await fetchUserInfo();
console.log("userInfo", data);
if (data?.memberId !== "not_login") {
// 缓存用户memberId
uni.setStorageSync('memberId', data?.memberId)
this.userInfo = data;
}
},
......@@ -110,7 +123,10 @@ export const useUserStore = defineStore("userInfo", {
if (findIndex > -1) {
this.babyNickCache[findIndex].name = name;
} else {
this.babyNickCache.push({ id, name });
this.babyNickCache.push({
id,
name
});
}
},
......@@ -118,7 +134,9 @@ export const useUserStore = defineStore("userInfo", {
* 获取宝宝信息
*/
async loadBabyInfo() {
const { data } = await fetchBabyInfo();
const {
data
} = await fetchBabyInfo();
console.log("babyInfo", data);
if (data?.memberId !== "not_login") {
this.babyInfo = data;
......@@ -143,7 +161,9 @@ export const useUserStore = defineStore("userInfo", {
* 获取用户积分信息
*/
async loadMemberInfo() {
const { data } = await fetchMemberInfo();
const {
data
} = await fetchMemberInfo();
console.log("fetchMemberInfo=", data);
this.setMemberInfo(data);
// this.memberInfo = data;
......@@ -164,7 +184,9 @@ export const useUserStore = defineStore("userInfo", {
* @param {String} code
*/
async autoLoginByCode(code) {
const { data } = await autoLoginByCode(code);
const {
data
} = await autoLoginByCode(code);
console.log("autoLoginByCode", data);
// 如果登录成功,获取用户信息和宝宝信息,更新到state中,方便全局使用
if (data && data.cuk) {
......@@ -211,4 +233,4 @@ export const useUserStore = defineStore("userInfo", {
}
},
},
});
});
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment