page

===Home====
<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
    <swiper :imgList="imgList"></swiper>
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="#">
          <!-- <img src="../assets/images/menu1.png" alt=""> -->
          <span class="mui-icon mui-icon-home"></span>
          <div class="mui-media-body">新闻资讯</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/category">
          <span class="mui-icon mui-icon-email">
          <span class="mui-badge">5</span></span>
          <div class="mui-media-body">图片分享</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/category">
          <span class="mui-icon mui-icon-chatbubble"></span>
          <div class="mui-media-body">商品购买</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/category">
          <span class="mui-icon mui-icon-location"></span>
          <div class="mui-media-body">留言反馈</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/category">
          <span class="mui-icon mui-icon-search"></span>
          <div class="mui-media-body">视频专区</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/category">
          <span class="mui-icon mui-icon-phone"></span>
          <div class="mui-media-body">联系我们</div>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
import swiper from '../components/swiper.vue'
export default {
  data () {
    return {
      imgList: [
        { id: 1, img: '/1.jpg' },
        { id: 2, img: '/2.jpg' }
      ]
    }
  },
  name: 'Home',
  components: {
    swiper
  }
  // },
  // created() {
  //   this.getImageList()
  // },
  // methods: {
  //   getImageList() {
  //     // 相当于是loading加载的效果
  //     // this.$indicator.open({ text: '加载中.....' })
  //     this.$http.get('imgList').then(res => {
  //       console.log(res)
  //       // 在请求得到结果之后,关闭loading效果
  //       // this.$indicator.close()
  //       if (res.data.code === 0) {
  //         this.$toast('加载轮播图数据失败')
  //       } else {
  //         this.imgList = res.data.data
  //       }
  //     })
  //   }
  // }
}
</script>
<style scoped lang="scss">
  .mui-grid-view.mui-grid-9 {
    background-color: #ffffff;
    border: none;
    img {
      width: 60px;
      height: 60px;
    }
  }
  .mui-grid-view.mui-grid-9 .mui-table-view-cell {
    border: 0;
  }
  .mui-media-body {
    font-size: 14px;
  }
</style>

