aiotagro/jiebanke
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Generating commit message...

Browse Source
This commit is contained in:
mapleaf
2025-08-30 14:33:49 +08:00
parent 4d469e95f0
commit 7f9bfbb381
99 changed files with 69225 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
mini-program/App.vue Normal file
View File

@@ -0,0 +1,17 @@
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
</style>

87
mini-program/api/config.js Normal file
View File

@@ -0,0 +1,87 @@
// API基础配置
const config = {
// 开发环境
development: {
baseURL: 'http://localhost:3000/api',
timeout: 10000
},
// 生产环境
production: {
baseURL: 'https://api.jiebanke.com/api',
timeout: 15000
}
}
// 获取当前环境配置
const getConfig = () => {
const env = process.env.NODE_ENV || 'development'
return config[env]
}
// API端点
const endpoints = {
// 用户相关
USER: {
LOGIN: '/auth/login',
REGISTER: '/auth/register',
PROFILE: '/user/profile',
UPDATE_PROFILE: '/user/profile',
UPLOAD_AVATAR: '/user/avatar'
},
// 旅行计划
TRAVEL: {
LIST: '/travel/list',
DETAIL: '/travel/detail',
CREATE: '/travel/create',
JOIN: '/travel/join',
MY_PLANS: '/travel/my-plans',
SEARCH: '/travel/search'
},
// 动物认养
ANIMAL: {
LIST: '/animal/list',
DETAIL: '/animal/detail',
ADOPT: '/animal/adopt',
MY_ANIMALS: '/animal/my-animals',
CATEGORIES: '/animal/categories'
},
// 送花服务
FLOWER: {
LIST: '/flower/list',
DETAIL: '/flower/detail',
ORDER: '/flower/order',
MY_ORDERS: '/flower/my-orders',
CATEGORIES: '/flower/categories'
},
// 订单管理
ORDER: {
LIST: '/order/list',
DETAIL: '/order/detail',
CANCEL: '/order/cancel',
PAY: '/order/pay',
CONFIRM: '/order/confirm'
},
// 支付相关
PAYMENT: {
CREATE: '/payment/create',
QUERY: '/payment/query',
REFUND: '/payment/refund'
},
// 系统相关
SYSTEM: {
CONFIG: '/system/config',
NOTICE: '/system/notice',
FEEDBACK: '/system/feedback'
}
}
export default {
...getConfig(),
endpoints
}

169
mini-program/api/example.js Normal file
View File

@@ -0,0 +1,169 @@
// API 使用示例
import api, { userService, travelService, homeService, apiUtils } from './index.js'
// 示例1: 用户登录
async function exampleLogin() {
try {
const result = await userService.login({
username: 'user123',
password: 'password123'
})
console.log('登录成功:', result)
// 保存token
api.setAuthToken(result.token)
} catch (error) {
console.error('登录失败:', error)
api.handleError(error)
}
}
// 示例2: 获取首页数据
async function exampleGetHomeData() {
try {
const homeData = await homeService.getHomeData()
console.log('首页数据:', homeData)
// 或者使用错误处理包装器
const { success, data, error } = await api.withErrorHandling(
homeService.getHomeData(),
'首页数据加载成功'
)
if (success) {
// 处理数据
console.log('处理首页数据:', data)
}
} catch (error) {
api.handleError(error, '首页数据加载失败')
}
}
// 示例3: 分页获取旅行计划
async function exampleGetTravelPlans() {
try {
const pagination = apiUtils.generatePagination(1, 10)
const travels = await travelService.getList({
...pagination,
keyword: '西藏'
})
console.log('旅行计划列表:', travels)
} catch (error) {
api.handleError(error)
}
}
// 示例4: 文件上传
async function exampleUploadAvatar() {
try {
// 选择图片
const res = await uni.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album']
})
const filePath = res.tempFilePaths[0]
const uploadResult = await userService.uploadAvatar(filePath)
console.log('头像上传成功:', uploadResult)
} catch (error) {
api.handleError(error, '头像上传失败')
}
}
// 示例5: 完整的页面数据加载流程
async function loadPageData() {
try {
// 并行加载多个数据
const [banners, travels, animals, flowers] = await Promise.all([
homeService.getBanners(),
homeService.getRecommendedTravels(),
homeService.getHotAnimals(),
homeService.getFeaturedFlowers()
])
return {
banners: banners || [],
travelPlans: travels || [],
animals: animals || [],
flowers: flowers || []
}
} catch (error) {
api.handleError(error)
// 返回默认数据或空数据
return {
banners: [],
travelPlans: [],
animals: [],
flowers: []
}
}
}
// 示例6: 订单支付流程
async function examplePaymentFlow(orderId) {
try {
// 1. 创建支付
const payment = await paymentService.create({
orderId,
amount: 100,
paymentMethod: 'wechat'
})
// 2. 调用微信支付
const payResult = await uni.requestPayment({
timeStamp: payment.timeStamp,
nonceStr: payment.nonceStr,
package: payment.package,
signType: payment.signType,
paySign: payment.paySign
})
// 3. 确认支付结果
if (payResult.errMsg === 'requestPayment:ok') {
// 支付成功，更新订单状态
await orderService.pay(orderId)
console.log('支付成功')
}
} catch (error) {
api.handleError(error, '支付失败')
}
}
// 导出示例函数
export default {
exampleLogin,
exampleGetHomeData,
exampleGetTravelPlans,
exampleUploadAvatar,
loadPageData,
examplePaymentFlow
}
// 在页面中使用示例
/*
// 在Vue组件的methods中
methods: {
async loadData() {
const pageData = await loadPageData()
this.banners = pageData.banners
this.travelPlans = pageData.travelPlans
this.animals = pageData.animals
this.flowers = pageData.flowers
},
async handleLogin() {
await exampleLogin()
// 登录成功后重新加载数据
await this.loadData()
}
}
*/

99
mini-program/api/index.js Normal file
View File

@@ -0,0 +1,99 @@
// API模块主入口
import request from './request.js'
import * as services from './services.js'
// 导出所有服务
export * from './services.js'
// 导出请求实例
export { request }
// 默认导出
export default {
// 请求实例
request,
// 所有服务
...services,
// 工具函数
utils: services.apiUtils,
// 初始化配置
init(config = {}) {
// 可以在这里进行一些初始化配置
console.log('API模块初始化完成', config)
},
// 设置认证token
setAuthToken(token) {
uni.setStorageSync('token', token)
},
// 获取认证token
getAuthToken() {
return uni.getStorageSync('token')
},
// 清除认证信息
clearAuth() {
uni.removeStorageSync('token')
uni.removeStorageSync('refreshToken')
},
// 检查是否已登录
isLoggedIn() {
return !!this.getAuthToken()
},
// 统一错误处理
handleError(error, defaultMessage = '操作失败') {
const errorMessage = error.message || defaultMessage
const errorCode = error.code || 'UNKNOWN_ERROR'
// 可以根据错误码进行不同的处理
switch (errorCode) {
case 'UNAUTHORIZED':
this.clearAuth()
uni.navigateTo({ url: '/pages/auth/login' })
break
case 'NETWORK_ERROR':
uni.showToast({ title: '网络连接失败', icon: 'none' })
break
default:
uni.showToast({ title: errorMessage, icon: 'none' })
}
return { error: true, code: errorCode, message: errorMessage }
},
// 请求包装器，自动处理错误
async withErrorHandling(promise, successMessage = '操作成功') {
try {
const result = await promise
if (successMessage) {
uni.showToast({ title: successMessage, icon: 'success' })
}
return { success: true, data: result }
} catch (error) {
return this.handleError(error)
}
}
}
// 自动初始化
const api = {
request,
...services
}
// 全局错误处理
const originalRequest = uni.request
uni.request = function(config) {
return originalRequest.call(this, config).catch(error => {
console.error('请求失败:', error)
throw error
})
}
export default api

312
mini-program/api/mock.js Normal file
View File

