zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: convert legacy color classes to tailwind syntax

Browse Source 
Replace all custom `bg-*` utility classes across Vue components with Tailwind's arbitrary hex color notation (e.g. `bg-[#f7f7f7]`). Remove redundant hardcoded background color definitions from src/static/scss/background.scss, clean up template formatting, and update gradient button styles to use direct hex values.
This commit is contained in:
duanshuwen
2026-07-24 15:56:35 +08:00
parent d3d15b1a19
commit aa0203819c
27 changed files with 225 additions and 527 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/CreateServiceOrder/index.vue
View File

@@ -9,23 +9,23 @@
</view>
<view v-if="!isCallSuccess" class="border-box p-12">
<view class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12">
<view class="bg-[#f5f7fa] border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12">
<text class="font-500 line-height-22 mr-20">所在位置</text>
<input placeholder="请填写所在位置" v-model="roomId" />
</view>
<view class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12">
<view class="bg-[#f5f7fa] border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12">
<text class="font-500 line-height-22 mr-20">联系电话</text>
<input placeholder="请填写联系电话" v-model="contactPhone" @input="handleContactPhoneInput" />
</view>
<view class="bg-F5F7FA border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12">
<view class="bg-[#f5f7fa] border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12">
<view class="font-500 line-height-22 mb-12">需求信息描述</view>
<textarea class="h-80" placeholder="请输入需求信息描述" placeholder-class="font-size-14 font-400" maxlength="100"
v-model="contactText" />
</view>
<view class="bg-F5F7FA border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12">
<view class="bg-[#f5f7fa] border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12">
<view class="font-500 line-height-22 mb-12">照片上传</view>
<view class="w-80 h-80 bg-white rounded-8 overflow-hidden flex flex-items-center flex-justify-center">
@@ -56,7 +56,7 @@
</view>
<view
class="btn rounded-50 color-white bg-button flex flex-items-center flex-justify-center ml-[12px] mr-12 mb-12"
class="btn rounded-50 color-white bg-gradient-to-r from-[#0CCD58] to-[#4de4ff] flex flex-items-center flex-justify-center ml-[12px] mr-12 mb-12"
@click="handleCall">
{{ isCallSuccess ? "查看服务" : "立即呼叫" }}
</view>

2
src/components/DetailPopup/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<uni-popup ref="popupRef" type="bottom" :safe-area="false" @maskClick="handleClose">
<view class="refund-popup bg-F5F7FA border-box">
<view class="refund-popup bg-[#f5f7fa] border-box">
<view class="border-box flex flex-items-center justify-between pt-12 pb-12 relative">
<view class="flex-full font-size-16 color-171717 line-height-24 text-center">明细详情</view>
<!-- 关闭按钮 -->

7
src/components/Feedback/index.vue
View File

@@ -9,17 +9,18 @@
</view>
<view v-if="!isCallSuccess" class="border-box p-12">
<view class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12">
<view class="bg-[#f5f7fa] border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12">
<text class="font-500 line-height-22 mr-20">联系电话</text>
<input placeholder="请填写联系电话" v-model="contactPhone" />
</view>
<view class="bg-F5F7FA border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12">
<view class="bg-[#f5f7fa] border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12">
<view class="font-500 line-height-22 mb-12">意见内容</view>
<textarea class="h-80" placeholder="请输入反馈意见" placeholder-class="font-size-14 font-400" maxlength="100"
v-model="contactText" />
</view>
<view class="btn rounded-50 color-white bg-button flex flex-items-center flex-justify-center"
<view
class="btn rounded-50 color-white bg-gradient-to-r from-[#0CCD58] to-[#4de4ff] flex flex-items-center flex-justify-center"
@click="handleCall">
立即提交
</view>

2
src/components/RefundPopup/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<uni-popup ref="popupRef" type="bottom" :safe-area="false" @maskClick="handleClose">
<view class="refund-popup bg-F5F7FA border-box">
<view class="refund-popup bg-[#f5f7fa] border-box">
<view class="border-box flex flex-items-center justify-between pt-12 pb-12 relative">
<view class="flex-full font-size-16 color-171717 line-height-24 text-center">取消政策</view>
<!-- 关闭按钮 -->

3
src/components/SurveyQuestionnaire/index.vue
View File

@@ -10,7 +10,8 @@
<image class="w-full" :src="surveyData.bannerUrl" mode="widthFix" />
<view class="h-44 m-12 rounded-50 bg-button color-white flex flex-items-center flex-justify-center"
<view
class="h-44 m-12 rounded-50 bg-gradient-to-r from-[#0CCD58] to-[#4de4ff] color-white flex flex-items-center flex-justify-center"
@click="handleCall">
前往填写
</view>

2
src/pages-booking/index.vue
View File

@@ -24,7 +24,7 @@
<!-- 权益部分 -->
<view class="flex flex-items-center mb-8">
<text class="bg-F7F7F7 border-box rounded-4 font-size-11 color-525866 mr-4 pt-4 pb-4 pl-6 pr-6"
<text class="bg-[#f7f7f7] border-box rounded-4 font-size-11 color-525866 mr-4 pt-4 pb-4 pl-6 pr-6"
v-for="(item, index) in orderData.commodityFacilityList" :key="index">
{{ item }}
</text>

2
src/pages-order/order/components/FooterSection/index.vue
View File

@@ -8,7 +8,7 @@
<button :class="[
'right border-none rounded-10 flex flex-full flex-items-center flex-justify-center font-size-14 font-500 bg-theme-color-500',
{
'bg-FF3D60': statusCode === '0',
'bg-[#ff3d60]': statusCode === '0',
'color-white': ['1', '2', '3', '4', '5', '6'].includes(statusCode),
},
]" @click="handleButtonClick(orderData)">

37
src/pages-order/order/components/GoodsInfo/index.vue
View File

@@ -1,43 +1,27 @@
<template>
<view
v-if="orderType == 0"
class="border-box bg-white p-12 rounded-12 mb-12"
>
<view v-if="orderType == 0" class="border-box bg-white p-12 rounded-12 mb-12">
<!-- 酒店类型入住离店日期部分 -->
<DateRangeSection
v-if="orderData.orderType == 0"
:selectedDate="selectedDate"
/>
<DateRangeSection v-if="orderData.orderType == 0" :selectedDate="selectedDate" />
<view class="font-size-16 font-500 color-000 line-height-24 ellipsis-1">
{{ orderData.commodityName }}
</view>
<view
class="border-box border-bottom font-size-12 color-99A0AE line-height-16 pb-12"
>
<view class="border-box border-bottom font-size-12 color-99A0AE line-height-16 pb-12">
{{ orderData.commodityDescription }}
</view>
<!-- 权益部分 -->
<view class="border-box flex flex-items-center pt-12">
<text
class="bg-F7F7F7 border-box rounded-4 font-size-11 color-525866 mr-4 pt-4 pb-4 pl-6 pr-6"
v-for="(item, index) in commodityFacilityList"
:key="index"
>
<text class="bg-[#f7f7f7] border-box rounded-4 font-size-11 color-525866 mr-4 pt-4 pb-4 pl-6 pr-6"
v-for="(item, index) in commodityFacilityList" :key="index">
{{ item }}
</text>
</view>
</view>
<view
v-if="orderType != 0"
class="border-box bg-white p-12 rounded-12 mb-12"
>
<view
class="font-size-16 font-500 color-000 line-height-24 ellipsis-1 mb-8"
>
<view v-if="orderType != 0" class="border-box bg-white p-12 rounded-12 mb-12">
<view class="font-size-16 font-500 color-000 line-height-24 ellipsis-1 mb-8">
{{ orderData.commodityName }}
</view>
@@ -46,11 +30,8 @@
<text class="color-525866">{{ commodityAmount }}</text>
</view>
<view
v-if="orderData.orderStatus === '0'"
class="border-box border-top pt-12 font-size-14 font-500 color-171717 mt-12"
>凭[电子凭证]直接验证使用</view
>
<view v-if="orderData.orderStatus === '0'"
class="border-box border-top pt-12 font-size-14 font-500 color-171717 mt-12">凭[电子凭证]直接验证使用</view>
</view>
</template>

