329 lines
8.4 KiB
Vue
329 lines
8.4 KiB
Vue
<template>
|
|
<view class="main">
|
|
<view style="width: 95%" v-if="showList">
|
|
<view class="topText" @click="handleChangeType">{{
|
|
managering ? "完成" : "管理"
|
|
}}</view>
|
|
|
|
<view v-if="managering">
|
|
<l-drag-sort :list="allFunList" @change="change" :lineHeight="112"></l-drag-sort>
|
|
</view>
|
|
<view v-if="!managering" class="funList">
|
|
<view class="funItem" v-for="(item, index) in allFunList" :key="index" @click="handleFunClick(item)">
|
|
<view class="funLeft">
|
|
<image class="funIcon" :src="pageType === 'spring' ? item.springSrc : item.src" />
|
|
<text class="funText">{{ item.label || "-" }}</text>
|
|
</view>
|
|
<view class="funRight">
|
|
<!-- <image class="editIcon" src="/static/images/home/editIcon.svg" /> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<uni-popup ref="ETCRef">
|
|
<view class="ETCPopup">
|
|
<view class="ETCItem" @click="handleGoETC(1)">
|
|
<image class="itemImg" src="/static/images/home/newEtc.svg" />
|
|
<text class="itemText">ETC小程序</text>
|
|
</view>
|
|
<view class="ETCItem" @click="handleGoETC(2)">
|
|
<image class="itemImg" src="/static/images/home/ETCmap.svg" />
|
|
<text class="itemText">ETC网点</text>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import lDragSort from "../../uni_modules/l-dragSort/components/l-dragSort/l-dragSort.vue";
|
|
export default {
|
|
components: { lDragSort },
|
|
data() {
|
|
return {
|
|
allFunList: [], // 存储功能项
|
|
pageType: "",
|
|
showList: false, // 显示排序
|
|
managering: false, // 是否进入可编辑状态
|
|
serviceDetail: {},
|
|
};
|
|
},
|
|
onLoad(query) {
|
|
let funList = uni.getStorageSync("funList");
|
|
if (funList) {
|
|
funList = JSON.parse(funList);
|
|
}
|
|
if (query.pageType) {
|
|
this.pageType = query.pageType;
|
|
}
|
|
this.allFunList = funList;
|
|
console.log("this.allFunList", this.allFunList);
|
|
this.showList = true;
|
|
this.$forceUpdate();
|
|
this.$utils.addUserBehaviorNew();
|
|
},
|
|
onUnload() {
|
|
uni.setStorageSync("funList", JSON.stringify(this.allFunList));
|
|
},
|
|
methods: {
|
|
// ETC的功能
|
|
handleGoETC(value) {
|
|
if (value === 1) {
|
|
uni.navigateToMiniProgram({
|
|
appId: "wxb228568a0a4f7120",
|
|
});
|
|
} else if (value === 2) {
|
|
uni.navigateTo({
|
|
url: `/pages/etcMap/index`,
|
|
});
|
|
}
|
|
},
|
|
// 功能列表
|
|
handleFunClick(obj) {
|
|
console.log("obj", obj);
|
|
// 服务区
|
|
if (obj.value === 1) {
|
|
uni.navigateTo({
|
|
url: `/pages/serviceDetail/index`,
|
|
});
|
|
} else if (obj.value === 2) {
|
|
// 加油
|
|
uni.navigateTo({
|
|
url: `/pages/otherFunPage/goPublicPage/index`,
|
|
});
|
|
// uni.navigateTo({
|
|
// url: `/pages/noDataPage/index`,
|
|
// });
|
|
} else if (obj.value === 3) {
|
|
// 充电
|
|
uni.navigateToMiniProgram({
|
|
shortLink: "#小程序://云南交投新能源充电网平台/Z6OAkOF7DnSm5da",
|
|
});
|
|
} else if (obj.value === 4) {
|
|
// ETC
|
|
// uni.navigateToMiniProgram({
|
|
// appId: "wxb228568a0a4f7120",
|
|
// });
|
|
this.$refs.ETCRef.open("center");
|
|
} else if (obj.value === 5) {
|
|
// 点餐
|
|
uni.navigateTo({
|
|
url: "/pages/serviceList/index?type=food",
|
|
});
|
|
// uni.navigateTo({
|
|
// url: `/pages/reservationOrder/index?id=${this.serviceDetail.SERVERPART_ID}`,
|
|
// });
|
|
} else if (obj.value === 6) {
|
|
// 司机之家
|
|
uni.navigateTo({
|
|
url: "/pages/serviceList/index?type=driver",
|
|
});
|
|
} else if (obj.value === 7) {
|
|
// 租车
|
|
// uni.navigateTo({
|
|
// url: `/pages/noDataPage/index`,
|
|
// });
|
|
|
|
uni.navigateToMiniProgram({
|
|
appId: "wxe4bc565cbbf5e289",
|
|
path: `pages/isd/indexNew/index?landingto=home&apptype=ISD_C_WX&st=ser&fromurl=common&channelid=242572`,
|
|
// extraData: {
|
|
// landingto: "home",
|
|
// apptype: "ISD_C_WX",
|
|
// st: "ser",
|
|
// fromurl: "common",
|
|
// channelid: 242572,
|
|
// },
|
|
});
|
|
} else if (obj.value === 8) {
|
|
// 保险
|
|
uni.navigateTo({
|
|
url: `/pages/otherFunPage/insurance/index`,
|
|
});
|
|
} else if (obj.value === 9) {
|
|
// 投诉建议
|
|
uni.navigateToMiniProgram({
|
|
shortLink: "#小程序://云交经司服/jFbQlCIEsEjf5Nq",
|
|
});
|
|
} else if (obj.value === 10) {
|
|
// 金融
|
|
uni.navigateTo({
|
|
url: `/pages/otherFunPage/finance/index`,
|
|
});
|
|
} else if (obj.value === 11) {
|
|
// 文旅
|
|
uni.navigateTo({
|
|
url: `/pages/noDataPage/index`,
|
|
});
|
|
} else if (obj.value === 12) {
|
|
// 售后
|
|
uni.navigateTo({
|
|
url: `/pages/noDataPage/index`,
|
|
});
|
|
} else if (obj.value === 13) {
|
|
// 加水
|
|
uni.scanCode({
|
|
success: function (res) {
|
|
console.log("条码类型：" + res.scanType);
|
|
console.log("条码内容：" + res.result);
|
|
},
|
|
});
|
|
} else if (obj.value === 14) {
|
|
// 尿素
|
|
uni.scanCode({
|
|
success: function (res) {
|
|
console.log("条码类型：" + res.scanType);
|
|
console.log("条码内容：" + res.result);
|
|
},
|
|
});
|
|
} else if (obj.value === 15) {
|
|
// 商城
|
|
this.handleGoShop();
|
|
} else if (obj.value === 17) {
|
|
if (obj.index === 0) {
|
|
uni.navigateTo({
|
|
url: `/pages/shopMallPage/shopType/index?comeForm=index`,
|
|
});
|
|
} else {
|
|
uni.navigateTo({
|
|
url: `/pages/highwayHeadlines/attractInvestment`,
|
|
});
|
|
}
|
|
|
|
}
|
|
},
|
|
// 改变状态 是否可以修改位置
|
|
handleChangeType() {
|
|
if (this.managering) {
|
|
this.managering = false;
|
|
} else {
|
|
this.managering = true;
|
|
}
|
|
},
|
|
change(e) {
|
|
console.log(e);
|
|
this.allFunList = e;
|
|
this.$forceUpdate();
|
|
},
|
|
|
|
// 跳转到商城
|
|
handleGoShop() {
|
|
uni.navigateTo({
|
|
url: "/pages/shopMallPage/index/index",
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.main {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
box-sizing: border-box;
|
|
padding: 24rpx 32rpx 48rpx;
|
|
background-color: #fff;
|
|
overflow-y: auto;
|
|
|
|
.topText {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
font-size: 30rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.funList {
|
|
width: 100%;
|
|
height: calc(100% - 74rpx);
|
|
overflow-y: auto;
|
|
|
|
.funItem {
|
|
width: 100%;
|
|
height: 110rpx;
|
|
box-sizing: border-box;
|
|
padding: 12rpx 24rpx;
|
|
background: #f6f6f6;
|
|
border-radius: 12rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 16rpx;
|
|
position: relative;
|
|
|
|
.funLeft {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.funIcon {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.funText {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #130f05;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.funRight {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
|
|
.editIcon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ETCPopup {
|
|
width: 80vw;
|
|
height: 120px;
|
|
background: #fff;
|
|
border-radius: 32rpx;
|
|
box-sizing: border-box;
|
|
padding: 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.ETCItem {
|
|
width: calc(50% - 32rpx);
|
|
// background: #e7f8ee;
|
|
// padding: 16rpx;
|
|
// border-radius: 8rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
// box-sizing: border-box;
|
|
.itemImg {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.itemText {
|
|
font-family: "PingFangSC";
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
line-height: 32rpx;
|
|
text-align: justify;
|
|
font-style: normal;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|