menduner-uniapp/pagesA/vipPackage/index.vue

<template>
  <view>
    <view class="vipBox">
      <view class="avatar">
        <img :src="getUserAvatar(baseInfo?.avatar, baseInfo?.sex)" alt="" class="img-box" :class="{'img-box-atc': userInfo?.vipExpireDate}">
        <image v-if="userInfo?.vipExpireDate" src="/static/svg/vip.svg" class="vipIcon"></image>
      </view>
      <view class="nameBox">
        <view class="name font-weight-bold font-size-16">{{ baseInfo?.name || userInfo?.phone }}</view>
        <view class="vipInfo font-size-14" v-if="remaining">
          {{ pName }}
          <view>将于{{ remaining }}后过期</view>
        </view>
      </view>
    </view>
    <view>
      <swiper class="swiper-box" :current="current" indicator-dots indicator-active-color="#f1b17a">
        <swiper-item v-for="(item, index) in memberListLength" :key="index" class="swiper-items">
          <view class="swiper-item" v-for="val in item" :key="val.id">
            <view
              class="card"
              :class="{ recommend: val.recommend, vipFlag: val.my, active: val.id === chooseId}"
              @tap="handleChoose(val)"
            >
              <text>{{ val.name }}</text>
              <view>
                <uni-icons color="#f30" type="icon-renminbi1688" size="16" custom-prefix="iconfont"></uni-icons>
                <text>{{ val.price }}</text>
              </view>
            </view>
          </view>
        </swiper-item>	
      </swiper>
      <view v-if="typeof chooseId === 'number'" class="itemBox">
        套餐权益 ( {{ list.name }} )
        <uni-section
          v-for="item in list.list"
          :key="item.id"
          class="item"
          :class="{ active: item.active }"
          titleColor="#774e20"
          subTitleColor="#774e20"
          :title="item.text"
        >
          <template v-slot:right>
            <uni-icons color="#774e20" :type="item.active ? 'checkmarkempty' : 'closeempty'" size="20"/>
          </template>
        </uni-section>
      </view>
    </view>
    <view class="pay" v-if="!list.my">
      <view class="pay-box">
        <view class="price">
          <uni-icons color="#e68735" type="icon-renminbi1688" size="16" custom-prefix="iconfont"></uni-icons>
          {{ amount }}
        </view>
        <view class="btn" @tap="handleOpen">
          立刻升级
        </view>
        </view>
    </view>
    <uni-popup ref="popup" :is-mask-click="false" borderRadius="10px 10px 0 0" background-color="#eee">
      <view class="popup-content">
        <view class="popup-content-close">
          <view class="icon" @tap="handleClose">
            <uni-icons
              type="closeempty"
              color="#999"
              size="24"
            />
          </view>
        </view>
        <view class="popup-content-main">
          <view class="popup-content-main-count">
            <view class="title">{{ list.name }} 充值</view>
            <view class="pay">
              <uni-icons color="#000" type="icon-renminbi1688" size="16" custom-prefix="iconfont"></uni-icons>
              <view>{{ amount }}</view>
            </view>
          </view>
          <view class="popup-content-main-type">
            <view class="card">
              <radio-group @change="radioChange">
                <label class="card-label" v-for="(item, index) in payType" :key="item.value">
                  <view class="name">
                    <uni-icons :color="item.color" class="mr-1" :type="item.icon" size="24" custom-prefix="iconfont"></uni-icons>
                    {{item.name}}
                  </view>
                  <view>
                    <radio :value="item.value" :checked="index === payTypeCurrent" />
                  </view>
                </label>
              </radio-group>
            </view>
          </view>
        </view>
        <view class="popup-content-btn">
          <button class="popup-content-btn-s" @tap="handlePay">
            确认支付 
            <uni-icons color="#FFF" type="icon-renminbi1688" size="16" custom-prefix="iconfont"></uni-icons>
            {{ amount }}
          </button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { getUserAvatar } from '@/utils/avatar'
import { userStore } from '@/store/user'
import { getMembershipPackageList } from '@/api/vip'
import { orderCreated, getOrder, getSocialUser, socialUserBind, payOrderSubmit } from '@/api/common'
const useUserStore = userStore()

