123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231 |
- <!--
- * @Description:
- * @Author: 欧阳承珺
- * @LastEditors: 欧阳承珺
- * @Date: 2022-10-31 20:41:42
- * @LastEditTime: 2022-11-15 19:24:18
- -->
- <template>
- <div>
- <div v-show="orderStatus !== 'success'">
- <p class="text-22px text-[#666] text-center font-500">升级成为会员</p>
- <div class="py-27px px-35px">
- <p class="text-16px text-[#4d4d4d] mb-30px">开通时长:</p>
- <div class="flex justify-between">
- <div v-for="(item,idx) in list" :key="idx" class="w-116px h-130px relative cursor-pointer" :style="{'border': choosedVip.period === item.period ? '2px solid #FF4F4F' : '1px solid #b3b3b3'}" @click="chooseVip(item)">
- <span v-if="idx === 2" class="note">仅{{Math.round(10 * item.price/getMonth(item)) / 10}}/月</span>
- <div class="w-full h-79px text-16px font-[#878787] leading-79px text-center font-400"><span class="text-26px font-500">{{item.price}}</span>元</div>
- <div style="border-top: 1px solid #b8b8b8;" class="w-90px mx-auto h-49px text-16px text-black leading-49px text-center font-400">{{getMonth(item)}}个月</div>
- </div>
- </div>
- </div>
- <div class="py-27px px-35px">
- <p class="text-16px text-[#4d4d4d] mb-14px">支付方式:</p>
- <div class="pay-method" :style="{'border': paymethod === 'wechat' ? '2px solid #FF4F4F' : '1px solid #b3b3b3'}" @click="choosePayMethod('wechat')">
- <img src="http://cn-file.17pdf.com/website/member_v2/members_ic_pay_weixin.png">
- </div>
- <div class="pay-method" :style="{'border': paymethod === 'alipay' ? '2px solid #FF4F4F' : '1px solid #b3b3b3'}" @click="choosePayMethod('alipay')">
- <img src="http://cn-file.17pdf.com/website/member_v2/members_ic_pay_zhifubao.png">
- </div>
- </div>
- <button v-if="paymethod === 'alipay'" class="play-now" @click="handlePlayNow">立即支付</button>
- <div v-else class="text-center">
- <div v-if="count <= 0">
- <div>
- <p class="text-18px mb-15px">二维码过期,请刷新</p>
- <el-button @click="handleFreshWechetCode">刷新</el-button>
- </div>
- </div>
- <div v-else>
- <client-only>
- <vue-qr :size="176" :text="qrcode"></vue-qr>
- </client-only>
- <p class="text-[#666] text-18px leading-20px">扫一扫 即可支付</p>
- </div>
- </div>
- </div>
- <div v-show="orderStatus === 'success'">
- <div class="pay-tittle">
- <p>支付成功</p>
- </div>
- <div class="pay-content">
- <img src="http://cn-file.17pdf.com/website/pricings/check.png" />
- <span>嘿嘿嘿...尽情享受您的特权吧</span>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- data() {
- return {
- list: [],
- choosedVip: {},
- paymethod: '',
- qrcode: '',
- count: 60,
- orderStatus: false
- }
- },
- created() {
- // this.resetInterfaceStatus()
- this.getVipList()
- },
- methods: {
- resetInterfaceStatus() {
- // this.getVipList()
- },
- handleFreshWechetCode() {
- this.count = 60
- this.choosePayMethod('wechat')
- },
- chooseVip(item) {
- this.choosedVip = item
- this.choosePayMethod(this.paymethod)
- },
- getMonth({period}) {
- return period.split('.')[0]
- },
- getVipList() {
- // 默认选择支付宝支付,调用相关信息
- this.paymethod = 'alipay'
- this.$axios.get('setPricing/list').then((res)=> {
- if(res.code === 200) {
- this.list = res.result.filter(item => item.mode !== 0) // 免费模式的不展示
- this.choosedVip = this.list[this.list.length - 1]
- }
- })
- },
- choosePayMethod(type) {
- this.paymethod = type
- const params = {
- client: 'web',
- payment: this.paymethod === 'wechat' ? 1 : 0,
- targetType: 'SetPricing',
- targetId: this.choosedVip.id
- }
- this.$axios.post('subscription/create',params).then((res) => {
- if(res.code === 200) {
- if(this.paymethod === 'wechat') {
- this.qrcode = res.result.order.qrcodeUrl
- this.getWechatPayStatus(res.result.order.id)
- }
- }
- })
- },
- getWechatPayStatus(id) {
- let interval = setInterval(() => {
- if(this.count > 0) {
- this.$axios.get(`order/getWxOrder?orderId=${id}`).then((res)=>{
- this.orderStatus = res?.result?.statusName
- if(this.orderStatus === 'success') {
- this.count = 0
- setTimeout(() => {
- this.$emit('close')
- // 更新个人信息
- this.getUserInfo()
- }, 1000);
- }else {
- this.count--
- }
- })
- }
- }, 2000);
- if(this.count === 0) {
- this.$once('hook:beforeDestroy',()=> {
- clearInterval(interval)
- interval = null
- })
- }
- },
- getUserInfo() {
- this.$axios.get('members/getMemberInfo').then((res)=> {
- if(res.code === 200) {
- this.$store.commit('setUser',res.result.memberInfo)
- this.$router.push('/members/me/expenses')
- }
- })
- },
- handlePlayNow() {
- const params = {
- client: 'web',
- payment: 0,
- targetType: 'SetPricing',
- targetId: this.choosedVip.id
- }
- this.$axios.post('subscription/create',params).then((res) => {
- if(res.code === 200) {
- location.href = res.result.order.pagePayUrl
- this.$store.commit('OPEN_LOGIN',false)
- }
- })
- }
- }
- }
- </script>
- <style lang="scss">
- .vip-wechat-qrcode {
- img {
- display: block;
- }
- }
- .note {
- width: 69px;
- height: 26px;
- background: url(http://cn-file.17pdf.com/website/member_v2/members_tag_price.png) no-repeat;
- background-size: 100% 100%;
- color: #fff;
- position: absolute;
- top: -11px;
- left: -7px;
- font-size: 14px;
- text-indent: 4px;
- text-align: left;
- }
- .pay-method{
- width: 116px;
- height: 50px;
- border: 1px solid #b3b3b3;
- border-radius: 2px;
- margin: 0 20px 0 0;
- text-align: center;
- cursor: pointer;
- display: inline-block;
- }
- .play-now{
- width: 376px;
- height: 58px;
- margin-left: 35px;
- background: #ff4f4f;
- font-size: 24px;
- border-radius: 2px;
- color: #fff;
- font-weight: 400;
- }
- .pay-tittle{
- height: 80px;
- line-height: 80px;
- color: rgb(51,51,51);
- font-size: 20px;
- text-align: center;
- }
- .pay-content{
- text-align: center;
- img{
- margin: 50px auto 30px;
- }
- span{
- color: rgb(195,195,195);
- margin-bottom: 125px;
- font-size: 14px;
- display: block;
- margin-top: 100px;
- }
- }
- </style>
|