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-18 17:30:41 +08:00
parent e9f804b373
commit 864c40aa3a
26 changed files with 1357 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/bundle/wallet/bill.vue Normal file
View File

@ -0,0 +1,75 @@
<route lang="jsonc" type="page">{
// "needLogin": true,
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}</route>
<template>
<view class="pb-30rpx">
<view class="order-list">
<navbar title="账单详情" custom-class='!bg-[#F6F7F8]'></navbar>
</view>
<!-- 订单详情 -->
<view class="mt-28rpx mx-32rpx bg-white rounded-16rpx py-30rpx">
<view class="flex items-center">
<view class="w-8rpx h-32rpx bg-[#4C9F44] mr-22rpx"></view>
<view class="font-bold text-28rpx leading-40rpx text-[#303133]">订单号：1744601722882174</view>
</view>
<view class="mt-16rpx mb-20rpx border-b-2rpx border-b-solid border-[#E5E5E5] mx-18rpx"></view>
<view class="text-28rpx leading-40rpx text-[#606266] mx-28rpx">
<view class="flex justify-between items-center mb-16rpx">
<view>消费类型</view>
<view>茶艺师预定</view>
</view>
<view class="flex justify-between items-center mb-16rpx">
<view>交易方式</view>
<view>微信支付</view>
</view>
<view class="flex justify-between items-center mb-16rpx">
<view>消费金额</view>
<view>￥158</view>
</view>
</view>
<view class="mt-26rpx mb-20rpx border-b-2rpx border-b-dashed border-[#E5E5E5] mx-18rpx"></view>
<view class="text-28rpx leading-40rpx text-[#606266] mx-28rpx">
<view class="flex justify-between items-center mb-16rpx">
<view>茶艺师</view>
<view>茶艺师的昵称</view>
</view>
<!-- 如果是茶室预定类型则显示消费门店 -->
<view class="flex justify-between items-center mb-16rpx">
<view>消费门店</view>
<view>茶艺师的昵称</view>
</view>
<view class="flex justify-between items-center mb-16rpx">
<view>下单时间</view>
<view>2025-04-25 04:43</view>
</view>
<view class="flex justify-between items-center mb-16rpx">
<view>支付时间</view>
<view>2025-04-25 04:43</view>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
const OSS = inject('OSS')
</script>
<style lang="scss">
page {
background-color: $cz-page-background;
}
</style>

156
src/bundle/wallet/recharge.vue Normal file
View File

