You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
high-mini/pages/goods/coupon-details/coupon-details.vue

155 lines
4.1 KiB

<template>
<view>
<view class="width100 fotct coupon-status font14 fcor41c">已使用</view>
<view class="line1"></view>
<view class="coupon-cont width90">
<view class="flright fotct">
<image class="coupon-img" src="../../../static/img/goods/oil.png"></image>
</view>
<view class="coupon-mes mart10">
<view class="fcor333 fontwig6 font24 width100">好利来10元券</view>
<view class="fcor666 font15 width100 mart5">中国石化</view>
<view class="fcor666 font13 width100 mart5">获得时间:2020/12/02 13:12:21</view>
<view class="fcor666 font13 width100 mart5">使用时间:2020/12/03 23:23:22</view>
<view class="fcorred font15 width100 mart5">过期时间:2021/11/01 23:59:22</view>
</view>
</view>
<view class="line1 mart15"></view>
<view class="width90 mart10 fcor666">核销码(商户扫客户)</view>
<view class="width90 mart20 fotct">
<image class="coupon-qr" src="../../../static/img/qr.png"></image>
</view>
<view class="width90 mart60" style="height: 80px;">
<view class="coupon-des flleft">
立即<br>前往
</view>
<view class="coupon-cont-dh">
<view class="coupon-title flleft width70">
<view class="font20 fcor333 fontwig6 width100">重庆好利来大坪店</view>
<view class="font14 fcor999 width100 text2 mart5">长江二路2号(中国石化肖家湾加油站)</view>
</view>
<view class="coupon-map flright width30 fotrt">
<!-- 地图logo -->
<image src="../../../static/img/goods/oil.png"></image>
<view class="mart5 fcor999 font13">2.28KM</view>
</view>
</view>
</view>
<view class="width90 mart60" style="height: 80px;">
<view class="coupon-des flleft">
立即<br>前往
</view>
<view class="coupon-cont-dh">
<view class="coupon-title flleft width70">
<view class="font20 fcor333 fontwig6 width100">重庆好利来大坪店</view>
<view class="font14 fcor999 width100 text2 mart5">长江二路2号(中国石化肖家湾加油站)</view>
</view>
<view class="coupon-map flright width30 fotrt">
<!-- 地图logo -->
<image src="../../../static/img/goods/oil.png"></image>
<view class="mart5 fcor999 font13">2.28KM</view>
</view>
</view>
</view>
<view class="width90 mart60" style="height: 80px;">
<view class="coupon-des flleft">
立即<br>前往
</view>
<view class="coupon-cont-dh">
<view class="coupon-title flleft width70">
<view class="font20 fcor333 fontwig6 width100">重庆好利来大坪店</view>
<view class="font14 fcor999 width100 text2 mart5">长江二路2号(中国石化肖家湾加油站)</view>
</view>
<view class="coupon-map flright width30 fotrt">
<!-- 地图logo -->
<image src="../../../static/img/goods/oil.png"></image>
<view class="mart5 fcor999 font13">2.28KM</view>
</view>
</view>
</view>
<view class="height60"></view>
<button class="coupne-btn width100" @click="scan">其他门店</button>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
scan() {
uni.scanCode({
success: function(res) {
console.log('条码类型:' + res.scanType);
console.log('条码内容:' + res.result);
}
});
}
}
}
</script>
<style lang="scss">
.coupon-status {
height: 35px;
line-height: 35px;
}
.coupon-cont {
height: 130px;
}
.coupon-mes {
margin-right: 90px;
}
.coupon-img {
width: 80px;
height: 80px;
margin-top: 10px;
}
.coupon-qr {
width: 150px;
height: 150px;
}
.coupon-des {
width: 80px;
height: 80px;
text-align: center;
color: white;
font-size: 28px;
border-radius: 10px;
background-color: red;
}
.coupon-cont-dh {
margin-left: 90px;
}
.coupon-map image {
width: 45px;
height: 45px;
}
.coupon-no {
height: 80px;
line-height: 80px;
border: 1px solid #b2b2b2;
border-radius: 10px;
}
.coupne-btn {
position: fixed;
bottom: 0px;
background-color: red;
color: #FFFFFF;
}
</style>