index.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. <template>
  2. <view class="kCouponIdx">
  3. <u-popup zIndex="10070" :customStyle="{ backgroundColor: '#fff' }" :show="popShow" :round="10" mode="bottom"
  4. @close="popClose" closeable>
  5. <view class="o-plr-30 o-ptb-20">
  6. <view class="l-flex-center c-text-20 o-pb-30">请选择优惠券</view>
  7. <scroll-view style="height: 50vh;" scroll-y="true">
  8. <u-checkbox-group v-model="coupCheckValue" @change="single_checkboxChg">
  9. <view class="o-w">
  10. <view @click.self="isCheckChg(item)"
  11. class="content o-w l-flex-between o-plr-20 l-boxShadow o-mb-20"
  12. v-for="(item, index) in coupCheckList" :key="index">
  13. <view class="l-flex-RC">
  14. <view class="leftCon o-ptb-40 o-plr-40">
  15. <view class="couponColor">
  16. <text class="c-text-12">¥</text>
  17. <text class="c-text-20 c-text-b">{{ item.value }}</text>
  18. </view>
  19. <view class="couponColor">抵用券</view>
  20. </view>
  21. <view class="couponColor rightCon o-ptb-40 o-pl-40">
  22. {{ item.lastUseDate | date('yyyy-mm-dd hh:MM:ss') }} 到期
  23. </view>
  24. </view>
  25. <u-checkbox :checked="item.isCheck" :name="item.code"></u-checkbox>
  26. </view>
  27. </view>
  28. </u-checkbox-group>
  29. </scroll-view>
  30. <view class="btnCon l-f l-flex-j-a o-mt-20">
  31. <u-button shape="circle" type="primary" :text="`支付(${afterDiscPrice}元)`" @click="confirmClk">
  32. </u-button>
  33. </view>
  34. </view>
  35. </u-popup>
  36. <!-- 支付弹窗 -->
  37. <k-payPop ref="kPayPopRef"></k-payPop>
  38. </view>
  39. </template>
  40. <script>
  41. // 导入支付弹窗
  42. import kPayPop from '@/components/common/k-payPop/index.vue';
  43. /**
  44. * payPop 优惠券弹窗组件
  45. * @description 本组件主要是优惠券弹窗。
  46. *
  47. * @property {Boolean} popShow 是否展示弹窗
  48. *
  49. */
  50. export default {
  51. components: {
  52. kPayPop
  53. },
  54. data() {
  55. return {
  56. // 是否展示弹窗
  57. popShow: false,
  58. // 选中的优惠券
  59. coupCheckValue: [],
  60. // 优惠券列表
  61. coupCheckList: [],
  62. // 支付参数
  63. payParam: {},
  64. // 是哪个页面进来的 1:首页 2:购物车 3:商品详情页
  65. isPage: 1,
  66. // 总价格
  67. totalPrice: 0
  68. };
  69. },
  70. computed: {
  71. // 优惠后价格
  72. afterDiscPrice() {
  73. const codeList = [];
  74. // 找到选中的优惠券的code
  75. this.coupCheckList.forEach(item => {
  76. if (item.isCheck) {
  77. codeList.push(item.code);
  78. }
  79. });
  80. if (codeList.length > 0) {
  81. let list = [];
  82. // 找到选中的优惠券的总金额
  83. this.coupCheckList.forEach(item => {
  84. codeList.forEach(item1 => {
  85. if (item.code === item1) {
  86. list.push(item.value);
  87. }
  88. });
  89. });
  90. // 计算出总优惠价
  91. const totalPrice = list.reduce((prev, cur) => {
  92. return this.$M_Big(prev)
  93. .add(cur)
  94. .toNumber();
  95. }, 0);
  96. // 计算出优惠后的价格
  97. const afterDiscPrice = this.$M_Big(this.totalPrice).sub(totalPrice);
  98. if (afterDiscPrice <= 0) return 0.01;
  99. return afterDiscPrice;
  100. }
  101. return this.totalPrice;
  102. }
  103. },
  104. methods: {
  105. // 点击单选按钮
  106. single_checkboxChg(e) {
  107. let singleList = this.arrTrimSpace(e);
  108. // 如果存在单选
  109. if (singleList.length > 0) {
  110. this.coupCheckList.forEach(item => {
  111. item.isCheck = false;
  112. singleList.forEach(item1 => {
  113. if (item.code === item1) {
  114. item.isCheck = true;
  115. }
  116. });
  117. });
  118. } else {
  119. this.coupCheckList.forEach(item => {
  120. item.isCheck = false;
  121. });
  122. }
  123. },
  124. // 点击改变选中状态
  125. isCheckChg(row) {
  126. row.isCheck = !row.isCheck;
  127. },
  128. // 去掉数组的空格,null,undefeated类型
  129. arrTrimSpace(array) {
  130. let list = [];
  131. array.forEach(item => {
  132. if (item == '' || item == null || typeof item == 'undefined') {} else {
  133. list.push(item);
  134. }
  135. });
  136. return list;
  137. },
  138. // 点击关闭弹窗
  139. popClose() {
  140. this.popShow = false;
  141. // 清空选中的
  142. this.coupCheckValue = [];
  143. // 将选中状态初始化
  144. this.coupCheckList.forEach(item => {
  145. item.isCheck = false;
  146. });
  147. },
  148. // 点击支付按钮
  149. confirmClk() {
  150. const codeList = [];
  151. // 找到选中的优惠券的code
  152. this.coupCheckList.forEach(item => {
  153. if (item.isCheck) {
  154. codeList.push(item.code);
  155. }
  156. });
  157. this.$refs.kPayPopRef.popOpen(this.payParam, this.isPage, codeList);
  158. },
  159. // 开启弹窗
  160. popOpen(coupList, payParam, isPage, totalPrice) {
  161. this.coupCheckList = coupList;
  162. this.payParam = payParam;
  163. this.isPage = isPage;
  164. this.totalPrice = totalPrice;
  165. this.popShow = true;
  166. }
  167. }
  168. };
  169. </script>
  170. <style lang="scss" scoped>
  171. .kCouponIdx {
  172. .content {
  173. background-color: #fff5f4;
  174. .leftCon {
  175. border-right: 2px dashed #fff;
  176. }
  177. .couponColor {
  178. color: #ff9900;
  179. }
  180. }
  181. }
  182. </style>