1.订单部分页面 2.会议部分页面

pages/sys/user/myVisitor/selectRoom.vue

@@ -0,0 +1,155 @@
+<template>
+  <view class="container">
+    <!-- 搜索栏 -->
+    <view class="search-bar">
+      <picker mode="region" @change="onRegionChange">
+        <view class="region">{{ region }}</view>
+      </picker>
+      <input class="search-input" placeholder="请输入您的地址" />
+    </view>
+
+    <!-- 地图展示 -->
+    <map 
+      class="map-view" 
+      :longitude="longitude" 
+      :latitude="latitude" 
+      scale="16" 
+      show-location 
+      :markers="markers"
+    ></map>
+
+    <!-- 地址列表 -->
+    <view class="address-list">
+      <block v-for="(item, index) in addressList" :key="index">
+        <view 
+          class="address-item" 
+          @tap="onSelect(item)"
+        >
+          <view class="addr-info">
+            <view class="addr-title">{{ item.name }}</view>
+            <view class="addr-desc">{{ item.detail }}</view>
+          </view>
+          <radio :checked="selectedId === item.id" />
+        </view>
+      </block>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      region: '重庆',
+      latitude: 29.534,
+      longitude: 106.565,
+      selectedId: null,
+      markers: [
+        {
+          id: 1,
+          latitude: 29.534,
+          longitude: 106.565,
+          iconPath: '/static/ic_map.png', // 设置背景图
+          width: 20,
+          height: 20
+        }
+      ],
+      addressList: [
+        {
+          id: 1,
+          name: '综合服务中心-1栋',
+          detail: '重庆市南川区隆化大道9号'
+        },
+        {
+          id: 2,
+          name: '综合服务中心-2栋',
+          detail: '重庆市南川区隆化大道12号'
+        },
+        {
+          id: 3,
+          name: '综合服务中心-3栋',
+          detail: '重庆市南川区隆化大道4号'
+        },
+        {
+          id: 4,
+          name: '综合服务中心-4栋',
+          detail: '重庆市南川区隆化大道5号'
+        },
+        {
+          id: 5,
+          name: '综合服务中心-5栋',
+          detail: '重庆市南川区隆化大道145号'
+        }
+      ]
+    };
+  },
+  methods: {
+    onRegionChange(e) {
+      this.region = e.detail.value;
+    },
+    onSelect(item) {
+      this.selectedId = item.id;
+      console.log('Selected:', item);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.search-bar {
+  display: flex;
+  align-items: center;
+  padding: 20rpx;
+  background: #f5f5f5;
+}
+
+.region {
+  margin-right: 20rpx;
+  color: #333;
+}
+
+.search-input {
+  flex: 1;
+  background: #fff;
+  border-radius: 10rpx;
+  padding: 10rpx;
+}
+
+.map-view {
+  width: 100%;
+  height: 400rpx;
+}
+
+.address-list {
+  padding: 20rpx;
+  background: #fff;
+}
+
+.address-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 30rpx 0;
+  border-bottom: 1px solid #eee;
+}
+
+.addr-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.addr-title {
+  font-weight: bold;
+  font-size: 32rpx;
+}
+
+.addr-desc {
+  font-size: 26rpx;
+  color: #888;
+  margin-top: 6rpx;
+}
+</style>