Merge branch 'master' of http://139.186.142.91:10010/r/productDev/gtzxingli...

rk

2026-04-28 a59ff44b2eaa7020f0529632d9ec064c4dc38e27

 small-program/pages/storage-point-detail/storage-point-detail.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,574 @@
<template>
   <view class="storage-page">
      <view class="content-wrap">
            <swiper class="popup-banner-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" :circular="true">
               <swiper-item v-for="(item, index) in activeStore.images" :key="index">
                  <image class="popup-banner-image" :src="item" mode="aspectFill"></image>
               </swiper-item>
            </swiper>
            <view class="popup-body">
            <text class="popup-title">{{ activeStore.name ||'' }}</text>
            <text class="popup-hours">{{ activeStore.time ||'' }}</text>
            <text class="popup-desc" v-if="activeStore.content">{{ activeStore.content ||'' }}</text>
            <view class="popup-address-row" @click="openNavigation">
               <view class="popup-address">
                  <image src="/static/icon/home_ic_location3@2x.png" mode="aspectFit"></image>
                  <text>{{ activeStore.address ||'' }}</text>
               </view>
               <view class="popup-distance-wrap">
                  <image src="/static/icon/ic_address@2x.png" mode="aspectFit"></image>
                  <text>{{ activeStore.distanceText ||'' }}</text>
               </view>
            </view>
            <view class="popup-gap"></view>
            <view class="popup-section">
               <text class="popup-section-title">寄存类型</text>
               <text class="popup-section-text">{{ activeStore.depositTypes ||''}}</text>
            </view>
            <view class="popup-gap"></view>
            <view class="popup-section no-border">
               <text class="popup-section-title">收费标准</text>
               <text class="popup-section-text">{{ activeStore.feeStandard || ''}}</text>
            </view>
            </view>
         <view class="popup-footer">
              <view class="popup-btn ghost" @click="contactStore">联系门店</view>  
            <view class="popup-btn primary" @click="storeLuggage">行李寄存</view>
         </view>
      </view>
      <auth-login :show="showLogin" @close="showLogin = false"></auth-login>
   </view>
</template>

<script>
import { mapState } from 'vuex'
   export default {
      data() {
         return { 
            id:null,
            activeStore: {},
            showLogin: false
         }
      },
      computed: {
         ...mapState(['latitude', 'longitude', 'token'])
      },
      async onLoad(options) {
         console.log(options)
            this.id = options.id
            this.getShopInfo()
      }, 
      methods: { 
         openNavigation() {
            if( this.activeStore && this.activeStore.id){
               uni.openLocation({
                  latitude: this.activeStore.latitude,
                  longitude: this.activeStore.longitude,
                  name: this.activeStore.name,
                  address: this.activeStore.address,
                  scale: 18,
                  infoUrl: ''
               })
            }
				
         },
         positioning() {
            var that = this;
            uni.getLocation({
               type: 'gcj02',
               highAccuracyExpireTime: 3000,
               isHighAccuracy: true,
               success: function (addr) {
                  if(!addr){
                     return
                  }
                  that.latitude=addr.latitude
                  that.longitude=addr.longitude
               }
            });
         },
         async getShopInfo() {
            this.$u.api.getShopDetail({
               id: this.id,
               latitude: this.latitude,
               longitude: this.longitude,
            }).then(res => {
               if (res.code === 200) {
                  this.activeStore = res.data
               }
            })
         },
         contactStore() {
            uni.showToast({
               title: '联系门店待接入',
               icon: 'none'
            })
         },
         storeLuggage() {
            if (!this.token) {
               this.showLogin = true
               return
            }
            uni.navigateTo({
               url: '/pages/luggage-storage/luggage-storage'
            })
         }
      }
   }
</script>

