first commit
This commit is contained in:
91
src/components/car-group/car-group.scss
Normal file
91
src/components/car-group/car-group.scss
Normal file
@@ -0,0 +1,91 @@
|
||||
@use '@/assets/bundle.scss';
|
||||
|
||||
.car-group {
|
||||
overflow-y: auto;
|
||||
margin: 20rpx auto;
|
||||
background: #eee;
|
||||
// width: 750rpx;
|
||||
// box-sizing: border-box;
|
||||
@extend %pdlr;
|
||||
.car-item{
|
||||
background:#fff;
|
||||
padding:0 20rpx;
|
||||
overflow: hidden;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
.store-info {
|
||||
@extend %flex-between;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
height: 100rpx;
|
||||
border-bottom: 1rpx solid #E4E7ED;
|
||||
// padding-left: 100rpx;
|
||||
// border: 1rpx solid greenyellow;
|
||||
background-color: #fff;
|
||||
}
|
||||
.circle{
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 20rpx;
|
||||
background-color:#eee;
|
||||
}
|
||||
// .waybillSLG{
|
||||
// border: 1rpx solid red;
|
||||
// width: 150rpx;
|
||||
// padding: 10rpx;
|
||||
// white-space: nowrap;
|
||||
// color: #4EB331;
|
||||
// }
|
||||
.icon-right-aw {
|
||||
flex: none;
|
||||
@extend %icon-aw-right-slim;
|
||||
width: 30rpx;
|
||||
background-position: right center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 30rpx;
|
||||
}
|
||||
.store-name {
|
||||
flex: 1;
|
||||
@extend %oneline;
|
||||
}
|
||||
.store-mobile {
|
||||
flex: none;
|
||||
}
|
||||
.skuName-item{
|
||||
display:flex;
|
||||
// width: 90vw;
|
||||
// border:1rpx solid red;
|
||||
}
|
||||
.skuName-cell {
|
||||
@extend %flex-left;
|
||||
// border-bottom: 1rpx solid #E4E7ED;
|
||||
|
||||
border: 1rpx solid #e2dfdf;
|
||||
margin-bottom: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: #fff;
|
||||
padding: 10rpx;
|
||||
// display: flex;
|
||||
// width: 100vw;
|
||||
}
|
||||
.delButton{
|
||||
// height: 240rpx;
|
||||
line-height: 140rpx;
|
||||
background: #ff0000;
|
||||
// border: 1rpx solid green;
|
||||
color: #fff;
|
||||
margin-top: 10rpx;
|
||||
margin-left:30rpx;
|
||||
font-size: 30rpx;
|
||||
// width: 100rpx;
|
||||
padding:10rpx 20rpx;
|
||||
}
|
||||
.flex-auto {
|
||||
@extend %flex-auto;
|
||||
}
|
||||
// .skuName-item:last-child{
|
||||
// // margin-bottom: 194rpx;
|
||||
// }
|
||||
}
|
||||
241
src/components/car-group/car-group.vue
Normal file
241
src/components/car-group/car-group.vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<div class="car-group">
|
||||
<div class="car-item">
|
||||
<div class="store-info">
|
||||
<div style="display:flex">
|
||||
<div class="circle"></div>
|
||||
<!-- isMaterial -->
|
||||
<div class="store-name" v-if="isMaterial">物料店</div>
|
||||
<!-- v-if="storeID!=='666666' && storeMap" -->
|
||||
<div class="store-name" v-else >{{storeMap[storeID].name}}</div>
|
||||
<!-- <div class="store-name" v-else="storeID!=='666666'">物料店</div> -->
|
||||
</div>
|
||||
<!-- <div class="waybillSLG">
|
||||
<span >购满￥{{ waybillSLG.satisfy }}减￥{{waybillSLG.reduce}}运费</span>
|
||||
</div>
|
||||
<div style="display:flex">
|
||||
<div>去凑单</div>
|
||||
<div class="icon-right-aw"></div>
|
||||
</div> -->
|
||||
<!-- <div class="store-mobile" @click="call(storeMap[storeID].mobile)">{{storeMap[storeID].mobile}}</div> -->
|
||||
</div>
|
||||
<!-- style="border:1rpx solid red;" -->
|
||||
<div
|
||||
v-for="(skuName, index) in skuNamesNew"
|
||||
:key="index"
|
||||
class="skuName-item"
|
||||
:style="{'transform': 'translateX(' + skuName.offset + 'px)'}"
|
||||
@touchmove="touchmove_cart"
|
||||
@touchstart="touchstart_cart($event,index)"
|
||||
@touchend="touchend_cart"
|
||||
>
|
||||
<div class="skuName-cell">
|
||||
<check-item
|
||||
v-if="!isMaterial"
|
||||
@on-click="checkSkuName(skuName, index)"
|
||||
:checked="skuName.checked"
|
||||
></check-item>
|
||||
<good-cell
|
||||
:titleWidth="isMaterial?'482rpx':'412rpx'"
|
||||
ref="goodCell"
|
||||
class="flex-auto"
|
||||
:index="index"
|
||||
:skuName="skuName"
|
||||
:noBorder="true"
|
||||
:waitShow="false"
|
||||
type="cart"
|
||||
@handleSkuNamePlus="handleSkuNamePlus"
|
||||
@handleSkuNameMinus="handleSkuNameMinus($event, skuName)"
|
||||
@handleSkuNameChange="handleSkuNameChange"
|
||||
></good-cell>
|
||||
</div>
|
||||
<div class="delButton" @click.stop="del(index)" :style="delBtnHenght">删除</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GoodCell from "@/components/goodCmp/good-cell/good-cell.vue";
|
||||
import CheckItem from "@/components/checkItem/check-item.vue";
|
||||
import { errToast, modal } from "@/utils/uniapi.js";
|
||||
import { mapGetters } from "vuex";
|
||||
// import { msgData } from "@/config";
|
||||
export default {
|
||||
components: {
|
||||
GoodCell,
|
||||
CheckItem,
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
shopCar: true,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
storeID: {
|
||||
type: String,
|
||||
},
|
||||
skuNames: {
|
||||
type: Array,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checked: true,
|
||||
currentIndex: -1,
|
||||
skuNamesNew: [],
|
||||
moveX: 0,
|
||||
offsetDistance: 50,
|
||||
delBtnHenght:'height: 260rpx;' // 140rpx
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// console.log('打印手机系统信息', this.iosOrAndroid, '宽度', this.iosOrAndroid.screenWidth)
|
||||
if (this.iosOrAndroid && this.iosOrAndroid.screenWidth) {
|
||||
this.offsetDistance = (this.iosOrAndroid.screenWidth * 50) / 375
|
||||
// console.log('查看偏移的宽度',this.offsetDistance)
|
||||
}
|
||||
// 750 260*2
|
||||
// 1080 x
|
||||
// x = (this.iosOrAndroid.screenHeight *260*2 )/ (750 * 2)
|
||||
},
|
||||
watch: {
|
||||
skuNames: {
|
||||
handler(val) {
|
||||
this.skuNamesNew = []
|
||||
val.forEach((item,index) => {
|
||||
// #ifdef MP-WEIXIN
|
||||
if (item.checked === false && item.storeID === 666666 ) {
|
||||
this.checkSkuName(item,index)
|
||||
}
|
||||
// #endif
|
||||
this.skuNamesNew.push({
|
||||
...item,
|
||||
offset:0
|
||||
})
|
||||
});
|
||||
},
|
||||
immediate: true,
|
||||
deep:true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
storeMap:"indexPage/storeMap",
|
||||
isMaterial: "indexPage/isMaterial",
|
||||
iosOrAndroid: "iosOrAndroid"
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 删除商品
|
||||
async del(index) {
|
||||
this.handleSkuNameChange({index,count:0})
|
||||
},
|
||||
touchstart_cart(e, index) {
|
||||
// console.log('打印移动开始时的信息',e)
|
||||
if (this.currentIndex !== -1 && this.currentIndex !== index) {
|
||||
if (this.skuNamesNew[this.currentIndex]) {
|
||||
this.skuNamesNew[this.currentIndex].offset = 0
|
||||
}
|
||||
}
|
||||
this.moveX = e.changedTouches[0].pageX
|
||||
// this.skuNamesNew[index].offset = -50
|
||||
this.currentIndex = index
|
||||
},
|
||||
touchmove_cart(e) {
|
||||
let distance = 0
|
||||
|
||||
// 向右滑动
|
||||
if (e.changedTouches[0].pageX - this.moveX >= 0) {
|
||||
distance = 0
|
||||
// if (e.changedTouches[0].pageX - this.moveX >= 50) {
|
||||
// distance = 50
|
||||
// } else {
|
||||
// distance = e.changedTouches[0].pageX - this.moveX
|
||||
// }
|
||||
}
|
||||
|
||||
// 向左滑动
|
||||
if (e.changedTouches[0].pageX - this.moveX < 0) {
|
||||
if (Math.abs(e.changedTouches[0].pageX - this.moveX) >= this.offsetDistance) {
|
||||
// distance = -50
|
||||
distance = - this.offsetDistance
|
||||
} else {
|
||||
distance = 0 - Math.abs(e.changedTouches[0].pageX - this.moveX)
|
||||
}
|
||||
}
|
||||
|
||||
// 偏移
|
||||
this.skuNamesNew[this.currentIndex].offset = distance
|
||||
},
|
||||
// 手指松开后
|
||||
touchend_cart(e) {
|
||||
let distance = e.changedTouches[0].pageX - this.moveX
|
||||
if (distance >0) {
|
||||
// this.skuNamesNew[this.currentIndex].offset = distance >= 50?50: 0
|
||||
this.skuNamesNew[this.currentIndex].offset = 0
|
||||
}
|
||||
if(distance<0) {
|
||||
this.skuNamesNew[this.currentIndex].offset = Math.abs(distance) >= this.offsetDistance?0-this.offsetDistance: 0
|
||||
}
|
||||
},
|
||||
// 商品 +
|
||||
handleSkuNamePlus(index) {
|
||||
this.$emit("handleSkuNamePlus", {
|
||||
index,
|
||||
key: this.storeID,
|
||||
});
|
||||
},
|
||||
// 商品 -
|
||||
handleSkuNameMinus(index, skuName, count = 2) {
|
||||
// console.log('商品减少--------')
|
||||
this.$emit("handleSkuNameMinus", {
|
||||
index,
|
||||
key: this.storeID,
|
||||
countNew:count
|
||||
});
|
||||
},
|
||||
handleSkuNameChange({ index, count }) {
|
||||
this.$emit("handleSkuNameChange", {
|
||||
index,
|
||||
count,
|
||||
key: this.storeID,
|
||||
});
|
||||
},
|
||||
// check商品
|
||||
async checkSkuName(skuName, index) {
|
||||
try {
|
||||
|
||||
// 修改store里面
|
||||
await this.$store.dispatch("cartPage/checkSkuName", {
|
||||
skuName,
|
||||
checkStatus: !skuName.checked,
|
||||
});
|
||||
// 通知父级修改
|
||||
this.$emit("handleSkuNameCheck", {
|
||||
index,
|
||||
key: this.storeID,
|
||||
checkStatus: !skuName.checked,
|
||||
});
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
errToast(e);
|
||||
}
|
||||
},
|
||||
// 打电话
|
||||
async call(phoneNumber) {
|
||||
if (phoneNumber) {
|
||||
let confirm = await modal("拨打电话", "是否拨打门店电话");
|
||||
if (confirm) uni.makePhoneCall({ phoneNumber });
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@use "./car-group.scss";
|
||||
</style>
|
||||
Reference in New Issue
Block a user