@@ -0,0 +1,312 @@
// Mock数据 - 用于开发和测试
import { OrderStatus, TravelStatus } from './types.js'
// Mock用户数据
export const mockUsers = [
{
id: 1,
username: 'user1',
nickname: '旅行爱好者',
avatar: '/static/user/avatar1.jpg',
phone: '138****1234',
points: 150,
level: 2,
createTime: '2024-01-15'
},
{
id: 2,
username: 'user2',
nickname: '动物保护者',
avatar: '/static/user/avatar2.jpg',
email: 'user2@example.com',
points: 300,
level: 3,
createTime: '2024-02-20'
}
]
// Mock轮播图数据
export const mockBanners = [
{
id: 1,
image: '/static/banners/banner1.jpg',
title: '西藏之旅',
link: '/pages/travel/list',
type: 'travel'
},
{
id: 2,
image: '/static/banners/banner2.jpg',
title: '动物认养',
link: '/pages/animal/list',
type: 'animal'
},
{
id: 3,
image: '/static/banners/banner3.jpg',
title: '鲜花配送',
link: '/pages/flower/list',
type: 'flower'
}
]
// Mock旅行计划数据
export const mockTravelPlans = [
{
id: 1,
title: '西藏拉萨深度游',
destination: '西藏拉萨',
coverImage: '/static/travel/tibet.jpg',
startDate: '2024-10-01',
endDate: '2024-10-07',
budget: 5000,
currentMembers: 3,
maxMembers: 6,
description: '探索西藏神秘文化，感受高原风情',
status: TravelStatus.RECRUITING,
creator: mockUsers[0],
createTime: '2024-08-20'
},
{
id: 2,
title: '云南大理休闲游',
destination: '云南大理',
coverImage: '/static/travel/yunnan.jpg',
startDate: '2024-10-05',
endDate: '2024-10-12',
budget: 3500,
currentMembers: 2,
maxMembers: 4,
description: '漫步古城，享受洱海风光',
status: TravelStatus.RECRUITING,
creator: mockUsers[1],
createTime: '2024-08-22'
}
]
// Mock动物数据
export const mockAnimals = [
{
id: 1,
name: '小羊驼',
species: '羊驼',
price: 1000,
image: '/static/animals/alpaca.jpg',
description: '温顺可爱的羊驼，适合家庭认养',
location: '西藏牧场',
isHot: true,
status: 'available',
createTime: '2024-08-15'
},
{
id: 2,
name: '小绵羊',
species: '绵羊',
price: 800,
image: '/static/animals/sheep.jpg',
description: '毛茸茸的小绵羊，非常温顺',
location: '内蒙古草原',
isHot: false,
status: 'available',
createTime: '2024-08-18'
}
]
// Mock花束数据
export const mockFlowers = [
{
id: 1,
name: '浪漫玫瑰',
description: '11朵红玫瑰，象征热烈的爱情',
price: 199,
image: '/static/flowers/rose.jpg',
category: '爱情',
stock: 50,
createTime: '2024-08-10'
},
{
id: 2,
name: '向日葵花束',
description: '9朵向日葵，象征阳光和希望',
price: 179,
image: '/static/flowers/sunflower.jpg',
category: '祝福',
stock: 30,
createTime: '2024-08-12'
}
]
// Mock订单数据
export const mockOrders = [
{
id: 'ORD202408270001',
orderNo: '202408270001',
type: 'travel',
title: '西藏拉萨深度游',
image: '/static/travel/tibet.jpg',
price: 5000,
count: 1,
totalAmount: 5000,
status: OrderStatus.UNPAID,
createTime: '2024-08-27 10:00:00'
},
{
id: 'ORD202408270002',
orderNo: '202408270002',
type: 'animal',
title: '小羊驼认养',
image: '/static/animals/alpaca.jpg',
price: 1000,
count: 1,
totalAmount: 1000,
status: OrderStatus.PAID,
createTime: '2024-08-27 11:30:00',
payTime: '2024-08-27 11:35:00'
}
]
// Mock系统公告
export const mockNotices = [
{
id: 1,
title: '系统维护通知',
content: '系统将于今晚进行维护，预计耗时2小时',
type: 'system',
isActive: true,
createTime: '2024-08-26'
},
{
id: 2,
title: '新功能上线',
content: '送花服务正式上线，欢迎体验',
type: 'feature',
isActive: true,
createTime: '2024-08-27'
}
]
// Mock API响应
export const mockResponses = {
// 成功响应
success: (data, message = '操作成功') => ({
code: 0,
message,
data,
timestamp: Date.now()
}),
// 错误响应
error: (code, message) => ({
code,
message,
timestamp: Date.now()
}),
// 分页响应
pagination: (list, total, page = 1, pageSize = 10) => ({
code: 0,
message: '操作成功',
data: {
list,
total,
page,
pageSize,
totalPages: Math.ceil(total / pageSize)
},
timestamp: Date.now()
})
}
// Mock服务函数
export const mockService = {
// 模拟延迟
delay: (ms = 500) => new Promise(resolve => setTimeout(resolve, ms)),
// 模拟登录
mockLogin: async (username, password) => {
await mockService.delay(1000)
if (username === 'admin' && password === '123456') {
return mockResponses.success({
token: 'mock-token-123456',
refreshToken: 'mock-refresh-token-123456',
userInfo: mockUsers[0]
})
}
return mockResponses.error(1001, '用户名或密码错误')
},
// 模拟获取首页数据
mockHomeData: async () => {
await mockService.delay(800)
return mockResponses.success({
banners: mockBanners,
travelPlans: mockTravelPlans,
animals: mockAnimals,
flowers: mockFlowers,
notices: mockNotices
})
},
// 模拟获取列表数据
mockList: async (type, page = 1, pageSize = 10) => {
await mockService.delay(600)
const allData = {
travel: mockTravelPlans,
animal: mockAnimals,
flower: mockFlowers,
order: mockOrders
}
const data = allData[type] || []
const start = (page - 1) * pageSize
const end = start + pageSize
const paginatedData = data.slice(start, end)
return mockResponses.pagination(paginatedData, data.length, page, pageSize)
},
// 模拟获取详情
mockDetail: async (type, id) => {
await mockService.delay(500)
const allData = {
travel: mockTravelPlans,
animal: mockAnimals,
flower: mockFlowers,
order: mockOrders
}
const data = allData[type] || []
const item = data.find(item => item.id === id || item.id === parseInt(id))
if (item) {
return mockResponses.success(item)
}
return mockResponses.error(404, '数据不存在')
}
}
// 导出所有Mock数据
export default {
mockUsers,
mockBanners,
mockTravelPlans,
mockAnimals,
mockFlowers,
mockOrders,
mockNotices,
mockResponses,
mockService
}
// 使用示例
/*
// 在开发环境中使用Mock数据
if (process.env.NODE_ENV === 'development') {
// 可以在这里替换真实的API调用
}
*/

230
mini-program/api/request.js Normal file
View File

@@ -0,0 +1,230 @@
import config from './config.js'
// 请求队列（用于处理token刷新）
const requestQueue = []
let isRefreshing = false
class Request {
constructor() {
this.baseURL = config.baseURL
this.timeout = config.timeout
this.interceptors = {
request: [],
response: []
}
}
// 添加请求拦截器
addRequestInterceptor(interceptor) {
this.interceptors.request.push(interceptor)
}
// 添加响应拦截器
addResponseInterceptor(interceptor) {
this.interceptors.response.push(interceptor)
}
// 执行请求拦截器
async runRequestInterceptors(config) {
for (const interceptor of this.interceptors.request) {
config = await interceptor(config)
}
return config
}
// 执行响应拦截器
async runResponseInterceptors(response) {
for (const interceptor of this.interceptors.response) {
response = await interceptor(response)
}
return response
}
// 核心请求方法
async request(options) {
try {
// 合并配置
const requestConfig = {
url: options.url.startsWith('http') ? options.url : `${this.baseURL}${options.url}`,
method: options.method || 'GET',
header: {
'Content-Type': 'application/json',
...options.header
},
data: options.data,
timeout: this.timeout
}
// 执行请求拦截器
const finalConfig = await this.runRequestInterceptors(requestConfig)
// 发起请求
const response = await uni.request(finalConfig)
// 执行响应拦截器
const finalResponse = await this.runResponseInterceptors(response)
return finalResponse[1] // uni.request返回的是数组[error, success]
} catch (error) {
console.error('Request error:', error)
throw error
}
}
// GET请求
get(url, data = {}, options = {}) {
return this.request({
url,
method: 'GET',
data,
...options
})
}
// POST请求
post(url, data = {}, options = {}) {
return this.request({
url,
method: 'POST',
data,
...options
})
}
// PUT请求
put(url, data = {}, options = {}) {
return this.request({
url,
method: 'PUT',
data,
...options
})
}
// DELETE请求
delete(url, data = {}, options = {}) {
return this.request({
url,
method: 'DELETE',
data,
...options
})
}
// 上传文件
upload(url, filePath, formData = {}, options = {}) {
return new Promise((resolve, reject) => {
uni.uploadFile({
url: `${this.baseURL}${url}`,
filePath,
name: 'file',
formData,
success: resolve,
fail: reject,
...options
})
})
}
// 下载文件
download(url, options = {}) {
return new Promise((resolve, reject) => {
uni.downloadFile({
url: `${this.baseURL}${url}`,
success: resolve,
fail: reject,
...options
})
})
}
}
// 创建请求实例
const request = new Request()
// 添加请求拦截器 - Token处理
request.addRequestInterceptor(async (config) => {
const token = uni.getStorageSync('token')
if (token) {
config.header.Authorization = `Bearer ${token}`
}
return config
})
// 添加响应拦截器 - 错误处理
request.addResponseInterceptor(async (response) => {
const { statusCode, data } = response
if (statusCode === 200) {
if (data.code === 0) {
return data.data
} else {
// 业务错误
const error = new Error(data.message || '业务错误')
error.code = data.code
throw error
}
} else if (statusCode === 401) {
// Token过期，尝试刷新
return handleTokenExpired(response)
} else {
// 网络错误
throw new Error(`网络错误: ${statusCode}`)
}
})
// Token过期处理
async function handleTokenExpired(response) {
if (isRefreshing) {
// 如果正在刷新，将请求加入队列
return new Promise((resolve) => {
requestQueue.push(() => resolve(request.request(response.config)))
})
}
isRefreshing = true
const refreshToken = uni.getStorageSync('refreshToken')
if (!refreshToken) {
// 没有refreshToken，跳转到登录页
uni.navigateTo({ url: '/pages/auth/login' })
throw new Error('请重新登录')
}
try {
// 尝试刷新Token
const result = await request.post(config.endpoints.USER.REFRESH_TOKEN, {
refreshToken
})
// 保存新Token
uni.setStorageSync('token', result.token)
uni.setStorageSync('refreshToken', result.refreshToken)
// 重试原始请求
const retryResponse = await request.request(response.config)
// 处理队列中的请求
processRequestQueue()
return retryResponse
} catch (error) {
// 刷新失败，清空Token并跳转登录
uni.removeStorageSync('token')
uni.removeStorageSync('refreshToken')
uni.navigateTo({ url: '/pages/auth/login' })
throw error
} finally {
isRefreshing = false
}
}
// 处理请求队列
function processRequestQueue() {
while (requestQueue.length > 0) {
const retry = requestQueue.shift()
retry()
}
}
export default request

