适老版线上超市，针对老年人的小程序，图片大，字大，主打日常用品+送货上门，还能电话下单，解决老年人不会用普通电商的问题。

长安牧笛2025-12-14 19:27

适老版线上超市小程序设计方案

我将设计一个适合老年人使用的线上超市小程序，重点解决老年人使用普通电商的困难，提供大字体、大图片、电话下单等功能。

设计思路

  1. 大字体大图片：所有界面元素都使用大尺寸设计

  2. 简化操作流程：减少点击次数，清晰导航

  3. 电话下单功能：一键拨号功能

  4. 常用商品优先：突出显示日常必需品

  5. 送货上门服务：明确配送信息

下面是完整的Python实现代码，使用Flask框架构建Web应用：

from flask import Flask, render_template, request, redirect, url_for, session

import os

app = Flask(name)

app.secret_key = 'elderly_supermarket_secret_key'

模拟商品数据库

products = [

{"id": 1, "name": "优质大米", "price": 38.5, "category": "粮油", "image": "rice.jpg", "description": "东北五常大米，10斤装"},

{"id": 2, "name": "压榨花生油", "price": 89.9, "category": "粮油", "image": "oil.jpg", "description": "纯正花生油，5L装"},

{"id": 3, "name": "新鲜鸡蛋", "price": 15.8, "category": "生鲜", "image": "eggs.jpg", "description": "农家散养土鸡蛋，30枚"},

{"id": 4, "name": "纯牛奶", "price": 42.0, "category": "乳制品", "image": "milk.jpg", "description": "蒙牛纯牛奶，一箱24盒"},

{"id": 5, "name": "卫生纸", "price": 25.9, "category": "日用品", "image": "toilet_paper.jpg", "description": "维达卷纸，一提12卷"},

{"id": 6, "name": "生抽酱油", "price": 12.5, "category": "调味品", "image": "soy_sauce.jpg", "description": "海天金标生抽，1.9L"},

{"id": 7, "name": "食用盐", "price": 3.5, "category": "调味品", "image": "salt.jpg", "description": "中盐精制食盐，400g"},

{"id": 8, "name": "速冻水饺", "price": 28.0, "category": "冷冻食品", "image": "dumplings.jpg", "description": "三全猪肉白菜水饺，1kg"}

]

客服电话

CUSTOMER_SERVICE_PHONE = "138-0013-8000"

@app.route('/')

def home():

获取热门商品（前4个）

featured_products = products[:4]

return render_template('home.html',

products=featured_products,

phone=CUSTOMER_SERVICE_PHONE,

font_size='large',

image_size='large')

@app.route('/products')

def all_products():

categories = list(set(p["category"] for p in products))

return render_template('products.html',

products=products,

categories=categories,

phone=CUSTOMER_SERVICE_PHONE,

font_size='large',

image_size='large')

@app.route('/product/<int:product_id>')

def product_detail(product_id):

product = next((p for p in products if p["id"] == product_id), None)

if not product:

return redirect(url_for('all_products'))

return render_template('product_detail.html',

product=product,

phone=CUSTOMER_SERVICE_PHONE,

font_size='large',

image_size='large')

@app.route('/cart')

def shopping_cart():

cart = session.get('cart', [])

cart_items = []

total = 0.0

for item in cart:

product = next((p for p in products if p["id"] == item["id"]), None)

if product:

item_total = product["price"] * item["quantity"]

cart_items.append({

"product": product,

"quantity": item["quantity"],

"item_total": item_total

})

total += item_total

return render_template('cart.html',

cart_items=cart_items,

total=total,

phone=CUSTOMER_SERVICE_PHONE,

font_size='large',

image_size='large')

@app.route('/add_to_cart/<int:product_id>', methods=['POST'])

def add_to_cart(product_id):

quantity = int(request.form.get('quantity', 1))

if 'cart' not in session:

session['cart'] = []

检查是否已在购物车中

found = False

for item in session['cart']:

if item['id'] == product_id:

item['quantity'] += quantity

found = True

break

if not found:

session['cart'].append({'id': product_id, 'quantity': quantity})

session.modified = True

return redirect(url_for('shopping_cart'))

@app.route('/remove_from_cart/<int:product_id>')

def remove_from_cart(product_id):

if 'cart' in session:

session['cart'] = [item for item in session['cart'] if item['id'] != product_id]

session.modified = True

return redirect(url_for('shopping_cart'))

@app.route('/checkout')

def checkout():

cart = session.get('cart', [])

if not cart:

return redirect(url_for('shopping_cart'))

return render_template('checkout.html',

phone=CUSTOMER_SERVICE_PHONE,

font_size='large',

image_size='large')

@app.route('/order_complete', methods=['POST'])

def order_complete():

在实际应用中，这里会处理订单

session.pop('cart', None) # 清空购物车

return render_template('order_complete.html',

phone=CUSTOMER_SERVICE_PHONE,

font_size='large',

image_size='large')

