guzijian / garbage-removal · Commits

Commit 08f218046beb91102af4f13e18ad67e9cb2ef24d

Authored by liujun001
1 parent 897a8fd0
build: skipped

修改信息

Inline Side-by-side
Showing 9 changed files with 636 additions and 27 deletions
garbage-removal/src/pages.json
  View file @08f2180
@@ -18,7 +18,7 @@ @@ -18,7 +18,7 @@
18 { 18 {
19 "path": "pages/login/index", 19 "path": "pages/login/index",
20 "style": { 20 "style": {
21 - "navigationBarTitleText": "装饰装修垃圾智慧功能模块登录", 21 + "navigationBarTitleText": "长沙清运通智慧功能模块登录",
22 "enablePullDownRefresh": false 22 "enablePullDownRefresh": false
23 } 23 }
24 },{ 24 },{
@@ -57,7 +57,7 @@ @@ -57,7 +57,7 @@
57 { 57 {
58 "path": "clean/index", 58 "path": "clean/index",
59 "style": { 59 "style": {
60 - "navigationBarTitleText": "装修垃圾", 60 + "navigationBarTitleText": "长沙清运通",
61 "enablePullDownRefresh": false 61 "enablePullDownRefresh": false
62 } 62 }
63 }, 63 },
@@ -94,6 +94,14 @@ @@ -94,6 +94,14 @@
94 "navigationBarBackgroundColor": "#19a97c", 94 "navigationBarBackgroundColor": "#19a97c",
95 "enablePullDownRefresh": false 95 "enablePullDownRefresh": false
96 } 96 }
  97 + },{
  98 + "path": "car-guide/index",
  99 + "style": {
  100 + "navigationBarTitleText": "车型说明",
  101 + "navigationBarTextStyle": "white",
  102 + "navigationBarBackgroundColor": "#19a97c",
  103 + "enablePullDownRefresh": false
  104 + }
97 } 105 }
98 ] 106 ]
99 },{ 107 },{
garbage-removal/src/pages/home-info/car-guide/index.vue 0 → 100644
  View file @08f2180
  1 +<template>
  2 + <view class="content" style="background:' #1EBB81'">
  3 + <custom-tabs type="c1" :value="value" @change="changeIndex" :activeTextStyle="{color:'#fff', background:' #1EBB81',width:'48%', 'border-radius': '5px'}"
  4 + :defaultTextStyle="{width:'48%'}" :duration="1500">
  5 + <custom-tab-pane label="勾臂车" name="c1_1" >
  6 + <view class="content1">
  7 + <view>
  8 + <image :src="combinationImagePath('goubiche.png')" />
  9 + </view>
  10 + <view>
  11 + <view class="title">勾臂车简介</view>
  12 + <view>&nbsp;</view>
  13 + <view class="content">说起勾臂垃圾车，好多人都不懂勾臂垃圾车是什么？其实很简单，勾臂垃圾车是一个很普遍常用的垃圾车型，它由二类底盘、拉臂结构、液压系统、控制系统、箱体组成；因此勾臂垃圾车也叫拉臂垃圾车，主要适用于市政环卫、工厂矿区、物业小区等人口集中密集的居民区.实现一车配多个垃圾箱，一辆车就可以维持数个垃圾收集站的运转，效率高，操作稳定简单，结构简单，机械化程度高，且箱体为密封式设计，避免了环境的二次污染。</view>
  14 + <view>&nbsp;</view>
  15 + <view class="content">带钩臂式密闭式回收箱的新型环保装修垃圾运输车辆配备液压式勾臂系统，配套使用放置在小区及地下室的不同尺寸的密闭式装修垃圾回收箱，回收箱保证全封闭，无渗漏，箱内无死角，卸货干净；货厢外形平顺，无加强筋外露，车厢内板材料采用高强度钢板，保证足够厚度及强度，保证装运作业时不发生永久性变形。</view>
  16 + </view>
  17 + </view>
  18 + </custom-tab-pane>
  19 + <custom-tab-pane label="自卸车" name="c1_2">
  20 + <view class="content1">
  21 + <view>
  22 + <image :src="combinationImagePath('zixieche.jpg')" />
  23 + </view>
  24 + <view>
  25 + <view class="title">自卸车简介</view>
  26 + <view>&nbsp;</view>
  27 + <view class="content">自卸车是指通过液压或机械举升而自行卸载货物的车辆。又称翻斗车。由汽车底盘、液压举升机构、货厢和取力装置等部件组成。</view>
  28 + <view class="content">自卸车的车厢分后向倾翻和侧向倾翻两种，通过操纵系统控制活塞杆运动，后向倾翻较普遍，推动活塞杆使车厢倾翻，少数双向倾翻。</view>
  29 + <view class="content">自卸车按其用途可分为两大类：一类属于非公路运输用的重型和超重型（额定载质量20吨以上）自卸车。主要承担大型矿山、工程等运输任务，通常与挖掘机配套使用。另一类属于公路运输用的轻、中、重型（额定载质量载2～20吨）普通自卸车。主要承担砂石、泥土、煤炭等松散货物运输，通常与装载机配套使用。</view>
  30 + <view>&nbsp;</view>
  31 + <view class="content">新型环保智能装修垃圾运输车使用自动开合全密闭式顶盖的U型货厢，货厢内无死角，卸货干净；货厢外形平顺，无加强筋外露，货厢外侧不易积土挂泥；货厢内板材料采用高强度钢板，保证装运作业时不发生永久性变形。</view>
  32 + </view>
  33 + </view>
  34 + </custom-tab-pane>
  35 + </custom-tabs>
  36 +
  37 + </view>
  38 + </template>
  39 +
  40 + <script setup>
  41 + import{ref} from "vue";
  42 + const currentIndexValue = ref(0)
  43 +// const tabs =['勾臂车','自卸车']
  44 +
  45 +const combinationImagePath=(imagePath)=>{
  46 + return import.meta.env.VITE_BASE_URL+"/"+imagePath;
  47 +}
  48 +
  49 + </script>
  50 +
  51 + <style lang="scss" scoped>
  52 + .title{
  53 + color:black;font-size: 16px;font-weight: bold;
  54 + }
  55 + .content{
  56 + color:#909399;font-size: 15px;font-weight: lighter;font-family:"宋体"
  57 + }
  58 + .content1{
  59 + background-color: #FFF;
  60 + margin: 15px;
  61 + border-radius:0.46875rem
  62 + }
  63 + </style>
  64 +
0 \ No newline at end of file 65 \ No newline at end of file
garbage-removal/src/pages/home-info/clean/index.vue
  View file @08f2180
@@ -35,15 +35,14 @@ @@ -35,15 +35,14 @@
35 <view class="company-clean-container-car-main-content"> 35 <view class="company-clean-container-car-main-content">
36 <view class="company-clean-container-car-main-content-type"> 36 <view class="company-clean-container-car-main-content-type">
37 <view class="company-clean-container-car-main-content-type-price-area"> 37 <view class="company-clean-container-car-main-content-type-price-area">
38 - <text style="color: red;">*</text>车辆信息: 38 + <text style="color: red;">*</text>选择车型: {{carName}}
39 </view> 39 </view>
40 </view> 40 </view>
41 41
42 <view> 42 <view>
43 <swiper style="height: 588rpx;" @change="onChangeSwiper" indicator-dots circular > 43 <swiper style="height: 588rpx;" @change="onChangeSwiper" indicator-dots circular >
44 <swiper-item v-for="(car,index) in garCarInfoList" :key="index" > 44 <swiper-item v-for="(car,index) in garCarInfoList" :key="index" >
45 - <view style="font-size: 16px;text-align: center;"><text>{{car.carType}}</text></view>  
46 - <view><image :src="combinationImagePath(car)" ></image></view> 45 + <view><image :src="combinationImagePath(car)" mode ="heightFix"></image></view>
47 <view><text style="color:#909399;font-size: 14px;">{{car.remark}}</text></view> 46 <view><text style="color:#909399;font-size: 14px;">{{car.remark}}</text></view>
48 </swiper-item> 47 </swiper-item>
49 </swiper> 48 </swiper>
@@ -179,6 +178,7 @@ const movableAreaElement = ref() @@ -179,6 +178,7 @@ const movableAreaElement = ref()
179 const deletable = ref(false) 178 const deletable = ref(false)
180 const companyObj = ref() 179 const companyObj = ref()
181 const tel = ref() 180 const tel = ref()
  181 +const carName=ref("")
182 const carTypeShowFlag = ref(false) 182 const carTypeShowFlag = ref(false)
183 const garbageTypeShowFlag = ref(false) 183 const garbageTypeShowFlag = ref(false)
184 const carPopupShowFlag = ref(false) 184 const carPopupShowFlag = ref(false)
@@ -236,6 +236,7 @@ const onChange = (e) =&gt; { @@ -236,6 +236,7 @@ const onChange = (e) =&gt; {
236 } 236 }
237 237
238 const onChangeSwiper=(e)=>{ 238 const onChangeSwiper=(e)=>{
  239 + carName.value=garCarInfoList.value[e.detail.current].carType;
239 swiperIndex.value = e.detail.current; 240 swiperIndex.value = e.detail.current;
240 containerVolume.value = garCarInfoList.value[e.detail.current].containerVolume; 241 containerVolume.value = garCarInfoList.value[e.detail.current].containerVolume;
241 } 242 }
@@ -293,7 +294,10 @@ const initOptions = async (options) =&gt; { @@ -293,7 +294,10 @@ const initOptions = async (options) =&gt; {
293 queryCarList({ companyId: companyObj.value.id }).then(res => { 294 queryCarList({ companyId: companyObj.value.id }).then(res => {
294 295
295 garCarInfoList.value=res.data.rows; 296 garCarInfoList.value=res.data.rows;
296 - 297 + if(garCarInfoList.value[0]){
  298 + carName.value=garCarInfoList.value[0].carType;
  299 + containerVolume.value=garCarInfoList.value[0].containerVolume;
  300 + }
297 }) 301 })
298 } 302 }
299 303
garbage-removal/src/pages/home/index.vue
  View file @08f2180
@@ -43,17 +43,10 @@ @@ -43,17 +43,10 @@
43 <view class="company-list-content-box"> 43 <view class="company-list-content-box">
44 <z-paging ref="paging" :fixed="false" v-model="companyList" @query="queryList"> 44 <z-paging ref="paging" :fixed="false" v-model="companyList" @query="queryList">
45 <empty-view slot:empty></empty-view> 45 <empty-view slot:empty></empty-view>
46 - <view class="company-list-item" v-for="(item, index) in companyList" :key="item.id"> 46 + <view class="company-list-item" v-for="(item) in companyList" :key="item.id">
47 <view class="company-list-item-main"> 47 <view class="company-list-item-main">
48 <view class="company-list-item-main-right"> 48 <view class="company-list-item-main-right">
49 <view class="company-list-item-main-right-name"> 49 <view class="company-list-item-main-right-name">
50 - <view class="company-list-item-main-right-name-label-recently"  
51 - v-if="index == 0 && sortValue == 0">  
52 - {{ "距离最近" }}  
53 - </view>  
54 - <view class="company-list-item-main-right-name-label-distance">  
55 - {{ "距离" + item.distance + "公里" }}  
56 - </view>  
57 <view class="company-list-item-main-right-name-label-name"> 50 <view class="company-list-item-main-right-name-label-name">
58 {{ item.name }} 51 {{ item.name }}
59 </view> 52 </view>
@@ -76,25 +69,15 @@ @@ -76,25 +69,15 @@
76 style="color: #fd5d00;">最近一月暂无评分</text> 69 style="color: #fd5d00;">最近一月暂无评分</text>
77 </view> 70 </view>
78 <view class="company-list-item-main-right-price-number"> 71 <view class="company-list-item-main-right-price-number">
79 - <view class="company-list-item-main-right-price">  
80 - 报价:<text style="color: #fd5d00;">￥{{ item.offer }}起&nbsp;&nbsp;</text>  
81 - </view> 72 +
82 <view class="company-list-item-main-right-number"> 73 <view class="company-list-item-main-right-number">
83 清运数：<text class="company-list-item-main-right-number-text">{{ item.cleanNumber }}</text> 74 清运数：<text class="company-list-item-main-right-number-text">{{ item.cleanNumber }}</text>
84 </view> 75 </view>
85 </view> 76 </view>
86 </view> 77 </view>
87 - <view class="company-list-item-bottom-contact-company"  
88 - style="display: flex; align-items: center;">  
89 - <up-icon name="phone" size="34" color="#19a97c"></up-icon>  
90 - <view @click.stop="handleContactClick(item.servicePhone)"  
91 - style="display: flex; justify-content: center; align-items: center;font-size: 28rpx; color:'#a9e08f'">  
92 - {{ item.servicePhone }}  
93 - </view>  
94 - </view> 78 +
95 </view> 79 </view>
96 - <view class="company-list-item-main-right-box" v-if="(addressInfo && userType == '用户')"  
97 - style="display: flex;font-size: 28rpx; justify-content: flex-end; align-items: flex-end;color:#458B74;font-weight: bold;"> 80 + <view class="company-list-item-main-right-box" v-if="(addressInfo && userType == '用户')" style="display: flex;font-size: 28rpx; justify-content: flex-end; align-items: flex-end;color:#458B74;font-weight: bold;">
98 <view class="company-list-item-main-right-box-text" 81 <view class="company-list-item-main-right-box-text"
99 @click.stop="handleCleanGarbage(item, item.servicePhone, userAddress)"> 82 @click.stop="handleCleanGarbage(item, item.servicePhone, userAddress)">
100 预约清运 -> 83 预约清运 ->
@@ -244,6 +227,9 @@ const handlerCLickInfoBox = (val) =&gt; { @@ -244,6 +227,9 @@ const handlerCLickInfoBox = (val) =&gt; {
244 case '分类指南': 227 case '分类指南':
245 uni.$u.route('/pages/home-info/type-guide/index') 228 uni.$u.route('/pages/home-info/type-guide/index')
246 break; 229 break;
  230 + case '车型说明':
  231 + uni.$u.route('/pages/home-info/car-guide/index')
  232 + break;
247 default: 233 default:
248 break; 234 break;
249 } 235 }
garbage-removal/src/uni_modules/custom-tabs/changelog.md 0 → 100644
  View file @08f2180
  1 +## 1.0.8（2022-04-21）
  2 +1. 优化插件，避免多个组件互相影响。
  3 +## 1.0.7（2022-04-20）
  4 +1. 优化
  5 +## 1.0.6（2022-04-20）
  6 +1. 修改使用多个该组件存在的BUG
  7 +## 1.0.5（2022-03-24）
  8 +1. 修复设置animation参数无效的BUG
  9 +2. 修复有动画切换的显示BUG
  10 +## 1.0.4（2022-03-08）
  11 +1. 增加defaultTextStyle字段，方便直接配置未选中的tab样式
  12 +2. 增加activeTextStyle字段，方便直接配置选中后tab的样式
  13 +3. 增加activeLineStyle字段，方便直接配置选中后下划线的样式
  14 +## 1.0.3（2022-03-07）
  15 +1. 修改vue2模式下 tablist is not defined 报错的bug
  16 +## 1.0.2（2022-03-02）
  17 +1. 新增tabs切换那一栏固定功能，类似吸顶效果
  18 +2. 新增监听label变化，label值可动态改变
  19 +3. 新增不显示的页面进行隐藏，防止某页面内容过多撑开其他页面
  20 +4. h5隐藏滚动条
  21 +## 1.0.0（2021-12-13）
  22 +1.0.0
garbage-removal/src/uni_modules/custom-tabs/components/custom-tab-pane/custom-tab-pane.vue 0 → 100644
  View file @08f2180
  1 +<template>
  2 + <view class="tab-pane">
  3 + <template v-if="show">
  4 + <slot></slot>
  5 + </template>
  6 + <template v-else>
  7 + <view style="width: 750rpx;height: 0;"></view>
  8 + </template>
  9 + </view>
  10 +</template>
  11 +<script setup>
  12 + // // #ifdef VUE3
  13 + // import { ref, watch } from 'vue';
  14 + // const data_props = defineProps({
  15 + // label: [String, Number],
  16 + // name: [String, Number]
  17 + // });
  18 + // const show = ref(false);
  19 + // let timer = 0;
  20 + // const watchTabKey = `watchTabValue_${data_props.name.split('_')[0]}`;
  21 + // console.log(watchTabKey)
  22 + // watch(() => data_props.label, (newValue, oldValue) => {
  23 + // uni.$emit(watchTabKey, { newValue: newValue, oldValue: oldValue, name: data_props.name });
  24 + // }, { immediate: true });
  25 + // uni.$on('putChange', item => {
  26 + // if (timer) clearTimeout(timer);
  27 + // show.value = true;
  28 + // timer = setTimeout(() => {
  29 + // show.value = data_props.name == item.name;
  30 + // }, item.duration)
  31 + // })
  32 + // // #endif
  33 +</script>
  34 +<script>
  35 + export default {
  36 + props: ['label', 'name'],
  37 + data() {
  38 + return {
  39 + timer: 0,
  40 + show: false,
  41 + watchTabKey: `watchTabValue_${this.name.split('_')[0]}`,
  42 + putChangeKey: `putChange_${this.name.split('_')[0]}`
  43 + }
  44 + },
  45 + created() {
  46 + uni.$on(this.putChangeKey, item => {
  47 + if (this.timer) clearTimeout(this.timer);
  48 + this.show = true;
  49 + this.timer = setTimeout(() => {
  50 + this.show = this.name == item.name;
  51 + }, item.duration)
  52 + })
  53 + },
  54 + watch: {
  55 + label: {
  56 + deep: true,
  57 + handler(newValue, oldValue) {
  58 + uni.$emit(this.watchTabKey, { newValue: newValue, oldValue: oldValue, name: this.name });
  59 + },
  60 + immediate: true
  61 + }
  62 + }
  63 + }
  64 +</script>
  65 +<style lang="scss" scoped>
  66 + .tab-pane {
  67 + width: 750rpx;
  68 + // #ifndef APP-PLUS-NVUE
  69 + flex-shrink: 0;
  70 + // #endif
  71 + }
  72 +</style>
garbage-removal/src/uni_modules/custom-tabs/components/custom-tabs/custom-tabs.vue 0 → 100644
  View file @08f2180
  1 +<template>
  2 + <view :class="['tab',{'tab-fixed':fixed}]">
  3 + <scroll-view :class="['tab-bar',{'tab-bar-center':tabCenter}]" scroll-x="true" :scroll-into-view="scrollId" scroll-with-animation>
  4 + <view v-for="(item,index) in tabList" class="tab-bar-item" :class="{'active':tabIndex==index}" :id="`tab_${index}`" :style="[{'padding':`0 ${tabSpacing}rpx`},tabIndex==index?activeTextStyle:defaultTextStyle]" :key="index" @click="putChange(item.name,index);tabChange(index)">
  5 + <text class="txt">{{item.label}}</text>
  6 + <text class="active-line" v-if="tabIndex==index" :style="[activeLineStyle]"></text>
  7 + </view>
  8 + </scroll-view>
  9 + <view class="tab-cont" :style="{'transform':`translateX(${translateX}%)`,'transition':`transform ${d/1000}s ease-in-out`}">
  10 + <slot></slot>
  11 + </view>
  12 + </view>
  13 +</template>
  14 +<script>
  15 + export default {
  16 + name: "tabs",
  17 + props: {
  18 + type: {
  19 + type: [String],
  20 + default: ''
  21 + },
  22 + value: { // 默认选中项
  23 + type: [Number, String],
  24 + default: 0
  25 + },
  26 + tabSpacing: { // tabbar的间距
  27 + type: [Number, String],
  28 + default: 20
  29 + },
  30 + animation: { // 切换动画
  31 + type: Boolean,
  32 + default: true
  33 + },
  34 + duration: { // 滑动动画时长 单位毫秒
  35 + type: [Number, String],
  36 + default: 200
  37 + },
  38 + tabCenter: { // tabbar是否居中
  39 + type: Boolean,
  40 + default: false
  41 + },
  42 + fixed: { // 该组件是否固定位置
  43 + type: Boolean,
  44 + default: false
  45 + },
  46 + defaultTextStyle: { // 未选中文字的样式
  47 + type: [Object]
  48 + },
  49 + activeTextStyle: { // 选中后文字的样式
  50 + type: [Object]
  51 + },
  52 + activeLineStyle: { // 选中下划线的样式
  53 + type: [Object]
  54 + }
  55 + },
  56 + data() {
  57 + return {
  58 + tabList: [],
  59 + tabIndex: 0,
  60 + d: this.duration,
  61 + translateX: 0,
  62 + scrollId: 'tab_0',
  63 + top: 0,
  64 + timer: 0,
  65 + timer2: 0,
  66 + watchTabValueKey: `watchTabValue_${this.type}`,
  67 + putChangeKey: `putChange_${this.type}`
  68 + }
  69 + },
  70 + created() {
  71 + uni.$off(this.watchTabValueKey);
  72 + uni.$on(this.watchTabValueKey, o => {
  73 + if (o.name.split('_')[0] != this.type) return false;
  74 + if (typeof o.oldValue == 'undefined') {
  75 + this.tabList.push({
  76 + label: o.newValue,
  77 + name: o.name
  78 + });
  79 + if (this.timer) clearTimeout(this.timer);
  80 + this.timer = setTimeout(() => {
  81 + if (this.tabList[this.value]) this.putChange(this.tabList[this.value].name);
  82 + }, 5)
  83 + } else this.tabList.forEach(item => {
  84 + if (item.label == o.oldValue && item.name == o.name) item.label = o.newValue;
  85 + })
  86 + })
  87 + },
  88 + watch: {
  89 + value: {
  90 + handler(val) {
  91 + this.tabChange(val);
  92 + },
  93 + immediate: true
  94 + },
  95 + animation: {
  96 + handler(val) {
  97 + if (!val) this.d = 0;
  98 + },
  99 + immediate: true
  100 + }
  101 + },
  102 + methods: {
  103 + tabChange(index) {
  104 + if (this.tabIndex == index) return false;
  105 + this.tabIndex = index;
  106 + this.translateX = -100 * index;
  107 + this.$nextTick(() => {
  108 + this.scrollId = `tab_${index-1}`;
  109 + })
  110 + if (this.timer2) clearTimeout(this.timer2);
  111 + this.timer2 = setTimeout(() => {
  112 + if (this.tabList[index]) this.$emit('change', {
  113 + value: index,
  114 + ...this.tabList[index]
  115 + });
  116 + }, 20)
  117 + },
  118 + putChange(name, index) {
  119 + if (this.tabIndex == index) return false;
  120 + uni.$emit(this.putChangeKey, {
  121 + name: name,
  122 + duration: this.d,
  123 + type: index > this.tabIndex ? 1 : 2
  124 + });
  125 + }
  126 + }
  127 + }
  128 +</script>
  129 +<style>
  130 + /* #ifndef APP-PLUS-NVUE */
  131 + >>> ::-webkit-scrollbar {
  132 + display: none;
  133 + width: 0 !important;
  134 + height: 0 !important;
  135 + -webkit-appearance: none;
  136 + background: transparent;
  137 + color: transparent;
  138 + }
  139 +
  140 + /* #endif */
  141 + .tab-bar.tab-bar-center {
  142 + text-align: center;
  143 + }
  144 +</style>
  145 +<style scoped lang="scss">
  146 + .tab {
  147 + // #ifndef APP-PLUS-NVUE
  148 + display: flex;
  149 + flex-direction: column;
  150 + overflow-x: hidden;
  151 +
  152 + // #endif
  153 + .tab-bar {
  154 + position: relative;
  155 + height: 90rpx;
  156 + // #ifndef APP-PLUS-NVUE
  157 + white-space: nowrap;
  158 + // #endif
  159 + background-color: #fff;
  160 +
  161 + // #ifndef APP-PLUS-NVUE
  162 + &::after {
  163 + content: '';
  164 + width: 100%;
  165 + height: 2rpx;
  166 + position: absolute;
  167 + bottom: 0;
  168 + left: 0;
  169 + background: #ccc;
  170 + }
  171 +
  172 + // #endif
  173 + &-item {
  174 + // #ifndef APP-PLUS-NVUE
  175 + display: inline-block;
  176 + // #endif
  177 + height: 90rpx;
  178 + line-height: 90rpx;
  179 + font-size: 30rpx;
  180 + color: #222;
  181 + text-align: center;
  182 +
  183 + &.active {
  184 + position: relative;
  185 + color: #007AFF;
  186 + }
  187 +
  188 + // #ifndef APP-PLUS-NVUE
  189 + .active-line {
  190 + position: absolute;
  191 + bottom: 2rpx;
  192 + left: 50%;
  193 + transform: translateX(-50%);
  194 + width: 80rpx;
  195 + height: 2rpx;
  196 + background: #007AFF;
  197 + }
  198 +
  199 + // #endif
  200 + }
  201 + }
  202 +
  203 + &-fixed {
  204 + height: 100vh;
  205 +
  206 + .tab-bar {
  207 + position: sticky;
  208 + top: 0px;
  209 + z-index: 2022;
  210 + }
  211 + }
  212 +
  213 + .tab-cont {
  214 + // #ifndef APP-PLUS-NVUE
  215 + display: flex;
  216 + // #endif
  217 + flex-direction: row;
  218 + padding: 20rpx 0;
  219 + }
  220 + }
  221 +</style>
garbage-removal/src/uni_modules/custom-tabs/package.json 0 → 100644
  View file @08f2180
  1 +{
  2 + "id": "custom-tabs",
  3 + "displayName": "Tabs标签页 灵活配置 多端兼容（暂停维护谨慎使用，建议使用uv-tabs）",
  4 + "version": "1.0.8",
  5 + "description": "在做项目的过程中用到了tab切换，本想着去插件市场找一个直接现用，后面发现找到的tab切换并不是我想要的那种使用方式，于是我结合了element-ui中Tabs标签页的方式写了该组件...",
  6 + "keywords": [
  7 + "tabs",
  8 + "tab",
  9 + "tabs标签页",
  10 + "tab切换",
  11 + "标签页"
  12 +],
  13 + "repository": "https://gitee.com/my_dear_li_pan/my-uni-modules.git",
  14 +"engines": {
  15 + },
  16 + "dcloudext": {
  17 + "category": [
  18 + "前端组件",
  19 + "通用组件"
  20 + ],
  21 + "sale": {
  22 + "regular": {
  23 + "price": "0.00"
  24 + },
  25 + "sourcecode": {
  26 + "price": "0.00"
  27 + }
  28 + },
  29 + "contact": {
  30 + "qq": ""
  31 + },
  32 + "declaration": {
  33 + "ads": "无",
  34 + "data": "插件不采集任何数据",
  35 + "permissions": "无"
  36 + },
  37 + "npmurl": ""
  38 + },
  39 + "uni_modules": {
  40 + "dependencies": [],
  41 + "encrypt": [],
  42 + "platforms": {
  43 + "cloud": {
  44 + "tcb": "y",
  45 + "aliyun": "y"
  46 + },
  47 + "client": {
  48 + "Vue": {
  49 + "vue2": "y",
  50 + "vue3": "y"
  51 + },
  52 + "App": {
  53 + "app-vue": "y",
  54 + "app-nvue": "n"
  55 + },
  56 + "H5-mobile": {
  57 + "Safari": "u",
  58 + "Android Browser": "y",
  59 + "微信浏览器(Android)": "y",
  60 + "QQ浏览器(Android)": "y"
  61 + },
  62 + "H5-pc": {
  63 + "Chrome": "y",
  64 + "IE": "n",
  65 + "Edge": "y",
  66 + "Firefox": "y",
  67 + "Safari": "y"
  68 + },
  69 + "小程序": {
  70 + "微信": "y",
  71 + "阿里": "y",
  72 + "百度": "y",
  73 + "字节跳动": "y",
  74 + "QQ": "y"
  75 + },
  76 + "快应用": {
  77 + "华为": "u",
  78 + "联盟": "u"
  79 + }
  80 + }
  81 + }
  82 + }
  83 +}
0 \ No newline at end of file 84 \ No newline at end of file
garbage-removal/src/uni_modules/custom-tabs/readme.md 0 → 100644
  View file @08f2180
  1 +- <a href="#c1" title="概要">概要</a>
  2 +- <a href="#c2" title="Tips">Tips</a>
  3 +- <a href="#c3" title="支持的平台">支持的平台</a>
  4 +- <a href="#c4" title="使用示例">使用示例</a>
  5 +- <a href="#c5" title="Tabs Attributes">Tabs Attributes</a>
  6 +- <a href="#c6" title="Tabs Events">Tabs Events</a>
  7 +- <a href="#c7" title="Tab-pane Attributes">Tab-pane Attributes</a>
  8 +- <a href="#c8" title="关注我，不迷路">关注我，不迷路</a>
  9 +
  10 +<div id="c1"></div>
  11 +
  12 +#### 概要
  13 +
  14 +在做项目的过程中用到了tab切换，本想着去插件市场找一个直接现用，后面发现找到的tab切换并不是我想要的那种使用方式，于是我结合了element-ui中Tabs标签页的方式写了该组件。
  15 +
  16 +
  17 +<div id="c2"></div>
  18 +
  19 +#### Tips
  20 +
  21 +1. 该插件使用的预编译，需要自行安装scss/sass插件。
  22 +2. 该插件同时兼容了VUE2和VUE3，hbuilderX 最好是更新到较新版本。
  23 +3. 由于组件重构升级，老用户需要更新插件的，需要注意参数，根据下面提供的参数修改即可。
  24 +4. 遵循uni_modules规范插件。
  25 +5. 如果发现组件有bug或者不完善可以留言交流。
  26 +6. uniapp插件git地址：https://gitee.com/my_dear_li_pan/my-uni-modules.git
  27 +7. 个人博客地址：https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343
  28 +
  29 +<div id="c3"></div>
  30 +
  31 +#### 支持的平台
  32 +- H5、app-vue、微信小程序、百度小程序等小程序平台。
  33 +- 暂不支持nvue。
  34 +- cli脚手架项目是否可用，暂未测试。
  35 +
  36 +<div id="c4"></div>
  37 +
  38 +#### 使用示例
  39 +```
  40 +<template>
  41 + <view>
  42 + <custom-tabs type="c1" :value="value" @change="changeIndex">
  43 + <custom-tab-pane label="标签一" name="c1_1">
  44 + <view style="height: 100px;">内容0</view>
  45 + <view style="height: 100px;">内容1</view>
  46 + <view style="height: 100px;">内容1</view>
  47 + <view style="height: 100px;">内容1</view>
  48 + <view style="height: 100px;">内容1</view>
  49 + <view style="height: 100px;">内容1</view>
  50 + <view style="height: 100px;">内容1</view>
  51 + <view style="height: 100px;">内容1</view>
  52 + <view style="height: 100px;">内容1</view>
  53 + <view style="height: 100px;">内容1</view>
  54 + </custom-tab-pane>
  55 + <custom-tab-pane label="标签二" name="c1_2">内容2</custom-tab-pane>
  56 + <custom-tab-pane label="标签三3" name="c1_3">内容3</custom-tab-pane>
  57 + <custom-tab-pane label="标签四44" name="c1_4">内容4</custom-tab-pane>
  58 + <custom-tab-pane label="标签五555" name="c1_5">内容5</custom-tab-pane>
  59 + <custom-tab-pane label="标签六6666" name="c1_6">内容6</custom-tab-pane>
  60 + <custom-tab-pane label="标签七77777" name="c1_7">内容7</custom-tab-pane>
  61 + </custom-tabs>
  62 + </view>
  63 +</template>
  64 +<script setup>
  65 + // #ifdef VUE3
  66 + import { reactive, ref, watch } from 'vue';
  67 + const value = ref(2);
  68 +
  69 + function changeIndex(e) {
  70 + console.log('选中:', e)
  71 + }
  72 + // #endif
  73 +</script>
  74 +<script>
  75 + // #ifdef VUE2
  76 + export default {
  77 + data() {
  78 + return {
  79 + value: 2
  80 + }
  81 + },
  82 + methods: {
  83 + changeIndex(e) {
  84 + console.log('选中:', e)
  85 + }
  86 + }
  87 + }
  88 + // #endif
  89 +</script>
  90 +```
  91 +
  92 +<div id="c5"></div>
  93 +
  94 +#### Tabs Attributes
  95 +
  96 +参数|说明|类型|是否必填|可选值|默认值
  97 +-|-|-|-|-|-|
  98 +type|组件的唯一标识，如果有多个该组件，则值必须不同|string|是|-|-
  99 +value|选中选项的索引，从0开始|Number|否|-|0
  100 +animation|切换动画|Boolean|否|true/false|true
  101 +duration|切换动画的动画时长，单位ms|Number|否|-|200
  102 +tabSpacing|tab选项的左右间距，单位rpx|Number|否|-|40
  103 +tabCenter|tab选项是否居中显示|Boolean|否|true/false|false
  104 +fixed|tab选项固定|Boolean|否|true/false|false
  105 +defaultTextStyle|未选中tab选项的样式|Object|否|示例：```:defaultTextStyle="{color:'pink'}"```|-
  106 +activeTextStyle|选中后tab选项的样式|Object|否|示例：```:activeTextStyle="{color:'red','font-weight':700}"```|-
  107 +activeLineStyle|选中后tab选项下划线的样式|Object|否|示例：```:activeLineStyle="{'background-color':'red',height:'6rpx'}"```|-
  108 +
  109 +<div id="c6"></div>
  110 +
  111 +#### Tabs Events
  112 +事件名称|说明|回调参数
  113 +-|-|-|
  114 +change|tab 被选中时触发|被选中的标签tab实例
  115 +
  116 +<div id="c7"></div>
  117 +
  118 +#### Tab-pane Attributes
  119 +
  120 +参数|说明|类型|是否必填|可选值|默认值
  121 +-|-|-|-|-|-|
  122 +label|选项卡标题|String|是|-|-
  123 +name|与选项卡绑定值 value 对应的标识符，表示选项卡别名。==注意：== 该值的格式必须和组件上的type配合使用，eg：type="c1"，name="c1_"+自定义值|String|是|-|该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'c1_1'
  124 +
  125 +<div id="c8"></div>
  126 +
  127 +**----- 别忘记点赞哟，您的肯定就是对我最大的支持 END -----**
  128 +
  129 +#### 关注我，不迷路
  130 +
  131 +如果任何疑问的可以在评论区留言，还可以加QQ群交流：568984539，加群备注‘地区-名字-技术类型’。
  132 +
  133 +更多前端等相关知识可关注我个人博客：https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343
  134 +
  135 +**个人作品展示：**
  136 +
  137 +uniapp+vue3.2+unicloud开发微信小程序：**皮皮虎去水印**。
  138 +
  139 +关注下方公众号：【**全网免费网盘资源**】、【**美团外卖饿了么天天领红包**】、【**去水印**】。
  140 +
  141 +![image](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-bb657efd-fece-483e-a715-5daea480fde8/6e029310-aec8-46e9-9883-1c88dc1925ad.jpg)
  142 +
  143 +
  144 +
  145 +
  146 +
  147 +
  148 +
  149 +