xingyy
xingyy 1 year ago
parent e710d39e5e
commit cd161f33f4

@ -31,9 +31,10 @@
</div>
<div class="content3">
<div @touchstart="touchStart"
@touchmove="touchMove"
@touchend="touchEnd" class="wrap1">
<div @touchstart="touchStart"
@touchmove="touchMove"
@touchend="touchEnd"
:style="{transform: `translateX(${distanceX}px)`}" class="wrap1">
<div class="wrap1_1">
<image src="../../static/jx632@3x.png"></image>
</div>
@ -45,9 +46,9 @@
</div>
<div class="wrap1_3">
<div class="wrap1_3_1">
<div class="wrap1_3_1_1">2023.09.28</div>
<div class="wrap1_3_1_2">已延期</div>
<div class="wrap1_3_1_3">点击补款</div>
<div class="wrap1_3_1_1">2023.09.28</div>
<div class="wrap1_3_1_2">已延期</div>
<div class="wrap1_3_1_3">点击补款</div>
</div>
<div class="wrap1_3_2">
<div class="wrap1_3_2_1">货架号:</div>
@ -55,7 +56,7 @@
</div>
</div>
<div class="wrap1_4">
<image style="width: 80rpx;height: 80rpx" src="../../static/zu154@3x.png"></image>
</div>
</div>
</div>
@ -68,16 +69,34 @@ import UImage from "../../uview-ui/components/u--image/u--image.vue";
export default {
name: "index",
data(){
return {
startX: 0,
distanceX: 0,
windowWidth:0,
}
},
components: {UImage, tabbar},
mounted(){
uni.getSystemInfo({
success:(res)=>{
this.windowWidth=res.windowWidth
}
})
},
methods:{
touchMove(){
console.log('touchMove')
touchMove(e){
this.distanceX = e.touches[0].clientX - this.startX;
},
touchStart(){
console.log('touchStart')
touchStart(e){
this.startX = e.touches[0].clientX;
},
touchEnd(){
console.log('touchEnd')
if (this.distanceX < -((144/750)*this.windowWidth)) {
this.distanceX = -((144/750)*this.windowWidth);
} else {
this.distanceX = 0;
}
}
}
}
@ -94,15 +113,29 @@ export default {
height: 100vh;
.content3{
margin-top: 28rpx;
overflow: hidden;
.wrap1{
overflow: hidden;
position: relative;
padding-left: 20rpx;
border-radius: 20rpx;
background-color: #fff;
height: 228rpx;
display: flex;
align-items: center;
.wrap1_4{
display: flex;
justify-content: center;
align-items: center;
height: 228rpx;
width: 154rpx;
background-color: #B7C0C8;
right: -144rpx;
position: absolute;
z-index: -1;
}
.wrap1_3{
border-top-right-radius: 20rpx;
border-bottom-right-radius: 20rpx;
display: flex;
margin-left: auto;
background-color: #FF4848;

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

File diff suppressed because one or more lines are too long

@ -158,7 +158,7 @@ __webpack_require__.r(__webpack_exports__);
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/* WEBPACK VAR INJECTION */(function(uni) {
Object.defineProperty(exports, "__esModule", {
value: true
@ -176,23 +176,43 @@ var UImage = function UImage() {
};
var _default = {
name: "index",
data: function data() {
return {
startX: 0,
distanceX: 0,
windowWidth: 0
};
},
components: {
UImage: UImage,
tabbar: tabbar
},
mounted: function mounted() {
var _this = this;
uni.getSystemInfo({
success: function success(res) {
_this.windowWidth = res.windowWidth;
}
});
},
methods: {
touchMove: function touchMove() {
console.log('touchMove');
touchMove: function touchMove(e) {
this.distanceX = e.touches[0].clientX - this.startX;
},
touchStart: function touchStart() {
console.log('touchStart');
touchStart: function touchStart(e) {
this.startX = e.touches[0].clientX;
},
touchEnd: function touchEnd() {
console.log('touchEnd');
if (this.distanceX < -(144 / 750 * this.windowWidth)) {
this.distanceX = -(144 / 750 * this.windowWidth);
} else {
this.distanceX = 0;
}
}
}
};
exports.default = _default;
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./node_modules/@dcloudio/uni-mp-weixin/dist/index.js */ 2)["default"]))
/***/ }),

@ -1 +1 @@
<view class="order-goods _div data-v-c0c42e9e" style="{{'background:'+('url('+'../../static/bbj1@3x.png'+')')+';'}}"><view class="content1 _div data-v-c0c42e9e"><view class="wrap1 _div data-v-c0c42e9e"><tm-menu vue-id="541fae75-1" list="{{['已延期','即将到期']}}" class="data-v-c0c42e9e" bind:__l="__l" vue-slots="{{['default']}}"><view class="wrap1_1 _div data-v-c0c42e9e"><view class="wrap1_1_1 _div data-v-c0c42e9e">全部状态</view><image style="width:12rpx;height:8rpx;" src="../../static/dbx2@3x.png" class="data-v-c0c42e9e"></image></view></tm-menu></view><view class="wrap2 _div data-v-c0c42e9e"><view class="wrap2_1 _div data-v-c0c42e9e">订单库</view><view class="wrap2_2 _div data-v-c0c42e9e">*滑动删除</view><view class="_div data-v-c0c42e9e"></view></view><view class="wrap3 _div data-v-c0c42e9e">上传</view></view><view class="content2 _div data-v-c0c42e9e"><view class="wrap1 _div data-v-c0c42e9e"><view class="wrap1_1 _div data-v-c0c42e9e"><image src="../../static/zu1@3x.png" class="data-v-c0c42e9e"></image></view><view class="wrap1_2 _div data-v-c0c42e9e"></view><input placeholder-style="color: #C7C7C7;font-size: 20rpx;" placeholder="在此处搜索您的订单" class="data-v-c0c42e9e"/></view><view class="wrap2 _div data-v-c0c42e9e">搜索</view></view><view class="content3 _div data-v-c0c42e9e"><view data-event-opts="{{[['touchstart',[['touchStart',['$event']]]],['touchmove',[['touchMove',['$event']]]],['touchend',[['touchEnd',['$event']]]]]}}" class="wrap1 _div data-v-c0c42e9e" bindtouchstart="__e" bindtouchmove="__e" bindtouchend="__e"><view class="wrap1_1 _div data-v-c0c42e9e"><image src="../../static/jx632@3x.png" class="data-v-c0c42e9e"></image></view><view class="wrap1_2 _div data-v-c0c42e9e"><view class="wrap1_2_1 _div data-v-c0c42e9e">画作的名称</view><view class="wrap1_2_2 _div data-v-c0c42e9e">订单号:0129181232101</view><view class="wrap1_2_3 _div data-v-c0c42e9e">16平尺</view><view class="wrap1_2_4 _div data-v-c0c42e9e">2023.09.01-2023.09.18</view></view><view class="wrap1_3 _div data-v-c0c42e9e"><view class="wrap1_3_1 _div data-v-c0c42e9e"><view class="wrap1_3_1_1 _div data-v-c0c42e9e">2023.09.28</view><view class="wrap1_3_1_2 _div data-v-c0c42e9e">已延期</view><view class="wrap1_3_1_3 _div data-v-c0c42e9e">点击补款</view></view><view class="wrap1_3_2 _div data-v-c0c42e9e"><view class="wrap1_3_2_1 _div data-v-c0c42e9e">货架号:</view><view class="wrap1_3_2_2 _div data-v-c0c42e9e">12-02-13</view></view></view><view class="wrap1_4 _div data-v-c0c42e9e"></view></view></view><tabbar vue-id="541fae75-2" current="{{1}}" class="data-v-c0c42e9e" bind:__l="__l"></tabbar></view>
<view class="order-goods _div data-v-c0c42e9e" style="{{'background:'+('url('+'../../static/bbj1@3x.png'+')')+';'}}"><view class="content1 _div data-v-c0c42e9e"><view class="wrap1 _div data-v-c0c42e9e"><tm-menu vue-id="541fae75-1" list="{{['已延期','即将到期']}}" class="data-v-c0c42e9e" bind:__l="__l" vue-slots="{{['default']}}"><view class="wrap1_1 _div data-v-c0c42e9e"><view class="wrap1_1_1 _div data-v-c0c42e9e">全部状态</view><image style="width:12rpx;height:8rpx;" src="../../static/dbx2@3x.png" class="data-v-c0c42e9e"></image></view></tm-menu></view><view class="wrap2 _div data-v-c0c42e9e"><view class="wrap2_1 _div data-v-c0c42e9e">订单库</view><view class="wrap2_2 _div data-v-c0c42e9e">*滑动删除</view><view class="_div data-v-c0c42e9e"></view></view><view class="wrap3 _div data-v-c0c42e9e">上传</view></view><view class="content2 _div data-v-c0c42e9e"><view class="wrap1 _div data-v-c0c42e9e"><view class="wrap1_1 _div data-v-c0c42e9e"><image src="../../static/zu1@3x.png" class="data-v-c0c42e9e"></image></view><view class="wrap1_2 _div data-v-c0c42e9e"></view><input placeholder-style="color: #C7C7C7;font-size: 20rpx;" placeholder="在此处搜索您的订单" class="data-v-c0c42e9e"/></view><view class="wrap2 _div data-v-c0c42e9e">搜索</view></view><view class="content3 _div data-v-c0c42e9e"><view data-event-opts="{{[['touchstart',[['touchStart',['$event']]]],['touchmove',[['touchMove',['$event']]]],['touchend',[['touchEnd',['$event']]]]]}}" class="wrap1 _div data-v-c0c42e9e" style="{{'transform:'+('translateX('+distanceX+'px)')+';'}}" bindtouchstart="__e" bindtouchmove="__e" bindtouchend="__e"><view class="wrap1_1 _div data-v-c0c42e9e"><image src="../../static/jx632@3x.png" class="data-v-c0c42e9e"></image></view><view class="wrap1_2 _div data-v-c0c42e9e"><view class="wrap1_2_1 _div data-v-c0c42e9e">画作的名称</view><view class="wrap1_2_2 _div data-v-c0c42e9e">订单号:0129181232101</view><view class="wrap1_2_3 _div data-v-c0c42e9e">16平尺</view><view class="wrap1_2_4 _div data-v-c0c42e9e">2023.09.01-2023.09.18</view></view><view class="wrap1_3 _div data-v-c0c42e9e"><view class="wrap1_3_1 _div data-v-c0c42e9e"><view class="wrap1_3_1_1 _div data-v-c0c42e9e">2023.09.28</view><view class="wrap1_3_1_2 _div data-v-c0c42e9e">已延期</view><view class="wrap1_3_1_3 _div data-v-c0c42e9e">点击补款</view></view><view class="wrap1_3_2 _div data-v-c0c42e9e"><view class="wrap1_3_2_1 _div data-v-c0c42e9e">货架号:</view><view class="wrap1_3_2_2 _div data-v-c0c42e9e">12-02-13</view></view></view><view class="wrap1_4 _div data-v-c0c42e9e"><image style="width:80rpx;height:80rpx;" src="../../static/zu154@3x.png" class="data-v-c0c42e9e"></image></view></view></view><tabbar vue-id="541fae75-2" current="{{1}}" class="data-v-c0c42e9e" bind:__l="__l"></tabbar></view>
Loading…
Cancel
Save