parent
700e5370b7
commit
1e0cb425f1
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,22 +1,22 @@
|
||||
-- 创建数据库
|
||||
CREATE DATABASE IF NOT EXISTS wx_miniapp DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
|
||||
|
||||
-- 使用数据库
|
||||
USE wx_miniapp;
|
||||
|
||||
-- 创建微信用户表
|
||||
CREATE TABLE IF NOT EXISTS `wx_user` (
|
||||
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键ID',
|
||||
`openid` varchar(100) NOT NULL COMMENT '微信openid',
|
||||
`nickname` varchar(50) DEFAULT NULL COMMENT '昵称',
|
||||
`avatar_url` varchar(500) DEFAULT NULL COMMENT '头像URL',
|
||||
`gender` tinyint(4) DEFAULT NULL COMMENT '性别 0-未知 1-男 2-女',
|
||||
`country` varchar(50) DEFAULT NULL COMMENT '国家',
|
||||
`province` varchar(50) DEFAULT NULL COMMENT '省份',
|
||||
`city` varchar(50) DEFAULT NULL COMMENT '城市',
|
||||
`language` varchar(50) DEFAULT NULL COMMENT '语言',
|
||||
`create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
|
||||
`update_time` datetime DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
|
||||
PRIMARY KEY (`id`),
|
||||
UNIQUE KEY `uk_openid` (`openid`) COMMENT 'openid唯一索引'
|
||||
-- 创建数据库
|
||||
CREATE DATABASE IF NOT EXISTS wx_miniapp DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
|
||||
|
||||
-- 使用数据库
|
||||
USE wx_miniapp;
|
||||
|
||||
-- 创建微信用户表
|
||||
CREATE TABLE IF NOT EXISTS `wx_user` (
|
||||
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键ID',
|
||||
`openid` varchar(100) NOT NULL COMMENT '微信openid',
|
||||
`nickname` varchar(50) DEFAULT NULL COMMENT '昵称',
|
||||
`avatar_url` varchar(500) DEFAULT NULL COMMENT '头像URL',
|
||||
`gender` tinyint(4) DEFAULT NULL COMMENT '性别 0-未知 1-男 2-女',
|
||||
`country` varchar(50) DEFAULT NULL COMMENT '国家',
|
||||
`province` varchar(50) DEFAULT NULL COMMENT '省份',
|
||||
`city` varchar(50) DEFAULT NULL COMMENT '城市',
|
||||
`language` varchar(50) DEFAULT NULL COMMENT '语言',
|
||||
`create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
|
||||
`update_time` datetime DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
|
||||
PRIMARY KEY (`id`),
|
||||
UNIQUE KEY `uk_openid` (`openid`) COMMENT 'openid唯一索引'
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='微信用户表';
|
||||
@ -1,58 +1,58 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
|
||||
<mapper namespace="com.learning.newdemo.mapper.WxUserMapper">
|
||||
<resultMap id="BaseResultMap" type="com.learning.newdemo.entity.WxUser">
|
||||
<id column="id" property="id" jdbcType="INTEGER"/>
|
||||
<result column="openid" property="openid" jdbcType="VARCHAR"/>
|
||||
<result column="nickname" property="nickname" jdbcType="VARCHAR"/>
|
||||
<result column="avatar_url" property="avatarUrl" jdbcType="VARCHAR"/>
|
||||
<result column="gender" property="gender" jdbcType="INTEGER"/>
|
||||
<result column="country" property="country" jdbcType="VARCHAR"/>
|
||||
<result column="province" property="province" jdbcType="VARCHAR"/>
|
||||
<result column="city" property="city" jdbcType="VARCHAR"/>
|
||||
<result column="language" property="language" jdbcType="VARCHAR"/>
|
||||
<result column="create_time" property="createTime" jdbcType="TIMESTAMP"/>
|
||||
<result column="update_time" property="updateTime" jdbcType="TIMESTAMP"/>
|
||||
</resultMap>
|
||||
|
||||
<sql id="Base_Column_List">
|
||||
id, openid, nickname, avatar_url, gender, country, province, city, language, create_time, update_time
|
||||
</sql>
|
||||
|
||||
<select id="selectByOpenid" resultMap="BaseResultMap" parameterType="java.lang.String">
|
||||
select
|
||||
<include refid="Base_Column_List"/>
|
||||
from wx_user
|
||||
where openid = #{openid,jdbcType=VARCHAR}
|
||||
</select>
|
||||
|
||||
<insert id="insert" parameterType="com.learning.newdemo.entity.WxUser" useGeneratedKeys="true" keyProperty="id">
|
||||
insert into wx_user (
|
||||
openid, nickname, avatar_url, gender, country, province, city, language, create_time
|
||||
)
|
||||
values (
|
||||
#{openid,jdbcType=VARCHAR},
|
||||
#{nickname,jdbcType=VARCHAR},
|
||||
#{avatarUrl,jdbcType=VARCHAR},
|
||||
#{gender,jdbcType=INTEGER},
|
||||
#{country,jdbcType=VARCHAR},
|
||||
#{province,jdbcType=VARCHAR},
|
||||
#{city,jdbcType=VARCHAR},
|
||||
#{language,jdbcType=VARCHAR},
|
||||
now()
|
||||
)
|
||||
</insert>
|
||||
|
||||
<update id="updateByPrimaryKey" parameterType="com.learning.newdemo.entity.WxUser">
|
||||
update wx_user
|
||||
set nickname = #{nickname,jdbcType=VARCHAR},
|
||||
avatar_url = #{avatarUrl,jdbcType=VARCHAR},
|
||||
gender = #{gender,jdbcType=INTEGER},
|
||||
country = #{country,jdbcType=VARCHAR},
|
||||
province = #{province,jdbcType=VARCHAR},
|
||||
city = #{city,jdbcType=VARCHAR},
|
||||
language = #{language,jdbcType=VARCHAR},
|
||||
update_time = now()
|
||||
where id = #{id,jdbcType=INTEGER}
|
||||
</update>
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
|
||||
<mapper namespace="com.learning.newdemo.mapper.WxUserMapper">
|
||||
<resultMap id="BaseResultMap" type="com.learning.newdemo.entity.WxUser">
|
||||
<id column="id" property="id" jdbcType="INTEGER"/>
|
||||
<result column="openid" property="openid" jdbcType="VARCHAR"/>
|
||||
<result column="nickname" property="nickname" jdbcType="VARCHAR"/>
|
||||
<result column="avatar_url" property="avatarUrl" jdbcType="VARCHAR"/>
|
||||
<result column="gender" property="gender" jdbcType="INTEGER"/>
|
||||
<result column="country" property="country" jdbcType="VARCHAR"/>
|
||||
<result column="province" property="province" jdbcType="VARCHAR"/>
|
||||
<result column="city" property="city" jdbcType="VARCHAR"/>
|
||||
<result column="language" property="language" jdbcType="VARCHAR"/>
|
||||
<result column="create_time" property="createTime" jdbcType="TIMESTAMP"/>
|
||||
<result column="update_time" property="updateTime" jdbcType="TIMESTAMP"/>
|
||||
</resultMap>
|
||||
|
||||
<sql id="Base_Column_List">
|
||||
id, openid, nickname, avatar_url, gender, country, province, city, language, create_time, update_time
|
||||
</sql>
|
||||
|
||||
<select id="selectByOpenid" resultMap="BaseResultMap" parameterType="java.lang.String">
|
||||
select
|
||||
<include refid="Base_Column_List"/>
|
||||
from wx_user
|
||||
where openid = #{openid,jdbcType=VARCHAR}
|
||||
</select>
|
||||
|
||||
<insert id="insert" parameterType="com.learning.newdemo.entity.WxUser" useGeneratedKeys="true" keyProperty="id">
|
||||
insert into wx_user (
|
||||
openid, nickname, avatar_url, gender, country, province, city, language, create_time
|
||||
)
|
||||
values (
|
||||
#{openid,jdbcType=VARCHAR},
|
||||
#{nickname,jdbcType=VARCHAR},
|
||||
#{avatarUrl,jdbcType=VARCHAR},
|
||||
#{gender,jdbcType=INTEGER},
|
||||
#{country,jdbcType=VARCHAR},
|
||||
#{province,jdbcType=VARCHAR},
|
||||
#{city,jdbcType=VARCHAR},
|
||||
#{language,jdbcType=VARCHAR},
|
||||
now()
|
||||
)
|
||||
</insert>
|
||||
|
||||
<update id="updateByPrimaryKey" parameterType="com.learning.newdemo.entity.WxUser">
|
||||
update wx_user
|
||||
set nickname = #{nickname,jdbcType=VARCHAR},
|
||||
avatar_url = #{avatarUrl,jdbcType=VARCHAR},
|
||||
gender = #{gender,jdbcType=INTEGER},
|
||||
country = #{country,jdbcType=VARCHAR},
|
||||
province = #{province,jdbcType=VARCHAR},
|
||||
city = #{city,jdbcType=VARCHAR},
|
||||
language = #{language,jdbcType=VARCHAR},
|
||||
update_time = now()
|
||||
where id = #{id,jdbcType=INTEGER}
|
||||
</update>
|
||||
</mapper>
|
||||
@ -1,136 +1,164 @@
|
||||
<template>
|
||||
<view class="tab-bar">
|
||||
<!-- 添加移动的背景块 -->
|
||||
<view class="active-bg" :style="{ transform: `translateX(${100 * props.currentComponentIndex}%)` }"></view>
|
||||
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{
|
||||
'active': props.currentComponentIndex === index,
|
||||
'is-first-tab': index === 0
|
||||
}"
|
||||
v-for="(item, index) in tabList"
|
||||
:key="index"
|
||||
@click="changeTab(index)">
|
||||
<text :class="{'active': props.currentComponentIndex === index}">{{ item.pageName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
// 定义emit事件
|
||||
const emit = defineEmits(['change-tab', 'change-index']);
|
||||
const props = defineProps(['currentComponentIndex']);
|
||||
|
||||
const tabList = [
|
||||
{
|
||||
pageName:'首页',
|
||||
component:'PageOfHome'
|
||||
},
|
||||
{
|
||||
pageName:'立论',
|
||||
component:'PageOfArgument'
|
||||
},
|
||||
{
|
||||
pageName:'复盘',
|
||||
component:'PageOfReview'
|
||||
},
|
||||
{
|
||||
pageName:'辩论',
|
||||
component:'PageOfDebate'
|
||||
}
|
||||
];
|
||||
|
||||
const changeTab = (index) => {
|
||||
if(props.currentComponentIndex === index) return;
|
||||
// 触发事件并传递当前组件名称和索引
|
||||
emit('change-tab', tabList[index].component);
|
||||
emit('change-index', index);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
width: 70%;
|
||||
margin: 0 auto;
|
||||
height: 70%;
|
||||
background-color: #1A2C42;
|
||||
border: none;
|
||||
position: relative;
|
||||
border-radius: 25rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.2);
|
||||
transform: translateZ(0);
|
||||
-webkit-transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/* 移动的背景块 */
|
||||
.active-bg {
|
||||
position: absolute;
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
background-color: #00D6B9;
|
||||
border-radius: 25rpx;
|
||||
transition: transform 0.3s ease;
|
||||
z-index: 1;
|
||||
box-shadow: 0 0 20rpx rgba(0, 214, 185, 0.5);
|
||||
/* 添加硬件加速 */
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tab-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 60%;
|
||||
z-index: 2;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
rgba(0, 214, 185, 0.1) 15%,
|
||||
rgba(0, 214, 185, 0.5) 50%,
|
||||
rgba(0, 214, 185, 0.1) 85%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.tab-item.is-first-tab::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.tab-item text {
|
||||
font-size: 24rpx;
|
||||
color: rgba(0, 214, 185, 0.7);
|
||||
transition: all 0.3s ease;
|
||||
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.tab-item text.active {
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 1rpx 8rpx rgba(255, 255, 255, 0.4);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
<template>
|
||||
<view class="tab-bar">
|
||||
<view
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
class="tab-item"
|
||||
:class="{ active: activeTab === index }"
|
||||
@click="switchTab(index)"
|
||||
>
|
||||
<view class="tab-icon-container" :class="{ active: activeTab === index }">
|
||||
<view class="tab-icon">
|
||||
<image :src="activeTab === index ? tab.activeIcon : tab.icon" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tab-label" :class="{ active: activeTab === index }">{{ tab.label }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
activeTab: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabs: [
|
||||
{
|
||||
label: '首页',
|
||||
icon: '/static/icons/home.png',
|
||||
activeIcon: '/static/icons/home-fill.png'
|
||||
},
|
||||
{
|
||||
label: '辩论',
|
||||
icon: '/static/icons/chat-1-line.png',
|
||||
activeIcon: '/static/icons/chat-1-fill.png'
|
||||
},
|
||||
{
|
||||
label: '立论',
|
||||
icon: '/static/icons/lightbulb-line.png',
|
||||
activeIcon: '/static/icons/lightbulb-fill.png'
|
||||
},
|
||||
{
|
||||
label: '复盘',
|
||||
icon: '/static/icons/file-chart-line.png',
|
||||
activeIcon: '/static/icons/file-chart-fill.png'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
switchTab(index) {
|
||||
if (this.activeTab === index) return;
|
||||
this.$emit('tab-change', index);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tab-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 120rpx;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.tab-icon-container {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
z-index: 2;
|
||||
border-radius: 50%;
|
||||
min-width: 80rpx; /* 防止 flex 压缩 */
|
||||
min-height: 80rpx;
|
||||
flex-shrink: 0; /* 禁止压缩 */
|
||||
}
|
||||
|
||||
.tab-icon-container.active {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #B59DF1;
|
||||
transform: translateY(-45rpx);
|
||||
border: 14rpx solid #6839E0;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 4rpx 20rpx rgba(104, 57, 224, 0.4);
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.tab-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
filter: brightness(0) invert(0.8);
|
||||
opacity: 0.7;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.tab-label {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
transition: all 0.3s;
|
||||
margin-top: 6rpx;
|
||||
opacity: 0.7;
|
||||
font-family: 'Poppins' , 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.tab-label.active {
|
||||
color: #FFFFFF;
|
||||
font-weight: 600;
|
||||
opacity: 1;
|
||||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-15rpx) scale(1.1);
|
||||
}
|
||||
|
||||
|
||||
.tab-icon-container.active .tab-icon image {
|
||||
opacity: 1;
|
||||
filter: brightness(0) invert(1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.tab-item:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
</style>
|
||||
@ -1,22 +1,25 @@
|
||||
{
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/login/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "登录"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "首页"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationBarTitleText": "智辩云枢",
|
||||
"navigationBarBackgroundColor": "#1a2a6c",
|
||||
"backgroundColor": "#000000"
|
||||
}
|
||||
}
|
||||
{
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/login/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "登录"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "首页"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationBarTitleText": "智辩云枢",
|
||||
"navigationBarBackgroundColor": "#1a2a6c",
|
||||
"backgroundColor": "#000000"
|
||||
},
|
||||
"style": {
|
||||
"scoped": false
|
||||
}
|
||||
}
|
||||
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 8.0 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
Loading…
Reference in new issue