4dkankan_official/src/page/layout/aside/temp/ctemp/detail.vue

<template>
  <div>
    <div class="detail-layout">
      <div class="detail-header">
        <div class="c-title">确认订单</div>
        <i @click="backHandle" class="iconfont icon-shang"></i>
      </div>
      <edit
        :name="'收货信息'"
        @clickOper="handleOper('addressStatus')"
        :oper="addressStatus?'编辑':'保存'"
        :isActive="addressStatus"
        class="edit-item"
      >
        <div class="address" slot="show">
          <p>
            <span>陈志广</span>
            <span>13211064273</span>
          </p>
          <p class="p-desc">广东省珠海市唐家高新区港湾1号港11四维时代科技</p>
        </div>
        <div class="address edit-address" slot="edit">
          <div class="input-con">
            <input type="text" placeholder="姓名">
            <input type="text" placeholder="电话">
          </div>
          <div class="input-con">
            <input type="text" placeholder="广东省">
            <input type="text" placeholder="珠海市">
            <input type="text" placeholder="唐家湾镇">
          </div>
          <div class="input-con address-input">
            <input type="text" placeholder="港湾1号">
          </div>
        </div>
      </edit>
      <div class="pay-type">
        <div class="title">支付方式</div>
        <div class="body">
          <div class="pay-tag" :class="{'tag-active':paytype==='alipay'}" @click="paytype='alipay'">
            <img src="@/assets/images/ali-pay.png" class="t-icon" alt>
            <span>支付宝</span>
            <img src="@/assets/images/tag-icon.png" class="t-click" alt>
          </div>
          <div class="pay-tag" :class="{'tag-active':paytype==='wechat'}" @click="paytype='wechat'">
            <img src="@/assets/images/wechat-pay.png" class="t-icon" alt>
            <span>微信支付</span>
            <img src="@/assets/images/tag-icon.png" class="t-click" alt>
          </div>
          <div class="pay-tag" :class="{'tag-active':paytype==='paypal'}" @click="paytype='paypal'">
            <img src="@/assets/images/paypal.png" class="t-icon" alt>
            <span>paypal</span>
            <img src="@/assets/images/tag-icon.png" class="t-click" alt>
          </div>
        </div>
      </div>
      <edit
        :name="'我的发票抬头'"
        @clickOper="handleOper('invoiceStatus')"
        :oper="invoiceStatus?'编辑':'保存'"
        :isActive="invoiceStatus"
        class="edit-item"
      >
        <div class="invoice" slot="show">
          <p class="p-desc">暂无信息</p>
        </div>
        <div class="invoice edit-invoice" slot="edit">
          <div class="select-con">
            <div :class="{'tag-active':invoice==='noinvoice'}" @click="invoice='noinvoice'">
              <span>不需要发票</span>
              <img src="@/assets/images/tag-icon.png" alt>
            </div>
            <div :class="{'tag-active':invoice==='normal'}" @click="invoice='normal'">
              <span>增值税普通发票</span>
              <img src="@/assets/images/tag-icon.png" alt>
            </div>
            <div :class="{'tag-active':invoice==='zengzhi'}" @click="invoice='zengzhi'">
              <span>增值税专用发票</span>
              <i></i>
              <img src="@/assets/images/tag-icon.png" alt>
            </div>
          </div>
          <div class="input-con">
            <input type="text" placeholder="请输入发票抬头">
            <input type="text" placeholder="18位的统一社会信用代码 / 税务登记号">
          </div>
          <div class="input-con">
            <input type="text" placeholder="注册地址">
            <input type="text" placeholder="注册电话">
          </div>
          <div class="input-con">
            <input type="text" placeholder="开户银行">
            <input type="text" placeholder="银行账户">
          </div>
        </div>
      </edit>
      <div class="express-type">
        <div class="title">物流方式</div>
        <img class="express-img" src="@/assets/images/sf-express.png" alt>
      </div>
      <div class="product-type">
        <div class="title">商品信息</div>
        <div class="p-info">
          <img src="@/assets/images/banner_pro.png" alt>
          <div class="p-params">
            <h3>四维看看 Pro</h3>
            <p>本机主体 x 1, 拍摄支架 x 1</p>
          </div>
          <div class="p-price">￥ 8,458</div>
        </div>
        <div class="p-detail">
          <div>
            <span>商品总价：</span>
            <span>￥8,458</span>
          </div>
          <div>
            <span>税费及其他费用：</span>
            <span>￥0</span>
          </div>
          <div>
            <span>运费：</span>
            <span>￥0</span>
          </div>
          <div>
            <span>合计：</span>
            <span>￥8,458</span>
          </div>
        </div>
        <div class="p-pay">
          <div class="agree">
            <span></span>
            <span>同意商城销售协议</span>
          </div>
          <div class="c-button purchase">付款</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vcenter from '@/components/vcenter'
import edit from '@/components/edit'

export default {
  data () {
    let products = ['asd', 'dwdwd']
    return {
      products,
      addressStatus: false,
      invoiceStatus: false,
      invoice: 'noinvoice',
      paytype: 'wechat'
    }
  },
  components: {
    vcenter,
    edit
  },
  methods: {
    backHandle () {
      this.$emit('backList')
    },
    handleOper (type) {
      this[type] = !this[type]
    }
  }
}
</script>

