angelo
/
web-base-pc
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(vipCenter): 用户中心主题样式样式修改

This commit is contained in:
woody 2025-04-30 11:38:14 +08:00
parent 6913479b40
commit 1e4ba285ae
16 changed files with 1915 additions and 1730 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/fistAddPv.vue
View File

@ -6,13 +6,12 @@
--> -->
<template> <template>
<div> <div>
<div id="firstPv" <div id="firstPv" style="width: 700px; height: 400px"></div>
style="width: 700px; height: 400px"></div>
</div> </div>
</template> </template>
<script> <script>
import * as api from '@/api/activity.js' import * as api from "@/api/activity.js";
export default { export default {
// mounted() { // mounted() {
// this.upDateCover() // this.upDateCover()
@ -21,31 +20,31 @@ export default {
upDateCover() { upDateCover() {
api.achieveDay().then((res) => { api.achieveDay().then((res) => {
let arr1 = res.data.map((item) => { let arr1 = res.data.map((item) => {
return item.settleDate return item.settleDate;
}) });
let arr2 = res.data.map((item) => { let arr2 = res.data.map((item) => {
return item.aNewPv return item.aNewPv;
}) });
let arr3 = res.data.map((item) => { let arr3 = res.data.map((item) => {
return item.bNewPv return item.bNewPv;
}) });
this.drawChart(arr1, arr2, arr3) this.drawChart(arr1, arr2, arr3);
}) });
}, },
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 = { let option = {
title: { title: {
text: '', text: "",
subtext: '业绩(万)', subtext: "业绩",
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
}, },
legend: { legend: {
top: 'bottom', top: "bottom",
data: ['左区', '右区'], data: ["左区", "右区"],
itemWidth: 20, // 长方形宽度 itemWidth: 20, // 长方形宽度
itemHeight: 10, // 长方形高度 itemHeight: 10, // 长方形高度
}, },
@ -55,9 +54,9 @@ export default {
interval: 0, interval: 0,
// rotate: 45, // rotate: 45,
textStyle: { textStyle: {
color: '#000', color: "#000",
fontSize: '10', fontSize: "10",
itemSize: '', itemSize: "",
}, },
}, },
axisTick: { axisTick: {
@ -68,19 +67,19 @@ export default {
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type: 'dashed', type: "dashed",
}, },
}, },
}, },
series: [ series: [
{ {
name: '左区', name: "左区",
type: 'line', type: "line",
data: arr2, data: arr2,
symbol: 'none', symbol: "none",
itemStyle: { itemStyle: {
normal: { normal: {
color: '#5A64FF', color: "#5A64FF",
}, },
}, },
lineStyle: { lineStyle: {
@ -90,13 +89,13 @@ export default {
}, },
}, },
{ {
name: '右区', name: "右区",
type: 'line', type: "line",
data: arr3, data: arr3,
symbol: 'none', symbol: "none",
itemStyle: { itemStyle: {
normal: { normal: {
color: '#01C4FF', color: "#01C4FF",
}, },
}, },
lineStyle: { lineStyle: {
@ -106,13 +105,12 @@ export default {
}, },
}, },
], ],
} };
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option) myChart.setOption(option);
}, },
}, },
} };
</script> </script>
<style> <style></style>
</style>

6
src/components/honoraryAward.vue
View File

@ -81,8 +81,7 @@
</div> </div>
</div> </div>
<div class="money"> <div class="money">
{{ "左区" }}：{{ dataList.memberAwardsUnderVO.aSumRealPv {{ "左区" }}：{{ dataList.memberAwardsUnderVO.aSumRealPv }}
}}{{ "万" }}
</div> </div>
</div> </div>
<div class="max-right"> <div class="max-right">
@ -144,8 +143,7 @@
</div> </div>
</div> </div>
<div class="money"> <div class="money">
{{ "右区" }}：{{ dataList.memberAwardsUnderVO.bSumRealPv {{ "右区" }}：{{ dataList.memberAwardsUnderVO.bSumRealPv }}
}}{{ "万" }}
</div> </div>
</div> </div>
</div> </div>

50
src/components/marketDynamics/consanguinityPv.vue
View File

