金诚优选前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

342 lines
8.8 KiB

<template>
<view id="on-detail" v-if="init">
<!--<view class="top">
<view>{{detail.discount.title}}</view>
<view>{{detail.discount.starts_at}} {{detail.discount.ends_at}}</view>
</view>
<view class="code">
{{detail.code}}
</view>
<view class="tips">
<view>使用条件 : {{detail.discount.label}}</view>
<view>使用规则 : {{detail.discount.intro}}</view>
</view>-->
<view class="coupon">
<view class="coupon-left" :class="is_coupon != 1 ? 'discount' : ''" :style="'background: ' + config.mainColor">
<view class="text-wrap">
<view class="text-box">
<view class="text">
<text class="money" v-if="detail.action_type.type == 'cash'">¥</text>
<sapn>{{ detail.action_type.value }}</sapn>
<text class="money" v-if="detail.action_type.type == 'discount'">折</text>
</view>
<text class="label text">{{ detail.label }}</text>
</view>
</view>
<view class="dot-wrap">
<view class="dot-item">
</view>
<view class="dot-item">
</view>
<view class="dot-item">
</view>
<view class="dot-item">
</view>
<view class="dot-item">
</view>
<view class="dot-item">
</view>
</view>
</view>
<view class="coupon-right">
<view class="top">
<span class="type">
<span v-if="detail.channel == 'ec'">商城</span>
<span v-else>门店</span>
</span>
<text class="info">{{detail.title}}</text>
</view>
<view class="bottom">
<view class="bottom-use">
<view class="tiem-box">
<text>{{detail.use_start_time}}至{{detail.use_end_time}}</text>
</view>
<view v-if="is_coupon == 1">
<view class="btn use" :style="'background: ' + config.mainColor" v-if="!detail.has_get" @tap.stop="getCoupon">
点击领取
</view>
<view class="btn already" :style="'color: ' + config.mainColor + '; border-color: ' + config.mainColor" v-else @tap.stop="jumpList">
去使用
</view>
</view>
</view>
</view>
</view>
</view>
<view class="detail-item user-info" v-if="detail.intro">
<view class="title">
使用说明
</view>
<view class="info mx-1px-top">
{{detail.intro}}
</view>
</view>
<view class="home" @tap="jumpHome" :style="'background: ' + config.mainColor">
<i class="iconfont icon--shouye"></i>
<view>
首页
</view>
</view>
<view class="button-box" v-if="is_coupon == 1">
<view class="btn" :style="'background: ' + config.mainColor" v-if="!detail.has_get" @tap.stop="getCoupon">
点击领取
</view>
<view class="btn" :style="'background: ' + config.mainColor" v-else @tap.stop="jumpList">
去使用
</view>
</view>
</view>
</template>
<script>
import {pageLogin, getUrl,config} from '@/common/js/utils.js';
export default {
data() {
return {
detail: '',
is_coupon: 1,
// 用于判断是否为优惠券 1:优惠券 0:促销折扣
init: false,
agent_code: '',
config: ''
};
},
onLoad(e) {
// 第三方平台配置颜色
var gbConfig = this.$cookieStorage.get('globalConfig') || '';
this.setData({
config: gbConfig
});
var id = e.id;
var coupon_id = e.coupon_id;
var agent_code = e.agent_code || '';
var is_coupon = e.is_coupon || '';
const timeMap = {
y: 31536000000,
m: 2592000000,
d: 86400000,
h: 3600000,
n: 60000,
s: 1000
}; // 默认有效期为7天
var valid_time = "";
if (e.scene) {
var scene = decodeURIComponent(e.scene);
var sceneArr = scene.split('_');
if (sceneArr.length > 0) {
id = sceneArr[0];
agent_code = sceneArr[1];
is_coupon = 1;
}
}
if (!this.$cookieStorage.get('distribution_valid_time')) {
valid_time = 10080;
} else {
valid_time = this.$cookieStorage.get('distribution_valid_time');
}
let timeStamp = new Date().getTime();
timeStamp += timeMap.n * valid_time;
if (agent_code) {
// 推客优惠券的agent_code
this.$cookieStorage.set('coupon_agent_code', agent_code, valid_time + 'n');
}
this.setData({
agent_code: agent_code
});
this.queryCouponDetail(id);
if (is_coupon) {
if (is_coupon != 1) {
wx.setNavigationBarTitle({
title: '线上折扣券详情'
});
} else {
wx.setNavigationBarTitle({
title: '线上优惠券详情'
});
}
this.setData({
is_coupon: e.is_coupon
});
} else {
wx.setNavigationBarTitle({
title: '线上折扣券详情'
});
}
},
methods: {
jumpList(e) {
wx.navigateTo({
url: '/pages/coupon/goods/goods?id=' + this.detail.coupon_id
});
},
jumpHome() {
wx.switchTab({
url: '/pages/index/index/index'
});
},
getCoupon() {
var token = this.$cookieStorage.get('user_token');
if (token) {
this.convertCoupon(this.detail.code);
} else {
wx.showModal({
content: '请先登录',
showCancel: false,
success: res => {
if (res.confirm || !res.cancel && !res.confirm) {
pageLogin(getUrl());
}
}
});
}
},
// 领取优惠券接口
convertCoupon(code) {
var token = this.$cookieStorage.get('user_token');
wx.showLoading({
title: "正在领取",
mask: true
});
this.$http.post({
api: 'api/coupon/convert',
header: {
Authorization: token
},
data: {
coupon_code: code,
agent_code: this.agent_code
}
}).then(res => {
wx.hideLoading();
if (res.statusCode == 200) {
res = res.data;
if (res.status) {
this.setData({
'detail.has_get': true
});
wx.showToast({
title: '领取成功'
});
} else {
wx.showToast({
title: res.message || '领取失败',
image: '../../../static/error.png'
});
}
} else {
wx.showToast({
title: '领取失败',
image: '../../../static/error.png'
});
}
}).catch(rej => {
wx.showToast({
title: '领取失败',
image: '../../../static/error.png'
});
wx.hideLoading();
});
},
// 查询优惠券详情
queryCouponDetail(id) {
wx.showLoading({
title: "加载中",
mask: true
});
var token = this.$cookieStorage.get('user_token');
this.$http.get({
api: 'api/discount/' + id + '/detail',
header: {
Authorization: token
}
}).then(res => {
if (res.statusCode == 200) {
res = res.data;
if (res.status) {
this.setData({
detail: res.data,
init: true
});
} else {
wx.showModal({
content: res.message || '请求失败',
showCancel: false
});
}
} else {
wx.showModal({
content: "请求失败",
showCancel: false
});
}
wx.hideLoading();
}).catch(rej => {
wx.hideLoading();
wx.showModal({
content: '请求失败',
showCancel: false
});
});
},
setData: function (obj) {
let that = this;
let keys = [];
let val, data;
Object.keys(obj).forEach(function (key) {
keys = key.split('.');
val = obj[key];
data = that.$data;
keys.forEach(function (key2, index) {
if (index + 1 == keys.length) {
that.$set(data, key2, val);
} else {
if (!data[key2]) {
that.$set(data, key2, {});
}
}
data = data[key2];
});
});
}
},
computed: {},
watch: {}
};
</script>
<style rel="stylesheet/less" lang="less">
@import "onDetail";
</style>