|
|
@@ -1,39 +1,73 @@
|
|
|
<template>
|
|
|
<view class="u-wrap">
|
|
|
-
|
|
|
<view class="top-box">
|
|
|
<view class="switch-box">
|
|
|
- <u-tabs :list="list1" lineWidth="30" lineColor="$uni-bg-color-primary" @click='handlerChangeTab' :activeStyle="{
|
|
|
+ <u-tabs
|
|
|
+ :list="list1"
|
|
|
+ lineWidth="30"
|
|
|
+ lineColor="$uni-bg-color-primary"
|
|
|
+ @click="handlerChangeTab"
|
|
|
+ :activeStyle="{
|
|
|
color: '#000',
|
|
|
fontSize: '28rpx',
|
|
|
transform: 'scale(1.05)',
|
|
|
marginBottom: '15rpx',
|
|
|
- }" :inactiveStyle="{
|
|
|
+ }"
|
|
|
+ :inactiveStyle="{
|
|
|
color: '#333',
|
|
|
fontSize: '30rpx',
|
|
|
transform: 'scale(1)',
|
|
|
marginBottom: '15rpx',
|
|
|
- }" itemStyle="width:50%;padding:0;margin:5px 0;"></u-tabs>
|
|
|
+ }"
|
|
|
+ itemStyle="width:50%;padding:0;margin:5px 0;"
|
|
|
+ ></u-tabs>
|
|
|
</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.name}}</text>
|
|
|
+ <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.name }}</text>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
- <scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll">
|
|
|
+ <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="class-item"
|
|
|
+ :id="'item' + index"
|
|
|
+ v-for="(item, index) in tabbar"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
<view class="item-title">
|
|
|
- <text>{{item.name}}</text>
|
|
|
+ <text>{{ item.name }}</text>
|
|
|
</view>
|
|
|
- <view class="item-box" >
|
|
|
- <view class="item" v-for="(itm,idx) of item.foods" :key="idx" :class="itm.type ? 'act-type' : ''" @click="handlerSelectItem(itm,idx)">
|
|
|
+ <view class="item-box">
|
|
|
+ <view
|
|
|
+ class="item"
|
|
|
+ v-for="(itm, idx) of item.foods"
|
|
|
+ :key="idx"
|
|
|
+ :class="itm.type ? 'act-type' : ''"
|
|
|
+ @click="handlerSelectItem(itm, idx)"
|
|
|
+ >
|
|
|
{{ itm.name }}
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -41,126 +75,141 @@
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
+
|
|
|
<button class="btn" @click="handlerSkipNext">下一步</button>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- scrollTop: 0, //tab标题的滚动条位置
|
|
|
- oldScrollTop: 0, // tab标题的滚动条旧位置
|
|
|
- current: 0, // 预设当前项的值
|
|
|
- menuHeight: 0, // 左边菜单的高度
|
|
|
- menuItemHeight: 0, // 左边菜单item的高度
|
|
|
- itemId: '', // 栏目右边scroll-view用于滚动的id
|
|
|
- arr: [], // 储存距离顶部高度的数组
|
|
|
- scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
|
|
|
- timer: null, // 定时器
|
|
|
- tabbar: [{
|
|
|
- "name": "蔬菜水果",
|
|
|
- "foods": [{
|
|
|
- "cat": 383,
|
|
|
- "name": "蔬菜",
|
|
|
- "icon": "http://nq348.com/uploads/category/20220315/1aeed6fa43b54cd68cce0c4883160f91.png",
|
|
|
- "key": "蔬菜",
|
|
|
- "type":false
|
|
|
- },
|
|
|
- {
|
|
|
- "cat": 384,
|
|
|
- "name": "食用菌",
|
|
|
- "icon": "http://nq348.com/uploads/category/20220418/09839c618b35b510d50151f9a17793ee.png",
|
|
|
- "key": "食用菌",
|
|
|
- "type":false
|
|
|
- },
|
|
|
- {
|
|
|
- "cat": 385,
|
|
|
- "name": "水果",
|
|
|
- "icon": "http://nq348.com/uploads/category/20220418/5294ad2fc7effc9629cbfdb8baf41773.png",
|
|
|
- "key": "水果",
|
|
|
- "type":false
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- "name": "其他",
|
|
|
- "foods": [{
|
|
|
- "cat": 434,
|
|
|
- "name": "包装",
|
|
|
- "icon": "http://nq348.com/uploads/category/20220418/ebdfd326333344825adbe81dbd89e2c9.png",
|
|
|
- "key": "包装",
|
|
|
- "type":false
|
|
|
- },
|
|
|
- {
|
|
|
- "cat": 435,
|
|
|
- "name": "安全溯源",
|
|
|
- "icon": "http://nq348.com/uploads/category/20220418/03230c63f066f46005abf5f576df0ed1.png",
|
|
|
- "key": "安全溯源",
|
|
|
- "type":false
|
|
|
- },
|
|
|
- {
|
|
|
- "cat": 436,
|
|
|
- "name": "农用百货",
|
|
|
- "icon": "http://nq348.com/uploads/category/20220418/93393f2df3264faba86bb449a0c10a79.png",
|
|
|
- "key": "农用百货",
|
|
|
- "type":false
|
|
|
- },
|
|
|
- {
|
|
|
- "cat": 437,
|
|
|
- "name": "仓储物流",
|
|
|
- "icon": "http://nq348.com/uploads/category/20220418/f553505ebabbcb1bf762b288716cf1e7.png",
|
|
|
- "key": "仓储物流",
|
|
|
- "type":false
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- ],
|
|
|
- list1: [{
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ scrollTop: 0, //tab标题的滚动条位置
|
|
|
+ oldScrollTop: 0, // tab标题的滚动条旧位置
|
|
|
+ current: 0, // 预设当前项的值
|
|
|
+ menuHeight: 0, // 左边菜单的高度
|
|
|
+ menuItemHeight: 0, // 左边菜单item的高度
|
|
|
+ itemId: '', // 栏目右边scroll-view用于滚动的id
|
|
|
+ arr: [], // 储存距离顶部高度的数组
|
|
|
+ scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
|
|
|
+ timer: null, // 定时器
|
|
|
+ tabbar: [
|
|
|
+ {
|
|
|
+ name: '蔬菜水果',
|
|
|
+ foods: [
|
|
|
+ {
|
|
|
+ cat: 383,
|
|
|
+ name: '蔬菜',
|
|
|
+ icon: 'http://nq348.com/uploads/category/20220315/1aeed6fa43b54cd68cce0c4883160f91.png',
|
|
|
+ key: '蔬菜',
|
|
|
+ type: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ cat: 384,
|
|
|
+ name: '食用菌',
|
|
|
+ icon: 'http://nq348.com/uploads/category/20220418/09839c618b35b510d50151f9a17793ee.png',
|
|
|
+ key: '食用菌',
|
|
|
+ type: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ cat: 385,
|
|
|
+ name: '水果',
|
|
|
+ icon: 'http://nq348.com/uploads/category/20220418/5294ad2fc7effc9629cbfdb8baf41773.png',
|
|
|
+ key: '水果',
|
|
|
+ type: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '其他',
|
|
|
+ foods: [
|
|
|
+ {
|
|
|
+ cat: 434,
|
|
|
+ name: '包装',
|
|
|
+ icon: 'http://nq348.com/uploads/category/20220418/ebdfd326333344825adbe81dbd89e2c9.png',
|
|
|
+ key: '包装',
|
|
|
+ type: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ cat: 435,
|
|
|
+ name: '安全溯源',
|
|
|
+ icon: 'http://nq348.com/uploads/category/20220418/03230c63f066f46005abf5f576df0ed1.png',
|
|
|
+ key: '安全溯源',
|
|
|
+ type: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ cat: 436,
|
|
|
+ name: '农用百货',
|
|
|
+ icon: 'http://nq348.com/uploads/category/20220418/93393f2df3264faba86bb449a0c10a79.png',
|
|
|
+ key: '农用百货',
|
|
|
+ type: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ cat: 437,
|
|
|
+ name: '仓储物流',
|
|
|
+ icon: 'http://nq348.com/uploads/category/20220418/f553505ebabbcb1bf762b288716cf1e7.png',
|
|
|
+ key: '仓储物流',
|
|
|
+ type: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ list1: [
|
|
|
+ {
|
|
|
name: '主营服务',
|
|
|
- }, {
|
|
|
+ },
|
|
|
+ {
|
|
|
name: '辅盈服务(选填)',
|
|
|
- }],
|
|
|
- }
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取一个目标元素的高度
|
|
|
+ * @elClass 元素的类名
|
|
|
+ * @dataVal 储存高度的对象
|
|
|
+ */
|
|
|
+ onReady() {
|
|
|
+ this.getMenuItemTop();
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ delete_type(newValue) {
|
|
|
+ this.scrollRightTop = 0;
|
|
|
+ this.current = 0;
|
|
|
},
|
|
|
- /**
|
|
|
- * 获取一个目标元素的高度
|
|
|
- * @elClass 元素的类名
|
|
|
- * @dataVal 储存高度的对象
|
|
|
- */
|
|
|
- onReady() {
|
|
|
- this.getMenuItemTop()
|
|
|
- },
|
|
|
- watch: {
|
|
|
- delete_type(newValue) {
|
|
|
- this.scrollRightTop = 0
|
|
|
- this.current = 0
|
|
|
- }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ 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();
|
|
|
+ });
|
|
|
},
|
|
|
- methods: {
|
|
|
- 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();
|
|
|
- })
|
|
|
- },
|
|
|
|
|
|
- getMenuItemTop() {
|
|
|
- new Promise(resolve => {
|
|
|
- let selectorQuery = uni.createSelectorQuery();
|
|
|
- selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
|
|
|
+ getMenuItemTop() {
|
|
|
+ new Promise(resolve => {
|
|
|
+ let selectorQuery = uni.createSelectorQuery();
|
|
|
+ selectorQuery
|
|
|
+ .selectAll('.class-item')
|
|
|
+ .boundingClientRect(rects => {
|
|
|
// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
|
|
|
if (!rects.length) {
|
|
|
setTimeout(() => {
|
|
|
@@ -168,281 +217,282 @@
|
|
|
}, 10);
|
|
|
return;
|
|
|
}
|
|
|
- rects.forEach((rect) => {
|
|
|
+ rects.forEach(rect => {
|
|
|
// 视情况而定，这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
|
|
|
this.arr.push(rect.top - rects[0].top);
|
|
|
// this.arr.push(rect.top)
|
|
|
resolve();
|
|
|
- })
|
|
|
- }).exec()
|
|
|
- })
|
|
|
- },
|
|
|
- /**
|
|
|
- * 观测元素相交状态
|
|
|
- * 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
|
|
|
- * 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
|
|
|
- */
|
|
|
- async observer() {
|
|
|
- this.tabbar.map((val, index) => {
|
|
|
- let observer = uni.createIntersectionObserver(this);
|
|
|
- observer.relativeTo('.right-box', {
|
|
|
- top: 0
|
|
|
- }).observe('#item' + index, res => {
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .exec();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 观测元素相交状态
|
|
|
+ * 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
|
|
|
+ * 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
|
|
|
+ */
|
|
|
+ async observer() {
|
|
|
+ this.tabbar.map((val, index) => {
|
|
|
+ let observer = uni.createIntersectionObserver(this);
|
|
|
+ observer
|
|
|
+ .relativeTo('.right-box', {
|
|
|
+ top: 0,
|
|
|
+ })
|
|
|
+ .observe('#item' + index, res => {
|
|
|
if (res.intersectionRatio > 0) {
|
|
|
let id = res.id.substring(4);
|
|
|
this.leftMenuStatus(id);
|
|
|
}
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- /**
|
|
|
- * 设置左边菜单的滚动状态
|
|
|
- * @index 传入的 ID
|
|
|
- */
|
|
|
- async leftMenuStatus(index) {
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 设置左边菜单的滚动状态
|
|
|
+ * @index 传入的 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;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 点击左边的栏目切换
|
|
|
+ * @index 传入的 ID
|
|
|
+ */
|
|
|
+ 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;
|
|
|
- // 如果为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;
|
|
|
- },
|
|
|
- /**
|
|
|
- * 点击左边的栏目切换
|
|
|
- * @index 传入的 ID
|
|
|
- */
|
|
|
- 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);
|
|
|
- })
|
|
|
- },
|
|
|
- /**
|
|
|
- * 右边菜单滚动
|
|
|
- * 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
|
|
|
- */
|
|
|
- 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;
|
|
|
- // scrollHeight为右边菜单头部位置
|
|
|
- let scrollHeight = e.detail.scrollTop + 20;
|
|
|
- for (let i = 0; i < this.arr.length; i++) {
|
|
|
- let height1 = this.arr[i];
|
|
|
- let height2 = this.arr[i + 1];
|
|
|
- if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
|
|
|
- this.leftMenuStatus(i);
|
|
|
- return;
|
|
|
- }
|
|
|
+ this.leftMenuStatus(index);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 右边菜单滚动
|
|
|
+ * 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
|
|
|
+ */
|
|
|
+ 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;
|
|
|
+ // scrollHeight为右边菜单头部位置
|
|
|
+ let scrollHeight = e.detail.scrollTop + 20;
|
|
|
+ for (let i = 0; i < this.arr.length; i++) {
|
|
|
+ let height1 = this.arr[i];
|
|
|
+ let height2 = this.arr[i + 1];
|
|
|
+ if (!height2 || (scrollHeight >= height1 && scrollHeight < height2)) {
|
|
|
+ this.leftMenuStatus(i);
|
|
|
+ return;
|
|
|
}
|
|
|
- }, 10)
|
|
|
- },
|
|
|
-
|
|
|
- // 搜索按钮
|
|
|
- handlerSearchBtn() {
|
|
|
- console.log('search', this.search);
|
|
|
- },
|
|
|
- // 切换tab
|
|
|
- handlerChangeTab(e) {
|
|
|
- if (e.index == 1) {
|
|
|
- this.delete_type = true
|
|
|
- } else {
|
|
|
- this.delete_type = false
|
|
|
}
|
|
|
- },
|
|
|
- // 选择类型
|
|
|
- handlerSelectItem(itm,idx){
|
|
|
- console.log('itm',itm,idx);
|
|
|
- itm.type = !itm.type
|
|
|
- },
|
|
|
- // 跳转到下一步
|
|
|
- handlerSkipNext(){
|
|
|
- uni.navigateTo({
|
|
|
- url:'pages/merchant/tabBar/mine/openStore/storeInformation'
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
+ }, 10);
|
|
|
+ },
|
|
|
|
|
|
- }
|
|
|
+ // 搜索按钮
|
|
|
+ handlerSearchBtn() {
|
|
|
+ console.log('search', this.search);
|
|
|
+ },
|
|
|
+ // 切换tab
|
|
|
+ handlerChangeTab(e) {
|
|
|
+ if (e.index == 1) {
|
|
|
+ this.delete_type = true;
|
|
|
+ } else {
|
|
|
+ this.delete_type = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 选择类型
|
|
|
+ handlerSelectItem(itm, idx) {
|
|
|
+ console.log('itm', itm, idx);
|
|
|
+ itm.type = !itm.type;
|
|
|
+ },
|
|
|
+ // 跳转到下一步
|
|
|
+ handlerSkipNext() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: 'pages/merchant/tabBar/mine/openStore/storeInformation',
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .top-box {
|
|
|
- padding: 0 0 20rpx;
|
|
|
- width: 100%;
|
|
|
+.top-box {
|
|
|
+ padding: 0 0 20rpx;
|
|
|
+ width: 100%;
|
|
|
|
|
|
- .switch-box {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+ .switch-box {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
|
|
|
- .search-box {
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- width: 90%;
|
|
|
- margin: 20rpx auto 0;
|
|
|
+ .search-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ width: 90%;
|
|
|
+ margin: 20rpx auto 0;
|
|
|
|
|
|
- .btn {
|
|
|
- width: 160rpx;
|
|
|
- height: 70rpx;
|
|
|
- background-color: #5992BB;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
- line-height: 70rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- border-radius: 30rpx;
|
|
|
- margin-left: 20rpx;
|
|
|
- }
|
|
|
+ .btn {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ background-color: #5992bb;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 70rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .u-wrap {
|
|
|
- /* #ifdef H5 */
|
|
|
- height: calc(100vh - var(--window-top));
|
|
|
- /* #endif */
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- height: 100vh;
|
|
|
- background-color: #FAFAFA;
|
|
|
- }
|
|
|
+.u-wrap {
|
|
|
+ /* #ifdef H5 */
|
|
|
+ height: calc(100vh - var(--window-top));
|
|
|
+ /* #endif */
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: #fafafa;
|
|
|
+}
|
|
|
|
|
|
- .u-search-box {
|
|
|
- padding: 18rpx 30rpx;
|
|
|
- }
|
|
|
+.u-search-box {
|
|
|
+ padding: 18rpx 30rpx;
|
|
|
+}
|
|
|
|
|
|
- .u-menu-wrap {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
+.u-menu-wrap {
|
|
|
+ flex: 0.93;
|
|
|
+ display: flex;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
|
|
|
- .u-tab-view {
|
|
|
- width: 200rpx;
|
|
|
- background-color: #f6f6f6;
|
|
|
- }
|
|
|
+.u-tab-view {
|
|
|
+ width: 200rpx;
|
|
|
+ background-color: #f6f6f6;
|
|
|
+}
|
|
|
|
|
|
- .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;
|
|
|
- padding: 16rpx 0;
|
|
|
+.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;
|
|
|
+ padding: 16rpx 0;
|
|
|
+}
|
|
|
|
|
|
- }
|
|
|
+.u-tab-item-active {
|
|
|
+ position: relative;
|
|
|
+ color: #5f96be;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
|
|
|
- .u-tab-item-active {
|
|
|
- position: relative;
|
|
|
- color: #5F96BE;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: 500;
|
|
|
- background: #FFF;
|
|
|
- }
|
|
|
+.u-tab-item-active::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ border-left: 4px solid #5f96be;
|
|
|
+ height: 52rpx;
|
|
|
+ left: 0;
|
|
|
+ top: 29rpx;
|
|
|
+}
|
|
|
|
|
|
- .u-tab-item-active::before {
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- border-left: 4px solid #5F96BE;
|
|
|
- height: 52rpx;
|
|
|
- left: 0;
|
|
|
- top: 29rpx;
|
|
|
- }
|
|
|
+.u-tab-view {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
|
|
|
- .u-tab-view {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+.right-box {
|
|
|
+ background-color: rgb(250, 250, 250);
|
|
|
+}
|
|
|
|
|
|
- .right-box {
|
|
|
- background-color: rgb(250, 250, 250);
|
|
|
- }
|
|
|
+.page-view {
|
|
|
+ padding: 16rpx;
|
|
|
+}
|
|
|
|
|
|
- .page-view {
|
|
|
- padding: 16rpx;
|
|
|
- }
|
|
|
+.class-item,
|
|
|
+.class-item2 {
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 16rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+}
|
|
|
|
|
|
- .class-item,
|
|
|
- .class-item2 {
|
|
|
- margin-bottom: 30rpx;
|
|
|
- background-color: #fff;
|
|
|
- padding: 16rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- }
|
|
|
+.class-item2 {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
|
|
|
- .class-item2 {
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
+.item-title {
|
|
|
+ font-size: 26rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #5f96be;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
|
|
|
- .item-title {
|
|
|
- font-size: 26rpx;
|
|
|
+.item-box {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 30% 30% 30%;
|
|
|
+ justify-content: space-between;
|
|
|
+ .item {
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ background-color: #edebeb;
|
|
|
+ color: #000;
|
|
|
+ padding: 10rpx;
|
|
|
text-align: center;
|
|
|
- color: #5F96BE;
|
|
|
- margin-bottom: 20rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
}
|
|
|
-
|
|
|
- .item-box {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 30% 30% 30%;
|
|
|
- justify-content: space-between;
|
|
|
- .item{
|
|
|
- margin-bottom: 10rpx;
|
|
|
- background-color: #EDEBEB;
|
|
|
- color:#000;
|
|
|
- padding: 10rpx;
|
|
|
- text-align: center;
|
|
|
- border-radius: 10rpx;
|
|
|
- }
|
|
|
- .act-type{
|
|
|
- border: 2rpx solid #5992BB !important;
|
|
|
- color: #5992BB !important;
|
|
|
- }
|
|
|
+ .act-type {
|
|
|
+ border: 2rpx solid #5992bb !important;
|
|
|
+ color: #5992bb !important;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .bottom-box {
|
|
|
- width: 100%;
|
|
|
- background-color: #fff;
|
|
|
- padding: 10rpx 20rpx;
|
|
|
- height: 100rpx;
|
|
|
- border-top: 2rpx solid #F7F7F7;
|
|
|
- box-shadow: 0px 7px 10px 7px rgba(0, 0, 0, 0.1);
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- line-height: 100rpx;
|
|
|
- font-size: 28rpx;
|
|
|
-
|
|
|
- }
|
|
|
- .btn {
|
|
|
- background-color: #5992BB !important;
|
|
|
- color: #fff;
|
|
|
- font-size: 32rpx;
|
|
|
- border-radius: 40rpx;
|
|
|
- margin-bottom: 40rpx;
|
|
|
- width: 95%;
|
|
|
- }
|
|
|
- ::v-deep .u-input--radius.data-v-fdbb9fe6,
|
|
|
- .u-input--square.data-v-fdbb9fe6 {
|
|
|
- background-color: #F7F7F7 !important;
|
|
|
- padding: 40rpx;
|
|
|
- border-radius: 50rpx;
|
|
|
- }
|
|
|
+.bottom-box {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ border-top: 2rpx solid #f7f7f7;
|
|
|
+ box-shadow: 0px 7px 10px 7px rgba(0, 0, 0, 0.1);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ line-height: 100rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+}
|
|
|
+.btn {
|
|
|
+ background-color: #5992bb !important;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 32rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ width: 55%;
|
|
|
+}
|
|
|
+::v-deep .u-input--radius.data-v-fdbb9fe6,
|
|
|
+.u-input--square.data-v-fdbb9fe6 {
|
|
|
+ background-color: #f7f7f7 !important;
|
|
|
+ padding: 40rpx;
|
|
|
+ border-radius: 50rpx;
|
|
|
+}
|
|
|
</style>
|
宋飞扬