<template>
  <view class="confirm-order">
    <view class="information-view">
      <view class="order-typers">
        <view class="home-delivery-service">送货上门</view>
        <view class="hypotenuse-view"></view>
      </view>
      <view class="location">
        <img class="location-pic" src="/src/static/assets/location.png" alt="" />
        <view class="location-text">贵州省贵阳市南明区花果园中环广场3号楼 1718</view>
        <img class="location-icon" src="/src/static/assets/right-arrow.png" alt="" />
        <view class="customer-information">
          <view class="customer-name">张三</view>
          <view class="customer-phone">187****5632</view>
        </view>
      </view>
      <view class="estimated-time-view">
        <text class="send-time">立即送出</text>
        <view class="estimated-time">大约13:45送达</view>
        <view class="estimated-icon"></view>
        <img class="estimated-icon" src="/src/static/assets/right-arrow.png" alt="" />
      </view>
    </view>
    <view class="commordity-information-view">
      <view class="trade-name">杨家黄焖鸡</view>
      <view class="commordity-content">
        <view class="commordity-details">
          <img class="commodity-picture" src="/src/static/assets/img1.png" alt="" />
          <view class="commodity-name">招牌黄焖鸡+米饭（土豆+生菜）</view>
          <view class="price-information">
            <text class="price-symbol">￥</text>
            <text class="price">28.8</text>
            <text class="conmmodity-amount">x1</text>
          </view>
          <view class="label">约1000克</view>
        </view>
        <view class="commordity-details">
          <img class="commodity-picture" src="/src/static/assets/img1.png" alt="" />
          <view class="commodity-name">招牌黄焖鸡+米饭（土豆+生菜）</view>
          <view class="price-information">
            <text class="price-symbol">￥</text>
            <text class="price">28.8</text>
            <text class="conmmodity-amount">x1</text>
          </view>
          <view class="label">约1000克</view>
        </view>
      </view>
      <view class="optional-view">
        <view class="discount-coupon-view">
          <view class="discount-coupon">卷</view>
          <view class="discount-coupon-text">商家优惠券</view>
          <view class="discount-coupon-price">￥0</view>
          <img class="discount-coupon-icon" src="/src/static/assets/right-arrow.png" alt="" />
        </view>
      </view>
      <view class="freight-view">
        <text>运费</text>
        <view class="freight-price">￥0</view>
      </view>
      <view class="remark-view">
        <text>备注</text>
        <view class="remark">
          <textarea
            class="content"
            placeholder="请输入你的问题"
            maxlength="200"
            v-model="textInputs"
          ></textarea>
          <view class="current-word">{{ inputLength }}/{{ wordMax }}</view>
        </view>
      </view>
      <view class="total-prices-view">
        <view class="discounts">已优惠￥0 &ensp;小计</view>
        <view class="total-prices">￥86.4</view>
      </view>
    </view>
    <view class="submit-order-view">
      <view class="total-view">
        <view class="total">合计:</view>
        <view class="total-price-symbol">￥</view>
        <view class="total-price">86.4</view>
      </view>
      <view class="total-discounts">总共优惠&ensp;￥0.00</view>
    </view>
    <button class="submit-button">提交订单</button>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
const wordMax = ref(200);
const textInputs = ref('');
const inputLength = computed(() => {
  return textInputs.value.length;
});
</script>

