hlm_pl_mall_h5/pages/member/vrbuy/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" v-if="store_final_total_list.goods_info.virtual_type==0"><flex-line class="field-line" :show-border="true"><text class="span field-name">手机号</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="buyer_phone" placeholder="请填写手机号" /></view></flex-line></view>
        <checkout-store class="section-header" :storeCartList="store_final_total_list.goods_info" @selectVoucher="selectVoucher" @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/memberVrBuy'
import CheckoutStore from './child/CheckoutStore'
import flexLine from '../../flexLine'
export default {
  name: 'Step1',
  components:{
      TitleHeader,
      MemberBase,
      flexLine,
    CheckoutStore
  },
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().top
  // #endif
  },
  computed:{
  fontSize(){
    return getFontSize()
  },
  },
  data(){
    return {
    navHeight: 0,
    dialog:{},
    pintuan_id:0,
      pintuangroup_id:0,
      goods_id: '',
      quantity: '',
      buyer_phone: '',
      store_final_total_list: null,
      message: ''
    }
  },
  onLoad: function (option) {
    this.goods_id=option.goods_id ? option.goods_id : ''
      this.quantity=option.quantity ? option.quantity : ''
      this.pintuan_id=option.pintuan_id
      this.pintuangroup_id=option.pintuangroup_id
    this.getBuyInfo()
  },
  methods:{
    closeDialog(){
    },
    confirmDialog(value){
    },
    // 获取订单信息
    getBuyInfo () {
      let extra = {}
      if (this.pintuan_id) {
          extra['pintuan_id'] = this.pintuan_id
          extra['pintuangroup_id'] = this.pintuangroup_id
      }
      buyStep1(
        this.goods_id, this.quantity, extra
      ).then((res) => {
        if (res.code === 10000) {
          this.store_final_total_list = res.result
        } else {

        }
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    goBack () {
      uni.navigateBack({delta:1})
    },
    selectVoucher (voucherInfo) {
      this.store_final_total_list.goods_info.store_voucher_info = voucherInfo
    },
    goAddress () {
      if (this.store_final_total_list.address_info) {
        uni.navigateTo({ url: '/pages/member/address/AddressList' })
      } else {
        uni.navigateTo({ url: '/pages/member/address/AddressForm'+'?'+urlencode( { action: 'add',isFromCheckout: true,goBackLevel: 1 })})
      }
    },
    changeMessage (message, store_id) {
      this.message = message
    },
    // 提交订单
    checkout () {
      let goods_id = this.goods_id
      let quantity = this.quantity
      let buyer_phone = this.buyer_phone
      let buyer_msg = this.message

      if (this.store_final_total_list.goods_info.virtual_type==0 && !buyer_phone) {
        this.dialog={content:'您需要先去填写手机号'}
        this.$refs.confirm.open()
        return
      }

      let extra = {}
      if (this.pintuan_id) {
          extra['pintuan_id'] = this.pintuan_id
          extra['pintuangroup_id'] = this.pintuangroup_id
      }
      // 处理格式
      let voucher = this.store_final_total_list.goods_info.store_voucher_info.vouchertemplate_id + '|' + this.store_final_total_list.goods_info.store_id + '|' + this.store_final_total_list.goods_info.store_voucher_info.voucher_price
      extra['voucher'] = voucher
      buyStep2(goods_id, quantity, buyer_phone, buyer_msg, extra
      ).then((res) => {
        // 跳转到支付界面
        let pay_sn = res.result.order_sn
        uni.redirectTo({ url: '/pages/member/buy/pay'+'?'+urlencode( { pay_sn: pay_sn, pay_type: 'vr_pay_new'  })})
        }).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 {
        height: 5rem;
    }
    .goods {
        height: 4.5rem;
    }
    .item {
        height: 2.5rem;
    }
    .section-header {
        margin-top: 0.4rem;
    }
    .section-footer {
        margin-bottom: 0.4rem;
    }
    .comment {
        height: 7.25rem;
    }
    .desc {
        background-color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
    }
    .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>