21
src/pages-order/order/components/OrderCard/index.vue
View File

@@ -1,8 +1,5 @@
<template>
<view
class="order-card bg-white border-box p-12 rounded-12 m-12"
@click.stop="handleCardClick"
>
<view class="order-card bg-white border-box p-12 rounded-12 m-12" @click.stop="handleCardClick">
<!-- 卡片头部 -->
<view class="card-header flex items-center">
<view class="status-info flex items-center flex-full">
@@ -11,13 +8,10 @@
{{ getOrderTypeName() }}
</view>
</view>
<view
v-if="orderData.status !== 'pending'"
:class="[
'status-tag font-size-12',
`tag-${orderData.orderStatus || orderData.workOrderStatus}`,
]"
>
<view v-if="orderData.status !== 'pending'" :class="[
'status-tag font-size-12',
`tag-${orderData.orderStatus || orderData.workOrderStatus}`,
]">
{{ getStatusText(orderData.orderStatus || orderData.workOrderStatus) }}
</view>
</view>
@@ -27,9 +21,8 @@
<view v-if="orderData.orderStatus === '0'" class="text-right">
<button
class="go-pay border-box border-none font-size-14 color-white bg-FF3D60 rounded-5 inline-block text-center line-height-30"
@click.stop="handleCardClick"
>
class="go-pay border-box border-none font-size-14 color-white bg-[#ff3d60] rounded-5 inline-block text-center line-height-30"
@click.stop="handleCardClick">
去支付
</button>
</view>

41
src/pages-order/order/components/OrderQrcode/index.vue
View File

@@ -1,12 +1,6 @@
<template>
<uni-popup
ref="popupRef"
type="bottom"
:safe-area="false"
@maskClick="handleClose"
@change="handlePopupChange"
>
<view class="refund-popup bg-F5F7FA border-box">
<uni-popup ref="popupRef" type="bottom" :safe-area="false" @maskClick="handleClose" @change="handlePopupChange">
<view class="refund-popup bg-[#f5f7fa] border-box">
<view class="border-box flex flex-items-center justify-between pt-12 pb-12 relative">
<view class="flex flex-col flex-items-center flex-full ">
<view class="flex-full font-size-16 text-color-900 text-center">核销凭证</view>
@@ -19,47 +13,54 @@
<view class="bg-white border-box rounded-12 flex flex-col flex-items-center flex-justify-center p-12 mb-12 mx-12">
<view class="flex w-full flex-row flex-items-center flex-justify-between py-4">
<view >
<view>
<view class="font-size-16 font-500 color-000 line-height-24 ellipsis-1">
{{ selectedVoucher.name }}
</view>
</view>
<view v-if="selectedVoucher" class="flex flex-row">
<view class="bg-F5F7FA text-color-600 font-size-12 p-4 rounded-4 mr-4">总计{{ selectedVoucher.count }}{{ selectedVoucher.unit }}
<view class="bg-[#f5f7fa] text-color-600 font-size-12 p-4 rounded-4 mr-4">总计{{ selectedVoucher.count }}{{
selectedVoucher.unit }}
</view>
<view class="bg-theme-color-50 theme-color-500 font-size-12 p-4 rounded-4">剩{{ selectedVoucher.count - selectedVoucher.writeOffCount }}{{ selectedVoucher.unit }}可用</view>
<view class="bg-theme-color-50 theme-color-500 font-size-12 p-4 rounded-4">剩{{ selectedVoucher.count -
selectedVoucher.writeOffCount }}{{ selectedVoucher.unit }}可用</view>
</view>
</view>
<view class="flex flex-col w-full flex-items-center flex-justify-center border-box rounded-8 border pt-16 pb-32 mt-12">
<view
class="flex flex-col w-full flex-items-center flex-justify-center border-box rounded-8 border pt-16 pb-32 mt-12">
<view class="flex flex-row flex-justify-between border-box w-full px-12">
<view class="bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12">凭证{{ selectedVoucherList.length > 1 ? currentVoucherIndex + 1 : '' }}</view>
<view class="text-color-500 font-size-14 px-12 line-height-24 rounded-12">此码仅可核销{{ selectedVoucher.count - selectedVoucher.writeOffCount }}份</view>
<view class="bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12">凭证{{
selectedVoucherList.length > 1 ? currentVoucherIndex + 1 : '' }}</view>
<view class="text-color-500 font-size-14 px-12 line-height-24 rounded-12">此码仅可核销{{ selectedVoucher.count -
selectedVoucher.writeOffCount }}份</view>
</view>
<view class="flex flex-items-center flex-justify-center mt-20 p-20 rounded-12 border borderColor"
<view class="flex flex-items-center flex-justify-center mt-20 p-20 rounded-12 border borderColor"
:style="{ borderColor: selectedVoucher?.color }">
<Qrcode v-if="showQrcode" :size="props.size" :unit="props.unit" :val="qrcodeVal" :loadMake="true"
:onval="true" />
</view>
<view v-if="false" class="mt-20 bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12">
{{ selectedVoucher.name }}
<view v-if="false"
class="mt-20 bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12">
{{ selectedVoucher.name }}
</view>
</view>
<view v-if="selectedVoucherList.length > 1" class="flex flex-row w-full flex-items-center flex-justify-between mt-16 mb-24">
<view v-if="selectedVoucherList.length > 1"
class="flex flex-row w-full flex-items-center flex-justify-between mt-16 mb-24">
<view class="actions-btn" @click.stop="upAction">
<uni-icons type="left" size="16" color="#171717" />
</view>
<view class="flex flex-col">
<view class="flex flex-row flex-justify-center flex-items-center">
<view class="flex flex-row flex-justify-center flex-items-center">
<view class="theme-color-500 font-size-16">{{ currentVoucherIndex + 1 }}</view>
<view class="text-color-600 font-size-12">/{{ selectedVoucherList.length }}</view>
</view>
<view class="text-color-600 font-size-14">扫码后点击下一张</view>
</view>

22
src/pages-order/order/components/VoucherList/index.vue
View File

