<template>
  <div class="page-body">
    <div class="product-image">
      <block v-if="good.List">
        <swiper
          scroll-x="true"
          circular="true"
          class="banner"
          @change="swiperChange"
          :current="pageMsg.current"
        >
          <swiper-item v-for="(img, i) in good.List" :key="i">
            <image
              mode="aspectFill"
              lazy-load="true"
              :src="img.IMAGE_URL"
            ></image>
          </swiper-item>
        </swiper>
        <div class="swiper-dots" v-if="pageMsg.imgeCount > 0">
          <div class="dot">
            {{ pageMsg.current + 1 }}/{{ pageMsg.imgeCount }}
          </div>
        </div>
      </block>
      <block v-else>
        <image
          mode="aspectFill"
          lazy-load="true"
          :src="good.DEFAULT_IMG"
        ></image>
      </block>
    </div>

    <hr />
    <div class="product-info">
      <div
        style="
          display: flex;
          align-items: baseline;
          justify-content: space-between;
        "
      >
        <div class="price-box">
          <block v-if="good.PAY_METHOD !== 1000">
            <span style="font-weight: bold">{{ good.COMMODITY_POINT }}</span>
            <span class="colorRed">积分</span>
          </block>
          <block v-if="good.PAY_METHOD == 1000">
            <div class="vip-price">
              <span style="font-weight: bold">
                {{ good.COMMODITY_MEMBERPRICE }}</span
              >
              <span class="colorRed">元</span>
            </div>
            <!-- <span class="vip-card-ico">会员</span> -->
          </block>
          <block v-else-if="good.PAY_METHOD == 2000">
            <div
              class="vip-price"
              style="
                color: #999;
                font-size: 24rpx;
                text-decoration: line-through;
              "
            >
              <span> {{ good.COMMODITY_MEMBERPRICE }}</span>
              <span style="color: #666; font-size: 24rpx">元</span>
            </div>
          </block>
          <block v-else-if="good.PAY_METHOD == 3000">
            <div class="vip-price" style="color: #666; font-size: 24rpx">
              <span> {{ good.COMMODITY_MEMBERPRICE }}</span>
              <span style="color: #666; font-size: 24rpx">元</span>
            </div>
            <!-- <span class="vip-card-ico">会员</span> -->
          </block>
        </div>
        <div>
          <span class="sale-count">
            {{
              good.COMMODITY_STOCK > 0 ? "库存 " + good.COMMODITY_STOCK : "售罄"
            }}</span
          >
          <span class="sale-count">已售 {{ good.SALE_COUNT }}</span>
        </div>
      </div>
      <div class="join-vip" v-if="!user.MEMBERSHIP_MOBILEPHONE">
        <div class="vip-left">
          <!-- <span class="colorRed">¥{{good.COMMODITY_MEMBERPRICE}}</span> -->
          <div class="vip-title">
            <span class="vip-card-ico">会员卡</span>会员卡专享
          </div>
          <div class="vip-des">专属优惠券、商品折扣</div>
        </div>
        <navigator
          hover-class="navigator-hover"
          class="vip-right"
          url="/pages/register/index"
        >
          加入会员
          <van-icon name="arrow" size="24rpx" color="#333" />
        </navigator>
      </div>
      <div class="product-title">
        {{ good.COMMODITY_NAME }}
      </div>
      <div class="product-brand">
        <!-- <image mode="aspectFit" lazy-load="true" :src="good.IMAGE_PATH || 'https://eshangtech.com/ShopICO/no-picture.png'"></image> -->
        <span v-show="good.SUPPLIER_NAME"
          >供应商：{{ good.SUPPLIER_NAME }}</span
        >
        <button class="share-btn" @tap="handleShowPopup">
          <!-- <van-icon name="share" color="#ea3323" size="20px" /> -->
          <div style="width: 16px; height: 16px">
            <image
              style="width: 16px; height: 16px"
              src="/static/images/home/share.svg"
            />
          </div>
          <div>分享</div>
        </button>
      </div>
    </div>

    <div class="product-detail">
      <div class="detail-unit" v-if="good.COMMODITY_DESC">
        <span class="detail-title">商品简介</span>
        <span>{{ good.COMMODITY_DESC || "暂无" }}</span>
      </div>
      <div class="">
        <div class="detail-unit rate-title">
          <div class="detail-title desc-ico">
            评价
            <!-- <span class="small-title">好评97%</span> -->
          </div>
          <div class="rate-desc" @click="goRate" v-show="pageMsg.rateTotal > 0">
            <span>共{{ pageMsg.rateTotal }}条评论</span>
            <van-icon
              name="arrow"
              size="20rpx"
              color="#262626"
              custom-style="margin-left: 8rpx;"
            />
          </div>
        </div>
        <div class="rate-box" v-if="rateList.length > 0">
          <block v-for="(item, o) in rateList" :key="o">
            <rateItem :item="item" />
          </block>
        </div>
      </div>
      <block v-if="good.ContentImgList && good.ContentImgList.length > 0">
        <div class="detail-unit">
          <span class="detail-title desc-ico">商品详情</span>
        </div>
        <div class="detail-image-box">
          <block
            v-for="(img, i) in good.ContentImgList"
            :key="i"
            v-show="detailImgList[i]"
          >
            <image
              mode="aspectFill"
              lazy-load="true"
              :src="img.IMAGE_URL"
              @load="loadDetailImg($event, i)"
              :style="
                'width:' +
                detailImgList[i].width +
                'rpx; height:' +
                detailImgList[i].height +
                'rpx;'
              "
            ></image>
          </block>
        </div>
      </block>
    </div>

    <!-- 分享商品页面 -->
    <van-popup
      :show="showSharePro"
      closeable
      close-icon-position="top-left"
      position="bottom"
      :custom-style="'height:' + (windowMsg.height + 280) + 'rpx'"
      @close="showSharePro = false"
    >
      <div class="share-pop-body" catchtouchmove="function(){return;}">
        <canvas
          canvas-id="pro"
          class="canvas-content"
          :style="{
            width: windowMsg.width + 'rpx',
            height: windowMsg.height + 'rpx',
          }"
          disable-scroll="true"
          bindtouchstart=""
          bindtouchmove=""
          bindtouchend=""
        ></canvas>

        <view class="down-img-btn">
          <van-button
            icon="down"
            round
            color="linear-gradient(to right, #1f1f1f, #62605f)"
            custom-style="width:300rpx;padding:32rpx auto;"
            @click="saveImage"
            >保存到本地</van-button
          >
        </view>
      </div>
    </van-popup>

    <div class="product-btn-box">
      <navigator class="home-btn" url="/pages/home/index" open-type="switchTab"
        >首页</navigator
      >
      <!-- <div class="shopcart-btn" @click="goShop">购物车<span class="shopcart-count" v-if="totalNum>0">{{totalNum}}</span></div>  -->
      <div
        class="buynow-btn"
        @click="getMemberPoint(1)"
        v-if="good.COMMODITY_STOCK > 0 && good.PAY_METHOD !== 1000"
      >
        立即兑换
      </div>
      <!--  @click="addGoodToCartFn" -->
      <div
        class="join-shopCart"
        @click="getMemberPoint(2)"
        v-if="good.COMMODITY_STOCK > 0 && good.PAY_METHOD !== 2000"
      >
        立即购买
      </div>
      <div
        class="buynow-btn"
        style="background: #eee; color: #999"
        v-if="good.COMMODITY_STOCK < 1"
      >
        已售罄
      </div>
      <!-- <div class="buynow-btn" @click="isShowCount = true">立即购买</div> -->
    </div>
    <van-popup
      :show="isShowCount == 1 || isShowCount == 2"
      position="bottom"
      overlay="false"
      @close="isShowCount = 0"
    >
      <div class="popup-box">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div>购买数量：</div>
          <view class="cartcontrol">
            <span
              @click="
                pageMsg.buyCount > 1
                  ? pageMsg.buyCount--
                  : (pageMsg.buyCount = 1)
              "
              class="cart-decrease"
            ></span>
            <span class="cart-count">{{ pageMsg.buyCount }}</span>
            <span
              @click="pageMsg.buyCount++"
              class="cart-add icon-add_circle"
            ></span>
          </view>
        </div>
        <div style="margin-top: 20rpx" v-if="isShowCount == 1">
          您的可用积分为：{{ pageMsg.memberPoint }}积分
        </div>

        <div class="buy-it-btn" @click="buyNow">确认购买</div>
      </div>
    </van-popup>
    <UniPopup
      :show="showShareBox"
      position="bottom"
      overlay="false"
      @close="handleClosePopup"
      ref="popup"
    >
      <view class="share-popup" style="background-color: #fff">
        <view class="share-divider">
          <text>分享</text>
        </view>
        <!-- <van-divider contentPosition="center">分享</van-divider> -->
        <view class="share-pop-btn">
          <button open-type="share" @tap="handleClosePopup">
            <image
              src="https://eshangtech.com/ShopICO/icos/fxhy.png"
              act
            ></image>
            <text>分享给好友</text>
          </button>
          <button @tap="creatPageQR">
            <image src="https://eshangtech.com/ShopICO/icos/fxpyq.png"></image>
            <text>生成分享海报</text>
          </button>
        </view>
      </view>
    </UniPopup>
  </div>
