|
|
@@ -0,0 +1,200 @@
|
|
|
+<template>
|
|
|
+ <view class="box">
|
|
|
+ <view style="width: 750rpx;height: 172rpx;background: #F03B3B;"></view>
|
|
|
+
|
|
|
+ <view class="detailBg">
|
|
|
+ <view class="detailTop">
|
|
|
+ <view class="leftB">
|
|
|
+ <view class="use">￥<span class="use2">{{detail.actMoney}}</span></view>
|
|
|
+ <!-- <view class="used" v-else>￥<span class="used2">{{detail.actMoney}}</span></view> -->
|
|
|
+ <view class="tiaojian">{{detail.whereMoney!==0?'满'+detail.whereMoney+'元可用':'满任意金额可用'}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="centerB">
|
|
|
+ <view class="name">{{detail.actName}}</view>
|
|
|
+ <view class="time" v-if="detail.startTime">
|
|
|
+ 有效期：{{detail.startTime.slice(0,10)}}-{{detail.endTime.slice(0,10)}}</view>
|
|
|
+ <view class="time" v-else>有效期：</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="comtentBox">
|
|
|
+ <view style="margin-bottom: 30rpx;">
|
|
|
+ <view class="titleBox">
|
|
|
+ <view class="redPoint"></view>
|
|
|
+ <view class="title">可用次数</view>
|
|
|
+ </view>
|
|
|
+ <view class="content">{{detail.avaQty}}次</view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view style="margin-bottom: 30rpx;">
|
|
|
+ <view class="titleBox">
|
|
|
+ <view class="redPoint"></view>
|
|
|
+ <view class="title">适用门店</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-for="(v,index) in detail.shopNames.split(',')">
|
|
|
+ <view class="content">{{v}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view>
|
|
|
+ <view class="titleBox">
|
|
|
+ <view class="redPoint"></view>
|
|
|
+ <view class="title">使用说明</view>
|
|
|
+ </view>
|
|
|
+ <view v-if="detail.couContent" v-html="detail.couContent"></view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: '',
|
|
|
+ detail: {},
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(opt) {
|
|
|
+ this.id = opt.id;
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getData() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ });
|
|
|
+
|
|
|
+ this.$http('opencoupon/detailsCoupon', {
|
|
|
+ // lat: this.location.lat,
|
|
|
+ // lng: this.location.lng,
|
|
|
+ id: this.id,
|
|
|
+ }, 'GET').then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.detail = res.data;
|
|
|
+
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+ .box {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #F4F5F7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detailBg {
|
|
|
+ margin: -100rpx 24rpx 0rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding: 40rpx 20rpx 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detailTop {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .use {
|
|
|
+
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #F03B3B;
|
|
|
+ }
|
|
|
+
|
|
|
+ .use2 {
|
|
|
+
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #F03B3B;
|
|
|
+ line-height: 56rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .used {
|
|
|
+
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .used2 {
|
|
|
+
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 56rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tiaojian {
|
|
|
+
|
|
|
+ font-size: 24rpx;
|
|
|
+
|
|
|
+ color: #666666;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+
|
|
|
+ font-size: 30rpx;
|
|
|
+
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 42rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time {
|
|
|
+ font-size: 24rpx;
|
|
|
+
|
|
|
+ color: #666666;
|
|
|
+ margin-top: 15rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .leftB {
|
|
|
+ margin-right: 15rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .comtentBox {
|
|
|
+ margin: 20rpx 24rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .titleBox {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .redPoint {
|
|
|
+ width: 18rpx;
|
|
|
+ height: 18rpx;
|
|
|
+ background: #F03B3B;
|
|
|
+ border-radius: 9rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #333333;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666666;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ margin-left: 28rpx;
|
|
|
+ }
|
|
|
+</style>
|
guo