TmOct5/barter-app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[‘我的资产-我的优惠券’]

Browse Source
This commit is contained in:
张冬雪
2021-09-16 17:30:26 +08:00
parent 567b8e3971
commit 004536faeb
26 changed files with 2336 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

292
pages/property/coupon/coupon.vue Normal file
View File

@@ -0,0 +1,292 @@
<template>
<view class="Coupon">
<!-- 分类 -->
<view class="scroll-top">
<scroll-view class="scroll-view_H" scroll-x="true" :scroll-into-view='"nav"+selectNavId'
scroll-with-animation="true">
<view v-for="(item,index) in navList" :key="index" :id="'nav'+item.id" @click="selectNav(item.id)"
:class="['scroll-view-item_H',selectNavId === item.id ?'scroll-view-item_H_selected':'']">
{{item.name}}
<block v-if='index === 0'>({{count.all}})</block>
<block v-if='index === 1'>({{count.services}})</block>
<block v-if='index === 2'>({{count.reductions}})</block>
<block v-if='index === 3'>({{count.exchanges}})</block>
</view>
</scroll-view>
<scroll-view class="scroll-view_H-1" scroll-x="true" :scroll-into-view='"nav"+selectCategoryId'
scroll-with-animation="true">
<view v-for="(item,index) in categroyList" :key="index" :id="'nav'+item.id"
@click="selectCategory(item.id)"
:class="['scroll-view-item_H-1',selectCategoryId === item.id ?'scroll-view-item_H_selected-1':'']">
{{item.name}}
</view>
</scroll-view>
</view>
<!-- 有优惠券列表 -->
<view class="coupon-content">
<couponTemplate v-for="(item,index) in lists" :key='index' :item="{...item}" :action="actions" />
</view>
<!-- 没有优惠券列表 -->
<no-list v-if="lists.length === 0" name='no-counpon' :txt="showTxt" />
<!-- <u-toast ref="uToast" /> -->
<u-toast ref="uToast" />
</view>
</template>
<script>
import {
myCoupon
} from '@/apis/interfaces/coupon'
import couponTemplate from '@/components/coupon-template/coupon-template-1'
export default {
data() {
return {
actions: {
name: '去使用',
type: 'toUsed'
},
lists:[],
count:{
all:0,
services:0,
reductions:0,
exchanges:0,
},
navList: [{
id: '',
name: '全部'
}, {
id: '1',
name: '服务券'
},
{
id: '2',
name: '代金券'
},
{
id: '3',
name: '提货券'
}
],
categroyList: [{
id: '4',
name: '新到'
},
{
id: '5',
name: '即将到期'
},
{
id: '1',
name: '待使用'
}, {
id: '2',
name: '已使用'
}, {
id: '3',
name: '已过期'
}
],
selectCategoryId: '', // 默认选择分类 默认第一个
selectNavId: '',
showTxt: '没有任何优惠券哦~',
};
},
components: {
couponTemplate
},
onLoad(e) {
this.getMyCoupon()
},
onShow() {
if (wx.getStorageSync('refresh')) {
this.lists = []
this.getMyCoupon()
}
},
onPullDownRefresh() {
this.lists = []
this.getMyCoupon()
},
methods: {
// 优惠券列表
getMyCoupon() {
let data = {
type: this.selectNavId
}
if(this.selectCategoryId==='4' || this.selectCategoryId==='5'){
data.status = ''
if(this.selectCategoryId === '4'){
data.time = 'new'
}else{
data.time = 'expire'
}
}else{
data.status = this.selectCategoryId
}
console.log(data)
myCoupon(data).then(res => {
console.log(res)
this.lists = res.lists
this.count = res.count
uni.stopPullDownRefresh()
wx.setStorageSync('refresh', false)
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
duration: 3000
})
})
},
// 切换商品分类
selectNav(id) {
console.log(id)
this.selectNavId = id
this.getMyCoupon()
},
selectCategory(id) {
console.log(id)
this.selectCategoryId = id
this.getMyCoupon()
}
}
}
</script>
<style lang="scss" scoped>
.Coupon {
width: 100%;
min-height: 100vh;
box-sizing: border-box;
padding-bottom: 20rpx;
background-color: #F7F7F7;
.coupon-nav {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
box-sizing: border-box;
background-color: #fff;
padding: 30rpx 60rpx 0 60rpx;
color: #cacaca;
.nav-item {
padding: 20rpx 30rpx 30rpx 30rpx;
border-bottom: solid 4rpx #fff;
font-size: 36rpx;
font-weight: bold;
}
.nav-item-select {
border-bottom: solid 6rpx $main-color;
color: $main-color;
}
}
.scroll-top {
position: sticky;
top: 0;
z-index: 1000;
.scroll-view_H {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
white-space: nowrap;
width: 100%;
padding: 30rpx 30rpx 0 30rpx;
background-color: #fff;
.scroll-view-item_H {
margin-right: 60rpx;
padding: 20rpx 0 40rpx 0;
// height: 100rpx;
display: inline-block;
min-width: 120rpx;
font-size: 28rpx;
border-bottom: #fff;
background-color: #fff;
transition: .1s;
text-align: center;
}
.scroll-view-item_H_selected {
// border-bottom: solid $main-color 4rpx;
color: $main-color;
font-weight: bold;
// font-size: 36rpx;
// transition: .3s;
text-shadow: 6rpx 8rpx 30rpx rgba($color: $main-color, $alpha: .5);
position: relative;
&:after {
// content: '';
// position: absolute;
// bottom: 10rpx;
// left: 0;
// height: 8rpx;
// width: 100%;
// background-color: $main-color;
}
}
}
.scroll-view_H-1 {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
white-space: nowrap;
width: 100%;
padding: 0 30rpx 30rpx 30rpx;
background-color: #fff;
// position: sticky;
// top: 100rpx;
// z-index: 1000;
.scroll-view-item_H-1 {
display: inline-block;
min-width: 120rpx;
font-size: 24rpx;
border-bottom: #fff;
background-color: #f7f7f7;
margin-left: 20rpx;
padding: 10rpx 30rpx;
text-align: center;
border-radius: 40rpx;
}
.scroll-view-item_H_selected-1 {
// border-bottom: solid $main-color 4rpx;
color: #fff;
font-weight: bold;
background-image: linear-gradient(to left, $main-color, $main-color-light);
// font-size: 36rpx;
// transition: .3s;
// text-shadow: 6rpx 8rpx 30rpx rgba($color: $main-color, $alpha: .5);
position: relative;
&:after {
// content: '';
// position: absolute;
// bottom: 10rpx;
// left: 0;
// height: 8rpx;
// width: 100%;
// background-color: $main-color;
}
}
}
}
}
</style>

