<template>
|
<view class="queryHistory-wrapper wrapperLayer">
|
<titleBar :titleText='"查询历史价格"' :pageForm='"queryHistory"'></titleBar>
|
<view class="query-container colCen">
|
<view class="box-title">
|
查询历史价格
|
</view>
|
<view class="textareabox">
|
<textarea class="textarea" v-model="linkstr" placeholder="目前只支持查询淘系商品历史价格,请输入商品淘口令或者商品链接;如:https://detail.tmall.com/item.htm?id=631204160899&skuId=4527267480503"
|
placeholder-class="plastyle" />
|
<view class="clean-btn" @tap='clean()'>
|
清空
|
</view>
|
</view>
|
|
<view class="confirm-btn-box">
|
<view class="confirm-btn rowCenCen" @tap='query()'>
|
<view>查询历史价格</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="goods-container pd20" v-if="goodsinfo">
|
<view class="card-container rowCen" @click="targetTb(goodsinfo.goodsId)">
|
<image class="goods-pic" :src="goodsinfo.mainPic" mode="aspectFill"></image>
|
<view class="goods-info colCenBet">
|
<view class="info-top-box">
|
<view class="goodsnameinfo-content rowSta">
|
<view class="tradename">
|
{{goodsinfo.title}}
|
</view>
|
</view>
|
</view>
|
|
<view class="info-btm-box">
|
<view class="discounts-container rowCen borderBox">
|
<view class="coupon-box rowCenCen">
|
<view>
|
{{goodsinfo.couponPrice}}元券
|
</view>
|
</view>
|
<view class="back-box rowCenCen">
|
<view>
|
返{{goodsinfo.fanli}}元
|
</view>
|
</view>
|
</view>
|
<view class="btm-price-info rowCenBet">
|
<view class="pri-info rowEnd">
|
<view class="rmb">
|
￥
|
</view>
|
<view class="price">
|
{{goodsinfo.actualPrice}}
|
</view>
|
<s>￥{{goodsinfo.originalPrice}}</s>
|
</view>
|
<view class="saleNum-box">
|
爆卖{{goodsinfo.monthSales}}件
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="price-trend-container pd20" v-if="goodsinfo">
|
<view class="price-trend colCen">
|
<view class="box-title ">
|
价格走势
|
</view>
|
<view class="charts-box">
|
<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
mapMutations
|
} from "vuex";
|
import uCharts from '../../js_sdk/u-charts/u-charts/u-charts.js';
|
import titleBar from '../../components/backTitlebar.vue'
|
var canvasColumn=null;
|
export default {
|
components: {
|
titleBar
|
},
|
data(){
|
return{
|
linkstr:'',
|
goodsinfo:'',
|
|
cWidth:'',
|
cHeight:'',
|
pixelRatio:1,
|
serverData:'',
|
chartData: {
|
categories: [],
|
series: [{
|
name: '价格',
|
data: [],
|
color: '#000000'
|
}]
|
},
|
|
profshake:true
|
}
|
},
|
onLoad() {
|
if(!this.hasLogin){
|
uni.reLaunch({
|
url:"/pages/login/wxlogin"
|
})
|
}else{
|
this.cWidth=uni.upx2px(670);
|
this.cHeight=uni.upx2px(300);
|
}
|
|
},
|
methods:{
|
targetTb(goodsid){
|
uni.navigateTo({
|
url: '/pages/goods/goodsDetail?id=' + goodsid
|
});
|
},
|
showColumn(canvasId,chartData){
|
var _self = this
|
canvasColumn=new uCharts({
|
$this:_self,
|
canvasId: 'canvasColumn',
|
type: 'line',
|
legend:true,
|
fontSize:11,
|
background:'#FFFFFF',
|
pixelRatio:_self.pixelRatio,
|
animation: true,
|
categories: _self.chartData.categories,
|
series: _self.chartData.series,
|
enableScroll: true,
|
xAxis: {
|
type:'grid',
|
gridType:'dash',
|
disabled:false,
|
disableGrid:true,
|
itemCount:4,//x轴单屏显示数据的数量，默认为5个
|
scrollShow:true,//新增是否显示滚动条，默认false
|
scrollAlign:'left',//滚动条初始位置
|
},
|
yAxis: {
|
disableGrid:true,
|
splitNumber:4,
|
min:0,
|
format:(val)=>{return val.toFixed(0)}
|
},
|
dataLabel: true,
|
width: _self.cWidth*_self.pixelRatio,
|
height: _self.cHeight*_self.pixelRatio,
|
extra: {
|
line:{
|
type: 'straight'
|
}
|
}
|
});
|
},
|
|
query(){
|
var that = this;
|
if(this.profshake){
|
this.profshake = false
|
this.$u.api.getHistory({
|
content: this.linkstr
|
}).then(e => {
|
that.profshake = true
|
if(e.code != 0) return that.$alert(e.msg)
|
if(e.data.length == 0)return that.$alert('暂未查询到商品信息');
|
uni.showToast({
|
title:'查询成功',
|
icon:'none'
|
})
|
that.goodsinfo = e.data.goodsInfo
|
that.chartData.categories = e.data.qushi.dateList
|
that.chartData.series[0].data = e.data.qushi.priceList
|
that.showColumn();
|
}).catch(function (err) {
|
that.profshake = true
|
})
|
|
}
|
},
|
|
clean(){
|
this.linkstr = ''
|
this.goodsinfo = ''
|
},
|
|
touchLineA(e){
|
canvasColumn.scrollStart(e);
|
},
|
moveLineA(e) {
|
canvasColumn.scroll(e);
|
},
|
touchEndLineA(e) {
|
canvasColumn.scrollEnd(e);
|
//下面是toolTip事件，如果滚动后不需要显示，可不填写
|
canvasColumn.showToolTip(e, {
|
format: function (item, category) {
|
return category + ' ' + item.name + ':' + item.data
|
}
|
});
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.queryHistory-wrapper{
|
width: 100%;
|
.query-container{
|
width: 100%;
|
padding: 30rpx 20rpx;
|
background-color: #FFFFFF;
|
.box-title{
|
width: 100%;
|
font-size: 30rpx;
|
font-weight: 500;
|
color: #333333;
|
margin-bottom: 40rpx;
|
}
|
.textareabox{
|
width: 100%;
|
height: 260rpx;
|
background: #F8F8F8;
|
border-radius: 16rpx;
|
position: relative;
|
.plastyle{
|
font-size: 26rpx;
|
font-weight: 500;
|
color: #888888;
|
}
|
.textarea{
|
width: 100%;
|
height: 100%;
|
font-size: 26rpx;
|
font-weight: 500;
|
color: #222222;
|
padding: 20rpx;
|
}
|
.clean-btn{
|
font-size: 26rpx;
|
font-weight: 500;
|
color: #666666;
|
position: absolute;
|
right: 16rpx;
|
bottom: 20rpx;
|
}
|
}
|
|
.confirm-btn-box{
|
width: 100%;
|
padding: 0 40rpx;
|
margin-top: 30rpx;
|
.confirm-btn{
|
width: 100%;
|
height: 86rpx;
|
background: #FF900B;
|
border-radius: 43rpx;
|
font-size: 30rpx;
|
font-weight: 500;
|
color: #FFFFFF;
|
}
|
}
|
}
|
|
.goods-container{
|
width: 100%;
|
.card-container{
|
width: 100%;
|
height: 262rpx;
|
background: #FFFFFF;
|
border-radius: 16rpx;
|
margin-top: 20rpx;
|
padding: 0 10rpx;
|
.goods-pic{
|
width:222rpx;
|
height: 222rpx;
|
border-radius: 16rpx;
|
}
|
.goods-info{
|
margin-left: 20rpx;
|
width: 420rpx;
|
height: 222rpx;
|
.info-top-box{
|
width: 100%;
|
.goodsnameinfo-content {
|
width: 100%;
|
margin-bottom: 15rpx;
|
|
.typeIcon-content {
|
width: 60rpx;
|
height: 24rpx;
|
margin-right: 5rpx;
|
margin-top: 8rpx;
|
}
|
|
.tradename {
|
width: 400rpx;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #333333;
|
}
|
}
|
}
|
|
.info-btm-box{
|
width: 100%;
|
.discounts-container {
|
width: 100%;
|
margin-bottom: 15rpx;
|
|
.coupon-box {
|
width: 102rpx;
|
height: 30rpx;
|
background: url(../../static/images/goods/couponbac.png)no-repeat;
|
background-size: 100% 100%;
|
font-size: 20rpx;
|
font-weight: 500;
|
color: #FF4242;
|
}
|
|
.back-box {
|
height: 30rpx;
|
padding: 0 10rpx;
|
background: linear-gradient(-90deg, #7619EC, #A429F3);
|
border-radius: 5rpx;
|
margin-left: 8rpx;
|
font-size: 20rpx;
|
font-weight: 500;
|
color: #FFFFFF;
|
}
|
}
|
.btm-price-info{
|
width: 100%;
|
margin-top: 15rpx;
|
.pri-info{
|
.rmb{
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #FE3738;
|
line-height: 40rpx;
|
}
|
.price{
|
font-size: 30rpx;
|
font-weight: bold;
|
color: #FE3738;
|
}
|
s{
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #999999;
|
line-height: 40rpx;
|
margin-left: 5rpx;
|
}
|
}
|
|
.saleNum-box{
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #999999;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.price-trend-container{
|
width: 100%;
|
margin-top: 20rpx;
|
.price-trend{
|
width: 100%;
|
height: 420rpx;
|
background: #FFFFFF;
|
border-radius: 16rpx;
|
padding: 20rpx;
|
.box-title{
|
width: 100%;
|
font-size: 28rpx;
|
font-weight: 500;
|
color: #333333;
|
margin: 20rpx 0;
|
}
|
.charts-box{
|
width: 670rpx;
|
height: 300rpx;
|
margin-top: 20rpx;
|
background-color: #FFFFFF;
|
.charts{
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
