sai/QCN_rider
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Ls
2026-02-12 12:19:20 +08:00
commit 219fd9be5c
529 changed files with 169918 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
.svn/pristine/31/316095a24dad3494ea7dda51fa45861ce620fbfe.svn-base Normal file
View File

@@ -0,0 +1,103 @@
## Calendar 日历
> **组件名：uni-calendar**
> 代码块： `uCalendar`
日历组件
> **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - 本组件农历转换使用的js是 [@1900-2100区间内的公历、农历互转](https://github.com/jjonline/calendar.js)
> - 仅支持自定义组件模式
> - `date`属性传入的应该是一个 String ，如： 2019-06-27 ，而不是 new Date()
> - 通过 `insert` 属性来确定当前的事件是 @change 还是 @confirm 。理应合并为一个事件，但是为了区分模式，现使用两个事件，这里需要注意
> - 弹窗模式下无法阻止后面的元素滚动，如有需要阻止，请在弹窗弹出后，手动设置滚动元素为不可滚动
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
在 ``template`` 中使用组件
```html
<view>
<uni-calendar
:insert="true"
:lunar="true"
:start-date="'2019-3-2'"
:end-date="'2019-5-20'"
@change="change"
/>
</view>
```
### 通过方法打开日历
需要设置 `insert` 为 `false`
```html
<view>
<uni-calendar
ref="calendar"
:insert="false"
@confirm="confirm"
/>
<button @click="open">打开日历</button>
</view>
```
```javascript
export default {
data() {
return {};
},
methods: {
open(){
this.$refs.calendar.open();
},
confirm(e) {
console.log(e);
}
}
};
```
## API
### Calendar Props
| 属性名 | 类型 | 默认值| 说明 |
| - | - | - | - |
| date | String |- | 自定义当前时间，默认为今天 |
| lunar | Boolean | false | 显示农历 |
| startDate | String |- | 日期选择范围-开始日期 |
| endDate | String |- | 日期选择范围-结束日期 |
| range | Boolean | false | 范围选择 |
| insert | Boolean | false | 插入模式,可选值，ture：插入模式；false：弹窗模式；默认为插入模式 |
|clearDate |Boolean |true |弹窗模式是否清空上次选择内容 |
| selected | Array |- | 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}] |
|showMonth | Boolean | true | 是否显示月份为背景 |
### Calendar Events
| 事件名 | 说明 |返回值|
| - | - | - |
| open | 弹出日历组件，`insert :false` 时生效|- |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar](https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar)

588
.svn/pristine/31/319c5340770cb6b47ec46c007fe2f801e6bea20a.svn-base Normal file
View File

