<template>
  <view class="page">
    <scroll-view
      scroll-y="true"
      @scrolltolower="fightPage"
      style="position: absolute; height: 100%; width: 100%"
    >
      <view class="m-product-list">
        <navigator
          :url="
            '/pages/product/detail?pid=' +
            GbInfo.activity_rule.item_id +
            '&gb_id=' +
            GbInfo.gb_id
          "
          class="m-product-item m-product-GP"
        >
          <view class="m-product-img">
            <image lazy-load :src="GbInfo.activity_rule.product_image" />
          </view>
          <view class="m-product-info">
            <view class="m-product-name">
              <label>{{ GbInfo.activity_rule.item.product_item_name }}</label>
              <view class="groupNumber" style="margin-top: 18rpx"
                >{{ __("拼团省") }} {{ __("￥")
                }}{{
                  number_format(
                    parseFloat(
                      (
                        GbInfo.activity_rule.item_unit_price -
                        GbInfo.activity_rule.group_sale_price
                      ).toFixed(12)
                    ),
                    2
                  )
                }}</view
              >
            </view>
            <view style="position: absolute; bottom: 20rpx">
              <view class="groupNumber" style="margin-bottom: 12rpx">
                <!-- <label class="iconfont icon-icon"></label> -->
                <text style="margin-right: 6rpx">{{ GbInfo.gb_quantity }}</text>
                {{ __("人团") }}
              </view>
              <view class="m-product-price">
                <label>{{ __("￥") }}</label
                >{{ number_format(GbInfo.activity_rule.group_sale_price, 2) }}
                <label class="u-del-price" style="margin-left: 6rpx"
                  >{{ __("￥")
                  }}{{
                    number_format(GbInfo.activity_rule.item_unit_price, 2)
                  }}</label
                >
              </view>
            </view>

            <view class="isSucces">
              <image
                lazy-load
                class="simg"
                v-if="1 == GbInfo.gb_enable"
                src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/groupbooking/success.png"
              ></image>
              <image
                lazy-load
                class="simg"
                v-if="0 == GbInfo.gb_enable"
                src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/groupbooking/failure.png"
              ></image>
            </view>
          </view>
        </navigator>
        <view class="headPhoto">
          <view class="personPhoto" v-for="(item, i) in GroupUsers" :key="i">
            <image lazy-load class="photo" :src="item.user_avatar"></image>
            <image
              lazy-load
              class="photo-icon"
              src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/groupbooking/group_leader.png"
              v-if="GbInfo.user_id == item.user_id"
            ></image>
          </view>
          <view
            class="personPhoto"
            v-if="
              GbInfo.gb_quantity > 8
                ? 8 - GbInfo.gb_amount_quantity
                : GbInfo.gb_quantity - GbInfo.gb_amount_quantity
            "
          >
            <image
              lazy-load
              class="photo-bg"
              src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/groupbooking/waiting.png"
            ></image>
          </view>
        </view>
        <view class="surplus" v-if="GbInfo.gb_enable == 2 && show">
          <view>{{
            sprintf(
              __("仅剩 %s 名额，"),
              GbInfo.gb_quantity - GbInfo.gb_amount_quantity
            )
          }}</view>
          <label style="min-width: 160rpx">
            <day-countdown :timer="GbInfo.gb_endtime" :Type="2"></day-countdown>
          </label>
          <label>{{ __("后结束") }}</label>
        </view>
        <block v-if="show">
          <view class="m-btn-box" v-if="GbInfo.gb_enable == 2 && !groupIsEnd">
            <view class="u-btn u-btn-default" @click="shareBox">{{
              __("邀请好友参团")
            }}</view>
          </view>
          <navigator
            url="/activity/fightgroup/list"
            class="m-btn-box"
            v-if="GbInfo.gb_enable == 0"
          >
            <view class="u-btn u-btn-default">{{ __("点击再开一团") }}</view>
          </navigator>
          <navigator
            url="/activity/fightgroup/list"
            class="m-btn-box"
            v-if="GbInfo.gb_enable == 1"
          >
            <view class="u-btn u-btn-default">{{ __("点击再开一团") }}</view>
          </navigator>
          <view class="m-btn-box" v-if="GbInfo.gb_enable == 2 && !ispaysuccess">
            <view class="u-btn u-btn-default" @click="immediatelyOffered">{{
              __("参与活动")
            }}</view>
          </view>
        </block>
      </view>
      <view class="rule">
        <view class="rule-header">
          {{ __("拼团规则") }}
        </view>
        <view class="rule-content">
          {{ GbInfo.activity_rule.activity_intro }}
        </view>
      </view>
      <view class="link">
        <navigator url="/pages/index/index" open-type="switchTab" class="nav">
          <image
            lazy-load
            class="nav-img"
            src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/images/index.png"
          ></image>
          <text>{{ __("首页逛逛") }}</text>
        </navigator>
        <navigator
          url="/pages/category/category"
          open-type="switchTab"
          class="nav"
        >
          <image
            lazy-load
            class="nav-img"
            src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/images/allproduct.png"
          ></image>
          <text>{{ __("全部商品") }}</text>
        </navigator>
        <navigator url="/activity/coupon/list" class="nav">
          <image
            lazy-load
            class="nav-img"
            src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/images/coupon.png"
          ></image>
          <text>{{ __("领券中心") }}</text>
        </navigator>
        <navigator url="/pages/index/member" open-type="switchTab" class="nav">
          <image
            lazy-load
            class="nav-img"
            src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/images/center.png"
          ></image>
          <text>{{ __("个人中心") }}</text>
        </navigator>
      </view>
    </scroll-view>

    <!-- #ifdef H5 -->
    <share-box-h5 :shareDataDefault="shareData" ref="shareBoxH5"></share-box-h5>
    <!-- #endif -->
    <share-box-mp
      :shareDataDefault="shareData"
      @cancelShare="cancelShare"
      @showCodeImg="showCodeImg"
      @shareQRCode="shareQRCode"
      @saveImg="saveImg"
      ref="shareBoxMp"
    ></share-box-mp>
    <share-box-app
      :shareDataDefault="shareData"
      ref="shareBoxApp"
    ></share-box-app>
  </view>
