mobile_uniapp_mmhy/pages/payment/payment.vue

<template>
  <view class="payment">
    <view class="page">
      <u-toast ref="uToast" />
      <view class="layer">
        <view class="layerBox">
          <view class="status">
            <view>
              <view class="text" v-if="showData.status == 0">待付款</view>
              <view class="text" v-if="showData.status == 10">已付款</view>
              <view class="text" v-if="showData.status == 15">待发货</view>
              <view class="text" v-if="showData.status == 17"
                >有号码未发货</view
              >
              <view class="text" v-if="showData.status == 20">待开卡</view>
              <view class="text" v-if="showData.status == 25">已完成</view>
              <view class="text" v-if="showData.status == 30">申请退款</view>
              <view class="text" v-if="showData.status == 50">已关闭</view>
              <view class="text" v-if="showData.status == 60">无号码</view>
              <view class="text" v-if="showData.status == 70">换卡</view>
              <view class="text" v-if="showData.status == 80">争议单</view>
              <view class="text" v-if="showData.status == 90">已退款</view>
              <view class="text" v-if="showData.status == 100">退款驳回</view>
              <view class="time" v-if="showData.status == 0">
                剩余{{ showData.expire_time | countDown }}自动关闭
              </view>
            </view>
            <image
              src="../../static/img/image33.5312da34affa27840991.png"
              mode=""
            ></image>
          </view>
          <view class="icon">
            <view class="buttonType iconBox">
              <!-- <button open-type="contact" @click.stop="buttonType" style="box-shadow: none;">
						<image src="../../static/img/image34.886ab0b212f2893c0da6.png" mode=""></image>
						<text>客服</text>
					</button> -->
              <button
                open-type="byteHi"
                data-im-id="28040772090"
                style="box-shadow: none"
              >
                <image
                  src="../../static/img/image34.886ab0b212f2893c0da6.png"
                  mode=""
                ></image>
                <text>客服</text>
              </button>
            </view>
            <view class="iconBox" @tap="orderList()">
              <image
                src="../../static/img/image35.7dc7472cb7f4e8f75fa3.png"
                mode=""
              ></image>
              <text>查询更多订单</text>
            </view>
          </view>
          <view class="price">
            <view class="priceCon">
              <view class="title">{{ showData.no }}</view>
              <view class="text"
                >{{ showData.info.mobile.province }}
                {{ showData.info.mobile.city }}
                {{ showData.info.mobile.is_private ? "虚拟运营商" : "" }} ({{
                  showData.info.mobile.brand
                }})</view
              >
              <view class="priceNum">
                <view class="li">
                  <view class="name"> 活动价 </view>
                  <view
                    class="numbers"
                    v-if="showData.info.mobile.is_activity == 0"
                  >
                    ￥{{ showData.info.mobile.amount_base }}
                  </view>
                  <view class="numbers" v-else>
                    ￥{{ showData.info.mobile.amount_kill }}
                  </view>
                </view>
                <view class="li">
                  <view class="name"> 原价 </view>
                  <view class="numbers">
                    ￥{{ showData.amount_original }}
                  </view>
                </view>
                <view class="li">
                  <view class="name"> 预充 </view>
                  <view class="numbers"> ￥{{ showData.amount_charge }} </view>
                </view>
              </view>
              <view class="orderTit">套餐说明</view>
              <text lines="1" class="infoBox1">{{ showData.describe }}</text>
            </view>
          </view>

          <view class="form">
            <view class="orderTit">配送信息 <text></text></view>

            <view class="formInput">
              <u-form :model="form" label-width="160">
                <u-form-item label="姓名">
                  <u-input
                    v-model="showData.name"
                    disabled
                    placeholder-style="font-size:24rpx;"
                    :clearable="false"
                    placeholder=""
                  />
                </u-form-item>
                <u-form-item label="城市">
                  <view class="county">
                    {{ showData.address }}
                  </view>
                </u-form-item>
                <u-form-item label="快递名称" v-if="showData.trans_name">
                  <view class="county">
                    {{ showData.trans_name }}
                  </view>
                </u-form-item>
                <u-form-item label="快递单号" v-if="showData.trans_no">
                  <view class="county">
                    {{ showData.trans_no }}
                  </view>
                </u-form-item>
                <u-form-item label="联系电话" class="remark">
                  <u-input
                    v-model="showData.phone"
                    disabled
                    placeholder-style="font-size:24rpx;"
                    :clearable="false"
                    placeholder=""
                  />
                </u-form-item>
                <u-form-item label="备注" class="remark">
                  <u-input
                    v-model="showData.remark"
                    disabled
                    placeholder-style="font-size:24rpx;"
                    :clearable="false"
                    placeholder=" "
                  />
                </u-form-item>
              </u-form>
            </view>
            <view v-if="mixin_type == 'H5' && showData.status == 0">
              <view class="orderTit">支付方式</view>
              <view class="pay">
                <radio-group @change="radioChange">
                  <view class="li" @click="radioChange(1, 1)">
                    <image src="../../static/img/wx.png" mode=""></image>
                    <text>微信</text>
                    <radio
                      value="1"
                      style="float: right"
                      color="#DC3E48"
                      :checked="payType == 1"
                    />
                  </view>
                  <view class="li" @click="radioChange(2, 1)">
                    <image src="../../static/img/zfv.png" mode=""></image>
                    <text>支付宝</text>
                    <radio
                      value="2"
                      style="float: right"
                      color="#DC3E48"
                      :checked="payType == 2"
                    />
                  </view>
                </radio-group>
              </view>
            </view>
            <view class="orderTit">订单信息 <text></text></view>

            <view class="formInput">
              <u-form :model="form" label-width="160">
                <u-form-item label="订单号">
                  <u-input
                    v-model="showData.order_no"
                    disabled
                    placeholder-style="font-size:24rpx;"
                    :clearable="false"
                    placeholder="请输入真实姓名"
                  />
                </u-form-item>
                <u-form-item label="下单时间">
                  <view class="county" @tap="countyHide = !countyHide">
                    {{ showData.create_time | formatDate }}
                  </view>
                </u-form-item>
                <u-form-item label="订单金额" class="remark">
                  <u-input
                    v-model="'￥' + showData.amount"
                    disabled
                    placeholder-style="font-size:24rpx;"
                    :clearable="false"
                    placeholder="请输入备注信息"
                  />
                </u-form-item>
              </u-form>
            </view>

            <!-- <view class="orderTit">支付方式</view> -->
          </view>

          <view class="section18" v-if="showData.status == 0">
            <view class="box4">
              <text lines="1" class="word12">￥{{ showData.amount }}</text>
              <text lines="1" class="info8" @tap="apply()">确认支付</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <u-popup v-model="refund" mode="center" border-radius="14">
      <view class="refund">
        <image
          src="../../static/img/up.png"
          @tap="refund = false"
          class="label2"
        ></image>
        <view class="title"> 申请退款 </view>
        <view class="lobal">
          <text>*原因：</text>
          <u-input
            v-model="reason"
            placeholder-style="color:#D1D1D1"
            :clearable="false"
            :border="true"
            placeholder="请填写原因"
            type="textarea"
          />
        </view>
        <text class="text">
          填写备注(我们会在48小时之内审核并完成提偶俩门,如有疑问,可关注微信公众号:[美美号源]与我们联系)
        </text>
        <view class="btn" @tap="refundMet()"> 提交 </view>
      </view>
    </u-popup>
    <!-- 联系客服 -->
    <w-Load :wx="wx" v-on:childByValue="childByValue"></w-Load>
    <view class="popupBox">
      <view class="maskName" v-if="login_show"></view>
      <view class="newForm" v-if="login_show">
        <view class="alertContent">
          <view class="title">温馨提示</view>
          <view class="content">{{ login_content }}</view>
          <view
            class="u-flex u-col-center u-row-center btn"
            style="border-top: 1px solid #ececec"
          >
            <text style="border-right: 1px solid #ececec" @tap="login_cancel"
              >取消</text
            >
            <text
              style="color: #d52e4c"
              v-if="mixin_type == 'TOUTIAO'"
              @tap="userLogin"
              >确认</text
            >
            <button
              v-else
              style="
                box-shadow: none;
                background: transparent;
                box-sizing: border-box;
                width: 50%;
                border: 0px solid #f3f3f3;
                color: #d52e4c;
              "
              type="default"
              open-type="getPhoneNumber"
              @getphonenumber="decryptPhoneNumber"
            >
              确认
            </button>
          </view>
        </view>
      </view>
    </view>
    <u-popup v-model="copeHide" border-radius="20" mode="center">
      <view class="agreement copeHide">
        <image
          src="/static/img/up.png"
          class="label2"
          @tap="copeHide = false"
        ></image>
        <view class="title"> 温馨提示 </view>
        <view class="copyText">客服电话:{{ configAll.service_mobile }}</view>
        <view class="btn" @tap="buttonTypePhone()"> 一键拨打 </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import wLoad from "@/components/w-load/w-load.vue";