@ -0,0 +1,156 @@
<route lang="jsonc" type="page">
{
// "needLogin": true,
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}
</route>
<template>
<view class="bg">
<view>
<navbar title="充值" custom-class='!bg-[#F6F7F8]'></navbar>
</view>
<view class="mt-24rpx mx-30rpx">
<view class="ml-70rpx flex items-center">
<view class="mr-72rpx font-400 text-30rpx leading-42rpx text-[#303133]">
转入方式
</view>
<view class="flex items-center">
<view class="flex items-center mr-20rpx">
<wd-img width="50rpx" height="50rpx" :src="`${OSS}icon/icon_weichat.png`"></wd-img>
</view>
<view class="font-bold text-32rpx leading-44rpx text-[#303133]">微信</view>
</view>
</view>
<view class="bg-white rounded-16rpx px-38rpx py-28rpx mt-28rpx">
<view class="font-400 text-28rpx leading-40rpx text-[#303133]">
转入方式
</view>
<view class="flex items-center">
<view class="font-400 text-36rpx leading-50rpx text-[#303133] mr-20rpx mt-40rpx">￥</view>
<view class="mt-44rpx">
<wd-input type="text" v-model="person" placeholder="请输入金额" no-border custom-input-class="!h-80rpx !text-48rpx !leading-66rpx" >
</wd-input>
</view>
</view>
</view>
<!-- 推广方式 -->
<view class="mt-60rpx">
<view class="mx-30rpx text-32rpx leading-44rpx text-[#303133]">
<text class="mr-12rpx">推广方式</text>
<text class="text-26rpx leading-36rpx text-[#909399]">(选填)</text>
</view>
<view class="bg-white rounded-16rpx py-26rpx mt-28rpx pay-tabs">
<wd-tabs v-model="tab" swipeable slidable="always">
<wd-tab title="门店">
<view>
<wd-gap height="2rpx" bg-color="#F6F7F9"></wd-gap>
</view>
<view class="mx-30rpx mt-34rpx flex items-center">
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-28rpx">门店推广</view>
<view class="bg-[#F8F9FA] px-28rpx p-20rpx text-30rpx text-[#C9C9C9] h-80rpx rounded-8rpx flex items-center flex-1" @click="showStorePopup = true">
<text class="mr-14rpx">请选择门店</text>
<wd-icon name="arrow-down" size="22rpx"></wd-icon>
</view>
</view>
</wd-tab>
<wd-tab title="茶艺师">
<view>
<wd-gap height="2rpx" bg-color="#F6F7F9"></wd-gap>
</view>
<view class="mx-30rpx mt-34rpx flex items-center">
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-28rpx">茶艺师推广</view>
<view class="flex items-center flex-1">
<wd-input type="text" v-model="person" no-border custom-class="!bg-[#F6F7F8] !rounded-8rpx w-full" custom-input-class="!px-32rpx !h-80rpx">
</wd-input>
</view>
</view>
</wd-tab>
</wd-tabs>
</view>
</view>
<view class="fixed left-0 right-0 bottom-92rpx z-2 bg-[#4C9F44] text-[#fff] flex justify-center items-center h-90rpx rounded-8rpx mx-60rpx" @click="buy.handleConfirmRecharge">
确定转入
</view>
</view>
<!-- 推广方式 -->
<wd-popup v-model="showStorePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
<view class="relative">
<view class="absolute top-18rpx right-30rpx" @click="showStorePopup = false">
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
</view>
<view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">推广方式 </view>
<scroll-view scroll-y class="h-500rpx pb-20rpx">
<view class="mx-56rpx" v-for="(item, index) in 5" :key="index">
<view class="flex items-center justify-between mb-66rpx" @click="buy.handleChooseStore(item)">
<view class="mr-32rpx">
<wd-img width="80rpx" height='80rpx' :src="`${OSS}icon/icon_location3.png`"></wd-img>
</view>
<view class="flex-1">
<view>这是茶馆名字</view>
<view class="text-28rpx leading-40rpx text-[#909399] flex items-center mt-10rpx">
<view>距您5.3km</view>
<view>
<wd-divider vertical />
</view>
<view class="w-350rpx line-1">北京市海淀区宏福苑西区20号楼2单元30</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</wd-popup>
</view>
</template>
<script lang="ts" setup>
const OSS = inject('OSS')
// 推广方式
const tab = ref<number>(0)
const person = ref<string>('') // 个人推广码
const showStorePopup = ref<boolean>(false) // 显示门店列表弹窗
onLoad(() => {
})
const buy = {
// 选择门店
handleChooseStore: (item: any) => {
},
// 确定转入
handleConfirmRecharge: () => {
uni.navigateTo({
url: '/pages/notice/pay?type=vip'
})
}
}
</script>
<style lang="scss" scoped>
page {
background: $cz-page-background;
}
.pay-tabs {
:deep() {
.wd-tabs__line {
background-color: #4C9F44;
}
}
}
</style>

199
src/bundle/wallet/wallet.vue Normal file
View File

