zhangjing/ysdH5
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[本时生活h5端]

Browse Source
This commit is contained in:
张慢慢
2023-06-21 17:19:58 +08:00
commit ebb9575bd0
284 changed files with 39689 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

600
pages/giftPack/details.vue Normal file
View File

@@ -0,0 +1,600 @@
<template>
<view class="content">
<!-- 卡券详情 -->
<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 = 'giftPEnv'
// 获取定位信息
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/giftPack/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/giftPack/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/giftPack/signin'
});
}
}
});
}
})
},
urlFrom () {
// #ifdef H5
window.location.href = "https://cloud1-0g37c0kwb91b41c8-1305411715.tcloudbaseapp.com/"
// #endif
}
}
}
</script>
<style>
.content {
background: #cbaf7f;
padding: 20rpx;
box-sizing: border-box;
height: 100%;
overflow-y: scroll;
}
/* 卡券详情 */
.details {
background: #ffffff;
margin: 20rpx 20rpx 0;
width: calc(100% - 40rpx);
position: relative;
border-radius: 0 0 20rpx 20rpx;
border-bottom: 240rpx solid transparent;
box-sizing: border-box;
}
.details::after,
.details::before {
position: absolute;
background: #cbaf7f;
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;
box-shadow: 0 0 20rpx rgba(0, 0,0, .1);
}
.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>