</template>

<script>
import $ from "../../helpers/util";

import dayCountdown from "../../components/day-countdown.vue";
import shareBoxMp from "../../components/share-box-mp.vue";
import shareBoxApp from "../../components/share-box-app.vue";

import { mapState, mapMutations } from "vuex";

export default {
  data: function () {
    return {
      options: {},
      Photo: "",
      UserName: "",
      splistStr: [],
      ispaysuccess: false,
      IsOwner: false,
      order_id: "",
      isfg: false,
      GbInfo: {
        activity_rule: {},
      },
      GroupUsers: [],
      isPage: true,
      page: 1,
      Coupons: [],
      isCancelSuccess: true,
      isCancel: true,
      CouponAmount: 0,
      user_is_new: 0,
      userInfoId: 0,
      show: true,
      groupIsEnd: false,

      PageQRCodeInfo: {
        Path: "",
        IsShare: false,
        IsShareBox: false,
        IsJT: false,
      },
      shareData: {
        shareText: "澜驰商城系统，支持原生App、微信小程序，邀请你一起体验！",
        shareTitle: "澜驰商城系统，支持原生App、微信小程序，邀请你一起体验！",
        href: "https://www.suteshop.com",
        image: "",
      },

      shareText: "澜驰商城系统，支持原生App、微信小程序，邀请你一起体验！",
      shareTitle: "澜驰商城系统，支持原生App、微信小程序，邀请你一起体验！",
      href: "https://www.suteshop.com",
      image: "",
    };
  },
  computed: mapState([
    "Config",
    "StateCode",
    "notice",
    "plantformInfo",
    "shopInfo",
    "userInfo",
    "hasLogin",
  ]),
  components: {
    dayCountdown,
    shareBoxMp,
    shareBoxApp,
  },
  onLoad: function (options) {
    uni.setNavigationBarTitle({
      title: this.__("拼团详情"),
    });

    var that = this;

    that.setData({
      options: options,
    });

    this.forceUserInfo(function (user) {
      that.setData({
        user_is_new: that.userInfo.user_is_new,
        CouponAmount: that.userInfo.CouponAmount,
      });

      that.InitData(options);
    });

    this.notice.addNotification("RefreshFG", that.RefreshFG, that);
  },
  onBackPress() {
    // #ifdef APP-PLUS
    if (this.$refs.shareBoxApp.showBoxView) {
      this.$refs.shareBoxApp.cancel();
      return true;
    }
    // #endif

    // #ifdef MP-WEIXIN
    if (this.$refs.shareBoxMp.showBoxView) {
      this.$refs.shareBoxMp.cancel();
      return true;
    }
    // #endif
  },
  onUnload() {
    // 离开页面，注销事件
    var that = this;
    this.notice.removeNotification("RefreshFG", that);

    // #ifdef APP-PLUS
    if (this.$refs.shareBoxApp.showBoxView) {
      this.$refs.shareBoxApp.cancel();
    }
    // #endif

    // #ifdef MP-WEIXIN
    if (this.$refs.shareBoxMp.showBoxView) {
      this.$refs.shareBoxMp.cancel();
    }
    // #endif
  },
  onShareAppMessage: function () {
    var e = this.GbInfo.gb_quantity - this.GbInfo.gb_amount_quantity,
      t =
        e > 0
          ? this.$.sprintf(
              this.__("【还差 %d 人】 %s 邀请您参加拼团！立省 %.2f 元！"),
              this.GbInfo.gb_quantity - this.GbInfo.gb_amount_quantity,
              this.userInfo.user_nickname,
              (
                this.GbInfo.activity_rule.group_sale_price -
                this.GbInfo.activity_rule.item_unit_price
              ).toFixed(2)
            )
          : this.$.sprintf(
              this.__("%s 拼团成功！他已节省 %.2f 元！赶快来拼团吧!"),
              this.userInfo.user_nickname,
              (
                this.GbInfo.activity_rule.group_sale_price -
                this.GbInfo.activity_rule.item_unit_price
              ).toFixed(2)
            );
    return {
      title: t,
      desc: this.GbInfo.activity_rule.product_item_name,
      path:
        "/activity/fightgroup/detail?gb_id=" +
        this.GbInfo.gb_id +
        "&pid=" +
        this.GbInfo.activity_rule.item_id +
        "&uid=" +
        this.userInfo.user_id,
    };
  },
  methods: {
    ...mapMutations([
      "login",
      "logout",
      "getPlantformInfo",
      "forceUserInfo",
      "getUserInfo",
    ]),

    InitData: function (options) {
      var that = this;
      that.setData({
        Photo: that.userInfo.user_avatar,
        UserName: that.userInfo.user_nickname,
        isfg: options.isfg || false,
      });

      var params = {
        gb_id: options.gb_id || "",
        order_id: options.on || "",
      };

      //todo 详情
      $.request({
        url: this.Config.URL.user.getUserGroupbooking,
        data: params,
        success: function (data, status, msg, code) {
          if (status == 200) {
            data.gbh_rows.forEach(function (e) {
              e.user_id == that.userInfo.user_id &&
                that.setData({
                  userInfoId: e.user_id,
                });

              //判断是否团长
              if (e.user_id == that.userInfo.user_id) {
                e.user_id == that.userInfo.user_id &&
                  that.setData({
                    ispaysuccess: e.gbh_flag,
                    IsOwner: e.user_id == data.user_id,
                    order_id: e.order_id,
                  });
              }
            });

            var $now = new Date().getTime();
            var $end = new Date(data.gb_endtime.replace(/-/g, "/")).getTime();
            var $activityEnd = new Date(
              data.activity_rule.activity_endtime.replace(/-/g, "/")
            ).getTime();
            data.endTime = $end - $now;
            if (data.endTime <= 0) {
              that.setData({
                groupIsEnd: true,
                show: false,
              });
            }
            if ($activityEnd - $now <= 0) {
              that.setData({
                show: false,
              });
            }
            that.setData({
              GbInfo: data,
              GroupUsers: data.gbh_rows,
            });
          }
        },
      });
    },

    RefreshFG: function () {
      var that = this,
        t = {
          gb_id: that.GbInfo.gb_id,
        };
      that.InitData(t);
    },

    immediatelyOffered: function () {
      var that = this;
      /*
				        var param = {
				            Amount: 1,
				            ProductId: this.proId,
				            orderType: 1,
				            activity_id: this.MEID,
				            isOwner: "true",
				            isFightGroup: "2",
				            item_id: this.skuid,
				            AddTime: getNowFormatDate(),
				            ownGroupId: 0,
				            ProductSaleName: this.pname,

				            speStr: JSON.stringify(this.splistStr).replace("[", "").replace("]", "").replace(/\,/g, "  ").replace(/\"/g, "")
				        };*/
      $.navigateTo({
        url:
          "/pages/checkout/checkout?ifcart=0&cart_id=" +
          this.GbInfo.activity_rule.item_id +
          "|" +
          1 +
          "&activity_id=" +
          this.GbInfo.activity_id +
          "&gb_id=" +
          this.GbInfo.gb_id,
      });
    },

    doReceive: function () {
      this.cancel(), this.userReceiveCoupon();
    },
    cancel: function () {
      this.setData({
        isCancel: false,
      });
    },
    cancelsuccess: function () {
      this.setData({
        isCancelSuccess: true,
      });
    },
    innertouch: function () {},
    userReceiveCoupon: function () {
      var e = {
        CouponIds: "",

        user_is_new: this.user_is_new,
      };
      //console.log(e);
      var t = this;
      $.xsr($.makeUrl(userapi.UserReceiveCoupon, e), function (e) {
        e.Code == 0
          ? t.setData({
              isCancelSuccess: false,
              Coupons: e.Info,
            })
          : $.alert(e.Msg);
      });
    },
    fightPage: function (e) {
      if (this.isPage) {
        this.setData({
          isPage: false,
        });
        var t = this;
        clearTimeout(n);
        var n = setTimeout(function () {
          var e = {
            gb_id: t.GbInfo.gb_id,
            EventId: t.GbInfo.MarketingEventId,
            page: parseInt(t.page) + 1,
          };
          /*$.xsr($.makeUrl(fgapi.GetGroupMarketingEventUsersByPage, e), function (n) {
							    if (n.Info.length > 0)
							    {
							        var r = t.GbInfo;
							        r.gbh_rows = r.gbh_rows.concat(n.Info), t.setData({
							            isPage: true,
							            page: e.page,
							            GbInfo: r
							        })
							    }
							    else
							    {
							        t.setData({isPage: false})
							    }
							})*/
        }, 500);
      }
    },
    shareQRCode: function (e) {
      return;
      var that = this,
        params = {
          Path:
            "/activity/fightgroup/detail?gb_id=" +
            this.GbInfo.gb_id +
            "&pid=" +
            this.GbInfo.activity_rule.item_id +
            "&uid=" +
            this.userInfo.user_id,
          MainImg: this.GbInfo.ProductPic,
          MainTitle: this.GbInfo.activity_rule.product_item_name,
          item_id: this.GbInfo.activity_rule.item_id,
          MarketingEventId: this.GbInfo.MarketingEventId,
          ItemSalePrice: this.GbInfo.activity_rule.group_sale_price,
          OriginalPrice: this.GbInfo.activity_rule.item_unit_price,
          GroupPersonAmout: this.GbInfo.gb_quantity,
          CutPrice: "",
          user_id: this.userInfoId,
          MarketingEventTime: this.GbInfo.EndTimeStr,
        };

      //生成二维码并返回地址。 - 需要修改调整为小程序地址
      $.request({
        url: this.Config.URL.wx.getMiniAppQRCodeUnlimit,
        data: params,
        success: function (data, status, msg, code) {
          that.setData({
            PageQRCodeInfo: {
              Path: data.url,
              IsShare: true,
              IsShareBox: false,
              IsJT: true,
            },
          });
        },
      });
    },
    shareBox: function () {
      let that = this;

      let $href = $.sprintf(
        "%s/h5/activity/fightgroup/detail?gb_id=%d&pid=%d&uid=%d",
        that.Config.SiteUrl,
        this.GbInfo.gb_id,
        this.GbInfo.activity_rule.item_id,
        this.userInfo.user_id
      );
      // 如允许点击超链接跳转，则应该打开一个新页面，并传入href，由新页面内嵌webview组件负责显示该链接内容
      // #ifdef APP-PLUS
      $href = $.sprintf(
        "%s/tmpl/activity/group_detail.html?gb_id=%d&pid=%d&FX=%d",
        this.Config.WapSiteUrl,
        this.GbInfo.gb_id,
        this.GbInfo.activity_rule.item_id,
        this.userInfo.user_id
      );
      $href = $.sprintf(
        "%s/tmpl/activity/group_detail.html?gb_id=%d&pid=%d&FX=%d",
        this.Config.WapSiteUrl,
        this.GbInfo.gb_id,
        this.GbInfo.activity_rule.item_id,
        this.userInfo.user_id
      );

      $href = $.sprintf(
        "%s/h5/activity/fightgroup/detail?gb_id=%d&pid=%d&uid=%d",
        that.Config.SiteUrl,
        this.GbInfo.gb_id,
        this.GbInfo.activity_rule.item_id,
        this.userInfo.user_id
      );
      // #endif

      // #ifdef MP-WEIXIN
      $href =
        "/activity/fightgroup/detail?gb_id=" +
        this.GbInfo.gb_id +
        "&pid=" +
        this.GbInfo.activity_rule.item_id +
        "&uid=" +
        this.userInfo.user_id;
      // #endif

      var e = this.GbInfo.gb_quantity - this.GbInfo.gb_amount_quantity,
        t =
          e > 0
            ? "【还差" +
              (this.GbInfo.gb_quantity - this.GbInfo.gb_amount_quantity) +
              "人】" +
              this.userInfo.user_nickname +
              "邀请您参加拼团！立省" +
              (
                this.GbInfo.activity_rule.group_sale_price -
                this.GbInfo.activity_rule.item_unit_price
              ).toFixed(2) +
              "元！"
            : this.userInfo.user_nickname +
              "拼团成功！他已节省" +
              (
                this.GbInfo.activity_rule.group_sale_price -
                this.GbInfo.activity_rule.item_unit_price
              ).toFixed(2) +
              "元！赶快来拼团吧!";

      this.setData({
        shareData: {
          shareTitle: this.GbInfo.activity_rule.product_item_name,
          shareText: t,
          href: $href,
          image: this.GbInfo.activity_rule.product_image,
          price: this.GbInfo.activity_rule.group_sale_price,
        },
      });

      // #ifdef APP-PLUS
      this.$refs.shareBoxApp.show();
      // #endif

      // #ifdef MP-WEIXIN
      this.$refs.shareBoxMp.show();
      // #endif

      // #ifdef H5
      if (that.$.ifUniApp()) {
        this.$refs.shareBoxH5.show();
      } else {
        this.$refs.shareBoxMp.show();
      }
      // #endif

      return;

      this.setData({
        PageQRCodeInfo: {
          Path: "",
          IsShare: true,
          IsShareBox: true,
          IsJT: false,
        },
      });
    },
    cancelShare: function () {
      this.setData({
        PageQRCodeInfo: {
          Path: "",
          IsShare: false,
          IsShareBox: false,
          IsJT: false,
        },
      });
    },
    saveImg: function () {
      var e = this;
      $.showLoading();
      $.downloadFile({
        url: this.PageQRCodeInfo.Path,
        success: function (t) {
          $.hideLoading(),
            $.saveImageToPhotosAlbum({
              filePath: t.tempFilePath,
              success: function () {
                e.setData({
                  PageQRCodeInfo: {
                    Path: "",
                    IsShare: false,
                    IsShareBox: false,
                    IsJT: false,
                  },
                }),
                  $.alert("保存图片成功！");
              },
              fail: function (e) {
                $.hideLoading();
              },
            });
        },
        fail: function (e) {
          $.hideLoading();
        },
      });
    },
    showCodeImg: function () {
      $.previewImage({
        current: this.PageQRCodeInfo.Path,
        urls: [this.PageQRCodeInfo.Path],
      });
    },
  },
};
</script>