===Category====
<template>
  <div>
    <div class="menu">
      <div class="menu-left">
        <ul>
          <li
            class="menu-item" v-for="(item,index) in menus"
            :key="index" @click="clickList(index)"
            :class='{current:index === currentIndex}'
          >
            <p class="text">{{item.name}}</p>
          </li>
        </ul>
      </div>
      <div class="menu-right" ref="itemList">
        <ul>
          <li class="cate" v-for="(menu,index1) in menus" :key="index1">
            <h4 class="cate-title">{{menu.name}}</h4>
            <ul class="cate-item">
              <li v-for="(item,index2) in menu.sub" :key="index2">
                <router-link :to="'/goodslist/' + item.id" class="cate-item-wrapper">
                  <div class="cate-item-img">
                    <img :src="item.image" alt="">
                  </div>
                  <span>{{item.name}}</span>
                </router-link>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
  data () {
    return {
      menus: [],
      // 记录用户点中的那一个一级分类的索引
      currentIndex: 0,
      rightLiTops: []
    }
  },
  created () {
    this.getMenu()
  },
  mounted () {},
  methods: {
    getMenu() {
      // this.$indicator.open({
      //   text: '加载中'
      // })
      // 发送请求,获取分类信息
      // this.$http.get('category').then(res => {
      //   // this.$indicator.colse()
      //   this.menus = res.data.data
      // })
      var data = []
      data[0] = { id: 1, name: '手机数码', pid: 0, image: '', sub: [{ id: 2, name: '小米', pid: 1, image: '../assets/images/xiaomi.png' }, { id: 3, name: '华为', pid: 1, image: '../assets/images/huawei.jpg' }, { id: 4, name: 'OPPO', pid: 1, image: '../assets/images/oppo.png' }] }
      data[1] = { id: 10, name: '家用电器', pid: 0, image: '', sub: [{ id: 11, name: '电水壶', pid: 1, image: '' }, { id: 12, name: '电压力锅', pid: 1, image: '' }, { id: 13, name: '电饭煲', pid: 1, image: '' }] }
      data[2] = { id: 19, name: '电脑办公', pid: 0, image: '', sub: [{ id: 20, name: '轻薄本', pid: 1, image: '' }, { id: 21, name: '游戏本', pid: 1, image: '' }, { id: 22, name: '机械键盘', pid: 1, image: '' }] }
      data[3] = { id: 29, name: '汽车用品', pid: 0, image: '', sub: [{ id: 30, name: '机油', pid: 1, image: '' }, { id: 31, name: '汽车坐垫', pid: 1, image: '' }, { id: 32, name: '汽车水枪', pid: 1, image: '' }] }
      data[4] = { id: 39, name: '男装', pid: 0, image: '', sub: [{ id: 40, name: '夹克', pid: 1, image: '' }, { id: 41, name: 'T恤', pid: 1, image: '' }, { id: 42, name: '针织衫', pid: 1, image: '' }] }
      data[5] = { id: 49, name: '女装', pid: 0, image: '', sub: [{ id: 50, name: '上衣', pid: 1, image: '' }, { id: 51, name: '牛仔裤', pid: 1, image: '' }, { id: 52, name: '裙子', pid: 1, image: '' }] }
      data[6] = { id: 59, name: '钟表珠宝', pid: 0, image: '', sub: [{ id: 60, name: '戒指', pid: 1, image: '' }, { id: 61, name: '手表', pid: 1, image: '' }, { id: 62, name: '钻石', pid: 1, image: '' }] }
      var res = { code: 1, msg: '', data }
      this.menus = res.data
    },
    clickList(index) {
      this.currentIndex = index
      // 根据索引,去定位右侧盒子的定位值
      var y = -this.rightLiTops[index]
      this.rightBScroll.scrollTo(0, y)
    },
    _initBScroll() {
      this.leftBScroll = new BScroll('.menu-left', {
        click: true,
        mouseWheel: true
      })
      this.rightBScroll = new BScroll('.menu-right', {
        click: true,
        mouseWheel: true
      })
    },
    _initRightHeight() {
      var itemArray = []
      var top = 0
      // 将我们第一个二级分类的定位值加入到itemArray数组
      itemArray.push(top)
      // 获取所有的二级分类的盒子
      // const allList = this.$refs.itemList.getElementByClassName('cate')
      const allList = document.getElementsByClassName('cate')
      for (var i = 0; i < allList.length; i++) {
        top += allList[i].clientHeight
        itemArray.push(top)
      }
      // console.log(itemArray)
      this.rightLiTops = itemArray
    }
  },
  watch: {
    menus() {
      // this.$nextTick()函数会在页面渲染完成之后进行调用
      this.$nextTick(() => {
        this._initBScroll()
        this._initRightHeight()
      })
    }
  }
}
</script>
<style scoped lang="scss">
// 清除内边距,外边距
ul {
  margin: 0;
  padding: 0;
}
// 清除.样式
li {
  list-style: none;
}
.menu {
  display: flex;
  position: absolute;
  text-align: center;
  top: 40px;
  bottom: 50px;
  width: 100%;
  overflow: hidden;
  .menu-left{
    flex: 0 0 80px;
    width: 80px;
    background: #f3f5f7;
    .menu-item{
      height: 54px;
      width: 100%;
      .text{
        width: 100%;
        line-height: 54px;
        margin-bottom: 0;
      }
    }
    .current {
      width: 100%;
      background: #fff;
      .text {
        color: red;
      }
    }
  }
  .menu-right {
    flex: 1;
    background: #fff;
    .cate{
      height: 100%;
      .cate-title{
        margin: 0;
        text-align: left;
        font-size: 14px;
        color: #333;
        font-weight: bold;
        padding: 10px;
      }
      .cate-item {
        padding: 7px 10px 10px;
        display: flex;
        overflow: hidden;
        flex-flow: row wrap;
        li {
          width: 33.3%;
          .cate-item-wrapper {
            .cate-item-img {
              width: 100%;
              img {
                width: 70px;
                height: 70px;
              }
            }
            span {
              display: inline-block;
              font-size: 14px;
              color: #333;
            }
          }
        }
      }
    }
  }
}
</style>


