mirror of
https://gitee.com/ShopeX/ECShopX_mobile-frontend
synced 2026-08-12 14:25:38 +08:00
bug(custom): cookie
This commit is contained in:
zhangjing1
26
.env
26
.env
@@ -1,16 +1,16 @@
|
||||
APP_BASE_URL=
|
||||
APP_WEBSOCKET=
|
||||
APP_COMPANY_ID=
|
||||
APP_PLATFORM=
|
||||
APP_CUSTOM_SERVER=
|
||||
APP_HOME_PAGE=
|
||||
APP_TRACK=
|
||||
APP_YOUSHU_TOKEN=
|
||||
APP_ID=
|
||||
APP_MAP_KEY=
|
||||
APP_MAP_NAME=
|
||||
APP_IMAGE_CDN=
|
||||
APP_DIANWU_URL=
|
||||
APP_BASE_URL=https://demo-ecshopx.ishopex.cn/api/h5app/wxapp
|
||||
APP_WEBSOCKET=wss://demo-ecshopx.ishopex.cn/ws
|
||||
APP_COMPANY_ID=38
|
||||
APP_PLATFORM=standard
|
||||
APP_CUSTOM_SERVER=https://ecshopx-h5.ex-sandbox.com/
|
||||
APP_HOME_PAGE=/pages/index
|
||||
APP_TRACK=youshu
|
||||
APP_YOUSHU_TOKEN=bi281e87ab2424481a
|
||||
APP_ID=wx1e25e45145b70faa
|
||||
APP_MAP_KEY=PSPBZ-KQ5CW-CSGRF-ON2S4-K2HQJ-XEBQG
|
||||
APP_MAP_NAME=oneX新零售门店定位
|
||||
APP_IMAGE_CDN=https://b-img-cdn.yuanyuanke.cn/ecshopx-vshop
|
||||
APP_DIANWU_URL=https://demo-ecshopx-dianwu.shopex123.com
|
||||
APP_MERCHANT_URL=
|
||||
APP_ADAPAY=
|
||||
|
||||
|
||||
77
src/components/cookie-consent/index.js
Normal file
77
src/components/cookie-consent/index.js
Normal file
@@ -0,0 +1,77 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { View, Button } from '@tarojs/components'
|
||||
import { SpHtml } from '@/components'
|
||||
import api from '@/api'
|
||||
import './index.scss'
|
||||
|
||||
const CookieConsent = () => {
|
||||
const [visible, setVisible] = useState(false)
|
||||
const [animationVisible, setAnimationVisible] = useState(false)
|
||||
const [policyData, setPolicyData] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
// 仅在 H5 环境下执行
|
||||
if (process.env.TARO_ENV === 'h5') {
|
||||
const consent = Taro.getStorageSync('cookie_consent')
|
||||
if (!consent) {
|
||||
fetchCookiePolicy()
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
const fetchCookiePolicy = async () => {
|
||||
try {
|
||||
const { content } = await api.shop.getRuleInfo({
|
||||
type: 'cookie_privacy'
|
||||
})
|
||||
if (content) {
|
||||
setPolicyData(content)
|
||||
setVisible(true)
|
||||
// 延迟设置动画状态以触发 CSS transition
|
||||
setTimeout(() => {
|
||||
setAnimationVisible(true)
|
||||
}, 50)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch cookie policy:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleClose = (type) => {
|
||||
// 开始离开动画
|
||||
setAnimationVisible(false)
|
||||
// 等待动画结束后卸载组件
|
||||
setTimeout(() => {
|
||||
Taro.setStorageSync('cookie_consent', type)
|
||||
setVisible(false)
|
||||
}, 300) // 300ms 对应 CSS transition 时间
|
||||
}
|
||||
|
||||
const handleAccept = () => {
|
||||
handleClose('accepted')
|
||||
}
|
||||
|
||||
const handleReject = () => {
|
||||
handleClose('rejected')
|
||||
}
|
||||
|
||||
if (!visible) return null
|
||||
|
||||
return (
|
||||
<View className='cookie-consent-modal'>
|
||||
<View className={`cookie-consent-modal-overlay ${animationVisible ? 'visible' : ''}`} />
|
||||
<View className={`cookie-consent-modal-content ${animationVisible ? 'visible' : ''}`}>
|
||||
<View className='cookie-text'>
|
||||
<SpHtml content={policyData} />
|
||||
</View>
|
||||
<View className='cookie-buttons'>
|
||||
<Button className='accept-btn' onClick={handleAccept}>ACCEPT ALL</Button>
|
||||
<Button className='reject-btn' onClick={handleReject}>REJECT ALL</Button>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default CookieConsent
|
||||
88
src/components/cookie-consent/index.scss
Normal file
88
src/components/cookie-consent/index.scss
Normal file
@@ -0,0 +1,88 @@
|
||||
.cookie-consent-modal {
|
||||
.cookie-consent-modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9998;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
|
||||
&.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.cookie-consent-modal-content {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
background: #fff;
|
||||
padding: 30px;
|
||||
box-sizing: border-box;
|
||||
z-index: 9999;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
|
||||
&.visible {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.cookie-text {
|
||||
font-size: 28px;
|
||||
line-height: 48px;
|
||||
color: #000;
|
||||
width: 100%;
|
||||
margin-bottom: 60px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.cookie-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
width: 100%;
|
||||
|
||||
button {
|
||||
font-family: Noto Sans SC;
|
||||
font-weight: 500;
|
||||
font-style: Medium;
|
||||
font-size: 28px;
|
||||
line-height: 44px;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 78px;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.accept-btn {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.reject-btn {
|
||||
background: #fff;
|
||||
color: #666666;
|
||||
border: 1px solid #666666;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -15,6 +15,7 @@ import { View, Text, Button } from '@tarojs/components'
|
||||
import { useImmer } from 'use-immer'
|
||||
import { SpNavBar, SpFloatMenuItem, SpNote, SpLoading, SpImage } from '@/components'
|
||||
import { useThemsColor, useLogin } from '@/hooks'
|
||||
import CookieConsent from '@/components/cookie-consent'
|
||||
import {
|
||||
TAB_PAGES,
|
||||
TABBAR_PATH,
|
||||
@@ -486,6 +487,7 @@ const SpPage = memo(
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
<CookieConsent />
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
||||
@@ -3213,7 +3213,7 @@
|
||||
"zh-cn": "上架成功",
|
||||
"en": "Listed successfully",
|
||||
"zh-tw": "上架成功",
|
||||
750 "ar": "تم الإدراج بنجاح"
|
||||
"ar": "تم الإدراج بنجاح"
|
||||
},
|
||||
"aa12vu4": {
|
||||
"zh-cn": "下架成功",
|
||||
@@ -15160,5 +15160,41 @@
|
||||
"en": "Total:",
|
||||
"zh-tw": "總計:",
|
||||
"ar": "الإجمالي:"
|
||||
},
|
||||
"chl18c4": {
|
||||
"zh-cn": "开票失败",
|
||||
"en": "Ticket failed",
|
||||
"zh-tw": "開票失敗",
|
||||
"ar": "فشل الفاتورة"
|
||||
},
|
||||
"d0x6rc4": {
|
||||
"zh-cn": "批量处理",
|
||||
"en": "Batch processing",
|
||||
"zh-tw": "批量處理",
|
||||
"ar": "معالجة لوحة واحدة"
|
||||
},
|
||||
"7djicl6": {
|
||||
"zh-cn": "请输入订单号",
|
||||
"en": "Please enter order number",
|
||||
"zh-tw": "請輸入訂單號",
|
||||
"ar": "يرجى إدخال رقم الطلب"
|
||||
},
|
||||
"cx7hgb4": {
|
||||
"zh-cn": "接受所有",
|
||||
"en": "Accept all",
|
||||
"zh-tw": "接受所有",
|
||||
"ar": "قبول الكل"
|
||||
},
|
||||
"czrm8k4": {
|
||||
"zh-cn": "拒绝所有",
|
||||
"en": "Reject all",
|
||||
"zh-tw": "拒絕所有",
|
||||
"ar": "رفض الكل"
|
||||
},
|
||||
"pghukv6": {
|
||||
"zh-cn": "365海淘客",
|
||||
"en": "365 Holiday Trader",
|
||||
"zh-tw": "365海淘客",
|
||||
"ar": "365 هوليداي ترايدر"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user