i

src/pages/goods/order_create/index.vue

@@ -0,0 +1,183 @@
+<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>