189
mini-program/api/services.js Normal file
View File

@@ -0,0 +1,189 @@
import request from './request.js'
import config from './config.js'
const { endpoints } = config
// 用户服务
export const userService = {
// 登录
login: (data) => request.post(endpoints.USER.LOGIN, data),
// 注册
register: (data) => request.post(endpoints.USER.REGISTER, data),
// 获取用户信息
getProfile: () => request.get(endpoints.USER.PROFILE),
// 更新用户信息
updateProfile: (data) => request.put(endpoints.USER.UPDATE_PROFILE, data),
// 上传头像
uploadAvatar: (filePath) => request.upload(endpoints.USER.UPLOAD_AVATAR, filePath),
// 退出登录
logout: () => {
uni.removeStorageSync('token')
uni.removeStorageSync('refreshToken')
return Promise.resolve()
}
}
// 旅行计划服务
export const travelService = {
// 获取旅行计划列表
getList: (params = {}) => request.get(endpoints.TRAVEL.LIST, params),
// 获取旅行计划详情
getDetail: (id) => request.get(`${endpoints.TRAVEL.DETAIL}/${id}`),
// 创建旅行计划
create: (data) => request.post(endpoints.TRAVEL.CREATE, data),
// 加入旅行计划
join: (travelId) => request.post(`${endpoints.TRAVEL.JOIN}/${travelId}`),
// 获取我的旅行计划
getMyPlans: (params = {}) => request.get(endpoints.TRAVEL.MY_PLANS, params),
// 搜索旅行计划
search: (keyword, params = {}) => request.get(endpoints.TRAVEL.SEARCH, { keyword, ...params })
}
// 动物认养服务
export const animalService = {
// 获取动物列表
getList: (params = {}) => request.get(endpoints.ANIMAL.LIST, params),
// 获取动物详情
getDetail: (id) => request.get(`${endpoints.ANIMAL.DETAIL}/${id}`),
// 认养动物
adopt: (animalId, data) => request.post(`${endpoints.ANIMAL.ADOPT}/${animalId}`, data),
// 获取我的动物
getMyAnimals: (params = {}) => request.get(endpoints.ANIMAL.MY_ANIMALS, params),
// 获取动物分类
getCategories: () => request.get(endpoints.ANIMAL.CATEGORIES)
}
// 送花服务
export const flowerService = {
// 获取花束列表
getList: (params = {}) => request.get(endpoints.FLOWER.LIST, params),
// 获取花束详情
getDetail: (id) => request.get(`${endpoints.FLOWER.DETAIL}/${id}`),
// 下单
order: (data) => request.post(endpoints.FLOWER.ORDER, data),
// 获取我的订单
getMyOrders: (params = {}) => request.get(endpoints.FLOWER.MY_ORDERS, params),
// 获取花束分类
getCategories: () => request.get(endpoints.FLOWER.CATEGORIES)
}
// 订单服务
export const orderService = {
// 获取订单列表
getList: (params = {}) => request.get(endpoints.ORDER.LIST, params),
// 获取订单详情
getDetail: (id) => request.get(`${endpoints.ORDER.DETAIL}/${id}`),
// 取消订单
cancel: (id) => request.post(`${endpoints.ORDER.CANCEL}/${id}`),
// 支付订单
pay: (id) => request.post(`${endpoints.ORDER.PAY}/${id}`),
// 确认收货
confirm: (id) => request.post(`${endpoints.ORDER.CONFIRM}/${id}`)
}
// 支付服务
export const paymentService = {
// 创建支付
create: (data) => request.post(endpoints.PAYMENT.CREATE, data),
// 查询支付状态
query: (paymentId) => request.get(`${endpoints.PAYMENT.QUERY}/${paymentId}`),
// 退款
refund: (paymentId, data) => request.post(`${endpoints.PAYMENT.REFUND}/${paymentId}`, data)
}
// 系统服务
export const systemService = {
// 获取系统配置
getConfig: () => request.get(endpoints.SYSTEM.CONFIG),
// 获取公告列表
getNotices: (params = {}) => request.get(endpoints.SYSTEM.NOTICE, params),
// 提交反馈
submitFeedback: (data) => request.post(endpoints.SYSTEM.FEEDBACK, data)
}
// 首页数据服务
export const homeService = {
// 获取首页数据
getHomeData: () => request.get('/home/data'),
// 获取轮播图
getBanners: () => request.get('/home/banners'),
// 获取推荐旅行计划
getRecommendedTravels: () => request.get('/home/recommended-travels'),
// 获取热门动物
getHotAnimals: () => request.get('/home/hot-animals'),
// 获取精选花束
getFeaturedFlowers: () => request.get('/home/featured-flowers')
}
// 工具函数
export const apiUtils = {
// 生成分页参数
generatePagination: (page = 1, pageSize = 10) => ({
page,
pageSize,
skip: (page - 1) * pageSize
}),
// 处理上传进度
handleUploadProgress: (progressEvent) => {
const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total)
return percent
},
// 处理下载进度
handleDownloadProgress: (progressEvent) => {
const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total)
return percent
},
// 格式化错误信息
formatError: (error) => {
if (error.code) {
return error.message
}
return '网络连接失败，请检查网络设置'
}
}
// 默认导出所有服务
export default {
userService,
travelService,
animalService,
flowerService,
orderService,
paymentService,
systemService,
homeService,
apiUtils
}

242
mini-program/api/types.js Normal file
View File

@@ -0,0 +1,242 @@
// API 类型定义
/**
* 基础响应类型
* @template T
* @typedef {Object} BaseResponse
* @property {number} code - 响应码 (0表示成功)
* @property {string} message - 响应消息
* @property {T} [data] - 响应数据
* @property {number} [timestamp] - 时间戳
*/
/**
* 分页参数
* @typedef {Object} PaginationParams
* @property {number} [page] - 页码
* @property {number} [pageSize] - 每页数量
* @property {string} [keyword] - 搜索关键词
*/
/**
* 分页响应
* @template T
* @typedef {Object} PaginationResponse
* @property {T[]} list - 数据列表
* @property {number} total - 总数量
* @property {number} page - 当前页码
* @property {number} pageSize - 每页数量
* @property {number} totalPages - 总页数
*/
/**
* 用户信息
* @typedef {Object} UserInfo
* @property {number} id - 用户ID
* @property {string} username - 用户名
* @property {string} nickname - 昵称
* @property {string} avatar - 头像URL
* @property {string} [phone] - 手机号
* @property {string} [email] - 邮箱
* @property {number} points - 积分
* @property {number} level - 会员等级
* @property {string} createTime - 创建时间
*/
/**
* 登录请求参数
* @typedef {Object} LoginParams
* @property {string} username - 用户名
* @property {string} password - 密码
*/
/**
* 登录响应
* @typedef {Object} LoginResponse
* @property {string} token - 访问令牌
* @property {string} refreshToken - 刷新令牌
* @property {UserInfo} userInfo - 用户信息
*/
/**
* 旅行计划
* @typedef {Object} TravelPlan
* @property {number} id - 计划ID
* @property {string} title - 标题
* @property {string} destination - 目的地
* @property {string} coverImage - 封面图
* @property {string} startDate - 开始日期
* @property {string} endDate - 结束日期
* @property {number} budget - 预算
* @property {number} currentMembers - 当前成员数
* @property {number} maxMembers - 最大成员数
* @property {string} description - 描述
* @property {string} status - 状态
* @property {UserInfo} creator - 创建者
* @property {string} createTime - 创建时间
*/
/**
* 动物信息
* @typedef {Object} AnimalInfo
* @property {number} id - 动物ID
* @property {string} name - 名称
* @property {string} species - 种类
* @property {number} price - 价格
* @property {string} image - 图片
* @property {string} description - 描述
* @property {string} location - 位置
* @property {boolean} isHot - 是否热门
* @property {string} status - 状态
* @property {string} createTime - 创建时间
*/
/**
* 花束信息
* @typedef {Object} FlowerInfo
* @property {number} id - 花束ID
* @property {string} name - 名称
* @property {string} description - 描述
* @property {number} price - 价格
* @property {string} image - 图片
* @property {string} category - 分类
* @property {number} stock - 库存
* @property {string} createTime - 创建时间
*/
/**
* 订单信息
* @typedef {Object} OrderInfo
* @property {string} id - 订单ID
* @property {string} orderNo - 订单编号
* @property {string} type - 订单类型 (travel/animal/flower)
* @property {string} title - 订单标题
* @property {string} image - 图片
* @property {number} price - 单价
* @property {number} count - 数量
* @property {number} totalAmount - 总金额
* @property {string} status - 订单状态
* @property {string} createTime - 创建时间
* @property {string} [payTime] - 支付时间
* @property {string} [completeTime] - 完成时间
*/
/**
* 支付信息
* @typedef {Object} PaymentInfo
* @property {string} paymentId - 支付ID
* @property {number} amount - 支付金额
* @property {string} status - 支付状态
* @property {string} createTime - 创建时间
* @property {string} [payTime] - 支付时间
*/
/**
* 系统公告
* @typedef {Object} SystemNotice
* @property {number} id - 公告ID
* @property {string} title - 标题
* @property {string} content - 内容
* @property {string} type - 类型
* @property {boolean} isActive - 是否激活
* @property {string} createTime - 创建时间
*/
/**
* 错误码定义
* @enum {number}
*/
export const ErrorCode = {
SUCCESS: 0,
UNAUTHORIZED: 401,
FORBIDDEN: 403,
NOT_FOUND: 404,
INTERNAL_ERROR: 500,
NETWORK_ERROR: 1001,
PARAM_ERROR: 1002,
BUSINESS_ERROR: 1003
}
/**
* 订单状态
* @enum {string}
*/
export const OrderStatus = {
UNPAID: 'unpaid', // 待付款
PAID: 'paid', // 已付款
DELIVERED: 'delivered', // 已发货
COMPLETED: 'completed', // 已完成
CANCELLED: 'cancelled' // 已取消
}
/**
* 支付状态
* @enum {string}
*/
export const PaymentStatus = {
PENDING: 'pending', // 待支付
SUCCESS: 'success', // 支付成功
FAILED: 'failed', // 支付失败
REFUNDED: 'refunded' // 已退款
}
/**
* 旅行计划状态
* @enum {string}
*/
export const TravelStatus = {
RECRUITING: 'recruiting', // 招募中
FULL: 'full', // 已满员
ONGOING: 'ongoing', // 进行中
COMPLETED: 'completed', // 已完成
CANCELLED: 'cancelled' // 已取消
}
// 导出所有类型
export default {
BaseResponse,
PaginationParams,
PaginationResponse,
UserInfo,
LoginParams,
LoginResponse,
TravelPlan,
AnimalInfo,
FlowerInfo,
OrderInfo,
PaymentInfo,
SystemNotice,
ErrorCode,
OrderStatus,
PaymentStatus,
TravelStatus
}
// 类型检查工具
export const TypeUtils = {
/**
* 检查是否为有效用户信息
* @param {any} obj
* @returns {boolean}
*/
isUserInfo(obj) {
return obj && typeof obj.id === 'number' && typeof obj.username === 'string'
},
/**
* 检查是否为有效旅行计划
* @param {any} obj
* @returns {boolean}
*/
isTravelPlan(obj) {
return obj && typeof obj.id === 'number' && typeof obj.destination === 'string'
},
/**
* 检查是否为有效订单信息
* @param {any} obj
* @returns {boolean}
*/
isOrderInfo(obj) {
return obj && typeof obj.id === 'string' && typeof obj.orderNo === 'string'
}
}

20
mini-program/index.html Normal file
View File

@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
CSS.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<title></title>
<!--preload-links-->
<!--app-context-->
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/main.js"></script>
</body>
</html>

22
mini-program/main.js Normal file
View File

@@ -0,0 +1,22 @@
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif

72
mini-program/manifest.json Normal file
View File

@@ -0,0 +1,72 @@
{
"name" : "mini-program",
"appid" : "__UNI__6B62B6B",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
/* 5+App特有相关 */
"app-plus" : {
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
/* 模块配置 */
"modules" : {},
/* 应用发布信息 */
"distribute" : {
/* android打包配置 */
"android" : {
"permissions" : [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
/* ios打包配置 */
"ios" : {},
/* SDK配置 */
"sdkConfigs" : {}
}
},
/* 快应用特有相关 */
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true
},
"mp-alipay" : {
"usingComponents" : true
},
"mp-baidu" : {
"usingComponents" : true
},
"mp-toutiao" : {
"usingComponents" : true
},
"uniStatistics" : {
"enable" : false
},
"vueVersion" : "3"
}

39
mini-program/package.json Normal file
View File

@@ -0,0 +1,39 @@
{
"name": "jiebanke-mini-program",
"version": "1.0.0",
"description": "结伴客微信小程序",
"main": "main.js",
"scripts": {
"dev": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
"build": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
"dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve",
"build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
"build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build"
},
"dependencies": {
"@dcloudio/uni-app": "^3.0.0",
"@dcloudio/uni-components": "^3.0.0",
"@dcloudio/uni-h5": "^3.0.0",
"@dcloudio/uni-mp-weixin": "^3.0.0",
"vue": "^3.2.0",
"vuex": "^4.0.0"
},
"devDependencies": {
"@dcloudio/types": "^3.0.0",
"@dcloudio/uni-cli-shared": "^3.0.0",
"@dcloudio/uni-migration": "^3.0.0",
"@dcloudio/uni-template-compiler": "^3.0.0",
"@dcloudio/vue-cli-plugin-uni": "^3.0.0",
"@vue/cli-service": "^5.0.0",
"cross-env": "^7.0.0",
"sass": "^1.32.0",
"sass-loader": "^12.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}

17
mini-program/pages.json Normal file
View File

@@ -0,0 +1,17 @@
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}

178
mini-program/pages/animal/detail.vue Normal file
View File

@@ -0,0 +1,178 @@
<template>
<view class="container">
<!-- 动物图片轮播 -->
<swiper class="animal-swiper" :indicator-dots="true">
<swiper-item v-for="(img, index) in animal.images" :key="index">
<image :src="img" mode="aspectFill" class="swiper-image"></image>
</swiper-item>
</swiper>
<!-- 动物基本信息 -->
<view class="animal-info">
<text class="name">{{ animal.name }}</text>
<view class="meta">
<text class="species">{{ animal.species }}</text>
<text class="price">¥{{ animal.price }}</text>
</view>
<text class="location">{{ animal.location }}</text>
</view>
<!-- 动物详情 -->
<view class="section">
<text class="section-title">动物介绍</text>
<text class="description">{{ animal.description }}</text>
</view>
<!-- 认养信息 -->
<view class="section">
<text class="section-title">认养说明</text>
<text class="adoption-info">{{ animal.adoptionInfo }}</text>
</view>
<!-- 操作按钮 -->
<view class="action-bar">
<button class="btn adopt" @click="handleAdopt">立即认养</button>
<button class="btn contact" @click="handleContact">联系管理员</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
animal: {
id: 1,
name: '小羊驼',
species: '羊驼',
price: 1000,
location: '西藏牧场',
images: [
'/static/animals/alpaca1.jpg',
'/static/animals/alpaca2.jpg'
],
description: '这是一只可爱的羊驼，性格温顺，喜欢与人互动。',
adoptionInfo: '认养后您将获得：\n1. 专属认养证书\n2. 定期照片和视频\n3. 牧场参观机会'
}
}
},
methods: {
handleAdopt() {
uni.showModal({
title: '确认认养',
content: '确定要认养这只可爱的' + this.animal.name + '吗？',
success: (res) => {
if (res.confirm) {
uni.showToast({
title: '认养成功',
icon: 'success'
})
}
}
})
},
handleContact() {
uni.makePhoneCall({
phoneNumber: '13800138000'
})
}
}
}
</script>
<style scoped>
.container {
padding-bottom: 120rpx;
}
.animal-swiper {
height: 400rpx;
}
.swiper-image {
width: 100%;
height: 100%;
}
.animal-info {
padding: 30rpx;
}
.name {
font-size: 36rpx;
font-weight: bold;
color: #333;
}
.meta {
display: flex;
justify-content: space-between;
margin: 20rpx 0;
}
.species {
font-size: 28rpx;
color: #666;
}
.price {
font-size: 28rpx;
color: #ff9500;
font-weight: bold;
}
.location {
font-size: 26rpx;
color: #999;
}
.section {
padding: 30rpx;
border-top: 1rpx solid #eee;
}
.section-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
margin-bottom: 20rpx;
}
.description, .adoption-info {
font-size: 28rpx;
color: #666;
line-height: 1.6;
}
.adoption-info {
white-space: pre-line;
}
.action-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
padding: 20rpx;
background: #fff;
box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
}
.btn {
flex: 1;
margin: 0 10rpx;
font-size: 28rpx;
}
.adopt {
background-color: #ff2d55;
color: #fff;
}
.contact {
background-color: #fff;
color: #ff2d55;
border: 1rpx solid #ff2d55;
}
</style>

260
mini-program/pages/flower/order.vue Normal file
View File