@@ -3,20 +3,24 @@
<text class="font-size-16 color-171717 line-height-24 font-500">
核销凭证列表
</text>
<view class="flex flex-items-center flex-justify-between py-12"
:class="[index+1 === props.orderData.commodityPackageConfig.length ? '' : 'border-bottom']"
v-for="(item, index) in props.orderData.commodityPackageConfig" :key="item.name">
<view class="flex flex-items-center flex-justify-between py-12"
:class="[index + 1 === props.orderData.commodityPackageConfig.length ? '' : 'border-bottom']"
v-for="(item, index) in props.orderData.commodityPackageConfig" :key="item.name">
<view class="flex flex-col">
<text class="text-color-900 font-size-16">{{ item.name }}</text>
<view class="flex flex-row mt-8">
<view class="bg-F5F7FA text-color-600 font-size-12 p-4 rounded-4 mr-4">总计{{ item.count }}{{item.unit}}</view>
<view class="bg-theme-color-50 theme-color-500 font-size-12 p-4 rounded-4">剩{{ item.count - item.writeOffCount }}{{item.unit}}可用</view>
<view class="bg-[#f5f7fa] text-color-600 font-size-12 p-4 rounded-4 mr-4">总计{{ item.count }}{{ item.unit }}
</view>
<view class="bg-theme-color-50 theme-color-500 font-size-12 p-4 rounded-4">剩{{ item.count - item.writeOffCount
}}{{ item.unit }}可用</view>
</view>
</view>
<view class="flex flex-items-center px-14 py-8 rounded-8" :class="[item.packageStatus === 0 ? 'bg-theme-color-500' : 'bg-gray']" @click="handleShowQrcode(item, index)">
<text v-if="item.packageStatus === 0" class="font-size-14 color-white" >出示凭证</text>
<view class="flex flex-items-center px-14 py-8 rounded-8"
:class="[item.packageStatus === 0 ? 'bg-theme-color-500' : 'bg-[#f5f5f5]']"
@click="handleShowQrcode(item, index)">
<text v-if="item.packageStatus === 0" class="font-size-14 color-white">出示凭证</text>
<text v-else class="font-size-14 text-color-300">已核销</text>
</view>
</view>
@@ -24,7 +28,7 @@
</template>
<script setup>
import {defineProps, defineEmits } from "vue";
import { defineProps, defineEmits } from "vue";
const emit = defineEmits(["selected"]);

11
src/pages-quick/list.vue
View File

@@ -2,21 +2,22 @@
<z-paging ref="paging" v-model="dataList" use-virtual-list :force-close-inner-list="true" cell-height-mode="dynamic"
safe-area-inset-bottom @query="queryList">
<template #top>
<TopNavBar title="快速预定" :background="$theme-color-100" />
<TopNavBar title="快速预定" :background="$theme - color - 100" />
<Tabs @change="handleTabChange"/>
<Tabs @change="handleTabChange" />
<!-- 选择入住、离店日期 0:是酒店 -->
<view v-if="didSelectedTabItem && didSelectedTabItem.orderType == 0" class="bg-white border-box flex flex-items-center p-12">
<view v-if="didSelectedTabItem && didSelectedTabItem.orderType == 0"
class="bg-white border-box flex flex-items-center p-12">
<view class="in flex flex-items-center">
<text class="font-size-11 font-500 color-99A0AE mr-4">入住</text>
<text class="font-size-14 font-500 color-171717">
{{ selectedDate.startDate }}
</text>
</view>
</view>
<!-- 几晚 -->
<text class="nights bg-E5E8EE border-box font-size-11 font-500 color-525866 rounded-50 ml-8 mr-8">
<text class="nights bg-[#e5e8ee] border-box font-size-11 font-500 color-525866 rounded-50 ml-8 mr-8">
{{ selectedDate.totalDays }}晚
</text>

2
src/pages/ChatMain/ChatCardMine/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<!-- 外层行容器：接收来自父组件的对齐类（如 flex flex-justify-end） -->
<view class="chat-mine-row">
<view class="chat-mine bg-17294E">
<view class="chat-mine bg-[#17294e]">
<text class="font-size-15 color-white">{{ text }}</text>
<slot></slot>
</view>

16
src/pages/ChatModule/FacilityLocationCard/index.vue
View File

@@ -1,14 +1,10 @@
<template>
<view class="facility-location-card bg-white rounded-24 overflow-hidden w-full">
<image
class="facility-location-card__image block w-full"
:src="data.image"
mode="aspectFill"
/>
<image class="facility-location-card__image block w-full" :src="data.image" mode="aspectFill" />
<view class="facility-location-card__body px-24 pb-24">
<view class="facility-location-card__title-row flex flex-items-center">
<view class="facility-location-card__badge color-2563EB bg-EFF6FF font-size-12 font-900">
<view class="facility-location-card__badge color-2563EB bg-[#eff6ff] font-size-12 font-900">
{{ type.text }}
</view>
<view class="facility-location-card__title color-1E293B font-size-18 font-900 ellipsis-1">
@@ -21,7 +17,7 @@
<text>{{ distance.text }}</text>
</view>
<view class="facility-location-card__location bg-F8FAFC rounded-20">
<view class="facility-location-card__location bg-[#f8fafc] rounded-20">
<view class="facility-location-card__location-label flex flex-items-center color-64748B font-size-13 font-900">
<text class="facility-location-card__location-dot">{{ location.icon }}</text>
<text>{{ location.label }}</text>
@@ -32,10 +28,8 @@
</view>
<view
class="facility-location-card__button flex flex-items-center flex-justify-center bg-0F172A color-white font-size-18 font-900"
:class="{ 'is-disabled': disabled }"
@click="handleAction"
>
class="facility-location-card__button flex flex-items-center flex-justify-center bg-[#0f172a] color-white font-size-18 font-900"
:class="{ 'is-disabled': disabled }" @click="handleAction">
<text class="facility-location-card__button-icon">{{ action.icon }}</text>
<text>{{ action.text }}</text>
</view>

103
src/pages/ChatModule/LongTextGuideCard/index.vue
View File