</template>
<script>
import rateItem from "../../rate/components/rateItem";
import { mapGetters, mapActions, mapMutations } from "vuex";
import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
export default {
  data() {
    const windows = uni.getSystemInfoSync();

    return {
      pageMsg: {
        current: 0,
        imgeCount: 0,
        goodId: "",
        buyCount: 1,
        rateTotal: 0,
        memberPoint: 0,
        money: 0,
      },
      isShowCount: 0,
      showSharePro: false, // 是否生成分享海报
      showShareBox: false, // 是否展示分享选项
      good: {},
      rateList: [], // 评价列表
      detailImgList: [],
      windowMsg: {
        width: 375,
        height: 667,
        ratio: 0.5,
        scale: windows.pixelRatio,
      },
    };
  },
  components: {
    rateItem,
    UniPopup,
  },
  computed: {
    ...mapGetters("shoppingCart", {
      totalNum: "goodNum",
    }),
    ...mapGetters(["user"]),
  },
  methods: {
    ...mapActions("shoppingCart", {
      addGood: "ADDGOOD",
      addCate: "ADDCATE",
    }),
    ...mapMutations("shoppingCart", {
      setOrder: "ORDERGOOD",
    }),
    ...mapMutations(["setInvitedCode"]),
    handleShowPopup() {
      this.$refs.popup.open("bottom");
      this.showShareBox = true;
    },
    handleClosePopup() {
      this.$refs.popup.close();
      this.showShareBox = false;
    },
    swiperChange(e) {
      this.pageMsg.current = e.mp.detail.current;
    },
    goShop() {
      uni.navigateTo({ url: "/pages/product/shopCart/index" });
    },
    getDetail() {
      let _this = this;
      this.$api
        .getCoop({
          action_type: "GetGoodsDetail",
          commodityId: _this.pageMsg.goodId,
        })
        .then(function (res) {
          _this.good = res.Data;
          _this.pageMsg.current = 0;
          _this.pageMsg.imgeCount = res.Data.List.length || 0;

          if (_this.good.COMMODITY_DESC.indexOf("</br>") > -1) {
            let desArr = _this.good.COMMODITY_DESC.split("</br>");
            _this.good.COMMODITY_DESC = [];
            desArr.forEach((element) => {
              _this.good.COMMODITY_DESC.push({
                name: "p",
                children: [{ type: "text", text: element }],
              });
            });
          }

          _this.good.ContentImgList.map((n) => {
            _this.detailImgList.push({ width: 750, height: 400 });
          });
        });
    },
    getRate() {
      // 获取商品评价
      let _this = this;
      _this.$api
        .getCoop({
          action_type: "getMallCommentList",
          commodityId: this.pageMsg.goodId,
          pageIndex: 1,
          pageSize: 3,
        })
        .then((res) => {
          _this.rateList = res.Data.List;
          _this.pageMsg.rateTotal = res.Data.TotalCount;
        });
    },
    goRate() {
      uni.navigateTo({ url: "/pages/rate/index?id=" + this.pageMsg.goodId });
    },
    seePhoto(item, list) {
      let u = [];

      list.map((n) => {
        u.push(n.IMAGE_URL);
      });
      uni.previewImage({
        current: item, // 当前显示图片的http链接
        urls: u, // 需要预览的图片http链接列表
      });
    },
    addGoodToCartFn: function () {
      // 添加商品到购物车
      let cate = {
        USERDEFINEDTYPE_NAME: this.good.USERDEFINEDTYPE_NAME,
        USERDEFINEDTYPE_ID: this.good.USERDEFINEDTYPE_ID,
      };
      this.addGood(this.good);
      this.addCate(cate);
      this.$forceUpdate();
    },

    buyNow() {
      let s = [];
      let _this = this;
      let el = this.good;

      if (
        _this.isShowCount === 1 &&
        _this.pageMsg.memberPoint < this.pageMsg.buyCount * el.COMMODITY_POINT
      ) {
        uni.showToast({
          title: "您的积分不足",
          icon: "none",
        });
        return;
      }
      s.push({
        COMMODITY_ID: el.COMMODITY_ID,
        COMMODITY_CODE: el.COMMODITY_CODE,
        COMMODITY_NAME: el.COMMODITY_NAME,
        COMMODITY_BARCODE: el.COMMODITY_BARCODE,
        COMMODITY_UNIT: el.COMMODITY_UNIT,
        COMMODITY_RULE: el.COMMODITY_RULE,
        COMMODITY_POINT: el.COMMODITY_POINT,
        ORDER_COUNT: this.pageMsg.buyCount,
        AVERAGE_PRICE: el.COMMODITY_MEMBERPRICE,
        ORDER_AMOUNT: this.pageMsg.buyCount * el.COMMODITY_MEMBERPRICE,
        DISCOUNT_AMOUNT: 0,
        SUPPLIER_ID: el.SUPPLIER_ID,
        SUPPLIER_NAME: el.SUPPLIER_NAME,
        DEFAULT_IMG: el.DEFAULT_IMG,
        PAY_TYPE: _this.isShowCount === 1 ? 3000 : 1000, // 支付方式 3000 积分支付
      });
      _this.isShowCount = 0;
      _this.setOrder(s);
      uni.navigateTo({
        url:
          "/pages/product/confirmOrder/index?type=1&nature=" +
          el.COMMODITY_NATURE,
      });
    },
    loadDetailImg(e, i) {
      // 加载商品介绍图片指定原尺寸宽高
      let $width = e.mp.detail.width; // 获取图片真实宽度
      let $height = e.mp.detail.height;
      // 将图片的datadata-index作为image对象的key,然后存储图片的宽高值
      this.detailImgList[i] = {
        width: $width,
        height: $height,
      };
      this.$forceUpdate();
    },
    getMemberPoint(type) {
      // 获取会员积分
      let _this = this;
      if (this.user.MEMBERSHIP_ID) {
        this.$api
          .getCoop({
            action_type: "GetMemberPoint",
          })
          .then(function (rs) {
            _this.pageMsg.memberPoint = rs.Data.MEMBERSHIP_POINT;
            _this.pageMsg.money = rs.Data.MEMBERSHIP_POINT;
            _this.isShowCount = type;
          });
      } else {
        uni.showModal({
          title: "温馨提示",
          content: "您还没有登录，快去登录吧",
          confirmText: "一键登录",
          confirmColor: "#498fe2",
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({ url: "/pages/register/index" });
            }
          },
        });
      }
    },

    creatPageQR() {
      // 生成当前页面小程序二维码
      let _this = this;
      _this.showShareBox = false;
      uni.showLoading({ title: "正在加载" });
      _this.$api
        .getCoop({
          action_type: "CreateWxCode",
          page: "pages/product/productDetail/index",
          scene: _this.pageMsg.goodId + "&" + _this.user.InviteCode, // 商品id & 当前用户邀请码
          width: 280,
        })
        .then((res) => {
          // let bin64 = res.Data.imgUrl
          // 生成的base64二维码
          // let fs = uni.getFileSystemManager()

          // fs.writeFile({
          //   filePath: `${uni.env.USER_DATA_PATH}/` + _this.pageMsg.goodId + `pro.png`,
          //   data: bin64,
          //   encoding: 'base64',
          //   success (res) {
          uni.getImageInfo({
            src: res.Data.imgUrl,
            success(res) {
              let codePath = res.path;
              let codeW = res.width;

              uni.getImageInfo({
                src: _this.good.DEFAULT_IMG, // _this.good.DEFAULT_IMG,
                success: (rs) => {
                  let productPath = rs.path;
                  let productW = rs.width;
                  let productH = rs.height;
                  _this.showSharePro = true;
                  _this.drawImage(
                    productPath,
                    productW,
                    productH,
                    codePath,
                    codeW
                  );
                },
              });
            },
            fail(err) {
              console.error(err);
            },
          });
          // },
          // fail (err) {
          //   console.error(err)
          // }})
        });
    },
    drawImage(productPath, productW, productH, codePath, codeW) {
      // 才canvas上画海报
      let _this = this;

      let canv = uni.createCanvasContext("pro", this);
      let ratio = uni.getSystemInfoSync().windowWidth / 750; // 适配不同机型的图片比例
      let imgMaxW = _this.windowMsg.width;
      // let imgMaxH = _this.windowMsg.width
      let canvHeight = _this.windowMsg.height;

      let paddL = 24 * ratio;
      let paddT = 24;
      let clipWidth = imgMaxW * ratio;
      let clipHeight = ((productH * imgMaxW) / productW) * ratio;
      let imgLeft = 0;

      if (productH / productW > 1.5 || clipHeight > clipWidth) {
        // 如果图片原图比例1：1.5则需要根据商品的高度调整适配
        clipHeight = imgMaxW * ratio;
        clipWidth = (clipHeight * productW) / productH;
        imgLeft = (imgMaxW * ratio - clipWidth) / 2;
      }

      // 设置一个背景色
      canv.fillStyle = "#fff";
      canv.fillRect(0, 0, imgMaxW * ratio, canvHeight);
      // canv.draw()

      // 设置字体大小、文本颜色 （如果不先写文字 则图片无法写入）
      canv.setFontSize(20 * ratio);
      canv.setFillStyle("#454545");
      // 简易绘制两行文本，多余...
      _this.canvasTextAutoLine(
        _this.good.COMMODITY_NAME,
        canv,
        paddL,
        paddT,
        28,
        clipWidth - 24,
        1
      ); // 标题
      // 绘制价格

      let text = _this.good.PAY_METHOD === 2000 ? "积分" : "元";
      let price =
        _this.good.PAY_METHOD === 2000
          ? _this.good.COMMODITY_POINT
          : _this.good.COMMODITY_MEMBERPRICE;
      canv.setFontSize(30 * ratio);
      canv.setFillStyle("#EA3323");
      canv.fillText(price, paddL, paddT + 28 * ratio + 8);

      let priceWidth = canv.measureText(price + "").width;
      canv.setFontSize(16 * ratio);
      canv.setFillStyle("#EA3323");
      canv.fillText(text, paddL + priceWidth + 1, paddT + 28 * ratio + 8);

      canv.setFontSize(16 * ratio);
      canv.setFillStyle("#999");
      canv.fillText(
        "长按识别·去逛逛",
        60 * ratio + 80,
        (canvHeight - 92) * ratio
      );
      canv.draw();

      canv.save();
      // 绘制商品图片
      canv.drawImage(
        productPath,
        0 + imgLeft,
        paddT + 58 * ratio,
        clipWidth,
        clipHeight
      );

      // 绘制小程序二维码图片

      canv.drawImage(codePath, 60 * ratio, (canvHeight - 164) * ratio, 72, 72);
      canv.draw(true);
      // canv.scale(ratio, ratio)
      uni.hideLoading();
    },
    /*
      *  绘制多行文本，自动换行，超出添加...
      *
      str:要绘制的字符串
      canvas:canvas对象
      initX:绘制字符串起始x坐标
      initY:绘制字符串起始y坐标
      lineHeight:字行高，自己定义个值即可
      maxWidth: 文本最大宽度
      row: 最大行数
      */
    canvasTextAutoLine: function (
      str,
      ctx,
      initX,
      initY,
      lineHeight,
      maxWidth,
      row = 1
    ) {
      var lineWidth = 0;
      var lastSubStrIndex = 0;
      var currentRow = 1;
      for (let i = 0; i < str.length; i++) {
        lineWidth += ctx.measureText(str[i]).width;
        if (lineWidth > maxWidth) {
          currentRow++;
          let newStr = str.substring(lastSubStrIndex, i);
          if (currentRow > row && str.length > i) {
            newStr = str.substring(lastSubStrIndex, i - 2) + "...";
          }
          ctx.fillText(newStr, initX, initY);
          initY += lineHeight;
          lineWidth = 0;
          lastSubStrIndex = i;

          if (currentRow > row) {
            break;
          }
        }
        if (i === str.length - 1) {
          ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
        }
      }
    },
    saveImage() {
      // 将海报保存图片到
      let _this = this;
      uni.getSetting({
        success(res) {
          if (!res.authSetting["scope.writePhotosAlbum"]) {
            uni.authorize({
              scope: "scope.writePhotosAlbum",

              success() {
                // 用户已经同意小程序使用相册

                _this.saveImageToPhotos();
              },

              fail() {
                wx.openSetting({
                  success: (res) => {},
                });
              },
            });
          } else {
            // 用户已经同意小程序使用相册

            _this.saveImageToPhotos();
          }
        },
      });
    },
    saveImageToPhotos(tempFilePath) {
      let _this = this;
      uni.showLoading({ title: "正在生成图片" });
      uni.canvasToTempFilePath(
        {
          width: _this.windowMsg.width, // 导出图片的宽
          height: _this.windowMsg.height, // 导出图片的高
          destWidth: _this.windowMsg.width * _this.windowMsg.scale * 4, // 导出图片的宽
          destHeight: _this.windowMsg.height * _this.windowMsg.scale * 4, // 导出图片的高

          canvasId: "pro",
          success: function (res) {
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success(result) {
                uni.hideLoading();
                uni.showToast({
                  title: "保存成功，从相册中分享到朋友圈吧",
                  icon: "none",
                  duration: 4000,
                });
                _this.showSharePro = false;
              },
              fail: function (res) {
                uni.showToast({
                  title: "图片保存失败",
                  icon: "none",
                  duration: 2000,
                });
              },
            });
          },
          fail: function (res) {
            wx.showToast({
              title: "图片生成失败",
              icon: "none",
              duration: 2000,
            });
          },
        },
        _this
      );
    },
  },
  onShareAppMessage() {
    let _this = this;

    return {
      title: _this.good.COMMODITY_NAME,
      path:
        "/pages/product/productDetail/index?invite=" +
        _this.user.InviteCode +
        "&id=" +
        _this.pageMsg.goodId,
      imageUrl: _this.good.DEFAULT_IMG,
    };
  },
  onUnload() {
    this.isShowCount = false;
    this.showSharePro = false;
    this.good = {};
  },
  onShow() {
    this.getDetail();
  },
  onLoad(option) {
    if (option.scene) {
      // 是否是商品分享码扫入的 带有他人的邀请码
      let scene = decodeURIComponent(option.scene);
      scene = scene.split("&");
      this.pageMsg.goodId = scene[0];
      this.setInvitedCode(scene[1]);
    } else {
      this.pageMsg.goodId = option.id;
    }

    if (option.invite) {
      this.setInvitedCode(option.invite);
    }
    this.pageMsg.buyCount = 1;

    this.getRate();
  },
};
</script>