<style lang="scss" scoped>
page {
  width: 750rpx;

  background: #f3f3f3;
}
.confirm-order {
  width: 750rpx;
  padding: 20rpx;
}
.information-view {
  width: 710rpx;
  height: 365rpx;
  border-radius: 16rpx;
  // display: flex;
  overflow: hidden;
  background: #ffffff;
}
.order-typers {
  width: 710rpx;
  height: 82rpx;
}
.home-delivery-service {
  width: 355rpx;
  height: 82rpx;
  background: #ffffff;
  font-size: 32rpx;
  line-height: 82rpx;
  text-align: center;
  color: #333333;
}
.hypotenuse-view {
  width: 355rpx;
  height: 82rpx;
  background: #ffebeb;
  // position: static;
  margin-left: 365rpx;
  margin-top: -82rpx;
  transform: skew(15deg, -0deg);
}
.location {
  width: 695rpx;
  height: 166rpx;
  margin-left: 15rpx;
  padding-top: 20rpx;
  display: flex;
}
.location-pic {
  width: 35rpx;
  height: 35rpx;
}
.location-text {
  width: 595rpx;
  height: 64rpx;
  font-size: 32rpx;
  line-height: 32rpx;
  color: #333333;
}
.location-icon {
  width: 32rpx;
  height: 32rpx;
  margin-left: 25rpx;
  margin-top: 5rpx;
}
.customer-information {
  width: 400rpx;
  height: 60rpx;
  margin-top: 70rpx;
  margin-left: -650rpx;
  display: flex;
}
.customer-name {
  width: 56rpx;
  height: 28rpx;
  font-size: 28rpx;
  line-height: 28rpx;
  color: #999999;
  margin-top: 14rpx;
}
.customer-phone {
  width: 250rpx;
  height: 28rpx;
  font-size: 24rpx;
  line-height: 28rpx;
  color: #999999;
  margin-top: 14rpx;
  margin-left: 19rpx;
}
.estimated-time-view {
  width: 710rpx;
  height: 150rpx;
  margin-left: 15rpx;
  display: flex;
}
.send-time {
  font-size: 28rpx;
  line-height: 28rpx;
  color: #333333;
  margin-top: 30rpx;
}
.estimated-time {
  width: 178rpx;
  height: 24rpx;
  font-size: 24rpx;
  line-height: 24rpx;
  margin-left: 353rpx;
  margin-top: 30rpx;
  color: #f12a2a;
}
.estimated-icon {
  width: 32rpx;
  height: 32rpx;
  margin-left: -10rpx;
  margin-top: 25rpx;
}
.commordity-information-view {
  width: 691rpx;
  height: auto;
  border-radius: 16rpx;
  padding-left: 19rpx;
  padding-top: 23rpx;
  padding-bottom: 40rpx;
  margin-top: 26rpx;
  background: #ffffff;
}
.trade-name {
  width: 140rpx;
  height: 28rpx;
  font-size: 28rpx;
  line-height: 28rpx;
  color: #333333;
}
.commordity-content {
  width: 691rpx;
  height: auto;
  border-top: 1px solid #f2f2f2;
  margin-top: 19rpx;
}
.commordity-details {
  width: 691rpx;
  height: 128rpx;
  margin-top: 20rpx;
  display: flex;
}
.commodity-picture {
  width: 129rpx;
  height: 128rpx;
  border-radius: 8rpx;
  border: 1px solid #f6f6f6;
}
.commodity-name {
  width: 407rpx;
  height: 28rpx;
  font-size: 28rpx;
  line-height: 28rpx;
  color: #333333;
  margin-left: 21rpx;
}
.price-information {
  width: 88rpx;
  height: 66rpx;
  font-size: 32rpx;
  line-height: 32rpx;
  color: #f12a2a;
  margin-left: 38rpx;
  display: flex;
}
.price-symbol {
  font-weight: 400;
  font-size: 24rpx;
}
.price {
  font-weight: 400;
  font-size: 32rpx;
}
.conmmodity-amount {
  font-size: 24rpx;
  margin-top: 40rpx;
  margin-left: -20rpx;
  color: #999999;
}
.label {
  width: 125rpx;
  height: 40rpx;
  border-radius: 8rpx;
  background: #f2f2f2;
  font-size: 24rpx;
  line-height: 40rpx;
  text-align: center;
  color: #333333;
  margin-left: -535rpx;
  margin-top: 52rpx;
}
.discount-coupon-view {
  width: 691rpx;
  height: 24rpx;
  margin-top: 62rpx;
  display: flex;
}
.discount-coupon {
  width: 24rpx;
  height: 24rpx;
  border-radius: 5rpx;
  background: #fc2828;
  font-size: 16rpx;
  line-height: 24rpx;
  text-align: center;
  color: #ffffff;
}
.discount-coupon-text {
  width: 120rpx;
  height: 24rpx;
  font-size: 24rpx;
  line-height: 24rpx;
  color: #333333;
  margin-left: 10rpx;
}
.discount-coupon-price {
  width: 38rpx;
  font-size: 24rpx;
  line-height: 24rpx;
  color: #333333;
  margin-left: 450rpx;
}
.discount-coupon-icon {
  width: 32rpx;
  height: 32rpx;
  margin-left: 10rpx;
  margin-top: -5rpx;
}
.freight-view {
  width: 691rpx;
  height: 24rpx;
  margin-top: 31rpx;
  display: flex;
  font-size: 24rpx;
  line-height: 24rpx;
  color: #333333;
}
.freight-price {
  margin-left: 590rpx;
}
.remark-view {
  width: 691rpx;
  height: 24rpx;
  margin-top: 31rpx;
  font-size: 24rpx;
  line-height: 24rpx;
  color: #333333;
}
.remark {
  width: 674rpx;
  height: 243rpx;
  border-radius: 12rpx;
  background: #fafafa;
  font-size: 24rpx;
  line-height: 24rpx;
  color: #999999;
  margin-top: 20rpx;
}
.content {
  width: 640rpx;
  height: 180rpx;
  font-size: 24rpx;
  font-weight: 500;
  color: #77818f;
  top: 23rpx;
  margin-left: 22rpx;
}
.current-word {
  width: 120rpx;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 28rpx;
  color: gray;
  margin-top: 12rpx;
  margin-left: 540rpx;
}
.total-prices-view {
  width: 691rpx;
  height: 32rpx;
  margin-top: 310rpx;
  display: flex;
  line-height: 32rpx;
  text-align: center;
}
.discounts {
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
  margin-left: 356rpx;
}
.total-prices {
  font-weight: 400;
  font-size: 32rpx;
}
.submit-order-view {
  width: 750rpx;
  height: 131rpx;
  padding-left: 18rpx;
  padding-top: 21rpx;
  margin-top: 15%;
  background: #ffffff;
  margin-left: -20rpx;
}
.total-view {
  width: 142rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
  display: flex;
}
.total {
  font-weight: 400;
  font-size: 24rpx;
  color: #333333;
}
.total-price-symbol {
  font-weight: 400;
  font-size: 24rpx;
  color: #f12a2a;
}
.total-price {
  font-weight: 400;
  font-size: 32rpx;
  color: #f12a2a;
}
.total-discounts {
  width: 200rpx;
  height: 24rpx;
  font-size: 24rpx;
  line-height: 24rpx;
  color: #999999;
  margin-top: 15rpx;
}
.submit-button {
  width: 188rpx;
  height: 75rpx;
  border-radius: 40rpx;
  background: linear-gradient(90deg, #f73f3f 1%, #ec1a1a 98%);
  font-size: 28rpx;
  line-height: 75rpx;
  text-align: center;
  color: #ffffff;
  margin-left: 520rpx;
  margin-top: -120rpx;
}
</style>
