mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2026-08-06 10:57:25 +08:00
refactor: 重构多个组件以支持 Vue 3 语法和功能
- 将多个组件转换为 `<script setup>` 语法，提升可读性和性能 - 优化状态管理和事件处理逻辑，简化代码结构 - 更新样式和布局以适应新组件结构 - 添加新功能和修复已知问题，提升用户体验
This commit is contained in:
Yer11214
@@ -1,129 +1,182 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="withdrawal-list">
|
||||
<view class="title">提现金额</view>
|
||||
<view class="content">
|
||||
<view class="price">
|
||||
<span> ￥</span>
|
||||
<u-input v-model="price" placeholder="" type="number" />
|
||||
</view>
|
||||
|
||||
<view class="all">
|
||||
<view @click="handleAll" :style="{ color: $mainColor }">全部</view>
|
||||
<view style="font-size: 24rpx; color: #999"
|
||||
>可提现金额<span>{{unitPrice(distributionData.canRebate) }}</span
|
||||
>元</view
|
||||
>
|
||||
<view class="wrapper" :style="themeStyle">
|
||||
<view class="feedBack-box">
|
||||
<view class="box-title">提现金额</view>
|
||||
<view class="amount-row">
|
||||
<text class="currency">￥</text>
|
||||
<u-input
|
||||
v-model="price"
|
||||
type="digit"
|
||||
border="none"
|
||||
placeholder="请输入提现金额"
|
||||
class="amount-input"
|
||||
/>
|
||||
</view>
|
||||
<view class="amount-extra">
|
||||
<view class="all-btn" @click="fillAllAmount">全部</view>
|
||||
<view class="balance-tip">
|
||||
可提现金额
|
||||
<text class="balance-value">{{ unitPrice(distributionData.canRebate) }}</text>
|
||||
元
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="submit" @click="cashd">提现</view>
|
||||
<view class="submit" @click="submitWithdraw">提现</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { distribution, cash } from "@/api/goods";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
price: 0,
|
||||
distributionData: "",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
cashd() {
|
||||
this.price = this.price + "";
|
||||
|
||||
|
||||
if (this.$u.test.amount(parseInt(this.price))) {
|
||||
cash({ price: this.price }).then((res) => {
|
||||
if(res.data.success){
|
||||
uni.showToast({
|
||||
title: '提现成功!',
|
||||
duration: 2000,
|
||||
icon:"none"
|
||||
});
|
||||
setTimeout(()=>{
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
},1000)
|
||||
}
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "请输入正确金额",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, getCurrentInstance, onMounted } from 'vue'
|
||||
import { useStore } from '@/store'
|
||||
import { distribution, cash } from '@/api/goods'
|
||||
import { unitPrice } from '@/utils/filters.js'
|
||||
import { getThemeStyle } from '@/utils/theme'
|
||||
|
||||
const store = useStore()
|
||||
const { proxy } = getCurrentInstance()!
|
||||
|
||||
const themeStyle = computed(() => getThemeStyle(store.state.theme))
|
||||
const price = ref('')
|
||||
const distributionData = ref<Record<string, any>>({})
|
||||
|
||||
onMounted(() => {
|
||||
fetchDistributionInfo()
|
||||
})
|
||||
|
||||
function hideLoadingIfNeeded() {
|
||||
if (store.state.isShowToast) uni.hideLoading()
|
||||
}
|
||||
|
||||
function fetchDistributionInfo() {
|
||||
uni.showLoading({ title: '加载中' })
|
||||
distribution().then((res) => {
|
||||
if (res.data.result) {
|
||||
distributionData.value = res.data.result
|
||||
}
|
||||
hideLoadingIfNeeded()
|
||||
})
|
||||
}
|
||||
|
||||
function submitWithdraw() {
|
||||
const amount = String(price.value ?? '')
|
||||
if (proxy.$u.test.amount(parseInt(amount))) {
|
||||
cash({ price: amount }).then((res) => {
|
||||
if (res.data.success) {
|
||||
uni.showToast({ title: '提现成功!', duration: 2000, icon: 'none' })
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({ delta: 1 })
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
handleAll() {
|
||||
this.price = this.distributionData.canRebate;
|
||||
},
|
||||
/**
|
||||
* 初始化推广商品
|
||||
*/
|
||||
init() {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
});
|
||||
distribution().then((res) => {
|
||||
if (res.data.result) {
|
||||
this.distributionData = res.data.result;
|
||||
}
|
||||
if (this.$store.state.isShowToast){ uni.hideLoading() };
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
})
|
||||
} else {
|
||||
uni.showToast({ title: '请输入正确金额', duration: 2000, icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
function fillAllAmount() {
|
||||
price.value = distributionData.value.canRebate ?? ''
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .u-input__input,
|
||||
.u-input {
|
||||
font-size: 80rpx !important;
|
||||
height: 102rpx !important;
|
||||
|
||||
}
|
||||
::v-deep .u-input__input{
|
||||
height: 100%;
|
||||
font-size: 80rpx;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
> .price {
|
||||
width: 60%;
|
||||
margin: 20rpx 0;
|
||||
font-size: 80rpx;
|
||||
display: flex;
|
||||
}
|
||||
> .all {
|
||||
justify-content: center;
|
||||
width: 40%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
.withdrawal-list {
|
||||
margin: 20rpx 0;
|
||||
background: #fff;
|
||||
padding: 16rpx 32rpx;
|
||||
}
|
||||
.title {
|
||||
font-size: 35rpx;
|
||||
}
|
||||
.submit {
|
||||
margin: 80rpx auto;
|
||||
width: 94%;
|
||||
background: $light-color;
|
||||
height: 90rpx;
|
||||
color: #fff;
|
||||
border-radius: 10rpx;
|
||||
text-align: center;
|
||||
line-height: 90rpx;
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/pages/passport/entry/seller/entry-form.scss';
|
||||
|
||||
.wrapper {
|
||||
box-sizing: border-box;
|
||||
min-height: 100vh;
|
||||
padding: 20rpx 24rpx 40rpx;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.feedBack-box {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.box-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.amount-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-top: 24rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
background: #fafafa;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.currency {
|
||||
flex-shrink: 0;
|
||||
margin-right: 16rpx;
|
||||
font-size: 56rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.amount-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
:deep(.amount-input .u-input) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.amount-input .u-input__content) {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
:deep(.amount-input .u-input__content__field-wrapper__field) {
|
||||
height: 72rpx !important;
|
||||
min-height: 72rpx !important;
|
||||
font-size: 56rpx !important;
|
||||
font-weight: 600 !important;
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
:deep(.amount-input .u-input__content__field-wrapper__field--placeholder) {
|
||||
font-size: 32rpx !important;
|
||||
font-weight: 400 !important;
|
||||
color: #c0c4cc !important;
|
||||
}
|
||||
|
||||
.amount-extra {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.all-btn {
|
||||
font-size: 28rpx;
|
||||
color: var(--theme-light, #ff6b35);
|
||||
}
|
||||
|
||||
.balance-tip {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.balance-value {
|
||||
margin: 0 4rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.submit {
|
||||
@include seller-entry-submit;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user