<style lang="scss">
@import "../../styles/_variables";

.groupNumber {
  font-size: 24rpx;
  color: #888;
}

.groupNumber .icon-icon {
  font-size: 24rpx;
  display: inline;
}

/* .groupNumber text{margin: 0 2rpx} */
.progressBarBox {
  position: absolute;
  right: 0;
  bottom: 0rpx;
  margin-bottom: -20rpx;
  color: #888;
  font-size: 24rpx;
  margin-right: 20rpx;
}

.u-progressBar {
  display: inline-block;
  width: 140rpx;
  height: 20rpx;
  background-color: #d5d5d5;
  border-radius: 20rpx;
  overflow: hidden;
}

.u-progressBar-cont {
  height: 20rpx;
  background-color: #ffc001;
}

.u-progressBar-text {
  line-height: 25rpx;
}

.m-product-price .u-btn {
  padding: 0 10rpx;
  margin: 0 20rpx;
  float: right;
  font-size: 24rpx;
  line-height: 50rpx;
  margin-top: 10rpx;
}

.m-product-GP {
  height: 270rpx;
}

.m-product-GP .m-product-img {
  height: 270rpx;
  width: 270rpx;
}

.m-product-GP .m-product-price {
  line-height: 28rpx;
  font-size: 40rpx;
}

