1216 lines
32 KiB
Vue
1216 lines
32 KiB
Vue
<template>
|
||
<view class="member-inter">
|
||
<scroll-view class="member-scroll" scroll-y @scroll="onScrollView">
|
||
<view class="membership">
|
||
<swiper class="swiper" autoplay="true" interval="3000" duration="500" circular="true">
|
||
<swiper-item class="swiper" v-for="(item, index) in imageList" :key="index">
|
||
<image class="swiper-img" :src="item.image" mode="widthFix"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
<view class="back-wrapper" @click="homeBack">
|
||
<image class="back" src="@/static/images/right-arrow.png" />
|
||
</view>
|
||
<text class="wago">Wagoo会员</text>
|
||
<view class="member-item">
|
||
<view v-for="(item, index) in memberList" :key="index" :class="[goldindex == index ? 'left2' : 'left']"
|
||
@click="goldMember(item, index)">
|
||
<!-- <image class="discount" src="https://activity.wagoo.live/tehui.png" /> -->
|
||
<text class="l1">{{ item.card_name }}会员</text>
|
||
<text v-if="item.max_bind_count == 1" class="l2">单宠卡</text>
|
||
<text v-else class="l2">最多绑定5只</text>
|
||
<text class="l3">{{ item.discount/10 }}折</text>
|
||
<view v-for="(it, inx) in item.gifts" :key="inx">
|
||
<text class="l4">{{ it.coupon_name }}*{{ it.coupon_value }}</text>
|
||
<!-- <text class="l4">{{it.coupon_name}}*{{it.coupon_value}}</text>
|
||
<text class="l4">体内外驱虫*2</text> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="middle-info" @click="middleInfo">
|
||
<image class="info-ava" src="https://activity.wagoo.live/kaitong.png" />
|
||
<view class="lijian">
|
||
<text class="money2">{{ discount_amount }}</text>
|
||
<!-- <image class="info-mg" src="https://activity.wagoo.live/lijian.png" /> -->
|
||
</view>
|
||
|
||
<text class="money1"></text>
|
||
<view class="original">
|
||
<text class="money">¥{{ actual_amount }}</text>
|
||
<!-- <text class="y"> 原价 </text>
|
||
<text class="y1"> {{ purchase_amount }}元 </text> -->
|
||
</view>
|
||
</view>
|
||
|
||
<view class="agreement">
|
||
<image v-if="mbselected1" class="not-selected" @click.stop="select1('1')" src="@/static/images/w.png"
|
||
mode="widthFix" />
|
||
<image v-if="mbselected2" class="not-selected" @click.stop="select1('2')" src="@/static/images/y.png"
|
||
mode="widthFix" />
|
||
<text @click="jumpTo('/pages/richText/membership-agreement')" class="y">
|
||
开通前请阅读</text>
|
||
<text @click="jumpTo('/pages/richText/membership-agreement')" class="y">《Wagoo会员协议》
|
||
</text>
|
||
</view>
|
||
<text class="wago2">会员权益</text>
|
||
<view class="me-rights">
|
||
<view class="left">
|
||
<view class="rights-item">
|
||
<image class="info-im" src="https://activity.wagoo.live/h3.png" />
|
||
<view class="h">
|
||
<text class="y">洗护折扣权益 </text>
|
||
<text class="y1">全部服务{{ discount/10 }}折 </text>
|
||
</view>
|
||
</view>
|
||
<view class="rights-item">
|
||
<image class="info-im" src="https://activity.wagoo.live/h12.png" />
|
||
<view class="h">
|
||
<text class="y">定制浴液</text>
|
||
</view>
|
||
</view>
|
||
<view class="rights-item">
|
||
<image class="info-im" src="https://activity.wagoo.live/h5.png" />
|
||
<view class="h">
|
||
<text class="y">免调度费</text>
|
||
<text class="y1">免{{ dispatch_fee }}次</text>
|
||
</view>
|
||
</view>
|
||
<view class="rights-item">
|
||
<image class="info-im" src="https://activity.wagoo.live/h11.png" />
|
||
<view class="h">
|
||
<text class="y">专属影集</text>
|
||
</view>
|
||
</view>
|
||
<view class="rights-item">
|
||
<image class="info-im" src="https://activity.wagoo.live/h10.png" />
|
||
<view class="h">
|
||
<text class="y">专属丝带</text>
|
||
</view>
|
||
</view>
|
||
<view class="rights-item">
|
||
<image class="info-im" src="https://activity.wagoo.live/h9.png" />
|
||
<view class="h">
|
||
<text class="y">专属客服</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="rights-item2">
|
||
<image mode="widthFix" class="info-im" src="https://activity.wagoo.live/h7.png" />
|
||
<view class="h">
|
||
<text class="y">入会礼包-减免券</text>
|
||
<text class="y2">减免券只在首次购买会员时赠送,赠送数量取决于首次购买时购买的会员等级</text>
|
||
</view>
|
||
</view>
|
||
<view class="rights-item">
|
||
<image class="info-im" src="https://activity.wagoo.live/h8.png" />
|
||
<view class="h">
|
||
<text class="y">专属会员活动</text>
|
||
</view>
|
||
</view>
|
||
<view class="rights-item">
|
||
<image class="info-im" src="https://activity.wagoo.live/h6.png" />
|
||
<view class="h">
|
||
<text class="y">免夜间费</text>
|
||
<text class="y1">免{{ night_fee }}次</text>
|
||
</view>
|
||
</view>
|
||
<view class="rights-item">
|
||
<image class="info-im" src="https://activity.wagoo.live/h1.png" />
|
||
<view class="h">
|
||
<text class="y">Al宠物档案</text>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="rights-item">
|
||
<image class="info-im" src="https://activity.wagoo.live/h4.png" />
|
||
<view class="h">
|
||
<text class="y">积分加速</text>
|
||
</view>
|
||
</view> -->
|
||
<view class="rights-item">
|
||
<image class="info-im" src="https://activity.wagoo.live/h2.png" />
|
||
<view class="h">
|
||
<text class="y">公益勋章</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<text class="wago2">权益对比</text>
|
||
<image v-if="gold" class="info-and" mode="widthFix" src="https://activity.wagoo.live/huangjin.png" />
|
||
<image v-if="platinum" class="info-and" mode="widthFix" src="https://activity.wagoo.live/baijin.png" />
|
||
<image v-if="blackGold" class="info-and" mode="widthFix" src="https://activity.wagoo.live/heijin.png" />
|
||
<view class="middle-bm" v-if="middleBm">
|
||
<view class="middle-info2" @click="middleInfo">
|
||
<image class="info-ava" src="https://activity.wagoo.live/kaitong.png" />
|
||
<view class="lijian">
|
||
<text class="money2">{{ discount_amount }}</text>
|
||
<!-- <image class="info-mg" src="https://activity.wagoo.live/lijian.png" /> -->
|
||
</view>
|
||
<!-- <text class="money">¥199.00</text> -->
|
||
<text class="money1"></text>
|
||
<view class="original">
|
||
<text class="money">¥{{ actual_amount }}</text>
|
||
<!-- <text class="y"> 原价 </text>
|
||
<text class="y1"> {{ purchase_amount }}元 </text> -->
|
||
</view>
|
||
<view class="agreement">
|
||
<image v-if="mbselected1" class="not-selected" @click.stop="select1('1')" src="@/static/images/w.png"
|
||
mode="widthFix" />
|
||
<image v-if="mbselected2" class="not-selected" @click.stop="select1('2')" src="@/static/images/y.png"
|
||
mode="widthFix" />
|
||
|
||
<text @click="jumpTo('/pages/richText/membership-agreement')" class="y">
|
||
开通前请阅读</text>
|
||
<text @click="jumpTo('/pages/richText/membership-agreement')" class="y">《Wagoo会员协议》
|
||
</text>
|
||
</view>
|
||
|
||
<!-- <view class="agreement">
|
||
<image
|
||
v-if="mbselected3"
|
||
class="not-selected"
|
||
@click.stop="mbeselect1('1')"
|
||
src="@/static/images/w.png"
|
||
mode="widthFix"
|
||
/>
|
||
<image
|
||
v-if="mbselected4"
|
||
class="not-selected"
|
||
@click.stop="mbeselect1('2')"
|
||
src="@/static/images/y.png"
|
||
mode="widthFix"
|
||
/>
|
||
<text class="y"> 开通前请阅读</text>
|
||
<text class="y">《Wagoo会员协议》 </text>
|
||
</view> -->
|
||
<!-- <view class="original">
|
||
<text class="y"> 原价 </text>
|
||
<text class="y1"> 299元 </text>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
|
||
<view style="height: 286rpx; background: #fff"></view>
|
||
</scroll-view>
|
||
|
||
<view v-if="elasticLayer" class="elastic-layer" @click="(additionalBom = false), (elasticLayer = false)" />
|
||
<view class="additional-bottom" v-if="additionalBom">
|
||
<image src="@/static/images/close.png" mode="aspectFit" class="close-icon"
|
||
@click="(additionalBom = false), (elasticLayer = false)" />
|
||
<view class="recharge-method">
|
||
<text class="zf"> 请选择支付方式 </text>
|
||
<view class="wechat" @click.stop="selectOption1('1')">
|
||
<view class="select">
|
||
<image class="w" src="@/static/images/douy.png" mode="widthFix" />
|
||
<text class="x">抖音</text>
|
||
</view>
|
||
<image v-if="selected1" class="not-selected" src="@/static/images/w.png"
|
||
mode="widthFix" />
|
||
<image v-if="selected2" class="not-selected" src="@/static/images/y.png" mode="widthFix" />
|
||
</view>
|
||
<!-- <view class="wechat">
|
||
<view class="select">
|
||
<image class="w" src="@/static/images/wallet.png" mode="widthFix" />
|
||
<text class="x">钱包支付</text>
|
||
</view>
|
||
<image v-if="selected3" class="not-selected" @click.stop="selectOption2('2')" src="@/static/images/w.png"
|
||
mode="widthFix" />
|
||
<image v-if="selected4" class="not-selected" src="@/static/images/y.png" mode="widthFix" />
|
||
</view> -->
|
||
</view>
|
||
<view class="payment" @click="rechargeNow">
|
||
<text class="Z"> 立即支付 </text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { imgPrefix } from '@/utils/common';
|
||
import {
|
||
memberType,
|
||
memberWXPAY,
|
||
walletWxpay,
|
||
membershipWallet,
|
||
} from "../../api/login";
|
||
export default {
|
||
data() {
|
||
return {
|
||
imageList: [
|
||
{
|
||
id: "1",
|
||
image: imgPrefix + "vipCat.png",
|
||
},
|
||
{
|
||
id: "2",
|
||
image: imgPrefix + "vipDog.png",
|
||
},
|
||
],
|
||
// gg2: true,
|
||
// gg1: false,
|
||
middleBm: false,
|
||
gold: true,
|
||
platinum: false,
|
||
blackGold: false,
|
||
memberList: [],
|
||
goldindex: 0,
|
||
additionalBom: false,
|
||
discount_amount: "",
|
||
purchase_amount: "",
|
||
actual_amount: "",
|
||
dispatch_fee: "",
|
||
night_fee: "",
|
||
discount: "",
|
||
elasticLayer: false,
|
||
selected1: true,
|
||
selected2: false,
|
||
mbselected1: true,
|
||
mbselected2: false,
|
||
mbselected3: true,
|
||
mbselected4: false,
|
||
selected3: true,
|
||
selected4: false,
|
||
recharge: true,
|
||
record: false,
|
||
middleBm: false,
|
||
card_name: "",
|
||
card_type: "",
|
||
actual_amount: "",
|
||
tabList: [
|
||
{
|
||
value: "0",
|
||
label: "宠物日历",
|
||
},
|
||
{
|
||
value: "1",
|
||
label: "健康记录",
|
||
},
|
||
{
|
||
value: "2",
|
||
label: "服务记录",
|
||
},
|
||
],
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
this.getmemberType();
|
||
},
|
||
methods: {
|
||
// 使用 scroll-view 的滚动监听（替代 onPageScroll）
|
||
onScrollView(e) {
|
||
const scrollTop = (e && e.detail && e.detail.scrollTop) || 0;
|
||
if (scrollTop >= 520) {
|
||
this.middleBm = true;
|
||
} else {
|
||
this.middleBm = false;
|
||
}
|
||
},
|
||
homeBack() {
|
||
uni.navigateBack({
|
||
delta: 1, // 返回的页面数，默认为1
|
||
});
|
||
},
|
||
jumpTo(url) {
|
||
uni.navigateTo({
|
||
url,
|
||
});
|
||
},
|
||
goldMember(item, index) {
|
||
this.goldindex = index;
|
||
if (index == 0) {
|
||
this.gold = true;
|
||
this.platinum = false;
|
||
this.blackGold = false;
|
||
this.actual_amount = this.memberList[0].actual_amount;
|
||
this.purchase_amount = this.memberList[0].purchase_amount;
|
||
this.discount_amount = this.memberList[0].discount_amount;
|
||
this.dispatch_fee = this.memberList[0].dispatch_fee;
|
||
this.card_name = this.memberList[0].card_name;
|
||
this.card_type = this.memberList[0].card_type;
|
||
this.discount = this.memberList[0].discount;
|
||
// 夜间费
|
||
this.night_fee = this.memberList[0].night_fee;
|
||
this.gg1 = false;
|
||
this.gg2 = true;
|
||
} else if (index == 1) {
|
||
this.gold = false;
|
||
this.platinum = true;
|
||
this.blackGold = false;
|
||
this.actual_amount = this.memberList[1].actual_amount;
|
||
this.purchase_amount = this.memberList[1].purchase_amount;
|
||
this.discount_amount = this.memberList[1].discount_amount;
|
||
this.dispatch_fee = this.memberList[1].dispatch_fee;
|
||
this.card_name = this.memberList[1].card_name;
|
||
this.card_type = this.memberList[1].card_type;
|
||
// 夜间费
|
||
this.night_fee = this.memberList[1].night_fee;
|
||
this.discount = this.memberList[1].discount;
|
||
this.gg1 = false;
|
||
this.gg2 = true;
|
||
} else if (index == 2) {
|
||
this.gold = false;
|
||
this.platinum = false;
|
||
this.blackGold = true;
|
||
this.actual_amount = this.memberList[2].actual_amount;
|
||
this.purchase_amount = this.memberList[2].purchase_amount;
|
||
this.discount_amount = this.memberList[2].discount_amount;
|
||
this.dispatch_fee = this.memberList[2].dispatch_fee;
|
||
this.card_name = this.memberList[2].card_name;
|
||
this.card_type = this.memberList[2].card_type;
|
||
this.discount = this.memberList[2].discount;
|
||
// 夜间费
|
||
this.night_fee = this.memberList[2].night_fee;
|
||
this.gg1 = true;
|
||
this.gg2 = false;
|
||
}
|
||
// console.log(this.goldindex, "-");
|
||
},
|
||
middleInfo() {
|
||
if (!this.memberSelect || this.memberSelect == 2) {
|
||
uni.showToast({
|
||
title: "请先阅读并同意会员卡服务协议",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
} else {
|
||
(this.additionalBom = true), (this.elasticLayer = true);
|
||
}
|
||
},
|
||
middleInfo2() {
|
||
if (!this.memberSelect1 || this.memberSelect1 == 2) {
|
||
uni.showToast({
|
||
title: "请先阅读并同意会员卡服务协议",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
} else {
|
||
(this.additionalBom = true), (this.elasticLayer = true);
|
||
}
|
||
},
|
||
select1(v) {
|
||
// console.log(v)
|
||
this.memberSelect = v;
|
||
if (v == 1) {
|
||
this.mbselected1 = false;
|
||
this.mbselected2 = true;
|
||
} else if (v == 2) {
|
||
this.mbselected1 = true;
|
||
this.mbselected2 = false;
|
||
}
|
||
},
|
||
mbeselect1(v) {
|
||
// console.log(v)
|
||
this.memberSelect1 = v;
|
||
if (v == 1) {
|
||
this.mbselected3 = false;
|
||
this.mbselected4 = true;
|
||
} else if (v == 2) {
|
||
this.mbselected3 = true;
|
||
this.mbselected4 = false;
|
||
}
|
||
},
|
||
selectOption1(v) {
|
||
this.WeChat = v;
|
||
this.wallet = "";
|
||
console.log(this.WeChat);
|
||
this.selected1 = false;
|
||
this.selected2 = true;
|
||
this.selected3 = true;
|
||
this.selected4 = false;
|
||
},
|
||
selectOption2(v) {
|
||
this.WeChat = "";
|
||
this.wallet = v;
|
||
console.log(this.wallet);
|
||
this.selected1 = true;
|
||
this.selected2 = false;
|
||
this.selected3 = false;
|
||
this.selected4 = true;
|
||
},
|
||
getmemberType() {
|
||
const data = {
|
||
type: 0,
|
||
};
|
||
memberType(data).then((res) => {
|
||
this.memberList = res.data;
|
||
this.actual_amount = res.data[0].actual_amount;
|
||
this.purchase_amount = res.data[0].purchase_amount;
|
||
this.discount_amount = res.data[0].discount_amount;
|
||
this.actual_amount = res.data[0].actual_amount;
|
||
this.card_type = res.data[0].card_type;
|
||
this.card_name = res.data[0].card_name;
|
||
this.actual_mount = res.data[0].actual_mount;
|
||
// 调度费
|
||
this.dispatch_fee = res.data[0].dispatch_fee;
|
||
// 夜间费
|
||
this.night_fee = res.data[0].night_fee;
|
||
this.discount = res.data[0].discount;
|
||
// console.log(res.data,'--')
|
||
});
|
||
},
|
||
async rechargeNow() {
|
||
// console.log(this.wallet, "???");
|
||
if (!this.WeChat && !this.wallet) {
|
||
uni.showToast({
|
||
title: "请选择充值方式",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
if (this.WeChat == 1) {
|
||
try {
|
||
const value = uni.getStorageSync("userInfo");
|
||
const data = {
|
||
type: 2,
|
||
user_nickname: this.nick_name,
|
||
user_id: Number(value.user_id),
|
||
card_type: this.card_type,
|
||
card_name: this.card_name,
|
||
total_fee: Number(this.actual_amount),
|
||
};
|
||
memberWXPAY(data).then((res) => {
|
||
// 使用获取的支付参数进行支付
|
||
tt.pay({
|
||
orderInfo: {
|
||
order_id:res.data.orderInfo.order_id,
|
||
order_token:res.data.orderInfo.order_token,
|
||
},
|
||
service:5,
|
||
success: (res) => {
|
||
uni.showToast({
|
||
title: "支付成功",
|
||
icon: "none",
|
||
});
|
||
let that = this;
|
||
uni.showModal({
|
||
content: "绑定宠物享受会员权益",
|
||
showCancel: false,
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: `/pages/client/recharge/my-card?user_id=${that.userId}`,
|
||
});
|
||
// uni.navigateBack({
|
||
// delta: 1, // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
|
||
// });
|
||
}, 500);
|
||
}
|
||
},
|
||
});
|
||
// setTimeout(() => {
|
||
// uni.navigateTo({
|
||
// url: `/pages/client/recharge/my-card?user_id=${this.userId}`,
|
||
// });
|
||
// // uni.navigateBack({
|
||
// // delta: 1, // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
|
||
// // });
|
||
// }, 1500);
|
||
// this.buyService(this.user_id);
|
||
that.additionalBom = false;
|
||
that.elasticLayer = false;
|
||
console.log("支付成功:", res);
|
||
},
|
||
fail: (err) => {
|
||
console.error("支付失败:", err);
|
||
},
|
||
});
|
||
});
|
||
} catch (error) {
|
||
console.error("捕获到的错误:", error);
|
||
}
|
||
} else if (this.wallet == 2) {
|
||
let that = this;
|
||
uni.showModal({
|
||
title: "钱包付款",
|
||
content: "是否确认钱包付款",
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
const value = uni.getStorageSync("userInfo");
|
||
const user = JSON.parse( uni.getStorageSync('vuex'));
|
||
// console.log(user,'--=?')
|
||
this.nick_name = user.user.userInfo.username
|
||
const data = {
|
||
type: 2,
|
||
total_fee:Number(that.actual_amount),
|
||
card_type:that.card_type,
|
||
wallet_id:value.wallet_id,
|
||
user_nickname: this.nick_name
|
||
// card_name: that.card_name,
|
||
// user_nickname: that.nick_name,
|
||
// user_id: Number(value.user_id),
|
||
// total_fee: Number(that.actual_amount),
|
||
// wallet_id: value.wallet_id,
|
||
// card_type: that.card_type,
|
||
};
|
||
membershipWallet(data).then((res) => {
|
||
if (res.code == 0) {
|
||
uni.showToast({
|
||
title: "支付成功",
|
||
icon: "none",
|
||
});
|
||
uni.showModal({
|
||
content: "绑定宠物享受会员权益",
|
||
showCancel: false,
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: `/pages/client/recharge/my-card?user_id=${that.userId}`,
|
||
});
|
||
// uni.navigateBack({
|
||
// delta: 1, // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
|
||
// });
|
||
}, 500);
|
||
}
|
||
},
|
||
});
|
||
|
||
that.additionalBom = false;
|
||
that.elasticLayer = false;
|
||
} else if (res.code == 100) {
|
||
uni.showToast({
|
||
title: res.message,
|
||
icon: "none",
|
||
});
|
||
}
|
||
});
|
||
// 用户点击确定后的操作
|
||
} else if (res.cancel) {
|
||
console.log("取消了付款");
|
||
// 用户点击取消后的操作
|
||
}
|
||
},
|
||
});
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.member-inter {
|
||
background: #fff;
|
||
height: 100vh;
|
||
width: 100vw;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
overflow: hidden;
|
||
|
||
.member-scroll {
|
||
height: 100vh;
|
||
width: 100vw;
|
||
}
|
||
|
||
.membership {
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
|
||
// background: #000;
|
||
.swiper {
|
||
height: 582rpx;
|
||
}
|
||
|
||
image {
|
||
width: 100%;
|
||
// height: 219rpx;
|
||
}
|
||
}
|
||
|
||
.info-avator {
|
||
width: 100%;
|
||
height: 282px;
|
||
background: #fff;
|
||
}
|
||
|
||
.back-wrapper {
|
||
position: fixed;
|
||
left: 20rpx;
|
||
top: 110rpx;
|
||
padding: 20rpx;
|
||
z-index: 99;
|
||
box-sizing: content-box;
|
||
}
|
||
|
||
.back {
|
||
width: 24rpx;
|
||
height: 38rpx;
|
||
display: block;
|
||
}
|
||
|
||
.wago {
|
||
font-family: PingFangSC;
|
||
font-size: 16px;
|
||
color: #333333;
|
||
padding-top: 10rpx;
|
||
margin: 0 0 0 20rpx;
|
||
background: #fff;
|
||
font-weight: 500;
|
||
display: flex;
|
||
}
|
||
|
||
.member-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
background: #fff;
|
||
padding: 0 30rpx;
|
||
|
||
.left {
|
||
position: relative;
|
||
// width: 109px;
|
||
padding: 8rpx 28rpx;
|
||
width: 22%;
|
||
// height: 160px;
|
||
border-radius: 12px;
|
||
background: #f6f6f6;
|
||
display: flex;
|
||
flex-direction: column;
|
||
border: 1px solid #fff;
|
||
// border: 1px solid #000;
|
||
align-items: center;
|
||
margin-top: 30rpx;
|
||
|
||
.discount {
|
||
position: absolute;
|
||
left: 0;
|
||
top: -8rpx;
|
||
width: 63.53px;
|
||
height: 16px;
|
||
}
|
||
|
||
.l1 {
|
||
font-family: PingFangSC;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #000000;
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.l2 {
|
||
font-family: PingFangSC;
|
||
font-size: 12px;
|
||
color: #9b9b9b;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.l3 {
|
||
color: #000000;
|
||
font-family: PingFangSC;
|
||
font-size: 24px;
|
||
font-weight: 500;
|
||
margin: 10rpx 0 14rpx 0;
|
||
}
|
||
|
||
.l4 {
|
||
color: #000000;
|
||
font-family: PingFangSC;
|
||
font-size: 12px;
|
||
margin-top: 3rpx;
|
||
}
|
||
}
|
||
|
||
.left2 {
|
||
position: relative;
|
||
padding: 8rpx 28rpx;
|
||
width: 22%;
|
||
// width: 109px;
|
||
// height: 160px;
|
||
border-radius: 12px;
|
||
background: #f6f6f6;
|
||
display: flex;
|
||
flex-direction: column;
|
||
border: 1px solid #ff0097;
|
||
background: rgba(231, 64, 152, 0.1);
|
||
align-items: center;
|
||
margin-top: 30rpx;
|
||
|
||
.discount {
|
||
position: absolute;
|
||
left: 0;
|
||
top: -8rpx;
|
||
width: 63.53px;
|
||
height: 16px;
|
||
}
|
||
|
||
.l1 {
|
||
font-family: PingFangSC;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #000000;
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.l2 {
|
||
font-family: PingFangSC;
|
||
font-size: 12px;
|
||
color: #9b9b9b;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.l3 {
|
||
color: #ff0097;
|
||
font-family: PingFangSC;
|
||
font-size: 24px;
|
||
font-weight: 500;
|
||
margin: 10rpx 0 14rpx 0;
|
||
}
|
||
|
||
.l4 {
|
||
color: #ff0097;
|
||
font-family: PingFangSC;
|
||
font-size: 12px;
|
||
margin-top: 3rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.middle-info {
|
||
position: relative;
|
||
background: #fff;
|
||
|
||
.info-ava {
|
||
width: 94%;
|
||
height: 56px;
|
||
margin: 47rpx 0 0 20rpx;
|
||
}
|
||
|
||
.money1 {
|
||
position: absolute;
|
||
right: 92rpx;
|
||
top: 66rpx;
|
||
font-family: PingFangSC;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #ff0097;
|
||
}
|
||
|
||
.lijian {
|
||
position: absolute;
|
||
right: 51rpx;
|
||
top: -2rpx;
|
||
font-family: Source Han Sans;
|
||
font-size: 16px;
|
||
color: #ffffff;
|
||
|
||
.money2 {
|
||
position: absolute;
|
||
left: 90rpx;
|
||
top: 6rpx;
|
||
font-family: Source Han Sans;
|
||
font-size: 16px;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.info-mg {
|
||
width: 200rpx;
|
||
height: 72rpx;
|
||
}
|
||
}
|
||
|
||
.original {
|
||
display: flex;
|
||
align-items: center;
|
||
position: absolute;
|
||
left: 47rpx;
|
||
top: 68rpx;
|
||
|
||
.money {
|
||
font-family: Source Han Sans;
|
||
font-size: 26px;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.y {
|
||
font-family: PingFangSC;
|
||
font-size: 12px;
|
||
font-weight: normal;
|
||
color: #ffffff;
|
||
margin: 14rpx 0 0 10rpx;
|
||
}
|
||
|
||
.y1 {
|
||
font-family: PingFangSC;
|
||
font-size: 12px;
|
||
font-weight: normal;
|
||
color: #ffffff;
|
||
margin: 14rpx 0 0 0;
|
||
text-decoration: line-through;
|
||
}
|
||
}
|
||
}
|
||
|
||
.middle-bm {
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 124px;
|
||
background: #fff;
|
||
|
||
.middle-info2 {
|
||
position: relative;
|
||
background: #fff;
|
||
|
||
.info-ava {
|
||
width: 94%;
|
||
height: 56px;
|
||
margin: 27rpx 0 0 20rpx;
|
||
}
|
||
|
||
.money1 {
|
||
position: absolute;
|
||
right: 92rpx;
|
||
top: 66rpx;
|
||
font-family: PingFangSC;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #ff0097;
|
||
}
|
||
|
||
// .money2 {
|
||
// position: absolute;
|
||
// right: 106rpx;
|
||
// top: -12rpx;
|
||
// font-family: Source Han Sans;
|
||
// font-size: 16px;
|
||
// color: #ffffff;
|
||
// }
|
||
|
||
.lijian {
|
||
position: absolute;
|
||
right: 51rpx;
|
||
top: -22rpx;
|
||
font-family: Source Han Sans;
|
||
font-size: 16px;
|
||
color: #ffffff;
|
||
|
||
.money2 {
|
||
position: absolute;
|
||
left: 90rpx;
|
||
top: 6rpx;
|
||
font-family: Source Han Sans;
|
||
font-size: 16px;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.info-mg {
|
||
width: 200rpx;
|
||
height: 72rpx;
|
||
}
|
||
}
|
||
|
||
.original {
|
||
display: flex;
|
||
align-items: center;
|
||
position: absolute;
|
||
left: 47rpx;
|
||
top: 50rpx;
|
||
|
||
.money {
|
||
font-family: Source Han Sans;
|
||
font-size: 26px;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.y {
|
||
font-family: PingFangSC;
|
||
font-size: 12px;
|
||
font-weight: normal;
|
||
color: #ffffff;
|
||
margin: 14rpx 0 0 10rpx;
|
||
}
|
||
|
||
.y1 {
|
||
font-family: PingFangSC;
|
||
font-size: 12px;
|
||
font-weight: normal;
|
||
color: #ffffff;
|
||
margin: 14rpx 0 0 0;
|
||
text-decoration: line-through;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.agreement {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-content: center;
|
||
background: #fff;
|
||
padding-top: 10rpx;
|
||
|
||
.not-selected {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.y {
|
||
font-family: PingFangSC;
|
||
font-size: 11px;
|
||
color: #9b939a;
|
||
margin-top: 3rpx;
|
||
}
|
||
}
|
||
|
||
.wago2 {
|
||
background: #fff;
|
||
font-family: PingFangSC;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
display: block;
|
||
// margin: 0 0 0 20rpx;
|
||
padding: 30rpx 0 0 20rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.me-rights {
|
||
display: flex;
|
||
// flex-wrap: wrap;
|
||
justify-content: space-around;
|
||
padding: 0 20rpx 0 0;
|
||
background: #fff;
|
||
|
||
.left {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 44%;
|
||
|
||
.rights-item {
|
||
// margin: 30rpx 0 0 34rpx;
|
||
margin-top: 30rpx;
|
||
width: 100%;
|
||
// width: 160px;
|
||
height: 53px;
|
||
border-radius: 8px;
|
||
background: #f6f6f6;
|
||
// border: 1px solid #000;
|
||
display: flex;
|
||
padding-left: 20rpx;
|
||
align-items: center;
|
||
|
||
.info-im {
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
|
||
.h {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-left: 30rpx;
|
||
|
||
.y {
|
||
font-family: PingFangSC;
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.y1 {
|
||
font-family: PingFangSC;
|
||
font-size: 11px;
|
||
font-weight: normal;
|
||
color: #666666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 44%;
|
||
|
||
// margin-left: 50rpx;
|
||
.rights-item {
|
||
// margin: 30rpx 0 0 34rpx;
|
||
margin-top: 30rpx;
|
||
width: 100%;
|
||
// width: 160px;
|
||
height: 53px;
|
||
border-radius: 8px;
|
||
background: #f6f6f6;
|
||
// border: 1px solid #000;
|
||
display: flex;
|
||
padding-left: 20rpx;
|
||
align-items: center;
|
||
|
||
.info-im {
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
|
||
.h {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-left: 30rpx;
|
||
|
||
.y {
|
||
font-family: PingFangSC;
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.y1 {
|
||
font-family: PingFangSC;
|
||
font-size: 11px;
|
||
font-weight: normal;
|
||
color: #666666;
|
||
}
|
||
}
|
||
}
|
||
|
||
.rights-item2 {
|
||
// margin: 30rpx 0 0 34rpx;
|
||
margin-top: 30rpx;
|
||
width: 100%;
|
||
padding: 20rpx 0 20rpx 20rpx;
|
||
// width: 160px;
|
||
// height: 53px;
|
||
border-radius: 8px;
|
||
background: #f6f6f6;
|
||
// border: 1px solid #000;
|
||
display: flex;
|
||
// padding-left: 20rpx;
|
||
align-items: center;
|
||
|
||
.info-im {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
}
|
||
|
||
.h {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-left: 30rpx;
|
||
|
||
.y {
|
||
font-family: PingFangSC;
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.y2 {
|
||
color: #666666;
|
||
font-family: PingFangSC;
|
||
font-size: 22rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.info-and {
|
||
width: 100%;
|
||
height: 850px;
|
||
}
|
||
|
||
.elastic-layer {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
z-index: 999;
|
||
}
|
||
|
||
.additional-bottom {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 9999;
|
||
background-color: #fff;
|
||
border-radius: 32rpx 32rpx 0 0;
|
||
overflow: hidden;
|
||
|
||
.close-icon {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
position: absolute;
|
||
right: 23rpx;
|
||
top: 31rpx;
|
||
}
|
||
|
||
.recharge-method {
|
||
display: flex;
|
||
flex-direction: column;
|
||
// justify-content: center;
|
||
align-items: center;
|
||
background: #fff;
|
||
// margin-bottom: 30rpx;
|
||
border-radius: 30rpx;
|
||
width: 100%;
|
||
|
||
.zf {
|
||
font-family: PingFang SC;
|
||
font-size: 18px;
|
||
color: #3e4055;
|
||
margin: 40rpx 0 50rpx 0;
|
||
}
|
||
|
||
.wechat {
|
||
width: 92%;
|
||
height: 58px;
|
||
/* 自动布局 */
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 12px;
|
||
border-radius: 8px;
|
||
box-sizing: border-box;
|
||
// border: 1px solid #ececec;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.select {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.w {
|
||
width: 68rpx;
|
||
height: 68rpx;
|
||
}
|
||
|
||
.x {
|
||
font-family: PingFangSC;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
line-height: 16px;
|
||
letter-spacing: normal;
|
||
color: #3d3d3d;
|
||
display: flex;
|
||
margin-left: 24rpx;
|
||
}
|
||
}
|
||
|
||
.not-selected {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
}
|
||
}
|
||
|
||
.payment {
|
||
border-radius: 100px;
|
||
width: 92%;
|
||
height: 48px;
|
||
margin: 0 auto 50rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #FF19A0;
|
||
|
||
.Z {
|
||
font-family: PingFang SC;
|
||
font-size: 16px;
|
||
font-weight: normal;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |