wanmeiyizhan/pages/shopPages/coupon/index.vue

<template>
  <div class="coupon">
    <radio-group :value="radio">
      <radio
        color="#CAA97F"
        v-for="(item, i) in couponList"
        :key="i"
        :checked="radio === i"
        @click="handleChange(i)"
        :class="{ 'coupon-bg': couponOrder <= item.WithAmount }"
      >
        <div class="coupon-list">
          <div class="coupon-top">
            <div class="coupon-left">
              <block v-if="item.CouponType === 2000">
                <span class="coupon-price">{{ item.UseAmount * 10 }}</span
                >折
              </block>
              <block v-else>
                ￥ <span class="coupon-price">{{ item.UseAmount }}</span>
              </block>
              <div class="span24">
                {{
                  item.WithAmount > 0
                    ? "满" + item.WithAmount + "可用"
                    : "无门槛使用"
                }}
              </div>
            </div>
            <div style="width: 316rpx">
              <div class="coupon-name">{{ item.CouponName }}</div>
              <div class="coupon-type-text">{{ item.CouponTypeText }}</div>
              <div class="coupon-center">
                <span class="coupon-date">有效期至{{ item.EndTime }}</span>
              </div>
            </div>

            <div class="coupon-radio">
              <van-radio
                :name="i"
                checked-color="#CAA97F"
                :disabled="couponOrder < item.WithAmount"
                @click="getRadio(i)"
              />
            </div>
          </div>
          <div class="coupon-bottom">
            <div class="coupon-des">
              使用说明：{{ item.CouponInstructions }}
            </div>
          </div>
        </div>
      </radio>
    </radio-group>
    <no-data :text="''" :isShow="couponList.length > 0" />
    <div class="confirm-choese">
      <div class="pay-left">
        可抵扣
        <span class="pay-price">{{
          couponList.length > 0 ? couponList[radio].UseAmount : 0
        }}</span>
        元
      </div>
      <div class="pay-right" @click="couponBtn">确认使用</div>
    </div>
    <!-- <div class="coupon-btn" @click="couponBtn">使用</div> -->
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import NoData from "../../../components/noData.vue";
export default {
  data() {
    return {
      radio: 0,
      couponOrder: {},
      couponList: [],
    };
  },
  computed: {
    ...mapGetters({
      //   user: 'user',
      //   isLoading: 'isLoading',
      provinceCode: "provinceCode",
      couponPrice: "couponPrice",
    }),
  },
  components: {
    NoData,
  },
  methods: {
    ...mapMutations({
      setIsLoading: "setIsLoading",
    }),
    handleChange(e) {
      console.log("handleChange", e);
      this.radio = e;
    },
    getRadio(item) {
      if (this.radio === item) {
        this.radio = "";
      } else {
        this.radio = parseInt(item);
      }
    },
    couponBtn() {
      this.$store.commit("couponPrice", this.couponList[this.radio]);
      uni.navigateBack({
        delta: 1,
      });
    },
    getCouponList() {
      // 获取有用的优惠券
      let _this = this;
      let arr = {
        CouponStatus: 0,
        provinceCode: this.provinceCode || "340000",
        orderAmount: this.couponOrder.couponOrder,
        serverpartShopId: this.couponOrder.storeId,
      };
      console.log("arr", arr);
      _this.$api.$get("/WeChat/GetMemberCouponList", arr).then(function (data) {
        console.log("GetMemberCouponList", data);
        if (data.Result_Code === 100) {
          _this.setIsLoading(false);
          _this.couponList = data.Result_Data.List;
          if (
            _this.couponList &&
            _this.couponList.length > 0 &&
            _this.couponPrice
          ) {
            _this.couponList.forEach((item, index) => {
              if (item.CouponId === _this.couponPrice.CouponId) {
                _this.radio = index;
              }
            });
          }
        }
      });
    },
  },
  onUnload() {
    this.couponOrder = {};
    this.couponList = [];
  },
  // onHide () {
  //   this.couponOrder = {}
  //   this.couponList = []
  // },
  onLoad(option) {
    console.log("option", option);
    if (option.storeId) {
      // 是否是选择优惠券
      this.couponOrder = option;
    }
    // this.setIsLoading(true)
    // this.getCouponList()
  },
  onShow() {
    this.setIsLoading(true);
    this.getCouponList();
  },
};
</script>

<style lang="stylus" scoped>
bodyColor = #CAA97F;
color999 = #999999;

.coupon {
  padding-top: 20rpx;
  padding-bottom: 120rpx;
}

.coupon-bg {
  opacity: 0.5;
}

.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 {
  background: url('https://eshangtech.com/ShopICO/icos/coup-bg.png') no-repeat center;
  background-size: contain;
  height: 263rpx;
  width: 708rpx;
  padding: 12rpx 30rpx;
  margin: 0 auto 16rpx auto;
  box-sizing: border-box;
  font-size: 24rpx;
}

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

.coupon-left {
  text-align: center;
  color: #ea3323;
  width: 130rpx;
}

.coupon-price {
  color: #ea3323;
  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: 30rpx;
  margin-bottom: 5rpx;
  font-weight: 800;
}

.coupon-type-text {
  color: #5A5B56;
  font-size: 20rpx;
  border: 1rpx solid #E9E9E9;
  margin-bottom: 12rpx;
  display: inline-block;
  padding: 1rpx 4rpx;
  border-radius: 1rpx;
  line-height: 20rpx;
}

.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: #666;
}

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

.coupon-radio {
  width: 100rpx;
}

.coupon-bottom {
  padding-top: 16rpx;
  padding-left: 8rpx;
}

.coupon-des {
  color: #999997;
  font-size: 20rpx;
}

.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;
}

.confirm-choese {
  border-top: 1rpx solid #eee;
  height: 100rpx;
  line-height: 100rpx;
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  overflow: hidden;

  .pay-left {
    font-size: 26rpx;
    flex: 7;
    background-color: #fff;
    padding-left: 20rpx;

    .pay-price {
      color: #ea3323;
      margin-left: 10rpx;
      font-size: 36rpx;
      font-weight: bolder;
    }
  }

  .pay-right {
    flex: 3;
    text-align: center;
    color: #fff;
    font-size: 30rpx;
    background: linear-gradient(to right, #C5A671, #DCC194);
  }
}
</style>