zhibo/pages_user/user/pay.vue

<template>
  <view class="content">
    <view class="top">
      <view class="inner">
        <view class="pay">
          <view class="title">
            <text class="name">付款给 芳华佳选</text>
            <text class="desc">微信收款</text>
          </view>
          <view class="pay-money">
            <view class="pay-money-title">支付金额</view>
            <view class="money">
              <text class="fh">¥</text>
              <input v-model="money"  class="uni-input"  @input="testMoney" type="digit" focus   />
            </view>
            <textarea class="desc" placeholder="请填写备注说明" maxlength="20" v-model="desc" />
          </view>
        </view>
      </view>
      <view class="btn-box">
        <view class="btn" @click="pay()">确认支付</view>
      </view>
    </view>
    <view class="ad">
      <ad unit-id="adunit-a018415a6deb69e8"></ad>
    </view>

  </view>
</template>

<script>
import {payment} from '@/api/payment'
export default {
  data() {
    return {
      companyUserId:null,
      companyId:null,
      desc:"",
      money:null,
      wxPay: true,
    }
  },
  onLoad: function(options) {
    //   if (options.hasOwnProperty('q') && options.q) {
    //   	// 通过下面这步解码，可以拿到url的值
    //   	const url = decodeURIComponent(options.q)
    //   	this.url=url;
    //   	// // 对url中携带的参数提取处理
    //   	const obj = this.utils.urlToObj(url)
    // console.log(obj)
    //   	this.companyId=obj.companyId;
    // this.companyUserId=obj.companyUserId;
    //   }
    this.companyId=options.companyId;
    this.companyUserId=options.companyUserId;
  },
  onShareAppMessage(res) {
    return {
      title: '御君方-收款',
      path: `/pages_user/user/pay?companyId=`+this.companyId+"&companyUserId="+this.companyUserId
    }
  },
  methods: {
    testMoney(e){
      let that = this;
      let price = e.detail.value
      if (price.indexOf(".") == 0) {
        //'首位小数点情况'
        price = price.replace(/[^$#$]/g, "0.");
        price = price.replace(/\.{2,}/g, ".");
      }
      price = price.match(/^\d*(\.?\d{0,2})/g)[0] || null;
      //重新赋值给input
      this.$nextTick(() => {
        this.money = price;
      });

    },
    pay(){
      if(this.money==null){
        uni.showToast({
          icon:'none',
          title: "请输入支付金额"
        });
        return;
      }
      uni.login({
        success: res => {
          console.log(res)
          this.payment(res.code);
        }
      });
    },
    payment(code){
      var data = {payMoney:this.money,remark:this.desc,code:code,companyId:this.companyId,companyUserId:this.companyUserId};
      var that=this;
      uni.showLoading();
      payment(data).then(
          res => {
            if(res.code==200){
              console.log(res);
              var result=JSON.parse(res.result);
              uni.requestPayment({
                provider: 'wxpay',
                timeStamp: result.timeStamp,
                nonceStr: result.nonceStr,
                package: result.package,
                signType: result.signType,
                paySign: result.paySign,
                success: function(res) {
                  uni.hideLoading();
                  uni.redirectTo({
                    url:"./success"
                  })
                },
                fail: function(err) {
                  uni.showToast({
                    icon:'none',
                    title:'fail:' + JSON.stringify(err),
                  });
                  console.log('fail:' + JSON.stringify(err));
                  uni.hideLoading();
                }
              });
              // uni.requestPayment({
              // 	provider: 'wxpay',
              // 	timeStamp: res.result.timeStamp,
              // 	nonceStr: res.result.nonceStr,
              // 	package: res.result.packageValue,
              // 	signType: res.result.signType,
              // 	paySign: res.result.paySign,
              // 	success: function(res) {
              // 		uni.hideLoading();
              // 	uni.showToast({
              // 		icon:'success',
              // 		title: "支付成功",
              // 	});
              // 	uni.navigateTo({
              // 		url:'./success'
              // 	})
              // 	},
              // 	fail: function(err) {
              // 		console.log('fail:' + JSON.stringify(err));
              // 		uni.hideLoading();
              // 	}
              // });
            }else{
              uni.showToast({
                icon:'none',
                title: res.msg,
              });
            }
          },
          rej => {}
      );

    }
  }
}
</script>

<style lang="scss">
page{
  height: 100%;
  background-color: #f0eff4;
}
.content{
  height: 100%;
  display: flex;
  flex-direction: column;
  .top{
    flex:1;
    padding: 20rpx;
    .inner{
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      .pay{
        width: 100%;
        box-shadow: 1px 1px 5px #e6e6e6;
        background: #FFFFFF;
        border-radius: 5upx;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        .title{
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          width: 100%;
          background-color: #f7f7f7;
          padding: 30rpx 0rpx;
          .name{
            padding: 15rpx 30rpx;
            font-size: 32rpx;
          }
          .desc{
            color: #989898;
            padding: 15rpx 30rpx;
            font-size: 25rpx;
          }
        }
        .pay-money
        {
          padding: 30rpx 0rpx;
          width: 100%;
          background: #FFFFFF;
          border-radius: 5upx;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          .pay-money-title{
            padding: 15rpx 30rpx;
            font-size: 32rpx;
          }
          .money{
            font-size: 42rpx;
            padding: 15rpx 30rpx;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            input{
              margin-left: 15rpx;
            }
          }
          .desc{
            width: 100%;
            padding: 30rpx 30rpx;
            border-top: 1rpx solid #e6e6e6;
          }
          textarea {
            height:50rpx;
            line-height: 50rpx;
          }
        }
      }


    }
    .btn-box{
      padding: 30rpx 0rpx;
      height: 121upx;
      display: flex;
      align-items: center;
      justify-content: center;
      .btn{
        width: 91.73%;
        height: 88upx;
        line-height: 88upx;
        font-size: 30upx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
        text-align: center;
        background: #2BC7B9;
        border-radius: 44upx;
      }
    }
  }
  .ad{
    margin: 0rpx 0rpx 60rpx;
  }
}

</style>