@@ -0,0 +1,588 @@
<template>
<!-- 骨架屏 -->
<view v-if="loading" class="skeleton-container">
<!-- 余额区域骨架屏 -->
<view class="skeleton-balance-section">
<view class="skeleton-balance-label"></view>
<view class="skeleton-balance-amount"></view>
<view class="skeleton-balance-current"></view>
</view>
<!-- 账户选择区域骨架屏 -->
<view class="skeleton-account-section">
<view class="skeleton-section-title"></view>
<view class="skeleton-account-item">
<view class="skeleton-account-icon"></view>
<view class="skeleton-account-name"></view>
<view class="skeleton-account-radio"></view>
</view>
<view class="skeleton-account-item">
<view class="skeleton-account-icon"></view>
<view class="skeleton-account-name"></view>
<view class="skeleton-account-radio"></view>
</view>
</view>
<!-- 提示信息骨架屏 -->
<view class="skeleton-tip-section">
<view class="skeleton-tip-icon"></view>
<view class="skeleton-tip-content">
<view class="skeleton-tip-line"></view>
<view class="skeleton-tip-line-small"></view>
</view>
</view>
<!-- 确认按钮骨架屏 -->
<view class="skeleton-confirm-section">
<view class="skeleton-confirm-button"></view>
</view>
</view>
<!-- 真实内容 -->
<view v-else class="withdraw-container">
<!-- 可提现金额 -->
<view class="balance-section">
<text class="balance-label">可提现金额</text>
<text class="balance-amount">¥{{ riderAcc.account }}</text>
<text class="current-balance">当前钱包余额</text>
</view>
<!-- 提现账户选择 -->
<view class="account-section">
<text class="section-title">提现账户</text>
<view class=""
style="display: flex;align-items: center; border-bottom: 4rpx solid #e2e2e2;padding-bottom: 10px; margin-bottom: 10px;">
<up-icon name="zhifubao-circle-fill" size="30" color="#1890ff"></up-icon>
<view style="flex: 1; margin-left: 30rpx; " class="">
支付宝
</view>
<view @click="changePay(0)" class="">
<view v-if="current==0" class="radio-circle">
<view class="radio-inner"></view>
</view>
<view v-else class="radio-no-circle">
</view>
</view>
</view>
<view class="" style="display: flex;align-items: center;">
<up-icon name="weixin-circle-fill" size="30" color="#28C445"></up-icon>
<view style="flex: 1; margin-left: 30rpx; " class="">
微信
</view>
<view @click="changePay(1)" class="">
<view v-if="current==1" class="radio-circle">
<view class="radio-inner"></view>
</view>
<view v-else class="radio-no-circle">
</view>
</view>
</view>
</view>
<!-- 提现账号 -->
<view class="" v-if="current!=null" style="margin: 20rpx 30rpx; ">
<view class="" style="font-size: 34rpx; font-weight: 600; ">
账号信息
</view>
<up-form labelPosition="top" label-width="200" :model="account" ref="form1">
<up-form-item label="姓名" prop="userInfo.name" :borderBottom="true" ref="item1">
<up-input v-model="account.name" @change="changePrice" placeholder="请输入姓名" border="none"></up-input>
</up-form-item>
<up-form-item :label="current==0? '支付宝账号':'微信账号'" prop="userInfo.name" :borderBottom="true" ref="item1">
<up-input v-model="account.id" :placeholder="current==0? '请输入支付宝账号':'请输入微信账号'"
border="none"></up-input>
</up-form-item>
<up-form-item label="提现金额" prop="userInfo.name" :borderBottom="true" ref="item1">
<up-input v-model="account.price" type="digit" placeholder="请输入提现金额" border="none"></up-input>
</up-form-item>
</up-form>
</view>
<!-- 提示信息 -->
<view class="tip-section">
<up-icon name="clock" size="18" color="#1890ff"></up-icon>
<view class="" style="margin-left: 10rpx;">
<view class="tip-text">预计 T+1 工作日到账</view>
<view class="tip-text" style="color: #666666; font-size: 24rpx; margin-top: 10rpx; ">无手续费</view>
</view>
</view>
<!-- 确认按钮 -->
<view class="confirm-section">
<button class="confirm-button" @click="confirmWithdraw">确认提现</button>
</view>
</view>
</template>
<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { Service } from '@/Service/Service';
import { CNRiderOrderService } from '@/Service/CN/CNRiderOrderService'
import { CNRiderDataService } from '@/Service/CN/CNRiderDataService'
let current = ref(null)
let loading = ref(true)
let account = ref({
id: '',
price: "",
name: ''
})
let riderAcc = ref<any>({})
onLoad(() => {
getData()
})
const getData = () => {
CNRiderDataService.GetRiderAccInfo().then(res => {
loading.value = false
if (res.data) {
riderAcc.value = res.data.riderAcc
}
})
}
const changePay = (item : any) => {
current.value = item
}
const changePrice = (e : string) => {
console.log(e);
}
// 确认提现
const confirmWithdraw = () => {
if (!account.value.name) {
Service.Msg('请输入姓名!')
return
}
if (!account.value.price) {
Service.Msg('请输入提现金额!')
return
}
if (!account.value.id) {
Service.Msg('请输入账户号!')
return
}
uni.showModal({
title: '提示',
content: '请仔细确认身份信息?',
success: function (res) {
if (res.confirm) {
CNRiderOrderService.AddRiderWith(Number(account.value.price), current.value == 0 ? '支付宝' : '微信', account.value.name, account.value.id).then(res => {
if (res.code == 0) {
Service.Msg('提现成功')
setTimeout(() => {
Service.GoPage('/pages/my/withDrowList')
}, 1000)
} else {
Service.Msg(res.msg)
}
})
} else {
// 用户点击取消后的操作
}
}
});
};
</script>
<style scoped>
.withdraw-container {
min-height: 100vh;
background-color: #fff;
padding-bottom: 40rpx;
}
/* 选择 */
.radio-circle {
width: 36rpx;
height: 36rpx;
border: 2rpx solid var(--nav-mian);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
}
.radio-inner {
width: 20rpx;
height: 20rpx;
background-color: var(--nav-mian);
border-radius: 50%;
}
.radio-no-circle {
width: 36rpx;
height: 36rpx;
border: 2rpx solid #dadada;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
}
/* 顶部导航栏 */
.nav-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx 20rpx;
background-color: #fff;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.nav-title {
font-size: 36rpx;
font-weight: 600;
color: #000;
}
.back-icon {
width: 40rpx;
height: 40rpx;
}
.help-icon {
width: 40rpx;
height: 40rpx;
}
/* 余额显示区域 */
.balance-section {
background-color: #fff;
padding: 40rpx 30rpx;
}
.balance-label {
font-size: 32rpx;
color: #333;
display: block;
margin-bottom: 10rpx;
}
.balance-amount {
font-size: 60rpx;
font-weight: bold;
color: #ff4757;
display: block;
margin-bottom: 10rpx;
}
.current-balance {
font-size: 28rpx;
color: #999;
}
/* 账户选择区域 */
.account-section {
background-color: #fff;
padding: 30rpx;
margin-bottom: 20rpx;
}
.section-title {
font-size: 32rpx;
font-weight: 600;
color: #333;
display: block;
margin-bottom: 20rpx;
}
.account-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 25rpx 0;
border-bottom: 1rpx solid #f0f0f0;
}
.account-item:last-child {
border-bottom: none;
}
.account-info {
display: flex;
align-items: center;
}
.account-icon {
width: 60rpx;
height: 60rpx;
border-radius: 12rpx;
background-color: #1677ff;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
border: 2rpx solid #000;
}
.account-icon.wechat {
background-color: #07c160;
}
.icon-text {
color: #fff;
font-size: 32rpx;
font-weight: bold;
}
.account-name {
font-size: 32rpx;
color: #333;
}
/* 提示信息区域 */
.tip-section {
display: flex;
align-items: flex-start;
background-color: #e6f7ff;
padding: 20rpx 30rpx;
margin: 0 30rpx 20rpx;
border-radius: 10rpx;
}
.tip-text {
font-size: 28rpx;
margin-left: 10rpx;
}
/* 确认按钮区域 */
.confirm-section {
background-color: #fff;
position: fixed;
width: 100vw;
left: 0;
bottom: 0;
padding: 30rpx;
}
.confirm-button {
width: 100%;
height: 90rpx;
background-color: #1677ff;
color: #fff;
font-size: 36rpx;
font-weight: 600;
border-radius: 45rpx;
display: flex;
align-items: center;
justify-content: center;
border: none;
}
.confirm-button:active {
background-color: #0958d9;
}
/* 骨架屏样式 */
.skeleton-container {
min-height: 100vh;
background-color: #fff;
padding-bottom: 40rpx;
}
/* 骨架屏动画 */
@keyframes shimmer {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}
/* 骨架屏通用样式 */
.skeleton-balance-section,
.skeleton-account-section,
.skeleton-tip-section {
padding: 40rpx 30rpx;
margin-bottom: 20rpx;
}
/* 余额区域骨架屏 */
.skeleton-balance-section {
background-color: #fff;
}
.skeleton-balance-label {
width: 30%;
height: 32rpx;
background-color: #e6e6e6;
margin-bottom: 20rpx;
border-radius: 4rpx;
animation: shimmer 1.5s infinite;
background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 1000px 100%;
}
.skeleton-balance-amount {
width: 40%;
height: 60rpx;
background-color: #e6e6e6;
margin-bottom: 20rpx;
border-radius: 4rpx;
animation: shimmer 1.5s infinite;
background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 1000px 100%;
}
.skeleton-balance-current {
width: 25%;
height: 28rpx;
background-color: #e6e6e6;
border-radius: 4rpx;
animation: shimmer 1.5s infinite;
background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 1000px 100%;
}
/* 账户选择区域骨架屏 */
.skeleton-account-section {
background-color: #fff;
}
.skeleton-section-title {
width: 25%;
height: 32rpx;
background-color: #e6e6e6;
margin-bottom: 30rpx;
border-radius: 4rpx;
animation: shimmer 1.5s infinite;
background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 1000px 100%;
}
.skeleton-account-item {
display: flex;
align-items: center;
margin-bottom: 30rpx;
padding-bottom: 30rpx;
border-bottom: 4rpx solid #e2e2e2;
}
.skeleton-account-item:last-child {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
.skeleton-account-icon {
width: 60rpx;
height: 60rpx;
background-color: #e6e6e6;
border-radius: 12rpx;
margin-right: 20rpx;
animation: shimmer 1.5s infinite;
background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 1000px 100%;
}
.skeleton-account-name {
flex: 1;
height: 32rpx;
background-color: #e6e6e6;
border-radius: 4rpx;
margin-right: 20rpx;
animation: shimmer 1.5s infinite;
background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 1000px 100%;
}
.skeleton-account-radio {
width: 36rpx;
height: 36rpx;
background-color: #e6e6e6;
border-radius: 50%;
animation: shimmer 1.5s infinite;
background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 1000px 100%;
}
/* 提示信息骨架屏 */
.skeleton-tip-section {
display: flex;
align-items: flex-start;
background-color: #e6f7ff;
padding: 20rpx 30rpx;
margin: 0 30rpx 20rpx;
border-radius: 10rpx;
}
.skeleton-tip-icon {
width: 40rpx;
height: 40rpx;
background-color: #e6e6e6;
border-radius: 50%;
margin-right: 15rpx;
animation: shimmer 1.5s infinite;
background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 1000px 100%;
}
.skeleton-tip-content {
flex: 1;
}
.skeleton-tip-line {
width: 70%;
height: 28rpx;
background-color: #e6e6e6;
margin-bottom: 15rpx;
border-radius: 4rpx;
animation: shimmer 1.5s infinite;
background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 1000px 100%;
}
.skeleton-tip-line-small {
width: 50%;
height: 24rpx;
background-color: #e6e6e6;
border-radius: 4rpx;
animation: shimmer 1.5s infinite;
background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 1000px 100%;
}
/* 确认按钮骨架屏 */
.skeleton-confirm-section {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #fff;
padding: 30rpx;
}
.skeleton-confirm-button {
width: 100%;
height: 90rpx;
background-color: #e6e6e6;
border-radius: 45rpx;
animation: shimmer 1.5s infinite;
background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 1000px 100%;
}
</style>