376 lines
14 KiB
Vue
376 lines
14 KiB
Vue
<template>
|
||
<view class="main">
|
||
<view class="maintopBox">
|
||
<view class="mainTopRight" @click="handleChangeSortType">
|
||
<view class="distanceText">{{ sortType === 1 ? '按时间' : '按价格' }}</view>
|
||
<image class="distanceIcon" src="https://eshangtech.com/caiyunyiImg/sortIcon.png" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mainBottom">
|
||
<scroll-view scroll-y="true" class="scrollView" @scrolltolower="handleScrollBottom">
|
||
<view class="nearbyScenicItem" v-for="(item, index) in dataList" :key="index"
|
||
@touchstart="handleTouchStart($event, index)" @touchmove="handleTouchMove($event, index)"
|
||
@touchend="handleTouchEnd($event, index)">
|
||
<view class="swipe-content" :class="{ 'show-delete': item.showDelete }">
|
||
<view class="nearByBottomLeftBox">
|
||
<image class="nearbyImg" :src="item.list_img || '/static/images/home/defaultIcon.png'" />
|
||
</view>
|
||
<view class="nearByBottomCenterBox">
|
||
<view class="scenicName">{{ item.COMMODITY_NAME }}</view>
|
||
<view class="scenicContent" v-if="item.USERDEFINEDTYPE_NAME">
|
||
<view class="scenicType">{{ item.USERDEFINEDTYPE_NAME }}</view>
|
||
</view>
|
||
<view class="scenicBottom">
|
||
<view class="scenicBottomItem">
|
||
<view class="scenicBottomItemLabel">库存：</view>
|
||
<view class="scenicBottomItemValue">{{ item.COMMODITY_STOCK || "" }}</view>
|
||
</view>
|
||
<view class="scenicBottomItem">
|
||
<view class="scenicBottomItemLabel">销量：</view>
|
||
<view class="scenicBottomItemValue">{{ good.COMMODITY_EN || "0" }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="nearByBottomRightBox">
|
||
<view class="shopPriceBox">
|
||
<view class="shopPriceUnit">¥</view>
|
||
<view class="shopPriceValue">{{ item.COMMODITY_MEMBERPRICE }}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 删除按钮 -->
|
||
<view class="delete-btn" v-if="item.showDelete" @click.stop="handleDelete(item)">
|
||
删除
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from "vuex";
|
||
export default {
|
||
data() {
|
||
return {
|
||
sortType: 1,// 1:按价格，2:按收藏时间
|
||
dataList: [],// 表单数据
|
||
startX: 0,
|
||
moveX: 0,
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.handleGetData();
|
||
},
|
||
computed: {
|
||
...mapGetters(["user"]),
|
||
},
|
||
methods: {
|
||
async handleGetData() {
|
||
let req = {
|
||
ProvinceCode: this.user.PROVINCE_CODE,
|
||
OwnerUnitId: 911,
|
||
MemberShipId: this.user.MEMBERSHIP_ID,
|
||
AppGuid: "wxee018fb96955552a",
|
||
PageIndex: this.PageIndex,
|
||
PageSize: 10,
|
||
SortStr: this.sortType === 2 ? 'COMMODITY_MEMBERPRICE desc' : "",
|
||
type: "encryption"
|
||
}
|
||
const data = await this.$api.$zzyLocalPost(
|
||
"/Member/GetCommodityCollectionList",
|
||
req
|
||
);
|
||
console.log('fjdsifjsaoif', data);
|
||
let list = data.Result_Data.List
|
||
this.dataList = list
|
||
},
|
||
handleChangeSortType() {
|
||
// 这里可以添加排序逻辑
|
||
if (this.sortType === 1) {
|
||
this.sortType = 2;
|
||
} else if (this.sortType === 2) {
|
||
this.sortType = 1;
|
||
}
|
||
this.handleGetData();
|
||
},
|
||
// 滑动到底部
|
||
handleScrollBottom() {
|
||
|
||
},
|
||
handleTouchStart(e, index) {
|
||
this.startX = e.touches[0].clientX;
|
||
// 关闭其他item的删除按钮
|
||
this.dataList.forEach((item, i) => {
|
||
if (i !== index) item.showDelete = false;
|
||
});
|
||
},
|
||
handleTouchMove(e, index) {
|
||
this.moveX = e.touches[0].clientX;
|
||
let dis = this.startX - this.moveX;
|
||
// 超过阈值显示删除
|
||
if (dis > 50) {
|
||
this.$set(this.dataList[index], 'showDelete', true);
|
||
} else if (dis < 10) {
|
||
this.$set(this.dataList[index], 'showDelete', false);
|
||
}
|
||
},
|
||
handleTouchEnd(e, index) {
|
||
// 可根据需要补充逻辑
|
||
},
|
||
async handleDelete(obj) {
|
||
let req = {
|
||
COLLECTIONId: obj.CollectionId,
|
||
type: "encryption",
|
||
}
|
||
// 同步收藏
|
||
console.log('reqreqreq', req);
|
||
const data = await this.$api.$zzyLocalPost(
|
||
"/Member/DeleteCOLLECTION",
|
||
req
|
||
);
|
||
console.log('data', data);
|
||
if (data.Result_Code === 100) {
|
||
uni.showToast({
|
||
title: '删除成功！',
|
||
icon: 'none'
|
||
})
|
||
this.handleGetData()
|
||
} else {
|
||
uni.showToast({
|
||
title: data.Result_Desc,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
|
||
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.main {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background: #F5F5F5;
|
||
box-sizing: border-box;
|
||
padding: 24rpx 30rpx;
|
||
|
||
.maintopBox {
|
||
width: 100%;
|
||
height: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
|
||
.mainTopRight {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.distanceText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
line-height: 34rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
|
||
.distanceIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.mainBottom {
|
||
width: 100%;
|
||
margin-top: 16rpx;
|
||
|
||
.scrollView {
|
||
.nearbyScenicItem {
|
||
position: relative;
|
||
overflow: hidden;
|
||
margin-bottom: 16rpx;
|
||
border-radius: 8rpx;
|
||
|
||
.swipe-content {
|
||
width: calc(100% + 120rpx); // 关键：宽度加上删除按钮的宽度
|
||
box-sizing: border-box;
|
||
padding: 16rpx 16rpx 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
transition: transform 0.2s;
|
||
background: #fff;
|
||
position: relative;
|
||
|
||
.nearByBottomLeftBox {
|
||
width: 136rpx;
|
||
height: 136rpx;
|
||
box-sizing: border-box;
|
||
padding: 4rpx 0;
|
||
margin-right: 28rpx;
|
||
|
||
.nearbyImg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.nearByBottomCenterBox {
|
||
width: calc(100vw - 164rpx - 140rpx - 60rpx - 32rpx);
|
||
|
||
.scenicName {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 29rpx;
|
||
color: #222222;
|
||
line-height: 42rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
width: 100%;
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.scenicContent {
|
||
width: 100%;
|
||
margin-top: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.scenicType {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #3D7FFF;
|
||
line-height: 32rpx;
|
||
text-align: right;
|
||
font-style: normal;
|
||
padding: 4rpx 16rpx;
|
||
background: rgba(61, 127, 255, 0.1);
|
||
border-radius: 6rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
.scenicRateBox {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.scenicRate {}
|
||
|
||
.scenicRateText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: rgba(0, 0, 0, 0.6);
|
||
line-height: 28rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-left: 12rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.scenicBottom {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: flex-start;
|
||
margin-top: 14rpx;
|
||
|
||
.scenicBottomItem {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.scenicBottomItemLabel {
|
||
display: inline-block;
|
||
width: 70rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: rgba(0, 0, 0, 0.6);
|
||
line-height: 28rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.scenicBottomItemValue {
|
||
display: inline-block;
|
||
width: 80rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: rgba(0, 0, 0, 0.6);
|
||
line-height: 28rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.nearByBottomRightBox {
|
||
width: 140rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
|
||
.shopPriceBox {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
|
||
.shopPriceUnit {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 20rpx;
|
||
line-height: 20rpx;
|
||
color: #F13216;
|
||
text-align: right;
|
||
font-style: normal;
|
||
}
|
||
|
||
.shopPriceValue {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 40rpx;
|
||
line-height: 40rpx;
|
||
color: #F13216;
|
||
text-align: right;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.show-delete {
|
||
transform: translateX(-120rpx);
|
||
}
|
||
|
||
.delete-btn {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
width: 120rpx;
|
||
height: 100%;
|
||
background: #ff4d4f;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28rpx;
|
||
z-index: 10;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
}
|
||
</style> |