提交
This commit is contained in:
@@ -44,6 +44,7 @@ const routes = [
|
||||
path: "/knapsack",
|
||||
name: "knapsack",
|
||||
component: () => import("../views/Home/common/knapsack.vue"),
|
||||
meta: { hideHeader: true },
|
||||
},
|
||||
{
|
||||
path: "/recharge",
|
||||
|
||||
@@ -1,172 +1,68 @@
|
||||
<template>
|
||||
<div class="home" @click.stop="selectlist = fasle">
|
||||
<div class="header_top">
|
||||
<handleback></handleback>
|
||||
<div>我的背包</div>
|
||||
<div>玩法说明</div>
|
||||
<div class="knapsack-page" @click.stop="selectlist = false">
|
||||
<!-- 第一行：头像 + 昵称 + 退出（与 rollHome 完全一致） -->
|
||||
<div class="page_header_user">
|
||||
<div class="page_avatar_wrap">
|
||||
<img :src="loginAvatar" @error="$event.target.src = defaultAvatar" alt class="page_avatar_img" />
|
||||
</div>
|
||||
<div class="header column">
|
||||
<div class="header_I left">
|
||||
<div class="header_I_I">饰品总数 : {{ totalOrnamentNumber }}</div>
|
||||
<div class="header_I_I">饰品总价值 : {{ totalOrnamentPrice }}</div>
|
||||
<span class="page_nickname">{{ (USER_INFO && USER_INFO.nickName) || '' }}</span>
|
||||
<div class="page_logout_btn" @click="handleLogout">退出</div>
|
||||
</div>
|
||||
<div class="header_II left" v-if="false">
|
||||
<div class="header_II_I">
|
||||
已选饰品总数 : {{ isAll ? totalOrnamentNumber : recyleMoney.index }}
|
||||
<!-- 第二行：返回 + 我的背包标题 -->
|
||||
<div class="knapsack-header">
|
||||
<div class="knapsack-back" @click="$router.back()">
|
||||
<span class="back-arrow">←</span> 返回
|
||||
</div>
|
||||
<div class="header_II_I">
|
||||
已选饰品总价值 : {{ isAll ? totalOrnamentPrice : recyleMoney.money }}
|
||||
<div class="knapsack-title">我的背包</div>
|
||||
<div style="width:60px"></div>
|
||||
</div>
|
||||
|
||||
<!-- 统计信息卡片 -->
|
||||
<div class="knapsack-stats">
|
||||
<div class="stats-item">饰品总数：{{ totalOrnamentNumber }}</div>
|
||||
<div class="stats-divider"></div>
|
||||
<div class="stats-item">饰品总价值：{{ totalOrnamentPrice }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main column">
|
||||
<div class="main_I space_between">
|
||||
<div class="main_I_I center" @click.stop="selectlist = !selectlist">
|
||||
|
||||
<!-- 工具栏：排序 + 搜索 -->
|
||||
<div class="knapsack-toolbar">
|
||||
<div class="sort-btn" @click.stop="selectlist = !selectlist">
|
||||
{{ selected }}
|
||||
<div class="main_I_I_I" v-if="selectlist">
|
||||
<div
|
||||
class="main_I_I_I_I center"
|
||||
@click.stop="
|
||||
handlesort(0);
|
||||
playAudio();
|
||||
"
|
||||
>
|
||||
默认排序
|
||||
</div>
|
||||
<div
|
||||
class="main_I_I_I_I center"
|
||||
@click.stop="
|
||||
handlesort(1);
|
||||
playAudio();
|
||||
"
|
||||
>
|
||||
按价格从低到高排序
|
||||
</div>
|
||||
<div
|
||||
class="main_I_I_I_I center"
|
||||
@click.stop="
|
||||
handlesort(2);
|
||||
playAudio();
|
||||
"
|
||||
>
|
||||
按价格从高到低排序
|
||||
<div class="sort-dropdown" v-if="selectlist">
|
||||
<div class="sort-option" @click.stop="handlesort(0); playAudio();">默认排序</div>
|
||||
<div class="sort-option" @click.stop="handlesort(1); playAudio();">价格从低到高</div>
|
||||
<div class="sort-option" @click.stop="handlesort(2); playAudio();">价格从高到低</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_I_II">
|
||||
<div class="main_I_II_I">
|
||||
<div class="search-box">
|
||||
<input
|
||||
type="text"
|
||||
v-model="page.name"
|
||||
name
|
||||
id
|
||||
style="serch"
|
||||
placeholder="请输入饰品名称"
|
||||
@keyup.enter="handlesearch"
|
||||
/>
|
||||
<svg
|
||||
@click="handlesearch"
|
||||
t="1705982070098"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
p-id="3285"
|
||||
width="30"
|
||||
height="30"
|
||||
>
|
||||
<path
|
||||
d="M512.034281 76.882018c-240.202711 0-435.165054 194.83136-435.165054 435.124122 0 240.268202 194.96132 435.100586 435.165054 435.100586 59.585073 0 116.371404-12.05557 168.096463-33.743522-13.106506-5.012154-24.790616-14.037714-32.602535-26.979468L544.87013 714.613604c-111.893416 33.626865-236.425687-10.772344-299.55447-115.499547-74.789357-123.859959-34.93465-285.041942 88.921215-359.814925 124.066667-74.738192 285.119713-34.814923 359.861998 89.102341 63.10627 104.58701 44.26311 235.499595-37.545104 318.843792l102.704127 171.745573c8.442276 13.96813 10.727319 29.801746 8.185426 44.703131 108.698654-79.121012 179.662893-206.981075 179.662893-351.687828C947.106214 271.713378 752.261551 76.882018 512.034281 76.882018"
|
||||
fill="#3A97E4"
|
||||
p-id="3286"
|
||||
/>
|
||||
<path
|
||||
d="M385.72862 324.729849c-76.770478 46.324048-101.538581 146.152684-55.153134 223.013213 46.385447 76.905554 146.222269 101.531418 223.180012 55.149041 76.842109-46.310745 101.538581-146.233526 55.153134-223.01219C562.546721 302.902728 462.687386 278.230816 385.72862 324.729849"
|
||||
fill="#3A97E4"
|
||||
p-id="3287"
|
||||
/>
|
||||
</svg>
|
||||
<span class="search-icon" @click="handlesearch">🔍</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_II space_between">
|
||||
<div class="main_II_I space_between">
|
||||
<!-- <div
|
||||
class="main_II_I_I center btn_click"
|
||||
@click="
|
||||
openConfirmDelivery();
|
||||
playAudio();
|
||||
"
|
||||
>
|
||||
提取
|
||||
</div> -->
|
||||
|
||||
<!-- 物品网格列表 -->
|
||||
<div class="knapsack-grid" @scroll="scroll">
|
||||
<div
|
||||
v-if="false"
|
||||
class="main_II_I_I center btn_click"
|
||||
@click="
|
||||
openConfirm();
|
||||
playAudio();
|
||||
"
|
||||
>
|
||||
分解
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_II_II space_between" v-if="false">
|
||||
<div
|
||||
class="main_II_II_I space_between"
|
||||
@click="
|
||||
handleSelectAll();
|
||||
playAudio();
|
||||
"
|
||||
:class="isAll ? 'active' : ''"
|
||||
>
|
||||
<svg
|
||||
t="1707113229515"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="3034"
|
||||
>
|
||||
<path
|
||||
d="M673.858 151.948H198.194C88.903 151.948 0 240.852 0 350.142v475.665C0 935.097 88.903 1024 198.194 1024h475.665c109.29 0 198.194-88.903 198.194-198.194V350.142c-0.001-109.29-88.905-198.194-198.195-198.194z m21.419 320.917l-286.283 286.27c-7.742 7.742-17.884 11.613-28.026 11.613s-20.284-3.871-28.026-11.613L176.774 582.968c-15.484-15.471-15.484-40.581 0-56.052 15.484-15.484 40.568-15.484 56.052 0l148.142 148.142 258.258-258.245c15.484-15.484 40.568-15.484 56.052 0 15.483 15.484 15.483 40.581-0.001 56.052z"
|
||||
fill="#727277"
|
||||
p-id="3035"
|
||||
/>
|
||||
<path
|
||||
d="M825.806 0H350.142c-73.597 0-137.813 40.405-171.997 100.113 6.634-0.529 13.281-1.016 20.048-1.016h475.665c138.426 0 251.045 112.619 251.045 251.045v475.665c0 6.768-0.487 13.414-1.016 20.048C983.595 811.671 1024 747.455 1024 673.858V198.194C1024 88.903 935.097 0 825.806 0z"
|
||||
fill="#727277"
|
||||
p-id="3036"
|
||||
/>
|
||||
</svg>
|
||||
全选
|
||||
</div>
|
||||
<div class="main_II_II_II">
|
||||
已选：{{ isAll ? totalOrnamentNumber : recyleMoney.index }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom grade3" @scroll="scroll">
|
||||
<div
|
||||
@click="
|
||||
handleSelect(item);
|
||||
playAudio();
|
||||
"
|
||||
class="bottom_I"
|
||||
:class="item.isselect ? 'selectbg' : ''"
|
||||
:style="{ 'background-image': `url(${item.levelImg})` }"
|
||||
class="grid-item"
|
||||
:class="item.isselect ? 'selected' : ''"
|
||||
v-for="(item, index) in arr"
|
||||
:key="index"
|
||||
@click="handleSelect(item); playAudio();"
|
||||
>
|
||||
<div class="bottom_I_I center">
|
||||
<img :src="getPrizeImg(item)" alt width="100%" />
|
||||
<div class="grid-item-img">
|
||||
<img :src="getPrizeImg(item)" alt />
|
||||
</div>
|
||||
<div>
|
||||
<div class="money-money">
|
||||
<money class="money"></money>
|
||||
<div class="grid-item-price">
|
||||
<span class="price-icon">◯</span>
|
||||
{{ item.ornamentsPrice }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-empty" v-if="arr.length === 0">暂无饰品</div>
|
||||
</div>
|
||||
<div class="out" v-if="Confirm">
|
||||
<div class="out_I animate__animated animate__slideInDown" ref="confirmel">
|
||||
@@ -238,10 +134,14 @@ import {
|
||||
delivery,
|
||||
getUserInfo,
|
||||
packSackGlobalData,
|
||||
logOut,
|
||||
} from "@/api/index";
|
||||
import { removeToken } from "@/api/cookie";
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
defaultAvatar: require('@/assets/images/default-header.png'),
|
||||
onsubmit: true,
|
||||
Confirm: false,
|
||||
confirmDelivery: false,
|
||||
@@ -267,6 +167,17 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(['USER_INFO']),
|
||||
loginAvatar() {
|
||||
const avatar = this.USER_INFO && this.USER_INFO.avatar;
|
||||
if (!avatar || !avatar.trim()) return this.defaultAvatar;
|
||||
const baseUrl = 'http://95.40.65.4:8081';
|
||||
const oldHost = 'http://154.12.94.229:8080';
|
||||
const trimmed = avatar.trim();
|
||||
if (trimmed.startsWith(oldHost)) return baseUrl + trimmed.slice(oldHost.length);
|
||||
if (/^(http|https):\/\//i.test(trimmed)) return trimmed;
|
||||
return baseUrl + trimmed;
|
||||
},
|
||||
recyleMoney() {
|
||||
let money = 0;
|
||||
let index = 0;
|
||||
@@ -281,9 +192,30 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
this.getlist();
|
||||
if (!this.USER_INFO || !this.USER_INFO.avatar) {
|
||||
getUserInfo().then((res) => {
|
||||
if (res && res.data && res.data.data) {
|
||||
this.$store.commit('USER_INFO', res.data.data);
|
||||
}
|
||||
}).catch(() => {});
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleLogout() {
|
||||
this.playAudio();
|
||||
logOut().then((res) => {
|
||||
if (res && res.data && res.data.code == 200) {
|
||||
removeToken();
|
||||
this.$store.commit('USER_INFO', '');
|
||||
this.$router.push('/login');
|
||||
}
|
||||
}).catch(() => {
|
||||
removeToken();
|
||||
this.$store.commit('USER_INFO', '');
|
||||
this.$router.push('/login');
|
||||
});
|
||||
},
|
||||
// 直接使用后端返回的图片地址
|
||||
getPrizeImg(item) {
|
||||
const imgUrl = item.imageUrl || '';
|
||||
@@ -520,332 +452,331 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bottom {
|
||||
height: 362px;
|
||||
.knapsack-page {
|
||||
height: 100vh;
|
||||
background-color: #0d1b2e;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 头像行（与 rollHome 完全一致） */
|
||||
.page_header_user {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.page_logout_btn {
|
||||
margin-left: auto;
|
||||
font-size: 12px;
|
||||
color: rgba(255,255,255,0.6);
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
border-radius: 12px;
|
||||
padding: 3px 10px;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
&:active { opacity: 0.7; }
|
||||
}
|
||||
.page_avatar_wrap {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 2px solid rgba(255,255,255,0.25);
|
||||
flex-shrink: 0;
|
||||
.page_avatar_img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
.page_nickname {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 顶部导航 */
|
||||
.knapsack-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
height: 50px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.knapsack-back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
background: rgba(255,255,255,0.1);
|
||||
border: 1px solid rgba(255,255,255,0.25);
|
||||
border-radius: 20px;
|
||||
padding: 4px 12px;
|
||||
.back-arrow {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.knapsack-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 统计卡片 */
|
||||
.knapsack-stats {
|
||||
margin: 0 12px 12px;
|
||||
background: rgba(255,255,255,0.06);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.stats-item {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #c8d6e5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stats-divider {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: rgba(255,255,255,0.15);
|
||||
}
|
||||
}
|
||||
|
||||
/* 工具栏 */
|
||||
.knapsack-toolbar {
|
||||
margin: 0 12px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.sort-btn {
|
||||
position: relative;
|
||||
min-width: 100px;
|
||||
height: 36px;
|
||||
background: #1a2a3e;
|
||||
border: 1px solid #2e4a6a;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
padding: 0 12px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.sort-dropdown {
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: #1a2a3e;
|
||||
border: 1px solid #2e4a6a;
|
||||
border-radius: 4px;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
|
||||
.sort-option {
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
color: #c8d6e5;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: #243c58;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
flex: 1;
|
||||
height: 36px;
|
||||
background: rgba(100, 80, 160, 0.35);
|
||||
border: 1px solid rgba(130, 100, 200, 0.4);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
gap: 6px;
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
&::placeholder {
|
||||
color: rgba(200, 180, 255, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
font-size: 16px;
|
||||
color: rgba(180, 160, 255, 0.8);
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 物品网格 */
|
||||
.knapsack-grid {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0 12px 16px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
align-content: start;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #3fa2c7;
|
||||
background: #2e4a6a;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
&::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.home {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.header_top {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
div:first-child {
|
||||
}
|
||||
div:last-child {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-decoration: underline;
|
||||
line-height: 1.5;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
background: #000000a3;
|
||||
border-radius: 6px;
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
@media (max-width: 550px) {
|
||||
height: 100px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.header_II {
|
||||
height: 70px;
|
||||
width: 100%;
|
||||
@media (max-width: 550px) {
|
||||
height: 50px;
|
||||
}
|
||||
.header_II_I {
|
||||
width: 49%;
|
||||
}
|
||||
}
|
||||
.header_I {
|
||||
height: 70px;
|
||||
border-bottom: 1px solid #323436;
|
||||
width: 100%;
|
||||
@media (max-width: 550px) {
|
||||
height: 50px;
|
||||
}
|
||||
.header_I_I {
|
||||
width: 49%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main {
|
||||
margin-top: 14px;
|
||||
.main_I {
|
||||
width: 100%;
|
||||
.main_I_I {
|
||||
width: 224px;
|
||||
height: 42px;
|
||||
border-radius: 1px;
|
||||
border: 1px solid #3fa2c7;
|
||||
background: #10253cb5;
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
@media (max-width: 550px) {
|
||||
width: 160px;
|
||||
height: 30px;
|
||||
|
||||
font-size: 11px;
|
||||
}
|
||||
.main_I_I_I {
|
||||
width: 100%;
|
||||
|
||||
position: absolute;
|
||||
top: 44px;
|
||||
background:#10253cb5;
|
||||
color: #fff;
|
||||
@media (max-width: 550px) {
|
||||
top: 34px;
|
||||
}
|
||||
|
||||
.main_I_I_I_I {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
opacity: 1;
|
||||
@media (max-width: 550px) {
|
||||
font-size: 11px;
|
||||
height: 30px;
|
||||
}
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: #1f3a58;
|
||||
|
||||
opacity: 1;
|
||||
border: 1px solid #3fa2c7;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
background: #1f3a58;
|
||||
|
||||
opacity: 1;
|
||||
border: 1px solid #3fa2c7;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main_I_II {
|
||||
.main_I_II_I {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
padding: 0 2% 0 5%;
|
||||
border-radius: 1px;
|
||||
background: url('../../../assets/roll_serch.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
.grid-item {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 8px;
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s;
|
||||
padding-bottom: 8px;
|
||||
|
||||
&.selected {
|
||||
border-color: #3fa2c7;
|
||||
}
|
||||
|
||||
.grid-item-img {
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@media (max-width: 550px) {
|
||||
width: 185px;
|
||||
height: 30px;
|
||||
}
|
||||
input {
|
||||
justify-content: center;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 35px;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
background-color: transparent;
|
||||
text-indent: 10px;
|
||||
outline: none;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.main_II {
|
||||
width: 100%;
|
||||
margin-top: 14px;
|
||||
.main_II_I {
|
||||
width: 227px;
|
||||
@media (max-width: 550px) {
|
||||
width: 160px;
|
||||
}
|
||||
.main_II_I_I {
|
||||
width: 98px;
|
||||
height: 35px;
|
||||
border-radius: 1px;
|
||||
border: 1px solid #3fa2c7;
|
||||
background: #10253cb5;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
@media (max-width: 550px) {
|
||||
width: 70px;
|
||||
height: 25px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main_II_II {
|
||||
width: 45%;
|
||||
justify-content: right;
|
||||
font-size: 18px;
|
||||
@media (max-width: 550px) {
|
||||
font-size: 13px;
|
||||
}
|
||||
.main_II_II_I {
|
||||
width: 44%;
|
||||
.icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
@media (max-width: 550px) {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.active {
|
||||
svg {
|
||||
path {
|
||||
fill: #3a97e4;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main_II_II_II {
|
||||
// width: 44%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
margin-top: 14px;
|
||||
.bottom_I {
|
||||
// border: 2px solid #727277;
|
||||
width: 100%;
|
||||
height: 175px;
|
||||
background-color: rgba(50, 52, 54, 0.25);
|
||||
background-size: 100% 100%;
|
||||
border-radius: 14px;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 13px;
|
||||
@media (max-width: 550px) {
|
||||
height: 125px;
|
||||
|
||||
font-size: 9px;
|
||||
}
|
||||
.bottom_I_I {
|
||||
margin: 0 auto;
|
||||
width: 65%;
|
||||
height: 112px;
|
||||
@media (max-width: 550px) {
|
||||
height: 80px;
|
||||
.grid-item-price {
|
||||
font-size: 12px;
|
||||
color: #c8a84b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
|
||||
.price-icon {
|
||||
font-size: 10px;
|
||||
color: #7ec85a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-empty {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
color: rgba(255,255,255,0.3);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 确认弹窗 */
|
||||
.out {
|
||||
width: 525px;
|
||||
width: 100%;
|
||||
max-width: 430px;
|
||||
height: 100vh;
|
||||
transform: translateX(-50%);
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
z-index: 2;
|
||||
@media (max-width: 550px) {
|
||||
width: 100%;
|
||||
}
|
||||
z-index: 10;
|
||||
|
||||
.out_I {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
height: 168px;
|
||||
margin-top: 210px;
|
||||
background: hsla(0, 0%, 100%, 0.1);
|
||||
border-radius: 21px;
|
||||
opacity: 1;
|
||||
width: 90%;
|
||||
margin: 210px auto 0;
|
||||
background: rgba(26, 42, 62, 0.95);
|
||||
border: 1px solid #2e4a6a;
|
||||
border-radius: 12px;
|
||||
padding: 28px 16px 20px;
|
||||
text-align: center;
|
||||
font-size: 21px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
padding-top: 35px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@media (max-width: 550px) {
|
||||
height: 120px;
|
||||
font-size: 15px;
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.out_I_I {
|
||||
width: 87%;
|
||||
margin: 0 auto;
|
||||
margin-top: 35px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 24px;
|
||||
gap: 12px;
|
||||
|
||||
.out_I_I_I {
|
||||
width: 196px;
|
||||
height: 42px;
|
||||
background: linear-gradient(
|
||||
360deg,
|
||||
rgba(114, 116, 119, 0.5) 0%,
|
||||
rgba(114, 116, 119, 0.25) 100%
|
||||
);
|
||||
opacity: 1;
|
||||
border: 1px solid #727477;
|
||||
@media (max-width: 550px) {
|
||||
font-size: 15px;
|
||||
width: 140px;
|
||||
height: 30px;
|
||||
}
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #555;
|
||||
background: rgba(114,116,119,0.3);
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.out_I_I_II {
|
||||
width: 196px;
|
||||
height: 42px;
|
||||
background: #1f3a58;
|
||||
opacity: 1;
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #3fa2c7;
|
||||
@media (max-width: 550px) {
|
||||
font-size: 15px;
|
||||
width: 140px;
|
||||
height: 30px;
|
||||
background: #1f3a58;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.out_I::before {
|
||||
content: ""; /*必须设置content属性*/
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
-219deg,
|
||||
#1f3a58 0%,
|
||||
rgba(32, 29, 48, 0) 40%,
|
||||
rgba(248, 125, 81, 0) 100%
|
||||
);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.selectbg {
|
||||
border: 2px solid #3fa2c7 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -39,6 +39,10 @@
|
||||
">
|
||||
立即登录
|
||||
</div>
|
||||
<div class="main_bottom_no">
|
||||
没有账号？
|
||||
<span @click="handleGo('zc'); playAudio();">去注册</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_center" v-if="status == 'wjmm'" v-show="false">
|
||||
<div class="main_top">忘记密码</div>
|
||||
@@ -74,56 +78,30 @@
|
||||
">去登录</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_center" v-if="status == 'zc'" v-show="false">
|
||||
<div class="main_center" v-if="status == 'zc'">
|
||||
<div class="main_top">注册</div>
|
||||
<div class="main_input">
|
||||
<input type="text" v-model="registerform.phoneNumber" placeholder="请输入手机号" />
|
||||
<input type="text" v-model="registerform.phoneNumber" placeholder="请输入账号" autocomplete="off" />
|
||||
</div>
|
||||
<div class="main_input">
|
||||
<input type="text" v-model="registerform.nickName" placeholder="请输入昵称" />
|
||||
</div>
|
||||
|
||||
<div class="main_input">
|
||||
<input type="password" placeholder="请输入新的密码" v-model="registerform.password" />
|
||||
<input type="text" v-model="registerform.nickName" placeholder="请输入昵称" autocomplete="off" />
|
||||
</div>
|
||||
<div class="main_input">
|
||||
<input type="password" placeholder="请输入确认密码" v-model="registerform.confirmPassword" />
|
||||
</div>
|
||||
<div class="main_input">
|
||||
<input type="text" placeholder="请输入验证码" v-model="registerform.code" />
|
||||
<div @click="
|
||||
getyzm();
|
||||
playAudio();
|
||||
" class="yzm">
|
||||
{{ title }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_input">
|
||||
<input type="text" placeholder="请输入邀请码" v-model="registerform.parentInvitationCode" />
|
||||
<input type="password" placeholder="请输入密码" v-model="registerform.password" autocomplete="new-password" />
|
||||
</div>
|
||||
<div class="main_center_bottom">
|
||||
<div :class="select ? 'select' : ''" @click="
|
||||
handleAgree();
|
||||
playAudio();
|
||||
"></div>
|
||||
<div :class="select ? 'select' : ''" @click="handleAgree(); playAudio();"></div>
|
||||
<div>
|
||||
我 已 满 18 岁，并 阅 读 和 同 意《 用 户 协 议 》、《 隐 私 政 策
|
||||
》和《 反 洗 钱 协 议 》，承 诺 理 性 消 费。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main_bottom" @click="
|
||||
handleRegister();
|
||||
playAudio();
|
||||
">
|
||||
注册
|
||||
<div class="main_bottom" @click="handleRegister(); playAudio();">
|
||||
立即注册
|
||||
</div>
|
||||
<div class="main_bottom_no">
|
||||
已有账号?
|
||||
<span @click="
|
||||
handleGo('dl');
|
||||
playAudio();
|
||||
">去登录</span>
|
||||
已有账号？
|
||||
<span @click="handleGo('dl'); playAudio();">去登录</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -294,59 +272,48 @@ export default {
|
||||
type: "warning",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
} else {
|
||||
if (
|
||||
this.registerform.phoneNumber == "" &&
|
||||
this.registerform.nickName == ""
|
||||
) {
|
||||
return;
|
||||
}
|
||||
if (this.registerform.phoneNumber == "") {
|
||||
this.$message({
|
||||
message: "请输入用户名或手机号",
|
||||
message: "请输入账号",
|
||||
type: "warning",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
return;
|
||||
} else if (this.registerform.password == "") {
|
||||
}
|
||||
if (this.registerform.nickName == "") {
|
||||
this.$message({
|
||||
message: "请输入昵称",
|
||||
type: "warning",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (this.registerform.password == "") {
|
||||
this.$message({
|
||||
message: "请输入密码",
|
||||
type: "warning",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
} else if (
|
||||
this.registerform.confirmPassword != this.registerform.password
|
||||
) {
|
||||
this.$message({
|
||||
message: "两次密码不一致",
|
||||
type: "warning",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
} else if (this.registerform.code == "") {
|
||||
this.$message({
|
||||
message: "请获取验证码",
|
||||
type: "warning",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
} else {
|
||||
if (this.registerform.parentInvitationCode == "f2cs2") {
|
||||
this.registerform.parentInvitationCode = "";
|
||||
return;
|
||||
}
|
||||
getRegister(this.registerform).then((res) => {
|
||||
getRegister({ ...this.registerform }).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
this.$message({
|
||||
message: "注册成功",
|
||||
type: "success",
|
||||
customClass: "info_success",
|
||||
customClass: "log_success",
|
||||
});
|
||||
this.status = "dl";
|
||||
} else {
|
||||
this.$message({
|
||||
message: `${res.data.msg}`,
|
||||
type: "warning",
|
||||
customClass: "warning",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
handleLogin() {
|
||||
if (this.select == false) {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<!-- <div>{{list}}</div> -->
|
||||
<!-- 第一行：头像 + 昵称，无背景卡片，融入深蓝背景 -->
|
||||
<div class="page_header_user">
|
||||
<div class="page_avatar_wrap">
|
||||
<div class="page_avatar_wrap" @click="$router.push('/knapsack')" style="cursor:pointer">
|
||||
<img :src="loginAvatar" @error="$event.target.src = defaultAvatar" alt class="page_avatar_img" />
|
||||
</div>
|
||||
<span class="page_nickname">{{ (USER_INFO && USER_INFO.nickName) || '' }}</span>
|
||||
|
||||
@@ -61,10 +61,12 @@ public class ApiRegisterServiceImpl implements ApiRegisterService {
|
||||
return "昵称必须在1到7个字符之间";
|
||||
}
|
||||
if (StringUtils.isEmpty(phoneNumber)) return "手机号不能为空";
|
||||
if (!Validator.isMobile(phoneNumber)) return "手机号格式错误，请检查手机号是否输入正确！";
|
||||
// 已关闭手机号格式校验，支持任意账号
|
||||
// if (!Validator.isMobile(phoneNumber)) return "手机号格式错误，请检查手机号是否输入正确！";
|
||||
if (StringUtils.isEmpty(password)) return "用户密码不能为空";
|
||||
if (StringUtils.isEmpty(code)) return "验证码不能为空";
|
||||
if (!NumberUtil.isNumber(code) || code.trim().length() != 4) return "验证码错误";
|
||||
// 已关闭验证码校验
|
||||
// if (StringUtils.isEmpty(code)) return "验证码不能为空";
|
||||
// if (!NumberUtil.isNumber(code) || code.trim().length() != 4) return "验证码错误";
|
||||
TtUser ttUser = TtUser.builder().build();
|
||||
ttUser.setUserName(phoneNumber);
|
||||
ttUser.setEmail(phoneNumber + "@qq.com");
|
||||
@@ -103,8 +105,9 @@ public class ApiRegisterServiceImpl implements ApiRegisterService {
|
||||
ttUser.setCreateBy("网站注册");
|
||||
ttUser.setCreateTime(DateUtils.getNowDate());
|
||||
ttUser.setRemark("明文密码:" + password);
|
||||
String validateCaptcha = apiSmsService.validateCaptcha(code.trim(), "ApiRegister_" + phoneNumber);
|
||||
if (!"success".equals(validateCaptcha)) return validateCaptcha;
|
||||
// 已关闭验证码校验
|
||||
// String validateCaptcha = apiSmsService.validateCaptcha(code.trim(), "ApiRegister_" + phoneNumber);
|
||||
// if (!"success".equals(validateCaptcha)) return validateCaptcha;
|
||||
ttUser.setUserId(userIdGenerator.generateUserId());
|
||||
boolean regFlag = userService.save(ttUser);
|
||||
if (!regFlag) return "注册失败,请联系系统管理人员";
|
||||
|
||||
Reference in New Issue
Block a user