121 lines
5.7 KiB
Vue
121 lines
5.7 KiB
Vue
<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>
|