首页改版，增加全部操作页面，新增店铺装修页面
This commit is contained in:
19
pages/appliccation/list.vue
Normal file
19
pages/appliccation/list.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
19
pages/appliccation/marketing.vue
Normal file
19
pages/appliccation/marketing.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -1,69 +1,149 @@
|
||||
<template>
|
||||
<view class="statistics">
|
||||
<view class="title">
|
||||
<text>数据统计</text>
|
||||
</view>
|
||||
<view class="statisticsBox">
|
||||
<view class="time-wrapper">
|
||||
<view class="time-wrapper u-m-l-10 u-m-r-10">
|
||||
<view v-for="(v, i) in timeList" :key="i" class="timelistbox">
|
||||
<view class="time-item" @tap="changeTime(v.value)" :class="{ 'time-selected':v.value==selected }">
|
||||
<view class="time-item" @tap="changeTime(v.value,i)" :class="{ 'time-selected':v.value==selected }">
|
||||
{{v.label}}
|
||||
</view>
|
||||
<view class="xian" v-if="v.value==selected "> </view>
|
||||
<!-- <view class="xian" v-if="v.value==selected "> </view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="time_bootom_line">
|
||||
<view class="block" :style="{
|
||||
transform:'translateX('+comBlockX+'rpx) rotate(45deg) '
|
||||
}"></view>
|
||||
</view>
|
||||
<view class="bottom"></view>
|
||||
<div class="u-flex u-row-between u-font-28 color-333">
|
||||
<div class=" u-flex-1 ">
|
||||
|
||||
<view class="payList">
|
||||
<view class="li" v-for="(item,index) in list" :key="index">
|
||||
<view style="text-align: center;">
|
||||
{{item.payType}}
|
||||
<view>
|
||||
<view class="">营业额</view>
|
||||
<view class="u-m-t-16">
|
||||
<up-text bold color="#318AFE" size="20" mode="price" :text="yingyeE"></up-text>
|
||||
</view>
|
||||
</view>
|
||||
<view style="text-align: center;" class="u-m-t-6">
|
||||
{{item.payAmount}}
|
||||
<view class="u-m-t-32">
|
||||
<view class="">退款</view>
|
||||
<view class="u-m-t-14">
|
||||
<up-text color="#333" size="14" bold mode="price" :text="refundCount"></up-text>
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
<view class="line"></view>
|
||||
<view class="payList u-flex-1 u-p-l-40">
|
||||
<view class="li w-full u-flex u-row-between u-font-24 color-333" v-for="(item,index) in list"
|
||||
:key="index">
|
||||
<view class="u-flex">
|
||||
<view :style="returnColorStyle(item,index)" class="circle"></view>
|
||||
<view class="u-m-l-8">
|
||||
{{item.payType}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="text-align: center;" class="u-m-t-6">
|
||||
{{item.payAmount}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
|
||||
<view class="u-m-t-8 u-flex u-row-center u-font-24 u-col-center color-666">
|
||||
|
||||
<!-- <view class="u-m-t-8 u-flex u-row-center u-font-24 u-col-center color-666">
|
||||
<view class="u-flex" @click="toggleShowAll">
|
||||
<view>{{!showAll?'展开全部':'收起全部' }}</view>
|
||||
<view class="u-flex u-col-center u-m-t-4 tranistion-2" :class="{rotate:showAll}">
|
||||
<up-icon color="#666" name="arrow-down" :size="12"></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<datePickerview @confirm="datePickerConfirm" ref="datePicker" style="z-index: 999;"></datePickerview>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { onShow } from '@dcloudio/uni-app';
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
computed
|
||||
} from 'vue';
|
||||
import {
|
||||
onShow
|
||||
} from '@dcloudio/uni-app';
|
||||
|
||||
import dayjs from 'dayjs' //时间格式库
|
||||
import datePickerview from './my-date-pickerview.vue'
|
||||
|
||||
import { getTrade } from '@/http/api/summary.js'
|
||||
|
||||
|
||||
import {
|
||||
getTrade
|
||||
} from '@/http/api/summary.js'
|
||||
|
||||
let selected = ref('today')
|
||||
let showAll = ref(false);
|
||||
let list = ref()
|
||||
const pageData = reactive({
|
||||
list: [
|
||||
{payType: '微信小程序', key:'wechatPayAmount', payAmount: 0},
|
||||
{payType: '支付宝小程序', key:'aliPayAmount', payAmount: 0},
|
||||
{payType: '主扫收款', key:'scanPayAmount', payAmount: 0},
|
||||
{payType: '收款码收款', key:'', payAmount: 0},
|
||||
{payType: '现金收款', key:'cashPayAmount', payAmount: 0},
|
||||
{payType: '充值收款', key:'rechargeAmount', payAmount: 0},
|
||||
list: [{
|
||||
payType: '微信小程序',
|
||||
key: 'wechatPayAmount',
|
||||
payAmount: 0,
|
||||
bgcolor: '#5AA25F'
|
||||
},
|
||||
{
|
||||
payType: '支付宝小程序',
|
||||
key: 'aliPayAmount',
|
||||
payAmount: 0,
|
||||
bgcolor: '#31ACFE'
|
||||
},
|
||||
{
|
||||
payType: '主扫收款',
|
||||
key: 'scanPayAmount',
|
||||
payAmount: 0,
|
||||
bgcolor: '#FF5C6D'
|
||||
},
|
||||
{
|
||||
payType: '现金',
|
||||
key: 'cashPayAmount',
|
||||
payAmount: 0,
|
||||
bgcolor: '#FC843F'
|
||||
},
|
||||
{
|
||||
payType: '充值',
|
||||
key: 'rechargeAmount',
|
||||
payAmount: 0,
|
||||
bgcolor: '#9090FF'
|
||||
},
|
||||
{
|
||||
payType: '挂账',
|
||||
key: 'creditPayAmount',
|
||||
payAmount: 0,
|
||||
bgcolor: '#7BA7A4'
|
||||
},
|
||||
// {payType: '收款码收款', key:'', payAmount: 0,bgcolor:'#5AA25F'},
|
||||
],
|
||||
})
|
||||
})
|
||||
|
||||
function returnColorStyle(item) {
|
||||
return {
|
||||
backgroundColor: item.bgcolor
|
||||
}
|
||||
}
|
||||
|
||||
function toggleShowAll() {
|
||||
showAll.value = !showAll.value
|
||||
setList()
|
||||
}
|
||||
|
||||
function setList() {
|
||||
list.value = showAll.value ? pageData.list : pageData.list.slice(0, 4)
|
||||
// list.value = showAll.value ? pageData.list : pageData.list.slice(0, 4)
|
||||
list.value = pageData.list
|
||||
}
|
||||
|
||||
|
||||
const emit = defineEmits(['totalRevenue'])
|
||||
const timeList = [{
|
||||
label: '今天',
|
||||
@@ -96,7 +176,9 @@
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const yingyeE = ref(0)
|
||||
const refundCount = ref(0)
|
||||
/**
|
||||
* 获取统计数据
|
||||
* @param {Object} start
|
||||
@@ -134,22 +216,26 @@
|
||||
beginDate: startTime,
|
||||
endDate: endTime,
|
||||
}).then((res) => {
|
||||
refundCount.value = res.refundCount
|
||||
for (var key in res) {
|
||||
pageData.list.map(item=>{
|
||||
if(item.key == key) {
|
||||
pageData.list.map(item => {
|
||||
if (item.key == key) {
|
||||
item.payAmount = res[key]
|
||||
}
|
||||
})
|
||||
}
|
||||
setList()
|
||||
let incomeAmountAll = 0;
|
||||
pageData.list.map(item=>{
|
||||
incomeAmountAll += (item.payAmount||0)
|
||||
pageData.list.map(item => {
|
||||
incomeAmountAll += (item.payAmount || 0)
|
||||
})
|
||||
|
||||
yingyeE.value = incomeAmountAll
|
||||
emit('totalRevenue', incomeAmountAll)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 日期筛选确认
|
||||
* @param {Object} e
|
||||
@@ -157,7 +243,7 @@
|
||||
function datePickerConfirm(e) {
|
||||
getlist(e.start, e.end)
|
||||
}
|
||||
|
||||
|
||||
// 获取当前时间
|
||||
function getdate() {
|
||||
const dt = new Date();
|
||||
@@ -169,7 +255,7 @@
|
||||
const ss = (dt.getSeconds() + "").padStart(2, "0");
|
||||
return `${y}-${m}-${d}`;
|
||||
}
|
||||
|
||||
|
||||
// 获取昨天时间
|
||||
const formatTime = () => {
|
||||
let strDate = getdate()
|
||||
@@ -182,14 +268,22 @@
|
||||
return `${y}-${m}-${d}`
|
||||
}
|
||||
|
||||
function changeTime(e) {
|
||||
const timeSleIndex = ref(0)
|
||||
|
||||
function changeTime(e, index) {
|
||||
selected.value = e
|
||||
timeSleIndex.value = index
|
||||
if (e == 'custom') {
|
||||
datePicker.value.toggle()
|
||||
} else {
|
||||
getlist()
|
||||
}
|
||||
}
|
||||
|
||||
const xArr=[0,134,262,390,532]
|
||||
const comBlockX = computed(() => {
|
||||
return xArr[ timeSleIndex.value]
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
ul,
|
||||
@@ -204,19 +298,37 @@
|
||||
|
||||
.statistics {
|
||||
padding: 0 28rpx;
|
||||
margin-top: 50rpx;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
width: 170rpx;
|
||||
left: 18rpx;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
font-weight: 700;
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
background: linear-gradient(109deg, #70B9FF 0%, #629FFA 100%);
|
||||
border-radius: 12rpx 12rpx 12rpx 0rpx;
|
||||
top: -16px;
|
||||
}
|
||||
|
||||
.statisticsBox {
|
||||
width: 694rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
padding: 32rpx 22rpx;
|
||||
padding: 48rpx 32rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
margin-top: 54rpx;
|
||||
|
||||
.bottom {}
|
||||
|
||||
.time-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
justify-content: space-between;
|
||||
|
||||
.timelistbox {
|
||||
position: relative;
|
||||
@@ -247,20 +359,24 @@
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 0rpx;
|
||||
height: 170rpx;
|
||||
border: 2rpx solid #EEE8E8;
|
||||
}
|
||||
|
||||
.payList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.li {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
width: 25%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 24rpx;
|
||||
margin-top: 12rpx;
|
||||
|
||||
>view {
|
||||
text-align: center;
|
||||
@@ -269,4 +385,32 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.time_bootom_line {
|
||||
height: 16rpx;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #629FFA;
|
||||
|
||||
.block {
|
||||
width: 18rpx;
|
||||
height: 18rpx;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
border-top: 0.5rpx solid #629FFA;
|
||||
border-left: 0.5rpx solid #629FFA;
|
||||
z-index: 1;
|
||||
left: 30rpx;
|
||||
top: 6rpx;
|
||||
transform: rotate(45deg);
|
||||
transform-origin: center;
|
||||
transition: all .2s linear;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -4,19 +4,43 @@
|
||||
<!-- 背景图片view -->
|
||||
<view class="bg-img-view">
|
||||
<!-- 背景颜色view -->
|
||||
<view class="bg-color-view" style="position: absolute; top: 0; left: 0; right: 0; height: 550rpx; border-radius: 0 0 32rpx 32rpx; background-color: #318afe !important">
|
||||
<view class="bg-color-view">
|
||||
<view class="bgbottomStyle"></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 解决定位层级问题 -->
|
||||
<view class="bg-main">
|
||||
<!-- 导航条 -->
|
||||
<up-navbar title="首页" bg-color="#318AFE" titleStyle="color:#fff;font-size:16px;" @leftClick="toSetting">
|
||||
<!-- <up-navbar title="首页" bg-color="#318AFE" titleStyle="color:#fff;font-size:16px;" @leftClick="toSetting">
|
||||
<template #left>
|
||||
<up-icon name="/static/indexImg/icon-menu.svg" color="#fff" :size="16"></up-icon>
|
||||
</template>
|
||||
</up-navbar>
|
||||
<view class="income">
|
||||
</up-navbar> -->
|
||||
|
||||
<view class="income u-p-30">
|
||||
<view class="u-flex">
|
||||
<up-avatar :src="shopInfo.logo" size="88rpx"></up-avatar>
|
||||
<view class="u-flex-1 u-p-l-30 u-text-left">
|
||||
<view class="u-flex">
|
||||
<view class="u-line-1 u-font-36 font-bold" style="width: 80%;">{{shopInfo.shopName}}</view>
|
||||
<view class="u-font-28 color-fff change-shop u-flex u-row-center">
|
||||
<image src="/static/change.png" class="u-m-t-2" style="width: 20rpx;height: 20rpx;"
|
||||
mode=""></image>
|
||||
<text class="u-m-l-6">切换店铺</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-16">
|
||||
<view style="color: rgba(255,255,255,0.83);" v-if="shopStaff">
|
||||
<text>{{shopStaff.name}}</text>
|
||||
<text>：</text>
|
||||
<text>{{shopStaff.code}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="income">
|
||||
<view class="u-flex u-row-center u-relative">
|
||||
<view class="u-flex u-col-center">
|
||||
<view class="u-m-r-12">总收入</view>
|
||||
@@ -31,354 +55,415 @@
|
||||
<view class="">￥{{ ((totalRevenuedata || 0) * 1).toFixed(2) }}</view>
|
||||
</view>
|
||||
<view>{{ shopName || '' }}</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 统计 or 快捷扫码 -->
|
||||
<!-- <Stats ref="statsRef" /> -->
|
||||
<statistics @totalRevenue="totalRevenue"></statistics>
|
||||
<!-- 导航栅格 -->
|
||||
<JeepayNavigation :navList="navList" type="grid" />
|
||||
<!-- <JeepayNavigation :navList="navList" type="grid" /> -->
|
||||
<view class=" border-r-16 bg-fff u-m-t-32 u-m-l-28 u-m-r-28" style="padding: 32rpx 28rpx 0 28rpx;">
|
||||
<view class="u-flex u-font-28">
|
||||
<view class="title-line"></view>
|
||||
<view class="font-bold u-m-l-6">我的权限</view>
|
||||
</view>
|
||||
<view class="u-m-t-32">
|
||||
<up-grid :border="false" col="3">
|
||||
<up-grid-item @click="clickFunc(listItem)" v-for="(listItem,listIndex) in computedMenus" :key="listIndex">
|
||||
<image style="width: 72rpx;height: 72rpx;" :src="listItem.icon" mode="scaleToFill" />
|
||||
<text class="u-m-t-16 color-333 u-font-28 u-p-b-32">{{listItem.title}}</text>
|
||||
</up-grid-item>
|
||||
</up-grid>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="logoout u-m-t-32">
|
||||
<my-button @click="logoout">退出登录</my-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, onMounted, nextTick } from 'vue';
|
||||
import { onPullDownRefresh, onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
|
||||
import {
|
||||
reactive,
|
||||
ref,
|
||||
onMounted,
|
||||
nextTick,
|
||||
computed
|
||||
} from 'vue';
|
||||
import {
|
||||
onPullDownRefresh,
|
||||
onLoad,
|
||||
onShareAppMessage,
|
||||
onShareTimeline,
|
||||
onShow
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
useMenusStore
|
||||
} from '@/store/menus.js'
|
||||
import go from '@/commons/utils/go.js';
|
||||
import Stats from './components/Stats.vue';
|
||||
import statistics from './components/statistics.vue';
|
||||
import storageManage from '@/commons/utils/storageManage.js';
|
||||
import {
|
||||
hasPermission
|
||||
} from '@/commons/utils/hasPermission.js';
|
||||
|
||||
import go from '@/commons/utils/go.js';
|
||||
import Stats from './components/Stats.vue';
|
||||
import statistics from './components/statistics.vue';
|
||||
import storageManage from '@/commons/utils/storageManage.js';
|
||||
import { hasPermission } from '@/commons/utils/hasPermission.js';
|
||||
uni.hideTabBar();
|
||||
let shopName = ref();
|
||||
let totalRevenuedata = ref();
|
||||
let totalRevenue = (d) => {
|
||||
totalRevenuedata.value = d;
|
||||
};
|
||||
|
||||
uni.hideTabBar();
|
||||
let shopName = ref();
|
||||
let totalRevenuedata = ref();
|
||||
let totalRevenue = (d) => {
|
||||
totalRevenuedata.value = d;
|
||||
};
|
||||
let showTips = ref(false);
|
||||
|
||||
let showTips = ref(false);
|
||||
function toggleTips() {
|
||||
showTips.value = !showTips.value;
|
||||
}
|
||||
function toggleTips() {
|
||||
showTips.value = !showTips.value;
|
||||
}
|
||||
|
||||
function toSetting() {
|
||||
go.to('PAGES_SHOP_SETUP');
|
||||
}
|
||||
// 导航列表
|
||||
const navList = [
|
||||
{
|
||||
title: '销售汇总',
|
||||
icon: '/static/indexImg/PAGE_SALES_SUMMARY.svg',
|
||||
pageUrl: 'PAGES_SALES_SUMMARY'
|
||||
},
|
||||
{
|
||||
title: '代客下单',
|
||||
icon: '/static/indexImg/icon-substitute-ordering.svg',
|
||||
pageUrl: 'PAGES_CREATE_ORDER',
|
||||
clickFunc: () => {
|
||||
hasPermission('允许下单').then((res) => {
|
||||
if (res) {
|
||||
go.to('PAGES_CREATE_ORDER');
|
||||
}
|
||||
});
|
||||
function toSetting() {
|
||||
go.to('PAGES_SHOP_SETUP');
|
||||
}
|
||||
|
||||
// 点击事件
|
||||
async function clickFunc(nav) {
|
||||
if (nav.pageUrl == "PAGES_SALES_SUMMARY") {
|
||||
let res = await hasPermission('允许查看经营数据')
|
||||
if (!res) return
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '桌台',
|
||||
icon: '/static/indexImg/icon-table.svg',
|
||||
pageUrl: 'PAGES_TABLE'
|
||||
},
|
||||
{
|
||||
title: '商品管理',
|
||||
icon: '/static/indexImg/icon-product-control.svg',
|
||||
pageUrl: 'PAGES_PRODUCT'
|
||||
},
|
||||
{
|
||||
title: '分组管理',
|
||||
icon: '/static/indexImg/goods-group.svg',
|
||||
pageUrl: 'PAGES_GOODS_GROUP'
|
||||
},
|
||||
{
|
||||
title: '分类管理',
|
||||
icon: '/static/indexImg/icon-category.svg',
|
||||
pageUrl: 'PAGES_CATEGORY'
|
||||
},
|
||||
{
|
||||
title: '会员管理',
|
||||
icon: '/static/indexImg/icon-user.svg',
|
||||
pageUrl: 'PAGES_USER_CONTROL'
|
||||
},
|
||||
{
|
||||
title: '员工管理',
|
||||
icon: '/static/indexImg/icon-staff.svg',
|
||||
pageUrl: 'PAGES_STAFF'
|
||||
},
|
||||
{
|
||||
title: '耗材管理',
|
||||
icon: '/static/indexImg/PAGE_SALES_SUMMARY.svg',
|
||||
pageUrl: 'PAGES_SALES_CONSUMABLES'
|
||||
},
|
||||
{
|
||||
title: '订单管理',
|
||||
icon: '/static/indexImg/icon-order.svg',
|
||||
pageUrl: 'PAGES_ORDER_INDEX'
|
||||
},
|
||||
{
|
||||
title: '设备管理',
|
||||
icon: '/static/indexImg/icon-printer.svg',
|
||||
pageUrl: 'PAGES_PRINTER_INDEX'
|
||||
},
|
||||
{
|
||||
title: '交班',
|
||||
icon: '/static/indexImg/icon-work.svg',
|
||||
pageUrl: 'PAGES_WORK_INDEX'
|
||||
},
|
||||
{
|
||||
title: '排队',
|
||||
icon: '/static/indexImg/icon-line-up.svg',
|
||||
pageUrl: 'PAGES_LINE_UP'
|
||||
},
|
||||
{
|
||||
title: '霸王餐',
|
||||
icon: '/static/indexImg/icon-bwc.svg',
|
||||
pageUrl: 'PAGES_BWC'
|
||||
},
|
||||
{
|
||||
title: '优惠券',
|
||||
icon: '/static/coupon/icon_coupon.svg',
|
||||
pageUrl: 'PAGES_COUPON_INDEX'
|
||||
},
|
||||
{
|
||||
title: '订阅通知',
|
||||
icon: '/static/indexImg/icon-notification.svg',
|
||||
pageUrl: 'PAGES_NOTIFICATION_INDEX'
|
||||
},
|
||||
{
|
||||
title: '挂账管理',
|
||||
icon: '/static/indexImg/icon_credit.svg',
|
||||
pageUrl: 'PAGES_CREDIT_BUYER_INDEX'
|
||||
},
|
||||
{
|
||||
title: '核销管理',
|
||||
icon: '/static/indexImg/pagewriteoff.svg',
|
||||
pageUrl: 'PAGES_WEITEOFF'
|
||||
},
|
||||
{
|
||||
title: '退出登录',
|
||||
icon: '/static/indexImg/icon-login-out.svg',
|
||||
pageUrl: 'PAGES_LOGIN',
|
||||
clickFunc: () => {
|
||||
storageManage.cleanByLogout();
|
||||
go.to('PAGES_LOGIN', {}, 'redirect');
|
||||
// 包含回调事件
|
||||
if (nav.clickFunc) {
|
||||
return nav.clickFunc(nav)
|
||||
}
|
||||
|
||||
// 包含URL
|
||||
if (nav.pageUrl) {
|
||||
return go.to(nav.pageUrl)
|
||||
}
|
||||
}
|
||||
// {
|
||||
// title: '成员管理',
|
||||
// icon: '/static/indexImg/icon-staff.svg',
|
||||
// pageUrl: 'PAGES_USER'
|
||||
// },
|
||||
// {
|
||||
// title: '订阅通知',
|
||||
// icon: '/static/indexImg/icon-notification.svg',
|
||||
// pageUrl: 'PAGES_NOTIFICATION_INDEX',
|
||||
// },
|
||||
// {
|
||||
// title: '进销存',
|
||||
// icon: '/static/indexImg/icon-invoicing.svg',
|
||||
// pageUrl: 'PAGES_INVOICING_INDEX',
|
||||
// },
|
||||
// {
|
||||
// title: '预定座位',
|
||||
// icon: '/static/indexImg/icon-yuyue-zuo.svg',
|
||||
// pageUrl: 'PAGES_RESERVE_SEAT_INDEX',
|
||||
// },
|
||||
// {
|
||||
// title: '预约管理',
|
||||
// icon: '/static/indexImg/icon-yuyue.svg',
|
||||
// pageUrl: 'PAGES_BOOKING_INDEX',
|
||||
// },
|
||||
// {
|
||||
// title: '充值管理',
|
||||
// icon: '/static/indexImg/icon-recharge.svg',
|
||||
// pageUrl: 'PAGES_RECHARGE_INDEX',
|
||||
// },
|
||||
// {
|
||||
// title: '进件管理',
|
||||
// icon: '/static/indexImg/icon-passage.svg',
|
||||
// pageUrl: 'PAGES_APPLYMENT',
|
||||
// entId: 'ENT_MCH_APPLYMENT_LIST'
|
||||
// },
|
||||
// {
|
||||
// title: '商户管理',
|
||||
// icon: '/static/indexImg/business.svg',
|
||||
// pageUrl: 'PAGES_APPLYMENT_BUSINESS',
|
||||
// entId: 'ENT_MCH_APPLYMENT_LIST'
|
||||
// },
|
||||
// {
|
||||
// title: '门店管理',
|
||||
// icon: '/static/indexImg/icon-store.svg',
|
||||
// pageUrl: 'PAGES_STORE',
|
||||
// entId: 'ENT_MCH_STORE'
|
||||
// },
|
||||
// {
|
||||
// title: '设备管理',
|
||||
// icon: '/static/indexImg/icon-calc.svg',
|
||||
// pageUrl: 'PAGES_DEVICE_MAIN',
|
||||
// entId: 'ENT_DEVICE'
|
||||
// },
|
||||
// 导航列表
|
||||
const navList = [
|
||||
// {
|
||||
// title: '销售汇总',
|
||||
// icon: '/static/indexImg/PAGE_SALES_SUMMARY.svg',
|
||||
// pageUrl: 'PAGES_SALES_SUMMARY',
|
||||
// },
|
||||
{
|
||||
title: '代客下单',
|
||||
icon: '/static/indexImg/icon-substitute-ordering.svg',
|
||||
pageUrl: 'PAGES_CREATE_ORDER',
|
||||
clickFunc: () => {
|
||||
hasPermission('允许下单').then((res) => {
|
||||
if (res) {
|
||||
go.to('PAGES_CREATE_ORDER');
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '台桌管理',
|
||||
icon: '/static/indexImg/icon-table.svg',
|
||||
pageUrl: 'PAGES_TABLE'
|
||||
},
|
||||
{
|
||||
title: '商品分组',
|
||||
icon: '/static/indexImg/goods-group.svg',
|
||||
pageUrl: 'PAGES_GOODS_GROUP'
|
||||
},
|
||||
|
||||
// {
|
||||
// title: '数据中心',
|
||||
// icon: '/static/indexImg/icon-pro.svg',
|
||||
// pageUrl: 'PAGES_STAT',
|
||||
// entId: 'ENT_ORDER_STATISTIC'
|
||||
// },
|
||||
// {
|
||||
// title: '商户应用',
|
||||
// icon: '/static/indexImg/icon-app.svg',
|
||||
// pageUrl: 'PAGES_APP',
|
||||
// entId: 'ENT_MCH_APP_LIST'
|
||||
// },
|
||||
// {
|
||||
// title: '会员中心',
|
||||
// icon: '/static/indexImg/icon-member.svg',
|
||||
// pageUrl: 'PAGES_MEMBER_CENTER',
|
||||
// entId: 'ENT_MCH_MEMBER'
|
||||
// },
|
||||
// {
|
||||
// title: '广告管理',
|
||||
// icon: '/static/indexImg/icon-ad.svg',
|
||||
// pageUrl: 'PAGES_AD_LIST',
|
||||
// entId: 'ENT_ADVERT_CONTROL'
|
||||
// },
|
||||
];
|
||||
{
|
||||
title: '商品管理',
|
||||
icon: '/static/indexImg/icon-product-control.svg',
|
||||
pageUrl: 'PAGES_PRODUCT'
|
||||
},
|
||||
{
|
||||
title: '商品分类',
|
||||
icon: '/static/indexImg/icon-category.svg',
|
||||
pageUrl: 'PAGES_CATEGORY'
|
||||
},
|
||||
{
|
||||
title: '耗材管理',
|
||||
icon: '/static/indexImg/PAGE_SALES_SUMMARY.svg',
|
||||
pageUrl: 'PAGES_SALES_CONSUMABLES'
|
||||
},
|
||||
{
|
||||
title: '订单管理',
|
||||
icon: '/static/indexImg/icon-order.svg',
|
||||
pageUrl: 'PAGES_ORDER_INDEX'
|
||||
},
|
||||
{
|
||||
title: '用户管理',
|
||||
icon: '/static/indexImg/icon-user.svg',
|
||||
pageUrl: 'PAGES_USER_CONTROL'
|
||||
},
|
||||
{
|
||||
title: '全部',
|
||||
icon: '/static/indexImg/all.svg',
|
||||
type:'all',
|
||||
pageUrl: 'PAGES_PERSSION'
|
||||
},
|
||||
|
||||
const vdata = reactive({
|
||||
noticeList: [], // 公告列表
|
||||
adList: [],
|
||||
shareImgUrl: '' //分享图片
|
||||
});
|
||||
|
||||
onLoad((options) => {
|
||||
shopName.value = uni.getStorageSync('shopInfo').shopName;
|
||||
});
|
||||
// {
|
||||
// title: '员工管理',
|
||||
// icon: '/static/indexImg/icon-staff.svg',
|
||||
// pageUrl: 'PAGES_STAFF'
|
||||
// },
|
||||
|
||||
// 启动加载
|
||||
onMounted(() => {
|
||||
// refData();
|
||||
});
|
||||
|
||||
// 如果不是超管 删除 刷脸广告菜单
|
||||
if (storageManage.userInfo().userType != 1) {
|
||||
const index = navList.findIndex((v) => v.entId == 'ENT_ADVERT_CONTROL');
|
||||
if (index != -1) {
|
||||
navList.splice(index, 1);
|
||||
// {
|
||||
// title: '设备管理',
|
||||
// icon: '/static/indexImg/icon-printer.svg',
|
||||
// pageUrl: 'PAGES_PRINTER_INDEX'
|
||||
// },
|
||||
// {
|
||||
// title: '交班',
|
||||
// icon: '/static/indexImg/icon-work.svg',
|
||||
// pageUrl: 'PAGES_WORK_INDEX'
|
||||
// },
|
||||
// {
|
||||
// title: '排队',
|
||||
// icon: '/static/indexImg/icon-line-up.svg',
|
||||
// pageUrl: 'PAGES_LINE_UP'
|
||||
// },
|
||||
// {
|
||||
// title: '霸王餐',
|
||||
// icon: '/static/indexImg/icon-bwc.svg',
|
||||
// pageUrl: 'PAGES_BWC'
|
||||
// },
|
||||
// {
|
||||
// title: '优惠券',
|
||||
// icon: '/static/coupon/icon_coupon.svg',
|
||||
// pageUrl: 'PAGES_COUPON_INDEX'
|
||||
// },
|
||||
// {
|
||||
// title: '订阅通知',
|
||||
// icon: '/static/indexImg/icon-notification.svg',
|
||||
// pageUrl: 'PAGES_NOTIFICATION_INDEX'
|
||||
// },
|
||||
// {
|
||||
// title: '挂账管理',
|
||||
// icon: '/static/indexImg/icon_credit.svg',
|
||||
// pageUrl: 'PAGES_CREDIT_BUYER_INDEX'
|
||||
// },
|
||||
// {
|
||||
// title: '核销管理',
|
||||
// icon: '/static/indexImg/pagewriteoff.svg',
|
||||
// pageUrl: 'PAGES_WEITEOFF'
|
||||
// },
|
||||
|
||||
|
||||
// {
|
||||
// title: '退出登录',
|
||||
// icon: '/static/indexImg/icon-login-out.svg',
|
||||
// pageUrl: 'PAGES_LOGIN',
|
||||
// clickFunc: () => {
|
||||
// storageManage.cleanByLogout();
|
||||
// go.to('PAGES_LOGIN', {}, 'redirect');
|
||||
// }
|
||||
// }
|
||||
];
|
||||
const menuStore = useMenusStore()
|
||||
const computedMenus=computed(()=>{
|
||||
return navList.filter(r => {
|
||||
if(r.type=='all'){
|
||||
return true
|
||||
}
|
||||
return menuStore.menuList.find(menu=>menu.pageId==r.pageUrl)
|
||||
})
|
||||
})
|
||||
|
||||
function logoout() {
|
||||
storageManage.cleanByLogout();
|
||||
go.to('PAGES_LOGIN', {}, 'redirect');
|
||||
}
|
||||
}
|
||||
|
||||
async function refData() {
|
||||
// 调用子组件方法 , 避免组件没有加载完成。
|
||||
const vdata = reactive({
|
||||
noticeList: [], // 公告列表
|
||||
adList: [],
|
||||
shareImgUrl: '' //分享图片
|
||||
});
|
||||
const shopInfo = ref({})
|
||||
const shopStaff = ref('')
|
||||
onLoad((options) => {
|
||||
const data = uni.getStorageSync('shopInfo')
|
||||
const shopStaffData = uni.getStorageSync('shopStaff')
|
||||
if(shopStaffData){
|
||||
shopStaff.value=shopStaffData
|
||||
}
|
||||
|
||||
shopName.value = shopInfo.shopName;
|
||||
console.log(data);
|
||||
if (data) {
|
||||
shopInfo.value = data
|
||||
}
|
||||
});
|
||||
|
||||
// nextTick(() => statsRef.value.refData());
|
||||
// 停止刷新
|
||||
uni.stopPullDownRefresh();
|
||||
}
|
||||
// 启动加载
|
||||
onMounted(() => {
|
||||
// refData();
|
||||
});
|
||||
|
||||
/**
|
||||
* 微信分享
|
||||
*/
|
||||
onShareAppMessage((res) => {
|
||||
if (res.from == 'menu')
|
||||
// 如果不是超管 删除 刷脸广告菜单
|
||||
if (storageManage.userInfo().userType != 1) {
|
||||
const index = navList.findIndex((v) => v.entId == 'ENT_ADVERT_CONTROL');
|
||||
if (index != -1) {
|
||||
navList.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
async function refData() {
|
||||
// 调用子组件方法 , 避免组件没有加载完成。
|
||||
|
||||
// nextTick(() => statsRef.value.refData());
|
||||
// 停止刷新
|
||||
uni.stopPullDownRefresh();
|
||||
}
|
||||
|
||||
/**
|
||||
* 微信分享
|
||||
*/
|
||||
onShareAppMessage((res) => {
|
||||
if (res.from == 'menu')
|
||||
return {
|
||||
title: uni.$appName,
|
||||
path: '/pages/index/index',
|
||||
imageUrl: vdata.shareImgUrl
|
||||
};
|
||||
});
|
||||
|
||||
/**
|
||||
* 分享到朋友圈
|
||||
*/
|
||||
onShareTimeline(() => {
|
||||
return {
|
||||
title: uni.$appName,
|
||||
path: '/pages/index/index',
|
||||
imageUrl: vdata.shareImgUrl
|
||||
};
|
||||
});
|
||||
});
|
||||
// 下拉刷新
|
||||
onPullDownRefresh(() => {
|
||||
refData();
|
||||
});
|
||||
|
||||
/**
|
||||
* 分享到朋友圈
|
||||
*/
|
||||
onShareTimeline(() => {
|
||||
return {
|
||||
title: uni.$appName,
|
||||
imageUrl: vdata.shareImgUrl
|
||||
};
|
||||
});
|
||||
// 下拉刷新
|
||||
onPullDownRefresh(() => {
|
||||
refData();
|
||||
});
|
||||
onShow(() => {
|
||||
menuStore.getMenus()
|
||||
})
|
||||
const navBack = uni.navigateTo
|
||||
|
||||
|
||||
// uni.navigateTo = (e) => {
|
||||
// console.log(e);
|
||||
// if (menuStore.menuList.find(v => v.allPath == e.url.replace(/^\/+|\/+$/g, ''))) {
|
||||
// navBack(e)
|
||||
// } else {
|
||||
// uni.showToast({
|
||||
// title: '你没有该权限',
|
||||
// icon: 'error'
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bg-main {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
.bgbottomStyle {
|
||||
position: absolute;
|
||||
bottom: -2rpx;
|
||||
left: 0;
|
||||
|
||||
width: 750rpx;
|
||||
height: 74rpx;
|
||||
background: linear-gradient(180deg, rgba(195, 215, 235, 0) 0%, #f9f9f9 100%);
|
||||
}
|
||||
.income {
|
||||
/* #ifdef H5 */
|
||||
padding-top: calc(84rpx);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
padding-top: calc(84rpx + 44px);
|
||||
|
||||
/* #endif */
|
||||
> view {
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
.logoout {
|
||||
padding: 0 120rpx;
|
||||
}
|
||||
|
||||
> view:nth-child(1) {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
margin-top: 84rpx;
|
||||
.bg-main {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
> view:nth-child(2) {
|
||||
margin-top: 20rpx;
|
||||
font-weight: 500;
|
||||
font-size: 64rpx;
|
||||
}
|
||||
|
||||
> view:nth-child(3) {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
opacity: 0;
|
||||
right: 28rpx;
|
||||
transition: opacity 0.3s;
|
||||
background: #ffffff;
|
||||
padding: 20rpx 14rpx;
|
||||
width: 211rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
|
||||
&.showTips {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sanjiao {
|
||||
.bgbottomStyle {
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
top: 50%;
|
||||
transform: translateX(10rpx) translateY(-50%);
|
||||
bottom: -2rpx;
|
||||
left: 0;
|
||||
|
||||
width: 750rpx;
|
||||
height: 74rpx;
|
||||
|
||||
height: 112rpx;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #F6F6F6 100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
.income {
|
||||
/* #ifdef H5 */
|
||||
padding-top: calc(84rpx);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
padding-top: calc(84rpx + 44px);
|
||||
|
||||
/* #endif */
|
||||
>view {
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
}
|
||||
|
||||
>view:nth-child(1) {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
margin-top: 84rpx;
|
||||
}
|
||||
|
||||
>view:nth-child(2) {
|
||||
margin-top: 20rpx;
|
||||
font-weight: 500;
|
||||
font-size: 64rpx;
|
||||
}
|
||||
|
||||
>view:nth-child(3) {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
opacity: 0;
|
||||
right: 28rpx;
|
||||
transition: opacity 0.3s;
|
||||
background: #ffffff;
|
||||
padding: 20rpx 14rpx;
|
||||
width: 211rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
|
||||
&.showTips {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sanjiao {
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
top: 50%;
|
||||
transform: translateX(10rpx) translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.change-shop {
|
||||
white-space: nowrap;
|
||||
width: 182rpx;
|
||||
height: 48rpx;
|
||||
background: rgba(255, 255, 255, .26);
|
||||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||||
}
|
||||
|
||||
.bg-color-view {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 489rpx;
|
||||
background: linear-gradient(90deg, #6197FF 0%, #62D8CC 100%);
|
||||
}
|
||||
.title-line{
|
||||
width: 4rpx;
|
||||
height: 22rpx;
|
||||
background-color: $my-main-color;
|
||||
}
|
||||
</style>
|
||||
323
pages/permission/permission.vue
Normal file
323
pages/permission/permission.vue
Normal file
@@ -0,0 +1,323 @@
|
||||
<template>
|
||||
<view class="u-wrap">
|
||||
<!-- <view class="u-search-box">
|
||||
<view class="u-search-inner">
|
||||
<up-icon name="search" color="#909399" :size="28"></up-icon>
|
||||
<text class="u-search-text">搜索</text>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="u-menu-wrap">
|
||||
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
|
||||
:scroll-into-view="itemId">
|
||||
<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item"
|
||||
:class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
|
||||
<text class="u-line-1">{{item.title}}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box"
|
||||
@scroll="rightScroll">
|
||||
<view class="page-view">
|
||||
<view class="class-item" :id="'item' + index" v-for="(item , index) in tabbar" :key="index">
|
||||
<view class="item-title color-main">
|
||||
<text>{{item.title}}</text>
|
||||
</view>
|
||||
<view class="item-container u-m-t-32">
|
||||
<view class="thumb-box" @click="toPage(item1, index1)"
|
||||
v-for="(item1, index1) in item.children" :key="index1">
|
||||
<image class="item-menu-image" :src="item1.miniIcon" mode=""></image>
|
||||
<view class="item-menu-name u-m-t-16">{{item1.title}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
useMenusStore
|
||||
} from '@/store/menus.js';
|
||||
const menusStore = useMenusStore()
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0, //tab标题的滚动条位置
|
||||
oldScrollTop: 0,
|
||||
current: 0, // 预设当前项的值
|
||||
menuHeight: 0, // 左边菜单的高度
|
||||
menuItemHeight: 0, // 左边菜单item的高度
|
||||
itemId: '', // 栏目右边scroll-view用于滚动的id
|
||||
tabbar: [],
|
||||
menuItemPos: [],
|
||||
arr: [],
|
||||
scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
|
||||
timer: null, // 定时器
|
||||
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.init()
|
||||
},
|
||||
onReady() {
|
||||
this.getMenuItemTop()
|
||||
},
|
||||
methods: {
|
||||
toPage(item, index) {
|
||||
console.log(item);
|
||||
uni.navigateTo({
|
||||
url: '/' + item.miniPath.replace(/^\/+|\/+$/g, ''),
|
||||
fail(err) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '无该页面路径或无权限访问该页面'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
async init() {
|
||||
const res = await menusStore.getMenus()
|
||||
this.tabbar = res.filter(v => v.type == 0 && v.children.length && !v.hidden).map(v => {
|
||||
return {
|
||||
...v,
|
||||
children: v.children.filter(child => child.type == 0 && !child.hidden)
|
||||
}
|
||||
})
|
||||
console.log(this.tabbar);
|
||||
},
|
||||
// 点击左边的栏目切换
|
||||
async swichMenu(index) {
|
||||
if (this.arr.length == 0) {
|
||||
await this.getMenuItemTop();
|
||||
}
|
||||
if (index == this.current) return;
|
||||
this.scrollRightTop = this.oldScrollTop;
|
||||
this.$nextTick(function() {
|
||||
this.scrollRightTop = this.arr[index];
|
||||
this.current = index;
|
||||
this.leftMenuStatus(index);
|
||||
})
|
||||
},
|
||||
// 获取一个目标元素的高度
|
||||
getElRect(elClass, dataVal) {
|
||||
new Promise((resolve, reject) => {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('.' + elClass).fields({
|
||||
size: true
|
||||
}, res => {
|
||||
// 如果节点尚未生成，res值为null，循环调用执行
|
||||
if (!res) {
|
||||
setTimeout(() => {
|
||||
this.getElRect(elClass);
|
||||
}, 10);
|
||||
return;
|
||||
}
|
||||
this[dataVal] = res.height;
|
||||
resolve();
|
||||
}).exec();
|
||||
})
|
||||
},
|
||||
// 观测元素相交状态
|
||||
async observer() {
|
||||
this.tabbar.map((val, index) => {
|
||||
let observer = uni.createIntersectionObserver(this);
|
||||
// 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
|
||||
// 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
|
||||
observer.relativeTo('.right-box', {
|
||||
top: 0
|
||||
}).observe('#item' + index, res => {
|
||||
if (res.intersectionRatio > 0) {
|
||||
let id = res.id.substring(4);
|
||||
this.leftMenuStatus(id);
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
// 设置左边菜单的滚动状态
|
||||
async leftMenuStatus(index) {
|
||||
this.current = index;
|
||||
// 如果为0，意味着尚未初始化
|
||||
if (this.menuHeight == 0 || this.menuItemHeight == 0) {
|
||||
await this.getElRect('menu-scroll-view', 'menuHeight');
|
||||
await this.getElRect('u-tab-item', 'menuItemHeight');
|
||||
}
|
||||
// 将菜单活动item垂直居中
|
||||
this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
|
||||
},
|
||||
// 获取右边菜单每个item到顶部的距离
|
||||
getMenuItemTop() {
|
||||
new Promise(resolve => {
|
||||
let selectorQuery = uni.createSelectorQuery();
|
||||
selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
|
||||
// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
|
||||
if (!rects.length) {
|
||||
setTimeout(() => {
|
||||
this.getMenuItemTop();
|
||||
}, 10);
|
||||
return;
|
||||
}
|
||||
rects.forEach((rect) => {
|
||||
// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
|
||||
this.arr.push(rect.top - rects[0].top);
|
||||
resolve();
|
||||
})
|
||||
}).exec()
|
||||
})
|
||||
},
|
||||
// 右边菜单滚动
|
||||
async rightScroll(e) {
|
||||
this.oldScrollTop = e.detail.scrollTop;
|
||||
if (this.arr.length == 0) {
|
||||
await this.getMenuItemTop();
|
||||
}
|
||||
if (this.timer) return;
|
||||
if (!this.menuHeight) {
|
||||
await this.getElRect('menu-scroll-view', 'menuHeight');
|
||||
}
|
||||
setTimeout(() => { // 节流
|
||||
this.timer = null;
|
||||
// scrollHeight为右边菜单垂直中点位置
|
||||
let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
|
||||
for (let i = 0; i < this.arr.length; i++) {
|
||||
let height1 = this.arr[i];
|
||||
let height2 = this.arr[i + 1];
|
||||
// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
|
||||
if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
|
||||
this.leftMenuStatus(i);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}, 10)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-wrap {
|
||||
height: calc(100vh);
|
||||
/* #ifdef H5 */
|
||||
height: calc(100vh - var(--window-top));
|
||||
/* #endif */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.u-search-box {
|
||||
padding: 18rpx 30rpx;
|
||||
}
|
||||
|
||||
.u-menu-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-search-inner {
|
||||
background-color: rgb(234, 234, 234);
|
||||
border-radius: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10rpx 16rpx;
|
||||
}
|
||||
|
||||
.u-search-text {
|
||||
font-size: 26rpx;
|
||||
color: $u-tips-color;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.u-tab-view {
|
||||
width: 200rpx;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.u-tab-item {
|
||||
height: 110rpx;
|
||||
background: #f6f6f6;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26rpx;
|
||||
color: #444;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.u-tab-item-active {
|
||||
position: relative;
|
||||
color: $my-main-color;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.u-tab-item-active::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-left: 4px solid $u-primary;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.u-tab-view {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.right-box {
|
||||
// background-color: rgb(250, 250, 250);
|
||||
}
|
||||
|
||||
.page-view {
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
|
||||
.class-item {
|
||||
margin-bottom: 30rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 8rpx;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
.class-item:last-child {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.item-menu-name {
|
||||
font-weight: normal;
|
||||
font-size: 20rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.item-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.thumb-box {
|
||||
width: 158rpx;
|
||||
height: 170rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 4rpx 6rpx 2rpx rgba(0, 0, 0, 0.08);
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin-top: 20rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.item-menu-image {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
</style>
|
||||
566
pages/shopSetUp/decoration.vue
Normal file
566
pages/shopSetUp/decoration.vue
Normal file
@@ -0,0 +1,566 @@
|
||||
<template>
|
||||
<view class="page-wrapper">
|
||||
<view class="page-cell column">
|
||||
<view class="extendList">
|
||||
<view class="extendTab">
|
||||
<view class="extendTab_item" v-for="(item, index) in vdata.extendList" :key="index"
|
||||
:class="{ active: vdata.extendIndex == index }" @click="extendTabClick(item, index)">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="extend_content">
|
||||
<view class="extend_img">
|
||||
<view class="u-flex">
|
||||
<!-- <view class="extend_title">{{ vdata.extendInfo.name }}背景图片：</view> -->
|
||||
<view class="extend_title">当前背景图片：</view>
|
||||
<view class=" color-main u-font-28" @click="chooseAndUploadAvatar('extendUp')">更换</view>
|
||||
</view>
|
||||
<view class="fileUp u-m-t-24">
|
||||
<up-image width="148rpx" height="148rpx" :src="vdata.extendInfo.value"></up-image>
|
||||
<view class="file" @tap="chooseAndUploadAvatar('extendUp')"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-32 u-m-b-24">
|
||||
<!-- <view class="extend_title">{{ vdata.extendInfo.name }}背景效果：</view> -->
|
||||
<view class="extend_title">当前背景效果：</view>
|
||||
</view>
|
||||
<view class="u-flex " :class="['bg-'+vdata.extendIndex]" :style="{
|
||||
backgroundImage:'url('+vdata.extendInfo.value+')'
|
||||
}">
|
||||
<image style="width: 100%;" :src="imgUrl" mode="widthFix"></image>
|
||||
<image class="logo" v-if="vdata.extendIndex==4" :src="vdata.extendInfo.value" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="cutShop" @tap="go.to('PAGES_SHOP_LIST')">切换门店</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
computed
|
||||
} from 'vue';
|
||||
import {
|
||||
onShow
|
||||
} from '@dcloudio/uni-app';
|
||||
import go from '@/commons/utils/go.js';
|
||||
import {
|
||||
uploadFile
|
||||
} from '@/http/api/index.js';
|
||||
import {
|
||||
getShopInfo,
|
||||
editShopInfo,
|
||||
getShopExtend,
|
||||
editShopExtend
|
||||
} from '@/http/api/shop.js';
|
||||
|
||||
|
||||
const vdata = reactive({
|
||||
shopInfo: {
|
||||
status: 2,
|
||||
isAccountPay: 0,
|
||||
isMemberPrice: 0
|
||||
},
|
||||
extendList: [],
|
||||
registerTypeList: [{
|
||||
name: '先付费',
|
||||
value: 'before'
|
||||
},
|
||||
{
|
||||
name: '后付费',
|
||||
value: 'after'
|
||||
}
|
||||
],
|
||||
extendIndex: 0,
|
||||
extendInfo: {},
|
||||
dineIn: false,
|
||||
takeout: false,
|
||||
isTableFee: false,
|
||||
label: '',
|
||||
type: '',
|
||||
inputValue: ''
|
||||
});
|
||||
onMounted(() => {
|
||||
shopExtend();
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
shopInfo();
|
||||
uni.$on('refreshPreviousPage', (params) => {
|
||||
// 这里执行刷新数据的操作，例如重新调用API获取数据
|
||||
refreshData(params);
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* 输入内容修改
|
||||
*/
|
||||
let refreshData = (e) => {
|
||||
let params = {
|
||||
id: vdata.shopInfo.id
|
||||
};
|
||||
params[e.name] = e.value;
|
||||
vdata.type = e.name;
|
||||
vdata.inputValue = e.value;
|
||||
updateShopInfo(params, 'input');
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取店铺信息
|
||||
*/
|
||||
const shopInfo = () => {
|
||||
getShopInfo({
|
||||
id: uni.getStorageSync('shopInfo').id
|
||||
}).then((res) => {
|
||||
vdata.isTableFee = res.isTableFee == 1 ? true : false;
|
||||
if (res.eatModel.split(',').indexOf('dine-in') != -1) {
|
||||
vdata.dineIn = true;
|
||||
}
|
||||
if (res.eatModel.split(',').indexOf('take-out') != -1) {
|
||||
vdata.takeout = true;
|
||||
}
|
||||
vdata.shopInfo = res;
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取店铺图片
|
||||
*/
|
||||
let shopExtend = () => {
|
||||
getShopExtend().then((res) => {
|
||||
if (res && res.length > 0) {
|
||||
vdata.extendList = res;
|
||||
vdata.extendIndex = 0;
|
||||
vdata.extendInfo = res[0];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 台桌清理模式修改
|
||||
function tableClearChange(n) {
|
||||
let params = {
|
||||
id: vdata.shopInfo.id,
|
||||
tableClearType: n
|
||||
};
|
||||
updateShopInfo(params);
|
||||
}
|
||||
|
||||
/**
|
||||
* 付费模式修改
|
||||
*/
|
||||
let radioChange = (n) => {
|
||||
let params = {
|
||||
id: vdata.shopInfo.id,
|
||||
registerType: n
|
||||
};
|
||||
updateShopInfo(params);
|
||||
};
|
||||
|
||||
/**
|
||||
* 修改
|
||||
*/
|
||||
let updateShopInfo = (params, type) => {
|
||||
editShopInfo(params).then((res) => {
|
||||
if (type && type == 'input') {
|
||||
vdata.shopInfo[vdata.type] = vdata.inputValue;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 修改店铺图片
|
||||
*/
|
||||
let updateShopExtend = () => {
|
||||
editShopExtend({
|
||||
autokey: vdata.extendInfo.autoKey,
|
||||
value: vdata.extendInfo.value
|
||||
}).then((res) => {});
|
||||
};
|
||||
|
||||
/**
|
||||
* 上传头像
|
||||
*/
|
||||
let chooseAndUploadAvatar = (type) => {
|
||||
// 选择图片
|
||||
uni.chooseImage({
|
||||
count: 1, // 默认为1，只选择一张图片
|
||||
sizeType: ['original', 'compressed'], // 图片质量，原图或压缩
|
||||
sourceType: ['album', 'camera'], // 图片来源，相册或相机
|
||||
success: (res) => {
|
||||
let file = res.tempFiles[0];
|
||||
uploadFile(file)
|
||||
.then((res) => {
|
||||
if (type == 'coverImg') {
|
||||
vdata.shopInfo.coverImg = res;
|
||||
let params = {
|
||||
id: vdata.shopInfo.id,
|
||||
coverImg: vdata.shopInfo.coverImg
|
||||
};
|
||||
updateShopInfo(params);
|
||||
}
|
||||
if (type == 'extendUp') {
|
||||
vdata.extendInfo.value = res;
|
||||
updateShopExtend();
|
||||
}
|
||||
})
|
||||
.catch((res) => {
|
||||
if (res.errMsg) {
|
||||
uni.showToast({
|
||||
title: '图片大小超出限制',
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: (chooseImageError) => {
|
||||
// 选择图片失败处理逻辑
|
||||
console.log('choose image fail:', chooseImageError);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 店铺图片TAB切换
|
||||
*/
|
||||
let extendTabClick = (item, index) => {
|
||||
vdata.extendInfo = item;
|
||||
vdata.extendIndex = index;
|
||||
};
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 修改
|
||||
*/
|
||||
let switchChange = (type) => {
|
||||
let params = {
|
||||
id: vdata.shopInfo.id
|
||||
};
|
||||
switch (type) {
|
||||
case 'address':
|
||||
params.lng = vdata.shopInfo.lng;
|
||||
params.lat = vdata.shopInfo.lat;
|
||||
params.address = vdata.shopInfo.address;
|
||||
break;
|
||||
case 'status':
|
||||
params.status = vdata.shopInfo.status;
|
||||
break;
|
||||
case 'eatModel':
|
||||
params.eatModel = [];
|
||||
if (vdata.dineIn) {
|
||||
params.eatModel.push('dine-in');
|
||||
}
|
||||
if (vdata.takeout) {
|
||||
params.eatModel.push('take-out');
|
||||
}
|
||||
params.eatModel = params.eatModel.join(',');
|
||||
break;
|
||||
case 'isAccountPay':
|
||||
params.isAccountPay = vdata.shopInfo.isAccountPay;
|
||||
break;
|
||||
case 'isMemberPrice':
|
||||
params.isMemberPrice = vdata.shopInfo.isMemberPrice;
|
||||
break;
|
||||
case 'isTableFee':
|
||||
if (vdata.isTableFee) {
|
||||
params.isTableFee = 1;
|
||||
} else {
|
||||
params.isTableFee = 0;
|
||||
}
|
||||
break;
|
||||
}
|
||||
updateShopInfo(params);
|
||||
};
|
||||
|
||||
const imgUrl = computed(() => {
|
||||
if(vdata.extendIndex==2){
|
||||
return '/static/member_bg.png'
|
||||
}
|
||||
return 'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/cashier_admin_app_shopSet/' + vdata.extendInfo
|
||||
.autoKey + '.png'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-wrapper {
|
||||
background-color: #f8f8f8;
|
||||
padding-bottom: 32rpx;
|
||||
|
||||
.page-cell {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
.label {
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
margin-right: 20rpx;
|
||||
|
||||
.tableFee {
|
||||
width: 186rpx;
|
||||
height: 54rpx;
|
||||
line-height: 54rpx;
|
||||
margin-left: 10rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
border: 2rpx solid #e5e5e5;
|
||||
text-align: left;
|
||||
padding: 0 18rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.extendList {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.extendTab {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
background-color: #fff;
|
||||
padding: 32rpx 28rpx;
|
||||
|
||||
.extendTab_item {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 4rpx;
|
||||
border: 2rpx solid #e5e5e5;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #318afe;
|
||||
border: 2rpx solid #318afe;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.extend_content {
|
||||
margin-top: 32rpx;
|
||||
margin: 32rpx 28rpx;
|
||||
padding: 32rpx 28rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
|
||||
.preview {
|
||||
min-width: 146rpx;
|
||||
height: 342rpx;
|
||||
position: relative;
|
||||
margin-right: 32rpx;
|
||||
background-color: #f7f7f7;
|
||||
|
||||
::v-deep .bg,
|
||||
::v-deep .bg .u-image,
|
||||
::v-deep .bg .u-image__image {
|
||||
width: 146rpx !important;
|
||||
height: 342rpx !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
::v-deep .index_bg .u-image,
|
||||
::v-deep .index_bg .u-image__image {
|
||||
width: 146rpx !important;
|
||||
height: 242rpx !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
::v-deep .my_bg .u-image,
|
||||
::v-deep .my_bg .u-image__image {
|
||||
width: 146rpx !important;
|
||||
height: 90rpx !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
::v-deep .member_bg .u-image,
|
||||
::v-deep .member_bg .u-image__image {
|
||||
width: 34rpx !important;
|
||||
height: 63rpx !important;
|
||||
position: absolute;
|
||||
top: 22rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
border-radius: 5rpx !important;
|
||||
}
|
||||
|
||||
::v-deep .shopinfo_bg .u-image,
|
||||
::v-deep .shopinfo_bg .u-image__image {
|
||||
width: 146rpx !important;
|
||||
height: 50rpx !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
::v-deep .bg.ticket_logo,
|
||||
::v-deep .bg.ticket_logo .u-image,
|
||||
::v-deep .bg.ticket_logo .u-image__image {
|
||||
width: 359rpx !important;
|
||||
height: 232rpx !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
::v-deep .ticket_logo.img .u-image,
|
||||
::v-deep .ticket_logo.img .u-image__image {
|
||||
width: 146rpx !important;
|
||||
height: 50rpx !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 10rpx;
|
||||
}
|
||||
|
||||
.shopinfo_bg_f {
|
||||
width: 146rpx;
|
||||
height: 290rpx;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.extend_img {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.extend_title {
|
||||
font-weight: 700;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fileUp {
|
||||
width: 148rpx;
|
||||
height: 148rpx;
|
||||
position: relative;
|
||||
|
||||
.file {
|
||||
width: 148rpx;
|
||||
height: 148rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .u-image,
|
||||
::v-deep .u-image__image {
|
||||
width: 148rpx !important;
|
||||
height: 148rpx !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
flex-direction: column;
|
||||
|
||||
.label {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.m {
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.cutShop {
|
||||
width: 530rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
background: #318afe;
|
||||
border-radius: 56rpx;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #ffffff;
|
||||
margin: 48rpx auto 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
position: relative;
|
||||
|
||||
.file {
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
line-height: 112rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.fileImg {
|
||||
width: 112rpx !important;
|
||||
height: 112rpx !important;
|
||||
|
||||
::v-deep .u-avatar__image {
|
||||
width: 112rpx !important;
|
||||
height: 112rpx !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-cover {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.bg-0 {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.bg-1 {
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
.bg-2 {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
border-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.bg-3{
|
||||
background-repeat: no-repeat;
|
||||
background-position: top ;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
.bg-4{
|
||||
background-repeat: no-repeat;
|
||||
background-position: top ;
|
||||
background-size: 100% auto;
|
||||
position: relative;
|
||||
.logo{
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
width: 90px;
|
||||
height: 30px;
|
||||
top: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -125,53 +125,7 @@
|
||||
<view class="label">店铺收款码</view>
|
||||
<view class="right"><up-icon name="arrow-right" color="#999999" size="15"></up-icon></view>
|
||||
</view>
|
||||
<view class="page-cell column">
|
||||
<view class="label">店铺图片</view>
|
||||
<view class="extendList">
|
||||
<view class="extendTab">
|
||||
<view
|
||||
class="extendTab_item"
|
||||
v-for="(item, index) in vdata.extendList"
|
||||
:key="index"
|
||||
:class="{ active: vdata.extendIndex == index }"
|
||||
@click="extendTabClick(item, index)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="extend_content">
|
||||
<view class="preview" v-if="vdata.extendInfo.autoKey != 'ticket_logo'">
|
||||
<view class="index_bg"><up-image v-if="'index_bg' == vdata.extendInfo.autoKey" :src="vdata.extendInfo.value"></up-image></view>
|
||||
<view class="my_bg"><up-image v-if="'my_bg' == vdata.extendInfo.autoKey" :src="vdata.extendInfo.value"></up-image></view>
|
||||
<view class="bg">
|
||||
<up-image
|
||||
v-if="'member_bg' == vdata.extendInfo.autoKey"
|
||||
:src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/cashier_admin_app_shopSet/' + vdata.extendInfo.autoKey + '.png'"
|
||||
></up-image>
|
||||
</view>
|
||||
<view class="member_bg"><up-image v-if="'member_bg' == vdata.extendInfo.autoKey" :src="vdata.extendInfo.value"></up-image></view>
|
||||
<view class="shopinfo_bg"><up-image v-if="'shopinfo_bg' == vdata.extendInfo.autoKey" :src="vdata.extendInfo.value"></up-image></view>
|
||||
<view class="shopinfo_bg_f" v-if="'shopinfo_bg' == vdata.extendInfo.autoKey"></view>
|
||||
<view class="bg" v-if="vdata.extendInfo.autoKey">
|
||||
<up-image :src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/cashier_admin_app_shopSet/' + vdata.extendInfo.autoKey + '.png'"></up-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="preview" v-else style="width: 359rpx; height: 232rpx">
|
||||
<view class="bg ticket_logo" v-if="vdata.extendInfo.autoKey == 'ticket_logo'">
|
||||
<up-image :src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/cashier_admin_app_shopSet/' + vdata.extendInfo.autoKey + '.png'"></up-image>
|
||||
</view>
|
||||
<view class="ticket_logo img"><up-image v-if="'ticket_logo' == vdata.extendInfo.autoKey" :src="vdata.extendInfo.value"></up-image></view>
|
||||
</view>
|
||||
<view class="extend_img">
|
||||
<view class="extend_title">{{ vdata.extendInfo.name }}背景图片</view>
|
||||
<view class="fileUp">
|
||||
<up-image :src="vdata.extendInfo.value"></up-image>
|
||||
<view class="file" @tap="chooseAndUploadAvatar('extendUp')"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="cutShop" @tap="go.to('PAGES_SHOP_LIST')">切换门店</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user