bnyer-cloud-tiktok/pages/userInfo/vip/vip.vue

<template>
  <view>
    <view class="container">
      <view class="header">
        <view class="vip-info">
          <image :src="userInfo.img" mode="" class="vip-info__avatar"></image>
          <view>
            <view class="vip-info__name">{{userInfo.username}}</view>
            <view class="vip-info__tips" v-if="vipInfo.isVip == '0'">你还不是会员,开通立享 9 项特权</view>
            <view class="vip-info__tips" v-if="vipInfo.isVip == '1'">您的会员为：{{vipInfo.vipTypeName}}</view>
            <view class="vip-info__tips" v-if="vipInfo.isVip == '1'">到期时间为：{{vipInfo.endTime}}</view>
          </view>
        </view>
        <!-- <view class="vip-explan" v-if="vipInfo.isVip == '0'">
          会员说明
          <uni-icons type="help" size="20" color="#eee" @click="openIntro()"/>
        </view> -->
      </view>

      <view class="vip-box" v-if="systemInfo != 'ios'">
        <view class="vip-box__item" :class="{'item-active':active == index}" @click="change(index)"
          v-for="(item,index) in vipList" :key="index">
          <view class="title">
            {{item.vipName}}
          </view>
          <view class="price">
            <text class="price-unit">¥</text> {{item.price}}
          </view>
          <view class="o-price">
            {{item.originPrice}}
          </view>
          <view class="save-box">
            立省{{parseFloat(item.originPrice - item.price).toFixed(2)}}元
          </view>
        </view>
      </view>
	  
	 <view class="" v-if="systemInfo === 'ios'">
		<view class="iosStyle">由于相关政策,ios端暂不支持开通会员,请谅解.您可通过联系"次元意境"官方客服了解详情。</view>
		<button class="linkToUs" type="default" plain="true" size="mini" open-type="im" data-im-id="DimenMusicHub">联系客服</button>
	  </view>

      <button class="sumbit-btn" @click="$noMultipleClicks(openVip)" :disabled="disabled" v-if="systemInfo != 'ios'">
        立即开通
      </button>

      <view class="opened-member-info">
        <view class="member-info-title">他们已经享受了会员权益</view>
        <MemberScroll />
      </view>
      <view class="member-benefits">
        <view class="benefits-title title">会员权益</view>
        <view class="benefits-list">
          <view class="benefits-item" v-for="item in memberBenefits" >
            <view class="benefits-icon-div" :style="{backgroundColor: item.bgColor}">
              <uni-icons class="benefits-icon" custom-prefix="iconfont" :type="item.icon" size="22" :color="item.iconColor" ></uni-icons>
            </view>
            <view class="benefits-info">
              <view class="benefits-name">{{ item.info }}</view>
              <view class="benefits-description">{{ item.description }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="purchase-instructions instructions">
      <view class="instructions-title title">购买须知</view>
      <view class="ul">
        <view class="li" v-for="item in purchaseList">
          <view class="point">·</view>
          <view class="content">{{ item }}</view>
        </view>
      </view>
    </view>
<!--    <view class="auto-renewal-instructions instructions">
      <view class="instructions-title title">自动续费说明</view>
      <view class="ul">
        <view class="li" v-for="item in autoRenewalList">
          <view class="point">·</view>
          <view class="content">{{ item }}</view>
        </view> 
      </view>
    </view> -->
  </view>
</template>

<script>
	import {queryUserVipList,addVipOrder,unifiedOrder} from '@/api/userInfo.js'
	import {checkVip} from '@/api/paint.js'
	import MemberScroll from "./MemberScroll";

	export default {
    components: {MemberScroll},
		data() {
			return {
				userInfo: null,
				vipList: [],
				active: 0,
				disabled: false,
				vipInfo: undefined,
				systemInfo: undefined,
				noClick:true, //防止重复提交
        memberBenefits: [
          {icon: "icon-wuguanggao", iconColor: "#b07838", bgColor: "#fbefc5", info: "下载图片免广告", description: "无需看广告解锁，直接用"},
          {icon: "icon-biaoqing", iconColor: "#d58859", bgColor: "#fae1d8", info: "千万表情免费用", description: "超全超有趣的表情库，海量表情免费用"},
          {icon: "icon-shuazi", iconColor: "#667dc9", bgColor: "#d5e2e9", info: "情侣头像私人定制", description: "不要再和别人撞情头啦"},
          {icon: "icon-tupian", iconColor: "#9474c3", bgColor: "#e7d7fb", info: "头像壁纸随心选", description: "让您成为朋友圈最靓的仔"},
          {icon: "icon-tupian", iconColor: "#9474c3", bgColor: "#e7d7fb", info: "专属客服", description: "全天候为您服务"},
		  {icon: "icon-tupianliebiao", iconColor: "#d68353", bgColor: "#f4e1d3", info: "AI作画高级设置", description: "超精细设置，让您的作品别具一格"},
          {icon: "icon-zuanshi", iconColor: "#9e7438", bgColor: "#fbefc5", info: "尊贵身份", description: "专属会员身份标识"},
          {icon: "icon-neirongguanli", iconColor: "#916bd4", bgColor: "#e7d7f7", info: "每周精选内容推送", description: "热点再也不会错过啦"},
          {icon: "icon-weixin", iconColor: "#6eae9c", bgColor: "#d5ebec", info: "多端互通", description: "意境小程序同步权益"},
          {icon: "icon-jingqingqidai", iconColor: "#d5d5d7", bgColor: "#f2f3f5", info: "敬请期待", description: "更多精彩权益"},
        ],
        purchaseList: [
            "意境会员下载的全部内容，仅限个人使用，禁止商用。",
            "会员市场可以叠加购买，续费后过期时间顺延",
            "会员购买时立即生效，会员生效时常为购买时间加购买时长，比如您在2020年5月1日12点30分购买了一个月会员 (31天)，则在2020年6月1日12点31分期",
            "会员权益会在会员到期后失效",
            "购买会员后不支持退款",
        ],
        // autoRenewalList: [
        //     "付款:用户确认购买并付款后记入iTunes账户;",
        //     "续费:苹果账户iTunes账户会在到期前24小时内扣费，扣费成功后订阅周期顺延一个订阅周期;",
        //     "取消续订: 如需取消续订，请在订阅周期到期前24小时之前，手动在iTunes/AppleID设置管理中关闭自动续费功能，如到期前24小时内取消，依然会自动扣款再订阅一个周期。",
        // ]
			}
		},
		methods: {
			
			//打开抖音关注页
			  async linkToUs(){
					 tt.openAwemeUserProfile({
					   success: (res) => {
					     console.log(res);
					   }
					 });
				  },
			
			//获取系统信息
			async getSystemInfo() {
				let that = this;
				//获取系统版本
				uni.getSystemInfo({
					success(res) {
						that.systemInfo = res.osName
						console.log('系统信息为：',that.systemInfo)
					}
				});
			},
			
			//检查是否是vip
			async checkIsVip() {
				let that = this;
				const data = {
					userId: that.userInfo.id,
					userClientType: 10
				}
			 const res = await checkVip(data);
			 console.log('res===', res);
			 if (res.data.code === 200) {
				 that.vipInfo = res.data.data
			 }else {
			 	uni.showModal({
			 		content: '网络错误，请稍后再试~',
			 		showCancel: false
			 	});
			 }
			},
			
			async getVipList() {
				const {
					data
				} = await queryUserVipList();
				this.vipList = data.data
			},
			change(index) {
				this.active = index
			},
			async openVip() {
				let data = this.vipList[this.active];
				let phone = this.userInfo
				if (!Object.keys(data).length) return
				this.disabled = true
				uni.showLoading({
					title: "加载中..."
				});
				const res_add = await addVipOrder({
					vipId: data.id
				})
				//console.log('res_add',res_add)
				if(res_add.data.code === 200){
					let orderNo = res_add.data.data;
					const res_uni = await unifiedOrder({
						orderNo,
						sceneCode: 1,
						payType: 'dypay',
					})
					//console.log('res_uni',res_uni)
					if(res_uni.data.code === 200){
						let {orderId,orderToken} = res_uni.data.data.dyThirdInOrderVo
						this.tikPay(orderId,orderToken);
					}else{
						return uni.showToast({
							title: res_uni.data.msg,
							icon: 'none'
						})
					}
				}else{
					return uni.showToast({
						title: res_add.data.msg,
						icon: 'none'
					})
				}
			},
			tikPay(order_id, order_token) {
				tt.pay({
					orderInfo: {
						order_id,
						order_token
					},
					service: 5,
					success(res) {
						if (res.code == 0) {
						
						}
						uni.hideLoading();
						this.disabled = false
					},
					fail(res) {
						uni.hideLoading();
						this.disabled = false
					},
				})
			},
			//会员说明
			// openIntro(){
			// 	console.log("打开会员说明")
			// },
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.checkIsVip();
			this.getSystemInfo();
		},
		created() {
			if (!this.userInfo) {
				uni.navigateBack()
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				})
			}
			this.getVipList()
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex($center: center, $content: center) {
		display: flex;
		align-items: $center;
		justify-content: $content;
	}

	.container {
		padding: 30rpx;
		background: #fff;
    border-radius: 0 0 60rpx 60rpx;
		.iosStyle{
			color:red;
			font-size:35rpx;
		}
		.linkToUs{
			width: 400rpx;
			height: 80rpx;
			margin-top: 30rpx;
			border: none;
			//bottom: 50rpx;
			background-color: $uni-primary;
			border-radius: 50rpx;
			//padding-bottom: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 16px;
			color: $uni-white;
			&::after{
				border:none;
			}
		}
		
		.vip-box {
			margin: 30px 0;
			@include flex(center, space-between);
			
			

			.vip-box__item {
				width: 30%;
				height: 300rpx;
				padding: 20rpx;
				@include flex;
				flex-direction: column;
				color: #000;
				border: 1px solid #eee;
				border-radius: 30rpx;

				&>view {
					margin-bottom: 15rpx;
				}

				.title {
					font-weight: bold;
					font-size: 30rpx;
				}

				.price {
					font-weight: bold;
					font-size: 48rpx;
					color: #1991fd;

					.price-unit {
						font-size: 24rpx
					}
				}

				.o-price {
					color: #1991fd;
					font-size: 26rpx;
					text-decoration: line-through;
				}

				.save-box {
					border-radius: 30rpx;
					width: 150rpx;
					height: 50rpx;
					background-color: #e8f4ff;
					font-size: 24rpx;
					color: #68c2ff;
					@include flex;
				}
			}

			.item-active {
				border: none;
				background: linear-gradient(to bottom right, #68c2ff, #0684fe);



				.price,
				.title {
					color: #fff;
				}

				.o-price {
					color: #eee;
				}

				.save-box {
					color: #fff;
					background-color: rgba(255, 255, 255, .1);
				}
			}
		}

		.sumbit-btn {
			margin-top: 60rpx;
			height: 88rpx;
			@include flex;
			font-size: 26rpx;
			color: #fff;
			background: linear-gradient(to bottom right, #68c2ff, #0684fe);
		}

		.header {
			height: 200rpx;
			background-color: gray;
			padding: 20rpx;
			@include flex(center, space-between);
			border-radius: 20rpx;

			.vip-explan {
				color: #eee;
				font-size: 24rpx;
				@include flex(center, flex-start);

			}

			.vip-info {
				@include flex(center, flex-start);

				.vip-info__avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.vip-info__name {
					color: #fff;
					font-size: 30rpx;
					font-weight: 500;
					margin-bottom: 10rpx;
				}

				.vip-info__tips {
					color: #eee;
					font-size: 24rpx
				}
			}
		}
    .opened-member-info {
      background-color: $uni-primary-20;
      padding: 20rpx;
      margin: 20rpx auto;
      border-radius: 10rpx;
      color: $uni-primary;

      .member-info-title {
        font-size: 24rpx;
        margin-bottom: 20rpx;
        font-weight: 600;
      }

    }

    .member-benefits {

      .benefits-title {

      }

      .benefits-list {
        display: flex;
        flex-wrap: wrap;

        .benefits-item {
          height: 120rpx;
          width: 50%;
          display: flex;
          align-items: center;

          .benefits-icon-div {
            height: 80rpx;
            width: 80rpx;
            border-radius: 40rpx;
            flex-shrink: 0;
            text-align: center;
            line-height: 80rpx;
            margin-right: 20rpx;

            .benefits-icon {

            }

          }

          .benefits-info {
            height: 120rpx;

            .benefits-name {
              margin-top: 12rpx;
              font-size: 28rpx;
              line-height: 48rpx;
            }

            .benefits-description {
              font-size: 20rpx;
              line-height: 32rpx;
              color: $uni-base-color;
            }

          }

        }

      }

    }
	}
  .title {
    font-size: 40rpx;
    margin-bottom: 20rpx;
  }

  .purchase-instructions {
    padding: 30rpx;

  }
  .auto-renewal-instructions {
    padding: 30rpx;

  }

  .instructions {

    .ul {

      .li {
        display: flex;
        color: $uni-base-color;
        font-size: 24rpx;
        line-height: 36rpx;
        margin-bottom: 10rpx;

        .point {
          width: 30rpx;
          text-align: center;
          flex-shrink: 0;
        }

        .content {

        }

      }

    }

  }

</style>