cuiqian2004
2024-06-24 dc4e312fde92237060bc23c35016f4d6b7a9187e
pages/modal/5600.vue
@@ -1,304 +1,16 @@
<style>
   .v-headStyle:first-child {
      margin-top: 15rpx;
   }
   .v-headStyle .txt_title {
      font-size: 34rpx;
      text-align: right;
      display: inline-block;
      vertical-align: 12px;
   }
   .v-headStyle input {
      display: inline-block;
      /* border: 1px solid #d5d5d5; */
      /* width: 65%; */
      width: 85%;
      height: 52rpx;
      line-height: 34rpx;
      background: #FFF;
      border-radius: 0 !important;
      color: #2d8cf0;
      padding: 10rpx 8rpx 12rpx;
      font-size: 34rpx;
      font-family: inherit;
      box-shadow: none !important;
      transition-duration: 0.1s;
      margin-top: 4rpx;
   }
   .v-headStyle input::-webkit-input-placeholder {
      font-size: 12rpx;
   }
   .input-wrapper {
      border: 1px solid #d5d5d5;
      display: inline-block;
      width: 65%;
      line-height: 22rpx;
   }
   [nvue] uni-view {
      position: relative;
      border: 0 solid #000;
      box-sizing: border-box;
   }
   .uni-input {
      /* border: none; */
   }
   .uni-icon {
      /* border: 1px solid red; */
      width: 8%;
      font-family: uniicons;
      font-size: 40rpx;
      font-weight: 400;
      font-style: normal;
      /* width: 48rpx; */
      height: 48rpx;
      line-height: 48rpx;
      color: #2d8cf0;
      cursor: pointer;
      display: inline-block;
      vertical-align: 18rpx;
   }
   .view-content {
      min-height: 750rpx;
      /* border:1px solid red; */
   }
   .dv-panel {
      background-color: #efefef;
      padding: 20rpx 20rpx 4rpx 0px;
      border-radius: 12rpx;
      margin: 10rpx 0 20rpx 0;
      text-align: right;
      /* border: 1px solid red; */
   }
   .dv-panel-input {
      width: 100%;
      display: inline-block;
      text-align: left;
   }
   .dv-panel-input .dv-input {
      margin-bottom: 2rpx;
   }
   .dv-panel .txt_title {
      font-size: 34rpx;
      text-align: right;
      display: inline-block;
   }
   .dv-panel input {
      vertical-align: middle;
      display: inline-block;
      border: 1px solid #d5d5d5;
      width: 68%;
      height: 52rpx;
      line-height: 34rpx;
      background: #FFF;
      border-radius: 7px !important;
      color: #2d8cf0;
      padding: 6rpx 8rpx 8rpx;
      font-size: 32rpx;
      font-family: inherit;
      box-shadow: none !important;
      transition-duration: 0.1s;
      margin-top: 0rpx;
   }
   .dv-panel input::-webkit-input-placeholder {
      font-size: 10rpx;
   }
   .dv-panel .form-item-span {
      vertical-align: text-top;
      color: #2d8cf0;
      white-space: normal;
      word-break: break-all;
      display: inline-block;
      width: calc(100% - 100px);
   }
   .dv-panel-button {
      /* display: inline-block;
   margin-right: 20rpx; */
      width: 100%;
      text-align: left;
      padding-bottom: 20rpx;
   }
   .dv-panel-button checkbox-group {
      padding-left: 20px;
      display: inline-block;
   }
   .dv-panel-button button {
      text-align: left;
      line-height: 1.8;
      border: none;
      font-size: 34rpx;
      width: 180rpx;
      display: inline-block;
      float: right;
      text-align: center;
   }
   button.btn_cancel {
      width: 49.5%;
      margin-top: 50rpx;
      padding: 20rpx;
      line-height: 1.5;
      border: none;
      font-size: 38rpx;
      font-weight: bold;
      float: left;
      display: inline-block;
   }
   button.btn_add {
      width: 49.5%;
      margin-top: 50rpx;
      padding: 20rpx;
      line-height: 1.5;
      border: none;
      font-size: 38rpx;
      font-weight: bold;
      float: right;
      display: inline-block;
   }
   .logo {
      height: 100rpx;
      width: 460rpx;
      display: flex;
      margin: 38% auto;
   }
   .dv-border {
      border: 1px solid red;
   }
   .view-imagetext {
      text-align: center;
      width: 88%;
      padding: 20rpx 40rpx 0px 40rpx;
      /* border:1px solid red; */
   }
   .view-imagetext .view-imagetext-uploadlist {
      padding: 30rpx 0px 10rpx 0px;
      vertical-align: middle;
      display: inline-block;
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 100%;
      border: 2rpx solid transparent;
      border-radius: 8rpx;
      overflow: hidden;
      background: #fff;
      position: relative;
      /* box-shadow: 0 2rpx 2rpx rgba(0, 0, 0, 0.2);
  margin-right: 8rpx; */
   }
   .view-imagetext .txt-text {
      display: block;
      margin: 20rpx;
      font-weight: bold;
   }
   .view-detalist-centen {
      text-align: center;
      width: 100%;
   }
   .view-detalist-centen .txt-detalist {
      background: #94D5EF;
      display: block;
      width: 100%;
      font-size: 36rpx;
      line-height: 80rpx;
      font-weight: 500;
   }
   .panel-active {
      border: 2px solid red;
   }
   .bk-active {
      background-color: #D6FCB2;
   }
   #dv_select {
      display: inline-block;
      width: 66%;
      background: #FFF;
      border-radius: 0 !important;
      color: #2d8cf0;
      /* padding: 10rpx 8rpx 12rpx; */
      font-size: 34rpx;
      font-family: inherit;
      box-shadow: none !important;
      transition-duration: 0.1s;
      margin-top: 0rpx;
      vertical-align: 20rpx;
   }
   #dv_select .uni-select {
      border: 2rpx solid #ccc;
      border-radius: 0 !important;
      color: #2d8cf0;
   }
   #dv_select .uni-select__input-text {
      color: #2d8cf0;
   }
   .input-disabled {
      background-color: #f3f3f3 !important;
   }
