jdt-user/src/pages/goods/order_create/index.vue

<template>
  <view class="app">
    <view class="bg">
      <view class="card">
        <view class="left">
          <view>嘎嘎酒吧</view>
          <view>18888888888</view>
          <view>广西壮族自治区南宁市江南区</view>
        </view>
        <view class="right" @click="toLocal">
          <Find class="icon" />
          <view class="text">距离我{{ distance }}km</view>
        </view>
      </view>
    </view>
    <view class="order-info">21312312</view>
    <nut-form>
      <nut-form-item body-align="right" label="用户姓名">
        <nut-input
          :border="false"
          v-model="basicData.name"
          placeholder="请输入姓名"
          type="text"
        />
      </nut-form-item>
      <nut-form-item body-align="right" label="联系电话">
        <nut-input
          :border="false"
          v-model="basicData.phone"
          placeholder="请输入联系电话"
          type="text"
        />
      </nut-form-item>
      <nut-form-item body-align="right" label="订单备注">
        <nut-textarea
          class="nut-input-text"
          v-model="basicData.notes"
          placeholder="请输入备注"
          type="text"
        />
      </nut-form-item>
    </nut-form>
    <!-- 底部 -->
    <view class="bottom-box">
      <view
        >总计：<nut-price :price="8888.01" position="after" symbol="积分"
      /></view>
      <nut-button type="primary" @click="orderPay">提交订单</nut-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { Find } from "@nutui/icons-vue-taro";
import Taro from "@tarojs/taro";
import { calculateDistance } from "@/utils";
import { ref } from "vue";

const distance = ref("");

const basicData = ref({
  name: "",
  phone: "",
  notes: "",
});

Taro.useLoad(() => {
  Taro.getLocation({
    type: "wgs84",
    success: function (res) {
      const latitude = res.latitude;
      const longitude = res.longitude;
      distance.value = calculateDistance(
        108.24898,
        22.83646,
        longitude,
        latitude
      );
    },
  });
});

const toLocal = () => {
  Taro.openLocation({
    latitude: 22.83646,
    longitude: 108.24898,
    scale: 18,
  });
};

const orderPay = () => {
  Taro.showToast({
    title: "支付成功",
    icon: "success",
    success: () => {
      setTimeout(() => {
        Taro.redirectTo({
          url: "/pages/goods/order_status/index",
        });
      }, 2000);
    },
  });
};
</script>

<style lang="scss">
.bg {
  background: linear-gradient(0deg, #f5f5f5, #0396ffc7);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 10px 0;

  .card {
    width: 90%;
    height: 75%;
    margin: 0 auto;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
    position: relative;
    border-bottom: 1px dashed #ccc;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .left {
      width: 70%;
      color: #333;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    .right {
      width: 30%;
      text-align: center;

      .icon {
        font-size: 50px;
      }

      .text {
        font-size: 25px;
        color: #999;
      }
    }
  }
}

.order-info {
  background: #fff;
  padding: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-bottom: 10px;
}

.nut-input-text {
  height: 100px;
}

.bottom-box {
  position: fixed;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  height: 9vh;
  background: #fff;
  // IOS安全区域
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
</style>