wangxiaowei/chazhi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化添加组件及页面

Browse Source
This commit is contained in:
wangxiaowei
2025-09-01 17:28:32 +08:00
parent 6ac45bef6b
commit d05eeebdb1
18 changed files with 695 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/components/PriceFormat.vue
View File

@ -7,72 +7,77 @@
</template>
<script lang="ts" setup name="PriceFormat">
import { ref, onMounted, watch } from 'vue'
/**
* PriceFormat 金额格式化
* @description 列表或者详情页价格格式化展示
*/
const props = defineProps({
price: {
type: [String, Number],
default: '0.00'
},
firstSize: {
type: [String, Number],
default: 36
},
secondSize: {
type: [String, Number],
default: 24
},
subscriptSize: {
type: [String, Number],
default: 24
},
color: {
type: String,
default: '#E54444'
},
weight: {
type: String,
default: 'bold'
},
lineThrough: {
type: Boolean,
default: false
},
showSubscript: {
type: Boolean,
default: true
}
})
import { ref, onMounted, watch } from 'vue'
const priceSlice = ref<{ first: string | number; second?: string | number }>({ first: 0 })
const props = defineProps({
price: {
type: [String, Number],
default: '0.00'
},
firstSize: {
type: [String, Number],
default: 36
},
secondSize: {
type: [String, Number],
default: 24
},
subscriptSize: {
type: [String, Number],
default: 24
},
color: {
type: String,
default: '#E54444'
},
weight: {
type: String,
default: 'bold'
},
lineThrough: {
type: Boolean,
default: false
},
showSubscript: {
type: Boolean,
default: true
}
})
onMounted(() => {
priceFormat.format()
})
const priceSlice = ref<{ first: string | number; second?: string | number }>({ first: 0 })
const priceFormat = {
format: () => {
let price = props.price
let formattedPrice: { first: string | number; second?: string | number } = { first: 0 }
if(price !== null && price !== '' && price !== undefined) {
price = parseFloat(price);
// 保留两位小数
const priceStr = price.toFixed(2);
const priceArr = priceStr.split('.');
formattedPrice.first = priceArr[0];
formattedPrice.second = priceArr[1];
priceSlice.value = formattedPrice
}else {
priceSlice.value = {
first: 0
onMounted(() => {
priceFormat.format()
})
const priceFormat = {
format: () => {
let price = props.price
let formattedPrice: { first: string | number; second?: string | number } = { first: 0 }
if(price !== null && price !== '' && price !== undefined) {
price = parseFloat(price);
// 保留两位小数
const priceStr = price.toFixed(2);
const priceArr = priceStr.split('.');
formattedPrice.first = priceArr[0];
formattedPrice.second = priceArr[1];
priceSlice.value = formattedPrice
}else {
priceSlice.value = {
first: 0
}
}
}
}
}
watch(() => props.price, () => {
priceFormat.format()
})
watch(() => props.price, () => {
priceFormat.format()
})
</script>
<script lang="ts">

5
src/components/RechargeBtn.vue
View File

@ -6,6 +6,11 @@
</template>
<script lang="ts" setup name="RechargeBtn">
/**
* RechargeBtn 充值按钮
* @description 用于展示对应页面按钮
*/
defineProps({
name: {
type: String,

5
src/components/coupon/GroupCoupon.vue
View File

@ -21,6 +21,11 @@
</template>
<script lang="ts" setup name="GroupCoupon">
/**
* GroupCoupon 团购券组件
* @description 展示团购券信息
*/
const OSS = inject('OSS')
defineProps<{
coupon: {

57
src/components/coupon/coupon.vue
View File

@ -22,6 +22,11 @@
</template>
<script lang="ts" setup name="Coupon">
/**
* Coupon 优惠券组件
* @description 展示优惠券信息
*/
defineProps<{
coupon: {
id: number
@ -40,33 +45,33 @@ export default {}
</script>
<style lang="scss" scoped>
.coupon {
position: relative;
border-radius: 8px;
margin-right: 22rpx;
height: 100px;
}
.coupon {
position: relative;
border-radius: 8px;
margin-right: 22rpx;
height: 100px;
}
.coupon::before,
.coupon::after {
content: "";
position: absolute;
top: 50%;
width: 32rpx;
/* 控制凹口大小 */
height: 32rpx;
background: #F6F7F9;
/* 与页面背景色一致 */
border-radius: 50%;
transform: translateY(-50%);
z-index: 2;
}
.coupon::before,
.coupon::after {
content: "";
position: absolute;
top: 50%;
width: 32rpx;
/* 控制凹口大小 */
height: 32rpx;
background: #F6F7F9;
/* 与页面背景色一致 */
border-radius: 50%;
transform: translateY(-50%);
z-index: 2;
}
.coupon::before {
left: -16rpx;
}
.coupon::before {
left: -16rpx;
}
.coupon::after {
right: -16rpx;
}
.coupon::after {
right: -16rpx;
}
</style>

7
src/components/navbar.vue
View File

@ -22,6 +22,11 @@
</template>
<script lang="ts" setup name="Navbar">
/**
* Navbar 导航栏
* @description 对wd-navbar进行二次封装，满足不同页面的需求
*/
import { ref, inject } from 'vue'
import { getNavBarHeight } from '@/utils/index'
@ -60,7 +65,7 @@
// z-index 层级
zIndex: {
type: Number,
default: 1
default: 10
}
})

7
src/components/notice/Bill.vue
View File

@ -30,7 +30,12 @@
</template>
<script lang="ts" setup name="PayNotice">
<script lang="ts" setup name="BillNotice">
/**
* BillNotice 账单提示组件
* @description 展示充值、退款、返现等账单信息
*/
const OSS = inject('OSS')
const props = defineProps({

5
src/components/notice/Pay.vue
View File

@ -15,6 +15,11 @@
<script lang="ts" setup name="PayNotice">
/**
* PayNotice 支付提示组件
* @description 提示支付成功
*/
const OSS = inject('OSS')
const props = defineProps({

5
src/components/notice/Reserve.vue
View File

@ -15,6 +15,11 @@
<script lang="ts" setup name="ReserveNotice">
/**
* ReserveNotice 预约提示组件
* @description 提示预约信息
*/
const OSS = inject('OSS')
const props = defineProps({

88
src/components/order/Combo.vue Normal file
View File

@ -0,0 +1,88 @@
<template>
<view>
<view class="bg-white rounded-16rpx p-30rpx" v-if="orderType === OrderStatus.ToUse">
<view class="">
<view class="flex items-center" @click="combo.handleToStore">
<view class="w-190rpx h-190rpx mr-30rpx">
<wd-img width="100%" height="100%" :src="`${OSS}images/home/home_image5.png`"></wd-img>
</view>
<view class="flex-1">
<view class="flex justify-between items-center" @click="combo.handleToStore">
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-400rpx line-1">团购套餐的可以点击跳转 </view>
<wd-icon name="chevron-right" size="32rpx" v-if="type === 'GroupBuying'"></wd-icon>
<view class="text-26rpx leading-36rpx text-[#909399]" v-if="type === 'DouYin'">￥324</view>
</view>
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
<view class="">3小时</view>
<view v-if="type === 'GroupBuying'">x1</view>
</view>
<view class="text-[#606266] text-right mt-26rpx" v-if="type === 'GroupBuying'">
<text class="text-24rpx leading-34rpx mr-12rpx">实付</text>
<text class="tetx-32rpx leading-36rpx">￥29.32</text>
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
</view>
<view class="font-400 text-26rpx text-[#606266] leading-40rpx mt-40rpx" v-if="type === 'DouYin'">
适用包间：青茶、红茶、绿茶
</view>
</view>
</view>
<view class="mt-30rpx font-500 leading-48rpx" v-if="type === 'GroupBuying'">
<view class="text-26rpx text-[#606266]">有效期：2025.04.04-2025.12.31</view>
<view class="text-28rpx text-[#303133] mt-18rpx">
<text class="mr-20rpx">券码 1052 4258 5654 125</text>
<text class="text-[#4C9F44]">复制</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup name="Combo">
import { OrderStatus, OrderStatusText } from '@/utils/order'
/**
* Combo 套餐组件
* @description 订单详情页下的套餐卡片详情
*/
const OSS = inject('OSS')
defineProps({
/**
* 订单类型：团购、抖音等
*/
type: {
type: String,
default: ''
},
/**
* 订单类型：待使用、退款等
*/
orderType: {
type: String,
default: ''
}
})
const combo = {
// 跳转到对饮茶室的详情页
handleToStore: () => {
uni.navigateTo({
url: '/pages/store/store-detail/store-detail'
})
},
// 跳转到团购订单详情页
handleToGroupBuyingDetail: () => {
uni.navigateTo({
url: `/bundle/group-buying/platform/order-detail?type=${OrderStatus.ToUse}`
})
}
}
</script>
<script lang="ts">
export default {}
</script>

87
src/components/order/ComboCard.vue Normal file
View File

@ -0,0 +1,87 @@
<template>
<view class="">
<!-- 团购和抖音团购 -->
<view v-if="type === 'GroupBuying'" class="bg-white rounded-10rpx p-30rpx">
<view class="flex justify-between items-center">
<view class="flex items-center">
<view class="w-40rpx h-40rpx mr-10rpx">
<wd-img width="100%" height="100%" :src="`${OSS}icon/icon_tea.png`"></wd-img>
</view>
<view class="flex items-center" @click="comboCard.handleToStore">
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-400rpx line-1">这是茶馆的名称这是茶馆的名称这是茶馆的名称</view>
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
</view>
</view>
<view class="font-400 text-28rpx leading-40rpx mt-12rpx">
<text class="text-[#4C9F44]">待使用</text>
<!-- <text class="text-[#606266]">已使用</text>
<text class="text-[#C9C9C9]">已退款</text> -->
</view>
</view>
<view class="mt-22rpx">
<view class="flex">
<view class="w-200rpx h-200rpx mr-28rpx">
<wd-img width="100%" height="100%" :src="`${OSS}images/home/home_image5.png`"></wd-img>
</view>
<view class="flex-1">
<view @click="comboCard.handleToGroupBuyingDetail">
<view class="font-500 text-30rpx text-[#303133] leading-42rpx line-1 w-400rpx">这是套餐的名字这是套餐的名字这是套餐的名字这是套餐的名字这是套餐的名字</view>
<view>
<wd-tag bg-color="#F3F3F3" color="#606266" custom-class="!px-16rpx">3小时</wd-tag>
</view>
<view class="font-400 leading-36rpx text-26rpx text-[#606266]">
<!-- TODO 除了直营店其它的都没有这个描述信息： 适用包间 青茶、红茶、绿茶 -->
<view class="mt-12rpx">适用包间 青茶、红茶、绿茶</view>
<view class="mt-10rpx">有效期至2025-03-23</view>
</view>
</view>
<!-- TODO 直营店有申请退款和立即预定按钮，加盟店只有申请退款按钮，抖音只有立即预定按钮 -->
<view class="text-center flex items-center text-28rpx mt-28rpx" v-if="type === 'GroupBuying' ? 'justify-start' : 'justify-end'">
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx">申请退款</view>
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44]">立即预定</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup name="ComboCard">
import { OrderStatus, OrderStatusText } from '@/utils/order'
/**
* ComboCard 套餐卡片组件
* @description 展示订单列表套餐卡片信息
*/
const OSS = inject('OSS')
const props = defineProps({
type: {
type: String,
default: 'GroupBuying'
}
})
const comboCard = {
// 跳转到对饮茶室的详情页
handleToStore: () => {
uni.navigateTo({
url: '/pages/store/store-detail/store-detail'
})
},
// 跳转到团购订单详情页
handleToGroupBuyingDetail: () => {
uni.navigateTo({
url: `/bundle/group-buying/platform/order-detail?type=${props.type}&orderType=${OrderStatus.ToUse}`
})
}
}
</script>
<script lang="ts">
export default {}
</script>

5
src/components/reserve/RoomList.vue
View File

@ -66,6 +66,11 @@
</template>
<script lang="ts" setup name="RoomList">
/**
* RoomList 房间列表
* @description 茶室预定房间列表展示
*/
import PriceFormat from '@/components/PriceFormat.vue'
const OSS = inject('OSS')