@@ -0,0 +1,260 @@
<template>
<view class="container">
<!-- 花束选择 -->
<view class="section">
<text class="section-title">选择花束</text>
<scroll-view class="flower-list" scroll-x>
<view
v-for="(item, index) in flowers"
:key="index"
class="flower-item"
:class="{active: selectedFlower === index}"
@click="selectFlower(index)"
>
<image :src="item.image" class="flower-image"></image>
<text class="flower-name">{{ item.name }}</text>
<text class="flower-price">¥{{ item.price }}</text>
</view>
</scroll-view>
</view>
<!-- 收花人信息 -->
<view class="section">
<text class="section-title">收花人信息</text>
<view class="form-item">
<text class="label">姓名</text>
<input v-model="receiver.name" placeholder="请输入收花人姓名" />
</view>
<view class="form-item">
<text class="label">电话</text>
<input v-model="receiver.phone" type="number" placeholder="请输入收花人电话" />
</view>
<view class="form-item">
<text class="label">地址</text>
<input v-model="receiver.address" placeholder="请输入详细地址" />
</view>
</view>
<!-- 祝福语 -->
<view class="section">
<text class="section-title">祝福语</text>
<textarea
v-model="greeting"
placeholder="写下您的祝福..."
class="greeting-input"
></textarea>
</view>
<!-- 订单汇总 -->
<view class="order-summary">
<text class="summary-text">总计: ¥{{ flowers[selectedFlower].price }}</text>
</view>
<!-- 提交按钮 -->
<view class="action-bar">
<button class="submit-btn" @click="submitOrder">立即下单</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
selectedFlower: 0,
flowers: [
{
name: '浪漫玫瑰',
price: 199,
image: '/static/flowers/rose.jpg'
},
{
name: '温馨康乃馨',
price: 159,
image: '/static/flowers/carnation.jpg'
},
{
name: '向日葵花束',
price: 179,
image: '/static/flowers/sunflower.jpg'
},
{
name: '百合花束',
price: 219,
image: '/static/flowers/lily.jpg'
}
],
receiver: {
name: '',
phone: '',
address: ''
},
greeting: ''
}
},
methods: {
selectFlower(index) {
this.selectedFlower = index
},
submitOrder() {
if (!this.validateForm()) return
uni.showLoading({
title: '提交中...'
})
// 模拟API请求
setTimeout(() => {
uni.hideLoading()
uni.showToast({
title: '下单成功',
icon: 'success'
})
this.resetForm()
}, 1500)
},
validateForm() {
if (!this.receiver.name) {
uni.showToast({ title: '请输入收花人姓名', icon: 'none' })
return false
}
if (!this.receiver.phone) {
uni.showToast({ title: '请输入收花人电话', icon: 'none' })
return false
}
if (!this.receiver.address) {
uni.showToast({ title: '请输入收花地址', icon: 'none' })
return false
}
return true
},
resetForm() {
this.receiver = {
name: '',
phone: '',
address: ''
}
this.greeting = ''
}
}
}
</script>
<style scoped>
.container {
padding-bottom: 120rpx;
}
.section {
padding: 30rpx;
background: #fff;
margin-bottom: 20rpx;
}
.section-title {
font-size: 32rpx;
font-weight: bold;
margin-bottom: 20rpx;
display: block;
}
.flower-list {
white-space: nowrap;
}
.flower-item {
display: inline-block;
width: 200rpx;
margin-right: 20rpx;
text-align: center;
padding: 10rpx;
border-radius: 10rpx;
border: 1rpx solid #eee;
}
.flower-item.active {
border-color: #ff2d55;
background-color: #fff5f7;
}
.flower-image {
width: 160rpx;
height: 160rpx;
border-radius: 8rpx;
}
.flower-name {
display: block;
font-size: 26rpx;
margin-top: 10rpx;
}
.flower-price {
display: block;
font-size: 26rpx;
color: #ff2d55;
margin-top: 5rpx;
}
.form-item {
margin-bottom: 20rpx;
}
.label {
display: block;
font-size: 28rpx;
margin-bottom: 10rpx;
color: #666;
}
input {
height: 80rpx;
border: 1rpx solid #eee;
border-radius: 8rpx;
padding: 0 20rpx;
font-size: 28rpx;
}
.greeting-input {
width: 100%;
height: 160rpx;
border: 1rpx solid #eee;
border-radius: 8rpx;
padding: 20rpx;
font-size: 28rpx;
box-sizing: border-box;
}
.order-summary {
position: fixed;
bottom: 120rpx;
left: 0;
right: 0;
background: #fff;
padding: 20rpx 30rpx;
border-top: 1rpx solid #eee;
}
.summary-text {
font-size: 32rpx;
color: #ff2d55;
font-weight: bold;
float: right;
}
.action-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 20rpx;
background: #fff;
box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
}
.submit-btn {
background-color: #ff2d55;
color: #fff;
font-size: 32rpx;
}
</style>

687
mini-program/pages/index/index.vue Normal file
View File

