(Update API paths, adjust configurations, and optimize user and order management functions)
This commit is contained in:
parent
239f86d81c
commit
f854776f34
|
|
@ -0,0 +1,234 @@
|
|||
<!-- 订单详情 -->
|
||||
<template>
|
||||
<el-drawer v-model="showDetail" direction="rtl" :destroy-on-close="true" title="订单详情" size="50%">
|
||||
<template #header>
|
||||
<h4>订单详情</h4>
|
||||
</template>
|
||||
<template #default>
|
||||
<!-- head -->
|
||||
<div class="flex">
|
||||
<el-image class="w-[50px] h-[50px]" :src="url" :fit="fit" />
|
||||
<div class="flex flex-col ml-3 justify-between">
|
||||
<div style="font-size:16px">
|
||||
{{ orderType ? '【收银订单】' : '售后订单' }}
|
||||
</div>
|
||||
<div>
|
||||
订单编号： {{ detailData.order_id }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="flex justify-between w-[70%] mt-[20px]">
|
||||
<li>
|
||||
<div>订单状态</div>
|
||||
<div>{{ orderType ? detailData.status_name : detailData.refund_status_name }}</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>实际支付</div>
|
||||
<div>{{ detailData.pay_price }}</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>支付方式</div>
|
||||
<div>{{ detailData.pay_type }}</div>
|
||||
</li>
|
||||
<li v-if="orderType">
|
||||
<div>支付时间</div>
|
||||
<div>{{ detailData.pay_time }}</div>
|
||||
</li>
|
||||
|
||||
<li v-if="!orderType">
|
||||
<div>退款件数</div>
|
||||
<!-- <div>{{ detailData.pay_time }}</div> -->
|
||||
</li>
|
||||
|
||||
<li v-if="!orderType">
|
||||
<div>退款时间</div>
|
||||
<!-- <div>{{ detailData.pay_time }}</div> -->
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- content -->
|
||||
<el-tabs v-model="activeName" class="mt-[20px]">
|
||||
<el-tab-pane label="订单信息" name="first">
|
||||
<el-descriptions :column="3" border :title="item.title" class="mb-[30px]"
|
||||
v-for="(item, index) in orderInfoCongig" :key="index" v-show="item.isShow">
|
||||
<el-descriptions-item :label="el.name" label-class-name="my-label" v-for="el in item.child">
|
||||
{{ el.value }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="商品信息" name="second">
|
||||
<el-table border :data="detailData.product">
|
||||
<el-table-column label="商品信息" prop="build_area_text" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<div class="flex w-[300px] items-center">
|
||||
<el-image class="w-[50px] h-[50px] mr-2" :src="row.cart_info.image" />
|
||||
<span> {{ row.cart_info.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="价格" prop="cart_info.price" show-overflow-tooltip />
|
||||
<el-table-column label="数量" prop="cart_info.cart_num" show-overflow-tooltip width="120" />
|
||||
<el-table-column label="小计" prop="cart_info.total" show-overflow-tooltip />
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- <el-tab-pane label="订单记录" name="third">
|
||||
<el-table border :data="formData.detail2">
|
||||
<el-table-column label="订单id" prop="project_level_text" show-overflow-tooltip />
|
||||
<el-table-column label="操作记录" prop="total_investment" show-overflow-tooltip width="120" />
|
||||
<el-table-column label="操作时间" prop="engineering_status_text" show-overflow-tooltip />
|
||||
</el-table>
|
||||
</el-tab-pane> -->
|
||||
</el-tabs>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, defineEmits, defineProps, onMounted } from "vue"
|
||||
|
||||
const showDetail = ref(false)
|
||||
const url =
|
||||
'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
|
||||
const props = defineProps({
|
||||
detailData: {
|
||||
type: Object,
|
||||
},
|
||||
// 0为退款，1为收银订单
|
||||
orderType: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
const orderInfoCongig = ref(
|
||||
[
|
||||
{
|
||||
title: '退款原因',
|
||||
isShow: props.orderType == 0,
|
||||
child: [
|
||||
{
|
||||
name: "退款原因",
|
||||
value: props.detailData?.refund_reason
|
||||
},
|
||||
{
|
||||
name: "退款金额",
|
||||
value: props.detailData?.refund_price
|
||||
},
|
||||
{
|
||||
name: "退款说明",
|
||||
value: props.detailData?.refund_reason_wap_explain
|
||||
},
|
||||
// {
|
||||
// name: "退款凭证",
|
||||
// value: props.detailData?.mobile
|
||||
// },
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: '用户信息',
|
||||
isShow: true,
|
||||
child: [
|
||||
{
|
||||
name: "用户昵称",
|
||||
value: props.detailData?.nickname
|
||||
},
|
||||
{
|
||||
name: "绑定电话",
|
||||
value: props.detailData?.mobile
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '收货人信息',
|
||||
isShow: true,
|
||||
child: [
|
||||
{
|
||||
name: "收货人",
|
||||
value: props.detailData?.real_name
|
||||
},
|
||||
{
|
||||
name: "收获电话",
|
||||
value: props.detailData?.user_phone
|
||||
},
|
||||
{
|
||||
name: "收获地址",
|
||||
value: props.detailData?.user_address
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '订单信息',
|
||||
isShow: true,
|
||||
child: [
|
||||
{
|
||||
name: "创建时间",
|
||||
value: props.detailData?.create_time
|
||||
},
|
||||
{
|
||||
name: "商品总数",
|
||||
value: props.detailData?.total_num
|
||||
},
|
||||
{
|
||||
name: "商品总价",
|
||||
value: props.detailData?.total_price
|
||||
},
|
||||
{
|
||||
name: "店员名称",
|
||||
value: props.detailData?.staff_name
|
||||
},
|
||||
// {
|
||||
// name: "会员商品优惠",
|
||||
// value: " props.detailData?.total_num"
|
||||
// },
|
||||
|
||||
{
|
||||
name: "支付时间",
|
||||
value: props.detailData?.pay_time
|
||||
},
|
||||
{
|
||||
name: "支付方式",
|
||||
value: props.detailData?.pay_type
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '订单备注',
|
||||
isShow: true,
|
||||
child: [
|
||||
{
|
||||
name: "备注",
|
||||
value: props.detailData?.remark
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
])
|
||||
|
||||
const activeName = 'first'
|
||||
|
||||
|
||||
|
||||
const open = () => {
|
||||
showDetail.value = true
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
showDetail.value = false
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
close
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-card class="!border-none mb-4" shadow="never">
|
||||
<el-form class="mb-[-16px]" :model="queryParams" label-width="80px">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="时间筛选">
|
||||
<el-date-picker v-model="date" type="daterange" range-separator="-" start-placeholder="开始时间"
|
||||
end-placeholder="结束时间" value-format="YYYY-MM-DD" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="店员">
|
||||
<el-select class="flex-1" v-model="queryParams.staff_id" placeholder="请选择店员">
|
||||
<el-option :label="item.staff_name" :value="item.id" v-for="(item, index) in staffList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="用户搜索">
|
||||
<el-input v-model="queryParams.order_id" clearable placeholder="请输入订单编号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleResetPage">查询</el-button>
|
||||
<el-button @click="handleResetParams">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card class="!border-none" v-loading="pager.loading" shadow="never">
|
||||
<div class="mt-4">
|
||||
<el-table :data="pager.lists">
|
||||
<el-table-column label="订单号" prop="order_id" show-overflow-tooltip />
|
||||
<el-table-column label="用户信息" prop="build_area_text" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<div class="flex items-center">
|
||||
<el-image style="width: 50px; height: 50px" :src="row.avatar" class="mr-2" />
|
||||
{{ row.nickname }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="支付金额" prop="" show-overflow-tooltip />
|
||||
<el-table-column label="充值类型" prop="" show-overflow-tooltip />
|
||||
<el-table-column label="支付时间" prop="" show-overflow-tooltip />
|
||||
<el-table-column label="关联店员" prop="" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="170" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="handleRe(row)">
|
||||
备注
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="flex mt-4 justify-end">
|
||||
<pagination v-model="pager" @change="getLists" />
|
||||
</div>
|
||||
</el-card>
|
||||
<el-dialog title="添加备注" v-model="showDialog" width="550px">
|
||||
<el-form-item>
|
||||
<el-input v-model="remarks" type="textarea" placeholder="请输入备注内容"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleRemarks">确定</el-button>
|
||||
<el-button @click="showDialog = false">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="manageProjectLists">
|
||||
import orderDetail from './../../components/orderDetail/index.vue'
|
||||
import { ref, reactive } from 'vue'
|
||||
import { usePaging } from '@/hooks/usePaging'
|
||||
import { apiStoreOrderLists, apiStoreOrderDetail, apiStoreOrderTitle } from '@/api/store_order'
|
||||
import feedback from '@/utils/feedback'
|
||||
|
||||
// 查询条件
|
||||
const queryParams = reactive({
|
||||
order_id: "",
|
||||
pay_type: "",
|
||||
start_time: "",
|
||||
end_time: '',
|
||||
status: "",
|
||||
staff_id: ""
|
||||
|
||||
})
|
||||
|
||||
const date = ref([])
|
||||
const showDetail = ref(false)
|
||||
|
||||
// 核销
|
||||
const handleWriteOff = async (id: number) => {
|
||||
await feedback.confirm('确定要核销订单吗？')
|
||||
// await adminDelete({ id })
|
||||
getLists()
|
||||
}
|
||||
|
||||
|
||||
// 分页相关
|
||||
const { pager, getLists, resetParams, resetPage } = usePaging({
|
||||
fetchFun: apiStoreOrderLists,
|
||||
params: queryParams
|
||||
})
|
||||
|
||||
const handleResetPage = () => {
|
||||
if (date.value.length) {
|
||||
queryParams.start_time = date.value[0]
|
||||
queryParams.end_time = date.value[1]
|
||||
}
|
||||
resetPage()
|
||||
}
|
||||
|
||||
|
||||
const handleResetParams = () => {
|
||||
date.value = []
|
||||
resetParams()
|
||||
}
|
||||
|
||||
const detailRef = ref(null)
|
||||
const detailData = ref({})
|
||||
// 编辑
|
||||
const handleDetail = async (id: any) => {
|
||||
let res = await apiStoreOrderDetail({ id })
|
||||
console.log(res)
|
||||
detailData.value = res
|
||||
showDetail.value = true
|
||||
await nextTick()
|
||||
detailRef.value.open()
|
||||
}
|
||||
|
||||
|
||||
const payTypeList = ref([])
|
||||
const staffList = ref([])
|
||||
const order_status = ref({
|
||||
finish: '',
|
||||
wait_receive: '',
|
||||
wait_send: ""
|
||||
})
|
||||
|
||||
const getTitle = async () => {
|
||||
let res = await await apiStoreOrderTitle()
|
||||
payTypeList.value = res.pay_type
|
||||
staffList.value = res.staff
|
||||
order_status.value = res.order_status
|
||||
}
|
||||
|
||||
// getTitle()
|
||||
|
||||
|
||||
|
||||
const showDialog = ref(false)
|
||||
const remarks = ref('')
|
||||
const rows = ref({})
|
||||
|
||||
const handleRe = (row) => {
|
||||
showDialog.value = true
|
||||
rows.value = row
|
||||
}
|
||||
|
||||
const handleRemarks = async (row: any) => {
|
||||
await apiStorFinanceFlowRemarks({ row })
|
||||
showDialog.value = false
|
||||
}
|
||||
|
||||
getLists()
|
||||
</script>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
|
||||
export function apiStoreOrderLists(params: any) {
|
||||
return request.get({ url: '/store_order/storeOrder/lists', params })
|
||||
}
|
||||
|
||||
export function apiStoreOrderTitle() {
|
||||
return request.get({ url: '/store_order/storeOrder/title' })
|
||||
}
|
||||
|
||||
export function apiStoreOrderDetail(params: any) {
|
||||
return request.get({ url: '/store_order/storeOrder/detail', params })
|
||||
}
|
||||
|
||||
|
||||
export function apiStoreRefundOrderLists(params: any) {
|
||||
return request.get({ url: '/store_order/storeRefundOrder/lists', params })
|
||||
}
|
||||
|
||||
export function apiStoreRefundOrderDetail(params: any) {
|
||||
return request.get({ url: '/store_order/storeRefundOrder/detail', params })
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 商品列表
|
||||
export function apiTableLists(params: any) {
|
||||
return request.get({ url: '/store_product/storeProduct/lists', params })
|
||||
}
|
||||
|
||||
|
|
@ -27,4 +27,7 @@ export function apiStatus(params: any) {
|
|||
return request.post({ url: '/store_product/storeProduct/status', params })
|
||||
}
|
||||
|
||||
//
|
||||
// 店员列表
|
||||
export function apiStaffLists() {
|
||||
return request.get({ url: '/staff/lists' })
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@ import request from '@/utils/request'
|
|||
|
||||
// 门店流水列表
|
||||
export function apiStorFinanceFlowLists(params: any) {
|
||||
return request.get({ url: '/consult_target.consult_decision/lists', params })
|
||||
return request.get({ url: '/finance/finance/lists', params })
|
||||
}
|
||||
|
||||
// 门店流水备注
|
||||
export function apiStorFinanceFlowRemarks(params: any) {
|
||||
return request.post({ url: '/consult_target.consult_decision/lists', params })
|
||||
return request.post({ url: '/finance/finance/remark', params })
|
||||
}
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
<el-image class="w-[50px] h-[50px]" :src="url" :fit="fit" />
|
||||
<div class="flex flex-col ml-3 justify-between">
|
||||
<div style="font-size:16px">
|
||||
【收银订单】
|
||||
{{ orderType ? '【收银订单】' : '售后订单' }}
|
||||
</div>
|
||||
<div>
|
||||
订单编号： {{ detailData.order_id }}
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
<ul class="flex justify-between w-[70%] mt-[20px]">
|
||||
<li>
|
||||
<div>订单状态</div>
|
||||
<div>{{ detailData.status_name }}</div>
|
||||
<div>{{ orderType ? detailData.status_name : detailData.refund_status_name }}</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>实际支付</div>
|
||||
|
|
@ -30,28 +30,38 @@
|
|||
<div>支付方式</div>
|
||||
<div>{{ detailData.pay_type }}</div>
|
||||
</li>
|
||||
<li>
|
||||
<li v-if="orderType">
|
||||
<div>支付时间</div>
|
||||
<div>{{ detailData.pay_time }}</div>
|
||||
</li>
|
||||
|
||||
<li v-if="!orderType">
|
||||
<div>退款件数</div>
|
||||
<!-- <div>{{ detailData.pay_time }}</div> -->
|
||||
</li>
|
||||
|
||||
<li v-if="!orderType">
|
||||
<div>退款时间</div>
|
||||
<!-- <div>{{ detailData.pay_time }}</div> -->
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- content -->
|
||||
<el-tabs v-model="activeName" class="mt-[20px]">
|
||||
<el-tab-pane label="订单信息" name="first" v-if="Object.keys(detailData).length">
|
||||
<el-descriptions :column="3" border title="用户信息" class="mb-[30px]"
|
||||
v-for="(item, index) in orderInfoCongig" :key="index">
|
||||
<el-tab-pane label="订单信息" name="first">
|
||||
<el-descriptions :column="3" border :title="item.title" class="mb-[30px]"
|
||||
v-for="(item, index) in orderInfoCongig" :key="index" v-show="item.isShow">
|
||||
<el-descriptions-item :label="el.name" label-class-name="my-label" v-for="el in item.child">
|
||||
{{ el.value }}
|
||||
<el-image v-if="el.type == 'img'" class="w-[50px] h-[50px] mr-2" :src="el.value" />
|
||||
<span v-else>{{ el.value }}</span>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="商品信息" name="second">
|
||||
<el-table border :data="detailData.product">
|
||||
<el-table-column label="商品信息" prop="build_area_text" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<div class="flex items-center w-[300px] items-center">
|
||||
<div class="flex w-[300px] items-center">
|
||||
<el-image class="w-[50px] h-[50px] mr-2" :src="row.cart_info.image" />
|
||||
<span> {{ row.cart_info.name }}</span>
|
||||
</div>
|
||||
|
|
@ -72,11 +82,6 @@
|
|||
</el-tab-pane> -->
|
||||
</el-tabs>
|
||||
</template>
|
||||
<!-- <template #footer>
|
||||
<div style="flex: auto">
|
||||
<el-button type="primary" @click="showDetail = false">确定</el-button>
|
||||
</div>
|
||||
</template> -->
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
|
|
@ -90,23 +95,44 @@ const props = defineProps({
|
|||
detailData: {
|
||||
type: Object,
|
||||
},
|
||||
})
|
||||
|
||||
let form = props.detailData
|
||||
|
||||
const formData = reactive({
|
||||
detail: [
|
||||
{}
|
||||
],
|
||||
detail2: [],
|
||||
// 0为退款，1为收银订单
|
||||
orderType: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
const orderInfoCongig = ref(
|
||||
[
|
||||
{
|
||||
title: '退款原因',
|
||||
isShow: props.orderType == 0,
|
||||
child: [
|
||||
{
|
||||
name: "退款原因",
|
||||
value: props.detailData?.refund_reason
|
||||
},
|
||||
{
|
||||
name: "退款金额",
|
||||
value: props.detailData?.refund_price
|
||||
},
|
||||
{
|
||||
name: "退款说明",
|
||||
value: props.detailData?.refund_reason_wap_explain
|
||||
},
|
||||
{
|
||||
name: "退款凭证",
|
||||
value: props.detailData?.mobile,
|
||||
type: 'img'
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: '用户信息',
|
||||
isShow: true,
|
||||
child: [
|
||||
{
|
||||
name: "用户昵称",
|
||||
|
|
@ -122,6 +148,7 @@ const orderInfoCongig = ref(
|
|||
},
|
||||
{
|
||||
title: '收货人信息',
|
||||
isShow: true,
|
||||
child: [
|
||||
{
|
||||
name: "收货人",
|
||||
|
|
@ -140,6 +167,7 @@ const orderInfoCongig = ref(
|
|||
},
|
||||
{
|
||||
title: '订单信息',
|
||||
isShow: true,
|
||||
child: [
|
||||
{
|
||||
name: "创建时间",
|
||||
|
|
@ -159,7 +187,7 @@ const orderInfoCongig = ref(
|
|||
},
|
||||
{
|
||||
name: "会员商品优惠",
|
||||
value: " props.detailData?.total_num"
|
||||
value: props.detailData?.vip_price
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -172,6 +200,16 @@ const orderInfoCongig = ref(
|
|||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '订单备注',
|
||||
isShow: true,
|
||||
child: [
|
||||
{
|
||||
name: "备注",
|
||||
value: props.detailData?.remark
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
])
|
||||
|
||||
|
|
|
|||
|
|
@ -7,27 +7,28 @@
|
|||
<el-form class="mb-[-16px]" :model="queryParams" label-width="80px">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker class="flex-1 !flex" v-model="queryParams.date" clearable
|
||||
value-format="YYYY-MM-DD" placeholder="选择创建时间">
|
||||
</el-date-picker>
|
||||
<el-form-item label="时间筛选">
|
||||
<el-date-picker v-model="date" type="daterange" range-separator="-" start-placeholder="开始时间"
|
||||
end-placeholder="结束时间" value-format="YYYY-MM-DD" :clearable="false" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="订单搜索">
|
||||
<el-input v-model="queryParams.order" clearable placeholder="请输入交易单号/交易人" />
|
||||
<el-input v-model="queryParams.keyword" clearable placeholder="请输入交易单号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="选择店员">
|
||||
<el-input v-model="queryParams.order" clearable placeholder="请选择店员" />
|
||||
<el-form-item label="店员">
|
||||
<el-select class="flex-1" v-model="queryParams.staff_id" placeholder="请选择店员">
|
||||
<el-option :label="item.staff_name" :value="item.id" v-for="(item, index) in staffList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="resetPage">查询</el-button>
|
||||
<el-button @click="resetParams">重置</el-button>
|
||||
<el-button @click="showDialog = true">重置</el-button>
|
||||
<el-button type="primary" @click="handleResetPage">查询</el-button>
|
||||
<el-button @click="handleResetParams">重置</el-button>
|
||||
<!-- <el-button @click="showDialog = true">重置</el-button> -->
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -36,18 +37,18 @@
|
|||
<el-card class="!border-none" v-loading="pager.loading" shadow="never">
|
||||
<div class="mt-4">
|
||||
<el-table :data="pager.lists">
|
||||
<el-table-column label="交易单号" prop="progress" show-overflow-tooltip />
|
||||
<el-table-column label="关联订单" prop="progress" show-overflow-tooltip />
|
||||
<el-table-column label="交易时间" prop="progress" show-overflow-tooltip />
|
||||
<el-table-column label="交易金额" prop="progress" show-overflow-tooltip />
|
||||
<el-table-column label="交易人" prop="progress" show-overflow-tooltip />
|
||||
<el-table-column label="关联店员" prop="progress" show-overflow-tooltip />
|
||||
<el-table-column label="交易类型" prop="progress" show-overflow-tooltip />
|
||||
<el-table-column label="支付方式" prop="progress" show-overflow-tooltip />
|
||||
<el-table-column label="备注" prop="progress" show-overflow-tooltip />
|
||||
<el-table-column label="交易单号" prop="financial_record_sn" show-overflow-tooltip />
|
||||
<el-table-column label="关联订单" prop="order_sn" show-overflow-tooltip />
|
||||
<el-table-column label="交易时间" prop="create_time" show-overflow-tooltip />
|
||||
<el-table-column label="交易金额" prop="number" show-overflow-tooltip />
|
||||
<el-table-column label="交易人" prop="nickname" show-overflow-tooltip />
|
||||
<el-table-column label="关联店员" prop="staff_name" show-overflow-tooltip />
|
||||
<el-table-column label="交易类型" prop="financial_type_name" show-overflow-tooltip />
|
||||
<el-table-column label="支付方式" prop="pay_type_name" show-overflow-tooltip />
|
||||
<!-- <el-table-column label="备注" prop="progress" show-overflow-tooltip /> -->
|
||||
<el-table-column label="操作" width="170" fixed="right">
|
||||
<template #default="{ row }" @click="showDialog = true, rows = row">
|
||||
备注
|
||||
<template #default="{ row }">
|
||||
<el-button @click="handleRe(row)" link type="primary">备注</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
@ -59,7 +60,7 @@
|
|||
</div>
|
||||
<el-dialog title="添加备注" v-model="showDialog" width="550px">
|
||||
<el-form-item>
|
||||
<el-input v-model="remarks" type="textarea" placeholder="请输入备注内容"></el-input>
|
||||
<el-input v-model="rows.remark" type="textarea" placeholder="请输入备注内容"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleRemarks">确定</el-button>
|
||||
|
|
@ -72,13 +73,19 @@
|
|||
import { ref, reactive } from "vue"
|
||||
import { usePaging } from '@/hooks/usePaging'
|
||||
import { apiStorFinanceFlowLists, apiStorFinanceFlowRemarks } from '@/api/store_finance_flow.ts'
|
||||
import { apiStaffLists } from '@/api/goodsList.ts'
|
||||
|
||||
|
||||
// 查询条件
|
||||
const queryParams = reactive({
|
||||
date: "",
|
||||
order: ""
|
||||
keyword: "",
|
||||
start_time: "",
|
||||
end_time: "",
|
||||
order: "",
|
||||
staff_id: "",
|
||||
})
|
||||
|
||||
const date = ref(null)
|
||||
|
||||
// 分页相关
|
||||
const { pager, getLists, resetParams, resetPage } = usePaging({
|
||||
|
|
@ -90,10 +97,39 @@ const showDialog = ref(false)
|
|||
const remarks = ref('')
|
||||
const rows = ref({})
|
||||
|
||||
const handleRemarks = async (row: any) => {
|
||||
await apiStorFinanceFlowRemarks({ row })
|
||||
const handleRemarks = async () => {
|
||||
await apiStorFinanceFlowRemarks({ id: rows.value.id, remark: rows.value.remark })
|
||||
showDialog.value = false
|
||||
}
|
||||
|
||||
// getLists()
|
||||
|
||||
const handleResetPage = () => {
|
||||
if (date.value.length) {
|
||||
queryParams.start_time = date.value[0]
|
||||
queryParams.end_time = date.value[1]
|
||||
}
|
||||
resetPage()
|
||||
}
|
||||
|
||||
const handleRe = (row) => {
|
||||
|
||||
rows.value = row
|
||||
showDialog.value = true
|
||||
}
|
||||
|
||||
|
||||
const handleResetParams = () => {
|
||||
date.value = []
|
||||
resetParams()
|
||||
}
|
||||
|
||||
|
||||
const staffList = ref([])
|
||||
const getStaffList = async () => {
|
||||
let res = await apiStaffLists()
|
||||
staffList.value = res
|
||||
}
|
||||
getStaffList()
|
||||
|
||||
getLists()
|
||||
</script>
|
||||
|
|
@ -63,8 +63,8 @@
|
|||
<el-table-column label="发起退款时间" prop="refund_reason_time" show-overflow-tooltip />
|
||||
<el-table-column label="退款状态" prop="refund_status_name" show-overflow-tooltip />
|
||||
<el-table-column label="退款信息" prop="" show-overflow-tooltip />
|
||||
<el-table-column label="退货信息" prop="" show-overflow-tooltip />
|
||||
<el-table-column label="售后备注" prop="" show-overflow-tooltip />
|
||||
<el-table-column label="退货信息" prop="refund_reason_wap" show-overflow-tooltip />
|
||||
<el-table-column label="售后备注" prop="refund_reason" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="170" fixed="right" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="handleDetail(row.id)">
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
</div>
|
||||
</el-card>
|
||||
<div v-if="showDetail">
|
||||
<orderDetail ref="detailRef" :detailData="detailData" @close="showDetail = false"></orderDetail>
|
||||
<orderDetail ref="detailRef" :detailData="detailData" @close="showDetail = false" :orderType="0"></orderDetail>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -90,7 +90,6 @@ import orderDetail from './../../components/orderDetail/index.vue'
|
|||
import { ref, reactive } from 'vue'
|
||||
import { usePaging } from '@/hooks/usePaging'
|
||||
import { apiStoreRefundOrderLists, apiStoreRefundOrderDetail } from '@/api/store_order'
|
||||
import feedback from '@/utils/feedback'
|
||||
|
||||
// 查询条件
|
||||
const queryParams = reactive({
|
||||
|
|
@ -102,13 +101,10 @@ const queryParams = reactive({
|
|||
|
||||
})
|
||||
|
||||
|
||||
|
||||
const date = ref([])
|
||||
const showDetail = ref(false)
|
||||
|
||||
|
||||
|
||||
// 分页相关
|
||||
const { pager, getLists, resetParams, resetPage } = usePaging({
|
||||
fetchFun: apiStoreRefundOrderLists,
|
||||
|
|
@ -131,17 +127,15 @@ const handleResetParams = () => {
|
|||
|
||||
const detailRef = ref(null)
|
||||
const detailData = ref({})
|
||||
|
||||
// 编辑
|
||||
const handleDetail = async (id: any) => {
|
||||
let res = await apiStoreRefundOrderDetail({ id })
|
||||
console.log(res)
|
||||
detailData.value = res
|
||||
showDetail.value = true
|
||||
await nextTick()
|
||||
detailRef.value.open()
|
||||
}
|
||||
|
||||
|
||||
|
||||
getLists()
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<!-- <el-table :data="props.lists"> -->
|
||||
<el-table :data="[{}]">
|
||||
<el-table-column :label="item.label" :prop="item.prop" show-overflow-tooltip v-for="item in column" />
|
||||
</el-table>
|
||||
<div class="flex mt-4 justify-end">
|
||||
<pagination v-model="pager" @change="getLists" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="manageProjectLists">
|
||||
import { ref, reactive, defineProps } from "vue"
|
||||
import { usePaging } from '@/hooks/usePaging'
|
||||
let props = defineProps({
|
||||
fetchApi: {
|
||||
type: Function
|
||||
},
|
||||
column: {
|
||||
type: Array,
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
// 分页相关
|
||||
const { pager, getLists, resetParams, resetPage } = usePaging({
|
||||
fetchFun: props.fetchApi,
|
||||
})
|
||||
|
||||
|
||||
// getLists()
|
||||
</script>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<popup ref="popupRef" title="店员详情" :async="true" width="50vw" @close="close" :show-footer="false">
|
||||
<div class="flex">
|
||||
<el-avatar shape="circle" :size="70"
|
||||
src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
|
||||
<el-row class="w-[100%] ml-4">
|
||||
<el-col :span="24">你干嘛</el-col>
|
||||
<el-col :span="7">收银订单：￥200.00</el-col>
|
||||
<el-col :span="7">核销订单：￥200.00</el-col>
|
||||
<el-col :span="7">配送订单：￥200.00</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-tabs tab-position="left" style="height: 200px" class="demo-tabs mt-8">
|
||||
<el-tab-pane label="收银订单">
|
||||
<myTable :column="datas.moneyLists"></myTable>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="配送订单">
|
||||
<myTable :column="datas.moneyLists"></myTable>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="核销订单">
|
||||
<myTable :column="datas.moneyLists"></myTable>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</popup>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import myTable from './components/myTable.vue';
|
||||
|
||||
|
||||
const popupRef = ref(null)
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const open = () => {
|
||||
popupRef.value?.open()
|
||||
}
|
||||
const close = () => {
|
||||
emit('close')
|
||||
|
||||
}
|
||||
|
||||
|
||||
const datas = reactive({
|
||||
moneyLists: [
|
||||
{ label: '订单id', prop: 'orderid' },
|
||||
{ label: '收货人', prop: 'orderid' },
|
||||
{ label: '商品数量', prop: 'orderid' },
|
||||
{ label: '商品总价', prop: 'orderid' },
|
||||
{ label: '实付金额', prop: 'orderid' },
|
||||
{ label: '交易完成时间', prop: 'orderid' },
|
||||
],
|
||||
sendLists: [
|
||||
{ label: '订单id', prop: 'orderid' },
|
||||
{ label: '收货人', prop: 'orderid' },
|
||||
{ label: '商品数量', prop: 'orderid' },
|
||||
{ label: '商品总价', prop: 'orderid' },
|
||||
{ label: '实付金额', prop: 'orderid' },
|
||||
{ label: '交易完成时间', prop: 'orderid' },
|
||||
],
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
<template>
|
||||
<div class="edit-popup">
|
||||
<popup ref="popupRef" :title="popupTitle" :async="true" width="550px" @confirm="handleSubmit"
|
||||
@close="handleClose">
|
||||
<el-form ref="formRef" :model="formData" label-width="120px" :rules="formRules">
|
||||
<el-form-item label="店员名称" prop="title">
|
||||
<el-input v-model="formData.title" clearable placeholder="请输入店员名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="头像" prop="title">
|
||||
<el-input v-model="formData.title" clearable placeholder="请输入店员名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="店员账号" prop="title">
|
||||
<el-input v-model="formData.title" clearable placeholder="请输入店员账号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="店员密码" prop="title">
|
||||
<el-input v-model="formData.title" clearable placeholder="请输入店员账号" type="password" />
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="title">
|
||||
<el-input v-model="formData.title" clearable placeholder="请确认账号密码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="title">
|
||||
<el-input v-model="formData.title" clearable placeholder="请输入手机号码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="店员身份" prop="title">
|
||||
<el-input v-model="formData.title" clearable placeholder="请输入手机号码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="title">
|
||||
<el-input v-model="formData.title" clearable placeholder="请输入手机号码" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="oaPlanEdit">
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import Popup from '@/components/popup/index.vue'
|
||||
// import { apiOaPlanAdd, apiOaPlanEdit, apiOaPlanDetail } from '@/api/oa_plan'
|
||||
import { timeFormat } from '@/utils/util'
|
||||
import type { PropType } from 'vue'
|
||||
defineProps({
|
||||
dictData: {
|
||||
type: Object as PropType<Record<string, any[]>>,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['success', 'close'])
|
||||
const formRef = shallowRef<FormInstance>()
|
||||
const popupRef = shallowRef<InstanceType<typeof Popup>>()
|
||||
const mode = ref('add')
|
||||
|
||||
|
||||
// 弹窗标题
|
||||
const popupTitle = computed(() => {
|
||||
return mode.value == 'edit' ? '编辑日程安排' : '新增日程安排'
|
||||
})
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
title: '',
|
||||
type: '',
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
remind_type: '',
|
||||
remark: '',
|
||||
})
|
||||
|
||||
const chekcDate = (rule: any, value: any, callback: any) => {
|
||||
if (new Date(formData.end_time) < new Date(formData.start_time)) {
|
||||
callback(new Error('结束时间不能早于开始时间'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
// 表单验证
|
||||
const formRules = reactive<any>({
|
||||
title: [{
|
||||
required: true,
|
||||
message: '请输入工作安排主题',
|
||||
trigger: ['blur']
|
||||
}],
|
||||
type: [{
|
||||
required: true,
|
||||
message: '请输入日程优先级',
|
||||
trigger: ['blur']
|
||||
}],
|
||||
start_time: [{
|
||||
required: true,
|
||||
message: '请输入开始时间',
|
||||
trigger: ['blur']
|
||||
}],
|
||||
end_time: [{
|
||||
required: true,
|
||||
message: '请输入结束时间',
|
||||
trigger: ['blur']
|
||||
},
|
||||
{
|
||||
validator: chekcDate,
|
||||
trigger: ['blur']
|
||||
}],
|
||||
remind_type: [{
|
||||
required: true,
|
||||
message: '请输入提醒类型',
|
||||
trigger: ['blur']
|
||||
}],
|
||||
remind_time: [{
|
||||
required: true,
|
||||
message: '请输入提醒时间',
|
||||
trigger: ['blur']
|
||||
}]
|
||||
})
|
||||
|
||||
|
||||
// 获取详情
|
||||
const setFormData = async (data: Record<any, any>) => {
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
const getDetail = async (row: Record<string, any>) => {
|
||||
const data = await apiOaPlanDetail({
|
||||
id: row.id
|
||||
})
|
||||
setFormData(data)
|
||||
}
|
||||
|
||||
|
||||
// 提交按钮
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value?.validate()
|
||||
const data = { ...formData, }
|
||||
// mode.value == 'edit'
|
||||
// ? await apiOaPlanEdit(data)
|
||||
// : await apiOaPlanAdd(data)
|
||||
popupRef.value?.close()
|
||||
emit('success')
|
||||
}
|
||||
|
||||
//打开弹窗
|
||||
const open = (type = 'add', start_time = '') => {
|
||||
mode.value = type
|
||||
formData.start_time = start_time
|
||||
popupRef.value?.open()
|
||||
}
|
||||
|
||||
// 关闭回调
|
||||
const handleClose = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
setFormData,
|
||||
getDetail
|
||||
})
|
||||
</script>
|
||||
|
|
@ -1,211 +1,187 @@
|
|||
<!-- 业绩统计 -->
|
||||
<!-- 业绩统计 -->
|
||||
<!-- 业绩统计 -->
|
||||
<!-- 业绩统计 -->
|
||||
<!-- 业绩统计 -->
|
||||
<template>
|
||||
<el-card>
|
||||
<div class="w-[800px]">
|
||||
<el-form ref="formRef" :model="formData" label-width="120px" :rules="formRules">
|
||||
<el-tabs v-model="activeName" class="demo-tabs">
|
||||
<el-tab-pane label="基础设置" name="first">
|
||||
<el-form-item label="门店名称" prop="title">
|
||||
<el-input v-model="formData.title" clearable placeholder="请输入店员名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="门店手机号" prop="title">
|
||||
<el-input v-model="formData.title" clearable placeholder="请输入店员名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="营业状态" prop="title">
|
||||
<el-switch v-model="formData.status" :active-value="1" :inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="营业时间" prop="title">
|
||||
<el-time-picker v-model="formData.times" is-range range-separator="-"
|
||||
start-placeholder="开始时间" end-placeholder="结束时间" value-format="HH:mm:ss" />
|
||||
</el-form-item>
|
||||
<el-form-item label="门店地址" prop="title">
|
||||
<el-card class="!border-none mb-4" shadow="never">
|
||||
<el-form class="mb-[-16px]" :model="queryParams" label-width="80px">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-select class="flex-1" v-model="formData.city_id" clearable placeholder="请选择"
|
||||
@change="getCityList(formData.province_id, false)">
|
||||
<el-option v-for="(item, index) in address.provinceList" :key="index"
|
||||
:label="item.province_name" :value="parseInt(item.province_code)" />
|
||||
<el-col :span="10">
|
||||
<el-form-item label="时间筛选">
|
||||
<el-select class="mr-1" v-model="queryParams.timeType" placeholder="时间类型筛选">
|
||||
<el-option label="交易时间" :value="0" />
|
||||
<el-option label="发货时间" :value="0" />
|
||||
<el-option label="核销时间" :value="0" />
|
||||
</el-select>
|
||||
<el-date-picker v-model="date" type="daterange" range-separator="-" start-placeholder="开始时间"
|
||||
end-placeholder="结束时间" value-format="YYYY-MM-DD" :clearable="false" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="店员">
|
||||
<el-select v-model="queryParams.staff_id" placeholder="请选择店员">
|
||||
<el-option :label="item.staff_name" :value="item.id" v-for="(item, index) in staffList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="订单类型">
|
||||
<el-select class="mr-1" v-model="queryParams.timeType" placeholder="选择订单类型">
|
||||
<el-option label="交易时间" :value="0" />
|
||||
<el-option label="发货时间" :value="0" />
|
||||
<el-option label="核销时间" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-select class="flex-1" v-model="formData.city_id" clearable placeholder="请选择"
|
||||
@change="getAreaList(formData.city_id, false)">
|
||||
<el-option v-for="(item, index) in address.cityList" :key="index"
|
||||
:label="item.city_name" :value="parseInt(item.city_code)" />
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-select class="flex-1" v-model="formData.area_id" clearable placeholder="请选择"
|
||||
@change="getTownList(formData.area_id, false)">
|
||||
<el-option v-for="(item, index) in address.areaList" :key="index"
|
||||
:label="item.area_name" :value="parseInt(item.area_code)" />
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-select class="flex-1" v-model="formData.street_id" clearable placeholder="请选择"
|
||||
@change="getVilllageList(formData.street_id, false)">
|
||||
<el-option v-for="(item, index) in address.townList" :key="index"
|
||||
:label="item.street_name" :value="parseInt(item.street_code)" />
|
||||
</el-select>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleResetPage">查询</el-button>
|
||||
<el-button @click="handleResetParams">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item label="配送范围(km)" prop="title">
|
||||
<el-input-number v-model="formData.num" :step="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="门店详细地址" prop="title">
|
||||
<myMap></myMap>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
|
||||
|
||||
|
||||
<el-tab-pane label="配送设置" name="second">
|
||||
<el-form-item label="同城配送" prop="title">
|
||||
<el-switch v-model="formData.status" :active-value="1" :inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="到店自提" prop="title">
|
||||
<el-switch v-model="formData.status" :active-value="1" :inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="默认配送方式" prop="title">
|
||||
<el-radio-group v-model="formData.types" class="ml-4">
|
||||
<el-radio label="1" size="large">配送</el-radio>
|
||||
<el-radio label="2" size="large">自提</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
|
||||
<el-card class="!border-none mb-4" shadow="never">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<v-charts style="height: 350px" :option="barOption" :autoresize="true" />
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<v-charts style="height: 350px" :option="pieOption" :autoresize="true" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
|
||||
<el-card class="!border-none" v-loading="pager.loading" shadow="never">
|
||||
<el-table :data="pager.lists">
|
||||
<el-table-column label="订单号" prop="progress" show-overflow-tooltip />
|
||||
<el-table-column label="结算类型" prop="progress" show-overflow-tooltip />
|
||||
<el-table-column label="结算金额" prop="progress" show-overflow-tooltip />
|
||||
<el-table-column label="结算方式" prop="progress" show-overflow-tooltip />
|
||||
<el-table-column label="付款方信息" prop="progress" show-overflow-tooltip />
|
||||
<el-table-column label="收款方信息" prop="progress" show-overflow-tooltip />
|
||||
<el-table-column label="结算凭证" prop="progress" show-overflow-tooltip />
|
||||
<el-table-column label="结算备注" prop="progress" show-overflow-tooltip />
|
||||
<el-table-column label="经办人" prop="progress" show-overflow-tooltip />
|
||||
</el-table>
|
||||
<div class="flex mt-4 justify-end">
|
||||
<pagination v-model="pager" @change="getLists" />
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="oaPlanEdit">
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import { timeFormat } from '@/utils/util'
|
||||
import { apicityLists, apiAreaLists, apiStreetLists, apigetProvinceLists } from "@/api/address"
|
||||
import myMap from "./myMap/index.vue"
|
||||
import axios from 'axios';
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from "vue"
|
||||
import { apiStaffLists } from '@/api/goodsList.ts'
|
||||
import vCharts from 'vue-echarts'
|
||||
import { usePaging } from '@/hooks/usePaging'
|
||||
import { apiTableLists } from '@/api/employeStatistic.ts'
|
||||
|
||||
//
|
||||
const formRef = shallowRef<FormInstance>()
|
||||
const activeName = ref('first')
|
||||
// 地址
|
||||
const address = reactive({
|
||||
provinceList: [],
|
||||
cityList: [],
|
||||
areaList: [],
|
||||
townList: [],
|
||||
})
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
status: 0,
|
||||
title: '',
|
||||
province_id: '510000',
|
||||
city_id: '',
|
||||
area_id: '',
|
||||
street_id: '',
|
||||
types: '1',
|
||||
times: '',
|
||||
num: "",
|
||||
start_time: '',
|
||||
const date = ref([])
|
||||
|
||||
const queryParams = reactive({
|
||||
timeType: "",
|
||||
order_id: "",
|
||||
pay_type: "",
|
||||
start_time: "",
|
||||
end_time: '',
|
||||
remind_type: '',
|
||||
remark: '',
|
||||
status: "",
|
||||
staff_id: ""
|
||||
|
||||
})
|
||||
|
||||
const chekcDate = (rule: any, value: any, callback: any) => {
|
||||
if (new Date(formData.end_time) < new Date(formData.start_time)) {
|
||||
callback(new Error('结束时间不能早于开始时间'))
|
||||
} else {
|
||||
callback()
|
||||
const handleResetPage = () => {
|
||||
if (date.value.length) {
|
||||
queryParams.start_time = date.value[0]
|
||||
queryParams.end_time = date.value[1]
|
||||
}
|
||||
}
|
||||
|
||||
// 表单验证
|
||||
const formRules = reactive<any>({
|
||||
end_time: [{
|
||||
required: true,
|
||||
message: '请输入结束时间',
|
||||
trigger: ['blur']
|
||||
const handleResetParams = () => {
|
||||
date.value = []
|
||||
for (let key in queryParams) {
|
||||
queryParams[key] = ''
|
||||
}
|
||||
}
|
||||
|
||||
const staffList = ref([])
|
||||
const getStaffList = async () => {
|
||||
let res = await apiStaffLists()
|
||||
staffList.value = res
|
||||
}
|
||||
getStaffList()
|
||||
|
||||
|
||||
|
||||
const barOption = reactive({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Sun', 'Sun', 'Sun', 'Sun', 'Sun', 'Sun']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
validator: chekcDate,
|
||||
trigger: ['blur']
|
||||
}],
|
||||
remind_type: [{
|
||||
required: true,
|
||||
message: '请输入提醒类型',
|
||||
trigger: ['blur']
|
||||
}],
|
||||
data: [120, 200, 150, 80, 70, 110, 130, 200, 130, 400, 100, 200, 200],
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
|
||||
})
|
||||
|
||||
|
||||
// 获取详情
|
||||
const setFormData = async (data: Record<any, any>) => {
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key]
|
||||
const pieOption = reactive(
|
||||
{
|
||||
title: {
|
||||
text: '交易类型',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: [
|
||||
{ value: 1048, name: '张某' },
|
||||
{ value: 735, name: '刘某' },
|
||||
{ value: 580, name: '赵某' },
|
||||
{ value: 124, name: '罗某' },
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
]
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
// 提交按钮
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value?.validate()
|
||||
const data = { ...formData, }
|
||||
// mode.value == 'edit'
|
||||
// ? await apiOaPlanEdit(data)
|
||||
// : await apiOaPlanAdd(data)
|
||||
}
|
||||
// 分页相关
|
||||
const { pager, getLists, resetParams, resetPage } = usePaging({
|
||||
fetchFun: apiTableLists,
|
||||
})
|
||||
|
||||
const getProvinceList = async (isAsync: Boolean) => {
|
||||
let res = await apigetProvinceLists()
|
||||
address.provinceList = res
|
||||
if (isAsync) {
|
||||
return Promise.resolve({
|
||||
msg: '获取成功'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const getCityList = async (province_code: number | String, isAsync: Boolean) => {
|
||||
let res = await apicityLists({ province_code })
|
||||
address.cityList = res
|
||||
if (isAsync) {
|
||||
return Promise.resolve({
|
||||
msg: '获取成功'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const getAreaList = async (city_code: number | String, isAsync: Boolean) => {
|
||||
let res = await apiAreaLists({ city_code })
|
||||
address.areaList = res
|
||||
if (isAsync) {
|
||||
return Promise.resolve({
|
||||
msg: '获取成功'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const getTownList = async (area_code: number | String, isAsync: Boolean) => {
|
||||
let res = await apiStreetLists({ area_code })
|
||||
address.townList = res
|
||||
if (isAsync) {
|
||||
return Promise.resolve({
|
||||
msg: '获取成功'
|
||||
});
|
||||
}
|
||||
}
|
||||
// getProvinceList(false)
|
||||
getLists()
|
||||
</script>
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-card class="!border-none mb-4" shadow="never">
|
||||
<el-form class="mb-[-16px]" :model="queryParams" label-width="80px">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="商品状态">
|
||||
<el-select class="flex-1" v-model="queryParams.status" clearable placeholder="请选择商品状态">
|
||||
<el-option label="销售中" :value="0" />
|
||||
<el-option label="仓库中" :value="0" />
|
||||
<el-option label="已售罄" :value="0" />
|
||||
<el-option label="库存预警" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="商品搜索" prop="nature">
|
||||
<el-input v-model="queryParams.status" clearable placeholder="请输入商品名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="resetPage">查询</el-button>
|
||||
<el-button @click="resetParams">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card class="!border-none" v-loading="pager.loading" shadow="never">
|
||||
<el-button v-perms="['dept.dept/add']" type="primary" @click="handleAdd()">
|
||||
<template #icon>
|
||||
<icon name="el-icon-Plus" />
|
||||
</template>
|
||||
新增
|
||||
</el-button>
|
||||
<div class="mt-4">
|
||||
<el-table :data="pager.lists" @selection-change="handleSelectionChange">
|
||||
<el-table-column label="id" prop="progress" show-overflow-tooltip />
|
||||
<el-table-column label="头像" prop="build_area_text" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<!-- <el-image style="width: 50px; height: 50px" :src="url" /> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="昵称" prop="project_level_text" show-overflow-tooltip />
|
||||
<el-table-column label="店员身份" prop="project_level_text" show-overflow-tooltip />
|
||||
<el-table-column label="手机号" prop="total_investment" show-overflow-tooltip />
|
||||
<el-table-column label="状态" prop="engineering_status_text" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<el-switch v-model="row.status" :active-value="1" :inactive-value="0"
|
||||
@change="changeStatus(row)"></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="170" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="handleEdit(row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button type="primary" link @click="handleDetail(row)">
|
||||
详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="flex mt-4 justify-end">
|
||||
<pagination v-model="pager" @change="getLists" />
|
||||
</div>
|
||||
</el-card>
|
||||
<edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
|
||||
<DetailPopup v-if="showDetail" ref="detailRef" @close="showEdit = false" />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="manageProjectLists">
|
||||
import { ref, reactive } from "vue"
|
||||
import { usePaging } from '@/hooks/usePaging'
|
||||
import { apiGoodsListLists, apiStatus, apiGoodsTypeLists } from '@/api/goodsList'
|
||||
import EditPopup from './edit.vue'
|
||||
import DetailPopup from './detail.vue'
|
||||
|
||||
const detailRef = ref(null)
|
||||
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
|
||||
// 是否显示编辑框
|
||||
const showEdit = ref(false)
|
||||
const showDetail = ref(false)
|
||||
|
||||
|
||||
// 查询条件
|
||||
const queryParams = reactive({
|
||||
status: ""
|
||||
})
|
||||
|
||||
// 选中数据
|
||||
const selectData = ref<any[]>([])
|
||||
|
||||
// 表格选择后回调事件
|
||||
const handleSelectionChange = (val: any[]) => {
|
||||
selectData.value = val.map(({ id }) => id)
|
||||
}
|
||||
|
||||
// 上架&下架
|
||||
const changeStatus = (data: any) => {
|
||||
apiStatus({
|
||||
// id: data.id,
|
||||
// account: data.account,
|
||||
// name: data.name,
|
||||
// role_id: data.role_id,
|
||||
// disable: data.disable,
|
||||
// org_id: data.org_id,
|
||||
// dept_id: data.dept_id,
|
||||
// job_id: data.job_id,
|
||||
// multipoint_login: data.multipoint_login
|
||||
}).finally(() => {
|
||||
getLists()
|
||||
})
|
||||
}
|
||||
|
||||
// 分页相关
|
||||
const { pager, getLists, resetParams, resetPage } = usePaging({
|
||||
fetchFun: apiGoodsListLists,
|
||||
params: queryParams
|
||||
})
|
||||
|
||||
// 编辑
|
||||
const handleEdit = async (data: any) => {
|
||||
showEdit.value = true
|
||||
await nextTick()
|
||||
editRef.value?.open('edit')
|
||||
editRef.value?.setFormData(data)
|
||||
}
|
||||
// 新增
|
||||
const handleAdd = async () => {
|
||||
showEdit.value = true
|
||||
await nextTick()
|
||||
editRef.value?.open('add')
|
||||
}
|
||||
|
||||
const handleDetail = () => {
|
||||
showDetail.value = true
|
||||
nextTick(() => {
|
||||
detailRef.value?.open()
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
getLists()
|
||||
</script>
|
||||
|
|
@ -1,154 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
{{ dataMap.latitude }}-{{ dataMap.lngitude }}
|
||||
<div class="mb-6">
|
||||
<el-autocomplete v-model="address" :fetch-suggestions="querySearch" placeholder="请输入详细地址"
|
||||
:trigger-on-focus="false" />
|
||||
<!-- <el-button type="primary" @click="getLocations">
|
||||
搜索
|
||||
</el-button> -->
|
||||
<el-button type="primary" @click="setMarkerBylatLon(30.629673, 103.775231)">
|
||||
搜索
|
||||
</el-button>
|
||||
|
||||
</div>
|
||||
<div id="amp-container" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, reactive, ref, } from 'vue';
|
||||
import { jsonp } from "vue-jsonp"
|
||||
|
||||
const dataMap = reactive({
|
||||
map: '',
|
||||
markerLayer: '',
|
||||
latitude: '', //纬度
|
||||
lngitude: '', //经度
|
||||
});
|
||||
const TMap = (window as any).TMap;
|
||||
onMounted(() => {
|
||||
init();
|
||||
getLocation();
|
||||
});
|
||||
const init = () => {
|
||||
let center = new TMap.LatLng(dataMap.latitude, dataMap.lngitude);
|
||||
dataMap.map = new TMap.Map(document.getElementById('amp-container'), {
|
||||
center: center,//设置地图中心点坐标
|
||||
// zoom: 11, //设置地图缩放级别
|
||||
viewMode: '2D'
|
||||
});
|
||||
(dataMap.map as any).on('click', clickHandler); // 绑定点击地图获取地理位置的事件
|
||||
markerLayer(); // 标记地图
|
||||
};
|
||||
// 重载地图
|
||||
const reloadMap = () => {
|
||||
(document.getElementById('amp-container') as any).innerHTML = '';
|
||||
dataMap.markerLayer = '';
|
||||
let center = new TMap.LatLng(dataMap.latitude, dataMap.lngitude);
|
||||
dataMap.map = new TMap.Map(document.getElementById('amp-container'), {
|
||||
center: center,//设置地图中心点坐标
|
||||
viewMode: '2D'
|
||||
});
|
||||
markerLayer();
|
||||
};
|
||||
const getLocation = async () => {
|
||||
try {
|
||||
jsonp('https://apis.map.qq.com/ws/location/v1/ip?key=SMJBZ-WCHK4-ZPZUA-DSIXI-XDDVQ-XWFX7&output=jsonp').then(res => {
|
||||
if (res.result) {
|
||||
dataMap.latitude = res.result.location.lat;
|
||||
dataMap.lngitude = res.result.location.lng;
|
||||
// dataMap.latitude = 30.629673;
|
||||
// dataMap.lngitude = 103.775231;
|
||||
(dataMap.map as any).setCenter(new TMap.LatLng(dataMap.latitude, dataMap.lngitude));
|
||||
reloadMap();
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
};
|
||||
|
||||
const setMarkerBylatLon = (lat, lng) => {
|
||||
dataMap.latitude = lat;
|
||||
dataMap.lngitude = lng;
|
||||
(dataMap.map as any).setCenter(new TMap.LatLng(dataMap.latitude, dataMap.lngitude));
|
||||
reloadMap();
|
||||
}
|
||||
|
||||
// 点击获取经纬度
|
||||
const clickHandler = (evt: any) => {
|
||||
let lavting = evt.latLng
|
||||
console.log(lavting.getLat(), lavting.getLng())
|
||||
return
|
||||
|
||||
setMarkerBylatLon(evt.latLng.lat.toFixed(4), evt.latLng.lng.toFixed(4))
|
||||
return
|
||||
dataMap.latitude = evt.latLng.getLat().toFixed(6);
|
||||
dataMap.lngitude = evt.latLng.getLng().toFixed(6);
|
||||
// (dataMap.map as any).setCenter(new TMap.LatLng(dataMap.latitude, dataMap.lngitude));
|
||||
reloadMap();
|
||||
};
|
||||
//标记地图
|
||||
const markerLayer = () => {
|
||||
dataMap.markerLayer = new TMap.MultiMarker({
|
||||
map: dataMap.map, //指定地图容器
|
||||
//样式定义
|
||||
styles: {
|
||||
//创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
|
||||
"myStyle": new TMap.MarkerStyle({
|
||||
"width": 25, // 点标记样式宽度（像素）
|
||||
"height": 35, // 点标记样式高度（像素）
|
||||
// "src": '../../assets/logo.png', //图片路径
|
||||
'background': 'pink',
|
||||
//焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
|
||||
"anchor": { x: 16, y: 32 }
|
||||
})
|
||||
},
|
||||
//点标记数据数组
|
||||
geometries: [
|
||||
{
|
||||
"id": "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
|
||||
"styleId": 'myStyle', //指定样式id
|
||||
"position": new TMap.LatLng(dataMap.latitude, dataMap.lngitude), //点标记坐标位置
|
||||
},
|
||||
]
|
||||
});
|
||||
};
|
||||
const address = ref('');
|
||||
// 获取搜索经纬度
|
||||
const getLocations = async () => {
|
||||
try {
|
||||
let { result } = await jsonp(`https://apis.map.qq.com/ws/geocoder/v1/?key=SMJBZ-WCHK4-ZPZUA-DSIXI-XDDVQ-XWFX7&address=${address.value}&output=jsonp`);
|
||||
dataMap.latitude = result.location.lat;
|
||||
dataMap.lngitude = result.location.lng;
|
||||
(dataMap.map as any).setCenter(new TMap.LatLng(dataMap.latitude, dataMap.lngitude));
|
||||
reloadMap();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
const querySearch = async (queryString: string, cb: any) => {
|
||||
try {
|
||||
let params = {
|
||||
keyword: queryString,
|
||||
key: "V4LBZ-UKCHA-EUNK7-CUH4F-HOXVO-YTF56", // 填申请到的腾讯key
|
||||
};
|
||||
|
||||
let { data } = await jsonp(`https://apis.map.qq.com/ws/place/v1/suggestion/?key=SMJBZ-WCHK4-ZPZUA-DSIXI-XDDVQ-XWFX7&keyword=${queryString}&output=jsonp`);
|
||||
const results = data.map((item: any) => {
|
||||
let obj = {
|
||||
value: item.address,
|
||||
address: item.address
|
||||
};
|
||||
return obj;
|
||||
});
|
||||
cb(results);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<el-card>
|
||||
<div class="w-[600px]">
|
||||
<div class="w-[800px]">
|
||||
<el-form ref="formRef" :model="formData" label-width="120px" :rules="formRules">
|
||||
<el-tabs v-model="activeName" class="demo-tabs">
|
||||
<el-tab-pane label="基础设置" name="first">
|
||||
|
|
@ -14,8 +14,8 @@
|
|||
<el-switch v-model="formData.status" :active-value="1" :inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="营业时间" prop="title">
|
||||
<el-time-picker v-model="formData.times" is-range range-separator="-"
|
||||
start-placeholder="开始时间" end-placeholder="结束时间" value-format="HH:mm:ss" />
|
||||
<el-time-picker v-model="formData.times" is-range range-separator="-" start-placeholder="开始时间"
|
||||
end-placeholder="结束时间" value-format="HH:mm:ss" />
|
||||
</el-form-item>
|
||||
<el-form-item label="门店地址" prop="title">
|
||||
<el-row>
|
||||
|
|
@ -53,9 +53,7 @@
|
|||
<el-input-number v-model="formData.num" :step="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="门店详细地址" prop="title">
|
||||
<!-- <el-input v-model="formData.title" clearable placeholder="请输入手机号码" /> -->
|
||||
<!-- <myMap></myMap> -->
|
||||
|
||||
<myMap></myMap>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,23 +1,24 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>
|
||||
{{ dataMap.latitude }}-{{ dataMap.lngitude }}
|
||||
<div class="mb-6">
|
||||
<el-autocomplete v-model="address" :fetch-suggestions="querySearch" placeholder="请输入详细地址"
|
||||
:trigger-on-focus="false" />
|
||||
<el-button type="primary" @click="getLocations">
|
||||
<!-- <el-button type="primary" @click="getLocations">
|
||||
搜索
|
||||
</el-button> -->
|
||||
<el-button type="primary" @click="setMarkerBylatLon(30.629673, 103.775231)">
|
||||
搜索
|
||||
</el-button>
|
||||
|
||||
</div>
|
||||
<div id="amp-container" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineComponent, onMounted, reactive, ref, toRefs, inject } from 'vue';
|
||||
import { onMounted, reactive, ref, } from 'vue';
|
||||
import { jsonp } from "vue-jsonp"
|
||||
|
||||
// jsonp('https://apis.map.qq.com/ws/location/v1/ip?ip=111.206.145.41&key=SMJBZ-WCHK4-ZPZUA-DSIXI-XDDVQ-XWFX7&output=jsonp').then(res => {
|
||||
// console.log(res)
|
||||
// })
|
||||
const $api: any = inject("$api");
|
||||
const dataMap = reactive({
|
||||
map: '',
|
||||
markerLayer: '',
|
||||
|
|
@ -33,7 +34,7 @@ const init = () => {
|
|||
let center = new TMap.LatLng(dataMap.latitude, dataMap.lngitude);
|
||||
dataMap.map = new TMap.Map(document.getElementById('amp-container'), {
|
||||
center: center,//设置地图中心点坐标
|
||||
zoom: 11, //设置地图缩放级别
|
||||
// zoom: 11, //设置地图缩放级别
|
||||
viewMode: '2D'
|
||||
});
|
||||
(dataMap.map as any).on('click', clickHandler); // 绑定点击地图获取地理位置的事件
|
||||
|
|
@ -52,29 +53,41 @@ const reloadMap = () => {
|
|||
};
|
||||
const getLocation = async () => {
|
||||
try {
|
||||
let params = {
|
||||
// ip:(window as any ).returnCitySN['cip'],
|
||||
key: "V4LBZ-UKCHA-EUNK7-CUH4F-HOXVO-YTF56",
|
||||
};
|
||||
let { result } = await $api.cerStores.getLoaction(params);
|
||||
// 发起一个post请求
|
||||
|
||||
|
||||
if (result) {
|
||||
dataMap.latitude = result.location.lat;
|
||||
dataMap.lngitude = result.location.lng;
|
||||
jsonp('https://apis.map.qq.com/ws/location/v1/ip?key=SMJBZ-WCHK4-ZPZUA-DSIXI-XDDVQ-XWFX7&output=jsonp').then(res => {
|
||||
if (res.result) {
|
||||
dataMap.latitude = res.result.location.lat;
|
||||
dataMap.lngitude = res.result.location.lng;
|
||||
// dataMap.latitude = 30.629673;
|
||||
// dataMap.lngitude = 103.775231;
|
||||
(dataMap.map as any).setCenter(new TMap.LatLng(dataMap.latitude, dataMap.lngitude));
|
||||
reloadMap();
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
};
|
||||
|
||||
const setMarkerBylatLon = (lat, lng) => {
|
||||
dataMap.latitude = lat;
|
||||
dataMap.lngitude = lng;
|
||||
(dataMap.map as any).setCenter(new TMap.LatLng(dataMap.latitude, dataMap.lngitude));
|
||||
reloadMap();
|
||||
}
|
||||
|
||||
// 点击获取经纬度
|
||||
const clickHandler = (evt: any) => {
|
||||
let lavting = evt.latLng
|
||||
console.log(lavting.getLat(), lavting.getLng())
|
||||
return
|
||||
|
||||
setMarkerBylatLon(evt.latLng.lat.toFixed(4), evt.latLng.lng.toFixed(4))
|
||||
return
|
||||
dataMap.latitude = evt.latLng.getLat().toFixed(6);
|
||||
dataMap.lngitude = evt.latLng.getLng().toFixed(6);
|
||||
(dataMap.map as any).setCenter(new TMap.LatLng(dataMap.latitude, dataMap.lngitude));
|
||||
// (dataMap.map as any).setCenter(new TMap.LatLng(dataMap.latitude, dataMap.lngitude));
|
||||
reloadMap();
|
||||
};
|
||||
//标记地图
|
||||
|
|
@ -107,11 +120,7 @@ const address = ref('');
|
|||
// 获取搜索经纬度
|
||||
const getLocations = async () => {
|
||||
try {
|
||||
let params = {
|
||||
key: "V4LBZ-UKCHA-EUNK7-CUH4F-HOXVO-YTF56", // 填申请到的腾讯key
|
||||
address: address.value, //具体的地址
|
||||
};
|
||||
let { result } = await $api.cerStores.getGeocoder(params);
|
||||
let { result } = await jsonp(`https://apis.map.qq.com/ws/geocoder/v1/?key=SMJBZ-WCHK4-ZPZUA-DSIXI-XDDVQ-XWFX7&address=${address.value}&output=jsonp`);
|
||||
dataMap.latitude = result.location.lat;
|
||||
dataMap.lngitude = result.location.lng;
|
||||
(dataMap.map as any).setCenter(new TMap.LatLng(dataMap.latitude, dataMap.lngitude));
|
||||
|
|
@ -126,7 +135,8 @@ const querySearch = async (queryString: string, cb: any) => {
|
|||
keyword: queryString,
|
||||
key: "V4LBZ-UKCHA-EUNK7-CUH4F-HOXVO-YTF56", // 填申请到的腾讯key
|
||||
};
|
||||
let { data } = await $api.cerStores.getSuggestion(params);
|
||||
|
||||
let { data } = await jsonp(`https://apis.map.qq.com/ws/place/v1/suggestion/?key=SMJBZ-WCHK4-ZPZUA-DSIXI-XDDVQ-XWFX7&keyword=${queryString}&output=jsonp`);
|
||||
const results = data.map((item: any) => {
|
||||
let obj = {
|
||||
value: item.address,
|
||||
|
|
|
|||
Loading…
Reference in New Issue