parent
04405ddb28
commit
f6a19f95b7
@ -1,2 +1,3 @@
|
|||||||
pos
|
pos
|
||||||
data
|
data
|
||||||
|
fds
|
||||||
|
|||||||
@ -1,474 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- Main Start -->
|
|
||||||
<van-tabs v-model:active="active">
|
|
||||||
<van-tab title="商品"></van-tab>
|
|
||||||
<van-tab title="詳情"></van-tab>
|
|
||||||
<!-- <van-tab title="評價"></van-tab> -->
|
|
||||||
</van-tabs>
|
|
||||||
<main class="main-wrap product-page mb-xxl" v-if="active === 0">
|
|
||||||
<!-- Banner Section Start -->
|
|
||||||
<div class="banner-box product-banner">
|
|
||||||
<van-swipe>
|
|
||||||
<van-swipe-item v-for="images in goods.goods_gallery" :index="images.img_id">
|
|
||||||
<img class="banner_img" :src="images.img_url" />
|
|
||||||
</van-swipe-item>
|
|
||||||
<template #indicator="{ active, total }">
|
|
||||||
<div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
|
|
||||||
</template>
|
|
||||||
</van-swipe>
|
|
||||||
</div>
|
|
||||||
<!-- Banner Section End -->
|
|
||||||
|
|
||||||
<!-- Product Section Section Start -->
|
|
||||||
<section class="product-section">
|
|
||||||
<div class="name">
|
|
||||||
<div class="font-md">
|
|
||||||
{{ goods.goods_name }}
|
|
||||||
</div>
|
|
||||||
<div class="share">
|
|
||||||
<van-popover placement="left-start" @open="handleOpenPoppver" v-model:show="showPopover">
|
|
||||||
<van-grid square clickable :border="false" column-num="4" style="width: 300px">
|
|
||||||
<van-grid-item @click="handleClickPoppver('qrcode')">
|
|
||||||
<div class="share-icon">
|
|
||||||
<div>
|
|
||||||
<img src="@/assets/icons/png/qrcode.png" />
|
|
||||||
</div>
|
|
||||||
<div>QRCoce</div>
|
|
||||||
</div>
|
|
||||||
</van-grid-item>
|
|
||||||
<van-grid-item @click="handleClickPoppver('link')">
|
|
||||||
<div class="share-icon">
|
|
||||||
<div>
|
|
||||||
<img src="@/assets/icons/png/link.png" />
|
|
||||||
</div>
|
|
||||||
<div>分享連結</div>
|
|
||||||
</div>
|
|
||||||
</van-grid-item>
|
|
||||||
<van-grid-item @click="handleClickPoppver('line')">
|
|
||||||
<div class="share-icon">
|
|
||||||
<div>
|
|
||||||
<img src="@/assets/icons/png/line.png" />
|
|
||||||
</div>
|
|
||||||
<div>Line</div>
|
|
||||||
</div>
|
|
||||||
</van-grid-item>
|
|
||||||
<van-grid-item text="QRCoce" @click="handleClickPoppver('fb')">
|
|
||||||
<div class="share-icon">
|
|
||||||
<div>
|
|
||||||
<img src="@/assets/icons/png/Facebook.png" />
|
|
||||||
</div>
|
|
||||||
<div>FB</div>
|
|
||||||
</div>
|
|
||||||
</van-grid-item>
|
|
||||||
</van-grid>
|
|
||||||
<template #reference>
|
|
||||||
<i class="icon-share"></i>
|
|
||||||
</template>
|
|
||||||
</van-popover>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="rating">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
class="feather feather-star"
|
|
||||||
>
|
|
||||||
<polygon
|
|
||||||
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
|
|
||||||
></polygon>
|
|
||||||
</svg>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
class="feather feather-star"
|
|
||||||
>
|
|
||||||
<polygon
|
|
||||||
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
|
|
||||||
></polygon>
|
|
||||||
</svg>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
class="feather feather-star"
|
|
||||||
>
|
|
||||||
<polygon
|
|
||||||
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
|
|
||||||
></polygon>
|
|
||||||
</svg>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
class="feather feather-star"
|
|
||||||
>
|
|
||||||
<polygon
|
|
||||||
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
|
|
||||||
></polygon>
|
|
||||||
</svg>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
class="feather feather-star"
|
|
||||||
>
|
|
||||||
<polygon
|
|
||||||
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
|
|
||||||
></polygon>
|
|
||||||
</svg>
|
|
||||||
<span class="font-xs content-color">({{goods.click_count}}次點擊)</span>
|
|
||||||
</div>
|
|
||||||
<div class="price">
|
|
||||||
<span>${{ goods.shop_price }}</span>
|
|
||||||
<del>${{ goods.market_price }}</del>
|
|
||||||
<span>{{ discount }}折</span>
|
|
||||||
</div>
|
|
||||||
<div class="brief">
|
|
||||||
{{ goods.goods_brief }}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Card Data-->
|
|
||||||
<card-data v-model="cardData" />
|
|
||||||
<div style="margin: 16px">
|
|
||||||
<van-button round block type="primary" @click="addToCart(1, 1)"> 立即購買 </van-button>
|
|
||||||
</div>
|
|
||||||
<!-- Product Section Section End -->
|
|
||||||
|
|
||||||
<!-- Product Review Section Start -->
|
|
||||||
<!-- <section class="product-review pb-0">
|
|
||||||
<div class="top-content">
|
|
||||||
<h3 class="title-color">用户評論(15)</h3>
|
|
||||||
<a href="javascript:void(0)" data-bs-toggle="offcanvas" data-bs-target="#all-review" class="font-xs">See
|
|
||||||
all</a>
|
|
||||||
</div>
|
|
||||||
<div class="review-wrap">
|
|
||||||
<div class="review-box">
|
|
||||||
<div class="media">
|
|
||||||
<img src="@/assets/images/avatar/avatar.jpg" alt="avatar" />
|
|
||||||
<div class="media-body">
|
|
||||||
<h4 class="font-sm title-color">Andrea Joanne</h4>
|
|
||||||
<div class="rating">
|
|
||||||
<i data-feather="star"></i>
|
|
||||||
<i data-feather="star"></i>
|
|
||||||
<i data-feather="star"></i>
|
|
||||||
<i data-feather="star"></i>
|
|
||||||
<i data-feather="star"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="font-sm content-color">It's a really cute skirt! I didn't expect to feel so good in a
|
|
||||||
polyester material. The print is slightly</p>
|
|
||||||
</div>
|
|
||||||
<div class="review-box">
|
|
||||||
<div class="media">
|
|
||||||
<img src="@/assets/images/avatar/avatar.jpg" alt="avatar" />
|
|
||||||
<div class="media-body">
|
|
||||||
<h4 class="font-sm title-color">Andrea Joanne</h4>
|
|
||||||
<div class="rating">
|
|
||||||
<i data-feather="star"></i>
|
|
||||||
<i data-feather="star"></i>
|
|
||||||
<i data-feather="star"></i>
|
|
||||||
<i data-feather="star"></i>
|
|
||||||
<i data-feather="star"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="font-sm content-color">It's a really cute skirt! I didn't expect to feel so good in a
|
|
||||||
polyester material. The print is slightly</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section> -->
|
|
||||||
<!-- Product Review Section End -->
|
|
||||||
|
|
||||||
<section class="check-delivery-section">
|
|
||||||
<div class="service-section">
|
|
||||||
<ul>
|
|
||||||
<li class="font-sm content-color">
|
|
||||||
<img src="@/assets/icons/svg/delivery.svg" class="img-fluid" alt="" />
|
|
||||||
NFC感應卡片將在三個工作天寄至您的收件地址
|
|
||||||
</li>
|
|
||||||
<!-- <li class="font-sm content-color"><img src="@/assets/icons/svg/payment.svg" class="img-fluid"
|
|
||||||
alt="" />
|
|
||||||
Cash On delivery Available
|
|
||||||
</li>
|
|
||||||
<li class="font-sm content-color"><img src="@/assets/icons/svg/refund.svg" class="img-fluid"
|
|
||||||
alt="" />
|
|
||||||
Easy 21 days returns and exchanges
|
|
||||||
</li> -->
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
<!-- Main End -->
|
|
||||||
<!-- Main Start -->
|
|
||||||
<main class="main-wrap detail-page mb-xxl" v-if="active == 1">
|
|
||||||
<section class="detail-section" v-html="goods.goods_desc"></section>
|
|
||||||
</main>
|
|
||||||
<!-- Main End -->
|
|
||||||
<!-- 分享二維碼 Start -->
|
|
||||||
<van-dialog
|
|
||||||
v-model:show="showShareQrcode"
|
|
||||||
title="分享二維碼"
|
|
||||||
:show-cancel-button="true"
|
|
||||||
cancel-button-text="關閉"
|
|
||||||
:show-confirm-button="false"
|
|
||||||
>
|
|
||||||
<div class="qrcode-block">
|
|
||||||
<qrcode-vue :value="`https://shop.slash1000.com/m/card?refer=${refer_code}`" size="200" level="M" />
|
|
||||||
</div>
|
|
||||||
</van-dialog>
|
|
||||||
<!-- Main End -->
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import Cookies from "js-cookie";
|
|
||||||
import QrcodeVue from "qrcode.vue";
|
|
||||||
import { toClipboard } from '@soerenmartius/vue3-clipboard'
|
|
||||||
|
|
||||||
import { ref, onMounted, watch, computed } from "vue";
|
|
||||||
import { getGoods } from "@/services/goods";
|
|
||||||
import { useRoute, useRouter } from "vue-router";
|
|
||||||
|
|
||||||
import { useCartStore } from "@/store/Cart.js";
|
|
||||||
import { useUserStore } from "@/store/User.js";
|
|
||||||
import { storeToRefs } from "pinia";
|
|
||||||
|
|
||||||
import { showToast } from "vant";
|
|
||||||
import "vant/es/toast/style";
|
|
||||||
|
|
||||||
import { addCart } from "@/services/cart";
|
|
||||||
|
|
||||||
import CardData from "./compoments/CardData.vue";
|
|
||||||
|
|
||||||
const route = useRoute();
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const cartStore = useCartStore();
|
|
||||||
const userStore = useUserStore();
|
|
||||||
|
|
||||||
const active = ref(0);
|
|
||||||
const goods = ref({});
|
|
||||||
|
|
||||||
const cardData = ref({
|
|
||||||
cname: "",
|
|
||||||
ename: "",
|
|
||||||
image: "",
|
|
||||||
user_id: Cookies.get("uid") || "",
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
|
|
||||||
let res = await getGoods(1);
|
|
||||||
|
|
||||||
if (res.code === 200) {
|
|
||||||
goods.value = res.data;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const discount = computed(() => {
|
|
||||||
return Math.ceil((goods.value.shop_price / goods.value.market_price) * 10);
|
|
||||||
});
|
|
||||||
|
|
||||||
const addToCart = async (id, type) => {
|
|
||||||
//上傳商品至購物車
|
|
||||||
let goods = {
|
|
||||||
quick: 1,
|
|
||||||
spec: "",
|
|
||||||
goods_id: id,
|
|
||||||
number: 1,
|
|
||||||
parent: 0,
|
|
||||||
cardInfo: cardData.value,
|
|
||||||
};
|
|
||||||
|
|
||||||
let res = await cartStore.addCart(goods);
|
|
||||||
|
|
||||||
if (!res) {
|
|
||||||
return showToast("添加失敗！");
|
|
||||||
}
|
|
||||||
|
|
||||||
if (type === 0) {
|
|
||||||
showToast("添加成功！");
|
|
||||||
} else {
|
|
||||||
//判斷是否有登入
|
|
||||||
if (Cookies.get("uid")) {
|
|
||||||
return router.push("/checkout");
|
|
||||||
}
|
|
||||||
return router.push({
|
|
||||||
path: "/login",
|
|
||||||
query: {
|
|
||||||
redirect: "/checkout",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return;
|
|
||||||
};
|
|
||||||
|
|
||||||
const goCheckout = async () => {
|
|
||||||
//上傳商品至購物車
|
|
||||||
let goods = {
|
|
||||||
quick: 1,
|
|
||||||
spec: "",
|
|
||||||
goods_id: 1,
|
|
||||||
number: 1,
|
|
||||||
parent: 0,
|
|
||||||
cardInfo: form.value,
|
|
||||||
};
|
|
||||||
let res = await addCart(goods);
|
|
||||||
if (res.code === 200) {
|
|
||||||
//判斷是否有登入
|
|
||||||
if (Cookies.get("uid")) {
|
|
||||||
return router.push("/checkout");
|
|
||||||
}
|
|
||||||
return router.push("/login");
|
|
||||||
}
|
|
||||||
alert("操作錯誤，請重新操作");
|
|
||||||
return;
|
|
||||||
};
|
|
||||||
|
|
||||||
//分享連結
|
|
||||||
const showPopover = ref(false);
|
|
||||||
const showShareQrcode = ref(false);
|
|
||||||
|
|
||||||
const refer_code = computed(() => {
|
|
||||||
if (!Cookies.get("uid")) {
|
|
||||||
return "";
|
|
||||||
}
|
|
||||||
return userStore.info.refer_code;
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleOpenPoppver = () => {
|
|
||||||
//判斷是否有登入
|
|
||||||
if (!Cookies.get("uid")) {
|
|
||||||
return showToast("注意！正式會員分享才能獲得獎勵喔，如果您已是正式會員，請先登入！");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClickPoppver = (type) => {
|
|
||||||
const share_url = "https://shop.slash1000.com/m/card?refer=" + refer_code.value;
|
|
||||||
switch (type) {
|
|
||||||
case "qrcode":
|
|
||||||
showShareQrcode.value = true;
|
|
||||||
break;
|
|
||||||
case "link":
|
|
||||||
toClipboard(share_url);
|
|
||||||
showToast("已放入剪貼簿");
|
|
||||||
break;
|
|
||||||
case "line":
|
|
||||||
window.location.href = "https://social-plugins.line.me/lineit/share?url=" + encodeURI(share_url);
|
|
||||||
break;
|
|
||||||
case "fb":
|
|
||||||
window.open("https://www.facebook.com/share.php?u=" + encodeURI(share_url), "_blank");
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
showPopover.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
const onSelect = (action) => Toast(action.text);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.van-swipe-item {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 200px;
|
|
||||||
text-align: center;
|
|
||||||
background-color: #39a9ed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-indicator {
|
|
||||||
position: absolute;
|
|
||||||
right: 5px;
|
|
||||||
bottom: 5px;
|
|
||||||
padding: 2px 5px;
|
|
||||||
font-size: 12px;
|
|
||||||
background: rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner_img {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-section {
|
|
||||||
.name {
|
|
||||||
font-weight: 700;
|
|
||||||
color: #222;
|
|
||||||
line-height: 20px;
|
|
||||||
height: 80px;
|
|
||||||
// margin-top: -3px;
|
|
||||||
display: flex;
|
|
||||||
background-color: #f2f2f2;
|
|
||||||
padding: 15px;
|
|
||||||
margin-left: -15px;
|
|
||||||
margin-right: -15px;
|
|
||||||
|
|
||||||
.font-md {
|
|
||||||
flex: 1;
|
|
||||||
margin-right: 15px;
|
|
||||||
border-right: 1px #666 solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: 20px;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.brief {
|
|
||||||
margin: 10px 0;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-icon {
|
|
||||||
text-align: center;
|
|
||||||
div:nth-child(1) {
|
|
||||||
img {
|
|
||||||
width: 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// div:child-nth(2){
|
|
||||||
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
|
|
||||||
.qrcode-block {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,274 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<ul class="nav nav-pills">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" :class="{ active: !showCardType }" href="javascript:void(0)"
|
|
||||||
@click="showCardType = 0">正面</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" :class="{ active: showCardType }" href="javascript:void(0)"
|
|
||||||
@click="showCardType = 1">反面</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<div class="card-preview">
|
|
||||||
<div class="front" v-show="showCardType === 0">
|
|
||||||
<!-- <img class="front-bg" src="@/assets/images/card/front.png"> -->
|
|
||||||
<div class="front-cname">{{ form.cname }}</div>
|
|
||||||
<div class="front-ename">{{ form.ename }}</div>
|
|
||||||
<img class="front-logo" :src="form.image || defaultLogo">
|
|
||||||
</div>
|
|
||||||
<div class="back" v-show="showCardType === 1">
|
|
||||||
<img src="@/assets/images/card/qrcode.png">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<van-cell-group inset>
|
|
||||||
<van-field v-model="form.cname" type="text" placeholder="任何您想寫的文字" label="中文姓名" />
|
|
||||||
<van-field v-model="form.ename" type="text" placeholder="任何您想寫的文字" label="英文姓名" />
|
|
||||||
</van-cell-group>
|
|
||||||
<div style="margin: 16px 32px;">
|
|
||||||
圖片<br />
|
|
||||||
<van-uploader :after-read="afterRead" @delete="handleDelete" accept="image/*" name="logo" class="img-uploader"
|
|
||||||
:max-count="1" v-model="fileList" />
|
|
||||||
<!-- <div class="upload-main">
|
|
||||||
<img class="upload-img" :src="form.avatar" alt="">
|
|
||||||
<p>上傳圖片</p>
|
|
||||||
</div> -->
|
|
||||||
<!-- </van-uploader> -->
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- crop : Start -->
|
|
||||||
<van-overlay :show="crop.show" @click="crop.show = false" />
|
|
||||||
<div class="cropper-section" v-if="crop.show">
|
|
||||||
<div class="crop-area">
|
|
||||||
<cropper class="cropper" ref="myCrop" :src="crop.img" :stencil-props="{
|
|
||||||
aspectRatio: 10 / 10,
|
|
||||||
}" :auto-zoom="true" />
|
|
||||||
</div>
|
|
||||||
<div class="crop-btn">
|
|
||||||
<van-button type="primary" size="small" plain @click="onClose">取消</van-button>
|
|
||||||
<van-button type="success" size="small" plain @click="onCrop">剪裁</van-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- crop : End -->
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
|
|
||||||
import { ref, computed } from 'vue'
|
|
||||||
|
|
||||||
import { Cropper } from 'vue-advanced-cropper';
|
|
||||||
import 'vue-advanced-cropper/dist/style.css';
|
|
||||||
|
|
||||||
import { uploadFile } from '@/services/card'
|
|
||||||
|
|
||||||
import defaultLogo from '@/assets/images/logo/logo.png'
|
|
||||||
|
|
||||||
const showCardType = ref(0)
|
|
||||||
|
|
||||||
const fileList = ref([])
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: {
|
|
||||||
type: Object,
|
|
||||||
default: ()=>({})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits(['update:modelValue'])
|
|
||||||
|
|
||||||
const form = computed({
|
|
||||||
get() {
|
|
||||||
return props.modelValue
|
|
||||||
},
|
|
||||||
set(v) {
|
|
||||||
console.log('set', v)
|
|
||||||
emit('update:modelValue', v)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const afterRead = async (file) => {
|
|
||||||
|
|
||||||
crop.value.show = true
|
|
||||||
crop.value.img = file.content
|
|
||||||
return
|
|
||||||
|
|
||||||
let imgFile = new FormData()
|
|
||||||
imgFile.append("fileType", 'IMAGE');
|
|
||||||
imgFile.append("file", file.file);
|
|
||||||
|
|
||||||
file.status = 'uploading'
|
|
||||||
file.message = '上傳中...'
|
|
||||||
|
|
||||||
try {
|
|
||||||
let res = await uploadFile(imgFile)
|
|
||||||
|
|
||||||
if (res && res.code === 200) {
|
|
||||||
form.value.image = res.data
|
|
||||||
file.status = 'done';
|
|
||||||
file.message = '上傳完成';
|
|
||||||
} else {
|
|
||||||
file.status = 'failed';
|
|
||||||
file.message = '上傳失敗';
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
file.status = 'failed'
|
|
||||||
file.message = '上傳失敗'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// crop
|
|
||||||
|
|
||||||
const myCrop = ref(null);
|
|
||||||
|
|
||||||
const crop = ref({
|
|
||||||
show: false,
|
|
||||||
img: null,
|
|
||||||
outputType: "jpeg",
|
|
||||||
autoCrop: true,
|
|
||||||
autoCropWidth: 200,
|
|
||||||
autoCropHeight: 200,
|
|
||||||
});
|
|
||||||
|
|
||||||
const onCrop = () => {
|
|
||||||
const { canvas } = myCrop.value.getResult();
|
|
||||||
|
|
||||||
if (canvas) {
|
|
||||||
const imgFile = new FormData();
|
|
||||||
canvas.toBlob(async (blob) => {
|
|
||||||
let ufile = new File([blob], "image.jpg");
|
|
||||||
imgFile.append("fileType", "IMAGE");
|
|
||||||
imgFile.append("file", ufile);
|
|
||||||
|
|
||||||
crop.value.show = false;
|
|
||||||
|
|
||||||
// Toast.loading({
|
|
||||||
// duration: 0,
|
|
||||||
// message: "圖片上傳中...",
|
|
||||||
// forbidClick: true,
|
|
||||||
// });
|
|
||||||
fileList.value[0] = {
|
|
||||||
status: 'uploading',
|
|
||||||
message: '上傳中...'
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
let res = await uploadFile(imgFile)
|
|
||||||
|
|
||||||
if (res && res.code === 200) {
|
|
||||||
form.value.image = res.data
|
|
||||||
fileList.value[0] = {
|
|
||||||
url: res.data,
|
|
||||||
status: 'done',
|
|
||||||
message: '上傳成功'
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
fileList.value[0] = {
|
|
||||||
status: 'failed',
|
|
||||||
message: '上傳失敗'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
fileList.value[0] = {
|
|
||||||
status: 'failed',
|
|
||||||
message: '上傳失敗'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, "image/jpeg");
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
};
|
|
||||||
|
|
||||||
const onClose = () => {
|
|
||||||
fileList.value = []
|
|
||||||
crop.value.show = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDelete = (file) => {
|
|
||||||
console.log('delete')
|
|
||||||
console.log('file', file)
|
|
||||||
form.value.image = ''
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.card-preview {
|
|
||||||
// height: 50%;
|
|
||||||
width: 345px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
|
|
||||||
.front {
|
|
||||||
width: 345px;
|
|
||||||
height: 220px;
|
|
||||||
position: relative;
|
|
||||||
background-image: url(@/assets/images/card/front.png);
|
|
||||||
background-size: 345px 220px;
|
|
||||||
|
|
||||||
.front-logo {
|
|
||||||
position: relative;
|
|
||||||
width: 100px;
|
|
||||||
top: 50px;
|
|
||||||
left: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.front-cname {
|
|
||||||
position: absolute;
|
|
||||||
top: 70px;
|
|
||||||
left: 180px;
|
|
||||||
font-size: 20px;
|
|
||||||
letter-spacing: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.front-ename {
|
|
||||||
position: absolute;
|
|
||||||
top: 110px;
|
|
||||||
left: 180px;
|
|
||||||
font-size: 12px;
|
|
||||||
letter-spacing: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.back {
|
|
||||||
width: 345px;
|
|
||||||
height: 220px;
|
|
||||||
position: relative;
|
|
||||||
background-image: url(@/assets/images/card/back.png);
|
|
||||||
background-size: 345px 220px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.cropper-section {
|
|
||||||
margin: 0 auto;
|
|
||||||
position: fixed;
|
|
||||||
text-align: center;
|
|
||||||
top: 50px;
|
|
||||||
// left: 0;
|
|
||||||
height: 350px;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 500px;
|
|
||||||
background: #ddd;
|
|
||||||
z-index: 8888;
|
|
||||||
|
|
||||||
.crop-area {
|
|
||||||
margin: 5 auto;
|
|
||||||
width: 100%;
|
|
||||||
height: 330px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.crop-btn {
|
|
||||||
background-color: #666;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.cropper {
|
|
||||||
height: 300px;
|
|
||||||
// width: 300px;
|
|
||||||
background: #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,6 +1,8 @@
|
|||||||
<script>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<div>
|
||||||
取號
|
取號
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
</script>
|
||||||
Loading…
Reference in new issue