@@ -1,17 +1,10 @@
<template>
<view class="long-text-guide-card w-full">
<view v-if="mode === 'list'" class="long-text-guide-card__list w-full">
<view
v-for="item in cards"
:key="item.id"
class="long-text-guide-card__summary-card bg-white rounded-24 border-box"
:class="{ 'is-disabled': disabled }"
@click="openDetail(item)"
>
<view
class="long-text-guide-card__badge font-size-12 font-900"
:class="`is-${item.badgeTone}`"
>
<view v-for="item in cards" :key="item.id"
class="long-text-guide-card__summary-card bg-white rounded-24 border-box" :class="{ 'is-disabled': disabled }"
@click="openDetail(item)">
<view class="long-text-guide-card__badge font-size-12 font-900" :class="`is-${item.badgeTone}`">
{{ item.badge }}
</view>
<view class="long-text-guide-card__summary-title color-1E293B font-size-18 font-900">
@@ -29,76 +22,49 @@
<view v-else class="long-text-guide-card__detail-card bg-white rounded-24 border-box overflow-hidden">
<view class="long-text-guide-card__detail-header flex flex-items-center border-bottom-F1F5F9">
<view
class="long-text-guide-card__back flex flex-items-center flex-justify-center rounded-full font-700"
@click="closeDetail"
>
<view class="long-text-guide-card__back flex flex-items-center flex-justify-center rounded-full font-700"
@click="closeDetail">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</view>
<view class="long-text-guide-card__detail-title color-1E293B font-size-18 font-900 ellipsis-1">
{{ activeItem.title }}
</view>
<view
class="long-text-guide-card__badge long-text-guide-card__detail-badge font-size-12 font-900"
:class="`is-${activeItem.badgeTone}`"
>
<view class="long-text-guide-card__badge long-text-guide-card__detail-badge font-size-12 font-900"
:class="`is-${activeItem.badgeTone}`">
{{ activeItem.badge }}
</view>
</view>
<view class="long-text-guide-card__rich-body">
<view
v-for="(paragraph, paragraphIndex) in paragraphsBeforeImage"
:key="`before-${paragraphIndex}`"
class="long-text-guide-card__paragraph color-475569 font-size-15 font-500"
>
<template
v-for="(segment, segmentIndex) in getSegments(paragraph)"
:key="`${paragraphIndex}-${segmentIndex}`"
>
<text
v-if="segment.highlight"
class="long-text-guide-card__highlight font-800"
>
<view v-for="(paragraph, paragraphIndex) in paragraphsBeforeImage" :key="`before-${paragraphIndex}`"
class="long-text-guide-card__paragraph color-475569 font-size-15 font-500">
<template v-for="(segment, segmentIndex) in getSegments(paragraph)"
:key="`${paragraphIndex}-${segmentIndex}`">
<text v-if="segment.highlight" class="long-text-guide-card__highlight font-800">
{{ segment.text }}
</text>
<text v-else>{{ segment.text }}</text>
</template>
</view>
<image
v-if="activeItem.image"
class="long-text-guide-card__main-image w-full rounded-14 block"
:src="activeItem.image"
mode="aspectFill"
/>
<image v-if="activeItem.image" class="long-text-guide-card__main-image w-full rounded-14 block"
:src="activeItem.image" mode="aspectFill" />
<view class="long-text-guide-card__section-title color-1E293B font-size-16 font-900">
{{ activeItem.sectionTitle }}
</view>
<view class="long-text-guide-card__tip-block bg-ECFDF5">
<view
v-for="(tip, index) in activeItem.tips || []"
:key="tip"
class="long-text-guide-card__tip color-047857 font-size-14 font-800"
>
<view class="long-text-guide-card__tip-block bg-[#ecfdf5]">
<view v-for="(tip, index) in activeItem.tips || []" :key="tip"
class="long-text-guide-card__tip color-047857 font-size-14 font-800">
{{ index + 1 }} {{ tip }}
</view>
</view>
<view
v-for="(paragraph, paragraphIndex) in paragraphsAfterTips"
:key="`after-${paragraphIndex}`"
class="long-text-guide-card__paragraph color-475569 font-size-15 font-500"
>
<template
v-for="(segment, segmentIndex) in getSegments(paragraph)"
:key="`${paragraphIndex}-${segmentIndex}`"
>
<text
v-if="segment.highlight"
class="long-text-guide-card__highlight font-800"
>
<view v-for="(paragraph, paragraphIndex) in paragraphsAfterTips" :key="`after-${paragraphIndex}`"
class="long-text-guide-card__paragraph color-475569 font-size-15 font-500">
<template v-for="(segment, segmentIndex) in getSegments(paragraph)"
:key="`${paragraphIndex}-${segmentIndex}`">
<text v-if="segment.highlight" class="long-text-guide-card__highlight font-800">
{{ segment.text }}
</text>
<text v-else>{{ segment.text }}</text>
@@ -112,11 +78,8 @@
</view>
<view class="long-text-guide-card__map-card rounded-16 overflow-hidden">
<view class="long-text-guide-card__map-image-wrap relative">
<image
class="long-text-guide-card__map-image w-full block"
:src="activeItem.action.image"
mode="aspectFill"
/>
<image class="long-text-guide-card__map-image w-full block" :src="activeItem.action.image"
mode="aspectFill" />
<view class="long-text-guide-card__map-tag color-white font-size-10 font-900">
{{ activeItem.action.tag }}
</view>
@@ -126,10 +89,8 @@
<view class="color-1E293B font-size-15 font-900">{{ activeItem.action.title }}</view>
<view class="color-94A3B8 font-size-12 font-800 mt-2">{{ activeItem.action.subtitle }}</view>
</view>
<view
class="long-text-guide-card__nav-btn color-white bg-0F172A font-size-14 font-900"
@click="handleAction(activeItem)"
>
<view class="long-text-guide-card__nav-btn color-white bg-[#0f172a] font-size-14 font-900"
@click="handleAction(activeItem)">
{{ activeItem.action.buttonText }}
</view>
</view>
@@ -141,12 +102,10 @@
{{ activeItem.action.label }}
</view>
<view class="long-text-guide-card__photo-card relative" @click="handleAction(activeItem)">
<image
class="long-text-guide-card__photo-image w-full block"
:src="activeItem.action.image"
mode="aspectFill"
/>
<view class="long-text-guide-card__expand flex flex-items-center flex-justify-center rounded-full color-white font-size-18 font-900">
<image class="long-text-guide-card__photo-image w-full block" :src="activeItem.action.image"
mode="aspectFill" />
<view
class="long-text-guide-card__expand flex flex-items-center flex-justify-center rounded-full color-white font-size-18 font-900">
↗
</view>
</view>

12
src/pages/ChatModule/MapNavigationCard/index.vue
View File

@@ -1,11 +1,7 @@
<template>
<view class="map-navigation-card bg-white rounded-24 overflow-hidden w-full">
<view class="map-navigation-card__media">
<image
class="map-navigation-card__image block w-full"
:src="data.image"
mode="aspectFill"
/>
<image class="map-navigation-card__image block w-full" :src="data.image" mode="aspectFill" />
<view class="map-navigation-card__badge flex flex-items-center color-white font-size-12 font-900">
<text class="map-navigation-card__badge-icon">{{ badge.icon }}</text>
<text>{{ badge.text }}</text>
@@ -22,10 +18,8 @@
</view>
</view>
<view
class="map-navigation-card__button flex flex-items-center flex-justify-center bg-0F172A color-white font-size-18 font-900"
:class="{ 'is-disabled': disabled }"
@click="handleAction"
>
class="map-navigation-card__button flex flex-items-center flex-justify-center bg-[#0f172a] color-white font-size-18 font-900"
:class="{ 'is-disabled': disabled }" @click="handleAction">
<text class="map-navigation-card__button-icon">{{ action.icon }}</text>
<text>{{ action.text }}</text>
</view>

