6 år sedan · 63f360c1c0
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -0,0 +1,3 @@
 
				+> 1%
			
 
				+last 2 versions
			
 
				+not ie <= 8
			
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -0,0 +1,16 @@
 
				+module.exports = {
			
 
				+  root: true,
			
 
				+  env: {
			
 
				+    node: true
			
 
				+  },
			
 
				+  'extends': [
			
 
				+    'plugin:vue/essential'
			
 
				+  ],
			
 
				+  rules: {
			
 
				+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
			
 
				+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
			
 
				+  },
			
 
				+  parserOptions: {
			
 
				+    parser: 'babel-eslint'
			
 
				+  }
			
 
				+}
			
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,21 @@
 
				+.DS_Store
			
 
				+node_modules
			
 
				+/dist
			
 
				+
			
 
				+# local env files
			
 
				+.env.local
			
 
				+.env.*.local
			
 
				+
			
 
				+# Log files
			
 
				+npm-debug.log*
			
 
				+yarn-debug.log*
			
 
				+yarn-error.log*
			
 
				+
			
 
				+# Editor directories and files
			
 
				+.idea
			
 
				+.vscode
			
 
				+*.suo
			
 
				+*.ntvs*
			
 
				+*.njsproj
			
 
				+*.sln
			
 
				+*.sw*
			
--- a/.postcssrc.js
+++ b/.postcssrc.js
@@ -0,0 +1,5 @@
 
				+module.exports = {
			
 
				+  plugins: {
			
 
				+    autoprefixer: {}
			
 
				+  }
			
 
				+}
			
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,4 @@
 
				+{
			
 
				+  "semi": false,
			
 
				+  "singleQuote": true
			
 
				+}
			
