feat 添加店铺详情弹窗

pages/shop/all-goods/index.js

@@ -1,6 +1,9 @@
 import {
   fetchGoodsList
-} from '../../../services/good/fetchGoodsList';
+} from '~/services/good/fetchGoodsList';
+import {
+  fetchShop
+} from '~/services/shop/fetchShop';
 import Toast from 'tdesign-miniprogram/toast/index';
 
 const image = 'https://tdesign.gtimg.com/miniprogram/images/example2.png';
@@ -31,8 +34,11 @@ Page({
     loadMoreStatus: 0,
     loading: true,
     shopGuid: 0,
+    shopDetails: {},
 
-    value: 'category',
+    visible: false,
+
+    value: 'all',
     list: [{
         value: 'all',
         label: '全部',
@@ -173,6 +179,12 @@ Page({
       loading: true,
     });
     try {
+      // 获取店铺详情
+      const shopResult = await fetchShop(params);
+      this.setData({
+        shopDetails: shopResult
+      })
+
       const result = await fetchGoodsList(params);
       const code = 'Success';
       const data = result;
@@ -241,7 +253,7 @@ Page({
       .selectAll('.title')
       .boundingClientRect((rects) => {
         this.offsetTopList = rects.map((item) => item.top);
-        console.log(this.offsetTopList,'123123123');
+        console.log(this.offsetTopList, '123123123');
         this.setData({
           scrollTop: rects[sideBarIndex].top
         });
@@ -405,4 +417,16 @@ Page({
     }
   },
 
+  handlePopup(e) {
+    this.setData({
+      visible: true
+    }, );
+  },
+  onVisibleChange(e) {
+    this.setData({
+      visible: e.detail.visible,
+    });
+  },
+
+
 });

pages/shop/all-goods/index.json

@@ -13,6 +13,8 @@
     "t-side-bar": "tdesign-miniprogram/side-bar/side-bar",
     "t-side-bar-item": "tdesign-miniprogram/side-bar-item/side-bar-item",
     "t-grid": "tdesign-miniprogram/grid/grid",
-    "t-grid-item": "tdesign-miniprogram/grid-item/grid-item"
+    "t-grid-item": "tdesign-miniprogram/grid-item/grid-item",
+    "t-back-top": "tdesign-miniprogram/back-top/back-top",
+    "t-popup": "tdesign-miniprogram/popup/popup"
   }
 }

pages/shop/all-goods/index.wxml

@@ -1,15 +1,15 @@
 <view class="shop-detail-page">
 
   <!-- 店铺信息 -->
-  <view style="padding: 10px;" class="shop-big-box" wx:if="{{ value == 'all' }}">
+  <view style="padding: 10px;" class="shop-big-box" wx:if="{{ value == 'all' }}" bindtap="handlePopup">
     <view style="padding: 10px;" class="shop-left-box">
       <view class="shop-left-img-box">
-        <image alt="" src="https://tool.aerwen.net/prod-api/Uploads/uploads/20230719/35BB64FE6D80E253.jpg" class="shop-left-img" mode="aspectFill" />
+        <image alt="" src="{{shopDetails.shopLogo}}" class="shop-left-img" mode="aspectFit" />
       </view>
       <view>
-        <view class="shop-name">三星官方旗舰店</view>
-        <view class="shop-sold">已售：244万</view>
-        <view class="shop-intro">三星手机官方旗舰店</view>
+        <view class="shop-name">{{shopDetails.shopName}}</view>
+        <view class="shop-sold">已售：{{shopDetails.shopSalesOrderCount}}</view>
+        <view class="shop-intro">{{shopDetails.shopIntro}}</view>
       </view>
     </view>
     <view class="shop-right-box">
@@ -75,4 +75,22 @@
   </t-tab-bar-item>
 </t-tab-bar>
 
-<t-toast id="t-toast" />
+<t-toast id="t-toast" />
+<t-back-top t-class="back-top" theme="round" text="顶部" bind:to-top="onToTop"></t-back-top>
+<t-popup visible="{{visible}}" bind:visible-change="onVisibleChange" placement="bottom">
+  <view class="shop-popup-box">
+    <view class="shop-popup-title">店铺详情</view>
+    <view class="shop-popup-content-box center" >
+      <view class="shop-popup-img-box">
+        <image class="shop-popup-img" src="{{shopDetails.shopLogo}}" alt="" mode="aspectFit" />
+      </view>
+      <view class="shop-popup-name">{{shopDetails.shopName}}</view>
+      <view class="shop-popup-sold-num">已售：{{shopDetails.shopSalesOrderCount}}</view>
+    </view>
+    <view class="shop-popup-content-box">
+      <view class="shop-popup-intro-title">店铺简介</view>
+      <view class="shop-popup-intro">{{shopDetails.shopIntro}}</view>
+    </view>
+  </view>
+
+</t-popup>

pages/shop/all-goods/index.wxss

@@ -112,4 +112,71 @@ page .round-image {
 .side-bar-wrapper .image {
   width: 96rpx;
   height: 96rpx;
+}
+
+.back-top{
+  bottom: 15% !important;
+}
+
+/* 店铺详情弹出层 */
+.shop-popup-box{
+  height: 800rpx;
+  padding: 50rpx;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  background-color: #f6f6f6;
+}
+
+.shop-popup-title{
+  font-size: 40rpx;
+  font-weight: bold;
+  letter-spacing: 5rpx;
+  margin-bottom: 80rpx;
+}
+
+.shop-popup-content-box{
+  width: 90%;
+  background-color: white;
+  padding: 35rpx;
+  border-radius: 40rpx;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 30rpx;
+}
+
+.center{
+  align-items: center;
+}
+
+.shop-popup-img-box{
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: 50%;
+  overflow: hidden;
+  margin-top: -80rpx;
+  background-color: #fff;
+}
+
+.shop-popup-img{
+  width: 100%;
+  height: 100%;
+}
+
+.shop-popup-name{
+  font-size: 35rpx;
+  font-weight: bold;
+  margin: 30rpx 0;
+}
+
+.shop-popup-sold-num{
+  font-size: 28rpx;
+}
+
+.shop-popup-intro-title{
+  font-size: 30rpx;
+  font-weight: bold;
+  letter-spacing: 2rpx;
+  margin-bottom: 10rpx;
 }

services/shop/fetchShop.js

@@ -0,0 +1,22 @@
+import {
+  request
+} from '../_utils/request';
+
+/** 获取店铺详情 */
+export function fetchShop(parm) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: `ShopApi/getShopDetails`,
+      data: parm,
+      method: 'GET',
+      success: function (res) {
+        let data = res.data;
+      
+        resolve(data);
+      },
+      fail: function (error) {
+        reject(error);
+      }
+    });
+  });
+}