siyunxing/new-dianxiaorui-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
PC-202306242200\Administrator
2026-03-31 10:53:43 +08:00
commit f529129c93
770 changed files with 86065 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

246
pageInvest/shop/affirm.vue Normal file
View File

@@ -0,0 +1,246 @@
<template>
<view class="p30">
<view style="height: 20rpx"></view>
<view style="background-color: #ffffff; padding: 20rpx; border-radius: 10rpx; font-size: 30rpx; display: flex">
<image style="width: 220rpx; height: 220rpx; border-radius: 16rpx" :src="shop.cover" mode="aspectFill"></image>
<view style="padding: 20rpx">
<view style="color: #232323">{{ shop.name }}</view>
<view style="height: 20rpx"></view>
<view>
<text>单价：</text>
<text style="color: crimson">{{ shop.currentPrice }}元</text>
</view>
<view style="height: 20rpx"></view>
<view>
<text>总价：</text>
<text style="color: crimson">{{ shop.currentPrice * dataFrom.num }}元</text>
</view>
</view>
</view>
<view style="height: 20rpx"></view>
<view style="background-color: #ffffff; padding: 20rpx; border-radius: 10rpx; font-size: 30rpx; display: flex; align-items: center; justify-content: space-between">
<view class="u-flex">
<view>购买数量</view>
<view style="width: 10rpx"></view>
</view>
<view><up-number-box v-model="dataFrom.num" inputWidth="100rpx" @change="changenum"></up-number-box></view>
</view>
<!-- <view
@click="toAddress"
v-if="shop.purposeType != 1"
style="
background-color: #ffffff;
padding: 20rpx;
border-radius: 10rpx;
font-size: 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 30rpx;
"
>
<view class="u-flex" v-if="!addData">
<view>请先选择收货地址</view>
</view>
<view class="address-a" v-else @click="toAddress">
<view class="top">
<view class="top-a">
<view>{{ addData.realName }}</view>
<view>{{ addData.phone }}</view>
</view>
<view class="top-b">{{ addData.province }} {{ addData.city }} {{ addData.district }} {{ addData.detail }}</view>
</view>
</view>
</view> -->
<!-- <view
style="background-color: #ffffff; padding: 20rpx; border-radius: 10rpx; font-size: 30rpx; margin-top: 30rpx"
v-if="shop.purposeType == 2 || (shop.purposeType == 3 && shop.salePrice == 2980)"
>
<view style="font-weight: 700">温馨提示：{{ shop.purposeType == 2 ? `满${shop.itemType == 7 ? '20' : shop.itemType == 20 ? '5' : ''}台包安装` : '' }}</view>
<view style="height: 20rpx"></view>
<view>套包安装内容仅限50米，实际电缆小于50米的以实际安装必要长度为准，差值米数不以任何形式赠送或返还;超出50米的，超出部分按100元/米补足超出的费用。</view>
</view> -->
<view style="background-color: #ffffff; padding: 20rpx; border-radius: 10rpx; font-size: 30rpx; margin-top: 30rpx">
<view style="font-weight: 700">购买须知：</view>
<view style="height: 20rpx"></view>
<view style="color: #dd6161">付款成功后立即生效，并投入生产安装，不支持退款、退货。</view>
<view style="height: 20rpx"></view>
<view style="display: flex; align-items: center; justify-content: space-between">
<view style="display: flex">
<view>阅读并同意:</view>
<navigator url="/pages/protocol/buy?id=14" style="color: dodgerblue" open-type="navigate">
<text>《充电桩购销合同》</text>
</navigator>
</view>
<view>
<up-text v-if="policy.is_buy == 1" text="已同意" type="primary"></up-text>
<up-text v-else text="未同意" type="error"></up-text>
</view>
</view>
<view style="height: 20rpx"></view>
<view style="display: flex; align-items: center; justify-content: space-between">
<view style="display: flex">
<view>阅读并同意:</view>
<navigator url="/pages/protocol/trusteeship?id=13" style="color: dodgerblue" open-type="navigate">
<text>《充电桩托管协议》</text>
</navigator>
</view>
<view>
<up-text v-if="policy.is_trusteeship == 1" text="已同意" type="primary"></up-text>
<up-text v-else text="未同意" type="error"></up-text>
</view>
</view>
</view>
<view style="display: flex; justify-content: center; margin-top: 80rpx">
<view class="affirm_btn" @click="add">确认订单</view>
</view>
</view>
</template>
<script setup>
import { ref, computed } from 'vue';
import { addGoodsOrders } from '@/api/api.js';
import { shopInfo } from '@/api/api.js';
import { onLoad } from '@dcloudio/uni-app';
let dataFrom = ref({
num: 1
});
let shop = ref({});
let policy = ref({
is_trusteeship: 0,
is_buy: 0
});
let address = ref({});
let addData = ref(null);
let typeTrue = computed(() => {
var a = false;
if (
(shop.value.purposeType == 2 && dataFrom.value.num == 20 && shop.value.itemType == 7) ||
(shop.value.purposeType == 2 && dataFrom.value.num == 5 && shop.value.itemType == 20)
) {
a = true;
}
return a;
});
onLoad(async (options) => {
let _res = await shopInfo({
goodId: options.id
});
shop.value = _res;
uni.$on('buy', (e) => {
policy.value.is_buy = e;
});
uni.$on('trusteeship', (e) => {
policy.value.is_trusteeship = e;
});
uni.$on('address', (e) => {
addData.value = e;
address.value = {
takeName: e.realName,
takePhone: e.phone,
takeAddress: `${e.province}${e.city}${e.district}${e.detail}`
};
});
});
let changenum = (e) => {
console.log(e);
};
let toAddress = () => {
uni.navigateTo({
url: '/pages/address/list?type=1'
});
};
let add = async () => {
// if (!address.value.takeName && shop.value.purposeType != 1) return uni.showToast({ title: '请先选择收货地址', icon: 'none' });
if (!policy.value.is_buy) return uni.showToast({ title: '请阅读并同意《充电桩购销合同》', icon: 'none' });
if (!policy.value.is_trusteeship) return uni.showToast({ title: '请阅读并同意《充电桩托管协议》', icon: 'none' });
let _res = await addGoodsOrders({
num: dataFrom.value.num,
goodsId: shop.value.id
// ...address.value
});
uni.redirectTo({
url: `/pageInvest/shop/pay?id=${_res.id}&amount=${_res.payMoney}&type=1&num=${_res.num}&goodsId=${shop.value.id}`
});
};
</script>
<style scoped lang="scss">
.affirm_btn {
width: 650rpx;
height: 78rpx;
background: #4874e5;
border-radius: 12rpx;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 24rpx;
color: #ffffff;
}
.address-a {
.top {
padding: 40rpx;
.top-a {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 30rpx;
font-weight: bold;
color: #222222;
margin-bottom: 45rpx;
}
.top-b {
font-size: 30rpx;
font-weight: bold;
color: #999999;
}
}
.bottom {
padding: 35rpx;
display: flex;
align-items: center;
justify-content: space-between;
.bottom-che {
display: flex;
align-items: center;
image {
width: 32rpx;
height: 32rpx;
margin-right: 10rpx;
}
font-size: 24rpx;
font-weight: bold;
color: #222222;
}
.bottom-r {
font-size: 26rpx;
font-weight: bold;
color: #999999;
display: flex;
align-items: center;
}
}
}
</style>