@@ -0,0 +1,687 @@
<template>
<view class="container">
<!-- 顶部状态栏占位 -->
<view class="status-bar"></view>
<!-- 搜索栏 -->
<view class="search-bar">
<view class="search-input">
<uni-icons type="search" size="16" color="#999"></uni-icons>
<input type="text" placeholder="搜索目的地、用户、动物" placeholder-class="placeholder" @focus="navigateToSearch" />
</view>
</view>
<!-- 轮播图 -->
<swiper class="banner-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
<swiper-item v-for="(item, index) in banners" :key="index" @click="navigateTo(item.link)">
<image :src="item.image" mode="aspectFill" class="banner-image" />
</swiper-item>
</swiper>
<!-- 功能入口 -->
<view class="feature-grid">
<view class="feature-item" @click="navigateTo('/pages/travel/list')">
<view class="feature-icon travel">
<uni-icons type="map" size="24" color="#007aff"></uni-icons>
</view>
<text class="feature-text">找搭子</text>
</view>
<view class="feature-item" @click="navigateTo('/pages/animal/list')">
<view class="feature-icon animal">
<uni-icons type="heart" size="24" color="#ff2d55"></uni-icons>
</view>
<text class="feature-text">认领动物</text>
</view>
<view class="feature-item" @click="navigateTo('/pages/flower/order')">
<view class="feature-icon flower">
<uni-icons type="flower" size="24" color="#ff9500"></uni-icons>
</view>
<text class="feature-text">送花服务</text>
</view>
<view class="feature-item" @click="navigateTo('/pages/promotion/invite')">
<view class="feature-icon promotion">
<uni-icons type="gift" size="24" color="#34c759"></uni-icons>
</view>
<text class="feature-text">推广奖励</text>
</view>
</view>
<!-- 公告栏 -->
<view class="notice-bar">
<uni-icons type="sound" size="16" color="#ff9500"></uni-icons>
<swiper class="notice-swiper" vertical autoplay circular :interval="3000">
<swiper-item v-for="(notice, index) in notices" :key="index">
<text class="notice-text">{{notice}}</text>
</swiper-item>
</swiper>
</view>
<!-- 推荐旅行计划 -->
<view class="section">
<view class="section-header">
<text class="section-title">推荐旅行计划</text>
<text class="section-more" @click="navigateTo('/pages/travel/list')">更多</text>
</view>
<scroll-view class="plan-list" scroll-x="true" show-scrollbar="false">
<view class="plan-card" v-for="(plan, index) in travelPlans" :key="index" @click="navigateTo(`/pages/travel/detail?id=${plan.id}`)">
<image :src="plan.coverImage" mode="aspectFill" class="plan-image" />
<view class="plan-info">
<text class="plan-destination">{{ plan.destination }}</text>
<text class="plan-date">{{ plan.startDate }} - {{ plan.endDate }}</text>
<view class="plan-meta">
<text class="plan-budget">¥{{ plan.budget }}</text>
<text class="plan-members">{{ plan.currentMembers }}/{{ plan.maxMembers }}人</text>
</view>
</view>
</view>
</scroll-view>
</view>
<!-- 热门动物 -->
<view class="section">
<view class="section-header">
<text class="section-title">热门动物</text>
<text class="section-more" @click="navigateTo('/pages/animal/list')">更多</text>
</view>
<view class="animal-grid">
<view class="animal-card" v-for="(animal, index) in animals" :key="index" @click="navigateTo(`/pages/animal/detail?id=${animal.id}`)">
<image :src="animal.image" mode="aspectFill" class="animal-image" />
<view class="animal-tag" v-if="animal.isHot">热门</view>
<view class="animal-info">
<text class="animal-name">{{ animal.name }}</text>
<text class="animal-species">{{ animal.species }}</text>
<text class="animal-price">¥{{ animal.price }}</text>
</view>
</view>
</view>
</view>
<!-- 送花服务 -->
<view class="section">
<view class="section-header">
<text class="section-title">精选花束</text>
<text class="section-more" @click="navigateTo('/pages/flower/list')">更多</text>
</view>
<scroll-view class="flower-list" scroll-x="true" show-scrollbar="false">
<view class="flower-card" v-for="(flower, index) in flowers" :key="index" @click="navigateTo(`/pages/flower/detail?id=${flower.id}`)">
<image :src="flower.image" mode="aspectFill" class="flower-image" />
<view class="flower-info">
<text class="flower-name">{{ flower.name }}</text>
<text class="flower-desc">{{ flower.description }}</text>
<text class="flower-price">¥{{ flower.price }}</text>
</view>
</view>
</scroll-view>
</view>
<!-- 底部导航栏 -->
<view class="tab-bar">
<view class="tab-item active">
<uni-icons type="home" size="24" color="#007aff"></uni-icons>
<text class="tab-text">首页</text>
</view>
<view class="tab-item" @click="navigateTo('/pages/discover/index')">
<uni-icons type="compass" size="24" color="#999"></uni-icons>
<text class="tab-text">发现</text>
</view>
<view class="tab-item" @click="navigateTo('/pages/message/index')">
<uni-icons type="chat" size="24" color="#999"></uni-icons>
<text class="tab-text">消息</text>
<view class="badge" v-if="unreadCount > 0">{{unreadCount > 99 ? '99+' : unreadCount}}</view>
</view>
<view class="tab-item" @click="navigateTo('/pages/user/center')">
<uni-icons type="person" size="24" color="#999"></uni-icons>
<text class="tab-text">我的</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
banners: [
{ image: '/static/banners/banner1.jpg', link: '/pages/travel/list' },
{ image: '/static/banners/banner2.jpg', link: '/pages/animal/list' },
{ image: '/static/banners/banner3.jpg', link: '/pages/flower/list' }
],
notices: [
'欢迎来到结伴客，找到志同道合的旅伴！',
'新用户注册即送50积分，可兑换精美礼品',
'推荐好友加入，双方各得30积分奖励'
],
travelPlans: [
{
id: 1,
destination: '西藏拉萨',
startDate: '10月1日',
endDate: '10月7日',
budget: 5000,
currentMembers: 3,
maxMembers: 6,
coverImage: '/static/travel/tibet.jpg'
},
{
id: 2,
destination: '云南大理',
startDate: '10月5日',
endDate: '10月12日',
budget: 3500,
currentMembers: 2,
maxMembers: 4,
coverImage: '/static/travel/yunnan.jpg'
},
{
id: 3,
destination: '新疆喀什',
startDate: '10月10日',
endDate: '10月20日',
budget: 6000,
currentMembers: 4,
maxMembers: 8,
coverImage: '/static/travel/xinjiang.jpg'
},
{
id: 4,
destination: '青海湖',
startDate: '10月15日',
endDate: '10月20日',
budget: 4000,
currentMembers: 2,
maxMembers: 5,
coverImage: '/static/travel/qinghai.jpg'
}
],
animals: [
{
id: 1,
name: '小羊驼',
species: '羊驼',
price: 1000,
isHot: true,
image: '/static/animals/alpaca.jpg'
},
{
id: 2,
name: '小绵羊',
species: '绵羊',
price: 800,
isHot: false,
image: '/static/animals/sheep.jpg'
},
{
id: 3,
name: '小花猪',
species: '猪',
price: 600,
isHot: true,
image: '/static/animals/pig.jpg'
},
{
id: 4,
name: '小公鸡',
species: '鸡',
price: 300,
isHot: false,
image: '/static/animals/chicken.jpg'
}
],
flowers: [
{
id: 1,
name: '浪漫玫瑰',
description: '11朵红玫瑰',
price: 199,
image: '/static/flowers/rose.jpg'
},
{
id: 2,
name: '向日葵花束',
description: '9朵向日葵',
price: 179,
image: '/static/flowers/sunflower.jpg'
},
{
id: 3,
name: '百合花束',
description: '7朵白百合',
price: 229,
image: '/static/flowers/lily.jpg'
}
],
unreadCount: 5
}
},
onLoad() {
// 获取系统信息设置状态栏高度
const systemInfo = uni.getSystemInfoSync();
this.statusBarHeight = systemInfo.statusBarHeight;
// 加载数据
this.loadData();
},
methods: {
loadData() {
// 实际开发中，这里应该从API获取数据
console.log('加载首页数据');
},
navigateTo(url) {
uni.navigateTo({
url: url
});
},
navigateToSearch() {
uni.navigateTo({
url: '/pages/search/index'
});
}
}
}
</script>
<style>
/* 移除图标字体相关样式 */
/* 页面样式 */
.container {
min-height: 100vh;
background-color: #f8f9fa;
padding-bottom: 100rpx; /* 为底部导航留出空间 */
}
.status-bar {
height: var(--status-bar-height);
width: 100%;
}
.search-bar {
padding: 20rpx 30rpx;
background-color: #ffffff;
}
.search-input {
display: flex;
align-items: center;
background: #f5f5f5;
border-radius: 50rpx;
padding: 15rpx 30rpx;
}
.search-input .iconfont {
font-size: 32rpx;
color: #999;
margin-right: 10rpx;
}
.search-input input {
flex: 1;
font-size: 28rpx;
}
.placeholder {
color: #999;
}
.banner-swiper {
height: 300rpx;
margin: 0 30rpx 30rpx;
border-radius: 20rpx;
overflow: hidden;
}
.banner-image {
width: 100%;
height: 100%;
}
.feature-grid {
display: flex;
justify-content: space-around;
padding: 20rpx 30rpx 30rpx;
background-color: #ffffff;
margin-bottom: 20rpx;
}
.feature-item {
display: flex;
flex-direction: column;
align-items: center;
}
.feature-icon {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15rpx;
}
.feature-icon .iconfont {
font-size: 50rpx;
}
.feature-icon.travel {
background-color: rgba(0, 122, 255, 0.1);
}
.feature-icon.travel .iconfont {
color: #007aff;
}
.feature-icon.animal {
background-color: rgba(255, 45, 85, 0.1);
}
.feature-icon.animal .iconfont {
color: #ff2d55;
}
.feature-icon.flower {
background-color: rgba(255, 149, 0, 0.1);
}
.feature-icon.flower .iconfont {
color: #ff9500;
}
.feature-icon.promotion {
background-color: rgba(52, 199, 89, 0.1);
}
.feature-icon.promotion .iconfont {
color: #34c759;
}
.feature-text {
font-size: 24rpx;
color: #333;
}
.notice-bar {
display: flex;
align-items: center;
background-color: #fff8e6;
padding: 15rpx 30rpx;
margin: 0 30rpx 20rpx;
border-radius: 10rpx;
}
.notice-bar .iconfont {
font-size: 32rpx;
color: #ff9500;
margin-right: 15rpx;
}
.notice-swiper {
height: 40rpx;
flex: 1;
}
.notice-text {
font-size: 24rpx;
color: #ff9500;
line-height: 40rpx;
}
.section {
margin-bottom: 30rpx;
background-color: #ffffff;
padding: 30rpx 0;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30rpx 20rpx;
}
.section-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
position: relative;
padding-left: 20rpx;
}
.section-title::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8rpx;
height: 30rpx;
background-color: #007aff;
border-radius: 4rpx;
}
.section-more {
font-size: 24rpx;
color: #999;
}
.plan-list {
white-space: nowrap;
padding: 0 30rpx;
}
.plan-card {
display: inline-block;
width: 300rpx;
margin-right: 20rpx;
background: #ffffff;
border-radius: 15rpx;
overflow: hidden;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}
.plan-image {
width: 100%;
height: 180rpx;
}
.plan-info {
padding: 15rpx;
}
.plan-destination {
display: block;
font-size: 28rpx;
font-weight: bold;
color: #333;
margin-bottom: 10rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.plan-date {
display: block;
font-size: 22rpx;
color: #666;
margin-bottom: 10rpx;
}
.plan-meta {
display: flex;
justify-content: space-between;
align-items: center;
}
.plan-budget {
font-size: 26rpx;
color: #ff9500;
font-weight: bold;
}
.plan-members {
font-size: 22rpx;
color: #999;
}
.animal-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20rpx;
padding: 0 30rpx;
}
.animal-card {
background: #ffffff;
border-radius: 15rpx;
overflow: hidden;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
position: relative;
}
.animal-image {
width: 100%;
height: 200rpx;
}
.animal-tag {
position: absolute;
top: 15rpx;
right: 15rpx;
background-color: #ff2d55;
color: #fff;
font-size: 20rpx;
padding: 5rpx 10rpx;
border-radius: 10rpx;
}
.animal-info {
padding: 15rpx;
}
.animal-name {
display: block;
font-size: 28rpx;
font-weight: bold;
color: #333;
margin-bottom: 5rpx;
}
.animal-species {
display: block;
font-size: 22rpx;
color: #999;
margin-bottom: 10rpx;
}
.animal-price {
display: block;
font-size: 26rpx;
color: #ff9500;
font-weight: bold;
}
.flower-list {
white-space: nowrap;
padding: 0 30rpx;
}
.flower-card {
display: inline-block;
width: 240rpx;
margin-right: 20rpx;
background: #ffffff;
border-radius: 15rpx;
overflow: hidden;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}
.flower-image {
width: 100%;
height: 240rpx;
}
.flower-info {
padding: 15rpx;
}
.flower-name {
display: block;
font-size: 26rpx;
font-weight: bold;
color: #333;
margin-bottom: 5rpx;
}
.flower-desc {
display: block;
font-size: 22rpx;
color: #999;
margin-bottom: 10rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.flower-price {
display: block;
font-size: 26rpx;
color: #ff9500;
font-weight: bold;
}
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100rpx;
background-color: #ffffff;
display: flex;
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.tab-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
.tab-item .iconfont {
font-size: 40rpx;
color: #999;
margin-bottom: 5rpx;
}
.tab-item.active .iconfont {
color: #007aff;
}
.tab-text {
font-size: 20rpx;
color: #999;
}
.tab-item.active .tab-text {
color: #007aff;
}
.badge {
position: absolute;
top: 0;
right: 50%;
transform: translateX(10rpx);
background-color: #ff2d55;
color: #fff;
font-size: 20rpx;
min-width: 32rpx;
height: 32rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
padding: 0 6rpx;
}
</style>

167
mini-program/pages/travel/detail.vue Normal file
View File

@@ -0,0 +1,167 @@
<template>
<view class="container">
<!-- 封面图 -->
<image :src="plan.coverImage" mode="widthFix" class="cover-image"></image>
<!-- 计划标题和基本信息 -->
<view class="plan-header">
<text class="title">{{ plan.destination }}</text>
<view class="meta">
<text class="date">{{ plan.startDate }} - {{ plan.endDate }}</text>
<text class="budget">预算: ¥{{ plan.budget }}</text>
</view>
</view>
<!-- 行程详情 -->
<view class="section">
<text class="section-title">行程安排</text>
<view class="schedule" v-for="(day, index) in plan.schedule" :key="index">
<text class="day">第{{ index + 1 }}天</text>
<text class="content">{{ day }}</text>
</view>
</view>
<!-- 同行要求 -->
<view class="section">
<text class="section-title">同行要求</text>
<text class="requirements">{{ plan.requirements }}</text>
</view>
<!-- 操作按钮 -->
<view class="action-bar">
<button class="btn join" @click="handleJoin">加入计划</button>
<button class="btn contact" @click="handleContact">联系发起人</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
plan: {
id: 1,
destination: '西藏',
startDate: '10月1日',
endDate: '10月7日',
budget: 5000,
coverImage: '/static/travel/tibet.jpg',
schedule: [
'拉萨市区游览，参观布达拉宫、大昭寺',
'前往纳木错，欣赏圣湖美景',
'林芝地区游览，参观雅鲁藏布大峡谷',
'返回拉萨，自由活动',
'日喀则地区游览，参观扎什伦布寺',
'珠峰大本营一日游',
'返回拉萨，结束行程'
],
requirements: '1. 年龄18-35岁\n2. 身体健康，能适应高原环境\n3. 有团队精神，乐于分享'
}
}
},
methods: {
handleJoin() {
uni.showToast({
title: '已申请加入',
icon: 'success'
})
},
handleContact() {
uni.makePhoneCall({
phoneNumber: '13800138000'
})
}
}
}
</script>
<style scoped>
.container {
padding-bottom: 100rpx;
}
.cover-image {
width: 100%;
}
.plan-header {
padding: 30rpx;
}
.title {
font-size: 36rpx;
font-weight: bold;
color: #333;
}
.meta {
display: flex;
justify-content: space-between;
margin-top: 20rpx;
color: #666;
font-size: 28rpx;
}
.section {
padding: 30rpx;
border-top: 1rpx solid #eee;
}
.section-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
margin-bottom: 20rpx;
}
.schedule {
margin-bottom: 30rpx;
}
.day {
font-size: 28rpx;
color: #007aff;
margin-bottom: 10rpx;
}
.content {
font-size: 28rpx;
color: #666;
line-height: 1.6;
}
.requirements {
font-size: 28rpx;
color: #666;
white-space: pre-line;
line-height: 1.6;
}
.action-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
padding: 20rpx;
background: #fff;
box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
}
.btn {
flex: 1;
margin: 0 10rpx;
font-size: 28rpx;
}
.join {
background-color: #007aff;
color: #fff;
}
.contact {
background-color: #fff;
color: #007aff;
border: 1rpx solid #007aff;
}
</style>

