|
@@ -3,7 +3,9 @@ import { Row, Col, Icon, message, Input, Button, Modal, Form, Tabs } from "antd"
|
|
|
import header from './header.png';
|
|
|
import keydown from './keydown.png';
|
|
|
import hint from './hint.png';
|
|
|
-import { PlusOutlined } from '@ant-design/icons';
|
|
|
+import { connect } from "dva";
|
|
|
+import { config, request } from "utils";
|
|
|
+const { APIV4,WXMpAPI } = config;
|
|
|
|
|
|
const { TabPane } = Tabs;
|
|
|
const { TextArea } = Input;
|
|
@@ -17,82 +19,82 @@ class customMenu extends React.Component {
|
|
|
editType: 1,
|
|
|
dropText: "删除菜单",
|
|
|
// 选中的菜单坐标,faIndex必须存在[0-2],subIndex可以为空,为空时删除父菜单
|
|
|
- selectMenu: {faIndex: null, subIndex: null},
|
|
|
+ selectMenu: { faIndex: null, subIndex: null },
|
|
|
testOption: {},
|
|
|
menuData: {
|
|
|
"menu": {
|
|
|
"buttons": [
|
|
|
- {
|
|
|
- "type": "click",
|
|
|
- "name": "今日歌曲",
|
|
|
- "key": "V1001_TODAY_MUSIC",
|
|
|
- "url": null,
|
|
|
- "mediaId": null,
|
|
|
- "appId": null,
|
|
|
- "pagePath": null,
|
|
|
- "subButtons": []
|
|
|
- },
|
|
|
- {
|
|
|
- "type": null,
|
|
|
- "name": "菜单",
|
|
|
- "key": null,
|
|
|
- "url": null,
|
|
|
- "mediaId": null,
|
|
|
- "appId": null,
|
|
|
- "pagePath": null,
|
|
|
- "subButtons": [
|
|
|
- {
|
|
|
- "type": "view",
|
|
|
- "name": "搜索",
|
|
|
- "key": null,
|
|
|
- "url": "http://www.soso.com/",
|
|
|
- "mediaId": null,
|
|
|
- "appId": null,
|
|
|
- "pagePath": null,
|
|
|
- "subButtons": []
|
|
|
- },
|
|
|
- {
|
|
|
- "type": "view",
|
|
|
- "name": "视频",
|
|
|
- "key": null,
|
|
|
- "url": "http://v.qq.com/",
|
|
|
- "mediaId": null,
|
|
|
- "appId": null,
|
|
|
- "pagePath": null,
|
|
|
- "subButtons": []
|
|
|
- },
|
|
|
- {
|
|
|
- "type": "click",
|
|
|
- "name": "赞一下我们",
|
|
|
- "key": "V1001_GOOD",
|
|
|
- "url": null,
|
|
|
- "mediaId": null,
|
|
|
- "appId": null,
|
|
|
- "pagePath": null,
|
|
|
- "subButtons": []
|
|
|
- },
|
|
|
- {
|
|
|
- "type": "view",
|
|
|
- "name": "获取用户信息",
|
|
|
- "key": null,
|
|
|
- "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx4f8c9fef3896ad71&redirect_uri=http%3A%2F%2Flocalhost%2Fwx%2Fredirect%2Fwx4f8c9fef3896ad71%2Fgreet&response_type=code&scope=snsapi_userinfo&state=&connect_redirect=1#wechat_redirect",
|
|
|
- "mediaId": null,
|
|
|
- "appId": null,
|
|
|
- "pagePath": null,
|
|
|
- "subButtons": []
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- "type": "click",
|
|
|
- "name": "戳我",
|
|
|
- "key": "V1001_TODAY_MUSIC",
|
|
|
- "url": null,
|
|
|
- "mediaId": null,
|
|
|
- "appId": null,
|
|
|
- "pagePath": null,
|
|
|
- "subButtons": []
|
|
|
- }
|
|
|
+ // {
|
|
|
+ // "type": "click",
|
|
|
+ // "name": "今日歌曲",
|
|
|
+ // "key": "V1001_TODAY_MUSIC",
|
|
|
+ // "url": null,
|
|
|
+ // "mediaId": null,
|
|
|
+ // "appId": null,
|
|
|
+ // "pagePath": null,
|
|
|
+ // "subButtons": []
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // "type": null,
|
|
|
+ // "name": "菜单",
|
|
|
+ // "key": null,
|
|
|
+ // "url": null,
|
|
|
+ // "mediaId": null,
|
|
|
+ // "appId": null,
|
|
|
+ // "pagePath": null,
|
|
|
+ // "subButtons": [
|
|
|
+ // {
|
|
|
+ // "type": "view",
|
|
|
+ // "name": "搜索",
|
|
|
+ // "key": null,
|
|
|
+ // "url": "http://www.soso.com/",
|
|
|
+ // "mediaId": null,
|
|
|
+ // "appId": null,
|
|
|
+ // "pagePath": null,
|
|
|
+ // "subButtons": []
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // "type": "view",
|
|
|
+ // "name": "视频",
|
|
|
+ // "key": null,
|
|
|
+ // "url": "http://v.qq.com/",
|
|
|
+ // "mediaId": null,
|
|
|
+ // "appId": null,
|
|
|
+ // "pagePath": null,
|
|
|
+ // "subButtons": []
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // "type": "click",
|
|
|
+ // "name": "赞一下我们",
|
|
|
+ // "key": "V1001_GOOD",
|
|
|
+ // "url": null,
|
|
|
+ // "mediaId": null,
|
|
|
+ // "appId": null,
|
|
|
+ // "pagePath": null,
|
|
|
+ // "subButtons": []
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // "type": "view",
|
|
|
+ // "name": "获取用户信息",
|
|
|
+ // "key": null,
|
|
|
+ // "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx4f8c9fef3896ad71&redirect_uri=http%3A%2F%2Flocalhost%2Fwx%2Fredirect%2Fwx4f8c9fef3896ad71%2Fgreet&response_type=code&scope=snsapi_userinfo&state=&connect_redirect=1#wechat_redirect",
|
|
|
+ // "mediaId": null,
|
|
|
+ // "appId": null,
|
|
|
+ // "pagePath": null,
|
|
|
+ // "subButtons": []
|
|
|
+ // }
|
|
|
+ // ]
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // "type": "click",
|
|
|
+ // "name": "戳我",
|
|
|
+ // "key": "V1001_TODAY_MUSIC",
|
|
|
+ // "url": null,
|
|
|
+ // "mediaId": null,
|
|
|
+ // "appId": null,
|
|
|
+ // "pagePath": null,
|
|
|
+ // "subButtons": []
|
|
|
+ // }
|
|
|
],
|
|
|
"rule": null,
|
|
|
"menuId": null
|
|
@@ -103,6 +105,18 @@ class customMenu extends React.Component {
|
|
|
|
|
|
};
|
|
|
|
|
|
+ componentWillMount() {
|
|
|
+ let self = this;
|
|
|
+ request({
|
|
|
+ // url: WXMpAPI + "/wx/menu/" + self.props.wxAppIdValue + "/get",
|
|
|
+ url: WXMpAPI + "/wx/menu/wx4f8c9fef3896ad71/get",
|
|
|
+ method: "get"
|
|
|
+ }).then(result => {
|
|
|
+ console.log(result);
|
|
|
+
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
// 点击菜单时
|
|
|
/**
|
|
@@ -114,12 +128,12 @@ class customMenu extends React.Component {
|
|
|
clickFaMenu(index) {
|
|
|
// console.log(e);
|
|
|
let faMenuArray = this.state.menuData.menu.buttons;
|
|
|
- let editType, dropText="删除菜单";
|
|
|
- let selectMenu = {faIndex: index, subIndex: null};
|
|
|
+ let editType, dropText = "删除菜单";
|
|
|
+ let selectMenu = { faIndex: index, subIndex: null };
|
|
|
// console.log(faMenuArray[index]);
|
|
|
- if(faMenuArray[index].subButtons.length>0){
|
|
|
+ if (faMenuArray[index].subButtons.length > 0) {
|
|
|
editType = 1;
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
editType = 2;
|
|
|
}
|
|
|
// console.log(editType);
|
|
@@ -132,7 +146,7 @@ class customMenu extends React.Component {
|
|
|
clickSubMenu(index, i) {
|
|
|
console.log(index);
|
|
|
console.log(i);
|
|
|
- let selectMenu = {faIndex: index, subIndex: i};
|
|
|
+ let selectMenu = { faIndex: index, subIndex: i };
|
|
|
let editType = 2;
|
|
|
this.setState({
|
|
|
editType: editType,
|
|
@@ -143,8 +157,8 @@ class customMenu extends React.Component {
|
|
|
let jsonData = this.state.menuData;
|
|
|
let length = jsonData.menu.buttons.length;
|
|
|
console.log(index)
|
|
|
- // 暂时只添加子菜单的逻辑
|
|
|
- if(index<length){
|
|
|
+ // 添加子菜单
|
|
|
+ if (index < length) {
|
|
|
jsonData.menu.buttons[index].subButtons.push({
|
|
|
"type": "",
|
|
|
"name": "请输入",
|
|
@@ -155,6 +169,19 @@ class customMenu extends React.Component {
|
|
|
"pagePath": null,
|
|
|
})
|
|
|
}
|
|
|
+ // 添加父菜单
|
|
|
+ else {
|
|
|
+ jsonData.menu.buttons.push({
|
|
|
+ "type": "",
|
|
|
+ "name": "请输入",
|
|
|
+ "key": null,
|
|
|
+ "url": null,
|
|
|
+ "mediaId": null,
|
|
|
+ "appId": null,
|
|
|
+ "pagePath": null,
|
|
|
+ "subButtons": []
|
|
|
+ });
|
|
|
+ }
|
|
|
console.log(jsonData);
|
|
|
this.setState({
|
|
|
menuData: jsonData
|
|
@@ -166,22 +193,22 @@ class customMenu extends React.Component {
|
|
|
let jsonData = this.state.menuData;
|
|
|
let faIndex = this.state.selectMenu.faIndex;
|
|
|
let subIndex = this.state.selectMenu.subIndex;
|
|
|
- if(faIndex==null){
|
|
|
+ if (faIndex == null) {
|
|
|
message.warn("请选择需要删除的菜单!");
|
|
|
return;
|
|
|
}
|
|
|
- if(faIndex!=null && subIndex==null){
|
|
|
+ if (faIndex != null && subIndex == null) {
|
|
|
// TODO 添加确认的提示
|
|
|
jsonData.menu.buttons.splice(faIndex, 1);
|
|
|
}
|
|
|
// console.log(jsonData.menu.buttons)
|
|
|
- if(faIndex!=null && subIndex!=null){
|
|
|
+ if (faIndex != null && subIndex != null) {
|
|
|
jsonData.menu.buttons[faIndex].subButtons.splice(subIndex, 1);
|
|
|
}
|
|
|
console.log(jsonData);
|
|
|
this.setState({
|
|
|
menuData: jsonData,
|
|
|
- selectMenu: {faIndex: null, subIndex: null}
|
|
|
+ selectMenu: { faIndex: null, subIndex: null }
|
|
|
})
|
|
|
}
|
|
|
|
|
@@ -189,7 +216,9 @@ class customMenu extends React.Component {
|
|
|
|
|
|
render() {
|
|
|
let self = this;
|
|
|
+ let falg = 0;
|
|
|
|
|
|
+ console.log(123456)
|
|
|
// 左边手机样式
|
|
|
const phoneCss = {
|
|
|
width: 322,
|
|
@@ -265,17 +294,24 @@ class customMenu extends React.Component {
|
|
|
<img src={keydown} style={{ float: "left", width: 33 }} />
|
|
|
{
|
|
|
// 此处根据menuData数据进行渲染
|
|
|
- [{name: "占位"}, {name: "占位"}, {name: "占位"}].map((abs, index) => {
|
|
|
+ [{ name: "占位" }, { name: "占位" }, { name: "占位" }].map((abs, index) => {
|
|
|
let faMenu = self.state.menuData.menu.buttons[index];
|
|
|
- if(faMenu==null){
|
|
|
-
|
|
|
- }
|
|
|
- let subMenuArray = faMenu.subButtons;
|
|
|
- let subLength = subMenuArray.length ;
|
|
|
+ let subMenuArray = [];
|
|
|
+ let subLength = 0;
|
|
|
let plus = [];
|
|
|
- if (subMenuArray.length < 5) {
|
|
|
- plus = [{ add: true }]
|
|
|
+ // 如果没有父菜单,则显示+号按钮
|
|
|
+ if (faMenu === undefined || faMenu === null) {
|
|
|
+ subLength = -1;
|
|
|
+ plus = [{ add: true }];
|
|
|
+ falg++;
|
|
|
+ } else {
|
|
|
+ subMenuArray = faMenu.subButtons;
|
|
|
+ subLength = subMenuArray.length;
|
|
|
+ if (subMenuArray.length < 5) {
|
|
|
+ plus = [{ add: true }]
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
return (
|
|
|
<div style={{
|
|
|
float: "left",
|
|
@@ -285,44 +321,60 @@ class customMenu extends React.Component {
|
|
|
position: "relative",
|
|
|
left: index == 0 ? 1 : 0
|
|
|
}}>
|
|
|
- <Button id={"fa"+index} onClick={$ => self.clickFaMenu(index)} style={{
|
|
|
- width: "95.66px",
|
|
|
- height: "36px",
|
|
|
- borderRadius: 0,
|
|
|
- textAlign: "center",
|
|
|
- lineHeight: "36px",
|
|
|
- top: -1,
|
|
|
- position: "absolute",
|
|
|
- left: index == 0 ? -1 : 0// 不知道为什么总是少一个像素
|
|
|
- }}>{faMenu.name}</Button>
|
|
|
{
|
|
|
- subMenuArray.map((subMenu, i) => {
|
|
|
+ // 渲染父菜单
|
|
|
+ (faMenu === undefined || faMenu === null) ? [] : [faMenu].map((item) => {
|
|
|
+
|
|
|
return (
|
|
|
- <Button id={"sub"+i} onClick={$ => self.clickSubMenu(index, i)} style={{
|
|
|
+ <Button id={"fa" + index} onClick={$ => self.clickFaMenu(index)} style={{
|
|
|
width: "95.66px",
|
|
|
height: "36px",
|
|
|
borderRadius: 0,
|
|
|
+ textAlign: "center",
|
|
|
+ lineHeight: "36px",
|
|
|
+ top: -1,
|
|
|
position: "absolute",
|
|
|
- top: -(36 * (1+i) + 1),
|
|
|
- left: index == 0 ? -1 : 0
|
|
|
- }}>{subMenu.name.length <= 4 ? subMenu.name : subMenu.name.substring(0, 4) + "..."}</Button>
|
|
|
+ left: index == 0 ? -1 : 0// 不知道为什么总是少一个像素
|
|
|
+ }}>{item.name}</Button>
|
|
|
);
|
|
|
+
|
|
|
})
|
|
|
}
|
|
|
{
|
|
|
- plus.map(() => {
|
|
|
+ // 渲染子菜单
|
|
|
+ subMenuArray.map((subMenu, i) => {
|
|
|
return (
|
|
|
- <Button id={"add"+index} onClick={$ => self.clickAdd(index)} style={{
|
|
|
+ <Button id={"sub" + i} onClick={$ => self.clickSubMenu(index, i)} style={{
|
|
|
width: "95.66px",
|
|
|
height: "36px",
|
|
|
borderRadius: 0,
|
|
|
position: "absolute",
|
|
|
- top: -((subLength+1) * 36 + 1),
|
|
|
+ top: -(36 * (1 + i) + 1),
|
|
|
left: index == 0 ? -1 : 0
|
|
|
- }}><Icon type="plus" /></Button>
|
|
|
+ }}>{subMenu.name.length <= 4 ? subMenu.name : subMenu.name.substring(0, 4) + "..."}</Button>
|
|
|
);
|
|
|
})
|
|
|
}
|
|
|
+ {
|
|
|
+ // 渲染加号
|
|
|
+ plus.map(() => {
|
|
|
+ console.log(falg);
|
|
|
+ if (falg == 0 || falg == 1) {
|
|
|
+ return (
|
|
|
+ <Button id={"add" + index} onClick={$ => self.clickAdd(index)} style={{
|
|
|
+ width: "95.66px",
|
|
|
+ height: "36px",
|
|
|
+ // display: lastFaMenu==0? "block": "none",
|
|
|
+ borderRadius: 0,
|
|
|
+ position: "absolute",
|
|
|
+ top: -((subLength + 1) * 36 + 1),
|
|
|
+ left: index == 0 ? -1 : 0
|
|
|
+ }}><Icon type="plus" /></Button>
|
|
|
+ );
|
|
|
+ }
|
|
|
+ return null;
|
|
|
+ })
|
|
|
+ }
|
|
|
</div>
|
|
|
);
|
|
|
})
|
|
@@ -336,7 +388,7 @@ class customMenu extends React.Component {
|
|
|
|
|
|
{/* 父菜单的表单 */}
|
|
|
<div style={{
|
|
|
- display: self.state.editType==1? "block": "none",
|
|
|
+ display: self.state.editType == 1 ? "block" : "none",
|
|
|
height: "550px",
|
|
|
margin: "0 20px",
|
|
|
// padding: "10px",
|
|
@@ -357,7 +409,7 @@ class customMenu extends React.Component {
|
|
|
|
|
|
{/* 子菜单的表单 */}
|
|
|
<div style={{
|
|
|
- display: self.state.editType==2? "block": "none",
|
|
|
+ display: self.state.editType == 2 ? "block" : "none",
|
|
|
height: "550px",
|
|
|
margin: "0 20px",
|
|
|
}}>
|
|
@@ -441,7 +493,7 @@ class customMenu extends React.Component {
|
|
|
</TabPane>
|
|
|
</Tabs>
|
|
|
</div>
|
|
|
- </Form>
|
|
|
+ </Form>
|
|
|
</div>
|
|
|
|
|
|
</Col>
|
|
@@ -451,4 +503,11 @@ class customMenu extends React.Component {
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
-export default customMenu;
|
|
|
+
|
|
|
+//字面意思就是,把models的state变成组件的props
|
|
|
+function mapStateToProps (state) {
|
|
|
+ const { wxAppIdValue} = state.sellmanage // test就是models命名空间名字
|
|
|
+ return { wxAppIdValue }; // 在这return,上面才能获取到
|
|
|
+}
|
|
|
+
|
|
|
+export default connect(mapStateToProps)(customMenu) ;
|