@ -1,32 +1,32 @@
<template> <template>
<div class="yjfb"> <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="num">{{ achieveData.leftCoun || 0 }}</div>
<div class="btom">{{ '左区人数' }}</div> <div class="btom">{{ "左区人数" }}</div>
</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="num">{{ achieveData.leftAchieve || 0 }}</div>
<div class="btom">{{ '左区业绩（万）' }}</div> <div class="btom">{{ "左区业绩" }}</div>
</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="num">{{ achieveData.leftDirectAchieve || 0 }}</div>
<div class="btom">{{'左区'}}{{'血缘业绩（万）'}}</div> <div class="btom">{{ "左区" }}{{ "血缘业绩" }}</div>
</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="num">{{ achieveData.directAchieve || 0 }}</div>
<div class="btom">{{ '血缘业绩（万）' }}</div> <div class="btom">{{ "血缘业绩" }}</div>
</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="num">{{ achieveData.rightDirectAchieve || 0 }}</div>
<div class="btom">{{'右区'}}{{'血缘业绩（万）'}}</div> <div class="btom">{{ "右区" }}{{ "血缘业绩" }}</div>
</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="num">{{ achieveData.rightAchieve || 0 }}</div>
<div class="btom">{{ '右区业绩（万）' }}</div> <div class="btom">{{ "右区业绩" }}</div>
</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="num">{{ achieveData.rightCount || 0 }}</div>
<div class="btom">{{ '右区人数' }}</div> <div class="btom">{{ "右区人数" }}</div>
</div> </div>
</div> </div>
</template> </template>
@ -45,18 +45,18 @@ export default {
// // 定义是否必须传 // // 定义是否必须传
// required: false, // required: false,
// }, // },
achieveData:{ achieveData: {
type:Object, type: Object,
} },
}, },
mounted() { mounted() {
// this.getFgDataList() // this.getFgDataList()
}, },
methods: { methods: {
goDetail(index,type){ goDetail(index, type) {
this.$router.push({ this.$router.push({
path:"/marketDynamics", path: "/marketDynamics",
query: { id: 0,ifDetail:index,monthScoreType:type}, query: { id: 0, ifDetail: index, monthScoreType: type },
}); });
}, },
// getFgDataList(val) { // getFgDataList(val) {
@ -115,21 +115,23 @@ export default {
width: 253px; width: 253px;
height: 253px; height: 253px;
margin: 0 8px; 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; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.qiu4{ .qiu4 {
width: 179px; width: 179px;
height: 179px; height: 179px;
border-radius: 50%; border-radius: 50%;
margin: 0 10px; margin: 0 10px;
margin-top: 8px; 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; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
} }
</style> </style>

299
src/components/marketDynamics/recommendedCommunity.vue
View File

@ -1,157 +1,156 @@
<template> <template>
<div> <div>
<div class="flex-s"> <div class="flex-s">
<div <div
id="main3" id="main3"
style="width: 100%; margin-top: -20px" style="width: 100%; margin-top: -20px"
:style="myChartStyle" :style="myChartStyle"
></div> ></div>
</div>
</div> </div>
</template> </div>
</template>
<script>
import * as echarts from "echarts"; <script>
import { getRecommendCommunity } from "@/api/index"; import * as echarts from "echarts";
export default { import { getRecommendCommunity } from "@/api/index";
name: "recommendTime", export default {
data() { name: "recommendTime",
return { data() {
texts: "", return {
pieData: [ texts: "",
pieData: [
{
value: 0,
age: 0,
name: "大区",
itemStyle: { color: "#2982ff" },
},
{
value: 0,
age: 0,
name: "小区",
itemStyle: { color: "#01c291" },
},
],
myChartStyle: {
float: "center",
width: "700px",
height: "450px",
paddingTop: "0",
// margin: "20px",
}, //图表样式
};
},
mounted() {
// this.getData();
},
methods: {
getData() {
getRecommendCommunity().then((res) => {
this.pieData[0].value = res.data.rightAchieve;
this.pieData[1].value = res.data.leftAchieve;
this.pieData[0].age = res.data.rightPeopleNumber;
this.pieData[1].age = res.data.leftPeopleNumber;
setTimeout(() => {
this.ageChart(res.data);
}, 50);
});
},
ageChart(datas) {
var myChart = echarts.init(document.getElementById("main3"));
let that = this;
var option = {
legend: {
// 图例
// right: "0%",
left: "42%",
bottom: "0",
color: "#999",
// orient: "vertical",
},
series: [
{ {
value: 0, type: "pie",
age: 0, label: {
name: '大区', show: true,
itemStyle: { color: "#2982ff" }, // formatter:'{b}: {c}人\n 业绩: {d}万',
}, formatter: function (data) {
{ // console.error(data);
value: 0, return (
age: 0, data.data.name +
name: '小区', ":" +
itemStyle: { color: "#01c291" }, data.data.age +
"人" +
"\n " +
"业绩：" +
data.data.value
);
},
lineHeight: 25, // 行高
color: "{f}",
labelLine: {
show: false,
},
},
radius: "70%", //饼图半径
data: that.pieData,
}, },
], ],
myChartStyle: {
float: "center",
width: "700px",
height: "450px",
paddingTop: "0",
// margin: "20px",
}, //图表样式
}; };
myChart.setOption(option);
}, },
mounted() { },
// this.getData(); };
}, </script>
methods: {
getData() { <style scoped lang="scss">
getRecommendCommunity().then((res) => { ::v-deep .el-select .el-input .el-select__caret {
this.pieData[0].value = res.data.rightAchieve; color: #333;
this.pieData[1].value = res.data.leftAchieve; }
this.pieData[0].age = res.data.rightPeopleNumber; .lines {
this.pieData[1].age = res.data.leftPeopleNumber; width: 2px;
setTimeout(() => { height: 470px;
this.ageChart(res.data); opacity: 1;
}, 50); background: #979797;
}); position: absolute;
}, bottom: 50px;
ageChart(datas) { left: 50%;
var myChart = echarts.init(document.getElementById("main3")); margin-left: -110px;
let that = this }
var option = { .right-lines {
legend: { position: absolute;
// 图例 right: 80px;
// right: "0%", top: 140px;
left: "42%", color: #999;
bottom: "0", font-size: 12px;
color: "#999", }
// orient: "vertical", .item-s {
}, padding-bottom: 10px;
series: [ display: flex;
{ line-height: 24px;
type: "pie", }
label: { .bg-color {
show: true, width: 40px;
// formatter:'{b}: {c}人\n 业绩: {d}万', height: 22px;
formatter: function (data) { border-radius: 2px;
// console.error(data); margin-left: 5px;
return ( }
data.data.name + .flex-s {
":" + display: flex;
data.data.age + justify-content: center;
"人" + align-items: center;
"\n " + width: 700px;
"业绩：" + }
data.data.value + .styles {
that.$t('S_C_58') position: absolute;
); right: -30px;
}, z-index: 111;
lineHeight: 25, // 行高 top: 60px;
color: "{f}", /*background: rgba(0,0,0,0.05);*/
labelLine: { /*border-radius: 4px 4px 4px 4px;*/
show: false, }
}, ::v-deep .el-select .el-input__inner {
}, border: none;
radius: "70%", //饼图半径 background: rgba(0, 0, 0, 0.05);
data: that.pieData, }
}, </style>
],
};
myChart.setOption(option);
},
},
};
</script>
<style scoped lang="scss">
::v-deep .el-select .el-input .el-select__caret {
color: #333;
}
.lines {
width: 2px;
height: 470px;
opacity: 1;
background: #979797;
position: absolute;
bottom: 50px;
left: 50%;
margin-left: -110px;
}
.right-lines {
position: absolute;
right: 80px;
top: 140px;
color: #999;
font-size: 12px;
}
.item-s {
padding-bottom: 10px;
display: flex;
line-height: 24px;
}
.bg-color {
width: 40px;
height: 22px;
border-radius: 2px;
margin-left: 5px;
}
.flex-s {
display: flex;
justify-content: center;
align-items: center;
width: 700px;
}
.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 {
border: none;
background: rgba(0, 0, 0, 0.05);
}
</style>

70
src/components/mounthPvCompare.vue
View File

@ -6,23 +6,20 @@
--> -->
<template> <template>
<div> <div>
<div id="mounthData" <div id="mounthData" style="width: 700px; height: 400px"></div>
style="width: 700px; height: 400px">
</div>
</div> </div>
</template> </template>
<script> <script>
import * as api from '@/api/activity.js' import * as api from "@/api/activity.js";
export default { export default {
props:{ props: {
time: { time: {
type: Number, type: Number,
// 定义是否必须传 // 定义是否必须传
required: false, required: false,
},
}, },
},
mounted() { mounted() {
// this.upDateCover() // this.upDateCover()
// this.drawChart() // this.drawChart()
@ -35,31 +32,31 @@ export default {
}) })
.then((res) => { .then((res) => {
let arr1 = res.data.map((item) => { let arr1 = res.data.map((item) => {
return item.date return item.date;
}) });
let arr2 = res.data.map((item) => { let arr2 = res.data.map((item) => {
return item.aNewPv return item.aNewPv;
}) });
let arr3 = res.data.map((item) => { let arr3 = res.data.map((item) => {
return item.bNewPv return item.bNewPv;
}) });
this.drawChart(arr1, arr2, arr3) this.drawChart(arr1, arr2, arr3);
}) });
}, },
drawChart(arr1, arr2, arr3) { drawChart(arr1, arr2, arr3) {
// 基于准备好的dom，初始化echarts实例 这个和上面的main对应 // 基于准备好的dom，初始化echarts实例 这个和上面的main对应
let myChart = this.$echarts.init(document.getElementById('mounthData')) let myChart = this.$echarts.init(document.getElementById("mounthData"));
// 指定图表的配置项和数据 // 指定图表的配置项和数据
let option = { let option = {
title: { title: {
text: '', text: "",
subtext: '业绩(万)', subtext: "业绩",
}, },
tooltip: {}, tooltip: {},
legend: { legend: {
top: 'bottom', top: "bottom",
bottom: '5%', bottom: "5%",
data: ['左区', '右区'], data: ["左区", "右区"],
}, },
xAxis: { xAxis: {
data: arr1, data: arr1,
@ -71,41 +68,40 @@ export default {
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type: 'dashed', type: "dashed",
}, },
}, },
}, },
series: [ series: [
{ {
name: '左区', name: "左区",
type: 'bar', type: "bar",
data: arr2, data: arr2,
itemStyle: { itemStyle: {
normal: { normal: {
barBorderRadius: [10, 10, 0, 0], barBorderRadius: [10, 10, 0, 0],
color: '#FE4C4B', color: "#FE4C4B",
}, },
}, },
}, },
{ {
name: '右区', name: "右区",
type: 'bar', type: "bar",
data: arr3, data: arr3,
itemStyle: { itemStyle: {
normal: { normal: {
barBorderRadius: [10, 10, 0, 0], barBorderRadius: [10, 10, 0, 0],
color: '#FFAE36', color: "#FFAE36",
}, },
}, },
}, },
], ],
} };
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option) myChart.setOption(option);
}, },
}, },
} };
</script> </script>
<style> <style></style>
</style>

522
src/components/performance.vue
View File

