73 lines
2.3 KiB
Vue
73 lines
2.3 KiB
Vue
<template>
|
||
<view class="create-service-order">
|
||
<view class="create-service-wrapper">
|
||
<view class="order-header">
|
||
<text>创建服务工单</text>
|
||
</view>
|
||
<view class="order-content">
|
||
<view class="order-item">
|
||
<image src="./images/icon_service.png" class="order-icon"></image>
|
||
<text class="order-description">加一台麻将机</text>
|
||
</view>
|
||
<view class="order-line"></view>
|
||
<view class="order-details">
|
||
<view class="detail-item">
|
||
<text class="detail-label">房间号：</text>
|
||
<text class="detail-value">302</text>
|
||
</view>
|
||
<view class="detail-item">
|
||
<text class="detail-label">服务时间：</text>
|
||
<text class="detail-value">2025-09-12 12:00</text>
|
||
</view>
|
||
<view class="detail-item">
|
||
<text class="detail-label">联系房客：</text>
|
||
<input
|
||
class="detail-input"
|
||
placeholder="请填写联系人"
|
||
v-model="contactName"
|
||
/>
|
||
</view>
|
||
<view class="detail-item">
|
||
<text class="detail-label">联系电话：</text>
|
||
<input
|
||
class="detail-input"
|
||
placeholder="请填写联系电话"
|
||
v-model="contactPhone"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<button class="order-button" @click="handleCall">立即呼叫</button>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="footer-help">
|
||
<image src="./images/icon_volume.png" class="help-icon"></image>
|
||
<text class="help-text">没解决问题？给我打电话吧！</text>
|
||
<text class="help-phone" @click="makePhoneCall">15185111210</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from "vue";
|
||
|
||
const contactName = ref("");
|
||
const contactPhone = ref("");
|
||
|
||
const handleCall = () => {
|
||
// Logic to handle the call action
|
||
console.log("Calling with:", contactName.value, contactPhone.value);
|
||
};
|
||
|
||
const makePhoneCall = () => {
|
||
// 使用 uniapp 的 API 拨打电话
|
||
uni.makePhoneCall({
|
||
phoneNumber: "15185111210",
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import "./styles/index.scss";
|
||
</style>
|