===User===
<template>
  <div v-if="$store.getters['user/isLogin']">
    <div class="member">
      <div class="header-con">
        <router-link to="/user/login" class="mui-navigate-right">
          <div class="user-info">
            <div class="avatar-con">
              <div class="avatar">
                <img src="../assets/logo.png" class="image-info" />
              </div>
            </div>
            <div class="person-con">
              <span>{{$store.state.user.username}}</span>
            </div>
          </div>
        </router-link>
      </div>
    </div>
    <ul class="mui-table-view">
      <li class="mui-table-view-cell mui-media">
        <div class="mui-navigate-right">
          <img class="mui-media-object mui-pull-left" src="../assets/images/logo.png" />
          <div class="mui-media-body">
            我的订单
          </div>
        </div>
      </li>
      <li class="mui-table-view-cell mui-media">
        <div class="mui-navigate-right">
          <img class="mui-media-object mui-pull-left" src="../assets/images/logo.png" />
          <div class="mui-media-body">
            收货地址
          </div>
        </div>
      </li>
      <li class="mui-table-view-cell mui-media">
        <div class="mui-navigate-right" @click="logout">
          <img class="mui-media-object mui-pull-left" src="../assets/images/logo.png" />
          <div class="mui-media-body">
            退出登录
          </div>
        </div>
      </li>
    </ul>
  </div>
  <div class="member" v-else>
    <div class="header-con">
      <router-link to="/user/login" class="mui-navigate-right">
        <div class="user-info">
          <div class="avater-con">
            <div class="avatar">
              <img src="../assets/logo.png" class="image-info" />
            </div>
          </div>
          <div class="person-con">
            <span>登录 / 注册</span>
          </div>
        </div>
      </router-link>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  created() {},
  mounted() {},
  methods: {
    logout() {
      // 1.发送请求完成退出登录,有后台的话,这句话不应该注释
      // this.$http.get('logout')
      // 2.将localStorage里面的Authorization干掉
      this.$auth.setAuthorization('')
      // 3.将Vuex中的用户信息删除
      this.$store.commit('user/logout')
      // 4.提示用户登录成功
      this.$toast('退出登录成功')
    }
  }
}
</script>
<style scoped lang="scss">
.mui-table-view .mui-media,.mui-table-view .mui-media-body{
  line-height: 42px;
  text-align: center;
}
.mui-table-view-cell:after{
  left: 0px;
}
</style>

====Shopcart====
<template>
  <div>这里是购物车页面</div>
</template>
<script>
export default {
  data () {
    return {}
  },
  created () {},
  mounted () {},
  methods: {}
}
</script>
<style scoped lang="scss">
</style>