139
pageInvest/shop/details.vue Normal file
View File

@@ -0,0 +1,139 @@
<template>
<view class="shop">
<!-- <view class="orderdetail_header p30">
<view :style="{ height: statusBarHeight }"></view>
<view style="height: 44px; display: flex; align-items: center" @click="">
<up-icon name="arrow-left" bold color="#000" @click="back"></up-icon>
<view @click="back" style="margin-left: 25rpx; transition: all 0.5s">商品详情</view>
</view>
</view> -->
<up-swiper :list="[shop.cover]" height="759rpx"></up-swiper>
<view class="p30">
<view class="shop_info">
<view class="shop_info_mon">￥ {{ shop.currentPrice }}</view>
<view class="shop_info_tit">{{ shop.name }}</view>
<view class="shop_info_note">
库存：{{ shop.stock }}
<view style="width: 50rpx"></view>
销量：{{ shop.sales }}
</view>
</view>
</view>
<view style="margin: 30rpx 0; font-size: 30rpx; color: #333; text-align: center">详情介绍</view>
<image style="width: 100%" mode="widthFix" :src="item" v-for="(item, index) in shop.detail.split(',')" :key="index"></image>
<view style="height: 150rpx"></view>
<view class="shop_btn">
<!-- <view>
<view>首页</view>
</view>
<view>
<view>客服</view>
</view> -->
<view class="shop_btn_btn" @click="navTo(`/pageInvest/shop/affirm?id=${shop.id}`)">立即下单</view>
</view>
</view>
</template>
<script setup>
import { ref, reactive, computed } from 'vue';
import { useNav } from '@/hooks/useNav.js';
import { shopInfo } from '@/api/api.js';
let shop = ref({});
const { nav, navTo } = useNav();
const headerBg = ref(false);
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
const list3 = ref(['/static/图层 979.png']);
onLoad(async (options) => {
console.log(options);
let _res = await shopInfo({
goodId: options.id
});
shop.value = _res;
});
const back = () => {
uni.navigateBack();
};
onPageScroll((e) => {
if (e.scrollTop > uni.getSystemInfoSync().statusBarHeight + 44) {
headerBg.value = true;
} else {
headerBg.value = false;
}
});
</script>
<style>
page {
background: #f7f7f7;
}
</style>
<style scoped lang="scss">
.orderdetail_header {
width: 750rpx;
transition: all 0.5s;
}
.shop_btn {
position: fixed;
bottom: 0;
left: 0;
padding: 20rpx 60rpx 30rpx;
width: 750rpx;
height: 120rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
image {
width: 40rpx;
height: 40rpx;
margin-right: 30rpx;
}
&_btn {
width: 496rpx;
// height: 64rpx;
padding: 15rpx;
border-radius: 8rpx 8rpx 8rpx 8rpx;
border: 2rpx solid #002ea4;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 28rpx;
color: #002ea4;
}
}
.shop_info {
padding: 30rpx;
background-color: #fff;
border-radius: 8rpx;
margin-top: 30rpx;
&_mon {
font-weight: bold;
font-size: 44rpx;
color: #ff1a1a;
}
&_tit {
font-weight: bold;
font-size: 34rpx;
color: #232323;
margin-bottom: 15rpx;
}
&_note {
display: flex;
align-items: center;
font-weight: 400;
font-size: 30rpx;
color: #666666;
}
}
</style>

