xcx

src/components/salesRecordItem/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="salesRecordItem">
+    <div class="top flex-h">
+      <span>销售名称：</span>
+      <span>{{data.name}}</span>
+      <div class="flex-item">
+        <i class="iconfont icon-jiantou-right"></i>
+      </div>
+    </div>
+    <div class="itemBody flex-h">
+      <div class="flex-item">
+        <div>
+          <span>已发出<em>{{data.cardAndCoupon.usedNum}}</em>张卡券</span>
+          <div class="progress">
+            <div :style="{width: (data.cardAndCoupon.usedNum/data.cardAndCoupon.totalNum).toFixed(2) * 100 + '%', background: returnProgressColor((data.cardAndCoupon.usedNum/data.cardAndCoupon.totalNum).toFixed(2) * 100)}"></div>
+          </div>
+          <a :class="{'grey': data.cardAndCoupon.status === 1}" @click="triggerCardAndCoupon(data)">{{data.cardAndCoupon.status === 1 ? '关闭卡券' : '开启卡券'}}</a>
+        </div>
+      </div>
+      <div class="flex-item">
+        <div>
+          <span>已送出<em>12</em>杯饮品</span>
+          <div class="progress">
+            <div :style="{width: (data.drink.usedNum/data.drink.totalNum).toFixed(2) * 100 + '%', background: returnProgressColor((data.drink.usedNum/data.drink.totalNum).toFixed(2) * 100)}"></div>
+          </div>
+          <a :class="{'grey': data.drink.status === 1}" @click="triggerDrink(data)">{{data.drink.status === 1 ? '关闭饮品' : '开启饮品'}}</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  props: ['data'],
+  data () {
+    return {
+
+    }
+  },
+  computed: {
+
+  },
+  components: {
+
+  },
+  created () {
+
+  },
+  methods: {
+    triggerCardAndCoupon (item) { // 切换卡券状态
+      this.$emit('triggerCardAndCoupon', {type: this.data.cardAndCoupon.status === 1 ? 'close' : 'open', data: item})
+    },
+    triggerDrink (item) { // 切换饮品状态
+      this.$emit('triggerDrink', {type: this.data.drink.status === 1 ? 'close' : 'open', data: item})
+    },
+    returnProgressColor (val) { // 返回进度条颜色
+      if (val <= 33) {
+        return '#45bfa1'
+      } else if (val <= 66) {
+        return '#ff9800'
+      } else {
+        return '#ff2b00'
+      }
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import 'page.scss';
+</style>

src/components/salesRecordItem/page.scss

@@ -0,0 +1,100 @@
+.salesRecordItem{
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  border-radius: .1rem;
+  background: #fff;
+  box-shadow: 0 0 .1rem .02rem rgba(0, 0, 0, .05);
+  padding: .12rem 0;
+  .top{
+    width: 100%;
+    align-items: center;
+    span{
+      line-height: .28rem;
+      font-size: .12rem;
+      margin-right: .05rem;
+      margin-left: .2rem;
+      &:nth-child(2){
+        margin-left: 0;
+        font-size: .16rem;
+      }
+    }
+    div{
+      text-align: right;
+      margin-right: .2rem;
+      i{
+        font-size: .12rem;
+        color: #666;
+      }
+    }
+  }
+  .itemBody{
+    padding: 0 .2rem;
+    margin: .14rem auto 0;
+    margin-bottom: .12rem;
+    >div{
+      position: relative;
+      overflow: hidden;
+      &:nth-child(1)::after{
+        content: '';
+        width: .01rem;
+        height: 100%;
+        position: absolute;
+        right: 0;
+        top: 0;
+        background: #eee;
+      }
+      >div{
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        span{
+          width: 100%;
+          display: block;
+          text-align: center;
+          line-height: .26rem;
+          font-size: .12rem;
+          color: #666;
+          em{
+            color: #fb3f19;
+            font-size: .12rem;
+          }
+        }
+        .progress{
+          width: 1.1rem;
+          height: .04rem;
+          position: relative;
+          overflow: hidden;
+          border-radius: .04rem;
+          background: #ccc;
+          margin: .04rem auto 0;
+          >div{
+            position: absolute;
+            height: .04rem;
+            left: 0;
+            top: 0;
+            border-radius: 0 .04rem .04rem 0;
+            background: #ff9800;
+          }
+        }
+        a{
+          width: 1.1rem;
+          display: block;
+          text-align: center;
+          line-height: .34rem;
+          font-size: .15rem;
+          color: #fff;
+          border: .01rem solid #fb3f19;
+          background: #fb3f19;
+          border-radius: .03rem;
+          margin: .16rem auto 0;
+          &.grey{
+            color: #666;
+            border: .01rem solid #666;
+            background: none;
+          }
+        }
+      }
+    }
+  }
+}

src/pages/sales/cardAndCouponNum/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="mainPage flex-v">
+    <div class="top flex-h">
+      <span>￥<em>199</em>元</span>
+      <div class="flex-item">
+        <div>
+          <span>健身团课一次体验卡</span>
+          <span>卡券描述卡券描述卡券描述卡券描述卡券描述</span>
+          <span>2018年02月02日 - 2018年02月03日</span>
+        </div>
+      </div>
+    </div>
+    <ul class="numList flex-h">
+      <li class="flex-item">
+        <div>
+          <span>总数量</span>
+          <span>10</span>
+        </div>
+      </li>
+      <li class="flex-item">
+        <div>
+          <span>剩余</span>
+          <span>5</span>
+        </div>
+      </li>
+      <li class="flex-item">
+        <div>
+          <span>用户领取</span>
+          <span>5</span>
+        </div>
+      </li>
+      <li class="flex-item">
+        <div>
+          <span>实际使用</span>
+          <span>2</span>
+        </div>
+      </li>
+    </ul>
+    <div class="flex-item">
+      <div>
+        <div>
+          <ul>
+            <li class="flex-h">
+              <span>销售名称</span>
+              <div class="flex-item">
+                <div>
+                  <span>实际使用</span>
+                </div>
+              </div>
+              <span>用户领取</span>
+            </li>
+            <li class="flex-h" v-for="(item,index) in 10" :key="index">
+              <span>xxx</span>
+              <div class="flex-item">
+                <div>
+                  <span>2</span>
+                </div>
+              </div>
+              <span>5</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  data () {
+    return {
+    }
+  },
+  created () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import 'page.scss';
+</style>

src/pages/sales/cardAndCouponNum/page.scss

@@ -0,0 +1,127 @@
+.mainPage{
+  .top{
+    align-items: center;
+    margin-top: .18rem;
+    position: relative;
+    background: #fff;
+    z-index: 3;
+    >span{
+      font-size: .12rem;
+      color: #fc6243;
+      margin-right: .2rem;
+      margin-left: .2rem;
+      em{
+        font-size: .32rem;
+        font-weight: bolder;
+        color: #fc6243;
+      }
+    }
+    >div{
+      margin-right: .2rem;
+      >div{
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        >span{
+          width: 100%;
+          display: block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          line-height: .22rem;
+          font-size: .12rem;
+          color: #666;
+          &:first-child{
+            line-height: .28rem;
+            font-size: .15rem;
+            color: #333;
+          }
+        }
+      }
+    }
+  }
+  .numList{
+    padding: .25rem .2rem .05rem;
+    position: relative;
+    z-index: 2;
+    background: #fff;
+    box-shadow: 0 0 .1rem .02rem rgba(0, 0, 0, .05);
+    >li{
+      >div{
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        >span{
+          width: 100%;
+          display: block;
+          text-align: center;
+          line-height: .22rem;
+          font-size: .12rem;
+          color: #fc6243;
+          &:first-child{
+            line-height: .2rem;
+            color: #666;
+          }
+        }
+      }
+    }
+  }
+  >.flex-item{
+    >div{
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      overflow: hidden;
+      >div{
+        padding: 0 .2rem;
+        position: relative;
+        height: 100%;
+        overflow-y: scroll;
+        -webkit-overflow-scrolling: touch;
+        transform: translateZ(0);
+        -webkit-transform: translateZ(0);
+        ul{
+          margin: .2rem auto 0;
+          li{
+            border-top: .01rem solid #eee;
+            &:first-child{
+              border: none;
+            }
+            span{
+              line-height: .34rem;
+              font-size: .12rem;
+              text-align: center;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+            >span{
+              min-width: 1rem;
+              &:last-child{
+                color: #fc6243;
+              }
+            }
+            &:first-child{
+              >span:last-child{
+                color: #333;
+              }
+            }
+            >div{
+              >div{
+                width: 100%;
+                position: relative;
+                overflow: hidden;
+                span{
+                  width: 100%;
+                  display: block;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/pages/sales/coffeeIndex/index.vue

@@ -46,6 +46,16 @@
           </li>
           <li :hidden="navActive !== 1" class="my-card">
             <div class="list-box">
+              <div class="cardAndCouponInfo flex-h">
+                <div class="flex-item">
+                  <div>
+                    <span>卡券货值总额：</span>
+                    <span>￥1000</span>
+                    <span>万</span>
+                  </div>
+                </div>
+                <router-link :to="{name: 'salesRecord',query: {}}">销售记录</router-link>
+              </div>
               <myCard v-for="(item,index) in cardList" :key="index" :data='item' @share='share'></myCard>
             </div>
           </li>
@@ -79,7 +89,7 @@ export default {
   name: '',
   data () {
     return {
-      navActive: 2,
+      navActive: 1,
       cutNavList: [{
         value: '城咖啡',
         id: '1',

src/pages/sales/coffeeIndex/page.scss

@@ -138,8 +138,35 @@
             }
           }
           &.my-card, &.customer-card{
+            .cardAndCouponInfo{
+              align-items: center;
+              margin: .1rem 0 .15rem;
+              div{
+                font-size: 0;
+                white-space: nowrap;
+                span{
+                  line-height: .3rem;
+                  font-size: .13rem;
+                  display: inline-block;
+                  margin-right: .05rem;
+                  &:nth-child(2){
+                    font-size: .16rem;
+                    color: #fc6243;
+                  }
+                }
+              }
+              a{
+                line-height: .24rem;
+                padding: 0 .1rem;
+                box-sizing: border-box;
+                border: .01rem solid #333;
+                color: #333;
+                border-radius: .04rem;
+                font-size: .12rem;
+              }
+            }
             .list-box{
-              padding: .26rem .2rem;
+              padding: .1rem .2rem .2rem;
             }
           }
         }

src/pages/sales/router.js

@@ -4,30 +4,48 @@ import Router from 'vue-router'
 import login from './login/index' // 登录
 import coffeeIndex from './coffeeIndex/index' // 点单首页
 import placeOrder from './placeOrder/index' // 城咖啡-点单
+import salesRecord from './salesRecord/index' // 销售记录
+import salesGiveOutDetail from './salesGiveOutDetail/index' // 销售发放详情
+import cardAndCouponNum from './cardAndCouponNum/index' // 卡券数量信息
 
 Vue.use(Router)
 
 const router = new Router({
-  routes: [{
+  routes: [{ // 登录
     path: '/login',
     name: 'login',
     component: login,
     children: []
-  },{
+  }, { // 点单首页
     path: '/coffeeIndex',
     name: 'coffeeIndex',
     component: coffeeIndex,
     children: []
-  },{
+  }, { // 城咖啡-点单
     path: '/placeOrder',
     name: 'placeOrder',
     component: placeOrder,
     children: []
+  }, { // 销售记录
+    path: '/salesRecord',
+    name: 'salesRecord',
+    component: salesRecord,
+    children: []
+  }, { // 销售发放详情
+    path: '/salesGiveOutDetail',
+    name: 'salesGiveOutDetail',
+    component: salesGiveOutDetail,
+    children: []
+  }, { // 卡券数量信息
+    path: '/cardAndCouponNum',
+    name: 'cardAndCouponNum',
+    component: cardAndCouponNum,
+    children: []
   }],
 })
 
 router.beforeEach((to, from, next) => {
-  
+
   next()
 })
 

src/pages/sales/salesGiveOutDetail/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="mainPage flex-v">
+    <div class="top">
+      <topCaseInfo :data="topCaseInfoData" @selectCase="showSelect = true"></topCaseInfo>
+    </div>
+    <div class="flex-item flex-v body">
+      <span>销售姓名：<em>柳依依</em></span>
+      <ul class="flex-h">
+        <li class="flex-item" :class="{'active': activeIndex === 0}" @click="cutNav(0)">
+          <span>饮品</span>
+          <span>（已赠送12杯）</span>  
+        </li> 
+        <li class="flex-item" :class="{'active': activeIndex === 1}" @click="cutNav(1)">
+          <span>卡券</span>
+          <span>（已发出12张）</span>  
+        </li> 
+      </ul>
+      <div class="flex-item">
+        <div>
+          <ul>
+            <li :hidden="activeIndex === 1">
+              <ul class="list">
+                <li class="flex-h" v-for="(item,index) in 40" :key="index">
+                  <div class="flex-item">
+                    <div>
+                      <span>水吧特级调试咖啡水吧特级调试咖啡水吧特级调试咖啡水吧特级调试咖啡</span>
+                    </div>
+                  </div>
+                  <div class="flex-item">
+                    <div>
+                      <span>￥50 * 1</span>
+                    </div>
+                  </div>
+                  <span>2018/03/03 15:02:02</span>
+                </li>
+              </ul>
+            </li>
+            <li :hidden="activeIndex === 0">
+              <ul class="list">
+                <router-link tag="li" class="flex-h" v-for="(item,index) in 40" :key="index" :to="{name: 'cardAndCouponNum', query: {}}">
+                  <div class="flex-item">
+                    <div>
+                      <span>健身团课体验卡</span>
+                    </div>
+                  </div>
+                  <div class="flex-item">
+                    <div>
+                      <span>￥50 * 1</span>
+                    </div>
+                  </div>
+                  <span>2018/03/03 15:02:02</span>
+                </router-link>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import topCaseInfo from '../../../components/topCaseInfo/index'
+
+export default {
+  name: '',
+  data () {
+    return {
+      activeIndex: 0,
+      topCaseInfoData: {
+        caseName: '',
+        caseId: '',
+        showSelect: false,
+        userName: 'xxx'
+      },
+    }
+  },
+  components: {
+    topCaseInfo,
+  },
+  created () {
+
+  },
+  methods: {
+    cutNav (index) {
+      this.activeIndex = index
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import 'page.scss';
+</style>

src/pages/sales/salesGiveOutDetail/page.scss

@@ -0,0 +1,115 @@
+.mainPage{
+  .body{
+    >span{
+      width: 100%;
+      display: block;
+      line-height: .28rem;
+      font-size: .12rem;
+      color: #666;
+      text-indent: .2rem;
+      margin: .2rem auto 0;
+      position: relative;
+      z-index: 3;
+      background: #fff;
+      em{
+        font-size: .16rem;
+        font-weight: bolder;
+        color: #333;
+      }
+    }
+    >ul{
+      padding: .05rem .2rem 0;
+      position: relative;
+      z-index: 2;
+      box-shadow: 0 0 .1rem .02rem rgba(0, 0, 0, .05);
+      >li{
+        font-size: 0;
+        white-space: nowrap;
+        text-align: center;
+        position: relative;
+        &.active::after{
+          content: '';
+          width: 1.1rem;
+          height: .02rem;
+          background: #fa2a00;
+          position: absolute;
+          left: 50%;
+          bottom: 0;
+          transform: translateX(-50%);
+          -webkit-transform: translateX(-50%);
+        }
+        >span{
+          display: inline-block;
+          line-height: .42rem;
+          font-size: .15rem;
+          color: #666;
+          &:nth-child(2){
+            font-size: .12rem;
+          }
+        }
+      }
+    }
+    >div{
+      >div{
+        width: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        overflow: hidden;
+        >ul{
+          width: 100%;
+          height: 100%;
+          position: relative;
+          overflow: hidden;
+          >li{
+            padding: 0 .2rem;
+            position: relative;
+            height: 100%;
+            overflow-y: scroll;
+            -webkit-overflow-scrolling: touch;
+            transform: translateZ(0);
+            -webkit-transform: translateZ(0);
+            .list{
+              width: 100%;
+              padding: .1rem 0;
+              >li{
+                width: 100%;
+                position: relative;
+                overflow: hidden;
+                border-bottom: .01rem solid #eee;
+                &:last-child{
+                  border: none;
+                }
+                align-items: center;
+                span{
+                  line-height: .38rem;
+                  font-size: .12rem;
+                  color: #666;
+                  white-space: nowrap;
+                  text-overflow: ellipsis;
+                  overflow: hidden;
+                }
+                >div{
+                  span{
+                    width: 100%;
+                    display: block;
+                  }
+                  margin-left: .1rem;
+                  &:first-child{
+                    margin-left: 0;
+                  }
+                  &:nth-child(2){
+                    span{
+                      text-align: center;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/pages/sales/salesRecord/index.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="mainPage flex-v">
+    <div class="top">
+      <topCaseInfo :data="topCaseInfoData" @selectCase="showSelect = true"></topCaseInfo>
+    </div>
+    <div class="flex-item body">
+      <div>
+        <ul>
+          <router-link tag="li" v-for="(item,index) in list" :key="index" :to="{name: 'salesGiveOutDetail', query: {}}">
+            <salesRecordItem :data="item" @triggerCardAndCoupon="triggerCardAndCoupon" @triggerDrink="triggerDrink"></salesRecordItem>
+          </router-link>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import topCaseInfo from '../../../components/topCaseInfo/index'
+import salesRecordItem from '../../../components/salesRecordItem/index'
+
+export default {
+  name: '',
+  data () {
+    return {
+      topCaseInfoData: {
+        caseName: '',
+        caseId: '',
+        showSelect: false,
+        userName: 'xxx'
+      },
+      list: [{
+        name: '柳依依',
+        id: '1',
+        cardAndCoupon: {
+          totalNum: '100',
+          usedNum: '35',
+          status: 1,
+        },
+        drink: {
+          totalNum: '100',
+          usedNum: '68',
+          status: 0,
+        },
+      }, {
+        name: '柳依依',
+        id: '1',
+        cardAndCoupon: {
+          totalNum: '100',
+          usedNum: '10',
+          status: 1,
+        },
+        drink: {
+          totalNum: '100',
+          usedNum: '45',
+          status: 1,
+        },
+      }, {
+        name: '柳依依',
+        id: '1',
+        cardAndCoupon: {
+          totalNum: '100',
+          usedNum: '35',
+          status: 1,
+        },
+        drink: {
+          totalNum: '100',
+          usedNum: '68',
+          status: 1,
+        },
+      }, {
+        name: '柳依依',
+        id: '1',
+        cardAndCoupon: {
+          totalNum: '100',
+          usedNum: '35',
+          status: 1,
+        },
+        drink: {
+          totalNum: '100',
+          usedNum: '68',
+          status: 1,
+        },
+      }, {
+        name: '柳依依',
+        id: '1',
+        cardAndCoupon: {
+          totalNum: '100',
+          usedNum: '35',
+          status: 1,
+        },
+        drink: {
+          totalNum: '100',
+          usedNum: '68',
+          status: 1,
+        },
+      }, {
+        name: '柳依依',
+        id: '1',
+        cardAndCoupon: {
+          totalNum: '100',
+          usedNum: '35',
+          status: 1,
+        },
+        drink: {
+          totalNum: '100',
+          usedNum: '68',
+          status: 1,
+        },
+      }, {
+        name: '柳依依',
+        id: '1',
+        cardAndCoupon: {
+          totalNum: '100',
+          usedNum: '35',
+          status: 1,
+        },
+        drink: {
+          totalNum: '100',
+          usedNum: '68',
+          status: 1,
+        },
+      }],
+    }
+  },
+  components: {
+    topCaseInfo,
+    salesRecordItem,
+  },
+  created () {
+
+  },
+  methods: {
+    triggerCardAndCoupon (val) { // 切换卡券状态 type='close'：关闭；type='open'：开启；
+      console.log(val)
+    },
+    triggerDrink (val) { // 切换饮品状态 type='close'：关闭；type='open'：开启；
+      console.log(val)
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import 'page.scss';
+</style>

src/pages/sales/salesRecord/page.scss

@@ -0,0 +1,27 @@
+.mainPage{
+  .body{
+    >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);
+      >ul{
+        padding: 0 .2rem;
+        position: relative;
+        overflow: visible;
+        margin-bottom: .2rem;
+        >li{
+          width: 100%;
+          position: relative;
+          overflow: visible;
+          margin: .2rem auto 0;
+        }
+      }
+    }
+  }
+}

src/pages/user/placeOrderDetail/index.vue

@@ -41,7 +41,7 @@
       </div>
       <span>下单人：{{userInfo.CustomerName}} {{userInfo.Phone}}</span>
       <div class="bottom">
-        <a>取消</a>
+        <a @click="cancel">取消</a>
         <a @click="toPayer">确定</a>
       </div>
     </div>
@@ -83,19 +83,19 @@ export default {
         },
         detail: [],
         coupon: [
-        //   {
-        //   OrdersCouponId: '',
-        //   OrdersId: '',
-        //   OrdersNo: '',
-        //   CouponId: '',
-        //   CouponName: '',
-        //   OrgId: '',
-        //   GoodsId: '',
-        //   GoodsName: '',
-        //   UsedAmount: '',
-        //   Status: '',
-        //   CreateDate: '',
-        // }
+          //   {
+          //   OrdersCouponId: '',
+          //   OrdersId: '',
+          //   OrdersNo: '',
+          //   CouponId: '',
+          //   CouponName: '',
+          //   OrgId: '',
+          //   GoodsId: '',
+          //   GoodsName: '',
+          //   UsedAmount: '',
+          //   Status: '',
+          //   CreateDate: '',
+          // }
         ],
       },
       ticketList: [{
@@ -150,6 +150,7 @@ export default {
       this.postData.info.UserName = this.userInfo.CustomerName
       this.postData.info.PayType = this.postData.coupon.length ? 'coupon' : 'vip'
       var orderInfo = JSON.parse(this.$route.query.info)
+      this.postData.detail = []
       for (var n = 0; n < orderInfo.length; n++) {
         this.postData.detail.push({
           GoodsId: orderInfo[n].id,
@@ -173,6 +174,9 @@ export default {
         })
       })
     },
+    cancel () {
+      window.history.go(-1)
+    },
   }
 }
 </script>