@app.route('/call_service')

def call_service():

在实际应用中，这里会调用电话功能

return f"正在呼叫客服中心：{CUSTOMER_SERVICE_PHONE}"

if name == 'main':

app.run(debug=True)

HTML模板设计

以下是关键页面的HTML模板设计（使用Jinja2语法）：

首页模板 (templates/home.html)

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>适老超市 - 专为长者设计的线上超市</title>

<style>

body {

font-family: "Microsoft YaHei", sans-serif;

background-color: #f0f8ff;

margin: 0;

padding: 20px;

font-size: 24px; /* 大字体 */

}

.header {

background-color: #4CAF50;

color: white;

padding: 20px;

text-align: center;

border-radius: 10px;

margin-bottom: 20px;

}

.phone-button {

display: block;

background-color: #FF9800;

color: white;

text-align: center;

padding: 25px;

font-size: 32px; /* 超大字体 */

text-decoration: none;

border-radius: 10px;

margin: 20px 0;

font-weight: bold;

}

.section-title {

font-size: 32px;

color: #333;

margin: 30px 0 15px;

border-left: 8px solid #4CAF50;

padding-left: 15px;

}

.products {

display: flex;

flex-wrap: wrap;

justify-content: space-around;

gap: 20px;

}

.product-card {

background: white;

border-radius: 10px;

box-shadow: 0 4px 8px rgba(0,0,0,0.1);

width: 300px;

padding: 20px;

text-align: center;

}

.product-image {

width: 250px; /* 大图片 */

height: 250px;

object-fit: contain;

margin-bottom: 15px;

}

.product-name {

font-size: 28px;

font-weight: bold;

margin: 10px 0;

}

.product-price {

font-size: 26px;

color: #E91E63;

margin: 10px 0;

}

.btn {

display: inline-block;

background-color: #2196F3;

color: white;

padding: 15px 25px;

font-size: 24px;

text-decoration: none;

border-radius: 8px;

margin-top: 10px;

}

.footer {

text-align: center;

margin-top: 40px;

padding: 20px;

font-size: 22px;

color: #666;

}

</style>

</head>

<body>

<div class="header">

<h1 style="font-size: 42px;">适老超市</h1>

<p>大字体 · 大图片 · 送货上门 · 电话下单</p>

</div>

<a href="/call_service" class="phone-button">

一键电话下单<br>

<span style="font-size: 36px;">{{ phone }}</span>

</a>

<h2 class="section-title">今日推荐</h2>

<div class="products">

{% for product in products %}

<div class="product-card">

<img src="{{ url_for('static', filename='images/' + product.image) }}" alt="{{ product.name }}" class="product-image">

<div class="product-name">{{ product.name }}</div>

<div class="product-price">¥{{ product.price }}</div>

<p>{{ product.description }}</p>

<a href="/product/{{ product.id }}" class="btn">查看详情</a>

</div>

{% endfor %}

</div>

<div style="text-align: center; margin: 40px 0;">

<a href="/products" class="btn">浏览全部商品</a>

<a href="/cart" class="btn" style="background-color: #4CAF50; margin-left: 20px;">查看购物车</a>

</div>

<div class="footer">

<p>营业时间: 早8点 - 晚8点 | 配送范围: 全市区 | 满58元免费配送</p>

<p>客服电话: {{ phone }}</p>

</div>

</body>

</html>

商品列表页模板 (templates/products.html)

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<!-- 样式与首页类似 -->

</head>

<body>

<div class="header">

<h1 style="font-size: 42px;">适老超市 - 全部商品</h1>

<a href="/" class="btn" style="position: absolute; left: 20px; top: 20px;">返回首页</a>

</div>

<a href="/call_service" class="phone-button">

一键电话下单<br>

<span style="font-size: 36px;">{{ phone }}</span>

</a>

<h2 class="section-title">商品分类</h2>

<div style="margin-bottom: 30px;">

{% for category in categories %}

<a href="#" class="btn" style="margin-right: 10px; background-color: #9C27B0;">{{ category }}</a>

{% endfor %}

</div>

<h2 class="section-title">所有商品</h2>

<div class="products">

{% for product in products %}

<div class="product-card">

<img src="{{ url_for('static', filename='images/' + product.image) }}" alt="{{ product.name }}" class="product-image">

<div class="product-name">{{ product.name }}</div>

<div class="product-price">¥{{ product.price }}</div>

<p>{{ product.description }}</p>

<a href="/product/{{ product.id }}" class="btn">查看详情</a>

</div>

{% endfor %}

</div>

<div class="footer">

<p>营业时间: 早8点 - 晚8点 | 配送范围: 全市区 | 满58元免费配送</p>

<p>客服电话: {{ phone }}</p>

</div>

</body>

</html>

购物车模板 (templates/cart.html)

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<!-- 样式与首页类似 -->

</head>

<body>

<div class="header">

<h1 style="font-size: 42px;">适老超市 - 购物车</h1>

