update我的会员券、领券中心等

xuxueyang

2024-09-03 9cfb7141478e85dfc1367b6fb5f31852aa20c1d2

update我的会员券、领券中心等

 components/top-tabs.vue

@@ -1,76 +1,91 @@
<template>
  <view class="flex top-tabs">
    <view class="top-tab t-grey p10" v-for="(item,index) of tabs" @tap="changeIndex(index)"
          :class="[''+index==flg?'active':'']">
      {{ item.name || item.label || '' }}
    </view>
  </view>
    <view class="flex top-tabs" :class="[type]">
        <view class="top-tab t-grey p10" v-for="(item,index) of tabs" @tap="changeIndex(index)"
            :class="[''+index==flg?'active':'']">
            {{ item.name || item.label || '' }}
        </view>
    </view>
</template>

<script>
export default {
  name: "top-tabs",
  data() {
    return {};
  },
  props: {
    tabs: {
      type: Array,
      default: []
    },
    flg: ""
  },
  methods: {
    changeIndex(index) {
      if (index == this.flg) {
    export default {
        name: "top-tabs",
        data() {
            return {};
        },
        props: {
            tabs: {
                type: Array,
                default: []
            },
            flg: "",
            type: '',
        },
        methods: {
            changeIndex(index) {
                if (index == this.flg) {

      } else {
        this.$emit('update:flg', index)
        this.$emit('change', index)
      }
                } else {
                    this.$emit('update:flg', index)
                    this.$emit('change', index)
                }

    }
  }
}
            }
        }
    }
</script>

<style lang="scss">
.top-tabs {
  .top-tab {
    color: #ffffff;
    flex: 1;
    text-align: center;
  }
<style lang="scss" scoped>
    .top-tabs.coupon {
        .top-tab {
            color: var(----topicdarkgray);
        }

  .top-tab.active {
    color: #ffffff;
    font-weight: 600;
    // border-bottom: 8rpx solid #000;
    // 底部的线条
        .top-tab.active {
            color: var(--topicolor);
        }

    font-weight: 600;
    font-size: 36rpx;
    color: #ffffff;
    line-height: 32rpx;
    text-align: center;
    font-style: normal;
    // padding: 0rpx;
    width: fit-content;
    position: relative;
  }
        .top-tab.active::before {
            background: var(--topicolor);
            bottom: 0rpx;
        }
    }

  .top-tab.active::before {
    position: absolute;
    content: " ";
    left: 16rpx;
    right: 16rpx;
    bottom: 8rpx;
    // width: 110rpx;
    height: 8rpx;
    // background: #04BA97;
    background: #ffffff;
	
    border-radius: 4rpx;
  }
}
</style>
    .top-tabs {
        .top-tab {
            color: #ffffff;
            flex: 1;
            text-align: center;
        }

        .top-tab.active {
            color: #ffffff;
            font-weight: 600;
            // border-bottom: 8rpx solid #000;
            // 底部的线条

            font-weight: 600;
            font-size: 36rpx;
            line-height: 32rpx;
            text-align: center;
            font-style: normal;
            // padding: 0rpx;
            width: fit-content;
            position: relative;
        }

        .top-tab.active::before {
            position: absolute;
            content: " ";
            left: 16rpx;
            right: 16rpx;
            bottom: 8rpx;
            // width: 110rpx;
            height: 8rpx;
            // background: #04BA97;
            background: #ffffff;

            border-radius: 4rpx;
        }
    }
</style>

 environments/index.js