37
src/pages/ChatModule/NoticeCard/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<view class="notice-card w-full">
<view v-if="!detailOpen" class="notice-card__summary bg-FFFBEB rounded-24 w-full">
<view v-if="!detailOpen" class="notice-card__summary bg-[#fffbeb] rounded-24 w-full">
<view class="notice-card__summary-title color-B45309 font-size-16 font-900">
{{ summary.title }}
</view>
@@ -11,11 +11,8 @@
<view class="notice-card__summary-time color-D97706 font-size-12 font-900">
{{ summary.publishTime }}
</view>
<view
class="notice-card__summary-link color-B45309 font-size-14 font-900"
:class="{ 'is-disabled': disabled }"
@click="openDetail"
>
<view class="notice-card__summary-link color-B45309 font-size-14 font-900" :class="{ 'is-disabled': disabled }"
@click="openDetail">
{{ summary.actionText }}
</view>
</view>
@@ -23,10 +20,8 @@
<view v-else class="notice-card__detail bg-white rounded-24 overflow-hidden w-full">
<view class="notice-card__detail-head flex flex-items-center">
<view
class="notice-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
@click="closeDetail"
>
<view class="notice-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
@click="closeDetail">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</view>
<view class="notice-card__head-title color-1E293B font-size-18 font-900">
@@ -34,31 +29,21 @@
</view>
</view>
<image
class="notice-card__image block w-full"
:src="detail.image"
mode="aspectFill"
/>
<image class="notice-card__image block w-full" :src="detail.image" mode="aspectFill" />
<view class="notice-card__detail-body">
<view class="notice-card__detail-title color-1E293B font-size-20 font-900">
{{ detail.title }}
</view>
<view class="notice-card__time-pill flex flex-items-center bg-F8FAFC color-475569 font-size-13 font-900">
<view class="notice-card__time-pill flex flex-items-center bg-[#f8fafc] color-475569 font-size-13 font-900">
<text class="notice-card__time-icon">{{ detail.timeIcon }}</text>
<text>{{ detail.publishTime }}</text>
</view>
<view class="notice-card__divider"></view>
<view
v-for="paragraph in paragraphs"
:key="paragraph.id"
class="notice-card__paragraph color-475569 font-size-14 font-800"
>
<text
v-for="segment in paragraph.segments"
:key="segment.text"
:class="{ 'notice-card__strong': segment.strong }"
>
<view v-for="paragraph in paragraphs" :key="paragraph.id"
class="notice-card__paragraph color-475569 font-size-14 font-800">
<text v-for="segment in paragraph.segments" :key="segment.text"
:class="{ 'notice-card__strong': segment.strong }">
{{ segment.text }}
</text>
</view>

2
src/pages/ChatModule/OpenMapComponent/index.vue
View File

@@ -12,7 +12,7 @@
<view class="font-color-900 font-size-14">打开导览地图</view>
<view class="font-color-500 font-size-12 mt-6">距你 {{ distance }} · 步行 {{ walk }}</view>
</view>
<view class="ml-[12px] flex flex-items-center flex-justify-center w-32 h-32 rounded-full bg-F2F5F8">
<view class="ml-[12px] flex flex-items-center flex-justify-center w-32 h-32 rounded-full bg-[#f2f5f8]">
<uni-icons class="mb-2" type="right" size="12" color="#99A0AE" />
</view>
</view>

81
src/pages/ChatModule/PoiCompareCard/index.vue
View File

@@ -11,31 +11,15 @@
</view>
<view class="poi-compare-card__columns grid grid-cols-2 gap-16">
<view
v-for="item in items"
:key="item.id || item.name"
class="poi-compare-card__place"
:class="{ 'is-disabled': disabled }"
@click="handleSelect(item)"
>
<image
class="poi-compare-card__image block w-full"
:src="item.image"
mode="aspectFill"
/>
<view
v-for="field in item.fields"
:key="field.label"
class="poi-compare-card__field"
>
<view v-for="item in items" :key="item.id || item.name" class="poi-compare-card__place"
:class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
<image class="poi-compare-card__image block w-full" :src="item.image" mode="aspectFill" />
<view v-for="field in item.fields" :key="field.label" class="poi-compare-card__field">
<view class="poi-compare-card__field-label color-94A3B8 font-size-12 font-800">
{{ field.label }}
</view>
<view
v-if="field.tone"
class="poi-compare-card__chip font-size-12 font-900"
:class="getToneClass(field.tone)"
>
<view v-if="field.tone" class="poi-compare-card__chip font-size-12 font-900"
:class="getToneClass(field.tone)">
{{ field.value }}
</view>
<view v-else class="poi-compare-card__field-value color-1E293B font-size-14 font-900">
@@ -46,20 +30,16 @@
</view>
<view
class="poi-compare-card__primary flex flex-items-center flex-justify-center bg-0F172A color-white font-size-15 font-900"
:class="{ 'is-disabled': disabled }"
@click="openDetail"
>
class="poi-compare-card__primary flex flex-items-center flex-justify-center bg-[#0f172a] color-white font-size-15 font-900"
:class="{ 'is-disabled': disabled }" @click="openDetail">
{{ data.detailButtonText }}
</view>
</view>
<view v-else class="poi-compare-card__detail-card bg-white rounded-24 overflow-hidden">
<view class="poi-compare-card__detail-head flex flex-items-center">
<view
class="poi-compare-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
@click="closeDetail"
>
<view class="poi-compare-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
@click="closeDetail">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</view>
<view class="poi-compare-card__detail-title color-1E293B font-size-20 font-900 flex-full">
@@ -73,28 +53,18 @@
<view class="poi-compare-card__table">
<view class="poi-compare-card__table-head poi-compare-card__table-row">
<view></view>
<view
v-for="item in items"
:key="item.id || item.name"
class="poi-compare-card__table-title color-1E293B font-size-14 font-900"
>
<view v-for="item in items" :key="item.id || item.name"
class="poi-compare-card__table-title color-1E293B font-size-14 font-900">
{{ item.name }}
</view>
</view>
<view
v-for="row in detail.rows"
:key="row.label"
class="poi-compare-card__table-row poi-compare-card__data-row"
>
<view v-for="row in detail.rows" :key="row.label"
class="poi-compare-card__table-row poi-compare-card__data-row">
<view class="poi-compare-card__row-label color-94A3B8 font-size-12 font-900">
{{ row.label }}
</view>
<view
v-for="cell in row.values"
:key="row.label + '-' + cell.text"
class="poi-compare-card__cell color-1E293B font-size-14 font-900"
:class="getCellClass(cell.tone)"
>
<view v-for="cell in row.values" :key="row.label + '-' + cell.text"
class="poi-compare-card__cell color-1E293B font-size-14 font-900" :class="getCellClass(cell.tone)">
{{ cell.text }}
</view>
</view>
@@ -105,11 +75,7 @@
{{ detail.recommendTitle }}
</view>
<view class="poi-compare-card__tips">
<view
v-for="tip in detail.tips"
:key="tip.text"
class="poi-compare-card__tip flex gap-10"
>
<view v-for="tip in detail.tips" :key="tip.text" class="poi-compare-card__tip flex gap-10">
<view class="poi-compare-card__dot rounded-full flex-shrink-0" :class="getDotClass(tip.tone)" />
<view class="poi-compare-card__tip-text color-334155 font-size-14 font-900">
{{ tip.text }}
@@ -119,13 +85,10 @@
</view>
<view class="poi-compare-card__actions grid grid-cols-2 gap-14">
<view
v-for="action in detail.actions"
:key="action.id || action.text"
<view v-for="action in detail.actions" :key="action.id || action.text"
class="poi-compare-card__action flex flex-items-center flex-justify-center font-size-15 font-900"
:class="[action.primary ? 'poi-compare-card__action--primary bg-0F172A color-white' : 'poi-compare-card__action--secondary color-334155', { 'is-disabled': disabled }]"
@click="handleAction(action)"
>
:class="[action.primary ? 'poi-compare-card__action--primary bg-[#0f172a] color-white' : 'poi-compare-card__action--secondary color-334155', { 'is-disabled': disabled }]"
@click="handleAction(action)">
<text class="poi-compare-card__action-icon">{{ action.icon }}</text>
<text>{{ action.text }}</text>
</view>
@@ -156,8 +119,8 @@ const detail = computed(() => props.data.detail || {});
const getToneClass = (tone) => {
const toneMap = {
green: "poi-compare-card__chip--green color-047857 bg-ECFDF5",
amber: "poi-compare-card__chip--amber color-D97706 bg-FFFBEB",
green: "poi-compare-card__chip--green color-047857 bg-[#ecfdf5]",
amber: "poi-compare-card__chip--amber color-D97706 bg-[#fffbeb]",
};
return toneMap[tone] || "";
};

