Skip to content

J
jz_Travel
Commit fa67c472 authored by youjie's avatar youjie
Browse files
Options

优惠券详情

parent 24fd0823
Hide whitespace changes
Inline Side-by-side
Showing with 247 additions and 4 deletions
App.vue
View file @ fa67c472
......@@ -116,6 +116,11 @@ export default {
url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/ViySHjFRkPg9.woff") format("woff");
font-display: swap;
}
@font-face {
font-family: "DFPLiJinHeiW8-GB";
src: url("https://im.oytour.com/tripfont/cb76573b1580477fbea1ce0cc0d136e5.woff");
}
// @font-face {
// font-family: "oswald";
// src: url("https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/smallapp/Oswald-Regular.ttf");
......
components/header/header.vue 0 → 100644
View file @ fa67c472
<template>
<view class="carrHeader" :style="[titleStyle]">
<view class="carrHeaderBox">
<view class="carrHeader-left">
<view class="carrHeader-left-icon" @click="goBack">
<u-icon name="arrow-left" size="38" color="#000"></u-icon>
</view>
</view>
<view class="carrHeader-title">
<slot>{{title}}</slot>
</view>
</view>
</view>
</template>
<script>
export default {
props:['title'],
data() {
return {
titleStyle:{}
}
},
mounted() {
const that = this
uni.getSystemInfo({
success(res) {
that.titleStyle = {
paddingTop: `${res.statusBarHeight}px`
};
},
});
},
methods:{
goBack(){
uni.navigateBack({delta:-1})
}
}
}
</script>
<style>
.carrHeader-title{
width: 100%;
position: relative;
left: 0;
right: 0;
text-align: center;
font-size: 32rpx;
}
.carrHeader-left{
position: absolute;
left: 32rpx;
}
.carrHeaderBox{
width: 100%;
height: 88rpx;
padding: 0 32rpx;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.carrHeader{
padding-top: 48rpx;
}
</style>
\ No newline at end of file
pages.json
View file @ fa67c472
......@@ -206,7 +206,13 @@
"path": "list/list"
},
{
"path": "details/details"
"path": "details/details",
"style": {
"navigationStyle": "custom"
},
"globalStyle": {
"navigationStyle": "custom"
}
},
{
"path": "index/index"
......
pages/coupon/details/details.vue
View file @ fa67c472
<template>
<view class="coupondetailsStyle" :style="{ height: contentHeight }">
<view class="cd_box">
<view class="couponDetailsHeadeBox">
<headers :title="'优惠券详情'"></headers>
<view class="couponDetailsHeadeNB">
<view class="couponDetailsHeade">
<view class="couponDetailsHeadeL">
<view class="couponDetailsHeadeLq" v-if="g.couponsType==1">
<view>¥</view>
</view>
<view class="couponDetailsHeadeLn">{{ g.denomination }}</view>
<view class="couponDetailsHeadeLq" style="margin-right: 0;margin-left: 10rpx;" v-if="g.couponsType==2">
<view>折</view>
</view>
</view>
<view class="couponDetailsHeadeR">
<view class="couponDetailsHeadeRt">{{ g.couponName }}</view>
<view class="couponDetailsHeadeRn">满{{g.useCondition}}元使用</view>
</view>
</view>
</view>
</view>
<view class="cdTiaojian_box">
<view class="cdTiaojianB">
<view class="cdTiaojianBLeft">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638726421660548071.png"/>
</view>
<view class="cdTiaojianBRight">
<view class="cdTiaojianBRTitle">使用条件</view>
<view class="cdTiaojianBRText">满{{g.useCondition}}元使用</view>
</view>
</view>
<view class="cdTiaojianB">
<view class="cdTiaojianBLeft">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638726421660548071.png"/>
</view>
<view class="cdTiaojianBRight">
<view class="cdTiaojianBRTitle">有效期</view>
<view class="cdTiaojianBRText">{{g.effectDate}}-{{g.expirationDate}}</view>
</view>
</view>
<view class="cdTiaojianB">
<view class="cdTiaojianBLeft">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638726421660548071.png"/>
</view>
<view class="cdTiaojianBRight">
<view class="cdTiaojianBRTitle">使用说明</view>
<view class="cdTiaojianBRText">券类型：{{ g.couponsType==1?'抵用券':'折扣卷' }}</view>
<view class="cdTiaojianBRText">使用范围：{{ g.couponsUseScopeName }}</view>
<!-- <view class="cdTiaojianBRText">{{ g.remark }}</view> -->
</view>
</view>
<view class="cdTiaojianButtom" @click="gouseUrl(g)">立即使用</view>
</view>
<view class="cd_box" v-if="false">
<Text class='cd_name'>
{{g.couponName}}
</Text>
......@@ -43,7 +97,11 @@
</template>
<script>
import headers from "@/components/header/header";
export default {
components: {
headers,
},
data() {
return {
pageTitle: "优惠券详情",
......@@ -114,7 +172,7 @@
width: 100%;
height: 100%;
background: #f3f4f6;
padding-top: 10px;
/* padding-top: 10px; */
}
......@@ -122,12 +180,12 @@
width: 94%;
border-radius: 10rpx;
background: #fff;
margin-left: 3%;
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
margin-top: 250rpx;
}
.cd_box .cd_name {
......@@ -182,4 +240,113 @@
width: 90%;
font-size: 15px;
}
.couponDetailsHeadeBox{
position: relative;
/* position: fixed; */
width: 100%;
height: 328rpx;
top: 0;
background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638726421380079705.png');
background-size: 100% auto;
}
.couponDetailsHeadeNB{
position: absolute;
width: 100%;
top: 190rpx;
}
.couponDetailsHeade{
width: 675rpx;
height: 232rpx;
background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638726421549327416.png');
background-size: 100% auto;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
padding: 76rpx 86rpx;
}
.couponDetailsHeadeL{
flex-shrink: 0;
display: flex;
flex-direction: row;
}
.couponDetailsHeadeLq{
display: flex;
font-size: 44rpx;
color: rgba(222, 87, 67, 1);
margin-right: 10rpx;
}
.couponDetailsHeadeLq{
position: relative;
top: 25rpx;
}
.couponDetailsHeadeLn{
font-size: 84rpx;
color: rgba(222, 87, 67, 1);
font-family: "DFPLiJinHeiW8-GB";
}
.couponDetailsHeadeR{
flex: 1;
margin-left: 27rpx;
}
.couponDetailsHeadeRt{
width: 100%;
font-weight: bold;
font-size: 32rpx;
color: #7D5D0D;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.couponDetailsHeadeRn{
width: 100%;
font-weight: 500;
font-size: 24rpx;
color: #B99846;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 20rpx;
}
.cdTiaojian_box{
padding: 0 66rpx;
margin-top: 143rpx;
/* margin-top: 480rpx; */
}
.cdTiaojianB{
display: flex;
margin-bottom: 59rpx;
}
.cdTiaojianBLeft{
flex-shrink: 0;
margin-right: 19rpx;
}
.cdTiaojianBLeft img{
width: 16rpx;
height: 16rpx;
display: inline-block;
}
.cdTiaojianBRTitle{
font-weight: 500;
font-size: 28rpx;
color: #080A09;
}
.cdTiaojianBRText{
font-weight: 500;
font-size: 24rpx;
color: #B99846;
margin-top: 23rpx;
}
.cdTiaojianButtom{
width: 100%;
height: 84rpx;
background: #E2C27A;
border-radius: 18rpx;
color: #fff;
font-weight: bold;
font-size: 30rpx;
text-align: center;
line-height: 84rpx;
margin-top: 83rpx;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment