RenewForm.vue 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357
  1. <template>
  2. <view class="com-renew-form">
  3. <view class="renew-form">
  4. <view class="vip_head"><view class="vip-form-title">{{userInfo.nickname}},您的权益情况:</view> <view class="cardcoup" @click="onViewEquity"><text>查看我的卡券</text></view></view>
  5. <view class="vip-form">
  6. <view class="vip-form-tab" >
  7. <block v-if="ticketList ">
  8. <block v-for="(it,index) in ticketList" >
  9. <view class="tab" @click="onViewEquity"> <view class="col1">
  10. <!-- 商品券 --> <image src="/static/images/coffeecup.png" v-if="it.ticket.type==1" class="icon" mode="aspectFit"/>
  11. <!-- 课程券 -->
  12. <image src="/static/images/gl.png" v-if="it.ticket.type==2" class="icon" mode="aspectFit"/>
  13. <!-- 剧场活动 -->
  14. <image src="/static/images/door.png" v-if="it.ticket.type==3" class="icon" mode="aspectFit"/>
  15. <!-- 早鸟会员 --> <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>
  16. <view class="col3" >
  17. <block v-if="it.ticket.type==1">{{it.qty}}份</block>
  18. <block v-if="it.ticket.type==2">{{it.qty}}节</block>
  19. <block v-if="it.ticket.type==3">{{it.qty}}场</block>
  20. <block v-if="it.ticket.type==4">{{it.qty}}节</block>
  21. </view> </view>
  22. </block>
  23. <view class="tab" v-if="userInfo.zlDays>0">
  24. <view class="col1">
  25. <!-- 早鸟会员 -->
  26. <image src="/static/images/door.png" class="icon" mode="aspectFit"/>
  27. </view>
  28. <view class="col2"><text class="txtred">会员早鸟</text>--社区中心早鸟权益提前{{userInfo.zlDays}}天</view>
  29. <view class="col3" >
  30. <block >享有</block>
  31. </view>
  32. </view>
  33. </block>
  34. <block v-else><view class="RenewInfo">目前您还没有购买任何会员</view></block>
  35. </view>
  36. </view>
  37. <view class="renew-tips">
  38. <block v-for="(it,index) in leveList">
  39. <view class="text" v-if="activeIndex==index">您当前选择了:<text class="txt">{{it.name}}</text></view>
  40. </block>
  41. </view>
  42. <view class="renew-list">
  43. <view class="list-items">
  44. <block v-for="(it,index) in leveList">
  45. <view class="item " :class="activeIndex==index?'actived':''" @click="onPickLeve(index)">
  46. <view class="tips" >{{it.name}}</view>
  47. <view class="item-img">
  48. <view class="vip-list">
  49. <block v-for="(item,itemIndex) in it.items">
  50. <view class="vip-item bottomBg">
  51. <view class="vip-img">
  52. <!-- 商品券 -->
  53. <image src="/static/images/coffeecup.png" v-if="item.ticket.type==1" class='img' mode="aspectFit"/>
  54. <!-- 课程券 -->
  55. <image src="/static/images/gl.png" v-if="item.ticket.type==2" class='img' mode="aspectFit"/>
  56. <!-- 剧场活动 -->
  57. <image src="/static/images/door.png" v-if="item.ticket.type==3" class='img' mode="aspectFit"/>
  58. </view>
  59. <view class="vip-content">
  60. <view class="content-item">
  61. <view class="vip-item-cap">{{item.name}}</view>
  62. <view class="vip-item-text" v-if="item.ticket.type!=4">{{item.qty}}
  63. <block v-if="item.ticket.type==1">份</block>
  64. <block v-if="item.ticket.type==2">节</block>
  65. <block v-if="item.ticket.type==3">场</block>
  66. </view>
  67. </view>
  68. </view>
  69. </view>
  70. </block>
  71. <!--
  72. <view class="vip-item bottomBg">
  73. <view class="vip-img"><image src="/static/images/gl.png" mode="widthFix" class="img"></image></view>
  74. <view class="vip-content">
  75. <view class="content-item">
  76. <view class="vip-item-cap">器械区</view>
  77. <view class="vip-item-text">{{it.qixie}}天</view>
  78. </view>
  79. <view class="content-item">
  80. <view class="vip-item-cap">私教课</view>
  81. <view class="vip-item-text">{{it.sijiaoday}}天内{{it.sijiaojie}}节</view>
  82. </view>
  83. <view class="content-item">
  84. <view class="vip-item-cap">小班课</view>
  85. <view class="vip-item-text">{{it.xiaobanday}}天内{{it.xiaobanjie}}节</view>
  86. </view>
  87. </view>
  88. </view>
  89. <view class="vip-item bottomBg">
  90. <view class="vip-img"><image src="/static/images/ftmenu2.png" mode="widthFix" class="img"></image></view>
  91. <view class="vip-content">
  92. <view class="content-item">
  93. <view class="vip-item-cap">早鸟特权</view>
  94. <view class="vip-item-text">{{it.early}}天</view>
  95. </view>
  96. </view>
  97. </view> -->
  98. <view class="vip-item bottomBg" v-if="it.zlDays>0">
  99. <view class="vip-img">
  100. <!-- 剧场活动 -->
  101. <image src="/static/images/door.png" class='img' mode="aspectFit"/>
  102. </view>
  103. <view class="vip-content">
  104. <view class="content-item">
  105. <view class="vip-item-cap">赠送社区中心早鸟权益</view>
  106. <view class="vip-item-text" >提前{{it.zlDays}}
  107. <block >天</block>
  108. </view>
  109. </view>
  110. </view>
  111. </view>
  112. </view>
  113. <view class="btncoup_date">有效期:{{it.items[0].expireTime}}天</view> <view class="btncoup" @click="onViewEquity"><text>我的卡券</text></view>
  114. <view class="RenewInfo">{{it.intro}}</view>
  115. </view>
  116. <view class="item-price">
  117. <view class="price">
  118. <text class="sign">¥</text>{{it.price}}
  119. </view>
  120. </view>
  121. <view class="active" v-if="activeIndex==index">
  122. <uni-icons type="checkbox-filled" size="30"></uni-icons>
  123. </view>
  124. </view>
  125. </block>
  126. </view>
  127. </view>
  128. <view class="renew-btns">
  129. <button class="btn-pay" @click="onBuyOrder">立即支付</button>
  130. </view>
  131. </view>
  132. <view class="letter"></view>
  133. </view>
  134. </template>
  135. <script>
  136. import {
  137. mapState,
  138. mapMutations
  139. } from 'vuex'
  140. export default {
  141. formattedIntro:'',
  142. name: "RenewForm",
  143. emits:['onCloseRenew'],
  144. props: {
  145. leveList: {
  146. type: Array,
  147. default: () => {
  148. return [];
  149. }
  150. }
  151. },
  152. watch:{
  153. 'leveList':{
  154. handler(newVar,oldVar){
  155. console.log("NewVar",newVar);
  156. },
  157. deep:true,
  158. immediate:true,
  159. },
  160. 'userInfo':{
  161. handler(newVar,oldVar){
  162. this.initUserLevel();
  163. },
  164. deep:true,
  165. immediate:true,
  166. }
  167. },
  168. computed: {
  169. userInfo() {
  170. return this.$store.state.userInfo;
  171. },
  172. },
  173. data() {
  174. return {
  175. activeIndex: 0,
  176. ticketList: [],
  177. };
  178. },
  179. created() {
  180. this.fetchUserTicket();
  181. },
  182. computed: {
  183. ...mapState(['systemInfo', 'store_id', 'userInfo']),
  184. },
  185. onShow() {
  186. },
  187. methods: {
  188. formatIntro: function(intro) {
  189. if (intro && intro.length > 15) {
  190. return intro.substring(0, 15) + "...";
  191. } else {
  192. return intro || '';
  193. }
  194. },
  195. fetchUserTicket() {
  196. this.$http
  197. .request('userticket/search', { userId: this.userInfo.id, page: 1, pageSize: 999 }, '', '', true)
  198. .then((res) => {
  199. this.ticketList = res.data.dataList;
  200. })
  201. .catch((err) => {
  202. console.error(err);
  203. });
  204. },
  205. onPickLeve(e) {
  206. this.activeIndex = e;
  207. },
  208. onViewEquity(e){
  209. uni.navigateTo({
  210. url:'/pages/equity/equity',
  211. })
  212. },
  213. initUserLevel(){
  214. let _this=this;
  215. _this.$http.request('member/getMemberLevelInfo', {
  216. openid:_this.userInfo.openid,
  217. }, "", "", true).then(res => {
  218. let js=JSON.parse(res.data.data.levelData);
  219. _this.currentLevel=js;
  220. }).catch(err => {})
  221. },
  222. onBuyOrder(e) {
  223. let _this = this;
  224. let level = _this.leveList[_this.activeIndex];
  225. let par = {
  226. level_id: level.id,
  227. user_id: _this.userInfo.id,
  228. pay_type: 1,
  229. }
  230. _this.$http.request('theater/addLevelOrder', {
  231. ...par
  232. }, "", "", true).then(res => {
  233. if (res.code == '200') {
  234. // #ifdef MP-WEIXIN
  235. wx.requestPayment({
  236. timeStamp: res.data.timeStamp,
  237. nonceStr: res.data.nonceStr,
  238. package: res.data.package,
  239. signType: res.data.signType,
  240. paySign: res.data.paySign,
  241. success: (res) => {
  242. uni.showToast({
  243. title:'您已支付成功',
  244. icon:'success',
  245. success: (e) => {
  246. _this.fetchUserTicket();
  247. _this.$emit("onCloseRenew");
  248. }
  249. })
  250. },
  251. fail: (res) => {
  252. uni.showToast({
  253. title:'支付失败',
  254. icon:'error',
  255. success: (e) => {
  256. _this.$emit("onCloseRenew");
  257. }
  258. })
  259. }
  260. })
  261. // #endif
  262. }
  263. }).catch(err => {})
  264. },
  265. }
  266. }
  267. </script>
  268. <style lang="scss">
  269. @import './RenewForm.scss'
  270. </style>