140 changed files with 31604 additions and 22613 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1,21 @@ |
|||||
{"code":200,"msg":"操作成功","data":{"hotSearch":[{"shopId":271,"shopName":"十日后"},{"shopId":506,"shopName":"弥小爷虾滑"},{"shopId":273,"shopName":"谭木匠"},{"shopId":425,"shopName":"星巴克"},{"shopId":485,"shopName":"荔滋烫捞"}],"temperature":25,"columnList":[{"moduleType":1,"name":"好吃的","nameEn":"DELICIOUS","introduce":"好吃的","introduceEn":"大吉大利今晚吃鸡","crossFileUrl":"/iotFile/2022/06/30/48001398f98b43ea9ba4b4a27e1bbe16.png","verticalFileUrl":"/iotFile/2022/06/21/ea1dfb78855e4ce9b9d0ab1b6e3a307d.png"},{"moduleType":2,"name":"好玩的","nameEn":"FUN","introduce":"好玩的","crossFileUrl":"/iotFile/2022/06/30/f94b26b8157f410b93f8346568a1766d.png","verticalFileUrl":"/iotFile/2022/06/21/50ac7a32182c469aa684dc34cfb11f21.png"},{"moduleType":3,"name":"值得买","nameEn":"WORTH TO BUY","introduce":"值得买","crossFileUrl":"/iotFile/2022/06/30/b85955b2f68a42938c886fac16278aa9.png","verticalFileUrl":"/iotFile/2022/06/20/f7515243eb234e00ae40fe662f79d484.png"}],"status":"多云转晴"}} |
|
||||
|
{ |
||||
|
"code": 200, |
||||
|
"msg": "操作成功", |
||||
|
"data": { |
||||
|
"temperature": "11", |
||||
|
"columnList": [], |
||||
|
"hotSearch": [ |
||||
|
{ "shopId": 43, "shopName": "心血管超声（心超）诊室2" }, |
||||
|
{ "shopId": 63, "shopName": "临床心里科会议室" }, |
||||
|
{ "shopId": 66, "shopName": "临床心里科诊室2" }, |
||||
|
{ "shopId": 96, "shopName": "内镜手术室1" }, |
||||
|
{ "shopId": 102, "shopName": "消化内镜中心VIP诊室2" }, |
||||
|
{ "shopId": 155, "shopName": "妇科门诊护士台" }, |
||||
|
{ "shopId": 286, "shopName": "呼吸内科/胸外科诊室1" }, |
||||
|
{ "shopId": 342, "shopName": "儿科检验" }, |
||||
|
{ "shopId": 358, "shopName": "特需门诊3" }, |
||||
|
{ "shopId": 367, "shopName": "特需门诊19" } |
||||
|
], |
||||
|
"status": "晴" |
||||
|
} |
||||
|
} |
||||
|
|||||
|
Before Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 6.3 KiB |
|
Before Width: | Height: | Size: 302 KiB |
|
Before Width: | Height: | Size: 404 KiB |
|
Before Width: | Height: | Size: 888 B |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 43 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 101 KiB |
|
After Width: | Height: | Size: 131 KiB |
|
Before Width: | Height: | Size: 911 B After Width: | Height: | Size: 911 B |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 668 B After Width: | Height: | Size: 668 B |
|
Before Width: | Height: | Size: 795 B After Width: | Height: | Size: 795 B |
|
Before Width: | Height: | Size: 766 B After Width: | Height: | Size: 766 B |
@ -0,0 +1,10 @@ |
|||||
|
import style from './style.json' |
||||
|
function importAll(r) { |
||||
|
const obj = {} |
||||
|
r.keys().forEach(key => { |
||||
|
obj[key.replace('./', '').replace('.png', '')] = r(key) |
||||
|
}) |
||||
|
return obj |
||||
|
} |
||||
|
const images = importAll(require.context('./', false, /\.(png|jpe?g|svg)$/)) |
||||
|
export default { ...style, images } |
||||
|
Before Width: | Height: | Size: 301 B After Width: | Height: | Size: 301 B |
|
Before Width: | Height: | Size: 304 B After Width: | Height: | Size: 304 B |
|
After Width: | Height: | Size: 911 B |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 303 KiB After Width: | Height: | Size: 303 KiB |
|
Before Width: | Height: | Size: 768 B After Width: | Height: | Size: 768 B |
|
Before Width: | Height: | Size: 738 B After Width: | Height: | Size: 738 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 49 KiB |
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
@ -0,0 +1,128 @@ |
|||||
|
{ |
||||
|
"global": { |
||||
|
"background": "#dee6f6", |
||||
|
"appBackground": "#dee6f6", |
||||
|
"radius": "" |
||||
|
}, |
||||
|
"weather": { |
||||
|
"iconColor": "#000", |
||||
|
"textColor": "#000" |
||||
|
}, |
||||
|
"time": { |
||||
|
"timeColor": "#000", |
||||
|
"monthColor": "#000", |
||||
|
"weekColor": "#516dd8" |
||||
|
}, |
||||
|
"searchBar": { |
||||
|
"backBorderRadius": "24px", |
||||
|
"background": "#fff", |
||||
|
"border": "none", |
||||
|
"borderRadius": "24px", |
||||
|
"placeholderColor": "rgba(0, 0, 0, 0.2)", |
||||
|
"stickBg": "linear-gradient(180deg, #6C7CA6 0%, #879ACA 100%)", |
||||
|
"color": "rgba(0, 0, 0, 0.8)" |
||||
|
}, |
||||
|
"menu": { |
||||
|
"bg1": "rgba(255, 255, 255, 0.4)", |
||||
|
"bg2": "rgba(255, 255, 255, 0.4)", |
||||
|
"bg3": "rgba(255, 255, 255, 0.4)", |
||||
|
"bg4": "rgba(255, 255, 255, 0.4)", |
||||
|
"bg5": "rgba(255, 255, 255, 0.4)", |
||||
|
"activeBg1": "#ffffff", |
||||
|
"activeBg2": "#ffffff", |
||||
|
"activeBg3": "#ffffff", |
||||
|
"activeBg4": "#ffffff", |
||||
|
"activeBg5": "#ffffff", |
||||
|
"indexBg1": "#ffffff", |
||||
|
"indexBg2": "#ffffff", |
||||
|
"indexBg3": "#ffffff", |
||||
|
"indexBg4": "#ffffff", |
||||
|
"indexBg5": "#ffffff", |
||||
|
"color": "rgba(0, 0, 0, 0.4)", |
||||
|
"activeColor": "rgba(0, 0, 0, 0.8)", |
||||
|
"indexColor": "rgba(0, 0, 0, 0.8)", |
||||
|
"barBg": "linear-gradient(113.71deg, #435ACD 0%, #749CF3 100%)" |
||||
|
}, |
||||
|
"index": { |
||||
|
"hotSearchTitleColor": "rgba(0, 0, 0, 0.8)", |
||||
|
"hotSearchBg": "rgba(255, 255, 255, 0.8)", |
||||
|
"hotSearchColor": "rgba(0, 0, 0, 0.6)", |
||||
|
"guideBackground": "linear-gradient(99.5deg, #f0b92b 0%, #f9d556 100%)", |
||||
|
"guideBorder": "none", |
||||
|
"guideTopBg": "linear-gradient(180deg, #435acd 0%, #749cf3 100%)", |
||||
|
"guideQrcodeBg": "rgba(255, 255, 255, 0.2)", |
||||
|
"guideColor": "#000000", |
||||
|
"guideMetaColor": "rgba(0, 0, 0, 0.6)", |
||||
|
"foodBg": "linear-gradient(180deg, #ffffff 0%, #f2f4f8 100%)", |
||||
|
"foodBorder": "4px solid #F68B51", |
||||
|
"recBg": "linear-gradient(180deg, #ffffff 0%, #f2f4f8 100%)", |
||||
|
"recBorder": "none" |
||||
|
}, |
||||
|
"brand": { |
||||
|
"background": "rgba(255, 255, 255, 0.6)", |
||||
|
"color": "rgba(0, 0, 0, 0.8)", |
||||
|
"metaColor": "rgba(0, 0, 0, 0.6)", |
||||
|
"floorNameColor": "rgba(0, 0, 0, 0.8)", |
||||
|
"floorMetaColor": "rgba(0, 0, 0, 0.6)", |
||||
|
"qrcodeBg": "rgba(255, 255, 255, 0.8)", |
||||
|
"qrcodeTextColor": "rgba(0, 0, 0, 0.8)" |
||||
|
}, |
||||
|
"food": { |
||||
|
"background": "linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%)", |
||||
|
"metaColor": "rgba(0, 0, 0, 0.6)" |
||||
|
}, |
||||
|
"carousel": { |
||||
|
"titleColor": "rgba(0, 0, 0, 0.8)", |
||||
|
"introColor": "rgba(0, 0, 0, 0.6)" |
||||
|
}, |
||||
|
"map": { |
||||
|
"background": "none" |
||||
|
}, |
||||
|
"billboard": { |
||||
|
"background": "#dee6f6", |
||||
|
"arrowRadius": "100px", |
||||
|
"legendColor": "rgba(0, 0, 0, 0.6)", |
||||
|
"titleColor": "#000000", |
||||
|
"metaColor": "rgba(0, 0, 0, 0.6)" |
||||
|
}, |
||||
|
"guide": { |
||||
|
"floorBg": "linear-gradient(113.71deg, #435acd 0%, #749cf3 100%)", |
||||
|
"allFloorBg": "left / 150px 100% no-repeat linear-gradient(180deg, #6c7ca6 0%, #879aca 100%), #dee6f6", |
||||
|
"allFloorBgH": "right / 100px 100vh no-repeat var(--guide-floorBg), left / calc(100vw - 510px - 100px) 100vh no-repeat #dee6f6", |
||||
|
"arrowRadius": "100px", |
||||
|
"floorColor": "#FFFFFF", |
||||
|
"floorActiveColor": "rgba(0, 0, 0, 0.8)", |
||||
|
"floorActiveBg": "linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #FFFFFF 100%)", |
||||
|
"currentBg": "linear-gradient(99.5deg, #F0B92B 0%, #F9D556 100%)", |
||||
|
"currentColor": "rgba(0, 0, 0, 0.8)" |
||||
|
}, |
||||
|
"search": { |
||||
|
"background": "linear-gradient(180deg, #E0E3EE 0%, #D4D9E7 100%)", |
||||
|
"barBackground": "#fff", |
||||
|
"placeholderMetaColor": "rgba(81, 109, 216, 1)", |
||||
|
"keyboardActiveBg": "linear-gradient(180deg, #435ACD 0%, #749CF3 100%)", |
||||
|
"writeColor": "#516DD8", |
||||
|
"topBg": "rgba(255, 255, 255, 0.6)", |
||||
|
"facTitleColor": "rgba(0, 0, 0, 0.8)", |
||||
|
"facNameColor": "rgba(0, 0, 0, 0.6)", |
||||
|
"tabsBg": "rgba(0, 0, 0, 0.05)", |
||||
|
"tabActiveBg": "#FFFFFF", |
||||
|
"tabColor": "rgba(0, 0, 0, 0.6)", |
||||
|
"tabActiveColor": "rgba(0, 0, 0, 0.8)", |
||||
|
"resultTitleColor": "rgba(0, 0, 0, 0.8)", |
||||
|
"resultMetaColor": "rgba(0, 0, 0, 0.6)", |
||||
|
"keyBg": "#FFFFFF", |
||||
|
"keyColor": "rgba(0, 0, 0, 0.8)", |
||||
|
"hotSearchTitleColor": "rgba(0, 0, 0, 0.8)", |
||||
|
"hotSearchBg": "rgba(255, 255, 255, 0.8)", |
||||
|
"hotSearchColor": "rgba(0, 0, 0, 0.6)" |
||||
|
}, |
||||
|
"activities": { |
||||
|
"btnBg": "linear-gradient(113.71deg, #435ACD 0%, #749CF3 100%)", |
||||
|
"btnColor": "#FFFFFF", |
||||
|
"detailBg": "#FFFFFF", |
||||
|
"radius": "16px", |
||||
|
"titleColor": "rgba(0, 0, 0, 0.8)", |
||||
|
"introColor": "rgba(0, 0, 0, 0.6)" |
||||
|
} |
||||
|
} |
||||
|
Before Width: | Height: | Size: 597 B After Width: | Height: | Size: 597 B |
|
Before Width: | Height: | Size: 593 B After Width: | Height: | Size: 593 B |
@ -1,239 +0,0 @@ |
|||||
<template> |
|
||||
<ScrollView class="scroll" :list="list" :scrollX="isH" :scrollbar="!isH"> |
|
||||
<TransitionGroup name="zoom" tag="div" class="scroll-content"> |
|
||||
<div :class="['content-item', item === activity ? 'd' : '']" v-for="item of list" :key="item.activityId"> |
|
||||
<div class="front"> |
|
||||
<img :src="config.sourceUrl + item.fileUrl" alt="" /> |
|
||||
<div class="tr">{{ item.startDate }} - {{ item.endDate }}</div> |
|
||||
<div class="bottom"> |
|
||||
<div class="left">{{ switchLanguage(item, 'activityName') }}</div> |
|
||||
<div class="right" @click="handleActivity(item)">查看详情</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="back"> |
|
||||
<ScrollView class="backscroll" scrollbar stopPropagation> |
|
||||
<div> |
|
||||
<div class="title">{{ switchLanguage(item, 'activityName') }}</div> |
|
||||
<div class="desc"> |
|
||||
{{ switchLanguage(item, 'activityContent') }} |
|
||||
</div> |
|
||||
</div> |
|
||||
</ScrollView> |
|
||||
</div> |
|
||||
</div> |
|
||||
</TransitionGroup> |
|
||||
</ScrollView> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { ref } from 'vue' |
|
||||
import { storeToRefs } from 'pinia' |
|
||||
import { useStore } from '@/store/root' |
|
||||
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|
||||
import 'swiper/css' |
|
||||
import 'swiper/css/pagination' |
|
||||
import 'swiper/css/effect-coverflow' |
|
||||
import { useMediaQuery } from '@vueuse/core' |
|
||||
|
|
||||
const isH = useMediaQuery('(min-aspect-ratio: 1/1)') |
|
||||
defineProps({ |
|
||||
list: { |
|
||||
type: Array, |
|
||||
default: () => [] |
|
||||
} |
|
||||
}) |
|
||||
const showDetail = ref(false) |
|
||||
const activity = ref(null) |
|
||||
function handleActivity(item) { |
|
||||
activity.value = item |
|
||||
showDetail.value = true |
|
||||
} |
|
||||
const store = useStore() |
|
||||
const { config } = storeToRefs(store) |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.scroll { |
|
||||
position: relative; |
|
||||
flex: 1; |
|
||||
overflow: hidden; |
|
||||
:deep(.bscroll-vertical-scrollbar) { |
|
||||
width: 48px !important; |
|
||||
top: 48px !important; |
|
||||
right: 7px !important; |
|
||||
background: center / 6px 250px no-repeat url(@/assets/images/scrollBar.png); |
|
||||
border-radius: 6px; |
|
||||
opacity: 1 !important; |
|
||||
height: 250px !important; |
|
||||
&::after { |
|
||||
position: absolute; |
|
||||
content: ''; |
|
||||
left: 0; |
|
||||
top: 120px; |
|
||||
margin: auto; |
|
||||
width: 48px; |
|
||||
height: 61px; |
|
||||
background: center / cover no-repeat url(@/assets/images/scrollHand.png); |
|
||||
} |
|
||||
.bscroll-indicator { |
|
||||
height: 95px !important; |
|
||||
width: 6px !important; |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
margin: auto; |
|
||||
background: #ffffff !important; |
|
||||
border-radius: 6px !important; |
|
||||
border: none !important; |
|
||||
} |
|
||||
} |
|
||||
.scroll-content { |
|
||||
width: 100%; |
|
||||
display: inline-flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
padding: 48px 0; |
|
||||
} |
|
||||
.content-item { |
|
||||
position: relative; |
|
||||
width: 944px; |
|
||||
height: 532px; |
|
||||
background: var(--activities-detailBg); |
|
||||
border-radius: var(--activities-radius); |
|
||||
overflow: hidden; |
|
||||
margin-bottom: 24px; |
|
||||
&.d { |
|
||||
.front { |
|
||||
z-index: 0; |
|
||||
} |
|
||||
.back { |
|
||||
z-index: 1; |
|
||||
} |
|
||||
} |
|
||||
.front { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
z-index: 1; |
|
||||
img { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
object-fit: cover; |
|
||||
} |
|
||||
.tr { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
font-family: 'Montserrat'; |
|
||||
background: rgba(0, 0, 0, 0.4); |
|
||||
box-shadow: 0px 15px 24px rgba(173, 196, 236, 0.25); |
|
||||
font-weight: 700; |
|
||||
font-size: 16px; |
|
||||
line-height: 40px; |
|
||||
color: #ffffff; |
|
||||
padding: 0 27px; |
|
||||
height: 40px; |
|
||||
border-radius: 0px 0px 0px 12px; |
|
||||
} |
|
||||
.bottom { |
|
||||
position: absolute; |
|
||||
display: flex; |
|
||||
bottom: 0; |
|
||||
width: 100%; |
|
||||
height: 64px; |
|
||||
.left { |
|
||||
flex: 1; |
|
||||
height: 100%; |
|
||||
padding: 0 40px; |
|
||||
background: rgba(0, 0, 0, 0.4); |
|
||||
font-weight: 700; |
|
||||
font-size: 18px; |
|
||||
line-height: 64px; |
|
||||
color: #ffffff; |
|
||||
white-space: nowrap; |
|
||||
overflow: hidden; |
|
||||
text-overflow: ellipsis; |
|
||||
} |
|
||||
.right { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
width: 234px; |
|
||||
height: 100%; |
|
||||
background: var(--activities-btnBg); |
|
||||
box-shadow: 0px 15px 24px rgba(173, 196, 236, 0.25); |
|
||||
font-weight: 700; |
|
||||
font-size: 18px; |
|
||||
line-height: 21px; |
|
||||
text-align: center; |
|
||||
color: var(--activities-btnColor); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.back { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
display: flex; |
|
||||
z-index: 0; |
|
||||
background: var(--activities-detailBg); |
|
||||
.backscroll { |
|
||||
position: relative; |
|
||||
flex: 1; |
|
||||
:deep(.bscroll-vertical-scrollbar) { |
|
||||
width: 6px !important; |
|
||||
top: 137px !important; |
|
||||
right: 31px !important; |
|
||||
background: rgba(0, 0, 0, 0.05) !important; |
|
||||
border-radius: 6px; |
|
||||
opacity: 1 !important; |
|
||||
height: 174px !important; |
|
||||
&::after { |
|
||||
display: none; |
|
||||
} |
|
||||
.bscroll-indicator { |
|
||||
height: 95px !important; |
|
||||
width: 6px !important; |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
margin: auto; |
|
||||
background: rgba(0, 0, 0, 0.1) !important; |
|
||||
border-radius: 6px !important; |
|
||||
border: none !important; |
|
||||
} |
|
||||
} |
|
||||
.title { |
|
||||
font-weight: 700; |
|
||||
font-size: 28px; |
|
||||
line-height: 150%; |
|
||||
padding: 48px 68px 40px 68px; |
|
||||
color: var(--activities-titleColor); |
|
||||
} |
|
||||
.desc { |
|
||||
padding: 0 68px; |
|
||||
padding-bottom: 23px; |
|
||||
font-weight: 400; |
|
||||
font-size: 16px; |
|
||||
line-height: 200%; |
|
||||
color: var(--activities-introColor); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@media (min-aspect-ratio: 1/1) { |
|
||||
.scroll { |
|
||||
.scroll-content { |
|
||||
width: auto; |
|
||||
flex-direction: row; |
|
||||
padding: 100px 68px; |
|
||||
} |
|
||||
.content-item + .content-item { |
|
||||
margin-left: 32px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,200 +0,0 @@ |
|||||
<template> |
|
||||
<Dialog @close="back"> |
|
||||
<div class="content"> |
|
||||
<div class="carousel"> |
|
||||
<EffectFade :list="[activity.fileUrl, activity.fileUrl]"> |
|
||||
<template v-slot="{ item }"> |
|
||||
<div class="banner-wrapper"> |
|
||||
<img :src="config.sourceUrl + item" alt="" class="banner" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
</EffectFade> |
|
||||
</div> |
|
||||
<div class="intro-content"> |
|
||||
<h1 class="name pos">{{ switchLanguage(activity, 'activityName') }}</h1> |
|
||||
<ScrollView class="content-scroll" scrollbar> |
|
||||
<p class="intro pos">{{ switchLanguage(activity, 'activityContent') }}</p> |
|
||||
</ScrollView> |
|
||||
<div class="time-wrapper pos"> |
|
||||
<p class="common first">{{ $t('ActivityTime') }}：{{ activity.startDate }} {{ $t('zhi') + activity.endDate }}</p> |
|
||||
<p class="common">{{ $t('activityAddress') }}：{{ switchLanguage(activity, 'activityAddress') }}</p> |
|
||||
</div> |
|
||||
<Go class="detail-go" v-if="activity.shopId || activity.point" @click="handleActivity" /> |
|
||||
</div> |
|
||||
<Button class="btn" @click="back" /> |
|
||||
<ThumbQRCode class="thumbs" :title="$t('yuyue')" /> |
|
||||
</div> |
|
||||
</Dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { useRouter } from 'vue-router' |
|
||||
import { useStore } from '@/store/root' |
|
||||
import Dialog from '@/layouts/Dialog.vue' |
|
||||
import Button from '@/base/Button/Button.vue' |
|
||||
import EffectFade from '@/components/EffectFade/EffectFade.vue' |
|
||||
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|
||||
import Go from '@/base/Go/Go.vue' |
|
||||
import ThumbQRCode from '@/base/ThumbQRCode/ThumbQRCode.vue' |
|
||||
import Shop from '@/utils/Class/Shop' |
|
||||
|
|
||||
const MALL_TYPE = 1 //商场活动 |
|
||||
const BRAND_TYPE = 2 //品牌活动 |
|
||||
const MEMBER_TYPE = 3 //会员活动 |
|
||||
|
|
||||
const props = defineProps({ |
|
||||
activity: Object, |
|
||||
config: Object |
|
||||
}) |
|
||||
|
|
||||
const router = useRouter() |
|
||||
const store = useStore() |
|
||||
|
|
||||
function handleActivity() { |
|
||||
let shop |
|
||||
if (props.activity.activityType === BRAND_TYPE) { |
|
||||
shop = store.shopList.find(item => item.shopId === props.activity.shopId) |
|
||||
} |
|
||||
if (props.activity.activityType === MALL_TYPE || props.activity.activityType === MEMBER_TYPE) { |
|
||||
const { floorOrder, floor, activityName, fileUrl, point } = props.activity |
|
||||
shop = new Shop(activityName, floorOrder, floor, fileUrl, point) |
|
||||
} |
|
||||
|
|
||||
if (!shop) { |
|
||||
return |
|
||||
} |
|
||||
store.SET_SHOP(shop) |
|
||||
router.push('/nav') |
|
||||
} |
|
||||
|
|
||||
const emits = defineEmits(['close']) |
|
||||
function back() { |
|
||||
emits('close') |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.pos { |
|
||||
position: relative; |
|
||||
z-index: 5; |
|
||||
} |
|
||||
.content { |
|
||||
position: relative; |
|
||||
width: 700px; |
|
||||
margin: 0 auto; |
|
||||
margin-top: 350px; |
|
||||
z-index: 2; |
|
||||
.thumbs { |
|
||||
position: absolute; |
|
||||
top: 120px; |
|
||||
right: -156px; |
|
||||
} |
|
||||
&::before { |
|
||||
content: ''; |
|
||||
position: absolute; |
|
||||
top: 373px; |
|
||||
left: 0; |
|
||||
z-index: 2; |
|
||||
width: 700px; |
|
||||
height: 420px; |
|
||||
background: #ffffff; |
|
||||
border-radius: 12px; |
|
||||
} |
|
||||
.intro-content { |
|
||||
position: relative; |
|
||||
height: 420px; |
|
||||
.name { |
|
||||
padding: 28px 56px 32px 56px; |
|
||||
font-weight: 700; |
|
||||
font-size: 24px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: rgba(0, 0, 0, 0.8); |
|
||||
} |
|
||||
} |
|
||||
.common { |
|
||||
font-weight: 700; |
|
||||
font-size: 14px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
margin-left: 56px; |
|
||||
&.first { |
|
||||
padding-bottom: 8px; |
|
||||
} |
|
||||
} |
|
||||
.content-scroll { |
|
||||
position: relative; |
|
||||
height: 140px; |
|
||||
overflow: hidden; |
|
||||
margin: 0 34px 64px 56px; |
|
||||
padding-right: 16px; |
|
||||
:deep(.bscroll-vertical-scrollbar) { |
|
||||
width: 6px !important; |
|
||||
background: rgba(0, 0, 0, 0.02) !important; |
|
||||
border-radius: 6px !important; |
|
||||
opacity: 1 !important; |
|
||||
.bscroll-indicator { |
|
||||
width: 6px !important; |
|
||||
background: rgba(0, 0, 0, 0.1) !important; |
|
||||
border-radius: 6px !important; |
|
||||
border: none !important; |
|
||||
} |
|
||||
} |
|
||||
.intro { |
|
||||
font-weight: 400; |
|
||||
font-size: 14px; |
|
||||
line-height: 200%; |
|
||||
text-align: justify; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
margin-bottom: 64px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.detail-go { |
|
||||
bottom: -70px; |
|
||||
} |
|
||||
|
|
||||
.carousel { |
|
||||
width: 700px; |
|
||||
height: 393px; |
|
||||
|
|
||||
:deep(.swiper) { |
|
||||
overflow: visible !important; |
|
||||
z-index: auto; |
|
||||
} |
|
||||
:deep(.swiper-pagination) { |
|
||||
right: 32px; |
|
||||
left: auto; |
|
||||
bottom: 5px; |
|
||||
width: auto; |
|
||||
} |
|
||||
:deep(.swiper-pagination-bullet) { |
|
||||
width: 16px !important; |
|
||||
height: 3px !important; |
|
||||
background: rgba(0, 0, 0, 0.1); |
|
||||
border-radius: 3px !important; |
|
||||
opacity: inherit !important; |
|
||||
&.swiper-pagination-bullet-active { |
|
||||
background: #f1b33e; |
|
||||
border-radius: 3px !important; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.banner-wrapper { |
|
||||
width: 700px; |
|
||||
height: 393px; |
|
||||
border-radius: 12px; |
|
||||
.banner { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
object-fit: cover; |
|
||||
border-radius: 12px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.btn { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
right: -120px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,455 +0,0 @@ |
|||||
<template> |
|
||||
<Dialog @close="back"> |
|
||||
<div class="content" :class="{ active: shop.activityList.length || shop.thirdKouCode }"> |
|
||||
<div class="left"> |
|
||||
<div class="carousel"> |
|
||||
<EffectFade :list="shop.doorMaterialList"> |
|
||||
<template v-slot="{ item }"> |
|
||||
<div class="banner-wrapper"> |
|
||||
<img :src="config.sourceUrl + item" alt="" class="banner" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
</EffectFade> |
|
||||
<div class="like-wrapper" @click="setLike"> |
|
||||
<img :src="showLikeHeart ? require('@/assets/images/detail/like_active.svg') : require('@/assets/images/detail/like.svg')" class="like-icon" alt="" /> |
|
||||
<span class="like-num">{{ likeNumber }}</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="info-content"> |
|
||||
<div class="shop-info"> |
|
||||
<div class="logo-wrapper"> |
|
||||
<img :src="config.sourceUrl + shop.logoUrl" alt="" class="logo" /> |
|
||||
</div> |
|
||||
<div class="group" v-if="shop.industryUrl?.length"> |
|
||||
<div class="icon-box"> |
|
||||
<img :src="config.sourceUrl + shop.industryUrl" alt="" /> |
|
||||
</div> |
|
||||
<div class="group-right"> |
|
||||
<span class="tip-name">业态</span> |
|
||||
<span class="name">{{ switchLanguage(shop, 'industryFatherName') }}</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="group" v-if="shop.houseNumber?.length"> |
|
||||
<div class="icon-box"> |
|
||||
<img src="../../assets/images/nav/detail-add.svg" alt="" /> |
|
||||
</div> |
|
||||
<div class="group-right"> |
|
||||
<span class="tip-name">地址</span> |
|
||||
<span class="name">{{ shop.houseNumber }}</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="group" v-if="shop.contact?.length"> |
|
||||
<div class="icon-box"> |
|
||||
<img src="../../assets/images/nav/phone.svg" alt="" /> |
|
||||
</div> |
|
||||
<div class="group-right"> |
|
||||
<span class="tip-name">电话</span> |
|
||||
<span class="name">{{ shop.contact }}</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="group" v-if="shop.businessHours?.length"> |
|
||||
<div class="icon-box"> |
|
||||
<img src="../../assets/images/nav/time.svg" alt="" /> |
|
||||
</div> |
|
||||
<div class="group-right"> |
|
||||
<span class="tip-name">营业时间</span> |
|
||||
<span class="name">{{ shop.businessHours }}</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="shop-intro"> |
|
||||
<p class="shop-name">{{ switchLanguage(shop, 'shopName') }}</p> |
|
||||
<ScrollView class="intro-scroll" scrollbar> |
|
||||
<p class="intro">{{ switchLanguage(shop, 'intro') }}</p> |
|
||||
</ScrollView> |
|
||||
</div> |
|
||||
<Go class="detail-go" @click="go" /> |
|
||||
</div> |
|
||||
<div class="lineup-wrapper"> |
|
||||
<div class="lineup-left"> |
|
||||
<h1 class="title-tip">{{ $t('qiandengdai') }}</h1> |
|
||||
<div class="flex align-center"> |
|
||||
<ScrollView class="lineup-scroll" scroll-x> |
|
||||
<div class="lineup-content"> |
|
||||
<div class="flex"> |
|
||||
<div class="lineup-item" v-for="item of 10" :key="item"> |
|
||||
<span class="number">12</span> |
|
||||
<span class="line-up-text">小桌</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</ScrollView> |
|
||||
<div class="line"></div> |
|
||||
<p class="abs-money">147<i>￥/人</i></p> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="lineup-btn" @click="handleLineupBtn">{{ $t('join') }}</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="right" v-if="shop.activityList.length || shop.thirdKouCode"> |
|
||||
<Tabs /> |
|
||||
</div> |
|
||||
<Button class="btn" @click="back" /> |
|
||||
<ThumbQRCode class="thumbs" :title="$t('yuyue')" /> |
|
||||
<Transition enter-active-class="animate__animated animate__zoomIn" leave-active-class="animate__animated animate__zoomOut"> |
|
||||
<QRCode v-if="showLineupQr" @close="showLineupQr = false" /> |
|
||||
</Transition> |
|
||||
</div> |
|
||||
</Dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { ref, defineAsyncComponent } from 'vue' |
|
||||
import { storeToRefs } from 'pinia' |
|
||||
import { useRouter } from 'vue-router' |
|
||||
import { useStore } from '@/store/root' |
|
||||
import { getBrandLikesNumber, setBrandLikesNumber } from '@/http/api' |
|
||||
import Dialog from '@/layouts/Dialog.vue' |
|
||||
import Button from '@/base/Button/Button.vue' |
|
||||
import EffectFade from '@/components/EffectFade/EffectFade.vue' |
|
||||
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|
||||
import Go from '@/base/Go/Go.vue' |
|
||||
import ThumbQRCode from '@/base/ThumbQRCode/ThumbQRCode.vue' |
|
||||
import Tabs from './children/tabs.vue' |
|
||||
import { useStatistics } from '@/composables/useStatistics' |
|
||||
const QRCode = defineAsyncComponent(() => import('@/components/QRCode/QRCode.vue')) |
|
||||
|
|
||||
const router = useRouter() |
|
||||
const store = useStore() |
|
||||
const { shop, config, showDetail, showSearch, showVoice } = storeToRefs(store) |
|
||||
|
|
||||
useStatistics('shop') |
|
||||
|
|
||||
const showLikeHeart = ref(false) |
|
||||
const likeNumber = ref(0) |
|
||||
getBrandLikesNumber(shop.value.shopId).then(({ data }) => { |
|
||||
likeNumber.value = data ?? 0 |
|
||||
}) |
|
||||
|
|
||||
function setLike() { |
|
||||
setBrandLikesNumber(shop.value.shopId).then(() => { |
|
||||
showLikeHeart.value = true |
|
||||
likeNumber.value++ |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
const showLineupQr = ref(false) |
|
||||
function handleLineupBtn() { |
|
||||
showLineupQr.value = true |
|
||||
} |
|
||||
|
|
||||
async function go() { |
|
||||
await router.push('/nav') |
|
||||
showDetail.value && store.SET_SHOW_DETAIL(false) |
|
||||
showSearch.value && store.SET_SHOW_SEARCH(false) |
|
||||
showVoice.value && store.SET_SHOW_VOICE(false) |
|
||||
} |
|
||||
|
|
||||
function back() { |
|
||||
store.SET_SHOW_DETAIL(false) |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.content { |
|
||||
position: absolute; |
|
||||
top: 350px; |
|
||||
left: 50%; |
|
||||
transform: translate3d(-50%, 0, 0); |
|
||||
z-index: 2; |
|
||||
&.active { |
|
||||
top: 100px; |
|
||||
} |
|
||||
&::before { |
|
||||
content: ''; |
|
||||
position: absolute; |
|
||||
top: 373px; |
|
||||
left: 0; |
|
||||
z-index: 2; |
|
||||
width: 700px; |
|
||||
height: 420px; |
|
||||
background: linear-gradient(180deg, #ffbd35 0%, #ffd260 100%); |
|
||||
border-radius: 12px; |
|
||||
} |
|
||||
.thumbs { |
|
||||
position: absolute; |
|
||||
top: 120px; |
|
||||
right: -156px; |
|
||||
} |
|
||||
|
|
||||
.detail-go { |
|
||||
bottom: -90px; |
|
||||
} |
|
||||
.left { |
|
||||
width: 700px; |
|
||||
.carousel { |
|
||||
position: relative; |
|
||||
width: 700px; |
|
||||
height: 393px; |
|
||||
background-color: #fff; |
|
||||
border-radius: 12px; |
|
||||
overflow: hidden; |
|
||||
.like-wrapper { |
|
||||
position: absolute; |
|
||||
left: 571px; |
|
||||
top: 32px; |
|
||||
height: 52px; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
padding: 0 14px; |
|
||||
background: rgba(0, 0, 0, 0.2); |
|
||||
border-radius: 54px; |
|
||||
|
|
||||
z-index: 1; |
|
||||
.like-num { |
|
||||
padding-left: 8px; |
|
||||
font-weight: 700; |
|
||||
font-size: 20px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: #ffffff; |
|
||||
} |
|
||||
} |
|
||||
:deep(.swiper) { |
|
||||
overflow: visible !important; |
|
||||
z-index: auto; |
|
||||
} |
|
||||
:deep(.swiper-pagination) { |
|
||||
right: 32px; |
|
||||
left: auto; |
|
||||
bottom: 5px; |
|
||||
width: auto; |
|
||||
} |
|
||||
:deep(.swiper-pagination-bullet) { |
|
||||
width: 16px !important; |
|
||||
height: 3px !important; |
|
||||
background: rgba(0, 0, 0, 0.1); |
|
||||
border-radius: 3px !important; |
|
||||
opacity: inherit !important; |
|
||||
&.swiper-pagination-bullet-active { |
|
||||
background: rgba(255, 255, 255, 1); |
|
||||
border-radius: 3px !important; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.banner-wrapper { |
|
||||
width: 700px; |
|
||||
height: 393px; |
|
||||
border-radius: 12px; |
|
||||
.banner { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
object-fit: cover; |
|
||||
border-radius: 12px; |
|
||||
} |
|
||||
} |
|
||||
.info-content { |
|
||||
position: relative; |
|
||||
display: flex; |
|
||||
align-items: stretch; |
|
||||
width: 700px; |
|
||||
height: 420px; |
|
||||
margin-top: -20px; |
|
||||
} |
|
||||
.shop-info { |
|
||||
position: relative; |
|
||||
z-index: 3; |
|
||||
width: 225px; |
|
||||
background: rgba(0, 0, 0, 0.02); |
|
||||
border-radius: 0px 0px 0px 12px; |
|
||||
padding-left: 32px; |
|
||||
.logo-wrapper { |
|
||||
width: 160px; |
|
||||
height: 160px; |
|
||||
background: #ffffff; |
|
||||
box-shadow: 0px 20px 30px rgba(221, 152, 55, 0.5); |
|
||||
border-radius: 16px; |
|
||||
padding: 20px; |
|
||||
margin-bottom: 32px; |
|
||||
margin-top: -51px; |
|
||||
.logo { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
object-fit: contain; |
|
||||
} |
|
||||
} |
|
||||
.group { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
margin-bottom: 18px; |
|
||||
.icon-box { |
|
||||
width: 36px; |
|
||||
height: 36px; |
|
||||
background: rgba(0, 0, 0, 0.05); |
|
||||
border-radius: 6px; |
|
||||
margin-right: 12px; |
|
||||
padding: 9px; |
|
||||
img { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
object-fit: contain; |
|
||||
} |
|
||||
} |
|
||||
.group-right { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
justify-content: center; |
|
||||
.tip-name { |
|
||||
font-size: 12px; |
|
||||
transform: scale(0.83); |
|
||||
color: rgba(0, 0, 0, 0.4); |
|
||||
padding-bottom: 6px; |
|
||||
} |
|
||||
.name { |
|
||||
font-weight: 700; |
|
||||
font-family: 'font_bold'; |
|
||||
font-size: 12px; |
|
||||
line-height: 14px; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.shop-intro { |
|
||||
position: relative; |
|
||||
z-index: 3; |
|
||||
flex: 1; |
|
||||
padding-top: 58px; |
|
||||
padding-left: 40px; |
|
||||
.shop-name { |
|
||||
font-weight: 700; |
|
||||
font-size: 32px; |
|
||||
line-height: 38px; |
|
||||
text-align: justify; |
|
||||
color: rgba(0, 0, 0, 0.8); |
|
||||
font-family: 'font_bold'; |
|
||||
padding-bottom: 40px; |
|
||||
} |
|
||||
.intro-scroll { |
|
||||
position: relative; |
|
||||
overflow: hidden; |
|
||||
height: 207px; |
|
||||
margin-right: 16px; |
|
||||
padding-right: 18px; |
|
||||
.intro { |
|
||||
font-size: 14px; |
|
||||
line-height: 200%; |
|
||||
text-align: justify; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
} |
|
||||
flex: 1; |
|
||||
overflow: hidden; |
|
||||
:deep(.bscroll-vertical-scrollbar) { |
|
||||
width: 6px !important; |
|
||||
background: rgba(0, 0, 0, 0.02) !important; |
|
||||
border-radius: 6px !important; |
|
||||
opacity: 1 !important; |
|
||||
height: 200px !important; |
|
||||
.bscroll-indicator { |
|
||||
height: 95px !important; |
|
||||
width: 6px !important; |
|
||||
background: rgba(0, 0, 0, 0.1) !important; |
|
||||
border-radius: 6px !important; |
|
||||
border: none !important; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.flex { |
|
||||
display: flex; |
|
||||
} |
|
||||
.align-center { |
|
||||
align-items: flex-end; |
|
||||
} |
|
||||
.lineup-wrapper { |
|
||||
display: flex; |
|
||||
align-items: flex-end; |
|
||||
margin-top: -20px; |
|
||||
padding: 79px 16px 16px 32px; |
|
||||
background: #ffffff; |
|
||||
border-radius: 12px; |
|
||||
.lineup-left { |
|
||||
flex: 1; |
|
||||
.title-tip { |
|
||||
font-weight: 700; |
|
||||
font-size: 14px; |
|
||||
font-family: 'font_bold'; |
|
||||
text-align: justify; |
|
||||
color: rgba(0, 0, 0, 0.4); |
|
||||
padding-bottom: 15px; |
|
||||
} |
|
||||
} |
|
||||
.lineup-scroll { |
|
||||
display: flex; |
|
||||
width: 310px; |
|
||||
overflow: hidden; |
|
||||
margin-right: 40px; |
|
||||
.lineup-content { |
|
||||
display: inline-block; |
|
||||
white-space: nowrap; |
|
||||
|
|
||||
.lineup-item { |
|
||||
display: flex; |
|
||||
align-items: flex-end; |
|
||||
margin-right: 24px; |
|
||||
} |
|
||||
.number { |
|
||||
font-weight: 700; |
|
||||
font-size: 24px; |
|
||||
line-height: 22px; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
font-family: 'font_bold'; |
|
||||
padding-right: 4px; |
|
||||
} |
|
||||
.line-up-text { |
|
||||
font-weight: 700; |
|
||||
font-size: 14px; |
|
||||
line-height: 16px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: rgba(0, 0, 0, 0.2); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.line { |
|
||||
width: 1px; |
|
||||
height: 20px; |
|
||||
background: rgba(0, 0, 0, 0.1); |
|
||||
margin-right: 40px; |
|
||||
} |
|
||||
.abs-money { |
|
||||
font-weight: 700; |
|
||||
font-family: 'font_bold'; |
|
||||
font-size: 24px; |
|
||||
text-align: right; |
|
||||
color: #f1b33e; |
|
||||
i { |
|
||||
font-size: 14px; |
|
||||
color: rgba(0, 0, 0, 0.2); |
|
||||
} |
|
||||
} |
|
||||
.lineup-btn { |
|
||||
background: linear-gradient(90deg, #f6a62c 0%, #ffbc3f 100%); |
|
||||
box-shadow: 0px 8px 20px rgba(221, 152, 55, 0.2); |
|
||||
border-radius: 24px; |
|
||||
width: 128px; |
|
||||
height: 37px; |
|
||||
font-weight: 700; |
|
||||
font-family: 'font_bold'; |
|
||||
font-size: 14px; |
|
||||
line-height: 37px; |
|
||||
text-align: center; |
|
||||
color: #fff; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.right { |
|
||||
width: 700px; |
|
||||
flex: 1; |
|
||||
margin-top: 40px; |
|
||||
} |
|
||||
.btn { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
right: -120px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,266 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<ScrollView class="activity-scroll" :class="{ active: tab.length === 1 }" scrollbar> |
|
||||
<div class="scroll-content"> |
|
||||
<h1 class="title">{{ $t('brandActivity') }}</h1> |
|
||||
<div class="activity-item" v-for="item of list" :key="item.activityId"> |
|
||||
<div class="img-wrapper"> |
|
||||
<img :src="config.sourceUrl + item.fileUrl" alt="" class="img" /> |
|
||||
</div> |
|
||||
<div class="flex-right"> |
|
||||
<div class="activity-title"> |
|
||||
<p class="name">{{ switchLanguage(item, 'activityName') }}</p> |
|
||||
<p class="look" @click="handleActivity(item)">{{ $t('lookActivity') }}</p> |
|
||||
</div> |
|
||||
<p class="activity-intro">{{ switchLanguage(item, 'activityContent') }}</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<h1 class="title">{{ $t('coupon') }}</h1> |
|
||||
<div class="coupon-item"> |
|
||||
<div class="coupon-left"> |
|
||||
<p class="money">¥<i>30</i></p> |
|
||||
<div class="coupon-info"> |
|
||||
<p class="coupon-name">30元代金券，满129可用</p> |
|
||||
<p class="coupon-time">使用时间：2021-01-01至2021-12-30</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="coupon-btn">{{ $t('get') }}</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</ScrollView> |
|
||||
<div class="activity-detail" v-if="showActivityDetail"> |
|
||||
<h1 class="activity-title">{{ switchLanguage(activity, 'activityName') }}</h1> |
|
||||
<ScrollView class="scroll" scrollbar> |
|
||||
<p class="scroll-content">{{ switchLanguage(activity, 'activityContent') }}</p> |
|
||||
</ScrollView> |
|
||||
<div class="common first">{{ $t('ActivityTime') }}：{{ activity.startDate }} {{ $t('zhi') + activity.endDate }}</div> |
|
||||
<div class="common">{{ $t('activityAddress') }}：{{ switchLanguage(activity, 'activityAddress') }}</div> |
|
||||
<div class="close-activity" @click="showActivityDetail = false"> |
|
||||
<img src="../../../assets/images/detail/yellow_close.png" alt="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { computed, ref } from 'vue' |
|
||||
import { storeToRefs } from 'pinia' |
|
||||
import { useStore } from '@/store/root' |
|
||||
|
|
||||
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|
||||
|
|
||||
defineProps({ |
|
||||
tab: Array |
|
||||
}) |
|
||||
|
|
||||
const store = useStore() |
|
||||
const { shop, config } = storeToRefs(store) |
|
||||
const list = computed(() => shop.value.activityList) |
|
||||
|
|
||||
const showActivityDetail = ref(false) |
|
||||
const activity = ref({}) |
|
||||
function handleActivity(item) { |
|
||||
activity.value = item |
|
||||
showActivityDetail.value = true |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.activity-scroll { |
|
||||
position: relative; |
|
||||
overflow: hidden; |
|
||||
height: 690px; |
|
||||
&.active { |
|
||||
height: 860px; |
|
||||
} |
|
||||
.title { |
|
||||
font-weight: 700; |
|
||||
font-family: 'font_bold'; |
|
||||
font-size: 24px; |
|
||||
margin-bottom: 24px; |
|
||||
color: rgba(0, 0, 0, 0.8); |
|
||||
} |
|
||||
.activity-item { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
width: 700px; |
|
||||
height: 106px; |
|
||||
background: rgba(255, 255, 255, 0.8); |
|
||||
border-radius: 12px; |
|
||||
margin-bottom: 16px; |
|
||||
padding-right: 16px; |
|
||||
padding-left: 6px; |
|
||||
&:last-of-type { |
|
||||
margin-bottom: 40px; |
|
||||
} |
|
||||
.img-wrapper { |
|
||||
width: 160px; |
|
||||
height: 90px; |
|
||||
border-radius: 8px; |
|
||||
overflow: hidden; |
|
||||
margin-right: 32px; |
|
||||
.img { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
object-fit: cover; |
|
||||
} |
|
||||
} |
|
||||
.flex-right { |
|
||||
flex: 1; |
|
||||
.activity-title { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: space-between; |
|
||||
padding-bottom: 8px; |
|
||||
.name { |
|
||||
font-weight: 700; |
|
||||
font-size: 20px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
} |
|
||||
.look { |
|
||||
font-weight: 400; |
|
||||
font-size: 14px; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
background: url('../../../assets/images/detail/arrow.svg') no-repeat right center; |
|
||||
background-size: 18px 18px; |
|
||||
padding-right: 26px; |
|
||||
} |
|
||||
} |
|
||||
.activity-intro { |
|
||||
font-weight: 400; |
|
||||
font-size: 14px; |
|
||||
line-height: 150%; |
|
||||
color: rgba(0, 0, 0, 0.4); |
|
||||
@include more-wrap; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.coupon-item { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: space-between; |
|
||||
padding: 0 24px 0 32px; |
|
||||
width: 700px; |
|
||||
height: 106px; |
|
||||
margin-bottom: 16px; |
|
||||
background: rgba(255, 255, 255, 0.8); |
|
||||
border-radius: 12px; |
|
||||
.coupon-left { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
} |
|
||||
.coupon-name { |
|
||||
font-weight: 700; |
|
||||
font-size: 18px; |
|
||||
line-height: 21px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
padding-bottom: 6px; |
|
||||
} |
|
||||
.coupon-time { |
|
||||
font-size: 14px; |
|
||||
color: rgba(0, 0, 0, 0.4); |
|
||||
} |
|
||||
.money { |
|
||||
font-weight: 700; |
|
||||
font-family: 'font_bold'; |
|
||||
font-size: 24px; |
|
||||
color: #f1b33e; |
|
||||
margin-right: 27px; |
|
||||
i { |
|
||||
font-size: 48px; |
|
||||
padding-left: 4px; |
|
||||
} |
|
||||
} |
|
||||
.coupon-btn { |
|
||||
width: 140px; |
|
||||
height: 48px; |
|
||||
text-align: center; |
|
||||
line-height: 48px; |
|
||||
background: linear-gradient(90deg, #f6a62c 0%, #ffbc3f 100%); |
|
||||
box-shadow: 0px 20px 30px rgba(221, 152, 55, 0.2); |
|
||||
border-radius: 160px; |
|
||||
color: #fff; |
|
||||
font-weight: 700; |
|
||||
font-family: 'font_bold'; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.activity-detail { |
|
||||
position: absolute; |
|
||||
width: 832px; |
|
||||
min-height: 396px; |
|
||||
top: 50%; |
|
||||
left: 50%; |
|
||||
transform: translate3d(-50%, -50%, 0); |
|
||||
background: #ffffff; |
|
||||
box-shadow: 0px 40px 60px rgba(0, 0, 0, 0.08); |
|
||||
border-radius: 12px; |
|
||||
z-index: 10; |
|
||||
padding-top: 48px; |
|
||||
padding-left: 56px; |
|
||||
.activity-title { |
|
||||
font-weight: 700; |
|
||||
font-size: 24px; |
|
||||
line-height: 28px; |
|
||||
text-align: justify; |
|
||||
font-family: 'font_bold'; |
|
||||
color: rgba(0, 0, 0, 0.8); |
|
||||
margin-bottom: 32px; |
|
||||
} |
|
||||
.scroll { |
|
||||
position: relative; |
|
||||
height: 155px; |
|
||||
overflow: hidden; |
|
||||
margin-right: 34px; |
|
||||
padding-right: 16px; |
|
||||
:deep(.bscroll-vertical-scrollbar) { |
|
||||
width: 6px !important; |
|
||||
background: rgba(0, 0, 0, 0.02) !important; |
|
||||
border-radius: 6px !important; |
|
||||
opacity: 1 !important; |
|
||||
.bscroll-indicator { |
|
||||
width: 6px !important; |
|
||||
background: rgba(0, 0, 0, 0.1) !important; |
|
||||
border-radius: 6px !important; |
|
||||
border: none !important; |
|
||||
} |
|
||||
} |
|
||||
.scroll-content { |
|
||||
font-size: 14px; |
|
||||
line-height: 200%; |
|
||||
text-align: justify; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
} |
|
||||
} |
|
||||
.common { |
|
||||
font-weight: 700; |
|
||||
font-size: 14px; |
|
||||
line-height: 16px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
&.first { |
|
||||
margin-bottom: 12px; |
|
||||
padding-top: 49px; |
|
||||
} |
|
||||
} |
|
||||
.close-activity { |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
position: absolute; |
|
||||
top: 12px; |
|
||||
right: 12px; |
|
||||
width: 56px; |
|
||||
height: 56px; |
|
||||
background: rgba(0, 0, 0, 0.02); |
|
||||
border-radius: 12px; |
|
||||
img { |
|
||||
width: 56px; |
|
||||
height: 56px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,123 +0,0 @@ |
|||||
<template> |
|
||||
<div class="wrapper"> |
|
||||
<h1 class="title">{{ $t('comment') }}</h1> |
|
||||
<div class="score-wrapper"> |
|
||||
<div class="score-num">{{ score }}</div> |
|
||||
<div class="star"> |
|
||||
<div class="star-num"> |
|
||||
<img |
|
||||
:src="item === 0 ? require('@/assets/images/detail/star_active.svg') : require('@/assets/images/detail/star.svg')" |
|
||||
v-for="item of starList()" |
|
||||
:key="item" |
|
||||
alt="" |
|
||||
class="star-icon" |
|
||||
/> |
|
||||
</div> |
|
||||
<div class="total-comment">{{ totalComment }} {{ $t('totalComment') }}</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<ScrollView class="scroll" :list="commentList" scrollbar> |
|
||||
<ul class="comments"> |
|
||||
<li class="comments-item" v-for="item of commentList" :key="item.tag_count"> |
|
||||
<span class="txt"> |
|
||||
{{ item.tag_content }} |
|
||||
<span>{{ item.tag_count }}</span> |
|
||||
</span> |
|
||||
</li> |
|
||||
</ul> |
|
||||
</ScrollView> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { ref, computed } from 'vue' |
|
||||
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|
||||
|
|
||||
const comment = ref({ |
|
||||
comment_info: { |
|
||||
avg_score: '2.912871287128713', |
|
||||
comment_tag_list: { |
|
||||
comment_tag: [ |
|
||||
{ |
|
||||
emotion: 1, |
|
||||
tag_content: '服务周到', |
|
||||
tag_count: 6 |
|
||||
} |
|
||||
] |
|
||||
}, |
|
||||
image_count: 34, |
|
||||
total_comments: 505 |
|
||||
}, |
|
||||
has_more: false, |
|
||||
page_size: 20 |
|
||||
}) |
|
||||
|
|
||||
const commentList = computed(() => comment.value?.comment_info?.comment_tag_list?.comment_tag ?? []) |
|
||||
const score = computed(() => Math.floor(comment.value?.comment_info?.avg_score) ?? 0) |
|
||||
const totalComment = computed(() => comment.value?.comment_info?.total_comments ?? 0) |
|
||||
|
|
||||
function starList() { |
|
||||
return new Array(5).fill(0, 0, score.value).fill(1, score.value) |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.title { |
|
||||
font-weight: 700; |
|
||||
font-family: 'font_bold'; |
|
||||
font-size: 24px; |
|
||||
color: rgba(0, 0, 0, 0.8); |
|
||||
margin-bottom: 24px; |
|
||||
} |
|
||||
.scroll { |
|
||||
position: relative; |
|
||||
height: 618px; |
|
||||
overflow: hidden; |
|
||||
.comments { |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
.comments-item { |
|
||||
height: 43px; |
|
||||
background: #ffffff; |
|
||||
border-radius: 8px; |
|
||||
flex-shrink: 0; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
height: 40px; |
|
||||
padding: 0 24px; |
|
||||
margin: 0 16px 16px 0; |
|
||||
span { |
|
||||
font-size: 16px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
font-weight: 700; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.star-num { |
|
||||
margin-bottom: 4px; |
|
||||
} |
|
||||
.star-icon { |
|
||||
width: 20px; |
|
||||
height: 20px; |
|
||||
margin-right: 8px; |
|
||||
} |
|
||||
.score-wrapper { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
margin-bottom: 25px; |
|
||||
.score-num { |
|
||||
font-weight: 700; |
|
||||
font-family: 'font_bold'; |
|
||||
font-size: 48px; |
|
||||
color: #f1b33e; |
|
||||
margin-right: 19px; |
|
||||
} |
|
||||
.total-comment { |
|
||||
font-size: 14px; |
|
||||
color: rgba(0, 0, 0, 0.4); |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,155 +0,0 @@ |
|||||
<template> |
|
||||
<div class="wrapper"> |
|
||||
<h1 class="title">{{ $t('goods') }}</h1> |
|
||||
<ScrollView class="scroll" :list="goodsList"> |
|
||||
<ul class="goods"> |
|
||||
<li class="goods-item" v-for="item of goodsList" :key="item.item_name"> |
|
||||
<div class="cover"> |
|
||||
<img :src="item.item_cover" alt="" class="goods-img" /> |
|
||||
</div> |
|
||||
<div class="goods-right"> |
|
||||
<h1 class="goods-title">{{ item.item_name }}</h1> |
|
||||
<h1 class="goods-sub">{{ item.sub_title }}</h1> |
|
||||
<h1 class="price"> |
|
||||
<span class="sell"> |
|
||||
¥<i>{{ item.sell_price }}</i> |
|
||||
</span> |
|
||||
<span class="original"> |
|
||||
¥<i>{{ item.original_price }}</i> |
|
||||
</span> |
|
||||
</h1> |
|
||||
</div> |
|
||||
<div class="button" @click="handleGoods(item)">{{ $t('buy') }}</div> |
|
||||
</li> |
|
||||
</ul> |
|
||||
</ScrollView> |
|
||||
<QRCode v-if="showCodeRef" :url="goodsRef.item_detail_url" :title="$t('scanBuy')" @click="show(false)" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { ref, defineAsyncComponent } from 'vue' |
|
||||
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|
||||
|
|
||||
const QRCode = defineAsyncComponent(() => import('@/base/QRCode/QRCode.vue')) |
|
||||
|
|
||||
const goodsList = ref([ |
|
||||
{ |
|
||||
item_store: { store_name: '大紧特紧测试门店' }, |
|
||||
item_detail_url: |
|
||||
'alipays://platformapi/startapp?appId=77700272&startMultApp=YES&query=itemId%3D613552052869%26channel%3DALL%26cityId%3D330100%26storeId%3D230021002%26sourceFrom%3DITEM_DETAIL_BASE_INFO&url=%2Findex.html%23pages%2Findex%2Findex&chInfo=ch_tribeopen__chsub_yinli', |
|
||||
item_cover: 'https://wx1.sinaimg.cn/orj360/004j2Ftyly1gt4lt4kltaj60u01c6n8r02.jpg', |
|
||||
item_name: '这是商品的名称', |
|
||||
sub_title: '正文介绍正文介绍正文介绍正文介绍正文介绍正文介绍正文介绍正文介绍正文介绍正文介绍正文介绍正文介绍', |
|
||||
sell_price: '333', |
|
||||
original_price: '11111' |
|
||||
} |
|
||||
]) |
|
||||
|
|
||||
const showCodeRef = ref(false) |
|
||||
const goodsRef = ref({}) |
|
||||
function handleGoods(item) { |
|
||||
goodsRef.value = item |
|
||||
showCodeRef.value = true |
|
||||
} |
|
||||
function show(flag) { |
|
||||
showCodeRef.value = flag |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.title { |
|
||||
font-weight: 700; |
|
||||
font-family: 'font_bold'; |
|
||||
font-size: 24px; |
|
||||
color: rgba(0, 0, 0, 0.8); |
|
||||
margin-bottom: 24px; |
|
||||
} |
|
||||
.scroll { |
|
||||
position: relative; |
|
||||
overflow: hidden; |
|
||||
height: 690px; |
|
||||
} |
|
||||
.goods { |
|
||||
padding-bottom: 8px; |
|
||||
} |
|
||||
.goods-item { |
|
||||
width: 700px; |
|
||||
height: 156px; |
|
||||
background: rgba(255, 255, 255, 0.8); |
|
||||
border-radius: 12px; |
|
||||
position: relative; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
margin-bottom: 16px; |
|
||||
padding: 0 24px 0 8px; |
|
||||
.cover { |
|
||||
flex-shrink: 0; |
|
||||
width: 136px; |
|
||||
height: 136px; |
|
||||
margin-right: 24px; |
|
||||
margin-right: 32px; |
|
||||
border-radius: 8px; |
|
||||
overflow: hidden; |
|
||||
|
|
||||
.goods-img { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
object-fit: cover; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.goods-title { |
|
||||
font-family: 'font_bold'; |
|
||||
font-weight: 700; |
|
||||
font-size: 20px; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
padding-bottom: 8px; |
|
||||
} |
|
||||
.goods-sub { |
|
||||
font-size: 14px; |
|
||||
line-height: 150%; |
|
||||
color: rgba(0, 0, 0, 0.4); |
|
||||
margin-bottom: 10px; |
|
||||
@include more-wrap; |
|
||||
} |
|
||||
.price { |
|
||||
display: flex; |
|
||||
align-items: baseline; |
|
||||
.sell { |
|
||||
display: flex; |
|
||||
align-items: baseline; |
|
||||
font-weight: 700; |
|
||||
font-family: 'font_bold'; |
|
||||
font-size: 16px; |
|
||||
color: #f1b33e; |
|
||||
padding-right: 10px; |
|
||||
i { |
|
||||
font-size: 32px; |
|
||||
} |
|
||||
} |
|
||||
.original { |
|
||||
font-weight: 400; |
|
||||
font-size: 18px; |
|
||||
text-decoration: line-through; |
|
||||
color: rgba(0, 0, 0, 0.2); |
|
||||
} |
|
||||
} |
|
||||
.button { |
|
||||
position: absolute; |
|
||||
bottom: 16px; |
|
||||
right: 24px; |
|
||||
width: 140px; |
|
||||
height: 48px; |
|
||||
text-align: center; |
|
||||
line-height: 48px; |
|
||||
background: linear-gradient(90deg, #f6a62c 0%, #ffbc3f 100%); |
|
||||
box-shadow: 0px 20px 30px rgba(221, 152, 55, 0.2); |
|
||||
border-radius: 150px; |
|
||||
font-weight: 700; |
|
||||
font-size: 14px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: #ffffff; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,119 +0,0 @@ |
|||||
<template> |
|
||||
<div class="wrapper"> |
|
||||
<h1 class="title">{{ $t('serviceInfo') }}</h1> |
|
||||
<h2 class="time">{{ businessTime }}</h2> |
|
||||
|
|
||||
<h1 class="title">营业信息</h1> |
|
||||
|
|
||||
<div class="info-group"> |
|
||||
<div class="info-list" v-for="(item, index) of serviceList" :key="index"> |
|
||||
<p class="info">{{ item }}</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { ref, computed } from 'vue' |
|
||||
|
|
||||
const info = ref({ |
|
||||
service_info: { |
|
||||
service_desc: '有停车位 有WIFI 有包厢 无烟区', |
|
||||
service_tag_list: ['有停车位', 'sadf', '有停车位', 'sadf', '有停车位', 'sadf', 'sadf', 'sadddddf', 'sadf阿斯蒂芬', 'sa顶顶顶df', 'sadf'] |
|
||||
}, |
|
||||
store_album: { |
|
||||
picture_list: { |
|
||||
picture: [ |
|
||||
{ |
|
||||
picture_name: '门店内景', |
|
||||
picture_url: 'https://img.alicdn.com/i4/2200788639881/O1CN01T3Urj72MrYBKTXquz_!!2200788639881-0-koubei.jpg', |
|
||||
sequence: -1 |
|
||||
}, |
|
||||
{ |
|
||||
picture_name: '门店内景', |
|
||||
picture_url: 'https://img.alicdn.com/i1/2200788639881/O1CN01xyp6q72MrYBGxRpS6_!!2200788639881-0-koubei.jpg', |
|
||||
sequence: -1 |
|
||||
}, |
|
||||
{ |
|
||||
picture_name: '门店内景', |
|
||||
picture_url: 'https://img.alicdn.com/i4/2200788639881/O1CN01T3Urj72MrYBKTXquz_!!2200788639881-0-koubei.jpg', |
|
||||
sequence: -1 |
|
||||
}, |
|
||||
{ |
|
||||
picture_name: '门店内景', |
|
||||
picture_url: 'https://img.alicdn.com/i2/2200788639881/O1CN01WKCpfo2MrYBLru6At_!!2200788639881-0-koubei.jpg', |
|
||||
sequence: -1 |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
}, |
|
||||
store_dto: { |
|
||||
billboard: '江宁区米粉米线热销榜第2名', |
|
||||
brand_name: '阿香米线', |
|
||||
business_time: '周一-周日 10:00-21:30', |
|
||||
category_name: '美食,快餐小吃,米粉/米线', |
|
||||
comment_score: '3.4444444444444446', |
|
||||
comment_total_count: '9', |
|
||||
contact_info: '18117095769', |
|
||||
district_info: { |
|
||||
address: '浦珠北路1号万象汇商业广场B1层Y103号商铺', |
|
||||
city_code: '320100', |
|
||||
city_name: '南京市', |
|
||||
district_code: '320111', |
|
||||
district_name: '浦口区', |
|
||||
latitude: '32.125232', |
|
||||
longitude: '118.730226', |
|
||||
province_code: '320000', |
|
||||
province_name: '江苏省' |
|
||||
}, |
|
||||
mall_id: '20210207880000000000000009900410', |
|
||||
score: '2.9', |
|
||||
store_detail_url: |
|
||||
'alipays://platformapi/startapp?appId=2021002144672445&supportTourist=true&startMultApp=YES&query=chInfo%3Dch_tribeopen__chsub_1000mu%26sourceFrom%3DTRIBE_OPEN_SHOP', |
|
||||
store_id: '573127418', |
|
||||
store_logo: 'https://img.alicdn.com/i4/2200788639881/O1CN01T3Urj72MrYBKTXquz_!!2200788639881-0-koubei.jpg', |
|
||||
store_name: '阿香米线(南京桥北万象汇餐厅)' |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
const businessTime = computed(() => info.value?.store_dto?.business_time ?? '') |
|
||||
const serviceList = computed(() => info.value?.service_info?.service_tag_list ?? []) |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.title { |
|
||||
font-weight: 700; |
|
||||
font-family: 'font_bold'; |
|
||||
font-size: 24px; |
|
||||
color: rgba(0, 0, 0, 0.8); |
|
||||
margin-bottom: 24px; |
|
||||
} |
|
||||
.time { |
|
||||
font-size: 14px; |
|
||||
line-height: 150%; |
|
||||
color: rgba(0, 0, 0, 0.4); |
|
||||
margin-bottom: 26px; |
|
||||
} |
|
||||
|
|
||||
.info-group { |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
.info-list { |
|
||||
padding: 0 24px; |
|
||||
text-align: center; |
|
||||
line-height: 43px; |
|
||||
height: 43px; |
|
||||
background: #ffffff; |
|
||||
border-radius: 8px; |
|
||||
margin-right: 16px; |
|
||||
margin-bottom: 16px; |
|
||||
|
|
||||
.info { |
|
||||
font-weight: 700; |
|
||||
font-size: 16px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,75 +0,0 @@ |
|||||
<template> |
|
||||
<div class="wrapper"> |
|
||||
<h1 class="title">{{ $t('recommend') }}</h1> |
|
||||
<ScrollView class="scroll" :list="recommendList"> |
|
||||
<ul class="recommends"> |
|
||||
<li class="recommend-item" v-for="item of recommendList" :key="item.good_detail_name"> |
|
||||
<div class="pic-wrapper"> |
|
||||
<img class="pic" :src="item?.picture?.picture_url" alt="" /> |
|
||||
</div> |
|
||||
<span class="txt">{{ item.good_detail_name }}</span> |
|
||||
</li> |
|
||||
</ul> |
|
||||
</ScrollView> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|
||||
import { ref } from 'vue' |
|
||||
|
|
||||
const recommendList = ref([ |
|
||||
{ |
|
||||
good_detail_name: '测试推荐菜', |
|
||||
picture: { |
|
||||
picture_url: 'https://img0.baidu.com/it/u=2284782435,2170248613&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1657299600&t=624c0227aa15519b1309ace7f41184ec' |
|
||||
} |
|
||||
} |
|
||||
]) |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.title { |
|
||||
font-weight: 700; |
|
||||
font-family: 'font_bold'; |
|
||||
font-size: 24px; |
|
||||
color: rgba(0, 0, 0, 0.8); |
|
||||
margin-bottom: 24px; |
|
||||
} |
|
||||
.scroll { |
|
||||
position: relative; |
|
||||
overflow: hidden; |
|
||||
height: 690px; |
|
||||
.recommends { |
|
||||
display: grid; |
|
||||
grid-template-columns: repeat(3, 220px); |
|
||||
flex-wrap: wrap; |
|
||||
gap: 24px 19px; |
|
||||
padding-bottom: 24px; |
|
||||
.recommend-item { |
|
||||
height: 162px; |
|
||||
background: rgba(255, 255, 255, 0.4); |
|
||||
border-radius: 8px; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
.pic-wrapper { |
|
||||
width: 220px; |
|
||||
height: 124px; |
|
||||
margin-bottom: 12px; |
|
||||
.pic { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
object-fit: cover; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.txt { |
|
||||
font-weight: 700; |
|
||||
font-size: 12px; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
padding-left: 12px; |
|
||||
font-family: 'font_bold'; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,132 +0,0 @@ |
|||||
<template> |
|
||||
<div class="tabs-wrapper" v-if="menuList.tabList.length > 1"> |
|
||||
<div |
|
||||
class="tab" |
|
||||
:ref="el => tabsEl.push(el)" |
|
||||
:class="{ active: index === tabIdx }" |
|
||||
@click="handleTab(index)" |
|
||||
v-for="(item, index) of menuList.tabList" |
|
||||
:key="item.name" |
|
||||
> |
|
||||
{{ switchLanguage(item, 'name') }} |
|
||||
</div> |
|
||||
</div> |
|
||||
<component :tab="menuList.tabList" :is="currentComp"></component> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { storeToRefs } from 'pinia' |
|
||||
import { useStore } from '@/store/root' |
|
||||
import { ref, defineAsyncComponent, computed } from 'vue' |
|
||||
|
|
||||
const Activity = defineAsyncComponent(() => import('./Activity.vue')) |
|
||||
const Goods = defineAsyncComponent(() => import('./Goods.vue')) |
|
||||
const Comment = defineAsyncComponent(() => import('./Comment.vue')) |
|
||||
const Info = defineAsyncComponent(() => import('./Info.vue')) |
|
||||
const Recommend = defineAsyncComponent(() => import('./Recommend.vue')) |
|
||||
|
|
||||
const tabList = [ |
|
||||
{ |
|
||||
name: '品牌活动', |
|
||||
nameEn: 'Activity' |
|
||||
}, |
|
||||
{ |
|
||||
name: '商品', |
|
||||
nameEn: 'goods' |
|
||||
}, |
|
||||
{ |
|
||||
name: '评价', |
|
||||
nameEn: 'comments' |
|
||||
}, |
|
||||
{ |
|
||||
name: '信息', |
|
||||
nameEn: 'infomation' |
|
||||
}, |
|
||||
{ |
|
||||
name: '推荐菜', |
|
||||
nameEn: 'recommend' |
|
||||
} |
|
||||
] |
|
||||
const tabIdx = ref(0) |
|
||||
function handleTab(index) { |
|
||||
tabIdx.value = index |
|
||||
moveTo(index) |
|
||||
} |
|
||||
|
|
||||
const PADDING_LEFT = 6 |
|
||||
const tabsEl = ref([]) |
|
||||
const distance = ref(0) |
|
||||
|
|
||||
function moveTo(index) { |
|
||||
distance.value = tabsEl.value[index].offsetLeft - PADDING_LEFT + 'px' |
|
||||
} |
|
||||
|
|
||||
const store = useStore() |
|
||||
const { shop } = storeToRefs(store) |
|
||||
|
|
||||
const _dynamicCompList = [Activity, Goods, Comment, Info, Recommend] |
|
||||
const menuList = computed(() => { |
|
||||
if (shop.value.activityList.length && shop.value.thirdKouCode) { |
|
||||
return { tabList, dynamicCompList: _dynamicCompList } |
|
||||
} |
|
||||
|
|
||||
if (shop.value.activityList.length && !shop.value.thirdKouCode) { |
|
||||
return { tabList: tabList.slice(0, 1), dynamicCompList: _dynamicCompList.slice(0, 1) } |
|
||||
} |
|
||||
|
|
||||
if (!shop.value.activityList.length && shop.value.thirdKouCode) { |
|
||||
return { tabList: tabList.slice(1), dynamicCompList: _dynamicCompList.slice(1) } |
|
||||
} |
|
||||
|
|
||||
//无活动和无thirdKouCode |
|
||||
return { tabList: [], dynamicCompList: [] } |
|
||||
}) |
|
||||
const currentComp = computed(() => menuList.value.dynamicCompList[tabIdx.value]) |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.tabs-wrapper { |
|
||||
position: relative; |
|
||||
display: flex; |
|
||||
height: 80px; |
|
||||
padding: 6px; |
|
||||
background: rgba(0, 0, 0, 0.05); |
|
||||
border-radius: 12px; |
|
||||
margin-bottom: 40px; |
|
||||
&::before { |
|
||||
position: absolute; |
|
||||
content: ''; |
|
||||
top: 6px; |
|
||||
left: 6px; |
|
||||
background: #ffffff; |
|
||||
box-shadow: inset 0px -4px 0px rgba(177, 189, 220, 0.1); |
|
||||
border-radius: 8px; |
|
||||
width: 128px; |
|
||||
height: 68px; |
|
||||
z-index: 0; |
|
||||
transition: all 0.5s; |
|
||||
transform: translate3d(v-bind(distance), 0, 0); |
|
||||
} |
|
||||
.tab { |
|
||||
position: relative; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
width: 128px; |
|
||||
height: 68px; |
|
||||
font-weight: 700; |
|
||||
font-family: 'font_bold'; |
|
||||
font-size: 18px; |
|
||||
color: rgba(0, 0, 0, 0.4); |
|
||||
margin-right: 12px; |
|
||||
z-index: 1; |
|
||||
transition: color 0.5s; |
|
||||
&:last-child { |
|
||||
margin-right: 0; |
|
||||
} |
|
||||
&.active { |
|
||||
color: rgba(0, 0, 0, 0.8); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,104 +0,0 @@ |
|||||
<template> |
|
||||
<div class="brand-recommend"> |
|
||||
<p class="title">热门推荐</p> |
|
||||
<ScrollView :list="list" scroll-x class="content"> |
|
||||
<div class="recommend-content"> |
|
||||
<div class="group-item" @click="handleShop(item)" v-for="item of list" :key="item.shopId"> |
|
||||
<div class="logo-wrapper"> |
|
||||
<img loading="lazy" :src="config.sourceUrl + item.materialList?.[0]" alt="" class="shop-logo" /> |
|
||||
</div> |
|
||||
<p class="name"> |
|
||||
<span class="shop-name">{{ switchLanguage(item, 'shopName') }}</span> |
|
||||
<span class="name-right"><img :src="config.sourceUrl + item.industryUrl" class="format-icon" alt="" />{{ item.floor }}</span> |
|
||||
</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</ScrollView> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|
||||
|
|
||||
defineProps({ |
|
||||
list: Array, |
|
||||
config: Object |
|
||||
}) |
|
||||
const emits = defineEmits(['click']) |
|
||||
|
|
||||
function handleShop(item) { |
|
||||
emits('click', item) |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.brand-recommend { |
|
||||
margin-left: 170px; |
|
||||
|
|
||||
.title { |
|
||||
font-weight: 700; |
|
||||
font-size: 24px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: rgba(0, 0, 0, 0.8); |
|
||||
padding-bottom: 12px; |
|
||||
} |
|
||||
.content { |
|
||||
width: 910px; |
|
||||
overflow: hidden; |
|
||||
margin-bottom: 40px; |
|
||||
} |
|
||||
.recommend-content { |
|
||||
display: inline-block; |
|
||||
white-space: nowrap; |
|
||||
padding-top: 32px; |
|
||||
height: 255px; |
|
||||
} |
|
||||
.group-item { |
|
||||
display: inline-block; |
|
||||
width: 320px; |
|
||||
height: 220px; |
|
||||
background: rgba(255, 255, 255, 0.4); |
|
||||
border-radius: 8px; |
|
||||
overflow: hidden; |
|
||||
margin-right: 16px; |
|
||||
} |
|
||||
.logo-wrapper { |
|
||||
width: 320px; |
|
||||
height: 180px; |
|
||||
background-color: #fff; |
|
||||
} |
|
||||
.shop-logo { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
border-radius: 8px; |
|
||||
object-fit: cover; |
|
||||
} |
|
||||
.name { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: space-between; |
|
||||
padding: 13px 12px; |
|
||||
} |
|
||||
.shop-name { |
|
||||
font-weight: 700; |
|
||||
font-size: 12px; |
|
||||
line-height: 14px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
} |
|
||||
.name-right { |
|
||||
font-weight: 700; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
font-size: 12px; |
|
||||
line-height: 14px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: rgba(0, 0, 0, 0.4); |
|
||||
} |
|
||||
.format-icon { |
|
||||
width: 14px; |
|
||||
height: 14px; |
|
||||
margin-right: 8px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,204 +0,0 @@ |
|||||
<template> |
|
||||
<ScrollView class="business-scroll"> |
|
||||
<div class="business-content"> |
|
||||
<div class="three-wrapper" :class="{ active: cardIdx === index }" v-for="(item, index) of 10" :key="item"> |
|
||||
<div class="front"> |
|
||||
<div class="title"> |
|
||||
<p class="title-left">巴黎贝甜</p> |
|
||||
<p class="title-right">¥<i>30</i></p> |
|
||||
</div> |
|
||||
<p class="sub-title">30元代金券，满129可用</p> |
|
||||
<ScrollView class="intro-scroll" scrollbar> |
|
||||
<p class="intro"> |
|
||||
欧时力(香港)集团全权代理意大利品牌欧时力(OCHIRLY)，并组建欧时力(中国)有限公司，全权负责OCHIRLY在大中华区的品牌经营。欧时力自1999年进入中国市场以来，欧时力以前所未有的速度在中国市场发展壮大。在短短的两、三年间，迅速于中国60多个一、二类主要消费城市的160余家加盟店以及专柜年销售额达到2.5亿。销售业绩评效均名列前茅，整体业绩不断上扬！在女装市场享有一定的知名度和美誉度。欧时力(香港)集团全权代理意大利品牌欧时力(OCHIRLY)，并组建欧时力(中国)有限公司，全权负责OCHIRLY在大中华区的品牌经营。欧时力自1999年进入中国市场以来，欧时力以前所未有的速度在中国市场发展壮大。在短短的两、三年间，迅速于中国60多个一、二类主要消费城市的160余家加盟店以及专柜年销售额达到2.5亿在短短的两、三年间，迅速于中国60多个一、二类主要消费城市的160余家加盟店以及专柜年销售额达到2.5亿在短短的两、三年间，迅速于中 |
|
||||
</p> |
|
||||
</ScrollView> |
|
||||
<p class="time first">领取时间：2021-01-01</p> |
|
||||
<p class="time">使用时间：2021-01-01至2021-12-30</p> |
|
||||
<div class="btn" @click="handleCard(item, index)">立即领取</div> |
|
||||
</div> |
|
||||
<div class="back"> |
|
||||
<div class="code"> |
|
||||
<img src="" alt="" class="code-img" /> |
|
||||
<div class="text">微信扫一扫</div> |
|
||||
</div> |
|
||||
<div class="btn" @click="cardIdx = -1">返回</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</ScrollView> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { ref } from 'vue' |
|
||||
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|
||||
|
|
||||
const cardIdx = ref(-1) |
|
||||
function handleCard(item, index) { |
|
||||
cardIdx.value = index |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.business-scroll { |
|
||||
position: relative; |
|
||||
margin-left: 170px; |
|
||||
overflow: hidden; |
|
||||
margin-top: 58px; |
|
||||
height: 1560px; |
|
||||
.business-content { |
|
||||
display: grid; |
|
||||
grid-template-columns: repeat(2, 420px); |
|
||||
gap: 56px 30px; |
|
||||
} |
|
||||
|
|
||||
.three-wrapper { |
|
||||
display: inline-block; |
|
||||
width: 420px; |
|
||||
height: 528px; |
|
||||
position: relative; |
|
||||
transform-style: preserve-3d; |
|
||||
transform: perspective(800px); |
|
||||
transition: all 0.5s; |
|
||||
transform-origin: center; |
|
||||
margin-right: 25px; |
|
||||
|
|
||||
&.active { |
|
||||
transform: rotateY(-180deg); |
|
||||
} |
|
||||
} |
|
||||
.front, |
|
||||
.back { |
|
||||
width: 420px; |
|
||||
height: 528px; |
|
||||
backface-visibility: hidden; |
|
||||
background: url('../../assets/images/member/line.png') no-repeat center 445px rgba(255, 255, 255, 0.8); |
|
||||
background-size: 497px 1px; |
|
||||
overflow: hidden; |
|
||||
border-radius: 12px; |
|
||||
.btn { |
|
||||
height: 83px; |
|
||||
line-height: 83px; |
|
||||
font-weight: 700; |
|
||||
font-size: 20px; |
|
||||
font-family: 'font_bold'; |
|
||||
text-align: center; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
} |
|
||||
&::before, |
|
||||
&::after { |
|
||||
content: ''; |
|
||||
position: absolute; |
|
||||
width: 18px; |
|
||||
height: 18px; |
|
||||
background: #f7f7f9; |
|
||||
bottom: 75px; |
|
||||
border-radius: 50%; |
|
||||
} |
|
||||
&::before { |
|
||||
left: -9px; |
|
||||
} |
|
||||
&::after { |
|
||||
right: -9px; |
|
||||
} |
|
||||
} |
|
||||
.front { |
|
||||
position: relative; |
|
||||
.title { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
color: #f1b33e; |
|
||||
align-items: baseline; |
|
||||
padding: 32px 56px 25px 56px; |
|
||||
|
|
||||
.title-left { |
|
||||
font-weight: 700; |
|
||||
font-size: 20px; |
|
||||
font-family: 'font_bold'; |
|
||||
} |
|
||||
.title-right { |
|
||||
font-size: 24px; |
|
||||
font-weight: 700; |
|
||||
font-family: 'font_bold'; |
|
||||
i { |
|
||||
font-size: 48px; |
|
||||
font-weight: 700; |
|
||||
padding-left: 6px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.sub-title { |
|
||||
font-weight: 700; |
|
||||
font-size: 24px; |
|
||||
color: rgba(0, 0, 0, 0.8); |
|
||||
margin-bottom: 40px; |
|
||||
font-family: 'font_bold'; |
|
||||
margin-left: 56px; |
|
||||
} |
|
||||
.intro-scroll { |
|
||||
height: 152px; |
|
||||
overflow: hidden; |
|
||||
position: relative; |
|
||||
margin-bottom: 45px; |
|
||||
margin-right: 34px; |
|
||||
padding-right: 16px; |
|
||||
margin-left: 56px; |
|
||||
|
|
||||
.intro { |
|
||||
font-size: 14px; |
|
||||
line-height: 200%; |
|
||||
text-align: justify; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
white-space: normal; |
|
||||
} |
|
||||
:deep(.bscroll-vertical-scrollbar) { |
|
||||
width: 6px !important; |
|
||||
background: rgba(0, 0, 0, 0.02) !important; |
|
||||
border-radius: 6px !important; |
|
||||
opacity: 1 !important; |
|
||||
.bscroll-indicator { |
|
||||
width: 6px !important; |
|
||||
background: rgba(0, 0, 0, 0.1) !important; |
|
||||
border-radius: 6px !important; |
|
||||
border: none !important; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.time { |
|
||||
font-size: 14px; |
|
||||
color: rgba(0, 0, 0, 0.4); |
|
||||
margin-left: 56px; |
|
||||
margin-bottom: 41px; |
|
||||
|
|
||||
&.first { |
|
||||
margin-bottom: 9px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.back { |
|
||||
position: absolute; |
|
||||
left: 0; |
|
||||
top: 0; |
|
||||
transform: rotateY(-180deg); |
|
||||
.code { |
|
||||
height: 445px; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
.code-img { |
|
||||
width: 150px; |
|
||||
height: 150px; |
|
||||
} |
|
||||
.text { |
|
||||
font-weight: 700; |
|
||||
font-size: 20px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: rgba(0, 0, 0, 0.8); |
|
||||
padding-top: 47px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,154 +0,0 @@ |
|||||
<template> |
|
||||
<Dialog @close="close"> |
|
||||
<div class="content"> |
|
||||
<div class="info"> |
|
||||
<div class="group"> |
|
||||
<p class="text">车牌号</p> |
|
||||
<p class="text-bold">沪AB66688</p> |
|
||||
</div> |
|
||||
<div class="group"> |
|
||||
<p class="text">车位号</p> |
|
||||
<p class="text-bold">E-123</p> |
|
||||
</div> |
|
||||
<div class="group"> |
|
||||
<p class="text">停车时长</p> |
|
||||
<p class="text-bold">2<i>小时</i>30<i>分钟</i></p> |
|
||||
</div> |
|
||||
<div class="last"> |
|
||||
<p class="text">费用</p> |
|
||||
<p class="text-bold">¥<i>2</i></p> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="right"> |
|
||||
<div class="car-wrapper"> |
|
||||
<img src="" alt="" class="car-img" /> |
|
||||
</div> |
|
||||
<div class="codes-wrapper"> |
|
||||
<img src="" alt="" class="code" /> |
|
||||
<p class="tip">扫码缴费</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
<Button class="car-btn" @click="close" /> |
|
||||
<Go class="go" /> |
|
||||
</div> |
|
||||
</Dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import Button from '@/base/Button/Button.vue' |
|
||||
import Go from '@/base/Go/Go.vue' |
|
||||
import Dialog from '@/layouts/Dialog.vue' |
|
||||
|
|
||||
const emits = defineEmits(['close']) |
|
||||
function close() { |
|
||||
emits('close') |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.content { |
|
||||
position: relative; |
|
||||
display: flex; |
|
||||
margin: 0 auto; |
|
||||
margin-top: 160px; |
|
||||
width: max-content; |
|
||||
animation-duration: 0.2s; |
|
||||
} |
|
||||
.info { |
|
||||
width: 480px; |
|
||||
height: 668px; |
|
||||
background: #ffffff; |
|
||||
border-radius: 12px; |
|
||||
padding: 64px 0 0 0; |
|
||||
} |
|
||||
.group { |
|
||||
margin-bottom: 64px; |
|
||||
padding-left: 64px; |
|
||||
|
|
||||
.text-bold { |
|
||||
font-weight: 700; |
|
||||
font-size: 32px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: rgba(0, 0, 0, 0.8); |
|
||||
i { |
|
||||
font-size: 20px; |
|
||||
padding: 0 5px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.text { |
|
||||
font-weight: 400; |
|
||||
font-size: 20px; |
|
||||
line-height: 23px; |
|
||||
margin-bottom: 18px; |
|
||||
color: rgba(0, 0, 0, 0.4); |
|
||||
} |
|
||||
|
|
||||
.last { |
|
||||
font-weight: 700; |
|
||||
font-family: 'font_bold'; |
|
||||
color: rgba(0, 0, 0, 0.8); |
|
||||
padding-left: 64px; |
|
||||
padding-top: 38px; |
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|
||||
.text-bold { |
|
||||
font-size: 24px; |
|
||||
i { |
|
||||
font-size: 48px; |
|
||||
padding-left: 5px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.right { |
|
||||
margin-left: 32px; |
|
||||
.car-wrapper { |
|
||||
width: 480px; |
|
||||
height: 270px; |
|
||||
margin-bottom: 32px; |
|
||||
background: #ffffff; |
|
||||
border-radius: 12px; |
|
||||
overflow: hidden; |
|
||||
.car-img { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
object-fit: cover; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.codes-wrapper { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
width: 480px; |
|
||||
height: 366px; |
|
||||
background: #ffffff; |
|
||||
border-radius: 12px; |
|
||||
.code { |
|
||||
width: 150px; |
|
||||
height: 150px; |
|
||||
} |
|
||||
.tip { |
|
||||
font-weight: 700; |
|
||||
font-size: 20px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: rgba(0, 0, 0, 0.8); |
|
||||
padding-top: 41px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.car-btn { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
right: -112px; |
|
||||
} |
|
||||
|
|
||||
.go { |
|
||||
position: absolute; |
|
||||
bottom: -160px; |
|
||||
left: 50%; |
|
||||
transform: translateX(-50%); |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,131 +0,0 @@ |
|||||
<template> |
|
||||
<div class="benefits-wrapper"> |
|
||||
<div class="carousel"> |
|
||||
<EffectFade :list="data?.fileList ?? []"> |
|
||||
<template v-slot="{ item }"> |
|
||||
<div class="banner-wrapper"> |
|
||||
<img class="banner" :src="config.sourceUrl + item" alt="" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
</EffectFade> |
|
||||
</div> |
|
||||
<div class="right"> |
|
||||
<h1 class="title">{{ switchLanguage(data, 'title') }}</h1> |
|
||||
<ScrollView class="intro-scroll" scrollbar> |
|
||||
<p class="intro"> |
|
||||
{{ switchLanguage(data, 'content') }} |
|
||||
</p> |
|
||||
</ScrollView> |
|
||||
<div class="qrcodeWrapper"> |
|
||||
<ThumbQRCode class="item" v-for="item of qr" :url="config.sourceUrl + item.fileUrl" :title="switchLanguage(item, 'name')" :key="item.name" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { computed } from 'vue' |
|
||||
import { storeToRefs } from 'pinia' |
|
||||
import { useStore } from '@/store/root' |
|
||||
import EffectFade from '@/components/EffectFade/EffectFade.vue' |
|
||||
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|
||||
import ThumbQRCode from '@/base/ThumbQRCode/ThumbQRCode.vue' |
|
||||
|
|
||||
const props = defineProps({ |
|
||||
data: Object |
|
||||
}) |
|
||||
|
|
||||
const store = useStore() |
|
||||
const { config } = storeToRefs(store) |
|
||||
const qr = computed(() => props.data.qrFileList ?? []) |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.benefits-wrapper { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
width: 100%; |
|
||||
flex: 1; |
|
||||
align-items: center; |
|
||||
padding-top: 48px; |
|
||||
|
|
||||
.carousel { |
|
||||
flex-shrink: 0; |
|
||||
width: 944px; |
|
||||
height: 548px; |
|
||||
|
|
||||
overflow: hidden; |
|
||||
:deep(.swiper) { |
|
||||
overflow: visible; |
|
||||
.swiper-pagination { |
|
||||
bottom: -16px; |
|
||||
.swiper-pagination-bullet { |
|
||||
width: 34px !important; |
|
||||
height: 4px !important; |
|
||||
background: rgba(0, 0, 0, 0.6); |
|
||||
border-radius: 6px !important; |
|
||||
opacity: inherit !important; |
|
||||
margin: 0; |
|
||||
&.swiper-pagination-bullet-active { |
|
||||
background: #ffffff; |
|
||||
border-radius: 6px !important; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.banner { |
|
||||
width: 944px; |
|
||||
height: 532px; |
|
||||
border-radius: var(--global-radius, 8px); |
|
||||
object-fit: cover; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.qrcodeWrapper { |
|
||||
display: flex; |
|
||||
margin-left: 68px; |
|
||||
.item { |
|
||||
margin-right: 10px; |
|
||||
} |
|
||||
} |
|
||||
.title { |
|
||||
padding-top: 32px; |
|
||||
padding-left: 68px; |
|
||||
font-weight: 700; |
|
||||
font-size: 28px; |
|
||||
line-height: 150%; |
|
||||
color: var(--carousel-titleColor); |
|
||||
} |
|
||||
|
|
||||
.intro-scroll { |
|
||||
position: relative; |
|
||||
height: 250px; |
|
||||
overflow: hidden; |
|
||||
margin-left: 68px; |
|
||||
margin-right: 31px; |
|
||||
padding-right: 31px; |
|
||||
margin-bottom: 33px; |
|
||||
margin-top: 32px; |
|
||||
.intro { |
|
||||
font-weight: 400; |
|
||||
font-size: 16px; |
|
||||
line-height: 200%; |
|
||||
text-align: justify; |
|
||||
color: var(--carousel-introColor); |
|
||||
} |
|
||||
} |
|
||||
@media (min-aspect-ratio: 1/1) { |
|
||||
.benefits-wrapper { |
|
||||
flex-direction: row; |
|
||||
align-items: flex-start; |
|
||||
padding-top: 100px; |
|
||||
padding-left: 63px; |
|
||||
.carousel { |
|
||||
position: relative; |
|
||||
} |
|
||||
} |
|
||||
.title { |
|
||||
padding-top: 0; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,118 +0,0 @@ |
|||||
<template> |
|
||||
<div class="customer-wrapper"> |
|
||||
<div class="masker" @click="close"></div> |
|
||||
<div class="customer-content"> |
|
||||
<div class="customer-avatar"> |
|
||||
<div class="avatar-wrapper"> |
|
||||
<img src="../../assets/images/search/customer.png" class="avatar" alt="" /> |
|
||||
</div> |
|
||||
<p class="customer-name">客服001</p> |
|
||||
</div> |
|
||||
<div class="time">00:34</div> |
|
||||
<div class="status">{{ $t('waiting') }}...</div> |
|
||||
<img src="../../assets/images/search/out.svg" class="off" @click="close" alt="" /> |
|
||||
<div class="close" @click="close"> |
|
||||
<img src="../../assets/images/detail/yellow_close.png" alt="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
const emits = defineEmits(['close']) |
|
||||
function close() { |
|
||||
emits('close') |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.customer-wrapper { |
|
||||
position: fixed; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
z-index: 1000; |
|
||||
animation-duration: 0.2s; |
|
||||
.masker { |
|
||||
position: fixed; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
} |
|
||||
.customer-content { |
|
||||
position: relative; |
|
||||
width: 600px; |
|
||||
height: 400px; |
|
||||
margin: 0 auto; |
|
||||
margin-top: 760px; |
|
||||
background: #ffffff; |
|
||||
box-shadow: 0px 40px 60px rgba(0, 0, 0, 0.08); |
|
||||
border-radius: 12px; |
|
||||
.customer-avatar { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
padding: 24px 0 0 32px; |
|
||||
margin-bottom: 50px; |
|
||||
|
|
||||
.avatar-wrapper { |
|
||||
width: 56px; |
|
||||
height: 56px; |
|
||||
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.04); |
|
||||
border-radius: 50%; |
|
||||
padding: 14px; |
|
||||
background-color: var(--color-fff); |
|
||||
.avatar { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
object-fit: contain; |
|
||||
} |
|
||||
} |
|
||||
.customer-name { |
|
||||
font-weight: 700; |
|
||||
font-size: 16px; |
|
||||
padding-left: 16px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
} |
|
||||
} |
|
||||
.time { |
|
||||
font-weight: 700; |
|
||||
font-size: 48px; |
|
||||
color: rgba(0, 0, 0, 0.8); |
|
||||
font-family: 'font_bold'; |
|
||||
padding-bottom: 8px; |
|
||||
text-align: center; |
|
||||
} |
|
||||
.status { |
|
||||
color: rgba(0, 0, 0, 0.4); |
|
||||
text-align: center; |
|
||||
font-size: 18px; |
|
||||
margin-bottom: 49px; |
|
||||
} |
|
||||
.off { |
|
||||
display: block; |
|
||||
width: 80px; |
|
||||
height: 80px; |
|
||||
margin: 0 auto; |
|
||||
} |
|
||||
} |
|
||||
.close { |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
position: absolute; |
|
||||
top: 12px; |
|
||||
right: 12px; |
|
||||
width: 56px; |
|
||||
height: 56px; |
|
||||
background: rgba(0, 0, 0, 0.02); |
|
||||
border-radius: 12px; |
|
||||
img { |
|
||||
width: 56px; |
|
||||
height: 56px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,36 +0,0 @@ |
|||||
<template> |
|
||||
<swiper v-if="list.length" :watchOverflow="true" :modules="[Autoplay, EffectFade, Pagination]" :pagination="true" effect="fade" :autoplay="true"> |
|
||||
<swiper-slide v-for="item of list" :key="item"> |
|
||||
<slot :item="item"></slot> |
|
||||
</swiper-slide> |
|
||||
</swiper> |
|
||||
<img v-else src="../../assets/images/nodata.svg" class="stay-tuned" alt="" /> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import SwiperCore, { Autoplay, EffectFade, Pagination } from 'swiper' |
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue' |
|
||||
|
|
||||
import 'swiper/css' |
|
||||
import 'swiper/css/effect-fade' |
|
||||
import 'swiper/css/pagination' |
|
||||
|
|
||||
SwiperCore.use([Autoplay, EffectFade, Pagination]) |
|
||||
|
|
||||
defineProps({ |
|
||||
list: { |
|
||||
type: Array, |
|
||||
default: () => [] |
|
||||
} |
|
||||
}) |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.stay-tuned { |
|
||||
position: absolute; |
|
||||
left: 50%; |
|
||||
top: 50%; |
|
||||
transform: translate3d(-50%, -50%, 0); |
|
||||
object-fit: contain; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,194 +0,0 @@ |
|||||
<template> |
|
||||
<ScrollView class="format-wrapper" ref="scroll" :refresh-delay="800" :list="list"> |
|
||||
<div class="format-scroll"> |
|
||||
<div class="format-item" @click="handleFormat({ industryName: '全部品牌', industryNameEn: 'all' }, -1)"> |
|
||||
<div class="parent flex" :class="{ active: parentIdxRef === -1 }"> |
|
||||
<div class="format-left flex"> |
|
||||
<img src="../../assets/images/detail/all.svg" class="icon" alt="" /> |
|
||||
<span class="text">{{ $t('all') }}</span> |
|
||||
</div> |
|
||||
<div class="format-right flex"> |
|
||||
<span class="total">{{ total }}</span> |
|
||||
<img src="../../assets/images/detail/all_dot.svg" class="right-icon" alt="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="format-item" v-for="(item, index) of list" :key="item.industryId"> |
|
||||
<div |
|
||||
class="parent flex" |
|
||||
@click="handleFormat(item, index)" |
|
||||
:class="[index === parentIdxRef ? 'active' : '', index === parentIdxRef && childIdxRef !== -1 ? 'child-active' : '']" |
|
||||
> |
|
||||
<div class="format-left flex"> |
|
||||
<img :src="config.sourceUrl + item.fileUrl" class="icon" alt="" /> |
|
||||
<span class="text">{{ switchLanguage(item, 'industryName') }}</span> |
|
||||
</div> |
|
||||
<div class="format-right flex"> |
|
||||
<span class="total">{{ item.shopNum }}</span> |
|
||||
<Arrow :size="18" fill="rgba(0, 0, 0, 0.2)" v-if="item.industryList?.length" class="right-icon svg-icon" /> |
|
||||
<img src="../../assets/images/detail/all_dot.svg" class="icon" v-else alt="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<template v-if="item.industryList?.length"> |
|
||||
<div class="format-child-wrapper" v-if="index === parentIdxRef"> |
|
||||
<div class="format-item" v-for="(child, index) of item.industryList" :key="child.industryId"> |
|
||||
<div class="parent flex" :class="{ active: childIdxRef === index }" @click="handleChildFormat(child, index)"> |
|
||||
<div class="format-left flex"> |
|
||||
<span class="text">{{ switchLanguage(child, 'industryName') }}</span> |
|
||||
</div> |
|
||||
<div class="format-right flex"> |
|
||||
<span class="total">{{ child.shopNum ?? 0 }}</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
</div> |
|
||||
</div> |
|
||||
</ScrollView> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { computed, nextTick, ref } from 'vue' |
|
||||
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|
||||
import { Arrow } from '@/base/Svg' |
|
||||
|
|
||||
const props = defineProps({ |
|
||||
list: { |
|
||||
type: Array, |
|
||||
default: () => [] |
|
||||
}, |
|
||||
config: { |
|
||||
type: Object, |
|
||||
default: () => ({}) |
|
||||
} |
|
||||
}) |
|
||||
const total = computed(() => props.list.reduce((_total, item) => _total + item.shopNum, 0)) |
|
||||
|
|
||||
const emits = defineEmits(['click']) |
|
||||
emits('click', { industryName: '全部品牌', industryNameEn: 'all' }, -1) |
|
||||
|
|
||||
const scroll = ref(null) |
|
||||
const parentIdxRef = ref(-1) |
|
||||
const childIdxRef = ref(-1) |
|
||||
function handleFormat(item, index) { |
|
||||
emits('click', item, index) |
|
||||
childIdxRef.value = -1 |
|
||||
parentIdxRef.value = index |
|
||||
nextTick(() => { |
|
||||
scroll.value.refresh() |
|
||||
}) |
|
||||
} |
|
||||
function handleChildFormat(child, childIdx) { |
|
||||
childIdxRef.value = childIdx |
|
||||
emits('click', child, childIdx) |
|
||||
nextTick(() => { |
|
||||
scroll.value.refresh() |
|
||||
}) |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.format-wrapper { |
|
||||
overflow: hidden; |
|
||||
height: 810px; |
|
||||
border-radius: 8px; |
|
||||
width: 200px; |
|
||||
margin-top: 18px; |
|
||||
.format-scroll { |
|
||||
overflow: hidden; |
|
||||
border-radius: 8px; |
|
||||
} |
|
||||
.format-item { |
|
||||
width: 200px; |
|
||||
background-color: #fff; |
|
||||
.parent { |
|
||||
height: 56px; |
|
||||
padding: 0 12px 0 24px; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
&.active { |
|
||||
background: linear-gradient(90deg, #ffbd35 0%, #ffd260 100%); |
|
||||
.icon, |
|
||||
.right-icon { |
|
||||
filter: brightness(50) invert(70%); |
|
||||
&.svg-icon { |
|
||||
filter: none; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
:deep(path) { |
|
||||
fill: rgba(0, 0, 0, 0.6); |
|
||||
} |
|
||||
|
|
||||
.svg-icon { |
|
||||
transform: rotate(-180deg); |
|
||||
} |
|
||||
.text, |
|
||||
.total { |
|
||||
color: rgba(0, 0, 0, 0.8); |
|
||||
} |
|
||||
} |
|
||||
&.child-active { |
|
||||
background: transparent; |
|
||||
.icon, |
|
||||
.right-icon { |
|
||||
filter: none; |
|
||||
} |
|
||||
:deep(path) { |
|
||||
fill: rgba(0, 0, 0, 0.6); |
|
||||
} |
|
||||
.right-icon { |
|
||||
transform: rotate(-180deg); |
|
||||
} |
|
||||
.text, |
|
||||
.total { |
|
||||
color: var(--color-9b0); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.format-right { |
|
||||
.icon { |
|
||||
margin-left: 8px; |
|
||||
margin-right: 0; |
|
||||
} |
|
||||
} |
|
||||
.icon { |
|
||||
width: 16px; |
|
||||
height: 16px; |
|
||||
margin-right: 8px; |
|
||||
} |
|
||||
.text, |
|
||||
.total { |
|
||||
font-weight: 700; |
|
||||
font-size: 14px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
} |
|
||||
.total { |
|
||||
font-weight: 400; |
|
||||
font-family: 'font_regular'; |
|
||||
color: rgba(0, 0, 0, 0.4); |
|
||||
} |
|
||||
.right-icon { |
|
||||
margin-left: 8px; |
|
||||
transition: transform 0.3s; |
|
||||
} |
|
||||
} |
|
||||
.format-child-wrapper { |
|
||||
.parent { |
|
||||
padding: 0 48px; |
|
||||
} |
|
||||
.text { |
|
||||
color: rgba(0, 0, 0, 0.4); |
|
||||
} |
|
||||
.total { |
|
||||
color: rgba(0, 0, 0, 0.2); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.flex { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,86 +0,0 @@ |
|||||
<template> |
|
||||
<div class="keyboard"> |
|
||||
<div |
|
||||
class="letter-item" |
|
||||
@click="handleLetter(item, index)" |
|
||||
:class="[item === '空格' ? 'space' : '', item === 'del' ? 'del' : '', letterIdx === index ? 'active' : '']" |
|
||||
v-for="(item, index) of letter" |
|
||||
:key="item" |
|
||||
v-html="generateInnerHTML(item)" |
|
||||
></div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { ref } from 'vue' |
|
||||
import { letter } from '../Search/tabs' |
|
||||
import { storeToRefs } from 'pinia' |
|
||||
import { useStore } from '@/store/root' |
|
||||
const store = useStore() |
|
||||
const { theme } = storeToRefs(store) |
|
||||
function generateInnerHTML(item) { |
|
||||
return item === 'del' ? `<img style="width:24px;height:24px" src="${theme.value.images.delete}" alt="">` : item |
|
||||
} |
|
||||
|
|
||||
const emits = defineEmits(['del', 'handle-letter']) |
|
||||
const timer = ref(null) |
|
||||
const letterIdx = ref(-1) |
|
||||
function handleLetter(item, index) { |
|
||||
letterIdx.value = index |
|
||||
clearTimeout(timer.value) |
|
||||
timer.value = setTimeout(() => { |
|
||||
letterIdx.value = -1 |
|
||||
clearTimeout(timer.value) |
|
||||
}, 300) |
|
||||
|
|
||||
if (item !== '空格' && item !== 'del') { |
|
||||
emits('handle-letter', item) |
|
||||
return |
|
||||
} |
|
||||
|
|
||||
item === 'del' && emits('del') |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.keyboard { |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
padding-top: 40px; |
|
||||
.letter-item { |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
width: 48px; |
|
||||
height: 48px; |
|
||||
text-align: center; |
|
||||
line-height: 48px; |
|
||||
background: var(--search-keyBg, #ffffff); |
|
||||
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.03), inset 0px -1px 0px rgba(177, 189, 220, 0.1); |
|
||||
border-radius: var(--global-radius, 8px); |
|
||||
font-weight: 700; |
|
||||
font-size: 18px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: var(--search-keyColor, rgba(0, 0, 0, 0.6)); |
|
||||
margin-right: 8px; |
|
||||
margin-bottom: 8px; |
|
||||
&:nth-child(21) { |
|
||||
margin-left: 28px; |
|
||||
} |
|
||||
&.space { |
|
||||
font-size: 14px; |
|
||||
} |
|
||||
&.del { |
|
||||
width: 104px; |
|
||||
img { |
|
||||
width: 24px; |
|
||||
height: 24px; |
|
||||
} |
|
||||
} |
|
||||
&.active { |
|
||||
background: var(--search-keyboardActiveBg); |
|
||||
color: #fff; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,107 +0,0 @@ |
|||||
<template> |
|
||||
<div class="written-wrapper"> |
|
||||
<ScrollView class="word-scroll" scroll-x :list="wordsList"> |
|
||||
<div class="word-content"> |
|
||||
<div class="word" @click="handleWord(item, index)" :class="{ active: wordIdx === index }" v-for="(item, index) of wordsList" :key="item">{{ item }}</div> |
|
||||
</div> |
|
||||
</ScrollView> |
|
||||
<Written |
|
||||
@result="getWordList" |
|
||||
:width="552" |
|
||||
:height="196" |
|
||||
background-color="transparent" |
|
||||
fill-font-size="48px" |
|
||||
fill-style="rgba(0, 0, 0, 0.02)" |
|
||||
:stroke-style="theme.search.writeColor" |
|
||||
/> |
|
||||
<div class="del" @click="del"> |
|
||||
<img :src="theme.images.delete" class="del-icon" alt="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { ref } from 'vue' |
|
||||
import Written from '../Written/Written.vue' |
|
||||
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|
||||
import { storeToRefs } from 'pinia' |
|
||||
import { useStore } from '@/store/root' |
|
||||
const wordsList = ref([]) |
|
||||
const store = useStore() |
|
||||
const { theme } = storeToRefs(store) |
|
||||
|
|
||||
function getWordList(list) { |
|
||||
wordsList.value = list |
|
||||
} |
|
||||
|
|
||||
const emits = defineEmits(['handle-word', 'del']) |
|
||||
const wordIdx = ref(-1) |
|
||||
const timer = ref(null) |
|
||||
function handleWord(item, index) { |
|
||||
clearTimeout(timer.value) |
|
||||
wordIdx.value = index |
|
||||
emits('handle-word', item) |
|
||||
timer.value = setTimeout(() => { |
|
||||
wordIdx.value = -1 |
|
||||
clearTimeout(timer.value) |
|
||||
}, 300) |
|
||||
} |
|
||||
|
|
||||
function del() { |
|
||||
emits('del') |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.written-wrapper { |
|
||||
position: relative; |
|
||||
width: 552px; |
|
||||
height: 252px; |
|
||||
background: var(--search-keyBg, #ffffff); |
|
||||
border-radius: var(--global-radius, 12px); |
|
||||
margin-top: 16px; |
|
||||
overflow: hidden; |
|
||||
.word-scroll { |
|
||||
position: relative; |
|
||||
height: 56px; |
|
||||
background: var(--search-keyBg, #ffffff); |
|
||||
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.04); |
|
||||
.word-content { |
|
||||
display: inline-block; |
|
||||
white-space: nowrap; |
|
||||
} |
|
||||
.word { |
|
||||
display: inline-block; |
|
||||
width: 66px; |
|
||||
height: 56px; |
|
||||
text-align: center; |
|
||||
line-height: 56px; |
|
||||
font-weight: 700; |
|
||||
font-size: 18px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: var(--search-keyColor, rgba(0, 0, 0, 0.6)); |
|
||||
&.active { |
|
||||
color: #fff; |
|
||||
background: var(--search-keyboardActiveBg); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.del { |
|
||||
position: absolute; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
width: 104px; |
|
||||
height: 48px; |
|
||||
right: 8px; |
|
||||
bottom: 8px; |
|
||||
background: rgba(0, 0, 0, 0.05); |
|
||||
box-shadow: inset 0px -1px 0px rgba(177, 189, 220, 0.1); |
|
||||
border-radius: var(--global-radius, 8px); |
|
||||
img { |
|
||||
width: 24px; |
|
||||
height: 24px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,49 +0,0 @@ |
|||||
<template> |
|
||||
<div class="language"> |
|
||||
<div class="language-item" @click="setLanguage('zh')" :class="{ active: language === 'zh' }">中</div> |
|
||||
<div class="language-item" @click="setLanguage('en')" :class="{ active: language === 'en' }">EN</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { useStore } from '@/store/root' |
|
||||
import { storeToRefs } from 'pinia' |
|
||||
|
|
||||
const store = useStore() |
|
||||
const { language } = storeToRefs(store) |
|
||||
|
|
||||
function setLanguage(lang) { |
|
||||
store.language !== lang && store.SET_LANGUAGE(lang) |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.language { |
|
||||
position: absolute; |
|
||||
left: 24px; |
|
||||
bottom: 56px; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
width: 93px; |
|
||||
height: 32px; |
|
||||
border-radius: 12px; |
|
||||
background-color: var(--color-black-opacity-02); |
|
||||
padding: 0 3px; |
|
||||
} |
|
||||
.language-item { |
|
||||
width: 43px; |
|
||||
height: 26px; |
|
||||
border-radius: 10px; |
|
||||
text-align: center; |
|
||||
line-height: 26px; |
|
||||
font-size: 14px; |
|
||||
color: var(--color-black-opacity-4); |
|
||||
font-family: 'font_bold'; |
|
||||
font-weight: bolder; |
|
||||
&.active { |
|
||||
background: var(--color-linear-lightgoldenyellow); |
|
||||
color: var(--color-black-opacity-6); |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,314 +0,0 @@ |
|||||
<template> |
|
||||
<div class="login-by-phone"> |
|
||||
<div class="masker" @click="handleClose"></div> |
|
||||
<div class="detail-content"> |
|
||||
<h4 class="login-text">{{ $t('login') }}</h4> |
|
||||
<div class="phone-group" @click="changeInputFocus('phone')"> |
|
||||
<img src="../../assets/images/member/hpone_tip.png" alt="" class="group-icon" /> |
|
||||
<div class="line"></div> |
|
||||
<input v-model="phoneRef" readonly type="text" :placeholder="$t('phoneNum')" class="input" /> |
|
||||
</div> |
|
||||
<div class="pwd-box"> |
|
||||
<div class="phone-group pwd"> |
|
||||
<img src="../../assets/images/member/pwd.png" alt="" class="group-icon" /> |
|
||||
<div class="line"></div> |
|
||||
<input v-model="msgRef" @click="changeInputFocus('msg')" readonly type="text" :placeholder="$t('enterCode')" class="input" /> |
|
||||
</div> |
|
||||
<div class="button" @click="sendMsg" :class="{ active: isSended }">{{ isSended ? countDownRef + ' ' + $t('again') : $t('sendCode') }}</div> |
|
||||
</div> |
|
||||
<div class="comfirm" @click="comfirm" :class="{ active: phoneRef.length && msgRef.length }">{{ $t('denglu') }}</div> |
|
||||
<div class="phone-keyboard"> |
|
||||
<div |
|
||||
class="num" |
|
||||
@click="handleNum(item === 10 ? '' : item === 11 ? 0 : item, index)" |
|
||||
:class="{ active: numIdx === index }" |
|
||||
v-for="(item, index) of 12" |
|
||||
:key="item" |
|
||||
v-html="generate(item)" |
|
||||
></div> |
|
||||
</div> |
|
||||
<div class="close" @click="handleClose"> |
|
||||
<img src="../../assets/images/detail/yellow_close.png" alt="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { ref, onBeforeUnmount } from 'vue' |
|
||||
import { checkPhoneNumber } from '@/utils/utils' |
|
||||
import Message from '@/base/Message/Message' |
|
||||
|
|
||||
const emits = defineEmits(['success', 'error', 'close']) |
|
||||
|
|
||||
function generate(item) { |
|
||||
return item === 10 ? '' : item === 11 ? 0 : item === 12 ? `<img src=${require('../../assets/images/member/del.svg')} class="del-icon" alt="" />` : item |
|
||||
} |
|
||||
|
|
||||
const phoneRef = ref('') |
|
||||
const msgRef = ref('') |
|
||||
const inputFocusRef = ref('phone') |
|
||||
const numIdx = ref(-1) |
|
||||
const numTimer = ref(null) |
|
||||
|
|
||||
function handleNum(item, index) { |
|
||||
clearTimeout(numTimer.value) |
|
||||
numIdx.value = index |
|
||||
numTimer.value = setTimeout(() => { |
|
||||
numIdx.value = -1 |
|
||||
clearTimeout(numTimer.value) |
|
||||
}, 300) |
|
||||
|
|
||||
if (item === 12) { |
|
||||
del() |
|
||||
return |
|
||||
} |
|
||||
|
|
||||
if (inputFocusRef.value === 'phone') { |
|
||||
if (phoneRef.value.length < 11) { |
|
||||
phoneRef.value += item |
|
||||
} |
|
||||
} |
|
||||
if (inputFocusRef.value === 'msg') { |
|
||||
msgRef.value += item |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
function changeInputFocus(name) { |
|
||||
inputFocusRef.value = name |
|
||||
} |
|
||||
function del() { |
|
||||
if (inputFocusRef.value === 'phone') { |
|
||||
phoneRef.value = phoneRef.value.substring(0, phoneRef.value.length - 1) |
|
||||
} |
|
||||
if (inputFocusRef.value === 'msg') { |
|
||||
msgRef.value = msgRef.value.substring(0, msgRef.value.length - 1) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const countDownRef = ref(60) |
|
||||
const countDownTimer = ref(null) |
|
||||
const isSended = ref(false) |
|
||||
//发送验证码 |
|
||||
function sendMsg() { |
|
||||
if (isSended.value) return |
|
||||
if (!checkPhoneNumber(phoneRef.value)) { |
|
||||
Message({ type: 'error', text: '请输入正确的手机号' }) |
|
||||
return |
|
||||
} |
|
||||
if (!phoneRef.value.length) { |
|
||||
Message({ type: 'error', text: '手机号不能为空' }) |
|
||||
return |
|
||||
} |
|
||||
isSended.value = true |
|
||||
inputFocusRef.value = 'msg' |
|
||||
countDownTimer.value = setInterval(countDown, 1000) |
|
||||
} |
|
||||
//一分钟倒计时 |
|
||||
function countDown() { |
|
||||
countDownRef.value-- |
|
||||
if (countDownRef.value <= 0) { |
|
||||
isSended.value = false |
|
||||
countDownRef.value = 60 |
|
||||
clearInterval(countDownTimer.value) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
//登录 |
|
||||
function comfirm() { |
|
||||
if (!checkPhoneNumber(phoneRef.value)) { |
|
||||
Message({ type: 'error', text: '请输入正确的手机号' }) |
|
||||
return |
|
||||
} |
|
||||
emits('success') |
|
||||
} |
|
||||
|
|
||||
onBeforeUnmount(() => { |
|
||||
clearInterval(countDownTimer.value) |
|
||||
}) |
|
||||
|
|
||||
function handleClose() { |
|
||||
emits('close') |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.login-by-phone { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
z-index: 51; |
|
||||
animation-duration: 0.3s; |
|
||||
} |
|
||||
.masker { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
z-index: 20; |
|
||||
} |
|
||||
.detail-content { |
|
||||
position: relative; |
|
||||
width: 484px; |
|
||||
height: 732px; |
|
||||
margin: 0 auto; |
|
||||
margin-top: 594px; |
|
||||
background: #ffffff; |
|
||||
box-shadow: 0px 40px 60px rgba(0, 0, 0, 0.08); |
|
||||
border-radius: 12px; |
|
||||
z-index: 21; |
|
||||
|
|
||||
.close { |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
position: absolute; |
|
||||
top: 12px; |
|
||||
right: 12px; |
|
||||
width: 56px; |
|
||||
height: 56px; |
|
||||
background: rgba(0, 0, 0, 0.02); |
|
||||
border-radius: 12px; |
|
||||
img { |
|
||||
width: 56px; |
|
||||
height: 56px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.login-text { |
|
||||
font-weight: 700; |
|
||||
font-size: 24px; |
|
||||
line-height: 28px; |
|
||||
margin-bottom: 40px; |
|
||||
padding-top: 48px; |
|
||||
padding-left: 72px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: rgba(0, 0, 0, 0.8); |
|
||||
} |
|
||||
::-webkit-input-placeholder { |
|
||||
font-size: 12px; |
|
||||
color: var(--color-0cb); |
|
||||
} |
|
||||
.pwd-box { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
width: 340px; |
|
||||
margin-top: 12px; |
|
||||
margin-left: 72px; |
|
||||
margin-bottom: 24px; |
|
||||
|
|
||||
.phone-group { |
|
||||
margin-left: 0; |
|
||||
} |
|
||||
|
|
||||
.button { |
|
||||
width: 116px; |
|
||||
height: 64px; |
|
||||
left: 296px; |
|
||||
top: 192px; |
|
||||
text-align: center; |
|
||||
line-height: 64px; |
|
||||
background: linear-gradient(90deg, #ffbd35 0%, #ffd260 100%); |
|
||||
border-radius: 12px; |
|
||||
font-weight: 700; |
|
||||
font-size: 14px; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
font-family: 'font_bold'; |
|
||||
} |
|
||||
} |
|
||||
.phone-group { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
width: 340px; |
|
||||
height: 64px; |
|
||||
margin-left: 72px; |
|
||||
background: rgba(0, 0, 0, 0.05); |
|
||||
border-radius: 12px; |
|
||||
padding-left: 20px; |
|
||||
&.pwd { |
|
||||
width: 212px; |
|
||||
} |
|
||||
.group-icon { |
|
||||
width: 20px; |
|
||||
} |
|
||||
.line { |
|
||||
width: 1px; |
|
||||
height: 14px; |
|
||||
background: rgba(0, 0, 0, 0.05); |
|
||||
border-radius: 1px; |
|
||||
margin: 0 14px; |
|
||||
} |
|
||||
} |
|
||||
.input { |
|
||||
width: 100%; |
|
||||
display: block; |
|
||||
border: none; |
|
||||
outline: none; |
|
||||
color: rgba(0, 0, 0, 0.4); |
|
||||
font-size: 16px; |
|
||||
background-color: transparent; |
|
||||
} |
|
||||
|
|
||||
.comfirm { |
|
||||
width: 340px; |
|
||||
height: 64px; |
|
||||
line-height: 64px; |
|
||||
left: 72px; |
|
||||
top: 280px; |
|
||||
background: linear-gradient(90deg, #ffbd35 0%, #ffd260 100%); |
|
||||
border-radius: 12px; |
|
||||
font-weight: 700; |
|
||||
font-size: 18px; |
|
||||
text-align: center; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
font-family: 'font_bold'; |
|
||||
margin: 0 auto; |
|
||||
margin-bottom: 40px; |
|
||||
} |
|
||||
.phone-keyboard { |
|
||||
display: grid; |
|
||||
grid-template-columns: repeat(3, 108px); |
|
||||
grid-template-rows: repeat(4, 56px); |
|
||||
gap: 12px 8px; |
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.025) 100%); |
|
||||
padding: 40px 70px 48px 70px; |
|
||||
.num { |
|
||||
background: #ffffff; |
|
||||
box-shadow: inset 0px -4px 0px rgba(177, 189, 220, 0.1); |
|
||||
border-radius: 8px; |
|
||||
font-weight: 700; |
|
||||
font-size: 20px; |
|
||||
font-family: 'font_bold'; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
&.active { |
|
||||
background: linear-gradient(90deg, #ffbd35 0%, #ffd260 100%); |
|
||||
box-shadow: inset 0px -4px 0px rgba(177, 189, 220, 0.1); |
|
||||
} |
|
||||
} |
|
||||
.del { |
|
||||
height: 56px; |
|
||||
width: 112px; |
|
||||
display: inline-flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
.del-icon { |
|
||||
width: 24px; |
|
||||
height: 24px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.close { |
|
||||
position: absolute; |
|
||||
top: 24px; |
|
||||
width: 56px; |
|
||||
height: 56px; |
|
||||
right: 24px; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,83 +0,0 @@ |
|||||
<template> |
|
||||
<div class="full-code"> |
|
||||
<div class="code-wrapper"> |
|
||||
<img :src="icon" class="img" alt="" /> |
|
||||
<p class="youhui">{{ title }}</p> |
|
||||
<slot /> |
|
||||
<div class="close" @click="handleClose"> |
|
||||
<img src="../../assets/images/detail/yellow_close.png" alt="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
defineProps({ |
|
||||
title: { |
|
||||
type: String, |
|
||||
default: '注册成功' |
|
||||
}, |
|
||||
icon: { |
|
||||
type: String, |
|
||||
default: require('@/assets/images/member/login_success.png') |
|
||||
} |
|
||||
}) |
|
||||
const emits = defineEmits(['close']) |
|
||||
|
|
||||
function handleClose() { |
|
||||
emits('close') |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.full-code { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
} |
|
||||
.code-wrapper { |
|
||||
position: absolute; |
|
||||
top: 50%; |
|
||||
left: 50%; |
|
||||
width: 592px; |
|
||||
min-height: 512px; |
|
||||
transform: translate3d(-50%, -50%, 0); |
|
||||
background: #ffffff; |
|
||||
box-shadow: 0px 0px 80px rgba(0, 0, 0, 0.163735); |
|
||||
padding-top: 96px; |
|
||||
z-index: 10; |
|
||||
.img { |
|
||||
display: block; |
|
||||
margin: 0 auto; |
|
||||
margin-bottom: 96px; |
|
||||
width: 200px; |
|
||||
height: 200px; |
|
||||
} |
|
||||
.youhui { |
|
||||
font-weight: 700; |
|
||||
font-size: 20px; |
|
||||
line-height: 23px; |
|
||||
text-align: center; |
|
||||
color: rgba(0, 0, 0, 0.8); |
|
||||
} |
|
||||
|
|
||||
.close { |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
position: absolute; |
|
||||
top: 12px; |
|
||||
right: 12px; |
|
||||
width: 56px; |
|
||||
height: 56px; |
|
||||
background: rgba(0, 0, 0, 0.02); |
|
||||
border-radius: 12px; |
|
||||
img { |
|
||||
width: 56px; |
|
||||
height: 56px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,104 +0,0 @@ |
|||||
<template> |
|
||||
<div class="mall-wrapper"> |
|
||||
<div class="carousel"> |
|
||||
<EffectFade :list="banner"> |
|
||||
<template v-slot="{ item }"> |
|
||||
<div class="banner-wrapper"> |
|
||||
<img :src="config.sourceUrl + item" alt="" class="banner" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
</EffectFade> |
|
||||
</div> |
|
||||
<h1 class="title">{{ $t('mallIntroduce') }}</h1> |
|
||||
<ScrollView :list="introduce.content" scrollbar class="mall-intro-scroll"> |
|
||||
<p class="mall-intro"> |
|
||||
{{ switchLanguage(introduce, 'content') }} |
|
||||
</p> |
|
||||
</ScrollView> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { ref, computed } from 'vue' |
|
||||
import { storeToRefs } from 'pinia' |
|
||||
import { useStore } from '@/store/root' |
|
||||
import { getMallInfoList } from '@/http/api' |
|
||||
import EffectFade from '@/components/EffectFade/EffectFade.vue' |
|
||||
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|
||||
|
|
||||
const store = useStore() |
|
||||
const { config } = storeToRefs(store) |
|
||||
|
|
||||
const introduce = ref({}) |
|
||||
const banner = computed(() => introduce.value?.fileList ?? []) |
|
||||
getMallInfoList().then(({ data }) => { |
|
||||
introduce.value = data ?? {} |
|
||||
}) |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.mall-wrapper { |
|
||||
width: 870px; |
|
||||
margin-left: 170px; |
|
||||
margin-right: 40px; |
|
||||
margin-top: 58px; |
|
||||
background: rgba(255, 255, 255, 0.4); |
|
||||
box-shadow: inset 1px 0px 0px #ffffff; |
|
||||
border-radius: 12px; |
|
||||
padding-bottom: 52px; |
|
||||
.carousel { |
|
||||
width: 870px; |
|
||||
height: 490px; |
|
||||
background: #ffffff; |
|
||||
margin-right: 56px; |
|
||||
border-radius: 8px; |
|
||||
overflow: hidden; |
|
||||
.banner-wrapper { |
|
||||
width: 870px; |
|
||||
height: 490px; |
|
||||
} |
|
||||
.banner { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
object-fit: cover; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.title { |
|
||||
padding-top: 48px; |
|
||||
padding-bottom: 32px; |
|
||||
margin-left: 56px; |
|
||||
font-weight: 700; |
|
||||
font-size: 24px; |
|
||||
color: rgba(0, 0, 0, 0.8); |
|
||||
font-family: 'font_bold'; |
|
||||
} |
|
||||
.mall-intro-scroll { |
|
||||
position: relative; |
|
||||
overflow: hidden; |
|
||||
height: 758px; |
|
||||
margin-left: 56px; |
|
||||
margin-right: 34px; |
|
||||
padding-right: 16px; |
|
||||
.mall-intro { |
|
||||
font-weight: 400; |
|
||||
font-size: 14px; |
|
||||
line-height: 200%; |
|
||||
text-align: justify; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
} |
|
||||
:deep(.bscroll-vertical-scrollbar) { |
|
||||
width: 6px !important; |
|
||||
background: rgba(0, 0, 0, 0.02) !important; |
|
||||
border-radius: 6px !important; |
|
||||
opacity: 1 !important; |
|
||||
.bscroll-indicator { |
|
||||
width: 6px !important; |
|
||||
background: rgba(0, 0, 0, 0.1) !important; |
|
||||
border-radius: 6px !important; |
|
||||
border: none !important; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,105 +0,0 @@ |
|||||
<template> |
|
||||
<div class="big-input"> |
|
||||
<div class="input-left" @click="handleSearch"> |
|
||||
<div class="search-content"> |
|
||||
<img src="../../assets/images/index/index_search.png" class="index-search-icon" alt="" /> |
|
||||
<div class="mock-input"> |
|
||||
<p class="search">搜索</p> |
|
||||
<p class="search-en">search</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="input-right" @click="handleVoice"> |
|
||||
<img src="../../assets/images/index/index_voice.png" class="index-voice-icon" alt="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { useStore } from '@/store/root' |
|
||||
|
|
||||
const store = useStore() |
|
||||
function handleSearch() { |
|
||||
store.SET_SHOW_SEARCH(true) |
|
||||
} |
|
||||
|
|
||||
function handleVoice() { |
|
||||
store.SET_SHOW_SEARCH(true) |
|
||||
store.SET_SHOW_VOICE(true) |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.big-input { |
|
||||
display: flex; |
|
||||
height: 108px; |
|
||||
margin-right: 40px; |
|
||||
margin-bottom: 46px; |
|
||||
z-index: 55; |
|
||||
.input-left { |
|
||||
position: relative; |
|
||||
flex: 1; |
|
||||
background: linear-gradient(90deg, #f6a62c 0%, #ffbc3f 100%); |
|
||||
box-shadow: 0px 12px 20px rgba(253, 177, 48, 0.1); |
|
||||
border-radius: 12px; |
|
||||
margin-right: 20px; |
|
||||
&::after { |
|
||||
position: absolute; |
|
||||
border-radius: 12px; |
|
||||
content: ''; |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
top: 0; |
|
||||
bottom: 4px; |
|
||||
background: #fff; |
|
||||
} |
|
||||
.search-content { |
|
||||
position: relative; |
|
||||
z-index: 2; |
|
||||
} |
|
||||
.search-content { |
|
||||
position: relative; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
width: 629px; |
|
||||
height: 104px; |
|
||||
background-color: var(--color-white-opacity); |
|
||||
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 4px 30px rgba(0, 0, 0, 0.02); |
|
||||
border-radius: 12px; |
|
||||
&::before { |
|
||||
position: absolute; |
|
||||
content: ''; |
|
||||
width: 2px; |
|
||||
height: 30px; |
|
||||
left: 112px; |
|
||||
top: 37px; |
|
||||
background: var(--color-black-opacity-2); |
|
||||
} |
|
||||
.index-search-icon { |
|
||||
width: 48px; |
|
||||
height: 48px; |
|
||||
margin-right: 54px; |
|
||||
margin-left: 44px; |
|
||||
} |
|
||||
.search { |
|
||||
font-weight: 700; |
|
||||
font-size: 20px; |
|
||||
line-height: 28px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: var(--color-black-opacity-6); |
|
||||
} |
|
||||
.search-en { |
|
||||
font-weight: 700; |
|
||||
font-family: 'font_bold'; |
|
||||
font-size: 14px; |
|
||||
text-transform: uppercase; |
|
||||
color: var(--color-black-opacity-4); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.index-voice-icon { |
|
||||
margin-top: -9px; |
|
||||
width: 246px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,388 +0,0 @@ |
|||||
<template> |
|
||||
<Dialog @close="close"> |
|
||||
<div class="content"> |
|
||||
<div class="content-left"> |
|
||||
<div class="poster-wrapper"> |
|
||||
<img class="poster" :src="movie.posterPath" alt="" /> |
|
||||
</div> |
|
||||
<p class="name">{{ movie.showName }}</p> |
|
||||
<div class="group"> |
|
||||
<div class="text">导演：</div> |
|
||||
<div class="info">{{ movie.director }}</div> |
|
||||
</div> |
|
||||
<div class="group"> |
|
||||
<div class="text">类型：</div> |
|
||||
<div class="info">{{ movie.type }}</div> |
|
||||
</div> |
|
||||
<div class="group"> |
|
||||
<div class="text">语言：</div> |
|
||||
<div class="info">{{ movie.language }}</div> |
|
||||
</div> |
|
||||
<div class="group"> |
|
||||
<div class="text">片长：</div> |
|
||||
<div class="info">{{ movie.duration }} 分钟</div> |
|
||||
</div> |
|
||||
<div class="group last"> |
|
||||
<div class="text">主演：</div> |
|
||||
<div class="info">{{ movie.leadingRole }}</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="remark"> |
|
||||
<span>{{ $t('rate') }}</span> |
|
||||
{{ movie.remark }} |
|
||||
</div> |
|
||||
|
|
||||
<div class="price"> |
|
||||
<div class="price-num"> |
|
||||
¥ |
|
||||
<i>{{ movie.price / 100 }}</i> |
|
||||
起 |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="content-right"> |
|
||||
<ScrollView class="date-scroll" scroll-x :list="dateList"> |
|
||||
<div class="date-content"> |
|
||||
<div |
|
||||
class="date-item" |
|
||||
:ref="el => tabsEl.push(el)" |
|
||||
:class="{ active: index === tabIdx }" |
|
||||
@click="handleTab(index)" |
|
||||
v-for="(item, index) of dateList" |
|
||||
:key="item.week" |
|
||||
> |
|
||||
<span class="date">{{ item.customDate }}</span> |
|
||||
<span class="week">{{ item.week }}</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
</ScrollView> |
|
||||
<ScrollView class="list-scroll"> |
|
||||
<div class="list-content"> |
|
||||
<table> |
|
||||
<tr v-for="item of 2" :key="item"> |
|
||||
<td class="w-190"> |
|
||||
<div class="start">12:00</div> |
|
||||
<div class="end">12:00</div> |
|
||||
</td> |
|
||||
<td class="w-190"> |
|
||||
<div class="type">IMAX</div> |
|
||||
<div class="ting">激光 3 厅</div> |
|
||||
</td> |
|
||||
<td class="w-190 line"> |
|
||||
<div class="ticket">06<i>张</i></div> |
|
||||
<div class="rest">余票</div> |
|
||||
</td> |
|
||||
<td class="w-222 center"> |
|
||||
<div class="price-num">¥<i>36</i>起</div> |
|
||||
</td> |
|
||||
<td> |
|
||||
<div class="button" @click="showQRCodeDialog">{{ $t('ticket') }}</div> |
|
||||
</td> |
|
||||
</tr> |
|
||||
</table> |
|
||||
</div> |
|
||||
</ScrollView> |
|
||||
</div> |
|
||||
<Button @click="close" class="btn" /> |
|
||||
</div> |
|
||||
<QRCode v-if="showCode" @close="showCode = false" title="微信扫码购买" /> |
|
||||
</Dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { computed, ref, defineAsyncComponent } from 'vue' |
|
||||
import { futureDate } from '@/utils/utils' |
|
||||
import Dialog from '@/layouts/Dialog.vue' |
|
||||
import Button from '@/base/Button/Button.vue' |
|
||||
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|
||||
const QRCode = defineAsyncComponent(() => import('@/base/QRCode/QRCode.vue')) |
|
||||
|
|
||||
defineProps({ |
|
||||
movie: { |
|
||||
type: Object, |
|
||||
default: () => ({}) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
const dateList = computed(() => futureDate()) |
|
||||
|
|
||||
const tabIdx = ref(0) |
|
||||
function handleTab(index) { |
|
||||
tabIdx.value = index |
|
||||
moveTo(index) |
|
||||
} |
|
||||
|
|
||||
const PADDING_LEFT = 6 |
|
||||
const tabsEl = ref([]) |
|
||||
const distance = ref(0) |
|
||||
|
|
||||
function moveTo(index) { |
|
||||
distance.value = tabsEl.value[index].offsetLeft - PADDING_LEFT + 'px' |
|
||||
} |
|
||||
|
|
||||
const showCode = ref(false) |
|
||||
function showQRCodeDialog() { |
|
||||
showCode.value = true |
|
||||
} |
|
||||
|
|
||||
const emits = defineEmits(['close']) |
|
||||
function close() { |
|
||||
emits('close') |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.content { |
|
||||
position: relative; |
|
||||
display: flex; |
|
||||
margin: 0 auto; |
|
||||
margin-top: 360px; |
|
||||
width: max-content; |
|
||||
z-index: 10; |
|
||||
|
|
||||
.price-num { |
|
||||
padding-left: 24px; |
|
||||
padding-right: 24px; |
|
||||
color: #f1b33e; |
|
||||
font-weight: 700; |
|
||||
font-family: 'font_bold'; |
|
||||
font-size: 16px; |
|
||||
i { |
|
||||
font-size: 32px; |
|
||||
padding: 0 4px; |
|
||||
} |
|
||||
} |
|
||||
.content-left { |
|
||||
width: 260px; |
|
||||
height: 727px; |
|
||||
background: #ffffff; |
|
||||
border-radius: 12px; |
|
||||
padding: 4px; |
|
||||
margin-right: 24px; |
|
||||
.poster-wrapper { |
|
||||
width: 252px; |
|
||||
height: 380px; |
|
||||
border-radius: 8px; |
|
||||
overflow: hidden; |
|
||||
margin-bottom: 24px; |
|
||||
.poster { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
object-fit: cover; |
|
||||
} |
|
||||
} |
|
||||
.name { |
|
||||
font-weight: 700; |
|
||||
font-size: 20px; |
|
||||
color: rgba(0, 0, 0, 0.8); |
|
||||
font-family: 'font_bold'; |
|
||||
margin-bottom: 20px; |
|
||||
@include no-wrap; |
|
||||
padding-left: 24px; |
|
||||
} |
|
||||
.group { |
|
||||
display: flex; |
|
||||
padding: 0 24px; |
|
||||
margin-bottom: 8px; |
|
||||
&.last { |
|
||||
margin-bottom: 14px; |
|
||||
.info { |
|
||||
height: 28px; |
|
||||
@include more-wrap; |
|
||||
} |
|
||||
} |
|
||||
.text { |
|
||||
font-weight: 700; |
|
||||
font-size: 12px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: rgba(0, 0, 0, 0.4); |
|
||||
padding-right: 8px; |
|
||||
flex-shrink: 0; |
|
||||
} |
|
||||
.info { |
|
||||
font-weight: 400; |
|
||||
font-size: 12px; |
|
||||
line-height: 14px; |
|
||||
color: rgba(0, 0, 0, 0.4); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.remark { |
|
||||
font-weight: 700; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
margin-left: 24px; |
|
||||
font-family: 'font_bold'; |
|
||||
font-size: 14px; |
|
||||
margin-right: 24px; |
|
||||
padding-bottom: 47px; |
|
||||
margin-bottom: 16px; |
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.02); |
|
||||
|
|
||||
span { |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.content-right { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
} |
|
||||
.date-scroll { |
|
||||
position: relative; |
|
||||
overflow: hidden; |
|
||||
width: 680px; |
|
||||
height: 128px; |
|
||||
background: rgba(0, 0, 0, 0.2); |
|
||||
border-radius: 12px; |
|
||||
padding: 6px 0; |
|
||||
margin-bottom: 24px; |
|
||||
|
|
||||
.date-content { |
|
||||
display: inline-block; |
|
||||
white-space: nowrap; |
|
||||
padding: 0 6px; |
|
||||
|
|
||||
&::before { |
|
||||
position: absolute; |
|
||||
content: ''; |
|
||||
left: 6px; |
|
||||
background: linear-gradient(90deg, #f6a62c 0%, #ffbc3f 100%); |
|
||||
box-shadow: 0 20px 30px rgba(221, 152, 55, 0.2); |
|
||||
border-radius: 8px; |
|
||||
border: 1px solid rgba(255, 189, 53, 1); |
|
||||
width: 134px; |
|
||||
height: 116px; |
|
||||
z-index: 0; |
|
||||
transition: all 0.5s; |
|
||||
transform: translate3d(v-bind(distance), 0, 0); |
|
||||
} |
|
||||
|
|
||||
.date-item { |
|
||||
display: inline-flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
margin-right: 12px; |
|
||||
width: 134px; |
|
||||
height: 116px; |
|
||||
} |
|
||||
.date { |
|
||||
position: relative; |
|
||||
z-index: 5; |
|
||||
font-weight: 700; |
|
||||
font-family: 'font_bold'; |
|
||||
font-size: 20px; |
|
||||
color: #ffffff; |
|
||||
padding-bottom: 5px; |
|
||||
} |
|
||||
.week { |
|
||||
font-weight: 400; |
|
||||
position: relative; |
|
||||
z-index: 5; |
|
||||
font-size: 14px; |
|
||||
text-align: center; |
|
||||
color: #ffffff; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.list-scroll { |
|
||||
flex: 1; |
|
||||
overflow: hidden; |
|
||||
border-radius: 8px; |
|
||||
table { |
|
||||
width: 680px; |
|
||||
tr { |
|
||||
display: block; |
|
||||
background-color: #fff; |
|
||||
border-radius: 8px; |
|
||||
margin-bottom: 8px; |
|
||||
padding: 26px 48px; |
|
||||
} |
|
||||
td { |
|
||||
position: relative; |
|
||||
vertical-align: middle; |
|
||||
text-align: left; |
|
||||
&.center { |
|
||||
text-align: center; |
|
||||
} |
|
||||
.start { |
|
||||
font-weight: 700; |
|
||||
font-size: 24px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
padding-bottom: 4px; |
|
||||
} |
|
||||
.end { |
|
||||
font-weight: 400; |
|
||||
font-size: 14px; |
|
||||
color: rgba(0, 0, 0, 0.4); |
|
||||
} |
|
||||
.type { |
|
||||
font-weight: 700; |
|
||||
font-family: 'font_bold'; |
|
||||
font-size: 24px; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
padding-bottom: 4px; |
|
||||
} |
|
||||
.ting { |
|
||||
font-weight: 400; |
|
||||
font-size: 14px; |
|
||||
color: rgba(0, 0, 0, 0.4); |
|
||||
} |
|
||||
.ticket { |
|
||||
font-weight: 700; |
|
||||
font-size: 24px; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
font-family: 'font_bold'; |
|
||||
padding-bottom: 4px; |
|
||||
} |
|
||||
.rest { |
|
||||
font-weight: 400; |
|
||||
font-size: 14px; |
|
||||
color: rgba(0, 0, 0, 0.4); |
|
||||
} |
|
||||
.button { |
|
||||
width: 136px; |
|
||||
height: 56px; |
|
||||
line-height: 56px; |
|
||||
text-align: center; |
|
||||
background: linear-gradient(90deg, #f6a62c 0%, #ffbc3f 100%); |
|
||||
box-shadow: 0px 20px 30px rgba(221, 152, 55, 0.2); |
|
||||
border-radius: 53px; |
|
||||
font-weight: 700; |
|
||||
font-size: 18px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: #ffffff; |
|
||||
} |
|
||||
} |
|
||||
.w-190 { |
|
||||
width: 190px; |
|
||||
} |
|
||||
.w-150 { |
|
||||
width: 150px; |
|
||||
} |
|
||||
.w-222 { |
|
||||
width: 222px; |
|
||||
} |
|
||||
} |
|
||||
.line { |
|
||||
&:after { |
|
||||
content: ''; |
|
||||
position: absolute; |
|
||||
right: 0; |
|
||||
height: 32px; |
|
||||
width: 1px; |
|
||||
border-right: 1px solid rgba(38, 36, 36, 0.1); |
|
||||
top: 50%; |
|
||||
transform: translateY(-50%); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.btn { |
|
||||
position: absolute; |
|
||||
right: 0; |
|
||||
top: -104px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,231 +0,0 @@ |
|||||
<template> |
|
||||
<TransitionGroup name="width" mode="out-in" tag="div" class="plateinput-wrapper" :class="[searchMethods === '车位' ? 'active' : '']"> |
|
||||
<div |
|
||||
class="input" |
|
||||
v-for="(item, index) of renderInputLength" |
|
||||
:key="item" |
|
||||
:class="[index === license.length - 1 ? 'active' : '', searchMethods === '车位' ? 'space' : '']" |
|
||||
> |
|
||||
<span class="text">{{ license[index] }}</span> |
|
||||
</div> |
|
||||
<div |
|
||||
key="energy" |
|
||||
v-if="needsEnergy" |
|
||||
class="last input" |
|
||||
@click="handleEnergy" |
|
||||
:class="[_isEnergy ? 'enrgy' : '', _isEnergy && license.length === ENERGY_PLATE ? 'active' : '']" |
|
||||
> |
|
||||
<span class="text" v-if="!_isEnergy">新能源</span> |
|
||||
<span class="text" v-else>{{ _isEnergy ? (license.length === ENERGY_PLATE && license[license.length - 1]) || '' : '' }}</span> |
|
||||
</div> |
|
||||
<div key="btn" class="btn" @click="confirm"> |
|
||||
<img src="../../assets/images/parking/search-parking.png" class="icon" alt="" /> |
|
||||
</div> |
|
||||
</TransitionGroup> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { ref, computed } from 'vue' |
|
||||
|
|
||||
const NOT_ENERGY_PLATE = 7 |
|
||||
const ENERGY_PLATE = 8 |
|
||||
|
|
||||
const props = defineProps({ |
|
||||
spaceMaxLength: { |
|
||||
type: Number, |
|
||||
default: 5 |
|
||||
}, |
|
||||
license: { |
|
||||
type: Array, |
|
||||
default: () => [] |
|
||||
}, |
|
||||
needsEnergy: { |
|
||||
type: Boolean, |
|
||||
default: true |
|
||||
}, |
|
||||
searchMethods: { |
|
||||
type: String, |
|
||||
validator: status => ['车牌', '车位'].includes(status) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
const renderInputLength = computed(() => (props.searchMethods === '车牌' ? NOT_ENERGY_PLATE : props.spaceMaxLength)) |
|
||||
|
|
||||
const emits = defineEmits(['handle-energy', 'confirm']) |
|
||||
const _isEnergy = ref(false) |
|
||||
emits('handle-energy', _isEnergy.value) |
|
||||
|
|
||||
function handleEnergy() { |
|
||||
_isEnergy.value = !_isEnergy.value |
|
||||
emits('handle-energy', _isEnergy.value) |
|
||||
} |
|
||||
|
|
||||
function confirm() { |
|
||||
emits('confirm') |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.plateinput-wrapper { |
|
||||
display: flex; |
|
||||
position: relative; |
|
||||
margin-bottom: 32px; |
|
||||
margin-left: 170px; |
|
||||
&.active { |
|
||||
&::before { |
|
||||
left: 141px; |
|
||||
} |
|
||||
} |
|
||||
&::before { |
|
||||
content: ''; |
|
||||
position: absolute; |
|
||||
width: 2px; |
|
||||
height: 63px; |
|
||||
background: rgba(0, 0, 0, 0.1); |
|
||||
border-radius: 2px; |
|
||||
left: 176px; |
|
||||
top: 50%; |
|
||||
transform: translateY(-50%); |
|
||||
transition: left 0.5s; |
|
||||
} |
|
||||
} |
|
||||
.input { |
|
||||
position: relative; |
|
||||
border-radius: 8px; |
|
||||
width: 80px; |
|
||||
height: 100px; |
|
||||
margin-right: 8px; |
|
||||
font-weight: 700; |
|
||||
font-size: 32px; |
|
||||
line-height: 100px; |
|
||||
text-align: center; |
|
||||
color: rgba(0, 0, 0, 0.8); |
|
||||
font-family: 'font_bold'; |
|
||||
background: #ffffff; |
|
||||
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.03); |
|
||||
border-radius: 8px; |
|
||||
&.space { |
|
||||
margin-right: 8px !important; |
|
||||
width: 132px; |
|
||||
&:first-child { |
|
||||
margin-right: 22px !important; |
|
||||
} |
|
||||
} |
|
||||
.text { |
|
||||
position: relative; |
|
||||
z-index: 3; |
|
||||
} |
|
||||
|
|
||||
&::after { |
|
||||
width: 80px; |
|
||||
height: 100px; |
|
||||
left: 0; |
|
||||
top: 0; |
|
||||
content: ''; |
|
||||
position: absolute; |
|
||||
background: #ffffff; |
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.03); |
|
||||
border-radius: 8px; |
|
||||
z-index: 2; |
|
||||
} |
|
||||
&.space { |
|
||||
&:nth-child(2) { |
|
||||
margin-right: 12px; |
|
||||
} |
|
||||
&::after { |
|
||||
width: 132px; |
|
||||
} |
|
||||
} |
|
||||
&.active { |
|
||||
&::before { |
|
||||
position: absolute; |
|
||||
content: ''; |
|
||||
top: -2px; |
|
||||
right: -2px; |
|
||||
bottom: -2px; |
|
||||
left: -2px; |
|
||||
background: var(--color-linear-lightgoldenyellow); |
|
||||
border-radius: 8px; |
|
||||
z-index: 1; |
|
||||
} |
|
||||
} |
|
||||
&:nth-child(2) { |
|
||||
margin-right: 18px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.last { |
|
||||
line-height: initial; |
|
||||
&.enrgy { |
|
||||
.text { |
|
||||
padding-top: 0; |
|
||||
font-weight: 700; |
|
||||
font-size: 32px; |
|
||||
line-height: 90px; |
|
||||
text-align: center; |
|
||||
color: rgba(0, 0, 0, 0.8); |
|
||||
} |
|
||||
&::after { |
|
||||
background: #ffffff; |
|
||||
content: ''; |
|
||||
} |
|
||||
} |
|
||||
&::after { |
|
||||
content: '+'; |
|
||||
font-weight: 700; |
|
||||
font-size: 32px; |
|
||||
color: rgba(0, 0, 0, 0.4); |
|
||||
line-height: 60px; |
|
||||
background: transparent; |
|
||||
} |
|
||||
.text { |
|
||||
width: 80px; |
|
||||
height: 100px; |
|
||||
display: inline-block; |
|
||||
font-weight: 700; |
|
||||
font-size: 18px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: rgba(0, 0, 0, 0.4); |
|
||||
border: 2px solid #fff; |
|
||||
text-align: center; |
|
||||
border-radius: 8px; |
|
||||
padding-top: 51px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.btn { |
|
||||
position: absolute; |
|
||||
right: 40px; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
margin-left: 12px; |
|
||||
width: 156px; |
|
||||
height: 100px; |
|
||||
background: linear-gradient(90deg, #ffbd35 0%, #ffd260 100%); |
|
||||
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.03), inset 0px -4px 0px rgba(243, 176, 36, 0.5); |
|
||||
border-radius: 8px; |
|
||||
transition: all 0.5s; |
|
||||
|
|
||||
.icon { |
|
||||
width: 32px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.width-enter-active, |
|
||||
.width-leave-active { |
|
||||
width: 80px; |
|
||||
transition: all 0.5s; |
|
||||
transition-timing-function: cubic-bezier(0.75, 0, 0.24, 1); |
|
||||
} |
|
||||
|
|
||||
.width-enter-from, |
|
||||
.width-leave-to { |
|
||||
width: 0; |
|
||||
opacity: 0; |
|
||||
} |
|
||||
.width-move { |
|
||||
transition: transform 0.5s !important; |
|
||||
transition-timing-function: cubic-bezier(0.75, 0, 0.24, 1); |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,91 +0,0 @@ |
|||||
<template> |
|
||||
<div class="keyboard-wrapper"> |
|
||||
<div |
|
||||
class="keyboard-item" |
|
||||
@click="handleKeyboard(item, index)" |
|
||||
:class="[isUppercaseWord(item) ? 'uppercase' : '', item === 'del' ? 'del' : '', keyboardIdx === index ? 'active' : '', searchMethods === '车位' ? 'space' : '']" |
|
||||
v-for="(item, index) of list" |
|
||||
:key="item" |
|
||||
v-html="generateInnerHTML(item)" |
|
||||
></div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { ref, computed } from 'vue' |
|
||||
import { keyboard } from './keyboard' |
|
||||
import { isUppercaseWord, isZhWord } from '@/utils/utils' |
|
||||
|
|
||||
const props = defineProps({ |
|
||||
searchMethods: { |
|
||||
type: String, |
|
||||
validator: status => ['车牌', '车位'].includes(status) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
const list = computed(() => (props.searchMethods === '车位' ? keyboard.filter(item => !isZhWord(item)) : keyboard)) |
|
||||
|
|
||||
function generateInnerHTML(item) { |
|
||||
return item === 'del' ? `<img src="${require('@/assets/images/parking/del.svg')}" alt="">` : item |
|
||||
} |
|
||||
|
|
||||
const emits = defineEmits(['handle-keyboard', 'del']) |
|
||||
const keyboardIdx = ref(-1) |
|
||||
const keyboardTimer = ref(null) |
|
||||
function handleKeyboard(item, index) { |
|
||||
item === 'del' ? emits('del') : emits('handle-keyboard', item) |
|
||||
clearTimeout(keyboardTimer.value) |
|
||||
keyboardIdx.value = index |
|
||||
keyboardTimer.value = setTimeout(() => { |
|
||||
keyboardIdx.value = -1 |
|
||||
clearTimeout(keyboardTimer.value) |
|
||||
}, 300) |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.keyboard-wrapper { |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
margin-left: 170px; |
|
||||
margin-right: 32px; |
|
||||
margin-bottom: 56px; |
|
||||
.keyboard-item { |
|
||||
width: 41.76px; |
|
||||
height: 48px; |
|
||||
background: rgba(255, 255, 255, 0.6); |
|
||||
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.03), inset 0px -1px 0px rgba(177, 189, 220, 0.1); |
|
||||
border-radius: 6px; |
|
||||
text-align: center; |
|
||||
margin-right: 7px; |
|
||||
margin-bottom: 8px; |
|
||||
font-size: 18px; |
|
||||
font-family: 'font_medium'; |
|
||||
line-height: 48px; |
|
||||
color: rgba(0, 0, 0, 0.8); |
|
||||
&.space { |
|
||||
width: 90.48px; |
|
||||
&.del { |
|
||||
width: 187.92px; |
|
||||
} |
|
||||
} |
|
||||
&.uppercase { |
|
||||
background: #ffffff; |
|
||||
} |
|
||||
&.del { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
width: 90px; |
|
||||
line-height: initial; |
|
||||
background: rgba(0, 0, 0, 0.05); |
|
||||
box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.1); |
|
||||
} |
|
||||
&.active { |
|
||||
background: #f1b33e; |
|
||||
color: #fff; |
|
||||
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.03), inset 0px -1px 0px rgba(177, 189, 220, 0.1); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,73 +0,0 @@ |
|||||
export const keyboard = [ |
|
||||
'粤', |
|
||||
'京', |
|
||||
'津', |
|
||||
'渝', |
|
||||
'冀', |
|
||||
'豫', |
|
||||
'云', |
|
||||
'辽', |
|
||||
'黑', |
|
||||
'A', |
|
||||
'B', |
|
||||
'C', |
|
||||
'D', |
|
||||
'E', |
|
||||
'F', |
|
||||
1, |
|
||||
2, |
|
||||
3, |
|
||||
'湘', |
|
||||
'皖', |
|
||||
'鲁', |
|
||||
'苏', |
|
||||
'浙', |
|
||||
'赣', |
|
||||
'鄂', |
|
||||
'桂', |
|
||||
'甘', |
|
||||
'G', |
|
||||
'H', |
|
||||
'J', |
|
||||
'K', |
|
||||
'L', |
|
||||
'M', |
|
||||
4, |
|
||||
5, |
|
||||
6, |
|
||||
'晋', |
|
||||
'蒙', |
|
||||
'陕', |
|
||||
'吉', |
|
||||
'闽', |
|
||||
'贵', |
|
||||
'沪', |
|
||||
'青', |
|
||||
'藏', |
|
||||
'N', |
|
||||
'P', |
|
||||
'Q', |
|
||||
'R', |
|
||||
'S', |
|
||||
'T', |
|
||||
7, |
|
||||
8, |
|
||||
9, |
|
||||
'川', |
|
||||
'宁', |
|
||||
'琼', |
|
||||
'港', |
|
||||
'澳', |
|
||||
'新', |
|
||||
'使', |
|
||||
'领', |
|
||||
'警', |
|
||||
'U', |
|
||||
'V', |
|
||||
'W', |
|
||||
'X', |
|
||||
'Y', |
|
||||
'Z', |
|
||||
'0', |
|
||||
'del' |
|
||||
] |
|
||||
@ -1,91 +0,0 @@ |
|||||
<template> |
|
||||
<div class="row"> |
|
||||
<div class="back" :style="{ backgroundImage: `url(${theme.images.back})` }" v-if="$route.path !== '/index'" @click="() => $router.push('/index')"></div> |
|
||||
<div class="bar" @click="handleSearch"> |
|
||||
<div class="icon" :style="{ backgroundImage: `url(${theme.images.searchIcon})` }"></div> |
|
||||
<div class="stick"></div> |
|
||||
<div class="placeholder">精确查询品牌/公共设施</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { useStore } from '@/store/root' |
|
||||
import { storeToRefs } from 'pinia' |
|
||||
const store = useStore() |
|
||||
const handleSearch = () => store.SET_SHOW_SEARCH(true) |
|
||||
const { theme } = storeToRefs(store) |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
@media (max-aspect-ratio: 1/1) { |
|
||||
.row { |
|
||||
position: fixed; |
|
||||
top: 260px; |
|
||||
left: 68px; |
|
||||
right: 68px; |
|
||||
height: 100px; |
|
||||
display: flex; |
|
||||
z-index: 100; |
|
||||
} |
|
||||
} |
|
||||
.row { |
|
||||
.back { |
|
||||
width: 130px; |
|
||||
height: 100px; |
|
||||
margin-right: 40px; |
|
||||
background: center / cover no-repeat; |
|
||||
box-shadow: 0px 15px 24px rgba(0, 0, 0, 0.05); |
|
||||
border-radius: var(--searchBar-backBorderRadius); |
|
||||
} |
|
||||
.bar { |
|
||||
flex: 1; |
|
||||
height: 100px; |
|
||||
background: var(--searchBar-background); |
|
||||
border: var(--searchBar-border); |
|
||||
box-shadow: 0px 15px 24px rgba(0, 0, 0, 0.05); |
|
||||
border-radius: var(--searchBar-borderRadius); |
|
||||
display: flex; |
|
||||
padding-left: 40px; |
|
||||
align-items: center; |
|
||||
.icon { |
|
||||
width: 56px; |
|
||||
height: 56px; |
|
||||
background: center / cover no-repeat; |
|
||||
} |
|
||||
.stick { |
|
||||
width: 4px; |
|
||||
height: 38px; |
|
||||
background: var(--searchBar-stickBg); |
|
||||
margin: 0 32px; |
|
||||
} |
|
||||
.placeholder { |
|
||||
font-family: 'HarmonyOS Sans SC'; |
|
||||
font-style: normal; |
|
||||
font-weight: 700; |
|
||||
font-size: 20px; |
|
||||
line-height: 23px; |
|
||||
color: var(--searchBar-placeholderColor); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@media (min-aspect-ratio: 1/1) { |
|
||||
.row { |
|
||||
.back { |
|
||||
position: fixed; |
|
||||
left: 68px; |
|
||||
top: 161px; |
|
||||
z-index: 100; |
|
||||
} |
|
||||
.bar { |
|
||||
position: fixed; |
|
||||
width: 698px; |
|
||||
top: 38px; |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
margin: auto; |
|
||||
z-index: 100; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,142 +0,0 @@ |
|||||
<template> |
|
||||
<div class="tabs" v-if="sidebarList.find(({ path }) => path === $route.path)"> |
|
||||
<div :class="['item', tab.path === $route.path ? 'active' : '']" v-for="tab of sidebarList" :key="tab.title" @click="goPage(tab)"> |
|
||||
<div class="icon"><img :src="theme.images[tab.moduleName]" /></div> |
|
||||
<div class="title">{{ switchLanguage(tab, 'title') }}</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { useStore } from '@/store/root' |
|
||||
import { storeToRefs } from 'pinia' |
|
||||
import { useRouter } from 'vue-router' |
|
||||
const router = useRouter() |
|
||||
const store = useStore() |
|
||||
const { sidebarList, theme } = storeToRefs(store) |
|
||||
const goPage = item => { |
|
||||
store.SET_SELECTED_MODULE(item.title) |
|
||||
router.push(item.path) |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.tabs { |
|
||||
position: fixed; |
|
||||
top: 400px; |
|
||||
left: 68px; |
|
||||
right: 68px; |
|
||||
display: flex; |
|
||||
.item:nth-child(5n + 1) { |
|
||||
&.active { |
|
||||
.icon { |
|
||||
background: var(--menu-activeBg1); |
|
||||
} |
|
||||
} |
|
||||
.icon { |
|
||||
background: var(--menu-bg1); |
|
||||
} |
|
||||
} |
|
||||
.item:nth-child(5n + 2) { |
|
||||
&.active { |
|
||||
.icon { |
|
||||
background: var(--menu-activeBg2); |
|
||||
} |
|
||||
} |
|
||||
.icon { |
|
||||
background: var(--menu-bg2); |
|
||||
} |
|
||||
} |
|
||||
.item:nth-child(5n + 3) { |
|
||||
&.active { |
|
||||
.icon { |
|
||||
background: var(--menu-activeBg3); |
|
||||
} |
|
||||
} |
|
||||
.icon { |
|
||||
background: var(--menu-bg3); |
|
||||
} |
|
||||
} |
|
||||
.item:nth-child(5n + 4) { |
|
||||
&.active { |
|
||||
.icon { |
|
||||
background: var(--menu-activeBg4); |
|
||||
} |
|
||||
} |
|
||||
.icon { |
|
||||
background: var(--menu-bg4); |
|
||||
} |
|
||||
} |
|
||||
.item:nth-child(5n + 5) { |
|
||||
&.active { |
|
||||
.icon { |
|
||||
background: var(--menu-activeBg5); |
|
||||
} |
|
||||
} |
|
||||
.icon { |
|
||||
background: var(--menu-bg5); |
|
||||
} |
|
||||
} |
|
||||
.item { |
|
||||
position: relative; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
flex: 1; |
|
||||
height: 170px; |
|
||||
.icon { |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
height: 97px; |
|
||||
background: rgba(255, 255, 255, 0.4); |
|
||||
border-radius: var(--global-radius, 24px); |
|
||||
img { |
|
||||
width: 80px; |
|
||||
height: 80px; |
|
||||
} |
|
||||
} |
|
||||
.title { |
|
||||
font-weight: 700; |
|
||||
font-size: 18px; |
|
||||
line-height: 21px; |
|
||||
text-align: center; |
|
||||
color: var(--menu-color); |
|
||||
margin-top: 12px; |
|
||||
} |
|
||||
&.active { |
|
||||
.title { |
|
||||
color: var(--menu-activeColor); |
|
||||
} |
|
||||
&::after { |
|
||||
content: ''; |
|
||||
display: block; |
|
||||
position: absolute; |
|
||||
width: 124px; |
|
||||
height: 6px; |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
bottom: 0; |
|
||||
margin: auto; |
|
||||
background: var(--menu-barBg); |
|
||||
border-radius: 2px 2px 0px 0px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.item + .item { |
|
||||
margin-left: 24px; |
|
||||
} |
|
||||
} |
|
||||
@media (min-aspect-ratio: 1/1) { |
|
||||
.tabs { |
|
||||
top: 156px; |
|
||||
left: 456px; |
|
||||
right: 456px; |
|
||||
.item { |
|
||||
height: 124px; |
|
||||
.icon { |
|
||||
height: 80px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,92 +0,0 @@ |
|||||
<template> |
|
||||
<div class="full-code"> |
|
||||
<div class="code-wrapper"> |
|
||||
<img :src="icon" class="img" alt="" v-if="icon.length" /> |
|
||||
<img src="../../assets/images/nodata.svg" class="img nodata" alt="" v-else /> |
|
||||
|
|
||||
<p class="youhui" v-if="icon.length">{{ title }}</p> |
|
||||
<slot /> |
|
||||
<div class="close" @click="handleClose"> |
|
||||
<img src="../../assets/images/detail/yellow_close.png" alt="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
defineProps({ |
|
||||
title: { |
|
||||
type: String, |
|
||||
default: '扫码排队' |
|
||||
}, |
|
||||
icon: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
} |
|
||||
}) |
|
||||
const emits = defineEmits(['close']) |
|
||||
|
|
||||
function handleClose() { |
|
||||
emits('close') |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.full-code { |
|
||||
position: fixed; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
z-index: 10; |
|
||||
animation-duration: 0.2s; |
|
||||
} |
|
||||
.code-wrapper { |
|
||||
position: absolute; |
|
||||
top: 50%; |
|
||||
left: 50%; |
|
||||
width: 480px; |
|
||||
min-height: 366px; |
|
||||
transform: translate3d(-50%, -50%, 0); |
|
||||
background: #ffffff; |
|
||||
box-shadow: 0 40px 60px rgba(0, 0, 0, 0.08); |
|
||||
border-radius: 12px; |
|
||||
padding-top: 80px; |
|
||||
z-index: 10; |
|
||||
.img { |
|
||||
display: block; |
|
||||
margin: 0 auto 49px; |
|
||||
width: 150px; |
|
||||
height: 150px; |
|
||||
&.nodata { |
|
||||
width: 300px; |
|
||||
height: 300px; |
|
||||
} |
|
||||
} |
|
||||
.youhui { |
|
||||
font-weight: 700; |
|
||||
font-family: 'font_bold'; |
|
||||
font-size: 20px; |
|
||||
line-height: 23px; |
|
||||
text-align: center; |
|
||||
color: rgba(0, 0, 0, 0.8); |
|
||||
} |
|
||||
|
|
||||
.close { |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
position: absolute; |
|
||||
top: 12px; |
|
||||
right: 12px; |
|
||||
width: 56px; |
|
||||
height: 56px; |
|
||||
background: rgba(0, 0, 0, 0.02); |
|
||||
border-radius: 12px; |
|
||||
img { |
|
||||
width: 56px; |
|
||||
height: 56px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,125 +0,0 @@ |
|||||
<template> |
|
||||
<div class="question-content"> |
|
||||
<div class="masker" @click="closeQuestionClassify"></div> |
|
||||
<div class="question-detail"> |
|
||||
<h1 class="title">商场相关常见问题</h1> |
|
||||
<h1 class="sub">全部分类</h1> |
|
||||
<ScrollView class="question-scroll" scrollbar> |
|
||||
<div class="scroll"> |
|
||||
<QuestionList /> |
|
||||
</div> |
|
||||
</ScrollView> |
|
||||
<div class="close" @click="closeQuestionClassify"> |
|
||||
<img src="../../assets/images/detail/yellow_close.png" alt="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|
||||
import QuestionList from '@/components/QuestionList/QuestionList.vue' |
|
||||
|
|
||||
const emits = defineEmits(['close']) |
|
||||
|
|
||||
function closeQuestionClassify() { |
|
||||
emits('close') |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.question-content { |
|
||||
position: fixed; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
z-index: 999; |
|
||||
animation-duration: 0.2s; |
|
||||
} |
|
||||
.masker { |
|
||||
position: fixed; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
} |
|
||||
|
|
||||
.question-detail { |
|
||||
position: absolute; |
|
||||
width: 854px; |
|
||||
height: 964px; |
|
||||
background: #ffffff; |
|
||||
box-shadow: 0px 40px 60px rgba(0, 0, 0, 0.08); |
|
||||
border-radius: 16px; |
|
||||
top: 462px; |
|
||||
left: 50%; |
|
||||
margin-left: -427px; |
|
||||
.title { |
|
||||
font-weight: 700; |
|
||||
font-size: 32px; |
|
||||
font-family: 'font_bold'; |
|
||||
text-align: center; |
|
||||
color: rgba(0, 0, 0, 0.8); |
|
||||
padding-bottom: 40px; |
|
||||
padding-top: 56px; |
|
||||
} |
|
||||
.sub { |
|
||||
text-align: center; |
|
||||
font-weight: 700; |
|
||||
font-size: 24px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
margin-bottom: 24px; |
|
||||
} |
|
||||
.question-scroll { |
|
||||
position: relative; |
|
||||
padding-right: 16px; |
|
||||
overflow: hidden; |
|
||||
height: 788px; |
|
||||
background: rgba(0, 0, 0, 0.02); |
|
||||
.scroll { |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
padding: 80px 80px 0 117px; |
|
||||
:deep(.question_item) { |
|
||||
margin-right: 16px; |
|
||||
margin-bottom: 40px; |
|
||||
} |
|
||||
} |
|
||||
:deep(.bscroll-vertical-scrollbar) { |
|
||||
width: 6px !important; |
|
||||
right: 95px !important; |
|
||||
top: 80px !important; |
|
||||
background: rgba(0, 0, 0, 0.02) !important; |
|
||||
border-radius: 6px !important; |
|
||||
opacity: 1 !important; |
|
||||
height: 152px !important; |
|
||||
|
|
||||
.bscroll-indicator { |
|
||||
height: 95px !important; |
|
||||
width: 6px !important; |
|
||||
background: rgba(0, 0, 0, 0.1) !important; |
|
||||
border-radius: 6px !important; |
|
||||
border: none !important; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.close { |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
position: absolute; |
|
||||
top: 12px; |
|
||||
right: 12px; |
|
||||
width: 56px; |
|
||||
height: 56px; |
|
||||
background: rgba(0, 0, 0, 0.02); |
|
||||
border-radius: 12px; |
|
||||
img { |
|
||||
width: 56px; |
|
||||
height: 56px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,193 +0,0 @@ |
|||||
<template> |
|
||||
<div class="question_item" @click="handleQuestion"> |
|
||||
<h1 class="prefix_title">停车相关</h1> |
|
||||
<h1 class="prefix_sub">如：停车如何收费</h1> |
|
||||
<p class="prefix_detail">MORE</p> |
|
||||
</div> |
|
||||
|
|
||||
<Teleport to="body"> |
|
||||
<Transition enter-active-class="animate__animated animate__fadeInDown" leave-active-class="animate__animated animate__fadeOutUp"> |
|
||||
<div class="question-content" v-if="showQuestion"> |
|
||||
<div class="masker" @click="closeQuestionDetail"></div> |
|
||||
<div class="question-detail"> |
|
||||
<h1 class="title">商场相关常见问题</h1> |
|
||||
<h1 class="sub">停车相关</h1> |
|
||||
<ScrollView class="question-scroll" scrollbar> |
|
||||
<div class="questions"> |
|
||||
<div class="question" v-for="item of 10" :key="item"> |
|
||||
<div class="ask">问：停车如何收费？</div> |
|
||||
<div class="answer"> |
|
||||
答：迪奥小姐仿佛一曲爱之赞歌，承袭Christian |
|
||||
Dior迪奥先生心中的玫瑰挚恋及DIOR迪奥的高订格调，曼妙香韵，尽现摩登时尚、自由洒脱、优雅从容的风格。迪奥小姐玫舞轻旋淡香水，活力花香调。 |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</ScrollView> |
|
||||
<div class="close" @click="closeQuestionDetail"> |
|
||||
<img src="../../assets/images/detail/yellow_close.png" alt="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</Transition> |
|
||||
</Teleport> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { ref } from 'vue' |
|
||||
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|
||||
|
|
||||
defineProps({ |
|
||||
list: { |
|
||||
type: Array, |
|
||||
default: () => [] |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
const showQuestion = ref(false) |
|
||||
function handleQuestion() { |
|
||||
showQuestion.value = true |
|
||||
} |
|
||||
function closeQuestionDetail() { |
|
||||
showQuestion.value = false |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.question_item { |
|
||||
width: 175px; |
|
||||
height: 225px; |
|
||||
background: #ffffff; |
|
||||
box-shadow: 0px 20px 40px rgba(31, 46, 84, 0.04); |
|
||||
border-radius: 12px; |
|
||||
.prefix_title { |
|
||||
font-weight: 700; |
|
||||
font-size: 20px; |
|
||||
color: rgba(0, 0, 0, 0.8); |
|
||||
font-family: 'font_bold'; |
|
||||
padding: 32px 20px 15px 32px; |
|
||||
@include no-wrap; |
|
||||
} |
|
||||
.prefix_sub { |
|
||||
font-size: 14px; |
|
||||
padding: 0 20px 75px 32px; |
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05); |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
@include no-wrap; |
|
||||
} |
|
||||
.prefix_detail { |
|
||||
padding-top: 23px; |
|
||||
font-family: 'font_bold'; |
|
||||
padding-left: 32px; |
|
||||
font-weight: 700; |
|
||||
font-size: 16px; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.question-content { |
|
||||
position: fixed; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
z-index: 999; |
|
||||
animation-duration: 0.2s; |
|
||||
} |
|
||||
.masker { |
|
||||
position: fixed; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
} |
|
||||
|
|
||||
.question-detail { |
|
||||
position: absolute; |
|
||||
width: 854px; |
|
||||
height: 964px; |
|
||||
background: #ffffff; |
|
||||
box-shadow: 0px 40px 60px rgba(0, 0, 0, 0.08); |
|
||||
border-radius: 16px; |
|
||||
top: 462px; |
|
||||
left: 50%; |
|
||||
margin-left: -427px; |
|
||||
.title { |
|
||||
font-weight: 700; |
|
||||
font-size: 32px; |
|
||||
font-family: 'font_bold'; |
|
||||
text-align: center; |
|
||||
color: rgba(0, 0, 0, 0.8); |
|
||||
padding-bottom: 40px; |
|
||||
padding-top: 56px; |
|
||||
} |
|
||||
.sub { |
|
||||
text-align: center; |
|
||||
font-weight: 700; |
|
||||
font-size: 24px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
margin-bottom: 24px; |
|
||||
} |
|
||||
.question-scroll { |
|
||||
position: relative; |
|
||||
margin-left: 56px; |
|
||||
margin-right: 34px; |
|
||||
padding-right: 16px; |
|
||||
overflow: hidden; |
|
||||
height: 788px; |
|
||||
:deep(.bscroll-vertical-scrollbar) { |
|
||||
width: 6px !important; |
|
||||
background: rgba(0, 0, 0, 0.02) !important; |
|
||||
border-radius: 6px !important; |
|
||||
opacity: 1 !important; |
|
||||
height: 152px !important; |
|
||||
|
|
||||
.bscroll-indicator { |
|
||||
height: 95px !important; |
|
||||
width: 6px !important; |
|
||||
background: rgba(0, 0, 0, 0.1) !important; |
|
||||
border-radius: 6px !important; |
|
||||
border: none !important; |
|
||||
} |
|
||||
} |
|
||||
.questions { |
|
||||
padding-bottom: 24px; |
|
||||
} |
|
||||
.question { |
|
||||
margin-bottom: 24px; |
|
||||
padding: 40px; |
|
||||
background: rgba(0, 0, 0, 0.02); |
|
||||
border-radius: 12px; |
|
||||
} |
|
||||
.ask { |
|
||||
font-weight: 700; |
|
||||
font-size: 18px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
margin-bottom: 16px; |
|
||||
} |
|
||||
.answer { |
|
||||
font-size: 16px; |
|
||||
line-height: 200%; |
|
||||
text-align: justify; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.close { |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
position: absolute; |
|
||||
top: 12px; |
|
||||
right: 12px; |
|
||||
width: 56px; |
|
||||
height: 56px; |
|
||||
background: rgba(0, 0, 0, 0.02); |
|
||||
border-radius: 12px; |
|
||||
img { |
|
||||
width: 56px; |
|
||||
height: 56px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,396 +0,0 @@ |
|||||
<template> |
|
||||
<Dialog @close="close"> |
|
||||
<div class="bar"> |
|
||||
<div class="icon" :style="{ backgroundImage: `url(${theme.images.searchIcon})` }"></div> |
|
||||
<div class="stick"></div> |
|
||||
<div v-if="!keywords" class="placeholder">请输入中英文<span class="meta">首字母</span>查询，例如 XBK (星巴克)</div> |
|
||||
<input v-else @click="setSearch" v-model="keywords" type="text" readonly class="input" /> |
|
||||
<img :src="theme.images.searchClear" class="clear" v-if="keywords" @click="clear" /> |
|
||||
</div> |
|
||||
<div class="search-content"> |
|
||||
<div class="top" v-if="!showVoice"> |
|
||||
<div class="facs"> |
|
||||
<h1 class="title">公共设施</h1> |
|
||||
<div class="facility-list"> |
|
||||
<FacilityItem @click="_handleFacility(item)" class="margin" :facility="item" v-for="item of facilityList" :key="item.title" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="keyboard-wrapper"> |
|
||||
<div class="tabs tabs-wrapper"> |
|
||||
<div class="tab" :class="{ active: tabIdx === index }" @click="handleTab(index)" v-for="(item, index) of list" :key="item.name"> |
|
||||
<img :src="tabIdx === index ? item.iconActive : item.icon" alt="" /> |
|
||||
{{ item.name }} |
|
||||
</div> |
|
||||
</div> |
|
||||
<KeyboardByLetter @del="del" @handle-letter="handleLetter" v-if="tabIdx === 0" /> |
|
||||
<KeyboardByWritten @del="del" @handle-word="handleLetter" v-else /> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="recs" v-show="!keywords.length && !showVoice"> |
|
||||
<h1 class="title">大家都在找</h1> |
|
||||
<div class="hot-scroll"> |
|
||||
<div class="item" v-for="(item, i) of hotRecommend" :key="item.shopId" @click="handleShop(item)"> |
|
||||
<div class="text">{{ item.shopName }}</div> |
|
||||
<img class="medal" v-if="i === 0" src="@/views/Index/fir.svg" /> |
|
||||
<img class="medal" v-if="i === 1" src="@/views/Index/sec.svg" /> |
|
||||
<img class="medal" v-if="i === 2" src="@/views/Index/thi.svg" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<SearchResultList @handle-shop="handleShop" :list="searchShopListRef" :config="config" v-if="keywords.length && !showVoice" /> |
|
||||
|
|
||||
<Voice @handle-question="showClassify = true" v-if="showVoice" /> |
|
||||
</div> |
|
||||
<img :src="theme.images.searchClose" class="search-btn" @click="close" /> |
|
||||
</Dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { computed, defineAsyncComponent, ref, onBeforeUnmount } from 'vue' |
|
||||
import { useRouter } from 'vue-router' |
|
||||
import { storeToRefs } from 'pinia' |
|
||||
import { useStore } from '@/store/root' |
|
||||
|
|
||||
import { useSearchShop } from '@/composables/useSearchShop' |
|
||||
import { useFacilityNav } from '@/composables/useFacilityNav' |
|
||||
import { useStatistics } from '@/composables/useStatistics' |
|
||||
import Dialog from '@/layouts/Dialog.vue' |
|
||||
import FacilityItem from '@/base/FacilityItem/FacilityItem.vue' |
|
||||
import SearchResultList from '@/components/SearchResultList/SearchResultList.vue' |
|
||||
|
|
||||
const KeyboardByLetter = defineAsyncComponent(() => import('@/components/KeyboardByLetter/KeyboardByLetter.vue')) |
|
||||
const KeyboardByWritten = defineAsyncComponent(() => import('@/components/KeyboardByWritten/KeyboardByWritten.vue')) |
|
||||
const Voice = defineAsyncComponent(() => import('@/components/Voice/Voice.vue')) |
|
||||
|
|
||||
const MAX_LENGTH = 7 |
|
||||
|
|
||||
const { _handleFacility } = useFacilityNav() |
|
||||
|
|
||||
const router = useRouter() |
|
||||
|
|
||||
const store = useStore() |
|
||||
const { indexList, shopList, facilityList, config, showVoice, theme } = storeToRefs(store) |
|
||||
|
|
||||
const list = computed(() => |
|
||||
theme.value |
|
||||
? [ |
|
||||
{ |
|
||||
name: '键盘输入', |
|
||||
nameEn: 'keyboard input', |
|
||||
icon: theme.value.images.keyboard, |
|
||||
iconActive: theme.value.images.keyboard_active |
|
||||
}, |
|
||||
{ |
|
||||
name: '手写输入', |
|
||||
nameEn: 'handwriting input', |
|
||||
icon: theme.value.images.write, |
|
||||
iconActive: theme.value.images.write_active |
|
||||
} |
|
||||
] |
|
||||
: [] |
|
||||
) |
|
||||
|
|
||||
const hotRecommend = computed(() => indexList.value.hotSearch ?? []) |
|
||||
const showClassify = ref(false) |
|
||||
|
|
||||
async function handleShop(item) { |
|
||||
useStatistics('brandSearch') |
|
||||
const shop = shopList.value.find(_shop => _shop.shopId === item.shopId) |
|
||||
store.SET_SHOP(shop) |
|
||||
if (router.currentRoute.value.fullPath !== '/guide') { |
|
||||
store.SET_SELECTED_MODULE('Guide') |
|
||||
await router.push('/guide') |
|
||||
} |
|
||||
store.SET_SHOW_SEARCH(false) |
|
||||
} |
|
||||
|
|
||||
const tabIdx = ref(0) |
|
||||
function handleTab(index) { |
|
||||
tabIdx.value = index |
|
||||
} |
|
||||
|
|
||||
const keywords = ref('') |
|
||||
const searchType = ref(0) //0: 键盘 1: 手写 |
|
||||
const { searchShopListRef } = useSearchShop(keywords, searchType) |
|
||||
function handleLetter(item) { |
|
||||
if (keywords.value.length >= MAX_LENGTH) return |
|
||||
keywords.value += item |
|
||||
} |
|
||||
function del() { |
|
||||
keywords.value = keywords.value.substring(0, keywords.value.length - 1) |
|
||||
} |
|
||||
const clear = () => { |
|
||||
keywords.value = '' |
|
||||
} |
|
||||
|
|
||||
function setSearch() { |
|
||||
showVoice.value && store.SET_SHOW_VOICE(false) |
|
||||
} |
|
||||
|
|
||||
function close() { |
|
||||
store.SET_SHOW_SEARCH(false) |
|
||||
} |
|
||||
|
|
||||
onBeforeUnmount(() => { |
|
||||
showVoice.value && store.SET_SHOW_VOICE(false) |
|
||||
}) |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
:deep(.header-left) { |
|
||||
padding-left: 80px; |
|
||||
} |
|
||||
:deep(.view-container) { |
|
||||
position: relative; |
|
||||
z-index: 50; |
|
||||
} |
|
||||
.bar { |
|
||||
position: fixed; |
|
||||
top: 260px; |
|
||||
left: 68px; |
|
||||
right: 68px; |
|
||||
background: var(--search-barBackground); |
|
||||
border: var(--searchBar-border); |
|
||||
box-shadow: 0px 15px 24px rgba(0, 0, 0, 0.05); |
|
||||
border-radius: var(--searchBar-borderRadius); |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
padding-right: 10px; |
|
||||
padding-left: 40px; |
|
||||
height: 100px; |
|
||||
z-index: 52; |
|
||||
.icon { |
|
||||
width: 56px; |
|
||||
height: 56px; |
|
||||
background: center / cover no-repeat; |
|
||||
} |
|
||||
.stick { |
|
||||
width: 4px; |
|
||||
height: 38px; |
|
||||
background: var(--searchBar-stickBg); |
|
||||
margin: 0 32px; |
|
||||
} |
|
||||
.placeholder { |
|
||||
font-weight: 700; |
|
||||
font-size: 20px; |
|
||||
line-height: 23px; |
|
||||
color: var(--searchBar-placeholderColor); |
|
||||
.meta { |
|
||||
color: var(--search-placeholderMetaColor); |
|
||||
} |
|
||||
} |
|
||||
.input { |
|
||||
flex: 1; |
|
||||
border: none; |
|
||||
outline: none; |
|
||||
width: 262px; |
|
||||
background: transparent; |
|
||||
font-weight: 700; |
|
||||
font-size: 48px; |
|
||||
line-height: 59px; |
|
||||
color: var(--searchBar-color); |
|
||||
} |
|
||||
.clear { |
|
||||
display: flex; |
|
||||
width: 80px; |
|
||||
height: 80px; |
|
||||
} |
|
||||
.voice-icon { |
|
||||
width: 190px; |
|
||||
} |
|
||||
} |
|
||||
.search-content { |
|
||||
position: absolute; |
|
||||
top: 315px; |
|
||||
right: 40px; |
|
||||
bottom: 302px; |
|
||||
left: 40px; |
|
||||
background: var(--search-background); |
|
||||
backdrop-filter: blur(10px); |
|
||||
border-radius: var(--searchBar-borderRadius); |
|
||||
z-index: 2; |
|
||||
overflow: hidden; |
|
||||
|
|
||||
.top { |
|
||||
height: 460px; |
|
||||
background: var(--search-topBg, rgba(255, 255, 255, 0.6)); |
|
||||
border-radius: var(--searchBar-borderRadius); |
|
||||
margin: 10px 10px 48px 10px; |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
padding-left: 46px; |
|
||||
overflow: hidden; |
|
||||
.facs { |
|
||||
.title { |
|
||||
font-weight: 900; |
|
||||
font-size: 24px; |
|
||||
line-height: 28px; |
|
||||
color: var(--search-facTitleColor); |
|
||||
} |
|
||||
width: 300px; |
|
||||
padding-top: 111px; |
|
||||
.facility-list { |
|
||||
display: grid; |
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr; |
|
||||
width: 264px; |
|
||||
margin-top: 40px; |
|
||||
gap: 12px 24px; |
|
||||
} |
|
||||
} |
|
||||
.tabs-wrapper { |
|
||||
display: flex; |
|
||||
width: 100%; |
|
||||
height: 64px; |
|
||||
background: var(--search-tabsBg, rgba(0, 0, 0, 0.05)); |
|
||||
border-radius: var(--global-radius, 12px); |
|
||||
overflow: hidden; |
|
||||
|
|
||||
.tab { |
|
||||
height: 100%; |
|
||||
flex: 1; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
color: var(--search-tabColor, rgba(0, 0, 0, 0.6)); |
|
||||
border-radius: var(--global-radius, 12px); |
|
||||
&.active { |
|
||||
background: var(--search-tabActiveBg, #ffffff); |
|
||||
color: var(--search-tabActiveColor, rgba(0, 0, 0, 0.8)); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
img { |
|
||||
width: 24px; |
|
||||
height: 24px; |
|
||||
margin-right: 12px; |
|
||||
} |
|
||||
} |
|
||||
.keyboard-wrapper { |
|
||||
flex: 1; |
|
||||
padding-top: 75px; |
|
||||
padding-left: 36px; |
|
||||
background: rgba(0, 0, 0, 0.05); |
|
||||
padding-right: 38px; |
|
||||
.tabs { |
|
||||
padding-right: 8px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.recs { |
|
||||
padding-left: 56px; |
|
||||
.title { |
|
||||
color: var(--search-hotSearchTitleColor); |
|
||||
} |
|
||||
.hot-scroll { |
|
||||
padding-top: 16px; |
|
||||
white-space: nowrap; |
|
||||
width: 944px; |
|
||||
|
|
||||
.item { |
|
||||
position: relative; |
|
||||
display: inline-block; |
|
||||
max-width: 170px; |
|
||||
height: 52px; |
|
||||
background: var(--search-hotSearchBg); |
|
||||
border-radius: var(--global-radius, 100px); |
|
||||
.text { |
|
||||
text-align: center; |
|
||||
font-weight: 900; |
|
||||
font-size: 16px; |
|
||||
line-height: 52px; |
|
||||
color: var(--search-hotSearchColor); |
|
||||
overflow: hidden; |
|
||||
white-space: nowrap; |
|
||||
text-overflow: ellipsis; |
|
||||
padding: 0 32px; |
|
||||
} |
|
||||
.medal { |
|
||||
position: absolute; |
|
||||
width: 32px; |
|
||||
height: 32px; |
|
||||
left: 4px; |
|
||||
top: -10px; |
|
||||
} |
|
||||
} |
|
||||
.item + .item { |
|
||||
margin-left: 24px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.search-right { |
|
||||
position: relative; |
|
||||
background: rgba(255, 255, 255, 0.6); |
|
||||
padding-top: 180px; |
|
||||
padding-left: 64px; |
|
||||
width: 696px; |
|
||||
|
|
||||
.title, |
|
||||
.title-en { |
|
||||
margin-right: 76px; |
|
||||
} |
|
||||
} |
|
||||
.search-btn { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
position: fixed; |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
margin: auto; |
|
||||
bottom: 242px; |
|
||||
width: 120px; |
|
||||
height: 120px; |
|
||||
z-index: 52; |
|
||||
} |
|
||||
@media (min-aspect-ratio: 1/1) { |
|
||||
.search-content { |
|
||||
top: 87px; |
|
||||
right: 125px; |
|
||||
bottom: 87px; |
|
||||
left: 125px; |
|
||||
padding: 100px 670px 0 0; |
|
||||
.top { |
|
||||
position: absolute; |
|
||||
top: 10px; |
|
||||
right: 10px; |
|
||||
bottom: 10px; |
|
||||
width: 660px; |
|
||||
height: auto; |
|
||||
margin: 0; |
|
||||
padding-left: 0; |
|
||||
flex-direction: column; |
|
||||
.facs { |
|
||||
width: auto; |
|
||||
flex: 1; |
|
||||
padding-top: 90px; |
|
||||
padding: 90px 54px; |
|
||||
.facility-list { |
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; |
|
||||
} |
|
||||
} |
|
||||
.keyboard-wrapper { |
|
||||
flex: 0 0 456px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.bar { |
|
||||
top: 32px; |
|
||||
width: 698px; |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
margin: auto; |
|
||||
} |
|
||||
.search-btn { |
|
||||
left: auto; |
|
||||
bottom: auto; |
|
||||
right: 145px; |
|
||||
top: 107px; |
|
||||
width: 87px; |
|
||||
height: 87px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
|
Before Width: | Height: | Size: 760 B |
|
Before Width: | Height: | Size: 5.2 KiB |
@ -1,40 +0,0 @@ |
|||||
export const letter = [ |
|
||||
1, |
|
||||
2, |
|
||||
3, |
|
||||
4, |
|
||||
5, |
|
||||
6, |
|
||||
7, |
|
||||
8, |
|
||||
9, |
|
||||
0, |
|
||||
'Q', |
|
||||
'W', |
|
||||
'E', |
|
||||
'R', |
|
||||
'T', |
|
||||
'Y', |
|
||||
'U', |
|
||||
'I', |
|
||||
'O', |
|
||||
'P', |
|
||||
'A', |
|
||||
'S', |
|
||||
'D', |
|
||||
'F', |
|
||||
'G', |
|
||||
'H', |
|
||||
'J', |
|
||||
'K', |
|
||||
'L', |
|
||||
'Z', |
|
||||
'X', |
|
||||
'C', |
|
||||
'V', |
|
||||
'B', |
|
||||
'N', |
|
||||
'M', |
|
||||
'空格', |
|
||||
'del' |
|
||||
] |
|
||||
@ -1,84 +0,0 @@ |
|||||
<template> |
|
||||
<div class="item" @click="handleShop"> |
|
||||
<div class="icon-wrapper"> |
|
||||
<img :src="config.sourceUrl + shop.logoUrl" class="icon" alt="" /> |
|
||||
</div> |
|
||||
<div class="item-bottom"> |
|
||||
<div class="left">{{ switchLanguage(shop, 'shopName') }}</div> |
|
||||
|
|
||||
<div class="right">{{ shop.floor }}</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
const props = defineProps({ |
|
||||
shop: { |
|
||||
type: Object, |
|
||||
default: () => ({}) |
|
||||
}, |
|
||||
config: { |
|
||||
type: Object, |
|
||||
default: () => ({}) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
const emits = defineEmits(['click']) |
|
||||
function handleShop() { |
|
||||
emits('click', props.shop) |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.item { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
width: 210px; |
|
||||
height: 200px; |
|
||||
background: var(--brand-background); |
|
||||
border-radius: var(--global-radius, 8px); |
|
||||
margin-right: 8px; |
|
||||
margin-top: 24px; |
|
||||
.icon-wrapper { |
|
||||
display: flex; |
|
||||
width: 210px; |
|
||||
height: 160px; |
|
||||
background: #ffffff; |
|
||||
border-radius: var(--global-radius, 8px); |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
.icon { |
|
||||
width: 120px; |
|
||||
height: 120px; |
|
||||
object-fit: contain; |
|
||||
} |
|
||||
} |
|
||||
.item-bottom { |
|
||||
display: flex; |
|
||||
width: 100%; |
|
||||
flex: 1; |
|
||||
padding: 0 12px; |
|
||||
align-items: center; |
|
||||
|
|
||||
.left, |
|
||||
.right { |
|
||||
font-weight: 700; |
|
||||
font-size: 14px; |
|
||||
line-height: 16px; |
|
||||
} |
|
||||
.left { |
|
||||
flex: 1; |
|
||||
white-space: nowrap; |
|
||||
overflow: hidden; |
|
||||
text-overflow: ellipsis; |
|
||||
color: var(--brand-color); |
|
||||
} |
|
||||
.right { |
|
||||
width: 40px; |
|
||||
text-align: right; |
|
||||
color: var(--brand-metaColor); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,140 +0,0 @@ |
|||||
<template> |
|
||||
<ScrollView :list="list" class="search-result-scroll" :scrollbar="true"> |
|
||||
<div class="scroll-result"> |
|
||||
<h1 class="title"> |
|
||||
搜索结果 <span class="meta">/ {{ list.length }}</span> |
|
||||
</h1> |
|
||||
<TransitionGroup name="zoom" tag="div" class="list"> |
|
||||
<SearchResultItem :config="config" @click="handleShop" :shop="item" v-for="item of list" :key="item.shopId" /> |
|
||||
</TransitionGroup> |
|
||||
</div> |
|
||||
</ScrollView> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|
||||
import SearchResultItem from '@/components/SearchResultItem/SearchResultItem.vue' |
|
||||
defineProps({ |
|
||||
list: { |
|
||||
type: Array, |
|
||||
default: () => [] |
|
||||
}, |
|
||||
config: { |
|
||||
type: Object, |
|
||||
default: () => ({}) |
|
||||
} |
|
||||
}) |
|
||||
const emits = defineEmits(['handle-shop']) |
|
||||
|
|
||||
function handleShop(item) { |
|
||||
emits('handle-shop', item) |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.search-result-scroll { |
|
||||
position: relative; |
|
||||
height: 842px; |
|
||||
overflow: hidden; |
|
||||
margin-left: 68px; |
|
||||
margin-right: 7px; |
|
||||
.scroll-result { |
|
||||
padding-bottom: 200px; |
|
||||
} |
|
||||
|
|
||||
.list { |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
margin-bottom: 44px; |
|
||||
} |
|
||||
.activity { |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
.flex { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
justify-content: space-between; |
|
||||
} |
|
||||
.pl-24 { |
|
||||
padding-left: 24px; |
|
||||
} |
|
||||
.activity-item { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
padding: 0 8px; |
|
||||
|
|
||||
width: 457px; |
|
||||
height: 84px; |
|
||||
background: rgba(255, 255, 255, 0.8); |
|
||||
border-radius: 12px; |
|
||||
margin-right: 6px; |
|
||||
margin-bottom: 8px; |
|
||||
.activity-name { |
|
||||
font-weight: 700; |
|
||||
font-size: 18px; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
font-family: 'font_bold'; |
|
||||
padding-bottom: 16px; |
|
||||
} |
|
||||
.intro { |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
font-size: 14px; |
|
||||
} |
|
||||
.img-wrapper { |
|
||||
width: 120px; |
|
||||
height: 68px; |
|
||||
margin-right: 24px; |
|
||||
border-radius: 8px; |
|
||||
|
|
||||
.img { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
border-radius: 8px; |
|
||||
object-fit: cover; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.title { |
|
||||
font-style: normal; |
|
||||
font-weight: 900; |
|
||||
font-size: 24px; |
|
||||
line-height: 28px; |
|
||||
color: var(--search-resultTitleColor, rgba(0, 0, 0, 0.8)); |
|
||||
.meta { |
|
||||
font-weight: 500; |
|
||||
font-size: 20px; |
|
||||
line-height: 23px; |
|
||||
color: var(--search-resultMetaColor, rgba(0, 0, 0, 0.6)); |
|
||||
} |
|
||||
} |
|
||||
:deep(.bscroll-vertical-scrollbar) { |
|
||||
width: 48px !important; |
|
||||
background: center / 6px 250px no-repeat url(@/assets/images/scrollBar.png); |
|
||||
border-radius: 6px; |
|
||||
opacity: 1 !important; |
|
||||
height: 250px !important; |
|
||||
&::after { |
|
||||
position: absolute; |
|
||||
content: ''; |
|
||||
left: 0; |
|
||||
|
|
||||
top: 120px; |
|
||||
margin: auto; |
|
||||
width: 48px; |
|
||||
height: 61px; |
|
||||
background: center / cover no-repeat url(@/assets/images/scrollHand.png); |
|
||||
} |
|
||||
.bscroll-indicator { |
|
||||
height: 95px !important; |
|
||||
width: 6px !important; |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
margin: auto; |
|
||||
background: #ffffff !important; |
|
||||
border-radius: 6px !important; |
|
||||
border: none !important; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,86 +0,0 @@ |
|||||
<template> |
|
||||
<ScrollView class="serve-scroll" :list="serveList"> |
|
||||
<TransitionGroup name="zoom" tag="div" class="serve-content"> |
|
||||
<div class="serve-item" v-for="item of serveList" :key="item.name"> |
|
||||
<div class="white-bg"> |
|
||||
<div class="icon-box"> |
|
||||
<img class="icon" :src="config.sourceUrl + item.fileUrl" alt="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<p class="name">{{ item.name }}</p> |
|
||||
<p class="en">{{ item.nameEn }}</p> |
|
||||
</div> |
|
||||
</TransitionGroup> |
|
||||
</ScrollView> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { ref } from 'vue' |
|
||||
import { storeToRefs } from 'pinia' |
|
||||
import { useStore } from '@/store/root' |
|
||||
import { getServeList } from '@/http/api' |
|
||||
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|
||||
|
|
||||
const store = useStore() |
|
||||
const { config } = storeToRefs(store) |
|
||||
|
|
||||
const serveList = ref([]) |
|
||||
getServeList().then(({ data }) => { |
|
||||
serveList.value = data?.serveList ?? [] |
|
||||
}) |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.serve-scroll { |
|
||||
position: relative; |
|
||||
overflow: hidden; |
|
||||
margin-left: 170px; |
|
||||
margin-right: 24px; |
|
||||
margin-top: 58px; |
|
||||
height: 1560px; |
|
||||
.serve-content { |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
.serve-item { |
|
||||
width: 279px; |
|
||||
height: 225px; |
|
||||
// TODO 需动态切换背景色 |
|
||||
background: #fcf8ec; |
|
||||
box-shadow: 0px 20px 40px rgba(31, 46, 84, 0.04); |
|
||||
border-radius: 12px; |
|
||||
margin-right: 16px; |
|
||||
margin-bottom: 29px; |
|
||||
.white-bg { |
|
||||
height: 147px; |
|
||||
background: #fff; |
|
||||
border-radius: 12px; |
|
||||
padding: 32px; |
|
||||
margin-bottom: 20px; |
|
||||
} |
|
||||
.icon-box { |
|
||||
width: 56px; |
|
||||
height: 56px; |
|
||||
.icon { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
object-fit: contain; |
|
||||
} |
|
||||
} |
|
||||
.name { |
|
||||
font-weight: 700; |
|
||||
font-family: 'font_bold'; |
|
||||
font-size: 16px; |
|
||||
padding-left: 32px; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
padding-bottom: 6px; |
|
||||
} |
|
||||
.en { |
|
||||
font-weight: 400; |
|
||||
font-size: 12px; |
|
||||
padding-left: 32px; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,104 +0,0 @@ |
|||||
<template> |
|
||||
<div class="sidebar-wrapper"> |
|
||||
<div class="menu-list" @click="goPage(item)" :class="{ active: selectedModule === item.title }" v-for="item of sidebarList" :key="item.title"> |
|
||||
<img :src="item.icon" alt="" /> |
|
||||
<span class="text">{{ item.title }}</span> |
|
||||
<span class="text-en">{{ item.titleEn }}</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { storeToRefs } from 'pinia' |
|
||||
import { useStore } from '@/store/root' |
|
||||
import { useRouter } from 'vue-router' |
|
||||
|
|
||||
const router = useRouter() |
|
||||
const store = useStore() |
|
||||
const { sidebarList, selectedModule } = storeToRefs(store) |
|
||||
|
|
||||
function goPage(item) { |
|
||||
store.SET_SELECTED_MODULE(item.title) |
|
||||
router.push(item.path) |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.sidebar-wrapper { |
|
||||
position: fixed; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
width: 130px; |
|
||||
height: 1920px; |
|
||||
left: 0px; |
|
||||
top: 0; |
|
||||
background: var(--color-white-opacity-8); |
|
||||
box-shadow: var(--shadow-seven); |
|
||||
backdrop-filter: blur(20px); |
|
||||
z-index: 50; |
|
||||
|
|
||||
.menu-list { |
|
||||
position: relative; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
width: 110px; |
|
||||
height: 140px; |
|
||||
margin-bottom: 10px; |
|
||||
|
|
||||
&::before, |
|
||||
&::after { |
|
||||
position: absolute; |
|
||||
content: ''; |
|
||||
width: 110px; |
|
||||
height: 140px; |
|
||||
left: 0; |
|
||||
bottom: 0; |
|
||||
border-radius: 8px; |
|
||||
transition: bottom 0.5s; |
|
||||
} |
|
||||
|
|
||||
&.active { |
|
||||
&::before { |
|
||||
background-color: #fff; |
|
||||
z-index: 3; |
|
||||
bottom: 4px; |
|
||||
} |
|
||||
|
|
||||
&::after { |
|
||||
background: var(--color-linear-lightgoldenyellow); |
|
||||
z-index: 2; |
|
||||
bottom: 0; |
|
||||
height: 136px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
img { |
|
||||
position: relative; |
|
||||
width: 80px; |
|
||||
height: 80px; |
|
||||
z-index: 10; |
|
||||
} |
|
||||
|
|
||||
.text { |
|
||||
position: relative; |
|
||||
z-index: 10; |
|
||||
color: var(--color-black-opacity-6); |
|
||||
font-family: 'font_bold'; |
|
||||
font-weight: 700; |
|
||||
font-size: 14px; |
|
||||
padding: 4px 0; |
|
||||
} |
|
||||
|
|
||||
.text-en { |
|
||||
position: relative; |
|
||||
z-index: 10; |
|
||||
color: var(--color-black-opacity-4); |
|
||||
font-size: 12px; |
|
||||
transform: scale(0.83); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,72 +0,0 @@ |
|||||
export const sidebarList = [ |
|
||||
{ |
|
||||
icon: require('@/assets/images/sidebar/activity.png'), |
|
||||
title: '商场活动', |
|
||||
moduleName: 'activity', |
|
||||
titleEn: 'SELECTION', |
|
||||
path: '/activity' |
|
||||
}, |
|
||||
{ |
|
||||
icon: require('@/assets/images/sidebar/member.png'), |
|
||||
title: '尊享会员', |
|
||||
moduleName: 'member', |
|
||||
titleEn: 'MEMBER', |
|
||||
path: '/member' |
|
||||
}, |
|
||||
{ |
|
||||
icon: require('@/assets/images/sidebar/parking.png'), |
|
||||
title: '泊车缴费', |
|
||||
moduleName: 'parking', |
|
||||
titleEn: 'PARKING', |
|
||||
path: '/parking' |
|
||||
}, |
|
||||
{ |
|
||||
icon: require('@/assets/images/sidebar/movie.png'), |
|
||||
title: '影视天地', |
|
||||
moduleName: 'movie', |
|
||||
titleEn: 'MOVIE', |
|
||||
path: '/movie' |
|
||||
}, |
|
||||
{ |
|
||||
icon: require('@/assets/images/sidebar/mall.png'), |
|
||||
title: '商场介绍', |
|
||||
moduleName: 'mall', |
|
||||
titleEn: 'MALL', |
|
||||
path: '/mall' |
|
||||
} |
|
||||
// {
|
|
||||
// icon: require('@/assets/images/sidebar/index.png'),
|
|
||||
// title: '首页',
|
|
||||
// moduleName: 'home',
|
|
||||
// titleEn: 'HOME',
|
|
||||
// path: '/'
|
|
||||
// },
|
|
||||
// {
|
|
||||
// icon: require('@/assets/images/sidebar/guide.png'),
|
|
||||
// title: '地图导览',
|
|
||||
// moduleName: 'home',
|
|
||||
// titleEn: 'MAP',
|
|
||||
// path: '/guide'
|
|
||||
// },
|
|
||||
// {
|
|
||||
// icon: require('@/assets/images/sidebar/brand.png'),
|
|
||||
// title: '品牌列表',
|
|
||||
// moduleName: 'brand',
|
|
||||
// titleEn: 'BRAND',
|
|
||||
// path: '/brand'
|
|
||||
// }
|
|
||||
// {
|
|
||||
// icon: require('@/assets/images/sidebar/foods.png'),
|
|
||||
// title: '特色美食',
|
|
||||
// moduleName: 'food',
|
|
||||
// titleEn: 'FOOD',
|
|
||||
// path: '/foods'
|
|
||||
// },
|
|
||||
// {
|
|
||||
// icon: require('@/assets/images/sidebar/service.png'),
|
|
||||
// title: '商场服务',
|
|
||||
// titleEn: 'SERVICE',
|
|
||||
// moduleName: 'service',
|
|
||||
// path: '/service'
|
|
||||
// }
|
|
||||
] |
|
||||
@ -1,57 +0,0 @@ |
|||||
<template> |
|
||||
<div class="tabs-wrapper"> |
|
||||
<div class="tab" :class="{ active: tabIdx === index }" @click="handleTab(index)" v-for="(item, index) of list" :key="item.name"> |
|
||||
<img :src="tabIdx === index ? item.iconActive : item.icon" alt="" /> |
|
||||
{{ item.name }} |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { ref } from 'vue' |
|
||||
|
|
||||
defineProps({ |
|
||||
list: { |
|
||||
type: Array, |
|
||||
default: () => [] |
|
||||
} |
|
||||
}) |
|
||||
const emits = defineEmits(['click']) |
|
||||
|
|
||||
const tabIdx = ref(0) |
|
||||
function handleTab(index) { |
|
||||
tabIdx.value = index |
|
||||
emits('click', index) |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.tabs-wrapper { |
|
||||
display: flex; |
|
||||
width: 100%; |
|
||||
height: 64px; |
|
||||
background: var(--search-tabsBg, rgba(0, 0, 0, 0.05)); |
|
||||
border-radius: var(--global-radius, 12px); |
|
||||
overflow: hidden; |
|
||||
|
|
||||
.tab { |
|
||||
height: 100%; |
|
||||
flex: 1; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
color: var(--search-tabColor, rgba(0, 0, 0, 0.6)); |
|
||||
border-radius: var(--global-radius, 12px); |
|
||||
&.active { |
|
||||
background: var(--search-tabActiveBg, #ffffff); |
|
||||
color: var(--search-tabActiveColor, rgba(0, 0, 0, 0.8)); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
img { |
|
||||
width: 24px; |
|
||||
height: 24px; |
|
||||
margin-right: 12px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,49 +0,0 @@ |
|||||
<template> |
|
||||
<div class="carousel"> |
|
||||
<EffectFade :list="list"> |
|
||||
<template v-slot="{ item }"> |
|
||||
<div class="banner-wrapper"> |
|
||||
<img :src="config.sourceUrl + item" alt="" class="banner" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
</EffectFade> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { ref } from 'vue' |
|
||||
import { storeToRefs } from 'pinia' |
|
||||
import { useStore } from '@/store/root' |
|
||||
import { getTrafficList } from '@/http/api' |
|
||||
import EffectFade from '../EffectFade/EffectFade.vue' |
|
||||
|
|
||||
const store = useStore() |
|
||||
const { config } = storeToRefs(store) |
|
||||
|
|
||||
const list = ref([]) |
|
||||
getTrafficList().then(({ data }) => { |
|
||||
list.value = data?.fileList ?? [] |
|
||||
}) |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.carousel { |
|
||||
position: relative; |
|
||||
width: 870px; |
|
||||
height: 1300px; |
|
||||
margin-top: 58px; |
|
||||
margin-left: 170px; |
|
||||
margin-right: 40px; |
|
||||
} |
|
||||
.banner-wrapper { |
|
||||
width: 870px; |
|
||||
height: 1300px; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
.banner { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
border-radius: 10px; |
|
||||
object-fit: cover; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,241 +0,0 @@ |
|||||
<template> |
|
||||
<div class="speech-wrapper" :class="{ active: !startSpeech }"> |
|
||||
<div class="lottie-box"> |
|
||||
<Lottie :isLocale="true" ref="lottieInstance" :path="lottie" v-show="startSpeech" /> |
|
||||
</div> |
|
||||
<div class="start-btn" @click="handleSpeech"> |
|
||||
<img src="../../assets/images/search/speech.png" alt="" /> |
|
||||
<span class="text">点我开始说话</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
<ScrollView class="voice-scroll"> |
|
||||
<div class="voice-content"> |
|
||||
<h1 class="title">试着问我一下这些问题吧</h1> |
|
||||
<div class="commons"> |
|
||||
<div class="common-question"> |
|
||||
<img class="img" src="/static/img/xsj.png" alt="" /> |
|
||||
<div class="common-right"> |
|
||||
<h1 class="sub">卫生间</h1> |
|
||||
<h1 class="desc">附近卫生间怎么走？</h1> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<h1 class="title">您还可查看更多商场相关问题</h1> |
|
||||
<div class="groups"> |
|
||||
<div class="box-group" @click="showCustomerDialog = true"> |
|
||||
<img src="../../assets/images/search/customer.png" class="icon" alt="" /> |
|
||||
<p class="text">转人工服务</p> |
|
||||
</div> |
|
||||
<div class="box-group" @click="handleMoreQuestion"> |
|
||||
<img src="../../assets/images/search/question.png" class="icon" alt="" /> |
|
||||
<p class="text">常见问题</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="dialog flex"> |
|
||||
<div class="customer">我想开小票</div> |
|
||||
</div> |
|
||||
<div class="dialog"> |
|
||||
<p class="machine">您可以尝试换一种提问方式，导航到服务台，或是拨打400-888-8888，或转人工服务</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</ScrollView> |
|
||||
<Teleport to="body"> |
|
||||
<Transition enter-active-class="animate__aniamted animate__zoomIn" leave-active-class="animate__aniamted animate__zoomOut"> |
|
||||
<Customer @close="showCustomerDialog = false" v-if="showCustomerDialog" /> |
|
||||
</Transition> |
|
||||
</Teleport> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { ref, nextTick, defineAsyncComponent } from 'vue' |
|
||||
import lottie from './voice.json' |
|
||||
import Lottie from '@/components/Lottie/Lottie.vue' |
|
||||
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|
||||
const Customer = defineAsyncComponent(() => import('@/components/Customer/Customer.vue')) |
|
||||
|
|
||||
const startSpeech = ref(false) |
|
||||
const lottieInstance = ref(null) |
|
||||
function handleSpeech() { |
|
||||
startSpeech.value = !startSpeech.value |
|
||||
nextTick(() => { |
|
||||
if (!startSpeech.value) { |
|
||||
lottieInstance.value.lottieInstance.stop() |
|
||||
} else { |
|
||||
lottieInstance.value.lottieInstance.play() |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
const emits = defineEmits(['handle-question']) |
|
||||
function handleMoreQuestion() { |
|
||||
emits('handle-question') |
|
||||
} |
|
||||
|
|
||||
const showCustomerDialog = ref(false) |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.speech-wrapper { |
|
||||
position: absolute; |
|
||||
left: 16px; |
|
||||
right: 16px; |
|
||||
top: 416px; |
|
||||
height: 360px; |
|
||||
:deep(svg) { |
|
||||
height: 85px !important; |
|
||||
} |
|
||||
|
|
||||
.lottie-box { |
|
||||
position: relative; |
|
||||
height: 115px; |
|
||||
margin-top: -42px; |
|
||||
&::before, |
|
||||
&::after { |
|
||||
content: ''; |
|
||||
position: absolute; |
|
||||
width: 328px; |
|
||||
top: 42px; |
|
||||
height: 2px; |
|
||||
background: linear-gradient(90deg, #ffbd35 0%, #ffd260 100%); |
|
||||
} |
|
||||
&::before { |
|
||||
left: 0; |
|
||||
} |
|
||||
&::after { |
|
||||
right: 0; |
|
||||
} |
|
||||
} |
|
||||
:deep(svg) { |
|
||||
transform: scale(3.5) !important; |
|
||||
} |
|
||||
.start-btn { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
position: absolute; |
|
||||
left: 50%; |
|
||||
top: 98px; |
|
||||
transform: translateX(-50%); |
|
||||
img { |
|
||||
width: 160px; |
|
||||
} |
|
||||
.text { |
|
||||
font-weight: 700; |
|
||||
font-size: 18px; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
font-family: 'font_bold'; |
|
||||
} |
|
||||
} |
|
||||
&.active { |
|
||||
&:before { |
|
||||
position: absolute; |
|
||||
content: ''; |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
height: 2px; |
|
||||
background: linear-gradient(90deg, #ffbd35 0%, #ffd260 100%); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.voice-scroll { |
|
||||
position: fixed; |
|
||||
top: 802px; |
|
||||
left: 80px; |
|
||||
right: 58px; |
|
||||
bottom: 0; |
|
||||
.title { |
|
||||
font-weight: 700; |
|
||||
font-size: 24px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
padding-bottom: 24px; |
|
||||
} |
|
||||
.commons { |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
margin-bottom: 56px; |
|
||||
} |
|
||||
.common-question { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
width: 352px; |
|
||||
height: 72px; |
|
||||
background: rgba(255, 255, 255, 0.8); |
|
||||
border-radius: 12px; |
|
||||
padding: 14px 24px; |
|
||||
margin-right: 8px; |
|
||||
margin-bottom: 8px; |
|
||||
.img { |
|
||||
width: 44px; |
|
||||
height: 44px; |
|
||||
margin-right: 24px; |
|
||||
} |
|
||||
.sub { |
|
||||
font-weight: 700; |
|
||||
font-size: 14px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
padding-bottom: 6px; |
|
||||
} |
|
||||
.desc { |
|
||||
color: rgba(0, 0, 0, 0.4); |
|
||||
font-size: 12px; |
|
||||
} |
|
||||
} |
|
||||
.groups { |
|
||||
display: flex; |
|
||||
} |
|
||||
.box-group { |
|
||||
width: 196px; |
|
||||
height: 177px; |
|
||||
background: #ffffff; |
|
||||
box-shadow: 0px 20px 40px rgba(31, 46, 84, 0.04); |
|
||||
border-radius: 12px; |
|
||||
margin-right: 16px; |
|
||||
margin-bottom: 24px; |
|
||||
.icon { |
|
||||
display: inline-block; |
|
||||
margin: 32px 0 32px 32px; |
|
||||
width: 48px; |
|
||||
} |
|
||||
.text { |
|
||||
font-weight: 700; |
|
||||
font-size: 16px; |
|
||||
line-height: 19px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
padding-left: 32px; |
|
||||
padding-top: 23px; |
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.machine { |
|
||||
display: inline-block; |
|
||||
padding: 24px 40px; |
|
||||
background: rgba(0, 0, 0, 0.05); |
|
||||
border-radius: 0px 32px 32px 32px; |
|
||||
font-size: 18px; |
|
||||
line-height: 21px; |
|
||||
color: #605e74; |
|
||||
margin-bottom: 16px; |
|
||||
} |
|
||||
.flex { |
|
||||
display: flex; |
|
||||
flex-direction: row-reverse; |
|
||||
} |
|
||||
|
|
||||
.customer { |
|
||||
padding: 24px 40px; |
|
||||
background: #ffffff; |
|
||||
font-weight: 700; |
|
||||
font-size: 24px; |
|
||||
line-height: 28px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
border-radius: 32px 0px 32px 32px; |
|
||||
text-align: right; |
|
||||
margin-bottom: 24px; |
|
||||
} |
|
||||
</style> |
|
||||
File diff suppressed because one or more lines are too long
@ -1,116 +0,0 @@ |
|||||
<template> |
|
||||
<ScrollView class="waterfall-scroll" :list="list" observe-image> |
|
||||
<TransitionGroup name="zoom" tag="div" class="waterfall-content-scroll"> |
|
||||
<div class="waterfall-item" v-for="item of list" @click="handleWaterfall(item)" :key="item.name"> |
|
||||
<img :src="config.sourceUrl + item.fileUrl" alt="" class="waterfall-img" /> |
|
||||
<div class="title-wrapper"> |
|
||||
<h6 class="waterfall-title">{{ switchLanguage(item, 'name') }}</h6> |
|
||||
<h5 class="sub" v-if="item?.shopId"> |
|
||||
<h6 class="waterfall-name">{{ switchLanguage(item, 'shopName') }}</h6> |
|
||||
<h6 class="house-num pb-32">{{ item.houseNumber }}</h6> |
|
||||
</h5> |
|
||||
</div> |
|
||||
</div> |
|
||||
</TransitionGroup> |
|
||||
</ScrollView> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { storeToRefs } from 'pinia' |
|
||||
import { useRouter } from 'vue-router' |
|
||||
import { useStore } from '@/store/root' |
|
||||
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|
||||
import Shop from '@/utils/Class/Shop' |
|
||||
|
|
||||
defineProps({ |
|
||||
list: { |
|
||||
type: Array, |
|
||||
default: () => [] |
|
||||
}, |
|
||||
config: { |
|
||||
type: Object, |
|
||||
default: () => ({}) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
const router = useRouter() |
|
||||
const store = useStore() |
|
||||
const { shopList } = storeToRefs(store) |
|
||||
|
|
||||
function handleWaterfall(item) { |
|
||||
let shop |
|
||||
if (item?.shopId) { |
|
||||
shop = shopList.value.find(_shop => _shop.shopId === item.shopId) |
|
||||
if (shop) { |
|
||||
store.SET_SHOP(shop) |
|
||||
store.SET_SHOW_DETAIL(true) |
|
||||
} |
|
||||
} else { |
|
||||
const { name, floorOrder, floor, logoUrl, point } = item |
|
||||
shop = new Shop(name, floorOrder, floor, logoUrl, point) |
|
||||
if (shop) { |
|
||||
store.SET_SHOP(shop) |
|
||||
router.push('/nav') |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.waterfall-scroll { |
|
||||
position: absolute; |
|
||||
left: 88px; |
|
||||
right: 70px; |
|
||||
top: 272px; |
|
||||
bottom: 0; |
|
||||
overflow: hidden; |
|
||||
z-index: 10; |
|
||||
border-radius: 12px; |
|
||||
|
|
||||
.waterfall-content-scroll { |
|
||||
column-count: 2; |
|
||||
padding-bottom: 16px; |
|
||||
} |
|
||||
.waterfall-item { |
|
||||
break-inside: avoid; |
|
||||
height: auto; |
|
||||
width: 440px; |
|
||||
background-color: var(--color-white-opacity); |
|
||||
margin-right: 24px; |
|
||||
margin-bottom: 16px; |
|
||||
overflow: hidden; |
|
||||
border-radius: 12px; |
|
||||
.waterfall-img { |
|
||||
width: 440px; |
|
||||
margin-bottom: 32px; |
|
||||
} |
|
||||
.title-wrapper { |
|
||||
padding-left: 32px; |
|
||||
padding-right: 32px; |
|
||||
} |
|
||||
.waterfall-title { |
|
||||
font-weight: 700; |
|
||||
font-size: 20px; |
|
||||
font-family: 'font_bold'; |
|
||||
color: var(--color-black-opacity-8); |
|
||||
padding-bottom: 13px; |
|
||||
@include no-wrap; |
|
||||
} |
|
||||
.sub { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
} |
|
||||
.waterfall-name, |
|
||||
.house-num { |
|
||||
font-weight: 700; |
|
||||
font-family: 'font_bold'; |
|
||||
font-size: 16px; |
|
||||
line-height: 19px; |
|
||||
color: var(--color-black-opacity-4); |
|
||||
} |
|
||||
.pb-32 { |
|
||||
padding-bottom: 32px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,171 +0,0 @@ |
|||||
<template> |
|
||||
<canvas :style="{ backgroundColor: backgroundColor, borderRadius: borderRadius }" ref="inkCanvasRef" :width="width" :height="height" id="ink-canvas"></canvas> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { reactive, computed, onMounted, onBeforeUnmount, watch, ref } from 'vue' |
|
||||
import { getHandWriting } from '@/http/api' |
|
||||
|
|
||||
const props = defineProps({ |
|
||||
width: { |
|
||||
type: Number, |
|
||||
default: 800 |
|
||||
}, |
|
||||
height: { |
|
||||
type: Number, |
|
||||
default: 800 |
|
||||
}, |
|
||||
lang: { |
|
||||
type: String, |
|
||||
default: 'CN', |
|
||||
validator(value) { |
|
||||
return ['CN', 'EN'].includes(value) |
|
||||
} |
|
||||
}, |
|
||||
backgroundColor: { |
|
||||
type: String, |
|
||||
default: '#f2f2f2' |
|
||||
}, |
|
||||
borderRadius: { |
|
||||
type: String, |
|
||||
default: '10px' |
|
||||
}, |
|
||||
fillText: { |
|
||||
type: String, |
|
||||
default: '手写区域' |
|
||||
}, |
|
||||
fillFontSize: { |
|
||||
type: String, |
|
||||
default: '100px' |
|
||||
}, |
|
||||
strokeStyle: { |
|
||||
type: String, |
|
||||
default: '#000' |
|
||||
}, |
|
||||
fillStyle: { |
|
||||
type: String, |
|
||||
default: 'rgba(85, 73, 54, 0.1)' |
|
||||
} |
|
||||
}) |
|
||||
const emits = defineEmits(['result']) |
|
||||
|
|
||||
const state = reactive({ |
|
||||
handWrite: '', |
|
||||
isClick: false, |
|
||||
//轨迹X |
|
||||
clickX: [], |
|
||||
//轨迹Y |
|
||||
clickY: [], |
|
||||
//轨迹标志位，为1则是终点 |
|
||||
clickC: [], |
|
||||
X: 0, |
|
||||
Y: 0, |
|
||||
oldX: 0, |
|
||||
oldY: 0, |
|
||||
timer: 0, |
|
||||
list: [] |
|
||||
}) |
|
||||
|
|
||||
const inkCanvasRef = ref(null) |
|
||||
const ctxRef = computed(() => inkCanvasRef.value.getContext('2d')) |
|
||||
|
|
||||
function updateBound() { |
|
||||
const bound = inkCanvasRef.value.getBoundingClientRect() |
|
||||
state.X = bound.x |
|
||||
state.Y = bound.y |
|
||||
} |
|
||||
function down(ev) { |
|
||||
const cx = Math.floor(ev.clientX || ev.targetTouches[0].clientX) - state.X |
|
||||
|
|
||||
const cy = Math.floor(ev.clientY || ev.targetTouches[0].clientY) - state.Y |
|
||||
|
|
||||
clearTimeout(state.timer) |
|
||||
state.oldX = cx |
|
||||
state.oldY = cy |
|
||||
ctxRef.value.beginPath() |
|
||||
state.isClick = true |
|
||||
} |
|
||||
function move(ev) { |
|
||||
ev.preventDefault() |
|
||||
if (state.isClick) { |
|
||||
const cx = Math.floor(ev.clientX || ev.targetTouches[0].clientX) - state.X |
|
||||
const cy = Math.floor(ev.clientY || ev.targetTouches[0].clientY) - state.Y |
|
||||
|
|
||||
state.clickX.push(cx) |
|
||||
state.clickY.push(cy) |
|
||||
state.clickC.push(0) |
|
||||
//画图 |
|
||||
|
|
||||
ctxRef.value.lineWidth = 8 |
|
||||
ctxRef.value.lineCap = 'round' |
|
||||
ctxRef.value.moveTo(state.oldX, state.oldY) |
|
||||
ctxRef.value.lineTo(cx, cy) |
|
||||
ctxRef.value.stroke() |
|
||||
state.oldX = cx |
|
||||
state.oldY = cy |
|
||||
} |
|
||||
} |
|
||||
function mouseUp() { |
|
||||
if (state.isClick) { |
|
||||
state.isClick = false |
|
||||
state.timer = setTimeout(() => { |
|
||||
reload() |
|
||||
}, 1500) |
|
||||
//标记最后一点为终点 |
|
||||
state.clickC.pop() |
|
||||
state.clickC.push(1) |
|
||||
_getHandWriting() |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
function reload() { |
|
||||
if (!inkCanvasRef.value) { |
|
||||
return |
|
||||
} |
|
||||
state.clickX = [] |
|
||||
state.clickY = [] |
|
||||
state.clickC = [] |
|
||||
ctxRef.value.strokeStyle = props.strokeStyle |
|
||||
ctxRef.value.fillStyle = props.fillStyle |
|
||||
ctxRef.value.clearRect(0, 0, props.width, props.height) |
|
||||
ctxRef.value.font = `bold ${props.fillFontSize} Arial` |
|
||||
ctxRef.value.textAlign = 'center' |
|
||||
ctxRef.value.textBaseline = 'middle' |
|
||||
ctxRef.value.fillText(props.fillText, props.width / 2, props.height / 2, 1000) |
|
||||
} |
|
||||
function _getHandWriting() { |
|
||||
const params = { |
|
||||
lib: props.lang, |
|
||||
lpXis: state.clickX, |
|
||||
lpYis: state.clickY, |
|
||||
lpCis: state.clickC |
|
||||
} |
|
||||
getHandWriting(params) |
|
||||
.then(res => { |
|
||||
state.list = res |
|
||||
}) |
|
||||
.catch(err => { |
|
||||
console.log(err) |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
watch( |
|
||||
() => state.list, |
|
||||
newVal => { |
|
||||
emits('result', newVal) |
|
||||
} |
|
||||
) |
|
||||
|
|
||||
onMounted(() => { |
|
||||
updateBound() |
|
||||
reload() |
|
||||
inkCanvasRef.value.addEventListener('touchstart', down) |
|
||||
inkCanvasRef.value.addEventListener('touchmove', move) |
|
||||
inkCanvasRef.value.addEventListener('touchend', mouseUp) |
|
||||
}) |
|
||||
onBeforeUnmount(() => { |
|
||||
inkCanvasRef.value.removeEventListener('touchstart', down) |
|
||||
inkCanvasRef.value.removeEventListener('touchmove', move) |
|
||||
inkCanvasRef.value.removeEventListener('touchend', mouseUp) |
|
||||
}) |
|
||||
</script> |
|
||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue