<template>
  <view>
    <view style="background: rgb(41, 36, 56)">
      <view class="bargin" v-if="show == false">
        <view class="top-sty">
          <view class="user-info">
            <image class="user-img" lazy-load :src="imgPath"></image>
            <view class="username">{{ user_nickname }}</view>
          </view>
        </view>
        <view class="goods-sty">
          <view class="goods-back-sty">
            <view class="part1_product">
              <view>
                <image
                  class="pro_img"
                  lazy-load
                  :src="Info.activity_rule.product_image"
                ></image>
              </view>
              <view class="pro_info">
                <view class="item_name_sty">{{
                  Info.activity_rule.product_item_name
                }}</view>
                <view class="price_sty">
                  <label style="color: #ff6803">{{ __("底价：") }}</label>
                  <label
                    style="color: #ff6803; font-weight: bold; font-size: 50rpx"
                    >{{
                      sprintf(
                        "%.2f",
                        Info.activity_rule.cut_down_min_limit_price
                      )
                    }}</label
                  >
                  <span
                    style="
                      text-decoration: line-through;
                      margin-left: 10rpx;
                      color: #999;
                    "
                    >{{ Info.activity_rule.item_unit_price }}</span
                  >
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="part-bottom-sty">
          <view class="time_sty">
            <view class="time_fon_sty">
              {{ __("活动时间仅剩") }}
            </view>
            <view v-if="end == 1">
              <view class="remaining_time">
                <view class="time">{{ Time.hour }}</view
                ><view class="point_sty">{{ __(":") }}</view>
                <view class="time">{{ Time.min }}</view
                ><view class="point_sty">{{ __(":") }}</view>
                <view class="time">{{ Time.sec }}</view>
              </view>
            </view>
            <view v-if="end == 2">
              <view class="remaining_time">
                <view class="time">{{ Time.hour }}</view
                ><view class="point_sty">{{ __(":") }}</view>
                <view class="time">{{ Time.min }}</view
                ><view class="point_sty">{{ __(":") }}</view>
                <view class="time">{{ Time.sec }}</view>
              </view>
            </view>
          </view>
          <view class="u-progressBar">
            <view
              class="u-progressBar-cont"
              :style="'width:' + width + '%'"
            ></view>
          </view>
          <view class="part3">
            <!-- 还未砍价，发起人=帮砍人，活动正在进行 开始砍价 -->
            <view
              class="button-start"
              @click="bargin"
              v-if="
                Info.is_cut == false &&
                istrue &&
                end != 1 &&
                end != 3 &&
                Info.order_id == ''
              "
            ></view>
            <!-- 还未砍价，发起人=帮砍人，活动还未开始 -->
            <view
              class="button-start"
              v-if="
                Info.is_cut == false &&
                istrue &&
                end == 1 &&
                Info.order_id == ''
              "
            ></view>
            <view class="cut_down_sty" v-if="Info.is_cut">
              <view style="margin-left: 150rpx">
                {{ __("原价") }}{{ __("￥")
                }}{{ sprintf("%.2f", Info.activity_rule.item_unit_price) }}
              </view>
              <view style="margin-right: 150rpx">
                {{ __("已砍") }}{{ __("￥")
                }}{{
                  sprintf(
                    "%.2f",
                    Info.activity_rule.item_unit_price - Info.ac_sale_price
                  )
                }}
              </view>
            </view>
            <!-- 已经砍价，发起人=帮砍人，活动还未结束，已砍价！=砍价空间 -->
            <view
              style="display: flex"
              v-if="
                Info.is_cut &&
                istrue &&
                isCut &&
                end != 1 &&
                end != 3 &&
                Info.order_id == ''
              "
            >
              <view class="immediately_btn" @click="goshop"></view>
              <view
                class="help_cut_btn"
                v-if="Info.activity_state == 1"
                @click="shareBox"
              ></view>
            </view>
            <view style="display: flex; justify-content: space-between"> </view>

            <!-- 还未砍价，发起人！=帮砍人，活动还未结束 帮忙砍价 -->
            <view
              class="cut_pri_sty"
              @click="bargin"
              v-if="
                Info.is_cut == false &&
                istrue == false &&
                isCut &&
                end != 1 &&
                end != 3 &&
                Info.order_id == ''
              "
            ></view>

            <!-- 已经砍价，发起人=帮砍人，活动还未结束，已砍价=砍价空间 立即出手-->
            <!-- <view class="up_hands_sty" @click="goshop" v-if="(Info.is_cut&&istrue&&isCut==false&&end!=1&&end!=3&&Info.order_id=='')"></view> -->

            <!-- 已经砍价，发起人！=帮砍人，活动还未结束，已砍价！=砍价空间 -->
            <view
              v-if="
                Info.is_cut &&
                istrue == false &&
                isCut &&
                end != 1 &&
                end != 3 &&
                Info.order_id == ''
              "
            >
              <!-- 我也要 -->
              <navigator
                :url="
                  '/activity/cutprice/detail?mid=' +
                  mid +
                  '&pid=' +
                  pid +
                  '&ac_id=' +
                  ac_id
                "
                class="i_want_sty"
              ></navigator>
              <!-- <button open-type="share" class="button1" style="margin:40rpx 0 0 0" @click='shareBox'>{{__('找人帮砍')}}</button>  -->
              <!-- 找人帮砍 -->
              <button
                class="help_cut_btn_1"
                v-if="Info.activity_state == 1"
                @click="shareBox"
              ></button>
            </view>
            <!-- 已经砍价，发起人！=帮砍人，活动还未结束，已砍价=砍价空间 我也要 -->
            <navigator
              :url="
                '/activity/cutprice/detail?mid=' +
                mid +
                '&pid=' +
                pid +
                '&ac_id=' +
                ac_id
              "
              v-if="
                istrue == false &&
                isCut == false &&
                end != 1 &&
                end != 3 &&
                Info.order_id == ''
              "
              class="i_want_sty"
            ></navigator>
            <!-- 活动已经结束 再逛逛-->
            <navigator
              class="again_stroll_sty"
              url="/activity/cutprice/list"
              v-if="end == 3"
            ></navigator>
            <!-- 您已购买，再逛逛 -->
            <navigator
              class="again_stroll_sty"
              url="/activity/cutprice/list"
              v-if="Info.order_id && end != 3"
            ></navigator>
            <!-- 恭喜你，砍价成功 -->
            <view
              class="congratulate-success"
              @click="goshop"
              v-if="
                Info.is_cut &&
                istrue &&
                isCut == false &&
                end != 1 &&
                end != 3 &&
                Info.order_id == ''
              "
            ></view>
          </view>
          <view class="part4" v-if="Info.Description">
            <view class="header">{{ __("活动说明") }}</view>
            <rich-text :nodes="htmlString"></rich-text>
          </view>

          <view class="part6">
            <scroll-view
              class="m-nearbylist"
              scroll-y="true"
              @scrolltolower="scrollbottom"
            >
              <view
                v-for="(items, index) in List"
                :key="index"
                style="
                  display: flex;
                  position: relative;
                  border-bottom: 1rpx solid mediumpurple;
                "
              >
                <view>
                  <image
                    class="avatar_sty"
                    lazy-load
                    :src="items.user_avatar"
                  ></image>
                </view>
                <view>
                  <view class="user_nickname_sty">
                    {{ items.user_nickname
                    }}<label style="margin-left: 10rpx">{{
                      items.user_mobile
                    }}</label>
                  </view>
                </view>
                <view class="cut_away_sty">
                  {{ __("砍掉") }}{{ sprintf("%.2f", items.ach_price)
                  }}{{ __("元") }}
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
      <view :class="['msk']" @tap="back" v-if="showImg">
        <view class="msk_box">
          <image
            src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/cutprice-1/cut-price-animation.png"
            style="width: 100%"
            mode="widthFix"
            @tap="back"
          ></image>
        </view>
      </view>
    </view>
    <view class="u-tap-btn">
      <navigator
        url="/pages/index/index"
        open-type="switchTab"
        class="u-go-home"
      >
        <view class="iconfont icon-shouyeshouye"></view>
      </navigator>
    </view>
    <share-box-mp
      :PageQRCodeInfo="PageQRCodeInfo"
      @cancelShare="cancelShare"
      @showCodeImg="showCodeImg"
      @shareQRCode="shareQRCode"
      @saveImg="saveImg"
      :shareDataDefault="shareData"
      ref="shareBoxMp"
    ></share-box-mp>
    <share-box-app
      :shareDataDefault="shareData"
      ref="shareBoxApp"
    ></share-box-app>
  </view>
