6.30 版本提交
105
App.vue
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
<script>
|
||||||
|
import { provide } from 'vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
onLaunch: function() {
|
||||||
|
console.log('App Launch')
|
||||||
|
|
||||||
|
let windowInfo = uni.getWindowInfo()
|
||||||
|
provide('statusHeight',windowInfo.statusBarHeight)
|
||||||
|
provide('windowWidth',windowInfo.windowWidth)
|
||||||
|
provide('safeAreaTop',windowInfo.safeArea.top)
|
||||||
|
var safeAreaBottom = windowInfo.safeAreaInsets.bottom
|
||||||
|
let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
||||||
|
provide('navHeight',menuButtonInfo.bottom + menuButtonInfo.top - windowInfo.statusBarHeight)
|
||||||
|
provide('menuTop',menuButtonInfo.top)
|
||||||
|
provide('menuHeight',menuButtonInfo.height)
|
||||||
|
provide('isiPhoneX',safeAreaBottom==34?true:false)
|
||||||
|
},
|
||||||
|
onShow: function() {
|
||||||
|
console.log('App Show')
|
||||||
|
},
|
||||||
|
onHide: function() {
|
||||||
|
console.log('App Hide')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/*每个页面公共css */
|
||||||
|
.flex
|
||||||
|
{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.flexCenter
|
||||||
|
{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.flexColumn
|
||||||
|
{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.flexColumnCenter
|
||||||
|
{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.flex1
|
||||||
|
{
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.flexWrap
|
||||||
|
{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.flexStretch
|
||||||
|
{
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
.between
|
||||||
|
{
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.flexEnd
|
||||||
|
{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
.relative
|
||||||
|
{
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.absolute
|
||||||
|
{
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.fixed
|
||||||
|
{
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
view,input,textarea,scroll-view,swiper
|
||||||
|
{
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
button
|
||||||
|
{
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
button::after
|
||||||
|
{
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar
|
||||||
|
{
|
||||||
|
color: transparent;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
204
components/codeImg/codeImg.vue
Normal file
@@ -0,0 +1,204 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<image v-if="img" class="img" :src="img" mode="aspectFit"></image>
|
||||||
|
<canvas v-else type='2d' id="scanvas" canvas-id="scanvas" :style="'width:'+props.contentWidth+'px;'+'height:'+props.contentHeight+'px;'" @click="reDrawPic()"></canvas>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { getCurrentInstance, onMounted,ref,watch } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
codeStr:{
|
||||||
|
type:String,
|
||||||
|
default:'0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
|
||||||
|
},
|
||||||
|
fontSizeMin:{
|
||||||
|
type:Number,
|
||||||
|
default:25
|
||||||
|
},
|
||||||
|
fontSizeMin:{
|
||||||
|
type:Number,
|
||||||
|
default:25
|
||||||
|
},
|
||||||
|
fontSizeMax:{
|
||||||
|
type:Number,
|
||||||
|
default:35
|
||||||
|
},
|
||||||
|
backgroundColorMin:{
|
||||||
|
type:Number,
|
||||||
|
default:0
|
||||||
|
},
|
||||||
|
backgroundColorMax:{
|
||||||
|
type:Number,
|
||||||
|
default:255
|
||||||
|
},
|
||||||
|
colorMin:{
|
||||||
|
type:Number,
|
||||||
|
default:0
|
||||||
|
},
|
||||||
|
colorMax:{
|
||||||
|
type:Number,
|
||||||
|
default:160
|
||||||
|
},
|
||||||
|
lineColorMin:{
|
||||||
|
type:Number,
|
||||||
|
default:40
|
||||||
|
},
|
||||||
|
lineColorMax:{
|
||||||
|
type:Number,
|
||||||
|
default:180
|
||||||
|
},
|
||||||
|
dotColorMin:{
|
||||||
|
type:Number,
|
||||||
|
default:0
|
||||||
|
},
|
||||||
|
dotColorMax:{
|
||||||
|
type:Number,
|
||||||
|
default:255
|
||||||
|
},
|
||||||
|
contentWidth:{
|
||||||
|
type:Number,
|
||||||
|
default:112
|
||||||
|
},
|
||||||
|
contentHeight:{
|
||||||
|
type:Number,
|
||||||
|
default:30
|
||||||
|
},
|
||||||
|
})
|
||||||
|
const context = ref(null)
|
||||||
|
const img = ref('')
|
||||||
|
|
||||||
|
const emit = defineEmits(['updateValue'])
|
||||||
|
|
||||||
|
const randomNum = (min,max) => {
|
||||||
|
return Math.floor(Math.random() * (max - min) + min)
|
||||||
|
}
|
||||||
|
|
||||||
|
const randomColor = (min,max,a) => {
|
||||||
|
let r = randomNum(min,max)
|
||||||
|
let g = randomNum(min,max)
|
||||||
|
let b = randomNum(min,max)
|
||||||
|
return 'rgba('+ r +','+ g +','+ b +','+a+')'
|
||||||
|
}
|
||||||
|
const drawLine = (ctx) =>{
|
||||||
|
for (var i = 0; i < 5; i++) {
|
||||||
|
ctx.strokeStyle = randomColor(props.lineColorMin,props.lineColorMax,1)
|
||||||
|
ctx.beginPath()
|
||||||
|
ctx.moveTo(randomNum(0,props.contentWidth),randomNum(0,props.contentHeight))
|
||||||
|
ctx.lineTo(randomNum(0,props.contentWidth),randomNum(0,props.contentHeight))
|
||||||
|
ctx.stroke()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const makeCode = () =>{
|
||||||
|
let codeStr = ''
|
||||||
|
let codeSet = props.codeStr
|
||||||
|
for (let i = 0; i < 4; i++) {
|
||||||
|
codeStr += codeSet[randomNum(0,codeSet.length)]
|
||||||
|
}
|
||||||
|
return codeStr
|
||||||
|
}
|
||||||
|
|
||||||
|
const drawText = (ctx, txt, i) =>{
|
||||||
|
ctx.fillStyle = '#333'
|
||||||
|
ctx.font = randomNum(props.fontSizeMin,props.fontSizeMax)+'px SimHei'
|
||||||
|
let x = (i+1) * (props.contentWidth / 5)
|
||||||
|
let y = randomNum(props.fontSizeMax,props.contentHeight-5)
|
||||||
|
var deg = randomNum(-45,45)
|
||||||
|
ctx.translate(x,y)
|
||||||
|
ctx.rotate((deg * Math.PI) / 180)
|
||||||
|
ctx.fillText(txt,0,0)
|
||||||
|
ctx.rotate((-deg * Math.PI) / 180)
|
||||||
|
ctx.translate(-x,-y)
|
||||||
|
}
|
||||||
|
const drawDot = (ctx) =>{
|
||||||
|
for (var i = 0; i < 80; i++) {
|
||||||
|
ctx.fillStyle = randomColor(0,255)
|
||||||
|
ctx.beginPath()
|
||||||
|
ctx.arc(randomNum(0,props.contentWidth),randomNum(0,props.contentHeight),1,0,2 * Math.PI)
|
||||||
|
ctx.fill()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const drawPic = () =>{
|
||||||
|
const query = uni.createSelectorQuery().in(getCurrentInstance().proxy)
|
||||||
|
query.select('#scanvas').fields({ node: true, size: true }).exec((res) => {
|
||||||
|
console.log(res)
|
||||||
|
const canvas = res[0].node
|
||||||
|
const ctx = canvas.getContext('2d')
|
||||||
|
console.log(ctx)
|
||||||
|
const dpr = wx.getSystemInfoSync().pixelRatio
|
||||||
|
canvas.width = res[0].width * dpr
|
||||||
|
canvas.height = res[0].height * dpr
|
||||||
|
ctx.scale(dpr, dpr)
|
||||||
|
ctx.clearRect(0,0,props.contentWidth,props.contentHeight)
|
||||||
|
ctx.textBaseline = 'bottom'
|
||||||
|
ctx.fillStyle = randomColor(props.backgroundColorMin,props.backgroundColorMax,.2)
|
||||||
|
ctx.fillRect(0,0,props.contentWidth,props.contentHeight)
|
||||||
|
|
||||||
|
let str = makeCode()
|
||||||
|
for (let i = 0; i < str.length; i++) {
|
||||||
|
drawText(ctx,str[i],i)
|
||||||
|
}
|
||||||
|
emit('updateValue',str)
|
||||||
|
drawLine(ctx)
|
||||||
|
// drawDot(ctx)
|
||||||
|
// ctx.draw()
|
||||||
|
context.value = ctx
|
||||||
|
uni.canvasToTempFilePath({
|
||||||
|
canvasId:'scanvas',
|
||||||
|
success(res) {
|
||||||
|
console.log(res)
|
||||||
|
img.value = res.tempFilePath
|
||||||
|
},
|
||||||
|
fail(error) {
|
||||||
|
console.log(error)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
// let ctx = uni.createCanvasContext('scanvas',getCurrentInstance())
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const reDrawPic = () =>{
|
||||||
|
img.value = ''
|
||||||
|
let ctx = context.value
|
||||||
|
ctx.clearRect(0,0,props.contentWidth,props.contentHeight)
|
||||||
|
ctx.textBaseline = 'bottom'
|
||||||
|
ctx.fillStyle = randomColor(props.backgroundColorMin,props.backgroundColorMax,.2)
|
||||||
|
ctx.fillRect(0,0,props.contentWidth,props.contentHeight)
|
||||||
|
|
||||||
|
let str = makeCode()
|
||||||
|
emit('updateValue',str)
|
||||||
|
for (let i = 0; i < str.length; i++) {
|
||||||
|
drawText(ctx,str[i],i)
|
||||||
|
}
|
||||||
|
drawLine(ctx)
|
||||||
|
// drawDot(ctx)
|
||||||
|
// ctx.draw()
|
||||||
|
uni.canvasToTempFilePath({
|
||||||
|
canvasId:'scanvas',
|
||||||
|
success(res) {
|
||||||
|
console.log(res)
|
||||||
|
img.value = res.tempFilePath
|
||||||
|
},
|
||||||
|
fail(error) {
|
||||||
|
console.log(error)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
onMounted(()=>{
|
||||||
|
drawPic()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.img
|
||||||
|
{
|
||||||
|
width: 112px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
189
components/navBar/navBar.vue
Normal file
@@ -0,0 +1,189 @@
|
|||||||
|
<template>
|
||||||
|
<view class="nav flex fixed" :style="navBarStyle">
|
||||||
|
<image class="bg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
|
||||||
|
<view class="backC relative flex" :style="backTitleStyle" @click="clickBack">
|
||||||
|
<image v-if="!hideBack&&!backBlack" class="icon" src="/static/icon/back.png" mode="widthFix"></image>
|
||||||
|
<image v-if="!hideBack&&backBlack" class="icon" src="/static/icon/backBlack.png" mode="widthFix"></image>
|
||||||
|
<text class="title">{{leftText}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="titleC relative" :style="navTitleStyle">
|
||||||
|
{{navTitle}}
|
||||||
|
<view v-if="num>0" class="peopleNum absolute">
|
||||||
|
<view class="num">{{num}}人</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { inject } from 'vue'
|
||||||
|
const app = getApp()
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "navBar",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
navH: inject('navHeight'),
|
||||||
|
menuH: inject('menuHeight'),
|
||||||
|
// #endif
|
||||||
|
// #ifdef MP-TOUTIAO
|
||||||
|
navH: app.globalData.navHeight,
|
||||||
|
menuH: app.globalData.menuHeight,
|
||||||
|
// #endif
|
||||||
|
navBarStyle:'',
|
||||||
|
backTitleStyle:'',
|
||||||
|
navTitleStyle:'',
|
||||||
|
titleColor:this.navTitleColor,
|
||||||
|
bgColor:this.navBgColor,
|
||||||
|
num:this.peopleNum
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
leftText: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
backBlack:{
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
navTitle: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
navBgColor: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
navTitleColor: {
|
||||||
|
type: String,
|
||||||
|
default: 'white'
|
||||||
|
},
|
||||||
|
hideBack: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
hideNavBg: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
backLevel: {
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
peopleNum: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
let navHeight = this.navH;
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
let menuHeight = inject('menuHeight');
|
||||||
|
let menuTop = inject('menuTop');
|
||||||
|
// #endif
|
||||||
|
if (this.hideNavBg) {
|
||||||
|
this.bgColor = 'transparent'
|
||||||
|
}
|
||||||
|
let navBarStyle = `background-color:${this.bgColor};height:${navHeight}px;`
|
||||||
|
let backTitleStyle = `height:${menuHeight}px;margin-top:${menuTop}px;color:${this.titleColor}`
|
||||||
|
let navTitleStyle = `height:${menuHeight}px;line-height:${menuHeight}px;top:${menuTop}px;color:${this.titleColor}`
|
||||||
|
this.navBarStyle = navBarStyle
|
||||||
|
this.backTitleStyle = backTitleStyle
|
||||||
|
this.navTitleStyle = navTitleStyle
|
||||||
|
},
|
||||||
|
watch:{
|
||||||
|
navTitleColor:{
|
||||||
|
handler(newVal, oldVal)
|
||||||
|
{
|
||||||
|
this.titleColor = newVal
|
||||||
|
}
|
||||||
|
},
|
||||||
|
navBgColor:{
|
||||||
|
handler(newVal, oldVal)
|
||||||
|
{
|
||||||
|
this.bgColor = newVal
|
||||||
|
}
|
||||||
|
},
|
||||||
|
peopleNum:{
|
||||||
|
handler(newVal, oldVal)
|
||||||
|
{
|
||||||
|
this.num = newVal
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
clickBack()
|
||||||
|
{
|
||||||
|
uni.navigateBack({
|
||||||
|
fail() {
|
||||||
|
uni.switchTab({
|
||||||
|
url:'/pages/index/index'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.nav
|
||||||
|
{
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 99;
|
||||||
|
overflow: hidden;
|
||||||
|
.bg
|
||||||
|
{
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.backC
|
||||||
|
{
|
||||||
|
padding: 0 25rpx;
|
||||||
|
.icon
|
||||||
|
{
|
||||||
|
margin-right: 12rpx;
|
||||||
|
width: 32rpx;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title
|
||||||
|
{
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.titleC
|
||||||
|
{
|
||||||
|
position: absolute;
|
||||||
|
left: calc((100% - 400rpx)/2);
|
||||||
|
width: 400rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
.peopleNum
|
||||||
|
{
|
||||||
|
background-color: #3B9174;
|
||||||
|
top: -15rpx;
|
||||||
|
left: 270rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
border-radius: 15px 15px 15px 0px;
|
||||||
|
line-height: 30rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: white;
|
||||||
|
.num
|
||||||
|
{
|
||||||
|
margin: 0 16rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
138
components/tabbar/tabbar.vue
Normal file
@@ -0,0 +1,138 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="tab-bar">
|
||||||
|
<view v-for="(item,index) in list" :key="index" :class="'tab-bar-item '+(item.bulge?'bulge':'')" @click="item.jump=='nav'?navigateTo(item.pagePath,index):switchTab(item.pagePath,index)">
|
||||||
|
<image class="image" :src="selected == index ? item.selectedIconPath : item.iconPath" mode="aspectFit"></image>
|
||||||
|
<view v-if="item.text" class="tab-bar-view" :style="'color: '+(selected==index?selectedColor:color)+';'">{{item.text}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"tabbar",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
color: "#504E4E",
|
||||||
|
selected:0,
|
||||||
|
selectedColor: "#504E4E",
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
pagePath: "/pages/index/index",
|
||||||
|
text: "首页",
|
||||||
|
iconPath: "/static/icon/tabbar/home.png",
|
||||||
|
selectedIconPath: "/static/icon/tabbar/home.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
pagePath: "/pages/classify/classify",
|
||||||
|
text: "分类",
|
||||||
|
iconPath: "/static/icon/tabbar/classify.png",
|
||||||
|
selectedIconPath: "/static/icon/tabbar/classify.png"
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// pagePath: "/pages/shoppingCart/shoppingCart",
|
||||||
|
// text: "购物车",
|
||||||
|
// iconPath: "/static/icon/tabbar/shoppingCart.png",
|
||||||
|
// selectedIconPath: "/static/icon/tabbar/shoppingCart.png"
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// pagePath: "/pages/sharedRespository/sharedRespository",
|
||||||
|
// text: "共享仓",
|
||||||
|
// iconPath: "/static/icon/tabbar/sharedRespository.png",
|
||||||
|
// selectedIconPath: "/static/icon/tabbar/sharedRespository.png"
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
pagePath: "/pages/mine/mine",
|
||||||
|
text: "我的",
|
||||||
|
iconPath: "/static/icon/tabbar/mine.png",
|
||||||
|
selectedIconPath: "/static/icon/tabbar/mine.png"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props:{
|
||||||
|
current:Number
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
switchTab(url,index) {
|
||||||
|
if(index==2||index==4)
|
||||||
|
{
|
||||||
|
//如果是购物车和我的,需要登录
|
||||||
|
let token = uni.getStorageSync('token')
|
||||||
|
if (!token) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pages/login/login'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
uni.switchTab({url})
|
||||||
|
},
|
||||||
|
navigateTo(url,index) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: url
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.tab-bar {
|
||||||
|
background-color: white;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 60px;
|
||||||
|
display: flex;
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
box-sizing: content-box;
|
||||||
|
box-shadow: 0 0 5rpx 0 rgba(145,145,145,0.53);
|
||||||
|
z-index: 99;
|
||||||
|
.tab-bar-item
|
||||||
|
{
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
.image {
|
||||||
|
margin: 16rpx 0 8rpx 0;
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.bulge
|
||||||
|
{
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.bulge .image
|
||||||
|
{
|
||||||
|
position: absolute;
|
||||||
|
top: -47rpx;
|
||||||
|
width: 94rpx;
|
||||||
|
height: 94rpx;
|
||||||
|
}
|
||||||
|
.bulge .tab-bar-view
|
||||||
|
{
|
||||||
|
margin-top: 60rpx;
|
||||||
|
}
|
||||||
|
.tab-bar-item .tab-bar-view {
|
||||||
|
font-size: 22rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.tab-bar .bg
|
||||||
|
{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
75
custom-tab-bar/index.js
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
// components/custom-tab-bar/index.js
|
||||||
|
const app = getApp();
|
||||||
|
|
||||||
|
Component({
|
||||||
|
/**
|
||||||
|
* 组件的属性列表
|
||||||
|
*/
|
||||||
|
properties: {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 组件的初始数据
|
||||||
|
*/
|
||||||
|
data: {
|
||||||
|
color: "#858C9A",
|
||||||
|
selected:0,
|
||||||
|
selectedColor: "#F97316",
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
"pagePath": "/pages/index/index",
|
||||||
|
"text": "新闻动量",
|
||||||
|
"iconPath": "/static/icon/tabbar/home.png",
|
||||||
|
"selectedIconPath": "/static/icon/tabbar/home_s.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pagePath": "/pages/invest/invest",
|
||||||
|
"text": "投资日历",
|
||||||
|
"iconPath": "/static/icon/tabbar/invest.png",
|
||||||
|
"selectedIconPath": "/static/icon/tabbar/invest_s.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pagePath": "/pages/mine/mine",
|
||||||
|
"text": "个人中心",
|
||||||
|
"iconPath": "/static/icon/tabbar/mine.png",
|
||||||
|
"selectedIconPath": "/static/icon/tabbar/mine_s.png"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
attached() {
|
||||||
|
this.setData({
|
||||||
|
selected:app.globalData.tabIndex
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 组件的方法列表
|
||||||
|
*/
|
||||||
|
methods: {
|
||||||
|
switchTab(e) {
|
||||||
|
const data = e.currentTarget.dataset;
|
||||||
|
const url = data.path;
|
||||||
|
const index = data.index
|
||||||
|
// if(index==2||index==4)
|
||||||
|
// {
|
||||||
|
// //如果是购物车和我的,需要登录
|
||||||
|
// let token = wx.getStorageSync('token')
|
||||||
|
// if (!token) {
|
||||||
|
// wx.navigateTo({
|
||||||
|
// url:'/pages/login/login'
|
||||||
|
// })
|
||||||
|
// return
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
app.globalData.tabIndex = index
|
||||||
|
wx.switchTab({url})
|
||||||
|
},
|
||||||
|
navigateTo(e) {
|
||||||
|
const data = e.currentTarget.dataset;
|
||||||
|
const url = data.path;
|
||||||
|
wx.navigateTo({
|
||||||
|
url: url
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
3
custom-tab-bar/index.json
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"component": true
|
||||||
|
}
|
||||||
8
custom-tab-bar/index.wxml
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
<!--components/custom-tab-bar/index.wxml-->
|
||||||
|
<view class="tab-bar">
|
||||||
|
<view wx:for="{{list}}" wx:key="index" class="tab-bar-item {{item.bulge?'bulge':''}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="{{item.jump=='nav'?'navigateTo':'switchTab'}}">
|
||||||
|
<image class="image" src="{{selected == index ? item.selectedIconPath : item.iconPath}}" mode="aspectFit"></image>
|
||||||
|
<view wx:if="{{item.text}}" class="tab-bar-view"
|
||||||
|
style="color: {{selected==index?selectedColor:color}};">{{item.text}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
55
custom-tab-bar/index.wxss
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
/* components/custom-tab-bar/index.wxss */
|
||||||
|
.tab-bar {
|
||||||
|
background-color: white;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 55px;
|
||||||
|
display: flex;
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
box-sizing: content-box;
|
||||||
|
box-shadow: 0 -1px 5rpx 0 #eee;
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
.tab-bar-item
|
||||||
|
{
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.tab-bar-item .image {
|
||||||
|
margin: 16rpx 0 8rpx 0;
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
}
|
||||||
|
.bulge
|
||||||
|
{
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.bulge .image
|
||||||
|
{
|
||||||
|
position: absolute;
|
||||||
|
top: -47rpx;
|
||||||
|
width: 94rpx;
|
||||||
|
height: 94rpx;
|
||||||
|
}
|
||||||
|
.bulge .tab-bar-view
|
||||||
|
{
|
||||||
|
margin-top: 60rpx;
|
||||||
|
}
|
||||||
|
.tab-bar-item .tab-bar-view {
|
||||||
|
font-size: 22rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.tab-bar .bg
|
||||||
|
{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
20
index.html
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<script>
|
||||||
|
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
|
||||||
|
CSS.supports('top: constant(a)'))
|
||||||
|
document.write(
|
||||||
|
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
||||||
|
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
||||||
|
</script>
|
||||||
|
<title></title>
|
||||||
|
<!--preload-links-->
|
||||||
|
<!--app-context-->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"><!--app-html--></div>
|
||||||
|
<script type="module" src="/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
22
main.js
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
import App from './App'
|
||||||
|
|
||||||
|
// #ifndef VUE3
|
||||||
|
import Vue from 'vue'
|
||||||
|
import './uni.promisify.adaptor'
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
App.mpType = 'app'
|
||||||
|
const app = new Vue({
|
||||||
|
...App
|
||||||
|
})
|
||||||
|
app.$mount()
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifdef VUE3
|
||||||
|
import { createSSRApp } from 'vue'
|
||||||
|
export function createApp() {
|
||||||
|
const app = createSSRApp(App)
|
||||||
|
return {
|
||||||
|
app
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
72
manifest.json
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
{
|
||||||
|
"name" : "JiaZhiQianYan",
|
||||||
|
"appid" : "__UNI__1836EC9",
|
||||||
|
"description" : "",
|
||||||
|
"versionName" : "1.0.0",
|
||||||
|
"versionCode" : "100",
|
||||||
|
"transformPx" : false,
|
||||||
|
/* 5+App特有相关 */
|
||||||
|
"app-plus" : {
|
||||||
|
"usingComponents" : true,
|
||||||
|
"nvueStyleCompiler" : "uni-app",
|
||||||
|
"compilerVersion" : 3,
|
||||||
|
"splashscreen" : {
|
||||||
|
"alwaysShowBeforeRender" : true,
|
||||||
|
"waiting" : true,
|
||||||
|
"autoclose" : true,
|
||||||
|
"delay" : 0
|
||||||
|
},
|
||||||
|
/* 模块配置 */
|
||||||
|
"modules" : {},
|
||||||
|
/* 应用发布信息 */
|
||||||
|
"distribute" : {
|
||||||
|
/* android打包配置 */
|
||||||
|
"android" : {
|
||||||
|
"permissions" : [
|
||||||
|
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||||
|
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||||
|
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
/* ios打包配置 */
|
||||||
|
"ios" : {},
|
||||||
|
/* SDK配置 */
|
||||||
|
"sdkConfigs" : {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/* 快应用特有相关 */
|
||||||
|
"quickapp" : {},
|
||||||
|
/* 小程序特有相关 */
|
||||||
|
"mp-weixin" : {
|
||||||
|
"appid" : "",
|
||||||
|
"setting" : {
|
||||||
|
"urlCheck" : false
|
||||||
|
},
|
||||||
|
"usingComponents" : true
|
||||||
|
},
|
||||||
|
"mp-alipay" : {
|
||||||
|
"usingComponents" : true
|
||||||
|
},
|
||||||
|
"mp-baidu" : {
|
||||||
|
"usingComponents" : true
|
||||||
|
},
|
||||||
|
"mp-toutiao" : {
|
||||||
|
"usingComponents" : true
|
||||||
|
},
|
||||||
|
"uniStatistics" : {
|
||||||
|
"enable" : false
|
||||||
|
},
|
||||||
|
"vueVersion" : "3"
|
||||||
|
}
|
||||||
123
pages.json
Normal file
@@ -0,0 +1,123 @@
|
|||||||
|
{
|
||||||
|
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
|
||||||
|
{
|
||||||
|
"path": "pages/index/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "uni-app",
|
||||||
|
"enablePullDownRefresh": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/invest/invest",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/mine/mine",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/mine/basicInfo/basicInfo",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/mine/feedback/feedback",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/mine/commentReply/commentReply",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/mine/investPreference/investPreference",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/index/eventDetails/eventDetails",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/invest/investDetails/investDetails",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/mine/vip/vip",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/mine/vipMeal/vipMeal",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/index/stockDetails/stockDetails",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/index/conceptDetails/conceptDetails",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"globalStyle": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"backgroundColor": "#F8F8F8"
|
||||||
|
},
|
||||||
|
"tabBar": {
|
||||||
|
"custom": true,
|
||||||
|
"list": [
|
||||||
|
{
|
||||||
|
"iconPath": "",
|
||||||
|
"selectedIconPath": "",
|
||||||
|
"text": "首页",
|
||||||
|
"pagePath": "pages/index/index"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"iconPath": "",
|
||||||
|
"selectedIconPath": "",
|
||||||
|
"text": "投资",
|
||||||
|
"pagePath": "pages/invest/invest"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"iconPath": "",
|
||||||
|
"selectedIconPath": "",
|
||||||
|
"text": "我的",
|
||||||
|
"pagePath": "pages/mine/mine"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"uniIdRouter": {}
|
||||||
|
}
|
||||||
66
pages/index/conceptDetails/conceptDetails.vue
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<navBar leftText="相关概念详情"></navBar>
|
||||||
|
<image class="topBg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
|
||||||
|
<view class="conceptDetailsC fixed" :style="'top:'+navH+'px;'">
|
||||||
|
<view class="title">外骨骼机器人(250501)</view>
|
||||||
|
<view class="time">2025-05-08 08:43</view>
|
||||||
|
<view class="content">四部门联合启动的人力资源服务业与制造业融合发展试点,主要目的是推动人力资源服务向高端制造渗透,促进产业升级。而外骨骼机器人属于高端制造领域的重要创新产品之一,其发展需要人力资源服务业的支持,例如技术人才的输送、产业工人培训等。同时,外骨骼机器人在消费级市场的推广和应用也符合制造业与服务业融合发展的方向。因此,该政策试点对外骨骼机器人行业具有潜在利好影响。</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { inject } from 'vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
navH:inject('navHeight')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.topBg
|
||||||
|
{
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.conceptDetailsC
|
||||||
|
{
|
||||||
|
background-color: white;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
padding: 20rpx 25rpx;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
border-radius: 20rpx 20rpx 0 0;
|
||||||
|
.title
|
||||||
|
{
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
.time
|
||||||
|
{
|
||||||
|
margin-top: 10rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #AAA;
|
||||||
|
}
|
||||||
|
.content
|
||||||
|
{
|
||||||
|
margin-top: 30rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
627
pages/index/eventDetails/eventDetails.vue
Normal file
@@ -0,0 +1,627 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<navBar leftText="事件详情"></navBar>
|
||||||
|
<image class="topBg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
|
||||||
|
<view class="eventDetailsC fixed" :style="'top:'+navH+'px;'">
|
||||||
|
<view class="categoryTitleC">
|
||||||
|
<view class="category">政策</view>
|
||||||
|
<text class="title">四部门联合启动人力资源服务业与制造业融合发展试点</text>
|
||||||
|
</view>
|
||||||
|
<view class="time">2025-05-08 08:43</view>
|
||||||
|
<view class="eventContent">人社部、工信部等四部门印发通知,明确在30个城市开展3年期试点,培育人力资源服务与制造业协同机构,打造融合平台和创新模式。政策</view>
|
||||||
|
<scroll-view scroll-x class="categoryList">
|
||||||
|
<view :class="'item relative '+(selectCategory==index?'select':'')" v-for="(item,index) in categoryList" :key="index" @click="clickCategoryItem(index)">
|
||||||
|
{{item}}
|
||||||
|
<view v-if="selectCategory==index" class="line absolute"></view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<view v-if="selectCategory==0" class="headingList flex">
|
||||||
|
<view class="item flex1" v-for="(item,index) in headingList" :key="index">
|
||||||
|
{{item}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="selectCategory==0" class="targetList">
|
||||||
|
<view class="item">
|
||||||
|
<view class="nameCodePriceC flex">
|
||||||
|
<view class="flex1">
|
||||||
|
<view class="name">科锐国际</view>
|
||||||
|
<view class="code">300662.SZ</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex1">
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view class="price flex1">30.04</view>
|
||||||
|
<view class="price flex1">30.15</view>
|
||||||
|
<view class="chg flex1">+0.37%</view>
|
||||||
|
</view>
|
||||||
|
<view class="content">
|
||||||
|
科锐国际作为灵活用工龙头企业,其业务高度契合政策推动的制造业高端人才引育方向。公司技术研发类岗位占比达70%,直接匹配政策要求
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="selectCategory==1" class="conceptList">
|
||||||
|
<view class="item relative" @click="clickConceptItem()">
|
||||||
|
<image class="cover" src="" mode="aspectFill"></image>
|
||||||
|
<view class="infoC absolute">
|
||||||
|
<view class="title">布鲁可IP衍生品(250109)</view>
|
||||||
|
<view class="content">
|
||||||
|
四部门联合启动的人力资源服务业与制造业融合发展试点,主要目的是推动
|
||||||
|
人力资源服务...
|
||||||
|
<text class="lookDetails">查看详情</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="bottomC fixed flex">
|
||||||
|
<view class="inputC flex1">
|
||||||
|
<input type="text" placeholder="我来说两句..." placeholder-style="color:#666"/>
|
||||||
|
</view>
|
||||||
|
<view class="commentLikeNumC flex">
|
||||||
|
<view class="item">
|
||||||
|
<image class="icon" src="/static/icon/home/browser.png" mode="widthFix"></image>
|
||||||
|
<view>64</view>
|
||||||
|
</view>
|
||||||
|
<view class="item" @click="clickComment()">
|
||||||
|
<image class="icon" src="/static/icon/home/comment.png" mode="widthFix"></image>
|
||||||
|
<view>28</view>
|
||||||
|
</view>
|
||||||
|
<view class="item">
|
||||||
|
<image class="icon" src="/static/icon/home/follow.png" mode="widthFix"></image>
|
||||||
|
<view>128</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<uni-popup ref="popup" type="bottom">
|
||||||
|
<view class="popup">
|
||||||
|
<view class="titleCloseC flex">
|
||||||
|
<view class="title flex1">全部回复</view>
|
||||||
|
<view class="closeC" @click="closeCommentPopup()">
|
||||||
|
<image class="icon" src="/static/icon/home/close.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="list">
|
||||||
|
<view class="item">
|
||||||
|
<view class="originComment">
|
||||||
|
<image class="avatar" src="" mode="aspectFill"></image>
|
||||||
|
<view class="flex1">
|
||||||
|
<view class="nickname">逸尘破晓</view>
|
||||||
|
<view class="content">四部门联合启动的人力资源服务业与制造业融合发展点,主要目的是推动人力资源服务向高端制造渗透。</view>
|
||||||
|
<view class="timeReplyLikeC flex between">
|
||||||
|
<view class="timeReplyC flex">
|
||||||
|
<view class="time">15:37</view>
|
||||||
|
<view class="reply">回复</view>
|
||||||
|
</view>
|
||||||
|
<view class="likeC flex">
|
||||||
|
<image class="icon" src="/static/icon/home/like.png" mode="widthFix"></image>
|
||||||
|
<view class="num">85</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="totalCommentNumC flex">
|
||||||
|
<view class="line"></view>
|
||||||
|
全部34条评论
|
||||||
|
<image class="arrow" src="/static/icon/home/commentArrow.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="replyList">
|
||||||
|
<view class="replyItem">
|
||||||
|
<image class="avatar" src="" mode="aspectFill"></image>
|
||||||
|
<view class="flex1">
|
||||||
|
<view class="nickname">逸尘破晓</view>
|
||||||
|
<view class="content">四部门联合启动的人力资源服务业与制造业融合发展点,主要目的是推动人力资源服务向高端制造渗透。</view>
|
||||||
|
<view class="timeReplyLikeC flex between">
|
||||||
|
<view class="timeReplyC flex">
|
||||||
|
<view class="time">15:37</view>
|
||||||
|
<view class="reply">回复</view>
|
||||||
|
</view>
|
||||||
|
<view class="likeC flex">
|
||||||
|
<image class="icon" src="/static/icon/home/like.png" mode="widthFix"></image>
|
||||||
|
<view class="num">85</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="popBottomC">
|
||||||
|
<view class="inputC">
|
||||||
|
<input type="text" placeholder="我来说两句..." placeholder-style="color:#666"/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { inject } from 'vue';
|
||||||
|
import { eventDetails } from '../../../request/api';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
navH:inject('navHeight'),
|
||||||
|
eventId:'', //事件id
|
||||||
|
categoryList:['相关标的','相关概念','历史事件','时间传导链分析','关联数据'],
|
||||||
|
selectCategory:0,
|
||||||
|
headingList:['名称代码','分时图','开盘价','最新价','涨跌幅']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(e)
|
||||||
|
{
|
||||||
|
if(e.id)
|
||||||
|
{
|
||||||
|
this.eventId = e.id
|
||||||
|
this.getEventDetailsData()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 点击切换分类
|
||||||
|
*/
|
||||||
|
clickCategoryItem(index)
|
||||||
|
{
|
||||||
|
if(this.selectCategory!=index)
|
||||||
|
{
|
||||||
|
this.selectCategory = index
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 点击查看股票详情
|
||||||
|
*/
|
||||||
|
clickStockItem()
|
||||||
|
{
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pages/index/stockDetails/stockDetails'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 点击查看相关概念
|
||||||
|
*/
|
||||||
|
clickConceptItem()
|
||||||
|
{
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pages/index/conceptDetails/conceptDetails'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 点击评论
|
||||||
|
*/
|
||||||
|
clickComment()
|
||||||
|
{
|
||||||
|
this.$refs['popup'].open()
|
||||||
|
},
|
||||||
|
closeCommentPopup()
|
||||||
|
{
|
||||||
|
this.$refs['popup'].close()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 获取事件详情数据
|
||||||
|
*/
|
||||||
|
getEventDetailsData()
|
||||||
|
{
|
||||||
|
let eventId = this.eventId
|
||||||
|
eventDetails(eventId).then(res=>{
|
||||||
|
|
||||||
|
}).catch(error=>{
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.topBg
|
||||||
|
{
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.eventDetailsC
|
||||||
|
{
|
||||||
|
background-color: white;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
padding: 20rpx 0 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: calc(20rpx + 70rpx + 20rpx + env(safe-area-inset-bottom));
|
||||||
|
border-radius: 20rpx 20rpx 0 0;
|
||||||
|
overflow-y: hidden;
|
||||||
|
.categoryTitleC
|
||||||
|
{
|
||||||
|
padding: 0 25rpx;
|
||||||
|
.category
|
||||||
|
{
|
||||||
|
background-color: #FD9A14;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 11rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.title
|
||||||
|
{
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.time
|
||||||
|
{
|
||||||
|
margin: 20rpx 25rpx 0;
|
||||||
|
font-size: 22rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
.eventContent
|
||||||
|
{
|
||||||
|
margin: 22rpx 24rpx 0;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #666;
|
||||||
|
line-height: 1.2rem;
|
||||||
|
}
|
||||||
|
.categoryList
|
||||||
|
{
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
.item
|
||||||
|
{
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 60rpx;
|
||||||
|
padding: 0 18rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #42485B;
|
||||||
|
}
|
||||||
|
.item.select
|
||||||
|
{
|
||||||
|
font-weight: bold;
|
||||||
|
color: #F97316;
|
||||||
|
.line
|
||||||
|
{
|
||||||
|
background-color: #F97316;
|
||||||
|
left: calc((100% - 50rpx)/2);
|
||||||
|
bottom: 0;
|
||||||
|
width: 50rpx;
|
||||||
|
height: 2rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.headingList
|
||||||
|
{
|
||||||
|
background-color: #F3F6F9;
|
||||||
|
margin: 28rpx 25rpx 0;
|
||||||
|
.item
|
||||||
|
{
|
||||||
|
line-height: 55rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #999;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.targetList
|
||||||
|
{
|
||||||
|
padding: 0 25rpx;
|
||||||
|
.item
|
||||||
|
{
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
border-bottom: solid 1rpx #E4E4E4;
|
||||||
|
.nameCodePriceC
|
||||||
|
{
|
||||||
|
padding: 20rpx 0;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #222;
|
||||||
|
.code
|
||||||
|
{
|
||||||
|
font-size: 20rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
.price
|
||||||
|
{
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #222;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.chg
|
||||||
|
{
|
||||||
|
color: #FF2929;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content
|
||||||
|
{
|
||||||
|
font-size: 20rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.conceptList
|
||||||
|
{
|
||||||
|
padding: 30rpx 25rpx;
|
||||||
|
.item
|
||||||
|
{
|
||||||
|
.cover
|
||||||
|
{
|
||||||
|
background-color: red;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 350rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
}
|
||||||
|
.infoC
|
||||||
|
{
|
||||||
|
background: linear-gradient(to bottom,#00000080,#000);
|
||||||
|
padding: 20rpx 23rpx;
|
||||||
|
left:0;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
color: white;
|
||||||
|
.title
|
||||||
|
{
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.content
|
||||||
|
{
|
||||||
|
margin-top: 10rpx;
|
||||||
|
font-size: 20rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.2rem;
|
||||||
|
.lookDetails
|
||||||
|
{
|
||||||
|
color: #F97316;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottomC
|
||||||
|
{
|
||||||
|
padding: 20rpx 25rpx calc(20rpx + env(safe-area-inset-bottom));
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
box-shadow: 0px -1rpx 0px 0px #EEEEEE;
|
||||||
|
.inputC
|
||||||
|
{
|
||||||
|
background-color: #F0F0F0;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
padding: 0 33rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
border-radius: 35rpx;
|
||||||
|
input
|
||||||
|
{
|
||||||
|
height: 100%;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.commentLikeNumC
|
||||||
|
{
|
||||||
|
.item
|
||||||
|
{
|
||||||
|
padding: 0 20rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #666;
|
||||||
|
.icon
|
||||||
|
{
|
||||||
|
width: 35rpx;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.popup
|
||||||
|
{
|
||||||
|
background-color: white;
|
||||||
|
.titleCloseC
|
||||||
|
{
|
||||||
|
padding-left: 25rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #222;
|
||||||
|
.closeC
|
||||||
|
{
|
||||||
|
padding: 28rpx;
|
||||||
|
.icon
|
||||||
|
{
|
||||||
|
width: 28rpx;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.list
|
||||||
|
{
|
||||||
|
margin: 0 25rpx;
|
||||||
|
border-top: solid 1rpx #E4E4E4;
|
||||||
|
max-height: 1200rpx;
|
||||||
|
.item
|
||||||
|
{
|
||||||
|
padding-top: 30rpx;
|
||||||
|
border-bottom: solid 1rpx #E4E4E4;
|
||||||
|
.originComment
|
||||||
|
{
|
||||||
|
display: flex;
|
||||||
|
.avatar
|
||||||
|
{
|
||||||
|
background-color: red;
|
||||||
|
margin-right: 23rpx;
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.nickname
|
||||||
|
{
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #111;
|
||||||
|
}
|
||||||
|
.content
|
||||||
|
{
|
||||||
|
margin-top: 10rpx;
|
||||||
|
line-height: 1.2rem;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
.timeReplyLikeC
|
||||||
|
{
|
||||||
|
.time
|
||||||
|
{
|
||||||
|
margin-right: 36rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
.reply
|
||||||
|
{
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #F97316;
|
||||||
|
}
|
||||||
|
.likeC
|
||||||
|
{
|
||||||
|
padding: 14rpx 0;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #999;
|
||||||
|
.icon
|
||||||
|
{
|
||||||
|
margin-right: 12rpx;
|
||||||
|
width: 27rpx;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.likeC.like
|
||||||
|
{
|
||||||
|
color: #F97316;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.totalCommentNumC
|
||||||
|
{
|
||||||
|
padding: 14rpx 0 22rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #999;
|
||||||
|
.line
|
||||||
|
{
|
||||||
|
background-color: #aaa;
|
||||||
|
margin-right: 18rpx;
|
||||||
|
width: 30rpx;
|
||||||
|
height: 2rpx;
|
||||||
|
}
|
||||||
|
.arrow
|
||||||
|
{
|
||||||
|
margin-left: 14rpx;
|
||||||
|
width: 13rpx;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.replyList
|
||||||
|
{
|
||||||
|
margin-left: 60rpx;
|
||||||
|
border-top: solid 1rpx #E4E4E4;
|
||||||
|
.replyItem
|
||||||
|
{
|
||||||
|
display: flex;
|
||||||
|
padding: 22rpx 0;
|
||||||
|
border-bottom: solid 1rpx #E4E4E4;
|
||||||
|
.avatar
|
||||||
|
{
|
||||||
|
background-color: red;
|
||||||
|
margin-right: 23rpx;
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.nickname
|
||||||
|
{
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #111;
|
||||||
|
}
|
||||||
|
.content
|
||||||
|
{
|
||||||
|
margin-top: 10rpx;
|
||||||
|
line-height: 1.2rem;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
.timeReplyLikeC
|
||||||
|
{
|
||||||
|
.time
|
||||||
|
{
|
||||||
|
margin-right: 36rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
.reply
|
||||||
|
{
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #F97316;
|
||||||
|
}
|
||||||
|
.likeC
|
||||||
|
{
|
||||||
|
padding: 14rpx 0;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #999;
|
||||||
|
.icon
|
||||||
|
{
|
||||||
|
margin-right: 12rpx;
|
||||||
|
width: 27rpx;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.likeC.like
|
||||||
|
{
|
||||||
|
color: #F97316;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.replyItem:last-child
|
||||||
|
{
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.popBottomC
|
||||||
|
{
|
||||||
|
padding: 22rpx 25rpx calc(22rpx + env(safe-area-inset-bottom));
|
||||||
|
.inputC
|
||||||
|
{
|
||||||
|
background-color: #F0F0F0;
|
||||||
|
padding: 0 33rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
border-radius: 35rpx;
|
||||||
|
input
|
||||||
|
{
|
||||||
|
height: 100%;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
1249
pages/index/index.vue
Normal file
29
pages/index/stockDetails/stockDetails.vue
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<navBar leftText="科锐国际(300662.SZ)"></navBar>
|
||||||
|
<image class="topBg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.topBg
|
||||||
|
{
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
737
pages/invest/invest.vue
Normal file
@@ -0,0 +1,737 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<image class="topBg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
|
||||||
|
<view class="navTitle fixed" :style="'top:'+menuTop+'px;line-height:'+menuH+'px;'">投资</view>
|
||||||
|
<view class="searchC fixed flex" :style="'top:'+navH+'px;'">
|
||||||
|
<image class="icon" src="/static/icon/home/search.png" mode="widthFix"></image>
|
||||||
|
<input class="flex1" type="text" placeholder="搜索话题/股票名称" placeholder-style="color:#94989A"/>
|
||||||
|
<view class="line"></view>
|
||||||
|
<view class="search">搜索</view>
|
||||||
|
</view>
|
||||||
|
<view class="contentC fixed" :style="'top:'+contentTop+'px;'">
|
||||||
|
<view class="">
|
||||||
|
<view class="todayC flex" @click="clickExpandOrRetract()">
|
||||||
|
<view class="todayDateC flex">
|
||||||
|
<view class="date">{{selectDate}}</view>
|
||||||
|
<image class="icon" src="/static/icon/invest/calendar.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
<view class="flex1"></view>
|
||||||
|
<view class="today">今</view>
|
||||||
|
</view>
|
||||||
|
<view class="weekList flex">
|
||||||
|
<view class="item flex1" v-for="(item,index) in weekList" :key="index">{{item}}</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="isExpand" class="monthDateList flexWrap">
|
||||||
|
<view class="item flexColumnCenter" v-for="(item,index) in monthDateList" :key="index" @click="clickSelectDate(item)">
|
||||||
|
<view :class="'date '+(item.isToday?'today':(item.isCurrentMonth?'':' notCurrentMonth')) ">{{item.day}}</view>
|
||||||
|
<block v-if="item.className">
|
||||||
|
<view v-if="item.className=='bg-gradient-danger'" class="eventNum danger">{{item.eventCount}}</view>
|
||||||
|
<view v-if="item.className=='bg-gradient-warning'" class="eventNum warning">{{item.eventCount}}</view>
|
||||||
|
<view v-if="item.className=='bg-gradient-info'" class="eventNum info">{{item.eventCount}}</view>
|
||||||
|
<view v-if="item.className=='bg-gradient-success'" class="eventNum success">{{item.eventCount}}</view>
|
||||||
|
</block>
|
||||||
|
<block v-else>
|
||||||
|
<view class="eventNum"></view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-else class="weekDateList flex">
|
||||||
|
<view class="item flex1 flexColumnCenter" v-for="(item,index) in weekDateList" @click="clickSelectDate(item)" :key="index">
|
||||||
|
<view :class="'date '+(item.isToday?'today':'') ">{{item.day}}</view>
|
||||||
|
<block v-if="item.className">
|
||||||
|
<view v-if="item.className=='bg-gradient-danger'" class="eventNum danger">{{item.eventCount}}</view>
|
||||||
|
<view v-if="item.className=='bg-gradient-warning'" class="eventNum warning">{{item.eventCount}}</view>
|
||||||
|
<view v-if="item.className=='bg-gradient-info'" class="eventNum info">{{item.eventCount}}</view>
|
||||||
|
<view v-if="item.className=='bg-gradient-success'" class="eventNum success">{{item.eventCount}}</view>
|
||||||
|
</block>
|
||||||
|
<block v-else>
|
||||||
|
<view class="eventNum"></view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="expandBgC flexCenter">
|
||||||
|
<view class="expandC flex" @click="clickExpandOrRetract()">
|
||||||
|
<text>{{isExpand?'收起':'展开'}}</text>
|
||||||
|
<image class="arrow" src="/static/icon/invest/downArrow.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="tabC">
|
||||||
|
<view :class="'item '+(selectTab==index?'select':'')" v-for="(item,index) in tabList" :key="index" @click="clickTabItem(index)">{{item}}</view>
|
||||||
|
</view>
|
||||||
|
<scroll-view scroll-x class="topCategoryC">
|
||||||
|
<view :class="'item relative '+(selectTopCategory==index?'select':'')" v-for="(item,index) in topCategoryList" :key="index" @click="clickTopCategoryItem(index)">
|
||||||
|
{{item}}
|
||||||
|
<view v-if="selectTopCategory==index" class="line absolute"></view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<view v-if="selectTab==0" class="eventList">
|
||||||
|
<view class="item" v-for="(item,index) in eventList" :key="index" @click="clickEventItem()">
|
||||||
|
<view class="flex">
|
||||||
|
<view class="time flex1">{{item.time}}</view>
|
||||||
|
<view class="starC relative">
|
||||||
|
<view class="starList flex" >
|
||||||
|
<image class="icon" :src="(sindex<(item.star)?'/static/icon/invest/star_s.png':'/static/icon/invest/star.png')" mode="widthFix" v-for="(sitem,sindex) in 5" :key="index"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="categoryTitleC flex">
|
||||||
|
<view class="category">宏观政策</view>
|
||||||
|
<view class="title flex1">{{item.title}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="labelC">
|
||||||
|
<view class="label">
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="content">
|
||||||
|
<text>{{item.forecast}}</text>
|
||||||
|
</view>
|
||||||
|
<scroll-view scroll-x class="percentList">
|
||||||
|
<view class="percentItem" v-for="(citem,cindex) in JSON.parse(item.concepts)" :key="cindex">
|
||||||
|
{{citem[0]}}
|
||||||
|
<zui-progress-circle :position="citem[2]" :range="[270,630]" :size="26" :ring-width="2" :texture="['#F97316','#E3E3E3']">
|
||||||
|
<view class="num">{{citem[2]*100}}%</view>
|
||||||
|
</zui-progress-circle>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="selectTab==1" class="dataList">
|
||||||
|
<view class="item">
|
||||||
|
<view class="flex">
|
||||||
|
<view class="time flex1">21:00</view>
|
||||||
|
<view class="starC relative">
|
||||||
|
<view class="starBgList flex">
|
||||||
|
<image class="icon" src="/static/icon/invest/star.png" mode="widthFix" v-for="(item,index) in 5" :key="index"></image>
|
||||||
|
</view>
|
||||||
|
<view class="starList absolute flex">
|
||||||
|
<image class="icon" src="/static/icon/invest/star_s.png" mode="widthFix" v-for="(item,index) in 5" :key="index"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="title">外交部长王毅将对俄罗斯进行正式访问。</view>
|
||||||
|
<view class="valueList flex between">
|
||||||
|
<view class="pre">前值 -7.1</view>
|
||||||
|
<view class="prediction">预测 93</view>
|
||||||
|
<view class="actual">实际 ————</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { inject } from 'vue'
|
||||||
|
import { calendarEventCount, calendarEventList } from '../../request/api'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
menuTop:inject('menuTop'),
|
||||||
|
menuH: inject('menuHeight'),
|
||||||
|
navH:inject('navHeight'),
|
||||||
|
windowWidth:inject('windowWidth'),
|
||||||
|
contentTop:'',
|
||||||
|
todayDate:'', //今日日期
|
||||||
|
weekList:['一','二','三','四','五','六','日'],
|
||||||
|
weekDateList:[], //当前周日期
|
||||||
|
monthDateList:[], //当前月日期
|
||||||
|
isExpand:false, //是否展开日期
|
||||||
|
tabList:['事件','数据'],
|
||||||
|
selectTab:0,
|
||||||
|
topCategoryList:['全部','大周期','大消费','大金融地产','TMT板块','公共产业板块'],
|
||||||
|
selectTopCategory:0,
|
||||||
|
listTop:'',
|
||||||
|
selectDate:'', //选择查看的日期
|
||||||
|
progress: 75,
|
||||||
|
eventList:[], //事件列表
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
let date = new Date()
|
||||||
|
this.contentTop = this.navH + (75+20)/750*inject('windowWidth')
|
||||||
|
let year = date.getFullYear()
|
||||||
|
let month = date.getMonth()+1
|
||||||
|
let day = date.getDate()
|
||||||
|
this.selectDate = date.getFullYear()+'-'+(month>9?month:('0'+month))+'-'+(day>9?day:('0'+day))
|
||||||
|
let week = date.getDay() || 7
|
||||||
|
let diff = week - 1
|
||||||
|
let daysOfWeek = [];
|
||||||
|
for (var i = 0; i < 7; i++) {
|
||||||
|
let newDate = new Date()
|
||||||
|
newDate.setDate(day - diff + i); // 设置日期为当前周的相应日期
|
||||||
|
let newDay = newDate.getDate()
|
||||||
|
let date = year+'-'+(month>9?month:('0'+month))+'-'+(newDay>9?newDay:('0'+newDay))
|
||||||
|
daysOfWeek.push({date:date,day:newDay,isToday:newDay==day?true:false});
|
||||||
|
}
|
||||||
|
this.weekDateList = daysOfWeek
|
||||||
|
let firstDayOfMonth = new Date();
|
||||||
|
firstDayOfMonth.setDate(1);
|
||||||
|
//获取当前月天数
|
||||||
|
let currentMonthDay = new Date(year, month, 0).getDate()
|
||||||
|
let firstDayWeek = firstDayOfMonth.getDay() || 7
|
||||||
|
let daysOfMonth = []
|
||||||
|
for (var i = 1; i <= currentMonthDay; i++) {
|
||||||
|
let newDate = new Date()
|
||||||
|
newDate.setDate(i); // 设置日期为当前月的相应日期
|
||||||
|
let newDay = newDate.getDate()
|
||||||
|
let date = year+'-'+(month>9?month:('0'+month))+'-'+(newDay>9?newDay:('0'+newDay))
|
||||||
|
daysOfMonth.push({date:date,day:newDay,isToday:newDay==day?true:false,isCurrentMonth:true});
|
||||||
|
}
|
||||||
|
for (var i = 0; i < firstDayWeek-1; i++) {
|
||||||
|
//获取上月天数
|
||||||
|
let lastMonthDay = new Date(year, month-1, 0).getDate()
|
||||||
|
//获取上月日期
|
||||||
|
let newDate = new Date(year,month-2,lastMonthDay-i)
|
||||||
|
let newMonth = newDate.getMonth()+1
|
||||||
|
let newDay = newDate.getDate()
|
||||||
|
let date = year+'-'+(newMonth>9?newMonth:('0'+newMonth))+'-'+(newDay>9?newDay:('0'+newDay))
|
||||||
|
daysOfMonth.unshift({date:date,day:newDay,isToday:false,isCurrentMonth:false});
|
||||||
|
}
|
||||||
|
// 下一个月的第一天
|
||||||
|
let nextMonthFirstDay = new Date(year, month, 1);
|
||||||
|
// 然后减去一天就是当前月的最后一天
|
||||||
|
let lastDayOfMonth = new Date(nextMonthFirstDay - (24 * 60 * 60 * 1000)); // 减去一天的毫秒数
|
||||||
|
let lastDayWeek = lastDayOfMonth.getDay() || 7; // 返回0(星期天)到6(星期六)之
|
||||||
|
for (var i = 1; i < 8-lastDayWeek; i++) {
|
||||||
|
if(month>11)
|
||||||
|
{
|
||||||
|
month = -1
|
||||||
|
year ++
|
||||||
|
}
|
||||||
|
//获取下月日期
|
||||||
|
let newDate = new Date(year,month + 1,i)
|
||||||
|
let newMonth = newDate.getMonth()+1
|
||||||
|
let newDay = newDate.getDate()
|
||||||
|
let date = year+'-'+(newMonth>9?newMonth:('0'+newMonth))+'-'+(newDay>9?newDay:('0'+newDay))
|
||||||
|
daysOfMonth.push({date:date,day:newDay,isToday:false,isCurrentMonth:false});
|
||||||
|
}
|
||||||
|
this.monthDateList = daysOfMonth
|
||||||
|
this.listTop = this.contentTop + (68+40+96+74+70+74+22)/750*inject('windowWidth')
|
||||||
|
this.getEventListData()
|
||||||
|
this.getCurrentMonthEventCountData()
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
circumference() {
|
||||||
|
return Math.PI * 100; // 圆周长,半径为50的圆周长
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 点击展开或收起
|
||||||
|
*/
|
||||||
|
clickExpandOrRetract()
|
||||||
|
{
|
||||||
|
this.isExpand = !this.isExpand
|
||||||
|
if(this.isExpand)
|
||||||
|
{
|
||||||
|
this.listTop = this.contentTop + (68+40+96*6+74+70+74+22)/750*this.windowWidth
|
||||||
|
}else
|
||||||
|
this.listTop = this.contentTop + (68+40+96+74+70+74+22)/750*this.windowWidth
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 选中日期
|
||||||
|
* @param {Object} item
|
||||||
|
*/
|
||||||
|
clickSelectDate(item)
|
||||||
|
{
|
||||||
|
if(this.selectDate!=item.date)
|
||||||
|
{
|
||||||
|
this.selectDate = item.date
|
||||||
|
this.getEventListData()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 点击切换事件或者数据
|
||||||
|
*/
|
||||||
|
clickTabItem(index)
|
||||||
|
{
|
||||||
|
if(this.selectTab!=index)
|
||||||
|
{
|
||||||
|
this.selectTab = index
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 选择一级分类
|
||||||
|
*/
|
||||||
|
clickTopCategoryItem(index)
|
||||||
|
{
|
||||||
|
if(this.selectTopCategory!=index)
|
||||||
|
{
|
||||||
|
this.selectTopCategory = index
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 点击查看事件详情
|
||||||
|
*/
|
||||||
|
clickEventItem()
|
||||||
|
{
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pages/invest/investDetails/investDetails'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 获取事件列表数据
|
||||||
|
*/
|
||||||
|
getEventListData()
|
||||||
|
{
|
||||||
|
let param = {date:this.selectDate}
|
||||||
|
calendarEventList(param).then(res=>{
|
||||||
|
for (let item of res) {
|
||||||
|
let calendarTime = item.calendar_time
|
||||||
|
let time = calendarTime.split('T')[1]
|
||||||
|
item.time = time.substr(0,5)
|
||||||
|
}
|
||||||
|
this.eventList = res
|
||||||
|
}).catch(error=>{
|
||||||
|
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 获取当前月份每一天的事件数量
|
||||||
|
*/
|
||||||
|
getCurrentMonthEventCountData()
|
||||||
|
{
|
||||||
|
calendarEventCount().then(res=>{
|
||||||
|
for (let item of res) {
|
||||||
|
let date = item.start
|
||||||
|
for (let s of this.weekDateList) {
|
||||||
|
if(s.date == date)
|
||||||
|
{
|
||||||
|
s.eventCount = item.title
|
||||||
|
s.className = item.className
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (let s of this.monthDateList) {
|
||||||
|
if(s.date == date)
|
||||||
|
{
|
||||||
|
s.eventCount = item.title
|
||||||
|
s.className = item.className
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}).catch(error=>{
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.topBg
|
||||||
|
{
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.navTitle
|
||||||
|
{
|
||||||
|
left: 0;
|
||||||
|
margin: 0 23rpx;
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.searchC
|
||||||
|
{
|
||||||
|
background-color: white;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: 20rpx 25rpx 0;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
height: 75rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
.icon
|
||||||
|
{
|
||||||
|
margin-right: 16rpx;
|
||||||
|
width: 30rpx;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
input
|
||||||
|
{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.line
|
||||||
|
{
|
||||||
|
background-color: #E1E1E1;
|
||||||
|
width: 1rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
}
|
||||||
|
.search
|
||||||
|
{
|
||||||
|
padding: 0 25rpx;
|
||||||
|
color: #F97316;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.contentC
|
||||||
|
{
|
||||||
|
background-color: white;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: calc(55px + env(safe-area-inset-bottom));
|
||||||
|
margin-top: 22rpx;
|
||||||
|
border-radius: 20rpx 20rpx 0 0;
|
||||||
|
overflow-y: scroll;
|
||||||
|
.todayC
|
||||||
|
{
|
||||||
|
padding: 12rpx 26rpx;
|
||||||
|
.todayDateC
|
||||||
|
{
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #222;
|
||||||
|
.icon
|
||||||
|
{
|
||||||
|
margin-left: 16rpx;
|
||||||
|
width: 30rpx;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.today
|
||||||
|
{
|
||||||
|
background-color: #F973161A;
|
||||||
|
width: 40rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #F97316;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.weekList
|
||||||
|
{
|
||||||
|
.item
|
||||||
|
{
|
||||||
|
line-height: 40rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #292621;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.weekDateList
|
||||||
|
{
|
||||||
|
.item
|
||||||
|
{
|
||||||
|
padding-top: 14rpx;
|
||||||
|
.date
|
||||||
|
{
|
||||||
|
width: 40rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.date.today
|
||||||
|
{
|
||||||
|
background-color: #F9731626;
|
||||||
|
border-radius: 5rpx;
|
||||||
|
color: #F97316;
|
||||||
|
}
|
||||||
|
.eventNum
|
||||||
|
{
|
||||||
|
// background-color: #EB4A46;
|
||||||
|
margin-top: 12rpx;
|
||||||
|
width: 80rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
line-height: 30rpx;
|
||||||
|
border-radius: 5rpx;
|
||||||
|
font-size: 16rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.eventNum.danger
|
||||||
|
{
|
||||||
|
background-color: #EB4A46;
|
||||||
|
}
|
||||||
|
.eventNum.warning
|
||||||
|
{
|
||||||
|
background-color: #FD9C16;
|
||||||
|
}
|
||||||
|
.eventNum.info
|
||||||
|
{
|
||||||
|
background-color: #16BBCF;
|
||||||
|
}
|
||||||
|
.eventNum.success
|
||||||
|
{
|
||||||
|
background-color: #55AE59;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.monthDateList
|
||||||
|
{
|
||||||
|
.item
|
||||||
|
{
|
||||||
|
padding-top: 14rpx;
|
||||||
|
width: calc(100%/7);
|
||||||
|
.date
|
||||||
|
{
|
||||||
|
width: 40rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #292621;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.date.today
|
||||||
|
{
|
||||||
|
background-color: #F9731626;
|
||||||
|
border-radius: 5rpx;
|
||||||
|
color: #F97316;
|
||||||
|
}
|
||||||
|
.date.notCurrentMonth
|
||||||
|
{
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.eventNum
|
||||||
|
{
|
||||||
|
margin-top: 12rpx;
|
||||||
|
width: 80rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
line-height: 30rpx;
|
||||||
|
border-radius: 5rpx;
|
||||||
|
font-size: 16rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.eventNum.danger
|
||||||
|
{
|
||||||
|
background-color: #EB4A46;
|
||||||
|
}
|
||||||
|
.eventNum.warning
|
||||||
|
{
|
||||||
|
background-color: #FD9C16;
|
||||||
|
}
|
||||||
|
.eventNum.info
|
||||||
|
{
|
||||||
|
background-color: #16BBCF;
|
||||||
|
}
|
||||||
|
.eventNum.success
|
||||||
|
{
|
||||||
|
background-color: #55AE59;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.expandBgC
|
||||||
|
{
|
||||||
|
margin: 0 25rpx;
|
||||||
|
border-bottom: solid 1rpx #E4E4E4;
|
||||||
|
.expandC
|
||||||
|
{
|
||||||
|
padding: 20rpx 0;
|
||||||
|
font-size: 22rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #8A857C;
|
||||||
|
.arrow
|
||||||
|
{
|
||||||
|
margin-left: 7rpx;
|
||||||
|
width: 15rpx;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tabC
|
||||||
|
{
|
||||||
|
.item
|
||||||
|
{
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 24rpx;
|
||||||
|
line-height: 70rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #42485B;
|
||||||
|
}
|
||||||
|
.item.select
|
||||||
|
{
|
||||||
|
color: #F97316;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.topCategoryC
|
||||||
|
{
|
||||||
|
white-space: nowrap;
|
||||||
|
border-bottom: solid 1rpx #E4E4E4;
|
||||||
|
.item
|
||||||
|
{
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 72rpx;
|
||||||
|
padding: 0 28rpx;
|
||||||
|
font-size: 27rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #42485B;
|
||||||
|
}
|
||||||
|
.item.select
|
||||||
|
{
|
||||||
|
font-weight: bold;
|
||||||
|
color: black;
|
||||||
|
.line
|
||||||
|
{
|
||||||
|
background-color: #F97316;
|
||||||
|
left: calc((100% - 50rpx)/2);
|
||||||
|
width: 50rpx;
|
||||||
|
height: 2rpx;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.eventList
|
||||||
|
{
|
||||||
|
padding: 0 25rpx;
|
||||||
|
.item
|
||||||
|
{
|
||||||
|
padding: 30rpx 0;
|
||||||
|
border-bottom: solid 1rpx #E4E4E4;
|
||||||
|
.time
|
||||||
|
{
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #767676;
|
||||||
|
}
|
||||||
|
.starC
|
||||||
|
{
|
||||||
|
.starList
|
||||||
|
{
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.icon
|
||||||
|
{
|
||||||
|
margin-right: 9rpx;
|
||||||
|
width: 27rpx;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.categoryTitleC
|
||||||
|
{
|
||||||
|
margin-top: 18rpx;
|
||||||
|
.category
|
||||||
|
{
|
||||||
|
background-color: #FD9A14;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
padding: 0 12rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.title
|
||||||
|
{
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.labelC
|
||||||
|
{
|
||||||
|
display: inline-block;
|
||||||
|
.label
|
||||||
|
{
|
||||||
|
border-radius: 5rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content
|
||||||
|
{
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #666;
|
||||||
|
|
||||||
|
}
|
||||||
|
.percentList
|
||||||
|
{
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
.percentItem
|
||||||
|
{
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #F8F8F8;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #222;
|
||||||
|
zui-progress-circle
|
||||||
|
{
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
.num
|
||||||
|
{
|
||||||
|
width: 23px;
|
||||||
|
line-height:23px;
|
||||||
|
font-size: 17rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #999;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.percentItem:last-child
|
||||||
|
{
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.dataList
|
||||||
|
{
|
||||||
|
padding: 0 25rpx;
|
||||||
|
.item
|
||||||
|
{
|
||||||
|
padding: 30rpx 0;
|
||||||
|
border-bottom: solid 1rpx #E4E4E4;
|
||||||
|
.time
|
||||||
|
{
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #767676;
|
||||||
|
}
|
||||||
|
.starC
|
||||||
|
{
|
||||||
|
.starList
|
||||||
|
{
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.icon
|
||||||
|
{
|
||||||
|
margin-right: 9rpx;
|
||||||
|
width: 27rpx;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title
|
||||||
|
{
|
||||||
|
margin-top: 16rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
.valueList
|
||||||
|
{
|
||||||
|
margin-top: 20rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
223
pages/invest/investDetails/investDetails.vue
Normal file
@@ -0,0 +1,223 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<navBar leftText="详情"></navBar>
|
||||||
|
<image class="topBg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
|
||||||
|
<view class="categoryC fixed" :style="'top:'+navH+'px;'">
|
||||||
|
<view :class="'item relative '+(selectCategory==index?'select':'')" v-for="(item,index) in categoryList" :key="index" @click="clickCategoryItem(index)">
|
||||||
|
{{item}}
|
||||||
|
<view v-if="selectCategory==index" class="line absolute"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="contentC fixed" :style="'top:'+contentTop+'px;'">
|
||||||
|
<view v-if="selectCategory==3" class="stockC">
|
||||||
|
<view class="stockCategoryList flexWrap">
|
||||||
|
<view class="item flexColumnCenter" :style="'background-color:'+item.bgColor+';color:'+item.color+';'" v-for="(item,index) in stockCategoryList" :key="index">
|
||||||
|
<view class="num">23</view>
|
||||||
|
<view class="title">{{item.title}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="stockList">
|
||||||
|
<view class="item">
|
||||||
|
<view class="titleCorrelationC flex">
|
||||||
|
<view class="title flex1">000065.SZ 北方国际</view>
|
||||||
|
<view class="correlation">相关度: 98%</view>
|
||||||
|
</view>
|
||||||
|
<view class="category">石油石化</view>
|
||||||
|
<view class="content">
|
||||||
|
海外订单占比70%-80%,在俄语区矿产资源开发(蒙古矿山)、电力运营经验丰富,是乌克兰重建核心受益标的。公司在俄语区的深厚积累使其直接获益于区域经济复苏和能源合作深化。
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { inject } from 'vue';
|
||||||
|
import { investEventDetails } from '../../../request/api';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
navH:inject('navHeight'),
|
||||||
|
eventId:'', //事件id
|
||||||
|
contentTop:'',
|
||||||
|
categoryList:['背景','推演','实际','相关股票','相关概念'],
|
||||||
|
selectCategory:0,
|
||||||
|
stockCategoryList:[
|
||||||
|
{
|
||||||
|
title:'全部股票',
|
||||||
|
bgColor:'#C00000',
|
||||||
|
color:'white'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title:'大周期',
|
||||||
|
bgColor:'#305496',
|
||||||
|
color:'white'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title:'TMT板块',
|
||||||
|
bgColor:'#FFBF00',
|
||||||
|
color:'white',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title:'大金融地产',
|
||||||
|
bgColor:'#FFF4D3',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title:'大消费',
|
||||||
|
bgColor:'#CDEEEE',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title:'公共产业板块',
|
||||||
|
bgColor:'#DEEBF7'
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.contentTop = this.navH+(30+74)/750*inject('windowWidth')
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 点击切换栏目
|
||||||
|
*/
|
||||||
|
clickCategoryItem(index)
|
||||||
|
{
|
||||||
|
if(this.selectCategory!=index)
|
||||||
|
{
|
||||||
|
this.selectCategory = index
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 获取事件详情数据
|
||||||
|
*/
|
||||||
|
getEventDetailsData()
|
||||||
|
{
|
||||||
|
investEventDetails(this.eventId).then(res=>{
|
||||||
|
|
||||||
|
}).catch(error=>{
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.topBg
|
||||||
|
{
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.categoryC
|
||||||
|
{
|
||||||
|
background-color: white;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
padding-top: 20rpx;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
border-radius: 20rpx 20rpx 0 0;
|
||||||
|
.item
|
||||||
|
{
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
line-height: 75rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #42485B;
|
||||||
|
}
|
||||||
|
.item.select
|
||||||
|
{
|
||||||
|
font-weight: bold;
|
||||||
|
color: #F97316;
|
||||||
|
.line
|
||||||
|
{
|
||||||
|
background-color: #F97316;
|
||||||
|
left: calc((100% - 50rpx)/2);
|
||||||
|
bottom: 0;
|
||||||
|
width: 50rpx;
|
||||||
|
height: 2rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.contentC
|
||||||
|
{
|
||||||
|
background-color: white;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
overflow-y: scroll;
|
||||||
|
.stockCategoryList
|
||||||
|
{
|
||||||
|
margin-top: 18rpx;
|
||||||
|
padding: 0 24rpx;
|
||||||
|
.item
|
||||||
|
{
|
||||||
|
margin: 0 20rpx 20rpx 0;
|
||||||
|
width: calc((100% - 40rpx)/3);
|
||||||
|
height: 100rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
.num
|
||||||
|
{
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.title
|
||||||
|
{
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item:nth-child(3n)
|
||||||
|
{
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.stockList
|
||||||
|
{
|
||||||
|
padding: 22rpx 25rpx 30rpx;
|
||||||
|
border-bottom: solid 1rpx #E4E4E4;
|
||||||
|
.item
|
||||||
|
{
|
||||||
|
.title
|
||||||
|
{
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
.correlation
|
||||||
|
{
|
||||||
|
background-color: #F973161A;
|
||||||
|
padding: 0 13rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
border-radius: 5rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #F97316;
|
||||||
|
}
|
||||||
|
.category
|
||||||
|
{
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
line-height: 28rpx;
|
||||||
|
border: solid 1rpx #F6604A;
|
||||||
|
font-size: 20rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #F6604A;
|
||||||
|
border-radius: 5rpx;
|
||||||
|
}
|
||||||
|
.content
|
||||||
|
{
|
||||||
|
margin-top: 18rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #666;
|
||||||
|
line-height: 1.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
185
pages/mine/basicInfo/basicInfo.vue
Normal file
@@ -0,0 +1,185 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<navBar leftText="信息完善"></navBar>
|
||||||
|
<image class="topBg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
|
||||||
|
<view class="avatarC fixed" :style="'top:'+avatarTop+'px;'">
|
||||||
|
<image class="avatar" src="" mode="aspectFill"></image>
|
||||||
|
<image class="icon absolute" src="/static/icon/mine/basicInfo/edit.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
<view class="basicInfoC fixed" :style="'top:'+contentTop+'px;'">
|
||||||
|
<view class="title">基本信息</view>
|
||||||
|
<view class="section">昵称</view>
|
||||||
|
<view class="inputC">
|
||||||
|
<input type="text" />
|
||||||
|
</view>
|
||||||
|
<view class="section">手机号</view>
|
||||||
|
<view class="inputC">
|
||||||
|
<input type="text" />
|
||||||
|
</view>
|
||||||
|
<view class="section">性别</view>
|
||||||
|
<picker mode="selector" :range="sexList" @change="sexChange">
|
||||||
|
<view class="selectC flex">
|
||||||
|
<view class="flex1">{{sex}}</view>
|
||||||
|
<image class="arrow" src="/static/icon/mine/basicInfo/downArrow.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
</picker>
|
||||||
|
<view class="section">个人简介</view>
|
||||||
|
<view class="textareaC">
|
||||||
|
<textarea placeholder="简单介绍一下自己吧" placeholder-style="color:#AAA"></textarea>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="next fixed" @click="clickNext()">下一步</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { inject } from 'vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
avatarTop:'',
|
||||||
|
contentTop:'',
|
||||||
|
sexList:['男','女'],
|
||||||
|
sex:''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.avatarTop = inject('navHeight') + 60/750*inject('windowWidth')
|
||||||
|
this.contentTop = this.avatarTop + 75/750*inject('windowWidth')
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
sexChange(e)
|
||||||
|
{
|
||||||
|
console.log(e)
|
||||||
|
let value = e.detail.value
|
||||||
|
this.sex = this.sexList[value]
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 点击下一步
|
||||||
|
*/
|
||||||
|
clickNext()
|
||||||
|
{
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pages/mine/investPreference/investPreference'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.topBg
|
||||||
|
{
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.avatarC
|
||||||
|
{
|
||||||
|
left: 0;
|
||||||
|
margin-left:calc((100% - 150rpx)/2);
|
||||||
|
width: 150rpx;
|
||||||
|
.avatar
|
||||||
|
{
|
||||||
|
background-color: red;
|
||||||
|
width: 100%;
|
||||||
|
height: 150rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: solid 2rpx white;
|
||||||
|
}
|
||||||
|
.icon
|
||||||
|
{
|
||||||
|
right: 20rpx;
|
||||||
|
bottom: 0;
|
||||||
|
width: 40rpx;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.basicInfoC
|
||||||
|
{
|
||||||
|
background-color: white;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: calc(73rpx + 17rpx + 80rpx);
|
||||||
|
border-radius: 20rpx 20rpx 0 0;
|
||||||
|
overflow-y: scroll;
|
||||||
|
.title
|
||||||
|
{
|
||||||
|
margin: 150rpx 0 0 60rpx;
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.section
|
||||||
|
{
|
||||||
|
margin: 0 60rpx;
|
||||||
|
line-height: 66rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.inputC
|
||||||
|
{
|
||||||
|
background-color: #FBFBFD;
|
||||||
|
margin: 0 60rpx;
|
||||||
|
padding: 0 28rpx;
|
||||||
|
height: 78rpx;
|
||||||
|
border: solid 2rpx #EFEFF2;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
input
|
||||||
|
{
|
||||||
|
height: 100%;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.selectC
|
||||||
|
{
|
||||||
|
background-color: #FBFBFD;
|
||||||
|
margin: 0 60rpx;
|
||||||
|
padding: 0 25rpx 0 28rpx;
|
||||||
|
height: 78rpx;
|
||||||
|
border: solid 2rpx #EFEFF2;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #555;
|
||||||
|
.arrow
|
||||||
|
{
|
||||||
|
width: 16rpx;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.textareaC
|
||||||
|
{
|
||||||
|
background-color: #FBFBFD;
|
||||||
|
margin: 0 60rpx;
|
||||||
|
padding: 20rpx 0 0 28rpx;
|
||||||
|
border: solid 2rpx #EFEFF2;
|
||||||
|
border-radius: 2rpx;
|
||||||
|
textarea
|
||||||
|
{
|
||||||
|
height: 200rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.next
|
||||||
|
{
|
||||||
|
background-color: #F97316;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 73rpx;
|
||||||
|
margin: 0 25rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
217
pages/mine/commentReply/commentReply.vue
Normal file
@@ -0,0 +1,217 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<navBar leftText="评论回复"></navBar>
|
||||||
|
<image class="topBg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
|
||||||
|
<view class="tabC fixed flex" :style="'top:'+navH+'px;'">
|
||||||
|
<view :class="'item flex1 relative '+(selectTab==index?'select':'')" v-for="(item,index) in tabList" :key="index" @click="clickTabItem(index)">
|
||||||
|
{{item}}
|
||||||
|
<view v-if="selectTab==index" class="line absolute"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="list fixed" :style="'top:'+listTop+'px;'">
|
||||||
|
<view class="item">
|
||||||
|
<view class="replyContentC">
|
||||||
|
<view class="flex">
|
||||||
|
<view class="flex1 flex">
|
||||||
|
<image class="avatar" src="" mode="aspectFill"></image>
|
||||||
|
<view class="flex1">
|
||||||
|
<view class="replyNickname">逸尘破晓</view>
|
||||||
|
<view class="time">2-15 15:37</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="reply">回复</view>
|
||||||
|
</view>
|
||||||
|
<view class="content">
|
||||||
|
回复<text class="originNickname">永不落的梦想</text><text>:四部门联合启动的人力资源服务业与制造业融合发展点。</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="originalTextC">
|
||||||
|
<view class="originReply">
|
||||||
|
<text class="originNickname">永不落的梦想</text><text>:四部门联合启动的人力资源服务业与制造业融合发展点。</text>
|
||||||
|
</view>
|
||||||
|
<view class="originEventC">
|
||||||
|
<view class="levelTitleC flex">
|
||||||
|
<view class="level">C</view>
|
||||||
|
<view class="title">四部门联合启动人力资源服务业与制造业...</view>
|
||||||
|
</view>
|
||||||
|
<view class="eventContent">人社部、工信部等四部门印发通知,明确在30个城市开展3年期试点,培育人力资源服务与制造业协同机构...</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { inject } from 'vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
navH:inject('navHeight'),
|
||||||
|
listTop:'',
|
||||||
|
tabList:['评论我的','我评论的'],
|
||||||
|
selectTab:0,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.listTop = this.navH+(75+10)/750*inject('windowWidth')
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 点击选择对应分类
|
||||||
|
* @param {Object} index
|
||||||
|
*/
|
||||||
|
clickTabItem(index)
|
||||||
|
{
|
||||||
|
if(this.selectTab!=index)
|
||||||
|
{
|
||||||
|
this.selectTab = index
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.topBg
|
||||||
|
{
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.tabC
|
||||||
|
{
|
||||||
|
background-color: white;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
border-bottom: solid 1rpx #E4E4E4;
|
||||||
|
border-radius: 20rpx 20rpx 0 0;
|
||||||
|
.item
|
||||||
|
{
|
||||||
|
line-height: 74rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #42485B;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.item.select
|
||||||
|
{
|
||||||
|
font-weight: bold;
|
||||||
|
color: #F97316;
|
||||||
|
}
|
||||||
|
.item.select .line
|
||||||
|
{
|
||||||
|
background-color: #F97316;
|
||||||
|
left: calc((100% - 50rpx)/2);
|
||||||
|
width: 50rpx;
|
||||||
|
height: 2rpx;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.list
|
||||||
|
{
|
||||||
|
background-color: white;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
overflow-y: scroll;
|
||||||
|
.item
|
||||||
|
{
|
||||||
|
.replyContentC
|
||||||
|
{
|
||||||
|
padding: 40rpx 25rpx 0;
|
||||||
|
.avatar
|
||||||
|
{
|
||||||
|
background-color: red;
|
||||||
|
margin-right: 22rpx;
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.replyNickname
|
||||||
|
{
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
.time
|
||||||
|
{
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
.reply
|
||||||
|
{
|
||||||
|
width: 90rpx;
|
||||||
|
height: 52rpx;
|
||||||
|
line-height: 50rpx;
|
||||||
|
border-radius: 26rpx;
|
||||||
|
border: solid 1rpx #DDD;
|
||||||
|
font-size: 24rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.content
|
||||||
|
{
|
||||||
|
margin-top: 20rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #444;
|
||||||
|
.originNickname
|
||||||
|
{
|
||||||
|
color: #F97316;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.originalTextC
|
||||||
|
{
|
||||||
|
background-color: #F7F7F7;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
padding: 20rpx 25rpx 25rpx;
|
||||||
|
.originReply
|
||||||
|
{
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #444;
|
||||||
|
.originNickname
|
||||||
|
{
|
||||||
|
color: #F97316;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.originEventC
|
||||||
|
{
|
||||||
|
background-color: white;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
padding: 34rpx 16rpx;
|
||||||
|
.levelTitleC
|
||||||
|
{
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
.level
|
||||||
|
{
|
||||||
|
background-color: #FEC44F;
|
||||||
|
margin-right: 17rpx;
|
||||||
|
width: 50rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.title
|
||||||
|
{
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.eventContent
|
||||||
|
{
|
||||||
|
margin-top: 20rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
78
pages/mine/feedback/feedback.vue
Normal file
@@ -0,0 +1,78 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<navBar leftText="意见反馈"></navBar>
|
||||||
|
<image class="topBg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
|
||||||
|
<view class="feedbackC fixed" :style="'top:'+navH+'px;'">
|
||||||
|
<view class="textareaC">
|
||||||
|
<textarea placeholder="请输入您要反馈的问题(200 字以内)" placeholder-style="color:#C5C5C5" maxlength="200"></textarea>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="submit fixed">提交</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { inject } from 'vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
navH:inject('navHeight'),
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.topBg
|
||||||
|
{
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.feedbackC
|
||||||
|
{
|
||||||
|
background-color: white;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
padding: 43rpx 25rpx 0;
|
||||||
|
border-radius: 20rpx 20rpx 0 0;
|
||||||
|
.textareaC
|
||||||
|
{
|
||||||
|
background-color: #F3F6F9;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 20rpx 27rpx;
|
||||||
|
textarea
|
||||||
|
{
|
||||||
|
width: 100%;
|
||||||
|
height: 400rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.submit
|
||||||
|
{
|
||||||
|
background-color: #F97316;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 73rpx;
|
||||||
|
margin: 0 25rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
238
pages/mine/investPreference/investPreference.vue
Normal file
@@ -0,0 +1,238 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<navBar leftText="信息完善"></navBar>
|
||||||
|
<image class="topBg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
|
||||||
|
<view class="avatarC fixed" :style="'top:'+avatarTop+'px;'">
|
||||||
|
<image class="avatar" src="" mode="aspectFill"></image>
|
||||||
|
<image class="icon absolute" src="/static/icon/mine/basicInfo/edit.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
<view class="preferenceC fixed" :style="'top:'+contentTop+'px;'">
|
||||||
|
<view class="title">投资偏好设置</view>
|
||||||
|
<view class="section first">投资偏好</view>
|
||||||
|
<view class="list flexWrap">
|
||||||
|
<view :class="'item '+(selectInvestIndex==index?'select':'')" v-for="(item,index) in investPreferenceList" :key="index" @click="clickInvestItem(index)">
|
||||||
|
{{item}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="section">炒股年限</view>
|
||||||
|
<view class="list flexWrap">
|
||||||
|
<view :class="'item '+(selectYearIndex==index?'select':'')" v-for="(item,index) in stockYearList" :key="index" @click="clickYearItem(index)">
|
||||||
|
{{item}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="section">风险偏好</view>
|
||||||
|
<view class="list flexWrap">
|
||||||
|
<view :class="'item '+(selectRiskIndex==index?'select':'')" v-for="(item,index) in riskPreferenceList" :key="index" @click="clickRiskItem(index)">
|
||||||
|
{{item}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="section">投资规模</view>
|
||||||
|
<view class="list flexWrap">
|
||||||
|
<view :class="'item '+(selectScaleIndex==index?'select':'')" v-for="(item,index) in investmentScaleList" :key="index" @click="clickScaleItem(index)">
|
||||||
|
{{item}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="section">偏好市场(可多选)</view>
|
||||||
|
<view class="list flexWrap">
|
||||||
|
<view :class="'item '+(item.select?'select':'')" v-for="(item,index) in preferredMarketList" :key="index" @click="clickMarketItem(index)">
|
||||||
|
{{item.title}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="bottomC fixed flex">
|
||||||
|
<view class="pre btn">上一步</view>
|
||||||
|
<view class="finish btn flex1">完成</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { inject } from 'vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
avatarTop:'',
|
||||||
|
contentTop:'',
|
||||||
|
investPreferenceList:['长期投资','中短期投资','风险控制型'],
|
||||||
|
selectInvestIndex:-1,
|
||||||
|
stockYearList:['新手入门','1年以内','1-3年','3-5年','5-10年','10年以上'],
|
||||||
|
selectYearIndex:-1,
|
||||||
|
riskPreferenceList:['保守型','稳健型','保守型'],
|
||||||
|
selectRiskIndex:-1,
|
||||||
|
investmentScaleList:['50万以下','50-100万','100万以上'],
|
||||||
|
selectScaleIndex:-1,
|
||||||
|
preferredMarketList:[{title:'A股'},{title:'港股'},{title:'美股'},{title:'期货'},{title:'虚拟货币'},{title:'新兴市场'}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.avatarTop = inject('navHeight') + 60/750*inject('windowWidth')
|
||||||
|
this.contentTop = this.avatarTop + 75/750*inject('windowWidth')
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 点击选择投资偏好
|
||||||
|
* @param {Object} index
|
||||||
|
*/
|
||||||
|
clickInvestItem(index)
|
||||||
|
{
|
||||||
|
if(this.selectInvestIndex!=index)
|
||||||
|
{
|
||||||
|
this.selectInvestIndex = index
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 点击选择风险偏好
|
||||||
|
* @param {Object} index
|
||||||
|
*/
|
||||||
|
clickYearItem(index)
|
||||||
|
{
|
||||||
|
if(this.selectYearIndex!=index)
|
||||||
|
{
|
||||||
|
this.selectYearIndex = index
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 点击选择风险偏好
|
||||||
|
* @param {Object} index
|
||||||
|
*/
|
||||||
|
clickRiskItem(index)
|
||||||
|
{
|
||||||
|
if(this.selectRiskIndex!=index)
|
||||||
|
{
|
||||||
|
this.selectRiskIndex = index
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 点击选择投资规模
|
||||||
|
* @param {Object} index
|
||||||
|
*/
|
||||||
|
clickScaleItem(index)
|
||||||
|
{
|
||||||
|
if(this.selectScaleIndex!=index)
|
||||||
|
{
|
||||||
|
this.selectScaleIndex = index
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 点击选择市场偏好
|
||||||
|
* @param {Object} index
|
||||||
|
*/
|
||||||
|
clickMarketItem(index)
|
||||||
|
{
|
||||||
|
this.preferredMarketList[index].select = !this.preferredMarketList[index].select;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.topBg
|
||||||
|
{
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.avatarC
|
||||||
|
{
|
||||||
|
left: 0;
|
||||||
|
margin-left:calc((100% - 150rpx)/2);
|
||||||
|
width: 150rpx;
|
||||||
|
.avatar
|
||||||
|
{
|
||||||
|
background-color: red;
|
||||||
|
width: 100%;
|
||||||
|
height: 150rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: solid 2rpx white;
|
||||||
|
}
|
||||||
|
.icon
|
||||||
|
{
|
||||||
|
right: 20rpx;
|
||||||
|
bottom: 0;
|
||||||
|
width: 40rpx;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.preferenceC
|
||||||
|
{
|
||||||
|
background-color: white;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: calc(73rpx + 17rpx + 80rpx);
|
||||||
|
border-radius: 20rpx 20rpx 0 0;
|
||||||
|
overflow-y: scroll;
|
||||||
|
.title
|
||||||
|
{
|
||||||
|
margin: 150rpx 0 0 60rpx;
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.section
|
||||||
|
{
|
||||||
|
margin: 10rpx 60rpx 0;
|
||||||
|
line-height: 66rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.section.first
|
||||||
|
{
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
.list
|
||||||
|
{
|
||||||
|
padding: 0 60rpx;
|
||||||
|
.item
|
||||||
|
{
|
||||||
|
background-color: #FBFBFD;
|
||||||
|
margin: 0 14rpx 12rpx 0;
|
||||||
|
width: calc((100% - 28rpx)/3);
|
||||||
|
line-height: 76rpx;
|
||||||
|
border: solid 2rpx #EFEFF2;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #555;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.item.select
|
||||||
|
{
|
||||||
|
background-color: #FFE9D9;
|
||||||
|
border: solid 2rpx #F97316;
|
||||||
|
}
|
||||||
|
.item:nth-child(3n)
|
||||||
|
{
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottomC
|
||||||
|
{
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 73rpx;
|
||||||
|
margin: 0 25rpx;
|
||||||
|
|
||||||
|
.btn
|
||||||
|
{
|
||||||
|
line-height: 80rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.pre
|
||||||
|
{
|
||||||
|
background-color: #FFE9D9;
|
||||||
|
width: 226rpx;
|
||||||
|
color: #F97316;
|
||||||
|
}
|
||||||
|
.finish
|
||||||
|
{
|
||||||
|
background-color: #F97316;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
239
pages/mine/mine.vue
Normal file
@@ -0,0 +1,239 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<image class="topBg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
|
||||||
|
<view class="navTitle fixed" :style="'top:'+menuTop+'px;line-height:'+menuH+'px;'">个人中心</view>
|
||||||
|
<view class="personalInfoC relative flex" :style="'margin-top:'+infoTop+'px;'" @click="clickPersonalInfo()">
|
||||||
|
<image class="avatar" src="" mode="aspectFill"></image>
|
||||||
|
<view class="flex1">
|
||||||
|
<view class="nickname">星河滚烫的理想</view>
|
||||||
|
<view class="mobile">手机号:13654800065</view>
|
||||||
|
</view>
|
||||||
|
<image class="arrow" src="/static/icon/mine/infoArrow.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
<view class="numList relative flex">
|
||||||
|
<view class="item flex1 flexColumnCenter" @click="clickNumItem(0)">
|
||||||
|
<view class="num">1</view>
|
||||||
|
<view class="title">评论回复</view>
|
||||||
|
</view>
|
||||||
|
<view class="item flex1 flexColumnCenter" @click="clickNumItem(1)">
|
||||||
|
<view class="num">1</view>
|
||||||
|
<view class="title">关注收藏</view>
|
||||||
|
</view>
|
||||||
|
<view class="item flex1 flexColumnCenter" @click="clickNumItem(2)">
|
||||||
|
<view class="num">1</view>
|
||||||
|
<view class="title">我的点赞</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="vipC relative" @click="clickVip()">
|
||||||
|
<image class="icon" src="/static/image/mine/vipBg.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
<view class="menuList relative">
|
||||||
|
<view class="list">
|
||||||
|
<view class="item relative flex" v-for="(item,index) in menuList" :key="index" @click="clickMenuItem(item.url)" >
|
||||||
|
<image class="icon" :src="item.icon" mode="aspectFit"></image>
|
||||||
|
<view class="title flex1">{{item.title}}</view>
|
||||||
|
<image class="arrow" src="/static/icon/mine/menuArrow.png" mode="widthFix"></image>
|
||||||
|
<button class="absolute" v-if="index==menuList.length-1" open-type="contact"></button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { inject } from 'vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
menuTop:inject('menuTop'),
|
||||||
|
menuH: inject('menuHeight'),
|
||||||
|
infoTop:'',
|
||||||
|
menuList:[{
|
||||||
|
icon:'/static/icon/mine/aboutUs.png',
|
||||||
|
title:'关于我们',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon:'/static/icon/mine/serviceTerm.png',
|
||||||
|
title:'服务条款',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon:'/static/icon/mine/privacyProtocol.png',
|
||||||
|
title:'隐私协议',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon:'/static/icon/mine/feedback.png',
|
||||||
|
title:'意见反馈',
|
||||||
|
url:'/pages/mine/feedback/feedback'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon:'/static/icon/mine/accountSetting.png',
|
||||||
|
title:'账户设置',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon:'/static/icon/mine/customerService.png',
|
||||||
|
title:'联系客服',
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.infoTop = inject('navHeight')+32/750*inject('windowWidth')
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 点击查看个人信息
|
||||||
|
*/
|
||||||
|
clickPersonalInfo()
|
||||||
|
{
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pages/mine/basicInfo/basicInfo'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 点击vip
|
||||||
|
*/
|
||||||
|
clickVip()
|
||||||
|
{
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pages/mine/vip/vip'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 查看评论收藏点赞
|
||||||
|
* @param {Object} index
|
||||||
|
*/
|
||||||
|
clickNumItem(index)
|
||||||
|
{
|
||||||
|
if(index==0)
|
||||||
|
{
|
||||||
|
//评论回复
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pages/mine/commentReply/commentReply'
|
||||||
|
})
|
||||||
|
}else if(index==1)
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
clickMenuItem(url)
|
||||||
|
{
|
||||||
|
if(url)
|
||||||
|
{
|
||||||
|
uni.navigateTo({
|
||||||
|
url
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.topBg
|
||||||
|
{
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.navTitle
|
||||||
|
{
|
||||||
|
left: 0;
|
||||||
|
margin: 0 23rpx;
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.personalInfoC
|
||||||
|
{
|
||||||
|
padding: 0 25rpx 0 30rpx;
|
||||||
|
.avatar
|
||||||
|
{
|
||||||
|
margin-right: 11rpx;
|
||||||
|
width: 130rpx;
|
||||||
|
height: 130rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: solid 3rpx white;
|
||||||
|
}
|
||||||
|
.nickname
|
||||||
|
{
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.mobile
|
||||||
|
{
|
||||||
|
margin-top: 6rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #FFECD3;
|
||||||
|
}
|
||||||
|
.arrow
|
||||||
|
{
|
||||||
|
width: 15rpx;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.numList
|
||||||
|
{
|
||||||
|
.item
|
||||||
|
{
|
||||||
|
padding: 25rpx 0;
|
||||||
|
.num
|
||||||
|
{
|
||||||
|
font-size: 48rpx;
|
||||||
|
font-weight: 800;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.title
|
||||||
|
{
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #FFECD3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.vipC
|
||||||
|
{
|
||||||
|
padding: 0 25rpx;
|
||||||
|
.icon
|
||||||
|
{
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menuList
|
||||||
|
{
|
||||||
|
background-color: white;
|
||||||
|
padding: 0 25rpx;
|
||||||
|
border-radius: 20rpx 20rpx 0 0;
|
||||||
|
.item
|
||||||
|
{
|
||||||
|
height: 100rpx;
|
||||||
|
padding: 0 18rpx 0 20rpx;
|
||||||
|
border-bottom: solid 1rpx #F7F7F7;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #222;
|
||||||
|
.icon
|
||||||
|
{
|
||||||
|
margin-right: 16rpx;
|
||||||
|
width: 44rpx;
|
||||||
|
height: 44rpx;
|
||||||
|
}
|
||||||
|
.arrow
|
||||||
|
{
|
||||||
|
width: 11rpx;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
button
|
||||||
|
{
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
409
pages/mine/vip/vip.vue
Normal file
@@ -0,0 +1,409 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<navBar leftText="会员中心"></navBar>
|
||||||
|
<image class="topBg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
|
||||||
|
<view class="vipC relative" :style="'margin-top:'+navH+'px;'">
|
||||||
|
<view class="vipInfoC relative">
|
||||||
|
<image class="bg" src="/static/image/mine/vip/noVipTopBg.png" mode="widthFix"></image>
|
||||||
|
<view class="infoC absolute">
|
||||||
|
<view class="title">价值前沿</view>
|
||||||
|
<view class="tips">您还不是会员 加入尊享N项服务</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="vipProfitIntroC relative">
|
||||||
|
<view class="titleC flexCenter">
|
||||||
|
<image class="icon" src="/static/icon/mine/vip/titleLeft.png" mode="widthFix"></image>
|
||||||
|
<view class="title">即刻开启</view>
|
||||||
|
<image class="icon" src="/static/icon/mine/vip/titleRight.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
<view class="subtitle">HOW TO SUBSCRIBE</view>
|
||||||
|
<view class="stepC flex">
|
||||||
|
<view class="num">01</view>
|
||||||
|
<view class="step">点击微信顶部搜索框,并指定搜索内容为 <text class="impormant">「公众号」</text></view>
|
||||||
|
</view>
|
||||||
|
<view class="picList flex">
|
||||||
|
<view class="pic flex1">
|
||||||
|
<image class="icon" src="/static/icon/mine/vip/step1.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
<view class="pic flex1">
|
||||||
|
<image class="icon" src="/static/icon/mine/vip/step2.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="stepC flex">
|
||||||
|
<view class="num">02</view>
|
||||||
|
<view class="step">搜索<text class="impormant">「价值前沿」</text>,并点击搜索结果中的<text class="impormant">「关注」</text></view>
|
||||||
|
</view>
|
||||||
|
<view class="picList flex">
|
||||||
|
<view class="pic flex1">
|
||||||
|
<image class="icon" src="/static/icon/mine/vip/step3.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
<view class="pic flex1">
|
||||||
|
<image class="icon" src="/static/icon/mine/vip/step4.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="questionC">
|
||||||
|
<view class="title">投资的你是否遇到过这些问题?</view>
|
||||||
|
<view class="iconListC flex">
|
||||||
|
<image class="icon" src="/static/icon/mine/vip/investQuestion.png" mode="widthFix"></image>
|
||||||
|
<view class="list flex1">
|
||||||
|
<view class="item" v-for="(item,index) in questionList" :key="index">
|
||||||
|
{{item}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="titleC research flexCenter">
|
||||||
|
<image class="icon" src="/static/icon/mine/vip/titleLeft.png" mode="widthFix"></image>
|
||||||
|
<view class="title">行业研究中心</view>
|
||||||
|
<image class="icon" src="/static/icon/mine/vip/titleRight.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
<view class="subtitle">20余年专业投研,赋能每一位投资者</view>
|
||||||
|
<view class="introC">
|
||||||
|
<text class="flex1">依托价值前沿研究所深耕20余年的专业积淀,我们为您构建一站式行业研究平台。内容覆盖宏观趋势、产业结构、核心公司动态,帮助投资者看懂行业,识别机会,建立自己的知识体系。</text>
|
||||||
|
<image class="icon" src="/static/icon/mine/vip/industrialResearch.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
<view class="titleC decision flexCenter">
|
||||||
|
<image class="icon" src="/static/icon/mine/vip/titleLeft.png" mode="widthFix"></image>
|
||||||
|
<view class="title">经营决策中心</view>
|
||||||
|
<image class="icon" src="/static/icon/mine/vip/titleRight.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
<view class="subtitle">数据洞察,辅助每一个关键判断</view>
|
||||||
|
<view class="introC operatingDecision">
|
||||||
|
<text class="flex1">我们整合来自一线调研、专题报告、行业闭门会的专业数据,提供宏观到微观的全链条分析。无论是捕捉赛道拐点,还是识别公司价值,经营决策中心都是您可靠的智囊伙伴。</text>
|
||||||
|
<image class="icon" src="/static/icon/mine/vip/operatingDecision.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
<view class="titleC privilege flexCenter">
|
||||||
|
<image class="icon" src="/static/icon/mine/vip/titleLeft.png" mode="widthFix"></image>
|
||||||
|
<view class="title">会员尊享特权</view>
|
||||||
|
<image class="icon" src="/static/icon/mine/vip/titleRight.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
<view class="subtitle">数据洞察,辅助每一个关键判断</view>
|
||||||
|
<view class="privilegeList flexWrap">
|
||||||
|
<view class="item flexColumnCenter" v-for="(item,index) in privilegeList" :key="index">
|
||||||
|
<image class="icon" :src="item.icon" mode="widthFix"></image>
|
||||||
|
<view class="title">{{item.title}}</view>
|
||||||
|
<view class="tips">{{item.tips}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="bottomTitle">准备好提升您的投资策略了吗?</view>
|
||||||
|
<view class="bottomTips"> 解锁全部高级功能,让AI成为您的专属投资顾问。</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="lookMealC fixed" @click="clickVipMeal()">查看VIP套餐</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { inject } from 'vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
navH:inject('navHeight'),
|
||||||
|
questionList:['信息纷杂难辨真伪?','信息纷杂难辨真伪?','无法把握宏观趋势与行业动向?'],
|
||||||
|
privilegeList:[{
|
||||||
|
icon:'/static/icon/mine/vip/depthReport.png',
|
||||||
|
title:'深度研报',
|
||||||
|
tips:'行业/公司独家分析'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon:'/static/icon/mine/vip/strategicInsight.png',
|
||||||
|
title:'策略洞察',
|
||||||
|
tips:'赛道趋势+拐点信号'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon:'/static/icon/mine/vip/dataTool.png',
|
||||||
|
title:'数据工具',
|
||||||
|
tips:'行业/公司独家分析'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon:'/static/icon/mine/vip/dataTool.png',
|
||||||
|
title:'智能筛选',
|
||||||
|
tips:'按需定制标的列表'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon:'/static/icon/mine/vip/decisionSupport.png',
|
||||||
|
title:'决策辅助',
|
||||||
|
tips:'关键因子评分系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon:'/static/icon/mine/vip/expertMeeting.png',
|
||||||
|
title:'专家闭门会',
|
||||||
|
tips:'深度交流机会'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon:'/static/icon/mine/vip/dailyReport.png',
|
||||||
|
title:'日报周报',
|
||||||
|
tips:'研判速递、节奏掌控'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon:'/static/icon/mine/vip/specialColumn.png',
|
||||||
|
title:'专题专栏',
|
||||||
|
tips:'核心团队观点集结'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon:'/static/icon/mine/vip/continuouslyUnlock.png',
|
||||||
|
title:'持续解锁',
|
||||||
|
tips:'不定期上线新功能'
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 点击查看vip套餐
|
||||||
|
*/
|
||||||
|
clickVipMeal()
|
||||||
|
{
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pages/mine/vipMeal/vipMeal'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.topBg
|
||||||
|
{
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.vipC
|
||||||
|
{
|
||||||
|
padding-bottom: calc(180rpx + env(safe-area-inset-bottom));
|
||||||
|
.vipInfoC
|
||||||
|
{
|
||||||
|
margin: 0 25rpx;
|
||||||
|
.bg
|
||||||
|
{
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.infoC
|
||||||
|
{
|
||||||
|
top: 130rpx;
|
||||||
|
left: 38rpx;
|
||||||
|
.title
|
||||||
|
{
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #556B87;
|
||||||
|
}
|
||||||
|
.tips
|
||||||
|
{
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #65758A;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.vipProfitIntroC
|
||||||
|
{
|
||||||
|
background-color: white;
|
||||||
|
margin-top: -70rpx;
|
||||||
|
padding-top: 40rpx;
|
||||||
|
border-radius: 20rpx 20rpx 0 0;
|
||||||
|
.titleC
|
||||||
|
{
|
||||||
|
.icon
|
||||||
|
{
|
||||||
|
width: 54rpx;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.title
|
||||||
|
{
|
||||||
|
margin: 0 20rpx;
|
||||||
|
font-size: 50rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.titleC.research
|
||||||
|
{
|
||||||
|
margin-top: 50rpx;
|
||||||
|
}
|
||||||
|
.titleC.decision
|
||||||
|
{
|
||||||
|
margin-top: 30rpx;
|
||||||
|
}
|
||||||
|
.titleC.privilege
|
||||||
|
{
|
||||||
|
margin-top: 40rpx;
|
||||||
|
}
|
||||||
|
.subtitle
|
||||||
|
{
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #888;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.stepC
|
||||||
|
{
|
||||||
|
margin: 16rpx 25rpx 0;
|
||||||
|
.num
|
||||||
|
{
|
||||||
|
background-color: #EDEEF1;
|
||||||
|
margin-right: 25rpx;
|
||||||
|
width: 50rpx;
|
||||||
|
line-height: 50rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #5C6473;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.step
|
||||||
|
{
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #5C6473;
|
||||||
|
.impormant
|
||||||
|
{
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.picList
|
||||||
|
{
|
||||||
|
padding: 0 25rpx;
|
||||||
|
margin-top: 34rpx;
|
||||||
|
.pic
|
||||||
|
{
|
||||||
|
margin-right: 20rpx;
|
||||||
|
.icon
|
||||||
|
{
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pic:last-child
|
||||||
|
{
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.questionC
|
||||||
|
{
|
||||||
|
margin-top: 40rpx;
|
||||||
|
.title
|
||||||
|
{
|
||||||
|
font-size: 45rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #222;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.iconListC
|
||||||
|
{
|
||||||
|
margin-top: 46rpx;
|
||||||
|
padding: 0 23rpx 0 59rpx;
|
||||||
|
.icon
|
||||||
|
{
|
||||||
|
margin-right: 56rpx;
|
||||||
|
width: 235rpx;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.list
|
||||||
|
{
|
||||||
|
.item
|
||||||
|
{
|
||||||
|
background-color: #EDEDED;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
line-height: 70rpx;
|
||||||
|
border-radius: 35rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #555;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.introC
|
||||||
|
{
|
||||||
|
display: flex;
|
||||||
|
box-shadow: 0px 0px 9rpx 0px rgba(0,0,0,0.1);
|
||||||
|
margin: 24rpx 25rpx 0;
|
||||||
|
padding: 40rpx 20rpx 20rpx 33rpx;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #555;
|
||||||
|
.icon
|
||||||
|
{
|
||||||
|
margin-top: 92rpx;
|
||||||
|
width: 251rpx;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.introC.operatingDecision
|
||||||
|
{
|
||||||
|
padding-bottom: 11rpx;
|
||||||
|
.icon
|
||||||
|
{
|
||||||
|
margin-top: 116rpx;
|
||||||
|
width: 249rpx;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.privilegeList
|
||||||
|
{
|
||||||
|
margin: 24rpx 25rpx 0;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
box-shadow: 0px 0px 9rpx 0px rgba(0,0,0,0.1);
|
||||||
|
border-radius: 10rpx;
|
||||||
|
.item
|
||||||
|
{
|
||||||
|
padding: 20rpx 0;
|
||||||
|
width: calc((100%)/3);
|
||||||
|
.icon
|
||||||
|
{
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
width: 91rpx;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.title
|
||||||
|
{
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #242323;
|
||||||
|
}
|
||||||
|
.tips
|
||||||
|
{
|
||||||
|
margin-top: 6rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottomTitle
|
||||||
|
{
|
||||||
|
margin-top: 80rpx;
|
||||||
|
font-size: 45rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #222;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.bottomTips
|
||||||
|
{
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #888;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.lookMealC
|
||||||
|
{
|
||||||
|
background-color: #F97316;
|
||||||
|
margin: 0 25rpx;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||||
|
line-height: 80rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
224
pages/mine/vipMeal/vipMeal.vue
Normal file
@@ -0,0 +1,224 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<navBar leftText="会员中心"></navBar>
|
||||||
|
<image class="topBg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
|
||||||
|
<view class="vipC" :style="'margin-top:'+navH+'px;'">
|
||||||
|
<view class="vipInfoC relative">
|
||||||
|
<image class="bg" src="/static/image/mine/vip/noVipTopBg.png" mode="widthFix"></image>
|
||||||
|
<view class="infoC absolute">
|
||||||
|
<view class="title">价值前沿</view>
|
||||||
|
<view class="tips">您还不是会员 加入尊享N项服务</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="privilegeCompareC relative">
|
||||||
|
<view class="titleC flexCenter">
|
||||||
|
<image class="icon" src="/static/icon/mine/vip/titleLeft.png" mode="widthFix"></image>
|
||||||
|
<view class="title">特权对比</view>
|
||||||
|
<image class="icon" src="/static/icon/mine/vip/titleRight.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
<view class="privilegeList">
|
||||||
|
<view class="header flex">
|
||||||
|
<view class="privilege item">专属特权</view>
|
||||||
|
<view class="item free">普通免费</view>
|
||||||
|
<view class="item vip">VIP会员</view>
|
||||||
|
</view>
|
||||||
|
<view class="list">
|
||||||
|
<view class="item flex" v-for="(item,index) in privilegeList" :key="index">
|
||||||
|
<view class="optionItem privilege flex">{{item}}</view>
|
||||||
|
<view class="optionItem free flexCenter">
|
||||||
|
<block v-if="index==0||index==1||index==2">
|
||||||
|
<image class="notContain" src="/static/icon/mine/vip/notContain.png" mode="widthFix"></image>
|
||||||
|
</block>
|
||||||
|
<block v-if="index==3||index==4">
|
||||||
|
<block v-if="index==3">限制查看数量</block>
|
||||||
|
<block v-if="index==4">每日查看2只</block>
|
||||||
|
</block>
|
||||||
|
<block v-if="index==5||index==6">
|
||||||
|
<image class="contain" src="/static/icon/mine/vip/contain.png" mode="widthFix"></image>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
<view class="optionItem vip flexCenter">
|
||||||
|
<image class="contain" src="/static/icon/mine/vip/contain.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="joinVipC fixed" @click="clickJoinVip()">立即加入年度VIP</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { inject } from 'vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
navH:inject('navHeight'),
|
||||||
|
privilegeList:['高效选股工具','股票基金明星榜单','定期专属晨报、股票动态','独家产业研报','个股产业分析','股票、基金基础指标','7x24 财经直播']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 点击加入vip
|
||||||
|
*/
|
||||||
|
clickJoinVip()
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.topBg
|
||||||
|
{
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.vipC
|
||||||
|
{
|
||||||
|
padding-bottom: calc(180rpx + env(safe-area-inset-bottom));
|
||||||
|
.vipInfoC
|
||||||
|
{
|
||||||
|
margin: 0 25rpx;
|
||||||
|
.bg
|
||||||
|
{
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.infoC
|
||||||
|
{
|
||||||
|
top: 130rpx;
|
||||||
|
left: 38rpx;
|
||||||
|
.title
|
||||||
|
{
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #556B87;
|
||||||
|
}
|
||||||
|
.tips
|
||||||
|
{
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #65758A;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.privilegeCompareC
|
||||||
|
{
|
||||||
|
background-color: white;
|
||||||
|
margin-top: -70rpx;
|
||||||
|
padding-top: 40rpx;
|
||||||
|
border-radius: 20rpx 20rpx 0 0;
|
||||||
|
.titleC
|
||||||
|
{
|
||||||
|
.icon
|
||||||
|
{
|
||||||
|
width: 54rpx;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.title
|
||||||
|
{
|
||||||
|
margin: 0 20rpx;
|
||||||
|
font-size: 50rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.privilegeList
|
||||||
|
{
|
||||||
|
margin: 0 25rpx;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.1);
|
||||||
|
border-radius: 10rpx;
|
||||||
|
.header
|
||||||
|
{
|
||||||
|
margin-top: 50rpx;
|
||||||
|
padding-top: 14rpx;
|
||||||
|
border-bottom: solid 1rpx #F3F4F6;
|
||||||
|
.item
|
||||||
|
{
|
||||||
|
line-height: 90rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
.item.privilege
|
||||||
|
{
|
||||||
|
padding-left: 24rpx;
|
||||||
|
width: 300rpx;
|
||||||
|
}
|
||||||
|
.item.free
|
||||||
|
{
|
||||||
|
width: 174rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.item.vip
|
||||||
|
{
|
||||||
|
width: 160rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.list
|
||||||
|
{
|
||||||
|
.item
|
||||||
|
{
|
||||||
|
.optionItem
|
||||||
|
{
|
||||||
|
height: 90rpx;
|
||||||
|
border-bottom: solid 1rpx #F3F4F6;
|
||||||
|
.contain
|
||||||
|
{
|
||||||
|
width: 21rpx;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.notContain
|
||||||
|
{
|
||||||
|
width: 17rpx;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.optionItem.privilege
|
||||||
|
{
|
||||||
|
width: 300rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
.optionItem.free
|
||||||
|
{
|
||||||
|
width: 174rpx;
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #555;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.optionItem.vip
|
||||||
|
{
|
||||||
|
width: 160rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.joinVipC
|
||||||
|
{
|
||||||
|
background-color: #F97316;
|
||||||
|
margin: 0 25rpx;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||||
|
line-height: 80rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
299
request/api.js
Normal file
@@ -0,0 +1,299 @@
|
|||||||
|
// api接口统一管理
|
||||||
|
import { get, post } from './http.js'
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 发送短信
|
||||||
|
*/
|
||||||
|
export const sendSMS = param => post('/api/v1/sms/send',param)
|
||||||
|
/**
|
||||||
|
* 单页信息
|
||||||
|
*/
|
||||||
|
export const singleWeb = param => post('/api/v1/html/info_text',param)
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 授权登录
|
||||||
|
*/
|
||||||
|
export const login = param => post('/login',param)
|
||||||
|
/**
|
||||||
|
* 抖音授权登录
|
||||||
|
*/
|
||||||
|
export const register = param => post('/register',param)
|
||||||
|
/**
|
||||||
|
* 授权手机号
|
||||||
|
*/
|
||||||
|
export const getPhone = param => post('/api/v1/setting/set_phone',param)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 行业分类列表
|
||||||
|
*/
|
||||||
|
export const industryCategoryList = param => get('/api/industry-classifications',param)
|
||||||
|
/**
|
||||||
|
* 事件列表
|
||||||
|
*/
|
||||||
|
export const eventList = param => get('/api/events',param)
|
||||||
|
/**
|
||||||
|
* 时间筛选项
|
||||||
|
*/
|
||||||
|
export const eventFilterList = param => get('/api/events/filters',param)
|
||||||
|
/**
|
||||||
|
* 事件详情
|
||||||
|
*/
|
||||||
|
export const eventDetails = id => get('/event/'+id,)
|
||||||
|
/**
|
||||||
|
* 事件添加关注
|
||||||
|
*/
|
||||||
|
export const followeEvent = id => get('/event/'+id)
|
||||||
|
/**
|
||||||
|
* 评论事件
|
||||||
|
*/
|
||||||
|
export const commentEvent = (id,param) => post('/post/create/'+id,param)
|
||||||
|
/**
|
||||||
|
* 点赞事件评论
|
||||||
|
*/
|
||||||
|
export const likeEventComment = id => post('/post/like/'+id)
|
||||||
|
/**
|
||||||
|
* 评论评论
|
||||||
|
*/
|
||||||
|
export const commentComment = id => post('/post/comment/'+id)
|
||||||
|
/**
|
||||||
|
* 事件评论列表
|
||||||
|
*/
|
||||||
|
export const eventCommentList = id => post('/post/comments/'+id)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 确认服务订单
|
||||||
|
*/
|
||||||
|
export const confirmServiceOrder = param => post('/api/v1/service/order/check_order',param)
|
||||||
|
/**
|
||||||
|
* 添加服务购物车
|
||||||
|
*/
|
||||||
|
export const addToShoppingCart = param => post('/api/v1/service/add_cart',param)
|
||||||
|
/**
|
||||||
|
* 服务购物车列表
|
||||||
|
*/
|
||||||
|
export const shoppingCartList = param => post('/api/v1/service/cart_list',param)
|
||||||
|
/**
|
||||||
|
* 服务购物车设置优惠券
|
||||||
|
*/
|
||||||
|
export const shoppingCartCoupon = param => post('/api/v1/service/set_coupon',param)
|
||||||
|
/**
|
||||||
|
* 修改服务购物车数量
|
||||||
|
*/
|
||||||
|
export const updateShoppingCartNum = param => post('/api/v1/service/cart_edit',param)
|
||||||
|
/**
|
||||||
|
* 服务下单
|
||||||
|
*/
|
||||||
|
export const createServiceOrder = param => post('/api/v1/service/order/appointment',param)
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取某一天的事件列表
|
||||||
|
*/
|
||||||
|
export const calendarEventList = param => get('/api/calendar-events',param)
|
||||||
|
/**
|
||||||
|
* 投资时间详情
|
||||||
|
*/
|
||||||
|
export const investEventDetails = (id,param) => get('/event/'+id,param)
|
||||||
|
/**
|
||||||
|
* 获取当前月的每一天的时间数量
|
||||||
|
*/
|
||||||
|
export const calendarEventCount = param => get('/api/calendar-event-counts',param)
|
||||||
|
/**
|
||||||
|
* 商品列表
|
||||||
|
*/
|
||||||
|
export const goodsList = param => post('/api/v1/goods/index',param)
|
||||||
|
/**
|
||||||
|
* 商品来源
|
||||||
|
*/
|
||||||
|
export const goodsSourceList = param => post('/api/v1/goods/goods_source',param)
|
||||||
|
/**
|
||||||
|
* 商品详情
|
||||||
|
*/
|
||||||
|
export const goodsDetails = param => post('/api/v1/goods/detail',param)
|
||||||
|
/**
|
||||||
|
* 商品规格价格信息
|
||||||
|
*/
|
||||||
|
export const goodsSpecPriceInfo = param => post('/api/v1/goods/specifications',param)
|
||||||
|
/**
|
||||||
|
* 商品立即购买
|
||||||
|
*/
|
||||||
|
export const goodsPurchase = param => post('/api/v1/goods/order/place_orders',param)
|
||||||
|
/**
|
||||||
|
* 商品订单支付
|
||||||
|
*/
|
||||||
|
export const goodsOrderPay = param => post('/api/v1/goods/order/pay_goods_order',param)
|
||||||
|
/**
|
||||||
|
* 商品订单列表
|
||||||
|
*/
|
||||||
|
export const goodsOrderList = param => post('/api/v1/goods/order/order_list',param)
|
||||||
|
/**
|
||||||
|
* 商品订单详情
|
||||||
|
*/
|
||||||
|
export const goodsOrderDetails = param => post('/api/v1/goods/order/order_detail',param)
|
||||||
|
/**
|
||||||
|
* 确认收货
|
||||||
|
*/
|
||||||
|
export const goodsConfirmReceipt = param => post('/api/v1/goods/order/take_order',param)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 修改密码
|
||||||
|
*/
|
||||||
|
export const updatePassword = param => post('/applet/usercent/savecode',param)
|
||||||
|
/**
|
||||||
|
* 我的收藏
|
||||||
|
*/
|
||||||
|
export const myCollect = param => post('/applet/usercent/getSc',param)
|
||||||
|
/**
|
||||||
|
* 我的地址
|
||||||
|
*/
|
||||||
|
export const myAddress = param => post('/api/v1/address/index',param)
|
||||||
|
/**
|
||||||
|
* 新增地址
|
||||||
|
*/
|
||||||
|
export const addAddress = param => post('/api/v1/address/create',param)
|
||||||
|
/**
|
||||||
|
* 修改地址
|
||||||
|
*/
|
||||||
|
export const updateAddress = param => post('/api/v1/address/update',param)
|
||||||
|
/**
|
||||||
|
* 删除地址
|
||||||
|
*/
|
||||||
|
export const deleteAddress = param => post('/api/v1/address/delete',param)
|
||||||
|
/**
|
||||||
|
* 地址详情
|
||||||
|
*/
|
||||||
|
export const addressDetails = param => post('/api/v1/address/view',param)
|
||||||
|
/**
|
||||||
|
* 我的默认地址
|
||||||
|
*/
|
||||||
|
export const myDefaultAddress = param => post('/api/v1/address/my_default',param)
|
||||||
|
/**
|
||||||
|
* 用户信息
|
||||||
|
*/
|
||||||
|
export const userInfo = param => post('/api/v1/my/info',param)
|
||||||
|
/**
|
||||||
|
* 编辑用户信息
|
||||||
|
*/
|
||||||
|
export const updateUserInfo = param => post('/api/v1/setting/edit_info',param)
|
||||||
|
/**
|
||||||
|
* 投诉建议类型
|
||||||
|
*/
|
||||||
|
export const complaintType = param => post('/api/v1/my/feedback_type',param)
|
||||||
|
/**
|
||||||
|
* 投诉建议
|
||||||
|
*/
|
||||||
|
export const complaintSuggest = param => post('/api/v1/my/send_feedback',param)
|
||||||
|
/**
|
||||||
|
* 兑换储值卡
|
||||||
|
*/
|
||||||
|
export const exchangeCard = param => post('/api/v1/my/exchange_card',param)
|
||||||
|
/**
|
||||||
|
* 领取优惠券
|
||||||
|
*/
|
||||||
|
export const couponList = param => post('/api/v1/coupon/index',param)
|
||||||
|
/**
|
||||||
|
* 领取优惠券
|
||||||
|
*/
|
||||||
|
export const getCoupon = param => post('/api/v1/coupon/receive',param)
|
||||||
|
/**
|
||||||
|
* 我的优惠券
|
||||||
|
*/
|
||||||
|
export const myCoupon = param => post('/api/v1/coupon/my_coupon',param)
|
||||||
|
/**
|
||||||
|
* 申请认证
|
||||||
|
*/
|
||||||
|
export const applyAuthentication = param => post('/api/v1/my/apply_certification',param)
|
||||||
|
/**
|
||||||
|
* 充值金额
|
||||||
|
*/
|
||||||
|
export const rechargeAmount = param => post('/api/v1/recharge/index',param)
|
||||||
|
/**
|
||||||
|
* 创建充值订单
|
||||||
|
*/
|
||||||
|
export const createRechargeOrder = param => post('/api/v1/recharge/create_order',param)
|
||||||
|
/**
|
||||||
|
* 余额明细
|
||||||
|
*/
|
||||||
|
export const balanceRecord = param => post('/api/v1/my/money_detail',param)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 取消服务订单
|
||||||
|
*/
|
||||||
|
export const cancelServiceOrder = param => post('/api/v1/service/order/cancel',param)
|
||||||
|
/**
|
||||||
|
* 服务订单支付
|
||||||
|
*/
|
||||||
|
export const serviceOrderPay = param => post('/api/v1/service/order/pay_service_order',param)
|
||||||
|
/**
|
||||||
|
* 服务订单列表
|
||||||
|
*/
|
||||||
|
export const serviceOrderList = param => post('/api/v1/service/order/olst',param)
|
||||||
|
/**
|
||||||
|
* 服务订单详情
|
||||||
|
*/
|
||||||
|
export const serviceOrderDetails = param => post('/api/v1/service/order/odetail',param)
|
||||||
|
/**
|
||||||
|
* 服务订单评价
|
||||||
|
*/
|
||||||
|
export const serviceOrderEvaluate = param => post('/api/v1/service/order/send_evaluate',param)
|
||||||
|
/**
|
||||||
|
* 服务订单申请退款
|
||||||
|
*/
|
||||||
|
export const serviceOrderRefund = param => post('/api/v1/service/order/apply_refund',param)
|
||||||
|
/**
|
||||||
|
* 可退款服务订单列表
|
||||||
|
*/
|
||||||
|
export const canRefundServiceOrderList = param => post('/api/v1/service/order/order_sn_lst',param)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 修改投资偏好
|
||||||
|
*/
|
||||||
|
export const updateInvestmentPreferences = param => post('/settings/investment_preferences',param)
|
||||||
|
/**
|
||||||
|
* 佣金记录
|
||||||
|
*/
|
||||||
|
export const commissionRecord = param => post('/api/v1/distribution/commission_log',param)
|
||||||
|
/**
|
||||||
|
* 提现
|
||||||
|
*/
|
||||||
|
export const withdraw = param => post('/api/v1/distribution/apply_withdrawal',param)
|
||||||
|
/**
|
||||||
|
* 提现记录
|
||||||
|
*/
|
||||||
|
export const withdrawRecord = param => post('/api/v1/distribution/apply_log',param)
|
||||||
|
/**
|
||||||
|
* 地址配置
|
||||||
|
*/
|
||||||
|
export const addressConfig = param => post('/api/v1/address/basic_param',param)
|
||||||
|
/**
|
||||||
|
* 申请成为分销商
|
||||||
|
*/
|
||||||
|
export const applyDistributor = param => post('/api/v2/distribution/apply',param)
|
||||||
|
/**
|
||||||
|
* 提现方式
|
||||||
|
*/
|
||||||
|
export const withdrawWay = param => post('/api/v1/distribution/withdrawal_way',param)
|
||||||
|
/**
|
||||||
|
* 团队订单
|
||||||
|
*/
|
||||||
|
export const teamOrderList = param => post('/api/v1/distribution/team_order',param)
|
||||||
|
/**
|
||||||
|
* 分销商排行
|
||||||
|
*/
|
||||||
|
export const distributorRankList = param => post('/api/v1/distribution/ranking',param)
|
||||||
|
/**
|
||||||
|
* 分销码和背景
|
||||||
|
*/
|
||||||
|
export const shareCode = param => post('/api/v1/my/my_qr_code',param)
|
||||||
|
/**
|
||||||
|
* 手续费比例
|
||||||
|
*/
|
||||||
|
export const feeRatio = param => post('/api/v1/ajax/web_config',param)
|
||||||
|
/**
|
||||||
|
* 绑定上级
|
||||||
|
*/
|
||||||
|
export const bindSuperiors = param => post('/api/v1/my/bind_top',param)
|
||||||
103
request/http.js
Normal file
@@ -0,0 +1,103 @@
|
|||||||
|
|
||||||
|
let baseURL = ''
|
||||||
|
|
||||||
|
if (process.env.NODE_ENV==='development') {
|
||||||
|
// baseURL = 'https://admin.zleniao.com'
|
||||||
|
baseURL = 'https://app.valuefrontier.cn'
|
||||||
|
} else{
|
||||||
|
// baseURL = 'https://admin.zleniao.com'
|
||||||
|
baseURL = 'https://app.valuefrontier.cn'
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getBaseURL() {
|
||||||
|
return baseURL
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* get方法,对应get请求
|
||||||
|
* @param {String} url [请求的url地址]
|
||||||
|
* @param {Object} params [请求时携带的参数]
|
||||||
|
*/
|
||||||
|
export function get(url, params){
|
||||||
|
return new Promise((resolve, reject) =>{
|
||||||
|
let token = uni.getStorageSync('token')
|
||||||
|
uni.request({
|
||||||
|
url:baseURL+url,
|
||||||
|
data:params,
|
||||||
|
header:{
|
||||||
|
'Accept':'application/json',
|
||||||
|
'Content-Type':'application/x-www-form-urlencoded',
|
||||||
|
'token':token?token:''
|
||||||
|
},
|
||||||
|
method:"GET",
|
||||||
|
success:(response) =>{
|
||||||
|
console.log(response)
|
||||||
|
if (response.data.code==-200) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pages/login/login',
|
||||||
|
})
|
||||||
|
} else{
|
||||||
|
resolve(response.data)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail:(error) =>{
|
||||||
|
reject(error.response)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* post方法,对应post请求
|
||||||
|
* @param {String} url [请求的url地址]
|
||||||
|
* @param {Object} params [请求时携带的参数]
|
||||||
|
*/
|
||||||
|
export function post(url, params) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
let token = uni.getStorageSync('token')
|
||||||
|
let isJson = 0
|
||||||
|
if(params)
|
||||||
|
{
|
||||||
|
isJson = params.isJson
|
||||||
|
}
|
||||||
|
uni.request({
|
||||||
|
url:baseURL+url,
|
||||||
|
data:params,
|
||||||
|
header:{
|
||||||
|
'Accept':'application/json',
|
||||||
|
'Content-Type':isJson?'application/json':'application/x-www-form-urlencoded',
|
||||||
|
'token':token?token:''
|
||||||
|
},
|
||||||
|
method:"POST",
|
||||||
|
success:(response) =>{
|
||||||
|
console.log(JSON.parse(JSON.stringify(response)))
|
||||||
|
if(response.header.token&&!params.isNotSaveToken)
|
||||||
|
{
|
||||||
|
uni.setStorageSync('token',response.header.token)
|
||||||
|
}
|
||||||
|
if (params&¶ms.isNotNeedLogin) {
|
||||||
|
|
||||||
|
}else
|
||||||
|
{
|
||||||
|
if (response.data.code==-200) {
|
||||||
|
uni.removeStorageSync('token')
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pages/login/login'
|
||||||
|
})
|
||||||
|
reject(response.data)
|
||||||
|
} else{
|
||||||
|
resolve(response.data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail:(error) =>{
|
||||||
|
uni.showToast({
|
||||||
|
title:'网络请求失败',
|
||||||
|
icon:'none'
|
||||||
|
})
|
||||||
|
reject(error.response)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
BIN
static/icon/back.png
Normal file
|
After Width: | Height: | Size: 432 B |
BIN
static/icon/backBlack.png
Normal file
|
After Width: | Height: | Size: 495 B |
BIN
static/icon/home/browser.png
Normal file
|
After Width: | Height: | Size: 2.8 KiB |
BIN
static/icon/home/close.png
Normal file
|
After Width: | Height: | Size: 1013 B |
BIN
static/icon/home/comment.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
static/icon/home/commentArrow.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
static/icon/home/downArrow.png
Normal file
|
After Width: | Height: | Size: 497 B |
BIN
static/icon/home/follow.png
Normal file
|
After Width: | Height: | Size: 2.3 KiB |
BIN
static/icon/home/hot.png
Normal file
|
After Width: | Height: | Size: 1.9 KiB |
BIN
static/icon/home/like.png
Normal file
|
After Width: | Height: | Size: 3.2 KiB |
BIN
static/icon/home/like_s.png
Normal file
|
After Width: | Height: | Size: 1.4 KiB |
BIN
static/icon/home/monthLeftArrow.png
Normal file
|
After Width: | Height: | Size: 234 B |
BIN
static/icon/home/monthRightArrow.png
Normal file
|
After Width: | Height: | Size: 635 B |
BIN
static/icon/home/new.png
Normal file
|
After Width: | Height: | Size: 1.9 KiB |
BIN
static/icon/home/screen.png
Normal file
|
After Width: | Height: | Size: 2.3 KiB |
BIN
static/icon/home/search.png
Normal file
|
After Width: | Height: | Size: 2.2 KiB |
BIN
static/icon/home/sort.png
Normal file
|
After Width: | Height: | Size: 1.8 KiB |
BIN
static/icon/home/sortArrow.png
Normal file
|
After Width: | Height: | Size: 277 B |
BIN
static/icon/home/upArrow.png
Normal file
|
After Width: | Height: | Size: 506 B |
BIN
static/icon/home/yield.png
Normal file
|
After Width: | Height: | Size: 1.6 KiB |
BIN
static/icon/invest/calendar.png
Normal file
|
After Width: | Height: | Size: 3.6 KiB |
BIN
static/icon/invest/downArrow.png
Normal file
|
After Width: | Height: | Size: 775 B |
BIN
static/icon/invest/star.png
Normal file
|
After Width: | Height: | Size: 2.1 KiB |
BIN
static/icon/invest/star_s.png
Normal file
|
After Width: | Height: | Size: 1.4 KiB |
BIN
static/icon/mine/aboutUs.png
Normal file
|
After Width: | Height: | Size: 2.2 KiB |
BIN
static/icon/mine/accountSetting.png
Normal file
|
After Width: | Height: | Size: 4.9 KiB |
BIN
static/icon/mine/basicInfo/downArrow.png
Normal file
|
After Width: | Height: | Size: 675 B |
BIN
static/icon/mine/basicInfo/edit.png
Normal file
|
After Width: | Height: | Size: 6.9 KiB |
BIN
static/icon/mine/customerService.png
Normal file
|
After Width: | Height: | Size: 3.7 KiB |
BIN
static/icon/mine/feedback.png
Normal file
|
After Width: | Height: | Size: 2.1 KiB |
BIN
static/icon/mine/infoArrow.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
static/icon/mine/menuArrow.png
Normal file
|
After Width: | Height: | Size: 982 B |
BIN
static/icon/mine/privacyProtocol.png
Normal file
|
After Width: | Height: | Size: 2.3 KiB |
BIN
static/icon/mine/serviceTerm.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
static/icon/mine/vip/contain.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
static/icon/mine/vip/continuouslyUnlock.png
Normal file
|
After Width: | Height: | Size: 13 KiB |
BIN
static/icon/mine/vip/dailyReport.png
Normal file
|
After Width: | Height: | Size: 12 KiB |
BIN
static/icon/mine/vip/dataTool.png
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
static/icon/mine/vip/decisionSupport.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
static/icon/mine/vip/depthReport.png
Normal file
|
After Width: | Height: | Size: 12 KiB |
BIN
static/icon/mine/vip/expertMeeting.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
static/icon/mine/vip/industrialResearch.png
Normal file
|
After Width: | Height: | Size: 38 KiB |
BIN
static/icon/mine/vip/investQuestion.png
Normal file
|
After Width: | Height: | Size: 26 KiB |
BIN
static/icon/mine/vip/notContain.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
static/icon/mine/vip/operatingDecision.png
Normal file
|
After Width: | Height: | Size: 37 KiB |
BIN
static/icon/mine/vip/specialColumn.png
Normal file
|
After Width: | Height: | Size: 13 KiB |
BIN
static/icon/mine/vip/step1.png
Normal file
|
After Width: | Height: | Size: 26 KiB |
BIN
static/icon/mine/vip/step2.png
Normal file
|
After Width: | Height: | Size: 70 KiB |
BIN
static/icon/mine/vip/step3.png
Normal file
|
After Width: | Height: | Size: 46 KiB |
BIN
static/icon/mine/vip/step4.png
Normal file
|
After Width: | Height: | Size: 94 KiB |
BIN
static/icon/mine/vip/strategicInsight.png
Normal file
|
After Width: | Height: | Size: 13 KiB |
BIN
static/icon/mine/vip/titleLeft.png
Normal file
|
After Width: | Height: | Size: 5.9 KiB |
BIN
static/icon/mine/vip/titleRight.png
Normal file
|
After Width: | Height: | Size: 5.5 KiB |
BIN
static/icon/tabbar/home.png
Normal file
|
After Width: | Height: | Size: 2.3 KiB |
BIN
static/icon/tabbar/home_s.png
Normal file
|
After Width: | Height: | Size: 2.1 KiB |
BIN
static/icon/tabbar/invest.png
Normal file
|
After Width: | Height: | Size: 3.1 KiB |
BIN
static/icon/tabbar/invest_s.png
Normal file
|
After Width: | Height: | Size: 3.8 KiB |
BIN
static/icon/tabbar/mine.png
Normal file
|
After Width: | Height: | Size: 4.1 KiB |
BIN
static/icon/tabbar/mine_s.png
Normal file
|
After Width: | Height: | Size: 2.3 KiB |
BIN
static/image/mine/myTopBg.png
Normal file
|
After Width: | Height: | Size: 1.0 MiB |
BIN
static/image/mine/vip/noVipTopBg.png
Normal file
|
After Width: | Height: | Size: 122 KiB |
BIN
static/image/mine/vip/vipTopBg.png
Normal file
|
After Width: | Height: | Size: 164 KiB |
BIN
static/image/mine/vipBg.png
Normal file
|
After Width: | Height: | Size: 138 KiB |
13
uni.promisify.adaptor.js
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
uni.addInterceptor({
|
||||||
|
returnValue (res) {
|
||||||
|
if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) {
|
||||||
|
return res;
|
||||||
|
}
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
res.then((res) => {
|
||||||
|
if (!res) return resolve(res)
|
||||||
|
return res[0] ? reject(res[0]) : resolve(res[1])
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
76
uni.scss
Normal file
@@ -0,0 +1,76 @@
|
|||||||
|
/**
|
||||||
|
* 这里是uni-app内置的常用样式变量
|
||||||
|
*
|
||||||
|
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||||
|
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||||
|
*
|
||||||
|
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* 颜色变量 */
|
||||||
|
|
||||||
|
/* 行为相关颜色 */
|
||||||
|
$uni-color-primary: #007aff;
|
||||||
|
$uni-color-success: #4cd964;
|
||||||
|
$uni-color-warning: #f0ad4e;
|
||||||
|
$uni-color-error: #dd524d;
|
||||||
|
|
||||||
|
/* 文字基本颜色 */
|
||||||
|
$uni-text-color:#333;//基本色
|
||||||
|
$uni-text-color-inverse:#fff;//反色
|
||||||
|
$uni-text-color-grey:#999;//辅助灰色,如加载更多的提示信息
|
||||||
|
$uni-text-color-placeholder: #808080;
|
||||||
|
$uni-text-color-disable:#c0c0c0;
|
||||||
|
|
||||||
|
/* 背景颜色 */
|
||||||
|
$uni-bg-color:#ffffff;
|
||||||
|
$uni-bg-color-grey:#f8f8f8;
|
||||||
|
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
|
||||||
|
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
|
||||||
|
|
||||||
|
/* 边框颜色 */
|
||||||
|
$uni-border-color:#c8c7cc;
|
||||||
|
|
||||||
|
/* 尺寸变量 */
|
||||||
|
|
||||||
|
/* 文字尺寸 */
|
||||||
|
$uni-font-size-sm:12px;
|
||||||
|
$uni-font-size-base:14px;
|
||||||
|
$uni-font-size-lg:16px;
|
||||||
|
|
||||||
|
/* 图片尺寸 */
|
||||||
|
$uni-img-size-sm:20px;
|
||||||
|
$uni-img-size-base:26px;
|
||||||
|
$uni-img-size-lg:40px;
|
||||||
|
|
||||||
|
/* Border Radius */
|
||||||
|
$uni-border-radius-sm: 2px;
|
||||||
|
$uni-border-radius-base: 3px;
|
||||||
|
$uni-border-radius-lg: 6px;
|
||||||
|
$uni-border-radius-circle: 50%;
|
||||||
|
|
||||||
|
/* 水平间距 */
|
||||||
|
$uni-spacing-row-sm: 5px;
|
||||||
|
$uni-spacing-row-base: 10px;
|
||||||
|
$uni-spacing-row-lg: 15px;
|
||||||
|
|
||||||
|
/* 垂直间距 */
|
||||||
|
$uni-spacing-col-sm: 4px;
|
||||||
|
$uni-spacing-col-base: 8px;
|
||||||
|
$uni-spacing-col-lg: 12px;
|
||||||
|
|
||||||
|
/* 透明度 */
|
||||||
|
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
|
||||||
|
|
||||||
|
/* 文章场景相关 */
|
||||||
|
$uni-color-title: #2C405A; // 文章标题颜色
|
||||||
|
$uni-font-size-title:20px;
|
||||||
|
$uni-color-subtitle: #555555; // 二级标题颜色
|
||||||
|
$uni-font-size-subtitle:26px;
|
||||||
|
$uni-color-paragraph: #3F536E; // 文章段落颜色
|
||||||
|
$uni-font-size-paragraph:15px;
|
||||||
217
uni_modules/lime-echart/changelog.md
Normal file
@@ -0,0 +1,217 @@
|
|||||||
|
## 1.0.4(2025-05-16)
|
||||||
|
- fix: 修复uniappx ios尺寸
|
||||||
|
## 1.0.3(2025-05-10)
|
||||||
|
- fix: 修复nvue缺少`isDisposed`
|
||||||
|
## 1.0.2(2025-03-21)
|
||||||
|
- fix: 修复词云无法设置字体大小的问题
|
||||||
|
## 1.0.1(2025-03-14)
|
||||||
|
- fix: 修复抖音小程序不显示问题
|
||||||
|
## 1.0.0(2025-02-27)
|
||||||
|
- fix: 修复uniappx微信小程序不显示问题
|
||||||
|
## 0.9.9(2025-02-24)
|
||||||
|
- feat: 更新v4
|
||||||
|
## 0.9.8(2024-12-20)
|
||||||
|
- fix: 修复 APP 无法放大问题
|
||||||
|
## 0.9.7(2024-12-02)
|
||||||
|
- feat: uniapp 增加`landscape`,当`landscape`为`true`时旋转90deg达到横屏效果。
|
||||||
|
- feat: 支持uniapp x 微信小程序
|
||||||
|
## 0.9.6(2024-07-23)
|
||||||
|
- fix: 修复 uni is not defined
|
||||||
|
## 0.9.5(2024-07-19)
|
||||||
|
- chore: 鸿蒙`measureText`为异步,异步字体不正常,使用模拟方式。
|
||||||
|
## 0.9.4(2024-07-18)
|
||||||
|
- chore: 更新文档
|
||||||
|
## 0.9.3(2024-07-16)
|
||||||
|
- feat: 鸿蒙 canvas 事件缺失,待官方修复,如何在鸿蒙使用请看文档`常见问题 vue3`
|
||||||
|
## 0.9.2(2024-07-12)
|
||||||
|
- chore: 删除多余文件
|
||||||
|
## 0.9.1(2024-07-12)
|
||||||
|
- fix: 修复 安卓5不显示图表问题
|
||||||
|
## 0.9.0(2024-06-13)
|
||||||
|
- chore: 合并nvue和uvue
|
||||||
|
## 0.8.9(2024-05-19)
|
||||||
|
- chore: 更新文档
|
||||||
|
## 0.8.8(2024-05-13)
|
||||||
|
- chore: 更新文档和uvue示例
|
||||||
|
## 0.8.7(2024-04-26)
|
||||||
|
- fix: uniapp x需要HBX 4.13以上
|
||||||
|
## 0.8.6(2024-04-10)
|
||||||
|
- feat: 支持 uniapp x ios
|
||||||
|
## 0.8.5(2024-04-03)
|
||||||
|
- fix: 修复 nvue `reset`传值不生效问题
|
||||||
|
- feat: 支持 uniapp x web
|
||||||
|
## 0.8.4(2024-01-27)
|
||||||
|
- chore: 更新文档
|
||||||
|
## 0.8.3(2024-01-21)
|
||||||
|
- chore: 更新文档
|
||||||
|
## 0.8.2(2024-01-21)
|
||||||
|
- feat: 支持 `uvue`
|
||||||
|
## 0.8.1(2023-08-24)
|
||||||
|
- fix: app 的`touch`事件为`object` 导致无法显示 `tooltip`
|
||||||
|
## 0.8.0(2023-08-22)
|
||||||
|
- fix: 离屏 报错问题
|
||||||
|
- fix: 微信小程序PC无法使用事件
|
||||||
|
- chore: 更新文档
|
||||||
|
## 0.7.9(2023-07-29)
|
||||||
|
- chore: 更新文档
|
||||||
|
## 0.7.8(2023-07-29)
|
||||||
|
- fix: 离屏 报错问题
|
||||||
|
## 0.7.7(2023-07-27)
|
||||||
|
- chore: 更新文档
|
||||||
|
- chore: lime-echart 里的示例使用自定tooltips
|
||||||
|
- feat: 对支持离屏的使用离屏创建(微信、字节、支付宝)
|
||||||
|
## 0.7.6(2023-06-30)
|
||||||
|
- fix: vue3 报`width`的错
|
||||||
|
## 0.7.5(2023-05-25)
|
||||||
|
- chore: 更新文档 和 demo, 使用`lime-echart`这个标签即可查看示例
|
||||||
|
## 0.7.4(2023-05-22)
|
||||||
|
- chore: 增加关于钉钉小程序上传时提示安全问题的说明及修改建议
|
||||||
|
## 0.7.3(2023-05-16)
|
||||||
|
- chore: 更新 vue3 非微信小程序平台可能缺少`wx`的说明
|
||||||
|
## 0.7.2(2023-05-16)
|
||||||
|
- chore: 更新 vue3 非微信小程序平台的可以缺少`wx`的说明
|
||||||
|
## 0.7.1(2023-04-26)
|
||||||
|
- chore: 更新demo,使用`lime-echart`这个标签即可查看示例
|
||||||
|
- chore:微信小程序的`tooltip`文字有阴影,怀疑是微信的锅,临时解决方法是`tooltip.shadowBlur = 0`
|
||||||
|
## 0.7.0(2023-04-24)
|
||||||
|
- fix: 修复`setAttribute is not a function`
|
||||||
|
## 0.6.9(2023-04-15)
|
||||||
|
- chore: 更新文档,vue3请使用echarts esm的包
|
||||||
|
## 0.6.8(2023-03-22)
|
||||||
|
- feat: mac pc无法使用canvas 2d
|
||||||
|
## 0.6.7(2023-03-17)
|
||||||
|
- feat: 更新文档
|
||||||
|
## 0.6.6(2023-03-17)
|
||||||
|
- feat: 微信小程序PC已经支持canvas 2d,故去掉判断PC
|
||||||
|
## 0.6.5(2022-11-03)
|
||||||
|
- fix: 某些手机touches为对象,导致无法交互。
|
||||||
|
## 0.6.4(2022-10-28)
|
||||||
|
- fix: 优化点击事件的触发条件
|
||||||
|
## 0.6.3(2022-10-26)
|
||||||
|
- fix: 修复 dataZoom 拖动问题
|
||||||
|
## 0.6.2(2022-10-23)
|
||||||
|
- fix: 修复 飞书小程序 尺寸问题
|
||||||
|
## 0.6.1(2022-10-19)
|
||||||
|
- fix: 修复 PC mousewheel 事件 鼠标位置不准确的BUG,不兼容火狐!
|
||||||
|
- feat: showLoading 增加传参
|
||||||
|
## 0.6.0(2022-09-16)
|
||||||
|
- feat: 增加PC的mousewheel事件
|
||||||
|
## 0.5.4(2022-09-16)
|
||||||
|
- fix: 修复 nvue 动态数据不显示问题
|
||||||
|
## 0.5.3(2022-09-16)
|
||||||
|
- feat: 增加enableHover属性, 在PC端时当鼠标进入显示tooltip,不必按下。
|
||||||
|
- chore: 更新文档
|
||||||
|
## 0.5.2(2022-09-16)
|
||||||
|
- feat: 增加enableHover属性, 在PC端时当鼠标进入显示tooltip,不必按下。
|
||||||
|
## 0.5.1(2022-09-16)
|
||||||
|
- fix: 修复nvue报错
|
||||||
|
## 0.5.0(2022-09-15)
|
||||||
|
- feat: init(echarts, theme?:string, opts?:{}, callback: function(chart))
|
||||||
|
## 0.4.8(2022-09-11)
|
||||||
|
- feat: 增加 @finished
|
||||||
|
## 0.4.7(2022-08-24)
|
||||||
|
- chore: 去掉 stylus
|
||||||
|
## 0.4.6(2022-08-24)
|
||||||
|
- feat: 增加 beforeDelay
|
||||||
|
## 0.4.5(2022-08-12)
|
||||||
|
- chore: 更新文档
|
||||||
|
## 0.4.4(2022-08-12)
|
||||||
|
- fix: 修复 resize 无参数时报错
|
||||||
|
## 0.4.3(2022-08-07)
|
||||||
|
# 评论有说本插件对新手不友好,让我做不好就不要发出来。 还有的说跟官网一样,发出来做什么,给我整无语了。
|
||||||
|
# 所以在此提醒一下准备要下载的你,如果你从未使用过 echarts 请不要下载 或 谨慎下载。
|
||||||
|
# 如果你确认要下载,麻烦看完文档。还有请注意插件是让echarts在uniapp能运行,API 配置请自行去官网查阅!
|
||||||
|
# 如果你不会echarts 但又需要图表,市场上有个很优秀的图表插件 uchart 你可以去使用这款插件,uchart的作者人很好,也热情。
|
||||||
|
# 每个人都有自己的本职工作,如果你能力强可以自行兼容,如果使用了他人的插件也麻烦尊重他人的成果和劳动时间。谢谢。
|
||||||
|
# 为了心情愉悦,本人已经使用插件屏蔽差评。
|
||||||
|
- chore: 更新文档
|
||||||
|
## 0.4.2(2022-07-20)
|
||||||
|
- feat: 增加 resize
|
||||||
|
## 0.4.1(2022-06-07)
|
||||||
|
- fix: 修复 canvasToTempFilePath 不生效问题
|
||||||
|
## 0.4.0(2022-06-04)
|
||||||
|
- chore 为了词云 增加一个canvas 标签
|
||||||
|
- 词云下载地址[echart-wordcloud](https://ext.dcloud.net.cn/plugin?id=8430)
|
||||||
|
## 0.3.9(2022-06-02)
|
||||||
|
- chore: 更新文档
|
||||||
|
- tips: lines 不支持 `trailLength`
|
||||||
|
## 0.3.8(2022-05-31)
|
||||||
|
- fix: 修复 因mouse事件冲突tooltip跳动问题
|
||||||
|
## 0.3.7(2022-05-26)
|
||||||
|
- chore: 更新文档
|
||||||
|
- chore: 设置默认宽高300px
|
||||||
|
- fix: 修复 vue3 微信小程序 拖影BUG
|
||||||
|
- chore: 支持PC
|
||||||
|
## 0.3.5(2022-04-28)
|
||||||
|
- chore: 更新使用方式
|
||||||
|
- 🔔 必须使用hbuilderx 3.4.8-alpha以上
|
||||||
|
## 0.3.4(2021-08-03)
|
||||||
|
- chore: 增加 setOption的参数值
|
||||||
|
## 0.3.3(2021-07-22)
|
||||||
|
- fix: 修复 径向渐变报错的问题
|
||||||
|
## 0.3.2(2021-07-09)
|
||||||
|
- chore: 统一命名规范,无须主动引入组件
|
||||||
|
## [代码示例站点1](https://limeui.qcoon.cn/#/echart-example)
|
||||||
|
## [代码示例站点2](http://liangei.gitee.io/limeui/#/echart-example)
|
||||||
|
## 0.3.1(2021-06-21)
|
||||||
|
- fix: 修复 app-nvue ios is-enable 无效的问题
|
||||||
|
## [代码示例站点1](https://limeui.qcoon.cn/#/echart-example)
|
||||||
|
## [代码示例站点2](http://liangei.gitee.io/limeui/#/echart-example)
|
||||||
|
## 0.3.0(2021-06-14)
|
||||||
|
- fix: 修复 头条系小程序 2d 报 JSON.stringify 的问题
|
||||||
|
- 目前 头条系小程序 2d 无法在开发工具上预览,划动图表页面无法滚动,axisLabel 字体颜色无法更改,建议使用非2d。
|
||||||
|
## 0.2.9(2021-06-06)
|
||||||
|
- fix: 修复 头条系小程序 2d 放大的BUG
|
||||||
|
- 头条系小程序 2d 无法在开发工具上预览,也存在划动图表页面无法滚动的问题。
|
||||||
|
## [代码示例:http://liangei.gitee.io/limeui/#/echart-example](http://liangei.gitee.io/limeui/#/echart-example)
|
||||||
|
## 0.2.8(2021-05-19)
|
||||||
|
- fix: 修复 微信小程序 PC 显示过大的问题
|
||||||
|
## 0.2.7(2021-05-19)
|
||||||
|
- fix: 修复 微信小程序 PC 不显示问题
|
||||||
|
## [代码示例:http://liangei.gitee.io/limeui/#/echart-example](http://liangei.gitee.io/limeui/#/echart-example)
|
||||||
|
## 0.2.6(2021-05-14)
|
||||||
|
- feat: 支持 `image`
|
||||||
|
- feat: props 增加 `ec.clear`,更新时是否先删除图表样式
|
||||||
|
- feat: props 增加 `isDisableScroll` ,触摸图表时是否禁止页面滚动
|
||||||
|
- feat: props 增加 `webviewStyles` ,webview 的样式, 仅nvue有效
|
||||||
|
## 0.2.5(2021-05-13)
|
||||||
|
- docs: 插件用到了css 预编译器 [stylus](https://ext.dcloud.net.cn/plugin?name=compile-stylus) 请安装它
|
||||||
|
## 0.2.4(2021-05-12)
|
||||||
|
- fix: 修复 百度平台 多个图表ctx 和 渐变色 bug
|
||||||
|
- ## [代码示例:http://liangei.gitee.io/limeui/#/echart-example](http://liangei.gitee.io/limeui/#/echart-example)
|
||||||
|
## 0.2.3(2021-05-10)
|
||||||
|
- feat: 增加 `canvasToTempFilePath` 方法,用于生成图片
|
||||||
|
```js
|
||||||
|
this.$refs.chart.canvasToTempFilePath({success: (res) => {
|
||||||
|
console.log('tempFilePath:', res.tempFilePath)
|
||||||
|
}})
|
||||||
|
```
|
||||||
|
## 0.2.2(2021-05-10)
|
||||||
|
- feat: 增加 `dispose` 方法,用于销毁实例
|
||||||
|
- feat: 增加 `isClickable` 是否派发点击
|
||||||
|
- feat: 实验性的支持 `nvue` 使用要慎重考虑
|
||||||
|
- ## [代码示例:http://liangei.gitee.io/limeui/#/echart-example](http://liangei.gitee.io/limeui/#/echart-example)
|
||||||
|
## 0.2.1(2021-05-06)
|
||||||
|
- fix:修复 微信小程序 json 报错
|
||||||
|
- chore: `reset` 更改为 `setChart`
|
||||||
|
- feat: 增加 `isEnable` 开启初始化 启用这个后 无须再使用`init`方法
|
||||||
|
```html
|
||||||
|
<l-echart ref="chart" is-enable />
|
||||||
|
```
|
||||||
|
```js
|
||||||
|
// 显示加载
|
||||||
|
this.$refs.chart.showLoading()
|
||||||
|
// 使用实例回调
|
||||||
|
this.$refs.chart.setChart(chart => ...code)
|
||||||
|
// 直接设置图表配置
|
||||||
|
this.$refs.chart.setOption(data)
|
||||||
|
```
|
||||||
|
## 0.2.0(2021-05-05)
|
||||||
|
- fix:修复 头条 百度 偏移的问题
|
||||||
|
- docs: 更新文档
|
||||||
|
## [代码示例:http://liangei.gitee.io/limeui/#/echart-example](http://liangei.gitee.io/limeui/#/echart-example)
|
||||||
|
## 0.1.0(2021-05-02)
|
||||||
|
- chore: 第一次上传,基本全端兼容,使用方法与官网一致。
|
||||||
|
- 已知BUG:非2d 无法使用背景色,已反馈官方
|
||||||
|
- 已知BUG:头条 百度 有许些偏移
|
||||||
|
- 后期计划:兼容nvue
|
||||||
399
uni_modules/lime-echart/components/l-echart/canvas.js
Normal file
@@ -0,0 +1,399 @@
|
|||||||
|
import {getDeviceInfo} from './utils';
|
||||||
|
|
||||||
|
const cacheChart = {}
|
||||||
|
const fontSizeReg = /([\d\.]+)px/;
|
||||||
|
class EventEmit {
|
||||||
|
constructor() {
|
||||||
|
this.__events = {};
|
||||||
|
}
|
||||||
|
on(type, listener) {
|
||||||
|
if (!type || !listener) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const events = this.__events[type] || [];
|
||||||
|
events.push(listener);
|
||||||
|
this.__events[type] = events;
|
||||||
|
}
|
||||||
|
emit(type, e) {
|
||||||
|
if (type.constructor === Object) {
|
||||||
|
e = type;
|
||||||
|
type = e && e.type;
|
||||||
|
}
|
||||||
|
if (!type) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const events = this.__events[type];
|
||||||
|
if (!events || !events.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
events.forEach((listener) => {
|
||||||
|
listener.call(this, e);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
off(type, listener) {
|
||||||
|
const __events = this.__events;
|
||||||
|
const events = __events[type];
|
||||||
|
if (!events || !events.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!listener) {
|
||||||
|
delete __events[type];
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
for (let i = 0, len = events.length; i < len; i++) {
|
||||||
|
if (events[i] === listener) {
|
||||||
|
events.splice(i, 1);
|
||||||
|
i--;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
class Image {
|
||||||
|
constructor() {
|
||||||
|
this.currentSrc = null
|
||||||
|
this.naturalHeight = 0
|
||||||
|
this.naturalWidth = 0
|
||||||
|
this.width = 0
|
||||||
|
this.height = 0
|
||||||
|
this.tagName = 'IMG'
|
||||||
|
}
|
||||||
|
set src(src) {
|
||||||
|
this.currentSrc = src
|
||||||
|
uni.getImageInfo({
|
||||||
|
src,
|
||||||
|
success: (res) => {
|
||||||
|
this.naturalWidth = this.width = res.width
|
||||||
|
this.naturalHeight = this.height = res.height
|
||||||
|
this.onload()
|
||||||
|
},
|
||||||
|
fail: () => {
|
||||||
|
this.onerror()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
get src() {
|
||||||
|
return this.currentSrc
|
||||||
|
}
|
||||||
|
}
|
||||||
|
class OffscreenCanvas {
|
||||||
|
constructor(ctx, com, canvasId) {
|
||||||
|
this.tagName = 'canvas'
|
||||||
|
this.com = com
|
||||||
|
this.canvasId = canvasId
|
||||||
|
this.ctx = ctx
|
||||||
|
}
|
||||||
|
set width(w) {
|
||||||
|
this.com.offscreenWidth = w
|
||||||
|
}
|
||||||
|
set height(h) {
|
||||||
|
this.com.offscreenHeight = h
|
||||||
|
}
|
||||||
|
get width() {
|
||||||
|
return this.com.offscreenWidth || 0
|
||||||
|
}
|
||||||
|
get height() {
|
||||||
|
return this.com.offscreenHeight || 0
|
||||||
|
}
|
||||||
|
getContext(type) {
|
||||||
|
return this.ctx
|
||||||
|
}
|
||||||
|
getImageData() {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
this.com.$nextTick(() => {
|
||||||
|
uni.canvasGetImageData({
|
||||||
|
x:0,
|
||||||
|
y:0,
|
||||||
|
width: this.com.offscreenWidth,
|
||||||
|
height: this.com.offscreenHeight,
|
||||||
|
canvasId: this.canvasId,
|
||||||
|
success: (res) => {
|
||||||
|
resolve(res)
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
reject(err)
|
||||||
|
},
|
||||||
|
}, this.com)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export class Canvas {
|
||||||
|
constructor(ctx, com, isNew, canvasNode={}) {
|
||||||
|
cacheChart[com.canvasId] = {ctx}
|
||||||
|
this.canvasId = com.canvasId;
|
||||||
|
this.chart = null;
|
||||||
|
this.isNew = isNew
|
||||||
|
this.tagName = 'canvas'
|
||||||
|
this.canvasNode = canvasNode;
|
||||||
|
this.com = com;
|
||||||
|
if (!isNew) {
|
||||||
|
this._initStyle(ctx)
|
||||||
|
}
|
||||||
|
this._initEvent();
|
||||||
|
this._ee = new EventEmit()
|
||||||
|
}
|
||||||
|
getContext(type) {
|
||||||
|
if (type === '2d') {
|
||||||
|
return this.ctx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setAttribute(key, value) {
|
||||||
|
if(key === 'aria-label') {
|
||||||
|
this.com['ariaLabel'] = value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setChart(chart) {
|
||||||
|
this.chart = chart;
|
||||||
|
}
|
||||||
|
createOffscreenCanvas(param){
|
||||||
|
if(!this.children) {
|
||||||
|
this.com.isOffscreenCanvas = true
|
||||||
|
this.com.offscreenWidth = param.width||300
|
||||||
|
this.com.offscreenHeight = param.height||300
|
||||||
|
const com = this.com
|
||||||
|
const canvasId = this.com.offscreenCanvasId
|
||||||
|
const context = uni.createCanvasContext(canvasId, this.com)
|
||||||
|
this._initStyle(context)
|
||||||
|
this.children = new OffscreenCanvas(context, com, canvasId)
|
||||||
|
}
|
||||||
|
return this.children
|
||||||
|
}
|
||||||
|
appendChild(child) {
|
||||||
|
console.log('child', child)
|
||||||
|
}
|
||||||
|
dispatchEvent(type, e) {
|
||||||
|
if(typeof type == 'object') {
|
||||||
|
this._ee.emit(type.type, type);
|
||||||
|
} else {
|
||||||
|
this._ee.emit(type, e);
|
||||||
|
}
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
attachEvent() {
|
||||||
|
}
|
||||||
|
detachEvent() {
|
||||||
|
}
|
||||||
|
addEventListener(type, listener) {
|
||||||
|
this._ee.on(type, listener)
|
||||||
|
}
|
||||||
|
removeEventListener(type, listener) {
|
||||||
|
this._ee.off(type, listener)
|
||||||
|
}
|
||||||
|
_initCanvas(zrender, ctx) {
|
||||||
|
// zrender.util.getContext = function() {
|
||||||
|
// return ctx;
|
||||||
|
// };
|
||||||
|
// zrender.util.$override('measureText', function(text, font) {
|
||||||
|
// ctx.font = font || '12px sans-serif';
|
||||||
|
// return ctx.measureText(text, font);
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
_initStyle(ctx, child) {
|
||||||
|
const styles = [
|
||||||
|
'fillStyle',
|
||||||
|
'strokeStyle',
|
||||||
|
'fontSize',
|
||||||
|
'globalAlpha',
|
||||||
|
'opacity',
|
||||||
|
'textAlign',
|
||||||
|
'textBaseline',
|
||||||
|
'shadow',
|
||||||
|
'lineWidth',
|
||||||
|
'lineCap',
|
||||||
|
'lineJoin',
|
||||||
|
'lineDash',
|
||||||
|
'miterLimit',
|
||||||
|
// #ifdef H5 || APP
|
||||||
|
'font',
|
||||||
|
// #endif
|
||||||
|
];
|
||||||
|
const colorReg = /#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])\b/g;
|
||||||
|
styles.forEach(style => {
|
||||||
|
Object.defineProperty(ctx, style, {
|
||||||
|
set: value => {
|
||||||
|
// #ifdef H5 || APP
|
||||||
|
if (style === 'font' && fontSizeReg.test(value)) {
|
||||||
|
const match = fontSizeReg.exec(value);
|
||||||
|
ctx.setFontSize(match[1]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
if (style === 'opacity') {
|
||||||
|
ctx.setGlobalAlpha(value)
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (style !== 'fillStyle' && style !== 'strokeStyle' || value !== 'none' && value !== null) {
|
||||||
|
// #ifdef H5 || APP-PLUS || MP-BAIDU
|
||||||
|
if(typeof value == 'object') {
|
||||||
|
if (value.hasOwnProperty('colorStop') || value.hasOwnProperty('colors')) {
|
||||||
|
ctx['set' + style.charAt(0).toUpperCase() + style.slice(1)](value);
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
// #ifdef MP-TOUTIAO
|
||||||
|
if(colorReg.test(value)) {
|
||||||
|
value = value.replace(colorReg, '#$1$1$2$2$3$3')
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
ctx['set' + style.charAt(0).toUpperCase() + style.slice(1)](value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
if(!this.isNew && !child) {
|
||||||
|
ctx.uniDrawImage = ctx.drawImage
|
||||||
|
ctx.drawImage = (...a) => {
|
||||||
|
a[0] = a[0].src
|
||||||
|
ctx.uniDrawImage(...a)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(!ctx.createRadialGradient) {
|
||||||
|
ctx.createRadialGradient = function() {
|
||||||
|
return ctx.createCircularGradient(...[...arguments].slice(-3))
|
||||||
|
};
|
||||||
|
}
|
||||||
|
// 字节不支持
|
||||||
|
if (!ctx.strokeText) {
|
||||||
|
ctx.strokeText = (...a) => {
|
||||||
|
ctx.fillText(...a)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 钉钉不支持 , 鸿蒙是异步
|
||||||
|
if (!ctx.measureText || getDeviceInfo().osName == 'harmonyos') {
|
||||||
|
ctx._measureText = ctx.measureText
|
||||||
|
const strLen = (str) => {
|
||||||
|
let len = 0;
|
||||||
|
for (let i = 0; i < str.length; i++) {
|
||||||
|
if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
|
||||||
|
len++;
|
||||||
|
} else {
|
||||||
|
len += 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return len;
|
||||||
|
}
|
||||||
|
ctx.measureText = (text, font) => {
|
||||||
|
let fontSize = ctx?.state?.fontSize || 12;
|
||||||
|
if (font) {
|
||||||
|
fontSize = parseInt(font.match(/([\d\.]+)px/)[1])
|
||||||
|
}
|
||||||
|
fontSize /= 2;
|
||||||
|
let isBold = fontSize >= 16;
|
||||||
|
const widthFactor = isBold ? 1.3 : 1;
|
||||||
|
// ctx._measureText(text, (res) => {})
|
||||||
|
return {
|
||||||
|
width: strLen(text) * fontSize * widthFactor
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_initEvent(e) {
|
||||||
|
this.event = {};
|
||||||
|
const eventNames = [{
|
||||||
|
wxName: 'touchStart',
|
||||||
|
ecName: 'mousedown'
|
||||||
|
}, {
|
||||||
|
wxName: 'touchMove',
|
||||||
|
ecName: 'mousemove'
|
||||||
|
}, {
|
||||||
|
wxName: 'touchEnd',
|
||||||
|
ecName: 'mouseup'
|
||||||
|
}, {
|
||||||
|
wxName: 'touchEnd',
|
||||||
|
ecName: 'click'
|
||||||
|
}];
|
||||||
|
|
||||||
|
eventNames.forEach(name => {
|
||||||
|
this.event[name.wxName] = e => {
|
||||||
|
const touch = e.touches[0];
|
||||||
|
this.chart.getZr().handler.dispatch(name.ecName, {
|
||||||
|
zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
|
||||||
|
zrY: name.wxName === 'tap' ? touch.clientY : touch.y
|
||||||
|
});
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
set width(w) {
|
||||||
|
this.canvasNode.width = w
|
||||||
|
}
|
||||||
|
set height(h) {
|
||||||
|
this.canvasNode.height = h
|
||||||
|
}
|
||||||
|
|
||||||
|
get width() {
|
||||||
|
return this.canvasNode.width || 0
|
||||||
|
}
|
||||||
|
get height() {
|
||||||
|
return this.canvasNode.height || 0
|
||||||
|
}
|
||||||
|
get ctx() {
|
||||||
|
return cacheChart[this.canvasId]['ctx'] || null
|
||||||
|
}
|
||||||
|
set chart(chart) {
|
||||||
|
cacheChart[this.canvasId]['chart'] = chart
|
||||||
|
}
|
||||||
|
get chart() {
|
||||||
|
return cacheChart[this.canvasId]['chart'] || null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function dispatch(name, {x,y, wheelDelta}) {
|
||||||
|
this.dispatch(name, {
|
||||||
|
zrX: x,
|
||||||
|
zrY: y,
|
||||||
|
zrDelta: wheelDelta,
|
||||||
|
preventDefault: () => {},
|
||||||
|
stopPropagation: () =>{}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
export function setCanvasCreator(echarts, {canvas, node}) {
|
||||||
|
if(echarts && !echarts.registerPreprocessor) {
|
||||||
|
return console.warn('echarts 版本不对或未传入echarts,vue3请使用esm格式')
|
||||||
|
}
|
||||||
|
echarts.registerPreprocessor(option => {
|
||||||
|
if (option && option.series) {
|
||||||
|
if (option.series.length > 0) {
|
||||||
|
option.series.forEach(series => {
|
||||||
|
series.progressive = 0;
|
||||||
|
});
|
||||||
|
} else if (typeof option.series === 'object') {
|
||||||
|
option.series.progressive = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
function loadImage(src, onload, onerror) {
|
||||||
|
let img = null
|
||||||
|
if(node && node.createImage) {
|
||||||
|
img = node.createImage()
|
||||||
|
img.onload = onload.bind(img);
|
||||||
|
img.onerror = onerror.bind(img);
|
||||||
|
img.src = src;
|
||||||
|
return img
|
||||||
|
} else {
|
||||||
|
img = new Image()
|
||||||
|
img.onload = onload.bind(img)
|
||||||
|
img.onerror = onerror.bind(img);
|
||||||
|
img.src = src
|
||||||
|
return img
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(echarts.setPlatformAPI) {
|
||||||
|
echarts.setPlatformAPI({
|
||||||
|
loadImage: canvas.setChart ? loadImage : null,
|
||||||
|
createCanvas(){
|
||||||
|
const key = 'createOffscreenCanvas'
|
||||||
|
return uni.canIUse(key) && uni[key] ? uni[key]({type: '2d'}) : canvas
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else if(echarts.setCanvasCreator) {
|
||||||
|
echarts.setCanvasCreator(() => {
|
||||||
|
return canvas;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
373
uni_modules/lime-echart/components/l-echart/l-echart.uvue
Normal file
@@ -0,0 +1,373 @@
|
|||||||
|
<template>
|
||||||
|
<!-- #ifdef APP -->
|
||||||
|
<web-view class="lime-echart" ref="chartRef" @load="loaded" :style="[customStyle]" :webview-styles="[webviewStyles]"
|
||||||
|
src="/uni_modules/lime-echart/static/uvue.html?v=10112">
|
||||||
|
</web-view>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifdef H5 -->
|
||||||
|
<div class="lime-echart" ref="chartRef"></div>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifndef H5 || APP-->
|
||||||
|
<view class="lime-echart">
|
||||||
|
<canvas style="width:100%; height:100%" v-if="canvasid" :id="canvasid" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
|
||||||
|
</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="uts" setup>
|
||||||
|
// @ts-nocheck
|
||||||
|
import { getCurrentInstance, nextTick } from "vue";
|
||||||
|
import { Echarts } from './uvue';
|
||||||
|
// #ifdef WEB
|
||||||
|
import { dispatch } from './canvas';
|
||||||
|
// #endif
|
||||||
|
// #ifndef APP || WEB
|
||||||
|
import { Canvas, setCanvasCreator, dispatch } from './canvas';
|
||||||
|
import { wrapTouch, convertTouchesToArray, devicePixelRatio, sleep, canIUseCanvas2d, getRect } from './utils';
|
||||||
|
// #endif
|
||||||
|
type EchartsResolve = (value : Echarts) => void
|
||||||
|
defineOptions({
|
||||||
|
name: 'l-echart'
|
||||||
|
})
|
||||||
|
const emits = defineEmits(['finished'])
|
||||||
|
const props = defineProps({
|
||||||
|
// #ifdef APP
|
||||||
|
webviewStyles: {
|
||||||
|
type: Object
|
||||||
|
},
|
||||||
|
customStyle: {
|
||||||
|
type: Object
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
// #ifndef APP
|
||||||
|
webviewStyles: {
|
||||||
|
type: Object
|
||||||
|
},
|
||||||
|
customStyle: {
|
||||||
|
type: [String, Object]
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
isDisableScroll: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
isClickable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
enableHover: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
beforeDelay: {
|
||||||
|
type: Number,
|
||||||
|
default: 30
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const instance = getCurrentInstance()!;
|
||||||
|
const canvasid = `lime-echart-${instance.uid}`
|
||||||
|
const finished = ref(false)
|
||||||
|
const map = [] as EchartsResolve[]
|
||||||
|
const callbackMap = [] as EchartsResolve[]
|
||||||
|
// let context = null as UniWebViewElement | null
|
||||||
|
let chart = null as Echarts | null
|
||||||
|
let chartRef = ref<UniWebViewElement | null>(null)
|
||||||
|
|
||||||
|
const trigger = () => {
|
||||||
|
// #ifdef APP
|
||||||
|
if (finished.value) {
|
||||||
|
if (chart == null) {
|
||||||
|
chart = new Echarts(chartRef.value!)
|
||||||
|
}
|
||||||
|
while (map.length > 0) {
|
||||||
|
const resolve = map.pop() as EchartsResolve
|
||||||
|
resolve(chart!)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
// #ifndef APP
|
||||||
|
while (map.length > 0) {
|
||||||
|
if (chart != null) {
|
||||||
|
const resolve = map.pop() as EchartsResolve
|
||||||
|
resolve(chart!)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
if (chart != null) {
|
||||||
|
while (callbackMap.length > 0) {
|
||||||
|
const callback = callbackMap.pop() as EchartsResolve
|
||||||
|
callback(chart!)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// #ifdef APP
|
||||||
|
// const resizeObserver = new UniResizeObserver((entries : Array<UniResizeObserverEntry>) => {
|
||||||
|
// const rect = entries[0].target.getBoundingClientRect()
|
||||||
|
// if((rect.width > 0 || rect.height > 0) && !finished.value) {
|
||||||
|
// finished.value = true
|
||||||
|
// trigger()
|
||||||
|
// emits('finished')
|
||||||
|
// }
|
||||||
|
|
||||||
|
// })
|
||||||
|
|
||||||
|
// const stopWatch = watch(():UniElement|null => chartRef.value, (el:UniElement|null) => {
|
||||||
|
// if(el== null) return
|
||||||
|
// resizeObserver.observe(el)
|
||||||
|
// })
|
||||||
|
const loaded = (event : UniWebViewLoadEvent) => {
|
||||||
|
event.stopPropagation()
|
||||||
|
event.preventDefault()
|
||||||
|
nextTick(()=> {
|
||||||
|
chartRef.value?.getBoundingClientRectAsync()?.then(res => {
|
||||||
|
if(res.width > 0 && res.height > 0) {
|
||||||
|
finished.value = true
|
||||||
|
trigger()
|
||||||
|
emits('finished')
|
||||||
|
} else {
|
||||||
|
console.warn('【lime-echart】获取尺寸失败,请检查代码样式')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
|
||||||
|
const _next = () : boolean => {
|
||||||
|
if (chart == null) {
|
||||||
|
console.warn(`组件还未初始化,请先使用 init`)
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
const setOption = (option : UTSJSONObject) => {
|
||||||
|
if (_next()) return
|
||||||
|
chart!.setOption(option);
|
||||||
|
}
|
||||||
|
const showLoading = () => {
|
||||||
|
if (_next()) return
|
||||||
|
chart!.showLoading();
|
||||||
|
}
|
||||||
|
const hideLoading = () => {
|
||||||
|
if (_next()) return
|
||||||
|
chart!.hideLoading();
|
||||||
|
}
|
||||||
|
const clear = () => {
|
||||||
|
if (_next()) return
|
||||||
|
chart!.clear();
|
||||||
|
}
|
||||||
|
const dispose = () => {
|
||||||
|
if (_next()) return
|
||||||
|
chart!.dispose();
|
||||||
|
}
|
||||||
|
const resize = (size : UTSJSONObject) => {
|
||||||
|
if (_next()) return
|
||||||
|
chart!.resize(size);
|
||||||
|
}
|
||||||
|
const canvasToTempFilePath = (opt : UTSJSONObject) => {
|
||||||
|
if (_next()) return
|
||||||
|
chart!.canvasToTempFilePath(opt);
|
||||||
|
}
|
||||||
|
|
||||||
|
// #ifdef APP
|
||||||
|
function init(callback : ((chart : Echarts) => void) | null) : Promise<Echarts> {
|
||||||
|
|
||||||
|
if (callback != null) {
|
||||||
|
callbackMap.push(callback)
|
||||||
|
}
|
||||||
|
return new Promise<Echarts>((resolve) => {
|
||||||
|
map.push(resolve)
|
||||||
|
trigger()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// onUnmounted(()=>{
|
||||||
|
// stopWatch()
|
||||||
|
// resizeObserver.disconnect()
|
||||||
|
// })
|
||||||
|
// #endif
|
||||||
|
// #ifndef APP
|
||||||
|
// #ifndef WEB
|
||||||
|
let use2dCanvas = canIUseCanvas2d()
|
||||||
|
const getContext = async () => {
|
||||||
|
return new Promise((resolve, reject)=>{
|
||||||
|
uni.createCanvasContextAsync({
|
||||||
|
id: canvasid,
|
||||||
|
component: instance.proxy!,
|
||||||
|
success: (context : CanvasContext) => {
|
||||||
|
const canvasContext = context.getContext('2d')!;
|
||||||
|
const canvas = canvasContext.canvas;
|
||||||
|
let uniCanvas;
|
||||||
|
const width = canvas.offsetWidth
|
||||||
|
const height = canvas.offsetHeight
|
||||||
|
// 处理高清屏逻辑
|
||||||
|
const dpr = uni.getDeviceInfo().devicePixelRatio ?? 1;
|
||||||
|
canvas.width = canvas.offsetWidth * dpr;
|
||||||
|
canvas.height = canvas.offsetHeight * dpr;
|
||||||
|
canvasContext.scale(dpr, dpr); // 仅需调用一次,当调用 reset 方法后需要再次 scale
|
||||||
|
if(use2dCanvas) {
|
||||||
|
uniCanvas = new Canvas(canvasContext, instance.proxy, true, context);
|
||||||
|
} else {
|
||||||
|
uniCanvas = new Canvas(canvasContext, instance.proxy, false);
|
||||||
|
}
|
||||||
|
resolve({ canvas: uniCanvas, width, height, devicePixelRatio: 1, node: context});
|
||||||
|
},
|
||||||
|
fail(err) {
|
||||||
|
reject(err)
|
||||||
|
console.log('err', err)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
// return getRect(`#${canvasid}`, {context: instance.proxy!, type: use2dCanvas ? 'fields': 'boundingClientRect'}).then(res => {
|
||||||
|
// if(res) {
|
||||||
|
// let dpr = uni.getWindowInfo().pixelRatio
|
||||||
|
// let {width, height, node} = res
|
||||||
|
// let canvas;
|
||||||
|
// if(node) {
|
||||||
|
// const ctx = node.getContext('2d');
|
||||||
|
// canvas = new Canvas(ctx, instance.proxy, true, node);
|
||||||
|
// } else {
|
||||||
|
// const ctx = uni.createCanvasContext(canvasid, instance.proxy);
|
||||||
|
// canvas = new Canvas(ctx, instance.proxy, false);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// return { canvas, width, height, devicePixelRatio: dpr, node };
|
||||||
|
// } else {
|
||||||
|
// return {}
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
const getTouch = (e) => {
|
||||||
|
const touches = e.touches[0]
|
||||||
|
// #ifdef WEB
|
||||||
|
const rect = chart!.getZr().dom.getBoundingClientRect();
|
||||||
|
const touch = {
|
||||||
|
x: touches.clientX - rect.left,
|
||||||
|
y: touches.clientY - rect.top
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
// #ifndef WEB
|
||||||
|
const touch = {
|
||||||
|
x: touches.x,
|
||||||
|
y: touches.y
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
return touch
|
||||||
|
}
|
||||||
|
const touchstart = (e) => {
|
||||||
|
if (chart == null) return
|
||||||
|
const handler = chart.getZr().handler;
|
||||||
|
const touch = getTouch(e)
|
||||||
|
dispatch.call(handler, 'mousedown', touch)
|
||||||
|
dispatch.call(handler, 'click', touch)
|
||||||
|
}
|
||||||
|
const touchmove = (e) => {
|
||||||
|
if (chart == null) return
|
||||||
|
const handler = chart.getZr().handler;
|
||||||
|
const touch = getTouch(e)
|
||||||
|
dispatch.call(handler, 'mousemove', touch)
|
||||||
|
// const rect = chart.getZr().dom.getBoundingClientRect()
|
||||||
|
// handler.dispatch('mousemove', {
|
||||||
|
// zrX: e.touches[0].clientX - rect.left,
|
||||||
|
// zrY: e.touches[0].clientY - rect.top
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
const touchend = (e) => {
|
||||||
|
if (chart == null) return
|
||||||
|
const handler = chart.getZr().handler;
|
||||||
|
|
||||||
|
const touch = {
|
||||||
|
x: 999999999,
|
||||||
|
y: 999999999
|
||||||
|
}
|
||||||
|
|
||||||
|
dispatch.call(handler, 'mousemove', touch)
|
||||||
|
dispatch.call(handler, 'touchend', touch)
|
||||||
|
|
||||||
|
}
|
||||||
|
async function init(echarts : any, ...args : any[]) : Promise<Echarts> {
|
||||||
|
if (echarts == null) {
|
||||||
|
console.error('请确保已经引入了 ECharts 库');
|
||||||
|
return Promise.reject('请确保已经引入了 ECharts 库');
|
||||||
|
}
|
||||||
|
let theme : string | null = null
|
||||||
|
let opts = {}
|
||||||
|
let callback : Function | null = null;
|
||||||
|
|
||||||
|
args.forEach(item => {
|
||||||
|
if (typeof item === 'function') {
|
||||||
|
callback = item
|
||||||
|
} else if (['string'].includes(typeof item)) {
|
||||||
|
theme = item
|
||||||
|
} else if (typeof item === 'object') {
|
||||||
|
opts = item
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// #ifdef WEB
|
||||||
|
echarts.env.domSupported = true
|
||||||
|
echarts.env.hasGlobalWindow = true
|
||||||
|
echarts.env.node = false
|
||||||
|
echarts.env.pointerEventsSupported = false
|
||||||
|
echarts.env.svgSupported = true
|
||||||
|
echarts.env.touchEventsSupported = true
|
||||||
|
echarts.env.transform3dSupported = true
|
||||||
|
echarts.env.transformSupported = true
|
||||||
|
echarts.env.worker = false
|
||||||
|
echarts.env.wxa = false
|
||||||
|
chart = echarts.init(chartRef.value, theme, opts)
|
||||||
|
// window.addEventListener('touchstart', touchstart)
|
||||||
|
// window.addEventListener('touchmove', touchmove)
|
||||||
|
// window.addEventListener('touchend', touchend)
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifndef WEB
|
||||||
|
let config = await getContext();
|
||||||
|
setCanvasCreator(echarts, config)
|
||||||
|
chart = echarts.init(config.canvas, theme, Object.assign({}, config, opts))
|
||||||
|
// #endif
|
||||||
|
if (callback != null && typeof callback == 'function') {
|
||||||
|
callbackMap.push(callback)
|
||||||
|
}
|
||||||
|
return new Promise<Echarts>((resolve) => {
|
||||||
|
map.push(resolve)
|
||||||
|
trigger()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
finished.value = true
|
||||||
|
trigger()
|
||||||
|
emits('finished')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
onUnmounted(() => {
|
||||||
|
// #ifdef WEB
|
||||||
|
// window.removeEventListener('touchstart', touchstart)
|
||||||
|
// window.removeEventListener('touchmove', touchmove)
|
||||||
|
// window.removeEventListener('touchend', touchend)
|
||||||
|
// #endif
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
init,
|
||||||
|
setOption,
|
||||||
|
showLoading,
|
||||||
|
hideLoading,
|
||||||
|
clear,
|
||||||
|
dispose,
|
||||||
|
resize,
|
||||||
|
canvasToTempFilePath
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.lime-echart {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
515
uni_modules/lime-echart/components/l-echart/l-echart.vue
Normal file
@@ -0,0 +1,515 @@
|
|||||||
|
<template>
|
||||||
|
<view class="lime-echart" :style="[customStyle]" v-if="canvasId" ref="limeEchart" :aria-label="ariaLabel">
|
||||||
|
<!-- #ifndef APP-NVUE -->
|
||||||
|
<canvas
|
||||||
|
class="lime-echart__canvas"
|
||||||
|
v-if="use2dCanvas"
|
||||||
|
type="2d"
|
||||||
|
:id="canvasId"
|
||||||
|
:style="canvasStyle"
|
||||||
|
:disable-scroll="isDisableScroll"
|
||||||
|
@touchstart="touchStart"
|
||||||
|
@touchmove="touchMove"
|
||||||
|
@touchend="touchEnd"
|
||||||
|
/>
|
||||||
|
<canvas
|
||||||
|
class="lime-echart__canvas"
|
||||||
|
v-else
|
||||||
|
:width="nodeWidth"
|
||||||
|
:height="nodeHeight"
|
||||||
|
:style="canvasStyle"
|
||||||
|
:canvas-id="canvasId"
|
||||||
|
:id="canvasId"
|
||||||
|
:disable-scroll="isDisableScroll"
|
||||||
|
@touchstart="touchStart"
|
||||||
|
@touchmove="touchMove"
|
||||||
|
@touchend="touchEnd"
|
||||||
|
/>
|
||||||
|
<view class="lime-echart__mask"
|
||||||
|
v-if="isPC"
|
||||||
|
@mousedown="touchStart"
|
||||||
|
@mousemove="touchMove"
|
||||||
|
@mouseup="touchEnd"
|
||||||
|
@touchstart="touchStart"
|
||||||
|
@touchmove="touchMove"
|
||||||
|
@touchend="touchEnd">
|
||||||
|
</view>
|
||||||
|
<canvas v-if="isOffscreenCanvas" :style="offscreenStyle" :canvas-id="offscreenCanvasId"></canvas>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<web-view
|
||||||
|
class="lime-echart__canvas"
|
||||||
|
:id="canvasId"
|
||||||
|
:style="canvasStyle"
|
||||||
|
:webview-styles="webviewStyles"
|
||||||
|
ref="webview"
|
||||||
|
src="/uni_modules/lime-echart/static/uvue.html?v=1"
|
||||||
|
@pagefinish="finished = true"
|
||||||
|
@onPostMessage="onMessage"
|
||||||
|
></web-view>
|
||||||
|
<!-- #endif -->
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// @ts-nocheck
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
import {Canvas, setCanvasCreator, dispatch} from './canvas';
|
||||||
|
import {wrapTouch, convertTouchesToArray, devicePixelRatio ,sleep, canIUseCanvas2d, getRect, getDeviceInfo} from './utils';
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
import { base64ToPath, sleep } from './utils';
|
||||||
|
import {Echarts} from './nvue'
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
/**
|
||||||
|
* LimeChart 图表
|
||||||
|
* @description 全端兼容的eCharts
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=4899
|
||||||
|
|
||||||
|
* @property {String} customStyle 自定义样式
|
||||||
|
* @property {String} type 指定 canvas 类型
|
||||||
|
* @value 2d 使用canvas 2d,部分小程序支持
|
||||||
|
* @value '' 使用原生canvas,会有层级问题
|
||||||
|
* @value bottom right 不缩放图片,只显示图片的右下边区域
|
||||||
|
* @property {Boolean} isDisableScroll
|
||||||
|
* @property {number} beforeDelay = [30] 延迟初始化 (毫秒)
|
||||||
|
* @property {Boolean} enableHover PC端使用鼠标悬浮
|
||||||
|
|
||||||
|
* @event {Function} finished 加载完成触发
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'lime-echart',
|
||||||
|
props: {
|
||||||
|
// #ifdef MP-WEIXIN || MP-TOUTIAO
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: '2d'
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
webviewStyles: Object,
|
||||||
|
// hybrid: Boolean,
|
||||||
|
// #endif
|
||||||
|
customStyle: String,
|
||||||
|
isDisableScroll: Boolean,
|
||||||
|
isClickable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
enableHover: Boolean,
|
||||||
|
beforeDelay: {
|
||||||
|
type: Number,
|
||||||
|
default: 30
|
||||||
|
},
|
||||||
|
landscape: Boolean
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// #ifdef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY
|
||||||
|
use2dCanvas: true,
|
||||||
|
// #endif
|
||||||
|
// #ifndef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY
|
||||||
|
use2dCanvas: false,
|
||||||
|
// #endif
|
||||||
|
ariaLabel: '图表',
|
||||||
|
width: null,
|
||||||
|
height: null,
|
||||||
|
nodeWidth: null,
|
||||||
|
nodeHeight: null,
|
||||||
|
// canvasNode: null,
|
||||||
|
config: {},
|
||||||
|
inited: false,
|
||||||
|
finished: false,
|
||||||
|
file: '',
|
||||||
|
platform: '',
|
||||||
|
isPC: false,
|
||||||
|
isDown: false,
|
||||||
|
isOffscreenCanvas: false,
|
||||||
|
offscreenWidth: 0,
|
||||||
|
offscreenHeight: 0,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
rootStyle() {
|
||||||
|
if(this.landscape) {
|
||||||
|
return `transform: translate(-50%,-50%) rotate(90deg); top:50%; left:50%;`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
canvasId() {
|
||||||
|
return `lime-echart${this._ && this._.uid || this._uid}`
|
||||||
|
},
|
||||||
|
offscreenCanvasId() {
|
||||||
|
return `${this.canvasId}_offscreen`
|
||||||
|
},
|
||||||
|
offscreenStyle() {
|
||||||
|
return `width:${this.offscreenWidth}px;height: ${this.offscreenHeight}px; position: fixed; left: 99999px; background: red`
|
||||||
|
},
|
||||||
|
canvasStyle() {
|
||||||
|
return this.rootStyle + (this.width && this.height ? ('width:' + this.width + 'px;height:' + this.height + 'px') : '')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// #ifndef VUE3
|
||||||
|
beforeDestroy() {
|
||||||
|
this.clear()
|
||||||
|
this.dispose()
|
||||||
|
// #ifdef H5
|
||||||
|
if(this.isPC) {
|
||||||
|
document.removeEventListener('mousewheel', this.mousewheel)
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
// #ifdef VUE3
|
||||||
|
beforeUnmount() {
|
||||||
|
this.clear()
|
||||||
|
this.dispose()
|
||||||
|
// #ifdef H5
|
||||||
|
if(this.isPC) {
|
||||||
|
document.removeEventListener('mousewheel', this.mousewheel)
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
created() {
|
||||||
|
// #ifdef H5
|
||||||
|
if(!('ontouchstart' in window)) {
|
||||||
|
this.isPC = true
|
||||||
|
document.addEventListener('mousewheel', this.mousewheel)
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
// #ifdef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY
|
||||||
|
const { platform } = getDeviceInfo();
|
||||||
|
this.isPC = /windows/i.test(platform)
|
||||||
|
// #endif
|
||||||
|
this.use2dCanvas = this.type === '2d' && canIUseCanvas2d()
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$emit('finished')
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
onMessage(e) {
|
||||||
|
const detail = e?.detail?.data[0] || null;
|
||||||
|
const data = detail?.data
|
||||||
|
const key = detail?.event
|
||||||
|
const options = data?.options
|
||||||
|
const event = data?.event
|
||||||
|
const file = detail?.file
|
||||||
|
if (key == 'log' && data) {
|
||||||
|
console.log(data)
|
||||||
|
}
|
||||||
|
if(event) {
|
||||||
|
this.chart.dispatchAction(event.replace(/"/g,''), options)
|
||||||
|
}
|
||||||
|
if(file) {
|
||||||
|
thie.file = file
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
setChart(callback) {
|
||||||
|
if(!this.chart) {
|
||||||
|
console.warn(`组件还未初始化,请先使用 init`)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if(typeof callback === 'function' && this.chart) {
|
||||||
|
callback(this.chart);
|
||||||
|
}
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
if(typeof callback === 'function') {
|
||||||
|
this.$refs.webview.evalJs(`setChart(${JSON.stringify(callback.toString())}, ${JSON.stringify(this.chart.options)})`);
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
setOption() {
|
||||||
|
if (!this.chart || !this.chart.setOption) {
|
||||||
|
console.warn(`组件还未初始化,请先使用 init`)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.chart.setOption(...arguments);
|
||||||
|
},
|
||||||
|
showLoading() {
|
||||||
|
if(this.chart) {
|
||||||
|
this.chart.showLoading(...arguments)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
hideLoading() {
|
||||||
|
if(this.chart) {
|
||||||
|
this.chart.hideLoading()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
clear() {
|
||||||
|
if(this.chart && !this.chart.isDisposed()) {
|
||||||
|
this.chart.clear()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dispose() {
|
||||||
|
if(this.chart && !this.chart.isDisposed()) {
|
||||||
|
this.chart.dispose()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
resize(size) {
|
||||||
|
if(size && size.width && size.height) {
|
||||||
|
this.height = size.height
|
||||||
|
this.width = size.width
|
||||||
|
if(this.chart) {this.chart.resize(size)}
|
||||||
|
} else {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
getRect('.lime-echart', this).then(res =>{
|
||||||
|
if (res) {
|
||||||
|
let { width, height } = res;
|
||||||
|
this.width = width = width || 300;
|
||||||
|
this.height = height = height || 300;
|
||||||
|
this.chart.resize({width, height})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
canvasToTempFilePath(args = {}) {
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
const { use2dCanvas, canvasId } = this;
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const copyArgs = Object.assign({
|
||||||
|
canvasId,
|
||||||
|
success: resolve,
|
||||||
|
fail: reject
|
||||||
|
}, args);
|
||||||
|
if (use2dCanvas) {
|
||||||
|
delete copyArgs.canvasId;
|
||||||
|
copyArgs.canvas = this.canvasNode;
|
||||||
|
}
|
||||||
|
uni.canvasToTempFilePath(copyArgs, this);
|
||||||
|
});
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
this.file = ''
|
||||||
|
this.$refs.webview.evalJs(`canvasToTempFilePath()`);
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
this.$watch('file', async (file) => {
|
||||||
|
if(file) {
|
||||||
|
const tempFilePath = await base64ToPath(file)
|
||||||
|
resolve(args.success({tempFilePath}))
|
||||||
|
} else {
|
||||||
|
reject(args.fail({error: ``}))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
async init(echarts, ...args) {
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
if(args && args.length == 0 && !echarts) {
|
||||||
|
console.error('缺少参数:init(echarts, theme?:string, opts?: object, callback?: function)')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
let theme=null,opts={},callback;
|
||||||
|
// Array.from(arguments)
|
||||||
|
args.forEach(item => {
|
||||||
|
if(typeof item === 'function') {
|
||||||
|
callback = item
|
||||||
|
}
|
||||||
|
if(['string'].includes(typeof item)) {
|
||||||
|
theme = item
|
||||||
|
}
|
||||||
|
if(typeof item === 'object') {
|
||||||
|
opts = item
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if(this.beforeDelay) {
|
||||||
|
await sleep(this.beforeDelay)
|
||||||
|
}
|
||||||
|
let config = await this.getContext();
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
setCanvasCreator(echarts, config)
|
||||||
|
try {
|
||||||
|
this.chart = echarts.init(config.canvas, theme, Object.assign({}, config, opts || {}))
|
||||||
|
|
||||||
|
callback?.(this.chart)
|
||||||
|
return this.chart
|
||||||
|
} catch(e) {
|
||||||
|
console.error("【lime-echarts】:", e)
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
this.chart = new Echarts(this.$refs.webview)
|
||||||
|
this.$refs.webview.evalJs(`init(null, null, ${JSON.stringify(opts)}, ${theme})`)
|
||||||
|
callback?.(this.chart)
|
||||||
|
return this.chart
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
getContext() {
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
if(this.finished) {
|
||||||
|
return Promise.resolve(this.finished)
|
||||||
|
}
|
||||||
|
return new Promise(resolve => {
|
||||||
|
this.$watch('finished', (val) => {
|
||||||
|
if(val) {
|
||||||
|
resolve(this.finished)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
return getRect(`#${this.canvasId}`, this, this.use2dCanvas).then(res => {
|
||||||
|
if(res) {
|
||||||
|
let dpr = devicePixelRatio
|
||||||
|
let {width, height, node} = res
|
||||||
|
let canvas;
|
||||||
|
this.width = width = width || 300;
|
||||||
|
this.height = height = height || 300;
|
||||||
|
if(node) {
|
||||||
|
const ctx = node.getContext('2d');
|
||||||
|
canvas = new Canvas(ctx, this, true, node);
|
||||||
|
this.canvasNode = node
|
||||||
|
} else {
|
||||||
|
// #ifdef MP-TOUTIAO
|
||||||
|
dpr = !this.isPC ? devicePixelRatio : 1// 1.25
|
||||||
|
// #endif
|
||||||
|
// #ifndef MP-ALIPAY || MP-TOUTIAO
|
||||||
|
dpr = this.isPC ? devicePixelRatio : 1
|
||||||
|
// #endif
|
||||||
|
// #ifdef MP-ALIPAY || MP-LARK
|
||||||
|
dpr = devicePixelRatio
|
||||||
|
// #endif
|
||||||
|
// #ifdef WEB
|
||||||
|
dpr = 1
|
||||||
|
// #endif
|
||||||
|
this.rect = res
|
||||||
|
this.nodeWidth = width * dpr;
|
||||||
|
this.nodeHeight = height * dpr;
|
||||||
|
const ctx = uni.createCanvasContext(this.canvasId, this);
|
||||||
|
canvas = new Canvas(ctx, this, false);
|
||||||
|
}
|
||||||
|
|
||||||
|
return { canvas, width, height, devicePixelRatio: dpr, node };
|
||||||
|
} else {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
getRelative(e, touches) {
|
||||||
|
let { clientX, clientY } = e
|
||||||
|
if(!(clientX && clientY) && touches && touches[0]) {
|
||||||
|
clientX = touches[0].clientX
|
||||||
|
clientY = touches[0].clientY
|
||||||
|
}
|
||||||
|
return {x: clientX - this.rect.left, y: clientY - this.rect.top, wheelDelta: e.wheelDelta || 0}
|
||||||
|
},
|
||||||
|
getTouch(e, touches) {
|
||||||
|
const {x} = touches && touches[0] || {}
|
||||||
|
const touch = x ? touches[0] : this.getRelative(e, touches);
|
||||||
|
if(this.landscape) {
|
||||||
|
[touch.x, touch.y] = [touch.y, this.height - touch.x]
|
||||||
|
}
|
||||||
|
return touch;
|
||||||
|
},
|
||||||
|
touchStart(e) {
|
||||||
|
this.isDown = true
|
||||||
|
const next = () => {
|
||||||
|
const touches = convertTouchesToArray(e.touches)
|
||||||
|
if(this.chart) {
|
||||||
|
const touch = this.getTouch(e, touches)
|
||||||
|
this.startX = touch.x
|
||||||
|
this.startY = touch.y
|
||||||
|
this.startT = new Date()
|
||||||
|
const handler = this.chart.getZr().handler;
|
||||||
|
dispatch.call(handler, 'mousedown', touch)
|
||||||
|
dispatch.call(handler, 'mousemove', touch)
|
||||||
|
handler.processGesture(wrapTouch(e), 'start');
|
||||||
|
clearTimeout(this.endTimer);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
if(this.isPC) {
|
||||||
|
getRect(`#${this.canvasId}`, {context: this}).then(res => {
|
||||||
|
this.rect = res
|
||||||
|
next()
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
next()
|
||||||
|
},
|
||||||
|
touchMove(e) {
|
||||||
|
if(this.isPC && this.enableHover && !this.isDown) {this.isDown = true}
|
||||||
|
const touches = convertTouchesToArray(e.touches)
|
||||||
|
if (this.chart && this.isDown) {
|
||||||
|
const handler = this.chart.getZr().handler;
|
||||||
|
dispatch.call(handler, 'mousemove', this.getTouch(e, touches))
|
||||||
|
handler.processGesture(wrapTouch(e), 'change');
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
touchEnd(e) {
|
||||||
|
this.isDown = false
|
||||||
|
if (this.chart) {
|
||||||
|
const touches = convertTouchesToArray(e.changedTouches)
|
||||||
|
const {x} = touches && touches[0] || {}
|
||||||
|
const touch = (x ? touches[0] : this.getRelative(e, touches)) || {};
|
||||||
|
if(this.landscape) {
|
||||||
|
[touch.x, touch.y] = [touch.y, this.height - touch.x]
|
||||||
|
}
|
||||||
|
const handler = this.chart.getZr().handler;
|
||||||
|
const isClick = Math.abs(touch.x - this.startX) < 10 && new Date() - this.startT < 200;
|
||||||
|
dispatch.call(handler, 'mouseup', touch)
|
||||||
|
handler.processGesture(wrapTouch(e), 'end');
|
||||||
|
if(isClick) {
|
||||||
|
dispatch.call(handler, 'click', touch)
|
||||||
|
} else {
|
||||||
|
this.endTimer = setTimeout(() => {
|
||||||
|
dispatch.call(handler, 'mousemove', {x: 999999999,y: 999999999});
|
||||||
|
dispatch.call(handler, 'mouseup', {x: 999999999,y: 999999999});
|
||||||
|
},50)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
// #ifdef H5
|
||||||
|
mousewheel(e){
|
||||||
|
if(this.chart) {
|
||||||
|
dispatch.call(this.chart.getZr().handler, 'mousewheel', this.getTouch(e))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.lime-echart {
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
flex: 1;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
.lime-echart__canvas {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
flex: 1;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
.lime-echart__mask {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
/* #endif */
|
||||||
|
</style>
|
||||||
55
uni_modules/lime-echart/components/l-echart/nvue.js
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
export class Echarts {
|
||||||
|
eventMap = new Map()
|
||||||
|
constructor(webview) {
|
||||||
|
this.webview = webview
|
||||||
|
this.options = null
|
||||||
|
}
|
||||||
|
setOption() {
|
||||||
|
this.options = arguments
|
||||||
|
this.webview.evalJs(`setOption(${JSON.stringify(arguments)})`);
|
||||||
|
}
|
||||||
|
getOption() {
|
||||||
|
return this.options
|
||||||
|
}
|
||||||
|
showLoading() {
|
||||||
|
this.webview.evalJs(`showLoading(${JSON.stringify(arguments)})`);
|
||||||
|
}
|
||||||
|
hideLoading() {
|
||||||
|
this.webview.evalJs(`hideLoading()`);
|
||||||
|
}
|
||||||
|
clear() {
|
||||||
|
this.webview.evalJs(`clear()`);
|
||||||
|
}
|
||||||
|
dispose() {
|
||||||
|
this.webview.evalJs(`dispose()`);
|
||||||
|
}
|
||||||
|
resize(size) {
|
||||||
|
if(size) {
|
||||||
|
this.webview.evalJs(`resize(${JSON.stringify(size)})`);
|
||||||
|
} else {
|
||||||
|
this.webview.evalJs(`resize()`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
on(type, ...args) {
|
||||||
|
const query = args[0]
|
||||||
|
const useQuery = query && typeof query != 'function'
|
||||||
|
const param = useQuery ? [type, query] : [type]
|
||||||
|
const key = `${type}${useQuery ? JSON.stringify(query): '' }`
|
||||||
|
const callback = useQuery ? args[1]: args[0]
|
||||||
|
if(typeof callback == 'function'){
|
||||||
|
this.eventMap.set(key, callback)
|
||||||
|
}
|
||||||
|
this.webview.evalJs(`on(${JSON.stringify(param)})`);
|
||||||
|
console.warn('nvue 暂不支持事件')
|
||||||
|
}
|
||||||
|
dispatchAction(type, options){
|
||||||
|
const handler = this.eventMap.get(type)
|
||||||
|
if(handler){
|
||||||
|
handler(options)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 不让报错 无实际作用
|
||||||
|
isDisposed() {
|
||||||
|
return !!this.webview
|
||||||
|
}
|
||||||
|
}
|
||||||
185
uni_modules/lime-echart/components/l-echart/utils.js
Normal file
@@ -0,0 +1,185 @@
|
|||||||
|
// @ts-nocheck
|
||||||
|
/**
|
||||||
|
* 获取设备基础信息
|
||||||
|
*
|
||||||
|
* @see [uni.getDeviceInfo](https://uniapp.dcloud.net.cn/api/system/getDeviceInfo.html)
|
||||||
|
*/
|
||||||
|
export function getDeviceInfo() {
|
||||||
|
if (uni.getDeviceInfo || uni.canIUse('getDeviceInfo')) {
|
||||||
|
return uni.getDeviceInfo();
|
||||||
|
} else {
|
||||||
|
return uni.getSystemInfoSync();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取窗口信息
|
||||||
|
*
|
||||||
|
* @see [uni.getWindowInfo](https://uniapp.dcloud.net.cn/api/system/getWindowInfo.html)
|
||||||
|
*/
|
||||||
|
export function getWindowInfo() {
|
||||||
|
if (uni.getWindowInfo || uni.canIUse('getWindowInfo')) {
|
||||||
|
return uni.getWindowInfo();
|
||||||
|
} else {
|
||||||
|
return uni.getSystemInfoSync();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取APP基础信息
|
||||||
|
*
|
||||||
|
* @see [uni.getAppBaseInfo](https://uniapp.dcloud.net.cn/api/system/getAppBaseInfo.html)
|
||||||
|
*/
|
||||||
|
export function getAppBaseInfo() {
|
||||||
|
if (uni.getAppBaseInfo || uni.canIUse('getAppBaseInfo')) {
|
||||||
|
return uni.getAppBaseInfo();
|
||||||
|
} else {
|
||||||
|
return uni.getSystemInfoSync();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
// 计算版本
|
||||||
|
export function compareVersion(v1, v2) {
|
||||||
|
v1 = v1.split('.')
|
||||||
|
v2 = v2.split('.')
|
||||||
|
const len = Math.max(v1.length, v2.length)
|
||||||
|
while (v1.length < len) {
|
||||||
|
v1.push('0')
|
||||||
|
}
|
||||||
|
while (v2.length < len) {
|
||||||
|
v2.push('0')
|
||||||
|
}
|
||||||
|
for (let i = 0; i < len; i++) {
|
||||||
|
const num1 = parseInt(v1[i], 10)
|
||||||
|
const num2 = parseInt(v2[i], 10)
|
||||||
|
|
||||||
|
if (num1 > num2) {
|
||||||
|
return 1
|
||||||
|
} else if (num1 < num2) {
|
||||||
|
return -1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
// const systemInfo = uni.getSystemInfoSync();
|
||||||
|
|
||||||
|
function gte(version) {
|
||||||
|
// 截止 2023-03-22 mac pc小程序不支持 canvas 2d
|
||||||
|
// let {
|
||||||
|
// SDKVersion,
|
||||||
|
// platform
|
||||||
|
// } = systemInfo;
|
||||||
|
const { platform } = getDeviceInfo();
|
||||||
|
let { SDKVersion } = getAppBaseInfo();
|
||||||
|
// #ifdef MP-ALIPAY
|
||||||
|
SDKVersion = my.SDKVersion
|
||||||
|
// #endif
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
return platform !== 'mac' && compareVersion(SDKVersion, version) >= 0;
|
||||||
|
// #endif
|
||||||
|
return compareVersion(SDKVersion, version) >= 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function canIUseCanvas2d() {
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
return gte('2.9.0');
|
||||||
|
// #endif
|
||||||
|
// #ifdef MP-ALIPAY
|
||||||
|
return gte('2.7.0');
|
||||||
|
// #endif
|
||||||
|
// #ifdef MP-TOUTIAO
|
||||||
|
return gte('1.78.0');
|
||||||
|
// #endif
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
export function convertTouchesToArray(touches) {
|
||||||
|
// 如果 touches 是一个数组,则直接返回它
|
||||||
|
if (Array.isArray(touches)) {
|
||||||
|
return touches;
|
||||||
|
}
|
||||||
|
// 如果touches是一个对象,则转换为数组
|
||||||
|
if (typeof touches === 'object' && touches !== null) {
|
||||||
|
return Object.values(touches);
|
||||||
|
}
|
||||||
|
// 对于其他类型,直接返回它
|
||||||
|
return touches;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function wrapTouch(event) {
|
||||||
|
event.touches = convertTouchesToArray(event.touches)
|
||||||
|
for (let i = 0; i < event.touches.length; ++i) {
|
||||||
|
const touch = event.touches[i];
|
||||||
|
touch.offsetX = touch.x;
|
||||||
|
touch.offsetY = touch.y;
|
||||||
|
}
|
||||||
|
return event;
|
||||||
|
}
|
||||||
|
// export const devicePixelRatio = uni.getSystemInfoSync().pixelRatio
|
||||||
|
export const devicePixelRatio = getWindowInfo().pixelRatio;
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
export function base64ToPath(base64) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || [];
|
||||||
|
const bitmap = new plus.nativeObj.Bitmap('bitmap' + Date.now())
|
||||||
|
bitmap.loadBase64Data(base64, () => {
|
||||||
|
if (!format) {
|
||||||
|
reject(new Error('ERROR_BASE64SRC_PARSE'))
|
||||||
|
}
|
||||||
|
const time = new Date().getTime();
|
||||||
|
const filePath = `_doc/uniapp_temp/${time}.${format}`
|
||||||
|
|
||||||
|
bitmap.save(filePath, {},
|
||||||
|
() => {
|
||||||
|
bitmap.clear()
|
||||||
|
resolve(filePath)
|
||||||
|
},
|
||||||
|
(error) => {
|
||||||
|
bitmap.clear()
|
||||||
|
console.error(`${JSON.stringify(error)}`)
|
||||||
|
reject(error)
|
||||||
|
})
|
||||||
|
}, (error) => {
|
||||||
|
bitmap.clear()
|
||||||
|
console.error(`${JSON.stringify(error)}`)
|
||||||
|
reject(error)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
|
||||||
|
export function sleep(time) {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
resolve(true)
|
||||||
|
}, time)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function getRect(selector, context, node) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const dom = uni.createSelectorQuery().in(context).select(selector);
|
||||||
|
const result = (rect) => {
|
||||||
|
if (rect) {
|
||||||
|
resolve(rect)
|
||||||
|
} else {
|
||||||
|
reject()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!node) {
|
||||||
|
dom.boundingClientRect(result).exec()
|
||||||
|
} else {
|
||||||
|
dom.fields({
|
||||||
|
node: true,
|
||||||
|
size: true,
|
||||||
|
rect: true
|
||||||
|
}, result).exec()
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
136
uni_modules/lime-echart/components/l-echart/uvue.uts
Normal file
@@ -0,0 +1,136 @@
|
|||||||
|
// @ts-nocheck
|
||||||
|
// #ifdef APP
|
||||||
|
type EchartsEventHandler = (event: UTSJSONObject)=>void
|
||||||
|
// type EchartsTempResolve = (obj : UTSJSONObject) => void
|
||||||
|
// type EchartsTempOptions = UTSJSONObject
|
||||||
|
export class Echarts {
|
||||||
|
options: UTSJSONObject = {} as UTSJSONObject
|
||||||
|
context: UniWebViewElement
|
||||||
|
eventMap: Map<string, EchartsEventHandler> = new Map()
|
||||||
|
private temp: UTSJSONObject[] = []
|
||||||
|
constructor(context: UniWebViewElement){
|
||||||
|
this.context = context
|
||||||
|
this.init()
|
||||||
|
}
|
||||||
|
init(){
|
||||||
|
this.context.evalJS(`init(null, null, ${JSON.stringify({})})`)
|
||||||
|
|
||||||
|
this.context.addEventListener('message', (e : UniWebViewMessageEvent) => {
|
||||||
|
// event.stopPropagation()
|
||||||
|
// event.preventDefault()
|
||||||
|
|
||||||
|
const detail = e.detail.data[0]
|
||||||
|
const file = detail.getString('file')
|
||||||
|
const data = detail.get('data')
|
||||||
|
const key = detail.getString('event')
|
||||||
|
const options = typeof data == 'object' ? (data as UTSJSONObject).getJSON('options'): null
|
||||||
|
const event = typeof data == 'object' ? (data as UTSJSONObject).getString('event'): null
|
||||||
|
if (key == 'log' && data != null) {
|
||||||
|
console.log(data)
|
||||||
|
}
|
||||||
|
if (event != null && options != null) {
|
||||||
|
this.dispatchAction(event.replace(/"/g,''), options)
|
||||||
|
}
|
||||||
|
if(file != null){
|
||||||
|
while (this.temp.length > 0) {
|
||||||
|
const opt = this.temp.pop()
|
||||||
|
const success = opt?.get('success')
|
||||||
|
if(typeof success == 'function'){
|
||||||
|
success as (res: UTSJSONObject) => void
|
||||||
|
success({tempFilePath: file})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
setOption(option: UTSJSONObject){
|
||||||
|
this.options = option;
|
||||||
|
this.context.evalJS(`setOption(${JSON.stringify([option])})`)
|
||||||
|
}
|
||||||
|
setOption(option: UTSJSONObject, notMerge: boolean = false, lazyUpdate: boolean = false){
|
||||||
|
this.options = option;
|
||||||
|
this.context.evalJS(`setOption(${JSON.stringify([option, notMerge, lazyUpdate])})`)
|
||||||
|
}
|
||||||
|
setOption(option: UTSJSONObject, notMerge: UTSJSONObject){
|
||||||
|
this.options = option;
|
||||||
|
this.context.evalJS(`setOption(${JSON.stringify([option, notMerge])})`)
|
||||||
|
}
|
||||||
|
getOption(): UTSJSONObject {
|
||||||
|
return this.options
|
||||||
|
}
|
||||||
|
showLoading(){
|
||||||
|
this.context.evalJS(`showLoading(${JSON.stringify([] as any[])})`);
|
||||||
|
}
|
||||||
|
showLoading(type: string, opts: UTSJSONObject){
|
||||||
|
this.context.evalJS(`showLoading(${JSON.stringify([type, opts])})`);
|
||||||
|
}
|
||||||
|
hideLoading(){
|
||||||
|
this.context.evalJS(`hideLoading()`);
|
||||||
|
}
|
||||||
|
clear(){
|
||||||
|
this.context.evalJS(`clear()`);
|
||||||
|
}
|
||||||
|
dispose(){
|
||||||
|
this.context.evalJS(`dispose()`);
|
||||||
|
}
|
||||||
|
resize(size:UTSJSONObject){
|
||||||
|
setTimeout(()=>{
|
||||||
|
this.context.evalJS(`resize(${JSON.stringify(size)})`);
|
||||||
|
},0)
|
||||||
|
}
|
||||||
|
resize(){
|
||||||
|
setTimeout(()=>{
|
||||||
|
this.context.evalJS(`resize()`);
|
||||||
|
},10)
|
||||||
|
|
||||||
|
}
|
||||||
|
on(type:string, query: any, callback: EchartsEventHandler) {
|
||||||
|
const key = `${type}${JSON.stringify(query)}`
|
||||||
|
if(typeof callback == 'function'){
|
||||||
|
this.eventMap.set(key, callback)
|
||||||
|
}
|
||||||
|
this.context.evalJS(`on(${JSON.stringify([type, query])})`);
|
||||||
|
console.warn('uvue 暂不支持事件')
|
||||||
|
}
|
||||||
|
on(type:string, callback: EchartsEventHandler) {
|
||||||
|
const key = `${type}`
|
||||||
|
if(typeof callback == 'function'){
|
||||||
|
this.eventMap.set(key, callback)
|
||||||
|
}
|
||||||
|
this.context.evalJS(`on(${JSON.stringify([type])})`);
|
||||||
|
console.warn('uvue 暂不支持事件')
|
||||||
|
}
|
||||||
|
dispatchAction(type:string, options: UTSJSONObject){
|
||||||
|
const handler = this.eventMap.get(type)
|
||||||
|
if(handler!=null){
|
||||||
|
handler(options)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
canvasToTempFilePath(opt: UTSJSONObject){
|
||||||
|
// this.context.evalJS(`on(${JSON.stringify(opt)})`);
|
||||||
|
this.context.evalJS(`canvasToTempFilePath(${JSON.stringify(opt)})`);
|
||||||
|
this.temp.push(opt)
|
||||||
|
}
|
||||||
|
isDisposed():boolean {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// #endif
|
||||||
|
// #ifndef APP
|
||||||
|
export class Echarts {
|
||||||
|
constructor() {}
|
||||||
|
setOption(option: UTSJSONObject): void
|
||||||
|
isDisposed(): boolean;
|
||||||
|
clear(): void;
|
||||||
|
resize(size:UTSJSONObject): void;
|
||||||
|
resize(): void;
|
||||||
|
canvasToTempFilePath(opt : UTSJSONObject): void;
|
||||||
|
dispose(): void;
|
||||||
|
showLoading(cfg?: UTSJSONObject): void;
|
||||||
|
showLoading(name?: string, cfg?: UTSJSONObject): void;
|
||||||
|
hideLoading(): void;
|
||||||
|
getZr(): any
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
159
uni_modules/lime-echart/components/lime-echart/lime-echart.nvue
Normal file
@@ -0,0 +1,159 @@
|
|||||||
|
<template>
|
||||||
|
<view style="width: 100%; height: 408px;">
|
||||||
|
<l-echart ref="chartRef" @finished="init"></l-echart>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showTip: false,
|
||||||
|
option: {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
// shadowBlur: 0,
|
||||||
|
textStyle: {
|
||||||
|
textShadowBlur: 0
|
||||||
|
},
|
||||||
|
renderMode: 'richText',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '邮件营销',
|
||||||
|
type: 'line',
|
||||||
|
stack: '总量',
|
||||||
|
data: [120, 132, 101, 134, 90, 230, 210]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '联盟广告',
|
||||||
|
type: 'line',
|
||||||
|
stack: '总量',
|
||||||
|
data: [220, 182, 191, 234, 290, 330, 310]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '视频广告',
|
||||||
|
type: 'line',
|
||||||
|
stack: '总量',
|
||||||
|
data: [150, 232, 201, 154, 190, 330, 410]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '直接访问',
|
||||||
|
type: 'line',
|
||||||
|
stack: '总量',
|
||||||
|
data: [320, 332, 301, 334, 390, 330, 320]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '搜索引擎',
|
||||||
|
type: 'line',
|
||||||
|
stack: '总量',
|
||||||
|
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
console.log('lime echarts nvue')
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
const chartRef = this.$refs['chartRef']
|
||||||
|
chartRef.init(chart => {
|
||||||
|
chart.setOption(this.option);
|
||||||
|
|
||||||
|
|
||||||
|
setTimeout(()=>{
|
||||||
|
const option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
// shadowBlur: 0,
|
||||||
|
textStyle: {
|
||||||
|
textShadowBlur: 0
|
||||||
|
},
|
||||||
|
renderMode: 'richText',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '邮件营销',
|
||||||
|
type: 'line',
|
||||||
|
stack: '总量',
|
||||||
|
data: [120, 132, 101, 134, 90, 230, 210]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '联盟广告',
|
||||||
|
type: 'line',
|
||||||
|
stack: '总量',
|
||||||
|
data: [220, 182, 191, 234, 290, 330, 310]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '视频广告',
|
||||||
|
type: 'line',
|
||||||
|
stack: '总量',
|
||||||
|
data: [150, 232, 201, 154, 190, 330, 410]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '直接访问',
|
||||||
|
type: 'line',
|
||||||
|
stack: '总量',
|
||||||
|
data: [320, 332, 301, 334, 390, 330, 320]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '搜索引擎',
|
||||||
|
type: 'line',
|
||||||
|
stack: '总量',
|
||||||
|
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
chart.setOption(option);
|
||||||
|
},1000)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
save() {
|
||||||
|
// this.$refs.chart.canvasToTempFilePath({
|
||||||
|
// success(res) {
|
||||||
|
// console.log('res::::', res)
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||