12
src/pages/ChatModule/PoiDetailCard/index.vue
View File

@@ -1,11 +1,7 @@
<template>
<view class="poi-detail-card bg-white rounded-24 border-box overflow-hidden">
<view class="poi-detail-card__hero relative">
<image
class="poi-detail-card__image w-full h-full block rounded-18"
:src="data.image"
mode="aspectFill"
/>
<image class="poi-detail-card__image w-full h-full block rounded-18" :src="data.image" mode="aspectFill" />
<view class="poi-detail-card__badge flex flex-items-center gap-4 font-size-10 font-900">
<text class="poi-detail-card__badge-icon">⌖</text>
<text>{{ data.badge?.text }}</text>
@@ -25,10 +21,8 @@
</view>
<view
class="poi-detail-card__button flex flex-items-center flex-justify-center gap-8 color-white bg-0F172A font-size-16 font-900"
:class="{ 'is-disabled': disabled }"
@click="handleAction"
>
class="poi-detail-card__button flex flex-items-center flex-justify-center gap-8 color-white bg-[#0f172a] font-size-16 font-900"
:class="{ 'is-disabled': disabled }" @click="handleAction">
<text class="poi-detail-card__button-icon">↗</text>
<text>{{ data.action?.text }}</text>
</view>

65
src/pages/ChatModule/RoutePlanCard/index.vue
View File

@@ -1,27 +1,16 @@
<template>
<view class="route-plan-card w-full">
<view
v-if="!detailOpen"
<view v-if="!detailOpen"
class="route-plan-card__summary flex flex-items-center bg-white rounded-24 overflow-hidden w-full"
:class="{ 'is-disabled': disabled }"
@click="openDetail"
>
<image
class="route-plan-card__cover block flex-shrink-0"
:src="data.image"
mode="aspectFill"
/>
:class="{ 'is-disabled': disabled }" @click="openDetail">
<image class="route-plan-card__cover block flex-shrink-0" :src="data.image" mode="aspectFill" />
<view class="route-plan-card__body flex-full">
<view class="route-plan-card__title color-1E293B font-size-18 font-900 ellipsis-1">
{{ data.title }}
</view>
<view class="route-plan-card__tags flex flex-items-center">
<view
v-for="tag in summaryTags"
:key="tag.id || tag.text"
class="route-plan-card__tag font-size-12 font-900"
:class="getTagClass(tag.tone)"
>
<view v-for="tag in summaryTags" :key="tag.id || tag.text" class="route-plan-card__tag font-size-12 font-900"
:class="getTagClass(tag.tone)">
{{ tag.text }}
</view>
</view>
@@ -33,36 +22,27 @@
<view v-else class="route-plan-card__detail bg-white rounded-24 overflow-hidden w-full">
<view class="route-plan-card__detail-head flex flex-items-center">
<view
class="route-plan-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
@click="closeDetail"
>
<view class="route-plan-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
@click="closeDetail">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</view>
<view class="route-plan-card__detail-title color-1E293B font-size-18 font-900 ellipsis-1 flex-full">
{{ data.title }}
</view>
<view class="route-plan-card__detail-badge color-047857 bg-ECFDF5 font-size-12 font-900">
<view class="route-plan-card__detail-badge color-047857 bg-[#ecfdf5] font-size-12 font-900">
{{ detail.badge }}
</view>
</view>
<view class="route-plan-card__timeline">
<template v-for="(node, index) in nodes" :key="node.id || node.title">
<view
class="route-plan-card__node-wrap"
:class="{ 'is-disabled': disabled }"
@click="handleSelect(node)"
>
<view class="route-plan-card__node-number flex flex-items-center flex-justify-center rounded-full color-047857 bg-ECFDF5 font-size-12 font-900">
<view class="route-plan-card__node-wrap" :class="{ 'is-disabled': disabled }" @click="handleSelect(node)">
<view
class="route-plan-card__node-number flex flex-items-center flex-justify-center rounded-full color-047857 bg-[#ecfdf5] font-size-12 font-900">
{{ index + 1 }}
</view>
<view class="route-plan-card__node bg-white rounded-20 flex flex-items-center">
<image
class="route-plan-card__node-image block flex-shrink-0"
:src="node.image"
mode="aspectFill"
/>
<image class="route-plan-card__node-image block flex-shrink-0" :src="node.image" mode="aspectFill" />
<view class="route-plan-card__node-body flex-full">
<view class="route-plan-card__node-title color-1E293B font-size-16 font-900 ellipsis-1">
{{ node.title }}
@@ -70,10 +50,7 @@
<view class="route-plan-card__node-desc color-94A3B8 font-size-12 font-800 ellipsis-1">
{{ node.description }}
</view>
<view
v-if="node.tag"
class="route-plan-card__node-tag color-D97706 bg-FFFBEB font-size-12 font-900"
>
<view v-if="node.tag" class="route-plan-card__node-tag color-D97706 bg-[#fffbeb] font-size-12 font-900">
{{ node.tag }}
</view>
</view>
@@ -83,7 +60,8 @@
<view v-if="connectors[index]" class="route-plan-card__connector">
<view class="route-plan-card__connector-line"></view>
<view class="route-plan-card__connector-arrow"></view>
<view class="route-plan-card__connector-chip flex flex-items-center bg-F8FAFC rounded-full color-64748B font-size-12 font-900">
<view
class="route-plan-card__connector-chip flex flex-items-center bg-[#f8fafc] rounded-full color-64748B font-size-12 font-900">
<text class="route-plan-card__connector-icon">{{ connectors[index].icon }}</text>
<text>{{ connectors[index].text }}</text>
</view>
@@ -91,15 +69,12 @@
</template>
</view>
<view v-if="tips.length" class="route-plan-card__tips bg-F8FAFC rounded-20">
<view v-if="tips.length" class="route-plan-card__tips bg-[#f8fafc] rounded-20">
<view class="route-plan-card__tips-title color-64748B font-size-14 font-900">
{{ detail.tipsTitle }}
</view>
<view
v-for="tip in tips"
:key="tip"
class="route-plan-card__tip flex flex-items-center color-334155 font-size-13 font-900"
>
<view v-for="tip in tips" :key="tip"
class="route-plan-card__tip flex flex-items-center color-334155 font-size-13 font-900">
<view class="route-plan-card__tip-dot rounded-full flex-shrink-0"></view>
<view>{{ tip }}</view>
</view>
@@ -132,8 +107,8 @@ const connectors = computed(() => detail.value.connectors || []);
const tips = computed(() => detail.value.tips || []);
const getTagClass = (tone) => {
if (tone === "green") return "color-047857 bg-ECFDF5";
return "color-64748B bg-F1F5F9";
if (tone === "green") return "color-047857 bg-[#ecfdf5]";
return "color-64748B bg-[#f1f5f9]";
};
const openDetail = () => {

3
src/pages/ChatModule/SharedVisual/DetailShell.vue
View File

@@ -1,7 +1,8 @@
<template>
<CardShell variant="detail">
<view class="visual-detail__header flex flex-items-center px-16 border-box border-bottom-F1F5F9">
<view class="visual-detail__back mr-8 rounded-full bg-F8FAFC color-334155 font-900 text-center" @click="$emit('back')">
<view class="visual-detail__back mr-8 rounded-full bg-[#f8fafc] color-334155 font-900 text-center"
@click="$emit('back')">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</view>
<view class="visual-detail__title flex-full color-1E293B font-size-14 font-900 ellipsis-1">{{ title }}</view>

9
src/pages/ChatModule/SharedVisual/MediaFrame.vue
View File

@@ -1,11 +1,6 @@
<template>
<view class="visual-media relative w-full overflow-hidden bg-F1F5F9" :class="{ 'rounded-16': rounded }">
<image
v-if="src"
class="visual-media__image block w-full h-full"
:src="src"
:mode="mode"
/>
<view class="visual-media relative w-full overflow-hidden bg-[#f1f5f9]" :class="{ 'rounded-16': rounded }">
<image v-if="src" class="visual-media__image block w-full h-full" :src="src" :mode="mode" />
<view v-else class="visual-media__empty block w-full h-full"></view>
<slot />
</view>

28
src/pages/goods/album/index.vue
View File

@@ -1,27 +1,17 @@
<template>
<view class="bg-F5F7FA flex flex-col h-screen overflow-hidden">
<view class="bg-[#f5f7fa] flex flex-col h-screen overflow-hidden">
<TopNavBar title="房间相册" backgroundColor="transparent" />
<view class="p-8">
<text class="ml-4 font-size-18 color-171717 font-500"
>全部({{ albumList.length }})</text
>
<text class="ml-4 font-size-18 color-171717 font-500">全部({{ albumList.length }})</text>
</view>
<scroll-view scroll-y class="scroll-container overflow-auto">
<view class="pl-4 pr-4 pb-24">
<view class="grid-container">
<view
class="album-item"
v-for="(item, index) in albumList"
:key="index"
>
<view class="album-item" v-for="(item, index) in albumList" :key="index">
<view class="album-image-wrapper">
<image
class="album-image"
:src="item.photoUrl"
mode="aspectFill"
@click="handlePreview(item.photoUrl)"
></image>
<image class="album-image" :src="item.photoUrl" mode="aspectFill" @click="handlePreview(item.photoUrl)">
</image>
<view class="album-title">{{ item.name }}</view>
</view>
</view>
@@ -87,11 +77,9 @@ const handlePreview = (photoUrl) => {
left: 0;
right: 0;
padding: 8px;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.6) 100%
);
background: linear-gradient(180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.6) 100%);
color: #fff;
font-size: 14px;
font-weight: 500;

58
src/pages/goods/index.vue
View File

@@ -1,20 +1,12 @@
<template>
<view class="goods-container bg-gray">
<TopNavBar
:title="navOpacity < 0.5 ? '' : '商品详情'"
:background="`rgba(217, 238, 255, ${navOpacity})`"
<view class="goods-container bg-[#f5f5f5]">
<TopNavBar :title="navOpacity < 0.5 ? '' : '商品详情'" :background="`rgba(217, 238, 255, ${navOpacity})`"
:titleColor="navOpacity < 0.5 ? '#ffffff' : '#000000'"
:backIconColor="navOpacity < 0.5 ? '#ffffff' : '#000000'"
/>
:backIconColor="navOpacity < 0.5 ? '#ffffff' : '#000000'" />
<!-- 滚动区域 -->
<scroll-view class="content-wrapper" scroll-y @scroll="handleScroll">
<ImageSwiper
:border-radius="0"
:height="300"
:images="goodsData.commodityPhotoList"
thumbnailBottom="42px"
/>
<ImageSwiper :border-radius="0" :height="300" :images="goodsData.commodityPhotoList" thumbnailBottom="42px" />
<view class="goods-content">
<!-- 商品信息组件 -->
@@ -24,21 +16,17 @@
<LocationCard :orderData="goodsData" />
<!-- 日期选择区域 -->
<DateSelector
v-if="goodsData.orderType == 0"
@showCalendar="showCalendar"
:checkInDate="selectedDate.startDate"
:checkOutDate="selectedDate.endDate"
:checkInDay="''"
:checkOutDay="''"
:nights="selectedDate.totalDays"
/>
<DateSelector v-if="goodsData.orderType == 0" @showCalendar="showCalendar" :checkInDate="selectedDate.startDate"
:checkOutDate="selectedDate.endDate" :checkInDay="''" :checkOutDay="''" :nights="selectedDate.totalDays" />
<!-- 商品套餐组件 -->
<GoodPackage v-if="goodsData.orderType != 0 && goodsData.commodityPackageConfig && goodsData.commodityPackageConfig.length > 0" :goodsData="goodsData" />
<GoodPackage
v-if="goodsData.orderType != 0 && goodsData.commodityPackageConfig && goodsData.commodityPackageConfig.length > 0"
:goodsData="goodsData" />
<!-- 商品设施组件 -->
<GoodFacility v-if="goodsData.commodityEquipment && goodsData.commodityEquipment.length > 0" :goodsData="goodsData" />
<GoodFacility v-if="goodsData.commodityEquipment && goodsData.commodityEquipment.length > 0"
:goodsData="goodsData" />
<!-- 商品详情组件 -->
<GoodDetail :goodsData="goodsData" />
@@ -47,33 +35,19 @@
<!-- 立即抢购 -->
<view class="footer border-top">
<view
class="amt font-size-20 font-bold color-FF3D60 line-height-28 flex flex-items-center mr-8"
>
<view class="amt font-size-20 font-bold color-FF3D60 line-height-28 flex flex-items-center mr-8">
{{ calculatedTotalPrice }}
</view>
<view
class="btn border-box rounded-10 flex flex-items-center ml-auto pl-8"
@click="navigateToPay(goodsData)"
>
<image
class="icon"
src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png"
/>
<view class="btn border-box rounded-10 flex flex-items-center ml-auto pl-8" @click="navigateToPay(goodsData)">
<image class="icon" src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png" />
<text class="font-size-16 font-500 color-white">立即预定</text>
</view>
</view>
<!-- 日历组件 -->
<Calender
:visible="calendarVisible"
mode="range"
:range-require-price="true"
:price-data="priceData"
@close="handleCalendarClose"
@range-select="handleDateSelect"
/>
<Calender :visible="calendarVisible" mode="range" :range-require-price="true" :price-data="priceData"
@close="handleCalendarClose" @range-select="handleDateSelect" />
</view>
</template>

73
src/pages/test/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<scroll-view class="test-page h-screen bg-F5F7FA" scroll-y>
<scroll-view class="test-page h-screen bg-[#f5f7fa]" scroll-y>
<view class="test-page__header">
<view class="test-page__title">ChatModule 视觉组件预览</view>
<view class="test-page__subtitle">组件使用 props mock 数据渲染，点击事件仅打印日志。</view>
@@ -7,98 +7,67 @@
<view class="test-page__section">
<view class="test-page__section-title">LongTextGuideCard</view>
<LongTextGuideCard
:data="longTextGuideCardMock"
@select="handleEvent('LongTextGuideCard', 'select', $event)"
<LongTextGuideCard :data="longTextGuideCardMock" @select="handleEvent('LongTextGuideCard', 'select', $event)"
@back="handleEvent('LongTextGuideCard', 'back', $event)"
@action="handleEvent('LongTextGuideCard', 'action', $event)"
/>
@action="handleEvent('LongTextGuideCard', 'action', $event)" />
</view>
<view class="test-page__section">
<view class="test-page__section-title">PoiDetailCard</view>
<PoiDetailCard
:data="poiDetailCardMock"
@action="handleEvent('PoiDetailCard', 'action', $event)"
/>
<PoiDetailCard :data="poiDetailCardMock" @action="handleEvent('PoiDetailCard', 'action', $event)" />
</view>
<view class="test-page__section">
<view class="test-page__section-title">RecommendationListCard</view>
<RecommendationListCard
:data="recommendationListCardMock"
@select="handleEvent('RecommendationListCard', 'select', $event)"
/>
<RecommendationListCard :data="recommendationListCardMock"
@select="handleEvent('RecommendationListCard', 'select', $event)" />
</view>
<view class="test-page__section">
<view class="test-page__section-title">PoiCompareCard</view>
<PoiCompareCard
:data="poiCompareCardMock"
@select="handleEvent('PoiCompareCard', 'select', $event)"
@back="handleEvent('PoiCompareCard', 'back', $event)"
/>
<PoiCompareCard :data="poiCompareCardMock" @select="handleEvent('PoiCompareCard', 'select', $event)"
@back="handleEvent('PoiCompareCard', 'back', $event)" />
</view>
<view class="test-page__section">
<view class="test-page__section-title">RoutePlanCard</view>
<RoutePlanCard
:data="routePlanCardMock"
@select="handleEvent('RoutePlanCard', 'select', $event)"
@back="handleEvent('RoutePlanCard', 'back', $event)"
/>
<RoutePlanCard :data="routePlanCardMock" @select="handleEvent('RoutePlanCard', 'select', $event)"
@back="handleEvent('RoutePlanCard', 'back', $event)" />
</view>
<view class="test-page__section">
<view class="test-page__section-title">FacilityLocationCard</view>
<FacilityLocationCard
:data="facilityLocationCardMock"
@select="handleEvent('FacilityLocationCard', 'select', $event)"
/>
<FacilityLocationCard :data="facilityLocationCardMock"
@select="handleEvent('FacilityLocationCard', 'select', $event)" />
</view>
<view class="test-page__section">
<view class="test-page__section-title">ScenicImageCard</view>
<ScenicImageCard
:data="scenicImageCardMock"
@select="handleEvent('ScenicImageCard', 'select', $event)"
@action="handleEvent('ScenicImageCard', 'action', $event)"
/>
<ScenicImageCard :data="scenicImageCardMock" @select="handleEvent('ScenicImageCard', 'select', $event)"
@action="handleEvent('ScenicImageCard', 'action', $event)" />
</view>
<view class="test-page__section">
<view class="test-page__section-title">MapNavigationCard</view>
<MapNavigationCard
:data="mapNavigationCardMock"
@select="handleEvent('MapNavigationCard', 'select', $event)"
@action="handleEvent('MapNavigationCard', 'action', $event)"
/>
<MapNavigationCard :data="mapNavigationCardMock" @select="handleEvent('MapNavigationCard', 'select', $event)"
@action="handleEvent('MapNavigationCard', 'action', $event)" />
</view>
<view class="test-page__section">
<view class="test-page__section-title">AigcPhotoCard</view>
<AigcPhotoCard
:data="aigcPhotoCardMock"
@select="handleEvent('AigcPhotoCard', 'select', $event)"
@action="handleEvent('AigcPhotoCard', 'action', $event)"
/>
<AigcPhotoCard :data="aigcPhotoCardMock" @select="handleEvent('AigcPhotoCard', 'select', $event)"
@action="handleEvent('AigcPhotoCard', 'action', $event)" />
</view>
<view class="test-page__section">
<view class="test-page__section-title">FaqHelpCard</view>
<FaqHelpCard
:data="faqHelpCardMock"
@select="handleEvent('FaqHelpCard', 'select', $event)"
/>
<FaqHelpCard :data="faqHelpCardMock" @select="handleEvent('FaqHelpCard', 'select', $event)" />
</view>
<view class="test-page__section">
<view class="test-page__section-title">NoticeCard</view>
<NoticeCard
:data="noticeCardMock"
@select="handleEvent('NoticeCard', 'select', $event)"
@back="handleEvent('NoticeCard', 'back', $event)"
/>
<NoticeCard :data="noticeCardMock" @select="handleEvent('NoticeCard', 'select', $event)"
@back="handleEvent('NoticeCard', 'back', $event)" />
</view>
</scroll-view>
</template>

91
src/static/scss/background.scss
View File

@@ -1,75 +1,4 @@
// 背景颜色
.bg-white {
background-color: #fff;
}
.bg-gray {
background-color: #f5f5f5;
}
.bg-F7F7F7 {
background-color: #f7f7f7;
}
.bg-17294E {
background-color: #17294e;
}
.bg-E5E8EE {
background-color: #e5e8ee;
}
.bg-F5F7FA {
background-color: #f5f7fa;
}
.bg-F2F5F8 {
background-color: #f2f5f8;
}
.bg-F8FAFC {
background-color: #f8fafc;
}
.bg-F1F5F9 {
background-color: #f1f5f9;
}
.bg-ECFDF5 {
background-color: #ecfdf5;
}
.bg-FFFBEB {
background-color: #fffbeb;
}
.bg-EFF6FF {
background-color: #eff6ff;
}
.bg-F5F3FF {
background-color: #f5f3ff;
}
.bg-FFF1F2 {
background-color: #fff1f2;
}
.bg-CCFBF1 {
background-color: #ccfbf1;
}
.bg-0F172A {
background-color: #0f172a;
}
.bg-0F766E {
background-color: #0f766e;
}
.bg-FF3D60 {
background-color: #ff3d60;
}
.bg-theme-color-500 {
background-color: $theme-color-500;
@@ -84,18 +13,14 @@
}
.bg-liner {
background: linear-gradient(205deg, $theme-color-100 0%, rgba(138, 227, 252, 0) 20%),
background:
linear-gradient(205deg, $theme-color-100 0%, rgba(138, 227, 252, 0) 20%),
linear-gradient(155deg, #fef7e1 0%, rgba(254, 247, 225, 0) 20%),
radial-gradient(48% 48% at 61% 118%,
radial-gradient(
48% 48% at 61% 118%,
#ffffff 0%,
rgba(255, 255, 255, 0) 100%),
linear-gradient(180deg, rgba(238, 248, 255, 0) 0%, $theme-color-50 50%), $theme-color-50;
}
.bg-button {
background: linear-gradient(90deg, $theme-color-500 0%, #4de4ff 100%);
}
.bg-transparent {
background-color: transparent;
rgba(255, 255, 255, 0) 100%
),
linear-gradient(180deg, rgba(238, 248, 255, 0) 0%, $theme-color-50 50%),
$theme-color-50;
}