.m-product-GP .m-product-info {
  height: 270rpx;
  width: 480rpx;
  position: relative;
}

.u-del-price {
  color: #888888;
  font-size: 20rpx;
  text-decoration: line-through;
}

.icon-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  background-color: #fff;
  padding: 20rpx;
  margin-top: 20rpx;
  position: relative;
}

.icon-box image {
  width: 80rpx;
  height: 80rpx;
}

.icon-box image {
  margin-right: 32rpx;
}

.icon-box-title {
  font-weight: 400;
  color: #db384b;
}

.icon-box-desc {
  margin-top: 12rpx;
  font-size: 24rpx;
  color: #888;
}

.icon-box icon {
  margin-right: 10rpx;
}

.m-media-box-bd text {
  margin-left: 10rpx;
}

.m-media-box-info {
  color: #888;
}

.u-time-show {
  position: absolute;
  width: 280rpx;
  height: 80rpx;
  border: 1rpx solid $default-skin-bg;
  left: 50%;
  bottom: 0;
  margin-left: -140rpx;
  border-radius: 80rpx;
  margin-bottom: -60rpx;
  z-index: 2;
  background-color: #fff;
  box-shadow: 0px 0rpx 10rpx rgba(0, 0, 0, 0.35);
  line-height: 80rpx;
  text-align: center;
}

