discounts-minapp/pay/pay.vue

<template>
  <view class="pay">
    <!-- <view class="shop-info" v-if="!isVisual">
			<view class="shop-name">
				{{info.shopName}}
			</view>
			<view class="address">
				{{info.address}}
			</view>
		</view> -->

    <view class="pay-info">
      <view class="goods-info">
        <image class="goods-img" :src="info.goodsPath" mode=""></image>
        <view class="info">
          <view class="goods-name">
            {{ info.goodsName }}
          </view>
          <view class="num">
            {{ info.goodsDescribe }}
          </view>
          <view class="price">
            ￥{{ info.realPrice }}
            <!-- ￥{{payInfo.originalPrice}} -->
          </view>
        </view>
      </view>

      <view class="coupon">
        <view class="label"> 优惠券 </view>
        <view class="choose-coupon" :class="[payInfo.offset ? '' : 'none']" @click="choose">
          <!-- {{payInfo.goodsCouponName}}-￥{{payInfo.offset}} -->
          {{ payInfo.offset ? "-￥" + payInfo.offset : "暂无可用" }}
          <image class="icon" src="../static/jiantou-icon.png" mode=""></image>
        </view>
      </view>

      <!-- <view class="explain">
				<view class="label">
					优惠说明
				</view>

				<view class="right">
					已优惠： <view class="red">￥{{payInfo.offset}} </view> 合计: <view class="red fs28">￥{{payInfo.price}}
					</view>
				</view>
			</view> -->
    </view>

    <view class="input-box">
      <view class="label" style="word-break: keep-all; margin-right: 20rpx;" > 备注 </view>
      <view class="choose-coupon"  @click="chooseRemark">
        {{ info.extend.remark ?  info.extend.remark : "请输入您的需求" }}
        <image class="icon" src="../static/jiantou-icon.png" mode=""></image>
      </view>
    </view>


    <view class="input-box" v-if="isVisual">
      <view class="label"> 充值账号 </view>
      <view class="value">
        {{ form.account }}
      </view>
    </view>

    <view class="input-box-address" @click="toMap()">
      <view class="label"> 到店自取地址 </view>
      <view class="value">
        {{ info.shopInfo.shopName }}
        <!-- 印象贵大文创店 -->
      </view>
      <view class="label">{{ info.shopInfo.address }}</view>
    </view>

    <view class="btn-box">
      <view class="total-price">
        <view class="label"> 合计: </view>
        <view class="price"> ¥ {{ payInfo.price }} </view>
      </view>

      <button class="btn" type="default" :loading="loading" @click="creat">
        提交订单
      </button>
    </view>
  </view>
</template>

