商品详情弹出框

src/pages/goods/components/AddressPanel.vue

@@ -0,0 +1,127 @@
+<template>
+  <view class="address-panel">
+    <!-- 关闭按钮 -->
+    <text class="close icon-close" @tap="emit('close')"></text>
+    <!-- 标题 -->
+    <view class="title">配送至</view>
+    <!-- 内容 -->
+    <view class="content">
+      <view class="item">
+        <view class="user">李明 13824686868</view>
+        <view class="address">北京市顺义区后沙峪地区安平北街6号院</view>
+        <text class="icon icon-checked"></text>
+      </view>
+      <view class="item">
+        <view class="user">王东 13824686868</view>
+        <view class="address">北京市顺义区后沙峪地区安平北街6号院</view>
+        <text class="icon icon-ring"></text>
+      </view>
+      <view class="item">
+        <view class="user">张三 13824686868</view>
+        <view class="address">北京市朝阳区孙河安平北街6号院</view>
+        <text class="icon icon-ring"></text>
+      </view>
+    </view>
+    <view class="footer">
+      <view class="button primary"> 新建地址 </view>
+      <view v-if="false" class="button primary">确定</view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+// 子调父
+const emit = defineEmits<{
+  (event: 'close'): void
+}>()
+</script>
+
+<style lang="scss">
+.address-panel {
+  padding: 0 30rpx;
+  border-radius: 10rpx 10rpx 0 0;
+  position: relative;
+  background-color: #fff;
+}
+
+.title {
+  line-height: 1;
+  padding: 40rpx 0;
+  text-align: center;
+  font-size: 32rpx;
+  font-weight: normal;
+  border-bottom: 1rpx solid #ddd;
+  color: #444;
+}
+
+.close {
+  position: absolute;
+  right: 24rpx;
+  top: 24rpx;
+}
+
+.content {
+  min-height: 300rpx;
+  max-height: 540rpx;
+  overflow: auto;
+  padding: 20rpx;
+  .item {
+    padding: 30rpx 50rpx 30rpx 60rpx;
+    background-size: 40rpx;
+    background-repeat: no-repeat;
+    background-position: 0 center;
+    background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png);
+    position: relative;
+  }
+  .icon {
+    color: #999;
+    font-size: 40rpx;
+    transform: translateY(-50%);
+    position: absolute;
+    top: 50%;
+    right: 0;
+  }
+  .icon-checked {
+    color: #27ba9b;
+  }
+  .icon-ring {
+    color: #444;
+  }
+  .user {
+    font-size: 28rpx;
+    color: #444;
+    font-weight: 500;
+  }
+  .address {
+    font-size: 26rpx;
+    color: #666;
+  }
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  padding: 20rpx 0 40rpx;
+  font-size: 28rpx;
+  color: #444;
+
+  .button {
+    flex: 1;
+    height: 72rpx;
+    text-align: center;
+    line-height: 72rpx;
+    margin: 0 20rpx;
+    color: #fff;
+    border-radius: 72rpx;
+  }
+
+  .primary {
+    color: #fff;
+    background-color: #27ba9b;
+  }
+
+  .secondary {
+    background-color: #ffa868;
+  }
+}
+</style>

src/pages/goods/components/ServicePanel.vue

