VAVABUY/pages/repo/index.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar title="回购" fixed border>
        <template #right>
          <view class="nav_right" @click.stop="openAgreement">
            <trans _t="回购规则" />
            <up-icon
              name="question-circle"
              size="32rpx"
              color="var(--red)"
              class="icon"
            ></up-icon>
          </view>
        </template>
      </Navbar>
      <view class="content">
        <view class="cont_tab">
          <Tab
            :active="tabActive"
            :tabList="tabList"
            @confirm="tabConfirm"
            keyName="text"
            size="28rpx"
          />
        </view>
        <view class="cont">
          <view class="item" v-for="(item, index) in detials" :key="index">
            <view class="item-left">
              <view class="product">
                <image class="img" :src="item.pic_url"></image>
              </view>
              <view class="deatils">
                <view class="title">{{ item.orderNo }}</view>
                <view class="deatils_bottom">
                  <view class="price"
                    >{{ symbol.symbol }}&nbsp;{{ Moneyhtml(item.price) }}</view
                  >
                  <view class="item-right">
                    <view
                      class="btn"
                      @click="buyBack(item)"
                      v-if="tabActive == 0"
                    >
                      <trans _t="回购" />
                    </view>
                    <view
                      class="btn"
                      @click="writeLogistics(item)"
                      v-if="tabActive == 1 && item.status == 1"
                    >
                      <trans _t="填写物流" />
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="null_warp" v-if="!detials.length">
            <view class="null_text">{{ t("无数据") }}</view>
          </view>
        </view>
      </view>
    </view>

    <buyBackModel ref="buyBackModelRef" :id="repoId" @submit="getData" />
    <logisticsModel ref="logisticsModelRef" @submit="getData" />
    <SimpleAgreementModal ref="agreementModalRef" />
  </Theme>
</template>
<script setup>
import Navbar from "@/components/navbar";
import { computed, ref, nextTick } from "vue";
import { t } from "@/locale";
import Tab from "@/components/tabs.vue";
import { useSystemStore, useTabbarStore } from "@/store";
import { Moneyhtml, Toast } from "@/utils";
import { onShow } from "@dcloudio/uni-app";
import { SHOP_BUYBACK_LISTS, SHOP_BUYBACK_ORDER } from "@/api";
import buyBackModel from "./components/buyBackModel";
import logisticsModel from "./components/logisticsModel";
import SimpleAgreementModal from "@/components/simpleAgreementModal";

const useTabbar = useTabbarStore();
const useSystem = useSystemStore();
const symbol = computed(() => useSystem.getSymbol);
const tabActive = ref(0);
const tabList = [
  { text: "可回购" },
  { text: "回购中", status: 0 },
  { text: "已回购", status: 3 },
];

const repoId = ref("");
const detials = ref([]);
const orderStatus = ref(0);

const buyBackModelRef = ref(null);
const logisticsModelRef = ref(null);
const agreementModalRef = ref(null);

const tabConfirm = (item, index) => {
  if (!item) return;
  detials.value = [];
  tabActive.value = index;
  if (tabActive.value) {
    orderStatus.value = item.status;
  }
  nextTick(() => {
    getData();
  });
};
const getData = async () => {
  try {
    const res = await (tabActive.value == 0
      ? SHOP_BUYBACK_LISTS()
      : SHOP_BUYBACK_ORDER(orderStatus.value));
    detials.value = res.data || [];
  } catch (error) {
    Toast(error.msg);
  }
};
const buyBack = (item) => {
  repoId.value = item.id;
  buyBackModelRef.value && buyBackModelRef.value.open();
};
const repoSubmit = () => {
  getData();
};
const writeLogistics = (item) => {
  logisticsModelRef.value && logisticsModelRef.value.open(item.id);
};
const openAgreement = () => {
  agreementModalRef.value && agreementModalRef.value.open("buyback");
};

onShow(() => {
  nextTick(() => {
    getData();
  });
});
</script>
<style lang="less" scoped>
@import url("@/style.less");

.wrap {
  background: var(--bg);
  min-height: 100vh;
  .nav_right {
    display: flex;
    color: var(--text);
    .size(28rpx);
    .icon {
      margin-left: 8rpx;
    }
  }

  .content {
    flex-grow: 1;
    height: calc(100vh - 44px);
    flex-direction: column;
    .flex();

    .cont_tab {
      background-color: var(--light);
      padding: 0 48rpx;
    }

    .cont {
      flex-grow: 1;
      overflow: hidden scroll;
      padding: 24rpx;

      .item {
        width: 100%;
        .flex_position(space-between);
        padding: 24rpx;
        border-radius: 20rpx;
        margin-bottom: 24rpx;
        box-shadow: 0px 8rpx 20rpx 0px var(--bor-color1);

        .item-left {
          width: 100%;
          display: flex;
          .product {
            flex-shrink: 0;
            width: 120rpx;
            height: 120rpx;
            margin-right: 14rpx;
            .img {
              width: 100%;
              height: 100%;
              border-radius: 15rpx;
            }
          }
          .deatils {
            flex: 1;
            .hor(space-between);
            flex-direction: column;

            .title {
              .size(28rpx);
              font-weight: 600;
              color: var(--text);
            }
            .deatils_bottom {
              width: 100%;
              .hor(space-between);
              align-items: flex-end;
              .price {
                display: flex;
                .size(28rpx);
                font-weight: 700;
                color: var(--red);
                font-family: "HarmonyOS_Sans";
                /deep/ div {
                  .ver(baseline);
                  .decimal {
                    .size(24rpx);
                  }
                }
              }
              .item-right {
                .btn {
                  height: 66rpx;
                  line-height: 66rpx;
                  text-align: center;
                  .size(24rpx);
                  color: var(--light);
                  border-radius: 10rpx;
                  padding: 0 24rpx;
                  background: var(--black);
                }
              }
            }
          }
        }
      }

      .null_warp {
        .null_text {
          min-height: 100rpx;
          .flex_center();
          .size(28rpx);
          color: #333;
        }
      }
    }
  }
}
</style>