一个前端基于vue，后端使用api工厂供的免费接口和云后台实现的移动端商城
-
项目地址
http://wx.shuzp.top -
项目二维码(手机扫码)
npm install
npm run serve
npm run build
- 订单管理
- 创建订单
- 订单列表
- 订单详情(取消订单,付款,确认收货,评价,退换货)
- 系统钱包支付订单
- 用户管理
- 用户注册/登录(手机号-手机接收验证码注册)
- 用户资产
- 用户信息(详情,修改)
- 收货地址(详情,修改,添加,删除)
- 我的收藏
- 资金明细(加入充值/提现)
- 优惠券
- 购物车
- 商城模块
- 商品列表
- 商品详情
- 商品规格(支持无规格，最多支持3种规格)
- 商品收藏
- 商品评价
- 商品分享海报(普通商品,砍价,拼团商品等海报)
- 积分模块
- 拼团/砍价
- 微信开发(公众号)
- 微信支付
- 用户注册/登录(微信公众号-快速注册/登录)
- 绑定手机号
- 微信分享给朋友
- 微信支付
- 定制主题
- 页面路由缓存栈
上传图片会被截掉,换成点链接查看
src -- 源码目录
├── assets -- 静态图片资源文件
├── commmon -- 公用js
├── area.js -- 全国城市区数据JSON
├── flexible.js -- 可伸缩布局方案
├── request.js -- axios网络请求封装
├── util.js -- 工具类
├── validate.js -- 正则效验函数
├── validator.js -- 表单验证集合
├── components -- 通用组件封装
├── router.js -- vue-router路由配置
├── store.js -- vuex的状态管理
├── styles -- 全局css样式
└── pages -- 前端页面
├── login -- 登录页
├── home -- 首页
├── user -- 用户中心
├── cart -- 购物车
└── ... -- 其他页面
https://m.mi.com/
项目编写过程中样式直接使用 px作为单位 ，然后再用工具转化
- 引入
flexible用于设置 rem 基准值
// main.js
import './common/flexible'
- 安装
postcss-pxtorem用于将单位转化为 rem
$ npm install postcss-pxtorem --save-dev
// vue.config.js
const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')
css: {
loaderOptions: {
postcss: {
plugins: [
autoprefixer({
browsers: ['Android >= 4.0', 'iOS >= 7']
}),
pxtorem({
rootValue: 50,
unitPrecision: 3,
propList: ['*', '!font*'],
selectorBlackList: ['.ignore ', '.hairlines', 'van-circle__layer', '.van-hairline'],
minPixelValue: 2,
})
]
}
}
}
舒志平
联系方式：[email protected]
微信：f144270
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
