266 lines
8.7 KiB
Vue
266 lines
8.7 KiB
Vue
<template>
|
|
<app-layout v-model="safePt" btnType="unset" headerBackgroundColor="unset" :showHeader="false">
|
|
<view class="index-container">
|
|
<view class="immerse-image">
|
|
<image class="image" :src="backgroundImage" mode="aspectFill" />
|
|
</view>
|
|
<view class="immerse-main" :style="{ paddingTop: safePt + utils.rpx2px(20) + 'px' }">
|
|
<view class="head-title">
|
|
<text class="title">熊熊建材安装<text class="color">师傅版</text></text>
|
|
<text class="desc">将好师傅交给用户让好服务走进万家 </text>
|
|
</view>
|
|
<view class="section">
|
|
<view class="notify">
|
|
<view class="icon">
|
|
<text class="iconfont icon-gonggao"></text>
|
|
<text class="text">公告</text>
|
|
</view>
|
|
<view class="slide-box">
|
|
<swiper
|
|
class="notify-swiper"
|
|
circular
|
|
:indicator-dots="false"
|
|
:autoplay="true"
|
|
:vertical="true"
|
|
interval="3000"
|
|
duration="1000"
|
|
>
|
|
<swiper-item v-for="(item, index) in notifyList" :key="index" @click="notifyDetail(item)">
|
|
<view class="swiper-item notify-item">
|
|
<text class="limit-line clamp-1">
|
|
{{ item.title }}
|
|
</text>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
<view class="nav">
|
|
<view class="nav-item" @click="utils.toPage('/pages/get/index')">
|
|
<image class="icon" :src="require('@/static/temp/index/1.png')" mode="aspectFill" />
|
|
<text class="title">接单大厅</text>
|
|
</view>
|
|
<view class="nav-item" @click="toMessage(1)">
|
|
<image class="icon" :src="require('@/static/temp/index/2.png')" mode="aspectFill" />
|
|
<text class="title">平台规则</text>
|
|
</view>
|
|
<view class="nav-item" @click="utils.serviceActions()">
|
|
<image class="icon" :src="require('@/static/temp/index/3.png')" mode="aspectFill" />
|
|
<text class="title">平台客服</text>
|
|
</view>
|
|
<view class="nav-item" @click="toMessage(2)">
|
|
<image class="icon" :src="require('@/static/temp/index/4.png')" mode="aspectFill" />
|
|
<text class="title">帮助中心</text>
|
|
</view>
|
|
</view>
|
|
<view class="action-group">
|
|
<view class="item">
|
|
<text class="num">{{ action.item1 }}</text>
|
|
<text class="title">立即抢单</text>
|
|
</view>
|
|
<view class="item">
|
|
<text class="num">{{ action.item2 }}</text>
|
|
<text class="title">立即报价</text>
|
|
</view>
|
|
<view class="item">
|
|
<text class="num">{{ action.item3 }}</text>
|
|
<text class="title">配送抢单</text>
|
|
</view>
|
|
<view class="item">
|
|
<text class="num">{{ action.item4 }}</text>
|
|
<text class="title">指派专区</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<widget-modal v-show="showNotifyModal" @close="showNotifyModal = false" :title="notify.title">
|
|
<view class="message-box">
|
|
<rich-text :nodes="notify.content"></rich-text>
|
|
</view>
|
|
</widget-modal>
|
|
</app-layout>
|
|
</template>
|
|
|
|
<script>
|
|
import AppLayout from "@/components/layout/layout";
|
|
import WidgetModal from "@/components/widgets/modal";
|
|
export default {
|
|
name: "index",
|
|
data() {
|
|
return {
|
|
utils: this.$utils,
|
|
safePt: 0,
|
|
backgroundImage: require("@/static/temp/1.png"),
|
|
notifyList: [],
|
|
showNotifyModal: false,
|
|
notify: {
|
|
title: "",
|
|
content: "",
|
|
},
|
|
action: {
|
|
item1: 0,
|
|
item2: 0,
|
|
item3: 0,
|
|
item4: 0,
|
|
},
|
|
};
|
|
},
|
|
components: {
|
|
AppLayout,
|
|
WidgetModal,
|
|
},
|
|
onLoad() {
|
|
this.$models.system.notifyList(1, 1).then((list) => {
|
|
this.notifyList = list;
|
|
});
|
|
},
|
|
onShow() {
|
|
this.$models.system.serviceData().then((data) => {
|
|
this.action.item1 = data.order1;
|
|
this.action.item2 = data.order2;
|
|
this.action.item3 = data.order3;
|
|
this.action.item4 = data.order4;
|
|
});
|
|
this.$store.commit("system/refreshGet", true);
|
|
this.$store.commit("system/refreshOrder", true);
|
|
},
|
|
onReady() {},
|
|
onReachBottom() {},
|
|
onPullDownRefresh() {},
|
|
methods: {
|
|
toMessage(id) {
|
|
this.$store.commit("system/messageTabIndex", id);
|
|
this.$utils.toPage("/pages/message/message", {}, "switch");
|
|
},
|
|
notifyDetail(detail) {
|
|
this.showNotifyModal = true;
|
|
this.notify.title = detail.title;
|
|
this.notify.content = detail.message;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.section {
|
|
width: 710rpx;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
background-color: #ffffff;
|
|
margin: 24rpx auto 0 auto;
|
|
}
|
|
.notify {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 14rpx solid #efefef;
|
|
padding: 20rpx 0 30rpx 0;
|
|
.icon {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
.iconfont {
|
|
font-size: 40rpx;
|
|
color: #f9b060;
|
|
}
|
|
.text {
|
|
display: inline-block;
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
color: #7286f1;
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
.slide-box {
|
|
width: 100%;
|
|
height: 40rpx;
|
|
margin-left: 26rpx;
|
|
line-height: 40rpx;
|
|
.notify-swiper {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.notify-item {
|
|
font-size: 26rpx;
|
|
color: #666666;
|
|
}
|
|
}
|
|
}
|
|
.nav {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
padding: 36rpx 15rpx 50rpx 15rpx;
|
|
border-bottom: 2rpx solid #efefef;
|
|
.nav-item {
|
|
width: 100rpx;
|
|
text-align: center;
|
|
}
|
|
.icon {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
}
|
|
.title {
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
}
|
|
.nav-item:nth-child(4n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
.action-group {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 50rpx 0 70rpx 0;
|
|
.item {
|
|
width: 324rpx;
|
|
height: 224rpx;
|
|
border-radius: 20rpx;
|
|
margin-right: 22rpx;
|
|
margin-top: 22rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
color: #ffffff;
|
|
.num {
|
|
font-size: 100rpx;
|
|
line-height: 100rpx;
|
|
}
|
|
.title {
|
|
display: inline-block;
|
|
font-size: 36rpx;
|
|
line-height: 36rpx;
|
|
margin-top: 24rpx;
|
|
}
|
|
}
|
|
.item:nth-child(1),
|
|
.item:nth-child(2) {
|
|
margin-top: 0;
|
|
}
|
|
.item:nth-child(2n) {
|
|
margin-right: 0;
|
|
}
|
|
.item:nth-child(1) {
|
|
background: linear-gradient(135deg, #fec04b, #eacc52, #f0d8a3);
|
|
}
|
|
.item:nth-child(2) {
|
|
background: linear-gradient(135deg, #f69029, #f7b13d, #fec54c);
|
|
}
|
|
.item:nth-child(3) {
|
|
background: linear-gradient(135deg, #3e61ee, #5b80dd, #6999fd);
|
|
}
|
|
.item:nth-child(4) {
|
|
background: linear-gradient(135deg, #328eff, #2fb2fe, #44c2ee);
|
|
}
|
|
}
|
|
.message-box {
|
|
max-height: 400rpx;
|
|
overflow-y: scroll;
|
|
}
|
|
</style> |