523 lines
15 KiB
Vue
523 lines
15 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 卡券 -->
|
|
<view class="contentBorder">
|
|
<view class="contentTop">
|
|
<view class="contentCard">
|
|
<view class="contentCard-mark">校园活动</view>
|
|
<view class="contentCard-top">
|
|
<image class="contentCard-top-img" src="/static/img/tel_img.png" mode="aspectFill"></image>
|
|
<view class="contentCard-top-title">
|
|
<view class="contentCard-top-text">
|
|
{{ detail.title }}
|
|
</view>
|
|
<view class="contentCard-top-copy">
|
|
{{ detail.type_no }}
|
|
<text>复制</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="contentCard-bottom">
|
|
<view class="contentCard-bottom-explain" @click="noticeClick">
|
|
<image src="/static/icon/contentCard_icon.png" mode="aspectFill"></image>购买须知
|
|
</view>
|
|
<view class="contentCard-bottom-tips">
|
|
<view class="contentCard-bottom-title">限时活动</view>
|
|
<view class="contentCard-bottom-price">
|
|
<view class="contentCard-bottom-present">
|
|
<text>￥</text>{{ detail.price }}
|
|
</view>
|
|
<view class="contentCard-bottom-cost">
|
|
￥{{ detail.price }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="contentTop">
|
|
<view class="contentLabel">
|
|
<label>购买数量</label>
|
|
<view class="rightsAdd">
|
|
<view class="rightsAdd-btn" @tap="goodsNumber('remove')">-</view>
|
|
<input class="rightsAdd-input" :value="num" type="number" disabled=""></input>
|
|
<view class="rightsAdd-btn" @tap="goodsNumber('plus')">+</view>
|
|
</view>
|
|
</view>
|
|
<view class="contentLabel">
|
|
<label>支付方式</label>
|
|
<view class="contentLabel-right">
|
|
<view class="contentLabel-right-name">
|
|
在线支付
|
|
</view>
|
|
<view class="contentLabel-right-pay">
|
|
<text>沃支付</text>
|
|
<text>微信支付</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="contentLabel">
|
|
<label v-if="detail.attribute">{{ detail.attribute.form_price }}</label>
|
|
<view class="contentLabel-right">
|
|
<view class="contentLabel-right-name">
|
|
￥{{ detail.price }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="contentLabel">
|
|
<label v-if="detail.attribute">{{ detail.attribute.form_pay }}</label>
|
|
<view class="contentLabel-right">
|
|
<view class="contentLabel-right-name">
|
|
￥{{ amount }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="contentTop contentMargin">
|
|
<view class="contentTop-introduce">
|
|
<view class="contentTop-introduce-title">
|
|
内容介绍
|
|
</view>
|
|
<view class="contentTop-introduce-text">
|
|
<rich-text :nodes="content"></rich-text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 按钮 -->
|
|
<view class="rightsBtn" @tap="payment">
|
|
<button class="rightsBtn-btn" :disabled="disabled">立即购买</button>
|
|
</view>
|
|
|
|
<!-- 购买须知 -->
|
|
<view class="popNoticeBack" :class="{active : noticeState}"></view>
|
|
<view class="popNotice" :class="{active : noticeState}">
|
|
<view class="popNotice-text">购买须知</view>
|
|
<view class="popNotice-cont">
|
|
<rich-text :nodes="remark"></rich-text>
|
|
</view>
|
|
<view class="popNotice-btn" @click="noticeClick">
|
|
我知道了
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { buy, buySubmit } from '@/apis/interfaces/campus'
|
|
export default {
|
|
data() {
|
|
return {
|
|
groupId : '', //权益id
|
|
detail : '', //权益详情
|
|
amount : '', //总金额
|
|
num : 1, //购买的数量
|
|
content : '', //内容介绍
|
|
notification: '', //重要提示
|
|
remark : '', //使用须知
|
|
disabled : false, //购买按钮状态
|
|
noticeState : false //使用须知弹出层
|
|
}
|
|
},
|
|
|
|
// 生命周期函数--监听页面加载
|
|
onLoad(options) {
|
|
this.groupId = options.id
|
|
this.code = options.code || ''
|
|
},
|
|
|
|
// 生命周期函数--监听页面显示
|
|
onShow() {
|
|
// 获取详情
|
|
this.rightsInfo();
|
|
},
|
|
methods: {
|
|
// 详情
|
|
rightsInfo() {
|
|
buy({activity_school_id: this.groupId, qty: this.num}).then(res => {
|
|
this.num = res.qty
|
|
this.detail = res.detail
|
|
this.amount = res.amount
|
|
this.remark = res.detail.remark.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
|
|
this.content= res.detail.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
|
|
|
|
}).catch(err => {
|
|
if (!err.login) {
|
|
uni.showModal({
|
|
title: '用户登录已过期',
|
|
content: '请重新登录',
|
|
showCancel: false,
|
|
success: res => {
|
|
if (res.confirm) {
|
|
uni.redirectTo({
|
|
url: '/pages/campus/signin'
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
})
|
|
},
|
|
|
|
// 商品数量加减
|
|
goodsNumber(val){
|
|
let num = this.num
|
|
if (val == 'plus'){
|
|
num ++;
|
|
}else{
|
|
if (num > 1){
|
|
num --;
|
|
}else{
|
|
uni.showToast({
|
|
title : '商品数量不能小于1',
|
|
icon : 'none'
|
|
})
|
|
}
|
|
}
|
|
this.num = num
|
|
|
|
// 获取详情
|
|
this.rightsInfo()
|
|
},
|
|
|
|
// 购买须知弹框
|
|
noticeClick() {
|
|
this.noticeState = !this.noticeState
|
|
},
|
|
|
|
// 收银台跳转
|
|
payment() {
|
|
buySubmit({activity_school_id: this.groupId, qty: this.num, is_deliver: 1}).then(res => {
|
|
uni.navigateTo({
|
|
url: '/pages/cashier/index?tradeNo=' + res.trade_no + '&type=school' + '&price=' + this.amount
|
|
})
|
|
}).catch(err => {
|
|
if (!err.login) {
|
|
uni.showModal({
|
|
title: '用户登录已过期',
|
|
content: '请重新登录',
|
|
showCancel: false,
|
|
success: res => {
|
|
if (res.confirm) {
|
|
uni.redirectTo({
|
|
url: '/pages/campus/signin'
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.contentTop {
|
|
width: 100vw;
|
|
background: #FFFFFF;
|
|
margin-bottom: 30rpx;
|
|
border-bottom: 2rpx solid #efefef;
|
|
border-top: 2rpx solid #efefef;
|
|
}
|
|
|
|
.contentCard {
|
|
margin: 40rpx;
|
|
width: calc(100% - 80rpx);
|
|
background-color: #bc1d30;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
color: #ffffff;
|
|
position: relative;
|
|
}
|
|
|
|
.contentCard-mark {
|
|
position: absolute;
|
|
opacity: .9;
|
|
background-color: #920011;
|
|
font-size: 28rpx;
|
|
padding: 10rpx 20rpx;
|
|
right: 30rpx;
|
|
top: 0;
|
|
}
|
|
|
|
.contentCard-top {
|
|
text-align: center;
|
|
padding: 60rpx 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.contentCard-top-img {
|
|
width: 110rpx;
|
|
height: 110rpx;
|
|
border-radius: 50%;
|
|
margin-bottom: 20rpx;
|
|
border: 4rpx solid #fb7d7d;
|
|
display: inline-block;
|
|
}
|
|
|
|
.contentCard-top-title {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.contentCard-top-text {
|
|
font-size: 32rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.contentCard-top-copy {
|
|
color: #ffc8cf;
|
|
}
|
|
|
|
.contentCard-top-copy text {
|
|
border: 2rpx solid #ffc8cf;
|
|
font-size: 24rpx;
|
|
border-radius: 30rpx;
|
|
padding: 0 10rpx;
|
|
height: 32rpx;
|
|
line-height: 32rpx;
|
|
display: inline-block;
|
|
margin-left: 15rpx;
|
|
transform : scale(.85)
|
|
}
|
|
|
|
.contentCard-bottom {
|
|
background-color: rgba(0,0,0,.15);
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
display: flex;
|
|
padding: 0 20rpx;
|
|
box-sizing: border-box;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.contentCard-bottom-explain {
|
|
display: flex;
|
|
flex: 1;
|
|
opacity: .8;
|
|
}
|
|
|
|
.contentCard-bottom-explain image {
|
|
width: 42rpx;
|
|
height: 42rpx;
|
|
margin: 18rpx 10rpx 0 0;
|
|
}
|
|
|
|
.contentCard-bottom-tips,
|
|
.contentCard-bottom-price {
|
|
display: flex;
|
|
}
|
|
|
|
.contentCard-bottom-title {
|
|
background-color: #e69500;
|
|
height: 50rpx;
|
|
line-height: 50rpx;
|
|
padding: 0 15rpx;
|
|
border-radius: 10rpx;
|
|
margin-top: 16rpx;
|
|
transform : scale(.85)
|
|
}
|
|
|
|
.contentCard-bottom-title::after {
|
|
position: absolute;
|
|
content: '';
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 25rpx solid transparent;
|
|
border-left: 25rpx solid #e69500;
|
|
border-bottom: 25rpx solid transparent;
|
|
}
|
|
|
|
.contentCard-bottom-present {
|
|
margin: 0 10rpx;
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
.contentCard-bottom-present text,
|
|
.contentCard-bottom-cost {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.contentCard-bottom-cost {
|
|
text-decoration: line-through;
|
|
padding-top: 4rpx;
|
|
}
|
|
|
|
.contentLabel {
|
|
display: flex;
|
|
padding: 30rpx 40rpx;
|
|
box-sizing: border-box;
|
|
border-bottom: #efefef 2rpx solid;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.contentLabel:last-child {
|
|
margin-bottom: 0;
|
|
border: none;
|
|
}
|
|
|
|
.contentLabel label {
|
|
flex: 1;
|
|
line-height: 54rpx;
|
|
}
|
|
|
|
.contentLabel-right-name {
|
|
text-align: right;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.contentLabel-right-pay text {
|
|
font-size: 26rpx;
|
|
padding: 2rpx 10rpx;
|
|
border-radius: 10rpx;
|
|
color: #e56012;
|
|
border: 1rpx solid #e56012;
|
|
margin-left: 15rpx;
|
|
}
|
|
|
|
.contentLabel-right-pay text:last-child {
|
|
color: #29c529;
|
|
border-color: #29c529;
|
|
}
|
|
|
|
.rightsAdd {
|
|
display: flex;
|
|
border: 2rpx solid #efefef;
|
|
}
|
|
|
|
.rightsAdd-btn {
|
|
width: 54rpx;
|
|
height: 54rpx;
|
|
line-height: 54rpx;
|
|
text-align: center;
|
|
border-radius: 4rpx;
|
|
font-size: 38rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.rightsAdd-input {
|
|
width: 80rpx;
|
|
height: 54rpx;
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
border-left: 2rpx solid #efefef;
|
|
border-right: 2rpx solid #efefef;
|
|
}
|
|
|
|
.contentBorder {
|
|
border-bottom: 140rpx solid transparent;
|
|
}
|
|
|
|
.contentTop-introduce-title {
|
|
text-align: center;
|
|
line-height: 100rpx;
|
|
font-size: 34rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.contentTop-introduce-title::after,
|
|
.contentTop-introduce-title::before{
|
|
position: absolute;
|
|
width: 100rpx;
|
|
height: 2rpx;
|
|
top: 50rpx;
|
|
content: '';
|
|
background-color: #dadada;
|
|
}
|
|
|
|
.contentTop-introduce-title::after {
|
|
left: 20%;
|
|
}
|
|
|
|
.contentTop-introduce-title::before {
|
|
right: 20%;
|
|
}
|
|
|
|
.contentTop-introduce-text {
|
|
padding: 0 40rpx 40rpx;
|
|
color: #a0a0a2;
|
|
box-sizing: border-box;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
/* 按钮 */
|
|
.rightsBtn {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background-color: #FFFFFF;
|
|
z-index: 1002;
|
|
height: 140rpx;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.rightsBtn-btn {
|
|
background-color: #bc1d30;
|
|
color: #ffffff;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
width: 100%;
|
|
font-size: 32rpx;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.popNoticeBack {
|
|
position: fixed;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
left: 0;
|
|
top: 0;
|
|
background: rgba(0,0,0,.7);
|
|
z-index: 1003;
|
|
display: none;
|
|
}
|
|
|
|
.popNoticeBack.active {
|
|
display: block;
|
|
}
|
|
|
|
.popNotice {
|
|
position: fixed;
|
|
left: 15%;
|
|
right: 15%;
|
|
top: 30%;
|
|
background-color: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
z-index: 1004;
|
|
display: none;
|
|
}
|
|
|
|
.popNotice.active {
|
|
display: block;
|
|
}
|
|
|
|
.popNotice-text {
|
|
text-align: center;
|
|
font-weight: 600;
|
|
line-height: 90rpx;
|
|
}
|
|
|
|
.popNotice-cont {
|
|
border-top: 2rpx solid #efefef;
|
|
border-bottom: 2rpx solid #efefef;
|
|
padding: 50rpx 30rpx;
|
|
box-sizing: border-box;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.popNotice-btn {
|
|
color: #FFFFFF;
|
|
line-height: 90rpx;
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
background-color: #e69500;
|
|
}
|
|
</style>
|