<template>
  <view class="package-details">
    <view class="search">
      <wd-icon color="#fff" name="thin-arrow-left" class="icon" @tap="back"></wd-icon>
      <!-- <view class="searchBox">
        <image class="magnifyingGlass" src="@/static/shop/search.png" mode="aspectFill" />
        <input type="text" :value="test" class="text" />
      </view> -->
      <!-- <view class="icon-box">
        <i class="iconfont icon icon-shoucang"></i>
        <i class="iconfont icon icon-fenxiang"></i>
      </view> -->
    </view>
    <wd-popup
      v-model="showpopup"
      position="bottom"
      custom-style="height: 50%;border-radius: 16rpx 16rpx 0 0 ;box-sizing:border-box;padding:20rpx;"
      @close="handleClose"
      :safe-area-inset-bottom="true"
      custom-class="popup"
    >
      <view class="title-box">
        <text class="title">团购优惠券</text>
        <wd-icon
          @click="showpopup = false"
          color="#D8D8D8"
          name="close-bold"
          size="30rpx"
        ></wd-icon>
      </view>
      <view class="popup-content">
        <view class="ticket-item" v-for="(item, index) in productCoupons" :key="index">
          <view class="ticket-box">
            <view class="normal ticket-left">
              <view class="ticket-box">
                <view class="ticket-price">
                  <text class="price">￥</text>
                  <text class="num">{{ item.discountValue }}</text>
                </view>
                <view class="ticket-desc">
                  <text class="desc">满{{ item.thresholdAmount }}元可用</text>
                  <text class="desc">数量：{{ item.maxNum }}</text>
                </view>
              </view>
            </view>

            <view class="ticket-right">
              <view class="head">
                <text class="title">{{ item.activityName }}</text>
                <view class="headbox">
                  <text class="time">{{ item.endTime }}过期</text>
                  <view v-if="item.numState === 0" class="btn" @click="getCoupon(item)">
                    立即领取
                  </view>
                  <!-- <i
                    v-else
                    class="iconfont icon-lianhe40"
                    style="font-size: 120rpx; color: #efefef"
                  ></i> -->
                  <image v-else class="ylq-icon" src="@/static/shop/yl.png"></image>
                </view>
              </view>
              <view class="foot">
                <view class="line"></view>
                <view class="footbox" @click="showDetailFn(item)">
                  <text class="desc">优惠券规则</text>
                  <text class="more">展开</text>
                  <wd-icon
                    :name="item.showDetail ? 'chevron-down' : 'chevron-right'"
                    size="15px"
                    color="#9d9d9d"
                  ></wd-icon>
                </view>
              </view>
            </view>
          </view>

          <view class="detail" v-if="item.showDetail">
            <view class="line"></view>
            <view class="detail-box" style="font-size: 16rpx">
              {{ item.activityNotes }}
            </view>
          </view>
        </view>
        <wd-status-tip v-if="productCoupons.length === 0" image="content" tip="暂无优惠券" />
      </view>
    </wd-popup>
    <!-- 轮播 -->
    <view class="swiper">
      <wd-swiper
        customClass="swiper-custom"
        :list="prodInfo.imgs"
        autoplay
        height="512rpx"
        customStyle="border-radius: 0rpx;"
        :current="current"
        @click="handleClick"
        @change="onChange"
        :indicator="{ type: 'dots-bar' }"
      ></wd-swiper>
    </view>
    <!-- 轮播-end -->
    <!-- card -->
    <view class="package-details-card">
      <wd-overlay :show="show" @click="show = false">
        <view class="wrapper">
          <view class="block">
            {{ productCoupons[0].activityNotes }}
          </view>
        </view>
      </wd-overlay>
      <view class="package-details-num">
        <view class="num">
          <text class="icon">￥</text>
          <text class="amount-of-money">{{ prodInfo.price }}</text>
        </view>
        <view class="num2">￥{{ prodInfo.oriPrice }}</view>
        <view class="num3">共省￥{{ (prodInfo.oriPrice - prodInfo.price).toFixed(2) }}</view>
      </view>
      <view class="title">{{ prodInfo.prodName }}</view>
      <view class="info-card">
        <view class="yh">
          <text class="yh-name">优惠：</text>
          <view class="bt-icon">
            <!-- <image src="@/static/shop/bt-icon.png"></image>
            <text class="yh-name lj">
              满{{ productCoupons[0].thresholdAmount }}减{{ productCoupons[0].discountValue }}
            </text> -->
            <view class="subsidy">
              <image mode="aspectFill" src="@/static/shop/subsidy.png" />
              <text class="multi-line">
                满{{ productCoupons[0].thresholdAmount }}减{{ productCoupons[0].discountValue }}
              </text>
            </view>
          </view>
          <view class="ylq-icon" @click="showpopup = true">
            {{ productCoupons[0].numState === 0 ? '未领取' : '已领取' }}
            <wd-icon name="arrow-right" size="16px"></wd-icon>
          </view>
        </view>
        <view class="bz">
          <text class="yh-name">保障：</text>
          <view class="icon-box">
            <image src="@/static/shop/icon-1.png" class="m-r"></image>
            过期退
          </view>
          <view style="margin-left: 64rpx" class="icon-box">
            <image src="@/static/shop/icon-2.png" class="m-r"></image>
            随时退
          </view>
          <view style="margin-left: 64rpx" class="icon-box">
            <image src="@/static/shop/icon-3.png" class="m-r"></image>
            随时用
          </view>
          <image style="margin-left: auto" @click="alert" src="@/static/shop/icon-4.png"></image>
        </view>
        <view class="xz">
          <text class="yh-name">限制：</text>
          {{ productCoupons[0].activityNotes }}
        </view>
      </view>
    </view>
    <!-- card-end -->
    <view class="rich-text-card">
      <text class="title">商品详情</text>
      <rich-text class="desc" :nodes="prodInfo.content"></rich-text>
    </view>
    <view class="rich-text-card">
      <text class="title">购买须知</text>
      <!-- <rich-text :nodes="'nodes'"></rich-text> -->
      <view class="purchase-information" v-if="showRlue">
        <view class="purchase-box">
          <text class="title">开始时间</text>
          <text class="content">{{ prodRlue.createTime }}</text>
        </view>
        <view class="purchase-box">
          <text class="title">结束时间</text>
          <text class="content">{{ prodRlue.endTime }}</text>
        </view>
        <view class="purchase-box">
          <text class="title">标签</text>
          <text class="content">{{ prodRlue.labelNames }}</text>
        </view>
        <view class="purchase-box">
          <text class="title">规则</text>
          <text class="content">{{ prodRlue.rule }}</text>
        </view>
      </view>
      <view class="rich-more-btn" @click="showRlueFn">
        {{ showRlue ? '收起' : '展开' }}
        <i v-if="showRlue" class="iconfont icon-shuangshangjiantou-"></i>
        <i v-else class="iconfont xia icon-shuangxiajiantou"></i>
      </view>
    </view>
    <!-- 使用方法-start -->
    <view class="user-detail-card">
      <text class="title">使用方法</text>
      <view class="step-list">
        <view class="step">
          <image class="icon" src="@/static/shop/pay.png"></image>
          线上购买
        </view>
        <wd-icon color="#ABAAAA" name="caret-right-small" size="22px"></wd-icon>
        <view class="step">
          <image class="icon" src="@/static/shop/shop.png"></image>
          线下门店
        </view>
        <wd-icon color="#ABAAAA" name="caret-right-small" size="22px"></wd-icon>
        <view class="step">
          <image class="icon" src="@/static/shop/xcx.png"></image>
          打开小程序
        </view>
        <wd-icon color="#ABAAAA" name="caret-right-small" size="22px"></wd-icon>
        <view class="step">
          <image class="icon" src="@/static/shop/scan-code.png"></image>
          核销劵码
        </view>
      </view>
    </view>
    <!-- 使用方法-end -->
    <!-- 适用门店 -->
    <view class="applicable-stores-card">
      <text class="title">适用门店</text>
      <text class="goods-name">{{ shopInfo.shopName }}</text>
      <view class="goods-pf-rs">
        <text class="goods-fs">{{ shopInfo.grade }}分</text>
        <text class="goods-type">火锅</text>
        <!-- <text class="goods-rs">36/人</text> -->
      </view>
      <text class="distance">距你{{ shopInfo.distance }}</text>
      <text class="address">{{ shopInfo.shopAddress }}</text>
    </view>
    <!-- 适用门店-end -->
    <!-- 底部 -->
    <view class="bottom-operation-bar">
      <view class="start" @click="collectionFn">
        <image v-if="shopInfo.isCollect === 0" src="@/static/shop/start.png"></image>
        <wd-icon v-else color="red" name="star-on" size="22px"></wd-icon>
        {{ shopInfo.privateIntFcount || 0 }}
      </view>
      <!-- <view class="start" @click="shareFn">
        <image src="@/static/shop/share.png"></image>
        分享
      </view> -->
      <view class="start" @click="shareFn">
        <!-- <image src="@/static/shop/share.png"></image>
        分享 -->
      </view>
      <view class="btn" @click="buyNow">立即抢购</view>
    </view>
    <!-- 底部-end -->
  </view>
