Skip to content

GitLab

X
xundao
Commit a5da8ef5 authored by xiaochenghua's avatar xiaochenghua
Browse files
Options

feat: 支持分享

parent 4a64798f
Show whitespace changes
Inline Side-by-side
Showing with 304 additions and 189 deletions
app.json
View file @ a5da8ef5
{ {
"pages":[ "pages":[
"pages/index/index" "pages/index/index",
"pages/wuxingres/index"
], ],
"window":{ "window":{
"backgroundTextStyle":"light", "backgroundTextStyle":"light",
......
pages/index/index.js
View file @ a5da8ef5
import calendarFormatter from '../../utils/calendarFormatter'; import calendarFormatter from '../../utils/calendarFormatter';
import {formatTime} from '../../utils/util'; import {formatTime} from '../../utils/util';
import * as echarts from '../../components/ec-canvas/echarts';
const G = ["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
const Z = ["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
const SGZ = [
Z.map((z, i) => `${G[i > 9 ? i - 9 : i]}${z}`),
Z.map((z, i) => `${G[i > 7 ? i - 8 : i + 2]}${z}`),
Z.map((z, i) => `${G[i > 5 ? i - 6 : i + 4]}${z}`),
Z.map((z, i) => `${G[i > 3 ? i - 4 : i + 6]}${z}`),
Z.map((z, i) => `${G[i > 1 ? i - 2 : i + 8]}${z}`),
];
const DATAH = []; const DATAH = [];
for (let i = 0; i< 24; i++) { for (let i = 0; i< 24; i++) {
DATAH.push(i) DATAH.push({value: i, label: `${i}点`})
} }
Page({ Page({
data: { data: {
...@@ -22,33 +11,12 @@ Page({ ...@@ -22,33 +11,12 @@ Page({
valueH: '0', valueH: '0',
res: {}, res: {},
dataH: DATAH, dataH: DATAH,
wuxing: {
jin: 0,
mu: 0,
shui: 0,
huo: 0,
tu: 0,
},
ec: {
lazyLoad: true,
},
allColors: [
'rgb(130,57,53)',
'rgb(137,190,178)',
'rgb(201,186,131)',
'rgb(222,211,140)',
'rgb(222,156,83)',
'rgb(159,125,80)',
'rgb(17,63,61)',
'rgb(60,79,57)',
'rgb(98,92,51)',
'rgb(179,214,110)',
],
}, },
onLoad() { onLoad() {
this.echart =this.selectComponent('#mychart'); this.echart =this.selectComponent('#mychart');
}, },
handleDate(e) { handleDate(e) {
this.setData({ this.setData({
valueDate: e.detail.value, valueDate: e.detail.value,
...@@ -61,85 +29,8 @@ Page({ ...@@ -61,85 +29,8 @@ Page({
}, },
handleScle() { handleScle() {
const { valueDate, valueH } = this.data; const { valueDate, valueH } = this.data;
const temp = valueDate.split('-'); wx.redirectTo({
const v = calendarFormatter.solar2lunar(temp[0],temp[1],temp[2]); url: `/pages/wuxingres/index?valueDate=${valueDate}&valueH=${valueH}&flag=1`,
const d = v.gzDay[0]; })
const i = G.indexOf(d);
const r = i > 4 ? i - 5 : i;
const h = Math.floor((Number(valueH) + 1) / 2);
v.gzHour = SGZ[r][h > 0 && h < 12 ? h : 0];
const wuxing = this.getWuxing(v);
this.initChart(wuxing);
this.setData({
res: v,
wuxing,
});
},
getWuxing(v) {
const wuxing = [...`${v.gzYear}${v.gzMonth}${v.gzDay}${v.gzHour}${v.Animal}`];
const res = {
jin: 0,
mu: 0,
shui: 0,
huo: 0,
tu: 0,
};
wuxing.forEach(i => {
switch (true) {
case '庚辛申酉猴鸡'.indexOf(i) > -1:
res.jin += 1;
break;
case '甲乙寅卯虎兔'.indexOf(i) > -1:
res.mu += 1;
break;
case '壬癸亥子鼠猪'.indexOf(i) > -1:
res.shui += 1;
break;
case '丙丁巳午蛇马'.indexOf(i) > -1:
res.huo += 1;
break;
case '戊己辰戌丑未牛龙羊狗'.indexOf(i) > -1:
res.tu += 1;
break;
}
});
return res;
},
/**设置图表映射 */
initChart: function(wuxing) {
const option = {
series: [
{
name: 'Area Mode',
type: 'pie',
radius: [20, 140],
center: ['50%', '60%'],
roseType: 'area',
itemStyle: {
borderRadius: 5
},
data: [
{ value: wuxing.jin, name: '金' },
{ value: wuxing.mu, name: '木' },
{ value: wuxing.shui, name: '水' },
{ value: wuxing.huo, name: '火' },
{ value: wuxing.tu, name: '土' },
]
}
]
};
//echarts会继承父元素的宽高,所以我们一定要设置echarts组件父元素的高度。
this.echart.init((canvas) => {
const chart = echarts.init(canvas, null, {
width: 400,
height: 400,
devicePixelRatio: 2,
});
//给echarts 设置数据及配置项（图表类型、数据量等）
chart.setOption(option);
console.log('=========')
return chart;
});
}, },
}) })
pages/index/index.wxml
View file @ a5da8ef5
...@@ -5,42 +5,17 @@ ...@@ -5,42 +5,17 @@
<view class="center"> <view class="center">
<view> <view>
<picker mode="date" value="{{valueDate}}" bindchange="handleDate"> <picker mode="date" value="{{valueDate}}" bindchange="handleDate">
<view class="form-item">选择公历日期：{{valueDate}}</view> <view class="form-item">
选择公历日期：{{valueDate}}
</view>
</picker> </picker>
<picker bindchange="handleHour" value="{{valueH}}" range="{{dataH}}"> <picker bindchange="handleHour" range-key="label" value="{{valueH}}" range="{{dataH}}">
<view class="form-item"> <view class="form-item">
时间：{{valueH}}点 选择时间：{{valueH}}点
</view> </view>
</picker> </picker>
</view> </view>
</view> </view>
<button type="primary" class="button" bind:tap="handleScle">计算八字</button> <button type="primary" class="button" bind:tap="handleScle">计算八字</button>
<view class="result">
<view class="nongli" wx:if="{{res.gzYear}}">
农历 {{res.gzYear}}{{res.Animal}}年 {{res.IMonthCn}} {{res.IDayCn}} {{res.ncWeek}}
</view>
<view class="flex-box" wx:if="{{res.gzYear}}">
<view class="res-title">八字：</view>
<view class="flex-content">
<view style="background-color: {{allColors[4]}};">{{res.gzYear}}</view>
<view style="background-color: {{allColors[1]}};">{{res.gzMonth}}</view>
<view style="background-color: {{allColors[2]}};">{{res.gzDay}}</view>
<view style="background-color: {{allColors[3]}};">{{res.gzHour}}</view>
</view>
</view>
<view class="flex-box" wx:if="{{res.gzYear}}">
<view class="res-title">五行：</view>
<view class="flex-content wx">
<view style="background-color: rgb(179, 63, 56);">金：{{wuxing.jin}}</view>
<view style="background-color: rgb(53,70,83);">木：{{wuxing.mu}}</view>
<view style="background-color: rgb(110,158,165);">水：{{wuxing.shui}}</view>
<view style="background-color: rgb(201,134,108);">火：{{wuxing.huo}}</view>
<view style="background-color: rgb(155,195,174);">土：{{wuxing.tu}}</view>
</view>
</view>
<view class="echart">
<ec-canvas id="mychart" canvas-id="mychart" ec="{{ ec }}"></ec-canvas>
</view>
</view>
</view> </view>
\ No newline at end of file
pages/index/index.wxss
View file @ a5da8ef5
.page {
/* padding: 32rpx; */
}
.header {
}
.title { .title {
width: 100%; width: 100%;
text-align: center; text-align: center;
...@@ -22,49 +15,17 @@ ...@@ -22,49 +15,17 @@
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
} }
.form-item::before {
content: '*';
color: red;
}
.button { .button {
width: 100%; width: 100%;
margin: 32rpx 0; margin: 32rpx 0;
z-index: 8; z-index: 8;
} }
.result {
padding: 32rpx;
}
.echart {
height: 100vw;
margin-top: -120rpx;
}
.flex-box {
display: flex;
margin: 32rpx 0;
font-size: 36rpx;
}
.nongli, .res-title {
font-weight: 500;
font-size: 36rpx;
}
.flex-content {
flex: 1;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
font-size: 36rpx;
}
.flex-content view {
text-align: center;
width: 20%;
}
.wx {
flex-wrap: nowrap;
}
.wx view {
color: #fff;
margin-right: 3rpx;
}
pages/wuxingres/index.js 0 → 100644
View file @ a5da8ef5
import calendarFormatter from '../../utils/calendarFormatter';
import {formatTime} from '../../utils/util';
import * as echarts from '../../components/ec-canvas/echarts';
const G = ["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
const Z = ["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
const SGZ = [
Z.map((z, i) => `${G[i > 9 ? i - 9 : i]}${z}`),
Z.map((z, i) => `${G[i > 7 ? i - 8 : i + 2]}${z}`),
Z.map((z, i) => `${G[i > 5 ? i - 6 : i + 4]}${z}`),
Z.map((z, i) => `${G[i > 3 ? i - 4 : i + 6]}${z}`),
Z.map((z, i) => `${G[i > 1 ? i - 2 : i + 8]}${z}`),
];
const DATAH = [];
for (let i = 0; i< 24; i++) {
DATAH.push({value: i, label: `${i}点`})
}
Page({
data: {
valueDate: undefined,
valueH: undefined,
flag: false,
res: {},
dataH: DATAH,
wuxing: {
jin: 0,
mu: 0,
shui: 0,
huo: 0,
tu: 0,
},
ec: {
lazyLoad: true,
},
allColors: [
'rgb(130,57,53)',
'rgb(137,190,178)',
'rgb(201,186,131)',
'rgb(222,211,140)',
'rgb(222,156,83)',
'rgb(159,125,80)',
'rgb(17,63,61)',
'rgb(60,79,57)',
'rgb(98,92,51)',
'rgb(179,214,110)',
],
},
onLoad(e) {
const { valueDate, valueH, flag } = e;
this.setData({valueDate, valueH, flag: flag === '1' });
},
onShow(){
this.echart =this.selectComponent('#mychart');
this.handleScle();
},
onShareAppMessage() {
const { valueDate, valueH } = this.data;
const promise = new Promise(resolve => {
resolve({
title: '这是我的八字与五行分布',
path: `/pages/wuxingres/index?valueDate=${valueDate}&valueH=${valueH}`,
})
});
return {
title: '我的八字与五行分布',
path: `/pages/wuxingres/index?valueDate=${valueDate}&valueH=${valueH}`,
promise
}
},
onShareTimeline() {
const { valueDate, valueH } = this.data;
return {
title: '我的八字与五行分布',
query: `valueDate=${valueDate}&valueH=${valueH}`,
}
},
handleScle() {
const { valueDate, valueH } = this.data;
const temp = valueDate.split('-');
const v = calendarFormatter.solar2lunar(temp[0],temp[1],temp[2]);
const d = v.gzDay[0];
const i = G.indexOf(d);
const r = i > 4 ? i - 5 : i;
const h = Math.floor((Number(valueH) + 1) / 2);
v.gzHour = SGZ[r][h > 0 && h < 12 ? h : 0];
const wuxing = this.getWuxing(v);
this.initChart(wuxing);
this.setData({
res: v,
wuxing,
});
},
getWuxing(v) {
const wuxing = [...`${v.gzYear}${v.gzMonth}${v.gzDay}${v.gzHour}`];
const res = {
jin: 0,
mu: 0,
shui: 0,
huo: 0,
tu: 0,
};
wuxing.forEach(i => {
switch (true) {
case '庚辛申酉'.indexOf(i) > -1:
res.jin += 1;
break;
case '甲乙寅卯'.indexOf(i) > -1:
res.mu += 1;
break;
case '壬癸亥子'.indexOf(i) > -1:
res.shui += 1;
break;
case '丙丁巳午'.indexOf(i) > -1:
res.huo += 1;
break;
case '戊己辰戌丑未'.indexOf(i) > -1:
res.tu += 1;
break;
}
});
return res;
},
goback() {
wx.redirectTo({
url: '/pages/index/index',
})
},
/**设置图表映射 */
initChart: function(wuxing) {
const option = {
series: [
{
name: 'Area Mode',
type: 'pie',
radius: [20, 140],
center: ['50%', '60%'],
roseType: 'area',
itemStyle: {
borderRadius: 5
},
data: [
{ value: wuxing.jin, name: '金' },
{ value: wuxing.mu, name: '木' },
{ value: wuxing.shui, name: '水' },
{ value: wuxing.huo, name: '火' },
{ value: wuxing.tu, name: '土' },
]
}
]
};
//echarts会继承父元素的宽高,所以我们一定要设置echarts组件父元素的高度。
this.echart.init((canvas) => {
const chart = echarts.init(canvas, null, {
width: 400,
height: 400,
devicePixelRatio: 2,
});
//给echarts 设置数据及配置项（图表类型、数据量等）
chart.setOption(option);
return chart;
});
},
})
pages/wuxingres/index.json 0 → 100644
View file @ a5da8ef5
{
"usingComponents": {
"ec-canvas": "../../components/ec-canvas/ec-canvas"
}
}
\ No newline at end of file
pages/wuxingres/index.wxml 0 → 100644
View file @ a5da8ef5
<view class="page">
<view class="header">
<view class="title">我的八字与五行分布</view>
</view>
<view class="result" >
<view class="nongli">
农历: {{res.gzYear}}{{res.Animal}}年 {{res.IMonthCn}} {{res.IDayCn}} {{res.ncWeek}}
</view>
<view class="flex-box">
<view class="res-title">八字：</view>
<view class="flex-content">
<view style="background-color: {{allColors[4]}};">{{res.gzYear}}</view>
<view style="background-color: {{allColors[1]}};">{{res.gzMonth}}</view>
<view style="background-color: {{allColors[2]}};">{{res.gzDay}}</view>
<view style="background-color: {{allColors[3]}};">{{res.gzHour}}</view>
</view>
</view>
<view class="flex-box">
<view class="res-title">五行：</view>
<view class="flex-content wx">
<view style="background-color: rgb(179, 63, 56);">金：{{wuxing.jin}}</view>
<view style="background-color: rgb(53,70,83);">木：{{wuxing.mu}}</view>
<view style="background-color: rgb(110,158,165);">水：{{wuxing.shui}}</view>
<view style="background-color: rgb(201,134,108);">火：{{wuxing.huo}}</view>
<view style="background-color: rgb(155,195,174);">土：{{wuxing.tu}}</view>
</view>
</view>
<view class="echart">
<ec-canvas id="mychart" canvas-id="mychart" ec="{{ ec }}"></ec-canvas>
</view>
<view>
<button wx:if="{{res.gzYear && flag}}" type="primary" open-type="share" class="button">分享给好友</button>
<button wx:if="{{res.gzYear}}" type="default" class="button" bind:tap="goback">{{ flag ? '重新计算' : '我也算算'}}</button>
</view>
</view>
</view>
\ No newline at end of file
pages/wuxingres/index.wxss 0 → 100644
View file @ a5da8ef5
.page {
/* padding: 32rpx; */
}
.header {
}
.title {
width: 100%;
text-align: center;
font-size: 48rpx;
margin: 32rpx 0;
}
.center {
margin: 32rpx;
}
.form-item {
height: 100rpx;
line-height: 100rpx;
border-bottom: 1px solid #e5e5e5;
}
.form-item::before {
content: '*';
color: red;
}
.button {
width: 100%;
margin: 32rpx 0;
z-index: 8;
}
.result {
padding: 32rpx;
}
.echart {
height: 100vw;
margin-top: -120rpx;
}
.flex-box {
display: flex;
margin: 32rpx 0;
font-size: 36rpx;
}
.nongli, .res-title {
font-weight: 500;
font-size: 36rpx;
}
.flex-content {
flex: 1;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
font-size: 36rpx;
}
.flex-content view {
text-align: center;
width: 20%;
}
.wx {
flex-wrap: nowrap;
}
.wx view {
color: #fff;
margin-right: 3rpx;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment