mall.git - Gitblit

<template>
  <div class="goods">
    <div class="weui-flex">
      <div><div class="placeholder"><img class="img" src="@/assets/images/profile.png" alt=""></div></div>
      <div class="weui-flex__item">
        <div class="placeholder">
          <p>收件人 张先生 1339349293</p>
          <p>收货地址：北京 朝阳区 朗廷大厦 413室</p>
        </div>
      </div>
      <div><div class="placeholder"><span class="img">&gt;</span></div></div>
    </div>
    <div class="pay-box">
      <div class="pay-header">
        <div class="pay-img">
          <img src="@/assets/images/detail.png" alt="">
        </div>
        <div class="pay-detail">
          <p class="name">CacheCache韩版打底衫女短款时尚休闲动物图案短袖印花T恤女圆领</p>
          <p class="select">已选 L码 红色</p>
          <p>
            <span class="money">￥ 299</span>
            <span class="pull-right">X2</span>
          </p>
        </div>
      </div>
      <div class="weui-cell border-top">
        <div class="weui-cell__bd">
          <p>购买数量</p>
        </div>
        <div class="weui-cell__ft">
          <div class="weui-count">
            <a class="weui-count__btn weui-count__decrease"></a>
            <input class="weui-count__number" type="number" value="1">
            <a class="weui-count__btn weui-count__increase"></a>
          </div>
        </div>
      </div>
      <div class="weui-cell border-top">
        <div class="weui-cell__bd">
          <p>配送方式</p>
        </div>
        <div class="weui-cell__ft">
          <span>包邮</span>
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <p>开具发票</p>
        </div>
        <div class="weui-cell__ft">
          <a href="javascript:;" @click="openpopup()">电子发票&gt;</a>
        </div>
      </div>
      <div class="weui-cell border-top">
        <span class="textarea-name">买家备注:</span>
        <textarea class="weui-textarea" placeholder="这里可以对卖家留言哦" rows="1"></textarea>
      </div>
      <div class="weui-cell border-top">
        <div class="weui-cell__bd"></div>
        <div class="weui-cell__ft">
          <p>共一件商品，合计￥263</p>
          <p>积分1000可抵10元，共100积分，可抵1元</p>
          <p>运费￥ 0.0</p>
          <p>实付款<span class="money">￥ 262</span></p>
        </div>
      </div>
    </div>
    <div class="weui-tabbar">
      <a href="javascript:;" class="tabbar-left">
        <p class="tabbar-label-right">合计: <span class="money">￥ 256</span></p>
      </a>
      <a href="javascript:;" class="tabbar-right" @click="openconfirm()">
        <p class="tabbar-label-right">结算</p>
      </a>
    </div>
    <div id="my-popup" class="weui-popup__container popup-bottom">
      <div class="weui-popup__overlay"></div>
      <div class="weui-popup__modal">
        <span class="close-btn" @click="closepopup()">X</span>
        <h4 class="text-center">发票</h4>
        <p>发票类别</p>
        <div class="weui-flex">
          <div class="placeholder active">个人</div>
          <div class="placeholder">企业</div>
        </div>
        <p>发票类型</p>
        <div class="weui-flex">
          <div class="placeholder active">普通发票</div>
          <div class="placeholder">增值税专用发票</div>
        </div>
        <div class="weui-cell">
          <span class="textarea-name">发票抬头</span>
          <input class="weui-textarea" placeholder="" type="text"/>
        </div>
        <div class="weui-cell">
          <span class="textarea-name">税号</span>
          <input class="weui-textarea" placeholder="" type="text"/>
        </div>
        <p>收票人信息</p>
        <div class="weui-cell">
          <span class="textarea-name">*收票人姓名</span>
          <input class="weui-textarea" placeholder="" type="text"/>
        </div>
        <div class="weui-cell">
          <span class="textarea-name">*收票人手机</span>
          <input class="weui-textarea" placeholder="" type="text"/>
        </div>
        <div class="weui-cell">
          <span class="textarea-name">*收票人地址</span>
          <input class="weui-textarea" placeholder="" type="text"/>
        </div>
        <p>发票内容</p>
        <a href="javascript:;" class="weui-btn weui-btn_primary">确定</a>
      </div>
    </div>
    <div id="confirm" class="weui-popup__container popup-bottom">
      <div class="weui-popup__overlay"></div>
      <div class="weui-popup__modal">
        <span class="close-btn" @click="closepopup()">X</span>
        <h4 class="text-center">确认付款</h4>
        <div class="weui-cell">
          <span class="textarea-name">微信支付</span>
          <span class="point"></span>
        </div>
        <a href="javascript:;" class="weui-btn weui-btn_warn" @click="paymentsuccess()">立即付款</a>
      </div>
    </div>
  </div>
</template>
 