export default {
  data() {
    return {
      form: {
        id: "",
        pay_type: 5,
        return_url: "",
      },
      showData: {
        info: {
          mobile: {
            province: "",
          },
        },
      }, //手机号详情
      timestamp: 600,
      countyName: "城市名称",
      mobile: "", //订单查询需要手机号
      wx: false,
      refund: false, //退款
      reason: "", //退款原因
      copeHide: false, //客服手机号
      payType: 1, // H5 支付方式
    };
  },
  components: {
    wLoad: wLoad,
  },
  filters: {
    formatDate(value) {
      if (value == undefined) {
        return;
      }
      // let date = new Date(value * 1000);
      let date = new Date(value * 1000);
      //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM; //月补0
      let d = date.getDate();
      d = d < 10 ? "0" + d : d; //天补0
      let h = date.getHours();
      h = h < 10 ? "0" + h : h; //小时补0
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m; //分钟补0
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s; //秒补0
      // return y + '-' + MM + '-' + d; //年月日
      return MM + "-" + d + " " + h + ":" + m; //年月日时分秒
    },
    countDown(value) {
      let data = Date.parse(new Date());
      let val = value * 1000;
      let time;
      let h;
      let f;
      if (val > data) {
        time = Math.floor((val - data) / 1000);
        h = Math.floor(time / 60 / 60);
        f = Math.floor((time - h * 60 * 60) / 60);
        return h + "小时" + f + "分钟";
      }
    },
  },
  onLoad(option) {
    console.log(option);
    if (option.id) {
      this.show(option.id);
      this.form.id = option.id;
    }
    if (option.type) {
      this.refund = true;
    }
  },
  methods: {
    // H5 支付方式选择
    radioChange(e, type) {
      if (type) {
        console.log(e);
        this.payType = e;
      } else {
        console.log(e.detail.value);
        this.payType = e.detail.value;
      }
    },
    buttonType() {
      if (this.mixin_type != "TOUTIAO" && this.mixin_type != "H5") {
        this.copeHide = true;
      } else if (this.mixin_type == "H5") {
        this.wx = true;
      }
    },
    buttonTypePhone() {
      ks.makePhoneCall({
        phoneNumber: this.configAll.service_mobile, // 仅为示例，并非真实的电话号码
      });
    },
    childByValue: function (childValue) {
      this.wx = childValue;
    },
    // 退款
    refundMet() {
      if (this.reason.length > 50)
        return this.$refs.uToast.show({
          title: "退款原因长度不能超过50",
          type: "error ",
        });
      this.$http
        .refund({ id: this.form.id, reason: this.reason })
        .then((res) => {
          console.log(res);
          if (res.data.code == 1) {
            this.$refs.uToast.show({
              title: "申请成功",
              type: "success ",
            });
            this.refund = false;
            uni.navigateBack({
              delta: 1, //返回层数，2则上上页
            });
          } else {
            this.$refs.uToast.show({
              title: res.data.msg,
              type: "error ",
            });
          }
        });
    },
    // 号码详情界面
    show(id) {
      this.$http.order_detail({ id: id }).then((res) => {
        if (res.data.code == 1) {
          console.log(res.data.data);
          this.showData = res.data.data;
          this.mobile = res.data.data.phone;
        }
      });
    },
    // 复制
    copyNumHandle() {
      uni.setClipboardData({
        data: "美美号源", // data的值为你要复制的内容
        success: (res) => {},
      });
    },
    // 支付
    apply() {
      //#ifdef MP-TOUTIAO
      this.form.pay_type = 6;
      //#endif
      // 是否是H5支付
      if (this.mixin_type == "H5") {
        this.form.pay_type = this.payType;
      }
      this.$http.continue_pay(this.form).then((res) => {
        console.log(res);
        if (res.data.code == 1) {
          if (this.mixin_type == "H5") {
            window.location.href = res.data.data.pay_url;
          } else {
            this.pay(res.data.data);
          }
        } else {
          this.$refs.uToast.show({
            title: res.data.msg,
            type: "error ",
          });
        }
      });
    },
    //调用支付
    pay(val) {
      console.log();
      let this_ = this;
      uni.getProvider({
        service: "oauth",
        success: function (res) {
          console.log(res.provider);
          if (this_.mixin_type != "TOUTIAO") {
            ks.pay({
              serviceId: "1",
              orderInfo: val.res,
              success(res) {
                console.log(res);
                // 支付成功
                this_.$refs.uToast.show({
                  title: "支付成功",
                  type: "success ",
                });
                uni.navigateTo({
                  url: "/pageA/orderSuccess/orderSuccess?id=" + val.id,
                });
              },
              fail(e) {
                console.log(e.errMsg);
                if (e.errMsg == "pay:fail request payment cancel") {
                  this_.$refs.uToast.show({
                    title: "支付取消",
                    type: "error ",
                  });
                } else {
                  this_.$refs.uToast.show({
                    title: "支付失败",
                    type: "error ",
                  });
                }
              },
            });
          } else {
            // 抖音支付
            // uni.requestPayment({
            //   provider: res.provider[0],
            //   orderInfo: val.res,
            //   service: 5,
            //   getOrderStatus: (res) =>
            //     new Promise((resolve, reject) => {
            //       console.log(res);
            //       resolve(res);
            //     }),
            //   success(res) {
            //     console.log(res);
            //     // 支付成功
            //     if (res.code == 0) {
            //       this_.$refs.uToast.show({
            //         title: "支付成功",
            //         type: "success ",
            //       });
            //       uni.navigateTo({
            //         url: "/pageA/orderSuccess/orderSuccess?id=" + val.id,
            //       });
            //     } else if (res.code == 4) {
            //       this_.$refs.uToast.show({
            //         title: "支付取消",
            //         type: "error ",
            //       });
            //     } else if (res.code == 1) {
            //       this_.$refs.uToast.show({
            //         title: "支付超时",
            //         type: "error ",
            //       });
            //     } else if (res.code == 2) {
            //       this_.$refs.uToast.show({
            //         title: "支付失败",
            //         type: "error ",
            //       });
            //     } else if (res.code == 3) {
            //       this_.$refs.uToast.show({
            //         title: "支付关闭 ",
            //         type: "error ",
            //       });
            //     } else {
            //     }
            //   },
            //   fail(e) {
            //     console.log(e);
            //   },
            // });
            tt.requestOrder({
              data: val.data,
              byteAuthorization: val.byteAuthorization,
              success({ orderId }) {
                tt.getOrderPayment({
                  orderId,
                  success(res) {
                    this_.$refs.uToast.show({
                      title: "支付成功",
                      type: "success ",
                    });
                    uni.navigateTo({
                      url: "/pageA/orderSuccess/orderSuccess?id=" + val.id,
                    });
                  },
                  fail(err) {
                    console.log(err, "err");
                    if (err.errMsg == "pay:fail request payment cancel") {
                      this_.$refs.uToast.show({
                        title: "支付取消",
                        type: "error ",
                      });
                    } else {
                      this_.$refs.uToast.show({
                        title: "支付失败",
                        type: "error ",
                      });
                    }
                  },
                });
              },
            });
          }
        },
      });
    },
    // 查询更多订单
    orderList() {
      uni.navigateTo({
        url: "/pageA/orderList/orderList?mobile=" + this.mobile,
      });
    },
  },
};
</script>

