Compare commits
14 Commits
V1.0.4
...
0b3d193b2f
| Author | SHA1 | Date | |
|---|---|---|---|
| 0b3d193b2f | |||
| 25d5593ff1 | |||
| 1c5a7ddaab | |||
| ecb1611cc0 | |||
| 7d7dc1ccc5 | |||
| 2d7e0d5bb7 | |||
| aaa1684103 | |||
| 05cc24d5f3 | |||
| c141913a2c | |||
| e3fa4b6a02 | |||
| b69d24b96a | |||
| 5031a710db | |||
| df8a7f4de7 | |||
| 9cfde3f10a |
1
.gitignore
vendored
1
.gitignore
vendored
@@ -22,3 +22,4 @@ dist
|
||||
*.sw?
|
||||
unpackage
|
||||
.hbuilderx
|
||||
.claude
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"zhinian": {
|
||||
"clientId": "6",
|
||||
"clientId": "8",
|
||||
"appId": "wx5e79df5996572539",
|
||||
"name": "智念",
|
||||
"placeholder": "快告诉智念您在想什么~",
|
||||
@@ -15,7 +15,14 @@
|
||||
"ipSmallImageWidth": 128,
|
||||
"ipSmallImageHeight": 128,
|
||||
"ipSmallTotalFrames": 117,
|
||||
"ipSmallColumns": 1
|
||||
"ipSmallColumns": 1,
|
||||
"theme": {
|
||||
"theme-color-800": "#0B7034",
|
||||
"theme-color-700": "#0B5C2D",
|
||||
"theme-color-500": "#0CCD58",
|
||||
"theme-color-100": "#E8FFF1",
|
||||
"theme-color-50": "#F0F8F3"
|
||||
}
|
||||
},
|
||||
"duohua": {
|
||||
"clientId": "2",
|
||||
@@ -33,7 +40,14 @@
|
||||
"ipSmallImageWidth": 128,
|
||||
"ipSmallImageHeight": 128,
|
||||
"ipSmallTotalFrames": 117,
|
||||
"ipSmallColumns": 1
|
||||
"ipSmallColumns": 1,
|
||||
"theme": {
|
||||
"theme-color-800": "#0B7034",
|
||||
"theme-color-700": "#0B5C2D",
|
||||
"theme-color-500": "#0CCD58",
|
||||
"theme-color-100": "#E8FFF1",
|
||||
"theme-color-50": "#F0F8F3"
|
||||
}
|
||||
},
|
||||
"tianmu": {
|
||||
"clientId": "4",
|
||||
@@ -51,6 +65,13 @@
|
||||
"ipSmallImageWidth": 128,
|
||||
"ipSmallImageHeight": 128,
|
||||
"ipSmallTotalFrames": 148,
|
||||
"ipSmallColumns": 1
|
||||
"ipSmallColumns": 1,
|
||||
"theme": {
|
||||
"theme-color-800": "#8B5CF6",
|
||||
"theme-color-700": "#7C3AED",
|
||||
"theme-color-500": "#A78BFA",
|
||||
"theme-color-100": "#EDE9FE",
|
||||
"theme-color-50": "#F5F3FF"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -50,6 +50,38 @@ if (!input) {
|
||||
// 文件路径
|
||||
const manifestPath = path.join(__dirname, "../src/manifest.json");
|
||||
const projectConfigPath = path.join(__dirname, "../project.config.json");
|
||||
const uniScssPath = path.join(__dirname, "../src/uni.scss");
|
||||
|
||||
/**
|
||||
* 更新 uni.scss 中的主题色变量
|
||||
*/
|
||||
function updateUniScss(clientName) {
|
||||
try {
|
||||
const theme = CLIENT_CONFIGS[clientName].theme;
|
||||
if (!theme) {
|
||||
console.log("⚠️ 未找到主题色配置,跳过更新 uni.scss");
|
||||
return true;
|
||||
}
|
||||
|
||||
console.log("📝 正在更新 uni.scss 主题色...");
|
||||
let content = fs.readFileSync(uniScssPath, "utf8");
|
||||
|
||||
// 更新主题色变量
|
||||
const themeKeys = Object.keys(theme);
|
||||
themeKeys.forEach((key) => {
|
||||
// 匹配形如 $theme-color-800: #174BB6; 的正则
|
||||
const regex = new RegExp(`(\\\$${key}):\\s*#[0-9a-fA-F]+;`);
|
||||
content = content.replace(regex, `$1: ${theme[key]};`);
|
||||
});
|
||||
|
||||
fs.writeFileSync(uniScssPath, content, "utf8");
|
||||
console.log("✅ uni.scss 主题色更新成功");
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error("❌ 更新 uni.scss 失败:", error.message);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新base.js中的getCurrentConfig函数
|
||||
@@ -195,8 +227,9 @@ function main() {
|
||||
const baseSuccess = updateBaseJs(clientName);
|
||||
const manifestSuccess = updateManifestJson(newAppId);
|
||||
const projectConfigSuccess = updateProjectConfigJson(newAppId);
|
||||
const scssSuccess = updateUniScss(clientName);
|
||||
|
||||
if (baseSuccess && manifestSuccess && projectConfigSuccess) {
|
||||
if (baseSuccess && manifestSuccess && projectConfigSuccess && scssSuccess) {
|
||||
console.log("\n🎉 所有文件更新完成!");
|
||||
console.log(`💡 已切换到 ${CLIENT_CONFIGS[clientName].name} 客户端配置`);
|
||||
console.log("💡 提示: 请检查文件内容确认更新正确");
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
class="w-full bg-white border-box border-ff overflow-hidden rounded-20"
|
||||
>
|
||||
<view
|
||||
class="border-box order-header w-vw flex flex-items-center flex-justify-between bg-EEF8FF"
|
||||
class="border-box order-header w-vw flex flex-items-center flex-justify-between bg-theme-color-50"
|
||||
>
|
||||
<text class="font-size-18 font-500 color-171717 text-left ml-12">
|
||||
{{ isCallSuccess ? "服务已创建" : "呼叫服务" }}
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
</text>
|
||||
</view>
|
||||
<view class="flex flex-items-center" v-if="showBtn" @click="emit('click')">
|
||||
<text class="font-size-12 color-2D91FF line-height-16">房间详情</text>
|
||||
<text class="font-size-12 theme-color-500 line-height-16">房间详情</text>
|
||||
<uni-icons type="right" size="15" color="#99A0AE" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
class="w-full bg-white border-box border-ff overflow-hidden rounded-20"
|
||||
>
|
||||
<view
|
||||
class="border-box order-header w-vw flex flex-items-center flex-justify-between bg-EEF8FF"
|
||||
class="border-box order-header w-vw flex flex-items-center flex-justify-between bg-theme-color-50"
|
||||
>
|
||||
<text class="font-size-18 font-500 color-171717 text-left ml-12">
|
||||
{{ isCallSuccess ? "反馈已创建" : "反馈意见" }}
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
<uni-icons fontFamily="znicons" size="20" color="#333">
|
||||
{{ zniconsMap[moduleItem.moduleIcon] }}
|
||||
</uni-icons>
|
||||
<text class="font-size-14 color-171717 line-height-20">
|
||||
<text class="ml-4 font-size-14 color-171717 line-height-20">
|
||||
{{ moduleItem.moduleTitle }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
|
||||
<!-- 缩略图部分 -->
|
||||
<view
|
||||
v-if="showThumbnails"
|
||||
v-if="showThumbnails && thumbnails.length > 0"
|
||||
class="thumbnail-box"
|
||||
:style="thumbnailBoxStyle"
|
||||
>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
@@ -1,14 +1,26 @@
|
||||
<template>
|
||||
<view class="store-address" @click="openMap">
|
||||
<view class="text-container">
|
||||
<text class="location-label">位于 {{ orderData.oneLevelAddress }} </text>
|
||||
<view class="store-address">
|
||||
<view class="text-container" @click.stop="openMap">
|
||||
<text class="location-label">位于 {{ orderData.oneLevelAddress }}</text>
|
||||
<text class="address-text">{{ orderData.commodityAddress }}</text>
|
||||
</view>
|
||||
<image
|
||||
class="loc-icon"
|
||||
src="./images/loc_icon_img.png"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
|
||||
<view class="actions">
|
||||
<view>
|
||||
<view class="actions-btn" @click.stop="openMap">
|
||||
<text class="actions-icon">📞</text>
|
||||
</view>
|
||||
<text class="actions-text">导航</text>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<view class="actions-btn" @click.stop="callPhone">
|
||||
<text class="actions-icon">📞</text>
|
||||
</view>
|
||||
<text class="actions-text">电话</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -30,21 +42,38 @@ const openMap = () => {
|
||||
const longitude = Number(props.orderData.commodityLongitude);
|
||||
|
||||
uni.getLocation({
|
||||
type: "gcj02", //返回可以用于uni.openLocation的经纬度
|
||||
success: (res) => {
|
||||
console.log("当前经纬度", latitude, longitude);
|
||||
|
||||
type: "gcj02",
|
||||
success: () => {
|
||||
uni.openLocation({
|
||||
latitude: latitude,
|
||||
longitude: longitude,
|
||||
address: address,
|
||||
success: () => {
|
||||
console.log("success");
|
||||
});
|
||||
},
|
||||
fail: () => {
|
||||
uni.openLocation({
|
||||
latitude: latitude,
|
||||
longitude: longitude,
|
||||
address: address,
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 拨打电话
|
||||
const getPhoneNumber = () => {
|
||||
const o = props.orderData || {};
|
||||
return o.commodityPhone || o.phone || o.contactPhone || "";
|
||||
};
|
||||
|
||||
const callPhone = () => {
|
||||
const phone = getPhoneNumber();
|
||||
if (!phone) {
|
||||
uni.showToast({ title: "未提供电话号码", icon: "none" });
|
||||
return;
|
||||
}
|
||||
uni.makePhoneCall({ phoneNumber: String(phone) });
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@@ -1,51 +1,56 @@
|
||||
.store-address {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 6px 12px;
|
||||
padding: 16px 12px;
|
||||
background-image: url("./images/loc_bg_img.png"); // 预留背景图片位置,用户手动导入
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-radius: 20px;
|
||||
font-size: $uni-font-size-base;
|
||||
color: $uni-text-color;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-top: 12px;
|
||||
padding: 12px;
|
||||
background-color: #ffffff;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
|
||||
// 左侧文本容器
|
||||
.text-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
// 确保内容在遮罩层之上
|
||||
.location-label,
|
||||
.address-text,
|
||||
.loc-icon {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.location-label {
|
||||
color: $uni-text-color;
|
||||
color: $text-color-800;
|
||||
font-size: $uni-font-size-base;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.address-text {
|
||||
margin-top: 4px;
|
||||
color: #666;
|
||||
color: $text-color-600;
|
||||
font-size: $uni-font-size-sm;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
// 右侧图标样式
|
||||
.loc-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-left: 12px;
|
||||
// 右侧操作按钮组
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.actions-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 10px;
|
||||
background-color: #F5F5F5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.actions-icon {
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.actions-text {
|
||||
font-size: $uni-font-size-sm;
|
||||
color: $text-color-600;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class="survey-questionnaire w-vw-24">
|
||||
<view class="bg-white border-box border-ff overflow-hidden rounded-20">
|
||||
<view class="border-box flex flex-items-center flex-justify-between bg-EEF8FF">
|
||||
<view class="border-box flex flex-items-center flex-justify-between bg-theme-color-50">
|
||||
<text class="font-size-18 font-500 color-171717 text-left ml-12">
|
||||
调查问卷
|
||||
</text>
|
||||
|
||||
@@ -15,38 +15,24 @@
|
||||
<!-- 商品大图部分:自适应剩余空间 -->
|
||||
<view class="goods-image-wrapper relative">
|
||||
<image class="w-full h-full" :src="card.commodityPhoto" mode="aspectFill"/>
|
||||
<view
|
||||
class="goods-title absolute left-0 right-0 bottom-0 border-box p-12"
|
||||
>
|
||||
<view class="font-size-14 font-500 color-white ellipsis-1">
|
||||
</view>
|
||||
|
||||
<!-- 底部:价格 + 购买按钮 -->
|
||||
<view class="card-footer border-box p-12 flex flex-justify-between flex-items-center">
|
||||
<view class="border-box">
|
||||
<view class="font-size-14 font-500 color-333 ellipsis-1">
|
||||
{{ card.commodityName }}
|
||||
</view>
|
||||
<view class="card-price-row color-white">
|
||||
<view class="card-price-row color-333">
|
||||
<text class="font-size-11">¥</text>
|
||||
<text class="font-size-14 font-bold">
|
||||
<text class="font-size-24 font-bold">
|
||||
{{ card.specificationPrice }}
|
||||
</text>
|
||||
<text class="font-size-11 ml-2" v-if="card.stockUnitLabel"
|
||||
>/{{ card.stockUnitLabel }}</text
|
||||
>
|
||||
</view>
|
||||
<text class="font-size-11 ml-2" v-if="card.stockUnitLabel">/{{ card.stockUnitLabel }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部相册部分:固定比例或高度 -->
|
||||
<view class="border-box p-12 flex flex-justify-between">
|
||||
<view
|
||||
v-for="(item, index) in card.commodityPhotoList"
|
||||
:key="index"
|
||||
class="album-item relative overflow-hidden bg-f5 rounded-10"
|
||||
>
|
||||
<image :src="item.photoUrl" mode="aspectFill" />
|
||||
<view
|
||||
class="album-title absolute left-0 right-0 bottom-0 color-white font-size-11 font-500 ellipsis-1 flex flex-items-center flex-justify-center"
|
||||
>
|
||||
{{ item.photoName }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="buy-btn" @click.stop="placeOrderHandle(card)">购买</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -21,13 +21,6 @@
|
||||
height: 193px;
|
||||
}
|
||||
|
||||
.goods-title {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
rgba(0, 0, 0, 0.6) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.album-item {
|
||||
width: 96px;
|
||||
@@ -38,3 +31,31 @@
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* 底部价格与购买按钮 */
|
||||
.card-footer {
|
||||
border-top: 1px solid rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.card-footer .price-left {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
color: #171717;
|
||||
}
|
||||
|
||||
.buy-btn {
|
||||
background-color: $theme-color-500;
|
||||
color: #fff;
|
||||
margin-top: 12px;
|
||||
padding: 12px 24px;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.buy-btn:active {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
@@ -1,37 +1,23 @@
|
||||
<template>
|
||||
<view :class="navBarClass" :style="navBarStyle">
|
||||
<!-- 状态栏占位 -->
|
||||
<view
|
||||
:style="{ height: statusBarHeight + 'px' }"
|
||||
v-if="!hideStatusBar"
|
||||
></view>
|
||||
<view :style="{ height: statusBarHeight + 'px' }" v-if="!hideStatusBar"></view>
|
||||
|
||||
<!-- 导航栏内容 -->
|
||||
<view
|
||||
class="flex flex-items-center flex-justify-between border-box pl-8 pr-8"
|
||||
:style="{ height: navBarHeight + 'px' }"
|
||||
>
|
||||
<view class="flex flex-items-center flex-justify-between border-box pl-8 pr-8"
|
||||
:style="{ height: navBarHeight + 'px' }">
|
||||
<!-- 左侧返回按钮 -->
|
||||
<view
|
||||
class="nav-bar-left flex flex-items-center flex-justify-center"
|
||||
v-if="showBack"
|
||||
@click="handleBack"
|
||||
>
|
||||
<view class="nav-bar-left flex flex-items-center flex-justify-center" v-if="showBack" @click="handleBack">
|
||||
<uni-icons type="left" size="20" :color="backIconColor" />
|
||||
</view>
|
||||
|
||||
<!-- 中间标题区域 -->
|
||||
<view
|
||||
:class="[
|
||||
<view :class="[
|
||||
'nav-bar-center flex flex-items-center flex-justify-center',
|
||||
`nav-bar-center--${titleAlign}`,
|
||||
]"
|
||||
>
|
||||
]">
|
||||
<slot name="title">
|
||||
<text
|
||||
class="font-size-17 font-500 color-000"
|
||||
:style="{ color: titleColor }"
|
||||
>
|
||||
<text class="font-size-17 font-500 color-000" :style="{ color: titleColor }">
|
||||
{{ title }}
|
||||
</text>
|
||||
</slot>
|
||||
@@ -68,7 +54,7 @@ const props = defineProps({
|
||||
// 背景颜色
|
||||
background: {
|
||||
type: String,
|
||||
default: "#d9eeff",
|
||||
default: "$theme-color-100",
|
||||
},
|
||||
// 标题颜色
|
||||
titleColor: {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// TopNavBar 组件样式
|
||||
.top-nav-bar {
|
||||
width: 100%;
|
||||
background-color: #d9eeff;
|
||||
background-color: $theme-color-100;
|
||||
|
||||
&--fixed {
|
||||
position: fixed;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<view class="booking h-screen flex flex-col">
|
||||
<TopNavBar
|
||||
titleAlign="center"
|
||||
backgroundColor="#D9EEFF"
|
||||
:backgroundColor="$theme-color-100"
|
||||
backIconColor="#000"
|
||||
:shadow="false"
|
||||
>
|
||||
@@ -53,7 +53,7 @@
|
||||
>
|
||||
<view class="flex flex-items-center">
|
||||
<text
|
||||
class="font-size-12 color-2D91FF line-height-16"
|
||||
class="font-size-12 theme-color-500 line-height-16"
|
||||
@click="refundVisible = true"
|
||||
>取消政策</text
|
||||
>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.booking {
|
||||
background: linear-gradient(180deg, #d9eeff 0%, #f5f7fa 100%) 0 86px / 100%
|
||||
background: linear-gradient(180deg, $theme-color-100 0%, #f5f7fa 100%) 0 86px / 100%
|
||||
100px no-repeat;
|
||||
}
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
>
|
||||
<view class="color-525866">取消政策及说明</view>
|
||||
<view class="flex flex-items-center" @click="emit('click')">
|
||||
<text class="color-2D91FF mr-4">查看详情</text>
|
||||
<text class="theme-color-500 mr-4">查看详情</text>
|
||||
<uni-icons type="right" size="12" color="#99A0AE" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
'right border-none rounded-10 flex flex-full flex-items-center flex-justify-center font-size-14 font-500 color-white',
|
||||
{
|
||||
'bg-FF3D60': statusCode === '0',
|
||||
'bg-2D91FF': ['1', '2', '3', '4', '5', '6'].includes(statusCode),
|
||||
'theme-color-500': ['1', '2', '3', '4', '5', '6'].includes(statusCode),
|
||||
},
|
||||
]"
|
||||
@click="handleButtonClick(orderData)"
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
}
|
||||
|
||||
&.tag-4 {
|
||||
color: #2d91ff;
|
||||
color: $theme-color-500;
|
||||
}
|
||||
|
||||
&.tag-5 {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="order-detail-page flex flex-col h-screen">
|
||||
<TopNavBar titleAlign="center" background="#D9EEFF" title="订单详情" />
|
||||
<TopNavBar titleAlign="center" :background="$theme-color-100" title="订单详情" />
|
||||
|
||||
<view
|
||||
class="order-detail-wrapper border-box flex-full overflow-hidden scroll-y"
|
||||
|
||||
@@ -1,14 +1,8 @@
|
||||
<template>
|
||||
<z-paging
|
||||
bg-color="linear-gradient(180deg, #D9EEFF 0%, #F5F7FA 100%) 0 86px / 100% 100px no-repeat"
|
||||
ref="paging"
|
||||
v-model="dataList"
|
||||
use-virtual-list
|
||||
:force-close-inner-list="true"
|
||||
cell-height-mode="dynamic"
|
||||
safe-area-inset-bottom
|
||||
@query="queryList"
|
||||
>
|
||||
:bg-color="'linear-gradient(180deg, ' + $theme-color-100 + ' 0%, #F5F7FA 100%) 0 86px / 100% 100px no-repeat'"
|
||||
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="全部订单" />
|
||||
</template>
|
||||
@@ -17,12 +11,7 @@
|
||||
<CustomEmpty statusText="您暂无订单" />
|
||||
</template>
|
||||
|
||||
<OrderCard
|
||||
v-for="(item, index) in dataList"
|
||||
:key="item.id || index"
|
||||
:orderData="item"
|
||||
@click="handleOrderClick"
|
||||
/>
|
||||
<OrderCard v-for="(item, index) in dataList" :key="item.id || index" :orderData="item" @click="handleOrderClick" />
|
||||
</z-paging>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.order-detail-wrapper {
|
||||
background: linear-gradient(180deg, #d9eeff 0%, #f5f7fa 100%);
|
||||
background: linear-gradient(180deg, $theme-color-100 0%, #f5f7fa 100%);
|
||||
padding: 0 12px 40px;
|
||||
}
|
||||
|
||||
@@ -1,65 +1,34 @@
|
||||
<template>
|
||||
<view class="tab-container relative">
|
||||
<view class="tab-wrapper flex flex-items-center flex-justify-center">
|
||||
<view
|
||||
v-for="(item, index) in tabList"
|
||||
:key="index"
|
||||
:class="[
|
||||
'tab-item flex flex-full flex-items-center flex-justify-center relative',
|
||||
<view class="tab-wrapper flex flex-items-center">
|
||||
<view v-for="(item, index) in tabList" :key="index" :class="[
|
||||
'tab-item flex flex-items-center flex-justify-center relative',
|
||||
activeIndex === index && 'tab-item-active',
|
||||
]"
|
||||
@click="handleTabClick(index)"
|
||||
>
|
||||
<view class="absolute flex flex-items-center">
|
||||
<uni-icons
|
||||
class="icon mr-4"
|
||||
fontFamily="znicons"
|
||||
size="20"
|
||||
:color="activeIndex === index ? '#2D91FF' : '#525866'"
|
||||
>
|
||||
]" @click="handleTabClick(index)">
|
||||
<view class="tab-item-inner flex flex-items-center">
|
||||
<uni-icons :class="['icon mr-4', activeIndex === index && 'icon-active']" fontFamily="znicons" size="20" color="opacity">
|
||||
{{ zniconsMap[item.icon] }}
|
||||
</uni-icons>
|
||||
<text
|
||||
:class="[
|
||||
|
||||
<text :class="[
|
||||
'font-size-16 font-500 color-525866 ',
|
||||
activeIndex === index && 'tab-text-active',
|
||||
]"
|
||||
>
|
||||
]">
|
||||
{{ item.label }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 下划线指示器 -->
|
||||
<view
|
||||
:class="[
|
||||
'tab-indicator absolute',
|
||||
indicatorAnimating && 'animating',
|
||||
indicatorInitialized && 'initialized',
|
||||
]"
|
||||
:style="{
|
||||
left: indicatorLeft + 'px',
|
||||
width: indicatorWidth + 'px',
|
||||
}"
|
||||
></view>
|
||||
<!-- 每项内的下划线指示器,通过类控制显示/隐藏 -->
|
||||
<view class="tab-item-indicator" :class="{ visible: activeIndex === index }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
nextTick,
|
||||
watch,
|
||||
getCurrentInstance,
|
||||
} from "vue";
|
||||
import { ref, watch } from "vue";
|
||||
import { zniconsMap } from "@/static/fonts/znicons";
|
||||
|
||||
// 获取组件实例
|
||||
const instance = getCurrentInstance();
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
tabs: {
|
||||
@@ -68,7 +37,8 @@ const props = defineProps({
|
||||
{ label: "客房", value: "0", icon: "zn-nav-room" },
|
||||
{ label: "门票", value: "1", icon: "zn-nav-ticket" },
|
||||
{ label: "餐食", value: "2", icon: "zn-nav-meal" },
|
||||
// { label: "套餐", value: "3", icon: "zn-package" },
|
||||
{ label: "套餐", value: "3", icon: "zn-package" },
|
||||
{ label: "文创", value: "4", icon: "zn-package" },
|
||||
],
|
||||
},
|
||||
defaultActive: {
|
||||
@@ -77,7 +47,7 @@ const props = defineProps({
|
||||
},
|
||||
indicatorColor: {
|
||||
type: String,
|
||||
default: "#007AFF",
|
||||
default: "#1890ff"
|
||||
},
|
||||
});
|
||||
|
||||
@@ -87,25 +57,12 @@ const emit = defineEmits(["change", "update:modelValue"]);
|
||||
// 响应式数据
|
||||
const activeIndex = ref(props.defaultActive);
|
||||
const tabList = ref(props.tabs);
|
||||
const indicatorLeft = ref(0);
|
||||
const indicatorWidth = ref(0);
|
||||
const tabItemRects = reactive([]);
|
||||
const isUpdating = ref(false);
|
||||
const indicatorAnimating = ref(false);
|
||||
const indicatorInitialized = ref(false);
|
||||
|
||||
// 处理Tab点击
|
||||
const handleTabClick = (index) => {
|
||||
if (activeIndex.value === index) return;
|
||||
|
||||
activeIndex.value = index;
|
||||
indicatorAnimating.value = true;
|
||||
updateIndicator();
|
||||
|
||||
// 动画结束后移除动画类
|
||||
setTimeout(() => {
|
||||
indicatorAnimating.value = false;
|
||||
}, 300);
|
||||
|
||||
emit("change", {
|
||||
index,
|
||||
@@ -114,87 +71,11 @@ const handleTabClick = (index) => {
|
||||
emit("update:modelValue", index);
|
||||
};
|
||||
|
||||
// 更新指示器位置
|
||||
const updateIndicator = async () => {
|
||||
if (isUpdating.value) return;
|
||||
isUpdating.value = true;
|
||||
|
||||
await nextTick();
|
||||
|
||||
// 检查实例是否存在
|
||||
if (!instance) {
|
||||
console.warn("Component instance not available");
|
||||
isUpdating.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查 uni.createSelectorQuery 是否可用
|
||||
if (!uni || !uni.createSelectorQuery) {
|
||||
console.warn("uni.createSelectorQuery not available");
|
||||
isUpdating.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const query = uni.createSelectorQuery().in(instance);
|
||||
|
||||
// 同时获取tab项和容器的位置信息
|
||||
query.selectAll(".tab-item").boundingClientRect();
|
||||
query.select(".tab-wrapper").boundingClientRect();
|
||||
|
||||
query.exec((res) => {
|
||||
try {
|
||||
const [tabRects, wrapperRect] = res || [];
|
||||
|
||||
if (tabRects && tabRects.length > 0 && wrapperRect) {
|
||||
tabItemRects.splice(0, tabItemRects.length, ...tabRects);
|
||||
|
||||
const activeRect = tabRects[activeIndex.value];
|
||||
if (activeRect) {
|
||||
// 计算相对于容器的位置,居中显示
|
||||
const tabCenter =
|
||||
activeRect.left - wrapperRect.left + activeRect.width / 2;
|
||||
indicatorLeft.value = tabCenter - 10; // 15px宽度的一半
|
||||
// 固定宽度15px,不动态计算宽度
|
||||
indicatorWidth.value = 20;
|
||||
|
||||
// 标记为已初始化
|
||||
if (!indicatorInitialized.value) {
|
||||
indicatorInitialized.value = true;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.warn("Failed to get tab rects or wrapper rect");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error in updateIndicator exec:", error);
|
||||
} finally {
|
||||
isUpdating.value = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 监听activeIndex变化
|
||||
watch(
|
||||
() => activeIndex.value,
|
||||
() => {
|
||||
// 如果是初始化阶段,使用initIndicator
|
||||
if (indicatorLeft.value === 0 && indicatorWidth.value === 0) {
|
||||
initIndicator();
|
||||
} else {
|
||||
updateIndicator();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 监听tabs变化
|
||||
watch(
|
||||
() => props.tabs,
|
||||
(newTabs) => {
|
||||
tabList.value = newTabs;
|
||||
// 重置初始化状态
|
||||
indicatorInitialized.value = false;
|
||||
// 重新初始化指示器
|
||||
initIndicator();
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
@@ -205,71 +86,10 @@ watch(
|
||||
(newActive) => {
|
||||
if (newActive !== activeIndex.value) {
|
||||
activeIndex.value = newActive;
|
||||
// 重置初始化状态
|
||||
indicatorInitialized.value = false;
|
||||
initIndicator();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 初始化指示器
|
||||
const initIndicator = async (retryCount = 0) => {
|
||||
// 等待DOM完全渲染
|
||||
await nextTick();
|
||||
|
||||
// 延迟一帧确保布局完成
|
||||
setTimeout(() => {
|
||||
// 检查实例是否存在
|
||||
if (!instance) {
|
||||
console.warn("Component instance not available in initIndicator");
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查 uni.createSelectorQuery 是否可用
|
||||
if (!uni || !uni.createSelectorQuery) {
|
||||
console.warn("uni.createSelectorQuery not available in initIndicator");
|
||||
return;
|
||||
}
|
||||
|
||||
const query = uni.createSelectorQuery().in(instance);
|
||||
query.selectAll(".tab-item").boundingClientRect();
|
||||
query.select(".tab-wrapper").boundingClientRect();
|
||||
|
||||
query.exec((res) => {
|
||||
try {
|
||||
const [tabRects, wrapperRect] = res || [];
|
||||
|
||||
// 如果DOM元素还未准备好,重试
|
||||
if (
|
||||
(!tabRects || tabRects.length === 0 || !wrapperRect) &&
|
||||
retryCount < 3
|
||||
) {
|
||||
setTimeout(() => {
|
||||
initIndicator(retryCount + 1);
|
||||
}, 100);
|
||||
return;
|
||||
}
|
||||
|
||||
// 执行正常的更新逻辑
|
||||
updateIndicator();
|
||||
} catch (error) {
|
||||
console.error("Error in initIndicator exec:", error);
|
||||
// 如果出错且还有重试次数,尝试重试
|
||||
if (retryCount < 3) {
|
||||
setTimeout(() => {
|
||||
initIndicator(retryCount + 1);
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
});
|
||||
}, 50);
|
||||
};
|
||||
|
||||
// 组件挂载后初始化指示器
|
||||
onMounted(() => {
|
||||
initIndicator();
|
||||
});
|
||||
|
||||
// 暴露方法
|
||||
defineExpose({
|
||||
setActiveIndex: (index) => {
|
||||
@@ -281,7 +101,6 @@ defineExpose({
|
||||
getActiveItem: () => tabList.value[activeIndex.value],
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -1,15 +1,41 @@
|
||||
.tab-wrapper {
|
||||
background-color: #d9eeff;
|
||||
background-color: $theme-color-100;
|
||||
height: 48px;
|
||||
overflow-x: auto;
|
||||
/* 支持横向滚动 */
|
||||
-webkit-overflow-scrolling: touch;
|
||||
/* 平滑滚动(移动端) */
|
||||
white-space: nowrap;
|
||||
/* 防止换行 */
|
||||
justify-content: flex-start;
|
||||
/* 覆盖工具类,靠左排列以便滚动 */
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
height: 100%;
|
||||
flex: 0 0 auto;
|
||||
/* 不让子项拉伸,按内容宽度排列 */
|
||||
padding: 0 12px;
|
||||
/* 增加横向间距,便于触控 */
|
||||
min-width: 56px;
|
||||
/* 保证可点击区域 */
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
color: #525866;
|
||||
}
|
||||
|
||||
.icon-active {
|
||||
color: $theme-color-500;
|
||||
}
|
||||
|
||||
/* 组件模板中使用了绝对定位的内部元素,为保证父元素宽度基于内容,重置该子元素为静态布局 */
|
||||
.tab-item>.absolute {
|
||||
position: static !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tab-item-active {
|
||||
@@ -24,49 +50,41 @@
|
||||
border-radius: 20px 20px 0 0;
|
||||
transform: perspective(40px) rotateX(6deg) translate(0, -1px);
|
||||
transform-origin: bottom bottom;
|
||||
box-shadow: 0 -0.5px 0 #2d91ff;
|
||||
box-shadow: 0 -0.5px 0 $theme-color-500;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-text-active {
|
||||
color: #2d91ff;
|
||||
color: $theme-color-500;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.tab-indicator {
|
||||
/* 已改为每项内部指示器,移除了全局指示器样式 */
|
||||
|
||||
/* 每项内的指示器(替代全局指示器) */
|
||||
.tab-item-inner {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
/* 确保内容(icon/text)位于 .tab-item-active::before 之上 */
|
||||
}
|
||||
|
||||
.tab-item-indicator {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scaleX(0.9);
|
||||
height: 3px;
|
||||
background-color: #2d91ff;
|
||||
width: 20px;
|
||||
background-color: $theme-color-500;
|
||||
border-radius: 4px 4px 0 0;
|
||||
transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
z-index: 3;
|
||||
transform: translateZ(0); /* 启用硬件加速 */
|
||||
will-change: left, width; /* 优化动画性能 */
|
||||
|
||||
/* 初始状态:未初始化时隐藏 */
|
||||
opacity: 0;
|
||||
width: 20px; /* 默认宽度15px */
|
||||
left: 0;
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* 已初始化状态 */
|
||||
.tab-indicator.initialized {
|
||||
.tab-item-indicator.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 动画增强 */
|
||||
@keyframes tabSwitch {
|
||||
0% {
|
||||
transform: translateZ(0) scaleX(0.8);
|
||||
opacity: 0.6;
|
||||
}
|
||||
100% {
|
||||
transform: translateZ(0) scaleX(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-indicator.animating {
|
||||
animation: tabSwitch 0.3s ease-out;
|
||||
transform: translateX(-50%) scaleX(1);
|
||||
}
|
||||
@@ -1,23 +1,13 @@
|
||||
<template>
|
||||
<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"
|
||||
>
|
||||
<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="快速预定" />
|
||||
<TopNavBar title="快速预定" :background="$theme-color-100" />
|
||||
|
||||
<Tabs @change="handleTabChange" />
|
||||
|
||||
<!-- 选择入住、离店日期 -->
|
||||
<view
|
||||
class="bg-white border-box flex flex-items-center p-12"
|
||||
v-if="currentType === '0'"
|
||||
>
|
||||
<view class="bg-white border-box flex flex-items-center p-12" v-if="currentType === '0'">
|
||||
<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">
|
||||
@@ -26,9 +16,7 @@
|
||||
</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>
|
||||
|
||||
@@ -40,32 +28,16 @@
|
||||
</view>
|
||||
|
||||
<!-- 日期图标 -->
|
||||
<uni-icons
|
||||
class="ml-auto"
|
||||
type="calendar"
|
||||
size="24"
|
||||
color="#2D91FF"
|
||||
@click="calendarVisible = true"
|
||||
/>
|
||||
<uni-icons class="ml-auto" type="calendar" size="24" color="$theme-color-500" @click="calendarVisible = true" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<Card
|
||||
v-for="(item, index) in dataList"
|
||||
:key="index"
|
||||
:item="item"
|
||||
:selectedDate="selectedDate"
|
||||
/>
|
||||
<Card v-for="(item, index) in dataList" :key="index" :item="item" :selectedDate="selectedDate" />
|
||||
</z-paging>
|
||||
|
||||
<!-- 日历组件 -->
|
||||
<Calender
|
||||
:visible="calendarVisible"
|
||||
mode="range"
|
||||
:default-value="selectedDate"
|
||||
@close="handleCalendarClose"
|
||||
@range-select="handleDateSelect"
|
||||
/>
|
||||
<Calender :visible="calendarVisible" mode="range" :default-value="selectedDate" @close="handleCalendarClose"
|
||||
@range-select="handleDateSelect" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
@@ -1,30 +1,18 @@
|
||||
<template>
|
||||
<z-paging
|
||||
bg-color="linear-gradient(180deg, #D9EEFF 0%, #F5F7FA 100%) 0 86px / 100% 100px no-repeat"
|
||||
ref="paging"
|
||||
v-model="dataList"
|
||||
use-virtual-list
|
||||
:force-close-inner-list="true"
|
||||
cell-height-mode="dynamic"
|
||||
safe-area-inset-bottom
|
||||
@query="queryList"
|
||||
>
|
||||
:bg-color="'linear-gradient(180deg, ' + $theme - color - 100 + ' 0%, #F5F7FA 100%) 0 86px / 100% 100px no-repeat'"
|
||||
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="呼叫服务" />
|
||||
</template>
|
||||
|
||||
<template #empty>
|
||||
<CustomEmpty
|
||||
emptyIcon="https://oss.nianxx.cn/mp/static/version_101/order/service_empty.png"
|
||||
statusText="您暂无呼叫服务"
|
||||
/>
|
||||
<CustomEmpty emptyIcon="https://oss.nianxx.cn/mp/static/version_101/order/service_empty.png"
|
||||
statusText="您暂无呼叫服务" />
|
||||
</template>
|
||||
|
||||
<OrderCard
|
||||
v-for="(item, index) in dataList"
|
||||
:key="item.id || index"
|
||||
:orderData="item"
|
||||
/>
|
||||
<OrderCard v-for="(item, index) in dataList" :key="item.id || index" :orderData="item" />
|
||||
</z-paging>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<uni-icons fontFamily="znicons" size="20" color="#171717">
|
||||
{{ zniconsMap[moduleItem.icon] }}
|
||||
</uni-icons>
|
||||
<text class="font-size-12 color-171717 line-height-20">
|
||||
<text class="ml-4 font-size-12 color-171717 line-height-20">
|
||||
{{ moduleItem.title }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
39
src/pages/goods/components/GoodPackage/index.vue
Normal file
39
src/pages/goods/components/GoodPackage/index.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<view class="border-box border-top-8 pl-12 pr-12">
|
||||
<ModuleTitle
|
||||
v-if="showTitle"
|
||||
title="套餐包含内容"
|
||||
/>
|
||||
<view class="flex flex-items-start flex-col"
|
||||
v-for="(item, index) in goodsData.commodityPackageConfig" :key="index"
|
||||
>
|
||||
<view class="title-row ml-4 mb-4">
|
||||
<text class="left font-size-14 color-171717">{{ item.name }}</text>
|
||||
<view class="sep" aria-hidden="true"></view>
|
||||
<text class="right font-size-14 color-171717">{{ item.count }}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ModuleTitle from "@/components/ModuleTitle/index.vue";
|
||||
import { defineProps } from "vue";
|
||||
|
||||
// Props定义
|
||||
const props = defineProps({
|
||||
goodsData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
showTitle: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
20
src/pages/goods/components/GoodPackage/styles/index.scss
Normal file
20
src/pages/goods/components/GoodPackage/styles/index.scss
Normal file
@@ -0,0 +1,20 @@
|
||||
.title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.title-row .left,
|
||||
.title-row .right {
|
||||
white-space: nowrap;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.title-row .sep {
|
||||
flex: 1 1 auto;
|
||||
height: 1px;
|
||||
margin: 0 8px;
|
||||
background-image: repeating-linear-gradient(to right, #CACFD8 0 10px, transparent 10px 16px);
|
||||
background-repeat: repeat-x;
|
||||
background-position: center;
|
||||
}
|
||||
@@ -34,6 +34,8 @@
|
||||
:nights="selectedDate.totalDays"
|
||||
/>
|
||||
|
||||
<GoodPackage v-if="goodsData.commodityPackageConfig && goodsData.commodityPackageConfig.length > 0" :goodsData="goodsData" />
|
||||
|
||||
<!-- 商品设施组件 -->
|
||||
<GoodFacility :goodsData="goodsData" />
|
||||
|
||||
@@ -87,6 +89,7 @@ import LocationCard from "@/components/LocationCard/index.vue";
|
||||
import DateSelector from "./components/DateSelector/index.vue";
|
||||
import GoodDetail from "@/components/GoodDetail/index.vue";
|
||||
import GoodFacility from "./components/GoodFacility/index.vue";
|
||||
import GoodPackage from "./components/GoodPackage/index.vue";
|
||||
import { useSelectedDateStore } from "@/store";
|
||||
|
||||
// 导航栏透明度 - 默认透明,随滚动变为不透明
|
||||
|
||||
@@ -65,7 +65,7 @@
|
||||
#8afcf8 0%,
|
||||
rgba(138, 252, 248, 0) 100%
|
||||
),
|
||||
#2d91ff;
|
||||
$theme-color-500;
|
||||
}
|
||||
|
||||
.send-icon {
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
@click="sendReply(item)">
|
||||
<view class="flex items-center justify-center">
|
||||
<image v-if="item.icon" class="icon" :src="item.icon" />
|
||||
<text class="font-size-14 color-2D91FF line-height-20">
|
||||
<text class="font-size-14 theme-color-500 line-height-20">
|
||||
{{ item.title }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
@@ -18,6 +18,6 @@
|
||||
}
|
||||
|
||||
.tag-text {
|
||||
color: #2d91ff; /* 蓝色文字,可根据设计调整 */
|
||||
color: $theme-color-500;
|
||||
font-size: $uni-font-size-base;
|
||||
}
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
}
|
||||
|
||||
.right {
|
||||
background-color: #2d91ff;
|
||||
background-color: $theme-color-500;
|
||||
border-radius: 5px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
@@ -17,9 +17,9 @@
|
||||
<view class="login-agreement flex flex-items-center">
|
||||
<CheckBox v-model="isAgree">
|
||||
<text class="font-size-12 color-525866">我已阅读并同意</text>
|
||||
<text class="font-size-12 color-2D91FF ml-4 mr-4" @click.stop="handleAgreeClick('service')">《服务协议》</text>
|
||||
<text class="font-size-12 theme-color-500 ml-4 mr-4" @click.stop="handleAgreeClick('service')">《服务协议》</text>
|
||||
<text class="font-size-12 color-525866">和</text>
|
||||
<text class="font-size-12 color-2D91FF ml-4 mr-4" @click.stop="handleAgreeClick('privacy')">《隐私协议》</text>
|
||||
<text class="font-size-12 theme-color-500 ml-4 mr-4" @click.stop="handleAgreeClick('privacy')">《隐私协议》</text>
|
||||
<text class="font-size-12 color-525866">,\n</text>
|
||||
<text class="font-size-12 color-525866 ml-30">授权与账号关联操作</text>
|
||||
</CheckBox>
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
width: 304px;
|
||||
|
||||
.login-btn {
|
||||
background: #2d91ff;
|
||||
background: $theme-color-500;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@@ -23,31 +23,29 @@
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.bg-EEF8FF {
|
||||
background-color: #eef8ff;
|
||||
}
|
||||
|
||||
.bg-FF3D60 {
|
||||
background-color: #ff3d60;
|
||||
}
|
||||
|
||||
.bg-2D91FF {
|
||||
background-color: #2d91ff;
|
||||
.bg-theme-color-500 {
|
||||
background-color: $theme-color-500;
|
||||
}
|
||||
|
||||
.bg-theme-color-50 {
|
||||
background-color: $theme-color-50;
|
||||
}
|
||||
|
||||
.bg-liner {
|
||||
background: linear-gradient(205deg, #8ae3fc 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%, #eef8ff 50%), #eef8ff;
|
||||
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, #2d91ff 0%, #4de4ff 100%);
|
||||
background: linear-gradient(90deg, $theme-color-500 0%, #4de4ff 100%);
|
||||
}
|
||||
|
||||
.bg-transparent {
|
||||
|
||||
@@ -40,8 +40,8 @@
|
||||
color: #ff3d60;
|
||||
}
|
||||
|
||||
.color-2D91FF {
|
||||
color: #2d91ff;
|
||||
.theme-color-500 {
|
||||
color: $theme-color-500;
|
||||
}
|
||||
|
||||
.color-43669A {
|
||||
|
||||
19
src/uni.scss
19
src/uni.scss
@@ -12,6 +12,25 @@
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
|
||||
/* 主题颜色(由 switch-client 命令自动更新) */
|
||||
$theme-color-800: #0B7034;
|
||||
$theme-color-700: #0B5C2D;
|
||||
$theme-color-500: #0CCD58;
|
||||
$theme-color-100: #E8FFF1;
|
||||
$theme-color-50: #F0F8F3;
|
||||
|
||||
// text 颜色
|
||||
$text-color-900: #181B25;
|
||||
$text-color-800: #222530;
|
||||
$text-color-700: #2B303B;
|
||||
$text-color-600: #525866;
|
||||
$text-color-500: #717784;
|
||||
$text-color-400: #99A0AE;
|
||||
$text-color-300: #CACFD8;
|
||||
$text-color-200: #E5E8EE;
|
||||
$text-color-100: #F2F5F8;
|
||||
$text-color-50: #F9FAFB;
|
||||
|
||||
/* 颜色变量 */
|
||||
|
||||
/* 行为相关颜色 */
|
||||
|
||||
@@ -1,13 +1,7 @@
|
||||
<template>
|
||||
<view class="zero-markdown-view">
|
||||
<mp-html
|
||||
:key="mpkey"
|
||||
:selectable="selectable"
|
||||
:scroll-table="scrollTable"
|
||||
:tag-style="tagStyle"
|
||||
:markdown="true"
|
||||
:content="contentAi"
|
||||
>
|
||||
<mp-html :key="mpkey" :selectable="selectable" :scroll-table="scrollTable" :tag-style="tagStyle" :markdown="true"
|
||||
:content="contentAi">
|
||||
</mp-html>
|
||||
</view>
|
||||
</template>
|
||||
@@ -35,7 +29,7 @@ export default {
|
||||
},
|
||||
themeColor: {
|
||||
type: String,
|
||||
default: "#2D91FF",
|
||||
default: "#181B25",
|
||||
},
|
||||
codeBgColor: {
|
||||
type: String,
|
||||
@@ -47,11 +41,11 @@ export default {
|
||||
},
|
||||
fontColor: {
|
||||
type: String,
|
||||
default: "#171717",
|
||||
default: "#181B25",
|
||||
},
|
||||
fontSubColor: {
|
||||
type: String,
|
||||
default: "#4D4D4D",
|
||||
default: "#717784",
|
||||
},
|
||||
aiMode: {
|
||||
type: Boolean,
|
||||
|
||||
Reference in New Issue
Block a user