<style lang="scss" scoped>
   .storage-page {
      position: relative;
      min-height: 100vh;
      background: #ffffff;
   }

   .top-fixed {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      background: #ffffff;
      z-index: 20;
   }

   .dropdown-mask {
      position: fixed;
      left: 0;
      right: 0;
      top: 184rpx;
      bottom: 0;
      background: rgba(0, 0, 0, 0.18);
      z-index: 14;
   }

   .content-wrap {
      box-sizing: border-box;
   }

   .search-row,
   .filter-row,
   .content-wrap {
      position: relative;
      z-index: 1;
   }

   .search-row {
      display: flex;
      align-items: center;
      padding: 24rpx 24rpx 0;
      gap: 18rpx;
   }

   .search-box {
      flex: 1;
      height: 72rpx;
      background: #F9F9FB;
      border-radius: 16rpx;
      border: 1rpx solid #EEEEEE;
      padding: 0 22rpx;
      display: flex;
      align-items: center;
      gap: 14rpx;
      image {
         width: 32rpx;
         height: 32rpx;
      }
   }

   .search-input {
      flex: 1;
      height: 72rpx;
      font-weight: 400;
      font-size: 26rpx;
      color: #111111;
      background: transparent;
   }

   .map-entry {
      width: 70rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4rpx;
   }

   .map-icon {
      width: 40rpx;
      height: 40rpx;
      border-radius: 12rpx;
      background: rgba(255, 255, 255, 0.92);
      display: flex;
      align-items: center;
      justify-content: center;
      image {
         width: 100%;
         height: 100%;
      }
   }

   .map-text {
      font-size: 22rpx;
      line-height: 1;
      color: #6a7485;
   }

   .filter-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 22rpx 30rpx 20rpx;
      background: #ffffff;
   }

   .dropdown-panel {
      position: absolute;
      left: 0;
      right: 0;
      top: 184rpx;
      padding: 10rpx 0 18rpx;
      background: #ffffff;
      box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.08);
      z-index: 21;
   }

   .dropdown-option {
      height: 76rpx;
      padding: 0 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 28rpx;
      color: #555555;
      box-sizing: border-box;
   }

   .dropdown-option.active {
      color: #2f86f6;
      font-weight: 500;
   }

   .filter-item {
      display: flex;
      align-items: center;
      gap: 8rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #777777;
   }
	
   .filter-item image {
      width: 20rpx;
      height: 20rpx;
   }

   .filter-item.active {
      color: #222222;
   }

   .card-list {
      padding: 30rpx;
      box-sizing: border-box;
   }

   .map-panel {
      position: relative;
      height: calc(100vh - 184rpx);
   }

   .store-map {
      width: 100%;
      height: 100%;
   }

   .location-btn {
      position: absolute;
      right: 24rpx;
      bottom: 32rpx;
      width: 72rpx;
      height: 72rpx;
      border-radius: 16rpx;
      background: #ffffff;
      box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
   }

   .store-popup-mask {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.36);
      z-index: 998;
   }

   .store-popup {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      height: 80vh;
      background: #ffffff;
      border-radius: 28rpx 28rpx 0 0;
      z-index: 999;
      overflow: hidden;
      animation: popup-slide-up 0.25s ease-out;
   }

   .popup-scroll {
      position: relative;
      height: calc(80vh - 132rpx);
   }

   .popup-close {
      position: absolute;
      right: 24rpx;
      top: 24rpx;
      width: 56rpx;
      height: 56rpx;
      border-radius: 28rpx;
      background: rgba(255, 255, 255, 0.92);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
   }

   .popup-banner-swiper {
      width: 100%;
      height: 422rpx;
   }

   .popup-banner-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
   }

   .popup-body {
      padding: 24rpx 30rpx 0;
      box-sizing: border-box;
      padding-bottom: 32rpx;
   }

   .popup-gap {
      width: 100%;
      height: 20rpx;
      background: #f7f7f7;
   }

   .popup-title {
      display: block;
      font-size: 40rpx;
      font-weight: 600;
      line-height: 1.35;
      color: #222222;
   }

   .popup-hours {
      display: inline-block;
      margin-top: 18rpx;
      padding: 10rpx 16rpx;
      border-radius: 8rpx;
      background: #f5f7fb;
      font-size: 24rpx;
      color: #8c939f;
   }

   .popup-desc {
      display: block;
      margin-top: 24rpx;
      font-size: 28rpx;
      line-height: 1.7;
      color: #444444;
   }

   .popup-address-row {
      padding: 24rpx 0;
      border-top: 1rpx solid #ededed;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20rpx;
      margin-top: 20rpx;
   }

   .popup-address {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      font-size: 26rpx;
      color: #8c939f;
      image {
         width: 26rpx;
         height: 26rpx;
         margin-right: 8rpx;
      }
      text {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
      }
   }

   .popup-distance-wrap {
      flex-shrink: 0;
      height: 52rpx;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #555555;
      image {
         width: 48rpx;
         height: 48rpx;
         margin-right: 12rpx;
      }
   }

   .popup-section {
      padding: 28rpx 0;
      border-bottom: 1rpx solid #ededed;
   }

   .popup-section.no-border {
      border-bottom: none;
      padding-bottom: 10rpx;
   }

   .popup-section-title {
      display: block;
      margin-bottom: 20rpx;
      font-size: 34rpx;
      font-weight: 600;
      color: #222222;
   }

   .popup-section-text {
      display: block;
      font-size: 28rpx;
      line-height: 1.8;
      color: #4a4a4a;
   }

   .popup-footer {
      padding: 24rpx 30rpx calc(24rpx + env(safe-area-inset-bottom));
      display: flex;
      gap: 18rpx;
   }

   .popup-btn {
      flex: 1;
      height: 84rpx;
      border-radius: 42rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      font-weight: 600;
   }

   .popup-btn.ghost {
      border: 2rpx solid #23a7f6;
      color: #23a7f6;
      background: #eff9ff;
   }

   .popup-btn.primary {
      background: linear-gradient(90deg, #24b2ff 0%, #1d9ff3 100%);
      color: #ffffff;
   }

   @keyframes popup-slide-up {
      from {
         transform: translateY(100%);
         opacity: 0;
      }
      to {
         transform: translateY(0);
         opacity: 1;
      }
   }

   .point-card {
      display: flex;
      gap: 22rpx;
      padding: 30rpx;
      box-sizing: border-box;
      margin-bottom: 18rpx;
      border-radius: 24rpx;
      background: #F6F9FF;
      box-shadow: 0 10rpx 30rpx rgba(38, 44, 56, 0.05);
   }

   .thumb {
      position: relative;
      flex-shrink: 0;
      width: 140rpx;
      height: 140rpx;
      border-radius: 8rpx;
      overflow: hidden;
   }

   .thumb image {
      width: 100%;
   }

   .point-main {
      flex: 1;
      min-width: 0;
   }

   .point-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12rpx;
   }

   .point-name {
      flex: 1;
      line-height: 1.35;
      font-weight: 600;
      font-size: 30rpx;
      color: #222222;
   }

   .point-distance {
      flex-shrink: 0;
      font-size: 24rpx;
      line-height: 1.4;
      color: #8C939F;
   }

   .point-address {
      margin-top: 10rpx;
      display: flex;
      align-items: center;
      gap: 6rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #6C717A;
   }
	
   .point-address image {
      width: 24rpx;
      height: 24rpx;
      margin-right: 4rpx;
   }

   .point-time {
      display: block;
      margin-top: 20rpx;
      line-height: 1.5;
      font-weight: 400;
      font-size: 24rpx;
      color: #8C939F;
   }
</style>