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,11 +1,10 @@
|
||||
<template>
|
||||
|
||||
<view></view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
<script setup lang="ts">
|
||||
// 占位页，暂无业务逻辑
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
||||
@@ -3,160 +3,100 @@
|
||||
<view>
|
||||
<h4>实名认证（请上传真实的个人信息，认证通过后将无法修改）</h4>
|
||||
<view>
|
||||
<u-form :model="ruleForm" label-width="200rpx" ref="uForm">
|
||||
<u-form-item label="姓名" prop="name">
|
||||
<u-input v-model="ruleForm.name" placeholder="请输入您的真实姓名" />
|
||||
</u-form-item>
|
||||
<u-form-item label="身份证" prop="idNumber">
|
||||
<u-input v-model="ruleForm.idNumber" placeholder="请输入身份证号码" />
|
||||
</u-form-item>
|
||||
<u-form-item label="银行开户行" prop="settlementBankBranchName">
|
||||
<u-input v-model="ruleForm.settlementBankBranchName" type="text" placeholder="请输入银行开户行" />
|
||||
</u-form-item>
|
||||
<u-form-item label="银行开户名" prop="settlementBankAccountName">
|
||||
<u-input v-model="ruleForm.settlementBankAccountName" type="text" placeholder="请输入银行开户名" />
|
||||
</u-form-item>
|
||||
<u-form-item label="银行账号" prop="settlementBankAccountNum">
|
||||
<u-input v-model="ruleForm.settlementBankAccountNum" type="text" placeholder="请输入银行账号" />
|
||||
</u-form-item>
|
||||
<!-- <u-form-item label="身份证正面照" prop="name">
|
||||
<u-upload></u-upload>
|
||||
</u-form-item>
|
||||
<u-form-item label="身份证反面照" prop="name">
|
||||
<u-upload></u-upload>
|
||||
</u-form-item>
|
||||
<u-form-item label="手持身份证照" prop="name">
|
||||
<u-upload></u-upload>
|
||||
</u-form-item> -->
|
||||
</u-form>
|
||||
<u-button :customStyle="{'background':$lightColor,'color':'#fff' }" @click="submit">提交</u-button>
|
||||
<up-form
|
||||
:model="formData"
|
||||
label-position="left"
|
||||
label-width="180rpx"
|
||||
ref="uFormRef"
|
||||
>
|
||||
<up-form-item label="姓名" prop="name">
|
||||
<u-input v-model="formData.name" placeholder="请输入您的真实姓名" />
|
||||
</up-form-item>
|
||||
<up-form-item label="身份证" prop="idNumber">
|
||||
<u-input v-model="formData.idNumber" placeholder="请输入身份证号码" />
|
||||
</up-form-item>
|
||||
<up-form-item label="银行开户行" prop="settlementBankBranchName">
|
||||
<u-input v-model="formData.settlementBankBranchName" placeholder="请输入银行开户行" />
|
||||
</up-form-item>
|
||||
<up-form-item label="银行开户名" prop="settlementBankAccountName">
|
||||
<u-input v-model="formData.settlementBankAccountName" placeholder="请输入银行开户名" />
|
||||
</up-form-item>
|
||||
<up-form-item label="银行账号" prop="settlementBankAccountNum">
|
||||
<u-input v-model="formData.settlementBankAccountNum" placeholder="请输入银行账号" />
|
||||
</up-form-item>
|
||||
</up-form>
|
||||
<u-button :customStyle="{ background: lightColor, color: '#fff' }" @click="submitForm">提交</u-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tips">
|
||||
<view>您提交的信息正在审核</view>
|
||||
<view>提交认证申请后，工作人员将在三个工作日进行核对完成审核</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { applyDistribution } from "@/api/goods";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ruleForm: {
|
||||
name: "",
|
||||
idNumber: "",
|
||||
settlementBankBranchName: "", // 银行开户行
|
||||
settlementBankAccountName: "", //银行开户名
|
||||
settlementBankAccountNum: "", //银行账号
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入姓名",
|
||||
// 可以单个或者同时写两个触发验证方式
|
||||
trigger: "blur",
|
||||
},
|
||||
{
|
||||
// 自定义验证函数，见上说明
|
||||
validator: (rule, value, callback) => {
|
||||
// 上面有说，返回true表示校验通过，返回false表示不通过
|
||||
// this.$u.test.mobile()就是返回true或者false的
|
||||
return this.$u.test.chinese(value);
|
||||
},
|
||||
message: "姓名输入不正确",
|
||||
// 触发器可以同时用blur和change
|
||||
trigger: ["change", "blur"],
|
||||
},
|
||||
],
|
||||
// 银行开户行
|
||||
settlementBankBranchName: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入银行开户行",
|
||||
// 可以单个或者同时写两个触发验证方式
|
||||
trigger: "blur",
|
||||
},
|
||||
], //银行开户名
|
||||
settlementBankAccountName: [
|
||||
{
|
||||
required: true,
|
||||
message: "银行开户名",
|
||||
// 可以单个或者同时写两个触发验证方式
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
//银行账号
|
||||
settlementBankAccountNum: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入银行账号",
|
||||
// 可以单个或者同时写两个触发验证方式
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
idNumber: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入身份证",
|
||||
// 可以单个或者同时写两个触发验证方式
|
||||
trigger: "blur",
|
||||
},
|
||||
{
|
||||
// 自定义验证函数，见上说明
|
||||
validator: (rule, value, callback) => {
|
||||
// 上面有说，返回true表示校验通过，返回false表示不通过
|
||||
// this.$u.test.mobile()就是返回true或者false的
|
||||
return this.$u.test.idCard(value);
|
||||
},
|
||||
message: "身份证号码不正确",
|
||||
// 触发器可以同时用blur和change
|
||||
trigger: ["change", "blur"],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
this.$refs.uForm.validate((valid) => {
|
||||
if (valid) {
|
||||
applyDistribution(this.ruleForm).then((res) => {
|
||||
if (res.data.success) {
|
||||
uni.showToast({
|
||||
title: "认证提交成功!",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 500);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "请填写有效信息",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
});
|
||||
<script setup lang="ts">
|
||||
import { reactive, computed, ref, getCurrentInstance } from 'vue'
|
||||
import { onReady } from '@dcloudio/uni-app'
|
||||
import { useStore } from '@/store'
|
||||
import { applyDistribution } from '@/api/goods'
|
||||
|
||||
const store = useStore()
|
||||
const { proxy } = getCurrentInstance()!
|
||||
|
||||
const lightColor = computed(() => store.getters.lightColor)
|
||||
const uFormRef = ref<any>(null)
|
||||
|
||||
const formData = reactive({
|
||||
name: '',
|
||||
idNumber: '',
|
||||
settlementBankBranchName: '',
|
||||
settlementBankAccountName: '',
|
||||
settlementBankAccountNum: '',
|
||||
})
|
||||
|
||||
const rules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入姓名', trigger: 'blur' },
|
||||
{
|
||||
validator: (_rule: unknown, value: string) => proxy.$u.test.chinese(value),
|
||||
message: '姓名输入不正确',
|
||||
trigger: ['change', 'blur'],
|
||||
},
|
||||
},
|
||||
onReady() {
|
||||
this.$refs.uForm.setRules(this.rules);
|
||||
},
|
||||
};
|
||||
],
|
||||
settlementBankBranchName: [{ required: true, message: '请输入银行开户行', trigger: 'blur' }],
|
||||
settlementBankAccountName: [{ required: true, message: '银行开户名', trigger: 'blur' }],
|
||||
settlementBankAccountNum: [{ required: true, message: '请输入银行账号', trigger: 'blur' }],
|
||||
idNumber: [
|
||||
{ required: true, message: '请输入身份证', trigger: 'blur' },
|
||||
{
|
||||
validator: (_rule: unknown, value: string) => proxy.$u.test.idCard(value),
|
||||
message: '身份证号码不正确',
|
||||
trigger: ['change', 'blur'],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
onReady(() => {
|
||||
uFormRef.value?.setRules(rules)
|
||||
})
|
||||
|
||||
function submitForm() {
|
||||
uFormRef.value?.validate().then(() => {
|
||||
applyDistribution(formData).then((res) => {
|
||||
if (res.data.success) {
|
||||
uni.showToast({ title: '认证提交成功!', duration: 2000, icon: 'none' })
|
||||
setTimeout(() => uni.navigateBack(), 500)
|
||||
} else {
|
||||
uni.showToast({ title: res.data.message, duration: 2000, icon: 'none' })
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
uni.showToast({ title: '请填写有效信息', duration: 2000, icon: 'none' })
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrapper {
|
||||
padding: 32rpx;
|
||||
|
||||
@@ -1,30 +1,38 @@
|
||||
<template>
|
||||
<view class="log-list">
|
||||
<!-- 提现记录 -->
|
||||
<view class="log-way" v-if="cashLogData.length != 0" v-for="(item, index) in cashLogData" :key="index">
|
||||
<view
|
||||
class="log-way"
|
||||
v-if="withdrawLogList.length != 0"
|
||||
v-for="(item, index) in withdrawLogList"
|
||||
:key="'cash-' + index"
|
||||
>
|
||||
<view class="log-item">
|
||||
<view class="log-item-view">
|
||||
<view class="title">{{
|
||||
item.distributionCashStatus == "APPLY"
|
||||
? "待处理"
|
||||
: item.distributionCashStatus == "VIA_AUDITING"
|
||||
? "通过"
|
||||
: "拒绝"
|
||||
item.distributionCashStatus == 'APPLY'
|
||||
? '待处理'
|
||||
: item.distributionCashStatus == 'VIA_AUDITING'
|
||||
? '通过'
|
||||
: '拒绝'
|
||||
}}</view>
|
||||
<view class="price">+{{unitPrice(item.price) }}</view>
|
||||
<view class="price">+{{ unitPrice(item.price) }}</view>
|
||||
</view>
|
||||
<view class="log-item-view">
|
||||
<view>{{ item.createTime }}</view>
|
||||
<view></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 分销业绩 -->
|
||||
<view class="log-way" v-if="achievementData.length != 0" v-for="(item, index) in achievementData" :key="index">
|
||||
|
||||
<view
|
||||
class="log-way"
|
||||
v-if="achievementList.length != 0"
|
||||
v-for="(item, index) in achievementList"
|
||||
:key="'ach-' + index"
|
||||
>
|
||||
<view class="log-item">
|
||||
<view class="log-item-view">
|
||||
<view class="title">{{ item.goodsName }}</view>
|
||||
<view class="price">提成金额：+{{unitPrice(item.rebate) }}</view>
|
||||
<view class="price">提成金额：+{{ unitPrice(item.rebate) }}</view>
|
||||
</view>
|
||||
<view class="log-item-view">
|
||||
<view>创建时间：{{ item.createTime }}</view>
|
||||
@@ -38,101 +46,98 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="empty" v-if="empty">
|
||||
<u-loadmore :status="status" :icon-type="iconType" bg-color="#f7f7f7" />
|
||||
|
||||
<view class="empty" v-if="isEmpty">
|
||||
<u-loadmore :status="loadStatus" :icon-type="iconType" bg-color="#f7f7f7" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { cashLog, distributionOrderList } from "@/api/goods";
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
cashLogData: [], //提现记录数据集合
|
||||
achievementData: [], //分销业绩数据合集,
|
||||
status: "loadmore",
|
||||
iconType: "flower",
|
||||
empty: false,
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
|
||||
type: 0,
|
||||
routers: "",
|
||||
achParams: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
};
|
||||
},
|
||||
onLoad (option) {
|
||||
let title;
|
||||
option.type == 0 ? (title = "分销业绩") : (title = "提现记录");
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
|
||||
import { useStore } from '@/store'
|
||||
import { cashLog, distributionOrderList } from '@/api/goods'
|
||||
import { unitPrice } from '@/utils/filters.js'
|
||||
|
||||
uni.setNavigationBarTitle({
|
||||
title: title, //这是修改后的导航栏文字
|
||||
});
|
||||
this.routers = option;
|
||||
this.type = option.type;
|
||||
option.type == 0 ? this.achievement() : this.history();
|
||||
},
|
||||
mounted () { },
|
||||
onReachBottom () {
|
||||
this.status = "loading";
|
||||
this.type == 0 ? this.achParams.pageNumber++ : this.params.pageNumber++;
|
||||
this.type == 0 ? this.achievement() : this.history();
|
||||
},
|
||||
methods: {
|
||||
// 业绩
|
||||
achievement () {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
});
|
||||
distributionOrderList(this.achParams).then((res) => {
|
||||
if (res.data.success && res.data.result.records.length >= 1) {
|
||||
this.achievementData.push(...res.data.result.records);
|
||||
} else {
|
||||
this.status = "nomore";
|
||||
this.empty = true;
|
||||
}
|
||||
if (this.$store.state.isShowToast){ uni.hideLoading() };
|
||||
});
|
||||
},
|
||||
// 初始化提现历史
|
||||
history () {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
});
|
||||
cashLog(this.params).then((res) => {
|
||||
if (res.data.success && res.data.result.records.length >= 1) {
|
||||
this.cashLogData.push(...res.data.result.records);
|
||||
} else {
|
||||
this.status = "nomore";
|
||||
this.empty = true;
|
||||
}
|
||||
if (this.$store.state.isShowToast){ uni.hideLoading() };
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
const store = useStore()
|
||||
|
||||
const withdrawLogList = ref<any[]>([])
|
||||
const achievementList = ref<any[]>([])
|
||||
const loadStatus = ref('loadmore')
|
||||
const iconType = ref('flower')
|
||||
const isEmpty = ref(false)
|
||||
const listType = ref(0)
|
||||
const routeQuery = ref<Record<string, string>>({})
|
||||
|
||||
const withdrawParams = ref({ pageNumber: 1, pageSize: 10 })
|
||||
const achievementParams = ref({ pageNumber: 1, pageSize: 10 })
|
||||
|
||||
onLoad((option) => {
|
||||
const type = Number(option.type ?? 0)
|
||||
listType.value = type
|
||||
routeQuery.value = option || {}
|
||||
uni.setNavigationBarTitle({
|
||||
title: type === 0 ? '分销业绩' : '提现记录',
|
||||
})
|
||||
type === 0 ? fetchAchievementList() : fetchWithdrawLog()
|
||||
})
|
||||
|
||||
onReachBottom(() => {
|
||||
loadStatus.value = 'loading'
|
||||
if (listType.value === 0) {
|
||||
achievementParams.value.pageNumber++
|
||||
fetchAchievementList()
|
||||
} else {
|
||||
withdrawParams.value.pageNumber++
|
||||
fetchWithdrawLog()
|
||||
}
|
||||
})
|
||||
|
||||
function hideLoadingIfNeeded() {
|
||||
if (store.state.isShowToast) uni.hideLoading()
|
||||
}
|
||||
|
||||
function fetchAchievementList() {
|
||||
uni.showLoading({ title: '加载中' })
|
||||
distributionOrderList(achievementParams.value).then((res) => {
|
||||
if (res.data.success && res.data.result.records.length >= 1) {
|
||||
achievementList.value.push(...res.data.result.records)
|
||||
} else {
|
||||
loadStatus.value = 'nomore'
|
||||
isEmpty.value = true
|
||||
}
|
||||
hideLoadingIfNeeded()
|
||||
})
|
||||
}
|
||||
|
||||
function fetchWithdrawLog() {
|
||||
uni.showLoading({ title: '加载中' })
|
||||
cashLog(withdrawParams.value).then((res) => {
|
||||
if (res.data.success && res.data.result.records.length >= 1) {
|
||||
withdrawLogList.value.push(...res.data.result.records)
|
||||
} else {
|
||||
loadStatus.value = 'nomore'
|
||||
isEmpty.value = true
|
||||
}
|
||||
hideLoadingIfNeeded()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.empty {
|
||||
margin: 40rpx 0;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: $main-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.log-list {
|
||||
padding: 0 8rpx;
|
||||
overflow: hidden;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.log-way {
|
||||
margin: 10rpx 0;
|
||||
overflow: hidden;
|
||||
@@ -140,26 +145,17 @@ export default {
|
||||
border-radius: 10rpx;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.log-item-view {
|
||||
padding: 8rpx 32rpx;
|
||||
display: flex;
|
||||
font-size: 13px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.log-item-footer {
|
||||
padding: 8rpx 32rpx;
|
||||
display: flex;
|
||||
font-size: 13px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.log-item-footer,
|
||||
.log-item-footers {
|
||||
padding: 8rpx 32rpx;
|
||||
display: flex;
|
||||
|
||||
@@ -1,18 +1,15 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
<view class="nav-list">
|
||||
<view class="total">可提现金额</view>
|
||||
<view class="price">{{unitPrice(distributionData.canRebate) }}</view>
|
||||
<view class="frozen"
|
||||
>冻结金额{{unitPrice(distributionData.commissionFrozen) }}</view
|
||||
>
|
||||
<view class="price">{{ unitPrice(distributionData.canRebate) }}</view>
|
||||
<view class="frozen">冻结金额{{ unitPrice(distributionData.commissionFrozen) }}</view>
|
||||
</view>
|
||||
<view class="nav">
|
||||
<view class="nav-item">
|
||||
<u-icon
|
||||
size="50"
|
||||
@click="handleClick('/pages/mine/distribution/list?id='+distributionData.id+'&name='+distributionData.memberName)"
|
||||
@click="navigateTo(`/pages/mine/distribution/list?id=${distributionData.id}&name=${distributionData.memberName}`)"
|
||||
color="#ff6b35"
|
||||
name="bag-fill"
|
||||
></u-icon>
|
||||
@@ -20,72 +17,54 @@
|
||||
</view>
|
||||
<view
|
||||
class="nav-item"
|
||||
@click="handleClick(`/pages/mine/distribution/history?type=0&id=${distributionData.id}&name=${distributionData.memberName}`)"
|
||||
@click="navigateTo(`/pages/mine/distribution/history?type=0&id=${distributionData.id}&name=${distributionData.memberName}`)"
|
||||
>
|
||||
<u-icon size="50" color="#ff6b35" name="order"></u-icon>
|
||||
<view>分销业绩</view>
|
||||
</view>
|
||||
<view
|
||||
class="nav-item"
|
||||
@click="handleClick('/pages/mine/distribution/history?type=1')"
|
||||
>
|
||||
<view class="nav-item" @click="navigateTo('/pages/mine/distribution/history?type=1')">
|
||||
<u-icon size="50" color="#ff6b35" name="red-packet-fill"></u-icon>
|
||||
<view>提现记录</view>
|
||||
</view>
|
||||
<view
|
||||
class="nav-item"
|
||||
@click="handleClick('/pages/mine/distribution/withdrawal')"
|
||||
>
|
||||
<view class="nav-item" @click="navigateTo('/pages/mine/distribution/withdrawal')">
|
||||
<u-icon size="50" color="#ffc71c" name="rmb-circle-fill"></u-icon>
|
||||
<view>提现</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import { useStore } from '@/store'
|
||||
import { distribution } from '@/api/goods'
|
||||
import { unitPrice } from '@/utils/filters.js'
|
||||
|
||||
import { distribution } from "@/api/goods";
|
||||
export default {
|
||||
const store = useStore()
|
||||
const distributionData = ref<Record<string, any>>({})
|
||||
|
||||
data() {
|
||||
return {
|
||||
distributionData: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClick(url) {
|
||||
uni.navigateTo({
|
||||
url,
|
||||
});
|
||||
},
|
||||
queryGoods(src) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/mine/distribution/${src}`,
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 初始化推广商品
|
||||
*/
|
||||
init() {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
});
|
||||
distribution().then((res) => {
|
||||
if (res.data.result) {
|
||||
this.distributionData = res.data.result;
|
||||
}
|
||||
if (this.$store.state.isShowToast){ uni.hideLoading() };
|
||||
});
|
||||
},
|
||||
},
|
||||
onShow() {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
onShow(() => {
|
||||
fetchDistributionInfo()
|
||||
})
|
||||
|
||||
function hideLoadingIfNeeded() {
|
||||
if (store.state.isShowToast) uni.hideLoading()
|
||||
}
|
||||
|
||||
function navigateTo(url: string) {
|
||||
uni.navigateTo({ url })
|
||||
}
|
||||
|
||||
function fetchDistributionInfo() {
|
||||
uni.showLoading({ title: '加载中' })
|
||||
distribution().then((res) => {
|
||||
if (res.data.result) {
|
||||
distributionData.value = res.data.result
|
||||
}
|
||||
hideLoadingIfNeeded()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -124,6 +103,5 @@ export default {
|
||||
justify-content: center;
|
||||
gap: 20rpx;
|
||||
width: 33%;
|
||||
// color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,104 +1,127 @@
|
||||
<template>
|
||||
<view class="wrapper">
|
||||
<view class="wrapper" :style="themeStyle">
|
||||
<u-tabs
|
||||
:list="list"
|
||||
:list="stepList"
|
||||
:scrollable="false"
|
||||
v-model:current="current"
|
||||
v-model:current="currentStep"
|
||||
:lineColor="lightColor"
|
||||
:activeStyle="{ color: lightColor }"
|
||||
></u-tabs>
|
||||
|
||||
|
||||
|
||||
<!-- 推广人资料 -->
|
||||
<view class="message">
|
||||
<u-form :model="ruleForm" label-width="250rpx" ref="uForm">
|
||||
<u-form-item label="会员昵称" prop="name">
|
||||
<u-input v-model="ruleForm.name" />
|
||||
</u-form-item>
|
||||
<u-form-item label="账户类型" prop="name"> </u-form-item>
|
||||
<u-form-item
|
||||
label="收款人姓名"
|
||||
placeholder="请输入收款人姓名"
|
||||
prop="name"
|
||||
>
|
||||
<u-input v-model="ruleForm.name" />
|
||||
</u-form-item>
|
||||
<u-form-item
|
||||
label="收款账号"
|
||||
placeholder="请输入收款人账号"
|
||||
prop="name"
|
||||
>
|
||||
<u-input v-model="ruleForm.name" />
|
||||
</u-form-item>
|
||||
<u-form-item
|
||||
label="银行名称"
|
||||
placeholder="请输入开户银行支行名称"
|
||||
prop="name"
|
||||
>
|
||||
<u-input v-model="ruleForm.name" />
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
<u-button :customStyle="{'background':$lightColor,'color':'#fff' }" @click="submit">提交</u-button>
|
||||
<view class="feedBack-box">
|
||||
<up-form
|
||||
:model="formData"
|
||||
label-position="top"
|
||||
ref="uFormRef"
|
||||
>
|
||||
<up-form-item label="会员昵称" prop="name">
|
||||
<u-input
|
||||
border="none"
|
||||
class="field-input"
|
||||
v-model="formData.name"
|
||||
:custom-style="fieldInputStyle"
|
||||
/>
|
||||
</up-form-item>
|
||||
<up-form-item label="账户类型" prop="name"></up-form-item>
|
||||
<up-form-item label="收款人姓名" prop="name">
|
||||
<u-input
|
||||
border="none"
|
||||
class="field-input"
|
||||
v-model="formData.name"
|
||||
placeholder="请输入收款人姓名"
|
||||
:custom-style="fieldInputStyle"
|
||||
/>
|
||||
</up-form-item>
|
||||
<up-form-item label="收款账号" prop="name">
|
||||
<u-input
|
||||
border="none"
|
||||
class="field-input"
|
||||
v-model="formData.name"
|
||||
placeholder="请输入收款人账号"
|
||||
:custom-style="fieldInputStyle"
|
||||
/>
|
||||
</up-form-item>
|
||||
<up-form-item label="银行名称" prop="name">
|
||||
<u-input
|
||||
border="none"
|
||||
class="field-input"
|
||||
v-model="formData.name"
|
||||
placeholder="请输入开户银行支行名称"
|
||||
:custom-style="fieldInputStyle"
|
||||
/>
|
||||
</up-form-item>
|
||||
</up-form>
|
||||
</view>
|
||||
|
||||
<view class="submit" @click="submitForm">提交</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
|
||||
onReady() {
|
||||
this.$refs.uForm.setRules(this.rules);
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
current:0,
|
||||
lightColor: this.$lightColor,
|
||||
list: [
|
||||
{
|
||||
name: "推广人资料",
|
||||
},
|
||||
{
|
||||
name: "平台审核",
|
||||
},
|
||||
{
|
||||
name: "完成",
|
||||
},
|
||||
],
|
||||
ruleForm: {
|
||||
name: "",
|
||||
radio: "",
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入姓名",
|
||||
// 可以单个或者同时写两个触发验证方式
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed } from 'vue'
|
||||
import { onReady } from '@dcloudio/uni-app'
|
||||
import { useStore } from '@/store'
|
||||
import { getThemeStyle } from '@/utils/theme'
|
||||
import { fieldInputStyle } from '@/utils/form-style.js'
|
||||
|
||||
const store = useStore()
|
||||
|
||||
const themeStyle = computed(() => getThemeStyle(store.state.theme))
|
||||
const lightColor = computed(() => store.getters.lightColor)
|
||||
const currentStep = ref(0)
|
||||
const uFormRef = ref<any>(null)
|
||||
|
||||
const stepList = [
|
||||
{ name: '推广人资料' },
|
||||
{ name: '平台审核' },
|
||||
{ name: '完成' },
|
||||
]
|
||||
|
||||
const formData = reactive({
|
||||
name: '',
|
||||
radio: '',
|
||||
})
|
||||
|
||||
const rules = {
|
||||
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
|
||||
}
|
||||
|
||||
onReady(() => {
|
||||
uFormRef.value?.setRules(rules)
|
||||
})
|
||||
|
||||
function submitForm() {
|
||||
uFormRef.value?.validate().catch(() => {
|
||||
uni.showToast({ title: '请填写有效信息', icon: 'none' })
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.menu {
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background: $main-color;
|
||||
display: flex;
|
||||
> .menu-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
color: $light-color;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
color: #fff !important;
|
||||
}
|
||||
.message {
|
||||
padding: 0 32rpx;
|
||||
|
||||
<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;
|
||||
@include seller-entry-form;
|
||||
}
|
||||
|
||||
.feedBack-box {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 32rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.submit {
|
||||
@include seller-entry-submit;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -58,44 +58,44 @@
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<view class="nav">
|
||||
<view class="nav-item" @click="handleMyGoods(true)" :class="{ checked: params.checked }">已选择</view>
|
||||
<view class="nav-item" @click="handleMyGoods(false)" :class="{ checked: !params.checked }">未选择</view>
|
||||
<view class="nav-item" @click="toggleGoodsTab(true)" :class="{ checked: queryParams.checked }">已选择</view>
|
||||
<view class="nav-item" @click="toggleGoodsTab(false)" :class="{ checked: !queryParams.checked }">未选择</view>
|
||||
|
||||
<!-- <view class="nav-item" @click="popup = !popup">筛选</view> -->
|
||||
</view>
|
||||
<!-- 商品列表 -->
|
||||
|
||||
<view class="goods-list">
|
||||
<scroll-view class="body-view" scroll-y @scrolltolower="renderDate">
|
||||
<scroll-view class="body-view" scroll-y @scrolltolower="loadMore">
|
||||
<block v-for="(item, index) in goodsList" :key="item.id">
|
||||
<u-swipe-action v-if="params.checked" class="distribution-swipe">
|
||||
<u-swipe-action v-if="queryParams.checked" class="distribution-swipe">
|
||||
<u-swipe-action-item
|
||||
:show="item.___selected"
|
||||
@open="openAction(item)"
|
||||
@open="openSwipeAction(item)"
|
||||
:name="index"
|
||||
:options="options"
|
||||
@click="changeActionTab(item)"
|
||||
:options="swipeOptions"
|
||||
@click="confirmUnbindPrompt(item)"
|
||||
>
|
||||
<view class="goods-item">
|
||||
<view class="goods-item-img" @click="handleNavgationGoods(item)">
|
||||
<view class="goods-item-img" @click="navigateToGoods(item)">
|
||||
<u-image width="176rpx" height="176rpx" :src="item.thumbnail"></u-image>
|
||||
</view>
|
||||
<view class="goods-item-desc">
|
||||
<view class="-item-title" @click="handleNavgationGoods(item)">
|
||||
<view class="-item-title" @click="navigateToGoods(item)">
|
||||
{{ item.goodsName }}
|
||||
</view>
|
||||
<view class="-item-price" @click="handleNavgationGoods(item)">
|
||||
<view class="-item-price" @click="navigateToGoods(item)">
|
||||
佣金:
|
||||
<span> ￥{{ unitPrice(item.commission) }}</span>
|
||||
</view>
|
||||
<view class="-item-bottom">
|
||||
<view class="-item-bootom-money" @click="handleNavgationGoods(item)">
|
||||
<view class="-item-bootom-money" @click="navigateToGoods(item)">
|
||||
<view class="-item-yj">
|
||||
<span>￥{{ unitPrice(item.price) }}</span>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="click" @click="handleLink(item)">分销商品</view>
|
||||
<view class="click" @click="shareDistributionGoods(item)">分销商品</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -104,25 +104,25 @@
|
||||
</u-swipe-action>
|
||||
|
||||
<view v-else class="goods-item">
|
||||
<view class="goods-item-img" @click="handleNavgationGoods(item)">
|
||||
<view class="goods-item-img" @click="navigateToGoods(item)">
|
||||
<u-image width="176rpx" height="176rpx" :src="item.thumbnail"></u-image>
|
||||
</view>
|
||||
<view class="goods-item-desc">
|
||||
<view class="-item-title" @click="handleNavgationGoods(item)">
|
||||
<view class="-item-title" @click="navigateToGoods(item)">
|
||||
{{ item.goodsName }}
|
||||
</view>
|
||||
<view class="-item-price" @click="handleNavgationGoods(item)">
|
||||
<view class="-item-price" @click="navigateToGoods(item)">
|
||||
佣金:
|
||||
<span> ￥{{ unitPrice(item.commission) }}</span>
|
||||
</view>
|
||||
<view class="-item-bottom">
|
||||
<view class="-item-bootom-money" @click="handleNavgationGoods(item)">
|
||||
<view class="-item-bootom-money" @click="navigateToGoods(item)">
|
||||
<view class="-item-yj">
|
||||
<span>￥{{ unitPrice(item.price) }}</span>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="click" @click="handleClickGoods(item)">立即选取</view>
|
||||
<view class="click" @click="selectGoods(item)">立即选取</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -136,210 +136,164 @@
|
||||
</view>
|
||||
</view>
|
||||
<canvas class="canvas-hide" canvas-id="qrcode" />
|
||||
<drawCanvas ref="drawCanvas" v-if="showFlag" :res="res" />
|
||||
<u-modal v-model:show="deleteShow" :confirm-style="{'color':lightColor}" @confirm="delectConfirm" show-cancel-button :content="deleteContent" :async-close="true"></u-modal>
|
||||
<drawCanvas ref="drawCanvasRef" v-if="showPoster" :res="posterData" />
|
||||
<u-modal
|
||||
v-model:show="showUnbindModal"
|
||||
:confirm-style="{ color: lightColor }"
|
||||
@confirm="confirmUnbind"
|
||||
show-cancel-button
|
||||
:content="unbindModalContent"
|
||||
:async-close="true"
|
||||
></u-modal>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app'
|
||||
import { useStore } from '@/store'
|
||||
import {
|
||||
distributionGoods,
|
||||
checkedDistributionGoods,
|
||||
getMpCode,
|
||||
} from "@/api/goods";
|
||||
} from '@/api/goods'
|
||||
import drawCanvas from '@/components/m-canvas'
|
||||
import { unitPrice } from '@/utils/filters.js'
|
||||
|
||||
import drawCanvas from "@/components/m-canvas";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
lightColor: this.$lightColor,
|
||||
deleteContent: "解绑该商品？", //删除显示的信息
|
||||
// 商品栏右侧滑动按钮
|
||||
options: [
|
||||
{
|
||||
text: "解绑",
|
||||
style: {
|
||||
backgroundColor: this.$lightColor, //高亮颜色
|
||||
},
|
||||
},
|
||||
],
|
||||
showFlag: false, //分销分享开关
|
||||
empty: false,
|
||||
popup: false, //弹出层开关
|
||||
active_color: this.$mainColor,
|
||||
current: 0,
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
checked: true,
|
||||
},
|
||||
goodsList: [],
|
||||
|
||||
// 分销分享 实例
|
||||
res: {
|
||||
container: {
|
||||
width: 600,
|
||||
height: 960,
|
||||
background: "#fff",
|
||||
title: "分享背景",
|
||||
},
|
||||
// 分销分享
|
||||
bottom: {
|
||||
img: "",
|
||||
code: "",
|
||||
price: 0,
|
||||
},
|
||||
},
|
||||
|
||||
routers: "",
|
||||
deleteShow: false, //删除模态框
|
||||
goodsVal: false, //分销商铺信息
|
||||
};
|
||||
const store = useStore()
|
||||
const lightColor = computed(() => store.getters.lightColor)
|
||||
const swipeOptions = computed(() => [
|
||||
{
|
||||
text: '解绑',
|
||||
style: { backgroundColor: lightColor.value },
|
||||
},
|
||||
components: {
|
||||
drawCanvas,
|
||||
])
|
||||
|
||||
const unbindModalContent = '解绑该商品？'
|
||||
const showPoster = ref(false)
|
||||
const showUnbindModal = ref(false)
|
||||
const routeQuery = ref<Record<string, string>>({})
|
||||
const selectedGoods = ref<any>(null)
|
||||
const drawCanvasRef = ref<any>(null)
|
||||
|
||||
const queryParams = ref({
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
checked: true,
|
||||
})
|
||||
const goodsList = ref<any[]>([])
|
||||
|
||||
const posterData = ref({
|
||||
container: {
|
||||
width: 600,
|
||||
height: 960,
|
||||
background: '#fff',
|
||||
title: '分享背景',
|
||||
},
|
||||
onLoad(options) {
|
||||
this.routers = options;
|
||||
bottom: {
|
||||
img: '',
|
||||
code: '',
|
||||
price: 0,
|
||||
desc: '',
|
||||
},
|
||||
watch: {},
|
||||
onShow() {
|
||||
this.goodsList = [];
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 滑动删除
|
||||
*/
|
||||
changeActionTab(val) {
|
||||
this.deleteShow = true;
|
||||
this.goodsVal = val;
|
||||
},
|
||||
})
|
||||
|
||||
/**
|
||||
* 点击解绑商品
|
||||
*/
|
||||
delectConfirm() {
|
||||
checkedDistributionGoods({ id: this.goodsVal.id, checked: false }).then(
|
||||
(res) => {
|
||||
if (res.data.success) {
|
||||
uni.showToast({
|
||||
title: "此商品解绑成功",
|
||||
duration: 2000,
|
||||
});
|
||||
this.deleteShow = false;
|
||||
this.goodsList = [];
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
onLoad((options) => {
|
||||
routeQuery.value = options || {}
|
||||
})
|
||||
|
||||
/**
|
||||
* 左滑打开删除
|
||||
*/
|
||||
openAction(val) {
|
||||
this.goodsList.forEach((item) => {
|
||||
item["___selected"] = false;
|
||||
});
|
||||
val["___selected"] = true;
|
||||
},
|
||||
onShow(() => {
|
||||
goodsList.value = []
|
||||
queryParams.value.pageNumber = 1
|
||||
fetchGoodsList()
|
||||
})
|
||||
|
||||
/**
|
||||
* 查看图片
|
||||
*/
|
||||
handleNavgationGoods(val) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/goods?id=${val.skuId}&goodsId=${val.goodsId}`,
|
||||
});
|
||||
},
|
||||
function confirmUnbindPrompt(item: any) {
|
||||
showUnbindModal.value = true
|
||||
selectedGoods.value = item
|
||||
}
|
||||
|
||||
async handleLink(goods) {
|
||||
uni.showToast({
|
||||
title: "请请按住保存图片",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
let page = `pages/product/goods`;
|
||||
let scene = `${goods.skuId},${goods.goodsId},${this.routers.id}`;
|
||||
let result = await getMpCode({ page, scene });
|
||||
if (result.data.success) {
|
||||
let callback = result.data.result;
|
||||
this.res.container.title = `${goods.goodsName}`;
|
||||
this.res.bottom.code = `data:image/png;base64,${callback}`;
|
||||
this.res.bottom.price = this.unitPrice(
|
||||
goods.price,
|
||||
"￥"
|
||||
);
|
||||
this.res.bottom.desc = `${goods.goodsName}`;
|
||||
this.res.bottom.img = `${goods.thumbnail}`;
|
||||
function confirmUnbind() {
|
||||
checkedDistributionGoods({ id: selectedGoods.value.id, checked: false }).then((res) => {
|
||||
if (res.data.success) {
|
||||
uni.showToast({ title: '此商品解绑成功', duration: 2000 })
|
||||
showUnbindModal.value = false
|
||||
goodsList.value = []
|
||||
queryParams.value.pageNumber = 1
|
||||
fetchGoodsList()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (this.showFlag) {
|
||||
this.$refs.drawCanvas.init();
|
||||
}
|
||||
this.showFlag = true;
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: `制作二维码失败！请稍后重试`,
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
},
|
||||
function openSwipeAction(item: any) {
|
||||
goodsList.value.forEach((row) => {
|
||||
row.___selected = false
|
||||
})
|
||||
item.___selected = true
|
||||
}
|
||||
|
||||
change(index) {
|
||||
this.current = index;
|
||||
},
|
||||
// 点击我的选品库
|
||||
handleMyGoods(flag) {
|
||||
this.goodsList = [];
|
||||
this.params.checked = flag;
|
||||
this.init();
|
||||
},
|
||||
function navigateToGoods(item: any) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/goods?id=${item.skuId}&goodsId=${item.goodsId}`,
|
||||
})
|
||||
}
|
||||
|
||||
// 选择商品
|
||||
handleClickGoods(val) {
|
||||
checkedDistributionGoods({ id: val.id, checked: true }).then((res) => {
|
||||
if (res.data.success) {
|
||||
uni.showToast({
|
||||
title: "已添加到我的选品库",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
async function shareDistributionGoods(goods: any) {
|
||||
uni.showToast({ title: '请请按住保存图片', duration: 2000, icon: 'none' })
|
||||
const page = 'pages/product/goods'
|
||||
const scene = `${goods.skuId},${goods.goodsId},${routeQuery.value.id}`
|
||||
const result = await getMpCode({ page, scene })
|
||||
if (result.data.success) {
|
||||
const callback = result.data.result
|
||||
posterData.value.container.title = `${goods.goodsName}`
|
||||
posterData.value.bottom.code = `data:image/png;base64,${callback}`
|
||||
posterData.value.bottom.price = unitPrice(goods.price, '￥')
|
||||
posterData.value.bottom.desc = `${goods.goodsName}`
|
||||
posterData.value.bottom.img = `${goods.thumbnail}`
|
||||
if (showPoster.value) {
|
||||
drawCanvasRef.value?.init()
|
||||
}
|
||||
showPoster.value = true
|
||||
} else {
|
||||
uni.showToast({ title: '制作二维码失败！请稍后重试', duration: 2000, icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
this.goodsList = [];
|
||||
this.init();
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
},
|
||||
function toggleGoodsTab(isSelected: boolean) {
|
||||
goodsList.value = []
|
||||
queryParams.value.checked = isSelected
|
||||
queryParams.value.pageNumber = 1
|
||||
fetchGoodsList()
|
||||
}
|
||||
|
||||
init() {
|
||||
distributionGoods(this.params).then((res) => {
|
||||
if (res.data.success && res.data.result.records.length >= 1) {
|
||||
res.data.result.records.forEach((item) => {
|
||||
item["___selected"] = false;
|
||||
});
|
||||
this.goodsList.push(...res.data.result.records);
|
||||
}
|
||||
if (this.goodsList.length === 0) {
|
||||
this.empty = true;
|
||||
}
|
||||
});
|
||||
},
|
||||
function selectGoods(item: any) {
|
||||
checkedDistributionGoods({ id: item.id, checked: true }).then((res) => {
|
||||
if (res.data.success) {
|
||||
uni.showToast({ title: '已添加到我的选品库', duration: 2000, icon: 'none' })
|
||||
setTimeout(() => {
|
||||
goodsList.value = []
|
||||
queryParams.value.pageNumber = 1
|
||||
fetchGoodsList()
|
||||
}, 500)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 底部加载数据
|
||||
*/
|
||||
renderDate() {
|
||||
function fetchGoodsList() {
|
||||
distributionGoods(queryParams.value).then((res) => {
|
||||
if (res.data.success && res.data.result.records.length >= 1) {
|
||||
res.data.result.records.forEach((item: any) => {
|
||||
item.___selected = false
|
||||
})
|
||||
goodsList.value.push(...res.data.result.records)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.params.pageNumber += 1;
|
||||
this.init();
|
||||
},
|
||||
|
||||
},
|
||||
};
|
||||
function loadMore() {
|
||||
queryParams.value.pageNumber += 1
|
||||
fetchGoodsList()
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
|
||||
@@ -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