uniAppXCX/component/paymentPopup.vue

<template>
  <view class="content">
    <uni-popup class="popup" ref="popup" type="bottom" background-color="#F8F8F8">
      <view class="popupContent">
        <view class="title">
          购买卡牌
          <uni-icons class="close" @click="close()" type="closeempty" size="20"></uni-icons>
        </view>
        <view class="row">
          <view class="label">单价</view>
          <view class="value price">￥{{ info.price || 0 }}</view>
        </view>

        <view class="row">
          <view class="label">选中卡牌号码</view>
          <view class="value number">
            <view class="item" v-for="(item, index) in params.raffleNumList">
              {{ item }}
            </view>
          </view>
        </view>

        <view class="row">
          <view class="label">优惠卷</view>
          <view class="value">
            <view v-if="!selestCouponId && couponList.length > 0" class="hasCoupon" @click="showPopup3">
              选择优惠券
              <uni-icons type="right" color="#FF2C43" size="20"></uni-icons>
            </view>
            <view v-if="!selestCouponId && couponList.length == 0" class="noCoupon">暂无可用优惠券</view>
            <view class="coupon price" v-if="selestCouponId">-￥{{ selestCoupon.discount }}</view>
          </view>
        </view>

        <view class="row">
          <view class="label">
            抵扣（余额
            <span class="price">0</span>
            ）
          </view>
          <view class="value price">￥0</view>
        </view>

        <view class="row">
          <view class="label"></view>
          <view class="value">
            小计：
            <span class="price">￥{{ priceAll }}</span>
          </view>
        </view>

        <view class="tip">
          <radio class="radio" :checked="checkbox1" @click="checkbox1 = !checkbox1" />
          <span>
            我已阅读并同意
            <span style="color: #ff8e21">《用户协议》</span>
          </span>
        </view>

        <view class="tip">
          <radio class="radio" :checked="checkbox2" @click="checkbox2 = !checkbox2" />
          <span>本人已满18岁且具备完全行为能力</span>
        </view>

        <image @click="submit" class="button" :src="$fileUrl() + '/first/button5.png'" mode="widthFix"></image>
      </view>
    </uni-popup>
    <!-- 抽赏结果 -->
    <uni-popup class="popup2" ref="popup2" type="center">
      <image class="bk" :src="$fileUrl() + '/winningLottery/bk.png'" mode="widthFix"></image>
      <view class="lotteryResults">
        <view class="title">
          中奖详情
          <!-- <uni-icons class="close" @click="close2()" type="closeempty" size="20"></uni-icons> -->
        </view>
        <view class="prizes">
          <view class="item" v-for="(item, index) in prizes">
            <image class="img" :src="item.prizeIcon" mode="aspectFill"></image>
            <view class="info">
              <view class="row name">
                <span style="margin-right: 10px">{{ item.prizeName }}</span>
                <span v-if="item.prizeType == 4">随机</span>
                <span>{{ item.prizeNum }}张</span>
              </view>
              <view class="row type">
                {{ $selectDictLabel(rewardType, item.prizeType) }}
              </view>
            </view>
          </view>
          <Mloading class="loading" text="抽奖中..." v-if="prizes.length == 0" />
        </view>
        <image class="Rectangle" :src="$fileUrl() + '/winningLottery/Rectangle.png'" mode="widthFix"></image>
        <view class="text">已放入背包，可前往背包查看~</view>
        <image class="close" @click="close2" :src="$fileUrl() + '/winningLottery/icon.png'" mode="widthFix"></image>
      </view>
    </uni-popup>
    <!-- 选则优惠券 -->
    <uni-popup class="popup" ref="popup3" type="bottom" background-color="#F8F8F8">
      <view class="popupContent">
        <view class="title">
          <!-- 选择优惠券 -->
          <uni-icons class="close" @click="close3()" type="closeempty" size="20"></uni-icons>
        </view>
      </view>
      <view class="popupList">
        <view class="card" v-for="(item, index) in couponList" @click="clickSelestCoupon(item)">
          <view class="leftIcon"></view>
          <view class="left">
            ￥
            <span style="font-size: 18px">{{ item.discount }}</span>
          </view>
          <view class="right">
            <view class="row title">
              {{ item.name }}
            </view>
            <view class="row endTime">{{ item.endTime }}到期</view>
            <view class="row desc">
              {{ item.desc }}
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { rewardType } from '@/utils/commonConfig.js'
import { couponListApi } from '@/api/coupon.js'
import { drawCardSubmitApi, submittResultApi, orderPriceApi } from '@/api/drawCard.js'

import Mloading from '@/component/Mloading.vue'
export default {
  components: {
    Mloading,
  },
  emits: ['callBack'],
  props: {
    value: {
      type: Object,
      default: {},
    },
  },
  computed: {},
  data() {
    return {
      priceAll: 0,
      rewardType: rewardType,
      checkbox1: false,
      checkbox2: false,
      params: {
        raffleNumList: [],
        raffleId: null,
      },
      orderId: null,
      prizes: [],
      // prizes: [
      // 	{
      // 		prizeType: 1,
      // 		prizeIcon: 'https://mall.rongtongh.cn/storage/raffle1.jpg',
      // 		prizeName: 'S赏',
      // 		prizeNum: 12
      // 	},
      // 	{
      // 		prizeType: 4,
      // 		prizeIcon: 'https://mall.rongtongh.cn/storage/raffle1.jpg',
      // 		prizeName: 'S赏',
      // 		prizeNum: 12
      // 	},
      // 	{
      // 		prizeType: 1,
      // 		prizeIcon: 'https://mall.rongtongh.cn/storage/raffle1.jpg',
      // 		prizeName: 'S赏',
      // 		prizeNum: 12
      // 	}
      // ],
      getApiNum: 0,
      info: {},
      // 优惠券
      couponList: [],
      // 选中的优惠券
      selestCouponId: null,
      selestCoupon: {},
    }
  },
  mounted() {
    // this.$refs.popup2.open('center')
    // this.getLotteryResults()
  },
  methods: {
    getPrice() {
      let params = {
        orderNum: this.params.raffleNumList.length,
        orderThirdId: this.params.raffleId,
        orderType: 1,
        userCouponId: this.selestCouponId || '',
      }
      orderPriceApi(params).then(res => {
        console.log(res, '订单价格')
        this.priceAll = res.data
      })
    },
    show(id, list, info) {
      this.refresh()
      console.log(list, 'list')
      this.params.raffleId = id
      this.params.raffleNumList = list
      this.info = info
      this.$refs.popup.open('bottom')
      //计算订单价格
      this.getPrice()
      // 获取优惠券列表
      this.getCoupon()
    },
    refresh() {
      // 刷新组件状态
      ;(this.selestCouponId = null), (this.selestCoupon = {})
      this.prizes = []
      this.checkbox1 = false
      this.checkbox2 = false
      this.orderId = null
    },
    close() {
      this.$refs.popup.close()
    },
    close2() {
      this.$refs.popup2.close()
    },
    showPopup3() {
      // if (this.couponList.length > 0) {
      this.$refs.popup3.open()
      // }
    },
    close3() {
      this.$refs.popup3.close()
    },
    // 获取优惠券
    getCoupon() {
      let params = {
        limit: 999,
        page: 1,
        status: 0,
        raffleId: this.params.raffleId,
      }
      couponListApi(params).then(res => {
        this.couponList = res.data.list
      })
    },
    // 选择优惠券
    clickSelestCoupon(item) {
      this.selestCoupon = item
      this.selestCouponId = item.id
      this.getPrice()
      this.close3()
    },
    submit() {
      let _this = this
      if (this.selestCouponId) {
        this.params.couponId = this.selestCouponId
      }
      drawCardSubmitApi(this.params).then(res => {
        console.log(res, '提交购买卡牌')
        this.orderId = res.data.orderId
        // 如果不需要付钱，直接进入抽卡结果
        if (res.data.orderStatus == 201) {
          _this.close()
          _this.$refs.popup2.open('center')
          _this.getLotteryResults(res)
          _this.$emit('callBack')
          return
        }
        // 唤起支付
        this.wxPayment(res.data)
      })
    },
    getLotteryResults() {
      let params = {
        orderId: this.orderId,
        raffleId: this.params.raffleId,
      }
      submittResultApi(params).then(res => {
        console.log(res, 'res抽奖结果')
        this.prizes = res.data
      })
    },
    wxPayment(data) {
      let _this = this
      wx.requestPayment({
        timeStamp: data.timeStamp,
        nonceStr: data.nonceStr,
        package: data.packageValue,
        signType: data.signType,
        paySign: data.paySign,
        success: function (res) {
          console.log(res, '支付过程成功')
          _this.close()
          if (_this.info.type == 3) {
            wx.showModal({
              title: '抽奖成功',
              content: '请耐心等待开奖结果。',
            })
          } else {
            _this.$refs.popup2.open('center')
            _this.getLotteryResults(res)
          }
          _this.$emit('callBack')
        },
        fail: function (res) {
          console.log('支付过程失败')
          util.showErrorToast('支付失败')
        },
        complete: function (res) {
          console.log('支付过程结束')
        },
      })
    },
  },
}
</script>

