功能开发

rk

2 天以前 38d111cb6defedff3bf06314ca30d22a01faae22

 mini-program/pages/details/details.vue

@@ -1,6 +1,6 @@
<template>
   <view class="box">
      <view class="item" v-if="item">
   <view class="box" v-if="item">
      <view class="item">
         <view class="item-tx">
            <image :src="item.fullImgurl" mode="widthFix"></image>
         </view>
@@ -36,7 +36,7 @@
            <view class="item-info-d" v-else>
               {{item.content}}
            </view>
            <view class="item-info-price">
            <view class="item-info-price" v-if="item.fee">
               <text>标准收费</text>
               <text>{{item.fee}}</text>
            </view>
@@ -48,16 +48,15 @@
            <text>擅长领域</text>
         </view>
         <view class="card-list">
            <view class="card-list-item" v-for="(child, index) in item.fieldList" :key="index">
               <view class="card-list-item-title">{{child.name}}：</view>
               <view class="card-list-item-text">{{child.remark}}</view>
            <view class="card-list-item">
               <text v-for="(child, index) in item.fieldList" :key="index">{{child.name}} <template v-if="item.fieldList.length- 1 !== index">、</template></text>
            </view>
         </view>
      </view>
      <view class="card">
      <view class="card" v-if="item.casesList">
         <view class="card-title">
            <view class="card-title-xian"></view>
            <text>优秀项目案例 (40)</text>
            <text>优秀项目案例 ({{item.casesList.length}})</text>
         </view>
         <view class="work">
            <view class="work-item" v-for="(child, index) in item.casesList" :key="index">
@@ -69,21 +68,27 @@
                  </view>
                  <view class="left-info">{{child.detail}}</view>
               </view>
               <view class="right">
                  <image src="/static/logo.png" mode="widthFix"></image>
               <view class="right" v-if="child.fileList && child.fileList.length > 0" @click="yulan(child.fileList)">
                  <image :src="child.fileList[0].url" mode="widthFix"></image>
                  <view class="right-num">共{{child.fileList.length}}张</view>
               </view>
            </view>
         </view>
      </view>
      <previewImage ref="previewImage" :opacity="1" :circular="true" :imgs="imgs" />
   </view>
</template>

<script>
   import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue';
   export default {
      components: { previewImage}, //注册插件
      data() {
         return {
            id: null,
            item: null,
				
            imgs: []
         };
      },
      onLoad(option) {
@@ -91,17 +96,38 @@
         this.getDetails()
      },
      methods: {
         yulan(arr) {
            this.imgs = arr.map(item => item.url)
            this.$refs.previewImage.open(this.imgs[0]);
            // uni.previewImage({
            //    current: url,
            //    urls: this.item.casesList[index].fileList.map(item => item.url),
            //    indicator: 'number'
            // })
         },
         zhankai() {
            this.item.zhankai = !this.item.zhankai
         },
         getDetails() {
            this.$u.api.memberDetail({
               id: this.id
            }).then(res => {
               if (res.code === 200) {
                  console.log(res)
                  res.data.isShow = false
                  if (res.data.content && res.data.content.length > 30) {
                     res.data.isShow = true
                     res.data.zhankai = false
                     res.data.contentCopy = res.data.content.substring(0, 30) + '...'
                  }
                  // let arr = []
                  // res.data.fieldList.forEach(item => {
                  //    if (item.remark) {
                  //       arr.push(item)
                  //    }
                  // })
                  // res.data.fieldList = arr;
                  if (res.data.casesList) {
                     this.imageUrls = res.data.casesList.map(item => item.url)
                  }
                  this.item = res.data
               }
@@ -176,18 +202,21 @@
            }
            .item-info-a {
               display: flex;
               align-items: center;
               align-items: flex-start;
               text {
                  &:nth-child(1) {
                     flex-shrink: 0;
                     font-weight: 600;
                     font-size: 30rpx;
                     color: #222222;
                  }
                  &:nth-child(2) {
                     width: 300rpx;
                     font-weight: 400;
                     font-size: 24rpx;
                     color: #777777;
                     margin-left: 10rpx;
                     margin-top: 7rpx;
                  }
               }
            }
@@ -195,7 +224,7 @@
               display: flex;
               flex-wrap: wrap;
               align-items: center;
               margin-top: 8rpx;
               margin-top: 16rpx;
               .item-info-b-row {
                  padding: 0 8rpx;
                  box-sizing: border-box;
@@ -207,8 +236,9 @@
                  font-size: 22rpx;
                  color: #2E68C4;
                  margin-right: 8rpx;
                  margin-bottom: 8rpx;
                  &:last-child {
                     margin: 0;
                     margin-right: 0;
                  }
               }
            }
@@ -223,20 +253,21 @@
                  align-items: center;
                  .item-info-c-item-label {
                     font-weight: 400;
                     font-size: 24rpx;
                     font-size: 26rpx;
                     color: #777777;
                  }
                  .item-info-c-item-val {
                     font-weight: 400;
                     font-size: 24rpx;
                     font-size: 26rpx;
                     color: #333333;
                  }
               }
            }
            .item-info-d {
               width: 100%;
               line-height: 40rpx;
               font-weight: 400;
               font-size: 24rpx;
               font-size: 26rpx;
               color: #333333;
               margin-top: 20rpx;
               text {
@@ -263,6 +294,7 @@
               margin-right: 12rpx;
            }
            text {
               line-height: 40rpx;
               font-weight: 600;
               font-size: 32rpx;
               color: #222222;
@@ -315,6 +347,22 @@
                  overflow: hidden;
                  border-radius: 8rpx;
                  margin-left: 20rpx;
                  position: relative;
                  .right-num {
                     position: absolute;
                     bottom: 0;
                     right: 0;
                     z-index: 9;
                     padding: 0 10rpx;
                     box-sizing: border-box;
                     height: 32rpx;
                     line-height: 32rpx;
                     background: rgba(0,0,0,0.5);
                     font-weight: 400;
                     font-size: 20rpx;
                     color: #FFFFFF;
                     border-radius: 20rpx 0rpx 8rpx 0rpx;
                  }
                  image {
                     width: 100%;
                  }
@@ -325,20 +373,17 @@
            width: 100%;
            .card-list-item {
               display: flex;
               flex-direction: column;
               margin-bottom: 20rpx;
               align-items: center;
               flex-wrap: wrap;
               margin-bottom: 30rpx;
               line-height: 40rpx;
               &:last-child {
                  margin: 0 !important;
               }
               .card-list-item-title {
                  font-weight: 500;
               text {
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #333333;
               }
               .card-list-item-text {
                  font-weight: 500;
                  font-size: 26rpx;
                  color: #666666;
               }
            }
         }