</style>
<style lang="scss">
   .demo-uni-row {
      margin-bottom: 0px;
      display: block;
   }
   ::v-deep .uni-row {
      margin-bottom: 0px;
   }
   .view-tabpage ::v-deep .uni-row {
      margin-bottom: 5px;
   }
   .demo-uni-col {
      height: 36px;
      border-radius: 5px;
   }
   .demo-uni-row .uni-input {
      width: calc(100% - 120px);
   }
</style>
<template>
   <view class="content">
   <view class="uni-page-modal-5600">
      <!-- 表头样式 -->
      <view class="view-header">
      <view class="v-headStyle" v-for="(item,index) in head_styledef.form.items">
         <text class="txt_title" :style="{'width':item.labelWidth+'px'}">{{item.label}}:</text>
         <!-- 下拉框-单选 item.useDict?item.dict:item.selections-->
         <uni-data-select id="dv_select" v-if="item.name=='Select'" :class="item.disabled?'input-disabled':''"
            <!-- <uni-data-select class="dv_select" v-if="item.name=='Select'" :class="item.disabled?'input-disabled':''"
            v-model="item.value" :localdata="item.dict" @change="onEnterChange(item)" :disabled="item.disabled"
            :clear="false"></uni-data-select>
               :clear="false"></uni-data-select> -->
            <uni-data-picker class="dv_select"  v-if="item.name=='Select'" :class="item.disabled?'input-disabled':''"
               v-model="item.value"  :localdata="item.dict" @change="onEnterChange(item)" :readonly="item.disabled" :clear-icon="false" :popup-title="item.label" ></uni-data-picker>
         <view class="input-wrapper" v-if="item.name=='Input' || item.name=='InputNumber'">
            <text v-if="item.setting.prefix" class="uni-icon" :class="[item.setting.prefix]"
               @click="onEnterChange(item)">&#xe568;</text>
