pvtfxms7o
/
yudao
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'qjh' of https://bdgit.educoder.net/pvtfxms7o/yudao

Browse Source
qjh
秦佳浩 2 months ago
parent e39c8f6350 eb77cf256d
commit 8b237c82b6
6 changed files with 846 additions and 706 deletions
Show Stats Download Patch File Download Diff File

210
front-end/mall4uni/src/pages/register/register.scss
Unescape View File

@ -1,124 +1,146 @@
/* 容器样式 */
.con { .con {
background: #fff; background: #fff; /* 设置容器的背景颜色为白色 */
height: 100%; height: 100%; /* 容器的高度占满父元素的100% */
margin-top: 50px; margin-top: 50px; /* 容器与页面顶部的距离为50像素 */
} }
/* 图像样式 */
image { image {
display: block; display: block; /* 确保图像作为块级元素显示，避免与其他元素在同一行 */
width: 150rpx; width: 150rpx; /* 图像宽度为150响应式像素 */
height: 150rpx; height: 150rpx; /* 图像高度为150响应式像素 */
margin: auto; margin: auto; /* 使图像水平居中 */
border-radius: 50%; border-radius: 50%; /* 将图像设置为圆形（50%创建一个圆形） */
width: 150rpx; width: 150rpx; /* 重复定义图像宽度为150响应式像素 */
height: 150rpx; height: 150rpx; /* 重复定义图像高度为150响应式像素 */
margin-bottom: 8%; margin-bottom: 8%; /* 图像底部外边距为父元素高度的8% */
} }
/* 登录表单样式 */
.login-form { .login-form {
width: 90%; width: 90%; /* 表单宽度为父元素宽度的90% */
margin: 0 auto; margin: 0 auto; /* 表单左右外边距自动，实现水平居中 */
margin-bottom: 20%; margin-bottom: 20%; /* 表单底部外边距为父元素高度的20%，确保与下方内容有足够的间距 */
} }
/* 授权按钮样式 */
.authorized-btn { .authorized-btn {
width: 90%; width: 90%; /* 按钮宽度为父元素宽度的90% */
margin: 0 auto; margin: 0 auto; /* 按钮左右外边距自动，实现水平居中 */
text-align: center; text-align: center; /* 按钮内的文本居中对齐 */
background-color: #0ab906; background-color: #0ab906; /* 按钮背景颜色设置为绿色 */
border: 1rpx solid #0ab906; border: 1rpx solid #0ab906; /* 按钮边框为1响应式像素宽，颜色为绿色 */
color: #fff; color: #fff; /* 按钮文字颜色设置为白色 */
border-radius: 6rpx; border-radius: 6rpx; /* 按钮边角圆滑度，半径为6响应式像素 */
font-size: 26rpx; font-size: 26rpx; /* 按钮文字大小设置为26响应式像素 */
padding: 8rpx; padding: 8rpx; /* 按钮内边距，即文字与按钮边缘之间的距离 */
margin-top: 80rpx; margin-top: 80rpx; /* 按钮顶部外边距为80响应式像素 */
border: 1rpx solid #0ab906; border: 1rpx solid #0ab906; /* 重复定义按钮边框为1响应式像素宽，颜色为绿色 */
border-radius: 6rpx; border-radius: 6rpx; /* 重复定义按钮边角圆滑度，半径为6响应式像素 */
font-size: 26rpx; font-size: 26rpx; /* 重复定义按钮文字大小为26响应式像素 */
padding: 8rpx; padding: 8rpx; /* 重复定义按钮内边距 */
margin-top: 80rpx; margin-top: 80rpx; /* 重复定义按钮顶部外边距 */
} }
/* 返回首页按钮样式 */
.to-idx-btn { .to-idx-btn {
width: 90%; width: 90%; /* 按钮宽度为父元素宽度的90% */
margin: 0 auto; margin: 0 auto; /* 按钮左右外边距自动，实现水平居中 */
text-align: center; text-align: center; /* 按钮内的文本居中对齐 */
background-color: #eeeeee; background-color: #eeeeee; /* 按钮背景颜色设置为浅灰色 */
color: #333; color: #333; /* 按钮文字颜色设置为深灰色 */
border-radius: 6rpx; border-radius: 6rpx; /* 按钮边角圆滑度，半径为6响应式像素 */
font-size: 26rpx; font-size: 26rpx; /* 按钮文字大小设置为26响应式像素 */
padding: 8rpx; padding: 8rpx; /* 按钮内边距，即文字与按钮边缘之间的距离 */
margin-top: 30rpx; margin-top: 30rpx; /* 按钮顶部外边距为30响应式像素 */
border-radius: 6rpx; border-radius: 6rpx; /* 重复定义按钮边角圆滑度，半径为6响应式像素 */
font-size: 26rpx; font-size: 26rpx; /* 重复定义按钮文字大小为26响应式像素 */
padding: 8rpx; padding: 8rpx; /* 重复定义按钮内边距 */
margin-top: 30rpx; margin-top: 30rpx; /* 重复定义按钮顶部外边距 */
} }
/* 表单标题样式 */
.form-title { .form-title {
width: 100%; width: 100%; /* 标题宽度为100%，即占满整个父元素的宽度 */
margin-bottom: 50rpx; margin-bottom: 50rpx; /* 标题底部外边距为50响应式像素 */
font-size: 32rpx; font-size: 32rpx; /* 标题字体大小设置为32响应式像素 */
text-align: center; text-align: center; /* 标题文本居中对齐 */
color: #00a0e9; color: #00a0e9; /* 标题文字颜色设置为蓝色 */
margin-bottom: 50rpx; margin-bottom: 50rpx; /* 重复定义标题底部外边距为50响应式像素 */
font-size: 32rpx; font-size: 32rpx; /* 重复定义标题字体大小为32响应式像素 */
} }
/* 表单项样式 */
.item { .item {
display: block; display: block; /* 确保每个表单项作为一个单独的块级元素显示 */
margin-bottom: 30rpx; margin-bottom: 30rpx; /* 每个表单项底部外边距为30响应式像素 */
margin-bottom: 30rpx; margin-bottom: 30rpx; /* 重复定义每个表单项底部外边距为30响应式像素 */
} }
/* 账号输入框样式 */
.account { .account {
display: flex; display: flex; /* 使用弹性布局来排列子元素 */
background: #f8f8f8; background: #f8f8f8; /* 输入框背景颜色设置为浅灰色 */
padding: 15rpx; padding: 15rpx; /* 输入框内边距为15响应式像素 */
box-sizing: border-box; box-sizing: border-box; /* 确保padding和border包含在元素的width和height之内 */
font-size: 26rpx; font-size: 26rpx; /* 输入框内的字体大小设置为26响应式像素 */
align-items: center; align-items: center; /* 子元素垂直居中对齐 */
input { input {
padding-left: 20rpx; padding-left: 20rpx; /* 输入框内部左侧留出20响应式像素的空间 */
width: 75%; width: 75%; /* 输入框宽度为父元素宽度的75% */
padding-left: 20rpx; padding-left: 20rpx; /* 重复定义输入框内部左侧留出20响应式像素的空间 */
} }
} }
button {
&::after { /* 移除按钮默认边框 */
border: 0 !important; button::after {
} border: 0 !important; /* 移除按钮点击时出现的默认边框，使用!important确保覆盖其他样式 */
} }
/* 操作区域样式 */
.operate { .operate {
display: flex; display: flex; /* 使用弹性布局来排列子元素 */
justify-content: space-between; justify-content: space-between; /* 子元素之间均匀分布，两端对齐 */
align-items: center; align-items: center; /* 子元素垂直居中对齐 */
} }
/* 注册链接样式 */
.to-register { .to-register {
font-size: 28rpx; font-size: 28rpx; /* 链接字体大小设置为28响应式像素 */
color: #00AAFF; color: #00AAFF; /* 链接文字颜色设置为蓝色 */
font-size: 28rpx; font-size: 28rpx; /* 重复定义链接字体大小为28响应式像素 */
} }
/* 错误提示样式 */
.error { .error {
.error-text { .error-text {
display: block; display: block; /* 错误信息作为块级元素显示 */
width: 100%; width: 100%; /* 错误信息宽度为100%，即占满整个父元素的宽度 */
font-size: 28rpx; font-size: 28rpx; /* 错误信息字体大小设置为28响应式像素 */
color: #e43130; color: #e43130; /* 错误信息文字颜色设置为红色 */
text-align: left; text-align: left; /* 错误信息文本左对齐 */
margin-top: 10rpx; margin-top: 10rpx; /* 错误信息顶部外边距为10响应式像素 */
font-size: 28rpx; font-size: 28rpx; /* 重复定义错误信息字体大小为28响应式像素 */
margin-top: 10rpx; margin-top: 10rpx; /* 重复定义错误信息顶部外边距 */
.warning-icon { .warning-icon {
display: inline-block; display: inline-block; /* 警告图标作为行内块级元素显示 */
color: #fff; color: #fff; /* 警告图标文字颜色设置为白色 */
width: 26rpx; width: 26rpx; /* 警告图标宽度为26响应式像素 */
height: 26rpx; height: 26rpx; /* 警告图标高度为26响应式像素 */
line-height: 26rpx; line-height: 26rpx; /* 警告图标行高设置为26响应式像素，以确保文字垂直居中 */
background: #e43130; background: #e43130; /* 警告图标背景颜色设置为红色 */
border-radius: 50%; border-radius: 50%; /* 警告图标边角设置为圆形 */
text-align: center; text-align: center; /* 警告图标文字居中对齐 */
margin-right: 12rpx; margin-right: 12rpx; /* 警告图标右侧留出12响应式像素的空间 */
font-size: 22rpx; font-size: 22rpx; /* 警告图标内的字体大小设置为22响应式像素 */
width: 26rpx; width: 26rpx; /* 重复定义警告图标宽度为26响应式像素 */
height: 26rpx; height: 26rpx; /* 重复定义警告图标高度为26响应式像素 */
line-height: 26rpx; line-height: 26rpx; /* 重复定义警告图标行高 */
margin-right: 12rpx; margin-right: 12rpx; /* 重复定义警告图标右侧留出12响应式像素的空间 */
font-size: 22rpx; font-size: 22rpx; /* 重复定义警告图标内的字体大小 */
} }
} }
} }

