[本时生活h5端]
This commit is contained in:
387
pages/couponDetails/couponDetails.vue
Normal file
387
pages/couponDetails/couponDetails.vue
Normal file
@@ -0,0 +1,387 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 卡券详情 -->
|
||||
<view class="details">
|
||||
<view class="detailsTop">
|
||||
<view class="detailsTop-name">
|
||||
{{ coupon.details.name }}
|
||||
</view>
|
||||
<view class="detailsTop-time">
|
||||
有效期： {{ coupon.details.startTime }} - {{ coupon.details.endTime }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="source">活动来源 ： {{ coupon.details.activity_name }}</view>
|
||||
<view class="detailsBar">
|
||||
<view class="detailsCode-text">劵码</view>
|
||||
<image :src="code.barcode" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="detailsCode-text">
|
||||
{{ coupon.details.code }}
|
||||
</view>
|
||||
<view class="detailsCode">
|
||||
<image :src="code.qrcode"></image>
|
||||
<view class="detailsCode-text">
|
||||
<text>请出示以上券码给网点工作人员</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 门店定位 -->
|
||||
<view class="detailsStore">
|
||||
<view class="detailsStore-top">
|
||||
<view class="detailsStore-title">
|
||||
适用门店
|
||||
</view>
|
||||
<navigator class="detailsStore-row" hover-class="none" :url="'/pages/store/index?id=' + coupon.details.id" v-if="location.longitude != 0 && location.latitude != 0">
|
||||
查看所有
|
||||
<image src="/static/icon/arrow_left.png"></image>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="location" v-if="location.longitude == 0 && location.latitude == 0">
|
||||
<image class="location-img" src="https://card.ysd-bs.com/storage/materials/2021/09/01/location_img.jpg"></image>
|
||||
<text>您尚未授权本时生活开启定位服务</text>
|
||||
<text>不能看到附近的商家哦，点击下方按钮开启</text>
|
||||
<button class="location-btn" size="mini" open-type="openSetting">
|
||||
开启定位服务
|
||||
</button>
|
||||
</view>
|
||||
<view v-else>
|
||||
<block v-if="coupon.stores != ''">
|
||||
<view class="detailsStore-list" v-for="(item,index) in coupon.stores" :key="index"
|
||||
@click="detailsTap(item.store_id)">
|
||||
<image :src="item.cover" class="detailsStore-logo"></image>
|
||||
<view class="detailsStore-cont">
|
||||
<view class="detailsStore-left">
|
||||
<view class="nowrap detailsStore-name">
|
||||
{{ item.title }}
|
||||
</view>
|
||||
<view class="detailsStore-place">
|
||||
<text class="nowrap">{{ item.address }}</text>
|
||||
{{ item.km }}
|
||||
</view>
|
||||
</view>
|
||||
<image class="detailsStore-tel" src="/static/icon/tel.png" @click.stop="tel(item.mobile)"></image>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="pages-hint">
|
||||
<image src="/static/img/null_icon.png"></image>
|
||||
<view>暂无门店</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 使用须知 -->
|
||||
<view class="detailsText">
|
||||
<view class="detailsText-title">
|
||||
使用须知
|
||||
</view>
|
||||
<view class="detailsText-tips">
|
||||
<rich-text :nodes="coupon.remark"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 内容介绍 -->
|
||||
<view class="detailsText">
|
||||
<view class="detailsText-title">
|
||||
内容介绍
|
||||
</view>
|
||||
<view class="detailsText-tips" v-if="coupon.content != null">
|
||||
<rich-text :nodes="coupon.content"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { couponinfo, merchant_card, qrcode, barcode } from '@/apis/interfaces/user'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
coupon : {
|
||||
couponId : '', // 优惠券id
|
||||
details : '', // 优惠券信息
|
||||
stores : [], // 商家列表
|
||||
remark : '', // 使用须知
|
||||
content : '', // 内容介绍
|
||||
},
|
||||
code : {
|
||||
qrcode : '', //二维码
|
||||
barcode : '', //条形码
|
||||
},
|
||||
location : {
|
||||
latitude : 126.66837, // 纬度
|
||||
longitude: 45.76021 // 经度
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.coupon.couponId = options.id
|
||||
|
||||
// 获取二维码
|
||||
this.detailsCode()
|
||||
|
||||
// 获取条形码
|
||||
this.detailsBarcode()
|
||||
},
|
||||
onShow () {
|
||||
// 查看定位信息
|
||||
this.getCity();
|
||||
},
|
||||
methods:{
|
||||
// 详情信息
|
||||
detailsInfo() {
|
||||
couponinfo({
|
||||
coupon_id: this.coupon.couponId,
|
||||
user_lng : this.location.longitude,
|
||||
user_lat : this.location.latitude
|
||||
}).then(res=>{
|
||||
let stores = res.stores
|
||||
stores.map(res=>{
|
||||
let distance = res.distance
|
||||
if(res.distance > 1000){
|
||||
distance = (distance / 1000) + "km"
|
||||
}else{
|
||||
distance = distance + "m"
|
||||
}
|
||||
res.km = distance
|
||||
})
|
||||
this.coupon.details = res.info
|
||||
this.coupon.stores = stores
|
||||
this.coupon.remark = res.info.right.remark.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
|
||||
this.coupon.content = res.info.right.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
|
||||
})
|
||||
},
|
||||
|
||||
// 获取城市信息
|
||||
getCity(){
|
||||
uni.getLocation({
|
||||
success: res => {
|
||||
this.location.latitude = res.latitude,
|
||||
this.location.longitude = res.longitude
|
||||
},
|
||||
complete: (err) => {
|
||||
// 获取详情信息
|
||||
this.detailsInfo();
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 二维码
|
||||
detailsCode() {
|
||||
qrcode(this.coupon.couponId).then(res=>{
|
||||
this.code.qrcode = res.qrcode
|
||||
})
|
||||
},
|
||||
|
||||
// 条形码
|
||||
detailsBarcode() {
|
||||
barcode(this.coupon.couponId).then(res=>{
|
||||
this.code.barcode = res.barcode
|
||||
})
|
||||
},
|
||||
|
||||
// 拨打电话
|
||||
tel(number) {
|
||||
uni.showActionSheet({
|
||||
itemList : ['呼叫商家电话'],
|
||||
success : res =>{
|
||||
if(res.tapIndex==0){
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: number
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 查看门店详情页
|
||||
detailsTap(id) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/store/details?store_id=' + id + '&user_lng=' + this.location.longitude + '&user_lat=' + this.location.latitude,
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 卡券详情 */
|
||||
.details {
|
||||
background: #fff;
|
||||
margin: 20rpx;
|
||||
width: calc(100% - 40rpx);
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 20rpx rgba(0, 0,0, .1);
|
||||
.detailsTop {
|
||||
border-bottom: 2rpx dashed #c8c8c8;
|
||||
padding-bottom: 40rpx;
|
||||
.detailsTop-name {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.detailsTop-time {
|
||||
color: #7e7e7e;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
.source{
|
||||
margin: 30rpx 0;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.detailsBar {
|
||||
text-align: center;
|
||||
padding: 0 50rpx;
|
||||
box-sizing: border-box;
|
||||
margin-top: 60rpx;
|
||||
margin-bottom: 40rpx;
|
||||
image {
|
||||
width: 100%;
|
||||
}
|
||||
.detailsCode-text {
|
||||
margin-bottom: 10px;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
.detailsCode-text {
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
text {
|
||||
color: #999;
|
||||
font-weight: normal;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
.detailsCode {
|
||||
text-align: center;
|
||||
padding: 0 0 20rpx;
|
||||
margin: 40rpx 0 30rpx;
|
||||
image {
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
}
|
||||
.detailsStore {
|
||||
border-top: 2rpx #c8c8c8 solid;
|
||||
padding-top: 40rpx;
|
||||
.detailsStore-top {
|
||||
display: flex;
|
||||
line-height: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
.detailsStore-title {
|
||||
flex: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.location {
|
||||
background: white;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin: 60rpx 0 0;
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
display: block;
|
||||
line-height: 46rpx;
|
||||
color: #999;
|
||||
}
|
||||
.location-img {
|
||||
width: 150rpx;
|
||||
height: 120rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.location-btn[size="mini"] {
|
||||
background-color: #ee8e44;
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
line-height: 66rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detailsText {
|
||||
padding: 30rpx 30rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
.detailsText-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.detailsText-tips {
|
||||
font-size: 26rpx;
|
||||
line-height: 50rpx;
|
||||
color: #555557;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 门店
|
||||
.detailsStore-title {
|
||||
flex: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
.detailsStore-top, .detailsStore-row {
|
||||
display: flex;
|
||||
line-height: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.detailsCode-text, .detailsStore-row {
|
||||
color: #949494;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.detailsStore-row image {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
margin: 3rpx 0 0 6rpx;
|
||||
}
|
||||
.detailsStore-list {
|
||||
position: relative;
|
||||
margin-bottom: 40rpx;
|
||||
.detailsStore-logo {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.detailsStore-cont {
|
||||
position: absolute;
|
||||
left: 130rpx;
|
||||
top: 0;
|
||||
width: calc(100% - 130rpx);
|
||||
display: flex;
|
||||
.detailsStore-left {
|
||||
width: calc(100% - 90rpx);
|
||||
margin-right: 30rpx;
|
||||
.detailsStore-name {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.detailsStore-place {
|
||||
font-size: 24rpx;
|
||||
line-height: 40rpx;
|
||||
color: #5a5a5a;
|
||||
display: flex;
|
||||
text {
|
||||
flex: 1;
|
||||
display: inline-block;
|
||||
font-size: 28rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.detailsStore-tel {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
margin-top: 25rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user