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.
541 lines
12 KiB
541 lines
12 KiB
<template>
|
|
<view class="container">
|
|
<!-- deBug信息 -->
|
|
<view class="web-debug web-text-success" style="display: none">
|
|
场馆ID：{{ merchantId }} 场馆编号：{{ merchantCode }} 场馆名称：{{ merchantName }} 日期：{{ dateTime }} 星期：{{ week }} 订单总金额：{{ totalPrice }} 类型：{{
|
|
type
|
|
}}
|
|
商品信息：{{ goodsList }}
|
|
</view>
|
|
<view class="card-list">
|
|
<view class="container" :style="{ background: `url(${form.image}) no-repeat center center`, backgroundSize: '100%', opacity: '0.85' }">
|
|
<view class="content web-cell web-cell-align-top">
|
|
<view class="merchant-avatar">
|
|
<uv-avatar :src="form.merchantAvatar" size="42" style="border: 3rpx solid #ffffff"></uv-avatar>
|
|
</view>
|
|
<view class="card-info web-cell-content">
|
|
<view class="title-bar">
|
|
<view class="web-text-heading" style="color: #ffffff; font-size: 17px; font-weight: 600">{{ form.name }}</view>
|
|
<view class="desc web-text-placeholder" style="font-size: 14px">{{ cardType[form.type] }}</view>
|
|
</view>
|
|
<view class="price" @click="openQrCode">
|
|
<view class="web-text-price">
|
|
<uv-avatar src="../../static/qrcode.png" size="30" shape="square"></uv-avatar>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="card-num">{{ form.cardNum }}</view>
|
|
</view>
|
|
<!-- 登录组件 -->
|
|
<ws-login ref="login" :logo="logo" @done="reload" />
|
|
</view>
|
|
|
|
<uni-card :border="false" :is-shadow="false" :padding="'12px 0'">
|
|
<view class="money-bar web-cell">
|
|
<view class="money-item web-cell-content">
|
|
<text>余额</text>
|
|
<text>{{ form.remainingMoney || 0.0 }}</text>
|
|
</view>
|
|
<view class="web-divider-vertical"></view>
|
|
<view class="money-item web-cell-content">
|
|
<text>剩余次数</text>
|
|
<text>{{ form.num || 0 }}</text>
|
|
</view>
|
|
<view class="web-divider-vertical"></view>
|
|
<view class="money-item web-cell-content">
|
|
<text>折扣</text>
|
|
<text>{{ form.discount || 0 }}</text>
|
|
</view>
|
|
</view>
|
|
</uni-card>
|
|
|
|
<view class="to-pay">
|
|
<uv-button :customStyle="{ width: '300rpx', borderRadius: '30px', color: '#3C8618' }" text="去使用" @click="navTo(`/package/user/card-detail-merchant?sid=${form.sid}`)"></uv-button>
|
|
</view>
|
|
|
|
<!-- <uni-card title="会员卡说明" :border="false" :is-shadow="false">
|
|
<view v-html="form.info"></view>
|
|
</uni-card> -->
|
|
<uni-card :border="false" :is-shadow="false" :padding="0">
|
|
<view class="server">
|
|
<uni-list :border="false">
|
|
<uni-list-item link @click="navTo(`/package/user/card-detail-about?id=${form.id}`)">
|
|
<template v-slot:body>
|
|
<view class="slot-box">
|
|
<text class="slot-text" :style="{ color: '#333333' }">会员卡详情</text>
|
|
</view>
|
|
</template>
|
|
</uni-list-item>
|
|
<uni-list-item link @click="navTo(`/package/user/card-detail-merchant?sid=${form.sid}`)">
|
|
<template v-slot:body>
|
|
<view class="slot-box">
|
|
<text class="slot-text" :style="{ color: '#333333' }">适用场馆</text>
|
|
</view>
|
|
</template>
|
|
</uni-list-item>
|
|
<uni-list-item link @click="navTo(`/package/user/card-detail-record?id=${form.id}`)">
|
|
<template v-slot:body>
|
|
<view class="slot-box">
|
|
<text class="slot-text" :style="{ color: '#333333' }">使用记录</text>
|
|
</view>
|
|
</template>
|
|
</uni-list-item>
|
|
</uni-list>
|
|
</view>
|
|
</uni-card>
|
|
|
|
</view>
|
|
<!-- 收货地址选择弹窗 -->
|
|
<uni-popup ref="addForm" type="center" border-radius="10px 10px 0 0">
|
|
<uni-card :border="false" :is-shadow="false" :padding="0">
|
|
<view class="qrcode">
|
|
<uv-qrcode ref="qrcode" size="390rpx"
|
|
:options="{data: form.cardNum,foregroundImageSrc: form.merchantAvatar, margin: 10,foregroundImagePadding: 4,foregroundImageHeight: 30,foregroundImageWidth: 30,foregroundImageBorderRadius: 4}"
|
|
:value="form.cardNum"></uv-qrcode>
|
|
<view class="card-num web-text-heading" style="font-size: 34rpx;">{{ form.cardNum }}</view>
|
|
<text class="web-text-secondary">请在结账前出示会员卡</text>
|
|
</view>
|
|
</uni-card>
|
|
</uni-popup>
|
|
<!-- 登录组件 -->
|
|
<ws-login ref="login" :logo="logo" @done="reload" />
|
|
</template>
|
|
|
|
<script>
|
|
import * as Api from '@/api/booking/userCard';
|
|
import * as OrderApi from '@/api/shop/order';
|
|
import * as MerchantApi from '@/api/shop/merchant';
|
|
import { storeToRefs } from 'pinia';
|
|
import { getWeek, getKey } from '@/utils/common';
|
|
import { useCarStore } from '@/store/modules/car';
|
|
import { useUserStore } from '@/store/modules/user';
|
|
const userStore = useUserStore();
|
|
const carStore = useCarStore();
|
|
const { goodsList, totalPrice, carNum, merchantId, merchantName, merchantCode, type, dateTime } = storeToRefs(carStore);
|
|
const cardType = ['年卡', '次卡', '月卡', 'IC卡', '充值卡'];
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
id: 0,
|
|
goodsId: 0,
|
|
userInfo: {},
|
|
form: {},
|
|
address: {},
|
|
addressList: [],
|
|
week: 0,
|
|
cardType,
|
|
goodsList,
|
|
// 订单总金额
|
|
totalPrice,
|
|
reducePrice: 0,
|
|
merchantId,
|
|
merchantName,
|
|
merchantCode,
|
|
getWeek,
|
|
payType: 1,
|
|
isLogin: false,
|
|
disabled: false
|
|
};
|
|
},
|
|
onLoad(option) {
|
|
this.id = option.cardId;
|
|
this.reload();
|
|
},
|
|
onShow() {
|
|
// 登录状态
|
|
if (uni.getStorageSync('user_id') && uni.getStorageSync('access_token')) {
|
|
this.isLogin = true;
|
|
}
|
|
this.openLogin();
|
|
},
|
|
methods: {
|
|
async reload() {
|
|
const app = this;
|
|
const { id } = this;
|
|
|
|
// 当前登录用户信息
|
|
const userInfo = await userStore.fetchUserInfo();
|
|
app.userInfo = userInfo;
|
|
|
|
Api.getUserCard(id).then((data) => {
|
|
app.form = data;
|
|
});
|
|
|
|
|
|
},
|
|
onDisabled() {
|
|
this.disabled = !this.disabled;
|
|
},
|
|
navTo(url) {
|
|
uni.navigateTo({
|
|
url
|
|
});
|
|
},
|
|
openUrl(url) {
|
|
if (!this.isLogin) {
|
|
this.$refs.login.open('bottom');
|
|
return false;
|
|
} else {
|
|
uni.navigateTo({
|
|
url
|
|
});
|
|
}
|
|
},
|
|
onAddress(item) {
|
|
this.address = item;
|
|
this.$refs.addForm.close();
|
|
},
|
|
// 切换支付方式
|
|
onPayType(index) {
|
|
console.log('e: ', index);
|
|
this.payType = index;
|
|
},
|
|
openQrCode() {
|
|
this.$refs.addForm.open('center');
|
|
},
|
|
// 弹出登录提示框
|
|
openLogin() {
|
|
if (!this.isLogin) {
|
|
this.$refs.login.open('bottom');
|
|
return false;
|
|
}
|
|
},
|
|
save() {
|
|
if (!this.disabled) {
|
|
uni.showToast({
|
|
title: '请先阅读并同意服务协议',
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
uni.showLoading({
|
|
title: '订单提交中.'
|
|
});
|
|
|
|
const app = this;
|
|
const { form, payType } = this;
|
|
|
|
OrderApi.addOrder({
|
|
type: 2, // 0商城订单 1预定订单 2会员卡订单
|
|
cardId: form.cardId,
|
|
merchantId: form.merchantId,
|
|
merchantName: form.merchantName,
|
|
totalPrice: form.price,
|
|
payPrice: form.price,
|
|
comments: form.cardName,
|
|
payType
|
|
})
|
|
.then((data) => {
|
|
const orderInfo = data;
|
|
// 调起微信支付
|
|
if (payType == 1) {
|
|
// #ifdef MP-WEIXIN
|
|
uni.requestPayment({
|
|
provider: orderInfo.provider, // 服务提供商
|
|
timeStamp: orderInfo.timeStamp, // 时间戳
|
|
nonceStr: orderInfo.nonceStr, // 随机字符串
|
|
package: orderInfo.package,
|
|
signType: orderInfo.signType, // 签名算法
|
|
paySign: orderInfo.paySign, // 签名
|
|
success: function (res) {
|
|
// 业务逻辑。。。
|
|
uni.showToast({
|
|
title: '支付成功',
|
|
icon: 'success'
|
|
});
|
|
setTimeout(function () {
|
|
app.disabled = false;
|
|
uni.navigateTo({
|
|
url: '/package/user/card'
|
|
});
|
|
}, 500);
|
|
},
|
|
fail: function (err) {
|
|
console.log('支付失败', err);
|
|
app.disabled = false;
|
|
}
|
|
});
|
|
// #endif
|
|
}
|
|
|
|
// 使用余额支付
|
|
if (payType == 0) {
|
|
if (orderInfo) {
|
|
uni.showToast({
|
|
title: '支付成功',
|
|
icon: 'success'
|
|
});
|
|
setTimeout(function () {
|
|
app.disabled = false;
|
|
uni.navigateTo({
|
|
url: '/package/user/card'
|
|
});
|
|
}, 500);
|
|
return;
|
|
}
|
|
if (!orderInfo) {
|
|
return uni.showToast({
|
|
title: '支付失败',
|
|
icon: 'error'
|
|
});
|
|
}
|
|
}
|
|
|
|
uni.hideLoading();
|
|
})
|
|
.catch((res) => {
|
|
uni.showToast({
|
|
title: res.message || '请检查您的网络.',
|
|
icon: 'none'
|
|
});
|
|
uni.hideLoading();
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
page {
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
background-color: #f0f2f5;
|
|
width: 750rpx;
|
|
overflow-x: hidden;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.checkout-car {
|
|
width: 700rpx;
|
|
left: 25rpx;
|
|
position: fixed;
|
|
bottom: 30rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background-color: #000000;
|
|
border-radius: 100px;
|
|
align-items: center;
|
|
|
|
.car-selected {
|
|
color: #ccc;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
.car-total {
|
|
display: flex;
|
|
color: #ebcf00;
|
|
align-items: center;
|
|
padding-left: 40rpx;
|
|
|
|
.save-btn {
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-list {
|
|
.container {
|
|
width: 700rpx;
|
|
position: relative;
|
|
margin: 25rpx auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-radius: 20rpx;
|
|
position: relative;
|
|
box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.2);
|
|
// background: linear-gradient(to right, #70b915, #008e04);
|
|
color: #ffffff;
|
|
.card-num {
|
|
position: absolute;
|
|
z-index: 1;
|
|
bottom: 30rpx;
|
|
left: 30rpx;
|
|
}
|
|
}
|
|
|
|
.container::before {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
border-radius: 20rpx;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: #000000;
|
|
// background: url('https://oss.wsdns.cn/20240528/cf37a247603f489ba23d7d2a53b8da39.jpeg') no-repeat center bottom;
|
|
background-size: 100%;
|
|
opacity: 0.25; /* 设置透明度 */
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 700rpx;
|
|
height: 370rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.merchant-avatar {
|
|
margin-top: 30rpx;
|
|
margin-left: 30rpx;
|
|
}
|
|
.card-info {
|
|
height: 120rpx;
|
|
margin-top: 10rpx;
|
|
margin-left: 10rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.title-bar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
}
|
|
.web-text-price {
|
|
padding-right: 40rpx;
|
|
font-size: 36rpx;
|
|
color: #fecc66;
|
|
}
|
|
}
|
|
.card-bg {
|
|
}
|
|
}
|
|
.card-item {
|
|
width: 700rpx;
|
|
margin: 20rpx auto;
|
|
border-radius: 20rpx;
|
|
position: relative;
|
|
// box-shadow: 0 0px 6px 1px rgba($color: #a5a5a5, $alpha: 0.2);
|
|
}
|
|
// .card-item::before {
|
|
// content: ''; /* 伪元素需要内容，即使它是空的 */
|
|
// position: absolute;
|
|
// top: 0;
|
|
// right: 0;
|
|
// bottom: 0;
|
|
// left: 0;
|
|
// background: url('https://oss.wsdns.cn/20240528/d5680e18210544a49dfa79f250f1997d.jpeg');
|
|
// background-size: cover; /* 或其他你需要的背景大小 */
|
|
// opacity: 0.5; /* 设置透明度 */
|
|
// z-index: -1; /* 确保伪元素在内容之下 */
|
|
// }
|
|
.order-title {
|
|
padding: 20rpx 0;
|
|
|
|
.merchant-avatar {
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.card-name {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.btn-status {
|
|
font-size: 30rpx;
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.order-body {
|
|
padding: 16px 0;
|
|
}
|
|
}
|
|
.card-actions {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
height: 45px;
|
|
border-top: 1px #eee solid;
|
|
}
|
|
|
|
.card-actions-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.web-text-heading {
|
|
font-size: 38rpx;
|
|
margin-left: 28rpx;
|
|
}
|
|
}
|
|
|
|
.card-actions-item-text {
|
|
font-size: 12px;
|
|
color: #666;
|
|
margin-left: 5px;
|
|
}
|
|
.address-body {
|
|
width: 660rpx;
|
|
margin: auto;
|
|
}
|
|
.to-pay {
|
|
width: 600rpx !important;
|
|
margin: 40rpx auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.btn-bar {
|
|
width: 700rpx;
|
|
left: 25rpx;
|
|
position: fixed;
|
|
bottom: 30rpx;
|
|
margin: auto;
|
|
clear: both;
|
|
}
|
|
|
|
.title-bar {
|
|
display: flex;
|
|
|
|
.web-text-heading {
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.web-text-secondary {
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
.xieyi {
|
|
margin-bottom: 80rpx;
|
|
padding: 0 30rpx;
|
|
|
|
.text {
|
|
margin-left: 5rpx;
|
|
|
|
.link {
|
|
color: #0f80ff;
|
|
}
|
|
}
|
|
}
|
|
.money-bar {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
.money-item {
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.web-divider-vertical {
|
|
height: 60rpx;
|
|
width: 1rpx;
|
|
background-color: #e6e6e6;
|
|
}
|
|
}
|
|
.qrcode{
|
|
width: 600rpx;
|
|
height: 600rpx;
|
|
margin: 30rpx auto;
|
|
line-height: 2rem;
|
|
background-color: #ffffff;
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
</style>
|