VAVABUY/pages/dashboard/components/good_list.vue

<template>
  <view class="order_list" @click="listClick">
    <view class="header_img">
      <image :src="item.pic_url" mode="widthFix" class="img"></image>
    </view>
    <view class="header_title">{{ item.title }}</view>
    <view class="header_money red_money">
      <text class="symbol">{{ symbol.symbol }}</text
      >&nbsp;
      <rich-text class="_money" :nodes="Moneyhtml(item.price)"></rich-text>
    </view>
    <view class="header_money down_money" v-if="item.price != item.newprice">
      <trans _t="比加入时" />
      {{ item.newprice < item.price ? t("降") : t("涨") }}
      <text class="symbol">{{ symbol.symbol }}</text
      >&nbsp;
      <rich-text
        class="_money"
        :nodes="Moneyhtml(item.newprice - item.price)"
        v-if="item.newprice > item.price"
      ></rich-text>
      <rich-text
        class="_money"
        :nodes="Moneyhtml(item.price - item.newprice)"
        v-if="item.newprice < item.price"
      ></rich-text>
    </view>
    <view class="delete" @click.stop="deleteItem">
      <i class="icon-font icon-delete"></i>
    </view>
  </view>
  <Popup title="提醒" ref="popupRef" isClose>
    <template #content>
      <trans _t="您确定要从收藏中移除该产品吗" />
    </template>
    <template #footer>
      <view class="footer_btn">
        <view class="btn" @click="close">
          <trans _t="取消" />
        </view>
        <view class="btn del_btn" @click="submit">
          <trans _t="删除" />
        </view>
      </view>
    </template>
  </Popup>
</template>
<script setup>
import { useSystemStore } from "@/store";
import { computed } from "vue";
import { Moneyhtml } from "@/utils";
import Popup from "@/components/popup";
import { ref, nextTick } from "vue";
import { SHOP_USER_COLLECT } from "@/api";
import { useCacheStore } from "@/store";

const useCache = useCacheStore();

const popupRef = ref(null);

const useSystem = useSystemStore();
const symbol = computed(() => useSystem.getSymbol);

const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
});

const listClick = () => {
  uni.navigateTo({
    url: `/pages/shop/productDetail?channel=${props.item.channel}&goods_id=${props.item.goods_id}`,
  });
};

const emit = defineEmits(["delete"]);

const deleteItem = () => {
  popupRef.value && popupRef.value.open();
};

const submit = () => {
  setCollect({
    channel: props.item.channel,
    type: "good",
    goods_id: props.item.goods_id,
    seller_id: props.item.seller_id,
    title: props.item.title,
    pic_url: props.item.pic_url,
    price: props.item.price,
  });
};

const setCollect = async (params) => {
  try {
    const res = await SHOP_USER_COLLECT(params);
    close();
    nextTick(() => {
      useCache.changeShopCollect({
        channel: params.channel,
        goods_id: params.goods_id,
        isCollect: res.data.collect,
      });
      emit("delete", res);
    });
  } catch (error) {
    console.log(error);

    Toast(error.msg);
  }
};
const close = () => popupRef.value && popupRef.value.close();
</script>
<style lang="less" scoped>
@import url("@/style.less");

.order_list {
  background-color: var(--light);
  border-radius: 16rpx;
  margin-top: 16rpx;
  padding-bottom: 16rpx;
  position: relative;

  .header_img {
    width: 100%;
    aspect-ratio: 1 / 1;

    .img {
      width: inherit;
      height: inherit;
      border-radius: 16rpx;
      display: block;
    }
  }

  .header_title {
    color: var(--text);
    margin-top: 24rpx;
    .ellipsis(2);
    line-height: 48rpx;
    .size();
    padding: 0 16rpx;
  }

  .header_money {
    padding: 0 16rpx;
    font-weight: 700;
    .ver();
    margin-top: 2px;
    .size(32rpx);
    color: var(--red);
    line-height: 56rpx;
    &.down_money {
      .size(24rpx);
    }

    ._money {
      /deep/ .decimal {
        .size(24rpx);
      }
    }
  }

  .delete {
    position: absolute;
    top: 36rpx;
    right: 24rpx;
    background-color: var(--light);
    width: 50rpx;
    height: 50rpx;
    border-radius: 10rpx;
    .flex_center();

    .icon-delete {
      color: var(--text-01);
      font-size: 36rpx;
    }
  }
}

.footer_btn {
  .ver();
  column-gap: 24rpx;

  .btn {
    flex: 1;
    border-radius: 16rpx;
    height: 38px;
    padding: 16rpx 30rpx;
    .flex_center();
    border: 1px solid var(--black);
    font-size: calc(28rpx);
    color: var(--black);
  }

  .del_btn {
    background-color: var(--black);
    color: var(--light);
  }
}
</style>