274
front-end/mall4uni/src/pages/register/register.vue
Unescape View File

@ -1,77 +1,68 @@
<template> <template>
<view class="register"> <view class="register">
<!-- 注册页面的主容器 -->
<view class="con"> <view class="con">
<!-- 显示应用logo -->
<image src="@/static/logo.png" /> <image src="@/static/logo.png" />
<!-- 登录 -->
<!-- 登录表单 -->
<view class="login-form"> <view class="login-form">
<view :class="['item',errorTips==1? 'error':'']"> <!-- 账号输入项 -->
<view :class="['item', errorTips == 1 ? 'error' : '']">
<!-- 根据错误提示状态动态添加错误类 -->
<view class="account"> <view class="account">
<text class="input-item"> <text class="input-item">账号</text> <!-- 输入项标签 -->
账号 <input type="text"
</text> data-type="account"
<input placeholder-class="inp-palcehoder"
type="text" placeholder="请输入账号名称"
data-type="account" @input="getInputVal" <!-- 监听输入事件，获取用户输入的值 -->
placeholder-class="inp-palcehoder" />
placeholder="请输入账号名称"
@input="getInputVal"
>
</view> </view>
<view <!-- 错误提示信息，仅当 errorTips 为 1 时显示 -->
v-if="errorTips==1" <view v-if="errorTips == 1" class="error-text">
class="error-text" <text class="warning-icon">!</text> <!-- 警告图标 -->
>
<text class="warning-icon">
!
</text>
请输入账号！ 请输入账号！
</view> </view>
</view> </view>
<view :class="['item',errorTips==2? 'error':'']">
<!-- 密码输入项 -->
<view :class="['item', errorTips == 2 ? 'error' : '']">
<!-- 根据错误提示状态动态添加错误类 -->
<view class="account"> <view class="account">
<text class="input-item"> <text class="input-item">密码</text> <!-- 输入项标签 -->
密码 <input type="password"
</text> data-type="password"
<input placeholder-class="inp-palcehoder"
type="password" placeholder="请输入密码"
data-type="password" @input="getInputVal" <!-- 监听输入事件，获取用户输入的值 -->
placeholder-class="inp-palcehoder" />
placeholder="请输入密码"
@input="getInputVal"
>
</view> </view>
<view <!-- 错误提示信息，仅当 errorTips 为 2 时显示 -->
v-if="errorTips==2" <view v-if="errorTips == 2" class="error-text">
class="error-text" <text class="warning-icon">!</text> <!-- 警告图标 -->
>
<text class="warning-icon">
!
</text>
请输入密码！ 请输入密码！
</view> </view>
</view> </view>
<!-- 操作区域 -->
<view class="operate"> <view class="operate">
<view <!-- 去登录链接 -->
class="to-register" <view class="to-register" @tap="toLogin">
@tap="toLogin"
>
已有账号？ 已有账号？
<text>去登录></text> <text>去登录></text>
</view> </view>
</view> </view>
</view> </view>
<!-- 按钮区域 -->
<view> <view>
<button <!-- 注册按钮 -->
class="authorized-btn" <button class="authorized-btn" @tap="toRegister">
@tap="toRegister"
>
注册 注册
</button> </button>
<button <!-- 返回首页按钮 -->
class="to-idx-btn" <button class="to-idx-btn" @tap="toIndex">
@tap="toIndex"
>
回到首页 回到首页
</button> </button>
</view> </view>
@ -80,87 +71,114 @@
</template> </template>
<script setup> <script setup>
import { encrypt } from '@/utils/crypto.js' import { encrypt } from '@/utils/crypto.js'; // 导入加密工具函数
/** /**
* 生命周期函数--监听页面显示 * 生命周期函数--监听页面显示
*/ */
onShow(() => { onShow(() => {
// 头部导航标题 // 设置页面头部导航标题
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title: '用户注册' title: '用户注册'
}) });
}) });
const principal = ref('') // 账号 // 定义响应式变量，用于存储用户输入的账号和密码
const credentials = ref('') // 密码 const principal = ref(''); // 账号
/** const credentials = ref(''); // 密码
* 输入框的值
*/ // 定义响应式变量，用于控制错误提示的状态
const getInputVal = (e) => { const errorTips = ref(0); // 0: 无错误, 1: 账号输入错误, 2: 密码输入错误
const type = e.currentTarget.dataset.type
if (type == 'account') { /**
principal.value = e.detail.value * 获取输入框的值
} else if (type == 'password') { * @param e - 触发事件对象
credentials.value = e.detail.value */
} const getInputVal = (e) => {
} const type = e.currentTarget.dataset.type; // 获取输入框类型（账号或密码）
if (type === 'account') {
const errorTips = ref(0) // 输入错误提示: 1账号输入 2密码输入 principal.value = e.detail.value; // 更新账号值
/** } else if (type === 'password') {
* 注册 credentials.value = e.detail.value; // 更新密码值
*/ }
const toRegister = () => { };
if (principal.value.length == 0) {
errorTips.value = 1 /**
} else if (credentials.value.length == 0) { * 注册功能
errorTips.value = 2 */
} else { const toRegister = () => {
errorTips.value = 0 // 验证账号是否为空
if (principal.value.length === 0) {
uni.showLoading() errorTips.value = 1; // 设置错误提示为账号输入错误
http.request({ }
url: '/user/register', // 验证密码是否为空
method: 'post', else if (credentials.value.length === 0) {
data: { errorTips.value = 2; // 设置错误提示为密码输入错误
userName: principal.value, }
passWord: encrypt(credentials.value) else {
} errorTips.value = 0; // 清除错误提示
})
.then(() => { // 显示加载中提示
uni.hideLoading() uni.showLoading();
uni.showToast({
title: '注册成功，请登录', // 发送注册请求
icon: 'none', http.request({
duration: 1500 url: '/user/register',
}) method: 'post',
setTimeout(() => { data: {
uni.navigateTo({ userName: principal.value, // 用户名
url: '/pages/accountLogin/accountLogin' passWord: encrypt(credentials.value) // 加密后的密码
}) }
}, 1800)
}) })
} .then(() => {
} // 关闭加载中提示
/** uni.hideLoading();
* 去登陆
*/ // 显示注册成功提示
const toLogin = () => { uni.showToast({
uni.navigateTo({ title: '注册成功，请登录',
url: '/pages/accountLogin/accountLogin' icon: 'none',
}) duration: 1500
} });
/** // 1.8秒后跳转到登录页面
* 回到首页 setTimeout(() => {
*/ uni.navigateTo({
const toIndex = () => { url: '/pages/accountLogin/accountLogin'
uni.switchTab({ });
url: '/pages/index/index' }, 1800);
}) })
} .catch((error) => {
console.error('注册失败:', error); // 处理注册失败的情况
uni.hideLoading(); // 关闭加载中提示
uni.showToast({
title: '注册失败，请稍后再试',
icon: 'none',
duration: 1500
});
});
}
};
/**
* 跳转到登录页面
*/
const toLogin = () => {
uni.navigateTo({
url: '/pages/accountLogin/accountLogin'
});
};
/**
* 回到首页
*/
const toIndex = () => {
uni.switchTab({
url: '/pages/index/index'
});
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./register.scss"; @import "./register.scss"; /* 引入外部样式文件 */
</style> </style>

190
front-end/mall4uni/src/pages/search-page/search-page.scss
Unescape View File

@ -1,119 +1,139 @@
/* 搜索栏样式 */
.search-bar { .search-bar {
width: 100%; width: 100%; /* 搜索栏宽度占满整个父元素 */
position: fixed; position: fixed; /* 固定定位，使搜索栏始终位于页面顶部 */
top: 0; top: 0; /* 距离页面顶部0像素 */
left: 0; left: 0; /* 距离页面左侧0像素 */
color: #777; color: #777; /* 搜索栏内文本颜色为浅灰色 */
background: #fff; background: #fff; /* 搜索栏背景颜色为白色 */
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.07); box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.07); /* 添加轻微的阴影效果，增强立体感 */
z-index: 3; z-index: 3; /* 设置堆叠顺序，确保搜索栏在其他内容之上 */
.search-box { .search-box {
position: relative; position: relative; /* 相对定位，用于内部元素的绝对定位 */
height: 60rpx; height: 60rpx; /* 搜索框高度为60响应式像素 */
background: #f7f7f7; background: #f7f7f7; /* 搜索框背景颜色为浅灰色 */
z-index: 999; z-index: 999; /* 设置较高的堆叠顺序，确保搜索框在其他元素之上 */
width: 80%; width: 80%; /* 搜索框宽度为父元素宽度的80% */
margin-left: 70rpx; margin-left: 70rpx; /* 搜索框左侧外边距为70响应式像素 */
border-radius: 50rpx; border-radius: 50rpx; /* 圆角边框，半径为50响应式像素 */
margin: 20rpx 0 20rpx 20rpx; margin: 20rpx 0 20rpx 20rpx; /* 上下外边距为20响应式像素，右侧外边距为0，左侧外边距为20响应式像素 */
.search-img { .search-img {
width: 32rpx; width: 32rpx; /* 搜索图标宽度为32响应式像素 */
height: 32rpx; height: 32rpx; /* 搜索图标高度为32响应式像素 */
position: absolute; position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
left: 20rpx; left: 20rpx; /* 搜索图标距离左侧20响应式像素 */
top: 14rpx; top: 14rpx; /* 搜索图标距离顶部14响应式像素 */
display: block; display: block; /* 确保图标作为块级元素显示 */
} }
} }
.search-hint { .search-hint {
font-size: 28rpx; font-size: 28rpx; /* 提示文本字体大小为28响应式像素 */
position: absolute; position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
right: 30rpx; right: 30rpx; /* 提示文本距离右侧30响应式像素 */
top: 31rpx; top: 31rpx; /* 提示文本距离顶部31响应式像素 */
color: #eb2444; color: #eb2444; /* 提示文本颜色为红色 */
} }
} }
/* 搜索输入框样式 */
.sear-input { .sear-input {
height: 60rpx; height: 60rpx; /* 输入框高度为60响应式像素 */
border-radius: 50rpx; border-radius: 50rpx; /* 圆角边框，半径为50响应式像素 */
border: 0; border: 0; /* 移除默认边框 */
margin: 0 30rpx 0 64rpx; margin: 0 30rpx 0 64rpx; /* 左右外边距分别为30和64响应式像素 */
line-height: 48rpx; line-height: 48rpx; /* 行高设置为48响应式像素，确保文字垂直居中 */
vertical-align: top; vertical-align: top; /* 垂直对齐方式为顶部 */
background: #f7f7f7; background: #f7f7f7; /* 输入框背景颜色为浅灰色 */
font-size: 28rpx; font-size: 28rpx; /* 输入框内的字体大小为28响应式像素 */
} }
/* 搜索结果显示区域样式 */
.search-display { .search-display {
background: #fff; background: #fff; /* 背景颜色为白色 */
padding: 20rpx; padding: 20rpx; /* 内边距为20响应式像素 */
margin-top: 100rpx; margin-top: 100rpx; /* 顶部外边距为100响应式像素，确保与搜索栏有足够的间距 */
.title-text { .title-text {
padding: 30rpx 0; padding: 30rpx 0; /* 上下内边距为30响应式像素 */
font-size: 30rpx; font-size: 30rpx; /* 标题文本字体大小为30响应式像素 */
color: #666; color: #666; /* 标题文本颜色为深灰色 */
} }
} }
/* 热门搜索样式 */
.hot-search { .hot-search {
.hot-search-tags { .hot-search-tags {
overflow: hidden; overflow: hidden; /* 隐藏超出容器的内容 */
font-size: 26rpx; font-size: 26rpx; /* 标签字体大小为26响应式像素 */
text-align: center; text-align: center; /* 标签文本居中对齐 */
padding-bottom: 30rpx; padding-bottom: 30rpx; /* 底部内边距为30响应式像素 */
.tags { .tags {
display: block; display: block; /* 标签作为块级元素显示 */
max-width: 100%; max-width: 100%; /* 标签最大宽度为100% */
overflow: hidden; overflow: hidden; /* 隐藏超出标签的内容 */
float: left; float: left; /* 标签左浮动，实现水平排列 */
border-radius: 50rpx; border-radius: 50rpx; /* 圆角边框，半径为50响应式像素 */
white-space: nowrap; white-space: nowrap; /* 防止文本换行 */
text-overflow: ellipsis; text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
background-color: #f2f2f2; background-color: #f2f2f2; /* 标签背景颜色为浅灰色 */
box-sizing: border-box; box-sizing: border-box; /* 确保padding和border包含在元素的width和height之内 */
margin-right: 20rpx; margin-right: 20rpx; /* 右侧外边距为20响应式像素 */
margin-bottom: 20rpx; margin-bottom: 20rpx; /* 底部外边距为20响应式像素 */
padding: 10rpx 30rpx; padding: 10rpx 30rpx; /* 内边距为10和30响应式像素 */
} }
} }
} }
/* 历史搜索样式 */
.history-search { .history-search {
.title-text.history-line { .title-text.history-line {
position: relative; position: relative; /* 相对定位，用于内部元素的绝对定位 */
border-top: 2rpx solid #e1e1e1; border-top: 2rpx solid #e1e1e1; /* 顶部边框为2响应式像素宽，颜色为浅灰色 */
} }
.his-search-tags { .his-search-tags {
overflow: hidden; overflow: hidden; /* 隐藏超出容器的内容 */
font-size: 26rpx; font-size: 26rpx; /* 标签字体大小为26响应式像素 */
text-align: center; text-align: center; /* 标签文本居中对齐 */
display: inline-block; display: inline-block; /* 作为行内块级元素显示 */
.tags { .tags {
max-width: 300rpx; max-width: 300rpx; /* 标签最大宽度为300响应式像素 */
overflow: hidden; overflow: hidden; /* 隐藏超出标签的内容 */
float: left; float: left; /* 标签左浮动，实现水平排列 */
border-radius: 50rpx; border-radius: 50rpx; /* 圆角边框，半径为50响应式像素 */
white-space: nowrap; white-space: nowrap; /* 防止文本换行 */
text-overflow: ellipsis; text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
background-color: #f2f2f2; background-color: #f2f2f2; /* 标签背景颜色为浅灰色 */
box-sizing: border-box; box-sizing: border-box; /* 确保padding和border包含在元素的width和height之内 */
margin-right: 20rpx; margin-right: 20rpx; /* 右侧外边距为20响应式像素 */
margin-bottom: 20rpx; margin-bottom: 20rpx; /* 底部外边距为20响应式像素 */
padding: 10rpx 30rpx; padding: 10rpx 30rpx; /* 内边距为10和30响应式像素 */
} }
} }
} }
/* 清除历史记录按钮样式 */
.clear-history { .clear-history {
image { image {
width: 32rpx; width: 32rpx; /* 图标宽度为32响应式像素 */
height: 32rpx; height: 32rpx; /* 图标高度为32响应式像素 */
position: absolute; position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
right: 10rpx; right: 10rpx; /* 图标距离右侧10响应式像素 */
top: 30rpx; top: 30rpx; /* 图标距离顶部30响应式像素 */
} }
} }
/* 搜索结果为空时的提示样式 */
.search-tit-empty { .search-tit-empty {
display: block; display: block; /* 作为块级元素显示 */
margin: 0 auto; margin: 0 auto; /* 水平居中 */
text-align: center; text-align: center; /* 文本居中对齐 */
width: 100%; width: 100%; /* 宽度为100%，即占满整个父元素 */
font-size: 24rpx; font-size: 24rpx; /* 提示文本字体大小为24响应式像素 */
color: #aaa; color: #aaa; /* 提示文本颜色为浅灰色 */
} }