const baseInfo = computed(() => useUserStore?.baseInfo)
// const userInfo = computed(() => useUserStore?.userInfo)
const userInfo = ref(useUserStore?.userInfo || {})

const memberList = ref([])
const recommend = ref(null)
const chooseId = ref(null)

const popup = ref()

const amount = computed(() => {
  return parseFloat(+list.value.price).toFixed(2)
})

const memberListLength = computed(() => {
  const result = [];  
  for (let i = 0; i < memberList.value.length; i += 2) {  
      const pair = memberList.value.slice(i, i + 2)
      result.push(pair)
  }
  return result
})

const pName = computed(() => {
  return memberList.value.find(item => +item.id === +userInfo.value?.vipFlag)?.name
})

const remaining = computed(() => {
  if (!userInfo.value?.vipExpireDate) return null
  const diffInMs =  userInfo.value?.vipExpireDate - new Date().getTime()
  const day = diffInMs / (1000 * 60 * 60 * 24)
  return day < 1 ? '今天' : Math.floor(day) + '天'
})

const list = computed(() => {
  const item = memberList.value.find(item => item.id === chooseId.value)
  return item ?? {}
})

const current = ref(0)
const payType = ref([
  {
    name: '微信支付',
    value: 'wx_lite',
    icon: 'icon-weixinzhifu',
    color: '#1AAD19'
  }
])

const payTypeCurrent = ref(0)
const channel = ref('')
const radioChange = (index) => {
  channel.value = payType[index].value
  payTypeCurrent.value = index
}

const chooseItem = ref(null)
const handleChoose = (val) => {
  chooseId.value = val.id
  chooseItem.value = val
}

const handleOpen = () => {
  popup.value.open('bottom')
}

const handleClose = () => {
  popup.value.close()
}

// 设置 openid 到本地存储，目前只有 pay 支付时会使用
const setOpenid = (openid) => {
  uni.setStorageSync('openid', openid)
}

const bind = () => {
  return new Promise(async (resolve, reject) => {
    // 1. 获得微信 code
    const codeResult = await uni.login()
    if (codeResult.errMsg !== 'login:ok') {
      return resolve(false)
    }
    // 2. 绑定账号 // // 社交快捷登录
    const obj = {
      type: socialType,
      code: codeResult.code,
      state: 'default',
    }
    const bindResult = await socialUserBind(obj);
    if (bindResult.code === 0) {
      setOpenid(bindResult.data)
      return resolve(true)
    } else {
      return resolve(false)
    }
  })
}

const bindWeiXin = () => {
  uni.showModal({
    title: '微信支付',
    content: '请先绑定微信再使用微信支付',
    success: function (res) {
      if (res.confirm) {
        // 微信小程序绑定
        bind()
      }
    },
  });
}

const socialType = 34; // 社交类型 - 微信小程序

// 预支付
const prepay = async (channel, orderData) => { 
  return new Promise(async (resolve, reject) => {
    let data = {
      id: orderData.payOrder.id,
      channelCode: channel,
      channelExtras: {},
    };
    // 特殊逻辑：微信公众号、小程序支付时，必须传入 openid
    if (['wx_pub', 'wx_lite'].includes(channel)) {
      const userRes = await getSocialUser(socialType)
      const openid = userRes?.data?.openid ? userRes.data.openid : null
      // 如果获取不到 openid，微信无法发起支付，此时需要引导
      if (!openid) {
        bindWeiXin()
        return
      }
      data.channelExtras.openid = openid
    }
    // 发起预支付 API 调用
    payOrderSubmit(data).then((res) => {
      // 成功时
      res.code === 0 && resolve(res)
      // 失败时
      if (res.code !== 0 && res.msg.indexOf('无效的openid') >= 0) {
        // 特殊逻辑：微信公众号、小程序支付时，必须传入 openid 不正确的情况
        if (
          res.msg.indexOf('无效的openid') >= 0 || // 获取的 openid 不正确时，或者随便输入了个 openid
          res.msg.indexOf('下单账号与支付账号不一致') >= 0
        ) {
          bindWeiXin()
        }
      }
    })
  })
}

