1345 lines
39 KiB
Vue
1345 lines
39 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%;
|
|
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>
|
|
|
|
<scroll-view
|
|
class="shopList"
|
|
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" -->
|
|
<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">
|
|
<view style="display: flex">
|
|
<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 ||
|
|
item.DEFAULT_IMG ||
|
|
'/static/images/home/defultImg.png'
|
|
"
|
|
/>
|
|
</view>
|
|
<view class="simPriceBox">
|
|
<text class="sumPriceUnit">￥</text
|
|
>{{
|
|
$utils.handleFormatNumber(
|
|
item.COMMODITY_MEMBERPRICE * item.count
|
|
)
|
|
}}
|
|
</view>
|
|
</div>
|
|
<div class="detailRight">
|
|
<div class="title">{{ 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" :style="{ bottom: `${50 + safeHeight}px` }">
|
|
<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>
|
|
|
|
<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"
|
|
>
|
|
<view class="addressItemTop">
|
|
<view class="itemTopLeft">
|
|
<radio
|
|
:checked="item.MEMBERADDRESS_ID === selectAddressId"
|
|
color="#1890FF"
|
|
@click="handleChangeAddress(item.MEMBERADDRESS_ID)"
|
|
></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";
|
|
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: "", // 页面类型 是不是进来查工会商城的
|
|
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 += item.count;
|
|
});
|
|
this.shopCarListCount = count;
|
|
} else {
|
|
this.shopCarListCount = 0;
|
|
}
|
|
},
|
|
deep: true,
|
|
},
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
user: "user",
|
|
}),
|
|
},
|
|
async onLoad(query) {
|
|
console.log("query", query);
|
|
|
|
let height = uni.getStorageSync("safeHeight");
|
|
this.safeHeight = Number(height);
|
|
|
|
let systemInfo = uni.getSystemInfoSync();
|
|
this.menu = uni.getMenuButtonBoundingClientRect();
|
|
this.systemInfo = systemInfo;
|
|
console.log("systemInfo", systemInfo);
|
|
|
|
if (query.pageType) {
|
|
this.bigPageType = query.pageType;
|
|
}
|
|
|
|
// 获取最新的用户余额
|
|
if (this.bigPageType === "UnionMall") {
|
|
await this.handleGetUserBalance();
|
|
}
|
|
|
|
// 获得用户地址数据
|
|
this.handleGetAddressList();
|
|
|
|
this.handleGetNowShopCarList();
|
|
this.handleSum();
|
|
},
|
|
onShow() {
|
|
console.log("this.bigPageType", this.bigPageType);
|
|
console.log("this.$store.state", this.$store.state);
|
|
// 判断当前的购物车里面是否有东西
|
|
let shopCarList = [];
|
|
if (this.bigPageType === "UnionMall") {
|
|
shopCarList = this.$store.state.unionMyShopCar;
|
|
} else {
|
|
shopCarList = this.$store.state.myShopCar;
|
|
}
|
|
console.log("shopCarList", shopCarList);
|
|
this.shopList = shopCarList;
|
|
let count = 0;
|
|
if (shopCarList && shopCarList.length > 0) {
|
|
shopCarList.forEach((item) => {
|
|
count += item.count;
|
|
});
|
|
}
|
|
this.shopCarListCount = count;
|
|
this.handleSum();
|
|
|
|
this.handleGetAddressList();
|
|
},
|
|
methods: {
|
|
// 显示选择地址的悬浮框
|
|
handleShowAddress() {
|
|
this.$refs.addressPopup.open("bottom");
|
|
this.popupShow = true;
|
|
},
|
|
// 切换选中的地址
|
|
handleChangeAddress(id) {
|
|
console.log("this.selectAddressId", this.selectAddressId);
|
|
|
|
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 defaultAddress = {};
|
|
if (list && list.length > 0) {
|
|
list.forEach((item) => {
|
|
if (item.ISDEFAULT === 1) {
|
|
defaultAddress = item;
|
|
}
|
|
});
|
|
}
|
|
console.log("defaultAddress", defaultAddress);
|
|
console.log("address", list);
|
|
if (!defaultAddress.MEMBERADDRESS_ID) {
|
|
defaultAddress = list[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;
|
|
console.log("this.userInfo", this.userInfo);
|
|
uni.hideLoading();
|
|
},
|
|
// 判断当前购物车是否有内容 有内容的话 处理
|
|
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 isSelect = 0;
|
|
this.shopList.forEach((item) => {
|
|
if (item.select) {
|
|
isSelect += 1;
|
|
}
|
|
});
|
|
this.isAllSelect = isSelect === this.shopList.length;
|
|
this.handleSum();
|
|
this.$forceUpdate();
|
|
},
|
|
// 取消选中商品的方法
|
|
handleChangeDelete(item) {
|
|
console.log("item", 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 (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();
|
|
}
|
|
},
|
|
});
|
|
} else {
|
|
item.count -= 1;
|
|
}
|
|
}
|
|
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) {
|
|
console.log("e", e);
|
|
let value = e.detail.value;
|
|
let number = 0;
|
|
if (value.indexOf(".") === -1) {
|
|
number = Number(value);
|
|
} else {
|
|
let bigNumber = value.split(".")[0];
|
|
number = Number(bigNumber);
|
|
}
|
|
console.log("number2", number);
|
|
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;
|
|
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();
|
|
} else if (res.cancel) {
|
|
item.count = Number(oldCount);
|
|
}
|
|
},
|
|
});
|
|
} else {
|
|
item.count = number;
|
|
}
|
|
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();
|
|
},
|
|
// 数量增加
|
|
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_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() {
|
|
// 先检查选中的商品列表里面有没有预售商品
|
|
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
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
console.log("this.shopList", this.shopList);
|
|
|
|
if (isPresale) {
|
|
uni.showToast({
|
|
title: "选中的商品中有未售商品，无法下单！",
|
|
icon: "none",
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 判断是不是在工会商城下单 下单的话 就要查询用户余额 余额有的 才能下单
|
|
if (this.bigPageType === "UnionMall") {
|
|
if (!(this.userInfo.ACCOUNT_BALANCE > 0)) {
|
|
uni.showToast({
|
|
title: "工会商城余额不足，无法下单！",
|
|
icon: "none",
|
|
});
|
|
return;
|
|
} else if (this.totalPay > Number(this.userInfo.ACCOUNT_BALANCE)) {
|
|
// uni.showToast({
|
|
// title: "账户余额不足！",
|
|
// icon: "none",
|
|
// });
|
|
// return;
|
|
}
|
|
}
|
|
|
|
|
|
console.log("this.shopList", this.shopList);
|
|
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
|
|
});
|
|
}
|
|
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
|
|
)}&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;
|
|
|
|
.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: 24rpx;
|
|
text-align: center;
|
|
.sumPriceUnit {
|
|
font-size: 12px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
// color: #ff6219;
|
|
color: #ff6219;
|
|
line-height: 18px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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: 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%;
|
|
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;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
position: fixed;
|
|
bottom: 32rpx;
|
|
transform: translateX(-50%);
|
|
left: 50%;
|
|
border-radius: 12rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|