@@ -1,7 +1,7 @@
export default {
    
    httpBaseUri: 'https://www.hmyxianhua.com/flower',
    // httpBaseUri: 'http://47.99.58.211/flower',
    // httpBaseUri: 'https://www.hmyxianhua.com/flower',
    httpBaseUri: 'http://47.99.58.211/flower',
    // httpBaseUri: 'http://localhost:8080/flower',
    clientId: '',
    secret: '',

 pages.json

@@ -429,13 +429,41 @@
                    "style": {

                        "navigationBarTitleText": "投诉反馈"

                    }

                },

                {

                    "path": "coupon/coupon-self",

                    "style": {

                        "navigationBarTitleText": "我的优惠券",

                        "enablePullDownRefresh": true



                    }

                },

                {

                    "path": "coupon/coupon-all",

                    "style": {

                        "navigationBarTitleText": "领券中心",

                        "enablePullDownRefresh": true



                    }

                },

                {

                    "path": "coupon/point-self",

                    "style": {

                        "navigationBarTitleText": "我的兑换券"

                    }

                },

                {

                    "path": "coupon/point-history",

                    "style": {

                        "navigationBarTitleText": "积分明细"

                    }

                }

                // #endif

            ]

        }

    ],

    "globalStyle": {

        "navigationBarTextStyle": "black",
        "navigationBarTextStyle": "black",

        "navigationBarTitleText": "花满芫",

        "navigationBarBackgroundColor": "#F8F8F8",

        "backgroundColor": "#F8F8F8",


 pages/user/supplier-user.vue

@@ -176,18 +176,19 @@
                        </image>

                        <view>投诉反馈</view>

                    </view>

<!-- 
                    <view class="service-icons" @click="goto('/sub_pages/customer/self/coupon',true)">
                        <image src="../../static/images/customer/service/service-icon-8.png" class="t2 service-icon ">
                        </image>
                        <view>优惠券</view>
                    <!-- #ifdef PUB_CUSTOMER_DEV -->

                    <view class="service-icons" @click="goto('/sub_pages/customer/coupon/coupon-self',true)">

                        <image src="../../static/images/customer/service/service-icon-8.png" class="t2 service-icon ">

                        </image>

                        <view>优惠券</view>

                    </view>



                    <view class="service-icons" @click="goto('/sub_pages/customer/self/feedback',true)">
                        <image src="../../static/images/customer/service/service-icon-9.png" class="t2 service-icon ">
                        </image>
                        <view>兑换券</view>
                    </view> -->

                    <view class="service-icons" @click="goto('/sub_pages/customer/coupon/point-self',true)">

                        <image src="../../static/images/customer/service/service-icon-9.png" class="t2 service-icon ">

                        </image>

                        <view>兑换券</view>

                    </view>

                    <!-- #endif -->

                </view>

            </view>

        </view>

@@ -255,13 +256,13 @@
                <view class="right-icon">

                    <uni-icons type="right"></uni-icons>

                </view>

            </view>
			
            <!-- <view class="user-util m-t-12 flex" @click="goto('/sub_pages/partner/delivery/delivery-detail',true)">
                <view class="title">debug</view>
                <view class="right-icon">
                    <uni-icons type="right"></uni-icons>
                </view>
            </view>



            <!-- <view class="user-util m-t-12 flex" @click="goto('/sub_pages/partner/delivery/delivery-detail',true)">

                <view class="title">debug</view>

                <view class="right-icon">

                    <uni-icons type="right"></uni-icons>

                </view>

            </view> -->

            <view class="user-util m-t-12 flex" v-if="currentInfo&&currentInfo.id"

                @click="goto('/pages/user/user-bind-wx/user-bind-wx',true)">

@@ -270,7 +271,7 @@
                    <uni-icons type="right"></uni-icons>

                </view>

            </view>

        <!--     <view class="user-util m-t-12 flex" @click="goto('/sub_pages/customer/self/feedback',true)">

            <!--     <view class="user-util m-t-12 flex" @click="goto('/sub_pages/customer/self/feedback',true)">

                <view class="title">投诉反馈</view>

                <view class="right-icon">

                    <uni-icons type="right"></uni-icons>


 static/images/customer/coupon/coupon-bg1.png

 static/images/customer/coupon/coupon-has.png

 store/index.js

@@ -32,6 +32,7 @@
            'delivery': 0,
            'order': 0,
            'shopnum': 0,
            'coupon': 0
        },
        defaultaddress: {}
    },
@@ -55,7 +56,7 @@
            state.currentInfo = {}
            storage.removeItem('token')
            message.showToast('退出登录成功')
		 

        },
        setOpenid(state, openid) {
            state.openid = openid
@@ -352,7 +353,7 @@
                        console.log("启用结果2：", ret);
                    });
                    // #endif
				 

                    uni.reLaunch({
                        url: '/pages/home/supplier-home'
                    })

 sub_pages/customer/coupon/coupon-all.vue

