mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-05 03:36:39 +08:00
更改优惠券
This commit is contained in:
parent
f34631c9c4
commit
30a6381d0e
319
rc-busness/assets/css/discount.less
Normal file
319
rc-busness/assets/css/discount.less
Normal file
@ -0,0 +1,319 @@
|
||||
@media screen and (max-width:768px){
|
||||
.allmain{
|
||||
.rc-top{
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
}
|
||||
.active {
|
||||
font-size: 14px;
|
||||
color: #E2001A;
|
||||
|
||||
}
|
||||
.unactive {
|
||||
font-size: 14px;
|
||||
color: #444444;
|
||||
|
||||
}
|
||||
.rc-usermain{
|
||||
.online{
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.rc {
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 23px;
|
||||
span {
|
||||
display: block;
|
||||
margin-left: 32px;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
span:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.rc-discount {
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
margin-top: 16px;
|
||||
width: 335px;
|
||||
background: #ffffff;
|
||||
position: relative;
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.rc-contair {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 8;
|
||||
}
|
||||
.rc-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #e1001a;
|
||||
text-align: center;
|
||||
width: 30%;
|
||||
font-weight: bold;
|
||||
float: left;
|
||||
height: 100%;
|
||||
i {
|
||||
font-style: normal;
|
||||
font-size: 12px;
|
||||
}
|
||||
span {
|
||||
font-size: 26px;
|
||||
}
|
||||
strong {
|
||||
font-style: normal;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.rc-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
i {
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #e1001a;
|
||||
}
|
||||
.rc-userfont {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
strong{
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
}
|
||||
.ts-stand{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
padding-right: 17px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.ts-standard-btn{
|
||||
|
||||
width: 72px;
|
||||
display: flex;
|
||||
height: 25px;
|
||||
background: #E2001A;
|
||||
border-radius: 100px;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
justify-content: center;
|
||||
margin-top: 8px;
|
||||
|
||||
}
|
||||
span{
|
||||
margin-top: 0;
|
||||
}
|
||||
margin-top: 17px;
|
||||
padding-left: 36px;
|
||||
}
|
||||
.rc-footer {
|
||||
display: flex;
|
||||
align-items:flex-end
|
||||
span {
|
||||
width: 72px;
|
||||
height: 25px;
|
||||
background: #e2001a;
|
||||
text-align: center;
|
||||
line-height: 25px;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 100px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@media screen and (min-width: 769px){
|
||||
|
||||
.allmain{
|
||||
.rc-top{
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.rs-dis{
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
}
|
||||
.active {
|
||||
font-size: 14px;
|
||||
color: #E2001A;
|
||||
|
||||
}
|
||||
.unactive {
|
||||
font-size: 14px;
|
||||
color: #444444;
|
||||
|
||||
}
|
||||
.rc-usermain{
|
||||
.online{
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.rc {
|
||||
height: 96px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 23px;
|
||||
justify-content: center;
|
||||
span {
|
||||
display: block;
|
||||
margin-left: 40px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
span:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.rc-discount {
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
margin-top: 16px;
|
||||
width: 335px;
|
||||
background: #ffffff;
|
||||
position: relative;
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.rc-contair {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 8;
|
||||
}
|
||||
.rc-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #e1001a;
|
||||
text-align: center;
|
||||
width: 30%;
|
||||
font-weight: bold;
|
||||
float: left;
|
||||
height: 100%;
|
||||
i {
|
||||
font-style: normal;
|
||||
font-size: 12px;
|
||||
}
|
||||
span {
|
||||
font-size: 26px;
|
||||
}
|
||||
strong {
|
||||
font-style: normal;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.rc-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
i {
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #e1001a;
|
||||
}
|
||||
.rc-userfont {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
strong{
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
}
|
||||
.ts-stand{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
padding-right: 17px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.ts-standard-btn{
|
||||
|
||||
width: 72px;
|
||||
display: flex;
|
||||
height: 25px;
|
||||
background: #E2001A;
|
||||
border-radius: 100px;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
justify-content: center;
|
||||
margin-top: 8px;
|
||||
|
||||
}
|
||||
span{
|
||||
margin-top: 0;
|
||||
}
|
||||
margin-top: 17px;
|
||||
padding-left: 36px;
|
||||
}
|
||||
.rc-footer {
|
||||
display: flex;
|
||||
align-items:flex-end;
|
||||
span {
|
||||
width: 72px;
|
||||
height: 25px;
|
||||
background: #e2001a;
|
||||
text-align: center;
|
||||
line-height: 25px;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 100px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
@ -76,6 +76,7 @@ export default {
|
||||
},
|
||||
// Build Configuration: https://go.nuxtjs.dev/config-build
|
||||
build: {
|
||||
analyze: true, assetFilter: function(assetFilename) { return assetFilename.endsWith('.js'); }
|
||||
|
||||
},
|
||||
// axios: {
|
||||
|
@ -1,10 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
<Myheader></Myheader>
|
||||
<tabs></tabs>
|
||||
<div class="rc-main">
|
||||
<div class="allmain">
|
||||
|
||||
<Myheader></Myheader>
|
||||
<div class="online bold rc-md-down" id="fixed-catbar-seperator"></div>
|
||||
<!-- <tabs></tabs> -->
|
||||
<div class="rc-top"></div>
|
||||
<div class="rc-usermain">
|
||||
<div class="rc-header">
|
||||
<div class="online bold"></div>
|
||||
<div class="rc">
|
||||
<span
|
||||
v-for="(item, index) in discountlist"
|
||||
:key="index"
|
||||
@ -15,6 +18,8 @@
|
||||
</span>
|
||||
<!-- <span @click="tanchu()">弹出</span> -->
|
||||
</div>
|
||||
<div class="online bold"></div>
|
||||
|
||||
<div class="rs-dis">
|
||||
<div
|
||||
class="rc-discount"
|
||||
@ -31,15 +36,16 @@
|
||||
</div>
|
||||
<div class="rc-right">
|
||||
<i>
|
||||
{{ item.couponDesc }}
|
||||
{{ item.couponName }}
|
||||
</i>
|
||||
<div class="rc-main" id="rc-main">
|
||||
<span>有效期{{item.validFrom}}至</span>
|
||||
<div class="rc-userfont">
|
||||
<strong>有效期</strong>
|
||||
<span>{{item.validFrom}}至</span>
|
||||
<em>{{ item.validTo }}</em>
|
||||
</div>
|
||||
<nuxt-link :to="`/`">
|
||||
<div class="rc-footer" v-if="userload">
|
||||
<span @click="usertiao()">立即使用</span>
|
||||
<nuxt-link :to="`/productdetails/productlist`">
|
||||
<div v-if="userload" class="ts-stand">
|
||||
<span @click="usertiao()" class="ts-standard-btn">立即使用</span>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
@ -49,18 +55,17 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import {allConfig,getdraw} from "../../ajax/getData";
|
||||
import tabs from "@/components/tabs.vue";
|
||||
// import tabs from "@/components/tabs.vue";
|
||||
export default {
|
||||
middleware: 'metaTitle',
|
||||
// middleware: 'metaTitle',
|
||||
meta: {title: '优惠券'},
|
||||
// middleware: 'metaTitle',
|
||||
// // middleware: 'metaTitle',
|
||||
// meta: {title: '优惠券'},
|
||||
data() {
|
||||
return {
|
||||
userload: true,
|
||||
@ -202,7 +207,7 @@ export default {
|
||||
this.pastdue = true;
|
||||
this.userimage = require("../../assets/image/hasused.png");
|
||||
this.userstates=1
|
||||
this.userdraw(this.usermessage.data.mobile,1)
|
||||
this.userdraw(this.usermessage.data.mobile,0)
|
||||
}
|
||||
if (this.activeIndex == 0) {
|
||||
this.userload = true;
|
||||
@ -215,7 +220,7 @@ export default {
|
||||
if (this.activeIndex == 2) {
|
||||
this.userload = false;
|
||||
this.pastdue = true;
|
||||
this.userdraw(this.usermessage.data.mobile,2)
|
||||
this.userdraw(this.usermessage.data.mobile,0)
|
||||
this.userstates=2
|
||||
this.userimage = require("../../assets/image/expired.png");
|
||||
}
|
||||
@ -223,12 +228,9 @@ export default {
|
||||
},
|
||||
|
||||
usertiao(){
|
||||
this.$router.push({
|
||||
path: "/",
|
||||
query: {
|
||||
stype: 1,
|
||||
},
|
||||
});
|
||||
this.$router.push({ name: "productdetails-productlist",
|
||||
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
@ -251,7 +253,6 @@ export default {
|
||||
},
|
||||
components: {
|
||||
Myheader,
|
||||
tabs
|
||||
},
|
||||
};
|
||||
import Myheader from "~/components/header.vue";
|
||||
@ -259,260 +260,6 @@ import Myheader from "~/components/header.vue";
|
||||
|
||||
<style lang="less" scoped>
|
||||
// 手机端
|
||||
@media screen and(min-width: 320px) and(max-width:768px) {
|
||||
.active {
|
||||
font-size: 14px;
|
||||
color: #e2001a;
|
||||
|
||||
}
|
||||
.unactive {
|
||||
font-size: 14px;
|
||||
color: #444444;
|
||||
|
||||
}
|
||||
.rc-header {
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 23px;
|
||||
span {
|
||||
display: block;
|
||||
margin-left: 32px;
|
||||
|
||||
}
|
||||
span:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rc-discount {
|
||||
margin-left: 23px;
|
||||
display: flex;
|
||||
margin-top: 16px;
|
||||
width: 335px;
|
||||
background: #ffffff;
|
||||
position: relative;
|
||||
height: 120px;
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.rc-contair {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.rc-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #e1001a;
|
||||
padding-right: 21px;
|
||||
width: 30%;
|
||||
float: left;
|
||||
height: 100%;
|
||||
i {
|
||||
font-style: normal;
|
||||
font-size: 12px;
|
||||
}
|
||||
span {
|
||||
font-size: 26px;
|
||||
}
|
||||
strong {
|
||||
font-style: normal;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
.rc-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 36px;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
i {
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #e1001a;
|
||||
}
|
||||
.rc-main {
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
}
|
||||
em {
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
.rc-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
span {
|
||||
width: 72px;
|
||||
height: 25px;
|
||||
background: #e2001a;
|
||||
text-align: center;
|
||||
line-height: 25px;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 100px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
// // /* 最小768px最大1920 *pc端/
|
||||
@media screen and (min-width: 768px) and (max-width: 1920px) {
|
||||
.rc-main {
|
||||
width: 100%;
|
||||
.rc-usermain {
|
||||
width: 92%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
font-size: 16px;
|
||||
color: #e2001a;
|
||||
cursor: pointer;
|
||||
}
|
||||
.unactive {
|
||||
font-size: 16px;
|
||||
color: #444444;
|
||||
cursor: pointer;
|
||||
}
|
||||
.rc-header {
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 23px;
|
||||
justify-content: center;
|
||||
span {
|
||||
display: block;
|
||||
margin-left: 32px;
|
||||
}
|
||||
span:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.rs-dis {
|
||||
margin-top: 70px;
|
||||
}
|
||||
.rc-discount {
|
||||
margin-left: 50px;
|
||||
display: flex;
|
||||
margin-top: 40px;
|
||||
width: 335px;
|
||||
background: #ffffff;
|
||||
position: relative;
|
||||
height: 120px;
|
||||
float: left;
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.rc-contair {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.rc-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #e1001a;
|
||||
padding-right: 21px;
|
||||
width: 30%;
|
||||
float: left;
|
||||
height: 100%;
|
||||
i {
|
||||
font-style: normal;
|
||||
font-size: 12px;
|
||||
}
|
||||
span {
|
||||
font-size: 26px;
|
||||
}
|
||||
strong {
|
||||
font-style: normal;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
.rc-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 36px;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
i {
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #e1001a;
|
||||
}
|
||||
.rc-main {
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
}
|
||||
em {
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
.rc-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-right: 10px;
|
||||
span {
|
||||
width: 72px;
|
||||
height: 25px;
|
||||
background: #e2001a;
|
||||
text-align: center;
|
||||
line-height: 25px;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 100px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.rc-userright {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 78px;
|
||||
justify-content: center;
|
||||
height: 78px;
|
||||
border: 2px solid #999999;
|
||||
border-radius: 50%;
|
||||
span {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 1px solid #999999;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import url("../../assets/css/global.less");
|
||||
@import url("../../assets/css/discount.less");
|
||||
</style>
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<Myheader></Myheader>
|
||||
<tabs></tabs>
|
||||
<!-- <tabs></tabs> -->
|
||||
<div class="rc-top"></div>
|
||||
<div class="rc-layout-container rc-one-column rc-full-width ts-mypersonal">
|
||||
<div class="rc-column">
|
||||
|
@ -231,9 +231,9 @@ import { mapMutations } from "vuex";
|
||||
import { goodsmessage,getConfig,postCourseId,getdraw,alldiscount } from "../../ajax/getData";
|
||||
const settings = require("@/config");
|
||||
export default {
|
||||
middleware: 'metaTitle',
|
||||
// middleware: 'metaTitle',
|
||||
meta: {title: '产品详情'},
|
||||
// middleware: 'metaTitle',
|
||||
// // middleware: 'metaTitle',
|
||||
// meta: {title: '产品详情'},
|
||||
data() {
|
||||
return {
|
||||
tableLabelTest:[],
|
||||
|
Loading…
Reference in New Issue
Block a user