<style lang="scss">
.payment {
  .refund {
    width: 580rpx;
    box-sizing: border-box;
    padding: 30rpx 60rpx;
    .label2 {
      width: 30rpx;
      height: 30rpx;
      float: right;
    }
    .title {
      margin-top: 30rpx;
      font-size: 32rpx;
      text-align: center;
    }
    .lobal {
      margin-top: 20rpx;
      position: relative;
      padding-left: 120rpx;
      text {
        position: absolute;
        left: 0;
        top: 0;
        font-size: 24rpx;
        color: #696969;
      }
    }
    .text {
      margin-top: 30rpx;
      padding-top: 30rpx;
      color: #797979;
      font-size: 24rpx;
      border-top: 1rpx solid #dddcda;
      display: block;
    }
    .btn {
      width: 351rpx;
      height: 78rpx;
      line-height: 78rpx;
      text-align: center;
      color: #fff;
      font-size: 26rpx;
      background: #b40105;
      border-radius: 10rpx;
      margin: 20rpx auto;
    }
  }
  /deep/.uni-scroll-view-content {
    // padding:36rpx;
    // border-radius: 20rpx;
  }
  .page {
    position: relative;
    // width: 750rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: #f1f1f1;
    padding-bottom: 90rpx;
  }
  .status {
    position: relative;
    height: 240rpx;
    background-color: #618ff3;
    box-sizing: border-box;
    padding: 80rpx;
    font-size: 33rpx;
    color: #fff;
    .time {
      font-size: 26rpx;
    }
    image {
      position: absolute;
      width: 100rpx;
      height: 100rpx;
      right: 80rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .icon {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    .iconBox {
      width: 50%;
      box-sizing: border-box;
      text-align: center;
      image {
        width: 60rpx;
        height: 60rpx;
      }
      text {
        display: block;
        font-size: 24rpx;
        color: #618ff3;
      }
    }
  }
  .priceCon {
    width: 703rpx;
    margin: 0 auto;
    box-sizing: border-box;
    box-shadow: 1rpx 1rpx 5rpx 0rpx rgba(129, 129, 129, 0.5);
    border-radius: 12rpx;
    padding: 30rpx;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    .title {
      text-align: center;
      font-size: 30rpx;
      font-weight: 700;
    }
    .text {
      text-align: center;
      font-size: 24rpx;
      margin-top: 10rpx;
      margin-bottom: 30rpx;
    }
    .priceNum {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding-bottom: 30rpx;
      border-bottom: 1rpx solid rgba(72, 72, 72, 0.4);
      .li {
        width: 33.3%;
        text-align: center;
        font-size: 22rpx;
        box-sizing: border-box;
        border-right: 1rpx solid rgba(72, 72, 72, 0.4);
        .name {
          color: #2b2b2b;
          font-size: 24rpx;
        }
        .numbers {
          color: $uni-color-BGC;
          margin-top: 10rpx;
          font-size: 28rpx;
        }
      }
      .li:nth-child(2) {
        .numbers {
          text-decoration: line-through;
        }
      }
      .li:nth-child(3) {
        border-right: 0;
      }
    }
  }
  .orderTit {
    width: 100%;
    height: 32rpx;
    line-height: 32rpx;
    display: block;
    box-sizing: border-box;
    border-left: 5rpx solid #d3363b;
    padding-left: 20rpx;
    margin-top: 30rpx;
    margin-bottom: 20rpx;
  }

  .infoBox1 {
    width: 627rpx;
    overflow-wrap: break-word;
    color: rgba(105, 105, 105, 1);
    font-size: 22rpx;
    font-family: PingFangSC-Light;
    text-align: left;
    line-height: 32rpx;
    // white-space: nowrap;
    display: block;
    margin: 16rpx 0 0 5rpx;
  }
  .form {
    width: 703rpx;
    box-sizing: border-box;
    padding: 30rpx;
    position: relative;
    margin: 20rpx auto 30rpx;
    background-color: #fff;
    box-shadow: 1rpx 1rpx 5rpx 0rpx rgba(129, 129, 129, 0.5);
    border-radius: 12rpx;
    .orderTit {
      text {
        margin-left: 30rpx;
        color: dimgray;
      }
    }
    .pay {
      font-size: 24rpx;
      image {
        width: 64rpx;
        height: 64rpx;
        vertical-align: middle;
        margin-right: 20rpx;
      }
      .li {
        padding: 20rpx;
        border-bottom: 1px solid rgba(119, 119, 119, 0.3);
      }
    }
    .formInput {
      .u-form-item {
        padding: 0;
        /deep/ .u-form-item--left__content__label {
          position: relative;
          padding-left: 30rpx;
        }
        /deep/.u-form-item--left__content__label::after {
          content: "*";
          position: absolute;
          left: 18rpx;
          top: 0;
          color: red;
        }
      }
      .remark {
        /deep/.u-form-item--left__content__label::after {
          display: none;
        }
      }
      .sms {
        display: flex;
        flex-wrap: wrap;
        /deep/ .u-size-default {
          width: 168rpx;
          height: 49rpx;
          border: 1rpx solid #d52e4c;
          border-radius: 20rpx;
          font-size: 24rpx;
          color: #cf2746;
          background-color: #fff;
          margin-top: 14rpx;
        }
        /deep/ input {
          flex: 1;
        }
      }
    }
  }
  .section18 {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 100;
    text-align: center;
    height: 87rpx;
    line-height: 87rpx;
    margin-top: 27rpx;
    display: flex;
    flex-direction: column;
    // width: 750rpx;
  }
  .box4 {
    height: 100%;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    text {
      display: inline-block;
      width: 50%;
      text-align: center;
      height: 100%;
      background-color: #e4e4e4;
    }
    // margin: 29rpx 0 0 120rpx;
  }
  .word12 {
    width: 76rpx;
    overflow-wrap: break-word;
    color: rgba(213, 46, 76, 1);
    font-size: 30rpx;
    font-family: PingFangSC-Medium;
    text-align: left;
    white-space: nowrap;
    margin-top: 1rpx;
    display: block;
  }
  .info8 {
    width: 117rpx;
    overflow-wrap: break-word;
    color: rgba(241, 241, 241, 1);
    font-size: 30rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    display: block;
    background-color: $uni-color-BGC !important;
  }
  .Limited {
    text-align: center;
    width: 690rpx;
    margin: 18rpx auto 18rpx;
    border: 1rpx solid $uni-color-BGC;
    border-radius: 15rpx;
    padding: 12rpx 0;
    font-size: 24rpx;
    color: $uni-color-BGC;
    .text {
      margin-left: 20rpx;
    }
    /deep/ .u-countdown-item {
      margin: 0 8rpx;
    }
    .u-countdown {
      // margin-left: 30rpx;
    }
  }
  .agreement {
    width: 600rpx;
    max-height: 930rpx;
    padding: 0 30rpx;
    // box-sizing: border-box;
    .copyText {
      margin: 60rpx 0;
      text-align: center;
      font-size: 36rpx;
      // font-weight: 700;
    }
    .label2 {
      float: right;
      width: 21rpx;
      height: 21rpx;
      margin-top: 28rpx;
    }
    .title {
      font-size: 30rpx;
      font-weight: 700;
      margin: 20rpx 0;
      text-align: center;
    }
    /deep/ .u-drawer__scroll-view {
      position: relative;
    }
    .btn {
      padding: 20rpx;
      border-radius: 10rpx;
      text-align: center;
      border: 1rpx solid #d8d8d8;
      font-size: 28rpx;
      width: 100%;
      margin-bottom: 10rpx;
      background-color: $uni-color-BGC;
      color: #fff;
    }
  }
}
</style>