This commit is contained in:
Eudemon 2025-03-14 19:20:41 +08:00
parent f2ef51b939
commit 5b4701c0f9
2 changed files with 237 additions and 269 deletions

View File

@ -1,128 +1,77 @@
<template> <template>
<mobile-sub-layout <mobile-sub-layout :title="$t('account.header.feedbackTitle')" :lineHeight="4">
:title="$t('account.header.feedbackTitle')" <view class="feed-back-body">
:lineHeight="4" <view class="feed-back-content"
> :style="{ backgroundColor: themeStore.theme.account.feedBack.lightBgColor }">
<view class="feed-back-body"> <view class="feed-back-content-item" :style="{ color: themeStore.theme.account.feedBack.text.lable }">
<view <view class="feed-back-content-item-left">{{ $t("account.feedBack.label.yourId") }}:</view>
class="feed-back-content" <view class="feed-back-content-item-right">{{ params.userId }}</view>
:style="{ backgroundColor: themeStore.theme.account.feedBack.lightBgColor }" </view>
> <view class="feed-back-content-item" :style="{ color: themeStore.theme.account.feedBack.text.lable }">
<view <view class="feed-back-content-item-left">{{ $t("account.feedBack.label.phoneNumber") }}:</view>
class="feed-back-content-item" <view class="feed-back-content-item-right" v-if="!isShowInput">{{ appStore.phoneNumberPrefix }}
:style="{ color: themeStore.theme.account.feedBack.text.lable }" {{ params.phone.replace(appStore.phoneNumberPrefix.replace('+', ''), '') }}
> </view>
<view class="feed-back-content-item-left" <template v-else>
>{{ $t("account.feedBack.label.yourId") }}:</view <view style="width: 70rpx; margin-left: 24rpx">
> {{ appStore.phoneNumberPrefix }}
<view class="feed-back-content-item-right">{{ params.userId }}</view> </view>
</view> <input class="feed-back-content-item-input" :style="{
<view color: themeStore.theme.account.feedBack.text.inputColor,
class="feed-back-content-item" backgroundColor: themeStore.theme.account.feedBack.placeHolderBgColor
:style="{ color: themeStore.theme.account.feedBack.text.lable }" }" v-model="params.phone" :placeholder-style="JSON.stringify({ color: themeStore.theme.account.feedBack.text.placeHolderColor })
> " :placeholder="$t('account.feedBack.label.phonePlaceholder')" />
<view class="feed-back-content-item-left" </template>
>{{ $t("account.feedBack.label.phoneNumber") }}:</view </view>
> <view class="feed-back-content-item" style="margin-top: 10rpx">
<view class="feed-back-content-item-right" v-if="!isShowInput" <view class="feed-back-content-item-left"
>{{ appStore.phoneNumberPrefix }} :style="{ color: themeStore.theme.account.feedBack.text.lable }">{{
{{ params.phone.replace(appStore.phoneNumberPrefix.replace('+', ''), '') }} $t("account.feedBack.label.email") }}:</view>
</view> <input class="feed-back-content-item-input" :style="{
<template v-else> marginLeft: '24rpx',
<view style="width: 70rpx; margin-left: 24rpx">{{ color: themeStore.theme.account.feedBack.text.inputColor,
appStore.phoneNumberPrefix backgroundColor: themeStore.theme.account.feedBack.placeHolderBgColor
}}</view> }" v-model="params.email" :placeholder-style="JSON.stringify({ color: themeStore.theme.account.feedBack.text.placeHolderColor })
<input " :placeholder="$t('account.feedBack.label.emailPlaceholder')" />
class="feed-back-content-item-input" </view>
:style="{ <view class="feed-back-content-item-scenes"
color: themeStore.theme.account.feedBack.text.inputColor, :style="{ color: themeStore.theme.account.feedBack.text.lable }">
backgroundColor: themeStore.theme.account.feedBack.placeHolderBgColor }" <view class="feed-back-content-item-scenes-list">
v-model="params.phone" <view class="feed-back-content-item-scenes-list-item" v-for="(item, index) in scenes"
:placeholder-style=" :key="index" :style="{
JSON.stringify({ color: themeStore.theme.account.feedBack.text.placeHolderColor }) color:
" index == checkScene
:placeholder="$t('account.feedBack.label.phonePlaceholder')" ? themeStore.theme.account.feedBack.text.scenesItemActiveColor
/></template> : themeStore.theme.account.feedBack.text.scenesItemColor,
</view> backgroundColor:
<view class="feed-back-content-item" style="margin-top: 10rpx"> index == checkScene
<view ? themeStore.theme.account.feedBack.scenesItemActiveBgColor
class="feed-back-content-item-left" : themeStore.theme.account.feedBack.scenesItemBgColor,
:style="{ color: themeStore.theme.account.feedBack.text.lable }" }" @click="checkSceneClick(index)">
>{{ $t("account.feedBack.label.email") }}:</view {{ item }}
> </view>
<input </view>
class="feed-back-content-item-input" </view>
:style="{ <view class="feed-back-content-item-textarea-label"
marginLeft: '24rpx', :style="{ color: themeStore.theme.account.feedBack.text.lable }">{{
color: themeStore.theme.account.feedBack.text.inputColor, $t("account.feedBack.label.suggestion") }}:</view>
backgroundColor:themeStore.theme.account.feedBack.placeHolderBgColor}" <view class="feed-back-content-item-textarea">
v-model="params.email" <textarea type="textarea" rows="7" :placeholder-style="JSON.stringify({ color: themeStore.theme.account.feedBack.text.placeHolderColor })
:placeholder-style=" " :style="{
JSON.stringify({ color: themeStore.theme.account.feedBack.text.placeHolderColor }) color: themeStore.theme.account.feedBack.text.inputColor,
" backgroundColor: themeStore.theme.account.feedBack.placeHolderBgColor,
:placeholder="$t('account.feedBack.label.emailPlaceholder')" }" v-model="params.content" class="feed-back-content-item-textarea-style"
/> :placeholder="$t('account.feedBack.label.suggestionPlaceholder')" />
</view> </view>
<view <view class="submit-content">
class="feed-back-content-item-scenes" <view class="submit-btn" :style="{
:style="{ color: themeStore.theme.account.feedBack.text.lable }" background: themeStore.theme.button.normal,
> color: themeStore.theme.button.textNormal,
<view class="feed-back-content-item-scenes-list"> }" @click="submit">{{ $t("account.button.submit") }}</view>
<view </view>
class="feed-back-content-item-scenes-list-item"
v-for="(item, index) in scenes"
:key="index"
:style="{
color:
index == checkScene
? themeStore.theme.account.feedBack.text.scenesItemActiveColor
: themeStore.theme.account.feedBack.text.scenesItemColor,
backgroundColor:
index == checkScene
? themeStore.theme.account.feedBack.scenesItemActiveBgColor
: themeStore.theme.account.feedBack.scenesItemBgColor,
}"
@click="checkSceneClick(index)"
>
{{ item }}
</view> </view>
</view>
</view> </view>
<view </mobile-sub-layout>
class="feed-back-content-item-textarea-label"
:style="{ color: themeStore.theme.account.feedBack.text.lable }"
>{{ $t("account.feedBack.label.suggestion") }}:</view
>
<view class="feed-back-content-item-textarea">
<textarea
type="textarea"
rows="7"
:placeholder-style="
JSON.stringify({ color: themeStore.theme.account.feedBack.text.placeHolderColor })
"
:style="{
color: themeStore.theme.account.feedBack.text.inputColor,
backgroundColor: themeStore.theme.account.feedBack.placeHolderBgColor,
}"
v-model="params.content"
class="feed-back-content-item-textarea-style"
:placeholder="$t('account.feedBack.label.suggestionPlaceholder')"
/>
</view>
<view class="submit-content">
<view
class="submit-btn"
:style="{
background: themeStore.theme.button.normal,
color: themeStore.theme.button.textNormal,
}"
@click="submit"
>{{ $t("account.button.submit") }}</view
>
</view>
</view>
</view>
</mobile-sub-layout>
</template> </template>
<script setup> <script setup>
@ -138,176 +87,193 @@ const { t } = useI18n();
const appStore = useAppStore(); const appStore = useAppStore();
let scenes = ref([ let scenes = ref([
t("account.feedBack.screen.game"), t("account.feedBack.screen.game"),
t("account.feedBack.screen.deposit"), t("account.feedBack.screen.deposit"),
t("account.feedBack.screen.withdraw"), t("account.feedBack.screen.withdraw"),
t("account.feedBack.screen.vip"), t("account.feedBack.screen.vip"),
t("account.feedBack.screen.invite"), t("account.feedBack.screen.invite"),
t("account.feedBack.screen.account"), t("account.feedBack.screen.account"),
t("account.feedBack.screen.other"), t("account.feedBack.screen.other"),
]); ]);
let checkScene = ref(0); let checkScene = ref(0);
let isShowInput = let isShowInput =
userStore.userInfo.mobile == null || userStore.userInfo.mobile == "" userStore.userInfo.mobile == null || userStore.userInfo.mobile == ""
? true ? true
: false; : false;
let params = reactive({ let params = reactive({
userId: userStore.userInfo.id, userId: userStore.userInfo.id,
phone: userStore.userInfo.mobile == null ? "" : userStore.userInfo.mobile, phone: userStore.userInfo.mobile == null ? "" : userStore.userInfo.mobile,
email: "", email: "",
content: "", content: "",
appPackageName: appStore.packageName, appPackageName: appStore.packageName,
}); });
/** /**
* 选择 Scene * 选择 Scene
*/ */
const checkSceneClick = (index) => { const checkSceneClick = (index) => {
checkScene.value = index; checkScene.value = index;
}; };
/** /**
* 提交反馈 * 提交反馈
*/ */
const submit = async () => { const submit = async () => {
const { code, data } = await updateFeedbackApi({ const { code, data } = await updateFeedbackApi({
type: checkScene.value, type: checkScene.value,
userId: params.userId, userId: params.userId,
email: params.email, email: params.email,
mobile: params.phone, mobile: params.phone,
content: params.content, content: params.content,
appPackageName: params.appPackageName, appPackageName: params.appPackageName,
}); });
if (code == 200) { if (code == 200) {
uni.navigateBack() uni.navigateBack()
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.feed-back-body { .feed-back-body {
width: 100vw; width: 100vw;
height: calc(100vh - 88rpx); height: calc(100vh - 88rpx);
// background: #2c0303; // background: #2c0303;
box-sizing: border-box;
padding-top: 10rpx;
.feed-back-content {
height: 100%;
// background: #610606;
box-sizing: border-box; box-sizing: border-box;
padding: 0 30rpx 30rpx 30rpx; padding-top: 10rpx;
overflow: hidden;
position: relative; .feed-back-content {
.feed-back-content-item { height: 100%;
width: 100%; // background: #610606;
display: flex;
justify-content: flex-start;
height: 79rpx;
line-height: 79rpx;
// color: #fff;
font-size: 30rpx;
.feed-back-content-item-left {
width: 231rpx;
text-align: right;
}
.feed-back-content-item-right {
margin-left: 24rpx;
width: calc(100% - 255rpx);
}
.feed-back-content-item-input {
border-radius: 20rpx;
height: 79rpx;
border: none;
outline: none;
box-sizing: border-box; box-sizing: border-box;
padding-left: 20rpx; padding: 0 30rpx 30rpx 30rpx;
font-size: 26rpx; overflow: hidden;
line-height: 79rpx; position: relative;
}
.feed-back-content-item-input::placeholder { .feed-back-content-item {
font-size: 26rpx; width: 100%;
// color: #f98585; display: flex;
} justify-content: flex-start;
} height: 79rpx;
.feed-back-content-item-scenes { line-height: 79rpx;
width: 100%; // color: #fff;
margin-top: 57rpx; font-size: 30rpx;
// color: #fff;
.feed-back-content-item-scenes-list::before { .feed-back-content-item-left {
content: "Scenes:"; width: 231rpx;
width: 231rpx; text-align: right;
text-align: right; }
line-height: 65rpx;
margin-right: 20rpx; .feed-back-content-item-right {
font-size: 30rpx; margin-left: 24rpx;
} width: calc(100% - 255rpx);
.feed-back-content-item-scenes-list { }
width: 100%;
display: flex; .feed-back-content-item-input {
justify-content: flex-start; border-radius: 20rpx;
flex-wrap: wrap; height: 79rpx;
.feed-back-content-item-scenes-list-item { border: none;
width: 213rpx; outline: none;
height: 65rpx; box-sizing: border-box;
// background: #963333; padding-left: 20rpx;
margin-bottom: 29rpx; font-size: 26rpx;
border-radius: 33rpx; line-height: 79rpx;
color: #fff; }
text-align: center;
line-height: 65rpx; .feed-back-content-item-input::placeholder {
margin-right: 6rpx; font-size: 26rpx;
// color: #f98585;
}
} }
.feed-back-content-item-scenes-list-item-active {
// background: #f37e1c; .feed-back-content-item-scenes {
width: 100%;
margin-top: 57rpx;
// color: #fff;
.feed-back-content-item-scenes-list::before {
content: "Scenes:";
width: 231rpx;
text-align: right;
line-height: 65rpx;
margin-right: 20rpx;
font-size: 30rpx;
}
.feed-back-content-item-scenes-list {
width: 100%;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
.feed-back-content-item-scenes-list-item {
width: 213rpx;
height: 65rpx;
// background: #963333;
margin-bottom: 29rpx;
border-radius: 33rpx;
color: #fff;
text-align: center;
line-height: 65rpx;
margin-right: 6rpx;
}
.feed-back-content-item-scenes-list-item-active {
// background: #f37e1c;
}
}
}
.feed-back-content-item-textarea-label {
width: 231rpx;
text-align: right;
height: 79rpx;
line-height: 79rpx;
// color: #fff;
}
.feed-back-content-item-textarea {
width: 100%;
margin-top: 25rpx;
box-sizing: border-box;
padding: 0 30rpx;
.feed-back-content-item-textarea-style {
width: 100%;
height: 344rpx;
// background: #3d0303;
border-radius: 20rpx;
border: none;
outline: none;
box-sizing: border-box;
padding: 30rpx 20rpx;
// color: #fff;
line-height: 40rpx;
direction: ltr;
text-align: left;
font-size: 26rpx;
}
.feed-back-content-item-textarea-style::placeholder {
font-size: 26rpx;
// color: #f98585;
}
}
.submit-content {
width: 100%;
box-sizing: border-box;
padding: 0 25rpx;
margin-top: 44rpx;
.submit-btn {
width: 100%;
height: 90rpx;
// background: linear-gradient(90deg, #f78b22, #e34e04);
border-radius: 45rpx;
line-height: 90rpx;
text-align: center;
font-size: 36rpx;
color: #fff;
}
} }
}
} }
.feed-back-content-item-textarea-label {
width: 231rpx;
text-align: right;
height: 79rpx;
line-height: 79rpx;
// color: #fff;
}
.feed-back-content-item-textarea {
width: 100%;
margin-top: 25rpx;
box-sizing: border-box;
padding: 0 30rpx;
.feed-back-content-item-textarea-style {
width: 100%;
height: 344rpx;
// background: #3d0303;
border-radius: 20rpx;
border: none;
outline: none;
box-sizing: border-box;
padding: 30rpx 20rpx;
// color: #fff;
line-height: 40rpx;
direction: ltr;
text-align: left;
font-size: 26rpx;
}
.feed-back-content-item-textarea-style::placeholder {
font-size: 26rpx;
// color: #f98585;
}
}
.submit-content {
width: 100%;
box-sizing: border-box;
padding: 0 25rpx;
margin-top: 44rpx;
.submit-btn {
width: 100%;
height: 90rpx;
// background: linear-gradient(90deg, #f78b22, #e34e04);
border-radius: 45rpx;
line-height: 90rpx;
text-align: center;
font-size: 36rpx;
color: #fff;
}
}
}
} }
</style> </style>

View File

@ -158,11 +158,13 @@ import { requestOrderDetail } from "@/api/deposit.js";
import Toast from "@/module/toast/toast.js"; import Toast from "@/module/toast/toast.js";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useDepositStore } from "@/store/useDepositStore.js"; import { useDepositStore } from "@/store/useDepositStore.js";
// import { useUserStore } from "@/store/useUserStore.js";
const { t } = useI18n(); const { t } = useI18n();
const themeStore = useThemeStore(); const themeStore = useThemeStore();
const appStore = useAppStore(); const appStore = useAppStore();
const depositStore = useDepositStore(); const depositStore = useDepositStore();
// const userStore = useUserStore();
const pageData = reactive({ const pageData = reactive({
orderId: "", orderId: "",