253
pages/property/coupon/couponMore.vue Normal file
View File

@@ -0,0 +1,253 @@
<template>
<view class="Coupon">
<!-- 有优惠券列表 -->
<view class="coupon-content">
<couponTemplate v-for="(item,index) in lists" :key='index' :item="{...item}" />
</view>
<!-- 没有优惠券列表 -->
<no-list v-if="lists.length === 0" name='no-counpon' :txt="showTxt" />
<!-- <u-toast ref="uToast" /> -->
<u-toast ref="uToast" />
</view>
</template>
<script>
import {
getCouponsListById
} from '@/apis/interfaces/coupon'
import couponTemplate from '@/components/coupon-template/coupon-template-1'
export default {
data() {
return {
lists:[],
id:'',
page:1,
has_more:true,
showTxt: '没有任何优惠券哦~'
};
},
components: {
couponTemplate
},
onLoad(e) {
console.log(e)
this.id = this.$route.query.id
this.getMyCoupon()
},
onShow() {
if (wx.getStorageSync('refresh')) {
this.lists = []
this.getMyCoupon()
}
},
onPullDownRefresh() {
this.page = 1
this.lists = []
this.has_more = true
this.getMyCoupon()
},
onReachBottom() {
if (this.has_more) {
this.page = this.page + 1
this.getMyCoupon()
} else {
this.$refs.uToast.show({
title: '吼吼吼~我是有底的~',
duration: 3000
})
}
},
methods: {
getMyCoupon() {
let id = this.id
let data={
page:this.page,
pageSize:4
}
getCouponsListById(id,data).then(res => {
console.log(res)
this.lists = this.lists.concat(res.data)
if (res.page.has_more) {
this.has_more = true
} else {
this.has_more = false
}
uni.stopPullDownRefresh()
wx.setStorageSync('refresh',false)
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
duration: 3000
})
})
},
// 选择顶部菜单
// selectNav(id) {
// console.log(typeof id)
// this.showTxt = (id === 1 ? '没有领取到任何优惠券哦~' : id === 2 ? '没有使用过任何优惠券哦~' : '没有任何过期优惠券哦~')
// if (id !== this.selectNavId) {
// this.selectNavId = id
// this.page = 1
// this.lists = []
// this.has_more = true
// this.getMyCoupon()
// }
// },
// 切换商品分类
selectNav(id) {
console.log(id)
this.selectNavId = id
this.getMyCoupon()
// if (this.selectCategoryId !== id) {
// this.goodsList = []
// this.has_more = true
// this.page = 1
// this.getGoodsByCompanyidCaregoryid()
// }
},
selectCategory(id) {
console.log(id)
this.selectCategoryId = id
this.getMyCoupon()
}
}
}
</script>
<style lang="scss" scoped>
.Coupon {
width: 100%;
min-height: 100vh;
box-sizing: border-box;
background-color: #F7F7F7;
padding-bottom: 20rpx;
.coupon-nav {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
box-sizing: border-box;
background-color: #fff;
padding: 30rpx 60rpx 0 60rpx;
color: #cacaca;
.nav-item {
padding: 20rpx 30rpx 30rpx 30rpx;
border-bottom: solid 4rpx #fff;
font-size: 36rpx;
font-weight: bold;
}
.nav-item-select {
border-bottom: solid 6rpx $main-color;
color: $main-color;
}
}
.scroll-top {
position: sticky;
top: 0;
z-index: 1000;
.scroll-view_H {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
white-space: nowrap;
width: 100%;
padding: 30rpx 30rpx 0 30rpx;
background-color: #fff;
.scroll-view-item_H {
margin-right: 60rpx;
padding: 20rpx 0 40rpx 0;
// height: 100rpx;
display: inline-block;
min-width: 120rpx;
font-size: 28rpx;
border-bottom: #fff;
background-color: #fff;
transition: .1s;
text-align: center;
}
.scroll-view-item_H_selected {
// border-bottom: solid $main-color 4rpx;
color: $main-color;
font-weight: bold;
// font-size: 36rpx;
// transition: .3s;
text-shadow: 6rpx 8rpx 30rpx rgba($color: $main-color, $alpha: .5);
position: relative;
&:after {
// content: '';
// position: absolute;
// bottom: 10rpx;
// left: 0;
// height: 8rpx;
// width: 100%;
// background-color: $main-color;
}
}
}
.scroll-view_H-1 {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
white-space: nowrap;
width: 100%;
padding: 0 30rpx 30rpx 30rpx;
background-color: #fff;
// position: sticky;
// top: 100rpx;
// z-index: 1000;
.scroll-view-item_H-1 {
display: inline-block;
min-width: 120rpx;
font-size: 24rpx;
border-bottom: #fff;
background-color: #f7f7f7;
margin-left: 20rpx;
padding: 10rpx 30rpx;
text-align: center;
border-radius: 40rpx;
}
.scroll-view-item_H_selected-1 {
// border-bottom: solid $main-color 4rpx;
color: #fff;
font-weight: bold;
background-image: linear-gradient(to left, $main-color, $main-color-light);
// font-size: 36rpx;
// transition: .3s;
// text-shadow: 6rpx 8rpx 30rpx rgba($color: $main-color, $alpha: .5);
position: relative;
&:after {
// content: '';
// position: absolute;
// bottom: 10rpx;
// left: 0;
// height: 8rpx;
// width: 100%;
// background-color: $main-color;
}
}
}
}
}
</style>

