dage-sxk/pages/work/index.wxml

<view wx:if="{{info.globalVar}}" class='container'>
  <image class="work_bg {{!info.filterPath && 'filter'}}" src="{{cdn_url}}/scenes/{{id}}.jpg" mode="aspectFill" />
  <image class="work_bg_filter" wx:if="{{info.filterPath}}" src="{{cdn_url+info.filterPath}}" />
  <view class="w_body">
    <view class="top_bar" wx:if="{{projectid == 'ZHS2409020-1'}}">
      <view class="zoom_tip" wx:if="{{isZoom}}">
        <image src="/assets/img/img_tip.png" mode="widthFix" />
        <text style="font-size: 31rpx;">可左右滑动图片</text>
      </view>
      <view class="w_zoom" bindtap="zoom">
        <image src="{{isZoom ? '/assets/img/icon_zoomout.png' : '/assets/img/icon_zoomin.png'}}" mode="widthFix" />
        <text style="font-size: 31rpx;">{{isZoom ? '全图模式' : '大图模式'}}</text>
      </view>
    </view>
    <view wx:if="{{!isZoom}}" class="w_video"
      style="background-image: url({{cdn_url+info.resourceImg.bg}});{{info.resourceImg.style}}">
      <video wx:if="{{type=='0'}}" style="opacity:{{loadCompele?1:0}};{{info.resourceImg.imgStyle}}"
        bindloadedmetadata="loadcompele" src="{{url_link}}" loop autoplay controls="{{false}}"
        enable-progress-gesture="{{false}}"></video>
      <image wx:else style="opacity:{{loadCompele?1:0}};{{info.resourceImg.imgStyle}}" bindload="loadcompele"
        show-menu-by-longpress="true" src="{{url_link}}" mode="widthFix" />
      <block wx:if="{{projectid == 'ZHS2409020-1'}}">
        <view wx:for="{{confirmedIps}}" wx:key="id"
          class="ip-overlay {{item.typeIndex==3 ? 'ip-overlay-title':item.typeIndex==2?'ip-overlay-title':'' }} ip-overlay__confirmed confirmed-overlay"
          style="left:{{item.left}}px; top:{{item.top}}px; right:auto; bottom:auto;">
          <!-- 贴图 -->
          <image wx:if="{{item.typeIndex==1}}" class="ip-main" src="{{item.imgUrl}}"
            style="transform:scale({{item.scaleX}}, {{item.scaleY}}) rotate({{item.rotate}}deg) translateZ(0); will-change: transform;" bind:tap="selectConfirm" data-item="{{item}}"/>
          <!-- 标题 -->
          <view wx:if="{{item.typeIndex==2}}" class="ip-title-main"
            style="color:{{item.rgb}};transform:scale({{item.scaleX}}, {{item.scaleY}}) rotate({{item.rotate}}deg) translateZ(0); will-change: transform;"
             bind:tap="selectConfirm" data-item="{{item}}">{{item.title}}</view>
            <!-- 日期 -->
          <view wx:if="{{item.typeIndex==3}}" class="ip-title-main"
            style="color:{{item.rgb}};transform:scale({{item.scaleX}}, {{item.scaleY}}) rotate({{item.rotate}}deg) translateZ(0); will-change: transform;" bind:tap="selectConfirm" data-item="{{item}}">{{item.date}}</view>
        </view>
      </block>
      <!-- 可以操作的情况 -->
      <view wx:if="{{selectedIp && projectid == 'ZHS2409020-1'}}"
        class="ip-overlay {{tabIndex==3 ? 'ip-overlay-title':tabIndex==2?'ip-overlay-title':'' }} {{ipConfirmed ? 'ip-overlay__confirmed' : ''}}"
        style="opacity:{{positionInitialized?1:0}}; {{positionInitialized ? 'left:'+ipLeft+'px; top:'+ipTop+'px; right: auto; bottom: auto;' : ''}}">
        <!-- 贴图 -->
        <image wx:if="{{tabIndex==1}}" class="ip-main" src="{{selectedIp.imgUrl}}"
          style="transform:scale({{ipScaleX}}, {{ipScaleY}}) rotate({{ipRotate}}deg) translateZ(0); will-change: transform;"
          catchtouchstart="dragStart" catchtouchmove="dragMove" />
        <!-- 标题 -->
        <view wx:if="{{tabIndex==2}}" class="ip-title-main"
          style="color:{{rgb}};transform:scale({{ipScaleX}}, {{ipScaleY}}) rotate({{ipRotate}}deg) translateZ(0); will-change: transform;"
          catchtouchstart="dragStart" catchtouchmove="dragMove">{{titleDatas[titleDatas.length-1]}}</view>
        <!-- 日期 -->
        <view wx:if="{{tabIndex==3}}" class="ip-title-main"
          style="color:{{rgb}};transform:scale({{ipScaleX}}, {{ipScaleY}}) rotate({{ipRotate}}deg) translateZ(0); will-change: transform;"
          catchtouchstart="dragStart" catchtouchmove="dragMove">{{selectedDate}}</view>
        <image class="ip-btn ip-btn__rotate" src="/assets/img/icon_rorate.png" mode="widthFix"
          catchtouchstart="rotateStart" catchtouchmove="rotateMove" />
        <image class="ip-btn ip-btn__scale" src="/assets/img/icon_scale.png" mode="widthFix"
          catchtouchstart="scaleStart" catchtouchmove="scaleMove" />
        <image class="ip-btn ip-btn__delete" src="/assets/img/icon_delete.png" mode="widthFix" bindtap="deleteIp" />
        <image class="ip-btn ip-btn__confirm" src="/assets/img/icon_correct.png" mode="widthFix" bindtap="confirmIp" />
      </view>
    </view>

