devops
/
ece.suwa3d.com
forked from natuka/web.puabadge.com
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

单图徽章代码提交

lzm_web
Linzm 8 months ago
parent
ad93fb5fa0
commit
d95c0fbf2e
9 changed files with 523 additions and 184 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      components.d.ts
  2. 47
      src/api/badge.ts
  3. 4
      src/router/index.ts
  4. 7
      src/utils/request.ts
  5. 326
      src/views/badge/index.vue
  6. 22
      src/views/badge/myOrder.vue
  7. 37
      src/views/badge/orderDetail.vue
  8. 199
      src/views/badge/preview.vue
  9. 60
      src/views/badge/record.vue

1
components.d.ts vendored
Unescape View File

@ -27,6 +27,7 @@ declare module '@vue/runtime-core' {
VanGridItem: typeof import('vant/es')['GridItem'] VanGridItem: typeof import('vant/es')['GridItem']
VanIcon: typeof import('vant/es')['Icon'] VanIcon: typeof import('vant/es')['Icon']
VanImage: typeof import('vant/es')['Image'] VanImage: typeof import('vant/es')['Image']
VanLoading: typeof import('vant/es')['Loading']
VanStepper: typeof import('vant/es')['Stepper'] VanStepper: typeof import('vant/es')['Stepper']
VanSwipe: typeof import('vant/es')['Swipe'] VanSwipe: typeof import('vant/es')['Swipe']
VanSwipeItem: typeof import('vant/es')['SwipeItem'] VanSwipeItem: typeof import('vant/es')['SwipeItem']

47
src/api/badge.ts
Unescape View File

@ -16,14 +16,22 @@ export const getKindList = (params: any) => {
}) })
} }
// 获取上传图片地址 // 获取上传pid
export const getImageUrl = (params: any) => { export const getPid = (params: any) => {
return request('images/uploadUrl', { return request('images/pid', {
method: 'GET', method: 'GET',
params, params,
}) })
} }
// 生成的图片记录
export const createLog = (data: any) => {
return request('images/createLog', {
method: 'POST',
data,
})
}
// 获取图片 // 获取图片
export const getImageList = (params: any) => { export const getImageList = (params: any) => {
return request('images/getList', { return request('images/getList', {
@ -56,9 +64,42 @@ export const getOrderDetail = (params: any) => {
}) })
} }
// 推送生成效果图
export const putMOdeling = (data: any) => { export const putMOdeling = (data: any) => {
return request('images/putModeling', { return request('images/putModeling', {
method: 'POST', method: 'POST',
data, data,
}) })
} }
// 获取尺寸剩余次数
export const getOrderPrice = (params: any) => {
return request('orders/price', {
method: 'GET',
params,
})
}
// 获取对比原图
export const getCompareImage = (params: any) => {
return request('images/getImagesLogDetail', {
method: 'GET',
params,
})
}
// 获取统计数量
export const getOrderStat = (params: any) => {
return request('orders/stat', {
method: 'GET',
params,
})
}
// 确认下单
export const creatOrder = (data: any) => {
return request('orders/create', {
method: 'POST',
data,
})
}

4
src/router/index.ts
Unescape View File

@ -34,6 +34,10 @@ router.beforeEach((_to, _from, next) => {
// const tokenStore = useTokenStore() // const tokenStore = useTokenStore()
const store = useStore() const store = useStore()
const code = _to.query.code const code = _to.query.code
if (code) {
localStorage.setItem('code', code as string);
}
console.log('code===>', code);
if (code) { if (code) {
let url = store.redirectUrl() let url = store.redirectUrl()

7
src/utils/request.ts
Unescape View File

@ -49,11 +49,12 @@ const errorHandler = (error: RequestError): Promise<any> => {
// 请求拦截器 // 请求拦截器
const requestHandler = (config: InternalAxiosRequestConfig): InternalAxiosRequestConfig | Promise<InternalAxiosRequestConfig> => { const requestHandler = (config: InternalAxiosRequestConfig): InternalAxiosRequestConfig | Promise<InternalAxiosRequestConfig> => {
const savedToken = localStorage.get(STORAGE_TOKEN_KEY) // const savedToken = localStorage.get(STORAGE_TOKEN_KEY)
// 如果 token 存在 // 如果 token 存在
const code = localStorage.get('code')
// 让每个请求携带自定义 token, 请根据实际情况修改 // 让每个请求携带自定义 token, 请根据实际情况修改
if (savedToken) if (code)
config.headers[REQUEST_TOKEN_KEY] = savedToken config.headers['Authorization'] = code
return config return config
} }

326
src/views/badge/index.vue
Unescape View File

@ -2,6 +2,7 @@
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import H5Cropper from 'vue-cropper-h5' import H5Cropper from 'vue-cropper-h5'
import "vue-cropper-h5/dist/style.css" import "vue-cropper-h5/dist/style.css"
import { showLoadingToast, showToast, closeToast, showFailToast, showSuccessToast } from 'vant';
import * as badgeApi from '@/api/badge' import * as badgeApi from '@/api/badge'
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
@ -13,23 +14,220 @@ const options = ref({})
const imgurl = ref('') const imgurl = ref('')
const imgBgUrl = ref('') const imgBgUrl = ref('')
const isBgShow = ref(true) const isBgShow = ref(true)
const remaining = ref(0)
function goToRecord() { function goToRecord() {
router.push('/badge/record') router.push('/badge/record')
} }
function goToMyOrder() { function goToMyOrder() {
router.push('/badge/myOrder') router.push('/badge/myOrder')
} }
const sizeList = ref([])
const getSizeList = () => {
badgeApi.getOrderPrice({}).then((res: any) => {
sizeList.value = res
})
}
const orderStat = ref({})
const getOrderStat = () => {
badgeApi.getOrderStat({}).then((res: any) => {
orderStat.value = res
})
}
const isLoading = ref(false)
function goToPreview() { function goToPreview() {
router.push('/badge/preview') if (isLoading.value) {
return
}
console.log('goToPreview')
if (!imgurl.value) {
showToast('请先上传照片')
return
} }
if (isBgShow.value == false && !imgBgUrl.value) {
showToast('请先上传背景照片')
return
}
if (orderStat.remain_count <= 0) {
showToast('剩余次数不足')
return
}
isLoading.value = true
getPid()
}
const picture = ref(null)
function getbase64Data(data) { function getbase64Data(data) {
picture.value = data;
}
function getBlob(data) {
console.log('getBlob', data)
if (data.size > 1024 * 1024 * 10) {
showToast('照片大小不能超过10M')
return
}
imgurl.value = data; imgurl.value = data;
console.log('图片地址', data)
} }
const pictureBg = ref(null)
function getBgbase64Data(data) { function getBgbase64Data(data) {
pictureBg.value = data;
}
function getBlobBg(data) {
console.log('getBlobBg', data)
if (data.size > 1024 * 1024 * 10) {
showToast('照片大小不能超过10M')
return
}
imgBgUrl.value = data; imgBgUrl.value = data;
console.log('背景图片地址', data)
} }
const getRandomNumber = (min: number, max: number) => {
return Math.floor(Math.random() * (max - min + 1) + min);
}
// 获取Pid
const pid = ref('')
const kindId = ref(0)
const getPid = async () => {
showLoadingToast({
message: '上传中...',
forbidClick: true,
})
kindId.value = checkId.value == 0 ? getRandomNumber(kindList.value[0].id, kindList.value[kindList.value.length - 1].id) : checkId.value
const params = {
extend_value: isBgShow.value ? -1 : 0,
kind_id: kindId.value,
}
try {
const res = await badgeApi.getPid(params)
console.log('getPid', res)
isLoading.value = false
pid.value = res.pid
if (isBgShow.value) {
try {
const uploadTasks = [
sendToOss(imgurl.value, res.url),
sendToOss(imgurl.value, res.oss_url)
]
await Promise.all(uploadTasks)
} catch (err) {
closeToast()
console.error('上传失败:', err)
showFailToast({
message: '上传失败',
duration: 2000,
})
}
} else {
try {
const uploadTasks = [
sendToOss(imgurl.value, res.url),
sendToOss(imgurl.value, res.oss_url),
sendToOss(imgBgUrl.value, res.extend_url),
sendToOss(imgBgUrl.value, res.extend_bg_url)
]
await Promise.all(uploadTasks)
} catch (err) {
closeToast()
console.error('上传失败:', err)
showFailToast({
message: '上传失败',
duration: 2000,
})
}
}
} catch (err) {
isLoading.value = false
console.log(err)
} finally {
isLoading.value = false
closeToast()
}
}
// 上传到OSS
const pendingUploads = ref(0)
const isAnotherAPICalled = ref(false)
const sendToOss = async (src: string, url: string) => {
try {
pendingUploads.value++
const response = await fetch(url, {
method: 'PUT',
headers: {
'Content-Type': 'image/jpeg'
},
body: src
})
if (!response.ok) {
throw new Error('Upload failed')
}
console.log('图片上传成功--------', response)
if (--pendingUploads.value === 0 && !isAnotherAPICalled.value) {
const params = {
pid: pid.value,
kind_id: kindId.value,
extend_value: isBgShow.value ? -1 : 0,
group: 1,
}
badgeApi.putMOdeling(params).then((res: any) => {
console.log('putModeling', res)
createLog()
}).catch((err) => {
console.log('putModeling', err)
}).finally(() => {
closeToast()
})
}
} catch (err) {
closeToast()
pendingUploads.value--
showFailToast({
message: '照片上传失败',
duration: 2000,
})
console.log("uploadImage----err", err)
}
}
const createLog = () => {
const params = {
pid: pid.value,
group: 1,
kind_id: kindId.value,
}
badgeApi.createLog(params).then((res: any) => {
console.log('createLog', res)
closeToast()
showSuccessToast({
message: '照片上传成功',
duration: 2000,
})
setTimeout(() => {
router.push({
path: '/badge/preview',
query: {
pid: pid.value,
group: 1,
},
})
}, 1000);
}).catch((err) => {
console.log('getGenImages', err)
showFailToast({
message: '照片上传失败',
duration: 2000,
})
}).finally(() => {
closeToast()
})
}
const kindList = ref([])
const checkId = ref(0)
const getKindList = () => { const getKindList = () => {
badgeApi.getKindList({ badgeApi.getKindList({
page: 1, page: 1,
@ -37,12 +235,14 @@ const getKindList = () => {
scale: 20, scale: 20,
}).then((res: any) => { }).then((res: any) => {
const data = res || [] const data = res || []
kindList.value = data.list
}).catch((err) => { }).catch((err) => {
}).finally((err) => { }).finally((err) => {
}) })
} }
const sundryList = ref([])
const getSundryList = () => { const getSundryList = () => {
badgeApi.getSundryList({ badgeApi.getSundryList({
page: 1, page: 1,
@ -50,12 +250,14 @@ const getSundryList = () => {
group: 'gp', group: 'gp',
}).then((res: any) => { }).then((res: any) => {
const data = res || [] const data = res || []
sundryList.value = data.list
}).catch((err) => { }).catch((err) => {
}).finally((err) => { }).finally((err) => {
}) })
} }
const caseList = ref([])
const getList = () => { const getList = () => {
badgeApi.getSundryList({ badgeApi.getSundryList({
page: 1, page: 1,
@ -64,6 +266,7 @@ const getList = () => {
ids: '6,7,8,9,19' ids: '6,7,8,9,19'
}).then((res: any) => { }).then((res: any) => {
const data = res || [] const data = res || []
caseList.value = data.list
}).catch((err) => { }).catch((err) => {
}).finally((err) => { }).finally((err) => {
@ -74,6 +277,8 @@ onMounted(() => {
getKindList() getKindList()
getSundryList() getSundryList()
getList() getList()
getOrderStat()
getSizeList()
}) })
</script> </script>
@ -84,22 +289,22 @@ onMounted(() => {
剩余兑换数量 剩余兑换数量
</div> </div>
<div class="size-options"> <div class="size-options">
<div class="size-item"> <div class="size-item" v-for="item in sizeList" :key="item.id">
<div class="size-text"> <div class="size-text">
4cm {{ item.size }}
</div> </div>
<div class="size-count"> <div class="size-count">
（剩余兑换：1） （剩余兑换：{{ item.count }}）
</div> </div>
</div> </div>
<div class="size-item"> <!-- <div class="size-item">
<div class="size-text"> <div class="size-text">
5cm 5cm
</div> </div>
<div class="size-count"> <div class="size-count">
（剩余兑换：2） （剩余兑换：2）
</div> </div>
</div> </div> -->
</div> </div>
</div> </div>
<div class="badge-info"> <div class="badge-info">
@ -108,7 +313,7 @@ onMounted(() => {
设计图集 设计图集
</div> </div>
<div class="badge-count"> <div class="badge-count">
8张 {{ orderStat.create_count }}张
</div> </div>
</div> </div>
<div class="badge-item" @click="goToMyOrder"> <div class="badge-item" @click="goToMyOrder">
@ -116,7 +321,7 @@ onMounted(() => {
我的订单 我的订单
</div> </div>
<div class="badge-count"> <div class="badge-count">
3笔 {{ orderStat.order_count }}笔
</div> </div>
</div> </div>
</div> </div>
@ -150,7 +355,7 @@ onMounted(() => {
</div> </div>
</div> </div>
<div class="photo-upload-body"> <div class="photo-upload-body">
<div v-if="!imgurl" class="photo-upload-box"> <div v-if="!picture" class="photo-upload-box">
<div class="photo-upload-header" @click="imgShow = true"> <div class="photo-upload-header" @click="imgShow = true">
<van-icon name="question-o" size="16px" class="photo-upload-guide-icon" /> <van-icon name="question-o" size="16px" class="photo-upload-guide-icon" />
<span class="photo-upload-guide-text">图片上传指南</span> <span class="photo-upload-guide-text">图片上传指南</span>
@ -170,71 +375,30 @@ onMounted(() => {
请确定您对上传的照片拥有合法使用权利或已取得他人合法授权，且同意本平台分析图片信息以提供生成服务 请确定您对上传的照片拥有合法使用权利或已取得他人合法授权，且同意本平台分析图片信息以提供生成服务
</div> </div>
</div> </div>
<img class="photo-upload-img" v-if="imgurl" :src="imgurl" alt="" srcset=""> <img class="photo-upload-img" v-if="picture" :src="picture" alt="" srcset="">
<div class="photo-upload-box-1"> <div class="photo-upload-box-1">
<h5-cropper :option="option" @getbase64Data="getbase64Data"></h5-cropper> <h5-cropper :option="option" @getbase64Data="getbase64Data" @getFile="getFile" @getblob='getBlob'></h5-cropper>
</div> </div>
</div> </div>
<div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;">温馨提示：请上传1-2人的照片</div>
<div class="style-section"> <div class="style-section">
<div class="style-title"> <div class="style-title">
风格样式 风格样式
</div> </div>
<div class="style-list"> <div class="style-list">
<div class="style-item"> <div class="style-item" @click="checkId = 0">
<img class="style-img" src="@/assets/badge/suiji.png" alt="随机风格盲盒">
<div class="style-label">
随机风格盲盒
</div>
<span class="style-selected" />
</div>
<div class="style-item">
<img class="style-img" src="@/assets/badge/suiji.png" alt="Q版国风动漫">
<div class="style-label">
Q版国风动漫
</div>
<span class="style-selected" />
</div>
<div class="style-item">
<img class="style-img" src="@/assets/badge/suiji.png" alt="Q版卡通">
<div class="style-label">
Q版卡通
</div>
<span class="style-selected" />
</div>
<div class="style-item">
<img class="style-img" src="@/assets/badge/suiji.png" alt="芭比风">
<div class="style-label">
芭比风
</div>
<span class="style-selected" />
</div>
<div class="style-item">
<img class="style-img" src="@/assets/badge/suiji.png" alt="随机风格盲盒"> <img class="style-img" src="@/assets/badge/suiji.png" alt="随机风格盲盒">
<div class="style-label"> <div class="style-label">
随机风格盲盒 随机风格盲盒
</div> </div>
<span class="style-selected" /> <span class="style-selected" v-if="checkId == 0" />
</div> </div>
<div class="style-item"> <div class="style-item" v-for="item in kindList" :key="item.id" @click="checkId = item.id">
<img class="style-img" src="@/assets/badge/suiji.png" alt="Q版国风动漫"> <img class="style-img" :src="item.path" :alt="item.name">
<div class="style-label"> <div class="style-label">
Q版国风动漫 {{ item.name }}
</div> </div>
<span class="style-selected" /> <span class="style-selected" v-if="item.id == checkId" />
</div>
<div class="style-item">
<img class="style-img" src="@/assets/badge/suiji.png" alt="Q版卡通">
<div class="style-label">
Q版卡通
</div>
<span class="style-selected" />
</div>
<div class="style-item">
<img class="style-img" src="@/assets/badge/suiji.png" alt="芭比风">
<div class="style-label">
芭比风
</div>
<span class="style-selected" />
</div> </div>
</div> </div>
</div> </div>
@ -278,9 +442,9 @@ onMounted(() => {
<div class="bg-photo-upload-text">上传照片</div> <div class="bg-photo-upload-text">上传照片</div>
</div> </div>
</div> </div>
<img v-if="imgBgUrl" class="bg-photo-upload-img" :src="imgBgUrl" alt=""> <img v-if="pictureBg" class="bg-photo-upload-img" :src="pictureBg" alt="">
<div class="bg-photo-upload-label-1"> <div class="bg-photo-upload-label-1">
<h5-cropper :option="options" @getbase64Data="getBgbase64Data"></h5-cropper> <h5-cropper :option="options" @getbase64Data="getBgbase64Data" @getFile="getFile" @getblob='getBlobBg'></h5-cropper>
</div> </div>
</div> </div>
</div> </div>
@ -288,7 +452,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">剩余12次</span> <span class="design-remaining">剩余{{ orderStat.remain_count }}次</span>
</div> </div>
<button class="design-btn" @click="goToPreview"> <button class="design-btn" @click="goToPreview">
<span>开始设计</span> <span>开始设计</span>
@ -305,11 +469,11 @@ onMounted(() => {
选择该选项设计的徽章会根据上传的人像照片背景进行生成效果 选择该选项设计的徽章会根据上传的人像照片背景进行生成效果
</div> </div>
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 24px;"> <div style="display: flex; align-items: center; justify-content: center; margin-bottom: 24px;">
<img src="@/assets/badge/suiji.png" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover; margin-right: 12px;"> <img :src="caseList[2].path" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover; margin-right: 12px;">
<span style="font-size: 24px; color: #bbb; margin-right: 12px;"> <span style="font-size: 24px; color: #bbb; margin-right: 12px;">
<van-icon name="arrow" /> <van-icon name="arrow" />
</span> </span>
<img src="@/assets/badge/suiji.png" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover;"> <img :src="caseList[3].path" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover;">
</div> </div>
<div style="font-weight: bold; font-size: 15px; margin-bottom: 4px;"> <div style="font-weight: bold; font-size: 15px; margin-bottom: 4px;">
补充背景照片 补充背景照片
@ -318,17 +482,17 @@ onMounted(() => {
选择该选项需要额外上传一张照片作为背景 选择该选项需要额外上传一张照片作为背景
</div> </div>
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 12px;"> <div style="display: flex; align-items: center; justify-content: center; margin-bottom: 12px;">
<img src="@/assets/badge/suiji.png" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover; margin-right: 12px;"> <img :src="caseList[0].path" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover; margin-right: 12px;">
<span style="font-size: 24px; color: #bbb; margin-right: 12px;"> <span style="font-size: 24px; color: #bbb; margin-right: 12px;">
<van-icon name="plus" /> <van-icon name="plus" />
</span> </span>
<img src="@/assets/badge/suiji.png" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover;"> <img :src="caseList[1].path" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover;">
</div> </div>
<div style="font-size: 24px; color: #bbb;text-align: center;"> <div style="font-size: 24px; color: #bbb;text-align: center;">
<van-icon name="arrow-down" /> <van-icon name="arrow-down" />
</div> </div>
<div style="display: flex; align-items: center; justify-content: center; margin-top: 12px;"> <div style="display: flex; align-items: center; justify-content: center; margin-top: 12px;">
<img src="@/assets/badge/suiji.png" style="width: 120px; height: 120px; border-radius: 16px; object-fit: cover;"> <img :src="caseList[4].path" style="width: 120px; height: 120px; border-radius: 16px; object-fit: cover;">
</div> </div>
<div style="margin-top: 32px; text-align: center;"> <div style="margin-top: 32px; text-align: center;">
<button style="width: 90%; height: 44px; background: linear-gradient(90deg, #d6f5b7 0%, #50cf54 100%); border: none; border-radius: 22px; color: #222; font-size: 18px; font-weight: bold; cursor: pointer;" @click="show = false"> <button style="width: 90%; height: 44px; background: linear-gradient(90deg, #d6f5b7 0%, #50cf54 100%); border: none; border-radius: 22px; color: #222; font-size: 18px; font-weight: bold; cursor: pointer;" @click="show = false">
@ -341,44 +505,37 @@ onMounted(() => {
<van-action-sheet v-model:show="imgShow" title="图片上传指南" :close-on-click-overlay="true" closeable> <van-action-sheet v-model:show="imgShow" title="图片上传指南" :close-on-click-overlay="true" closeable>
<div style="padding: 0 16px 24px 16px;"> <div style="padding: 0 16px 24px 16px;">
<div style="text-align: center;"> <div style="text-align: center;">
<img src="@/assets/badge/suiji.png" alt="照片上传指南" style="width: 220px; border-radius: 16px; margin-bottom: 16px;"> <img :src="sundryList[0].path" alt="照片上传指南" style="width: 90vw; border-radius: 16px; margin-bottom: 16px;">
</div>
<div style="display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: center; margin-bottom: 16px;">
<span style="background: #e6f7e6; color: #22c55e; border-radius: 8px; padding: 2px 10px; font-size: 13px;">光线均匀</span>
<span style="background: #e6f7e6; color: #22c55e; border-radius: 8px; padding: 2px 10px; font-size: 13px;">照片清晰</span>
<span style="background: #e6f7e6; color: #22c55e; border-radius: 8px; padding: 2px 10px; font-size: 13px;">主体明确</span>
<span style="background: #e6f7e6; color: #22c55e; border-radius: 8px; padding: 2px 10px; font-size: 13px;">面部特征明显</span>
<span style="background: #e6f7e6; color: #22c55e; border-radius: 8px; padding: 2px 10px; font-size: 13px;">预留充足留白</span>
</div> </div>
<div style="display: flex; justify-content: space-between; margin-bottom: 16px;"> <div style="display: flex; justify-content: space-between; margin-bottom: 16px;">
<div style="flex: 1; text-align: center;"> <div style="flex: 1; text-align: center;">
<img src="@/assets/badge/suiji.png" alt="多主体" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;"> <img :src="sundryList[1].path" alt="多主体" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
<div style="font-size: 13px; color: #888; margin-top: 4px;"> <div style="font-size: 13px; color: #888; margin-top: 4px;">
多主体 多主体
</div> </div>
</div> </div>
<div style="flex: 1; text-align: center;"> <div style="flex: 1; text-align: center;">
<img src="@/assets/badge/suiji.png" alt="光线昏暗" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;"> <img :src="sundryList[2].path" alt="光线昏暗" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
<div style="font-size: 13px; color: #888; margin-top: 4px;"> <div style="font-size: 13px; color: #888; margin-top: 4px;">
光线昏暗 光线昏暗
</div> </div>
</div> </div>
<div style="flex: 1; text-align: center;"> <div style="flex: 1; text-align: center;">
<img src="@/assets/badge/suiji.png" alt="后侧面及背影" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;"> <img :src="sundryList[3].path" alt="后侧面及背影" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
<div style="font-size: 13px; color: #888; margin-top: 4px;"> <div style="font-size: 13px; color: #888; margin-top: 4px;">
后侧面及背影 后侧面及背影
</div> </div>
</div> </div>
</div> </div>
<div style="display: flex; justify-content: space-between; margin-bottom: 24px;"> <div style="display: flex; justify-content: space-around; margin-bottom: 24px;">
<div style="flex: 1; text-align: center;"> <div style="flex: 1; text-align: center;">
<img src="@/assets/badge/suiji.png" alt="照片模糊" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;"> <img :src="sundryList[4].path" alt="照片模糊" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
<div style="font-size: 13px; color: #888; margin-top: 4px;"> <div style="font-size: 13px; color: #888; margin-top: 4px;">
照片模糊 照片模糊
</div> </div>
</div> </div>
<div style="flex: 1; text-align: center;"> <div style="flex: 1; text-align: center;">
<img src="@/assets/badge/suiji.png" alt="照片留白过少" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;"> <img :src="sundryList[5].path" alt="照片留白过少" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
<div style="font-size: 13px; color: #888; margin-top: 4px;"> <div style="font-size: 13px; color: #888; margin-top: 4px;">
照片留白过少 照片留白过少
</div> </div>
@ -647,9 +804,8 @@ onMounted(() => {
width: 23vw; width: 23vw;
height: 23vw; height: 23vw;
border-radius: 8px; border-radius: 8px;
object-fit: cover;
background: #f5f5f5;
border: 2px solid transparent; border: 2px solid transparent;
object-fit: cover;
transition: border 0.2s; transition: border 0.2s;
} }
.style-item .style-selected { .style-item .style-selected {

22
src/views/badge/myOrder.vue
Unescape View File

@ -5,12 +5,8 @@
</div> </div>
<div class="order-list"> <div class="order-list">
<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="@/assets/badge/suiji.png" alt="order1" /> <img class="order-img" :src="item.path" alt="order1" />
<span class="order-status status-processing">生产中</span> <span class="order-status status-processing">{{ getStatus(item.status) }}</span>
</div>
<div class="order-item">
<img class="order-img" src="@/assets/badge/suiji.png" alt="order2" />
<span class="order-status status-finished">已完成</span>
</div> </div>
</div> </div>
</div> </div>
@ -32,6 +28,7 @@ function getOrder() {
badgeApi.getMyOrder({ badgeApi.getMyOrder({
page: page.value, page: page.value,
pageSize: 10, pageSize: 10,
status: 0,
}).then(res => { }).then(res => {
if(page.value === 1) { if(page.value === 1) {
orders.value = res.data.list orders.value = res.data.list
@ -59,6 +56,19 @@ function OrderDetail(id: number) {
}, },
}) })
} }
function getStatus(status: number) {
if(status == 1) {
return '待支付'
} else if(status == 2) {
return '已取消'
} else if(status == 100) {
return '生产中'
} else if(status == 200) {
return '待收货'
} else if(status == 300) {
return '已完成'
}
}
</script> </script>
<style scoped> <style scoped>
.header { .header {

37
src/views/badge/orderDetail.vue
Unescape View File

@ -5,11 +5,11 @@
</div> </div>
<div class="order-status"> <div class="order-status">
<div class="avatar-wrapper"> <div class="avatar-wrapper">
<img class="avatar-img" src="@/assets/badge/suiji.png" alt="生产中" /> <img class="avatar-img" :src="order.path" :alt="order.kind_name" />
</div> </div>
</div> </div>
<div class="status-info"> <div class="status-info">
<div class="status-title">生产中</div> <div class="status-title">{{ getStatus(order.status) }}</div>
<div class="status-desc"> <div class="status-desc">
下单后预计需要7天完成生产发货。如对产品有疑问，可以联系客服咨询。 下单后预计需要7天完成生产发货。如对产品有疑问，可以联系客服咨询。
</div> </div>
@ -26,18 +26,18 @@
</div> </div>
<div class="product-row"> <div class="product-row">
<span class="product-label">尺寸</span> <span class="product-label">尺寸</span>
<span class="product-value">5cm</span> <span class="product-value">{{order.model_size}}</span>
</div> </div>
<div class="product-row"> <div class="product-row">
<span class="product-label">购买数量</span> <span class="product-label">购买数量</span>
<span class="product-value">1</span> <span class="product-value">{{order.count}}</span>
</div> </div>
</div> </div>
</div> </div>
<div style="padding: 0 16px;"> <!-- <div style="padding: 0 16px;">
<van-divider /> <van-divider />
</div> </div> -->
<div class="address-info" style="padding: 0 16px;"> <!-- <div class="address-info" style="padding: 0 16px;">
<div class="address-title">收货信息</div> <div class="address-title">收货信息</div>
<div class="address-row"> <div class="address-row">
<img class="address-img" src="@/assets/badge/location.png" alt="" > <img class="address-img" src="@/assets/badge/location.png" alt="" >
@ -47,7 +47,7 @@
<div class="address-detail"> <div class="address-detail">
详细地址详细地址详细地址详细地址详细地址详细地址 详细地址详细地址详细地址详细地址详细地址详细地址
</div> </div>
</div> </div> -->
<div style="padding: 0 16px;"> <div style="padding: 0 16px;">
<van-divider /> <van-divider />
</div> </div>
@ -56,11 +56,11 @@
<div class="product-details"> <div class="product-details">
<div class="product-row"> <div class="product-row">
<span class="product-label">购买订单id</span> <span class="product-label">购买订单id</span>
<span class="product-value">O98462</span> <span class="product-value">{{order.sw_oid}}</span>
</div> </div>
<div class="product-row"> <div class="product-row">
<span class="product-label">购买时间</span> <span class="product-label">购买时间</span>
<span class="product-value">2025-03-24 16:12:46</span> <span class="product-value">{{order.pay_at || '未支付'}}</span>
</div> </div>
</div> </div>
</div> </div>
@ -83,12 +83,25 @@ function getOrderDetail() {
badgeApi.getOrderDetail({ badgeApi.getOrderDetail({
id: id.value, id: id.value,
}).then(res => { }).then(res => {
order.value = res.data order.value = res
}) })
} }
const router = useRouter(); const router = useRouter();
function goBack() { function goBack() {
router.push('/badge/myOrder'); router.back()
}
function getStatus(status: number) {
if(status == 1) {
return '待支付'
} else if(status == 2) {
return '已取消'
} else if(status == 100) {
return '生产中'
} else if(status == 200) {
return '待收货'
} else if(status == 300) {
return '已完成'
}
} }
</script> </script>
<style scoped> <style scoped>

199
src/views/badge/preview.vue
Unescape View File

@ -3,7 +3,7 @@
<view class="backstyle_1"></view> <view class="backstyle_1"></view>
<view class="backstyle_2"></view> <view class="backstyle_2"></view>
<div class="header" @click="goBack"> <div class="header" @click="goBack">
<span class="back-icon"><van-icon name="arrow-left" size="16px" /> 返回</span> <span class="back-icon"><van-icon name="arrow-left" size="16px" /> 效果预览</span>
</div> </div>
<div class="step-container"> <div class="step-container">
<div class="step-item"> <div class="step-item">
@ -28,7 +28,11 @@
<div class="progress-desc">总计大约需要60秒，请耐心等待...</div> <div class="progress-desc">总计大约需要60秒，请耐心等待...</div>
</div> </div>
<div v-else class="progress-section"> <div v-else class="progress-section">
<img class="progress-section-img" :src="imageUrl" alt=""> <van-swipe v-model="currentIndex" class="progress-section-img" :autoplay="3000" :show-indicators="false">
<van-swipe-item v-for="item in imageList" :key="item.id">
<img class="progress-section-img" :src="item.origin_url" alt="">
</van-swipe-item>
</van-swipe>
</div> </div>
<div class="info-section"> <div class="info-section">
<div class="info-item"> <div class="info-item">
@ -53,24 +57,24 @@
</div> </div>
<div class="order-section"> <div class="order-section">
<div class="order-title">订购数量</div> <div class="order-title">订购数量</div>
<div class="order-item"> <div class="order-item" v-for="item in sizeList" :key="item.id">
<span class="order-size">4cm</span> <span class="order-size">{{ item.size }}</span>
<span class="order-free">(剩余兑换：1)</span> <span class="order-free">(剩余兑换：{{ item.count }})</span>
<div class="order-ctrl"> <div class="order-ctrl">
<van-stepper v-model="value" @change="changeValue" /> <van-stepper v-model="value" :min="0" :max="item.count" @change="changeValue" />
</div> </div>
</div> </div>
<div class="order-item"> <!-- <div class="order-item">
<span class="order-size">5cm</span> <span class="order-size">5cm</span>
<span class="order-free">(剩余兑换：2)</span> <span class="order-free">(剩余兑换：2)</span>
<div class="order-ctrl"> <div class="order-ctrl">
<van-stepper v-model="value" /> <van-stepper v-model="value" />
</div> </div>
</div> </div> -->
</div> </div>
<div class="confirm-box"> <div class="confirm-box">
<div class="action-section"> <div class="action-section">
<button @click="showReload = true" 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>
<button @click="compare" :disabled="flag < 2" class="action-btn"><img class="action-img" src="@/assets/badge/duibi.png" alt=""> 前后对比</button> <button @click="compare" :disabled="flag < 2" class="action-btn"><img class="action-img" src="@/assets/badge/duibi.png" alt=""> 前后对比</button>
<button @click="save" :disabled="flag < 2" class="action-btn"><img class="action-img" src="@/assets/badge/down.png" alt=""> 保存图片</button> <button @click="save" :disabled="flag < 2" class="action-btn"><img class="action-img" src="@/assets/badge/down.png" alt=""> 保存图片</button>
</div> </div>
@ -82,45 +86,23 @@
<van-action-sheet v-model:show="showReload" title="风格样式选择" :close-on-click-overlay="true" closeable> <van-action-sheet v-model:show="showReload" title="风格样式选择" :close-on-click-overlay="true" closeable>
<div class="style-selection"> <div class="style-selection">
<div class="style-grid"> <div class="style-grid">
<div class="style-item" :class="{'active': style == 'suiji'}" @click="changeStyle('suiji')"> <div class="style-item" :class="{'active': checkId == 0}" @click="checkId = 0">
<img src="@/assets/badge/suiji.png" alt="随机风格盲盒" class="style-img"> <img src="@/assets/badge/suiji.png" alt="随机风格盲盒" class="style-img">
<div class="style-label">随机风格盲盒</div> <div class="style-label">随机风格盲盒</div>
<span class="style-selected" v-if="style == 'suiji'" style="display: inline-block;"> <span class="style-selected" v-if="style == 'suiji'" style="display: inline-block;">
<van-icon name="checked" color="#50cf54" size="21px" /> <van-icon name="checked" color="#50cf54" size="21px" />
</span> </span>
</div> </div>
<div class="style-item" :class="{'active': style == 'qban'}" @click="changeStyle('qban')"> <div class="style-item" :class="{'active': item.id == checkId}" v-for="item in kindList" :key="item.id" @click="checkId = item.id">
<img src="@/assets/badge/suiji.png" alt="Q版国风动漫" class="style-img"> <img :src="item.path" :alt="item.name" class="style-img">
<div class="style-label">Q版国风动漫</div> <div class="style-label">{{item.name}}</div>
<span class="style-selected" v-if="style == 'qban'"> <span class="style-selected" v-if="item.id == checkId">
<van-icon name="checked" color="#50cf54" size="21px" />
</span>
</div>
<div class="style-item" :class="{'active': style == 'qkant'}" @click="changeStyle('qkant')">
<img src="@/assets/badge/suiji.png" alt="Q版卡通" class="style-img">
<div class="style-label">Q版卡通</div>
<span class="style-selected" v-if="style == 'qkant'">
<van-icon name="checked" color="#50cf54" size="21px" />
</span>
</div>
<div class="style-item" :class="{'active': style == 'babifeng'}" @click="changeStyle('babifeng')">
<img src="@/assets/badge/suiji.png" alt="芭比风" class="style-img">
<div class="style-label">芭比风</div>
<span class="style-selected" v-if="style == 'babifeng'">
<van-icon name="checked" color="#50cf54" size="21px" /> <van-icon name="checked" color="#50cf54" size="21px" />
</span> </span>
</div> </div>
<div class="style-item">
<img src="@/assets/badge/suiji.png" alt="迪士尼皮克斯" class="style-img">
<div class="style-label">迪士尼皮克斯</div>
</div>
<div class="style-item">
<img src="@/assets/badge/suiji.png" alt="写实肖像" class="style-img">
<div class="style-label">写实肖像</div>
</div>
</div> </div>
<div class="confirm-wrapper"> <div class="confirm-wrapper">
<button class="confirm-button"> <button class="confirm-button" @click="sureReload">
确认再次生成 确认再次生成
</button> </button>
</div> </div>
@ -131,13 +113,13 @@
<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="@/assets/badge/suiji.png" alt="随机风格盲盒" style="width: 120px; height: 120px; border-radius: 8px;"> <img :src="compareList.origin_path" :alt="compareList.kind_name" style="width: 120px; 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" />
</div> </div>
<div style="text-align: center;"> <div style="text-align: center;">
<img src="@/assets/badge/suiji.png" alt="随机风格盲盒" style="width: 120px; height: 120px; border-radius: 8px;"> <img :src="imageUrl" :alt="compareList.kind_name" style="width: 120px; height: 120px; border-radius: 8px;">
</div> </div>
</div> </div>
<div style="text-align: center; margin-top: 16px; color: #999; font-size: 12px;"> <div style="text-align: center; margin-top: 16px; color: #999; font-size: 12px;">
@ -152,13 +134,13 @@
<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="@/assets/badge/suiji.png" alt="背景对比图" style="width: 120px; height: 120px; border-radius: 8px;"> <img :src="compareList.origin_path" :alt="compareList.kind_name" style="width: 120px; height: 120px; border-radius: 8px;">
</div> </div>
<div style="font-size: 24px; color: #333;"> <div style="font-size: 24px; color: #333;">
<van-icon name="plus" size="20px" /> <van-icon name="plus" size="20px" />
</div> </div>
<div style="text-align: center;"> <div style="text-align: center;">
<img src="@/assets/badge/suiji.png" alt="背景对比图" style="width: 120px; height: 120px; border-radius: 8px;"> <img :src="compareList.extend_path" :alt="compareList.kind_name" style="width: 120px; height: 120px; border-radius: 8px;">
</div> </div>
</div> </div>
<div style="font-size: 24px; color: #333;display: flex; align-items: center; justify-content: center; margin: 16px 0;"> <div style="font-size: 24px; color: #333;display: flex; align-items: center; justify-content: center; margin: 16px 0;">
@ -166,7 +148,7 @@
</div> </div>
<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="@/assets/badge/suiji.png" alt="背景对比图" style="width: 120px; height: 120px; border-radius: 8px;"> <img :src="imageUrl" :alt="compareList.kind_name" style="width: 120px; height: 120px; border-radius: 8px;">
</div> </div>
</div> </div>
<div style="text-align: center; margin-top: 16px; color: #999; font-size: 12px;"> <div style="text-align: center; margin-top: 16px; color: #999; font-size: 12px;">
@ -179,16 +161,58 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router'; import { useRoutimporter } from 'vue-router';
import { showSuccessToast } 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);
const showReload = ref(false) const showReload = ref(false)
const showCompare = ref(false) const showCompare = ref(false)
const showBgCompare = ref(false) const showBgCompare = ref(false)
const currentIndex = ref(0)
const imageList = ref([])
function compare() { function compare() {
// showCompare.value = true getCompareImage()
showBgCompare.value = true }
const kindList = ref([])
const checkId = ref(0)
function reload() {
badgeApi.getKindList({
page: 1,
size: 20,
scale: 20,
}).then((res: any) => {
const data = res || []
kindList.value = data.list
}).catch((err) => {
}).finally((err) => {
})
showReload.value = true
}
function sureReload() {
console.log('sureReload')
imageUrl.value = '';
group.value = newGroup.value
badgeApi.createLog({
pid: pid.value,
kind_id: checkId.value,
group: group.value,
}).then((res: any) => {
console.log('createLog', res)
showReload.value = false
progressTimer.value = null
getImageList()
progressList()
timer.value = setInterval(() => {
getImageList()
}, 10000)
}).catch((err) => {
console.log('createLog', err)
}).finally((err) => {
showReload.value = false
})
} }
function save() { function save() {
// 下载图片到本地 // 下载图片到本地
@ -207,20 +231,66 @@ function save() {
showReload.value = true showReload.value = true
} }
} }
const style = ref('suiji') const compareList = ref({})
function changeStyle(style: string) { function getCompareImage() {
console.log(style) badgeApi.getCompareImage({
style.value = style pid: pid.value,
group: group.value,
}).then((res: any) => {
console.log('getCompareImage', res)
if (res.extend_value == -1) {
showCompare.value = true
compareList.value = res
} else {
showBgCompare.value = true
compareList.value = res
} }
function confirm() { }).catch((err) => {
console.log('confirm') console.log('getCompareImage', err)
}).finally((err) => {
})
} }
function goBack() { function goBack() {
router.push('/badge'); router.back()
}
const sizeList = ref([])
const getSizeList = () => {
badgeApi.getOrderPrice({}).then((res: any) => {
sizeList.value = res
})
} }
const payAmount = ref(0)
const changeValue = (value: number) => { const changeValue = (value: number) => {
console.log(value) console.log(value)
payAmount.value = value
}
const key = ref(0)
const confirm = () => {
console.log('confirm')
const parms = {
pid: pid.value,
key: key.value,
pay_amount: payAmount.value,
products: sizeList.value
}
badgeApi.creatOrder(parms).then((res: any) => {
console.log('creatOrder', res)
showSuccessToast({
message: '下单成功',
duration: 2000,
})
router.push({
path: '/badge/myOrder'
})
}).catch((err) => {
console.log('creatOrder', err)
}).finally((err) => {
})
} }
const imageUrl = ref('') const imageUrl = ref('')
@ -238,19 +308,21 @@ const progressList = () => {
if (progress.value < 90) { if (progress.value < 90) {
progress.value += 1 progress.value += 1
} }
}, 500) }, 300)
} }
} }
const newGroup = ref(0)
const getImageList = () => { const getImageList = () => {
badgeApi.getKindList({ badgeApi.getImageList({
pid: 0, pid: pid.value,
group: group.value group: group.value
}).then((res: any) => { }).then((res: any) => {
console.log('getImageList', res)
const data = res || [] const data = res || []
flag.value = data.flag || 1 flag.value = data.flag
if (data.flag === 2) {
if (flag.value === 2) { newGroup.value = data.next_group
// 清除轮询和进度条计时器 // 清除轮询和进度条计时器
clearInterval(timer.value) clearInterval(timer.value)
clearInterval(progressTimer.value) clearInterval(progressTimer.value)
@ -259,7 +331,9 @@ const getImageList = () => {
progress.value = 100 progress.value = 100
// 显示图片 // 显示图片
imageUrl.value = data.url imageUrl.value = data.list[0].origin_url
imageList.value = data.list
key.value = data.list[0].key
} }
}).catch((err) => { }).catch((err) => {
clearInterval(progressTimer.value) clearInterval(progressTimer.value)
@ -269,9 +343,16 @@ const getImageList = () => {
}) })
} }
const pid = ref(0)
const route = useRoute()
onMounted(() => { onMounted(() => {
pid.value = route.query.pid
group.value = route.query.group
// pid.value = 281505;
// group.value = 1;
getImageList() getImageList()
progressList() progressList()
getSizeList()
timer.value = setInterval(() => { timer.value = setInterval(() => {
getImageList() getImageList()
}, 10000) }, 10000)

60
src/views/badge/record.vue
Unescape View File

@ -6,17 +6,14 @@
<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">
<div class="record-image-item"> <div class="record-image-item" v-for="item in images" :key="item.id">
<img src="@/assets/badge/suiji.png" alt="效果图" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;"> <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%;">
<div class="record-image-item-shadow"></div>
</block>
<div v-else class="record-image-item-loading" stop-click>
设计失败
</div> </div>
<div class="record-image-item">
<img src="@/assets/badge/suiji.png" alt="效果图" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
</div>
<div class="record-image-item">
<img src="@/assets/badge/suiji.png" alt="效果图" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
</div>
<div class="record-image-item">
<img src="@/assets/badge/suiji.png" alt="效果图" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
</div> </div>
</div> </div>
</div> </div>
@ -43,12 +40,12 @@ function getList() {
pageSize: 10, pageSize: 10,
}).then(res => { }).then(res => {
if(page.value === 1) { if(page.value === 1) {
images.value = res.data.list images.value = res.list
} else { } else {
images.value.push(...res.data.list) images.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++
@ -58,6 +55,15 @@ function getList() {
}) })
} }
function goPreview(item) {
router.push({
path: '/badge/preview',
query: {
pid: item.sw_pid,
group: item.group_count,
},
})
}
function onLoad() { function onLoad() {
getList() getList()
} }
@ -98,16 +104,42 @@ function goBack() {
width: 100%; width: 100%;
padding-bottom: 100%; padding-bottom: 100%;
position: relative; position: relative;
border-radius: 50%;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
background: #f5f5f5;
border-radius: 12px;
} }
.record-image-item img { .record-image-item img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.record-image-item-shadow {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.5),inset -2px -2px 4px rgba(0, 0, 0, 0.2);
border-radius: 50%;
}
.record-image-item-loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #f5f5f5;
border-radius: 50%;
font-size: 16px;
color: #999;
} }
</style> </style>
Write Preview
Loading…
Cancel
Save