</template>

<script setup>
import { getProdDetail, getCollect, getCouponShopList, receiveCoupon } from '@/api/packageDetail';
import { getStoreInformation } from '@/api/shop';
import { getDistance } from '@/utils/common';
const prodInfo = ref({});
const prodRlue = ref({});
const myProdId = ref('');
const current = ref(0);
const showRlue = ref(true);
const imgUrl = import.meta.env.VITE_APP_IMG_URL;
const shopInfo = ref({});
const show = ref(false);
const shopLocation = ref({});
const shopId = ref('');
const showpopup = ref(false);
const prodSkusInfo = ref({});
// 商品优惠券
const productCoupons = ref([]);
onLoad((options) => {
  const { prodId } = options;
  myProdId.value = prodId;
  getProdDetailFn(prodId).then((shopId) => {
    getStoreInformationFn(shopId).then((shopInfo) => {
      // 获取位置
      getLocationFn();
    });
    getCouponShopListFn(prodId, shopId);
  });
});
function alert() {
  if (productCoupons.value.length > 0) {
    show.value = true;
  } else {
    xma.showToast({
      title: '暂无优惠券',
      icon: 'error',
    });
  }
}
/**
 * 分享
 */
function shareFn() {}
function back() {
  xma.navigateBack({
    delta: 1,
  });
}
/**
 * 跳转支付
 */
function buyNow() {
  const { prodId, skuId } = prodSkusInfo.value;
  xma.navigateTo({
    url: `/pages/shop/confirmOrder?prodId=${prodId}&skuId=${skuId}`,
  });
}

/**
 * 关闭弹窗
 */
function handleClose() {
  showpopup.value = false;
}
/**
 *  获取套餐详情
 * @param {String} prodId
 */
function getProdDetailFn(prodId) {
  return new Promise((resolve, reject) => {
    getProdDetail(prodId).then((res) => {
      if (res.code === 0) {
        res.data.data.prod.imgs = res.data.data.prod.imgs.split(',');
        res.data.data.prod.imgs.push(res.data.data.prod.pic);
        res.data.data.prod.imgs = res.data.data.prod.imgs
          .map((item) => {
            if (item !== '') {
              item = imgUrl + item;
            }
            return item;
          })
          .filter((item) => {
            return item !== '';
          });
        prodInfo.value = res.data.data.prod;
        prodRlue.value = res.data.data.groupPurchasePackageRule;
        prodSkusInfo.value = res.data.data.skus[0];
        shopId.value = res.data.data.prod.shopId;
        resolve(res.data.data.prod.shopId);
      }
    });
  });
}
/**
 * 获取商品优惠券列表
 */
function getCouponShopListFn(prodId, shopId) {
  getCouponShopList(prodId, shopId).then((res) => {
    if (res.code === 0) {
      res.data = res.data.map((item) => {
        item.showDetail = false;
        return item;
      });
      productCoupons.value = res.data;
    }
  });
}
function showDetailFn(item) {
  item.showDetail = !item.showDetail;
}
/**
 * 获取收藏
 */
function getCollectFn(shopId) {
  getCollect(shopId).then((res) => {
    if (res.code === 0) {
      if (shopInfo.value.isCollect === 0) {
        shopInfo.value.privateIntFcount++;
        shopInfo.value.isCollect = 1;
      } else {
        shopInfo.value.privateIntFcount--;
        shopInfo.value.isCollect = 0;
      }
    }
  });
}
function collectionFn() {
  getCollectFn(shopId.value);
}
/**
 * 领取优惠券
 * @param {*} item
 */
function getCoupon(item) {
  receiveCoupon([item.couponYzfId]).then((res) => {
    if (res.code === 0) {
      item.numState = 1;
    }
  });
}
function getLocationFn() {
  xma.getLocation({
    type: 'wgs84',
    success: function (res) {
      const myLatitude = shopLocation.value.latitude;
      const myLongitude = shopLocation.value.longitude;
      const distance = getDistance(res.latitude, res.longitude, myLatitude, myLongitude, 1);

      shopInfo.value.distance = distance;
    },
    fail: function (err) {
      return err;
    },
  });
}
const showRlueFn = () => {
  showRlue.value = !showRlue.value;
};
const handleClick = (e) => {
  const { index } = e;
  const imgSrc = prodInfo.value.imgs[index];
  previewImage(imgSrc);
};
const onChange = (e) => {};
/**
 * 图片预览
 */
