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

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: "",