warm_man/pages/Order/confirm.vue

<template>
  <view class="body-background"></view>
  <view class="head-background">
    <image mode="widthFix" :src="staticImage.bg" class="img" width="100%"/>
  </view>
  <u-navbar
      :title="title"
      :auto-back="true"
      left-icon-size="40rpx"
      :safe-area-inset-top="true"
      :placeholder="true"
      bgColor="transparent"
  ></u-navbar>
  <view class="address-container">
    <view class="cell row address-height">
      <view class="left">
        <view class="icon">
          <u-image mode="aspectFill" class="img" src="http://baidu.co/" height="100" width="100"></u-image>
        </view>
      </view>
      <view class="right row col">
        <view class="content no-address">
          <view class="title row col" v-if="address" @click="navTo('/pages/Address/index?type=select')">
            <view class="name">
              <u-text :text="address.name" color="#020B18" size="32" mode="name" lineHeight="50"></u-text>
            </view>
            <view class="phone">
              <u-text :text="address.phone" color="#020B18" size="32" mode="phone" lineHeight="50"></u-text>
            </view>
          </view>
          <view class="title" v-else @click="navTo('/pages/Address/index?type=select')">
            <u-text text="请选择收货地址" color="#020B18" size="32"></u-text>
          </view>
          <view class="desc" v-if="address">
            <u-text :text="address.address" color="#AFB5BE" size="28"></u-text>
          </view>
        </view>

        <view class="right-icon">
          <u-icon name="arrow-right" size="32" color="#020B18"></u-icon>
        </view>
      </view>
    </view>
    <view class="cell row order-info" :style="{height:size.height+'px'}">
      <view class="cell-label col-12">
        <u-text text="商品信息" color="#3D3D3D" size="32"></u-text>
      </view>
      <view class="cell-body row col-12">
        <view class="left">
          <view class="icon">
            <u-image mode="aspectFill" class="img" src="http://baidu.co/" height="180" width="180"
                     radius="20"></u-image>
          </view>
        </view>
        <view class="right row col">
          <view class="content no-address row">
            <view class="title row col" v-if="true">
              <u-text :text="detail.info.name" color="#020B18" size="32" lineHeight="42"></u-text>
            </view>
            <view class="title" v-else>
              <u-text text="请选择收货地址" color="#020B18" size="32"></u-text>
            </view>
            <view class="desc ext row">
              <view class="item row">
                <view class="label">
                  <u-text text="规格" color="#AFB5BE" size="28"></u-text>
                </view>
                <view class="value">
                  <u-text :text="detail.info.spec" color="#AFB5BE" size="28"></u-text>
                </view>
              </view>
              <view class="item row">
                <view class="label">
                  <u-text text="数量" color="#AFB5BE" size="28"></u-text>
                </view>
                <view class="value">
                  <u-text :text="detail.number+'件'" color="#AFB5BE" size="28"></u-text>
                </view>
              </view>

            </view>
          </view>

        </view>
      </view>
      <view class="price-info-container row col-12">
        <view class="label row col">
          <view class="icon">
            <u-image mode="aspectFill" class="img" :src="detail.info.image.url" height="40" width="40"
                     radius="20"></u-image>
          </view>
          <view class="title">
            <u-text text="全暖新币兑换" color="#020B18" size="28" lineHeight="28"></u-text>
          </view>
        </view>
        <view class="price-container row col">
          <view class="label">
            <u-text text="暖新币" color="#020B18" size="28" lineHeight="35" custom-style="margin-right:30rpx;"></u-text>
          </view>
          <view class="price">
            <u-text :text="detail.info.coin_number * detail.number" color="#FF9545" size="48" lineHeight="48"></u-text>
          </view>
          <view class="price-label">
            <u-text text="币" color="#FF9545" size="28" lineHeight="35"></u-text>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="foot-button border-box">
    <u-button
        type="primary"
        text="确认兑换"
        shape="circle"
        :custom-style="{
              color:'#020B18',
              backgroundColor:'#FF9545',
              border:'none',
              fontSize:'36',
              fontWeight:'400',
              height:'80rpx'
            }"
        @click="submit"
    ></u-button>
  </view>
</template>

<script>
import api from "@/utils/functions.js";
import {roomDetail} from "@/api/shop";
import {imghost} from "@/config/host";
import {submitGoodsOrder, userAddrList} from "@/api/user";

export default {
  computed: {},
  components: {},
  data() {
    return {
      title: '订单确认',
      size: {
        height: 0
      },
      detail: {
        number: 1,
        spec: 0,
        info: {}
      },
      address: {},
      staticImage: {
        bg: imghost + '/static/image/BG.png',
      },
      userInfo: {}
    }
  },
  onLoad(option) {
    this.detail = JSON.parse(option.info)
    console.log(this.detail)
  },
  onReady() {
    let that = this;
    let height = api.wxSystemInfo().system.windowHeight
    let headerHeight = uni.$u.getPx(44) + uni.$u.sys().statusBarHeight

    let info = uni.createSelectorQuery().in(this);
    info.select('.foot-button').boundingClientRect(function (data) {

    }).exec(function (res) {
    });
    info.select('.address-height').boundingClientRect(function (data) {

    }).exec(function (res) {
      let otherHeight = 0;
      res.forEach((item, index) => {
        otherHeight += item.height;
      });
      that.size.height = height - headerHeight - otherHeight - uni.$u.getPx('72rpx');
    });
  },
  methods: {
    navTo(url) {
      uni.navigateTo({
        url: url
      })
    },

    getDetail(id) {
      roomDetail({
        house_id: id
      }).then(res => {
        console.log(res.data)
        this.detail = res.data;
      });
    },
    submit() {
      let data = {
        spec_id:'',
        address_id:'',
        number:'',
      };
      data.spec_id = this.detail.info.id;
      data.number = this.detail.number;
      data.address_id = this.address.id;

      submitGoodsOrder(data).then(res => {
        if(res.code === 200){
          this.navTo('/pages/Order/done?id='+res.data.goods_order_id);
        }else{
          uni.$u.toast(res.msg)
        }
      })
    },
    getDefaultAddress() {
      let cacheAddress = uni.getStorageSync('address');
      if (cacheAddress.select) {
        this.address = cacheAddress;
      } else {
        userAddrList({}).then(res => {
          res.data.forEach(item => {
            if (item.is_default === 1) {
              this.address = item;
            }
          });
        })
      }
    }
  },
  onPageScroll(res) {

  },
  created() {

  },
  onShow() {
    this.getDefaultAddress();

  },
  mounted() {
    this.userInfo = this.$store.userInfo
    if (!this.userInfo) {
      this.userInfo = uni.getStorageSync('user');
    }

    console.log(this.userInfo)
    if (this.userInfo) {
      this.model.order.name = this.userInfo.name;
      this.model.order.id_card = this.userInfo.id_card;
      this.model.order.phone = this.userInfo.phone;
    }
  },
}
</script>

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