1842 lines
55 KiB
Vue
1842 lines
55 KiB
Vue
<template>
|
||
<view class="main">
|
||
<div class="mainTop" :style="{ paddingTop: menu.top + 'px' }">
|
||
<view class="headerTop" :style="{ height: menu.height + 'px' }">
|
||
<view class="backArrowBox">
|
||
<image class="backArrow" src="/static/images/home/backArrowblack.svg" @click="handleBackHome" />
|
||
<view class="line"></view>
|
||
<!-- <image class="img" src="/static/images/home/export.svg" @click="handleShowExportBox" /> -->
|
||
<image class="img" style="width: 40rpx;height: 40rpx;margin-left: 8rpx;"
|
||
src="https://eshangtech.com/cyy_DIB/backHomeICon.png" @click="handleShowExportBox" />
|
||
</view>
|
||
|
||
|
||
<view class="pageName">{{
|
||
bigPageType === "UnionMall" ? "工会之家" : "购物车"
|
||
}}</view>
|
||
<view class="backArrowBox" style="border: none;"></view>
|
||
</view>
|
||
|
||
<!-- 地址选择区域骨架 -->
|
||
<div v-if="!showContent" style="
|
||
width: 100%;
|
||
height: 60px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
padding-top: 20px;
|
||
box-sizing: border-box;
|
||
">
|
||
<div class="topLeft">
|
||
<view style="display: flex; align-items: center">
|
||
<view class="skeleton skeleton-location-icon-small" style="width: 16px; height: 16px; margin-right: 4px;">
|
||
</view>
|
||
<view class="skeleton skeleton-address-text" style="width: 200px; height: 20px;"></view>
|
||
</view>
|
||
<view style="margin-top: 8rpx">
|
||
<view class="skeleton skeleton-phone-text" style="width: 150px; height: 18px;"></view>
|
||
</view>
|
||
</div>
|
||
<div class="topRight">
|
||
<view class="skeleton skeleton-edit-text" style="width: 60px; height: 20px;"></view>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="showContent" style="
|
||
width: 100%;
|
||
height: 60px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
padding-top: 20px;
|
||
box-sizing: border-box;
|
||
">
|
||
<div class="topLeft" @click="handleShowAddress">
|
||
<view style="display: flex; align-items: center">
|
||
<image class="topIcon" src="/static/images/home/fixed.svg" />
|
||
<text class="name">{{
|
||
showAddressObj.DOORPLATE || "点击添加地址"
|
||
}}</text>
|
||
</view>
|
||
<view class="phone" style="margin-top: 8rpx" v-if="showAddressObj.MEMBERADDRESS_ID">
|
||
<text style="margin-right: 8rpx">{{
|
||
showAddressObj.USER_NAME || ""
|
||
}}</text>
|
||
{{ showAddressObj.MOBILEPHONE || "" }}
|
||
</view>
|
||
<!-- <picker :value="siteValue" :range="siteList" range-key="ServerpartShop_Address" @change="handleSiteChange">
|
||
<view style="display: flex;align-items: center">
|
||
<image class="topIcon" src="/static/images/home/fixed.svg" />
|
||
<text class="name">{{ siteName }}</text>
|
||
</view>
|
||
</picker> -->
|
||
</div>
|
||
<div v-if="pageType === 'normal'" class="topRight" @click="handleChangePageType">
|
||
<image class="editIcon" src="/static/images/home/edit.svg" />
|
||
<text class="editText">编辑</text>
|
||
</div>
|
||
<div v-else class="topRight" @click="handleChangePageType">
|
||
<text class="editText">完成</text>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 购物车页面骨架屏 -->
|
||
<view class="shop-car-skeleton" v-if="!showContent">
|
||
<!-- 商品列表骨架 -->
|
||
<view class="skeleton-product-list">
|
||
<view class="skeleton-product-item" v-for="index in 3" :key="index">
|
||
<view class="skeleton-product-left">
|
||
<view class="skeleton skeleton-checkbox"></view>
|
||
<view class="skeleton skeleton-product-image"></view>
|
||
<view class="skeleton skeleton-total-price"></view>
|
||
</view>
|
||
<view class="skeleton-product-right">
|
||
<view class="skeleton skeleton-product-title"></view>
|
||
<view class="skeleton-product-actions">
|
||
<view class="skeleton-price-info">
|
||
<view class="skeleton skeleton-price"></view>
|
||
<view class="skeleton skeleton-unit"></view>
|
||
</view>
|
||
<view class="skeleton skeleton-quantity-control"></view>
|
||
</view>
|
||
<view class="skeleton skeleton-remark-input"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部操作栏骨架 -->
|
||
<view class="skeleton-bottom">
|
||
<view class="skeleton-bottom-left">
|
||
<view class="skeleton skeleton-select-all"></view>
|
||
</view>
|
||
<view class="skeleton-bottom-right">
|
||
<view class="skeleton skeleton-total-text"></view>
|
||
<view class="skeleton skeleton-total-amount"></view>
|
||
<view class="skeleton skeleton-submit-button"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<scroll-view class="shopList" v-if="showContent" scroll-y :style="{
|
||
height: `calc(100vh - ${50 + safeHeight + 60 + menu.top + 32 + 80 + 16
|
||
}px)`,
|
||
}">
|
||
<div class="shopBox">
|
||
<div class="shopItem" v-for="(item, index) in shopList" :key="index">
|
||
<!-- :style="{ height: (item.rows - 1) * 28 + 210 + 'rpx' }" -->
|
||
|
||
<!-- @touchmove="moveTouch" -->
|
||
<!-- (item.rows - 1) * 28 + 210 + 'rpx' -->
|
||
<view class="shopUp" :style="{ height: 120 + 'px' }">
|
||
<div class="detail" :style="selectIndex === index
|
||
? selectStyle
|
||
: (item.rows - 1) * 28 + 210 + 'rpx'
|
||
" @touchstart="startTouch($event, index)" @touchmove="moveTouch" @touchend="endTouch" :key="index">
|
||
<div class="detailLeft">
|
||
<view style="display: flex">
|
||
<!-- color="#1890FF" -->
|
||
<!-- #E43C3D -->
|
||
<radio v-if="pageType === 'normal'" :checked="item.select"
|
||
:color="bigPageType === 'UnionMall' ? '#4BCB7E' : '#4BCB7E'" @click="handleChangeSelect(item)">
|
||
</radio>
|
||
<radio v-else :checked="item.selectDelete"
|
||
:color="bigPageType === 'UnionMall' ? '#4BCB7E' : '#4BCB7E'" @click="handleChangeDelete(item)">
|
||
</radio>
|
||
<!-- 因为购物车是根据缓存里面的数据来的 缓存的数据 可能是通过 详情加入到购物车 也有从列表直接加入到购物车 而两个地方的数据源 不一样 所以区图片的字段也需要修改 -->
|
||
<image class="leftIcon" :src="item.IMAGE_PATH ? item.IMAGE_PATH.split(',') && item.IMAGE_PATH.split(',').length > 1 ? item.IMAGE_PATH.split(',')[0] : item.IMAGE_PATH :
|
||
item.List && item.List.length > 0 ? item.List[0].IMAGE_URL :
|
||
item.DEFAULT_IMG ? item.DEFAULT_IMG :
|
||
'/static/images/home/defultImg.png'
|
||
" />
|
||
</view>
|
||
<view :class="item.showDiscount ? 'simPriceBox haveDiscount' : 'simPriceBox'">
|
||
<text class="sumPriceUnit">￥</text>{{
|
||
$utils.handleFormatNumber(
|
||
item.COMMODITY_MEMBERPRICE * item.count
|
||
)
|
||
}}
|
||
</view>
|
||
|
||
<view class="discountedPrice" v-if="item.showDiscount">
|
||
<text class="sumPriceUnit">￥</text>{{
|
||
preciseRound(
|
||
item.discountedPrice * item.count
|
||
)
|
||
}}
|
||
</view>
|
||
|
||
</div>
|
||
<div class="detailRight">
|
||
<div class="title">
|
||
<div class="pingnuo" v-if="item.DATAFORMAT === 2">
|
||
<div class="pingnuoItem">品诺</div>
|
||
</div>
|
||
{{ item.COMMODITY_RULE ? `（${item.COMMODITY_RULE}）` : "" }}
|
||
{{ item.COMMODITY_NAME }}
|
||
</div>
|
||
<div class="otherBox">
|
||
<div class="priceBox">
|
||
<view>
|
||
<text class="priceIcon">￥</text>
|
||
<text class="priceNumber">{{
|
||
item.COMMODITY_MEMBERPRICE
|
||
}}</text>
|
||
<text class="priceUnit">/{{ item.COMMODITY_UNIT }}</text>
|
||
</view>
|
||
</div>
|
||
<div class="cartcontrol">
|
||
<div class="subtract" @click="decreaseGoodToCartFn($event, item)" :id="'decrease_' +
|
||
item.SELLERCOMMODITY_ID +
|
||
'_' +
|
||
item.SELLERCOMMODITYTYPE_ID
|
||
">
|
||
<image class="img" src="/static/images/home/subtract.svg"></image>
|
||
</div>
|
||
<!-- -->
|
||
<!-- confirm-type="search" @confirm="getList"-->
|
||
<input class="cart-count" confirm-type="done" type="digit" :maxlength="7"
|
||
style="background: #fff; text-align: center" placeholder="0" @blur="haveFocus($event, item)"
|
||
@focus="haveFocus($event, item)" v-model="item.count" />
|
||
<!-- @change="changInput($event, item)"-->
|
||
<div class="subtract" @click="touchOnGoods($event, item)" :id="'add_' +
|
||
item.SELLERCOMMODITY_ID +
|
||
'_' +
|
||
item.SELLERCOMMODITYTYPE_ID
|
||
">
|
||
<image class="img" src="/static/images/home/addIcon.svg"></image>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="descBox">{{item.SALEDETAIL_DESC}}</div>-->
|
||
<div class="descBox">
|
||
<input class="desc" v-model="item.SALEDETAIL_DESC" placeholder="请填写商品备注" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="shopDown" @click="handleDeleteItem(item)">删除</div>
|
||
</view>
|
||
</div>
|
||
</div>
|
||
</scroll-view>
|
||
|
||
<div class="bottom" v-if="showContent" :style="{ bottom: `${50 + safeHeight}px` }">
|
||
<div class="bottomLeft" v-if="pageType === 'normal'">
|
||
<radio :checked="isAllSelect" :color="bigPageType === 'UnionMall' ? '#4BCB7E' : '#4BCB7E'"
|
||
@click="handleAllSelect" />全选
|
||
</div>
|
||
<div class="bottomLeft" v-else>
|
||
<radio :checked="isAllDelete" :color="bigPageType === 'UnionMall' ? '#4BCB7E' : '#4BCB7E'"
|
||
@click="handleAllDelete" />全选
|
||
</div>
|
||
<div class="bottomRight" v-if="pageType === 'normal'">
|
||
<view style="display: flex;flex-direction: column;align-items: flex-end;">
|
||
<view class="submitTextBox">
|
||
<text class="sum">合计</text>
|
||
<text class="sumPrice">￥</text>
|
||
<text class="sunNumber">{{ totalDiscount || totalPay }}</text>
|
||
<!-- <text class="sunNumber">{{ totalPay }}</text> -->
|
||
</view>
|
||
<view class="discountText" v-if="totalDiscount">已减￥{{ discountAmount }}</view>
|
||
</view>
|
||
|
||
<div class="submitBtn" @click="goPayFn"
|
||
:style="{ background: bigPageType === 'UnionMall' ? '#4BCB7E' : '#4BCB7E' }">立即下单</div>
|
||
</div>
|
||
<div v-else class="deleteBtn"
|
||
:style="{ background: bigPageType === 'UnionMall' ? '#E7F8EE' : '#E7F8EE', color: bigPageType === 'UnionMall' ? '#4BCB7E' : '#4BCB7E' }"
|
||
@click="handleDelete">删除</div>
|
||
</div>
|
||
|
||
<uni-popup ref="addressPopup" :safe-area="false">
|
||
<view class="addressPopupBox">
|
||
<view class="addressPopupTitle">选择收货地址</view>
|
||
<view class="addressList">
|
||
<view class="addressItem" v-for="(item, index) in addressList" :key="index"
|
||
@click="handleClickAddressItem(item)">
|
||
<view class="addressItemTop">
|
||
<view class="itemTopLeft">
|
||
<radio :checked="item.MEMBERADDRESS_ID === selectAddressId" color="#4BCB7E"
|
||
@click="handleChangeAddress(item.MEMBERADDRESS_ID)" :disabled="!item.MEMBERADDRESS_CODE"></radio>
|
||
<text class="addressText">{{ item.ADDRESS || "" }}{{ item.DOORPLATE || "" }}</text>
|
||
</view>
|
||
<view class="itemTopRight" @click="checkOrEdit(item.MEMBERADDRESS_ID)">
|
||
<img class="pickerImg" src="https://eshangtech.com/ShopICO/ahyd-mall/editIcon.svg" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="addressItemBottom">
|
||
<text class="bigName" style="margin-right: 8rpx">{{
|
||
item.USER_NAME || ""
|
||
}}</text>
|
||
<text class="name" style="margin-right: 8rpx">{{
|
||
item.USER_SEX_TEXT || ""
|
||
}}</text>
|
||
<text class="phone">{{ item.MOBILEPHONE || "" }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<navigator url="/pages/myAddress/newAdd/index" class="btn">新增收货地址</navigator>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<shop-tabbar :page="'/pages/shopMallPage/shopCar/index'" :pageType="bigPageType" :shopCarLength="shopCarListCount"
|
||
:zIndex="popupShow ? 98 : 99" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from "vuex";
|
||
import shopTabbar from "../../../components/shopTabbar.vue";
|
||
import { useSkeletonControl } from '../../../utils/skeletonManager.js'
|
||
export default {
|
||
components: { shopTabbar },
|
||
data() {
|
||
return {
|
||
showContent: false, // 是否显示内容（控制骨架屏切换）
|
||
isFirstLoad: true, // 是否是首次进入页面
|
||
skeletonControl: null, // 骨架屏控制器
|
||
menu: {}, // 手机基本信息
|
||
pageType: "normal", // 是否启用购物车管理功能 normal 时为正常
|
||
shopList: [], // 购物车数据
|
||
shopCarListCount: 0, // 购物车商品数量
|
||
isAllDelete: false, // 删除的全选
|
||
startX: 0, // 左滑出现删除需要的参数
|
||
selectIndex: undefined, // 左滑出现删除需要的参数
|
||
disX: 0, //
|
||
selectStyle: "", // 左滑出现删除需要的参数
|
||
delBtnWidth: 72, // 左滑出现删除需要的参数
|
||
isAllSelect: false, // 是否选中全选
|
||
totalPay: 0, // 根据选中的商品需要支付的钱
|
||
totalDiscount: 0,// 打折之后要付的钱
|
||
discountAmount: 0,// 实际减了的钱
|
||
inputMaxLength: -1,
|
||
pageOut: false, // 是不是从立即下单离开页面的
|
||
storeId: "",
|
||
systemInfo: {},
|
||
bigPageType: "", // 页面类型 是不是进来查工会之家的
|
||
userInfo: {}, // 最新的用户数据
|
||
addressList: [], // 地址列表
|
||
showAddressObj: {}, // 当前选中的地址
|
||
popupShow: false, // 悬浮框显示
|
||
selectAddressId: 0, // 选中的地址id
|
||
goChangeAddress: false, // 跳转去修改地址的地方
|
||
safeHeight: 0,
|
||
};
|
||
},
|
||
watch: {
|
||
// 深度监听数组变化
|
||
shopList: {
|
||
handler(newVal, oldVal) {
|
||
if (newVal && newVal.length > 0) {
|
||
let count = 0;
|
||
newVal.forEach((item) => {
|
||
count += Number(item.count);
|
||
});
|
||
this.shopCarListCount = count;
|
||
} else {
|
||
this.shopCarListCount = 0;
|
||
}
|
||
},
|
||
deep: true,
|
||
},
|
||
},
|
||
computed: {
|
||
...mapGetters({
|
||
user: "user",
|
||
}),
|
||
},
|
||
async onLoad(query) {
|
||
// 初始化骨架屏控制
|
||
this.skeletonControl = useSkeletonControl('/pages/shopMallPage/shopCar/index', query.pageType)
|
||
this.showContent = this.skeletonControl.showContent
|
||
this.isFirstLoad = this.skeletonControl.showSkeleton
|
||
|
||
|
||
let height = uni.getStorageSync("safeHeight");
|
||
this.safeHeight = Number(height);
|
||
|
||
let systemInfo = uni.getSystemInfoSync();
|
||
this.menu = uni.getMenuButtonBoundingClientRect();
|
||
this.systemInfo = systemInfo;
|
||
|
||
if (query.pageType) {
|
||
this.bigPageType = query.pageType;
|
||
}
|
||
|
||
// 获取最新的用户余额
|
||
if (this.bigPageType === "UnionMall") {
|
||
await this.handleGetUserBalance();
|
||
}
|
||
|
||
// 获得用户地址数据
|
||
this.handleGetAddressList();
|
||
|
||
this.handleGetNowShopCarList();
|
||
// this.$utils.addUserBehaviorNew();
|
||
// 如果是首次访问，延迟显示内容并标记已访问
|
||
if (this.skeletonControl && this.skeletonControl.showSkeleton) {
|
||
setTimeout(async () => {
|
||
if (this.skeletonControl) {
|
||
await this.skeletonControl.showContentAfterLoading(0)
|
||
this.showContent = true;
|
||
this.isFirstLoad = false;
|
||
}
|
||
}, 800);
|
||
} else {
|
||
// 非首次访问直接显示内容
|
||
this.showContent = true;
|
||
this.isFirstLoad = false;
|
||
}
|
||
|
||
this.$utils.addUserBehaviorNew({
|
||
behaviorRecordDesc: this.bigPageType ? '进入工会商城购物车' : "进入精选商城购物车"
|
||
});
|
||
},
|
||
onShow() {
|
||
// onShow 中不控制骨架屏，骨架屏完全由 onLoad 中控制
|
||
// 判断当前的购物车里面是否有东西
|
||
let shopCarList = [];
|
||
if (this.bigPageType === "UnionMall") {
|
||
shopCarList = this.$store.state.unionMyShopCar;
|
||
} else {
|
||
shopCarList = this.$store.state.myShopCar;
|
||
}
|
||
this.shopList = shopCarList;
|
||
let count = 0;
|
||
if (shopCarList && shopCarList.length > 0) {
|
||
shopCarList.forEach((item) => {
|
||
count += Number(item.count);
|
||
});
|
||
}
|
||
this.shopCarListCount = Number(count);
|
||
this.handleSum();
|
||
|
||
this.handleGetAddressList();
|
||
},
|
||
onHide() {
|
||
if (this.shopList && this.shopList.length > 0) {
|
||
let list = JSON.parse(JSON.stringify(this.shopList));
|
||
list.forEach((item) => {
|
||
item.cartItemAoumt =
|
||
Number(item.COMMODITY_MEMBERPRICE) * Number(item.count);
|
||
});
|
||
|
||
// list
|
||
if (this.bigPageType === "UnionMall") {
|
||
this.$store.commit("unionMyShopCar", list);
|
||
} else {
|
||
this.$store.commit("myShopCar", list);
|
||
}
|
||
} else {
|
||
if (this.bigPageType === "UnionMall") {
|
||
this.$store.commit("unionMyShopCar", []);
|
||
} else {
|
||
this.$store.commit("myShopCar", []);
|
||
}
|
||
}
|
||
},
|
||
onUnload() {
|
||
// 页面卸载时重置首次加载标记，确保下次进入仍显示骨架屏
|
||
this.isFirstLoad = true;
|
||
},
|
||
methods: {
|
||
// 显示展开功能
|
||
handleShowExportBox(e) {
|
||
uni.switchTab({
|
||
url: "/pages/index/index"
|
||
})
|
||
// this.showExportFun = !this.showExportFun;
|
||
// this.showExportObj = e.detail
|
||
},
|
||
// 点击地址
|
||
handleClickAddressItem(obj) {
|
||
if (!obj.MEMBERADDRESS_CODE) {
|
||
uni.showToast({
|
||
title: "请完善地址！",
|
||
icon: "none",
|
||
});
|
||
}
|
||
},
|
||
// 显示选择地址的悬浮框
|
||
handleShowAddress() {
|
||
this.$refs.addressPopup.open("bottom");
|
||
this.popupShow = true;
|
||
},
|
||
// 切换选中的地址
|
||
handleChangeAddress(id) {
|
||
this.addressList.forEach((item) => {
|
||
if (item.MEMBERADDRESS_ID === id) {
|
||
this.showAddressObj = item;
|
||
this.selectAddressId = item.MEMBERADDRESS_ID;
|
||
}
|
||
});
|
||
this.$forceUpdate();
|
||
this.$refs.addressPopup.close();
|
||
this.popupShow = false;
|
||
},
|
||
// 编辑地址
|
||
checkOrEdit(id) {
|
||
this.goChangeAddress = true;
|
||
uni.navigateTo({ url: "/pages/myAddress/newAdd/index?id=" + id });
|
||
},
|
||
// 选择地址列表
|
||
async handleGetAddressList() {
|
||
const data = await this.$api.getCoop({ action_type: "GetAddressList" });
|
||
let list = data.Data.List;
|
||
let haveMEMBERADDRESSCODEList = [];
|
||
let defaultAddress = {};
|
||
if (list && list.length > 0) {
|
||
list.forEach((item) => {
|
||
if (item.ISDEFAULT === 1 && item.MEMBERADDRESS_CODE) {
|
||
defaultAddress = item;
|
||
}
|
||
if (item.MEMBERADDRESS_CODE) {
|
||
haveMEMBERADDRESSCODEList.push(item);
|
||
}
|
||
});
|
||
}
|
||
if (!defaultAddress.MEMBERADDRESS_ID) {
|
||
if (haveMEMBERADDRESSCODEList && haveMEMBERADDRESSCODEList.length > 0) {
|
||
defaultAddress = haveMEMBERADDRESSCODEList[0];
|
||
}
|
||
}
|
||
if (defaultAddress) {
|
||
this.showAddressObj = defaultAddress;
|
||
this.selectAddressId = defaultAddress.MEMBERADDRESS_ID;
|
||
} else {
|
||
this.showAddressObj = {};
|
||
this.selectAddressId = 0;
|
||
}
|
||
this.addressList = list;
|
||
this.$forceUpdate();
|
||
},
|
||
// 获取最新的用户余额
|
||
async handleGetUserBalance() {
|
||
uni.showLoading({
|
||
title: "获取用户余额...",
|
||
});
|
||
const data = await this.$api.getCoop({
|
||
action_type: "GetMembershipInfo",
|
||
WechatUserId: this.user.WechatUserId,
|
||
});
|
||
this.userInfo = data.Data;
|
||
uni.hideLoading();
|
||
},
|
||
// 判断当前购物车是否有内容 有内容的话 处理
|
||
handleGetNowShopCarList() {
|
||
let shopCarList = [];
|
||
if (this.bigPageType === "UnionMall") {
|
||
shopCarList = this.$store.state.unionMyShopCar;
|
||
} else {
|
||
shopCarList = this.$store.state.myShopCar;
|
||
}
|
||
console.log('shopCarListshopCarList', JSON.parse(JSON.stringify(shopCarList)));
|
||
|
||
if (shopCarList && shopCarList.length > 0) {
|
||
// 判断一下 当前购物车中 活动模块的商品有多少个被选中
|
||
let haveSum = 0
|
||
|
||
shopCarList.forEach((item) => {
|
||
let goodNum = Number(item.count);
|
||
item.rows =
|
||
item.COMMODITY_NAME && item.COMMODITY_NAME.length / 14 > 1
|
||
? Math.ceil(item.COMMODITY_NAME.length / 14)
|
||
: 1;
|
||
if (item.select === true && item.COMMODITY_NATURE === 7000) {
|
||
haveSum += 1 * goodNum
|
||
}
|
||
});
|
||
|
||
if (haveSum >= 2) {
|
||
// 如果 活动模块 的商品大于等于2个 那么 就是打95折 做好打折标记 和 打折完的钱
|
||
shopCarList.forEach((item) => {
|
||
if (item.select === true && item.COMMODITY_NATURE === 7000) {
|
||
item.showDiscount = true
|
||
item.discountedPrice = this.preciseRound(0.95 * item.COMMODITY_MEMBERPRICE)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
this.shopList = shopCarList;
|
||
|
||
// 商品处理了 之后 再算钱
|
||
this.handleSum();
|
||
},
|
||
preciseRound(num, decimals = 2) {
|
||
if (isNaN(num) || num === null) return 0;
|
||
const factor = Math.pow(10, decimals);
|
||
return Math.round((num + Number.EPSILON) * factor) / factor;
|
||
},
|
||
// 改变当前的编辑状态
|
||
handleChangePageType() {
|
||
if (this.pageType === "normal") {
|
||
this.pageType = "edit";
|
||
this.isAllDelete = false;
|
||
} else {
|
||
this.pageType = "normal";
|
||
}
|
||
},
|
||
// 左滑删除的接触到屏幕
|
||
startTouch(e, index) {
|
||
if (e.touches.length === 1) {
|
||
this.startX = e.touches[0].clientX;
|
||
this.selectIndex = index;
|
||
// this.selectIndex = Number(e.currentTarget.dataset.eventid.split('_')[1])
|
||
}
|
||
},
|
||
// 左滑删除的接触到屏幕并且不松手移动
|
||
moveTouch(e) {
|
||
let _this = this;
|
||
if (e.touches.length === 1) {
|
||
let moveX = e.touches[0].clientX;
|
||
let disX = _this.startX - moveX;
|
||
let delBtnWidth = _this.delBtnWidth;
|
||
let txtStyle = "";
|
||
if (disX === 0 || disX < 0) {
|
||
txtStyle = "left:0px";
|
||
} else if (disX > 0 && disX >= delBtnWidth / 3) {
|
||
txtStyle = "left:-" + disX + "px";
|
||
if (disX >= (delBtnWidth / 10) * 9) {
|
||
txtStyle = "left:-" + delBtnWidth + "px";
|
||
}
|
||
}
|
||
let index = e.currentTarget.dataset.index;
|
||
this.disX = disX;
|
||
this.selectIndex = index;
|
||
this.selectStyle = txtStyle;
|
||
}
|
||
},
|
||
// 左滑的离开屏幕
|
||
endTouch(e) {
|
||
if (this.disX < this.delBtnWidth) {
|
||
this.selectStyle = "right:0px";
|
||
}
|
||
},
|
||
// 拿到合计金额
|
||
handleSum() {
|
||
this.totalPay = 0;
|
||
// 判断一下 当前购物车中 活动模块的商品有多少个被选中
|
||
let haveSum = 0
|
||
// 判断一下是不是全部都已经被选择乐
|
||
let allSelect = true
|
||
this.shopList.forEach((u) => {
|
||
let goodNum = Number(u.count);
|
||
if (u.select === true) {
|
||
let goodNum = Number(u.count);
|
||
this.totalPay += Number(u.COMMODITY_MEMBERPRICE) * goodNum;
|
||
this.totalPay = Number(this.totalPay.toFixed(2));
|
||
|
||
// // 添加参数 判断一下
|
||
if (u.COMMODITY_NATURE === 7000) {
|
||
haveSum += 1 * goodNum
|
||
}
|
||
} else {
|
||
allSelect = false
|
||
}
|
||
});
|
||
|
||
if (allSelect) {
|
||
this.isAllSelect = true
|
||
}
|
||
|
||
if (haveSum >= 2) {
|
||
// 如果 活动模块 的商品大于等于2个 那么 就是打95折 做好打折标记 和 打折完的钱
|
||
// 注意！！！！！！！！！！！！！！！！！！！
|
||
// 只是 活动模块 的商品 打95折 其他商品不做处理的
|
||
let discountedProducts = 0
|
||
let noDiscountedProducts = 0
|
||
|
||
this.shopList.forEach((item) => {
|
||
let goodNum = Number(item.count);
|
||
if (item.COMMODITY_NATURE === 7000 && item.select) {
|
||
item.showDiscount = true
|
||
item.discountedPrice = this.preciseRound(0.95 * item.COMMODITY_MEMBERPRICE)
|
||
discountedProducts += item.COMMODITY_MEMBERPRICE * goodNum
|
||
} else if (item.select) {
|
||
noDiscountedProducts += item.COMMODITY_MEMBERPRICE * goodNum
|
||
}
|
||
})
|
||
|
||
this.totalDiscount = (this.preciseRound(0.95 * discountedProducts) + noDiscountedProducts).toFixed(2)
|
||
this.discountAmount = (discountedProducts - this.preciseRound(0.95 * discountedProducts)).toFixed(2)
|
||
|
||
} else {
|
||
this.shopList.forEach((item) => {
|
||
if (item.COMMODITY_NATURE === 7000) {
|
||
item.showDiscount = false
|
||
item.discountedPrice = 0
|
||
}
|
||
})
|
||
this.totalDiscount = 0
|
||
this.discountAmount = 0
|
||
}
|
||
},
|
||
// 修改商品前面的单选框选中效果
|
||
handleChangeSelect(item) {
|
||
if (item.select) {
|
||
item.select = false;
|
||
} else {
|
||
item.select = true;
|
||
}
|
||
let isSelect = 0;
|
||
this.shopList.forEach((item) => {
|
||
if (item.select) {
|
||
isSelect += 1;
|
||
}
|
||
});
|
||
this.isAllSelect = isSelect === this.shopList.length;
|
||
this.handleSum();
|
||
this.$forceUpdate();
|
||
},
|
||
// 取消选中商品的方法
|
||
handleChangeDelete(item) {
|
||
if (item.selectDelete) {
|
||
item.selectDelete = false;
|
||
} else {
|
||
item.selectDelete = true;
|
||
}
|
||
let isSelect = 0;
|
||
this.shopList.forEach((item) => {
|
||
if (item.selectDelete) {
|
||
isSelect += 1;
|
||
}
|
||
});
|
||
this.isAllDelete = isSelect === this.shopList.length;
|
||
this.$forceUpdate();
|
||
},
|
||
// 商品数量减少
|
||
decreaseGoodToCartFn(e, item) {
|
||
if (item.count > 0) {
|
||
// item.count -= 1;
|
||
if (item.count - 1 <= 0) {
|
||
let _this = this;
|
||
uni.showModal({
|
||
title: "确定移除该商品？",
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
item.count -= 1;
|
||
// 这里重复了先这样
|
||
if (item.count === 0) {
|
||
let list = [];
|
||
_this.shopList.forEach((i) => {
|
||
// 判断有没有多规格
|
||
if (item.RTCOMMODITY_MULTI_ID) {
|
||
if (i.RTCOMMODITY_MULTI_ID !== item.RTCOMMODITY_MULTI_ID) {
|
||
list.push(i);
|
||
}
|
||
} else {
|
||
if (i.COMMODITY_ID !== item.COMMODITY_ID) {
|
||
list.push(i);
|
||
}
|
||
}
|
||
});
|
||
_this.shopList = list;
|
||
}
|
||
_this.handleSum();
|
||
if (_this.bigPageType === "UnionMall") {
|
||
_this.$store.commit("unionMyShopCar", _this.shopList);
|
||
} else {
|
||
_this.$store.commit("myShopCar", _this.shopList);
|
||
}
|
||
_this.$forceUpdate();
|
||
}
|
||
},
|
||
});
|
||
} else {
|
||
item.count -= 1;
|
||
}
|
||
}
|
||
if (item.count === 0) {
|
||
let list = [];
|
||
this.shopList.forEach((i) => {
|
||
if (item.RTCOMMODITY_MULTI_ID) {
|
||
if (i.RTCOMMODITY_MULTI_ID !== item.RTCOMMODITY_MULTI_ID) {
|
||
list.push(i);
|
||
}
|
||
} else {
|
||
if (i.COMMODITY_ID !== item.COMMODITY_ID) {
|
||
list.push(i);
|
||
}
|
||
}
|
||
});
|
||
this.shopList = list;
|
||
}
|
||
this.handleSum();
|
||
|
||
|
||
if (this.bigPageType === "UnionMall") {
|
||
this.$store.commit("unionMyShopCar", this.shopList);
|
||
} else {
|
||
this.$store.commit("myShopCar", this.shopList);
|
||
}
|
||
this.$forceUpdate();
|
||
},
|
||
// 输入框里面的数量
|
||
haveFocus(e, item) {
|
||
let value = e.detail.value;
|
||
let number = 0;
|
||
if (value.indexOf(".") === -1) {
|
||
number = Number(value);
|
||
} else {
|
||
let bigNumber = value.split(".")[0];
|
||
number = Number(bigNumber);
|
||
}
|
||
let oldCount = item.count;
|
||
|
||
if (number < 0) {
|
||
item.count = 1;
|
||
return;
|
||
}
|
||
|
||
if (number === 0) {
|
||
let _this = this;
|
||
uni.showModal({
|
||
title: "确定移除该商品？",
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
item.count = number;
|
||
let list = [];
|
||
_this.shopList.forEach((subItem) => {
|
||
if (
|
||
subItem.COMMODITY_CODE !== item.COMMODITY_CODE &&
|
||
item.count > 0
|
||
) {
|
||
list.push(subItem);
|
||
}
|
||
});
|
||
_this.shopList = list;
|
||
if (_this.bigPageType === "UnionMall") {
|
||
_this.$store.commit("unionMyShopCar", _this.shopList);
|
||
} else {
|
||
_this.$store.commit("myShopCar", _this.shopList);
|
||
}
|
||
_this.handleSum();
|
||
_this.$forceUpdate();
|
||
} else if (res.cancel) {
|
||
item.count = Number(oldCount);
|
||
}
|
||
},
|
||
});
|
||
} else {
|
||
item.count = number;
|
||
}
|
||
if (this.bigPageType === "UnionMall") {
|
||
this.$store.commit("unionMyShopCar", this.shopList);
|
||
} else {
|
||
this.$store.commit("myShopCar", this.shopList);
|
||
}
|
||
this.handleSum();
|
||
this.$forceUpdate();
|
||
},
|
||
// 数量增加
|
||
touchOnGoods(e, item) {
|
||
item.count += 1;
|
||
this.handleSum();
|
||
if (this.bigPageType === "UnionMall") {
|
||
this.$store.commit("unionMyShopCar", this.shopList);
|
||
} else {
|
||
this.$store.commit("myShopCar", this.shopList);
|
||
}
|
||
},
|
||
// 左滑出现的删除
|
||
handleDeleteItem(obj) {
|
||
let list = [];
|
||
this.shopList.forEach((item) => {
|
||
if (item.COMMODITY_ID !== obj.COMMODITY_ID) {
|
||
list.push(item);
|
||
} else {
|
||
if (obj.RTCOMMODITY_MULTI_ID) {
|
||
// 规格都一样 说明确实是同一个了 可以删除
|
||
if (item.RTCOMMODITY_MULTI_ID === obj.RTCOMMODITY_MULTI_ID) {
|
||
|
||
} else {
|
||
list.push(item);
|
||
}
|
||
} else {
|
||
// list.push(item);
|
||
}
|
||
}
|
||
});
|
||
|
||
this.shopList = list;
|
||
if (this.bigPageType === "UnionMall") {
|
||
this.$store.commit("unionMyShopCar", this.shopList);
|
||
} else {
|
||
this.$store.commit("myShopCar", this.shopList);
|
||
}
|
||
this.selectStyle = "";
|
||
this.handleSum();
|
||
},
|
||
// 全选
|
||
handleAllSelect() {
|
||
this.isAllSelect = !this.isAllSelect;
|
||
if (this.isAllSelect) {
|
||
this.shopList.forEach((item) => {
|
||
item.select = true;
|
||
});
|
||
} else {
|
||
this.shopList.forEach((item) => {
|
||
item.select = false;
|
||
});
|
||
}
|
||
this.handleSum();
|
||
},
|
||
// 删除的全选
|
||
handleAllDelete() {
|
||
this.isAllDelete = !this.isAllDelete;
|
||
if (this.isAllDelete) {
|
||
this.shopList.forEach((item) => {
|
||
item.selectDelete = true;
|
||
});
|
||
} else {
|
||
this.shopList.forEach((item) => {
|
||
item.selectDelete = false;
|
||
});
|
||
}
|
||
this.$forceUpdate();
|
||
},
|
||
// 多选的删除
|
||
handleDelete() {
|
||
let list = [];
|
||
this.shopList.forEach((item) => {
|
||
if (!item.selectDelete) {
|
||
list.push(item);
|
||
}
|
||
});
|
||
this.shopList = list;
|
||
this.handleSum();
|
||
if (this.bigPageType === "UnionMall") {
|
||
this.$store.commit("unionMyShopCar", this.shopList);
|
||
} else {
|
||
this.$store.commit("myShopCar", this.shopList);
|
||
}
|
||
this.pageType = "normal";
|
||
this.$forceUpdate();
|
||
},
|
||
// 立即下单
|
||
goPayFn() {
|
||
// 先检查选中的商品列表里面有没有预售商品
|
||
let isPresale = false;
|
||
if (this.shopList && this.shopList.length > 0) {
|
||
this.shopList.forEach((item) => {
|
||
if (item.USERDEFINEDTYPE_PID === 1355 && item.select) {
|
||
if (
|
||
new Date().getTime() < new Date(item.UPPER_DATE).getTime() ||
|
||
new Date().getTime() > new Date(item.OFF_DATE).getTime()
|
||
) {
|
||
isPresale = true;
|
||
// UPPER_DATE
|
||
// OFF_DATE
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
if (isPresale) {
|
||
uni.showToast({
|
||
title: "选中的商品中有未售商品，无法下单！",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
|
||
|
||
|
||
|
||
// 判断是不是在工会之家下单 下单的话 就要查询用户余额 余额有的 才能下单
|
||
if (this.bigPageType === "UnionMall") {
|
||
|
||
// 还要判断有没有工会商城权限
|
||
if (!(this.userInfo && this.userInfo.ACCOUNT_BALANCE > 0)) {
|
||
uni.showToast({
|
||
title: "您未被纳入工会会员采购名录，如有疑问，请联系工会咨询",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
|
||
|
||
|
||
if (!(this.userInfo.ACCOUNT_BALANCE > 0)) {
|
||
uni.showToast({
|
||
title: "工会之家余额为0，无法下单！",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
} else if (this.totalPay > Number(this.userInfo.ACCOUNT_BALANCE)) {
|
||
// uni.showToast({
|
||
// title: "账户余额不足！",
|
||
// icon: "none",
|
||
// });
|
||
// return;
|
||
}
|
||
}
|
||
|
||
// 判断当前勾选的商品 中 DATAFORMAT 是不是单一的 若有 2 有 1 则不能去下单页面 都1 都2 可以去
|
||
if (
|
||
this.shopList &&
|
||
this.shopList.length > 0 &&
|
||
this.bigPageType !== "UnionMall"
|
||
) {
|
||
let DATAFORMATTypeList = [];
|
||
|
||
this.shopList.forEach((item) => {
|
||
if (item.select) {
|
||
if (DATAFORMATTypeList.indexOf(item.DATAFORMAT) === -1) {
|
||
DATAFORMATTypeList.push(item.DATAFORMAT);
|
||
}
|
||
}
|
||
});
|
||
|
||
if (DATAFORMATTypeList && DATAFORMATTypeList.length > 1) {
|
||
uni.showToast({
|
||
title: "订单中含有品诺商城商品，请去除后下单！",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
if (this.shopList.length > 0) {
|
||
this.pageOut = true;
|
||
let orderList = [];
|
||
let noSelectList = [];
|
||
this.shopList.forEach((item) => {
|
||
item.COMMODITY_INTRO = "";
|
||
// 老东西 不理解 但是尊重
|
||
if (item.select === true) {
|
||
item.ORDER_COUNT = item.count;
|
||
item.AVERAGE_PRICE = item.COMMODITY_MEMBERPRICE;
|
||
item.cartItemAoumt = Number(
|
||
(item.AVERAGE_PRICE * item.ORDER_COUNT).toFixed(2)
|
||
);
|
||
item.ORDER_AMOUNT = Number(
|
||
(item.AVERAGE_PRICE * item.ORDER_COUNT).toFixed(2)
|
||
);
|
||
orderList.push(item);
|
||
} else {
|
||
item.ORDER_COUNT = item.count;
|
||
item.AVERAGE_PRICE = item.COMMODITY_MEMBERPRICE;
|
||
item.cartItemAoumt = Number(
|
||
(item.AVERAGE_PRICE * item.ORDER_COUNT).toFixed(2)
|
||
);
|
||
item.ORDER_AMOUNT = Number(
|
||
(item.AVERAGE_PRICE * item.ORDER_COUNT).toFixed(2)
|
||
);
|
||
noSelectList.push(item);
|
||
}
|
||
});
|
||
// this.$store.commit('shopcartOrder', orderList)
|
||
// 购物车改了后有些id不一样了 统一一下
|
||
if (orderList && orderList.length > 0) {
|
||
orderList.forEach((item) => {
|
||
let [big, small] = item.COMMODITY_MEMBERPRICE.toString().split(".");
|
||
item.COMMODITY_INYEGER = big;
|
||
item.COMMODITY_DECIMAL = small;
|
||
// item.COMMODITY_ID = item.SELLERCOMMODITY_ID
|
||
});
|
||
}
|
||
let id = Number(
|
||
Math.random().toString().substr(3, 5) + Date.now()
|
||
).toString(36);
|
||
|
||
if (orderList.length > 0) {
|
||
uni.navigateTo({
|
||
url: `/pages/shopPages/settlement/index?pageType=shopCar&shopCarList=${encodeURIComponent(JSON.stringify(
|
||
orderList
|
||
))}&pageType=${this.bigPageType}&addressId=${this.selectAddressId}`,
|
||
});
|
||
} else {
|
||
uni.showToast({ title: "购物车内无勾选商品", icon: "none" });
|
||
}
|
||
}
|
||
},
|
||
// 返回首页
|
||
handleBackHome() {
|
||
if (this.bigPageType === "UnionMall") {
|
||
uni.redirectTo({
|
||
url: `/pages/shopMallPage/index/index?pageType=${this.bigPageType}`,
|
||
});
|
||
} else {
|
||
uni.redirectTo({
|
||
url: "/pages/shopMallPage/index/index",
|
||
});
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.main {
|
||
width: 100%;
|
||
height: 100vh;
|
||
background: #f2f4f5;
|
||
|
||
.mainTop {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 14px 16px;
|
||
background: #ffffff;
|
||
|
||
.headerTop {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.backArrowBox {
|
||
width: 120rpx;
|
||
background: rgba(255, 255, 255, 0.6);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 32rpx;
|
||
border: 1px solid #d9d5cc;
|
||
padding: 4rpx 16rpx;
|
||
|
||
.backArrow {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
.line {
|
||
width: 2rpx;
|
||
height: 32rpx;
|
||
background: #bbbbba;
|
||
margin: 0 8rpx;
|
||
}
|
||
|
||
.img {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
}
|
||
|
||
.backArrow {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
.pageName {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #000;
|
||
}
|
||
}
|
||
|
||
.topLeft {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
|
||
.topIcon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.name {
|
||
width: calc(100% - 20px);
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
line-height: 20px;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.phone {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
line-height: 20px;
|
||
color: #786b6c;
|
||
}
|
||
}
|
||
|
||
.topRight {
|
||
width: 250rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
|
||
.editIcon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.editText {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #020e1a;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.shopList {
|
||
width: calc(100% - 32px);
|
||
margin: 12px 0 0 16px;
|
||
background: #fff;
|
||
border-radius: 10px;
|
||
|
||
.shopBox {
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
padding: 12px;
|
||
|
||
.shopItem {
|
||
margin-bottom: 4px;
|
||
border-bottom: 1px solid #f5f7f7;
|
||
padding-bottom: 12rpx;
|
||
|
||
//position: relative;
|
||
.shopUp {
|
||
width: 100%;
|
||
//min-height: 100px;
|
||
//display: flex;
|
||
//align-items: center;
|
||
background: #fff;
|
||
position: relative;
|
||
z-index: 2;
|
||
|
||
.detail {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
padding: 8px 0;
|
||
z-index: 2;
|
||
width: 100%;
|
||
position: absolute;
|
||
|
||
//width: calc(100% - 60rpx);
|
||
//right: 0!important;
|
||
.detailLeft {
|
||
z-index: 2;
|
||
border-radius: 8px;
|
||
margin-right: 8px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
|
||
.leftIcon {
|
||
width: 72px;
|
||
height: 72px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.simPriceBox {
|
||
height: 20px;
|
||
font-size: 18px;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
color: #ff6219;
|
||
line-height: 18px;
|
||
width: 100%;
|
||
margin-top: 8rpx;
|
||
text-align: left;
|
||
box-sizing: border-box;
|
||
padding-left: 56rpx;
|
||
|
||
.sumPriceUnit {
|
||
font-size: 12px;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
color: #ff6219;
|
||
// color: #9fa3a8;
|
||
line-height: 12px;
|
||
}
|
||
}
|
||
|
||
.haveDiscount {
|
||
margin-top: 0;
|
||
font-size: 14px;
|
||
color: #4D4B4C;
|
||
font-weight: bold;
|
||
|
||
.sumPriceUnit {
|
||
font-size: 12px;
|
||
color: #4D4B4C;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.discountedPrice {
|
||
height: 20px;
|
||
font-size: 18px;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
color: #ff6219;
|
||
line-height: 18px;
|
||
width: 100%;
|
||
text-align: left;
|
||
box-sizing: border-box;
|
||
padding-left: 56rpx;
|
||
|
||
.sumPriceUnit {
|
||
font-size: 12px;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
// color: #ff6219;
|
||
color: #ff6219;
|
||
line-height: 12px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.detailRight {
|
||
width: 100%;
|
||
height: 104px;
|
||
z-index: 2;
|
||
background: #fff;
|
||
|
||
.title {
|
||
width: 100%;
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #020e1a;
|
||
line-height: 18px;
|
||
overflow: hidden;
|
||
display: -webkit-box;
|
||
text-overflow: ellipsis;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
margin-bottom: 8rpx;
|
||
|
||
.pingnuo {
|
||
display: inline-block;
|
||
margin-right: 8rpx;
|
||
|
||
.pingnuoItem {
|
||
padding: 4rpx 12rpx;
|
||
border-radius: 28rpx;
|
||
background: linear-gradient(90deg,
|
||
#ffebe5 0%,
|
||
#ffedd8 100%);
|
||
font-family: "PingFangSC";
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #ff7040;
|
||
line-height: 30rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
.otherBox {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.priceBox {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
|
||
.priceIcon {
|
||
font-size: 12px;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
// color: #ff6219;
|
||
color: #9fa3a8;
|
||
line-height: 18px;
|
||
}
|
||
|
||
.priceNumber {
|
||
font-size: 12px;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
// color: #ff6219;
|
||
color: #9fa3a8;
|
||
line-height: 18px;
|
||
}
|
||
|
||
.priceUnit {
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #9fa3a8;
|
||
line-height: 18px;
|
||
}
|
||
|
||
.sumPrice {
|
||
font-size: 18px;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
color: #ff6219;
|
||
line-height: 18px;
|
||
width: 100%;
|
||
|
||
.sumPriceUnit {
|
||
font-size: 12px;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
// color: #ff6219;
|
||
color: #ff6219;
|
||
line-height: 18px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.cartcontrol {
|
||
width: 120px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
border: 1px solid rgba(2, 14, 26, 0.06);
|
||
border-radius: 2px;
|
||
|
||
.subtract {
|
||
width: 30px;
|
||
height: 30px;
|
||
background: #f2f4f5;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 2px 0 0 2px;
|
||
font-size: 8px;
|
||
color: #9fa3a8;
|
||
|
||
.img {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
}
|
||
|
||
.cart-count {
|
||
height: 30px !important;
|
||
line-height: 30px;
|
||
font-size: 14px;
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.descBox {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
background: #f2f4f5;
|
||
border-radius: 4px;
|
||
margin-top: 9px;
|
||
padding-left: 6px;
|
||
|
||
.desc {
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #020e1a;
|
||
line-height: 16px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.shopDown {
|
||
width: 72px;
|
||
background: red;
|
||
min-height: 88px;
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #fefffe;
|
||
line-height: 20px;
|
||
display: flex;
|
||
justify-content: center;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 24rpx;
|
||
align-items: center;
|
||
z-index: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
position: fixed;
|
||
left: 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: #fff;
|
||
width: 100%;
|
||
height: 60px;
|
||
box-sizing: border-box;
|
||
padding: 8px 16px;
|
||
|
||
.bottomLeft {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #020e1a;
|
||
line-height: 20px;
|
||
}
|
||
|
||
.bottomRight {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.submitTextBox {
|
||
.sum {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #6c737a;
|
||
line-height: 20px;
|
||
}
|
||
|
||
.sumPrice {
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #ff6219;
|
||
line-height: 20px;
|
||
}
|
||
|
||
.sunNumber {
|
||
font-size: 20px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #ff6219;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
|
||
.discountText {
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #ff6219;
|
||
}
|
||
|
||
|
||
.submitBtn {
|
||
width: 210rpx;
|
||
font-size: 16px;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
font-style: normal;
|
||
padding: 24rpx 0;
|
||
// line-height: 22px;
|
||
// padding: 9px 28px;
|
||
background: #4BCB7E;
|
||
// border-radius: 4px;
|
||
border-radius: 48rpx;
|
||
margin-left: 16rpx;
|
||
}
|
||
}
|
||
|
||
.deleteBtn {
|
||
width: 210rpx;
|
||
font-size: 16px;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #33BA69;
|
||
text-align: center;
|
||
font-style: normal;
|
||
line-height: 22px;
|
||
padding: 24rpx 0;
|
||
background: #E7F8EE;
|
||
border-radius: 48rpx;
|
||
margin-left: 16rpx;
|
||
}
|
||
}
|
||
|
||
.addressPopupBox {
|
||
width: 100%;
|
||
height: 60vh;
|
||
background-color: #fff;
|
||
box-sizing: border-box;
|
||
padding: 16rpx;
|
||
z-index: 999999;
|
||
|
||
.addressPopupTitle {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #020e1a;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
display: block;
|
||
text-align: center;
|
||
}
|
||
|
||
.addressList {
|
||
margin-top: 24rpx;
|
||
width: 100%;
|
||
height: calc(60vh - 250rpx);
|
||
overflow-y: auto;
|
||
|
||
.addressItem {
|
||
width: 100%;
|
||
padding: 16rpx 0;
|
||
box-sizing: border-box;
|
||
border-bottom: 1px solid #f6f6f6;
|
||
|
||
.addressItemTop {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.itemTopLeft {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.addressText {
|
||
font-size: 28rpx;
|
||
display: inline-block;
|
||
width: 70vw;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.itemTopRight {
|
||
.pickerImg {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.addressItemBottom {
|
||
width: 100%;
|
||
margin-top: 8rpx;
|
||
box-sizing: border-box;
|
||
padding-left: 64rpx;
|
||
color: #9fa3a8;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.addressList::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.btn {
|
||
height: 88rpx;
|
||
width: 90%;
|
||
line-height: 88rpx;
|
||
// background: linear-gradient(to right, #1f1f1f, #62605f);
|
||
// color: #f0dccf;
|
||
background: #4BCB7E;
|
||
color: #fff;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
position: fixed;
|
||
bottom: 32rpx;
|
||
transform: translateX(-50%);
|
||
left: 50%;
|
||
border-radius: 48rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 购物车页面骨架屏样式 */
|
||
.shop-car-skeleton {
|
||
width: 100%;
|
||
background: #f2f4f5;
|
||
padding-bottom: 120px;
|
||
}
|
||
|
||
/* 基础骨架屏动画 */
|
||
.skeleton {
|
||
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 50%, #f2f2f2 75%);
|
||
background-size: 200% 100%;
|
||
animation: loading 1.5s infinite;
|
||
}
|
||
|
||
@keyframes loading {
|
||
0% {
|
||
background-position: 200% 0;
|
||
}
|
||
|
||
100% {
|
||
background-position: -200% 0;
|
||
}
|
||
}
|
||
|
||
/* 顶部地址选择区域骨架样式 */
|
||
.skeleton-location-icon-small {
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.skeleton-address-text {
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.skeleton-phone-text {
|
||
border-radius: 9px;
|
||
}
|
||
|
||
.skeleton-edit-text {
|
||
border-radius: 10px;
|
||
}
|
||
|
||
|
||
/* 商品列表骨架 */
|
||
.skeleton-product-list {
|
||
width: calc(100% - 32px);
|
||
margin: 0 16px;
|
||
background: #ffffff;
|
||
border-radius: 10px;
|
||
padding: 24rpx;
|
||
}
|
||
|
||
.skeleton-product-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
padding: 16rpx 0;
|
||
border-bottom: 1px solid #f5f7f7;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
|
||
.skeleton-product-left {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-right: 16rpx;
|
||
|
||
.skeleton-checkbox {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
border-radius: 50%;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.skeleton-product-image {
|
||
width: 144rpx;
|
||
height: 144rpx;
|
||
border-radius: 8rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.skeleton-total-price {
|
||
width: 100rpx;
|
||
height: 36rpx;
|
||
border-radius: 18rpx;
|
||
}
|
||
}
|
||
|
||
.skeleton-product-right {
|
||
flex: 1;
|
||
|
||
.skeleton-product-title {
|
||
width: 85%;
|
||
height: 36rpx;
|
||
border-radius: 18rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.skeleton-product-actions {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16rpx;
|
||
|
||
.skeleton-price-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.skeleton-price {
|
||
width: 80rpx;
|
||
height: 28rpx;
|
||
border-radius: 14rpx;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.skeleton-unit {
|
||
width: 60rpx;
|
||
height: 24rpx;
|
||
border-radius: 12rpx;
|
||
}
|
||
}
|
||
|
||
.skeleton-quantity-control {
|
||
width: 240rpx;
|
||
height: 60rpx;
|
||
border-radius: 4rpx;
|
||
}
|
||
}
|
||
|
||
.skeleton-remark-input {
|
||
width: 100%;
|
||
height: 60rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
|
||
/* 底部操作栏骨架 */
|
||
.skeleton-bottom {
|
||
position: fixed;
|
||
bottom: 100rpx;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 120rpx;
|
||
background: #ffffff;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 16rpx 32rpx;
|
||
box-sizing: border-box;
|
||
|
||
.skeleton-bottom-left {
|
||
.skeleton-select-all {
|
||
width: 120rpx;
|
||
height: 40rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
}
|
||
|
||
.skeleton-bottom-right {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.skeleton-total-text {
|
||
width: 60rpx;
|
||
height: 32rpx;
|
||
border-radius: 16rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.skeleton-total-amount {
|
||
width: 120rpx;
|
||
height: 40rpx;
|
||
border-radius: 20rpx;
|
||
margin-right: 32rpx;
|
||
}
|
||
|
||
.skeleton-submit-button {
|
||
width: 210rpx;
|
||
height: 96rpx;
|
||
border-radius: 48rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|