973 lines
25 KiB
Vue
973 lines
25 KiB
Vue
<template>
|
|
<view class="flex-col page">
|
|
<view class="flex-row items-center section_2">
|
|
<text class="font text">购物车</text>
|
|
<view class="flex-row items-center flex-1 section_3 ml-17">
|
|
<image class="shrink-0 image"
|
|
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FANvSsQui-sousuo.png" />
|
|
<input confirm-type="search" @confirm="gotoSearch" v-model="searchText" class="section_1 ml-4" placeholder="搜索购物车商品" />
|
|
</view>
|
|
<text class="font text_2 ml-17" @click="changeState">{{ stateText.topBtn }}</text>
|
|
</view>
|
|
<view class="flex-col section_5">
|
|
<view class="flex-row justify-between self-stretch group">
|
|
<view @click="changeType(1)">
|
|
<text class="font_2 text_3">商品类</text>
|
|
<view class="flex-col justify-start items-center" v-if="isShowLine" style="border: 1.88rpx solid #E79EA1; width: 90rpx; margin-top: 10rpx;"></view>
|
|
</view>
|
|
<view @click="changeType(2)">
|
|
<text class="font_2 text_4">服务类</text>
|
|
<view class="flex-col justify-start items-center" v-if="!isShowLine" style="border: 1.88rpx solid #E79EA1; width: 90rpx; margin-top: 10rpx;"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex-col list">
|
|
<checkbox-group @change="checkBoxChange">
|
|
<view class="flex-col list-item mt-14" v-for="(item, index) in products" :key="index">
|
|
<!-- 实体类商品 -->
|
|
<view class="flex-row section_10" v-if="current == 1">
|
|
<!-- 多选框 -->
|
|
<checkbox class="shrink-0 self-center image_3 round red" :value="index" :checked="item.checked" />
|
|
<view class="flex-row items-end flex-1 self-center ml-22">
|
|
<image class="shrink-0 image_2" :src="item.cartGoodVO.goodImg.split(';')[0]"
|
|
@click="jump_product(item.goodId)" :style="{ pointerEvents: isLoading ? 'none' : 'auto' }"/>
|
|
<view class="flex-col flex-1 group_2">
|
|
<view class="flex-row justify-center group_3" :style="{ pointerEvents: isLoading ? 'none' : 'auto' }">
|
|
<text class="font_3 text_5" @click="jump_product(item.goodId)">{{ item.cartGoodVO.name }}</text>
|
|
<text class="font_3" @click="jump_product(item.goodId)">【{{ item.cartGoodVO.type }}】</text>
|
|
</view>
|
|
<view class="flex-row justify-between items-center mt-46">
|
|
<view class="flex-row items-end" :style="{ pointerEvents: isLoading ? 'none' : 'auto' }">
|
|
<text class="font_4 text_6" @click="jump_product(item.goodId)">￥{{ item.cartGoodVO.price }}</text>
|
|
</view>
|
|
<!-- 减少数量 -->
|
|
<image class="image_4"
|
|
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FVBaGfZxE-short.png"
|
|
@click="decrease(index , item.checked)" />
|
|
</view>
|
|
</view>
|
|
<view class="flex-row shrink-0 group_4">
|
|
<view class="flex-col justify-start items-center text-wrapper"><text
|
|
class="font_6">{{ item.quantity }}</text></view>
|
|
<!-- 添加数量 -->
|
|
<image class="image_5 ml-2"
|
|
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FLsCJgzgf-add.png"
|
|
@click="increase(index , item.checked)" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 服务类商品 -->
|
|
<view class="flex-col list-item_2 mt-14" v-if="current == 2">
|
|
<view class="flex-row">
|
|
<!-- 按钮 -->
|
|
<checkbox class="shrink-0 self-center image_3 round red" :value="index" :checked="item.checked" />
|
|
<image class="shrink-0 image_7" :src="item.cartExperienceGoodVO.goodImg.split(';')[0]" />
|
|
<view class="flex_1">
|
|
<view class="flex-col flex-1 group_5">
|
|
<text class="font_7">{{ item.cartExperienceGoodVO.name }}</text>
|
|
<view class="flex-row justify-between items-center section_7 mt-14">
|
|
<view class="flex-col items-start">
|
|
<text class="font_8">{{ item.timeSlot }}</text>
|
|
<text class="font_8 text_8 mt-6">预约日期：{{ item.reservationDate }}</text>
|
|
</view>
|
|
<!-- 下拉菜单 -->
|
|
<!-- <image class="image_9"
|
|
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FYAAYkKzi-pulldown.png" /> -->
|
|
</view>
|
|
</view>
|
|
<view class="flex-row justify-end items-center group_6">
|
|
<view class="flex-row items-center">
|
|
<text class="font_9 text_9">￥{{ item.cartExperienceGoodVO.price }}</text>
|
|
</view>
|
|
<view class="flex-row ml-83">
|
|
<image class="image_10"
|
|
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FVBaGfZxE-short.png"
|
|
@click="decrease(index , item.checked)"
|
|
/>
|
|
<view class="flex-col justify-start items-center text-wrapper_2 ml-2"><text
|
|
class="font_6">{{ item.quantity }}</text>
|
|
</view>
|
|
<image class="image_11 ml-2"
|
|
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FLsCJgzgf-add.png"
|
|
@click="increase(index , item.checked)" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</checkbox-group>
|
|
</view>
|
|
<view class="flex-row justify-between items-center section_8">
|
|
<view class="flex-row items-center">
|
|
<checkbox class="shrink-0 image_8 round red" :checked="allCheck" @tap="allChecked" />
|
|
<!-- <image
|
|
class="shrink-0 image_8 image_13"
|
|
src="https://ide.code.fun/api/image?token=6779d8c1797f850011f55ea9&name=3f81d5886d1e216ce7cc53687e0c5499.png"
|
|
/> -->
|
|
<text class="font_2 text_11 ml-9">全选</text>
|
|
</view>
|
|
<view class="flex-row items-center">
|
|
<text class="font_2 text_12">合计：{{ totalPrice }}元</text>
|
|
<view class="flex-col justify-start items-center shrink-0 text-wrapper_3 ml-7">
|
|
<text class="font_4 text_13" @click="editOrSettle" :style="{ pointerEvents: isLoading ? 'none' : 'auto' }">{{ stateText.bottomBtn }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 遮罩层 -->
|
|
<view v-if="isShow" class="overlay"></view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, toRaw } from 'vue'
|
|
import { onShow, onLoad } from "@dcloudio/uni-app";
|
|
import { baseUrl, testUrl, suiUrl } from '../../../api/request';
|
|
import * as math from 'mathjs'
|
|
const products = ref([])
|
|
const current = ref(1) //用于判断是实体类商品还是服务类商品
|
|
const allCheck = ref(false) //全选
|
|
const checkedData = ref([]) //选择的暂存保存数组
|
|
const totalPrice = ref(0) //总金额
|
|
const searchText = ref('')
|
|
const stateText = ref({
|
|
topBtn: '编辑',
|
|
bottomBtn: '去结算'
|
|
})
|
|
const updateArr = ref([]) //商品更新数组(防抖)
|
|
//服务类商品
|
|
const serviceProduct = ref([])
|
|
const errorArr = ref([]) //检验错误的实体类商品id数组
|
|
onShow(() => {
|
|
getProductCart() //获取购物车所有商品信息
|
|
totalPrice.value = 0 //重置
|
|
})
|
|
onLoad(() => {
|
|
getProductCart() //再获取一次
|
|
getFonts()
|
|
// console.log(current.value)
|
|
})
|
|
//获取实体类商品信息
|
|
const getEntityPro = async () => {
|
|
const res = await uni.request({
|
|
url: baseUrl + '/cart/list',
|
|
method: 'POST',
|
|
header: {
|
|
'cookie': wx.getStorageSync('cookie')
|
|
}
|
|
})
|
|
console.log('res--->', res.data);
|
|
if (res.data.code === 1) {
|
|
products.value = res.data.data
|
|
products.value.forEach((item) => {
|
|
item.checked = false
|
|
})
|
|
}
|
|
console.log('products-->', products.value);
|
|
}
|
|
//小程序刷新根据用户id获取购物车信息
|
|
const getProductCart = async () => {
|
|
allCheck.value = false //若全选，取消
|
|
if (current.value === 1) {
|
|
getEntityPro() //获取实体类商品
|
|
} else {
|
|
getServiceCart() //获取服务类商品
|
|
}
|
|
}
|
|
const deleteProduct = async (idArr) => { //删除实体类商品
|
|
const res = await uni.request({
|
|
url: baseUrl + '/cart/delete',
|
|
method: 'POST',
|
|
data: {
|
|
idList : idArr
|
|
},
|
|
header: {
|
|
'cookie': wx.getStorageSync('cookie')
|
|
}
|
|
})
|
|
console.log(res.data);
|
|
if (res.data.code === 1) {
|
|
uni.reLaunch({
|
|
url: '/pages/Shopping-cart/productmain/testproductmain'
|
|
})
|
|
totalPrice.value = 0
|
|
}
|
|
}
|
|
const getServiceCart = async () => {
|
|
const res = await uni.request({
|
|
url: baseUrl + '/cartExperience/list',
|
|
method: 'POST',
|
|
header: {
|
|
'cookie': wx.getStorageSync('cookie')
|
|
}
|
|
})
|
|
console.log('服务类商品--->', res);
|
|
if (res.data.code === 1) {
|
|
products.value = res.data.data
|
|
products.value.forEach((item)=>{ //添加多选框状态
|
|
item.checked = false
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: "服务错误"
|
|
})
|
|
}
|
|
}
|
|
const isShowLine = ref(true)
|
|
//更改实体商品和服务类方法
|
|
const changeType = async (num) => {
|
|
if (num == 1) {
|
|
if (!isShowLine.value) {
|
|
isShowLine.value = true
|
|
}
|
|
} else {
|
|
if (isShowLine.value) {
|
|
isShowLine.value = false
|
|
}
|
|
}
|
|
current.value = num;
|
|
console.log('current状态--->',current.value);
|
|
getProductCart()
|
|
totalPrice.value = 0
|
|
}
|
|
// //更改下划线
|
|
// const getTextStyle = (num) => ({
|
|
// 'border-bottom': current.value === num ? '2px solid orange' : '2px solid #ffffff'
|
|
// });
|
|
//复选框绑定方法
|
|
const checkBoxChange = (event) => {
|
|
console.log('服务类打印出来是---->', event); //选中后是数组下标
|
|
//如果选中的checkbox的value的数组长度和后端传过来的数组长度相等则为全选状态 allCheck为true
|
|
// console.log('length---->', event.detail.value.length);
|
|
// console.log('product--->',products.value);
|
|
if (event.detail.value.length == products.value.length) {
|
|
allCheck.value = true
|
|
} else {
|
|
allCheck.value = false
|
|
}
|
|
checkedData.value = [] //每次都要重置一下
|
|
totalPrice.value = 0;
|
|
let count = 0; //用于记录checkedData不为null的个数
|
|
console.log('event--->', event.detail);
|
|
if (event.detail.value.length) {
|
|
products.value[parseInt(event.detail.value)].checked = true; //勾选
|
|
} else {
|
|
products.value.forEach((item) => {
|
|
item.checked = false
|
|
})
|
|
}
|
|
//计算一下总金额
|
|
for (let key in event.detail.value) {
|
|
let temp = parseInt(event.detail.value[parseInt(key)]) //相当于商品数组下标
|
|
if (current.value === 1) { //当current = 1 时，计算实体类的
|
|
computed(products.value[temp].cartGoodVO.price, products.value[temp].quantity)
|
|
} else {
|
|
computed(products.value[temp].cartExperienceGoodVO.price, products.value[temp].quantity)
|
|
}
|
|
}
|
|
event.detail.value.forEach((item) => {
|
|
products.value[parseInt(item)].checked = true
|
|
})
|
|
//然后假如checkboxGroup传过来的 detail.value中有某个id则把这些元素的checked属性置为true(选中状态)
|
|
products.value.forEach((x) => {
|
|
event.detail.value.forEach((y) => {
|
|
if (x.value == y) {
|
|
x.checked = true
|
|
}
|
|
})
|
|
})
|
|
event.detail.value.forEach((item) => { //将选中的商品信息赋值给checkedData
|
|
console.log('products.value[parseInt(item)].goodId', products.value[parseInt(item)].goodId);
|
|
if (products.value[parseInt(item)] !== null) {
|
|
checkedData.value.push(products.value[parseInt(item)].id)
|
|
// console.log(products.value[parseInt(item)].goodId);
|
|
count += 1
|
|
}
|
|
})
|
|
console.log('checkedData--->', checkedData.value);
|
|
//将选中的数组保存在某一个ref中
|
|
// checkedData.value = event.detail.value
|
|
// console.log('checkedData--->',checkedData.value);
|
|
}
|
|
//全选方法
|
|
const allChecked = () => {
|
|
allCheck.value = !allCheck.value
|
|
totalPrice.value = 0
|
|
if (allCheck.value == true) {
|
|
if (current.value === 1) {
|
|
products.value.forEach((item) => {
|
|
item.checked = true //将全部选项选上
|
|
computed(item.cartGoodVO.price, item.quantity)
|
|
})
|
|
} else {
|
|
products.value.forEach((item) => {
|
|
item.checked = true //将全部选项选上
|
|
computed(item.cartExperienceGoodVO.price, item.quantity)
|
|
})
|
|
}
|
|
checkedData.value = products.value.map((item) => (item.id))
|
|
console.log('checkedData--->', checkedData.value);
|
|
} else {
|
|
products.value.forEach((item) => {
|
|
item.checked = false //将全部都取消选择
|
|
})
|
|
}
|
|
}
|
|
//减少商品(适用于服务类和商品类)
|
|
const decrease = (index, item) => { //item用于监测是否选中
|
|
// console.log('decrease,index-->', index);
|
|
// console.log('decrease,item-->', item);
|
|
if (products.value[index].quantity > 1) {
|
|
products.value[index].quantity -= 1
|
|
if (item && products.value[index].quantity >= 1 && current.value === 1) {
|
|
computed(-products.value[index].cartGoodVO.price, 1)
|
|
} else if(item && products.value[index].quantity >= 1 && current.value === 2) {
|
|
computed(-products.value[index].cartExperienceGoodVO.price, 1)
|
|
}
|
|
cartFd() //购物车防抖
|
|
}
|
|
}
|
|
//增加商品的方法(适用于服务类和商品类)
|
|
const increase = (index, item) => { //item用于监测是否选中,obj是商品对象,index是商品数组下标
|
|
// console.log('increase,index-->', index);
|
|
// console.log('increase,item-->', item);
|
|
if ( current.value === 1) { //和减少商品数量情况不一样
|
|
if (products.value[index].quantity <= products.value[index].cartGoodVO.inventory) {
|
|
if(item) {
|
|
computed(products.value[index].cartGoodVO.price, 1)
|
|
}
|
|
products.value[index].quantity += 1
|
|
cartFd() //增加商品的时候启动购物车防抖
|
|
}
|
|
} else if (current.value === 2) {
|
|
if(products.value[index].quantity < products.value[index].restNumber) {
|
|
products.value[index].quantity += 1
|
|
if(item) {
|
|
computed(products.value[index].cartExperienceGoodVO.price, 1)
|
|
}
|
|
cartFd()
|
|
}
|
|
}
|
|
}
|
|
//计算方法
|
|
const computed = (price, quantity) => {
|
|
totalPrice.value = math.round(totalPrice.value + price * quantity, 2)
|
|
return totalPrice.value
|
|
}
|
|
const jump_product = (gid) => {
|
|
uni.navigateTo({
|
|
url: '../../../pages/store-home/ProductDetails/ProductDetails?gid=' + JSON.stringify(gid)
|
|
})
|
|
}
|
|
const editOrSettle = async () => { //去结算或者删除状态方法
|
|
// console.log('要传到订单详情页面的checked--->',checkedData.value);
|
|
if (stateText.value.bottomBtn === '去结算') {
|
|
if (checkedData.value.length === 0) { //在没有勾选的时候禁止发请求
|
|
return;
|
|
}
|
|
// 实体类商品的购买前检查请求
|
|
if (current.value === 1) {
|
|
const res = await uni.request({
|
|
url: baseUrl + '/cart/submit/error',
|
|
method: 'POST',
|
|
header: {
|
|
'cookie': wx.getStorageSync('cookie')
|
|
}
|
|
})
|
|
res.data.data.length > 0 ? errorArr.value = res.data.data : errorArr.value = null
|
|
console.log('错误商品id',res.data);
|
|
console.log('错误商品数组---->',errorArr.value);
|
|
if (res.data.data.length != 0) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '购物车商品发生改变，点击移除变化商品',
|
|
showCancel: false,
|
|
success: (e) => {
|
|
if (e.confirm) {
|
|
deleteProduct(errorArr.value)
|
|
uni.reLaunch({
|
|
url: '/pages/Shopping-cart/productmain/testproductmain'
|
|
})
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: '/pages/order/product-waitpay/product-waitpay?cartInfo=' + JSON.stringify(checkedData.value)
|
|
})
|
|
checkedData.value.splice(0, checkedData.value.length)
|
|
}
|
|
} else if (current.value === 2) { //服务类商品购买前检查请求
|
|
const res = await uni.request({
|
|
url: baseUrl + '/cartExperience/submit/error',
|
|
method: 'POST',
|
|
header: {
|
|
'cookie': wx.getStorageSync('cookie')
|
|
}
|
|
})
|
|
res.data.data.length > 0 ? errorArr.value = res.data.data : errorArr.value = null
|
|
console.log(res.data);
|
|
if (res.data.data.length != 0) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '购物车商品发生改变，点击移除变化商品',
|
|
showCancel: false,
|
|
success: (e) => {
|
|
if (e.confirm) {
|
|
// getProductCart() //重新获取购物车信息
|
|
deleteServicePro(errorArr.value)
|
|
uni.reLaunch({
|
|
url: '/pages/Shopping-cart/productmain/testproductmain'
|
|
})
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: '/pages/order/serviceWaitPay/serviceWaitPay?cartInfo=' + JSON.stringify(checkedData.value)
|
|
})
|
|
checkedData.value.splice(0, checkedData.value.length)
|
|
}
|
|
}
|
|
|
|
} else {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '是否删除商品?',
|
|
success: (e) => {
|
|
if (e.confirm) {
|
|
deleteProduct(checkedData.value)
|
|
} else if (e.cancel)
|
|
return;
|
|
}
|
|
})
|
|
}
|
|
}
|
|
const changeState = () => { //修改购物车订单方法
|
|
if (stateText.value.topBtn === '编辑') {
|
|
stateText.value.topBtn = '完成',
|
|
stateText.value.bottomBtn = '删除'
|
|
} else {
|
|
stateText.value.topBtn = '编辑',
|
|
stateText.value.bottomBtn = '去结算'
|
|
}
|
|
}
|
|
const productSearch = () => { //搜索框方法
|
|
var arr = []
|
|
products.value.forEach((item) => arr.push(item))
|
|
console.log(123);
|
|
}
|
|
const deleteServicePro = async ( idArr )=>{
|
|
const res = await uni.request({
|
|
url: baseUrl + '/cartExperience/delete',
|
|
method: 'POST',
|
|
header: {
|
|
'cookie': wx.getStorageSync('cookie')
|
|
},
|
|
data: {
|
|
idList: idArr
|
|
}
|
|
})
|
|
if (res.data.code === 1) {
|
|
uni.reLaunch({
|
|
url: '/pages/Shopping-cart/productmain/testproductmain'
|
|
})
|
|
totalPrice.value = 0
|
|
}
|
|
}
|
|
const getFonts = () => { //导入字体
|
|
uni.loadFontFace({
|
|
family: 'FangZhengFonts',
|
|
source: `url("https://carbon2.obs.cn-north-4.myhuaweicloud.com/fonts/FangZhengFonts.TTF")`,
|
|
success: (res) => {
|
|
console.log('success', res);
|
|
},
|
|
fail: (err) => {
|
|
console.log('err', err);
|
|
}
|
|
})
|
|
}
|
|
//防抖相关变量
|
|
let debounceTimer = null;
|
|
let wxPayTimer = null;
|
|
let loading = false;
|
|
let isLoading = ref(false)
|
|
let isShow = ref(false)
|
|
const cartFd = () => { //购物车防抖
|
|
clearTimeout(debounceTimer)
|
|
showLoading()
|
|
debounceTimer = setTimeout(async () => {
|
|
await updateCart()
|
|
hideLoading()
|
|
}, 1000)
|
|
}
|
|
function showLoading() { //加载弹窗
|
|
if (!loading) {
|
|
wx.showLoading({
|
|
title: '加载中...',
|
|
});
|
|
loading = true;
|
|
isLoading.value = true
|
|
}
|
|
}
|
|
function hideLoading() { //关闭弹窗
|
|
if (loading) {
|
|
wx.hideLoading();
|
|
loading = false;
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
const updateCart = async () => { //更新购物车商品信息
|
|
if(current.value === 1) {
|
|
// console.log('product--->',products.value);
|
|
updateArr.value.splice(0,updateArr.value.length)
|
|
products.value.forEach((item)=> {
|
|
updateArr.value.push({
|
|
id: item.id,
|
|
quantity: item.quantity
|
|
})
|
|
})
|
|
const res = await uni.request({
|
|
url: baseUrl + '/cart/update',
|
|
method: 'POST',
|
|
header: {
|
|
'cookie': wx.getStorageSync('cookie')
|
|
},
|
|
data: toRaw(updateArr.value)
|
|
})
|
|
if(res.data.code === 1) {
|
|
console.log('更新成功');
|
|
}
|
|
} else if(current.value === 2) {
|
|
updateArr.value.splice(0,updateArr.value.length)
|
|
products.value.forEach((item)=> {
|
|
updateArr.value.push({
|
|
id: item.id,
|
|
quantity: item.quantity,
|
|
reservationDate: item.reservationDate,
|
|
timeSlot: item.timeSlot
|
|
})
|
|
})
|
|
console.log('防抖数组--->',updateArr.value);
|
|
const res = await uni.request({
|
|
url: baseUrl + '/cartExperience/update',
|
|
method: 'POST',
|
|
header: {
|
|
'cookie': wx.getStorageSync('cookie')
|
|
},
|
|
data: toRaw(updateArr.value)
|
|
})
|
|
if(res.data.code === 1) {
|
|
console.log('更新成功');
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const gotoSearch = async () => {
|
|
if (searchText.value === '') {
|
|
await getProductCart()
|
|
return ;
|
|
}
|
|
if (current.value === 1) {
|
|
products.value = products.value.filter(item => item.cartGoodVO.name.includes(searchText.value))
|
|
} else {
|
|
products.value = products.value.filter(item => item.cartExperienceGoodVO.name.includes(searchText.value))
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.4); /* 半透明黑色背景 */
|
|
z-index: 999;
|
|
}
|
|
.ml-17 {
|
|
margin-left: 31.88rpx;
|
|
}
|
|
|
|
.ml-83 {
|
|
margin-left: 155.63rpx;
|
|
}
|
|
|
|
.ml-9 {
|
|
margin-left: 16.88rpx;
|
|
}
|
|
|
|
.ml-7 {
|
|
margin-left: 13.13rpx;
|
|
}
|
|
|
|
.page {
|
|
background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FQfLHXSAU-feiyigongfangbeijin.png');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
// height: 100%;
|
|
height: 100vh;
|
|
}
|
|
|
|
.section_2 {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
padding: 28.13rpx 30.69rpx 18.75rpx;
|
|
background-color: #fbdedf;
|
|
z-index: 99;
|
|
}
|
|
|
|
.font {
|
|
font-size: 30rpx;
|
|
font-family: FangZhengFonts;
|
|
line-height: 27.77rpx;
|
|
color: #c35c5d;
|
|
}
|
|
|
|
.text {
|
|
line-height: 28.24rpx;
|
|
}
|
|
|
|
.section_3 {
|
|
padding: 0 15rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 9.38rpx;
|
|
height: 56.25rpx;
|
|
}
|
|
|
|
.image {
|
|
width: 54.38rpx;
|
|
height: 52.5rpx;
|
|
}
|
|
|
|
.section_1 {
|
|
flex: 1 1 0;
|
|
margin-right: 7.5rpx;
|
|
}
|
|
|
|
.text_2 {
|
|
margin-right: 4.46rpx;
|
|
}
|
|
|
|
.section_5 {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
top: 102rpx;
|
|
padding: 0 121.88rpx;
|
|
background-color: #ffffff;
|
|
z-index: 99;
|
|
}
|
|
|
|
.group {
|
|
padding: 20.06rpx 4.33rpx 0 4.33rpx;
|
|
z-index: 1;
|
|
}
|
|
|
|
.font_2 {
|
|
font-size: 30rpx;
|
|
font-family: FangZhengFonts;
|
|
line-height: 27.77rpx;
|
|
color: #323232;
|
|
}
|
|
|
|
.text_3 {
|
|
line-height: 27.9rpx;
|
|
}
|
|
|
|
.text_4 {
|
|
line-height: 28.71rpx;
|
|
}
|
|
|
|
.section_6 {
|
|
background-color: #fb8b05;
|
|
width: 112.5rpx;
|
|
height: 5.63rpx;
|
|
}
|
|
|
|
.list {
|
|
margin: 192rpx 24rpx 120rpx 24rpx;
|
|
}
|
|
|
|
.list-item:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.mt-14 {
|
|
margin-top: 9rpx;
|
|
}
|
|
|
|
.section_10 {
|
|
padding: 38.1rpx 31.52rpx 30.07rpx 27.31rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 18.75rpx;
|
|
}
|
|
|
|
.image_3 {
|
|
transform: scale(0.7);
|
|
width: 37.5rpx;
|
|
height: 37.5rpx;
|
|
}
|
|
|
|
.image_2 {
|
|
// margin-bottom: 8.7rpx;
|
|
border-radius: 9.38rpx;
|
|
width: 127.5rpx;
|
|
height: 170.00rpx;
|
|
}
|
|
|
|
.group_2 {
|
|
margin-left: 23.31rpx;
|
|
margin-top: 2.33rpx;
|
|
}
|
|
|
|
.group_3 {
|
|
padding: 0 9.49rpx;
|
|
}
|
|
|
|
.font_3 {
|
|
font-size: 26.25rpx;
|
|
font-family: FangZhengFonts;
|
|
line-height: 25.01rpx;
|
|
color: #323232;
|
|
}
|
|
|
|
.text_5 {
|
|
line-height: 25.54rpx;
|
|
}
|
|
|
|
.font_4 {
|
|
font-size: 33.75rpx;
|
|
font-family: FangZhengFonts;
|
|
line-height: 22.07rpx;
|
|
color: #e79ea1;
|
|
}
|
|
|
|
.text_6 {
|
|
margin-left: 24.19rpx;
|
|
margin-bottom: 7.78rpx;
|
|
line-height: 22.54rpx;
|
|
}
|
|
|
|
.image_6 {
|
|
margin-left: -76.69rpx;
|
|
width: 30rpx;
|
|
height: 28.13rpx;
|
|
}
|
|
|
|
.font_5 {
|
|
font-size: 26.25rpx;
|
|
font-family: FangZhengFonts;
|
|
line-height: 18.73rpx;
|
|
color: #e79ea1;
|
|
}
|
|
|
|
.text_7 {
|
|
margin-left: 61.44rpx;
|
|
margin-bottom: 6.15rpx;
|
|
line-height: 17.53rpx;
|
|
}
|
|
|
|
.image_4 {
|
|
border-radius: 9.38rpx 0rpx 0rpx 9.38rpx;
|
|
width: 45.21rpx;
|
|
height: 48.13rpx;
|
|
}
|
|
|
|
.group_4 {
|
|
margin-left: 3.77rpx;
|
|
}
|
|
|
|
.text-wrapper {
|
|
padding: 14.74rpx 0 14.66rpx;
|
|
background-color: #fbdedf;
|
|
width: 58.41rpx;
|
|
height: 48.13rpx;
|
|
}
|
|
|
|
.font_6 {
|
|
font-size: 26.25rpx;
|
|
font-family: Open Sans;
|
|
line-height: 18.73rpx;
|
|
color: #323232;
|
|
}
|
|
|
|
.image_5 {
|
|
border-radius: 0rpx 9.38rpx 9.38rpx 0rpx;
|
|
width: 45.21rpx;
|
|
height: 48.13rpx;
|
|
}
|
|
|
|
.list-item_2 {
|
|
padding: 22.01rpx 18.84rpx 33.75rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 18.75rpx;
|
|
}
|
|
|
|
.image_8 {
|
|
transform: scale(0.7);
|
|
width: 37.5rpx;
|
|
height: 37.5rpx;
|
|
}
|
|
|
|
.image_7 {
|
|
border-radius: 9.38rpx;
|
|
margin-left: 39.79rpx;
|
|
margin-top: 2.36rpx;
|
|
width: 127.5rpx;
|
|
height: 170rpx;
|
|
}
|
|
|
|
.group_5 {
|
|
margin: 0 13.99rpx 7.5rpx 23.25rpx;
|
|
}
|
|
|
|
.font_7 {
|
|
font-size: 26.25rpx;
|
|
font-family: FangZhengFonts;
|
|
line-height: 31.88rpx;
|
|
color: #323233;
|
|
}
|
|
|
|
.section_7 {
|
|
margin-right: 8.63rpx;
|
|
padding: 11.1rpx 10.14rpx 14.25rpx;
|
|
background-color: #fbdedf;
|
|
border-radius: 9.38rpx;
|
|
}
|
|
|
|
.font_8 {
|
|
font-size: 22.5rpx;
|
|
font-family: FangZhengFonts;
|
|
line-height: 22.07rpx;
|
|
color: #6b6e72;
|
|
}
|
|
|
|
.text_8 {
|
|
line-height: 20.83rpx;
|
|
}
|
|
|
|
.image_9 {
|
|
margin-right: 5.06rpx;
|
|
width: 22.5rpx;
|
|
height: 22.5rpx;
|
|
}
|
|
|
|
.group_6 {
|
|
padding: 0 22.61rpx;
|
|
}
|
|
|
|
.font_9 {
|
|
font-size: 33.75rpx;
|
|
font-family: FangZhengFonts;
|
|
line-height: 25.01rpx;
|
|
font-weight: 600;
|
|
color: #e79ea1;
|
|
}
|
|
|
|
.text_9 {
|
|
// margin-left: 25.14rpx;
|
|
line-height: 24.88rpx;
|
|
margin-right: 56rpx;
|
|
}
|
|
|
|
.image_12 {
|
|
margin-left: -90.77rpx;
|
|
width: 30rpx;
|
|
height: 26.25rpx;
|
|
}
|
|
|
|
.font_10 {
|
|
font-size: 26.25rpx;
|
|
font-family: FangZhengFonts;
|
|
line-height: 18.73rpx;
|
|
font-weight: 600;
|
|
color: #e79ea1;
|
|
}
|
|
|
|
.text_10 {
|
|
margin-left: 61.61rpx;
|
|
line-height: 19.29rpx;
|
|
}
|
|
|
|
.image_10 {
|
|
border-radius: 9.38rpx 0rpx 0rpx 9.38rpx;
|
|
width: 45.24rpx;
|
|
height: 45rpx;
|
|
}
|
|
|
|
.text-wrapper_2 {
|
|
padding: 12.39rpx 0 13.88rpx;
|
|
background-color: #fbdedf;
|
|
width: 58.42rpx;
|
|
height: 45rpx;
|
|
}
|
|
|
|
.image_11 {
|
|
border-radius: 0rpx 9.38rpx 9.38rpx 0rpx;
|
|
width: 45.24rpx;
|
|
height: 45rpx;
|
|
}
|
|
|
|
.section_8 {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 20.63rpx 20.63rpx 15rpx;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.image_13 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.text_11 {
|
|
line-height: 27.3rpx;
|
|
}
|
|
|
|
.text_12 {
|
|
color: #000000;
|
|
}
|
|
|
|
.text-wrapper_3 {
|
|
padding: 20.93rpx 0 25.24rpx;
|
|
background-color: #e79ea1;
|
|
border-radius: 75rpx;
|
|
width: 219.38rpx;
|
|
height: 76.88rpx;
|
|
}
|
|
|
|
.text_13 {
|
|
color: #ffffff;
|
|
line-height: 30.71rpx;
|
|
}
|
|
|
|
.flex_1 {
|
|
// display: flex
|
|
width: 480rpx;
|
|
}
|
|
|
|
@import url(../../../common/css/global.css);
|
|
</style> |