完成发现,个人中心
This commit is contained in:
4
.env
4
.env
@@ -1,5 +1,5 @@
|
||||
# API
|
||||
VITE_SYSTEM_URL = "http://u5ac97b6.natappfree.cc"
|
||||
VITE_SYSTEM_URL = "http://u85e65a4.natappfree.cc"
|
||||
|
||||
#文档地址
|
||||
VITE_DOC_URL = "http://ub5336dd.natappfree.cc"
|
||||
VITE_DOC_URL = "http://k5cb6eb9.natappfree.cc"
|
||||
@@ -141,11 +141,16 @@ export const getUserIdCard = () => {
|
||||
})
|
||||
}
|
||||
|
||||
/** 添加身份证 */
|
||||
export const addUserIdCard = data => {
|
||||
/**
|
||||
* 添加/修改身份证
|
||||
* @param {*} data
|
||||
* @param {*} method post 添加 put 修改
|
||||
* @returns
|
||||
*/
|
||||
export const addUserIdCard = (data, method = 'post') => {
|
||||
return http({
|
||||
url: '/api/service/userVerification',
|
||||
method: 'post',
|
||||
method,
|
||||
data
|
||||
})
|
||||
}
|
||||
@@ -174,3 +179,21 @@ export const addUserWithdraw = data => {
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/** 获取提现列表 */
|
||||
export const getUserWithdrawList = data => {
|
||||
return http({
|
||||
url: '/api/service/SerAppUserWithdrawal/list',
|
||||
method: 'get',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/** 交易记录列表 */
|
||||
export const getUserTradeRecordList = data => {
|
||||
return http({
|
||||
url: '/api/system/logPoints/list',
|
||||
method: 'get',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
@@ -17,6 +17,6 @@
|
||||
padding: 16rpx 24rpx calc(env(safe-area-inset-bottom) + 20rpx); /* 关键:适配 iPhone 等安全区域 */
|
||||
background: #fff;
|
||||
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||||
z-index: 99;
|
||||
z-index: 90;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -20,6 +20,10 @@
|
||||
limit: {
|
||||
type: String,
|
||||
default: '1'
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
@@ -92,6 +96,7 @@
|
||||
<view :class="{ 'file_card-box': isIdCard }" class="cb-file-picker">
|
||||
<uni-file-picker
|
||||
v-model="fileLists"
|
||||
:readonly="props.readonly"
|
||||
:file-mediatype="props.type"
|
||||
:image-styles="imageStyles"
|
||||
:limit="props.limit"
|
||||
|
||||
14
pages.json
14
pages.json
@@ -163,6 +163,20 @@
|
||||
"navigationBarBackgroundColor": "#ffffff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/my-index/wallet/record",
|
||||
"style": {
|
||||
"navigationBarTitleText": "积分记录",
|
||||
"navigationBarBackgroundColor": "#ffffff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/my-index/wallet/withdrawal-record",
|
||||
"style": {
|
||||
"navigationBarTitleText": "提现记录",
|
||||
"navigationBarBackgroundColor": "#ffffff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/my-index/wallet/real-id",
|
||||
"style": {
|
||||
|
||||
@@ -11,6 +11,10 @@
|
||||
const formData = reactive({
|
||||
type: '1'
|
||||
})
|
||||
|
||||
const onTop = id => {
|
||||
formData.type = id
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -83,6 +87,7 @@
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// @import './styles/public.scss';
|
||||
@import '@/styles/top-selector.scss';
|
||||
.comment-box {
|
||||
padding: 32rpx 24rpx;
|
||||
.card-box {
|
||||
|
||||
@@ -4,7 +4,13 @@
|
||||
import { reactive, ref } from 'vue'
|
||||
import { formatRMB } from '@/utils'
|
||||
import { getUserAddress } from '@/api'
|
||||
import { getUserPayPwd } from '@/api/my-index'
|
||||
import { navigateTo, redirectTo } from '@/utils/router'
|
||||
import { useUI } from '@/utils/use-ui'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
|
||||
const { showToast, showDialog } = useUI()
|
||||
const { refreshUserInfo } = useUserStore()
|
||||
|
||||
const viewData = ref({})
|
||||
|
||||
@@ -33,13 +39,13 @@
|
||||
state: false,
|
||||
loading: true
|
||||
})
|
||||
const tixian = ref(null)
|
||||
|
||||
/** 获取用户地址 */
|
||||
const userRess = async () => {
|
||||
topRessData.loading = true
|
||||
const res = await getUserAddress({ pageNum: 1, pageSize: 99 }, false)
|
||||
const data = res.rows.find(v => v.defaultAddress == 1)
|
||||
console.log(data, '地址数据===')
|
||||
topRessData.state = !data?.id
|
||||
topRessData.name = data?.name || ''
|
||||
topRessData.houseNum = data?.houseNum || ''
|
||||
@@ -81,13 +87,33 @@
|
||||
|
||||
// 提交订单
|
||||
const onConfirm = async () => {
|
||||
if (!topRessData.id) {
|
||||
showToast(`请选择地址`)
|
||||
return
|
||||
}
|
||||
const res = await getUserPayPwd()
|
||||
if (res?.data) {
|
||||
tixian.value.open()
|
||||
} else {
|
||||
const show = await showDialog('提示', '请先设置支付密码')
|
||||
if (show) {
|
||||
navigateTo('/pages/my-index/wallet/edit-password', { type: 0 })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const submit = async e => {
|
||||
const data = {
|
||||
payPassword: e.join(''),
|
||||
addressId: topRessData.id,
|
||||
productId: viewData.value.id,
|
||||
quantity: formData.num,
|
||||
skuId: formData.spec
|
||||
}
|
||||
|
||||
tixian.value.close()
|
||||
const res = await addOrder(data)
|
||||
await refreshUserInfo()
|
||||
redirectTo('/pages/shop-together/detail', {
|
||||
id: res.data.groupId,
|
||||
type: 'add'
|
||||
@@ -105,6 +131,8 @@
|
||||
|
||||
<template>
|
||||
<view class="mall-confirm-order">
|
||||
<uu-pwdModal ref="tixian" @success="submit"></uu-pwdModal>
|
||||
|
||||
<!-- 地址 -->
|
||||
<view class="address-box" @click="onRess">
|
||||
<text v-if="topRessData.state" class="wu-adres">
|
||||
|
||||
@@ -36,6 +36,10 @@
|
||||
isInput: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
@@ -49,6 +53,7 @@
|
||||
<input
|
||||
v-if="props.isInput"
|
||||
v-model="name"
|
||||
:disabled="props.disabled"
|
||||
:type="props.type"
|
||||
:placeholder-style="placeholderStyle"
|
||||
:placeholder="props.placeholder"
|
||||
|
||||
@@ -60,8 +60,12 @@
|
||||
password: formData.confirmPassword
|
||||
}
|
||||
} else {
|
||||
if (!formData.password) {
|
||||
showToast('请输入设置交易密码')
|
||||
const passwordValue = validateTransactionPassword(
|
||||
formData.password,
|
||||
'交易密码'
|
||||
)
|
||||
if (!passwordValue.valid) {
|
||||
showToast(passwordValue.message)
|
||||
return
|
||||
}
|
||||
data = {
|
||||
|
||||
@@ -22,7 +22,16 @@
|
||||
key: '1',
|
||||
url: '/pages/my-index/wallet/bank-card/index'
|
||||
},
|
||||
{ title: '交易记录', key: '2', url: '' },
|
||||
{
|
||||
title: '积分记录',
|
||||
key: '2',
|
||||
url: '/pages/my-index/wallet/record'
|
||||
},
|
||||
{
|
||||
title: '提现记录',
|
||||
key: '5',
|
||||
url: '/pages/my-index/wallet/withdrawal-record'
|
||||
},
|
||||
{
|
||||
title: isSetPayPwd,
|
||||
key: '3',
|
||||
|
||||
@@ -10,6 +10,8 @@
|
||||
const { showToast } = useUI()
|
||||
|
||||
const loading = ref(true)
|
||||
/** 身份证状态:0 新增 1 等待审核 2 编辑 3 不可以修改和新增 */
|
||||
const stateData = ref(0)
|
||||
const formData = reactive({
|
||||
// 修改id
|
||||
id: '',
|
||||
@@ -34,9 +36,11 @@
|
||||
formData.back = res.data.idCardBackUrl
|
||||
formData.realName = res.data.realName
|
||||
formData.idCard = res.data.idCardNumber
|
||||
|
||||
formData.frontList = [{ url: res.data.idCardFrontUrl }]
|
||||
formData.backList = [{ url: res.data.idCardBackUrl }]
|
||||
stateData.value = res.data.status
|
||||
} else {
|
||||
stateData.value = 0
|
||||
}
|
||||
|
||||
loading.value = false
|
||||
@@ -62,13 +66,14 @@
|
||||
}
|
||||
|
||||
const data = {
|
||||
id: formData.id,
|
||||
idCardFrontUrl: formData.front,
|
||||
idCardBackUrl: formData.back,
|
||||
realName: formData.realName,
|
||||
idCardNumber: formData.idCard
|
||||
}
|
||||
|
||||
await addUserIdCard(data)
|
||||
await addUserIdCard(data, stateData.value === 0 ? 'post' : 'put')
|
||||
await showToast(`添加成功`, 'success')
|
||||
navigateBack()
|
||||
}
|
||||
@@ -80,19 +85,21 @@
|
||||
|
||||
<template>
|
||||
<view v-if="!loading" class="real-id">
|
||||
<view v-if="[0, 2, 3].includes(stateData)">
|
||||
<!-- 说明 -->
|
||||
<text class="top-text">*为保证您的账户安全,请先完成实名认证</text>
|
||||
|
||||
<CardInput :is-input="false" title="收款码">
|
||||
<view class="qrcode-box">
|
||||
<cb-file-picker
|
||||
v-model="formData.front"
|
||||
v-model:list="formData.frontList"
|
||||
:readonly="stateData === 3"
|
||||
isFront
|
||||
></cb-file-picker>
|
||||
<cb-file-picker
|
||||
v-model="formData.back"
|
||||
v-model:list="formData.backList"
|
||||
:readonly="stateData === 3"
|
||||
isBack
|
||||
></cb-file-picker>
|
||||
</view>
|
||||
@@ -102,21 +109,32 @@
|
||||
v-model="formData.realName"
|
||||
title="姓名"
|
||||
placeholder="请输入姓名"
|
||||
:disabled="stateData === 3"
|
||||
></CardInput>
|
||||
|
||||
<CardInput
|
||||
v-model="formData.idCard"
|
||||
title="身份证号"
|
||||
placeholder="请输入身份证号"
|
||||
:disabled="stateData === 3"
|
||||
></CardInput>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<bottom-view>
|
||||
<bottom-view v-if="stateData !== 3">
|
||||
<cb-button @click="onAddCode">
|
||||
确认{{ formData.id ? '修改' : '添加' }}
|
||||
</cb-button>
|
||||
</bottom-view>
|
||||
</view>
|
||||
<view v-else class="wait-view">
|
||||
<image
|
||||
src="/static/images/my-index/date-icon.png"
|
||||
mode="heightFix"
|
||||
class="icon-img"
|
||||
></image>
|
||||
<text>等待审核</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -132,7 +150,6 @@
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
text-align: left;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
@@ -141,4 +158,23 @@
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.wait-view {
|
||||
margin-top: 10vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.icon-img {
|
||||
height: 60rpx;
|
||||
}
|
||||
text {
|
||||
margin-top: 20rpx;
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
color: #999999;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
241
pages/my-index/wallet/record.vue
Normal file
241
pages/my-index/wallet/record.vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<script setup>
|
||||
import { ref, reactive, computed } from 'vue'
|
||||
import {
|
||||
getUserWithdrawList,
|
||||
getUserTradeRecordList
|
||||
} from '@/api/my-index'
|
||||
|
||||
const props = defineProps({
|
||||
// 0 积分记录 1 提现记录
|
||||
type: {
|
||||
type: String,
|
||||
default: '0'
|
||||
}
|
||||
})
|
||||
|
||||
const topNav = computed(() => {
|
||||
const list =
|
||||
props.type === '0'
|
||||
? [
|
||||
{ name: '全部', id: '' },
|
||||
{ name: '拼单获得', id: '1', state: '+', color: '#2ecc71' },
|
||||
{ name: '消费', id: '2', state: '-', color: '#e74c3c' },
|
||||
{ name: '退款', id: '3', state: '-', color: '#f39c12' },
|
||||
{ name: '系统赠送', id: '4', state: '+', color: '#2ecc71' },
|
||||
{ name: '系统扣除', id: '5', state: '-', color: '#e74c3c' },
|
||||
{ name: '签到', id: '6', state: '+', color: '#2ecc71' },
|
||||
{ name: '提现', id: '7', state: '-', color: '#e74c3c' },
|
||||
{ name: '提现冻结', id: '8', state: '-', color: '#f39c12' },
|
||||
{
|
||||
name: '提现拒绝释放',
|
||||
id: '9',
|
||||
state: '-',
|
||||
color: '#e74c3c'
|
||||
},
|
||||
{
|
||||
name: '提现成功扣除',
|
||||
id: '10',
|
||||
state: '-',
|
||||
color: '#e74c3c'
|
||||
}
|
||||
]
|
||||
: [
|
||||
{ name: '全部', id: '' },
|
||||
{ name: '待处理', id: '0', state: '', color: '#95a5a6' },
|
||||
{ name: '处理中', id: '1', state: '', color: '#3498db' },
|
||||
{ name: '提现成功', id: '2', state: '-', color: '#2ecc71' },
|
||||
{ name: '提现失败', id: '3', state: '', color: '#e74c3c' },
|
||||
{ name: '已取消', id: '4', state: '', color: '#95a5a6' }
|
||||
]
|
||||
return list
|
||||
})
|
||||
|
||||
const paging = ref(null)
|
||||
const dataList = ref([])
|
||||
const formData = reactive({
|
||||
type: '',
|
||||
pageSize: 15
|
||||
})
|
||||
|
||||
const getData = async (pageNum, pageSize) => {
|
||||
try {
|
||||
const isShow = props.type === '0'
|
||||
const api = isShow ? getUserTradeRecordList : getUserWithdrawList
|
||||
const res = await api({
|
||||
pageNum,
|
||||
pageSize,
|
||||
[isShow ? 'changeType' : 'status']: formData.type
|
||||
})
|
||||
paging.value.complete(res.rows)
|
||||
} catch (error) {
|
||||
paging.value.complete(false)
|
||||
}
|
||||
}
|
||||
|
||||
const onTop = id => {
|
||||
formData.type = id
|
||||
getData(1, formData.pageSize)
|
||||
}
|
||||
|
||||
// onLoad(() => {
|
||||
// getData()
|
||||
// })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<z-paging
|
||||
ref="paging"
|
||||
v-model="dataList"
|
||||
:default-page-size="formData.pageSize"
|
||||
safe-area-inset-bottom
|
||||
use-safe-area-placeholder
|
||||
@query="getData"
|
||||
>
|
||||
<template #top>
|
||||
<view class="top-options">
|
||||
<view
|
||||
v-for="(item, index) in topNav"
|
||||
:key="index"
|
||||
:class="{ active: item.id === formData.type }"
|
||||
class="text"
|
||||
@click="onTop(item.id)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view class="card-box">
|
||||
<view
|
||||
v-for="item in dataList"
|
||||
:key="item.withdrawalId"
|
||||
class="item-row"
|
||||
>
|
||||
<image
|
||||
v-if="props.type === '0'"
|
||||
src="/static/images/my-index/shangjia.png"
|
||||
mode="heightFix"
|
||||
class="left-icon"
|
||||
></image>
|
||||
<image
|
||||
v-else
|
||||
src="/static/images/my-index/shangjia1.png"
|
||||
mode="heightFix"
|
||||
class="left-icon"
|
||||
></image>
|
||||
<view class="right-box">
|
||||
<view class="name-box">
|
||||
<text>
|
||||
{{
|
||||
props.type === '0' ? item.description : item.withdrawalNo
|
||||
}}
|
||||
</text>
|
||||
<text>
|
||||
{{ props.type === '0' ? item.createTime : item.updateTime }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="state-box">
|
||||
<text
|
||||
:style="{
|
||||
color:
|
||||
topNav[
|
||||
props.type === '0' ? item.changeType : item.status + 1
|
||||
].color
|
||||
}"
|
||||
>
|
||||
{{
|
||||
topNav[
|
||||
props.type === '0' ? item.changeType : item.status + 1
|
||||
].name
|
||||
}}
|
||||
</text>
|
||||
<text>
|
||||
{{
|
||||
topNav[
|
||||
props.type === '0' ? item.changeType : item.status + 1
|
||||
].state
|
||||
}}{{
|
||||
props.type === '0' ? item.changeAmount : item.actualAmount
|
||||
}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</z-paging>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/styles/top-selector.scss';
|
||||
// 全屏背景色
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.top-options {
|
||||
margin: 0;
|
||||
background: #ffffff;
|
||||
padding: 32rpx 24rpx;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.card-box {
|
||||
padding: 32rpx 24rpx;
|
||||
|
||||
.item-row + .item-row {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.item-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
padding: 16rpx 32rpx;
|
||||
.left-icon {
|
||||
height: 96rpx;
|
||||
margin-right: 16rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.right-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
.name-box,
|
||||
.state-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.name-box {
|
||||
text {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
&:last-child {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
.state-box {
|
||||
margin-left: 16rpx;
|
||||
flex-shrink: 0;
|
||||
text-align: right;
|
||||
text {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
&:last-child {
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
7
pages/my-index/wallet/withdrawal-record.vue
Normal file
7
pages/my-index/wallet/withdrawal-record.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<script setup>
|
||||
import record from './record.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<record type="1"></record>
|
||||
</template>
|
||||
@@ -8,12 +8,14 @@
|
||||
getUserBankList,
|
||||
getUserWithdrawConfig,
|
||||
getUserIntegral,
|
||||
addUserWithdraw
|
||||
} from '/api/my-index'
|
||||
addUserWithdraw,
|
||||
getUserPayPwd
|
||||
} from '@/api/my-index'
|
||||
import { useUI } from '@/utils/use-ui'
|
||||
|
||||
const { showToast, showDialog } = useUI()
|
||||
|
||||
const tixian = ref(null)
|
||||
const popup = ref(null)
|
||||
const topData = ref({})
|
||||
const formData = reactive({
|
||||
@@ -99,14 +101,36 @@
|
||||
return
|
||||
}
|
||||
|
||||
const res = await getUserPayPwd()
|
||||
if (res?.data) {
|
||||
tixian.value.open()
|
||||
} else {
|
||||
const show = await showDialog('提示', '请先设置支付密码')
|
||||
if (show) {
|
||||
navigateTo('/pages/my-index/wallet/edit-password', { type: 0 })
|
||||
}
|
||||
}
|
||||
// await addUserWithdraw(data)
|
||||
// await showToast(`提现成功`, 'success')
|
||||
// navigateBack()
|
||||
}
|
||||
|
||||
const submit = async e => {
|
||||
try {
|
||||
const data = {
|
||||
payPassword: e.join(''),
|
||||
amount: formData.nuber,
|
||||
withdrawalType: topData.value.withdrawalType,
|
||||
paymentAccountId: formData.paymentAccountId
|
||||
}
|
||||
tixian.value.close()
|
||||
await addUserWithdraw(data)
|
||||
await showToast(`提现成功`, 'success')
|
||||
navigateBack()
|
||||
} catch (error) {
|
||||
tixian.value.close()
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
@@ -119,6 +143,8 @@
|
||||
<view class="withdraw-box">
|
||||
<nav-bar isTopBg isPlaceholder title="提现"></nav-bar>
|
||||
|
||||
<uu-pwdModal ref="tixian" @success="submit"></uu-pwdModal>
|
||||
|
||||
<view class="view-box">
|
||||
<!-- 选择提现方式 -->
|
||||
<view class="withdraw-way">
|
||||
|
||||
BIN
static/images/my-index/shangjia.png
Normal file
BIN
static/images/my-index/shangjia.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
static/images/my-index/shangjia1.png
Normal file
BIN
static/images/my-index/shangjia1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
@@ -12,12 +12,12 @@
|
||||
}
|
||||
.text {
|
||||
flex-shrink: 0;
|
||||
padding: 8rpx 16rpx;
|
||||
padding: 10rpx 16rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
line-height: 1;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
background: #f4f4f4;
|
||||
@@ -25,7 +25,7 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.active {
|
||||
padding: 6rpx 14rpx;
|
||||
padding: 8rpx 14rpx;
|
||||
border-radius: 64rpx;
|
||||
border: 2rpx solid #00d993;
|
||||
color: #00d993;
|
||||
|
||||
9
tsconfig.json
Normal file
9
tsconfig.json
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src/**/*", "types/**/*"]
|
||||
}
|
||||
2
uni_modules/uu-pwdModal/changelog.md
Normal file
2
uni_modules/uu-pwdModal/changelog.md
Normal file
@@ -0,0 +1,2 @@
|
||||
## 1.0.0(2024-12-01)
|
||||
无,请自行翻阅代码查看记录,易上手
|
||||
181
uni_modules/uu-pwdModal/components/uu-pwdModal/uu-pwdModal.vue
Normal file
181
uni_modules/uu-pwdModal/components/uu-pwdModal/uu-pwdModal.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<view>
|
||||
<uni-popup ref="popup" type="bottom">
|
||||
<view class="modal">
|
||||
<view class="title">
|
||||
请输入支付密码
|
||||
<view class="close" @click="close">
|
||||
<uni-icons type="closeempty" size="20"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="input">
|
||||
<view
|
||||
class="row"
|
||||
v-for="i in 6"
|
||||
:class="current == i ? 'active' : ''"
|
||||
>
|
||||
<view class="pwd" v-if="current > i"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tip" @click="forgetPwd">忘记密码?</view>
|
||||
|
||||
<view class="keyboard">
|
||||
<view
|
||||
class="row"
|
||||
v-for="i in key"
|
||||
:key="i"
|
||||
:class="{ 'no-i': i === -2 }"
|
||||
@click="i !== -2 && input(i)"
|
||||
>
|
||||
<uni-icons
|
||||
v-if="i == -1"
|
||||
type="closeempty"
|
||||
size="24"
|
||||
></uni-icons>
|
||||
<text v-if="i != -1">
|
||||
{{ i >= 0 ? i : '' }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view></view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: 1,
|
||||
key: [1, 2, 3, 4, 5, 6, 7, 8, 9, -2, 0, -1],
|
||||
value: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
forgetPwd() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/myInfo/changePayPwd'
|
||||
})
|
||||
},
|
||||
open() {
|
||||
this.$refs.popup.open()
|
||||
this.value = []
|
||||
this.current = 1
|
||||
},
|
||||
close() {
|
||||
this.$refs.popup.close()
|
||||
},
|
||||
input(n) {
|
||||
if (this.value.length < 6 && n >= 0) {
|
||||
this.current++
|
||||
this.value.push(n)
|
||||
if (this.value.length == 6) {
|
||||
const v = [...this.value]
|
||||
this.value = []
|
||||
console.log(this.value)
|
||||
this.$emit('success', v)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (n == -1 && this.current > 1) {
|
||||
this.current--
|
||||
this.value.pop()
|
||||
return
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.$refs.popup.open()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.modal {
|
||||
width: 750rpx;
|
||||
background-color: white;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
margin-bottom: 50px;
|
||||
width: 100%;
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-column-gap: 20rpx;
|
||||
|
||||
.row {
|
||||
background: #f7f7f7;
|
||||
border-radius: 5px;
|
||||
height: 90rpx;
|
||||
border: 1px solid #efefef;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.pwd {
|
||||
background-color: black;
|
||||
width: 30rpx;
|
||||
border-radius: 50%;
|
||||
height: 30rpx;
|
||||
}
|
||||
|
||||
.active {
|
||||
border: 1px solid #2667ff;
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
text-align: center;
|
||||
color: #2667ff;
|
||||
font-size: 15px;
|
||||
margin-top: 80rpx;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.keyboard {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(4, 1fr);
|
||||
grid-gap: 20rpx;
|
||||
color: #545454;
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
border-radius: 10rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
height: 100rpx;
|
||||
background: #f4f4f4;
|
||||
|
||||
&:hover {
|
||||
background: #e1e1e1;
|
||||
}
|
||||
}
|
||||
|
||||
.no-i {
|
||||
background: #ffffff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
83
uni_modules/uu-pwdModal/package.json
Normal file
83
uni_modules/uu-pwdModal/package.json
Normal file
@@ -0,0 +1,83 @@
|
||||
{
|
||||
"id": "uu-pwdModal",
|
||||
"displayName": "uu-pwdModal",
|
||||
"version": "1.0.0",
|
||||
"description": "支付密码弹窗",
|
||||
"keywords": [
|
||||
"支付,弹窗,密码"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据,一个支付密码的弹窗,内置忘记密码跳转功能,忘记密码页面需要自行修改",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y",
|
||||
"alipay": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "u",
|
||||
"app-uvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "u",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "u",
|
||||
"QQ浏览器(Android)": "u"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "u",
|
||||
"Edge": "y",
|
||||
"Firefox": "u",
|
||||
"Safari": "u"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "u",
|
||||
"阿里": "u",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
1
uni_modules/uu-pwdModal/readme.md
Normal file
1
uni_modules/uu-pwdModal/readme.md
Normal file
@@ -0,0 +1 @@
|
||||
# uu-pwdModal
|
||||
@@ -12,8 +12,8 @@ const ID_CARD_REGEX = /(^\d{15}$)|(^\d{18}$)|(^\d{17}[\dXx]$)/
|
||||
/** 密码强度(至少8位,包含数字和字母) */
|
||||
const PASSWORD_REGEX = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/
|
||||
|
||||
/** 交易密码(6–20 位,必须包含数字 + 字母(大小写均可)) */
|
||||
const TRANSACTION_PASSWORD_REGEX = /^(?=.*\d)(?=.*[a-zA-Z]).{6,20}$/
|
||||
/** 交易密码(必须是6位数字) */
|
||||
const TRANSACTION_PASSWORD_REGEX = /^\d{6}$/
|
||||
|
||||
/**
|
||||
* 校验手机号
|
||||
@@ -98,7 +98,7 @@ export const validateTransactionPassword = (password, name = '密码') => {
|
||||
return { valid: false, message: `${name}长度不能少于6位` }
|
||||
}
|
||||
if (!TRANSACTION_PASSWORD_REGEX.test(password)) {
|
||||
return { valid: false, message: `${name}需包含字母和数字` }
|
||||
return { valid: false, message: `${name}必须是6位数字` }
|
||||
}
|
||||
return { valid: true, message: '' }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user