初始化
This commit is contained in:
@@ -0,0 +1,635 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- deBug信息 -->
|
||||
<view class="web-debug web-text-success" style="display: none">
|
||||
场馆ID：{{ merchantId }} 场馆编号：{{ merchantCode }} 场馆名称：{{ merchantName }} 日期：{{ dateTime }} 星期：{{ week }} 订单总金额：{{ totalPrice }} 类型：{{
|
||||
type
|
||||
}}
|
||||
商品信息：{{ goodsList }} 表单信息：{{ form }}
|
||||
</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.cardName }}</view>
|
||||
<block v-if="form.cardCode == '月/年卡'">
|
||||
<view class="desc web-text-heading" style="color: #ffffff; font-size: 14px">{{ form.month }}个月</view>
|
||||
</block>
|
||||
<block v-if="form.cardCode == '次卡'">
|
||||
<view class="desc web-text-heading" style="color: #ffffff; font-size: 14px">{{ form.number }}次</view>
|
||||
</block>
|
||||
<block v-if="form.cardCode == '充值卡'">
|
||||
<view class="desc web-text-heading" style="color: #ffffff; font-size: 14px">{{ form.discount }}折</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="price">
|
||||
<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">0000 0000 0000</view>
|
||||
</view>
|
||||
<!-- 登录组件 -->
|
||||
<ws-login ref="login" :logo="logo" @done="reload" />
|
||||
</view>
|
||||
|
||||
<uni-card title="会员卡说明" :border="false" :is-shadow="false">
|
||||
<view v-html="form.comments"></view>
|
||||
</uni-card>
|
||||
|
||||
<uni-card title="选择支付方式" :border="false" :is-shadow="false">
|
||||
<uv-cell-group :customStyle="{ backgroundColor: '#ffffff' }" :border="false">
|
||||
<block v-for="(item, index) in payment" :key="index"></block>
|
||||
<uv-cell
|
||||
title="微信支付"
|
||||
icon="https://oss.wsdns.cn/20240511/8d7af0f0374040cb9b9255eff5fb812d.png?x-oss-process=image/resize,m_fixed,w_100,h_100/quality,Q_90"
|
||||
:cellStyle="{ padding: '20rpx 10rpx', borderRadius: '8rpx', backgroundColor: payType == 1 ? '#f6fff1' : '' }"
|
||||
:border="false"
|
||||
@click="onPayType(1)"
|
||||
>
|
||||
<template v-slot:right-icon>
|
||||
<uv-icon v-if="payType == 1" size="30rpx" name="checkbox-mark"></uv-icon>
|
||||
</template>
|
||||
</uv-cell>
|
||||
<uv-cell
|
||||
:title="`余额支付(${userInfo.balance})`"
|
||||
icon="https://oss.wsdns.cn/20240511/fae57a94fa0042b9bceb721421304db1.png?x-oss-process=image/resize,m_fixed,w_100,h_100/quality,Q_90"
|
||||
:cellStyle="{ padding: '10px 5px', borderRadius: '8rpx', backgroundColor: payType == 0 ? '#f6fff1' : '' }"
|
||||
:border="false"
|
||||
@click="onPayType(0)"
|
||||
>
|
||||
<template v-slot:right-icon>
|
||||
<uv-icon v-if="payType == 0" size="30rpx" name="checkbox-mark"></uv-icon>
|
||||
</template>
|
||||
</uv-cell>
|
||||
</uv-cell-group>
|
||||
<view slot="actions" class="card-actions">
|
||||
<view class="card-actions-item" @click="actionsClick('分享')">
|
||||
<!-- <span class="web-text-danger">已优惠￥0.00</span> -->
|
||||
<span class="web-text-heading">￥{{ form.price || 0.0 }}</span>
|
||||
</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
|
||||
<view class="xieyi web-cell web-text-secondary web-cell-align-top">
|
||||
<view class="web-cell web-cell-content web-cell-align-top">
|
||||
<uni-icons type="circle" size="20" color="#a4a5a7" v-if="!disabled" @click="onDisabled"></uni-icons>
|
||||
<uni-icons type="checkbox" size="20" color="#11a954" v-else @click="onDisabled"></uni-icons>
|
||||
<view class="text" @click="onDisabled">
|
||||
<text>同意以下服务条款</text>
|
||||
<text class="link" @click.stop="navTo('/package/article/detail?articleId=501')">《广西体育中心预定条款》</text>
|
||||
<text class="link" @click.stop="navTo('/package/article/detail?articleId=502')">《用户服务协议和隐私政策》</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 支付按钮 -->
|
||||
<uv-gap height="50"></uv-gap>
|
||||
<view class="checkout-car">
|
||||
<view class="car-total">
|
||||
<text style="color: #ebcf00">合计￥</text>
|
||||
<uv-count-to :startVal="0" decimals="2" duration="100" color="#ebcf00" bold :endVal="form.price"></uv-count-to>
|
||||
</view>
|
||||
<uv-button
|
||||
class="save-btn"
|
||||
:disabled="!disabled"
|
||||
:customStyle="{ background: 'linear-gradient(to right, #70b915, #008e04)', borderRadius: '0 30px 30px 0', color: '#ffffff', border: 'none', padding: '22px 30px' }"
|
||||
text="提交订单"
|
||||
@click="save"
|
||||
></uv-button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 收货地址选择弹窗 -->
|
||||
<uni-popup ref="addForm" type="center" border-radius="10px 10px 0 0">
|
||||
<uni-card title="选择收货地址" :border="false" :is-shadow="false" :padding="0">
|
||||
<view class="address-body web-cell web-cell-align-top">
|
||||
<view class="web-cell-content">
|
||||
<uv-cell-group :customStyle="{ backgroundColor: '#ffffff' }" :border="false">
|
||||
<block v-for="(item, index) in addressList" :key="index">
|
||||
<uv-cell :cellStyle="{ padding: '10px 0' }" :label="item.address" @click="onAddress(item)">
|
||||
<template v-slot:icon>
|
||||
<uv-avatar :text="item.type" fontSize="12" size="32" randomBgColor></uv-avatar>
|
||||
</template>
|
||||
<template v-slot:title>
|
||||
<view class="title-bar">
|
||||
<text class="web-text-heading" style="font-weight: 700">{{ item.name }}</text>
|
||||
<text class="web-text-secondary">{{ item.phone }}</text>
|
||||
<uni-tag v-if="item.isDefault" text="默认" size="mini" inverted type="success"></uni-tag>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:right-icon>
|
||||
<uni-icons type="right" style="color: #999999"></uni-icons>
|
||||
</template>
|
||||
</uv-cell>
|
||||
</block>
|
||||
<uv-button class="add-address" :customStyle="{ borderRadius: '30px' }" text="收货地址管理" @click="navTo('/package/user/address')"></uv-button>
|
||||
</uv-cell-group>
|
||||
</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
</uni-popup>
|
||||
<!-- 支付密码弹窗 -->
|
||||
<uni-popup ref="payPasswordForm" type="center" border-radius="10px 10px 0 0">
|
||||
<uni-card title="请输入支付密码" :border="false" :is-shadow="false" :padding="0">
|
||||
<view class="pay-password-card">
|
||||
<uni-forms ref="form" :label-width="80">
|
||||
<uni-forms-item label="支付密码" name="payPassword" required>
|
||||
<uv-code-input mode="box" dot :space="0" :maxlength="6" hairline v-model="payPassword"></uv-code-input>
|
||||
</uni-forms-item>
|
||||
<uv-button
|
||||
class="to-pay-btn"
|
||||
:customStyle="{ background: 'linear-gradient(to right, #70b915, #008e04)', borderRadius: '30px', color: '#ffffff' }"
|
||||
text="确定支付"
|
||||
:disabled="disabledPayPayPassword"
|
||||
@click="onPayPassword"
|
||||
></uv-button>
|
||||
</uni-forms>
|
||||
<text @click="navTo(`/package/user/pay-password`)" class="web-text-primary">忘记支付密码？</text>
|
||||
</view>
|
||||
</uni-card>
|
||||
</uni-popup>
|
||||
<!-- 登录组件 -->
|
||||
<ws-login ref="login" :logo="logo" @done="reload" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as Api from '@/api/booking/card';
|
||||
import * as OrderApi from '@/api/shop/order';
|
||||
import { checkPayPassword } from '@/api/passport/login';
|
||||
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);
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cardId: 0,
|
||||
goodsId: 0,
|
||||
userInfo: {},
|
||||
form: {},
|
||||
address: {},
|
||||
addressList: [],
|
||||
week: 0,
|
||||
goodsList,
|
||||
// 订单总金额
|
||||
totalPrice,
|
||||
reducePrice: 0,
|
||||
merchantId,
|
||||
merchantName,
|
||||
merchantCode,
|
||||
getWeek,
|
||||
payType: 1,
|
||||
isLogin: false,
|
||||
disabled: false,
|
||||
// 支付密码是否正确
|
||||
isPayPasswordCorrect: false,
|
||||
disabledPayPayPassword: false,
|
||||
payPassword: ''
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
this.cardId = 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 { cardId } = this;
|
||||
|
||||
// 当前登录用户信息
|
||||
const userInfo = await userStore.fetchUserInfo();
|
||||
app.userInfo = userInfo;
|
||||
|
||||
Api.getCard(cardId).then((data) => {
|
||||
app.form = data;
|
||||
// console.log('res: ',res);
|
||||
// app.addressList = res.list;
|
||||
// const arr = res.list.filter((d) => d.isDefault === true);
|
||||
// app.address = arr[0];
|
||||
});
|
||||
|
||||
// if (cardId > 0) {
|
||||
// Api.getOrder(cardId).then(data => {
|
||||
// app.merchantId = data.merchantId
|
||||
// app.merchantName = data.merchantName
|
||||
// app.merchantCode = data.merchantCode
|
||||
// app.payType = data.payType
|
||||
// app.orderInfo = data.orderInfoList
|
||||
// app.totalPrice = data.totalPrice
|
||||
// app.dateTime = data.orderInfoList[0].dateTime
|
||||
// })
|
||||
// }
|
||||
},
|
||||
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;
|
||||
},
|
||||
openAddressList() {
|
||||
this.$refs.addForm.open('center');
|
||||
},
|
||||
// 弹出登录提示框
|
||||
openLogin() {
|
||||
if (!this.isLogin) {
|
||||
this.$refs.login.open('bottom');
|
||||
return false;
|
||||
}
|
||||
},
|
||||
// 验证支付密码
|
||||
onPayPassword() {
|
||||
if (this.payPassword == '' || !this.payPassword) {
|
||||
uni.showToast({
|
||||
title: '请输入支付密码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
this.disabledPayPayPassword = true;
|
||||
const { payPassword } = this;
|
||||
checkPayPassword({ payPassword })
|
||||
.then((res) => {
|
||||
this.disabledPayPayPassword = false;
|
||||
this.isPayPasswordCorrect = true;
|
||||
this.save();
|
||||
})
|
||||
.catch((err) => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: 'none'
|
||||
});
|
||||
this.disabledPayPayPassword = false;
|
||||
});
|
||||
},
|
||||
save() {
|
||||
const app = this;
|
||||
const { form, payType } = this;
|
||||
|
||||
if (!this.disabled) {
|
||||
uni.showToast({
|
||||
title: '请先阅读并同意服务协议',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
if (payType == 0 && !this.isPayPasswordCorrect) {
|
||||
this.$refs.payPasswordForm.open('center');
|
||||
return false;
|
||||
}
|
||||
|
||||
uni.showLoading({
|
||||
title: '订单提交中.'
|
||||
});
|
||||
|
||||
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: 380rpx;
|
||||
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;
|
||||
}
|
||||
.add-address {
|
||||
width: 600rpx !important;
|
||||
margin: 40rpx auto;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay-password-card {
|
||||
width: 600rpx;
|
||||
min-height: 300rpx;
|
||||
margin: 30rpx auto;
|
||||
background-color: #ffffff;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.web-text-primary {
|
||||
line-height: 2rem;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
}
|
||||
.to-pay-btn {
|
||||
width: 400rpx !important;
|
||||
margin: 40rpx auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,416 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="segmented">
|
||||
<uni-segmented-control :current="current" :values="items" :styleType="styleType" :activeColor="activeColor" inActiveColor="#808080" @clickItem="onClickItem" />
|
||||
</view>
|
||||
<view class="card-list">
|
||||
<block v-for="(item, index) in cardList" :key="index">
|
||||
<view @click="openUrl('/package/card/checkout?cardId=' + item.cardId)" class="container" :style="{ background: `url(${item.image}) no-repeat center center`, backgroundSize: '100%', opacity: '0.85' }">
|
||||
<view class="content web-cell">
|
||||
<view class="merchant-avatar">
|
||||
<uv-avatar :src="item.merchantAvatar" size="36" 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;">{{ item.cardName }}</view>
|
||||
<block v-if="item.cardCode == '月/年卡'">
|
||||
<view class="desc web-text-heading" style="color: #ffffff;font-size: 14px;">{{ item.month }}个月</view>
|
||||
</block>
|
||||
<block v-if="item.cardCode == '次卡'">
|
||||
<view class="desc web-text-heading" style="color: #ffffff;font-size: 14px;">{{ item.number }}次</view>
|
||||
</block>
|
||||
<block v-if="item.cardCode == '充值卡'">
|
||||
<view class="desc web-text-heading" style="color: #ffffff;font-size: 14px;">{{ item.discount }}折</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="price">
|
||||
<text class="web-text-price">{{ `￥${item.price}` }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="cardList.length == 0">
|
||||
<uni-card :border="false" :padding="'18px 6px'">
|
||||
<uv-skeleton rows="2" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
||||
</uni-card>
|
||||
<uni-card :border="false" :padding="'18px 6px'">
|
||||
<uv-skeleton rows="2" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
||||
</uni-card>
|
||||
<uni-card :border="false" :padding="'18px 6px'">
|
||||
<uv-skeleton rows="2" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
||||
</uni-card>
|
||||
<uni-card :border="false" :padding="'18px 6px'">
|
||||
<uv-skeleton rows="2" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
||||
</uni-card>
|
||||
<uni-card :border="false" :padding="'18px 6px'">
|
||||
<uv-skeleton rows="2" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
||||
</uni-card>
|
||||
<uni-card :border="false" :padding="'18px 6px'">
|
||||
<uv-skeleton rows="2" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
||||
</uni-card>
|
||||
</block>
|
||||
<!-- 登录组件 -->
|
||||
<ws-login ref="login" :logo="logo" @done="reload" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as Api from '@/api/booking/card';
|
||||
import { pageWechatDeposit } from '@/api/shop/wechatDeposit';
|
||||
import { getWeek, getKey } from '@/utils/common';
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
isRefresh: false,
|
||||
isLogin: false,
|
||||
userId: 0,
|
||||
where: {
|
||||
page: 1,
|
||||
cardCode: '月/年卡',
|
||||
sceneType: 'showCanBuyVipCard'
|
||||
},
|
||||
canReset: false,
|
||||
loadMore: 'more',
|
||||
logo: '',
|
||||
items: ['月/年卡', '次卡', '充值卡'],
|
||||
cardList: [],
|
||||
styles: [
|
||||
{
|
||||
value: 'button',
|
||||
text: '按钮',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
value: 'text',
|
||||
text: '文字'
|
||||
}
|
||||
],
|
||||
colors: ['#333333', '#4cd964', '#dd524d'],
|
||||
current: 0,
|
||||
colorIndex: 0,
|
||||
activeColor: '#108001',
|
||||
styleType: 'text',
|
||||
getWeek,
|
||||
// 骨架屏
|
||||
hideTools: true
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
// 判断是否登录
|
||||
this.openLogin();
|
||||
// 加载数据
|
||||
this.reload();
|
||||
console.log('判断是否刷新: ', option);
|
||||
if (option.isRefresh) {
|
||||
this.isRefresh = true;
|
||||
}
|
||||
},
|
||||
onShow(e) {
|
||||
console.log('判断是否刷新: ', e);
|
||||
// 判断是否登录
|
||||
this.openLogin();
|
||||
if (this.isRefresh) {
|
||||
this.reload();
|
||||
}
|
||||
},
|
||||
// 触底函数
|
||||
onReachBottom() {
|
||||
const app = this;
|
||||
const { where } = this;
|
||||
if (app.canReset) {
|
||||
app.where.page = ++where.page;
|
||||
app.reload();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
reload() {
|
||||
const app = this;
|
||||
const { where, userId } = this;
|
||||
if (userId == 0) {
|
||||
app.openLogin();
|
||||
return;
|
||||
}
|
||||
// where.userId = userId;
|
||||
// uni.showLoading({
|
||||
// title: '数据读取中.'
|
||||
// });
|
||||
app.loadMore = 'loading';
|
||||
Api.pageCard(where)
|
||||
.then((res) => {
|
||||
const list = res.list.map((d) => {
|
||||
console.log(d);
|
||||
return d;
|
||||
});
|
||||
if (app.cardList.length < res.count) {
|
||||
app.cardList = app.cardList.concat(list);
|
||||
app.canReset = true;
|
||||
app.loadMore = 'no-more';
|
||||
} else {
|
||||
app.canReset = false;
|
||||
app.loadMore = 'no-more';
|
||||
}
|
||||
// uni.hideLoading();
|
||||
app.isRefresh = false;
|
||||
app.hideTools = false;
|
||||
})
|
||||
.catch(() => {
|
||||
uni.showToast({
|
||||
title: '请检查您的网络.',
|
||||
icon: 'none'
|
||||
});
|
||||
app.isRefresh = false;
|
||||
app.hideTools = false;
|
||||
});
|
||||
},
|
||||
onClickItem(e, text) {
|
||||
const app = this;
|
||||
const { where, userId } = this;
|
||||
const index = e.currentIndex;
|
||||
if (this.current !== e.currentIndex) {
|
||||
this.current = e.currentIndex;
|
||||
}
|
||||
// 全部
|
||||
if (index == 0) {
|
||||
where.cardCode = '月/年卡';
|
||||
}
|
||||
// 未支付
|
||||
if (index == 1) {
|
||||
where.cardCode = '次卡';
|
||||
}
|
||||
// 已支付
|
||||
if (index == 2) {
|
||||
where.cardCode = '充值卡';
|
||||
}
|
||||
|
||||
this.where.page = 1;
|
||||
this.cardList = [];
|
||||
this.hideTools = true
|
||||
this.reload();
|
||||
},
|
||||
openUrl(url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
});
|
||||
},
|
||||
toPay(orderId) {
|
||||
uni.navigateTo({
|
||||
url: '/package/booking/confirm?id=' + orderId
|
||||
});
|
||||
},
|
||||
closeOrder(item) {
|
||||
uni.showModal({
|
||||
title: '确定取消此订单?',
|
||||
success(o) {
|
||||
if (o.confirm) {
|
||||
// Api.updateOrder({
|
||||
// orderStatus: 2,
|
||||
// orderId: item.orderId
|
||||
// })
|
||||
// .then((msg) => {
|
||||
// uni.showToast({
|
||||
// title: msg,
|
||||
// icon: 'none'
|
||||
// });
|
||||
// item.orderStatus = 2;
|
||||
// })
|
||||
// .catch(() => {
|
||||
// uni.showToast({
|
||||
// title: '请检查您的网络.',
|
||||
// icon: 'none'
|
||||
// });
|
||||
// uni.hideLoading();
|
||||
// });
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 弹出登录提示框
|
||||
async openLogin() {
|
||||
this.userId = uni.getStorageSync('user_id');
|
||||
if (!this.userId) {
|
||||
this.$refs.login.open('bottom');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 150px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.segmented {
|
||||
padding: 0 12rpx;
|
||||
}
|
||||
|
||||
.content-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.color-tag {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.uni-list {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-list {
|
||||
.container {
|
||||
width: 700rpx;
|
||||
height: 200rpx;
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.merchant-avatar {
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
.card-info {
|
||||
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: 30rpx;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.ele-flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
border-top: 1px #eee solid;
|
||||
}
|
||||
|
||||
.card-actions-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-actions-item-text {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.close {
|
||||
top: 60rpx !important;
|
||||
}
|
||||
|
||||
.total-price {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
font-size: 30rpx;
|
||||
align-items: flex-start;
|
||||
padding-left: 6rpx;
|
||||
margin-left: 450rpx;
|
||||
|
||||
.web-text-heading {
|
||||
font-size: 30rpx !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user