====Login====
<template>
  <div>
    <div class="login">
      <div class="mui-content">
        <form action class="mui-input-group">
          <div class="mui-input-row">
            <label>账号</label>
            <input
              v-model="loginForm.username"
              type="text"
              class="mui-input-clear mui-input"
              placeholder="请输入账号"
            />
          </div>
          <div class="mui-input-row">
            <label>密码</label>
            <input
              v-model="loginForm.password"
              type="password"
              class="mui-input-clear mui-input"
              placeholder="请输入密码"
            />
          </div>
        </form>
        <div class="mui-content-padded">
          <button
            @click="login"
            type="button"
            class="mui-btn mui-btn-block mui-btn-primary btnAdd"
          >登录</button>
          <div class="link-area">
            <a @click="register">还没有账号?前往注册</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    login() {
      // 登录操作
      // 1.判断用户名和密码是否输入
      if (this.loginForm.username === '' || this.loginForm.password === '') {
        this.$toast('请输入用户名和密码')
      } else {
        // // 2.发送请求进行登录
        // // 如果有后台,应该显示这段代码,因暂时没有后台,我造了一些数据,等后台弄好的时候,显示此代码
        // this.$http
        //   .post('/login', this.loginForm)
        //   .then((res) => {
        //     console.log(res)
        //     if (res.data.code === 0) {
        //       this.$toast(res.data.msg)
        //     } else {
        //       // 3.登录成功
        //       this.$toast(res.data.msg)
        //       // 3.1 登录成功之后,需要将用户信息保存到vuex中
        //       this.$store.commit('user/setUser', res.data.data)
        //       // 3.2 登录成功之后,需要将用户登录的session_id保存到localStorage中
        //       this.$auth.setAuthorization(res.data.data.session_id)
        //       // 3.3 登录成功之后,需要跳转到我的页面
        //       this.$router.push('/user')
        //     }
        //   })
        //   .catch(() => {
        //     this.$toast('登录失败')
        //   })
        this.$toast('登录成功')
        var user = { session_id: 'czb.2020', id: 1, username: 'test' }
        this.$store.commit('user/setUser', user)
        this.$auth.setAuthorization('xxzx.2020')
        this.$router.push('/user')
      }
    },
    register() {
      // 当用户点击前往注册,就跳转到注册页面
      this.$router.push('/user/register')
    }
  }
}
</script>
<style scoped lang="scss">
.login {
  margin-top: 60px;
}
.mui-input-group {
  margin-top: 10px;
  background-color: transparent;
}
.mui-input-group label {
  width: 22%;
}
.mui-input-row:last-child {
  background: white;
}
.mui-input-row {
  margin-top: 20px;
  background: white;
}
.mui-input-row label ~ input,
.mui-input-row label ~ select,
.mui-input-row label ~ textarea {
  width: 78%;
}
.link-area {
  display: block;
  margin-top: 25px;
  text-align: center;
}
.mui-content-padded {
  margin-top: 30px;
  .btnAdd {
    display: block;
    width: 100%;
    background-color: #007aff;
    color: white;
    font-size: 18px;
    padding: 15px 0;
  }
}
</style>

===Register===
<template>
  <div class="login">
      <div class="mui-content">
        <form action class="mui-input-group">
          <div class="mui-input-row">
            <label>账号</label>
            <input
              v-model="regForm.username"
              type="text"
              class="mui-input-clear mui-input"
              placeholder="请输入账号"
            />
          </div>
          <div class="mui-input-row">
            <label>密码</label>
            <input
              v-model="regForm.password"
              type="password"
              class="mui-input-clear mui-input"
              placeholder="请输入密码"
            />
          </div>
          <div class="mui-input-row">
            <label>确认</label>
            <input
              v-model="regForm.rePassword"
              type="password"
              class="mui-input-clear mui-input"
              placeholder="请输入密码"
            />
          </div>
          <div class="mui-input-row">
            <label>邮箱</label>
            <input
              v-model="regForm.email"
              type="text"
              class="mui-input-clear mui-input"
              placeholder="请输入邮箱"
            />
          </div>
        </form>
        <div class="mui-content-padded">
          <button
            @click="reg"
            type="button"
            class="mui-btn mui-btn-block mui-btn-primary btnAdd"
          >注册</button>
          <div class="link-area">
            <p>注册成功后的用户可用于登录</p>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      regForm: {
        username: '',
        password: '',
        rePassword: '',
        email: ''
      }
    }
  },
  methods: {
    reg() {
      // 1.判断用户是否已经输入账号,密码,重复密码,邮箱
      if (this.regForm.username === '') {
        this.$toast('账号不能为空')
        return
      }
      if (this.regForm.password === '') {
        this.$toast('密码不能为空')
        return
      }
      if (this.regForm.rePassword === '') {
        this.$toast('确认密码不能为空')
        return
      }
      if (this.regForm.email === '') {
        this.$toast('邮箱不能为空')
        return
      }
      // 2.用户两次输入的密码是否一致
      if (this.regForm.password !== this.regForm.rePassword) {
        this.$toast('两次密码不一致')
        return
      }
      // 3.发送请求给后台接口完成注册操作
      // this.$http.post('register', this.regForm).then(res => {
      //   if (res.data.code === 0) {
      //     this.$toast(res.data.msg)
      //   } else {
      //     // 注册成功,立即登录
      //     // 3.1 将注册的用户信息保存到Vuex
      //     this.$store.commit('user/setUser', res.data.data)
      //     // 3.2 将注册的用户的session_id保存到localStorge
      //     this.$auth.setAuthorization(res.data.data.session_id)
      //     // 3.3 弹窗提示注册成功
      //     this.$toast('注册成功')
      //     // 3.4 完成注册之后跳转到我的页面(/user)
      //     this.$router.push('/user')
      //   }
      // }).catch(() => {
      //   this.$toast('注册失败')
      // })
      var user = { session_id: 'czb.2020', id: 1, username: this.regForm.username }
      this.$store.commit('user/setUser', user)
      this.$auth.setAuthorization('czb.2021')
      this.$toast('注册成功')
      this.$router.push('/user')
    }
  }
}
</script>
<style scoped lang="scss">
.login {
  margin-top: 60px;
}
.mui-input-group {
  margin-top: 10px;
  background-color: transparent;
}
.mui-input-group label {
  width: 22%;
}
.mui-input-row:last-child {
  background: white;
}
.mui-input-row {
  margin-top: 20px;
  background: white;
}
.mui-input-row label ~ input,
.mui-input-row label ~ select,
.mui-input-row label ~ textarea {
  width: 78%;
}
.link-area {
  display: block;
  margin-top: 25px;
  text-align: center;
}
.mui-content-padded {
  margin-top: 30px;
  .btnAdd {
    display: block;
    width: 100%;
    background-color: #007aff;
    color: white;
    font-size: 18px;
    padding: 15px 0;
  }
}
</style>

