1425 lines
41 KiB
Vue
1425 lines
41 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">
|
||
<div class="pingnuo" v-if="item.DATAFORMAT === 2">
|
||
<div class="pingnuoItem">品诺</div>
|
||
</div>
|
||
{{ 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"
|
||
@click="handleClickAddressItem(item)"
|
||
>
|
||
<view class="addressItemTop">
|
||
<view class="itemTopLeft">
|
||
<radio
|
||
:checked="item.MEMBERADDRESS_ID === selectAddressId"
|
||
color="#1890FF"
|
||
@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";
|
||
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();
|
||
this.$utils.addUserBehaviorNew();
|
||
},
|
||
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: {
|
||
// 点击地址
|
||
handleClickAddressItem(obj) {
|
||
if (!obj.MEMBERADDRESS_CODE) {
|
||
uni.showToast({
|
||
title: "请完善地址！",
|
||
icon: "none",
|
||
});
|
||
}
|
||
},
|
||
// 显示选择地址的悬浮框
|
||
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 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);
|
||
}
|
||
});
|
||
}
|
||
console.log("defaultAddress", defaultAddress);
|
||
console.log("address", list);
|
||
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;
|
||
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) {
|
||
console.log('obj',obj)
|
||
let list = [];
|
||
this.shopList.forEach((item) => {
|
||
if (item.COMMODITY_CODE !== obj.COMMODITY_CODE) {
|
||
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
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
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: "工会之家余额为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);
|
||
}
|
||
}
|
||
});
|
||
console.log("DATAFORMATTypeList", DATAFORMATTypeList);
|
||
|
||
if (DATAFORMATTypeList && DATAFORMATTypeList.length > 1) {
|
||
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;
|
||
.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: 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>
|