370
pages/property/coupon/detail.vue Normal file
View File

@@ -0,0 +1,370 @@
<template>
<view class="couponDetail" v-if="loaded">
<!-- 优惠券信息 -->
<view class="coupon">
<view class="coupon-title">{{info.title}}</view>
<view class="coupon-des" v-if="info.type.value === 2">{{info.price_text}}</view>
<view class="coupon-date">有效期:{{info.time.interval}}</view>
<view class="coupon-date">{{info.way}} {{info.whole}} </view>
</view>
<!-- 可用商品 -->
<view class="goods-title" v-if="info.goods.length>0">可用商品 <span
style='font-size: 24rpx;color:gray;'>（多选一）</span></view>
<view class="goods-item" v-if="info.goods.length>0" v-for="(item,index) in info.goods" :key='index'>
<image :src="item.cover" mode="aspectFill" class="goods-img" @click="$router.push({name:'goodsDetails',query:{id:item.goods_id}})" />
<view class="goods-right">
<view class="goods-right-title ellipsis-2" @click="$router.push({name:'goodsDetails',query:{id:item.goods_id}})">{{item.name}}</view>
<view class="goods-right-bottom">
<span class='money'>￥{{item.price}}</span>
<view class="used" v-if='info.use_way.value=== 1' @click="nowBuy(item)">立即购买</view>
<!-- <view class="used" v-else @click="clickCode(coupon_grant_id,item.goods_sku_id)">查看兑换码</view> -->
</view>
</view>
</view>
<!-- 描述 -->
<view class="describe" v-if="contentArr.length>0">
<view class="goods-title">使用须知</view>
<view class="describe-des" v-for="(item,index) in contentArr" :key='index'>
{{item}}
</view>
</view>
<view class="clickCodeBtn" v-if='info.use_way.value=== 2' @click="clickCode(coupon_grant_id)">立即兑换</view>
<!-- <u-toast ref="uToast" /> -->
<u-toast ref="uToast" />
<!-- 二维码弹窗 -->
<view class="showCode " v-if="showCode">
<view class="showCodeBg" @click="showCode = false"></view>
<view :class="['showCodeContent', showCode?'showCodeContentSelect':'showCodeContentSelectNo']">
<view class="showCodeTitle">商品兑换码</view>
<image :src="code" mode="widthFix"></image>
</view>
</view>
</view>
</template>
<script>
import {
getCouponsInfoById,
getQrcodeByGrantId
} from '@/apis/interfaces/coupon'
import GoodTemplate from '@/components/goods-template/goods-template'
export default {
data() {
return {
coupon_grant_id: '',
code: '',
showCode: false,
loaded:false,
info: {},
contentArr: [],
};
},
components: {
GoodTemplate
},
onLoad(e) {
console.log(this.$route)
this.coupon_grant_id = this.$route.query.id
this.getList()
},
methods: {
// 获取列表
getList() {
getCouponsInfoById(this.coupon_grant_id).then(res => {
this.info = res
this.contentArr = res.description.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').split('<br/>')
this.loaded = true
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
duration: 3000
})
})
},
// 点击立即购买去商品确认页面
nowBuy(items) {
console.log(items, 'items....')
let data = {
skuId: items.goods_sku_id,
qty: 1
}
this.$router.push({
name: 'Buy',
params: data
})
console.log(data)
},
// 点击二维码特效
clickCode(grantid) {
this.code = ''
if (grantid !== '') {
let data = {
coupon_grant_id: grantid
}
getQrcodeByGrantId(data).then(res => {
console.log(res)
this.code = res.code
this.showCode = !this.showCode
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
duration: 3000
})
})
}
},
// 代金券立即购买
}
}
</script>
<style lang="scss" scoped>
// page{
// width: 100%;
// height: 100%;
// padding-bottom: 120rpx;
// }
.clickCodeBtn {
background-color: $main-color;
color: #fff;
font-size: 30rpx;
font-weight: bold;
padding: 30rpx 0;
text-align: center;
border-radius: 30rpx;
width: 90%;
margin-left: 5%;
position: fixed;
bottom: 20rpx;
}
.couponDetail {
padding-bottom: 20rpx;
background-color: #f7f7f7;
min-height: 100vh;
padding-top: $margin;
position: relative;
padding-bottom: 120rpx;
// 优惠券
.coupon {
margin: 0 $margin * 2;
background-color: #Fff;
position: relative;
z-index: 1;
color: #333;
padding: 30rpx 20rpx;
box-shadow: 0 10rpx 20rpx 10rpx rgba($color: #000000, $alpha: .1);
border-radius: 20rpx;
.coupon-title {
width: 100%;
font-size: 34rpx;
}
.coupon-des {
color: $main-color;
font-size: 32rpx;
padding: 16rpx 0;
}
.coupon-date {
color: #999;
font-size: 28rpx;
margin-top: 10rpx;
}
}
// 可用商品
.goods-item {
background-color: #fff;
margin: $margin*1.5 $margin * 2;
border-radius: 20rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
padding: $padding;
box-shadow: 0 10rpx 20rpx 10rpx rgba($color: #000000, $alpha: .1);
.goods-img {
width: 140rpx;
height: 140rpx;
border-radius: 10rpx;
}
.goods-right {
margin-left: 30rpx;
width: calc(100% - 200rpx);
.goods-right-title {
font-size: 30rpx;
font-weight: 400;
}
.goods-right-bottom {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
margin-top: 20rpx;
.money {
font-size: 32rpx;
font-weight: 500;
color: $main-color;
}
.used {
background-image: linear-gradient(to left, $main-color, $main-color-light);
padding: 10rpx 20rpx;
border-radius: 20rpx;
color: #fff;
font-size: 26rpx;
}
}
}
}
.goods-title {
font-size: 34rpx;
font-weight: bold;
text-align: left;
margin: $margin*2;
// text-shadow:10rpx 10rpx linear-gradient(to right, #f39e17, #f85b05);
text-shadow: 2rpx 2rpx 10rpx $main-color;
}
// 描述
.describe {
margin: $margin * 2 0;
.describe-des {
color: #999;
padding: 10rpx $margin * 2;
font-size: 28rpx;
}
}
}
// 动画效果
.showCode {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
z-index: 199999999999999993;
.showCodeBg {
background-color: rgba($color:#000, $alpha: 0.3);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 199999999999999994;
}
.showCodeContentSelect {
animation: sk-foldCubeAngle .6s linear both;
}
.showCodeContentSelectNo {
animation: sk-foldCubeAngleNo .6s linear both;
}
.showCodeContent {
width: 600rpx;
height: 500rpx;
background-color: #fff;
border-radius: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 30rpx;
position: relative;
z-index: 199999999999999995;
image {
width: 60%;
}
.showCodeTitle {
font-weight: 600;
padding-bottom: 40rpx;
font-size: 36rpx;
}
}
}
@keyframes sk-foldCubeAngle {
0% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
100% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
}
@keyframes sk-foldCubeAngleNo {
0% {
transform: scale(1);
opacity: 1;
}
25% {
transform: scale(0);
opacity: 0;
}
}
@keyframes turn {
0% {
-webkit-transform: rotate(0deg);
opacity: 1;
}
25% {
-webkit-transform: rotate(90deg);
opacity: .9;
}
50% {
-webkit-transform: rotate(180deg);
opacity: .8;
}
75% {
-webkit-transform: rotate(270deg);
opacity: .9;
}
100% {
-webkit-transform: rotate(360deg);
opacity: 1;
}
}
</style>

885
pages/property/coupon/index.vue Normal file
View File

File diff suppressed because one or more lines are too long

2
pages/property/index.vue
View File

@@ -91,7 +91,7 @@
<image class="item-cover" src="@/static/icons/user_icon_02.png" mode="aspectFill" />
<view class="item-title">关注企业</view>
</view>
<view class="item">
<view class="item" @click="$Router.push({name:'CouponList'})">
<image class="item-cover" src="@/static/icons/user_icon_03.png" mode="aspectFill" />
<view class="item-title">我的优惠券</view>
</view>

2
pages/property/order/mallRefund.vue
View File

@@ -205,7 +205,7 @@
// 查看详情
goDetail(no){
this.$Router.push({
this.$router.push({
name: 'MallRefundsInfo',
params:{
no:no

8
pages/property/order/mallShipments.vue
View File

@@ -313,7 +313,7 @@
// 申请退货
nowRefund(no) {
this.$Router.push({
this.$router.push({
name: 'MallShipmentsRefund',
params: {
no: no
@@ -322,7 +322,7 @@
},
// 查看物流
nowLogistics(no) {
this.$Router.push({
this.$router.push({
name: 'Orderlogistics',
params: {
no: no
@@ -331,7 +331,7 @@
},
// 查看详情
goDetail(no) {
this.$Router.push({
this.$router.push({
name: 'MallShipmentsInfo',
params: {
no: no
@@ -341,7 +341,7 @@
// 查看退货单详情
// 查看详情
goDetail1(no){
this.$Router.push({
this.$router.push({
name: 'MallRefundsInfo',
params:{
no:no

2
pages/property/order/mallShipmentsInfo.vue
View File

@@ -211,7 +211,7 @@
},
// 申请退货
nowRefund(no){
this.$Router.push({
this.$router.push({
name: 'MallShipmentsRefund',
params:{
no:no