const weChatMiniProgramPay = async (orderData) => {
  let res = await prepay('wx_lite', orderData); // 预支付
  if (res?.code !== 0) {
    return;
  }
  // 调用微信小程序支付
  const payConfig = res?.data?.displayContent ? JSON.parse(res.data.displayContent) : null
  if (!payConfig) return uni.showToast({ title: '购买失败', icon: 'none'})
  uni.requestPayment({
    provider: 'wxpay',
    timeStamp: payConfig.timeStamp,
    nonceStr: payConfig.nonceStr,
    package: payConfig.packageValue,
    signType: 'RSA',
    paySign: payConfig.paySign,
    success: (res) => {
      popup.value.close()
      uni.showToast({ title: '支付成功', icon: 'none'})
      setTimeout(async () => {
        const _userInfo = await useUserStore.getUserInfo()
        userInfo.value = _userInfo
        getMemberList()
      }, 1500)
      // this.payResult('success');
    },
    fail: (err) => {
      if (err.errMsg === 'requestPayment:fail cancel') {
        uni.showToast({ title: '支付已取消', icon: 'none'})
      } else {
        // this.payResult('fail');
        uni.showToast({ title: '支付失败', icon: 'none'})
      }
    },
  });
}

// 支付
const handlePay = async () => {
  const val = chooseItem.value
  try {
    const res = await getOrder({
      spuId: val.id, // 商品编号
      type: val.type
    })
    if (res.data) {
      // 获取支付码
      weChatMiniProgramPay(res.data)
      return
    }

    await orderCreated({
      spuId: val.id, // 商品编号
      spuName: val.name, // 商品名称
      price: val.price*100, // 价格
      type: val.type // 订单类型 0平台订单|1求职端订单|2招聘端订单|3会员套餐
    })

    const _res = await getOrder({
      spuId: val.id, // 商品编号
      type: val.type
    })

    // 获取支付码
    weChatMiniProgramPay(_res.data)
  } catch (error) {
    console.log(error)
  } finally {
    val.loading = false
  }
}

const getMemberList = async () => {
  try {
    const { data } = await getMembershipPackageList()
    if (!data || data.length === 0) {
      return
    }
    // memberList.value = data
    let vipFlagIndex = null
    const list = data.map((item, index) => {
      if (+item.id === +userInfo.value?.vipFlag) {
        vipFlagIndex = index // 低于当前套餐的(套餐)不展示
      }
      if (item.recommend) {
        recommend.value = index // 推荐套餐
      }
      return {
        ...item,
        price: item.price/100,
        my: vipFlagIndex === index,
        list: JSON.parse(item.text),
        type: 3, // 订单类型 0平台订单|1求职端订单|2招聘端订单|3会员套餐
        loading: false
      }
    })
    // 低于当前套餐的(套餐)不展示
    memberList.value = vipFlagIndex ? list.slice(vipFlagIndex) : list
    if ((!userInfo.value?.vipFlag || userInfo.value?.vipExpireDate - new Date().getTime() > 0 ) && typeof recommend.value === 'number') {
      current.value = vipFlagIndex === 0 ? 0 : parseInt((vipFlagIndex || recommend.value) / 2)
    }
    // 设置选中项
    const chooseIndex = vipFlagIndex !== null ? vipFlagIndex : recommend.value
    handleChoose(memberList.value[chooseIndex])
  } catch (error) {
    uni.showToast({ title: '查询数据失败，请重试', icon: 'none' })
  }
}
getMemberList()

// const getPayMethodsList = async () => {
//   try {
//   } catch (error) {
//     // uni.showToast({ title: '查询数据失败，请重试', icon: 'none' })
//   }
// }
// getPayMethodsList()

</script>

