huangqizhen
/
gold-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

✨ feat: 添加多语言支持，优化红包功能和表单验证逻辑

zhangrenyuan/feature-20251125114759-多语言
zhangrenyuan 4 weeks ago
parent
c0d662bb3f
commit
b9d3dbca1f
2 changed files with 183 additions and 23 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/components/workspace/CashManagement.vue
  2. 204
      src/views/consume/gold/addCoinConsume.vue

2
src/components/workspace/CashManagement.vue
View File

@ -191,7 +191,7 @@ const getAdminData = async function () {
try {
loading.value = true; // 开始加载
const result = await API({url: '/admin/userinfo', data: {}});
marksFlag.value = result.markets === '总部' || result.markets === '研发部';
marksFlag.value = result.markets === '总部' || result.markets === '研发部' || result.markets === 'Headquarters' || result.markets === 'R&D Department';
console.log("marksFlag", marksFlag.value);
// alert(marksFlag.value)
} catch (error) {

204
src/views/consume/gold/addCoinConsume.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { onMounted, reactive, ref, watch } from "vue";
import { onMounted, reactive, ref, watch, computed } from "vue";
import { ElIcon, ElMessage } from "element-plus";
import moment from "moment";
import request from "@/util/http.js"
@ -64,7 +64,8 @@ const addConsume = ref({
taskGold: null, // 任务金币
remark: "",//备注
adminId: null,// 当前管理员id
adminName: adminData.value.adminName
adminName: adminData.value.adminName,
redMoney: 1 // 是否使用红包：1-使用，0-不使用
})
const Ref = ref(null)
const rules = reactive({
@ -163,11 +164,16 @@ function validateInput() {
// 验证金币总和
const totalAvailableGold = (user.value.nowSumGold)
// 如果未勾选使用红包，则只校验消耗金币数是否超过可用金币数
if (user.value.jwcode && sumGold > totalAvailableGold) {
ElMessage.error(t('elmessage.limitExceeded'));
// 将sumGold设置为null
addConsume.value.sumGold = null;
return false;
// 如果未勾选使用红包，直接提示金币不足
if (addConsume.value.redMoney == 0) {
ElMessage.error(t('elmessage.limitExceeded'));
// 将sumGold设置为null
addConsume.value.sumGold = null;
return false;
}
// 如果勾选使用红包，且不满足原价条件，则会在validateRedLimit中提示
}
return true;
@ -177,15 +183,25 @@ function validateInput() {
function validateRedLimit() {
const sumGold = parseFloat(addConsume.value.sumGold);
const price = Number(addConsume.value.price || 0);
const redMax = Number(user.value.red || 0);
// 优先使用选中的红包总额，如果没有选中（可能是旧逻辑），则使用user.red
const redAmount = (addConsume.value.redMoney == 1 && selectedReds.value.length > 0)
? totalRedAmount.value
: (addConsume.value.redMoney == 1 ? Number(user.value.red || 0) : 0);
if (!isNaN(price) && price > 0) {
if (isNaN(sumGold) || sumGold <= 0) {
// 如果红包足额，允许sumGold为0
const isCovered = redAmount >= price;
if (isNaN(sumGold) || (sumGold <= 0 && !isCovered)) {
ElMessage.error(t('elmessage.noEmptySumGold'));
return false;
}
if (sumGold + redMax < price) {
ElMessage.error(t('elmessage.limitRedAmount'));
return false;
// 如果勾选使用红包，才需要校验消耗金币数 + 红包抵扣金额 ≥ 原价
if (addConsume.value.redMoney == 1) {
if (sumGold + redAmount < price) {
ElMessage.error(t('elmessage.limitRedAmount'));
return false;
}
}
}
return true;
@ -267,7 +283,9 @@ const add = async function () {
permanentGold: addConsume.value.permanentGold * 100,
goodsName: addConsume.value.goodsName.value,
remark: addConsume.value.remark,
adminName: adminData.value.adminName
adminName: adminData.value.adminName,
redMoney: Number(addConsume.value.redMoney), // 1-使用红包，0-不使用红包
redIds: addConsume.value.redMoney === 1 ? selectedReds.value.map(item => item.id) : [] // 选中的红包ID数组
}
})
addDisabled.value = false
@ -319,7 +337,12 @@ function resetForm() {
remark: "",
adminId: adminData.value.id,
adminName: adminData.value.adminName,
redMoney: 1 // 默认使用红包
}
// 清空红包相关数据
selectedReds.value = []
redList.value = []
console.log("重置表单")
@ -485,6 +508,11 @@ const getUser = async function (jwcode) {
}
// 验证输入
validateInput()
// 如果当前开启了红包模式，获取红包列表
if (addConsume.value.redMoney === 1) {
getRedList()
}
} else if (!result.data) {
@ -559,6 +587,110 @@ watch(
);
/*
====================红包逻辑=================================
*/
// 红包列表
const redList = ref([])
// 选中的红包
const selectedReds = ref([])
// 获取红包列表
const getRedList = async () => {
// 必须先有查询到的用户信息
if (!user.value.jwcode) return
try {
const result = await request({
url: "/Temporary/RedList",
data: { jwcode: user.value.jwcode }
})
console.log("红包列表", result)
if (result.code === 200) {
redList.value = result.data || []
}
} catch (error) {
console.error("获取红包列表失败", error)
}
}
// 监听是否使用红包
watch(() => addConsume.value.redMoney, (val) => {
// 切换模式时，清除sumGold的验证状态，防止之前的错误提示残留
if (Ref.value) {
Ref.value.clearValidate('sumGold')
}
if (val === 1) {
// 切换到使用红包
if (!user.value.jwcode) {
ElMessage.warning(t('elmessage.checkUserInfo'))
// 清空列表
redList.value = []
selectedReds.value = []
addConsume.value.sumGold = null
return
}
selectedReds.value = []
getRedList()
// 初始消耗金币等于原价（未选红包时）
if (addConsume.value.price) {
addConsume.value.sumGold = addConsume.value.price
} else {
addConsume.value.sumGold = null
}
} else {
// 不使用红包，清空选中
selectedReds.value = []
// 切换回普通模式，清空消耗金币数
addConsume.value.sumGold = null
}
})
// 计算已选红包总额
const totalRedAmount = computed(() => {
return selectedReds.value.reduce((sum, item) => {
// 根据实际接口返回，使用 discount 字段
const amount = Number(item.discount || 0)
return sum + amount
}, 0)
})
// 监听选中红包变化，计算剩余金币
watch(selectedReds, () => {
if (addConsume.value.redMoney === 1) {
const price = Number(addConsume.value.price || 0)
const redTotal = totalRedAmount.value
// 剩余需要消耗的金币
let remaining = price - redTotal
if (remaining < 0) remaining = 0
addConsume.value.sumGold = remaining
}
}, { deep: true })
// 判断红包选项是否禁用
const isRedOptionDisabled = (item) => {
// 如果已经选中，不禁用（允许取消）
if (selectedReds.value.some(r => r.id === item.id)) return false
const price = Number(addConsume.value.price || 0)
// 如果当前总额已经大于等于原价，则不能再选新的
if (totalRedAmount.value >= price) return true
return false
}
// 监听原价变化（比如换了商品），如果在红包模式下，需要重新计算
watch(() => addConsume.value.price, (newPrice) => {
if (addConsume.value.redMoney === 1) {
const redTotal = totalRedAmount.value
let remaining = (newPrice || 0) - redTotal
if (remaining < 0) remaining = 0
addConsume.value.sumGold = remaining
}
})
/*
====================挂载=================================
*/
// 挂载
@ -575,7 +707,7 @@ onMounted(async function () {
<el-form :model="addConsume" ref="Ref" :rules="rules" style="min-width: 600px;" class="add-form"
label-width="auto" label-position="right">
<el-form-item prop="jwcode" :label="t('common_add.jwcode')" style="margin-top: 50px">
<el-input v-model="addConsume.jwcode" style="width: 200px;" />
<el-input v-model="addConsume.jwcode" style="width: 200px;" @keyup.enter="getUser(addConsume.jwcode)" />
<el-button type="primary" @click="getUser(addConsume.jwcode)" style="margin-left: 20px">
{{ t('common.search') }}
</el-button>
@ -592,9 +724,36 @@ onMounted(async function () {
<el-input v-model="addConsume.price" style="width: 120px" disabled />
</el-form-item>
<el-form-item prop="sumGold" :label="t('common_add.consumeTotalGold')">
<!-- <el-form-item prop="sumGold" :label="t('common_add.consumeTotalGold')">
<el-input v-model="addConsume.sumGold" style="width: 120px"
@blur="validateRedLimit()" />
</el-form-item> -->
<el-form-item prop="sumGold" :label="t('common_add.consumeTotalGold')">
<el-input v-model="addConsume.sumGold" style="width: 120px" @blur="validateRedLimit()" :disabled="addConsume.redMoney === 1" />
<el-radio v-model="addConsume.redMoney" :label="1" style="margin-left: 10px;">使用红包</el-radio>
<el-radio v-model="addConsume.redMoney" :label="0">不使用红包</el-radio>
</el-form-item>
<el-form-item v-if="addConsume.redMoney === 1" label="选择红包">
<el-select
v-model="selectedReds"
multiple
placeholder="请选择红包"
style="width: 200px"
value-key="id"
collapse-tags
>
<el-option
v-for="item in redList"
:key="item.id"
:label="`${item.title} (${item.discount})`"
:value="item"
:disabled="isRedOptionDisabled(item)"
/>
</el-select>
<span style="margin-left: 10px; color: #666;">
已抵扣: {{ totalRedAmount }}
</span>
</el-form-item>
@ -623,10 +782,10 @@ onMounted(async function () {
</el-form-item>
<el-button type="success" @click="resetForm()" style="margin-left: 200px;margin-top:10px">{{ t('common.reset')
}}</el-button>
}}</el-button>
<el-button type="primary" :disabled="addDisabled" @click="addBefore" style="margin-top:10px">{{
t('common.submit')
}}</el-button>
}}</el-button>
</el-form>
</div>
@ -674,7 +833,7 @@ onMounted(async function () {
</el-form-item>
<el-form-item style="margin-top: -23px"> <!-- 负边距减少间距 -->
<p style="font-size: small; color: #b1b1b1">({{ $t('common_add_user.onlyStatisticsDataAfter20250101')
}})
}})
</p>
</el-form-item>
</el-col>
@ -695,7 +854,7 @@ onMounted(async function () {
<!-- 第四行：消费次数 + 所属门店 -->
<el-row>
<el-col :span="9">
<el-form-item label-width="120px" :label="$t('common_add_user.store')">
<el-form-item :label="$t('common_add_user.store')">
<p>{{ user.market }}</p>
</el-form-item>
</el-col>
@ -767,8 +926,8 @@ onMounted(async function () {
</el-dialog>
<el-dialog v-model="ConsumeDialogVisible" :title="$t('common_add.operationConfirm')" :before-close="ConsumeDialogVisiblehandleClose"
:close-on-click-modal="false" width="480px">
<el-dialog v-model="ConsumeDialogVisible" :title="$t('common_add.operationConfirm')"
:before-close="ConsumeDialogVisiblehandleClose" :close-on-click-modal="false" width="480px">
<!-- 内容整体居中且收窄 -->
<div class="confirm-body">
<!-- 用户信息 -->
@ -819,7 +978,8 @@ onMounted(async function () {
<div>
<el-divider border-style="dashed" />
<p>{{ $t('common_add.similarRechargeRecords') }}</p>
· {{ ReadCookiesTime }} {{ $t('common_add.buy') }} 【{{ addConsume.goodsName.value }}】({{ $t('common_add.operator') }}: {{ adminData.adminName }})
· {{ ReadCookiesTime }} {{ $t('common_add.buy') }} 【{{ addConsume.goodsName.value }}】({{
$t('common_add.operator') }}: {{ adminData.adminName }})
</div>
<div style="margin-top: 10px">
<p>{{ $t('common_add.continueOperation') }}</p>
@ -917,4 +1077,4 @@ p {
}
}
}
</style>
</style>
Write Preview
Loading…
Cancel
Save