<!-- 商品详情页面 -->
<template>
  <view class="wanl-goods">
    <!-- 导航条 -->
    <view class="cu-custom" :style="{ height: (statusBarH + 44) + 'px' }">
      <view class="cu-bar fixed" :style="{ height: (statusBarH + 44) + 'px', paddingTop: statusBarH + 'px' }">
        <!-- 返回按钮 -->
        <view v-if="pagesNum > 1" class="action" @tap="goBack">
          <text class="wlIcon wlIcon-fanhui1"></text>
        </view>
        <!-- 首页按钮 -->
        <view v-else class="action" @tap="goHome">
          <text class="wlIcon wlIcon-zhuye"></text>
        </view>
        <!-- 搜索框 -->
        <view class="search-form round" @tap="goSearch">
          <text class="wlIcon wlIcon-sousuo1 text-bold"></text>
          <swiper class="search-swiper placeholder" vertical autoplay circular interval="3000">
            <swiper-item>{{ $t('mall.searchPlaceholder') }}</swiper-item>
          </swiper>
        </view>
        <!-- 消息中心 -->
        <view class="action">
          <text class="wlIcon wlIcon-liebiaomoshi" @tap="showModal('menu')"></text>
        </view>
        <!-- 吸顶导航栏：滚动时固定在顶部，点击可跳转到商品/评价/详情/推荐区域 -->
        <view class="bar-bg solid-bottom" :style="{ top: (statusBarH + 44) + 'px', opacity: headerOpacity }">
          <scroll-view scroll-x class="nav">
            <view class="flex justify-around text-center">
              <!-- 锚点导航项：选中项显示橙色高亮 -->
              <view class="cu-item" :class="selectAnchor === index ? 'text-orange cur' : ''"
                v-for="(anchor, index) in anchorlist" :key="anchor.name" @tap="toAnchor(index)">
                {{ anchor.name }}
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>

    <!-- 商品主图轮播 -->
    <view class="swiper-box" id="swiper">
      <swiper circular autoplay @change="swiperChange">
        <swiper-item v-for="(swiper, index) in goodsData.images" :key="index">
          <image :src="swiper" mode="aspectFill" />
        </swiper-item>
      </swiper>
      <view class="indicator">{{ currentSwiper + 1 }}/{{ goodsData.images.length }}</view>
    </view>

    <!-- 价格区 -->
    <view class="bg-white">
      <view class="price margin-bottom-sm padding-lr-bj padding-top-bj align-start">
        <view>
          <!-- 價價 -->
          <view class="text-price wanl-orange text-xxl margin-right-xs">
            {{ goodsData.interval_price || '0.00' }}
          </view>
          <!-- 市場價 -->
          <view class="text-sm wanl-gray text-dec">
            {{ $t('mall.marketPrice') }}
            <text class="text-price margin-left-xs">{{ goodsData.market_price || '0.00' }}</text>
          </view>
        </view>
        <!-- 收藏 -->
        <view class="follow wanl-black" v-if="goodsData.follow" @tap="onFollow">
          <text class="wlIcon wlIcon-yiguanzhu1 text-red"></text>
          <text class="text-xs">{{ $t('mall.collected') }}</text>
        </view>
        <!-- 收藏商品 -->
        <view class="follow wanl-black" v-else @tap="onFollow">
          <text class="wlIcon wlIcon-gerenguanzhu"></text>
          <text class="text-xs">{{ $t('mall.collect') }}</text>
        </view>
      </view>
      <!-- 信息行 -->
      <view class="block text-min padding-lr padding-bottom-bj">
        <view class="wanl-gray">
          <text class="wlIcon wlIcon-chakan margin-right-xs"></text>
          {{ goodsData.views || 0 }}
        </view>
        <view class="wanl-gray">
          {{ $t('orderConfirm.freight') }}：
          <text class="text-price">{{ (goodsData.freight && goodsData.freight.price) || '0.00' }}</text>
        </view>
        <view class="wanl-gray">
          {{ $t('mall.monthlySales') }}
          <text class="margin-left-xs">{{ goodsData.sales || 0 }}</text>
        </view>
      </view>
    </view>

    <!-- 优惠券 -->
    <view class="promotion text-sm" v-if="goodsData.coupon && goodsData.coupon.length > 0">
      <view class="item" @tap="showModal('coupon')">
        <view class="label wanl-gray">{{ $t('orderConfirm.coupon') }}</view>
        <view class="conten flex">
          <view class="wanl-ticket text-sm" v-for="(item, index) in goodsData.coupon" :key="index" v-if="index < 2">
            <block v-if="item.type === 'reduction' || (item.type === 'vip' && item.usertype === 'reduction')">
              <view class="ticket-price">HKD{{ Number(item.price) }}</view>
              <view class="ticket-title">{{ $t('mall.fullReduction', [Number(item.limit), Number(item.price)]) }}</view>
            </block>
            <block v-if="item.type === 'discount' || (item.type === 'vip' && item.usertype === 'discount')">
              <view class="ticket-price">{{ $t('mall.discount', [Number(item.discount)]) }}</view>
              <view class="ticket-title">{{ $t('mall.fullDiscount', [Number(item.limit), Number(item.discount)]) }}
              </view>
            </block>
            <block v-if="item.type === 'shipping'">
              <view class="ticket-price">{{ $t('orderConfirm.freeShipping') }}</view>
              <view class="ticket-title">{{ $t('mall.freeShippingFull', [Number(item.limit)]) }}</view>
            </block>
          </view>
        </view>
        <view class="bnt-quan wanl-gray">
          <text class="wlIcon wlIcon-fanhui2 margin-left-xs">More</text>
        </view>
      </view>
    </view>

    <!-- 选择商品 -->
    <view class="choice margin-bottom-bj padding-bj text-sm bg-white">
      <view class="commodity margin-bottom-bj" @tap="onSelectSku">
        <view class="opt">
          <view class="title wanl-gray">{{ $t('mall.select') }}</view>
          <view class="option">
            <view class="selected">
              <view v-if="canCount">
                {{ $t('orderConfirm.select') }}
                <text class="margin-lr-xs" v-for="(item, index) in goodsData.spu" :key="item.id">{{ item.name }}</text>
              </view>
              <view v-else>
                <text class="margin-right-bj">{{ $t('mall.selected') }}</text>
                <text class="margin-right-xs" v-for="(name, key) in selectArr" :key="key">{{ name }}</text>
              </view>
            </view>
            <view class="option-list">
              <view v-for="(item, index) in goodsData.spu" :key="item.id">
                <text class="cu-tag" v-if="index === 0" v-for="tag in item.item" :key="tag.name">{{ tag.name }}</text>
                <!-- <text class="cu-tag" v-if="index === 0">{{ $t('mall.moreSpecs') }}</text> -->
              </view>
            </view>
          </view>
        </view>
        <view class="text-sm wanl-gray"><text class="wlIcon wlIcon-fanhui2"></text></view>
      </view>
      <view class="commodity" @tap="showModal('service')"
        v-if="goodsData.shop && goodsData.shop.service_ids && goodsData.shop.service_ids.length">
        <view class="opt">
          <view class="title wanl-gray text-sm">{{ $t('mall.service') }}</view>
          <view class="option">
            <view class="selected">
              <block v-for="(item, index) in goodsData.shop.service_ids" :key="item.id" v-if="index <= 2">
                <text class="margin-lr-xs" v-if="index !== 0">·</text>
                {{ item.name }}
              </block>
            </view>
          </view>
        </view>
        <view class="text-min wanl-gray"><text class="wlIcon wlIcon-fanhui2"></text></view>
      </view>
    </view>

    <!-- 产品参数 -->
    <view class="choice margin-bottom-bj padding-bj text-sm bg-white">
      <view class="commodity" @tap="showModal('attribute')">
        <view class="opt">
          <view class="title wanl-gray text-sm">{{ $t('mall.params') }}</view>
          <view class="option">
            <view class="selected"><text>{{ $t('mall.brandSpec') }}</text></view>
          </view>
        </view>
        <view class="text-min wanl-gray"><text class="wlIcon wlIcon-fanhui2"></text></view>
      </view>
    </view>

    <!-- 评论 -->
    <view class="comment margin-bottom-bj padding-bj bg-white" id="evaluate">
      <view class="head" @tap="goComment('good')">
        <view>{{ $t('mall.evaluate') }}({{ goodsData.comment || 0 }})</view>
        <view class="wanl-orange">
          {{ goodsData.comment > 0 ? parseInt((goodsData.praise / goodsData.comment) * 100) : 0 }}%{{
            $t('mall.comment.goodRate') }}
          <text class="wlIcon wlIcon-fanhui2 margin-left-xs"></text>
        </view>
      </view>
      <view class="label margin-bottom padding-bottom solid-bottom">
        <view @tap="goComment('good')" class="cu-tag round">{{ $t('mall.comment.good') }} ({{ goodsData.praise || 0 }})
        </view>
        <view @tap="goComment('pertinent')" class="cu-tag round">{{ $t('mall.comment.pertinent') }} ( {{
          goodsData.moderate || 0 }})</view>
        <view @tap="goComment('poor')" class="cu-tag round">{{ $t('mall.comment.poor') }} ({{ goodsData.negative || 0
          }})</view>
        <view @tap="goComment('figure')" class="cu-tag round">{{ $t('mall.comment.withImage') }} ({{
          (goodsData.comment_list &&
            goodsData.comment_list.figure) || 0 }})</view>
      </view>
      <view class="user" v-for="(item, index) in (goodsData.comment_list && goodsData.comment_list.data || [])"
        :key="item.id" @tap="goComment('')">
        <view class="userinfo">
          <view class="avatar">
            <view class="cu-avatar sm round margin-right-xs"
              :style="{ backgroundImage: 'url(' + (item.user && item.user.avatar || '') + ')' }"></view>
            <view class="text-sm wanl-gray">{{ (item.user && item.user.nickname) || $t('mall.comment.anonymous') }}
            </view>
          </view>
        </view>
        <view class="details text-min">
          <view class="margin-bottom-sm">{{ item.content }}</view>
          <view class="wanl-gray">{{ $t('mall.comment.spec') }}：{{ item.suk }}</view>
        </view>
        <view class="grid flex-sub grid-square"
          :class="[item.images && item.images.length > 3 ? 'col-3' : 'col-' + (item.images ? item.images.length : 0)]"
          v-if="item.images && item.images.length !== 0">
          <view class="bg-img" v-for="(image, idx) in item.images" :key="idx" v-if="idx <= 3"
            :style="{ backgroundImage: 'url(' + image + ')' }"></view>
        </view>
      </view>
      <view class="more" @tap="goComment('')">
        <text class="wanl-gray text-sm">{{ $t('mall.viewAll') }}</text>
        <text class="wlIcon wlIcon-fanhui4 margin-left-xs"></text>
      </view>
    </view>

    <!-- 店铺 -->
    <view class="shop padding-bj solid-bottom bg-white" v-if="goodsData.shop && goodsData.shop.shopname">
      <view class="shopinfo margin-bottom">
        <view class="cu-avatar lg radius-bock"
          :style="{ backgroundImage: 'url(' + (goodsData.shop.avatar || '') + ')' }"></view>
        <view class="shopname">
          <view class="text-df text-cut" style="width: 300rpx;">{{ goodsData.shop.shopname }}</view>
          <view class="wanl-gray text-min">{{ (goodsData.shop.find_user && goodsData.shop.find_user.fans) || 0 }} {{
            $t('mall.fans') }}
          </view>
        </view>
        <view class="bnt">
          <button class="cu-btn round line-orange margin-right-sm" @tap="onShopGoods">{{ $t('mall.selectAllGoods')
            }}</button>
          <button class="cu-btn round bg-gradual-orange" @tap="onShop">{{ $t('mall.enterShop') }}</button>
        </view>
      </view>
      <view class="quality wanl-gray text-min">
        <view>
          {{ $t('mall.productDesc') }}
          <text class="">{{ goodsData.shop.score_describe }}</text>
          <view v-if="goodsData.shop.score_describe < 4.7" class="cu-tag round di">{{ $t('mall.low') }}</view>
          <view v-else class="cu-tag round gao">{{ $t('mall.high') }}</view>
        </view>
        <view>
          {{ $t('mall.sellerService') }}
          <text class="wanl-orange">{{ goodsData.shop.score_service }}</text>
          <view v-if="goodsData.shop.score_service < 4.7" class="cu-tag round di">{{ $t('mall.low') }}</view>
          <view v-else class="cu-tag round gao">{{ $t('mall.high') }}</view>
        </view>
        <view>
          {{ $t('mall.logistics') }}
          <text class="wanl-orange">{{ goodsData.shop.score_logistics }}</text>
          <view v-if="goodsData.shop.score_logistics < 4.7" class="cu-tag round di">{{ $t('mall.low') }}</view>
          <view v-else class="cu-tag round gao">{{ $t('mall.high') }}</view>
        </view>
      </view>
    </view>

    <!-- 店铺推荐 -->
    <view class="shop-recom padding-bj bg-white" v-if="goodsData.shop_recommend && goodsData.shop_recommend.length">
      <view class="head">
        <view>{{ $t('mall.shopRecommend') }}</view>
        <view class="text-sm wanl-orange" @tap="onShop">
          {{ $t('mall.viewAll') }}
          <text class="wlIcon wlIcon-fanhui2 margin-left-xs"></text>
        </view>
      </view>
      <view class="recommend margin-bottom-xs">
        <view class="item" v-for="(item, index) in goodsData.shop_recommend" :key="item.id" @tap="onGoods(item.id)">
          <image :src="item.image" mode="aspectFill"></image>
          <view class="text-sm margin-tb-xs text-cut">{{ item.title }}</view>
          <view class="text-price wanl-orange text-df">{{ item.price }}</view>
        </view>
      </view>
    </view>

    <!-- 分隔符 -->
    <view class="wanl-divider">
      <view class="divider-line"></view>
      <text class="divider-text">{{ $t('mall.productDetail') }}</text>
      <view class="divider-line"></view>
    </view>

    <!-- 产品详情 -->
    <view class="wanl-goods-content bg-white" id="details">
      <rich-text :nodes="goodsData.content || ''"></rich-text>
    </view>

    <!-- 分隔符 -->
    <view class="wanl-divider">
      <view class="divider-line"></view>
      <text class="divider-text">{{ $t('mall.shop.recommendGoods') }}</text>
      <view class="divider-line"></view>
    </view>

    <!-- 猜你喜欢 -->
    <view id="recommend">
      <mall-product :dataList="likeData" dataStyle="col-2-20" />
    </view>

    <view class="load-more" v-if="likeData.length > 0">
      <text v-if="likeLoading">{{ $t('common.loading') }}</text>
      <text v-else-if="likePage >= likeLastPage">{{ $t('common.noMore') }}</text>
    </view>

    <view class="safeAreaBottom"></view>

    <!-- 弹窗层 -->
    <view class="WANL-MODAL text-sm" @touchmove.stop.prevent="moveHandle">
      <!-- 菜单弹窗 -->
      <view class="cu-modal top-modal" :class="modalName === 'menu' ? 'show' : ''" @tap="hideModal()">
        <view class="wanl-modal-menu cu-dialog" @tap.stop="">
          <view class="wanl-direct">
            <view class="menu-header" :style="{ paddingTop: statusBarH + 'px' }">
              <view>{{ $t('mall.featureLink') }}</view>
              <view @tap="hideModal">
                <text class="wlIcon-31guanbi"></text>
              </view>
            </view>
            <view class="menu-box">
              <!-- 消息 -->
              <view class="menu-item" hover-class="wanl-opcity" @tap="handleNav('/pages/notice/mall-notice/index')">
                <view class="badge-box">
                  <text class="wlIcon-xiaoxizhongxin"></text>
                  <view class="cu-tag badge"
                    v-if="statistics.notice.notice + statistics.notice.order + statistics.notice.chat > 0">{{
                      statistics.notice.notice + statistics.notice.order + statistics.notice.chat }}</view>
                </view>
                <view class="menu-text">{{ $t('mall.message') }}</view>
              </view>
              <!-- 首頁 -->
              <view class="menu-item" hover-class="wanl-opcity" @tap="handleNav('/pages/mall/index')">
                <view class="badge-box">
                  <text class="wlIcon-31shouye"></text>
                </view>
                <view class="menu-text">{{ $t('mall.home') }}</view>
              </view>
              <!-- 我的 -->
              <view class="menu-item" hover-class="wanl-opcity" @tap="handleSwitchTab('/pages/mine/index')">
                <view class="badge-box">
                  <text class="wlIcon-31wode"></text>
                  <view class="cu-tag badge"
                    v-if="statistics.order.pay + statistics.order.delive + statistics.order.receiving + statistics.order.evaluate > 0">
                    {{ statistics.order.pay + statistics.order.delive + statistics.order.receiving +
                      statistics.order.evaluate }}</view>
                </view>
                <view class="menu-text">{{ $t('mall.mine') }}</view>
              </view>
              <!-- 購物車 -->
              <view class="menu-item" hover-class="wanl-opcity" @tap="goCart">
                <view class="badge-box">
                  <text class="wlIcon-gouwuche"></text>
                  <view class="cu-tag badge" v-if="cartNum > 0">{{ cartNum }}</view>
                </view>
                <view class="menu-text">{{ $t('mall.cart') }}</view>
              </view>
              <!-- 智能小蜜 -->
              <view class="menu-item" hover-class="wanl-opcity" @tap="handleNav('/pages/user/service')">
                <view class="badge-box">
                  <text class="wlIcon-unie737"></text>
                </view>
                <view class="menu-text">{{ $t('user.smartAssistant') }}</view>
              </view>
              <!-- 反饋 -->
              <view class="menu-item" hover-class="wanl-opcity" @tap="handleNav('/pages/account/feedback')">
                <view class="badge-box">
                  <text class="wlIcon-xiugaioryijian"></text>
                </view>
                <view class="menu-text">{{ $t('mall.feedback') }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 优惠券弹窗 -->
      <view class="cu-modal bottom-modal" :class="modalName === 'coupon' ? 'show' : ''" @tap="hideModal()">
        <view class="cu-dialog bg-bgcolor" @tap.stop="">
          <view class="wanl-modal">
            <view class="head padding-bj">
              <view class="content">
                <view class="text-lg">{{ $t('mall.couponTitle') }}</view>
              </view>
              <view class="close wlIcon wlIcon-31guanbi" @tap="hideModal()"></view>
            </view>
            <scroll-view class="wanl-coupon scroll-y" scroll-y="true">
              <view v-for="(coupon, index) in goodsData.coupon" :key="index" :class="coupon.type"
                class="item margin-bottom-bj radius-bock coupon-item">
                <view class="item-left">
                  <block
                    v-if="coupon.type === 'reduction' || (coupon.type === 'vip' && coupon.usertype === 'reduction')">
                    <view class="colour">
                      <text class="text-price"></text>
                      <text class="prices">{{ Number(coupon.price) }}</text>
                    </view>
                    <view class="cu-tag wanl-gray-dark radius text-sm bg-white">
                      {{ $t('mall.fullReduction', [Number(coupon.limit), Number(coupon.price)]) }}
                    </view>
                  </block>
                  <block v-if="coupon.type === 'discount' || (coupon.type === 'vip' && coupon.usertype === 'discount')">
                    <view class="colour">
                      <text class="prices">{{ Number(coupon.discount) }}</text>
                      <text class="discount">{{ $t('mall.discountSuffix') }}</text>
                    </view>
                    <view class="cu-tag wanl-gray-dark radius text-sm bg-white">
                      {{ $t('mall.fullDiscount', [Number(coupon.limit), Number(coupon.discount)]) }}
                    </view>
                  </block>
                  <block v-if="coupon.type === 'shipping'">
                    <view class="colour">
                      <text class="prices">{{ $t('orderConfirm.freeShipping') }}</text>
                    </view>
                    <view class="cu-tag wanl-gray-dark radius text-sm bg-white">
                      {{ $t('mall.freeShippingFull', [Number(coupon.limit)]) }}
                    </view>
                  </block>
                </view>
                <view class="item-right padding-bj">
                  <view class="title">
                    <view class="cu-tag sm radius margin-right-xs tagstyle">{{ coupon.type_text }}</view>
                    <text class="text-cut wanl-gray text-min">{{ coupon.name }}</text>
                  </view>
                  <view class="content text-min">
                    <view class="wanl-gray">
                      <view v-if="coupon.grant != '-1'">
                        <text class="wlIcon wlIcon-dot"></text>{{ $t('mall.remain') }} {{ coupon.surplus }}
                      </view>
                      <view v-if="coupon.drawlimit != 0">
                        <text class="wlIcon wlIcon-dot"></text>{{ $t('mall.limitPerPerson') }} {{ coupon.drawlimit }}
                      </view>
                    </view>
                    <view class="cu-btn sm round" @tap="onReceive(index)" v-if="!coupon.state">
                      <text>{{ $t('mall.getNow') }}</text>
                    </view>
                  </view>
                </view>
              </view>
            </scroll-view>
            <view class="foot padding-lr-bj">
              <button class="cu-btn bg-gradual-orange round text-bold complete" @tap="hideModal()">{{
                $t('cart.complete') }}</button>
            </view>
          </view>
        </view>
      </view>

      <!-- 产品参数弹窗 -->
      <view class="cu-modal bottom-modal" :class="modalName === 'attribute' ? 'show' : ''" @tap="hideModal()">
        <view class="cu-dialog" @tap.stop="">
          <view class="wanl-modal">
            <view class="head padding-bj">
              <view class="content">
                <view class="text-lg">{{ $t('mall.productParams') }}</view>
              </view>
            </view>
            <scroll-view class="scroll-y" scroll-y="true">
              <view class="table solid-bottom" v-if="goodsData.brand">
                <view class="name wanl-gray">{{ $t('product.brand') }}</view>
                <view class="value">{{ goodsData.brand.name || '' }}</view>
              </view>
              <view class="table solid-bottom" v-for="(item, index) in goodsData.category_attribute" :key="index">
                <view class="name wanl-gray">{{ index }}</view>
                <view class="value">{{ item }}</view>
              </view>
            </scroll-view>
            <view class="foot padding-lr-bj">
              <button class="cu-btn bg-gradual-orange round text-bold complete" @tap="hideModal()">{{
                $t('cart.complete') }}</button>
            </view>
          </view>
        </view>
      </view>

      <!-- 服务保障弹窗 -->
      <view class="cu-modal bottom-modal" :class="modalName === 'service' ? 'show' : ''" @tap="hideModal()">
        <view class="cu-dialog" @tap.stop="">
          <view class="wanl-modal">
            <view class="head padding-bj">
              <view class="content">
                <view class="text-lg">{{ $t('mall.basicService') }}</view>
              </view>
            </view>
            <view class="listbox padding-bj">
              <view v-for="(item, index) in (goodsData.shop && goodsData.shop.service_ids || [])" :key="item.id">
                <view class="name">
                  {{ item.name }}
                  <text class="wlIcon wlIcon-fuwuxing"></text>
                </view>
                <view class="description wanl-gray text-min">{{ item.description }}</view>
              </view>
            </view>
            <view class="foot padding-lr-bj">
              <button class="cu-btn bg-gradual-orange round text-bold complete" @tap="hideModal()">{{
                $t('cart.complete') }}</button>
            </view>
          </view>
        </view>
      </view>

      <!-- 点击立即购买之后弹出的弹窗 -->
      <view class="cu-modal bottom-modal" :class="modalName === 'option' ? 'show' : ''" @tap="hideModal()">
        <view class="cu-dialog" @tap.stop="">
          <view class="option wanl-modal">
            <view class="head text-left padding-bj solid-bottom">
              <view class="cu-avatar radius-bock margin-right"
                :style="{ backgroundImage: 'url(' + (selectSku.thumbnail || goodsData.image) + ')' }"></view>
              <view>
                <view class="text-price wanl-orange text-xl margin-bottom-xs">{{ selectSku.price ||
                  goodsData.interval_price || '0.00' }}</view>
                <view v-if="selectArr.join('')" class="wanl-gray margin-bottom-xs">
                  {{ $t('mall.stock') }} <text class="margin-lr-xs">{{ selectSku.stock || 0 }}</text> {{
                    $t('mall.quantity') }}
                </view>
                <view class="text-sm">
                  <view v-if="selectArr.join('')">
                    <text class="margin-right-bj">{{ $t('mall.selected') }}</text>
                    <text class="margin-right-xs" v-for="(name, key) in selectArr" :key="key">{{ name }}</text>
                  </view>
                  <view v-else>
                    {{ $t('orderConfirm.select') }}：
                    <text class="wanl-gray-light" v-for="(item, index) in goodsData.spu" :key="item.id">
                      <block v-if="index !== 0">-</block>
                      {{ item.name }}
                    </text>
                  </view>
                </view>
              </view>
              <view class="close wlIcon wlIcon-31guanbi" @tap="hideModal()"></view>
            </view>
            <scroll-view scroll-y="true" style="max-height: 50vh;">
              <view class="opt text-left padding-bj solid-bottom" v-for="(value, spukey) in goodsData.spu"
                :key="value.id">
                <view class="text-df">{{ value.name }}</view>
                <view class="tag">
                  <view class="cu-tag text-sm" v-for="(item, index) in value.item" :key="index"
                    :class="[item.ishow ? '' : 'noactive', subIndex[spukey] === index ? 'active' : '']"
                    @tap="skuClick(item, spukey, $event, index)">
                    {{ item.name }}
                  </view>
                </view>
              </view>
              <view class="number padding-bj">
                <view class="text-df">{{ $t('mall.buyQuantity') }}</view>
                <view class="num-ctrl">
                  <view class="num-btn" @tap="changeNum(-1)">-</view>
                  <text class="num-val">{{ selectNum }}</text>
                  <view class="num-btn" @tap="changeNum(1)">+</view>
                </view>
              </view>
            </scroll-view>
            <view class="foot padding-lr-bj">
              <view v-if="isChoice" class="foot-single">
                <button class="cu-btn bg-gradual-orange round text-bold complete" @tap="completeSelection">{{
                  $t('cart.complete') }}</button>
              </view>
              <block v-else>
                <button class="cu-btn bg-gradual-yellow round-left text-bold" @tap="submitData('addToCart', 1)">{{
                  $t('mall.addToCart') }}</button>
                <button class="cu-btn bg-gradual-orange round-right text-bold" @tap="submitData('placeOrder', 1)">{{
                  $t('mall.buyNow') }}</button>
              </block>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部栏 -->
    <view class="wanlian cu-bar tabbar shop solid-top foot">
      <!-- 店铺 -->
      <view class="action" @tap="onShop">
        <view class="wlIcon-dianpu1 wanl-orange"></view>
        {{ $t('complaint.types.shop') }}
      </view>
      <view class="action" @tap="goCart">
        <view class="wlIcon-gouwuche">
          <view class="cu-tag badge" v-if="cartNum > 0">{{ cartNum }}</view>
        </view>
        {{ $t('mall.cart') }}
      </view>
      <view class="action"
        @tap="goChat(goodsData.shop_id, { id: goodsData.id, title: goodsData.title, image: goodsData.image, price: goodsData.price })">
        <view class="wlIcon-kefu">
          <view class="cu-tag badge"></view>
        </view>
        {{ $t('mall.shop.customerService') }}
      </view>
      <!-- 购买按钮 -->
      <view class="btn-group">
        <button class="cu-btn bg-gradual-yellow round-left" @tap="submitData('addToCart')">{{ $t('mall.addToCart')
          }}</button>
        <button class="cu-btn bg-gradual-orange round-right" @tap="submitData('placeOrder')">{{ $t('mall.buyNow')
          }}</button>
      </view>
    </view>
  </view>
</template>

<script>
import {
  pullMallGoodsDetail,
  pullMallGoodsStock,
  pullMallGoodsFollow,
  pullMallGoodsLikes,
  pullMallCouponQuery,
  pullMallCouponReceive
} from '@/features/mall/mall-gateway'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      goodsId: 0,
      statusBarH: 0,
      headerOpacity: 0,
      currentSwiper: 0,
      selectAnchor: 0,
      anchorlist: [
        { name: this.$t('mall.goods'), top: 0 },
        { name: this.$t('mall.evaluate'), top: 0 },
        { name: this.$t('mall.detail'), top: 0 },
        { name: this.$t('mall.recommend'), top: 0 }
      ],
      modalName: null,
      isChoice: '',
      pagesNum: 1,
      goodsData: {
        id: 0, category_id: 0, shop_id: 0, brand_id: 0, freight_id: 0,
        title: '', image: '', images: [], content: '',
        category_attribute: {}, activity_type: 'goods',
        price: null, interval_price: null, market_price: null,
        sales: 0, views: 0, comment: 0, praise: 0, moderate: 0, negative: 0,
        follow: false, sku: [], spu: [], promotion: [], coupon: [],
        comment_list: { data: [], figure: 0, tag: [] },
        brand: {},
        freight: { name: '', price: '0.00' },
        shop: { shopname: '', avatar: '', find_user: { fans: 0 }, service_ids: [] },
        shop_recommend: []
      },
      shopItemInfo: {},
      selectArr: [],
      subIndex: [],
      selectSku: {},
      selectNum: 1,
      likeData: [],
      likePage: 1,
      likeLastPage: 1,
      likeLoading: false
    }
  },
  computed: {
    ...mapState({
      statistics: state => state.statistics,
      cartNum: state => state.cart.cartnum
    }),
    canCount() {
      return this.subIndex.some(item => item === -1)
    }
  },
  async onLoad(query) {
    this.statusBarH = uni.getSystemInfoSync().statusBarHeight || 0
    this.pagesNum = getCurrentPages().length
    this.goodsId = query.id
    await this.loadData()
    await this.loadLikeData()
  },
  onPageScroll(e) {
    let tmpY = 150
    e.scrollTop = e.scrollTop > tmpY ? 150 : e.scrollTop
    this.headerOpacity = e.scrollTop * (1 / tmpY)
  },
  onReachBottom() {
    if (this.likePage >= this.likeLastPage) return
    this.likePage++
    this.loadLikeData()
  },
  watch: {
    selectSku(n, o) {
      if (n.price != o.price) {
        this.queryCoupon(n.price)
      }
    }
  },
  methods: {
    onSelectSku() {
      // 檢查是否所有 SKU 都售罄
      const allSoldOut = this.goodsData.sku && this.goodsData.sku.every(sku => sku.stock <= 0)
      if (allSoldOut) {
        uni.showToast({ title: this.$t('mall.goodsSoldOut'), icon: 'none' })
        return
      }
      this.showModal('option')
    },
    async loadData() {
      try {
        const data = await pullMallGoodsDetail({ id: this.goodsId })
        this.goodsData = data
        if (data.spu && data.spu.length) {
          data.spu.forEach(() => {
            this.selectArr.push('')
            this.subIndex.push(-1)
          })
          this.checkItem()
          this.checkInpath(-1)
        }
        setTimeout(() => { this.calcAnchor() }, 1000)
      } catch (e) {
        console.error('加载商品详情失败:', e)
      }
    },
    async loadLikeData() {
      this.likeLoading = true
      try {
        const res = await pullMallGoodsLikes({ page: this.likePage })
        this.likeData = this.likePage === 1 ? res.rows : this.likeData.concat(res.rows)
        this.likePage = res.currentPage
        this.likeLastPage = res.lastPage
      } catch (e) {
        console.error('加载推荐失败:', e)
      } finally {
        this.likeLoading = false
      }
    },
    async queryCoupon(price) {
      try {
        const res = await pullMallCouponQuery({
          shop_id: this.goodsData.shop_id,
          goods_id: this.goodsData.id,
          shop_category_id: this.goodsData.shop_category_id,
          price: price
        })
        this.goodsData.coupon = res
      } catch (e) {
        console.error('查询优惠券失败:', e)
      }
    },
    async onReceive(index) {
      var coupon = this.goodsData.coupon[index]
      try {
        const res = await pullMallCouponReceive({ id: coupon.id })
        coupon.id = res.id
        coupon.state = true
        uni.showToast({ title: res.msg || this.$t('mall.receiveSuccess'), icon: 'none' })
      } catch (e) {
        console.error('领取优惠券失败:', e)
      }
    },
    async onFollow() {
      this.goodsData.follow = !this.goodsData.follow
      try {
        const res = await pullMallGoodsFollow({ id: this.goodsId })
        this.goodsData.follow = res
      } catch (e) {
        console.error(this.$t('mall.collectFailed'), e)
      }
    },
    async loadStock(skuId) {
      try {
        const stock = await pullMallGoodsStock({ sku_id: skuId })
        this.selectSku.stock = stock
      } catch (e) {
        console.error('查询库存失败:', e)
      }
    },
    swiperChange(e) {
      this.currentSwiper = e.detail.current
    },
    skuClick(value, spukey, event, index) {
      if (!value.ishow) return
      if (this.selectArr[spukey] !== value.name) {
        this.$set(this.selectArr, spukey, value.name)
        this.$set(this.subIndex, spukey, index)
      } else {
        this.$set(this.selectArr, spukey, '')
        this.$set(this.subIndex, spukey, -1)
      }
      this.checkInpath(spukey)
      if (this.selectArr.every(item => item !== '')) {
        this.selectSku = this.shopItemInfo[this.selectArr] || {}
        if (this.selectSku.id) {
          this.loadStock(this.selectSku.id)
        }
        this.selectNum = 1
      } else {
        this.selectSku = {}
      }
    },
    checkItem() {
      this.goodsData.sku.reduce((arrs, items) => {
        return arrs.concat(
          items.difference.reduce((arr, item) => {
            return arr.concat(
              arr.map(item2 => {
                var key = [...item2, item]
                if (!this.shopItemInfo.hasOwnProperty(key)) {
                  this.shopItemInfo[key] = items
                }
                return key
              })
            )
          }, [[]])
        )
      }, [[]])
    },
    checkInpath(clickIdx) {
      for (var i = 0; i < this.goodsData.spu.length; i++) {
        if (i === clickIdx) continue
        for (var j = 0; j < this.goodsData.spu[i].item.length; j++) {
          if (this.subIndex[i] !== -1 && j === this.subIndex[i]) continue
          var copy = [...this.selectArr]
          this.$set(copy, i, this.goodsData.spu[i].item[j].name)
          var filtered = copy.filter(item => item !== '' && typeof item !== 'undefined')
          this.$set(this.goodsData.spu[i].item[j], 'ishow', this.shopItemInfo.hasOwnProperty(filtered))
        }
      }
    },
    changeNum(delta) {
      var num = this.selectNum + delta
      if (num < 1) return
      if (this.selectSku.stock && num > this.selectSku.stock) {
        uni.showToast({ title: this.$t('mall.maxStock', [this.selectSku.stock]), icon: 'none' })
        return
      }
      this.selectNum = num
    },
    completeSelection() {
      if (this.canCount) {
        uni.showToast({ title: this.$t('mall.selectCompleteSpec'), icon: 'none' })
      } else {
        this.processingData()
      }
    },
    submitData(name, type) {
      if (type == 1) {
        if (this.canCount) {
          uni.showToast({ title: this.$t('mall.selectCompleteSpec'), icon: 'none' })
        } else {
          this.isChoice = name
          this.processingData()
        }
      } else {
        // 新增：檢查是否所有 SKU 都售罄
        const allSoldOut = this.goodsData.sku && this.goodsData.sku.every(sku => sku.stock <= 0)
        if (allSoldOut) {
          uni.showToast({ title: this.$t('mall.goodsSoldOut'), icon: 'none' })
          return
        }
        this.showModal('option')
        this.isChoice = name
      }
    },
    async processingData() {
      if (this.isChoice === 'addToCart') {
        if (!this.selectSku || !this.selectSku.id) {
          uni.showToast({ title: this.$t('mall.selectProductSpec'), icon: 'none' })
          return
        }
        // 新增：檢查庫存
        if (this.selectSku.stock !== undefined && this.selectSku.stock <= 0) {
          uni.showToast({ title: this.$t('mall.goodsSoldOut'), icon: 'none' })
          return
        }
        await this.$store.dispatch('cart/add', {
          goods_id: this.goodsData.id,
          sku_id: this.selectSku.id,
          title: this.goodsData.title,
          image: this.goodsData.image,
          shop_id: this.goodsData.shop_id,
          shop_name: this.goodsData.shop ? this.goodsData.shop.shopname : '',
          sku: this.selectSku,
          number: this.selectNum,
          sum: parseFloat(this.selectSku.price) * this.selectNum
        })
        uni.showToast({ title: this.$t('mall.addedToCart'), icon: 'success' })
      } else if (this.isChoice === 'placeOrder') {
        // 新增：檢查是否選擇了規格
        if (!this.selectSku || !this.selectSku.id) {
          uni.showToast({ title: this.$t('mall.selectProductSpec'), icon: 'none' })
          return
        }
        // 新增：檢查庫存
        if (this.selectSku.stock !== undefined && this.selectSku.stock <= 0) {
          uni.showToast({ title: this.$t('mall.goodsSoldOut'), icon: 'none' })
          return
        }
        let goodsData = [
          {
            goods_id: this.goodsData.id,
            number: this.selectNum,
            sku_id: this.selectSku.id
          }
        ]
        if (this.$store.state.user.isLogin) {
          uni.navigateTo({
            url: `/pages/order/confirm?type=goods&data=${JSON.stringify(goodsData)}`
          })
        } else {
          uni.navigateTo({ url: '/pages/passport/signin' })
        }
      }
      this.hideModal()
    },
    handleNav(url) {
      this.hideModal()
      uni.navigateTo({ url })
    },
    handleSwitchTab(url) {
      this.hideModal()
      uni.switchTab({ url })
    },
    showModal(name) {
      this.isChoice = ''
      this.modalName = name
    },
    hideModal() {
      this.modalName = null
    },
    moveHandle() { },
    toAnchor(index) {
      this.selectAnchor = index
      uni.pageScrollTo({ scrollTop: this.anchorlist[index].top, duration: 200 })
    },
    calcAnchor() {
      var query = uni.createSelectorQuery().in(this)
      query.select('#evaluate').boundingClientRect(rec => {
        if (rec) this.anchorlist[1].top = rec.top - this.statusBarH - 44 - 45
      }).exec()
      query.select('#details').boundingClientRect(rec => {
        if (rec) this.anchorlist[2].top = rec.top - this.statusBarH - 44 - 45
      }).exec()
      query.select('#recommend').boundingClientRect(rec => {
        if (rec) this.anchorlist[3].top = rec.top - this.statusBarH - 44 - 45
      }).exec()
    },
    goBack() {
      uni.navigateBack({ delta: 1 })
    },
    goHome() {
      uni.switchTab({ url: '/pages/index/index' })
    },
    goSearch() {
      uni.navigateTo({ url: '/pages/page/search' })
    },
    goCart() {
      uni.navigateTo({ url: '/pages/cart/index' })
    },
    goChat(shop_id, goods = null) {
      if (goods) {
        uni.navigateTo({ url: `/pages/notice/chat?shop_id=${shop_id}&goods=${JSON.stringify(goods)}` })
      } else {
        uni.navigateTo({ url: `/pages/notice/chat?shop_id=${shop_id}` })
      }
    },
    goComment(tag) {
      uni.navigateTo({ url: '/pages/product/comment?id=' + this.goodsId + '&praise=' + (this.goodsData.praise || 0) + '&tag=' + tag })
    },
    onShopGoods() {
      uni.navigateTo({ url: '/pages/product/list?shop_id=' + this.goodsData.shop_id })
    },
    onShop() {
      uni.navigateTo({ url: '/pages/shop/index?id=' + this.goodsData.shop_id })
    },
    onGoods(id) {
      uni.redirectTo({ url: '/pages/product/goods?id=' + id })
    }
  }
}
</script>