<a href="/" class="btn" style="position: absolute; left: 20px; top: 20px;">返回首页</a>

</div>

<a href="/call_service" class="phone-button">

一键电话下单<br>

<span style="font-size: 36px;">{{ phone }}</span>

</a>

{% if cart_items %}

<h2 class="section-title">您的购物车</h2>

<div class="products">

{% for item in cart_items %}

<div class="product-card">

<img src="{{ url_for('static', filename='images/' + item.product.image) }}" alt="{{ item.product.name }}" class="product-image">

<div class="product-name">{{ item.product.name }}</div>

<div class="product-price">单价: ¥{{ item.product.price }}</div>

<p>数量: {{ item.quantity }}</p>

<p>小计: ¥{{ "%.2f"|format(item.item_total) }}</p>

<a href="/remove_from_cart/{{ item.product.id }}" class="btn" style="background-color: #F44336;">移除</a>

</div>

{% endfor %}

</div>

<div style="text-align: center; margin: 30px 0; font-size: 32px;">

总计: <span style="color: #E91E63; font-weight: bold;">¥{{ "%.2f"|format(total) }}</span>

</div>

<div style="text-align: center;">

<a href="/checkout" class="btn">结算下单</a>

<a href="/" class="btn" style="background-color: #9C27B0; margin-left: 20px;">继续购物</a>

</div>

{% else %}

<div style="text-align: center; padding: 50px;">

<h2 style="font-size: 36px;">您的购物车是空的</h2>

<p style="font-size: 28px;">快去挑选您需要的商品吧！</p>

<a href="/" class="btn" style="margin-top: 30px;">浏览商品</a>

</div>

{% endif %}

<div class="footer">

<p>营业时间: 早8点 - 晚8点 | 配送范围: 全市区 | 满58元免费配送</p>

<p>客服电话: {{ phone }}</p>

</div>

</body>

</html>

适老化设计特点

  1. 大字体设计：

  • 基础字体大小设置为24px

  • 标题使用32px-42px的大字体

  • 重要信息（如价格）使用红色突出显示

  1. 大图片展示：

  • 商品图片统一为250x250像素

  • 高对比度设计确保清晰可见

  1. 简化操作流程：

  • 主要功能一键直达（电话下单、查看购物车）

  • 清晰的导航结构

  • 避免复杂交互

  1. 电话下单功能：

  • 首页显著位置设置大尺寸电话按钮

  • 所有页面都显示客服电话

  • 专门的电话下单页面

  1. 送货上门服务：

  • 明确标注配送范围和起送金额

  • 显示营业时间

  1. 色彩对比度高：

  • 使用高对比度配色方案

  • 重要按钮使用醒目颜色

使用说明

  1. 创建项目目录结构：

/project-root

├── app.py

├── /templates

│ ├── home.html

│ ├── products.html

│ ├── product_detail.html

│ ├── cart.html

│ ├── checkout.html

│ └── order_complete.html

└── /static

└── /images

├── rice.jpg

├── oil.jpg

├── eggs.jpg

└── ...其他商品图片

  1. 安装依赖：

pip install flask

  1. 运行应用：

python app.py

  1. 访问应用：打开浏览器访问 "http://localhost:5000" (http://localhost:5000)

这个适老版线上超市小程序通过大字体、大图片、简化操作和电话下单功能，解决了老年人使用普通电商的困难，提供了便捷的购物体验。

我是编程小白，请大家多多指教，谢谢！

相关推荐
@#---8 小时前
如何准确判断json文件并且拿到我想要的信息
android·python·json
光羽隹衡8 小时前
Python中的网络爬虫
开发语言·爬虫·python
Vantastic9998 小时前
基于Qwen Agent的多智能体协作系统：实现AI团队协同工作流
人工智能·python
zhongtianhulian8 小时前
陶瓷行业导航网站：景德镇信息大全 — 采购指南与政策解读
人工智能·python
电子_咸鱼8 小时前
常见面试题——滑动窗口算法
c++·后端·python·算法·leetcode·哈希算法·推荐算法
深圳佛手8 小时前
jupyter notebook如何使用虚拟环境?
人工智能·python
Mqh1807628 小时前
day38 gpu训练和call方法
python
ada7_9 小时前
LeetCode(python)230.二叉搜索树中第k小的元素
python·算法·leetcode·链表
江上鹤.1489 小时前
Day36官方文档的阅读
python
热门推荐
01GitHub 镜像站点02【AutoGLM部署】本地私有化部署AI手机Agent03UV安装并设置国内源04【超详细教程】手把手教你从微软官网免费下载Windows 10官方原版ISO镜像（2025最新版）05Open-AutoGLM Windows 安装部署教程06Linux下V2Ray安装配置指南07BongoCat - 跨平台键盘猫动画工具08安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）09Windows 11 官方系统安装与重装完整教程（2025年最新版）10Cursor 又偷偷更新，这个功能太实用：Visual Editor for Cursor Browser