@ -1,285 +1,299 @@
<template> <template>
<div> <div>
<div class="styles"> <div class="styles">
<el-form > <el-form>
<el-col :span="12"> <el-col :span="12">
<el-select v-model="texts" <el-select v-model="texts" @change="selectTime" placeholder="">
@change="selectTime" <el-option
placeholder=""> v-for="item in deliList"
<el-option v-for="item in deliList" :key="item.value"
:label="item.label"
:key="item.value" :value="item.value"
:label="item.label" >
:value="item.value"> </el-option>
</el-option> </el-select>
</el-select> </el-col>
</el-col> </el-form>
</el-form>
</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>
</div>
<!-- <div class="lines"></div>-->
<div class="flex-s">
<div id="main1" style="width: 100%;margin-top: 10px" :style="myChartStyle"></div>
</div>
</div> </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>
</div>
<!-- <div class="lines"></div>-->
<div class="flex-s">
<div
id="main1"
style="width: 100%; margin-top: 10px"
:style="myChartStyle"
></div>
</div>
</div>
</template> </template>
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
import {getDayType, getIndexAddAchieve, getMemberRecommend} from "@/api/index"; import {
import {formatSeconds} from "@/util/common"; getDayType,
getIndexAddAchieve,
getMemberRecommend,
} from "@/api/index";
import { formatSeconds } from "@/util/common";
export default { export default {
name: "recommendTime", name: "recommendTime",
data(){ data() {
return{ return {
list:[{"name":'左区首购',"color":"#FF5151"}, list: [
{"name":'左区复购',"color":"#BB0909"}, { name: "左区首购", color: "#FF5151" },
{"name":'右区首购',"color":"#FFAE36"}, { name: "左区复购", color: "#BB0909" },
{"name":'右区复购',"color":"#935801"} { name: "右区首购", color: "#FFAE36" },
], { name: "右区复购", color: "#935801" },
texts:'', ],
deliList:[{"label":'近七日',"value":7},{"label":'近十四日',"value":14},{"label":'近三十日',"value":30}], texts: "",
myChartStyle: { deliList: [
float: "center", { label: "近七日", value: 7 },
width: "700px", { label: "近十四日", value: 14 },
height: "550px", { label: "近三十日", value: 30 },
paddingTop: "0", ],
// margin: "20px", myChartStyle: {
}, //图表样式 float: "center",
sexData: [ width: "700px",
{ height: "550px",
data: [150, 230, 224, 218, 135, 147, 260], paddingTop: "0",
type: 'line', // margin: "20px",
color:'#FE9A02', }, //图表样式
label: { sexData: [
show: false, {
position:'right', data: [150, 230, 224, 218, 135, 147, 260],
}, type: "line",
}, color: "#FE9A02",
], label: {
} show: false,
position: "right",
},
},
],
};
},
mounted() {
this.selected();
},
methods: {
selectTime(data) {
this.texts = data;
this.getData();
}, },
mounted() { selected() {
this.selected(); getDayType().then((res) => {
this.deliList = res.data;
this.ageChart(res.data);
this.getData(res.data[0].value);
this.texts = res.data[0].label;
});
},
getData(value) {
getIndexAddAchieve({ dayType: this.texts || value }).then((res) => {
this.ageChart(res.data);
});
}, },
methods:{
selectTime(data) {
this.texts =data
this.getData();
},
selected() {
getDayType().then((res)=>{
this.deliList = res.data
this.ageChart(res.data);
this.getData(res.data[0].value);
this.texts = res.data[0].label
})
},
getData(value) {
getIndexAddAchieve({"dayType":this.texts || value}).then((res)=>{
this.ageChart(res.data);
})
},
ageChart(data) { ageChart(data) {
var myChart = echarts.init(document.getElementById('main1')); var myChart = echarts.init(document.getElementById("main1"));
let time =[]; let time = [];
let time1 =[]; let time1 = [];
let arr1 = []; let arr1 = [];
let arr2 = []; let arr2 = [];
let arr3 = []; let arr3 = [];
let arr4 = []; let arr4 = [];
data.forEach((item)=>{ data.forEach((item) => {
if(item.settleDate){ if (item.settleDate) {
// let time1=item.settleDate.split("-"); // let time1=item.settleDate.split("-");
// let json = time1[1]+'-'+time1[2] // let json = time1[1]+'-'+time1[2]
time.push(item.settleDate) time.push(item.settleDate);
} }
arr1.push(item.repANewPv) arr1.push(item.repANewPv);
arr2.push(item.repBNewPv) arr2.push(item.repBNewPv);
arr3.push(item.bNewPv) arr3.push(item.bNewPv);
arr4.push(item.aNewPv) arr4.push(item.aNewPv);
}) });
console.error(time) console.error(time);
var option = { var option = {
title: { title: {
text: '业绩（万）' text: "业绩",
},
tooltip: {
// _8:function (params){
// return `<div style="text-align: center;color: #fff">`+params[0].axisValue+'<br/>'+ '<span style="">'+params[0].value + `</span>`
// },
// backgroundColor: '#FF5151',
// trigger: 'axis',
// axisPointer: {
// type: 'shadow'
// }
},
legend: {
// left: "right",\\
top: "70px",
right: "30px",
width: "auto",
orient: 'vertical',
itemHeight: 21,
itemWidth:39
},
grid: {
left: '0%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data:time,
axisLine:{
show:true,
lineStyle: {
color: "#333",
width: '1', // 坐标轴线线宽
type: 'solid', // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
},
},
axisTick: {
show: true, // 是否显示坐标轴刻度
inside: true, // 坐标轴刻度是否朝内，默认朝外
length: 5, // 坐标轴刻度的长度
lineStyle: {
color: '#FFF', // 刻度线的颜色
width: 10, // 坐标轴刻度线宽
type: 'solid', // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
},
},
splitLine: {
show: false
},
axisLabel:{
type: 'category',
interval: 0,
textStyle: {
color: '#000',
fontSize: '10',
itemSize: '',
},
formatter: function(data){
return data
}
}
},
yAxis: {
type: 'value',
splitLine: {
show: true,
lineStyle: {
color: "#CCCCCC",
type: "dashed", //虚线
width: 2
}
}
},
series: [
{
data: arr4,
type: 'line',
color:'#FF5151',
label: {
show: false,
position:'right',
},
formatter: function(data){
console.error(data)
}
},
{
data: arr1,
type: 'line',
color:'#BB0909',
label: {
show: false,
position:'right',
},
},
{
data: arr3,
type: 'line',
color:'#FE9A02',
label: {
show: false,
position:'right',
},
},
{
data: arr2,
type: 'line',
color:'#935801',
label: {
show: false,
position:'right',
},
}
],
};
myChart.setOption(option);
}, },
} tooltip: {
} // _8:function (params){
// return `<div style="text-align: center;color: #fff">`+params[0].axisValue+'<br/>'+ '<span style="">'+params[0].value + `</span>`
// },
// backgroundColor: '#FF5151',
// trigger: 'axis',
// axisPointer: {
// type: 'shadow'
// }
},
legend: {
// left: "right",\\
top: "70px",
right: "30px",
width: "auto",
orient: "vertical",
itemHeight: 21,
itemWidth: 39,
},
grid: {
left: "0%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
data: time,
axisLine: {
show: true,
lineStyle: {
color: "#333",
width: "1", // 坐标轴线线宽
type: "solid", // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
},
},
axisTick: {
show: true, // 是否显示坐标轴刻度
inside: true, // 坐标轴刻度是否朝内，默认朝外
length: 5, // 坐标轴刻度的长度
lineStyle: {
color: "#FFF", // 刻度线的颜色
width: 10, // 坐标轴刻度线宽
type: "solid", // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
},
},
splitLine: {
show: false,
},
axisLabel: {
type: "category",
interval: 0,
textStyle: {
color: "#000",
fontSize: "10",
itemSize: "",
},
formatter: function (data) {
return data;
},
},
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "#CCCCCC",
type: "dashed", //虚线
width: 2,
},
},
},
series: [
{
data: arr4,
type: "line",
color: "#FF5151",
label: {
show: false,
position: "right",
},
formatter: function (data) {
console.error(data);
},
},
{
data: arr1,
type: "line",
color: "#BB0909",
label: {
show: false,
position: "right",
},
},
{
data: arr3,
type: "line",
color: "#FE9A02",
label: {
show: false,
position: "right",
},
},
{
data: arr2,
type: "line",
color: "#935801",
label: {
show: false,
position: "right",
},
},
],
};
myChart.setOption(option);
},
},
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
::v-deep .el-select .el-input .el-select__caret{ ::v-deep .el-select .el-input .el-select__caret {
color: #333; color: #333;
} }
.lines{ .lines {
width: 2px; width: 2px;
height: 470px; height: 470px;
opacity: 1; opacity: 1;
background: #979797; background: #979797;
position: absolute; position: absolute;
bottom: 50px; bottom: 50px;
left: 50%; left: 50%;
margin-left: -110px; margin-left: -110px;
} }
.right-lines{ .right-lines {
position: absolute; position: absolute;
right: 80px; right: 80px;
top: 140px; top: 140px;
color: #999; color: #999;
font-size: 12px; font-size: 12px;
} }
.item-s{ .item-s {
padding-bottom: 10px; padding-bottom: 10px;
display: flex; display: flex;
line-height: 24px; line-height: 24px;
} }
.bg-color{ .bg-color {
width: 40px; width: 40px;
height: 22px; height: 22px;
border-radius: 2px; border-radius: 2px;
margin-left: 5px; margin-left: 5px;
} }
.flex-s{ .flex-s {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 850px; width: 850px;
} }
.styles{ .styles {
position: absolute; position: absolute;
right: -30px; right: -30px;
z-index: 111; z-index: 111;
top: 60px; top: 60px;
/*background: rgba(0,0,0,0.05);*/ /*background: rgba(0,0,0,0.05);*/
/*border-radius: 4px 4px 4px 4px;*/ /*border-radius: 4px 4px 4px 4px;*/
} }
::v-deep .el-select .el-input__inner{ ::v-deep .el-select .el-input__inner {
border: none; border: none;
background: rgba(0,0,0,0.05); background: rgba(0, 0, 0, 0.05);
} }
</style> </style>

13
src/components/placementPerformance.vue
View File