@@ -312,68 +24,24 @@
               @click="onEnterChange(item)">&#xe568;</text>
         </view>
      </view>
      <view class="view-content">
         <!-- 图文/文本 -->
         <view class="view-imagetext" v-if="param.Show_Welcom_Page==true">
            <div class="view-imagetext-uploadlist">
               <image :src="param.Welcome_Page.Img"
                  :style="{'width':param.Welcome_Page.Width+'px','height':param.Welcome_Page.Height+'px'}">
               </image>
               <text class="txt-text"
                  :style="{'color':param.Welcome_Page.Txt_Color,'font-size':param.Welcome_Page.Font_Size+'px','font-family':param.Welcome_Page.Font}">{{param.Welcome_Page.Text}}</Text>
            </div>
         </view>
      <view class="view-content">
         <!-- 码盘界面 -->
         <view v-if="param.Show_Welcom_Page==false">
         <view v-if="param.Show_Welcom_Page==false"  class="uni-panel-content">
            <!-- 页签 -->
            <view class="dv-tab">
               <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem"
                  styleType="button">
               </uni-segmented-control>
            </view>
            <swiper class="view-tabpage" :current="current" @change="changeSwiper">
            <!-- 码盘界面 -->
            <view class="view-tabpage" id="tabpanel" v-if="current==0">
               <swiper-item >
                  <view class="uni-panel-content">
                     <view class="view-tab-content" id="tabpanel">
               <image class="logo" v-if="detail1StyleDefList.length==0" src="../../images/mobox_log_200x40.png">
               </image>
               <!-- <div class="dv-panel">
                  <div class="dv-panel-input">
                     <div >
                        <text class="txt_title" style="width:100px">test:</text>
                        <span class="form-item-span" >1111</span>
                     </div>
                     <div >
                        <text class="txt_title" style="width:100px">test:</text>
                        <span class="form-item-span" >1111</span>
                     </div>
                     <div>
                        <uni-row class="demo-uni-row">
                           <uni-col :span="12">
                              <text class="txt_title dv-form-item-col" style="width:100px">test:</text>
                              <span class="form-item-span" >ffaaa</span>
                           </uni-col>
                           <uni-col :span="12">
                              <text class="txt_title dv-form-item-col" style="width:100px">test:</text>
                              <span class="form-item-span" >ffaaaffaaaffaaaffaaaffaaa</span>
                           </uni-col>
                        </uni-row>
                     </div>
                     <div>
                        <uni-row class="demo-uni-row">
                           <uni-col :span="12">
                              <text class="txt_title dv-form-item-col" style="width:100px">test:</text>
                              <span class="form-item-span" >fsfegfs</span>
                           </uni-col>
                           <uni-col :span="12">
                              <text class="txt_title dv-form-item-col" style="width:100px">test:</text>
                              <input type="number" class="uni-input input-margintop" style="width: calc(100% - 120px);"/>
                           </uni-col>
                        </uni-row>
                     </div>
                  </div>
                  <div class="dv-panel-button">
                     <button type="warn" @tap="delItem(0)">删除</button>
                  </div>
               </div> -->
               <div class="dv-panel" v-for="(style,ii) in detail1StyleDefList" @tap="onPanelClick(ii)"
                  :id="'tabpanel'+style.form.htmlobjId"
                  :class="style.form.htmlobjId==active_id?'bk-active':activelist[ii].active==true?'bk-active':''">
@@ -415,8 +83,16 @@
                  </div>
               </div>
            </view>
                     <view class="view-bottom" v-if="param.Sub_Page[0].OK_Button==true">
                        <button type="default" @tap="cancel" class="btn_cancel">取消</button>
                        <button type="primary" @tap="ok" class="btn_add">确定</button>
                     </view>
                  </view>
               </swiper-item>
            <!-- 已码盘界面 -->
            <view class="view-tabpage2" v-if="current==1">
               <swiper-item>
                  <view class="uni-panel-content">
                     <view class="view-tab-content">
               <image class="logo" v-if="detail2StyleDefList.length==0" src="../../images/mobox_log_200x40.png">
               </image>
               <div class="dv-panel" v-for="(style,ii) in detail2StyleDefList">
@@ -454,16 +130,34 @@
                  </div>
               </div>
            </view>
         </view>
      </view>
      <view v-if="current==0 && param.Sub_Page[0].OK_Button==true">
         <button type="default" @tap="cancel" class="btn_cancel">取消</button>
         <button type="primary" @tap="ok" class="btn_add">确定</button>
      </view>
      <view v-if="current==1 && param.Sub_Page[1].OK_Button==true">
                     <view class="view-bottom" v-if="param.Sub_Page[1].OK_Button==true"> <!--  -->
         <button type="default" @tap="cancel" class="btn_cancel">取消</button>
         <button type="primary" @tap="ok2" class="btn_add">确定</button>
      </view>
                  </view>
               </swiper-item>
            </swiper>
         </view>
         <!-- 图文/文本 -->
         <view class="view-imagetext" v-if="param.Show_Welcom_Page==true">
            <div class="view-imagetext-uploadlist">
               <image :src="param.Welcome_Page.Img"
                  :style="{'width':param.Welcome_Page.Width+'px','height':param.Welcome_Page.Height+'px'}">
               </image>
               <text class="txt-text"
                  :style="{'color':param.Welcome_Page.Txt_Color,'font-size':param.Welcome_Page.Font_Size+'px','font-family':param.Welcome_Page.Font}">{{param.Welcome_Page.Text}}</Text>
            </div>
         </view>
      </view>
         <!-- <view class="view-bottom" v-if="current==0 && param.Sub_Page[0].OK_Button==true">
         <button type="default" @tap="cancel" class="btn_cancel">取消</button>
         <button type="primary" @tap="ok" class="btn_add">确定</button>
      </view>
      <view class="view-bottom" v-if="current==1 && param.Sub_Page[1].OK_Button==true">
         <button type="default" @tap="cancel" class="btn_cancel">取消</button>
         <button type="primary" @tap="ok2" class="btn_add">确定</button>
      </view> -->
   </view>
