warm_man/pages/Order/info.vue

<template>
  <view class="body-background"></view>
  <u-navbar
      :title="title"
      :auto-back="true"
      left-icon-size="40rpx"
      :safe-area-inset-top="true"
      :placeholder="true"
      bgColor="#ffffff"
  ></u-navbar>
<view class="wallpaper-container"></view>
<view class="wallpaper-body">
  <view class="order-item-info-container">
    <u-cell-group :border="false">
      <view class="info-label">
        <u-text text="配送信息" color="#FF9545" size="32"></u-text>
      </view>
      <u-cell border custom-style="align-items:flex-start;margin-bottom:20rpx;">
        <template #icon>
          <view class="icon-label row col address">
            <u-text text="收货地址" color="#020B18" size="32"></u-text>
          </view>
        </template>
        <template #title>
          <view class="title">
            <u-text :text="detail.take_address" color="#020B18" size="28"></u-text>
          </view>
        </template>
        <template #label>
          <view class="label row">
            <view class="name" style="margin-right:36rpx;">
              <u-text :text="detail.take_name" color="#666666" size="28"></u-text>
            </view>
            <view class="phone">
              <u-text :text="detail.take_phone" color="#666666" size="28"></u-text>
            </view>
          </view>
        </template>
      </u-cell>
      <view class="info-label">
        <u-text text="商品信息" color="#FF9545" size="32"></u-text>
      </view>
      <u-cell border custom-style="align-items:flex-start;">
        <template #icon>
          <view class="icon-label row col item-info-icon" style="margin-right:12rpx;">
            <u-image :src="detail.goods_cover" width="176" height="176" mode="widthFix" radius="24"></u-image>
          </view>
        </template>
        <template #title>
          <view class="title-container row">
            <view class="item-info row">
              <view class="item-title">
                <u-text :text="detail.goods_name" color="#020B18" size="28"></u-text>
              </view>
              <view class="item-title info-price">
                <view class="price-number row">
                  <view class="price">
                    <u-text :text="detail.coin_number" color="#FF9545" size="32" bold></u-text>
                  </view>
                  <view class="label">
                    <u-text text="币" color="#020B18" size="26"></u-text>
                  </view>
                </view>
              </view>
            </view>
            <view class="label-group row">
              <view class="label row">
                <view class="content">
                  <u-text text="规格:" color="#666666" size="26"></u-text>
                </view>
                <view class="value">
                  <u-text :text="detail.goods_spec" color="#666666" size="26"></u-text>
                </view>
              </view>
              <view class="label row">
                <view class="content">
                  <u-text text="数量:" color="#666666" size="26"></u-text>
                </view>
                <view class="value">
                  <u-text :text="detail.goods_number+'件'" color="#666666" size="26"></u-text>
                </view>
              </view>
            </view>
          </view>
        </template>
      </u-cell>
      <view class="cell price-info">
<!--        <view class="cell-item row">-->
<!--          <view class="label">-->
<!--            <u-text text="运费" color="#020B18" size="30"></u-text>-->
<!--          </view>-->
<!--          <view class="value">-->
<!--            <u-text text="0" mode="price" color="#020B18" size="32"></u-text>-->
<!--          </view>-->
<!--        </view>-->
        <view class="cell-item row">
          <view class="label">
            <u-text text="支付方式" color="#020B18" size="30"></u-text>
          </view>
          <view class="value">
            <u-text text="全暖新币兑换" color="#020B18" size="32"></u-text>
          </view>
        </view>
        <view class="cell-item row">
          <view class="label">
            <u-text text="实付暖新币" color="#020B18" size="30"></u-text>
          </view>
          <view class="value">
            <u-text :text="detail.coin_number+'币'" color="#FF9545" size="32"></u-text>
          </view>
        </view>
      </view>
      <view class="cell pay-info">
        <view class="cell-item row">
          <view class="label">
            <u-text text="订单编号" color="#020B18" size="30"></u-text>
          </view>
          <view class="value" @click="copyContent(detail.no)">
            <u-text :text="detail.no" color="#999999" size="30"></u-text>
          </view>
        </view>
        <view class="cell-item row">
          <view class="label">
            <u-text text="创建时间" color="#020B18" size="30"></u-text>
          </view>
          <view class="value">
            <u-text :text="detail.create_time" color="#999999" size="30"></u-text>
          </view>
        </view>
        <view class="cell-item row">
          <view class="label">
            <u-text text="兑换时间" color="#020B18" size="30"></u-text>
          </view>
          <view class="value">
            <u-text :text="detail.create_time" color="#999999" size="30"></u-text>
          </view>
        </view>
      </view>
    </u-cell-group>
  </view>
  <view class="tip row">
    <view class="left">
      <view class="import-tip row">
        <view class="icon row col">
          <u-icon name="info-circle" color="#FF9545" size="32"></u-icon>
        </view>
        <view class="title">
          <u-text text="重要提示" color="#666666" size="28"></u-text>
        </view>
      </view>
    </view>
    <view class="right">
      <u-text text="退换货请联系客服" color="#666666" size="28"></u-text>
    </view>
  </view>
</view>
  <view class="foot-phone row">
    <view class="foot-phone-container">
      <view class="label">
        <u-text text="售后联系电话" color="#666666" size="28" align="center"></u-text>
      </view>
      <view class="phone">
        <u-text :text="detail.tel" color="#666666" size="28" align="center"></u-text>
      </view>
      <view class="phone-button" @click="callPhone(detail.tel)">
        <view class="button phone  col">
          <u-icon name="phone-fill" size="40" color="#fff"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {orderItemInfo} from "@/api/user";

export default {
  data() {
    return {
      title: '订单详情',
      detail: {
        goods_name:'',
        no:'',
        goods_cover:'',
        goods_spec:'',
        goods_number:'',
        coin_number:'',
        take_name:'',
        take_phone:'',
        take_address:'',
        create_time:'',
        send_time:'',
        tel:'',
      },
    }
  },
  onLoad(option) {
    this.getDetail(option.id)
  },
  methods: {
    navTo(url) {
      uni.navigateTo({
        url: url
      })
    },
    getDetail(id) {
      orderItemInfo({
        goods_order_id : id
      }).then(res => {
        this.detail = res.data;
      });
    },
    callPhone(phone){
      uni.makePhoneCall({
        phoneNumber: phone?.toString()
      });
    },
    copyContent(content){
      uni.setClipboardData({
        data: content,
        success: function () {
          //调用方法成功
        }
      })
    },
  },
}
</script>

<style lang="scss">
@import './components/info.scss';
</style>