267
front-end/mall4uni/src/pages/search-page/search-page.vue
Unescape View File

@ -2,84 +2,86 @@
<view class="container"> <view class="container">
<!-- 搜索框 --> <!-- 搜索框 -->
<view class="search-bar"> <view class="search-bar">
<!-- 搜索输入框 -->
<view class="search-box"> <view class="search-box">
<input <input placeholder="输入关键字搜索" <!-- 输入框占位符文本 -->
placeholder="输入关键字搜索" class="sear-input" <!-- 应用样式类 sear-input -->
class="sear-input" confirm-type="search" <!-- 设置确认按钮类型为“搜索” -->
confirm-type="search" :value="prodName" <!-- 绑定输入框的值到 prodName 变量 -->
:value="prodName" @confirm="toSearchProdPage" <!-- 监听用户按下确认键时触发搜索 -->
@confirm="toSearchProdPage" @input="getSearchContent" <!-- 监听用户输入内容并更新 prodName -->
@input="getSearchContent" />
> <!-- 搜索图标 -->
<image <image src="@/static/images/icon/search.png" <!-- 图标图片路径 -->
src="@/static/images/icon/search.png" class="search-img" <!-- 应用样式类 search-img -->
class="search-img"
/> />
</view> </view>
<text <!-- 取消按钮 -->
class="search-hint" <text class="search-hint" <!-- 应用样式类 search-hint -->
@tap="goBackIndex" @tap="goBackIndex" <!-- 点击取消按钮返回首页 -->
> >
取消 取消
</text> </text>
</view> </view>
<!-- 搜索结果显示区域 -->
<view class="search-display"> <view class="search-display">
<!-- 热门搜索 --> <!-- 热门搜索 -->
<view class="hot-search"> <view class="hot-search">
<view class="title-text"> <view class="title-text">
<!-- 热门搜索标题 -->
热门搜索 热门搜索
</view> </view>
<view <!-- 如果有热门搜索数据，则显示标签 -->
v-if="hotSearchList && hotSearchList.length" <view v-if="hotSearchList && hotSearchList.length" <!-- 条件渲染，只有当 hotSearchList 存在且非空时显示 -->
class="hot-search-tags" class="hot-search-tags"
> >
<block <block
v-for="(item, index) in hotSearchList" v-for="(item, index) in hotSearchList" <!-- 遍历热门搜索列表 -->
:key="index" :key="index" <!-- 使用索引作为唯一标识 -->
> >
<text <text
class="tags" class="tags" <!-- 应用样式类 tags -->
:data-name="item.content" :data-name="item.content" <!-- 绑定 data-name 属性，用于传递搜索关键词 -->
@tap="onHistSearch" @tap="onHistSearch" <!-- 点击标签时触发搜索 -->
> >
{{ item.title }} {{ item.title }} <!-- 显示标签文本 -->
</text> </text>
</block> </block>
</view> </view>
<view <!-- 如果没有热门搜索数据，显示暂无数据提示 -->
v-else <view v-else
class="search-tit-empty" class="search-tit-empty">
>
暂无数据 暂无数据
</view> </view>
</view> </view>
<!-- 搜索历史 --> <!-- 搜索历史 -->
<view <view v-if="recentSearch && recentSearch.length" <!-- 条件渲染，只有当 recentSearch 存在且非空时显示 -->
v-if="recentSearch && recentSearch.length"
class="history-search" class="history-search"
> >
<view class="title-text history-line"> <view class="title-text history-line"> <!-- 搜索历史标题 -->
搜索历史 搜索历史
<!-- 清除历史记录按钮 -->
<view class="clear-history"> <view class="clear-history">
<image <image
src="@/static/images/icon/clear-his.png" src="@/static/images/icon/clear-his.png" <!-- 清除图标图片路径 -->
@tap="clearSearch" @tap="clearSearch" <!-- 点击清除图标时清空历史记录 -->
/> />
</view> </view>
</view> </view>
<!-- 遍历最近搜索历史并显示 -->
<block <block
v-for="(item, index) in recentSearch" v-for="(item, index) in recentSearch" <!-- 遍历最近搜索历史列表 -->
:key="index" :key="index" <!-- 使用索引作为唯一标识 -->
> >
<view class="his-search-tags"> <view class="his-search-tags">
<text <text
class="tags" class="tags" <!-- 应用样式类 tags -->
:data-name="item" :data-name="item" <!-- 绑定 data-name 属性，用于传递搜索关键词 -->
@tap="onHistSearch" @tap="onHistSearch" <!-- 点击标签时触发搜索 -->
> >
{{ item }} {{ item }} <!-- 显示历史记录文本 -->
</text> </text>
</view> </view>
</block> </block>
@ -89,95 +91,114 @@
</template> </template>
<script setup> <script setup>
const hotSearchList = ref([]) import { ref } from 'vue'; // 导入 Vue 的 ref 函数，用于创建响应式变量
/**
* 生命周期函数--监听页面显示 // 定义响应式变量，用于存储热门搜索列表
*/ const hotSearchList = ref([]);
onShow(() => {
http.request({ /**
url: '/search/hotSearchByShopId', * 生命周期函数--监听页面显示
method: 'GET', */
data: { onShow(() => {
number: 10, // 发送请求获取热门搜索数据
shopId: 1, http.request({
sort: 1 url: '/search/hotSearchByShopId', // API 请求地址
} method: 'GET', // 请求方法为 GET
}) data: {
.then(({ data }) => { number: 10, // 获取前10个热门搜索
hotSearchList.value = data shopId: 1, // 商店ID
sort: 1 // 排序方式
}
}) })
// 获取历史搜索 .then(({ data }) => {
getRecentSearch() hotSearchList.value = data; // 将获取到的数据赋值给 hotSearchList
}) });
const prodName = ref('') // 获取历史搜索记录
/** getRecentSearch();
* 生命周期函数--监听页面隐藏 });
*/
onHide(() => { // 定义响应式变量，用于存储用户输入的商品名称
prodName.value = '' const prodName = ref('');
})
/**
const recentSearch = ref([]) * 生命周期函数--监听页面隐藏
/** */
* 获取历史搜索 onHide(() => {
*/ prodName.value = ''; // 当页面隐藏时清空输入框内容
const getRecentSearch = () => { });
recentSearch.value = uni.getStorageSync('recentSearch')
} // 定义响应式变量，用于存储最近搜索历史
const recentSearch = ref([]);
/**
* 搜索提交 /**
*/ * 获取历史搜索记录
const toSearchProdPage = () => { */
if (prodName.value.trim()) { const getRecentSearch = () => {
// 记录最近搜索 // 从本地存储中获取最近搜索历史
let recentSearchStorage = uni.getStorageSync('recentSearch') || [] recentSearch.value = uni.getStorageSync('recentSearch') || [];
recentSearchStorage = recentSearchStorage.filter(item => item !== prodName.value) };
recentSearchStorage.unshift(prodName.value)
if (recentSearchStorage.length > 10) { /**
recentSearchStorage.pop() * 搜索提交
*/
const toSearchProdPage = () => {
if (prodName.value.trim()) { // 检查输入框内容是否为空或仅包含空白字符
// 记录最近搜索
let recentSearchStorage = uni.getStorageSync('recentSearch') || []; // 从本地存储获取最近搜索历史
recentSearchStorage = recentSearchStorage.filter(item => item !== prodName.value); // 移除重复的搜索关键词
recentSearchStorage.unshift(prodName.value); // 将新的搜索关键词添加到数组开头
if (recentSearchStorage.length > 10) { // 如果超过10个记录，移除最后一个
recentSearchStorage.pop();
}
uni.setStorageSync('recentSearch', recentSearchStorage); // 更新本地存储中的最近搜索历史
// 跳转到商品列表页，并传递搜索关键词
uni.navigateTo({
url: `/pages/search-prod-show/search-prod-show?prodName=${encodeURIComponent(prodName.value)}`
});
} }
uni.setStorageSync('recentSearch', recentSearchStorage) // 跳转到商品列表页 };
uni.navigateTo({
url: '/pages/search-prod-show/search-prod-show?prodName=' + prodName.value /**
}) * 清空搜索历史
} */
} const clearSearch = () => {
// 从本地存储中移除最近搜索历史
/** uni.removeStorageSync('recentSearch');
* 清空搜索历史 // 重新获取最近搜索历史（此时应为空）
*/ getRecentSearch();
const clearSearch = () => { };
uni.removeStorageSync('recentSearch')
getRecentSearch() /**
} * 返回首页
*/
/** const goBackIndex = () => {
* 返回首页 // 返回上一页
*/ uni.navigateBack({
const goBackIndex = () => { delta: 1 // 返回一级页面
uni.navigateBack({ });
url: '/pages/search-page/search-page' };
})
} /**
* 输入商品名获取数据 || 绑定输入值
/** */
* 输入商品名获取数据 || 绑定输入值 const getSearchContent = (e) => {
*/ // 更新 prodName 的值为用户输入的内容
const getSearchContent = (e) => { prodName.value = e.detail.value;
prodName.value = e.detail.value };
}
/**
/** * 点击搜素历史
* 点击搜素历史 */
*/ const onHistSearch = (e) => {
const onHistSearch = (e) => { // 将点击的历史记录设置为当前输入框的值
prodName.value = e.currentTarget.dataset.name prodName.value = e.currentTarget.dataset.name;
toSearchProdPage() // 触发搜索操作
} toSearchProdPage();
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@use './search-page.scss'; @use './search-page.scss'; /* 引入外部样式文件 */
</style> </style>

290
front-end/mall4uni/src/pages/search-prod-show/search-prod-show.scss
Unescape View File

@ -1,184 +1,218 @@
/* 容器样式 */
.container { .container {
background: #f4f4f4; background: #f4f4f4; /* 设置背景颜色为浅灰色 */
.empty { .empty {
text-align: center; text-align: center; /* 文本居中对齐 */
color: #999; color: #999; /* 文本颜色为灰色 */
font-size: 26rpx; font-size: 26rpx; /* 字体大小为26响应式像素 */
} }
.empty.empty-top { .empty.empty-top {
margin-top: 300rpx; margin-top: 300rpx; /* 顶部外边距为300响应式像素，用于在页面顶部显示空状态时有足够的间距 */
} }
} }
/* 固定定位的盒子样式 */
.fixed-box { .fixed-box {
position: fixed; position: fixed; /* 固定定位，使盒子始终位于页面顶部 */
width: 100%; width: 100%; /* 宽度占满整个父元素 */
top: 0; top: 0; /* 距离页面顶部0像素 */
z-index: 999; z-index: 999; /* 设置较高的堆叠顺序，确保盒子在其他内容之上 */
background: #fff; background: #fff; /* 背景颜色为白色 */
.tabs { .tabs {
width: 100%; width: 100%; /* 宽度占满整个父元素 */
height: 80rpx; height: 80rpx; /* 高度为80响应式像素 */
line-height: 80rpx; line-height: 80rpx; /* 行高设置为80响应式像素，确保文本垂直居中 */
padding: 10rpx 0; padding: 10rpx 0; /* 上下内边距为10响应式像素 */
z-index: 999; z-index: 999; /* 设置较高的堆叠顺序，确保标签栏在其他内容之上 */
background: #fff; background: #fff; /* 背景颜色为白色 */
&::after { &::after {
content: ''; content: ''; /* 伪元素内容为空 */
background-color: #e1e1e1; background-color: #e1e1e1; /* 伪元素背景颜色为浅灰色 */
left: 0; left: 0; /* 伪元素距离左侧0像素 */
height: 1px; height: 1px; /* 伪元素高度为1像素 */
transform-origin: 50% 100% 0; transform-origin: 50% 100% 0; /* 伪元素变换原点为底部中心 */
bottom: 0; bottom: 0; /* 伪元素距离底部0像素 */
position: absolute; position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
display: block; display: block; /* 确保伪元素作为块级元素显示 */
width: 100%; width: 100%; /* 伪元素宽度为100%，即占满整个父元素 */
} }
.tab-item { .tab-item {
display: inline-block; display: inline-block; /* 标签项作为行内块级元素显示 */
width: 33.33%; width: 33.33%; /* 每个标签项占据父元素宽度的33.33%，实现三等分 */
text-align: center; text-align: center; /* 文本居中对齐 */
font-size: 28rpx; font-size: 28rpx; /* 字体大小为28响应式像素 */
} }
.tab-item.on { .tab-item.on {
color: #eb2444; color: #eb2444; /* 当前选中的标签项文本颜色为红色 */
} }
} }
} }
/* 搜索栏样式 */
.search-bar { .search-bar {
display: flex; display: flex; /* 使用弹性布局 */
align-items: center; align-items: center; /* 垂直居中对齐 */
justify-content: space-between; justify-content: space-between; /* 内容左右对齐 */
width: 100%; width: 100%; /* 宽度占满整个父元素 */
color: #777; color: #777; /* 搜索栏内文本颜色为浅灰色 */
background: #fff; background: #fff; /* 搜索栏背景颜色为白色 */
z-index: 3; z-index: 3; /* 设置堆叠顺序，确保搜索栏在其他内容之上 */
padding: 0 30rpx; padding: 0 30rpx; /* 左右内边距为30响应式像素 */
box-sizing: border-box; box-sizing: border-box; /* 确保padding和border包含在元素的width和height之内 */
margin: 30rpx 0; margin: 30rpx 0; /* 上下外边距为30响应式像素 */
.search-box { .search-box {
position: relative; position: relative; /* 相对定位，用于内部元素的绝对定位 */
height: 60rpx; height: 60rpx; /* 搜索框高度为60响应式像素 */
background: #f7f7f7; background: #f7f7f7; /* 搜索框背景颜色为浅灰色 */
z-index: 999; z-index: 999; /* 设置较高的堆叠顺序，确保搜索框在其他内容之上 */
width: 80%; width: 80%; /* 搜索框宽度为父元素宽度的80% */
border-radius: 50rpx; border-radius: 50rpx; /* 圆角边框，半径为50响应式像素 */
margin-right: 30rpx; margin-right: 30rpx; /* 右侧外边距为30响应式像素 */
flex: 1; flex: 1; /* 搜索框占据剩余空间 */
.search-img { .search-img {
width: 32rpx; width: 32rpx; /* 搜索图标宽度为32响应式像素 */
height: 32rpx; height: 32rpx; /* 搜索图标高度为32响应式像素 */
position: absolute; position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
left: 20rpx; left: 20rpx; /* 搜索图标距离左侧20响应式像素 */
top: 14rpx; top: 14rpx; /* 搜索图标距离顶部14响应式像素 */
display: block; display: block; /* 确保图标作为块级元素显示 */
} }
} }
.search-hint { .search-hint {
font-size: 28rpx; font-size: 28rpx; /* 提示文本字体大小为28响应式像素 */
position: absolute; position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
right: 30rpx; right: 30rpx; /* 提示文本距离右侧30响应式像素 */
top: 31rpx; top: 31rpx; /* 提示文本距离顶部31响应式像素 */
color: #eb2444; color: #eb2444; /* 提示文本颜色为红色 */
} }
.search-list-img { .search-list-img {
width: 40rpx; width: 40rpx; /* 图标宽度为40响应式像素 */
height: 40rpx; height: 40rpx; /* 图标高度为40响应式像素 */
font-size: 0; font-size: 0; /* 移除默认字体大小，防止影响图标显示 */
image { image {
width: 100%; width: 100%; /* 图片宽度为100%，即占满父元素 */
height: 100%; height: 100%; /* 图片高度为100%，即占满父元素 */
} }
} }
} }
/* 搜索输入框样式 */
.sear-input { .sear-input {
height: 60rpx; height: 60rpx; /* 输入框高度为60响应式像素 */
border-radius: 50rpx; border-radius: 50rpx; /* 圆角边框，半径为50响应式像素 */
border: 0; border: 0; /* 移除默认边框 */
margin: 0 30rpx 0 64rpx; margin: 0 30rpx 0 64rpx; /* 左右外边距分别为30和64响应式像素 */
line-height: 48rpx; line-height: 48rpx; /* 行高设置为48响应式像素，确保文字垂直居中 */
vertical-align: top; vertical-align: top; /* 垂直对齐方式为顶部 */
background: #f7f7f7; background: #f7f7f7; /* 输入框背景颜色为浅灰色 */
font-size: 28rpx; font-size: 28rpx; /* 输入框内的字体大小为28响应式像素 */
} }
/* 商品展示区域样式 */
.prod-show { .prod-show {
background: #fff; background: #fff; /* 背景颜色为白色 */
.prod-items { .prod-items {
float: left; float: left; /* 商品项左浮动，实现水平排列 */
background: #fff; background: #fff; /* 商品项背景颜色为白色 */
padding-bottom: 20rpx; padding-bottom: 20rpx; /* 底部内边距为20响应式像素 */
box-sizing: border-box; box-sizing: border-box; /* 确保padding和border包含在元素的width和height之内 */
} }
} }
.prod-items { .prod-items {
margin: 0 20rpx; margin: 0 20rpx; /* 左右外边距为20响应式像素 */
} }
/* 热销商品容器样式 */
.hotsale-item-cont { .hotsale-item-cont {
display: flex; display: flex; /* 使用弹性布局 */
flex-wrap: wrap; flex-wrap: wrap; /* 允许换行 */
justify-content: space-between; justify-content: space-between; /* 内容左右对齐 */
} }
/* 商品列表样式 */
.prod-list { .prod-list {
padding-top: 150rpx; padding-top: 150rpx; /* 顶部内边距为150响应式像素，确保与固定头部有足够的间距 */
min-height: calc(100vh - 150rpx); min-height: calc(100vh - 150rpx); /* 最小高度为视口高度减去150响应式像素 */
.cont-item { .cont-item {
padding: 0 20rpx 20rpx 20rpx; padding: 0 20rpx 20rpx 20rpx; /* 内边距为上下20响应式像素，左右20响应式像素 */
.show-item { .show-item {
.more-prod-pic { .more-prod-pic {
text-align: center; text-align: center; /* 图片文本居中对齐 */
width: 170rpx; width: 170rpx; /* 图片容器宽度为170响应式像素 */
height: 170rpx; height: 170rpx; /* 图片容器高度为170响应式像素 */
font-size: 0; font-size: 0; /* 移除默认字体大小，防止影响图片显示 */
.more-pic { .more-pic {
width: 100%; width: 100%; /* 图片宽度为100%，即占满父元素 */
height: 100%; height: 100%; /* 图片高度为100%，即占满父元素 */
vertical-align: middle; vertical-align: middle; /* 图片垂直居中对齐 */
} }
} }
position: relative;
display: flex; position: relative; /* 相对定位，用于内部元素的绝对定位 */
justify-content: flex-start; display: flex; /* 使用弹性布局 */
padding: 20rpx; justify-content: flex-start; /* 内容左对齐 */
border-radius: 20rpx; padding: 20rpx; /* 内边距为20响应式像素 */
background: #fff; border-radius: 20rpx; /* 圆角边框，半径为20响应式像素 */
margin-bottom: 20rpx; background: #fff; /* 背景颜色为白色 */
box-shadow: 0 16rpx 32rpx 0 rgba(7, 17, 27, 0.05); margin-bottom: 20rpx; /* 底部外边距为20响应式像素 */
box-shadow: 0 16rpx 32rpx 0 rgba(7, 17, 27, 0.05); /* 添加轻微的阴影效果，增强立体感 */
.prod-text-right { .prod-text-right {
margin-left: 20rpx; margin-left: 20rpx; /* 左侧外边距为20响应式像素 */
width: 75%; width: 75%; /* 占据父元素宽度的75% */
.cate-prod-info { .cate-prod-info {
font-size: 22rpx; font-size: 22rpx; /* 字体大小为22响应式像素 */
color: #999; color: #999; /* 文本颜色为灰色 */
margin: 10rpx 0 20rpx 0; margin: 10rpx 0 20rpx 0; /* 上下外边距分别为10和20响应式像素 */
} }
.go-to-buy { .go-to-buy {
font-size: 26rpx; font-size: 26rpx; /* 字体大小为26响应式像素 */
background: #eb2444; background: #eb2444; /* 背景颜色为红色 */
color: #fff; color: #fff; /* 文本颜色为白色 */
border-radius: 50rpx; border-radius: 50rpx; /* 圆角边框，半径为50响应式像素 */
width: 150rpx; width: 150rpx; /* 宽度为150响应式像素 */
text-align: center; text-align: center; /* 文本居中对齐 */
padding: 8rpx 3rpx; padding: 8rpx 3rpx; /* 内边距为8和3响应式像素 */
position: absolute; position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
right: 20rpx; right: 20rpx; /* 按钮距离右侧20响应式像素 */
bottom: 20rpx; bottom: 20rpx; /* 按钮距离底部20响应式像素 */
} }
.prod-text.more { .prod-text.more {
margin: 0; margin: 0; /* 移除默认外边距 */
height: 78rpx; height: 78rpx; /* 高度为78响应式像素 */
font-size: 28rpx; font-size: 28rpx; /* 字体大小为28响应式像素 */
display: -webkit-box; display: -webkit-box; /* 使用Webkit的多行文本溢出处理 */
word-break: break-all; word-break: break-all; /* 允许单词内断行 */
overflow: hidden; overflow: hidden; /* 隐藏超出容器的内容 */
text-overflow: ellipsis; text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
display: -webkit-box; display: -webkit-box; /* 重复声明以确保兼容性 */
-webkit-line-clamp: 2; -webkit-line-clamp: 2; /* 限制显示两行文本 */
-webkit-box-orient: vertical; -webkit-box-orient: vertical; /* 文本方向为垂直 */
color: #000; color: #000; /* 文本颜色为黑色 */
} }
.prod-price.more { .prod-price.more {
font-size: 28rpx; font-size: 28rpx; /* 字体大小为28响应式像素 */
color: #eb2444; color: #eb2444; /* 文本颜色为红色 */
font-family: arial; font-family: arial; /* 字体系列为Arial */
} }
} }
} }

321
front-end/mall4uni/src/pages/search-prod-show/search-prod-show.vue
Unescape View File

@ -2,54 +2,52 @@
<view class="container"> <view class="container">
<!-- 搜索框 --> <!-- 搜索框 -->
<view class="fixed-box"> <view class="fixed-box">
<!-- 固定定位的盒子，通常用于页面顶部导航栏或标签栏 -->
<view class="search-bar"> <view class="search-bar">
<!-- 搜索栏容器 -->
<view class="search-box"> <view class="search-box">
<input <!-- 搜索输入框容器 -->
placeholder="输入关键字搜索" <input placeholder="输入关键字搜索" <!-- 输入框占位符文本 -->
class="sear-input" class="sear-input" <!-- 应用样式类 sear-input -->
:value="prodName" :value="prodName" <!-- 绑定输入框的值到 prodName 变量 -->
confirm-type="search" confirm-type="search" <!-- 设置确认按钮类型为“搜索” -->
@input="getSearchContent" @input="getSearchContent" <!-- 监听用户输入内容并更新 prodName -->
@confirm="toSearchConfirm" @confirm="toSearchConfirm" <!-- 监听用户按下确认键时触发搜索 -->
> />
<image <image src="@/static/images/icon/search.png" <!-- 图标图片路径 -->
src="@/static/images/icon/search.png" class="search-img" <!-- 应用样式类 search-img -->
class="search-img"
/> />
</view> </view>
<view <view class="search-list-img" <!-- 切换显示类型的图标容器 -->
class="search-list-img" @tap="changeShowType" <!-- 点击切换显示类型 -->
@tap="changeShowType"
> >
<image <image
v-if="showType==1" v-if="showType == 1" <!-- 当 showType 为 1 时显示此图标 -->
src="@/static/images/icon/search-col.png" src="@/static/images/icon/search-col.png" <!-- 图标图片路径 -->
/> />
<image <image
v-if="showType==2" v-if="showType == 2" <!-- 当 showType 为 2 时显示此图标 -->
src="@/static/images/icon/search-col2.png" src="@/static/images/icon/search-col2.png" <!-- 图标图片路径 -->
/> />
</view> </view>
</view> </view>
<view class="tabs"> <view class="tabs">
<text <!-- 标签栏容器 -->
:class="'tab-item complete ' + (sts==0?'on':'')" <text :class="'tab-item complete ' + (sts == 0 ? 'on' : '')" <!-- 动态绑定类名，根据 sts 值决定是否添加 'on' 类 -->
data-sts="0" data-sts="0" <!-- 数据属性，用于标识当前标签 -->
@tap="onStsTap" @tap="onStsTap" <!-- 点击标签时触发排序方式切换 -->
> >
综合 综合
</text> </text>
<text <text :class="'tab-item ' + (sts == 1 ? 'on' : '')" <!-- 动态绑定类名，根据 sts 值决定是否添加 'on' 类 -->
:class="'tab-item ' + (sts==1?'on':'')" data-sts="1" <!-- 数据属性，用于标识当前标签 -->
data-sts="1" @tap="onStsTap" <!-- 点击标签时触发排序方式切换 -->
@tap="onStsTap"
> >
销量 销量
</text> </text>
<text <text :class="'tab-item ' + (sts == 2 ? 'on' : '')" <!-- 动态绑定类名，根据 sts 值决定是否添加 'on' 类 -->
:class="'tab-item ' + (sts==2?'on':'')" data-sts="2" <!-- 数据属性，用于标识当前标签 -->
data-sts="2" @tap="onStsTap" <!-- 点击标签时触发排序方式切换 -->
@tap="onStsTap"
> >
价格 价格
</text> </text>
@ -58,61 +56,54 @@
<!-- 商品列表 --> <!-- 商品列表 -->
<view class="prod-list"> <view class="prod-list">
<!-- 商品列表容器 -->
<!-- 横向列表 --> <!-- 横向列表 -->
<view <view v-if="showType == 1" <!-- 条件渲染，只有当 showType 为 1 时显示横向列表 -->
v-if="showType==1"
class="prod-show" class="prod-show"
> >
<view class="hotsale-item-cont"> <view class="hotsale-item-cont"> <!-- 热销商品容器 -->
<block <block
v-for="(item, index) in searchProdList" v-for="(item, index) in searchProdList" <!-- 遍历搜索结果列表 -->
:key="index" :key="index" <!-- 使用索引作为唯一标识 -->
> >
<production <production
:item="item" :item="item" <!-- 传递商品项数据 -->
sts="6" sts="6" <!-- 传递状态码，可能是用于样式或其他逻辑 -->
/> />
</block> </block>
</view> </view>
</view> </view>
<!-- 纵向列表 --> <!-- 纵向列表 -->
<view <view v-if="showType == 2" <!-- 条件渲染，只有当 showType 为 2 时显示纵向列表 -->
v-if="showType==2"
class="cont-item" class="cont-item"
> >
<block <block
v-for="(item, index) in searchProdList" v-for="(item, index) in searchProdList" <!-- 遍历搜索结果列表 -->
:key="index" :key="index" <!-- 使用索引作为唯一标识 -->
> >
<view <view
class="show-item" class="show-item" <!-- 商品项容器 -->
:data-prodid="item.prodId" :data-prodid="item.prodId" <!-- 传递商品ID -->
@tap="toProdPage" @tap="toProdPage" <!-- 点击商品项时跳转到商品详情页 -->
> >
<view class="more-prod-pic"> <view class="more-prod-pic"> <!-- 商品图片容器 -->
<image <image
:src="item.pic" :src="item.pic" <!-- 动态绑定图片路径 -->
class="more-pic" class="more-pic" <!-- 应用样式类 more-pic -->
/> />
</view> </view>
<view class="prod-text-right"> <view class="prod-text-right"> <!-- 商品文本信息容器 -->
<view class="prod-text more"> <view class="prod-text more"> <!-- 商品名称 -->
{{ item.prodName }} {{ item.prodName }} <!-- 显示商品名称 -->
</view> </view>
<view class="cate-prod-info"> <view class="cate-prod-info"> <!-- 商品评价信息 -->
{{ item.praiseNumber }}评价 {{ item.positiveRating }}%好评 {{ item.praiseNumber }}评价 {{ item.positiveRating }}%好评 <!-- 显示评价数量和好评率 -->
</view> </view>
<view class="prod-price more"> <view class="prod-price more"> <!-- 商品价格 -->
<text class="symbol"> <text class="symbol">￥</text> <!-- 人民币符号 -->
￥ <text class="big-num">{{ wxs.parsePrice(item.price)[0] }}</text> <!-- 显示整数部分价格 -->
</text> <text class="small-num">.{{ wxs.parsePrice(item.price)[1] }}</text> <!-- 显示小数部分价格 -->
<text class="big-num">
{{ wxs.parsePrice(item.price)[0] }}
</text>
<text class="small-num">
.{{ wxs.parsePrice(item.price)[1] }}
</text>
</view> </view>
</view> </view>
</view> </view>
@ -120,9 +111,8 @@
</view> </view>
<!-- 空占位 --> <!-- 空占位 -->
<view <view v-if="!searchProdList.length" <!-- 条件渲染，只有当搜索结果为空时显示空占位 -->
v-if="!searchProdList.length" :class="['empty', showType == 1 ? 'empty-top' : '']" <!-- 动态绑定类名，根据 showType 决定是否添加 'empty-top' 类 -->
:class="['empty',showType==1? 'empty-top':'']"
> >
暂无结果 暂无结果
</view> </view>
@ -131,93 +121,128 @@
</template> </template>
<script setup> <script setup>
const wxs = number() import { ref } from 'vue'; // 导入 Vue 的 ref 函数，用于创建响应式变量
const prodName = ref('')
/** // 定义一个工具函数对象，假设它是从某个模块导入的
* 生命周期函数--监听页面加载 const wxs = number(); // 这里假设 `number` 是一个函数，返回一个包含解析价格方法的对象
*/
onLoad((options) => { // 定义响应式变量，用于存储用户输入的商品名称
prodName.value = options.prodName const prodName = ref('');
})
/**
/** * 生命周期函数--监听页面加载
* 生命周期函数--监听页面显示 */
*/ onLoad((options) => {
onShow(() => { // 如果页面加载时有传递参数，则将参数中的 prodName 赋值给 prodName 变量
toLoadData() prodName.value = options.prodName;
}) });
const showType = ref(2) /**
const changeShowType = () => { * 生命周期函数--监听页面显示
if (showType.value == 1) { */
showType.value = 2 onShow(() => {
} else { // 页面每次显示时调用 toLoadData 方法加载数据
showType.value = 1 toLoadData();
} });
}
// 定义响应式变量，用于控制商品列表的显示类型（1: 横向列表, 2: 纵向列表）
/** const showType = ref(2);
* 输入商品获取数据
* @param e // 切换商品列表显示类型的方法
*/ const changeShowType = () => {
const getSearchContent = (e) => { // 切换 showType 的值，实现横向和纵向列表之间的切换
prodName.value = e.detail.value if (showType.value == 1) {
} showType.value = 2;
} else {
const sts = ref(0) showType.value = 1;
const searchProdList = ref([])
/**
* 请求热门搜索商品接口
*/
const toLoadData = () => {
http.request({
url: '/search/searchProdPage',
method: 'GET',
data: {
current: 1,
prodName: prodName.value,
size: 10,
sort: sts.value
} }
}) };
.then(({ data }) => {
searchProdList.value = data.records /**
* 输入商品获取数据
* @param e - 事件对象
*/
const getSearchContent = (e) => {
// 更新 prodName 的值为用户输入的内容
prodName.value = e.detail.value;
};
// 定义响应式变量，用于存储当前排序方式（0: 综合, 1: 销量, 2: 价格）
const sts = ref(0);
// 定义响应式变量，用于存储搜索结果列表
const searchProdList = ref([]);
/**
* 请求热门搜索商品接口
*/
const toLoadData = () => {
// 发送请求获取搜索结果数据
http.request({
url: '/search/searchProdPage', // API 请求地址
method: 'GET', // 请求方法为 GET
data: {
current: 1, // 当前页码
prodName: prodName.value, // 搜索关键词
size: 10, // 每页显示的商品数量
sort: sts.value // 排序方式
}
}) })
} .then(({ data }) => {
// 将获取到的数据赋值给 searchProdList
/** searchProdList.value = data.records;
* 当前搜索页二次搜索商品 });
*/ };
const toSearchConfirm = (e) => {
if (e.detail.value) { /**
let recentSearch = uni.getStorageSync('recentSearch') || [] * 当前搜索页二次搜索商品
recentSearch = recentSearch.filter(item => item !== prodName.value) * @param e - 事件对象
recentSearch.unshift(prodName.value) */
if (recentSearch.length > 10) { const toSearchConfirm = (e) => {
recentSearch.pop() // 检查输入框内容是否为空
if (e.detail.value) {
// 获取最近搜索历史
let recentSearch = uni.getStorageSync('recentSearch') || [];
// 移除重复的搜索关键词
recentSearch = recentSearch.filter(item => item !== prodName.value);
// 将新的搜索关键词添加到数组开头
recentSearch.unshift(prodName.value);
// 如果超过10个记录，移除最后一个
if (recentSearch.length > 10) {
recentSearch.pop();
}
// 更新本地存储中的最近搜索历史
uni.setStorageSync('recentSearch', recentSearch);
} }
uni.setStorageSync('recentSearch', recentSearch) // 跳转到商品列表页，并传递搜索关键词
} uni.redirectTo({
uni.redirectTo({ url: `/pages/search-prod-show/search-prod-show?prodName=${encodeURIComponent(e.detail.value)}`
url: '/pages/search-prod-show/search-prod-show?prodName=' + e.detail.value });
}) };
}
/**
/** * 状态点击事件
* 状态点击事件 * @param e - 事件对象
*/ */
const onStsTap = (e) => { const onStsTap = (e) => {
sts.value = e.currentTarget.dataset.sts // 更新 sts 的值为当前点击的标签对应的排序方式
toLoadData() sts.value = e.currentTarget.dataset.sts;
} // 重新加载数据
toLoadData();
const toProdPage = (e) => { };
uni.navigateTo({
url: '/pages/prod/prod?prodid=' + e.currentTarget.dataset.prodid /**
}) * 跳转到商品详情页
} * @param e - 事件对象
*/
const toProdPage = (e) => {
// 跳转到商品详情页，并传递商品ID
uni.navigateTo({
url: `/pages/prod/prod?prodid=${e.currentTarget.dataset.prodid}`
});
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@use './search-prod-show.scss'; @use './search-prod-show.scss'; /* 引入外部样式文件 */
</style> </style>

Write Preview
Loading…
Cancel
Save