<style lang="scss" scoped>
.vipBox {
	// color: #a18a0f;
  padding: 80rpx 50rpx;
  display: flex;
  background: linear-gradient(121deg,#fde2c2 29.02%,#c19164 104.03%);
  .avatar{
    position: relative;
    width: 100rpx;
    height: 100rpx;
    margin: 0;
    .img-box {
      width: 100%;
      height: 100%;
      border: 2rpx solid #ccc;
      border-radius: 50%;
      border: 1px solid gold;
    }
    .img-box-atc {
      border: 1px solid gold;
    }
    .vipIcon {
      position: absolute;
      width: 50%;
      height: 50%;
      bottom: 0;
      right: 0;
      transform: translate(0, 30%);
    }
  }
  .nameBox {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 30rpx;
    .name {
      color: #724d2b;
    }
    .vipInfo {
      color: #572a00;
    }
  }
}

.swiper-box {
  height: 230rpx;
  .swiper-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .swiper-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200rpx;
    padding: 20rpx 10rpx;
    box-sizing: border-box;
    .card {
      color: #774e20;
      background-color: rgb(255, 251, 248);
      border: 1px solid #f1b17a;
      width: 100%;
      height: 100%;
      border-radius: 10rpx;
      padding: 0 20rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      overflow: hidden;
      &.recommend {
        &::after {
          content: '推荐';
          position: absolute;
          right: 0;
          top: 0;
          padding: 6rpx 10rpx;
          font-size: 28rpx;
          background: linear-gradient(121deg,#fde2c2 29.02%,#c19164 104.03%);
        }
      }
      &.vipFlag {
        &::before {
          content: '我的套餐';
          position: absolute;
          left: 0;
          top: 0;
          padding: 6rpx 10rpx;
          font-size: 28rpx;
          background: linear-gradient(121deg,#fde2c2 29.02%,#c19164 104.03%);
        }
      }
      &.active {
        box-shadow: 0 0 18rpx 0 rgb(216 160 82);
      }
    }
  }
}

.itemBox {
  padding: 20rpx 40rpx;
  .item {
    // padding: 10rpx 0;
    margin-top: 20rpx;
    // color: rgba(119,78,32,.5);
    // &.active {
      color:#774e20;
    // }
  }
}

.pay {
  position: sticky;
  bottom: 0;
  padding: 0 40rpx 50rpx 40rpx;
  box-sizing: border-box;
  &-box {
    width: 100%;
    background: linear-gradient(121deg,#fde2c2 29.02%,#c19164 104.03%);
    border-radius: 180rpx 0 180rpx 0;
    box-shadow: 3rpx 6rpx 10rpx 0rpx rgb(216 160 82);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    .price {
      padding: 0 40rpx;
      font-size: 40rpx;
      font-weight: 600;
      color: #e68735;
    }
    .btn {
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 40rpx;
      border: 2rpx solid #00897B;
      background: #00897B;
      color: #FFF;
      border-radius: 180rpx 0 180rpx 0;
      position: relative;
      // &::after {
      //   content: '';
      //   position: absolute;
      //   width: 50rpx;
      //   height: 50rpx;
      //   background: radial-gradient(top right, transparent 50%, #00897B 50%);
      //   left: 0;
      //   top: 0;
      //   margin-left: -25rpx;
      //   border-radius: 180rpx;
      // }
    }
  }
}

.popup-content {
  max-height: 500px;
  display: flex;
  flex-direction: column;
  &-close {
    display: flex;
    padding: 10px;
    justify-content: flex-end;
    .icon {
      width: 30px;
      height: 30px;
      background: #ccc;
      border-radius: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  &-main {
    flex: 1;
    height: 0;
    overflow-y: auto;
    &-count {
      margin-bottom: 20px;
      text-align: center;
      .title {
        font-size: 28rpx;
        color: #666
      }
      .pay {
        font-size: 52rpx;
        color: #000;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 0;
      }
    }
    &-type {
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
      .card {
        border-radius: 10px;
        margin: 0 auto;
        background: #FFF;
        padding: 10px;
        &-label {
          padding: 15px 0;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #eee;
          &:last-of-type {
            border-bottom: none;
          }
          .name {
            display: flex;
            align-items: center;
            color: #333;
          }
        }
      }
    }
  }
  &-btn {
    height: 70px;
    width: 100%;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    &-s {
      height: 40px;
      width: 75%;
      line-height: 40px;
      color: #FFF;
      // color: #724d2b;
      background: #00897B;
      // background: linear-gradient(121deg,#fde2c2 29.02%,#c19164 104.03%);
      border-radius: 90px;
    }
  }
}
.mr-1 {
  margin-right: 10px;
}
</style>