--- a/README.md
+++ b/README.md
@@ -0,0 +1,44 @@
 
				+# vue-multiple-pages
			
 
				+
			
 
				+## A multiple Pages Starter use Vue-cli3
			
 
				+
			
 
				+## Project setup
			
 
				+
			
 
				+download and:
			
 
				+
			
 
				+```
			
 
				+npm install
			
 
				+```
			
 
				+### Compiles and hot-reloads for development
			
 
				+```
			
 
				+npm run serve
			
 
				+```
			
 
				+
			
 
				+
			
 
				+### Compiles and minifies for production
			
 
				+```
			
 
				+npm run build
			
 
				+```
			
 
				+
			
 
				+### Lints and fixes files
			
 
				+```
			
 
				+npm run lint
			
 
				+```
			
 
				+
			
 
				+### Modify Page Title
			
 
				+
			
 
				+In the root folder `title.js`.
			
 
				+
			
 
				+Code likes:
			
 
				+
			
 
				+```
			
 
				+{
			
 
				+  index: '主页',
			
 
				+  'user/login': '登录',
			
 
				+  'customer/home': '用户首页'
			
 
				+}
			
 
				+```
			
 
				+
			
 
				+### More Config
			
 
				+
			
 
				+[Vue-cli 3](https://cli.vuejs.org/)
			
--- a/babel.config.js
+++ b/babel.config.js
@@ -0,0 +1,3 @@
 
				+module.exports = {
			
 
				+  presets: ["@vue/app"]
			
 
				+};
			
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,32 @@
 
				+{
			
 
				+  "name": "multiple-pages",
			
 
				+  "version": "0.1.0",
			
 
				+  "private": true,
			
 
				+  "scripts": {
			
 
				+    "serve": "vue-cli-service serve",
			
 
				+    "build": "vue-cli-service build",
			
 
				+    "lint": "vue-cli-service lint"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "element-ui": "^2.4.6",
			
 
				+    "vue": "^2.5.17"
			
 
				+  },
			
 
				+  "devDependencies": {
			
 
				+    "@vue/cli-plugin-babel": "^3.0.1",
			
 
				+    "@vue/cli-plugin-eslint": "^3.0.1",
			
 
				+    "@vue/cli-service": "^3.0.1",
			
 
				+    "@vue/eslint-config-prettier": "^3.0.1",
			
 
				+    "axios": "^0.18.0",
			
 
				+    "better-scroll": "^1.12.6",
			
 
				+    "less": "^3.0.4",
			
 
				+    "less-loader": "^4.1.0",
			
 
				+    "node-sass": "^4.9.3",
			
 
				+    "qrcodejs2": "^0.0.2",
			
 
				+    "sass-loader": "^7.1.0",
			
 
				+    "vant": "^1.3.0",
			
 
				+    "vue-awesome-swiper": "^3.1.3",
			
 
				+    "vue-router": "^3.0.1",
			
 
				+    "vue-template-compiler": "^2.5.17",
			
 
				+    "vuex": "^3.0.1"
			
 
				+  }
			
 
				+}
			
--- 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 multiple-pages 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/server.js
+++ b/server.js
@@ -0,0 +1,10 @@
 
				+var express = require('express')
			
 
				+var app = express()
			
 
				+
			
 
				+app.use(express.static('./dist'))
			
 
				+
			
 
				+app.get('/', function (req, res) {
			
 
				+  res.send('Hello Vue')
			
 
				+})
			
 
				+
			
 
				+app.listen(2333)
			
--- a/src/common/css/reset.css
+++ b/src/common/css/reset.css
@@ -0,0 +1,72 @@
 
				+@charset "utf-8";

			
 
				+html,body{width:100%;height:100%;-webkit-text-size-adjust:100%;position:relative;color:#333;overflow-x:hidden;font-size:100px;}

			
 
				+@media screen and (max-width:320px){html,body{font-size:85px;}}

			
 
				+@media screen and (min-width:375px){html,body{font-size:100px;}}

			
 
				+@media screen and (min-width:414px){html,body{font-size:110px;}}

			
 
				+*{margin:0;padding:0;color:#000;font-family:"微软雅黑";-webkit-tap-highlight-color:rgba(255,0,0,0);-webkit-font-smoothing:antialiased;}

			
 
				+body *{font-size:.13rem;}

			
 
				+a{text-decoration:none;}

			
 
				+a:hover{cursor:pointer;}

			
 
				+em{font-style:normal;}

			
 
				+li{list-style:none;}

			
 
				+img{border:0;vertical-align:middle;}

			
 
				+table{border-collapse:collapse;border-spacing:0;}

			
 
				+p{word-wrap:break-word;}

			
 
				+b{font-weight:normal;}

			
 
				+input,textarea{border:0;-webkit-appearance:none;}

			
 
				+input[type=input]{-webkit-appearance:none;}

			
 
				+input[type=checkbox]{-webkit-appearance:checkbox;}

			
 
				+.text-overflow-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

			
 
				+.centerLabel{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);}

			
 
				+.flex-h{display:flex;display:-webkit-flex;}

			
 
				+.flex-v{display:flex;display:-webkit-flex;flex-direction:column;-webkit-flex-direction:column;}

			
 
				+.flex-item{flex:1;-webkit-flex:1;position:relative;overflow:hidden;}

			
 
				+*[class*="text-overflowEllipsis-line"]{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;}

			
 
				+.text-overflowEllipsis-line2{-webkit-line-clamp:2;}

			
 
				+.text-overflowEllipsis-line3{-webkit-line-clamp:3;}

			
 
				+.text-overflowEllipsis-line4{-webkit-line-clamp:4;}

			
 
				+*[class*="overflow-scroll-y"]{overflow-x:hidden;overflow-y:scroll;-webkit-overflow-scrolling:touch;}

			
 
				+*[class*="overflow-scroll-x"]{overflow-y:hidden;overflow-x:scroll;-webkit-overflow-scrolling:touch;}

			
 
				+.overflow-scroll-y-3d,.overflow-scroll-x-3d{transform:translateZ(0);-webkit-transform:translateZ(0);}

			
 
				+.overflow-scroll-x::-webkit-scrollbar,.overflow-scroll-x-3d::-webkit-scrollbar{width:0;height:0;color:transparent;display:none;}

			
 
				+input:focus,textarea:focus,select:focus {

			
 
				+    outline:none;

			
 
				+}

			
 
				+textarea{

			
 
				+	resize: none;

			
 
				+}

			
 
				+

			
 
				+select{

			
 
				+	direction: rtl;

			
 
				+}

			
 
				+

			
 
				+select option {

			
 
				+    direction: ltr;

			
 
				+}

			
 
				+

			
 
				+*>img.cover{

			
 
				+	width: 100%;

			
 
				+	height: 100%;

			
 
				+	object-fit: cover;

			
 
				+}

			
 
				+

			
 
				+*>img.contain{

			
 
				+	width: 100%;

			
 
				+	height: 100%;

			
 
				+	object-fit: contain;

			
 
				+}

			
 
				+

			
 
				+.mainPage{

			
 
				+	width: 100%;

			
 
				+	height: 100%;

			
 
				+	position: relative;

			
 
				+	background: #fff;

			
 
				+}

			
 
				+

			
 
				+.van-toast div{

			
 
				+	color: white;

			
 
				+}

			
 
				+

			
 
				+.van-picker{

			
 
				+	z-index: 101;

			
 
				+}
			
--- a/src/common/icon/Artboard.png
+++ b/src/common/icon/Artboard.png
--- a/src/common/icon/Line3.png
+++ b/src/common/icon/Line3.png
--- a/src/common/icon/already.png
+++ b/src/common/icon/already.png
--- a/src/common/icon/bg.jpg
+++ b/src/common/icon/bg.jpg
--- a/src/common/icon/bottomMsg.png
+++ b/src/common/icon/bottomMsg.png
--- a/src/common/icon/cicyle.png
+++ b/src/common/icon/cicyle.png
--- a/src/common/icon/inv.png
+++ b/src/common/icon/inv.png
--- a/src/common/icon/loading.gif
+++ b/src/common/icon/loading.gif
--- a/src/common/icon/logo-t.png
+++ b/src/common/icon/logo-t.png
--- a/src/common/icon/logo.png
+++ b/src/common/icon/logo.png
--- a/src/common/icon/status-icon-1.png
+++ b/src/common/icon/status-icon-1.png
--- a/src/common/icon/status-icon-2.png
+++ b/src/common/icon/status-icon-2.png
--- a/src/common/icon/status-icon-3.png
+++ b/src/common/icon/status-icon-3.png
--- a/src/common/icon/tabBar-icon-1.png
+++ b/src/common/icon/tabBar-icon-1.png
--- a/src/common/icon/tabBar-icon-2.png
+++ b/src/common/icon/tabBar-icon-2.png
--- a/src/common/icon/tabBar-icon-3.png
+++ b/src/common/icon/tabBar-icon-3.png
--- a/src/common/icon/userCenter-icon-1.png
+++ b/src/common/icon/userCenter-icon-1.png
--- a/src/common/icon/userCenter-icon-2.png
+++ b/src/common/icon/userCenter-icon-2.png
--- a/src/common/icon/userCenter-icon-3.png
+++ b/src/common/icon/userCenter-icon-3.png
--- a/src/components/bubble/bubble.vue
+++ b/src/components/bubble/bubble.vue
@@ -0,0 +1,139 @@
 
				+<template>

			
 
				+  <canvas ref="bubble" :width="width" :height="height" :style="style"></canvas>

			
 
				+</template>

			
 
				+

			
 
				+<script type="text/ecmascript-6">

			
 
				+export default {

			
 
				+  props: {

			
 
				+    y: {

			
 
				+      type: Number,

			
 
				+      default: 0

			
 
				+    }

			
 
				+  },

			
 
				+  data () {

			
 
				+    return {

			
 
				+      width: 50,

			
 
				+      height: 80

			
 
				+    }

			
 
				+  },

			
 
				+  computed: {

			
 
				+    distance () {

			
 
				+      return Math.max(0, Math.min(this.y * this.ratio, this.maxDistance))

			
 
				+    },

			
 
				+    style () {

			
 
				+      return `width:${this.width / this.ratio}px;height:${this.height / this.ratio}px`

			
 
				+    }

			
 
				+  },

			
 
				+  created () {

			
 
				+    this.ratio = window.devicePixelRatio

			
 
				+    this.width *= this.ratio

			
 
				+    this.height *= this.ratio

			
 
				+    this.initRadius = 18 * this.ratio

			
 
				+    this.minHeadRadius = 12 * this.ratio

			
 
				+    this.minTailRadius = 5 * this.ratio

			
 
				+    this.initArrowRadius = 10 * this.ratio

			
 
				+    this.minArrowRadius = 6 * this.ratio

			
 
				+    this.arrowWidth = 3 * this.ratio

			
 
				+    this.maxDistance = 40 * this.ratio

			
 
				+    this.initCenterX = 25 * this.ratio

			
 
				+    this.initCenterY = 25 * this.ratio

			
 
				+    this.headCenter = {

			
 
				+      x: this.initCenterX,

			
 
				+      y: this.initCenterY

			
 
				+    }

			
 
				+  },

			
 
				+  mounted () {

			
 
				+    this._draw()

			
 
				+  },

			
 
				+  methods: {

			
 
				+    _draw () {

			
 
				+      const bubble = this.$refs.bubble

			
 
				+      let ctx = bubble.getContext('2d')

			
 
				+      ctx.clearRect(0, 0, bubble.width, bubble.height)

			
 
				+

			
 
				+      this._drawBubble(ctx)

			
 
				+

			
 
				+      this._drawArrow(ctx)

			
 
				+    },

			
 
				+    _drawBubble (ctx) {

			
 
				+      ctx.save()

			
 
				+      ctx.beginPath()

			
 
				+

			
 
				+      const rate = this.distance / this.maxDistance

			
 
				+      const headRadius = this.initRadius - (this.initRadius - this.minHeadRadius) * rate

			
 
				+

			
 
				+      this.headCenter.y = this.initCenterY - (this.initRadius - this.minHeadRadius) * rate

			
 
				+

			
 
				+      // 画上半弧线

			
 
				+      ctx.arc(this.headCenter.x, this.headCenter.y, headRadius, 0, Math.PI, true)

			
 
				+

			
 
				+      // 画左侧贝塞尔

			
 
				+      const tailRadius = this.initRadius - (this.initRadius - this.minTailRadius) * rate

			
 
				+      const tailCenter = {

			
 
				+        x: this.headCenter.x,

			
 
				+        y: this.headCenter.y + this.distance

			
 
				+      }

			
 
				+

			
 
				+      const tailPointL = {

			
 
				+        x: tailCenter.x - tailRadius,

			
 
				+        y: tailCenter.y

			
 
				+      }

			
 
				+      const controlPointL = {

			
 
				+        x: tailPointL.x,

			
 
				+        y: tailPointL.y - this.distance / 2

			
 
				+      }

			
 
				+

			
 
				+      ctx.quadraticCurveTo(controlPointL.x, controlPointL.y, tailPointL.x, tailPointL.y)

			
 
				+

			
 
				+      // 画下半弧线

			
 
				+      ctx.arc(tailCenter.x, tailCenter.y, tailRadius, Math.PI, 0, true)

			
 
				+

			
 
				+      // 画右侧贝塞尔

			
 
				+      const headPointR = {

			
 
				+        x: this.headCenter.x + headRadius,

			
 
				+        y: this.headCenter.y

			
 
				+      }

			
 
				+      const controlPointR = {

			
 
				+        x: tailCenter.x + tailRadius,

			
 
				+        y: headPointR.y + this.distance / 2

			
 
				+      }

			
 
				+      ctx.quadraticCurveTo(controlPointR.x, controlPointR.y, headPointR.x, headPointR.y)

			
 
				+

			
 
				+      ctx.fillStyle = 'rgb(170,170,170)'

			
 
				+      ctx.fill()

			
 
				+      ctx.strokeStyle = 'rgb(153,153,153)'

			
 
				+      ctx.stroke()

			
 
				+      ctx.restore()

			
 
				+    },

			
 
				+    _drawArrow (ctx) {

			
 
				+      ctx.save()

			
 
				+      ctx.beginPath()

			
 
				+

			
 
				+      const rate = this.distance / this.maxDistance

			
 
				+      const arrowRadius = this.initArrowRadius - (this.initArrowRadius - this.minArrowRadius) * rate

			
 
				+

			
 
				+      // 画内圆

			
 
				+      ctx.arc(this.headCenter.x, this.headCenter.y, arrowRadius - (this.arrowWidth - rate), -Math.PI / 2, 0, true)

			
 
				+

			
 
				+      // 画外圆

			
 
				+      ctx.arc(this.headCenter.x, this.headCenter.y, arrowRadius, 0, Math.PI * 3 / 2, false)

			
 
				+

			
 
				+      ctx.lineTo(this.headCenter.x, this.headCenter.y - arrowRadius - this.arrowWidth / 2 + rate)

			
 
				+      ctx.lineTo(this.headCenter.x + this.arrowWidth * 2 - rate * 2, this.headCenter.y - arrowRadius + this.arrowWidth / 2)

			
 
				+

			
 
				+      ctx.lineTo(this.headCenter.x, this.headCenter.y - arrowRadius + this.arrowWidth * 3 / 2 - rate)

			
 
				+

			
 
				+      ctx.fillStyle = 'rgb(255,255,255)'

			
 
				+      ctx.fill()

			
 
				+      ctx.strokeStyle = 'rgb(170,170,170)'

			
 
				+      ctx.stroke()

			
 
				+      ctx.restore()

			
 
				+    }

			
 
				+  },

			
 
				+  watch: {

			
 
				+    y () {

			
 
				+      this._draw()

			
 
				+    }

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
--- a/src/components/calcMenu/index.vue
+++ b/src/components/calcMenu/index.vue
@@ -0,0 +1,77 @@
 
				+<template>

			
 
				+  <div class="calcMenu" :class="{'show':show}">

			
 
				+    <div class="centerLabel flex-h">

			
 
				+      <div class="flex-item">

			
 
				+        <div>

			
 
				+          <div class="top">

			
 
				+            <span>确认下单信息</span>

			
 
				+            <span>下单完成后共计使用<em>{{totalNum}}</em>次</span>

			
 
				+          </div>

			
 
				+          <div class="content">

			
 
				+            <span v-if="!data.length">您还没有点单哦~</span>  

			
 
				+            <ul>

			
 
				+              <li class="flex-h" v-for="(item,index) in data" :key="index">

			
 
				+                <span>{{item.name}}</span>

			
 
				+                <span v-if="item.specName !== null">（{{item.specName}}）</span>

			
 
				+                <div class="flex-item">

			
 
				+                  <div>

			
 
				+                    <span>x{{item.defaultNum === null ? item.num : item.defaultNum}}</span>

			
 
				+                  </div>

			
 
				+                </div>

			
 
				+              </li>

			
 
				+            </ul>

			
 
				+          </div>

			
 
				+          <div class="bottom">

			
 
				+            <div class="flex-h" v-if="data.length">

			
 
				+              <span>备注：</span>

			
 
				+              <div class="flex-item">

			
 
				+                <div>

			
 
				+                  <textarea cols="30" rows="3"></textarea>

			
 
				+                </div>

			
 
				+              </div>

			
 
				+            </div>

			
 
				+            <ul class="flex-h">

			
 
				+              <li class="flex-item" @click="close">再看看</li>

			
 
				+              <li class="flex-item" @click="placeOrder">下单</li>

			
 
				+            </ul>

			
 
				+          </div>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+    </div>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+

			
 
				+export default {

			
 
				+  name: '',

			
 
				+  props: ['show', 'data', 'totalNum'],

			
 
				+  data () {

			
 
				+    return {

			
 
				+

			
 
				+    }

			
 
				+  },

			
 
				+  computed: {

			
 
				+

			
 
				+  },

			
 
				+  components: {

			
 
				+

			
 
				+  },

			
 
				+  created () {

			
 
				+

			
 
				+  },

			
 
				+  methods: {

			
 
				+    close () { // 关闭菜单

			
 
				+      this.$emit('closeCalcMenu')

			
 
				+    },

			
 
				+    placeOrder () { // 点单

			
 
				+      this.$emit('placeOrder')

			
 
				+    },

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->

			
 
				+<style lang="scss" scoped>

			
 
				+@import "page.scss";

			
 
				+</style>

			
--- a/src/components/calcMenu/page.scss
+++ b/src/components/calcMenu/page.scss
@@ -0,0 +1,148 @@
 
				+.calcMenu{

			
 
				+  width: 100%;

			
 
				+  position: absolute;

			
 
				+  left: 0;

			
 
				+  bottom: 0;

			
 
				+  top: 0;

			
 
				+  background: rgba(0, 0, 0, .5);

			
 
				+  z-index: 500;

			
 
				+  display: none;

			
 
				+  &.show{

			
 
				+    display: block;

			
 
				+  }

			
 
				+  &>div{

			
 
				+    width: 3.2rem;

			
 
				+    border-radius: .1rem;

			
 
				+    background: #fff;

			
 
				+    position: absolute;

			
 
				+    overflow: hidden;

			
 
				+    &>div{

			
 
				+      margin: 0 .2rem;

			
 
				+      &>div{

			
 
				+        width: 100%;

			
 
				+        position: relative;

			
 
				+        overflow: hidden;

			
 
				+        .top{

			
 
				+          width: 100%;

			
 
				+          position: relative;

			
 
				+          overflow: hidden;

			
 
				+          margin: .1rem auto 0;

			
 
				+          padding-bottom: .05rem;

			
 
				+          border-bottom: .01rem solid #eee;

			
 
				+          span{

			
 
				+            width: 100%;

			
 
				+            display: block;

			
 
				+            text-align: center;

			
 
				+            font-size: .11rem;

			
 
				+            color: #666;

			
 
				+            line-height: .22rem;

			
 
				+            &:first-child{

			
 
				+              line-height: .26rem;

			
 
				+              font-size: .15rem;

			
 
				+              color: #333;

			
 
				+            }

			
 
				+            em{

			
 
				+              color: #f1644b;

			
 
				+              font-size: .11rem;

			
 
				+            }

			
 
				+          }

			
 
				+        }

			
 
				+        .content{

			
 
				+          width: 100%;

			
 
				+          max-height: 2rem;

			
 
				+          position: relative;

			
 
				+          overflow-y: scroll;

			
 
				+          -webkit-overflow-scrolling: touch;

			
 
				+          transform: translateZ(0);

			
 
				+          -webkit-transform: translateZ(0);

			
 
				+          border-bottom: .01rem solid #eee;

			
 
				+          padding-bottom: .1rem;

			
 
				+          &>span{

			
 
				+            width: 100%;

			
 
				+            display: block;

			
 
				+            line-height: .4rem;

			
 
				+            text-align: center;

			
 
				+            font-size: .15rem;

			
 
				+            color: #ccc;

			
 
				+          }

			
 
				+          ul{

			
 
				+            margin: .1rem auto 0;

			
 
				+            li{

			
 
				+              &>*{

			
 
				+                line-height: .34rem;

			
 
				+                font-size: .14rem;

			
 
				+                &:first-child{

			
 
				+                  width: 30%;

			
 
				+                  text-align: center;

			
 
				+                }

			
 
				+                &:nth-child(2){

			
 
				+                  font-size: .11rem;

			
 
				+                  color: #666;

			
 
				+                }

			
 
				+              }

			
 
				+              &>div{

			
 
				+                margin-right: .2rem;

			
 
				+                &>div{

			
 
				+                  width: 100%;

			
 
				+                  position: relative;

			
 
				+                  overflow: hidden;

			
 
				+                  span{

			
 
				+                    width: 100%;

			
 
				+                    display: block;

			
 
				+                    text-align: right;

			
 
				+                    font-size: .14rem;

			
 
				+                    color: #666;

			
 
				+                  }

			
 
				+                }

			
 
				+              }

			
 
				+            }

			
 
				+          }

			
 
				+        }

			
 
				+        .bottom{

			
 
				+          margin: .1rem auto 0;

			
 
				+          &>div.flex-h{

			
 
				+            align-items: flex-start;

			
 
				+            &>span{

			
 
				+              line-height: .2rem;

			
 
				+              font-size: .13rem;

			
 
				+              color: #666;

			
 
				+            }

			
 
				+            &>div{

			
 
				+              &>div{

			
 
				+                width: 100%;

			
 
				+                position: relative;

			
 
				+                overflow: hidden;

			
 
				+                textarea{

			
 
				+                  width: 100%;

			
 
				+                  line-height: .2rem;

			
 
				+                  font-size: .13rem;

			
 
				+                  color: #666;

			
 
				+                }

			
 
				+              }

			
 
				+            }

			
 
				+          }

			
 
				+          ul{

			
 
				+            width: 100%;

			
 
				+            position: relative;

			
 
				+            overflow: hidden;

			
 
				+            margin-bottom: .25rem;

			
 
				+            li{

			
 
				+              line-height: .36rem;

			
 
				+              border: .01rem solid #333;

			
 
				+              padding: 0 .15rem;

			
 
				+              font-size: .15rem;

			
 
				+              border-radius: .04rem;

			
 
				+              text-align: center;

			
 
				+              &:nth-child(1){

			
 
				+                margin-right: .1rem;

			
 
				+              }

			
 
				+              &:nth-child(2){

			
 
				+                margin-left: .1rem;

			
 
				+              }

			
 
				+            }

			
 
				+          }

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+}

			
--- a/src/components/caseTableItem/index.vue
+++ b/src/components/caseTableItem/index.vue
@@ -0,0 +1,49 @@
 
				+<template>

			
 
				+  <div class="caseTableItem flex-h">

			
 
				+    <i class="iconfont icon-yinchenglogo"></i>

			
 
				+    <div class="itemNo">

			
 
				+      <a>

			
 
				+        <div class="centerLabel">

			
 
				+          <i v-if="String(index + 1).length < 2" class="iconfont icon-0"></i>

			
 
				+          <i class="iconfont" v-for="(numItem,numIndex) in String(index + 1).length" :key="numIndex" :class="'icon-' + String(index + 1).substring(numIndex, numIndex + 1)"></i>

			
 
				+        </div>

			
 
				+      </a>

			
 
				+    </div>

			
 
				+    <div class="flex-item">

			
 
				+      <div>

			
 
				+        <span>案场一号桌</span>

			
 
				+        <router-link :to="{name: 'placeOrder', query: {}}">选择点单</router-link>

			
 
				+      </div>

			
 
				+    </div>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+

			
 
				+export default {

			
 
				+  name: '',

			
 
				+  props: ['item','index'],

			
 
				+  data () {

			
 
				+    return {

			
 
				+      

			
 
				+    }

			
 
				+  },

			
 
				+  computed: {

			
 
				+    

			
 
				+  },

			
 
				+  components: {

			
 
				+    

			
 
				+  },

			
 
				+  created () {

			
 
				+    

			
 
				+  },

			
 
				+  methods: {

			
 
				+    

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->

			
 
				+<style lang="scss" scoped>

			
 
				+@import "page.scss";

			
 
				+</style>

			
--- a/src/components/caseTableItem/page.scss
+++ b/src/components/caseTableItem/page.scss
@@ -0,0 +1,69 @@
 
				+.caseTableItem{

			
 
				+  width: 100%;

			
 
				+  position: relative;

			
 
				+  overflow: hidden;

			
 
				+  align-items: center;

			
 
				+  &>i{

			
 
				+    display: inline-block;

			
 
				+    position: absolute;

			
 
				+    right: .1rem;

			
 
				+    top: .05rem;

			
 
				+    font-size: .36rem;

			
 
				+    z-index: 1;

			
 
				+    color: rgba(255, 0, 0, .1);

			
 
				+  }

			
 
				+  .itemNo{

			
 
				+    width: .44rem;

			
 
				+    position: relative;

			
 
				+    overflow: hidden;

			
 
				+    margin-left: .15rem;

			
 
				+    z-index: 2;

			
 
				+    a{

			
 
				+      width: 100%;

			
 
				+      display: block;

			
 
				+      padding-bottom: 100%;

			
 
				+      box-sizing: border-box;

			
 
				+      border: .01rem solid #eee;

			
 
				+      border-radius: 100%;

			
 
				+      position: relative;

			
 
				+      overflow: hidden;

			
 
				+      div{

			
 
				+        width: 100%;

			
 
				+        text-align: center;

			
 
				+        font-size: 0;

			
 
				+        white-space: nowrap;

			
 
				+        i{

			
 
				+          display: inline-block;

			
 
				+          font-size: .13rem;

			
 
				+          color: #666;

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+  &>div.flex-item{

			
 
				+    margin: 0 .1rem;

			
 
				+    position: relative;

			
 
				+    overflow: hidden;

			
 
				+    z-index: 2;

			
 
				+    &>div{

			
 
				+      width: 100%;

			
 
				+      position: relative;

			
 
				+      overflow: hidden;

			
 
				+      span{

			
 
				+        width: 100%;

			
 
				+        display: block;

			
 
				+        overflow: hidden;

			
 
				+        text-overflow: ellipsis;

			
 
				+        white-space: nowrap;

			
 
				+        font-size: .13rem;

			
 
				+        color: #666;

			
 
				+        line-height: .24rem;

			
 
				+      }

			
 
				+      a{

			
 
				+        line-height: .22rem;

			
 
				+        color: #fb6b2f;

			
 
				+        font-size: .13rem;

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+}
			
--- a/src/components/courseItem/index.vue
+++ b/src/components/courseItem/index.vue
@@ -0,0 +1,66 @@
 
				+<template>

			
 
				+  <div class="courseItem flex-h">

			
 
				+    <div class="img">

			
 
				+      <a>

			
 
				+        <img :src="data.img" class="centerLabel cover" alt="">

			
 
				+      </a>

			
 
				+    </div>

			
 
				+    <div class="flex-item flex-v">

			
 
				+      <div class="flex-item">

			
 
				+        <div class="content">

			
 
				+          <div class="title flex-h">

			
 
				+            <div class="flex-item">

			
 
				+              <span>{{data.title}}</span>

			
 
				+            </div>

			
 
				+            <div v-if="data.getWay=='ticket'">

			
 
				+              <span>{{data.defaultPrice}}</span><br>

			
 
				+              <span>优惠券体验</span>

			
 
				+            </div>

			
 
				+          </div>

			
 
				+          <span>时间：{{data.time}}</span>

			
 
				+          <span>地点：{{data.address}}</span>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+      <ul v-if="data.getWay=='ticket'">

			
 
				+        <li v-for="(item,index) in data.tag" :key="index">{{item}}</li>

			
 
				+      </ul>

			
 
				+      <div v-if="data.getWay=='free'" class="flex-h">

			
 
				+        <div class="flex-item">

			
 
				+          <i class="iconfont icon-kecheng"></i>

			
 
				+          <span>团体课</span>  

			
 
				+        </div>

			
 
				+        <span>免费体验</span>

			
 
				+      </div>

			
 
				+    </div>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+

			
 
				+export default {

			
 
				+  name: '',

			
 
				+  props: ['data'],

			
 
				+  data () {

			
 
				+    return {

			
 
				+      

			
 
				+    }

			
 
				+  },

			
 
				+  computed: {

			
 
				+    

			
 
				+  },

			
 
				+  components: {

			
 
				+    

			
 
				+  },

			
 
				+  created () {

			
 
				+    

			
 
				+  },

			
 
				+  methods: {

			
 
				+    

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->

			
 
				+<style lang="scss" scoped>

			
 
				+@import "page.scss";

			
 
				+</style>

			
--- a/src/components/courseItem/page.scss
+++ b/src/components/courseItem/page.scss
@@ -0,0 +1,94 @@
 
				+.courseItem{

			
 
				+  .img{

			
 
				+    width: .8rem;

			
 
				+    position: relative;

			
 
				+    overflow: hidden;

			
 
				+    a{

			
 
				+      width: 100%;

			
 
				+      padding-bottom: 125%;

			
 
				+      display: block;

			
 
				+      background: #eee;

			
 
				+      border-radius: .06rem;

			
 
				+      position: relative;

			
 
				+      overflow: hidden;

			
 
				+    }

			
 
				+  }

			
 
				+  &>div.flex-item{

			
 
				+    position: relative;

			
 
				+    overflow: hidden;

			
 
				+    margin-left: .15rem;

			
 
				+    &>div.flex-item{

			
 
				+      .title{

			
 
				+        align-items: center;

			
 
				+        &>.flex-item{

			
 
				+          span{

			
 
				+            width: 100%;

			
 
				+            font-size: .15rem;

			
 
				+            display: block;

			
 
				+            white-space: nowrap;

			
 
				+            text-overflow: ellipsis;

			
 
				+            color: #323b45;

			
 
				+          }

			
 
				+          &+div{

			
 
				+            text-align: right;

			
 
				+            *{

			
 
				+              display: inline-block;

			
 
				+              line-height: .14rem;

			
 
				+              font-size: .11rem;

			
 
				+              color: #ff1414;

			
 
				+            }

			
 
				+            &>*:first-child{

			
 
				+              text-decoration: line-through;

			
 
				+              color: #ccc;

			
 
				+            }

			
 
				+          }

			
 
				+        }

			
 
				+      }

			
 
				+      &>div.content{

			
 
				+        &>span{

			
 
				+          width: 100%;

			
 
				+          display: block;

			
 
				+          line-height: .16rem;

			
 
				+          font-size: .11rem;

			
 
				+          color: #565656;

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+    &>ul{

			
 
				+      white-space: nowrap;

			
 
				+      font-size: 0;

			
 
				+      li{

			
 
				+        display: inline-block;

			
 
				+        line-height: .2rem;

			
 
				+        background: #f2f4f7;

			
 
				+        color: #92a7c9;

			
 
				+        font-size: .11rem;

			
 
				+        margin-right: .05rem;

			
 
				+        padding: 0 .05rem;

			
 
				+        border-radius: .04rem;

			
 
				+      }

			
 
				+    }

			
 
				+    &>div.flex-h{

			
 
				+      div{

			
 
				+        font-size: 0;

			
 
				+        white-space: nowrap;

			
 
				+        *{

			
 
				+          font-size: .11rem;

			
 
				+          vertical-align: middle;

			
 
				+          line-height: .2rem;

			
 
				+          display: inline-block;

			
 
				+          margin-right: .05rem;

			
 
				+          color: #fa2a00;

			
 
				+        }

			
 
				+        i{

			
 
				+          font-size: .13rem;

			
 
				+        }

			
 
				+      }

			
 
				+      &>span{

			
 
				+        line-height: .2rem;

			
 
				+        color: #fa2a00;

			
 
				+        font-size: .11rem;

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+}
			
--- a/src/components/customerCard/customerCard.vue
+++ b/src/components/customerCard/customerCard.vue
@@ -0,0 +1,99 @@
 
				+<template>

			
 
				+  <div class="card-content">

			
 
				+    <div class="card-top flex-h">

			
 
				+      <div class="flex-h">

			
 
				+        <img :src="inv" alt="">

			
 
				+        <div>

			
 
				+          <span>姓名：王丽丽</span>

			
 
				+          <span>手机号:17372957078</span>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+      <div>

			
 
				+        <div>领取记录</div>

			
 
				+        <div>历史备注</div>

			
 
				+      </div>

			
 
				+    </div>

			
 
				+    <div class="card-bottom">

			
 
				+      <span>备注：老客户，人非常好。</span>

			
 
				+      <span>+ 添加备注</span>

			
 
				+    </div>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+import inv from '../../common/icon/inv.png'

			
 
				+export default {

			
 
				+  name: 'myCard',

			
 
				+  data () {

			
 
				+    return {

			
 
				+      inv

			
 
				+    }

			
 
				+  },

			
 
				+  props: {

			
 
				+    data: {

			
 
				+      type: Object,

			
 
				+      default: () => { }

			
 
				+    }

			
 
				+  },

			
 
				+  methods: {

			
 
				+    share () {

			
 
				+      this.$emit('share', this.data)

			
 
				+    }

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<style lang="scss" scoped>

			
 
				+.card-content {

			
 
				+  box-shadow: 0px 2px 0.1rem 0px rgba(193, 204, 217, 0.5);

			
 
				+  border-radius: 0.08rem;

			
 
				+  overflow: hidden;

			
 
				+  margin-bottom: 0.2rem;

			
 
				+  .card-top {

			
 
				+    padding: 0.3rem 0.1rem;

			
 
				+    > div:nth-of-type(1) {

			
 
				+      align-items: center;

			
 
				+      img {

			
 
				+        width: 0.5rem;

			
 
				+        height: 0.5rem;

			
 
				+        border-radius: 50%;

			
 
				+        padding-right: 0.2rem;

			
 
				+      }

			
 
				+      div {

			
 
				+        span {

			
 
				+          display: block;

			
 
				+          padding: .02rem 0;

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+    > div:nth-of-type(2) {

			
 
				+      display: flex;

			
 
				+      flex-flow: column nowrap;

			
 
				+      align-items: center;

			
 
				+      justify-content: center;

			
 
				+      flex: 1;

			
 
				+      padding-left: .15rem;

			
 
				+      div{

			
 
				+        color: #FC6243;

			
 
				+        font-size: .12rem;

			
 
				+        padding: 0.02rem .15rem;

			
 
				+        border: 1px solid #FC6243;

			
 
				+        border-radius: 20px;

			
 
				+        margin: 0.05rem 0;

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+  .card-bottom{

			
 
				+    background: #F2F2F2;

			
 
				+    display: flex;

			
 
				+    padding: .15rem;

			
 
				+    justify-content: space-between;

			
 
				+    span:nth-of-type(1){

			
 
				+      color: #323645;

			
 
				+    }

			
 
				+    span:nth-of-type(2){

			
 
				+      color: #909090;

			
 
				+    }

			
 
				+  }

			
 
				+}

			
 
				+</style>

			
--- a/src/components/discounts/discounts.vue
+++ b/src/components/discounts/discounts.vue
@@ -0,0 +1,161 @@
 
				+<template>

			
 
				+  <div class="discounts">

			
 
				+    <div class="flex-h" :class="{'opacity' : data.useType == '已失效' || data.useType == '已使用', 'gray': data.useType == '已使用'}" @click="toDetail">

			
 
				+      <div class="card-left">

			
 
				+        <div class="title">

			
 
				+          <i class="iconfont icon-youhuiquan"></i>

			
 
				+          <div>{{data.title}}</div>

			
 
				+        </div>

			
 
				+        <div class="desc">{{data.desc}}</div>

			
 
				+        <div class="time">有效期至{{data.time}}</div>

			
 
				+      </div>

			
 
				+      <div class="card-right">

			
 
				+        <img :src="logo" alt="" width="100%" height="100%">

			
 
				+        <div class="btn" @click.stop="toUse" v-if="data.useType == '未使用'">去使用</div>

			
 
				+      </div>

			
 
				+      <div class="tag" :class="{'gray-location' : data.useType == '已使用'}">

			
 
				+        <span>{{data.tag}}</span>

			
 
				+      </div>

			
 
				+    </div>

			
 
				+    <div class="useType">

			
 
				+      <img :src="used" alt="已使用" v-if="data.useType == '已使用'" width="100%" height="100%">

			
 
				+      <img :src="failure" alt="已失效" v-if="data.useType == '已失效'" width="100%" height="100%">

			
 
				+    </div>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+import logo from '../../common/icon/logo-t.png'

			
 
				+import used from '../../common/icon/already.png'

			
 
				+import failure from '../../common/icon/inv.png'

			
 
				+export default {

			
 
				+  props: ['data'],

			
 
				+  data () {

			
 
				+    return {

			
 
				+      logo,

			
 
				+      used,

			
 
				+      failure

			
 
				+    }

			
 
				+  },

			
 
				+  methods: {

			
 
				+    toUse () {

			
 
				+      this.$emit('toUse', this.data)

			
 
				+    },

			
 
				+    toDetail () {

			
 
				+      this.$emit('toDetail', this.data)

			
 
				+    }

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<style lang="scss" scoped>

			
 
				+.discounts {

			
 
				+  padding: 0.15rem 0.2rem;

			
 
				+  box-sizing: border-box;

			
 
				+  background: rgba(255, 255, 255, 1);

			
 
				+  box-shadow: 0px 2px 0.1rem 0px rgba(193, 204, 217, 0.5);

			
 
				+  border-radius: 0.08rem;

			
 
				+  margin-bottom: 0.2rem;

			
 
				+  position: relative;

			
 
				+  overflow: hidden;

			
 
				+  .flex-h {

			
 
				+    &.opacity {

			
 
				+      opacity: 0.5;

			
 
				+    }

			
 
				+    &.gray {

			
 
				+      filter: grayscale(100%);

			
 
				+    }

			
 
				+    .card-left {

			
 
				+      flex: 1;

			
 
				+      display: flex;

			
 
				+      flex-flow: column nowrap;

			
 
				+      .title {

			
 
				+        display: flex;

			
 
				+        align-items: center;

			
 
				+        i {

			
 
				+          padding-right: 0.08rem;

			
 
				+          color: #ff7c1c;

			
 
				+          font-weight: bold;

			
 
				+          font-size: 0.2rem;

			
 
				+        }

			
 
				+        div {

			
 
				+          font-size: 0.16rem;

			
 
				+          font-weight: bold;

			
 
				+          color: rgba(50, 54, 69, 1);

			
 
				+        }

			
 
				+      }

			
 
				+      .desc {

			
 
				+        flex: 1;

			
 
				+        display: flex;

			
 
				+        align-items: center;

			
 
				+        font-size: 0.12rem;

			
 
				+        color: rgba(128, 128, 128, 1);

			
 
				+      }

			
 
				+      .time {

			
 
				+        font-size: 0.12rem;

			
 
				+        color: rgba(128, 128, 128, 1);

			
 
				+      }

			
 
				+    }

			
 
				+    .card-right {

			
 
				+      width: 0.9rem;

			
 
				+      height: 0.9rem;

			
 
				+      position: relative;

			
 
				+      .btn {

			
 
				+        position: absolute;

			
 
				+        top: 50%;

			
 
				+        left: 50%;

			
 
				+        transform: translate(-25%, -50%);

			
 
				+        color: #ff7c1c;

			
 
				+        width: 0.62rem;

			
 
				+        text-align: center;

			
 
				+        padding-bottom: 0.02rem;

			
 
				+        border: 1px solid #ff7c1c;

			
 
				+        border-radius: 0.2rem;

			
 
				+        z-index: 2;

			
 
				+      }

			
 
				+    }

			
 
				+

			
 
				+    .tag {

			
 
				+      position: absolute;

			
 
				+      background: linear-gradient(

			
 
				+        45deg,

			
 
				+        rgba(255, 105, 0, 1) 0%,

			
 
				+        rgba(255, 136, 0, 0.76) 100%

			
 
				+      );

			
 
				+      opacity: 0.85;

			
 
				+      width: 0.6rem;

			
 
				+      height: 0.6rem;

			
 
				+      transform: rotate(45deg);

			
 
				+      bottom: -0.3rem;

			
 
				+      right: -0.3rem;

			
 
				+      &.gray-location {

			
 
				+        background: rgba(189, 189, 189, 1);

			
 
				+      }

			
 
				+      span {

			
 
				+        position: absolute;

			
 
				+        top: 0.22rem;

			
 
				+        left: -0.03rem;

			
 
				+        font-size: 0.12rem;

			
 
				+        color: #fff;

			
 
				+        transform: rotate(-90deg);

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+  .useType {

			
 
				+    position: absolute;

			
 
				+    bottom: 0.25rem;

			
 
				+    right: 0.25rem;

			
 
				+    width: 0.76rem;

			
 
				+    height: 0.76rem;

			
 
				+  }

			
 
				+}

			
 
				+

			
 
				+@media screen and (max-width: 320px) {

			
 
				+  .tag {

			
 
				+    span {

			
 
				+      top: 0.2rem !important;

			
 
				+      left: -0.05rem !important;

			
 
				+    }

			
 
				+  }

			
 
				+}

			
 
				+</style>

			
--- a/src/components/loading/loading.gif
+++ b/src/components/loading/loading.gif
--- a/src/components/loading/loading.vue
+++ b/src/components/loading/loading.vue
@@ -0,0 +1,20 @@
 
				+<template>

			
 
				+  <div class="mf-loading-container">

			
 
				+    <img src="./loading.gif">

			
 
				+  </div>

			
 
				+</template>

			
 
				+<script type="text/ecmascript-6">

			
 
				+const COMPONENT_NAME = 'loading'

			
 
				+export default {

			
 
				+  name: COMPONENT_NAME

			
 
				+}

			
 
				+</script>

			
 
				+<style lang="scss" scoped>

			
 
				+.mf-loading-container {

			
 
				+  img {

			
 
				+    width: 20px;

			
 
				+    height: 20px;

			
 
				+    display: block;

			
 
				+  }

			
 
				+}

			
 
				+</style>

			
--- a/src/components/myCard/myCard.vue
+++ b/src/components/myCard/myCard.vue
@@ -0,0 +1,154 @@
 
				+<template>

			
 
				+  <div class="card-content flex-l" :class="{invalid: data.invalid}">

			
 
				+    <div class="card-top flex-h">

			
 
				+      <div>

			
 
				+        <img :src="logo" class="logo">

			
 
				+        <span>￥ <span> 9999 </span> 元</span>

			
 
				+        <img :src="line3" class="line3">

			
 
				+      </div>

			
 
				+      <div>

			
 
				+        <h2>咖啡团课一次体验卡</h2>

			
 
				+        <span>可在银城会所健身房体验私教课一次</span>

			
 
				+        <span>2018年02月17日-2018年3月17日</span>

			
 
				+      </div>

			
 
				+    </div>

			
 
				+    <div class="card-main flex-h">

			
 
				+      <img :src="line">

			
 
				+      <div class="flex-h">

			
 
				+        <span>总数量</span>

			
 
				+        <span>40</span>

			
 
				+      </div>

			
 
				+      <div>

			
 
				+        <span>总剩余</span>

			
 
				+        <span>40</span>

			
 
				+      </div>

			
 
				+      <div>

			
 
				+        <span>用户领取</span>

			
 
				+        <span>40</span>

			
 
				+      </div>

			
 
				+      <div>

			
 
				+        <span>用户使用</span>

			
 
				+        <span>40</span>

			
 
				+      </div>

			
 
				+    </div>

			
 
				+    <div class="card-bottom" @click.stop="share">

			
 
				+      分享卡券

			
 
				+    </div>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+import logo from '../../common/icon/logo-t.png'

			
 
				+import line from '../../common/icon/cicyle.png'

			
 
				+import line3 from '../../common/icon/Line3.png'

			
 
				+export default {

			
 
				+  name: 'myCard',

			
 
				+  data () {

			
 
				+    return {

			
 
				+      logo,

			
 
				+      line,

			
 
				+      line3

			
 
				+    }

			
 
				+  },

			
 
				+  props: {

			
 
				+    data: {

			
 
				+      type: Object,

			
 
				+      default: () => { }

			
 
				+    }

			
 
				+  },

			
 
				+  methods: {

			
 
				+    share () {

			
 
				+      this.$emit('share', this.data)

			
 
				+    }

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<style lang="scss" scoped>

			
 
				+.card-content {

			
 
				+  box-shadow: 0px 2px 0.1rem 0px rgba(193, 204, 217, 0.5);

			
 
				+  border-radius: 0.08rem;

			
 
				+  overflow: hidden;

			
 
				+  margin-bottom: 0.2rem;

			
 
				+  &.invalid {

			
 
				+    filter: grayscale(100%);

			
 
				+  }

			
 
				+  .card-top {

			
 
				+    height: 0.88rem;

			
 
				+    padding: 0.1rem;

			
 
				+    box-sizing: border-box;

			
 
				+    div:nth-of-type(1) {

			
 
				+      width: 1.2rem;

			
 
				+      position: relative;

			
 
				+      .logo {

			
 
				+        width: 85%;

			
 
				+        position: absolute;

			
 
				+      }

			
 
				+      .line3 {

			
 
				+        height: 80%;

			
 
				+        position: absolute;

			
 
				+        right: 0.15rem;

			
 
				+        top: 10%;

			
 
				+      }

			
 
				+      > span {

			
 
				+        color: #fc6243;

			
 
				+        position: absolute;

			
 
				+        top: 50%;

			
 
				+        left: 40%;

			
 
				+        transform: translate(-50%, -50%);

			
 
				+        font-size: 0.14rem;

			
 
				+        display: flex;

			
 
				+        align-items: baseline;

			
 
				+        span {

			
 
				+          color: #fc6243;

			
 
				+          font-size: 0.26rem;

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+    div:nth-of-type(2) {

			
 
				+      flex: 1;

			
 
				+      h2 {

			
 
				+        font-size: 0.16rem;

			
 
				+      }

			
 
				+      span {

			
 
				+        display: block;

			
 
				+        color: #323645;

			
 
				+        font-size: 12px;

			
 
				+        padding-top: 0.03rem;

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+  .card-main {

			
 
				+    position: relative;

			
 
				+    img {

			
 
				+      width: 100%;

			
 
				+      position: absolute;

			
 
				+      top: 0;

			
 
				+      left: 0;

			
 
				+    }

			
 
				+    div {

			
 
				+      flex: 1;

			
 
				+      display: flex;

			
 
				+      flex-flow: column nowrap;

			
 
				+      justify-content: center;

			
 
				+      align-items: center;

			
 
				+      padding-top: 0.15rem;

			
 
				+      span:nth-of-type(1) {

			
 
				+        font-size: 0.12rem;

			
 
				+        color: #323645;

			
 
				+      }

			
 
				+      span:nth-of-type(2) {

			
 
				+        font-size: 0.12rem;

			
 
				+        color: #fc6243;

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+  .card-bottom {

			
 
				+    padding: 0.1rem;

			
 
				+    margin-top: 0.1rem;

			
 
				+    background-color: #fc6243;

			
 
				+    text-align: center;

			
 
				+    color: #fff;

			
 
				+  }

			
 
				+}

			
 
				+</style>

			
--- a/src/components/newsItem/index.vue
+++ b/src/components/newsItem/index.vue
@@ -0,0 +1,47 @@
 
				+<template>

			
 
				+  <div class="newsItem flex-h" @click="jump">

			
 
				+    <div class="img">

			
 
				+      <a><img :src="data.ImageUrl" class="centerLabel cover" alt=""></a>

			
 
				+    </div>

			
 
				+    <div class="flex-item flex-v">

			
 
				+      <div class="flex-item">

			
 
				+        <div>

			
 
				+          <span>{{data.Title}}</span>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+      <span>{{toolClass.dateFormat(data.CreateDate)}}</span>

			
 
				+    </div>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+

			
 
				+export default {

			
 
				+  name: '',

			
 
				+  props: ['data'],

			
 
				+  data () {

			
 
				+    return {

			
 
				+      

			
 
				+    }

			
 
				+  },

			
 
				+  computed: {

			
 
				+    

			
 
				+  },

			
 
				+  components: {

			
 
				+    

			
 
				+  },

			
 
				+  created () {

			
 
				+    

			
 
				+  },

			
 
				+  methods: {

			
 
				+    jump () {

			
 
				+      this.$emit('jump', this.data)

			
 
				+    }

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->

			
 
				+<style lang="scss" scoped>

			
 
				+@import "page.scss";

			
 
				+</style>

			
--- a/src/components/newsItem/page.scss
+++ b/src/components/newsItem/page.scss
@@ -0,0 +1,46 @@
 
				+.newsItem{

			
 
				+  width: 100%;

			
 
				+  position: relative;

			
 
				+  overflow: hidden;

			
 
				+  padding: .15rem 0;

			
 
				+  .img{

			
 
				+    width: .86rem;

			
 
				+    position: relative;

			
 
				+    overflow: hidden;

			
 
				+    margin-right: .1rem;

			
 
				+    a{

			
 
				+      width: 100%;

			
 
				+      display: block;

			
 
				+      padding-bottom: 60%;

			
 
				+      background: #eee;

			
 
				+      border-radius: .04rem;

			
 
				+      position: relative;

			
 
				+      overflow: hidden;

			
 
				+    }

			
 
				+  }

			
 
				+  &>div.flex-item{

			
 
				+    div{

			
 
				+      div{

			
 
				+        width: 100%;

			
 
				+        position: relative;

			
 
				+        overflow: hidden;

			
 
				+        span{

			
 
				+          width: 100%;

			
 
				+          line-height: .18rem;

			
 
				+          font-size: .14rem;

			
 
				+          display: block;

			
 
				+          overflow: hidden;

			
 
				+          white-space: nowrap;

			
 
				+          text-overflow: ellipsis;

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+    &>span{

			
 
				+      width: 100%;

			
 
				+      line-height: .14rem;

			
 
				+      font-size: .1rem;

			
 
				+      display: block;

			
 
				+      color: #b0b0b0;

			
 
				+    }

			
 
				+  }

			
 
				+}
			
--- a/src/components/noMore/noMore.vue
+++ b/src/components/noMore/noMore.vue
@@ -0,0 +1,27 @@
 
				+<template>

			
 
				+  <div class="nomore">

			
 
				+    <img :src="bottomImg" alt="">

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+import bottomImg from '../../common/icon/bottomMsg.png'

			
 
				+export default {

			
 
				+  data () {

			
 
				+    return {

			
 
				+      bottomImg

			
 
				+    }

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<style lang="scss" scoped>

			
 
				+.nomore{

			
 
				+  img{

			
 
				+    width: 100%;

			
 
				+    position: absolute;

			
 
				+    top: 40%;

			
 
				+    transform: translateX(-50%);

			
 
				+  }

			
 
				+}

			
 
				+</style>

			
--- a/src/components/orderItem/index.vue
+++ b/src/components/orderItem/index.vue
@@ -0,0 +1,86 @@
 
				+<template>

			
 
				+  <div class="orderItem flex-h">

			
 
				+    <div class="img">

			
 
				+      <a>

			
 
				+        <img src="" class="centerLabel cover" alt="">

			
 
				+      </a>

			
 
				+    </div>

			
 
				+    <div class="content flex-item flex-v">

			
 
				+      <div class="flex-item">

			
 
				+        <div>

			
 
				+          <span>{{data.name}}</span>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+      <div class="flex-h">

			
 
				+        <div class="flex-item">

			
 
				+          <div>

			
 
				+            <span>￥{{data.price}}</span>

			
 
				+          </div>

			
 
				+        </div>

			
 
				+        <i class="iconfont icon-jian" @click="subtract" v-if="!data.spec.length && data.status === 1"></i>

			
 
				+        <input v-if="!data.spec.length && data.status === 1" type="tel" @input="input" v-model="defaultNum">

			
 
				+        <i class="iconfont icon-jia" :class="{'active': defaultNum > 0}" @click="add" v-if="!data.spec.length && data.status === 1"></i>

			
 
				+        <a v-if="data.spec.length && data.status === 1" @click="selectSpec">选规格</a>

			
 
				+        <span v-if="data.status !== 1">已售罄</span>

			
 
				+      </div>

			
 
				+    </div>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+

			
 
				+export default {

			
 
				+  name: '',

			
 
				+  props: ['data'],

			
 
				+  data () {

			
 
				+    return {

			
 
				+      defaultNum: 0,

			
 
				+    }

			
 
				+  },

			
 
				+  computed: {

			
 
				+

			
 
				+  },

			
 
				+  components: {

			
 
				+

			
 
				+  },

			
 
				+  created () {

			
 
				+

			
 
				+  },

			
 
				+  methods: {

			
 
				+    add () { // 增加

			
 
				+      this.defaultNum += 1

			
 
				+      this.select()

			
 
				+    },

			
 
				+    subtract () { // 减少

			
 
				+      if (this.defaultNum > 0) this.defaultNum -= 1; this.select()

			
 
				+    },

			
 
				+    input () { // 输入

			
 
				+      if (Number(this.defaultNum)) {

			
 
				+        this.select()

			
 
				+      } else {

			
 
				+

			
 
				+      }

			
 
				+    },

			
 
				+    select () { // 返回数据

			
 
				+      this.$emit('returnData', {

			
 
				+        name: this.data.name,

			
 
				+        id: this.data.id,

			
 
				+        specId: null,

			
 
				+        specName: null,

			
 
				+        num: null,

			
 
				+        defaultNum: Number(this.defaultNum),

			
 
				+        price: null,

			
 
				+        defaultPrice: this.data.price,

			
 
				+      })

			
 
				+    },

			
 
				+    selectSpec () { // 选规格

			
 
				+      this.$emit('selectSpec', this.data)

			
 
				+    },

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->

			
 
				+<style lang="scss" scoped>

			
 
				+@import "page.scss";

			
 
				+</style>

			
--- a/src/components/orderItem/page.scss
+++ b/src/components/orderItem/page.scss
@@ -0,0 +1,74 @@
 
				+.orderItem{

			
 
				+  .img{

			
 
				+    width: .72rem;

			
 
				+    position: relative;

			
 
				+    overflow: hidden;

			
 
				+    margin: 0 .1rem;

			
 
				+    a{

			
 
				+      width: 100%;

			
 
				+      display: block;

			
 
				+      padding-bottom: 100%;

			
 
				+      background: #eee;

			
 
				+      border-radius: .04rem;

			
 
				+      position: relative;

			
 
				+      overflow: hidden;

			
 
				+    }

			
 
				+  }

			
 
				+  &>.flex-item{

			
 
				+    margin-right: .15rem;

			
 
				+    &>div.flex-item{

			
 
				+      &>div{

			
 
				+        width: 100%;

			
 
				+        position: relative;

			
 
				+        overflow: hidden;

			
 
				+        span{

			
 
				+          width: 100%;

			
 
				+          display: block;

			
 
				+          line-height: .22rem;

			
 
				+          font-size: .13rem;

			
 
				+          overflow: hidden;

			
 
				+          white-space: nowrap;

			
 
				+          text-overflow: ellipsis;

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+    &>div.flex-h{

			
 
				+      &>div{

			
 
				+        &>div{

			
 
				+          span{

			
 
				+            width: 100%;

			
 
				+            line-height: .2rem;

			
 
				+            font-size: .11rem;

			
 
				+          }

			
 
				+        }

			
 
				+      }

			
 
				+      i{

			
 
				+        font-size: .18rem;

			
 
				+        line-height: .2rem;

			
 
				+        color: #ccc;

			
 
				+        &.active{

			
 
				+          color: red;

			
 
				+        }

			
 
				+      }

			
 
				+      input{

			
 
				+        width: .4rem;

			
 
				+        line-height: .18rem;

			
 
				+        text-align: center;

			
 
				+        margin: 0 .05rem;

			
 
				+      }

			
 
				+      a{

			
 
				+        display: inline-block;

			
 
				+        line-height: .2rem;

			
 
				+        font-size: .11rem;

			
 
				+        padding: 0 .15rem;

			
 
				+        border-radius: .2rem;

			
 
				+        background: #fc6243;

			
 
				+        color: #fff;

			
 
				+      }

			
 
				+      &>span{

			
 
				+        font-size: .13rem;

			
 
				+        color: #666;

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+}
			
--- a/src/components/orderListItem/index.vue
+++ b/src/components/orderListItem/index.vue
@@ -0,0 +1,71 @@
 
				+<template>

			
 
				+  <div class="orderListItem">

			
 
				+    <div class="title flex-h">

			
 
				+      <div class="orange" v-if="data.status === 0">

			
 
				+        <i class="iconfont icon-dengdai"></i><br>

			
 
				+        <span>制作中</span>

			
 
				+      </div>

			
 
				+      <div class="grey" v-if="data.status === 1">

			
 
				+        <i class="iconfont icon-quxiao"></i><br>

			
 
				+        <span>已取消</span>

			
 
				+      </div>

			
 
				+      <div class="green" v-if="data.status === 2">

			
 
				+        <i class="iconfont icon-gouxuan"></i><br>

			
 
				+        <span>已完成</span>

			
 
				+      </div>

			
 
				+      <div class="flex-item">

			
 
				+        <div>

			
 
				+          <span>{{data.caseName}}</span>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+      <span>{{data.creatTime}}</span>

			
 
				+    </div>

			
 
				+    <div class="line">

			
 
				+      <div>

			
 
				+        <i v-for="(iconItem,iconIndex) in 40" :key="iconIndex"></i>

			
 
				+      </div>

			
 
				+    </div>

			
 
				+    <div class="list flex-h">

			
 
				+      <div class="flex-item">

			
 
				+        <ul>

			
 
				+          <li v-for="(subItem,subIndex) in data.goodsList" :key="subIndex">

			
 
				+            <span>{{subItem.name}}</span>

			
 
				+            <div>

			
 
				+              <span>￥{{subItem.price === null ? subItem.specPrice : subItem.price}} x {{subItem.num === null ? subItem.specNum : subItem.num}}</span>

			
 
				+            </div>

			
 
				+          </li>

			
 
				+        </ul>

			
 
				+      </div>

			
 
				+    </div>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+

			
 
				+export default {

			
 
				+  name: '',

			
 
				+  props: ['data'],

			
 
				+  data () {

			
 
				+    return {

			
 
				+

			
 
				+    }

			
 
				+  },

			
 
				+  computed: {

			
 
				+

			
 
				+  },

			
 
				+  components: {

			
 
				+

			
 
				+  },

			
 
				+  created () {

			
 
				+

			
 
				+  },

			
 
				+  methods: {

			
 
				+    

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->

			
 
				+<style lang="scss" scoped>

			
 
				+@import "page.scss";

			
 
				+</style>

			
--- a/src/components/orderListItem/page.scss
+++ b/src/components/orderListItem/page.scss
@@ -0,0 +1,120 @@
 
				+.orderListItem{

			
 
				+  width: 100%;

			
 
				+  position: relative;

			
 
				+  overflow: hidden;

			
 
				+  .title{

			
 
				+    width: 100%;

			
 
				+    position: relative;

			
 
				+    overflow: hidden;

			
 
				+    align-items: center;

			
 
				+    &>div:nth-child(1){

			
 
				+      width: .5rem;

			
 
				+      text-align: center;

			
 
				+      *{

			
 
				+        display: inline-block;

			
 
				+        font-size: .1rem;

			
 
				+        line-height: .17rem;

			
 
				+      }

			
 
				+      i{

			
 
				+        font-size: .15rem;

			
 
				+      }

			
 
				+    }

			
 
				+    &>div:nth-child(1).orange{

			
 
				+      *{

			
 
				+        color: #fc6243;

			
 
				+      }

			
 
				+    }

			
 
				+    &>div:nth-child(1).grey{

			
 
				+      *{

			
 
				+        color: #ccc;

			
 
				+      }

			
 
				+    }

			
 
				+    &>div:nth-child(1).green{

			
 
				+      *{

			
 
				+        color: #63c86f;

			
 
				+      }

			
 
				+    }

			
 
				+    &>div:nth-child(2){

			
 
				+      margin-right: .1rem;

			
 
				+      &>div{

			
 
				+        width: 100%;

			
 
				+        position: relative;

			
 
				+        overflow: hidden;

			
 
				+        span{

			
 
				+          width: 100%;

			
 
				+          display: block;

			
 
				+          font-size: .14rem;

			
 
				+          overflow: hidden;

			
 
				+          text-overflow: ellipsis;

			
 
				+          white-space: nowrap;

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+    &>span{

			
 
				+      font-size: .11rem;

			
 
				+      color: #666;

			
 
				+      margin-right: .15rem;

			
 
				+    }

			
 
				+  }

			
 
				+  .line{

			
 
				+    width: 100%;

			
 
				+    height: .2rem;

			
 
				+    position: relative;

			
 
				+    overflow: hidden;

			
 
				+    &>div{

			
 
				+      width: 100%;

			
 
				+      position: absolute;

			
 
				+      overflow: hidden;

			
 
				+      left: 0;

			
 
				+      top: 50%;

			
 
				+      transform: translateY(-50%) translateX(-.035rem);

			
 
				+      -webkit-transform: translateY(-50%) translateX(-.035rem);

			
 
				+      font-size: 0;

			
 
				+      white-space: nowrap;

			
 
				+      i{

			
 
				+        display: inline-block;

			
 
				+        width: .07rem;

			
 
				+        height: .07rem;

			
 
				+        position: relative;

			
 
				+        overflow: hidden;

			
 
				+        border-radius: 100%;

			
 
				+        background: #eee;

			
 
				+        margin-right: .1rem;

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+  .list{

			
 
				+    &>div{

			
 
				+      margin: 0 .15rem;

			
 
				+      &>ul{

			
 
				+        margin: .06rem auto;

			
 
				+        &>li{

			
 
				+          font-size: 0;

			
 
				+          white-space: nowrap;

			
 
				+          &>*{

			
 
				+            display: inline-block;

			
 
				+            vertical-align: middle;

			
 
				+            width: 50%;

			
 
				+            overflow: hidden;

			
 
				+            text-overflow: ellipsis;

			
 
				+            white-space: nowrap;

			
 
				+          }

			
 
				+          &>span{

			
 
				+            line-height: .26rem;

			
 
				+            font-size: .14rem;

			
 
				+            color: #555;

			
 
				+          }

			
 
				+          &>div{

			
 
				+            text-align: right;

			
 
				+            font-size: 0;

			
 
				+            span{

			
 
				+              font-size: .11rem;

			
 
				+              line-height: .26rem;

			
 
				+              color: #666;

			
 
				+            }

			
 
				+          }

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+}
			
--- a/src/components/orderPopup/index.vue
+++ b/src/components/orderPopup/index.vue
@@ -0,0 +1,115 @@
 
				+<template>

			
 
				+  <div class="orderPopup" :class="{'show':show}">

			
 
				+    <div class="centerLabel" v-if="data !== null">

			
 
				+      <div class="top">

			
 
				+        <span>{{data.name}}</span>

			
 
				+        <i class="iconfont icon-guanbi" @click="close"></i>

			
 
				+      </div>

			
 
				+      <div class="content flex-h">

			
 
				+        <div class="flex-item">

			
 
				+          <div>

			
 
				+            <span>规格：</span>

			
 
				+            <ul>

			
 
				+              <li v-for="(item,index) in data.spec" :class="{'active': index === activeIndex, 'grey': item.status !== 1}" :key="index" @click="selectItem(item, index)">{{item.value}}</li>

			
 
				+            </ul>

			
 
				+          </div>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+      <div class="bottom flex-h">

			
 
				+        <div class="flex-item">

			
 
				+          <div>

			
 
				+            <span>￥{{price * num}}</span>

			
 
				+          </div>

			
 
				+        </div>

			
 
				+        <i class="iconfont icon-jian" @click="subtract"></i>

			
 
				+        <input type="tel" v-model="num">

			
 
				+        <i class="iconfont icon-jia" @click="add"></i>

			
 
				+        <a @click="sure">确定</a>

			
 
				+      </div>

			
 
				+      <!-- <a class="sure">确定</a> -->

			
 
				+    </div>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+

			
 
				+export default {

			
 
				+  name: '',

			
 
				+  props: ['show', 'data'],

			
 
				+  data () {

			
 
				+    return {

			
 
				+      activeIndex: '',

			
 
				+      price: 0,

			
 
				+      num: 1,

			
 
				+      specId: '',

			
 
				+      specName: '',

			
 
				+    }

			
 
				+  },

			
 
				+  computed: {

			
 
				+

			
 
				+  },

			
 
				+  components: {

			
 
				+

			
 
				+  },

			
 
				+  created () {

			
 
				+

			
 
				+  },

			
 
				+  methods: {

			
 
				+    sure () { // 确定

			
 
				+      if (this.activeIndex === '' || this.price === 0 || this.num < 1) {

			
 
				+        return false

			
 
				+      }

			
 
				+      this.$emit('returnData', {

			
 
				+        name: this.data.name,

			
 
				+        id: this.data.id,

			
 
				+        specId: this.specId,

			
 
				+        specName: this.specName,

			
 
				+        num: this.num,

			
 
				+        defaultNum: null,

			
 
				+        price: this.price,

			
 
				+        defaultPrice: null,

			
 
				+      })

			
 
				+      this.close()

			
 
				+    },

			
 
				+    subtract () { // 减

			
 
				+      if (this.num > 1) {

			
 
				+        this.num -= 1

			
 
				+      }

			
 
				+    },

			
 
				+    add () { // 加

			
 
				+      this.num += 1

			
 
				+    },

			
 
				+    selectItem (item, index) { // 选择规格

			
 
				+      if (item.status === 1) {

			
 
				+        if (this.activeIndex === index) {

			
 
				+          this.activeIndex = ''

			
 
				+          this.price = 0

			
 
				+          this.specId = ''

			
 
				+          this.specName = ''

			
 
				+        } else {

			
 
				+          this.activeIndex = index

			
 
				+          this.price = item.price

			
 
				+          this.specId = item.id

			
 
				+          this.specName = item.value

			
 
				+        }

			
 
				+      }

			
 
				+    },

			
 
				+    close () { // 关闭弹窗

			
 
				+      this.$emit('closePopup')

			
 
				+      this.resetData()

			
 
				+    },

			
 
				+    resetData () { // 重置状态

			
 
				+      this.activeIndex = ''

			
 
				+      this.price = 0

			
 
				+      this.num = 1

			
 
				+      this.specName = ''

			
 
				+      this.specId = ''

			
 
				+    },

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->

			
 
				+<style lang="scss" scoped>

			
 
				+@import "page.scss";

			
 
				+</style>

			
--- a/src/components/orderPopup/page.scss
+++ b/src/components/orderPopup/page.scss
@@ -0,0 +1,139 @@
 
				+.orderPopup{

			
 
				+  width: 100%;

			
 
				+  position: absolute;

			
 
				+  left: 0;

			
 
				+  bottom: 0;

			
 
				+  top: 0;

			
 
				+  background: rgba(0, 0, 0, .5);

			
 
				+  z-index: 500;

			
 
				+  display: none;

			
 
				+  &.show{

			
 
				+    display: block;

			
 
				+  }

			
 
				+  &>.centerLabel{

			
 
				+    width: 3.35rem;

			
 
				+    background: #fff;

			
 
				+    border-radius: .08rem;

			
 
				+    overflow: hidden;

			
 
				+    .top{

			
 
				+      width: 100%;

			
 
				+      position: relative;

			
 
				+      overflow: hidden;

			
 
				+      margin: .1rem auto 0;

			
 
				+      span{

			
 
				+        width: 100%;

			
 
				+        display: block;

			
 
				+        line-height: .28rem;

			
 
				+        text-align: center;

			
 
				+        font-size: .17rem;

			
 
				+      }

			
 
				+      i{

			
 
				+        display: inline-block;

			
 
				+        position: absolute;

			
 
				+        top: 50%;

			
 
				+        transform: translateY(-50%);

			
 
				+        -webkit-transform: translateY(-50%);

			
 
				+        right: .1rem;

			
 
				+        font-size: .2rem;

			
 
				+        color: #999;

			
 
				+      }

			
 
				+    }

			
 
				+    .content{

			
 
				+      width: 100%;

			
 
				+      position: relative;

			
 
				+      overflow: hidden;

			
 
				+      &>div{

			
 
				+        margin: 0 .2rem;

			
 
				+        &>div{

			
 
				+          width: 100%;

			
 
				+          position: relative;

			
 
				+          overflow: hidden;

			
 
				+          &>span{

			
 
				+            width: 100%;

			
 
				+            display: block;

			
 
				+            line-height: .26rem;

			
 
				+            font-size: .14rem;

			
 
				+            color: #666;

			
 
				+            margin: .24rem auto 0;

			
 
				+          }

			
 
				+          ul{

			
 
				+            font-size: 0;

			
 
				+            li{

			
 
				+              display: inline-block;

			
 
				+              line-height: .32rem;

			
 
				+              padding: 0 .15rem;

			
 
				+              font-size: .14rem;

			
 
				+              color: #666;

			
 
				+              border: .01rem solid #eee;

			
 
				+              border-radius: .04rem;

			
 
				+              margin: .1rem .1rem 0 0;

			
 
				+              &.active{

			
 
				+                color: #fc6243;

			
 
				+                border-color: #fc6243;

			
 
				+              }

			
 
				+              &.grey{

			
 
				+                color: #ccc;

			
 
				+                border-color: #eee;

			
 
				+                border-style: dashed;

			
 
				+              }

			
 
				+            }

			
 
				+          }

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+    .bottom{

			
 
				+      background: #f2f2f2;

			
 
				+      margin-top: .3rem;

			
 
				+      align-items: center;

			
 
				+      &>div{

			
 
				+        &>div{

			
 
				+          width: 100%;

			
 
				+          position: relative;

			
 
				+          overflow: hidden;

			
 
				+          span{

			
 
				+            width: 100%;

			
 
				+            display: block;

			
 
				+            text-indent: .2rem;

			
 
				+            line-height: .5rem;

			
 
				+            font-size: .15rem;

			
 
				+            color: #fc6243;

			
 
				+          }

			
 
				+        }

			
 
				+      }

			
 
				+      i{

			
 
				+        font-size: .2rem;

			
 
				+        color: #fc6243;

			
 
				+        margin-left: .1rem;

			
 
				+        &:last-child{

			
 
				+          margin-right: .2rem;

			
 
				+        }

			
 
				+      }

			
 
				+      input{

			
 
				+        width: .3rem;

			
 
				+        background: none;

			
 
				+        line-height: .2rem;

			
 
				+        font-size: .13rem;

			
 
				+        text-align: center;

			
 
				+        margin-left: .1rem;

			
 
				+      }

			
 
				+      a{

			
 
				+        display: inline-block;

			
 
				+        line-height: .5rem;

			
 
				+        background: #fc6243;

			
 
				+        color: #fff;

			
 
				+        font-size: .15rem;

			
 
				+        padding: 0 .3rem;

			
 
				+        margin-left: .3rem;

			
 
				+      }

			
 
				+    }

			
 
				+    .sure{

			
 
				+      width: 100%;

			
 
				+      display: block;

			
 
				+      line-height: .5rem;

			
 
				+      text-align: center;

			
 
				+      background: #fc6243;

			
 
				+      color: #fff;

			
 
				+      font-size: .15rem;

			
 
				+    }

			
 
				+  }

			
 
				+}

			
--- a/src/components/qrCodeCard/qrCodeCard.vue
+++ b/src/components/qrCodeCard/qrCodeCard.vue
@@ -0,0 +1,65 @@
 
				+<template>

			
 
				+  <div class="codeLayout">

			
 
				+    <div id="QRcode"></div>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+import QRCode from 'qrcodejs2'

			
 
				+export default {

			
 
				+  name: 'qrCodeCard',

			
 
				+  props: {

			
 
				+    msg: {

			
 
				+      type: Object,

			
 
				+      default: () => {}

			
 
				+    }

			
 
				+  },

			
 
				+  data () {

			
 
				+    return {

			
 
				+      lessonType: {

			
 
				+        800: '1012-',

			
 
				+        801: '1012-',

			
 
				+        802: '1011-',

			
 
				+        803: '1010-',

			
 
				+        804: '1013-'

			
 
				+      }

			
 
				+    }

			
 
				+  },

			
 
				+  methods: {

			
 
				+    InitCodeRules (info) {

			
 
				+      let codeText

			
 
				+      for (var Key in this.lessonType

			
 
				+      ) {

			
 
				+        if (parseInt(Key) === this.msg.course_type) {

			
 
				+          codeText = this.lessonType[Key] + '-1'

			
 
				+        }

			
 
				+      }

			
 
				+      const ele = document.querySelector('#QRcode')

			
 
				+      this.qrCode = new QRCode(ele, {

			
 
				+        text: codeText,

			
 
				+        width: '100',

			
 
				+        height: '100',

			
 
				+        colorDark: '#000000',

			
 
				+        colorLight: '#ffffff',

			
 
				+        correctLevel: QRCode.CorrectLevel.H

			
 
				+      })

			
 
				+    }

			
 
				+  },

			
 
				+  components: {

			
 
				+    QRCode

			
 
				+  },

			
 
				+  mounted () {

			
 
				+    this.InitCodeRules()

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<style lang="scss" scoped>

			
 
				+.codeLayout{

			
 
				+  display: flex;

			
 
				+  flex-flow: column nowrap;

			
 
				+  justify-content: center;

			
 
				+  align-items: center;

			
 
				+  padding-bottom: .1rem;

			
 
				+}

			
 
				+</style>

			
--- a/src/components/scroll/scroll.vue
+++ b/src/components/scroll/scroll.vue
@@ -0,0 +1,324 @@
 
				+<template>

			
 
				+  <div ref="wrapper" class="list-wrapper">

			
 
				+    <div class="scroll-content">

			
 
				+      <div ref="listWrapper">

			
 
				+        <slot></slot>

			
 
				+      </div>

			
 
				+      <slot name="pullup" v-if="isloading" :pullUpLoad="pullUpLoad" :isPullUpLoad="isPullUpLoad">

			
 
				+        <div class="pullup-wrapper" v-if="pullUpLoad">

			
 
				+          <div class="before-trigger" v-if="!isPullUpLoad">

			
 
				+            <span>{{pullUpTxt}}</span>

			
 
				+          </div>

			
 
				+          <div class="after-trigger" v-else>

			
 
				+            <loading></loading>

			
 
				+          </div>

			
 
				+        </div>

			
 
				+      </slot>

			
 
				+    </div>

			
 
				+    <slot name="pulldown" :pullDownRefresh="pullDownRefresh" :pullDownStyle="pullDownStyle" :beforePullDown="beforePullDown" :isPullingDown="isPullingDown" :bubbleY="bubbleY" >

			
 
				+      <div ref="pulldown" class="pulldown-wrapper" :style="pullDownStyle" v-if="pullDownRefresh">

			
 
				+        <div class="before-trigger" v-if="beforePullDown">

			
 
				+          <bubble :y="bubbleY"></bubble>

			
 
				+        </div>

			
 
				+        <div class="after-trigger" v-else>

			
 
				+          <div v-if="isPullingDown" class="loading">

			
 
				+            <loading></loading>

			
 
				+          </div>

			
 
				+          <div v-else>

			
 
				+            <span>{{refreshTxt}}</span>

			
 
				+          </div>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+    </slot>

			
 
				+  </div>

			
 
				+</template>

			
 
				+<script type="text/ecmascript-6">

			
 
				+import BScroll from 'better-scroll'

			
 
				+import Loading from '../loading/loading.vue'

			
 
				+import Bubble from '../bubble/bubble.vue'

			
 
				+import Dom from '../../util/dom'

			
 
				+const COMPONENT_NAME = 'scroll'

			
 
				+const DIRECTION_H = 'horizontal'

			
 
				+const DIRECTION_V = 'vertical'

			
 
				+

			
 
				+export default {

			
 
				+  name: COMPONENT_NAME,

			
 
				+  props: {

			
 
				+    data: {

			
 
				+      type: Array,

			
 
				+      default: function () {

			
 
				+        return []

			
 
				+      }

			
 
				+    },

			
 
				+    probeType: {

			
 
				+      type: Number,

			
 
				+      default: 1

			
 
				+    },

			
 
				+    click: {

			
 
				+      type: Boolean,

			
 
				+      default: true

			
 
				+    },

			
 
				+    listenScroll: {

			
 
				+      type: Boolean,

			
 
				+      default: false

			
 
				+    },

			
 
				+    listenBeforeScroll: {

			
 
				+      type: Boolean,

			
 
				+      default: false

			
 
				+    },

			
 
				+    direction: {

			
 
				+      type: String,

			
 
				+      default: DIRECTION_V

			
 
				+    },

			
 
				+    scrollbar: {

			
 
				+      type: null,

			
 
				+      default: false

			
 
				+    },

			
 
				+    pullDownRefresh: {

			
 
				+      type: null,

			
 
				+      default: false

			
 
				+    },

			
 
				+    pullUpLoad: {

			
 
				+      type: null,

			
 
				+      default: false

			
 
				+    },

			
 
				+    startY: {

			
 
				+      type: Number,

			
 
				+      default: 0

			
 
				+    },

			
 
				+    refreshDelay: {

			
 
				+      type: Number,

			
 
				+      default: 20

			
 
				+    },

			
 
				+    freeScroll: {

			
 
				+      type: Boolean,

			
 
				+      default: false

			
 
				+    },

			
 
				+    mouseWheel: {

			
 
				+      type: Boolean,

			
 
				+      default: false

			
 
				+    },

			
 
				+    bounce: {

			
 
				+      default: false

			
 
				+    },

			
 
				+    isloading: {

			
 
				+      type: Boolean,

			
 
				+      default: false

			
 
				+    }

			
 
				+  },

			
 
				+  data () {

			
 
				+    return {

			
 
				+      beforePullDown: true,

			
 
				+      isRebounding: false,

			
 
				+      isPullingDown: false,

			
 
				+      isPullUpLoad: false,

			
 
				+      pullUpDirty: true,

			
 
				+      pullDownStyle: '',

			
 
				+      bubbleY: 0

			
 
				+    }

			
 
				+  },

			
 
				+  computed: {

			
 
				+    pullUpTxt () {

			
 
				+      const moreTxt = '--- 上拉更多 ---'

			
 
				+

			
 
				+      const noMoreTxt = '--- 我也是有底线的 ---'

			
 
				+

			
 
				+      return this.pullUpDirty ? moreTxt : noMoreTxt

			
 
				+    },

			
 
				+    refreshTxt () {

			
 
				+      return this.pullDownRefresh && (this.pullDownRefresh.txt || '已刷新')

			
 
				+    }

			
 
				+  },

			
 
				+  created () {

			
 
				+    this.pullDownInitTop = -50

			
 
				+  },

			
 
				+  mounted () {

			
 
				+    this.$nextTick(() => {

			
 
				+      this.initScroll()

			
 
				+    })

			
 
				+  },

			
 
				+  methods: {

			
 
				+    initScroll () {

			
 
				+      if (!this.$refs.wrapper) {

			
 
				+        return

			
 
				+      }

			
 
				+      if (this.$refs.listWrapper && (this.pullDownRefresh || this.pullUpLoad)) {

			
 
				+        this.$refs.listWrapper.style.minHeight = `${Dom.getRect(this.$refs.wrapper).height + 1}px`

			
 
				+      }

			
 
				+

			
 
				+      let options = {

			
 
				+        probeType: this.probeType,

			
 
				+        click: this.click,

			
 
				+        scrollY: this.freeScroll || this.direction === DIRECTION_V,

			
 
				+        scrollX: this.freeScroll || this.direction === DIRECTION_H,

			
 
				+        scrollbar: this.scrollbar,

			
 
				+        pullDownRefresh: this.pullDownRefresh,

			
 
				+        pullUpLoad: this.pullUpLoad,

			
 
				+        startY: this.startY,

			
 
				+        freeScroll: this.freeScroll,

			
 
				+        mouseWheel: this.mouseWheel,

			
 
				+        bounce: this.bounce

			
 
				+      }

			
 
				+

			
 
				+      this.scroll = new BScroll(this.$refs.wrapper, options)

			
 
				+

			
 
				+      if (this.listenScroll) {

			
 
				+        this.scroll.on('scroll', (pos) => {

			
 
				+          this.$emit('scroll', pos)

			
 
				+        })

			
 
				+      }

			
 
				+

			
 
				+      if (this.listenBeforeScroll) {

			
 
				+        this.scroll.on('beforeScrollStart', () => {

			
 
				+          this.$emit('beforeScrollStart')

			
 
				+        })

			
 
				+      }

			
 
				+

			
 
				+      if (this.pullDownRefresh) {

			
 
				+        this._initPullDownRefresh()

			
 
				+      }

			
 
				+

			
 
				+      if (this.pullUpLoad) {

			
 
				+        this._initPullUpLoad()

			
 
				+      }

			
 
				+    },

			
 
				+    disable () {

			
 
				+      this.scroll && this.scroll.disable()

			
 
				+    },

			
 
				+    enable () {

			
 
				+      this.scroll && this.scroll.enable()

			
 
				+    },

			
 
				+    refresh () {

			
 
				+      this.scroll && this.scroll.refresh()

			
 
				+    },

			
 
				+    scrollTo () {

			
 
				+      this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)

			
 
				+    },

			
 
				+    scrollToElement () {

			
 
				+      this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)

			
 
				+    },

			
 
				+    clickItem (e, item) {

			
 
				+      this.$emit('click', item)

			
 
				+    },

			
 
				+    destroy () {

			
 
				+      this.scroll.destroy()

			
 
				+    },

			
 
				+    forceUpdate (dirty) {

			
 
				+      if (this.pullDownRefresh && this.isPullingDown) {

			
 
				+        this.isPullingDown = false

			
 
				+        this._reboundPullDown().then(() => {

			
 
				+          this._afterPullDown()

			
 
				+        })

			
 
				+      } else if (this.pullUpLoad && this.isPullUpLoad) {

			
 
				+        this.isPullUpLoad = false

			
 
				+        this.scroll.finishPullUp()

			
 
				+        this.pullUpDirty = dirty

			
 
				+        this.refresh()

			
 
				+      } else {

			
 
				+        this.refresh()

			
 
				+      }

			
 
				+    },

			
 
				+    _initPullDownRefresh () {

			
 
				+      this.scroll.on('pullingDown', () => {

			
 
				+        this.beforePullDown = false

			
 
				+        this.isPullingDown = true

			
 
				+        this.$emit('pullingDown')

			
 
				+      })

			
 
				+

			
 
				+      this.scroll.on('scroll', (pos) => {

			
 
				+        if (!this.pullDownRefresh) {

			
 
				+          return

			
 
				+        }

			
 
				+        if (this.beforePullDown) {

			
 
				+          this.bubbleY = Math.max(0, pos.y + this.pullDownInitTop)

			
 
				+          this.pullDownStyle = `top:${Math.min(pos.y + this.pullDownInitTop, 10)}px`

			
 
				+        } else {

			
 
				+          this.bubbleY = 0

			
 
				+        }

			
 
				+

			
 
				+        if (this.isRebounding) {

			
 
				+          this.pullDownStyle = `top:${10 - (this.pullDownRefresh.stop - pos.y)}px`

			
 
				+        }

			
 
				+      })

			
 
				+    },

			
 
				+    _initPullUpLoad () {

			
 
				+      this.scroll.on('pullingUp', () => {

			
 
				+        this.isPullUpLoad = true

			
 
				+        this.$emit('pullingUp')

			
 
				+      })

			
 
				+    },

			
 
				+    _reboundPullDown () {

			
 
				+      const { stopTime = 600 } = this.pullDownRefresh

			
 
				+      return new Promise((resolve) => {

			
 
				+        setTimeout(() => {

			
 
				+          this.isRebounding = true

			
 
				+          this.scroll.finishPullDown()

			
 
				+          resolve()

			
 
				+        }, stopTime)

			
 
				+      })

			
 
				+    },

			
 
				+    _afterPullDown () {

			
 
				+      setTimeout(() => {

			
 
				+        this.pullDownStyle = `top:${this.pullDownInitTop}px`

			
 
				+        this.beforePullDown = true

			
 
				+        this.isRebounding = false

			
 
				+        this.refresh()

			
 
				+      }, this.scroll.options.bounceTime)

			
 
				+    }

			
 
				+  },

			
 
				+  watch: {

			
 
				+    data () {

			
 
				+      setTimeout(() => {

			
 
				+        this.forceUpdate(true)

			
 
				+      }, this.refreshDelay)

			
 
				+    }

			
 
				+  },

			
 
				+  components: {

			
 
				+    Loading,

			
 
				+    Bubble

			
 
				+  }

			
 
				+}

			
 
				+

			
 
				+</script>

			
 
				+

			
 
				+<style lang="scss" scoped>

			
 
				+.list-wrapper {

			
 
				+  position: relative;

			
 
				+  height: 100%;

			
 
				+  overflow: hidden;

			
 
				+  background: #fff;

			
 
				+}

			
 
				+

			
 
				+.scroll-content {

			
 
				+  position: relative;

			
 
				+  z-index: 1;

			
 
				+}

			
 
				+

			
 
				+.list-content {

			
 
				+  position: relative;

			
 
				+  z-index: 10;

			
 
				+  background: #fff;

			
 
				+}

			
 
				+

			
 
				+.pulldown-wrapper {

			
 
				+  position: absolute;

			
 
				+  width: 100%;

			
 
				+  left: 0;

			
 
				+  display: flex;

			
 
				+  justify-content: center;

			
 
				+  align-items: center;

			
 
				+  transition: all;

			
 
				+}

			
 
				+

			
 
				+.after-trigger {

			
 
				+  margin-top: 10px;

			
 
				+}

			
 
				+

			
 
				+.pullup-wrapper {

			
 
				+  width: 100%;

			
 
				+  display: flex;

			
 
				+  justify-content: center;

			
 
				+  align-items: center;

			
 
				+  padding-bottom: 10px;

			
 
				+}

			
 
				+</style>

			
--- a/src/components/topCaseInfo/index.vue
+++ b/src/components/topCaseInfo/index.vue
@@ -0,0 +1,42 @@
 
				+<template>

			
 
				+  <div class="topCaseInfo flex-h">

			
 
				+    <i class="iconfont icon-dingwei"></i>

			
 
				+      <span>{{data.caseName}}</span>

			
 
				+      <a v-if="data.showSelect" @click="selectCase">请选择</a>

			
 
				+      <div class="flex-item">

			
 
				+        <span>{{data.userName}}您好！</span>

			
 
				+      </div>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+

			
 
				+export default {

			
 
				+  name: '',

			
 
				+  props: ['data'],

			
 
				+  data () {

			
 
				+    return {

			
 
				+

			
 
				+    }

			
 
				+  },

			
 
				+  computed: {

			
 
				+

			
 
				+  },

			
 
				+  components: {

			
 
				+

			
 
				+  },

			
 
				+  created () {

			
 
				+

			
 
				+  },

			
 
				+  methods: {

			
 
				+    selectCase () { // 选择案场

			
 
				+      this.$emit('selectCase')

			
 
				+    },

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->

			
 
				+<style lang="scss" scoped>

			
 
				+@import "page.scss";

			
 
				+</style>

			
--- a/src/components/topCaseInfo/page.scss
+++ b/src/components/topCaseInfo/page.scss
@@ -0,0 +1,31 @@
 
				+.topCaseInfo{

			
 
				+  align-items: center;

			
 
				+  background: rgba(0, 0, 0, .3);

			
 
				+  padding: .05rem 0;

			
 
				+  &>*{

			
 
				+    margin-left: .05rem;

			
 
				+    line-height: .2rem;

			
 
				+    font-size: .12rem;

			
 
				+    color: #fff;

			
 
				+  }

			
 
				+  i{

			
 
				+    font-size: .15rem;

			
 
				+  }

			
 
				+  a{

			
 
				+    color: #fb6b2f;

			
 
				+    text-decoration: underline;

			
 
				+    margin-left: .1rem;

			
 
				+  }

			
 
				+  &>*:first-child{

			
 
				+    margin-left: .2rem;

			
 
				+  }

			
 
				+  &>div{

			
 
				+    text-align: right;

			
 
				+    margin-right: .2rem;

			
 
				+    font-size: 0;

			
 
				+    span{

			
 
				+      font-size: .12rem;

			
 
				+      color: #fff;

			
 
				+    }

			
 
				+  }

			
 
				+}
			
--- a/src/pages/sales/App.vue
+++ b/src/pages/sales/App.vue
@@ -0,0 +1,22 @@
 
				+<template>

			
 
				+  <div id="app">

			
 
				+    <router-view></router-view>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+  import '../../common/css/reset.css'

			
 
				+

			
 
				+  export default {

			
 
				+    name: 'app',

			
 
				+    components: {}

			
 
				+  }

			
 
				+</script>

			
 
				+

			
 
				+<style>

			
 
				+  #app {

			
 
				+    width: 100%;

			
 
				+    height: 100%;

			
 
				+    position: relative;

			
 
				+  }

			
 
				+</style>

			
--- a/src/pages/sales/app.js
+++ b/src/pages/sales/app.js
@@ -0,0 +1,23 @@
 
				+import Vue from 'vue'

			
 
				+import App from './App.vue'

			
 
				+import Vant from 'vant'

			
 
				+import 'vant/lib/vant-css/index.css'

			
 
				+import router from './router'

			
 
				+import store from '../../store/index'

			
 
				+import Vuex from 'vuex'

			
 
				+import Ajax from '../../util/ajax'

			
 
				+import api from '../../util/api'

			
 
				+import toolClass from '../../util/util'

			
 
				+

			
 
				+Vue.use(Vant)

			
 
				+Vue.use(Vuex)

			
 
				+Vue.prototype.$api = api

			
 
				+Vue.prototype.$ajax = Ajax

			
 
				+Vue.prototype.toolClass = toolClass

			
 
				+/* eslint-disable no-new */

			
 
				+new Vue({

			
 
				+  el: '#app',

			
 
				+  router,

			
 
				+  store,

			
 
				+  render: h => h(App)

			
 
				+})

			
--- a/src/pages/sales/coffeeIndex/index.vue
+++ b/src/pages/sales/coffeeIndex/index.vue
@@ -0,0 +1,169 @@
 
				+<template>

			
 
				+  <div class="mainPage flex-v">

			
 
				+    <div class="top">

			
 
				+      <topCaseInfo :data="topCaseInfoData" @selectCase="showSelect = true"></topCaseInfo>

			
 
				+    </div>

			
 
				+    <nav class="flex-h">

			
 
				+      <a class="flex-item" v-for="(item,index) in cutNavList" :key="index" :class="{'active': navActive === index}" @click="cutNav(index)">{{item.value}}</a>

			
 
				+    </nav>

			
 
				+    <div class="content flex-item">

			
 
				+      <div>

			
 
				+        <ul>

			
 
				+          <li :hidden="navActive !== 0" class="placeOrder">

			
 
				+            <div class="topInfo flex-h">

			
 
				+              <div class="flex-item">

			
 
				+                <div>

			
 
				+                  <span>共计已使用：45杯</span>

			
 
				+                </div>

			
 
				+              </div>

			
 
				+              <div class="flex-item">

			
 
				+                <div>

			
 
				+                  <span>本月已用：0杯</span>

			
 
				+                </div>

			
 
				+              </div>

			
 
				+              <a>点单记录</a>

			
 
				+            </div>

			
 
				+            <div class="areaListParent flex-h">

			
 
				+              <div class="flex-item">

			
 
				+                <div>

			
 
				+                  <ul class="areaList">

			
 
				+                    <li v-for="(item,index) in list" :key="index">

			
 
				+                      <div class="title">

			
 
				+                        <i class="iconfont icon-yinchenglogo"></i>

			
 
				+                        <span>{{item.name}}</span>

			
 
				+                      </div>

			
 
				+                      <ul class="subAreaList flex-h">

			
 
				+                        <li class="flex-item flex-h" v-for="(subItem,subIndex) in item.list" :key="subIndex">

			
 
				+                          <caseTableItem :item="subItem" :index="subIndex"></caseTableItem>

			
 
				+                        </li>

			
 
				+                        <li class="flex-item noData" v-if="item.list.length % 2 != 0"></li>

			
 
				+                      </ul>

			
 
				+                    </li>

			
 
				+                  </ul>

			
 
				+                </div>

			
 
				+              </div>

			
 
				+            </div>

			
 
				+          </li>

			
 
				+          <li :hidden="navActive !== 1" class="my-card">

			
 
				+            <div class="list-box">

			
 
				+              <myCard v-for="(item,index) in cardList" :key="index" :data='item' @share='share'></myCard>

			
 
				+            </div>

			
 
				+          </li>

			
 
				+          <li :hidden="navActive !== 2" class="customer-card">

			
 
				+            <div class="list-box">

			
 
				+              <customerCard v-for="(item,index) in cardList" :key="index" :data='item' @share='share'></customerCard>

			
 
				+            </div>

			
 
				+          </li>

			
 
				+        </ul>

			
 
				+      </div>

			
 
				+    </div>

			
 
				+    <div class="selectCase" :hidden="!showSelect"></div>

			
 
				+    <van-picker :hidden="!showSelect"

			
 
				+      show-toolbar

			
 
				+      title="选择案场"

			
 
				+      :columns="caseList"

			
 
				+      @cancel="showSelect = false"

			
 
				+      @confirm="selectCase"

			
 
				+      value-key="value"

			
 
				+    />

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+import caseTableItem from '../../../components/caseTableItem/index'

			
 
				+import topCaseInfo from '../../../components/topCaseInfo/index'

			
 
				+import myCard from '../../../components/myCard/myCard'

			
 
				+import customerCard from '../../../components/customerCard/customerCard'

			
 
				+

			
 
				+export default {

			
 
				+  name: '',

			
 
				+  data () {

			
 
				+    return {

			
 
				+      navActive: 2,

			
 
				+      cutNavList: [{

			
 
				+        value: '城咖啡',

			
 
				+        id: '1',

			
 
				+      }, {

			
 
				+        value: '我的卡券',

			
 
				+        id: '2',

			
 
				+      }, {

			
 
				+        value: '我的客户',

			
 
				+        id: '3',

			
 
				+      }],

			
 
				+      topCaseInfoData: {

			
 
				+        caseName: '',

			
 
				+        caseId: '',

			
 
				+        showSelect: true,

			
 
				+        userName: 'xxx'

			
 
				+      },

			
 
				+      caseInfo: {

			
 
				+        value: '',

			
 
				+        id: ''

			
 
				+      },

			
 
				+      showSelect: false,

			
 
				+      caseList: [{

			
 
				+        value: '案场一',

			
 
				+        id: ''

			
 
				+      }, {

			
 
				+        value: '案场二',

			
 
				+        id: ''

			
 
				+      }, {

			
 
				+        value: '案场三',

			
 
				+        id: ''

			
 
				+      }, {

			
 
				+        value: '案场四',

			
 
				+        id: ''

			
 
				+      }],

			
 
				+      list: [{

			
 
				+        name: '案场名称1',

			
 
				+        list: [{}, {}, {}, {}, {}],

			
 
				+      }, {

			
 
				+        name: '案场名称2',

			
 
				+        list: [{}, {}, {}, {}, {}],

			
 
				+      }],

			
 
				+      cardList: [

			
 
				+        {

			
 
				+          invalid: true

			
 
				+        },

			
 
				+        {

			
 
				+          invalid: false

			
 
				+        },

			
 
				+        {

			
 
				+          invalid: false

			
 
				+        }

			
 
				+      ]

			
 
				+    }

			
 
				+  },

			
 
				+  computed: {

			
 
				+

			
 
				+  },

			
 
				+  components: {

			
 
				+    topCaseInfo,

			
 
				+    caseTableItem,

			
 
				+    myCard,

			
 
				+    customerCard

			
 
				+  },

			
 
				+  created () {

			
 
				+

			
 
				+  },

			
 
				+  methods: {

			
 
				+    cutNav (index) { // 切换nav

			
 
				+      this.navActive = index

			
 
				+    },

			
 
				+    selectCase (val) { // 选择案场

			
 
				+      this.caseInfo = val

			
 
				+      this.topCaseInfoData.caseName = val.value

			
 
				+      this.topCaseInfoData.caseId = val.id

			
 
				+      this.showSelect = false

			
 
				+    },

			
 
				+    share (item) {

			
 
				+      console.log(item)

			
 
				+    }

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->

			
 
				+<style lang="scss" scoped>

			
 
				+@import "page.scss";

			
 
				+</style>

			
--- a/src/pages/sales/coffeeIndex/page.scss
+++ b/src/pages/sales/coffeeIndex/page.scss
@@ -0,0 +1,158 @@
 
				+.mainPage{

			
 
				+  .top{

			
 
				+    position: relative;

			
 
				+    overflow: hidden;

			
 
				+  }

			
 
				+  >nav{

			
 
				+    width: 100%;

			
 
				+    position: relative;

			
 
				+    z-index: 10;

			
 
				+    background: #fff;

			
 
				+    box-shadow: 0 0 .1rem .02rem rgba(0, 0, 0, .1);

			
 
				+    a{

			
 
				+      text-align: center;

			
 
				+      line-height: .4rem;

			
 
				+      font-size: .14rem;

			
 
				+      color: #ccc;

			
 
				+      position: relative;

			
 
				+      &.active{

			
 
				+        color: #333;

			
 
				+        &::after{

			
 
				+          content: '';

			
 
				+          width: 50%;

			
 
				+          height: .02rem;

			
 
				+          background: #fc6243;

			
 
				+          position: absolute;

			
 
				+          bottom: 0;

			
 
				+          left: 50%;

			
 
				+          transform: translateX(-50%);

			
 
				+          -webkit-transform: translateX(-50%);

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+  .content{

			
 
				+    &>div{

			
 
				+      width: 100%;

			
 
				+      position: absolute;

			
 
				+      left: 0;

			
 
				+      top: 0;

			
 
				+      bottom: 0;

			
 
				+      overflow: hidden;

			
 
				+      &>ul{

			
 
				+        width: 100%;

			
 
				+        height: 100%;

			
 
				+        position: relative;

			
 
				+        overflow: hidden;

			
 
				+        &>li{

			
 
				+          width: 100%;

			
 
				+          height: 100%;

			
 
				+          position: relative;

			
 
				+          overflow-y: scroll;

			
 
				+          -webkit-overflow-scrolling: touch;

			
 
				+          transform: translateZ(0);

			
 
				+          -webkit-transform: translateZ(0);

			
 
				+          &.placeOrder{

			
 
				+            .topInfo{

			
 
				+              align-items: center;

			
 
				+              margin: .1rem auto 0;

			
 
				+              >div{

			
 
				+                >div{

			
 
				+                  width: 100%;

			
 
				+                  position: relative;

			
 
				+                  overflow: hidden;

			
 
				+                  span{

			
 
				+                    width: 100%;

			
 
				+                    display: block;

			
 
				+                    text-indent: .2rem;

			
 
				+                    line-height: .3rem;

			
 
				+                    font-size: .14rem;

			
 
				+                    color: #666;

			
 
				+                  }

			
 
				+                }

			
 
				+              }

			
 
				+              a{

			
 
				+                line-height: .22rem;

			
 
				+                font-size: .12rem;

			
 
				+                color: #fc6243;

			
 
				+                border: .01rem solid #fc6243;

			
 
				+                padding: 0 .15rem;

			
 
				+                border-radius: .05rem;

			
 
				+                margin-right: .2rem;

			
 
				+              }

			
 
				+            }

			
 
				+            .areaListParent{

			
 
				+              position: relative;

			
 
				+              overflow: visible;

			
 
				+              >div{

			
 
				+                margin: 0 .2rem;

			
 
				+                position: relative;

			
 
				+                overflow: visible;

			
 
				+                >div{

			
 
				+                  width: 100%;

			
 
				+                  position: relative;

			
 
				+                  overflow: visible;

			
 
				+                  .areaList{

			
 
				+                    &:last-child{

			
 
				+                      margin-bottom: .2rem;

			
 
				+                    }

			
 
				+                    .title{

			
 
				+                      font-size: 0;

			
 
				+                      white-space: nowrap;

			
 
				+                      margin-top: .22rem;

			
 
				+                      *{

			
 
				+                        line-height: .26rem;

			
 
				+                        font-size: .14rem;

			
 
				+                      }

			
 
				+                      i{

			
 
				+                        color: red;

			
 
				+                        margin-right: .05rem;

			
 
				+                      }

			
 
				+                    }

			
 
				+                    .subAreaList{

			
 
				+                      position: relative;

			
 
				+                      overflow: visible;

			
 
				+                      flex-wrap: wrap;

			
 
				+                      -webkit-flex-wrap: wrap;

			
 
				+                      &>li{

			
 
				+                        position: relative;

			
 
				+                        overflow: hidden;

			
 
				+                        border-radius: .06rem;

			
 
				+                        background: #fff;

			
 
				+                        padding: .15rem 0;

			
 
				+                        box-shadow: 0 0 .1rem .01rem rgba(0, 0, 0, .1);

			
 
				+                        min-width: 40%;

			
 
				+                        margin-top: .2rem;

			
 
				+                        &:nth-child(2n){

			
 
				+                          margin-left: .2rem;

			
 
				+                        }

			
 
				+                        &.noData{

			
 
				+                          box-shadow: none;

			
 
				+                          background: none;

			
 
				+                        }

			
 
				+                      }

			
 
				+                    }

			
 
				+                  }

			
 
				+                }

			
 
				+              }

			
 
				+            }

			
 
				+          }

			
 
				+          &.my-card, &.customer-card{

			
 
				+            .list-box{

			
 
				+              padding: .26rem .2rem;

			
 
				+            }

			
 
				+          }

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+  .selectCase{

			
 
				+    width: 100%;

			
 
				+    position: absolute;

			
 
				+    left: 0;

			
 
				+    top: 0;

			
 
				+    bottom: 0;

			
 
				+    background: rgba(0, 0, 0, .3);

			
 
				+    z-index: 100;

			
 
				+  }

			
 
				+}
			
--- a/src/pages/sales/login/index.vue
+++ b/src/pages/sales/login/index.vue
@@ -0,0 +1,108 @@
 
				+<template>

			
 
				+  <div class="mainPage">

			
 
				+    <div class="mask">

			
 
				+      <img :src="logo" class="logo" alt="">

			
 
				+      <div class="centerLabel" style="width:100%;">

			
 
				+        <div class="box" style="margin:0 auto;">

			
 
				+          <div class="title">登录</div>

			
 
				+

			
 
				+          <div class="mobile">

			
 
				+            <i class="iconfont icon-dianhua"></i>

			
 
				+            <input type="number" maxlength="11" placeholder="手机号" v-model="postData.phone">

			
 
				+          </div>

			
 
				+

			
 
				+          <div class="sms" style="margin-top:.2rem;">

			
 
				+            <i class="iconfont icon-mima"></i>

			
 
				+            <input type="number" maxlength="6" placeholder="验证码" v-model="postData.captcha">

			
 
				+            <div class="sand" v-if="seconds === 60" @click="sandMsg">发送验证码</div>

			
 
				+            <div class="sand" v-else>{{seconds}}后可重发</div>

			
 
				+          </div>

			
 
				+        </div>

			
 
				+        <div class="submit" @click="submit">

			
 
				+          <div>通过验证</div>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+

			
 
				+      <transition name="slide">

			
 
				+        <div class="select" v-if="showCase">

			
 
				+          <van-picker

			
 
				+            show-toolbar

			
 
				+            title="请选择"

			
 
				+            value-key='CaseName'

			
 
				+            :columns="columns"

			
 
				+            @cancel="onCancelC"

			
 
				+            @confirm="onConfirmC"

			
 
				+          />

			
 
				+        </div>

			
 
				+      </transition>

			
 
				+      <transition name="slide">

			
 
				+        <div class="select" v-if="showSales">

			
 
				+          <van-picker

			
 
				+            show-toolbar

			
 
				+            title="请选择"

			
 
				+            value-key='UserName'

			
 
				+            :columns="columnsS"

			
 
				+            @cancel="onCancelS"

			
 
				+            @confirm="onConfirmS"

			
 
				+          />

			
 
				+        </div>

			
 
				+      </transition>

			
 
				+    </div>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+import logo from '../../../common/icon/logo.png'

			
 
				+import { createNamespacedHelpers } from 'vuex'

			
 
				+const { mapActions: actions } = createNamespacedHelpers('userCenter')

			
 
				+const { mapActions: mapLoginActions } = createNamespacedHelpers('login')

			
 
				+export default {

			
 
				+  data () {

			
 
				+    return {

			
 
				+      logo,

			
 
				+      showCase: false,

			
 
				+      showSales: false,

			
 
				+      seconds: 60,

			
 
				+      postData: {

			
 
				+        phone: '',

			
 
				+        captcha: ''

			
 
				+      }

			
 
				+    }

			
 
				+  },

			
 
				+  methods: {

			
 
				+    ...actions(['getCaptcha']),

			
 
				+    ...mapLoginActions(['submitData']),

			
 
				+    sandMsg () {

			
 
				+      if (!this.postData.phone) {

			
 
				+        this.$toast('请先填写手机号')

			
 
				+        return

			
 
				+      }

			
 
				+      this.getCaptcha(this.postData.phone)

			
 
				+      this.runTime()

			
 
				+    },

			
 
				+    runTime () {

			
 
				+      setTimeout(() => {

			
 
				+        this.seconds--

			
 
				+        if (this.seconds < 60 && this.seconds >= 1) {

			
 
				+          this.runTime()

			
 
				+        } else if (this.seconds < 1) {

			
 
				+          this.seconds = 60

			
 
				+        }

			
 
				+      }, 1000)

			
 
				+    },

			
 
				+    submit () {

			
 
				+      if (!this.postData.captcha) {

			
 
				+        this.$toast('请先获取验证码')

			
 
				+        return

			
 
				+      }

			
 
				+      this.submitData(this.postData).then((res) => {

			
 
				+        this.$toast(res)

			
 
				+      })

			
 
				+    }

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<style lang="scss" scoped>

			
 
				+@import "page.scss";

			
 
				+</style>

			
--- a/src/pages/sales/login/page.scss
+++ b/src/pages/sales/login/page.scss
@@ -0,0 +1,130 @@
 
				+.mainPage {

			
 
				+  background: url("../../../common/icon/bg.jpg") no-repeat 0 -0.8rem;

			
 
				+  background-size: 100% calc(100% + 90px);

			
 
				+  position: relative;

			
 
				+  .mask{

			
 
				+    width: 100%;

			
 
				+    height: 100%;

			
 
				+    display: flex;

			
 
				+    justify-content: center;

			
 
				+    align-items: center;

			
 
				+    // background: rgba(0,0,0,0.3);

			
 
				+    position: relative;

			
 
				+    .logo{

			
 
				+      position: absolute;

			
 
				+      top: .5rem;

			
 
				+      left: .3rem;

			
 
				+      width: 1.8rem;

			
 
				+    }

			
 
				+    .select {

			
 
				+      position: absolute;

			
 
				+      bottom: 0;

			
 
				+      left: 0;

			
 
				+      width: 100%;

			
 
				+    }

			
 
				+    .box{

			
 
				+      width: 3.25rem;

			
 
				+      overflow: hidden;

			
 
				+      background:rgba(255,255,255,1);

			
 
				+      border-radius:8px;

			
 
				+      padding: .2rem;

			
 
				+      box-sizing: border-box;

			
 
				+      .title{

			
 
				+        font-size: .16rem;

			
 
				+        font-weight: bold;

			
 
				+        text-align: center;

			
 
				+        padding-bottom: .24rem;

			
 
				+      }

			
 
				+      .mobile,.sms{

			
 
				+        width: 2.85rem;

			
 
				+        height: .5rem;

			
 
				+        background:rgba(255,255,255,1);

			
 
				+        border-radius:8px;

			
 
				+        border:1px solid rgba(168,182,200,0.2);

			
 
				+        display: flex;

			
 
				+        align-items: center;

			
 
				+        position: relative;

			
 
				+        i{

			
 
				+          color: rgba(168,182,200,1);

			
 
				+          padding: .14rem;

			
 
				+          font-size: .18rem;

			
 
				+        }

			
 
				+        input{

			
 
				+          flex: 1;

			
 
				+          height: 100%;

			
 
				+        }

			
 
				+        .sand{

			
 
				+          padding: 0 .1rem;

			
 
				+          height: .24rem;

			
 
				+          border-radius:20px;

			
 
				+          border:1px solid rgba(218,218,218,1);

			
 
				+          color: rgba(218,218,218,1);

			
 
				+          font-size: .12rem;

			
 
				+          text-align: center;

			
 
				+          line-height: .24rem;

			
 
				+          position: absolute;

			
 
				+          right: .1rem;

			
 
				+        }

			
 
				+      }

			
 
				+      .recommend{

			
 
				+        width: 2.85rem;

			
 
				+        height: .4rem;

			
 
				+        padding: .15rem 0;

			
 
				+        display: flex;

			
 
				+        align-items: center;

			
 
				+        justify-content: space-between;

			
 
				+        span{

			
 
				+          color: rgba(168,182,200,1);

			
 
				+        }

			
 
				+        i{

			
 
				+          color: rgba(168,182,200,1);

			
 
				+          padding-left: .14rem;

			
 
				+          font-size: .12rem;

			
 
				+        }

			
 
				+        div{

			
 
				+          height: 100%;

			
 
				+          display: flex;

			
 
				+          flex: 1;

			
 
				+          margin-left: .1rem;

			
 
				+          align-items: center;

			
 
				+          border-radius:8px;

			
 
				+          border:1px solid rgba(168,182,200,0.2);

			
 
				+          padding: .1rem;

			
 
				+          box-sizing: border-box;

			
 
				+          span{

			
 
				+            width: 70%;

			
 
				+            overflow:hidden;

			
 
				+            text-overflow:ellipsis;

			
 
				+            white-space:nowrap;

			
 
				+          }

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+    

			
 
				+    .submit{

			
 
				+      margin: .24rem auto 0;

			
 
				+      width: 2.85rem;

			
 
				+      height: .48rem;

			
 
				+      border-radius:.04rem;

			
 
				+      background: rgba(255,66,28,1);

			
 
				+      text-align: center;

			
 
				+      line-height: .48rem;

			
 
				+      div{

			
 
				+        font-size: .15rem;

			
 
				+        color: #fff;

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+}

			
 
				+

			
 
				+.slide-enter-active {

			
 
				+  transition: all .3s ease;

			
 
				+}

			
 
				+.slide-leave-active {

			
 
				+  transition: all .3s ease;

			
 
				+}

			
 
				+.slide-enter, .slide-leave-to

			
 
				+/* .slide-fade-leave-active for below version 2.1.8 */ {

			
 
				+  transform: translateY(2.6rem);

			
 
				+  opacity: 0;

			
 
				+}

			
--- a/src/pages/sales/placeOrder/index.vue
+++ b/src/pages/sales/placeOrder/index.vue
@@ -0,0 +1,308 @@
 
				+<template>

			
 
				+  <div class="mainPage flex-v">

			
 
				+    <div class="flex-item flex-v">

			
 
				+      <div class="banner">

			
 
				+        <img src="" class="centerLabel cover" alt="">

			
 
				+        <div class="bannerInfo flex-h">

			
 
				+          <div class="flex-item">

			
 
				+            <div>

			
 
				+              <span>项目名称：xxxx</span>

			
 
				+            </div>

			
 
				+          </div>

			
 
				+          <span>xxx您好！</span>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+      <div class="tableInfo flex-h">

			
 
				+        <div class="flex-item">

			
 
				+          <div>

			
 
				+            <span>桌号：案场11号桌</span>

			
 
				+            <span>本月已用：150杯</span>

			
 
				+          </div>

			
 
				+        </div>

			
 
				+        <router-link :to="{name: 'coffeeIndex', query: {}}">返回选择桌号</router-link>

			
 
				+      </div>

			
 
				+      <div class="content flex-item flex-h">

			
 
				+        <div class="slideMenus">

			
 
				+          <div>

			
 
				+            <ul>

			
 
				+              <li v-for="(item,index) in menuList" :key="index" :class="{'active': slideMenusActive == index}" @click="cutMenu(index)">

			
 
				+                <span>{{item.value}}</span>

			
 
				+                <span>{{item.eValue}}</span>

			
 
				+              </li>

			
 
				+            </ul>

			
 
				+          </div>

			
 
				+        </div>

			
 
				+        <div class="flex-item">

			
 
				+          <div>

			
 
				+            <swiper :options="swiperOption" ref="mySwiper">

			
 
				+              <swiper-slide class="swiper-slide" v-for="(item,index) in menuList" :key="index">

			
 
				+                <div class="flex-v">

			
 
				+                  <h4>{{item.value + ' ' + item.eValue}}</h4>

			
 
				+                  <div class="flex-item">

			
 
				+                    <div>

			
 
				+                      <swiper :options="subSwiperOption" ref="mySubSwiper">

			
 
				+                        <swiper-slide class="swiper-slide" v-for="(subItem,subIndex) in item.list" :key="subIndex">

			
 
				+                          <orderItem :data="subItem" @returnData="calcMenus" @selectSpec="selectSpec"></orderItem>

			
 
				+                        </swiper-slide>

			
 
				+                      </swiper>

			
 
				+                    </div>

			
 
				+                  </div>

			
 
				+                </div>

			
 
				+              </swiper-slide>

			
 
				+            </swiper>

			
 
				+          </div>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+    </div>

			
 
				+    <div class="flex-h">

			
 
				+      <div class="flex-item">

			
 
				+        <div>

			
 
				+          <span>总计</span>

			
 
				+          <span>{{totalNum}}</span>

			
 
				+          <span>杯</span>

			
 
				+          <span>共</span>

			
 
				+          <span>{{totalPrice}}</span>

			
 
				+          <span>元</span>

			
 
				+          <i class="iconfont" :class="{'icon-jiantou-up': !showCalcMenu,'icon-jiantou-down': showCalcMenu}" @click="showCalcMenu = true"></i>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+      <!-- <router-link :to="{name: 'placeOrderDetail', query: {info: JSON.stringify(settlementList)}}">下单</router-link> -->

			
 
				+      <a @click="showCalcMenu = true">下单</a>

			
 
				+    </div>

			
 
				+    <orderPopup :show="showPopup" :data="currentSpec" @closePopup="closePopup" @returnData="calcMenus"></orderPopup>

			
 
				+    <calcMenu :show="showCalcMenu" :totalNum="totalCupNum" :data="settlementList" @returnData="calcMenus" @emptyMenus="emptyMenus" @closeCalcMenu="closeCalcMenu" @placeOrder="placeOrder"></calcMenu>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+import orderItem from '../../../components/orderItem/index'

			
 
				+import orderPopup from '../../../components/orderPopup/index'

			
 
				+import calcMenu from '../../../components/calcMenu/index'

			
 
				+import { swiper, swiperSlide } from 'vue-awesome-swiper'

			
 
				+import 'swiper/dist/css/swiper.css'

			
 
				+

			
 
				+export default {

			
 
				+  name: '',

			
 
				+  data () {

			
 
				+    const _self = this

			
 
				+    return {

			
 
				+      totalCupNum: 0, // 共计使用杯数

			
 
				+      showCalcMenu: false, // 显隐已点菜单弹窗

			
 
				+      currentSpec: null, // 当前选择规格

			
 
				+      showPopup: false, // 显隐选规格弹窗

			
 
				+      totalNum: 0, // 总杯数

			
 
				+      totalPrice: 0, // 总价格

			
 
				+      settlementList: [], // 商品选择清单

			
 
				+      slideMenusActive: 0, // 左侧菜单选中索引值

			
 
				+      menuList: [{ // 商品数据

			
 
				+        value: '咖啡',

			
 
				+        eValue: 'Coffee',

			
 
				+        id: '1',

			
 
				+        status: 1,

			
 
				+        list: [{

			
 
				+          img: '',

			
 
				+          name: '商品名称',

			
 
				+          id: '1-1',

			
 
				+          status: 1,

			
 
				+          spec: [{

			
 
				+            value: '去冰',

			
 
				+            id: '1-1-1',

			
 
				+            num: 0,

			
 
				+            status: 0,

			
 
				+            price: '10',

			
 
				+          }, {

			
 
				+            value: '少冰',

			
 
				+            id: '1-1-2',

			
 
				+            num: 0,

			
 
				+            status: 1,

			
 
				+            price: '15',

			
 
				+          }, {

			
 
				+            value: '正常',

			
 
				+            id: '1-1-3',

			
 
				+            num: 0,

			
 
				+            status: 1,

			
 
				+            price: '20',

			
 
				+          }, {

			
 
				+            value: '多冰',

			
 
				+            id: '1-1-4',

			
 
				+            num: 0,

			
 
				+            status: 1,

			
 
				+            price: '25',

			
 
				+          }],

			
 
				+          price: '100',

			
 
				+        }, {

			
 
				+          img: '',

			
 
				+          name: '商品名称',

			
 
				+          id: '1-2',

			
 
				+          spec: [],

			
 
				+          status: 0,

			
 
				+          price: '100',

			
 
				+        }, {

			
 
				+          img: '',

			
 
				+          name: '商品名称',

			
 
				+          id: '1-3',

			
 
				+          spec: [],

			
 
				+          status: 1,

			
 
				+          price: '100',

			
 
				+        }, {

			
 
				+          img: '',

			
 
				+          name: '商品名称',

			
 
				+          id: '1-4',

			
 
				+          spec: [],

			
 
				+          status: 1,

			
 
				+          price: '100',

			
 
				+        }, {

			
 
				+          img: '',

			
 
				+          name: '商品名称',

			
 
				+          id: '1-5',

			
 
				+          spec: [],

			
 
				+          status: 1,

			
 
				+          price: '100',

			
 
				+        }, {

			
 
				+          img: '',

			
 
				+          name: '商品名称',

			
 
				+          id: '1-6',

			
 
				+          spec: [],

			
 
				+          status: 1,

			
 
				+          price: '100',

			
 
				+        }],

			
 
				+      }, {

			
 
				+        value: '咖啡一',

			
 
				+        eValue: 'Coffee',

			
 
				+        id: '2',

			
 
				+        status: 1,

			
 
				+        list: [],

			
 
				+      }, {

			
 
				+        value: '咖啡二',

			
 
				+        eValue: 'Coffee',

			
 
				+        id: '3',

			
 
				+        status: 1,

			
 
				+        list: [],

			
 
				+      }, {

			
 
				+        value: '咖啡三',

			
 
				+        eValue: 'Coffee',

			
 
				+        id: '4',

			
 
				+        status: 1,

			
 
				+        list: [],

			
 
				+      }, {

			
 
				+        value: '咖啡四',

			
 
				+        eValue: 'Coffee',

			
 
				+        id: '5',

			
 
				+        status: 1,

			
 
				+        list: [],

			
 
				+      }],

			
 
				+      swiperOption: {

			
 
				+        observer: true,

			
 
				+        direction: 'vertical',

			
 
				+        on: {

			
 
				+          transitionEnd () {

			
 
				+            _self.slideMenusActive = this.activeIndex

			
 
				+          },

			
 
				+        }

			
 
				+      },

			
 
				+      subSwiperOption: {

			
 
				+        observer: true,

			
 
				+        direction: 'vertical',

			
 
				+        nested: true,

			
 
				+        slidesPerView: 'auto',

			
 
				+        freeMode: true,

			
 
				+        freeModeMomentumVelocityRatio: 2,

			
 
				+      },

			
 
				+    }

			
 
				+  },

			
 
				+  computed: {

			
 
				+    MySwiper () {

			
 
				+      return this.$refs.mySwiper.swiper

			
 
				+    },

			
 
				+    MySubSwiper () {

			
 
				+      return this.$refs.mySubSwiper.swiper

			
 
				+    },

			
 
				+  },

			
 
				+  components: {

			
 
				+    swiper,

			
 
				+    swiperSlide,

			
 
				+    orderItem,

			
 
				+    orderPopup,

			
 
				+    calcMenu,

			
 
				+  },

			
 
				+  created () { },

			
 
				+  methods: {

			
 
				+    placeOrder () { // 下单

			
 
				+      this.$router.push({name: 'orderList', query: {}})

			
 
				+    },

			
 
				+    closeCalcMenu () { // 关闭已选菜单

			
 
				+      this.showCalcMenu = false

			
 
				+    },

			
 
				+    emptyMenus () { // 清空菜单

			
 
				+      this.settlementList = []

			
 
				+    },

			
 
				+    closePopup () { // 关闭规格弹窗

			
 
				+      this.showPopup = false

			
 
				+      this.currentSpec = null

			
 
				+    },

			
 
				+    selectSpec (val) { // 选规格

			
 
				+      this.currentSpec = val

			
 
				+      this.showPopup = true

			
 
				+    },

			
 
				+    cutMenu (index) { // 切换菜单

			
 
				+      this.MySwiper.slideTo(index, 300)

			
 
				+    },

			
 
				+    calcMenus (val) { // 计算清单

			
 
				+      var bool = true, arr = this.settlementList.slice()

			
 
				+      if (val.specId === null) {

			
 
				+        for (var n = 0; n < arr.length; n++) {

			
 
				+          if (arr[n].id === val.id && arr[n].specId === null) {

			
 
				+            bool = false

			
 
				+            arr[n] = val

			
 
				+          }

			
 
				+        }

			
 
				+        if (bool) {

			
 
				+          arr.push(val)

			
 
				+        }

			
 
				+      } else {

			
 
				+        for (var n = 0; n < arr.length; n++) {

			
 
				+          if (arr[n].specId === val.specId) {

			
 
				+            bool = false

			
 
				+            arr[n] = val

			
 
				+          }

			
 
				+        }

			
 
				+        if (bool) {

			
 
				+          arr.push(val)

			
 
				+        }

			
 
				+      }

			
 
				+      for (var n = 0; n < arr.length; n++) {

			
 
				+        if (arr[n].num === 0 || arr[n].defaultNum === 0) {

			
 
				+          arr.splice(n, 1)

			
 
				+        }

			
 
				+      }

			
 
				+      this.settlementList = arr

			
 
				+      // console.log(JSON.stringify(this.settlementList))

			
 
				+      this.calcTotalNum()

			
 
				+    },

			
 
				+    calcTotalNum () { // 计算总数量、价格

			
 
				+      var num = 0, price = 0

			
 
				+      if (!this.settlementList.length) {

			
 
				+        this.totalNum = 0

			
 
				+        this.totalPrice = 0

			
 
				+        return

			
 
				+      }

			
 
				+      for (var n = 0; n < this.settlementList.length; n++) {

			
 
				+        if (this.settlementList[n].specId === null) {

			
 
				+          num += this.settlementList[n].defaultNum

			
 
				+          price += this.settlementList[n].defaultPrice * this.settlementList[n].defaultNum

			
 
				+        } else {

			
 
				+          num += this.settlementList[n].num

			
 
				+          price += this.settlementList[n].price * this.settlementList[n].num

			
 
				+        }

			
 
				+      }

			
 
				+      this.totalNum = num

			
 
				+      this.totalPrice = price

			
 
				+    },

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->

			
 
				+<style lang="scss" scoped>

			
 
				+@import "page.scss";

			
 
				+</style>

			
--- a/src/pages/sales/placeOrder/page.scss
+++ b/src/pages/sales/placeOrder/page.scss
@@ -0,0 +1,241 @@
 
				+.mainPage{

			
 
				+  &>div.flex-item{

			
 
				+    position: relative;

			
 
				+    z-index: 1;

			
 
				+    .banner{

			
 
				+      width: 100%;

			
 
				+      position: relative;

			
 
				+      overflow: hidden;

			
 
				+      padding-bottom: 35%;

			
 
				+      background: #eee;

			
 
				+      img{

			
 
				+        z-index: 1;

			
 
				+      }

			
 
				+      .bannerInfo{

			
 
				+        width: 100%;

			
 
				+        position: absolute;

			
 
				+        left: 0;

			
 
				+        bottom: 0;

			
 
				+        z-index: 2;

			
 
				+        &>div{

			
 
				+          margin-left: .2rem;

			
 
				+          &>div{

			
 
				+            width: 100%;

			
 
				+            font-size: 0;

			
 
				+            white-space: nowrap;

			
 
				+            span{

			
 
				+              overflow: hidden;

			
 
				+              text-overflow: ellipsis;

			
 
				+              white-space: nowrap;

			
 
				+              font-size: .15rem;

			
 
				+              color: #fff;

			
 
				+              line-height: .4rem;

			
 
				+            }

			
 
				+          }

			
 
				+        }

			
 
				+        &>span{

			
 
				+          font-size: .15rem;

			
 
				+          color: #fff;

			
 
				+          line-height: .4rem;

			
 
				+          margin-right: .2rem;

			
 
				+          margin-left: .1rem;

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+    .tableInfo{

			
 
				+      align-items: center;

			
 
				+      border-bottom: .01rem solid #eee;

			
 
				+      &>div{

			
 
				+        margin-left: .2rem;

			
 
				+        &>div{

			
 
				+          width: 100%;

			
 
				+          position: relative;

			
 
				+          overflow: hidden;

			
 
				+          font-size: 0;

			
 
				+          white-space: nowrap;

			
 
				+          text-overflow: ellipsis;

			
 
				+          span{

			
 
				+            display: inline-block;

			
 
				+            line-height: .4rem;

			
 
				+            font-size: .13rem;

			
 
				+            margin-right: .1rem;

			
 
				+          }

			
 
				+        }

			
 
				+      }

			
 
				+      &>a{

			
 
				+        line-height: .22rem;

			
 
				+        font-size: .13rem;

			
 
				+        color: #fc6243;

			
 
				+        border: .01rem solid #fc6243;

			
 
				+        border-radius: .04rem;

			
 
				+        padding: 0 .05rem;

			
 
				+        margin-right: .2rem;

			
 
				+      }

			
 
				+    }

			
 
				+    .content{

			
 
				+      .slideMenus{

			
 
				+        width: 24%;

			
 
				+        min-width: .9rem;

			
 
				+        position: relative;

			
 
				+        overflow: hidden;

			
 
				+        &>div{

			
 
				+          width: 100%;

			
 
				+          position: absolute;

			
 
				+          left: 0;

			
 
				+          top: 0;

			
 
				+          bottom: 0;

			
 
				+          overflow-y: scroll;

			
 
				+          -webkit-overflow-scrolling: touch;

			
 
				+          transform: translateZ(0);

			
 
				+          -webkit-transform: translateZ(0);

			
 
				+          background: #f7f7f7;

			
 
				+          ul{

			
 
				+            width: 100%;

			
 
				+            overflow: hidden;

			
 
				+            position: relative;

			
 
				+            &>li{

			
 
				+              width: 100%;

			
 
				+              position: relative;

			
 
				+              overflow: hidden;

			
 
				+              padding: .18rem 0;

			
 
				+              &.active{

			
 
				+                background: #fff;

			
 
				+              }

			
 
				+              span{

			
 
				+                width: 100%;

			
 
				+                display: block;

			
 
				+                text-align: center;

			
 
				+                line-height: .22rem;

			
 
				+                font-size: .14rem;

			
 
				+              }

			
 
				+            }

			
 
				+          }

			
 
				+        }

			
 
				+      }

			
 
				+      &>div.flex-item{

			
 
				+        &>div{

			
 
				+          width: 100%;

			
 
				+          position: absolute;

			
 
				+          left: 0;

			
 
				+          top: 0;

			
 
				+          bottom: 0;

			
 
				+          overflow: hidden;

			
 
				+          &>div{

			
 
				+            width: 100%;

			
 
				+            position: absolute;

			
 
				+            left: 0;

			
 
				+            top: 0;

			
 
				+            bottom: 0;

			
 
				+            overflow: hidden;

			
 
				+            &>div{

			
 
				+                &>.swiper-slide{

			
 
				+                  &>div{

			
 
				+                    width: 100%;

			
 
				+                    position: absolute;

			
 
				+                    left: 0;

			
 
				+                    top: 0;

			
 
				+                    bottom: 0;

			
 
				+                    overflow: hidden;

			
 
				+                    &>h4{

			
 
				+                      width: 100%;

			
 
				+                      display: block;

			
 
				+                      line-height: .24rem;

			
 
				+                      font-size: .11rem;

			
 
				+                      text-indent: .1rem;

			
 
				+                      margin-top: .1rem;

			
 
				+                    }

			
 
				+                    &>div{

			
 
				+                      &>div{

			
 
				+                        width: 100%;

			
 
				+                        position: absolute;

			
 
				+                        left: 0;

			
 
				+                        top: 0;

			
 
				+                        bottom: 0;

			
 
				+                        overflow: hidden;

			
 
				+                        &>div{

			
 
				+                          width: 100%;

			
 
				+                          position: absolute;

			
 
				+                          left: 0;

			
 
				+                          top: 0;

			
 
				+                          bottom: 0;

			
 
				+                          .swiper-slide{

			
 
				+                            height: auto !important;

			
 
				+                            padding: .15rem 0;

			
 
				+                            position: relative;

			
 
				+                            &::after{

			
 
				+                              content: '';

			
 
				+                              width: 100%;

			
 
				+                              height: .01rem;

			
 
				+                              background: #eee;

			
 
				+                              position: absolute;

			
 
				+                              left: 0;

			
 
				+                              bottom: 0;

			
 
				+                              z-index: 1;

			
 
				+                            }

			
 
				+                            &::before{

			
 
				+                              content: '';

			
 
				+                              width: .36rem;

			
 
				+                              height: .01rem;

			
 
				+                              background: #fff;

			
 
				+                              position: absolute;

			
 
				+                              left: 0;

			
 
				+                              bottom: 0;

			
 
				+                              z-index: 2;

			
 
				+                            }

			
 
				+                          }

			
 
				+                        }

			
 
				+                      }

			
 
				+                    }

			
 
				+                    .menuItem{

			
 
				+                      width: 100%;

			
 
				+                      position: relative;

			
 
				+                      overflow: hidden;

			
 
				+                    }

			
 
				+                  }

			
 
				+              }

			
 
				+            }

			
 
				+          }

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+  &>div.flex-h{

			
 
				+    padding: .1rem 0;

			
 
				+    box-shadow: 0 0 .1rem .01rem rgba(0, 0, 0, .05);

			
 
				+    position: relative;

			
 
				+    z-index: 100;

			
 
				+    a{

			
 
				+      line-height: .4rem;

			
 
				+      background: #fc6243;

			
 
				+      color: #fff;

			
 
				+      padding: 0 .5rem;

			
 
				+      border-radius: .4rem;

			
 
				+      font-size: .15rem;

			
 
				+      margin-right: .2rem;

			
 
				+    }

			
 
				+    div{

			
 
				+      font-size: 0;

			
 
				+      white-space: nowrap;

			
 
				+      span{

			
 
				+        display: inline-block;

			
 
				+        line-height: .4rem;

			
 
				+        vertical-align: middle;

			
 
				+        font-size: .13rem;

			
 
				+        margin-left: .05rem;

			
 
				+        &:first-child{

			
 
				+          margin-left: .2rem;

			
 
				+        }

			
 
				+        &:nth-child(2){

			
 
				+          font-size: .18rem;

			
 
				+        }

			
 
				+      }

			
 
				+      i{

			
 
				+        display: inline-block;

			
 
				+        line-height: .4rem;

			
 
				+        vertical-align: middle;

			
 
				+        font-size: .13rem;

			
 
				+        margin-left: .1rem;

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+}
			
--- a/src/pages/sales/router.js
+++ b/src/pages/sales/router.js
@@ -0,0 +1,34 @@
 
				+import Vue from 'vue'

			
 
				+import Router from 'vue-router'

			
 
				+

			
 
				+import login from './login/index' // 登录

			
 
				+import coffeeIndex from './coffeeIndex/index' // 点单首页

			
 
				+import placeOrder from './placeOrder/index' // 城咖啡-点单

			
 
				+

			
 
				+Vue.use(Router)

			
 
				+

			
 
				+const router = new Router({

			
 
				+  routes: [{

			
 
				+    path: '/login',

			
 
				+    name: 'login',

			
 
				+    component: login,

			
 
				+    children: []

			
 
				+  },{

			
 
				+    path: '/coffeeIndex',

			
 
				+    name: 'coffeeIndex',

			
 
				+    component: coffeeIndex,

			
 
				+    children: []

			
 
				+  },{

			
 
				+    path: '/placeOrder',

			
 
				+    name: 'placeOrder',

			
 
				+    component: placeOrder,

			
 
				+    children: []

			
 
				+  }],

			
 
				+})

			
 
				+

			
 
				+router.beforeEach((to, from, next) => {

			
 
				+  

			
 
				+  next()

			
 
				+})

			
 
				+

			
 
				+export default router

			
--- a/src/pages/user/App.vue
+++ b/src/pages/user/App.vue
@@ -0,0 +1,22 @@
 
				+<template>

			
 
				+  <div id="app">

			
 
				+    <router-view></router-view>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+  import '../../common/css/reset.css'

			
 
				+

			
 
				+  export default {

			
 
				+    name: 'app',

			
 
				+    components: {}

			
 
				+  }

			
 
				+</script>

			
 
				+

			
 
				+<style>

			
 
				+  #app {

			
 
				+    width: 100%;

			
 
				+    height: 100%;

			
 
				+    position: relative;

			
 
				+  }

			
 
				+</style>

			
--- a/src/pages/user/app.js
+++ b/src/pages/user/app.js
@@ -0,0 +1,23 @@
 
				+import Vue from 'vue'

			
 
				+import App from './App.vue'

			
 
				+import Vant from 'vant'

			
 
				+import 'vant/lib/vant-css/index.css'

			
 
				+import router from './router'

			
 
				+import store from '../../store/index'

			
 
				+import Vuex from 'vuex'

			
 
				+import Ajax from '../../util/ajax'

			
 
				+import api from '../../util/api'

			
 
				+import toolClass from '../../util/util'

			
 
				+

			
 
				+Vue.use(Vant)

			
 
				+Vue.use(Vuex)

			
 
				+Vue.prototype.$api = api

			
 
				+Vue.prototype.$ajax = Ajax

			
 
				+Vue.prototype.toolClass = toolClass

			
 
				+/* eslint-disable no-new */

			
 
				+new Vue({

			
 
				+  el: '#app',

			
 
				+  router,

			
 
				+  store,

			
 
				+  render: h => h(App)

			
 
				+})

			
--- a/src/pages/user/bindMobile/bindMobile.vue
+++ b/src/pages/user/bindMobile/bindMobile.vue
@@ -0,0 +1,180 @@
 
				+<template>

			
 
				+  <div class="mainPage">

			
 
				+    <div class="mask">

			
 
				+      <img :src="logo" class="logo" alt="">

			
 
				+      <div class="box">

			
 
				+        <div class="title">绑定</div>

			
 
				+

			
 
				+        <div class="mobile">

			
 
				+          <i class="iconfont icon-dianhua"></i>

			
 
				+          <input type="number" maxlength="11" placeholder="手机号" v-model="postData.phone">

			
 
				+        </div>

			
 
				+

			
 
				+        <div class="recommend">

			
 
				+          <span>推荐人</span>

			
 
				+          <div @click="selectCase">

			
 
				+            <span>{{caseName}}</span>

			
 
				+            <i class="iconfont icon-triangle-bottom"></i>

			
 
				+          </div>

			
 
				+          <div @click="selectSales">

			
 
				+            <span>{{salesName}}</span>

			
 
				+            <i class="iconfont icon-triangle-bottom"></i>

			
 
				+          </div>

			
 
				+        </div>

			
 
				+

			
 
				+        <div class="sms">

			
 
				+          <i class="iconfont icon-mima"></i>

			
 
				+          <input type="number" maxlength="6" placeholder="验证码" v-model="postData.captcha">

			
 
				+          <div class="sand" v-if="seconds === 60" @click="sandMsg">发送验证码</div>

			
 
				+          <div class="sand" v-else>{{seconds}}后可重发</div>

			
 
				+        </div>

			
 
				+

			
 
				+        <div class="submit" @click="submit">

			
 
				+          <div>提交</div>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+      <transition name="slide">

			
 
				+        <div class="select" v-if="showCase">

			
 
				+          <van-picker

			
 
				+            show-toolbar

			
 
				+            title="请选择"

			
 
				+            value-key='CaseName'

			
 
				+            :columns="columns"

			
 
				+            @cancel="onCancelC"

			
 
				+            @confirm="onConfirmC"

			
 
				+          />

			
 
				+        </div>

			
 
				+      </transition>

			
 
				+      <transition name="slide">

			
 
				+        <div class="select" v-if="showSales">

			
 
				+          <van-picker

			
 
				+            show-toolbar

			
 
				+            title="请选择"

			
 
				+            value-key='UserName'

			
 
				+            :columns="columnsS"

			
 
				+            @cancel="onCancelS"

			
 
				+            @confirm="onConfirmS"

			
 
				+          />

			
 
				+        </div>

			
 
				+      </transition>

			
 
				+    </div>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+import logo from '../../../common/icon/logo.png'

			
 
				+import { mapState, createNamespacedHelpers } from 'vuex'

			
 
				+const { mapActions: actions } = createNamespacedHelpers('userCenter')

			
 
				+export default {

			
 
				+  data () {

			
 
				+    return {

			
 
				+      logo,

			
 
				+      showCase: false,

			
 
				+      showSales: false,

			
 
				+      columns: [],

			
 
				+      columnsS: [],

			
 
				+      caseName: '选择案场',

			
 
				+      salesName: '选择销售',

			
 
				+      seconds: 60,

			
 
				+      postData: {

			
 
				+        phone: '',

			
 
				+        case: '',

			
 
				+        sales: '',

			
 
				+        captcha: ''

			
 
				+      }

			
 
				+    }

			
 
				+  },

			
 
				+  computed: {

			
 
				+    ...mapState({

			
 
				+      caseInfo: x => x.userCenter.caseInfo

			
 
				+    })

			
 
				+  },

			
 
				+  created () {

			
 
				+    this.getCaseInfo(1).then(() => {

			
 
				+      this.columns = this.caseInfo.cases

			
 
				+    })

			
 
				+  },

			
 
				+  methods: {

			
 
				+    ...actions(['getCaseInfo']),

			
 
				+    ...actions(['getCaptcha']),

			
 
				+    ...actions(['submitData']),

			
 
				+    onConfirmC (value, index) {

			
 
				+      this.caseName = value.CaseName

			
 
				+      this.postData.case = value.CaseId

			
 
				+      this.columnsS = []

			
 
				+      this.salesName = '选择销售'

			
 
				+      if (this.caseInfo.sales) {

			
 
				+        for (let i = 0; i < this.caseInfo.sales.length; i++) {

			
 
				+          if (this.caseInfo.sales[i].CaseId === this.postData.case) {

			
 
				+            this.columnsS.push(this.caseInfo.sales[i])

			
 
				+          }

			
 
				+        }

			
 
				+      }

			
 
				+      this.showCase = false

			
 
				+    },

			
 
				+    onCancelC () {

			
 
				+      this.showCase = false

			
 
				+    },

			
 
				+    onConfirmS (value, index) {

			
 
				+      this.salesName = value.UserName

			
 
				+      this.postData.sales = value.UserId

			
 
				+      this.showSales = false

			
 
				+    },

			
 
				+    onCancelS () {

			
 
				+      this.showSales = false

			
 
				+    },

			
 
				+    selectCase () {

			
 
				+      this.showCase = true

			
 
				+    },

			
 
				+    selectSales () {

			
 
				+      if (!this.postData.case) {

			
 
				+        this.$toast('请先选择案场')

			
 
				+        return

			
 
				+      } else if (this.columnsS.length <= 0) {

			
 
				+        this.$toast('此案场无销售')

			
 
				+        return

			
 
				+      }

			
 
				+      this.showSales = true

			
 
				+    },

			
 
				+    sandMsg () {

			
 
				+      if (!this.postData.phone) {

			
 
				+        this.$toast('请先填写手机号')

			
 
				+        return

			
 
				+      }

			
 
				+      this.getCaptcha(this.postData.phone)

			
 
				+      this.runTime()

			
 
				+    },

			
 
				+    runTime () {

			
 
				+      setTimeout(() => {

			
 
				+        this.seconds--

			
 
				+        if (this.seconds < 60 && this.seconds >= 1) {

			
 
				+          this.runTime()

			
 
				+        } else if (this.seconds < 1) {

			
 
				+          this.seconds = 60

			
 
				+        }

			
 
				+      }, 1000)

			
 
				+    },

			
 
				+    submit () {

			
 
				+      if (!this.postData.captcha) {

			
 
				+        this.$toast('请先获取验证码')

			
 
				+        return

			
 
				+      }

			
 
				+      if (!this.postData.case) {

			
 
				+        this.$toast('请选择案场')

			
 
				+        return

			
 
				+      }

			
 
				+      if (!this.postData.sales) {

			
 
				+        this.$toast('请选择销售')

			
 
				+        return

			
 
				+      }

			
 
				+      this.submitData(this.postData).then((res) => {

			
 
				+        this.$toast(res)

			
 
				+      })

			
 
				+    }

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<style lang="scss" scoped>

			
 
				+@import "page.scss";

			
 
				+</style>

			
--- a/src/pages/user/bindMobile/page.scss
+++ b/src/pages/user/bindMobile/page.scss
@@ -0,0 +1,129 @@
 
				+.mainPage {

			
 
				+  background: url("../../../common/icon/bg.jpg") no-repeat 0 -0.8rem;

			
 
				+  background-size: 100% calc(100% + 90px);

			
 
				+  position: relative;

			
 
				+  .mask{

			
 
				+    width: 100%;

			
 
				+    height: 100%;

			
 
				+    display: flex;

			
 
				+    justify-content: center;

			
 
				+    align-items: center;

			
 
				+    // background: rgba(0,0,0,0.3);

			
 
				+    position: relative;

			
 
				+    .logo{

			
 
				+      position: absolute;

			
 
				+      top: .5rem;

			
 
				+      left: .3rem;

			
 
				+      width: 1.8rem;

			
 
				+    }

			
 
				+    .select {

			
 
				+      position: absolute;

			
 
				+      bottom: 0;

			
 
				+      left: 0;

			
 
				+      width: 100%;

			
 
				+    }

			
 
				+    .box{

			
 
				+      width: 3.25rem;

			
 
				+      height: 3.34rem;

			
 
				+      background:rgba(255,255,255,1);

			
 
				+      border-radius:8px;

			
 
				+      padding: .2rem;

			
 
				+      box-sizing: border-box;

			
 
				+      .title{

			
 
				+        font-size: .16rem;

			
 
				+        font-weight: bold;

			
 
				+        text-align: center;

			
 
				+        padding-bottom: .24rem;

			
 
				+      }

			
 
				+      .mobile,.sms{

			
 
				+        width: 2.85rem;

			
 
				+        height: .5rem;

			
 
				+        background:rgba(255,255,255,1);

			
 
				+        border-radius:8px;

			
 
				+        border:1px solid rgba(168,182,200,0.2);

			
 
				+        display: flex;

			
 
				+        align-items: center;

			
 
				+        position: relative;

			
 
				+        i{

			
 
				+          color: rgba(168,182,200,1);

			
 
				+          padding: .14rem;

			
 
				+          font-size: .18rem;

			
 
				+        }

			
 
				+        input{

			
 
				+          flex: 1;

			
 
				+          height: 100%;

			
 
				+        }

			
 
				+        .sand{

			
 
				+          padding: 0 .1rem;

			
 
				+          height: .24rem;

			
 
				+          border-radius:20px;

			
 
				+          border:1px solid rgba(218,218,218,1);

			
 
				+          color: rgba(218,218,218,1);

			
 
				+          font-size: .12rem;

			
 
				+          text-align: center;

			
 
				+          line-height: .24rem;

			
 
				+          position: absolute;

			
 
				+          right: .1rem;

			
 
				+        }

			
 
				+      }

			
 
				+      .recommend{

			
 
				+        width: 2.85rem;

			
 
				+        height: .4rem;

			
 
				+        padding: .15rem 0;

			
 
				+        display: flex;

			
 
				+        align-items: center;

			
 
				+        justify-content: space-between;

			
 
				+        span{

			
 
				+          color: rgba(168,182,200,1);

			
 
				+        }

			
 
				+        i{

			
 
				+          color: rgba(168,182,200,1);

			
 
				+          padding-left: .14rem;

			
 
				+          font-size: .12rem;

			
 
				+        }

			
 
				+        div{

			
 
				+          height: 100%;

			
 
				+          display: flex;

			
 
				+          flex: 1;

			
 
				+          margin-left: .1rem;

			
 
				+          align-items: center;

			
 
				+          border-radius:8px;

			
 
				+          border:1px solid rgba(168,182,200,0.2);

			
 
				+          padding: .1rem;

			
 
				+          box-sizing: border-box;

			
 
				+          span{

			
 
				+            width: 70%;

			
 
				+            overflow:hidden;

			
 
				+            text-overflow:ellipsis;

			
 
				+            white-space:nowrap;

			
 
				+          }

			
 
				+        }

			
 
				+      }

			
 
				+      .submit{

			
 
				+        margin-top: .24rem;

			
 
				+        width: 2.85rem;

			
 
				+        height: .48rem;

			
 
				+        border-radius:25px;

			
 
				+        border:1px solid rgba(255,66,28,1);

			
 
				+        text-align: center;

			
 
				+        line-height: .48rem;

			
 
				+        div{

			
 
				+          font-size: .15rem;

			
 
				+          color: rgba(255,66,28,1);

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+}

			
 
				+

			
 
				+.slide-enter-active {

			
 
				+  transition: all .3s ease;

			
 
				+}

			
 
				+.slide-leave-active {

			
 
				+  transition: all .3s ease;

			
 
				+}

			
 
				+.slide-enter, .slide-leave-to

			
 
				+/* .slide-fade-leave-active for below version 2.1.8 */ {

			
 
				+  transform: translateY(2.6rem);

			
 
				+  opacity: 0;

			
 
				+}

			
--- a/src/pages/user/card/index.vue
+++ b/src/pages/user/card/index.vue
@@ -0,0 +1,176 @@
 
				+<template>

			
 
				+  <div class="mainPage">

			
 
				+    <nav class="flex-h">

			
 
				+      <a class="flex-item" v-for="(item,index) in nav" :key="index" :class="{'active':index==active}" @click="change(item,index)">{{item}}</a>

			
 
				+    </nav>

			
 
				+    <scroll ref='scroll' :isloading='isloading' class='wrapper' :data='data[active].list' :pullUpLoad='pullUpLoadObj' :startY='parseInt(startY)' @pullingUp='getList'>

			
 
				+      <div class="box">

			
 
				+        <div v-if="active == 0">

			
 
				+          <discounts v-for="(item,index) in data[0].list" :key='index' @toUse='toUse' :data='item' @toDetail="toCouponsDetail(item)"></discounts>

			
 
				+          <noMore v-if="data[active].hasPic"></noMore>

			
 
				+        </div>

			
 
				+        <div v-if="active == 1">

			
 
				+          <div class="fitness-card" v-for="(item,index) in data[1].list" :key='index'>

			
 
				+            <div :class="{'opacity' : item.useType == '已失效' || item.useType == '已使用', 'gray': item.useType == '已使用'}" @click="toCardDetail(item)">

			
 
				+              <div class="card-top">

			
 
				+                <div class="top-left">

			
 
				+                  <img :src="logo" alt="">

			
 
				+                  <div class="price">

			
 
				+                    <span>￥</span>

			
 
				+                    <h1>{{item.price}}</h1>

			
 
				+                    <span>元</span>

			
 
				+                  </div>

			
 
				+                </div>

			
 
				+                <div class="top-right">

			
 
				+                  <img :src="Line3" alt="">

			
 
				+                  <div>{{item.title}}</div>

			
 
				+                  <div>{{item.desc}}</div>

			
 
				+                </div>

			
 
				+              </div>

			
 
				+              <div class="card-bottom">

			
 
				+                <img :src="line" alt="">

			
 
				+                <div class="time">有效期:{{item.time}}</div>

			
 
				+                <div class="status" :class="{'gray-location' : item.useType == '已使用'}">

			
 
				+                  <span>{{item.tag}}</span>

			
 
				+                </div>

			
 
				+              </div>

			
 
				+            </div>

			
 
				+            <div class="useType">

			
 
				+              <img :src="used" alt="已使用" v-if="item.useType == '已使用'" width="100%" height="100%">

			
 
				+              <img :src="failure" alt="已失效" v-if="item.useType == '已失效'" width="100%" height="100%">

			
 
				+            </div>

			
 
				+          </div>

			
 
				+          <noMore v-if="data[active].hasPic"></noMore>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+    </scroll>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+import line from '../../../common/icon/cicyle.png'

			
 
				+import logo from '../../../common/icon/logo-t.png'

			
 
				+import Line3 from '../../../common/icon/Line3.png'

			
 
				+import used from '../../../common/icon/already.png'

			
 
				+import failure from '../../../common/icon/inv.png'

			
 
				+// 上拉加载组件

			
 
				+import scroll from '../../../components/scroll/scroll'

			
 
				+import noMore from '../../../components/noMore/noMore'

			
 
				+import discounts from '../../../components/discounts/discounts'

			
 
				+export default {

			
 
				+  data () {

			
 
				+    return {

			
 
				+      nav: ['课程体验卡', '健身卡'],

			
 
				+      active: 0,

			
 
				+      logo,

			
 
				+      Line3,

			
 
				+      used,

			
 
				+      failure,

			
 
				+      pullUpLoad: true,

			
 
				+      pullUpLoadThreshold: 40,

			
 
				+      startY: 0,

			
 
				+      isloading: true,

			
 
				+      hasMore: true,

			
 
				+      data: [

			
 
				+        {

			
 
				+          hasPic: false,

			
 
				+          hasMore: true,

			
 
				+          list: [

			
 
				+            {

			
 
				+              title: '小小外交官体验卡',

			
 
				+              desc: '凭此体验券可让一位小朋友体验一次 适用于小小外交官课程',

			
 
				+              time: '2018年02月17日',

			
 
				+              useType: '未使用',

			
 
				+              tag: '共享'

			
 
				+            },

			
 
				+            {

			
 
				+              title: '小小外交官体验卡',

			
 
				+              desc: '凭此体验券可让一位小朋友体验一次 适用于小小外交官课程',

			
 
				+              time: '2018年02月17日',

			
 
				+              useType: '已使用',

			
 
				+              tag: '商品'

			
 
				+            },

			
 
				+            {

			
 
				+              title: '小小外交官体验卡',

			
 
				+              desc: '凭此体验券可让一位小朋友体验一次 适用于小小外交官课程',

			
 
				+              time: '2018年02月17日',

			
 
				+              useType: '已失效',

			
 
				+              tag: '商品'

			
 
				+            }

			
 
				+          ]

			
 
				+        },

			
 
				+        {

			
 
				+          hasPic: false,

			
 
				+          hasMore: true,

			
 
				+          list: [

			
 
				+            {

			
 
				+              title: '会所健身体验卡',

			
 
				+              desc: '适用于游泳',

			
 
				+              time: '2018年02月17日-2018年3月17日',

			
 
				+              price: '120',

			
 
				+              useType: '未使用',

			
 
				+              tag: '年卡'

			
 
				+            },

			
 
				+            {

			
 
				+              title: '会所健身体验卡',

			
 
				+              desc: '适用于游泳',

			
 
				+              time: '2018年02月17日-2018年3月17日',

			
 
				+              price: '120',

			
 
				+              useType: '已使用',

			
 
				+              tag: '季卡'

			
 
				+            },

			
 
				+            {

			
 
				+              title: '会所健身体验卡',

			
 
				+              desc: '适用于游泳',

			
 
				+              time: '2018年02月17日-2018年3月17日',

			
 
				+              price: '120',

			
 
				+              useType: '已失效',

			
 
				+              tag: '次卡'

			
 
				+            }

			
 
				+          ]

			
 
				+        }

			
 
				+      ],

			
 
				+      line

			
 
				+    }

			
 
				+  },

			
 
				+  components: {

			
 
				+    scroll,

			
 
				+    noMore,

			
 
				+    discounts

			
 
				+  },

			
 
				+  computed: {

			
 
				+    pullUpLoadObj: function () {

			
 
				+      return this.pullUpLoad

			
 
				+        ? {

			
 
				+          threshold: parseInt(this.pullUpLoadThreshold),

			
 
				+          txt: {

			
 
				+            more: this.pullUpLoadMoreTxt,

			
 
				+            noMore: this.pullUpLoadNoMoreTxt

			
 
				+          }

			
 
				+        }

			
 
				+        : false

			
 
				+    }

			
 
				+  },

			
 
				+  methods: {

			
 
				+    change (item, index) {

			
 
				+      this.active = index

			
 
				+    },

			
 
				+    toUse (item) {

			
 
				+      console.log(item)

			
 
				+    },

			
 
				+    getList () {

			
 
				+      console.log(111)

			
 
				+    },

			
 
				+    toCardDetail (item) {

			
 
				+      this.$router.push({ name: 'cardDetail' })

			
 
				+    },

			
 
				+    toCouponsDetail () {

			
 
				+      this.$router.push({ name: 'couponsDetail' })

			
 
				+    }

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<style lang="scss" scoped>

			
 
				+@import "page.scss";

			
 
				+</style>

			
--- a/src/pages/user/card/page.scss
+++ b/src/pages/user/card/page.scss
@@ -0,0 +1,163 @@
 
				+.mainPage{

			
 
				+  background: #fff;

			
 
				+  nav{

			
 
				+    white-space: nowrap;

			
 
				+    overflow-x: scroll;

			
 
				+    -webkit-overflow-scrolling: touch;

			
 
				+    font-size: 0;

			
 
				+    padding: .09rem 0;

			
 
				+    background: #fff;

			
 
				+    z-index: 100;

			
 
				+    position: relative;

			
 
				+    a{

			
 
				+      line-height: .32rem;

			
 
				+      text-align: center;

			
 
				+      position: relative;

			
 
				+      &.active::after{

			
 
				+        content: '';

			
 
				+        width: 20%;

			
 
				+        height: .02rem;

			
 
				+        display: block;

			
 
				+        position: absolute;

			
 
				+        left: 50%;

			
 
				+        bottom: 0;

			
 
				+        transform: translateX(-50%);

			
 
				+        -webkit-transform: translateX(-50%);

			
 
				+        background: #fc6243;

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+  .box{

			
 
				+    padding: .25rem;

			
 
				+    box-sizing: border-box;

			
 
				+    .fitness-card{

			
 
				+      overflow: hidden;

			
 
				+      background: rgba(255,255,255,1);

			
 
				+      box-shadow: 0px 2px .1rem 0px rgba(193,204,217,0.5);

			
 
				+      border-radius: 8px;

			
 
				+      margin-bottom: .2rem;

			
 
				+      position: relative;

			
 
				+      .opacity {

			
 
				+        opacity: .5;

			
 
				+      }

			
 
				+      .gray {

			
 
				+        filter: grayscale(100%);

			
 
				+      }

			
 
				+      .card-top{

			
 
				+        display: flex;

			
 
				+        .top-left{

			
 
				+          padding: .09rem;

			
 
				+          position: relative;

			
 
				+          box-sizing: border-box;

			
 
				+          img{

			
 
				+            width: 1.15rem;

			
 
				+            position: absolute;

			
 
				+            top: .09rem;

			
 
				+            left: .09rem;

			
 
				+          }

			
 
				+          .price{

			
 
				+            display: flex;

			
 
				+            width: 1.1rem;

			
 
				+            height: 1.1rem;

			
 
				+            justify-content: center;

			
 
				+            align-items: baseline;

			
 
				+            line-height: 1.1rem;

			
 
				+            span{

			
 
				+              font-size: .14rem;

			
 
				+              color: #FC6243;

			
 
				+            }

			
 
				+            h1{

			
 
				+              font-size: .36rem;

			
 
				+              color: #FC6243;

			
 
				+            }

			
 
				+          }

			
 
				+        }

			
 
				+        .top-right {

			
 
				+          position: relative;

			
 
				+          flex: 1;

			
 
				+          box-sizing: border-box;

			
 
				+          padding: .21rem .14rem;

			
 
				+          img{

			
 
				+            position: absolute;

			
 
				+            left: 0;

			
 
				+            top: 50%;

			
 
				+            height: 60%;

			
 
				+            transform: translateY(-50%);

			
 
				+          }

			
 
				+          div:nth-of-type(1){

			
 
				+            font-size: .18rem;

			
 
				+            font-weight: 600;

			
 
				+            color: rgba(50,54,69,1);

			
 
				+            padding-bottom: .16rem;

			
 
				+          }

			
 
				+          div:nth-of-type(2){

			
 
				+            font-size: .12rem;

			
 
				+            color: rgba(50,54,69,1);

			
 
				+          }

			
 
				+        }

			
 
				+      }

			
 
				+      .card-bottom{

			
 
				+        position: relative;

			
 
				+        padding: .06rem .2rem .12rem;

			
 
				+        box-sizing: border-box;

			
 
				+        img{

			
 
				+          width: 100%;

			
 
				+          height: .07rem;

			
 
				+          position: absolute;

			
 
				+          top: -0.15rem;

			
 
				+          left: 0rem;

			
 
				+        }

			
 
				+        .time {

			
 
				+          font-size: .12rem;

			
 
				+          color: rgba(50,54,69,1);

			
 
				+          overflow: hidden;

			
 
				+        }

			
 
				+        .status{

			
 
				+          position: absolute;

			
 
				+          background:linear-gradient(45deg,rgba(255,105,0,1) 0%,rgba(255,136,0,0.76) 100%);

			
 
				+          opacity:0.85;

			
 
				+          width: .6rem;

			
 
				+          height: .6rem;

			
 
				+          transform: rotate(45deg);

			
 
				+          bottom: -0.3rem;

			
 
				+          right: -0.3rem;

			
 
				+          &.gray-location{

			
 
				+            background: rgba(189,189,189,1);

			
 
				+          }

			
 
				+          span{

			
 
				+            position: absolute;

			
 
				+            top: .22rem;

			
 
				+            left: -0.03rem;

			
 
				+            font-size: .12rem;

			
 
				+            color: #fff;

			
 
				+            transform: rotate(-90deg);

			
 
				+          }

			
 
				+        }

			
 
				+      }

			
 
				+      .useType{

			
 
				+        position: absolute;

			
 
				+        bottom: .25rem;

			
 
				+        right: .25rem;

			
 
				+        width: .76rem;

			
 
				+        height: .76rem;

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+}

			
 
				+

			
 
				+@media screen and (max-width: 320px) {

			
 
				+  .mainPage{

			
 
				+    .box{

			
 
				+      .fitness-card{

			
 
				+        .card-bottom{

			
 
				+          .status{

			
 
				+            span{

			
 
				+              top: .2rem !important;

			
 
				+              left: -0.05rem !important;

			
 
				+            }

			
 
				+          }

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+}

			
--- a/src/pages/user/cardDetail/index.vue
+++ b/src/pages/user/cardDetail/index.vue
@@ -0,0 +1,57 @@
 
				+<template>

			
 
				+  <div class="mainPage">

			
 
				+    <div class="title">体验卡详情</div>

			
 
				+    <div class="content">

			
 
				+      <div class="message">

			
 
				+        <div>

			
 
				+          <span>会所健身体验卡</span>

			
 
				+          <span class="sub">(可在银城会所健身房和游泳池使用)</span>

			
 
				+        </div>

			
 
				+        <div>

			
 
				+          <span>有效时间</span>

			
 
				+          <span>{{time}}</span>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+      <div class="rule">

			
 
				+        <div>使用规则</div>

			
 
				+        <div>1. 此卡不可兑换现金，不可与其他优惠活动同时使用。 </div>

			
 
				+        <div>2. 此卡不可多人使用，一人记一次。 </div>

			
 
				+        <div>3. 非会员可凭此卡享受对应课程。 </div>

			
 
				+        <div>4. 截止日期至{{time}}。 </div>

			
 
				+      </div>

			
 
				+      <div class="line">

			
 
				+        <img :src="Artboard" alt="" width="100%">

			
 
				+      </div>

			
 
				+      <div class="qr-code" style="margin-top:.1rem;">

			
 
				+        <div class="number">核销编码: 3423487682734</div>

			
 
				+        <qrCode :msg='msg'></qrCode>

			
 
				+      </div>

			
 
				+    </div>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+import qrCode from '../../../components/qrCodeCard/qrCodeCard'

			
 
				+import Artboard from '../../../common/icon/Artboard.png'

			
 
				+export default {

			
 
				+  data () {

			
 
				+    return {

			
 
				+      msg: {

			
 
				+        course_type: 800

			
 
				+      },

			
 
				+      Artboard,

			
 
				+      time: '2018年3月17日'

			
 
				+    }

			
 
				+  },

			
 
				+  methods: {

			
 
				+

			
 
				+  },

			
 
				+  components: {

			
 
				+    qrCode

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<style lang="scss" scoped>

			
 
				+@import "page.scss";

			
 
				+</style>

			
--- a/src/pages/user/cardDetail/page.scss
+++ b/src/pages/user/cardDetail/page.scss
@@ -0,0 +1,60 @@
 
				+.mainPage{

			
 
				+  padding: .3rem .16rem .45rem;

			
 
				+  box-sizing: border-box;

			
 
				+  .title{

			
 
				+    font-size: .18rem;

			
 
				+    font-weight: bold;

			
 
				+    padding-bottom: .14rem;

			
 
				+    padding-left: .2rem;

			
 
				+  }

			
 
				+  .content{

			
 
				+    background:#fff;

			
 
				+    box-shadow:0px .08rem .37rem 0px rgba(202,202,202,0.42);

			
 
				+    border-radius:.1rem;

			
 
				+    padding: .12rem 0;

			
 
				+    .message{

			
 
				+      padding: 0 .22rem;

			
 
				+      div{

			
 
				+        margin-bottom: .2rem;

			
 
				+        display: flex;

			
 
				+        justify-content: space-between;

			
 
				+        align-items: center;

			
 
				+        span:nth-of-type(1){

			
 
				+          font-size: .14rem;

			
 
				+        }

			
 
				+        span:nth-last-of-type(1){

			
 
				+          text-align: right;

			
 
				+        }

			
 
				+        .sub{

			
 
				+          color: #FA2A00;

			
 
				+          font-size: .12rem;

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+    .rule{

			
 
				+      padding: 0 .22rem;

			
 
				+      div:nth-of-type(1){

			
 
				+        margin-bottom: .2rem;

			
 
				+        font-size: .14rem;

			
 
				+        color: #000;

			
 
				+      }

			
 
				+      div{

			
 
				+        font-size: .12rem;

			
 
				+        color: rgba(174,174,174,1);

			
 
				+        margin-bottom: .1rem;

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+  .number{

			
 
				+    text-align: center;

			
 
				+    color:rgba(143,143,143,1);

			
 
				+    margin-bottom: .2rem;

			
 
				+  }

			
 
				+  .useType{

			
 
				+    position: absolute;

			
 
				+    bottom: 1.6rem;

			
 
				+    right: .8rem;

			
 
				+    width: .76rem;

			
 
				+    height: .76rem;

			
 
				+  }

			
 
				+}
			
--- a/src/pages/user/coupons/index.vue
+++ b/src/pages/user/coupons/index.vue
@@ -0,0 +1,97 @@
 
				+<template>

			
 
				+  <div class="mainPage">

			
 
				+    <scroll ref='scroll' :isloading='isloading' class='wrapper' :data='list' :pullUpLoad='pullUpLoadObj' :startY='parseInt(startY)' @pullingUp='getList'>

			
 
				+      <div class="box">

			
 
				+        <discounts v-for="(item,index) in list" :key='index' @toUse='toUse' :data='item'></discounts>

			
 
				+        <noMore v-if="hasPic"></noMore>

			
 
				+      </div>

			
 
				+    </scroll>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+import line from '../../../common/icon/cicyle.png'

			
 
				+import logo from '../../../common/icon/logo-t.png'

			
 
				+import Line3 from '../../../common/icon/Line3.png'

			
 
				+import used from '../../../common/icon/already.png'

			
 
				+import failure from '../../../common/icon/inv.png'

			
 
				+// 上拉加载组件

			
 
				+import scroll from '../../../components/scroll/scroll'

			
 
				+import noMore from '../../../components/noMore/noMore'

			
 
				+import discounts from '../../../components/discounts/discounts'

			
 
				+export default {

			
 
				+  data () {

			
 
				+    return {

			
 
				+      nav: ['课程体验卡', '健身卡'],

			
 
				+      active: 0,

			
 
				+      logo,

			
 
				+      Line3,

			
 
				+      used,

			
 
				+      failure,

			
 
				+      pullUpLoad: true,

			
 
				+      pullUpLoadThreshold: 40,

			
 
				+      startY: 0,

			
 
				+      isloading: true,

			
 
				+      hasPic: false,

			
 
				+      hasMore: true,

			
 
				+      list: [

			
 
				+        {

			
 
				+          title: '小小外交官体验卡',

			
 
				+          desc: '凭此体验券可让一位小朋友体验一次 适用于小小外交官课程',

			
 
				+          time: '2018年02月17日',

			
 
				+          useType: '未使用',

			
 
				+          tag: '共享'

			
 
				+        },

			
 
				+        {

			
 
				+          title: '小小外交官体验卡',

			
 
				+          desc: '凭此体验券可让一位小朋友体验一次 适用于小小外交官课程',

			
 
				+          time: '2018年02月17日',

			
 
				+          useType: '已使用',

			
 
				+          tag: '商品'

			
 
				+        },

			
 
				+        {

			
 
				+          title: '小小外交官体验卡',

			
 
				+          desc: '凭此体验券可让一位小朋友体验一次 适用于小小外交官课程',

			
 
				+          time: '2018年02月17日',

			
 
				+          useType: '已失效',

			
 
				+          tag: '商品'

			
 
				+        }

			
 
				+      ],

			
 
				+      line

			
 
				+    }

			
 
				+  },

			
 
				+  components: {

			
 
				+    scroll,

			
 
				+    noMore,

			
 
				+    discounts

			
 
				+  },

			
 
				+  computed: {

			
 
				+    pullUpLoadObj: function () {

			
 
				+      return this.pullUpLoad

			
 
				+        ? {

			
 
				+          threshold: parseInt(this.pullUpLoadThreshold),

			
 
				+          txt: {

			
 
				+            more: this.pullUpLoadMoreTxt,

			
 
				+            noMore: this.pullUpLoadNoMoreTxt

			
 
				+          }

			
 
				+        }

			
 
				+        : false

			
 
				+    }

			
 
				+  },

			
 
				+  methods: {

			
 
				+    change (item, index) {

			
 
				+      this.active = index

			
 
				+    },

			
 
				+    toUse (item) {

			
 
				+      console.log(item)

			
 
				+    },

			
 
				+    getList () {

			
 
				+      console.log(111)

			
 
				+    }

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<style lang="scss" scoped>

			
 
				+@import "page.scss";

			
 
				+</style>

			
--- a/src/pages/user/coupons/page.scss
+++ b/src/pages/user/coupons/page.scss
@@ -0,0 +1,7 @@
 
				+.mainPage{

			
 
				+  background: #fff;

			
 
				+  .box{

			
 
				+    padding: .25rem;

			
 
				+    box-sizing: border-box;

			
 
				+  }

			
 
				+}
			
--- a/src/pages/user/couponsDetail/index.vue
+++ b/src/pages/user/couponsDetail/index.vue
@@ -0,0 +1,56 @@
 
				+<template>

			
 
				+  <div class="mainPage">

			
 
				+    <div class="title">体验券详情</div>

			
 
				+    <div class="content">

			
 
				+      <div class="message">

			
 
				+        <div>

			
 
				+          <span>体验券名称：小小外交官体验券</span>

			
 
				+        </div>

			
 
				+        <div>

			
 
				+          <span>有效时间：</span>

			
 
				+          <div class="time">{{time}}</div>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+      <div class="rule">

			
 
				+        <div>使用规则</div>

			
 
				+        <div>1. 此卡不可兑换现金，不可与其他优惠活动同时使用。 </div>

			
 
				+        <div>2. 此卡不可多人使用，一人记一次。 </div>

			
 
				+        <div>3. 非会员可凭此卡享受对应课程。 </div>

			
 
				+        <div>4. 截止日期至{{time}}。 </div>

			
 
				+      </div>

			
 
				+      <div class="line">

			
 
				+        <img :src="Artboard" alt="" width="100%">

			
 
				+      </div>

			
 
				+      <div class="qr-code" style="margin-top:.1rem;">

			
 
				+        <div class="number">核销编码: 3423487682734</div>

			
 
				+        <qrCode :msg='msg'></qrCode>

			
 
				+      </div>

			
 
				+    </div>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+import qrCode from '../../../components/qrCodeCard/qrCodeCard'

			
 
				+import Artboard from '../../../common/icon/Artboard.png'

			
 
				+export default {

			
 
				+  data () {

			
 
				+    return {

			
 
				+      msg: {

			
 
				+        course_type: 800

			
 
				+      },

			
 
				+      Artboard,

			
 
				+      time: '2018年3月17日'

			
 
				+    }

			
 
				+  },

			
 
				+  methods: {

			
 
				+

			
 
				+  },

			
 
				+  components: {

			
 
				+    qrCode

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<style lang="scss" scoped>

			
 
				+@import "page.scss";

			
 
				+</style>

			
--- a/src/pages/user/couponsDetail/page.scss
+++ b/src/pages/user/couponsDetail/page.scss
@@ -0,0 +1,58 @@
 
				+.mainPage{

			
 
				+  padding: .3rem .16rem .45rem;

			
 
				+  box-sizing: border-box;

			
 
				+  .title{

			
 
				+    font-size: .18rem;

			
 
				+    font-weight: bold;

			
 
				+    padding-bottom: .14rem;

			
 
				+    padding-left: .2rem;

			
 
				+  }

			
 
				+  .content{

			
 
				+    background:#fff;

			
 
				+    box-shadow:0px .08rem .37rem 0px rgba(202,202,202,0.42);

			
 
				+    border-radius:.1rem;

			
 
				+    padding: .12rem 0;

			
 
				+    .message{

			
 
				+      padding: 0 .22rem;

			
 
				+      div{

			
 
				+        margin-bottom: .2rem;

			
 
				+        span:nth-of-type(1){

			
 
				+          font-size: .14rem;

			
 
				+        }

			
 
				+        span:nth-last-of-type(1){

			
 
				+          text-align: right;

			
 
				+        }

			
 
				+        .time{

			
 
				+          margin-top: .1rem;

			
 
				+          color: rgba(174,174,174,1);

			
 
				+          font-size: .14rem;

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+    .rule{

			
 
				+      padding: 0 .22rem;

			
 
				+      div:nth-of-type(1){

			
 
				+        margin-bottom: .2rem;

			
 
				+        font-size: .14rem;

			
 
				+        color: #000;

			
 
				+      }

			
 
				+      div{

			
 
				+        font-size: .12rem;

			
 
				+        color: rgba(174,174,174,1);

			
 
				+        margin-bottom: .1rem;

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+  .number{

			
 
				+    text-align: center;

			
 
				+    color:rgba(143,143,143,1);

			
 
				+    margin-bottom: .2rem;

			
 
				+  }

			
 
				+  .useType{

			
 
				+    position: absolute;

			
 
				+    bottom: 1.6rem;

			
 
				+    right: .8rem;

			
 
				+    width: .76rem;

			
 
				+    height: .76rem;

			
 
				+  }

			
 
				+}
			
--- a/src/pages/user/fiveA/index.vue
+++ b/src/pages/user/fiveA/index.vue
@@ -0,0 +1,184 @@
 
				+<template>

			
 
				+  <div class="mainPage flex-v">

			
 
				+    <nav class="flex-h">

			
 
				+      <a class="flex-item" v-for="(item,index) in nav" :key="index" :class="{'active':index==active.index}" @click="changeLocation(item,index)">{{item.LocationName}}</a>

			
 
				+    </nav>

			
 
				+    <div class="flex-item">

			
 
				+      <div>

			
 
				+        <div v-for="(item,index) in nav" :key="index" v-if="index==active.index">

			
 
				+          <div class="banner flex-h">

			
 
				+            <div class="flex-item">

			
 
				+              <swiper :options="swiperOption" ref="mySwiper">

			
 
				+                <swiper-slide class="swiper-slide" v-for="(item,index) in banner" :key="index">

			
 
				+                  <img :src='item.ImageUrl' class="cover" style="border-radius: .12rem;" alt=""  @click="jump(item)">

			
 
				+                </swiper-slide>

			
 
				+              </swiper>

			
 
				+            </div>

			
 
				+          </div>

			
 
				+          <h5>结识更多朋友</h5>

			
 
				+          <div class="courseList flex-h">

			
 
				+            <ul class="flex-item">

			
 
				+              <router-link tag="li" :to="{name:'',query:{}}" v-for="(item,index) in courseList" :key="index">

			
 
				+                <courseItem :data="item"></courseItem>

			
 
				+              </router-link>

			
 
				+            </ul>

			
 
				+          </div>

			
 
				+          <router-link :to="{name:'',query:{}}" class="more">查看更多</router-link>

			
 
				+          <div style="width:100%;height:.1rem;background:#f8f8f8;margin:0 auto;"></div>

			
 
				+          <h5>资讯</h5>

			
 
				+          <div class="newsList flex-h">

			
 
				+            <ul class="flex-item">

			
 
				+              <router-link tag="li" :to="{name:'',query:{}}" v-for="(item,index) in newsList" :key="index">

			
 
				+                <newsItem :data="item" @jump='jump'></newsItem>

			
 
				+              </router-link>

			
 
				+            </ul>

			
 
				+          </div>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+    </div>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+import courseItem from '../../../components/courseItem/index'

			
 
				+import newsItem from '../../../components/newsItem/index'

			
 
				+import { swiper, swiperSlide } from 'vue-awesome-swiper'

			
 
				+import 'swiper/dist/css/swiper.css'

			
 
				+import { mapState, createNamespacedHelpers } from 'vuex'

			
 
				+const { mapActions: mapFiveAActions } = createNamespacedHelpers('fiveA')

			
 
				+export default {

			
 
				+  name: '',

			
 
				+  data () {

			
 
				+    return {

			
 
				+      active: {

			
 
				+        index: 1,

			
 
				+        locationid: ''

			
 
				+      },

			
 
				+      swiperOption: {

			
 
				+        observer: true,

			
 
				+        loop: true,

			
 
				+        autoplay: {

			
 
				+          disableOnInteraction: false,

			
 
				+        }

			
 
				+      },

			
 
				+      nav: [{

			
 
				+        LocationId: "selected",

			
 
				+        LocationName: "精选"

			
 
				+      }],

			
 
				+      courseList: [{ // 课程列表

			
 
				+        id: '',

			
 
				+        title: '课程名称',

			
 
				+        img: '',

			
 
				+        time: '2018.04.04 18:30-20:00',

			
 
				+        address: '南京南',

			
 
				+        tag: ['儿童教育', '小小外交官'],

			
 
				+        courseType: '团体课',

			
 
				+        defaultPrice: '168/节',

			
 
				+        getWay: 'ticket'

			
 
				+      }, {

			
 
				+        id: '',

			
 
				+        title: '课程名称',

			
 
				+        img: '',

			
 
				+        time: '2018.04.04 18:30-20:00',

			
 
				+        address: '南京南',

			
 
				+        tag: ['儿童教育', '小小外交官'],

			
 
				+        courseType: '团体课',

			
 
				+        defaultPrice: '168/节',

			
 
				+        getWay: 'free'

			
 
				+      }, {

			
 
				+        id: '',

			
 
				+        title: '课程名称',

			
 
				+        img: '',

			
 
				+        time: '2018.04.04 18:30-20:00',

			
 
				+        address: '南京南',

			
 
				+        tag: ['儿童教育', '小小外交官'],

			
 
				+        courseType: '团体课',

			
 
				+        defaultPrice: '168/节',

			
 
				+        getWay: 'free'

			
 
				+      }],

			
 
				+      newsList: [{ // 资讯列表

			
 
				+        title: '我是标题我是标题我是标题我是标题我是标题我是标题',

			
 
				+        time: '2018年5月25日',

			
 
				+        img: '',

			
 
				+        id: ''

			
 
				+      }, {

			
 
				+        title: '我是标题我是标题我是标题我是标题我是标题我是标题',

			
 
				+        time: '2018年5月25日',

			
 
				+        img: '',

			
 
				+        id: ''

			
 
				+      }, {

			
 
				+        title: '我是标题我是标题我是标题我是标题我是标题我是标题',

			
 
				+        time: '2018年5月25日',

			
 
				+        img: '',

			
 
				+        id: ''

			
 
				+      }, {

			
 
				+        title: '我是标题我是标题我是标题我是标题我是标题我是标题',

			
 
				+        time: '2018年5月25日',

			
 
				+        img: '',

			
 
				+        id: ''

			
 
				+      }, {

			
 
				+        title: '我是标题我是标题我是标题我是标题我是标题我是标题',

			
 
				+        time: '2018年5月25日',

			
 
				+        img: '',

			
 
				+        id: ''

			
 
				+      }]

			
 
				+    }

			
 
				+  },

			
 
				+  computed: {

			
 
				+    ...mapState({

			
 
				+      orgid: x => x.app.orgId,

			
 
				+      navList: x => x.fiveA.nav,

			
 
				+      banner: x => x.fiveA.banner,

			
 
				+      cms: x => x.fiveA.cms

			
 
				+    }),

			
 
				+    MySwiper () {

			
 
				+      return this.$refs.mySwiper.swiper

			
 
				+    },

			
 
				+    MySwiperMsg () {

			
 
				+      return this.$refs.MySwiperMsg.swiper

			
 
				+    }

			
 
				+  },

			
 
				+  components: {

			
 
				+    newsItem,

			
 
				+    swiper,

			
 
				+    swiperSlide,

			
 
				+    courseItem,

			
 
				+  },

			
 
				+  created () {

			
 
				+    this.getNav({ orgid: this.orgid, issys: '0' }).then(() => {

			
 
				+      this.nav = this.nav.concat(this.navList)

			
 
				+      this.active.locationid = this.nav[this.active.index].LocationId

			
 
				+      this.getFiveAInfo({ orgid: this.orgid, locationid: this.active.locationid }).then(() => {

			
 
				+        this.newsList = this.cms

			
 
				+      })

			
 
				+    })

			
 
				+  },

			
 
				+  methods: {

			
 
				+    ...mapFiveAActions(['getNav']),

			
 
				+    ...mapFiveAActions(['getFiveAInfo']),

			
 
				+    changeLocation (item, index) {

			
 
				+      this.active.index = index

			
 
				+      this.active.locationid = item.LocationId

			
 
				+      this.getFiveAInfo({ orgid: this.orgid, locationid: this.active.locationid }).then(() => {

			
 
				+        this.newsList = this.cms

			
 
				+      })

			
 
				+    },

			
 
				+    jump (item) {

			
 
				+      console.log(item)

			
 
				+      item.ForwardType = item.ForwardType || ''

			
 
				+      if (item.ForwardType === 'url') {

			
 
				+        window.location.href = '//' + item.ForwardUrl

			
 
				+      } else if (item.ForwardType === 'course') {

			
 
				+        this.$router.push({ name: '', query: { id: item.ForwardResourceId } }) // 此处去课程详情

			
 
				+      } else {

			
 
				+        window.location.href = '//' + item.InfoUrl

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->

			
 
				+<style lang="scss" scoped>

			
 
				+@import "page.scss";

			
 
				+</style>

			
--- a/src/pages/user/fiveA/page.scss
+++ b/src/pages/user/fiveA/page.scss
@@ -0,0 +1,107 @@
 
				+.mainPage{

			
 
				+  background: #fff;

			
 
				+  &>nav{

			
 
				+    white-space: nowrap;

			
 
				+    overflow-x: scroll;

			
 
				+    -webkit-overflow-scrolling: touch;

			
 
				+    font-size: 0;

			
 
				+    padding: .09rem 0;

			
 
				+    background: #fff;

			
 
				+    z-index: 100;

			
 
				+    position: relative;

			
 
				+    a{

			
 
				+      line-height: .32rem;

			
 
				+      text-align: center;

			
 
				+      position: relative;

			
 
				+      &.active::after{

			
 
				+        content: '';

			
 
				+        width: 50%;

			
 
				+        height: .02rem;

			
 
				+        display: block;

			
 
				+        position: absolute;

			
 
				+        left: 50%;

			
 
				+        bottom: 0;

			
 
				+        transform: translateX(-50%);

			
 
				+        -webkit-transform: translateX(-50%);

			
 
				+        background: #fc6243;

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+  &>div.flex-item{

			
 
				+    position: relative;

			
 
				+    &>div{

			
 
				+      width: 100%;

			
 
				+      position: absolute;

			
 
				+      left: 0;

			
 
				+      top: 0;

			
 
				+      bottom: 0;

			
 
				+      overflow: hidden;

			
 
				+      &>div{

			
 
				+        width: 100%;

			
 
				+        height: 100%;

			
 
				+        position: relative;

			
 
				+        overflow-y: scroll;

			
 
				+        -webkit-overflow-scrolling: touch;

			
 
				+        transform: translateZ(0);

			
 
				+        -webkit-transform: translateZ(0);

			
 
				+        .banner{

			
 
				+          margin: .2rem auto 0;

			
 
				+          overflow: visible;

			
 
				+          &>div{

			
 
				+            margin: 0 .2rem;

			
 
				+            position: relative;

			
 
				+            overflow: hidden;

			
 
				+            border-radius: .12rem;

			
 
				+            padding-bottom: 46%;

			
 
				+            background: #eee;

			
 
				+            box-shadow: 0 0 .2rem .01rem rgba(0, 0, 0, .1);

			
 
				+            &>div{

			
 
				+              width: 100%;

			
 
				+              position: absolute;

			
 
				+              left: 0;

			
 
				+              top: 0;

			
 
				+              bottom: 0;

			
 
				+              overflow: hidden;

			
 
				+            }

			
 
				+          }

			
 
				+        }

			
 
				+        h5{

			
 
				+          width: 100%;

			
 
				+          display: block;

			
 
				+          line-height: .26rem;

			
 
				+          font-size: .14rem;

			
 
				+          text-indent: .2rem;

			
 
				+          margin: .2rem auto 0;

			
 
				+        }

			
 
				+        .courseList{

			
 
				+          &>ul{

			
 
				+            margin: 0 .2rem;

			
 
				+            &>li{

			
 
				+              padding: .15rem 0;

			
 
				+              border-bottom: .01rem solid #eee;

			
 
				+            }

			
 
				+          }

			
 
				+        }

			
 
				+        .more{

			
 
				+          width: 100%;

			
 
				+          display: block;

			
 
				+          text-align: center;

			
 
				+          font-size: .12rem;

			
 
				+          line-height: .4rem;

			
 
				+        }

			
 
				+      }

			
 
				+      .newsList{

			
 
				+        &>ul{

			
 
				+          margin: 0 .2rem;

			
 
				+          &>li{

			
 
				+            padding: .15rem 0;

			
 
				+            border-top: .01rem solid #eee;

			
 
				+            &:first-child{

			
 
				+              border-top: none;

			
 
				+            }

			
 
				+          }

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+}
			
--- a/src/pages/user/lessonDetail/index.vue
+++ b/src/pages/user/lessonDetail/index.vue
@@ -0,0 +1,84 @@
 
				+<template>

			
 
				+  <div class="mainPage">

			
 
				+    <div class="title">课程详情</div>

			
 
				+    <div class="content" :class="{'opacity' : useType == '已失效' || useType == '已使用', 'gray': useType == '已使用' || useType == '已失效'}">

			
 
				+      <div class="list-item">

			
 
				+        <span>订单编号</span>

			
 
				+        <span>144215646445464</span>

			
 
				+      </div>

			
 
				+      <div class="list-item">

			
 
				+        <span>订单名称</span>

			
 
				+        <span>拉伸柔韧度</span>

			
 
				+      </div>

			
 
				+      <div class="list-item">

			
 
				+        <span>节课数</span>

			
 
				+        <span>2节课</span>

			
 
				+      </div>

			
 
				+      <div class="list-item">

			
 
				+        <span>类型</span>

			
 
				+        <span>健身</span>

			
 
				+      </div>

			
 
				+      <div class="list-item">

			
 
				+        <span>商品价格</span>

			
 
				+        <span>¥1999</span>

			
 
				+      </div>

			
 
				+      <div class="list-item">

			
 
				+        <span>下单时间</span>

			
 
				+        <span>2018/04/12 14:26:09</span>

			
 
				+      </div>

			
 
				+      <div class="list-item">

			
 
				+        <span>课程时间</span>

			
 
				+        <span>2018/04/12 12:00至14:00 计划备注（每周六 19:30)</span>

			
 
				+      </div>

			
 
				+      <div class="list-item">

			
 
				+        <span>地点</span>

			
 
				+        <span>悦见山G99</span>

			
 
				+      </div>

			
 
				+      <div class="list-item">

			
 
				+        <span>付款方式</span>

			
 
				+        <span>优惠券抵用 <div class="coupon-name">小拉伸柔韧度体验券</div></span>

			
 
				+      </div>

			
 
				+      <div class="half-cic">

			
 
				+        <span></span>

			
 
				+        <span></span>

			
 
				+      </div>

			
 
				+      <div class="qr-code">

			
 
				+        <qrCode :msg='msg'></qrCode>

			
 
				+        <div class="number">32237489123</div>

			
 
				+      </div>

			
 
				+    </div>

			
 
				+    <div class="useType">

			
 
				+      <img :src="used" alt="已使用" v-if="useType == '已使用'" width="100%" height="100%">

			
 
				+      <img :src="failure" alt="已失效" v-if="useType == '已失效'" width="100%" height="100%">

			
 
				+    </div>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+import qrCode from '../../../components/qrCodeCard/qrCodeCard'

			
 
				+import used from '../../../common/icon/already.png'

			
 
				+import failure from '../../../common/icon/inv.png'

			
 
				+export default {

			
 
				+  data () {

			
 
				+    return {

			
 
				+      msg: {

			
 
				+        course_type: 800,

			
 
				+        orderNo: '342897789334'

			
 
				+      },

			
 
				+      useType: '未使用',

			
 
				+      used,

			
 
				+      failure,

			
 
				+    }

			
 
				+  },

			
 
				+  methods: {

			
 
				+

			
 
				+  },

			
 
				+  components: {

			
 
				+    qrCode

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<style lang="scss" scoped>

			
 
				+@import "page.scss";

			
 
				+</style>

			
--- a/src/pages/user/lessonDetail/page.scss
+++ b/src/pages/user/lessonDetail/page.scss
@@ -0,0 +1,73 @@
 
				+.mainPage{

			
 
				+  padding: .3rem .16rem .45rem;

			
 
				+  box-sizing: border-box;

			
 
				+  .title{

			
 
				+    font-size: .18rem;

			
 
				+    font-weight: bold;

			
 
				+    padding-bottom: .14rem;

			
 
				+    padding-left: .2rem;

			
 
				+  }

			
 
				+  .content{

			
 
				+    background:#fff;

			
 
				+    box-shadow:0px .08rem .37rem 0px rgba(202,202,202,0.42);

			
 
				+    border-radius:.1rem;

			
 
				+    padding: .12rem 0;

			
 
				+    &.opacity {

			
 
				+      opacity: .5;

			
 
				+    }

			
 
				+    &.gray {

			
 
				+      filter: grayscale(100%);

			
 
				+    }

			
 
				+    .list-item{

			
 
				+      display: flex;

			
 
				+      justify-content: space-between;

			
 
				+      align-items: flex-start;

			
 
				+      padding: 0 .22rem;

			
 
				+      margin-bottom: .1rem;

			
 
				+      span{

			
 
				+        display: block;

			
 
				+        color: #666;

			
 
				+      }

			
 
				+      span:nth-of-type(2){

			
 
				+        width: 60%;

			
 
				+        text-align: right;

			
 
				+        color: #000;

			
 
				+        .coupon-name{

			
 
				+          color: #FF2B00;

			
 
				+          font-size: .12rem;

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+    .half-cic{

			
 
				+      height: .25rem;

			
 
				+      display: flex;

			
 
				+      justify-content: space-between;

			
 
				+      overflow: hidden;

			
 
				+      span{

			
 
				+        display: block;

			
 
				+        width: .25rem;

			
 
				+        height: .25rem;

			
 
				+        border-radius: 50%;

			
 
				+        background: rgba(202,202,202,0.2);

			
 
				+      }

			
 
				+      span:nth-of-type(1){

			
 
				+        transform: translateX(-50%);

			
 
				+      }

			
 
				+      span:nth-of-type(2){

			
 
				+        transform: translateX(50%);

			
 
				+      }

			
 
				+    }

			
 
				+    .number{

			
 
				+      text-align: center;

			
 
				+      color:rgba(143,143,143,1);

			
 
				+      margin-top: .2rem;

			
 
				+    }

			
 
				+  }

			
 
				+  .useType{

			
 
				+    position: absolute;

			
 
				+    bottom: 1.6rem;

			
 
				+    right: .8rem;

			
 
				+    width: .76rem;

			
 
				+    height: .76rem;

			
 
				+  }

			
 
				+}
			
--- a/src/pages/user/lessonOrder/index.vue
+++ b/src/pages/user/lessonOrder/index.vue
@@ -0,0 +1,136 @@
 
				+<template>

			
 
				+  <div class="mainPage">

			
 
				+    <scroll ref='scroll' :isloading='isloading' class='wrapper' :data='list' :pullUpLoad='pullUpLoadObj' :startY='parseInt(startY)' @pullingUp='getList'>

			
 
				+      <div class="box">

			
 
				+        <div class="order-card flex-h" v-for="(item,index) in list" :key='index' :class="{'opacity' : item.useType == '已失效'}" @click="toDetail(item)">

			
 
				+          <div class="card-pic">

			
 
				+            <div :class="{'gray-location' : item.useType == '已失效'}"><span>{{item.LocationName}}</span></div>

			
 
				+            <img src="" class="cover" width="100%" height="100%" alt="">

			
 
				+          </div>

			
 
				+          <div class="card-msg">

			
 
				+            <div class="title">{{item.title}}</div>

			
 
				+            <div class="text">付款方式：{{item.payType}}</div>

			
 
				+            <div class="text">下单时间：{{item.time}}</div>

			
 
				+          </div>

			
 
				+          <div class="card-price">

			
 
				+            <div class="price">￥ {{item.price}}</div>

			
 
				+            <div class="type" :class="{'un-use' : item.useType == '未使用'}">{{item.useType}}</div>

			
 
				+          </div>

			
 
				+        </div>

			
 
				+        <!-- <noMore v-if="hasPic"></noMore> -->

			
 
				+      </div>

			
 
				+    </scroll>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+// 上拉加载组件

			
 
				+import scroll from '../../../components/scroll/scroll'

			
 
				+import noMore from '../../../components/noMore/noMore'

			
 
				+export default {

			
 
				+  data () {

			
 
				+    return {

			
 
				+      hasPic: false,

			
 
				+      pullUpLoad: true,

			
 
				+      pullUpLoadThreshold: 40,

			
 
				+      startY: 0,

			
 
				+      isloading: true,

			
 
				+      hasMore: true,

			
 
				+      list: [

			
 
				+        {

			
 
				+          LocationName: '社交',

			
 
				+          title: '小小外交官课程',

			
 
				+          payType: '优惠券抵用',

			
 
				+          time: '2018-7-18 12:19',

			
 
				+          price: 199,

			
 
				+          useType: '未使用'

			
 
				+        },

			
 
				+        {

			
 
				+          LocationName: '社交',

			
 
				+          title: '小小外交官课程',

			
 
				+          payType: '优惠券抵用',

			
 
				+          time: '2018-7-18 12:19',

			
 
				+          price: 199,

			
 
				+          useType: '已使用'

			
 
				+        },

			
 
				+        {

			
 
				+          LocationName: '社交',

			
 
				+          title: '小小外交官课程',

			
 
				+          payType: '优惠券抵用',

			
 
				+          time: '2018-7-18 12:19',

			
 
				+          price: 199,

			
 
				+          useType: '已失效'

			
 
				+        },

			
 
				+        {

			
 
				+          LocationName: '社交',

			
 
				+          title: '小小外交官课程',

			
 
				+          payType: '优惠券抵用',

			
 
				+          time: '2018-7-18 12:19',

			
 
				+          price: 199,

			
 
				+          useType: '已失效'

			
 
				+        },

			
 
				+        {

			
 
				+          LocationName: '社交',

			
 
				+          title: '小小外交官课程',

			
 
				+          payType: '优惠券抵用',

			
 
				+          time: '2018-7-18 12:19',

			
 
				+          price: 199,

			
 
				+          useType: '已失效'

			
 
				+        },

			
 
				+        {

			
 
				+          LocationName: '社交',

			
 
				+          title: '小小外交官课程',

			
 
				+          payType: '优惠券抵用',

			
 
				+          time: '2018-7-18 12:19',

			
 
				+          price: 199,

			
 
				+          useType: '已失效'

			
 
				+        }

			
 
				+      ]

			
 
				+    }

			
 
				+  },

			
 
				+  components: {

			
 
				+    scroll,

			
 
				+    noMore

			
 
				+  },

			
 
				+  computed: {

			
 
				+    pullUpLoadObj: function () {

			
 
				+      return this.pullUpLoad

			
 
				+        ? {

			
 
				+          threshold: parseInt(this.pullUpLoadThreshold),

			
 
				+          txt: {

			
 
				+            more: this.pullUpLoadMoreTxt,

			
 
				+            noMore: this.pullUpLoadNoMoreTxt

			
 
				+          }

			
 
				+        }

			
 
				+        : false

			
 
				+    }

			
 
				+  },

			
 
				+  methods: {

			
 
				+    getList () {

			
 
				+      this.list.length <= 8 ? this.hasMore = true : this.hasMore = false

			
 
				+      if (this.hasMore) {

			
 
				+        setTimeout(() => {

			
 
				+          this.list.push({

			
 
				+            LocationName: '社交',

			
 
				+            title: '小小外交官课程',

			
 
				+            payType: '优惠券抵用',

			
 
				+            time: '2018-7-18 12:19',

			
 
				+            price: 199,

			
 
				+            useType: '已失效'

			
 
				+          })

			
 
				+        }, 1000)

			
 
				+      } else {

			
 
				+        this.$refs.scroll.forceUpdate()

			
 
				+        return false

			
 
				+      }

			
 
				+    },

			
 
				+    toDetail () {

			
 
				+      this.$router.push({name: 'lessonDetail'})

			
 
				+    }

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<style lang="scss" scoped>

			
 
				+@import "page.scss";

			
 
				+</style>

			
--- a/src/pages/user/lessonOrder/page.scss
+++ b/src/pages/user/lessonOrder/page.scss
@@ -0,0 +1,78 @@
 
				+.box {

			
 
				+  padding: .2rem .16rem 0;

			
 
				+  .order-card {

			
 
				+    padding: .2rem .15rem .2rem .1rem;

			
 
				+    box-sizing: border-box;

			
 
				+    background:rgba(255,255,255,1);

			
 
				+    box-shadow:0px 2px 8px 0px rgba(204,204,204,0.5);

			
 
				+    border-radius:10px;

			
 
				+    margin-bottom: .2rem;

			
 
				+    &.opacity {

			
 
				+      opacity: .5;

			
 
				+    }

			
 
				+    .card-pic {

			
 
				+      width: .8rem;

			
 
				+      height: .8rem;

			
 
				+      border-radius: .08rem;

			
 
				+      overflow: hidden;

			
 
				+      position: relative;

			
 
				+      div{

			
 
				+        position: absolute;

			
 
				+        background:linear-gradient(45deg,rgba(255,105,0,1) 0%,rgba(255,136,0,0.76) 100%);

			
 
				+        opacity:0.85;

			
 
				+        width: .6rem;

			
 
				+        height: .6rem;

			
 
				+        transform: rotate(45deg);

			
 
				+        top: -0.3rem;

			
 
				+        left: -0.3rem;

			
 
				+        &.gray-location{

			
 
				+          background: rgba(189,189,189,1);

			
 
				+        }

			
 
				+        span{

			
 
				+          position: absolute;

			
 
				+          bottom: .22rem;

			
 
				+          right: -0.03rem;

			
 
				+          font-size: .12rem;

			
 
				+          color: #fff;

			
 
				+          transform: rotate(-90deg);

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+    .card-msg{

			
 
				+      width: 1.7rem;

			
 
				+      padding-left: .12rem;

			
 
				+      .title{

			
 
				+        font-size: .14rem;

			
 
				+        padding-bottom: .12rem

			
 
				+      }

			
 
				+      .text{

			
 
				+        font-size: .12rem;

			
 
				+        color:rgba(153,153,153,1);

			
 
				+        padding-bottom: .06rem;

			
 
				+      }

			
 
				+    }

			
 
				+    .card-price{

			
 
				+      flex: 1;

			
 
				+      text-align: right;

			
 
				+      .price, .type{

			
 
				+        font-size: .14rem;

			
 
				+        color: #000;

			
 
				+        &.un-use{

			
 
				+          color: #F25004;

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+}

			
 
				+

			
 
				+@media screen and (max-width: 320px) {

			
 
				+  .order-card {

			
 
				+    .card-pic {

			
 
				+      div{

			
 
				+        span{

			
 
				+          bottom: .2rem !important;

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+}
			
--- a/src/pages/user/mainPage/coffeeIndex/index.vue
+++ b/src/pages/user/mainPage/coffeeIndex/index.vue
@@ -0,0 +1,105 @@
 
				+<template>

			
 
				+  <div class="mainPage flex-v">

			
 
				+    <div class="top">

			
 
				+      <topCaseInfo :data="topCaseInfoData" @selectCase="showSelect = true"></topCaseInfo>

			
 
				+    </div>

			
 
				+    <div class="content flex-item">

			
 
				+      <div>

			
 
				+        <div class="flex-h">

			
 
				+          <div class="flex-item">

			
 
				+            <ul class="areaList">

			
 
				+              <li v-for="(item,index) in list" :key="index">

			
 
				+                <div class="title">

			
 
				+                  <i class="iconfont icon-yinchenglogo"></i>

			
 
				+                  <span>{{item.name}}</span>

			
 
				+                </div>

			
 
				+                <ul class="subAreaList flex-h">

			
 
				+                  <li class="flex-item flex-h" v-for="(subItem,subIndex) in item.list" :key="subIndex">

			
 
				+                    <caseTableItem :item="subItem" :index="subIndex"></caseTableItem>

			
 
				+                  </li>

			
 
				+                  <li class="flex-item noData" v-if="item.list.length % 2 != 0"></li>

			
 
				+                </ul>

			
 
				+              </li>

			
 
				+            </ul>

			
 
				+          </div>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+    </div>

			
 
				+    <div class="selectCase" :hidden="!showSelect"></div>

			
 
				+    <van-picker :hidden="!showSelect"

			
 
				+      show-toolbar

			
 
				+      title="选择案场"

			
 
				+      :columns="caseList"

			
 
				+      @cancel="showSelect = false"

			
 
				+      @confirm="selectCase"

			
 
				+      value-key="value"

			
 
				+    />

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+import caseTableItem from '../../../../components/caseTableItem/index'

			
 
				+import topCaseInfo from '../../../../components/topCaseInfo/index'

			
 
				+

			
 
				+export default {

			
 
				+  name: '',

			
 
				+  data () {

			
 
				+    return {

			
 
				+      topCaseInfoData: {

			
 
				+        caseName: '',

			
 
				+        caseId: '',

			
 
				+        showSelect: true,

			
 
				+        userName: 'xxx'

			
 
				+      },

			
 
				+      caseInfo: {

			
 
				+        value: '',

			
 
				+        id: ''

			
 
				+      },

			
 
				+      showSelect: false,

			
 
				+      caseList: [{

			
 
				+        value: '案场一',

			
 
				+        id: ''

			
 
				+      }, {

			
 
				+        value: '案场二',

			
 
				+        id: ''

			
 
				+      }, {

			
 
				+        value: '案场三',

			
 
				+        id: ''

			
 
				+      }, {

			
 
				+        value: '案场四',

			
 
				+        id: ''

			
 
				+      }],

			
 
				+      list: [{

			
 
				+        name: '案场名称1',

			
 
				+        list: [{}, {}, {}, {}, {}],

			
 
				+      }, {

			
 
				+        name: '案场名称2',

			
 
				+        list: [{}, {}, {}, {}, {}],

			
 
				+      }]

			
 
				+    }

			
 
				+  },

			
 
				+  computed: {

			
 
				+

			
 
				+  },

			
 
				+  components: {

			
 
				+    topCaseInfo,

			
 
				+    caseTableItem,

			
 
				+  },

			
 
				+  created () {

			
 
				+

			
 
				+  },

			
 
				+  methods: {

			
 
				+    selectCase (val) { // 选择案场

			
 
				+      this.caseInfo = val

			
 
				+      this.topCaseInfoData.caseName = val.value

			
 
				+      this.topCaseInfoData.caseId = val.id

			
 
				+      this.showSelect = false

			
 
				+    },

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->

			
 
				+<style lang="scss" scoped>

			
 
				+@import "page.scss";

			
 
				+</style>

			
--- a/src/pages/user/mainPage/coffeeIndex/page.scss
+++ b/src/pages/user/mainPage/coffeeIndex/page.scss
@@ -0,0 +1,76 @@
 
				+.mainPage{

			
 
				+  .top{

			
 
				+    position: relative;

			
 
				+    overflow: hidden;

			
 
				+  }

			
 
				+  .content{

			
 
				+    &>div{

			
 
				+      width: 100%;

			
 
				+      position: absolute;

			
 
				+      left: 0;

			
 
				+      top: 0;

			
 
				+      bottom: 0;

			
 
				+      overflow-y: scroll;

			
 
				+      -webkit-overflow-scrolling: touch;

			
 
				+      transform: translateZ(0);

			
 
				+      -webkit-transform: translateZ(0);

			
 
				+      &>div.flex-h{

			
 
				+        &>div{

			
 
				+          margin: 0 .2rem;

			
 
				+          position: relative;

			
 
				+          overflow: visible;

			
 
				+          .areaList{

			
 
				+            &:last-child{

			
 
				+              margin-bottom: .2rem;

			
 
				+            }

			
 
				+            .title{

			
 
				+              font-size: 0;

			
 
				+              white-space: nowrap;

			
 
				+              margin-top: .22rem;

			
 
				+              *{

			
 
				+                line-height: .26rem;

			
 
				+                font-size: .14rem;

			
 
				+              }

			
 
				+              i{

			
 
				+                color: red;

			
 
				+                margin-right: .05rem;

			
 
				+              }

			
 
				+            }

			
 
				+            .subAreaList{

			
 
				+              position: relative;

			
 
				+              overflow: visible;

			
 
				+              flex-wrap: wrap;

			
 
				+              -webkit-flex-wrap: wrap;

			
 
				+              &>li{

			
 
				+                position: relative;

			
 
				+                overflow: hidden;

			
 
				+                border-radius: .06rem;

			
 
				+                background: #fff;

			
 
				+                padding: .15rem 0;

			
 
				+                box-shadow: 0 0 .1rem .01rem rgba(0, 0, 0, .1);

			
 
				+                min-width: 40%;

			
 
				+                margin-top: .2rem;

			
 
				+                &:nth-child(2n){

			
 
				+                  margin-left: .2rem;

			
 
				+                }

			
 
				+                &.noData{

			
 
				+                  box-shadow: none;

			
 
				+                  background: none;

			
 
				+                }

			
 
				+              }

			
 
				+            }

			
 
				+          }

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+  .selectCase{

			
 
				+    width: 100%;

			
 
				+    position: absolute;

			
 
				+    left: 0;

			
 
				+    top: 0;

			
 
				+    bottom: 0;

			
 
				+    background: rgba(0, 0, 0, .3);

			
 
				+    z-index: 100;

			
 
				+  }

			
 
				+}
			
--- a/src/pages/user/mainPage/index.vue
+++ b/src/pages/user/mainPage/index.vue
@@ -0,0 +1,57 @@
 
				+<template>

			
 
				+  <div class="mainPage flex-v">

			
 
				+    <div class="subPage flex-item">

			
 
				+      <div>

			
 
				+        <router-view></router-view>

			
 
				+      </div>

			
 
				+    </div>

			
 
				+    <nav class="flex-h">

			
 
				+      <router-link :to="{name:item.pathName,query:{}}" class="flex-item" active-class="active" v-for="(item, index) in tabBar" :key="index">

			
 
				+        <div>

			
 
				+          <img v-if="index==0" class="centerLabel" src="../../../common/icon/tabBar-icon-1.png" alt="">

			
 
				+          <img v-if="index==1" class="centerLabel" src="../../../common/icon/tabBar-icon-2.png" alt="">

			
 
				+          <img v-if="index==2" class="centerLabel" src="../../../common/icon/tabBar-icon-3.png" alt="">

			
 
				+        </div>

			
 
				+        <span>{{item.name}}</span>

			
 
				+      </router-link>

			
 
				+    </nav>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+

			
 
				+export default {

			
 
				+  name: '',

			
 
				+  data () {

			
 
				+    return {

			
 
				+      tabBar: [{

			
 
				+        pathName:'indexPage',

			
 
				+        name:'会所'

			
 
				+      },{

			
 
				+        pathName:'coffeeIndex',

			
 
				+        name:'城咖啡'

			
 
				+      },{

			
 
				+        pathName:'userCenter',

			
 
				+        name:'会员'

			
 
				+      }]

			
 
				+    }

			
 
				+  },

			
 
				+  computed: {

			
 
				+    

			
 
				+  },

			
 
				+  components: {

			
 
				+    

			
 
				+  },

			
 
				+  created () {

			
 
				+    

			
 
				+  },

			
 
				+  methods: {

			
 
				+    

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->

			
 
				+<style lang="scss" scoped>

			
 
				+@import "page.scss";

			
 
				+</style>

			
--- a/src/pages/user/mainPage/indexPage/index.vue
+++ b/src/pages/user/mainPage/indexPage/index.vue
@@ -0,0 +1,161 @@
 
				+<template>

			
 
				+  <div class="mainPage">

			
 
				+    <div class="topBanner">

			
 
				+      <swiper :options="swiperOption" ref="mySwiper">

			
 
				+        <swiper-slide class="swiper-slide" v-for="(item,index) in banner" :key="index">

			
 
				+          <img :src='item.ImageUrl' class="cover" alt="" @click="jump(item)">

			
 
				+        </swiper-slide>

			
 
				+      </swiper>

			
 
				+    </div>

			
 
				+    <div class="pageTitle flex-h">

			
 
				+      <h5 class="flex-item">

			
 
				+        <span>银城5A全龄生活体验平台</span>

			
 
				+      </h5>

			
 
				+    </div>

			
 
				+    <div class="flex-h">

			
 
				+      <nav class="pageNav flex-item">

			
 
				+        <router-link :to="{name:'fiveA',query:{id:item.LocationId}}" v-for="(item,index) in data.fiveA" :key="index">

			
 
				+          <a>

			
 
				+            <img :src="item.TypeImg" class="centerLabel cover" alt="">

			
 
				+            <em>{{item.LocationName}}</em>

			
 
				+          </a>

			
 
				+          <span>{{item.Title}}</span>

			
 
				+        </router-link>

			
 
				+      </nav>

			
 
				+    </div>

			
 
				+    <div class="MsgBanner">

			
 
				+      <div class="flex-h">

			
 
				+        <i class="iconfont icon-xiaoxi"></i>

			
 
				+        <span>最新消息：</span>

			
 
				+        <div class="flex-item">

			
 
				+          <div>

			
 
				+            <swiper :options="swiperOptionMsg" ref="mySwiperMsg">

			
 
				+              <swiper-slide class="swiper-slide" v-for="(item,index) in message" :key="index">

			
 
				+                <router-link :to="{name:'',query:{}}"><span @click="jump(item)">{{item.InfoName}}</span></router-link>

			
 
				+              </swiper-slide>

			
 
				+              <div class="swiper-pagination"  slot="pagination"></div>

			
 
				+            </swiper>

			
 
				+          </div>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+    </div>

			
 
				+    <div class="pageTitle flex-h">

			
 
				+      <h5 class="flex-item">

			
 
				+        <span>售楼处项目专题</span>

			
 
				+      </h5>

			
 
				+    </div>

			
 
				+    <div class="flex-h">

			
 
				+      <ul class="projectList flex-item">

			
 
				+        <router-link tag="li" :to="{ name:'majorProjects', query:{ id: item.CmsCaseId } }" v-for="(item,index) in project" :key="index">

			
 
				+          <img :src='item.CaseImageUrl' class="centerLabel cover" alt="">

			
 
				+        </router-link>

			
 
				+      </ul>

			
 
				+    </div>

			
 
				+    <div style="width:100%;height:.1rem;background:#f8f8f8;margin:.25rem auto 0;"></div>

			
 
				+    <div class="pageTitle flex-h">

			
 
				+      <h5 class="flex-item">

			
 
				+        <span>活动资讯</span>

			
 
				+      </h5>

			
 
				+    </div>

			
 
				+    <div class="flex-h">

			
 
				+      <ul class="newsList flex-item">

			
 
				+        <router-link tag="li" :to="{name:'',query:{}}" v-for="(item,index) in newsList" :key="index">

			
 
				+          <newsItem :data="item" @jump='jump'></newsItem>

			
 
				+        </router-link>

			
 
				+      </ul>

			
 
				+    </div>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+import newsItem from '../../../../components/newsItem/index'

			
 
				+import { swiper, swiperSlide } from 'vue-awesome-swiper'

			
 
				+import 'swiper/dist/css/swiper.css'

			
 
				+import { mapState, createNamespacedHelpers } from 'vuex'

			
 
				+const { mapActions: mapIndexActions } = createNamespacedHelpers('index')

			
 
				+export default {

			
 
				+  name: '',

			
 
				+  data () {

			
 
				+    return {

			
 
				+      data: {

			
 
				+        fiveA: []

			
 
				+      },

			
 
				+      locationId: '',

			
 
				+      swiperOption: {

			
 
				+        observer: true,

			
 
				+        loop: true,

			
 
				+        autoplay: {

			
 
				+          disableOnInteraction: false,

			
 
				+        }

			
 
				+      },

			
 
				+      swiperOptionMsg: {

			
 
				+        observer: true,

			
 
				+        direction: 'vertical',

			
 
				+        loop: true,

			
 
				+        autoplay: {

			
 
				+          disableOnInteraction: false,

			
 
				+        }

			
 
				+      },

			
 
				+      newsList: []

			
 
				+    }

			
 
				+  },

			
 
				+  computed: {

			
 
				+    ...mapState({

			
 
				+      orgid: x => x.app.orgId,

			
 
				+      fiveA: x => x.index.fiveA,

			
 
				+      banner: x => x.index.banner,

			
 
				+      message: x => x.index.message,

			
 
				+      project: x => x.index.project,

			
 
				+      cms: x => x.index.cms,

			
 
				+    }),

			
 
				+    MySwiper () {

			
 
				+      return this.$refs.mySwiper.swiper

			
 
				+    },

			
 
				+    MySwiperMsg () {

			
 
				+      return this.$refs.MySwiperMsg.swiper

			
 
				+    }

			
 
				+  },

			
 
				+  components: {

			
 
				+    newsItem,

			
 
				+    swiper,

			
 
				+    swiperSlide,

			
 
				+  },

			
 
				+  created () {

			
 
				+    this.getIndexLocation({ orgid: this.orgid, issys: '0' }).then((res) => {

			
 
				+      this.data.fiveA = this.fiveA

			
 
				+      this.locationId = 'index'

			
 
				+      this.getIndexInfo({ orgid: this.orgid, locationid: this.locationId }).then(() => {

			
 
				+        this.newsList = this.cms

			
 
				+        for (let i = 0; i < this.project.length; i++) {

			
 
				+          if (this.project[i].CmsCaseImgs != null) {

			
 
				+            for (let j = 0; j < this.project[i].CmsCaseImgs.length; j++) {

			
 
				+              if (this.project[i].CmsCaseImgs[j].ImageType === 'cover') {

			
 
				+                this.project[i].CaseImageUrl = this.project[i].CmsCaseImgs[j].CaseImageUrl

			
 
				+              }

			
 
				+            }

			
 
				+          }

			
 
				+        }

			
 
				+      })

			
 
				+    })

			
 
				+  },

			
 
				+  methods: {

			
 
				+    ...mapIndexActions(['getIndexInfo']),

			
 
				+    ...mapIndexActions(['getIndexLocation']),

			
 
				+    jump (item) {

			
 
				+      item.ForwardType = item.ForwardType || ''

			
 
				+      if (item.ForwardType === 'url') {

			
 
				+        window.location.href = '//' + item.ForwardUrl

			
 
				+      } else if (item.ForwardType === 'course') {

			
 
				+        this.$router.push({ name: '', query: { id: item.ForwardResourceId } }) // 此处去课程详情

			
 
				+      } else {

			
 
				+        window.location.href = '//' + item.InfoUrl

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->

			
 
				+<style lang="scss" scoped>

			
 
				+@import "page.scss";

			
 
				+</style>

			
--- a/src/pages/user/mainPage/indexPage/page.scss
+++ b/src/pages/user/mainPage/indexPage/page.scss
@@ -0,0 +1,184 @@
 
				+.mainPage{

			
 
				+  overflow-y: scroll;

			
 
				+  -webkit-overflow-scrolling: touch;

			
 
				+  transform: translateZ(0);

			
 
				+  -webkit-transform: translateZ(0);

			
 
				+  background: #fff;

			
 
				+  &>*:last-child{

			
 
				+    margin-bottom: .2rem;

			
 
				+  }

			
 
				+  .topBanner{

			
 
				+    width: 100%;

			
 
				+    height: 0;

			
 
				+    position: relative;

			
 
				+    overflow: hidden;

			
 
				+    padding-bottom: 54%;

			
 
				+    background: #eee;

			
 
				+    &>div{

			
 
				+      width: 100%;

			
 
				+      position: absolute;

			
 
				+      left: 0;

			
 
				+      bottom: 0;

			
 
				+      top: 0;

			
 
				+    }

			
 
				+  }

			
 
				+  .pageTitle{

			
 
				+    margin: .18rem auto 0;

			
 
				+    position: relative;

			
 
				+    overflow: hidden;

			
 
				+    h5{

			
 
				+      &::after{

			
 
				+        content: '';

			
 
				+        width: 100%;

			
 
				+        height: .01rem;

			
 
				+        background: #eee;

			
 
				+        position: absolute;

			
 
				+        left: 0;

			
 
				+        top: 50%;

			
 
				+        transform: translateY(-50%);

			
 
				+        -webkit-transform: translateY(-50%);

			
 
				+        z-index: 1;

			
 
				+      }

			
 
				+      width: 100%;

			
 
				+      display: block; 

			
 
				+      text-align: center;

			
 
				+      position: relative;

			
 
				+      overflow: hidden;

			
 
				+      margin: 0 .2rem;

			
 
				+      span{

			
 
				+        display: inline-block; 

			
 
				+        line-height: .26rem;

			
 
				+        font-size: .14rem;

			
 
				+        font-weight: normal;

			
 
				+        background: #fff;

			
 
				+        position: relative;

			
 
				+        z-index: 2;

			
 
				+        padding: 0 .15rem;

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+  .pageNav{

			
 
				+    margin: 0 .1rem;

			
 
				+    font-size: 0;

			
 
				+    &>a{

			
 
				+      width: 20%;

			
 
				+      display: inline-block;

			
 
				+      position: relative;

			
 
				+      overflow: hidden;

			
 
				+      margin-top: .15rem;

			
 
				+      vertical-align: top;

			
 
				+      a{

			
 
				+        width: 70%;

			
 
				+        display: block;

			
 
				+        padding-bottom: 70%;

			
 
				+        position: relative;

			
 
				+        overflow: hidden;

			
 
				+        background: #eee;

			
 
				+        margin: 0 auto;

			
 
				+        border-radius: 100%;

			
 
				+        img{

			
 
				+          z-index: 1;

			
 
				+        }

			
 
				+        em{

			
 
				+          width: 100%;

			
 
				+          display: block;

			
 
				+          position: absolute;

			
 
				+          left: 0;

			
 
				+          bottom: 0;

			
 
				+          line-height: .3rem;

			
 
				+          font-size: .11rem;

			
 
				+          text-align: center;

			
 
				+          color: #fff;

			
 
				+          z-index: 2;

			
 
				+        }

			
 
				+      }

			
 
				+      span{

			
 
				+        width: 70%;

			
 
				+        display: block;

			
 
				+        margin: .1rem auto 0;

			
 
				+        line-height: .16rem;

			
 
				+        font-size: .1rem;

			
 
				+        text-align: center;

			
 
				+        color: #666;

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+  .MsgBanner{

			
 
				+    width: 100%;

			
 
				+    height: .44rem;

			
 
				+    position: relative;

			
 
				+    overflow: hidden;

			
 
				+    background: #f8f8f8;

			
 
				+    margin: .25rem auto 0;

			
 
				+    &>div{

			
 
				+      width: 100%;

			
 
				+      position: absolute;

			
 
				+      left: 0;

			
 
				+      top: 0;

			
 
				+      bottom: 0;

			
 
				+      align-items: center;

			
 
				+      &>i,

			
 
				+      &>span{

			
 
				+        color: #f05a3f;

			
 
				+        font-size: .12rem;

			
 
				+        margin-left: .08rem;

			
 
				+      }

			
 
				+      &>i{

			
 
				+        font-size: .16rem;

			
 
				+        margin-left: .3rem;

			
 
				+      }

			
 
				+      &>div{

			
 
				+        margin-left: .1rem;

			
 
				+        height: 100%;

			
 
				+        margin-right: .2rem;

			
 
				+        &>div{

			
 
				+          width: 100%;

			
 
				+          height: 100%;

			
 
				+          position: relative;

			
 
				+          overflow: hidden;

			
 
				+          &>div{

			
 
				+            width: 100%;

			
 
				+            height: 100%;

			
 
				+            a{

			
 
				+              width: 100%;

			
 
				+              display: inline-block;

			
 
				+              overflow: hidden;

			
 
				+              white-space: nowrap;

			
 
				+              text-overflow: ellipsis;

			
 
				+              line-height: .44rem;

			
 
				+              color: #f05a3f;

			
 
				+              span{

			
 
				+                color: #f05a3f;

			
 
				+              }

			
 
				+            }

			
 
				+          }

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+  .projectList{

			
 
				+    margin: .1rem .1rem 0;

			
 
				+    li{

			
 
				+      width: 100%;

			
 
				+      position: relative;

			
 
				+      height: 0;

			
 
				+      padding-bottom: 30%;

			
 
				+      background: #eee;

			
 
				+      overflow: hidden;

			
 
				+      margin: .08rem auto 0;

			
 
				+    }

			
 
				+  }

			
 
				+  .newsList{

			
 
				+    margin: .15rem .2rem .2rem;

			
 
				+    &>li{

			
 
				+      width: 100%;

			
 
				+      display: block;

			
 
				+      position: relative;

			
 
				+      overflow: hidden;

			
 
				+      border-top: .01rem solid #eee;

			
 
				+      &:first-child{

			
 
				+        border-top:none

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+}
			
--- a/src/pages/user/mainPage/page.scss
+++ b/src/pages/user/mainPage/page.scss
@@ -0,0 +1,47 @@
 
				+.mainPage{

			
 
				+  .subPage{

			
 
				+    &>div{

			
 
				+      width: 100%;

			
 
				+      position: absolute;

			
 
				+      left: 0;

			
 
				+      top: 0;

			
 
				+      bottom: 0;

			
 
				+      z-index: 1;

			
 
				+    }

			
 
				+  }

			
 
				+  &>nav{

			
 
				+    background: #fff;

			
 
				+    position: relative;

			
 
				+    z-index: 100;

			
 
				+    box-shadow: 0 0 .1rem .02rem rgba(0, 0, 0, .05);

			
 
				+    a{

			
 
				+      text-align: center;

			
 
				+      div{

			
 
				+        width: 100%;

			
 
				+        height: .2rem;

			
 
				+        position: relative;

			
 
				+        margin-top: .06rem;

			
 
				+      }

			
 
				+      img{

			
 
				+        max-height: .2rem;

			
 
				+        max-width: .2rem;

			
 
				+        filter: grayscale(100%);

			
 
				+        -webkit-filter: grayscale(100%);

			
 
				+      }

			
 
				+      span{

			
 
				+        width: 100%;

			
 
				+        display: inline-block;

			
 
				+        text-align: center;

			
 
				+        line-height: .2rem;

			
 
				+        font-size: .1rem;

			
 
				+        color: #000;

			
 
				+      }

			
 
				+    }

			
 
				+    a.active{

			
 
				+      img{

			
 
				+        filter: grayscale(0);

			
 
				+        -webkit-filter: grayscale(0);

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+}
			
--- a/src/pages/user/mainPage/userCenter/index.vue
+++ b/src/pages/user/mainPage/userCenter/index.vue
@@ -0,0 +1,119 @@
 
				+<template>

			
 
				+  <div class="mainPage">

			
 
				+    <div class="loading" v-if="isLoading">

			
 
				+      <!-- <img :src='loading' alt=""> -->

			
 
				+      <div @click="bindMobile">请绑定手机号</div>

			
 
				+    </div>

			
 
				+    <div v-else>

			
 
				+      <div class="userTop_view" >

			
 
				+        <div class="gradient_bg"></div>

			
 
				+        <div class="zIndex_bg"></div>

			
 
				+        <div class="userAvatar_Border">

			
 
				+          <div class="userAvatar">

			
 
				+            <img :src='AccountInfo.headimgurl' alt="" width="100%" height="100%">

			
 
				+          </div>

			
 
				+        </div>

			
 
				+        <div class="uesr-info">

			
 
				+          <div class="user-name">{{user.Name}}</div>

			
 
				+          <div class="mobile">{{user.Phone}}</div>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+      <div class="vip-privilege flex-h">

			
 
				+        <div class="flex-item privilege-item" @click="toCoupons">

			
 
				+          <div class="img-box">

			
 
				+            <img src="../../../../common/icon/userCenter-icon-1.png" width="100%" height="100%" alt="">

			
 
				+          </div>

			
 
				+          <span>优惠券</span>

			
 
				+          <span>2张未使用</span>

			
 
				+        </div>

			
 
				+        <div class="flex-item privilege-item" @click="toCard">

			
 
				+          <div class="img-box">

			
 
				+            <img src="../../../../common/icon/userCenter-icon-2.png" width="100%" height="100%" alt="">

			
 
				+          </div>

			
 
				+          <span>卡券</span>

			
 
				+          <span>2张未使用</span>

			
 
				+        </div>

			
 
				+        <div class="flex-item privilege-item" @click="toVip">

			
 
				+          <div class="img-box">

			
 
				+            <img src="../../../../common/icon/userCenter-icon-3.png" width="100%" height="100%" alt="">

			
 
				+          </div>

			
 
				+          <span>VIP卡</span>

			
 
				+          <span>￥200 <i class="iconfont icon-jiantou-right" style="font-size: 0.1rem;"></i></span>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+

			
 
				+      <div class="userCenter-menu">

			
 
				+        <div class="menu-item flex-h" @click="toLessonOrder">

			
 
				+          <span>课程订单</span>

			
 
				+          <i class="iconfont icon-jiantou-right"></i>

			
 
				+        </div>

			
 
				+        <div class="menu-item flex-h">

			
 
				+          <span>商品订单</span>

			
 
				+          <i class="iconfont icon-jiantou-right"></i>

			
 
				+        </div>

			
 
				+        <div class="menu-item flex-h">

			
 
				+          <span>体检报告</span>

			
 
				+          <i class="iconfont icon-jiantou-right"></i>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+    </div>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+import loading from '../../../../common/icon/loading.gif'

			
 
				+import { mapState, createNamespacedHelpers } from 'vuex'

			
 
				+const { mapActions: actions } = createNamespacedHelpers('userCenter')

			
 
				+export default {

			
 
				+  name: '',

			
 
				+  data () {

			
 
				+    return {

			
 
				+      user: {},

			
 
				+      loading,

			
 
				+      isLoading: true

			
 
				+    }

			
 
				+  },

			
 
				+  computed: {

			
 
				+    ...mapState({

			
 
				+      userInfo: x => x.userCenter.userInfo,

			
 
				+      org: x => x.app.orgId

			
 
				+    })

			
 
				+  },

			
 
				+  components: {

			
 
				+

			
 
				+  },

			
 
				+  created () {

			
 
				+    this.getUserInfo({ org: this.org }).then((res) => {

			
 
				+      this.user = this.userInfo.customer

			
 
				+      this.AccountInfo = JSON.parse(this.user.AccountInfo)

			
 
				+      this.headimgurl = this.AccountInfo.headimgurl

			
 
				+      this.isLoading = false

			
 
				+    }).catch((err) => {

			
 
				+      console.log(err)

			
 
				+    })

			
 
				+  },

			
 
				+  methods: {

			
 
				+    ...actions(['getUserInfo']),

			
 
				+    toLessonOrder () {

			
 
				+      this.$router.push({ name: 'lessonOrder' })

			
 
				+    },

			
 
				+    toVip () {

			
 
				+      this.$router.push({ name: 'vip' })

			
 
				+    },

			
 
				+    toCard () {

			
 
				+      this.$router.push({ name: 'card' })

			
 
				+    },

			
 
				+    toCoupons () {

			
 
				+      this.$router.push({ name: 'coupons' })

			
 
				+    },

			
 
				+    bindMobile () {

			
 
				+      this.$router.push({ name: 'bindMobile' })

			
 
				+    }

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->

			
 
				+<style lang="scss" scoped>

			
 
				+@import "page.scss";

			
 
				+</style>

			
--- a/src/pages/user/mainPage/userCenter/page.scss
+++ b/src/pages/user/mainPage/userCenter/page.scss
@@ -0,0 +1,121 @@
 
				+.mainPage{

			
 
				+  overflow-y: scroll;

			
 
				+  overflow-x: hidden;

			
 
				+}

			
 
				+

			
 
				+.loading{

			
 
				+  width: 100%;

			
 
				+  height: 100%;

			
 
				+  display: flex;

			
 
				+  justify-content: center;

			
 
				+  align-items: center;

			
 
				+}

			
 
				+

			
 
				+.userTop_view {

			
 
				+  position: relative;

			
 
				+  height: 1.7rem;

			
 
				+  margin-bottom: 1.3rem;

			
 
				+  .gradient_bg {

			
 
				+    position: absolute;

			
 
				+    width: 100%;

			
 
				+    height: 1.7rem;

			
 
				+    background-image: linear-gradient(24deg, #fa508c 0%, #ffc86e 100%);

			
 
				+    z-index: 2;

			
 
				+  }

			
 
				+  .zIndex_bg {

			
 
				+    position: absolute;

			
 
				+    bottom: -.6rem;

			
 
				+    left: 0;

			
 
				+    width: 120%;

			
 
				+    height: .6rem;

			
 
				+    transform: rotate(351.5deg);

			
 
				+    transform-origin: bottom left;

			
 
				+    z-index: 3;

			
 
				+    background-color: #fff;

			
 
				+  }

			
 
				+  .userAvatar_Border {

			
 
				+    position: absolute;

			
 
				+    bottom: -0.25rem;

			
 
				+    left: 50%;

			
 
				+    border: 0.1rem solid rgba(255, 255, 255, 0.2);

			
 
				+    transform: translateX(-50%);

			
 
				+    width: 1rem;

			
 
				+    height: 1rem;

			
 
				+    z-index: 3;

			
 
				+    border-radius: 50%;

			
 
				+  }

			
 
				+  .userAvatar {

			
 
				+    width: 1rem;

			
 
				+    height: 1rem;

			
 
				+    background-color: #000;

			
 
				+    box-sizing: border-box;

			
 
				+    border-radius: 50%;

			
 
				+    text-align: center;

			
 
				+    img {

			
 
				+      display: inline-block;

			
 
				+      vertical-align: middle;

			
 
				+      border-radius: 50%;

			
 
				+    }

			
 
				+  }

			
 
				+  .uesr-info {

			
 
				+    position: absolute;

			
 
				+    bottom: -1rem;

			
 
				+    left: 0;

			
 
				+    width: 100%;

			
 
				+    z-index: 4;

			
 
				+    .user-name {

			
 
				+      font-size: .24rem;

			
 
				+      text-align: center;

			
 
				+      color:rgba(0,0,0,1);

			
 
				+    }

			
 
				+    .mobile{

			
 
				+      color:rgba(125,125,125,1);

			
 
				+      font-size: .2rem;

			
 
				+      padding-top: 10px;

			
 
				+      text-align: center;

			
 
				+    }

			
 
				+  }

			
 
				+}

			
 
				+

			
 
				+.vip-privilege{

			
 
				+  height: 1.2rem;

			
 
				+  margin: 0 .25rem;

			
 
				+  background:rgba(255,255,255,1);

			
 
				+  box-shadow:0px 2px 12px 0px rgba(219,219,219,0.5);

			
 
				+  border-radius:8px;

			
 
				+  box-sizing: border-box;

			
 
				+

			
 
				+  .privilege-item {

			
 
				+    display: flex;

			
 
				+    flex-flow: column nowrap;

			
 
				+    justify-content: center;

			
 
				+    align-items: center;

			
 
				+    .img-box {

			
 
				+      width: 0.24rem;

			
 
				+      height: 0.18rem;

			
 
				+    }

			
 
				+    span:nth-of-type(1){

			
 
				+      font-size: .14rem;

			
 
				+      color:rgba(102,102,102,1);

			
 
				+      padding: 0.08rem 0 0.04rem;

			
 
				+    }

			
 
				+    span:nth-of-type(2){

			
 
				+      font-size: 12px;

			
 
				+      color:rgba(153,153,153,1);

			
 
				+    }

			
 
				+  }

			
 
				+}

			
 
				+

			
 
				+.userCenter-menu{

			
 
				+  padding: 0.2rem 0.25rem;;

			
 
				+  box-sizing: border-box;

			
 
				+  .menu-item{

			
 
				+    justify-content: space-between;

			
 
				+    padding: 0.1rem 0.05rem;

			
 
				+    border-bottom: 1px solid rgba(242,242,242,1);

			
 
				+    span,i{

			
 
				+      font-size: .14rem;

			
 
				+      color:rgba(102,102,102,1);

			
 
				+    }

			
 
				+  }

			
 
				+}
			
--- a/src/pages/user/majorProjects/index.vue
+++ b/src/pages/user/majorProjects/index.vue
@@ -0,0 +1,221 @@
 
				+<template>

			
 
				+  <div class="mainPage">

			
 
				+    <div class="banner">

			
 
				+      <div>

			
 
				+        <swiper :options="swiperOption" ref="mySwiper">

			
 
				+          <swiper-slide class="swiper-slide" v-for="(item,index) in projectInfo.CmsCaseImgs" :key="index">

			
 
				+            <img :src='item.CaseImageUrl' class="cover" alt="">

			
 
				+          </swiper-slide>

			
 
				+        </swiper>

			
 
				+      </div>

			
 
				+    </div>

			
 
				+    <p>{{projectInfo.DetailContent}}</p>

			
 
				+    <div class="list flex-h">

			
 
				+      <div class="flex-item">

			
 
				+        <div v-for="(item,index) in courseList" :key="index">

			
 
				+          <span>{{item.month+1}}月</span>

			
 
				+          <ul>

			
 
				+            <router-link tag="li" v-for="(subItem,subIndex) in item.list" :key="subIndex" :to="{name: 'majorProjectsDetail', query: {id: subItem.id}}" class="flex-h">

			
 
				+              <div class="flex-item">

			
 
				+                <div>

			
 
				+                  <courseItem :data="subItem"></courseItem>

			
 
				+                </div>

			
 
				+              </div>

			
 
				+            </router-link>

			
 
				+          </ul>

			
 
				+        </div>

			
 
				+        <div class="cutLine"></div>

			
 
				+        <div>

			
 
				+          <span>关注我们</span>

			
 
				+          <ul>

			
 
				+            <li class="flex-h">

			
 
				+              <div class="bottom flex-item flex-h">

			
 
				+                <div class="flex-item flex-h">

			
 
				+                  <div class="flex-item">

			
 
				+                    <div>

			
 
				+                      <span class="centerLabel">长按右方二维码<br>关注“城的空间”公众号</span>

			
 
				+                    </div>

			
 
				+                  </div>

			
 
				+                  <div class="qrCode">

			
 
				+                    <a><img src="" class="centerLabel cover" alt=""></a>

			
 
				+                  </div>

			
 
				+                </div>

			
 
				+              </div>

			
 
				+            </li>

			
 
				+          </ul>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+    </div>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+import { swiper, swiperSlide } from 'vue-awesome-swiper'

			
 
				+import 'swiper/dist/css/swiper.css'

			
 
				+import { mapState, createNamespacedHelpers } from 'vuex'

			
 
				+const { mapActions: mapProjectActions, mapState: mapProjectState } = createNamespacedHelpers('majorProjects')

			
 
				+import courseItem from '../../../components/courseItem/index'

			
 
				+

			
 
				+export default {

			
 
				+  name: '',

			
 
				+  data () {

			
 
				+    return {

			
 
				+      swiperOption: {

			
 
				+        observer: true,

			
 
				+        autoplay: {

			
 
				+          disableOnInteraction: false,

			
 
				+        }

			
 
				+      },

			
 
				+      courseList: [], // 课程列表

			
 
				+      initList: [

			
 
				+        // { // 初始化课程列表

			
 
				+        //   id: '',

			
 
				+        //   title: '课程名称',

			
 
				+        //   img: '',

			
 
				+        //   time: '2018.04.04 18:30-20:00',

			
 
				+        //   address: '南京南',

			
 
				+        //   tag: ['儿童教育', '小小外交官'],

			
 
				+        //   courseType: '团体课',

			
 
				+        //   defaultPrice: '168/节',

			
 
				+        //   getWay: 'ticket',

			
 
				+        //   startDate: 1514779200000,

			
 
				+        //   endDate: 1514781600000,

			
 
				+        // }, {

			
 
				+        //   id: '',

			
 
				+        //   title: '课程名称',

			
 
				+        //   img: '',

			
 
				+        //   time: '2018.04.04 18:30-20:00',

			
 
				+        //   address: '南京南',

			
 
				+        //   tag: ['儿童教育', '小小外交官'],

			
 
				+        //   courseType: '团体课',

			
 
				+        //   defaultPrice: '168/节',

			
 
				+        //   getWay: 'ticket',

			
 
				+        //   startDate: 1514779200000,

			
 
				+        //   endDate: 1514781600000,

			
 
				+        // }, {

			
 
				+        //   id: '',

			
 
				+        //   title: '课程名称',

			
 
				+        //   img: '',

			
 
				+        //   time: '2018.04.04 18:30-20:00',

			
 
				+        //   address: '南京南',

			
 
				+        //   tag: ['儿童教育', '小小外交官'],

			
 
				+        //   courseType: '团体课',

			
 
				+        //   defaultPrice: '168/节',

			
 
				+        //   getWay: 'ticket',

			
 
				+        //   startDate: 1517460000000,

			
 
				+        //   endDate: 1517467200000,

			
 
				+        // }, {

			
 
				+        //   id: '',

			
 
				+        //   title: '课程名称',

			
 
				+        //   img: '',

			
 
				+        //   time: '2018.04.04 18:30-20:00',

			
 
				+        //   address: '南京南',

			
 
				+        //   tag: ['儿童教育', '小小外交官'],

			
 
				+        //   courseType: '团体课',

			
 
				+        //   defaultPrice: '168/节',

			
 
				+        //   getWay: 'ticket',

			
 
				+        //   startDate: 1517460000000,

			
 
				+        //   endDate: 1517467200000,

			
 
				+        // }

			
 
				+      ],

			
 
				+    }

			
 
				+  },

			
 
				+  computed: {

			
 
				+    ...mapState({

			
 
				+      orgid: x => x.app.orgId,

			
 
				+      fiveA: x => x.index.fiveA,

			
 
				+      banner: x => x.index.banner,

			
 
				+      message: x => x.index.message,

			
 
				+      project: x => x.index.project,

			
 
				+      cms: x => x.index.cms,

			
 
				+    }),

			
 
				+    ...mapProjectState({

			
 
				+      projectInfo: x => x.projectInfo

			
 
				+    }),

			
 
				+    MySwiper () {

			
 
				+      return this.$refs.mySwiper.swiper

			
 
				+    },

			
 
				+  },

			
 
				+  components: {

			
 
				+    courseItem,

			
 
				+    swiper,

			
 
				+    swiperSlide,

			
 
				+  },

			
 
				+  created () {

			
 
				+    this.initData()

			
 
				+  },

			
 
				+  methods: {

			
 
				+    ...mapProjectActions([

			
 
				+      'getProjectInfo',

			
 
				+    ]),

			
 
				+    returnTag (arr) {

			
 
				+      var aArr = []

			
 
				+      for (var n = 0; n < arr.length; n++) {

			
 
				+        aArr.push(arr[n].TagName)

			
 
				+      }

			
 
				+      return aArr

			
 
				+    },

			
 
				+    returnNum (val) {

			
 
				+      return val > 9 ? val : '0' + val

			
 
				+    },

			
 
				+    returnDate (val) {

			
 
				+      val = new Date(val)

			
 
				+      return val.getFullYear() + '.' + this.returnNum(val.getMonth()+1) + '.' + this.returnNum(val.getDate())

			
 
				+    },

			
 
				+    initData () { // 初始化数据

			
 
				+      this.getProjectInfo({ id: this.$route.query.id }).then((res) => {

			
 
				+        // console.log(JSON.stringify(res))

			
 
				+        // this.initList

			
 
				+        var aArr = []

			
 
				+        for (var n = 0; n < res.Courses.length; n++) {

			
 
				+          aArr.push({

			
 
				+            id: res.Courses[n].CourseId,

			
 
				+            title: res.Courses[n].CourseName,

			
 
				+            img: res.Courses[n].CourseImg,

			
 
				+            time: this.returnDate(res.Courses[n].BeginDate) + '至' + this.returnDate(res.Courses[n].EndDate),

			
 
				+            address: res.CaseAddress == undefined ? '暂无数据' : res.CaseAddress,

			
 
				+            tag: this.returnTag(res.Courses[n].CourseTags),

			
 
				+            courseType: '团体课',

			
 
				+            defaultPrice: res.Courses[n].Price + '/节',

			
 
				+            getWay: 'ticket',

			
 
				+            startDate: new Date(res.Courses[n].BeginDate).getTime(),

			
 
				+            endDate: new Date(res.Courses[n].EndDate).getTime(),

			
 
				+          })

			
 
				+        }

			
 
				+        this.initList = aArr

			
 
				+        this.calcArr()

			
 
				+      })

			
 
				+    },

			
 
				+    calcArr () {

			
 
				+      let arr = []

			
 
				+      for (var n = 0; n < this.initList.length; n++) {

			
 
				+        arr.push(new Date(this.initList[n].startDate).getMonth())

			
 
				+      }

			
 
				+      for (var i = 0; i < arr.length; i++) {

			
 
				+        if (arr.indexOf(arr[i]) !== i) {

			
 
				+          arr.splice(i, 1)

			
 
				+          i--

			
 
				+        }

			
 
				+      }

			
 
				+      for (var i = 0; i < arr.length; i++) {

			
 
				+        this.courseList.push({

			
 
				+          month: arr[i],

			
 
				+          list: []

			
 
				+        })

			
 
				+      }

			
 
				+      for (var n = 0; n < this.initList.length; n++) {

			
 
				+        for (var i = 0; i < this.courseList.length; i++) {

			
 
				+          if (new Date(this.initList[n].startDate).getMonth() === this.courseList[i].month) {

			
 
				+            this.courseList[i].list.push(this.initList[n])

			
 
				+          }

			
 
				+        }

			
 
				+      }

			
 
				+    },

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->

			
 
				+<style lang="scss" scoped>

			
 
				+@import "page.scss";

			
 
				+</style>

			
--- a/src/pages/user/majorProjects/page.scss
+++ b/src/pages/user/majorProjects/page.scss
@@ -0,0 +1,151 @@
 
				+.mainPage{

			
 
				+  background: #fff;

			
 
				+  overflow-y: scroll;

			
 
				+  -webkit-overflow-scrolling: touch;

			
 
				+  transform: translateZ(0);

			
 
				+  -webkit-transform: translateZ(0);

			
 
				+  .banner{

			
 
				+    width: 100%;

			
 
				+    height: 0;

			
 
				+    padding-bottom: 65%;

			
 
				+    background: #eee;

			
 
				+    position: relative;

			
 
				+    overflow: hidden;

			
 
				+    >div{

			
 
				+      width: 100%;

			
 
				+      position: absolute;

			
 
				+      left: 0;

			
 
				+      top: 0;

			
 
				+      bottom: 0;

			
 
				+      >div{

			
 
				+        width: 100%;

			
 
				+        position: absolute;

			
 
				+        left: 0;

			
 
				+        top: 0;

			
 
				+        bottom: 0;

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+  p{

			
 
				+    width: 100%;

			
 
				+    box-sizing: border-box;

			
 
				+    border-left: .2rem solid transparent;

			
 
				+    border-right: .2rem solid transparent;

			
 
				+    line-height: .25rem;

			
 
				+    font-size: .16rem;

			
 
				+    color: #555;

			
 
				+    margin: .22rem auto 0;

			
 
				+  }

			
 
				+  .list{

			
 
				+    margin: .34rem auto 0;

			
 
				+    overflow: visible;

			
 
				+    .cutLine{

			
 
				+      box-sizing: border-box;

			
 
				+      height: .7rem;

			
 
				+      border-left: .01rem dashed #b57f4e;

			
 
				+      margin: 0 auto;

			
 
				+      &::after{

			
 
				+        display: none;

			
 
				+      }

			
 
				+    }

			
 
				+    &>div.flex-item{

			
 
				+      margin: 0 .2rem;

			
 
				+      overflow: visible;

			
 
				+      &>div{

			
 
				+        width: 100%;

			
 
				+        position: relative;

			
 
				+        overflow: visible;

			
 
				+        padding-bottom: .4rem;

			
 
				+        &::after{

			
 
				+          content: '';

			
 
				+          width: .01rem;

			
 
				+          height: 100%;

			
 
				+          background: #b57f4e;

			
 
				+          position: absolute;

			
 
				+          left: 0;

			
 
				+          top: 0;

			
 
				+          z-index: 1;

			
 
				+        }

			
 
				+        &>span{

			
 
				+          display: inline-block;

			
 
				+          line-height: .3rem;

			
 
				+          color: #fff;

			
 
				+          padding: 0 .2rem;

			
 
				+          background: #b57f4e;

			
 
				+          font-size: .15rem;

			
 
				+          border-top-right-radius: .3rem;

			
 
				+          border-bottom-right-radius: .3rem;

			
 
				+        }

			
 
				+        &>ul{

			
 
				+          box-sizing: border-box;

			
 
				+          border-left: .2rem solid transparent;

			
 
				+          &>li{

			
 
				+            margin: .2rem auto 0;

			
 
				+            position: relative;

			
 
				+            overflow: visible;

			
 
				+            box-shadow: 0 0 .2rem .02rem rgba(0, 0, 0, .1);

			
 
				+            border-radius: .06rem;

			
 
				+            padding: .1rem 0;

			
 
				+            &::after{

			
 
				+              content: '';

			
 
				+              width: .15rem;

			
 
				+              height: .15rem;

			
 
				+              border: .01rem solid #b57f4e;

			
 
				+              position: absolute;

			
 
				+              left: -.28rem;

			
 
				+              top: 50%;

			
 
				+              transform: translateY(-50%);

			
 
				+              -webkit-transform: translateY(-50%);

			
 
				+              background: #fff;

			
 
				+              z-index: 2;

			
 
				+              border-radius: 100%;

			
 
				+            }

			
 
				+            &::before{

			
 
				+              content: '';

			
 
				+              width: .09rem;

			
 
				+              height: .09rem;

			
 
				+              position: absolute;

			
 
				+              left: -.24rem;

			
 
				+              top: 50%;

			
 
				+              transform: translateY(-50%);

			
 
				+              -webkit-transform: translateY(-50%);

			
 
				+              background: #b57f4e;

			
 
				+              z-index: 3;

			
 
				+              border-radius: 100%;

			
 
				+            }

			
 
				+            &>div{

			
 
				+              margin: 0 .1rem;

			
 
				+              &.bottom{

			
 
				+                &>div{

			
 
				+                  &>div{

			
 
				+                    margin-right: .2rem;

			
 
				+                    span{

			
 
				+                      width: 100%;

			
 
				+                      text-align: center;

			
 
				+                      border-right: .01rem dashed #ccc;

			
 
				+                      line-height: .2rem;

			
 
				+                      font-size: .11rem;

			
 
				+                    }

			
 
				+                  }

			
 
				+                }

			
 
				+              }

			
 
				+            }

			
 
				+            .qrCode{

			
 
				+              width: .7rem;

			
 
				+              position: relative;

			
 
				+              overflow: hidden;

			
 
				+              a{

			
 
				+                width: 100%;

			
 
				+                display: block;

			
 
				+                padding-bottom: 100%;

			
 
				+                background: #eee;

			
 
				+                position: relative;

			
 
				+                overflow: hidden;

			
 
				+              }

			
 
				+            }

			
 
				+          }

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+}
			
--- a/src/pages/user/majorProjectsDetail/index.vue
+++ b/src/pages/user/majorProjectsDetail/index.vue
@@ -0,0 +1,145 @@
 
				+<template>

			
 
				+  <div class="mainPage flex-v">

			
 
				+    <div class="flex-item">

			
 
				+      <div class="content">

			
 
				+        <div class="banner">

			
 
				+          <div class="scrollImg">

			
 
				+            <swiper :options="swiperOption" ref="mySwiper">

			
 
				+              <swiper-slide class="swiper-slide" v-for="(item,index) in courseDetail.CourseImgs" :key="index">

			
 
				+                <img :src='item.ImgUrl' class="cover" alt="">

			
 
				+              </swiper-slide>

			
 
				+            </swiper>

			
 
				+          </div>

			
 
				+          <div>

			
 
				+            <span>{{courseDetail.CourseName}}</span>

			
 
				+            <div>

			
 
				+              <span>￥<em>{{courseDetail.Price}}</em>起/课时</span>

			
 
				+              <span>参与者<em>{{courseDetail.SignupNum}}</em>/{{courseDetail.MaxNum}}人</span>

			
 
				+            </div>

			
 
				+          </div>

			
 
				+        </div>

			
 
				+        <div class="subContent time">

			
 
				+          <h5>时间</h5>

			
 
				+          <span>{{returnDate(courseDetail.BeginDate)}}~{{returnDate(courseDetail.EndDate)}}</span>

			
 
				+          <div class="list flex-h">

			
 
				+            <div class="flex-item">

			
 
				+              <ul :class="{'show':showMoreCourse}">

			
 
				+                <li v-for="(item,index) in courseTimeList" :key="index">{{returnCourseTime(item.BeginDate,item.EndDate)}}</li>

			
 
				+              </ul>

			
 
				+              <a class="moreCourse" @click="triggerCourseTime">

			
 
				+                {{showMoreCourse ? '收起' : '更多'}}

			
 
				+                <i v-if="!showMoreCourse" class="iconfont icon-jiantou-down"></i>

			
 
				+                <i v-if="showMoreCourse" class="iconfont icon-jiantou-up"></i>

			
 
				+              </a>

			
 
				+            </div>

			
 
				+          </div>

			
 
				+        </div>

			
 
				+        <div style="width:100%;height:.1rem;background:#ebf1f2;"></div>

			
 
				+        <div class="subContent address">

			
 
				+          <h5>地点</h5>

			
 
				+          <div class="flex-h">

			
 
				+            <div class="flex-item">

			
 
				+              <div class="img">

			
 
				+                <router-link :to="{name: '', query: {}}">

			
 
				+                  <img :src="courseDetail.CaseInfo.CaseIcon" class="centerLabel cover" alt="">

			
 
				+                  <div class="flex-h">

			
 
				+                    <i class="iconfont icon-dingwei"></i>

			
 
				+                    <div class="flex-item">

			
 
				+                      <div>

			
 
				+                        <span>{{courseDetail.CaseInfo.CaseName}}（{{courseDetail.CaseInfo.CaseAddress}}）</span>

			
 
				+                      </div>

			
 
				+                    </div>

			
 
				+                  </div>

			
 
				+                </router-link>

			
 
				+              </div>

			
 
				+            </div>

			
 
				+          </div>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+    </div>

			
 
				+    <div class="flex-h">

			
 
				+      <div class="flex-item">

			
 
				+        <div>

			
 
				+          <span>总计￥<em>{{courseDetail.Price}}</em></span>

			
 
				+          <span>优惠券体验</span>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+      <router-link :to="{name: 'placeOrderForCourse', query: {id: courseDetail.CourseId}}">去购买</router-link>

			
 
				+    </div>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+import { swiper, swiperSlide } from 'vue-awesome-swiper'

			
 
				+import 'swiper/dist/css/swiper.css'

			
 
				+import { mapState, createNamespacedHelpers } from 'vuex'

			
 
				+const { mapActions: mapProjectActions, mapState: mapProjectState } = createNamespacedHelpers('majorProjects')

			
 
				+

			
 
				+export default {

			
 
				+  name: '',

			
 
				+  data () {

			
 
				+    return {

			
 
				+      swiperOption: {

			
 
				+        observer: true,

			
 
				+        autoplay: {

			
 
				+          disableOnInteraction: false,

			
 
				+        }

			
 
				+      },

			
 
				+      showMoreCourse: false, // 显隐更多课程时间

			
 
				+      courseTimeList: [], // 课程时间

			
 
				+    }

			
 
				+  },

			
 
				+  computed: {

			
 
				+    ...mapState({

			
 
				+      orgid: x => x.app.orgId,

			
 
				+      fiveA: x => x.index.fiveA,

			
 
				+      banner: x => x.index.banner,

			
 
				+      message: x => x.index.message,

			
 
				+      project: x => x.index.project,

			
 
				+      cms: x => x.index.cms,

			
 
				+    }),

			
 
				+    ...mapProjectState({

			
 
				+      courseDetail: x => x.courseDetail

			
 
				+    }),

			
 
				+    MySwiper () {

			
 
				+      return this.$refs.mySwiper.swiper

			
 
				+    },

			
 
				+  },

			
 
				+  components: {

			
 
				+    swiper,

			
 
				+    swiperSlide,

			
 
				+  },

			
 
				+  created () {

			
 
				+    this.getCourseDetailInfo({ id: this.$route.query.id }).then((res) => {

			
 
				+      var arr = res.CourseDetail

			
 
				+      this.courseTimeList = arr.sort(function (a, b) { return new Date(a.BeginDate).getTime() > new Date(b.BeginDate).getTime() ? 1 : -1 })

			
 
				+      console.log(JSON.stringify(this.courseTimeList))

			
 
				+    })

			
 
				+  },

			
 
				+  methods: {

			
 
				+    ...mapProjectActions([

			
 
				+      'getCourseDetailInfo',

			
 
				+    ]),

			
 
				+    returnCourseTime (val,endVal) { // 返回课时时间

			
 
				+      val = new Date(val)

			
 
				+      endVal = new Date(endVal)

			
 
				+      return this.returnNum(val.getMonth() + 1) + '/' + this.returnNum(val.getDate()) + ' 周' + '日一二三四五六'.split('')[new Date(val).getDay()] + ' ' + this.returnNum(val.getHours()) + ':' + this.returnNum(val.getMinutes()) + '~' + this.returnNum(endVal.getHours()) + ':' + this.returnNum(endVal.getMinutes())

			
 
				+    },

			
 
				+    returnNum (val) {

			
 
				+      return val > 9 ? val : '0' + val

			
 
				+    },

			
 
				+    returnDate (val) {

			
 
				+      val = new Date(val)

			
 
				+      return val.getFullYear() + '年' + this.returnNum(val.getMonth() + 1) + '月' + this.returnNum(val.getDate()) + '日'

			
 
				+    },

			
 
				+    triggerCourseTime () { // 显隐更多课程时间

			
 
				+      this.showMoreCourse = !this.showMoreCourse

			
 
				+    },

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->

			
 
				+<style lang="scss" scoped>

			
 
				+@import "page.scss";

			
 
				+</style>

			
--- a/src/pages/user/majorProjectsDetail/page.scss
+++ b/src/pages/user/majorProjectsDetail/page.scss
@@ -0,0 +1,247 @@
 
				+.mainPage{

			
 
				+  background: #fff;

			
 
				+  &>div.flex-item{

			
 
				+    &>div{

			
 
				+      width: 100%;

			
 
				+      position: absolute;

			
 
				+      left: 0;

			
 
				+      top: 0;

			
 
				+      bottom: 0;

			
 
				+      overflow-y: scroll;

			
 
				+      -webkit-overflow-scrolling: touch;

			
 
				+      transform: translateZ(0);

			
 
				+      -webkit-transform: translateZ(0);

			
 
				+      .banner{

			
 
				+        width: 100%;

			
 
				+        height: 0;

			
 
				+        padding-bottom: 118%;

			
 
				+        background: #eee;

			
 
				+        position: relative;

			
 
				+        overflow: hidden;

			
 
				+        &>div.scrollImg{

			
 
				+          width: 100%;

			
 
				+          position: absolute;

			
 
				+          top: 0;

			
 
				+          left: 0;

			
 
				+          bottom: 0;

			
 
				+          overflow: hidden;

			
 
				+          z-index: 1;

			
 
				+          >div{

			
 
				+            width: 100%;

			
 
				+            position: absolute;

			
 
				+            top: 0;

			
 
				+            left: 0;

			
 
				+            bottom: 0;

			
 
				+          }

			
 
				+        }

			
 
				+        &>div.scrollImg+div{

			
 
				+          width: 100%;

			
 
				+          position: absolute;

			
 
				+          left: 0;

			
 
				+          bottom: 0;

			
 
				+          overflow: hidden;

			
 
				+          z-index: 2;

			
 
				+          background: linear-gradient(to top, rgba(0,0,0,.1),rgba(0,0,0,0));

			
 
				+          background: -webkit-linear-gradient(bottom, rgba(0,0,0,.1),rgba(0,0,0,0));

			
 
				+          &>span{

			
 
				+            width: 100%;

			
 
				+            display: block;

			
 
				+            line-height: .38rem;

			
 
				+            color: #fff;

			
 
				+            font-size: .2rem;

			
 
				+            text-indent: .26rem;

			
 
				+            text-overflow: ellipsis;

			
 
				+            white-space: nowrap;

			
 
				+            overflow: hidden;

			
 
				+          }

			
 
				+          &>div{

			
 
				+            font-size: 0;

			
 
				+            white-space: nowrap;

			
 
				+            margin-bottom: .26rem;

			
 
				+            &>span{

			
 
				+              display: inline-block;

			
 
				+              line-height: .32rem;

			
 
				+              color: #fff;

			
 
				+              font-size: .11rem;

			
 
				+              vertical-align: middle;

			
 
				+              &:first-child{

			
 
				+                margin-left: .26rem;

			
 
				+                margin-right: .1rem;

			
 
				+                em{

			
 
				+                  font-size: .2rem;

			
 
				+                  color: #fff;

			
 
				+                }

			
 
				+                &+span{

			
 
				+                  line-height: .24rem;

			
 
				+                  background: rgba(0,0,0,.2);

			
 
				+                  padding: 0 .15rem;

			
 
				+                  border-radius: .32rem;

			
 
				+                  em{

			
 
				+                    color: #e8a813;

			
 
				+                    line-height: .24rem;

			
 
				+                    font-size: .11rem;

			
 
				+                  }

			
 
				+                }

			
 
				+              }

			
 
				+            }

			
 
				+          }

			
 
				+        }

			
 
				+      }

			
 
				+      .subContent{

			
 
				+        h5{

			
 
				+          width: 100%;

			
 
				+          display: block;

			
 
				+          line-height: .22rem;

			
 
				+          font-size: .16rem;

			
 
				+          text-indent: .26rem;

			
 
				+          margin: .15rem auto 0;

			
 
				+        }

			
 
				+      }

			
 
				+      .time{

			
 
				+        &>span{

			
 
				+          width: 100%;

			
 
				+          display: block;

			
 
				+          line-height: .22rem;

			
 
				+          color: #666;

			
 
				+          font-size: .11rem;

			
 
				+          text-indent: .26rem;

			
 
				+        }

			
 
				+        .list{

			
 
				+          &>div{

			
 
				+            margin: 0 .26rem;

			
 
				+            ul{

			
 
				+              font-size: 0;

			
 
				+              height: .44rem;

			
 
				+              overflow: hidden;

			
 
				+              &.show{

			
 
				+                height: auto;

			
 
				+              }

			
 
				+              li{

			
 
				+                width: 50%;

			
 
				+                display: inline-block;

			
 
				+                line-height: .22rem;

			
 
				+                font-size: .11rem;

			
 
				+                color: #666;

			
 
				+                &:nth-child(2n){

			
 
				+                  text-align: right;

			
 
				+                }

			
 
				+              }

			
 
				+            }

			
 
				+            .moreCourse{

			
 
				+              width: 100%;

			
 
				+              display: block;

			
 
				+              text-align: center;

			
 
				+              border-top: .01rem solid #eee;

			
 
				+              line-height: .4rem;

			
 
				+              color: #666;

			
 
				+              font-size: .13rem;

			
 
				+              margin-top: .05rem;

			
 
				+              i{

			
 
				+                line-height: .4rem;

			
 
				+                color: #666;

			
 
				+                font-size: .13rem;  

			
 
				+              }

			
 
				+            }

			
 
				+          }

			
 
				+        }

			
 
				+      }

			
 
				+      .address{

			
 
				+        &>div{

			
 
				+          &>div{

			
 
				+            margin: 0 .26rem;

			
 
				+            border-bottom: .01rem solid #eee;

			
 
				+            padding: .2rem 0;

			
 
				+            .img{

			
 
				+              width: 2.4rem;

			
 
				+              position: relative;

			
 
				+              overflow: hidden;

			
 
				+              a{

			
 
				+                width: 100%;

			
 
				+                display: block;

			
 
				+                padding-bottom: 62.5%;

			
 
				+                background: #eee;

			
 
				+                border-radius: .06rem;

			
 
				+                position: relative;

			
 
				+                overflow: hidden;

			
 
				+                >div{

			
 
				+                  width: 100%;

			
 
				+                  position: absolute;

			
 
				+                  left: 0;

			
 
				+                  bottom: 0;

			
 
				+                  overflow: hidden;

			
 
				+                  background: rgba(0,0,0,.3);

			
 
				+                  z-index: 2;

			
 
				+                  *{

			
 
				+                    font-size: .13rem;

			
 
				+                    color: #fff;

			
 
				+                  }

			
 
				+                  i{

			
 
				+                    margin-left: .1rem;

			
 
				+                    line-height: .3rem;

			
 
				+                  }

			
 
				+                  >div{

			
 
				+                    margin: 0 .1rem 0 .05rem;

			
 
				+                    >div{

			
 
				+                      width: 100%;

			
 
				+                      position: relative;

			
 
				+                      overflow: hidden;

			
 
				+                      >span{

			
 
				+                        width: 100%;

			
 
				+                        display: block;

			
 
				+                        line-height: .3rem;

			
 
				+                        overflow: hidden;

			
 
				+                        white-space: nowrap;

			
 
				+                        text-overflow: ellipsis;

			
 
				+                      }

			
 
				+                    }

			
 
				+                  }

			
 
				+                }

			
 
				+                img{

			
 
				+                  z-index: 1;

			
 
				+                }

			
 
				+              }

			
 
				+            }

			
 
				+          }

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+  &>div.flex-h{

			
 
				+    padding: .1rem 0;

			
 
				+    background: #fff;

			
 
				+    position: relative;

			
 
				+    z-index: 100;

			
 
				+    box-shadow: 0 0 .2rem .02rem rgba(0,0,0,.05);

			
 
				+    div{

			
 
				+      vertical-align: middle;

			
 
				+      span{

			
 
				+        width: 100%;

			
 
				+        display: inline-block;

			
 
				+        text-align: center;

			
 
				+        text-decoration: line-through;

			
 
				+        font-size: .11rem;

			
 
				+        em{

			
 
				+          font-size: .18rem;

			
 
				+        }

			
 
				+        &:only-child{

			
 
				+          line-height: .4rem;

			
 
				+          text-decoration: none;

			
 
				+        }

			
 
				+        &+span{

			
 
				+          color: #fc6243;

			
 
				+          font-size: .11rem;

			
 
				+          text-decoration: none;

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+    &>a{

			
 
				+      line-height: .4rem;

			
 
				+      padding: 0 .6rem;

			
 
				+      border-radius: .4rem;

			
 
				+      color: #fff;

			
 
				+      font-size: .15rem;

			
 
				+      margin-right: .2rem;

			
 
				+      background: #fc6243;

			
 
				+    }

			
 
				+  }

			
 
				+}
			
--- a/src/pages/user/orderList/index.vue
+++ b/src/pages/user/orderList/index.vue
@@ -0,0 +1,135 @@
 
				+<template>

			
 
				+  <div class="mainPage flex-v">

			
 
				+    <div class="top">

			
 
				+      <topCaseInfo :data="topCaseInfoData"></topCaseInfo>

			
 
				+    </div>

			
 
				+    <div class="flex-item">

			
 
				+      <div class="flex-h">

			
 
				+        <div class="flex-item">

			
 
				+          <ul>

			
 
				+            <li v-for="(item,index) in list" :key="index">

			
 
				+              <orderListItem :data="item"></orderListItem>

			
 
				+            </li>

			
 
				+          </ul>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+    </div>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+import topCaseInfo from '../../../components/topCaseInfo/index'

			
 
				+import orderListItem from '../../../components/orderListItem/index'

			
 
				+

			
 
				+export default {

			
 
				+  name: '',

			
 
				+  data () {

			
 
				+    return {

			
 
				+      topCaseInfoData: {

			
 
				+        caseName: 'xxx',

			
 
				+        caseId: '',

			
 
				+        showSelect: false,

			
 
				+        userName: 'xxx'

			
 
				+      },

			
 
				+      list: [{

			
 
				+        status: 0,

			
 
				+        caseName: '案场名称',

			
 
				+        creatTime: '02/16 14:20',

			
 
				+        goodsList: [{

			
 
				+          name: '商品名称1',

			
 
				+          specName: '加冰',

			
 
				+          price: null,

			
 
				+          specPrice: 20,

			
 
				+          num: null,

			
 
				+          specNum: 2,

			
 
				+        },{

			
 
				+          name: '商品名称2',

			
 
				+          specName: null,

			
 
				+          price: 100,

			
 
				+          specPrice: null,

			
 
				+          num: 1,

			
 
				+          specNum: null,

			
 
				+        },{

			
 
				+          name: '商品名称3',

			
 
				+          specName: null,

			
 
				+          price: 100,

			
 
				+          specPrice: null,

			
 
				+          num: 1,

			
 
				+          specNum: null,

			
 
				+        },{

			
 
				+          name: '商品名称4',

			
 
				+          specName: null,

			
 
				+          price: 100,

			
 
				+          specPrice: null,

			
 
				+          num: 1,

			
 
				+          specNum: null,

			
 
				+        },{

			
 
				+          name: '商品名称5',

			
 
				+          specName: null,

			
 
				+          price: 100,

			
 
				+          specPrice: null,

			
 
				+          num: 1,

			
 
				+          specNum: null,

			
 
				+        },{

			
 
				+          name: '商品名称6',

			
 
				+          specName: null,

			
 
				+          price: 100,

			
 
				+          specPrice: null,

			
 
				+          num: 1,

			
 
				+          specNum: null,

			
 
				+        }],

			
 
				+      },{

			
 
				+        status: 1,

			
 
				+        caseName: '案场名称',

			
 
				+        creatTime: '02/16 14:20',

			
 
				+        goodsList: [{

			
 
				+          name: '商品名称1',

			
 
				+          specName: '加冰',

			
 
				+          price: null,

			
 
				+          specPrice: 20,

			
 
				+          num: null,

			
 
				+          specNum: 2,

			
 
				+        }],

			
 
				+      },{

			
 
				+        status: 2,

			
 
				+        caseName: '案场名称',

			
 
				+        creatTime: '02/16 14:20',

			
 
				+        goodsList: [{

			
 
				+          name: '商品名称1',

			
 
				+          specName: '加冰',

			
 
				+          price: null,

			
 
				+          specPrice: 20,

			
 
				+          num: null,

			
 
				+          specNum: 2,

			
 
				+        }],

			
 
				+      },{

			
 
				+        status: 0,

			
 
				+        caseName: '案场名称',

			
 
				+        creatTime: '02/16 14:20',

			
 
				+        goodsList: [{

			
 
				+          name: '商品名称1',

			
 
				+          specName: '加冰',

			
 
				+          price: null,

			
 
				+          specPrice: 20,

			
 
				+          num: null,

			
 
				+          specNum: 2,

			
 
				+        }],

			
 
				+      }],

			
 
				+    }

			
 
				+  },

			
 
				+  computed: {},

			
 
				+  components: {

			
 
				+    topCaseInfo,

			
 
				+    orderListItem,

			
 
				+  },

			
 
				+  created () { },

			
 
				+  methods: {

			
 
				+    

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->

			
 
				+<style lang="scss" scoped>

			
 
				+@import "page.scss";

			
 
				+</style>

			
--- a/src/pages/user/orderList/page.scss
+++ b/src/pages/user/orderList/page.scss
@@ -0,0 +1,150 @@
 
				+.mainPage{

			
 
				+  &>div.flex-item{

			
 
				+    &>div{

			
 
				+      width: 100%;

			
 
				+      position: absolute;

			
 
				+      left: 0;

			
 
				+      top: 0;

			
 
				+      bottom: 0;

			
 
				+      overflow-y: scroll;

			
 
				+      -webkit-overflow-scrolling: touch;

			
 
				+      transform: translateZ(0);

			
 
				+      -webkit-transform: translateZ(0);

			
 
				+      &>div{

			
 
				+        margin: 0 .25rem;

			
 
				+        overflow: visible;

			
 
				+        &>ul{

			
 
				+          width: 100%;

			
 
				+          position: relative;

			
 
				+          overflow: visible;

			
 
				+          margin-bottom: .25rem;

			
 
				+          &>li{

			
 
				+            width: 100%;

			
 
				+            position: relative;

			
 
				+            overflow: hidden;

			
 
				+            border-radius: .1rem;

			
 
				+            background: #fff;

			
 
				+            box-shadow: 0 0 .2rem .02rem rgba(0, 0, 0, .1);

			
 
				+            padding: .08rem 0;

			
 
				+            margin: .25rem auto 0;

			
 
				+            // .title{

			
 
				+            //   width: 100%;

			
 
				+            //   position: relative;

			
 
				+            //   overflow: hidden;

			
 
				+            //   align-items: center;

			
 
				+            //   &>div:nth-child(1){

			
 
				+            //     width: .5rem;

			
 
				+            //     text-align: center;

			
 
				+            //     *{

			
 
				+            //       display: inline-block;

			
 
				+            //       font-size: .1rem;

			
 
				+            //       line-height: .17rem;

			
 
				+            //     }

			
 
				+            //     i{

			
 
				+            //       font-size: .15rem;

			
 
				+            //     }

			
 
				+            //   }

			
 
				+            //   &>div:nth-child(1).orange{

			
 
				+            //     *{

			
 
				+            //       color: #fc6243;

			
 
				+            //     }

			
 
				+            //   }

			
 
				+            //   &>div:nth-child(1).grey{

			
 
				+            //     *{

			
 
				+            //       color: #ccc;

			
 
				+            //     }

			
 
				+            //   }

			
 
				+            //   &>div:nth-child(1).green{

			
 
				+            //     *{

			
 
				+            //       color: #63c86f;

			
 
				+            //     }

			
 
				+            //   }

			
 
				+            //   &>div:nth-child(2){

			
 
				+            //     margin-right: .1rem;

			
 
				+            //     &>div{

			
 
				+            //       width: 100%;

			
 
				+            //       position: relative;

			
 
				+            //       overflow: hidden;

			
 
				+            //       span{

			
 
				+            //         width: 100%;

			
 
				+            //         display: block;

			
 
				+            //         font-size: .14rem;

			
 
				+            //         overflow: hidden;

			
 
				+            //         text-overflow: ellipsis;

			
 
				+            //         white-space: nowrap;

			
 
				+            //       }

			
 
				+            //     }

			
 
				+            //   }

			
 
				+            //   &>span{

			
 
				+            //     font-size: .11rem;

			
 
				+            //     color: #666;

			
 
				+            //     margin-right: .15rem;

			
 
				+            //   }

			
 
				+            // }

			
 
				+            // .line{

			
 
				+            //   width: 100%;

			
 
				+            //   height: .2rem;

			
 
				+            //   position: relative;

			
 
				+            //   overflow: hidden;

			
 
				+            //   &>div{

			
 
				+            //     width: 100%;

			
 
				+            //     position: absolute;

			
 
				+            //     overflow: hidden;

			
 
				+            //     left: 0;

			
 
				+            //     top: 50%;

			
 
				+            //     transform: translateY(-50%) translateX(-.035rem);

			
 
				+            //     -webkit-transform: translateY(-50%) translateX(-.035rem);

			
 
				+            //     font-size: 0;

			
 
				+            //     white-space: nowrap;

			
 
				+            //     i{

			
 
				+            //       display: inline-block;

			
 
				+            //       width: .07rem;

			
 
				+            //       height: .07rem;

			
 
				+            //       position: relative;

			
 
				+            //       overflow: hidden;

			
 
				+            //       border-radius: 100%;

			
 
				+            //       background: #eee;

			
 
				+            //       margin-right: .1rem;

			
 
				+            //     }

			
 
				+            //   }

			
 
				+            // }

			
 
				+            // .list{

			
 
				+            //   &>div{

			
 
				+            //     margin: 0 .15rem;

			
 
				+            //     &>ul{

			
 
				+            //       margin: .06rem auto;

			
 
				+            //       &>li{

			
 
				+            //         font-size: 0;

			
 
				+            //         white-space: nowrap;

			
 
				+            //         &>*{

			
 
				+            //           display: inline-block;

			
 
				+            //           vertical-align: middle;

			
 
				+            //           width: 50%;

			
 
				+            //           overflow: hidden;

			
 
				+            //           text-overflow: ellipsis;

			
 
				+            //           white-space: nowrap;

			
 
				+            //         }

			
 
				+            //         &>span{

			
 
				+            //           line-height: .26rem;

			
 
				+            //           font-size: .14rem;

			
 
				+            //           color: #555;

			
 
				+            //         }

			
 
				+            //         &>div{

			
 
				+            //           text-align: right;

			
 
				+            //           font-size: 0;

			
 
				+            //           span{

			
 
				+            //             font-size: .11rem;

			
 
				+            //             line-height: .26rem;

			
 
				+            //             color: #666;

			
 
				+            //           }

			
 
				+            //         }

			
 
				+            //       }

			
 
				+            //     }

			
 
				+            //   }

			
 
				+            // }

			
 
				+          }

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+}
			
--- a/src/pages/user/placeOrder/index.vue
+++ b/src/pages/user/placeOrder/index.vue
@@ -0,0 +1,308 @@
 
				+<template>

			
 
				+  <div class="mainPage flex-v">

			
 
				+    <div class="flex-item flex-v">

			
 
				+      <div class="banner">

			
 
				+        <img src="" class="centerLabel cover" alt="">

			
 
				+        <div class="bannerInfo flex-h">

			
 
				+          <div class="flex-item">

			
 
				+            <div>

			
 
				+              <span>项目名称：xxxx</span>

			
 
				+            </div>

			
 
				+          </div>

			
 
				+          <span>xxx您好！</span>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+      <div class="tableInfo flex-h">

			
 
				+        <div class="flex-item">

			
 
				+          <div>

			
 
				+            <span>桌号：案场11号桌</span>

			
 
				+            <span>本月已用：150杯</span>

			
 
				+          </div>

			
 
				+        </div>

			
 
				+        <router-link :to="{name: 'coffeeIndex', query: {}}">返回选择桌号</router-link>

			
 
				+      </div>

			
 
				+      <div class="content flex-item flex-h">

			
 
				+        <div class="slideMenus">

			
 
				+          <div>

			
 
				+            <ul>

			
 
				+              <li v-for="(item,index) in menuList" :key="index" :class="{'active': slideMenusActive == index}" @click="cutMenu(index)">

			
 
				+                <span>{{item.value}}</span>

			
 
				+                <span>{{item.eValue}}</span>

			
 
				+              </li>

			
 
				+            </ul>

			
 
				+          </div>

			
 
				+        </div>

			
 
				+        <div class="flex-item">

			
 
				+          <div>

			
 
				+            <swiper :options="swiperOption" ref="mySwiper">

			
 
				+              <swiper-slide class="swiper-slide" v-for="(item,index) in menuList" :key="index">

			
 
				+                <div class="flex-v">

			
 
				+                  <h4>{{item.value + ' ' + item.eValue}}</h4>

			
 
				+                  <div class="flex-item">

			
 
				+                    <div>

			
 
				+                      <swiper :options="subSwiperOption" ref="mySubSwiper">

			
 
				+                        <swiper-slide class="swiper-slide" v-for="(subItem,subIndex) in item.list" :key="subIndex">

			
 
				+                          <orderItem :data="subItem" @returnData="calcMenus" @selectSpec="selectSpec"></orderItem>

			
 
				+                        </swiper-slide>

			
 
				+                      </swiper>

			
 
				+                    </div>

			
 
				+                  </div>

			
 
				+                </div>

			
 
				+              </swiper-slide>

			
 
				+            </swiper>

			
 
				+          </div>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+    </div>

			
 
				+    <div class="flex-h">

			
 
				+      <div class="flex-item">

			
 
				+        <div>

			
 
				+          <span>总计</span>

			
 
				+          <span>{{totalNum}}</span>

			
 
				+          <span>杯</span>

			
 
				+          <span>共</span>

			
 
				+          <span>{{totalPrice}}</span>

			
 
				+          <span>元</span>

			
 
				+          <i class="iconfont" :class="{'icon-jiantou-up': !showCalcMenu,'icon-jiantou-down': showCalcMenu}" @click="showCalcMenu = true"></i>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+      <router-link :to="{name: 'placeOrderDetail', query: {info: JSON.stringify(settlementList)}}">下单</router-link>

			
 
				+      <!-- <a @click="showCalcMenu = true">下单</a> -->

			
 
				+    </div>

			
 
				+    <orderPopup :show="showPopup" :data="currentSpec" @closePopup="closePopup" @returnData="calcMenus"></orderPopup>

			
 
				+    <calcMenu :show="showCalcMenu" :totalNum="totalCupNum" :data="settlementList" @returnData="calcMenus" @emptyMenus="emptyMenus" @closeCalcMenu="closeCalcMenu" @placeOrder="placeOrder"></calcMenu>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+import orderItem from '../../../components/orderItem/index'

			
 
				+import orderPopup from '../../../components/orderPopup/index'

			
 
				+import calcMenu from '../../../components/calcMenu/index'

			
 
				+import { swiper, swiperSlide } from 'vue-awesome-swiper'

			
 
				+import 'swiper/dist/css/swiper.css'

			
 
				+

			
 
				+export default {

			
 
				+  name: '',

			
 
				+  data () {

			
 
				+    const _self = this

			
 
				+    return {

			
 
				+      totalCupNum: 0, // 共计使用杯数

			
 
				+      showCalcMenu: false, // 显隐已点菜单弹窗

			
 
				+      currentSpec: null, // 当前选择规格

			
 
				+      showPopup: false, // 显隐选规格弹窗

			
 
				+      totalNum: 0, // 总杯数

			
 
				+      totalPrice: 0, // 总价格

			
 
				+      settlementList: [], // 商品选择清单

			
 
				+      slideMenusActive: 0, // 左侧菜单选中索引值

			
 
				+      menuList: [{ // 商品数据

			
 
				+        value: '咖啡',

			
 
				+        eValue: 'Coffee',

			
 
				+        id: '1',

			
 
				+        status: 1,

			
 
				+        list: [{

			
 
				+          img: '',

			
 
				+          name: '商品名称',

			
 
				+          id: '1-1',

			
 
				+          status: 1,

			
 
				+          spec: [{

			
 
				+            value: '去冰',

			
 
				+            id: '1-1-1',

			
 
				+            num: 0,

			
 
				+            status: 0,

			
 
				+            price: '10',

			
 
				+          }, {

			
 
				+            value: '少冰',

			
 
				+            id: '1-1-2',

			
 
				+            num: 0,

			
 
				+            status: 1,

			
 
				+            price: '15',

			
 
				+          }, {

			
 
				+            value: '正常',

			
 
				+            id: '1-1-3',

			
 
				+            num: 0,

			
 
				+            status: 1,

			
 
				+            price: '20',

			
 
				+          }, {

			
 
				+            value: '多冰',

			
 
				+            id: '1-1-4',

			
 
				+            num: 0,

			
 
				+            status: 1,

			
 
				+            price: '25',

			
 
				+          }],

			
 
				+          price: '100',

			
 
				+        }, {

			
 
				+          img: '',

			
 
				+          name: '商品名称',

			
 
				+          id: '1-2',

			
 
				+          spec: [],

			
 
				+          status: 0,

			
 
				+          price: '100',

			
 
				+        }, {

			
 
				+          img: '',

			
 
				+          name: '商品名称',

			
 
				+          id: '1-3',

			
 
				+          spec: [],

			
 
				+          status: 1,

			
 
				+          price: '100',

			
 
				+        }, {

			
 
				+          img: '',

			
 
				+          name: '商品名称',

			
 
				+          id: '1-4',

			
 
				+          spec: [],

			
 
				+          status: 1,

			
 
				+          price: '100',

			
 
				+        }, {

			
 
				+          img: '',

			
 
				+          name: '商品名称',

			
 
				+          id: '1-5',

			
 
				+          spec: [],

			
 
				+          status: 1,

			
 
				+          price: '100',

			
 
				+        }, {

			
 
				+          img: '',

			
 
				+          name: '商品名称',

			
 
				+          id: '1-6',

			
 
				+          spec: [],

			
 
				+          status: 1,

			
 
				+          price: '100',

			
 
				+        }],

			
 
				+      }, {

			
 
				+        value: '咖啡一',

			
 
				+        eValue: 'Coffee',

			
 
				+        id: '2',

			
 
				+        status: 1,

			
 
				+        list: [],

			
 
				+      }, {

			
 
				+        value: '咖啡二',

			
 
				+        eValue: 'Coffee',

			
 
				+        id: '3',

			
 
				+        status: 1,

			
 
				+        list: [],

			
 
				+      }, {

			
 
				+        value: '咖啡三',

			
 
				+        eValue: 'Coffee',

			
 
				+        id: '4',

			
 
				+        status: 1,

			
 
				+        list: [],

			
 
				+      }, {

			
 
				+        value: '咖啡四',

			
 
				+        eValue: 'Coffee',

			
 
				+        id: '5',

			
 
				+        status: 1,

			
 
				+        list: [],

			
 
				+      }],

			
 
				+      swiperOption: {

			
 
				+        observer: true,

			
 
				+        direction: 'vertical',

			
 
				+        on: {

			
 
				+          transitionEnd () {

			
 
				+            _self.slideMenusActive = this.activeIndex

			
 
				+          },

			
 
				+        }

			
 
				+      },

			
 
				+      subSwiperOption: {

			
 
				+        observer: true,

			
 
				+        direction: 'vertical',

			
 
				+        nested: true,

			
 
				+        slidesPerView: 'auto',

			
 
				+        freeMode: true,

			
 
				+        freeModeMomentumVelocityRatio: 2,

			
 
				+      },

			
 
				+    }

			
 
				+  },

			
 
				+  computed: {

			
 
				+    MySwiper () {

			
 
				+      return this.$refs.mySwiper.swiper

			
 
				+    },

			
 
				+    MySubSwiper () {

			
 
				+      return this.$refs.mySubSwiper.swiper

			
 
				+    },

			
 
				+  },

			
 
				+  components: {

			
 
				+    swiper,

			
 
				+    swiperSlide,

			
 
				+    orderItem,

			
 
				+    orderPopup,

			
 
				+    calcMenu,

			
 
				+  },

			
 
				+  created () { },

			
 
				+  methods: {

			
 
				+    placeOrder () { // 下单

			
 
				+      this.$router.push({name: 'orderList', query: {}})

			
 
				+    },

			
 
				+    closeCalcMenu () { // 关闭已选菜单

			
 
				+      this.showCalcMenu = false

			
 
				+    },

			
 
				+    emptyMenus () { // 清空菜单

			
 
				+      this.settlementList = []

			
 
				+    },

			
 
				+    closePopup () { // 关闭规格弹窗

			
 
				+      this.showPopup = false

			
 
				+      this.currentSpec = null

			
 
				+    },

			
 
				+    selectSpec (val) { // 选规格

			
 
				+      this.currentSpec = val

			
 
				+      this.showPopup = true

			
 
				+    },

			
 
				+    cutMenu (index) { // 切换菜单

			
 
				+      this.MySwiper.slideTo(index, 300)

			
 
				+    },

			
 
				+    calcMenus (val) { // 计算清单

			
 
				+      var bool = true, arr = this.settlementList.slice()

			
 
				+      if (val.specId === null) {

			
 
				+        for (var n = 0; n < arr.length; n++) {

			
 
				+          if (arr[n].id === val.id && arr[n].specId === null) {

			
 
				+            bool = false

			
 
				+            arr[n] = val

			
 
				+          }

			
 
				+        }

			
 
				+        if (bool) {

			
 
				+          arr.push(val)

			
 
				+        }

			
 
				+      } else {

			
 
				+        for (var n = 0; n < arr.length; n++) {

			
 
				+          if (arr[n].specId === val.specId) {

			
 
				+            bool = false

			
 
				+            arr[n] = val

			
 
				+          }

			
 
				+        }

			
 
				+        if (bool) {

			
 
				+          arr.push(val)

			
 
				+        }

			
 
				+      }

			
 
				+      for (var n = 0; n < arr.length; n++) {

			
 
				+        if (arr[n].num === 0 || arr[n].defaultNum === 0) {

			
 
				+          arr.splice(n, 1)

			
 
				+        }

			
 
				+      }

			
 
				+      this.settlementList = arr

			
 
				+      // console.log(JSON.stringify(this.settlementList))

			
 
				+      this.calcTotalNum()

			
 
				+    },

			
 
				+    calcTotalNum () { // 计算总数量、价格

			
 
				+      var num = 0, price = 0

			
 
				+      if (!this.settlementList.length) {

			
 
				+        this.totalNum = 0

			
 
				+        this.totalPrice = 0

			
 
				+        return

			
 
				+      }

			
 
				+      for (var n = 0; n < this.settlementList.length; n++) {

			
 
				+        if (this.settlementList[n].specId === null) {

			
 
				+          num += this.settlementList[n].defaultNum

			
 
				+          price += this.settlementList[n].defaultPrice * this.settlementList[n].defaultNum

			
 
				+        } else {

			
 
				+          num += this.settlementList[n].num

			
 
				+          price += this.settlementList[n].price * this.settlementList[n].num

			
 
				+        }

			
 
				+      }

			
 
				+      this.totalNum = num

			
 
				+      this.totalPrice = price

			
 
				+    },

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->

			
 
				+<style lang="scss" scoped>

			
 
				+@import "page.scss";

			
 
				+</style>

			
--- a/src/pages/user/placeOrder/page.scss
+++ b/src/pages/user/placeOrder/page.scss