Browse Source

链接失效,下单

lzm_web
Linzm 8 months ago
parent
commit
e7435aa858
  1. 5
      src/utils/request.ts
  2. 13
      src/views/badge/index.vue
  3. 38
      src/views/badge/myOrder.vue
  4. 25
      src/views/badge/preview.vue
  5. 17
      src/views/badge/record.vue

5
src/utils/request.ts

@ -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)

13
src/views/badge/index.vue

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

38
src/views/badge/myOrder.vue

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

25
src/views/badge/preview.vue

@ -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) => {
}) })

17
src/views/badge/record.vue

@ -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>
Loading…
Cancel
Save