瀏覽代碼

fix:vant组件冲突

lvkun996 3 年之前
父節點
當前提交
15f6ca4846

+ 16 - 0
.hbuilderx/launch.json

@@ -0,0 +1,16 @@
+{ // launch.json 配置了启动调试时相关设置,configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
+  // launchtype项可配置值为local或remote, local代表前端连本地云函数,remote代表前端连云端云函数
+    "version": "0.0",
+    "configurations": [{
+     	"default" : 
+     	{
+     		"launchtype" : "local"
+     	},
+     	"mp-weixin" : 
+     	{
+     		"launchtype" : "local"
+     	},
+     	"type" : "uniCloud"
+     }
+    ]
+}

+ 106 - 17
src/components/garden-card/garden-card.vue

@@ -1,6 +1,6 @@
 <template>
     <view class="garden-card" >
-       <view class="garden-list-item" v-for="item in districtGardenData" :key="item.id">
+       <view class="garden-list-item" v-for="(item, index) in listData" :key="item.id">
                     <view class="garden-list-item-time">
                         开园时间: {{item.createTime}}
                     </view>
@@ -32,21 +32,16 @@
                                   手机:{{item.phone}}
                             </view>
                         </view>
-
-                        <!-- <van-grid column-num="2" :border="false" class="grid"  :center="false">
-                            <van-grid-item use-slot >
-                               班级数量: {{item.classCount}}
-                            </van-grid-item>
-                            <van-grid-item use-slot >
-                                教职工数量:{{item.teachUserCount}}
-                            </van-grid-item>
-                            <van-grid-item use-slot >
-                                学生数量:{{item.studentCount}}
-                            </van-grid-item>
-                            <van-grid-item use-slot >
-                                手机:{{item.phone}}
-                            </van-grid-item>
-                        </van-grid> -->
+                        <view class="garden-product">
+                            <view class="garden-product-label">使用产品:</view>
+                            <view :class="item.isExpand ? 'garden-product-content-true': 'garden-product-content-false'" v-if="item.courseNames && item.courseNames.length !== 0">
+                                <view class="garden-product-content-item" v-for="i in item.courseNames" :key="i.catId">
+                                    {{ i.catName }}
+                                </view>
+                            </view>
+                            <view v-else class="garden-product-content-false">无</view>
+                            <view class="garden-product-expand" v-if="item.courseNames && item.courseNames.length !== 0 && item.courseNames.length > 1" @click="handleExpand(index)">{{item.isExpand ? '收起更多': '展开更多'}}</view>
+                        </view>
                     </view>
                 </view>
     </view>
@@ -60,6 +55,21 @@ export default {
       type: Array,
       default: () => []
     }
+  },
+  computed: {
+      listData() {
+          return this.districtGardenData
+      }
+  },
+  methods: {
+    //   展开与收起
+      handleExpand(i) {
+          if(this.listData[i].isExpand === true) {
+              this.$set(this.listData[i],'isExpand', false)
+          } else {
+              this.$set(this.listData[i],'isExpand', true)
+          }
+      }
   }
 }
 </script>
