hlm_pl_mall_h5/pages/member/pointsbuy/step1.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
<member-base :show="false" ><view class="div container">
    <view class="div common-header-wrap">
        <view :style="'height:'+navHeight+'px'"></view>
        <view class="common-header-holder"></view>
        <view class="common-header-fixed">
        <title-header />
        <uni-nav-bar title="确认订单" class="common-header" left-icon="back" @clickLeft="goBack()">
        </uni-nav-bar>
    </view>
    </view>
    <view class="div body" v-if="store_final_total_list">
        <view class="div block-wrapper"><checkout-address v-if="addAddress" class="address" v-on:onclick="goAddress" :item="store_final_total_list.address_info"></checkout-address></view>
        <checkout-store class="section-header" :totalAmount="store_final_total_list.pointprod_arr.pgoods_pointall" :storeCartList="store_final_total_list.pointprod_arr.pointprod_list" @changeMessage="changeMessage"></checkout-store>
    </view>
    <view class="div bottom-wrapper" v-if="store_final_total_list">
        <view class="div amount-wrapper">
            <view class="div common-btn ds-button-large" @click="checkout">提交订单</view>
        </view>
    </view>
</view>
<uni-popup background-color="#fff" ref="confirm" type="dialog">
    <uni-popup-dialog :mode="dialog.mode" :title="dialog.title" :content="dialog.content" :placeholder="dialog.content" @confirm="confirmDialog" @close="closeDialog"></uni-popup-dialog>
</uni-popup>
</member-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import { urlencode } from '@/util/common'
import MemberBase from '../MemberBase'
import { buyStep1, buyStep2 } from '../../../api/memberPointscart'
import CheckoutAddress from './child/CheckoutAddress'
import CheckoutStore from './child/CheckoutStore'

export default {
  name: 'Step1',
  components:{
    TitleHeader,
    MemberBase,
    CheckoutAddress,
    CheckoutStore
  },
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().top
  // #endif
  },
  computed:{
  fontSize(){
    return getFontSize()
  },
  },
  data(){
    return {
      addAddress:false,
    navHeight: 0,
    dialog:{},
    buy_now:0,
      cart_id: '',
      store_final_total_list: null,

      message: ''
    }
  },
  onLoad: function (option) {
  this.buy_now=option.buy_now
    this.cart_id=option.cart_id ? option.cart_id : ''
  },
  onShow(){
    this.getBuyInfo()
  },
  methods:{
    closeDialog(){
    },
    confirmDialog(value){
    },
    // 获取订单信息
    getBuyInfo () {
      buyStep1(
        this.cart_id, this.buy_now ? 0 : 1
      ).then((res) => {
        if (res.code === 10000) {
          this.store_final_total_list = res.result
          this.addAddress=true
        } else {

        }
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    goBack () {
      uni.navigateBack({delta:1})
    },

    goAddress () {
      if (this.store_final_total_list.address_info) {
        uni.navigateTo({ url: '/pages/member/address/AddressList' })
      } else {
        this.addAddress=false
        uni.navigateTo({ url: '/pages/member/address/AddressForm'+'?'+urlencode( { action: 'add',isFromCheckout: true,goBackLevel: 2 })})
      }
    },
    changeMessage (message) {
      this.message = message
    },
    // 提交订单
    checkout () {
      let ifcart = this.buy_now ? 0 : 1
      let cart_id = this.cart_id
      let address_id = this.store_final_total_list.address_info ? this.store_final_total_list.address_info.address_id : 0
      let message = this.message

      if (!address_id) {
        this.dialog={content:'您需要先去添加收货地址'}
        this.$refs.confirm.open()
        return
      }

      buyStep2(
        cart_id,
        ifcart,
        address_id,
        message
      ).then((res) => {
        uni.redirectTo({ url: '/pages/member/pointsorder/OrderList' })
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    }

  }
}
</script>

<style scoped lang="scss">
    .block-wrapper{background: #fff;padding:0 $pageSpace}
    .container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
    }
    .header {
        height:2.2rem;
        color: #48505d;
        font-size:$h1;
        background-color: #fff;
        padding:0.1rem 0;
        border-bottom: 1px solid #e8eaed;
    }
    .body {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        margin-bottom:4rem;
    }
    .address {
    }
    .goods {
        height:4.5rem;
    }
    .item {
        height:2.5rem;
    }
    .section-header {
        margin-top:0.4rem;
    }
    .section-footer {
        margin-bottom:0.4rem;
    }
    .comment {
        height:7rem;
    }
    .desc {
        background-color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding-top:0.5rem;
        padding-bottom: 0.5rem;
    }
    .desc-item {
        height:1.5rem;
    }
    .bottom-wrapper {
        z-index: 1;
        background: #fff;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding:.5rem 0;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
    }
    .amount-wrapper {
        flex: 1;
        background-color: #fff;
        margin:0 $pageSpace;
    }
    .amount {
        flex: 1;
        font-size:$h2;
        color: $primaryColor;
        text-align: right;
        padding-right:0.75rem;
    }
    .submit {
        width:7.5rem;
        height:2.5rem;
        border-radius: 0;
    }
</style>