<!-- 大图模式 -->
    <view wx:else class="w_video fill-img">
      <scroll-view scroll-x="true" class="zoom-scroll" show-scrollbar="{{false}}" bindscroll="onZoomScroll">
        <image class="zoom-image" mode="heightFix" bindload="loadcompele" show-menu-by-longpress="true" src="{{url_link}}" />
      </scroll-view>
      <block wx:if="{{projectid == 'ZHS2409020-1'}}">
        <view wx:for="{{confirmedIps}}" wx:key="id" class="ip-overlay ip-overlay__confirmed confirmed-overlay" style="left:{{item.left}}px; top:{{item.top}}px; right:auto; bottom:auto;">
          <image class="ip-main" src="{{item.imgUrl}}" style="transform:scale({{item.scaleX}}, {{item.scaleY}}) rotate({{item.rotate}}deg) translateZ(0); will-change: transform;" />
        </view>
      </block>
      <view wx:if="{{selectedIp && projectid == 'ZHS2409020-1'}}" class="ip-overlay {{ipConfirmed ? 'ip-overlay__confirmed' : ''}}" style="opacity:{{positionInitialized?1:0}}; {{positionInitialized ? 'left:'+ipLeft+'px; top:'+ipTop+'px; right: auto; bottom: auto;' : ''}}">
        <image class="ip-main" src="{{selectedIp.imgUrl}}" style="transform:scale({{ipScaleX}}, {{ipScaleY}}) rotate({{ipRotate}}deg) translateZ(0); will-change: transform;" catchtouchstart="dragStart" catchtouchmove="dragMove" />
        <image class="ip-btn ip-btn__rotate" src="/assets/img/icon_rorate.png" mode="widthFix" catchtouchstart="rotateStart" catchtouchmove="rotateMove" />
        <image class="ip-btn ip-btn__scale" src="/assets/img/icon_scale.png" mode="widthFix" catchtouchstart="scaleStart" catchtouchmove="scaleMove" />
        <image class="ip-btn ip-btn__delete" src="/assets/img/icon_delete.png" mode="widthFix" bindtap="deleteIp" />
        <image class="ip-btn ip-btn__confirm" src="/assets/img/icon_correct.png" mode="widthFix" bindtap="confirmIp" />
      </view>
    </view>

    <!-- 编辑模式 -->
    <view wx:if="{{isEditing && projectid == 'ZHS2409020-1'}}" class="ip-list">
      <view class="tabList">
        <view class="tab {{tabIndex==1 ? 'tab_active' : ''}}" bindtap="handleTabTap" data-index="1">贴纸</view>
        <view class="tab {{tabIndex==2 ? 'tab_active' : ''}}" bindtap="handleTabTap" data-index="2">标题</view>
        <view class="tab {{tabIndex==3 ? 'tab_active' : ''}}" bindtap="handleTabTap" data-index="3">日期</view>
      </view>
      <scroll-view wx:if="{{tabIndex==1}}" scroll-y="true" class="ip-scroll" show-scrollbar="{{false}}">
        <view class="ip-grid">
          <view class="ip-item-wrapper" wx:for="{{ipsImgList}}" wx:key="name" data-index="{{index}}" bindtap="selectIp">
            <image class="ip-item {{selectedIpIndex === index ? 'ip-item__active' : ''}}" src="{{item.imgUrl}}"
              mode="aspectFit" />
          </view>
        </view>
      </scroll-view>
      <!-- 标题 -->
      <view class="titleTab" wx:if="{{tabIndex==2}}">
        <textarea class="titleArea" value="{{title}}" bindinput="onTitleInput" placeholder="请填写标题，最多不超过50个字"
          maxlength="50" />
        <view class="colorSelect">
          <text>字体颜色</text>
          <view class="color color1 {{rgbIndex==0 ? 'colorAc':''}}" bindtap="setColor" data-index="0"
            data-rgb="rgba(148, 216, 53, 1)"></view>
          <view class="color color2 {{rgbIndex==1 ? 'colorAc':''}}" bindtap="setColor" data-index="1"
            data-rgb="rgba(13, 121, 217, 1)"></view>
          <view class="color color3 {{rgbIndex==2 ? 'colorAc':''}}" bindtap="setColor" data-index="2"
            data-rgb="rgba(251, 158, 19, 1)"></view>
          <view class="color color4 {{rgbIndex==3 ? 'colorAc':''}}" bindtap="setColor" data-index="3"
            data-rgb="rgba(255, 114, 114, 1)"></view>
          <view class="colorSelectPick" bindtap="toPick">
            <image class="selfColor" src="/assets/img/icon_colorPick.png" mode="heightFix" />
            <text>自定义</text>
          </view>
          <color-picker bindchangeColor="pickColor" initColor="{{rgb}}" show="{{pick}}" bindclose="toPick" />
        </view>
        <view class="confirmBox">
          <view class="cConfirm" bindtap="saveTitle" data-index="{{titleDatas.length}}">添加</view>
        </view>
      </view>
      <!-- 日期 -->
      <view class='dateTab' wx:if="{{tabIndex==3}}">
        <picker-view class="date-picker" value="{{pickerValue}}" bindchange="onDateChange">
          <!-- 年份列 -->
          <picker-view-column>
            <view class="picker-item" wx:for="{{years}}" wx:key="index">{{item}}年</view>
          </picker-view-column>
          <!-- 月份列 -->
          <picker-view-column>
            <view class="picker-item" wx:for="{{months}}" wx:key="index">{{item}}月</view>
          </picker-view-column>
          <!-- 日期列 -->
          <picker-view-column>
            <view class="picker-item" wx:for="{{days}}" wx:key="index">{{item}}日</view>
          </picker-view-column>
        </picker-view>
        <view class="confirmBox">
          <view class="cConfirm" bindtap="selectIp" data-index="{{0}}">添加</view>
        </view>
      </view>

    </view>
    <view class="w_btn"
      style="height:{{info.rescan.height}};background:url({{cdn_url+info.rescan.bg}}) no-repeat center / cover">
      <view style="padding-left: 20rpx;" bindtap="edit"
        wx:if="{{projectid == 'ZHS2409020-1' && !isEditing && type!='0'}}">
        <image src="/assets/img/edit.png" mode="widthFix" />
      </view>
      <view class="btn_paise__border" wx:if="{{projectid == 'ZHS2409020-1' && !isEditing && type!='0'}}"
        style="background:{{info.rescan.borderColor}}" />
      <view bindtap="cancel">
        <image src="{{cdn_url}}/images/cancel.png" mode="widthFix" />
      </view>
      <view class="btn_paise__border" style="background:{{info.rescan.borderColor}}" />
      <view bindtap="saveAlbum">
        <image src="{{cdn_url}}/images/save.png" mode="widthFix" />
      </view>
    </view>
  </view>
  <wxml-to-canvas wx:if="{{widgetVisible}}" class="widget" id="widget" width="{{canvasWidth}}" height="{{canvasHeight}}"
    style="position: absolute; left: -9999px; top: 0;"></wxml-to-canvas>
</view>