===pages/goods/GoodsInfo===
<template>
  <div class="goods-info">
    <!-- 轮播图区域 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <swiper :imgList="goodsinfo.album"></swiper>
        </div>
      </div>
    </div>
    <!-- 商品购买区域 -->
    <div class="mui-card">
      <div class="mui-card-header">{{goodsinfo.name}}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="price">
            定价: <span>￥{{goodsinfo.price}}</span>
          </p>
          <div v-if="goodsinfo.num !== 0">
            <!-- 加减数量的控件 -->
            <p class="go-number">
              购买数量
              <numbox @count="countChanged" :max="goodsinfo.num" initCount="1" :goodsid="goodsinfo.id"></numbox>
            </p>
            <p class="go-buy">
              <mt-button type="primary" size="small">立即购买</mt-button>
              <mt-button type="danger" size="small">加入购物车</mt-button>
            </p>
          </div>
          <div v-else>该商品暂时无货</div>
        </div>
      </div>
    </div>
    <!-- 商品参数区域 -->
    <div class="mui-card">
      <!-- 商品参数 -->
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content">
          <div class="mui-card-content-inner">
            <p>商品卖点: {{goodsinfo.sell_point}}</p>
            <p>库存情况: {{goodsinfo.num}} 件</p>
            <p>上架时间: {{goodsinfo.create_time}}</p>
          </div>
        </div>
      </div>
      <!-- 商品详情 -->
      <div class="mui-card-header">商品详情</div>
      <div class="mui-card-content good-desc">
        <div class="content" v-html="goodsinfo.content"></div>
      </div>
    </div>
  </div>