<style lang="stylus" scoped>
.page-body {
  height: 100%;
}

* {
  box-sizing: border-box;
}

hr {
  color: #E9E9E9;
  height: 2rpx;
}

.product-image {
  height: 488rpx;
  width: 100%;
  // padding-top 20rpx
  background: #fff;

  .banner {
    height: 488rpx;
    width: 100%;
    margin: 0 auto;

    image {
      height: 488rpx;
      width: 100%;
    }
  }
}

.swiper-dots {
  width: 100%;
  height: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  bottom: 70rpx;
  // flex-direction row
  // position absolute
  // left 50%
  // transform translateX(-50%)
  // bottom 100rpx
}

.dot {
  width: 70rpx;
  height: 32rpx;
  border-radius: 32rpx;
  line-height: 32rpx;
  background-color: rgba(0, 0, 0, 0.3);
  // opacity .3
  font-size: 26rpx;
  color: #fff;
  text-align: center;
}

.product-info {
  background: #fff;
}

.price-box {
  color: #EA3323;
  font-size: 40rpx;
  height: 75rpx;
  padding-bottom: 25rpx;
  line-height: 1;
  padding-left: 32rpx;
  display: flex;
  align-items: flex-end;
  position: relative;
}

.sale-count {
  font-size: 24rpx;
  color: #333;
  padding-right: 32rpx;
}

