|
|
@@ -8,7 +8,7 @@
|
|
|
<view class="card-top">
|
|
|
<uni-forms ref="formRef" :model="form" :rules="rules" label-position="top"
|
|
|
validate-trigger="submit">
|
|
|
-
|
|
|
+
|
|
|
<view class="card-row card-tit">
|
|
|
<view class="title-wrapper">
|
|
|
<view class="tit">
|
|
|
@@ -38,21 +38,6 @@
|
|
|
</uni-forms-item>
|
|
|
</view>
|
|
|
|
|
|
- <view class="card-row card-tit">
|
|
|
- <view class="title-wrapper">
|
|
|
- <view class="tit">
|
|
|
- <text class="iconfont icon-caret-right"></text>
|
|
|
- <span>{{ t('Label.Currency') }}</span>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="card-row">
|
|
|
- <uni-forms-item name="currency">
|
|
|
- <cwg-combox v-model:value="form.currency" :clearable="false"
|
|
|
- :options="currencyOptions" :placeholder="t('placeholder.choose')" />
|
|
|
- </uni-forms-item>
|
|
|
- </view>
|
|
|
-
|
|
|
<view class="card-row card-tit">
|
|
|
<view class="title-wrapper">
|
|
|
<view class="tit">
|
|
|
@@ -68,7 +53,8 @@
|
|
|
</view>
|
|
|
|
|
|
<view class="form-row">
|
|
|
- <button class="s-btn reselect" type="primary" @click="toTransfer">{{ t('Btn.Submit') }}</button>
|
|
|
+ <button class="s-btn reselect" type="primary" @click="toTransfer">{{ t('Btn.Submit')
|
|
|
+ }}</button>
|
|
|
</view>
|
|
|
</uni-forms>
|
|
|
</view>
|
|
|
@@ -174,7 +160,7 @@ const closeDia = () => {
|
|
|
const toTransfer = async () => {
|
|
|
try {
|
|
|
await formRef.value.validate()
|
|
|
-
|
|
|
+
|
|
|
if (walletbalance.value == '0' || Number(walletbalance.value) < Number(form.amount)) {
|
|
|
uni.showToast({ title: t('wallet.item64'), icon: 'none' })
|
|
|
return
|
|
|
@@ -185,7 +171,7 @@ const toTransfer = async () => {
|
|
|
dialogCheckWait.value = true
|
|
|
|
|
|
let res = await customApi.walletTransferApply({ ...form })
|
|
|
-
|
|
|
+
|
|
|
if (res.code == Code.StatusOK) {
|
|
|
dialogCheck.value = true
|
|
|
dialogVisible.value = true
|
|
|
@@ -237,13 +223,394 @@ onMounted(() => {
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
@import "@/uni.scss";
|
|
|
-@import "@/pages/customer/transfer.scss";
|
|
|
|
|
|
-:deep(.disabled-input) {
|
|
|
- .uni-easyinput__content {
|
|
|
- background-color: #f5f7fa !important;
|
|
|
- input {
|
|
|
- color: #c0c4cc !important;
|
|
|
+.transfer-page {
|
|
|
+ width: 100%;
|
|
|
+ padding-bottom: px2rpx(20);
|
|
|
+
|
|
|
+ .main-content {
|
|
|
+ text-align: left;
|
|
|
+
|
|
|
+ .box {
|
|
|
+ padding-top: px2rpx(5);
|
|
|
+ color: #303133;
|
|
|
+
|
|
|
+ .b-card {
|
|
|
+ background-color: #fff;
|
|
|
+ margin-bottom: px2rpx(10);
|
|
|
+ border-radius: px2rpx(6);
|
|
|
+ box-shadow: 0 px2rpx(1) px2rpx(6) 0 rgba(0, 0, 0, 0.05);
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ box-shadow: 0 px2rpx(2) px2rpx(8) 0 rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-top {
|
|
|
+ padding: px2rpx(15) px2rpx(20);
|
|
|
+
|
|
|
+ .card-row {
|
|
|
+ margin-bottom: px2rpx(30);
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-tit {
|
|
|
+ margin-bottom: px2rpx(0) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tit {
|
|
|
+ font-size: px2rpx(16);
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: px2rpx(16);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: var(--color-navy-900);
|
|
|
+ position: relative;
|
|
|
+ padding-left: 20px;
|
|
|
+
|
|
|
+ &:after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-top: 6px solid transparent;
|
|
|
+ border-bottom: 6px solid transparent;
|
|
|
+ border-left: 8px solid currentColor;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ margin-right: px2rpx(8);
|
|
|
+ color: var(--color-primary);
|
|
|
+ font-size: px2rpx(18);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-wrapper {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-step2 {
|
|
|
+ .form-row {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-bottom: px2rpx(12);
|
|
|
+ gap: px2rpx(12);
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-col {
|
|
|
+ flex: 1;
|
|
|
+ min-width: px2rpx(140);
|
|
|
+
|
|
|
+ @media screen and (max-width: 991px) {
|
|
|
+ flex: 0 0 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-col-full {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 px2rpx(5);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tips {
|
|
|
+ line-height: 1.8;
|
|
|
+ font-size: px2rpx(12);
|
|
|
+ color: #909399;
|
|
|
+ background-color: #f9f9f9;
|
|
|
+ padding: px2rpx(12);
|
|
|
+ border-radius: px2rpx(4);
|
|
|
+ border-left: px2rpx(2) solid #409eff;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: px2rpx(6);
|
|
|
+ color: #606266;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .picker-select {
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ border-radius: px2rpx(4);
|
|
|
+ padding: px2rpx(12) px2rpx(14);
|
|
|
+ font-size: px2rpx(14);
|
|
|
+ color: #606266;
|
|
|
+ line-height: 1.4;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ border-color: #409eff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.picker-disabled {
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ color: #c0c4cc;
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .disabled-input {
|
|
|
+ // background-color: #f5f7fa;
|
|
|
+ // border: 1px solid #dcdfe6;
|
|
|
+ border-radius: px2rpx(4);
|
|
|
+ // padding: px2rpx(12) px2rpx(14);
|
|
|
+ font-size: px2rpx(14);
|
|
|
+ color: #606266;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .m-input {
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ border-radius: px2rpx(4);
|
|
|
+ padding: px2rpx(12) px2rpx(14);
|
|
|
+ font-size: px2rpx(14);
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ &:focus {
|
|
|
+ border-color: #409eff;
|
|
|
+ outline: none;
|
|
|
+ box-shadow: 0 0 0 px2rpx(1) rgba(64, 158, 255, 0.2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .popup-content {
|
|
|
+ padding: px2rpx(30) px2rpx(20);
|
|
|
+ text-align: center;
|
|
|
+ min-width: px2rpx(250);
|
|
|
+ max-width: 80%;
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ @media screen and (max-width: 991px) {
|
|
|
+ min-width: 80%;
|
|
|
+ max-width: 90%;
|
|
|
+ margin: 0 px2rpx(10);
|
|
|
+ }
|
|
|
+
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ .iconfont {
|
|
|
+ font-size: px2rpx(60);
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-chenggong {
|
|
|
+ color: #67c23a;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-jingshi {
|
|
|
+ color: #f56c6c;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-dengdai {
|
|
|
+ color: #e6a23c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .des1 {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: px2rpx(16);
|
|
|
+ margin: px2rpx(20) 0 px2rpx(15);
|
|
|
+ color: #303133;
|
|
|
+ line-height: 1.4;
|
|
|
+ padding: 0 px2rpx(10);
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ gap: px2rpx(10);
|
|
|
+ margin-top: px2rpx(10);
|
|
|
+
|
|
|
+ @media (max-width: 750rpx) {
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ gap: px2rpx(6);
|
|
|
+ }
|
|
|
+
|
|
|
+ button {
|
|
|
+ min-width: px2rpx(90);
|
|
|
+ padding: 0 px2rpx(12);
|
|
|
+ border-radius: px2rpx(4);
|
|
|
+ font-size: px2rpx(14);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &[type="primary"] {
|
|
|
+ background-color: #409eff;
|
|
|
+ color: #fff;
|
|
|
+ border: none;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: #66b1ff;
|
|
|
+ transform: translateY(px2rpx(-1));
|
|
|
+ box-shadow: 0 px2rpx(2) px2rpx(6) 0 rgba(64, 158, 255, 0.3);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background-color: #3a8ee6;
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:not([type="primary"]) {
|
|
|
+ background-color: #fff;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ color: #606266;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ border-color: #409eff;
|
|
|
+ color: #409eff;
|
|
|
+ transform: translateY(px2rpx(-1));
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .wait-popup {
|
|
|
+ .des1 {
|
|
|
+ margin-top: px2rpx(10);
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ .iconfont {
|
|
|
+ animation: spin 1s linear infinite;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 动画
|
|
|
+@keyframes popupFadeIn {
|
|
|
+ from {
|
|
|
+ opacity: 0;
|
|
|
+ transform: scale(0.9);
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ opacity: 1;
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes fadeIn {
|
|
|
+ from {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateY(px2rpx(10));
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ opacity: 1;
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes pulse {
|
|
|
+ 0% {
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+
|
|
|
+ 50% {
|
|
|
+ transform: scale(1.05);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes spin {
|
|
|
+ from {
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 表单错误信息样式
|
|
|
+.uni-forms-item__error {
|
|
|
+ font-size: px2rpx(12);
|
|
|
+ color: #f56c6c;
|
|
|
+ margin-top: px2rpx(4);
|
|
|
+}
|
|
|
+
|
|
|
+// 适配不同屏幕尺寸（媒体查询中的 750rpx 保持不变）
|
|
|
+@media (max-width: 750rpx) {
|
|
|
+ .transfer-page {
|
|
|
+ .main-content {
|
|
|
+ padding: px2rpx(8);
|
|
|
+
|
|
|
+ .box {
|
|
|
+ .b-card {
|
|
|
+ .card-top {
|
|
|
+ padding: px2rpx(12) px2rpx(16);
|
|
|
+
|
|
|
+ .tit {
|
|
|
+ font-size: px2rpx(14);
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ font-size: px2rpx(16);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .s-btn {
|
|
|
+ font-size: px2rpx(14);
|
|
|
+ padding: px2rpx(10) px2rpx(16);
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-content {
|
|
|
+ padding: px2rpx(20) px2rpx(16);
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ .iconfont {
|
|
|
+ font-size: px2rpx(50);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .des1 {
|
|
|
+ font-size: px2rpx(14);
|
|
|
+ margin: px2rpx(15) 0 px2rpx(10);
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-footer {
|
|
|
+ button {
|
|
|
+ min-width: px2rpx(80);
|
|
|
+ font-size: px2rpx(13);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
