<template>
  <div>
    <div class="store-cont">
      <div class="store-detail">
        <!-- style="background: linear-gradient(#c8b190, #a18153)" -->

        <div class="store-img">
          <image
            mode="aspectFill"
            :src="
              storeMsg && storeMsg.MERCHANTS_LOGO
                ? storeMsg.MERCHANTS_LOGO
                : 'https://eshangtech.com/ShopICO/no-picture.png'
            "
            @click="seeLogo(storeMsg.MERCHANTS_LOGO)"
          ></image>
        </div>

        <div class="stote-head">
          <div class="store-title">
            {{
              storeMsg && storeMsg.MERCHANTS_NAME
                ? storeMsg.MERCHANTS_NAME
                : "-"
            }}
          </div>
          <div class="coupon-unit" style="margin-top: 2rpx">
            公告：欢迎光临
          </div>
          <div class="coupon-unit" style="margin-top: 8rpx">
            评价{{ storeMsg.MERCHANTS_SCORE || "-" }}
            <span style="margin: 0 8rpx; color: #e3e3e3">|</span>
            月售{{ storeMsg.MONTHLYSALES || 0 }}
            <!-- <span v-show="storeMsg.ShopList && storeMsg.ShopList.length>0 && pageMsg.noAppoint==false" style="margin:0 8rpx;color:#E3E3E3;">|</span>
            <span v-show="storeMsg.ShopList && storeMsg.ShopList.length>0 && pageMsg.noAppoint==false" @click="goShop" class="go-btn">去点餐</span>
             -->
          </div>
        </div>
      </div>
      <div class="tabContentBox">
        <div class="tabBox">
          <div
            :class="
              item.value === pageMsg.activeTabs
                ? 'tabItems selectTab'
                : 'tabItems'
            "
            v-for="(item, index) in tabList"
            :key="index"
            @click="handleChangeTab(item.value)"
            :style="{
              display: item.value === 1 ? 'flex' : '',
              alignItems: item.value === 1 ? 'center' : '',
            }"
          >
            {{ item.label || "" }}
            <span class="smallNumber" v-if="item.value === 1">{{
              storeMsg.COMMENT_COUNT || ""
            }}</span>
          </div>
        </div>
        <div class="tabLine"></div>
        <div class="contentList">
          <div v-if="pageMsg.activeTabs === 0">
            <div style="padding: 32rpx 0">
              <div
                class="coupon-list"
                v-for="(item, i) in couponList"
                :key="i"
                :class="{
                  'coupon-bg': isBgcolor && couponOrder <= item.WITH_AMOUNT,
                }"
              >
                <div class="itemleft">
                  <div>
                    <span class="leftUnit">¥</span>
                    <span class="money">{{ item.UseAmount }}</span>
                  </div>
                  <div
                    v-if="!item.CouponSendId && item.CouponPoint"
                    class="condition"
                  >
                    {{ item.CouponPoint }}积分兑换
                  </div>
                  <div v-else class="condition">
                    {{
                      item.WithAmount > 0
                        ? "满" + item.WithAmount + "可用"
                        : "无门槛使用"
                    }}
                  </div>
                </div>
                <div class="itemRight">
                  <div>
                    <div class="couponName">{{ item.CouponName }}</div>
                    <div class="timeText">
                      <span class="coupon-date" v-if="item.CouponSendId"
                        >有效期至{{ item.EndTime }}</span
                      >
                      <span class="coupon-date" v-else
                        >活动至{{ item.EndTime }}</span
                      >
                    </div>
                  </div>

                  <div class="useBtn">
                    <span class="useBtnText" @click="goDetail(item)">{{
                      item.PayMethod === 2000 ? "兑换" : "领取"
                    }}</span>
                  </div>
                </div>

                <!-- <div class="coupon-top">
                  <div style="width: 410rpx">
                    <div class="coupon-name">{{ item.CouponName }}</div>
                    <span v-if="item.CouponType === 2000"
                      ><span class="coupon-price">{{
                        item.UseAmount * 10
                      }}</span
                      >折</span
                    >
                    <span v-else>
                      <block>
                        ￥<span class="coupon-price">{{
                          item.UseAmount || item.WithAmount
                        }}</span></block
                      >
                    </span>

                    <div class="coupon-center">
                      <span class="coupon-date"
                        >活动时间至{{ item.EndTime }}</span
                      >
                      <block v-if="item.PayMethod === 2000">
                        <span class="span24"
                          >{{ item.CouponPoint }}积分兑换</span
                        >
                      </block>
                    </div>
                  </div>
                  <div class="coupon-left">
                    <span class="coupon-use-door" @click="goDetail(item)">{{
                      item.PayMethod === 2000 ? "去兑换" : "去领取"
                    }}</span>
                  </div>
                </div> -->
              </div>
              <no-data
                :text="'该商家最近没有优惠'"
                :isShow="!(couponList && couponList.length > 0)"
              />
            </div>
          </div>

          <div v-if="pageMsg.activeTabs === 1">
            <MerchantEvaluation ref="merchantEvaluation" :storeMsg="storeMsg" />

            <div class="rate-box" @click="goEvaluate">
              <div class="rate-gray">评价一下这家店...</div>
              <div class="rate-ico"><i></i>评论</div>
            </div>
          </div>

          <div title="商家" v-if="pageMsg.activeTabs === 2">
            <div style="padding: 0 16rpx 40rpx 32rpx">
              <div v-if="false">
                <div class="info-desc-title" v-if="storeMsg.ImgList">
                  <van-icon
                    name="photo-o"
                    size="40rpx"
                    color="#CAA97F"
                    custom-style="margin-right:16rpx;"
                  ></van-icon>
                  <text>商家实景</text>
                </div>
                <div class="store-photo-box" v-if="storeMsg.ImgList">
                  <!-- <div class="store-photo" v-for="(images,i) in storeMsg.ImgList" @click="seePhone(storeMsg.ImgList,i)" :key="i">
                <image mode="aspectFill" :src="images.IMAGE_URL"></image>
              </div> -->
                  <swiper
                    scroll-x="true"
                    class="swiper-image"
                    :display-multiple-items="
                      storeMsg.ImgList.length > 1 ? 2 : 1
                    "
                    next-margin="120rpx"
                    :style="storeMsg.ImgList.length == 1 ? 'width:405rpx' : ''"
                  >
                    <swiper-item
                      v-for="(item, i) in storeMsg.ImgList"
                      :key="i"
                      class="store-photo"
                      @click="seePhone(storeMsg.ImgList, i)"
                    >
                      <image mode="aspectFill" :src="item.IMAGE_URL"></image>
                    </swiper-item>
                  </swiper>
                </div>
                <block v-if="foodImages.length > 0">
                  <div class="info-desc-title">
                    <van-icon
                      name="photo-o"
                      size="40rpx"
                      color="#CAA97F"
                      custom-style="margin-right:16rpx;vertical-align:middle;"
                    ></van-icon>
                    <span>推荐商品</span>
                  </div>
                  <div class="store-photo-box">
                    <!-- <div class="store-photo" v-for="(images,i) in foodImages" @click="seePhone(foodImages,i)" :key="i">
                  <image mode="aspectFill" :src="images.IMAGE_URL"></image>
                  <div class="photo-name">{{images.TITLE}}</div>
                </div> -->
                    <swiper
                      scroll-x="true"
                      class="swiper-image"
                      :display-multiple-items="foodImages.length > 1 ? 2 : 1"
                      next-margin="120rpx"
                      :style="foodImages.length == 1 ? 'width:405rpx' : ''"
                    >
                      <swiper-item
                        v-for="(item, i) in foodImages"
                        :key="i"
                        class="store-photo"
                        @click="seePhone(foodImages, i)"
                      >
                        <image mode="aspectFill" :src="item.IMAGE_URL"></image>
                        <div class="photo-name">{{ item.TITLE }}</div>
                      </swiper-item>
                    </swiper>
                  </div>
                </block>
              </div>

              <div class="storeDetail">
                <div class="storeItem">
                  <div class="itemTop">
                    <div class="imgBox">
                      <image
                        class="storeIcon"
                        src="/static/images/home/MERCHANTSDESC.png"
                      />
                    </div>

                    <span class="desc">商家介绍：</span>
                  </div>
                  <div class="infoDesc">
                    {{ storeMsg.MERCHANTS_DESC || "暂无" }}
                  </div>
                </div>

                <div class="storeItem">
                  <div class="itemTop">
                    <div class="imgBox">
                      <image
                        class="storeIcon"
                        src="/static/images/home/onlineTime.png"
                      />
                    </div>

                    <span class="desc">营业时间：</span>
                  </div>
                  <div class="infoDesc">
                    {{ storeMsg.BUS_STARTDATE || "暂无" }}
                  </div>
                </div>

                <div class="storeItem">
                  <div class="itemTop">
                    <div class="imgBox">
                      <image
                        class="storeIcon"
                        src="/static/images/home/detailPhone.png"
                      />
                    </div>

                    <span class="desc">电话：</span>
                  </div>
                  <div class="infoDesc">
                    {{ storeMsg.MERCHANTS_TELEPHONE || "暂无" }}
                  </div>
                </div>

                <div class="storeItem">
                  <div class="itemTop">
                    <div class="imgBox">
                      <image
                        class="storeIcon"
                        src="/static/images/home/addressIcon.png"
                      />
                    </div>

                    <span class="desc">地址：</span>
                  </div>
                  <div class="infoDesc">
                    {{ storeMsg.MERCHANTS_ADDRESS || "暂无" }}
                  </div>
                </div>
              </div>

              <div class="store-info" v-if="false">
                <div class="info-unit">
                  <van-icon
                    name="hotel-o"
                    size="40rpx"
                    color="#CAA97F"
                    custom-style="margin-right:16rpx;vertical-align:middle;"
                  ></van-icon>
                  <span class="info-unit-title"> 商家介绍 </span>
                  <block v-if="!storeMsg.MERCHANTS_DESC">暂无</block>
                </div>
                <div class="info-desc" v-if="storeMsg.MERCHANTS_DESC">
                  {{ storeMsg.MERCHANTS_DESC || "暂无" }}
                </div>

                <div class="info-unit">
                  <van-icon
                    name="phone-circle-o"
                    size="40rpx"
                    color="#CAA97F"
                    custom-style="margin-right:16rpx;vertical-align:middle;"
                  ></van-icon>
                  <span class="info-unit-title"> 商家电话 </span>
                  {{ storeMsg.MERCHANTS_TELEPHONE || "暂无" }}
                </div>
                <div class="info-unit">
                  <van-icon
                    name="location-o"
                    size="40rpx"
                    color="#CAA97F"
                    custom-style="margin-right:16rpx;vertical-align:middle;"
                  ></van-icon>
                  <span class="info-unit-title"> 商家地址 </span>
                  {{ storeMsg.MERCHANTS_ADDRESS || "暂无" }}
                </div>
                <div class="info-unit">
                  <van-icon
                    name="todo-list-o"
                    size="40rpx"
                    color="#CAA97F"
                    custom-style="margin-right:16rpx;vertical-align:middle;"
                  ></van-icon>
                  <span class="info-unit-title"> 营业时间 </span>
                  {{ storeMsg.BUS_STARTDATE || "暂无" }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <UniPopup
      :show="isLogin && !user.MEMBERSHIP_MOBILEPHONE"
      @close="isLogin = false"
      custom-style="border-radius: 24rpx;"
    >
      <div class="pop-box">
        <div class="pop-title">温馨提示</div>
        <div class="pop-body">您还没有登录，快去登录吧!</div>
        <div class="popbtn-box">
          <div class="popbtn cancel-btn" @click="isLogin = false">取消</div>
          <div class="popbtn confirm-btn" @click="goRegister">去登录</div>
        </div>
      </div>
    </UniPopup>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import noData from "@/components/noData.vue";
import MerchantEvaluation from "./components/merchantEvaluation.vue";
import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
export default {
  data() {
    return {
      storeMsg: {
        MERCHANTS_LOGO: "",
        MERCHANTS_NAME: "",
        MERCHANTS_SCORE: "",
        MONTHLYSALES: "",
        COMMENT_COUNT: "",
        ImgList: [],
        MERCHANTS_DESC: "",
        BUS_STARTDATE: "",
        MERCHANTS_TELEPHONE: "",
        MERCHANTS_ADDRESS: "",
        BUS_STARTDATE: "",
      },
      couponList: [],
      foodImages: [],
      pageMsg: {
        firstLoding: 0,
        activeTabs: 0,
        noAppoint: true,
      },
      imgbg: "url(https://eshangtech.com/ShopICO/shopbg.png)",
      isLogin: false,
      loginType: "",
      tabList: [
        { label: "优惠", value: 0 },
        { label: "评价", value: 1 },
        { label: "商家", value: 2 },
      ],
    };
  },
  computed: {
    ...mapGetters({
      user: "user",
      refresh: "refresh",
    }),
  },
  components: {
    noData,
    MerchantEvaluation,
    UniPopup,
  },

  methods: {
    goRegister() {
      uni.navigateTo({ url: "/pages/register/index" });
    },
    changeActive(e) {
      this.pageMsg.activeTabs = e.mp.detail.index;
    },
    handleChangeTab(value) {
      this.pageMsg.activeTabs = value;
      this.$forceUpdate();
      if (this.pageMsg.activeTabs === 1) {
        this.getShop(this.storeMsg.MERCHANTS_ID);
        setTimeout(() => {
          this.$refs.merchantEvaluation.loading();
        });
      }
      if (this.pageMsg.activeTabs === 0) {
        this.getCouponList(this.storeMsg.MERCHANTS_ID);
      }
      if (this.pageMsg.activeTabs === 2) {
        this.getShop(this.storeMsg.MERCHANTS_ID);
        this.getFoodImages(this.storeMsg.MERCHANTS_ID);
      }
    },
    seePhone(item, i) {
      let urls = [];
      item.map((n) => {
        urls.push(n.IMAGE_URL);
      });
      uni.previewImage({
        current: urls[i], // 当前显示图片的http链接
        urls: urls, // 需要预览的图片http链接列表
      });
    },
    seeLogo(item) {
      uni.previewImage({
        current: item, // 当前显示图片的http链接
        urls: [item], // 需要预览的图片http链接列表
      });
    },
    goDetail(item) {
      uni.navigateTo({ url: "/pages/couponDetail/index?id=" + item.CouponId });
    },
    goEvaluate(item) {
      uni.navigateTo({
        url:
          "/pages/newEvaluate/index?merchantsId=" + this.storeMsg.MERCHANTS_ID,
      });
    },
    // goShop () {
    //   if (this.user.MEMBERSHIP_MOBILEPHONE) {
    //     let _data = this.storeMsg.ShopList[0]

    //     let arr = {
    //       id: _data.SERVERPARTSHOP_ID,
    //       shopName: _data.SHOPSHORTNAME,
    //       serverpartId: _data.SERVERPART_ID

    //     }

    //     this.$store.commit('nowStore', arr)
    //     this.$store.commit('setprovinceCode', _data.PROVINCE_CODE)
    //     uni.redirectTo({url: '/pages/shopPages/shop/index?type=1&id=' + _data.SERVERPARTSHOP_ID})
    //   } else {
    //     this.isLogin = true
    //   }
    // },
    getShop(id) {
      let _this = this;
      this.$api
        .getCoop({
          action_type: "GetMerchantsDetails",
          merchantsId: id,
        })
        .then(function (res) {
          let _data = res.Data;
          console.log("getShop", _data);
          _this.storeMsg = _data;
          // _this.$refs.merchantEvaluation.getRate(_data)
          _this.$forceUpdate();
        });
    },
    getCouponList(id) {
      let _this = this;
      _this.$api
        .$get("/WeChat/GetCouponList/", { sellerId: id })
        .then(function (data) {
          if (data.Result_Code === 100) {
            _this.couponList = data.Result_Data.List || [];
          }
        });
    },
    getFoodImages(id) {
      let _this = this;
      _this.$api
        .getCoop({
          action_type: "GetRcmContent",
          rcmtagKey: "RCM_COMMODITY",
          sellerId: id,
        })
        .then(function (data) {
          _this.foodImages = data.Data.List;
        });
    },
  },
  onLoad(options) {
    console.log("options", options);
    // 判断是小程序还是app
    let type = uni.getStorageSync("loginType");
    console.log("type", type);
    this.loginType = type;

    if (options.noAppoint) {
      // 如果页面来源于点餐页面 则不再显示去点餐按钮
      this.pageMsg.noAppoint = true;
    } else {
      this.pageMsg.noAppoint = false;
    }
    this.storeMsg.MERCHANTS_ID = options.id;
    this.pageMsg.firstLoding = 1;
    this.getCouponList(options.id);
    this.getFoodImages(options.id);
    this.getShop(options.id);
    this.$utils.addUserBehaviorNew();
  },
  onPullDownRefresh() {
    // let _this = this
    // _this.couponList = []

    if (this.pageMsg.activeTabs === 1) {
      this.getShop(this.storeMsg.MERCHANTS_ID);
      this.$refs.merchantEvaluation.loading();
    }
    if (this.pageMsg.activeTabs === 0) {
      this.getCouponList(this.storeMsg.MERCHANTS_ID);
    }
    if (this.pageMsg.activeTabs === 2) {
      this.getShop(this.storeMsg.MERCHANTS_ID);
      this.getFoodImages(this.storeMsg.MERCHANTS_ID);
    }
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  onReady() {
    let _this = this;
    if (this.pageMsg.firstLoding === 1) {
      this.$nextTick(function () {
        setTimeout(() => {
          if (_this.$refs.merchantEvaluation) {
            _this.$refs.merchantEvaluation.loading();
          }
        }, 0);
      });
      this.pageMsg.firstLoding = 0;
    }
  },
  onShow() {
    if (this.pageMsg.activeTabs === 1 && this.refresh) {
      this.getShop(this.storeMsg.MERCHANTS_ID);
      this.$refs.merchantEvaluation.loading();
      this.$store.commit("refresh", false);
    }
    // if (this.pageMsg.activeTabs === 0) {
    //   this.getShop(this.storeMsg.MERCHANTS_ID)
    //   this.getCouponList(this.storeMsg.MERCHANTS_ID)
    // }
  },
  onUnload() {
    this.isLogin = false;
    this.storeMsg = {
      MERCHANTS_LOGO: "",
      MERCHANTS_NAME: "",
      MERCHANTS_SCORE: "",
      MONTHLYSALES: "",
      COMMENT_COUNT: "",
      ImgList: [],
      MERCHANTS_DESC: "",
      BUS_STARTDATE: "",
      MERCHANTS_TELEPHONE: "",
      MERCHANTS_ADDRESS: "",
      BUS_STARTDATE: "",
    };
    this.couponList = [];
    this.pageMsg.activeTabs = 0;
  },
  onReachBottom() {
    if (this.pageMsg.activeTabs === 1) {
      this.$refs.merchantEvaluation.loadMore();
    }
  },
};
</script>


<style lang="stylus" scope >
color999 = #999;

.store-cont {
  // border-bottom 1rpx solid #eee
  background: #fff;
}

.store-title {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 32rpx;
  color: #130F05;
  line-height: 44rpx;
  text-align: left;
  font-style: normal;
}

.img-down {
  width: 13rpx;
  height: 8rpx;
  vertical-align: middle;
  margin-left: 4rpx;
}

.store-detail {
  display: flex;
  font-size: 24rpx;
  color: #666;
  align-items: flex-start;
  background-size: cover;
  background-repeat: no-repeat;
  height: 200rpx;
  align-items: center;
  padding: 0 40rpx 0rpx 40rpx;
}

.tabContentBox {
  width: 100%;

  .tabBox {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;

    .tabItems {
      height: 100%;
      text-align: center;
      line-height: 40px;
      color: #6d6b6b;
      margin: 0 40rpx;

      .smallNumber {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 20rpx;
        color: #716F69;
        line-height: 28rpx;
        text-align: justify;
        font-style: normal;
        margin-left: 4rpx;
      }
    }

    .selectTab {
      color: #000000;
      position: relative;
    }

    .selectTab:after {
      position: absolute;
      content: '';
      width: 2rem;
      height: 4px;
      border-radius: 4px;
      background-color: #a18153;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .tabLine {
    width: 100%;
    height: 1px;
    background: #F6F6F6;
  }

  .contentList {
    width: 100%;
    height: calc(100% - 150px);
    overflow-y: auto;
  }
}

.stote-head {
  // padding-top 62rpx
  // padding-left 32rpx
  // display flex
  // flex-direction column
  flex: 1;
  height: 128rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-satrt;
  // align-items center
  // background #fff
  padding-left: 16rpx;
}

// .gray-block
// background #f9f9f9
// height 16rpx
.store-info {
  // position relative
  // top -56rpx
  overflow: hidden;
  font-size: 24rpx;
  // margin-top 40rpx
  background: #fff;
  padding: 16rpx 0rpx;
  // box-shadow 0 0 4rpx #ddd
}

.storeDetail {
  width: 100%;
  box-sizing: border-box;
  padding-top: 24rpx;

  .storeItem {
    margin-bottom: 24rpx;

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

      .imgBox {
        width: 2rem;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .storeIcon {
          width: 32rpx;
          height: 32rpx;
          margin-right: 8rpx;
        }
      }

      .desc {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #716F69;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
      }
    }

    .infoDesc {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #130F05;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      width: 100%;
      text-indent: 2rem;
      margin-top: 4rpx;
    }
  }
}

.info-desc-title {
  font-size: 28rpx;
  font-weight: bolder;
  padding-bottom: 32rpx;
  display: flex;
  align-items: center;
}

.store-photo-box {
  white-space: nowrap;
  overflow: auto;
  padding-bottom: 16rpx;
  width: 100%;
}

.swiper-image {
  height: 250rpx;
}

.store-photo {
  display: inline-block;
  vertical-align: middle;
  width: 266rpx;
  height: 250rpx;
  text-align: center;
}

// .store-photo +.store-photo
// margin-left 16rpx
.store-photo image {
  background-color: #eee;
  width: 266rpx;
  height: 193rpx;
  border-radius: 8rpx;
}

.photo-name {
  padding-top: 12rpx;
  font-size: 28rpx;
  text-align: center;
}

.info-desc {
  color: #999;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;
  line-height: 1.8;
  font-size: 24rpx;
  text-indent: 50rpx;
}

.info-unit {
  // border-bottom 1rpx solid #eee
  display: flex;
  // justify-content space-between;
  align-items: center;
  height: 80rpx;
  // padding-right 30rpx
  color: #999;
  font-size: 28rpx;
}

.info-unit-title {
  color: #333;
  margin-right: 40rpx;
  font-weight: bolder;
  min-width: 114rpx;
}

// .store-name + .store-name:before
// content '|'
// margin 0 10rpx
.coupon-unit {
  // padding-top: 20rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #716F69;
  line-height: 36rpx;
  text-align: left;
  font-style: normal;
}

// .border-top
// border-top 1rpx solid #eee
.store-img {
  display: flex;
  align-items: center;
  justify-content: center;
}

.store-img image {
  width: 128rpx;
  height: 128rpx;
  // box-shadow 0 0 8rpx 2rpx #333
  border-radius: 20rpx;
}

// .store-banner
// width 100%
// display flex
// align-items center
// justify-content center
// padding 20rpx 0

// .store-banner img
// width 686rpx
// height 176rpx

// .coupon-title
// color #333333
// font-size 32rpx
// display flex
// align-items center
// width 638rpx
// margin 30rpx auto 0 auto

// image
// width 62rpx
// height 62rpx
// margin-right 24rpx
// border-radius 36rpx
.coupon-list {
  width: calc(100% - 64rpx);
  margin-left: 32rpx;
  height: 144rpx;
  background: url('/static/images/home/validCoupons.png') no-repeat center;
  background-size: contain;
  box-sizing: border-box;
  padding: 32rpx 0;
  display: flex;
  align-items: center;
  margin-bottom: 32rpx;

  .itemleft {
    width: 190rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 2rpx dashed #E5CD92;

    .leftUnit {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 34rpx;
      color: #BA922F;
      line-height: 48rpx;
      text-align: left;
      font-style: normal;
      margin-right: 4rpx;
    }

    .money {
      font-family: DINAlternate, DINAlternate;
      font-weight: bold;
      font-size: 48rpx;
      color: #BA922F;
      line-height: 56rpx;
      text-align: left;
      font-style: normal;
    }

    .condition {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 20rpx;
      color: #BA922F;
      line-height: 28rpx;
      text-align: justify;
      font-style: normal;
    }
  }

  .itemRight {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 0 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .couponName {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #130F05;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
    }

    .timeText {
      .coupon-date {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 22rpx;
        color: #716F69;
        line-height: 32rpx;
        text-align: justify;
        font-style: normal;
      }
    }

    .useBtn {
      .useBtnText {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #FFFFFF;
        line-height: 36rpx;
        text-align: center;
        font-style: normal;
        padding: 8rpx 20rpx;
        background: #BA922F;
        border-radius: 4rpx;
      }
    }
  }
}

.coupon-list + .coupon-list {
  margin-top: 30rpx;
}

.coupon-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.coupon-left {
  text-align: center;
  color: bodyColor;
}

.coupon-price {
  color: #323033;
  font-size: 46rpx;
  font-weight: bolder;
  font-family: 'San Francisco Display Medium';
}

// .coupon-manjian
// margin-top 20rpx
.coupon-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16rpx;
}

// .coupon-img
// width 110rpx
// height 110rpx
// border-radius 10rpx
// background #dddddd
// margin-right 20rpx
// .coupon-zx
// display inline-block
// padding 6rpx 10rpx
// color #be6f6b
// border 2rpx solid #edd0cc
// background #fef4f3
// border-radius 6rpx
// margin 6rpx 0
.coupon-name {
  color: #000;
  font-size: 26rpx;
  margin-bottom: 8rpx;
}

// .coupon-right
// display flex
// justify-content space-between
// align-items center
// padding-top 20rpx
.coupon-use-door {
  background: url('https://eshangtech.com/ShopICO/coupon-btn.png') no-repeat center; // eshangtech.com/ShopICO/coupon-btn.png) no-repeat center
  background-size: contain;
  color: #ffffff;
  text-align: center;
  display: inline-block;
  width: 120rpx;
  height: 40rpx;
  line-height: 40rpx;
}

// .coupon-door
// display inline-block
// background #f2f2f2
// color #999
// padding 6rpx 30rpx
// border-radius 20rpx
// font-size 24rpx
.coupon-date {
  color: #333333;
}

.span24 {
  display: block;
  color: color999;
  font-size: 24rpx;
}

// .line-through
// text-decoration line-through
// .coupon-btn
// height 100rpx
// width 100%
// line-height 100rpx
// background #333
// color bodyColor
// text-align center
// font-size 30rpx
// position fixed
// bottom 0rpx
// left 0rpx
// .go-btn:before
// content '预'
// color #ffffff
// background #F5BC50
// font-size 20rpx
// border-radius 4rpx
// padding 0 5rpx
// margin-right 8rpx
// .go-btn
// color #fff

// .rate-box
// width 100%
// box-sizing border-box
// position fixed
// bottom 0
// left 0
// display flex
// padding 12rpx 24rpx
// box-shadow 0 0 8rpx 2rpx #ececec
// background #fff
// .rate-gray
// background #F0F0F0
// font-size 26rpx
// width 514rpx
// height 72rpx
// line-height 72rpx
// border-radius 72rpx
// color #797979
// padding 0 24rpx
// margin-right 24rpx
// .rate-ico
// display flex
// align-items center
// font-size 26rpx
// color #B88E53
// i
// width 44rpx
// height 42rpx
// background url(../../../static/images/home/rate.png) no-repeat center
// background-size contain
// margin-right 16rpx
.rate-box {
  width: 100%;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  padding: 12rpx 24rpx;
  box-shadow: 0 0 8rpx 2rpx #ececec;
  background: #fff;

  .rate-gray {
    background: #F0F0F0;
    font-size: 26rpx;
    width: 514rpx;
    height: 72rpx;
    line-height: 72rpx;
    border-radius: 72rpx;
    color: #797979;
    padding: 0 24rpx;
    margin-right: 24rpx;
  }

  .rate-ico {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    color: #B88E53;
  }

  i {
    width: 44rpx;
    height: 42rpx;
    background: url('/static/images/home/rate.png') no-repeat center;
    background-size: contain;
    margin-right: 16rpx;
  }
}

.pop-box {
  width: 588rpx;
  height: 256rpx;
  text-align: center;
  padding: 40rpx 0;
  border-radius: 30rpx;
  overflow: hidden;
}

.pop-title {
  font-size: 32rpx;
}

.pop-body {
  font-size: 28rpx;
  margin-top: 36rpx;
}

.popbtn-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 72rpx;
}

.popbtn {
  height: 60rpx;
  width: 208rpx;
  border-radius: 32rpx;
  text-align: center;
  font-size: 24rpx;
  line-height: 60rpx;
}

.popbtn+.popbtn {
  margin-left: 60rpx;
}

.cancel-btn {
  border: 1rpx solid #616161;
  color: #616161;
}

.confirm-btn {
  background: #515151;
  color: #fff;
}
</style>
