feat(vipCenter): 用户中心主题样式样式修改
This commit is contained in:
woody
parent
6913479b40
commit
1e4ba285ae
|
|
@ -6,13 +6,12 @@
|
|||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div id="firstPv"
|
||||
style="width: 700px; height: 400px"></div>
|
||||
<div id="firstPv" style="width: 700px; height: 400px"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as api from '@/api/activity.js'
|
||||
import * as api from "@/api/activity.js";
|
||||
export default {
|
||||
// mounted() {
|
||||
// this.upDateCover()
|
||||
|
|
@ -21,31 +20,31 @@ export default {
|
|||
upDateCover() {
|
||||
api.achieveDay().then((res) => {
|
||||
let arr1 = res.data.map((item) => {
|
||||
return item.settleDate
|
||||
})
|
||||
return item.settleDate;
|
||||
});
|
||||
let arr2 = res.data.map((item) => {
|
||||
return item.aNewPv
|
||||
})
|
||||
return item.aNewPv;
|
||||
});
|
||||
let arr3 = res.data.map((item) => {
|
||||
return item.bNewPv
|
||||
})
|
||||
this.drawChart(arr1, arr2, arr3)
|
||||
})
|
||||
return item.bNewPv;
|
||||
});
|
||||
this.drawChart(arr1, arr2, arr3);
|
||||
});
|
||||
},
|
||||
drawChart(arr1, arr2, arr3) {
|
||||
let myChart = this.$echarts.init(document.getElementById('firstPv'))
|
||||
let myChart = this.$echarts.init(document.getElementById("firstPv"));
|
||||
// 指定图表的配置项和数据
|
||||
let option = {
|
||||
title: {
|
||||
text: '',
|
||||
subtext: '业绩(万)',
|
||||
text: "",
|
||||
subtext: "业绩",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
top: 'bottom',
|
||||
data: ['左区', '右区'],
|
||||
top: "bottom",
|
||||
data: ["左区", "右区"],
|
||||
itemWidth: 20, // 长方形宽度
|
||||
itemHeight: 10, // 长方形高度
|
||||
},
|
||||
|
|
@ -55,9 +54,9 @@ export default {
|
|||
interval: 0,
|
||||
// rotate: 45,
|
||||
textStyle: {
|
||||
color: '#000',
|
||||
fontSize: '10',
|
||||
itemSize: '',
|
||||
color: "#000",
|
||||
fontSize: "10",
|
||||
itemSize: "",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
|
|
@ -68,19 +67,19 @@ export default {
|
|||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
type: "dashed",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '左区',
|
||||
type: 'line',
|
||||
name: "左区",
|
||||
type: "line",
|
||||
data: arr2,
|
||||
symbol: 'none',
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#5A64FF',
|
||||
color: "#5A64FF",
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
|
|
@ -90,13 +89,13 @@ export default {
|
|||
},
|
||||
},
|
||||
{
|
||||
name: '右区',
|
||||
type: 'line',
|
||||
name: "右区",
|
||||
type: "line",
|
||||
data: arr3,
|
||||
symbol: 'none',
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#01C4FF',
|
||||
color: "#01C4FF",
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
|
|
@ -106,13 +105,12 @@ export default {
|
|||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
};
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option)
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<style></style>
|
||||
|
|
|
|||
|
|
@ -81,8 +81,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="money">
|
||||
{{ "左区" }}：{{ dataList.memberAwardsUnderVO.aSumRealPv
|
||||
}}{{ "万" }}
|
||||
{{ "左区" }}：{{ dataList.memberAwardsUnderVO.aSumRealPv }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-right">
|
||||
|
|
@ -144,8 +143,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="money">
|
||||
{{ "右区" }}：{{ dataList.memberAwardsUnderVO.bSumRealPv
|
||||
}}{{ "万" }}
|
||||
{{ "右区" }}：{{ dataList.memberAwardsUnderVO.bSumRealPv }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,32 +1,32 @@
|
|||
<template>
|
||||
<div class="yjfb">
|
||||
<div class="qiu1" style="cursor: pointer;" @click="goDetail(1,1)">
|
||||
<div class="qiu1" style="cursor: pointer" @click="goDetail(1, 1)">
|
||||
<div class="num">{{ achieveData.leftCoun || 0 }}</div>
|
||||
<div class="btom">{{ '左区人数' }}</div>
|
||||
<div class="btom">{{ "左区人数" }}</div>
|
||||
</div>
|
||||
<div class="qiu2" style="cursor: pointer;" @click="goDetail(1,2)">
|
||||
<div class="qiu2" style="cursor: pointer" @click="goDetail(1, 2)">
|
||||
<div class="num">{{ achieveData.leftAchieve || 0 }}</div>
|
||||
<div class="btom">{{ '左区业绩（万）' }}</div>
|
||||
<div class="btom">{{ "左区业绩" }}</div>
|
||||
</div>
|
||||
<div class="qiu4" style="cursor: pointer;" @click="goDetail(1,3)">
|
||||
<div class="qiu4" style="cursor: pointer" @click="goDetail(1, 3)">
|
||||
<div class="num">{{ achieveData.leftDirectAchieve || 0 }}</div>
|
||||
<div class="btom">{{'左区'}}{{'血缘业绩（万）'}}</div>
|
||||
<div class="btom">{{ "左区" }}{{ "血缘业绩" }}</div>
|
||||
</div>
|
||||
<div class="qiu3" style="cursor: pointer;" @click="goDetail(3,4)">
|
||||
<div class="qiu3" style="cursor: pointer" @click="goDetail(3, 4)">
|
||||
<div class="num">{{ achieveData.directAchieve || 0 }}</div>
|
||||
<div class="btom">{{ '血缘业绩（万）' }}</div>
|
||||
<div class="btom">{{ "血缘业绩" }}</div>
|
||||
</div>
|
||||
<div class="qiu4" style="cursor: pointer;" @click="goDetail(2,3)">
|
||||
<div class="qiu4" style="cursor: pointer" @click="goDetail(2, 3)">
|
||||
<div class="num">{{ achieveData.rightDirectAchieve || 0 }}</div>
|
||||
<div class="btom">{{'右区'}}{{'血缘业绩（万）'}}</div>
|
||||
<div class="btom">{{ "右区" }}{{ "血缘业绩" }}</div>
|
||||
</div>
|
||||
<div class="qiu2" style="cursor: pointer;" @click="goDetail(2,2)">
|
||||
<div class="qiu2" style="cursor: pointer" @click="goDetail(2, 2)">
|
||||
<div class="num">{{ achieveData.rightAchieve || 0 }}</div>
|
||||
<div class="btom">{{ '右区业绩（万）' }}</div>
|
||||
<div class="btom">{{ "右区业绩" }}</div>
|
||||
</div>
|
||||
<div class="qiu1" style="cursor: pointer;" @click="goDetail(2,1)">
|
||||
<div class="qiu1" style="cursor: pointer" @click="goDetail(2, 1)">
|
||||
<div class="num">{{ achieveData.rightCount || 0 }}</div>
|
||||
<div class="btom">{{ '右区人数' }}</div>
|
||||
<div class="btom">{{ "右区人数" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -45,18 +45,18 @@ export default {
|
|||
// // 定义是否必须传
|
||||
// required: false,
|
||||
// },
|
||||
achieveData:{
|
||||
type:Object,
|
||||
}
|
||||
achieveData: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// this.getFgDataList()
|
||||
},
|
||||
methods: {
|
||||
goDetail(index,type){
|
||||
goDetail(index, type) {
|
||||
this.$router.push({
|
||||
path:"/marketDynamics",
|
||||
query: { id: 0,ifDetail:index,monthScoreType:type},
|
||||
path: "/marketDynamics",
|
||||
query: { id: 0, ifDetail: index, monthScoreType: type },
|
||||
});
|
||||
},
|
||||
// getFgDataList(val) {
|
||||
|
|
@ -115,18 +115,20 @@ export default {
|
|||
width: 253px;
|
||||
height: 253px;
|
||||
margin: 0 8px;
|
||||
background: linear-gradient(208deg, #667AFF 0%, #6B7CEA 100%); display: flex;
|
||||
background: linear-gradient(208deg, #667aff 0%, #6b7cea 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.qiu4{
|
||||
.qiu4 {
|
||||
width: 179px;
|
||||
height: 179px;
|
||||
border-radius: 50%;
|
||||
margin: 0 10px;
|
||||
margin-top: 8px;
|
||||
background: linear-gradient(153deg, #65FF61 0%, #48FF2A 100%); display: flex;
|
||||
background: linear-gradient(153deg, #65ff61 0%, #48ff2a 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -8,12 +8,12 @@
|
|||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import { getRecommendCommunity } from "@/api/index";
|
||||
export default {
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import { getRecommendCommunity } from "@/api/index";
|
||||
export default {
|
||||
name: "recommendTime",
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -22,13 +22,13 @@
|
|||
{
|
||||
value: 0,
|
||||
age: 0,
|
||||
name: '大区',
|
||||
name: "大区",
|
||||
itemStyle: { color: "#2982ff" },
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
age: 0,
|
||||
name: '小区',
|
||||
name: "小区",
|
||||
itemStyle: { color: "#01c291" },
|
||||
},
|
||||
],
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
},
|
||||
ageChart(datas) {
|
||||
var myChart = echarts.init(document.getElementById("main3"));
|
||||
let that = this
|
||||
let that = this;
|
||||
var option = {
|
||||
legend: {
|
||||
// 图例
|
||||
|
|
@ -83,8 +83,7 @@
|
|||
"人" +
|
||||
"\n " +
|
||||
"业绩：" +
|
||||
data.data.value +
|
||||
that.$t('S_C_58')
|
||||
data.data.value
|
||||
);
|
||||
},
|
||||
lineHeight: 25, // 行高
|
||||
|
|
@ -101,14 +100,14 @@
|
|||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .el-select .el-input .el-select__caret {
|
||||
<style scoped lang="scss">
|
||||
::v-deep .el-select .el-input .el-select__caret {
|
||||
color: #333;
|
||||
}
|
||||
.lines {
|
||||
}
|
||||
.lines {
|
||||
width: 2px;
|
||||
height: 470px;
|
||||
opacity: 1;
|
||||
|
|
@ -117,41 +116,41 @@
|
|||
bottom: 50px;
|
||||
left: 50%;
|
||||
margin-left: -110px;
|
||||
}
|
||||
.right-lines {
|
||||
}
|
||||
.right-lines {
|
||||
position: absolute;
|
||||
right: 80px;
|
||||
top: 140px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
.item-s {
|
||||
}
|
||||
.item-s {
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
line-height: 24px;
|
||||
}
|
||||
.bg-color {
|
||||
}
|
||||
.bg-color {
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
border-radius: 2px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.flex-s {
|
||||
}
|
||||
.flex-s {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 700px;
|
||||
}
|
||||
.styles {
|
||||
}
|
||||
.styles {
|
||||
position: absolute;
|
||||
right: -30px;
|
||||
z-index: 111;
|
||||
top: 60px;
|
||||
/*background: rgba(0,0,0,0.05);*/
|
||||
/*border-radius: 4px 4px 4px 4px;*/
|
||||
}
|
||||
::v-deep .el-select .el-input__inner {
|
||||
}
|
||||
::v-deep .el-select .el-input__inner {
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,17 +6,14 @@
|
|||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div id="mounthData"
|
||||
style="width: 700px; height: 400px">
|
||||
|
||||
</div>
|
||||
<div id="mounthData" style="width: 700px; height: 400px"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as api from '@/api/activity.js'
|
||||
import * as api from "@/api/activity.js";
|
||||
export default {
|
||||
props:{
|
||||
props: {
|
||||
time: {
|
||||
type: Number,
|
||||
// 定义是否必须传
|
||||
|
|
@ -35,31 +32,31 @@ export default {
|
|||
})
|
||||
.then((res) => {
|
||||
let arr1 = res.data.map((item) => {
|
||||
return item.date
|
||||
})
|
||||
return item.date;
|
||||
});
|
||||
let arr2 = res.data.map((item) => {
|
||||
return item.aNewPv
|
||||
})
|
||||
return item.aNewPv;
|
||||
});
|
||||
let arr3 = res.data.map((item) => {
|
||||
return item.bNewPv
|
||||
})
|
||||
this.drawChart(arr1, arr2, arr3)
|
||||
})
|
||||
return item.bNewPv;
|
||||
});
|
||||
this.drawChart(arr1, arr2, arr3);
|
||||
});
|
||||
},
|
||||
drawChart(arr1, arr2, arr3) {
|
||||
// 基于准备好的dom，初始化echarts实例 这个和上面的main对应
|
||||
let myChart = this.$echarts.init(document.getElementById('mounthData'))
|
||||
let myChart = this.$echarts.init(document.getElementById("mounthData"));
|
||||
// 指定图表的配置项和数据
|
||||
let option = {
|
||||
title: {
|
||||
text: '',
|
||||
subtext: '业绩(万)',
|
||||
text: "",
|
||||
subtext: "业绩",
|
||||
},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
top: 'bottom',
|
||||
bottom: '5%',
|
||||
data: ['左区', '右区'],
|
||||
top: "bottom",
|
||||
bottom: "5%",
|
||||
data: ["左区", "右区"],
|
||||
},
|
||||
xAxis: {
|
||||
data: arr1,
|
||||
|
|
@ -71,41 +68,40 @@ export default {
|
|||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
type: "dashed",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '左区',
|
||||
type: 'bar',
|
||||
name: "左区",
|
||||
type: "bar",
|
||||
data: arr2,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: [10, 10, 0, 0],
|
||||
color: '#FE4C4B',
|
||||
color: "#FE4C4B",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '右区',
|
||||
type: 'bar',
|
||||
name: "右区",
|
||||
type: "bar",
|
||||
data: arr3,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: [10, 10, 0, 0],
|
||||
color: '#FFAE36',
|
||||
color: "#FFAE36",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
};
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option)
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<style></style>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,15 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="styles">
|
||||
<el-form >
|
||||
<el-form>
|
||||
<el-col :span="12">
|
||||
<el-select v-model="texts"
|
||||
@change="selectTime"
|
||||
placeholder="">
|
||||
<el-option v-for="item in deliList"
|
||||
|
||||
<el-select v-model="texts" @change="selectTime" placeholder="">
|
||||
<el-option
|
||||
v-for="item in deliList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
|
|
@ -18,32 +17,48 @@
|
|||
</div>
|
||||
<div class="right-lines">
|
||||
<div class="item-s" v-for="item in list">
|
||||
<div>{{item.name}}</div>
|
||||
<div class="bg-color" :style="{backgroundColor:`${item.color}`}"></div>
|
||||
<div>{{ item.name }}</div>
|
||||
<div
|
||||
class="bg-color"
|
||||
:style="{ backgroundColor: `${item.color}` }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="lines"></div>-->
|
||||
<!-- <div class="lines"></div>-->
|
||||
<div class="flex-s">
|
||||
<div id="main1" style="width: 100%;margin-top: 10px" :style="myChartStyle"></div>
|
||||
<div
|
||||
id="main1"
|
||||
style="width: 100%; margin-top: 10px"
|
||||
:style="myChartStyle"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import {getDayType, getIndexAddAchieve, getMemberRecommend} from "@/api/index";
|
||||
import {formatSeconds} from "@/util/common";
|
||||
import {
|
||||
getDayType,
|
||||
getIndexAddAchieve,
|
||||
getMemberRecommend,
|
||||
} from "@/api/index";
|
||||
import { formatSeconds } from "@/util/common";
|
||||
export default {
|
||||
name: "recommendTime",
|
||||
data(){
|
||||
return{
|
||||
list:[{"name":'左区首购',"color":"#FF5151"},
|
||||
{"name":'左区复购',"color":"#BB0909"},
|
||||
{"name":'右区首购',"color":"#FFAE36"},
|
||||
{"name":'右区复购',"color":"#935801"}
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{ name: "左区首购", color: "#FF5151" },
|
||||
{ name: "左区复购", color: "#BB0909" },
|
||||
{ name: "右区首购", color: "#FFAE36" },
|
||||
{ name: "右区复购", color: "#935801" },
|
||||
],
|
||||
texts: "",
|
||||
deliList: [
|
||||
{ label: "近七日", value: 7 },
|
||||
{ label: "近十四日", value: 14 },
|
||||
{ label: "近三十日", value: 30 },
|
||||
],
|
||||
texts:'',
|
||||
deliList:[{"label":'近七日',"value":7},{"label":'近十四日',"value":14},{"label":'近三十日',"value":30}],
|
||||
myChartStyle: {
|
||||
float: "center",
|
||||
width: "700px",
|
||||
|
|
@ -54,60 +69,60 @@ export default {
|
|||
sexData: [
|
||||
{
|
||||
data: [150, 230, 224, 218, 135, 147, 260],
|
||||
type: 'line',
|
||||
color:'#FE9A02',
|
||||
type: "line",
|
||||
color: "#FE9A02",
|
||||
label: {
|
||||
show: false,
|
||||
position:'right',
|
||||
position: "right",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.selected();
|
||||
},
|
||||
methods:{
|
||||
methods: {
|
||||
selectTime(data) {
|
||||
this.texts =data
|
||||
this.texts = data;
|
||||
this.getData();
|
||||
},
|
||||
selected() {
|
||||
getDayType().then((res)=>{
|
||||
this.deliList = res.data
|
||||
getDayType().then((res) => {
|
||||
this.deliList = res.data;
|
||||
this.ageChart(res.data);
|
||||
this.getData(res.data[0].value);
|
||||
this.texts = res.data[0].label
|
||||
})
|
||||
this.texts = res.data[0].label;
|
||||
});
|
||||
},
|
||||
getData(value) {
|
||||
getIndexAddAchieve({"dayType":this.texts || value}).then((res)=>{
|
||||
getIndexAddAchieve({ dayType: this.texts || value }).then((res) => {
|
||||
this.ageChart(res.data);
|
||||
})
|
||||
});
|
||||
},
|
||||
ageChart(data) {
|
||||
var myChart = echarts.init(document.getElementById('main1'));
|
||||
let time =[];
|
||||
let time1 =[];
|
||||
var myChart = echarts.init(document.getElementById("main1"));
|
||||
let time = [];
|
||||
let time1 = [];
|
||||
let arr1 = [];
|
||||
let arr2 = [];
|
||||
let arr3 = [];
|
||||
let arr4 = [];
|
||||
data.forEach((item)=>{
|
||||
if(item.settleDate){
|
||||
data.forEach((item) => {
|
||||
if (item.settleDate) {
|
||||
// let time1=item.settleDate.split("-");
|
||||
// let json = time1[1]+'-'+time1[2]
|
||||
time.push(item.settleDate)
|
||||
time.push(item.settleDate);
|
||||
}
|
||||
arr1.push(item.repANewPv)
|
||||
arr2.push(item.repBNewPv)
|
||||
arr3.push(item.bNewPv)
|
||||
arr4.push(item.aNewPv)
|
||||
})
|
||||
console.error(time)
|
||||
arr1.push(item.repANewPv);
|
||||
arr2.push(item.repBNewPv);
|
||||
arr3.push(item.bNewPv);
|
||||
arr4.push(item.aNewPv);
|
||||
});
|
||||
console.error(time);
|
||||
var option = {
|
||||
title: {
|
||||
text: '业绩（万）'
|
||||
text: "业绩",
|
||||
},
|
||||
tooltip: {
|
||||
// _8:function (params){
|
||||
|
|
@ -124,25 +139,25 @@ export default {
|
|||
top: "70px",
|
||||
right: "30px",
|
||||
width: "auto",
|
||||
orient: 'vertical',
|
||||
orient: "vertical",
|
||||
itemHeight: 21,
|
||||
itemWidth:39
|
||||
itemWidth: 39,
|
||||
},
|
||||
grid: {
|
||||
left: '0%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
left: "0%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data:time,
|
||||
axisLine:{
|
||||
show:true,
|
||||
type: "category",
|
||||
data: time,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#333",
|
||||
width: '1', // 坐标轴线线宽
|
||||
type: 'solid', // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
|
||||
width: "1", // 坐标轴线线宽
|
||||
type: "solid", // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
|
|
@ -150,93 +165,92 @@ export default {
|
|||
inside: true, // 坐标轴刻度是否朝内，默认朝外
|
||||
length: 5, // 坐标轴刻度的长度
|
||||
lineStyle: {
|
||||
color: '#FFF', // 刻度线的颜色
|
||||
color: "#FFF", // 刻度线的颜色
|
||||
width: 10, // 坐标轴刻度线宽
|
||||
type: 'solid', // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
|
||||
type: "solid", // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLabel:{
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
type: "category",
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
color: '#000',
|
||||
fontSize: '10',
|
||||
itemSize: '',
|
||||
color: "#000",
|
||||
fontSize: "10",
|
||||
itemSize: "",
|
||||
},
|
||||
formatter: function (data) {
|
||||
return data;
|
||||
},
|
||||
},
|
||||
formatter: function(data){
|
||||
return data
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#CCCCCC",
|
||||
type: "dashed", //虚线
|
||||
width: 2
|
||||
}
|
||||
}
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: arr4,
|
||||
type: 'line',
|
||||
color:'#FF5151',
|
||||
type: "line",
|
||||
color: "#FF5151",
|
||||
label: {
|
||||
show: false,
|
||||
position:'right',
|
||||
position: "right",
|
||||
},
|
||||
formatter: function (data) {
|
||||
console.error(data);
|
||||
},
|
||||
formatter: function(data){
|
||||
console.error(data)
|
||||
}
|
||||
},
|
||||
{
|
||||
data: arr1,
|
||||
type: 'line',
|
||||
color:'#BB0909',
|
||||
type: "line",
|
||||
color: "#BB0909",
|
||||
label: {
|
||||
show: false,
|
||||
position:'right',
|
||||
position: "right",
|
||||
},
|
||||
},
|
||||
{
|
||||
data: arr3,
|
||||
type: 'line',
|
||||
color:'#FE9A02',
|
||||
type: "line",
|
||||
color: "#FE9A02",
|
||||
label: {
|
||||
show: false,
|
||||
position:'right',
|
||||
position: "right",
|
||||
},
|
||||
},
|
||||
{
|
||||
data: arr2,
|
||||
type: 'line',
|
||||
color:'#935801',
|
||||
type: "line",
|
||||
color: "#935801",
|
||||
label: {
|
||||
show: false,
|
||||
position:'right',
|
||||
position: "right",
|
||||
},
|
||||
},
|
||||
}
|
||||
],
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .el-select .el-input .el-select__caret{
|
||||
::v-deep .el-select .el-input .el-select__caret {
|
||||
color: #333;
|
||||
}
|
||||
.lines{
|
||||
.lines {
|
||||
width: 2px;
|
||||
height: 470px;
|
||||
opacity: 1;
|
||||
|
|
@ -246,31 +260,31 @@ export default {
|
|||
left: 50%;
|
||||
margin-left: -110px;
|
||||
}
|
||||
.right-lines{
|
||||
.right-lines {
|
||||
position: absolute;
|
||||
right: 80px;
|
||||
top: 140px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
.item-s{
|
||||
.item-s {
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
line-height: 24px;
|
||||
}
|
||||
.bg-color{
|
||||
.bg-color {
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
border-radius: 2px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.flex-s{
|
||||
.flex-s {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 850px;
|
||||
}
|
||||
.styles{
|
||||
.styles {
|
||||
position: absolute;
|
||||
right: -30px;
|
||||
z-index: 111;
|
||||
|
|
@ -278,8 +292,8 @@ export default {
|
|||
/*background: rgba(0,0,0,0.05);*/
|
||||
/*border-radius: 4px 4px 4px 4px;*/
|
||||
}
|
||||
::v-deep .el-select .el-input__inner{
|
||||
::v-deep .el-select .el-input__inner {
|
||||
border: none;
|
||||
background: rgba(0,0,0,0.05);
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -20,17 +20,16 @@ export default {
|
|||
return {
|
||||
texts: "",
|
||||
pieData: [
|
||||
|
||||
{
|
||||
value: 0,
|
||||
age: 0,
|
||||
name: '左区',
|
||||
name: "左区",
|
||||
itemStyle: { color: "#EE5858" },
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
age: 0,
|
||||
name: '右区',
|
||||
name: "右区",
|
||||
itemStyle: { color: "#FBB046" },
|
||||
},
|
||||
],
|
||||
|
|
@ -60,7 +59,7 @@ export default {
|
|||
},
|
||||
ageChart(datas) {
|
||||
var myChart = echarts.init(document.getElementById("main2"));
|
||||
let that = this
|
||||
let that = this;
|
||||
var option = {
|
||||
legend: {
|
||||
// 图例
|
||||
|
|
@ -75,7 +74,6 @@ export default {
|
|||
type: "pie",
|
||||
label: {
|
||||
show: true,
|
||||
// formatter:'{b}: {c}人\n 业绩: {d}万',
|
||||
formatter: function (data) {
|
||||
return (
|
||||
data.data.name +
|
||||
|
|
@ -84,8 +82,7 @@ export default {
|
|||
"人" +
|
||||
"\n " +
|
||||
"业绩：" +
|
||||
data.data.value +
|
||||
that.$t('S_C_58')
|
||||
data.data.value
|
||||
);
|
||||
},
|
||||
lineHeight: 25, // 行高
|
||||
|
|
|
|||
|
|
@ -6,33 +6,31 @@
|
|||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div id="mounthData1"
|
||||
:style="myChartStyle">
|
||||
</div>
|
||||
<div id="mounthData1" :style="myChartStyle"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as api from '@/api/activity.js'
|
||||
import {getPerformance} from "@/api/index";
|
||||
import * as api from "@/api/activity.js";
|
||||
import { getPerformance } from "@/api/index";
|
||||
export default {
|
||||
props:{
|
||||
props: {
|
||||
time: {
|
||||
type: Number,
|
||||
// 定义是否必须传
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
data() {
|
||||
return {
|
||||
myChartStyle: {
|
||||
float: 'center',
|
||||
width: '700px',
|
||||
height: '450px',
|
||||
paddingTop: '0',
|
||||
float: "center",
|
||||
width: "700px",
|
||||
height: "450px",
|
||||
paddingTop: "0",
|
||||
// margin: "20px",
|
||||
},
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// this.upDateCover()
|
||||
|
|
@ -40,45 +38,44 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
upDateCover(val) {
|
||||
let arr2=[]
|
||||
let arr3=[]
|
||||
let arr2 = [];
|
||||
let arr3 = [];
|
||||
getPerformance({
|
||||
month: val || this.time,
|
||||
})
|
||||
.then((res) => {
|
||||
arr2.push(res.data.leftGrandTotal)
|
||||
arr2.push(res.data.firstLeftPurchaseTotal)
|
||||
arr2.push(res.data.firstLeftRepurchaseTotal)
|
||||
arr3.push(res.data.rightGrandTotal)
|
||||
arr3.push(res.data.firstRightPurchaseTotal)
|
||||
arr3.push(res.data.firstRightRepurchaseTotal)
|
||||
}).then((res) => {
|
||||
arr2.push(res.data.leftGrandTotal);
|
||||
arr2.push(res.data.firstLeftPurchaseTotal);
|
||||
arr2.push(res.data.firstLeftRepurchaseTotal);
|
||||
arr3.push(res.data.rightGrandTotal);
|
||||
arr3.push(res.data.firstRightPurchaseTotal);
|
||||
arr3.push(res.data.firstRightRepurchaseTotal);
|
||||
// arr2.push(3)
|
||||
// arr2.push(5)
|
||||
// arr2.push(10)
|
||||
// arr3.push(3)
|
||||
// arr3.push(5)
|
||||
// arr3.push(10)
|
||||
this.drawChart(arr2, arr3)
|
||||
})
|
||||
this.drawChart(arr2, arr3);
|
||||
});
|
||||
},
|
||||
drawChart(arr2, arr3) {
|
||||
let arr1 =['累计业绩','首购累计业绩','复购累计业绩']
|
||||
let arr1 = ["累计业绩", "首购累计业绩", "复购累计业绩"];
|
||||
// 基于准备好的dom，初始化echarts实例 这个和上面的main对应
|
||||
let myChart = this.$echarts.init(document.getElementById('mounthData1'))
|
||||
let myChart = this.$echarts.init(document.getElementById("mounthData1"));
|
||||
// 指定图表的配置项和数据
|
||||
let option = {
|
||||
title: {
|
||||
text: '',
|
||||
subtext: '业绩(万)',
|
||||
left:40,
|
||||
text: "",
|
||||
subtext: "业绩",
|
||||
left: 40,
|
||||
},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
top: 'bottom',
|
||||
data: ['左区', '右区'],
|
||||
itemHeight:20,
|
||||
itemWidth:40,
|
||||
bottom:0,
|
||||
top: "bottom",
|
||||
data: ["左区", "右区"],
|
||||
itemHeight: 20,
|
||||
itemWidth: 40,
|
||||
bottom: 0,
|
||||
},
|
||||
xAxis: {
|
||||
data: arr1,
|
||||
|
|
@ -90,41 +87,40 @@ export default {
|
|||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
type: "dashed",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '左区',
|
||||
type: 'bar',
|
||||
name: "左区",
|
||||
type: "bar",
|
||||
data: arr2,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: [10, 10, 0, 0],
|
||||
color: '#01C291',
|
||||
color: "#01C291",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '右区',
|
||||
type: 'bar',
|
||||
name: "右区",
|
||||
type: "bar",
|
||||
data: arr3,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: [10, 10, 0, 0],
|
||||
color: '#FE4C4B',
|
||||
color: "#FE4C4B",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
};
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option)
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<style></style>
|
||||
|
|
|
|||
|
|
@ -12,15 +12,12 @@
|
|||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div id="repPv"
|
||||
style="width: 700px; height: 400px">
|
||||
|
||||
</div>
|
||||
<div id="repPv" style="width: 700px; height: 400px"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as api from '@/api/activity.js'
|
||||
import * as api from "@/api/activity.js";
|
||||
export default {
|
||||
// mounted() {
|
||||
// this.upDateCover()
|
||||
|
|
@ -29,31 +26,31 @@ export default {
|
|||
upDateCover() {
|
||||
api.achieveDay().then((res) => {
|
||||
let arr1 = res.data.map((item) => {
|
||||
return item.settleDate
|
||||
})
|
||||
return item.settleDate;
|
||||
});
|
||||
let arr2 = res.data.map((item) => {
|
||||
return item.repANewPv
|
||||
})
|
||||
return item.repANewPv;
|
||||
});
|
||||
let arr3 = res.data.map((item) => {
|
||||
return item.repBNewPv
|
||||
})
|
||||
this.drawChart(arr1, arr2, arr3)
|
||||
})
|
||||
return item.repBNewPv;
|
||||
});
|
||||
this.drawChart(arr1, arr2, arr3);
|
||||
});
|
||||
},
|
||||
drawChart(arr1, arr2, arr3) {
|
||||
let myChart = this.$echarts.init(document.getElementById('repPv'))
|
||||
let myChart = this.$echarts.init(document.getElementById("repPv"));
|
||||
// 指定图表的配置项和数据
|
||||
let option = {
|
||||
title: {
|
||||
text: '',
|
||||
subtext: '业绩(万)',
|
||||
text: "",
|
||||
subtext: "业绩",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
top: 'bottom',
|
||||
data: ['左区', '右区'],
|
||||
top: "bottom",
|
||||
data: ["左区", "右区"],
|
||||
itemWidth: 20, // 长方形宽度
|
||||
itemHeight: 10, // 长方形高度
|
||||
},
|
||||
|
|
@ -66,9 +63,9 @@ export default {
|
|||
interval: 0,
|
||||
// rotate: 45,
|
||||
textStyle: {
|
||||
color: '#000',
|
||||
fontSize: '10',
|
||||
itemSize: '',
|
||||
color: "#000",
|
||||
fontSize: "10",
|
||||
itemSize: "",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -76,19 +73,19 @@ export default {
|
|||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
type: "dashed",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '左区',
|
||||
type: 'line',
|
||||
name: "左区",
|
||||
type: "line",
|
||||
data: arr2,
|
||||
symbol: 'none',
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#FF5A5A',
|
||||
color: "#FF5A5A",
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
|
|
@ -98,13 +95,13 @@ export default {
|
|||
},
|
||||
},
|
||||
{
|
||||
name: '右区',
|
||||
type: 'line',
|
||||
name: "右区",
|
||||
type: "line",
|
||||
data: arr3,
|
||||
symbol: 'none',
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#FFAE36',
|
||||
color: "#FFAE36",
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
|
|
@ -114,13 +111,12 @@ export default {
|
|||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
};
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option)
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<style></style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,100 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
class="password-dialog"
|
||||
title="二级密码"
|
||||
:visible.sync="dialogVisible"
|
||||
width="400px"
|
||||
center
|
||||
:close-on-click-modal="false"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<div class="pwd-container">
|
||||
<div class="tit">请输入二级密码</div>
|
||||
<el-input v-model="password" type="password"></el-input>
|
||||
<el-button
|
||||
:loading="loading"
|
||||
class="confirm-btn"
|
||||
type="primary"
|
||||
@click="confirmBtnHandle"
|
||||
>
|
||||
<span>确定</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { checkPwd } from "@/api/wallet";
|
||||
export default {
|
||||
name: "SecondaryPassword",
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
password: "",
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
dialogVisible: {
|
||||
get() {
|
||||
return this.visible;
|
||||
},
|
||||
set(val) {
|
||||
this.$emit("update:visible", val);
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
confirmBtnHandle() {
|
||||
this.loading = true;
|
||||
checkPwd({ pwd: this.password })
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.password = "";
|
||||
this.dialogVisible = false;
|
||||
this.$emit("validPwd", true);
|
||||
} else {
|
||||
this.$emit("validPwd", false);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.$emit("validPwd", false);
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.password-dialog {
|
||||
margin-top: 120px;
|
||||
.pwd-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.tit {
|
||||
font-size: 16px;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.confirm-btn {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -844,7 +844,7 @@ export default {
|
|||
this.goodDetail = res.data;
|
||||
let sl = this.goodDetail.sales + "";
|
||||
if (sl >= 10000) {
|
||||
sl = sl.substring(0, sl.length - 4) + "万" + "+";
|
||||
sl = sl.substring(0, sl.length - 4) + "+";
|
||||
}
|
||||
this.goodDetail.sales = sl;
|
||||
this.mainImgUrl = res.data.videoUrl;
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
}"
|
||||
></div>
|
||||
<div class="cha">
|
||||
左区 {{ awards.aNewPv }}万/右区 {{ awards.bNewPv }}万
|
||||
左区 {{ awards.aNewPv }}/右区 {{ awards.bNewPv }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
}"
|
||||
></div>
|
||||
<div class="cha">
|
||||
左区 {{ awards.aMonthPv }}万/右区 {{ awards.bMonthPv }}万
|
||||
左区 {{ awards.aMonthPv }}/右区 {{ awards.bMonthPv }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
}"
|
||||
></div>
|
||||
<div class="cha">
|
||||
左区 {{ awards.aSumPv }}万/右区 {{ awards.bSumPv }}万
|
||||
左区 {{ awards.aSumPv }}/右区 {{ awards.bSumPv }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -21,41 +21,41 @@
|
|||
<div class="name">目标业绩进度</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="titles">{{ startDate }} 至 {{endDate}}</div>
|
||||
<div class="titles">{{ startDate }} 至 {{ endDate }}</div>
|
||||
<div class="echarts">
|
||||
<div class="title_s">{{'目标业绩'}}(PV)</div>
|
||||
<div class="title_s">{{ "目标业绩" }}(PV)</div>
|
||||
<div class="e-chat">
|
||||
<div class="list" v-for="item in list ">
|
||||
<div class="tops">
|
||||
|
||||
</div>
|
||||
<div class="process" :style="{height:item.percentage}" >
|
||||
<div class="money">{{item.percentage}}</div>
|
||||
<div class="list" v-for="item in list">
|
||||
<div class="tops"></div>
|
||||
<div class="process" :style="{ height: item.percentage }">
|
||||
<div class="money">{{ item.percentage }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="e-chat-s" >
|
||||
<div class="moneys" v-for="item in list ">
|
||||
{{item.targetPerformanceLeaveOut}}
|
||||
<div class="e-chat-s">
|
||||
<div class="moneys" v-for="item in list">
|
||||
{{ item.targetPerformanceLeaveOut }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="titles" style="margin-top: 40px">{{ startDate1 }} 至 {{endDate1}}</div>
|
||||
<div class="titles" style="margin-top: 40px">
|
||||
{{ startDate1 }} 至 {{ endDate1 }}
|
||||
</div>
|
||||
<div class="echarts">
|
||||
<div class="title_s" style="margin-top: 250px" >{{'目标业绩'}}(金额)</div>
|
||||
<div class="e-chat" style="margin-top: 40px">
|
||||
<div class="list" v-for="item in list1 ">
|
||||
<div class="tops">
|
||||
|
||||
<div class="title_s" style="margin-top: 250px">
|
||||
{{ "目标业绩" }}(金额)
|
||||
</div>
|
||||
<div class="process" :style="{height:item.percentage}" >
|
||||
<div class="money">{{item.percentage}}</div>
|
||||
<div class="e-chat" style="margin-top: 40px">
|
||||
<div class="list" v-for="item in list1">
|
||||
<div class="tops"></div>
|
||||
<div class="process" :style="{ height: item.percentage }">
|
||||
<div class="money">{{ item.percentage }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="e-chat-s" style="margin-left: 145px">
|
||||
<div class="moneys" v-for="item in list1 ">
|
||||
{{item.targetPerformanceLeaveOut}}
|
||||
<div class="moneys" v-for="item in list1">
|
||||
{{ item.targetPerformanceLeaveOut }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -74,16 +74,12 @@ import sidebarUserInfo from "@/views/index/components/sidebarUserInfo";
|
|||
import topBanner from "@/components/topBanner";
|
||||
import * as api from "@/api/register";
|
||||
import { getToken } from "@/util/auth";
|
||||
import {getPerFormance,getPerFormanceAmount} from "@/api/register";
|
||||
import { getPerFormance, getPerFormanceAmount } from "@/api/register";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// list:[{"name":"20万","percent":15,num:20},{"name":"40万","percent":25,num:40},
|
||||
// {"name":"60万","percent":22,num:60},{"name":"80万","percent":20,num:80},
|
||||
// {"name":"100万","percent":10,num:100}
|
||||
// ],
|
||||
list:[],
|
||||
list1:[],
|
||||
list: [],
|
||||
list1: [],
|
||||
xData: [20, 40, 60, 80, 100], //横坐标
|
||||
yData: [20, 24, 18, 25, 27], //数据
|
||||
myChartStyle: { float: "left", width: "100%", height: "400px" },
|
||||
|
|
@ -97,14 +93,14 @@ export default {
|
|||
memberCode: "",
|
||||
memberName: "",
|
||||
},
|
||||
startDate:'',
|
||||
endDate:'',
|
||||
startDate1:'',
|
||||
endDate1:'',
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
startDate1: "",
|
||||
endDate1: "",
|
||||
navList: [
|
||||
{ name: "认证资质", url: "/superStudio" },
|
||||
{ name: '注册业绩', url: "/performance" },
|
||||
{ name: '专属礼包', url: "/giftBag" },
|
||||
{ name: "注册业绩", url: "/performance" },
|
||||
{ name: "专属礼包", url: "/giftBag" },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
|
@ -115,25 +111,25 @@ export default {
|
|||
this.getPerFormanceAmount();
|
||||
},
|
||||
methods: {
|
||||
getPerFormance(){
|
||||
getPerFormance().then((res)=>{
|
||||
this.startDate = res.data.startDate
|
||||
this.endDate = res.data.endDate
|
||||
this.list = res.data.targetPerformanceList
|
||||
})
|
||||
getPerFormance() {
|
||||
getPerFormance().then((res) => {
|
||||
this.startDate = res.data.startDate;
|
||||
this.endDate = res.data.endDate;
|
||||
this.list = res.data.targetPerformanceList;
|
||||
});
|
||||
},
|
||||
getPerFormanceAmount() {
|
||||
getPerFormanceAmount().then((res) => {
|
||||
this.startDate1 = res.data.startDate;
|
||||
this.endDate1 = res.data.endDate;
|
||||
this.list1 = res.data.targetPerformanceList;
|
||||
});
|
||||
},
|
||||
},
|
||||
getPerFormanceAmount(){
|
||||
getPerFormanceAmount().then((res)=>{
|
||||
this.startDate1 = res.data.startDate
|
||||
this.endDate1 = res.data.endDate
|
||||
this.list1 = res.data.targetPerformanceList
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.tops{
|
||||
.tops {
|
||||
/*width: 128px;*/
|
||||
/*height: 17px;*/
|
||||
/*background: #F3F3F3;*/
|
||||
|
|
@ -142,58 +138,56 @@ export default {
|
|||
/*top: 0;*/
|
||||
/*margin-top: -17px;*/
|
||||
}
|
||||
.process{
|
||||
.process {
|
||||
background: var(--primary-color);
|
||||
/*height: 50%;*/
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
justify-content: center;
|
||||
align-items:center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
bottom: 0;
|
||||
}
|
||||
.moneys{
|
||||
.moneys {
|
||||
width: 130px;
|
||||
margin-right: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
.e-chat-s{
|
||||
.e-chat-s {
|
||||
width: 840px;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
bottom: 0;
|
||||
justify-content: center;
|
||||
margin-left: 135px;
|
||||
|
||||
}
|
||||
.money{
|
||||
.money {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
margin-top: -100px;
|
||||
color: #fff;
|
||||
}
|
||||
.list{
|
||||
.list {
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
}
|
||||
.e-chat{
|
||||
.e-chat {
|
||||
display: flex;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.list{
|
||||
.list {
|
||||
width: 128px;
|
||||
height: 184px;
|
||||
background: #F3F3F3;
|
||||
background: #f3f3f3;
|
||||
margin-right: 40px;
|
||||
border-radius: 7px 7px 0 0 ;
|
||||
border-radius: 7px 7px 0 0;
|
||||
}
|
||||
.title_s{
|
||||
.title_s {
|
||||
margin: 260px 20px 0 20px;
|
||||
}
|
||||
.echarts{
|
||||
.echarts {
|
||||
margin-left: 100px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
|
@ -203,24 +197,24 @@ export default {
|
|||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
#mychart{
|
||||
width: 800px!important;
|
||||
#mychart {
|
||||
width: 800px !important;
|
||||
}
|
||||
.titles{
|
||||
.titles {
|
||||
color: #333;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.box{
|
||||
.box {
|
||||
width: 1191px;
|
||||
//height: 475px;
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
opacity: 1;
|
||||
border: 1px solid #CCCCCC;
|
||||
border: 1px solid #cccccc;
|
||||
margin: 40px 0 40px 40px;
|
||||
padding: 30px;
|
||||
}
|
||||
::v-deep .el-table .el-table__cell.is-center{
|
||||
::v-deep .el-table .el-table__cell.is-center {
|
||||
color: #333;
|
||||
padding: 30px 0;
|
||||
font-weight: 600;
|
||||
|
|
|
|||
|
|
@ -11,35 +11,42 @@
|
|||
* @Date: 2023-01-12 16:21:41
|
||||
-->
|
||||
<template>
|
||||
<div class="contain"
|
||||
ref="box">
|
||||
<div class="contain" ref="box">
|
||||
<!-- 用户头 -->
|
||||
<personInfo></personInfo>
|
||||
<Sidebar :showCar="true"
|
||||
<Sidebar
|
||||
:showCar="true"
|
||||
@showShare="showShare"
|
||||
@showCar="showCar"
|
||||
ref="sideBar"></Sidebar>
|
||||
ref="sideBar"
|
||||
></Sidebar>
|
||||
|
||||
<!-- 面包屑 -->
|
||||
<div class="mianbao">
|
||||
<el-breadcrumb separator-class="el-icon-arrow-right">
|
||||
<el-breadcrumb-item :to="{ path: '/' }">{{'首页'}}</el-breadcrumb-item>
|
||||
<el-breadcrumb-item v-if="specialArea!=18&&specialArea!=19"
|
||||
:to="{ path: '/shoppingMall?id=' + specialArea }">{{ labelName }}</el-breadcrumb-item>
|
||||
<el-breadcrumb-item v-else
|
||||
:to="{ path: '/spaceMallList' }">{{ labelName }}</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>{{'商品详情'}}</el-breadcrumb-item>
|
||||
<el-breadcrumb-item :to="{ path: '/' }">{{
|
||||
"首页"
|
||||
}}</el-breadcrumb-item>
|
||||
<el-breadcrumb-item
|
||||
v-if="specialArea != 18 && specialArea != 19"
|
||||
:to="{ path: '/shoppingMall?id=' + specialArea }"
|
||||
>{{ labelName }}</el-breadcrumb-item
|
||||
>
|
||||
<el-breadcrumb-item v-else :to="{ path: '/spaceMallList' }">{{
|
||||
labelName
|
||||
}}</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>{{ "商品详情" }}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="details_t">
|
||||
<!-- 轮播图 -->
|
||||
<Swiper :mainImgUrls="mainImgUrl"
|
||||
:imgUrlLists="imgUrlList"></Swiper>
|
||||
<Swiper :mainImgUrls="mainImgUrl" :imgUrlLists="imgUrlList"></Swiper>
|
||||
<!-- 商品信息 -->
|
||||
<div class="details_c">
|
||||
<div class="dis_flex">
|
||||
<div class="qzbq"
|
||||
v-if="goodDetail.prefixLabelTarget">[{{ goodDetail.prefixLabelTarget.label }}]</div>
|
||||
<div class="qzbq" v-if="goodDetail.prefixLabelTarget">
|
||||
[{{ goodDetail.prefixLabelTarget.label }}]
|
||||
</div>
|
||||
<div class="c_tit1">
|
||||
{{ goodDetail.waresName }}
|
||||
</div>
|
||||
|
|
@ -51,26 +58,31 @@
|
|||
<div class="c_bai_b">
|
||||
<div class="dis_flex just">
|
||||
<div class="dis_flex">
|
||||
<div class="tit5">{{ userInfo.currencyIcon }}{{ goodDetail.waresPrice |numberToCurrency }}</div>
|
||||
<div class="tit5">
|
||||
{{ userInfo.currencyIcon
|
||||
}}{{ goodDetail.waresPrice | numberToCurrency }}
|
||||
</div>
|
||||
<!-- <div class="tit6">{{ goodDetail.goodsAchive }}</div> -->
|
||||
</div>
|
||||
<div class="tit7">{{'累计销售'}}</div>
|
||||
<div class="tit7">{{ "累计销售" }}</div>
|
||||
</div>
|
||||
<div class="dis_flex just m10">
|
||||
<div class="tit4 dis_flex">
|
||||
<div style="margin-right:20px">PV:{{ goodDetail.waresAchieve|numberToCurrency }} </div>
|
||||
<div v-show="goodDetail.specialArea == 13">BV:{{ goodDetail.goodsAssAchive }} </div>
|
||||
<div style="margin-right: 20px">
|
||||
PV:{{ goodDetail.waresAchieve | numberToCurrency }}
|
||||
</div>
|
||||
<div class="tit5"> {{ goodDetail.sales |seles}} </div>
|
||||
<div v-show="goodDetail.specialArea == 13">
|
||||
BV:{{ goodDetail.goodsAssAchive }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tit5">{{ goodDetail.sales | seles }}</div>
|
||||
</div>
|
||||
<div class="dis_flex just m10">
|
||||
<div class="dis_flex"
|
||||
v-if="goodDetail.giftNames">
|
||||
<div class="tit8">{{ '赠品'}}:</div>
|
||||
<div class="dis_flex" v-if="goodDetail.giftNames">
|
||||
<div class="tit8">{{ "赠品" }}:</div>
|
||||
<div class="tit9">{{ goodDetail.giftNames }}</div>
|
||||
</div>
|
||||
<div v-else></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -97,70 +109,75 @@
|
|||
</div> -->
|
||||
<div class="gui">
|
||||
<div class="gui_b">
|
||||
<div class="gui_bt">{{ '规格' }}:</div>
|
||||
<div class="gui_bt">{{ "规格" }}:</div>
|
||||
<div class="gui_bb">
|
||||
<div v-for="item,index in goodDetail.waresSkuList"
|
||||
<div
|
||||
v-for="(item, index) in goodDetail.waresSkuList"
|
||||
:key="item.pkId"
|
||||
class="gui_i">
|
||||
class="gui_i"
|
||||
>
|
||||
<div class="gui_ia">
|
||||
<div @click.stop="tapSku(index)"
|
||||
:class="['gui_ii',hasChecked==item.pkId?'gui_a':'']">
|
||||
<img :src="item.image"
|
||||
alt="">
|
||||
<div class="gui_iit">{{ item.specValueNames}}</div>
|
||||
<div
|
||||
@click.stop="tapSku(index)"
|
||||
:class="['gui_ii', hasChecked == item.pkId ? 'gui_a' : '']"
|
||||
>
|
||||
<img :src="item.image" alt="" />
|
||||
<div class="gui_iit">{{ item.specValueNames }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 数量 -->
|
||||
<div class="dis_flex"
|
||||
v-if="userInfo.registerFans == 0">
|
||||
<div>{{ '数量' }}：</div>
|
||||
<el-input-number v-model="num"
|
||||
:min="1"></el-input-number>
|
||||
<div class="dis_flex" v-if="userInfo.registerFans == 0">
|
||||
<div>{{ "数量" }}：</div>
|
||||
<el-input-number v-model="num" :min="1"></el-input-number>
|
||||
</div>
|
||||
<div class="addCar"
|
||||
@click="toAddCar">{{ '加入购物车' }}</div>
|
||||
<div class="addCar" @click="toAddCar">{{ "加入购物车" }}</div>
|
||||
<!-- <div class="addCar"
|
||||
v-if="userInfo.registerFans == 0"
|
||||
@click="goBuy">{{'立即购买'}}</div> -->
|
||||
<!-- {{ '服务承诺' }} -->
|
||||
<div class="dis_flex fw">
|
||||
<div>{{ '服务承诺' }}:</div>
|
||||
<div class="fw_i"
|
||||
<div>{{ "服务承诺" }}:</div>
|
||||
<div
|
||||
class="fw_i"
|
||||
v-for="item in goodDetail.ensureLabelList"
|
||||
:key="item.pkId">{{ item.label }}</div>
|
||||
:key="item.pkId"
|
||||
>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 推荐 -->
|
||||
<!-- 商品列表 -->
|
||||
<div class="goodList">
|
||||
<div class="tited">{{ '精品推荐' }}</div>
|
||||
<div class="good_i"
|
||||
<div class="tited">{{ "精品推荐" }}</div>
|
||||
<div
|
||||
class="good_i"
|
||||
v-for="item in goodList"
|
||||
:key="item.pkId"
|
||||
@click="goDetails(item)">
|
||||
<img class="goodImg"
|
||||
:src="item.cover1"
|
||||
alt="">
|
||||
@click="goDetails(item)"
|
||||
>
|
||||
<img class="goodImg" :src="item.cover1" alt="" />
|
||||
<div class="goodBtm">
|
||||
<div class="disFlex">
|
||||
<div class="tit5">{{ userInfo.currencyIcon }}{{ item.waresPrice |numberToCurrency }}</div>
|
||||
<div class="tit5">
|
||||
{{ userInfo.currencyIcon
|
||||
}}{{ item.waresPrice | numberToCurrency }}
|
||||
</div>
|
||||
<div class="tit2"></div>
|
||||
</div>
|
||||
<div class="disFlex">
|
||||
<div class="tit3">{{ item.waresName }}</div>
|
||||
</div>
|
||||
<div class="disFlex">
|
||||
<div class="tit4">{{ "销量" }}:{{ item.sales | seles }}</div>
|
||||
<div class="tit4">
|
||||
{{'销量'}}:{{ item.sales |seles}}
|
||||
</div>
|
||||
<div class="tit4">
|
||||
{{ '业绩' }}:{{ item.waresAchieve|toThousandthAndKeepDecimal }}
|
||||
{{ "业绩" }}:{{
|
||||
item.waresAchieve | toThousandthAndKeepDecimal
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -169,33 +186,34 @@
|
|||
</div>
|
||||
|
||||
<div class="menuList">
|
||||
<div :class="['menu_i', isMenu == 0 ? 'actMenu' : '']"
|
||||
@click="isMenu =0">
|
||||
{{'商品介绍'}}
|
||||
<div
|
||||
:class="['menu_i', isMenu == 0 ? 'actMenu' : '']"
|
||||
@click="isMenu = 0"
|
||||
>
|
||||
{{ "商品介绍" }}
|
||||
</div>
|
||||
<div :class="['menu_i', isMenu == 1 ? 'actMenu' : '']"
|
||||
@click="isMenu =1">
|
||||
{{'售后保障'}}
|
||||
<div
|
||||
:class="['menu_i', isMenu == 1 ? 'actMenu' : '']"
|
||||
@click="isMenu = 1"
|
||||
>
|
||||
{{ "售后保障" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="xian"></div>
|
||||
<div class="allDetail">
|
||||
<div v-show="isMenu==0"
|
||||
v-html="goodDetail.description"></div>
|
||||
<div v-show="isMenu==1"
|
||||
v-html="goodDetail.afterGuarantee"></div>
|
||||
<div v-show="isMenu == 0" v-html="goodDetail.description"></div>
|
||||
<div v-show="isMenu == 1" v-html="goodDetail.afterGuarantee"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import personInfo from '@/components/personInfo.vue'
|
||||
import Swiper from '@/components/Swiper.vue'
|
||||
import Sidebar from '@/components/Sidebar.vue'
|
||||
import * as api from '@/api/goods.js'
|
||||
import { memLevel } from '@/api/register.js'
|
||||
import { mapGetters } from 'vuex'
|
||||
import personInfo from "@/components/personInfo.vue";
|
||||
import Swiper from "@/components/Swiper.vue";
|
||||
import Sidebar from "@/components/Sidebar.vue";
|
||||
import * as api from "@/api/goods.js";
|
||||
import { memLevel } from "@/api/register.js";
|
||||
import { mapGetters } from "vuex";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -206,15 +224,15 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
isMenu: 0,
|
||||
specialArea: '',
|
||||
waresCode: '',
|
||||
specialArea: "",
|
||||
waresCode: "",
|
||||
goodList: [
|
||||
{
|
||||
waresCode: '1',
|
||||
waresCode: "1",
|
||||
cover1:
|
||||
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
waresPrice: '1980.00',
|
||||
waresName: '海之圣超饱和富氢水杯（粉色），你值得拥有',
|
||||
"https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
|
||||
waresPrice: "1980.00",
|
||||
waresName: "海之圣超饱和富氢水杯（粉色），你值得拥有",
|
||||
},
|
||||
],
|
||||
goodDetail: {
|
||||
|
|
@ -223,40 +241,38 @@ export default {
|
|||
},
|
||||
isClick: 0,
|
||||
num: 1,
|
||||
mainImgUrl: '',
|
||||
mainImgUrl: "",
|
||||
imgUrlList: [],
|
||||
labelName: '',
|
||||
countDown: '',
|
||||
pkId: '',
|
||||
source: '',
|
||||
hasChecked: '',
|
||||
labelName: "",
|
||||
countDown: "",
|
||||
pkId: "",
|
||||
source: "",
|
||||
hasChecked: "",
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
seles(value) {
|
||||
if (value > 999) {
|
||||
return 999 + "+";
|
||||
} else {
|
||||
return value;
|
||||
}
|
||||
},
|
||||
filters:{
|
||||
seles(value){
|
||||
|
||||
if(value>999){
|
||||
return 999 + '+'
|
||||
}else{
|
||||
return value
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['userInfo']),
|
||||
...mapGetters(["userInfo"]),
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
this.specialArea = this.$route.query.specialArea
|
||||
this.pkId = Number(this.$route.query.pkId)
|
||||
this.source = this.$route.query.source
|
||||
this.labelName = this.$route.query.label
|
||||
this.getDetails()
|
||||
this.$store.dispatch('SpecialQuantity', this.specialArea)
|
||||
this.getRecGoods()
|
||||
this.specialArea = this.$route.query.specialArea;
|
||||
this.pkId = Number(this.$route.query.pkId);
|
||||
this.source = this.$route.query.source;
|
||||
this.labelName = this.$route.query.label;
|
||||
this.getDetails();
|
||||
this.$store.dispatch("SpecialQuantity", this.specialArea);
|
||||
this.getRecGoods();
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -270,7 +286,7 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
showShare() {
|
||||
this.$refs.sideBar.getShare(this.specialArea)
|
||||
this.$refs.sideBar.getShare(this.specialArea);
|
||||
},
|
||||
goBuy() {
|
||||
let data = {
|
||||
|
|
@ -278,31 +294,34 @@ export default {
|
|||
pkId: this.pkId,
|
||||
source: 0, // 海粉商品渠道ID
|
||||
waresSkuList: [],
|
||||
}
|
||||
};
|
||||
this.goodDetail.waresSkuList.forEach((item) => {
|
||||
if (item.pkId == this.hasChecked) {
|
||||
data.waresSkuList.push({ pkTWares: this.goodDetail.pkId,pkTWaresSku:item.pkId})
|
||||
data.waresSkuList.push({
|
||||
pkTWares: this.goodDetail.pkId,
|
||||
pkTWaresSku: item.pkId,
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
this.$router.push({
|
||||
path: 'shareConfirm',
|
||||
path: "shareConfirm",
|
||||
query: {
|
||||
specialArea: 21,
|
||||
allData: JSON.stringify([data]),
|
||||
hasChecked: this.hasChecked,
|
||||
},
|
||||
})
|
||||
});
|
||||
},
|
||||
goDetails(item) {
|
||||
this.$router.replace({
|
||||
path: '/shareDetails',
|
||||
path: "/shareDetails",
|
||||
query: {
|
||||
pkId: item.pkId,
|
||||
specialArea: this.specialArea,
|
||||
label: this.labelName,
|
||||
source: 0,
|
||||
},
|
||||
})
|
||||
});
|
||||
},
|
||||
getRecGoods() {
|
||||
api
|
||||
|
|
@ -311,13 +330,13 @@ export default {
|
|||
})
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
res.rows.splice(2)
|
||||
this.goodList = res.rows
|
||||
res.rows.splice(2);
|
||||
this.goodList = res.rows;
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
showCar() {
|
||||
this.$refs.sideBar.getCarList(this.specialArea)
|
||||
this.$refs.sideBar.getCarList(this.specialArea);
|
||||
},
|
||||
toAddCar() {
|
||||
let obj = {
|
||||
|
|
@ -326,61 +345,69 @@ export default {
|
|||
pkId: this.pkId, // 海粉商品ID
|
||||
source: 0, // 海粉商品渠道ID
|
||||
productGroup: [],
|
||||
}
|
||||
};
|
||||
this.goodDetail.waresSkuList.forEach((item) => {
|
||||
if (item.pkId == this.hasChecked) {
|
||||
obj.productGroup.push(item.productGroup[0])
|
||||
obj.productGroup.push(item.productGroup[0]);
|
||||
}
|
||||
})
|
||||
});
|
||||
api.addShopping(obj).then((res) => {
|
||||
this.$store.dispatch('SpecialQuantity', this.specialArea)
|
||||
this.$store.dispatch("SpecialQuantity", this.specialArea);
|
||||
this.$message({
|
||||
message: '购物车添加成功',
|
||||
type: 'success',
|
||||
})
|
||||
})
|
||||
message: "购物车添加成功",
|
||||
type: "success",
|
||||
});
|
||||
});
|
||||
},
|
||||
getNum(index, cndex, quantity) {
|
||||
// 数量为0，关闭高亮
|
||||
if (quantity == 0) {
|
||||
this.$set(
|
||||
this.goodDetail.productParams[index].waresItemsParamsList[cndex],
|
||||
'checked',
|
||||
"checked",
|
||||
false
|
||||
)
|
||||
);
|
||||
} else {
|
||||
this.$set(
|
||||
this.goodDetail.productParams[index].waresItemsParamsList[cndex],
|
||||
'checked',
|
||||
"checked",
|
||||
true
|
||||
)
|
||||
);
|
||||
}
|
||||
let ggNum = 0
|
||||
let ggNum = 0;
|
||||
this.goodDetail.productParams[index].waresItemsParamsList.forEach(
|
||||
(item) => {
|
||||
ggNum += item.quantity
|
||||
ggNum += item.quantity;
|
||||
}
|
||||
)
|
||||
);
|
||||
if (this.goodDetail.productParams[index].quantity - quantity >= 0) {
|
||||
this.goodDetail.productParams[index].waresItemsParamsList.forEach(
|
||||
(stem, sndex) => {
|
||||
if (sndex != cndex) {
|
||||
this.$set(
|
||||
stem,
|
||||
'maxNum',
|
||||
"maxNum",
|
||||
this.goodDetail.productParams[index].quantity -
|
||||
(ggNum - stem.quantity)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
},
|
||||
tapSku(index) {
|
||||
this.hasChecked = this.goodDetail.waresSkuList[index].pkId
|
||||
this.hasChecked = this.goodDetail.waresSkuList[index].pkId;
|
||||
// this.goodDetail.waresPrice = this.goodDetail.waresSkuList[index].price
|
||||
this.$set(this.goodDetail,'waresPrice',this.goodDetail.waresSkuList[index].price)
|
||||
this.$set(this.goodDetail,'waresAchieve',this.goodDetail.waresSkuList[index].achieve)
|
||||
this.$set(
|
||||
this.goodDetail,
|
||||
"waresPrice",
|
||||
this.goodDetail.waresSkuList[index].price
|
||||
);
|
||||
this.$set(
|
||||
this.goodDetail,
|
||||
"waresAchieve",
|
||||
this.goodDetail.waresSkuList[index].achieve
|
||||
);
|
||||
// this.goodDetail.waresAchieve = this.goodDetail.waresSkuList[index].waresAchieve
|
||||
},
|
||||
getDetails() {
|
||||
|
|
@ -390,13 +417,13 @@ export default {
|
|||
source: this.source,
|
||||
})
|
||||
.then((res) => {
|
||||
this.goodDetail = res.data
|
||||
let sl = this.goodDetail.sales + ''
|
||||
this.goodDetail = res.data;
|
||||
let sl = this.goodDetail.sales + "";
|
||||
if (sl >= 10000) {
|
||||
sl = sl.substring(0, sl.length - 4) + '万'+'+'
|
||||
sl = sl.substring(0, sl.length - 4) + "+";
|
||||
}
|
||||
this.goodDetail.sales = sl
|
||||
this.mainImgUrl = res.data.videoUrl || res.data.cover1
|
||||
this.goodDetail.sales = sl;
|
||||
this.mainImgUrl = res.data.videoUrl || res.data.cover1;
|
||||
this.imgUrlList = [
|
||||
res.data.cover,
|
||||
res.data.cover1,
|
||||
|
|
@ -405,43 +432,51 @@ export default {
|
|||
res.data.cover4,
|
||||
res.data.cover5,
|
||||
res.data.cover6,
|
||||
]
|
||||
];
|
||||
this.imgUrlList = this.imgUrlList.filter(
|
||||
(item) => item && item.trim()
|
||||
)
|
||||
this.hasChecked = this.goodDetail.waresSkuList[0].pkId
|
||||
this.$set(this.goodDetail,'waresPrice',this.goodDetail.waresSkuList[0].price)
|
||||
this.$set(this.goodDetail,'waresAchieve',this.goodDetail.waresSkuList[0].achieve)
|
||||
})
|
||||
);
|
||||
this.hasChecked = this.goodDetail.waresSkuList[0].pkId;
|
||||
this.$set(
|
||||
this.goodDetail,
|
||||
"waresPrice",
|
||||
this.goodDetail.waresSkuList[0].price
|
||||
);
|
||||
this.$set(
|
||||
this.goodDetail,
|
||||
"waresAchieve",
|
||||
this.goodDetail.waresSkuList[0].achieve
|
||||
);
|
||||
});
|
||||
},
|
||||
downTime() {
|
||||
let that = this
|
||||
let that = this;
|
||||
this.clockTime = setInterval(() => {
|
||||
if (
|
||||
that.goodDetail.deliveryTimeMs &&
|
||||
that.goodDetail.deliveryTimeMs > 0
|
||||
) {
|
||||
that.countDown = this.getTime(this.goodDetail.deliveryTimeMs--)
|
||||
that.countDown = this.getTime(this.goodDetail.deliveryTimeMs--);
|
||||
} else {
|
||||
that.countDown = '0天00时00分00秒'
|
||||
that.countDown = "0天00时00分00秒";
|
||||
}
|
||||
}, 1000)
|
||||
}, 1000);
|
||||
},
|
||||
getTime(time) {
|
||||
// 转换为式分秒
|
||||
let d = parseInt(time / 60 / 60 / 24) //计算剩余天数\
|
||||
d = d < 10 ? '0' + d : d
|
||||
let h = parseInt((time / 60 / 60) % 24)
|
||||
h = h < 10 ? '0' + h : h
|
||||
let m = parseInt((time / 60) % 60)
|
||||
m = m < 10 ? '0' + m : m
|
||||
let s = parseInt(time % 60)
|
||||
s = s < 10 ? '0' + s : s
|
||||
let d = parseInt(time / 60 / 60 / 24); //计算剩余天数\
|
||||
d = d < 10 ? "0" + d : d;
|
||||
let h = parseInt((time / 60 / 60) % 24);
|
||||
h = h < 10 ? "0" + h : h;
|
||||
let m = parseInt((time / 60) % 60);
|
||||
m = m < 10 ? "0" + m : m;
|
||||
let s = parseInt(time % 60);
|
||||
s = s < 10 ? "0" + s : s;
|
||||
// 作为返回值返回
|
||||
return d + '天' + h + '小时' + m + '分' + s + '秒'
|
||||
return d + "天" + h + "小时" + m + "分" + s + "秒";
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -566,7 +601,7 @@ export default {
|
|||
font-size: 16px;
|
||||
}
|
||||
.coloNum {
|
||||
color: #00417C;
|
||||
color: #00417c;
|
||||
font-weight: 600;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
|
@ -695,7 +730,7 @@ export default {
|
|||
.tit1 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #00417C;
|
||||
color: #00417c;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
|
@ -721,7 +756,7 @@ export default {
|
|||
.tit5 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #00417C;
|
||||
color: #00417c;
|
||||
}
|
||||
.tit6 {
|
||||
font-size: 14px;
|
||||
|
|
@ -737,7 +772,7 @@ export default {
|
|||
.tit8 {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #00417C;
|
||||
color: #00417c;
|
||||
}
|
||||
.tit9 {
|
||||
font-size: 18px;
|
||||
|
|
@ -769,7 +804,7 @@ export default {
|
|||
cursor: pointer;
|
||||
}
|
||||
.actMenu {
|
||||
border-bottom: 5px solid #00417C;
|
||||
border-bottom: 5px solid #00417c;
|
||||
}
|
||||
}
|
||||
.xian {
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@
|
|||
<div class="main">
|
||||
<div>
|
||||
<!-- 公告弹窗 -->
|
||||
<notice-popup
|
||||
<!-- <notice-popup
|
||||
:userInfo="userInfo"
|
||||
:publishLocationIndex="index"
|
||||
></notice-popup>
|
||||
></notice-popup> -->
|
||||
</div>
|
||||
<sidebarUserInfo></sidebarUserInfo>
|
||||
<div class="main_r">
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
<div class="xian"></div>
|
||||
|
||||
<!-- 钱包 -->
|
||||
<div v-show="isMenu == 0 && cango">
|
||||
<div v-show="isMenu == 0 && walletVisible">
|
||||
<!-- <walletComments></walletComments> -->
|
||||
<div class="bartopbox">
|
||||
<div class="flexbox">
|
||||
|
|
@ -113,19 +113,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog
|
||||
class="pswdialog"
|
||||
:title="'二级密码'"
|
||||
<SecondaryPassword
|
||||
:visible.sync="pswShow"
|
||||
width="30%"
|
||||
center
|
||||
:close-on-click-modal="false"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<div class="tit">{{ "请输入二级密码" }}</div>
|
||||
<el-input v-model="password" type="password"></el-input>
|
||||
<div class="btn" @click="surePsw">{{ "确定" }}</div>
|
||||
</el-dialog>
|
||||
@validPwd="validPwd"
|
||||
></SecondaryPassword>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -148,14 +139,15 @@ import monthlyHistory from "@/components/selfService/monthlyHistory.vue";
|
|||
import selfPickOrders from "@/components/selfService/selfPickOrders.vue";
|
||||
import selfCancleOrder from "@/components/selfService/selfCancleOrder.vue";
|
||||
import existRealName from "@/components/selfService/existRealName.vue";
|
||||
import noticePopup from "@/components/noticePopup.vue";
|
||||
import SecondaryPassword from "@/components/secondary-password/index.vue";
|
||||
// import noticePopup from "@/components/noticePopup.vue";
|
||||
import { mapGetters } from "vuex";
|
||||
import { checkPwd, checkIfShow } from "@/api/wallet.js";
|
||||
import { checkIfShow } from "@/api/wallet.js";
|
||||
import * as api from "@/api/goods.js";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
noticePopup,
|
||||
// noticePopup,
|
||||
carryGoods,
|
||||
delar,
|
||||
activity,
|
||||
|
|
@ -174,6 +166,7 @@ export default {
|
|||
monthlyHistory,
|
||||
selfCancleOrder,
|
||||
existRealName,
|
||||
SecondaryPassword,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["userInfo"]),
|
||||
|
|
@ -277,13 +270,13 @@ export default {
|
|||
pkAccountId: "",
|
||||
pswShow: false,
|
||||
password: "",
|
||||
cango: false,
|
||||
walletVisible: false,
|
||||
theselfHeader: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route(n, o) {
|
||||
this.cango = false;
|
||||
this.walletVisible = false;
|
||||
this.isMenu = n.query.id;
|
||||
if (this.isMenu == 0) {
|
||||
this.password = "";
|
||||
|
|
@ -476,26 +469,11 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
surePsw() {
|
||||
checkPwd({ pwd: this.password }).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.cango = true;
|
||||
this.password = "";
|
||||
this.pswShow = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleClose() {
|
||||
this.pswShow = false;
|
||||
},
|
||||
goMenu(id) {
|
||||
if (id == 0) {
|
||||
this.password = "";
|
||||
this.pswShow = true;
|
||||
}
|
||||
// if (id == 5) {
|
||||
|
||||
// }
|
||||
this.$router.push({
|
||||
path: "/vipCenter",
|
||||
query: { id: id },
|
||||
|
|
@ -512,6 +490,11 @@ export default {
|
|||
handleLink2(id) {
|
||||
this.atabActive = id;
|
||||
},
|
||||
validPwd(valid) {
|
||||
if (valid) {
|
||||
this.walletVisible = true;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -520,31 +503,7 @@ export default {
|
|||
::v-deep .el-carousel__container {
|
||||
height: 500px;
|
||||
}
|
||||
::v-deep .pswdialog {
|
||||
margin-top: 120px;
|
||||
}
|
||||
.tit {
|
||||
font-size: 16px;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.btn {
|
||||
line-height: 50px;
|
||||
width: 180px;
|
||||
// height: 50px;
|
||||
background: #d5251d;
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
margin: 0 auto;
|
||||
margin-top: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bartopbox {
|
||||
margin-top: 20px;
|
||||
.flexbox {
|
||||
|
|
@ -568,7 +527,7 @@ export default {
|
|||
}
|
||||
.act {
|
||||
color: #ffffff;
|
||||
background: rgba(192, 31, 31, 1);
|
||||
background: var(--primary-color);
|
||||
}
|
||||
.main {
|
||||
min-height: 100vh;
|
||||
|
|
@ -599,7 +558,7 @@ export default {
|
|||
cursor: pointer;
|
||||
}
|
||||
.actMenu {
|
||||
border-bottom: 5px solid #00417C;
|
||||
border-bottom: 5px solid #00417c;
|
||||
}
|
||||
}
|
||||
.xian {
|
||||
|
|
|
|||
Loading…
Reference in New Issue