123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357 |
- <template>
- <view class="com-renew-form">
- <view class="renew-form">
- <view class="vip_head"><view class="vip-form-title">{{userInfo.nickname}},您的权益情况:</view> <view class="cardcoup" @click="onViewEquity"><text>查看我的卡券</text></view></view>
- <view class="vip-form">
-
- <view class="vip-form-tab" >
- <block v-if="ticketList ">
- <block v-for="(it,index) in ticketList" >
- <view class="tab" @click="onViewEquity">
<view class="col1">
- <!-- 商品券 -->
<image src="/static/images/coffeecup.png" v-if="it.ticket.type==1" class="icon" mode="aspectFit"/>
- <!-- 课程券 -->
- <image src="/static/images/gl.png" v-if="it.ticket.type==2" class="icon" mode="aspectFit"/>
- <!-- 剧场活动 -->
- <image src="/static/images/door.png" v-if="it.ticket.type==3" class="icon" mode="aspectFit"/>
- <!-- 早鸟会员 -->
<image src="/static/images/door.png" v-if="it.ticket.type==4" class="icon" mode="aspectFit"/>
</view>
<view class="col2"><text class="txtred">{{it.ticket.name}}</text>--{{formatIntro(it.ticket.intro)}}</view>
- <view class="col3" >
-
- <block v-if="it.ticket.type==1">{{it.qty}}份</block>
- <block v-if="it.ticket.type==2">{{it.qty}}节</block>
- <block v-if="it.ticket.type==3">{{it.qty}}场</block>
- <block v-if="it.ticket.type==4">{{it.qty}}节</block>
- </view>
</view>
-
-
-
-
-
-
-
-
-
-
-
- </block>
-
- <view class="tab" v-if="userInfo.zlDays>0">
- <view class="col1">
-
- <!-- 早鸟会员 -->
- <image src="/static/images/door.png" class="icon" mode="aspectFit"/>
- </view>
- <view class="col2"><text class="txtred">会员早鸟</text>--社区中心早鸟权益提前{{userInfo.zlDays}}天</view>
- <view class="col3" >
-
- <block >享有</block>
-
- </view>
- </view>
- </block>
-
- <block v-else><view class="RenewInfo">目前您还没有购买任何会员</view></block>
-
- </view>
-
- </view>
- <view class="renew-tips">
- <block v-for="(it,index) in leveList">
- <view class="text" v-if="activeIndex==index">您当前选择了:<text class="txt">{{it.name}}</text></view>
- </block>
- </view>
- <view class="renew-list">
- <view class="list-items">
- <block v-for="(it,index) in leveList">
- <view class="item " :class="activeIndex==index?'actived':''" @click="onPickLeve(index)">
- <view class="tips" >{{it.name}}</view>
- <view class="item-img">
- <view class="vip-list">
-
- <block v-for="(item,itemIndex) in it.items">
- <view class="vip-item bottomBg">
- <view class="vip-img">
- <!-- 商品券 -->
- <image src="/static/images/coffeecup.png" v-if="item.ticket.type==1" class='img' mode="aspectFit"/>
- <!-- 课程券 -->
- <image src="/static/images/gl.png" v-if="item.ticket.type==2" class='img' mode="aspectFit"/>
- <!-- 剧场活动 -->
- <image src="/static/images/door.png" v-if="item.ticket.type==3" class='img' mode="aspectFit"/>
-
- </view>
- <view class="vip-content">
- <view class="content-item">
- <view class="vip-item-cap">{{item.name}}</view>
- <view class="vip-item-text" v-if="item.ticket.type!=4">{{item.qty}}
- <block v-if="item.ticket.type==1">份</block>
- <block v-if="item.ticket.type==2">节</block>
- <block v-if="item.ticket.type==3">场</block>
- </view>
-
- </view>
-
-
- </view>
-
- </view>
-
- </block>
-
- <!--
- <view class="vip-item bottomBg">
- <view class="vip-img"><image src="/static/images/gl.png" mode="widthFix" class="img"></image></view>
- <view class="vip-content">
- <view class="content-item">
- <view class="vip-item-cap">器械区</view>
- <view class="vip-item-text">{{it.qixie}}天</view>
- </view>
- <view class="content-item">
- <view class="vip-item-cap">私教课</view>
- <view class="vip-item-text">{{it.sijiaoday}}天内{{it.sijiaojie}}节</view>
- </view>
- <view class="content-item">
- <view class="vip-item-cap">小班课</view>
- <view class="vip-item-text">{{it.xiaobanday}}天内{{it.xiaobanjie}}节</view>
- </view>
- </view>
- </view>
- <view class="vip-item bottomBg">
- <view class="vip-img"><image src="/static/images/ftmenu2.png" mode="widthFix" class="img"></image></view>
- <view class="vip-content">
- <view class="content-item">
- <view class="vip-item-cap">早鸟特权</view>
- <view class="vip-item-text">{{it.early}}天</view>
- </view>
- </view>
- </view> -->
- <view class="vip-item bottomBg" v-if="it.zlDays>0">
- <view class="vip-img">
-
- <!-- 剧场活动 -->
- <image src="/static/images/door.png" class='img' mode="aspectFit"/>
-
- </view>
- <view class="vip-content">
- <view class="content-item">
- <view class="vip-item-cap">赠送社区中心早鸟权益</view>
- <view class="vip-item-text" >提前{{it.zlDays}}
-
- <block >天</block>
-
- </view>
-
- </view>
-
-
- </view>
-
- </view>
-
- </view>
- <view class="btncoup_date">有效期:{{it.items[0].expireTime}}天</view> <view class="btncoup" @click="onViewEquity"><text>我的卡券</text></view>
- <view class="RenewInfo">{{it.intro}}</view>
- </view>
- <view class="item-price">
- <view class="price">
- <text class="sign">¥</text>{{it.price}}
- </view>
- </view>
- <view class="active" v-if="activeIndex==index">
- <uni-icons type="checkbox-filled" size="30"></uni-icons>
- </view>
- </view>
- </block>
- </view>
- </view>
- <view class="renew-btns">
-
- <button class="btn-pay" @click="onBuyOrder">立即支付</button>
- </view>
-
-
-
- </view>
- <view class="letter"></view>
-
- </view>
- </template>
- <script>
- import {
- mapState,
- mapMutations
- } from 'vuex'
- export default {
- formattedIntro:'',
- name: "RenewForm",
- emits:['onCloseRenew'],
- props: {
- leveList: {
- type: Array,
- default: () => {
- return [];
- }
- }
- },
- watch:{
- 'leveList':{
- handler(newVar,oldVar){
-
- console.log("NewVar",newVar);
- },
- deep:true,
- immediate:true,
- },
-
- 'userInfo':{
- handler(newVar,oldVar){
-
- this.initUserLevel();
- },
- deep:true,
- immediate:true,
- }
- },
- computed: {
-
- userInfo() {
- return this.$store.state.userInfo;
- },
- },
- data() {
-
-
-
- return {
- activeIndex: 0,
-
- ticketList: [],
- };
-
-
-
- },
- created() {
- this.fetchUserTicket();
- },
- computed: {
- ...mapState(['systemInfo', 'store_id', 'userInfo']),
- },
- onShow() {
- },
- methods: {
- formatIntro: function(intro) {
- if (intro && intro.length > 15) {
- return intro.substring(0, 15) + "...";
- } else {
- return intro || '';
- }
- },
-
- fetchUserTicket() {
- this.$http
- .request('userticket/search', { userId: this.userInfo.id, page: 1, pageSize: 999 }, '', '', true)
- .then((res) => {
- this.ticketList = res.data.dataList;
- })
- .catch((err) => {
- console.error(err);
- });
- },
- onPickLeve(e) {
- this.activeIndex = e;
- },
- onViewEquity(e){
- uni.navigateTo({
- url:'/pages/equity/equity',
- })
- },
- initUserLevel(){
- let _this=this;
- _this.$http.request('member/getMemberLevelInfo', {
- openid:_this.userInfo.openid,
- }, "", "", true).then(res => {
- let js=JSON.parse(res.data.data.levelData);
- _this.currentLevel=js;
- }).catch(err => {})
- },
- onBuyOrder(e) {
- let _this = this;
- let level = _this.leveList[_this.activeIndex];
- let par = {
- level_id: level.id,
- user_id: _this.userInfo.id,
- pay_type: 1,
- }
- _this.$http.request('theater/addLevelOrder', {
- ...par
- }, "", "", true).then(res => {
- if (res.code == '200') {
- // #ifdef MP-WEIXIN
- wx.requestPayment({
- timeStamp: res.data.timeStamp,
- nonceStr: res.data.nonceStr,
- package: res.data.package,
- signType: res.data.signType,
- paySign: res.data.paySign,
- success: (res) => {
-
- uni.showToast({
- title:'您已支付成功',
- icon:'success',
- success: (e) => {
- _this.fetchUserTicket();
- _this.$emit("onCloseRenew");
- }
- })
- },
- fail: (res) => {
- uni.showToast({
- title:'支付失败',
- icon:'error',
- success: (e) => {
- _this.$emit("onCloseRenew");
- }
- })
- }
- })
- // #endif
- }
- }).catch(err => {})
- },
- }
- }
- </script>
- <style lang="scss">
- @import './RenewForm.scss'
- </style>
|