<template>
|
<view class="main-container">
|
<view class="nav-bar">
|
<view class="nav-title" :style="{height: navHeight + 'px', marginTop: statusbarHeight + 'px'}">
|
<view class="container_head_address" @click="go">
|
<image src="@/static/icon/ar_back_dark@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="page-title">商户中心</view>
|
</view>
|
</view>
|
<view class="base-message">
|
<view class="first-line">
|
<image class="avater" src="../../../static/uni.png" mode=""></image>
|
<view class="merchant-name">上岛咖啡庐阳区店</view>
|
<view class="merchant-message-btn" @click="merchantMessage">店铺信息</view>
|
</view>
|
<view class="merchant-count">
|
<view class="count-item">
|
<view class="count red-color">9</view>
|
<view class="title red-color">优惠券核销</view>
|
</view>
|
<view class="splating"></view>
|
<view class="count-item">
|
<view class="count">9</view>
|
<view class="title">粉丝</view>
|
</view>
|
<view class="splating"></view>
|
<view class="count-item">
|
<view class="count">9</view>
|
<view class="title">新鲜事</view>
|
</view>
|
</view>
|
<view class="notification" @click="showNotify">
|
<image class="icon" src="@/static/merchant/ic_gonggao@2x.png" mode=""></image>
|
<view class="notification-content">平台通知</view>
|
<view class="right">更多<uni-icons type="right" color="#999" size="16"></uni-icons></view>
|
</view>
|
</view>
|
<view class="merchant-tool">
|
<view class="tool-title">商家工具</view>
|
<view class="tool-container">
|
<view
|
v-for="(item, index) in tools"
|
:key="index"
|
class="tool-item"
|
@click="selectTool(index)"
|
>
|
<image :src="item.icon" mode=""></image>
|
<view>{{ item.title }}</view>
|
</view>
|
</view>
|
</view>
|
<view class="serve-style">
|
<!-- -->
|
<button
|
open-type="contact"
|
style="
|
border: #ffffff solid 2rpx;
|
background-color: #ffffff;
|
margin: 0;"
|
size="mini"
|
session-from="sessionFrom"
|
>
|
<image src="@/static/merchant/ic_gonggao@2x.png" mode=""></image>
|
<text>联系平台客服</text>
|
</button>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex'
|
export default {
|
data() {
|
return {
|
tools: [
|
{ title: '活动管理', icon: require('@/static/merchant/shangjia_ic_activity@2x.png') },
|
{ title: '菜品管理', icon: require('@/static/merchant/shangjia_ic_caipin@2x.png') },
|
{ title: '粉丝管理', icon: require('@/static/merchant/shangjia_ic_fans@2x.png') },
|
{ title: '优惠券管理', icon: require('@/static/merchant/shangjia_ic_coupon@2x.png') },
|
{ title: '优惠券核销', icon: require('@/static/merchant/shangjia_ic_hexiao@2x.png') },
|
{ title: '评论管理', icon: require('@/static/merchant/shangjia_ic_pinglun@2x.png') },
|
{ title: '新鲜事管理', icon: require('@/static/merchant/shangjia_ic_xinxianshi@2x.png') },
|
]
|
};
|
},
|
computed: {
|
...mapState(['statusbarHeight', 'navHeight'])
|
},
|
methods: {
|
go() {
|
uni.navigateBack();
|
},
|
merchantMessage() {
|
uni.navigateTo({
|
url: '/pages/merchant/merchatCenter/merchantMessage'
|
})
|
},
|
showNotify() {
|
uni.navigateTo({
|
url: '/pages/merchant/merchatCenter/merchantNews'
|
})
|
},
|
selectTool(index) {
|
switch(index) {
|
case 0:
|
uni.navigateTo({
|
url: '/pages/merchant/merchatCenter/merchantActivity/merchantActivity'
|
})
|
break;
|
case 1:
|
uni.navigateTo({
|
url: '/pages/merchant/merchatCenter/cuisineManger/cuisineManger'
|
})
|
break;
|
case 2:
|
uni.navigateTo({
|
url: '/pages/merchant/merchatCenter/fansManger/fansManger'
|
})
|
break;
|
case 3:
|
uni.navigateTo({
|
url: '/pages/merchant/merchatCenter/coupon/coupon'
|
})
|
break;
|
case 4: {
|
uni.scanCode({
|
success: (res) => {
|
console.log('条码类型：' + res.scanType);
|
console.log('条码内容：' + res.result);
|
}
|
});
|
break;
|
}
|
case 5:
|
uni.navigateTo({
|
url: '/pages/merchant/merchatCenter/commentManger/commentManger'
|
})
|
break;
|
case 6:
|
uni.navigateTo({
|
url: '/pages/merchant/merchatCenter/noveltyManger/noveltyManger'
|
})
|
break;
|
default:
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.main-container {
|
background-color: #fff;
|
height: 100%;
|
position: relative;
|
}
|
.nav-bar {
|
height: 404rpx;
|
background: linear-gradient(90deg, #D95A5A 0%, #D20A0B 100%);
|
filter: blur(0px);
|
.nav-title {
|
position: fixed;
|
left: 0;
|
right: 0;
|
padding: 0 32rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: flex-start;
|
.container_head_address {
|
display: flex;
|
align-items: center;
|
justify-content: flex-start;
|
image {
|
width: 16rpx;
|
height: 30rpx;
|
}
|
}
|
.page-title {
|
flex: 1;
|
text-align: center;
|
color: #fff;
|
}
|
}
|
}
|
.base-message {
|
height: 356rpx;
|
margin-top: -108rpx;
|
background-color: #fff;
|
position: relative;
|
font-family: PingFangSC-Medium, PingFang SC;
|
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
padding: 30rpx 32rpx;
|
box-sizing: border-box;
|
.first-line {
|
display: flex;
|
.avater {
|
width: 128rpx;
|
height: 128rpx;
|
border-radius: 50%;
|
margin-top: -70rpx;
|
box-sizing: border-box;
|
border: 2rpx solid #fff;
|
margin-right: 26rpx;
|
}
|
.merchant-name {
|
flex: 1;
|
font-size: 32rpx;
|
font-weight: 600;
|
color: #222222;
|
line-height: 48rpx
|
}
|
.merchant-message-btn {
|
width: 128rpx;
|
height: 48rpx;
|
border-radius: 32rpx;
|
border: 1rpx solid #666666;
|
font-size: 24rpx;
|
font-weight: 400;
|
color: #666666;
|
line-height: 48rpx;
|
text-align: center;
|
}
|
}
|
.merchant-count {
|
display: flex;
|
height: 124rpx;
|
margin-top: 30rpx;
|
.splating {
|
width: 2rpx;
|
height: 100%;
|
background-color: #E5E5E5;
|
}
|
.count-item {
|
width: 33.3%;
|
height: 100%;
|
text-align: center;
|
|
.count {
|
margin-top: 20rpx;
|
height: 44rpx;
|
font-size: 44rpx;
|
font-weight: 500;
|
color: #333333;
|
line-height: 44rpx;
|
}
|
.title {
|
height: 24rpx;
|
font-size: 24rpx;
|
font-weight: 400;
|
color: #999999;
|
line-height: 24rpx;
|
margin-top: 16rpx;
|
}
|
.red-color {
|
color: #D20A0A;
|
}
|
}
|
}
|
.notification {
|
margin-top: 20rpx;
|
height: 64rpx;
|
width: 100%;
|
background: #F5F5F5;
|
border-radius: 8rpx;
|
box-sizing: border-box;
|
padding: 18rpx 24rpx;
|
display: flex;
|
.icon {
|
width: 28rpx;
|
height: 28rpx;
|
margin-right: 14rpx;
|
}
|
.notification-content {
|
flex: 1;
|
height: 28rpx;
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #333333;
|
line-height: 28rpx;
|
}
|
.right {
|
height: 24rpx;
|
font-size: 24rpx;
|
font-weight: 400;
|
color: #999999;
|
line-height: 24rpx;
|
}
|
}
|
}
|
.merchant-tool {
|
border-top: 20rpx solid #f7f7f7;
|
padding: 40rpx 32rpx;
|
.tool-title {
|
height: 32rpx;
|
font-size: 32rpx;
|
font-weight: 600;
|
color: #222222;
|
line-height: 32rpx;
|
}
|
.tool-container {
|
display: flex;
|
flex-wrap: wrap;
|
margin-top: 40rpx;
|
.tool-item {
|
width: 33.33%;
|
text-align: center;
|
margin-bottom: 40rpx;
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #333333;
|
line-height: 26rpx;
|
image {
|
width: 88rpx;
|
height: 88rpx;
|
}
|
}
|
}
|
}
|
.serve-style {
|
display: flex;
|
justify-content: center;
|
position: absolute;
|
width: 100%;
|
left: 0;
|
right: 0;
|
bottom: calc(env(safe-area-inset-bottom) + 74rpx);
|
font-weight: 400;
|
color: #666666;
|
image {
|
width: 16rpx;
|
height: 18rpx;
|
}
|
|
}
|
</style>
|
