Home Explore Help
Register Sign In
Rorschach
/
xyyf-h5-group-buy
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

first commit

Rorschach 3 years ago
commit
cd819a3b5a
18 changed files with 14419 additions and 0 deletions
Unified View Show Diff Stats
  1. 3 0
      .env.development
  2. 0 0
      .env.production
  3. 23 0
      .gitignore
  4. 31 0
      README.md
  5. 14 0
      babel.config.js
  6. 13266 0
      package-lock.json
  7. 50 0
      package.json
  8. BIN
      public/favicon.ico
  9. 17 0
      public/index.html
  10. 13 0
      src/App.vue
  11. 46 0
      src/api/base.js
  12. 7 0
      src/main.js
  13. 58 0
      src/router.js
  14. 119 0
      src/view/cart/index.vue
  15. 433 0
      src/view/course/index.vue
  16. 247 0
      src/view/order/index.vue
  17. 73 0
      src/view/user/index.vue
  18. 19 0
      vue.config.js

+ 3 - 0
.env.development
View File 

@@ -0,0 +1,3 @@
 
+NODE_ENV="development"
 
+BASE_URL="123123"
 
+VUE_APP_URL="http://baidu.com"

+ 0 - 0
.env.production
View File


+ 23 - 0
.gitignore
View File 

@@ -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?

+ 31 - 0
README.md
View File 

@@ -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文件设置

+ 14 - 0
babel.config.js
View File 

@@ -0,0 +1,14 @@
 
+module.exports = {
 
+  presets: ['@vue/cli-plugin-babel/preset'],
 
+  plugins: [
 
+    [
 
+      'import',
 
+      {
 
+        libraryName: 'vant',
 
+        libraryDirectory: 'es',
 
+        style: true
 
+      },
 
+      'vant',
 
+    ]
 
+  ],
 
+};

File diff suppressed because it is too large
+ 13266 - 0
package-lock.json


+ 50 - 0
package.json
View File 

@@ -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"
 
+  ]
 
+}

BIN
public/favicon.ico
View File


+ 17 - 0
public/index.html
View File 

@@ -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>

+ 13 - 0
src/App.vue
View File 

@@ -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>

+ 46 - 0
src/api/base.js
View File 

@@ -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
 
+        }
 
+      })
 
+  }

+ 7 - 0
src/main.js
View File 

@@ -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');

+ 58 - 0
src/router.js
View File 

@@ -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 };

+ 119 - 0
src/view/cart/index.vue
View File 

@@ -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>

+ 433 - 0
src/view/course/index.vue
View File 

@@ -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>

+ 247 - 0
src/view/order/index.vue
View File 

@@ -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>

+ 73 - 0
src/view/user/index.vue
View File 

@@ -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>

+ 19 - 0
vue.config.js
View File 

@@ -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
 
+          })
 
+        ]
 
+      }
 
+    }
 
+  }
 
+};