From 0b0844aeb44dd42a655384aa921937e22bb0252e Mon Sep 17 00:00:00 2001
From: woody <woody@163>
Date: Tue, 3 Jun 2025 17:37:52 +0800
Subject: [PATCH] =?UTF-8?q?feat(details):=20=E5=95=86=E5=93=81=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E8=A7=84=E6=A0=BC=E5=B1=95=E7=A4=BA=E6=94=B9=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index/index.bak.vue     | 1012 +++++++++++++++++++++++++++++++++
 pages/specialArea/details.vue |  448 ++++++++-------
 2 files changed, 1243 insertions(+), 217 deletions(-)
 create mode 100644 pages/index/index.bak.vue

diff --git a/pages/index/index.bak.vue b/pages/index/index.bak.vue
new file mode 100644
index 0000000..a9df53f
--- /dev/null
+++ b/pages/index/index.bak.vue
@@ -0,0 +1,1012 @@
+<template>
+  <view :class="userInfo.skin ? 'content1' : 'content'">
+    <view class="content_a">
+      <!-- 商品专区入口 先别删  -->
+      <!-- <view @tap="goSpecialArea">会员专区</view> -->
+      <view :class="userInfo.skin ? 'index-top1' : 'index-top'"> </view>
+
+      <view class="banner" v-if="isEmpty(goodsList.advertBannerList) == false">
+        <view class="uni-margin-wrap">
+          <swiper
+            class="swiper"
+            circular
+            :indicator-dots="indicatorDots"
+            :autoplay="autoplay"
+            :interval="interval"
+            :duration="duration"
+          >
+            <swiper-item
+              v-for="(item, index) in goodsList.advertBannerList"
+              :key="index"
+              @click="bannerTap(item.link)"
+            >
+              <view class="swiper-item uni-bg-red">
+                <image :src="item.picture"></image>
+              </view>
+            </swiper-item>
+          </swiper>
+        </view>
+      </view>
+      <view class="goods-sort">
+        <view class="goods-flexs">
+          <view v-for="(item, index) in recommendSpecialAreaList" :key="index">
+            <view
+              class="goods-view"
+              @click="navTap(item)"
+              v-if="item.waresList && (index < 8 || moreFlag == true)"
+            >
+              <area-product-list
+                :list="item.waresList"
+                :title="item.specialAreaName"
+                size="small"
+              ></area-product-list>
+              <!-- <view class="goods-top">
+                <view class="title">{{ item.specialAreaName }}</view>
+              </view>
+              <template v-if="item.waresList">
+                <view class="goods-cen">
+                  <view
+                    class="goods-list"
+                    v-for="(items, indexs) in item.waresList"
+                    :key="indexs"
+                  >
+                    <view class="goods-content">
+                      <view class="goods">
+                        <image :src="items.cover1"></image>
+                      </view>
+                    </view>
+                  </view>
+                </view>
+              </template> -->
+            </view>
+          </view>
+        </view>
+        <view v-if="isEmpty(goodsList.recommendSpecialAreaList) == false">
+          <view
+            class="more"
+            @click="more"
+            v-if="!moreFlag && goodsList.recommendSpecialAreaList.length > 6"
+          >
+            {{ '查看更多' }}
+          </view>
+        </view>
+        <view class="goods_content">
+          <view
+            class="goods-center-lists"
+            v-for="item in goodsList.waresVoList"
+            :key="item.waresId"
+            @click="goDetails(item)"
+          >
+            <view
+              class="fly"
+              v-show="item.preSaleStatus == 3 || item.isSale == 1"
+            ></view>
+            <view class="goods-flex-s">
+              <view class="goods-img">
+                <image :src="item.cover1"></image>
+              </view>
+              <view class="padding_s goods-info">
+                <view class="goods-name">{{ item.waresName }}</view>
+                <view class="goods-sales-wrapper">
+                  <!-- <view class="goods-sales">累计销量{{ formatSales(item.sales) }}</view> -->
+                  <view
+                    class="goods-price"
+                    v-if="item.specialArea == 31 && userInfo.isMakerSpace == 1"
+                  >
+                    <span v-if="priceSymbolVisible" class="price-symbol">
+                      {{ priceSymbol }}
+                    </span>
+                    <span>{{ formatCurrency(item.vipPrice) }}</span>
+                  </view>
+                  <view class="goods-price" v-if="item.specialArea != 31">
+                    <span v-if="priceSymbolVisible" class="price-symbol">
+                      {{ priceSymbol }}
+                    </span>
+                    <span>{{ formatCurrency(item.waresPrice) }}</span>
+                  </view>
+                  <view
+                    class="goods-price"
+                    v-if="item.specialArea == 31 && userInfo.isMakerSpace == 0"
+                  >
+                    <span v-if="priceSymbolVisible" class="price-symbol">
+                      {{ priceSymbol }}
+                    </span>
+                    <span>{{ formatCurrency(item.waresPrice) }}</span>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <cl-tabbar :current="0"></cl-tabbar>
+      <div>
+        <!-- 公告弹窗 -->
+        <notice-popup
+          @getTree="getTree"
+          :userInfo="userInfo"
+          ref="child"
+          :publishLocationIndex="10"
+        ></notice-popup>
+        <!-- 植树弹窗
+        <getTree ref="tree"></getTree>
+         -->
+        <!-- 站内信弹窗 -->
+        <znNewsPopup
+          ref="child2"
+          @childMethodTrigger="callChildMethod"
+        ></znNewsPopup>
+        <!-- 直推排行弹窗
+        <directrank-popup
+          @callznMethodTrigger="callznMethod"
+        ></directrank-popup>
+         -->
+
+        <u-modal
+          :show="promptFlag"
+          title="提示"
+          :closeOnClickOverlay="true"
+          showCancelButton
+          :confirmText="confirmText"
+          confirmColor="#DE3932"
+          @close="promptFlag = false"
+          @cancel="promptFlag = false"
+          @confirm="toDel"
+          :content="promptMsg"
+        ></u-modal>
+      </div>
+    </view>
+  </view>
+</template>
+
+<script>
+// import titleLine from '@/components/titleLine.vue'
+import * as api from '@/config/login.js'
+import * as apis from '@/config/index.js'
+import * as ban from '@/config/balance.js'
+import { getAreaGoods } from '@/config/special-area'
+import clTabbar from '@/components/cl-tabbar.vue'
+import noticePopup from '@/components/noticePopup.vue'
+import getTree from '@/components/getTree.vue'
+import znNewsPopup from '@/components/znNewsPopup.vue'
+import areaProductList from '@/components/area-product-list/index.vue'
+import { formatCurrency } from '@/util/index.js'
+import { mapGetters } from 'vuex'
+export default {
+  components: {
+    noticePopup,
+    znNewsPopup,
+    'cl-tabbar': clTabbar,
+    getTree,
+    areaProductList,
+  },
+  filters: {
+    seles(value) {
+      if (value > 999) {
+        return 999 + '+'
+      } else {
+        return value
+      }
+    },
+  },
+  data() {
+    return {
+      promptFlag: false,
+      promptMsg: '',
+      confirmText: '',
+      userInfo: uni.getStorageSync('User'),
+      moreFlag: false,
+      index: 0,
+      indicatorDots: true,
+      interval: 5000,
+      autoplay: true,
+      duration: 500,
+      goodsList: [],
+      recommendSpecialAreaList: [],
+      zoneList: [
+        {
+          label: '注册专区',
+          value: 1,
+          name: 'regiest',
+          children: [
+            {
+              label: '自营专区',
+              value: 1,
+              name: 'regiestArea',
+              isShow: true,
+            },
+            {
+              label: '乐学易考',
+              value: 24,
+              name: 'ezLearnReg',
+              isShow: true,
+            },
+          ],
+        },
+        {
+          label: '升级专区',
+          value: 2,
+          name: 'upgrade',
+          children: [
+            {
+              label: '自营专区',
+              value: 2,
+              name: 'upgradeArea',
+              isShow: true,
+            },
+            {
+              label: '海粉专区',
+              value: 27,
+              name: 'haiFunUpd',
+              isShow: true,
+            },
+            {
+              label: '乐学易考',
+              value: 25,
+              name: 'ezLearnUp',
+              isShow: true,
+            },
+          ],
+        },
+
+        {
+          label: '复购专区',
+          value: 3,
+          name: 'repurchase',
+          children: [
+            {
+              label: '自营专区',
+              value: 3,
+              name: 'self',
+              isShow: true,
+            },
+            {
+              label: '乐学易考',
+              value: 26,
+              name: 'ezLearnRep',
+              isShow: true,
+            },
+            {
+              label: '免费注册',
+              value: 21,
+              name: 'haiFans',
+              isShow: true,
+            },
+
+            {
+              label: '复购合作',
+              value: 22,
+              name: 'cooperation',
+              isShow: true,
+            },
+            {
+              label: '直播专区',
+              value: 14,
+              name: 'live',
+              isShow: true,
+            },
+            {
+              label: '工具流',
+              value: 12,
+              name: 'gongju',
+              isShow: true,
+            },
+          ],
+        },
+        {
+          label: '福利专区',
+          value: 13,
+          children: [],
+          name: 'welfare',
+        },
+        {
+          label: '积分专区',
+          value: 11,
+          children: [],
+          name: 'integral',
+        },
+        {
+          label: '重消专区',
+          value: 10,
+          children: [],
+          name: 'rescission',
+        },
+        {
+          label: '专供专区',
+          value: 31,
+          children: [],
+          name: 'wolesaleArea',
+        },
+        {
+          label: '续约专区',
+          value: 30,
+          children: [],
+          name: 'renewalArea',
+        },
+        {
+          label: '创客空间专区',
+          value: 28,
+          children: [],
+          name: 'makerArea',
+        },
+        {
+          label: '架构管理',
+          value: 6,
+          name: 'frame',
+          children: [
+            {
+              label: '安置架构',
+              value: 6,
+              name: 'architecture',
+              isShow: true,
+            },
+            {
+              label: '推荐架构',
+              value: 7,
+              name: 'recommend',
+              isShow: true,
+            },
+          ],
+        },
+        {
+          label: '分享专区',
+          value: 7,
+          name: 'share',
+          children: [
+            {
+              label: '海粉分享',
+              value: 7,
+              name: 'hiFans',
+              isShow: true,
+            },
+            {
+              label: '免费注册',
+              value: 21,
+              name: 'haiFans',
+              isShow: true,
+            },
+          ],
+        },
+        {
+          label: '创客礼包',
+          value: 18,
+          isShow: true,
+          children: [
+            {
+              label: '创客礼包',
+              value: 18,
+              isShow: true,
+              children: [],
+            },
+            {
+              label: '赋能礼包',
+              value: 19,
+              isShow: true,
+              children: [],
+            },
+          ],
+        },
+      ],
+    }
+  },
+  computed: {
+    ...mapGetters(['priceSymbol', 'priceSymbolVisible']),
+  },
+  onLoad() {
+    if (
+      uni.getStorageSync('showInfo') == undefined ||
+      uni.getStorageSync('showInfo') == 0
+    ) {
+    }
+    this.getGoodsInfo()
+    this.getAreaGoods()
+    // this.getLanguage();
+    this.getService()
+  },
+  onShow() {
+    this.$store.dispatch('getCarLength')
+  },
+  onPullDownRefresh() {
+    let that = this
+    setTimeout(() => {
+      that.getGoodsInfo()
+      uni.stopPullDownRefresh() //停止刷新
+    }, 1000)
+  },
+  methods: {
+    formatCurrency,
+    formatSales(value) {
+      if (value > 999) {
+        return '999+'
+      } else {
+        return value
+      }
+    },
+
+    goAreaUrl() {
+      ban.agreementName().then(res => {
+        if (res.data == 0) {
+          uni.navigateTo({
+            url:
+              '/pages/specialArea/list?label=续约专区' +
+              '&specialArea=30' +
+              '&children=[]',
+          })
+        } else {
+          uni.showModal({
+            title: '提示',
+            content: '请先进行实名认证',
+            success: res => {
+              if (res.confirm) {
+                uni.navigateTo({
+                  url: '/pages/selfService/realName/realName',
+                })
+              }
+            },
+          })
+        }
+      })
+    },
+    getAreaGoods() {
+      getAreaGoods().then(res => {
+        this.recommendSpecialAreaList = res.data?.recommendSpecialAreaList || []
+      })
+    },
+    toDel() {
+      this.promptFlag = false
+      if (this.jumpPage == 1) {
+        uni.navigateTo({
+          url: '/pages/selfService/realName/realName',
+        })
+      } else {
+        // uni.navigateTo({
+        //   url:
+        //     '/pages/specialArea/list?label=续约专区' +
+        //     '&specialArea=30' +
+        //     '&children=[]',
+        // })
+      }
+    },
+    getService() {
+      api.agreement_expire().then(res => {
+        if (res.code == 200) {
+          this.promptFlag = res.data.promptFlag ? false : true
+          this.promptMsg = res.data.promptMsg
+          this.jumpPage = res.data.jumpPage
+          // confirmText
+          if (this.jumpPage == 1) {
+            this.confirmText = '实名认证'
+          } else {
+            this.confirmText = '确定'
+            // this.confirmText = '立即续约'
+          }
+        }
+      })
+    },
+    callChildMethod() {
+      this.$refs.child.getUserTc()
+    },
+    callznMethod() {
+      this.$refs.child2.getUserTc2()
+    },
+    // 植树弹层
+    getTree() {
+      this.$refs.tree.getData()
+    },
+    isEmpty(v) {
+      switch (typeof v) {
+        case 'undefined':
+          return true
+        case 'string':
+          if (v.replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g, '').length == 0)
+            return true
+          break
+        case 'boolean':
+          if (!v) return true
+          break
+        case 'number':
+          if (0 === v || isNaN(v)) return true
+          break
+        case 'object':
+          if (null === v || v.length === 0) return true
+          for (var i in v) {
+            return false
+          }
+          return true
+      }
+      return false
+    },
+    more() {
+      this.moreFlag = true
+    },
+    openKf() {
+      let userInfo = uni.getStorageSync('User')
+      let src =
+        'https://im1c5366d.7x24cc.com/phone_webChat.html?accountId=N000000033467&chatId=302384fb-eda1-436e-a5e9-c03a2dbd6e97&visitorId=' +
+        userInfo.memberCode +
+        '&nickName=' +
+        userInfo.memberCode
+      window.open(src, '_blank')
+    },
+    bannerTap(urls) {
+      if (urls) {
+        window.location.href = urls
+      }
+    },
+    getGoodsInfo() {
+      apis.userIndex().then(res => {
+        this.goodsList = res.data
+      })
+    },
+
+    goUrl(item) {
+      ban.agreementName().then(res => {
+        if (res.data == 0) {
+          uni.navigateTo({
+            url:
+              '/pages/specialArea/details?waresCode=' +
+              item.waresCode +
+              '&specialArea=' +
+              item.specialArea,
+          })
+        } else {
+          uni.showModal({
+            title: '提示',
+            content: '请先进行实名认证',
+            success: res => {
+              if (res.confirm) {
+                uni.navigateTo({
+                  url: '/pages/selfService/realName/realName',
+                })
+              }
+            },
+          })
+        }
+      })
+    },
+    goDetails(item) {
+      if (item.preSaleStatus == 3 || item.isSale == 1) {
+      } else {
+        if (item.specialArea == 30) {
+          this.goUrl(item)
+        } else {
+          uni.navigateTo({
+            url:
+              '/pages/specialArea/details?waresCode=' +
+              item.waresCode +
+              '&specialArea=' +
+              item.specialArea,
+          })
+        }
+      }
+    },
+    navTap(item) {
+      let tapx = -1
+      this.zoneList.forEach((items, index) => {
+        if (items.value == item.specialArea) {
+          tapx = index
+        }
+      })
+      if (tapx == -1) {
+        this.zoneList.forEach((items, index) => {
+          items.children.forEach(ctem => {
+            if (ctem.value == item.specialArea) {
+              if (item.specialArea == 21) {
+                uni.navigateTo({
+                  url:
+                    '/pages/specialArea/haIndex?label=' +
+                    item.specialAreaName +
+                    '&specialArea=21&diff=1',
+                })
+              } else {
+                uni.navigateTo({
+                  url:
+                    '/pages/specialArea/list?label=' +
+                    items.label +
+                    '&specialArea=' +
+                    items.value +
+                    '&childArea=' +
+                    item.specialArea +
+                    '&children=' +
+                    JSON.stringify(items.children) +
+                    '&diff=1',
+                })
+              }
+            }
+          })
+        })
+      } else {
+        if (item.specialArea == 30) {
+          this.goAreaUrl()
+        } else {
+          uni.navigateTo({
+            url:
+              '/pages/specialArea/list?label=' +
+              item.specialAreaName +
+              '&specialArea=' +
+              item.specialArea +
+              '&children=' +
+              JSON.stringify(this.zoneList[tapx].children) +
+              '&diff=1',
+          })
+        }
+      }
+    },
+    goSpecialArea() {
+      uni.navigateTo({
+        url: '/pages/index/specialArea/index',
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  // background: url('~@/static/images/fBgd.jpg') no-repeat;
+  background-size: 100% 100%;
+  height: 100vh;
+  .content_a {
+    overflow: auto;
+    height: 100%;
+  }
+}
+.content1 {
+  background: url('~@/static/images/fBgd.jpg') no-repeat;
+  background-size: 100% 100%;
+  height: 100vh;
+  .content_a {
+    overflow: auto;
+    height: 100%;
+  }
+}
+.more {
+  color: #333;
+  background-color: #fff;
+  height: 80rpx;
+  line-height: 80rpx;
+  text-align: center;
+  border-radius: 30rpx;
+  width: 690rpx;
+  margin: 0 auto 30rpx auto;
+}
+
+:v-deep uni-swiper {
+  height: 300rpx;
+}
+
+header {
+  display: none !important;
+}
+
+.padding_s {
+  padding: 0 20rpx;
+}
+
+.goods-name {
+  width: 100%;
+  margin-top: 10rpx;
+  color: #333;
+  font-size: 26rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  word-break: break-word;
+  line-height: 1.4;
+  // min-height: calc(26rpx * 1.4 * 2);
+}
+
+.goods-center-lists {
+  width: calc(100% - 40rpx); // height: 450rpx;
+  background: #ffffff;
+  margin-left: 20rpx;
+  margin-right: 20rpx;
+  border-radius: 15rpx;
+  border-bottom: 20rpx;
+  margin-bottom: 20rpx;
+  // padding-bottom: 30rpx;
+  position: relative;
+  .goods-flex-s {
+    display: flex;
+    padding: 20rpx;
+    .goods-img {
+      flex-shrink: 0;
+      width: 236rpx;
+      height: 236rpx;
+      image {
+        width: 100%;
+        height: 100%;
+        border-radius: 10rpx;
+      }
+    }
+  }
+  .goods-info {
+    flex: 1;
+    padding-left: 20rpx;
+    width: 0;
+    display: flex;
+    flex-direction: column;
+    .goods-sales-wrapper {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      justify-content: flex-end;
+
+      .goods-sales {
+        font-size: 24rpx;
+        color: #999;
+        margin-top: 10rpx;
+      }
+      .goods-price {
+        color: #f82c1a;
+        margin-top: 10rpx;
+        font-style: 22rpx;
+        margin-left: -7rpx;
+        .price-symbol {
+          font-size: 22rpx;
+        }
+        span {
+          font-size: 36rpx;
+          font-weight: bold;
+        }
+      }
+      .goods-price1 {
+        color: #999;
+        font-size: 10px;
+        margin-left: -7rpx;
+        span {
+          font-size: 10rpx;
+        }
+      }
+    }
+  }
+}
+
+.goods-sort {
+  padding-bottom: 130rpx;
+}
+
+.swiper-s {
+  height: 495rpx;
+}
+
+.goods-lists {
+  width: 340rpx;
+  margin-bottom: 0rpx;
+  margin-left: 20rpx;
+}
+
+.goods_content {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  flex-wrap: wrap;
+}
+
+.price {
+  height: 40rpx;
+  line-height: 40rpx;
+  background: #fde9e9;
+  border-radius: 14rpx;
+  color: #e7141a;
+  font-size: 22rpx;
+  text-align: center;
+  width: max-content;
+  padding: 0 10rpx;
+  margin: 0 auto;
+}
+
+.goods-cen {
+  display: flex;
+  margin-top: 20rpx;
+  gap: 20rpx;
+  // justify-content: space-between;
+}
+
+.goods-list {
+  // display: flex;
+  width: 33%;
+}
+
+.goods-content {
+  width: 100%;
+  height: 200rpx;
+  text-align: center;
+
+  .goods {
+    image {
+      width: 100%;
+      height: 200rpx;
+    }
+  }
+}
+
+.goods-flexs {
+  .goods-view {
+    position: relative;
+    // width: 302rpx; // height: 180rpx;
+    // margin-left: 20rpx;
+    // background: #ffffff;
+    border-radius: 15rpx;
+    padding: 0 20rpx;
+    margin-bottom: 20rpx;
+
+    .goods-top {
+      z-index: 1;
+      position: relative;
+      display: flex;
+
+      .title {
+        color: #333;
+        font-size: 32rpx;
+        font-weight: bold;
+      }
+
+      .lables {
+        height: 28rpx;
+        background: #f82c1a;
+        border-radius: 10rpx;
+        line-height: 24rpx;
+        font-size: 22rpx;
+        padding: 5rpx 15rpx;
+        color: #fff;
+        max-width: 100rpx;
+        margin: 5rpx 0 0 10rpx;
+      }
+    }
+  }
+
+  .lefts {
+    margin-left: 15rpx;
+  }
+}
+
+:v-deep .swiper-s .swiper-items uni-image {
+  height: 495rpx;
+}
+
+.swiper-items {
+  // height: 495rpx;
+  // width: 340rpx;
+  border-radius: 12rpx;
+
+  image {
+    border-radius: 12rpx;
+    height: 450rpx;
+    width: 340rpx;
+  }
+}
+
+.swiper-item {
+  height: 300rpx;
+  text-align: center;
+  padding: 0 20rpx;
+  width: 100%;
+  box-sizing: border-box;
+  image {
+    border-radius: 24rpx;
+    height: 300rpx;
+    width: 100%;
+  }
+}
+
+.banner {
+  padding: 30rpx 0 0 0;
+  text-align: center;
+  width: 100%;
+  margin-bottom: 20rpx;
+}
+
+.changeLanguages {
+  position: absolute;
+  right: 0rpx;
+  top: 45rpx;
+}
+
+.select-text {
+  display: flex;
+  margin-right: 20px;
+}
+
+.selIcon {
+  width: 40rpx;
+  height: 40rpx;
+}
+
+.paswwrod_btn {
+  color: #666666;
+  font-size: 26rpx;
+  margin: 40rpx auto;
+  text-align: center;
+}
+
+page {
+  background-color: #f2f2f2;
+}
+
+.index-left {
+  font-weight: bold;
+
+  .english {
+    font-size: 24rpx;
+    color: #333;
+  }
+
+  .text {
+    font-size: 30rpx;
+    color: #333;
+    margin-top: 2rpx;
+    letter-spacing: 16rpx;
+  }
+}
+
+.index-top {
+  // background: url('~@/static/images/tBgd.jpg') no-repeat;
+  background-size: 100% 100%;
+  // padding: 30rpx 20rpx; // height: 100rpx;
+  background-color: #fff;
+  display: flex;
+  justify-content: space-between;
+  position: fixed;
+  z-index: 10;
+  width: 100%;
+  height: 20rpx;
+  .index_t {
+    padding: 30rpx 20rpx;
+  }
+}
+.index-top1 {
+  background: url('~@/static/images/tBgd.jpg') no-repeat;
+  background-size: 100% 100%;
+  // padding: 30rpx 20rpx; // height: 100rpx;
+  // background-color: #fff;
+  display: flex;
+  justify-content: space-between;
+  position: fixed;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  .index_t {
+    padding: 30rpx 20rpx;
+  }
+}
+
+.index-right {
+  display: flex;
+}
+
+.kf_A {
+  position: fixed;
+  background: rgba(256, 256, 256, 0.8);
+  width: 62px;
+  // height: 60px;
+  z-index: 10;
+  right: 40rpx;
+  top: 11%;
+  border-radius: 10px;
+  text-align: center;
+  padding: 20rpx 0;
+}
+
+.kf {
+  image {
+    width: 48rpx;
+    height: 48rpx;
+    margin-bottom: 10rpx;
+  }
+
+  font-size: 10px;
+  color: #333333;
+}
+.fly {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  background: #eee;
+  opacity: 0.5;
+  z-index: 1;
+}
+</style>
diff --git a/pages/specialArea/details.vue b/pages/specialArea/details.vue
index fbb39eb..452f45d 100644
--- a/pages/specialArea/details.vue
+++ b/pages/specialArea/details.vue
@@ -1,6 +1,6 @@
 <template>
   <view class="content">
-    <backIcon></backIcon>
+    <!-- <backIcon></backIcon> -->
     <!-- 轮播图 -->
     <u-swiper
       :list="bannerImgList"
@@ -14,8 +14,14 @@
       <view v-if="goodDetail.preSaleStatus == 1">
         <view class="sTop">
           <view class="sTop_l">
+            <view class="disFlex">
+              <view class="bao" v-if="goodDetail.prefixLabelTarget"
+                >[{{ goodDetail.prefixLabelTarget.label }}]
+              </view>
+              <view class="t_hei">{{ goodDetail.waresName }}</view>
+            </view>
             <view class="f1">
-              {{ goodDetail.goodsPrice | toThousandthAndKeepDecimal }}
+              {{ formatPriceToThousandth(goodDetail.goodsPrice) }}
             </view>
             <view class="disFlex1">
               <img src="@/static/images/clock.png" alt="" />
@@ -24,7 +30,7 @@
           </view>
           <view class="sTop_l">
             <view class="f2" v-if="specialArea != 18 && specialArea != 13"
-              >业绩:{{ goodDetail.goodsAchive | toThousandthAndKeepDecimal }}
+              >业绩:{{ formatPriceToThousandth(goodDetail.goodsAchive) }}
             </view>
             <view class="f3">
               <view>{{ '剩余时间' }}:{{ countDown }}</view>
@@ -33,25 +39,23 @@
           </view>
         </view>
         <view class="kuang1">
-          <!-- <view class="disFlex" v-show="specialArea == 31">
-            <view class="t_hui">统一零售价:{{ goodDetail.retailPrice | numberToCurrency | isLocal  }}</view>
-          </view> -->
           <view class="disFlex">
-            <view class="t_hui">销量:{{ goodDetail.sales | seles }}</view>
-          </view>
-          <view class="disFlex">
-            <view class="bao" v-if="goodDetail.prefixLabelTarget"
-              >[{{ goodDetail.prefixLabelTarget.label }}]
-            </view>
-            <view class="t_hei">{{ goodDetail.waresName }}</view>
+            <view class="t_hui">销量:{{ formatSales(goodDetail.sales) }}</view>
           </view>
         </view>
       </view>
 
       <view class="kuang" v-else>
+        <view class="disFlex">
+          <view class="bao" v-if="goodDetail.prefixLabelTarget"
+            >[{{ goodDetail.prefixLabelTarget.label }}]
+          </view>
+          <view class="t_hei">{{ goodDetail.waresName }}</view>
+        </view>
+        <view class="t_hui1">销量:{{ formatSales(goodDetail.sales) }}</view>
         <view class="disFlex">
           <view class="t_red">{{
-            goodDetail.goodsPrice | numberToCurrency | isLocal
+            formatNumberToCurrency(goodDetail.goodsPrice, isLocalCurrency())
           }}</view>
           <view
             class="t_hui"
@@ -61,42 +65,95 @@
               specialArea != 31 &&
               specialArea != 10
             "
-            >业绩:{{ goodDetail.goodsAchive | numberToCurrency }}</view
+            >业绩:{{ formatNumberToCurrency(goodDetail.goodsAchive) }}</view
           >
           <view class="t_hui" v-if="specialArea == 10"
-            >积分可抵扣:{{ goodDetail.deductMoney | numberToCurrency }}</view
+            >积分可抵扣:{{
+              formatNumberToCurrency(goodDetail.deductMoney)
+            }}</view
           >
           <view
             class="t_hui"
             v-if="goodDetail.specialArea == 31 && user.isMakerSpace == 0"
-            >业绩:{{ goodDetail.goodsAchive | numberToCurrency }}</view
+            >业绩:{{ formatNumberToCurrency(goodDetail.goodsAchive) }}</view
           >
           <view class="t_hui" v-if="specialArea == 13"
-            >BV:{{ goodDetail.goodsAssAchive | numberToCurrency }}</view
+            >BV:{{ formatNumberToCurrency(goodDetail.goodsAssAchive) }}</view
           >
         </view>
-        <view class="t_hui1">销量:{{ goodDetail.sales | seles }}</view>
-        <!-- <view class="disFlex" v-show="specialArea == 31">
-            <view class="t_hui1">统一零售价:{{ goodDetail.retailPrice | numberToCurrency | isLocal  }}</view>
-          </view> -->
-        <view class="disFlex">
-          <view class="bao" v-if="goodDetail.prefixLabelTarget"
-            >[{{ goodDetail.prefixLabelTarget.label }}]
-          </view>
-          <view class="t_hei">{{ goodDetail.waresName }}</view>
-        </view>
       </view>
-      <view class="kuang t_hei">
+      <!-- <view class="kuang t_hei">
         {{ '急速下单即享优先发货' }}
-      </view>
+      </view> -->
       <view class="kuang">
-        <view class="heng" @tap="selSku = true">
-          <view class="disFlex">
-            <view class="label">{{ '规格' }}</view>
-            <view class="label1">{{ '已选' }}: {{ skuString }}</view>
+        <view class="sku-selection-container">
+          <text class="sku-selection-title">规格：</text>
+          <!-- Moved from popup body: SKU details -->
+          <view class="sku-options-list">
+            <view
+              v-for="(item, groupIndex) in goodDetail.productParams"
+              :key="item.productId"
+              class="sku-product-group"
+            >
+              <view class="sku-product-name"
+                >{{ item.productName }} 应选 {{ item.quantity }} 已选
+                <text
+                  style="margin-left: 10rpx"
+                  :class="{
+                    'warning-text':
+                      getCurrentlySelectedCount(item) < item.quantity,
+                  }"
+                  >{{ getCurrentlySelectedCount(item) }}
+                </text>
+              </view>
+              <u-row gutter="16" style="flex-wrap: wrap">
+                <u-col
+                  :span="item.waresItemsParamsList.length === 1 ? 12 : 6"
+                  v-for="(ctem, cndex) in item.waresItemsParamsList"
+                  :key="ctem.pkSkuId"
+                  class="sku-col-item"
+                >
+                  <view class="sku-item">
+                    <img :src="ctem.specCover" alt="" class="sku-item-cover" />
+                    <view class="sku-item-content-right">
+                      <view class="sku-item-name">{{ ctem.specsName }}</view>
+                      <u-number-box
+                        :min="0"
+                        :max="ctem.maxNum"
+                        @change="getNum(groupIndex, cndex, $event)"
+                        v-model="ctem.quantity"
+                      >
+                        <template v-slot:minus>
+                          <view :class="ctem.quantity == 0 ? 'hui' : 'minus'">
+                            <u-icon
+                              name="minus"
+                              color="#FFFFFF"
+                              size="12"
+                            ></u-icon>
+                          </view>
+                        </template>
+                        <template v-slot:input>
+                          <text class="input">{{ ctem.quantity }}</text>
+                        </template>
+                        <template v-slot:plus>
+                          <view :class="ctem.quantity == 0 ? 'hui' : 'plus'">
+                            <u-icon
+                              name="plus"
+                              color="#FFFFFF"
+                              size="12"
+                            ></u-icon>
+                          </view>
+                        </template>
+                      </u-number-box>
+                    </view>
+                  </view>
+                </u-col>
+              </u-row>
+            </view>
           </view>
-          <u-icon name="arrow-right"></u-icon>
         </view>
+        <!-- END: Integrated SKU selection -->
+
         <view class="heng">
           <view class="disFlex">
             <view class="label">{{ '服务承诺' }}</view>
@@ -145,81 +202,11 @@
             (specialArea == 31 && user.isMakerSpace == 0) || specialArea != 31
           "
         >
-          <!-- <u-button type="success"
-                    class="uBtn"
-                    @tap="goBuy"
-                    shape="circle"
-                    color="linear-gradient(to right, #005BAC, #005BAC )">{{'立即购买'}} </u-button> -->
           <view class="btn1" @click="addCar()">加入购物车</view>
-          <!-- <view class="btn2">{{'立即购买'}}</view> -->
         </view>
       </view>
     </view>
     <!-- 选择规格 -->
-    <u-popup :show="selSku" mode="bottom" closeable @close="close">
-      <view class="pop_a">
-        <view class="pop_tt">
-          <view class="pop_t">
-            <img :src="imgUrlList[0]" alt="" />
-            <view>{{
-              goodDetail.goodsPrice | numberToCurrency | isLocal
-            }}</view>
-          </view>
-        </view>
-        <view class="zhan"></view>
-        <view class="pop">
-          <view
-            v-for="(item, index) in goodDetail.productParams"
-            :key="item.productId"
-            class="pop_c"
-          >
-            <view class="ggTit"
-              >{{ item.productName }}*{{ item.quantity }}</view
-            >
-            <view
-              v-for="(ctem, cndex) in item.waresItemsParamsList"
-              :key="ctem.pkSkuId"
-              class="pop_ci"
-            >
-              <view class="pop_cl">
-                <img :src="ctem.specCover" alt="" />
-                <view class="gui_iit">{{ ctem.specsNameDian }}</view>
-              </view>
-              <u-number-box
-                :min="0"
-                :max="ctem.maxNum"
-                @change="getNum(index, cndex, $event)"
-                v-model="ctem.quantity"
-              >
-                <view
-                  slot="minus"
-                  :class="ctem.quantity == 0 ? 'hui' : 'minus'"
-                >
-                  <u-icon name="minus" color="#FFFFFF" size="12"></u-icon>
-                </view>
-                <text slot="input" class="input">{{ ctem.quantity }}</text>
-                <view slot="plus" :class="ctem.quantity == 0 ? 'hui' : 'plus'">
-                  <u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
-                </view>
-              </u-number-box>
-            </view>
-          </view>
-        </view>
-        <view class="zhan1"></view>
-        <view class="pop_b">
-          <view class="pop_bb">
-            <u-button
-              type="success"
-              class="uBtn"
-              shape="circle"
-              color="linear-gradient(to right, #005BAC, #005BAC )"
-              @click="close"
-              >确认</u-button
-            >
-          </view>
-        </view>
-      </view>
-    </u-popup>
     <selSpaceGoods ref="selSpaceGoods" @getCar="getCatLength"></selSpaceGoods>
   </view>
 </template>
@@ -234,22 +221,12 @@ export default {
     backIcon,
     selSpaceGoods,
   },
-  filters: {
-    seles(value) {
-      if (value > 999) {
-        return 999 + '+'
-      } else {
-        return value
-      }
-    },
-  },
   data() {
     return {
       waresCode: '',
       specialArea: '',
       goodDetail: '',
       imgUrlList: [],
-      selSku: false,
       skuString: '',
       num: 1,
       isWidth: 375,
@@ -279,6 +256,45 @@ export default {
     // }
   },
   methods: {
+    getCurrentlySelectedCount(productGroup) {
+      if (!productGroup || !productGroup.waresItemsParamsList) {
+        return 0
+      }
+      return productGroup.waresItemsParamsList.reduce((sum, sku) => {
+        return sum + (sku.quantity || 0)
+      }, 0)
+    },
+    formatPriceToThousandth(value) {
+      if (value === null || value === undefined || isNaN(parseFloat(value))) {
+        return value
+      }
+      let numStr = parseFloat(value).toFixed(2)
+      let parts = numStr.split('.')
+      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+      return parts.join('.')
+    },
+    formatSales(value) {
+      if (value > 999) {
+        return '999+'
+      } else {
+        return value
+      }
+    },
+    formatNumberToCurrency(value, isLocal = false) {
+      if (value === null || value === undefined || isNaN(parseFloat(value))) {
+        return ''
+      }
+      let num = parseFloat(value)
+      // Removed a ssumed currency symbol logic. Now only formats to two decimal places.
+      return num.toFixed(2)
+    },
+    isLocalCurrency() {
+      // Helper to determine if local currency formatting is needed
+      // This is a placeholder. The original `isLocal` filter's logic might be more complex
+      // and depend on `this.pkCountry` or other global settings.
+      // For now, let's assume it's true if pkCountry is 1 (China).
+      return this.pkCountry === 1
+    },
     toIndex() {
       uni.switchTab({ url: '/pages/index/index' })
     },
@@ -309,6 +325,9 @@ export default {
         productGroup: [],
         pkCountry: this.pkCountry,
       }
+      uni.showLoading({
+        title: '加载中',
+      })
       this.goodDetail.productParams.forEach(item => {
         item.waresItemsParamsList.forEach(ctem => {
           if (ctem.quantity != 0) {
@@ -323,31 +342,26 @@ export default {
       if (this.goodDetail.isMakerGift == 2) {
         this.$refs.selSpaceGoods.getData(carList)
       } else {
-        api.addShopping(carList).then(res => {
-          if (res.code == 200) {
-            uni.showToast({
-              title: '购物车添加成功',
-              icon: 'success',
-              mask: true,
-            })
-            this.$store.dispatch('getCarLength')
-          }
-        })
+        api
+          .addShopping(carList)
+          .then(res => {
+            if (res.code == 200) {
+              uni.showToast({
+                title: '购物车添加成功',
+                icon: 'success',
+                mask: true,
+              })
+              this.$store.dispatch('getCarLength')
+            }
+          })
+          .finally(() => {
+            uni.hideLoading()
+          })
       }
     },
     getCatLength() {
       this.$store.dispatch('getCarLength', this.goodDetail.specialArea)
     },
-    close() {
-      this.selSku = false
-    },
-    goBuy() {
-      uni.navigateTo({
-        url:
-          '/pages/shareArea/orderShare?allData=' +
-          JSON.stringify(this.goodDetail),
-      })
-    },
     getDetails() {
       api
         .waresDetail({
@@ -573,6 +587,13 @@ export default {
       // 作为返回值返回
       return d + '天' + h + ':' + m + ':' + s
     },
+    goBuy() {
+      uni.navigateTo({
+        url:
+          '/pages/shareArea/orderShare?allData=' +
+          JSON.stringify(this.goodDetail),
+      })
+    },
   },
 }
 </script>
@@ -650,7 +671,7 @@ export default {
   }
 }
 .t_hei {
-  font-size: 13px;
+  font-size: 32rpx;
   font-family:
     PingFang SC-Semibold,
     PingFang SC;
@@ -697,87 +718,90 @@ export default {
     margin: 10rpx auto;
   }
 }
-.pop_a {
-  background: #f7f7f7;
-  max-height: 80vh;
-  overflow-y: auto;
-}
-.pop_tt {
-  padding: 0 10rpx;
-  margin: 0rpx 10rpx;
-  height: 172rpx;
-  background: #fff;
-  position: fixed;
-  width: calc(100% - 40rpx);
-  display: flex;
-  align-items: center;
-  z-index: 1;
-  .pop_t {
-    display: flex;
-    align-items: center;
-    img {
-      width: 58px;
-      height: 58px;
-      border-radius: 8px 8px 8px 8px;
-      margin-right: 40rpx;
-    }
-    font-size: 28px;
-    font-family: Arial-Bold, Arial;
-    font-weight: bold;
-    color: #b42b2a;
+
+// START: Styles for integrated SKU selection
+.sku-selection-container {
+  padding: 20rpx 0;
+  .sku-selection-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 20rpx;
+    display: block;
   }
-}
-.zhan {
-  height: 172rpx;
-}
-.zhan1 {
-  height: 130rpx;
-}
-.pop {
-  padding: 10rpx 20rpx;
-  margin: 20rpx 10rpx;
-  box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.5);
-  border-radius: 8px 8px 8px 8px;
-  background: #fff;
-  .pop_c {
-    border-bottom: 8rpx solid rgba(0, 0, 0, 0.05);
-    padding: 10rpx 0 20rpx 0;
-    .ggTit {
-      font-size: 12px;
-      font-family:
-        PingFang SC-Medium,
-        PingFang SC;
+
+  .sku-options-list {
+    // Styles for the list of product groups
+  }
+
+  .sku-product-group {
+    margin-bottom: 20rpx;
+    &:last-child {
+      margin-bottom: 0;
+    }
+    .sku-product-name {
+      font-size: 14px;
       font-weight: 500;
-      color: #333333;
-      margin: 20rpx 0;
+      color: #444;
+      margin-bottom: 15rpx;
+      padding-left: 8rpx;
     }
-    .pop_ci {
+  }
+
+  .sku-col-item {
+    margin-bottom: 20rpx;
+  }
+
+  .sku-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background: #f9f9f9;
+    border-radius: 8px;
+    padding: 12rpx;
+    height: auto;
+    box-sizing: border-box;
+    justify-content: space-between;
+
+    .sku-item-cover {
+      width: 80rpx;
+      height: 80rpx;
+      border-radius: 4px;
+      margin-right: 15rpx;
+      flex-shrink: 0;
+    }
+
+    .sku-item-content-right {
+      flex: 1;
       display: flex;
-      align-items: center;
+      flex-direction: column;
       justify-content: space-between;
-      background: #eeeeee;
-      border-radius: 4px 4px 4px 4px;
-      opacity: 1;
-      margin-bottom: 20rpx;
-      padding: 4rpx 12rpx;
-      .pop_cl {
-        display: flex;
-        align-items: center;
-        .gui_iit {
-          margin-left: 20rpx;
-        }
-      }
+      width: 0;
     }
-    img {
-      width: 48rpx;
-      height: 48rpx;
-      border-radius: 4px 4px 4px 4px;
+
+    .sku-item-name {
+      font-size: 13px;
+      color: #333;
+      line-height: 1.4;
+      margin-bottom: 8rpx;
+      text-align: right;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .u-number-box {
+      width: auto;
+      align-self: flex-end;
     }
   }
 }
-::v-deep .u-popup__content__close {
-  z-index: 2;
+// END: Styles for integrated SKU selection
+
+.warning-text {
+  color: #e54d42; /* 警告红色 */
 }
+
 .hui {
   width: 22px;
   height: 22px;
@@ -812,16 +836,6 @@ export default {
   margin: 0 10rpx;
   border-radius: 3px 3px 3px 3px;
 }
-.pop_b {
-  position: fixed;
-  bottom: 0;
-  height: 166rpx;
-  background: #ffffff;
-  width: 100%;
-}
-.pop_bb {
-  padding: 20rpx 40rpx;
-}
 .footer_f {
   position: fixed;
   bottom: 0;