@ -20,17 +20,16 @@ export default {
return { return {
texts: "", texts: "",
pieData: [ pieData: [
{ {
value: 0, value: 0,
age: 0, age: 0,
name: '左区', name: "左区",
itemStyle: { color: "#EE5858" }, itemStyle: { color: "#EE5858" },
}, },
{ {
value: 0, value: 0,
age: 0, age: 0,
name: '右区', name: "右区",
itemStyle: { color: "#FBB046" }, itemStyle: { color: "#FBB046" },
}, },
], ],
@ -60,7 +59,7 @@ export default {
}, },
ageChart(datas) { ageChart(datas) {
var myChart = echarts.init(document.getElementById("main2")); var myChart = echarts.init(document.getElementById("main2"));
let that = this let that = this;
var option = { var option = {
legend: { legend: {
// 图例 // 图例
@ -75,7 +74,6 @@ export default {
type: "pie", type: "pie",
label: { label: {
show: true, show: true,
// formatter:'{b}: {c}人\n 业绩: {d}万',
formatter: function (data) { formatter: function (data) {
return ( return (
data.data.name + data.data.name +
@ -84,8 +82,7 @@ export default {
"人" + "人" +
"\n " + "\n " +
"业绩：" + "业绩：" +
data.data.value + data.data.value
that.$t('S_C_58')
); );
}, },
lineHeight: 25, // 行高 lineHeight: 25, // 行高
@ -155,4 +152,4 @@ export default {
border: none; border: none;
background: rgba(0, 0, 0, 0.05); background: rgba(0, 0, 0, 0.05);
} }
</style> </style>

218
src/components/realPerformances.vue
View File

@ -5,126 +5,122 @@
* @Date: 2023-05-15 14:38:28 * @Date: 2023-05-15 14:38:28
--> -->
<template> <template>
<div> <div>
<div id="mounthData1" <div id="mounthData1" :style="myChartStyle"></div>
:style="myChartStyle"> </div>
</div>
</div>
</template> </template>
<script> <script>
import * as api from '@/api/activity.js' import * as api from "@/api/activity.js";
import {getPerformance} from "@/api/index"; import { getPerformance } from "@/api/index";
export default { export default {
props:{ props: {
time: { time: {
type: Number, type: Number,
// 定义是否必须传 // 定义是否必须传
required: false, required: false,
},
}, },
data(){ },
return{ data() {
myChartStyle: { return {
float: 'center', myChartStyle: {
width: '700px', float: "center",
height: '450px', width: "700px",
paddingTop: '0', height: "450px",
paddingTop: "0",
// margin: "20px", // margin: "20px",
}, },
} };
},
mounted() {
// this.upDateCover()
// this.drawChart()
},
methods: {
upDateCover(val) {
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);
// arr2.push(3)
// arr2.push(5)
// arr2.push(10)
// arr3.push(3)
// arr3.push(5)
// arr3.push(10)
this.drawChart(arr2, arr3);
});
}, },
mounted() { drawChart(arr2, arr3) {
// this.upDateCover() let arr1 = ["累计业绩", "首购累计业绩", "复购累计业绩"];
// this.drawChart() // 基于准备好的dom，初始化echarts实例 这个和上面的main对应
}, let myChart = this.$echarts.init(document.getElementById("mounthData1"));
methods: { // 指定图表的配置项和数据
upDateCover(val) { let option = {
let arr2=[] title: {
let arr3=[] text: "",
getPerformance({ subtext: "业绩",
month: val || this.time, left: 40,
})
.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)
})
}, },
drawChart(arr2, arr3) { tooltip: {},
let arr1 =['累计业绩','首购累计业绩','复购累计业绩'] legend: {
// 基于准备好的dom，初始化echarts实例 这个和上面的main对应 top: "bottom",
let myChart = this.$echarts.init(document.getElementById('mounthData1')) data: ["左区", "右区"],
// 指定图表的配置项和数据 itemHeight: 20,
let option = { itemWidth: 40,
title: { bottom: 0,
text: '',
subtext: '业绩(万)',
left:40,
},
tooltip: {},
legend: {
top: 'bottom',
data: ['左区', '右区'],
itemHeight:20,
itemWidth:40,
bottom:0,
},
xAxis: {
data: arr1,
axisTick: {
show: false,
},
},
yAxis: {
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
},
},
},
series: [
{
name: '左区',
type: 'bar',
data: arr2,
itemStyle: {
normal: {
barBorderRadius: [10, 10, 0, 0],
color: '#01C291',
},
},
},
{
name: '右区',
type: 'bar',
data: arr3,
itemStyle: {
normal: {
barBorderRadius: [10, 10, 0, 0],
color: '#FE4C4B',
},
},
},
],
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
}, },
xAxis: {
data: arr1,
axisTick: {
show: false,
},
},
yAxis: {
splitLine: {
show: true,
lineStyle: {
type: "dashed",
},
},
},
series: [
{
name: "左区",
type: "bar",
data: arr2,
itemStyle: {
normal: {
barBorderRadius: [10, 10, 0, 0],
color: "#01C291",
},
},
},
{
name: "右区",
type: "bar",
data: arr3,
itemStyle: {
normal: {
barBorderRadius: [10, 10, 0, 0],
color: "#FE4C4B",
},
},
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}, },
} },
};
</script> </script>
<style> <style></style>
</style>

68
src/components/repAddPv.vue
View File

@ -12,15 +12,12 @@
--> -->
<template> <template>
<div> <div>
<div id="repPv" <div id="repPv" style="width: 700px; height: 400px"></div>
style="width: 700px; height: 400px">
</div>
</div> </div>
</template> </template>
<script> <script>
import * as api from '@/api/activity.js' import * as api from "@/api/activity.js";
export default { export default {
// mounted() { // mounted() {
// this.upDateCover() // this.upDateCover()
@ -29,31 +26,31 @@ export default {
upDateCover() { upDateCover() {
api.achieveDay().then((res) => { api.achieveDay().then((res) => {
let arr1 = res.data.map((item) => { let arr1 = res.data.map((item) => {
return item.settleDate return item.settleDate;
}) });
let arr2 = res.data.map((item) => { let arr2 = res.data.map((item) => {
return item.repANewPv return item.repANewPv;
}) });
let arr3 = res.data.map((item) => { let arr3 = res.data.map((item) => {
return item.repBNewPv return item.repBNewPv;
}) });
this.drawChart(arr1, arr2, arr3) this.drawChart(arr1, arr2, arr3);
}) });
}, },
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 = { let option = {
title: { title: {
text: '', text: "",
subtext: '业绩(万)', subtext: "业绩",
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
}, },
legend: { legend: {
top: 'bottom', top: "bottom",
data: ['左区', '右区'], data: ["左区", "右区"],
itemWidth: 20, // 长方形宽度 itemWidth: 20, // 长方形宽度
itemHeight: 10, // 长方形高度 itemHeight: 10, // 长方形高度
}, },
@ -66,9 +63,9 @@ export default {
interval: 0, interval: 0,
// rotate: 45, // rotate: 45,
textStyle: { textStyle: {
color: '#000', color: "#000",
fontSize: '10', fontSize: "10",
itemSize: '', itemSize: "",
}, },
}, },
}, },
@ -76,19 +73,19 @@ export default {
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type: 'dashed', type: "dashed",
}, },
}, },
}, },
series: [ series: [
{ {
name: '左区', name: "左区",
type: 'line', type: "line",
data: arr2, data: arr2,
symbol: 'none', symbol: "none",
itemStyle: { itemStyle: {
normal: { normal: {
color: '#FF5A5A', color: "#FF5A5A",
}, },
}, },
lineStyle: { lineStyle: {
@ -98,13 +95,13 @@ export default {
}, },
}, },
{ {
name: '右区', name: "右区",
type: 'line', type: "line",
data: arr3, data: arr3,
symbol: 'none', symbol: "none",
itemStyle: { itemStyle: {
normal: { normal: {
color: '#FFAE36', color: "#FFAE36",
}, },
}, },
lineStyle: { lineStyle: {
@ -114,13 +111,12 @@ export default {
}, },
}, },
], ],
} };
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option) myChart.setOption(option);
}, },
}, },
} };
</script> </script>
<style> <style></style>
</style>

100
src/components/secondary-password/index.vue Normal file
View File

@ -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>

1511
src/components/userTarget.vue
View File

File diff suppressed because it is too large Load Diff

2
src/views/goodsDetails/index.vue
View File

