Awesome

v-shop 商城(H5端)

一个前端基于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/

Rem 适配

项目编写过程中样式直接使用 px作为单位 ，然后再用工具转化

1. 引入flexible 用于设置 rem 基准值

// main.js
import './common/flexible'

2. 安装 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,
        })
      ]
    }
  }
}

联系我

舒志平

联系方式：1442702103@qq.com
微信：f144270