388 lines
13 KiB
Vue
388 lines
13 KiB
Vue
<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 : '', // 纬度
|
||
longitude: '' // 经度
|
||
}
|
||
}
|
||
},
|
||
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>
|