@ -844,7 +844,7 @@ export default {
this.goodDetail = res.data; this.goodDetail = res.data;
let sl = this.goodDetail.sales + ""; let sl = this.goodDetail.sales + "";
if (sl >= 10000) { if (sl >= 10000) {
sl = sl.substring(0, sl.length - 4) + "万" + "+"; sl = sl.substring(0, sl.length - 4) + "+";
} }
this.goodDetail.sales = sl; this.goodDetail.sales = sl;
this.mainImgUrl = res.data.videoUrl; this.mainImgUrl = res.data.videoUrl;

6
src/views/index/components/sidebarUserInfo.vue
View File

@ -53,7 +53,7 @@
}" }"
></div> ></div>
<div class="cha"> <div class="cha">
左区 {{ awards.aNewPv }}万/右区 {{ awards.bNewPv }}万 左区 {{ awards.aNewPv }}/右区 {{ awards.bNewPv }}
</div> </div>
</div> </div>
</div> </div>
@ -73,7 +73,7 @@
}" }"
></div> ></div>
<div class="cha"> <div class="cha">
左区 {{ awards.aMonthPv }}万/右区 {{ awards.bMonthPv }}万 左区 {{ awards.aMonthPv }}/右区 {{ awards.bMonthPv }}
</div> </div>
</div> </div>
</div> </div>
@ -93,7 +93,7 @@
}" }"
></div> ></div>
<div class="cha"> <div class="cha">
左区 {{ awards.aSumPv }}万/右区 {{ awards.bSumPv }}万 左区 {{ awards.aSumPv }}/右区 {{ awards.bSumPv }}
</div> </div>
</div> </div>
</div> </div>

248
src/views/performance/index.vue
View File

