<template>
  <view class="mail">
    <dHeader :title="'确定订单'"></dHeader>
    <view class="container">
      <view class="header">
        <view class="header-item" @click="menuChange(item)" v-for="item in menu" :key="item.id">
          <text class="header-text" :class="{ 'header-active': item.id == current }">
            {{ item.text }}
          </text>
        </view>
      </view>
      <!-- <view class="address">
        <view class="address-image">
          <image class="img" src="../../static/img/site_address.png"></image>
        </view>
        <view class="address-content">
          <view class="content-text">
            美国蒙大拿州中山路朱诺小区911号楼4单元朱诺小区911号楼4单元401
          </view>
          <view class="content-info">
            <view class="info-name">张三</view>
            <view class="info-phone">+86 13888888888</view>
          </view>
        </view>
        <view class="address-icon">
          <uni-icons type="right" color="#B7B7B7" size="20"></uni-icons>
        </view>
      </view> -->
      <view class="address">
        <view class="address-image">
          <image class="img" src="../../static/img/site_address.png"></image>
        </view>
        <view class="address-content address-content2">
          <view class="content-text">
            美国蒙大拿州中山路朱诺小区911号楼4单元朱诺小区911号楼4单元401
          </view>
        </view>
      </view>
      <view class="main">
        <view class="main-gift">
          <view class="gift">
            <view class="gift-image">
              <image class="img" src="../../static/img/site_address.png"></image>
            </view>
            <view class="gift-content">
              <view class="gift-content-text">小米官旗米家体脂秤S400智能精准减肥电子称</view>
              <view class="gift-cell">
                <view class="cell-label">兑换方式</view>
                <view class="cell-text">上门领取/包邮到家/邮寄到付</view>
              </view>
              <view class="gift-cell">
                <view class="cell-label">活动时间</view>
                <view class="cell-text">2023-10-1至2024-11-01</view>
              </view>
            </view>
          </view>
          <view class="main-count">
            <count v-model="num"></count>
          </view>
        </view>
        <view class="main-footer">
          <input class="inp" placeholder="请输入验证码" />
          <view class="btn" @click="handleCode">获取验证码</view>
        </view>
      </view>
    </view>
    <view class="remark">
      <uni-easyinput
        class="input"
        type="textarea"
        :trim="true"
        autoHeight
        :inputBorder="false"
        :maxlength="100"
        v-model.trim="remark"
        placeholder="请输入备注"
      >
      </uni-easyinput>
      <view class="placeholder">最多输入100字</view>
    </view>
    <view class="container-text">
      已选{{ num }}件，合计积分：<view class="container-num">{{ num * 10 }}</view
      >积分
    </view>
    <view class="container-btn">提交订单</view>
  </view>
</template>

<script>
import dHeader from '../../components/dHeader/index.vue'
import count from './components/count.vue'
export default {
  components: {
    dHeader,
    count
  },
  data() {
    return {
      menu: [
        {
          id: 1,
          text: '包邮到家'
        },
        {
          id: 2,
          text: '邮寄到付'
        },
        {
          id: 3,
          text: '上门领取'
        }
      ],
      current: 1,
      num: 1,
      remark: ''
    }
  },
  methods: {
    menuChange(item) {
      this.current = item.id
    },
    handleCode() {
      console.log('获取验证码')
    }
  }
}
</script>

<style lang="scss">
page {
  /* #ifdef H5 */
  padding-top: 140upx;
  /* #endif */
  /* #ifdef APP-PLUS */
  padding-top: calc(var(--status-bar-height) + 100upx);
  /* #endif */

  // box-sizing: border-box;
  // height: 100%;
  // background: linear-gradient(#317beb, #d3e5fe);
}
.mail {
  padding: 0 32upx;
}
.container {
  background-color: #fff;
  border-radius: 20upx;
  overflow: hidden;
  box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.12), 0 0 12upx rgba(0, 0, 0, 0.04);
}
.header {
  display: flex;
  height: 72upx;
  align-items: center;
  justify-content: space-around;
  background-color: #d3e6ff;
}
.header-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24upx;
}
.header-text {
  font-size: 24upx !important;
  color: #333;
}
.header-active {
  padding: 8upx 30upx;
  color: #fff;
  border-radius: 40upx;
  font-size: 28upx;
  font-weight: 600;
  background-color: #045fe7;
}
.address {
  display: flex;
  height: 160upx;
  align-items: center;
  justify-content: space-between;
}
.address-image {
  width: 100upx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10upx;
  .img {
    width: 64upx;
    height: 64upx;
    object-fit: cover;
  }
}
.address-content {
  padding: 20upx 0;
  flex: 1;
  height: inherit;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-between;
  .content-text {
    font-size: 24upx;
    color: #333;
  }
  .content-info {
    width: 100%;
    display: flex;
    color: var(--cb7b);
    font-size: 24upx;
    align-items: center;
    justify-content: space-between;
  }
}
.address-content2 {
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.address-icon {
  padding-right: 20upx;
  width: 80upx;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: right;
}
.main-gift {
  padding: 20upx 30upx;
  border-top: 1px solid var(--cb7b);
  border-bottom: 1px solid var(--cb7b);
  .gift {
    width: 100%;
    display: flex;
  }
  .gift-image {
    position: relative;
    margin-right: 8upx;
    width: 174upx;
    height: 174upx;
    .img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
.gift-content {
  flex: 1;
  display: flex;
  height: inherit;
  flex-direction: column;
  justify-content: space-between;
  .gift-content-text {
    width: 70%;
    font-size: 22upx;
    color: var(--cb7b);
  }
  .gift-cell {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .cell-label {
      font-size: 22upx;
      color: #333;
    }
    .cell-text {
      font-size: 22upx;
      color: var(--cb7b);
    }
  }
}
.main-count {
  display: flex;
  height: 100upx;
  align-items: center;
  justify-content: right;
}
.main-footer {
  box-sizing: border-box;
  font-size: 24upx;
  padding: 0 64upx;
  width: 100%;
  display: flex;
  height: 84upx;
  align-items: center;
  justify-content: space-between;
  .btn {
    font-weight: 600;
    color: #045fe7;
  }
  .inp {
    font-size: 24upx;
  }
}
.remark {
  position: relative;
  padding: 20upx 30upx;
  overflow: hidden;
  margin-top: 40upx;
  border-radius: 20upx;
  background-color: #fff;
  box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.12), 0 0 12upx rgba(0, 0, 0, 0.04);
  .input {
    font-size: 24upx;
  }
}
.placeholder {
  position: absolute;
  bottom: 20upx;
  right: 20upx;
  font-size: 20upx;
  color: #b3b3b3;
}
.container-text {
  margin-top: 80upx;
  padding: 0 30upx;
  width: 100%;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: flex-end;
  font-size: 24upx;
  color: #333;
}
.container-num {
  font-size: 28upx;
  color: red;
}
.container-btn {
  margin: 20upx auto 0;
  width: 470upx;
  height: 80upx;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  font-size: 28upx;
  color: #fff;
  background-color: #045fe7;
  border-radius: 40upx;
}
</style>