<script>
import {dict} from '../store/dictionary'
export default {
  name: 'goods',
  components: {},
  data () {
    return {
      dict: dict
    }
  },
  methods: {
    jumpBack () {
      this.$router.back(-1)
    },
    jumpSearch () {
      this.$router.push({name: 'login', params: {view: 'home'}})
    },
    openpopup () {
      $('#my-popup').popup()
    },
    openconfirm () {
      $('#confirm').popup()
    },
    closepopup () {
      $.closePopup()
    },
    paymentsuccess () {
      $.closePopup()
      $.toast('支付成功')
    }
  },
  mounted: function () {
 
  }
}
</script>
 
<style scoped>
.weui-flex {
  height: 50px;
  padding-top: 10px;
  border-bottom: 5px solid #eeeeee;
}
.placeholder .img {
  display: inline-block;
  width: 35px;
}
.placeholder p {
  font-size: 13px;
}
.comment {
  padding: 10px 10px 15px;
  border-bottom: 5px solid #eeeeee;
}
.comment p {
  font-size: 14px;
}
.comment .date {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  color: #cccccc;
}
.comment p img {
  vertical-align: bottom;
}
.comment .picture img {
  vertical-align: top;
  width: 24%;
  margin-bottom: 5px;
}
.weui-tabbar {
  position: fixed;
  height: 40px;
  line-height: 40px;
}
.tabbar-left {
  width: 75%;
  font-size: 16px;
  text-align: right;
}
.tabbar-left p {
  color: #000000;
  padding-right: 10px;
}
.tabbar-right {
  width: 25%;
  font-size: 16px;
  text-align: center;
  padding-top: 4px;
}
.tabbar-large-item p {
  padding: 5px 0px;
}
.weui-tabbar__icon{
  width: 20px;
  height: 20px;
}
.weui-tabbar__icon img{
  width: 20px;
  height: 20px;
  vertical-align: bottom;
}
.tabbar-right {
  color: #ffffff;
  background: -webkit-linear-gradient(left,#FF0F3E, #FF592E); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, #FF0F3E, #FF592E); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, #FF0F3E, #FF592E); /* Firefox 3.6 - 15 */
  background: linear-gradient(right, #FF0F3E, #FF592E); /* 标准的语法 */
}
.pay-box {
  padding: 10px;
  margin-bottom: 40px;
}
.pay-header {
  position: relative;
}
.pay-header .pay-img {
  display: inline-block;
  width: 30%;
}
.pay-header .pay-img img {
  width: 100%;
  display: table-cell;
  border-radius: 3px;
}
.pay-header .pay-detail {
  position: absolute;
  left: 35%;
  top: 0px;
}
.pay-header .pay-detail p {
  font-size: 13px;
}
.money {
  color: red;
  font-size: 16px;
}
.pay-header .pay-detail .select {
  line-height: 30px;
  color: #757575;
}
.weui-cell {
  padding-left: 0px;
  min-height: 35px;
  font-size: 14px;
}
.weui-cell.border-top {
  border-top: 1px solid #e5e5e5;
}
.weui-cell::before {
  border-top: none;
}
.weui-cell__ft {
  color: #000000;
}
.weui-cell__ft a {
  color: #000000;
}
.weui-textarea {
  background: #eeeeee;
}
.textarea-name {
  display: inline-block;
  width: 100px;
}
.close-btn {
  position: absolute;
  display: inline-block;
  text-align: center;
  width: 16px;
  height: 16px;
  font-size: 13px;
  line-height: 17px;
  right: 12px;
  top: 20px;
  border: 1px solid #777777;
  border-radius: 30px;
}
.weui-popup__container {
  z-index: 1000;
}
.weui-popup__modal {
  box-sizing: border-box;
  background: #ffffff;
  padding: 10px;
  font-size: 14px;
}
.weui-popup__modal h4 {
  line-height: 40px;
  font-size: 18px;
}
.weui-popup__modal .weui-flex {
  height: 35px;
  text-align: center;
  border-bottom: none;
}
.weui-popup__modal .placeholder {
  height: 20px;
  padding: 2px 10px;
  margin-right: 15px;
  border-radius: 25px;
  border: 1px solid rgb(153, 143, 143);
}
.weui-popup__modal .placeholder.active {
  background: #FBC9CB;
  border: 1px solid rgb(170, 37, 42);
}
.weui-popup__modal .textarea-name {
  padding-right: 10px;
  text-align: right;
  width: 115px;
}
.weui-popup__modal .weui-cell {
  min-height: 20px;
}
input.weui-textarea {
  height: 25px;
  background: #F6F6F6;
  border-radius: 15px;
  padding-left: 10px;
}
#confirm .weui-btn {
  margin-top: 200px;
  margin-bottom: 20px;
}
#confirm .point {
  display: inline-block;
  position: absolute;
  right: 20px;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: #FF592E;
}
#confirm .textarea-name {
  text-align: left;
  padding-left: 10px;
  font-size: 15px;
}
</style>