Initial Commit
This commit is contained in:
Basyc
commit
cfb1f866b5
31
.eslintrc.js
Normal file
31
.eslintrc.js
Normal file
@ -0,0 +1,31 @@
|
||||
/*
|
||||
* Eslint config file
|
||||
* Documentation: https://eslint.org/docs/user-guide/configuring/
|
||||
* Install the Eslint extension before using this feature.
|
||||
*/
|
||||
module.exports = {
|
||||
env: {
|
||||
es6: true,
|
||||
browser: true,
|
||||
node: true,
|
||||
},
|
||||
ecmaFeatures: {
|
||||
modules: true,
|
||||
},
|
||||
parserOptions: {
|
||||
ecmaVersion: 2018,
|
||||
sourceType: 'module',
|
||||
},
|
||||
globals: {
|
||||
wx: true,
|
||||
App: true,
|
||||
Page: true,
|
||||
getCurrentPages: true,
|
||||
getApp: true,
|
||||
Component: true,
|
||||
requirePlugin: true,
|
||||
requireMiniProgram: true,
|
||||
},
|
||||
// extends: 'eslint:recommended',
|
||||
rules: {},
|
||||
}
|
||||
14
.gitignore
vendored
Normal file
14
.gitignore
vendored
Normal file
@ -0,0 +1,14 @@
|
||||
# Windows
|
||||
[Dd]esktop.ini
|
||||
Thumbs.db
|
||||
$RECYCLE.BIN/
|
||||
|
||||
# macOS
|
||||
.DS_Store
|
||||
.fseventsd
|
||||
.Spotlight-V100
|
||||
.TemporaryItems
|
||||
.Trashes
|
||||
|
||||
# Node.js
|
||||
node_modules/
|
||||
35
app.js
Normal file
35
app.js
Normal file
@ -0,0 +1,35 @@
|
||||
// app.js
|
||||
App({
|
||||
onLaunch() {
|
||||
|
||||
// 登录
|
||||
wx.login({
|
||||
success: res => {
|
||||
// 发送 res.code 到后台换取 openId, sessionKey, unionId
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
routeSafer(hasUserInfo){
|
||||
hasUserInfo=this.globalData.hasUserInfo
|
||||
if (hasUserInfo != true) {
|
||||
wx.showToast({
|
||||
title: '请先登录！',
|
||||
icon:'error',
|
||||
duration:1000,
|
||||
success(){
|
||||
setTimeout(() => {
|
||||
wx.redirectTo({
|
||||
url: '/pages/index/index',
|
||||
})
|
||||
}, 1000);
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
globalData: {
|
||||
userInfo:{},
|
||||
hasUserInfo:false
|
||||
}
|
||||
})
|
||||
49
app.json
Normal file
49
app.json
Normal file
@ -0,0 +1,49 @@
|
||||
{
|
||||
"pages": [
|
||||
"pages/index/index",
|
||||
"pages/intro/intro",
|
||||
"pages/shop/shop",
|
||||
"pages/main/main",
|
||||
"pages/shop/goods/goods",
|
||||
"pages/shop/buycar/buycar",
|
||||
"pages/shop/goods/evaluate/evaluate",
|
||||
"pages/person/person"
|
||||
],
|
||||
"tabBar": {
|
||||
"list": [
|
||||
{
|
||||
"pagePath": "pages/intro/intro",
|
||||
"text": "首页",
|
||||
"iconPath": "/data/icon/shouye-copy.png",
|
||||
"selectedIconPath":"/data/icon/shouye.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/main/main",
|
||||
"text": "赛事报名",
|
||||
"iconPath": "/data/icon/saishi1.png",
|
||||
"selectedIconPath":"/data/icon/saishi1-copy.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/shop/shop",
|
||||
"text": "教学教辅",
|
||||
"iconPath": "/data/icon/read.png",
|
||||
"selectedIconPath": "/data/icon/read-copy.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/person/person",
|
||||
"text": "个人中心",
|
||||
"iconPath": "/data/icon/icon-.png",
|
||||
"selectedIconPath": "/data/icon/icon--copy.png"
|
||||
}
|
||||
]
|
||||
},
|
||||
"window": {
|
||||
"backgroundTextStyle": "dark",
|
||||
"navigationBarBackgroundColor": "#325395",
|
||||
"navigationBarTitleText": "ZJCF青少年人工智能",
|
||||
"navigationBarTextStyle": "white"
|
||||
},
|
||||
"componentFramework": "glass-easel",
|
||||
"sitemapLocation": "sitemap.json",
|
||||
"lazyCodeLoading": "requiredComponents"
|
||||
}
|
||||
22
app.wxss
Normal file
22
app.wxss
Normal file
@ -0,0 +1,22 @@
|
||||
/**app.wxss**/
|
||||
@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.ttf?t=1731926234801') format('truetype');
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 200rpx 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
button{
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
button::after{ border: none; }
|
||||
|
||||
BIN
data/icon/icon--copy.png
Normal file
BIN
data/icon/icon--copy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
BIN
data/icon/icon-.png
Normal file
BIN
data/icon/icon-.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
BIN
data/icon/read-copy.png
Normal file
BIN
data/icon/read-copy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
BIN
data/icon/read.png
Normal file
BIN
data/icon/read.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
data/icon/saishi1-copy.png
Normal file
BIN
data/icon/saishi1-copy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
BIN
data/icon/saishi1.png
Normal file
BIN
data/icon/saishi1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
data/icon/shouye-copy.png
Normal file
BIN
data/icon/shouye-copy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
BIN
data/icon/shouye.png
Normal file
BIN
data/icon/shouye.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
data/image/shouye.jpg
Normal file
BIN
data/image/shouye.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
BIN
data/image/star.webp
Normal file
BIN
data/image/star.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
59
pages/index/index.js
Normal file
59
pages/index/index.js
Normal file
@ -0,0 +1,59 @@
|
||||
// index.js
|
||||
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
|
||||
const app=getApp()
|
||||
|
||||
Page({
|
||||
data: {
|
||||
userInfo: {
|
||||
avatarUrl: defaultAvatarUrl,
|
||||
nickName: '',
|
||||
},
|
||||
userName: '',
|
||||
},
|
||||
onChooseAvatar(e) {
|
||||
const {
|
||||
avatarUrl
|
||||
} = e.detail
|
||||
this.setData({
|
||||
userInfo: {
|
||||
avatarUrl
|
||||
},
|
||||
})
|
||||
},
|
||||
iptHandler(e) {
|
||||
const nickName = e.detail.value
|
||||
this.setData({
|
||||
// 通过e.detail.value获取到文本框最新的值
|
||||
userName: nickName,
|
||||
})
|
||||
},
|
||||
onLogin() {
|
||||
if (this.data.userInfo.avatarUrl != defaultAvatarUrl && this.data.userName != '') {
|
||||
wx.clearStorageSync('userInfo')
|
||||
var userInfo = {
|
||||
avatarUrl: '',
|
||||
nickName: ''
|
||||
}
|
||||
userInfo.avatarUrl = this.data.userInfo.avatarUrl
|
||||
userInfo.nickName = this.data.userName
|
||||
wx.showToast({
|
||||
title: '登录中',
|
||||
icon: "loading",
|
||||
duration: 800,
|
||||
complete() {
|
||||
app.globalData.userInfo=userInfo
|
||||
app.globalData.hasUserInfo=true;
|
||||
wx.switchTab({
|
||||
url: '/pages/intro/intro'
|
||||
})
|
||||
}
|
||||
});
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: '请输入用户头像及昵称',
|
||||
icon: "error",
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
16
pages/index/index.wxml
Normal file
16
pages/index/index.wxml
Normal file
@ -0,0 +1,16 @@
|
||||
<scroll-view scroll-y type="list" style="height: 100vh;">
|
||||
<view class="container">
|
||||
<view class="userinfo">
|
||||
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
|
||||
<image class="avatar" src="{{userInfo.avatarUrl}}"></image>
|
||||
</button>
|
||||
<view class="nickname-wrapper">
|
||||
<text class="nickname-label">昵称</text>
|
||||
<input type="nickname" class="nickname-input" placeholder="请输入昵称" model:value="{{userName}}" bindinput="iptHandler"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="usermotto">
|
||||
<button type="primary" bind:tap="onLogin" class="login">登录</button>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
61
pages/index/index.wxss
Normal file
61
pages/index/index.wxss
Normal file
@ -0,0 +1,61 @@
|
||||
/**index.wxss**/
|
||||
.userinfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #aaa;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.userinfo-avatar {
|
||||
overflow: hidden;
|
||||
width: 128rpx;
|
||||
height: 128rpx;
|
||||
margin: 20rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.usermotto {
|
||||
margin-top: 200px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
padding: 0;
|
||||
width: 56px ;
|
||||
height: 56px;
|
||||
border-radius: 8px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
display: block;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.nickname-wrapper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
border-top: .5px solid rgba(0, 0, 0, 0.1);
|
||||
border-bottom: .5px solid rgba(0, 0, 0, 0.1);
|
||||
color: black;
|
||||
}
|
||||
|
||||
.nickname-label {
|
||||
width: 105px;
|
||||
}
|
||||
|
||||
.nickname-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.login{
|
||||
width: 200rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 10%;
|
||||
}
|
||||
65
pages/intro/intro.js
Normal file
65
pages/intro/intro.js
Normal file
@ -0,0 +1,65 @@
|
||||
// pages/intro/intro.js
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
|
||||
}
|
||||
})
|
||||
3
pages/intro/intro.json
Normal file
3
pages/intro/intro.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
10
pages/intro/intro.wxml
Normal file
10
pages/intro/intro.wxml
Normal file
@ -0,0 +1,10 @@
|
||||
<!-- pages/intro/intro.wxml -->
|
||||
<view class="intro_container">
|
||||
<view class="shouye">
|
||||
<image src="../../data/image/shouye.jpg" mode="aspectFill" class="original-image"/>
|
||||
</view>
|
||||
|
||||
<view class="card"style="font-size:18px;color:white;">
|
||||
<view style="font-size:18px;font-weight:700;">学会简介</view>
|
||||
</view>
|
||||
</view>
|
||||
39
pages/intro/intro.wxss
Normal file
39
pages/intro/intro.wxss
Normal file
@ -0,0 +1,39 @@
|
||||
/* pages/intro/intro.wxss */
|
||||
.intro_container{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
background-color: #15042f;
|
||||
}
|
||||
.shouye {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.shouye image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
|
||||
.card {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -25vh 0 0 -45vmin;
|
||||
width: 90vmin; /* 调整宽度以适应需求 */
|
||||
height: 50vh;
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
background-color: #342c5293;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
65
pages/main/main.js
Normal file
65
pages/main/main.js
Normal file
@ -0,0 +1,65 @@
|
||||
// pages/main/main.js
|
||||
const app=getApp()
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
hasUserInfo:false,
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
app.routeSafer(this.data.hasUserInfo)
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
|
||||
}
|
||||
})
|
||||
3
pages/main/main.json
Normal file
3
pages/main/main.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
45
pages/main/main.wxml
Normal file
45
pages/main/main.wxml
Normal file
@ -0,0 +1,45 @@
|
||||
<!--pages/main/main.wxml-->
|
||||
<block>
|
||||
<swiper autoplay="true" duration='600' indicator-dots="true" circular="true" indicator-color="white" indicator-active-color="#777676" interval="3000">
|
||||
|
||||
<swiper-item item-id='1' style="background-color: aquamarine;">
|
||||
<image class="swiper_image" mode="aspectFill" src="https://publicqn.saikr.com/saikr/contest/1723087930763/1723087930763dja0vqm18p.png"></image>
|
||||
</swiper-item>
|
||||
<swiper-item item-id='2' style="background-color:cadetblue;">
|
||||
<image class="swiper_image" mode="aspectFill" src="https://publicqn.saikr.com/saikr/contest/1727607762864/172760776286423as7i16pno.png"></image>
|
||||
</swiper-item>
|
||||
<swiper-item item-id='3' style="background-color:rgb(160, 95, 151);">
|
||||
<image class="swiper_image" mode="aspectFill" src="https://publicqn.saikr.com/2024/10/26/contest671c4d9ad2c442.851856601729908129695.png?imageView2/2/w/2160"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</block>
|
||||
|
||||
<block>
|
||||
<view class="cont match-item">
|
||||
<view class="card">
|
||||
<image class="image" src="https://publicqn.saikr.com/saikr/contest/1723087930763/1723087930763dja0vqm18p.png"></image>
|
||||
<view class="info">
|
||||
<text class="name">2024年第四届《英语世界》杯全国大学生翻译大赛</text>
|
||||
<text class="date">报名日期：2024.09.08 ~ 2024.11.23</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cont match-item">
|
||||
<view class="card" bindtap="">
|
||||
<image class="image" src="https://publicqn.saikr.com/saikr/contest/1727607762864/172760776286423as7i16pno.png"></image>
|
||||
<view class="info">
|
||||
<text class="name">2024年第五届“中译国青杯”国际组织文件翻译大赛</text>
|
||||
<text class="date">报名日期：2024.09.30 ~ 2024.11.29</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cont match-item">
|
||||
<view class="card">
|
||||
<image class="image" src="https://publicqn.saikr.com/2024/10/26/contest671c4d9ad2c442.851856601729908129695.png?imageView2/2/w/2160"></image>
|
||||
<view class="info">
|
||||
<text class="name">第二届“数学周报” 全国大学生数学能力大赛</text>
|
||||
<text class="date">报名日期：2024年08月20日-2024年11月30日</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
49
pages/main/main.wxss
Normal file
49
pages/main/main.wxss
Normal file
@ -0,0 +1,49 @@
|
||||
/* pages/main/main.wxss */
|
||||
swiper{
|
||||
height: 60vmin;
|
||||
}
|
||||
.swiper_image{
|
||||
width: 100%;
|
||||
}
|
||||
.cont {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px; /* 可根据需要调整内边距 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 90vmin;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
background-color: #fff; /* 背景颜色 */
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 25vh;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
margin-bottom: 5px; /* 为名称和日期之间添加一些间距 */
|
||||
white-space: nowrap; /* 防止名称换行 */
|
||||
overflow: hidden; /* 隐藏溢出的文本 */
|
||||
text-overflow: ellipsis; /* 显示省略号 */
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
84
pages/person/person.js
Normal file
84
pages/person/person.js
Normal file
@ -0,0 +1,84 @@
|
||||
// pages/person/person.js
|
||||
const app = getApp()
|
||||
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
userInfo: app.globalData.userInfo
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
|
||||
},
|
||||
talkOnline() {
|
||||
wx.showToast({
|
||||
title: '还没写这里的代码',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
quitOut() {
|
||||
app.globalData.userInfo = {}
|
||||
app.globalData.hasUserInfo = false
|
||||
this.setData({
|
||||
userInfo: {}
|
||||
})
|
||||
wx.redirectTo({
|
||||
url: '/pages/index/index',
|
||||
})
|
||||
}
|
||||
})
|
||||
3
pages/person/person.json
Normal file
3
pages/person/person.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
17
pages/person/person.wxml
Normal file
17
pages/person/person.wxml
Normal file
@ -0,0 +1,17 @@
|
||||
<view class="avatar-container">
|
||||
<block>
|
||||
<view class="usrinfo">
|
||||
<view class="avatarcon">
|
||||
<image class="avatar" src="{{userInfo.avatarUrl}}" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="nickName">{{userInfo.nickName}}</view>
|
||||
</view>
|
||||
</block>
|
||||
<block>
|
||||
<view class="list">
|
||||
<button class="btn1" bind:tap="talkOnline">在线客服</button>
|
||||
<button class="btn2" bind:tap="talkOnline">个人资料</button>
|
||||
<button class="btn3" bind:tap="quitOut">退出登录</button>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
63
pages/person/person.wxss
Normal file
63
pages/person/person.wxss
Normal file
@ -0,0 +1,63 @@
|
||||
.usrinfo{
|
||||
width: 100%;
|
||||
height: 35vh;
|
||||
background-color: #325395;
|
||||
}
|
||||
.avatarcon{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 150px;
|
||||
}
|
||||
.avatar{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 3px solid white;
|
||||
box-shadow: 0 0 10px;
|
||||
}
|
||||
|
||||
.nickName{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
font-family:'Times New Roman', Times, serif;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
/* 列表容器样式 */
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 20px; /* 根据需要调整 */
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.btn1, .btn2, .btn3 {
|
||||
width: 80%; /* 按钮宽度 */
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
margin: 10px 0; /* 按钮外边距 */
|
||||
background-color: #1AAD19; /* 按钮背景颜色 */
|
||||
color: white; /* 按钮文字颜色 */
|
||||
text-align: center; /* 文字居中 */
|
||||
border-radius: 5px; /* 按钮圆角 */
|
||||
font-size: 16px; /* 文字大小 */
|
||||
}
|
||||
|
||||
/* 为不同的按钮添加不同的样式，如果需要的话 */
|
||||
.btn1 {
|
||||
background-color: #007aff; /* 在线客服按钮背景颜色 */
|
||||
}
|
||||
|
||||
.btn2 {
|
||||
background-color: #ff9900; /* 个人资料按钮背景颜色 */
|
||||
}
|
||||
|
||||
.btn3 {
|
||||
background-color: #ff3b30; /* 退出登录按钮背景颜色 */
|
||||
}
|
||||
107
pages/shop/buycar/buycar.js
Normal file
107
pages/shop/buycar/buycar.js
Normal file
@ -0,0 +1,107 @@
|
||||
Page({
|
||||
data: {
|
||||
cartItems: [
|
||||
{ id: 1, name: '商品A', price: 100, quantity: 1, image: 'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner1.png', selected: false },
|
||||
{ id: 2, name: '商品B', price: 200, quantity: 1, image: 'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner2.png', selected: false },
|
||||
{ id: 3, name: '商品C', price: 300, quantity: 1, image: 'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner3.png', selected: false },
|
||||
{ id: 4, name: '商品D', price: 400, quantity: 1, image: 'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner4.png', selected: false },
|
||||
{ id: 5, name: '商品E', price: 500, quantity: 1, image: 'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner5.png', selected: false }
|
||||
],
|
||||
total: 0,
|
||||
total_goods: 0,
|
||||
allSelected: false
|
||||
},
|
||||
|
||||
onLoad: function() {
|
||||
this.calculateTotal();
|
||||
this.calculateTotal_goods();
|
||||
},
|
||||
|
||||
toggleSelection: function(e) {
|
||||
const id = e.currentTarget.dataset.id;
|
||||
const index = this.data.cartItems.findIndex(item => item.id === id);
|
||||
if (index !== -1) {
|
||||
let updatedItem = this.data.cartItems[index];
|
||||
updatedItem.selected = !updatedItem.selected;
|
||||
this.setData({
|
||||
['cartItems[' + index + ']']: updatedItem
|
||||
});
|
||||
this.calculateTotal();
|
||||
this.calculateTotal_goods();
|
||||
this.updateAllSelected();
|
||||
}
|
||||
},
|
||||
|
||||
toggleAllSelection: function() {
|
||||
const newSelection = !this.data.allSelected;
|
||||
const updatedCartItems = this.data.cartItems.map(item => ({
|
||||
...item,
|
||||
selected: newSelection
|
||||
}));
|
||||
this.setData({
|
||||
cartItems: updatedCartItems,
|
||||
allSelected: newSelection
|
||||
});
|
||||
this.calculateTotal();
|
||||
this.calculateTotal_goods();
|
||||
},
|
||||
|
||||
increaseQuantity: function(e) {
|
||||
const id = e.currentTarget.dataset.id;
|
||||
const index = this.data.cartItems.findIndex(item => item.id === id);
|
||||
if (index !== -1) {
|
||||
let updatedItem = this.data.cartItems[index];
|
||||
updatedItem.quantity += 1;
|
||||
this.setData({
|
||||
['cartItems[' + index + ']']: updatedItem
|
||||
});
|
||||
this.calculateTotal();
|
||||
}
|
||||
},
|
||||
|
||||
decreaseQuantity: function(e) {
|
||||
const id = e.currentTarget.dataset.id;
|
||||
const index = this.data.cartItems.findIndex(item => item.id === id);
|
||||
if (index !== -1) {
|
||||
let updatedItem = this.data.cartItems[index];
|
||||
if (updatedItem.quantity > 1) {
|
||||
updatedItem.quantity -= 1;
|
||||
this.setData({
|
||||
['cartItems[' + index + ']']: updatedItem
|
||||
});
|
||||
this.calculateTotal();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
calculateTotal: function() {
|
||||
let total = 0;
|
||||
this.data.cartItems.forEach(item => {
|
||||
if (item.selected) {
|
||||
total += item.price * item.quantity;
|
||||
}
|
||||
});
|
||||
this.setData({ total: total });
|
||||
},
|
||||
|
||||
calculateTotal_goods: function() {
|
||||
let total_goods = this.data.cartItems.reduce((acc, item) => {
|
||||
return acc + (item.selected ? 1 : 0);
|
||||
}, 0);
|
||||
|
||||
this.setData({ total_goods: total_goods });
|
||||
},
|
||||
|
||||
updateAllSelected: function() {
|
||||
const allSelected = this.data.cartItems.every(item => item.selected);
|
||||
this.setData({ allSelected: allSelected });
|
||||
},
|
||||
|
||||
checkout: function() {
|
||||
wx.showToast({
|
||||
title: '结算成功',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
});
|
||||
3
pages/shop/buycar/buycar.json
Normal file
3
pages/shop/buycar/buycar.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
29
pages/shop/buycar/buycar.wxml
Normal file
29
pages/shop/buycar/buycar.wxml
Normal file
@ -0,0 +1,29 @@
|
||||
<view class="cart-container">
|
||||
<block wx:for="{{ cartItems }}" wx:key="id">
|
||||
<view class="cart-item">
|
||||
<checkbox class="item-checkbox" checked="{{ item.selected }}" data-id="{{ item.id }}" bindtap="toggleSelection"></checkbox>
|
||||
<image src="{{ item.image }}" class="item-image"></image>
|
||||
<view class="item-details">
|
||||
<text class="item-name">{{ item.name }}</text>
|
||||
<view class="item-footer">
|
||||
<text class="item-price">￥{{ item.price }}</text>
|
||||
<view class="quantity-control">
|
||||
<button bindtap="decreaseQuantity" data-id="{{ item.id }}">-</button>
|
||||
<text>{{ item.quantity }}</text>
|
||||
<button bindtap="increaseQuantity" data-id="{{ item.id }}">+</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="checkout-bar">
|
||||
<view class="select-all">
|
||||
<checkbox class="select-all-checkbox" checked="{{ allSelected }}" bindtap="toggleAllSelection"></checkbox>
|
||||
<text>全选</text>
|
||||
</view>
|
||||
<view class="total-and-checkout">
|
||||
<text>总计: ￥{{ total }}</text>
|
||||
<button bindtap="checkout">去结算({{ total_goods }})</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
123
pages/shop/buycar/buycar.wxss
Normal file
123
pages/shop/buycar/buycar.wxss
Normal file
@ -0,0 +1,123 @@
|
||||
.cart-container {
|
||||
padding: 20px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 60px; /* 为底部结算栏留出空间 */
|
||||
}
|
||||
|
||||
.cart-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.item-checkbox {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.item-image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-right: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.item-details {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.item-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-price {
|
||||
font-size: 16px;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.quantity-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.quantity-control button {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin: 0 5px;
|
||||
|
||||
}
|
||||
|
||||
.quantity-control button:active {
|
||||
background-color: #d0d0d0;
|
||||
}
|
||||
|
||||
.checkout-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 10px 20px;
|
||||
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
z-index: 100;
|
||||
box-sizing: border-box; /* 确保内边距不会影响宽度 */
|
||||
}
|
||||
|
||||
.select-all {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.select-all-checkbox {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.total-and-checkout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.total-and-checkout text {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.checkout-bar button {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background-color: #1aad19;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 40px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.checkout-bar button:hover {
|
||||
background-color: #179a16;
|
||||
}
|
||||
46
pages/shop/goods/evaluate/evaluate.js
Normal file
46
pages/shop/goods/evaluate/evaluate.js
Normal file
@ -0,0 +1,46 @@
|
||||
// pages/reviews/reviews.js
|
||||
|
||||
Page({
|
||||
data: {
|
||||
reviews: [
|
||||
{
|
||||
username: '用户A',
|
||||
rating: 5,
|
||||
comment: '非常满意，质量非常好！',
|
||||
timestamp: '2023-10-01 10:00'
|
||||
},
|
||||
{
|
||||
username: '用户B',
|
||||
rating: 4,
|
||||
comment: '不错，值得推荐！',
|
||||
timestamp: '2023-10-02 11:00'
|
||||
},
|
||||
{
|
||||
username: '用户C',
|
||||
rating: 3,
|
||||
comment: '一般般，还可以吧。',
|
||||
timestamp: '2023-10-03 12:00'
|
||||
},
|
||||
{
|
||||
username: '用户D',
|
||||
rating: 2,
|
||||
comment: '不太满意，有些问题。',
|
||||
timestamp: '2023-10-04 13:00'
|
||||
},
|
||||
{
|
||||
username: '用户E',
|
||||
rating: 1,
|
||||
comment: '非常不满意，不推荐购买！',
|
||||
timestamp: '2023-10-05 14:00'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
onLoad: function () {
|
||||
console.log('Reviews page loaded');
|
||||
},
|
||||
|
||||
onBack: function () {
|
||||
wx.navigateBack();
|
||||
}
|
||||
});
|
||||
3
pages/shop/goods/evaluate/evaluate.json
Normal file
3
pages/shop/goods/evaluate/evaluate.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
23
pages/shop/goods/evaluate/evaluate.wxml
Normal file
23
pages/shop/goods/evaluate/evaluate.wxml
Normal file
@ -0,0 +1,23 @@
|
||||
|
||||
<!-- 顶部导航栏 -->
|
||||
|
||||
<!-- 评价列表 -->
|
||||
<view class="reviews-list">
|
||||
<block wx:for="{{reviews}}" wx:key="index">
|
||||
<view class="review-item">
|
||||
<view class="user-info">
|
||||
<view class="username">{{item.username}}</view>
|
||||
<view class="rating">
|
||||
<block wx:for="{{item.rating}}" wx:key="star">
|
||||
<image class="star" src="/data/image/star.webp" mode="widthFix"></image>
|
||||
</block>
|
||||
<block wx:for="{{5 - item.rating}}" wx:key="emptyStar">
|
||||
<image class="star" src="/data/image/star.webp" mode="widthFix"></image>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class="comment">{{item.comment}}</view>
|
||||
<view class="timestamp">{{item.timestamp}}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
74
pages/shop/goods/evaluate/evaluate.wxss
Normal file
74
pages/shop/goods/evaluate/evaluate.wxss
Normal file
@ -0,0 +1,74 @@
|
||||
/* pages/reviews/reviews.wxss */
|
||||
|
||||
/* 全局样式 */
|
||||
.container {
|
||||
background-color: #f5f5f5;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
/* 顶部导航栏 */
|
||||
.navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #007aff;
|
||||
padding: 20rpx;
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 评价列表 */
|
||||
.reviews-list {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.review-item {
|
||||
background-color: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.rating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.star {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-left: 5rpx;
|
||||
}
|
||||
|
||||
.comment {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
56
pages/shop/goods/goods.js
Normal file
56
pages/shop/goods/goods.js
Normal file
@ -0,0 +1,56 @@
|
||||
// pages/product/product.js
|
||||
|
||||
Page({
|
||||
data: {
|
||||
// 可以在这里添加更多的数据
|
||||
goods_item:[
|
||||
{ id: 1, name: '商品A', price: 100, quantity: 1, image: 'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner1.png', selected: false },
|
||||
{ id: 2, name: '商品B', price: 200, quantity: 1, image: 'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner2.png', selected: false },
|
||||
{ id: 3, name: '商品C', price: 300, quantity: 1, image: 'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner3.png', selected: false },
|
||||
{ id: 4, name: '商品D', price: 400, quantity: 1, image: 'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner4.png', selected: false },
|
||||
{ id: 5, name: '商品E', price: 500, quantity: 1, image: 'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner5.png', selected: false }
|
||||
],
|
||||
user: {
|
||||
avatar: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.y6rdSCGpxbfeb8Rd1CpSuwAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2', // 默认头像路径
|
||||
nickname: '匿名用户' // 默认昵称
|
||||
},
|
||||
comment: {
|
||||
text: '这是一个很棒的产品，我非常喜欢！', // 默认评语
|
||||
purchaseTime: '2024-11-20' // 默认购买时间
|
||||
}
|
||||
},
|
||||
|
||||
onLoad: function () {
|
||||
console.log('Product page loaded');
|
||||
wx.setNavigationBarTitle({
|
||||
title: '商品详情',
|
||||
})
|
||||
},
|
||||
|
||||
onSearch: function (e) {
|
||||
console.log('Search clicked', e.detail.value);
|
||||
// 处理搜索逻辑
|
||||
},
|
||||
|
||||
onBuyNow: function () {
|
||||
console.log('Buy now clicked');
|
||||
// 处理立即购买逻辑
|
||||
},
|
||||
|
||||
onAddToCart: function () {
|
||||
console.log('Add to cart clicked');
|
||||
// 处理加入购物车逻辑
|
||||
},
|
||||
|
||||
onViewReviews: function () {
|
||||
console.log('View reviews clicked');
|
||||
wx.navigateTo({
|
||||
url: '/pages/shop/goods/evaluate/evaluate',
|
||||
})
|
||||
},
|
||||
|
||||
onContactCustomerService: function () {
|
||||
console.log('Contact customer service clicked');
|
||||
// 处理联系客服逻辑
|
||||
}
|
||||
});
|
||||
3
pages/shop/goods/goods.json
Normal file
3
pages/shop/goods/goods.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
62
pages/shop/goods/goods.wxml
Normal file
62
pages/shop/goods/goods.wxml
Normal file
@ -0,0 +1,62 @@
|
||||
<!-- pages/product/product.wxml -->
|
||||
<!-- 商品展示区 -->
|
||||
<view class="product-display">
|
||||
<swiper class="swiper" indicator-dots="true" interval="3000" duration="500">
|
||||
<swiper-item wx:for="{{goods_item}}" wx:key="*this">
|
||||
<image class="swiper-image" src="{{item.image}}" mode="aspectFill"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="product-info">
|
||||
<view class="box-top">
|
||||
<view class="price-info">
|
||||
<view class="discount-price">¥1798</view>
|
||||
<view class="original-price">¥1998</view>
|
||||
</view>
|
||||
<view style="font-size:12px;color:gray;">已售1000+</view>
|
||||
</view>
|
||||
<view class="product-name">海产大礼包包含生蚝三文鱼波士顿龙虾扇贝蛤蜊海虾</view>
|
||||
<view class="promotion-info">
|
||||
<view class="countdown">距离活动结束还有8小时8分48秒</view>
|
||||
</view>
|
||||
<view class="review-info">
|
||||
<view style="font-size:16px;">商品评价(1)</view>
|
||||
<button class="view-reviews-btn" bindtap="onViewReviews">查看全部评价></button>
|
||||
</view>
|
||||
<view class="comment-card">
|
||||
<!-- 用户信息 -->
|
||||
<view class="user-info">
|
||||
<image class="avatar" src="{{user.avatar}}" mode="aspectFit"></image>
|
||||
<text class="nickname">{{user.nickname}}</text>
|
||||
</view>
|
||||
<!-- 评语 -->
|
||||
<view class="comment">
|
||||
<text>{{comment.text}}</text>
|
||||
</view>
|
||||
<!-- 购买时间 -->
|
||||
<view class="purchase-time">
|
||||
<text>购买时间：{{comment.purchaseTime}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="goods_intro">
|
||||
<view class="intro_top">
|
||||
商品详情
|
||||
</view>
|
||||
|
||||
<view wx:for="{{goods_item}}" wx:key="*this">
|
||||
<image class="intro_image" src="{{item.image}}" mode="aspectFill"></image>
|
||||
</view>
|
||||
|
||||
<view class="bottom">
|
||||
相关支持由湛江市计算机协会提供
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<view class="purchase-buttons">
|
||||
<button class="buy-now-btn" bindtap="onBuyNow">立即购买</button>
|
||||
<button class="add-to-cart-btn" bindtap="onAddToCart">加入购物车</button>
|
||||
</view>
|
||||
164
pages/shop/goods/goods.wxss
Normal file
164
pages/shop/goods/goods.wxss
Normal file
@ -0,0 +1,164 @@
|
||||
/* 商品展示区 */
|
||||
.product-display {
|
||||
background-color: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
padding: 10rpx;
|
||||
margin-top: 20rpx;
|
||||
margin: 20rpx 5px;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 600rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.swiper-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
margin-bottom: 10rpx;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.price-info {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.original-price {
|
||||
text-decoration: line-through;
|
||||
color: #999999;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.discount-price {
|
||||
color: #ff5722;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.box-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
.promotion-info {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.review-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.view-reviews-btn {
|
||||
width: 250rpx;
|
||||
height: 30px;
|
||||
background-color: transparent;
|
||||
color: #7c7c7c;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.comment-card {
|
||||
background-color: #fff;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.comment {
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.purchase-time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.goods_intro{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.intro_top{
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
border-top: 1px solid #666;
|
||||
}
|
||||
|
||||
.intro_image{
|
||||
width: 100%;
|
||||
}
|
||||
/* 购买操作区 */
|
||||
.purchase-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
bottom: -20px;
|
||||
height: 60px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
margin: 15px 0;
|
||||
background-color: white;
|
||||
justify-content: space-around;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.buy-now-btn,
|
||||
.add-to-cart-btn {
|
||||
background-color: #ff5722;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 28rpx;
|
||||
width: 45%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.add-to-cart-btn {
|
||||
background-color: #007aff;
|
||||
}
|
||||
|
||||
.bottom{
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 50px;
|
||||
}
|
||||
113
pages/shop/shop.js
Normal file
113
pages/shop/shop.js
Normal file
@ -0,0 +1,113 @@
|
||||
Page({
|
||||
data: {
|
||||
// 轮播图图片列表
|
||||
imageList: [
|
||||
'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner1.png',
|
||||
'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner2.png',
|
||||
'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner3.png',
|
||||
'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner4.png',
|
||||
'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner5.png',
|
||||
'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner6.png',
|
||||
// 更多图片路径...
|
||||
],
|
||||
|
||||
// 商品分类
|
||||
categories: ['全部', '教材','课程资源包'],
|
||||
|
||||
// 当前选中的分类索引
|
||||
currentCategoryIndex: 0,
|
||||
|
||||
// 商品列表
|
||||
productList: [
|
||||
{
|
||||
image: 'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner1.png',
|
||||
name: '商品名称1',
|
||||
price: 99.99,
|
||||
category: '教材'
|
||||
},
|
||||
{
|
||||
image: 'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner2.png',
|
||||
name: '商品名称2',
|
||||
price: 199.99,
|
||||
category: '教材'
|
||||
},
|
||||
{
|
||||
image: 'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner3.png',
|
||||
name: '商品名称3',
|
||||
price: 199.99,
|
||||
category: '课程资源包'
|
||||
},
|
||||
{
|
||||
image: 'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner4.png',
|
||||
name: '商品名称4',
|
||||
price: 199.99,
|
||||
category: '课程资源包'
|
||||
},
|
||||
{
|
||||
image: 'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner5.png',
|
||||
name: '商品名称5',
|
||||
price: 199.99,
|
||||
category: '课程资源包'
|
||||
},
|
||||
// 更多商品数据...
|
||||
],
|
||||
|
||||
// 过滤后的商品列表
|
||||
filteredProductList: []
|
||||
},
|
||||
|
||||
onPullDownRefresh: function() {
|
||||
// 执行下拉刷新操作，如重新加载数据
|
||||
// 模拟数据加载
|
||||
wx.showNavigationBarLoading(); // 在标题栏中显示加载
|
||||
|
||||
// 假设这里进行了数据刷新
|
||||
setTimeout(() => {
|
||||
// 数据刷新完毕，停止加载
|
||||
wx.hideNavigationBarLoading();
|
||||
wx.stopPullDownRefresh(); // 停止下拉动作
|
||||
}, 1500);
|
||||
},
|
||||
|
||||
onLoad: function(options) {
|
||||
// 页面加载时执行的初始化操作
|
||||
this.filterProductsByCategory(this.data.currentCategoryIndex);
|
||||
},
|
||||
|
||||
// 切换分类
|
||||
switchCategory: function(e) {
|
||||
const index = e.currentTarget.dataset.index;
|
||||
this.setData({
|
||||
currentCategoryIndex: index
|
||||
});
|
||||
this.filterProductsByCategory(index);
|
||||
},
|
||||
|
||||
// 根据分类过滤商品列表
|
||||
filterProductsByCategory: function(categoryIndex) {
|
||||
let filteredList = [];
|
||||
if (categoryIndex === 0) {
|
||||
// 全部分类
|
||||
filteredList = this.data.productList;
|
||||
} else {
|
||||
const selectedCategory = this.data.categories[categoryIndex];
|
||||
filteredList = this.data.productList.filter(item => item.category === selectedCategory);
|
||||
}
|
||||
this.setData({
|
||||
filteredProductList: filteredList
|
||||
});
|
||||
},
|
||||
|
||||
// 其他页面事件处理函数...
|
||||
to_car() {
|
||||
wx.navigateTo({
|
||||
url: '/pages/shop/buycar/buycar',
|
||||
})
|
||||
},
|
||||
|
||||
to_goods() {
|
||||
wx.navigateTo({
|
||||
url: '/pages/shop/goods/goods',
|
||||
})
|
||||
}
|
||||
});
|
||||
4
pages/shop/shop.json
Normal file
4
pages/shop/shop.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
32
pages/shop/shop.wxml
Normal file
32
pages/shop/shop.wxml
Normal file
@ -0,0 +1,32 @@
|
||||
<view class="container">
|
||||
<!-- 顶部轮播图 -->
|
||||
<swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="500">
|
||||
<swiper-item wx:for="{{imageList}}" wx:key="*this" bind:tap="to_goods">
|
||||
<image src="{{item}}" class="slide-image" mode="aspectFill"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<!-- 商品分类Tab栏 -->
|
||||
<view class="tabs">
|
||||
<view class="tab {{currentCategoryIndex === index ? 'active' : ''}}" wx:for="{{categories}}" wx:key="*this" data-index="{{index}}" bind:tap="switchCategory">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品列表 -->
|
||||
<view class="product-list">
|
||||
<view class="product-column" wx:for="{{filteredProductList}}" wx:key="*this">
|
||||
<view class="product-item" bind:tap="to_goods">
|
||||
<image src="{{item.image}}" class="product-image" mode="aspectFill"></image>
|
||||
<view class="product-info">
|
||||
<text class="product-name">{{item.name}}</text>
|
||||
<view class="contain">
|
||||
<text class="product-price">￥{{item.price}}</text>
|
||||
<button class="addcar" catchtap="add_to_car">💖</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<button class="tocar" bind:tap="to_car">😎</button>
|
||||
139
pages/shop/shop.wxss
Normal file
139
pages/shop/shop.wxss
Normal file
@ -0,0 +1,139 @@
|
||||
/* 首页容器 */
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* 轮播图样式 */
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 200px; /* 根据实际需求调整高度 */
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.slide-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px; /* 圆角 */
|
||||
}
|
||||
|
||||
/* 商品分类Tab栏样式 */
|
||||
.tabs {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-wrap: nowrap;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 5px;
|
||||
height: 40px;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.tab {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 40px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: #ff5722;
|
||||
border-bottom: 2px solid #ff5722;
|
||||
}
|
||||
|
||||
/* 商品列表样式 */
|
||||
.product-list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.product-column {
|
||||
width: 48%; /* 两列布局，留出间隙 */
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.product-item {
|
||||
width: 100%;
|
||||
border-radius: 10px; /* 圆角 */
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 100%;
|
||||
height: 40vmin;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
white-space: nowrap; /* 防止名称换行 */
|
||||
overflow: hidden; /* 隐藏溢出的文本 */
|
||||
text-overflow: ellipsis; /* 显示省略号 */
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-size: 15px;
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
.contain {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 定义一个圆形按钮的样式 */
|
||||
.addcar {
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
width: 30px; /* 按钮宽度 */
|
||||
height: 30px; /* 按钮高度 */
|
||||
background-color: #ffffff; /* 按钮背景颜色 */
|
||||
border-radius: 10px; /* 圆角为50%，使其成为圆形 */
|
||||
color: rgb(255, 255, 255); /* 文字颜色 */
|
||||
font-size: 16px; /* 文字大小 */
|
||||
box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.2); /* 按钮阴影 */
|
||||
}
|
||||
|
||||
/* 按钮点击时的样式 */
|
||||
.addcar:active {
|
||||
background-color: #c9c9c9; /* 点击时的背景颜色 */
|
||||
}
|
||||
|
||||
.tocar {
|
||||
position: fixed;
|
||||
bottom: 12vh;
|
||||
right: 7vmin;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
background-color: #ffffff; /* 按钮背景颜色 */
|
||||
border-radius: 50%; /* 圆角为50%，使其成为圆形 */
|
||||
color: rgb(255, 0, 0); /* 文字颜色 */
|
||||
font-size: 20px; /* 文字大小 */
|
||||
box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.2); /* 按钮阴影 */
|
||||
}
|
||||
|
||||
.tocar:active {
|
||||
background-color: #c9c9c9; /* 点击时的背景颜色 */
|
||||
}
|
||||
29
project.config.json
Normal file
29
project.config.json
Normal file
@ -0,0 +1,29 @@
|
||||
{
|
||||
"compileType": "miniprogram",
|
||||
"libVersion": "trial",
|
||||
"setting": {
|
||||
"coverView": true,
|
||||
"es6": true,
|
||||
"postcss": true,
|
||||
"minified": true,
|
||||
"enhance": true,
|
||||
"showShadowRootInWxmlPanel": true,
|
||||
"packNpmRelationList": [],
|
||||
"babelSetting": {
|
||||
"ignore": [],
|
||||
"disablePlugins": [],
|
||||
"outputPath": ""
|
||||
},
|
||||
"ignoreUploadUnusedFiles": true
|
||||
},
|
||||
"condition": {},
|
||||
"editorSetting": {
|
||||
"tabIndent": "auto",
|
||||
"tabSize": 2
|
||||
},
|
||||
"packOptions": {
|
||||
"ignore": [],
|
||||
"include": []
|
||||
},
|
||||
"appid": "wx8ae8ce848baae8a9"
|
||||
}
|
||||
7
project.private.config.json
Normal file
7
project.private.config.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
|
||||
"projectname": "miniprogram-2",
|
||||
"setting": {
|
||||
"compileHotReLoad": true
|
||||
}
|
||||
}
|
||||
7
sitemap.json
Normal file
7
sitemap.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
|
||||
"rules": [{
|
||||
"action": "allow",
|
||||
"page": "*"
|
||||
}]
|
||||
}
|
||||
19
utils/util.js
Normal file
19
utils/util.js
Normal file
@ -0,0 +1,19 @@
|
||||
const formatTime = date => {
|
||||
const year = date.getFullYear()
|
||||
const month = date.getMonth() + 1
|
||||
const day = date.getDate()
|
||||
const hour = date.getHours()
|
||||
const minute = date.getMinutes()
|
||||
const second = date.getSeconds()
|
||||
|
||||
return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
|
||||
}
|
||||
|
||||
const formatNumber = n => {
|
||||
n = n.toString()
|
||||
return n[1] ? n : `0${n}`
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
formatTime
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user