</template>

<script>
function getNowFormatDate() {
  var e = new Date(),
    t = "-",
    n = e.getMonth() + 1,
    r = e.getDate();
  n >= 1 && n <= 9 && (n = "0" + n), r >= 0 && r <= 9 && (r = "0" + r);
  var i = e.getFullYear() + t + n + t + r;
  return i;
}

import $ from "../../helpers/util";
import { mapState, mapMutations } from "vuex";

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

export default {
  data() {
    return {
      Time: "",
      hours: "",
      show: false,
      showImg: false,
      showPrice: false,
      isCut: true,
      imgPath: "",
      user_nickname: "",
      mid: 0,
      uid: 0,
      pid: 0,
      page: 1,
      rows: 10,
      Info: {
        activity_rule: {
          product_image: "",
        },
      },
      end: 0,
      startTime: "",
      endTime: "",
      istrue: true,
      flag: true,
      ispage: true,
      width: 100,
      participantId: "",
      ac_id: 0,
      money: 0,
      List: [],
      hour: 0,
      min: 0,
      sec: 0,
      htmlString: "",
      PageQRCodeInfo: {
        Path: "",
        IsShare: false,
        IsShareBox: false,
        IsJT: false,
      },
      shareData: {
        shareText: "澜驰商城系统，支持原生App、微信小程序，邀请你一起体验！",
        shareTitle: "澜驰商城系统，支持原生App、微信小程序，邀请你一起体验！",
        href: "https://www.suteshop.com",
        image: "",
      },
    };
  },
  components: {
    shareBoxMp,
    shareBoxApp,
  },
  computed: mapState([
    "Config",
    "StateCode",
    "notice",
    "plantformInfo",
    "shopInfo",
    "userInfo",
    "hasLogin",
  ]),
  onLoad: function (options) {
    uni.setNavigationBarTitle({
      title: this.__("砍价详情"),
    });
    var t = this;
    // 长参数解析
    if (options.scene) {
      let longUrl = decodeURIComponent(options.scene);
      let paramsArray = longUrl.replace("longUrl=", "").split("-");
      options.mid = paramsArray[0];
      options.pid = paramsArray[1];
      options.ac_id = paramsArray[2];
      options.uid = paramsArray[3];
    }

    options.sid
      ? t.setData({
          imgPath: this.userInfo.user_avatar,
          user_nickname: this.userInfo.user_nickname,
          mid: options.mid,
          uid: options.sid,
          participantId: this.userInfo.user_id,
          pid: options.pid,
        })
      : t.setData({
          imgPath: this.userInfo.user_avatar,
          user_nickname: this.userInfo.user_nickname,
          mid: options.mid,
          uid: options.uid || this.userInfo.user_id,
          participantId: this.userInfo.user_id,
          pid: options.pid,
        });

    this.forceUserInfo(function (user) {
      t.GetOtherCutPriceActivityList();
    });
    //t.getTime()
  },
  onShow: function () {
    this.GetVendorCutPriceEventDetail();
  },
  onBackPress() {
    if (this.$refs.shareBoxApp.showBoxView) {
      this.$refs.shareBoxApp.cancel();
      return true;
    }
  },
  onUnload() {
    // 离开页面，注销事件
    var that = this;

    if (this.$refs.shareBoxApp.showBoxView) {
      this.$refs.shareBoxApp.cancel();
    }
  },
  methods: {
    ...mapMutations([
      "login",
      "logout",
      "getPlantformInfo",
      "forceUserInfo",
      "getUserInfo",
    ]),

    GetVendorCutPriceEventDetail: function () {
      var that = this,
        params = {
          activity_id: this.mid,
          user_id: this.uid,
          participant_id: this.userInfo.user_id,
        };
      params.user_id == params.participant_id
        ? this.setData({
            istrue: true,
          })
        : this.setData({
            istrue: false,
          });
      $.request({
        url: this.Config.URL.user.getCutPriceActivity,
        data: params,
        success: function (data, status, msg, code) {
          if (200 == status) {
            data.CutPricePercent =
              (data.activity_rule.item_unit_price - data.ac_sale_price) /
              (data.activity_rule.item_unit_price -
                data.activity_rule.cut_down_min_limit_price);
            that.setData({
              Info: data,
              ac_id: data.ac_id,
              width: 100 * parseFloat(data.CutPricePercent).toFixed(2),
            });
            that.getTime();
            data.ac_sale_price - data.ac_mix_limit_price <= 0
              ? that.setData({
                  isCut: false,
                })
              : "";

            //WxParse.wxParse("PromotionRule", "html", data.activity_rule.activity_intro, that)

            if (data.activity_rule.activity_intro) {
              that.htmlString = data.activity_rule.activity_intro
                .replace(/\\/g, "")
                .replace(/<img/g, '<img style="display:none;"');
            }
          } else {
            that.setData({
              flag: false,
              ispage: true,
            });
          }
        },
      });
    },
    getTime: function () {
      var e = this,
        t = new Date().getTime(),
        s = this.Info.activity_endtime,
        n = this.Info.activity_starttime;
      var i = new Date(n.replace(/-/g, "/")).getTime(),
        u = new Date(s.replace(/-/g, "/")).getTime();
      if (i >= t) {
        var a = setInterval(function () {
          e.setData({
            Time: $.Formattime1(e.Info.activity_starttime, a),
            end: 1,
          }),
            e.Time == undefined && e.getTime();
        }, 1e3);
        return;
      }
      if (u <= t) {
        var a = setInterval(function () {
          e.setData({
            Time: $.Formattime(e.Info.activity_endtime, a),
            end: 3,
          }),
            e.Time == undefined && e.getTime();
        }, 1e3);
        return;
      }
      if (i < t < u) {
        var a = setInterval(function () {
          e.setData({
            Time: $.Formattime(e.Info.activity_endtime, a),
            end: 2,
          }),
            e.Time == undefined && e.getTime();
        }, 1e3);
        return;
      }
    },
    GetOtherCutPriceActivityList: function () {
      var params = {
          activity_id: this.mid,
          user_id: this.uid,
          page: this.page,
        },
        t = this;

      $.request({
        url: this.Config.URL.user.listsCutPriceHistory,
        data: params,
        success: function (data, status, msg, code) {
          if (200 == status && data.items.length > 0) {
            t.setData({
              flag: false,
            });
            t.setData({
              ispage: true,
              List: data.items,
            });
          } else {
            t.setData({
              flag: false,
              ispage: true,
            });
          }
        },
      });
    },
    scrollbottom: function () {
      var e = this;
      e.setData({
        flag: false,
      }),
        clearTimeout(t);
      var t = setTimeout(function () {
        e.setData({
          type: e.type,
          page: parseInt(e.page) + 1,
          rows: 10,
        }),
          e.GetOtherCutPriceActivityList();
      }, 500);
    },
    CutPrice: function () {
      if (this.Info.activity_state > 1) {
        this.$.alert(this.__("活动已结束！"));
        return;
      }
      var params = {
          ac_id: this.ac_id,
          user_id: this.userInfo.user_id,
        },
        that = this;
      $.request({
        url: this.Config.URL.user.doCutPrice,
        data: params,
        success: function (data, status, msg, code) {
          if (200 == status) {
            that.setData({
              money: data.ach_price,
              ac_id: data.ac_id,
              showImg: true,
            });
            that.GetVendorCutPriceEventDetail();
            that.GetOtherCutPriceActivityList();
          } else {
            that.$.alert(msg);
          }
        },
      });
    },
    onShareAppMessage: function () {
      // #ifdef MP-WEIXIN
      wx.showShareMenu({
        withShareTicket: true,
        menus: ["shareAppMessage", "shareTimeline"],
      });
      // #endif

      return {
        title: this.Info.activity_rule.item_name,
        path:
          "/activity/cutprice/detail?mid=" +
          this.mid +
          "&uid=" +
          this.uid +
          "&pid=" +
          this.pid +
          "&ac_id=" +
          this.ac_id,
      };
    },

    /**
     * 用户点击右上角分享朋友圈
     */
    onShareTimeline: function () {
      return {
        title: this.Info.activity_rule.item_name,
        query: {
          mid: this.mid,
          pid: this.pid,
          ac_id: this.ac_id,
          uid: this.userInfo.user_id,
        },
      };
    },

    bargin: function () {
      this.CutPrice();
    },
    back: function () {
      this.setData({
        showImg: false,
      }),
        this.GetVendorCutPriceEventDetail(),
        this.GetOtherCutPriceActivityList();
    },
    more: function (e) {
      if (this.flag) {
        var t = this;
        clearTimeout(n);
        var n = setTimeout(function () {
          t.setData({
            page: parseInt(t.page) + 1,
          }),
            t.GetOtherCutPriceActivityList();
        }, 500);
      }
    },
    goshop: function () {
      var e = this,
        params = {
          amount: 1,
          item_id: this.Info.activity_rule.item_id,
          ac_id: this.Info.ac_id,
          order_id: this.Info.order_id,
          ac_id: this.ac_id,
        };
      if (this.Info.order_id == "") {
        $.navigateTo({
          url:
            "/pages/checkout/checkout?single_activity=1&ifcart=0&cart_id=" +
            params.item_id +
            "|" +
            params.amount +
            "&activity_id=" +
            this.mid +
            "&ac_id=" +
            this.ac_id,
        });
      } else {
        // $.navigateTo({url: "/pages/checkout/checkout?spid=" + JSON.stringify(params) + "&activity_id=" + this.mid + "&sponsorId=" + this.uid + "&sp=" + this.Info.ServicePlaceCode + "&pm=" + this.Info.PayMethodCode + "&et=" + this.Info.BusinessHoursEnd + "&st=" + this.Info.BusinessHoursStart + "&showdate=" + this.Info.ReservationTimeEnabled + "&showname=" + this.Info.ContactEnabled})
      }
    },
    shareQRCode: function (e) {
      var that = this,
        params = {
          path:
            this.Config.SiteUrl +
            "/h5/activity/cutprice/detail?mid=" +
            this.mid +
            "&uid=" +
            this.uid +
            "&pid=" +
            this.pid +
            "&ac_id=" +
            this.ac_id,
          Path:
            "/activity/cutprice/detail?mid=" +
            this.mid +
            "&uid=" +
            this.uid +
            "&pid=" +
            this.pid +
            "&ac_id=" +
            this.ac_id,
          MainImg: this.Info.activity_rule.product_image,
          MainTitle: this.Info.activity_rule.product_item_name,
          ProductId: this.pid,
          MarketingEventId: this.mid,
          ItemSalePrice: this.Info.activity_rule.item_unit_price,
          OriginalPrice: "",
          GroupPersonAmout: "",
          CutPrice:
            this.Info.activity_rule.item_unit_price - this.Info.ac_sale_price,
          UserInfoId: this.uid,
          MarketingEventTime: this.Info.activity_starttime,
        };
      //生成二维码并返回地址。 - 需要修改调整为小程序地址
      $.request({
        url: this.Config.URL.wx.getMiniAppQRCodeUnlimitPoster,
        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;
      // 如允许点击超链接跳转，则应该打开一个新页面，并传入href，由新页面内嵌webview组件负责显示该链接内容
      var $href = $.sprintf(
        "%s/h5/activity/cutprice/detail?mid=%d&pid=%d&ac_id=%d&uid=%d",
        that.Config.SiteUrl,
        this.mid,
        this.pid,
        this.ac_id,
        this.uid
      );
      // 如允许点击超链接跳转，则应该打开一个新页面，并传入href，由新页面内嵌webview组件负责显示该链接内容
      // #ifdef APP-PLUS
      $href = $.sprintf(
        "%s/h5/activity/cutprice/detail?mid=%d&pid=%d&ac_id=%d&uid=%d",
        that.Config.SiteUrl,
        this.mid,
        this.pid,
        this.ac_id,
        this.uid
      );
      // #endif

      // #ifdef MP-WEIXIN
      $href = $.sprintf(
        "%s/activity/cutprice/detail?mid=%d&pid=%d&ac_id=%d&uid=%d",
        that.Config.SiteUrl,
        this.mid,
        this.pid,
        this.ac_id,
        this.uid
      );
      // #endif

      this.setData({
        shareData: {
          shareTitle: this.Info.activity_rule.product_item_name,
          shareText: "",
          href: $href,
          image: this.Info.activity_rule.product_image,
          price: this.number_format(this.Info.activity_rule.item_unit_price, 2),
        },
      });

      // #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";

.u-tap-btn {
  position: fixed;
  right: 20rpx;
  bottom: 150rpx;
}

.u-go-home {
  border-radius: 100%;
  width: 80rpx;
  height: 80rpx;
  border: 1px solid #eee;
  font-size: 20rpx;
  text-align: center;
  background-color: #fff;
  box-shadow: 0px 4rpx 8rpx rgba(0, 0, 0, 0.35);
  z-index: 2;
  opacity: 0.8;
  line-height: 80rpx;
  margin-bottom: 20rpx;
}

.u-go-home .iconfont {
  font-size: 40rpx;
}

.bargin {
  width: 750rpx;
  // background-image: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/cutprice-1/whole-background-start.png);
  // background-repeat: no-repeat;
  // background-size: 100% 100%;
  // -moz-background-size: 100% 100%;
}

.goods-back-sty {
  background-color: #fff;
  margin-left: 80rpx;
  margin-right: 80rpx;
  padding-bottom: 1rpx;
}

.part1_product {
  display: flex;
  background-color: #eceeff;
  border-radius: 10rpx;
  margin-bottom: 10rpx;
}

.pro_img {
  margin-top: 20rpx;
  margin-left: 10rpx;
  width: 215rpx;
  height: 205rpx;
  border-radius: 15rpx;
  border: 6rpx solid mediumpurple; /* 添加紫色 1px 边框 */
}

.pro_info {
  margin-top: 50rpx;
  margin-left: 20rpx;
  position: relative;
  padding-right: 70rpx;
}

.item_name_sty {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.price_sty {
  position: absolute;
  left: 1rpx;
  bottom: 10rpx;
  width: 300rpx;
}

.part-bottom-sty {
  margin-top: -2rpx;
  width: 750rpx;
  height: 1200rpx;
  background-image: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/cutprice-1/background-bottom-one.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}

.goods {
  padding-left: 60rpx;
  padding-top: 90rpx;
}

.wxParse-p {
  padding: 0 40rpx;
}

.remaining {
  padding-left: 340rpx;
  padding-top: 18rpx;
  font-size: 28rpx;
  color: #fff;
  font-weight: bold;
}

.time_sty {
  height: 125rpx;
  margin-left: 90rpx;
  margin-right: 90rpx;
  padding-left: 150rpx;
}

.time_fon_sty {
  margin-left: 65rpx;
  font-weight: bold;
}

.remaining_time {
  font-size: 45rpx;
  color: white;
}

.time {
  margin-right: 10rpx;
  padding-left: 10rpx;
  padding-right: 10rpx;
  padding-top: 6rpx;
  padding-bottom: 4rpx;
  display: inline;
  background-size: 80% 80%;
  background-color: #5555ff;
  border-radius: 8rpx;
  text-align: center;
}

.point_sty {
  color: #5555ff;
  display: inline;
  margin-right: 10rpx;
}

.present {
  padding-left: 340rpx;
  padding-top: 10rpx;
}

.present_price {
  display: inline;
  font-size: 28rpx;
  color: #fff;
}

.price {
  display: inline;
  font-size: 32rpx;
  color: #fff;
}

.top-sty {
  width: 750rpx;
  height: 950rpx;
  background-image: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/cutprice-1/background-start-top.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}

.user-info {
  padding-top: 690rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.user-img {
  width: 180rpx;
  height: 180rpx;
  border-radius: 50%;
  border: 8rpx solid mediumpurple;
}

.username {
  margin-top: 5px;
  font-size: 28rpx;
  font-weight: bold;
  color: mediumpurple;
}

.goods-sty {
  margin-top: -2rpx;
  width: 750rpx;
  background-image: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/cutprice-1/background-goods.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}

// .part2 {
// 	margin-top: 45rpx;
// 	margin-left: 58rpx;
// 	margin-right: 62rpx;
// 	border: 1rpx solid rgb(201, 76, 98);
// 	background: rgb(176, 14, 46);
// 	border-radius: 30rpx;
// 	height: 146rpx;
// 	display: flex;
// 	justify-content: space-between;
// 	align-items: center;
// 	padding: 0 10rpx;
// }

.text1 {
  font-size: 28rpx;
  color: #fff;
  margin-top: 6rpx;
}

.progress-bar {
  margin-top: 36rpx;
  margin-left: 64rpx;
  margin-right: 30rpx;
  width: 618rpx;
  height: 36rpx;
  border: 5rpx solid rgb(89, 10, 35);
  background: rgb(89, 10, 35);
  border-radius: 40rpx;
  position: relative;
}

.left {
  border-radius: 40rpx;
  background: rgb(255, 231, 0);
  height: 100%;
  float: left;
}

.m-nearbylist {
  height: 100%;
}

.original {
  color: #fff;
  float: left;
}

.og1 {
  padding-left: 80rpx;
  padding-top: 15rpx;
  font-size: 28rpx;
}

.og2 {
  padding-left: 75rpx;
  font-weight: bolder;
  padding-top: 6rpx;
  color: #ffc001;
  font-family: "微软雅黑";
  font-size: 32rpx;
}

.part3 {
  position: relative;
  height: 210rpx;
}

.cut-off {
  color: #fff;
  display: flex;
  flex-flow: column;
  justify-content: center;
  margin-right: 72rpx;
  text-align: right;
}

.button-start {
  margin-top: 20rpx;
  margin-left: 270rpx;
  margin-right: 270rpx;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  background-image: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/cutprice-1/begin-bargaining-button.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}

.cut_down_sty {
  margin-bottom: 10rpx;
  justify-content: space-between;
  display: flex;
  font-size: 28rpx;
  font-weight: bold;
  color: mediumpurple;
}

.immediately_btn {
  margin-left: 180rpx;
  height: 60rpx;
  width: 150rpx;
  background-image: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/cutprice-1/sell-immediately.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}

.help_cut_btn {
  margin-left: 100rpx;
  height: 60rpx;
  width: 150rpx;
  background-image: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/cutprice-1/help-cut.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}

.cut_pri_sty {
  position: absolute;
  right: 180rpx;
  height: 60rpx;
  width: 150rpx;
  background-image: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/cutprice-1/help-cut-price.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}

.up_hands_sty {
  position: absolute;
  left: 180rpx;
  height: 60rpx;
  width: 150rpx;
  background-image: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/cutprice-1/sell-immediately.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}

.i_want_sty {
  position: absolute;
  left: 180rpx;
  height: 60rpx;
  width: 150rpx;
  background-image: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/cutprice-1/i-want.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}

.help_cut_btn_1 {
  position: absolute;
  right: 180rpx;
  height: 60rpx;
  width: 150rpx;
  background-image: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/cutprice-1/help-cut.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}

.again_stroll_sty {
  position: absolute;
  left: 300rpx;
  height: 60rpx;
  width: 150rpx;
  background-image: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/cutprice-1/again-stroll.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}

.congratulate-success {
  position: absolute;
  left: 300rpx;
  height: 60rpx;
  width: 150rpx;
  background-image: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/cutprice-1/sell-immediately.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}

.button {
  margin-top: 40rpx;
  margin-left: 160rpx;
  margin-right: 160rpx;
  border: 1rpx solid rgb(255, 172, 51);
  background: rgb(255, 172, 51);
  border-radius: 12rpx;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  color: #fff;
  font-size: 32rpx;
}

.button1 {
  width: 240rpx;
  height: 70rpx;
  font-size: 32rpx;
  margin-top: 40rpx;
  color: #fff;
  text-align: center;
  line-height: 70rpx;
  border-radius: 12rpx;
  background: rgb(255, 172, 51);
}

.button2 {
  margin-top: 40rpx;
  margin-left: 160rpx;
  margin-right: 160rpx;
  background: rgb(136, 136, 136);
  border-radius: 12rpx;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  color: #fff;
  font-size: 32rpx;
}

.part4 {
  color: #fff;
  border-top: 2rpx solid rgb(140, 19, 55);
  margin-top: 63rpx;
  min-height: 360rpx;
}

.header {
  padding-top: 36rpx;
  text-align: center;
  font-size: 32rpx;
  margin-bottom: 10rpx;
}

.content {
  text-indent: 3em;
  padding-top: 22rpx;
  font-size: 28rpx;
}

.content1 {
  text-indent: 3em;
  padding-top: 20rpx;
  font-size: 28rpx;
}

.part5 {
  margin-top: 40rpx;
}

.header1 {
  text-align: center;
  font-size: 32rpx;
  color: #fff;
  background: rgb(255, 172, 51);
  border-radius: 42rpx;
  height: 52rpx;
  line-height: 52rpx;
}

.header_shadow {
  margin-left: 222rpx;
  margin-right: 233rpx;
  border-radius: 42rpx;
  height: 52rpx;
  line-height: 52rpx;
  padding-bottom: 4rpx;
}

.part6 {
  margin-top: 110rpx;
  height: 630rpx;
  margin-left: 80rpx;
  margin-right: 80rpx;
  overflow: hidden;
}

.avatar_sty {
  margin-top: 20rpx;
  margin-left: 20rpx;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: 3rpx solid mediumpurple;
}

.user_nickname_sty {
  margin-top: 30rpx;
  margin-left: 15rpx;
  font-size: 32rpx;
  width: 280rpx;
  height: 55rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cut_away_sty {
  color: #0543d5;
  font-size: 32rpx;
  position: absolute;
  right: 5rpx;
  top: 50rpx;
  font-weight: bold;
  font-size: 28rpx;
}

.kanjia view {
  font-size: 28rpx;
  color: #fff;
}

.animation {
  width: 100%;
  height: 100%;
  // background: black;
  position: absolute;
  top: 0;
}

.dao {
  width: 380rpx;
  height: 340rpx;
  position: absolute;
  top: 4%;
  right: 0%;
}

.dao1 {
  width: 380rpx;
  height: 340rpx;
  position: absolute;
  top: 4%;
  right: 0%;
  animation: move 300ms linear;
  animation-delay: 500ms;
  transform-origin: right bottom;
  animation-fill-mode: forwards;
}

@keyframes move {
  0% {
    transform: rotateX(0);
  }

  50% {
    transform: rotateZ(-45deg);
  }

  100% {
    transform: rotateZ(-30deg);
  }
}

.bag {
  width: 336rpx;
  height: 344rpx;
  position: absolute;
  top: 32%;
  left: 25%;
}

.bagmoney {
  width: 525rpx;
  height: 516rpx;
  position: absolute;
  top: 24%;
  left: 21%;
}

.success {
  width: 60%;
  height: 66rpx;
  border-radius: 10rpx;
  background: rgb(250, 51, 1);
  line-height: 66rpx;
  text-align: center;
  position: absolute;
  bottom: 15%;
  left: 20%;
  color: #fff;
}

.Price {
  display: inline;
  font-size: 42rpx;
  position: absolute;
  top: 67%;
  width: 100%;
  // #ifdef MP-WEIXIN
  top: 62% !important;
  // #endif
  text-align: center;
  color: rgb(255, 227, 130);
}

.more {
  color: #fff;
  font-size: 28rpx;
  display: flex;
  justify-content: center;
  background: rgb(41, 36, 56);
  padding-bottom: 40rpx;
}

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

.u-progressBar {
  display: inline-block;
  width: 80%;
  height: 26rpx;
  background-color: #d5d5d5;
  border-radius: 20rpx;
  overflow: hidden;
  margin-left: 10%;
}

.u-progressBar-cont {
  height: 26rpx;
  background-color: mediumpurple;
}

.floor {
  color: #ffc001;
  font-size: 28rpx;
  padding-top: 10rpx;
}
</style>