first commit
This commit is contained in:
2035
src/components/priceReference/index copy.vue
Normal file
2035
src/components/priceReference/index copy.vue
Normal file
File diff suppressed because it is too large
Load Diff
687
src/components/priceReference/index.vue
Normal file
687
src/components/priceReference/index.vue
Normal file
@@ -0,0 +1,687 @@
|
||||
<template>
|
||||
<div class="priceReference ">
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="通过地址搜索商品">
|
||||
<MapDialog
|
||||
:dialogMapShow='dialogMapShow'
|
||||
@closeMapDialog='closeMapDialog'
|
||||
@getPosition='getPosition'
|
||||
></MapDialog>
|
||||
<div class="searchAddress">
|
||||
<el-form
|
||||
ref="form"
|
||||
inline
|
||||
label-width="90px"
|
||||
>
|
||||
<el-form-item label="平台:">
|
||||
<el-select
|
||||
size="mini"
|
||||
v-model="vendorID"
|
||||
placeholder="请选择"
|
||||
style="width: 100px;"
|
||||
>
|
||||
<el-option
|
||||
:key="-1"
|
||||
label="不限"
|
||||
:value="-1"
|
||||
></el-option>
|
||||
<el-option
|
||||
v-for="item in ConVendorName"
|
||||
:key="item.vendorID"
|
||||
:label="item.name"
|
||||
:value="item.vendorID"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序:">
|
||||
<el-select
|
||||
size="mini"
|
||||
v-model="sortType"
|
||||
placeholder="请选择"
|
||||
style="width: 110px;"
|
||||
>
|
||||
<el-option
|
||||
:key="0"
|
||||
label="无"
|
||||
:value="0"
|
||||
></el-option>
|
||||
<el-option
|
||||
:key="-1"
|
||||
label="销量高到低"
|
||||
:value="-1"
|
||||
></el-option>
|
||||
<el-option
|
||||
:key="1"
|
||||
label="销量低到高"
|
||||
:value="1"
|
||||
></el-option>
|
||||
<el-option
|
||||
:key="2"
|
||||
label="距离近到远"
|
||||
:value="2"
|
||||
></el-option>
|
||||
<el-option
|
||||
:key="-2"
|
||||
label="距离远到近"
|
||||
:value="-2"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
<el-button
|
||||
@click="dialogMapShow=true"
|
||||
size="mini"
|
||||
>选择地址及范围</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="平台门店ID:">
|
||||
<el-input
|
||||
size="mini"
|
||||
v-model="vendorStoreIDs"
|
||||
style="width:150px;"
|
||||
placeholder="请输入平台门店ID"
|
||||
></el-input>
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item label="商品关键字:">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="productKey"
|
||||
class="input_product"
|
||||
size="mini"
|
||||
placeholder="请输入搜索商品关键字"
|
||||
:clearable="true"
|
||||
style="width:200px;"
|
||||
></el-input>
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
|
||||
<el-button
|
||||
@click="getProductList('new')"
|
||||
type="primary"
|
||||
size="mini"
|
||||
class="input_product"
|
||||
>查询商品</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
</div>
|
||||
<div class="searchProduct">
|
||||
|
||||
<div
|
||||
class="flex"
|
||||
style="margin:10px 0px 0 5px;"
|
||||
v-if="productList.length > 0"
|
||||
>
|
||||
<el-button
|
||||
@click="exportExcel"
|
||||
size="mini"
|
||||
type="success"
|
||||
>导出excel</el-button>
|
||||
|
||||
</div>
|
||||
<div class="productList">
|
||||
<el-table
|
||||
:data="productList"
|
||||
style="width: 100%"
|
||||
height="calc(100vh - 320px)"
|
||||
>
|
||||
<el-table-column
|
||||
prop="orgCode"
|
||||
label="商家id"
|
||||
width="80"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="storeId"
|
||||
label="门店id"
|
||||
width="100"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="storeName"
|
||||
label="店名"
|
||||
width="150"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="平台"
|
||||
width="150"
|
||||
>
|
||||
<div slot-scope="scope">
|
||||
<div
|
||||
v-for="(item,index) in ConVendorName "
|
||||
:key="index"
|
||||
>
|
||||
<span v-if="item.vendorID==scope.row.vendorID">{{item.name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="skuId"
|
||||
label="商品ID"
|
||||
width="120"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="skuName"
|
||||
label="商品名"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="parameter"
|
||||
label="规格"
|
||||
width="100"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="monthSales"
|
||||
label="月销量"
|
||||
width="100"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="realTimePrice"
|
||||
label="促销价"
|
||||
width="100"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="basicPrice"
|
||||
label="原价"
|
||||
width="100"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="page">
|
||||
<el-pagination
|
||||
@size-change="sizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:page-sizes="[15, 30, 50]"
|
||||
:page-size.sync="pageSize"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:current-page="page"
|
||||
:total="totalCount"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getJdDaojiaApi, getJdDaojiaApi3, queryPageSkus } from '@/apis/priceReference.js'
|
||||
import api from '@/utils/api'
|
||||
import { showLoad, hideLoad } from '@/tools/loading.js'
|
||||
import SparkMD5 from 'spark-md5'
|
||||
import { json2Excel } from '@/tools/excel.js'
|
||||
import MapDialog from '@/components/commons/map-dialog'
|
||||
export default {
|
||||
name: 'priceReference',
|
||||
components: {
|
||||
MapDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
totalCount: 0,
|
||||
sortType: 0, //排序
|
||||
vendorStoreIDs: '',
|
||||
vendorID: -1,
|
||||
dialogMapShow: false,
|
||||
cityL2: [],
|
||||
cityProps: {
|
||||
value: 'code',
|
||||
label: 'name'
|
||||
},
|
||||
wb: '923047ae3f8d11d8b19aeb9f3d1bc200', // 京东到家MD5关键后缀
|
||||
cityId: '', // 选中的城市ID
|
||||
region: '',
|
||||
address: { // 选中的地址，title-略缩名，address-详细地址
|
||||
title: '',
|
||||
address: ''
|
||||
},
|
||||
addressKeyword: '', // 键入的地址搜索关键字
|
||||
productKey: '', // 键入的商品搜索关键字
|
||||
lat: '', // 经纬度
|
||||
lng: '', // 经纬度
|
||||
page: 1, // 控制请求页数
|
||||
offset: 0, // 控制请求页数
|
||||
pageSize: 15, // 控制请求每次拉取多少商家
|
||||
noMore: 2, // 是否显示加载更多/已加载完
|
||||
cityList: [], // 通过京东到家接口获取到的城市列表
|
||||
addressList: [], // 通过京东到家接口获取到的地址列表
|
||||
filter: { // 通过京东到家接口获取到的商品列表进行关键字过滤，long-限制商品名长度，key-限制带对应关键字的商品不显示，可以输入多个关键字，以‘/’分隔
|
||||
minParameter: '', // 最小规格
|
||||
maxParameter: '', // 最大规格
|
||||
long: '',
|
||||
key: ''
|
||||
},
|
||||
isShowAll: false, // 当一个店铺的秒杀和直降超过50时，是显示50，还是继续请求，提取更多
|
||||
productList: [], // 通过京东到家接口获取到的商品列表
|
||||
unitPrice1: '待计算',
|
||||
unitPrice2: '待计算',
|
||||
storeType: '3997',
|
||||
killCount: '',
|
||||
downCount: '',
|
||||
storeIdKey: '',
|
||||
storeList: [],
|
||||
storeList2: [],
|
||||
canMoveAddress: false,
|
||||
position: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
closeMapDialog() {
|
||||
this.dialogMapShow = false
|
||||
},
|
||||
getPosition(json) {
|
||||
this.position = json
|
||||
},
|
||||
sizeChange() {
|
||||
this.$nextTick(() => {
|
||||
this.getProductList()
|
||||
});
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.page = val;
|
||||
this.offset = (val - 1) * this.pageSize;
|
||||
this.getProductList()
|
||||
// document.querySelector(".el-table__body-wrapper").scrollTop = 0;
|
||||
},
|
||||
moveAddress() {
|
||||
this.canMoveAddress = !this.canMoveAddress
|
||||
},
|
||||
moveDistanceList() {
|
||||
let distanceList = []
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
let distance = {
|
||||
center: [this.storeItem2.center[0], this.storeItem2.center[1] + 0.000009405717451407729 * i * -1000],
|
||||
title: i + 'km',
|
||||
offset: [0, 0],
|
||||
zIndex: 8
|
||||
}
|
||||
distanceList.push(distance)
|
||||
}
|
||||
this.distanceList = distanceList
|
||||
},
|
||||
changeAmap: function (e) {
|
||||
if (e.target.CLASS_NAME === 'AMap.Circle') {
|
||||
this.tmpDeliveryRange = e.target.De.radius
|
||||
}
|
||||
if (e.target.CLASS_NAME === 'AMap.Polygon') {
|
||||
this.path = e.target.Uh.path.join(';')
|
||||
}
|
||||
},
|
||||
move: function (e) {
|
||||
this.ismap = false // 拉动圆心时，先隐藏圆，再显示。。。目前禁止圆心拖动并恢复圆心位置只能这样实现
|
||||
this.$alert('请不要直接拉动圆心，可以拉动坐标定位点', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
callback: () => {
|
||||
this.ismap = true
|
||||
}
|
||||
})
|
||||
},
|
||||
onSearchResult(pois) {
|
||||
let center = []
|
||||
center.push(pois[0].lng)
|
||||
center.push(pois[0].lat)
|
||||
let lngDistance = this.storeItem2.center[0] - center[0]
|
||||
let latDistance = this.storeItem2.center[1] - center[1]
|
||||
this.storeItem2.center = center
|
||||
// 地址编辑辅助线偏移
|
||||
this.moveDistanceList()
|
||||
// 配送范围是多边形，才进行如下操作
|
||||
if (this.storeItem2.deliveryRange2 instanceof Array && this.storeItem2.deliveryRange2.length > 0) {
|
||||
let polygon = this.storeItem2.deliveryRange2.map(item => {
|
||||
return [item.lng - lngDistance, item.lat - latDistance]
|
||||
})
|
||||
this.storeItem2.deliveryRange2 = polygon
|
||||
let path = []
|
||||
this.storeItem2.deliveryRange2.forEach(item => {
|
||||
path.push([item[0], item[1]].join(','))
|
||||
})
|
||||
path = path.join(';')
|
||||
this.path = path
|
||||
}
|
||||
this.storeInfo.lng = center[0]
|
||||
this.storeInfo.lat = center[1]
|
||||
},
|
||||
// 通过关键字获取商品列表
|
||||
async getProductList() {
|
||||
showLoad()
|
||||
let { lng, radius, lat, cityCode } = this.position
|
||||
let json = {
|
||||
keyword: this.productKey,
|
||||
sortType: this.sortType,
|
||||
radius: (lng && radius) ? radius : '',
|
||||
offset: this.offset,
|
||||
pageSize: this.pageSize,
|
||||
vendorID: this.vendorID,
|
||||
vendorStoreIDs: this.vendorStoreIDs,
|
||||
lng: lng ? lng : '',
|
||||
lat: lat ? lat : '',
|
||||
cityCode: cityCode ? cityCode : '',
|
||||
}
|
||||
json = JSON.parse(JSON.stringify(json))
|
||||
let res = await queryPageSkus(json)
|
||||
if (res && res.data) {
|
||||
this.productList = res.data
|
||||
this.totalCount = res.totalCount
|
||||
} else {
|
||||
this.productList = []
|
||||
this.totalCount = 0
|
||||
}
|
||||
//清空条件this.position={}
|
||||
hideLoad()
|
||||
},
|
||||
cityChange(val) {
|
||||
this.cityId = val[0]
|
||||
this.cityL2.forEach(item => {
|
||||
if (item.code === val[0]) {
|
||||
this.searchOption.city = item.name
|
||||
}
|
||||
})
|
||||
},
|
||||
// 选择地址，变更相应数据
|
||||
chooseAddress: function (address) {
|
||||
this.address.title = address.title
|
||||
this.address.address = address.address
|
||||
this.addressList = []
|
||||
// this.addressKeyword = ''
|
||||
this.lat = address.location.lat
|
||||
this.lng = address.location.lng
|
||||
this.productList = []
|
||||
this.noMore = 2
|
||||
},
|
||||
// 更改过滤参数，变更相应数据
|
||||
filterChange: function () {
|
||||
this.productList = []
|
||||
this.noMore = 2
|
||||
},
|
||||
// 导出到excel
|
||||
async exportExcel() {
|
||||
let fileName = `价格参考`
|
||||
let excelData = []
|
||||
showLoad()
|
||||
let { lng, radius, lat, cityCode } = this.position
|
||||
let json = {
|
||||
keyword: this.productKey,
|
||||
sortType: this.sortType,
|
||||
radius: (lng && radius) ? radius : '',
|
||||
offset: this.offset,
|
||||
pageSize: -1,
|
||||
vendorID: this.vendorID,
|
||||
vendorStoreIDs: this.vendorStoreIDs,
|
||||
lng: lng ? lng : '',
|
||||
lat: lat ? lat : '',
|
||||
cityCode: cityCode ? cityCode : '',
|
||||
}
|
||||
json = JSON.parse(JSON.stringify(json))
|
||||
let res = await queryPageSkus(json)
|
||||
if (res && res.data) {
|
||||
res.data.forEach(item => {
|
||||
let plate=this.ConVendorName.filter(it=>it.vendorID===item.vendorID)
|
||||
|
||||
excelData.push({
|
||||
'商家id': item.orgCode,
|
||||
'门店id': item.storeId,
|
||||
'平台': plate[0].name,
|
||||
'门店名称': item.storeName,
|
||||
'商品id': item.skuId,
|
||||
'商品名称': item.skuName,
|
||||
'规格': item.parameter,
|
||||
'月销量': item.monthSales,
|
||||
'促销价': item.realTimePrice,
|
||||
'原价': item.basicPrice,
|
||||
'促销价单价': item.realTimePrice,
|
||||
'规格': item.parameter
|
||||
})
|
||||
})
|
||||
json2Excel(excelData, fileName)
|
||||
} else {
|
||||
this.$message.warning('此范围内无数据')
|
||||
}
|
||||
//清空条件this.position={}
|
||||
hideLoad()
|
||||
|
||||
},
|
||||
|
||||
// 切换搜索商品方式，重置数据
|
||||
beforeLeave: function () {
|
||||
this.addressKeyword = ''
|
||||
this.productKey = ''
|
||||
this.page = 1
|
||||
this.pageSize = 0
|
||||
this.noMore = 2
|
||||
this.addressList = []
|
||||
this.filter = {
|
||||
minParameter: '',
|
||||
maxParameter: '',
|
||||
long: '',
|
||||
key: ''
|
||||
}
|
||||
this.productList = []
|
||||
this.unitPrice1 = '待计算'
|
||||
this.unitPrice2 = '待计算'
|
||||
this.isShowAll = false
|
||||
// 为保证两个功能交互，以下数据切换时不清空
|
||||
this.killCount = ''
|
||||
this.downCount = ''
|
||||
// this.lat = ''
|
||||
// this.lng = ''
|
||||
// this.storeList = []
|
||||
// this.storeIdKey = ''
|
||||
// this.cityId = ''
|
||||
// this.region = ''
|
||||
// this.address = {
|
||||
// title: '',
|
||||
// address: ''
|
||||
// }
|
||||
},
|
||||
// 通过商品的skuName过滤，提取商品规格
|
||||
getParameter: function (str) {
|
||||
str = str.toLowerCase()
|
||||
let filter = [/[\u4E00-\u9FA5]/g, /\s*/g, /（/g, /）/g, /，/g, /【/g, /】/g, /\(/g, /\)/g, /,/g, /\[/g, /\]/g, /\{/g, /\}/g, /\//g, /!/g, /！/g, /\+/g, /、/g, /[a-fh-jn-z]/g]
|
||||
// 只要符合filter里规则的全部被剔除
|
||||
if (str.indexOf('l') > 0) {
|
||||
filter.forEach(item => {
|
||||
str = str.replace(item, '')
|
||||
})
|
||||
// 判断原单位是不是ml
|
||||
let isMl = true
|
||||
if (str.indexOf('ml') < 0) {
|
||||
isMl = false
|
||||
}
|
||||
let arr = str.split('*')
|
||||
str = 1
|
||||
if (arr.length > 0) {
|
||||
arr.forEach(item => {
|
||||
item = item.replace(/[a-z]/g, '')
|
||||
str *= item
|
||||
})
|
||||
}
|
||||
// 如果原单位是ml,直接+ml,如果是L，乘1000再加ml
|
||||
if (isMl) {
|
||||
str = str + 'ml'
|
||||
} else {
|
||||
str = str * 1000 + 'ml'
|
||||
}
|
||||
} else if (str.indexOf('g') > 0) {
|
||||
filter.forEach(item => {
|
||||
str = str.replace(item, '')
|
||||
})
|
||||
// 判断原单位是不是kg
|
||||
let isKg = true
|
||||
if (str.indexOf('kg') < 0) {
|
||||
isKg = false
|
||||
}
|
||||
let arr = str.split('*')
|
||||
str = 1
|
||||
if (arr.length > 0) {
|
||||
arr.forEach(item => {
|
||||
item = item.replace(/[a-z]/g, '')
|
||||
str *= item
|
||||
})
|
||||
}
|
||||
// 如果原单位是g,直接+g,如果是kg，乘1000再加g
|
||||
if (isKg) {
|
||||
str = str * 1000 + 'g'
|
||||
} else {
|
||||
str = str + 'g'
|
||||
}
|
||||
}
|
||||
return str
|
||||
},
|
||||
// 计算单价，返回str为每500g(斤)/500ml(斤)的单价
|
||||
getUnitPrice: function (parameter, price) {
|
||||
let str = ''
|
||||
if (parameter.indexOf('g') > 0) {
|
||||
str = (price / (parameter.replace('g', '') / 500)).toFixed(2)
|
||||
} else if (parameter.indexOf('ml') > 0) {
|
||||
str = (price / (parameter.replace('ml', '') / 500)).toFixed(2)
|
||||
}
|
||||
return str
|
||||
},
|
||||
// 选择地址，变更相应数据，并调取获取附近店铺接口
|
||||
chooseAddress2: function (address) {
|
||||
this.address.title = address.title
|
||||
this.address.address = address.address
|
||||
this.addressList = []
|
||||
// this.addressKeyword = ''
|
||||
this.lat = address.location.lat
|
||||
this.lng = address.location.lng
|
||||
this.productList = []
|
||||
this.storeList = []
|
||||
this.noMore = 2
|
||||
},
|
||||
|
||||
// 排序功能模块
|
||||
sortBypriority: function (a, b) {
|
||||
return b.priority - a.priority
|
||||
},
|
||||
// 排序
|
||||
sorting: function (storeList) {
|
||||
storeList.sort(this.sortBypriority)
|
||||
},
|
||||
// 计算均价
|
||||
getAllUnitPrice: function () {
|
||||
let money1 = 0
|
||||
let money2 = 0
|
||||
this.productList.forEach(item => {
|
||||
money1 += Number(item.unitPrice1)
|
||||
money2 += Number(item.unitPrice2)
|
||||
})
|
||||
this.unitPrice1 = (money1 / this.productList.length).toFixed(2)
|
||||
this.unitPrice2 = (money2 / this.productList.length).toFixed(2)
|
||||
},
|
||||
// 改变switch开关的值触发事件
|
||||
isShowAllChange: function () {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.priceReference {
|
||||
// min-height: 850px;
|
||||
margin: 10px;
|
||||
padding: 20px 20px 10px;
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
|
||||
.el-table {
|
||||
min-height: 150px;
|
||||
}
|
||||
.page {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.el-tabs.el-tabs--top.el-tabs--border-card {
|
||||
// min-height: 830px;
|
||||
.el-tabs__content {
|
||||
// min-height: 700px;
|
||||
}
|
||||
}
|
||||
.searchAddress {
|
||||
display: flex;
|
||||
position: relative;
|
||||
.chooseCity {
|
||||
width: 120px;
|
||||
}
|
||||
.input_address {
|
||||
width: auto;
|
||||
flex: 1;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.addressList {
|
||||
width: 80%;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 120px;
|
||||
z-index: 1001;
|
||||
.addressOption {
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
padding-left: 20px;
|
||||
&:hover {
|
||||
background: #999;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.address_title {
|
||||
color: #666;
|
||||
}
|
||||
.address_address {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.locationAddress {
|
||||
height: 40px;
|
||||
p {
|
||||
margin: 0;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
.searchProduct {
|
||||
.search_product {
|
||||
display: flex;
|
||||
.input_product {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.product_filter {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
.flex_1 {
|
||||
padding: 0 5px;
|
||||
flex: 1;
|
||||
.el-input {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.exportExcel {
|
||||
margin: 10px 0 5px 5px;
|
||||
}
|
||||
.red {
|
||||
color: red;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.flex_1 {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user