20260929
This commit is contained in:
@@ -0,0 +1,344 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="record">
|
||||
<view>
|
||||
<view class="record-meta" @click="goDetail" v-if="item.taskTitle">任务：{{ item.taskTitle }}</view>
|
||||
<view class="record-meta" @click="goDetail" v-if="item.chainName && item.chainName !== '-'">连锁：{{ item.chainName }}</view>
|
||||
<view class="record-meta" @click="goDetail" v-if="item.merchantName">门店：{{ item.merchantName }}</view>
|
||||
<view class="record-meta" @click="goDetail">提交人：{{ item.owner }} · {{ item.submitTime }}</view>
|
||||
<view v-if="item.imageList && item.imageList.length" class="record-media">
|
||||
<view v-if="item.imageList && item.imageList.length" class="media-images">
|
||||
<image
|
||||
v-for="(img, idx) in item.imageList"
|
||||
:key="idx"
|
||||
class="media-image"
|
||||
:src="resolveMediaUrl(img)"
|
||||
mode="aspectFill"
|
||||
@click="emitPreview(resolveMediaUrl(img), buildPreviewList(item.imageList))"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="record-actions" v-if="item.status === 1">
|
||||
<view class="flex-1 mx-15">
|
||||
<view class="chip w-90p" @tap="$emit('approve', item)">通过</view>
|
||||
</view>
|
||||
<view class="flex-1 mx-15">
|
||||
<view class="chip w-90p danger-chip" @tap="$emit('reject', item)">驳回</view>
|
||||
</view>
|
||||
<view class="flex-1 mx-15">
|
||||
<view class="chip w-90p" @tap="openCopyPopup">抄送</view>
|
||||
</view>
|
||||
<view class="flex-1 mx-15">
|
||||
<view class="chip w-90p" @tap="goDetail">查看详情</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="record-actions" v-if="item.status === 3">
|
||||
<view class="flex-1 mx-15">
|
||||
<view class="chip w-90p" @tap="openCopyPopup">抄送</view>
|
||||
</view>
|
||||
<view class="flex-1 mx-15">
|
||||
<view class="chip w-90p" @tap="goDetail">查看详情</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="showCopyPopup" class="copy-popup-mask" @tap="closeCopyPopup" @touchmove.stop.prevent></view>
|
||||
<view v-if="showCopyPopup" class="copy-popup card" @tap.stop>
|
||||
<view class="copy-popup-head">
|
||||
<view class="section-title">抄送</view>
|
||||
<view class="close-btn" @tap="closeCopyPopup">关闭</view>
|
||||
</view>
|
||||
<view class="copy-search-row">
|
||||
<input
|
||||
v-model="copyKeyword"
|
||||
class="copy-search-input"
|
||||
type="text"
|
||||
placeholder="输入姓名/手机号搜索用户"
|
||||
@confirm="searchCopyUsers"
|
||||
/>
|
||||
<view class="copy-search-btn" @tap="searchCopyUsers">搜索</view>
|
||||
</view>
|
||||
<view v-if="copySearching" class="copy-loading">搜索中...</view>
|
||||
<scroll-view v-else class="copy-user-list" scroll-y>
|
||||
<view
|
||||
v-for="user in copyUsers"
|
||||
:key="`copy-user-${user.id}`"
|
||||
:class="['copy-user-item', selectedCopyUserId === user.id ? 'copy-user-item-active' : '']"
|
||||
@tap="selectedCopyUserId = user.id"
|
||||
>
|
||||
<text class="copy-user-name">{{ user.label }}</text>
|
||||
<text class="copy-user-phone">{{ user.phone || '' }}</text>
|
||||
</view>
|
||||
<view v-if="copyUsers.length === 0" class="copy-empty">暂无用户</view>
|
||||
</scroll-view>
|
||||
<view class="primary-btn copy-submit" @tap="submitCopy">确认抄送</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {userSearchReq} from "@/api/user";
|
||||
import {copyUserTaskReq} from "@/api/task";
|
||||
|
||||
export default {
|
||||
name: 'AuditMovementItem',
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showCopyPopup: false,
|
||||
copyKeyword: '',
|
||||
copyUsers: [],
|
||||
copySearching: false,
|
||||
selectedCopyUserId: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
emitPreview(url, list) {
|
||||
this.$emit('preview', url, list)
|
||||
},
|
||||
resolveMediaUrl(media) {
|
||||
if (!media) return ''
|
||||
if (typeof media === 'string') return media
|
||||
return media.url || media.path || media.image || ''
|
||||
},
|
||||
buildPreviewList(list) {
|
||||
const items = Array.isArray(list) ? list : []
|
||||
return items.map(item => this.resolveMediaUrl(item)).filter(Boolean)
|
||||
},
|
||||
goDetail() {
|
||||
const taskId = this.item.taskId
|
||||
if (taskId === '' || taskId === null || taskId === undefined) {
|
||||
uni.showToast({
|
||||
title: '任务ID缺失',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
const title = this.item.merchantName || this.item.taskTitle || ''
|
||||
const reward = this.item.taskReward !== undefined && this.item.taskReward !== null ? this.item.taskReward : ''
|
||||
const target = this.item.taskTarget || ''
|
||||
let url = `/pages/task/detail?id=${taskId}`
|
||||
url += `&fromAudit=1`
|
||||
if (this.item.id !== undefined && this.item.id !== null && this.item.id !== '') {
|
||||
url += `&auditId=${encodeURIComponent(String(this.item.id))}`
|
||||
}
|
||||
if (this.item.taskId !== undefined && this.item.taskId !== null && this.item.taskId !== '') {
|
||||
url += `&auditTaskId=${encodeURIComponent(String(this.item.taskId))}`
|
||||
}
|
||||
if (this.item.userId !== undefined && this.item.userId !== null && this.item.userId !== '') {
|
||||
url += `&auditUserId=${encodeURIComponent(String(this.item.userId))}`
|
||||
}
|
||||
if (this.item.status !== undefined && this.item.status !== null && this.item.status !== '') {
|
||||
url += `&auditStatus=${encodeURIComponent(String(this.item.status))}`
|
||||
}
|
||||
if (title) url += `&title=${encodeURIComponent(title)}`
|
||||
if (reward !== '') url += `&reward=${encodeURIComponent(String(reward))}`
|
||||
if (target) url += `&target=${encodeURIComponent(target)}`
|
||||
uni.navigateTo({url})
|
||||
},
|
||||
unwrapList(data) {
|
||||
if (Array.isArray(data)) return data
|
||||
if (!data || typeof data !== 'object') return []
|
||||
const keys = ['list', 'records', 'rows', 'items', 'data', 'result']
|
||||
for (let i = 0; i < keys.length; i++) {
|
||||
if (Array.isArray(data[keys[i]])) return data[keys[i]]
|
||||
}
|
||||
return []
|
||||
},
|
||||
normalizeUser(item) {
|
||||
const id = item.id ?? item.userId ?? item.uid
|
||||
const nickname = item.nickname || item.nickName || ''
|
||||
const realName = item.realName || item.real_name || item.name || ''
|
||||
const phone = item.phone || item.mobile || item.tel || ''
|
||||
const label = realName || nickname || phone || `用户${id || ''}`
|
||||
return {
|
||||
id,
|
||||
label,
|
||||
phone
|
||||
}
|
||||
},
|
||||
openCopyPopup() {
|
||||
this.copyKeyword = ''
|
||||
this.copyUsers = []
|
||||
this.selectedCopyUserId = ''
|
||||
this.showCopyPopup = true
|
||||
},
|
||||
closeCopyPopup() {
|
||||
this.showCopyPopup = false
|
||||
},
|
||||
async searchCopyUsers() {
|
||||
const keyword = (this.copyKeyword || '').trim()
|
||||
if (!keyword) {
|
||||
uni.showToast({
|
||||
title: '请输入keyword',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.copySearching = true
|
||||
try {
|
||||
const {data} = await userSearchReq({
|
||||
keywords: keyword
|
||||
})
|
||||
const list = this.unwrapList(data)
|
||||
this.copyUsers = list
|
||||
.map(item => this.normalizeUser(item))
|
||||
.filter(item => item.id !== undefined && item.id !== null && String(item.id).trim() !== '')
|
||||
this.selectedCopyUserId = this.copyUsers[0] ? this.copyUsers[0].id : ''
|
||||
} catch (error) {
|
||||
this.copyUsers = []
|
||||
uni.showToast({
|
||||
title: '搜索失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.copySearching = false
|
||||
}
|
||||
},
|
||||
async submitCopy() {
|
||||
const targetUserId = this.selectedCopyUserId
|
||||
if (targetUserId === '' || targetUserId === null || targetUserId === undefined) {
|
||||
uni.showToast({
|
||||
title: '请选择用户',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
try {
|
||||
await copyUserTaskReq({
|
||||
id: this.item.id,
|
||||
taskId: this.item.taskId,
|
||||
sourceUserId: this.item.userId,
|
||||
userId: targetUserId,
|
||||
isCopy: 1
|
||||
})
|
||||
uni.showToast({
|
||||
title: '抄送成功',
|
||||
icon: 'success'
|
||||
})
|
||||
this.closeCopyPopup()
|
||||
this.$emit('copied')
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: '抄送失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './record.scss';
|
||||
|
||||
.copy-popup-mask {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.copy-popup {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 40rpx;
|
||||
transform: translateX(-50%);
|
||||
width: 88%;
|
||||
max-height: 70vh;
|
||||
overflow: auto;
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.copy-popup-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
color: var(--text-sub);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.copy-search-row {
|
||||
display: flex;
|
||||
gap: 10rpx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.copy-search-input {
|
||||
flex: 1;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #f3f4f6;
|
||||
padding: 0 16rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.copy-search-btn {
|
||||
min-width: 110rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 12rpx;
|
||||
background: var(--brand-primary);
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.copy-loading,
|
||||
.copy-empty {
|
||||
margin-top: 14rpx;
|
||||
font-size: 24rpx;
|
||||
color: var(--text-sub);
|
||||
}
|
||||
|
||||
.copy-user-list {
|
||||
margin-top: 14rpx;
|
||||
max-height: 420rpx;
|
||||
}
|
||||
|
||||
.copy-user-item {
|
||||
padding: 12rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #f9fafb;
|
||||
margin-bottom: 10rpx;
|
||||
border: 1rpx solid #e5e7eb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.copy-user-item-active {
|
||||
border-color: var(--brand-primary);
|
||||
background: #ecfdf5;
|
||||
}
|
||||
|
||||
.copy-user-name {
|
||||
font-size: 26rpx;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.copy-user-phone {
|
||||
font-size: 22rpx;
|
||||
color: var(--text-sub);
|
||||
}
|
||||
|
||||
.copy-submit {
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,348 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="record">
|
||||
<view>
|
||||
<view class="record-meta" @click="goDetail" v-if="item.taskTitle">任务：{{ item.taskTitle }}</view>
|
||||
<view class="record-meta" @click="goDetail" v-if="item.chainName && item.chainName !== '-'">连锁：{{ item.chainName }}</view>
|
||||
<view class="record-meta" @click="goDetail" v-if="item.merchantName">门店：{{ item.merchantName }}</view>
|
||||
<view class="record-meta" @click="goDetail">提交人：{{ item.owner }} · {{ item.submitTime }}</view>
|
||||
<view v-if="item.imageList && item.imageList.length" class="record-media">
|
||||
<view v-if="item.imageList && item.imageList.length" class="media-images">
|
||||
<image
|
||||
v-for="(img, idx) in item.imageList"
|
||||
:key="idx"
|
||||
class="media-image"
|
||||
:src="resolveMediaUrl(img)"
|
||||
mode="aspectFill"
|
||||
@click="emitPreview(resolveMediaUrl(img), buildPreviewList(item.imageList))"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="record-actions" v-if="item.status === 1">
|
||||
<view class="flex-1 mx-15">
|
||||
<view class="chip w-90p" @tap="$emit('approve', item)">通过</view>
|
||||
</view>
|
||||
<view class="flex-1 mx-15">
|
||||
<view class="chip w-90p danger-chip" @tap="$emit('reject', item)">驳回</view>
|
||||
</view>
|
||||
<view class="flex-1 mx-15">
|
||||
<view class="chip w-90p" @tap="openCopyPopup">抄送</view>
|
||||
</view>
|
||||
<view class="flex-1 mx-15">
|
||||
<view class="chip w-90p" @tap="goDetail">查看详情</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="record-actions" v-if="item.status === 3">
|
||||
<view class="flex-1 mx-15">
|
||||
<view class="chip w-90p" @tap="openCopyPopup">抄送</view>
|
||||
</view>
|
||||
<view class="flex-1 mx-15">
|
||||
<view class="chip w-90p" @tap="goDetail">查看详情</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="showCopyPopup" class="copy-popup-mask" @tap="closeCopyPopup" @touchmove.stop.prevent></view>
|
||||
<view v-if="showCopyPopup" class="copy-popup card" @tap.stop>
|
||||
<view class="copy-popup-head">
|
||||
<view class="section-title">抄送</view>
|
||||
<view class="close-btn" @tap="closeCopyPopup">关闭</view>
|
||||
</view>
|
||||
<view class="copy-search-row">
|
||||
<input
|
||||
v-model="copyKeyword"
|
||||
class="copy-search-input"
|
||||
type="text"
|
||||
placeholder="输入姓名/手机号搜索用户"
|
||||
@confirm="searchCopyUsers"
|
||||
/>
|
||||
<view class="copy-search-btn" @tap="searchCopyUsers">搜索</view>
|
||||
</view>
|
||||
<view v-if="copySearching" class="copy-loading">搜索中...</view>
|
||||
<scroll-view v-else class="copy-user-list" scroll-y>
|
||||
<view
|
||||
v-for="user in copyUsers"
|
||||
:key="`copy-user-${user.id}`"
|
||||
:class="['copy-user-item', selectedCopyUserId === user.id ? 'copy-user-item-active' : '']"
|
||||
@tap="selectedCopyUserId = user.id"
|
||||
>
|
||||
<text class="copy-user-name">{{ user.label }}</text>
|
||||
<text class="copy-user-phone">{{ user.phone || '' }}</text>
|
||||
</view>
|
||||
<view v-if="copyUsers.length === 0" class="copy-empty">暂无用户</view>
|
||||
</scroll-view>
|
||||
<view class="primary-btn copy-submit" @tap="submitCopy">确认抄送</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {userSearchReq} from "@/api/user";
|
||||
import {copyUserTaskReq} from "@/api/task";
|
||||
|
||||
export default {
|
||||
name: 'AuditStoreVisitItem',
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showCopyPopup: false,
|
||||
copyKeyword: '',
|
||||
copyUsers: [],
|
||||
copySearching: false,
|
||||
selectedCopyUserId: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
emitPreview(url, list) {
|
||||
this.$emit('preview', url, list)
|
||||
},
|
||||
resolveMediaUrl(media) {
|
||||
if (!media) return ''
|
||||
if (typeof media === 'string') return media
|
||||
return media.url || media.path || media.image || ''
|
||||
},
|
||||
buildPreviewList(list) {
|
||||
const items = Array.isArray(list) ? list : []
|
||||
return items.map(item => this.resolveMediaUrl(item)).filter(Boolean)
|
||||
},
|
||||
goDetail() {
|
||||
const taskId = this.item.taskId
|
||||
if (taskId === '' || taskId === null || taskId === undefined) {
|
||||
uni.showToast({
|
||||
title: '任务ID缺失',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
const title = this.item.merchantName || this.item.taskTitle || ''
|
||||
const reward = this.item.taskReward !== undefined && this.item.taskReward !== null ? this.item.taskReward : ''
|
||||
const target = this.item.taskTarget || ''
|
||||
let url = `/pages/task/detail?id=${taskId}`
|
||||
url += `&fromAudit=1`
|
||||
if (this.item.id !== undefined && this.item.id !== null && this.item.id !== '') {
|
||||
url += `&auditId=${encodeURIComponent(String(this.item.id))}`
|
||||
}
|
||||
if (this.item.taskId !== undefined && this.item.taskId !== null && this.item.taskId !== '') {
|
||||
url += `&auditTaskId=${encodeURIComponent(String(this.item.taskId))}`
|
||||
}
|
||||
if (this.item.userId !== undefined && this.item.userId !== null && this.item.userId !== '') {
|
||||
url += `&auditUserId=${encodeURIComponent(String(this.item.userId))}`
|
||||
}
|
||||
if (this.item.status !== undefined && this.item.status !== null && this.item.status !== '') {
|
||||
url += `&auditStatus=${encodeURIComponent(String(this.item.status))}`
|
||||
}
|
||||
if (title) url += `&title=${encodeURIComponent(title)}`
|
||||
if (reward !== '') url += `&reward=${encodeURIComponent(String(reward))}`
|
||||
if (target) url += `&target=${encodeURIComponent(target)}`
|
||||
uni.navigateTo({url})
|
||||
},
|
||||
unwrapList(data) {
|
||||
if (Array.isArray(data)) return data
|
||||
if (!data || typeof data !== 'object') return []
|
||||
const keys = ['list', 'records', 'rows', 'items', 'data', 'result']
|
||||
for (let i = 0; i < keys.length; i++) {
|
||||
if (Array.isArray(data[keys[i]])) return data[keys[i]]
|
||||
}
|
||||
return []
|
||||
},
|
||||
normalizeUser(item) {
|
||||
const id = item.id ?? item.userId ?? item.uid
|
||||
const nickname = item.nickname || item.nickName || ''
|
||||
const realName = item.realName || item.real_name || item.name || ''
|
||||
const phone = item.phone || item.mobile || item.tel || ''
|
||||
const label = realName || nickname || phone || `用户${id || ''}`
|
||||
return {
|
||||
id,
|
||||
label,
|
||||
phone
|
||||
}
|
||||
},
|
||||
openCopyPopup() {
|
||||
this.copyKeyword = ''
|
||||
this.copyUsers = []
|
||||
this.selectedCopyUserId = ''
|
||||
this.showCopyPopup = true
|
||||
},
|
||||
closeCopyPopup() {
|
||||
this.showCopyPopup = false
|
||||
},
|
||||
async searchCopyUsers() {
|
||||
const keyword = (this.copyKeyword || '').trim()
|
||||
if (!keyword) {
|
||||
uni.showToast({
|
||||
title: '请输入keyword',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.copySearching = true
|
||||
try {
|
||||
const {data} = await userSearchReq({
|
||||
keywords: keyword
|
||||
})
|
||||
const list = this.unwrapList(data)
|
||||
this.copyUsers = list
|
||||
.map(item => this.normalizeUser(item))
|
||||
.filter(item => item.id !== undefined && item.id !== null && String(item.id).trim() !== '')
|
||||
this.selectedCopyUserId = this.copyUsers[0] ? this.copyUsers[0].id : ''
|
||||
} catch (error) {
|
||||
this.copyUsers = []
|
||||
uni.showToast({
|
||||
title: '搜索失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.copySearching = false
|
||||
}
|
||||
},
|
||||
async submitCopy() {
|
||||
const targetUserId = this.selectedCopyUserId
|
||||
if (targetUserId === '' || targetUserId === null || targetUserId === undefined) {
|
||||
uni.showToast({
|
||||
title: '请选择用户',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
try {
|
||||
await copyUserTaskReq({
|
||||
id: this.item.id,
|
||||
taskId: this.item.taskId,
|
||||
sourceUserId: this.item.userId,
|
||||
userId: targetUserId,
|
||||
isCopy: 1
|
||||
})
|
||||
uni.showToast({
|
||||
title: '抄送成功',
|
||||
icon: 'success'
|
||||
})
|
||||
this.closeCopyPopup()
|
||||
this.$emit('copied')
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: '抄送失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './record.scss';
|
||||
|
||||
.copy-popup-mask {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.copy-popup {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 40rpx;
|
||||
transform: translateX(-50%);
|
||||
width: 88%;
|
||||
max-height: 70vh;
|
||||
overflow: auto;
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.copy-popup-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
color: #6b7280;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.copy-search-row {
|
||||
display: flex;
|
||||
gap: 10rpx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.copy-search-input {
|
||||
flex: 1;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #f3f4f6;
|
||||
padding: 0 16rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.copy-search-btn {
|
||||
min-width: 110rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #2fc6a7;
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.copy-loading,
|
||||
.copy-empty {
|
||||
margin-top: 14rpx;
|
||||
font-size: 24rpx;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.copy-user-list {
|
||||
margin-top: 14rpx;
|
||||
max-height: 420rpx;
|
||||
}
|
||||
|
||||
.copy-user-item {
|
||||
padding: 12rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #f9fafb;
|
||||
margin-bottom: 10rpx;
|
||||
border: 1rpx solid #e5e7eb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.copy-user-item-active {
|
||||
border-color: #2fc6a7;
|
||||
background: #ecfdf5;
|
||||
}
|
||||
|
||||
.copy-user-name {
|
||||
font-size: 26rpx;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.copy-user-phone {
|
||||
font-size: 22rpx;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.copy-submit {
|
||||
margin-top: 16rpx;
|
||||
height: 64rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,220 @@
|
||||
.record {
|
||||
//border-bottom: 15rpx solid #f5f5f5;
|
||||
//border-radius: 999rpx;
|
||||
padding: 12rpx 20rpx;
|
||||
border-radius: 40rpx;
|
||||
background-color: white;
|
||||
margin: 15rpx 0;
|
||||
}
|
||||
|
||||
.record-title {
|
||||
font-size: 30rpx;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.record-meta {
|
||||
color: var(--text-sub);
|
||||
font-size: 24rpx;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.record-media {
|
||||
margin-top: 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.record-extra {
|
||||
margin-top: 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.record-section {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.record-section-title {
|
||||
font-size: 26rpx;
|
||||
color: var(--text-main);
|
||||
font-weight: 600;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.clock-list {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.clock-item {
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
.clock-image {
|
||||
width: 200rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.clock-meta {
|
||||
margin-top: 6rpx;
|
||||
font-size: 22rpx;
|
||||
color: var(--text-sub);
|
||||
}
|
||||
|
||||
.clock-label {
|
||||
margin-right: 6rpx;
|
||||
color: var(--text-main);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sales-audit-group {
|
||||
background: #f7f9fc;
|
||||
border-radius: 12rpx;
|
||||
padding: 12rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.sales-audit-group:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.sales-audit-title {
|
||||
font-size: 24rpx;
|
||||
color: var(--text-main);
|
||||
font-weight: 600;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.sales-audit-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 22rpx;
|
||||
color: var(--text-main);
|
||||
padding: 4rpx 0;
|
||||
}
|
||||
|
||||
.sales-audit-item.muted {
|
||||
color: var(--text-sub);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.sales-audit-spec {
|
||||
color: var(--text-sub);
|
||||
}
|
||||
|
||||
.sales-audit-qty {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.summary-text {
|
||||
background: #f7f9fc;
|
||||
border-radius: 12rpx;
|
||||
padding: 12rpx;
|
||||
font-size: 24rpx;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.record-detail {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.detail-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6rpx;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6rpx;
|
||||
font-size: 24rpx;
|
||||
padding: 8rpx 10rpx;
|
||||
border-radius: 10rpx;
|
||||
background: #f7f9fc;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.detail-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.detail-name {
|
||||
color: var(--text-main);
|
||||
font-weight: 600;
|
||||
flex: 1;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.detail-qty {
|
||||
color: var(--text-sub);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.detail-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8rpx 16rpx;
|
||||
}
|
||||
|
||||
.detail-kv {
|
||||
display: flex;
|
||||
gap: 6rpx;
|
||||
min-width: 45%;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
color: var(--text-sub);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: var(--text-main);
|
||||
flex: 1;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.detail-empty {
|
||||
color: var(--text-sub);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.media-images {
|
||||
display: flex;
|
||||
gap: 10rpx;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.media-image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.media-video video {
|
||||
width: 100%;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.record-actions {
|
||||
display: flex;
|
||||
gap: 10rpx;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.danger-chip {
|
||||
color: #f5576c;
|
||||
border-color: #f6c5d0;
|
||||
background: #fff2f5;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<view class="login-page">
|
||||
<view class="page-hero">
|
||||
<AppNavbar class="page-navbar" title="微信一键登录"/>
|
||||
<view class="intro-card">
|
||||
<view class="card-title">
|
||||
<view class="title-bar"></view>
|
||||
<text>微信一键登录</text>
|
||||
</view>
|
||||
<text class="intro-text">需勾选用户协议与隐私协议，并授权手机号。身份认证需身份证正反面，职业资格证可额外上传。</text>
|
||||
<view class="hero-tags">
|
||||
<view class="chip">微信授权</view>
|
||||
<view class="chip">手机号授权</view>
|
||||
<view class="chip">身份认证</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card block">
|
||||
<view class="section-title">授权登录</view>
|
||||
<view class="agreements">
|
||||
<label class="agreement">
|
||||
<checkbox :checked="agreeUser" color="#2563eb" @tap.stop="toggleAgreement('user')" />
|
||||
<text>我已阅读并同意《用户协议》</text>
|
||||
</label>
|
||||
<label class="agreement">
|
||||
<checkbox :checked="agreePrivacy" color="#2563eb" @tap.stop="toggleAgreement('privacy')" />
|
||||
<text>我已阅读并同意《隐私协议》</text>
|
||||
</label>
|
||||
</view>
|
||||
<button type="primary" class="btn" :disabled="!canLogin" @tap="doLogin">微信一键登录</button>
|
||||
<button class="btn ghost" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权手机号</button>
|
||||
<view class="hint">微信规定：收集个人信息需用户勾选同意并授权手机号。</view>
|
||||
</view>
|
||||
|
||||
<view class="card block">
|
||||
<view class="section-title">实名认证</view>
|
||||
<view class="upload-row" @tap="upload('front')">
|
||||
<view>
|
||||
<view class="upload-title">身份证人像面</view>
|
||||
<view class="upload-meta">{{ uploads.front ? '已上传' : '点击上传' }}</view>
|
||||
</view>
|
||||
<view class="chip">必填</view>
|
||||
</view>
|
||||
<view class="upload-row" @tap="upload('back')">
|
||||
<view>
|
||||
<view class="upload-title">身份证国徽面</view>
|
||||
<view class="upload-meta">{{ uploads.back ? '已上传' : '点击上传' }}</view>
|
||||
</view>
|
||||
<view class="chip">必填</view>
|
||||
</view>
|
||||
<view class="upload-row" @tap="upload('certificate')">
|
||||
<view>
|
||||
<view class="upload-title">职业资格证书</view>
|
||||
<view class="upload-meta">{{ uploads.certificate ? '已上传' : '可选上传' }}</view>
|
||||
</view>
|
||||
<view class="chip">加分项</view>
|
||||
</view>
|
||||
<view class="primary-btn submit" :class="{'disabled': !canSubmit}" @tap="submitCertification">提交认证</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppNavbar from "@/components/AppNavbar.vue";
|
||||
|
||||
export default {
|
||||
components: {AppNavbar},
|
||||
data() {
|
||||
return {
|
||||
agreeUser: false,
|
||||
agreePrivacy: false,
|
||||
phoneAuthorized: false,
|
||||
uploads: {
|
||||
front: '',
|
||||
back: '',
|
||||
certificate: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
canLogin() {
|
||||
return this.agreeUser && this.agreePrivacy
|
||||
},
|
||||
canSubmit() {
|
||||
return this.uploads.front && this.uploads.back
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleAgreement(type) {
|
||||
if (type === 'user') this.agreeUser = !this.agreeUser
|
||||
if (type === 'privacy') this.agreePrivacy = !this.agreePrivacy
|
||||
},
|
||||
doLogin() {
|
||||
if (!this.canLogin) return
|
||||
uni.showToast({
|
||||
title: '已触发微信登录',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
getPhoneNumber() {
|
||||
this.phoneAuthorized = true
|
||||
uni.showToast({
|
||||
title: '手机号授权成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
upload(type) {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: res => {
|
||||
this.uploads[type] = res.tempFilePaths[0]
|
||||
this.$forceUpdate()
|
||||
uni.showToast({
|
||||
title: '上传成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
submitCertification() {
|
||||
if (!this.canSubmit) {
|
||||
uni.showToast({
|
||||
title: '请先上传身份证正反面',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.showToast({
|
||||
title: '认证已提交，等待审核',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login-page {
|
||||
min-height: 100vh;
|
||||
padding: 0 20rpx 40rpx;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.page-hero {
|
||||
padding: 30rpx 6rpx 18rpx;
|
||||
background: url('https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/462bfa04cf0eff8698884c38b9d17519.png') no-repeat
|
||||
top center / 100% auto;
|
||||
}
|
||||
|
||||
.page-navbar {
|
||||
padding: 0 6rpx;
|
||||
}
|
||||
|
||||
.intro-card {
|
||||
margin-top: 18rpx;
|
||||
padding: 20rpx 18rpx;
|
||||
border-radius: 20rpx;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
width: 6rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #2fc6a7;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
margin-top: 12rpx;
|
||||
font-size: 26rpx;
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.hero-tags {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
|
||||
.agreements {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.agreement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 10rpx 0;
|
||||
}
|
||||
|
||||
.ghost {
|
||||
border: 1rpx solid var(--brand-primary);
|
||||
color: var(--brand-primary);
|
||||
background: #e9f1ff;
|
||||
}
|
||||
|
||||
.hint {
|
||||
color: var(--text-sub);
|
||||
font-size: 24rpx;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.upload-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12rpx 0;
|
||||
border-bottom: 1rpx solid #edf1f7;
|
||||
}
|
||||
|
||||
.upload-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.upload-title {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.upload-meta {
|
||||
color: var(--text-sub);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.submit {
|
||||
margin-top: 16rpx;
|
||||
padding: 14rpx;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,328 @@
|
||||
<template>
|
||||
<view class="bonus-page">
|
||||
<view class="page-hero">
|
||||
<AppNavbar title="记录" show-back/>
|
||||
<view class="intro-card">
|
||||
<view class="card-title">
|
||||
<view class="title-bar"></view>
|
||||
<text>记录</text>
|
||||
</view>
|
||||
<!-- <text class="intro-text">展示历史订单记录，按来源拆分提成（药动销、跑店/巡店、药分享、自主填报），保持蓝色系设计。</text>-->
|
||||
<!-- <view class="hero-tags">-->
|
||||
<!-- <view :class="['chip', { 'chip--active': activeFilter === 0 }]" @tap="toggleFilter(0)">药动销</view>-->
|
||||
<!-- <view :class="['chip', { 'chip--active': activeFilter === 4 }]" @tap="toggleFilter(4)">跑店/巡店</view>-->
|
||||
<!-- <view :class="['chip', { 'chip--active': activeFilter === 1 }]" @tap="toggleFilter(1)">药分享</view>-->
|
||||
<!-- <view :class="['chip', { 'chip--active': activeFilter === 6 }]" @tap="toggleFilter(6)">自主填报</view>-->
|
||||
<!-- </view>-->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="card summary">-->
|
||||
<!-- <view class="sum-item">-->
|
||||
<!-- <view class="sum-value">¥ {{ summary.movement }}</view>-->
|
||||
<!-- <view class="sum-label">药动销提成</view>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="sum-item">-->
|
||||
<!-- <view class="sum-value">¥ {{ summary.storeVisit }}</view>-->
|
||||
<!-- <view class="sum-label">跑店/巡店提成</view>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="sum-item">-->
|
||||
<!-- <view class="sum-value">¥ {{ summary.share }}</view>-->
|
||||
<!-- <view class="sum-label">药分享提成</view>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="sum-item">-->
|
||||
<!-- <view class="sum-value">¥ {{ summary.selfReport }}</view>-->
|
||||
<!-- <view class="sum-label">自主填报提成</view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
|
||||
<!-- <view class="card withdraw-entry">-->
|
||||
<!-- <view>-->
|
||||
<!-- <view class="withdraw-title">可提现奖金</view>-->
|
||||
<!-- <view class="withdraw-amount">¥ {{ user.balance }}</view>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="primary-btn withdraw-btn" @tap="goWithdraw">奖金提现</view>-->
|
||||
<!-- </view>-->
|
||||
|
||||
<view class="card block">
|
||||
<view class="section-title">历史收入记录</view>
|
||||
<view v-if="loading" class="empty">加载中...</view>
|
||||
<view v-else-if="filteredRecords.length === 0" class="empty">暂无记录</view>
|
||||
<view v-else class="record" v-for="(item, idx) in filteredRecords" :key="idx">
|
||||
<view>
|
||||
<view class="record-name">{{ item.title }}</view>
|
||||
<!-- <view class="record-meta">{{ item.source }} · 订单号：{{ item.orderNo }}</view>-->
|
||||
<view class="record-meta">日期：{{ item.date }}</view>
|
||||
</view>
|
||||
<!-- <view class="record-amount">+¥{{ item.amount }}</view>-->
|
||||
</view>
|
||||
</view>
|
||||
<Login ref="Login" @done="getUserData"/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {userBalanceLogListReq} from "@/api/bonus";
|
||||
import {getUserInfo} from "@/util/user";
|
||||
import {userInfoReq} from "@/api/user";
|
||||
import Login from "@/components/Login.vue";
|
||||
import AppNavbar from "@/components/AppNavbar.vue";
|
||||
|
||||
export default {
|
||||
components: {Login, AppNavbar},
|
||||
data() {
|
||||
return {
|
||||
summary: {
|
||||
movement: '0.00',
|
||||
storeVisit: '0.00',
|
||||
share: '0.00',
|
||||
selfReport: '0.00',
|
||||
withdrawable: '0.00'
|
||||
},
|
||||
records: [],
|
||||
loading: false,
|
||||
activeFilter: null,
|
||||
user: {
|
||||
balance: 0
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filteredRecords() {
|
||||
if (this.activeFilter === null || this.activeFilter === undefined) return this.records
|
||||
return this.records.filter(item => Number(item.scene) === Number(this.activeFilter))
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
if (getUserInfo().token) {
|
||||
this.isLoggedIn = true
|
||||
this.getUserData()
|
||||
this.fetchBalanceLogs()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getUserData(){
|
||||
const {data} = await userInfoReq()
|
||||
this.isLoggedIn = true
|
||||
this.user = data
|
||||
},
|
||||
async fetchBalanceLogs() {
|
||||
this.loading = true
|
||||
try {
|
||||
const {data} = await userBalanceLogListReq({})
|
||||
const list = Array.isArray(data) ? data : (data && data.list ? data.list : [])
|
||||
this.records = list.map(this.normalizeRecord)
|
||||
const movementTotal = this.records
|
||||
.filter(item => item.scene === 0)
|
||||
.reduce((sum, item) => sum + Number(item.amount || 0), 0)
|
||||
const storeVisitTotal = this.records
|
||||
.filter(item => item.scene === 4)
|
||||
.reduce((sum, item) => sum + Number(item.amount || 0), 0)
|
||||
const shareTotal = this.records
|
||||
.filter(item => item.scene === 1)
|
||||
.reduce((sum, item) => sum + Number(item.amount || 0), 0)
|
||||
const selfReportTotal = this.records
|
||||
.filter(item => item.scene === 6)
|
||||
.reduce((sum, item) => sum + Number(item.amount || 0), 0)
|
||||
const withdrawable = movementTotal + storeVisitTotal + shareTotal + selfReportTotal
|
||||
this.summary = {
|
||||
movement: movementTotal.toFixed(2),
|
||||
storeVisit: storeVisitTotal.toFixed(2),
|
||||
share: shareTotal.toFixed(2),
|
||||
selfReport: selfReportTotal.toFixed(2),
|
||||
withdrawable: withdrawable.toFixed(2)
|
||||
}
|
||||
} catch (err) {
|
||||
uni.showToast({
|
||||
title: '加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
normalizeRecord(item) {
|
||||
const sceneValue = Number(item.scene)
|
||||
const source = sceneValue === 0
|
||||
? '药动销'
|
||||
: (sceneValue === 4 ? '跑店/巡店' : (sceneValue === 1 ? '药分享' : (sceneValue === 6 ? '自主填报' : '其他')))
|
||||
const amount = Number(item.amount || item.money || item.changeAmount || 0)
|
||||
return {
|
||||
scene: sceneValue,
|
||||
title: item.title || item.remark || `${source}记录`,
|
||||
source,
|
||||
orderNo: item.orderNo || item.order_no || item.bizNo || '-',
|
||||
date: item.createTime || item.createdAt || item.date || '-',
|
||||
amount: amount.toFixed(2)
|
||||
}
|
||||
},
|
||||
toggleFilter(scene) {
|
||||
this.activeFilter = this.activeFilter === scene ? null : scene
|
||||
},
|
||||
goWithdraw() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/bonus/withdraw'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bonus-page {
|
||||
min-height: 100vh;
|
||||
//padding: 0 20rpx 40rpx;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.page-hero {
|
||||
//padding: 30rpx 6rpx 18rpx;
|
||||
background: url('https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/462bfa04cf0eff8698884c38b9d17519.png') no-repeat
|
||||
top center / 100% auto;
|
||||
}
|
||||
|
||||
.page-navbar {
|
||||
padding: 0 6rpx;
|
||||
}
|
||||
|
||||
.intro-card {
|
||||
margin: 18rpx 20rpx 0;
|
||||
padding: 20rpx 18rpx;
|
||||
border-radius: 20rpx;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
width: 6rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #2fc6a7;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
margin-top: 12rpx;
|
||||
font-size: 26rpx;
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.hero-tags {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.chip {
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
border: 1rpx solid #c7d2fe;
|
||||
color: #4f46e5;
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
background: #eef2ff;
|
||||
}
|
||||
|
||||
.chip--active {
|
||||
border-color: #2fc6a7;
|
||||
color: #2fc6a7;
|
||||
background: #e6fffa;
|
||||
}
|
||||
|
||||
.summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12rpx;
|
||||
margin: 18rpx 20rpx 0;
|
||||
}
|
||||
|
||||
.withdraw-entry {
|
||||
margin: 18rpx 20rpx 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.withdraw-title {
|
||||
color: var(--text-sub);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.withdraw-amount {
|
||||
color: var(--brand-primary);
|
||||
font-size: 32rpx;
|
||||
font-weight: 800;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.withdraw-btn {
|
||||
padding: 10rpx 18rpx;
|
||||
height: 56rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.sum-item {
|
||||
background: linear-gradient(135deg, #f0f5ff, #ffffff);
|
||||
border-radius: 14rpx;
|
||||
padding: 16rpx;
|
||||
border: 1rpx solid #e7eef8;
|
||||
}
|
||||
|
||||
.sum-value {
|
||||
font-size: 32rpx;
|
||||
font-weight: 800;
|
||||
color: var(--brand-primary);
|
||||
}
|
||||
|
||||
.sum-label {
|
||||
color: var(--text-sub);
|
||||
font-size: 24rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin: 18rpx 20rpx 0;
|
||||
}
|
||||
|
||||
.record {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12rpx 0;
|
||||
border-bottom: 1rpx solid #edf1f7;
|
||||
}
|
||||
|
||||
.record:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.record-name {
|
||||
font-size: 26rpx;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.record-meta {
|
||||
color: var(--text-sub);
|
||||
font-size: 24rpx;
|
||||
margin-top: 2rpx;
|
||||
}
|
||||
|
||||
.record-amount {
|
||||
color: #ff3b30;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: var(--text-sub);
|
||||
text-align: center;
|
||||
padding: 16rpx 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<view class="withdraw-record-page">
|
||||
<view class="page-hero">
|
||||
<AppNavbar title="提现记录" show-back/>
|
||||
<view class="intro-card">
|
||||
<view class="card-title">
|
||||
<view class="title-bar"></view>
|
||||
<text>提现记录</text>
|
||||
</view>
|
||||
<text class="intro-text">查看历史提现申请与审核状态</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card block">
|
||||
<view class="section-title">历史提现</view>
|
||||
<view v-if="loading" class="empty">加载中...</view>
|
||||
<view v-else-if="records.length === 0" class="empty">暂无记录</view>
|
||||
<view v-else class="record" v-for="(item, idx) in records" :key="idx">
|
||||
<view class="record-left">
|
||||
<view class="record-amount">¥ {{ item.money }}</view>
|
||||
<view class="record-meta">申请时间：{{ item.date }}</view>
|
||||
<view class="record-tags">
|
||||
<view :class="['record-tag', payTypeClass(item.payType)]">{{ payTypeLabel(item.payType) }}</view>
|
||||
</view>
|
||||
<view v-if="item.applyStatus === 2 && item.rejectReason" class="record-reject">
|
||||
拒绝原因：{{ item.rejectReason }}
|
||||
</view>
|
||||
</view>
|
||||
<view :class="['record-status', statusClass(item.applyStatus)]">{{ statusLabel(item.applyStatus) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppNavbar from "@/components/AppNavbar.vue";
|
||||
import {dealerWithdrawListReq} from "@/api/user";
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
export default {
|
||||
components: {AppNavbar},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
records: []
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.fetchRecords()
|
||||
},
|
||||
methods: {
|
||||
statusLabel(status) {
|
||||
if (status === 0) return '待审核'
|
||||
if (status === 1) return '审核通过'
|
||||
if (status === 2) return '已驳回'
|
||||
if (status === 3) return '已打款'
|
||||
return '未知状态'
|
||||
},
|
||||
statusClass(status) {
|
||||
if (status === 1) return 'success'
|
||||
if (status === 2) return 'danger'
|
||||
if (status === 3) return 'info'
|
||||
return 'pending'
|
||||
},
|
||||
payTypeLabel(payType) {
|
||||
if (payType === 10) return '微信'
|
||||
if (payType === 20) return '支付宝'
|
||||
if (payType === 30) return '银行卡'
|
||||
return '未知方式'
|
||||
},
|
||||
payTypeClass(payType) {
|
||||
if (payType === 10) return 'wechat'
|
||||
if (payType === 20) return 'alipay'
|
||||
if (payType === 30) return 'bank'
|
||||
return 'unknown'
|
||||
},
|
||||
normalizeRecord(item) {
|
||||
const money = Number(item.money || item.amount || item.cash || 0).toFixed(2)
|
||||
const applyStatus = Number(item.applyStatus)
|
||||
return {
|
||||
money,
|
||||
applyStatus: Number.isFinite(applyStatus) ? applyStatus : -1,
|
||||
payType: Number(item.payType),
|
||||
rejectReason: item.rejectReason || item.reject_reason || '',
|
||||
date: dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') || item.createdAt || item.create_time || '-'
|
||||
}
|
||||
},
|
||||
async fetchRecords() {
|
||||
this.loading = true
|
||||
try {
|
||||
const {data} = await dealerWithdrawListReq({})
|
||||
const list = Array.isArray(data) ? data : (data && data.list ? data.list : [])
|
||||
this.records = list.map(this.normalizeRecord)
|
||||
} catch (err) {
|
||||
uni.showToast({
|
||||
title: '加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.withdraw-record-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.page-hero {
|
||||
background: url('https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/462bfa04cf0eff8698884c38b9d17519.png') no-repeat
|
||||
top center / 100% auto;
|
||||
}
|
||||
|
||||
.intro-card {
|
||||
margin: 18rpx 20rpx 0;
|
||||
padding: 20rpx 18rpx;
|
||||
border-radius: 20rpx;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
width: 6rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #2fc6a7;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
margin-top: 12rpx;
|
||||
font-size: 26rpx;
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin: 18rpx 20rpx 0;
|
||||
}
|
||||
|
||||
.record {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
padding: 16rpx 0;
|
||||
border-bottom: 1rpx solid #edf1f7;
|
||||
}
|
||||
|
||||
.record:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.record-left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.record-amount {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.record-meta {
|
||||
margin-top: 6rpx;
|
||||
font-size: 24rpx;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.record-reject {
|
||||
margin-top: 6rpx;
|
||||
font-size: 24rpx;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.record-tags {
|
||||
margin-top: 8rpx;
|
||||
display: flex;
|
||||
gap: 8rpx;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.record-tag {
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.record-tag.wechat {
|
||||
color: #16a34a;
|
||||
background: #dbeafe;
|
||||
}
|
||||
|
||||
.record-tag.alipay {
|
||||
color: #1d4ed8;
|
||||
background: #dbeafe;
|
||||
}
|
||||
|
||||
.record-tag.bank {
|
||||
color: #0f766e;
|
||||
background: #ccfbf1;
|
||||
}
|
||||
|
||||
.record-tag.unknown {
|
||||
color: #6b7280;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.record-status {
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
padding: 6rpx 14rpx;
|
||||
border-radius: 999rpx;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.record-status.pending {
|
||||
color: #f59e0b;
|
||||
background: #fff7ed;
|
||||
}
|
||||
|
||||
.record-status.success {
|
||||
color: #16a34a;
|
||||
background: #ecfdf5;
|
||||
}
|
||||
|
||||
.record-status.danger {
|
||||
color: #ef4444;
|
||||
background: #fee2e2;
|
||||
}
|
||||
|
||||
.record-status.info {
|
||||
color: #2563eb;
|
||||
background: #e0f2fe;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: var(--text-sub);
|
||||
text-align: center;
|
||||
padding: 16rpx 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,369 @@
|
||||
<template>
|
||||
<view class="withdraw-page">
|
||||
<view class="page-hero">
|
||||
<AppNavbar title="提现" show-back/>
|
||||
<view class="intro-card">
|
||||
<view class="card-title">
|
||||
<view class="title-bar"></view>
|
||||
<text>提现</text>
|
||||
</view>
|
||||
<text class="intro-text">提交提现申请，到账时间以平台审核为准</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card block">
|
||||
<view class="section-title">提现信息</view>
|
||||
<!-- <view class="info-row">-->
|
||||
<!-- <view>可提现余额</view>-->
|
||||
<!-- <view class="balance">¥ {{ withdrawable }}</view>-->
|
||||
<!-- </view>-->
|
||||
<view class="form-row">
|
||||
<view class="label">提现金额</view>
|
||||
<input v-model="form.money" class="input" type="digit" placeholder="请输入金额(0.5~200元)"/>
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<view class="label">提现方式</view>
|
||||
<view class="pay-types">
|
||||
<view :class="['pay-type', form.payType === 10 ? 'active' : '']" @tap="form.payType = 10">微信</view>
|
||||
<!-- <view :class="['pay-type', form.payType === 20 ? 'active' : '']" @tap="form.payType = 20">支付宝</view>-->
|
||||
<!-- <view :class="['pay-type', form.payType === 30 ? 'active' : '']" @tap="form.payType = 30">银行卡</view>-->
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="form.payType === 20" class="form-row">
|
||||
<view class="label">支付宝姓名</view>
|
||||
<input v-model="form.alipayName" class="input" placeholder="请输入支付宝姓名"/>
|
||||
</view>
|
||||
<view v-if="form.payType === 20" class="form-row">
|
||||
<view class="label">支付宝账号</view>
|
||||
<input v-model="form.alipayAccount" class="input" placeholder="请输入支付宝账号"/>
|
||||
</view>
|
||||
<view v-if="form.payType === 30" class="form-row">
|
||||
<view class="label">开户行名称</view>
|
||||
<input v-model="form.bankName" class="input" placeholder="请输入开户行名称"/>
|
||||
</view>
|
||||
<view v-if="form.payType === 30" class="form-row">
|
||||
<view class="label">银行开户名</view>
|
||||
<input v-model="form.bankAccount" class="input" placeholder="请输入银行开户名"/>
|
||||
</view>
|
||||
<view v-if="form.payType === 30" class="form-row">
|
||||
<view class="label">银行卡号</view>
|
||||
<input v-model="form.bankCard" class="input" placeholder="请输入银行卡号"/>
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<view class="label">备注</view>
|
||||
<input v-model="form.remark" class="input" placeholder="选填"/>
|
||||
</view>
|
||||
<view class="primary-btn submit" @tap="submitWithdraw">提交申请</view>
|
||||
</view>
|
||||
|
||||
<view class="info-row clickable" @tap="goWithdrawRecords">
|
||||
<view>提现记录</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppNavbar from "@/components/AppNavbar.vue";
|
||||
import {dealerWithdrawAddReq, userInfoReq, updateDealerWithdraw} from "@/api/user";
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
export default {
|
||||
components: {AppNavbar},
|
||||
data() {
|
||||
return {
|
||||
withdrawable: 0,
|
||||
form: {
|
||||
payType: 10,
|
||||
money: '',
|
||||
alipayName: '',
|
||||
alipayAccount: '',
|
||||
bankName: '',
|
||||
bankAccount: '',
|
||||
bankCard: '',
|
||||
remark: ''
|
||||
},
|
||||
user: {
|
||||
balance: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getUserData()
|
||||
},
|
||||
methods: {
|
||||
async getUserData() {
|
||||
const {data} = await userInfoReq()
|
||||
this.user = data
|
||||
this.withdrawable = this.user.balance
|
||||
},
|
||||
async submitWithdraw() {
|
||||
const money = Number(this.form.money)
|
||||
if (!money || money <= 0) {
|
||||
uni.showToast({
|
||||
title: '请输入正确金额',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (money < 0.5) {
|
||||
uni.showToast({
|
||||
title: '提现金额不能小于0.5元',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (money > 200) {
|
||||
uni.showToast({
|
||||
title: '提现金额不能大于200元',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (money > this.withdrawable) {
|
||||
uni.showToast({
|
||||
title: '超过可提现余额',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (this.form.payType === 20) {
|
||||
if (!this.form.alipayName) {
|
||||
uni.showToast({
|
||||
title: '请输入支付宝姓名',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.form.alipayAccount) {
|
||||
uni.showToast({
|
||||
title: '请输入支付宝账号',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
} else if (this.form.payType === 30) {
|
||||
if (!this.form.bankName) {
|
||||
uni.showToast({
|
||||
title: '请输入开户行名称',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.form.bankAccount) {
|
||||
uni.showToast({
|
||||
title: '请输入银行开户名',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.form.bankCard) {
|
||||
uni.showToast({
|
||||
title: '请输入银行卡号',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
uni.showLoading({
|
||||
title: '提交中...',
|
||||
})
|
||||
const _this = this
|
||||
const res = await dealerWithdrawAddReq(this.form).catch(err => {
|
||||
uni.hideLoading()
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: 'none'
|
||||
})
|
||||
}, 200)
|
||||
_this.getUserData()
|
||||
})
|
||||
if (res) {
|
||||
console.log(res)
|
||||
uni.hideLoading()
|
||||
if (this.form.payType === 10) {
|
||||
if (!wx.canIUse('requestMerchantTransfer')) {
|
||||
wx.showModal({
|
||||
content: '你的微信版本过低，请更新至最新版本。',
|
||||
showCancel: false,
|
||||
});
|
||||
return
|
||||
}
|
||||
wx.requestMerchantTransfer({
|
||||
mchId: '1738840566', // 商户号
|
||||
appId: 'wx0c1587a63b0b9db5', // appId
|
||||
package: res.data.package_info,
|
||||
success: (res) => {
|
||||
uni.navigateBack()
|
||||
},
|
||||
fail: async (err) => {
|
||||
console.log('err', err)
|
||||
uni.showToast({
|
||||
title: '您取消了提现',
|
||||
icon: 'none'
|
||||
})
|
||||
|
||||
await updateDealerWithdraw({
|
||||
id: res.data.id,
|
||||
rejectReason: "用户取消",
|
||||
applyStatus: 2,
|
||||
auditTime: dayjs().unix()
|
||||
})
|
||||
await _this.getUserData()
|
||||
},
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '提现申请已提交',
|
||||
icon: 'success'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
}
|
||||
},
|
||||
goWithdrawRecords() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/bonus/withdraw-record'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.withdraw-page {
|
||||
min-height: 100vh;
|
||||
//padding: 0 20rpx 40rpx;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.page-hero {
|
||||
//padding: 30rpx 6rpx 18rpx;
|
||||
background: url('https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/462bfa04cf0eff8698884c38b9d17519.png') no-repeat top center / 100% auto;
|
||||
}
|
||||
|
||||
.page-navbar {
|
||||
padding: 0 6rpx;
|
||||
}
|
||||
|
||||
.intro-card {
|
||||
margin: 18rpx 20rpx 0;
|
||||
padding: 20rpx 18rpx;
|
||||
border-radius: 20rpx;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
width: 6rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #2fc6a7;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
margin-top: 12rpx;
|
||||
font-size: 26rpx;
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin: 18rpx 20rpx 0;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10rpx 0;
|
||||
border-bottom: 1rpx solid #edf1f7;
|
||||
color: var(--brand-primary);
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.info-row.clickable {
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
color: #9ca3af;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.balance {
|
||||
color: var(--brand-primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12rpx 0;
|
||||
border-bottom: 1rpx solid #edf1f7;
|
||||
}
|
||||
|
||||
.form-row:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var(--text-main);
|
||||
font-size: 26rpx;
|
||||
min-width: 140rpx;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-size: 26rpx;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.pay-types {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
justify-content: flex-end;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.pay-type {
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
border: 1rpx solid #c7d2fe;
|
||||
color: #4f46e5;
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
background: #eef2ff;
|
||||
}
|
||||
|
||||
.pay-type.active {
|
||||
border-color: #2fc6a7;
|
||||
color: #2fc6a7;
|
||||
background: #e6fffa;
|
||||
}
|
||||
|
||||
.submit {
|
||||
margin-top: 18rpx;
|
||||
padding: 14rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,339 @@
|
||||
<template>
|
||||
<view class="cart-page">
|
||||
<view class="page-hero">
|
||||
<AppNavbar class="page-navbar" title="购物车"/>
|
||||
<view class="intro-card">
|
||||
<view class="card-title">
|
||||
<view class="title-bar"></view>
|
||||
<text>购物车</text>
|
||||
</view>
|
||||
<text class="intro-text">按商家分单结算，蓝色主色适配竖版，支持多件商品数量调整与勾选。</text>
|
||||
<view class="hero-tags">
|
||||
<view class="chip">分商家结算</view>
|
||||
<view class="chip">蓝白风格</view>
|
||||
<view class="chip">竖版适配</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card vendor-card" v-for="(vendor, vIdx) in cartVendors" :key="vendor.name">
|
||||
<view class="vendor-head">
|
||||
<label class="check">
|
||||
<checkbox :checked="vendor.selected" color="#2563eb" @tap.stop="toggleVendor(vIdx)" />
|
||||
<text class="vendor-name">{{ vendor.name }}</text>
|
||||
</label>
|
||||
<view class="freight">运费：¥{{ vendor.freight }}</view>
|
||||
</view>
|
||||
|
||||
<view class="item" v-for="(item, idx) in vendor.items" :key="item.id">
|
||||
<label class="check">
|
||||
<checkbox :checked="item.selected" color="#2563eb" @tap.stop="toggleItem(vIdx, idx)" />
|
||||
</label>
|
||||
<view class="item-info">
|
||||
<view class="item-name">{{ item.name }}</view>
|
||||
<view class="item-meta">规格 {{ item.specs }}</view>
|
||||
<view class="price-row">
|
||||
<view class="price">¥{{ item.price }}</view>
|
||||
<view class="origin">¥{{ item.origin }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="qty">
|
||||
<view class="btn" @tap="changeQty(vIdx, idx, -1)">-</view>
|
||||
<view class="num">{{ item.qty }}</view>
|
||||
<view class="btn" @tap="changeQty(vIdx, idx, 1)">+</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="summary card">
|
||||
<view class="summary-left">
|
||||
<view class="section-title">结算信息</view>
|
||||
<view class="sum-line">已选 {{ selectedCount }} 件，商品金额 ¥{{ goodsTotal }}</view>
|
||||
<view class="sum-line">预估运费 ¥{{ freightTotal }}，合计 ¥{{ totalPrice }}</view>
|
||||
</view>
|
||||
<view class="primary-btn go-checkout" @tap="goCheckout">去结算</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppNavbar from "@/components/AppNavbar.vue";
|
||||
|
||||
export default {
|
||||
components: {AppNavbar},
|
||||
data() {
|
||||
return {
|
||||
cartVendors: [{
|
||||
name: '华润三九',
|
||||
freight: 8,
|
||||
selected: true,
|
||||
items: [{
|
||||
id: 1,
|
||||
name: '三九感冒灵颗粒',
|
||||
specs: '10袋/盒',
|
||||
price: 29.9,
|
||||
origin: 39.9,
|
||||
qty: 1,
|
||||
selected: true
|
||||
}, {
|
||||
id: 2,
|
||||
name: '感冒软胶囊',
|
||||
specs: '24粒/盒',
|
||||
price: 32,
|
||||
origin: 45,
|
||||
qty: 2,
|
||||
selected: true
|
||||
}]
|
||||
}, {
|
||||
name: '华润江中',
|
||||
freight: 6,
|
||||
selected: true,
|
||||
items: [{
|
||||
id: 3,
|
||||
name: '健胃消食片',
|
||||
specs: '48片/盒',
|
||||
price: 36.8,
|
||||
origin: 46,
|
||||
qty: 2,
|
||||
selected: true
|
||||
}]
|
||||
}]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedCount() {
|
||||
return this.cartVendors.reduce((sum, v) => {
|
||||
v.items.forEach(i => {
|
||||
if (i.selected) sum += i.qty
|
||||
})
|
||||
return sum
|
||||
}, 0)
|
||||
},
|
||||
goodsTotal() {
|
||||
return this.cartVendors.reduce((sum, v) => {
|
||||
v.items.forEach(i => {
|
||||
if (i.selected) sum += i.qty * i.price
|
||||
})
|
||||
return sum
|
||||
}, 0).toFixed(2)
|
||||
},
|
||||
freightTotal() {
|
||||
return this.cartVendors.reduce((sum, v) => {
|
||||
const hasSelected = v.items.some(i => i.selected)
|
||||
return sum + (hasSelected ? v.freight : 0)
|
||||
}, 0).toFixed(2)
|
||||
},
|
||||
totalPrice() {
|
||||
return (parseFloat(this.goodsTotal) + parseFloat(this.freightTotal)).toFixed(2)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeQty(vIdx, idx, delta) {
|
||||
const item = this.cartVendors[vIdx].items[idx]
|
||||
const next = item.qty + delta
|
||||
if (next < 1) return
|
||||
this.cartVendors[vIdx].items[idx].qty = next
|
||||
this.cartVendors = [...this.cartVendors]
|
||||
},
|
||||
toggleItem(vIdx, idx) {
|
||||
const item = this.cartVendors[vIdx].items[idx]
|
||||
item.selected = !item.selected
|
||||
this.syncVendorSelect(vIdx)
|
||||
this.cartVendors = [...this.cartVendors]
|
||||
},
|
||||
toggleVendor(vIdx) {
|
||||
const vendor = this.cartVendors[vIdx]
|
||||
const next = !vendor.selected
|
||||
vendor.selected = next
|
||||
vendor.items.forEach(i => {
|
||||
i.selected = next
|
||||
})
|
||||
this.cartVendors = [...this.cartVendors]
|
||||
},
|
||||
syncVendorSelect(vIdx) {
|
||||
const vendor = this.cartVendors[vIdx]
|
||||
vendor.selected = vendor.items.every(i => i.selected)
|
||||
},
|
||||
goCheckout() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/order/checkout?total=${this.totalPrice}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cart-page {
|
||||
min-height: 100vh;
|
||||
padding: 0 20rpx 40rpx;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.page-hero {
|
||||
padding: 30rpx 6rpx 18rpx;
|
||||
background: url('https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/462bfa04cf0eff8698884c38b9d17519.png') no-repeat
|
||||
top center / 100% auto;
|
||||
}
|
||||
|
||||
.page-navbar {
|
||||
padding: 0 6rpx;
|
||||
}
|
||||
|
||||
.intro-card {
|
||||
margin-top: 18rpx;
|
||||
padding: 20rpx 18rpx;
|
||||
border-radius: 20rpx;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
width: 6rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #2fc6a7;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
margin-top: 12rpx;
|
||||
font-size: 26rpx;
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.hero-tags {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.vendor-card {
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
|
||||
.vendor-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.vendor-name {
|
||||
font-weight: 700;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.freight {
|
||||
color: var(--text-sub);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
align-items: center;
|
||||
padding: 12rpx 0;
|
||||
border-bottom: 1rpx solid #edf1f7;
|
||||
}
|
||||
|
||||
.item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-weight: 700;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.item-meta {
|
||||
color: var(--text-sub);
|
||||
font-size: 24rpx;
|
||||
margin: 4rpx 0;
|
||||
}
|
||||
|
||||
.price-row {
|
||||
display: flex;
|
||||
gap: 10rpx;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #ff3b30;
|
||||
font-weight: 800;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.origin {
|
||||
text-decoration: line-through;
|
||||
color: #a1aabc;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.qty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
background: #f4f7fb;
|
||||
border-radius: 12rpx;
|
||||
padding: 6rpx 10rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #e9f1ff;
|
||||
color: var(--brand-primary);
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.num {
|
||||
min-width: 34rpx;
|
||||
text-align: center;
|
||||
color: var(--text-main);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.summary {
|
||||
margin-top: 18rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.summary-left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sum-line {
|
||||
color: var(--text-sub);
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.go-checkout {
|
||||
padding: 14rpx 24rpx;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,276 @@
|
||||
<template>
|
||||
<view class="cert-page">
|
||||
<view class="page-hero">
|
||||
<AppNavbar title="个人信息认证" show-back/>
|
||||
<view class="intro-card">
|
||||
<view class="card-title">
|
||||
<view class="title-bar"></view>
|
||||
<text>个人信息认证</text>
|
||||
</view>
|
||||
<text class="intro-text">提交身份证正反面识别，职业资格证书可选上传，审核通过后解锁全部功能。</text>
|
||||
<text class="intro-meta">当前状态：{{ statusLabel }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card block">
|
||||
<view class="section-title">证件上传</view>
|
||||
<view class="upload-row" @tap="upload('idCardFront')">
|
||||
<view>
|
||||
<view class="upload-title">身份证人像面</view>
|
||||
<view class="upload-meta">{{ uploads.idCardFront ? '已上传' : '待上传' }}</view>
|
||||
</view>
|
||||
<view class="chip">必填</view>
|
||||
</view>
|
||||
<view class="upload-row" @tap="upload('idCardBack')">
|
||||
<view>
|
||||
<view class="upload-title">身份证国徽面</view>
|
||||
<view class="upload-meta">{{ uploads.idCardBack ? '已上传' : '待上传' }}</view>
|
||||
</view>
|
||||
<view class="chip">必填</view>
|
||||
</view>
|
||||
<view class="upload-row" @tap="upload('qualification')">
|
||||
<view>
|
||||
<view class="upload-title">职业资格证书</view>
|
||||
<view class="upload-meta">{{ uploads.qualification ? '已上传' : '可选上传' }}</view>
|
||||
</view>
|
||||
<view class="chip">加分项</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card block">
|
||||
<view class="section-title">审核流程</view>
|
||||
<view class="step" v-for="(step, idx) in steps" :key="idx">
|
||||
<view class="step-index">{{ idx + 1 }}</view>
|
||||
<view>
|
||||
<view class="step-title">{{ step.title }}</view>
|
||||
<view class="step-meta">{{ step.desc }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<Login ref="Login" @done="getUserData"/>
|
||||
<view class="primary-btn submit" :class="{'disabled': !canSubmit}" @tap="submit" v-if="user.authStatus === 0">提交审核</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {chooseImg} from "@/util";
|
||||
import {updateUserReq, userInfoReq} from "@/api/user";
|
||||
import Login from "@/components/Login.vue";
|
||||
import AppNavbar from "@/components/AppNavbar.vue";
|
||||
import {getUserInfo} from "@/util/user";
|
||||
|
||||
export default {
|
||||
components: {Login, AppNavbar},
|
||||
data() {
|
||||
return {
|
||||
uploads: {
|
||||
idCardFront: '',
|
||||
idCardBack: '',
|
||||
qualification: ''
|
||||
},
|
||||
steps: [{
|
||||
title: '资料上传',
|
||||
desc: '身份证正反面、职业资格证书'
|
||||
}, {
|
||||
title: '系统预校验',
|
||||
desc: '自动识别姓名、证件号，校验清晰度'
|
||||
}, {
|
||||
title: '药小二人工审核',
|
||||
desc: '审核通过后抄送管理员'
|
||||
}],
|
||||
user: {
|
||||
authStatus: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
canSubmit() {
|
||||
return this.uploads.idCardFront && this.uploads.idCardBack
|
||||
},
|
||||
statusLabel() {
|
||||
if (this.user.authStatus === 0) return '未提交'
|
||||
if (this.user.authStatus === 1) return '审核中'
|
||||
if (this.user.authStatus === 2) return '已通过'
|
||||
if (this.user.authStatus === 3) return '已驳回'
|
||||
return '未知'
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
if (getUserInfo().token) {
|
||||
this.getUserData()
|
||||
}else {
|
||||
this.$refs.Login.open()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getUserData(){
|
||||
const {data} = await userInfoReq()
|
||||
this.isLoggedIn = true
|
||||
this.user = data
|
||||
if (this.user.idCardFront) this.uploads.idCardFront = this.user.idCardFront
|
||||
if (this.user.idCardBack) this.uploads.idCardBack = this.user.idCardBack
|
||||
if (this.user.qualification) this.uploads.qualification = this.user.qualification
|
||||
},
|
||||
async upload(type) {
|
||||
if (this.user.authStatus === 1) {
|
||||
uni.showToast({
|
||||
title: '正在审核中，请勿重复提交',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (this.user.authStatus === 2) {
|
||||
uni.showToast({
|
||||
title: '已通过，请勿重复提交',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
const res = await chooseImg(1)
|
||||
this.uploads[type] = res[0].path
|
||||
},
|
||||
async submit() {
|
||||
if (!this.canSubmit) {
|
||||
uni.showToast({
|
||||
title: '请先上传身份证正反面',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
await updateUserReq({
|
||||
idCardFront: this.uploads.idCardFront,
|
||||
idCardBack: this.uploads.idCardBack,
|
||||
qualification: this.uploads.qualification,
|
||||
authStatus: 1
|
||||
})
|
||||
uni.showToast({
|
||||
title: '认证已提交，等待审核',
|
||||
icon: 'none'
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cert-page {
|
||||
min-height: 100vh;
|
||||
//padding: 0 20rpx 40rpx;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.page-hero {
|
||||
//padding: 30rpx 6rpx 18rpx;
|
||||
background: url('https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/462bfa04cf0eff8698884c38b9d17519.png') no-repeat
|
||||
top center / 100% auto;
|
||||
}
|
||||
|
||||
.page-navbar {
|
||||
padding: 0 6rpx;
|
||||
}
|
||||
|
||||
.intro-card {
|
||||
margin: 18rpx 20rpx 0;
|
||||
padding: 20rpx 18rpx;
|
||||
border-radius: 20rpx;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
width: 6rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #2fc6a7;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
margin-top: 12rpx;
|
||||
font-size: 26rpx;
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.intro-meta {
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin: 18rpx 20rpx 0;
|
||||
}
|
||||
|
||||
.upload-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12rpx 0;
|
||||
border-bottom: 1rpx solid #edf1f7;
|
||||
}
|
||||
|
||||
.upload-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.upload-title {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.upload-meta {
|
||||
color: var(--text-sub);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.step {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
align-items: center;
|
||||
padding: 12rpx 0;
|
||||
border-bottom: 1rpx dashed #e3eaf4;
|
||||
}
|
||||
|
||||
.step:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.step-index {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #e9f1ff;
|
||||
color: var(--brand-primary);
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.step-meta {
|
||||
color: var(--text-sub);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.submit {
|
||||
margin: 18rpx 0;
|
||||
padding: 14rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,623 @@
|
||||
<template>
|
||||
<view class="exchange-page">
|
||||
<view class="page-hero">
|
||||
<AppNavbar title="药兑换"/>
|
||||
</view>
|
||||
|
||||
<view class="content">
|
||||
<scroll-view class="category-list" scroll-y>
|
||||
<view v-for="cat in categories" :key="cat.code" class="category-item"
|
||||
:class="{'active': cat.code === activeCategory}" @tap="selectCategory(cat.code)">
|
||||
<view class="category-name">{{ cat.name }}</view>
|
||||
<view class="category-type">{{ cat.type }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<scroll-view class="product-list" scroll-y>
|
||||
<!-- <view class="sub-category-wrap">-->
|
||||
<!-- <scroll-view class="sub-category-scroll" scroll-x>-->
|
||||
<!-- <view-->
|
||||
<!-- v-for="sub in secondaryCategories"-->
|
||||
<!-- :key="sub"-->
|
||||
<!-- class="sub-category-chip"-->
|
||||
<!-- :class="{'active': sub === activeSubCategory}"-->
|
||||
<!-- @tap="selectSubCategory(sub)"-->
|
||||
<!-- >-->
|
||||
<!-- {{ sub }}-->
|
||||
<!-- </view>-->
|
||||
<!-- </scroll-view>-->
|
||||
<!-- </view>-->
|
||||
<view class="product-card card" v-for="item in filteredProducts" :key="item.id" @tap="openDetail(item)">
|
||||
<view class="product-head">
|
||||
<view class="product-name">{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="product-meta">分类：{{ item.categoryName }}</view>
|
||||
<view class="price-row">
|
||||
<view class="price">￥{{ item.price }}</view>
|
||||
<view class="origin">￥{{ item.origin }}</view>
|
||||
<!-- <view class="sell-point">{{ item.sellPoint }}</view>-->
|
||||
</view>
|
||||
<view class="product-tags">
|
||||
<!-- <view class="tag" v-for="tag in item.tags" :key="tag">{{ tag }}</view>-->
|
||||
<view class="coupon" @tap.stop="openCoupon(item)">领券</view>
|
||||
</view>
|
||||
<view class="actions">
|
||||
<!-- <view class="hot">热卖推荐</view>-->
|
||||
<view class="btn-group">
|
||||
<!-- <button size="mini" type="default" plain @tap.stop="addToCart(item)">加入购物车</button>-->
|
||||
<u-icon name="/static/images/addCart.png" width="60rpx" height="60rpx"/>
|
||||
<button size="mini" class="warn-btn" style="margin-left: 20rpx" @tap.stop="buyNow(item)">购买</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class="cart-entry" @tap="openCartPopup">
|
||||
<u-icon name="/static/images/addCart.png" width="56rpx" height="56rpx"/>
|
||||
<view class="cart-entry-text">购物车</view>
|
||||
<view v-if="cartCount" class="cart-entry-badge">{{ cartCount }}</view>
|
||||
</view>
|
||||
|
||||
<view v-if="showCartPopup" class="cart-popup-mask" @tap="closeCartPopup"></view>
|
||||
<view v-if="showCartPopup" class="cart-popup card" @tap.stop>
|
||||
<view class="cart-popup-head">
|
||||
<view class="section-title">购物车</view>
|
||||
<view class="close-btn" @tap="closeCartPopup">关闭</view>
|
||||
</view>
|
||||
<!-- <view class="cart-note">不同商家商品分开显示，订单分开推送结算。</view>-->
|
||||
<view v-if="cartLoading" class="cart-empty">加载中...</view>
|
||||
<view v-else-if="cart.length === 0" class="cart-empty">购物车为空</view>
|
||||
<view v-else>
|
||||
<view class="cart-vendor" v-for="(vendor, index) in cart" :key="index">
|
||||
<view class="cart-vendor-head">
|
||||
<view class="vendor-name">{{ vendor.goods.goodsName }}</view>
|
||||
<!-- <view class="chip">商品 {{ (vendor.items || []).length }}</view>-->
|
||||
</view>
|
||||
<!-- <view class="cart-item-meta">规格 {{ prod.specs }}</view>-->
|
||||
<view class="cart-item-price">￥{{ vendor.goods.salePrice }} x {{ vendor.num }}</view>
|
||||
</view>
|
||||
<view class="cart-summary">
|
||||
<view>总价：
|
||||
<text class="price">￥{{ cartTotal }}</text>
|
||||
</view>
|
||||
<view class="primary-btn checkout" @tap="checkout">结算</view>
|
||||
<!-- <view class="primary-btn checkout" style="margin-left:12rpx;" @tap="goCart">查看购物车页</view>-->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {cartListReq, goodsCategoryListReq, goodsListReq} from "@/api/goods";
|
||||
import AppNavbar from "@/components/AppNavbar.vue";
|
||||
|
||||
export default {
|
||||
components: {AppNavbar},
|
||||
data() {
|
||||
return {
|
||||
categories: [],
|
||||
secondaryCategories: [
|
||||
'全部',
|
||||
'儿童用药',
|
||||
'男科用药',
|
||||
'胃肠用药',
|
||||
'医疗器械',
|
||||
'中药参茸',
|
||||
'五官用药',
|
||||
'心脑血管用药',
|
||||
'神经用药',
|
||||
'组合用药',
|
||||
'三高用药',
|
||||
'计生用品',
|
||||
'泌尿系统',
|
||||
'滋补调养',
|
||||
'维矿用药',
|
||||
'处方药',
|
||||
'抗菌消炎',
|
||||
'皮肤用药',
|
||||
'风湿骨伤',
|
||||
'保健食品',
|
||||
'敢买用药',
|
||||
'呼吸系统',
|
||||
'妇科用药'
|
||||
],
|
||||
activeCategory: null,
|
||||
activeSubCategory: '全部',
|
||||
products: [],
|
||||
cart: [],
|
||||
cartLoading: false,
|
||||
showCartPopup: false
|
||||
}
|
||||
},
|
||||
async onShow() {
|
||||
await this.fetchCategories()
|
||||
await this.fetchProducts()
|
||||
},
|
||||
computed: {
|
||||
filteredProducts() {
|
||||
return this.products.filter(p => {
|
||||
const matchCategory = p.category === this.activeCategory || p.categoryName === this.activeCategory
|
||||
const matchSub = this.activeSubCategory === '全部' || p.subCategory === this.activeSubCategory
|
||||
return matchCategory && matchSub
|
||||
})
|
||||
},
|
||||
cartTotal() {
|
||||
let total = 0
|
||||
this.cart.forEach(vendor => {
|
||||
// const items = vendor.items || []
|
||||
// items.forEach(item => {
|
||||
total += Number(vendor.goods.salePrice || 0) * Number(vendor.num || 0)
|
||||
// })
|
||||
})
|
||||
return total.toFixed(2)
|
||||
},
|
||||
cartCount() {
|
||||
let count = 0
|
||||
this.cart.forEach(vendor => {
|
||||
count += vendor.num
|
||||
})
|
||||
return count
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async fetchCategories() {
|
||||
try {
|
||||
const {data} = await goodsCategoryListReq()
|
||||
const list = Array.isArray(data) ? data : (data && data.list ? data.list : [])
|
||||
this.categories = list.map(item => ({
|
||||
code: item.code || item.id || item.categoryId || item.value || item.name,
|
||||
name: item.name || item.title || '',
|
||||
type: item.type || item.groupName || ''
|
||||
}))
|
||||
if (!this.activeCategory && this.categories.length) {
|
||||
this.activeCategory = this.categories[0].code
|
||||
}
|
||||
} catch (err) {
|
||||
uni.showToast({
|
||||
title: '分类加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
async fetchProducts() {
|
||||
try {
|
||||
const {data} = await goodsListReq()
|
||||
const list = Array.isArray(data) ? data : (data && data.list ? data.list : [])
|
||||
this.products = list.map(item => {
|
||||
const rawTags = item.tags || item.tag || []
|
||||
const tags = Array.isArray(rawTags) ? rawTags : String(rawTags).split(',').filter(Boolean)
|
||||
return {
|
||||
id: item.goodsId,
|
||||
name: item.goodsName,
|
||||
category: item.categoryCode || item.categoryId || item.cateId || item.category,
|
||||
categoryName: item.categoryName || item.cateName || '',
|
||||
subCategory: item.subCategoryName || item.subCategory || item.subCateName || '全部',
|
||||
specs: item.specs || item.specification || '',
|
||||
price: item.salePrice || 0,
|
||||
origin: item.originPrice || 0,
|
||||
sellPoint: item.sellPoint || item.subTitle || '',
|
||||
tags,
|
||||
vendor: item.vendor || item.brand || item.manufacturer || '',
|
||||
coupon: item.coupon || item.couponDesc || ''
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
uni.showToast({
|
||||
title: '商品加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
selectCategory(code) {
|
||||
this.activeCategory = code
|
||||
},
|
||||
selectSubCategory(name) {
|
||||
this.activeSubCategory = name
|
||||
},
|
||||
addToCart(product) {
|
||||
const vendorIndex = this.cart.findIndex(v => v.name === product.vendor)
|
||||
if (vendorIndex > -1) {
|
||||
const itemIndex = this.cart[vendorIndex].items.findIndex(i => i.name === product.name)
|
||||
if (itemIndex > -1) {
|
||||
this.cart[vendorIndex].items[itemIndex].qty += 1
|
||||
} else {
|
||||
this.cart[vendorIndex].items.push({
|
||||
name: product.name,
|
||||
specs: product.specs,
|
||||
price: product.price,
|
||||
qty: 1
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.cart.push({
|
||||
name: product.vendor,
|
||||
items: [{
|
||||
name: product.name,
|
||||
specs: product.specs,
|
||||
price: product.price,
|
||||
qty: 1
|
||||
}]
|
||||
})
|
||||
}
|
||||
this.cart = [...this.cart]
|
||||
uni.showToast({
|
||||
title: '已加入购物车',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
buyNow(product) {
|
||||
const goodsDataList = [{
|
||||
goodsId: product.id,
|
||||
num: 1
|
||||
}]
|
||||
uni.navigateTo({
|
||||
url: `/pages/order/checkout?goodsDataList=${JSON.stringify(goodsDataList)}`
|
||||
})
|
||||
},
|
||||
openCoupon(product) {
|
||||
uni.navigateTo({
|
||||
url: '/packageUser/coupon/index'
|
||||
})
|
||||
},
|
||||
async openCartPopup() {
|
||||
this.showCartPopup = true
|
||||
await this.loadCartList()
|
||||
},
|
||||
closeCartPopup() {
|
||||
this.showCartPopup = false
|
||||
},
|
||||
async loadCartList() {
|
||||
this.cartLoading = true
|
||||
try {
|
||||
const {data} = await cartListReq()
|
||||
this.cart = data
|
||||
console.log(this.cart)
|
||||
} catch (err) {
|
||||
uni.showToast({
|
||||
title: '购物车加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.cartLoading = false
|
||||
}
|
||||
},
|
||||
checkout() {
|
||||
// uni.showToast({
|
||||
// title: '提交订单到各商家',
|
||||
// icon: 'none'
|
||||
// })
|
||||
const goodsDataList = []
|
||||
this.cart.forEach(vendor => {
|
||||
goodsDataList.push({
|
||||
goodsId: vendor.goodsId,
|
||||
num: vendor.num
|
||||
})
|
||||
})
|
||||
uni.navigateTo({
|
||||
url: `/pages/order/checkout?goodsDataList=${JSON.stringify(goodsDataList)}`
|
||||
})
|
||||
},
|
||||
openDetail(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/detail?id=${item.id}`
|
||||
})
|
||||
},
|
||||
goCart() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/cart/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.exchange-page {
|
||||
min-height: 100vh;
|
||||
//padding: 0 20rpx 40rpx;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.page-hero {
|
||||
//padding: 30rpx 6rpx 18rpx;
|
||||
background: url('https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/462bfa04cf0eff8698884c38b9d17519.png') no-repeat
|
||||
top center / 100% auto;
|
||||
}
|
||||
|
||||
.page-navbar {
|
||||
padding: 0 6rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
height: 960rpx;
|
||||
padding: 10rpx 6rpx;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.category-list {
|
||||
flex: 0 0 200rpx;
|
||||
background: #f2f6fc;
|
||||
border-radius: 18rpx;
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
background: #ffffff;
|
||||
border-radius: 14rpx;
|
||||
margin-bottom: 12rpx;
|
||||
padding: 16rpx 12rpx;
|
||||
color: var(--text-main);
|
||||
box-shadow: 0 8rpx 18rpx rgba(31, 111, 232, 0.05);
|
||||
border: 1rpx solid transparent;
|
||||
}
|
||||
|
||||
.category-item.active {
|
||||
border: 1rpx solid var(--brand-primary);
|
||||
box-shadow: 0 8rpx 22rpx rgba(31, 111, 232, 0.12);
|
||||
}
|
||||
|
||||
.category-name {
|
||||
|
||||
}
|
||||
|
||||
.category-type {
|
||||
color: var(--text-sub);
|
||||
font-size: 22rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.product-list {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sub-category-wrap {
|
||||
margin-bottom: 16rpx;
|
||||
padding: 12rpx;
|
||||
}
|
||||
|
||||
.sub-category-scroll {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
margin-top: 10rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sub-category-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 10rpx 18rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #f5f8ff;
|
||||
color: var(--text-sub);
|
||||
font-size: 24rpx;
|
||||
border: 1rpx solid #e1e8f5;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.sub-category-chip.active {
|
||||
color: #ffffff;
|
||||
background: var(--brand-primary);
|
||||
border-color: var(--brand-primary);
|
||||
}
|
||||
|
||||
.product-card {
|
||||
margin-bottom: 16rpx;
|
||||
width: 90%;
|
||||
border: 1rpx solid #e7eef8;
|
||||
}
|
||||
|
||||
.product-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 30rpx;
|
||||
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.product-meta {
|
||||
color: var(--text-sub);
|
||||
margin: 6rpx 0 10rpx 0;
|
||||
}
|
||||
|
||||
.price-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 14rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #ff3b30;
|
||||
font-size: 34rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.origin {
|
||||
text-decoration: line-through;
|
||||
color: #a1aabc;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.sell-point {
|
||||
color: #ff8354;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.product-tags {
|
||||
display: flex;
|
||||
gap: 10rpx;
|
||||
margin-top: 12rpx;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: #e9f1ff;
|
||||
color: var(--brand-primary);
|
||||
border-radius: 999rpx;
|
||||
padding: 8rpx 14rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.coupon {
|
||||
color: #ff8354;
|
||||
background: #fff1e9;
|
||||
border-radius: 999rpx;
|
||||
padding: 8rpx 14rpx;
|
||||
font-size: 22rpx;
|
||||
border: 1rpx dashed #ffb08a;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
|
||||
.hot {
|
||||
color: var(--brand-primary);
|
||||
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.cart-entry {
|
||||
position: fixed;
|
||||
right: 24rpx;
|
||||
bottom: 120rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 999rpx;
|
||||
padding: 10rpx 16rpx 10rpx 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
box-shadow: 0 12rpx 24rpx rgba(31, 111, 232, 0.18);
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.cart-entry-text {
|
||||
font-size: 24rpx;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.cart-entry-badge {
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
right: -10rpx;
|
||||
background: #ff3b30;
|
||||
color: #ffffff;
|
||||
min-width: 32rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 8rpx;
|
||||
}
|
||||
|
||||
.cart-popup-mask {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.cart-popup {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 40rpx;
|
||||
transform: translateX(-50%);
|
||||
width: 88%;
|
||||
max-height: 70vh;
|
||||
overflow: auto;
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.cart-popup-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
color: var(--text-sub);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.cart-note {
|
||||
color: var(--text-sub);
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.cart-empty {
|
||||
color: var(--text-sub);
|
||||
text-align: center;
|
||||
padding: 24rpx 0;
|
||||
}
|
||||
|
||||
.cart-vendor {
|
||||
border: 1rpx dashed #dfe8f5;
|
||||
border-radius: 14rpx;
|
||||
padding: 12rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.cart-vendor-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.vendor-name {
|
||||
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.cart-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.cart-item-name {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.cart-item-meta {
|
||||
color: var(--text-sub);
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.cart-item-price {
|
||||
color: #ff3b30;
|
||||
|
||||
}
|
||||
|
||||
.cart-summary {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 12rpx;
|
||||
border-top: 1rpx solid #e7eef8;
|
||||
}
|
||||
|
||||
.checkout {
|
||||
padding: 14rpx 24rpx;
|
||||
}
|
||||
</style>
|
||||
+369
File diff suppressed because one or more lines are too long
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="progress" :class="Type">
|
||||
<view class="progress-text" v-if="Vice == true">{{ Width + '%' }}</view>
|
||||
<view class="progress-bar" :style="{width: Width+'%'}"><view class="progress-text" v-if="Main == true">{{ Width + '%' }}</view></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
// 进度条百分比
|
||||
Width: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 进度条样式
|
||||
/*
|
||||
aqua
|
||||
copper
|
||||
candy
|
||||
neon
|
||||
shine
|
||||
zigzag
|
||||
diamond
|
||||
hearts
|
||||
sparkle
|
||||
*/
|
||||
Type: {
|
||||
type: String,
|
||||
default: 'aqua',
|
||||
},
|
||||
// 主进度显示百分比
|
||||
Main: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// 副进度显示百分比
|
||||
Vice: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url('Progress-Bar.css');
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,984 @@
|
||||
<template>
|
||||
<view class="mine-page">
|
||||
<view class="mine-hero">
|
||||
<!-- <AppNavbar class="mine-navbar" title="我的"/>-->
|
||||
<view class="hero-content">
|
||||
<view class="profile-left">
|
||||
<u-avatar :src="isLoggedIn ? user.avatar : ''" size="120rpx"/>
|
||||
<view class="profile-info">
|
||||
<view class="name">{{ isLoggedIn ? user.nickname : '未登录' }}</view>
|
||||
<view class="phone">{{ isLoggedIn ? user.phone : '点击登录同步手机号' }}</view>
|
||||
</view>
|
||||
<view class="primary-btn login-btn" @tap="toLogin" v-if="!isLoggedIn">去登录</view>
|
||||
</view>
|
||||
<view class="hero-right">
|
||||
<image class="hero-mascot"
|
||||
src="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/a8cc7a2ca9d342f5a10657b735c623cb.png"
|
||||
mode="aspectFit"></image>
|
||||
<view class="city-chip">{{ currentCity }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex justify-between items-center text-25" style="margin-top: 60rpx">
|
||||
<text class="text-main">转发分享给新用户，可获得积分</text>
|
||||
<!-- <text class="text-red font-bold">{{ getPoint }}积分</text>-->
|
||||
</view>
|
||||
<!-- <view class="notice-bar" v-if="lastCashLog">-->
|
||||
<!-- <text class="notice-label">奖励:</text>-->
|
||||
<!-- <text class="notice-text">{{ lastCashLog.user.nickname }}领取了{{ lastCashLog.money }}元</text>-->
|
||||
<!-- <view class="notice-more">></view>-->
|
||||
<!-- <u-icon name="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/9fd7c6fb0046d565cbd36c316023ee87.png"/>-->
|
||||
<!-- </view>-->
|
||||
</view>
|
||||
|
||||
<view class="income-card">
|
||||
<!-- <view class="income-item" @click="openBonus">-->
|
||||
<!-- <view class="flex justify-start items-center">-->
|
||||
<!-- <view class="income-value">{{ bonus.taskIncome }}</view>-->
|
||||
<!-- <view class="income-unit">元</view>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="income-label">任务收益</view>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="income-item" @click="openBonus">-->
|
||||
<!-- <view class="flex justify-start items-center">-->
|
||||
<!-- <view class="income-value">{{ bonus.shareIncome }}</view>-->
|
||||
<!-- <view class="income-unit">元</view>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="income-label">晒单收益</view>-->
|
||||
<!-- </view>-->
|
||||
<view class="income-item" @click="openPoints">
|
||||
<view class="flex justify-start items-center">
|
||||
<view class="income-value income-value--points">{{ pointSummary.currentPoints }}</view>
|
||||
<view class="income-unit income-unit--points">积分</view>
|
||||
</view>
|
||||
<view class="income-label">我的积分</view>
|
||||
</view>
|
||||
<!-- <view class="income-btn" @tap="openWithdraw">去提现</view>-->
|
||||
</view>
|
||||
|
||||
<!-- <view class="income-card" v-if="isLoggedIn && user.canAuth === 1">-->
|
||||
<!-- <view class="income-item" @click="openBonus">-->
|
||||
<!-- <view class="flex justify-start items-center">-->
|
||||
<!-- <view class="income-value">{{ bonus.totalTaskIncome }}</view>-->
|
||||
<!-- <view class="income-unit">元</view>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="income-label">总任务收益</view>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="income-item" @click="openBonus">-->
|
||||
<!-- <view class="flex justify-start items-center">-->
|
||||
<!-- <view class="income-value">{{ bonus.totalShareIncome }}</view>-->
|
||||
<!-- <view class="income-unit">元</view>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="income-label">总晒单收益</view>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="income-item" @click="openBonus">-->
|
||||
<!-- <view class="flex justify-start items-center">-->
|
||||
<!-- <view class="income-value">{{ bonus.totalTaskIncome + bonus.totalShareIncome }}</view>-->
|
||||
<!-- <view class="income-unit">元</view>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="income-label">合计收益</view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
|
||||
<view class="feature-banner-group">
|
||||
<view class="self-report-banner" @tap="openSelfReport">
|
||||
<text>自主填报</text>
|
||||
</view>
|
||||
<view class="self-report-banner" @tap="openVisit">
|
||||
<text>客户拜访</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="audit-banner" @tap="openAudit" v-if="user.canAuth === 1">
|
||||
<image class="audit-icon"
|
||||
src="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/0fd31838127cd57b1c1db44f2c749353.png"
|
||||
mode="aspectFit"></image>
|
||||
<text>药审核</text>
|
||||
</view>
|
||||
|
||||
<view class="quick-card">
|
||||
<view class="quick-item" @tap="openProfile">
|
||||
<image class="quick-icon"
|
||||
src="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/f64dbb797897f7e997b9e390c9f5b3ff.png"
|
||||
mode="aspectFit"></image>
|
||||
<text>用户资料</text>
|
||||
</view>
|
||||
<view class="quick-item" @tap="openOrder">
|
||||
<image class="quick-icon"
|
||||
src="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/b8462c751e121744fa20f460c1f43ed8.png"
|
||||
mode="aspectFit"></image>
|
||||
<text>全部订单</text>
|
||||
</view>
|
||||
<view class="quick-item" @tap="openCoupon">
|
||||
<image class="quick-icon"
|
||||
src="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/d4a24c4f61bf29755396ed7c2eecb45a.png"
|
||||
mode="aspectFit"></image>
|
||||
<text>领券中心</text>
|
||||
</view>
|
||||
<view class="quick-item" @tap="openPoints">
|
||||
<image class="quick-icon"
|
||||
src="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/7a9be3484448c3e8253140b8ff05afc6.png"
|
||||
mode="aspectFit"></image>
|
||||
<text>我的积分</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section-card">
|
||||
<view class="section-title">服务内容</view>
|
||||
<view class="grid">
|
||||
<view class="grid-item" @tap="openMyShare">
|
||||
<image class="grid-icon"
|
||||
src="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/f64dbb797897f7e997b9e390c9f5b3ff.png"
|
||||
mode="aspectFit"></image>
|
||||
<text>我的分享</text>
|
||||
</view>
|
||||
<view class="grid-item" @tap="openAddress">
|
||||
<image class="grid-icon"
|
||||
src="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/b8462c751e121744fa20f460c1f43ed8.png"
|
||||
mode="aspectFit"></image>
|
||||
<text>收货地址</text>
|
||||
</view>
|
||||
<!-- <view class="grid-item" @tap="openBonus">-->
|
||||
<!-- <image class="grid-icon"-->
|
||||
<!-- src="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/d4a24c4f61bf29755396ed7c2eecb45a.png"-->
|
||||
<!-- mode="aspectFit"></image>-->
|
||||
<!-- <text>奖金记录</text>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="grid-item" @tap="openWithdraw">-->
|
||||
<!-- <image class="grid-icon"-->
|
||||
<!-- src="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/7a9be3484448c3e8253140b8ff05afc6.png"-->
|
||||
<!-- mode="aspectFit"></image>-->
|
||||
<!-- <text>资金提现</text>-->
|
||||
<!-- </view>-->
|
||||
<view class="grid-item" @tap="openCertification">
|
||||
<image class="grid-icon"
|
||||
src="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/6aaa42c6f235c6720735aae14cb2c16a.png"
|
||||
mode="aspectFit"></image>
|
||||
<text>个人信息认证</text>
|
||||
</view>
|
||||
<view class="grid-item" @tap="openTravel">
|
||||
<image class="grid-icon"
|
||||
src="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/791479d861e69e833c3aa0073b602908.png"
|
||||
mode="aspectFit"></image>
|
||||
<text>差旅报销</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section-card">
|
||||
<view class="section-title">慢病管理</view>
|
||||
<view class="grid">
|
||||
<view class="grid-item" @tap="openChronic">
|
||||
<image class="grid-icon"
|
||||
src="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/a9249f7069c609222b031809809e4b70.png"
|
||||
mode="aspectFit"></image>
|
||||
<text>慢病信息收集</text>
|
||||
</view>
|
||||
<view class="grid-item" @tap="openChronicManage">
|
||||
<image class="grid-icon"
|
||||
src="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/e3f81b35a32d0771d2fb7c5a23e393db.png"
|
||||
mode="aspectFit"></image>
|
||||
<text>慢病信息管理</text>
|
||||
</view>
|
||||
<view class="grid-item" @tap="openService">
|
||||
<image class="grid-icon"
|
||||
src="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/5677d46c66b7ab57c9497e60e75daef5.png"
|
||||
mode="aspectFit"></image>
|
||||
<text>联系客服</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="logout-btn" @click="logout" v-if="isLoggedIn">
|
||||
<u-icon name="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/0193f5a958ccd4797d6e76403cb14096.png"/>
|
||||
<text>退出登录</text>
|
||||
</view>
|
||||
|
||||
<!-- <view class="card block">-->
|
||||
<!-- <view class="section-title">奖金记录</view>-->
|
||||
<!-- <view class="bonus-grid">-->
|
||||
<!-- <view class="bonus-item">-->
|
||||
<!-- <view class="bonus-value">¥ {{ bonus.movement }}</view>-->
|
||||
<!-- <view class="bonus-label">药动销提成</view>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="bonus-item">-->
|
||||
<!-- <view class="bonus-value">¥ {{ bonus.exchange }}</view>-->
|
||||
<!-- <view class="bonus-label">药兑换提成</view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="bonus-list">-->
|
||||
<!-- <view class="bonus-row" v-for="(item, idx) in bonus.history" :key="idx">-->
|
||||
<!-- <view>-->
|
||||
<!-- <view class="bonus-name">{{ item.name }}</view>-->
|
||||
<!-- <view class="bonus-meta">{{ item.source }} · {{ item.date }}</view>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="bonus-amount">+¥{{ item.amount }}</view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
|
||||
<!-- <view class="card block">-->
|
||||
<!-- <view class="section-title">奖金提现</view>-->
|
||||
<!-- <view class="withdraw-row">-->
|
||||
<!-- <view>-->
|
||||
<!-- <view class="withdraw-label">可提现余额</view>-->
|
||||
<!-- <view class="withdraw-value">¥ {{ withdraw.available }}</view>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="primary-btn withdraw-btn" @tap="applyWithdraw">申请提现</view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
|
||||
<Login ref="Login" @done="getUserData"/>
|
||||
<u-popup :show="servicePopupVisible" mode="bottom" round="24rpx" close-on-click-overlay @close="closeServicePopup">
|
||||
<view class="service-popup">
|
||||
<view class="service-popup-head">
|
||||
<text class="service-popup-title">联系客服</text>
|
||||
<view class="service-popup-close" @tap="closeServicePopup">
|
||||
<u-icon name="close" size="32rpx" color="#7a8495"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="service-popup-body">
|
||||
<view v-if="serviceList.length" class="service-list">
|
||||
<view
|
||||
class="service-item"
|
||||
v-for="(item, index) in serviceList"
|
||||
:key="index"
|
||||
@tap="handleServiceItem(item)"
|
||||
>
|
||||
<text class="service-item-text">{{ item.type }}: {{ item.title }}{{ item.content }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="service-empty">暂无客服内容</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {countUserIncomeReq, userInfoReq} from "@/api/user";
|
||||
import Login from '@/components/Login.vue'
|
||||
import AppNavbar from "@/components/AppNavbar.vue";
|
||||
import {clearUserInfo, getUserInfo} from "@/util/user";
|
||||
import {getLocationAction} from "@/util";
|
||||
import {dictDataInfoReq, yxeServiceReq} from "@/api/common";
|
||||
import {dealerWithdrawPageReq} from "@/api/bonus";
|
||||
import {userPointLogUserListReq} from "@/api/shop";
|
||||
|
||||
export default {
|
||||
components: {Login, AppNavbar},
|
||||
data() {
|
||||
return {
|
||||
isLoggedIn: false,
|
||||
defaultAvatar: '/static/logo.png',
|
||||
user: {
|
||||
avatar: '',
|
||||
name: '',
|
||||
phone: '',
|
||||
city: '',
|
||||
qualification: '',
|
||||
canAuth: 0,
|
||||
balance: 0,
|
||||
},
|
||||
bonus: {
|
||||
movement: 0,
|
||||
exchange: 0,
|
||||
taskIncome: 0,
|
||||
shareIncome: 0,
|
||||
totalTaskIncome: 0,
|
||||
totalShareIncome: 0,
|
||||
history: []
|
||||
},
|
||||
pointSummary: {
|
||||
currentPoints: 0,
|
||||
},
|
||||
currentCity: '定位中',
|
||||
serviceList: [],
|
||||
servicePopupVisible: false,
|
||||
lastCashLog: null,
|
||||
getPoint: 0,
|
||||
}
|
||||
},
|
||||
async onShow() {
|
||||
await this.getPointConfig()
|
||||
await this.refreshPageData()
|
||||
},
|
||||
async onPullDownRefresh() {
|
||||
try {
|
||||
await this.refreshPageData()
|
||||
} finally {
|
||||
uni.stopPullDownRefresh()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getPointConfig() {
|
||||
const {data} = await dictDataInfoReq(591)
|
||||
this.getPoint = data.dictDataCode
|
||||
},
|
||||
async refreshPageData() {
|
||||
await this.getServiceList()
|
||||
await this.getLastCashLog()
|
||||
if (getUserInfo().token) {
|
||||
this.isLoggedIn = true
|
||||
await this.getUserData()
|
||||
}
|
||||
const res = await getLocationAction().catch(() => {
|
||||
uni.showToast({
|
||||
title: '请允许位置授权',
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
if (res) {
|
||||
this.currentCity = res.city_str
|
||||
}
|
||||
},
|
||||
async getServiceList() {
|
||||
try {
|
||||
const {data} = await yxeServiceReq()
|
||||
this.serviceList = this.normalizeServiceList(data)
|
||||
} catch (error) {
|
||||
this.serviceList = []
|
||||
}
|
||||
},
|
||||
async getUserData() {
|
||||
const {data} = await userInfoReq()
|
||||
this.isLoggedIn = true
|
||||
this.user = data
|
||||
await Promise.all([
|
||||
this.getUserIncomeData(),
|
||||
this.getUserPointData()
|
||||
])
|
||||
},
|
||||
async getLastCashLog() {
|
||||
const {data} = await dealerWithdrawPageReq({
|
||||
page: 1,
|
||||
limit: 1,
|
||||
})
|
||||
if (data.list.length) this.lastCashLog = data.list[0]
|
||||
},
|
||||
async getUserIncomeData() {
|
||||
const {data} = await countUserIncomeReq()
|
||||
this.bonus = data
|
||||
},
|
||||
async getUserPointData() {
|
||||
try {
|
||||
const {data} = await userPointLogUserListReq({
|
||||
page: 1,
|
||||
limit: 20
|
||||
})
|
||||
this.pointSummary.currentPoints = this.extractCurrentPoints(data)
|
||||
} catch (error) {
|
||||
this.pointSummary.currentPoints = this.resolveUserPoints(this.user)
|
||||
}
|
||||
},
|
||||
extractCurrentPoints(payload) {
|
||||
const payloadPoints = this.resolveUserPoints(payload)
|
||||
if (payloadPoints !== 0) return payloadPoints
|
||||
const payloadList = Array.isArray(payload)
|
||||
? payload
|
||||
: (payload && Array.isArray(payload.list) ? payload.list : [])
|
||||
const listPoints = payloadList.reduce((sum, item) => sum + this.resolvePointDelta(item), 0)
|
||||
if (listPoints !== 0) return listPoints
|
||||
return this.resolveUserPoints(this.user)
|
||||
},
|
||||
resolveUserPoints(source = {}) {
|
||||
const candidates = [
|
||||
source.currentPoints,
|
||||
source.currentPoint,
|
||||
source.points,
|
||||
source.point,
|
||||
source.totalPoints,
|
||||
source.totalPoint,
|
||||
source.integral,
|
||||
source.score
|
||||
]
|
||||
for (let i = 0; i < candidates.length; i++) {
|
||||
const value = Number(candidates[i])
|
||||
if (Number.isFinite(value)) return value
|
||||
}
|
||||
return 0
|
||||
},
|
||||
resolvePointDelta(source = {}) {
|
||||
const candidates = [
|
||||
source.changePoint,
|
||||
source.changePoints,
|
||||
source.changeNum,
|
||||
source.delta,
|
||||
source.num,
|
||||
source.amount,
|
||||
source.value,
|
||||
source.point,
|
||||
source.points,
|
||||
source.integral,
|
||||
source.score
|
||||
]
|
||||
for (let i = 0; i < candidates.length; i++) {
|
||||
const value = Number(candidates[i])
|
||||
if (Number.isFinite(value)) return value
|
||||
}
|
||||
return 0
|
||||
},
|
||||
toLogin() {
|
||||
this.$refs.Login.open()
|
||||
},
|
||||
normalizeServiceList(payload) {
|
||||
return Array.isArray(payload)
|
||||
? payload
|
||||
: (payload && Array.isArray(payload.list) ? payload.list : (payload ? [payload] : []))
|
||||
},
|
||||
async openService() {
|
||||
if (!this.serviceList.length) {
|
||||
await this.getServiceList()
|
||||
}
|
||||
if (!this.serviceList.length) {
|
||||
uni.showToast({
|
||||
title: '暂无客服信息',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.servicePopupVisible = true
|
||||
},
|
||||
closeServicePopup() {
|
||||
this.servicePopupVisible = false
|
||||
},
|
||||
formatServiceItem(item) {
|
||||
if (!item) return ''
|
||||
return `${item.type}：${item.value}`
|
||||
},
|
||||
handleServiceItem(item) {
|
||||
console.log(item)
|
||||
if (item.type === '电话') {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: item.content
|
||||
})
|
||||
return
|
||||
}
|
||||
if (item.type === '微信') {
|
||||
uni.setClipboardData({
|
||||
data: item.content,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '微信号已复制',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
openOrder() {
|
||||
this.jumpWithLogin('/pages/order/list')
|
||||
},
|
||||
openCoupon() {
|
||||
this.jumpWithLogin('/packageUser/coupon/index')
|
||||
},
|
||||
openPoints() {
|
||||
this.jumpWithLogin('/packageUser/points/index')
|
||||
},
|
||||
openProfile() {
|
||||
if (!this.isLoggedIn) return this.$refs.Login.open()
|
||||
uni.navigateTo({
|
||||
url: '/pages/mine/profile'
|
||||
})
|
||||
},
|
||||
openMyShare() {
|
||||
this.jumpWithLogin('/pages/share/mine')
|
||||
},
|
||||
openAddress() {
|
||||
this.jumpWithLogin('/packageUser/address/index')
|
||||
},
|
||||
openBonus() {
|
||||
this.jumpWithLogin('/pages/bonus/index')
|
||||
},
|
||||
openSelfReport() {
|
||||
this.jumpWithLogin('/packageUser/self-report/create')
|
||||
},
|
||||
openWithdraw() {
|
||||
this.jumpWithLogin('/pages/bonus/withdraw')
|
||||
},
|
||||
openCertification() {
|
||||
this.jumpWithLogin('/pages/certification/index')
|
||||
},
|
||||
openTravel() {
|
||||
this.jumpWithLogin('/packageUser/travel/index')
|
||||
},
|
||||
openVisit() {
|
||||
this.jumpWithLogin('/pages/visit/index')
|
||||
},
|
||||
openAudit() {
|
||||
this.jumpWithLogin('/pages/audit/index')
|
||||
},
|
||||
openChronic() {
|
||||
this.jumpWithLogin('/packageUser/chronic/index')
|
||||
},
|
||||
openChronicManage() {
|
||||
this.jumpWithLogin('/packageUser/chronic/manage')
|
||||
},
|
||||
jumpWithLogin(url){
|
||||
if (!this.isLoggedIn)
|
||||
return this.$refs.Login.open()
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
},
|
||||
logout(){
|
||||
clearUserInfo()
|
||||
this.user = {}
|
||||
this.isLoggedIn = false
|
||||
this.bonus = {
|
||||
taskIncome: 0,
|
||||
shareIncome: 0,
|
||||
totalTaskIncome: 0,
|
||||
totalShareIncome: 0,
|
||||
}
|
||||
this.pointSummary = {
|
||||
currentPoints: 0,
|
||||
}
|
||||
// this.$refs.Login.open()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mine-page {
|
||||
min-height: 100vh;
|
||||
padding: 0;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.mine-hero {
|
||||
padding: 180rpx 20rpx 20rpx 20rpx;
|
||||
background: url('https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/46361d4be9d61af01e0dd97870d8765c.png') no-repeat top center / 100% auto;
|
||||
}
|
||||
|
||||
.mine-navbar {
|
||||
padding: 0 6rpx;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 14rpx;
|
||||
}
|
||||
|
||||
.profile-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: #1f2937;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.phone {
|
||||
color: #6b7280;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
padding: 10rpx 18rpx;
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
|
||||
.hero-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 8rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-mascot {
|
||||
width: 150rpx;
|
||||
height: 115rpx;
|
||||
}
|
||||
|
||||
.city-chip {
|
||||
padding: 6rpx 18rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #ffffff;
|
||||
border: 1rpx solid #2fc6a7;
|
||||
color: #2fc6a7;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
position: absolute;
|
||||
bottom: -40rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 120rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.notice-bar {
|
||||
margin: 60rpx 20rpx 0;
|
||||
padding: 12rpx 16rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 999rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.notice-label {
|
||||
color: #2fc6a7;
|
||||
font-weight: 700;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.notice-text {
|
||||
flex: 1;
|
||||
font-size: 24rpx;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.notice-more {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
border: 1rpx solid #2fc6a7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #2fc6a7;
|
||||
}
|
||||
|
||||
.income-card {
|
||||
margin: 16rpx 20rpx 0;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 18rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
flex-wrap: wrap;
|
||||
box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid #2fc6a7;
|
||||
border-top: 20px solid #2fc6a7;
|
||||
}
|
||||
|
||||
.income-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.income-value {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #ff3b30;
|
||||
}
|
||||
|
||||
.income-unit {
|
||||
font-size: 22rpx;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.income-value--points,
|
||||
.income-unit--points {
|
||||
color: #2fc6a7;
|
||||
}
|
||||
|
||||
.income-label {
|
||||
font-size: 22rpx;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.income-btn {
|
||||
padding: 10rpx 20rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #2fc6a7;
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.feature-banner-group {
|
||||
margin: 20rpx 20rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.audit-banner {
|
||||
flex: 1;
|
||||
padding: 24rpx 14rpx;
|
||||
background: linear-gradient(164.72deg, rgba(215,177,115,1) 28.42%,rgba(226,190,133,1) 60.06%,rgba(214,173,106,1) 89.27%);
|
||||
color: #ffffff;
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
margin: 0 20rpx 20rpx;
|
||||
}
|
||||
|
||||
.self-report-row {
|
||||
margin: 14rpx 20rpx 0;
|
||||
}
|
||||
|
||||
.self-report-banner {
|
||||
flex: 1;
|
||||
border-radius: 40rpx;
|
||||
background: linear-gradient(135deg, #33d0b3, #22c3a1);
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 10rpx 24rpx rgba(22, 163, 74, 0.18);
|
||||
margin-bottom: 20rpx;
|
||||
padding: 24rpx 14rpx;
|
||||
}
|
||||
|
||||
.audit-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.quick-card {
|
||||
margin: 16rpx 20rpx 0;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx 10rpx;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 10rpx;
|
||||
text-align: center;
|
||||
box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.quick-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.quick-icon {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
}
|
||||
|
||||
.section-card {
|
||||
margin: 16rpx 20rpx 0;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 18rpx 14rpx 20rpx;
|
||||
box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin-bottom: 14rpx;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 18rpx 10rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.grid-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
margin: 22rpx 20rpx 0;
|
||||
padding: 18rpx 0;
|
||||
border-radius: 999rpx;
|
||||
border: 1rpx solid #2fc6a7;
|
||||
color: #2fc6a7;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bonus-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.bonus-item {
|
||||
background: linear-gradient(135deg, #f0f5ff, #ffffff);
|
||||
border-radius: 14rpx;
|
||||
padding: 12rpx;
|
||||
border: 1rpx solid #e7eef8;
|
||||
}
|
||||
|
||||
.bonus-value {
|
||||
font-size: 32rpx;
|
||||
|
||||
color: var(--brand-primary);
|
||||
}
|
||||
|
||||
.bonus-label {
|
||||
color: var(--text-sub);
|
||||
font-size: 24rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.bonus-list {
|
||||
border-top: 1rpx solid #edf1f7;
|
||||
}
|
||||
|
||||
.bonus-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12rpx 0;
|
||||
border-bottom: 1rpx dashed #e3eaf4;
|
||||
}
|
||||
|
||||
.bonus-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.bonus-name {
|
||||
font-size: 28rpx;
|
||||
|
||||
}
|
||||
|
||||
.bonus-meta {
|
||||
color: var(--text-sub);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.bonus-amount {
|
||||
color: #ff3b30;
|
||||
|
||||
}
|
||||
|
||||
.withdraw-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.withdraw-label {
|
||||
color: var(--text-sub);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.withdraw-value {
|
||||
font-size: 30rpx;
|
||||
|
||||
color: var(--brand-primary);
|
||||
}
|
||||
|
||||
.withdraw-btn {
|
||||
padding: 12rpx 20rpx;
|
||||
}
|
||||
|
||||
.cert-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10rpx 0;
|
||||
border-bottom: 1rpx solid #edf1f7;
|
||||
}
|
||||
|
||||
.cert-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.cert-title {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.cert-meta {
|
||||
color: var(--text-sub);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.service-popup {
|
||||
background: #ffffff;
|
||||
padding: 24rpx 24rpx 32rpx;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
}
|
||||
|
||||
.service-popup-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.service-popup-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.service-popup-close {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.service-popup-body {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.service-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.service-item {
|
||||
padding: 14rpx 16rpx;
|
||||
border-radius: 14rpx;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.service-item-text {
|
||||
font-size: 26rpx;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.service-empty {
|
||||
padding: 20rpx 0;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<view class="profile-page">
|
||||
<view class="profile-hero">
|
||||
<AppNavbar class="profile-navbar" title="用户资料" show-back/>
|
||||
<view class="intro-card">
|
||||
<view class="card-title">
|
||||
<view class="title-bar"></view>
|
||||
<text>用户资料</text>
|
||||
</view>
|
||||
<text class="intro-text">点击头像上传，点击昵称获取微信昵称</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-card">
|
||||
<view class="card-title">
|
||||
<view class="title-bar"></view>
|
||||
<text>用户资料</text>
|
||||
</view>
|
||||
<view class="avatar-row">
|
||||
<button class="ghost-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
|
||||
<u-avatar class="avatar-img" :src="form.avatar" mode="aspectFill" />
|
||||
</button>
|
||||
<view class="avatar-tip">点击头像上传</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-card">
|
||||
<view class="card-title">
|
||||
<view class="title-bar"></view>
|
||||
<text>姓名</text>
|
||||
</view>
|
||||
<view class="name-row">
|
||||
<input v-model="form.realName" class="input" type="text" maxlength="20" placeholder="请输入姓名" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-card">
|
||||
<view class="card-title">
|
||||
<view class="title-bar"></view>
|
||||
<text>昵称</text>
|
||||
</view>
|
||||
<view class="nickname-row">
|
||||
<input v-model="form.nickname" class="input" type="nickname" placeholder="点击获取昵称" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="submit-btn" @tap="saveProfile">保存</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {updateUserReq, userInfoReq} from "@/api/user";
|
||||
import {chooseImg} from "@/util";
|
||||
import {uploadImg} from "@/util";
|
||||
import AppNavbar from "@/components/AppNavbar.vue";
|
||||
|
||||
export default {
|
||||
components: {AppNavbar},
|
||||
data() {
|
||||
return {
|
||||
defaultAvatar: '/static/logo.png',
|
||||
form: {
|
||||
avatar: '',
|
||||
realName: '',
|
||||
nickname: ''
|
||||
},
|
||||
saving: false
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.fetchUser()
|
||||
},
|
||||
methods: {
|
||||
async fetchUser() {
|
||||
const {data} = await userInfoReq()
|
||||
this.form.avatar = data.avatar || data.avatarUrl || ''
|
||||
this.form.realName = data.realName || data.real_name || data.name || ''
|
||||
this.form.nickname = data.nickname || data.name || ''
|
||||
},
|
||||
async onChooseAvatar(e) {
|
||||
const avatarUrl = e.detail && e.detail.avatarUrl
|
||||
if (!avatarUrl) return
|
||||
const res = await uploadImg(avatarUrl)
|
||||
this.form.avatar = res.path
|
||||
},
|
||||
async pickAvatar() {
|
||||
const res = await chooseImg(1)
|
||||
if (!res.length) return
|
||||
this.form.avatar = res[0].path
|
||||
},
|
||||
fetchWechatNickname() {
|
||||
if (!uni.getUserProfile) {
|
||||
uni.showToast({
|
||||
title: '当前环境不支持',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.getUserProfile({
|
||||
desc: '用于完善用户资料',
|
||||
success: res => {
|
||||
const info = res.userInfo || {}
|
||||
if (info.nickName) this.form.nickname = info.nickName
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '获取失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
async saveProfile() {
|
||||
if (this.saving) return
|
||||
if (!String(this.form.realName || '').trim()) {
|
||||
uni.showToast({
|
||||
title: '请填写姓名',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.form.nickname) {
|
||||
uni.showToast({
|
||||
title: '请填写昵称',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.saving = true
|
||||
try {
|
||||
await updateUserReq({
|
||||
avatar: this.form.avatar,
|
||||
realName: String(this.form.realName || '').trim(),
|
||||
nickname: this.form.nickname
|
||||
})
|
||||
uni.showToast({
|
||||
title: '已保存',
|
||||
icon: 'success'
|
||||
})
|
||||
} catch (err) {
|
||||
uni.showToast({
|
||||
title: '保存失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.saving = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.profile-page {
|
||||
min-height: 100vh;
|
||||
//padding: 0 20rpx 60rpx;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.profile-hero {
|
||||
//padding: 30rpx 6rpx 18rpx;
|
||||
//background: url('https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/462bfa04cf0eff8698884c38b9d17519.png') no-repeat
|
||||
// top center / 100% auto;
|
||||
}
|
||||
|
||||
|
||||
.intro-card {
|
||||
margin: 18rpx 20rpx 0;
|
||||
padding: 20rpx 18rpx;
|
||||
border-radius: 20rpx;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
width: 6rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #2fc6a7;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
margin-top: 12rpx;
|
||||
font-size: 26rpx;
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
margin: 16rpx 20rpx 0;
|
||||
padding: 18rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.avatar-row {
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 50%;
|
||||
background: #f5f7fb;
|
||||
}
|
||||
|
||||
.avatar-tip {
|
||||
color: #6b7280;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.ghost-btn {
|
||||
margin: 0;
|
||||
border: none;
|
||||
border-radius: 999rpx;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.ghost-btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.nickname-row {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.name-row {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.input {
|
||||
font-size: 28rpx;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
margin: 24rpx 20rpx 0;
|
||||
padding: 18rpx 0;
|
||||
text-align: center;
|
||||
border-radius: 999rpx;
|
||||
background: linear-gradient(135deg, #33d0b3, #22c3a1);
|
||||
color: #ffffff;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 10rpx 18rpx rgba(34, 195, 161, 0.3);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,768 @@
|
||||
<template>
|
||||
<view class="checkout-page">
|
||||
<view class="page-hero">
|
||||
<AppNavbar class="page-navbar" title="订单结算" show-back/>
|
||||
</view>
|
||||
|
||||
<view class="card block">
|
||||
<view class="section-title">收货信息</view>
|
||||
<view class="address" @tap="openAddressPopup">
|
||||
<view>
|
||||
<view class="addr-name">
|
||||
<text v-if="selectedAddress">{{ selectedAddress.name }} {{ selectedAddress.phone }}</text>
|
||||
<text v-else>请选择收货地址</text>
|
||||
</view>
|
||||
<view class="addr-detail">
|
||||
<text v-if="selectedAddress">{{ getFullAddress(selectedAddress) }}</text>
|
||||
<text v-else>点击选择或新增收货地址</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="address-actions">
|
||||
<view v-if="defaultSelected" class="chip">默认</view>
|
||||
<view class="choose">更换</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card block">
|
||||
<view class="section-title">商品信息</view>
|
||||
<view class="item" v-for="(item, index) in goodsList" :key="index">
|
||||
<view class="flex justify-start items-start">
|
||||
<u-image :src="item.image" width="80rpx" height="80rpx" radius="15rpx"/>
|
||||
<view class="ml-15">
|
||||
<view class="item-name">{{ item.goodsName }}</view>
|
||||
<view class="item-meta">x {{ item.num }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-price">¥{{ (item.num * item.salePrice).toFixed(2) }}</view>
|
||||
</view>
|
||||
<!-- <view class="vendor-sum">小计：¥{{ vendor.subtotal.toFixed(2) }}</view>-->
|
||||
</view>
|
||||
|
||||
<view class="card block">
|
||||
<view class="section-title">优惠</view>
|
||||
<view class="row">
|
||||
<view>优惠券</view>
|
||||
<view class="coupon" @tap="openCoupon">{{ couponText }}</view>
|
||||
</view>
|
||||
<!-- <view class="row">-->
|
||||
<!-- <view>发票</view>-->
|
||||
<!-- <switch :checked="invoice" color="#2563eb" @change="invoice = $event.detail.value"/>-->
|
||||
<!-- </view>-->
|
||||
</view>
|
||||
|
||||
<view class="card block">
|
||||
<view class="section-title">费用明细</view>
|
||||
<view class="row">
|
||||
<view>商品金额</view>
|
||||
<view>¥{{ goodsTotal }}</view>
|
||||
</view>
|
||||
<!-- <view class="row">-->
|
||||
<!-- <view>运费</view>-->
|
||||
<!-- <view>¥{{ freightTotal }}</view>-->
|
||||
<!-- </view>-->
|
||||
<view class="row">
|
||||
<view>优惠</view>
|
||||
<view>-¥{{ discount }}</view>
|
||||
</view>
|
||||
<view class="row total">
|
||||
<view>应付总额</view>
|
||||
<view class="pay">¥{{ payTotal }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="action-bar">
|
||||
<view class="sum">合计：¥{{ payTotal }}</view>
|
||||
<view class="primary-btn submit" @tap="submitOrder">提交订单</view>
|
||||
</view>
|
||||
|
||||
<view v-if="showAddressPopup" class="address-popup-mask" @tap="closeAddressPopup"></view>
|
||||
<view v-if="showAddressPopup" class="address-popup card" @tap.stop>
|
||||
<view class="popup-head">
|
||||
<view class="section-title">选择收货地址</view>
|
||||
<view class="close-btn" @tap="closeAddressPopup">关闭</view>
|
||||
</view>
|
||||
<view v-if="addressLoading" class="popup-empty">加载中...</view>
|
||||
<view v-else-if="addressList.length === 0" class="popup-empty">
|
||||
<view class="popup-empty-text">暂无地址</view>
|
||||
<u-button type="primary" shape="circle" size="mini" @tap="goAddAddress">去新增</u-button>
|
||||
</view>
|
||||
<view v-else class="popup-list">
|
||||
<view
|
||||
v-for="item in addressList"
|
||||
:key="item.id"
|
||||
class="popup-item"
|
||||
:class="{ active: isSelectedAddress(item) }"
|
||||
@tap="selectAddress(item)"
|
||||
>
|
||||
<view class="popup-item-head">
|
||||
<view class="addr-name">{{ item.name }} {{ item.phone }}</view>
|
||||
<view v-if="isDefaultAddress(item)" class="chip">默认</view>
|
||||
</view>
|
||||
<view class="addr-detail">{{ getFullAddress(item) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="showCouponPopup" class="address-popup-mask" @tap="closeCouponPopup"></view>
|
||||
<view v-if="showCouponPopup" class="coupon-popup card" @tap.stop>
|
||||
<view class="popup-head">
|
||||
<view class="section-title">选择优惠券</view>
|
||||
<view class="close-btn" @tap="closeCouponPopup">关闭</view>
|
||||
</view>
|
||||
<view v-if="couponLoading" class="popup-empty">加载中...</view>
|
||||
<view v-else-if="couponList.length === 0" class="popup-empty">
|
||||
<view class="popup-empty-text">暂无可用优惠券</view>
|
||||
</view>
|
||||
<view v-else class="coupon-list">
|
||||
<view
|
||||
v-for="item in couponList"
|
||||
:key="item.id"
|
||||
class="coupon-item"
|
||||
:class="{ active: isSelectedCoupon(item), disabled: !item.available }"
|
||||
@tap="selectCoupon(item)"
|
||||
>
|
||||
<view class="coupon-item-main">
|
||||
<!-- <view class="coupon-amount">¥{{ item.amount }}</view>-->
|
||||
<view class="coupon-info">
|
||||
<view class="coupon-title">{{ item.title }}</view>
|
||||
<!-- <view class="coupon-desc">{{ item.desc }}</view>-->
|
||||
<view class="coupon-expire">
|
||||
有效期：{{ item.expireType === 1 ? item.expireEndDate : `领取后${item.expireDay}天过期` }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coupon-right">
|
||||
<view v-if="!item.available" class="coupon-status">{{ item.statusText }}</view>
|
||||
<view v-else-if="isSelectedCoupon(item)" class="chip">已选</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coupon-footer">
|
||||
<view class="text-btn" @tap="clearCoupon">不使用优惠券</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {goodsListByIdsReq, orderAddReq} from "@/api/goods";
|
||||
import {userAddressListReq} from "@/api/address";
|
||||
import {userCouponListReq} from "@/api/coupon";
|
||||
import AppNavbar from "@/components/AppNavbar.vue";
|
||||
|
||||
export default {
|
||||
components: {AppNavbar},
|
||||
data() {
|
||||
return {
|
||||
vendors: [],
|
||||
goodsList: [],
|
||||
goodsDataList: [],
|
||||
invoice: false,
|
||||
addressList: [],
|
||||
addressLoading: false,
|
||||
showAddressPopup: false,
|
||||
selectedAddress: null,
|
||||
couponSourceList: [],
|
||||
couponList: [],
|
||||
couponLoading: false,
|
||||
showCouponPopup: false,
|
||||
selectedCoupon: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
goodsTotal() {
|
||||
return this.goodsList.reduce((sum, v) => sum + parseFloat(v.num * v.salePrice), 0).toFixed(2)
|
||||
},
|
||||
freightTotal() {
|
||||
return 0
|
||||
},
|
||||
orderAmountValue() {
|
||||
return parseFloat(this.goodsTotal) + parseFloat(this.freightTotal)
|
||||
},
|
||||
payTotal() {
|
||||
return (parseFloat(this.goodsTotal) + parseFloat(this.freightTotal) - parseFloat(this.discount)).toFixed(2)
|
||||
},
|
||||
defaultSelected() {
|
||||
return this.selectedAddress ? this.isDefaultAddress(this.selectedAddress) : false
|
||||
},
|
||||
discount() {
|
||||
if (!this.selectedCoupon || !this.selectedCoupon.available) return '0.00'
|
||||
const orderAmount = this.orderAmountValue
|
||||
const typeValue = Number(this.selectedCoupon.type)
|
||||
let discountAmount = 0
|
||||
if (typeValue === 1) {
|
||||
let rateValue = Number(this.selectedCoupon.reduceRate || 0)
|
||||
if (rateValue > 1) {
|
||||
rateValue = rateValue > 10 ? rateValue / 100 : rateValue / 10
|
||||
}
|
||||
rateValue = Math.max(0, Math.min(rateValue, 1))
|
||||
discountAmount = orderAmount * (1 - rateValue)
|
||||
} else {
|
||||
discountAmount = Number(this.selectedCoupon.reduceAmount || 0)
|
||||
}
|
||||
const maxDiscount = Math.min(discountAmount, orderAmount)
|
||||
return maxDiscount.toFixed(2)
|
||||
},
|
||||
couponText() {
|
||||
if (!this.selectedCoupon) return '选择优惠券'
|
||||
const title = this.selectedCoupon.title || '优惠券'
|
||||
return `${title} -¥${this.discount}`
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
orderAmountValue() {
|
||||
this.refreshCouponList()
|
||||
}
|
||||
},
|
||||
async onLoad(options) {
|
||||
const rawGoods = options.goodsDataList ? decodeURIComponent(options.goodsDataList) : '[]'
|
||||
try {
|
||||
this.goodsDataList = JSON.parse(rawGoods)
|
||||
} catch (err) {
|
||||
this.goodsDataList = []
|
||||
}
|
||||
await this.getGoodsList()
|
||||
await this.loadAddressList()
|
||||
},
|
||||
methods: {
|
||||
async getGoodsList() {
|
||||
if (!this.goodsDataList.length) {
|
||||
this.vendors = []
|
||||
return
|
||||
}
|
||||
const {data} = await goodsListByIdsReq({
|
||||
ids: this.goodsDataList.map(item => item.goodsId).join()
|
||||
})
|
||||
this.goodsList = data.map(item => {
|
||||
const goodsData = this.goodsDataList.find(goodsData => goodsData.goodsId === item.goodsId || goodsData.goodsId === item.id)
|
||||
return {
|
||||
num: goodsData.num,
|
||||
...item,
|
||||
}
|
||||
})
|
||||
this.$forceUpdate()
|
||||
console.log(this.goodsList)
|
||||
},
|
||||
async loadAddressList() {
|
||||
this.addressLoading = true
|
||||
try {
|
||||
const {data} = await userAddressListReq()
|
||||
const list = Array.isArray(data) ? data : (data && data.list ? data.list : [])
|
||||
this.addressList = list
|
||||
const defaultItem = list.find(item => this.isDefaultAddress(item))
|
||||
this.selectedAddress = defaultItem || list[0] || null
|
||||
} catch (err) {
|
||||
uni.showToast({
|
||||
title: '地址加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.addressLoading = false
|
||||
}
|
||||
},
|
||||
isDefaultAddress(item) {
|
||||
return Number(item.isDefault) === 1 || Number(item.is_default) === 1 || item.is_default === true
|
||||
},
|
||||
openAddressPopup() {
|
||||
this.showAddressPopup = true
|
||||
if (!this.addressList.length) {
|
||||
this.loadAddressList()
|
||||
}
|
||||
},
|
||||
closeAddressPopup() {
|
||||
this.showAddressPopup = false
|
||||
},
|
||||
selectAddress(item) {
|
||||
this.selectedAddress = item
|
||||
this.showAddressPopup = false
|
||||
},
|
||||
goAddAddress() {
|
||||
this.showAddressPopup = false
|
||||
uni.navigateTo({
|
||||
url: '/packageUser/address/index'
|
||||
})
|
||||
},
|
||||
isSelectedAddress(item) {
|
||||
if (!this.selectedAddress) return false
|
||||
const selectedId = this.selectedAddress.id || this.selectedAddress.addressId || this.selectedAddress.full_address
|
||||
const itemId = item.id || item.addressId || item.full_address
|
||||
return selectedId && itemId ? selectedId === itemId : this.getFullAddress(item) === this.getFullAddress(this.selectedAddress)
|
||||
},
|
||||
getFullAddress(item) {
|
||||
if (!item) return ''
|
||||
return item.fullAddress || item.full_address || `${item.province || ''}${item.city || ''}${item.region || ''}${item.address || ''}`
|
||||
},
|
||||
async loadCouponList() {
|
||||
this.couponLoading = true
|
||||
try {
|
||||
const {data} = await userCouponListReq()
|
||||
const list = Array.isArray(data) ? data : (data && data.list ? data.list : [])
|
||||
this.couponSourceList = list
|
||||
this.refreshCouponList()
|
||||
} catch (err) {
|
||||
uni.showToast({
|
||||
title: '优惠券加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.couponLoading = false
|
||||
}
|
||||
},
|
||||
openCoupon() {
|
||||
this.showCouponPopup = true
|
||||
this.loadCouponList()
|
||||
},
|
||||
closeCouponPopup() {
|
||||
this.showCouponPopup = false
|
||||
},
|
||||
selectCoupon(item) {
|
||||
if (!item.available) {
|
||||
uni.showToast({
|
||||
title: '该优惠券不可用',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.selectedCoupon = item
|
||||
this.showCouponPopup = false
|
||||
},
|
||||
clearCoupon() {
|
||||
this.selectedCoupon = null
|
||||
this.showCouponPopup = false
|
||||
},
|
||||
isSelectedCoupon(item) {
|
||||
return this.selectedCoupon && item.id && this.selectedCoupon.id === item.id
|
||||
},
|
||||
refreshCouponList() {
|
||||
if (!this.couponSourceList.length) return
|
||||
this.couponList = this.couponSourceList.map(this.normalizeUserCoupon)
|
||||
if (this.selectedCoupon) {
|
||||
const matched = this.couponList.find(item => item.id === this.selectedCoupon.id)
|
||||
this.selectedCoupon = matched && matched.available ? matched : null
|
||||
}
|
||||
},
|
||||
normalizeUserCoupon(item) {
|
||||
const coupon = item.coupon || {}
|
||||
const amount = Number(coupon.amount || item.amount || item.faceValue || item.money || 0)
|
||||
const statusValue = Number(item.used || item.status)
|
||||
let available = true
|
||||
let statusText = '可用'
|
||||
if (statusValue === 1) {
|
||||
available = false
|
||||
statusText = '已使用'
|
||||
}
|
||||
if (statusValue === 2) {
|
||||
available = false
|
||||
statusText = '已过期'
|
||||
}
|
||||
if (!Number.isFinite(statusValue)) {
|
||||
statusText = '可用'
|
||||
available = true
|
||||
}
|
||||
const startAmount = Number(coupon.startAmount || item.startAmount || 0)
|
||||
const orderAmount = this.orderAmountValue
|
||||
if (available && orderAmount < startAmount) {
|
||||
available = false
|
||||
statusText = '未满足门槛'
|
||||
}
|
||||
return {
|
||||
id: item.id || item.userCouponId || item.couponId || item.coupon_id,
|
||||
amount: amount.toFixed(2),
|
||||
title: coupon.title || item.title || item.name || '优惠券',
|
||||
desc: item.desc || item.description || item.useRule || '无门槛使用',
|
||||
expire: item.expire || item.expireTime || item.endTime || '-',
|
||||
available,
|
||||
statusText,
|
||||
expireType: coupon.expireType,
|
||||
expireEndDate: coupon.expireEndDate,
|
||||
expireDay: coupon.expireDay,
|
||||
startAmount,
|
||||
type: coupon.type || item.type || 0,
|
||||
reduceAmount: coupon.reduceAmount || item.reduceAmount || 0,
|
||||
reduceRate: coupon.reduceRate || item.reduceRate || 0
|
||||
}
|
||||
},
|
||||
async submitOrder() {
|
||||
if (!this.selectedAddress) {
|
||||
uni.showToast({
|
||||
title: '请先选择收货地址',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.showLoading()
|
||||
const payload = {
|
||||
goodsList: this.goodsDataList,
|
||||
name: this.selectedAddress.name,
|
||||
phone: this.selectedAddress.phone,
|
||||
address: this.getFullAddress(this.selectedAddress),
|
||||
}
|
||||
if (this.selectedCoupon && this.selectedCoupon.id) {
|
||||
payload.couponId = this.selectedCoupon.id
|
||||
}
|
||||
const res = await orderAddReq(payload).catch(err => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
if (res) {
|
||||
console.log(res)
|
||||
uni.hideLoading()
|
||||
uni.requestPayment({
|
||||
provider: res.data.provider, // 服务提供商
|
||||
timeStamp: res.data.timeStamp, // 时间戳
|
||||
nonceStr: res.data.nonceStr, // 随机字符串
|
||||
package: res.data.package,
|
||||
signType: res.data.signType, // 签名算法
|
||||
paySign: res.data.paySign, // 签名
|
||||
success: function (res) {
|
||||
uni.showToast({
|
||||
title: '支付成功',
|
||||
icon: 'success'
|
||||
});
|
||||
setTimeout(function () {
|
||||
uni.navigateTo({
|
||||
url: '/pages/order/list'
|
||||
});
|
||||
}, 500);
|
||||
},
|
||||
fail: function (err) {
|
||||
console.log('支付失败', err);
|
||||
uni.navigateTo({
|
||||
url: '/pages/order/list'
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.checkout-page {
|
||||
min-height: 100vh;
|
||||
//padding: 0 20rpx 100rpx;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.page-hero {
|
||||
//padding: 30rpx 6rpx 18rpx;
|
||||
background: url('https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/462bfa04cf0eff8698884c38b9d17519.png') no-repeat top center / 100% auto;
|
||||
}
|
||||
|
||||
.page-navbar {
|
||||
padding: 0 6rpx;
|
||||
}
|
||||
|
||||
.intro-card {
|
||||
margin-top: 18rpx;
|
||||
padding: 20rpx 18rpx;
|
||||
border-radius: 20rpx;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
width: 6rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #2fc6a7;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin: 18rpx;
|
||||
}
|
||||
|
||||
.address {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.addr-name {
|
||||
font-weight: 700;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.addr-detail {
|
||||
color: var(--text-sub);
|
||||
font-size: 24rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.address-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.choose {
|
||||
color: var(--brand-primary);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.vendor-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.vendor-name {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.freight {
|
||||
color: var(--text-sub);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10rpx 0;
|
||||
border-bottom: 1rpx solid #edf1f7;
|
||||
}
|
||||
|
||||
.item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-weight: 700;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.item-meta {
|
||||
color: var(--text-sub);
|
||||
font-size: 24rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.item-price {
|
||||
color: var(--brand-primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.vendor-sum {
|
||||
text-align: right;
|
||||
color: var(--text-main);
|
||||
font-weight: 700;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10rpx 0;
|
||||
border-bottom: 1rpx solid #edf1f7;
|
||||
}
|
||||
|
||||
.row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.coupon {
|
||||
color: #ff8354;
|
||||
}
|
||||
|
||||
.total {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.pay {
|
||||
color: #ff3b30;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12rpx 24rpx;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 -6rpx 16rpx rgba(31, 111, 232, 0.08);
|
||||
}
|
||||
|
||||
.address-popup-mask {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.address-popup {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 40rpx;
|
||||
transform: translateX(-50%);
|
||||
width: 88%;
|
||||
max-height: 70vh;
|
||||
overflow: auto;
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.popup-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.popup-empty {
|
||||
color: var(--text-sub);
|
||||
text-align: center;
|
||||
padding: 16rpx 0;
|
||||
}
|
||||
|
||||
.popup-empty-text {
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.popup-empty-btn {
|
||||
display: inline-flex;
|
||||
padding: 10rpx 20rpx;
|
||||
height: 52rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.popup-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.popup-item {
|
||||
border: 1rpx solid #e7eef8;
|
||||
border-radius: 14rpx;
|
||||
padding: 12rpx;
|
||||
}
|
||||
|
||||
.popup-item.active {
|
||||
border-color: var(--brand-primary);
|
||||
box-shadow: 0 8rpx 18rpx rgba(31, 111, 232, 0.1);
|
||||
}
|
||||
|
||||
.popup-item-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.coupon-popup {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 40rpx;
|
||||
transform: translateX(-50%);
|
||||
width: 88%;
|
||||
max-height: 70vh;
|
||||
overflow: auto;
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.coupon-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.coupon-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border: 1rpx solid #e7eef8;
|
||||
border-radius: 14rpx;
|
||||
padding: 12rpx;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.coupon-item.active {
|
||||
border-color: var(--brand-primary);
|
||||
box-shadow: 0 8rpx 18rpx rgba(31, 111, 232, 0.1);
|
||||
}
|
||||
|
||||
.coupon-item.disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.coupon-item-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.coupon-amount {
|
||||
font-size: 30rpx;
|
||||
font-weight: 800;
|
||||
color: #ff3b30;
|
||||
min-width: 100rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.coupon-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.coupon-title {
|
||||
font-weight: 700;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.coupon-desc,
|
||||
.coupon-expire {
|
||||
color: var(--text-sub);
|
||||
font-size: 24rpx;
|
||||
margin-top: 2rpx;
|
||||
}
|
||||
|
||||
.coupon-right {
|
||||
min-width: 70rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.coupon-status {
|
||||
color: var(--text-sub);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.coupon-footer {
|
||||
margin-top: 12rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-btn {
|
||||
color: var(--brand-primary);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
color: var(--text-sub);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.sum {
|
||||
color: var(--text-main);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.submit {
|
||||
padding: 14rpx 24rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<view class="order-detail-page">
|
||||
<view class="page-hero">
|
||||
<AppNavbar title="订单详情" show-back/>
|
||||
</view>
|
||||
|
||||
<view class="card block">
|
||||
<view class="section-title">订单信息</view>
|
||||
<view class="info-row">
|
||||
<view>订单号</view>
|
||||
<view>{{ getOrderNo(order) }}</view>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<view>状态</view>
|
||||
<view class="status">{{ statusLabel(order.status) }}</view>
|
||||
</view>
|
||||
<view v-if="order.createTime || order.createdAt" class="info-row">
|
||||
<view>下单时间</view>
|
||||
<view>{{ order.createTime || order.createdAt }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card block">
|
||||
<view class="section-title">收货地址</view>
|
||||
<view v-if="receiver.name" class="addr-name">{{ receiver.name }} {{ maskPhone(receiver.phone) }}</view>
|
||||
<view class="addr-detail">{{ receiver.address }}</view>
|
||||
</view>
|
||||
|
||||
<view class="card block">
|
||||
<view class="section-title">商品清单</view>
|
||||
<view v-if="items.length === 0" class="empty">暂无商品</view>
|
||||
<view v-else class="items">
|
||||
<view class="item" v-for="(item, idx) in items" :key="idx">
|
||||
<view class="item-name">{{ item.goods.goodsName }}</view>
|
||||
<view class="item-meta">x {{ item.num || item.qty || 1 }}</view>
|
||||
<view class="item-price">¥{{ formatPrice(item.goods.salePrice || item.price || item.amount || 0) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card block">
|
||||
<view class="section-title">费用明细</view>
|
||||
<view class="info-row">
|
||||
<view>商品金额</view>
|
||||
<view>¥{{ formatPrice(order.totalPrice || 0) }}</view>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<view>运费</view>
|
||||
<view>¥{{ formatPrice(order.freightAmount || order.freight || 0) }}</view>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<view>优惠</view>
|
||||
<view>-¥{{ formatPrice(order.discountAmount || order.discount || 0) }}</view>
|
||||
</view>
|
||||
<view class="info-row total">
|
||||
<view>应付总额</view>
|
||||
<view class="pay">¥{{ formatPrice(order.orderPrice || order.payPrice || order.amount || 0) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {orderInfoReq} from "@/api/goods";
|
||||
import AppNavbar from "@/components/AppNavbar.vue";
|
||||
|
||||
export default {
|
||||
components: {AppNavbar},
|
||||
data() {
|
||||
return {
|
||||
order: {},
|
||||
items: [],
|
||||
receiver: {
|
||||
name: '',
|
||||
phone: '',
|
||||
address: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
async onLoad(options) {
|
||||
const id = options.id
|
||||
if (id) {
|
||||
await this.fetchOrder(id)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async fetchOrder(id) {
|
||||
try {
|
||||
const {data} = await orderInfoReq(id)
|
||||
this.order = data || {}
|
||||
this.items = this.order.goodsList || this.order.items || this.order.orderItems || []
|
||||
this.receiver = this.getReceiverInfo(this.order)
|
||||
} catch (err) {
|
||||
uni.showToast({
|
||||
title: '订单加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
getReceiverInfo(order) {
|
||||
const address = order.address || order.receiverAddress || order.shippingAddress || {}
|
||||
const name = order.receiverName || order.name || address.name || ''
|
||||
const phone = order.receiverPhone || order.phone || address.phone || ''
|
||||
const fullAddress = order.full_address || order.fullAddress || address.full_address || address.fullAddress || ''
|
||||
const mergedAddress = fullAddress || `${address.province || ''}${address.city || ''}${address.region || ''}${address.address || ''}`
|
||||
return {
|
||||
name,
|
||||
phone,
|
||||
address: mergedAddress || '暂无地址'
|
||||
}
|
||||
},
|
||||
getOrderNo(order) {
|
||||
return order.orderNo || order.order_no || order.no || order.id || ''
|
||||
},
|
||||
statusLabel(status) {
|
||||
if (status === 0 || status === 'pending') return '待支付'
|
||||
if (status === 1 || status === 'paid') return '待发货'
|
||||
if (status === 2 || status === 'shipped') return '已发货'
|
||||
if (status === 3 || status === 'completed') return '已完成'
|
||||
if (status === 4 || status === 'canceled') return '已取消'
|
||||
return status || '状态未知'
|
||||
},
|
||||
formatPrice(value) {
|
||||
const num = Number(value || 0)
|
||||
return num.toFixed(2)
|
||||
},
|
||||
maskPhone(phone) {
|
||||
const value = String(phone || '')
|
||||
if (value.length < 7) return value
|
||||
return `${value.slice(0, 3)}****${value.slice(-4)}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.order-detail-page {
|
||||
min-height: 100vh;
|
||||
//padding: 0 20rpx 40rpx;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.page-hero {
|
||||
//padding: 0 6rpx 18rpx;
|
||||
background: url('https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/462bfa04cf0eff8698884c38b9d17519.png') no-repeat
|
||||
top center / 100% auto;
|
||||
}
|
||||
|
||||
.page-navbar {
|
||||
padding: 0 6rpx;
|
||||
}
|
||||
|
||||
.intro-card {
|
||||
margin-top: 18rpx;
|
||||
padding: 20rpx 18rpx;
|
||||
border-radius: 20rpx;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
width: 6rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #2fc6a7;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
margin-top: 12rpx;
|
||||
font-size: 26rpx;
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin: 18rpx;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10rpx 0;
|
||||
border-bottom: 1rpx solid #edf1f7;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.info-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.status {
|
||||
color: var(--brand-primary);
|
||||
}
|
||||
|
||||
.total {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pay {
|
||||
color: #ff3b30;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.addr-name {
|
||||
font-weight: 700;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.addr-detail {
|
||||
margin-top: 6rpx;
|
||||
color: var(--text-sub);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
color: var(--text-main);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-meta {
|
||||
color: var(--text-sub);
|
||||
margin: 0 12rpx;
|
||||
}
|
||||
|
||||
.item-price {
|
||||
color: #ff3b30;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: var(--text-sub);
|
||||
text-align: center;
|
||||
padding: 16rpx 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<view class="order-list-page">
|
||||
<view class="page-hero">
|
||||
<AppNavbar title="订单列表" show-back/>
|
||||
</view>
|
||||
|
||||
<view class="card block">
|
||||
<view v-if="loading" class="empty">加载中...</view>
|
||||
<view v-else-if="orders.length === 0" class="empty">暂无订单</view>
|
||||
<view v-else class="order-list">
|
||||
<view class="order-card" v-for="order in orders" :key="order.orderId">
|
||||
<view class="order-head">
|
||||
<view class="order-no">订单号：{{ getOrderNo(order) }}</view>
|
||||
<view class="order-status">{{ statusLabel(order.orderStatus) }}</view>
|
||||
</view>
|
||||
<view v-if="order.createTime || order.createdAt" class="order-time">
|
||||
下单时间：{{ order.createTime || order.createdAt }}
|
||||
</view>
|
||||
<view class="order-items">
|
||||
<view class="order-item" v-for="(item, idx) in getOrderItems(order)" :key="idx">
|
||||
<view class="item-name">{{ item.goodsName || item.name || item.title }}</view>
|
||||
<view class="item-meta">x {{ item.num || item.qty || 1 }}</view>
|
||||
<view class="item-price">¥{{ formatPrice(item.salePrice || item.price || item.amount || 0) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-footer">
|
||||
<view class="order-total">合计：¥{{ formatPrice(order.totalAmount || order.amount || order.totalPrice || 0) }}</view>
|
||||
<view class="ghost-btn" @tap="goDetail(order)">查看详情</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {orderListReq} from "@/api/goods";
|
||||
import AppNavbar from "@/components/AppNavbar.vue";
|
||||
|
||||
export default {
|
||||
components: {AppNavbar},
|
||||
data() {
|
||||
return {
|
||||
orders: [],
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.fetchOrders()
|
||||
},
|
||||
methods: {
|
||||
async fetchOrders() {
|
||||
this.loading = true
|
||||
try {
|
||||
const {data} = await orderListReq()
|
||||
this.orders = Array.isArray(data) ? data : (data && data.list ? data.list : [])
|
||||
} catch (err) {
|
||||
uni.showToast({
|
||||
title: '订单加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
getOrderItems(order) {
|
||||
return order.goodsList || order.items || order.orderItems || []
|
||||
},
|
||||
getOrderNo(order) {
|
||||
return order.orderNo || order.order_no || order.no || order.id || ''
|
||||
},
|
||||
statusLabel(status) {
|
||||
if (status === 1) return '待支付'
|
||||
if (status === 2) return '待发货'
|
||||
if (status === 3 ) return '已发货'
|
||||
if (status === 4 ) return '已完成'
|
||||
if (status === 5 ) return '退款中'
|
||||
if (status === 6 ) return '退款成功'
|
||||
if (status === 7 ) return '退款失败'
|
||||
if (status === 0 ) return '已取消'
|
||||
return status || '状态未知'
|
||||
},
|
||||
formatPrice(value) {
|
||||
const num = Number(value || 0)
|
||||
return num.toFixed(2)
|
||||
},
|
||||
goDetail(order) {
|
||||
console.log(order.orderId)
|
||||
uni.navigateTo({
|
||||
url: `/pages/order/detail?id=${order.orderId}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.order-list-page {
|
||||
min-height: 100vh;
|
||||
//padding: 0 20rpx 40rpx;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.page-hero {
|
||||
//padding: 30rpx 6rpx 18rpx;
|
||||
background: url('https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/462bfa04cf0eff8698884c38b9d17519.png') no-repeat
|
||||
top center / 100% auto;
|
||||
}
|
||||
|
||||
.page-navbar {
|
||||
padding: 0 6rpx;
|
||||
}
|
||||
|
||||
.intro-card {
|
||||
margin: 18rpx 20rpx 0;
|
||||
padding: 20rpx 18rpx;
|
||||
border-radius: 20rpx;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
width: 6rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #2fc6a7;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
margin-top: 12rpx;
|
||||
font-size: 26rpx;
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin: 18rpx 20rpx 0;
|
||||
}
|
||||
|
||||
.order-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14rpx;
|
||||
}
|
||||
|
||||
.order-card {
|
||||
border: 1rpx solid #e7eef8;
|
||||
border-radius: 16rpx;
|
||||
padding: 16rpx;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.order-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.order-no {
|
||||
color: var(--text-main);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.order-status {
|
||||
color: var(--brand-primary);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.order-time {
|
||||
margin-top: 6rpx;
|
||||
color: var(--text-sub);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.order-items {
|
||||
margin-top: 12rpx;
|
||||
border-top: 1rpx dashed #e7eef8;
|
||||
padding-top: 12rpx;
|
||||
}
|
||||
|
||||
.order-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.order-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
color: var(--text-main);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-meta {
|
||||
color: var(--text-sub);
|
||||
margin: 0 12rpx;
|
||||
}
|
||||
|
||||
.item-price {
|
||||
color: #ff3b30;
|
||||
}
|
||||
|
||||
.order-footer {
|
||||
margin-top: 12rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.order-total {
|
||||
color: var(--text-main);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ghost-btn {
|
||||
color: var(--brand-primary);
|
||||
border: 1rpx solid var(--brand-primary);
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: var(--text-sub);
|
||||
text-align: center;
|
||||
padding: 16rpx 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,996 @@
|
||||
<template>
|
||||
<view class="performance-page">
|
||||
<view class="perf-hero">
|
||||
<AppNavbar title="业绩统计"/>
|
||||
<view class="stats-card">
|
||||
<view class="flex justify-between items-center w-100p">
|
||||
<view class="stat-item">
|
||||
<view class="stat-value">{{ stats.doneNum }}/{{ stats.taskNum }}</view>
|
||||
<view class="stat-label">我的完成进度</view>
|
||||
</view>
|
||||
<!-- <view class="stat-item" @click="toBonus">-->
|
||||
<!-- <view class="stat-value">{{ stats.income }}元</view>-->
|
||||
<!-- <view class="stat-label">我的活动奖励</view>-->
|
||||
<!-- </view>-->
|
||||
<view class="stat-item">
|
||||
<view class="stat-value">{{ stats.doneRate }}%</view>
|
||||
<view class="stat-label">我的完成率</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex justify-between items-center w-100p pt-20 border-top" v-if="isLoggedIn && user.canAuth === 1">
|
||||
<view class="stat-item">
|
||||
<view class="stat-value text-main">{{ stats.totalDoneNum }}/{{ stats.totalTaskNum }}</view>
|
||||
<view class="stat-label">总完成进度</view>
|
||||
</view>
|
||||
<!-- <view class="stat-item" @click="toBonus">-->
|
||||
<!-- <view class="stat-value text-main">{{ stats.totalIncome }}元</view>-->
|
||||
<!-- <view class="stat-label">总活动奖励</view>-->
|
||||
<!-- </view>-->
|
||||
<view class="stat-item">
|
||||
<view class="stat-value text-main">{{ stats.totalDoneRate }}%</view>
|
||||
<view class="stat-label">总完成率</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section-head">
|
||||
<view class="head-left" @tap="openAreaPicker">
|
||||
<u-icon name="map" size="26" color="#27c7a4"/>
|
||||
<text>{{ currentCity }}</text>
|
||||
</view>
|
||||
<view class="head-center">
|
||||
<image class="head-icon" mode="heightFix"
|
||||
src="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/6a639dcbe30e9c503d50f391272a066a.png"
|
||||
alt=""/>
|
||||
<!-- <text class="head-dot">✦</text>-->
|
||||
<!-- <text class="section-title">任务完成详情</text>-->
|
||||
</view>
|
||||
<view class="section-more"></view>
|
||||
</view>
|
||||
|
||||
<view class="filter-chips">
|
||||
<view class="filter-chip" @tap="openMerchantPicker">{{ merchantLabel }}</view>
|
||||
<view class="filter-chip" @tap="openManufacturerPicker">{{ manufacturerLabel }}</view>
|
||||
</view>
|
||||
|
||||
<view class="task-list">
|
||||
<template v-if="details.length">
|
||||
<view class="task-card" v-for="(item, index) in visibleDetails" :key="index" @tap="showDetails(item)">
|
||||
<view class="task-top">
|
||||
<text class="task-label">匹配门店：</text>
|
||||
<text class="task-value">{{ item.merchant.name || '-' }}</text>
|
||||
</view>
|
||||
<view class="task-divider"></view>
|
||||
<view class="task-row">
|
||||
<text class="task-label">任务名称：</text>
|
||||
<text class="task-value">{{ item.title }}</text>
|
||||
</view>
|
||||
<view class="task-row">
|
||||
<text class="task-label">当前状态：</text>
|
||||
<text :class="['task-status', taskStatusClass(item)]">{{ resolveTaskStatusLabel(item) }}</text>
|
||||
</view>
|
||||
<view class="task-row task-row-space">
|
||||
<text class="task-time">任务时间：{{ item.date || '-' }}</text>
|
||||
<view class="task-distance">
|
||||
<u-icon name="map" size="24" color="#ff9f43"/>
|
||||
<text>距离{{ item.distance || '100米' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="task-progress">
|
||||
<view class="progress-line">
|
||||
<view class="progress-fill"
|
||||
:style="{ width: `${item.num ? (item.doneNum / item.num) * 100 : 0}%` }"></view>
|
||||
</view>
|
||||
<view class="progress-right">
|
||||
<u-icon name="close-circle" color="#2fc6a7" size="30rpx"/>
|
||||
<!-- <view class="progress-icon">×</view>-->
|
||||
<view class="progress-count">{{ item.doneNum }}/{{ item.num }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="showMoreTaskBtn" class="task-more-btn" @tap="expandTaskList">查看更多</view>
|
||||
</template>
|
||||
<u-empty v-else
|
||||
icon="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/ddcc1bbd561d97128ed19407b07e299b.png"
|
||||
text="暂无数据"/>
|
||||
</view>
|
||||
|
||||
<view class="person-section">
|
||||
<view class="section-banner">
|
||||
<view class="banner-center">
|
||||
<!-- <text class="head-dot">✦</text>-->
|
||||
<!-- <text class="section-title section-title-light">按人员筛选</text>-->
|
||||
<image class="head-icon" mode="aspectFit"
|
||||
src="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/10fe8406037bab94adf5045216feb74a.png"
|
||||
alt=""/>
|
||||
</view>
|
||||
<view class="section-more section-more-light"></view>
|
||||
</view>
|
||||
<!-- <view class="person-search">-->
|
||||
<!-- <u-icon name="search" size="26" color="#9ca3af"/>-->
|
||||
<!-- <input type="text" placeholder="输入姓名搜索" v-model="personKeyword"/>-->
|
||||
<!-- <view class="search-btn" @tap="searchPerson">搜索</view>-->
|
||||
<!-- </view>-->
|
||||
<view class="p-20">
|
||||
<u-search showAction animation v-model="personKeyword" bgColor="white"
|
||||
searchIcon="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/16f54dd102cacccfb5085533009b70fc.png"/>
|
||||
</view>
|
||||
<view class="person-list">
|
||||
<template v-if="filteredPersons.length">
|
||||
<view class="person-item" v-for="(person, idx) in filteredPersons" :key="idx">
|
||||
<view class="person-left">
|
||||
<u-icon v-if="idx === 0"
|
||||
name="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/99b7a70575473d52e38c765a8635428c.png"
|
||||
size="50rpx"/>
|
||||
<u-icon v-else-if="idx === 1"
|
||||
name="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/3a984885c03dbd31f1bd998f98c41493.png"
|
||||
size="50rpx"/>
|
||||
<u-icon v-else-if="idx === 2"
|
||||
name="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/722383e4ed2ba2e98cd04ce3ee5c4b8f.png"
|
||||
size="50rpx"/>
|
||||
<text v-else class="person-index">{{ idx + 1 }}</text>
|
||||
<text class="person-name">{{ person.nickname || person.name || '-' }}</text>
|
||||
</view>
|
||||
<!-- <view class="person-right">奖励 ¥{{ person.incomeAmount }} 完成 {{-->
|
||||
<!-- person.taskCompleteNum-->
|
||||
<!-- }}/{{ person.totalTaskNum }}-->
|
||||
<!-- </view>-->
|
||||
</view>
|
||||
</template>
|
||||
<u-empty v-else
|
||||
icon="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/ddcc1bbd561d97128ed19407b07e299b.png"
|
||||
text="暂无数据"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<Login ref="Login" @done="getUserData"/>
|
||||
<AreaPicker
|
||||
:show="showAreaPicker"
|
||||
:default-province="currentProvince"
|
||||
:default-city="currentCity"
|
||||
@close="showAreaPicker = false"
|
||||
@confirm="onAreaConfirm"
|
||||
/>
|
||||
<u-popup :show="showMerchantPicker" mode="bottom" round="24rpx" @close="closeMerchantPicker">
|
||||
<view class="merchant-picker">
|
||||
<view class="merchant-picker-head">
|
||||
<view class="picker-action" @tap="closeMerchantPicker">取消</view>
|
||||
<text class="picker-title">药店筛选</text>
|
||||
<view class="picker-action primary" @tap="confirmMerchantPicker">确定</view>
|
||||
</view>
|
||||
<view class="merchant-picker-search">
|
||||
<u-search
|
||||
v-model="merchantSearchKeyword"
|
||||
bgColor="white"
|
||||
showAction
|
||||
animation
|
||||
actionText="搜索"
|
||||
searchIcon="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/16f54dd102cacccfb5085533009b70fc.png"
|
||||
/>
|
||||
</view>
|
||||
<view v-if="merchantLoading" class="merchant-picker-loading">
|
||||
<u-loading-icon mode="circle"></u-loading-icon>
|
||||
</view>
|
||||
<picker-view
|
||||
v-else
|
||||
class="merchant-picker-view"
|
||||
:value="merchantPickerValue"
|
||||
:indicator-style="merchantIndicatorStyle"
|
||||
@change="onMerchantPickerChange"
|
||||
>
|
||||
<picker-view-column>
|
||||
<view
|
||||
v-for="(item, idx) in merchantFilteredOptions"
|
||||
:key="idx"
|
||||
class="merchant-picker-item"
|
||||
>{{ item.text }}
|
||||
</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<u-popup :show="showManufacturerPicker" mode="bottom" round="24rpx" @close="closeManufacturerPicker">
|
||||
<view class="merchant-picker">
|
||||
<view class="merchant-picker-head">
|
||||
<view class="picker-action" @tap="closeManufacturerPicker">取消</view>
|
||||
<text class="picker-title">厂家筛选</text>
|
||||
<view class="picker-action primary" @tap="confirmManufacturerPicker">确定</view>
|
||||
</view>
|
||||
<view v-if="manufacturerLoading" class="merchant-picker-loading">
|
||||
<u-loading-icon mode="circle"></u-loading-icon>
|
||||
</view>
|
||||
<picker-view
|
||||
v-else
|
||||
class="merchant-picker-view"
|
||||
:value="manufacturerPickerValue"
|
||||
:indicator-style="merchantIndicatorStyle"
|
||||
@change="onManufacturerPickerChange"
|
||||
>
|
||||
<picker-view-column>
|
||||
<view
|
||||
v-for="(item, idx) in manufacturerOptions"
|
||||
:key="idx"
|
||||
class="merchant-picker-item"
|
||||
>{{ item.text }}
|
||||
</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {taskDataReq, taskListForDataReq, taskUserRankReq} from "@/api/task";
|
||||
import AppNavbar from "@/components/AppNavbar.vue";
|
||||
import {calcDistanceMeters, formatDistance, getLocationAction} from "@/util";
|
||||
import AreaPicker from "@/components/AreaPicker.vue";
|
||||
import Login from "@/components/Login.vue";
|
||||
import {userInfoReq} from "@/api/user";
|
||||
import {getUserInfo} from "@/util/user";
|
||||
import {merchantListReq} from "@/api/shop";
|
||||
import {productGroupReq} from "@/api/product";
|
||||
|
||||
export default {
|
||||
components: {Login, AppNavbar, AreaPicker},
|
||||
data() {
|
||||
return {
|
||||
customerOptions: ['全部客户', '大参林', '老百姓', '海王星辰'],
|
||||
industryOptions: ['自身产品', '大参林联营', '老百姓联营'],
|
||||
roleOptions: ['管理员视角', '店长视角', '本人视角'],
|
||||
customerIndex: 0,
|
||||
industryIndex: 0,
|
||||
roleIndex: 0,
|
||||
stats: {
|
||||
taskNum: 0,
|
||||
doneNum: 0,
|
||||
income: 0,
|
||||
doneRate: 0,
|
||||
totalDoneNum: 0,
|
||||
totalTaskNum: 0,
|
||||
totalIncome: 0,
|
||||
totalDoneRate: 0,
|
||||
},
|
||||
details: [],
|
||||
taskDisplayLimit: 10,
|
||||
taskListExpanded: false,
|
||||
lat: null,
|
||||
lng: null,
|
||||
currentCity: '定位中',
|
||||
currentProvince: '',
|
||||
showAreaPicker: false,
|
||||
isLoggedIn: false,
|
||||
personKeyword: '',
|
||||
persons: [],
|
||||
showMerchantPicker: false,
|
||||
merchantLoading: false,
|
||||
merchantOptions: [
|
||||
{id: '', text: '全部门店'}
|
||||
],
|
||||
merchantId: '',
|
||||
merchantText: '药店筛选',
|
||||
merchantSearchKeyword: '',
|
||||
merchantPickerValue: [0],
|
||||
showManufacturerPicker: false,
|
||||
manufacturerLoading: false,
|
||||
manufacturerOptions: [
|
||||
{markAbb: '', text: '全部厂家'}
|
||||
],
|
||||
manufacturerMarkAbb: '',
|
||||
manufacturerText: '厂家筛选',
|
||||
manufacturerPickerValue: [0],
|
||||
user: {
|
||||
canAuth: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filteredPersons() {
|
||||
const kw = this.personKeyword.trim()
|
||||
const list = Array.isArray(this.persons) ? this.persons : []
|
||||
const filtered = kw ? list.filter(p => (p.nickname || '').includes(kw)) : list
|
||||
return filtered.slice().sort((a, b) => {
|
||||
const aAmount = Number(a.incomeAmount) || 0
|
||||
const bAmount = Number(b.incomeAmount) || 0
|
||||
return bAmount - aAmount
|
||||
})
|
||||
},
|
||||
merchantLabel() {
|
||||
return this.merchantText || '药店筛选'
|
||||
},
|
||||
manufacturerLabel() {
|
||||
return this.manufacturerText || '厂家筛选'
|
||||
},
|
||||
merchantFilteredOptions() {
|
||||
const kw = this.merchantSearchKeyword.trim()
|
||||
const list = Array.isArray(this.merchantOptions) ? this.merchantOptions : []
|
||||
const filtered = kw ? list.filter(item => (item.text || '').includes(kw)) : list
|
||||
return filtered.length ? filtered : [{id: '', text: '无匹配门店'}]
|
||||
},
|
||||
merchantIndicatorStyle() {
|
||||
return 'height: 44px;'
|
||||
},
|
||||
visibleDetails() {
|
||||
const list = Array.isArray(this.details) ? this.details : []
|
||||
if (this.taskListExpanded) return list
|
||||
return list.slice(0, this.taskDisplayLimit)
|
||||
},
|
||||
showMoreTaskBtn() {
|
||||
const list = Array.isArray(this.details) ? this.details : []
|
||||
return !this.taskListExpanded && list.length > this.taskDisplayLimit
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
merchantSearchKeyword() {
|
||||
this.merchantPickerValue = [0]
|
||||
}
|
||||
},
|
||||
async onShow() {
|
||||
await this.refreshPageData()
|
||||
},
|
||||
async onPullDownRefresh() {
|
||||
try {
|
||||
await this.refreshPageData()
|
||||
} finally {
|
||||
uni.stopPullDownRefresh()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async refreshPageData() {
|
||||
await this.getLocation()
|
||||
await this.getTaskList()
|
||||
await this.getUserRank()
|
||||
if (getUserInfo().token) await this.getUserData()
|
||||
},
|
||||
async getUserData() {
|
||||
const {data} = await userInfoReq()
|
||||
this.isLoggedIn = true
|
||||
this.user = data
|
||||
await this.getTaskData()
|
||||
},
|
||||
async getLocation() {
|
||||
const res = await getLocationAction().catch(() => {
|
||||
uni.showToast({
|
||||
title: '请允许位置授权',
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
if (res) {
|
||||
this.lat = Number(res.latitude)
|
||||
this.lng = Number(res.longitude)
|
||||
this.currentCity = res.city_str || this.currentCity
|
||||
this.currentProvince = res.province_str || this.currentProvince
|
||||
this.updateTaskDistances()
|
||||
}
|
||||
},
|
||||
async getTaskData() {
|
||||
const {data} = await taskDataReq()
|
||||
this.stats = data
|
||||
},
|
||||
async getTaskList() {
|
||||
const params = {
|
||||
province: this.currentProvince,
|
||||
city: this.currentCity,
|
||||
}
|
||||
if (this.merchantId !== '' && this.merchantId !== null && this.merchantId !== undefined) {
|
||||
params.merchantId = this.merchantId
|
||||
}
|
||||
if (this.manufacturerMarkAbb) {
|
||||
params.markAbb = this.manufacturerMarkAbb
|
||||
}
|
||||
const {data} = await taskListForDataReq(params)
|
||||
this.details = data
|
||||
this.taskListExpanded = false
|
||||
this.updateTaskDistances()
|
||||
},
|
||||
expandTaskList() {
|
||||
this.taskListExpanded = true
|
||||
},
|
||||
async getUserRank() {
|
||||
const {data} = await taskUserRankReq()
|
||||
this.persons = data
|
||||
},
|
||||
changeCustomer(e) {
|
||||
this.customerIndex = Number(e.detail.value)
|
||||
},
|
||||
changeIndustry(e) {
|
||||
this.industryIndex = Number(e.detail.value)
|
||||
},
|
||||
changeRole(e) {
|
||||
this.roleIndex = Number(e.detail.value)
|
||||
},
|
||||
openAreaPicker() {
|
||||
this.showAreaPicker = true
|
||||
},
|
||||
onAreaConfirm({provinceName, cityName}) {
|
||||
this.currentProvince = provinceName
|
||||
this.currentCity = cityName
|
||||
this.showAreaPicker = false
|
||||
this.getTaskList()
|
||||
},
|
||||
async getMerchantList() {
|
||||
this.merchantLoading = true
|
||||
try {
|
||||
const params = {}
|
||||
if (this.currentProvince) params.province = this.currentProvince
|
||||
if (this.currentCity && this.currentCity !== '定位中') params.city = this.currentCity
|
||||
const {data} = await merchantListReq(params)
|
||||
const list = Array.isArray(data)
|
||||
? data
|
||||
: (Array.isArray(data && data.records) ? data.records : (Array.isArray(data && data.list) ? data.list : []))
|
||||
const options = list.map(item => ({
|
||||
id: item.id ?? item.merchantId ?? item.merchant_id,
|
||||
text: item.name || item.merchantName || item.merchant_name || item.title || '未命名门店'
|
||||
})).filter(item => item.id !== undefined && item.id !== null)
|
||||
this.merchantOptions = [{id: '', text: '全部门店'}].concat(options)
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: '门店列表获取失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.merchantLoading = false
|
||||
}
|
||||
},
|
||||
async openMerchantPicker() {
|
||||
// if (!this.merchantOptions || this.merchantOptions.length <= 1) {
|
||||
await this.getMerchantList()
|
||||
// }
|
||||
this.merchantSearchKeyword = ''
|
||||
const idx = this.merchantOptions.findIndex(item => item.id === this.merchantId)
|
||||
this.merchantPickerValue = [idx > -1 ? idx : 0]
|
||||
this.showMerchantPicker = true
|
||||
},
|
||||
closeMerchantPicker() {
|
||||
this.showMerchantPicker = false
|
||||
},
|
||||
onMerchantPickerChange(e) {
|
||||
const value = Array.isArray(e.detail && e.detail.value) ? e.detail.value : [0]
|
||||
this.merchantPickerValue = value
|
||||
},
|
||||
confirmMerchantPicker() {
|
||||
const selected = this.merchantFilteredOptions[this.merchantPickerValue[0]] || null
|
||||
if (selected) {
|
||||
this.merchantId = selected.id ?? ''
|
||||
this.merchantText = selected.text || '药店筛选'
|
||||
} else {
|
||||
this.merchantId = ''
|
||||
this.merchantText = '药店筛选'
|
||||
}
|
||||
this.showMerchantPicker = false
|
||||
this.getTaskList()
|
||||
},
|
||||
async getManufacturerList() {
|
||||
this.manufacturerLoading = true
|
||||
try {
|
||||
const {data} = await productGroupReq()
|
||||
console.log(data)
|
||||
const options = data.map(item => ({
|
||||
makerAbb: item.makerAbb,
|
||||
text: item.makerAbb || ''
|
||||
})).filter(item => item.text)
|
||||
console.log(options)
|
||||
this.manufacturerOptions = [{makerAbb: '', text: '全部厂家'}].concat(options)
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: '厂家列表获取失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.manufacturerLoading = false
|
||||
}
|
||||
},
|
||||
async openManufacturerPicker() {
|
||||
if (!this.manufacturerOptions || this.manufacturerOptions.length <= 1) {
|
||||
await this.getManufacturerList()
|
||||
}
|
||||
const idx = this.manufacturerOptions.findIndex(item => item.markAbb === this.manufacturerMarkAbb)
|
||||
this.manufacturerPickerValue = [idx > -1 ? idx : 0]
|
||||
this.showManufacturerPicker = true
|
||||
},
|
||||
closeManufacturerPicker() {
|
||||
this.showManufacturerPicker = false
|
||||
},
|
||||
onManufacturerPickerChange(e) {
|
||||
const value = Array.isArray(e.detail && e.detail.value) ? e.detail.value : [0]
|
||||
this.manufacturerPickerValue = value
|
||||
},
|
||||
confirmManufacturerPicker() {
|
||||
const selected = this.manufacturerOptions[this.manufacturerPickerValue[0]] || null
|
||||
if (selected) {
|
||||
this.manufacturerMarkAbb = selected.markAbb ?? ''
|
||||
this.manufacturerText = selected.text || '厂家筛选'
|
||||
} else {
|
||||
this.manufacturerMarkAbb = ''
|
||||
this.manufacturerText = '厂家筛选'
|
||||
}
|
||||
this.showManufacturerPicker = false
|
||||
this.getTaskList()
|
||||
},
|
||||
updateTaskDistances() {
|
||||
if (!Number.isFinite(this.lat) || !Number.isFinite(this.lng)) return
|
||||
this.details = this.details.map(item => {
|
||||
const merchant = item.merchant || {}
|
||||
const lat = Number(merchant.lat || merchant.latitude || item.lat || item.latitude)
|
||||
const lng = Number(merchant.lng || merchant.longitude || item.lng || item.longitude)
|
||||
if (!Number.isFinite(lat) || !Number.isFinite(lng)) return item
|
||||
const meters = calcDistanceMeters(this.lat, this.lng, lat, lng)
|
||||
return Object.assign({}, item, {
|
||||
distance: formatDistance(meters)
|
||||
})
|
||||
})
|
||||
},
|
||||
pickFirstTaskText(values = []) {
|
||||
for (let i = 0; i < values.length; i++) {
|
||||
const value = values[i]
|
||||
if (value === undefined || value === null) continue
|
||||
const text = String(value).trim()
|
||||
if (text) return text
|
||||
}
|
||||
return ''
|
||||
},
|
||||
pickFirstTaskNumber(values = []) {
|
||||
for (let i = 0; i < values.length; i++) {
|
||||
const raw = values[i]
|
||||
if (raw === '' || raw === undefined || raw === null) continue
|
||||
const num = Number(raw)
|
||||
if (Number.isFinite(num)) return num
|
||||
}
|
||||
return null
|
||||
},
|
||||
resolveTaskStatusLabel(item = {}) {
|
||||
const userTask = item.userTask || {}
|
||||
const textLabel = this.pickFirstTaskText([
|
||||
item.statusText,
|
||||
item.taskStatusText,
|
||||
item.stateText,
|
||||
item.statusName,
|
||||
item.taskStatusName,
|
||||
userTask.statusText
|
||||
])
|
||||
if (textLabel) return textLabel
|
||||
|
||||
const userStatus = this.pickFirstTaskNumber([item.userTaskStatus, userTask.status, item.auditStatus])
|
||||
if (userStatus !== null) {
|
||||
if (userStatus === 2) return '已完成'
|
||||
if (userStatus === 1) return '审核中'
|
||||
if (userStatus === 3) return '审核驳回'
|
||||
if (userStatus === 0) return '待提交'
|
||||
}
|
||||
|
||||
const taskStatus = this.pickFirstTaskNumber([item.taskStatus, item.status, item.state])
|
||||
if (taskStatus !== null) {
|
||||
if (taskStatus === 2) return '已完成'
|
||||
if (taskStatus === 1) return '进行中'
|
||||
if (taskStatus === 0) return '未开始'
|
||||
}
|
||||
|
||||
const doneNum = Number(item.doneNum) || 0
|
||||
const totalNum = Number(item.num) || 0
|
||||
if (totalNum > 0 && doneNum >= totalNum) return '已完成'
|
||||
if (doneNum > 0) return '进行中'
|
||||
return '未开始'
|
||||
},
|
||||
taskStatusClass(item = {}) {
|
||||
const label = this.resolveTaskStatusLabel(item)
|
||||
if (label.includes('驳回') || label.includes('失败')) return 'task-status-danger'
|
||||
if (label.includes('完成') || label.includes('通过')) return 'task-status-success'
|
||||
if (label.includes('审核中') || label.includes('进行') || label.includes('待')) return 'task-status-pending'
|
||||
return 'task-status-default'
|
||||
},
|
||||
searchPerson() {
|
||||
if (!this.personKeyword.trim()) {
|
||||
uni.showToast({
|
||||
title: '请输入姓名',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
showDetails(task) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/task/detail?title=${encodeURIComponent(task.merchant.name)}&reward=${task.reward}&target=${task.cate.title}&id=${task.id}`
|
||||
})
|
||||
},
|
||||
toBonus() {
|
||||
if (!this.isLoggedIn) {
|
||||
return this.$refs.Login.open()
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/pages/bonus/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.performance-page {
|
||||
min-height: 100vh;
|
||||
padding: 0 0 40rpx;
|
||||
background: #e9fbf6;
|
||||
}
|
||||
|
||||
.perf-hero {
|
||||
padding: 0 0 20rpx;
|
||||
background: url('https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/462bfa04cf0eff8698884c38b9d17519.png') no-repeat top center / 100% auto;
|
||||
}
|
||||
|
||||
.perf-navbar {
|
||||
padding: 0 6rpx;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
margin: 0 20rpx 0;
|
||||
padding: 18rpx 18rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
border: 1rpx solid #2fc6a7;
|
||||
border-top: 20rpx solid #2fc6a7;
|
||||
//display: grid;
|
||||
//grid-template-columns: repeat(3, 1fr);
|
||||
//gap: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #ff3b30;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
margin-top: 6rpx;
|
||||
font-size: 22rpx;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.section-head {
|
||||
margin: 14rpx 20rpx 0 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 6rpx;
|
||||
}
|
||||
|
||||
.head-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
font-size: 24rpx;
|
||||
color: #2fc6a7;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.head-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
color: #2fc6a7;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.head-dot {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #2fc6a7;
|
||||
}
|
||||
|
||||
.section-more {
|
||||
font-size: 22rpx;
|
||||
color: #6b7280;
|
||||
width: 50rpx;
|
||||
}
|
||||
|
||||
.filter-chips {
|
||||
margin: 12rpx 20rpx 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.filter-chip {
|
||||
padding: 6rpx 14rpx;
|
||||
border-radius: 999rpx;
|
||||
border: 1rpx solid #2fc6a7;
|
||||
color: #2fc6a7;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.task-list {
|
||||
margin: 12rpx 20rpx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14rpx;
|
||||
}
|
||||
|
||||
.task-more-btn {
|
||||
margin: 6rpx auto 0;
|
||||
padding: 10rpx 30rpx;
|
||||
border-radius: 999rpx;
|
||||
border: 1rpx solid #2fc6a7;
|
||||
color: #2fc6a7;
|
||||
font-size: 24rpx;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.task-card {
|
||||
background: #ffffff;
|
||||
border-radius: 18rpx;
|
||||
padding: 14rpx 16rpx;
|
||||
border: 1rpx solid #2fc6a7;
|
||||
box-shadow: 0 8rpx 16rpx rgba(39, 199, 164, 0.12);
|
||||
}
|
||||
|
||||
.task-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
font-size: 24rpx;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.task-label {
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.task-divider {
|
||||
height: 1rpx;
|
||||
background: #d7f4eb;
|
||||
margin: 10rpx 0;
|
||||
}
|
||||
|
||||
.task-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
font-size: 24rpx;
|
||||
color: #374151;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.task-row-space {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.task-time {
|
||||
color: #6b7280;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.task-distance {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4rpx;
|
||||
font-size: 22rpx;
|
||||
color: #ff8a00;
|
||||
}
|
||||
|
||||
.task-status {
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.task-status-default {
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.task-status-pending {
|
||||
color: #ff9f43;
|
||||
}
|
||||
|
||||
.task-status-success {
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.task-status-danger {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.task-progress {
|
||||
margin-top: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.progress-line {
|
||||
flex: 1;
|
||||
height: 6rpx;
|
||||
background: #e5f7f1;
|
||||
border-radius: 999rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: #37c977;
|
||||
}
|
||||
|
||||
.progress-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
font-size: 22rpx;
|
||||
color: #2fc6a7;
|
||||
}
|
||||
|
||||
.progress-icon {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
border-radius: 50%;
|
||||
border: 1rpx solid #2fc6a7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.person-section {
|
||||
margin-top: 18rpx;
|
||||
overflow: hidden;
|
||||
background-image: url("https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/09dd8e6519b44d71410fc82a7e255540.jpg");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.section-banner {
|
||||
padding: 12rpx 14rpx;
|
||||
//background: linear-gradient(135deg, #33d0b3, #22c3a1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.banner-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
}
|
||||
|
||||
.section-title-light {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.section-more-light {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.person-search {
|
||||
padding: 12rpx 14rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
background: #ffffff;
|
||||
border-bottom: 1rpx dashed #d7f4eb;
|
||||
}
|
||||
|
||||
.person-search input {
|
||||
flex: 1;
|
||||
font-size: 24rpx;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #2fc6a7;
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.person-list {
|
||||
padding: 10rpx;
|
||||
margin: 20rpx;
|
||||
background-color: white;
|
||||
border-radius: 10rpx;
|
||||
min-height: 200rpx;
|
||||
}
|
||||
|
||||
.person-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12rpx 0;
|
||||
border-bottom: 1rpx dashed #d7f4eb;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.person-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.person-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.person-index {
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
color: #2fc6a7;
|
||||
width: 36rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.person-name {
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.person-right {
|
||||
color: #ef4444;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.head-icon {
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.merchant-picker {
|
||||
background: #ffffff;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
padding-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.merchant-picker-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 18rpx 20rpx;
|
||||
border-bottom: 1rpx solid #eef2f7;
|
||||
}
|
||||
|
||||
.picker-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.picker-action {
|
||||
font-size: 24rpx;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.picker-action.primary {
|
||||
color: #2fc6a7;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.merchant-picker-search {
|
||||
padding: 12rpx 20rpx 0;
|
||||
}
|
||||
|
||||
.merchant-picker-loading {
|
||||
height: 320rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.merchant-picker-view {
|
||||
height: 360rpx;
|
||||
}
|
||||
|
||||
.merchant-picker-item {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #111827;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,289 @@
|
||||
<template>
|
||||
<view class="product-page">
|
||||
<view class="page-hero">
|
||||
<AppNavbar class="page-navbar" title="商品详情"/>
|
||||
</view>
|
||||
<view class="product-detail" v-if="product.goodsId">
|
||||
<view class="gallery card">
|
||||
<swiper class="swiper" circular autoplay indicator-dots indicator-color="#d8e6ff"
|
||||
indicator-active-color="#2563eb" v-if="product.files">
|
||||
<swiper-item v-for="(img, idx) in JSON.parse(product.files)" :key="idx">
|
||||
<image class="cover" :src="img.url" mode="aspectFill"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<!-- <view class="badge rating">评分 {{ product.rating }} / 5</view>-->
|
||||
</view>
|
||||
|
||||
<view class="card block">
|
||||
<view class="price-row">
|
||||
<view class="price">¥{{ product.salePrice }}</view>
|
||||
<view class="origin">¥{{ product.originPrice }}</view>
|
||||
<view class="coupon" @tap="openCoupon">领券</view>
|
||||
</view>
|
||||
<view class="name">{{ product.goodsName }}</view>
|
||||
<!-- <view class="sell-point">{{ // product.sellPoint }}</view>-->
|
||||
<!-- <view class="meta">规格：{{ product.specs }} · 厂家：{{ product.vendor }}</view>-->
|
||||
</view>
|
||||
|
||||
<!-- <view class="card block">-->
|
||||
<!-- <view class="section-title">商品规格</view>-->
|
||||
<!-- <view class="specs">-->
|
||||
<!-- <view class="chip" v-for="spec in product.specOptions" :key="spec" :class="{'active': spec === selectedSpec}"-->
|
||||
<!-- @tap="selectedSpec = spec">{{ spec }}-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
|
||||
<view class="card block">
|
||||
<view class="section-title">图文详情</view>
|
||||
<u-parse :content="product.content"/>
|
||||
</view>
|
||||
|
||||
<!-- <view class="card block">-->
|
||||
<!-- <view class="section-title">热卖推荐</view>-->
|
||||
<!-- <view class="recommend" v-for="item in recommends" :key="item.id" @tap="openRecommend(item)">-->
|
||||
<!-- <view class="rec-name">{{ item.name }}</view>-->
|
||||
<!-- <view class="rec-meta">{{ item.specs }} · ¥{{ item.price }}</view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
|
||||
<view class="action-bar">
|
||||
<u-icon name="share" label="分享" label-pos="bottom" size="40rpx"/>
|
||||
<view class="action-group">
|
||||
<view class="primary-btn" @tap="addCart">加入购物车</view>
|
||||
<view class="primary-btn buy" @tap="buyNow">立即购买</view>
|
||||
</view>
|
||||
</view>
|
||||
<Login ref="Login" @done="getUserData"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {goodsInfoReq} from "@/api/goods";
|
||||
import Login from "@/components/Login.vue";
|
||||
import {userInfoReq} from "@/api/user";
|
||||
import {getUserInfo} from "@/util/user";
|
||||
import {addCartReq} from "@/api/cart";
|
||||
import AppNavbar from "@/components/AppNavbar.vue";
|
||||
|
||||
export default {
|
||||
components: {Login, AppNavbar},
|
||||
data() {
|
||||
return {
|
||||
product: {},
|
||||
selectedSpec: '10袋/盒',
|
||||
recommends: [],
|
||||
isLoggedIn: false,
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.id) {
|
||||
this.id = options.id
|
||||
this.getInfo()
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
if (getUserInfo().token) {
|
||||
this.isLoggedIn = true
|
||||
this.getUserData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getUserData() {
|
||||
const {data} = await userInfoReq()
|
||||
this.isLoggedIn = true
|
||||
},
|
||||
async getInfo() {
|
||||
const {data} = await goodsInfoReq(this.id)
|
||||
this.product = data
|
||||
},
|
||||
openCoupon() {
|
||||
uni.navigateTo({
|
||||
url: '/packageUser/coupon/index'
|
||||
})
|
||||
},
|
||||
async addCart() {
|
||||
if (!this.isLoggedIn) return this.$refs.Login.open()
|
||||
await addCartReq({
|
||||
goodsId: this.product.goodsId,
|
||||
num: 1
|
||||
})
|
||||
uni.showToast({
|
||||
title: '已加入购物车',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
buyNow() {
|
||||
const goodsDataList = [{
|
||||
goodsId: this.product.goodsId,
|
||||
num: 1
|
||||
}]
|
||||
uni.navigateTo({
|
||||
url: `/pages/order/checkout?goodsDataList=${JSON.stringify(goodsDataList)}`
|
||||
})
|
||||
},
|
||||
openRecommend(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/detail?name=${encodeURIComponent(item.name)}&price=${item.price}&origin=${item.price}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.product-page {
|
||||
min-height: 100vh;
|
||||
padding: 0 20rpx 100rpx;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.page-hero {
|
||||
padding: 30rpx 6rpx 18rpx;
|
||||
background: url('https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/462bfa04cf0eff8698884c38b9d17519.png') no-repeat
|
||||
top center / 100% auto;
|
||||
}
|
||||
|
||||
.page-navbar {
|
||||
padding: 0 6rpx;
|
||||
}
|
||||
|
||||
.product-detail {
|
||||
padding: 0 6rpx 100rpx;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
height: 320rpx;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 100%;
|
||||
height: 320rpx;
|
||||
}
|
||||
|
||||
.rating {
|
||||
position: absolute;
|
||||
top: 12rpx;
|
||||
right: 12rpx;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
|
||||
.price-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #ff3b30;
|
||||
font-size: 36rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.origin {
|
||||
color: #a1aabc;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.coupon {
|
||||
color: #ff8354;
|
||||
background: #fff1e9;
|
||||
border-radius: 999rpx;
|
||||
padding: 6rpx 12rpx;
|
||||
border: 1rpx dashed #ffb08a;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 34rpx;
|
||||
font-weight: 800;
|
||||
color: var(--text-main);
|
||||
margin: 8rpx 0;
|
||||
}
|
||||
|
||||
.sell-point {
|
||||
color: #ff3b30;
|
||||
font-size: 26rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.meta {
|
||||
color: var(--text-sub);
|
||||
}
|
||||
|
||||
.specs {
|
||||
display: flex;
|
||||
gap: 10rpx;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.chip.active {
|
||||
background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-soft));
|
||||
color: #fff;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.detail-text {
|
||||
color: var(--text-main);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.recommend {
|
||||
padding: 12rpx 0;
|
||||
border-bottom: 1rpx solid #edf1f7;
|
||||
}
|
||||
|
||||
.recommend:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.rec-name {
|
||||
font-weight: 700;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.rec-meta {
|
||||
color: var(--text-sub);
|
||||
font-size: 24rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 -6rpx 16rpx rgba(31, 111, 232, 0.08);
|
||||
}
|
||||
|
||||
.collect {
|
||||
color: var(--brand-primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.action-group {
|
||||
margin-left: 20rpx;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.buy {
|
||||
margin-left: 20rpx;
|
||||
background: linear-gradient(135deg, #ff8354, #ff9f72);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,942 @@
|
||||
<template>
|
||||
<view>
|
||||
<view v-if="showPopup" class="share-popup-mask" @tap="close" @touchmove.stop.prevent></view>
|
||||
<view v-if="showPopup" class="share-popup card" @tap.stop>
|
||||
<view class="popup-head">
|
||||
<view class="section-title">晒单信息</view>
|
||||
<view class="close-btn" @tap="close">关闭</view>
|
||||
</view>
|
||||
|
||||
<view class="form-row">
|
||||
<view class="label">门店</view>
|
||||
<view class="picker-input" @tap="openMerchantPicker">
|
||||
<view class="picker-input-inner">
|
||||
<text :class="form.merchantName ? 'picker-text' : 'picker-placeholder'">
|
||||
{{ form.merchantName || '请选择门店' }}
|
||||
</text>
|
||||
<u-icon name="arrow-right" size="20" color="#9ca3af"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="detail-title">商品明细</view>
|
||||
<view class="detail-actions">
|
||||
<view class="ghost-btn" @tap="addItem">新增商品</view>
|
||||
</view>
|
||||
<view v-if="form.list.length === 0" class="detail-empty">暂无明细</view>
|
||||
<view v-else class="detail-list">
|
||||
<view class="detail-item" v-for="(detail, idx) in form.list" :key="idx">
|
||||
<view class="detail-head">
|
||||
<view class="detail-index">第 {{ idx + 1 }} 项</view>
|
||||
<view class="detail-remove" @tap="removeItem(idx)">删除</view>
|
||||
</view>
|
||||
|
||||
<view class="form-row">
|
||||
<view class="label">商品</view>
|
||||
<view class="picker-input" @tap="openProductPicker(idx)">
|
||||
<view class="picker-input-inner">
|
||||
<text :class="detail.goodsName ? 'picker-text' : 'picker-placeholder'">
|
||||
{{ detail.goodsName || '点击选择商品' }}
|
||||
</text>
|
||||
<u-icon name="arrow-right" size="20" color="#9ca3af"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-row">
|
||||
<view class="label">厂家</view>
|
||||
<view class="form-value">{{ detail.makerAbb || '-' }}</view>
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<view class="label">规格</view>
|
||||
<view class="form-value">{{ detail.spec || '-' }}</view>
|
||||
</view>
|
||||
<!-- <view class="form-row">-->
|
||||
<!-- <view class="label">红包金额</view>-->
|
||||
<!-- <view class="form-value">￥{{ detail.income || 0 }}</view>-->
|
||||
<!-- </view>-->
|
||||
<view class="form-row">
|
||||
<view class="label">编码</view>
|
||||
<view class="form-value">{{ detail.goodsCode || '-' }}</view>
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<view class="label">数量</view>
|
||||
<input v-model="detail.num" class="input" type="number" placeholder="请输入数量"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="form-row total-bonus-row">-->
|
||||
<!-- <view class="label">总红包金额</view>-->
|
||||
<!-- <view class="form-value total-bonus-value">￥{{ totalBonusDisplay }}</view>-->
|
||||
<!-- </view>-->
|
||||
|
||||
<view class="detail-title">小票</view>
|
||||
<view class="receipt-upload" @tap="chooseReceipt">
|
||||
<template v-if="form.receiptLocalPath">
|
||||
<image class="receipt-image" :src="form.receiptLocalPath" mode="aspectFill"/>
|
||||
<view class="receipt-tip">
|
||||
{{ receiptUploading ? '上传中...' : (form.receiptUrl ? '已上传，点击重新上传' : '点击重新上传') }}
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<u-icon name="camera" size="40" color="#9ca3af"/>
|
||||
<view class="receipt-tip">{{ receiptUploading ? '上传中...' : '上传小票' }}</view>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<view class="detail-title">留言（可选）</view>
|
||||
<view class="remark-wrap">
|
||||
<textarea
|
||||
v-model="form.remark"
|
||||
class="textarea"
|
||||
placeholder="请输入留言"
|
||||
maxlength="200"
|
||||
auto-height
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="primary-btn submit" @tap="submit">提交</view>
|
||||
</view>
|
||||
|
||||
<u-popup :show="showMerchantPicker" mode="bottom" round="24rpx" @close="closeMerchantPicker">
|
||||
<view class="merchant-picker">
|
||||
<view class="merchant-picker-head">
|
||||
<view class="picker-action" @tap="closeMerchantPicker">取消</view>
|
||||
<text class="picker-title">选择门店</text>
|
||||
<view class="picker-action primary" @tap="confirmMerchantPicker">确定</view>
|
||||
</view>
|
||||
<view class="merchant-picker-search">
|
||||
<input
|
||||
v-model="merchantSearchKeyword"
|
||||
class="merchant-search-input"
|
||||
placeholder="搜索门店"
|
||||
placeholder-class="merchant-search-placeholder"
|
||||
/>
|
||||
</view>
|
||||
<view v-if="merchantLoading" class="merchant-picker-loading">
|
||||
<u-loading-icon mode="circle"></u-loading-icon>
|
||||
</view>
|
||||
<picker-view
|
||||
v-else
|
||||
class="merchant-picker-view"
|
||||
:value="merchantPickerValue"
|
||||
:indicator-style="merchantIndicatorStyle"
|
||||
@change="onMerchantPickerChange"
|
||||
>
|
||||
<picker-view-column>
|
||||
<view v-for="(item, idx) in merchantFilteredOptions" :key="idx" class="merchant-picker-item">{{ item.text }}</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
<u-popup :show="showProductPicker" mode="bottom" round="24rpx" @close="closeProductPicker">
|
||||
<view class="product-picker">
|
||||
<view class="merchant-picker-head">
|
||||
<view class="picker-action" @tap="closeProductPicker">取消</view>
|
||||
<text class="picker-title">选择商品</text>
|
||||
<view class="picker-action primary" @tap="closeProductPicker">完成</view>
|
||||
</view>
|
||||
<view class="merchant-picker-search">
|
||||
<input
|
||||
v-model="productKeyword"
|
||||
class="merchant-search-input"
|
||||
placeholder="搜索商品名称/编码/厂家"
|
||||
placeholder-class="merchant-search-placeholder"
|
||||
/>
|
||||
</view>
|
||||
<view v-if="productLoading" class="merchant-picker-loading">
|
||||
<u-loading-icon mode="circle"></u-loading-icon>
|
||||
</view>
|
||||
<scroll-view v-else class="product-scroll" scroll-y>
|
||||
<view v-if="filteredProducts.length === 0" class="detail-empty">暂无商品</view>
|
||||
<view
|
||||
v-for="(item, idx) in filteredProducts"
|
||||
:key="idx"
|
||||
class="product-option"
|
||||
@tap="selectProduct(item)"
|
||||
>
|
||||
<view class="product-option-name">{{ item.goodsName || '-' }}</view>
|
||||
<view class="product-option-meta">厂家：{{ item.makerAbb || '-' }}</view>
|
||||
<view class="product-option-meta">规格：{{ item.spec || '-' }}</view>
|
||||
<!-- <view class="product-option-meta">红包金额：￥{{ item.income || 0 }}</view>-->
|
||||
<view class="product-option-meta">编码：{{ item.goodsCode || '-' }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from 'dayjs'
|
||||
import {calcDistanceMeters, uploadImg} from "@/util";
|
||||
import {merchantListReq} from "@/api/shop";
|
||||
import {shareAddReq} from "@/api/share";
|
||||
import {productListReq} from "@/api/product";
|
||||
|
||||
export default {
|
||||
name: 'ShareCreatePopup',
|
||||
props: {
|
||||
lat: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
lng: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
currentProvince: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
currentCity: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
chain: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showPopup: false,
|
||||
showMerchantPicker: false,
|
||||
showProductPicker: false,
|
||||
merchantLoading: false,
|
||||
productLoading: false,
|
||||
merchantList: [],
|
||||
productList: [],
|
||||
merchantSearchKeyword: '',
|
||||
merchantPickerValue: [0],
|
||||
productKeyword: '',
|
||||
activeProductRowIndex: 0,
|
||||
receiptUploading: false,
|
||||
form: this.buildForm()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
merchantFilteredOptions() {
|
||||
const list = Array.isArray(this.merchantList) ? this.merchantList : []
|
||||
const keyword = (this.merchantSearchKeyword || '').trim()
|
||||
const filtered = keyword ? list.filter(item => (item.text || '').includes(keyword)) : list
|
||||
return filtered.length ? filtered : [{id: '', text: '无匹配门店'}]
|
||||
},
|
||||
merchantPickerIndex() {
|
||||
const idx = this.merchantFilteredOptions.findIndex(item => item.id === this.form.merchantId)
|
||||
return idx > -1 ? idx : 0
|
||||
},
|
||||
merchantIndicatorStyle() {
|
||||
return 'height: 44px;'
|
||||
},
|
||||
filteredProducts() {
|
||||
const list = Array.isArray(this.productList) ? this.productList : []
|
||||
const keyword = (this.productKeyword || '').trim().toLowerCase()
|
||||
if (!keyword) return list
|
||||
return list.filter(item => {
|
||||
const name = (item.goodsName || '').toLowerCase()
|
||||
const maker = (item.makerAbb || '').toLowerCase()
|
||||
const spec = (item.spec || '').toLowerCase()
|
||||
const code = (item.goodsCode || '').toLowerCase()
|
||||
return name.includes(keyword) || maker.includes(keyword) || spec.includes(keyword) || code.includes(keyword)
|
||||
})
|
||||
},
|
||||
totalBonus() {
|
||||
const list = Array.isArray(this.form.list) ? this.form.list : []
|
||||
return list.reduce((sum, item) => {
|
||||
const hasSelectedProduct = !!(item.goodsName || item.goodsCode)
|
||||
if (!hasSelectedProduct) return sum
|
||||
const num = Number(item.num)
|
||||
const income = Number(item.income)
|
||||
if (!Number.isFinite(num) || num <= 0) return sum
|
||||
if (!Number.isFinite(income) || income <= 0) return sum
|
||||
return sum + (income * num)
|
||||
}, 0)
|
||||
},
|
||||
totalBonusDisplay() {
|
||||
return this.totalBonus.toFixed(2)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
merchantSearchKeyword() {
|
||||
this.merchantPickerValue = [0]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
buildForm() {
|
||||
return {
|
||||
merchantName: '',
|
||||
merchantId: '',
|
||||
province: '',
|
||||
city: '',
|
||||
lat: '',
|
||||
lng: '',
|
||||
remark: '',
|
||||
receiptLocalPath: '',
|
||||
receiptUrl: '',
|
||||
list: [this.createEmptyItem()]
|
||||
}
|
||||
},
|
||||
createEmptyItem() {
|
||||
return {
|
||||
goodsCode: '',
|
||||
goodsName: '',
|
||||
makerAbb: '',
|
||||
spec: '',
|
||||
income: '',
|
||||
num: ''
|
||||
}
|
||||
},
|
||||
normalizeMerchant(item) {
|
||||
const id = item.id ?? item.merchantId ?? item.merchant_id
|
||||
const text = item.name || item.merchantName || item.merchant_name || item.title || '未命名门店'
|
||||
const lat = Number(item.lat ?? item.latitude ?? item.merchantLat ?? item.merchant_lat)
|
||||
const lng = Number(item.lng ?? item.longitude ?? item.merchantLng ?? item.merchant_lng)
|
||||
return {
|
||||
id,
|
||||
text,
|
||||
lat: Number.isFinite(lat) ? lat : null,
|
||||
lng: Number.isFinite(lng) ? lng : null,
|
||||
province: item.province || item.province_str || '',
|
||||
city: item.city || item.city_str || ''
|
||||
}
|
||||
},
|
||||
findNearestMerchant(list) {
|
||||
if (!Number.isFinite(this.lat) || !Number.isFinite(this.lng)) return null
|
||||
let nearest = null
|
||||
let minDistance = Infinity
|
||||
list.forEach(item => {
|
||||
if (!Number.isFinite(item.lat) || !Number.isFinite(item.lng)) return
|
||||
const meters = calcDistanceMeters(this.lat, this.lng, item.lat, item.lng)
|
||||
if (!Number.isFinite(meters)) return
|
||||
if (meters < minDistance) {
|
||||
minDistance = meters
|
||||
nearest = item
|
||||
}
|
||||
})
|
||||
return nearest
|
||||
},
|
||||
applyMerchant(merchant) {
|
||||
if (!merchant) return
|
||||
this.form.merchantName = merchant.text || ''
|
||||
this.form.merchantId = merchant.id ?? ''
|
||||
this.form.province = merchant.province || this.currentProvince || ''
|
||||
this.form.city = merchant.city || this.currentCity || ''
|
||||
this.form.lat = Number.isFinite(merchant.lat) ? merchant.lat : ''
|
||||
this.form.lng = Number.isFinite(merchant.lng) ? merchant.lng : ''
|
||||
},
|
||||
normalizeProduct(item) {
|
||||
const product = item && item.product ? item.product : {}
|
||||
const code = item.goodsCode || item.code || item.productCode || item.batchCode || product.code || product.goodsCode || product.batchCode || ''
|
||||
const name = item.goodsName || item.goods_name || item.title || item.name || product.title || product.goodsName || product.name || ''
|
||||
const maker = item.makerAbb || item.maker || item.manufacturer || product.makerAbb || product.maker || product.manufacturer || ''
|
||||
const spec = product.spec || item.spec || item.specification || ''
|
||||
const incomeRaw = product.income !== undefined && product.income !== null ? product.income : (item.income || 0)
|
||||
const income = Number(incomeRaw) || 0
|
||||
return {
|
||||
goodsCode: code,
|
||||
goodsName: name,
|
||||
makerAbb: maker,
|
||||
spec,
|
||||
income
|
||||
}
|
||||
},
|
||||
uniqueProducts(list) {
|
||||
const map = {}
|
||||
list.forEach(item => {
|
||||
const key = item.goodsCode || `${item.goodsName}_${item.spec}_${item.makerAbb}`
|
||||
if (!key) return
|
||||
if (!map[key]) {
|
||||
map[key] = item
|
||||
}
|
||||
})
|
||||
return Object.keys(map).map(key => map[key])
|
||||
},
|
||||
async getMerchantList() {
|
||||
this.merchantLoading = true
|
||||
try {
|
||||
const params = {}
|
||||
const chain = String(this.chain || this.form.chainName || '').trim()
|
||||
if (chain) params.chain = chain
|
||||
const {data} = await merchantListReq(params)
|
||||
const list = Array.isArray(data)
|
||||
? data
|
||||
: (Array.isArray(data && data.records) ? data.records : (Array.isArray(data && data.list) ? data.list : []))
|
||||
this.merchantList = list.map(item => this.normalizeMerchant(item)).filter(item => item.id !== undefined && item.id !== null)
|
||||
} catch (error) {
|
||||
this.merchantList = []
|
||||
uni.showToast({
|
||||
title: '门店列表获取失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.merchantLoading = false
|
||||
}
|
||||
},
|
||||
async getProductsByMerchant() {
|
||||
if (!this.form.merchantId) {
|
||||
this.productList = []
|
||||
return
|
||||
}
|
||||
this.productLoading = true
|
||||
try {
|
||||
const {data} = await productListReq({
|
||||
merchantId: this.form.merchantId
|
||||
})
|
||||
const rawList = Array.isArray(data)
|
||||
? data
|
||||
: (Array.isArray(data && data.list)
|
||||
? data.list
|
||||
: (Array.isArray(data && data.records) ? data.records : []))
|
||||
const normalized = rawList.map(item => this.normalizeProduct(item)).filter(item => !!item.goodsName)
|
||||
this.productList = this.uniqueProducts(normalized)
|
||||
} catch (error) {
|
||||
this.productList = []
|
||||
uni.showToast({
|
||||
title: '商品数据获取失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.productLoading = false
|
||||
}
|
||||
},
|
||||
async open() {
|
||||
this.form = this.buildForm()
|
||||
this.productKeyword = ''
|
||||
this.merchantSearchKeyword = ''
|
||||
this.merchantPickerValue = [0]
|
||||
this.productList = []
|
||||
this.showPopup = true
|
||||
await this.getMerchantList()
|
||||
if (!this.merchantList.length) {
|
||||
return
|
||||
}
|
||||
const nearest = this.findNearestMerchant(this.merchantList)
|
||||
const target = nearest || this.merchantList[0]
|
||||
this.applyMerchant(target)
|
||||
await this.getProductsByMerchant()
|
||||
},
|
||||
close() {
|
||||
this.showPopup = false
|
||||
this.showMerchantPicker = false
|
||||
this.showProductPicker = false
|
||||
},
|
||||
openMerchantPicker() {
|
||||
this.merchantPickerValue = [this.merchantPickerIndex]
|
||||
this.showMerchantPicker = true
|
||||
},
|
||||
closeMerchantPicker() {
|
||||
this.showMerchantPicker = false
|
||||
},
|
||||
onMerchantPickerChange(e) {
|
||||
const value = e.detail && e.detail.value !== undefined ? e.detail.value : e.detail
|
||||
const index = Array.isArray(value) ? value[0] : Number(value || 0)
|
||||
this.merchantPickerValue = [index]
|
||||
},
|
||||
async confirmMerchantPicker() {
|
||||
const index = this.merchantPickerValue[0] || 0
|
||||
const options = this.merchantFilteredOptions
|
||||
const selected = options[index]
|
||||
if (!selected || selected.id === '' || selected.id === null || selected.id === undefined) {
|
||||
return
|
||||
}
|
||||
this.applyMerchant(selected)
|
||||
this.showMerchantPicker = false
|
||||
this.form.list = [this.createEmptyItem()]
|
||||
await this.getProductsByMerchant()
|
||||
},
|
||||
addItem() {
|
||||
this.form.list.push(this.createEmptyItem())
|
||||
},
|
||||
removeItem(index) {
|
||||
this.form.list.splice(index, 1)
|
||||
if (!this.form.list.length) {
|
||||
this.form.list.push(this.createEmptyItem())
|
||||
}
|
||||
},
|
||||
async openProductPicker(index) {
|
||||
if (!this.form.merchantId) {
|
||||
uni.showToast({
|
||||
title: '请先选择门店',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.productList.length) {
|
||||
await this.getProductsByMerchant()
|
||||
}
|
||||
this.activeProductRowIndex = index
|
||||
this.productKeyword = ''
|
||||
this.showProductPicker = true
|
||||
},
|
||||
closeProductPicker() {
|
||||
this.showProductPicker = false
|
||||
},
|
||||
selectProduct(item) {
|
||||
const index = this.activeProductRowIndex
|
||||
const row = this.form.list[index]
|
||||
if (!row) return
|
||||
this.$set(this.form.list, index, {
|
||||
...row,
|
||||
goodsCode: item.goodsCode || '',
|
||||
goodsName: item.goodsName || '',
|
||||
makerAbb: item.makerAbb || '',
|
||||
spec: item.spec || '',
|
||||
income: item.income || 0
|
||||
})
|
||||
this.showProductPicker = false
|
||||
},
|
||||
chooseReceipt() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sourceType: ['album', 'camera'],
|
||||
sizeType: ['original'],
|
||||
success: async ({tempFilePaths}) => {
|
||||
if (tempFilePaths && tempFilePaths[0]) {
|
||||
const localPath = tempFilePaths[0]
|
||||
this.form.receiptLocalPath = localPath
|
||||
this.form.receiptUrl = ''
|
||||
await this.uploadReceipt(localPath)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
async uploadReceipt(localPath) {
|
||||
if (!localPath) return ''
|
||||
try {
|
||||
this.receiptUploading = true
|
||||
const uploadRes = await uploadImg(localPath)
|
||||
const url = uploadRes && uploadRes.path ? uploadRes.path : ''
|
||||
if (!url) {
|
||||
throw new Error('upload failed')
|
||||
}
|
||||
this.form.receiptUrl = url
|
||||
return url
|
||||
} catch (error) {
|
||||
this.form.receiptUrl = ''
|
||||
uni.showToast({
|
||||
title: '小票上传失败，请重试',
|
||||
icon: 'none'
|
||||
})
|
||||
return ''
|
||||
} finally {
|
||||
this.receiptUploading = false
|
||||
}
|
||||
},
|
||||
async ensureReceiptUrl() {
|
||||
if (this.form.receiptUrl) return this.form.receiptUrl
|
||||
const path = this.form.receiptLocalPath || ''
|
||||
if (!path) return ''
|
||||
if (/^https?:\/\//.test(path)) return path
|
||||
return this.uploadReceipt(path)
|
||||
},
|
||||
validateBeforeSubmit() {
|
||||
if (!this.form.merchantId) {
|
||||
uni.showToast({
|
||||
title: '请选择门店',
|
||||
icon: 'none'
|
||||
})
|
||||
return null
|
||||
}
|
||||
const selectedRows = (this.form.list || [])
|
||||
.map((item, index) => ({
|
||||
...item,
|
||||
_index: index
|
||||
}))
|
||||
.filter(item => item.goodsName || item.goodsCode)
|
||||
if (!selectedRows.length) {
|
||||
uni.showToast({
|
||||
title: '请至少选择一个商品',
|
||||
icon: 'none'
|
||||
})
|
||||
return null
|
||||
}
|
||||
for (let i = 0; i < selectedRows.length; i++) {
|
||||
const current = selectedRows[i]
|
||||
const rawNum = current.num === null || current.num === undefined ? '' : String(current.num).trim()
|
||||
if (!rawNum) {
|
||||
uni.showToast({
|
||||
title: `请填写第${current._index + 1}项商品数量`,
|
||||
icon: 'none'
|
||||
})
|
||||
return null
|
||||
}
|
||||
const num = Number(rawNum)
|
||||
if (!Number.isFinite(num) || num <= 0 || num > 1000) {
|
||||
uni.showToast({
|
||||
title: `第${current._index + 1}项商品数量格式不正确`,
|
||||
icon: 'none'
|
||||
})
|
||||
return null
|
||||
}
|
||||
}
|
||||
if (!this.form.receiptLocalPath) {
|
||||
uni.showToast({
|
||||
title: '请上传小票',
|
||||
icon: 'none'
|
||||
})
|
||||
return null
|
||||
}
|
||||
if (this.receiptUploading) {
|
||||
uni.showToast({
|
||||
title: '小票上传中，请稍后提交',
|
||||
icon: 'none'
|
||||
})
|
||||
return null
|
||||
}
|
||||
return selectedRows
|
||||
},
|
||||
async submit() {
|
||||
const selectedRows = this.validateBeforeSubmit()
|
||||
if (!selectedRows) return
|
||||
try {
|
||||
uni.showLoading({
|
||||
title: '提交中...'
|
||||
})
|
||||
const image = await this.ensureReceiptUrl()
|
||||
if (!image) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '小票上传失败',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
const detailList = selectedRows.map(item => ({
|
||||
goodsCode: item.goodsCode || '',
|
||||
goodsName: item.goodsName || '',
|
||||
num: Number(item.num) || 0,
|
||||
spec: item.spec || '',
|
||||
amount: '',
|
||||
sourceCode: ''
|
||||
}))
|
||||
const payload = {
|
||||
merchantName: this.form.merchantName,
|
||||
merchantId: this.form.merchantId,
|
||||
province: this.form.province,
|
||||
city: this.form.city,
|
||||
date: dayjs().format('YYYY-MM-DD'),
|
||||
orderNo: '',
|
||||
amount: '',
|
||||
remark: this.form.remark || '',
|
||||
lat: this.form.lat,
|
||||
lng: this.form.lng,
|
||||
image,
|
||||
hasChange: true,
|
||||
detailList
|
||||
}
|
||||
await shareAddReq(payload)
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'success'
|
||||
})
|
||||
this.close()
|
||||
this.$emit('submitted')
|
||||
} catch (error) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '提交失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.share-popup-mask {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.share-popup {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 40rpx;
|
||||
transform: translateX(-50%);
|
||||
width: 88%;
|
||||
max-height: 70vh;
|
||||
overflow: auto;
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.popup-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
color: #6b7280;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12rpx 0;
|
||||
border-bottom: 1rpx solid #edf1f7;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #111827;
|
||||
font-size: 26rpx;
|
||||
min-width: 140rpx;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-size: 26rpx;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.form-value {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-size: 26rpx;
|
||||
color: #111827;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.total-bonus-row {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.total-bonus-value {
|
||||
color: #ef4444;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.picker-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.picker-input-inner {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8rpx;
|
||||
min-height: 40rpx;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
color: #111827;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.picker-placeholder {
|
||||
color: #9ca3af;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
margin-top: 14rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.detail-actions {
|
||||
margin-top: 8rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.ghost-btn {
|
||||
color: #22c3a1;
|
||||
border: 1rpx solid #22c3a1;
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.detail-empty {
|
||||
color: #6b7280;
|
||||
text-align: center;
|
||||
padding: 14rpx 0;
|
||||
}
|
||||
|
||||
.detail-list {
|
||||
margin-top: 8rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
border: 1rpx dashed #dfe8f5;
|
||||
border-radius: 12rpx;
|
||||
padding: 12rpx;
|
||||
}
|
||||
|
||||
.detail-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.detail-index {
|
||||
color: #6b7280;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.detail-remove {
|
||||
color: #ff3b30;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.receipt-upload {
|
||||
margin-top: 10rpx;
|
||||
border: 1rpx dashed #d1d5db;
|
||||
border-radius: 12rpx;
|
||||
min-height: 220rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
.receipt-image {
|
||||
width: 100%;
|
||||
height: 220rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.receipt-tip {
|
||||
color: #6b7280;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.remark-wrap {
|
||||
margin-top: 10rpx;
|
||||
border: 1rpx solid #edf1f7;
|
||||
border-radius: 12rpx;
|
||||
padding: 10rpx 12rpx;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
width: 100%;
|
||||
min-height: 90rpx;
|
||||
font-size: 26rpx;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.submit {
|
||||
margin-top: 16rpx;
|
||||
padding: 14rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.merchant-picker,
|
||||
.product-picker {
|
||||
padding: 20rpx 24rpx 30rpx;
|
||||
}
|
||||
|
||||
.merchant-picker-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.picker-action {
|
||||
font-size: 26rpx;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.picker-action.primary {
|
||||
color: #2fc6a7;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.picker-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.merchant-picker-search {
|
||||
margin: 6rpx 0 12rpx;
|
||||
}
|
||||
|
||||
.merchant-search-input {
|
||||
width: 100%;
|
||||
background: #f3f4f6;
|
||||
border-radius: 12rpx;
|
||||
padding: 12rpx 16rpx;
|
||||
font-size: 26rpx;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.merchant-search-placeholder {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.merchant-picker-loading {
|
||||
padding: 20rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.merchant-picker-view {
|
||||
height: 360rpx;
|
||||
}
|
||||
|
||||
.merchant-picker-item {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.product-scroll {
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
.product-option {
|
||||
padding: 16rpx 0;
|
||||
border-bottom: 1rpx solid #edf1f7;
|
||||
}
|
||||
|
||||
.product-option:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.product-option-name {
|
||||
font-size: 28rpx;
|
||||
color: #111827;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.product-option-meta {
|
||||
font-size: 22rpx;
|
||||
color: #4b5563;
|
||||
margin-top: 2rpx;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,329 @@
|
||||
<template>
|
||||
<view class="share-detail-page">
|
||||
<view class="page-hero">
|
||||
<AppNavbar title="分享详情" show-back/>
|
||||
</view>
|
||||
|
||||
<view class="card block">
|
||||
<view class="section-title">基本信息</view>
|
||||
<view v-if="loading" class="empty">加载中...</view>
|
||||
<template v-else>
|
||||
<view class="info-row">
|
||||
<text class="info-label">门店</text>
|
||||
<text class="info-value">{{ detailEntry.merchantName || detailEntry.merchant_name || '未命名门店' }}</text>
|
||||
</view>
|
||||
<!-- <view class="info-row">-->
|
||||
<!-- <text class="info-label">红包</text>-->
|
||||
<!-- <text class="info-value text-red">￥{{ formatPrice(detailEntry.income || 0) }}</text>-->
|
||||
<!-- </view>-->
|
||||
<view class="info-row">
|
||||
<text class="info-label">提交人</text>
|
||||
<text class="info-value">{{ detailEntry.owner || '-' }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">日期</text>
|
||||
<text class="info-value">{{ detailEntry.date || detailEntry.activityDateText || '-' }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">留言</text>
|
||||
<text class="info-value">{{ detailEntry.remark || '-' }}</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<view class="card block">
|
||||
<view class="section-title">小票查看</view>
|
||||
<view v-if="receiptImages.length" class="media-images">
|
||||
<image
|
||||
v-for="(receipt, receiptIdx) in receiptImages"
|
||||
:key="`receipt-${receiptIdx}`"
|
||||
class="media-image"
|
||||
:src="receipt"
|
||||
mode="aspectFill"
|
||||
@tap="previewReceipt(receiptImages, receiptIdx)"
|
||||
/>
|
||||
</view>
|
||||
<view v-else class="detail-empty">暂无小票</view>
|
||||
</view>
|
||||
|
||||
<view class="card block">
|
||||
<view class="section-title">商品明细</view>
|
||||
<view v-if="detailList.length" class="detail-list">
|
||||
<view class="detail-item" v-for="(detail, idx) in detailList" :key="idx">
|
||||
<view class="detail-head">
|
||||
<view class="detail-name">{{ detail.goodsName || detail.goods_name || detail.name || detail.title || '商品' }}</view>
|
||||
</view>
|
||||
<view class="detail-grid">
|
||||
<view class="detail-kv">
|
||||
<text class="detail-label">数量</text>
|
||||
<text class="detail-value">x {{ detail.num || detail.qty || 0 }}</text>
|
||||
</view>
|
||||
<view class="detail-kv">
|
||||
<text class="detail-label">厂家</text>
|
||||
<text class="detail-value">{{ resolveManufacturer(detail) }}</text>
|
||||
</view>
|
||||
<view class="detail-kv">
|
||||
<text class="detail-label">编号</text>
|
||||
<text class="detail-value">{{ resolveCode(detail) }}</text>
|
||||
</view>
|
||||
<view class="detail-kv">
|
||||
<text class="detail-label">规格</text>
|
||||
<text class="detail-value">{{ resolveSpec(detail) }}</text>
|
||||
</view>
|
||||
<view class="detail-kv">
|
||||
<text class="detail-label">金额</text>
|
||||
<text class="detail-value text-red">{{ formatMoney(resolveAmount(detail)) }}</text>
|
||||
</view>
|
||||
<!-- <view class="detail-kv">-->
|
||||
<!-- <text class="detail-label">额外加提</text>-->
|
||||
<!-- <text class="detail-value text-red">{{ formatMoney(resolveExtraAmount(detail)) }}</text>-->
|
||||
<!-- </view>-->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="detail-empty">暂无明细</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppNavbar from "@/components/AppNavbar.vue";
|
||||
|
||||
export default {
|
||||
components: {AppNavbar},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
detailEntry: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
detailList() {
|
||||
const list = this.detailEntry.detailList
|
||||
return Array.isArray(list) ? list : []
|
||||
},
|
||||
receiptImages() {
|
||||
const list = this.detailEntry.receiptImages
|
||||
return Array.isArray(list) ? list : []
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.loadDetail(options || {})
|
||||
},
|
||||
methods: {
|
||||
loadDetail(options = {}) {
|
||||
const rawKey = options.cacheKey || ''
|
||||
const cacheKey = rawKey ? decodeURIComponent(rawKey) : ''
|
||||
let payload = null
|
||||
if (cacheKey) {
|
||||
try {
|
||||
payload = uni.getStorageSync(cacheKey)
|
||||
uni.removeStorageSync(cacheKey)
|
||||
} catch (error) {
|
||||
}
|
||||
}
|
||||
if (!payload) {
|
||||
this.loading = false
|
||||
uni.showToast({
|
||||
title: '详情数据不存在',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.detailEntry = this.normalizeShareItem(payload)
|
||||
console.log(this.detailEntry)
|
||||
this.loading = false
|
||||
},
|
||||
normalizeShareItem(item) {
|
||||
const detailListRaw = item.detailList || item.list || []
|
||||
const detailList = this.parseJsonMaybe(detailListRaw)
|
||||
return {
|
||||
...item,
|
||||
detailList: Array.isArray(detailList) ? detailList : [],
|
||||
receiptImages: this.resolveReceiptImages(item)
|
||||
}
|
||||
},
|
||||
parseJsonMaybe(value) {
|
||||
if (value === null || value === undefined || value === '') return []
|
||||
if (typeof value === 'string') {
|
||||
try {
|
||||
return JSON.parse(value)
|
||||
} catch (error) {
|
||||
return []
|
||||
}
|
||||
}
|
||||
return value
|
||||
},
|
||||
resolveReceiptImages(item = {}) {
|
||||
const candidates = [
|
||||
item.image,
|
||||
item.images,
|
||||
item.receiptPhoto,
|
||||
item.receiptPhotos,
|
||||
item.receipt_photo,
|
||||
item.receipt_photos,
|
||||
item.receiptImages
|
||||
]
|
||||
const urls = []
|
||||
candidates.forEach(value => {
|
||||
this.appendReceiptValue(urls, value)
|
||||
})
|
||||
return Array.from(new Set(urls.filter(url => /^https?:\/\//.test(url) || /^\/\//.test(url))))
|
||||
},
|
||||
appendReceiptValue(target, value) {
|
||||
if (value === null || value === undefined || value === '') return
|
||||
if (Array.isArray(value)) {
|
||||
value.forEach(item => this.appendReceiptValue(target, item))
|
||||
return
|
||||
}
|
||||
if (typeof value === 'object') {
|
||||
const url = value.url || value.path || value.src || value.image || value.img
|
||||
if (url) this.appendReceiptValue(target, url)
|
||||
return
|
||||
}
|
||||
const text = String(value).trim()
|
||||
if (!text) return
|
||||
if (text.startsWith('[') || text.startsWith('{')) {
|
||||
try {
|
||||
const parsed = JSON.parse(text)
|
||||
this.appendReceiptValue(target, parsed)
|
||||
return
|
||||
} catch (error) {
|
||||
}
|
||||
}
|
||||
if (text.includes(',')) {
|
||||
text.split(',').forEach(part => this.appendReceiptValue(target, part))
|
||||
return
|
||||
}
|
||||
target.push(text)
|
||||
},
|
||||
previewReceipt(list = [], current = 0) {
|
||||
if (!Array.isArray(list) || list.length === 0) return
|
||||
uni.previewImage({
|
||||
urls: list,
|
||||
current: list[current] || list[0]
|
||||
})
|
||||
},
|
||||
resolveManufacturer(detail) {
|
||||
if (!detail) return '-'
|
||||
const product = detail.product || {}
|
||||
const value = detail.makerAbb
|
||||
|| detail.manufacturer
|
||||
|| detail.vendor
|
||||
|| detail.factory
|
||||
|| detail.brand
|
||||
|| product.makerAbb
|
||||
|| product.manufacturer
|
||||
|| product.vendor
|
||||
|| product.factory
|
||||
|| product.brand
|
||||
return this.normalizeText(value)
|
||||
},
|
||||
resolveCode(detail) {
|
||||
if (!detail) return '-'
|
||||
const value = detail.goodsCode
|
||||
|| detail.code
|
||||
|| detail.productCode
|
||||
|| detail.skuCode
|
||||
|| detail.barcode
|
||||
return this.normalizeText(value)
|
||||
},
|
||||
resolveSpec(detail) {
|
||||
if (!detail) return '-'
|
||||
const product = detail.product || {}
|
||||
const value = detail.spec
|
||||
|| detail.specification
|
||||
|| detail.standard
|
||||
|| product.spec
|
||||
|| product.specification
|
||||
|| product.standard
|
||||
return this.normalizeText(value)
|
||||
},
|
||||
resolveAmount(detail) {
|
||||
if (!detail) return ''
|
||||
if (detail.income !== undefined && detail.income !== null && detail.income !== '') return detail.income
|
||||
if (detail.product && detail.product.income !== undefined && detail.product.income !== null && detail.product.income !== '') {
|
||||
return detail.product.income
|
||||
}
|
||||
return ''
|
||||
},
|
||||
resolveExtraAmount(detail) {
|
||||
if (!detail) return ''
|
||||
if (detail.extraIncome !== undefined && detail.extraIncome !== null && detail.extraIncome !== '') return detail.extraIncome
|
||||
if (detail.product && detail.product.extraIncome !== undefined && detail.product.extraIncome !== null && detail.product.extraIncome !== '') {
|
||||
return detail.product.extraIncome
|
||||
}
|
||||
return ''
|
||||
},
|
||||
normalizeText(value) {
|
||||
if (value === 0) return '0'
|
||||
if (value === null || value === undefined || value === '') return '-'
|
||||
return String(value)
|
||||
},
|
||||
formatMoney(value) {
|
||||
if (value === null || value === undefined || value === '') return '-'
|
||||
const num = Number(value)
|
||||
if (Number.isFinite(num)) return `￥${num.toFixed(2)}`
|
||||
return String(value)
|
||||
},
|
||||
formatPrice(value) {
|
||||
const num = Number(value || 0)
|
||||
return num.toFixed(2)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../audit/components/record.scss';
|
||||
|
||||
.share-detail-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.page-hero {
|
||||
background: url('https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/462bfa04cf0eff8698884c38b9d17519.png') no-repeat
|
||||
top center / 100% auto;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin: 18rpx 20rpx 0;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
padding: 10rpx 0;
|
||||
border-bottom: 1rpx solid #edf1f7;
|
||||
}
|
||||
|
||||
.info-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
color: #6b7280;
|
||||
font-size: 24rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #1f2937;
|
||||
font-size: 24rpx;
|
||||
text-align: right;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.text-red {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: var(--text-sub);
|
||||
text-align: center;
|
||||
padding: 16rpx 0;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,727 @@
|
||||
<template>
|
||||
<view class="my-share-page">
|
||||
<view class="page-hero">
|
||||
<AppNavbar title="我的分享" show-back/>
|
||||
<view class="intro-card">
|
||||
<view class="card-title">
|
||||
<view class="title-bar"></view>
|
||||
<text>我的分享</text>
|
||||
</view>
|
||||
<text class="intro-text">查看已提交的晒单记录</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card block">
|
||||
<view class="section-title">筛选查询</view>
|
||||
<view class="filter-row">
|
||||
<view class="filter-chip" @tap="openChainPicker">{{ chainLabel }}</view>
|
||||
<view class="filter-chip" @tap="openDatePicker('start')">{{ filterForm.startDate || '开始日期' }}</view>
|
||||
<view class="filter-chip" @tap="openDatePicker('end')">{{ filterForm.endDate || '结束日期' }}</view>
|
||||
</view>
|
||||
<view class="keyword-row">
|
||||
<input
|
||||
v-model="filterForm.merchantKeyword"
|
||||
class="keyword-input"
|
||||
type="text"
|
||||
confirm-type="search"
|
||||
placeholder="请输入门店关键词"
|
||||
placeholder-class="keyword-placeholder"
|
||||
@confirm="handleQuery"
|
||||
/>
|
||||
<view class="filter-btn primary" @tap="handleQuery">查询</view>
|
||||
<view class="filter-btn" @tap="handleReset">重置</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="block">
|
||||
<view class="section-title">记录列表</view>
|
||||
<view v-if="loading" class="empty">加载中...</view>
|
||||
<view v-else-if="shares.length === 0" class="empty">暂无分享记录</view>
|
||||
<view v-else-if="filteredShares.length === 0" class="empty">暂无匹配记录</view>
|
||||
<view v-else>
|
||||
<view class="record" v-for="item in filteredShares" :key="item._rowKey">
|
||||
<view class="record-meta">门店：{{ item.merchantName || item.merchant_name || '未命名门店' }}</view>
|
||||
<!-- <view class="record-meta" style="color: red">-->
|
||||
<!-- 红包：￥{{ formatPrice(item.income || 0) }}-->
|
||||
<!-- <text v-if="hasExtraIncome(item)">（含额外加提:{{ formatPrice(resolveExtraIncome(item)) }}元）</text>-->
|
||||
<!-- </view>-->
|
||||
<view class="record-meta">提交人：{{ item.owner || '-' }} · {{ item.date || item.activityDateText }}</view>
|
||||
<view class="record-meta">留言：{{ item.remark || '-' }}</view>
|
||||
<view class="record-toggle" @tap="openDetail(item)">
|
||||
<text>点击查看详情</text>
|
||||
<u-icon name="arrow-right" size="20" color="#2fc6a7"/>
|
||||
</view>
|
||||
<view v-if="item.statusValue !== 1" class="record-actions">
|
||||
<view class="flex-1 mx-15">
|
||||
<view
|
||||
:class="['chip w-90p danger-chip', deletingId === item._rowKey ? 'disabled-chip' : '']"
|
||||
@tap="handleVoid(item)"
|
||||
>{{ deletingId === item._rowKey ? '作废中...' : '作废' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-picker
|
||||
:show="showChainPicker"
|
||||
:columns="[chainOptions]"
|
||||
:loading="chainLoading"
|
||||
:defaultIndex="chainPickerIndex"
|
||||
keyName="text"
|
||||
@confirm="onChainConfirm"
|
||||
@cancel="closeChainPicker"
|
||||
@close="closeChainPicker"
|
||||
/>
|
||||
<u-datetime-picker
|
||||
:show="showStartPicker"
|
||||
:value="startPickerValue"
|
||||
mode="date"
|
||||
@confirm="e => onDateConfirm('start', e)"
|
||||
@cancel="closeDatePicker('start')"
|
||||
@close="closeDatePicker('start')"
|
||||
/>
|
||||
<u-datetime-picker
|
||||
:show="showEndPicker"
|
||||
:value="endPickerValue"
|
||||
mode="date"
|
||||
@confirm="e => onDateConfirm('end', e)"
|
||||
@cancel="closeDatePicker('end')"
|
||||
@close="closeDatePicker('end')"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from "dayjs";
|
||||
import {shareDeleteReq, shareUserListReq} from "@/api/share";
|
||||
import AppNavbar from "@/components/AppNavbar.vue";
|
||||
import {merchantGroupByChainReq} from "@/api/shop";
|
||||
|
||||
export default {
|
||||
components: {AppNavbar},
|
||||
data() {
|
||||
return {
|
||||
shares: [],
|
||||
loading: false,
|
||||
chainLoading: false,
|
||||
showChainPicker: false,
|
||||
showStartPicker: false,
|
||||
showEndPicker: false,
|
||||
chainOptions: [{id: '', text: '全部连锁'}],
|
||||
chainMerchantMap: {},
|
||||
deletingId: '',
|
||||
filterForm: {
|
||||
chainId: '',
|
||||
merchantKeyword: '',
|
||||
startDate: '',
|
||||
endDate: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
chainLabel() {
|
||||
const selected = this.chainOptions.find(item => item.id === this.filterForm.chainId)
|
||||
return (selected && selected.text) || '连锁筛选'
|
||||
},
|
||||
chainPickerIndex() {
|
||||
const idx = this.chainOptions.findIndex(item => item.id === this.filterForm.chainId)
|
||||
return [idx > -1 ? idx : 0]
|
||||
},
|
||||
startPickerValue() {
|
||||
return this.filterForm.startDate ? dayjs(this.filterForm.startDate).valueOf() : Date.now()
|
||||
},
|
||||
endPickerValue() {
|
||||
return this.filterForm.endDate ? dayjs(this.filterForm.endDate).valueOf() : Date.now()
|
||||
},
|
||||
filteredShares() {
|
||||
const list = Array.isArray(this.shares) ? this.shares : []
|
||||
const keyword = (this.filterForm.merchantKeyword || '').trim().toLowerCase()
|
||||
const startTs = this.filterForm.startDate
|
||||
? dayjs(`${this.filterForm.startDate} 00:00:00`).valueOf()
|
||||
: null
|
||||
const endTs = this.filterForm.endDate
|
||||
? dayjs(`${this.filterForm.endDate} 23:59:59`).valueOf()
|
||||
: null
|
||||
return list.filter(item => {
|
||||
if (this.filterForm.chainId && String(item.chainIdNormalized || '') !== String(this.filterForm.chainId)) {
|
||||
return false
|
||||
}
|
||||
if (keyword) {
|
||||
const merchantText = String(item.merchantName || item.merchant_name || '').toLowerCase()
|
||||
if (!merchantText.includes(keyword)) return false
|
||||
}
|
||||
if ((startTs || endTs) && !Number.isFinite(item.activityTimestamp)) {
|
||||
return false
|
||||
}
|
||||
if (startTs && item.activityTimestamp < startTs) {
|
||||
return false
|
||||
}
|
||||
if (endTs && item.activityTimestamp > endTs) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.initPage()
|
||||
},
|
||||
methods: {
|
||||
async initPage() {
|
||||
await this.fetchChainList()
|
||||
await this.fetchShareList()
|
||||
},
|
||||
async fetchChainList() {
|
||||
this.chainLoading = true
|
||||
try {
|
||||
const {data} = await merchantGroupByChainReq({})
|
||||
const list = this.unwrapList(data)
|
||||
const chainList = list
|
||||
.map((item, index) => this.normalizeMerchantChain(item, index))
|
||||
.filter(item => item.id !== '' && item.id !== null && item.id !== undefined)
|
||||
const chainOptions = [{id: '', text: '全部连锁'}]
|
||||
const chainMerchantMap = {}
|
||||
chainList.forEach(chain => {
|
||||
chainOptions.push({
|
||||
id: chain.id,
|
||||
text: chain.text
|
||||
})
|
||||
const merchants = Array.isArray(chain.merchants) ? chain.merchants : []
|
||||
merchants.forEach(merchant => {
|
||||
const merchantId = merchant.id
|
||||
if (merchantId === '' || merchantId === null || merchantId === undefined) return
|
||||
chainMerchantMap[String(merchantId)] = {
|
||||
chainId: chain.id,
|
||||
chainName: chain.text
|
||||
}
|
||||
})
|
||||
})
|
||||
this.chainOptions = chainOptions
|
||||
this.chainMerchantMap = chainMerchantMap
|
||||
} catch (error) {
|
||||
this.chainOptions = [{id: '', text: '全部连锁'}]
|
||||
this.chainMerchantMap = {}
|
||||
} finally {
|
||||
this.chainLoading = false
|
||||
}
|
||||
},
|
||||
buildQueryParams() {
|
||||
const params = {}
|
||||
const chainId = this.filterForm.chainId
|
||||
const keyword = (this.filterForm.merchantKeyword || '').trim()
|
||||
const startDate = this.filterForm.startDate
|
||||
const endDate = this.filterForm.endDate
|
||||
const chainIdText = String(chainId || '')
|
||||
const isVirtualChain = chainIdText.startsWith('chain_')
|
||||
if (chainId !== '' && chainId !== null && chainId !== undefined && !isVirtualChain) {
|
||||
params.chainId = chainId
|
||||
}
|
||||
if (keyword) {
|
||||
params.merchantName = keyword
|
||||
params.keyword = keyword
|
||||
}
|
||||
if (startDate) {
|
||||
params.createTimeStart = `${startDate} 00:00:00`
|
||||
params.dateStart = startDate
|
||||
}
|
||||
if (endDate) {
|
||||
params.createTimeEnd = `${endDate} 23:59:59`
|
||||
params.dateEnd = endDate
|
||||
}
|
||||
return params
|
||||
},
|
||||
async fetchShareList() {
|
||||
this.loading = true
|
||||
try {
|
||||
const {data} = await shareUserListReq(this.buildQueryParams())
|
||||
const list = Array.isArray(data) ? data : (data && data.list ? data.list : [])
|
||||
this.shares = list.map((item, index) => this.normalizeShareItem(item, index))
|
||||
} catch (err) {
|
||||
uni.showToast({
|
||||
title: '加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
console.log(err)
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
handleQuery() {
|
||||
if (!this.validateDateRange()) return
|
||||
this.fetchShareList()
|
||||
},
|
||||
async handleReset() {
|
||||
this.filterForm = {
|
||||
chainId: '',
|
||||
merchantKeyword: '',
|
||||
startDate: '',
|
||||
endDate: ''
|
||||
}
|
||||
await this.fetchShareList()
|
||||
},
|
||||
openChainPicker() {
|
||||
this.showChainPicker = true
|
||||
},
|
||||
closeChainPicker() {
|
||||
this.showChainPicker = false
|
||||
},
|
||||
onChainConfirm(e) {
|
||||
const selected = e.value && e.value.length ? e.value[0] : null
|
||||
this.filterForm.chainId = selected ? (selected.id ?? '') : ''
|
||||
this.showChainPicker = false
|
||||
this.handleQuery()
|
||||
},
|
||||
openDatePicker(type) {
|
||||
if (type === 'start') {
|
||||
this.showStartPicker = true
|
||||
return
|
||||
}
|
||||
this.showEndPicker = true
|
||||
},
|
||||
closeDatePicker(type) {
|
||||
if (type === 'start') {
|
||||
this.showStartPicker = false
|
||||
return
|
||||
}
|
||||
this.showEndPicker = false
|
||||
},
|
||||
onDateConfirm(type, event) {
|
||||
const raw = event && event.value !== undefined ? event.value : Date.now()
|
||||
const value = dayjs(raw).format('YYYY-MM-DD')
|
||||
const prevStartDate = this.filterForm.startDate
|
||||
const prevEndDate = this.filterForm.endDate
|
||||
if (type === 'start') {
|
||||
this.filterForm.startDate = value
|
||||
this.showStartPicker = false
|
||||
} else {
|
||||
this.filterForm.endDate = value
|
||||
this.showEndPicker = false
|
||||
}
|
||||
if (!this.validateDateRange()) {
|
||||
this.filterForm.startDate = prevStartDate
|
||||
this.filterForm.endDate = prevEndDate
|
||||
return
|
||||
}
|
||||
this.fetchShareList()
|
||||
},
|
||||
validateDateRange() {
|
||||
const {startDate, endDate} = this.filterForm
|
||||
if (!startDate || !endDate) return true
|
||||
const startTs = dayjs(`${startDate} 00:00:00`).valueOf()
|
||||
const endTs = dayjs(`${endDate} 23:59:59`).valueOf()
|
||||
if (startTs <= endTs) return true
|
||||
uni.showToast({
|
||||
title: '开始日期不能晚于结束日期',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
},
|
||||
normalizeShareItem(item, index) {
|
||||
const detailListRaw = item.detailList || item.list || []
|
||||
const detailList = this.parseJsonMaybe(detailListRaw)
|
||||
const receiptImages = this.resolveReceiptImages(item)
|
||||
const chainInfo = this.resolveShareChain(item)
|
||||
const activityRaw = item.date || item.shareDate || item.createTime || item.createdAt || item.create_time || ''
|
||||
const activityTimestamp = this.parseDateToTimestamp(activityRaw)
|
||||
const statusValue = Number(item.status)
|
||||
let statusLabel = '状态未知'
|
||||
let statusClass = 'pending'
|
||||
if (statusValue === 0) statusLabel = '待审核'
|
||||
if (statusValue === 1) {
|
||||
statusLabel = '已通过'
|
||||
statusClass = 'success'
|
||||
}
|
||||
if (statusValue === 2) {
|
||||
statusLabel = '已驳回'
|
||||
statusClass = 'danger'
|
||||
}
|
||||
return {
|
||||
...item,
|
||||
_rowKey: this.buildRowKey(item, index),
|
||||
detailList: Array.isArray(detailList) ? detailList : [],
|
||||
receiptImages,
|
||||
chainIdNormalized: chainInfo.chainId,
|
||||
chainName: chainInfo.chainName,
|
||||
activityDateText: activityRaw || '-',
|
||||
activityTimestamp,
|
||||
statusValue,
|
||||
statusLabel,
|
||||
owner: item.user.realName || item.user.nickname || '-',
|
||||
statusClass
|
||||
}
|
||||
},
|
||||
buildRowKey(item, index) {
|
||||
const keySeed = item.id ?? item.shareId ?? item.orderNo ?? item.createTime ?? item.date
|
||||
return keySeed !== undefined && keySeed !== null && String(keySeed).trim() !== ''
|
||||
? `share_${keySeed}`
|
||||
: `share_${index}`
|
||||
},
|
||||
buildDetailCacheKey(item = {}) {
|
||||
const seed = item._rowKey || item.id || item.shareId || Date.now()
|
||||
return `share_detail_${seed}`
|
||||
},
|
||||
openDetail(item) {
|
||||
if (!item) return
|
||||
const cacheKey = this.buildDetailCacheKey(item)
|
||||
try {
|
||||
uni.setStorageSync(cacheKey, item)
|
||||
} catch (error) {
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: `/pages/share/detail?cacheKey=${encodeURIComponent(cacheKey)}`
|
||||
})
|
||||
},
|
||||
async handleVoid(item) {
|
||||
if (!item || Number(item.statusValue) === 1) return
|
||||
if (this.deletingId) return
|
||||
const targetId = item.id ?? item.shareId ?? ''
|
||||
if (targetId === '' || targetId === null || targetId === undefined) {
|
||||
uni.showToast({
|
||||
title: '记录ID缺失，无法作废',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
const confirmRes = await new Promise(resolve => {
|
||||
uni.showModal({
|
||||
title: '确认作废',
|
||||
content: '作废后不可恢复，是否继续？',
|
||||
confirmText: '确定',
|
||||
cancelText: '取消',
|
||||
success: resolve,
|
||||
fail: () => resolve({confirm: false})
|
||||
})
|
||||
})
|
||||
if (!confirmRes || !confirmRes.confirm) return
|
||||
try {
|
||||
this.deletingId = item._rowKey
|
||||
const res = await shareDeleteReq(targetId)
|
||||
if (res && res.code !== undefined && Number(res.code) !== 0) {
|
||||
throw new Error('delete failed')
|
||||
}
|
||||
uni.showToast({
|
||||
title: '作废成功',
|
||||
icon: 'success'
|
||||
})
|
||||
await this.fetchShareList()
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: '作废失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.deletingId = ''
|
||||
}
|
||||
},
|
||||
resolveShareChain(item) {
|
||||
const rawChainId = item.chainId ?? item.chain_id ?? item.chainCode ?? item.chain_code ?? ''
|
||||
const merchantId = item.merchantId ?? item.merchant_id ?? ''
|
||||
const directName = item.chainName || item.chain_name || item.chain || item.chainAbb || ''
|
||||
let chainId = rawChainId
|
||||
let chainName = directName
|
||||
const merchantChain = merchantId !== '' && merchantId !== null && merchantId !== undefined
|
||||
? this.chainMerchantMap[String(merchantId)]
|
||||
: null
|
||||
if (!chainId && merchantChain) {
|
||||
chainId = merchantChain.chainId
|
||||
}
|
||||
if (!chainName && merchantChain) {
|
||||
chainName = merchantChain.chainName
|
||||
}
|
||||
if (!chainName && chainId !== '' && chainId !== null && chainId !== undefined) {
|
||||
const selected = this.chainOptions.find(option => String(option.id) === String(chainId))
|
||||
chainName = selected ? selected.text : ''
|
||||
}
|
||||
return {
|
||||
chainId: chainId ?? '',
|
||||
chainName: chainName || '-'
|
||||
}
|
||||
},
|
||||
parseJsonMaybe(value) {
|
||||
if (value === null || value === undefined || value === '') return []
|
||||
if (typeof value === 'string') {
|
||||
try {
|
||||
return JSON.parse(value)
|
||||
} catch (err) {
|
||||
return []
|
||||
}
|
||||
}
|
||||
return value
|
||||
},
|
||||
resolveReceiptImages(item = {}) {
|
||||
const candidates = [
|
||||
item.image,
|
||||
item.images,
|
||||
item.receiptPhoto,
|
||||
item.receiptPhotos,
|
||||
item.receipt_photo,
|
||||
item.receipt_photos
|
||||
]
|
||||
const urls = []
|
||||
candidates.forEach(value => {
|
||||
this.appendReceiptValue(urls, value)
|
||||
})
|
||||
const unique = Array.from(new Set(urls.filter(url => /^https?:\/\//.test(url) || /^\/\//.test(url))))
|
||||
return unique
|
||||
},
|
||||
appendReceiptValue(target, value) {
|
||||
if (value === null || value === undefined || value === '') return
|
||||
if (Array.isArray(value)) {
|
||||
value.forEach(item => this.appendReceiptValue(target, item))
|
||||
return
|
||||
}
|
||||
if (typeof value === 'object') {
|
||||
const url = value.url || value.path || value.src || value.image || value.img
|
||||
if (url) this.appendReceiptValue(target, url)
|
||||
return
|
||||
}
|
||||
const text = String(value).trim()
|
||||
if (!text) return
|
||||
if (text.startsWith('[') || text.startsWith('{')) {
|
||||
try {
|
||||
const parsed = JSON.parse(text)
|
||||
this.appendReceiptValue(target, parsed)
|
||||
return
|
||||
} catch (err) {
|
||||
}
|
||||
}
|
||||
if (text.includes(',')) {
|
||||
text.split(',').forEach(part => this.appendReceiptValue(target, part))
|
||||
return
|
||||
}
|
||||
target.push(text)
|
||||
},
|
||||
parseDateToTimestamp(value) {
|
||||
if (value === null || value === undefined || value === '') return NaN
|
||||
const raw = String(value).trim()
|
||||
if (!raw) return NaN
|
||||
if (/^-?\d+(\.\d+)?$/.test(raw)) {
|
||||
const num = Number(raw)
|
||||
if (!Number.isFinite(num)) return NaN
|
||||
const millis = Math.abs(num) < 1e12 ? num * 1000 : num
|
||||
return millis
|
||||
}
|
||||
const parsed = dayjs(raw)
|
||||
if (!parsed.isValid()) return NaN
|
||||
return parsed.valueOf()
|
||||
},
|
||||
normalizeMerchantChain(item, index) {
|
||||
const chainName = this.pickFirstText(item, ['chainName', 'chain', 'chainAbb', 'name', 'title']) || `连锁${index + 1}`
|
||||
const rawChainId = item.chainId ?? item.chain_id ?? item.id ?? item.chainCode ?? item.chain_code ?? ''
|
||||
const chainId = rawChainId === undefined || rawChainId === null || String(rawChainId).trim() === ''
|
||||
? `chain_${index}`
|
||||
: rawChainId
|
||||
const childCandidates = ['children', 'merchantList', 'merchants', 'shopList', 'list', 'records']
|
||||
let rawChildren = []
|
||||
for (let i = 0; i < childCandidates.length; i++) {
|
||||
const list = item[childCandidates[i]]
|
||||
if (Array.isArray(list) && list.length) {
|
||||
rawChildren = list
|
||||
break
|
||||
}
|
||||
}
|
||||
const merchants = rawChildren
|
||||
.map(child => this.normalizeMerchant(child))
|
||||
.filter(merchant => merchant.id !== undefined && merchant.id !== null && String(merchant.id).trim() !== '')
|
||||
return {
|
||||
id: chainId,
|
||||
text: chainName,
|
||||
merchants
|
||||
}
|
||||
},
|
||||
normalizeMerchant(item) {
|
||||
const id = item.id ?? item.merchantId ?? item.merchant_id
|
||||
const text = item.name || item.merchantName || item.merchant_name || item.title || '未命名门店'
|
||||
return {
|
||||
id,
|
||||
text
|
||||
}
|
||||
},
|
||||
pickFirstText(source, keys = []) {
|
||||
if (!source || typeof source !== 'object') return ''
|
||||
for (let i = 0; i < keys.length; i++) {
|
||||
const value = source[keys[i]]
|
||||
if (value !== undefined && value !== null && String(value).trim()) {
|
||||
return String(value).trim()
|
||||
}
|
||||
}
|
||||
return ''
|
||||
},
|
||||
unwrapList(data) {
|
||||
if (Array.isArray(data)) return data
|
||||
if (!data || typeof data !== 'object') return []
|
||||
const keys = ['list', 'records', 'rows', 'items', 'data', 'result', 'chainList']
|
||||
for (let i = 0; i < keys.length; i++) {
|
||||
const value = data[keys[i]]
|
||||
if (Array.isArray(value)) return value
|
||||
if (value && typeof value === 'object') {
|
||||
const nested = this.unwrapList(value)
|
||||
if (nested.length) return nested
|
||||
}
|
||||
}
|
||||
return [data]
|
||||
},
|
||||
formatPrice(value) {
|
||||
const num = Number(value || 0)
|
||||
return num.toFixed(2)
|
||||
},
|
||||
resolveExtraIncome(source = {}) {
|
||||
const candidates = [
|
||||
source.extraIncome,
|
||||
source.extra_income,
|
||||
source.extraBonus,
|
||||
source.extra_bonus,
|
||||
source.otherIncome,
|
||||
source.other_income
|
||||
]
|
||||
for (let i = 0; i < candidates.length; i++) {
|
||||
const raw = candidates[i]
|
||||
if (raw === '' || raw === null || raw === undefined) continue
|
||||
const num = Number(raw)
|
||||
if (Number.isFinite(num)) return num
|
||||
}
|
||||
return 0
|
||||
},
|
||||
hasExtraIncome(source = {}) {
|
||||
return this.resolveExtraIncome(source) !== 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../audit/components/record.scss';
|
||||
|
||||
.my-share-page {
|
||||
min-height: 100vh;
|
||||
//padding: 0 20rpx 40rpx;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.page-hero {
|
||||
//padding: 30rpx 6rpx 18rpx;
|
||||
background: url('https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/462bfa04cf0eff8698884c38b9d17519.png') no-repeat
|
||||
top center / 100% auto;
|
||||
}
|
||||
|
||||
.page-navbar {
|
||||
padding: 0 6rpx;
|
||||
}
|
||||
|
||||
.intro-card {
|
||||
margin: 18rpx 20rpx 0;
|
||||
padding: 20rpx 18rpx;
|
||||
border-radius: 20rpx;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
width: 6rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #2fc6a7;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
margin-top: 12rpx;
|
||||
font-size: 26rpx;
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin: 18rpx 20rpx 0;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
margin-top: 14rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.filter-chip {
|
||||
padding: 8rpx 18rpx;
|
||||
border-radius: 999rpx;
|
||||
border: 1rpx solid #2fc6a7;
|
||||
color: #2fc6a7;
|
||||
font-size: 22rpx;
|
||||
background: #f3fffb;
|
||||
}
|
||||
|
||||
.keyword-row {
|
||||
margin-top: 14rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.keyword-input {
|
||||
flex: 1;
|
||||
height: 64rpx;
|
||||
border-radius: 14rpx;
|
||||
border: 1rpx solid #d1d5db;
|
||||
background: #ffffff;
|
||||
padding: 0 16rpx;
|
||||
font-size: 24rpx;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.keyword-placeholder {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
min-width: 96rpx;
|
||||
height: 64rpx;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 14rpx;
|
||||
border: 1rpx solid #d1d5db;
|
||||
color: #6b7280;
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.filter-btn.primary {
|
||||
border-color: #2fc6a7;
|
||||
background: #2fc6a7;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.record-toggle {
|
||||
margin-top: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 4rpx;
|
||||
font-size: 24rpx;
|
||||
color: #2fc6a7;
|
||||
}
|
||||
|
||||
.disabled-chip {
|
||||
color: #9ca3af;
|
||||
border-color: #e5e7eb;
|
||||
background: #f3f4f6;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: var(--text-sub);
|
||||
text-align: center;
|
||||
padding: 16rpx 0;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,748 @@
|
||||
<template>
|
||||
<view class="visit-page">
|
||||
<view class="page-hero">
|
||||
<AppNavbar title="客户拜访" show-back/>
|
||||
<view class="intro-card">
|
||||
<view class="card-title">
|
||||
<view class="title-bar"></view>
|
||||
<text>培训拜访</text>
|
||||
</view>
|
||||
<text class="intro-text">记录培训拜访现场定位、沟通内容和照片，提交后可回看历史记录。</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card block">
|
||||
<view class="section-title">新增拜访</view>
|
||||
<view class="form">
|
||||
<view class="form-row location-row">
|
||||
<text>定位信息</text>
|
||||
<view class="location-box">
|
||||
<view class="picker-value location-text" :class="{placeholder: !visitForm.location}">
|
||||
{{ visitForm.location || '定位中，或点击右侧重新定位' }}
|
||||
</view>
|
||||
<view class="location-meta">
|
||||
<text>{{ formatCoordinate('纬度', visitForm.lat) }}</text>
|
||||
<text>{{ formatCoordinate('经度', visitForm.lng) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="refresh-btn" @tap="fetchLocation(false, true)">重新定位</view>
|
||||
</view>
|
||||
|
||||
<view class="form-row">
|
||||
<text>连锁</text>
|
||||
<view class="selector-picker" @tap="openChainPicker">
|
||||
<view class="picker-value" :class="{placeholder: !visitForm.chain}">
|
||||
{{ visitForm.chain || (chainLoading ? '连锁加载中...' : '请选择连锁') }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-row">
|
||||
<text>拜访人员</text>
|
||||
<input v-model="visitForm.name" maxlength="30" placeholder="请输入拜访人员"/>
|
||||
</view>
|
||||
|
||||
<view class="form-row textarea-row">
|
||||
<text>沟通内容</text>
|
||||
<textarea
|
||||
v-model="visitForm.content"
|
||||
class="textarea-input"
|
||||
maxlength="500"
|
||||
auto-height
|
||||
placeholder="请输入沟通内容"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="upload" @tap="uploadPhotos">
|
||||
<view>
|
||||
<view class="upload-title">拍照上传</view>
|
||||
<view class="upload-meta">{{ photos.length ? `已上传 ${photos.length} 张，点击继续拍照` : '点击拍照上传，最多 9 张' }}</view>
|
||||
</view>
|
||||
<view class="chip">必填</view>
|
||||
</view>
|
||||
|
||||
<view v-if="photos.length" class="photo-list">
|
||||
<view class="photo-item" v-for="(photo, index) in photos" :key="`${photo}-${index}`">
|
||||
<image class="photo-image" :src="photo" mode="aspectFill" @tap="previewPhoto(index)"/>
|
||||
<view class="photo-remove" @tap.stop="removePhoto(index)">x</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-row textarea-row">
|
||||
<text>活动小结</text>
|
||||
<textarea
|
||||
v-model="visitForm.summary"
|
||||
class="textarea-input"
|
||||
maxlength="300"
|
||||
auto-height
|
||||
placeholder="请输入活动小结"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="primary-btn submit" @tap="submitVisit">提交拜访</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card block">
|
||||
<view class="section-title">历史记录</view>
|
||||
<view v-if="loading" class="empty">加载中...</view>
|
||||
<view v-else-if="visitHistory.length === 0" class="empty">暂无记录</view>
|
||||
<view v-else>
|
||||
<view class="history" v-for="item in visitHistory" :key="item.id">
|
||||
<view class="history-head" @tap="toggleHistoryDetail(item.id)">
|
||||
<view class="history-main">
|
||||
<view class="history-title">{{ item.name || '未命名拜访' }}</view>
|
||||
<view class="history-meta">{{ item.createdAt || '暂无时间' }}</view>
|
||||
</view>
|
||||
<view class="history-side">
|
||||
<view class="history-status" :class="item.statusClass">{{ item.status }}</view>
|
||||
<u-icon name="arrow-right" size="24" color="#9ca3af" :class="['history-arrow', item.expanded ? 'open' : '']"/>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item.expanded" class="history-detail">
|
||||
<view class="history-line">定位：{{ item.location || '-' }}</view>
|
||||
<view class="history-line">纬度：{{ item.lat || '-' }}</view>
|
||||
<view class="history-line">经度：{{ item.lng || '-' }}</view>
|
||||
<view class="history-line">连锁：{{ item.chain || '-' }}</view>
|
||||
<view class="history-line">沟通内容：{{ item.content || '-' }}</view>
|
||||
<view class="history-line">活动小结：{{ item.summary || '-' }}</view>
|
||||
<view class="history-line">照片：</view>
|
||||
<view v-if="item.photos.length" class="history-photo-list">
|
||||
<view class="history-photo-item" v-for="(photo, photoIndex) in item.photos" :key="`${item.id}-${photoIndex}`">
|
||||
<image
|
||||
class="history-photo-image"
|
||||
:src="photo"
|
||||
mode="aspectFill"
|
||||
@tap="previewHistoryPhoto(item.photos, photoIndex)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="history-line">-</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-picker
|
||||
:show="showChainPicker"
|
||||
:columns="[chainOptions]"
|
||||
:loading="chainLoading"
|
||||
:defaultIndex="chainPickerIndex"
|
||||
keyName="text"
|
||||
@confirm="onChainConfirm"
|
||||
@cancel="closeChainPicker"
|
||||
@close="closeChainPicker"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppNavbar from "@/components/AppNavbar.vue";
|
||||
import {chooseImg, getLocationOnly} from "@/util";
|
||||
import {visitAddReq, visitListReq} from "@/api/visit";
|
||||
import {merchantGroupByChainReq} from "@/api/shop";
|
||||
|
||||
export default {
|
||||
components: {AppNavbar},
|
||||
data() {
|
||||
return {
|
||||
visitForm: this.buildForm(),
|
||||
photos: [],
|
||||
visitHistory: [],
|
||||
chainOptions: [],
|
||||
chainLoading: false,
|
||||
showChainPicker: false,
|
||||
loading: false,
|
||||
locating: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
chainPickerIndex() {
|
||||
if (!this.chainOptions.length) return [0]
|
||||
const idx = this.chainOptions.findIndex(item => String(item.id) === String(this.visitForm.chainId))
|
||||
return [idx < 0 ? 0 : idx]
|
||||
}
|
||||
},
|
||||
async onShow() {
|
||||
await Promise.all([
|
||||
this.fetchLocation(true),
|
||||
this.fetchHistory(),
|
||||
this.fetchChainOptions()
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
buildForm() {
|
||||
return {
|
||||
lat: '',
|
||||
lng: '',
|
||||
location: '',
|
||||
chainId: '',
|
||||
chain: '',
|
||||
name: '',
|
||||
content: '',
|
||||
summary: ''
|
||||
}
|
||||
},
|
||||
async fetchChainOptions() {
|
||||
this.chainLoading = true
|
||||
try {
|
||||
const {data} = await merchantGroupByChainReq()
|
||||
const list = this.unwrapList(data)
|
||||
this.chainOptions = list.map((item, index) => this.normalizeChainOption(item, index))
|
||||
.filter(item => item.id !== undefined && item.id !== null && String(item.id).trim() !== '')
|
||||
if (this.visitForm.chainId && !this.chainOptions.find(item => String(item.id) === String(this.visitForm.chainId))) {
|
||||
this.visitForm.chainId = ''
|
||||
this.visitForm.chain = ''
|
||||
}
|
||||
} catch (err) {
|
||||
this.chainOptions = []
|
||||
} finally {
|
||||
this.chainLoading = false
|
||||
}
|
||||
},
|
||||
openChainPicker() {
|
||||
this.showChainPicker = true
|
||||
},
|
||||
closeChainPicker() {
|
||||
this.showChainPicker = false
|
||||
},
|
||||
onChainConfirm(event) {
|
||||
const selected = event && event.value && event.value.length ? event.value[0] : null
|
||||
this.visitForm.chainId = selected ? selected.id : ''
|
||||
this.visitForm.chain = selected ? selected.text : ''
|
||||
this.showChainPicker = false
|
||||
},
|
||||
formatCoordinate(label, value) {
|
||||
if (value === '' || value === null || value === undefined) return `${label}：-`
|
||||
return `${label}：${value}`
|
||||
},
|
||||
async fetchLocation(silent = false, force = false) {
|
||||
if (this.locating) return
|
||||
if (!force && this.visitForm.location && this.visitForm.lat && this.visitForm.lng) return
|
||||
this.locating = true
|
||||
if (!silent) {
|
||||
uni.showLoading({
|
||||
title: '定位中'
|
||||
})
|
||||
}
|
||||
try {
|
||||
const res = await getLocationOnly()
|
||||
this.visitForm.lat = res.latitude
|
||||
this.visitForm.lng = res.longitude
|
||||
this.visitForm.location = res.full || [res.province_str, res.city_str, res.area_str].filter(Boolean).join(' ')
|
||||
} catch (err) {
|
||||
if (!silent) {
|
||||
uni.showToast({
|
||||
title: '定位失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
} finally {
|
||||
if (!silent) uni.hideLoading()
|
||||
this.locating = false
|
||||
}
|
||||
},
|
||||
async uploadPhotos() {
|
||||
const remain = 9 - this.photos.length
|
||||
if (remain <= 0) {
|
||||
uni.showToast({
|
||||
title: '最多上传9张',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
const res = await chooseImg(remain, ['camera'])
|
||||
this.photos = [
|
||||
...this.photos,
|
||||
...res.map(item => item.path).filter(Boolean)
|
||||
]
|
||||
},
|
||||
removePhoto(index) {
|
||||
this.photos.splice(index, 1)
|
||||
},
|
||||
previewPhoto(index) {
|
||||
if (!this.photos.length) return
|
||||
uni.previewImage({
|
||||
urls: this.photos,
|
||||
current: this.photos[index] || this.photos[0]
|
||||
})
|
||||
},
|
||||
async submitVisit() {
|
||||
if (!this.visitForm.lat || !this.visitForm.lng || !this.visitForm.location) {
|
||||
uni.showToast({
|
||||
title: '请先获取定位',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.visitForm.chainId || !this.visitForm.chain) {
|
||||
uni.showToast({
|
||||
title: '请选择连锁',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.visitForm.name || !this.visitForm.content || !this.photos.length || !this.visitForm.summary) {
|
||||
uni.showToast({
|
||||
title: '请填写完整信息',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
try {
|
||||
await visitAddReq({
|
||||
lat: this.visitForm.lat,
|
||||
lng: this.visitForm.lng,
|
||||
location: this.visitForm.location,
|
||||
chainId: this.visitForm.chainId,
|
||||
chain: this.visitForm.chain,
|
||||
name: this.visitForm.name,
|
||||
content: this.visitForm.content,
|
||||
photos: JSON.stringify(this.photos),
|
||||
summary: this.visitForm.summary
|
||||
})
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'success'
|
||||
})
|
||||
const locationSnapshot = {
|
||||
lat: this.visitForm.lat,
|
||||
lng: this.visitForm.lng,
|
||||
location: this.visitForm.location,
|
||||
chainId: this.visitForm.chainId,
|
||||
chain: this.visitForm.chain
|
||||
}
|
||||
this.visitForm = {
|
||||
...this.buildForm(),
|
||||
...locationSnapshot
|
||||
}
|
||||
this.photos = []
|
||||
await this.fetchHistory()
|
||||
} catch (err) {
|
||||
uni.showToast({
|
||||
title: '提交失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
async fetchHistory() {
|
||||
this.loading = true
|
||||
try {
|
||||
const {data} = await visitListReq()
|
||||
const list = Array.isArray(data) ? data : (data && data.list ? data.list : [])
|
||||
this.visitHistory = list.map(this.normalizeHistory)
|
||||
} catch (err) {
|
||||
uni.showToast({
|
||||
title: '记录加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
normalizeHistory(item) {
|
||||
const statusValue = Number(item.status)
|
||||
let status = '待处理'
|
||||
let statusClass = 'pending'
|
||||
if (statusValue === 0) {
|
||||
status = '审核中'
|
||||
statusClass = 'pending'
|
||||
} else if (statusValue === 1) {
|
||||
status = '已通过'
|
||||
statusClass = 'success'
|
||||
} else if (statusValue === 2 || statusValue === 3) {
|
||||
status = '已驳回'
|
||||
statusClass = 'reject'
|
||||
} else if (item.statusText || item.status_text) {
|
||||
status = item.statusText || item.status_text
|
||||
statusClass = ''
|
||||
}
|
||||
return {
|
||||
id: item.id,
|
||||
name: item.name || item.visitName || '',
|
||||
content: item.content || item.remark || '',
|
||||
summary: item.summary || item.result || '',
|
||||
location: item.location || item.address || '',
|
||||
lat: item.lat || item.latitude || '',
|
||||
lng: item.lng || item.longitude || '',
|
||||
chainId: item.chainId || item.chain_id || item.chainCode || item.chain_code || '',
|
||||
chain: item.chain || item.chain_name || item.chain || item.chainAbb || '',
|
||||
photos: this.parsePhotos(item.photos || item.images || item.image),
|
||||
createdAt: item.createTime || item.createdAt || item.create_date || '',
|
||||
status,
|
||||
statusClass,
|
||||
expanded: false
|
||||
}
|
||||
},
|
||||
parsePhotos(value) {
|
||||
if (value === null || value === undefined || value === '') return []
|
||||
if (Array.isArray(value)) {
|
||||
return value.map(item => {
|
||||
if (!item) return ''
|
||||
if (typeof item === 'string') return item
|
||||
return item.url || item.path || item.image || item.img || ''
|
||||
}).filter(Boolean)
|
||||
}
|
||||
if (typeof value === 'object') {
|
||||
const url = value.url || value.path || value.image || value.img
|
||||
return url ? [url] : []
|
||||
}
|
||||
const text = String(value).trim()
|
||||
if (!text) return []
|
||||
if (text.startsWith('[') || text.startsWith('{')) {
|
||||
try {
|
||||
return this.parsePhotos(JSON.parse(text))
|
||||
} catch (err) {
|
||||
}
|
||||
}
|
||||
if (text.includes(',')) {
|
||||
return text.split(',').map(item => item.trim()).filter(Boolean)
|
||||
}
|
||||
return [text]
|
||||
},
|
||||
toggleHistoryDetail(id) {
|
||||
this.visitHistory = this.visitHistory.map(item => {
|
||||
if (item.id !== id) return item
|
||||
return {
|
||||
...item,
|
||||
expanded: !item.expanded
|
||||
}
|
||||
})
|
||||
},
|
||||
previewHistoryPhoto(list = [], index = 0) {
|
||||
if (!Array.isArray(list) || !list.length) return
|
||||
uni.previewImage({
|
||||
urls: list,
|
||||
current: list[index] || list[0]
|
||||
})
|
||||
},
|
||||
normalizeChainOption(item, index) {
|
||||
const text = item.chain || item.chain || item.chainAbb || item.name || item.title || item.text || `连锁${index + 1}`
|
||||
const rawId = item.chainId ?? item.chain_id ?? item.id ?? item.chainCode ?? item.chain_code ?? ''
|
||||
const id = rawId === undefined || rawId === null || String(rawId).trim() === ''
|
||||
? `chain_${index}`
|
||||
: rawId
|
||||
return {
|
||||
id,
|
||||
text
|
||||
}
|
||||
},
|
||||
unwrapList(data) {
|
||||
if (Array.isArray(data)) return data
|
||||
if (!data || typeof data !== 'object') return []
|
||||
const keys = ['list', 'records', 'rows', 'items', 'data', 'result', 'chainList']
|
||||
for (let i = 0; i < keys.length; i++) {
|
||||
const value = data[keys[i]]
|
||||
if (Array.isArray(value)) return value
|
||||
if (value && typeof value === 'object') {
|
||||
const nested = this.unwrapList(value)
|
||||
if (nested.length) return nested
|
||||
}
|
||||
}
|
||||
return [data]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.visit-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.page-hero {
|
||||
background: url('https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/462bfa04cf0eff8698884c38b9d17519.png') no-repeat top center / 100% auto;
|
||||
}
|
||||
|
||||
.intro-card {
|
||||
margin: 18rpx 20rpx 0;
|
||||
padding: 20rpx 18rpx;
|
||||
border-radius: 20rpx;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
width: 6rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #2f78ff;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
margin-top: 12rpx;
|
||||
font-size: 26rpx;
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin: 18rpx 20rpx 0;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
padding: 12rpx 0;
|
||||
border-bottom: 1rpx solid #edf1f7;
|
||||
}
|
||||
|
||||
.form-row input {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.selector-picker {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.selector-picker .picker-value {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.location-row {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.location-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.picker-value {
|
||||
color: var(--text-main);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.picker-value.placeholder {
|
||||
color: var(--text-sub);
|
||||
}
|
||||
|
||||
.location-text {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.location-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 4rpx;
|
||||
font-size: 22rpx;
|
||||
color: var(--text-sub);
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
flex-shrink: 0;
|
||||
margin-top: 2rpx;
|
||||
padding: 8rpx 18rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #eef4ff;
|
||||
color: #2f78ff;
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.textarea-row {
|
||||
align-items: flex-start;
|
||||
padding-top: 16rpx;
|
||||
}
|
||||
|
||||
.textarea-input {
|
||||
flex: 1;
|
||||
min-height: 120rpx;
|
||||
text-align: right;
|
||||
font-size: 26rpx;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.upload {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12rpx 0;
|
||||
border-bottom: 1rpx solid #edf1f7;
|
||||
}
|
||||
|
||||
.upload-title {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.upload-meta {
|
||||
color: var(--text-sub);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.photo-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.photo-item {
|
||||
position: relative;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.photo-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.photo-remove {
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
right: 8rpx;
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
color: #ffffff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.submit {
|
||||
margin-top: 12rpx;
|
||||
padding: 14rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.history {
|
||||
padding: 12rpx 0;
|
||||
border-bottom: 1rpx solid #edf1f7;
|
||||
}
|
||||
|
||||
.history:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.history-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.history-main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.history-title {
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.history-meta {
|
||||
color: var(--text-sub);
|
||||
font-size: 24rpx;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.history-side {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.history-status {
|
||||
font-weight: 700;
|
||||
color: #ff8354;
|
||||
}
|
||||
|
||||
.history-status.success {
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.history-status.reject {
|
||||
color: #ff3b30;
|
||||
}
|
||||
|
||||
.history-arrow {
|
||||
transform: rotate(0deg);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.history-arrow.open {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.history-detail {
|
||||
margin-top: 10rpx;
|
||||
padding: 12rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.history-line {
|
||||
margin-top: 6rpx;
|
||||
font-size: 24rpx;
|
||||
color: #4b5563;
|
||||
line-height: 1.6;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.history-line:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.history-photo-list {
|
||||
margin-top: 10rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.history-photo-item {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.history-photo-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: var(--text-sub);
|
||||
text-align: center;
|
||||
padding: 16rpx 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user