937 lines
26 KiB
Vue
937 lines
26 KiB
Vue
<template>
|
|
<view class="main">
|
|
<div class="mainTop" :style="{ paddingTop: menu.top + 'px' }">
|
|
<view class="headerTop" :style="{ height: menu.height + 'px' }">
|
|
<image
|
|
class="backArrow"
|
|
src="/static/images/home/backArrowblack.svg"
|
|
@click="handleBackHome"
|
|
/>
|
|
<view class="pageName">{{
|
|
bigPageType === "UnionMall" ? "工会商城购物车" : "购物车"
|
|
}}</view>
|
|
<view class="backArrow"></view>
|
|
</view>
|
|
|
|
<div
|
|
style="
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
"
|
|
>
|
|
<div class="topLeft">
|
|
<!-- <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>
|
|
|
|
<scroll-view
|
|
class="shopList"
|
|
scroll-y
|
|
:style="{ height: `calc(100vh - ${menu.bottom + 210}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" -->
|
|
<view
|
|
class="shopUp"
|
|
:style="{ height: (item.rows - 1) * 28 + 210 + 'rpx' }"
|
|
>
|
|
<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">
|
|
<radio
|
|
v-if="pageType === 'normal'"
|
|
:checked="item.select"
|
|
color="#1890FF"
|
|
@click="handleChangeSelect(item)"
|
|
></radio>
|
|
<radio
|
|
v-else
|
|
:checked="item.selectDelete"
|
|
color="#1890FF"
|
|
@click="handleChangeDelete(item)"
|
|
></radio>
|
|
<image
|
|
class="leftIcon"
|
|
:src="item.IMAGE_PATH || '/static/images/home/defultImg.png'"
|
|
/>
|
|
</div>
|
|
<div class="detailRight">
|
|
<div class="title">{{ item.COMMODITY_NAME }}</div>
|
|
<div class="otherBox">
|
|
<div class="priceBox">
|
|
<text class="priceIcon">￥</text>
|
|
<text class="priceNumber">{{
|
|
item.COMMODITY_MEMBERPRICE
|
|
}}</text>
|
|
<text class="priceUnit">/{{ item.COMMODITY_UNIT }}</text>
|
|
</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="inputMaxLength"
|
|
style="background: #fff; text-align: center"
|
|
placeholder="0"
|
|
@blur="haveFocus($event, item)"
|
|
@focus="haveFocus($event, item)"
|
|
v-model="item.count"
|
|
@input="handleNumber"
|
|
/>
|
|
<!-- @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"
|
|
:style="{ bottom: systemInfo.osName === 'ios' ? '158rpx' : '90rpx' }"
|
|
>
|
|
<div class="bottomLeft" v-if="pageType === 'normal'">
|
|
<radio
|
|
:checked="isAllSelect"
|
|
color="#1890FF"
|
|
@click="handleAllSelect"
|
|
/>全选
|
|
</div>
|
|
<div class="bottomLeft" v-else>
|
|
<radio
|
|
:checked="isAllDelete"
|
|
color="#1890FF"
|
|
@click="handleAllDelete"
|
|
/>全选
|
|
</div>
|
|
<div class="bottomRight" v-if="pageType === 'normal'">
|
|
<text class="sum">合计</text>
|
|
<text class="sumPrice">￥</text>
|
|
<text class="sunNumber">{{ totalPay }}</text>
|
|
<div class="submitBtn" @click="goPayFn">立即下单</div>
|
|
</div>
|
|
<div v-else class="deleteBtn" @click="handleDelete">删除</div>
|
|
</div>
|
|
|
|
<shop-tabbar
|
|
:page="'/pages/shopMallPage/shopCar/index'"
|
|
:pageType="bigPageType"
|
|
:shopCarLength="shopCarListCount"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from "vuex";
|
|
import shopTabbar from "../../../components/shopTabbar.vue";
|
|
export default {
|
|
components: { shopTabbar },
|
|
data() {
|
|
return {
|
|
menu: {}, // 手机基本信息
|
|
pageType: "normal", // 是否启用购物车管理功能 normal 时为正常
|
|
shopList: [], // 购物车数据
|
|
shopCarListCount: 0, // 购物车商品数量
|
|
isAllDelete: false, // 删除的全选
|
|
startX: 0, // 左滑出现删除需要的参数
|
|
selectIndex: undefined, // 左滑出现删除需要的参数
|
|
disX: 0, //
|
|
selectStyle: "", // 左滑出现删除需要的参数
|
|
delBtnWidth: 72, // 左滑出现删除需要的参数
|
|
isAllSelect: false, // 是否选中全选
|
|
totalPay: 0, // 根据选中的商品需要支付的钱
|
|
inputMaxLength: -1,
|
|
pageOut: false, // 是不是从立即下单离开页面的
|
|
storeId: "",
|
|
systemInfo: {},
|
|
bigPageType: "", // 页面类型 是不是进来查工会商城的
|
|
};
|
|
},
|
|
watch: {
|
|
// 深度监听数组变化
|
|
shopList: {
|
|
handler(newVal, oldVal) {
|
|
if (newVal && newVal.length > 0) {
|
|
let count = 0;
|
|
newVal.forEach((item) => {
|
|
count += item.count;
|
|
});
|
|
this.shopCarListCount = count;
|
|
} else {
|
|
this.shopCarListCount = 0;
|
|
}
|
|
},
|
|
deep: true,
|
|
},
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
user: "user",
|
|
}),
|
|
},
|
|
onLoad(query) {
|
|
console.log("query", query);
|
|
|
|
let systemInfo = uni.getSystemInfoSync();
|
|
this.menu = uni.getMenuButtonBoundingClientRect();
|
|
this.systemInfo = systemInfo;
|
|
console.log("systemInfo", systemInfo);
|
|
|
|
if (query.pageType) {
|
|
this.bigPageType = query.pageType;
|
|
}
|
|
|
|
this.handleGetNowShopCarList();
|
|
this.handleSum();
|
|
},
|
|
onShow() {
|
|
// 判断当前的购物车里面是否有东西
|
|
let shopCarList = [];
|
|
if (this.bigPageType === "UnionMall") {
|
|
shopCarList = this.$store.state.unionMyShopCar;
|
|
} else {
|
|
shopCarList = this.$store.state.myShopCar;
|
|
}
|
|
console.log("shopCarList", shopCarList);
|
|
let count = 0;
|
|
if (shopCarList && shopCarList.length > 0) {
|
|
shopCarList.forEach((item) => {
|
|
count += item.count;
|
|
});
|
|
}
|
|
this.shopCarListCount = count;
|
|
},
|
|
methods: {
|
|
// 判断当前购物车是否有内容 有内容的话 处理
|
|
handleGetNowShopCarList() {
|
|
let shopCarList = [];
|
|
if (this.bigPageType === "UnionMall") {
|
|
shopCarList = this.$store.state.unionMyShopCar;
|
|
} else {
|
|
shopCarList = this.$store.state.myShopCar;
|
|
}
|
|
console.log("shopCarList", shopCarList);
|
|
if (shopCarList && shopCarList.length > 0) {
|
|
shopCarList.forEach((item) => {
|
|
item.rows =
|
|
item.COMMODITY_NAME && item.COMMODITY_NAME.length / 14 > 1
|
|
? Math.ceil(item.COMMODITY_NAME.length / 14)
|
|
: 1;
|
|
});
|
|
}
|
|
this.shopList = shopCarList;
|
|
},
|
|
// 改变当前的编辑状态
|
|
handleChangePageType() {
|
|
if (this.pageType === "normal") {
|
|
this.pageType = "edit";
|
|
this.isAllDelete = false;
|
|
} else {
|
|
this.pageType = "normal";
|
|
}
|
|
},
|
|
// 左滑删除的接触到屏幕
|
|
startTouch(e, index) {
|
|
console.log("e", e);
|
|
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;
|
|
this.shopList.forEach((u) => {
|
|
if (u.select === true) {
|
|
let goodNum = Number(u.count);
|
|
this.totalPay += Number(u.COMMODITY_MEMBERPRICE) * goodNum;
|
|
this.totalPay = Number(this.totalPay.toFixed(2));
|
|
}
|
|
});
|
|
},
|
|
// 修改商品前面的单选框选中效果
|
|
handleChangeSelect(item) {
|
|
if (item.select) {
|
|
item.select = false;
|
|
} else {
|
|
item.select = true;
|
|
}
|
|
let isNoSelect = 0;
|
|
this.shopList.forEach((item) => {
|
|
if (item.select === false) {
|
|
isNoSelect += 1;
|
|
}
|
|
});
|
|
this.isAllSelect = isNoSelect === 0;
|
|
this.handleSum();
|
|
this.$forceUpdate();
|
|
},
|
|
// 取消选中商品的方法
|
|
handleChangeDelete(item) {
|
|
if (item.selectDelete) {
|
|
item.selectDelete = false;
|
|
} else {
|
|
item.selectDelete = true;
|
|
}
|
|
let isNoSelect = 0;
|
|
this.shopList.forEach((item) => {
|
|
if (item.selectDelete === false) {
|
|
isNoSelect += 1;
|
|
}
|
|
});
|
|
this.isAllDelete = isNoSelect === 0;
|
|
this.$forceUpdate();
|
|
},
|
|
// 商品数量减少
|
|
decreaseGoodToCartFn(e, item) {
|
|
if (item.count > 0) {
|
|
item.count -= 1;
|
|
if (item.count < 0) {
|
|
item.count = 0;
|
|
}
|
|
}
|
|
if (item.count === 0) {
|
|
let list = [];
|
|
this.shopList.forEach((i) => {
|
|
if (i.COMMODITY_CODE !== item.COMMODITY_CODE) {
|
|
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) {
|
|
item.count = Number(e.mp.detail.value);
|
|
if (item.count === 0) {
|
|
let list = [];
|
|
this.shopList.forEach((subItem) => {
|
|
if (subItem.COMMODITY_CODE !== item.COMMODITY_CODE) {
|
|
list.push(subItem);
|
|
}
|
|
});
|
|
this.shopList = list;
|
|
}
|
|
console.log("this.dataList1111", this.shopList);
|
|
if (this.bigPageType === "UnionMall") {
|
|
this.$store.commit("unionMyShopCar", this.shopList);
|
|
} else {
|
|
this.$store.commit("myShopCar", this.shopList);
|
|
}
|
|
this.handleSum();
|
|
this.$forceUpdate();
|
|
},
|
|
// 输入框输入的触发方法
|
|
handleNumber(e) {
|
|
console.log("e", e);
|
|
if (e.mp.detail.value.indexOf(".") !== -1) {
|
|
const flag = e.mp.detail.value.indexOf(".");
|
|
console.log("flag", flag);
|
|
if (flag === 0) {
|
|
this.inputMaxLength = flag + 4;
|
|
} else {
|
|
this.inputMaxLength = flag + 3;
|
|
}
|
|
} else {
|
|
// if (e.mp.detail.value === '') {
|
|
// this.currentRow.count = 0
|
|
// }
|
|
this.inputMaxLength = -1;
|
|
}
|
|
console.log("inputMaxLength", this.inputMaxLength);
|
|
},
|
|
// 数量增加
|
|
touchOnGoods(e, item) {
|
|
item.count += 1;
|
|
this.handleSum();
|
|
if (this.bigPageType === "UnionMall") {
|
|
this.$store.commit("unionMyShopCar", this.dataList);
|
|
} else {
|
|
this.$store.commit("myShopCar", this.dataList);
|
|
}
|
|
},
|
|
// 左滑出现的删除
|
|
handleDeleteItem(obj) {
|
|
let list = [];
|
|
this.shopList.forEach((item) => {
|
|
if (item.COMMODITY_CODE !== obj.COMMODITY_CODE) {
|
|
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() {
|
|
// 判断是不是在工会商城下单 下单的话 就要查询用户余额 余额有的 才能下单
|
|
if (this.bigPageType === "UnionMall") {
|
|
if (!(this.user.ACCOUNT_BALANCE > 0)) {
|
|
uni.showToast({
|
|
title: "工会商城余额不足，无法下单！",
|
|
icon: "none",
|
|
});
|
|
return;
|
|
}
|
|
}
|
|
if (this.shopList.length > 0) {
|
|
this.pageOut = true;
|
|
let orderList = [];
|
|
let noSelectList = [];
|
|
this.shopList.forEach((item) => {
|
|
// 老东西 不理解 但是尊重
|
|
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
|
|
});
|
|
}
|
|
console.log("noSelectList", noSelectList);
|
|
console.log("orderList", orderList);
|
|
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=${JSON.stringify(
|
|
orderList
|
|
)}`,
|
|
});
|
|
} else {
|
|
uni.showToast({ title: "购物车内无勾选商品", icon: "none" });
|
|
}
|
|
}
|
|
},
|
|
// 返回首页
|
|
handleBackHome() {
|
|
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;
|
|
|
|
.backArrow {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
|
|
.pageName {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #000;
|
|
}
|
|
}
|
|
|
|
.topLeft {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.topIcon {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.name {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #6c737a;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
align-items: center;
|
|
|
|
.leftIcon {
|
|
width: 72px;
|
|
height: 72px;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.detailRight {
|
|
width: 100%;
|
|
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: 12px;
|
|
}
|
|
|
|
.otherBox {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.priceBox {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
|
|
.priceIcon {
|
|
font-size: 12px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #ff6219;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.priceNumber {
|
|
font-size: 20px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #ff6219;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.priceUnit {
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #9fa3a8;
|
|
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: 16rpx;
|
|
align-items: center;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
position: fixed;
|
|
left: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: #fff;
|
|
width: 100%;
|
|
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;
|
|
|
|
.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;
|
|
}
|
|
|
|
.submitBtn {
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
line-height: 22px;
|
|
padding: 9px 28px;
|
|
background: #1890ff;
|
|
border-radius: 4px;
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
|
|
.deleteBtn {
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #1890ff;
|
|
line-height: 22px;
|
|
padding: 9px 38px;
|
|
background: #e7f3ff;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|