forked from natuka/web.puabadge.com
Linzm
8 months ago
92 changed files with 1199 additions and 9522 deletions
@ -1,7 +1,7 @@
@@ -1,7 +1,7 @@
|
||||
VITE_APP_PREVIEW=true |
||||
# VITE_APP_API_BASE_URL=http://172.16.0.29:28499/ |
||||
VITE_APP_API_BASE_URL=https://web.api.suwa3d.com/ |
||||
VITE_APP_API_WX_URL=https://wechat.api.suwa3d.com/ |
||||
VITE_APP_API_BASE_URL=https://wechat.api.puabadge.com/ |
||||
VITE_APP_API_WX_URL=https://wechat.api.puabadge.com/ |
||||
# http://web.suwa3d.dev:28499/ |
||||
VITE_HTTP_MOCK=true |
||||
WECHAT_AUTH_URL=http://localhost:28499/api/auth/page |
||||
@ -1,5 +1,5 @@
@@ -1,5 +1,5 @@
|
||||
NODE_ENV=production |
||||
VITE_APP_PREVIEW=false |
||||
VITE_APP_API_BASE_URL=https://web.api.suwa3d.com/ |
||||
VITE_APP_API_URL=https://web.api.suwa3d.com/ |
||||
WECHAT_AUTH_URL=https://wechat.api.suwa3d.com/api/auth/page |
||||
VITE_APP_API_BASE_URL=https://wechat.api.puabadge.com/ |
||||
VITE_APP_API_URL=https://wechat.api.puabadge.com/ |
||||
WECHAT_AUTH_URL=https://wechat.api.puabadge.com/api/auth/page |
||||
@ -1,6 +1,6 @@
@@ -1,6 +1,6 @@
|
||||
NODE_ENV=production |
||||
VITE_APP_PREVIEW=false |
||||
VITE_APP_API_BASE_URL=https://web.api.suwa3d.com/ |
||||
VITE_APP_API_URL=https://web.api.suwa3d.com/ |
||||
VITE_APP_API_WX_URL=https://wechat.api.suwa3d.com/ |
||||
WECHAT_AUTH_URL=https://wechat.api.suwa3d.com/api/auth/page |
||||
VITE_APP_API_BASE_URL=https://wechat.api.puabadge.com/ |
||||
VITE_APP_API_URL=https://wechat.api.puabadge.com/ |
||||
VITE_APP_API_WX_URL=https://wechat.api.puabadge.com/ |
||||
WECHAT_AUTH_URL=https://wechat.api.puabadge.com/api/auth/page |
||||
@ -1,32 +0,0 @@
@@ -1,32 +0,0 @@
|
||||
import request from '@/utils/request' |
||||
|
||||
// 参数为 page, size, pid
|
||||
export const page = (params: any) => { |
||||
return request('/printBatchOrder/page', { params, method: 'GET' }) |
||||
} |
||||
|
||||
// 批次详情
|
||||
export const detailPage = (data: any) => { |
||||
return request('/printBatchOrder/detailPage', { data, method: 'POST' }) |
||||
} |
||||
|
||||
// 主要参数为pid
|
||||
export const add = (params: any) => { |
||||
return request('/printBatchOrder/grossWeight', { params, method: 'POST' }) |
||||
} |
||||
|
||||
// 签名
|
||||
export const getPutSignURL = (data: any) => { |
||||
return request('/printBatchOrder/putSignURL', { data, method: 'POST' }) |
||||
} |
||||
|
||||
// oss
|
||||
export const uploadToOss = (putSignUrl: any, file: any) => { |
||||
return request({ |
||||
url: putSignUrl, |
||||
headers: { |
||||
"Content-Type": "application/octet-stream" |
||||
}, |
||||
data: file, method: 'PUT', withCredentials: false, }) |
||||
} |
||||
|
||||
@ -1,12 +0,0 @@
@@ -1,12 +0,0 @@
|
||||
import request from '@/utils/request' |
||||
|
||||
// 参数为 page, size, pid
|
||||
export const page = (params: any) => { |
||||
return request('/myOrder/page', { params, method: 'GET' }) |
||||
} |
||||
|
||||
// 主要参数为pid
|
||||
export const detail = (pid: number) => { |
||||
return request('/myOrder/detail', { params: { pid }, method: 'GET' }) |
||||
} |
||||
|
||||
@ -1,33 +0,0 @@
@@ -1,33 +0,0 @@
|
||||
import request from '@/utils/request' |
||||
import requestWx from '@/utils/requestWx' |
||||
|
||||
export const glb = (id: number, file_type: string,isShare: string, extParams?: any) => { |
||||
return request('model/glb', { |
||||
method: 'GET', |
||||
params: Object.assign({}, { |
||||
file_type, |
||||
s: isShare, |
||||
id, |
||||
type: 1, |
||||
without_head: 1, |
||||
}, extParams), |
||||
}) |
||||
} |
||||
|
||||
export const get3dBgList = (pid: number) => { |
||||
return request('material/bg', { |
||||
method: 'GET', |
||||
params: { |
||||
pid, |
||||
}, |
||||
}) |
||||
} |
||||
|
||||
export const getWechatConfig = (url: string) => { |
||||
return requestWx('wechatConfig/config', { |
||||
method: 'GET', |
||||
data: { |
||||
url: url.split('#')[0], |
||||
}, |
||||
}) |
||||
} |
||||
@ -1,20 +0,0 @@
@@ -1,20 +0,0 @@
|
||||
import request from '@/utils/request' |
||||
|
||||
// 参数为 page, size
|
||||
export const list = (params: any) => { |
||||
return request('/picVideo/list', { params, method: 'GET' }) |
||||
} |
||||
|
||||
// 参数为 id, print_id, from_u
|
||||
export const info = (id: number) => { |
||||
return request('/picVideo/info', { params: { id }, method: 'GET' }) |
||||
} |
||||
|
||||
// 参数为 id, print_id, from_u
|
||||
export const share = (id: number) => { |
||||
return request('/picVideo/share', { params: { id }, method: 'GET' }) |
||||
} |
||||
// 参数为 id, print_id
|
||||
export const downloadUrl = (id: number) => { |
||||
return request('/picVideo/downloadUrl', { params: { id }, method: 'GET' }) |
||||
} |
||||
@ -1,28 +0,0 @@
@@ -1,28 +0,0 @@
|
||||
import request from '@/utils/request' |
||||
|
||||
export const calc = (data: any) => { |
||||
return request('queue/calc', { |
||||
method: 'POST', |
||||
data, |
||||
}) |
||||
} |
||||
|
||||
export const queueAdd = (data: any) => { |
||||
return request('queue/addNew', { |
||||
method: 'POST', |
||||
data, |
||||
}) |
||||
} |
||||
// export const queueAdd = (data: any) => {
|
||||
// return request('queue/add', {
|
||||
// method: 'POST',
|
||||
// data,
|
||||
// })
|
||||
// }
|
||||
|
||||
export const attr = (params: any) => { |
||||
return request('queue/attr', { |
||||
method: 'GET', |
||||
params, |
||||
}) |
||||
} |
||||
@ -1,41 +0,0 @@
@@ -1,41 +0,0 @@
|
||||
import request from '@/utils/request' |
||||
|
||||
// 参数为 shop_id, pid
|
||||
export const list = (params: any) => { |
||||
return request('/receiveAddress/list', { params, method: 'GET' }) |
||||
} |
||||
|
||||
// 参数为 id
|
||||
export const info = (id: number) => { |
||||
return request('/receiveAddress/info', { params: { id }, method: 'GET' }) |
||||
} |
||||
|
||||
// 无参数
|
||||
export const Default = () => { |
||||
return request('/receiveAddress/default', { method: 'GET' }) |
||||
} |
||||
|
||||
// add
|
||||
/** |
||||
* @param data |
||||
* @returns |
||||
*/ |
||||
export const add = (data: any) => { |
||||
return request('/receiveAddress/add', { data, method: 'POST' }) |
||||
} |
||||
/** |
||||
* 修改收货地址 |
||||
* @param data |
||||
* @returns |
||||
*/ |
||||
export const edit = (data: any) => { |
||||
return request('/receiveAddress/update', { data, method: 'POST' }) |
||||
} |
||||
/** |
||||
* 删除收获地址 |
||||
* @param data |
||||
* @returns |
||||
*/ |
||||
export const del = (params: any) => { |
||||
return request('/receiveAddress/delete', { params, method: 'POST' }) |
||||
} |
||||
@ -1,22 +0,0 @@
@@ -1,22 +0,0 @@
|
||||
import request from '@/utils/request' |
||||
|
||||
// 参数为 code
|
||||
export const actions = (code: string) => { |
||||
return request('/shortUrl/actions', { params: { code }, method: 'GET' }) |
||||
} |
||||
|
||||
// 参数为 code, 订单履历
|
||||
export const orderTrack = (code: string) => { |
||||
return request('/shortUrl/orderTrack', { params: { code }, method: 'GET' }) |
||||
} |
||||
|
||||
// 参数为 code, 订单信息
|
||||
export const orderInfo = (code: string) => { |
||||
return request('/shortUrl/orderInfo', { params: { code }, method: 'GET' }) |
||||
} |
||||
|
||||
// 参数为 code, 打印信息
|
||||
export const printOrderInfo = (code: string) => { |
||||
return request('/shortUrl/printOrderInfo', { params: { code }, method: 'GET' }) |
||||
} |
||||
|
||||
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 283 B |
|
Before Width: | Height: | Size: 528 B |
|
Before Width: | Height: | Size: 227 B |
|
Before Width: | Height: | Size: 1011 B |
|
Before Width: | Height: | Size: 155 B |
|
Before Width: | Height: | Size: 648 B |
|
Before Width: | Height: | Size: 436 B |
|
Before Width: | Height: | Size: 217 B |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 527 B |
|
Before Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 308 B |
|
Before Width: | Height: | Size: 431 B |
|
Before Width: | Height: | Size: 259 B |
|
Before Width: | Height: | Size: 524 B |
|
Before Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 737 B |
|
Before Width: | Height: | Size: 428 B |
|
Before Width: | Height: | Size: 412 B |
|
Before Width: | Height: | Size: 372 B |
|
Before Width: | Height: | Size: 500 B |
|
Before Width: | Height: | Size: 655 B |
|
Before Width: | Height: | Size: 443 B |
|
Before Width: | Height: | Size: 196 B |
|
Before Width: | Height: | Size: 381 B |
|
Before Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 4.5 KiB |
@ -1,30 +0,0 @@
@@ -1,30 +0,0 @@
|
||||
// https://router.vuejs.org/zh/
|
||||
import 'nprogress/nprogress.css' |
||||
|
||||
import Address from '@/views/address/index.vue' |
||||
import AddressEdit from '@/views/address/edit.vue' |
||||
// 定义路由，每个路由都需要映射到一个组件
|
||||
const routes = [ |
||||
{ |
||||
path: '/address', |
||||
name: 'address', |
||||
component: Address, |
||||
meta: { |
||||
needGuard: true, |
||||
title: '地址管理', |
||||
}, |
||||
|
||||
}, |
||||
{ |
||||
path: '/address/edit', |
||||
name: 'edit', |
||||
meta: { |
||||
title: "地址编辑" |
||||
}, |
||||
component: AddressEdit, |
||||
} |
||||
] |
||||
|
||||
export function mergeRoutes(allRoutes: any[]) { |
||||
allRoutes.push(...routes) |
||||
} |
||||
@ -1,39 +0,0 @@
@@ -1,39 +0,0 @@
|
||||
// https://router.vuejs.org/zh/
|
||||
import 'nprogress/nprogress.css' |
||||
|
||||
import multiPrint from '@/views/multiPrint/index.vue' |
||||
import multiPrintDetail from '@/views/multiPrint/detail.vue' |
||||
import orderDetail from '@/views/multiPrint/orderDetail.vue' |
||||
// 定义路由，每个路由都需要映射到一个组件
|
||||
const routes = [ |
||||
{ |
||||
path: '/multiPrint', |
||||
name: 'multiPrint', |
||||
component: multiPrint, |
||||
meta: { |
||||
needGuard: true, |
||||
title: '称毛重管理', |
||||
}, |
||||
|
||||
}, |
||||
{ |
||||
path: '/multiPrintDetail', |
||||
name: 'multiPrintDetail', |
||||
meta: { |
||||
title: "称毛重" |
||||
}, |
||||
component: multiPrintDetail, |
||||
}, |
||||
{ |
||||
path: '/orderDetail', |
||||
name: 'orderDetail', |
||||
meta: { |
||||
title: "批次详情" |
||||
}, |
||||
component: orderDetail, |
||||
}, |
||||
] |
||||
|
||||
export function mergeRoutes(allRoutes: any[]) { |
||||
allRoutes.push(...routes) |
||||
} |
||||
@ -1,31 +0,0 @@
@@ -1,31 +0,0 @@
|
||||
// https://router.vuejs.org/zh/
|
||||
import 'nprogress/nprogress.css' |
||||
|
||||
import myOrder from '@/views/my_order/index.vue' |
||||
import OrderDetail from '@/views/my_order/detail.vue' |
||||
// 定义路由，每个路由都需要映射到一个组件
|
||||
const routes = [ |
||||
{ |
||||
path: '/myOrder', |
||||
name: 'myOrder', |
||||
component: myOrder, |
||||
meta: { |
||||
needGuard: true, |
||||
title: '我的订单', |
||||
}, |
||||
|
||||
}, |
||||
{ |
||||
path: '/myOrder/detail', |
||||
name: 'detail', |
||||
meta: { |
||||
needGuard: true, |
||||
title: "订单详情" |
||||
}, |
||||
component: OrderDetail, |
||||
} |
||||
] |
||||
|
||||
export function mergeRoutes(allRoutes: any[]) { |
||||
allRoutes.push(...routes) |
||||
} |
||||
@ -1,42 +0,0 @@
@@ -1,42 +0,0 @@
|
||||
// https://router.vuejs.org/zh/
|
||||
import 'nprogress/nprogress.css' |
||||
|
||||
import Photo3d from '@/views/photo_3d/index.vue' |
||||
import Gsplat from '@/views/photo_3d/gsplat.vue' |
||||
import Ar from '@/views/photo_3d/ar.vue' |
||||
// 定义路由，每个路由都需要映射到一个组件
|
||||
const routes = [ |
||||
{ |
||||
path: '/photo3d', |
||||
name: 'photo3d', |
||||
component: Photo3d, |
||||
meta: { |
||||
needGuard: true, |
||||
title: '3d相册', |
||||
}, |
||||
}, |
||||
{ |
||||
path: '/photo3d/gsplat', |
||||
name: 'gsplat', |
||||
component: Gsplat, |
||||
meta: { |
||||
needGuard: true, |
||||
title: '3d高斯相册', |
||||
}, |
||||
}, |
||||
{ |
||||
path: '/ar', |
||||
name: 'ar', |
||||
component: Ar, |
||||
meta: { |
||||
needGuard: true, |
||||
title: 'ar', |
||||
}, |
||||
|
||||
|
||||
}, |
||||
] |
||||
|
||||
export function mergeRoutes(allRoutes: any[]) { |
||||
allRoutes.push(...routes) |
||||
} |
||||
@ -1,30 +0,0 @@
@@ -1,30 +0,0 @@
|
||||
// https://router.vuejs.org/zh/
|
||||
import 'nprogress/nprogress.css' |
||||
|
||||
import queue from '@/views/queue/index.vue' |
||||
import queueSucceed from '@/views/queue/succeed.vue' |
||||
// 定义路由，每个路由都需要映射到一个组件
|
||||
export const routes = [ |
||||
{ |
||||
path: '/queue', |
||||
name: 'queue', |
||||
component: queue, |
||||
meta: { |
||||
needGuard: true, |
||||
title: '排队', |
||||
}, |
||||
}, |
||||
{ |
||||
path: '/queue/succeed', |
||||
name: 'queue.succeed', |
||||
component: queueSucceed, |
||||
meta: { |
||||
needGuard: true, |
||||
title: '排队成功', |
||||
}, |
||||
}, |
||||
] |
||||
|
||||
export function mergeRoutes(allRoutes: any[]) { |
||||
allRoutes.push(...routes) |
||||
} |
||||
@ -1,50 +0,0 @@
@@ -1,50 +0,0 @@
|
||||
// https://router.vuejs.org/zh/
|
||||
import 'nprogress/nprogress.css' |
||||
|
||||
import actions from '@/views/short_url/actions.vue' |
||||
import orderInfo from '@/views/short_url/orderInfo.vue' |
||||
import orderTrack from '@/views/short_url/orderTrack.vue' |
||||
import printOrderInfo from '@/views/short_url/printOrderInfo.vue' |
||||
// 定义路由，每个路由都需要映射到一个组件
|
||||
const routes = [ |
||||
{ |
||||
path: '/shortUrl/actions', |
||||
name: 'shortUrl.actions', |
||||
component: actions, |
||||
meta: { |
||||
needGuard: true, |
||||
title: '功能', |
||||
}, |
||||
}, |
||||
{ |
||||
path: '/shortUrl/orderInfo', |
||||
name: 'shortUrl.orderInfo', |
||||
component: orderInfo, |
||||
meta: { |
||||
needGuard: true, |
||||
title: '订单信息', |
||||
}, |
||||
}, |
||||
{ |
||||
path: '/shortUrl/orderTrack', |
||||
name: 'shortUrl.orderTrack', |
||||
component: orderTrack, |
||||
meta: { |
||||
needGuard: true, |
||||
title: '订单履历', |
||||
}, |
||||
}, |
||||
{ |
||||
path: '/shortUrl/printOrderInfo', |
||||
name: 'shortUrl.printOrderInfo', |
||||
component: printOrderInfo, |
||||
meta: { |
||||
needGuard: true, |
||||
title: '打印信息', |
||||
}, |
||||
}, |
||||
] |
||||
|
||||
export function mergeRoutes(allRoutes: any[]) { |
||||
allRoutes.push(...routes) |
||||
} |
||||
@ -0,0 +1,17 @@
@@ -0,0 +1,17 @@
|
||||
declare module '*.vue' { |
||||
import type { DefineComponent } from 'vue' |
||||
const component: DefineComponent<{}, {}, any> |
||||
export default component |
||||
} |
||||
|
||||
declare module '@vue/runtime-dom' { |
||||
export * from '@vue/runtime-dom/dist/runtime-dom' |
||||
} |
||||
|
||||
declare module 'vue' { |
||||
export interface GlobalComponents { |
||||
view: any |
||||
image: any |
||||
canvas: any |
||||
} |
||||
} |
||||
@ -1,331 +0,0 @@
@@ -1,331 +0,0 @@
|
||||
<template> |
||||
<van-nav-bar v-if="!isWechat()" :title="store.navTitle" left-text="返回" left-arrow |
||||
@click-left="returnClick" safe-area-inset-top/> |
||||
<div> |
||||
<div class="page"> |
||||
<div class="section"> |
||||
<div class="section-title"> |
||||
<div class="s-title">SUWA3D</div> |
||||
<div class="l-title">关于我们</div> |
||||
</div> |
||||
<div class="description">速相科技成立于2016年，总部在福建厦门<br />目前是全球首家商业化3D人像摄影专业机构<br />产品材料安全环保，细节还原度高<br />旗下的品牌“速哇”为国内首家数字人3D真人手办连锁品牌<br />速哇3D手办亲人、朋友、恋人、宠物的各种美好时刻记录下来</div> |
||||
<div class="info-box"> |
||||
<img src="@/assets/about/mail.png" class="info-icon"/> |
||||
<div class="info-detail"> |
||||
<div class="info-label">邮箱</div> |
||||
<div class="info-value">business@suwa3d.com</div> |
||||
</div> |
||||
</div> |
||||
<div class="info-box" @click="call(1)"> |
||||
<img src="@/assets/about/hands.png" class="info-icon"/> |
||||
<div class="info-detail"> |
||||
<div class="info-label">合作热线</div> |
||||
<div class="info-value">400 6667 215</div> |
||||
</div> |
||||
</div> |
||||
<div class="info-box" @click="call(2)"> |
||||
<img src="@/assets/about/tel.png" class="info-icon"/> |
||||
<div class="info-detail"> |
||||
<div class="info-label">招商电话</div> |
||||
<div class="info-value">18046215201</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="info-box" @click="call(1)"> |
||||
<img src="@/assets/about/hands.png" class="info-icon"/> |
||||
<div class="info-detail"> |
||||
<div class="info-label">合作热线</div> |
||||
<div class="info-value">400 6667 215</div> |
||||
</div> |
||||
</div> |
||||
<div class="info-box" @click="call(2)"> |
||||
<img src="@/assets/about/tel.png" class="info-icon"/> |
||||
<div class="info-detail"> |
||||
<div class="info-label">招商电话</div> |
||||
<div class="info-value">18046215201</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="section"> |
||||
<div class="section-title"> |
||||
<div class="s-title">SUWA3D</div> |
||||
<div class="l-title">全国门店</div> |
||||
</div> |
||||
<img src="@/assets/about/map.png" class="map_img"/> |
||||
<div class="group_6"> |
||||
<div class="shop-count"> |
||||
<div class="under_border"></div> |
||||
<div class="count">49+</div> |
||||
</div> |
||||
<div class="text_25">家门店</div> |
||||
<div class="point"> |
||||
<div class="group_7"></div> |
||||
<div class="group_8"></div> |
||||
</div> |
||||
<div class="text-wrapper_4"> |
||||
<div class="text_26">速哇加盟门店城市</div> |
||||
<div class="text_27">速哇待开业门店</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import {useStore} from '@/stores' |
||||
const store = useStore(); |
||||
import { useTokenStore } from '@/stores/token' |
||||
const tokenStore = useTokenStore(); |
||||
const userInfo = ref("") |
||||
|
||||
const {isWechat} = tokenStore; |
||||
|
||||
onMounted(()=> { |
||||
userInfo.value = tokenStore.userInfo; |
||||
}) |
||||
const returnClick = () => history.back() |
||||
const call = (num: number) => { |
||||
const a = document.createElement("a"); |
||||
let phoneNum = "" |
||||
switch(num) { |
||||
case 1: phoneNum = "4006667215";break; |
||||
case 2: phoneNum = "18046215201";break; |
||||
} |
||||
a.href = "tel:" + phoneNum; |
||||
a.click(); |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.page { |
||||
background-color: rgba(255, 255, 255, 1.000000); |
||||
position: relative; |
||||
width: 375px; |
||||
height: 100vh; |
||||
overflow: scroll; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
|
||||
.section { |
||||
width: 375px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
margin-bottom: 50px; |
||||
.section-title { |
||||
width: 157px; |
||||
height: 40px; |
||||
flex-direction: row; |
||||
display: flex; |
||||
margin: 25px auto 0 auto; |
||||
.s-title { |
||||
overflow-wrap: break-word; |
||||
font-size: 36px; |
||||
font-family: Source Han Sans CN-Heavy; |
||||
font-weight: 900; |
||||
text-align: center; |
||||
white-space: nowrap; |
||||
line-height: 36px; |
||||
webkit-background-clip: text; |
||||
webkit-text-fill-color: transparent; |
||||
color: mintcream; |
||||
} |
||||
|
||||
.l-title { |
||||
overflow-wrap: break-word; |
||||
color: rgba(61, 61, 61, 1.000000); |
||||
font-size: 24px; |
||||
font-family: Source Han Sans CN-Bold; |
||||
font-weight: 700; |
||||
text-align: center; |
||||
white-space: nowrap; |
||||
line-height: 24px; |
||||
margin: 16px 30px 0 -126px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.description { |
||||
width: 345px; |
||||
height: 108px; |
||||
overflow-wrap: break-word; |
||||
color: rgba(102, 102, 102, 1.000000); |
||||
font-size: 12px; |
||||
font-family: Source Han Sans CN-Regular; |
||||
font-weight: normal; |
||||
text-align: center; |
||||
line-height: 18px; |
||||
margin: 30px auto 15px auto; |
||||
} |
||||
|
||||
.info-box { |
||||
width: 205px; |
||||
height: 54px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin: 30px auto 0 auto; |
||||
.info-icon { |
||||
width: 54px; |
||||
height: 54px; |
||||
} |
||||
.info-detail { |
||||
width: 131px; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-around; |
||||
.info-label { |
||||
overflow-wrap: break-word; |
||||
color: rgba(51, 51, 51, 1.000000); |
||||
font-size: 16px; |
||||
font-family: Source Han Sans CN-Medium; |
||||
font-weight: 500; |
||||
white-space: nowrap; |
||||
line-height: 16px; |
||||
} |
||||
.info-value { |
||||
overflow-wrap: break-word; |
||||
color: rgba(153, 153, 153, 1.000000); |
||||
font-size: 12px; |
||||
font-family: Source Han Sans CN-Regular; |
||||
font-weight: normal; |
||||
white-space: nowrap; |
||||
line-height: 12px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.text-group_7 { |
||||
width: 157px; |
||||
height: 40px; |
||||
flex-direction: row; |
||||
display: flex; |
||||
margin: 50px 0 31px 109px; |
||||
} |
||||
|
||||
.map_img { |
||||
width: 345px; |
||||
height: 283px; |
||||
margin: 50px auto 0 auto; |
||||
} |
||||
|
||||
.group_6 { |
||||
width: 305px; |
||||
height: 44px; |
||||
flex-direction: row; |
||||
display: flex; |
||||
margin: 30px auto; |
||||
} |
||||
|
||||
.shop-count { |
||||
position: relative; |
||||
width: 73px; |
||||
height: 44px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.under_border { |
||||
display: flex; |
||||
flex-direction: column; |
||||
background-image: linear-gradient(90deg, rgba(85, 176, 56, 0.000000) 0, rgba(108, 217, 73, 1.000000) 100.000000%); |
||||
width: 73px; |
||||
height: 16px; |
||||
margin-top: 28px; |
||||
} |
||||
|
||||
.count { |
||||
position: absolute; |
||||
left: 0px; |
||||
top: 0px; |
||||
width: 73px; |
||||
height: 36px; |
||||
overflow-wrap: break-word; |
||||
color: rgba(51, 51, 51, 1.000000); |
||||
font-size: 40px; |
||||
font-family: Source Han Sans CN-Heavy; |
||||
font-weight: 900; |
||||
text-align: left; |
||||
white-space: nowrap; |
||||
line-height: 36px; |
||||
} |
||||
|
||||
.text_25 { |
||||
width: 48px; |
||||
height: 16px; |
||||
overflow-wrap: break-word; |
||||
color: rgba(51, 51, 51, 1.000000); |
||||
font-size: 16px; |
||||
font-family: Source Han Sans CN-Heavy; |
||||
font-weight: 900; |
||||
text-align: center; |
||||
white-space: nowrap; |
||||
line-height: 16px; |
||||
margin: 18px 0 0 5px; |
||||
} |
||||
|
||||
.point { |
||||
width: 8px; |
||||
height: 38px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
margin: 3px 0 0 49px; |
||||
} |
||||
|
||||
.group_7 { |
||||
background-color: rgba(85, 176, 56, 1.000000); |
||||
border-radius: 100%; |
||||
width: 8px; |
||||
height: 8px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.group_8 { |
||||
background-color: rgba(255, 94, 94, 1.000000); |
||||
border-radius: 100%; |
||||
width: 8px; |
||||
height: 8px; |
||||
margin-top: 22px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.text-wrapper_4 { |
||||
width: 112px; |
||||
height: 44px; |
||||
margin-left: 10px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.text_26 { |
||||
width: 112px; |
||||
height: 14px; |
||||
overflow-wrap: break-word; |
||||
color: rgba(61, 61, 61, 1.000000); |
||||
font-size: 14px; |
||||
font-family: Source Han Sans CN-Regular; |
||||
font-weight: normal; |
||||
text-align: left; |
||||
white-space: nowrap; |
||||
line-height: 14px; |
||||
} |
||||
|
||||
.text_27 { |
||||
width: 83px; |
||||
height: 14px; |
||||
overflow-wrap: break-word; |
||||
color: rgba(61, 61, 61, 1.000000); |
||||
font-size: 14px; |
||||
font-family: Source Han Sans CN-Regular; |
||||
font-weight: normal; |
||||
text-align: left; |
||||
white-space: nowrap; |
||||
line-height: 14px; |
||||
margin-top: 16px; |
||||
} |
||||
</style> |
||||
@ -1,13 +0,0 @@
@@ -1,13 +0,0 @@
|
||||
<template> |
||||
<div> |
||||
|
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
|
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -1,349 +0,0 @@
@@ -1,349 +0,0 @@
|
||||
<template> |
||||
<div> |
||||
<!-- 收件信息页 --> |
||||
<div class="container"> |
||||
<!-- <mp-dialog |
||||
show="{{ dialogShow }}" |
||||
bindbuttontap="tapDialogButton" |
||||
buttons="{{ buttons }}"> |
||||
<div> |
||||
<div class="calcelTitle"> |
||||
确定要删除地址？ |
||||
</div> |
||||
</div> |
||||
</mp-dialog> --> |
||||
<van-dialog message="确定要删除地址？" v-model:show="dialogShow" |
||||
@confirm="tapDialogButton" showCancelButton confirm-button-color="#AAAAAA" |
||||
cancel-button-color="#009944" round /> |
||||
<div class="main"> |
||||
<block v-if="address_list[0]"> |
||||
<div class="top"> |
||||
<div class="controller" @click="controlEdit" >{{ currentIndex == false ? '管理' : '完成'}}</div> |
||||
</div> |
||||
<div class="content"> |
||||
<block v-for="item, index in address_list" :key="index"> |
||||
<div class="item" @click="onSelect" data-item="{{item}}"> |
||||
<div class="item_wrap"> |
||||
<div class="info"> |
||||
<div class="detail"> |
||||
<div class="user">{{item.receive_contact}}</div> |
||||
<div class="phoneNumber">{{item.receive_mobile}}</div> |
||||
<div class="status" v-if="item.is_default == 1">默认</div> |
||||
<div class="shop_status" v-if="item.shop_id > 0">门店</div> |
||||
</div> |
||||
<div class="address">{{item.province_name}} {{item.city_name}} {{item.county_name}} {{item.receive_address}}</div> |
||||
</div> |
||||
<div class="edit_box {{!editShow ? 'floatRight' : ''}}"> |
||||
<van-checkbox |
||||
v-if="!select && !editShow" |
||||
icon-size="25px" |
||||
value="{{ addressId == item.id }}" |
||||
checked-color="#009944" |
||||
></van-checkbox> |
||||
<van-icon v-if="editShow" name="edit" size="25" @click.stop="editClick(item.id)"/> |
||||
<van-icon v-if="editShow" name="cross" size="25" @click.stop="deleteClick(item.shop_id, item.id)"/> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
</block> |
||||
</div> |
||||
</block> |
||||
<div class="empty" v-else> |
||||
<div class="text">您还没有收件地址，快添加一个吧~</div> |
||||
</div> |
||||
</div> |
||||
<router-link class="add_btn" to="/address/edit"> |
||||
<div class="add_btn">添加收件地址</div> |
||||
</router-link> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
const router = useRouter() |
||||
const currentIndex = ref(false) // 编辑地址 |
||||
const isCover = ref(false) // 防抖 |
||||
const editShow= ref(false) // 编辑栏展开 |
||||
const baseInfo = ref("") // 本地存储baseInfo |
||||
const address_list = ref("") // 地址列表 |
||||
const addressId = ref(0) // 地址id |
||||
const select = ref(false) // 选择 |
||||
const dialogShow = ref(false) // 确认框开关 |
||||
const current_id = ref(0) // 删除的门店id |
||||
const shop_id = ref(0) // 当前的门店id |
||||
|
||||
onMounted(()=> { |
||||
// this.setData({ |
||||
// addressId: options.id, |
||||
// shop_id: options.shopid, |
||||
// pid: options.pid, |
||||
// select: options.select |
||||
// }) |
||||
getAddress(); |
||||
}) |
||||
|
||||
// 编辑地址 |
||||
const controlEdit = () => { |
||||
currentIndex.value = !currentIndex.value; |
||||
editShow.value = !editShow.value; |
||||
} |
||||
// 删除确认 |
||||
const tapDialogButton = () => { |
||||
deleteConfirm(); |
||||
dialogShow.value = false |
||||
} |
||||
// 修改地址信息 |
||||
const editClick = (id) => { |
||||
router.push({ |
||||
path: '/packageAddress/pages/address/edit/edit?id=' + id, |
||||
}) |
||||
} |
||||
// 删除点击 |
||||
const deleteClick = (sid, id) => { |
||||
addressId.value = id; |
||||
current_id.value = sid; |
||||
dialogShow.value = true; |
||||
} |
||||
// 确定删除 |
||||
const deleteConfirm = () => { |
||||
// let id = this.data.addressId; |
||||
// const u = wx.getStorageSync('userInfo'); |
||||
// let params = { |
||||
// id: id, |
||||
// open_id: u.openid, |
||||
// union_id: u.unionid, |
||||
// } |
||||
// if(this.data.current_id > 0) { |
||||
// setTimeout(()=> { |
||||
// wx.showToast({ |
||||
// title: "门店地址不可删除", |
||||
// icon: "error" |
||||
// }) |
||||
// }, 500) |
||||
// return false |
||||
// } |
||||
// app.api.deleteAddress(params).then(res=>{ |
||||
// console.log(res) |
||||
// if(res.code == 1000) { |
||||
// this.setData({ |
||||
// isCover: true |
||||
// }) |
||||
// setTimeout(()=> { |
||||
// this.setData({ |
||||
// isCover: false |
||||
// }) |
||||
// }, 2000) |
||||
// wx.showToast({ |
||||
// icon: 'none', |
||||
// title: res.message |
||||
// }); |
||||
// setTimeout(()=> { |
||||
// this.getAddress(); |
||||
// }, 200) |
||||
// } |
||||
// }) |
||||
} |
||||
// 获取所有收件信息 |
||||
const getAddress = () => { |
||||
// let _this = this; |
||||
// const u = wx.getStorageSync('userInfo'); |
||||
// let obj = { |
||||
// shop_id: this.data.shop_id, |
||||
// pid: this.data.pid, |
||||
// open_id: u.openid, |
||||
// union_id: u.unionid, |
||||
// } |
||||
// app.api.addressList(obj).then(res=> { |
||||
// console.log(res) |
||||
// if(res.code == 1000) { |
||||
// let address_list = res.data; |
||||
// _this.setData({ |
||||
// address_list |
||||
// }) |
||||
// }else { |
||||
// wx.showToast({ |
||||
// icon: 'none', |
||||
// title: res.message |
||||
// }); |
||||
// } |
||||
// }) |
||||
} |
||||
const onSelect = (e) => { |
||||
if(editShow.value || select.value) { |
||||
return false |
||||
} |
||||
// const data = e.currentTarget.dataset.item; |
||||
// const prevPage = getCurrentPages()[getCurrentPages().length - 2]; |
||||
// prevPage.setData({ |
||||
// id: data.id, |
||||
// receive_contact: data.receive_contact, |
||||
// receive_mobile: data.receive_mobile, |
||||
// receive_address: data.receive_address, |
||||
// city_name: data.city_name, |
||||
// county_name: data.county_name, |
||||
// province_name: data.province_name, |
||||
// shop_id: data.shop_id, |
||||
// }); |
||||
// wx.navigateBack() |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.container { |
||||
// background: #f7f7f7; |
||||
height: 100vh; |
||||
background: #f8f8f8; |
||||
.main { |
||||
width: 100%; |
||||
.top { |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
align-items: center; |
||||
width: 90%; |
||||
height: 30px; |
||||
margin: 0 auto; |
||||
.controller { |
||||
font-size: 15px; |
||||
color: #009944; |
||||
} |
||||
} |
||||
.content { |
||||
width: 100%; |
||||
height: 100%; |
||||
.item { |
||||
width: 100%; |
||||
height: 62.5px; |
||||
background: #ffffff; |
||||
border: 1px solid #d8d8d8; |
||||
.item_wrap { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
width: 328px; |
||||
height: 100%; |
||||
margin: 0 auto; |
||||
.info { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: flex-start; |
||||
font-size: 12px; |
||||
max-width: 250px; |
||||
height: 100%; |
||||
box-sizing: border-box; |
||||
|
||||
.detail { |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
align-items: center; |
||||
margin-bottom: 7.5px; |
||||
.user { |
||||
font-size: 15px; |
||||
color: #333333; |
||||
margin-right: 7.5px; |
||||
max-width: 125px; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
} |
||||
.phoneNumber { |
||||
color: #6c6c6c; |
||||
margin-right: 7.5px; |
||||
} |
||||
.status { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 35px; |
||||
height: 15px; |
||||
border-radius: 7.5px; |
||||
background: #ce80ff; |
||||
color: #ffffff; |
||||
font-size: 12px; |
||||
} |
||||
.shop_status { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: relative; |
||||
width: auto; |
||||
height: 18px; |
||||
border-radius: 8px; |
||||
background: #e6a23c; |
||||
color: #ffffff; |
||||
font-size: 10px; |
||||
font-weight: 400; |
||||
padding: 0 7.5px; |
||||
} |
||||
} |
||||
.address { |
||||
color: #333333; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
word-break: break-all; |
||||
-webkit-line-clamp: 3; |
||||
-webkit-box-orient: vertical; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
display: -webkit-box; |
||||
} |
||||
} |
||||
.edit_box { |
||||
width: 60px; |
||||
height: 100%; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
.edit { |
||||
width: 16px; |
||||
height: 20px; |
||||
} |
||||
.delete { |
||||
width: 16.5px; |
||||
height: 19px; |
||||
} |
||||
} |
||||
.floatRight { |
||||
justify-content: flex-end; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.empty { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
align-items: center; |
||||
width: 100%; |
||||
// height: 100vh; |
||||
padding: 75px 0; |
||||
// background: #f8f8f8; |
||||
.icon { |
||||
width: 58.5px; |
||||
height: 55.5px; |
||||
} |
||||
.text { |
||||
font-size: 13px; |
||||
color: #999999; |
||||
margin-top: 7.5px; |
||||
} |
||||
} |
||||
} |
||||
.add_btn { |
||||
position: fixed; |
||||
bottom: 5%; |
||||
left: 50%; |
||||
margin: -18.5px 0 0 -146.5px; |
||||
background: #009944; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 293px; |
||||
height: 37px; |
||||
color: #ffffff; |
||||
font-size: 15px; |
||||
border-radius: 20px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,267 +1,329 @@
@@ -1,267 +1,329 @@
|
||||
<template name="cropper"> |
||||
<view> |
||||
<image :src="imgSrc.imgSrc" class="my-avatar" mode="aspectFill" @click="fSelect" :style="imgStyle"></image> |
||||
<!-- 上传图片 --> |
||||
<canvas canvas-id="avatar-canvas" id="avatar-canvas" class="my-canvas" :style="{top: styleTop, height: cvsStyleHeight}" |
||||
disable-scroll="false"></canvas> |
||||
<!-- 截取边框 --> |
||||
<canvas canvas-id="oper-canvas" id="oper-canvas" class="oper-canvas" :style="{top: styleTop, height: cvsStyleHeight}" |
||||
disable-scroll="false" @touchstart="fStart" @touchmove="fMove" @touchend="fEnd"></canvas> |
||||
<view class="oper-wrapper" :style="{display: styleDisplay}"> |
||||
<view class="btn-wrapper" v-if="showOper"> |
||||
<view @click="fClose" hover-class="hover">取消</view> |
||||
<view @click="fUpload" hover-class="hover">选取</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
<script lang="ts"> |
||||
import { defineComponent } from '@vue/runtime-dom' |
||||
import type { PropType } from '@vue/runtime-dom' |
||||
|
||||
interface Style { |
||||
width?: string |
||||
height?: string |
||||
top?: string |
||||
left?: string |
||||
[key: string]: any |
||||
} |
||||
|
||||
const tabHeight = 70 |
||||
export default defineComponent({ |
||||
name: 'Cropper', |
||||
props: { |
||||
avatarSrc: { |
||||
type: String as PropType<string>, |
||||
default: '', |
||||
}, |
||||
avatarStyle: { |
||||
type: String as PropType<string>, |
||||
default: '', |
||||
}, |
||||
selWidth: { |
||||
type: String as PropType<string>, |
||||
default: '', |
||||
}, |
||||
selHeight: { |
||||
type: String as PropType<string>, |
||||
default: '', |
||||
}, |
||||
expWidth: { |
||||
type: String as PropType<string>, |
||||
default: '', |
||||
}, |
||||
expHeight: { |
||||
type: String as PropType<string>, |
||||
default: '', |
||||
}, |
||||
minScale: { |
||||
type: String as PropType<string>, |
||||
default: '', |
||||
}, |
||||
maxScale: { |
||||
type: String as PropType<string>, |
||||
default: '', |
||||
}, |
||||
canScale: { |
||||
type: String as PropType<string>, |
||||
default: '', |
||||
}, |
||||
noTab: { |
||||
type: String as PropType<string>, |
||||
default: '', |
||||
}, |
||||
quality: { |
||||
type: String as PropType<string>, |
||||
default: '', |
||||
}, |
||||
index: { |
||||
type: String as PropType<string>, |
||||
default: '', |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
cvsStyleHeight: '0px', |
||||
styleDisplay: 'none', |
||||
styleTop: '-10000px', |
||||
prvTop: '-10000px', |
||||
imgStyle: {} as Style, |
||||
selStyle: {} as Style, |
||||
showOper: true, |
||||
imgSrc: { |
||||
imgSrc: '', |
||||
}, |
||||
qlty: 0.9, |
||||
postWidthFirst: {}, |
||||
} |
||||
}, |
||||
watch: { |
||||
avatarSrc() { |
||||
this.imgSrc.imgSrc = this.avatarSrc |
||||
}, |
||||
}, |
||||
created() { |
||||
const canvas = document.getElementById('avatar-canvas') |
||||
const operCanvas = document.getElementById('oper-canvas') |
||||
this.ctxCanvas = canvas.getContext('2d') |
||||
this.ctxCanvasOper = operCanvas.getContext('2d') |
||||
|
||||
<script> |
||||
const tabHeight = 70; |
||||
export default { |
||||
name: "cropper", |
||||
data() { |
||||
return { |
||||
cvsStyleHeight: '0px', |
||||
styleDisplay: 'none', |
||||
styleTop: '-10000px', |
||||
prvTop: '-10000px', |
||||
imgStyle: {}, |
||||
selStyle: {}, |
||||
showOper: true, |
||||
imgSrc: { |
||||
imgSrc: '' |
||||
}, |
||||
qlty: 0.9, |
||||
postWidthFirst: {}, |
||||
}; |
||||
}, |
||||
watch: { |
||||
avatarSrc() { |
||||
this.imgSrc.imgSrc = this.avatarSrc; |
||||
} |
||||
}, |
||||
props: { |
||||
avatarSrc: '', |
||||
avatarStyle: '', |
||||
selWidth: '', |
||||
selHeight: '', |
||||
expWidth: '', |
||||
expHeight: '', |
||||
minScale: '', |
||||
maxScale: '', |
||||
canScale: '', |
||||
noTab: '', |
||||
quality: '', |
||||
index: '' |
||||
}, |
||||
created() { |
||||
const canvas = document.getElementById('avatar-canvas'); |
||||
const operCanvas = document.getElementById('oper-canvas'); |
||||
this.ctxCanvas = canvas.getContext('2d'); |
||||
this.ctxCanvasOper = operCanvas.getContext('2d'); |
||||
this.qlty = parseInt(this.quality) || 0.9 |
||||
this.imgSrc.imgSrc = this.avatarSrc |
||||
this.letScale = this.canScale === 'false' ? 0 : 1 |
||||
this.indx = this.index || undefined |
||||
this.mnScale = this.minScale || 0.3 |
||||
this.mxScale = this.maxScale || 4 |
||||
this.noBar = this.noTab === 'true' ? 1 : 0 |
||||
if (this.noBar) { |
||||
this.moreHeight = 0 |
||||
this.fWindowResize() |
||||
} else { |
||||
this.moreHeight = 50 |
||||
this.fWindowResize() |
||||
} |
||||
}, |
||||
methods: { |
||||
fWindowResize() { |
||||
const sysInfo = { |
||||
platform: navigator.platform, |
||||
pixelRatio: window.devicePixelRatio, |
||||
windowWidth: window.innerWidth, |
||||
windowHeight: window.innerHeight, |
||||
windowTop: window.scrollY, |
||||
windowBottom: 0, |
||||
statusBarHeight: 0, |
||||
screenHeight: screen.height, |
||||
} |
||||
|
||||
this.qlty = parseInt(this.quality) || 0.9; |
||||
this.imgSrc.imgSrc = this.avatarSrc; |
||||
this.letScale = this.canScale === 'false' ? 0 : 1; |
||||
this.indx = this.index || undefined; |
||||
this.mnScale = this.minScale || 0.3; |
||||
this.mxScale = this.maxScale || 4; |
||||
this.noBar = this.noTab === 'true' ? 1 : 0; |
||||
if (this.noBar) { |
||||
this.moreHeight = 0; |
||||
this.fWindowResize(); |
||||
} else { |
||||
this.moreHeight = 50; |
||||
this.fWindowResize(); |
||||
} |
||||
}, |
||||
methods: { |
||||
fWindowResize() { |
||||
const sysInfo = { |
||||
platform: navigator.platform, |
||||
pixelRatio: window.devicePixelRatio, |
||||
windowWidth: window.innerWidth, |
||||
windowHeight: window.innerHeight, |
||||
windowTop: window.scrollY, |
||||
windowBottom: 0, |
||||
statusBarHeight: 0, |
||||
screenHeight: screen.height |
||||
}; |
||||
this.platform = sysInfo.platform |
||||
this.pixelRatio = sysInfo.pixelRatio |
||||
this.windowWidth = sysInfo.windowWidth |
||||
this.drawTop = sysInfo.windowTop |
||||
this.windowHeight = sysInfo.windowHeight + sysInfo.windowBottom |
||||
this.cvsStyleHeight = `${this.windowHeight - tabHeight}px` |
||||
|
||||
this.platform = sysInfo.platform; |
||||
this.pixelRatio = sysInfo.pixelRatio; |
||||
this.windowWidth = sysInfo.windowWidth; |
||||
this.drawTop = sysInfo.windowTop; |
||||
this.windowHeight = sysInfo.windowHeight + sysInfo.windowBottom; |
||||
this.cvsStyleHeight = this.windowHeight - tabHeight + 'px'; |
||||
this.pxRatio = this.windowWidth / 750 |
||||
|
||||
this.pxRatio = this.windowWidth / 750; |
||||
const style = this.avatarStyle |
||||
console.log(style) |
||||
this.imgStyle = style |
||||
this.expWidth && (this.exportWidth = this.expWidth.includes('rpx') |
||||
? parseInt(this.expWidth) * this.pxRatio |
||||
: parseInt(this.expWidth)) |
||||
this.expHeight && (this.exportHeight = this.expHeight.includes('rpx') |
||||
? parseInt(this.expHeight) * this.pxRatio |
||||
: parseInt(this.expHeight)) |
||||
|
||||
let style = this.avatarStyle; |
||||
console.log(style) |
||||
this.imgStyle = style; |
||||
this.expWidth && (this.exportWidth = this.expWidth.indexOf('rpx') >= 0 ? parseInt(this.expWidth) * this.pxRatio : |
||||
parseInt(this.expWidth)); |
||||
this.expHeight && (this.exportHeight = this.expHeight.indexOf('rpx') >= 0 ? parseInt(this.expHeight) * this.pxRatio : |
||||
parseInt(this.expHeight)); |
||||
if (this.styleDisplay === 'flex') |
||||
this.fDrawInit(true) |
||||
|
||||
if (this.styleDisplay === 'flex') { |
||||
this.fDrawInit(true); |
||||
} |
||||
this.fHideImg(); |
||||
}, |
||||
fSelect() { |
||||
if (this.fSelecting) return; |
||||
this.fSelecting = true; |
||||
setTimeout(() => { |
||||
this.fSelecting = false; |
||||
}, 500); |
||||
this.fHideImg() |
||||
}, |
||||
fSelect() { |
||||
if (this.fSelecting) |
||||
return |
||||
this.fSelecting = true |
||||
setTimeout(() => { |
||||
this.fSelecting = false |
||||
}, 500) |
||||
|
||||
const input = document.createElement('input'); |
||||
input.type = 'file'; |
||||
input.accept = 'image/*'; |
||||
input.onchange = (e) => { |
||||
const file = e.target.files[0]; |
||||
if(!file) return; |
||||
const input = document.createElement('input') |
||||
input.type = 'file' |
||||
input.accept = 'image/*' |
||||
input.onchange = (e) => { |
||||
const file = e.target.files[0] |
||||
if (!file) |
||||
return |
||||
|
||||
const reader = new FileReader(); |
||||
reader.onload = (e) => { |
||||
const path = e.target.result; |
||||
this.imgPath = path; |
||||
const reader = new FileReader() |
||||
reader.onload = (e) => { |
||||
const path = e.target.result |
||||
this.imgPath = path |
||||
|
||||
const img = new Image(); |
||||
img.onload = () => { |
||||
this.imgWidth = img.width; |
||||
this.imgHeight = img.height; |
||||
this.path = path; |
||||
const img = new Image() |
||||
img.onload = () => { |
||||
this.imgWidth = img.width |
||||
this.imgHeight = img.height |
||||
this.path = path |
||||
|
||||
if (!this.hasSel) { |
||||
let style = this.selStyle || {}; |
||||
if (this.selWidth && this.selHeight) { |
||||
let selWidth = this.selWidth.indexOf('rpx') >= 0 ? parseInt(this.selWidth) * this.pxRatio : |
||||
parseInt(this.selWidth), |
||||
selHeight = this.selHeight.indexOf('rpx') >= 0 ? parseInt(this.selHeight) * this.pxRatio : |
||||
parseInt(this.selHeight); |
||||
style.width = parseInt(selWidth); |
||||
style.height = parseInt(selHeight); |
||||
style.top = parseInt((this.windowHeight - style.height - tabHeight) / 2); |
||||
style.left = parseInt((this.windowWidth - style.width) / 2); |
||||
} else { |
||||
alert('裁剪框的宽或高没有设置'); |
||||
return; |
||||
} |
||||
this.selStyle = style; |
||||
} |
||||
if (!this.hasSel) { |
||||
const style = this.selStyle || {} |
||||
if (this.selWidth && this.selHeight) { |
||||
const selWidth = this.selWidth.includes('rpx') |
||||
? parseInt(this.selWidth) * this.pxRatio |
||||
: parseInt(this.selWidth) |
||||
const selHeight = this.selHeight.includes('rpx') |
||||
? parseInt(this.selHeight) * this.pxRatio |
||||
: parseInt(this.selHeight) |
||||
style.width = `${parseInt(selWidth)}px` |
||||
style.height = `${parseInt(selHeight)}px` |
||||
style.top = `${parseInt((this.windowHeight - parseInt(style.height) - tabHeight) / 2)}px` |
||||
style.left = `${parseInt((this.windowWidth - parseInt(style.width)) / 2)}px` |
||||
} else { |
||||
alert('裁剪框的宽或高没有设置') |
||||
return |
||||
} |
||||
this.selStyle = style |
||||
} |
||||
|
||||
this.fDrawInit(true); |
||||
}; |
||||
img.src = path; |
||||
}; |
||||
reader.readAsDataURL(file); |
||||
}; |
||||
input.click(); |
||||
}, |
||||
fUpload() { |
||||
if (this.fUploading) return; |
||||
this.fUploading = true; |
||||
setTimeout(() => { |
||||
this.fUploading = false; |
||||
}, 1000); |
||||
this.fDrawInit(true) |
||||
} |
||||
img.src = path |
||||
} |
||||
reader.readAsDataURL(file) |
||||
} |
||||
input.click() |
||||
}, |
||||
fUpload() { |
||||
if (this.fUploading) |
||||
return |
||||
this.fUploading = true |
||||
setTimeout(() => { |
||||
this.fUploading = false |
||||
}, 1000) |
||||
|
||||
let style = this.selStyle, |
||||
x = parseInt(style.left), |
||||
y = parseInt(style.top), |
||||
width = parseInt(style.width), |
||||
height = parseInt(style.height), |
||||
expWidth = this.exportWidth || width, |
||||
expHeight = this.exportHeight || height; |
||||
const style = this.selStyle |
||||
let x = parseInt(style.left) |
||||
let y = parseInt(style.top) |
||||
const width = parseInt(style.width) |
||||
const height = parseInt(style.height) |
||||
let expWidth = this.exportWidth || width |
||||
let expHeight = this.exportHeight || height |
||||
|
||||
x *= this.pixelRatio; |
||||
y *= this.pixelRatio; |
||||
expWidth = width; |
||||
expHeight = height; |
||||
x *= this.pixelRatio |
||||
y *= this.pixelRatio |
||||
expWidth = width |
||||
expHeight = height |
||||
|
||||
this.styleDisplay = 'none'; |
||||
this.styleTop = '-10000px'; |
||||
this.hasSel = false; |
||||
this.fHideImg(); |
||||
this.styleDisplay = 'none' |
||||
this.styleTop = '-10000px' |
||||
this.hasSel = false |
||||
this.fHideImg() |
||||
|
||||
const canvas = document.createElement('canvas'); |
||||
canvas.width = width; |
||||
canvas.height = height; |
||||
const ctx = canvas.getContext('2d'); |
||||
ctx.drawImage(this.ctxCanvas.canvas, x, y, width, height, 0, 0, expWidth, expHeight); |
||||
const canvas = document.createElement('canvas') |
||||
canvas.width = width |
||||
canvas.height = height |
||||
const ctx = canvas.getContext('2d') |
||||
ctx.drawImage(this.ctxCanvas.canvas, x, y, width, height, 0, 0, expWidth, expHeight) |
||||
|
||||
canvas.toBlob((blob) => { |
||||
const url = URL.createObjectURL(blob); |
||||
this.$emit("upload", { |
||||
avatar: this.imgSrc, |
||||
path: url, |
||||
index: this.indx |
||||
}); |
||||
}, 'image/png', this.qlty); |
||||
}, |
||||
// ... 其他方法保持不变 |
||||
} |
||||
} |
||||
canvas.toBlob((blob) => { |
||||
const url = URL.createObjectURL(blob) |
||||
this.$emit('upload', { |
||||
avatar: this.imgSrc, |
||||
path: url, |
||||
index: this.indx, |
||||
}) |
||||
}, 'image/png', this.qlty) |
||||
}, |
||||
// ... 其他方法保持不变 |
||||
}, |
||||
}) |
||||
</script> |
||||
|
||||
<template name="cropper"> |
||||
<view> |
||||
<image :src="imgSrc.imgSrc" class="my-avatar" mode="aspectFill" :style="imgStyle" @click="fSelect" /> |
||||
<!-- 上传图片 --> |
||||
<canvas |
||||
id="avatar-canvas" canvas-id="avatar-canvas" class="my-canvas" :style="{ top: styleTop, height: cvsStyleHeight }" |
||||
disable-scroll="false" |
||||
/> |
||||
<!-- 截取边框 --> |
||||
<canvas |
||||
id="oper-canvas" canvas-id="oper-canvas" class="oper-canvas" :style="{ top: styleTop, height: cvsStyleHeight }" |
||||
disable-scroll="false" @touchstart="fStart" @touchmove="fMove" @touchend="fEnd" |
||||
/> |
||||
<view class="oper-wrapper" :style="{ display: styleDisplay }"> |
||||
<view v-if="showOper" class="btn-wrapper"> |
||||
<view hover-class="hover" @click="fClose"> |
||||
取消 |
||||
</view> |
||||
<view hover-class="hover" @click="fUpload"> |
||||
选取 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<style lang="less"> |
||||
.my-canvas { |
||||
display: flex; |
||||
position: fixed !important; |
||||
background: #000000; |
||||
left: 0; |
||||
z-index: 100; |
||||
width: 100%; |
||||
} |
||||
.my-canvas { |
||||
display: flex; |
||||
position: fixed !important; |
||||
background: #000000; |
||||
left: 0; |
||||
z-index: 100; |
||||
width: 100%; |
||||
} |
||||
|
||||
.my-avatar { |
||||
width: 100vw; |
||||
height: 100vw; |
||||
} |
||||
.my-avatar { |
||||
width: 100vw; |
||||
height: 100vw; |
||||
} |
||||
|
||||
.oper-canvas { |
||||
display: flex; |
||||
position: fixed !important; |
||||
left: 0; |
||||
z-index: 101; |
||||
width: 100%; |
||||
} |
||||
.oper-canvas { |
||||
display: flex; |
||||
position: fixed !important; |
||||
left: 0; |
||||
z-index: 101; |
||||
width: 100%; |
||||
} |
||||
|
||||
.oper-wrapper { |
||||
height: 71px; |
||||
position: fixed !important; |
||||
box-sizing: border-box; |
||||
width: 100%; |
||||
left: 0; |
||||
bottom: 0; |
||||
z-index: 200; |
||||
flex-direction: row; |
||||
} |
||||
.oper-wrapper { |
||||
height: 71px; |
||||
position: fixed !important; |
||||
box-sizing: border-box; |
||||
width: 100%; |
||||
left: 0; |
||||
bottom: 0; |
||||
z-index: 200; |
||||
flex-direction: row; |
||||
} |
||||
|
||||
.btn-wrapper { |
||||
background-color: #000000; |
||||
color: #ffffff; |
||||
display: flex; |
||||
height: 100%; |
||||
width: 100%; |
||||
justify-content: space-around; |
||||
align-items: center |
||||
} |
||||
.btn-wrapper { |
||||
background-color: #000000; |
||||
color: #ffffff; |
||||
display: flex; |
||||
height: 100%; |
||||
width: 100%; |
||||
justify-content: space-around; |
||||
align-items: center; |
||||
} |
||||
|
||||
.btn-wrapper view { |
||||
width: 160rpx; |
||||
height: 80rpx; |
||||
line-height: 80rpx; |
||||
text-align: center; |
||||
font-size: 16px; |
||||
color: #ffffff; |
||||
z-index: 300; |
||||
} |
||||
.btn-wrapper view { |
||||
width: 160rpx; |
||||
height: 80rpx; |
||||
line-height: 80rpx; |
||||
text-align: center; |
||||
font-size: 16px; |
||||
color: #ffffff; |
||||
z-index: 300; |
||||
} |
||||
|
||||
.hover { |
||||
color: #f1f1f1; |
||||
} |
||||
.hover { |
||||
color: #f1f1f1; |
||||
} |
||||
</style> |
||||
@ -1,75 +0,0 @@
@@ -1,75 +0,0 @@
|
||||
<template> |
||||
<div> |
||||
<div class="page"> |
||||
<div class="section_2"> |
||||
<div class="group_26"> |
||||
<div class="image-text_35" v-if="symbol == 2"> |
||||
<image src="/static/images/order/shunfeng.png" class="icon_1"></image> |
||||
<text lines="1" class="text-group_1">顺丰快递</text> |
||||
</div> |
||||
<div class="image-text_35" v-else> |
||||
<image src="/static/images/order/jingdong.png" class="icon_1"></image> |
||||
<text lines="1" class="text-group_1">京东快递</text> |
||||
</div> |
||||
<text lines="1" class="text_1">orderInfo.delivery_no</text> |
||||
<div @click="copyOrderId" data-text="{{orderInfo.delivery_no}}" class="button_1_copy">复制</div> |
||||
<!-- <div class="icon_5"> |
||||
<image src="/static/images/order/tel.png" class="icon_6"></image> |
||||
</div> --> |
||||
</div> |
||||
<div class="list_7" v-if="routerInfo.length > 0"> |
||||
|
||||
<!-- acceptAddress: "深圳市" |
||||
acceptTime: "2023-04-03 19:39:40" |
||||
opCode: "50" |
||||
remark: "顺丰速运 已收取快件" --> |
||||
|
||||
|
||||
|
||||
|
||||
<div class="image-text_11-0" v-for="value, key in routerInfo" :key="value.delivery_id"> |
||||
|
||||
<div v-if="key==0"> |
||||
<image class="gou_1" src="/static/images/order/gou_1.png"></image> |
||||
|
||||
<div class="image_4-0" style="width:0rpx;border:1px solid #55B038;height:95%"></div> |
||||
|
||||
<div class="text-group_51-1"> |
||||
<text lines="1" class="text_23-1">{{value.remark}}</text> |
||||
<text lines="1" decode="true" class="text_24-1">{{value.acceptTime}}</text> |
||||
</div> |
||||
</div> |
||||
|
||||
<div v-else> |
||||
<image class="yuan_gou" src="/static/images/order/gray_yuan.png"></image> |
||||
<div class="image_4-0" style="width:0rpx;border:1px solid #DCDEE0;height:95%"></div> |
||||
|
||||
<div class="text-group_51-1"> |
||||
<text lines="1" class="text_23-1">{{value.remark}}</text> |
||||
<text lines="1" decode="true" class="text_24-1">{{value.acceptTime}}</text> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- <div class="image-text_11-1" v-for="{{routerInfo}}" v-key="delivery_id" v-for-index="key" v-for-item="value"> |
||||
|
||||
<image v-if="{{key == 0}}" src="/static/images/order/gou.png" class="thumbnail_3-1" style="width: 96rpx;height: 0rpx;opacity: 1;border: 4rpx solid #55B038;"></image> |
||||
<image src="/static/images/order/line.png" class="thumbnail_3-1"></image> |
||||
|
||||
<div class="text-group_51-1"> |
||||
<text lines="1" class="text_23-1">{{value.remark}}</text> |
||||
<text lines="1" decode="true" class="text_24-1">{{value.acceptTime}}</text> |
||||
</div> |
||||
</div> --> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
|
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -1,173 +0,0 @@
@@ -1,173 +0,0 @@
|
||||
<template> |
||||
<div class="page"> |
||||
<div class="page_wrap"> |
||||
<div class="content"> |
||||
<van-cell-group inset border> |
||||
<van-cell title="批次号" :value="id" /> |
||||
<van-cell title="机器编号" :value="machine_id" /> |
||||
<van-cell title="模型数量" :value="model_count" /> |
||||
<van-cell title="批次详情" :value="order_count" is-link :to="{ name: 'orderDetail', query: { id: id } }" /> |
||||
</van-cell-group> |
||||
|
||||
<van-cell-group style="margin-top: 10px;" inset border> |
||||
<van-cell class="diy_cell" title="模型称重照片" label="需将模型和重量均拍入照片"> |
||||
<van-uploader style="margin-top: 10px;" v-model="fileList" :after-read="beforeUpload" /> |
||||
</van-cell> |
||||
<van-cell class="diy_cell" title="模型总重(克)"> |
||||
<van-field placeholder="请输入" v-model="total_weight"> |
||||
<template #button>g</template> |
||||
</van-field> |
||||
</van-cell> |
||||
</van-cell-group> |
||||
<div class="confirm-btn" @click="submitData">确认</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { useRoute, useRouter } from 'vue-router' |
||||
import dayjs from 'dayjs' |
||||
const route = useRoute(); |
||||
const router = useRouter() |
||||
import { showSuccessToast, showToast } from "vant"; |
||||
const id = route.query.id as string | number; |
||||
const machine_id = route.query.machine_id as string | number; |
||||
const model_count = route.query.model_count as string | number; |
||||
const order_count = route.query.order_count as string | number; |
||||
import * as api from '@/api/multiPrint' |
||||
const fileList = ref([ |
||||
]); |
||||
|
||||
const total_weight = ref('') |
||||
const imgList = ref() |
||||
|
||||
// 图片添加时间水印 |
||||
function addWatermarkToImage(file, timestamp) { |
||||
return new Promise((resolve, reject) => { |
||||
const img = new Image(); |
||||
const reader = new FileReader(); |
||||
|
||||
reader.onload = function(e) { |
||||
img.onload = function() { |
||||
const canvas = document.createElement('canvas'); |
||||
const ctx = canvas.getContext('2d'); |
||||
const width = img.width; |
||||
const height = img.height; |
||||
|
||||
canvas.width = width; |
||||
canvas.height = height; |
||||
|
||||
// 将原始图片绘制到 Canvas 上 |
||||
ctx.drawImage(img, 0, 0, width, height); |
||||
|
||||
// 添加水印文本 |
||||
ctx.font = '80px Arial'; |
||||
ctx.fillStyle = '#ff0000'; |
||||
ctx.textAlign = 'center'; |
||||
ctx.textBaseline = 'top'; // 垂直方向顶部对齐 |
||||
|
||||
// 添加水印文本 |
||||
ctx.fillText(timestamp, width / 2, 100); // 在指定位置绘制文字 |
||||
|
||||
// 获取带水印的新图片数据 |
||||
canvas.toBlob((blob) => { |
||||
// 创建新的文件 |
||||
const newFile = new File([blob], file.name, { |
||||
type: file.type, |
||||
}); |
||||
resolve(newFile); |
||||
}, file.type); // 使用原始文件类型 |
||||
}; |
||||
img.src = e.target.result; |
||||
}; |
||||
reader.readAsDataURL(file); |
||||
}); |
||||
} |
||||
|
||||
const beforeUpload = async () => { |
||||
try { |
||||
let file = fileList.value[0].file; |
||||
console.log("beforeUpload",fileList) |
||||
var timestamp = "时间:" + dayjs().format("YYYY-MM-DD HH:mm:ss"); |
||||
let data = { |
||||
keyName: file.name, |
||||
} |
||||
let fileData = await addWatermarkToImage(file, timestamp) |
||||
console.log("addWatermarkToImage", fileData) |
||||
api.getPutSignURL(data).then(res => { |
||||
imgList.value = res.signedURL |
||||
api.uploadToOss(res.signedURL, fileData) |
||||
}).catch(err=>{ |
||||
showToast('提交失败' + err.message) |
||||
}) |
||||
}catch(err) { |
||||
} |
||||
} |
||||
|
||||
const submitData = () => { |
||||
console.log("submitData",imgList.value) |
||||
if(imgList.value == '' && total_weight.value == '') { |
||||
return |
||||
} |
||||
|
||||
let params = { |
||||
id: id, |
||||
model_weight_photo: imgList.value, |
||||
total_weight: total_weight.value |
||||
} |
||||
api.add({...params}).then((res: any) => { |
||||
showSuccessToast('提交成功, 请稍后在检查') |
||||
router.back() |
||||
}).catch((err: Error) => { |
||||
showToast('提交失败' + err.message) |
||||
}) |
||||
} |
||||
|
||||
</script> |
||||
|
||||
<style scoped> |
||||
.page { |
||||
width: 100%; |
||||
height: 100vh; |
||||
display: flex; |
||||
flex-direction: column; |
||||
background-color: #F3F3F3; |
||||
padding-top: 10px; |
||||
.page_wrap { |
||||
position: relative; |
||||
width: 90%; |
||||
height: 100%; |
||||
margin: 0px auto; |
||||
.content { |
||||
position: relative; |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
margin-top: 10px; |
||||
.diy_cell { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
} |
||||
.confirm-btn { |
||||
width: 100%; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
text-align: center; |
||||
background-color: #4281E3; |
||||
color: #FFFFFF; |
||||
border-radius: 10px; |
||||
margin-top: 20px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
:deep(.van-cell-group--inset) { |
||||
margin: 0; |
||||
} |
||||
:deep(.van-cell::after){ |
||||
transform: scaleY(1.5); |
||||
} |
||||
</style> |
||||
@ -1,273 +0,0 @@
@@ -1,273 +0,0 @@
|
||||
<template> |
||||
<div> |
||||
<div class="page"> |
||||
<div class="page_wrap"> |
||||
<van-search |
||||
v-model="keyWord" |
||||
background="#F3F3F3" |
||||
shape="round" |
||||
clearable |
||||
@search="onSearch" |
||||
@clear="getPage" |
||||
input-align="center" |
||||
placeholder="机器编号" |
||||
/> |
||||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh"> |
||||
<van-list |
||||
v-model:loading="loading" v-model:error="error" :error-text="'请求失败，点击重新加载'" :finished-text="'没有更多了'" |
||||
:finished="finished" @load="onLoad" |
||||
> |
||||
<div class="content"> |
||||
<div class="content_wrap"> |
||||
<div class="content_item" v-for="item, index in list" :key="index"> |
||||
<div class="left"> |
||||
<div class="content_item_title">机器编号{{item.machine_id}} |
||||
<van-tag style="margin-left: 10px;" :type="getProgressStatusType(item.process_status)"> |
||||
{{ renderProgressStatus(item) }} |
||||
</van-tag> |
||||
</div> |
||||
<div class="content_item_info"> |
||||
<div class="time">提交打印时间: <span>{{ item.print_time }}</span></div> |
||||
<div class="count">模型数量: <span>{{ item.model_count }}</span></div> |
||||
<div class="reason" v-if="showReason(item)">原因: <span> |
||||
{{item.message}} |
||||
</span></div> |
||||
</div> |
||||
</div> |
||||
<div class="right"> |
||||
<div class="icon_item" @click="goDetail(item)"> |
||||
<img class="icon" :src="weight" alt=""> |
||||
<div class="icon_text">称毛重</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</van-list> |
||||
</van-pull-refresh> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import * as api from '@/api/multiPrint' |
||||
import { useRoute, useRouter } from 'vue-router' |
||||
const router = useRouter(); |
||||
import weight from '@/assets/common/weight.png'; |
||||
const keyWord = ref('') |
||||
const loading = ref(false) |
||||
const error = ref(false) |
||||
const finished = ref(false) |
||||
const refreshing = ref(false) |
||||
let currentPage = ref(1) |
||||
let currentSize = ref(20) |
||||
|
||||
const list = ref([]) |
||||
const onLoad = () => { |
||||
if (refreshing.value) { |
||||
currentPage.value = 1; |
||||
list.value = []; |
||||
refreshing.value = false; |
||||
} |
||||
|
||||
getPage() |
||||
}; |
||||
|
||||
const onRefresh = () => { |
||||
// 清空列表数据 |
||||
finished.value = false; |
||||
|
||||
loading.value = true; |
||||
onLoad(); |
||||
}; |
||||
|
||||
const onSearch = () => { |
||||
currentPage.value = 1; |
||||
list.value = []; |
||||
getPage() |
||||
} |
||||
|
||||
// 查看详情 |
||||
const goDetail = (val: any) => { |
||||
console.log("goDetail",val) |
||||
|
||||
router.push({ |
||||
path: '/multiPrintDetail', |
||||
query: { |
||||
id: val.id, |
||||
machine_id: val.machine_id, |
||||
model_count: val.model_count, |
||||
order_count: val.order_count, |
||||
} |
||||
}) |
||||
} |
||||
|
||||
function getPage() { |
||||
api.page({ |
||||
page: currentPage.value, |
||||
keyWord: keyWord.value, |
||||
size: currentSize.value |
||||
}).then(res => { |
||||
console.log("getPage",res) |
||||
let data = res.list || []; |
||||
list.value = list.value.concat(data) |
||||
if(data.length < currentSize.value) { |
||||
finished.value = true; |
||||
} |
||||
currentPage.value++ |
||||
loading.value = false |
||||
}).catch(() => { |
||||
error.value = true |
||||
loading.value = false |
||||
}) |
||||
} |
||||
|
||||
function renderProgressStatus(item: any) { |
||||
switch (item.process_status) { |
||||
case 0: |
||||
return '待处理' |
||||
case 1: |
||||
return `处理中(${item.process_count}/${item.model_count})` |
||||
case 2: |
||||
return '处理完成' |
||||
default: |
||||
return '处理失败' |
||||
} |
||||
} |
||||
|
||||
function getProgressStatusType(progressStatus) { |
||||
switch (progressStatus) { |
||||
case 0: |
||||
return 'default' |
||||
case 1: |
||||
return 'warning' |
||||
case 2: |
||||
return 'success' |
||||
case 3: |
||||
return 'danger' |
||||
default: |
||||
return 'danger' |
||||
} |
||||
} |
||||
|
||||
function showReason(item) { |
||||
return item.process_status == 3; |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.page { |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
background-color: #F3F3F3; |
||||
padding-top: 10px; |
||||
.page_wrap { |
||||
position: relative; |
||||
width: 90%; |
||||
height: 100%; |
||||
margin: 0px auto; |
||||
.content { |
||||
position: relative; |
||||
width: 100%; |
||||
height: 93vh; |
||||
margin: 10px 0; |
||||
.content_wrap { |
||||
display: flex; |
||||
flex-direction: column; |
||||
position: relative; |
||||
.content_item { |
||||
position: relative; |
||||
width: 100%; |
||||
// min-height: 100px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
background-color: #FFFFFF; |
||||
border-radius: 10px; |
||||
padding: 10px; |
||||
box-sizing: border-box; |
||||
margin-bottom: 10px; |
||||
.left { |
||||
position: relative; |
||||
width: 75%; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
.content_item_title { |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 16px; |
||||
font-weight: bold; |
||||
color: #333333; |
||||
} |
||||
.content_item_info { |
||||
display: flex; |
||||
flex-direction: column; |
||||
margin-top: 10px; |
||||
.time { |
||||
font-size: 14px; |
||||
color: #666666; |
||||
} |
||||
.count { |
||||
font-size: 14px; |
||||
color: #666666; |
||||
span { |
||||
font-weight: bold; |
||||
color: #000; |
||||
} |
||||
} |
||||
.reason { |
||||
font-size: 14px; |
||||
color: #ec4444; |
||||
} |
||||
} |
||||
} |
||||
.right { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: relative; |
||||
width: 25%; |
||||
|
||||
.icon_item { |
||||
width: 60px; |
||||
height: 60px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.icon { |
||||
width: 20px; |
||||
height: 20px; |
||||
} |
||||
.icon_text { |
||||
font-size: 12px; |
||||
color: #1296db; |
||||
margin-top: 5px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
:deep(.van-search) { |
||||
padding: 0; |
||||
background: #ffffff!important; |
||||
border-radius: 30px; |
||||
} |
||||
:deep(.van-search__content) { |
||||
background: #ffffff!important; |
||||
} |
||||
.van-pull-refresh { |
||||
height: calc(95vh) !important; /* 计算高度(减去的高度自己调) */ |
||||
overflow: auto !important; /* 滚动自适应 */ |
||||
} |
||||
|
||||
.van-list { |
||||
height: auto !important; /* 列表高度自适应 */ |
||||
} |
||||
</style> |
||||
@ -1,189 +0,0 @@
@@ -1,189 +0,0 @@
|
||||
<template> |
||||
<div> |
||||
<div class="page"> |
||||
<div class="page_wrap"> |
||||
<van-search |
||||
v-model="keyWord" |
||||
background="#F3F3F3" |
||||
shape="round" |
||||
clearable |
||||
@search="onSearch" |
||||
@clear="getOrderList" |
||||
input-align="center" |
||||
placeholder="请输入订单号搜索" |
||||
/> |
||||
<van-list |
||||
v-model:loading="loading" v-model:error="error" :error-text="'请求失败，点击重新加载'" :finished-text="'没有更多了'" |
||||
:finished="finished" @load="onLoad" |
||||
> |
||||
<div class="content"> |
||||
<div class="content_wrap"> |
||||
<div class="order_item" v-for="item, index in orderList" :key="index"> |
||||
<div class="order_img"> |
||||
<img :src="imgSrc(item.texture_cover_img)" > |
||||
</div> |
||||
<div class="order_info"> |
||||
<div class="order_id">{{ item.pid }}</div> |
||||
<div class="order_size" > |
||||
<span v-for="el , elIndex in filterSize(item.model_size)" :key="elIndex"> |
||||
{{ el }} |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</van-list> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import * as api from '@/api/multiPrint' |
||||
import { useRoute } from 'vue-router' |
||||
import { onMounted } from 'vue'; |
||||
const route = useRoute(); |
||||
import {imgSrc} from "@/utils/utils" |
||||
const id = route.query.id as string | number; |
||||
const keyWord = ref('') |
||||
const loading = ref(false) |
||||
const error = ref(false) |
||||
const finished = ref(false) |
||||
const refreshing = ref(false) |
||||
let currentPage = ref(1) |
||||
let totalCount = ref(0) |
||||
const orderList = ref([]) |
||||
// const test = ref('18cm_x2___15cm_x3___20cm_x1') |
||||
|
||||
onMounted(() => { |
||||
|
||||
}) |
||||
|
||||
const onLoad = () => { |
||||
if (refreshing.value) { |
||||
currentPage.value = 1; |
||||
orderList.value = []; |
||||
refreshing.value = false; |
||||
} |
||||
|
||||
getOrderList(currentPage.value) |
||||
loading.value = false; |
||||
|
||||
if (orderList.value.length >= totalCount.value) { |
||||
finished.value = true; |
||||
} |
||||
}; |
||||
|
||||
const filterSize = (input: any) => { |
||||
const items = input.split("___"); |
||||
|
||||
const result = items.map(item => { |
||||
const match = item.match(/(\d+)cm_x(\d+)/); |
||||
if (match) { |
||||
return `${match[1]}cm*${match[2]}`; |
||||
} else { |
||||
return item; |
||||
} |
||||
}); |
||||
return result; |
||||
} |
||||
|
||||
|
||||
const getOrderList = (page: any) => { |
||||
api.detailPage({print_batch_id: id, keyWord: keyWord.value, page: page || 1}).then(res => { |
||||
console.log(res) |
||||
orderList.value = [...orderList.value, ...res.list] |
||||
totalCount.value = res.total |
||||
loading.value = false |
||||
}).catch(err => { |
||||
console.log(err) |
||||
loading.value = false |
||||
}) |
||||
} |
||||
|
||||
const onSearch = () => { |
||||
currentPage.value = 1 |
||||
getOrderList(currentPage.value) |
||||
} |
||||
|
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.page { |
||||
width: 100%; |
||||
height: 100vh; |
||||
display: flex; |
||||
flex-direction: column; |
||||
background-color: #F3F3F3; |
||||
padding-top: 10px; |
||||
.page_wrap { |
||||
position: relative; |
||||
width: 90%; |
||||
height: 100%; |
||||
margin: 0px auto; |
||||
.content { |
||||
position: relative; |
||||
width: 100%; |
||||
height: 93vh; |
||||
overflow: scroll; |
||||
margin: 10px 0; |
||||
.content_wrap { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
flex-wrap: wrap; |
||||
.order_item { |
||||
display: flex; |
||||
flex-direction: column; |
||||
position: relative; |
||||
width: 48%; |
||||
min-height: 154px; |
||||
background-color: #fff; |
||||
border-radius: 10px; |
||||
margin-bottom: 10px; |
||||
overflow: hidden; |
||||
.order_img { |
||||
position: relative; |
||||
width: 163px; |
||||
height: 122px; |
||||
overflow: hidden; |
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
object-fit: cover; |
||||
} |
||||
} |
||||
.order_info { |
||||
display: flex; |
||||
position: relative; |
||||
width: 90%; |
||||
margin: 0 auto; |
||||
font-size: 12px; |
||||
font-weight: bold; |
||||
color: #333; |
||||
padding-top: 10px; |
||||
.order_id { |
||||
width: 100%; |
||||
} |
||||
.order_size { |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
flex-wrap: wrap; |
||||
width: 100%; |
||||
|
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
:deep(.van-search) { |
||||
padding: 0; |
||||
background: #ffffff!important; |
||||
border-radius: 30px; |
||||
} |
||||
:deep(.van-search__content) { |
||||
background: #ffffff!important; |
||||
} |
||||
</style> |
||||
@ -1,768 +0,0 @@
@@ -1,768 +0,0 @@
|
||||
<script lang="tsx" setup> |
||||
import useClipboard from 'vue-clipboard3' |
||||
const { toClipboard } = useClipboard() |
||||
const router = useRouter() |
||||
import { orderStatus } from '@/utils/utils' |
||||
import { closeToast, showFailToast, showSuccessToast, showToast } from 'vant'; |
||||
import * as myOrderApi from '@/api/my_order' |
||||
import { useStore } from '@/stores' |
||||
const store = useStore(); |
||||
import { useTokenStore } from '@/stores/token' |
||||
const tokenStore = useTokenStore(); |
||||
|
||||
const {isWechat} = tokenStore; |
||||
|
||||
const orderInfo = ref({}) |
||||
const orderList = ref("") |
||||
const orderId = ref("") |
||||
const title = ref("") |
||||
const pid = ref("") |
||||
const userInfo = ref({}) |
||||
const nums = ref(0) |
||||
const orderDetailInfo = ref({}) |
||||
const dialogShow = ref(false) |
||||
const dialogShow2 = ref(false) |
||||
const actionShow = ref(false) |
||||
const actions = ref([ |
||||
{ |
||||
name: '删除订单'.$t, |
||||
}, |
||||
]) |
||||
|
||||
onMounted(()=> { |
||||
userInfo.value = tokenStore.userInfo; |
||||
orderInfo.value = store.orderInfo; |
||||
console.log("orderInfo.value", orderInfo.value) |
||||
getOrderInfo(orderInfo.value.pid); |
||||
}) |
||||
const returnClick = () => history.back(); |
||||
// 更多点击 |
||||
const moreClick = () => { |
||||
actionShow.value = !actionShow.value |
||||
} |
||||
|
||||
// 删除点击 |
||||
const onSelect = (e) => { |
||||
if(e.detail.name) { |
||||
dialogShow.value = true |
||||
} |
||||
} |
||||
const higher = computed(()=> { |
||||
return isWechat() ? 'higher' : ''; |
||||
}); |
||||
|
||||
// 删除确认 |
||||
const tapDialogButton = (e) => { |
||||
// const u = wx.getStorageSync('userInfo'); |
||||
let params = { |
||||
pid: orderInfo.value.pid, |
||||
// unionid: u.unionid |
||||
} |
||||
// 状态判断 |
||||
let status = orderInfo.value.status |
||||
let digital_order_id = orderInfo.value.digital_order_id; |
||||
let order_id = orderInfo.value.order_id; |
||||
let experience_status = orderInfo.value.remaining_experience.status; |
||||
let buyType = 0; |
||||
let undone_status = 0; |
||||
if(digital_order_id != order_id && digital_order_id && order_id) { |
||||
buyType = 1; // 相册和手办都购买 |
||||
if(status != 9000) { |
||||
undone_status = 1; |
||||
} |
||||
}else if(digital_order_id == order_id) { |
||||
buyType = 2; // 只购买相册 |
||||
if(status < 7011) { |
||||
undone_status = 1; |
||||
} |
||||
}else if(digital_order_id == 0 && order_id !=0) { |
||||
buyType = 3; // 只购买手办 |
||||
if(status != 9000) { |
||||
undone_status = 1; |
||||
} |
||||
}else if(experience_status == 1 && status < 4100) { |
||||
buyType = 4; // 免费体验3d相册中 |
||||
if(status < 4100) { |
||||
undone_status = 1; |
||||
} |
||||
} |
||||
if(undone_status!=0) { |
||||
dialogShow.value = false; |
||||
// dialogShow3.value = true; |
||||
return |
||||
} |
||||
// app.api.deleteOrder(params).then((res)=> { |
||||
// if(res.code == 1000) { |
||||
// showToast("删除成功".$t) |
||||
// setTimeout(()=> { |
||||
// router.push({ |
||||
// path: "/myOrder", |
||||
// }) |
||||
// }, 2000) |
||||
// dialogShow.value = false; |
||||
// }else if(res.code == -1) { |
||||
// showFailToast(res.message) |
||||
// } |
||||
// }).catch((err)=> { |
||||
// title.value = err; |
||||
// dialogShow.value = false; |
||||
// dialogShow2.value = true; |
||||
// }) |
||||
closeToast(); |
||||
|
||||
} |
||||
|
||||
const tapDialogButton2 = () => { |
||||
dialogShow2.value = false |
||||
contact(); |
||||
} |
||||
|
||||
const onClose = () => { |
||||
actionShow.value = false |
||||
} |
||||
|
||||
//获取订单的详情信息 |
||||
const getOrderInfo = (pid) => { |
||||
if (pid) { |
||||
myOrderApi.detail(pid).then((res:any)=> { |
||||
let data = res; |
||||
data.forEach(element=> { |
||||
let arr = element.model_size.split(" ") |
||||
let obj = []; |
||||
arr.forEach(item => { |
||||
let index = item.lastIndexOf("*"); |
||||
let num = item.substring(index+1, item.length) |
||||
let size = item.substring(0, index) |
||||
obj.push({size,num}) |
||||
}); |
||||
element.filterSize = obj |
||||
}) |
||||
orderList.value = data; |
||||
}) |
||||
// data = Object.assign(data, obj) |
||||
} |
||||
} |
||||
|
||||
// 复制 |
||||
const copyOrderId = () => { |
||||
copy(orderInfo.value.pid.toString()) |
||||
} |
||||
|
||||
// 使用插件 |
||||
const copy = async (msg) => { |
||||
try { |
||||
// 复制 |
||||
console.log("msg", msg) |
||||
await toClipboard(msg) |
||||
showSuccessToast("复制成功".$t) |
||||
// 复制成功 |
||||
} catch (e) { |
||||
// 复制失败 |
||||
showFailToast("复制失败".$t) |
||||
} |
||||
} |
||||
const callShow = ref(false); |
||||
const callClick = () => { |
||||
callShow.value = true; |
||||
} |
||||
|
||||
const contact = () => { |
||||
const a = document.createElement("a"); |
||||
a.href = "tel:" + orderInfo.value.shop_tel |
||||
a.click(); |
||||
callShow.value = false; |
||||
} |
||||
|
||||
// 跳转至3D相册 |
||||
// toAlbum(e) { |
||||
// //获取用户的信息 |
||||
// const u = wx.getStorageSync('userInfo'); |
||||
// var pid = this.data.orderInfo.pid; |
||||
// var oid = this.data.orderInfo.order_id; |
||||
// var cn = this.data.orderInfo.customer_name; |
||||
// var cid = this.data.orderInfo.customer_id; |
||||
// var createTime = this.data.orderInfo.create_time; |
||||
// var status = this.data.orderInfo.status; |
||||
// var remainingExperienceStatus = this.data.orderInfo.remaining_experience.status; |
||||
// var expireTime = this.data.orderInfo.remaining_experience.day; |
||||
// var digitalOrderId = this.data.orderInfo.digital_order_id; |
||||
// var digitalType = this.data.orderInfo.digital_type; |
||||
// var titleCode = this.data.orderInfo.remaining_experience.title_code; |
||||
// //判断createTime时间是否在2023-04-15 00:00:00 之后 |
||||
// wx.request({ |
||||
// url: config.url + '/miniProgram/judgeP3dLogOrderTime', |
||||
// data: { photoTime: createTime, pid }, |
||||
// header: { 'content-type': 'application/json' }, |
||||
// success: (res) => { |
||||
// if(res.data.data.use_status!=1){ |
||||
// wx.showToast({ |
||||
// title: '该订单不支持3D相册，需重新拍照', |
||||
// icon: 'none', |
||||
// duration: 2000 |
||||
// }) |
||||
// return |
||||
// } |
||||
// const url = `/package3D/pages/3d/3d?openid=${u.openid}` |
||||
// + `&unionid=${u.unionid}&id=${pid}&oid=${oid}` |
||||
// + `&cn=${cn}&cid=${cid}&expireTime=${expireTime}` |
||||
// + `&digitalType=${digitalType}` |
||||
// + `&status=${status}` |
||||
// + `&titleCode=${titleCode}` |
||||
// + `&remainingExperienceStatus=${remainingExperienceStatus}`; |
||||
// //判断是否有购买3D相册 |
||||
// if (digitalOrderId == 0) { |
||||
// wx.navigateTo({ |
||||
// url: url |
||||
// }); |
||||
// return |
||||
// } |
||||
|
||||
// if(remainingExperienceStatus == 1) { |
||||
// if(status < 4100){ |
||||
// wx.showToast({ |
||||
// title: '3D相册制作中', |
||||
// icon: 'none', |
||||
// duration: 2000 |
||||
// }) |
||||
// return |
||||
// } |
||||
// wx.navigateTo({ |
||||
// url: url, |
||||
// }); |
||||
// } |
||||
// wx.navigateTo({ |
||||
// // 跳转到webview页面 |
||||
// // url: `/pages/webview/webview?nav=${navtitle}&url=${encodeURIComponent(url)}`, |
||||
// url: url, |
||||
// }); |
||||
// } |
||||
// }) |
||||
|
||||
// }, |
||||
|
||||
//前往物流界面 |
||||
const turnToDelivery = () => { |
||||
if(orderInfo.value.delivery_no) { |
||||
// wx.navigateTo({ |
||||
// url: '/pages/delivery/delivery', |
||||
// success: function (res) { |
||||
// res.eventChannel.emit("orderInfo", that.data.orderInfo) |
||||
// } |
||||
// }) |
||||
}else { |
||||
showToast("暂无快递信息".$t) |
||||
} |
||||
|
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<van-dialog :title="'确认删除订单？'.$t" :message="'删除的订单将无法恢复'.$t" v-model:show="dialogShow" :confirmButtonText="'确认删除'.$t" |
||||
:cancelButtonText="'我再想想'.$t" @confirm="tapDialogButton" showCancelButton confirm-button-color="#AAAAAA" |
||||
cancel-button-color="#009944" round /> |
||||
<van-dialog :title="'门店电话'.$t" :message="'确定拨打门店电话吗？'.$t" v-model:show="callShow" :confirmButtonText="'确定'.$t" :cancelButtonText="'取消'.$t" |
||||
@confirm="contact" showCancelButton confirm-button-color="#AAAAAA" cancel-button-color="#009944" round /> |
||||
<van-dialog :title="title" v-model:show="dialogShow2" :confirmButtonText="'联系门店'.$t" :cancelButtonText="'我再想想'.$t" |
||||
@confirm="tapDialogButton2" showCancelButton confirm-button-color="#AAAAAA" cancel-button-color="#009944" round /> |
||||
<!-- <van-dialog :title="'订单处于未完结状态'.$t，无法删除" v-model:show="dialogShow3" :confirmButtonText="'我已知晓'.$t" @confirm="tapDialogButton3" |
||||
confirm-button-color="#009944" round /> --> |
||||
<van-action-sheet round v-model:show="actionShow" :actions="actions" @close="onClose" @select="onSelect" @cancel="onClose" |
||||
:cancel-text="'取消'.$t" /> |
||||
<van-nav-bar v-if="!isWechat()" :title="store.navTitle" :left-text="'返回'.$t" left-arrow |
||||
@click-left="returnClick" safe-area-inset-top/> |
||||
<div class="page"> |
||||
<div :class="['container', higher]"> |
||||
<div class="order_info"> |
||||
<div class="text-wrapper_43"> |
||||
<div class="order-info"> |
||||
<div class="text_31">{{ '订单信息'.$t }}</div> |
||||
<img src="@/assets/order/more.png" mode="widthFix" class="more" @click="moreClick"/> |
||||
</div> |
||||
</div> |
||||
<div class="text-wrapper_45"> |
||||
<div class="order-id"> |
||||
<div class="text_39">{{'订单ID'.$t}}</div> |
||||
<div class="text_40">{{orderInfo.pid}}</div> |
||||
</div> |
||||
<div @click="copyOrderId()" class="button_2">{{ '复制'.$t }}</div> |
||||
</div> |
||||
<div class="text-wrapper_44"> |
||||
<div class="text_39">{{ '拍摄门店'.$t }}</div> |
||||
<div class="text_40">{{orderInfo.shop_name}}</div> |
||||
</div> |
||||
<div class="text-wrapper_44"> |
||||
<div class="text_39">{{ '拍摄时间'.$t }}</div> |
||||
<div decode="true" class="text_40">{{orderInfo.takephoto_time}}</div> |
||||
</div> |
||||
|
||||
<!-- 分割线 --> |
||||
<div class="line"></div> |
||||
|
||||
<div class="group_13" @click="callClick"> |
||||
<div class="image-text_12"> |
||||
<div class="icon_2"> |
||||
<img class="icon_4" src="@/assets/order/tel.png" /> |
||||
</div> |
||||
<div class="text-order_record">{{ '联系门店'.$t }}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="order_record"> |
||||
|
||||
<!-- 订单明细数据 --> |
||||
<div class="section_2"> |
||||
<div class="order-title"> |
||||
<div class="title">{{ '订单记录'.$t }}</div> |
||||
</div> |
||||
<block v-for="item, index in orderList" :key="index"> |
||||
<div class="order-box"> |
||||
<div class="order-top"> |
||||
<div class="header-text"> |
||||
<div lines="1" class="order-name" v-if="item.digital_type == 0">{{ '手办'.$t }}</div> |
||||
<div lines="1" class="order-name" v-else-if="item.digital_type == 4">{{'体验3D相册'.$t}}</div> |
||||
<div lines="1" class="order-name" v-else-if="item.digital_type == 1">{{'3D相册'.$t}}</div> |
||||
<div class="order-status" v-if="item.print_type == 2 && item.digital_type == 0">{{ '重打'.$t }}</div> |
||||
<div class="order-status" v-else-if="item.print_type == 3 && item.digital_type == 0">{{ '加打'.$t }}</div> |
||||
</div> |
||||
<div class="text_13">{{item.create_time}}</div> |
||||
</div> |
||||
|
||||
<!-- 遍历数组 --> |
||||
<div class="" v-if="item.digital_type == 0"> |
||||
<div class="text-wrapper_37" v-for="fItem, fIndex in item.filterSize" :key="fIndex" v-for-item="fItem"> |
||||
<div class="text_14">{{fItem.size}}</div> |
||||
<div class="text_15">x{{fItem.num}}</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="text-wrapper_37"> |
||||
<div class="text_38"> |
||||
{{orderStatus(item.status,item.digital_type).$t}} |
||||
<van-icon v-if="item.status>=9000 && item.digital_type == 0" @click="turnToDelivery" data-delivery_no="{{item.delivery_no}}" name="arrow" size="18px" color="#767676"/> |
||||
</div> |
||||
<div class="text_38">{{item.update_time}}</div> |
||||
</div> |
||||
|
||||
<div class="text-wrapper_37"> |
||||
<div class="text_38">{{ '费用合计'.$t }}</div> |
||||
<div class="total"> |
||||
<div class="text_29">￥</div> |
||||
<div class="text_30">{{ item.goods_amount / 100}}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</block> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style lang="less" scoped> |
||||
.page { |
||||
position: relative; |
||||
width: 375px; |
||||
height: 100vh; |
||||
display: flex; |
||||
background: rgba(245, 245, 245, 1.000000); |
||||
flex-direction: column; |
||||
.container { |
||||
position: relative; |
||||
width: 100%; |
||||
height: auto; |
||||
background: rgba(245, 245, 245, 1.000000); |
||||
padding-bottom: 60px; |
||||
box-sizing: border-box; |
||||
.order_info { |
||||
background-color: rgba(255, 255, 255, 1.000000); |
||||
border-radius: 8px; |
||||
width: 345px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
margin: 7.5px auto 0 auto; |
||||
} |
||||
|
||||
.order_record { |
||||
background-color: rgba(255, 255, 255, 1.000000); |
||||
border-radius: 8px; |
||||
width: 345px; |
||||
min-height: 200px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
margin: 15px auto; |
||||
|
||||
.section_2 { |
||||
position: relative; |
||||
width: 315px; |
||||
height: auto; |
||||
margin: 0 auto; |
||||
border-radius: 8px; |
||||
|
||||
.order-title { |
||||
display: flex; |
||||
align-items: center; |
||||
width: 100%; |
||||
height: 24px; |
||||
margin-top: 24px; |
||||
padding-bottom: 6px; |
||||
margin-bottom: 11px; |
||||
border-bottom: 2px solid #F0F0F0; |
||||
|
||||
.title { |
||||
color: #333333; |
||||
font-size: 16px; |
||||
font-family: Source Han Sans CN-Bold; |
||||
font-weight: 700; |
||||
} |
||||
} |
||||
|
||||
.order-box { |
||||
display: flex; |
||||
flex-direction: column; |
||||
position: relative; |
||||
width: 100%; |
||||
margin-bottom: 15px; |
||||
background: #FAFDFB; |
||||
.order-top { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
background-color: rgba(236, 244, 234, 1.000000); |
||||
border-radius: 10px 10px 0px 0px; |
||||
width: 315px; |
||||
height: 44px; |
||||
margin: 0 auto; |
||||
padding: 0 15px; |
||||
box-sizing: border-box; |
||||
|
||||
.header-text { |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
align-items: center; |
||||
position: relative; |
||||
height: 100%; |
||||
|
||||
.order-name { |
||||
overflow-wrap: break-word; |
||||
color: #1A1A1A; |
||||
font-size: 14px; |
||||
font-family: Source Han Sans CN-Medium; |
||||
font-weight: 500; |
||||
text-align: left; |
||||
white-space: nowrap; |
||||
line-height: 14px; |
||||
margin-right: 8px; |
||||
} |
||||
|
||||
.order-status { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: relative; |
||||
width: 30px; |
||||
height: 24px; |
||||
background: #ffffff; |
||||
font-size: 11px; |
||||
color: #E6A23C; |
||||
font-weight: 500; |
||||
border-radius: 4px; |
||||
} |
||||
} |
||||
|
||||
.text_13 { |
||||
height: 14px; |
||||
overflow-wrap: break-word; |
||||
color: #767676; |
||||
font-size: 14px; |
||||
font-family: Source Han Sans CN-Medium; |
||||
font-weight: 500; |
||||
text-align: left; |
||||
white-space: nowrap; |
||||
line-height: 14px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.higher { |
||||
padding-bottom: 110px; |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
.text-group_9 { |
||||
width: 234px; |
||||
height: 180px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.text-wrapper_37 { |
||||
width: 285px; |
||||
height: 44px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
background: #FAFDFB; |
||||
border-bottom: 2px solid #F0F0F0; |
||||
margin: 0 auto; |
||||
|
||||
&:last-child { |
||||
border-bottom: none; |
||||
} |
||||
|
||||
|
||||
.total { |
||||
display: flex; |
||||
align-items: center; |
||||
position: relative; |
||||
height: 100%; |
||||
|
||||
.text_29 { |
||||
width: 12px; |
||||
overflow-wrap: break-word; |
||||
color: rgba(51, 51, 51, 1.000000); |
||||
font-size: 12px; |
||||
font-family: Source Han Sans CN-Bold; |
||||
font-weight: 700; |
||||
text-align: right; |
||||
white-space: nowrap; |
||||
line-height: 12px; |
||||
} |
||||
|
||||
.text_30 { |
||||
overflow-wrap: break-word; |
||||
color: rgba(51, 51, 51, 1.000000); |
||||
font-size: 16px; |
||||
font-family: Source Han Sans CN-Bold; |
||||
font-weight: 700; |
||||
text-align: left; |
||||
white-space: nowrap; |
||||
line-height: 16px; |
||||
} |
||||
} |
||||
|
||||
.button_3 { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
height: 30px; |
||||
background-color: #009944; |
||||
border-radius: 6px; |
||||
font-size: 14px; |
||||
margin: 0; |
||||
|
||||
&::after { |
||||
display: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.line { |
||||
margin: 0 auto; |
||||
width: 95%; |
||||
height: 1px; |
||||
background-color: #F0F0F0; |
||||
border-bottom: 1px solid #F0F0F0; |
||||
} |
||||
|
||||
.text_4 { |
||||
width: 48px; |
||||
height: 16px; |
||||
overflow-wrap: break-word; |
||||
color: rgba(51, 51, 51, 1.000000); |
||||
font-size: 16px; |
||||
font-family: Source Han Sans CN-Medium; |
||||
font-weight: 500; |
||||
text-align: left; |
||||
white-space: nowrap; |
||||
line-height: 16px; |
||||
} |
||||
.text_14 { |
||||
height: 12px; |
||||
overflow-wrap: break-word; |
||||
color: rgba(102, 102, 102, 1.000000); |
||||
font-size: 14px; |
||||
font-family: Source Han Sans CN-Regular; |
||||
font-weight: normal; |
||||
text-align: left; |
||||
white-space: nowrap; |
||||
line-height: 12px; |
||||
} |
||||
|
||||
.text_15 { |
||||
height: 12px; |
||||
overflow-wrap: break-word; |
||||
color: rgba(102, 102, 102, 1.000000); |
||||
font-size: 12px; |
||||
font-family: Source Han Sans CN-Regular; |
||||
font-weight: normal; |
||||
text-align: left; |
||||
white-space: nowrap; |
||||
line-height: 12px; |
||||
} |
||||
|
||||
.text-wrapper_43 { |
||||
position: relative; |
||||
width: 315px; |
||||
height: 24px; |
||||
margin: 14px auto 11px auto; |
||||
padding-bottom: 6px; |
||||
border-bottom: 1px solid #F0F0F0; |
||||
|
||||
.order-info { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
width: 315px; |
||||
height: 100%; |
||||
margin: 0 auto; |
||||
|
||||
.more { |
||||
position: relative; |
||||
width: 16px; |
||||
height: 16px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.text_31 { |
||||
width: 64px; |
||||
height: 16px; |
||||
overflow-wrap: break-word; |
||||
color: rgba(51, 51, 51, 1.000000); |
||||
font-size: 16px; |
||||
font-family: Source Han Sans CN-Bold; |
||||
font-weight: 700; |
||||
text-align: left; |
||||
white-space: nowrap; |
||||
line-height: 16px; |
||||
} |
||||
|
||||
.text-wrapper_44 { |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
align-items: center; |
||||
width: 315px; |
||||
height: 20px; |
||||
margin: 0 auto 10px auto; |
||||
} |
||||
|
||||
.text_38 { |
||||
display: flex; |
||||
align-items: center; |
||||
color: #1A1A1A; |
||||
font-size: 14px; |
||||
font-family: Source Han Sans CN-Medium; |
||||
font-weight: 500; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
.text-wrapper_45 { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
width: 315px; |
||||
margin: 0 auto 10px auto; |
||||
|
||||
.order-id { |
||||
display: flex; |
||||
} |
||||
} |
||||
|
||||
.text_39 { |
||||
// width: 52px; |
||||
height: 15px; |
||||
overflow-wrap: break-word; |
||||
color: rgba(153, 153, 153, 1.000000); |
||||
font-size: 14px; |
||||
font-family: Source Han Sans CN-Regular; |
||||
font-weight: normal; |
||||
text-align: left; |
||||
white-space: nowrap; |
||||
margin-right: 15px; |
||||
} |
||||
|
||||
.text_40 { |
||||
height: 15px; |
||||
overflow-wrap: break-word; |
||||
color: rgba(51, 51, 51, 1.000000); |
||||
font-size: 14px; |
||||
font-family: Source Han Sans CN-Regular; |
||||
font-weight: normal; |
||||
text-align: left; |
||||
white-space: nowrap; |
||||
line-height: 15px; |
||||
margin-top: 2px; |
||||
} |
||||
|
||||
.button_2 { |
||||
width: 36px; |
||||
height: 20px; |
||||
color: #AAAAAA; |
||||
border: 1px solid #AAAAAA; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-size: 14px; |
||||
border-radius: 5px; |
||||
margin-left: 10px; |
||||
} |
||||
|
||||
.button_2::after { |
||||
display: none; |
||||
} |
||||
|
||||
|
||||
.group_13 { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 100%; |
||||
height: 42px; |
||||
} |
||||
|
||||
.image-text_12 { |
||||
height: 16px; |
||||
flex-direction: row; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.icon_2 { |
||||
width: 16px; |
||||
height: 16px; |
||||
display: flex; |
||||
justify-content: center; |
||||
flex-direction: column; |
||||
.icon_4 { |
||||
width: 14px; |
||||
height: 14px; |
||||
} |
||||
} |
||||
|
||||
.text-order_record { |
||||
height: 16px; |
||||
overflow-wrap: break-word; |
||||
color: #009944; |
||||
font-size: 16px; |
||||
font-family: Source Han Sans CN-Medium; |
||||
font-weight: 500; |
||||
text-align: left; |
||||
white-space: nowrap; |
||||
line-height: 16px; |
||||
} |
||||
|
||||
.group_9 { |
||||
background-color: rgba(255, 255, 255, 1.000000); |
||||
height: 72px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
width: 375px; |
||||
} |
||||
|
||||
</style> |
||||
@ -1,543 +0,0 @@
@@ -1,543 +0,0 @@
|
||||
<script lang="tsx" setup> |
||||
import { getCurrentInstance } from 'vue' |
||||
const instance = getCurrentInstance(); |
||||
import { normalizeStatus, getURLParameters } from '@/utils/utils' |
||||
import * as myOrderApi from '@/api/my_order' |
||||
import * as configApi from '@/api/config' |
||||
import { imgSrc } from "@/utils/utils" |
||||
import { useStore } from '@/stores' |
||||
import { useRoute, useRouter } from 'vue-router' |
||||
const store = useStore(); |
||||
import { useTokenStore } from '@/stores/token' |
||||
import { showFailToast } from 'vant'; |
||||
const tokenStore = useTokenStore(); |
||||
const router = useRouter(); |
||||
const route = useRoute() |
||||
const userInfo = ref(null) |
||||
const refreshing = ref(false) |
||||
const finished = ref(false) |
||||
const loading = ref(false) |
||||
const error = ref(false) |
||||
const list = ref([]) |
||||
let page = 1 |
||||
const size = 6 |
||||
|
||||
const { isWechat } = tokenStore; |
||||
const brandId = ref(); |
||||
|
||||
onMounted(() => { |
||||
userInfo.value = tokenStore.userInfo; |
||||
brandId.value = instance.proxy.$brandId; |
||||
getBrand(brandId.value); |
||||
}) |
||||
|
||||
function onLoad() { |
||||
if (refreshing.value) { |
||||
list.value = [] |
||||
page = 1 |
||||
refreshing.value = false |
||||
} |
||||
getPage(); |
||||
} |
||||
|
||||
// 获取页面信息 |
||||
const getPage = () => { |
||||
myOrderApi.page({ |
||||
page, |
||||
brand_id: brandId.value || "", |
||||
size, |
||||
}).then((res: any) => { |
||||
const data = res || [] |
||||
list.value = list.value.concat(normalizeStatus(data)) |
||||
if (data.length < size) |
||||
finished.value = true |
||||
page++ |
||||
}).catch(() => { |
||||
error.value = true |
||||
}).finally(() => { |
||||
loading.value = false |
||||
}) |
||||
} |
||||
|
||||
// 获取品牌信息 |
||||
const getBrand = (val) => { |
||||
configApi.brand(val).then((res: any) => { |
||||
store.setBrandInfo(res); // 存储品牌信息 |
||||
setIcon(res) |
||||
}).catch((err) => { |
||||
console.log("configErr", err) |
||||
}).finally(() => { |
||||
}) |
||||
} |
||||
|
||||
const setIcon = (res) => { |
||||
const favicon = res.favicon |
||||
if (favicon) { |
||||
const link = document.querySelector("link[rel*='icon']") || document.createElement('link'); |
||||
link.type = 'image/x-icon'; |
||||
link.rel = 'icon'; |
||||
link.href = favicon; |
||||
document.head.appendChild(link); |
||||
} |
||||
} |
||||
|
||||
const onRefresh = () => { |
||||
// 清空列表数据 |
||||
finished.value = false |
||||
// 重新加载数据 |
||||
loading.value = true |
||||
onLoad() |
||||
} |
||||
|
||||
// 跳转到3D相册 |
||||
const toAlbum = (data) => { |
||||
|
||||
store.updateOrderInfo(data) |
||||
if (data.has_experience || data.status >= 4100) { |
||||
// 高斯跳转到web |
||||
router.push({ |
||||
path: data.is_gsplat == 1 ? '/photo3d/gsplat' : '/photo3d', |
||||
}) |
||||
}else { |
||||
showFailToast('3D相册制作中'.$t) |
||||
return |
||||
} |
||||
console.log("toAlbum", data) |
||||
|
||||
// const u = wx.getStorageSync('userInfo'); |
||||
// var pid = e.currentTarget.dataset.pid; |
||||
// var cn = e.currentTarget.dataset.cn; |
||||
// var oid = e.currentTarget.dataset.oid; |
||||
// var cid = e.currentTarget.dataset.cid; |
||||
// var status = e.currentTarget.dataset.status; |
||||
// var remainingExperienceStatus = e.currentTarget.dataset.remain_status; |
||||
// var expireTime = e.currentTarget.dataset.expire_time; |
||||
// var digitalOrderId = e.currentTarget.dataset.digital_order_id; |
||||
// var digitalType = e.currentTarget.dataset.digital_type; |
||||
// var createTime = e.currentTarget.dataset.create_time; |
||||
// var titleCode = e.currentTarget.dataset.title_code; |
||||
// console.log(e.currentTarget.dataset) |
||||
// //判断createTime时间是否在2023-04-15 00:00:00 之后 |
||||
// wx.request({ |
||||
// url: config.url + '/miniProgram/judgeP3dLogOrderTime', |
||||
// data: {photoTime: createTime, pid}, |
||||
// header: {'content-type': 'application/json'}, |
||||
// success: (res) => { |
||||
// if (res.data.data.use_status != 1) { |
||||
// wx.showToast({ |
||||
// title: '该订单不支持3D相册，需重新拍照', |
||||
// icon: 'none', |
||||
// duration: 2000 |
||||
// }) |
||||
// return |
||||
// } |
||||
|
||||
// const url = `/package3D/pages/3d/3d?openid=${u.openid}` |
||||
// + `&unionid=${u.unionid}&id=${pid}&oid=${oid}` |
||||
// + `&cn=${cn}&cid=${cid}&expireTime=${expireTime}` |
||||
// + `&digitalType=${digitalType}` |
||||
// + `&status=${status}` |
||||
// + `&titleCode=${titleCode}` |
||||
// + `&remainingExperienceStatus=${remainingExperienceStatus}` |
||||
|
||||
// console.log("url", url); |
||||
|
||||
// if (digitalOrderId == 0) { |
||||
// wx.navigateTo({ |
||||
// url: url, |
||||
// }); |
||||
// return |
||||
// } |
||||
|
||||
// if (status < 4100) { |
||||
// wx.showToast({ |
||||
// title: '3D相册制作中', |
||||
// icon: 'none', |
||||
// duration: 2000 |
||||
// }) |
||||
// return |
||||
// } |
||||
|
||||
|
||||
// //获取时间戳 |
||||
// // const timestamp = Date.parse(new Date()); |
||||
// // const url = `http://172.16.20.5:3000/?t=${Date.now()}#/model?openid=${u.openid}&unionid=${u.unionid}&id=${pid}&oid=${oid}&cn=${cn}&cid=${cid}&expireTime=${expireTime}&remainingExperienceStatus=${remainingExperienceStatus}` |
||||
// // const url = `https://wechat.suwa3d.com/3d/index.html?t=${Date.now()}#/model?openid=${u.openid}&unionid=${u.unionid}&id=${pid}&oid=${oid}&cn=${cn}&cid=${cid}` |
||||
// // const navtitle = '3D相册'; // 这个标题是你自己可以设置的 |
||||
// wx.navigateTo({ |
||||
// // 跳转到webview页面 |
||||
// // url: `/pages/webview/webview?nav=${navtitle}&url=${encodeURIComponent(url)}`, |
||||
// url: url, |
||||
// }); |
||||
// }, |
||||
// fail: (err) => { |
||||
// console.log(err); |
||||
// } |
||||
// }) |
||||
} |
||||
|
||||
function getExpeienceText(item: any) { |
||||
switch (item.remaining_experience?.title_code) { |
||||
case 1: |
||||
return '3D相册体验中'.$t |
||||
case 2: |
||||
return '3D相册体验结束'.$t |
||||
case 3: |
||||
return '您购买的3D相册正在精修中！'.$t |
||||
} |
||||
} |
||||
|
||||
function showExperience(item: any) { |
||||
return item.remaining_experience?.status !== 0 |
||||
} |
||||
|
||||
const detailClick = (data: any) => { |
||||
store.updateOrderInfo(data) |
||||
router.push({ |
||||
path: '/myOrder/detail', |
||||
}) |
||||
} |
||||
|
||||
</script> |
||||
|
||||
<template> |
||||
<van-nav-bar v-if="!isWechat()" :title="store.navTitle" safe-area-inset-top /> |
||||
<div class="page"> |
||||
<div class="container"> |
||||
<div class="box-wrap"> |
||||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh"> |
||||
<Brand /> |
||||
<van-list v-model:loading="loading" v-model:error="error" :error-text="'请求失败，点击重新加载'.$t" |
||||
:finished-text="'没有更多了'.$t" :finished="finished" @load="onLoad"> |
||||
<van-card v-for="item in list" :key="item.pid"> |
||||
<template #title> |
||||
<van-cell :title="item.pid" is-link :value="'详情'.$t" class="title" @click="detailClick(item)" /> |
||||
</template> |
||||
<template #thumb> |
||||
<img v-if="item.texture_cover_img" :src="imgSrc(item.texture_cover_img)" alt="" @click="toAlbum(item)"> |
||||
<div v-else class="empty_img" @click="toAlbum(item)" ></div> |
||||
</template> |
||||
<template #tags> |
||||
{{ item.head_count }}{{ '人'.$t }}/{{ item.model_json.$t }} |
||||
</template> |
||||
<template #footer> |
||||
<div class="van-wrap"> |
||||
<div class="van-status"> |
||||
<div :class="['status', item.statusColor == 0 ? 'undone' : '']">{{ item.statusName.$t }}</div> |
||||
<div class="created_time">{{ item.update_time }}</div> |
||||
</div> |
||||
<div class="btns"> |
||||
<div class="check_btn" v-if="item.status >= 4100 || item.has_experience" @click="toAlbum(item)">{{ '查看3D相册'.$t }}</div> |
||||
<div class="check_btn disabled" v-else>{{ '查看3D相册'.$t }}</div> |
||||
</div> |
||||
</div> |
||||
<div :class="['photograph-box', { expire: item.remaining_experience?.status === 2 }]" |
||||
v-if="showExperience(item)"> |
||||
<div class="box-wrap"> |
||||
<div class="experience">{{ getExpeienceText(item) }}</div> |
||||
<div class="right" v-if="item.remaining_experience.day > 0"> |
||||
<div class="countdown">{{ '倒计时'.$t }}<div class="bold">{{ item.remaining_experience?.day }}</div> |
||||
{{ '天'.$t }}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</van-card> |
||||
</van-list> |
||||
</van-pull-refresh> |
||||
</div> |
||||
</div> |
||||
<Tabbar></Tabbar> |
||||
</div> |
||||
</template> |
||||
|
||||
<style lang="less" scoped> |
||||
.page { |
||||
box-sizing: border-box; |
||||
// padding-bottom: calc(env(safe-area-inset-bottom) + 96px); |
||||
background-color: #F3F3F3; |
||||
} |
||||
|
||||
.container { |
||||
display: block; |
||||
padding: 5px 15px 0 15px; |
||||
|
||||
>.box-wrap { |
||||
overflow-y: scroll; |
||||
height: 100vh; |
||||
padding-bottom: 100px; |
||||
// height: calc(100vh - 96px); |
||||
} |
||||
} |
||||
|
||||
.text-group { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
} |
||||
|
||||
.cover { |
||||
position: absolute; |
||||
width: 100%; |
||||
height: 100vh; |
||||
background: #ffffff; |
||||
z-index: 9; |
||||
} |
||||
|
||||
.button { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
margin-top: 10px; |
||||
font-size: 16px; |
||||
background-color: #1aad19; |
||||
color: #fff; |
||||
border-radius: 5px; |
||||
padding-left: 14px; |
||||
padding-right: 14px; |
||||
height: 40px; |
||||
} |
||||
|
||||
:deep(.van-card) { |
||||
background: #ffffff; |
||||
margin-top: 10px; |
||||
border: 3px solid #F0F2F5; |
||||
border-radius: 8px; |
||||
padding: 0; |
||||
|
||||
.van-card__header { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
width: 315px; |
||||
height: 90px; |
||||
flex-direction: row; |
||||
margin: 15px auto; |
||||
} |
||||
|
||||
.van-card__thumb { |
||||
width: 120px; |
||||
height: 90px; |
||||
border-radius: 16px; |
||||
margin-right: 0; |
||||
|
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
|
||||
.empty_img { |
||||
width: 120px; |
||||
height: 90px; |
||||
background: #fff; |
||||
} |
||||
|
||||
.van-card__content { |
||||
display: flex; |
||||
flex: unset; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
width: 180px; |
||||
height: 90px; |
||||
overflow-wrap: break-word; |
||||
word-break: break-all; |
||||
text-overflow: ellipsis; |
||||
overflow: hidden; |
||||
color: #666666; |
||||
font-size: 14px; |
||||
font-weight: normal; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
} |
||||
|
||||
:deep(.van-cell__title) { |
||||
flex: unset; |
||||
overflow-wrap: break-word; |
||||
word-break: break-all; |
||||
text-overflow: ellipsis; |
||||
overflow: hidden; |
||||
color: #333333; |
||||
font-size: 17px; |
||||
font-family: Source Han Sans CN-Bold; |
||||
font-weight: 700; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
:deep(.van-cell__value), |
||||
:deep(.van-icon) { |
||||
// width: 56px; |
||||
color: #767676; |
||||
font-size: 14px; |
||||
font-weight: 400; |
||||
} |
||||
|
||||
:deep(.van-cell) { |
||||
padding: 0; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: flex-start; |
||||
position: relative; |
||||
width: 180px; |
||||
height: 32px; |
||||
} |
||||
|
||||
:deep(.van-card__footer) .van-cell { |
||||
margin-top: 0.4rem; |
||||
background: #FAFAFA; |
||||
} |
||||
|
||||
:deep(.van-card__footer) .van-wrap { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
width: 315px; |
||||
margin: 0 auto; |
||||
|
||||
.van-status { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
position: relative; |
||||
width: 315px; |
||||
height: 46px; |
||||
background-color: #FAFAFA; |
||||
margin: 0 auto; |
||||
border-radius: 8px; |
||||
padding: 5px; |
||||
margin-bottom: 5px; |
||||
|
||||
.status { |
||||
color: #009944; |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.created_time { |
||||
color: #AAAAAA; |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.undone { |
||||
color: #E6A23C; |
||||
} |
||||
} |
||||
} |
||||
|
||||
:deep(.van-card__footer) .van-cell__title { |
||||
text-align: left; |
||||
color: #009944; |
||||
} |
||||
|
||||
.btns { |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
width: 100%; |
||||
height: 34px; |
||||
margin-bottom: 10px; |
||||
|
||||
.check_btn { |
||||
font-size: 14px; |
||||
font-weight: 400; |
||||
border-radius: 4px; |
||||
height: 34px; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: relative; |
||||
color: #009944; |
||||
border: 1px solid#009944; |
||||
padding: 0 12.5px; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.disabled { |
||||
opacity: .3; |
||||
} |
||||
} |
||||
|
||||
.photograph-box { |
||||
display: flex; |
||||
position: relative; |
||||
width: 100%; |
||||
height: 48px; |
||||
background: #FCF5EB; |
||||
overflow: hidden; |
||||
border-bottom-left-radius: 8px; |
||||
border-bottom-right-radius: 8px; |
||||
border: .5px solid #FDE2E2; |
||||
box-sizing: border-box; |
||||
|
||||
.box-wrap { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
position: relative; |
||||
width: 315px; |
||||
height: 100%; |
||||
margin: 0 auto; |
||||
|
||||
.experience { |
||||
font-size: 15px; |
||||
color: #E6A23C; |
||||
font-weight: 700; |
||||
font-family: Source Han Sans CN-Bold; |
||||
} |
||||
|
||||
.right { |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
align-items: center; |
||||
color: #E6A23C; |
||||
position: relative; |
||||
font-family: Source Han Sans CN-Regular; |
||||
|
||||
.countdown, |
||||
.hint { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-size: 14px; |
||||
font-weight: 400; |
||||
|
||||
.bold { |
||||
font-weight: 700; |
||||
} |
||||
} |
||||
|
||||
.buy-btn { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: relative; |
||||
width: 106px; |
||||
height: 17px; |
||||
background: #E6A23C; |
||||
font-weight: 400; |
||||
color: #FFFFFF; |
||||
font-size: 14px; |
||||
border-radius: 5px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
.expire { |
||||
border: .5px solid #FDE2E2; |
||||
background: #FDF0F0; |
||||
|
||||
.box-wrap { |
||||
.experience { |
||||
color: #F56C6C; |
||||
} |
||||
|
||||
.right { |
||||
color: #F56C6C; |
||||
|
||||
.buy-btn { |
||||
background: #F56C6C; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,161 +0,0 @@
@@ -1,161 +0,0 @@
|
||||
<template> |
||||
<arMode :pid="pid" :modelFile="modelFile" @handleProgress="handleProgress" |
||||
@handleLoaded="handleLoaded"></arMode> |
||||
<!-- <arFrame :pid="pid" :modelFile="modelFile" @handleProgress="handleProgress" |
||||
@handleLoaded="handleLoaded" @closeHint="closeHint"></arFrame> --> |
||||
<div class="popup" v-if="showProcess"> |
||||
<div class="pcenter"> |
||||
<div class="text">{{ '渲染中...'.$t }}</div> |
||||
<van-progress class="progress" :percentage="percent" stroke-width="8px" :show-pivot="false"/> |
||||
</div> |
||||
</div> |
||||
<!-- <div class="hint_cover" v-if="hintVisible"> |
||||
<div class="hint">将设备</div> |
||||
<div class="hint">向前和向后移动</div> |
||||
</div> --> |
||||
<div class="exit" @click="backTo"> |
||||
<img class="exit_img" :src="exit" /> |
||||
<div>{{'退出AR'.$t}}</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import exit from "@/assets/photo3D/icon_exit.png"; |
||||
import * as api from '@/api/photo_3d' |
||||
const router = useRouter() |
||||
import { showFailToast } from "vant"; |
||||
import { useStore } from '@/stores' |
||||
const store = useStore(); |
||||
const backTo = () => router.back() |
||||
const modelFile = ref() |
||||
const percent = ref(0) |
||||
const orderInfo = ref() |
||||
const pid = ref(); |
||||
const showProcess = ref(false) |
||||
const hintVisible = ref(true) |
||||
onMounted(()=> { |
||||
orderInfo.value = store.orderInfo; |
||||
pid.value = store.orderInfo.pid |
||||
getModel(pid.value) |
||||
}) |
||||
|
||||
const closeHint = () => hintVisible.value = false; |
||||
// 获取模型路径 |
||||
const getModel = (pid: any) => { |
||||
api.glb(pid).then((data: any) => { |
||||
if (data && data.s) { |
||||
// let _data = { |
||||
// iShare: data.s, |
||||
// id: data.id, |
||||
// } |
||||
// 只有分享的才需要这么处理 |
||||
// if (data.isShare) { |
||||
// _data.expireTime = data.expireTime || ''; |
||||
// _data.remainingExperienceStatus = data.remainingExperienceStatus || ''; |
||||
// _data.digitalType = data.digitalType || ''; |
||||
// _data.titleCode = data.titleCode || ''; |
||||
// _data.oid = data.oid || ''; |
||||
// } |
||||
// that.setData(_data) |
||||
} |
||||
modelFile.value = data.url; |
||||
|
||||
|
||||
}).catch(err=> { |
||||
console.log("loaded failed", err); |
||||
showFailToast(err && err.message); |
||||
|
||||
}) |
||||
} |
||||
// 模型加载进度 |
||||
const handleProgress = (detail) => { |
||||
showProcess.value = true |
||||
if (detail < percent.value) return; |
||||
// 兼容其他机型渲染慢 |
||||
if (detail == 1) { |
||||
setTimeout(() => { |
||||
if (showProcess.value) { |
||||
// 提示模型有问题 |
||||
showProcess.value = false |
||||
} |
||||
}, 10000); |
||||
} |
||||
percent.value = detail |
||||
} |
||||
|
||||
// 模型加载完成 |
||||
const handleLoaded = (detail) => { |
||||
setTimeout(() => { |
||||
showProcess.value = false; |
||||
}, 1000) |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.exit { |
||||
position: absolute; |
||||
left: 30px; |
||||
bottom: 30px; |
||||
font-size: 14px; |
||||
color: #fff; |
||||
text-align: center; |
||||
.exit_img { |
||||
width: 38px; |
||||
height: 39px; |
||||
display: block; |
||||
margin: 0 auto 6px; |
||||
} |
||||
} |
||||
.popup { |
||||
position: fixed; |
||||
left: 0; |
||||
top: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
background-color: rgba(0, 0, 0, 0.5); |
||||
z-index: 999; |
||||
text-align: center; |
||||
} |
||||
.text { |
||||
font-size: 15px; |
||||
color: #fff; |
||||
} |
||||
|
||||
.progress { |
||||
width: 80%; |
||||
margin: 0 auto; |
||||
margin-top: 5px; |
||||
} |
||||
|
||||
.pcenter { |
||||
position: absolute; |
||||
left: 50%; |
||||
top: 50%; |
||||
transform: translate(-50%, -50%); |
||||
width: 100%; |
||||
} |
||||
|
||||
.hint_cover { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
text-align: center; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100vh; |
||||
z-index: 2; |
||||
.hint { |
||||
width: 200px; |
||||
height: 30px; |
||||
font-size: 20px; |
||||
color: #ffffff; |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
@ -1,610 +0,0 @@
@@ -1,610 +0,0 @@
|
||||
<script setup lang="ts"> |
||||
import { getCurrentInstance } from 'vue' |
||||
const instance = getCurrentInstance(); |
||||
import { contractMap } from '@/dict/status_dict' |
||||
import dayjs from 'dayjs' |
||||
import { showDialog, showFailToast } from 'vant' |
||||
import { useRoute } from 'vue-router' |
||||
import * as queueApi from '@/api/queue' |
||||
import * as configApi from '@/api/config' |
||||
import router from '@/router' |
||||
import {getTreeData} from "@/utils/utils" |
||||
// import {AttrResponse} from './utils/type' |
||||
// import { AxiosResponse } from 'axios' |
||||
import { useStore } from '@/stores' |
||||
const store = useStore(); |
||||
const isProd = process.env.mode === 'production' || process.env.mode === 'gray' |
||||
const hintShow = ref(false) |
||||
const isAll = ref(true) |
||||
const loading = ref(false) |
||||
const choseManyType = ref([2, 4, 5]) |
||||
const name = ref(isProd ? '' : '测试') |
||||
const mobile = ref(isProd ? '' : '13695004676') |
||||
const birthday = ref(isProd ? '' : '1990-10-10') |
||||
const attrBuyTypes = ref([]) |
||||
const buyTypes = ref([]) |
||||
const attrList = ref([]) |
||||
const goodsList = ref([]) |
||||
const choseList = ref({}) |
||||
const choseAttrsIds = ref([]) |
||||
const choseGoodsIds = ref([]) |
||||
const totalPrice = ref(0) |
||||
const goodsTotalPrice = ref(0) |
||||
const shopId = ref(0) |
||||
const brandId = ref() |
||||
const logo = ref('') |
||||
const currency = ref('') |
||||
const useLogo = ref(false) |
||||
const v = ref('') |
||||
const shopName = ref('') |
||||
// const checkboxRefs = ref([]) |
||||
const agree = ref(false) |
||||
const showPicker = ref(false) |
||||
const showAgree = ref(false) |
||||
const agreePage = ref('') |
||||
const agreeTitle = ref('') |
||||
const current = ref(); |
||||
const route = useRoute() |
||||
const cate_map = ref({ |
||||
1: '数字模型', |
||||
2: '手办尺寸', |
||||
3: '额外携带', |
||||
4: '', |
||||
}) |
||||
const minDate = new Date(1900, 0, 1) |
||||
const maxDate = new Date() |
||||
const ignore = ref() |
||||
const currentDate = ref(['1990', '10', '10']) |
||||
|
||||
// const toggle = (index) => { |
||||
// checkboxRefs.value[index].toggle(); |
||||
// }; |
||||
onMounted(() => { |
||||
shopId.value = parseInt(String(route.query.shop_id), 10) |
||||
brandId.value = parseInt(String(route.query.shop_id), 10) |
||||
ignore.value = parseInt(String(route.query.ignore), 10) |
||||
shopName.value = String(route.query.shop_name) |
||||
currency.value = String(route.query.currency) |
||||
useLogo.value = Boolean(route.query.use_logo) |
||||
v.value = String(route.query.v) |
||||
logo.value = String(route.query.logo) |
||||
if (!logo.value) { |
||||
// 主要给定制版客户他们需要展示logo |
||||
logo.value = `/resource/img/logo/${shopId.value}.png?t=${new Date().getTime()}` |
||||
} |
||||
brandId.value = instance.proxy.$brandId; |
||||
// isShowHint(); |
||||
getBrand(brandId.value); |
||||
// init() |
||||
}) |
||||
const isShowHint = ()=> { |
||||
isAll.value = ignore.value == 0 ? false : true; |
||||
if(ignore.value == 0) { |
||||
hintShow.value = false |
||||
}else { |
||||
hintShow.value = true |
||||
} |
||||
} |
||||
|
||||
|
||||
const closeHint = () => { |
||||
hintShow.value = false; |
||||
} |
||||
|
||||
const checkChange = (val) => { |
||||
console.log('123', val) |
||||
agree.value = val; |
||||
} |
||||
|
||||
// 获取品牌信息 |
||||
const getBrand = (val) => { |
||||
configApi.brand(val).then((res: any) => { |
||||
store.setBrandInfo(res); // 存储品牌信息 |
||||
|
||||
setIcon(res) |
||||
}).catch((err) => { |
||||
console.log("configErr", err) |
||||
}).finally(() => { |
||||
}) |
||||
} |
||||
|
||||
function onViewAgree(name: string, val: number) { |
||||
let url; |
||||
let sid = brandId.value; |
||||
let timeStamp = Date.now(); |
||||
// TODO: 英文路径在/v1/en下面，之后要新增多语言支持时需要根据语言来切换协议 |
||||
// 版本号之后采用后端回传来确认协议版本号 |
||||
if(store.brandInfo.agrees) { |
||||
store.brandInfo.agrees.filter((el: any)=> { |
||||
if(el.agree_type == val) { |
||||
url = el.url |
||||
agreeTitle.value = el.title |
||||
} |
||||
}) |
||||
}else { |
||||
if(sid == 130 || sid == 134) { |
||||
url = `/pages/agreement/v1/cn/${sid}/${name}.html?` + timeStamp |
||||
}else { |
||||
url = `/pages/agreement/v1/${name}.html?` + timeStamp; |
||||
} |
||||
} |
||||
agreeTitle.value = contractMap[val] |
||||
showAgree.value = true |
||||
agreePage.value = url |
||||
} |
||||
|
||||
const setIcon = (res) => { |
||||
const favicon = res.favicon |
||||
if (favicon) { |
||||
const link = document.querySelector("link[rel*='icon']") || document.createElement('link'); |
||||
link.type = 'image/x-icon'; |
||||
link.rel = 'icon'; |
||||
link.href = favicon; |
||||
document.head.appendChild(link); |
||||
} |
||||
} |
||||
|
||||
const hidden = ref(false) |
||||
const init = () => { |
||||
nextTick(()=> { |
||||
loading.value = true |
||||
queueApi.attr({ |
||||
shop_id: shopId.value, |
||||
brand_id: brandId.value || "", |
||||
}).then((res: any) => { |
||||
goodsList.value = res.goods; |
||||
hidden.value = !!res.hidden; |
||||
// setAttrList(res.attrs); |
||||
// setGoodsList(res.goods); |
||||
// 购买类型默认无效 |
||||
attrBuyTypes.value = res.attrBuyTypes || []; |
||||
if (attrBuyTypes.value.length) buyTypes.value = [attrBuyTypes[0]?.value.id]; |
||||
|
||||
// 初始化 |
||||
defaultSelected(); |
||||
}) |
||||
.catch((error) => { |
||||
console.log('err', error) |
||||
showDialog({ message: error.message }).then(() => { |
||||
router.replace('/') |
||||
}) |
||||
}).finally(() => { |
||||
loading.value = false |
||||
}) |
||||
}) |
||||
} |
||||
|
||||
const selectedGoodsMap = ref({}) |
||||
const selectedGoodsAttrMap = ref({}) |
||||
const attributeMap = ref({}) |
||||
|
||||
const setGoodsList = (data) => { |
||||
let _data = data || []; |
||||
let list = []; |
||||
let cateMap = {}; |
||||
_data.forEach((el) => { |
||||
let cate = cateMap[el.cate_id]; |
||||
if (!cate) { |
||||
cate = { |
||||
id: el.cate_id, |
||||
cate_name: el.cate_name, |
||||
children: [], |
||||
attrs: [] |
||||
}; |
||||
cateMap[el.cate_id] = cate; |
||||
list.push(cate); |
||||
selectedGoodsMap.value[el.cate_id] = []; |
||||
selectedGoodsAttrMap.value[el.cate_id] = []; |
||||
if (el.attr_ids != "") { |
||||
JSON.parse(el.attr_ids).forEach((el) => { |
||||
let c = attributeMap.value[el]; |
||||
if (c) { |
||||
cate.attrs.push(c); |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
cate.children.push(el); |
||||
cate.children.sort((a, b) => a.sort - b.sort); |
||||
}); |
||||
|
||||
list.sort((a, b) => { |
||||
return a.sort - b.sort; |
||||
}); |
||||
attrList.value = list; |
||||
} |
||||
const selectedData = ref({}) |
||||
const attributeList = ref([]) |
||||
const setAttrList = (data) => { |
||||
let _data = data || []; |
||||
_data.map((e) => { |
||||
e.parentId = e.parent_id; |
||||
e.orderNum = e.id; |
||||
attributeMap.value[e.id] = e; |
||||
}); |
||||
|
||||
let __data = getTreeData(_data); |
||||
__data.forEach((e) => { |
||||
selectedData.value[e.id] = []; |
||||
}); |
||||
|
||||
attributeList.value = __data; |
||||
} |
||||
|
||||
const selectBuyType = (buyType) => { |
||||
buyTypes.value = buyType; |
||||
getGoodsPrice(); |
||||
} |
||||
const cate_map_list = ref({ |
||||
1: [], |
||||
2: [], |
||||
3: [], |
||||
4: [] |
||||
}) |
||||
const currentGood = ref(null) |
||||
const selectGoods = (cateId, goodsId) => { |
||||
// 当前选择的分类 |
||||
current.value = cateId; |
||||
currentGood.value = goodsId; |
||||
} |
||||
|
||||
const goodsChange = (e) => { |
||||
|
||||
// 将选择的分类数据插入到总数据 |
||||
// if (index >= 0) { |
||||
// cate_map_list.value[currentData]?.splice(index, 1) |
||||
// } else { |
||||
// cate_map_list.value[currentData]?.push(goodData); |
||||
// } |
||||
|
||||
getGoodsPrice(); |
||||
} |
||||
|
||||
const selectGoodsAttr = (cateId, attrId) => { |
||||
selectedGoodsAttrMap.value[cateId] = attrId; |
||||
getGoodsPrice(); |
||||
} |
||||
const calculated = ref(false) |
||||
|
||||
watch(() => totalPrice.value, (val, preVal) => { |
||||
totalPrice.value = calculated.value ? totalPrice.value : 0 |
||||
},{immediate: true}) |
||||
|
||||
// 计算价格 |
||||
function getGoodsPrice() { |
||||
// 遍历选中的产品 |
||||
const attrIds = [] |
||||
const goodsIds = [] |
||||
Object.values(selectedGoodsMap.value).forEach((cl: any)=> { |
||||
Object.values(cl).forEach((item)=> { |
||||
goodsIds.push(item) |
||||
}) |
||||
}) |
||||
Object.values(selectedGoodsAttrMap.value).forEach((dl: any) => { |
||||
if(!Array.isArray(dl)) { |
||||
attrIds.push(dl) |
||||
} |
||||
|
||||
}); |
||||
choseAttrsIds.value = attrIds |
||||
choseGoodsIds.value = goodsIds |
||||
queueApi.calc({ |
||||
buy_types: filterBuyTypes(), |
||||
attr_ids: attrIds, |
||||
goods_ids: goodsIds, |
||||
shop_id: shopId.value, |
||||
}) |
||||
.then((res: any) => { |
||||
console.log('获取到价格', res) |
||||
totalPrice.value = res.totalPrice * 100 || 0 |
||||
goodsTotalPrice.value = res.goodsTotalPrice * 100 || 0 |
||||
calculated.value = true |
||||
}) |
||||
.catch((err) => { |
||||
console.log('err', err) |
||||
totalPrice.value = 0 |
||||
goodsTotalPrice.value = 0 |
||||
calculated.value = false |
||||
}) |
||||
} |
||||
|
||||
function filterBuyTypes() { |
||||
return (buyTypes.value || []).filter((item) => item > 0) |
||||
} |
||||
|
||||
// const onGoodsChange = (data) => { |
||||
// totalPrice.value = data.total_amount; |
||||
// goodsTotalPrice.value = data.total_goods_amount; |
||||
// choseAttrsIds.value = data.attr_ids |
||||
// choseGoodsIds.value = data.goods_ids |
||||
// calculated.value = data.calculated; |
||||
// } |
||||
|
||||
// 提交订单 |
||||
function onSubmit() { |
||||
loading.value = true |
||||
// if (totalPrice.value === 0) { |
||||
// if (choseGoodsIds.value.length === 0) { |
||||
// showDialog({ message: '请先选择手办尺寸'.$t }) |
||||
// loading.value = false |
||||
// return |
||||
// } |
||||
// if (choseAttrsIds.value.length === 0) { |
||||
// showDialog({ message: '请先选择拍摄姿势'.$t }) |
||||
// loading.value = false |
||||
// return |
||||
// } |
||||
// showDialog({ message: '请先选择手办尺寸'.$t }) |
||||
// loading.value = false |
||||
// return |
||||
// } |
||||
|
||||
if (agree.value === false && isAll.value) { |
||||
hintShow.value = true |
||||
loading.value = false |
||||
return |
||||
} |
||||
|
||||
submitQueue().finally(() => { |
||||
loading.value = false |
||||
}) |
||||
} |
||||
|
||||
function submitQueue() { |
||||
const params = { |
||||
// attr_ids: choseAttrsIds.value, |
||||
// goods_ids: choseGoodsIds.value, |
||||
shop_id: shopId.value, |
||||
applyTime: dayjs(currentDate.value.join('-')).format('YYYY-MM-DD'), |
||||
customer_mobile: mobile.value, |
||||
customer_name: name.value, |
||||
// buy_types: filterBuyTypes(), |
||||
} |
||||
|
||||
return queueApi.queueAdd(params) |
||||
.then((res: any) => { |
||||
// showDialog({ message: '排队成功' }) |
||||
// const path = `/queue/succeed?shop_id=${shopId.value}&shop_name=${shopName.value}¤cy=${currency.value}&use_logo=${useLogo.value ? 1 : '' |
||||
// }&v=${v.value}&index=${res.index}` |
||||
const path = `/queue/succeed?shop_id=${shopId.value}&shop_name=${shopName.value}&use_logo=${useLogo.value ? 1 : '' |
||||
}&v=${v.value}&index=${res.index}` |
||||
router.push(path) |
||||
}) |
||||
.catch((err: Error) => { |
||||
showDialog({ message: err.message }) |
||||
}) |
||||
} |
||||
const goodsHidden = () => { |
||||
return hidden.value; |
||||
// return this.shop_id == 86; |
||||
} |
||||
// 默认选中 |
||||
const defaultSelected = () => { |
||||
|
||||
if(!goodsHidden()) { |
||||
return; |
||||
} |
||||
attrList.value.forEach((el) => { |
||||
if (el.id == 2) { |
||||
el.children.forEach(child => { |
||||
if (child.goods_name == '18cm') { |
||||
selectGoods(el.id, child.id) |
||||
} |
||||
}) |
||||
} |
||||
|
||||
if (el.attrs.length) { |
||||
el.attrs.forEach(child => { |
||||
if (child.attr_name == '站姿') { |
||||
selectGoodsAttr(el.id, child.id) |
||||
} |
||||
}) |
||||
} |
||||
// console.log(JSON.stringify(el)) |
||||
}) |
||||
} |
||||
|
||||
|
||||
function onConfirm({ selectedValues }) { |
||||
currentDate.value = selectedValues |
||||
console.log('currentDate', currentDate.value); |
||||
birthday.value = selectedValues.join('-') |
||||
showPicker.value = false |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="page" :class="[{'goods-hidden': goodsHidden()}]"> |
||||
<Hint :hintShow="hintShow" @onViewAgree="onViewAgree" @check="checkChange" @close="closeHint"></Hint> |
||||
<van-form @submit="onSubmit"> |
||||
<img v-if="useLogo" :src="logo" class="logo"> |
||||
<van-cell-group inset> |
||||
<van-field |
||||
v-model="shopName" disabled readonly name="shopName" label-width="65px" :label="'门店'.$t" |
||||
/> |
||||
<van-field |
||||
v-model="name" name="name" :label="'姓名'.$t" label-width="65px" :placeholder="'姓名'.$t" |
||||
:rules="[{ required: true, message: '请填写姓名'.$t }]" |
||||
/> |
||||
<van-field |
||||
v-model="mobile" name="mobile" :label="'手机'.$t" label-width="65px" :placeholder="'手机'.$t" |
||||
:rules="[{ required: true, message: '请填写手机'.$t }]" |
||||
/> |
||||
<van-field |
||||
v-model="birthday" is-link readonly name="birthday" label-width="65px" :label="'生日'.$t" :placeholder="'生日'.$t" |
||||
:rules="[{ required: true, message: '请填写生日'.$t }]" @click="showPicker = true" |
||||
/> |
||||
|
||||
<!-- <van-field :label="'购买类型'.$t" label-width="65px" v-if="attrBuyTypes.length > 0"> |
||||
<template #input> |
||||
<el-checkbox-group v-model="buyTypes" size="small" @change="selectBuyType"> |
||||
<el-checkbox-button v-for="al in attrBuyTypes" :key="al.id" :label="al.id"> |
||||
{{ al.name.$t }} |
||||
</el-checkbox-button> |
||||
</el-checkbox-group> |
||||
</template> |
||||
</van-field> --> |
||||
<!-- <template v-for="item in attrList"> |
||||
<template |
||||
v-if="item.children && item.children.length && item.children.length > 0" |
||||
> |
||||
<van-field :label="cate_map[item.id].$t" label-width="65px"> |
||||
<template #input> |
||||
<el-checkbox-group v-model="selectedGoodsMap[item.id]" size="small" @change="goodsChange"> |
||||
<el-checkbox-button v-for="cl in item.children" :key="cl.id" :label="cl.id" @click="selectGoods(item.id, cl.id)"> |
||||
{{ item.id == 1 ? '选购'.$t : cl.goods_name.$t }} |
||||
</el-checkbox-button> |
||||
</el-checkbox-group> |
||||
</template> |
||||
</van-field> |
||||
<template v-if="item.attrs.length"> |
||||
<van-field :label="'拍摄姿势'.$t" label-width="65px"> |
||||
<template #input> |
||||
<el-radio-group v-model="selectedGoodsAttrMap[item.id]" size="small"> |
||||
<el-radio-button v-for="rl in item.attrs" :key="rl.id" :label="rl.id" @click="selectGoodsAttr(item.id, rl.id)" > |
||||
{{ rl.attr_name.$t }} |
||||
</el-radio-button> |
||||
</el-radio-group> |
||||
</template> |
||||
</van-field> |
||||
</template> |
||||
</template> |
||||
</template> --> |
||||
<!-- <van-field> |
||||
<template #input> |
||||
<div class="warning-box"> |
||||
<img class="image" src="@/assets/common/warning.png" alt="" /> |
||||
<div class="tip">{{'以上为单人拍照参考价格，详细可与店员咨询'.$t}}</div> |
||||
</div> |
||||
</template> |
||||
</van-field> --> |
||||
</van-cell-group> |
||||
|
||||
<div class="empty-footer" /> |
||||
<!-- <van-submit-bar |
||||
v-if="!loading" :loading="loading" :currency="currency.$t" :price="totalPrice" :button-text="'提交'.$t" |
||||
:label="'合计：'.$t" |
||||
@submit="onSubmit" |
||||
> --> |
||||
<van-submit-bar |
||||
v-if="!loading" :loading="loading" :button-text="'提交'.$t" |
||||
@submit="onSubmit" |
||||
> |
||||
<!-- <van-checkbox v-model="checked">全选</van-checkbox> --> |
||||
<template #tip v-if="isAll"> |
||||
<van-checkbox icon-size="18px" v-model="agree" checked-color="#07c160"> |
||||
<span style="font-size: 14px;">{{'我已阅读并同意'.$t}}</span> |
||||
<a |
||||
href="javascript:;" class="agreement" |
||||
@click.stop="onViewAgree('user_service', 1)" |
||||
>《{{'用户服务协议'.$t}}》</a> |
||||
<a |
||||
href="javascript:;" class="agreement" |
||||
@click.stop="onViewAgree('user_privacy', 2)" |
||||
>《{{'用户隐私政策'.$t}}》</a>和 |
||||
<a v-if="store.brandInfo.agrees?.length > 2" |
||||
href="javascript:;" class="agreement" |
||||
@click.stop="onViewAgree('child_privacy', 3)" |
||||
>《{{'儿童隐私政策'.$t}}》</a> |
||||
</van-checkbox> |
||||
</template> |
||||
</van-submit-bar> |
||||
|
||||
<van-popup v-model:show="showPicker" position="bottom"> |
||||
<van-date-picker |
||||
v-model="currentDate" :min-date="minDate" :max-date="maxDate" @confirm="onConfirm" |
||||
@cancel="showPicker = false" |
||||
/> |
||||
</van-popup> |
||||
</van-form> |
||||
|
||||
<van-overlay :show="loading"> |
||||
<div class="loading-wrapper" @click.stop> |
||||
<van-loading size="24px"> |
||||
{{'加载中'.$t}}... |
||||
</van-loading> |
||||
</div> |
||||
</van-overlay> |
||||
|
||||
<van-dialog v-model:show="showAgree" :title="agreeTitle.$t" :confirm-button-text="'我已知晓'.$t" width="100vw" class="agree-dialog"> |
||||
<iframe :src="agreePage" class="agree-iframe" /> |
||||
</van-dialog> |
||||
</div> |
||||
|
||||
</template> |
||||
|
||||
<style lang="less" scoped> |
||||
:deep(.el-checkbox-button) { |
||||
--el-checkbox-button-checked-bg-color: #1aad19; |
||||
--el-checkbox-button-checked-border-color: #1aad19; |
||||
--el-checkbox-button-checked-color: #1aad19; |
||||
} |
||||
:deep(.el-radio-button) { |
||||
--el-radio-button-checked-bg-color: #1aad19; |
||||
--el-radio-button-checked-border-color: #1aad19; |
||||
} |
||||
:deep(.el-checkbox-button__inner:hover) { |
||||
color: #000; |
||||
} |
||||
:deep(.el-radio-button__inner:hover) { |
||||
color: #fff; |
||||
} |
||||
|
||||
:deep(.van-submit-bar__button--danger) { |
||||
background: #1aad19; |
||||
} |
||||
.goods-hidden{ |
||||
display: none; |
||||
} |
||||
.page { |
||||
background-color: #f5f5f5; |
||||
height: 100vh; |
||||
position: relative; |
||||
padding-top: 15px; |
||||
|
||||
} |
||||
.logo { |
||||
width: 96%; |
||||
margin: 0.5rem auto; |
||||
/* min-height:10rem; */ |
||||
text-align: center; |
||||
} |
||||
|
||||
.empty-footer { |
||||
height: 10rem |
||||
} |
||||
|
||||
.loading-wrapper { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
height: 100%; |
||||
} |
||||
|
||||
.agree-iframe { |
||||
height: 80vh; |
||||
width: 100vw; |
||||
} |
||||
|
||||
.warning-box { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
flex-direction: row; |
||||
.image { |
||||
margin-right: 5px; |
||||
width: 12px; |
||||
height: 12px; |
||||
} |
||||
|
||||
.tip { |
||||
font-size: 12px; |
||||
color: #666666; |
||||
} |
||||
|
||||
} |
||||
.agreement { |
||||
color: #1aad19; |
||||
font-size: 14px; |
||||
} |
||||
</style> |
||||
@ -1,57 +0,0 @@
@@ -1,57 +0,0 @@
|
||||
<script setup lang="tsx"> |
||||
import { useRoute } from 'vue-router' |
||||
import router from '@/router' |
||||
const index = ref('0') |
||||
|
||||
const route = useRoute() |
||||
onMounted(() => { |
||||
index.value = route.query.index as string |
||||
}) |
||||
|
||||
function goBack() { |
||||
router.back() |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="container"> |
||||
<van-empty :description="'排队成功'.$t" image="/resource/img/succeed.png"> |
||||
<div class="footer"> |
||||
<p class="text"> |
||||
{{"您前面还有".$t}} <span class="num">{{ index }}</span> {{"人请等待叫号".$t}} |
||||
</p> |
||||
<van-button @click="goBack"> |
||||
{{"返回".$t}} |
||||
</van-button> |
||||
</div> |
||||
</van-empty> |
||||
<div class="empty" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped lang="less"> |
||||
.container{ |
||||
height: 100vh; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
background: #ffffff; |
||||
} |
||||
.footer{ |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
.text{ |
||||
font-size: 14px; |
||||
color: #aaaaaa; |
||||
} |
||||
.num{ |
||||
color: #009944; |
||||
} |
||||
} |
||||
|
||||
.empty{ |
||||
height: 10vh; |
||||
} |
||||
</style> |
||||
@ -1,52 +0,0 @@
@@ -1,52 +0,0 @@
|
||||
export interface AttrResponse { |
||||
attrBuyTypes: AttrBuyType[] |
||||
attrs: Attr[] |
||||
goods: Good[] |
||||
hidden: boolean |
||||
} |
||||
|
||||
export interface AttrBuyType { |
||||
id: number |
||||
name: string |
||||
} |
||||
|
||||
export interface Attr { |
||||
id: number |
||||
attr_name: string |
||||
parent_id: number |
||||
attr_ratio: number |
||||
version_id: number |
||||
type_id: number |
||||
model_repair_cost: number |
||||
attr_level: number |
||||
attr_desc: string |
||||
attr_price: number |
||||
digital_price: number |
||||
createTime: string |
||||
updateTime: string |
||||
} |
||||
|
||||
export interface Good { |
||||
id: number |
||||
version_id: number |
||||
status: number |
||||
cate_id: number |
||||
base_attr_id: number |
||||
goods_name: string |
||||
goods_desc: string |
||||
attr_ids: string |
||||
attr_ids_list?: number[] |
||||
with_attr_ids: string |
||||
with_attr_ids_list: any |
||||
shop_ids: any |
||||
with_attr_discount: number |
||||
goods_type: number |
||||
goods_price: number |
||||
createTime: string |
||||
updateTime: string |
||||
cate_name: string |
||||
price: number |
||||
src_price: number |
||||
goods_count: number |
||||
attr_id: number |
||||
} |
||||
@ -1,62 +0,0 @@
@@ -1,62 +0,0 @@
|
||||
<script lang="tsx" setup> |
||||
import { useRoute } from 'vue-router' |
||||
import * as Dict from './dict' |
||||
import { actions as actionsApi } from '@/api/short_url' |
||||
import router from '@/router' |
||||
import Loading from '@/components/loading/index.vue' |
||||
const code = ref('') |
||||
const actions = ref([]) |
||||
const loading = ref(false) |
||||
|
||||
const route = useRoute() |
||||
onMounted(() => { |
||||
code.value = route.query.code as string |
||||
getActions() |
||||
}) |
||||
|
||||
function onAction(action: any) { |
||||
switch (action.value) { |
||||
case Dict.OperationWebsiteId: |
||||
window.location.href = action.jump_url |
||||
break |
||||
case Dict.OperationMiniProgramId: |
||||
window.location.href = action.jump_url |
||||
break |
||||
case Dict.OrderHistoryId: |
||||
router.push(`/shortUrl/orderTrack?code=${code.value}&action=orderTrack`) |
||||
break |
||||
case Dict.OrderInfoId: |
||||
router.push(`/shortUrl/orderInfo?code=${code.value}&action=orderInfo`) |
||||
break |
||||
case Dict.PrintOrderInfoId: |
||||
router.push(`/shortUrl/printOrderInfo?code=${code.value}&action=printOrderInfo`) |
||||
break |
||||
} |
||||
} |
||||
|
||||
function getActions() { |
||||
loading.value = true |
||||
actionsApi(code.value).then((res: any) => { |
||||
actions.value = res || [] |
||||
}).finally(() => { |
||||
loading.value = false |
||||
}) |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<van-cell-group> |
||||
<van-cell |
||||
v-for="action in actions" |
||||
:key="action.value" |
||||
:title="action.label" |
||||
:clickable="true" |
||||
@click="onAction(action)" |
||||
> |
||||
点击查看 |
||||
</van-cell> |
||||
</van-cell-group> |
||||
<Loading :loading="loading" /> |
||||
</template> |
||||
|
||||
<style lang="less" scoped></style> |
||||
@ -1,54 +0,0 @@
@@ -1,54 +0,0 @@
|
||||
<script setup lang="tsx"> |
||||
defineProps({ |
||||
activity: { |
||||
type: Object, |
||||
default: () => ({}), |
||||
}, |
||||
}) |
||||
function sortByTimeDesc(bjectInfo: any[]) { |
||||
// 进行逆序降序排序 |
||||
const tempRes = (bjectInfo || []).filter((el: any) => el?.routes?.length > 0).sort((a, b) => { |
||||
return new Date(b.acceptTime).getTime() - new Date(a.acceptTime).getTime() |
||||
}) |
||||
return tempRes |
||||
} |
||||
|
||||
function getAcceptTime(item) { |
||||
if (item && item.routes && item.routes[0]) |
||||
return item.routes[0].acceptTime |
||||
|
||||
return '' |
||||
} |
||||
|
||||
// function hasExpressRouter(routerList?: any[]) { |
||||
// if (!routerList) |
||||
// return false |
||||
|
||||
// return routerList.some((item) => { |
||||
// return item.routes && item.routes.length > 0 |
||||
// }) |
||||
// } |
||||
</script> |
||||
|
||||
<template> |
||||
<van-step |
||||
v-for="(item, index1) in sortByTimeDesc( |
||||
activity.routerInfo, |
||||
)" :key="index1" |
||||
> |
||||
<h3> |
||||
{{ item.routes[0] ? item.routes[0].acceptAddress : '' }} |
||||
({{ item.routes[0] ? item.routes[0].remark : '' }}) |
||||
</h3> |
||||
<p>{{ getAcceptTime(item) }}</p> |
||||
</van-step> |
||||
<van-step> |
||||
<h3> |
||||
{{ activity.msg }} {{ activity.express_no |
||||
}} |
||||
</h3> |
||||
<p>{{ activity.time }}</p> |
||||
</van-step> |
||||
</template> |
||||
|
||||
<style></style> |
||||
@ -1,28 +0,0 @@
@@ -1,28 +0,0 @@
|
||||
export const View3DPhotoAlbumCode = 'view_3d_photo_album' |
||||
export const View3DPhotoAlbumName = '查看3D相册' |
||||
export const View3DPhotoAlbumId = 1 |
||||
|
||||
// 运营网址
|
||||
export const OperationWebsiteCode = 'operation_website' |
||||
export const OperationWebsiteName = '运营网址' |
||||
export const OperationWebsiteId = 2 |
||||
|
||||
// 运营小程序
|
||||
export const OperationMiniProgramCode = 'operation_mini_program' |
||||
export const OperationMiniProgramName = '运营小程序' |
||||
export const OperationMiniProgramId = 3 |
||||
|
||||
// 订单履历
|
||||
export const OrderHistoryCode = 'order_history' |
||||
export const OrderHistoryName = '订单履历' |
||||
export const OrderHistoryId = 4 |
||||
|
||||
// 订单信息
|
||||
export const OrderInfoCode = 'order_info' |
||||
export const OrderInfoName = '订单信息' |
||||
export const OrderInfoId = 5 |
||||
|
||||
// 打印订单信息
|
||||
export const PrintOrderInfoCode = 'print_order_info' |
||||
export const PrintOrderInfoName = '打印订单信息' |
||||
export const PrintOrderInfoId = 6 |
||||
@ -1,171 +0,0 @@
@@ -1,171 +0,0 @@
|
||||
<script lang="tsx" setup> |
||||
import { useRoute } from 'vue-router' |
||||
import type { Ref } from 'vue' |
||||
import { modelSize as _modelSize, printType } from './utils' |
||||
import { orderInfo as orderInfoApi } from '@/api/short_url' |
||||
import Loading from '@/components/loading/index.vue' |
||||
|
||||
import { filterMsgButton } from '@/dict/status_dict' |
||||
|
||||
const code = ref('') |
||||
const src = ref('') |
||||
const data: Ref<any> = ref({}) |
||||
const tags = ref([]) |
||||
const loading = ref(false) |
||||
|
||||
const modelSize = _modelSize |
||||
|
||||
const route = useRoute() |
||||
onMounted(() => { |
||||
code.value = route.query.code as string |
||||
getInfo() |
||||
}) |
||||
|
||||
function getImage() { |
||||
src.value = '' |
||||
if (data.value.info && data.value.info.texture_cover_img) |
||||
src.value = `https://3dview.suwa3d.com/${data.value.info.texture_cover_img}` |
||||
} |
||||
|
||||
function getTags() { |
||||
// 判断是否有订单信息 |
||||
if (!data.value.info || !data.value.info.pid) |
||||
return |
||||
|
||||
// 遍历循环 |
||||
const arrTags = []; |
||||
// 数据信息遍历 |
||||
[data.value].forEach((item: any) => { |
||||
const arrTag = [] |
||||
// 加急单 |
||||
if (item.is_expedited) { |
||||
// 插入数据 |
||||
arrTag.push('加急') |
||||
} |
||||
|
||||
// 超时单 |
||||
if (item.is_expires) |
||||
arrTag.push('超时') |
||||
|
||||
const msg = printType(item.info.print_type) |
||||
if (msg !== '' && msg !== '正常') |
||||
arrTag.push(msg) |
||||
|
||||
arrTags.push(arrTag) |
||||
}) |
||||
tags.value = arrTags |
||||
} |
||||
|
||||
function isSample() { |
||||
return data.value.order_tag_type === 'sample' |
||||
} |
||||
|
||||
function getPrintTypeText() { |
||||
switch (data.value?.info?.print_type) { |
||||
case 1: |
||||
return '首次打印' |
||||
case 2: |
||||
return '重打' |
||||
case 3: |
||||
return '加打' |
||||
} |
||||
} |
||||
|
||||
function getStatusText() { |
||||
return filterMsgButton(data.value?.info?.status, 'text') |
||||
} |
||||
|
||||
function getInfo() { |
||||
loading.value = true |
||||
orderInfoApi(code.value).then((res: any) => { |
||||
data.value = res || {} |
||||
getImage() |
||||
getTags() |
||||
}).finally(() => { |
||||
loading.value = false |
||||
}) |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<van-cell-group title="基本信息"> |
||||
<van-cell title="拍照订单"> |
||||
<span> |
||||
{{ data?.info?.pid }} |
||||
</span> |
||||
</van-cell> |
||||
<van-cell title="尺寸*数量"> |
||||
<van-tag v-for="(item, key) in modelSize(data?.info?.model_size)" :key="key" type="success" plain> |
||||
{{ item }} |
||||
</van-tag> |
||||
</van-cell> |
||||
<van-cell title="提交建模时间" :value="data.submit_model_time" /> |
||||
<van-cell title="订单状态"> |
||||
<van-tag type="success"> |
||||
{{ loading ? '' : getStatusText() }} |
||||
</van-tag> |
||||
</van-cell> |
||||
<van-cell title="打印类型"> |
||||
<van-tag v-if="isSample()" type="success"> |
||||
样品 |
||||
</van-tag> |
||||
<van-tag type="success"> |
||||
{{ getPrintTypeText() }} |
||||
</van-tag> |
||||
</van-cell> |
||||
</van-cell-group> |
||||
|
||||
<van-cell-group title=" "> |
||||
<van-cell title="商品金额"> |
||||
<span>{{ data.goods_amount / 100 }} {{ data.currency }}</span> |
||||
</van-cell> |
||||
<van-cell v-if="data.other_fee_amount > 0 && data.other_fee_name !== ''" :title="`优惠金额(${data.other_fee_name})`"> |
||||
<span>{{ data.other_fee_amount / 100 }} {{ data.currency }}</span> |
||||
</van-cell> |
||||
<van-cell title="总计"> |
||||
<span>{{ data.total_amount / 100 }} {{ data.currency }}</span> |
||||
</van-cell> |
||||
</van-cell-group> |
||||
|
||||
<van-cell-group title="门店客户信息"> |
||||
<van-cell title="门店" :value="data?.info?.shop_name" /> |
||||
<van-cell title="客户"> |
||||
{{ data?.info?.customer_name }} (TEL:{{ data?.info?.customer_mobile }}) |
||||
</van-cell> |
||||
<van-cell title="寄送地址"> |
||||
<span> |
||||
{{ data?.info?.province_name }} |
||||
{{ data?.info?.city_name }} |
||||
{{ data?.info?.country_name }} |
||||
{{ data?.info?.address }} |
||||
</span> |
||||
</van-cell> |
||||
</van-cell-group> |
||||
|
||||
<van-cell-group title="重量"> |
||||
<van-cell title="毛重"> |
||||
<span>{{ data?.info?.model_gross_weight }}g</span> |
||||
</van-cell> |
||||
<van-cell title="净重"> |
||||
<span>{{ data?.info?.model_weight }}g</span> |
||||
</van-cell> |
||||
</van-cell-group> |
||||
<van-cell-group v-if="data.motherList && data.motherList.length > 0" title="其他"> |
||||
<van-cell title="子母单"> |
||||
<van-tag |
||||
v-for="(item, key) in data.motherList" :key="key" type="success" |
||||
class="mother-tag" |
||||
plain |
||||
> |
||||
{{ item.pid }} |
||||
</van-tag> |
||||
</van-cell> |
||||
</van-cell-group> |
||||
<Loading :loading="loading" /> |
||||
</template> |
||||
|
||||
<style lang="less" scoped> |
||||
.mother-tag{ |
||||
margin-right: 0.4rem; |
||||
} |
||||
</style> |
||||
@ -1,72 +0,0 @@
@@ -1,72 +0,0 @@
|
||||
<script lang="tsx" setup> |
||||
import { useRoute } from 'vue-router' |
||||
import type { Ref } from 'vue' |
||||
import OrderTrackItem from './components/orderTrackItem.vue' |
||||
import { orderTrack as orderTrackApi } from '@/api/short_url' |
||||
|
||||
const code = ref('') |
||||
const data: Ref<any> = ref({}) |
||||
const activities = ref([]) |
||||
const route = useRoute() |
||||
const loading = ref(false) |
||||
|
||||
onMounted(() => { |
||||
code.value = route.query.code as string |
||||
getInfo() |
||||
}) |
||||
|
||||
function getInfo() { |
||||
loading.value = true |
||||
orderTrackApi(code.value).then((res: any) => { |
||||
data.value = res || {} |
||||
formatData(data.value) |
||||
}).finally(() => { |
||||
loading.value = false |
||||
}) |
||||
} |
||||
|
||||
function formatData(res: any) { |
||||
const tempData = res |
||||
// 进行逆序降序排序 |
||||
const tempRes = tempData.sort((a, b) => { |
||||
return new Date(b.time).getTime() - new Date(a.time).getTime() |
||||
}) |
||||
const tempNewRes = [] |
||||
for (const i in tempRes) { |
||||
// 说明已经到头了 |
||||
// 判断当前是不是待修模状态 |
||||
const tempv1 = tempRes[i] |
||||
const tempv2 = tempRes[parseInt(i) + 1] |
||||
if (tempv1?.status === 5000) { |
||||
// 判断上下两个状态是否为待修模，并且订单id 是一样的，这种情况是不科学的，前端先手动过滤，后续找到真实原因 |
||||
if ( |
||||
tempv2?.status === 5000 |
||||
&& tempv2?.order_id === tempv1?.order_id |
||||
) |
||||
continue |
||||
} |
||||
|
||||
const msg = tempRes[i] |
||||
if (msg.msg.includes('已称完净重') && msg.msg.includes('等待打包')) { |
||||
const pattern = /已称完净重\(([\d\.?]+)g\),等待打包/ |
||||
const matches = msg.msg.match(pattern) |
||||
|
||||
if (matches) |
||||
msg.msg = `${'已称完净重'}(${matches[1]}g),${'等待打包'}` |
||||
} |
||||
|
||||
tempNewRes.push(msg) |
||||
} |
||||
|
||||
activities.value = tempNewRes |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<van-steps direction="vertical" :active="0"> |
||||
<OrderTrackItem v-for="(activity, index) in activities" :key="index" :activity="activity" /> |
||||
</van-steps> |
||||
<Loading :loading="loading" /> |
||||
</template> |
||||
|
||||
<style lang="less" scoped></style> |
||||
@ -1,170 +0,0 @@
@@ -1,170 +0,0 @@
|
||||
<script lang="tsx" setup> |
||||
import { useRoute } from 'vue-router' |
||||
import type { Ref } from 'vue' |
||||
import { modelSize as _modelSize, printType } from './utils' |
||||
import { printOrderInfo as printOrderInfoApi } from '@/api/short_url' |
||||
|
||||
import { filterMsgButton } from '@/dict/status_dict' |
||||
|
||||
const code = ref('') |
||||
const src = ref('') |
||||
const data: Ref<any> = ref({}) |
||||
const tags = ref([]) |
||||
const loading = ref(false) |
||||
|
||||
const modelSize = _modelSize |
||||
|
||||
const route = useRoute() |
||||
onMounted(() => { |
||||
code.value = route.query.code as string |
||||
getInfo() |
||||
}) |
||||
|
||||
function getImage() { |
||||
src.value = '' |
||||
if (data.value.info && data.value.info.texture_cover_img) |
||||
src.value = `https://3dview.suwa3d.com/${data.value.info.texture_cover_img}` |
||||
} |
||||
|
||||
function getTags() { |
||||
// 判断是否有订单信息 |
||||
if (!data.value.info || !data.value.info.pid) |
||||
return |
||||
|
||||
// 遍历循环 |
||||
const arrTags = []; |
||||
// 数据信息遍历 |
||||
[data.value].forEach((item: any) => { |
||||
const arrTag = [] |
||||
// 加急单 |
||||
if (item.is_expedited) { |
||||
// 插入数据 |
||||
arrTag.push('加急') |
||||
} |
||||
|
||||
// 超时单 |
||||
if (item.is_expires) |
||||
arrTag.push('超时') |
||||
|
||||
const msg = printType(item.info.print_type) |
||||
if (!!msg && msg !== '正常') |
||||
arrTag.push(msg) |
||||
|
||||
arrTags.push(arrTag) |
||||
}) |
||||
tags.value = arrTags |
||||
} |
||||
|
||||
function isSample() { |
||||
return data.value.order_tag_type === 'sample' |
||||
} |
||||
|
||||
function getPrintTypeText() { |
||||
switch (data.value?.info?.print_type) { |
||||
case 1: |
||||
return '首次打印' |
||||
case 2: |
||||
return '重打' |
||||
case 3: |
||||
return '加打' |
||||
} |
||||
} |
||||
|
||||
function getStatusText() { |
||||
return filterMsgButton(data.value?.info?.status, 'text') |
||||
} |
||||
|
||||
function getInfo() { |
||||
loading.value = true |
||||
printOrderInfoApi(code.value).then((res: any) => { |
||||
data.value = res || {} |
||||
getImage() |
||||
getTags() |
||||
}).finally(() => { |
||||
loading.value = false |
||||
}) |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<van-cell-group title="基本信息"> |
||||
<van-cell title="拍照订单"> |
||||
<span> |
||||
{{ data?.info?.pid }} |
||||
</span> |
||||
</van-cell> |
||||
<van-cell title="尺寸*数量"> |
||||
<van-tag v-for="(item, key) in modelSize(data?.info?.model_size)" :key="key" type="success" plain> |
||||
{{ item }} |
||||
</van-tag> |
||||
</van-cell> |
||||
<van-cell title="提交建模时间" :value="data.submit_model_time" /> |
||||
<van-cell title="订单状态"> |
||||
<van-tag type="success"> |
||||
{{ loading ? '' : getStatusText() }} |
||||
</van-tag> |
||||
</van-cell> |
||||
<van-cell title="打印类型"> |
||||
<van-tag v-if="isSample()" type="success"> |
||||
样品 |
||||
</van-tag> |
||||
<van-tag type="success"> |
||||
{{ getPrintTypeText() }} |
||||
</van-tag> |
||||
</van-cell> |
||||
</van-cell-group> |
||||
|
||||
<van-cell-group title=" "> |
||||
<van-cell title="商品金额"> |
||||
<span>{{ data.goods_amount / 100 }} {{ data.currency }}</span> |
||||
</van-cell> |
||||
<van-cell v-if="data.other_fee_amount > 0 && data.other_fee_name" :title="`优惠金额(${data.other_fee_name})`"> |
||||
<span>{{ data.other_fee_amount / 100 }} {{ data.currency }}</span> |
||||
</van-cell> |
||||
<van-cell title="总计"> |
||||
<span>{{ data.total_amount / 100 }} {{ data.currency }}</span> |
||||
</van-cell> |
||||
</van-cell-group> |
||||
|
||||
<van-cell-group title="门店客户信息"> |
||||
<van-cell title="门店" :value="data?.info?.shop_name" /> |
||||
<van-cell title="客户"> |
||||
{{ data?.info?.customer_name }} (TEL:{{ data?.info?.customer_mobile }}) |
||||
</van-cell> |
||||
<van-cell title="寄送地址"> |
||||
<span> |
||||
{{ data?.info?.province_name }} |
||||
{{ data?.info?.city_name }} |
||||
{{ data?.info?.country_name }} |
||||
{{ data?.info?.address }} |
||||
</span> |
||||
</van-cell> |
||||
</van-cell-group> |
||||
|
||||
<van-cell-group title="重量"> |
||||
<van-cell title="毛重"> |
||||
<span>{{ data?.info?.model_gross_weight }}g</span> |
||||
</van-cell> |
||||
<van-cell title="净重"> |
||||
<span>{{ data?.info?.model_weight }}g</span> |
||||
</van-cell> |
||||
</van-cell-group> |
||||
<van-cell-group v-if="data.motherList && data.motherList.length > 0" title="其他"> |
||||
<van-cell title="子母单"> |
||||
<van-tag |
||||
v-for="(item, key) in data.motherList" :key="key" type="success" |
||||
class="mother-tag" |
||||
plain |
||||
> |
||||
{{ item.pid }} |
||||
</van-tag> |
||||
</van-cell> |
||||
</van-cell-group> |
||||
<Loading :loading="loading" /> |
||||
</template> |
||||
|
||||
<style lang="less" scoped> |
||||
.mother-tag{ |
||||
margin-right: 0.4rem; |
||||
} |
||||
</style> |
||||
@ -1,34 +0,0 @@
@@ -1,34 +0,0 @@
|
||||
export function printType(val: number) { |
||||
let type = '' |
||||
switch (val) { |
||||
case 1: |
||||
type = '正常打印' |
||||
break |
||||
case 2: |
||||
type = '重打' |
||||
break |
||||
case 3: |
||||
type = '加打' |
||||
break |
||||
case 4: |
||||
type = '样品' |
||||
break |
||||
default: |
||||
break |
||||
} |
||||
return type |
||||
} |
||||
|
||||
export function modelSize(val: string) { |
||||
if (!val) |
||||
return '' |
||||
|
||||
// 分割字符串
|
||||
const arrV = val.split('__') |
||||
const data = [] |
||||
arrV.forEach((item) => { |
||||
const temp = item.replace(/_x/g, '*').replace(/_/g, '') |
||||
data.push(temp) |
||||
}) |
||||
return data |
||||
} |
||||
@ -1,377 +0,0 @@
@@ -1,377 +0,0 @@
|
||||
<template> |
||||
<van-popup v-model:show="actionShow" round position="bottom"> |
||||
<van-picker |
||||
:columns="actions" |
||||
@cancel="actionShow = false" |
||||
@confirm="onSelect" |
||||
/> |
||||
</van-popup> |
||||
<van-nav-bar v-if="!isWechat()" :title="store.navTitle" safe-area-inset-top/> |
||||
<div class="personalContainer"> |
||||
<div class="user-section"> |
||||
<div class="user-info-box" @click="toPerson"> |
||||
<div class="portrait-box"> |
||||
<img |
||||
class="portrait" |
||||
:src="headimgUrl" |
||||
/> |
||||
</div> |
||||
<div class="info-box" v-if="userInfo"> |
||||
<div class="username">{{ nickname }}</div> |
||||
<van-icon class="arrow" name="arrow" size="18px" color="#767676" /> |
||||
</div> |
||||
<div class="info-box" v-else> |
||||
<div @click="login" class="username">{{'请登录'.$t}}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- <div v-if="shootPerms" class="my_item" @click="takephoto" data-method="2"> |
||||
<div class="item_wrap"> |
||||
拍照 |
||||
<div class="right_arrow" ></div> |
||||
</div> |
||||
</div> |
||||
<div class="my_item" @click="login" data-method="2"> |
||||
<div class="item_wrap"> |
||||
领取订单 |
||||
<div class="right_arrow" ></div> |
||||
</div> |
||||
</div> --> |
||||
<!-- <div class="my_item" @click="toAddress" data-method="1"> |
||||
<div class="item_wrap"> |
||||
我的地址 |
||||
<div class="right_arrow" ></div> |
||||
</div> |
||||
</div> --> |
||||
<!-- <div class="my_item"> |
||||
<div class="item_wrap"> |
||||
<button class="feedback" open-type="feedback">反馈意见</button> |
||||
<div class="right_arrow" ></div> |
||||
</div> |
||||
</div> |
||||
<div class="my_item"> |
||||
<div class="item_wrap"> |
||||
<button class="feedback" open-type="contact">在线客服</button> |
||||
<div class="right_arrow" ></div> |
||||
</div> |
||||
</div> --> |
||||
<!-- <div class="my_item" @click="toAbout"> |
||||
<van-field |
||||
is-link |
||||
readonly |
||||
:label="'关于我们'.$t" |
||||
/> |
||||
</div> --> |
||||
<div class="my_item" @click="languageChange"> |
||||
<van-field |
||||
v-model="fieldValue" |
||||
is-link |
||||
readonly |
||||
:label="'语言'.$t" |
||||
/> |
||||
</div> |
||||
<div class="version"> |
||||
<div class="version_wrap"> |
||||
<div>v1.0.0</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<Tabbar></Tabbar> |
||||
|
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { useTranslation } from "i18next-vue"; |
||||
// import { showFailToast, showToast, FormInstance } from 'vant' |
||||
import { localStorage } from '@/utils/local-storage' |
||||
import {useStore} from '@/stores' |
||||
import { useTokenStore } from '@/stores/token' |
||||
import {headimgurl, nickname as fNickname} from './utils'; |
||||
|
||||
import {set as setLang} from '@/lang/i18n'; |
||||
import {toValueWithout} from '@/lang/utils'; |
||||
|
||||
const { i18next } = useTranslation(); |
||||
|
||||
// const { t, locale } = useI18n(); |
||||
const userInfo = ref({}) |
||||
const store = useStore(); |
||||
const tokenStore = useTokenStore(); |
||||
const {isWechat} = tokenStore; |
||||
const showAvaModal = ref(false) |
||||
const version = ref('') |
||||
const fieldValue = ref('简体中文'); |
||||
const actionShow = ref(false); |
||||
|
||||
const actions = ref([ |
||||
{ |
||||
id: 1, |
||||
value: "zh-CN", |
||||
text: "简体中文".$t, |
||||
}, |
||||
{ |
||||
id: 2, |
||||
value: "en", |
||||
text: '英文'.$t, |
||||
}, |
||||
{ |
||||
id: 3, |
||||
value: "zh-TW", |
||||
text: '繁体中文'.$t, |
||||
}, |
||||
{ |
||||
id: 4, |
||||
value: "ko", |
||||
text: '韩文'.$t, |
||||
}, |
||||
]); |
||||
|
||||
const nickname = computed(() => { |
||||
return fNickname(); |
||||
}); |
||||
|
||||
const initLang = actions.value.find((e: any) => e.value == i18next.language) || actions.value[0]; |
||||
fieldValue.value = initLang?.text; |
||||
|
||||
const shootPerms = ref(false) |
||||
const router = useRouter() |
||||
|
||||
const headimgUrl = computed(() => { |
||||
return headimgurl(); |
||||
}); |
||||
|
||||
onMounted(()=> { |
||||
userInfo.value = tokenStore.userInfo; |
||||
shootPerms.value = tokenStore.userInfo.shootPerms; |
||||
// const accountInfo = wx.getAccountInfoSync(); |
||||
// this.setData({ version: accountInfo.miniProgram.version || accountInfo.miniProgram.envVersion }) |
||||
|
||||
// this.setData({ |
||||
// userInfo: userInfo, |
||||
// shootPerms: userInfo?.shootPerms == true, |
||||
// }) |
||||
}) |
||||
|
||||
// 更多点击 |
||||
const languageChange = () => { |
||||
actionShow.value = !actionShow.value |
||||
} |
||||
|
||||
// 选择语言 |
||||
const onSelect = ({selectedOptions}) => { |
||||
const lang = selectedOptions[0].value; |
||||
// locale.value = selectedOptions[0].value; |
||||
localStorage.set("i18nextLng", lang); |
||||
actionShow.value = false; |
||||
fieldValue.value = selectedOptions[0].text |
||||
console.log("fieldValue.value", fieldValue.value) |
||||
// 更新标题语言 |
||||
setLang(lang).then((data) => { |
||||
console.log('switch lang succeed', data) |
||||
store.updateTitle("个人中心".$t) |
||||
}).catch((e) => { |
||||
console.log('switch lang faield', e); |
||||
}); |
||||
|
||||
} |
||||
|
||||
|
||||
const login = (e) => { |
||||
// 登录 |
||||
// WxLogin(this) |
||||
// if (!IsLogin()) { |
||||
// this.setData({ |
||||
// shootPerms: false |
||||
// }); |
||||
|
||||
// wx.navigateTo({ |
||||
// url: '/pages/login/login', |
||||
// }) |
||||
// return |
||||
// } else { |
||||
// let method = e.currentTarget.dataset.method; |
||||
// if (method == 1) { |
||||
// wx.navigateTo({ |
||||
// url: "/packageAddress/pages/address/address?select=true" |
||||
// }) |
||||
// } else if (method == 2) { |
||||
// wx.navigateTo({ |
||||
// url: "/pages/receive/receive" |
||||
// }) |
||||
// } |
||||
// } |
||||
} |
||||
// 测试 |
||||
const takephoto = () => { |
||||
// router.push({ |
||||
// path: "/packageTakePhoto/pages/takePhoto/takePhoto" |
||||
// }) |
||||
} |
||||
// 跳转到个人资料页 |
||||
const toPerson = () => { |
||||
// if (IsLogin()) { |
||||
router.push({ |
||||
path: '/person' |
||||
}) |
||||
// } else { |
||||
// showToast("请先登录"); |
||||
// setTimeout(() => { |
||||
// router.push({ |
||||
// path: '/pages/login/login', |
||||
// }) |
||||
// }, 1500) |
||||
// return |
||||
// } |
||||
} |
||||
|
||||
const toAddress = () => { |
||||
router.push({ |
||||
path: '/address' |
||||
}) |
||||
} |
||||
|
||||
const toAbout = () => { |
||||
router.push({ |
||||
path: "/about" |
||||
}) |
||||
} |
||||
|
||||
|
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.container { |
||||
/* height: 100%; */ |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
/* padding: 200px 0; */ |
||||
box-sizing: border-box; |
||||
background-color: rgba(245, 245, 245, 1.000000); |
||||
padding: 50px 0; |
||||
} |
||||
|
||||
.feedback { |
||||
margin: 0; |
||||
padding: 0; |
||||
background-color: transparent; |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
align-items: center; |
||||
|
||||
font-size: 16px; |
||||
font-weight: 400; |
||||
flex-grow: 1; |
||||
} |
||||
|
||||
|
||||
.userinfo { |
||||
display: flex; |
||||
/* flex-direction: column; |
||||
align-items: center; */ |
||||
} |
||||
|
||||
|
||||
.personalContainer { |
||||
width: 100%; |
||||
height: 100%; |
||||
background-color: rgba(245, 245, 245, 1.000000); |
||||
} |
||||
|
||||
.personalContainer .user-section { |
||||
height: 150px; |
||||
position: relative; |
||||
padding: 50px 15px 0; |
||||
} |
||||
|
||||
.user-info-box { |
||||
height: 60px; |
||||
display: flex; |
||||
align-items: center; |
||||
position: relative; |
||||
z-index: 1; |
||||
.portrait { |
||||
width: 65px; |
||||
height: 65px; |
||||
border: 2.5px solid #fff; |
||||
border-radius: 50%; |
||||
} |
||||
.username { |
||||
font-size: 20px; |
||||
color: #333333; |
||||
margin-left: 10px; |
||||
font-weight: 700; |
||||
} |
||||
.info-box { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.arrow { |
||||
margin-left: 10px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
.right_arrow { |
||||
border: solid gray; |
||||
border-width: 0 3px 3px 0; |
||||
padding: 3px; |
||||
transform: rotate(-45deg); |
||||
-webkit-transform: rotate(-45deg); |
||||
} |
||||
|
||||
.my_item { |
||||
width: 100%; |
||||
height: 50px; |
||||
display: flex; |
||||
background: #ffffff; |
||||
align-items: center; |
||||
border-bottom: 1px solid gainsboro; |
||||
.item_wrap { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
width: 90%; |
||||
margin: 0 auto; |
||||
} |
||||
} |
||||
.my_item button{line-height: 1.1;} |
||||
.my_item button::after{display: none;} |
||||
|
||||
.button { |
||||
width: 100%; |
||||
background: white; |
||||
border: none; |
||||
text-align: left; |
||||
padding: 0px; |
||||
margin: 0 !important; |
||||
line-height: 1.3; |
||||
font-size: 16px; |
||||
font-weight: 400; |
||||
} |
||||
|
||||
.button::after { |
||||
border: none; |
||||
border-radius: 0 |
||||
} |
||||
|
||||
.version { |
||||
display: flex; |
||||
width: 100%; |
||||
height: 50px; |
||||
color: #606266; |
||||
background: #ffffff; |
||||
.version_wrap { |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
align-items: center; |
||||
width: 90%; |
||||
margin: 0 auto; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,191 +0,0 @@
@@ -1,191 +0,0 @@
|
||||
<template> |
||||
<van-nav-bar v-if="!isWechat()" :title="store.navTitle" left-text="返回" left-arrow |
||||
@click-left="returnClick" safe-area-inset-top/> |
||||
<div class="page"> |
||||
<van-dialog |
||||
:title="'确认退出登录？'.$t" |
||||
v-model:show="dialogShow" |
||||
:confirmButtonText="'确认退出'.$t" |
||||
:cancelButtonText="'我再想想'.$t" |
||||
@confirm="onLogout" |
||||
showCancelButton |
||||
confirm-button-color="#AAAAAA" |
||||
cancel-button-color="#009944" |
||||
round |
||||
/> |
||||
<div class="container"> |
||||
<div class="person-box"> |
||||
<div class="column"> |
||||
<div class="text">{{'头像'.$t}}</div> |
||||
<div class="avatar-box"> |
||||
<img :src="headimgUrl" class="avatar"/> |
||||
</div> |
||||
</div> |
||||
<div class="column"> |
||||
<div class="text">{{'账号'.$t}}</div> |
||||
<div class="nickname">{{ nickname }}</div> |
||||
<!-- <div class="input_box"> |
||||
<input type="nickname" class="nickname" :value="userInfo.nickname"/> |
||||
</div> --> |
||||
</div> |
||||
<!-- <div class="column"> |
||||
<div class="text">{{'性别'.$t}}</div> |
||||
<div class="sex">{{sex}}</div> |
||||
</div> --> |
||||
</div> |
||||
<div class="logout"> |
||||
<div class="logout-btn" @click="showLogout">{{'退出登录'.$t}}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { useStore } from '@/stores'; |
||||
import { useTokenStore } from '@/stores/token'; |
||||
import { closeToast, showLoadingToast, showToast } from 'vant'; |
||||
import {headimgurl, logout, nickname as fNickname} from './utils'; |
||||
|
||||
const store = useStore() |
||||
const tokenStore = useTokenStore() |
||||
const router = useRouter() |
||||
const {isWechat} = tokenStore; |
||||
|
||||
const userInfo = ref("") |
||||
const dialogShow = ref(false) |
||||
const sex = ref("") |
||||
|
||||
const headimgUrl = computed(() => { |
||||
return headimgurl(); |
||||
}); |
||||
|
||||
const nickname = computed(() => { |
||||
return fNickname(); |
||||
}) |
||||
|
||||
onMounted(()=> { |
||||
userInfo.value = tokenStore.userInfo; |
||||
let sexId = userInfo.value.sex; |
||||
switch(sexId) { |
||||
case 1: sex.value = "男";break; |
||||
case 2: sex.value = "女";break; |
||||
default: sex.value = "未知";break; |
||||
} |
||||
}) |
||||
|
||||
const returnClick = () => history.back(); |
||||
// 点击是否要退出登录 |
||||
const showLogout = () => { |
||||
dialogShow.value = true |
||||
} |
||||
// 退出登录 |
||||
const onLogout = () => { |
||||
showLoadingToast({message: "退出登录中...".$t, forbidClick: true,}); |
||||
setTimeout(()=> { |
||||
// TODO: 退出社会化登录 |
||||
tokenStore.logout(); |
||||
logout(); |
||||
// wx.removeStorage({ |
||||
// key: 'authorization', |
||||
// }) |
||||
router.push({ |
||||
path: '/myOrder', |
||||
}) |
||||
closeToast(); |
||||
}, 1500) |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.page { |
||||
width: 100vw; |
||||
min-height: 100vh; |
||||
box-sizing: border-box; |
||||
background-color: #F5F5F5; |
||||
/* 利用新增的 env() 和 constant() 特性，自动计算底部安全距离 */ |
||||
padding-bottom: constant(safe-area-inset-bottom); |
||||
padding-bottom: env(safe-area-inset-bottom); |
||||
/* 可计算 */ |
||||
// padding-bottom: calc(124px + env(safe-area-inset-bottom)); |
||||
} |
||||
.container { |
||||
width: 100%; |
||||
padding: 15px 0; |
||||
height: auto; |
||||
.person-box { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
position: relative; |
||||
width: 345px; |
||||
height: 175px; |
||||
margin: 0 auto; |
||||
padding: 12px 0; |
||||
background: #ffffff; |
||||
border-radius: 8px; |
||||
.column { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
position: relative; |
||||
width: 100%; |
||||
height: 56px; |
||||
padding: 9px 16px; |
||||
box-sizing: border-box; |
||||
.text { |
||||
color: #767676; |
||||
font-size: 16px; |
||||
font-weight: 400; |
||||
font-family: Source Han Sans CN-Regular; |
||||
} |
||||
.avatar-box { |
||||
position: relative; |
||||
width: 38px; |
||||
height: 38px; |
||||
border-radius: 16px; |
||||
overflow: hidden; |
||||
margin: 0; |
||||
padding: 0; |
||||
.avatar { |
||||
position: relative; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
.input_box { |
||||
display: flex; |
||||
align-items: center; |
||||
min-width: 90px; |
||||
.nickname { |
||||
text-align: right; |
||||
appearance: none; |
||||
border: none; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.logout { |
||||
position: absolute; |
||||
bottom: 0%; |
||||
left: 50%; |
||||
width: 345px; |
||||
height: 192px; |
||||
margin-left: -172.5px; |
||||
.logout-btn { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: relative; |
||||
width: 100%; |
||||
height: 42px; |
||||
background: #ffffff; |
||||
color: #F56C6C; |
||||
font-size: 16px; |
||||
font-family: Source Han Sans CN-Regular; |
||||
font-weight: 400; |
||||
border-radius: 8px; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,34 +0,0 @@
@@ -1,34 +0,0 @@
|
||||
import defaultHeadimgUrl from '@/assets/common/avatar.png' |
||||
import { useTokenStore } from '@/stores/token' |
||||
import hello from 'hellojs' |
||||
|
||||
export function headimgurl() { |
||||
const tokenStore = useTokenStore(); |
||||
const user = tokenStore.userInfo; |
||||
if (user?.headimgurl) { |
||||
return user?.headimgurl; |
||||
} |
||||
return defaultHeadimgUrl; |
||||
} |
||||
|
||||
export function nickname() { |
||||
const tokenStore = useTokenStore(); |
||||
const user = tokenStore.userInfo; |
||||
console.log("tokenStore.userInfo", tokenStore.userInfo) |
||||
if (user.nickname) { |
||||
return user.nickname; |
||||
} else { |
||||
return user.social_type + user.id; |
||||
} |
||||
} |
||||
|
||||
export function logout() { |
||||
const tokenStore = useTokenStore(); |
||||
const user = tokenStore.userInfo; |
||||
const socialType = user.social_type; |
||||
if (!socialType) { |
||||
return Promise.reject('未知的登录方式'); |
||||
} |
||||
|
||||
return hello(socialType).logout(); |
||||
} |
||||
Loading…
Reference in new issue