function previewImage(imgSrc) {
  xma.previewImage({
    current: imgSrc, // 当前显示图片的链接，不填则默认为 urls 的第一张
    urls: [imgSrc], // 需要预览的图片链接列表
  });
}
// 获取店铺信息
const getStoreInformationFn = (id) => {
  return new Promise((resolve, reject) => {
    getStoreInformation(id).then((res) => {
      if (res.code === 0) {
        shopInfo.value = res.data.shop;
        if (res.data.shop.labels) {
          shopInfo.value.tagList = res.data.shop.labels.split(',');
        }
        shopLocation.value.latitude = res.data.shop.location.lat;
        shopLocation.value.longitude = res.data.shop.location.lon;
        resolve();
      }
    });
  });
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f9f9f9;
}
.package-details {
  width: 750rpx;
  position: relative;
  padding-bottom: 110 * 2rpx;
  margin: 0 auto;
  .search {
    width: 710rpx;
    height: 80rpx;
    // background: rgba(255, 255, 255, 0.8);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    opacity: 0.8;
    margin: 0 auto;
    margin-top: 44rpx;
    display: flex;
    align-items: center;
    padding-left: 20rpx;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    z-index: 99;
    .arrow {
      width: 15rpx;
      height: 24rpx;
    }
    .icon {
      font-size: 28rpx;
    }
    .searchBox {
      width: 129 * 2rpx;
      height: 26 * 2rpx;
      background: rgba(243, 243, 243, 0.4);
      border-radius: 28rpx 28rpx 28rpx 28rpx;
      display: flex;
      align-items: center;
      padding-left: 20rpx;
      margin-left: 20rpx;
      .magnifyingGlass {
        width: 26rpx;
        height: 26rpx;
      }
      .text {
        margin-left: 10rpx;
        font-size: 24rpx;
      }
    }
    .icon-box {
      display: flex;
      align-content: center;
      margin-left: 86rpx;
      .icon {
        font-size: 40rpx;
        color: #fff;
      }
      .icon-fenxiang {
        margin-left: 20rpx;
      }
    }
  }
  .title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    position: relative;
    top: 0;
    width: 100%;
    .title {
      font-size: 15 * 2rpx;
      font-weight: bold;
      color: #3d3d3d;
    }
  }
  .popup-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20rpx;
    .ticket-item {
      width: 100%;
      background-color: #fff;
      border-radius: 16rpx;
      display: flex;
      flex-direction: column;
      margin-top: 12rpx;
      border: 1 * 2rpx solid #f3f3f3;
      .ticket-box {
        display: flex;

        .normal {
          background: url('../../static/ticket/ticket-normal.png') no-repeat;
          background-size: 100% 100%;
        }

        .past {
          background: url('../../static/ticket/ticket-past.png') no-repeat;
          background-size: 100% 100%;
        }

        .ticket-left {
          width: 200rpx;
          height: 200rpx;

          .ticket-box {
            width: 94%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 30rpx;

            .ticket-price {
              display: flex;
              align-items: last baseline;

              text {
                font-size: 24rpx;
                line-height: 24rpx;
                font-family: PingFang SC;
                color: #fff;
              }

              .num {
                font-size: 52rpx;
              }
            }

            .ticket-desc {
              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 24rpx;

              .desc {
                font-size: 24rpx;
                line-height: 24rpx;
                font-family: PingFang SC;
                color: #fff;
              }
            }
          }
        }

        .ticket-right {
          display: flex;
          flex-direction: column;
          width: 504rpx;
          position: relative;

          .img {
            width: 126rpx;
            height: 94rpx;
            position: absolute;
            right: 28rpx;
            top: 26rpx;
          }

          .head {
            display: flex;
            flex-direction: column;
            padding: 30rpx 22rpx 26rpx 32rpx;
            gap: 4rpx;

            .title {
              font-family: PingFang SC Heavy-Regular;
              font-size: 32rpx;
              color: #333333;
              line-height: 32rpx;
            }

            .headbox {
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 50rpx;

              .time {
                font-family: PingFang SC Heavy-Regular;
                font-size: 20rpx;
                color: #999999;
                line-height: 20rpx;
              }
              .ylq-icon {
                width: 64 * 2rpx;
                height: 64 * 2rpx;
              }

              .btn {
                padding: 20rpx;
                box-sizing: border-box;
                border-radius: 26rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(90deg, #ff7051 0%, #ff382e 100%);
                color: #fff;
                font-size: 24rpx;
                line-height: 24rpx;
              }
            }
          }

          .foot {
            display: flex;
            flex-direction: column;
            padding: 0 22rpx 14rpx 32rpx;
            gap: 14rpx;

            .line {
              // border-top: 2rpx solid #f2f2f2;
            }

            .footbox {
              display: flex;
              align-items: center;
              justify-content: space-between;
              .more {
                margin-left: auto;
                font-size: 8 * 2rpx;
                color: #abaaaa;
              }

              .desc {
                font-family: PingFang SC Heavy-Regular;
                font-size: 20rpx;
                color: #999999;
                line-height: 20rpx;
              }
            }
          }
        }
      }

      .detail {
        display: flex;
        flex-direction: column;
        padding: 24rpx 0rpx 56rpx 0rpx;
        gap: 30rpx;

        .line {
          border-top: 2rpx solid #e7e7e7;
        }

        .detail-box {
          display: flex;
          flex-direction: column;
          gap: 40rpx;
          padding: 0 40rpx 0 22rpx;

          .rowbox {
            display: flex;
            flex-direction: row;
            gap: 48rpx;

            text {
              font-family: PingFang SC Regular;
              font-size: 28rpx;
              color: #666666;
              line-height: 28rpx;
            }

            .desc {
              width: 476rpx;
            }
          }
        }
      }
    }
  }
  .swiper {
    width: 750rpx;
    margin: 0 auto;
    height: 512rpx;
    :deep(.wd-swiper__track) {
      border-radius: 0;
    }
    :deep(.wd-swiper-nav--bottom) {
      bottom: 100rpx;
    }
  }
  .package-details-card {
    width: 710rpx;
    background: #ffffff;
    box-shadow: 0rpx -8rpx 44rpx 0rpx rgba(255, 255, 255, 0.6);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    box-sizing: border-box;
    padding: 20rpx;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    position: relative;
    margin-top: -40rpx;
    .wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }

    .block {
      padding: 20rpx;
      box-sizing: border-box;
      background-color: #fff;
      font-size: 24rpx;
      color: #767676;
    }
    .package-details-num {
      display: flex;
      align-items: flex-end;
      .num {
        color: #ff494e;
        display: inline-block;
        vertical-align: bottom; /* 使元素底部对齐 */
        .icon {
          font-size: 20rpx;
        }
        .amount-of-money {
          font-weight: 700;
          font-size: 48rpx;
        }
      }
      .num2 {
        font-size: 10 * 2rpx;
        color: #908f8f;
        text-decoration: line-through;
        margin-left: 8rpx;
      }
      .num3 {
        background: #fcdbdb;
        border-radius: 14rpx 14rpx 14rpx 0rpx;
        font-size: 10 * 2rpx;
        margin-left: 10rpx;
        padding: 4rpx;
        color: #ff494e;
      }
    }
    .title {
      font-size: 18 * 2rpx;
      font-weight: bold;
      margin-top: 22rpx;
      color: #3d3d3d;
    }
    .info-card {
      width: 335 * 2rpx;
      box-sizing: border-box;
      padding: 20rpx;
      margin-top: 20rpx;
      background: linear-gradient(180deg, rgba(252, 219, 219, 0.5) 0%, rgba(255, 255, 255, 0) 100%);

      .yh-name {
        font-size: 10 * 2rpx;
        color: #ff494e;
      }
      .yh {
        display: flex;
        align-items: center;
        .bt-icon {
          display: flex;
          position: relative;
          image {
            width: 125 * 2rpx;
            height: 22 * 2rpx;
            box-sizing: border-box;
          }
          .lj {
            position: absolute;
            right: 14rpx;
            height: 11 * 2rpx;
            text-align: center;
            line-height: 22rpx;
            top: calc(50% - 11rpx);
          }
          .subsidy {
            width: 144 * 2rpx;
            height: 22 * 2rpx;
            position: relative;
            image {
              position: absolute;
              width: 65 * 2rpx;
              height: 22 * 2rpx;
              top: 0;
              left: 0;
            }
            text {
              border: 1rpx solid #fa5151;
              right: 14rpx;
              height: 20 * 2rpx;
              position: absolute;
              font-size: 11 * 2rpx;
              line-height: 22 * 2rpx;
              top: 0;
              text-align: center;
              left: 65 * 2rpx;
              color: #fa5151;
            }
          }
        }
      }
      .ylq-icon {
        margin-left: auto;
        display: flex;
        align-items: center;
        font-size: 8 * 2rpx;
        color: #abaaaa;
      }

      .bz {
        display: flex;
        align-items: center;
        margin: 22rpx 0 32rpx 0;
        image {
          width: 14 * 2rpx;
          height: 14 * 2rpx;
        }
        .icon-box {
          display: flex;
          align-items: center;
          font-size: 11 * 2rpx;
          color: #abaaaa;
          .m-r {
            margin-right: 10rpx;
          }
        }
      }
      .xz {
        font-size: 10 * 2rpx;
        color: #abaaaa;
      }
    }
  }
  .applicable-stores-card,
  .user-detail-card,
  .rich-text-card {
    width: 355 * 2rpx;
    padding: 20rpx;
    box-sizing: border-box;
    background: #fff;
    margin: 0 auto;
    margin-top: 10rpx;
    border-radius: 8 * 2rpx;
    box-shadow: 0 -8rpx 22 * 2rpx 0 rgba(255, 255, 255, 0.6);
    .desc {
      white-space: pre-line;
    }
    .purchase-information {
      display: flex;
      flex-direction: column;
      align-content: flex-start;
      .purchase-box {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20rpx;
        .title {
          font-size: 11 * 2rpx;
          color: #767676;
        }
        .content {
          font-size: 11 * 2rpx;
          margin-left: 32rpx;
          color: #3d3d3d;
        }
      }
    }
    .title {
      font-size: 13 * 2rpx;
      color: #151515;
      font-weight: 500;
    }
    img {
      width: 100%;
      height: auto;
      margin-top: 20rpx;
    }
    p {
      font-size: 22rpx;
    }
    .rich-more-btn {
      width: 315 * 2rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-top: 1 * 2rpx solid #efefef;
      font-size: 9 * 2rpx;
      color: #abaaaa;
      box-sizing: border-box;
      padding: 20rpx 0 0 0;
      margin-top: 20rpx;
      .xia {
        font-size: 20rpx;
        margin-left: 10rpx;
      }
      image {
        width: 18rpx;
        height: 18rpx;
      }
    }
  }
  .user-detail-card {
    .step-list {
      display: flex;
      justify-content: space-between;
      align-content: center;
      margin-top: 20rpx;
      .step {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 8 * 2rpx;
        color: #151515;
        image {
          width: 40rpx;
          height: 40rpx;
          margin-bottom: 8rpx;
        }
      }
    }
  }
  .applicable-stores-card {
    display: flex;
    flex-direction: column;
    .goods-name {
      font-size: 14 * 2rpx;
      font-weight: bold;
      color: #151515;
      margin-top: 20rpx;
    }
    .goods-pf-rs {
      display: flex;
      align-items: center;
      margin-top: 10rpx;
      .goods-fs {
        font-weight: 500;
        font-size: 14 * 2rpx;
        color: #fa5151;
      }
      .goods-type {
        margin: 0 10rpx;
        font-size: 10 * 2rpx;
        font-weight: 500;
        color: #abaaaa;
      }
      .goods-rs {
        font-size: 10 * 2rpx;
        font-weight: 500;
        color: #abaaaa;
      }
    }
    .distance {
      font-size: 11 * 2rpx;
      color: #fa5151;
    }
    .address {
      margin-top: 20rpx;
      font-size: 11 * 2rpx;
      color: #767676;
    }
  }
  .bottom-operation-bar {
    width: 750rpx;
    background: #fff;
    border-radius: 16rpx 16rpx 0 0;
    display: flex;
    box-sizing: border-box;
    padding: 20rpx 20rpx 96rpx 42rpx;
    position: fixed;
    justify-content: space-between;
    bottom: 0;
    .start {
      font-size: 11 * 2rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #3d3d3d;
      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
    .btn {
      font-size: 12 * 2rpx;
      color: #ffffff;
      border-radius: 16 * 2rpx;
      background: #fa5151;
      box-sizing: border-box;
      padding: 20rpx 208rpx;
      max-height: 72rpx;
    }
  }
}
</style>