<script>
import { calculate } from "@/api/order.js";
import { creat } from "@/api/goods.js";
import { creatPayOrder, queryPayOrder, payDetails } from "@/api/payment.js";
import guid from "@/utils/guid.js";
export default {
  data() {
    return {
      isVisual: false, //是否是虚拟商品
      loading: false,
      info: {},
      realPay: {
        goodsCouponName: "", //优惠券名
        couponGoodsLogId: "", //优惠券id
        goodsId: "", //商品id
        price: "", //支付价格
        offset: "", //实际抵扣值
        discount: "", //优惠券值
        condition: "", //优惠条件
        originalPrice: "", //原价
      },
      form: {
        account: "",
      },
      rules: {
        account: {
          type: "string",
          required: true,
          message: "请输入充值账号",
          trigger: ["blur", "change"],
        },
      },
      query: {
        // msgType: "wx.unifiedOrder",
        msgType: "wx.miniPreOrder",
        orderDesc: "测试",
        orderNo: "",
        subOpenId: "",
        userId: "",
      },
      // 支付信息
      payData: {},
    };
  },
  computed: {
    // 正式支付时的信息
    payInfo() {
      return {
        goodsCouponName: this.realPay.goodsCouponName || "", //优惠券名
        couponGoodsLogId: this.info.couponId, //优惠券id
        goodsId: this.realPay.goodsId || this.info.goodsId, //商品id
        price: this.realPay.price, //支付价格
        offset: this.realPay.offset, //实际抵扣值
        discount: this.realPay.discount || 0, //优惠券值
        condition: this.realPay.condition || "", //优惠条件
        originalPrice: this.realPay.originalPrice, //原价
      };
    },
  },
  methods: {
    calculate(goodsId, shopId) {
      return new Promise((resolve, reject) => {
        // uni.request({
        // 	url:'http://192.168.110.226:9002/goodsInfo/calculate',
        // 	method:'post',
        // 	data:{
        // 		"goodsId": goodsId,
        // 		// "shopId": shopId,
        // 		"userId": JSON.parse(uni.getStorageSync('userInfo')).userId
        // 	},
        // 	success() {

        // 	}
        // })
        calculate({
          // couponId: this.info.couponId,
          goodsId: goodsId,
          shopId: shopId,
          userId: JSON.parse(uni.getStorageSync("userInfo")).userId,
        }).then((res) => {
          if (res.state == "Success") {
            this.realPay = res.content;
          }
        });
      });
    },
    choose() {
      let that = this;
      uni.navigateTo({
        url: "./coupon?couponId=" + this.realPay.couponGoodsLogId,
        success: function (res) {
          // 通过eventChannel向被打开页面传送数据
          res.eventChannel.emit("pay", that.info);
        },
      });
    },
    chooseRemark() {
      let that = this;
      uni.navigateTo({
        url: "./remark",
        success: function (res) {
          // 通过eventChannel向被打开页面传送数据
          res.eventChannel.emit("remark", that.info);
        },
      });
    },
    toMap() {
      uni.openLocation({
        latitude: +this.info.shopInfo.mapLat,
        longitude: +this.info.shopInfo.mapLon,
        name: this.info.shopInfo.shopName,
        address:  this.info.shopInfo.address,
      });
    },
    setRebackValue(value) {
      // console.log('value', value);
      this.info.extend.remark = value;
      this.$forceUpdate();
    },
    //创建订单
    creat() {
      if (this.loading) return;

      this.loading = true;
      uni.showLoading({
        title: "订单创建中",
      });
      let that = this;
      if (!this.payData.timeStamp) {
        // 处理扩展字段  暂时只有研学商品和视频会员  视频会员是字符串的JSON  研学是字符串
        let extend = {};
        if (!this.info.extend) {
          this.info.extend = JSON.stringify({ channel: "GZU" });
        }else{
          this.info.extend.channel = "GZU";
        }
        console.log("this.info.extend", this.info.extend);
        try {
          if(typeof this.info.extend == 'string'){
            extend = this.info.extend;
          }else{
            extend = JSON.stringify(this.info.extend);
          }
        } catch (e) {
          console.log("e", e);
          extend = this.info.reservationTime || "";
        }
        creat({
          discountId:
            this.payInfo.couponGoodsLogId || this.payInfo.couponGoodsLogId == -1
              ? [this.payInfo.couponGoodsLogId]
              : [],
          extend,
          channel:"GuiDa",
          goodsList: this.info.goodsId ? [this.info.goodsId] : [],
          idempotent: guid(),
          shopId: this.info.shopId,
        }).then((res) => {
          this.loading = false;
          if (res.state == "Success") {
            if (!this.payInfo.price) {
              //价格为0
              uni.hideLoading();
              uni.reLaunch({
                url: "/my/order/index",
              });
            } else {
              // 创建订单完成。

              this.query.orderNo = res.content.orderNo;
              this.query.subOpenId = JSON.parse(
                uni.getStorageSync("userInfo")
              ).openId;
              this.query.orderDesc = this.info.goodsName;

              creatPayOrder({
                ...this.query,
                subAppId: "wxbc64403830bb13c5",
              }).then((data) => {
                that.payData = JSON.parse(data.content.miniPayRequest);

                if (data.content.miniPayRequest == null)
                  return uni.hideLoading();

                uni.redirectTo({
                  url: "/my/order/detail?id=" + res.content.orderNo,
                  success() {
                    that.loading = false;
                    uni.hideLoading();
                  },
                });

                // uni.requestPayment({
                // 	"provider": "wxpay",
                // 	"orderInfo": that.payData,
                // 	"appid": "wxbc64403830bb13c5", // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
                // 	"paySign": that.payData.paySign,
                // 	"nonceStr": that.payData.nonceStr, // 随机字符串
                // 	"package": that.payData.package, // 固定值
                // 	// "prepayid":  that.payData.package, // 统一下单订单号
                // 	"timeStamp": that.payData.timeStamp, // 时间戳（单位：秒）
                // 	"signType": that.payData.signType, //签名算法
                // 	success(msg) {
                // 		console.log('msg', msg, res);
                // 		queryPayOrder(that.query.orderNo).then(res1 => {
                // 			if (res1.state == 'Success') {
                // 				uni.hideLoading()
                // 				uni.reLaunch({
                // 					url: '/my/order/index'
                // 				})
                // 			}
                // 		})
                // 	},
                // 	fail(e) {
                // 		console.log('err', e);
                // 		that.loading = false
                // 		uni.hideLoading()
                // 		uni.showToast({
                // 			title: '取消支付',
                // 			icon: 'fail'
                // 		})
                // 		// 取消支付后，获取支付信息以备再次支付
                // 		payDetails(that.query.orderNo).then(r => {
                // 			if (r.state == 'Success') {
                // 			that.payData = JSON.parse(r.content.miniPayRequest)
                // 			}
                // 		})
                // 	}
                // })
              });

              // 跳转到支付页面
              // /oreder/detail
              // uni.redirectTo({
              //   url: "/my/order/detail?id=" + res.content.orderNo,
              //   success() {
              //     that.loading = false;
              //     uni.hideLoading();
              //   },
              // });
            }
          }
        });
      } else {
        // 取消支付后再次支付
        uni.requestPayment({
          provider: "wxpay",
          orderInfo: that.payData,
          appid: that.payData.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
          paySign: that.payData.paySign,
          nonceStr: that.payData.nonceStr, // 随机字符串
          package: that.payData.package, // 固定值
          // "prepayid":  that.payData.package, // 统一下单订单号
          timeStamp: that.payData.timeStamp, // 时间戳（单位：秒）
          signType: that.payData.signType, //签名算法
          success(msg) {
            console.log("msg", msg);
            queryPayOrder(that.query.orderNo).then((res1) => {
              if (res1.state == "Success") {
                uni.hideLoading();
                uni.reLaunch({
                  url: "/my/order/index",
                });
              }
            });
          },
          fail(e) {
            that.loading = false;
            uni.hideLoading();
            uni.showToast({
              title: "取消支付",
              icon: "fail",
            });
            // 取消支付后，获取支付信息以备再次支付
            payDetails(that.query.orderNo).then((r) => {
              if (r.state == "Success") {
                that.payData = JSON.parse(r.content.miniPayRequest);
              }
            });
            console.log("err", e);
          },
        });
      }
    },
  },
  onReady() { },
  onLoad() {
    let userInfo = JSON.parse(uni.getStorageSync("userInfo"));
    this.query.userId = userInfo.userId;
    let that = this;
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on("pay", function (data) {
      console.log(data)
      that.info = data;
      try {
        // 初始化备注
        that.info.extend = {
          remark:''
        };
        let extend = JSON.parse(that.info.extend);
        if (extend.account) {
          that.isVisual = true;
          that.form.account = extend.account;
        }
      } catch (e) {
        //TODO handle the exception
      }
      console.log("data", data,that.info);
      
      that.calculate(that.info.goodsId, that.info.shopId);
    });
  },
};
</script>