@@ -84,6 +94,7 @@ export default {
     box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(235, 235, 235, 0.5);
     border-radius: 20rpx;
     position: relative;
+    overflow: hidden;
     &-top {
         padding: 32rpx 0rpx 32rpx 24rpx;
         &-label {
@@ -135,7 +146,7 @@ export default {
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #42516C;
-        padding: 32rpx 24rpx;
+        padding: 32rpx 24rpx 24rpx;
         box-sizing: border-box;
         .garden-info-item {
             flex: 50%;
@@ -155,6 +166,84 @@ export default {
     //     }
     // }
     }
+    .garden-product {
+        display: flex;
+        position: relative;
+        margin-bottom: 32rpx;
+        &-label {
+            margin-left: 24rpx;
+            width: 140rpx;
+            height: 42rpx;
+            font-size: 28rpx;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #42516C;
+            line-height: 42rpx;
+        }
+        // 未展开
+        &-content-false {
+            display: flex;
+            flex-direction: column;
+            width: 388rpx;
+            font-size: 28rpx;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #42516C;
+            line-height: 42rpx;
+            .garden-product-content-item {
+                display: none;
+            }
+            .garden-product-content-item:first-child {
+                display: block;
+                width: 388rpx;
+                height: 42rpx;
+                overflow: hidden;    
+                text-overflow:ellipsis;    
+                white-space: nowrap; 
+            }
+        }
+        // 已展开
+        &-content-true {
+            display: flex;
+            flex-direction: column;
+            width: 388rpx;
+            font-size: 28rpx;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #42516C;
+            line-height: 42rpx;
+            .garden-product-content-item {
+                margin-bottom: 16rpx;
+                width: 388rpx;
+            }
+            .garden-product-content-item:first-child {
+                display: block;
+                width: 388rpx;
+            }
+            .garden-product-content-item:last-child {
+                margin-bottom: 0;
+            }
+        }
+        &-ellipsis {
+            position: absolute;
+            top: 0;
+            right: 180rpx;
+            height: 42rpx;
+            line-height: 42rpx;
+            font-size: 28rpx;
+        }
+        &-expand {
+            position: absolute;
+            top: 0;
+            right: 24rpx;
+            height: 42rpx;
+            font-size: 24rpx;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #1677FF;
+            line-height: 42rpx;
+        } 
+    }
   }
   &-item:last-child {
       padding-bottom: 200rpx;

+ 45 - 0
src/components/popup/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <view class="popup" v-if="show" @click="handleClose">
+    <view class="popup-content" @click.stop="handleStop">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'Popup',
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    handleClose() {
+      this.$emit('close')
+    },
+    handleStop() {
+      return false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7);
+  &-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+</style>

+ 1 - 1
src/pages.json

@@ -65,7 +65,7 @@
 					"van-grid": "/wxcomponents/grid/index",
 					"van-grid-item": "/wxcomponents/grid-item/index",
 					"van-tab": "/wxcomponents/tab/index",
-  					"van-tabs": "/wxcomponents/tabs/index"
+  				"van-tabs": "/wxcomponents/tabs/index"
 				}
 			}
 		},

+ 141 - 9
src/pages/audit/card.vue

@@ -19,7 +19,6 @@
                             <slot>
 
                             </slot>
-
                         </view>
                     </view>
                 </view>
@@ -27,6 +26,9 @@
                 <view class="line" />
                 <!-- 详细信息 -->
                 <view class="detail-message">
+                    <view class="use-product" @click="handleTip">
+                        使用产品:{{ item.courseNames | handleCourseNames }}
+                    </view>
                     <view class="school-adress">
                         园所地址:{{item.address.address}}
                     </view>
@@ -39,21 +41,67 @@
                 </view>
             </view>
         </view>
+
+        <popup :show="show" @close="show = false">
+            <view class="popupBox" >
+                <image :src="closeBtnImg" class="closeBtn" @click="show = false"></image>
+                <h1 class="title">使用产品</h1>
+                <view class="course" v-for="i in item.courseNames" :key="i.catId">
+                    <view class="courseName"><image class="circle" src="@/static/image/circle.png"></image>{{ i.catName }}</view>
+                </view>
+                <button class="confirmBtn" @click="show = false">确定</button>
+            </view>
+        </popup>
     </view>
 </template>
 
 <script>
+import Popup from '@/components/popup/index'
+import Tip from '@/utils/tip.js'
+
 export default {
   name: 'Card',
+  props: {
+      item: {
+          type: Object,
+          required: true
+      }
+  }, 
+  components: {
+      Popup
+  },
   computed: {
       item1  () {
           return 1
+      },
+  },
+  filters: {
+      handleCourseNames(list) {
+          let name = ''
+          if(list && list.length !== 0) {
+              list.forEach(item => {
+                  if(name !== '') name += '、'
+                  name += item.catName
+              })
+          }else {
+              name = '无合作产品'
+          }
+          return name
       }
   },
-  props: {
-      item: {
-          type: Object,
-          required: true
+  data() {
+      return {
+          show: false,
+          closeBtnImg: require('@/static/image/closeBtn.png')
+      }
+  },
+  methods: {
+      handleTip() {
+          if(this.item.courseNames && this.item.courseNames.length !== 0) {
+            this.show = true
+          }else {
+            Tip.error('无合作产品')
+          }
       }
   }
 }
@@ -125,15 +173,99 @@ export default {
                 font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: #9C9AAB;
-                padding-left: 24rpx;
+                padding: 0 24rpx 40rpx 24rpx;
                 box-sizing: border-box;
-                padding-bottom: 40rpx;
                 .phone {
-                    margin-top: 18rpx;
-                    margin-bottom: 18rpx;
+                    padding-left: 20rpx;
+                    margin-top: 24rpx;
+                    margin-bottom: 24rpx;
+                }
+                .use-product {
+                    padding: 0 20rpx;
+                    margin-bottom: 24rpx;
+                    width: 638rpx;
+                    height: 72rpx;
+                    line-height: 72rpx;
+                    background: #F7F7F7;
+                    border-radius: 8rpx;
+                    box-sizing: border-box;
+                    overflow: hidden;    
+                    text-overflow:ellipsis;    
+                    white-space: nowrap; 
                 }
+                .school-count {
+                    padding-left: 20rpx;
+                }
+                .school-adress {
+                    padding-left: 20rpx;
+                }
+            }
+        }
+    }
+}
+
+.popupBox {
+    position: relative;
+    width: 686rpx;
+    background: #FFFFFF;
+    border-radius: 24rpx;
+    overflow: hidden;
+    .closeBtn {
+        position: absolute;
+        top: 40rpx;
+        right: 40rpx;
+        width: 26rpx;
+        height: 26rpx;
+        object-fit: cover;
+    }
+    .title {
+        margin: 60rpx 0 32rpx;
+        height: 52rpx;
+        font-size: 38rpx;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 550;
+        color: #333333;
+        line-height: 52rpx;
+        text-align: center;
+    }
+    .course {
+        margin-left: 88rpx;
+        margin-bottom: 40rpx;
+        
+        .courseName {
+            position: relative;
+            padding-left: 30rpx;
+            width: 480rpx;
+            min-height: 44rpx;
+            font-size: 32rpx;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #333333;
+            line-height: 44rpx;
+            overflow: hidden;
+            .circle {
+                position: absolute;
+                display: block;
+                top: 16rpx;
+                left: 0;
+                width: 16rpx;
+                height: 16rpx;
+                object-fit: cover;
             }
         }
     }
+    .confirmBtn {
+        margin: 0 auto 60rpx;
+        width: 586rpx;
+        height: 84rpx;
+        line-height: 84rpx;
+        background: #1677FF;
+        border-radius: 84rpx;
+        font-size: 32rpx;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 550;
+        color: #FFFFFF;
+        text-align: center;
+    }
 }
 </style>

+ 0 - 1
src/pages/audit/needAudit.vue

@@ -38,7 +38,6 @@
 import Card from './card.vue'
 import { getNeedAudit, passOrRefuseAudit } from '@/api/audit.js'
 import Tip from '@/utils/tip.js'
-import { setLocalStorage } from '@/utils/wxTool.js'
 export default {
   name: 'NeedAudit',
   components: {

+ 1 - 1
src/pages/districtGarden/index.vue

@@ -105,7 +105,7 @@ export default {
         Tip.loading('加载中')
         const {data, status} = await getDistrictGarden({...this.pegation})
         Tip.loaded()
-        console.log('?????', data);
+        // console.log('?????', data);
         if (status === 200) {
             const { entityList } = data
             if (entityList.length === 0) {

二進制
src/static/image/circle.png


二進制
src/static/image/closeBtn.png


+ 12 - 4
src/wxcomponents/image/index.vue

@@ -1,7 +1,15 @@
 <template>
 <uni-shadow-root class="image-index"><view :style="computed.rootStyle({ width, height, radius })" :class="'custom-class '+(utils.bem('image', { round }))" @click="onClick">
-  <image v-if="(!error)" :src="src" :mode="computed.mode(fit)" :lazy-load="lazyLoad" class="image-class van-image__img" :show-menu-by-longpress="showMenuByLongpress" @load="onImageLoad" @error="onImageError"></image>
-
+  <image 
+    v-if="(!error)" 
+    :src="src" 
+    :mode="computed.mode(fit)" 
+    :lazy-load="lazyLoad" 
+    class="image-class van-image__img" 
+    :show-menu-by-longpress="showMenuByLongpress" 
+    @load="onLoad" 
+    @error="onError"
+  ></image>
   <view v-if="loading && showLoading" class="loading-class van-image__loading">
     <slot v-if="useLoadingSlot" name="loading"></slot>
     <van-icon v-else name="photo" custom-class="van-image__loading-icon"></van-icon>
@@ -62,13 +70,13 @@ VantComponent({
     viewStyle: '',
   },
   methods: {
-    onImageLoad(event) {
+    onLoad(event) {
       this.setData({
         loading: false,
       });
       this.$emit('load', event.detail);
     },
-    onImageError(event) {
+    onError(event) {
       this.setData({
         loading: false,
         error: true,

+ 1 - 1
src/wxcomponents/notify/index.vue

@@ -1,5 +1,5 @@
 <template>
-<uni-shadow-root class="notify-index"><van-transition name="slide-down" :show="show" custom-class="van-notify__container" :custom-style="computed.rootStyle({ zIndex, top })" @click.native="onTap">
+<uni-shadow-root class="notify-index"><van-transition name="slide-down" :show="showNotify" custom-class="van-notify__container" :custom-style="computed.rootStyle({ zIndex, top })" @click.native="onTap">
   <view :class="'van-notify van-notify--'+(type)" :style="computed.notifyStyle({ background, color })">
     <view v-if="safeAreaInsetTop" :style="'height: '+(statusBarHeight)+'px'"></view>
     <text>{{ message }}</text>