mall.git - Gitblit

<template>
  <div class="order">
    <div class="weui-search-bar weui-search-bar_focusing" id="searchBar">
      <form class="weui-search-bar__form">
        <div class="weui-search-bar__box">
          <i class="weui-icon-search"></i>
          <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="商品名称" @focus="inputStatus = true">
          <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
        </div>
      </form>
      <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">{{dict.search}}</a>
    </div>
    <div class="weui-tab">
      <div class="weui-navbar">
        <a href="javascript:" class="weui-navbar__item" v-for="item in typeList" :key="item.type" :class="{'weui-bar-active': item.active}">
          {{item.name}}
        </a>
      </div>
    </div>
    <div class="commodity-box">
      <div class="commodity border-bottom-5">
        <div class="commodity-header border-bottom-1">
          <span>2017-7-12 17:48</span>
          <span class="pull-right">待发货</span>
        </div>
        <div class="commodity-main">
          <div class="img">
            <img src="@/assets/images/detail.png" alt="">
          </div>
          <div class="detail">
            <p class="name">Cache韩版打底衫女短款时尚休闲动物图案短袖印花T恤女圆领</p>
            <p class="selected">颜色 红色</p>
            <p class="selected">尺码 L码</p>
          </div>
          <div class="valuation">
            <p>&nbsp;</p>
            <p class="money">￥ 349</p>
            <p class="weui-count">
              X1
            </p>
          </div>
        </div>
        <div class="commodity-footer">
          <p>共一件商品，合计<span class="money">￥ 263.00</span></p>
          <div class="operation">
            <div class="placeholder">联系客服</div>
            <div class="placeholder active">退款</div>
          </div>
        </div>
      </div>
      <div class="commodity border-bottom-5">
        <div class="commodity-header border-bottom-1">
          <span>2017-7-12 17:48</span>
          <span class="pull-right">待付款</span>
        </div>
        <div class="commodity-main">
          <div class="img">
            <img src="@/assets/images/detail.png" alt="">
          </div>
          <div class="detail">
            <p class="name">Cache韩版打底衫女短款时尚休闲动物图案短袖印花T恤女圆领</p>
            <p class="selected">颜色 红色</p>
            <p class="selected">尺码 L码</p>
          </div>
          <div class="valuation">
            <p>&nbsp;</p>
            <p class="money">￥ 349</p>
            <p class="weui-count">
              X1
            </p>
          </div>
        </div>
        <div class="commodity-footer">
          <p>共一件商品，合计￥ 263.00</p>
          <div class="operation">
            <div class="placeholder">联系客服</div>
            <div class="placeholder">付款</div>
            <div class="placeholder active">取消订单</div>
          </div>
        </div>
      </div>
      <div class="commodity border-bottom-5">
        <div class="commodity-header border-bottom-1">
          <span>2017-7-12 17:48</span>
          <span class="pull-right">待收货</span>
        </div>
        <div class="commodity-main" @click="jumpmenu('orderdetail')">
          <div class="img">
            <img src="@/assets/images/detail.png" alt="">
          </div>
          <div class="detail">
            <p class="name">Cache韩版打底衫女短款时尚休闲动物图案短袖印花T恤女圆领</p>
            <p class="selected">颜色 红色</p>
            <p class="selected">尺码 L码</p>
          </div>
          <div class="valuation">
            <p>&nbsp;</p>
            <p class="money">￥ 349</p>
            <p class="weui-count">
              X1
            </p>
          </div>
        </div>
        <div class="commodity-footer">
          <p>共一件商品，合计￥ 263.00</p>
          <div class="operation">
            <div class="placeholder">联系客服</div>
            <div class="placeholder" @click="confirm()">确认收货</div>
            <div class="placeholder">售后</div>
            <div class="placeholder active">查看物流</div>
          </div>
        </div>
      </div>
      <div class="commodity border-bottom-5">
        <div class="commodity-header border-bottom-1">
          <span>2017-7-12 17:48</span>
          <span class="pull-right">待评价</span>
        </div>
        <div class="commodity-main">
          <div class="img">
            <img src="@/assets/images/detail.png" alt="">
          </div>
          <div class="detail">
            <p class="name">Cache韩版打底衫女短款时尚休闲动物图案短袖印花T恤女圆领</p>
            <p class="selected">颜色 红色</p>
            <p class="selected">尺码 L码</p>
          </div>
          <div class="valuation">
            <p>&nbsp;</p>
            <p class="money">￥ 349</p>
            <p class="weui-count">
              X1
            </p>
          </div>
        </div>
        <div class="commodity-main">
          <div class="img">
            <img src="@/assets/images/detail.png" alt="">
          </div>
          <div class="detail">
            <p class="name">Cache韩版打底衫女短款时尚休闲动物图案短袖印花T恤女圆领</p>
            <p class="selected">颜色 红色</p>
            <p class="selected">尺码 L码</p>
          </div>
          <div class="valuation">
            <p>&nbsp;</p>
            <p class="money">￥ 349</p>
            <p class="weui-count">
              X1
            </p>
          </div>
        </div>
        <div class="commodity-footer">
          <p>共2件商品，合计￥ 263.00</p>
          <div class="operation">
            <div class="placeholder" @click="openpopup()">联系客服</div>
            <div class="placeholder" @click="estimate()">评价</div>
            <div class="placeholder active" @click="aftersale()">申请售后</div>
          </div>
        </div>
      </div>
    </div>
    <div id="logistics" class="weui-popup__container popup-bottom">
      <div class="weui-popup__overlay"></div>
      <div class="weui-popup__modal">
        <span class="close"><i class="icon-close"></i></span>
        <h4 class="text-center title">查看物流</h4>
        <div class="cargo">
          <img src="@/assets/images/detail.png" alt="">
          <p>Cache韩版打底衫女短款时尚休闲动物图案短袖印花T恤女圆领</p>
          <div class="status">
            <span>已发货</span>
          </div>
        </div>
        <div class="express">
          <img src="@/assets/images/detail.png" alt="">
          <div>
            <h4>百世快递</h4>
            <p class="tip">官方电话234455</p>
          </div>
          <p class="bill">百世快递32548527457258</p>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
