hengmei-one/pagesA/shopCart/shopCart.vue

121 lines
5.7 KiB
Vue
Raw Normal View History

2021-10-21 09:21:59 +00:00
<template>
<view>
<!-- 状态栏 -->
<status-nav :titleVal="'购物车'" :statusTitle="true"></status-nav>
<view :style="{paddingTop: statusHNH+'px'}" class="pad-zy30">
<view class="bacf radius20 mar-s20 pad20">
<view class="fon28 col3 disjbac" style="height: 43rpx;">
<view class="bold">订单信息</view>
<view v-if="!cancle_del" @tap="cancle_del=true"></view>
<view v-else @tap="cancle_del=false" style="width: 113rpx;height: 43rpx;border-radius: 20rpx;background: #3875F6;text-align: center;color: #FFFFFF;line-height: 43rpx;">管理 ×</view>
</view>
<view>
<view class="disjbac pad-sx40 bbot posir" style="overflow: hidden;" @touchstart="moveStart" @touchend="moveEnd">
<view class="disjbac" :style="{marginLeft:showDel?'-70px':'',paddingRight:showDel?'70px':''}">
<!-- -->
<image src="/static/public/chooseFS.png" style="width: 40rpx;height: 40rpx;flex-shrink: 0;" mode=""></image>
<image src="/static/tabbar/mya.png" style="width: 166rpx;height: 166rpx;border-radius: 15rpx;flex-shrink: 0;margin: 0 12rpx 0 24rpx;" mode=""></image>
<view>
<view class="fon28 col3 bold clips2">99皮皮节种植发际线1000单位FUE技术案例招募门美人</view>
<view style="font-size: 22rpx;color: #808080;">试用</view>
<view class="disjbac mar-s10">
<view style="font-size: 32rpx;color: #F85050;font-weight: bold;">3888</view>
<view class="fon26 col3 disac bold" style="border-radius: 4rpx;overflow: hidden;">
<image src="/static/public/del.png" mode="" style="width: 46rpx;height: 26px;"></image>
<input type="text" value="1" style="width: 60rpx;height: 24px;text-align: center;border-top: 2rpx solid #3875F6;border-bottom: 2rpx solid #3875F6;"/>
<image src="/static/public/add.png" mode="" style="width: 46rpx;height: 26px;"></image>
</view>
</view>
</view>
</view>
<view v-if="showDel" style="width: 117rpx;height: 205rpx;background: #F85050;line-height: 205rpx;text-align: center;color: #FFFFFF;font-size: 24rpx;flex-shrink: 0;position: absolute;right: 0;bottom: 40rpx;top: 2rpx;"></view>
</view>
<view class="disjbac pad-sx40 bbot posir" style="overflow: hidden;" @touchstart="moveStart" @touchend="moveEnd">
<view class="disjbac" :style="{marginLeft:showDel?'-70px':'',paddingRight:showDel?'70px':''}">
<!-- -->
<image src="/static/public/cancle-FS.png" style="width: 40rpx;height: 40rpx;flex-shrink: 0;" mode=""></image>
<image src="/static/tabbar/mya.png" style="width: 166rpx;height: 166rpx;border-radius: 15rpx;flex-shrink: 0;margin: 0 12rpx 0 24rpx;" mode=""></image>
<view>
<view class="fon28 col3 bold clips2">99皮皮节种植发际线1000单位FUE技术案例招募门美人</view>
<view style="font-size: 22rpx;color: #808080;">试用</view>
<view class="disjbac mar-s10">
<view style="font-size: 32rpx;color: #F85050;font-weight: bold;">3888</view>
<view class="fon26 col3 disac bold" style="border-radius: 4rpx;overflow: hidden;">
<image src="/static/public/del.png" mode="" style="width: 46rpx;height: 26px;"></image>
<input type="text" value="1" style="width: 60rpx;height: 24px;text-align: center;border-top: 2rpx solid #3875F6;border-bottom: 2rpx solid #3875F6;"/>
<image src="/static/public/add.png" mode="" style="width: 46rpx;height: 26px;"></image>
</view>
</view>
</view>
</view>
<view v-if="showDel" style="width: 117rpx;height: 205rpx;background: #F85050;line-height: 205rpx;text-align: center;color: #FFFFFF;font-size: 24rpx;flex-shrink: 0;position: absolute;right: 0;bottom: 40rpx;top: 2rpx;"></view>
</view>
</view>
</view>
<view class="disjbac posixzy bacf" style="height: 124rpx;line-height: 124rpx;padding: 0 32rpx;">
<view class="disac">
<view style="width: 40rpx;height: 40rpx;border-radius: 100%;border: 2rpx solid #3875F6;flex-shrink: 0;display: flex;justify-content: center;align-items: center;">
<!-- <view style="width: 24rpx;height: 24rpx;background-color: #3875F6;border-radius: 100%;"></view> -->
</view>
<view class="fon28 col3 mar-z10">全选</view>
</view>
<!-- 去支付 -->
<view v-if="!cancle_del" class="disjbac">
<view>
<view class="fon28">合计<span class="fon40 bold" style="color: #F85050;">7166.00</span></view>
</view>
<view @tap="goGetReadyDan" style="color: #FFFFFF;font-size: 28rpx;font-weight: bold;width: 170rpx;height: 70rpx;line-height: 70rpx;text-align: center;background: #3875F6;border-radius: 35rpx;margin-left: 10rpx;">去支付</view>
</view>
<!-- 删除 -->
<view v-else style="color: #FFFFFF;font-size: 28rpx;font-weight: bold;width: 170rpx;height: 70rpx;line-height: 70rpx;text-align: center;background: #F85050;border-radius: 35rpx;">删除</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
statusHNH:uni.getStorageSync('statusHNH'),
publicColor:uni.getStorageSync('publicColor'),//主题颜色
showDel:false,
startX:'',//开始位置
endX:'',//结束位置
cancle_del:false
}
},
onShow() {
this.$toolAll.tools.isLogin()
},
onLoad() {
},
methods: {
clickGL(){
console.log('管理');
},
moveStart(e){
this.startX = e.touches[0].pageX
},
moveEnd(e){
this.endX = e.changedTouches[0].pageX
if(this.startX-this.endX>0){
this.showDel = true;
} else this.showDel = false;
},
goGetReadyDan(){
uni.navigateTo({
url:'/pagesA/getReadyDan/getReadyDan'
})
}
}
}
</script>
<style>
page {
background-color: #F5F5F5;
}
</style>