|
|
|
@ -36,21 +36,22 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="shape-text" :style="shapeTextStyle" v-if="shapeText">{{shapeText}}</div> |
|
|
|
<div class="shape-text" :style="shapeTextStyle" v-if="shapeText">{{shapeText}}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="image-list-box" v-if="imageList.length > 1"> |
|
|
|
</div> |
|
|
|
<div class="image-list-item" v-for="item in imageList" :key="item.key"> |
|
|
|
<div class="image-list-box" v-if="imageList.length > 1"> |
|
|
|
<img v-if="item.status == 1" class="image-list-item-img" :class="{ imgActive: item.key == imgKey }" :src="item.origin_url" alt="" @click="changeImage(item)"> |
|
|
|
<div class="image-list-item" v-for="item in imageList" :key="item.key"> |
|
|
|
<div v-else-if="item.status == 0" class="image-list-item-loading"> |
|
|
|
<img v-if="item.status == 1" class="image-list-item-img" :class="{ imgActive: item.key == imgKey }" :src="item.origin_url" alt="" @click="changeImage(item)"> |
|
|
|
设计中 |
|
|
|
<div v-else-if="item.status == 0" class="image-list-item-loading"> |
|
|
|
</div> |
|
|
|
设计中 |
|
|
|
<div v-else-if="item.status == 2" class="image-list-item-loading"> |
|
|
|
</div> |
|
|
|
设计失败 |
|
|
|
<div v-else-if="item.status == 2" class="image-list-item-loading"> |
|
|
|
</div> |
|
|
|
设计失败 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="info-section"> |
|
|
|
<div class="info-section"> |
|
|
|
<div class="info-item"> |
|
|
|
<div class="info-item"> |
|
|
|
<div class="info-title">{{ prodId == 7 ? '人物立体徽章' : '宠物立体徽章' }}</div> |
|
|
|
<div class="info-title" v-if="orderStat.type_id == 1">{{ prodId == 7 ? '人物立体徽章' : '宠物立体徽章' }}</div> |
|
|
|
|
|
|
|
<div class="info-title" v-if="orderStat.type_id == 2">{{ prodId == 7 ? '人物浮雕相框' : '宠物浮雕相框' }}</div> |
|
|
|
<div class="info-content">产品类型</div> |
|
|
|
<div class="info-content">产品类型</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="info-item"> |
|
|
|
<div class="info-item"> |
|
|
|
@ -70,7 +71,7 @@ |
|
|
|
<block v-for="item in shapeList" :key="item.id"> |
|
|
|
<block v-for="item in shapeList" :key="item.id"> |
|
|
|
<div class="shape-item" @click="shapeChange(item)"> |
|
|
|
<div class="shape-item" @click="shapeChange(item)"> |
|
|
|
<div class="shape-item-list"> |
|
|
|
<div class="shape-item-list"> |
|
|
|
<img class="shape-item-image" :src="item.cover_path || imageUrl"/> |
|
|
|
<img class="shape-item-image" :class="{ 'shape-item-image-round': item.id == 1 || item.id == 2 }" :src="item.cover_path || imageUrl"/> |
|
|
|
<van-icon v-if="item.id == shapeId" class="shape-icon" color="#15CF5F" name="checked" size="18px" /> |
|
|
|
<van-icon v-if="item.id == shapeId" class="shape-icon" color="#15CF5F" name="checked" size="18px" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="shape-item-text">{{item.name}}</div> |
|
|
|
<div class="shape-item-text">{{item.name}}</div> |
|
|
|
@ -91,16 +92,38 @@ |
|
|
|
<div class="order-section" v-if="trialCode == false && imageUrl"> |
|
|
|
<div class="order-section" v-if="trialCode == false && imageUrl"> |
|
|
|
<div class="order-title">订购数量</div> |
|
|
|
<div class="order-title">订购数量</div> |
|
|
|
<block v-for="item in sizeList" :key="item.id"> |
|
|
|
<block v-for="item in sizeList" :key="item.id"> |
|
|
|
<div class="order-item" v-show="item.shape_id == shapeId"> |
|
|
|
<block v-if="orderStat.use_type == 1"> |
|
|
|
<span class="order-size">{{ item.size }}</span> |
|
|
|
<div class="order-item" v-show="item.shape_id == shapeId"> |
|
|
|
<span class="order-free">(剩余兑换:{{ item.remaining }})</span> |
|
|
|
<span class="order-size">{{ item.size }}</span> |
|
|
|
<div class="order-ctrl"> |
|
|
|
<span class="order-free">(剩余兑换:{{ item.remaining }})</span> |
|
|
|
<van-stepper v-model="item.count" :min="0" :max="item.remaining" @change="changeValue" /> |
|
|
|
<div class="order-ctrl"> |
|
|
|
|
|
|
|
<van-stepper v-model="item.count" :min="0" :max="item.remaining" @change="changeValue" /> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</block> |
|
|
|
|
|
|
|
<block v-if="orderStat.use_type == 2"> |
|
|
|
|
|
|
|
<div class="order-item"> |
|
|
|
|
|
|
|
<span class="order-size">{{ item.size }}</span> |
|
|
|
|
|
|
|
<span class="order-free">(剩余兑换:{{ item.remaining }})</span> |
|
|
|
|
|
|
|
<div class="order-ctrl"> |
|
|
|
|
|
|
|
<van-stepper v-model="item.count" :min="0" :max="item.remaining" @change="changeValue" /> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</block> |
|
|
|
</block> |
|
|
|
</block> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style="height: 110px;"></div> |
|
|
|
<div class="address-box" v-if="orderStat.use_type == 2 && imageUrl"> |
|
|
|
|
|
|
|
<div class="order-title" style="padding: 0 16px;">收货地址</div> |
|
|
|
|
|
|
|
<div class="address-item"> |
|
|
|
|
|
|
|
<van-address-edit |
|
|
|
|
|
|
|
:area-list="areaList" |
|
|
|
|
|
|
|
@change="nameTelChange" |
|
|
|
|
|
|
|
@change-area="changeArea" |
|
|
|
|
|
|
|
@change-detail="onChangeDetail" |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div style="height: 130px;"></div> |
|
|
|
<div class="confirm-box"> |
|
|
|
<div class="confirm-box"> |
|
|
|
<div class="action-section"> |
|
|
|
<div class="action-section"> |
|
|
|
<button v-if="trialCode == false" @click="sureReload" :disabled="flag < 1" class="action-btn"><img class="action-img" src="@/assets/badge/reload.png" alt=""> 再次生成</button> |
|
|
|
<button v-if="trialCode == false" @click="sureReload" :disabled="flag < 1" class="action-btn"><img class="action-img" src="@/assets/badge/reload.png" alt=""> 再次生成</button> |
|
|
|
@ -117,7 +140,7 @@ |
|
|
|
<div style="padding: 16px;"> |
|
|
|
<div style="padding: 16px;"> |
|
|
|
<div style="display: flex; align-items: center; justify-content: center; gap: 20px;"> |
|
|
|
<div style="display: flex; align-items: center; justify-content: center; gap: 20px;"> |
|
|
|
<div style="text-align: center;"> |
|
|
|
<div style="text-align: center;"> |
|
|
|
<img :src="compareList.origin_path" alt="原图" style="width: 120px; height: 120px; border-radius: 8px;"> |
|
|
|
<img :src="compareList.origin_path" alt="原图" style="max-width: 120px; max-height: 120px; border-radius: 8px;"> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style="font-size: 24px; color: #333;"> |
|
|
|
<div style="font-size: 24px; color: #333;"> |
|
|
|
<van-icon name="arrow" size="20px" /> |
|
|
|
<van-icon name="arrow" size="20px" /> |
|
|
|
@ -144,9 +167,10 @@ |
|
|
|
<script setup lang="ts"> |
|
|
|
<script setup lang="ts"> |
|
|
|
import { onMounted, ref, onUnmounted } from 'vue'; |
|
|
|
import { onMounted, ref, onUnmounted } from 'vue'; |
|
|
|
import { useRouter, useRoute } from 'vue-router'; |
|
|
|
import { useRouter, useRoute } from 'vue-router'; |
|
|
|
import { showSuccessToast, showToast, showNotify, showConfirmDialog } from 'vant'; |
|
|
|
import { showSuccessToast, showToast, showNotify, showConfirmDialog, AddressEdit, Area } from 'vant'; |
|
|
|
import { localStorage } from '@/utils/local-storage' |
|
|
|
import { localStorage } from '@/utils/local-storage' |
|
|
|
import * as badgeApi from '@/api/badge' |
|
|
|
import * as badgeApi from '@/api/badge' |
|
|
|
|
|
|
|
import { areaList } from '@/utils/area' |
|
|
|
const router = useRouter(); |
|
|
|
const router = useRouter(); |
|
|
|
const value = ref(0); |
|
|
|
const value = ref(0); |
|
|
|
const showReload = ref(false) |
|
|
|
const showReload = ref(false) |
|
|
|
@ -259,20 +283,59 @@ const getSizeList = () => { |
|
|
|
badgeApi.getOrderPrice({}).then((res: any) => { |
|
|
|
badgeApi.getOrderPrice({}).then((res: any) => { |
|
|
|
console.log('getSizeList', res); |
|
|
|
console.log('getSizeList', res); |
|
|
|
sizeList.value = res |
|
|
|
sizeList.value = res |
|
|
|
sizeList.value.forEach((item: any) => { |
|
|
|
if (orderStat.value.use_type == 1) { |
|
|
|
if (item.shape_item) { |
|
|
|
sizeList.value.forEach((item: any) => { |
|
|
|
shapeList.value.push(item.shape_item) |
|
|
|
if (item.shape_item) { |
|
|
|
} else { |
|
|
|
if (!shapeList.value.some(shape => shape.id === item.shape_id)) { |
|
|
|
showToast('该链接异常,请联系客服') |
|
|
|
shapeList.value.push(item.shape_item) |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
showToast('该链接异常,请联系客服') |
|
|
|
|
|
|
|
return |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
if (shapeList.value.length > 0) { |
|
|
|
|
|
|
|
shapeChange(shapeList.value[0]) |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
} else { |
|
|
|
if (shapeList.value.length > 0) { |
|
|
|
getShapeList() |
|
|
|
shapeChange(shapeList.value[0]) |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const contact_name = ref('') |
|
|
|
|
|
|
|
const contact_mobile = ref('') |
|
|
|
|
|
|
|
const province_id = ref(0) |
|
|
|
|
|
|
|
const city_id = ref(0) |
|
|
|
|
|
|
|
const county_id = ref(0) |
|
|
|
|
|
|
|
const province_name = ref('') |
|
|
|
|
|
|
|
const city_name = ref('') |
|
|
|
|
|
|
|
const county_name = ref('') |
|
|
|
|
|
|
|
const address = ref('') |
|
|
|
|
|
|
|
const nameTelChange = (res: any) => { |
|
|
|
|
|
|
|
console.log('nameTelChange', res) |
|
|
|
|
|
|
|
if (res.key == 'name') { |
|
|
|
|
|
|
|
contact_name.value = res.value |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
contact_mobile.value = res.value |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const changeArea = (value: any) => { |
|
|
|
|
|
|
|
console.log('changeArea', value) |
|
|
|
|
|
|
|
province_id.value = value[0].value |
|
|
|
|
|
|
|
city_id.value = value[1].value |
|
|
|
|
|
|
|
county_id.value = value[2].value |
|
|
|
|
|
|
|
province_name.value = value[0].text |
|
|
|
|
|
|
|
city_name.value = value[1].text |
|
|
|
|
|
|
|
county_name.value = value[2].text |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const onChangeDetail = (value: any) => { |
|
|
|
|
|
|
|
console.log('onChangeDetail', value) |
|
|
|
|
|
|
|
address.value = value |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const payAmount = ref(0) |
|
|
|
const payAmount = ref(0) |
|
|
|
const changeValue = (value: number) => { |
|
|
|
const changeValue = (value: number) => { |
|
|
|
console.log(value) |
|
|
|
console.log(value) |
|
|
|
@ -284,8 +347,24 @@ const loading = ref(false) |
|
|
|
const confirm = () => { |
|
|
|
const confirm = () => { |
|
|
|
if (loading.value) return |
|
|
|
if (loading.value) return |
|
|
|
console.log('confirm') |
|
|
|
console.log('confirm') |
|
|
|
if (payAmount.value <= 0) { |
|
|
|
// if (payAmount.value <= 0) { |
|
|
|
showToast('请先选择下单数量') |
|
|
|
// showToast('请先选择下单数量') |
|
|
|
|
|
|
|
// return |
|
|
|
|
|
|
|
// } |
|
|
|
|
|
|
|
if (orderStat.value.use_type == 2 && !contact_name.value) { |
|
|
|
|
|
|
|
showToast('请先填写收货人信息') |
|
|
|
|
|
|
|
return |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (orderStat.value.use_type == 2 && !contact_mobile.value) { |
|
|
|
|
|
|
|
showToast('请先填写收货人手机号') |
|
|
|
|
|
|
|
return |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (orderStat.value.use_type == 2 && !province_id.value) { |
|
|
|
|
|
|
|
showToast('请先选择地区') |
|
|
|
|
|
|
|
return |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (orderStat.value.use_type == 2 && !address.value) { |
|
|
|
|
|
|
|
showToast('请先填写详细地址') |
|
|
|
return |
|
|
|
return |
|
|
|
} |
|
|
|
} |
|
|
|
getPosition() |
|
|
|
getPosition() |
|
|
|
@ -305,6 +384,19 @@ const confirm = () => { |
|
|
|
shape_id: shapeId.value, |
|
|
|
shape_id: shapeId.value, |
|
|
|
custom_text: shapeText.value |
|
|
|
custom_text: shapeText.value |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
if (orderStat.value.use_type == 2) { |
|
|
|
|
|
|
|
parms.province_id = province_id.value |
|
|
|
|
|
|
|
parms.city_id = city_id.value |
|
|
|
|
|
|
|
parms.county_id = county_id.value |
|
|
|
|
|
|
|
parms.province_name = province_name.value |
|
|
|
|
|
|
|
parms.city_name = city_name.value |
|
|
|
|
|
|
|
parms.county_name = county_name.value |
|
|
|
|
|
|
|
parms.address = address.value |
|
|
|
|
|
|
|
parms.contact_name = contact_name.value |
|
|
|
|
|
|
|
parms.contact_mobile = contact_mobile.value |
|
|
|
|
|
|
|
parms.addr_id = 0 |
|
|
|
|
|
|
|
parms.country_id = 45 |
|
|
|
|
|
|
|
} |
|
|
|
badgeApi.creatOrder(parms).then((res: any) => { |
|
|
|
badgeApi.creatOrder(parms).then((res: any) => { |
|
|
|
console.log('creatOrder', res) |
|
|
|
console.log('creatOrder', res) |
|
|
|
showSuccessToast({ |
|
|
|
showSuccessToast({ |
|
|
|
@ -500,7 +592,8 @@ const custom_switch = ref(0) |
|
|
|
const limitCount = ref(10) |
|
|
|
const limitCount = ref(10) |
|
|
|
const getShapeList = () => { |
|
|
|
const getShapeList = () => { |
|
|
|
badgeApi.getShapeList({ |
|
|
|
badgeApi.getShapeList({ |
|
|
|
prod_id: prodId.value |
|
|
|
prod_id: prodId.value, |
|
|
|
|
|
|
|
type_id: orderStat.value.type_id |
|
|
|
}).then((res: any) => { |
|
|
|
}).then((res: any) => { |
|
|
|
console.log('getShapeList', res) |
|
|
|
console.log('getShapeList', res) |
|
|
|
shapeList.value = res.list |
|
|
|
shapeList.value = res.list |
|
|
|
@ -628,7 +721,6 @@ const getTrialCode = () => { |
|
|
|
trialCode.value = true |
|
|
|
trialCode.value = true |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
getOrderStat() |
|
|
|
getOrderStat() |
|
|
|
getSizeList() |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -637,6 +729,7 @@ const getOrderStat = () => { |
|
|
|
badgeApi.getOrderStat({}).then((res: any) => { |
|
|
|
badgeApi.getOrderStat({}).then((res: any) => { |
|
|
|
console.log('getOrderStat', res) |
|
|
|
console.log('getOrderStat', res) |
|
|
|
orderStat.value = res |
|
|
|
orderStat.value = res |
|
|
|
|
|
|
|
getSizeList() |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -1226,4 +1319,10 @@ onUnmounted(() => { |
|
|
|
font-family: chinese; |
|
|
|
font-family: chinese; |
|
|
|
overflow: hidden; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.shape-item-image-round { |
|
|
|
|
|
|
|
border-radius: 50%; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.van-address-edit { |
|
|
|
|
|
|
|
padding: 0!important; |
|
|
|
|
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |