1hjz
/
1hjz-h5
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

修改了样式

feature/feature-compatible
wangkesi 7 years ago
parent
59946ce0ac
commit
f1a16f1588
3 changed files with 212 additions and 188 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 99
      src/components/nav-bottom.vue
  2. 2
      src/router/index.js
  3. 299
      src/view/month-card.vue

99
src/components/nav-bottom.vue
View File

@ -1,15 +1,15 @@
<template>
<div class="router-bottom">
<router-link :class="{active:$route.name=='首页'}" to="/home">
<router-link class="home" :class="{active:$route.name=='首页'}" to="/home">
<img v-if="$route.name!='首页'" src="../assets/images/icon/home.png" />
<img v-else src="../assets/images/icon/home-s.png">
<span>首页</span>
</router-link>
<a href="/mall/web/appoint_index">
<a class="service" href="/mall/web/appoint_index">
<img src="../assets/images/icon/server.png" />
<span>服务</span>
</a>
<a href="/mall/web/owner">
<a class="user-center" href="/mall/web/owner">
<img src="../assets/images/icon/my.png" />
<span>我的</span>
</a>
@ -17,44 +17,65 @@
</template>
<script>
export default {
methods: {
}
}
export default {
};
</script>
<style>
<style lang="scss">
.router-bottom {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
box-sizing: border-box;
border-top: 1px solid #ddd;
z-index: 1000;
bottom: 0;
left: 0;
}
.router-bottom a {
list-style: none;
color: #999999;
}
.router-bottom a img {
width: 0.36rem;
height: 0.36rem;
display: block;
margin-bottom: 0.1rem;
}
.router-bottom a span {
height:0.2rem;
font-size:0.2rem;
font-weight:400;
display: block;
}
.router-bottom a.active {
color: #29B079;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
box-sizing: border-box;
border-top: 1px solid #ddd;
z-index: 1000;
bottom: 0;
left: 0;
.home {
img {
width: 0.46rem;
height: 0.44rem;
}
}
.service {
img {
width: 0.45rem;
height: 0.39rem;
}
}
.user-center {
img {
width: 0.36rem;
height: 0.46rem;
}
}
.active {
span {
color: #29b079;
}
}
a {
list-style: none;
color: #999999;
display: flex;
flex-direction: column;
align-items: center;
img {
margin-bottom: 0.09rem;
}
span {
line-height: 1;
// height: 0.2rem;
font-size: 0.2rem;
font-weight: 400;
display: block;
}
}
}
// .router-bottom .router-bottom a .router-bottom a .router-bottom a.active {
// color: #29b079;
// }
</style>

2
src/router/index.js
View File

