forked from natuka/web.puabadge.com
链接失效,下单
This commit is contained in:
1 parent
6a7cf593cb
commit
e7435aa858
5 files changed
+72
-26
No files matched your search
@@ -35,10 +35,11 @@ const errorHandler = (error: RequestError): Promise<any> => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
// 401 未登录/未授权
|
// 401 未登录/未授权
|
||||||
if (status === 401 && data.result && data.result.isLogin) {
|
if (status === 401) {
|
||||||
showNotify({
|
showNotify({
|
||||||
type: 'danger',
|
type: 'danger',
|
||||||
message: 'Authorization verification failed',
|
message: (data && data.message) || '链接已失效,请联系平台客服',
|
||||||
|
duration: 0
|
||||||
})
|
})
|
||||||
// 如果你需要直接跳转登录页面
|
// 如果你需要直接跳转登录页面
|
||||||
// location.replace(loginRoutePath)
|
// location.replace(loginRoutePath)
|
||||||
|
|||||||
@@ -139,6 +139,11 @@ const getPid = async () => {
|
|||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
isLoading.value = false
|
isLoading.value = false
|
||||||
|
closeToast()
|
||||||
|
showToast({
|
||||||
|
message: '链接已失效,请联系平台客服',
|
||||||
|
duration: 2000,
|
||||||
|
})
|
||||||
console.log(err)
|
console.log(err)
|
||||||
} finally {
|
} finally {
|
||||||
isLoading.value = false
|
isLoading.value = false
|
||||||
@@ -294,7 +299,7 @@ onMounted(() => {
|
|||||||
{{ item.size }}
|
{{ item.size }}
|
||||||
</div>
|
</div>
|
||||||
<div class="size-count">
|
<div class="size-count">
|
||||||
(剩余兑换:{{ item.count }})
|
(剩余兑换:{{ item.remaining }})
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="size-item">
|
<!-- <div class="size-item">
|
||||||
@@ -313,7 +318,7 @@ onMounted(() => {
|
|||||||
设计图集
|
设计图集
|
||||||
</div>
|
</div>
|
||||||
<div class="badge-count">
|
<div class="badge-count">
|
||||||
{{ orderStat.create_count }}张
|
{{ orderStat.create_count || 0 }}张
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="badge-item" @click="goToMyOrder">
|
<div class="badge-item" @click="goToMyOrder">
|
||||||
@@ -321,7 +326,7 @@ onMounted(() => {
|
|||||||
我的订单
|
我的订单
|
||||||
</div>
|
</div>
|
||||||
<div class="badge-count">
|
<div class="badge-count">
|
||||||
{{ orderStat.order_count }}笔
|
{{ orderStat.order_count || 0 }}笔
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -452,7 +457,7 @@ onMounted(() => {
|
|||||||
<div class="design-action-bar">
|
<div class="design-action-bar">
|
||||||
<div class="design-left">
|
<div class="design-left">
|
||||||
<img class="design-leaf-icon" width="18" height="18" src="@/assets/badge/leaf.png" alt="">
|
<img class="design-leaf-icon" width="18" height="18" src="@/assets/badge/leaf.png" alt="">
|
||||||
<span class="design-remaining">剩余{{ orderStat.remain_count }}次</span>
|
<span class="design-remaining">剩余{{ orderStat.remain_count || 0 }}次</span>
|
||||||
</div>
|
</div>
|
||||||
<button class="design-btn" @click="goToPreview">
|
<button class="design-btn" @click="goToPreview">
|
||||||
<span>开始设计</span>
|
<span>开始设计</span>
|
||||||
|
|||||||
+26
-12
@@ -3,12 +3,15 @@
|
|||||||
<div class="header" @click="goBack">
|
<div class="header" @click="goBack">
|
||||||
<span class="back-icon"><van-icon name="arrow-left" size="16px" color="#333" /> 我的订单</span>
|
<span class="back-icon"><van-icon name="arrow-left" size="16px" color="#333" /> 我的订单</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="order-list">
|
<div class="order-list" v-if="orders.length > 0">
|
||||||
<div class="order-item" @click="OrderDetail(item.id)" v-for="item in orders" :key="item.id">
|
<div class="order-item" @click="OrderDetail(item.id)" v-for="item in orders" :key="item.id">
|
||||||
<img class="order-img" :src="item.path" alt="order1" />
|
<img class="order-img" :src="item.path" alt="order1" />
|
||||||
<span class="order-status status-processing">{{ getStatus(item.status) }}</span>
|
<span class="order-status status-finished">{{ getStatus(item.status) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-else class="record-image-item-null">
|
||||||
|
<img src="@/assets/badge/null-data.png" alt="暂无数据">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@@ -31,11 +34,11 @@ function getOrder() {
|
|||||||
status: 0,
|
status: 0,
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
if(page.value === 1) {
|
if(page.value === 1) {
|
||||||
orders.value = res.data.list
|
orders.value = res.list
|
||||||
} else {
|
} else {
|
||||||
orders.value.push(...res.data.list)
|
orders.value.push(...res.list)
|
||||||
}
|
}
|
||||||
if(res.data.list.length < 10) {
|
if(res.list.length < 10) {
|
||||||
finished.value = true
|
finished.value = true
|
||||||
} else {
|
} else {
|
||||||
page.value++
|
page.value++
|
||||||
@@ -87,20 +90,20 @@ function getStatus(status: number) {
|
|||||||
}
|
}
|
||||||
.order-list {
|
.order-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
justify-content: space-between;
|
|
||||||
padding: 24px 16px;
|
padding: 24px 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.order-item {
|
.order-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 43vw;
|
width: calc(50% - 4px);
|
||||||
height: 43vw;
|
height: 43vw;
|
||||||
/* border-radius: 50%; */
|
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.order-img {
|
.order-img {
|
||||||
@@ -112,11 +115,11 @@ function getStatus(status: number) {
|
|||||||
|
|
||||||
.order-status {
|
.order-status {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 10px;
|
bottom: 5px;
|
||||||
right: 10px;
|
right: 5px;
|
||||||
padding: 2px 14px;
|
padding: 2px 12px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
font-size: 14px;
|
font-size: 12px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: #bdbdbd;
|
background: #bdbdbd;
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
@@ -130,4 +133,15 @@ function getStatus(status: number) {
|
|||||||
.status-finished {
|
.status-finished {
|
||||||
background: #8bc34a;
|
background: #8bc34a;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.record-image-item-null {
|
||||||
|
height: 50vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.record-image-item-null img {
|
||||||
|
width: 80vw;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -36,7 +36,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="info-section">
|
<div class="info-section">
|
||||||
<div class="info-item">
|
<div class="info-item">
|
||||||
<div class="info-title">芯比风格</div>
|
<div class="info-title">{{ compareList.kind_name }}</div>
|
||||||
<div class="info-content">风格</div>
|
<div class="info-content">风格</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-item">
|
<div class="info-item">
|
||||||
@@ -59,9 +59,9 @@
|
|||||||
<div class="order-title">订购数量</div>
|
<div class="order-title">订购数量</div>
|
||||||
<div class="order-item" v-for="item in sizeList" :key="item.id">
|
<div class="order-item" v-for="item in sizeList" :key="item.id">
|
||||||
<span class="order-size">{{ item.size }}</span>
|
<span class="order-size">{{ item.size }}</span>
|
||||||
<span class="order-free">(剩余兑换:{{ item.count }})</span>
|
<span class="order-free">(剩余兑换:{{ item.remaining }})</span>
|
||||||
<div class="order-ctrl">
|
<div class="order-ctrl">
|
||||||
<van-stepper v-model="value" :min="0" :max="item.count" @change="changeValue" />
|
<van-stepper v-model="item.count" :min="0" :max="item.remaining" @change="changeValue" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="order-item">
|
<!-- <div class="order-item">
|
||||||
@@ -72,6 +72,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
|
<div style="height: 110px;"></div>
|
||||||
<div class="confirm-box">
|
<div class="confirm-box">
|
||||||
<div class="action-section">
|
<div class="action-section">
|
||||||
<button @click="reload" :disabled="flag < 2" class="action-btn"><img class="action-img" src="@/assets/badge/reload.png" alt=""> 再次生成</button>
|
<button @click="reload" :disabled="flag < 2" class="action-btn"><img class="action-img" src="@/assets/badge/reload.png" alt=""> 再次生成</button>
|
||||||
@@ -162,7 +163,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, ref } from 'vue';
|
import { onMounted, ref } from 'vue';
|
||||||
import { useRoutimporter } from 'vue-router';
|
import { useRoutimporter } from 'vue-router';
|
||||||
import { showSuccessToast } from 'vant';
|
import { showSuccessToast, showToast, showNotify } from 'vant';
|
||||||
import * as badgeApi from '@/api/badge'
|
import * as badgeApi from '@/api/badge'
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const value = ref(0);
|
const value = ref(0);
|
||||||
@@ -172,7 +173,7 @@ const showBgCompare = ref(false)
|
|||||||
const currentIndex = ref(0)
|
const currentIndex = ref(0)
|
||||||
const imageList = ref([])
|
const imageList = ref([])
|
||||||
function compare() {
|
function compare() {
|
||||||
if (extend_value == -1) {
|
if (extend_value.value == -1) {
|
||||||
showCompare.value = true
|
showCompare.value = true
|
||||||
} else {
|
} else {
|
||||||
showBgCompare.value = true
|
showBgCompare.value = true
|
||||||
@@ -211,6 +212,10 @@ function sureReload() {
|
|||||||
}).catch((err) => {
|
}).catch((err) => {
|
||||||
console.log('putModeling', err)
|
console.log('putModeling', err)
|
||||||
showReload.value = false
|
showReload.value = false
|
||||||
|
showToast({
|
||||||
|
message: '链接已失效,请联系平台客服',
|
||||||
|
duration: 2000,
|
||||||
|
})
|
||||||
}).finally(() => {
|
}).finally(() => {
|
||||||
showReload.value = false
|
showReload.value = false
|
||||||
})
|
})
|
||||||
@@ -284,13 +289,17 @@ const getSizeList = () => {
|
|||||||
|
|
||||||
const payAmount = ref(0)
|
const payAmount = ref(0)
|
||||||
const changeValue = (value: number) => {
|
const changeValue = (value: number) => {
|
||||||
console.log(value)
|
console.log(value)
|
||||||
payAmount.value = value
|
payAmount.value = value
|
||||||
}
|
}
|
||||||
|
|
||||||
const key = ref(0)
|
const key = ref(0)
|
||||||
const confirm = () => {
|
const confirm = () => {
|
||||||
console.log('confirm')
|
console.log('confirm')
|
||||||
|
if (payAmount.value <= 0) {
|
||||||
|
showToast('请先选择下单数量')
|
||||||
|
return
|
||||||
|
}
|
||||||
const parms = {
|
const parms = {
|
||||||
pid: pid.value,
|
pid: pid.value,
|
||||||
key: key.value,
|
key: key.value,
|
||||||
@@ -308,6 +317,10 @@ const confirm = () => {
|
|||||||
})
|
})
|
||||||
}).catch((err) => {
|
}).catch((err) => {
|
||||||
console.log('creatOrder', err)
|
console.log('creatOrder', err)
|
||||||
|
showToast({
|
||||||
|
message: '链接已失效,请联系平台客服',
|
||||||
|
duration: 2000,
|
||||||
|
})
|
||||||
}).finally((err) => {
|
}).finally((err) => {
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -5,17 +5,20 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="record-container">
|
<div class="record-container">
|
||||||
<div class="record-note">注:可点击效果图进行下单打印</div>
|
<div class="record-note">注:可点击效果图进行下单打印</div>
|
||||||
<div class="record-images">
|
<div class="record-images" v-if="images.length > 0">
|
||||||
<div class="record-image-item" v-for="item in images" :key="item.id">
|
<div class="record-image-item" v-for="item in images" :key="item.id">
|
||||||
<block v-if="item.status == 1" @click="goPreview(item)">
|
<block v-if="item.status == 1" @click="goPreview(item)">
|
||||||
<img :src="item.path" :alt="item.name" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
|
<img :src="item.path" :alt="item.name" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
|
||||||
<div class="record-image-item-shadow"></div>
|
<div class="record-image-item-shadow"></div>
|
||||||
</block>
|
</block>
|
||||||
<div v-else class="record-image-item-loading" stop-click>
|
<div v-else class="record-image-item-loading">
|
||||||
设计失败
|
设计失败
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-else class="record-image-item-null">
|
||||||
|
<img src="@/assets/badge/null-data.png" alt="暂无数据">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -142,4 +145,14 @@ function goBack() {
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
|
.record-image-item-null {
|
||||||
|
height: 50vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.record-image-item-null img {
|
||||||
|
width: 80vw;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in new issue
Block a user