160
mini-program/pages/user/center.vue Normal file
View File

@@ -0,0 +1,160 @@
<template>
<view class="container">
<!-- 用户信息 -->
<view class="user-header">
<image :src="user.avatar" class="avatar"></image>
<view class="user-info">
<text class="username">{{ user.nickname }}</text>
<text class="member-level">{{ user.memberLevel }}</text>
</view>
</view>
<!-- 订单状态 -->
<view class="order-status">
<view
class="status-item"
v-for="item in orderStatus"
:key="item.type"
@click="navigateToOrder(item.type)"
>
<text class="count">{{ item.count }}</text>
<text class="text">{{ item.text }}</text>
</view>
</view>
<!-- 功能列表 -->
<view class="function-list">
<view
class="function-item"
v-for="item in functions"
:key="item.text"
@click="navigateTo(item.url)"
>
<uni-icons :type="item.icon" size="20" color="#666"></uni-icons>
<text class="text">{{ item.text }}</text>
<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
user: {
avatar: '/static/user/avatar.jpg',
nickname: '旅行爱好者',
memberLevel: '黄金会员'
},
orderStatus: [
{ type: 'all', text: '全部订单', count: 5 },
{ type: 'unpaid', text: '待付款', count: 1 },
{ type: 'undelivered', text: '待发货', count: 1 },
{ type: 'delivered', text: '待收货', count: 2 },
{ type: 'completed', text: '已完成', count: 1 }
],
functions: [
{ icon: 'heart', text: '我的认养', url: '/pages/user/adoptions' },
{ icon: 'map', text: '我的旅行计划', url: '/pages/user/travels' },
{ icon: 'gift', text: '我的送花订单', url: '/pages/user/flowers' },
{ icon: 'star', text: '我的收藏', url: '/pages/user/favorites' },
{ icon: 'settings', text: '账户设置', url: '/pages/user/settings' }
]
}
},
methods: {
navigateTo(url) {
uni.navigateTo({ url })
},
navigateToOrder(type) {
uni.navigateTo({ url: `/pages/user/orders?type=${type}` })
}
}
}
</script>
<style scoped>
.container {
background-color: #f8f9fa;
min-height: 100vh;
}
.user-header {
display: flex;
align-items: center;
padding: 40rpx 30rpx;
background-color: #fff;
margin-bottom: 20rpx;
}
.avatar {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
margin-right: 30rpx;
}
.user-info {
display: flex;
flex-direction: column;
}
.username {
font-size: 36rpx;
font-weight: bold;
margin-bottom: 10rpx;
}
.member-level {
font-size: 24rpx;
color: #ff9500;
background-color: #fff8e6;
padding: 4rpx 16rpx;
border-radius: 20rpx;
align-self: flex-start;
}
.order-status {
display: flex;
background-color: #fff;
padding: 30rpx 0;
margin-bottom: 20rpx;
}
.status-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.count {
font-size: 32rpx;
color: #333;
margin-bottom: 10rpx;
}
.text {
font-size: 24rpx;
color: #666;
}
.function-list {
background-color: #fff;
}
.function-item {
display: flex;
align-items: center;
padding: 30rpx;
border-bottom: 1rpx solid #f5f5f5;
}
.function-item .text {
flex: 1;
margin-left: 20rpx;
font-size: 28rpx;
color: #333;
}
</style>

480
mini-program/pages/user/orders.vue Normal file
View File