对比新文件
@@ -0,0 +1,108 @@
<template>
    <view class="coupon-container">
        <view class="">
            <view v-for="(item,index) of list" :key="index" class="coupont-item all">
                <view class="flex container img100">
                    <view class="info-price">
                        <view class="price1">￥7.70</view>
                        <view class="price2">满￥100可用</view>
                    </view>
                    <view class="info flex1">
                        <view class="title">
                            七夕专属福利券
                        </view>
                        <view class="time">
                            有效期至2024-07-26 09:58:30
                        </view>
                        <view class="button" @click="getCoupon(item)">
                            立即领取
                        </view>
                    </view>
                </view>
                <view class="tip">
                    <span class="t-red">*</span>此券每人限领1张。仅限用于花满芜鲜花交易平台鲜切花花款满额使用，不可与其他优惠同享、不可叠加使用
                </view>
            </view>
        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                query: {
                    status: ''
                },
                list: [{}]
            }
        },
        async onLoad() {
            this.listApi = '/api/v2/coupon/app' + `/center/list`

            // this.getList()
        },

        methods: {
            async getCoupon(item) {
                this.$message.showLoading()
                const {
                    code,
                    data
                } = await this.$http.request('post', '/api/v2/coupon/point/exchange', {
                    data: {
                        couponId: item.id
                    }
                })
                if (code == 0) {
                    await this.$message.showToast('领取成功')
                    this.$store.dispatch('sign_add', 'coupon')
                    this.refreshList()
                }
            }

        },
        async onPullDownRefresh() {
            await this.refreshList()
            uni.stopPullDownRefresh()

        },
    }
</script>

<style lang="scss" scoped>
    @import './coupon.scss';

    .coupon-container {

        .coupont-item.all {
            margin-top: 20rpx;

            .container {
                .info {
                    .time {
                        margin-top: 0rpx;
                    }

                    .button {
                        width: 150rpx;
                        height: 46rpx;
                        // box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.14);
                        border-radius: 24rpx;
                        border: 2rpx solid rgba(68, 119, 90, 1);
                        font-weight: 400;
                        font-size: 24rpx;
                        color: rgba(68, 119, 90, 1);
                        line-height: 46rpx;
                        text-align: center;
                        margin-top: 10rpx;
                    }
                }
            }
        }



    }
</style>

 sub_pages/customer/coupon/coupon-self.vue

对比新文件
@@ -0,0 +1,129 @@
<template>
    <view class="coupon-container">
        <view class="p10">
            <top-tabs :tabs="tabs" :flg="flg" @change="changeTab" type="coupon">

            </top-tabs>
        </view>
        <view class="">
            <view v-for="(item,index) of list" :key="index" class="coupont-item" :class="[query.status]">
                <view class="flex container img100">
                    <view class="info-price">
                        <view class="price1">￥7.70</view>
                        <view class="price2">满￥100可用</view>
                    </view>
                    <view class="info flex1">
                        <view class="title">
                            七夕专属福利券
                        </view>
                        <view class="time">
                            有效期至2024-07-26 09:58:30
                        </view>
                    </view>
                </view>
                <view class="tip">
                    <span class="t-red">*</span>此券每人限领1张。仅限用于花满芜鲜花交易平台鲜切花花款满额使用，不可与其他优惠同享、不可叠加使用
                </view>
            </view>
        </view>
        <view style="min-height: 130rpx;"></view>
        <view class="bottom-button" @click="getCoupon">领取优惠券</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                flg: 0,

                tabs: [{
                        name: '未使用',
                        status: 'unused',
                        // unused
                    },
                    {
                        name: '已使用',
                        status: 'used',

                        // used
                    },
                    {
                        name: '已过期',
                        status: 'expired',

                        // expired
                    },
                ],
                query: {
                    status: 'unused'
                },
                list: []
            }
        },
        async onLoad() {
            this.listApi = '/api/v2/coupon/app' + `/mine/${this.query.status}/list`
            await this.$store.dispatch('sign_clear', 'coupon')

            this.getList()
        },

        methods: {
            changeTab(flg) {
                this.query.status = this.tabs[flg].status
                this.listApi = '/api/v2/coupon/app' + `/mine/${this.query.status}/list`
                this.refreshList()
            },
            getCoupon() {
                uni.navigateTo({
                    url: '/sub_pages/customer/coupon/coupon-all'
                })
            }
        },
        async onShow() {
            if (this.sign['coupon']) {
                this.$store.dispatch('sign_clear', 'coupon');
                this.refreshList()
            }
        },
        async onPullDownRefresh() {
            await this.refreshList()
            uni.stopPullDownRefresh()

        },
    }