@ -0,0 +1,199 @@
<route lang="jsonc" type="page">{
// "needLogin": true,
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}</route>
<template>
<view class="pb-30rpx">
<view class="order-list">
<navbar layoutLeft custom-class='!bg-[#F6F7F8]'>
<template #left>
<view class="ml-24rpx flex items-center">
<view class="text-36rpx leading-50rpx text-[#303133] mr-24rpx">我的钱包</view>
<view class="text-24rpx leading-34rpx text-[#606266]">简单·便捷·安全</view>
</view>
</template>
</navbar>
</view>
<!-- 背景图 -->
<view class="mt-20rpx mx-30rpx">
<view class="wallet-bg">
<view class="flex items-center ml-72rpx pt-10rpx">
<view class="mr-30rpx">平台余额</view>
<view class="flex items-center">
<view class="flex items-center mr-12rpx">
<wd-img width="32rpx" height="32rpx" :src="`${OSS}icon/icon_safe.png`"></wd-img>
</view>
<view class="font-400 text-24rpx leading-20rpx text-[#B6843C]">保障中</view>
</view>
</view>
<view class="mt-70rpx ml-68rpx mr-60rpx">
<view class="font-400 text-28rpx leading-40rpx text-[#303133]">余额</view>
<view class="flex justify-between items-center mt-24rpx">
<view>
<price-format color="#000" :first-size="48" :second-size="48" :subscript-size="28" :price="23.02"></price-format>
</view>
<view class="w-200rpx h-80rpx bg-[#4C9F44] rounded-8rpx font-bold text-28rpx leading-80rpx text-center text-[#fff]" @click="wallet.handleToRecharge">
充值
</view>
</view>
</view>
</view>
</view>
<!-- 流水明细 -->
<view class="bg-white rounded-16rpx px-30rpx py-40rpx mt-20rpx mx-30rpx">
<view class="flex justify-between items-center">
<view class="text-32rpx leading-44rpx text-[#303133] mb-20rpx">流水明细</view>
<view class="border-2rpx border-solid border-[#E5E5E5] w-196rpx h-56rpx flex justify-center items-center rounded-8rpx">
<view class="text-24rpx leading-34rpx text-[#606266] wall-date">
<!-- 2019年5月 -->
<wd-datetime-picker v-model="value" :maxDate="Date.now()" type="year-month" @confirm="wallet.handleConfirmDate"></wd-datetime-picker>
</view>
<view>
<wd-icon name="fill-arrow-down" size="32rpx" color="#BFC2CC"></wd-icon>
</view>
</view>
</view>
<view>
<!-- 最后一个元素不显示border -->
<mescroll-body @init="mescrollInit" @down="downCallback" @up="wallet.upCallback" :up="upOption">
<view class="h-144rpx leading-144rpx mt-18rpx border-b border-b-solid border-b-[#E5E5E5] flex flex-col justify-center" @click="wallet.handleToBillDetail(item)" v-for="(item, index) in 5" :key="index">
<view class="text-28rpx leading-40rpx text-[#303133] flex justify-between items-center">
<view>茶艺师预定</view>
<view>-402.33</view>
</view>
<view class="text-24rpx leading-34rpx text-[#909399] flex justify-between items-center mt-10rpx">
<view>2025-03-18 11:20</view>
<view>余额24.55</view>
</view>
</view>
</mescroll-body>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
const OSS = inject('OSS')
/* mescroll */
const upOption = reactive({
empty: {
icon : OSS + 'icon/icon_reserver_empty.png',
}
})
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
// 日期过滤
const value = ref<number>(Date.now())
const wallet = {
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
upCallback: (mescroll) => {
// 需要留一下数据为空的时候显示的空数据图标内容
// list({
// page: mescroll.num,
// size: mescroll.size
// }).then((res: { list: Array<any>, totalPages: Number }) => {
// const curPageData = res.list || [] // 当前页数据
// if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
// goods.value = goods.value.concat(curPageData); //追加新数据
// console.log("🚀 ~ goods:", goods)
// mescroll.endByPage(curPageData.length, res.totalPages); //必传参数(当前页的数据个数, 总页数)
// }).catch(() => {
// mescroll.endErr(); // 请求失败, 结束加载
// })
// apiGoods(mescroll.num, mescroll.size).then(res=>{
// const curPageData = res.list || [] // 当前页数据
// if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
// goods.value = goods.value.concat(curPageData); //追加新数据
// //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
// //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
// //方法一(推荐): 后台接口有返回列表的总页数 totalPage
// //mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
// //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
// //mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
// //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
// //mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
// //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
// mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
// }).catch(()=>{
mescroll.endErr(); // 请求失败, 结束加载
// })
},
// 确认日期-
handleConfirmDate: (date: {value: number}) => {
const d = new Date(date.value)
console.log("🚀 ~ d:", d)
const year = d.getFullYear()
const month = d.getMonth() + 1
console.log(`${year}年${month}月`);
},
// 去充值
handleToRecharge: () => {
uni.navigateTo({
url: '/bundle/wallet/recharge'
})
},
// 跳转对应账单详情
handleToBillDetail: (id: number) => {
uni.navigateTo({
url: `/bundle/wallet/bill?id=${id}`
})
}
}
</script>
<style lang="scss">
page {
background-color: $cz-page-background;
}
.wallet-bg {
width: 690rpx;
height: 316rpx;
background-image: url(#{$OSS}images/wallet/wallet_image1.png);
background-size: 100% 100%;
}
.wall-date {
:deep() {
.wd-cell {
padding-left: 0 !important;
background-color: transparent !important;
}
.wd-cell__wrapper {
padding: 0 !important
}
.wd-datetime-picker__arrow {
display: none !important;
}
}
}
</style>