</template>
@@ -500,6 +194,7 @@
         items: [],
         active_id: '',
         activelist: [],
         selectAttrObj:{},
      };
   },
   onLoad(options) {
@@ -549,6 +244,12 @@
               data = data[key2];
            });
         });
      },
      changeSwiper(evt) {
         let index = evt.target.current || evt.detail.current;
         this.setData({
            current: index
         })
      },
      async Head_UIStyleGetInfo(class_id, style_id) { //获取自定义表单样式
         var $this = this;
@@ -1988,3 +1689,338 @@
   },
};
</script>
<style  lang="scss">
.uni-page-modal-5600{
   display: flex;
   height: 100vh;
   width: 750rpx;
   flex-direction: column !important;
   .view-header{
      display: flex;
      width: 100%;
      flex-direction: column;
      margin-top: 15rpx;
   }
   .v-headStyle{
      width: 100%;
   }
   .view-content{
      display:flex;
      flex: 1;
      width: 100%;
      flex-direction: column;
      min-height: 100px;
   }
   .dv-tab {
      width: calc(100% - 30rpx);
      padding:0 15rpx;
   }
   .view-tabpage {
      width: 100%;
      flex: 1;
   }
   .view-tab-content{
      display:flex;
      flex: 1;
      width: calc(100% - 30rpx);
      padding:10rpx 15rpx;
      flex-direction: column;
      overflow-y: auto;
   }
   .uni-panel-content {
      display: flex;
      width: 100%;
      height: 100%;
      flex-direction: column !important;
   }
   .view-bottom{
      display:flex;
      flex-direction:row;
      width: calc(100% - 30rpx);
      padding:10rpx 15rpx 30rpx 15rpx;
   }
   .v-headStyle .txt_title {
      font-size: 34rpx;
      text-align: right;
      display: inline-block;
      vertical-align: 12px;
   }
   .v-headStyle input {
      display: inline-block;
      width: 85%;
      height: 52rpx;
      line-height: 34rpx;
      background: #FFF;
      border-radius: 0 !important;
      color: #2d8cf0;
      padding: 10rpx 8rpx 12rpx;
      font-size: 34rpx;
      font-family: inherit;
      box-shadow: none !important;
      transition-duration: 0.1s;
      margin-top: 4rpx;
   }
   .v-headStyle input::-webkit-input-placeholder {
      font-size: 12rpx;
   }
   .input-wrapper {
      border: 1px solid #d5d5d5;
      display: inline-block;
      width: 65%;
      line-height: 22rpx;
   }
   [nvue] uni-view {
      position: relative;
      border: 0 solid #000;
      box-sizing: border-box;
   }
   .uni-input {
      /* border: none; */
   }
   .uni-icon {
      /* border: 1px solid red; */
      width: 8%;
      font-family: uniicons;
      font-size: 40rpx;
      font-weight: 400;
      font-style: normal;
      /* width: 48rpx; */
      height: 48rpx;
      line-height: 48rpx;
      color: #2d8cf0;
      cursor: pointer;
      display: inline-block;
      vertical-align: 18rpx;
   }
   .dv-panel {
      background-color: #efefef;
      padding: 20rpx 20rpx 4rpx 0px;
      border-radius: 12rpx;
      margin: 10rpx 0 20rpx 0;
      text-align: right;
      /* border: 1px solid red; */
   }
   .dv-panel-input {
      width: 100%;
      display: inline-block;
      text-align: left;
   }
   .dv-panel-input .dv-input {
      margin-bottom: 2rpx;
   }
   .dv-panel .txt_title {
      font-size: 34rpx;
      text-align: right;
      display: inline-block;
   }
   .dv-panel input {
      vertical-align: middle;
      display: inline-block;
      border: 1px solid #d5d5d5;
      width: 68%;
      height: 52rpx;
      line-height: 34rpx;
      background: #FFF;
      border-radius: 7px !important;
      color: #2d8cf0;
      padding: 6rpx 8rpx 8rpx;
      font-size: 32rpx;
      font-family: inherit;
      box-shadow: none !important;
      transition-duration: 0.1s;
      margin-top: 0rpx;
   }
   .dv-panel input::-webkit-input-placeholder {
      font-size: 10rpx;
   }
   .dv-panel .form-item-span {
      vertical-align: text-top;
      color: #2d8cf0;
      white-space: normal;
      word-break: break-all;
      display: inline-block;
      width: calc(100% - 100px);
   }
   .dv-panel-button {
      /* display: inline-block;
   margin-right: 20rpx; */
      width: 100%;
      text-align: left;
      padding-bottom: 20rpx;
   }
   .dv-panel-button checkbox-group {
      padding-left: 20px;
      display: inline-block;
   }
   .dv-panel-button button {
      text-align: left;
      line-height: 1.8;
      border: none;
      font-size: 34rpx;
      width: 180rpx;
      display: inline-block;
      float: right;
      text-align: center;
   }
   button.btn_cancel {
      width: 49.5%;
      padding: 20rpx;
      line-height: 1.5;
      border: none;
      font-size: 38rpx;
      font-weight: bold;
      float: left;
      display: inline-block;
   }
   button.btn_add {
      width: 49.5%;
      padding: 20rpx;
      line-height: 1.5;
      border: none;
      font-size: 38rpx;
      font-weight: bold;
      float: right;
      display: inline-block;
   }
   .logo {
      height: 100rpx;
      width: 460rpx;
      display: flex;
      margin: 38% auto;
   }
   .dv-border {
      border: 1px solid red;
   }
   .view-imagetext {
      text-align: center;
      width: calc(100% - 80rpx);
      padding: 20rpx 40rpx 0px 40rpx;
      height:calc(100% - 30rpx);
      overflow: hidden;
   }
   .view-imagetext .view-imagetext-uploadlist {
      padding: 30rpx 0px 10rpx 0px;
      vertical-align: middle;
      display: inline-block;
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 100%;
      border: 2rpx solid transparent;
      border-radius: 8rpx;
      overflow: hidden;
      background: #fff;
      position: relative;
      /* box-shadow: 0 2rpx 2rpx rgba(0, 0, 0, 0.2);
  margin-right: 8rpx; */
   }
   .view-imagetext .txt-text {
      display: block;
      margin: 20rpx;
      font-weight: bold;
   }
   .view-detalist-centen {
      text-align: center;
      width: 100%;
   }
   .view-detalist-centen .txt-detalist {
      background: #94D5EF;
      display: block;
      width: 100%;
      font-size: 36rpx;
      line-height: 80rpx;
      font-weight: 500;
   }
   .panel-active {
      border: 2px solid red;
   }
   .bk-active {
      background-color: #D6FCB2;
   }
   .dv_select {
      display: inline-block;
      width: 66%;
      background: #FFF;
      border-radius: 0 !important;
      color: #2d8cf0;
      /* padding: 10rpx 8rpx 12rpx; */
      font-size: 34rpx;
      font-family: inherit;
      box-shadow: none !important;
      transition-duration: 0.1s;
      margin-top: 0rpx;
      vertical-align: 20rpx;
   }
   .dv_select .uni-select {
      border: 2rpx solid #ccc;
      border-radius: 0 !important;
      color: #2d8cf0;
   }
   .dv_select .uni-select__input-text {
      color: #2d8cf0;
   }
   .input-disabled {
      background-color: #f3f3f3 !important;
   }
   .demo-uni-row {
      margin-bottom: 0px;
      display: block;
   }
   ::v-deep .uni-row {
      margin-bottom: 0px;
   }
   .view-tabpage ::v-deep .uni-row {
      margin-bottom: 5px;
   }
   .demo-uni-col {
      height: 36px;
      border-radius: 5px;
   }
   .demo-uni-row .uni-input {
      width: calc(100% - 120px);
   }
}
</style>