.vip-price {
  font-size: 38rpx;
  color: #EA3323;

  // display flex
  // align-items flex-end
  // margin-left 24rpx
  // justify-content center

  // line-height 1
  // padding-bottom 4rpx
  .vip-card-ico {
    background: url('https://eshangtech.com/ShopICO/shoppingMall/vip-text.png') no-repeat center; // eshangtech.com/ShopICO/shoppingMall/vip-text.png) no-repeat center
    background-size: contain;
    font-size: 18rpx;
    color: #e6e1cf;
    height: 26rpx;
    line-height: 26rpx;
    width: 52rpx;
    text-align: right;
    padding-right: 10rpx;
    margin-bottom: 2rpx;
    display: inline-block;
  }
}

// .share-btn:before
// content ''
// height 31rpx
// width 32rpx
// background url(https://eshangtech.com/ShopICO/shoppingMall/share-btn.png) no-repeat center
// background-size contain
.share-btn {
  position: relative;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ea3323;
  font-size: 20rpx;
  // height 100rpx
  width: 100rpx;
  justify-content: center;
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

button:after {
  border: none;
}

.colorRed {
  color: #EA3323;
  font-size: 24rpx;
  margin-right: 32rpx;
}

.join-vip {
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 26rpx;
  border: 1rpx solid #ebebeb;

  .vip-left {
    background: #F7F7F7;
    flex: 1;
    height: 120rpx;
    padding-left: 32rpx;
    padding-top: 16rpx;
    box-sizing: border-box;

    .vip-card-ico:before {
      content: '';
      background: url('https://eshangtech.com/ShopICO/shoppingMall/vip-ico.png') no-repeat center; // eshangtech.com/ShopICO/shoppingMall/vip-ico.png) no-repeat center
      width: 13rpx;
      height: 12rpx;
      margin-right: 4rpx;
      background-size: contain;
    }

    .vip-card-ico {
      font-size: 20rpx;
      color: #e6e1cf;
      border-radius: 20rpx;
      height: 30rpx;
      display: flex;
      align-items: center;
      line-height: 30rpx;
      background: #362F14;
      width: 90rpx;
      justify-content: center;
      margin-right: 8rpx;
    }

    .vip-title {
      color: #333;
      line-height: 1.5;
      display: flex;
      align-items: center;
    }

    .vip-des {
      color: #999;
      line-height: 2;
    }
  }

  .vip-right {
    height: 120rpx;
    display: flex;
    align-items: center;
    background: #F4EEE0;
    width: 140rpx;
    line-height: 1.5;
    padding: 20rpx 20rpx 20rpx 36rpx;
    color: #000;
    box-sizing: border-box;
  }
}

.product-title {
  color: #333333;
  line-height: 1.5;
  font-weight: bolder;
  font-size: 30rpx;
  padding: 24rpx 32rpx 16rpx 32rpx;
}

.product-brand {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  color: #999999;
  font-size: 24rpx;
  padding: 8rpx 16rpx 32rpx 32rpx;

  image {
    height: 38rpx;
    width: 38rpx;
    border-radius: 38rpx;
    margin-right: 16rpx;
  }
}

.product-detail {
  margin-top: 32rpx;
  font-size: 26rpx;
  padding-bottom: 100rpx;
}

.detail-unit {
  padding: 32rpx;
  display: flex;
  align-items: top;
  justify-content: space-between;
  background: #ffffff;
  margin-top: 32rpx;
  border-radius: 16rpx 16rpx 0 0;
}

.detail-unit+.detail-unit {
  border-top: 2rpx solid #e9e9e9;
}

.detail-title {
  color: #262626;
  font-size: 32rpx;
  min-width: 116rpx;
  margin-right: 20rpx;
}

.detail-title .small-title {
  font-size: 24rpx;
  color: #EA3A3C;
  margin-left: 16rpx;
}

.rate-desc {
  color: #B2B2B2;
  font-size: 24rpx;
}

.rate-title {
  align-items: center;
}

.rate-box {
  background: #fff;
  padding: 16rpx 32rpx;
}

.detail-image-box {
  width: 750rpx;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.product-btn-box {
  height: 100rpx;
  width: 100%;
  position: fixed;
  bottom: 0rpx;
  left: 0;
  display: flex;
  align-items: center;
  text-align: center;
  z-index: 1;

  .home-btn:before {
    content: '';
    height: 45rpx;
    width: 47rpx;
    background: url('https://eshangtech.com/ShopICO/shoppingMall/home.png') no-repeat center; // eshangtech.com/ShopICO/shoppingMall/home.png) no-repeat center
    background-size: contain;
  }

  .home-btn {
    flex: 1;
    background: #fff;
    border-top: 2rpx solid #e9e9e9;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #C6A773;
    font-size: 20rpx;
    height: 100rpx;
    justify-content: center;
    position: relative;
  }

  .shopcart-btn:before {
    content: '';
    height: 45rpx;
    width: 47rpx;
    background: url('https://eshangtech.com/ShopICO/shoppingMall/shopcart.png') no-repeat center; // eshangtech.com/ShopICO/shoppingMall/shopcart.png) no-repeat center
    background-size: contain;
  }

  .shopcart-btn {
    flex: 1;
    background: #fff;
    border-top: 2rpx solid #e9e9e9;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #C6A773;
    font-size: 20rpx;
    height: 100rpx;
    justify-content: center;
    position: relative;
  }

  .shopcart-count {
    position: absolute;
    top: 10rpx;
    right: 66rpx;
    width: 42rpx;
    height: 32rpx;
    line-height: 32rpx;
    text-align: center;
    border-radius: 32rpx;
    font-size: 18rpx;
    font-weight: 700;
    color: #fff;
    background: rgba(240, 20, 20, 0.808);
    // box-shadow 0 0rpx 4rpx 0 rgba(0, 0, 0, 0.4)
  }

  .join-shopCart {
    flex: 2;
    background: #404040;
    font-size: 30rpx;
    line-height: 100rpx;
    color: #fff;
  }

  .buynow-btn {
    flex: 2;
    font-size: 30rpx;
    line-height: 100rpx;
    color: #fff;
    background: linear-gradient(to right, #C5A671, #DCC194);
  }
}

.popup-box {
  padding: 50rpx 40rpx 32rpx;
  font-size: 28rpx;
}

.cart-count {
  width: 80rpx;
  line-height: 40rpx;
  text-align: center;
  font-size: 20rpx;
  color: #333;
  height: 40rpx;
  font-size: 28rpx;
}

.buy-it-btn {
  text-align: center;
  width: 674rpx;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 6rpx;
  font-size: 32rpx;
  color: #fff;
  margin-top: 100rpx;
  background: linear-gradient(to right, #1f1f1f, #62605f);
}

.cartcontrol {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: 45rpx;
}

.cart-decrease {
  width: 48rpx;
  height: 48rpx;
  border: 2rpx solid #eee;
  position: relative;
  border-radius: 50%;
}

.cart-decrease:before {
  content: '';
  height: 4rpx;
  width: 25rpx;
  background: #4d4d4d;
  display: block;
  position: absolute;
  left: 12rpx;
  top: 21rpx;
  border-radius: 4rpx;
}

.cart-add {
  width: 48rpx;
  height: 48rpx;
  border: 2rpx solid #e6e6e6;
  position: relative;
  border-radius: 50%;
  box-sizing: border-box;
}

.cart-add:before {
  content: '';
  height: 4rpx;
  width: 25rpx;
  background: #4d4d4d;
  display: block;
  position: absolute;
  left: 11rpx;
  top: 21rpx;
  border-radius: 4rpx;
}

.cart-add:after {
  content: '';
  height: 25rpx;
  width: 4rpx;
  background: #4d4d4d;
  display: block;
  position: absolute;
  top: 11rpx;
  left: 21rpx;
  border-radius: 4rpx;
}

.desc-ico:before {
  content: '';
  height: 30rpx;
  width: 6rpx;
  background: linear-gradient(#DCB97E, #FAEFDD);
  display: inline-block;
  vertical-align: middle;
  margin-right: 16rpx;
}

// 分享商品页弹出窗口
.share-pop-body {
  width: 100%;
  background: #f9f9f9;
  overflow: hidden;
  height: 100%;
  position: relative;
  padding-top: 80rpx;
  box-sizing: border-box;
}

.down-img-btn {
  text-align: center;
  padding: 32rpx 0;
  background: #fff;
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
}

.canvas-content {
  margin: auto;
  display: hidden;
}

// 
.share-pop-btn {
  display: flex;
  align-items: center;
  padding-bottom: 40rpx;
}

.share-pop-btn button {
  display: flex;
  align-items: center;
  flex-direction: column;
  background: #fff;
  font-size: 24rpx;
}

.share-pop-btn image {
  width: 80rpx;
  height: 80rpx;
}

.share-popup {
  padding: 16px;
  border-radius: 12px 12px 0 0; /* 圆角设置 */
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
}

.share-divider {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #333;
}

.share-pop-btn {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.share-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: none;
}

.share-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 8px;
}

</style>