214
pageInvest/shop/order.vue Normal file
View File

@@ -0,0 +1,214 @@
<template>
<view class="order">
<z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
<up-dropdown>
<!-- <up-dropdown-item @change="upChange" v-model="dataFrom.sourceType" title="商品类型" :options="options1"></up-dropdown-item> -->
<up-dropdown-item @change="upChange" v-model="dataFrom.businessPayType" title="支付类型" :options="options2"></up-dropdown-item>
<up-dropdown-item @change="upChange" v-model="dataFrom.status" title="状态" :options="options3"></up-dropdown-item>
</up-dropdown>
<view class="p30">
<view class="order_view" v-for="i in dataList" :key="i" @click="navTo(`/pages/order/details?id=${i.id}`)">
<view class="order_view_dd">
<view>
<text style="font-weight: 500">订单号</text>
:{{ i.orderNo }}
</view>
<view>
<up-tag size="mini" v-if="i.status == 0" text="待支付" plain></up-tag>
<up-tag size="mini" v-if="i.status == -1" text="已取消" type="warning" plain></up-tag>
<up-tag size="mini" v-if="i.status == 1" text="支付成功" type="success" plain></up-tag>
<up-tag size="mini" v-if="i.status == -2" text="退款" type="error" plain></up-tag>
</view>
</view>
<view class="order_view_info">
<image class="order_view_info_img" :src="JSON.parse(i.picture)[0]" mode="aspectFit"></image>
<view class="order_view_info_right">
<view class="order_view_info_right_tit">
<view style="display: flex; align-items: center">
<up-tag size="mini" :text="i.sourceType == 1 ? '商品' : '套餐'" bgColor="#4874e5" borderColor="#4874e5"></up-tag>
<view style="margin-left: 15rpx">
{{ i.goodName }}
</view>
</view>
</view>
<view class="order_view_info_right_num" style="display: flex; align-items: center; justify-content: space-between">数量:{{ i.num }}</view>
<view class="order_view_info_right_mon">
订单金额:
<text style="color: crimson">￥{{ i.amount }}</text>
</view>
</view>
</view>
<view
style="
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1rpx solid rgba(153, 153, 153, 0.5);
margin-top: 15rpx;
padding-top: 15rpx;
"
>
<view style="font-size: 28rpx">{{ timeFormat(new Date(i.createTime).getTime(), 'yyyy-mm-dd hh:MM') }}</view>
<view>
<up-tag size="mini" v-if="i.orderPlatform == 3" text="支付宝" plain></up-tag>
<up-tag size="mini" v-if="i.orderPlatform == 2" text="微信" type="success" plain></up-tag>
<up-tag size="mini" v-if="i.orderPlatform == 1" text="钱包" type="warning" plain></up-tag>
</view>
</view>
</view>
</view>
</z-paging>
</view>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { useNav } from '@/hooks/useNav.js';
import { onPullDownRefresh, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import { orderPage } from '@/api/api.js';
import { timeFormat } from '@/uni_modules/uview-plus';
const { navTo } = useNav();
const paging = ref(null);
let dataList = ref([]);
let dataFrom = reactive({
status: '',
businessPayType: '',
sourceType: ''
});
let options1 = ref([
{
label: '商品',
value: 1
},
{
label: '套餐',
value: 2
}
]);
let options2 = ref([
{
label: '微信',
value: 1
},
{
label: '支付宝',
value: 2
},
{
label: '钱包',
value: 3
}
]);
let options3 = ref([
{
label: '待支付',
value: 0
},
{
label: '支付成功',
value: 1
},
{
label: '取消',
value: -1
},
{
label: '退款',
value: -2
}
]);
let isPagingRefNotFound = () => {
return !paging.value;
};
onPullDownRefresh(() => {
if (isPagingRefNotFound()) return;
paging.value.reload().catch(() => {});
});
onPageScroll((e) => {
if (isPagingRefNotFound()) return;
paging.value.updatePageScrollTop(e.scrollTop);
e.scrollTop < 10 && paging.value.doChatRecordLoadMore();
});
onReachBottom(() => {
if (isPagingRefNotFound()) return;
paging.value.pageReachBottom();
});
const upChange = (e) => {
console.log(dataFrom);
paging.value.reload();
};
const queryList = (pageNo, pageSize) => {
let { id } = uni.getStorageSync('user');
const params = {
current: pageNo,
pageSize: pageSize,
...dataFrom
};
orderPage(params)
.then((res) => {
paging.value.complete(res.records);
})
.catch((res) => {
paging.value.complete(false);
});
};
</script>
<style scoped lang="scss">
.order {
&_view {
background: #ffffff;
border-radius: 16rpx;
padding: 25rpx;
margin-bottom: 30rpx;
&_info {
@include flex;
&_img {
width: 208rpx;
height: 208rpx;
margin-right: 15rpx;
border-radius: 10rpx;
}
&_right {
flex: 1;
font-size: 28rpx;
color: #232323;
&_tit {
@include flex($space: space-between);
margin-bottom: 15rpx;
}
&_num {
margin-bottom: 15rpx;
}
&_mon {
margin-bottom: 15rpx;
text {
color: #ff2e24;
}
}
&_time {
}
}
}
&_dd {
@include flex($space: space-between);
font-weight: bold;
font-size: 28rpx;
color: #232323;
margin-bottom: 15rpx;
}
}
}
</style>

184
pageInvest/shop/pay.vue Normal file
View File

@@ -0,0 +1,184 @@
<template>
<view>
<view style="height: 20rpx"></view>
<view style="background-color: #ffffff; border-radius: 10rpx; padding: 30rpx; text-align: center">
<view style="color: #fa3534">
<text style="font-size: 30rpx">￥</text>
<text style="font-size: 36rpx; font-weight: 700">{{ amount }}</text>
</view>
<view style="color: #909399; font-size: 28rpx">支付金额</view>
</view>
<view style="height: 20rpx"></view>
<view style="background-color: #fff; padding: 30rpx; border-radius: 10rpx">
<view style="font-size: 28rpx;#606266">支付方式</view>
<view style="height: 20rpx"></view>
<up-radio-group v-model="dataFrom.pay_type" iconPlacement="right" :borderBottom="true" placement="column">
<up-radio :name="3" label="123456">
<view style="display: flex; align-items: center">
<up-icon name="/static/icon/money.png" imgMode="widthFix" size="50rpx" />
<view style="width: 20rpx"></view>
<view>
<view style="font-size: 30rpx">余额支付</view>
<view style="font-size: 28rpx; color: #909399">当前余额：￥{{ user.money2 || 0 }}</view>
</view>
</view>
</up-radio>
<up-radio :name="1">
<view style="display: flex; align-items: center">
<up-icon name="/static/icon/weixin.png" imgMode="widthFix" size="50rpx" />
<view style="width: 20rpx"></view>
<view>
<view style="font-size: 30rpx; display: flex; align-items: center">
微信支付
<!-- <view style="padding: 4rpx 15rpx; margin-left: 10rpx; border-radius: 25rpx; background-color: #e03737; font-size: 24rpx; color: #fff">
随机立减0.01-20元
</view> -->
</view>
<view style="font-size: 28rpx; color: #909399">微信快捷支付</view>
</view>
</view>
</up-radio>
</up-radio-group>
</view>
<view style="height: 100rpx"></view>
<view style="display: flex; justify-content: center; margin-top: 80rpx">
<view class="affirm_btn" @click="payOrder">确认支付</view>
</view>
</view>
</template>
<script setup>
import { payAllinPay, handleSubmit, payMoney } from '@/api/api.js';
import { ref, reactive } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { userHook } from '@/hooks/userInfo.js';
const { user } = userHook();
let orderId = ref('');
let amount = ref(0);
let money = ref(0);
let goodsId = ref(null);
let num = ref(0);
let type = ref(1);
onLoad(async (options) => {
orderId.value = options.id;
amount.value = options.amount;
type.value = options.type;
num.value = options.num;
goodsId.value = options.goodsId;
// let { points2 } = await userInfo({ id });
// money.value = points2;
});
onShow(async () => {
let options = uni.getEnterOptionsSync();
const shop_order_pay_show = uni.getStorageSync('shop_order_pay_show');
let appId = 'wxef277996acc166c3';
if (options.scene == '1038' && options.referrerInfo.appId == appId && shop_order_pay_show == 1) {
uni.setStorageSync('shop_order_pay_show', 0);
// 代表从收银台小程序返回
let extraData = options.referrerInfo.extraData;
if (!extraData) {
// "当前通过物理按键返回，未接收到返参，建议自行查询交易结果";
uni.showModal({
title:'提示',
content:'未检测到支付结果, 您可以查看订单',
confirmText:'查看订单',
success: (res) => {
if(res.confirm){
uni.reLaunch({
url:'/pages/home/home?tabBarShow=1'
})
}
}
})
} else {
if (extraData.code == 'success') {
// "支付成功";
uni.showToast({
title: '支付成功',
icon: 'none'
});
uni.reLaunch({
url:'/pages/home/home?tabBarShow=1'
})
} else if (extraData.code == 'cancel') {
// "支付已取消";
uni.showToast({
title: '支付已取消',
icon: 'none'
});
} else {
// "支付失败：" + extraData.errmsg;
uni.showToast({
title: '支付失败：' + extraData.errmsg,
icon: 'none'
});
}
}
}
});
let dataFrom = reactive({
pay_type: 3
});
let payOrder = async () => {
// let { username } = uni.getStorageSync('user');
// handleSubmit({
// num: num.value,
// goodsId: goodsId.value,
// userName: username
// }).then((res) => {
// uni.reLaunch({
// url: `/pages/home/home?tabBarShow=1`
// });
// });
// return;
let _res;
if (dataFrom.pay_type == 1 || dataFrom.pay_type == 2) {
payAllinPay({ orderId: orderId.value }).then((res) => {
uni.openEmbeddedMiniProgram({
appId: res.appid,
extraData: res.extraData,
success(res) {
// 打开成功
uni.setStorageSync('shop_order_pay_show', 1);
}
});
});
}
if (dataFrom.pay_type == 3) {
// _res = type.value == 1 ? await walletPaymentGoods({ id: orderId.value }) : await walletPaymentPackages({ id: orderId.value });
// uni.redirectTo({
// url: `/pages/order/success?id=${orderId.value}&amount=${_res.amount}&orderNo=${_res.orderNo ? _res.orderNo : ''}&createTime=${_res.createTime ? _res.createTime : ''}`
// });
payMoney({ orderId: orderId.value }).then((res) => {
uni.reLaunch({
url:'/pages/home/home?tabBarShow=1'
})
})
}
return;
// let _res = type.value == 1 ? await walletPaymentGoods({ id: orderId.value }) : await walletPaymentPackages({ id: orderId.value });
};
</script>
<style lang="scss">
.affirm_btn {
width: 650rpx;
height: 78rpx;
background: #4874e5;
border-radius: 12rpx;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 30rpx;
color: #ffffff;
}
</style>

234
pageInvest/shop/shop.vue Normal file
View File

@@ -0,0 +1,234 @@
<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">
<view
v-for="(item, index) in tabbar"
:key="index"
class="u-tab-item"
:class="[current == index ? 'u-tab-item-active' : '']"
:data-current="index"
@tap.stop="swichMenu(index)"
>
<text class="u-line-1">{{ item.name }}</text>
</view>
</scroll-view>
<block v-for="(item, index) in tabbar" :key="index">
<scroll-view scroll-y class="right-box" v-if="current == index">
<view class="page-view">
<view class="class-item">
<view class="item-title">
<text>{{ item.name }}</text>
</view>
<view class="item-container">
<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1">
<image class="item-menu-image" :src="item1.cover" mode=""></image>
<view class="item-menu-name">{{ item1.name }}</view>
</view>
</view>
</view>
</view>
</scroll-view>
</block>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { goodsList, categoryList } from '@/api/api.js';
let tabbar = ref([]);
let scrollTop = ref(0);
let current = ref(0);
let menuHeight = ref(0);
let menuItemHeight = ref(0);
// [
// {
// name: '女装',
// foods: [
// {
// name: 'A字裙',
// key: 'A字裙',
// icon: 'https://cdn.uviewui.com/uview/common/classify/1/1.jpg',
// cat: 10
// }
// ]
// }
// ]
onLoad(() => {
categoryList().then((res) => {
tabbar.value = res.map((item, index) => {
return {
...item,
foods: []
};
});
goodsList({ categoryId: res[0].id }).then((res) => {
tabbar.value[0].foods = res;
});
});
});
async function swichMenu(index) {
if (index == current.value) return;
current.value = index;
goodsList({ categoryId: tabbar.value[index].id }).then((res) => {
tabbar.value[index].foods = res;
});
// 如果为0，意味着尚未初始化
if (menuHeight.value == 0 || menuItemHeight.value == 0) {
await this.getElRect('menu-scroll-view', 'menuHeight');
await this.getElRect('u-tab-item', 'menuItemHeight');
}
// 将菜单菜单活动item垂直居中
this.scrollTop = index * menuItemHeight.value + menuItemHeight.value / 2 - menuHeight.value / 2;
}
function 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;
})
.exec();
});
}
</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: 80rpx;
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: #000;
font-size: 30rpx;
font-weight: 600;
background: #fff;
}
.u-tab-item-active::before {
content: '';
position: absolute;
border-left: 4px solid rgba(111, 162, 86, 1);
height: 45rpx;
left: 0;
top: calc(50% - 22.5rpx);
}
.u-tab-view {
height: 100%;
}
.right-box {
background-color: rgb(250, 250, 250);
}
.page-view {
padding: 16rpx;
}
.class-item {
margin-bottom: 30rpx;
background-color: #fff;
padding: 16rpx;
border-radius: 8rpx;
}
.item-title {
font-size: 26rpx;
color: $u-main-color;
font-weight: bold;
}
.item-menu-name {
font-weight: normal;
font-size: 24rpx;
color: $u-main-color;
}
.item-container {
display: flex;
flex-wrap: wrap;
}
.thumb-box {
width: 33.333333%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 20rpx;
}
.item-menu-image {
width: 120rpx;
height: 120rpx;
}
</style>