</script>

<style lang="scss" scoped>
    @import  './coupon.scss';

    .coupon-container {



        .coupont-item.expired {
            filter: grayscale(100%);

            .img-has {
                display: unset;
            }
        }

 
        .bottom-button {
            width: 690rpx;
            height: 90rpx;
            border-radius: 46rpx;
            border: 2rpx solid #20613D;
            position: fixed;
            bottom: 30rpx;
            left: 50%;
            transform: translateX(-50%);
            font-weight: 400;
            font-size: 32rpx;
            color: #20613D;
            text-align: center;
            line-height: 90rpx;
        }
    }
</style>

 sub_pages/customer/coupon/coupon.scss

对比新文件
@@ -0,0 +1,99 @@
    .coupon-container {
		

		
        .coupont-item.expired {
            filter: grayscale(100%);
            .img-has {
                display: unset;
            }
        }

        .coupont-item {
            height: 360rpx;
            margin-top: 20rpx;
            position: relative;
            .img-has {
                display: none;
                position: absolute;
                right: -20rpx;
                top: 20rpx;
                background-image: url('../../../static/images/customer/coupon/coupon-has.png');
                background-size: 100% 100%;
                width: 264rpx;
                height: 264rpx;
            }

            .tip {
                position: absolute;
                top: 210rpx;
                // min-height: 136rpx;
                background: #EBEBEB;
                z-index: 1;
                padding: 18rpx 30rpx;
                padding-top: 40rpx;
                left: 18rpx;
                right: 18rpx;
                font-size: 24rpx;
                color: #333333;
            }

            .container {
                z-index: 2;
                background-image: url('../../../static/images/customer/coupon/coupon-bg1.png');
                // width: 722rpx;
                padding: 16rpx 16rpx 16rpx 0rpx;
                height: 220rpx;
                position: relative;

                .info-price {
                    width: 180rpx;
                    padding-top: 40rpx;
                    margin-left: 30rpx;
                    margin-right: 50rpx;

                    .price1 {
                        font-weight: 600;
                        font-size: 56rpx;
                        color: #FFFFFF;
                        line-height: 80rpx;
                        text-align: center;
                    }

                    .price2 {
                        font-weight: 400;
                        font-size: 28rpx;
                        color: #FFFFFF;
                        line-height: 40rpx;
                        text-align: center;
                    }
                }

                .info {
                    padding-top: 40rpx;

                    .title {
                        font-weight: 600;
                        font-size: 36rpx;
                        color: #333333;
                        line-height: 50rpx;
                        text-align: left;

                    }

                    .time {
                        font-weight: 400;
                        font-size: 28rpx;
                        color: #666666;
                        line-height: 40rpx;
                        text-align: left;
                        margin-top: 40rpx;

                    }
                }

            }

        }
 
    }

 sub_pages/customer/coupon/point-history.vue

对比新文件
@@ -0,0 +1,22 @@
<template>
    <view>
		
    </view>
</template>

<script>
    export default {
        data() {
            return {
				
            }
        },
        methods: {
			
        }
    }
</script>

<style>

</style>

 sub_pages/customer/coupon/point-self.vue

对比新文件
@@ -0,0 +1,22 @@
<template>
    <view>
		
    </view>
</template>

<script>
    export default {
        data() {
            return {
				
            }
        },
        methods: {
			
        }
    }
</script>

<style>

</style>