first commit

历届学生/罗朝/项目练习/电商App/font-shop/src/components/tpl/404.vue

@@ -0,0 +1,34 @@
+<template lang="pug">
+  .error
+    h2 404页面
+</template>
+
+<script>
+  import { mapActions } from 'vuex'
+export default {
+  created() {
+  },
+  methods: {
+    ...mapActions({
+      changeHeader: 'SETACTION_CLOSEDHEADER',
+      changeFooter: 'SETACTION_CLOSEDFOOTER',
+      changeContent: 'SETACTION_CONTENT'
+    })
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      vm.changeFooter(false)
+      vm.changeHeader(false)
+    })
+  },
+  beforeRouteLeave (to, from, next) {
+    this.changeFooter(true)
+    this.changeHeader(true)
+    next()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/tpl/infoNavBar.vue

@@ -0,0 +1,40 @@
+<template lang="pug">
+  .InfoNavBar
+    yd-navbar-back-icon(@click.native="$utils.goBack()" class="back")
+    yd-icon(name='shopcart-outline', size='17px', color='#777'  class="cart" @click.native="goCart")
+</template>
+
+<script>
+export default {
+  methods: {
+    goCart() {
+      location.href = "#/cart"
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.InfoNavBar {
+  display: flex;
+  height: 1rem;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 13px;
+  padding-top: .2rem;
+  position: fixed;
+  width: 100%;
+  top:0;
+  bottom: 0;
+  z-index: 9;
+  .back,
+  .cart {
+    width: .8rem;
+    height: .8rem;
+    line-height: .8rem;
+    text-align: center;
+    border-radius: 100%;
+    background: rgba(0, 0, 0, 0.16);
+  }
+}
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/tpl/navbar.vue

@@ -0,0 +1,22 @@
+<template lang="pug">
+  .shop-header
+    yd-navbar(slot='navbar', :title='titles' fixed)
+      router-link(to='/my', slot='left')
+        yd-icon(name='ucenter-outline', size='25px', color='#777')
+      router-link(to='/search', slot='right')
+        yd-icon(name='search', size='25px', color='#777')
+        
+</template>
+
+<script>
+export default {
+  props: {
+    titles: String
+  }
+}
+</script>
+
+
+<style lang="less" scoped>
+
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/tpl/orderItem.vue

@@ -0,0 +1,81 @@
+<template lang="pug">
+    .orderItem
+      div.error(v-if="listdata.length == 0")
+        yd-icon(name='shopcart-outline')
+        h2 没有数据
+      div(v-else)
+        li(v-for='(item, key) in listdata', :key='key' @click="enterInfo(item.id)")
+          yd-list(theme='4')
+            yd-list-item
+              img(slot='img', :src='item.commodity_thumbnail')
+              span(slot='title') {{item.commodity_name}}
+              yd-list-other(slot='other')
+                div
+                  span.demo-list-price
+                    em ¥
+                    | {{item.commodity_nowprice}}
+                  span.demo-list-del-price ¥{{item.commodity_oldprice}}
+                yd-button(type="primary" v-if="item.order_status == 0" @click.native="enterPay(item,key)") 去付款
+                yd-button(type="danger" v-else-if="item.order_status == 1" @click.native="confirmGoods(item,key)") 确认收货
+                div(v-if="item.order_status == 2") 已完成
+</template>
+
+<script>
+  export default {
+    props: {
+      listdata: Array,
+      showButton: Boolean
+    },
+    data () {
+      return {
+        isClick: true,
+        userInfo: localStorage.getItem("status") != null ? (JSON.parse(this.$utils.uncompile(localStorage.getItem("status")))) : null
+      }
+    },
+    methods: {
+      enterInfo(id) {
+        if (this.isClick) {
+          this.$router.push({ name: 'info', params: { id: id } })
+        } else {
+          this.isClick = true
+        }
+      },
+      enterPay() {
+        this.isClick = false
+        this.$router.push({ name: 'cart'})
+
+      },
+      // 确认收货按钮被点击
+      async confirmGoods(item,index) {
+        this.isClick = false
+        this.$dialog.confirm({
+          title: '提示',
+          mes: '确认您已经收到货物并检查过货物无损坏，点击确定 [确认收货]',
+          opts: async () => {
+            await this.$http.UpdateOrder({
+              userid: this.userInfo.id,
+              status: Number(item.order_status) + 1,
+              oid: item.oid
+            });
+            this.listdata.splice(index,1)
+          }
+        });
+
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+.error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 400px;
+  h2 {
+    margin-top: 8px;
+    color: #8e8b8b;
+  }
+}
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/tpl/orderNavBar.vue

@@ -0,0 +1,20 @@
+<template lang="pug">
+  yd-navbar(title='确认订单' fixed)
+    router-link(to='', slot='left')
+      yd-navbar-back-icon(@click.native="goBack")
+
+</template>
+
+<script >
+  export default {
+    methods: {
+      goBack(){
+        this.$router.back()
+      }
+    },
+  }
+</script>
+
+<style scoped lang="less">
+
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/tpl/swiper.vue

@@ -0,0 +1,19 @@
+<template lang="pug">
+  .swiper
+    yd-slider(autoplay='3000')
+      yd-slider-item(v-for="(item,index) in SwiperList" :key="index")
+        a(:href='item.href')
+          img(:src='item.path ? item.path : item.url')
+</template>
+
+<script>
+export default {
+  props: {
+    SwiperList: Array
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/tpl/tabbar.vue

@@ -0,0 +1,31 @@
+<template lang="pug">
+  .footer
+    yd-tabbar(slot='tabbar' fixed)
+      yd-tabbar-item(v-for="(item,index) in $conf.TabBar" 
+                     :title='item.title'
+                     :link='item.path' 
+                     :key="index"
+                     @click.native="submitClick(item.title)")
+        yd-icon(:name='item.icon', slot='icon')
+        
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      
+    }
+  },
+  methods: {
+    submitClick (title) {
+      this.$emit('submitTitle', title)
+    }
+  },
+}
+</script>
+
+
+<style lang="less" scoped>
+
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/view/Index.vue

@@ -0,0 +1,100 @@
+<template lang="pug">
+  .index
+    shop-swiper(:SwiperList="SwiperData")
+    yd-grids-group(:rows='3')
+      yd-grids-item(v-for="(item,index) in classInfo"
+                    :key="index"
+                    @click.native="enterClassInfo(item.title)")
+        img(slot="icon" :src="item.imgurl")
+        span(slot='text') {{ item.title }}
+
+    .banner_class
+      img(src='@/assets/img/banner_class.jpg')
+    yd-list(theme='2')
+      yd-list-item(v-for='item, key in HomeShopList', :key='key' :href=" '/info/' + item.id" type="link")
+        img(slot='img', :src='item.commodity_thumbnail')
+        span(slot='title') {{item.commodity_name}}
+        yd-list-other(slot='other')
+          div
+            div {{ item.commodity_content | sub }}...
+            span.demo-list-price
+              em ¥
+              | {{item.commodity_nowprice}}
+            span.demo-list-del-price ¥{{item.commodity_oldprice}}
+            
+
+</template>
+
+<script>
+import SwiperComponents from '../tpl/swiper';
+import { mapActions, mapGetters } from 'vuex'
+
+export default {
+  name: 'HelloWorld',
+  data () {
+    return {
+      classInfo: [
+        { title: '小米', imgurl: require('../../assets/img/mi.png') },
+        { title: '锤子', imgurl: require('../../assets/img/chuizi.png') },
+        { title: '华为', imgurl: require('../../assets/img/huawei.png') },
+        { title: '三星', imgurl: require('../../assets/img/sanxing.png') },
+        { title: '苹果', imgurl: require('../../assets/img/iphone.png') },
+        { title: '一加', imgurl: require('../../assets/img/yijia.png') }
+      ],
+      SwiperData: [
+        { href: '#', path: require('../../assets/img/banner_1.jpg') },
+        { href: '#', path: require('../../assets/img/banner_2.jpg') }
+      ]
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      // 通过 `vm` 访问组件实例
+      vm.changeHeaderStyle(1)
+      vm.changeContent(true)
+    })
+  },
+  created() {
+    if(this.HomeShopList.length == 0) {
+      this.getIndex()
+    }
+
+  },
+  methods: {
+    enterClassInfo(title) {
+      this.$router.push({ name: 'classinfo', query: { id: title } })
+    },
+    ...mapActions({
+      getIndex: 'getIndex',
+      changeHeader: 'SETACTION_CLOSEDHEADER',
+      changeFooter: 'SETACTION_CLOSEDFOOTER',
+      changeContent: 'SETACTION_CONTENT',
+      changeHeaderStyle: 'CHANGE_HADER'
+    })
+  },
+  computed: {
+    ...mapGetters([
+      'HomeShopList'
+    ])
+  },
+  components: {
+    'shop-swiper': SwiperComponents
+  },
+  filters: {
+    sub(val) {
+      val == null ? val = "" : val
+      return val.substring(0,30)
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="less" scoped>
+@import "../../assets/less/components/index.less";
+.yd-grids-3:before,
+.yd-grids-3 .yd-grids-item:not(:nth-child(3n)):before,
+.yd-grids-item:after {
+  content: none
+}
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/view/cart.vue

@@ -0,0 +1,199 @@
+<template lang="pug">
+  .cart
+    .shop-item
+      div(v-if="ListData.length != 0")
+        .items(v-for="(item,index) in ListData" :key="index")
+          .checkbox
+            input(type="checkbox" v-model="item.state" @click="SelectShop(item,index)")
+          .content-info
+            img(:src="item.commodity_thumbnail")
+            .item-right
+              h3 {{ item.commodity_name }}
+              p {{ item.commodity_content | SubContent }}
+              .price
+                span.now {{ item.commodity_nowprice }}
+                span.old {{ item.commodity_oldprice }}
+              .spinner
+                .reduce.calculation(@click="reduce(item)") -
+                input(class="totals" type="number" v-model="item.cart_nums")
+                .add.calculation(@click="add(item)") +
+      div.nodata(v-else)
+        yd-icon(name="shopcart-outline" size="40px")
+        p 空空如也，去
+         a(href="#/index") 首页
+         | 看看
+
+    //购物车价格合计  固定在底部
+    .Settlement
+      span
+        input(type="checkbox" v-model="isall" @click="allchioose")
+        |  全选
+      span.delshop(@click="DeleteShop") 删除
+      p 共计{{ TotalNums }}件 总计:
+        span ￥{{ TotalsMoney }}
+      yd-button(size='large', type='primary', shape='circle', @click.native="enterCart") 结算
+
+</template>
+
+<script>
+  import { mapGetters, mapActions } from 'vuex'
+export default {
+  data() {
+    return {
+      ListData: [],
+      NewsData: [],
+      deleteIndex: [],
+      isall: false,
+      userInfo: localStorage.getItem("status") != null ? (JSON.parse(this.$utils.uncompile(localStorage.getItem("status")))) : null
+    }
+  },
+  created() {
+    this.getCartList();
+    this.fetchData()
+    console.log(this.HomeShopList)
+  },
+  computed: {
+    ...mapGetters([
+      'HomeShopList'
+    ]),
+    TotalsMoney () {
+      let price = 0;
+      this.NewsData.forEach(item => {
+        price += item.cart_nums * item.commodity_nowprice
+      });
+      return price;
+    },
+    TotalNums () {
+      let cart_nums = 0;
+      this.NewsData.forEach(item => {
+        cart_nums += Number(item.cart_nums)
+      });
+      return cart_nums;
+    }
+  },
+  methods: {
+    ...mapActions({
+      setCartData: 'SETACTION_CARTDATA',
+      changeHeader: 'SETACTION_CLOSEDHEADER',
+      changeFooter: 'SETACTION_CLOSEDFOOTER',
+      changeContent: 'SETACTION_CONTENT',
+      changeHeaderStyle: 'CHANGE_HADER'
+    }),
+    enterCart() {
+      if(this.NewsData.length == 0) {
+        this.$dialog.toast({
+          mes: '请先选择需要购买的商品',
+          timeout: 1500,
+          icon: 'error'
+        });
+      }else {
+        this.setCartData(this.NewsData)
+        this.$router.push({ name: 'order' })
+      }
+
+    },
+    fetchData () {
+      this.changeContent(false)
+      this.changeHeader(false)
+      this.changeHeaderStyle(1)
+    },
+
+    async DeleteShop(){
+      await this.$http.deleteCartList({ cartdata : this.NewsData });
+      for (let len = this.ListData.length -1; len>= 0; len--) {
+        for (let j = 0; j < this.deleteIndex.length; j++) {
+          if (len == this.deleteIndex[j]) {
+            this.ListData.splice(len, 1)
+            this.deleteIndex.splice(j, 1)
+            continue;
+          }
+        }
+      }
+      this.NewsData = []
+    },
+
+    allchioose() {
+      this.isall = !this.isall;
+      this.NewsData = []
+      if(this.isall) {
+        this.NewsData = this.ListData
+        this.NewsData.forEach( (val,index) => {
+          val.state = true
+          this.deleteIndex.push(index)
+        })
+      } else {
+        this.ListData.forEach( val => val.state = false)
+      }
+
+    },
+    SelectShop (shop,index) {
+      shop.state = !shop.state;
+      if(shop.state) {
+        if(this.NewsData.indexOf(shop) > -1) {
+
+        }else {
+          this.NewsData.push(shop)
+          this.deleteIndex.push(index)
+          console.log("需要删除的元素：", this.deleteIndex)
+        }
+      } else {
+
+        this.NewsData.splice(this.NewsData.indexOf(shop),1)
+        this.deleteIndex.forEach((value,key) => value == index ? this.deleteIndex.splice(key,1) : '')
+        console.log("需要删除的元素 false：", this.deleteIndex)
+      }
+    },
+    async getCartList () {
+      let list = await this.$http.getCartList({
+        user_id: this.userInfo.id
+      });
+      if (list != undefined) {
+        list.forEach(val => val.state = false);
+        this.ListData = list;
+      } else {
+        this.ListData = []
+      }
+    },
+    reduce (cart) {
+      if(cart.cart_nums <= 1) {
+        cart.cart_nums = 1
+      } else {
+        cart.cart_nums--
+      }
+    },
+    add(cart) {
+      if(cart.commodity_stock == 0) {
+        alert('该删除已经卖完了')
+      } else {
+        if(cart.cart_nums > cart.commodity_stock) {
+          cart.cart_nums = cart.commodity_stock
+        } else {
+          cart.cart_nums++
+        }
+      }
+    }
+  },
+  filters: {
+    SubContent(value) {
+      return value.substring(0,21) + '...'
+    }
+  },
+
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      vm.changeContent(false)
+      vm.changeHeader(false)
+    })
+  },
+   beforeRouteLeave (to, from, next) {
+     this.changeContent(true)
+     this.changeHeader(true)
+    next()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "../../assets/less/components/cart.less";
+
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/view/classInfo.vue

@@ -0,0 +1,69 @@
+<template lang="pug">
+    .classInfo
+      yd-navbar(title='分类')
+        router-link(to='#', slot='left')
+          yd-navbar-back-icon(@click.native="goBack")
+
+      yd-list(theme='3')
+        yd-list-item(v-for='(item, key) in listData', :key='key'
+                    @click.native="enterInfo(item)")
+          img(slot='img', :src='item.commodity_thumbnail')
+          span(slot='title') {{item.commodity_name}}
+          yd-list-other(slot='other')
+            div
+              span.demo-list-price
+                em ¥
+                | {{item.commodity_nowprice}}
+              span.demo-list-del-price ¥{{item.commodity_oldprice}}
+              div {{ item.commodity_content.substring(0,10) }}
+</template>
+
+<script>
+  import { mapActions } from 'vuex'
+  export default {
+    data () {
+      return {
+        id: this.$route.query.id,
+        listData: []
+      }
+    },
+    created () {
+      this.getClassInfo()
+    },
+    methods: {
+       goBack(){
+        this.$router.back()
+      },
+      ...mapActions({
+        changeHeader: 'SETACTION_CLOSEDHEADER',
+        changeFooter: 'SETACTION_CLOSEDFOOTER',
+        changeContent: 'SETACTION_CONTENT',
+        setSwiperIndex: 'SETACTION_SWIPERINDEX'
+      }),
+      enterInfo(item) {
+        this.$router.push({ name: 'info', params: { id: item.id } })
+      },
+      async getClassInfo() {
+        let data = await this.$http.getClassInfo({ brand : this.id })
+        this.listData = data
+      }
+    },
+    beforeRouteEnter (to, from, next) {
+      next(vm => {
+        vm.changeHeader(false)
+        vm.changeFooter(false)
+        vm.changeContent(false)
+      })
+    },
+    beforeRouteLeave (to, from, next) {
+      this.changeHeader(true)
+      this.changeFooter(true)
+      this.changeContent(false)
+      next()
+    },
+  }
+</script>
+
+<style scoped lang="less">
+
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/view/info.vue

@@ -0,0 +1,127 @@
+<template lang="pug">
+  .info
+    shop-swiper(:SwiperList="SwiperList")
+    .info-content
+      .info-title
+        h2 {{ shopTitle }}
+      .info-jies {{ shopContent }}
+      .info-price
+        span
+         | ￥{{ shopNowPrice }}
+         em ￥{{ shopOldPrice }}
+
+    yd-lightbox(class="info-list")
+      yd-lightbox-img(v-for="(item, index) in ListImg" 
+          :src="item.url" :key="index")
+    .shop-action
+      .action-left
+        ul
+         li
+          yd-icon(size="23px" name="home-outline")
+          p 
+           a(href="#/index") 首页
+         li
+          yd-icon(size="23px" name='shopcart-outline')
+          p 
+           a(href="#/cart") 购物车
+         li
+          yd-icon(size="23px" name='star-outline')
+          p 
+           a 收藏   
+      .action-right
+        div(:class="isAddCart ? 'addcart' : 'noAddcart' " )(@click="isAddCart ? addCart(false) : '' ") {{ isAddCart ? "加入购物车" : "已添加"  }}
+        .byshop(@click="addCart(true)") 立即购买
+</template>
+
+<script>
+import Swiper from "../tpl/swiper"
+import { mapActions } from 'vuex'
+export default {
+  data() {
+    return {
+      shopTitle: null,
+      shopContent: null,
+      shopNowPrice: null,
+      shopOldPrice: null,
+      SwiperList: [],
+      ListImg: [],
+      isAddCart: true,
+      userInfo: localStorage.getItem("status") != null ? (JSON.parse(this.$utils.uncompile(localStorage.getItem("status")))) : null
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      // 通过 `vm` 访问组件实例
+      vm.changeHeaderStyle(2)
+      vm.changeContent(false)
+      vm.changeFooter(false)
+    })
+  },
+  beforeRouteLeave (to, from, next) {
+    this.changeFooter(true)
+    this.changeHeaderStyle(1)
+    this.changeContent(true)
+    next()
+  },
+  created() {
+    
+    this.getInfo()
+    this.QueryCart()
+  },
+  methods: {
+    ...mapActions({
+      changeHeader: 'SETACTION_CLOSEDHEADER',
+      changeFooter: 'SETACTION_CLOSEDFOOTER',
+      changeHeaderStyle: 'CHANGE_HADER',
+      changeContent: 'SETACTION_CONTENT'
+    }),
+    async QueryCart() {
+      let queryStatus = await this.$http.QueryCart({
+        user_id: this.userInfo.id,
+        commodity_id: this.$route.params.id
+      });
+      console.log(queryStatus)
+      if(queryStatus == "不可收藏") {
+        this.isAddCart = false;
+      }
+    },
+    async addCart (sta) {
+      
+      if(localStorage.getItem("status") != null) {
+        if(this.userInfo.hasOwnProperty("user_money")) {
+          let addStatus = await this.$http.addCart({
+            user_id: this.userInfo.id,
+            commodity_id: this.$route.params.id
+          });
+          this.isAddCart = false;
+          sta ? this.$router.push({ name: 'cart' }) : ''
+          console.log(addStatus)
+        } else {
+          console.log("提示第三方破解者不要做非法尝试") 
+        }
+      }else {
+        this.$router.push({ name: 'action', query: { from: `/info/${this.$route.params.id}` } })
+      }
+      //await this.$http.addCart() 
+    },
+    async getInfo () {
+     let data = (await this.$http.getInfo({ id: this.$route.params.id }))[0]
+     console.log(data)
+     this.shopTitle = data.commodity_name
+     this.shopContent = data.commodity_content
+     this.shopNowPrice = data.commodity_nowprice
+     this.shopOldPrice = data.commodity_oldprice
+     this.SwiperList = JSON.parse(data.commodity_main)
+     this.ListImg = JSON.parse(data.commodity_attachimg)
+    }
+  },
+  components: {
+    'shop-swiper': Swiper
+  }
+}
+</script>
+
+<style lang="less" scope>
+@import "../../assets/less/components/info.less";
+
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/view/my.vue

@@ -0,0 +1,134 @@
+<template lang="pug">
+  .mycenter
+    .header-top
+      .top-left
+         img(src="../../../static/img/useravater.png")
+         p {{ userInfo != null ? `${userInfo.user_nicname} ￥${userInfo.user_money}`  : '没有登录' }}
+    .myorder
+      .title
+        h2 我的订单
+        span(@click="enterPage(-1)")
+         | 查看全部订单
+         yd-navbar-next-icon.right-icon
+      ul.order-f
+        li(v-for="(item,index) in order" :key="index" @click="enterPage(item.status + 1)")
+          img(:src="item.imgURL")
+          p {{ item.title }}
+
+    .setting-list
+      yd-flexbox(@click.native="contact()")
+        div
+          yd-icon(name='phone1' size="20px" color="#8d8d8d")
+        yd-flexbox-item 联系我们
+        div
+          yd-navbar-next-icon
+      yd-flexbox
+        div
+          yd-icon(name='ucenter-outline' size="20px" color="#8d8d8d")
+        yd-flexbox-item 关于我们
+        div
+          yd-navbar-next-icon
+      yd-flexbox(@click.native="clearData")
+        div
+          yd-icon(name='delete' size="20px" color="#8d8d8d")
+        yd-flexbox-item 清空缓存
+        div
+          yd-navbar-next-icon
+      yd-flexbox(@click.native="updateApp")
+        div
+          yd-icon(name='download' size="20px" color="#8d8d8d")
+        yd-flexbox-item 监测升级
+        div
+          yd-navbar-next-icon
+      yd-flexbox
+        div
+          yd-icon(name='feedback' size="20px" color="#8d8d8d")
+        yd-flexbox-item 使用协议
+        div
+          yd-navbar-next-icon
+      yd-flexbox
+        div
+          yd-icon(name='good' size="20px" color="#8d8d8d")
+        yd-flexbox-item 意见反馈
+        div
+          yd-navbar-next-icon
+
+    yd-button-group
+     yd-button(size='large', type='danger', shape="circle", @click.native="logout") 退出登录
+</template>
+
+<script>
+  import { mapActions } from 'vuex'
+  export default {
+    data () {
+      return {
+        order: [
+          { title: '待付款', imgURL: require("../../../static/img/waitpay.png"), status: 0 },
+          { title: '已发货', imgURL: require("../../../static/img/waitfa.png"), status: 1 },
+          { title: '已完成', imgURL: require("../../../static/img/success.png"), status: 2 }
+        ],
+        userInfo: localStorage.getItem("status") != null ? (JSON.parse(this.$utils.uncompile(localStorage.getItem("status")))) : null
+      }
+    },
+    created () {
+    },
+    methods: {
+      clearData() {
+        this.$dialog.confirm({
+          title: '清空缓存',
+          mes: '清空缓存信息将丢失您的登录状态，确定清楚吗？',
+          opts: () => {
+            localStorage.clear();
+            this.$router.push({ name: 'index' })
+          }
+        });
+      },
+      contact() {
+        this.$dialog.confirm({
+          title: '联系我们',
+          mes: '亲，在使用过程中有任何问题都可以联系客服电话：15155145354！',
+          opts: () => {
+            location.href = "tel:15155145354"
+          }
+        });
+      },
+      updateApp() {
+        this.$dialog.toast({
+          mes: '当前已经是最新版！',
+          timeout: 1500
+        });
+      },
+      ...mapActions({
+        changeHeader: 'SETACTION_CLOSEDHEADER',
+        changeFooter: 'SETACTION_CLOSEDFOOTER',
+        changeContent: 'SETACTION_CONTENT',
+        setSwiperIndex: 'SETACTION_SWIPERINDEX'
+      }),
+      enterPage(status) {
+        this.setSwiperIndex(status)
+        this.$router.push({ name: 'orderStatus' })
+      },
+      // 退出登录
+      logout() {
+        localStorage.removeItem("status")
+        this.$router.push({ name: 'index' })
+      }
+    },
+    beforeRouteEnter (to, from, next) {
+      next(vm => {
+        // 通过 `vm` 访问组件实例
+        vm.changeContent(false)
+        vm.changeHeader(false)
+      })
+    },
+    beforeRouteLeave (to, from, next) {
+      this.changeContent(true)
+      this.changeHeader(true)
+      next()
+    },
+  }
+</script>
+
+<style lang="less" scoped>
+@import "../../assets/less/components/my.less";
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/view/order.vue

@@ -0,0 +1,196 @@
+<template lang="pug">
+   .order
+     .wxpay(v-if="hiddenProp")
+       .wxpay-pas
+         .top-one
+           img(@click="closedProp" class="closed" src="../../../static/img/xx_03.jpg")
+           .pas-user
+             img(src="../../../static/img/jftc_03.jpg")
+             span 请输入支付密码
+         .price
+           p 创想网络科技有限公司
+           span ￥ 1199
+         .cart-list
+           img(class="fl" src="../../../static/img/ye.png")
+           span.fl 余额
+           img(class="fr" src="../../../static/img/jftc_09.jpg")
+         ul.mm_box
+           li(v-for="(item,index) in pas" :key="index" :class=" item ? 'on': '' ")
+       .wxpay-key
+         .xiaq_tb
+           img(src="../../../static/img/jftc_14.jpg" @click="hiddenKey")
+
+         ul.nub_ggg
+           li(v-for="(item,index) in keyList"
+              :key="index"
+              :class="index == 9 ? 'nul' :  index == 11 ? 'del' : '' "
+              @click="index == 11 ? deletePas() : index == 9 ? '' : addPas() " ) {{ item.title }}
+
+
+     .address
+       yd-icon(class="location" name='location' size="40px")
+       .address-info
+         h3
+          | 刘兵
+          span 15155145354
+         p 安徽省合肥市蜀山区少时诵诗书所安徽省合肥市蜀山区少时诵
+       yd-navbar-next-icon.moreinfo
+
+     .order-list
+       yd-list(theme='4')
+         yd-list-item(v-for='(item, key) in CartData', :key='key')
+           img(slot='img', :src='item.commodity_thumbnail')
+           span(slot='title') {{ item.commodity_name }}
+           yd-list-other(slot='other')
+             div
+               p {{ item.commodity_content | SubContent }}
+               span.demo-list-price ¥{{ item.commodity_nowprice }}
+               span.demo-list-del-price ¥{{ item.commodity_oldprice }}
+               p.nums x{{ item.cart_nums }}
+
+     .Settlement
+       p 共计 {{ TotalNums }} 件 总计:
+         span ￥ {{ TotalMoney }}
+       yd-button(size='large', type='primary', shape='circle' @click.native="submitOrder") 结算
+
+</template>
+
+<script>
+  import { mapActions, mapGetters } from 'vuex'
+  export default {
+    created() {
+      console.log(this.CartData)
+    },
+    data() {
+      return {
+        index: 0,
+        pas: [false,false,false,false,false,false],
+        keyList: [
+          { title: 1 },{ title: 2 },{ title: 3 },{ title: 4 },
+          { title: 5 },{ title: 6 },{ title: 7 },{ title: 8 },
+          { title: 9 },{ title: '' },{ title: 0 },{ title: '' }
+        ],
+        OrderList: [],
+        hiddenProp: false,
+        userInfo: localStorage.getItem("status") != null ? (JSON.parse(this.$utils.uncompile(localStorage.getItem("status")))) : null
+      }
+    },
+    methods: {
+      hiddenKey () {
+        this.hiddenProp = !this.hiddenProp
+      },
+      closedProp() {
+        this.hiddenProp = !this.hiddenProp
+      },
+      addPas() {
+        this.index++;
+        if (this.index <6) {
+          this.pas[this.index - 1] = true;
+          this.$forceUpdate();
+        } else {
+          this.pas[this.index - 1] = true;
+          this.$forceUpdate();
+
+          setTimeout(async () => {
+            console.log("密码输入完成提交订单")
+            this.OrderList.forEach(val => {
+              val.orderStatus = 1
+            });
+
+            try {
+              await this.$http.addOrder({ orderdata : this.OrderList });
+              this.$dialog.toast({
+                mes: '购买成功',
+                timeout: 1500,
+                icon: 'success',
+                callback: async () => {
+                  await this.$http.deleteCartList({ cartdata : this.CartData });
+                  this.setCartData([]);
+                  this.$router.push({ name: 'orderStatus' })
+                }
+              });
+            } catch (e) {
+              this.$dialog.toast({
+                mes: `购买失败: ${e.message}`,
+                timeout: 1500,
+                icon: 'error'
+              });
+            }
+
+          }, 500);
+        }
+      },
+      deletePas() {
+        if (this.index > 0) {
+          this.index--;
+          this.pas[this.index] = false;
+          this.$forceUpdate();
+        }
+      },
+      submitOrder() {
+        this.CartData.forEach(val => {
+          this.OrderList.push({
+            userId: this.userInfo.id,
+            shopId: val.id,
+            orderNumber: Date.parse(new Date()),
+            orderStatus: 0,
+            orderTotal: val.cart_nums * val.commodity_nowprice,
+            orderSize: val.cart_nums,
+          });
+
+        });
+        this.hiddenProp = !this.hiddenProp;
+      },
+      ...mapActions({
+        setCartData: 'SETACTION_CARTDATA',
+        changeHeader: 'SETACTION_CLOSEDHEADER',
+        changeFooter: 'SETACTION_CLOSEDFOOTER',
+        changeContent: 'SETACTION_CONTENT',
+        changeHeaderStyle: 'CHANGE_HADER'
+      })
+    },
+    filters: {
+      SubContent(value) {
+        return value.substring(0,21) + '...'
+      }
+    },
+    computed: {
+      ...mapGetters([
+        'CartData'
+      ]),
+      TotalMoney() {
+        let price = 0;
+        this.CartData.forEach(item => {
+          price += item.cart_nums * item.commodity_nowprice
+        });
+        return price;
+      },
+      TotalNums () {
+        let cart_nums = 0;
+        this.CartData.forEach(item => {
+          cart_nums += Number(item.cart_nums)
+        });
+        return cart_nums;
+      }
+    },
+    beforeRouteEnter (to, from, next) {
+      next(vm => {
+        vm.changeHeaderStyle(3)
+        vm.changeContent(true)
+        vm.changeFooter(false)
+        vm.changeHeader(false)
+      })
+    },
+    beforeRouteLeave (to, from, next) {
+      this.changeHeader(false)
+      this.changeContent(false)
+      this.changeFooter(true)
+
+      next()
+    }
+  }
+</script>
+
+<style scoped lang="less">
+@import "../../assets/less/components/order.less";
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/view/orderStatus.vue

@@ -0,0 +1,132 @@
+<template lang="pug">
+    .orderStatus
+      yd-navbar(title='订单状态' fixed)
+        router-link(to='', slot='left')
+          yd-navbar-back-icon(@click.native="goBack")
+      .tabs
+        a(v-for="(item,index) in TabsA"
+          :key="index"
+          @click="clickChange(index)"
+          :class="index == 0 ? 'active' : '' ") {{ item.title }}
+      #tabs-container.swiper-container
+        .swiper-wrapper
+          .swiper-slide
+            ul.news-list
+              order-item(:listdata="allData" :showButton="false")
+          .swiper-slide
+            ul.news-list
+              order-item(:listdata="waitPay" :showButton="false")
+          .swiper-slide
+            ul.news-list
+              order-item(:listdata="waitDeliverGoods" :showButton="true")
+          .swiper-slide
+            ul.news-list
+              order-item(:listdata="successData" :showButton="false")
+
+
+</template>
+
+<script>
+  import { mapActions, mapGetters } from 'vuex'
+  import OrderItem from './../tpl/orderItem'
+    export default {
+      data() {
+        return {
+          TabsA: [
+            { title: '全部' },
+            { title: '待付款' },
+            { title: '已发货' },
+            { title: '完成' }
+          ],
+          tabsSwiper: null,
+          allData: [],
+          waitPay: [],
+          waitDeliverGoods: [],
+          successData: [],
+          userInfo: localStorage.getItem("status") != null ? (JSON.parse(this.$utils.uncompile(localStorage.getItem("status")))) : null
+        }
+      },
+      created(){
+        this.getOrderStatus(this.swiperIndex)
+      },
+      mounted() {
+       this.initSwiper()
+       this.clickChange(this.swiperIndex == -1 ? 0 : this.swiperIndex)
+      },
+      computed: {
+        ...mapGetters({
+          swiperIndex: 'swiperIndex',
+        })
+      },
+      components: {
+        'order-item': OrderItem
+      },
+      beforeRouteEnter (to, from, next) {
+        next(vm => {
+          vm.changeContent(true)
+          vm.changeFooter(false)
+          vm.changeHeader(false)
+        })
+      },
+      beforeRouteLeave (to, from, next) {
+        this.changeHeader(false)
+        this.changeContent(false)
+        this.changeFooter(true)
+        next()
+      },
+      methods: {
+        goBack(){
+          this.$router.back()
+        },
+        ...mapActions({
+          changeHeader: 'SETACTION_CLOSEDHEADER',
+          changeFooter: 'SETACTION_CLOSEDFOOTER',
+          changeContent: 'SETACTION_CONTENT',
+          changeHeaderStyle: 'CHANGE_HADER'
+        }),
+        initSwiper() {
+          let _this = this;
+          this.tabsSwiper = new Swiper('#tabs-container', {
+            speed: 500,
+            on: {
+              slideChangeTransitionEnd: function() {
+                _this.getOrderStatus(this.activeIndex - 1)
+                document.querySelector(".tabs .active").className = "";
+                document.querySelectorAll(".tabs a")[this.activeIndex].className = 'active'
+              }
+            }
+          })
+        },
+        clickChange(index) {
+          document.querySelector(".tabs .active").className = "";
+          document.querySelectorAll(".tabs a")[index].className = "active"
+          this.tabsSwiper.slideTo(index)
+        },
+        async getOrderStatus(status) {
+          let order = await this.$http.selectOrder({
+            userid: this.userInfo.id,
+            status: status,
+          });
+          order == undefined ? order = [] : '';
+          switch (status) {
+            case -1:
+              this.allData = order;
+              break;
+            case 0:
+              this.waitPay = order;
+              break;
+            case 1:
+              this.waitDeliverGoods = order;
+              break;
+            case 2:
+              this.successData = order;
+              break;
+          }
+        }
+      }
+    }
+</script>
+
+<style scoped lang="less">
+
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/view/search.vue

@@ -0,0 +1,77 @@
+<template lang="pug">
+    .search
+      yd-search(:result='result', fullpage='', v-model='value2', :item-click='itemClickHandler', :on-submit='submitHandler')
+      yd-list(theme='3')
+        yd-list-item(v-for='(item, key) in datas', :key='key'
+        @click.native="enterInfo(item)")
+          img(slot='img', :src='item.commodity_thumbnail')
+          span(slot='title') {{item.commodity_name}}
+          yd-list-other(slot='other')
+            div
+              span.demo-list-price
+                em ¥
+                | {{item.commodity_nowprice}}
+              span.demo-list-del-price ¥{{item.commodity_oldprice}}
+              div {{ item.commodity_content.substring(0,10) }}
+</template>
+
+<script>
+  import { mapActions } from 'vuex'
+  export default {
+    data() {
+      return {
+        value2: '',
+        result: [],
+        datas: []
+      }
+    },
+    methods: {
+      ...mapActions({
+        changeHeader: 'SETACTION_CLOSEDHEADER',
+        changeFooter: 'SETACTION_CLOSEDFOOTER',
+        changeContent: 'SETACTION_CONTENT',
+        setSwiperIndex: 'SETACTION_SWIPERINDEX'
+      }),
+      getResult(val) {
+        if (!val) return [];
+        return [
+          '小米','华为','锤子','一加','三星','苹果'
+        ].filter(value => new RegExp(val, 'i').test(value));
+      },
+      async itemClickHandler(item) {
+        this.datas = await this.getSearchKeyword(item)
+      },
+      async submitHandler(value) {
+        this.datas = await this.getSearchKeyword(value)
+      },
+      async getSearchKeyword(key) {
+        return await this.$http.getSearch({ keyword : key })
+      },
+      enterInfo(item) {
+        this.$router.push({ name: 'info', params: { id: item.id } })
+      },
+    },
+    beforeRouteEnter (to, from, next) {
+      next(vm => {
+        vm.changeContent(false)
+        vm.changeHeader(false)
+        vm.changeFooter(false)
+      })
+    },
+    beforeRouteLeave (to, from, next) {
+      this.changeContent(true)
+      this.changeFooter(true)
+      this.changeHeader(true)
+      next()
+    },
+    watch: {
+      value2(val) {
+        this.result = this.getResult(val);
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/view/user.vue

@@ -0,0 +1,140 @@
+<template lang="pug">
+  .user-action
+    .action-top
+        yd-icon(size="40px" name="ucenter-outline")
+        p {{ showPage ? '用户登录' : '用户注册' }}
+    .action-login(v-if="showPage")
+      .action-list
+        yd-cell-item
+          span(slot='left') 手机号：
+          yd-input(slot='right', ref="username" , required='', regex='mobile' , v-model='UserLogin.username', max='20', placeholder='请输入手机号')
+        yd-cell-item
+          span(slot='left') 密&#8195码：
+          yd-input(slot='right', ref="password" , type='password',max="20", min="6", v-model='UserLogin.password', placeholder='请输入登录密码')
+        yd-button(size='large', type='primary', shape='circle' @click.native="submitUserLogin") 登&#8195录
+    .action-reg(v-else)
+        yd-cell-item
+            span(slot='left') 手机号：
+            yd-input(slot='right', required='',ref="username" , v-model='UserReg.username', max='20', regex='mobile', placeholder='输入手机号')
+        yd-cell-item
+            span(slot='left') 密&#8195码：
+            yd-input(slot='right', type='password', min="6" , mac="20",ref="password" , v-model='UserReg.password', placeholder='输入密码')
+        yd-cell-item
+            span(slot='left') 再次输入：
+            yd-input(slot='right', type='password', min="6" , mac="20",ref="Twopassword" , v-model='UserReg.Twopassword', placeholder='再次输入密码')
+        yd-cell-item
+            span(slot='left') 昵称：
+            yd-input(slot='right',ref="usernicname" , v-model='UserReg.usernicname', required='', min="2" , mac="10", placeholder='请输入昵称')
+        yd-button(size='large', type='primary', shape='circle' @click.native="submitUserReg") 注&#8195册
+    .tips
+      span(@click="changePage") {{ showPage ? '注册' : '登录' }}
+      router-link(to="/index") 首页
+</template>
+
+<script>
+  import { mapActions } from 'vuex'
+export default {
+  data() {
+    return {
+      showPage: true,
+      UserLogin: {
+       username: null,
+       password: null
+      },
+      UserReg: {
+        username: null,
+        password: null,
+        usernicname: null,
+        Twopassword: null,
+      }
+    }
+  },
+  methods: {
+    ...mapActions({
+      changeHeader: 'SETACTION_CLOSEDHEADER',
+      changeFooter: 'SETACTION_CLOSEDFOOTER',
+      changeContent: 'SETACTION_CONTENT'
+    }),
+    async submitUserLogin() {
+      if(this.$refs.username.valid && this.$refs.password.valid) {
+        try {
+          let data = (await this.$http.userLogin(this.UserLogin))[0];
+          localStorage.setItem('status', this.$utils.compile(data))
+          this.$router.push({ path: this.$route.query.from })
+        } catch (error) {
+          
+        }
+      } else {
+        this.$dialog.toast({
+            mes: '账户名或密码有误',
+            timeout: 1500
+        });
+      }
+    },
+    async submitUserReg() {
+      if(this.$refs.username.valid && 
+         this.$refs.password.valid && 
+         this.$refs.usernicname.valid && 
+         this.$refs.Twopassword.valid) {
+           if(this.UserReg.password == this.UserReg.Twopassword) {
+            delete this.UserReg.Twopassword
+            let status = await this.$http.userReg(this.UserReg);
+             this.$dialog.confirm({
+                title: '提示',
+                mes: '账户注册成功，请登录',
+                opts:[
+                  {
+                    txt: '取消',
+                    color: false,
+                    callback: () => {
+                      this.changePage()
+                    }
+                  },
+                  {
+                    txt: '确定',
+                    color: true,
+                    callback: () => {
+                      this.changePage()
+                    }
+                  }
+                ]
+              });
+            
+           } else {
+             this.$dialog.toast({
+                mes: '两次密码不一致',
+                timeout: 1500
+             });
+           }
+        
+      } else {
+        this.$dialog.toast({
+            mes: '您填写的信息不正确请检查',
+            timeout: 1500
+        });
+      }
+    },
+    changePage () {
+      this.showPage = !this.showPage
+    }
+  },
+   beforeRouteEnter (to, from, next) {
+    next(vm => {
+      // 通过 `vm` 访问组件实例
+      vm.changeFooter(false)
+      vm.changeHeader(false)
+      vm.changeContent(false)
+    })
+  },
+   beforeRouteLeave (to, from, next) {
+     this.changeFooter(true)
+     this.changeHeader(true)
+     this.changeContent(true)
+    next()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "../../assets/less/components/action.less";
+</style>