599 lines
18 KiB
Vue
599 lines
18 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 卡券详情 -->
|
||
<view class="details">
|
||
<view class="detailsTop">
|
||
<view class="detailsTop-name">
|
||
{{ details.name }}
|
||
</view>
|
||
<view class="detailsTop-time">
|
||
有效期： {{ details.startTime }} - {{ details.endTime }}
|
||
</view>
|
||
</view>
|
||
<view class="detailsCotent">
|
||
<view class="source">活动来源 ： {{ details.activity_name }}</view>
|
||
<view class="detailsBar">
|
||
<view class="detailsCode-text">劵码</view>
|
||
<image :src="barcode" mode="widthFix"></image>
|
||
</view>
|
||
<view class="detailsCode-text">
|
||
{{ details.code }}
|
||
</view>
|
||
<view class="detailsCode">
|
||
<image :src="qrcode" @click="refreshCode"></image>
|
||
<view class="detailsCode-text">
|
||
<text>请出示以上券码给网点工作人员</text>
|
||
</view>
|
||
</view>
|
||
<view class="petroNew" v-if="details.right">
|
||
<view class="petroNew-btn" v-if="details.right.from == 'petroNew'" @click="urlFrom">
|
||
去使用
|
||
</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=' + details.id + '&type=campus'" v-if="longitude != 0 && latitude != 0">
|
||
查看所有
|
||
<image src="/static/icon/arrow_left.png"></image>
|
||
</navigator>
|
||
</view>
|
||
<view class="location" v-if="longitude == 0 && latitude == 0">
|
||
<image class="location-img" src="/static/img/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="stores.length > 0">
|
||
<view class="detailsStore-list" :data-id="(item.store_id)" v-for="(item, index) in stores" :key="index"
|
||
@tap="detailsTap">
|
||
<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" @tap.stop="tel"
|
||
:data-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="remark"></rich-text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 内容介绍 -->
|
||
<view class="detailsText">
|
||
<view class="detailsText-title">
|
||
内容介绍
|
||
</view>
|
||
<view class="detailsText-tips" v-if="content != null">
|
||
<rich-text :nodes="content"></rich-text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部 -->
|
||
<view class="detailsBottom">
|
||
<image src="/static/img/campus_details_back.png" mode="aspectFill"></image>
|
||
<view class="detailsBottom-cont">
|
||
<view class="detailsBottom-title">
|
||
中石油活动
|
||
</view>
|
||
亿时代 - 本时生活
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { qrcode, barcode, couponinfo, merchantCard, breakCode } from '@/apis/interfaces/campus'
|
||
export default {
|
||
data() {
|
||
return {
|
||
id : 0, //优惠券id
|
||
longitude : 0, //经度
|
||
latitude : 0, //纬度
|
||
details : '', //优惠券信息
|
||
stores : [], //商家列表
|
||
content : '', //内容介绍
|
||
remark : '', //使用须知
|
||
qrcode : '', //二维码
|
||
barcode : '', //条形码
|
||
merchantcardinfo:'' //商家券信息
|
||
}
|
||
},
|
||
|
||
// 生命周期函数--监听页面加载
|
||
onLoad(options) {
|
||
// 优惠券id
|
||
this.id = options.id
|
||
|
||
// 获取二维码
|
||
qrcode(options.id).then(res=>{
|
||
this.qrcode = res.qrcode
|
||
})
|
||
|
||
// 获取条形码
|
||
barcode(options.id).then(res=>{
|
||
this.barcode = res.barcode
|
||
})
|
||
},
|
||
|
||
// 生命周期函数--监听页面显示
|
||
onShow() {
|
||
// 获取详情信息
|
||
this.detailsInfo();
|
||
// 存储环境-中石油活动
|
||
getApp().globalData.envType = 'oilEnv'
|
||
|
||
// 获取定位信息
|
||
uni.getLocation({
|
||
success: res => {
|
||
this.latitude = res.latitude
|
||
this.longitude = res.longitude
|
||
},
|
||
complete: () => {
|
||
// 获取详情信息
|
||
this.detailsInfo();
|
||
}
|
||
})
|
||
},
|
||
methods: {
|
||
// 详情信息
|
||
detailsInfo() {
|
||
couponinfo({
|
||
coupon_id: this.id,
|
||
user_lng: this.longitude,
|
||
user_lat: this.latitude
|
||
}).then(res=>{
|
||
console.log(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.details = res.info
|
||
this.stores = stores
|
||
this.remark = res.info.right.remark.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
|
||
this.content = res.info.right.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
|
||
//获取商家券信息
|
||
if(res.info.card_type=='merchant_card'){
|
||
this.getMerchantCardInfo()
|
||
}
|
||
}).catch(err => {
|
||
if (!err.login) {
|
||
uni.showModal({
|
||
title: '用户登录已过期',
|
||
content: '请重新登录',
|
||
showCancel: false,
|
||
success: res => {
|
||
if (res.confirm) {
|
||
uni.redirectTo({
|
||
url: '/pages/oil/signin'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
})
|
||
},
|
||
|
||
// 商家券信息
|
||
getMerchantCardInfo(){
|
||
merchantCard(this.id).then(res=>{
|
||
this.merchantcardinfo = res
|
||
}).catch(err => {
|
||
if (!err.login) {
|
||
uni.showModal({
|
||
title: '用户登录已过期',
|
||
content: '请重新登录',
|
||
showCancel: false,
|
||
success: res => {
|
||
if (res.confirm) {
|
||
uni.redirectTo({
|
||
url: '/pages/oil/signin'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
})
|
||
},
|
||
|
||
// 拨打电话
|
||
tel(e) {
|
||
let tel = e.currentTarget.dataset.tel
|
||
uni.showActionSheet({
|
||
itemList : ['呼叫商家电话'],
|
||
success : res =>{
|
||
if(res.tapIndex==0){
|
||
uni.makePhoneCall({
|
||
phoneNumber: tel
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
// 查看门店详情页
|
||
detailsTap(e) {
|
||
let store_id = e.currentTarget.dataset.id,
|
||
user_lng = this.longitude,
|
||
user_lat = this.latitude
|
||
uni.navigateTo({
|
||
url: '/pages/store/details?store_id=' + store_id + '&user_lng=' + user_lng + '&user_lat=' + user_lat + '&type=campus'
|
||
})
|
||
},
|
||
|
||
// 刷新二维码
|
||
refreshCode() {
|
||
breakCode(this.id).then(res=>{
|
||
uni.showToast({
|
||
title: '刷新中',
|
||
duration: 1000,
|
||
icon:'loading'
|
||
});
|
||
this.qrcode = res.qrcode
|
||
}).catch(err => {
|
||
if (!err.login) {
|
||
uni.showModal({
|
||
title: '用户登录已过期',
|
||
content: '请重新登录',
|
||
showCancel: false,
|
||
success: res => {
|
||
if (res.confirm) {
|
||
uni.redirectTo({
|
||
url: '/pages/oil/signin'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
})
|
||
},
|
||
|
||
urlFrom () {
|
||
// #ifdef H5
|
||
window.location.href = "https://cloud1-0g37c0kwb91b41c8-1305411715.tcloudbaseapp.com/"
|
||
// #endif
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background-color: #e83241;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 卡券详情 */
|
||
.details {
|
||
background: #ffffff;
|
||
margin: 20rpx 20rpx 0;
|
||
width: calc(100% - 40rpx);
|
||
box-shadow: 0 0 20rpx rgba(0, 0,0, .1);
|
||
position: relative;
|
||
border-radius: 0 0 20rpx 20rpx;
|
||
border-bottom: 240rpx solid transparent;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.details::after,
|
||
.details::before {
|
||
position: absolute;
|
||
background: #e83241;
|
||
content: '';
|
||
top: -50rpx;
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.details::after {
|
||
left: -50rpx;
|
||
}
|
||
|
||
.details::before {
|
||
right: -50rpx;
|
||
}
|
||
|
||
.detailsCotent {
|
||
padding: 40rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.detailsTop {
|
||
border-bottom: 2rpx dashed #c8c8c8;
|
||
padding: 40rpx 0;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.detailsTop-name {
|
||
font-size: 38rpx;
|
||
font-weight: 600;
|
||
margin-bottom: 20rpx;
|
||
padding: 0 60rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.detailsTop-time {
|
||
color: #7e7e7e;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.detailsCode {
|
||
text-align: center;
|
||
padding: 0 0 20rpx;
|
||
box-sizing: border-box;
|
||
margin: 40rpx 0 20rpx;
|
||
}
|
||
|
||
.detailsCode image {
|
||
width: 300rpx;
|
||
height: 300rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.detailsCode-text, .detailsStore-row {
|
||
color: #949494;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.detailsCode-text {
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #000;
|
||
}
|
||
|
||
.detailsCode-text text {
|
||
color: #999;
|
||
font-weight: normal;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.detailsStore {
|
||
border-top: 2rpx #c8c8c8 solid;
|
||
padding-top: 40rpx;
|
||
}
|
||
|
||
.detailsStore-top, .detailsStore-row {
|
||
display: flex;
|
||
line-height: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.detailsStore-title {
|
||
flex: 1;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.detailsStore-row image {
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
margin: 3rpx 0 0 6rpx;
|
||
}
|
||
|
||
.detailsStore-list {
|
||
position: relative;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.detailsStore-list:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.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-tel {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
margin-top: 25rpx;
|
||
}
|
||
|
||
.detailsStore-place {
|
||
font-size: 24rpx;
|
||
line-height: 40rpx;
|
||
color: #5a5a5a;
|
||
display: flex;
|
||
}
|
||
|
||
.detailsStore-place text {
|
||
flex: 1;
|
||
display: inline-block;
|
||
font-size: 28rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.detailsStore-name {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.detailsText {
|
||
padding: 30rpx 30rpx 0;
|
||
box-sizing: border-box;
|
||
border-top: 2rpx solid #ececec;
|
||
}
|
||
|
||
.detailsText-title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.detailsText-tips {
|
||
font-size: 26rpx;
|
||
line-height: 50rpx;
|
||
color: #555557;
|
||
padding-bottom: 20rpx;
|
||
}
|
||
|
||
.detailsCode-join {
|
||
color: #ee8e44;
|
||
font-size: 24rpx;
|
||
border-radius: 50rpx;
|
||
border: 2rpx solid #ee8e44;
|
||
padding: 10rpx 20rpx;
|
||
display: inline-block;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.detailsCode-join.active {
|
||
border: 2rpx solid #999;
|
||
color: #999;
|
||
}
|
||
|
||
.source{
|
||
margin: 30rpx 0;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.location {
|
||
background: white;
|
||
width: 100%;
|
||
text-align: center;
|
||
margin: 60rpx 0 0;
|
||
}
|
||
|
||
.location text {
|
||
font-size: 28rpx;
|
||
display: block;
|
||
line-height: 46rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.location-btn[size="mini"] {
|
||
background-color: #ee8e44;
|
||
color: #fff;
|
||
font-size: 26rpx;
|
||
line-height: 66rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.location-img {
|
||
width: 150rpx;
|
||
height: 120rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.detailsBar {
|
||
text-align: center;
|
||
padding: 0 50rpx;
|
||
box-sizing: border-box;
|
||
margin-top: 60rpx;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
|
||
.detailsBar image {
|
||
width: 100%;
|
||
}
|
||
|
||
.detailsBar .detailsCode-text {
|
||
margin-bottom: 10px;
|
||
color: #000;
|
||
}
|
||
|
||
.detailsBottom {
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 220rpx;
|
||
left: 0;
|
||
bottom: 0;
|
||
z-index: 9;
|
||
}
|
||
.detailsBottom image {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
}
|
||
|
||
.detailsBottom-cont {
|
||
z-index: 10;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 70rpx;
|
||
width: 100%;
|
||
text-align: center;
|
||
color: #9a9a9a;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.detailsBottom-title {
|
||
font-weight: 600;
|
||
margin-bottom: 20rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.petroNew {
|
||
text-align: center;
|
||
}
|
||
.petroNew-btn {
|
||
background-color: #ee8e44;
|
||
color: #fff;
|
||
font-size: 26rpx;
|
||
line-height: 72rpx;
|
||
border-radius: 6rpx;
|
||
margin: 0 auto 50rpx;
|
||
text-align: center;
|
||
width: 50%;
|
||
}
|
||
</style>
|