123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186 |
- <template>
- <view class="kCouponIdx">
- <u-popup zIndex="10070" :customStyle="{ backgroundColor: '#fff' }" :show="popShow" :round="10" mode="bottom"
- @close="popClose" closeable>
- <view class="o-plr-30 o-ptb-20">
- <view class="l-flex-center c-text-20 o-pb-30">请选择优惠券</view>
- <scroll-view style="height: 50vh;" scroll-y="true">
- <u-checkbox-group v-model="coupCheckValue" @change="single_checkboxChg">
- <view class="o-w">
- <view @click.self="isCheckChg(item)"
- class="content o-w l-flex-between o-plr-20 l-boxShadow o-mb-20"
- v-for="(item, index) in coupCheckList" :key="index">
- <view class="l-flex-RC">
- <view class="leftCon o-ptb-40 o-plr-40">
- <view class="couponColor">
- <text class="c-text-12">¥</text>
- <text class="c-text-20 c-text-b">{{ item.value }}</text>
- </view>
- <view class="couponColor">抵用券</view>
- </view>
- <view class="couponColor rightCon o-ptb-40 o-pl-40">
- {{ item.lastUseDate | date('yyyy-mm-dd hh:MM:ss') }} 到期
- </view>
- </view>
- <u-checkbox :checked="item.isCheck" :name="item.code"></u-checkbox>
- </view>
- </view>
- </u-checkbox-group>
- </scroll-view>
- <view class="btnCon l-f l-flex-j-a o-mt-20">
- <u-button shape="circle" type="primary" :text="`支付(${afterDiscPrice}元)`" @click="confirmClk">
- </u-button>
- </view>
- </view>
- </u-popup>
- <!-- 支付弹窗 -->
- <k-payPop ref="kPayPopRef"></k-payPop>
- </view>
- </template>
- <script>
- // 导入支付弹窗
- import kPayPop from '@/components/common/k-payPop/index.vue';
- /**
- * payPop 优惠券弹窗组件
- * @description 本组件主要是优惠券弹窗。
- *
- * @property {Boolean} popShow 是否展示弹窗
- *
- */
- export default {
- components: {
- kPayPop
- },
- data() {
- return {
- // 是否展示弹窗
- popShow: false,
- // 选中的优惠券
- coupCheckValue: [],
- // 优惠券列表
- coupCheckList: [],
- // 支付参数
- payParam: {},
- // 是哪个页面进来的 1:首页 2:购物车 3:商品详情页
- isPage: 1,
- // 总价格
- totalPrice: 0
- };
- },
- computed: {
- // 优惠后价格
- afterDiscPrice() {
- const codeList = [];
- // 找到选中的优惠券的code
- this.coupCheckList.forEach(item => {
- if (item.isCheck) {
- codeList.push(item.code);
- }
- });
- if (codeList.length > 0) {
- let list = [];
- // 找到选中的优惠券的总金额
- this.coupCheckList.forEach(item => {
- codeList.forEach(item1 => {
- if (item.code === item1) {
- list.push(item.value);
- }
- });
- });
- // 计算出总优惠价
- const totalPrice = list.reduce((prev, cur) => {
- return this.$M_Big(prev)
- .add(cur)
- .toNumber();
- }, 0);
- // 计算出优惠后的价格
- const afterDiscPrice = this.$M_Big(this.totalPrice).sub(totalPrice);
- if (afterDiscPrice <= 0) return 0.01;
- return afterDiscPrice;
- }
- return this.totalPrice;
- }
- },
- methods: {
- // 点击单选按钮
- single_checkboxChg(e) {
- let singleList = this.arrTrimSpace(e);
- // 如果存在单选
- if (singleList.length > 0) {
- this.coupCheckList.forEach(item => {
- item.isCheck = false;
- singleList.forEach(item1 => {
- if (item.code === item1) {
- item.isCheck = true;
- }
- });
- });
- } else {
- this.coupCheckList.forEach(item => {
- item.isCheck = false;
- });
- }
- },
- // 点击改变选中状态
- isCheckChg(row) {
- row.isCheck = !row.isCheck;
- },
- // 去掉数组的空格,null,undefeated类型
- arrTrimSpace(array) {
- let list = [];
- array.forEach(item => {
- if (item == '' || item == null || typeof item == 'undefined') {} else {
- list.push(item);
- }
- });
- return list;
- },
- // 点击关闭弹窗
- popClose() {
- this.popShow = false;
- // 清空选中的
- this.coupCheckValue = [];
- // 将选中状态初始化
- this.coupCheckList.forEach(item => {
- item.isCheck = false;
- });
- },
- // 点击支付按钮
- confirmClk() {
- const codeList = [];
- // 找到选中的优惠券的code
- this.coupCheckList.forEach(item => {
- if (item.isCheck) {
- codeList.push(item.code);
- }
- });
- this.$refs.kPayPopRef.popOpen(this.payParam, this.isPage, codeList);
- },
- // 开启弹窗
- popOpen(coupList, payParam, isPage, totalPrice) {
- this.coupCheckList = coupList;
- this.payParam = payParam;
- this.isPage = isPage;
- this.totalPrice = totalPrice;
- this.popShow = true;
- }
- }
- };
- </script>
- <style lang="scss" scoped>
- .kCouponIdx {
- .content {
- background-color: #fff5f4;
- .leftCon {
- border-right: 2px dashed #fff;
- }
- .couponColor {
- color: #ff9900;
- }
- }
- }
- </style>
|