import {dict} from '../store/dictionary'
export default {
  name: 'order',
  components: {},
  data () {
    return {
      dict: dict,
      typeList: [
        {
          name: '全部',
          active: true,
          type: 'all'
        },
        {
          name: '待付款',
          active: false,
          type: 'ap'
        },
        {
          name: '待发货',
          active: false,
          type: 'price'
        },
        {
          name: '待收货',
          active: false,
          type: 'price'
        },
        {
          name: '待评价',
          active: false,
          type: 'price'
        }
      ]
    }
  },
  methods: {
    jumpBack () {
      this.$router.back(-1)
    },
    jumpmenu (type) {
      this.$router.push({name: type})
    },
    confirm () {
      $.toast('收货成功', 3000)
    },
    estimate () {
      this.$router.push({name: 'estimate'})
    },
    openpopup () {
      $('#logistics').popup()
    },
    aftersale () {
      this.$router.push({name: 'aftersale'})
    }
  },
  mounted: function () {
 
  }
}
</script>
 
<style scoped>
.weui-navbar {
  background: #ffffff;
  border-bottom: 5px solid #eee;
  z-index: 5;
}
.weui-navbar .weui-navbar__item:after {
  border-right: none;
}
.weui-navbar .weui-navbar__item:active {
  background: #ffffff;
}
.weui-bar-active {
  color: #ff0000;
}
.commodity-box {
  padding: 55px 0px 40px;
}
.commodity {
  position: relative;
  padding: 10px 10px 10px;
}
.commodity-header {
  font-size: 14px;
  color: #bcbcbc;
  margin-bottom: 10px;
}
.commodity-main {
  position: relative;
}
.commodity .select {
  position: absolute;
  top: 35%;
}
.commodity .img {
  display: inline-block;
  width: 28%;
}
.commodity .img img {
  width: 100%;
  display: table-cell;
  border-radius: 3px;
}
.commodity .detail {
  position: absolute;
  width: 40%;
  height: 100%;
  left: 30%;
  top: 0px;
}
.commodity .detail p {
  font-size: 13px;
  height: 30%;
}
.commodity .detail .name {
  width: 120%;
  height: auto;
  min-height: 30%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
 
.commodity .detail .selected {
  color: #bcbcbc;
}
.valuation {
  position: absolute;
  width: 30%;
  height: 100%;
  right: 10px;
  top: 0px;
  text-align: right;
}
.valuation p {
  font-size: 13px;
  height: 30%;
}
.valuation .money, .money {
  color: red;
  font-size: 16px;
}
.commodity-footer {
  font-size: 14px;
  color: #777777;
  text-align: right;
}
.operation {
  margin-bottom: 30px;
}
.placeholder {
  width: 70px;
  height: 25px;
  line-height: 25px;
  margin: 2px;
  text-align: center;
  border-radius: 25px;
  float: right;
  border: 1px solid #bbbbbb;
}
.placeholder.active {
  color: #ee0000;
  border-color: #ee0000;
}
.close {
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 10px;
  right: 8px;
  transform:rotate(60deg);
  -moz-transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  -o-transform:rotate(45deg);
}
.close .icon-close:before {
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  height: 1px;
  width: 16px;
  background-color: #000000;
  margin-left: -7px;
}
.close .icon-close:after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  height: 16px;
  width: 1px;
  background-color: #000000;
  margin-top: -7px;
}
#logistics .weui-popup__modal {
  background: #eeeeee;
}
#logistics .title {
  height: 50px;
  line-height: 50px;
}
#logistics .cargo {
  margin: 0px 10px;
  background: #ffffff;
  border-radius: 10px;
  text-align: center;
}
#logistics .cargo img {
  width: 25%;
  margin-top: 15px;
}
#logistics .cargo p {
  font-size: 14px;
  margin: 0px 15px 10px;
}
#logistics .cargo .status {
  height: 60px;
  line-height: 60px;
  color: #ffffff;
  text-align: left;
  padding-left: 15px;
  background: red;
  opacity: 0.7;
  border-radius: 0px 0px 10px 10px;
}
#logistics .express {
  position: relative;
  margin: 10px 10px;
  background: #ffffff;
  border-radius: 10px;
}
#logistics .express img {
  width: 50px;
  border-radius: 50px;
  position: absolute;
  top: 10px;
  left: 10px;
}
#logistics .express img {
  width: 50px;
  border-radius: 50px;
  position: absolute;
  top: 10px;
  left: 10px;
}
#logistics .express div {
  margin-left: 70px;
  padding-top: 10px;
}
#logistics .express div .tip {
  font-size: 12px;
}
#logistics .express .bill {
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  margin-top: 10px;
  padding-left: 10px;
  background: #fafafa;
  border-radius: 0px 0px 10px 10px;
}
</style>