3 năm trước cách đây · cd819a3b5a
--- a/.env.development
+++ b/.env.development
@@ -0,0 +1,3 @@
 
				+NODE_ENV="development"
			
 
				+BASE_URL="123123"
			
 
				+VUE_APP_URL="http://baidu.com"
			
--- a/.env.production
+++ b/.env.production
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,23 @@
 
				+.DS_Store
			
 
				+node_modules
			
 
				+/dist
			
 
				+
			
 
				+
			
 
				+# local env files
			
 
				+.env.local
			
 
				+.env.*.local
			
 
				+
			
 
				+# Log files
			
 
				+npm-debug.log*
			
 
				+yarn-debug.log*
			
 
				+yarn-error.log*
			
 
				+pnpm-debug.log*
			
 
				+
			
 
				+# Editor directories and files
			
 
				+.idea
			
 
				+.vscode
			
 
				+*.suo
			
 
				+*.ntvs*
			
 
				+*.njsproj
			
 
				+*.sln
			
 
				+*.sw?
			
--- a/README.md
+++ b/README.md
@@ -0,0 +1,31 @@
 
				+# vue3
			
 
				+
			
 
				+## Project setup
			
 
				+```
			
 
				+yarn install
			
 
				+```
			
 
				+
			
 
				+### Compiles and hot-reloads for development
			
 
				+```
			
 
				+yarn serve
			
 
				+```
			
 
				+
			
 
				+### Compiles and minifies for production
			
 
				+```
			
 
				+yarn build
			
 
				+```
			
 
				+
			
 
				+### Lints and fixes files
			
 
				+```
			
 
				+yarn lint
			
 
				+```
			
 
				+
			
 
				+### Customize configuration
			
 
				+See [Configuration Reference](https://cli.vuejs.org/config/).
			
 
				+
			
 
				+## 开发
			
 
				+
			
 
				+### 使用vw单位
			
 
				+基准宽度375，在vue.config.js中设置，比如设计图图片为375px，则代码写width:375px(开发时把蓝湖选择为IOS，也就是根据一倍像素写页面)
			
 
				+
			
 
				+### 环境变量和base_url在.env文件设置
			
--- a/babel.config.js
+++ b/babel.config.js
@@ -0,0 +1,14 @@
 
				+module.exports = {
			
 
				+  presets: ['@vue/cli-plugin-babel/preset'],
			
 
				+  plugins: [
			
 
				+    [
			
 
				+      'import',
			
 
				+      {
			
 
				+        libraryName: 'vant',
			
 
				+        libraryDirectory: 'es',
			
 
				+        style: true
			
 
				+      },
			
 
				+      'vant',
			
 
				+    ]
			
 
				+  ],
			
 
				+};
			
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,50 @@
 
				+{
			
 
				+  "name": "vue3",
			
 
				+  "version": "0.1.0",
			
 
				+  "private": true,
			
 
				+  "scripts": {
			
 
				+    "serve": "vue-cli-service serve --mode development",
			
 
				+    "build": "vue-cli-service build",
			
 
				+    "lint": "vue-cli-service lint"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "axios": "^0.21.1",
			
 
				+    "core-js": "^3.6.5",
			
 
				+    "vant": "^3.0.0",
			
 
				+    "vue": "^3.0.0",
			
 
				+    "vue-router": "^4.0.0"
			
 
				+  },
			
 
				+  "devDependencies": {
			
 
				+    "@vue/cli-plugin-babel": "~4.5.0",
			
 
				+    "@vue/cli-plugin-eslint": "~4.5.0",
			
 
				+    "@vue/cli-service": "~4.5.0",
			
 
				+    "@vue/compiler-sfc": "^3.0.0",
			
 
				+    "babel-eslint": "^10.1.0",
			
 
				+    "babel-plugin-import": "^1.13.3",
			
 
				+    "eslint": "^6.7.2",
			
 
				+    "eslint-plugin-vue": "^7.0.0",
			
 
				+    "less": "^3.12.2",
			
 
				+    "less-loader": "^7.1.0",
			
 
				+    "postcss": "^8.2.8",
			
 
				+    "postcss-px-to-viewport": "^1.1.1"
			
 
				+  },
			
 
				+  "eslintConfig": {
			
 
				+    "root": true,
			
 
				+    "env": {
			
 
				+      "node": true
			
 
				+    },
			
 
				+    "extends": [
			
 
				+      "plugin:vue/vue3-essential",
			
 
				+      "eslint:recommended"
			
 
				+    ],
			
 
				+    "parserOptions": {
			
 
				+      "parser": "babel-eslint"
			
 
				+    },
			
 
				+    "rules": {}
			
 
				+  },
			
 
				+  "browserslist": [
			
 
				+    "> 1%",
			
 
				+    "last 2 versions",
			
 
				+    "not dead"
			
 
				+  ]
			
 
				+}
			
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,17 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <head>
			
 
				+    <meta charset="utf-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
			
 
				+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
			
 
				+    <title><%= htmlWebpackPlugin.options.title %></title>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <noscript>
			
 
				+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
			
 
				+    </noscript>
			
 
				+    <div id="app"></div>
			
 
				+    <!-- built files will be auto injected -->
			
 
				+  </body>
			
 
				+</html>
			
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,13 @@
 
				+<template>
			
 
				+  <div id="app">
			
 
				+    <router-view />
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<style>
			
 
				+body {
			
 
				+  font-size: 16px;
			
 
				+  background-color: #f6f6f6;
			
 
				+  -webkit-font-smoothing: antialiased;
			
 
				+}
			
 
				+</style>
			
--- a/src/api/base.js
+++ b/src/api/base.js
@@ -0,0 +1,46 @@
 
				+import axios from 'axios'
			
 
				+
			
 
				+const service = axios.create({
			
 
				+    baseURL: process.env.BASE_API, // api 的 base_url
			
 
				+    timeout: 5000 // 请求超时时间
			
 
				+})
			
 
				+console.log(123123,process.env)
			
 
				+// request拦截器
			
 
				+service.interceptors.request.use(
			
 
				+    config => {
			
 
				+        if (localStorage.getItem('token')) {
			
 
				+            config.headers['token'] = localStorage.getItem('token'); // 让每个请求携带自定义token 请根据实际情况自行修改
			
 
				+        }
			
 
				+        return config
			
 
				+    },
			
 
				+    error => {
			
 
				+        // Do something with request error
			
 
				+        console.log(error) // for debug
			
 
				+        Promise.reject(error)
			
 
				+    }
			
 
				+)
			
 
				+
			
 
				+// response 拦截器
			
 
				+service.interceptors.response.use(
			
 
				+    response => {
			
 
				+        const res = response.data
			
 
				+        if (res.code !== 200) {
			
 
				+            console.log('error',res.message);
			
 
				+        } else {
			
 
				+            return response.data
			
 
				+        }
			
 
				+    },
			
 
				+    error => {
			
 
				+        console.log('err' + error) // for debug
			
 
				+        return Promise.reject(error)
			
 
				+    }
			
 
				+)
			
 
				+export function getExampleData (code) {
			
 
				+    return service({
			
 
				+        url: '/skillInfo',
			
 
				+        method: 'get',
			
 
				+        params: {
			
 
				+          code
			
 
				+        }
			
 
				+      })
			
 
				+  }
			
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,7 @@
 
				+import { createApp } from 'vue';
			
 
				+import App from './App.vue';
			
 
				+import { router } from './router';
			
 
				+
			
 
				+const app = createApp(App);
			
 
				+app.use(router);
			
 
				+app.mount('#app');
			
--- a/src/router.js
+++ b/src/router.js
@@ -0,0 +1,58 @@
 
				+import { createRouter, createWebHashHistory } from 'vue-router';
			
 
				+
			
 
				+const routes = [
			
 
				+  {
			
 
				+    name: 'notFound',
			
 
				+    path: '/:path(.*)+',
			
 
				+    redirect: {
			
 
				+      name: 'course',
			
 
				+    },
			
 
				+  },
			
 
				+  {
			
 
				+    name: 'user',
			
 
				+    path: '/user',
			
 
				+    component: () => import('./view/user'),
			
 
				+    meta: {
			
 
				+      title: '会员中心',
			
 
				+    },
			
 
				+  },
			
 
				+  {
			
 
				+    name: 'cart',
			
 
				+    path: '/cart',
			
 
				+    component: () => import('./view/cart'),
			
 
				+    meta: {
			
 
				+      title: '购物车',
			
 
				+    },
			
 
				+  },
			
 
				+  {
			
 
				+    name: 'course',
			
 
				+    path: '/course',
			
 
				+    component: () => import('./view/course'),
			
 
				+    meta: {
			
 
				+      title: '课程详情',
			
 
				+    },
			
 
				+  },
			
 
				+  {
			
 
				+    name: 'order',
			
 
				+    path: '/order',
			
 
				+    component: () => import('./view/order'),
			
 
				+    meta: {
			
 
				+      title: '拼团详情',
			
 
				+    },
			
 
				+  },
			
 
				+];
			
 
				+
			
 
				+const router = createRouter({
			
 
				+  routes,
			
 
				+  history: createWebHashHistory(),
			
 
				+});
			
 
				+
			
 
				+router.beforeEach((to, from, next) => {
			
 
				+  const title = to.meta && to.meta.title;
			
 
				+  if (title) {
			
 
				+    document.title = title;
			
 
				+  }
			
 
				+  next();
			
 
				+});
			
 
				+
			
 
				+export { router };
			
--- a/src/view/cart/index.vue
+++ b/src/view/cart/index.vue
@@ -0,0 +1,119 @@
 
				+<template>
			
 
				+  <div>
			
 
				+    <van-checkbox-group class="card-goods" v-model="checkedGoods">
			
 
				+      <van-checkbox
			
 
				+        class="card-goods__item"
			
 
				+        v-for="item in goods"
			
 
				+        :key="item.id"
			
 
				+        :name="item.id"
			
 
				+      >
			
 
				+        <van-card
			
 
				+          :title="item.title"
			
 
				+          :desc="item.desc"
			
 
				+          :num="item.num"
			
 
				+          :price="formatPrice(item.price)"
			
 
				+          :thumb="item.thumb"
			
 
				+        />
			
 
				+      </van-checkbox>
			
 
				+    </van-checkbox-group>
			
 
				+    <van-submit-bar
			
 
				+      :price="totalPrice"
			
 
				+      :disabled="!checkedGoods.length"
			
 
				+      :button-text="submitBarText"
			
 
				+      @submit="onSubmit"
			
 
				+    />
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import { Checkbox, CheckboxGroup, Card, SubmitBar, Toast } from 'vant';
			
 
				+
			
 
				+export default {
			
 
				+  components: {
			
 
				+    [Card.name]: Card,
			
 
				+    [Checkbox.name]: Checkbox,
			
 
				+    [SubmitBar.name]: SubmitBar,
			
 
				+    [CheckboxGroup.name]: CheckboxGroup
			
 
				+  },
			
 
				+
			
 
				+  data() {
			
 
				+    return {
			
 
				+      checkedGoods: ['1', '2', '3'],
			
 
				+      goods: [{
			
 
				+        id: '1',
			
 
				+        title: '进口香蕉',
			
 
				+        desc: '约250g，2根',
			
 
				+        price: 200,
			
 
				+        num: 1,
			
 
				+        thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg'
			
 
				+      }, {
			
 
				+        id: '2',
			
 
				+        title: '陕西蜜梨',
			
 
				+        desc: '约600g',
			
 
				+        price: 690,
			
 
				+        num: 1,
			
 
				+        thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/f6aabd6ac5521195e01e8e89ee9fc63f.jpeg'
			
 
				+      }, {
			
 
				+        id: '3',
			
 
				+        title: '美国伽力果',
			
 
				+        desc: '约680g/3个',
			
 
				+        price: 2680,
			
 
				+        num: 1,
			
 
				+        thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg'
			
 
				+      }]
			
 
				+    };
			
 
				+  },
			
 
				+
			
 
				+  computed: {
			
 
				+    submitBarText() {
			
 
				+      const count = this.checkedGoods.length;
			
 
				+      return '结算' + (count ? `(${count})` : '');
			
 
				+    },
			
 
				+
			
 
				+    totalPrice() {
			
 
				+      return this.goods.reduce((total, item) => total + (this.checkedGoods.indexOf(item.id) !== -1 ? item.price : 0), 0);
			
 
				+    }
			
 
				+  },
			
 
				+
			
 
				+  methods: {
			
 
				+    formatPrice(price) {
			
 
				+      return (price / 100).toFixed(2);
			
 
				+    },
			
 
				+
			
 
				+    onSubmit() {
			
 
				+      Toast('点击结算');
			
 
				+    }
			
 
				+  }
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+.card-goods {
			
 
				+  padding: 10px 0;
			
 
				+  background-color: #fff;
			
 
				+
			
 
				+  &__item {
			
 
				+    position: relative;
			
 
				+    background-color: #fafafa;
			
 
				+
			
 
				+    .van-checkbox__label {
			
 
				+      width: 100%;
			
 
				+      height: auto; // temp
			
 
				+      padding: 0 10px 0 15px;
			
 
				+      box-sizing: border-box;
			
 
				+    }
			
 
				+
			
 
				+    .van-checkbox__icon {
			
 
				+      top: 50%;
			
 
				+      left: 10px;
			
 
				+      z-index: 1;
			
 
				+      position: absolute;
			
 
				+      margin-top: -10px;
			
 
				+    }
			
 
				+
			
 
				+    .van-card__price {
			
 
				+      color: #f44;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/view/course/index.vue
+++ b/src/view/course/index.vue
@@ -0,0 +1,433 @@
 
				+<template>
			
 
				+  <div class="course">
			
 
				+    <!-- <van-swipe class="course-swipe" :autoplay="3000">
			
 
				+      <van-swipe-item v-for="thumb in course.thumb" :key="thumb">
			
 
				+        <img :src="thumb" />
			
 
				+      </van-swipe-item>
			
 
				+    </van-swipe> -->
			
 
				+    <van-cell-group class="course-img">
			
 
				+      <van-image
			
 
				+        class="course-img-img"
			
 
				+        src="https://img01.yzcdn.cn/vant/cat.jpeg"
			
 
				+      />
			
 
				+      <div class="course-img-price">
			
 
				+        <div class="course-img-price-group">￥365/年</div>
			
 
				+        <div class="course-img-price-tag">
			
 
				+          <div class="tag">3人团</div>
			
 
				+          <div class="single">单独购600</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      <div class="course-count-title">距结束仅剩</div>
			
 
				+      <van-count-down :time="time" class="course-count-time">
			
 
				+        <template #default="timeData">
			
 
				+          <span class="block">{{ timeData.hours }}</span>
			
 
				+          <span class="colon">:</span>
			
 
				+          <span class="block">{{ timeData.minutes }}</span>
			
 
				+          <span class="colon">:</span>
			
 
				+          <span class="block">{{ timeData.seconds }}</span>
			
 
				+        </template>
			
 
				+      </van-count-down>
			
 
				+    </van-cell-group>
			
 
				+
			
 
				+    <van-cell-group class="course-title-box">
			
 
				+      <van-cell
			
 
				+        :title="course.title"
			
 
				+        :label="course.desc"
			
 
				+        title-class="course-title"
			
 
				+        lable-class="course-desc"
			
 
				+        center
			
 
				+      />
			
 
				+    </van-cell-group>
			
 
				+
			
 
				+    <van-cell-group>
			
 
				+      <van-cell
			
 
				+        is-link
			
 
				+        @click="sorry"
			
 
				+        title="拼团玩法"
			
 
				+        label="好友拼单-人满成团-人不满自动退款"
			
 
				+        title-class="course-title-s"
			
 
				+        lable-class="course-desc"
			
 
				+        center
			
 
				+      />
			
 
				+    </van-cell-group>
			
 
				+
			
 
				+    <van-cell-group class="course-cell-group">
			
 
				+      <van-cell>
			
 
				+        <template #title>
			
 
				+          <div class="header-title">
			
 
				+            <span>可直接参与拼团</span>
			
 
				+            <van-icon name="arrow-down" />
			
 
				+          </div>
			
 
				+        </template>
			
 
				+      </van-cell>
			
 
				+
			
 
				+      <van-cell class="group-item" v-for="group in groups" :key="group">
			
 
				+        <template #title>
			
 
				+          <div class="group">
			
 
				+            <div class="group-user">
			
 
				+              <van-image class="group-user-avatar" round :src="group.avatar" />
			
 
				+              <span class="group-user-name">{{ group.nickName }}</span>
			
 
				+            </div>
			
 
				+            <div class="group-info">
			
 
				+              <div class="group-info-left">
			
 
				+                <div class="group-info-left-number">
			
 
				+                  {{ group.sum }}人团，还差<span>{{ group.need }}人</span>成团
			
 
				+                </div>
			
 
				+                <div class="group-info-left-time">
			
 
				+                  <span>剩余</span><van-count-down :time="group.countTime" />
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <div class="group-info-btn" @click="sorry(group.id)">去拼团</div>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </template>
			
 
				+      </van-cell>
			
 
				+    </van-cell-group>
			
 
				+
			
 
				+    <footer class="footer">
			
 
				+      <div class="footer-icon">
			
 
				+        <van-icon
			
 
				+          name="wap-home-o"
			
 
				+          class="footer-icon-img"
			
 
				+          size="30"
			
 
				+          color="#000"
			
 
				+        />
			
 
				+        <span>首页</span>
			
 
				+      </div>
			
 
				+      <div class="footer-single-btn" @click="sorry">
			
 
				+        <span>￥{{ course.originPrice }}元</span>
			
 
				+        <span>单独购买</span>
			
 
				+      </div>
			
 
				+      <div class="footer-group-btn" @click="onClickGroup">
			
 
				+        <span>￥{{ course.price }}元</span>
			
 
				+        <span>3人开团</span>
			
 
				+      </div>
			
 
				+    </footer>
			
 
				+    <!-- <van-action-bar>
			
 
				+      <van-action-bar-icon icon="cart-o" @click="onClickCart">
			
 
				+        购物车
			
 
				+      </van-action-bar-icon>
			
 
				+      <van-action-bar-button type="warning" @click="sorry">
			
 
				+        加入购物车
			
 
				+      </van-action-bar-button>
			
 
				+      <van-action-bar-button type="danger" @click="sorry">
			
 
				+        立即购买
			
 
				+      </van-action-bar-button>
			
 
				+    </van-action-bar> -->
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import { Icon, Cell, CellGroup, Image, Toast, CountDown } from "vant";
			
 
				+import { getExampleData } from "../../api/base";
			
 
				+
			
 
				+export default {
			
 
				+  components: {
			
 
				+    [Icon.name]: Icon,
			
 
				+    [Cell.name]: Cell,
			
 
				+    [CellGroup.name]: CellGroup,
			
 
				+    [Image.name]: Image,
			
 
				+    [CountDown.name]: CountDown,
			
 
				+  },
			
 
				+
			
 
				+  data() {
			
 
				+    return {
			
 
				+      course: {
			
 
				+        title: "学有义方APP-学习卡（会员年卡）",
			
 
				+        desc: "小学1-4年级，语文/数学，教材同步，AI互动教学",
			
 
				+        price: 365,
			
 
				+        originPrice: 600,
			
 
				+        express: "免运费",
			
 
				+        remain: 19,
			
 
				+        thumb: [
			
 
				+          "https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg",
			
 
				+          "https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg",
			
 
				+        ],
			
 
				+      },
			
 
				+      groups: [
			
 
				+        {
			
 
				+          avatar: "https://img01.yzcdn.cn/vant/cat.jpeg",
			
 
				+          nickName: "平安妈妈",
			
 
				+          sum: 5,
			
 
				+          need: 1,
			
 
				+          countTime: 29 * 60 * 60 * 1000,
			
 
				+          id: 1,
			
 
				+        },
			
 
				+        {
			
 
				+          avatar: "https://img01.yzcdn.cn/vant/cat.jpeg",
			
 
				+          nickName: "喔喔奶糖",
			
 
				+          sum: 5,
			
 
				+          need: 2,
			
 
				+          countTime: 15 * 60 * 60 * 1000,
			
 
				+          id: 2,
			
 
				+        },
			
 
				+      ],
			
 
				+      time: 30 * 60 * 60 * 1000,
			
 
				+    };
			
 
				+  },
			
 
				+
			
 
				+  methods: {
			
 
				+    formatPrice() {
			
 
				+      return "¥" + (this.course.price / 100).toFixed(2);
			
 
				+    },
			
 
				+
			
 
				+    onClickCart() {
			
 
				+      console.log(1111111);
			
 
				+      getExampleData();
			
 
				+      this.$router.push("cart");
			
 
				+    },
			
 
				+    onClickGroup() {
			
 
				+      this.$router.push("order");
			
 
				+    },
			
 
				+
			
 
				+    sorry() {
			
 
				+      Toast("暂无后续逻辑~");
			
 
				+    },
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+.course {
			
 
				+  padding-bottom: 50px;
			
 
				+
			
 
				+  .cell-font-size {
			
 
				+    font-size: 30px;
			
 
				+  }
			
 
				+  &-swipe {
			
 
				+    img {
			
 
				+      width: 100%;
			
 
				+      display: block;
			
 
				+    }
			
 
				+  }
			
 
				+  &-img {
			
 
				+    width: 750px;
			
 
				+    height: 560px;
			
 
				+    &-img {
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+    }
			
 
				+    &-price {
			
 
				+      position: absolute;
			
 
				+      left: 13px;
			
 
				+      bottom: 20px;
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      justify-content: center;
			
 
				+      &-group {
			
 
				+        color: #fff;
			
 
				+        font-size: 58px;
			
 
				+        font-weight: bold;
			
 
				+        margin-right: 12px;
			
 
				+      }
			
 
				+      &-tag {
			
 
				+        display: flex;
			
 
				+        flex-direction: column;
			
 
				+        .tag {
			
 
				+          background: #ce3110;
			
 
				+          width: 98px;
			
 
				+          height: 35px;
			
 
				+          border-radius: 21px 80px 80px 0;
			
 
				+          text-align: center;
			
 
				+          line-height: 35px;
			
 
				+          color: #fff;
			
 
				+          font-size: 25.6px;
			
 
				+          margin-bottom: 7.2px;
			
 
				+        }
			
 
				+        .single {
			
 
				+          color: #fff;
			
 
				+          font-size: 24px;
			
 
				+          font-weight: bold;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+    .course-count-title {
			
 
				+      color: #fff;
			
 
				+      font-size: 32px;
			
 
				+      right: 63px;
			
 
				+      bottom: 57px;
			
 
				+      position: absolute;
			
 
				+    }
			
 
				+    .course-count-time {
			
 
				+      position: absolute;
			
 
				+      right: 60px;
			
 
				+      bottom: 16px;
			
 
				+      display: flex;
			
 
				+      flex-direction: row;
			
 
				+      .block {
			
 
				+        display: block;
			
 
				+        width: 42px;
			
 
				+        height: 42px;
			
 
				+        background: #fff;
			
 
				+        border-radius: 6px;
			
 
				+        line-height: 42px;
			
 
				+        text-align: center;
			
 
				+        color: #fc522e;
			
 
				+        font-weight: bold;
			
 
				+        font-size: 28px;
			
 
				+      }
			
 
				+      .colon {
			
 
				+        display: block;
			
 
				+        color: #fff;
			
 
				+        font-weight: bold;
			
 
				+        font-size: 28px;
			
 
				+        width: 28px;
			
 
				+        text-align: center;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  &-title-box {
			
 
				+    padding-top: 30px;
			
 
				+  }
			
 
				+  &-title {
			
 
				+    font-size: 32px;
			
 
				+    color: #000;
			
 
				+    line-height: 50px;
			
 
				+    padding-left: 20px;
			
 
				+  }
			
 
				+  &-title-s {
			
 
				+    font-size: 28px;
			
 
				+    color: #000;
			
 
				+    line-height: 50px;
			
 
				+    padding-left: 20px;
			
 
				+  }
			
 
				+  &-desc {
			
 
				+    font-size: 28px;
			
 
				+    color: rgba(0, 0, 0, 0.6);
			
 
				+    line-height: 45px;
			
 
				+    padding-left: 20px;
			
 
				+  }
			
 
				+
			
 
				+  &-express {
			
 
				+    color: #999;
			
 
				+    font-size: 12px;
			
 
				+    padding: 5px 15px;
			
 
				+  }
			
 
				+
			
 
				+  &-cell-group {
			
 
				+    margin: 15px 0;
			
 
				+    background: #f6f6f6;
			
 
				+    .header-title {
			
 
				+      color: #000;
			
 
				+      font-size: 28px;
			
 
				+      padding-top: 21px;
			
 
				+      padding-left: 18px;
			
 
				+      padding-bottom: 10px;
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      span {
			
 
				+        margin-right: 10px;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .group-item {
			
 
				+      margin-bottom: 10px;
			
 
				+    }
			
 
				+    .group {
			
 
				+      display: flex;
			
 
				+      flex-direction: row;
			
 
				+      align-items: center;
			
 
				+      justify-content: space-between;
			
 
				+      padding-left: 35px;
			
 
				+      padding-right: 35px;
			
 
				+      &-user {
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+        &-avatar {
			
 
				+          width: 80px;
			
 
				+          height: 80px;
			
 
				+          margin-right: 14px;
			
 
				+        }
			
 
				+        &-name {
			
 
				+          font-size: 28px;
			
 
				+          color: #000;
			
 
				+        }
			
 
				+      }
			
 
				+      &-info {
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+        &-left {
			
 
				+          display: flex;
			
 
				+          flex-direction: column;
			
 
				+          align-items: flex-end;
			
 
				+          margin-right: 16px;
			
 
				+          &-number {
			
 
				+            color: #000;
			
 
				+            font-size: 26px;
			
 
				+            margin-bottom: 12px;
			
 
				+          }
			
 
				+          &-time {
			
 
				+            color: #000;
			
 
				+            font-size: 20px;
			
 
				+            display: flex;
			
 
				+            flex-direction: row;
			
 
				+            align-items: center;
			
 
				+          }
			
 
				+        }
			
 
				+        &-btn {
			
 
				+          width: 128px;
			
 
				+          height: 46px;
			
 
				+          background: #ff5e60;
			
 
				+          box-shadow: 0px 2px 4px 0px #ffc6c6;
			
 
				+          border-radius: 23px;
			
 
				+          color: rgba(255, 255, 255, 0.89);
			
 
				+          text-shadow: 0px 2px 4px #ffc6c6;
			
 
				+          font-size: 26px;
			
 
				+          text-align: center;
			
 
				+          line-height: 46px;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .footer {
			
 
				+    width: 100%;
			
 
				+    height: 148px;
			
 
				+    position: fixed;
			
 
				+    bottom: 0;
			
 
				+    background: #fff;
			
 
				+    display: flex;
			
 
				+    flex-direction: row;
			
 
				+    align-items: center;
			
 
				+    justify-content: space-around;
			
 
				+    padding-left: 20px;
			
 
				+    box-sizing: border-box;
			
 
				+    &-icon {
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      flex-direction: column;
			
 
				+      color: #000;
			
 
				+      font-size: 30px;
			
 
				+      &-img {
			
 
				+        margin-bottom: 4px;
			
 
				+      }
			
 
				+    }
			
 
				+    &-single-btn {
			
 
				+      width: 277px;
			
 
				+      height: 88px;
			
 
				+      background: #ffe8d5;
			
 
				+      border-radius: 51px;
			
 
				+      display: flex;
			
 
				+      flex-direction: column;
			
 
				+      align-items: center;
			
 
				+      justify-content: space-around;
			
 
				+      color: #5e5e5e;
			
 
				+      font-size: 32px;
			
 
				+      font-weight: 500;
			
 
				+    }
			
 
				+    &-group-btn {
			
 
				+      width: 328px;
			
 
				+      height: 88px;
			
 
				+      background: #fe7801;
			
 
				+      border-radius: 44px;
			
 
				+      display: flex;
			
 
				+      flex-direction: column;
			
 
				+      align-items: center;
			
 
				+      justify-content: space-around;
			
 
				+      color: #fff;
			
 
				+      font-size: 32px;
			
 
				+      font-weight: 500;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/view/order/index.vue
+++ b/src/view/order/index.vue
@@ -0,0 +1,247 @@
 
				+<template>
			
 
				+  <div class="order-page">
			
 
				+    <van-cell-group>
			
 
				+      <van-cell center>
			
 
				+        <template #title>
			
 
				+          <div class="header">
			
 
				+            <van-image
			
 
				+              class="header-img"
			
 
				+              src="https://img01.yzcdn.cn/vant/cat.jpeg"
			
 
				+            />
			
 
				+          </div>
			
 
				+        </template>
			
 
				+      </van-cell>
			
 
				+    </van-cell-group>
			
 
				+
			
 
				+    <div class="order-info">
			
 
				+      <div class="order-info-header">
			
 
				+        <van-image
			
 
				+          class="order-info-header-img"
			
 
				+          round
			
 
				+          src="https://img01.yzcdn.cn/vant/cat.jpeg"
			
 
				+        />
			
 
				+        <span>义方教育</span>
			
 
				+      </div>
			
 
				+      <div class="product-desc">
			
 
				+        <van-image
			
 
				+          class="product-desc-img"
			
 
				+          src="https://img01.yzcdn.cn/vant/cat.jpeg"
			
 
				+        />
			
 
				+        <div class="product-desc-right">
			
 
				+          <div class="name">{{ product.title }}</div>
			
 
				+          <div class="price">
			
 
				+            <span class="price-now">{{ product.price }}</span>
			
 
				+            <span class="price-origin">{{ product.originPrice }}</span>
			
 
				+            <span class="price-tag">拼团</span>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="tel-sms">
			
 
				+      <div class="tel-sms-title">
			
 
				+        <span>APP登陆手机号</span>
			
 
				+        <span class="required">*</span>
			
 
				+      </div>
			
 
				+      <van-field
			
 
				+        v-model="phoneNumber"
			
 
				+        error-message=""
			
 
				+        type="number"
			
 
				+        placeholder="请输入手机号"
			
 
				+        class="tel-number"
			
 
				+        center
			
 
				+      />
			
 
				+
			
 
				+      <van-field
			
 
				+        v-model="sms"
			
 
				+        class="tel-sms"
			
 
				+        center
			
 
				+        clearable
			
 
				+        placeholder="请输入短信验证码"
			
 
				+      >
			
 
				+        <template #button>
			
 
				+          <van-button size="small" class="get-sms" type="primary"
			
 
				+            >发送验证码</van-button
			
 
				+          >
			
 
				+        </template>
			
 
				+      </van-field>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import { Cell, CellGroup, Image, Toast, Field, Button } from "vant";
			
 
				+
			
 
				+export default {
			
 
				+  components: {
			
 
				+    [Cell.name]: Cell,
			
 
				+    [CellGroup.name]: CellGroup,
			
 
				+    [Image.name]: Image,
			
 
				+    [Field.name]: Field,
			
 
				+    [Button.name]: Button,
			
 
				+  },
			
 
				+
			
 
				+  data() {
			
 
				+    return {
			
 
				+      product: {
			
 
				+        title: "学有义方App学习卡",
			
 
				+        price: 360,
			
 
				+        originPrice: 600,
			
 
				+      },
			
 
				+    };
			
 
				+  },
			
 
				+
			
 
				+  computed: {
			
 
				+    submitBarText() {
			
 
				+      const count = this.checkedGoods.length;
			
 
				+      return "结算" + (count ? `(${count})` : "");
			
 
				+    },
			
 
				+
			
 
				+    totalPrice() {
			
 
				+      return this.goods.reduce(
			
 
				+        (total, item) =>
			
 
				+          total + (this.checkedGoods.indexOf(item.id) !== -1 ? item.price : 0),
			
 
				+        0
			
 
				+      );
			
 
				+    },
			
 
				+  },
			
 
				+
			
 
				+  methods: {
			
 
				+    formatPrice(price) {
			
 
				+      return (price / 100).toFixed(2);
			
 
				+    },
			
 
				+
			
 
				+    onSubmit() {
			
 
				+      Toast("点击结算");
			
 
				+    },
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+.order-page {
			
 
				+  .header {
			
 
				+    background: #fff;
			
 
				+    width: 100%;
			
 
				+    height: 200px;
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    justify-content: center;
			
 
				+    margin-bottom: 10px;
			
 
				+    &-img {
			
 
				+      width: 80%;
			
 
				+      height: 80%;
			
 
				+    }
			
 
				+  }
			
 
				+  .order-info {
			
 
				+    width: 100%;
			
 
				+    height: 300px;
			
 
				+    background: #fff;
			
 
				+    padding: 10px;
			
 
				+    &-header {
			
 
				+      height: 50px;
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      &-img {
			
 
				+        width: 30px;
			
 
				+        height: 30px;
			
 
				+        margin-right: 10px;
			
 
				+      }
			
 
				+      span {
			
 
				+        font-size: 26px;
			
 
				+        color: #000;
			
 
				+      }
			
 
				+    }
			
 
				+    .product-desc {
			
 
				+      display: flex;
			
 
				+      flex-direction: row;
			
 
				+      align-items: center;
			
 
				+      width: 100%;
			
 
				+      height: 200px;
			
 
				+      &-img {
			
 
				+        width: 200px;
			
 
				+        height: 200px;
			
 
				+        margin-right: 20px;
			
 
				+      }
			
 
				+      &-right {
			
 
				+        display: flex;
			
 
				+        flex-direction: column;
			
 
				+        justify-content: space-between;
			
 
				+        height: 200px;
			
 
				+        .title {
			
 
				+          color: #000;
			
 
				+          font-size: 32px;
			
 
				+        }
			
 
				+        .price {
			
 
				+          font-size: 28px;
			
 
				+          &-now {
			
 
				+            color: #000;
			
 
				+          }
			
 
				+          &-origin {
			
 
				+            color: #eee;
			
 
				+          }
			
 
				+          &-tag {
			
 
				+            font-size: 24px;
			
 
				+            border-radius: 5px;
			
 
				+            background: lightsalmon;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  .tel-sms {
			
 
				+    background: #f6f6f6;
			
 
				+    padding: 34px;
			
 
				+    &-title {
			
 
				+      color: #0e0e0e;
			
 
				+      font-size: 38px;
			
 
				+      margin-bottom: 30px;
			
 
				+      .required {
			
 
				+        color: #ff272d;
			
 
				+        margin-left: 21px;
			
 
				+      }
			
 
				+    }
			
 
				+    .tel-number {
			
 
				+      width: 696px;
			
 
				+      height: 77px;
			
 
				+      background: #f6f6f6;
			
 
				+      margin-bottom: 30px;
			
 
				+      border: 1px solid #979797;
			
 
				+      border-radius: 10px;
			
 
				+      .van-field__value{
			
 
				+        height: 100%;
			
 
				+        .van-field__body{
			
 
				+          height: 100%;
			
 
				+        }
			
 
				+      }
			
 
				+      ::placeholder {
			
 
				+        font-size: 34px;
			
 
				+        color: #838383;
			
 
				+      }
			
 
				+    }
			
 
				+    .tel-sms {
			
 
				+      width: 696px;
			
 
				+      height: 77px;
			
 
				+      background: #f6f6f6;
			
 
				+      margin-bottom: 30px;
			
 
				+      border: 1px solid #979797;
			
 
				+      border-radius: 10px;
			
 
				+      ::placeholder {
			
 
				+        font-size: 34px;
			
 
				+        color: #838383;
			
 
				+      }
			
 
				+
			
 
				+      .get-sms {
			
 
				+        font-size: 34px;
			
 
				+        color: #fe7801;
			
 
				+        width: 235px;
			
 
				+        height: 67px;
			
 
				+        background: #f6f6f6;
			
 
				+        border: none;
			
 
				+        border-left: solid 1px #979797;
			
 
				+        position: relative;
			
 
				+        right: -30px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/view/user/index.vue
+++ b/src/view/user/index.vue
@@ -0,0 +1,73 @@
 
				+<template>
			
 
				+  <div>
			
 
				+    <img class="user-poster" src="https://img.yzcdn.cn/public_files/2017/10/23/8690bb321356070e0b8c4404d087f8fd.png">
			
 
				+    <van-row class="user-links">
			
 
				+      <van-col span="6">
			
 
				+        <van-icon name="pending-payment" />
			
 
				+        待付款
			
 
				+      </van-col>
			
 
				+      <van-col span="6">
			
 
				+        <van-icon name="records" />
			
 
				+        待接单
			
 
				+      </van-col>
			
 
				+      <van-col span="6">
			
 
				+        <van-icon name="tosend" />
			
 
				+        待发货
			
 
				+      </van-col>
			
 
				+      <van-col span="6">
			
 
				+        <van-icon name="logistics" />
			
 
				+        已发货
			
 
				+      </van-col>
			
 
				+    </van-row>
			
 
				+
			
 
				+    <van-cell-group class="user-group">
			
 
				+      <van-cell icon="records" title="全部订单" is-link />
			
 
				+    </van-cell-group>
			
 
				+
			
 
				+    <van-cell-group>
			
 
				+      <van-cell icon="points" title="我的积分" is-link />
			
 
				+      <van-cell icon="gold-coin-o" title="我的优惠券" is-link />
			
 
				+      <van-cell icon="gift-o" title="我收到的礼物" is-link />
			
 
				+    </van-cell-group>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import { Row, Col, Icon, Cell, CellGroup } from 'vant';
			
 
				+
			
 
				+export default {
			
 
				+  components: {
			
 
				+    [Row.name]: Row,
			
 
				+    [Col.name]: Col,
			
 
				+    [Icon.name]: Icon,
			
 
				+    [Cell.name]: Cell,
			
 
				+    [CellGroup.name]: CellGroup
			
 
				+  }
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+.user {
			
 
				+  &-poster {
			
 
				+    width: 100%;
			
 
				+    height: 53vw;
			
 
				+    display: block;
			
 
				+  }
			
 
				+
			
 
				+  &-group {
			
 
				+    margin-bottom: 15px;
			
 
				+  }
			
 
				+
			
 
				+  &-links {
			
 
				+    padding: 15px 0;
			
 
				+    font-size: 12px;
			
 
				+    text-align: center;
			
 
				+    background-color: #fff;
			
 
				+
			
 
				+    .van-icon {
			
 
				+      display: block;
			
 
				+      font-size: 24px;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/vue.config.js
+++ b/vue.config.js
@@ -0,0 +1,19 @@
 
				+const autoprefixer = require('autoprefixer');
			
 
				+const pxtoviewport = require('postcss-px-to-viewport');
			
 
				+
			
 
				+module.exports = {
			
 
				+  outputDir: 'dist',
			
 
				+  publicPath: process.env.NODE_ENV === 'production' ? '/xyyf-h5-group-buy/' : '/',
			
 
				+  css: {
			
 
				+    loaderOptions: {
			
 
				+      postcss: {
			
 
				+        plugins: [
			
 
				+          autoprefixer(),
			
 
				+          pxtoviewport({
			
 
				+            viewportWidth: 750
			
 
				+          })
			
 
				+        ]
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+};