<style>
.cu-custom .cu-bar .search-form {
  background-color: #fff;
}

.cu-custom .cu-bar {
  background-color: #f3f3f3;
  z-index: 99;
}

.cu-custom .bar-bg {
  background-color: rgba(243, 243, 243, 0.96);
}

.cu-custom .cu-bar .nav .cu-item {
  line-height: 70rpx;
  height: 70rpx;
}

.wanl-goods {
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.cu-custom {
  position: relative;
}

.cu-bar.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cu-bar .action {
  width: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* 去掉全局colorui的左右margin，让图标贴边 */
.cu-bar .action:first-child {
  margin-left: 0;
}

.cu-bar .action:last-child {
  margin-right: 0;
}

.cu-bar .action text {
  font-size: 40rpx;
  color: #333;
}

.search-form {
  flex: 1;
  display: flex;
  align-items: center;
  height: 64rpx;
  background: #fff;
  border-radius: 32rpx;
  padding: 0 20rpx;
  margin: 0 25rpx;
}

.search-form .wlIcon {
  font-size: 30rpx;
  color: #999;
  margin-right: 10rpx;
}

.search-form .action {
  margin-right: 25rpx;
}

.search-swiper {
  flex: 1;
  height: 64rpx;
  font-size: 26rpx;
  color: #999;
  line-height: 64rpx;
}

.bar-bg {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 98;
}

.bar-bg .nav {
  white-space: nowrap;
}

.bar-bg .nav .cu-item {
  display: inline-block;
  padding: 0 30rpx;
  font-size: 28rpx;
  color: #666;
}

.bar-bg .nav .cu-item.cur {
  color: #e54d42;
  font-weight: bold;
  border-bottom: 4rpx solid #e54d42;
}

.text-orange {
  color: #e54d42;
}

.swiper-box {
  position: relative;
  width: 100%;
  height: 100vw;
}

.swiper-box swiper {
  width: 100%;
  height: 100vw;
}

.swiper-box swiper swiper-item image {
  width: 100%;
  height: 100vw;
}

.swiper-box .indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 25rpx;
  height: 40rpx;
  border-radius: 40rpx;
  font-size: 22rpx;
  position: absolute;
  bottom: 20rpx;
  right: 20rpx;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.2);
}