<style lang="scss" scoped>
$theme-color: #1fe4dc;
$border-color: #e7e7e7;
input {
  appearance: none;
  line-height: 36px;
  height: 36px;
  border: solid 1px $border-color;
  padding-left: 10px;
  &:focus {
    border: solid 1px $theme-color;
  }
}
.c-button {
  height: 50px;
  padding-top: 0;
  padding-bottom: 0;
  vertical-align: middle;
  margin-top: 10px;
  display: inline-block;
  background-color: #1fe4dc;
  text-align: center;
  cursor: pointer;
  &:first-child {
    width: 50px;
    box-sizing: border-box;
  }

  &:last-child {
    width: 150px;
    line-height: 50px;
    color: #000;
    font-size: 14px;
  }
}

.detail-layout {
  overflow: auto;
  height: 100vh;
  padding-bottom: 40px;
  .detail-header {
    color: #000;
    font-size: 16px;
    position: relative;
    .c-title {
      height: 70px;
      line-height: 70px;
      text-align: center;
      padding: 0 30px;
      border-bottom: 1px solid #e7e7e7;
    }
    i {
      position: absolute;
      color: #999;
      top: 50%;
      left: 30px;
      font-size: 24px;
      cursor: pointer;
      transform: translateY(-50%) rotate(-90deg);
    }
  }
  .edit-item {
    width: 100%;
    border-bottom: 0;
    padding: 30px;
    .info,
    .address,
    .invoice {
      margin-top: 20px;
      p {
        line-height: 36px;
        span {
          padding-right: 10px;
        }
      }
      .p-desc {
        color: #a0a0a0;
        line-height: 24px;
      }
      .avatar {
        width: 68px;
        height: 68px;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
        margin: 5px 0;
      }
      .nickname {
        width: 126px;
      }
    }
    .edit-address {
      .input-con {
        input {
          width: 200px;
          line-height: 36px;
          height: 36px;
          margin: 10px 25px 10px 0;
          &:last-of-type {
            margin-right: 0;
          }
        }
      }
      .address-input {
        input {
          width: 660px;
        }
      }
    }
    .edit-invoice {
      .select-con {
        div {
          position: relative;
          cursor: pointer;
          width: 200px;
          line-height: 36px;
          height: 36px;
          margin: 10px 25px 10px 0;
          border: solid 1px $border-color;
          color: #a0a0a0;
          padding: 0 10px;
          display: inline-block;
          img {
            display: none;
            position: absolute;
            bottom: 0;
            right: 0;
          }
          &:last-of-type {
            margin-right: 0;
          }
        }
        .tag-active {
          border: solid 1px $theme-color;
          color: #000;
          img {
            display: inline-block;
          }
        }
      }
      .input-con {
        input {
          width: 316px;
          line-height: 36px;
          height: 36px;
          margin: 10px 25px 10px 0;
          &:last-of-type {
            margin-right: 0;
          }
        }
      }
    }
  }
  .pay-type,
  .express-type,
  .product-type {
    .title {
      padding: 0 30px;
      font-size: 16px;
    }
    .body {
      padding: 0 30px;
      .pay-tag {
        cursor: pointer;
        border: 1px solid $border-color;
        width: 200px;
        line-height: 36px;
        height: 36px;
        margin-top: 20px;
        position: relative;
        span {
          margin-left: 36px;
          display: inline-block;
          text-align: center;
          padding-left: 60px;
        }
        img {
          position: absolute;
        }
        .t-icon {
          width: 36px;
          height: 36px;
          padding: 6px;
          left: 0;
          border-right: 1px solid $border-color;
        }
        .t-click {
          right: 0;
          bottom: 0;
          display: none;
        }
      }
      .tag-active {
        border: 1px solid $theme-color;
        span {
          color: #000;
        }
        .t-icon {
          border-right: 1px solid $theme-color;
        }
        .t-click {
          display: inline-block;
        }
      }
    }
    .express-img {
      padding: 30px;
    }
    .p-info {
      border-bottom: 1px solid $border-color;
      padding: 20px 30px;
      min-height: 80px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      img {
        width: 30px;
        flex-shrink: 0;
      }
      .p-params {
        padding-left: 30px;
        vertical-align: middle;
        position: absolute;
        top: 50%;
        left: 50px;
        transform: translateY(-50%);
        h3 {
          font-weight: normal;
        }
        p {
          color: #ddd;
          margin-top: 5px;
        }
      }
    }
    .p-detail {
      padding: 30px;
      & > div {
        display: flex;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        justify-content: space-between;
        span {
          &:last-child {
            display: inline-block;
            width: 80px;
          }
        }
      }
    }
    .p-pay{
      padding: 0 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .agree{
        cursor: pointer;
        span{
          color: #a0a0a0;
          vertical-align: middle;
          &:first-child{
            border: solid 1px $border-color;
            display: inline-block;
            width: 16px;
            height: 16px;
          }
        }
      }
    }
  }
}
</style>