@@ -0,0 +1,96 @@
+<template>
+  <view class="service-panel">
+    <!-- 关闭按钮 -->
+    <text class="close icon-close" @tap="emit('close')"></text>
+    <!-- 标题 -->
+    <view class="title">服务说明</view>
+    <!-- 内容 -->
+    <view class="content">
+      <view class="item">
+        <view class="dt">无忧退货</view>
+        <view class="dd">
+          自收到商品之日起30天内，可在线申请无忧退货服务（食品等特殊商品除外）
+        </view>
+      </view>
+      <view class="item">
+        <view class="dt">快速退款</view>
+        <view class="dd">
+          收到退货包裹并确认无误后，将在48小时内办理退款，
+          退款将原路返回，不同银行处理时间不同，预计1-5个工作日到账
+        </view>
+      </view>
+      <view class="item">
+        <view class="dt">满88元免邮费</view>
+        <view class="dd">
+          单笔订单金额(不含运费)满88元可免邮费，不满88元， 单笔订单收取10元邮费
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+// 子调父
+const emit = defineEmits<{
+  (event: 'close'): void
+}>()
+</script>
+
+<style lang="scss">
+.service-panel {
+  padding: 0 30rpx;
+  border-radius: 10rpx 10rpx 0 0;
+  position: relative;
+  background-color: #fff;
+}
+
+.title {
+  line-height: 1;
+  padding: 40rpx 0;
+  text-align: center;
+  font-size: 32rpx;
+  font-weight: normal;
+  border-bottom: 1rpx solid #ddd;
+  color: #444;
+}
+
+.close {
+  position: absolute;
+  right: 24rpx;
+  top: 24rpx;
+}
+
+.content {
+  padding: 20rpx 20rpx 100rpx 20rpx;
+
+  .item {
+    margin-top: 20rpx;
+  }
+
+  .dt {
+    margin-bottom: 10rpx;
+    font-size: 28rpx;
+    color: #333;
+    font-weight: 500;
+    position: relative;
+
+    &::before {
+      content: '';
+      width: 10rpx;
+      height: 10rpx;
+      border-radius: 50%;
+      background-color: #eaeaea;
+      transform: translateY(-50%);
+      position: absolute;
+      top: 50%;
+      left: -20rpx;
+    }
+  }
+
+  .dd {
+    line-height: 1.6;
+    font-size: 26rpx;
+    color: #999;
+  }
+}
+</style>

src/pages/goods/goods.vue

@@ -32,11 +32,11 @@
           <text class="label">选择</text>
           <text class="text ellipsis"> 请选择商品规格 </text>
         </view>
-        <view class="item arrow">
+        <view @tap="openPopup('address')" class="item arrow">
           <text class="label">送至</text>
           <text class="text ellipsis"> 请选择收获地址 </text>
         </view>
-        <view class="item arrow">
+        <view @tap="openPopup('service')" class="item arrow">
           <text class="label">服务</text>
           <text class="text ellipsis"> 无忧退 快速退款 免费包邮 </text>
         </view>
@@ -107,6 +107,12 @@
       <view class="buynow"> 立即购买 </view>
     </view>
   </view>
+
+  <!-- uni-ui 弹出层 -->
+  <uni-popup ref="popup" type="bottom" background-color="#fff">
+    <AddressPanel v-if="popupName === 'address'" @close="popup?.close()" />
+    <ServicePanel v-if="popupName === 'service'" @close="popup?.close()" />
+  </uni-popup>
 </template>
 
 <script setup lang="ts">
@@ -114,6 +120,8 @@ import { onLoad } from '@dcloudio/uni-app'
 import { computed, ref } from 'vue'
 import type { GoodsResult } from '@/types/goods'
 import { getGoodsByIdAPI } from '@/services/goods'
+import AddressPanel from './components/AddressPanel.vue'
+import ServicePanel from './components/ServicePanel.vue'
 
 // 获取屏幕边界到安全区域距离
 const { safeAreaInsets } = uni.getSystemInfoSync()
@@ -145,6 +153,21 @@ const onTapImage = (url: string) => {
   })
 }
 
+// uni-ui 弹出层组件 ref
+const popup = ref<{
+  open: (type?: UniHelper.UniPopupType) => void
+  close: () => void
+}>()
+
+// 弹出层条件渲染
+const popupName = ref<'address' | 'service'>()
+const openPopup = (name: typeof popupName.value) => {
+  // 修改弹出层名称
+  popupName.value = name
+  // 打开弹出层
+  popup.value?.open()
+}
+
 // 页面加载
 onLoad(() => {
   getGoodsByIdData()