cashier_wx/pages/order/components/charge.vue

<template>
  <view>
    <view class="box" v-if="isShow">
      <!-- <view class="u-flex u-col-center" style="align-items: center">
        <image src="/static/icon/charge.png" class="charge" mode=""></image>
        <view class="u-m-l-28 color-333 font-700"> 充值享优惠</view>
      </view> -->
      <scroll-view scroll-x="true" >
        <view class="list">
          <view
            class="item color1"
            @click="itemClick(index)"
            v-for="(item, index) in list"
            :key="index"
            :class="{ active: sel == index }"
          >
            <view class="">
              <text>￥</text>
              <text
                class="font-700"
                style="font-size: 48rpx"
                :class="{ color2: sel == index }"
                >{{ item.amount }}</text
              >
            </view>
            <view
              class="font-12"
              v-if="item.rewardAmount"
              :class="{ color2: sel == index }"
            >
              <text>赠</text>
              <text>￥</text>
              <text class="font-14">{{ item.rewardAmount }}</text>
            </view>
            <view class="font-12" v-if="item.rewardPoints">
              <text>送</text>
              <text class="font-14">{{ item.rewardPoints }}</text>
              <text>积分</text>
            </view>
            <view class="font-12 color-666" v-if="item.couponInfoList.length">
              <text>送</text>
              <text>{{ couponNum(item.couponInfoList) }}</text>
              <text>张券</text>
              <text
                class="color2 u-m-l-8"
                v-if="sel == index"
                @click="lookCoupon(item)"
                >查看</text
              >
            </view>

            <view class="sel u-flex" v-if="sel == index">
              <image class="image" src="/static/vip/sel.png" mode=""></image>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="" v-else></view>
    <CouponList
      v-model="couponModel.show"
      :list="couponModel.couponInfoList"
    ></CouponList>
  </view>
</template>

<script setup>
import CouponList from "@/components/coupon/list.vue";
import * as rechargeApi from "@/common/api/market/recharge.js";
import { useCartsStore } from "@/stores/carts.js";
import { onMounted, reactive, ref, watch } from "vue";
const couponModel = reactive({
  show: false,
  couponInfoList: [],
});

function lookCoupon(item) {
  couponModel.couponInfoList = item.couponInfoList;
  couponModel.show = true;
}

function couponNum(list) {
  return list.reduce((prve, cur) => {
    return prve + cur.num;
  }, 0);
}
const cartStore = useCartsStore();

const list = ref([]);
const sel = ref(-1);
const isShow = ref(false);
let data = {};
let $riginList = [];
const emits = defineEmits(["updateChargeSel", "updateRechargeId","updateIsShow"]);

async function init() {
  console.log("recharge");
  const shopId = uni.cache.get("shopId");
  const res = await rechargeApi.config({
    shopId,
  });
  if (res) {
    data = res;
    $riginList = res.rechargeDetailList;
    isShow.value = res.isOrder&&res.isEnable?true:false;
    list.value = res.rechargeDetailList.filter(
      (v) => v.amount > cartStore.orderCostSummary.finalPayAmount
    );
    if (list.value.length) {
      updateSel();
    }
  }
}
watch(
  () => cartStore.orderCostSummary.finalPayAmount,
  (newval) => {
    list.value = $riginList.filter((v) => v.amount > newval);
    if (list.value.length) {
      updateSel();
    }
  }
);
function updateSel() {
  const selItem = list.value[sel.value];
  emits("updateChargeSel", selItem ? selItem : {});
  emits("updateRechargeId", data.id);
}
function itemClick(index) {
  console.log("itemClick", sel.value, index);
  if (sel.value == -1) {
    sel.value = index;
    return;
  }
  if (sel.value == index) {
    sel.value = -1;
    return;
  }
  sel.value = index;
}
watch(
  () => sel.value,
  (newval) => {
    updateSel();
  }
);
watch(()=>isShow.value,(newval)=>{
  emits("updateIsShow", newval);
})
onMounted(() => {
  init();
});
</script>

<style lang="scss" scoped>
.color1 {
  color: #5f2e0f;
}
.color2 {
  color: #ff6300;
}
.box {
  padding:0 30rpx;
  overflow: hidden;
}

.charge {
  width: 70rpx;
  height: 70rpx;
}

.list {
  display: flex;
  gap: 20rpx;
  padding-bottom: 20rpx;

  .item {
    padding: 36rpx 22rpx;
    border-radius: 42rpx;
    background: linear-gradient(180deg, #F5F5F5 58.54%, #FFF 104.47%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    border: 6rpx solid transparent;
    transition: all 0.3s ease-in-out;
    min-width: 202rpx;

    &.active {
      background: linear-gradient(180deg, #ffc29a -26.17%, #fff 64.06%);
      border: 6rpx solid #fe6c0e;
      box-shadow: 0 0 31rpx 2rpx #fe8b435e;
    }

    .sel {
      position: absolute;
      bottom: 0;
      left: 50%;

      transform: translateX(-50%) translateY(21rpx);

      .image {
        width: 42rpx;
        height: 42rpx;
      }
    }
  }
}
</style>