</template>
<script>
import swiper from '../../components/swiper.vue'
import numbox from '../../components/numbox.vue'
export default {
  props: ['id'],
  components: {
    swiper,
    numbox
  },
  data () {
    return {
      goodsinfo: {}
    }
  },
  created() {
    this.getGoodsInfo1()
  },
  mounted() {},
  methods: {
    getGoodsInfo() {
      // console.log(this.id)
      this.$http.get('goodsinfo', { params: { id: this.id } }).then(res => {
        // console.log(res)
        if (res.data.code === 0) {
          this.$toast(res.data.msg)
        } else if (res.data.code === 1) {
          if (res.data.data) {
            this.goodsinfo = res.data.data
          } else {
            this.$toast('商品不存在')
          }
        }
      }).catch(() => {
        this.$toast('服务器异常,请求失败')
      })
    },
    getGoodsInfo1() {
      // data[1] = { id: 99, goods_category_id: 2, name: '商品99', image: '', price: '5999.00', num: '300' }
      var res = { code: 1, msg: '', data: { id: 107, sell_point: '史上最贵,装机必备', num: 2000, name: 'iphone xs max', create_time: '2020-05-23 17:31:50', content: '<p>iPhone XS Max 配置6.5英寸显示屏</p>', price: '5000.00' } }
      console.log(res)
      this.goodsinfo = res.data
      // console.log(this.goodsinfo)
    },
    countChanged(val) {
      console.log(val)
    }
  }
}
</script>
<style scoped lang="scss">
.goods-info {
  background: #f1f1ff;
  overflow: hidden;
  .price {
    span {
      color: red;
      font-size: 14px;
      font-weight: bold;
    }
  }
  .go-buy {
    display: flex;
    margin: 10px 0 0px;
    justify-content: center;
    button {
      margin: 0 5px;
    }
  }
  .good-desc {
    background: #fff;
    padding: 5px;
    margin-bottom: 50px;
    h3 {
      font-size: 16px;
      color: #226aff;
      text-align: center;
      margin: 15px 0;
    }
    .content {
      font-size: 14px;
      line-height: 28px;
      img {
        width: 100%;
      }
    }
  }
  .go-number {
    margin-left: 10px;
  }
}
</style>

===pages/goods/GoodsList===
<template>
  <div class="goods-list">
    <div class="goods-item" v-for="item in goodslist" :key="item.id">
      <router-link :to="{ name: 'goods_info', params: {id: item.id} }">
        <img :src="item.image" alt="">
        <h1 class="title">{{item.name}}</h1>
        <p class="info">
          <span class="price">{{item.price}}</span>
          <span class="sell">剩余{{item.num}}件</span>
        </p>
      </router-link>
    </div>
    <mt-button class="more" v-if="goodslist.length !== 0" size="large" @click="getMore">加载更多</mt-button>
  </div>
</template>
<script>
export default {
  props: ['category_id'],
  data() {
    return {
      goodslist: [],
      last_id: 0
    }
  },
  created() {
    this.getGoodsList1()
  },
  mounted() {},
  methods: {
    getGoodsList() {
      console.log(this.category_id)
      this.$indicator.open({
        text: '加载中'
      })
      // 发送请求获取分类id对应的商品列表
      var params = { category_id: this.category_id, last_id: this.last_id }
      this.$http.get('goodslist', { params: params }).then(res => {
        this.$indicator.close()
        if (res.data.code === 1) {
          if (res.data.data.length > 0) {
            // concat方法的作用是将参数拼接到数组里面,返回一个新的数组(包含数组原有的数据和拼接的数据)
            this.goodslist = this.goodslist.concat(res.data.data)
            // 当请求成功之后,last_id的值就应该不是0了,改成最后一个商品的id
            this.last_id = res.data.data[res.data.data.length - 1].id
          } else if (this.goodslist.length > 0) {
            this.$toast('已经到达底部')
          } else {
            this.$toast('商品列表为空')
          }
        }
      })
    },
    getGoodsList1() {
      var data = []
      data[0] = { id: 100, goods_category_id: 2, name: '商品100', image: '', price: '998.00', num: '200' }
      data[1] = { id: 99, goods_category_id: 2, name: '商品99', image: '', price: '5999.00', num: '300' }
      var res = { code: 1, msg: '', data }
      this.goodslist = res.data
      // console.log(this.goodslist)
    },
    getMore() {
      // this.getGoodsList()
    }
  }
}
</script>
<style scoped lang="scss">
.goods-list{
  display: flex;
  flex-wrap: wrap;
  padding-left: 10px;
  margin-top: 30px;
  .goods-item{
    width: calc(calc(100% / 2) - 10px);
    margin: 10px 10px 0 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 10px;
    padding: 10px;
  }
  img {
    width: 100%;
  }
  .title {
    font-size: 14px;
    color: #333;
    margin: 10px 0;
  }
  .info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
    .price {
      color: red;
      font-weight: bold;
      font-size: 16px;
    }
    .sell {
      font-size: 13px;
    }
  }
  .more {
    margin: 15px 0;
    font-size: 14px;
  }
}
</style>