@@ -0,0 +1,480 @@
<template>
<view class="container">
<!-- 订单类型选项卡 -->
<view class="tab-bar">
<view
v-for="(tab, index) in tabs"
:key="index"
class="tab-item"
:class="{ active: currentTab === index }"
@click="switchTab(index)"
>
<text>{{ tab.text }}</text>
</view>
</view>
<!-- 订单列表 -->
<scroll-view
class="order-list"
scroll-y="true"
@scrolltolower="loadMore"
>
<view v-if="orders.length === 0" class="empty-tip">
<image src="/static/user/empty-order.png" class="empty-image"></image>
<text>暂无相关订单</text>
</view>
<view
v-for="(order, index) in orders"
:key="index"
class="order-item"
@click="navigateToDetail(order.id)"
>
<!-- 订单头部 -->
<view class="order-header">
<text class="order-type">{{ getOrderTypeName(order.type) }}</text>
<text class="order-status">{{ getStatusText(order.status) }}</text>
</view>
<!-- 订单内容 -->
<view class="order-content">
<image :src="order.image" class="order-image"></image>
<view class="order-info">
<text class="order-title">{{ order.title }}</text>
<text class="order-desc">{{ order.description }}</text>
<view class="order-price-box">
<text class="order-price">¥{{ order.price }}</text>
<text class="order-count">x{{ order.count }}</text>
</view>
</view>
</view>
<!-- 订单底部 -->
<view class="order-footer">
<text class="order-total">共{{ order.count }}件商品 合计：¥{{ order.price * order.count }}</text>
<view class="order-actions">
<button
v-if="order.status === 'unpaid'"
class="action-btn primary"
@click.stop="payOrder(order.id)"
>立即付款</button>
<button
v-if="order.status === 'delivered'"
class="action-btn primary"
@click.stop="confirmReceive(order.id)"
>确认收货</button>
<button
v-if="order.status === 'completed'"
class="action-btn"
@click.stop="reviewOrder(order.id)"
>评价</button>
<button
class="action-btn"
@click.stop="deleteOrder(order.id)"
>删除订单</button>
</view>
</view>
</view>
<!-- 加载更多 -->
<view v-if="loading" class="loading">
<text>加载中...</text>
</view>
<view v-if="noMore && orders.length > 0" class="no-more">
<text>没有更多订单了</text>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
tabs: [
{ text: '全部', type: 'all' },
{ text: '待付款', type: 'unpaid' },
{ text: '待发货', type: 'undelivered' },
{ text: '待收货', type: 'delivered' },
{ text: '已完成', type: 'completed' }
],
currentTab: 0,
orders: [],
page: 1,
loading: false,
noMore: false
}
},
onLoad(options) {
// 如果有传入类型参数，切换到对应选项卡
if (options.type) {
const index = this.tabs.findIndex(tab => tab.type === options.type)
if (index !== -1) {
this.currentTab = index
}
}
this.loadOrders()
},
methods: {
switchTab(index) {
if (this.currentTab === index) return
this.currentTab = index
this.page = 1
this.orders = []
this.noMore = false
this.loadOrders()
},
loadOrders() {
if (this.loading || this.noMore) return
this.loading = true
// 模拟API请求
setTimeout(() => {
const type = this.tabs[this.currentTab].type
const newOrders = this.getMockOrders(type, this.page)
if (newOrders.length === 0) {
this.noMore = true
} else {
this.orders = [...this.orders, ...newOrders]
this.page++
}
this.loading = false
}, 1000)
},
loadMore() {
this.loadOrders()
},
getMockOrders(type, page) {
// 模拟数据，实际应从API获取
const allOrders = [
{
id: '1001',
type: 'travel',
status: 'unpaid',
title: '西藏旅行计划',
description: '10月1日-10月7日',
price: 5000,
count: 1,
image: '/static/travel/tibet.jpg'
},
{
id: '1002',
type: 'animal',
status: 'undelivered',
title: '小羊驼认养',
description: '认养期限：1年',
price: 1000,
count: 1,
image: '/static/animals/alpaca.jpg'
},
{
id: '1003',
type: 'flower',
status: 'delivered',
title: '浪漫玫瑰花束',
description: '11朵红玫瑰',
price: 199,
count: 1,
image: '/static/flowers/rose.jpg'
},
{
id: '1004',
type: 'flower',
status: 'completed',
title: '向日葵花束',
description: '9朵向日葵',
price: 179,
count: 1,
image: '/static/flowers/sunflower.jpg'
}
]
// 根据类型筛选
let filteredOrders = allOrders
if (type !== 'all') {
filteredOrders = allOrders.filter(order => order.status === type)
}
// 分页
const pageSize = 5
const start = (page - 1) * pageSize
const end = page * pageSize
return filteredOrders.slice(start, end)
},
getOrderTypeName(type) {
const typeMap = {
travel: '旅行计划',
animal: '动物认养',
flower: '送花服务'
}
return typeMap[type] || '订单'
},
getStatusText(status) {
const statusMap = {
unpaid: '待付款',
undelivered: '待发货',
delivered: '待收货',
completed: '已完成'
}
return statusMap[status] || '未知状态'
},
navigateToDetail(id) {
uni.navigateTo({
url: `/pages/user/order-detail?id=${id}`
})
},
payOrder(id) {
uni.showModal({
title: '支付提示',
content: '确定要支付此订单吗？',
success: (res) => {
if (res.confirm) {
// 模拟支付流程
uni.showLoading({
title: '支付中...'
})
setTimeout(() => {
uni.hideLoading()
uni.showToast({
title: '支付成功',
icon: 'success'
})
// 更新订单状态
this.updateOrderStatus(id, 'undelivered')
}, 1500)
}
}
})
},
confirmReceive(id) {
uni.showModal({
title: '确认收货',
content: '确认已收到商品吗？',
success: (res) => {
if (res.confirm) {
uni.showToast({
title: '确认成功',
icon: 'success'
})
// 更新订单状态
this.updateOrderStatus(id, 'completed')
}
}
})
},
reviewOrder(id) {
uni.navigateTo({
url: `/pages/user/review?id=${id}`
})
},
deleteOrder(id) {
uni.showModal({
title: '删除订单',
content: '确定要删除此订单吗？',
success: (res) => {
if (res.confirm) {
// 从列表中移除
const index = this.orders.findIndex(order => order.id === id)
if (index !== -1) {
this.orders.splice(index, 1)
uni.showToast({
title: '删除成功',
icon: 'success'
})
}
}
}
})
},
updateOrderStatus(id, newStatus) {
const order = this.orders.find(order => order.id === id)
if (order) {
order.status = newStatus
}
}
}
}
</script>
<style scoped>
.container {
display: flex;
flex-direction: column;
height: 100vh;
background-color: #f8f9fa;
}
.tab-bar {
display: flex;
background-color: #fff;
border-bottom: 1rpx solid #eee;
position: sticky;
top: 0;
z-index: 10;
}
.tab-item {
flex: 1;
height: 80rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
color: #666;
position: relative;
}
.tab-item.active {
color: #007aff;
}
.tab-item.active::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 40rpx;
height: 4rpx;
background-color: #007aff;
}
.order-list {
flex: 1;
padding: 20rpx;
}
.empty-tip {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 100rpx 0;
}
.empty-image {
width: 200rpx;
height: 200rpx;
margin-bottom: 20rpx;
}
.order-item {
background-color: #fff;
border-radius: 10rpx;
margin-bottom: 20rpx;
overflow: hidden;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.order-header {
display: flex;
justify-content: space-between;
padding: 20rpx;
border-bottom: 1rpx solid #f5f5f5;
}
.order-type {
font-size: 28rpx;
color: #333;
}
.order-status {
font-size: 28rpx;
color: #ff9500;
}
.order-content {
display: flex;
padding: 20rpx;
border-bottom: 1rpx solid #f5f5f5;
}
.order-image {
width: 160rpx;
height: 160rpx;
border-radius: 8rpx;
margin-right: 20rpx;
}
.order-info {
flex: 1;
display: flex;
flex-direction: column;
}
.order-title {
font-size: 28rpx;
color: #333;
margin-bottom: 10rpx;
}
.order-desc {
font-size: 24rpx;
color: #999;
margin-bottom: 10rpx;
}
.order-price-box {
display: flex;
justify-content: space-between;
margin-top: auto;
}
.order-price {
font-size: 28rpx;
color: #ff2d55;
}
.order-count {
font-size: 24rpx;
color: #999;
}
.order-footer {
padding: 20rpx;
}
.order-total {
font-size: 24rpx;
color: #666;
text-align: right;
margin-bottom: 20rpx;
}
.order-actions {
display: flex;
justify-content: flex-end;
}
.action-btn {
margin-left: 20rpx;
font-size: 24rpx;
padding: 0 30rpx;
height: 60rpx;
line-height: 60rpx;
border: 1rpx solid #ddd;
background-color: #fff;
color: #666;
}
.action-btn.primary {
background-color: #007aff;
color: #fff;
border: none;
}
.loading, .no-more {
text-align: center;
padding: 20rpx 0;
font-size: 24rpx;
color: #999;
}
</style>

25
mini-program/project.config.json Normal file
View File

@@ -0,0 +1,25 @@
{
"setting": {
"es6": true,
"postcss": true,
"minified": true,
"uglifyFileName": false,
"enhance": true,
"packNpmRelationList": [],
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
},
"useCompilerPlugins": false,
"minifyWXML": true
},
"compileType": "miniprogram",
"simulatorPluginLibVersion": {},
"packOptions": {
"ignore": [],
"include": []
},
"appid": "wx0f61cff5f12e13fc",
"editorSetting": {}
}

14
mini-program/project.private.config.json Normal file
View File

@@ -0,0 +1,14 @@
{
"libVersion": "3.9.2",
"projectname": "mini-program",
"setting": {
"urlCheck": true,
"coverView": true,
"lazyloadPlaceholderEnable": false,
"skylineRenderEnable": false,
"preloadBackgroundData": false,
"autoAudits": false,
"showShadowRootInWxmlPanel": true,
"compileHotReLoad": true
}
}

BIN
mini-program/static/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

13
mini-program/uni.promisify.adaptor.js Normal file
View File

@@ -0,0 +1,13 @@
uni.addInterceptor({
returnValue (res) {
if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) {
return res;
}
return new Promise((resolve, reject) => {
res.then((res) => {
if (!res) return resolve(res)
return res[0] ? reject(res[0]) : resolve(res[1])
});
});
},
});

76
mini-program/uni.scss Normal file
View File

@@ -0,0 +1,76 @@
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
*/
/* 颜色变量 */
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;
/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
/* 边框颜色 */
$uni-border-color:#c8c7cc;
/* 尺寸变量 */
/* 文字尺寸 */
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16px;
/* 图片尺寸 */
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;
/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;
/* 水平间距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;
/* 垂直间距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;
/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:20px;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;