zhouwenxuan
2023-09-06 0b2357a173a2bc52f3532bfcf93ff31daf226231
pages/tabBar/notice/measures.vue
@@ -6,12 +6,13 @@
         <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
         <!-- 真正的导航栏内容 -->
         <view class="navBar">
            <u-icon name="arrow-left" color="black" size="17" @click="goBack" />
            <view class="barText">响应措施反馈</view>
         </view>
      </view>
      <view style="display: flex;flex-direction: column; padding: 10px 15px;">
      <view class="measureCard">
         <view class="first">
            <text style="font-size: 16px;margin-bottom: 20px;">基础措施</text>
            <text style="font-size: 16px;margin-bottom: 20px;"><text style="color: red;">*</text>基础措施</text>
             <u-checkbox-group
                        v-model="checkboxValue1"
                        placement="column"
@@ -21,8 +22,8 @@
                            :customStyle="{marginBottom: '8px'}"
                            v-for="(item, index) in list"
                            :key="index"
                            :label="item.name"
                            :name="item.name"
                            :label="item.measure"
                            :name="item.id"
                        >
                        </u-checkbox>
                    </u-checkbox-group>
@@ -42,16 +43,23 @@
                  :maxCount="10"
                  style="margin-top: -10px;"
               ></u-upload>
               <view class="pic" v-for="item in nameList" :key="index">
                  {{item.name}}
               <view :class="{pic: nameList.length>0}">
                  <view class="picItem" v-for="(item,index) in nameList" :key="index">
                     <image src="../../../static/pic.png">
                     {{item.name}}
                  </view>
               </view>
         </view>
         <u-button class="btn" type="success">提交</u-button>
      </view>
      <view class="measures">
      <u-button  class="measureBtn" type="primary" @click="submit">提交</u-button>
      </view>
   </view>
</template>
<script>
   import { measureList, submitMeasures, getMeasureDetail } from '@/api/notice.js'
   import VUE_APP_BASE_URL from '../../../common/constant.js'
   export default {
      components:{
         
@@ -61,36 +69,78 @@
            statusBarHeight: [],
            fileList1: [],
            nameList: [],
            checkboxValue1: '',
            checkboxValue1: [],
            measures: "",
            type: 'textarea',
            border: true,
            height: 100,
            autoHeight: true,
            list: [
               {
                  name: '苹果',
                  disabled: false
               },
               {
                  name: '香蕉',
                  disabled: false
               },
               {
                  name: '橙子',
                  disabled: false
               }
            ]
            detailData : {},
            measureIds : [],
            baseUrl: VUE_APP_BASE_URL,
            list: [],
            showBtn: false
         }
      },
      onLoad() {
      onLoad(options) {
         let test = options.data && JSON.parse(decodeURIComponent(options.data));
         console.log("test",test)
         this.detailData = test;
         //获取手机状态栏高度
         this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
         uni.hideTabBar();
         this.getMeasureList();
      },
      methods: {
         getMeasureList() {
            const param = {
               pageIndex: 1,
               pageSize: 10000,
            }
            measureList(param).then(res => {
               if(res.code == 100){
                  this.list = res.data;
               }
            }).catch(err=>{})
         },
         goBack() {
            uni.navigateBack({
                url:'./detail/detail'
            });
         },
         checkboxChange(n) {
            console.log('change', n);
             let finalArr = this.list.filter(item => !(n.indexOf(item.id) < 0));
            this.measureIds = finalArr.map((item) => {
              return {id: item.id, baseMeasureContent: item.measure};
            });
            console.log('change', this.measureIds);
         },
         submit() {
            if(this.measureIds.length <0) {
               uni.showToast({
                  icon: "none",
                  title: '请勾选基础措施'
               });
               return;
            }
            const param = {
               id: this.detailData.id,
               baseMeasures: this.measureIds,
               responseMeasure: this.measures
            }
            submitMeasures(param).then(res => {
               if(res.code == 100){
                  uni.showToast({
                     icon: "none",
                     title: '提交成功'
                  });
                  this.goBack();
               }else{
                   uni.$u.toast(res.msg)
               }
            })
         },
         // 删除图片
         deletePic(event) {
@@ -127,11 +177,16 @@
         uploadFilePromise(url) {
            return new Promise((resolve, reject) => {
               let a = uni.uploadFile({
                  url: 'http://www.example.com', // 仅为示例,非真实的接口地址
                  url: VUE_APP_BASE_URL + '/attachment/uploadMeasureImage/key',
                  filePath: url,
                  name: 'file',
                  header: {
                     'tk':uni.getStorageSync('tk'),
                     'uid': uni.getStorageSync('uid')
                  },
                  formData: {
                     user: 'test'
                     id: this.detailData.id,
                     module: 'naturalDisasterPath'
                  },
                  success: (res) => {
                     setTimeout(() => {
@@ -148,12 +203,31 @@
<style lang='scss' scoped>
.navBarBox .navBar {
   background-color:lightgrey;
   height: 25px;
  background-color:#fff;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);
}
.barText{
  /* margin-left: 20px; */
  text-align: center;
  width: 85%;
  font-size: 16px;
  /* text-align: center; */
  font-weight: 600;
}
.measureCard{
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   background: #fff;
   box-shadow: 0 3px 12px rgba(0,0,0,0.05);
   margin: 12px 12px 20px;
   border-radius: 5px;
   padding: 30px 12px;
}
.fix{
   position: sticky;
@@ -173,7 +247,7 @@
.second{
   display: flex;
   flex-direction: column;
   margin-top: 50px;
   margin-top: 30px;
}
.third{
   display: flex;
@@ -188,9 +262,29 @@
   display: flex;
   flex-direction: column;
   background-color: rgb(242,242,242);
   padding: 5px 8px;
}
.picItem{
   font-weight: 500;
   margin-top: 5px;
   font-size: 14px;
   display: flex;
   image{
      width: 20px;
      height: 20px;
      margin-right:3px;
   }
}
.measures{
   margin-top: 50px 12px 0;
   padding: 0 12px;
   .measureBtn{
      border-radius: 5px;
      box-shadow: 0 3px 12px rgba(33,239,102,0.4);
   }
}
/* .btn{
   position: fixed;
   bottom: var(--window-bottom, 1);