VAVABUY/pages/dashboard/components/shop_list.vue

<template>
  <view class="order_list" @click="listClick">
    <view class="shop_logo">
      <image
        :src="`../../static/shop/shop_${item.channel}.png`"
        class="img"
      ></image>
    </view>
    <view class="shop_title">{{ item.title }}</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 { SHOP_USER_COLLECT } from "@/api";
import { Toast } from "@/utils";
import Popup from "@/components/popup";
import { ref, nextTick } from "vue";

const popupRef = ref(null);

const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
});
const emit = defineEmits(["delete"]);

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

const deleteItem = () => {
  popupRef.value && popupRef.value.open();
};
const submit = () => {
  setCollect({
    channel: props.item.channel,
    type: "shop",
    shop_id: props.item.shop_id,
    seller_id: props.item.seller_id,
    title: props.item.title,
    price: props.item.price,
    pic_url: "",
  });
};

const setCollect = async (params) => {
  try {
    const res = await SHOP_USER_COLLECT(params);
    close();
    nextTick(() => {
      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 {
  border: var(--bor);
  padding: 24rpx;
  margin-top: 32rpx;
  border-radius: 16rpx;
  position: relative;
  .ver();

  .shop_logo {
    width: 200rpx;
    height: 200rpx;

    .img {
      width: inherit;
      height: inherit;
      display: block;
    }
  }

  .shop_title {
    flex: 1;
    color: var(--text);
    font-weight: 700;
    margin-left: 24rpx;
    margin-right: 40rpx;
    .size();
  }

  .delete {
    position: absolute;
    top: 36rpx;
    right: 24rpx;

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