<style lang="scss">
.pay {
  background: #f9f9f9;
  min-height: 100vh;
  padding-top: 20rpx;

  .shop-info {
    margin: 0 30rpx 20rpx;
    width: 690rpx;
    padding: 24rpx;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;

    .shop-name {
      color: #181818;
      font-size: 32rpx;
    }

    .address {
      color: #999999;
      font-size: 24rpx;
      margin-top: 12rpx;
    }
  }

  .pay-info {
    margin: 0 30rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 28rpx 24rpx;

    .goods-info {
      display: flex;
      margin-bottom: 30rpx;

      .goods-img {
        width: 164rpx;
        height: 164rpx;
        border-radius: 16rpx;
      }

      .info {
        margin-left: 28rpx;
        flex: 1;

        .goods-name {
          font-weight: bold;
          color: #181818;
          font-size: 32rpx;
          width: 100%;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          /* 这里是超出几行省略 */
        }

        .num {
          color: #999999;
          font-size: 24rpx;
          margin-top: 16rpx;
        }

        .price {
          font-weight: bold;
          color: #181818;
          font-size: 32rpx;
          margin-top: 26rpx;
        }
      }
    }

    .coupon {
      display: flex;
      align-items: center;
      justify-content: space-between;
      // border-bottom: 2rpx dashed #f3f3f3;
      padding: 28rpx 0;

      .label {
        color: #222222;
        font-size: 28rpx;
      }

      .choose-coupon.none {
        color: #aaaaaa;
      }

      .choose-coupon {
        color: #ff4848;
        font-size: 28rpx;
        display: flex;
        align-items: center;
        word-break: break-word;
        .icon {
          width: 28rpx;
          height: 28rpx;
          display: block;
          margin-left: 10rpx;
        }
      }
    }

    .explain {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 28rpx;

      .label {
        color: #aaaaaa;
        font-size: 28rpx;
      }

      .right {
        display: flex;
        align-items: center;
        font-size: 24rpx;

        .red {
          font-weight: 500;
          color: #ff4848;
          margin: 0 10rpx;
        }

        .fs28 {
          font-size: 28rpx !important;
        }
      }
    }
  }

  .input-box {
    margin: 20rpx 30rpx;
    padding: 28rpx 24rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .label {
      color: #222;
      font-size: 28rpx;
    }

    .value {
      font-size: 28rpx;
      color: #aaaaaa;
    }
  }

  .input-box-address {
    margin: 20rpx 30rpx;
    padding: 28rpx 24rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    // display: flex;
    // align-items: center;
    // justify-content: space-between;

    .value {
      color: #222;
      font-size: 28rpx;
    }

    .label {
      font-size: 28rpx;
      margin: 10rpx 0;
      color: #aaaaaa;
    }
  }

  .btn-box {
    position: fixed;
    bottom: 0%;
    left: 0%;
    width: 100%;
    height: 98rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 30rpx;
    border-top: 1rpx solid #eeeeee;

    .total-price {
      display: flex;
      align-items: center;

      .label {
        color: #181818;
        font-size: 28rpx;
      }

      .price {
        font-size: 36rpx;
        font-weight: 800;
        color: #ff4848;
        margin-left: 10rpx;
      }
    }

    .btn {
      width: 280rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      background: $uni-color-primary;
      box-shadow: inset 0rpx 6rpx 12rpx 2rpx rgba(255, 255, 255, 0.16);
      border-radius: 46rpx 46rpx 46rpx 46rpx;
      font-weight: 800;
      color: #ffffff;
      font-size: 28rpx;
      margin: 0;
    }
  }
}

.label {
  color: #222222;
  font-size: 28rpx;
}

.choose-coupon {
  color: #aaaaaa;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  word-break: break-word;
  .icon {
    width: 28rpx;
    height: 28rpx;
    display: block;
    margin-left: 10rpx;
  }
}
</style>