classroom-music-activation/miniprogram/pages/orders/order-detail.wxml

<!--pages/orders/order-detail.wxml-->
<view class="container">
  <navigation-bar title="{{ goodsInfo.orderNo ? '订单详情' : '核对订单' }}"></navigation-bar>

  <scroll-view class="record-list" type="list" scroll-y>
    <view class="scroll-container">
      <view class="order-status" wx:if="{{statusList[status]}}">
        <view class="status">
          <image src="{{ statusList[status].logo }}"></image>
          <text>{{ statusList[status].title }}</text>
        </view>
        <view class="tips">{{ statusList[status].content }}</view>
      </view>

      <!-- 添加地址 -->
      <view wx:if="{{ hasInstrument && !goodsInfo.orderNo }}" class="addBuyer" bind:tap="onSelectAddress">
        <image src="./images/address-top.png" mode="widthFix" class="addressTop"></image>
        <view class="addBuyer-left">
          <image src="./images/icon-address.png" class="icon-man"></image>
          <view class="info" wx:if="{{ receiveAddress }}">
            <view class="users">
              {{ receiveAddressInfo.addressDetail }}
            </view>
            <view class="address">
              <text class="username">{{ receiveAddressInfo.name }}</text>
              <text>{{ receiveAddressInfo.phoneNumber }}</text>
            </view>
          </view>
          <view class="info" wx:else>
            <view class="users">
              新建收货地址
            </view>
            <view class="address">请填写您的收货地址与信息</view>
          </view>
        </view>
        <image src="./images/icon-arrow-right.png" class="arrow-right"></image>
      </view>

      <view class="order-content">
        <view class="item-content" wx:for="{{ goodsInfo.goodsList }}" wx:key="index">
          <image class='goods-icon' src="{{ item.pic }}" mode="" />
          <view class="goods-desc">
            <view class="goodsInfo">
              <view class="goods-name">{{ item.name }}</view>
              <view class="goods-current-price">¥<text>{{ item.originalPrice }}</text></view>
            </view>
            <view class="goods-type">
              <view>
                <text class="goods-card" wx:if="{{ item.typePeriod }}">{{ item.typePeriod }}</text>
              </view>
              <view class="goods-num">x 1</view>
            </view>
          </view>
        </view>

        <view class="goodsInfos">
          <view class="goodsInfo-item">
            <text class="title">商品总额</text>

            <view class="goods-price">
              <text class="stuff">¥</text>
              <text class="priceZ">{{ goodsInfo.originIntegerPart }}</text>
              <text class="priceF">.{{ goodsInfo.originDecimalPart }}</text>
            </view>
          </view>

          <view class="goodsInfo-item" wx:if="{{ goodsInfo.allOriginPrice > goodsInfo.allSalePrice }}">
            <text class="title">惊喜优惠</text>

            <!-- <view class="calc-price">-¥ {{ goodsInfo.allDiscountPrice }}</view> -->
            <view class="goods-price calc-price">
              <text class="stuff">-¥</text>
              <text class="priceZ">{{ goodsInfo.discountIntegerPart }}</text>
              <text class="priceF">.{{ goodsInfo.discountDecimalPart }}</text>
            </view>
          </view>

          <view class="qrcode-line"></view>

          <view class="goodsInfo-count">
            <view class="goods-price">
              <text class="before">共{{ goodsInfo.goodsList.length }}件：</text>
              <view class="gp"><text class="stuff">¥</text>
                <text class="priceZ">{{ goodsInfo.integerPart }}</text>
                <text class="priceF">.{{ goodsInfo.decimalPart }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="wechat-section" wx:if="{{ !goodsInfo.orderNo }}">
        <view class="wechat-left">
          <image src="./images/icon-wechat.png"></image>
          微信支付
        </view>

        <image src="./images/icon-checkbox.png" class="checkbox"></image>
      </view>


      <view class="order-time" wx:if="{{ goodsInfo.orderNo }}">
        <block wx:if="{{ receiveAddress }}">
          <template is="address" data="{{ receiveAddressInfo }}"></template>
          <view class="line"></view>
          <block wx:if="{{ isExpanded }}">
            <block wx:if="{{ userBeneficiaryId }}">
              <template is="schoolInfo" data="{{ userBeneficiaryInfo }}"></template>
              <view class="line" wx:if="{{ !receiveAddress }}"></view>
            </block>
            <template is="orderInfo" data="{{ goodsInfo }}"></template>
          </block>
        </block>
        <block wx:else>
          <block wx:if="{{ userBeneficiaryId }}">
            <template is="schoolInfo" data="{{ userBeneficiaryInfo }}"></template>
            <view class="line" wx:if="{{ !receiveAddress }}"></view>
          </block>
          <block wx:if="{{ isExpanded || !userBeneficiaryId }}">
            <template is="orderInfo" data="{{ goodsInfo }}"></template>
          </block>
        </block>

        <view class="order-item" bind:tap="onExpanded" wx:if="{{ userBeneficiaryId }}">
          <view class="title">更多信息</view>
          <view class="value {{ isExpanded ? 'expanded' : '' }}">
            {{ isExpanded ? '收起' : '展开' }}
            <image src="./images/icon-down.png" class="iconDown"></image>
          </view>
        </view>
      </view>
    </view>


    <view class="order-btn">
      <view class="more">
        <view class="price-section">
          <view class="price">
            <view class="desc">共计</view>
            <view class="currentPrice">
              <text class="stuff">¥</text>
              <text class="priceZ">{{ goodsInfo.integerPart }}</text>
              <text class="priceF">.{{ goodsInfo.decimalPart }}</text>
            </view>
            <block wx:if="{{ goodsInfo.allDiscountPrice > 0 }}">
              <text class="line"></text>
              <text class="discountPrice">优惠 ¥{{ goodsInfo.allDiscountPrice }}</text>
            </block>

          </view>
        </view>
        <button type="primary" bind:tap="onSubmit">{{ goodsInfo.orderNo ? '继续支付' : '提交' }}</button>
      </view>
    </view>
  </scroll-view>



  <van-popup show="{{ addressShow }}" safe-area-inset-bottom="{{false}}" lock-scroll="{{true}}" bind:close="onCloseAddress" position="bottom" round z-index="101" bind:after-leave="onAddressAfterLeave">
    <view class="addressContainer" wx:if="{{ !addressAfterLeave }}">
      <image src="./images/icon-close1.png" class="icon-close" bind:tap="onCloseAddress" />
      <view class="pop-address-title">
        {{ id ? '修改收货地址' : '新建收货地址' }}
      </view>

      <van-cell-group border="{{ false }}" class="cell-group">
        <van-field model:value="{{ name }}" label="收货人" placeholder="请填写收货人姓名" placeholder-style="color: #bbb" maxlength="50" />
        <van-field model:value="{{ phoneNumber }}" label="电话号码" type="number" placeholder-style="color: #bbb" placeholder="请输入手机号码" maxlength="11" />
        <van-field value="{{ provinceName ? provinceName + '/' + cityName + (regionName ? '/' + regionName : '' )  : '' }}" label="选择地区" placeholder-style="color: #bbb" placeholder="请选择省/市/区" readonly is-link bind:tap="onShowAreaList" />
        <van-field border="{{false}}" model:value="{{ detailAddress }}" label="详细地址" type="textarea" placeholder-style="color: #bbb" placeholder="请填写小区/楼号/单元/门牌号" input-class="textarea" autosize="{{ { maxHeight: 80, minHeight: 30 } }}" maxlength="100" />
      </van-cell-group>

      <view class="pop-btn-group">
        <button class="submit-btn" bind:tap="onOperationAddress">确认</button>
      </view>
    </view>
  </van-popup>

  <!-- 地区 -->
  <van-popup round="{{true}}" lock-scroll="{{true}}" z-index="{{103}}" show="{{showArea}}" position="bottom" safe-area-inset-bottom="{{false}}" bind:close="onCloseAreaList">
    <van-area id='area1' areaList="{{areaList}}" visible-item-count="9" item-height="46" value="{{ regionCode }}" bind:cancel="onCloseAreaList" bind:confirm="submitArea" />
  </van-popup>
  <!-- <service popShow="{{ showService }}" bind:changePop="changePop"></service> -->
</view>


<template name="address">
  <view class="order-item">
    <view class="title">收货人</view>
    <view class="value">{{ receiveAddressInfo.name }}</view>
  </view>
  <view class="order-item">
    <view class="title">电话号码</view>
    <view class="value">{{ receiveAddressInfo.phoneNumber }}</view>
  </view>
  <view class="order-item">
    <view class="title">收货地址</view>
    <view class="value">{{ receiveAddressInfo.addressDetail }}</view>
  </view>
</template>

<template name="schoolInfo">
  <view class="order-item">
    <view class="title">享用者姓名</view>
    <view class="value">{{ userBeneficiaryInfo.name }}</view>
  </view>
  <view class="order-item">
    <view class="title">电话号码</view>
    <view class="value">{{ userBeneficiaryInfo.phoneNumber }}</view>
  </view>
  <view class="order-item">
    <view class="title">学校信息</view>
    <view class="value">{{ userBeneficiaryInfo.schoolInfo }}</view>
  </view>

  <!-- name: beneficiary.name,
      phoneNumber: beneficiary.phone,
      schoolInfo: tempSchoolAddress.join('') -->
</template>

<template name="orderInfo">
  <view class="order-item">
    <view class="title">订单编号</view>
    <view class="value">{{ goodsInfo.orderNo }}
      <view class="copy" bind:tap="onCopy" data-orderno="{{goodsInfo.orderNo}}">复制</view>
    </view>
  </view>
  <view class="order-item">
    <view class="title">创建时间</view>
    <view class="value">{{ goodsInfo.createTime }}</view>
  </view>
</template>