@ -21,44 +21,44 @@
<div class="name">目标业绩进度</div> <div class="name">目标业绩进度</div>
</div> </div>
<div class="box"> <div class="box">
<div class="titles">{{ startDate }} 至 {{endDate}}</div> <div class="titles">{{ startDate }} 至 {{ endDate }}</div>
<div class="echarts"> <div class="echarts">
<div class="title_s">{{'目标业绩'}}(PV)</div> <div class="title_s">{{ "目标业绩" }}(PV)</div>
<div class="e-chat"> <div class="e-chat">
<div class="list" v-for="item in list "> <div class="list" v-for="item in list">
<div class="tops"> <div class="tops"></div>
<div class="process" :style="{ height: item.percentage }">
</div> <div class="money">{{ item.percentage }}</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>
</div> </div>
</div>
</div> </div>
<div class="titles" style="margin-top: 40px">{{ startDate1 }} 至 {{endDate1}}</div> <div class="e-chat-s">
<div class="echarts"> <div class="moneys" v-for="item in list">
<div class="title_s" style="margin-top: 250px" >{{'目标业绩'}}(金额)</div> {{ item.targetPerformanceLeaveOut }}
<div class="e-chat" style="margin-top: 40px"> </div>
<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>
</div>
</div> </div>
</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>
<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>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -74,16 +74,12 @@ import sidebarUserInfo from "@/views/index/components/sidebarUserInfo";
import topBanner from "@/components/topBanner"; import topBanner from "@/components/topBanner";
import * as api from "@/api/register"; import * as api from "@/api/register";
import { getToken } from "@/util/auth"; import { getToken } from "@/util/auth";
import {getPerFormance,getPerFormanceAmount} from "@/api/register"; import { getPerFormance, getPerFormanceAmount } from "@/api/register";
export default { export default {
data() { data() {
return { return {
// list:[{"name":"20万","percent":15,num:20},{"name":"40万","percent":25,num:40}, list: [],
// {"name":"60万","percent":22,num:60},{"name":"80万","percent":20,num:80}, list1: [],
// {"name":"100万","percent":10,num:100}
// ],
list:[],
list1:[],
xData: [20, 40, 60, 80, 100], //横坐标 xData: [20, 40, 60, 80, 100], //横坐标
yData: [20, 24, 18, 25, 27], //数据 yData: [20, 24, 18, 25, 27], //数据
myChartStyle: { float: "left", width: "100%", height: "400px" }, myChartStyle: { float: "left", width: "100%", height: "400px" },
@ -97,130 +93,128 @@ export default {
memberCode: "", memberCode: "",
memberName: "", memberName: "",
}, },
startDate:'', startDate: "",
endDate:'', endDate: "",
startDate1:'', startDate1: "",
endDate1:'', endDate1: "",
navList: [ navList: [
{ name: "认证资质", url: "/superStudio" }, { name: "认证资质", url: "/superStudio" },
{ name: '注册业绩', url: "/performance" }, { name: "注册业绩", url: "/performance" },
{ name: '专属礼包', url: "/giftBag" }, { name: "专属礼包", url: "/giftBag" },
], ],
}; };
}, },
components: { sidebarUserInfo, topBanner }, components: { sidebarUserInfo, topBanner },
watch: {}, watch: {},
mounted() { mounted() {
this.getPerFormance(); this.getPerFormance();
this.getPerFormanceAmount(); this.getPerFormanceAmount();
}, },
methods: { methods: {
getPerFormance(){ getPerFormance() {
getPerFormance().then((res)=>{ getPerFormance().then((res) => {
this.startDate = res.data.startDate this.startDate = res.data.startDate;
this.endDate = res.data.endDate this.endDate = res.data.endDate;
this.list = res.data.targetPerformanceList this.list = res.data.targetPerformanceList;
}) });
}, },
getPerFormanceAmount(){ getPerFormanceAmount() {
getPerFormanceAmount().then((res)=>{ getPerFormanceAmount().then((res) => {
this.startDate1 = res.data.startDate this.startDate1 = res.data.startDate;
this.endDate1 = res.data.endDate this.endDate1 = res.data.endDate;
this.list1 = res.data.targetPerformanceList this.list1 = res.data.targetPerformanceList;
}) });
} },
} },
}; };
</script> </script>
<style> <style>
.tops{ .tops {
/*width: 128px;*/ /*width: 128px;*/
/*height: 17px;*/ /*height: 17px;*/
/*background: #F3F3F3;*/ /*background: #F3F3F3;*/
/*box-shadow: 0px -2px 6px 0px rgba(0,0,0,0.1);*/ /*box-shadow: 0px -2px 6px 0px rgba(0,0,0,0.1);*/
/*position: absolute;*/ /*position: absolute;*/
/*top: 0;*/ /*top: 0;*/
/*margin-top: -17px;*/ /*margin-top: -17px;*/
} }
.process{ .process {
background: var(--primary-color); background: var(--primary-color);
/*height: 50%;*/ /*height: 50%;*/
width: 100%; width: 100%;
position: absolute; position: absolute;
justify-content: center; justify-content: center;
align-items:center; align-items: center;
display: flex; display: flex;
bottom: 0; bottom: 0;
} }
.moneys{ .moneys {
width: 130px; width: 130px;
margin-right: 40px; margin-right: 40px;
text-align: center; text-align: center;
} }
.e-chat-s{ .e-chat-s {
width: 840px; width: 840px;
position: absolute; position: absolute;
display: flex; display: flex;
bottom: 0; bottom: 0;
justify-content: center; justify-content: center;
margin-left: 135px; margin-left: 135px;
} }
.money{ .money {
position: absolute; position: absolute;
bottom: 5px; bottom: 5px;
margin-top: -100px; margin-top: -100px;
color: #fff; color: #fff;
} }
.list{ .list {
position: relative; position: relative;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
display: flex; display: flex;
} }
.e-chat{ .e-chat {
display: flex; display: flex;
margin-top: 40px; margin-top: 40px;
} }
.list{ .list {
width: 128px; width: 128px;
height: 184px; height: 184px;
background: #F3F3F3; background: #f3f3f3;
margin-right: 40px; margin-right: 40px;
border-radius: 7px 7px 0 0 ; border-radius: 7px 7px 0 0;
} }
.title_s{ .title_s {
margin: 260px 20px 0 20px; margin: 260px 20px 0 20px;
} }
.echarts{ .echarts {
margin-left: 100px; margin-left: 100px;
display: flex; display: flex;
position: relative; position: relative;
} }
.hide .el-upload--picture-card { .hide .el-upload--picture-card {
display: none !important; display: none !important;
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
#mychart{ #mychart {
width: 800px!important; width: 800px !important;
} }
.titles{ .titles {
color: #333; color: #333;
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
} }
.box{ .box {
width: 1191px; width: 1191px;
//height: 475px; //height: 475px;
border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px;
opacity: 1; opacity: 1;
border: 1px solid #CCCCCC; border: 1px solid #cccccc;
margin: 40px 0 40px 40px; margin: 40px 0 40px 40px;
padding: 30px; padding: 30px;
} }
::v-deep .el-table .el-table__cell.is-center{ ::v-deep .el-table .el-table__cell.is-center {
color: #333; color: #333;
padding: 30px 0; padding: 30px 0;
font-weight: 600; font-weight: 600;

383
src/views/shareDetails/index.vue
View File

@ -11,35 +11,42 @@
* @Date: 2023-01-12 16:21:41 * @Date: 2023-01-12 16:21:41
--> -->
<template> <template>
<div class="contain" <div class="contain" ref="box">
ref="box">
<!-- 用户头 --> <!-- 用户头 -->
<personInfo></personInfo> <personInfo></personInfo>
<Sidebar :showCar="true" <Sidebar
@showShare="showShare" :showCar="true"
@showCar="showCar" @showShare="showShare"
ref="sideBar"></Sidebar> @showCar="showCar"
ref="sideBar"
></Sidebar>
<!-- 面包屑 --> <!-- 面包屑 -->
<div class="mianbao"> <div class="mianbao">
<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">{{'首页'}}</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/' }">{{
<el-breadcrumb-item v-if="specialArea!=18&&specialArea!=19" "首页"
:to="{ path: '/shoppingMall?id=' + specialArea }">{{ labelName }}</el-breadcrumb-item> }}</el-breadcrumb-item>
<el-breadcrumb-item v-else <el-breadcrumb-item
:to="{ path: '/spaceMallList' }">{{ labelName }}</el-breadcrumb-item> v-if="specialArea != 18 && specialArea != 19"
<el-breadcrumb-item>{{'商品详情'}}</el-breadcrumb-item> :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> </el-breadcrumb>
</div> </div>
<div class="details_t"> <div class="details_t">
<!-- 轮播图 --> <!-- 轮播图 -->
<Swiper :mainImgUrls="mainImgUrl" <Swiper :mainImgUrls="mainImgUrl" :imgUrlLists="imgUrlList"></Swiper>
:imgUrlLists="imgUrlList"></Swiper>
<!-- 商品信息 --> <!-- 商品信息 -->
<div class="details_c"> <div class="details_c">
<div class="dis_flex"> <div class="dis_flex">
<div class="qzbq" <div class="qzbq" v-if="goodDetail.prefixLabelTarget">
v-if="goodDetail.prefixLabelTarget">[{{ goodDetail.prefixLabelTarget.label }}]</div> [{{ goodDetail.prefixLabelTarget.label }}]
</div>
<div class="c_tit1"> <div class="c_tit1">
{{ goodDetail.waresName }} {{ goodDetail.waresName }}
</div> </div>
@ -51,26 +58,31 @@
<div class="c_bai_b"> <div class="c_bai_b">
<div class="dis_flex just"> <div class="dis_flex just">
<div class="dis_flex"> <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 class="tit6">{{ goodDetail.goodsAchive }}</div> -->
</div> </div>
<div class="tit7">{{'累计销售'}}</div> <div class="tit7">{{ "累计销售" }}</div>
</div> </div>
<div class="dis_flex just m10"> <div class="dis_flex just m10">
<div class="tit4 dis_flex"> <div class="tit4 dis_flex">
<div style="margin-right:20px">PV:{{ goodDetail.waresAchieve|numberToCurrency }} </div> <div style="margin-right: 20px">
<div v-show="goodDetail.specialArea == 13">BV:{{ goodDetail.goodsAssAchive }} </div> PV:{{ goodDetail.waresAchieve | numberToCurrency }}
</div>
<div v-show="goodDetail.specialArea == 13">
BV:{{ goodDetail.goodsAssAchive }}
</div>
</div> </div>
<div class="tit5"> {{ goodDetail.sales |seles}} </div> <div class="tit5">{{ goodDetail.sales | seles }}</div>
</div> </div>
<div class="dis_flex just m10"> <div class="dis_flex just m10">
<div class="dis_flex" <div class="dis_flex" v-if="goodDetail.giftNames">
v-if="goodDetail.giftNames"> <div class="tit8">{{ "赠品" }}:</div>
<div class="tit8">{{ '赠品'}}:</div>
<div class="tit9">{{ goodDetail.giftNames }}</div> <div class="tit9">{{ goodDetail.giftNames }}</div>
</div> </div>
<div v-else></div> <div v-else></div>
</div> </div>
</div> </div>
</div> </div>
@ -97,70 +109,75 @@
</div> --> </div> -->
<div class="gui"> <div class="gui">
<div class="gui_b"> <div class="gui_b">
<div class="gui_bt">{{ '规格' }}:</div> <div class="gui_bt">{{ "规格" }}:</div>
<div class="gui_bb"> <div class="gui_bb">
<div v-for="item,index in goodDetail.waresSkuList" <div
:key="item.pkId" v-for="(item, index) in goodDetail.waresSkuList"
class="gui_i"> :key="item.pkId"
class="gui_i"
>
<div class="gui_ia"> <div class="gui_ia">
<div @click.stop="tapSku(index)" <div
:class="['gui_ii',hasChecked==item.pkId?'gui_a':'']"> @click.stop="tapSku(index)"
<img :src="item.image" :class="['gui_ii', hasChecked == item.pkId ? 'gui_a' : '']"
alt=""> >
<div class="gui_iit">{{ item.specValueNames}}</div> <img :src="item.image" alt="" />
<div class="gui_iit">{{ item.specValueNames }}</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 数量 --> <!-- 数量 -->
<div class="dis_flex" <div class="dis_flex" v-if="userInfo.registerFans == 0">
v-if="userInfo.registerFans == 0"> <div>{{ "数量" }}：</div>
<div>{{ '数量' }}：</div> <el-input-number v-model="num" :min="1"></el-input-number>
<el-input-number v-model="num"
:min="1"></el-input-number>
</div> </div>
<div class="addCar" <div class="addCar" @click="toAddCar">{{ "加入购物车" }}</div>
@click="toAddCar">{{ '加入购物车' }}</div>
<!-- <div class="addCar" <!-- <div class="addCar"
v-if="userInfo.registerFans == 0" v-if="userInfo.registerFans == 0"
@click="goBuy">{{'立即购买'}}</div> --> @click="goBuy">{{'立即购买'}}</div> -->
<!-- {{ '服务承诺' }} --> <!-- {{ '服务承诺' }} -->
<div class="dis_flex fw"> <div class="dis_flex fw">
<div>{{ '服务承诺' }}:</div> <div>{{ "服务承诺" }}:</div>
<div class="fw_i" <div
v-for="item in goodDetail.ensureLabelList" class="fw_i"
:key="item.pkId">{{ item.label }}</div> v-for="item in goodDetail.ensureLabelList"
:key="item.pkId"
>
{{ item.label }}
</div>
</div> </div>
</div> </div>
<!-- 推荐 --> <!-- 推荐 -->
<!-- 商品列表 --> <!-- 商品列表 -->
<div class="goodList"> <div class="goodList">
<div class="tited">{{ '精品推荐' }}</div> <div class="tited">{{ "精品推荐" }}</div>
<div class="good_i" <div
v-for="item in goodList" class="good_i"
:key="item.pkId" v-for="item in goodList"
@click="goDetails(item)"> :key="item.pkId"
<img class="goodImg" @click="goDetails(item)"
:src="item.cover1" >
alt=""> <img class="goodImg" :src="item.cover1" alt="" />
<div class="goodBtm"> <div class="goodBtm">
<div class="disFlex"> <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 class="tit2"></div>
</div> </div>
<div class="disFlex"> <div class="disFlex">
<div class="tit3">{{ item.waresName }}</div> <div class="tit3">{{ item.waresName }}</div>
</div> </div>
<div class="disFlex"> <div class="disFlex">
<div class="tit4">{{ "销量" }}:{{ item.sales | seles }}</div>
<div class="tit4"> <div class="tit4">
{{'销量'}}:{{ item.sales |seles}} {{ "业绩" }}:{{
</div> item.waresAchieve | toThousandthAndKeepDecimal
<div class="tit4"> }}
{{ '业绩' }}:{{ item.waresAchieve|toThousandthAndKeepDecimal }}
</div> </div>
</div> </div>
</div> </div>
@ -169,33 +186,34 @@
</div> </div>
<div class="menuList"> <div class="menuList">
<div :class="['menu_i', isMenu == 0 ? 'actMenu' : '']" <div
@click="isMenu =0"> :class="['menu_i', isMenu == 0 ? 'actMenu' : '']"
{{'商品介绍'}} @click="isMenu = 0"
>
{{ "商品介绍" }}
</div> </div>
<div :class="['menu_i', isMenu == 1 ? 'actMenu' : '']" <div
@click="isMenu =1"> :class="['menu_i', isMenu == 1 ? 'actMenu' : '']"
{{'售后保障'}} @click="isMenu = 1"
>
{{ "售后保障" }}
</div> </div>
</div> </div>
<div class="xian"></div> <div class="xian"></div>
<div class="allDetail"> <div class="allDetail">
<div v-show="isMenu==0" <div v-show="isMenu == 0" v-html="goodDetail.description"></div>
v-html="goodDetail.description"></div> <div v-show="isMenu == 1" v-html="goodDetail.afterGuarantee"></div>
<div v-show="isMenu==1"
v-html="goodDetail.afterGuarantee"></div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import personInfo from '@/components/personInfo.vue' import personInfo from "@/components/personInfo.vue";
import Swiper from '@/components/Swiper.vue' import Swiper from "@/components/Swiper.vue";
import Sidebar from '@/components/Sidebar.vue' import Sidebar from "@/components/Sidebar.vue";
import * as api from '@/api/goods.js' import * as api from "@/api/goods.js";
import { memLevel } from '@/api/register.js' import { memLevel } from "@/api/register.js";
import { mapGetters } from 'vuex' import { mapGetters } from "vuex";
export default { export default {
components: { components: {
@ -206,15 +224,15 @@ export default {
data() { data() {
return { return {
isMenu: 0, isMenu: 0,
specialArea: '', specialArea: "",
waresCode: '', waresCode: "",
goodList: [ goodList: [
{ {
waresCode: '1', waresCode: "1",
cover1: cover1:
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
waresPrice: '1980.00', waresPrice: "1980.00",
waresName: '海之圣超饱和富氢水杯（粉色），你值得拥有', waresName: "海之圣超饱和富氢水杯（粉色），你值得拥有",
}, },
], ],
goodDetail: { goodDetail: {
@ -223,40 +241,38 @@ export default {
}, },
isClick: 0, isClick: 0,
num: 1, num: 1,
mainImgUrl: '', mainImgUrl: "",
imgUrlList: [], imgUrlList: [],
labelName: '', labelName: "",
countDown: '', countDown: "",
pkId: '', pkId: "",
source: '', source: "",
hasChecked: '', hasChecked: "",
} };
}, },
filters:{ filters: {
seles(value){ seles(value) {
if (value > 999) {
if(value>999){ return 999 + "+";
return 999 + '+' } else {
}else{ return value;
return value }
}
}
}, },
},
computed: { computed: {
...mapGetters(['userInfo']), ...mapGetters(["userInfo"]),
}, },
watch: { watch: {
$route: { $route: {
immediate: true, immediate: true,
handler(n) { handler(n) {
this.specialArea = this.$route.query.specialArea this.specialArea = this.$route.query.specialArea;
this.pkId = Number(this.$route.query.pkId) this.pkId = Number(this.$route.query.pkId);
this.source = this.$route.query.source this.source = this.$route.query.source;
this.labelName = this.$route.query.label this.labelName = this.$route.query.label;
this.getDetails() this.getDetails();
this.$store.dispatch('SpecialQuantity', this.specialArea) this.$store.dispatch("SpecialQuantity", this.specialArea);
this.getRecGoods() this.getRecGoods();
}, },
}, },
}, },
@ -270,39 +286,42 @@ export default {
}, },
methods: { methods: {
showShare() { showShare() {
this.$refs.sideBar.getShare(this.specialArea) this.$refs.sideBar.getShare(this.specialArea);
}, },
goBuy() { goBuy() {
let data = { let data = {
quantity: this.num, quantity: this.num,
pkId: this.pkId, pkId: this.pkId,
source: 0, // 海粉商品渠道ID source: 0, // 海粉商品渠道ID
waresSkuList: [], waresSkuList: [],
} };
this.goodDetail.waresSkuList.forEach((item) => { this.goodDetail.waresSkuList.forEach((item) => {
if (item.pkId == this.hasChecked) { 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({ this.$router.push({
path: 'shareConfirm', path: "shareConfirm",
query: { query: {
specialArea: 21, specialArea: 21,
allData: JSON.stringify([data]), allData: JSON.stringify([data]),
hasChecked: this.hasChecked, hasChecked: this.hasChecked,
}, },
}) });
}, },
goDetails(item) { goDetails(item) {
this.$router.replace({ this.$router.replace({
path: '/shareDetails', path: "/shareDetails",
query: { query: {
pkId: item.pkId, pkId: item.pkId,
specialArea: this.specialArea, specialArea: this.specialArea,
label: this.labelName, label: this.labelName,
source: 0, source: 0,
}, },
}) });
}, },
getRecGoods() { getRecGoods() {
api api
@ -311,13 +330,13 @@ export default {
}) })
.then((res) => { .then((res) => {
if (res.code == 200) { if (res.code == 200) {
res.rows.splice(2) res.rows.splice(2);
this.goodList = res.rows this.goodList = res.rows;
} }
}) });
}, },
showCar() { showCar() {
this.$refs.sideBar.getCarList(this.specialArea) this.$refs.sideBar.getCarList(this.specialArea);
}, },
toAddCar() { toAddCar() {
let obj = { let obj = {
@ -326,61 +345,69 @@ export default {
pkId: this.pkId, // 海粉商品ID pkId: this.pkId, // 海粉商品ID
source: 0, // 海粉商品渠道ID source: 0, // 海粉商品渠道ID
productGroup: [], productGroup: [],
} };
this.goodDetail.waresSkuList.forEach((item) => { this.goodDetail.waresSkuList.forEach((item) => {
if (item.pkId == this.hasChecked) { if (item.pkId == this.hasChecked) {
obj.productGroup.push(item.productGroup[0]) obj.productGroup.push(item.productGroup[0]);
} }
}) });
api.addShopping(obj).then((res) => { api.addShopping(obj).then((res) => {
this.$store.dispatch('SpecialQuantity', this.specialArea) this.$store.dispatch("SpecialQuantity", this.specialArea);
this.$message({ this.$message({
message: '购物车添加成功', message: "购物车添加成功",
type: 'success', type: "success",
}) });
}) });
}, },
getNum(index, cndex, quantity) { getNum(index, cndex, quantity) {
// 数量为0，关闭高亮 // 数量为0，关闭高亮
if (quantity == 0) { if (quantity == 0) {
this.$set( this.$set(
this.goodDetail.productParams[index].waresItemsParamsList[cndex], this.goodDetail.productParams[index].waresItemsParamsList[cndex],
'checked', "checked",
false false
) );
} else { } else {
this.$set( this.$set(
this.goodDetail.productParams[index].waresItemsParamsList[cndex], this.goodDetail.productParams[index].waresItemsParamsList[cndex],
'checked', "checked",
true true
) );
} }
let ggNum = 0 let ggNum = 0;
this.goodDetail.productParams[index].waresItemsParamsList.forEach( this.goodDetail.productParams[index].waresItemsParamsList.forEach(
(item) => { (item) => {
ggNum += item.quantity ggNum += item.quantity;
} }
) );
if (this.goodDetail.productParams[index].quantity - quantity >= 0) { if (this.goodDetail.productParams[index].quantity - quantity >= 0) {
this.goodDetail.productParams[index].waresItemsParamsList.forEach( this.goodDetail.productParams[index].waresItemsParamsList.forEach(
(stem, sndex) => { (stem, sndex) => {
if (sndex != cndex) { if (sndex != cndex) {
this.$set( this.$set(
stem, stem,
'maxNum', "maxNum",
this.goodDetail.productParams[index].quantity - this.goodDetail.productParams[index].quantity -
(ggNum - stem.quantity) (ggNum - stem.quantity)
) );
} }
} }
) );
} }
}, },
tapSku(index) { 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.goodDetail.waresPrice = this.goodDetail.waresSkuList[index].price
this.$set(this.goodDetail,'waresPrice',this.goodDetail.waresSkuList[index].price) this.$set(
this.$set(this.goodDetail,'waresAchieve',this.goodDetail.waresSkuList[index].achieve) 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 // this.goodDetail.waresAchieve = this.goodDetail.waresSkuList[index].waresAchieve
}, },
getDetails() { getDetails() {
@ -390,13 +417,13 @@ export default {
source: this.source, source: this.source,
}) })
.then((res) => { .then((res) => {
this.goodDetail = res.data this.goodDetail = res.data;
let sl = this.goodDetail.sales + '' let sl = this.goodDetail.sales + "";
if (sl >= 10000) { if (sl >= 10000) {
sl = sl.substring(0, sl.length - 4) + '万'+'+' sl = sl.substring(0, sl.length - 4) + "+";
} }
this.goodDetail.sales = sl this.goodDetail.sales = sl;
this.mainImgUrl = res.data.videoUrl || res.data.cover1 this.mainImgUrl = res.data.videoUrl || res.data.cover1;
this.imgUrlList = [ this.imgUrlList = [
res.data.cover, res.data.cover,
res.data.cover1, res.data.cover1,
@ -405,43 +432,51 @@ export default {
res.data.cover4, res.data.cover4,
res.data.cover5, res.data.cover5,
res.data.cover6, res.data.cover6,
] ];
this.imgUrlList = this.imgUrlList.filter( this.imgUrlList = this.imgUrlList.filter(
(item) => item && item.trim() (item) => item && item.trim()
) );
this.hasChecked = this.goodDetail.waresSkuList[0].pkId this.hasChecked = this.goodDetail.waresSkuList[0].pkId;
this.$set(this.goodDetail,'waresPrice',this.goodDetail.waresSkuList[0].price) this.$set(
this.$set(this.goodDetail,'waresAchieve',this.goodDetail.waresSkuList[0].achieve) this.goodDetail,
}) "waresPrice",
this.goodDetail.waresSkuList[0].price
);
this.$set(
this.goodDetail,
"waresAchieve",
this.goodDetail.waresSkuList[0].achieve
);
});
}, },
downTime() { downTime() {
let that = this let that = this;
this.clockTime = setInterval(() => { this.clockTime = setInterval(() => {
if ( if (
that.goodDetail.deliveryTimeMs && that.goodDetail.deliveryTimeMs &&
that.goodDetail.deliveryTimeMs > 0 that.goodDetail.deliveryTimeMs > 0
) { ) {
that.countDown = this.getTime(this.goodDetail.deliveryTimeMs--) that.countDown = this.getTime(this.goodDetail.deliveryTimeMs--);
} else { } else {
that.countDown = '0天00时00分00秒' that.countDown = "0天00时00分00秒";
} }
}, 1000) }, 1000);
}, },
getTime(time) { getTime(time) {
// 转换为式分秒 // 转换为式分秒
let d = parseInt(time / 60 / 60 / 24) //计算剩余天数\ let d = parseInt(time / 60 / 60 / 24); //计算剩余天数\
d = d < 10 ? '0' + d : d d = d < 10 ? "0" + d : d;
let h = parseInt((time / 60 / 60) % 24) let h = parseInt((time / 60 / 60) % 24);
h = h < 10 ? '0' + h : h h = h < 10 ? "0" + h : h;
let m = parseInt((time / 60) % 60) let m = parseInt((time / 60) % 60);
m = m < 10 ? '0' + m : m m = m < 10 ? "0" + m : m;
let s = parseInt(time % 60) let s = parseInt(time % 60);
s = s < 10 ? '0' + s : s s = s < 10 ? "0" + s : s;
// 作为返回值返回 // 作为返回值返回
return d + '天' + h + '小时' + m + '分' + s + '秒' return d + "天" + h + "小时" + m + "分" + s + "秒";
}, },
}, },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -566,7 +601,7 @@ export default {
font-size: 16px; font-size: 16px;
} }
.coloNum { .coloNum {
color: #00417C; color: #00417c;
font-weight: 600; font-weight: 600;
margin: 0 10px; margin: 0 10px;
} }
@ -695,7 +730,7 @@ export default {
.tit1 { .tit1 {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #00417C; color: #00417c;
margin-right: 10px; margin-right: 10px;
margin-bottom: 5px; margin-bottom: 5px;
} }
@ -721,7 +756,7 @@ export default {
.tit5 { .tit5 {
font-size: 24px; font-size: 24px;
font-weight: 600; font-weight: 600;
color: #00417C; color: #00417c;
} }
.tit6 { .tit6 {
font-size: 14px; font-size: 14px;
@ -737,7 +772,7 @@ export default {
.tit8 { .tit8 {
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 400;
color: #00417C; color: #00417c;
} }
.tit9 { .tit9 {
font-size: 18px; font-size: 18px;
@ -769,7 +804,7 @@ export default {
cursor: pointer; cursor: pointer;
} }
.actMenu { .actMenu {
border-bottom: 5px solid #00417C; border-bottom: 5px solid #00417c;
} }
} }
.xian { .xian {
@ -829,4 +864,4 @@ export default {
::v-deep .el-input-number--mini { ::v-deep .el-input-number--mini {
width: 105px !important; width: 105px !important;
} }
</style> </style>

83
src/views/vipCenter/index.vue
View File

@ -8,10 +8,10 @@
<div class="main"> <div class="main">
<div> <div>
<!-- 公告弹窗 --> <!-- 公告弹窗 -->
<notice-popup <!-- <notice-popup
:userInfo="userInfo" :userInfo="userInfo"
:publishLocationIndex="index" :publishLocationIndex="index"
></notice-popup> ></notice-popup> -->
</div> </div>
<sidebarUserInfo></sidebarUserInfo> <sidebarUserInfo></sidebarUserInfo>
<div class="main_r"> <div class="main_r">
@ -30,7 +30,7 @@
<div class="xian"></div> <div class="xian"></div>
<!-- 钱包 --> <!-- 钱包 -->
<div v-show="isMenu == 0 && cango"> <div v-show="isMenu == 0 && walletVisible">
<!-- <walletComments></walletComments> --> <!-- <walletComments></walletComments> -->
<div class="bartopbox"> <div class="bartopbox">
<div class="flexbox"> <div class="flexbox">
@ -113,19 +113,10 @@
</div> </div>
</div> </div>
</div> </div>
<el-dialog <SecondaryPassword
class="pswdialog"
:title="'二级密码'"
:visible.sync="pswShow" :visible.sync="pswShow"
width="30%" @validPwd="validPwd"
center ></SecondaryPassword>
: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>
</div> </div>
</template> </template>
@ -148,14 +139,15 @@ import monthlyHistory from "@/components/selfService/monthlyHistory.vue";
import selfPickOrders from "@/components/selfService/selfPickOrders.vue"; import selfPickOrders from "@/components/selfService/selfPickOrders.vue";
import selfCancleOrder from "@/components/selfService/selfCancleOrder.vue"; import selfCancleOrder from "@/components/selfService/selfCancleOrder.vue";
import existRealName from "@/components/selfService/existRealName.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 { mapGetters } from "vuex";
import { checkPwd, checkIfShow } from "@/api/wallet.js"; import { checkIfShow } from "@/api/wallet.js";
import * as api from "@/api/goods.js"; import * as api from "@/api/goods.js";
export default { export default {
components: { components: {
noticePopup, // noticePopup,
carryGoods, carryGoods,
delar, delar,
activity, activity,
@ -174,6 +166,7 @@ export default {
monthlyHistory, monthlyHistory,
selfCancleOrder, selfCancleOrder,
existRealName, existRealName,
SecondaryPassword,
}, },
computed: { computed: {
...mapGetters(["userInfo"]), ...mapGetters(["userInfo"]),
@ -277,13 +270,13 @@ export default {
pkAccountId: "", pkAccountId: "",
pswShow: false, pswShow: false,
password: "", password: "",
cango: false, walletVisible: false,
theselfHeader: [], theselfHeader: [],
}; };
}, },
watch: { watch: {
$route(n, o) { $route(n, o) {
this.cango = false; this.walletVisible = false;
this.isMenu = n.query.id; this.isMenu = n.query.id;
if (this.isMenu == 0) { if (this.isMenu == 0) {
this.password = ""; 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) { goMenu(id) {
if (id == 0) { if (id == 0) {
this.password = ""; this.password = "";
this.pswShow = true; this.pswShow = true;
} }
// if (id == 5) {
// }
this.$router.push({ this.$router.push({
path: "/vipCenter", path: "/vipCenter",
query: { id: id }, query: { id: id },
@ -512,6 +490,11 @@ export default {
handleLink2(id) { handleLink2(id) {
this.atabActive = id; this.atabActive = id;
}, },
validPwd(valid) {
if (valid) {
this.walletVisible = true;
}
},
}, },
}; };
</script> </script>
@ -520,31 +503,7 @@ export default {
::v-deep .el-carousel__container { ::v-deep .el-carousel__container {
height: 500px; 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 { .bartopbox {
margin-top: 20px; margin-top: 20px;
.flexbox { .flexbox {
@ -568,7 +527,7 @@ export default {
} }
.act { .act {
color: #ffffff; color: #ffffff;
background: rgba(192, 31, 31, 1); background: var(--primary-color);
} }
.main { .main {
min-height: 100vh; min-height: 100vh;
@ -599,7 +558,7 @@ export default {
cursor: pointer; cursor: pointer;
} }
.actMenu { .actMenu {
border-bottom: 5px solid #00417C; border-bottom: 5px solid #00417c;
} }
} }
.xian { .xian {