余额充值
This commit is contained in:
parent
5e8f52b2a4
commit
af354773ad
|
|
@ -7,4 +7,13 @@ export function getOrderList(params) {
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params
|
params
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取账户余额
|
||||||
|
export function getAccountBalance(params) {
|
||||||
|
return request({
|
||||||
|
url: '/leopen/account/balance/query',
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -166,6 +166,13 @@
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "皖送e餐"
|
"navigationBarTitleText": "皖送e餐"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/remainingSum/index",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"tabBar": {
|
"tabBar": {
|
||||||
|
|
|
||||||
|
|
@ -5,9 +5,13 @@
|
||||||
@leftClick="goBack"
|
@leftClick="goBack"
|
||||||
@rightClick="chickIcon"
|
@rightClick="chickIcon"
|
||||||
:autoBack="true"
|
:autoBack="true"
|
||||||
:rightText="text"
|
|
||||||
placeholder
|
placeholder
|
||||||
></u-navbar>
|
titleStyle="font-size: 16px;font-weight: 700;"
|
||||||
|
>
|
||||||
|
<view slot="right">
|
||||||
|
<span class="right-text">{{ text }}</span>
|
||||||
|
</view>
|
||||||
|
</u-navbar>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -73,4 +77,10 @@ export default {
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss"></style>
|
<style lang="scss" scoped>
|
||||||
|
.right-text {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #0f274b;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -46,7 +46,7 @@
|
||||||
|
|
||||||
<!-- 右侧余额区域 -->
|
<!-- 右侧余额区域 -->
|
||||||
<view class="balance-area">
|
<view class="balance-area">
|
||||||
<view class="balance-text">
|
<view class="balance-text" @click="goToRemainingSum">
|
||||||
<text class="balance-label">余额/充值</text>
|
<text class="balance-label">余额/充值</text>
|
||||||
<view class="balance-amount">
|
<view class="balance-amount">
|
||||||
<text class="currency">¥</text>
|
<text class="currency">¥</text>
|
||||||
|
|
@ -101,7 +101,13 @@
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/code/index'
|
url: '/pages/code/index'
|
||||||
})
|
})
|
||||||
}
|
},
|
||||||
|
goToRemainingSum() {
|
||||||
|
// 跳转到余额/充值页面
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/remainingSum/index'
|
||||||
|
})
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,203 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<Navbar title="余额/充值" :showRightText="true" :isBack="false" :text="'充值记录'" @chickIcon="handleRightText" />
|
||||||
|
<div class="content">
|
||||||
|
<div class="top-cont">
|
||||||
|
<div>总余额(元)</div>
|
||||||
|
<div class="acc-bal">{{ balance.accBal }}</div>
|
||||||
|
<div class="money">
|
||||||
|
<div class="money-item">
|
||||||
|
<div>个人钱包</div>
|
||||||
|
<div class="item">
|
||||||
|
<span style="font-size: 11px">￥</span>
|
||||||
|
{{ balance.walletBal }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="money-item">
|
||||||
|
<div>补贴钱包</div>
|
||||||
|
<div class="item">
|
||||||
|
<span style="font-size: 11px">￥</span>
|
||||||
|
{{ balance.subsidyBal }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="up">快捷充值</div>
|
||||||
|
<div class="box">
|
||||||
|
<div class="box-item" :class="{ active: active == 1 }" @click="handleRecharge(1)">
|
||||||
|
<span>￥</span>
|
||||||
|
<span>50.00</span>
|
||||||
|
<u-icon v-if="active == 1" class="icon" name="../../static/images/active.png" size="12" />
|
||||||
|
</div>
|
||||||
|
<div class="box-item" :class="{ active: active == 2 }" @click="handleRecharge(2)">
|
||||||
|
<span>￥</span>
|
||||||
|
<span>100.00</span>
|
||||||
|
<u-icon v-if="active == 2" class="icon" name="../../static/images/active.png" size="12" />
|
||||||
|
</div>
|
||||||
|
<div class="box-item" :class="{ active: active == 3 }" @click="handleRecharge(3)">
|
||||||
|
<span>￥</span>
|
||||||
|
<span>200.00</span>
|
||||||
|
<u-icon v-if="active == 3" class="icon" name="../../static/images/active.png" size="12" />
|
||||||
|
</div>
|
||||||
|
<div class="box-item" :class="{ active: active == 4 }" @click="handleRecharge(4)">
|
||||||
|
<span>￥</span>
|
||||||
|
<span>300.00</span>
|
||||||
|
<u-icon v-if="active == 4" class="icon" name="../../static/images/active.png" size="12" />
|
||||||
|
</div>
|
||||||
|
<div class="box-item" :class="{ active: active == 5 }" @click="handleRecharge(5)">
|
||||||
|
<span>￥</span>
|
||||||
|
<span>500.00</span>
|
||||||
|
<u-icon v-if="active == 5" class="icon" name="../../static/images/active.png" size="12" />
|
||||||
|
</div>
|
||||||
|
<div class="box-item" :class="{ active: active == 6 }" @click="handleRecharge(6)">
|
||||||
|
自定义
|
||||||
|
<u-icon v-if="active == 6" class="icon" name="../../static/images/active.png" size="12" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 充值 -->
|
||||||
|
<u-button shape="circle" color="#FF6816" @click="" style="height: 32; margin-top: 100px">立即充值</u-button>
|
||||||
|
</div>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getAccountBalance } from '@/api/dining-hall'
|
||||||
|
import uIcon from '../../uni_modules/uview-ui/components/u-icon/u-icon.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { uIcon },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 余额
|
||||||
|
balance: {
|
||||||
|
accBal: '1.23', // 账户总余额
|
||||||
|
walletBal: '1.23', // 个人钱包
|
||||||
|
subsidyBal: '1.23' // 补贴钱包
|
||||||
|
},
|
||||||
|
custId: '', // 用户id
|
||||||
|
custThirdId: '', // 用户第三方id
|
||||||
|
active: 1,
|
||||||
|
accTradeType: 8, // 交易类型 8微信扫码充值 9支付宝扫码充值 10现金充值
|
||||||
|
accType: 1, // 钱包类型 1个人钱包 2补贴钱包
|
||||||
|
rechargeAmount: 0, // 充值金额
|
||||||
|
payChannel: '', // 支付渠道
|
||||||
|
payType: '', // 支付方式
|
||||||
|
thirdRechargeNum: '' // 第三方充值流水号
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {},
|
||||||
|
methods: {
|
||||||
|
handleRightText() {
|
||||||
|
console.log('🚀 ~ handleRightText ~ ')
|
||||||
|
// uni.navigateTo({
|
||||||
|
// url: ''
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
// 获取余额
|
||||||
|
async getBalance() {
|
||||||
|
const params = {
|
||||||
|
custId: this.custId,
|
||||||
|
custThirdId: this.custThirdId
|
||||||
|
}
|
||||||
|
const res = await getAccountBalance(params)
|
||||||
|
console.log('🚀 ~ getBalance ~ res', res)
|
||||||
|
},
|
||||||
|
// 充值
|
||||||
|
handleRecharge(index) {
|
||||||
|
this.active = index
|
||||||
|
if (index == 1) {
|
||||||
|
this.rechargeAmount = 50
|
||||||
|
} else if (index == 2) {
|
||||||
|
this.rechargeAmount = 100
|
||||||
|
} else if (index == 3) {
|
||||||
|
this.rechargeAmount = 200
|
||||||
|
} else if (index == 4) {
|
||||||
|
this.rechargeAmount = 300
|
||||||
|
} else if (index == 5) {
|
||||||
|
this.rechargeAmount = 500
|
||||||
|
} else if (index == 6) {
|
||||||
|
// this.rechargeAmount
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.content {
|
||||||
|
padding: 16px;
|
||||||
|
.top-cont {
|
||||||
|
padding: 16px;
|
||||||
|
height: 190px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
background: linear-gradient(134deg, #ff6816 0%, rgba(255, 104, 22, 0.2) 99%), rgba(255, 104, 22, 0.6);
|
||||||
|
border-radius: 12px 12px 12px 12px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.acc-bal {
|
||||||
|
margin-top: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.money {
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 16px;
|
||||||
|
.money-item {
|
||||||
|
margin-right: 60px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
.item {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.up {
|
||||||
|
margin: 20px 0 10px;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #0f274b;
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
|
.box {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
.box-item {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
width: 109px;
|
||||||
|
height: 66px;
|
||||||
|
border-radius: 4px 4px 4px 4px;
|
||||||
|
border: 1px solid rgba(15, 39, 75, 0.4);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #0f274b;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
:first-child {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
background: rgba(255, 104, 22, 0.1);
|
||||||
|
border: 1px solid #ff6816;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,357 @@
|
||||||
|
<template>
|
||||||
|
<view class="index_main" :style="{minHeight:screenH + 'px'}">
|
||||||
|
<view class="back-top"></view>
|
||||||
|
<!-- 轮播图 -->
|
||||||
|
<view class="swiper_nav">
|
||||||
|
<swiper autoplay :duration="1000">
|
||||||
|
<swiper-item v-for="(item, index) in swiperImg" :key="index">
|
||||||
|
<image :src="item" style="width: 100%;height: 100%;"></image>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
<!-- 皖送e餐 志愿者服务 -->
|
||||||
|
<view class="main_menu" v-if="showFirstMenus">
|
||||||
|
<view class="main_menu_item" v-for="(item,index) in firstMenus" :key="index" v-if="item.visible" @click="jumpRouter(item)">
|
||||||
|
<image :src="item.icon"></image>
|
||||||
|
<view class="main_menu_name">{{item.name}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
getAppUserPermissionInfo,
|
||||||
|
getUserInfo
|
||||||
|
} from '@/common/api.js';
|
||||||
|
import {
|
||||||
|
callbackRequest,
|
||||||
|
callbackRequestNoLoading,
|
||||||
|
setStorage,
|
||||||
|
getStorage,
|
||||||
|
// alertTip
|
||||||
|
} from '@/common/util.js';
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
screenH: '',
|
||||||
|
swiperImg: [
|
||||||
|
require('@/static/images/system/top.png')
|
||||||
|
],
|
||||||
|
permissions: [],
|
||||||
|
roleList: [],
|
||||||
|
firstMenus: [],
|
||||||
|
secondMenus: [],
|
||||||
|
showFirstMenus: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
// this.getAppUserPermissionInfo()
|
||||||
|
// this.getUserInfo()
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
uni.getSystemInfo({
|
||||||
|
success: (res) => {
|
||||||
|
this.screenH = res.windowHeight
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 菜单权限
|
||||||
|
getAppUserPermissionInfo() {
|
||||||
|
setStorage('userInfo', 'a866a82704044ae0a1a12ddc2a2e4346')
|
||||||
|
let userId = getStorage('userInfo') ? getStorage('userInfo') : 'a866a82704044ae0a1a12ddc2a2e4346';
|
||||||
|
callbackRequest({
|
||||||
|
method: getAppUserPermissionInfo,
|
||||||
|
userId: userId,
|
||||||
|
}).then(res => {
|
||||||
|
uni.hideLoading();
|
||||||
|
if (res.returnCode == 1) {
|
||||||
|
let returnData = res.returnData;
|
||||||
|
this.permissions = returnData.appMenus.length > 0 ? returnData.appMenus : [];
|
||||||
|
this.roleList = returnData.roles;
|
||||||
|
uni.setStorageSync('permissions', this.permissions);
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.handleMenus();
|
||||||
|
uni.setStorageSync('roles', returnData.roles);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
uni.showToast({title: '权限获取失败',icon: 'none',duration: 2000})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
getUserInfo() {
|
||||||
|
return new Promise((resove, reject) => {
|
||||||
|
let params = {
|
||||||
|
method: getUserInfo,
|
||||||
|
}
|
||||||
|
callbackRequest(params).then(res => {
|
||||||
|
let userinfo = res.returnData
|
||||||
|
uni.setStorageSync('userInfos', userinfo)
|
||||||
|
resove()
|
||||||
|
});
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
jumpRouter(row) {
|
||||||
|
if(row.path == 'wan_e_food') {
|
||||||
|
this.$tab.navigateTo('/pages/index')
|
||||||
|
}
|
||||||
|
if(row.path == 'wan_e_food') {
|
||||||
|
|
||||||
|
}
|
||||||
|
if(row.path == 'stage') {
|
||||||
|
// uni.navigateTo({
|
||||||
|
// url: '/pages/stage/index',
|
||||||
|
// success: (res) => {
|
||||||
|
// res.eventChannel.emit('pagesChange', { data: row.children })
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
handleMenus() {
|
||||||
|
let chunkSize = 8;
|
||||||
|
// 一级菜单
|
||||||
|
let firstMenusTemp = [];
|
||||||
|
// 二级菜单
|
||||||
|
let secondMenusTemp = [];
|
||||||
|
// 首页菜单
|
||||||
|
let permissionsOfIndex = this.permissions.filter(item => item.path == 'app_index' && item.visible);
|
||||||
|
// 过滤掉首页菜单
|
||||||
|
let permissionsOfOther = this.permissions.filter(item => item.path != 'app_index');
|
||||||
|
let showBanner = false;
|
||||||
|
console.log('一级菜单',permissionsOfIndex)
|
||||||
|
if (permissionsOfIndex && permissionsOfIndex.length > 0) {
|
||||||
|
if (permissionsOfIndex[0].children && permissionsOfIndex[0].children.length > 0) {
|
||||||
|
permissionsOfIndex[0].children.forEach(child => {
|
||||||
|
// 首页轮播图
|
||||||
|
if (child.path == "top_banners" && child.visible) {
|
||||||
|
showBanner = true;
|
||||||
|
}
|
||||||
|
// 一级菜单
|
||||||
|
if (child.path == "first_menus" && child.visible) {
|
||||||
|
firstMenusTemp = child.children;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.firstMenus = firstMenusTemp;
|
||||||
|
for (var i = 0; i < permissionsOfOther.length; i ++) {
|
||||||
|
secondMenusTemp.push(permissionsOfOther[i]);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.secondMenus = secondMenusTemp;
|
||||||
|
console.log('二级菜单', this.secondMenus)
|
||||||
|
|
||||||
|
if (this.secondMenus.length == 1) {
|
||||||
|
// let params = !this.secondMenus[0][0].children ? '' : this.secondMenus[0][0].children[0].path;
|
||||||
|
let params = this.getLastPathBtn(permissionsOfOther)
|
||||||
|
let rolePath = this.getLastPath(permissionsOfOther)
|
||||||
|
console.log('直跳截取处理', params, rolePath)
|
||||||
|
if (rolePath) {
|
||||||
|
let path = rolePath.replace(/\?+$/, ''); // 去掉结尾的所有问号
|
||||||
|
// 检查问号，选择合适的拼接符
|
||||||
|
let delimiter = path.includes('?') ? '&' : '?';
|
||||||
|
// 拼接最终的 URL
|
||||||
|
let url = path + delimiter + 'role=' + params;
|
||||||
|
uni.redirectTo({
|
||||||
|
url: url
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (firstMenusTemp.length == 0 || !showBanner) {
|
||||||
|
// this.images = [
|
||||||
|
// this.defaultBanner
|
||||||
|
// ];
|
||||||
|
}
|
||||||
|
// 2.没有配置一级菜单时，隐藏一级菜单
|
||||||
|
this.showFirstMenus = firstMenusTemp.length == 0 ? false : true;
|
||||||
|
},
|
||||||
|
|
||||||
|
getLastPathBtn(tree) {
|
||||||
|
if (!Array.isArray(tree) || tree.length !== 1) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const rootNode = tree[0];
|
||||||
|
if (!rootNode.path || !rootNode.children || rootNode.children.length !== 1) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
function traverse(node) {
|
||||||
|
if (node.children && node.children.length === 1) {
|
||||||
|
return traverse(node.children[0]);
|
||||||
|
} else if (node.children && node.children.length > 1) {
|
||||||
|
return false;
|
||||||
|
} else {
|
||||||
|
return node.path;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return traverse(rootNode);
|
||||||
|
},
|
||||||
|
|
||||||
|
getLastPath(tree) {
|
||||||
|
let lastPath = null;
|
||||||
|
let _this = this
|
||||||
|
|
||||||
|
function traverse(node) {
|
||||||
|
// 如果当前节点是我们想要的类型，更新最后的路径 type 1目录 2菜单 3按钮
|
||||||
|
// 如果当前节点是我们想要的类型，更新最后的路径
|
||||||
|
if (node.type == 2) {
|
||||||
|
lastPath = node.path;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 递归遍历子节点
|
||||||
|
if (node.type == 2 && node.children && node.children.length == 1) {
|
||||||
|
// 当数组是菜单且子节点长度等于1的时候，继续往下递归数组，说明当前数组不是最后一层
|
||||||
|
for (let child of node.children) {
|
||||||
|
traverse(child);
|
||||||
|
}
|
||||||
|
} else if (node.type == 2 && node.children && node.children.length > 1 && _this.someTypeTrue(node.children)) {
|
||||||
|
console.log('1111', node)
|
||||||
|
// 当数组是菜单且子节点长度大于1的时候，就得看下面的子节点是否为都是按钮,都是按钮则返回当前路径
|
||||||
|
lastPath = false
|
||||||
|
} else if (node.type == 2 && node.children && node.children.length > 1 && !_this.someTypeTrue(node.children)) {
|
||||||
|
console.log('2222', node)
|
||||||
|
lastPath = node.path;
|
||||||
|
} else {
|
||||||
|
console.log('3333', node)
|
||||||
|
lastPath = lastPath
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 遍历每个根节点
|
||||||
|
for (let root of tree) {
|
||||||
|
traverse(root);
|
||||||
|
}
|
||||||
|
|
||||||
|
return lastPath;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 判断下一层子节点是否全是按钮
|
||||||
|
someTypeTrue(arr) {
|
||||||
|
const result = arr.some(item => item.type == 3) ? false : true;
|
||||||
|
return result
|
||||||
|
},
|
||||||
|
|
||||||
|
jumpPage(item) {
|
||||||
|
if(!item.path) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '敬请期待',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
uni.navigateTo({
|
||||||
|
url: item.path
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.index_main {
|
||||||
|
background: #F2F6FA;
|
||||||
|
overflow: auto;
|
||||||
|
padding: 24rpx 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.back-top {
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
height: 578rpx;
|
||||||
|
background: linear-gradient( 180deg, #D2EAFF 0%, rgba(208,233,254,0) 100%);
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.swiper_nav {
|
||||||
|
width: 100%;
|
||||||
|
height: 300rpx;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 0 24rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.main_menu {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 24rpx;
|
||||||
|
padding: 0 12rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.main_menu_item {
|
||||||
|
z-index: 99;
|
||||||
|
margin: 0 12rpx;
|
||||||
|
padding: 28rpx 0;
|
||||||
|
flex: 1;
|
||||||
|
height: 208rpx;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
.main_menu_name {
|
||||||
|
font-family: PingFang SC, PingFang SC;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #0E1A24;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
image {
|
||||||
|
display: flex;
|
||||||
|
width: 88rpx;
|
||||||
|
height: 88rpx;
|
||||||
|
border-radius: 34rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.yiz_menu {
|
||||||
|
width: calc(100% - 48rpx);
|
||||||
|
min-height: 480rpx;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
margin-top: 24rpx;
|
||||||
|
margin-left: 24rpx;
|
||||||
|
}
|
||||||
|
.yiz_menu_tle {
|
||||||
|
font-family: PingFang SC, PingFang SC;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #0E1A24;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
padding: 28rpx 28rpx 0 28rpx;
|
||||||
|
}
|
||||||
|
.yiz_menu_nav {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.yiz_menu_nav_item {
|
||||||
|
width: calc(100% / 4);
|
||||||
|
margin-top: 48rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
image {
|
||||||
|
display: block;
|
||||||
|
width: 88rpx;
|
||||||
|
height: 88rpx;
|
||||||
|
border-radius: 34rpx;
|
||||||
|
}
|
||||||
|
.yiz_menu_name {
|
||||||
|
font-family: PingFang SC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #0E1A24;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,26 +1,30 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="top-cont">
|
<div class="top-wrapper">
|
||||||
<div class="top-title">订单</div>
|
<div class="top-cont">
|
||||||
<u-input
|
<div class="top-title">订单</div>
|
||||||
v-model="searchValue"
|
<u-input
|
||||||
class="top-ipt"
|
v-model="searchValue"
|
||||||
placeholder="请输入食堂、档口、菜品/商品名"
|
class="top-ipt"
|
||||||
shape="circle"
|
placeholder="请输入食堂、档口、菜品/商品名"
|
||||||
suffixIcon="../../static/images/search.png"
|
shape="circle"
|
||||||
suffixIconStyle="color: #909399"
|
suffixIcon="search"
|
||||||
placeholderStyle="font-weight: 400;font-size: 10px;color: rgba(15,39,75,0.4);"
|
suffixIconStyle="color: #909399; font-size: 18px;"
|
||||||
@blur="handleSearch"
|
placeholderStyle="font-weight: 400;font-size: 10px;color: rgba(15,39,75,0.4);"
|
||||||
></u-input>
|
@blur="handleSearch"
|
||||||
<div class="top-filter">
|
></u-input>
|
||||||
<span style="font-size: 12px; color: #0f274b">筛选</span>
|
<div class="top-filter">
|
||||||
<u-icon name="../../static/images/pull.png" />
|
<span style="font-size: 12px; color: #0f274b">筛选</span>
|
||||||
|
<u-icon name="../../static/images/pull.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="padding: 0 16px;">
|
||||||
|
<Tabs :tabList="tabList" @changeTab="changeTab" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Tabs :tabList="tabList" @changeTab="changeTab" />
|
<div style="margin-top: 91px; padding: 0 16px;">
|
||||||
|
|
||||||
<div>
|
|
||||||
<div class="order-list" v-for="(item, index) in tableList" :key="index">
|
<div class="order-list" v-for="(item, index) in tableList" :key="index">
|
||||||
<div class="flex justify-between">
|
<div class="flex justify-between">
|
||||||
<div class="order-source">订单来源：{{ item.sourceType }}</div>
|
<div class="order-source">订单来源：{{ item.sourceType }}</div>
|
||||||
|
|
@ -58,7 +62,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="margin: 20px 0" v-if="tableList.length > 0">
|
<div style="margin: 20px 0" v-if="tableList.length > 0">
|
||||||
<u-loadmore :status="status" />
|
<u-loadmore :status="status" nomoreText="没有更多数据了" />
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="flex justify-center align-center" style="height: 50vh">
|
<div v-else class="flex justify-center align-center" style="height: 50vh">
|
||||||
<u-empty icon="../../static/images/not_order.png" text="暂无相关订单" textColor="#000" />
|
<u-empty icon="../../static/images/not_order.png" text="暂无相关订单" textColor="#000" />
|
||||||
|
|
@ -197,11 +201,21 @@ export default {
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.content {
|
.content {
|
||||||
padding: 16px;
|
/* padding: 0 16px; */
|
||||||
background: #f9fbff;
|
background: #f9fbff;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
/* position: relative; */
|
||||||
|
|
||||||
|
.top-wrapper {
|
||||||
|
position: fixed;
|
||||||
|
top: 44px;
|
||||||
|
width: 100vw;
|
||||||
|
background: #f9fbff;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
.top-cont {
|
.top-cont {
|
||||||
|
padding: 0 16px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 399 B |
Loading…
Reference in New Issue