.u-time-show label {
  font-size: 24rpx;
}

.u-time-show text {
  color: $default-skin-bg !important;
}

/*底部按钮 start*/
.m-footer-btn {
  height: 100rpx;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  text-align: center;
  z-index: 3;
}

.m-footer-btn-main {
  width: 50%;
  height: 100%;
  float: left;
  background-color: $default-skin-bg;
  color: #fff;
  line-height: 100rpx;
  font-size: 32rpx;
}

.m-footer-desable {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

.m-now {
  background-color: #ffc001;
}

/*底部按钮 end*/
/*团长标签*/
.u-fg-label {
  display: inline-block;
  font-size: 24rpx;
  color: #888;
  padding-right: 20rpx;
  color: $default-skin-bg;
}

.u-fg-label label {
  color: yellow;
  font-size: 28rpx;
}

.m-media-box-thumb {
  border-radius: 100%;
}

.icon-box image {
  border-radius: 100%;
}

/*团长标签*/
/* .u-btn {
  padding:0 10rpx;
  width:200rpx;
  font-size:24rpx;
  line-height:50rpx;
  background-color:$default-skin-bg;
  color:#fff;
  position: absolute;
  right: 20rpx;
  top:54rpx;
  } */
.m-product-list {
  background: #fff;
  overflow: hidden;
}

.m-product-name {
  height: 116rpx;
}

.headPhoto {
  overflow: hidden;
  display: flex;
  width: 90%;
  margin: 20rpx auto;
  justify-content: center;
}

.personPhoto {
  position: relative;
  margin: 0.2%;
}

.photo-icon {
  position: absolute;
  width: 52rpx;
  height: 36rpx;
  top: -6rpx;
  left: -10rpx;
}

.photo {
  width: 68rpx;
  height: 68rpx;
  border-radius: 50%;
  border: 4rpx solid sandybrown;
  margin-top: 8rpx;
  margin-left: 2rpx;
  margin-right: 2rpx;
}

.photo-bg {
  width: 76rpx;
  height: 76rpx;
  border-radius: 50%;
  margin-top: 8rpx;
}

.m-product-info::before {
  border: none;
}

.time text {
  color: #db384c;
}

.surplus {
  display: flex;
  justify-content: center;
  font-size: 30rpx;
  margin: 20rpx 0;
  align-items: center;
}

.link {
  display: flex;
  justify-content: space-around;
  background: #fff;
  margin-top: 20rpx;
}

.nav {
  flex: 1;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 200rpx;
}

.nav-img {
  width: 80rpx;
  height: 80rpx;
}

.nav text {
  margin-top: 20rpx;
  font-size: 24rpx;
  color: #333;
}

.isSucces {
  position: absolute;
  right: 30rpx;
  bottom: 10rpx;
}

.isSucces image {
  width: 150rpx;
  height: 150rpx;
}

.rule {
  padding: 20rpx;
  background: #fff;
  margin-top: 20rpx;
}

.rule-header {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 20rpx;
}

.rule-content {
  font-size: 24rpx;
  color: #777777;
}
</style>