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,78 +1,44 @@
<template>
<mobile-sub-layout
:title="$t('account.header.feedbackTitle')"
:lineHeight="4"
>
<mobile-sub-layout :title="$t('account.header.feedbackTitle')" :lineHeight="4">
<view class="feed-back-body">
<view
class="feed-back-content"
:style="{ backgroundColor: themeStore.theme.account.feedBack.lightBgColor }"
>
<view
class="feed-back-content-item"
:style="{ color: themeStore.theme.account.feedBack.text.lable }"
>
<view class="feed-back-content-item-left"
>{{ $t("account.feedBack.label.yourId") }}:</view
>
<view class="feed-back-content"
:style="{ backgroundColor: themeStore.theme.account.feedBack.lightBgColor }">
<view class="feed-back-content-item" :style="{ color: themeStore.theme.account.feedBack.text.lable }">
<view class="feed-back-content-item-left">{{ $t("account.feedBack.label.yourId") }}:</view>
<view class="feed-back-content-item-right">{{ params.userId }}</view>
</view>
<view
class="feed-back-content-item"
:style="{ color: themeStore.theme.account.feedBack.text.lable }"
>
<view class="feed-back-content-item-left"
>{{ $t("account.feedBack.label.phoneNumber") }}:</view
>
<view class="feed-back-content-item-right" v-if="!isShowInput"
>{{ appStore.phoneNumberPrefix }}
<view class="feed-back-content-item" :style="{ color: themeStore.theme.account.feedBack.text.lable }">
<view class="feed-back-content-item-left">{{ $t("account.feedBack.label.phoneNumber") }}:</view>
<view class="feed-back-content-item-right" v-if="!isShowInput">{{ appStore.phoneNumberPrefix }}
{{ params.phone.replace(appStore.phoneNumberPrefix.replace('+', ''), '') }}
</view>
<template v-else>
<view style="width: 70rpx; margin-left: 24rpx">{{
appStore.phoneNumberPrefix
}}</view>
<input
class="feed-back-content-item-input"
:style="{
<view style="width: 70rpx; margin-left: 24rpx">
{{ appStore.phoneNumberPrefix }}
</view>
<input class="feed-back-content-item-input" :style="{
color: themeStore.theme.account.feedBack.text.inputColor,
backgroundColor: themeStore.theme.account.feedBack.placeHolderBgColor }"
v-model="params.phone"
:placeholder-style="
JSON.stringify({ color: themeStore.theme.account.feedBack.text.placeHolderColor })
"
:placeholder="$t('account.feedBack.label.phonePlaceholder')"
/></template>
backgroundColor: themeStore.theme.account.feedBack.placeHolderBgColor
}" v-model="params.phone" :placeholder-style="JSON.stringify({ color: themeStore.theme.account.feedBack.text.placeHolderColor })
" :placeholder="$t('account.feedBack.label.phonePlaceholder')" />
</template>
</view>
<view class="feed-back-content-item" style="margin-top: 10rpx">
<view
class="feed-back-content-item-left"
:style="{ color: themeStore.theme.account.feedBack.text.lable }"
>{{ $t("account.feedBack.label.email") }}:</view
>
<input
class="feed-back-content-item-input"
:style="{
<view class="feed-back-content-item-left"
:style="{ color: themeStore.theme.account.feedBack.text.lable }">{{
$t("account.feedBack.label.email") }}:</view>
<input class="feed-back-content-item-input" :style="{
marginLeft: '24rpx',
color: themeStore.theme.account.feedBack.text.inputColor,
backgroundColor:themeStore.theme.account.feedBack.placeHolderBgColor}"
v-model="params.email"
:placeholder-style="
JSON.stringify({ color: themeStore.theme.account.feedBack.text.placeHolderColor })
"
:placeholder="$t('account.feedBack.label.emailPlaceholder')"
/>
backgroundColor: themeStore.theme.account.feedBack.placeHolderBgColor
}" v-model="params.email" :placeholder-style="JSON.stringify({ color: themeStore.theme.account.feedBack.text.placeHolderColor })
" :placeholder="$t('account.feedBack.label.emailPlaceholder')" />
</view>
<view
class="feed-back-content-item-scenes"
:style="{ color: themeStore.theme.account.feedBack.text.lable }"
>
<view class="feed-back-content-item-scenes"
:style="{ color: themeStore.theme.account.feedBack.text.lable }">
<view class="feed-back-content-item-scenes-list">
<view
class="feed-back-content-item-scenes-list-item"
v-for="(item, index) in scenes"
:key="index"
:style="{
<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
@ -81,44 +47,27 @@
index == checkScene
? themeStore.theme.account.feedBack.scenesItemActiveBgColor
: themeStore.theme.account.feedBack.scenesItemBgColor,
}"
@click="checkSceneClick(index)"
>
}" @click="checkSceneClick(index)">
{{ item }}
</view>
</view>
</view>
<view
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-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="{
<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')"
/>
}" 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="{
<view class="submit-btn" :style="{
background: themeStore.theme.button.normal,
color: themeStore.theme.button.textNormal,
}"
@click="submit"
>{{ $t("account.button.submit") }}</view
>
}" @click="submit">{{ $t("account.button.submit") }}</view>
</view>
</view>
</view>
@ -189,6 +138,7 @@ const submit = async () => {
// background: #2c0303;
box-sizing: border-box;
padding-top: 10rpx;
.feed-back-content {
height: 100%;
// background: #610606;
@ -196,6 +146,7 @@ const submit = async () => {
padding: 0 30rpx 30rpx 30rpx;
overflow: hidden;
position: relative;
.feed-back-content-item {
width: 100%;
display: flex;
@ -204,14 +155,17 @@ const submit = async () => {
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;
@ -222,14 +176,17 @@ const submit = async () => {
font-size: 26rpx;
line-height: 79rpx;
}
.feed-back-content-item-input::placeholder {
font-size: 26rpx;
// color: #f98585;
}
}
.feed-back-content-item-scenes {
width: 100%;
margin-top: 57rpx;
// color: #fff;
.feed-back-content-item-scenes-list::before {
content: "Scenes:";
@ -239,11 +196,13 @@ const submit = async () => {
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;
@ -255,11 +214,13 @@ const submit = async () => {
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;
@ -267,11 +228,13 @@ const submit = async () => {
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;
@ -287,16 +250,19 @@ const submit = async () => {
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;

View File

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