@ -77,7 +77,7 @@ let router = new Router({
},
{
path: "/order-detail",
name: "orderCheck",
name: "orderDetail",
component: resolve => require(["@/view/order-detail.vue"], resolve)
},
{

299
src/view/month-card.vue
View File

@ -1,196 +1,199 @@
<template>
<div class="">
<div class="m-slider">
<img src="../assets/images/slider-img.png" width="100%" height="100%" alt="">
</div>
<div class="month-card-title f-text-center">
<h4 class="">{{getData.goodsName}}</h4>
<p class="f-mt5">{{getData.shortDesc}}</p>
<p class="f-price f-mt10 f-flex justify-center">
<span class="s-gray f-mr15">市场价 : &nbsp;<span class="line-through">￥{{getData.originalPrice | numFilter}}</span></span>
<span>券后价 : </span><span class="f-font-23 s-red">￥{{getData.couponPrice | numFilter}}</span>
</p>
</div>
<div class="month-card-area">
<div class="month-card f-flex" style="margin-bottom: -35px;">
<div class="month-card-left" style="width: 76%;">
<div class="f-flex f-mt9">
<div class="f-mb20 f-mr10">
<p v-show="getData.type != 3" class="f-font-15" style="line-height:1;">￥</p>
<!-- 定额券 -->
<div v-show="getData.type == 1" class="f-bold f-font-45" style="text-shadow: 1px 1px #852B0E;">{{getData.amount | numFilter}}</div>
<!-- 满减券 -->
<div v-show="getData.type == 2" class="f-bold f-font-45" style="text-shadow: 1px 1px #852B0E;">{{getData.amount | numFilter}}</div>
<!-- 折扣 -->
<div v-show="getData.type == 3" class="f-bold f-font-45" style="text-shadow: 1px 1px #852B0E;">{{Number(getData.discount/10)}}折</div>
<!-- 定额券 -->
<p v-show="getData.type != 2" class="f-font-12 f-mt5" style="margin-left: 6px;">{{couponType[getData.type]}}</p>
<!-- 满减券 -->
<p v-show="getData.type == 2" class="f-font-12 f-mt5" style="margin-left: 6px;">满{{getData.fullAmount | numFilter}}可用</p>
</div>
<div class="f-mb20">
<p class="new-man">{{getData.batchName}}</p>
<p class="limit-buy">({{getData.goodsDesc}})</p>
<p class="end-date">{{getData.invalidTimeDesc}}</p>
</div>
</div>
</div>
<div class="month-card-right justify-center" style="margin-left:10px;">
<div v-show="getData.couponStatus == 0" class="f-mt-15 f-flex">
<img src="../assets/images/arrow-right_03.png" width="7" height="12" alt="" class="f-mr15">
<button class="get-btn" v-on:click="handleGetCoupon">点击领取</button>
</div>
<img v-show="getData.couponStatus > 0" src="../assets/images/get.png" width="60" height="60" alt="" class="f-mt-10">
</div>
</div>
<div class="f-mt10 f-text-center" v-show="getData.couponStatus > 0">
<button style="background-color:#F45252" v-show="getData.couponStatus != 30" v-on:click="handleUseCoupon" class="btn-md bg-gray s-white f-font-18">立即使用</button>
<button v-show="getData.couponStatus == 30" v-on:click="handleUseCoupon" class="btn-md bg-gray s-white f-font-18">已使用</button>
</div>
<div style="padding: 0 10px 20px;">
<p class="s-gray-1 f-font-11 f-mt20" style="line-height: 18px;">使用范围：{{getData.authAreaStr}}</p>
<p class="f-mt10 f-font-11 s-orange-2">
使用流程：领券下单→关注公众号→预约服务
</p>
<div class="f-text-center">
<div class="qrcode-img">
<img src="../assets/images/qrcode.png" width='100%' height="100%" alt="">
</div>
<p class="f-font-11 f-mt5 s-black-1">预约服务请关注公众号</p>
</div>
</div>
</div>
</div>
<div class="">
<div class="m-slider">
<img src="../assets/images/slider-img.png" width="100%" height="100%" alt="">
</div>
<div class="month-card-title f-text-center">
<h4 class="">{{getData.goodsName}}</h4>
<p class="f-mt5">{{getData.shortDesc}}</p>
<p class="f-price f-mt10 f-flex justify-center">
<span class="s-gray f-mr15">市场价 : &nbsp;<span class="line-through">￥{{getData.originalPrice | numFilter}}</span></span>
<span>券后价 : </span><span class="f-font-23 s-red">￥{{getData.couponPrice | numFilter}}</span>
</p>
</div>
<div class="month-card-area">
<div class="month-card f-flex" style="margin-bottom: -35px;">
<div class="month-card-left" style="width: 76%;">
<div class="f-flex f-mt9">
<div class="f-mb20 f-mr10">
<p v-show="getData.type != 3" class="f-font-15" style="line-height:1;">￥</p>
<!-- 定额券 -->
<div v-show="getData.type == 1" class="f-bold f-font-45" style="text-shadow: 1px 1px #852B0E;">{{getData.amount | numFilter}}</div>
<!-- 满减券 -->
<div v-show="getData.type == 2" class="f-bold f-font-45" style="text-shadow: 1px 1px #852B0E;">{{getData.amount | numFilter}}</div>
<!-- 折扣 -->
<div v-show="getData.type == 3" class="f-bold f-font-45" style="text-shadow: 1px 1px #852B0E;">{{Number(getData.discount/10)}}折</div>
<!-- 定额券 -->
<p v-show="getData.type != 2" class="f-font-12 f-mt5" style="margin-left: 6px;">{{couponType[getData.type]}}</p>
<!-- 满减券 -->
<p v-show="getData.type == 2" class="f-font-12 f-mt5" style="margin-left: 6px;">满{{getData.fullAmount | numFilter}}可用</p>
</div>
<div class="f-mb20">
<p class="new-man">{{getData.batchName}}</p>
<p class="limit-buy">({{getData.goodsDesc}})</p>
<p class="end-date">{{getData.invalidTimeDesc}}</p>
</div>
</div>
</div>
<div class="month-card-right justify-center" style="margin-left:10px;">
<div v-show="getData.couponStatus == 0" class="f-mt-15 f-flex">
<img src="../assets/images/arrow-right_03.png" width="7" height="12" alt="" class="f-mr15">
<button class="get-btn" v-on:click="handleGetCoupon">点击领取</button>
</div>
<img v-show="getData.couponStatus > 0" src="../assets/images/get.png" width="60" height="60" alt="" class="f-mt-10">
</div>
</div>
<div class="f-mt10 f-text-center" v-show="getData.couponStatus > 0">
<button style="background-color:#F45252" v-show="getData.couponStatus != 30" v-on:click="handleUseCoupon" class="btn-md bg-gray s-white f-font-18">立即使用</button>
<button v-show="getData.couponStatus == 30" v-on:click="handleUseCoupon" class="btn-md bg-gray s-white f-font-18">已使用</button>
</div>
<div style="padding: 0 10px 20px;">
<p class="s-gray-1 f-font-11 f-mt20" style="line-height: 18px;">使用范围：{{getData.authAreaStr}}</p>
<p class="f-mt10 f-font-11 s-orange-2">
使用流程：领券下单→关注公众号→预约服务
</p>
<div class="f-text-center">
<div class="qrcode-img">
<img src="../assets/images/qrcode.png" width='100%' height="100%" alt="">
</div>
<p class="f-font-11 f-mt5 s-black-1">预约服务请关注公众号</p>
</div>
</div>
</div>
</div>
</template>
<script>
import couponModel from '../models/coupon-model';
import configs from '../configs';
import { Alert, Toast,Popup,Picker } from "vux";
var strCookie =document.cookie;
var cookieName = "1hjz_mall_login_access_token=";
var token = strCookie.slice(cookieName.length);
import couponModel from "../models/coupon-model";
import configs from "../configs";
import { Alert, Toast, Popup, Picker } from "vux";
var locationUrl = configs.locationUrl;
var strCookie = document.cookie;
var cookieName = "1hjz_mall_login_access_token=";
var token = strCookie.slice(cookieName.length);
export default {
var locationUrl = configs.locationUrl;
export default {
data() {
return {
loading: false,
getData: {},
couponType: {
'1': '定额券',
'2': '满减券',
'3': '折扣券',
"1": "定额券",
"2": "满减券",
"3": "折扣券"
},
batchNo: this.$route.query.batchNo,
batchNo: this.$route.query.batchNo
};
},
components: {
Toast,
Popup,
Picker
},
Toast,
Popup,
Picker
},
methods: {
// 初始化
handleInit() {
let that = this;
// 回去优惠券信息
couponModel.getCouponInfo(that.batchNo, token).then(function (result) {
// console.log("xx",result.response);
that.loading = false;
if ( result.code == 0 ) {
if ( result.response.isLogin ){
that.sourceUser()
}
that.getData = result.response
} else {
//console.log(result.msg);
alert(result.msg);
}
});
couponModel
.getCouponInfo(that.batchNo, token)
.then(function(result) {
// console.log("xx",result.response);
that.loading = false;
if (result.code == 0) {
if (result.response.isLogin) {
that.sourceUser();
}
that.getData = result.response;
} else {
//console.log(result.msg);
alert(result.msg);
}
});
},
// 立即使用优惠券
handleUseCoupon() {
window.location.href = locationUrl + '/mall/web/vgoods/detail/' + this.getData.goodsNo;
window.location.href =
locationUrl + "/mall/web/vgoods/detail/" + this.getData.goodsNo;
},
// 领取优惠券
handleGetCoupon() {
let that = this;
let that = this;
this.loading = true;
let params = {
batchNo: that.batchNo
let params = {
batchNo: that.batchNo
};
// 调用领券接口
couponModel.giveCoupon(params,token).then(function (result) {
that.loading = false;
console.log("信息",result)
if (result.code === 0 || result.code === 3) {
window.history.go(0);
} else if (result.code === 666) {
that.$vux.toast.text("您还没登录，请先登录!","middle");
setTimeout(function () {
window.location.href = locationUrl + '/mall/web/user/login?callback=' + encodeURIComponent(window.location.href);
}, 1000);
} else {
if (result.msg === '' || result.msg === undefined || result.msg == null) {
result.msg = '操作失败，请刷新重试';
}
alert(result.msg);
}
couponModel.giveCoupon(params, token).then(function(result) {
that.loading = false;
console.log("信息", result);
if (result.code === 0 || result.code === 3) {
window.history.go(0);
} else if (result.code === 666) {
that.$vux.toast.text("您还没登录，请先登录!", "middle");
setTimeout(function() {
window.location.href =
locationUrl +
"/mall/web/user/login?callback=" +
encodeURIComponent(window.location.href);
}, 1000);
} else {
if (
result.msg === "" ||
result.msg === undefined ||
result.msg == null
) {
result.msg = "操作失败，请刷新重试";
}
alert(result.msg);
}
});
},
sourceUser (){
var sourceUserId = this.$route.query.sourceUserId
if ( sourceUserId ){
couponModel.sourceUser(sourceUserId).then(res => {
})
}
},
sourceUser() {
var sourceUserId = this.$route.query.sourceUserId;
if (sourceUserId) {
couponModel.sourceUser(sourceUserId).then(res => {});
}
}
},
},
filters: {
numFilter(value) {
numFilter(value) {
// 截取当前数据到小数点后三位
let transformVal = Number(value/100).toFixed(1)
let realVal = transformVal.substring(0, transformVal.length - 1)
let transformVal = Number(value / 100).toFixed(1);
let realVal = transformVal.substring(0, transformVal.length - 1);
// num.toFixed(3)获取的是字符串
return Number(realVal)
return Number(realVal);
}
},
mounted() {
// 初始化
this.handleInit();
this.wxShare({"couponNo":this.batchNo,"source":20,"url":encodeURIComponent(location.href)})
this.wxShare({
couponNo: this.batchNo,
source: 20,
url: encodeURIComponent(location.href)
});
}
}
};
</script>
<style>
body {
background-color: #FFF3E8;
}
body {
background-color: #fff3e8;
}
</style>
Write Preview
Loading…
Cancel
Save