.bg-white {
  background: #fff;
}

.wanl-orange {
  color: #e54d42;
}

.wanl-gray {
  color: #999;
}

.wanl-gray-light {
  color: #ccc;
}

.wanl-gray-dark {
  color: #666;
}

.wanl-black {
  color: #333;
}

.text-red {
  color: #e54d42;
}

.text-price::before {
  content: '¥';
  font-size: 0.8em;
}

.text-dec {
  text-decoration: line-through;
}

.text-xxl {
  font-size: 44rpx;
  font-weight: bold;
}

.text-xl {
  font-size: 36rpx;
  font-weight: bold;
}

.text-df {
  font-size: 28rpx;
}

.text-sm {
  font-size: 24rpx;
}

.text-xs {
  font-size: 20rpx;
}

.text-min {
  font-size: 22rpx;
}

.text-cut {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-cut-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.text-bold {
  font-weight: bold;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.margin-right-xs {
  margin-right: 8rpx;
}

.margin-right-sm {
  margin-right: 16rpx;
}

.margin-right-bj {
  margin-right: 24rpx;
}

.margin-left-xs {
  margin-left: 8rpx;
}

.margin-lr-xs {
  margin-left: 8rpx;
  margin-right: 8rpx;
}

.margin-bottom-xs {
  margin-bottom: 8rpx;
}

.margin-bottom-sm {
  margin-bottom: 16rpx;
}

.margin-bottom-bj {
  margin-bottom: 24rpx;
}

.margin-bottom {
  margin-bottom: 20rpx;
}

.margin-tb-xs {
  margin-top: 8rpx;
  margin-bottom: 8rpx;
}

.padding-lr {
  padding-left: 24rpx;
  padding-right: 24rpx;
}

.padding-lr-bj {
  padding-left: 30rpx;
  padding-right: 30rpx;
}

.padding-bj {
  padding: 24rpx;
}

.padding-top-bj {
  padding-top: 24rpx;
}

.padding-bottom-bj {
  padding-bottom: 24rpx;
}

.padding-bottom {
  padding-bottom: 20rpx;
}

.solid-bottom {
  border-bottom: 1rpx solid #f0f0f0;
}

.solid-top {
  border-top: 1rpx solid #f0f0f0;
}

.radius {
  border-radius: 8rpx;
}

.round {
  border-radius: 100rpx;
}

.radius-bock {
  border-radius: 16rpx;
}

.align-start {
  display: flex;
  align-items: flex-start;
}

.align-center {
  display: flex;
  align-items: center;
}

.flex {
  display: flex;
}

.flex-sub {
  flex: 1;
}

.justify-around {
  justify-content: space-around;
}

.price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.follow {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8rpx 16rpx;
}

.follow text {
  display: block;
}

.follow .wlIcon {
  font-size: 36rpx;
  margin-bottom: 4rpx;
}

.block {
  display: flex;
  gap: 30rpx;
}

.promotion {
  background: #fff;
  margin-bottom: 16rpx;
}

.promotion .item {
  display: flex;
  align-items: center;
  padding: 20rpx 24rpx;
}

.promotion .label {
  width: 100rpx;
  flex-shrink: 0;
}

.promotion .conten {
  flex: 1;
  overflow: hidden;
}

.wanl-ticket {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-right: 16rpx;
  padding: 8rpx 16rpx;
  background: #fff5f0;
  border-radius: 8rpx;
  border: 1rpx solid #ffe0d0;
}

.ticket-price {
  font-size: 24rpx;
  color: #e54d42;
  font-weight: bold;
}

.ticket-title {
  font-size: 20rpx;
  color: #f37b1d;
}

.bnt-quan {
  flex-shrink: 0;
}

.choice {
  border-radius: 16rpx;
  margin-left: 16rpx;
  margin-right: 16rpx;
}

.commodity {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.commodity .opt {
  display: flex;
}

.commodity .title {
  width: 80rpx;
  flex-shrink: 0;
}

.commodity .option {
  flex: 1;
}

.commodity .selected {
  display: flex;
}

.option-list {
  display: flex;
  flex-wrap: wrap;
}

.option-list .cu-tag {
  background-color: #f7f7f7;
  color: #999;
  border-radius: 12rpx;
  height: 60rpx;
  margin-right: 15rpx;
  margin-top: 25rpx;
  padding: 0 20rpx;
  font-size: 24rpx;
  line-height: 60rpx;
}

.option-list .cu-tag+.cu-tag {
  margin-left: 0;
}

.cu-tag {
  display: inline-block;
  padding: 4rpx 16rpx;
  font-size: 22rpx;
  background: #f5f5f5;
  border-radius: 8rpx;
  margin-right: 8rpx;
  margin-bottom: 8rpx;
}

.comment {
  border-radius: 16rpx;
  margin: 0 16rpx 24rpx 16rpx;
}

.comment .head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16rpx;
  font-size: 28rpx;
}

.comment .label {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
}

.comment .label .cu-tag {
  background: #f5f5f5;
  padding: 8rpx 20rpx;
}

.comment .user {
  padding: 16rpx 0;
  border-top: 1rpx solid #f0f0f0;
}

.comment .userinfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.comment .avatar {
  display: flex;
  align-items: center;
}

.cu-avatar {
  display: inline-block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cu-avatar.sm {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
}

.cu-avatar.lg {
  width: 96rpx;
  height: 96rpx;
}

.cu-avatar.round {
  border-radius: 50%;
}

.comment .details {
  padding: 8rpx 0;
}

.comment .more {
  text-align: center;
  padding: 20rpx 0;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
}

.grid-square .bg-img {
  width: 160rpx;
  height: 160rpx;
  background-size: cover;
  background-position: center;
  border-radius: 8rpx;
}

.col-3 .bg-img {
  width: 30%;
}

.col-2 .bg-img {
  width: 48%;
}

.col-1 .bg-img {
  width: 100%;
}

.shop {
  border-radius: 16rpx;
  margin: 0 16rpx;
}

.shop .shopinfo {
  display: flex;
  align-items: center;
}

.shop .shopname {
  flex: 1;
  margin-left: 20rpx;
}

.shop .bnt {
  display: flex;
  flex-shrink: 0;
}

.shop .bnt .cu-btn {
  font-size: 24rpx;
  padding: 0 24rpx;
  height: 56rpx;
  line-height: 56rpx;
}

.cu-btn {
  display: inline-block;
  text-align: center;
  border: none;
}

.line-orange {
  border: 1rpx solid #f37b1d;
  color: #f37b1d;
  background: #fff;
}

.bg-gradual-orange {
  background-image: linear-gradient(45deg, #ff5200, #fe6600);
  color: #ffffff;
}

.bg-gradual-yellow {
  background-image: linear-gradient(to left, #ff9700, #ffca00);
  color: white;
}

.shop .quality {
  display: flex;
  justify-content: space-around;
  padding-top: 20rpx;
}

.shop .quality>view {
  text-align: center;
}

.shop .quality .cu-tag {
  font-size: 20rpx;
  padding: 2rpx 12rpx;
}

.shop .quality .di {
  background: #ffe0d0;
  color: #e54d42;
}

.shop .quality .gao {
  background: #e8f5e9;
  color: #4caf50;
}

.shop-recom {
  border-radius: 16rpx;
  margin: 0 16rpx;
}

.shop-recom .head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16rpx;
  font-size: 28rpx;
}

.shop-recom .recommend {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.shop-recom .recommend:after {
  content: '';
  width: 32%;
  border: 1px solid transparent;
}

.shop-recom .item {
  width: 32%;
  margin-top: 25rpx;
}

.shop-recom .item image {
  width: 100%;
  height: 220rpx;
  overflow: hidden;
  border-radius: 8rpx;
}

.wanl-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx 0 20rpx;
}

.divider-line {
  width: 80rpx;
  height: 2rpx;
  background: #ddd;
}

.divider-text {
  margin: 0 24rpx;
  font-size: 26rpx;
  color: #999;
}

.wanl-goods-content {
  padding: 20rpx;
}

.wanl-goods-content img {
  display: block;
  max-width: 100%;
}

.load-more {
  text-align: center;
  padding: 20rpx 0;
  font-size: 24rpx;
  color: #999;
}

.safeAreaBottom {
  height: 120rpx;
}

.wanlian.cu-bar.tabbar {
  background-color: #f8f8f8;
  padding: 0;
  height: calc(100rpx + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 2;
}

.wanlian.cu-bar.tabbar.shop .action {
  width: 106rpx;
  font-size: 22rpx;
  position: relative;
  text-align: center;
  padding: 0;
  display: block;
  height: auto;
  line-height: 1;
  margin: 0;
  background-color: inherit;
  overflow: initial;
}

.wanlian.cu-bar.tabbar .action [class*="wlIcon-"] {
  width: 100rpx;
  position: relative;
  display: block;
  height: auto;
  margin: 0 auto 10rpx;
  text-align: center;
  font-size: 40rpx;
}

.wanlian.cu-bar.tabbar .action .badge {
  top: -8rpx;
  right: 0;
  background-color: #fe6600;
}

.wanlian.cu-bar.tabbar .btn-group {
  justify-content: center;
}

.wanlian.cu-bar.tabbar .btn-group .cu-btn {
  padding: 0;
  width: 190rpx;
  height: 78rpx;
  line-height: 78rpx;
  text-align: center;
  font-size: 28rpx;
  font-weight: bold;
  border: none;
}

.round-left {
  border-radius: 5000rpx 0 0 5000rpx;
}

.round-right {
  border-radius: 0 5000rpx 5000rpx 0;
}

.WANL-MODAL {
  position: relative;
  z-index: 1000;
}

.cu-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}

.cu-modal.show {
  display: flex;
}

.top-modal {
  align-items: flex-start;
}

.bottom-modal {
  align-items: flex-end;
}

.cu-dialog {
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
  width: 100%;
  max-height: 80vh;
}

.top-modal .cu-dialog {
  border-radius: 0 0 20rpx 20rpx;
}

.wanl-modal {
  position: relative;
  min-height: 500rpx;
  max-height: 1200rpx;
  padding-bottom: 128rpx;
  padding-bottom: calc(118rpx + env(safe-area-inset-bottom));
}

.wanl-modal .head {
  display: flex;
  position: relative;
  align-items: center;
}

.wanl-modal .head .content {
  display: flex;
  justify-content: center;
  width: 100%;
}

.wanl-modal .head .close {
  position: absolute;
  right: 25rpx;
}

.wanl-modal .foot {
  position: absolute;
  padding-top: 25rpx;
  bottom: 0;
  width: 100%;
  height: 128rpx;
  height: calc(118rpx + env(safe-area-inset-bottom));
}

.wanl-modal .foot .cu-btn {
  padding: 0;
  width: 50%;
  height: 78rpx;
  line-height: 78rpx;
  text-align: center;
}

.wanl-modal .foot .cu-btn.complete {
  width: 100%;
}

.wanl-direct .menu-header {
  font-size: 34rpx;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 20rpx 30rpx;
}

.wanl-direct .menu-box {
  color: #fff;
  padding: 40rpx 1rpx 0 1rpx;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  font-size: 26rpx;
}

.wanl-direct .menu-box .menu-item {
  width: 22%;
  height: 160rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  margin-right: 4%;
  margin-bottom: 4%;
}

.wanl-direct .menu-box .menu-item:nth-of-type(4n) {
  margin-right: 0;
}

.wanl-direct .menu-box .menu-item .badge-box {
  position: relative;
  font-size: 52rpx;
}

.wanl-direct .menu-box .menu-item .badge-box .cu-tag {
  right: -25rpx;
}

.wanl-direct .menu-box .menu-item .menu-text {
  padding-top: 12rpx;
}

.wanl-direct .menu-box .wanl-opcity .menu-text,
.wanl-direct .menu-box .wanl-opcity .badge-box {
  opacity: 0.5;
  transition: opacity 0.2s ease-in-out;
}

.wanl-coupon {
  max-height: 50vh;
  padding: 0 24rpx;
}

.coupon-item {
  display: flex;
  background: #fff;
  overflow: hidden;
}

.coupon-item .item-left {
  width: 240rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24rpx;
  background: linear-gradient(135deg, #ff6034, #ee0a24);
  color: #fff;
}

.coupon-item .item-left .prices {
  font-size: 48rpx;
  font-weight: bold;
}

.coupon-item .item-left .discount {
  font-size: 24rpx;
}

.coupon-item .item-left .cu-tag {
  font-size: 20rpx;
  color: #999;
  background: #fff;
}

.coupon-item .item-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.coupon-item .item-right .title {
  display: flex;
  align-items: center;
}

.coupon-item .item-right .tagstyle {
  background: #fff5f0;
  color: #e54d42;
}

.coupon-item .item-right .content {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.coupon-item .item-right .cu-btn {
  background: linear-gradient(to right, #f37b1d, #e54d42);
  color: #fff;
  font-size: 22rpx;
  padding: 8rpx 20rpx;
}

.scroll-y {
  max-height: 60vh;
}

.scroll-y .table {
  display: flex;
  padding: 20rpx 24rpx;
}

.scroll-y .table .name {
  width: 160rpx;
  color: #999;
  flex-shrink: 0;
}

.scroll-y .table .value {
  flex: 1;
}

.listbox {
  text-align: left;
}

.listbox .name {
  position: relative;
  padding-left: 60rpx;
  color: #333;
}

.listbox .name>text[class*="wlIcon-"] {
  position: absolute;
  top: 5rpx;
  left: 5rpx;
  color: #ff243a;
}

.listbox .description {
  padding: 20rpx 0 40rpx 60rpx;
}

.listbox .name {
  font-size: 28rpx;
  font-weight: bold;
}

.listbox .description {
  font-size: 22rpx;
  margin-top: 8rpx;
}

.option .head {
  text-align: left;
}

.option .head .close {
  top: 25rpx;
  line-height: 45rpx;
}

.option .cu-avatar {
  width: 200rpx;
  height: 220rpx;
  flex-shrink: 0;
}

.option .opt {
  margin-bottom: 20rpx;
}

.option .opt .tag {
  display: flex;
  flex-wrap: wrap;
}

.option .opt .tag .cu-tag {
  margin-right: 25rpx;
  margin-top: 20rpx;
  padding: 0 25rpx;
  height: 65rpx;
  background-color: #f6f6f6;
  border-radius: 12rpx;
  color: #222222;
  font-size: 26rpx;
  line-height: 65rpx;
}

.option .opt .tag .cu-tag.active {
  color: #eb5d2a;
  background-color: #fdf9f9;
  border: 1rpx solid #eb5d2a;
}

.option .opt .tag .cu-tag.noactive {
  color: #cacaca;
  background-color: #efefef;
}

.option .opt .tag .cu-tag+.cu-tag {
  margin-left: 0;
}

.number {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.num-ctrl {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.num-btn {
  width: 56rpx;
  height: 56rpx;
  line-height: 56rpx;
  text-align: center;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 32rpx;
}

.num-val {
  font-size: 28rpx;
  min-width: 40rpx;
  text-align: center;
}

.foot-single {
  width: 100%;
}

.foot-single .cu-btn {
  width: 100%;
}

.bg-bgcolor {
  background: #f5f5f5;
}
</style>