<style scoped lang="scss">
.popupContent {
  background-color: #f8f8f8;
  border-radius: 10px 10px 0 0;

  > .row {
    margin: 10px 20px 0 20px;
    display: flex;
    justify-content: space-between;
    padding: 12px;
    background: #fff;
    border-radius: 6px;
    font-size: 14px;
    color: #666666;

    .price {
      color: #ff2c43;
      font-weight: 600;
    }

    .label {
      margin-right: 10px;
    }

    .number {
      display: flex;
      flex: 1;
      overflow: auto;
      max-width: 60%;

      // justify-content: flex-end;
      .item {
        width: 48px;
        height: 24px;
        background: #dddddd;
        border-radius: 51px;
        color: #000000;
        line-height: 24px;
        text-align: center;
        font-size: 12px;
        margin-right: 5px;

        flex-grow: 0;
        flex-shrink: 0;
      }
    }
    .value {
      .hasCoupon {
        display: flex;
        align-items: center;
        color: #ff2c43;
        font-size: 12px;
      }
      .noCoupon {
        display: flex;
        align-items: center;
        color: #8c8c8c;
        font-size: 12px;
      }
    }
  }
  > .title {
    text-align: center;
    padding: 15px;
    font-weight: 600;

    .close {
      position: absolute;
      right: 15px;
      top: 15px;
    }
  }
}

.tip {
  margin: 10px 20px 0 20px;
  color: #000000;
  font-size: 12px;
  display: flex;
  align-items: center;

  .radio {
    transform: scale(0.7);
  }
}

.button {
  margin: 10px auto;
  width: 210px;
}
.popup2 {
  .bk {
    position: relative;
    top: -10vh;
    width: 100vw;
  }
}
.lotteryResults {
  width: 76vw;
  padding-top: 62px;
  // background: #fff;
  border-radius: 10px;
  position: absolute;
  top: -10vh;
  left: 50%;
  transform: translateX(-50%);

  > .title {
    text-align: center;
    padding: 16px;
    height: 20px;
    font-weight: 600;
    color: #fff;

    .close {
      position: absolute;
      right: 15px;
      top: 15px;
    }
  }
  .Rectangle {
    width: calc(100% - 1px);
    position: absolute;
    bottom: 45px;
    left: 3px;
  }
  .text {
    width: calc(100% - 1px);
    height: 50px;
    line-height: 50px;
    position: absolute;
    bottom: 45px;
    left: 3px;
    text-align: center;
    color: #fff;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
    font-size: 12px;
  }
  .close {
    width: 30px;
    height: 30px;
    margin-top: 50px;
    position: relative;
    z-index: 4;
    left: 50%;
    transform: translateX(-50%);
  }
  .prizes {
    margin: 30px 15px 10px 19px;
    position: relative;
    height: calc(85vw - 30px);
    background: linear-gradient(180deg, #f77d4d 0%, #feae81 100%);
    border-radius: 8px;
    padding: 10px 15px;
    overflow: auto;

    .loading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateY(-50%) translateX(-50%);
    }

    .item {
      display: flex;
      // flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      // margin-right: 5px;
      background: #fff;
      padding: 13px 15px;
      margin-bottom: 10px;
      border-radius: 8px;

      .img {
        width: 70px;
        height: 70px;
        border-radius: 5px;
      }
      .info {
        display: flex;
        flex-direction: column;
        // align-items: center;
        justify-content: center;
        flex: 1;

        .row {
          // width: 100%;
        }
        .name {
          font-size: 14px;
        }
      }
    }
  }
}

.popupList {
  max-height: 50vh;
  min-height: 30vh;
  overflow: auto;
  background: #f8f8f8;
  padding: 10px;

  .card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    display: flex;

    .leftIcon {
      height: auto;
      width: 8px;
      background: #ff2c43;
    }

    .left {
      width: 80px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      color: #ff2c43;
      font-weight: 600;
    }

    .right {
      padding: 10px;
      color: #8e4a21;

      .row {
        margin-bottom: 4px;
        font-size: 12px;
      }

      .title {
        font-size: 14px;
        font-weight: 600;
      }

      .endTime {
        color: #ff2c43;
      }

      .desc {
        margin-top: 5px;
        color: #8c8c8c;
      }
    }
  }
}
</style>
<style scoped>
.popup2 >>> .uni-popup__wrapper {
  top: -8vh;
}
</style>