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

522
pages/campus/购买备份.vue Normal file
View File

@@ -0,0 +1,522 @@
<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>