From 9cfb7141478e85dfc1367b6fb5f31852aa20c1d2 Mon Sep 17 00:00:00 2001
From: xuxueyang <xuxy@fengyuntec.com>
Date: 星期二, 03 九月 2024 11:43:24 +0800
Subject: [PATCH] update我的会员券、领券中心等
---
environments/index.js | 4
sub_pages/customer/coupon/coupon-all.vue | 108 +++++++++
sub_pages/customer/coupon/coupon.scss | 99 +++++++++
sub_pages/customer/coupon/point-self.vue | 22 ++
sub_pages/customer/coupon/coupon-self.vue | 129 +++++++++++
components/top-tabs.vue | 145 +++++++-----
pages.json | 30 ++
static/images/customer/coupon/coupon-bg1.png | 0
sub_pages/customer/coupon/point-history.vue | 22 ++
pages/user/supplier-user.vue | 37 +-
static/images/customer/coupon/coupon-has.png | 0
store/index.js | 5
12 files changed, 513 insertions(+), 88 deletions(-)
diff --git a/components/top-tabs.vue b/components/top-tabs.vue
index d6675d8..2915b97 100644
--- a/components/top-tabs.vue
+++ b/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>
\ No newline at end of file
diff --git a/environments/index.js b/environments/index.js
index c8a5cf9..a6f20e1 100644
--- a/environments/index.js
+++ b/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: '',
diff --git a/pages.json b/pages.json
index 87acc7a..d3ba1cd 100644
--- a/pages.json
+++ b/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",
diff --git a/pages/user/supplier-user.vue b/pages/user/supplier-user.vue
index 6359687..f0c97da 100644
--- a/pages/user/supplier-user.vue
+++ b/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&¤tInfo.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>
diff --git a/static/images/customer/coupon/coupon-bg1.png b/static/images/customer/coupon/coupon-bg1.png
new file mode 100644
index 0000000..ef658f9
--- /dev/null
+++ b/static/images/customer/coupon/coupon-bg1.png
Binary files differ
diff --git a/static/images/customer/coupon/coupon-has.png b/static/images/customer/coupon/coupon-has.png
new file mode 100644
index 0000000..16c6179
--- /dev/null
+++ b/static/images/customer/coupon/coupon-has.png
Binary files differ
diff --git a/store/index.js b/store/index.js
index 71274a5..a97699e 100644
--- a/store/index.js
+++ b/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'
})
diff --git a/sub_pages/customer/coupon/coupon-all.vue b/sub_pages/customer/coupon/coupon-all.vue
new file mode 100644
index 0000000..0b09762
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/sub_pages/customer/coupon/coupon-self.vue b/sub_pages/customer/coupon/coupon-self.vue
new file mode 100644
index 0000000..ab9131d
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/sub_pages/customer/coupon/coupon.scss b/sub_pages/customer/coupon/coupon.scss
new file mode 100644
index 0000000..0d195e8
--- /dev/null
+++ b/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;
+
+ }
+ }
+
+ }
+
+ }
+
+ }
\ No newline at end of file
diff --git a/sub_pages/customer/coupon/point-history.vue b/sub_pages/customer/coupon/point-history.vue
new file mode 100644
index 0000000..8183fd0
--- /dev/null
+++ b/sub_pages/customer/coupon/point-history.vue
@@ -0,0 +1,22 @@
+<template>
+ <view>
+
+ </view>
+</template>
+
+<script>
+ export default {
+ data() {
+ return {
+
+ }
+ },
+ methods: {
+
+ }
+ }
+</script>
+
+<style>
+
+</style>
diff --git a/sub_pages/customer/coupon/point-self.vue b/sub_pages/customer/coupon/point-self.vue
new file mode 100644
index 0000000..8183fd0
--- /dev/null
+++ b/sub_pages/customer/coupon/point-self.vue
@@ -0,0 +1,22 @@
+<template>
+ <view>
+
+ </view>
+</template>
+
+<script>
+ export default {
+ data() {
+ return {
+
+ }
+ },
+ methods: {
+
+ }
+ }
+</script>
+
+<style>
+
+</style>
--
Gitblit v1.9.3