订单列表添加
This commit is contained in:
邝军华
parent
a2c0378c08
commit
214f185512
@ -91,7 +91,7 @@
|
||||
<view class="cont conttop">
|
||||
<view class="cont_title">订单备注</view>
|
||||
<view class="cont_textarea">
|
||||
<textarea class="cont_textarea_text" placeholder="有其他要求和在此填写，我们将尽力配合，但仍可能 存在无法满足的的情况，请您谅解~"></textarea>
|
||||
<textarea class="cont_textarea_text" placeholder="选填,可以告诉我们您的特殊需求"></textarea>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 200rpx;"></view>
|
||||
@ -157,74 +157,6 @@
|
||||
<view class="coupon_item_r_r"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coupon_item">
|
||||
<view class="coupon_item_l">
|
||||
<view class="coupon_item_absolute"></view>
|
||||
<view class="coupon_item_v">
|
||||
<view class="coupon_item_price">100</view>
|
||||
<view class="coupon_item_desc">满39可用</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coupon_item_border"></view>
|
||||
<view class="coupon_item_r">
|
||||
<view class="coupon_item_r_l">
|
||||
<view class="coupon_item_name">新人限时券</view>
|
||||
<view class="coupon_item_time">今日23:59到期</view>
|
||||
</view>
|
||||
<view class="coupon_item_r_r"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coupon_item">
|
||||
<view class="coupon_item_l">
|
||||
<view class="coupon_item_absolute"></view>
|
||||
<view class="coupon_item_v">
|
||||
<view class="coupon_item_price">100</view>
|
||||
<view class="coupon_item_desc">满39可用</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coupon_item_border"></view>
|
||||
<view class="coupon_item_r">
|
||||
<view class="coupon_item_r_l">
|
||||
<view class="coupon_item_name">新人限时券</view>
|
||||
<view class="coupon_item_time">今日23:59到期</view>
|
||||
</view>
|
||||
<view class="coupon_item_r_r"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coupon_item">
|
||||
<view class="coupon_item_l">
|
||||
<view class="coupon_item_absolute"></view>
|
||||
<view class="coupon_item_v">
|
||||
<view class="coupon_item_price">100</view>
|
||||
<view class="coupon_item_desc">满39可用</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coupon_item_border"></view>
|
||||
<view class="coupon_item_r">
|
||||
<view class="coupon_item_r_l">
|
||||
<view class="coupon_item_name">新人限时券</view>
|
||||
<view class="coupon_item_time">今日23:59到期</view>
|
||||
</view>
|
||||
<view class="coupon_item_r_r"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coupon_item">
|
||||
<view class="coupon_item_l">
|
||||
<view class="coupon_item_absolute"></view>
|
||||
<view class="coupon_item_v">
|
||||
<view class="coupon_item_price">100</view>
|
||||
<view class="coupon_item_desc">满39可用</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coupon_item_border"></view>
|
||||
<view class="coupon_item_r">
|
||||
<view class="coupon_item_r_l">
|
||||
<view class="coupon_item_name">新人限时券</view>
|
||||
<view class="coupon_item_time">今日23:59到期</view>
|
||||
</view>
|
||||
<view class="coupon_item_r_r"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 150rpx;"></view>
|
||||
</view>
|
||||
<view class="coupon_item_bottom" @click="OpenCoupon()">不使用优惠券</view>
|
||||
@ -243,7 +175,6 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
|
||||
import { computed,ref } from 'vue';
|
||||
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
|
||||
import { storeToRefs } from 'pinia';//实现解构付值
|
||||
@ -257,6 +188,7 @@ const couponShow = ref(false);
|
||||
const timePopup = ref(null);
|
||||
const timeShow = ref(false);
|
||||
const show = ref(false);
|
||||
const timList = ref([]);
|
||||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||||
//const { count,doubleCount } = storeToRefs(counterStore);
|
||||
const OpenShop = ()=>{
|
||||
@ -280,8 +212,36 @@ const changeTime = (e)=>{
|
||||
timeShow.value = e.show;
|
||||
show.value = e.show;
|
||||
};
|
||||
const timeFun = (e)=>{
|
||||
const time = [{id:1,name:'今天',list:[
|
||||
{id:1,text:'立即配送(预计13:54送达)'},
|
||||
{id:2,text:'14:00-14:30'},
|
||||
{id:3,text:'14:00-14:30'},
|
||||
{id:4,text:'14:00-14:30'},
|
||||
{id:5,text:'14:00-14:30'},
|
||||
{id:6,text:'14:00-14:30'},
|
||||
{id:7,text:'14:00-14:30'},
|
||||
{id:8,text:'14:00-14:30'},
|
||||
{id:9,text:'14:00-14:30'},
|
||||
{id:10,text:'14:00-14:30'},
|
||||
{id:11,text:'14:00-14:30'},
|
||||
]},{id:2,name:'明天 周三',list:[
|
||||
{id:1,text:'立即配送(预计13:54送达)'},
|
||||
{id:2,text:'14:00-14:30'},
|
||||
{id:3,text:'14:00-14:30'},
|
||||
{id:4,text:'14:00-14:30'},
|
||||
{id:5,text:'14:00-14:30'},
|
||||
{id:6,text:'14:00-14:30'},
|
||||
{id:7,text:'14:00-14:30'},
|
||||
{id:8,text:'14:00-14:30'},
|
||||
{id:9,text:'14:00-14:30'},
|
||||
{id:10,text:'14:00-14:30'},
|
||||
{id:11,text:'14:00-14:30'},
|
||||
]}]
|
||||
timList.value = time;
|
||||
}
|
||||
onLoad((options) => {
|
||||
|
||||
timeFun();
|
||||
});
|
||||
onShow(() => {
|
||||
|
||||
|
||||
@ -393,8 +393,8 @@ page{
|
||||
justify-content: center;
|
||||
}
|
||||
.shop_open_close image{
|
||||
width: 45rpx;
|
||||
height: 45rpx;
|
||||
width: 55rpx;
|
||||
height: 55rpx;
|
||||
}
|
||||
}
|
||||
// 订单商品
|
||||
|
||||
264
order/orderList/orderList.vue
Normal file
264
order/orderList/orderList.vue
Normal file
@ -0,0 +1,264 @@
|
||||
<template>
|
||||
<view class="main">
|
||||
<view class="head" :style="{'padding-top':headerHeight+'px'}">
|
||||
<view class="head_top">
|
||||
<view class="head_back" @click="handleBack()" :style="{'width': statusHeight+'px','height':statusHeight+'px'}">
|
||||
<image class="head_back_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/newPD/zhBack.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="head_search">
|
||||
<image class="head_search_img" src="../../static/search_img.png" mode="widthFix"></image>
|
||||
<input class="head_search_input" type="text" placeholder="请输入搜索内容" v-model="searchtext"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order_nav">
|
||||
<view class="order_nav_item" v-for="(item,index) in navList" :key="index" :class="active == index?'order_nav_active':''" @click="clickOrder(index)">
|
||||
<view class="order_nav_name">{{item}}</view>
|
||||
<view class="order_nav_m"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order_cont" :style="{'padding-top':94+headerHeight+'px'}">
|
||||
<view class="order_list">
|
||||
<view class="order_type">已完成</view>
|
||||
<view class="order_time">2025/1/15 17:20 周三</view>
|
||||
<view class="order_scroll">
|
||||
<scroll-view class="order_scroll_ul" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false" scroll-x="true">
|
||||
<view class="order_scroll_li">
|
||||
<view class="order_scroll_img">
|
||||
<image class="order_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order_scroll_li">
|
||||
<view class="order_scroll_img">
|
||||
<image class="order_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order_scroll_li">
|
||||
<view class="order_scroll_img">
|
||||
<image class="order_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order_scroll_li">
|
||||
<view class="order_scroll_img">
|
||||
<image class="order_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order_scroll_li">
|
||||
<view class="order_scroll_img">
|
||||
<image class="order_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="order_x">共3件、 实付:<text class="order_price">485</text></view>
|
||||
<view class="order_bottom">
|
||||
<view class="order_l">更多</view>
|
||||
<view class="order_r">
|
||||
<view class="order_btn">申请售后</view>
|
||||
<view class="order_btn order_bcg">再来一单</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order_list">
|
||||
<view class="order_type">已完成</view>
|
||||
<view class="order_time">2025/1/15 17:20 周三</view>
|
||||
<view class="order_scroll">
|
||||
<scroll-view class="order_scroll_ul" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false" scroll-x="true">
|
||||
<view class="order_scroll_li">
|
||||
<view class="order_scroll_img">
|
||||
<image class="order_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="order_x">共3件、 实付:<text class="order_price">485</text></view>
|
||||
<view class="order_bottom">
|
||||
<view class="order_l">更多</view>
|
||||
<view class="order_r">
|
||||
<view class="order_btn">申请售后</view>
|
||||
<view class="order_btn order_bcg">再来一单</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order_list">
|
||||
<view class="order_type">已完成</view>
|
||||
<view class="order_time">2025/1/15 17:20 周三</view>
|
||||
<view class="order_scroll">
|
||||
<scroll-view class="order_scroll_ul" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false" scroll-x="true">
|
||||
<view class="order_scroll_li">
|
||||
<view class="order_scroll_img">
|
||||
<image class="order_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="order_x">共3件、 实付:<text class="order_price">485</text></view>
|
||||
<view class="order_bottom">
|
||||
<view class="order_l">更多</view>
|
||||
<view class="order_r">
|
||||
<view class="order_btn">申请售后</view>
|
||||
<view class="order_btn order_bcg">再来一单</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order_list">
|
||||
<view class="order_type">已完成</view>
|
||||
<view class="order_time">2025/1/15 17:20 周三</view>
|
||||
<view class="order_scroll">
|
||||
<scroll-view class="order_scroll_ul" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false" scroll-x="true">
|
||||
<view class="order_scroll_li">
|
||||
<view class="order_scroll_img">
|
||||
<image class="order_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="order_x">共3件、 实付:<text class="order_price">485</text></view>
|
||||
<view class="order_bottom">
|
||||
<view class="order_l">更多</view>
|
||||
<view class="order_r">
|
||||
<view class="order_btn">申请售后</view>
|
||||
<view class="order_btn order_bcg">再来一单</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order_list">
|
||||
<view class="order_type">已完成</view>
|
||||
<view class="order_time">2025/1/15 17:20 周三</view>
|
||||
<view class="order_scroll">
|
||||
<scroll-view class="order_scroll_ul" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false" scroll-x="true">
|
||||
<view class="order_scroll_li">
|
||||
<view class="order_scroll_img">
|
||||
<image class="order_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="order_x">共3件、 实付:<text class="order_price">485</text></view>
|
||||
<view class="order_bottom">
|
||||
<view class="order_l">更多</view>
|
||||
<view class="order_r">
|
||||
<view class="order_btn">申请售后</view>
|
||||
<view class="order_btn order_bcg">再来一单</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order_list">
|
||||
<view class="order_type">已完成</view>
|
||||
<view class="order_time">2025/1/15 17:20 周三</view>
|
||||
<view class="order_scroll">
|
||||
<scroll-view class="order_scroll_ul" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false" scroll-x="true">
|
||||
<view class="order_scroll_li">
|
||||
<view class="order_scroll_img">
|
||||
<image class="order_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="order_x">共3件、 实付:<text class="order_price">485</text></view>
|
||||
<view class="order_bottom">
|
||||
<view class="order_l">更多</view>
|
||||
<view class="order_r">
|
||||
<view class="order_btn">申请售后</view>
|
||||
<view class="order_btn order_bcg">再来一单</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order_list">
|
||||
<view class="order_type">已完成</view>
|
||||
<view class="order_time">2025/1/15 17:20 周三</view>
|
||||
<view class="order_scroll">
|
||||
<scroll-view class="order_scroll_ul" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false" scroll-x="true">
|
||||
<view class="order_scroll_li">
|
||||
<view class="order_scroll_img">
|
||||
<image class="order_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="order_x">共3件、 实付:<text class="order_price">485</text></view>
|
||||
<view class="order_bottom">
|
||||
<view class="order_l">更多</view>
|
||||
<view class="order_r">
|
||||
<view class="order_btn">申请售后</view>
|
||||
<view class="order_btn order_bcg">再来一单</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order_list">
|
||||
<view class="order_type">已完成</view>
|
||||
<view class="order_time">2025/1/15 17:20 周三</view>
|
||||
<view class="order_scroll">
|
||||
<scroll-view class="order_scroll_ul" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false" scroll-x="true">
|
||||
<view class="order_scroll_li">
|
||||
<view class="order_scroll_img">
|
||||
<image class="order_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="order_x">共3件、 实付:<text class="order_price">485</text></view>
|
||||
<view class="order_bottom">
|
||||
<view class="order_l">更多</view>
|
||||
<view class="order_r">
|
||||
<view class="order_btn">申请售后</view>
|
||||
<view class="order_btn order_bcg">再来一单</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 100rpx;"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref,computed } from 'vue';
|
||||
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
|
||||
import { storeToRefs } from 'pinia';//实现解构付值
|
||||
import { onLoad,onShow,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
|
||||
const counterStore = useCounterStore(); // 使用 Store
|
||||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||||
const {statusHeight,headerHeight,statusBartop,ButtonWidth,ButtonHeight } = storeToRefs(counterStore);
|
||||
const navList = ref(['全部','待支付','备货中','待收货','待评价']);
|
||||
const active = ref(0);
|
||||
// 判断是否有上一页
|
||||
const getPages = () => {
|
||||
const pages = getCurrentPages();
|
||||
return pages.length > 1;
|
||||
};
|
||||
const handleBack = () => {
|
||||
if (getPages()) {
|
||||
// 如果有上一页，返回上一页
|
||||
uni.navigateBack();
|
||||
} else {
|
||||
// 如果没有上一页，返回首页
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index',
|
||||
});
|
||||
}
|
||||
};
|
||||
const clickOrder=(index)=>{
|
||||
active.value = index;
|
||||
}
|
||||
//使用 uni.onLoad 监听页面加载
|
||||
onLoad((options) => {
|
||||
const { type } = options;
|
||||
if(type == 0 || type == 1 || type == 2 || type == 3 || type == 4 ){
|
||||
active.value = type;
|
||||
}
|
||||
|
||||
});
|
||||
onShow(() => {
|
||||
|
||||
});
|
||||
onPullDownRefresh(()=>{
|
||||
uni.stopPullDownRefresh();
|
||||
})
|
||||
onReachBottom(()=>{
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
220
order/orderList/style.scss
Normal file
220
order/orderList/style.scss
Normal file
@ -0,0 +1,220 @@
|
||||
page{
|
||||
background: #f6f6f6;
|
||||
}
|
||||
.main{
|
||||
.head{
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: #FFFFFF;
|
||||
border-bottom: 1rpx solid #f6f6f6;
|
||||
.head_top{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.head_back{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 50rpx;
|
||||
margin-left: 10px;
|
||||
.head_back_img{
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-left: 7px;
|
||||
}
|
||||
}
|
||||
.head_search{
|
||||
width: 210px;
|
||||
margin:0rpx 0px 0rpx 10px;;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #F6F6F6;
|
||||
height: 38px;
|
||||
border-radius: 50rpx;
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
justify-content: space-between;
|
||||
.head_search_img{
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-right: 13rpx;
|
||||
margin-left: 23rpx;
|
||||
}
|
||||
.head_search_input{
|
||||
width: 500rpx;
|
||||
height: 100%;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.order_nav{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
background-color: #ffffff;
|
||||
height: 48px;
|
||||
margin-top: 5px;
|
||||
.order_nav_item{
|
||||
font-size: 28rpx;
|
||||
width: 20%;
|
||||
.order_nav_name{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: 35px;
|
||||
color: #666666;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
.order_nav_m{
|
||||
margin: 0 auto;
|
||||
width: 28px;
|
||||
height: 10px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.order_nav_active{
|
||||
.order_nav_name{
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
}
|
||||
.order_nav_m{
|
||||
background: url(../../static/act.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.order_cont{
|
||||
.order_list{
|
||||
margin: 20rpx 20rpx 0 20rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 25rpx 0 25rpx;
|
||||
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
|
||||
.order_type{
|
||||
font-size: 34rpx;
|
||||
color: #000000;
|
||||
font-weight: 500;
|
||||
padding: 25rpx 0 25rpx 0;
|
||||
}
|
||||
.order_time{
|
||||
color: #999999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.order_scroll{
|
||||
width:100%;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin-top: 25rpx;
|
||||
.order_scroll_ul{
|
||||
.order_scroll_li{
|
||||
width: 138rpx;
|
||||
display: inline-block;
|
||||
margin-right: 20rpx;
|
||||
.order_scroll_img{
|
||||
background: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
width: 138rpx;
|
||||
height: 138rpx;
|
||||
overflow: hidden;
|
||||
border: 1rpx solid #F3F3F3;
|
||||
.order_scroll_img_url{
|
||||
width: 138rpx;
|
||||
height: 138rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.order_scroll_title{
|
||||
color: #333333;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
white-space: break-spaces;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.order_scroll_price{
|
||||
font-size: 32rpx;
|
||||
color: #FF0000;
|
||||
font-weight: 500;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.order_scroll_market_name{
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
text-decoration: line-through;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.order_x{
|
||||
color: #333333;
|
||||
font-size: 28rpx;
|
||||
text-align: right;
|
||||
.order_price{
|
||||
font-size: 34rpx;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
}
|
||||
.order_price::before{
|
||||
content: "¥";
|
||||
font-size: 26rpx;
|
||||
margin: 0 5rpx 0 5rpx;
|
||||
}
|
||||
}
|
||||
.order_bottom{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 25rpx 0 25rpx 0;
|
||||
.order_l{
|
||||
color: #333333;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.order_r{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.order_btn{
|
||||
width: 158rpx;
|
||||
height: 64rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 33rpx;
|
||||
border: 1rpx solid #D9D9D9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999999;
|
||||
font-size: 26rpx;
|
||||
margin-left: 25rpx;
|
||||
}
|
||||
.order_bcg{
|
||||
width: 158rpx;
|
||||
height: 64rpx;
|
||||
background: #FF0000;
|
||||
border-radius: 33rpx;
|
||||
border: 1rpx solid #FF0000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
15
pages.json
15
pages.json
@ -89,6 +89,13 @@
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "evallist/evallist",
|
||||
"style": {
|
||||
"navigationBarTitleText": "评价",
|
||||
"navigationBarBackgroundColor": "#FFFFFF"
|
||||
}
|
||||
}]
|
||||
},
|
||||
{
|
||||
@ -99,6 +106,14 @@
|
||||
"navigationBarTitleText": "确认订单",
|
||||
"navigationBarBackgroundColor": "#FCEEEF"
|
||||
}
|
||||
},{
|
||||
"path": "orderList/orderList",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的订单",
|
||||
"navigationBarBackgroundColor": "#FCEEEF",
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
}]
|
||||
}
|
||||
],
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<template>
|
||||
<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
|
||||
<view class="main">
|
||||
<!-- 头部区域 -->
|
||||
<view class="head" :style="{'padding-top':headerHeight+'px'}">
|
||||
@ -9,118 +10,87 @@
|
||||
<view class="head_w">我常买</view>
|
||||
</view>
|
||||
<view class="head_r">
|
||||
<view class="head_li">优惠券(3）</view>
|
||||
<view class="head_li">管理</view>
|
||||
<view class="head_li" @click="OpenCoupon()">优惠券(3）</view>
|
||||
<view class="head_li" :class="showEdit?'head_edit':''" @click="edit">{{showEdit?'退出管理':'管理'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cart" :style="{'padding-top':85+headerHeight+'px'}">
|
||||
<view class="cart_item">
|
||||
<view class="cart_selected">
|
||||
<view class="cart_selected_false"></view>
|
||||
</view>
|
||||
<view class="cart_shop">
|
||||
<image class="cart_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="cart_shop_cont">
|
||||
<view class="cart_title">火锅配菜青菜</view>
|
||||
<view class="cart_desc">比加入时下降1.1元</view>
|
||||
<view class="cart_bottom">
|
||||
<view class="cart_price price">43.9<text class="market_name prices">59.9</text></view>
|
||||
<view class="cart_counter">
|
||||
<view class="cart_counter_btn border_l">
|
||||
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
|
||||
<view style="height: 10rpx;"></view>
|
||||
<uni-swipe-action>
|
||||
<uni-swipe-action-item v-for="(item,index) in cartList" :key="index" :right-options="options" @click="removeCart(1,item)">
|
||||
<view class="cart_item" v-if="item.type == 1">
|
||||
<view class="cart_selected" @click="checkedShop(item)">
|
||||
<view :class="item.isSelected === '1'?'cart_selected_true':'cart_selected_false'">
|
||||
<image v-if="item.isSelected" src="../../static/selected.png"></image>
|
||||
</view>
|
||||
<view class="cart_counter_center">1</view>
|
||||
<view class="cart_counter_btn border_r">
|
||||
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="cart_shop">
|
||||
<image class="cart_shop_img" :src="item.imgUrl" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="cart_shop_cont">
|
||||
<view class="cart_title">{{item.title}}</view>
|
||||
<view class="cart_desc">{{item.desc}}</view>
|
||||
<view class="cart_bottom">
|
||||
<view class="cart_price price">{{item.price}}<text class="market_name prices">59.9</text></view>
|
||||
<view class="cart_counter" v-if="showEdit" @click="removeCart(1,item)">
|
||||
<view class="cart_remove">删除</view>
|
||||
</view>
|
||||
<view class="cart_counter" v-else>
|
||||
<view class="cart_counter_btn border_l" @click="editAmount(1,item)">
|
||||
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="cart_counter_center">{{item.amount}}</view>
|
||||
<view class="cart_counter_btn border_r" @click="editAmount(2,item)">
|
||||
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cart_item">
|
||||
<view class="cart_selected">
|
||||
<view class="cart_selected_false"></view>
|
||||
</view>
|
||||
<view class="cart_shop">
|
||||
<image class="cart_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="cart_shop_cont">
|
||||
<view class="cart_title">火锅配菜青菜</view>
|
||||
<view class="cart_desc">比加入时下降1.1元</view>
|
||||
<view class="cart_bottom">
|
||||
<view class="cart_price price">43.9<text class="market_name prices">59.9</text></view>
|
||||
<view class="cart_counter">
|
||||
<view class="cart_counter_btn border_l">
|
||||
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
|
||||
<view class="cart_items" v-if="item.type == 2">
|
||||
<view class="cart_t">
|
||||
<view class="cart_selected">
|
||||
<view :class="item.isSelected?'cart_selected_true':'cart_selected_false'">
|
||||
<image v-if="item.isSelected" src="../../static/selected.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cart_counter_center">1</view>
|
||||
<view class="cart_counter_btn border_r">
|
||||
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
|
||||
<view class="cart_view_scroll">
|
||||
<view class="cart_scroll">
|
||||
<scroll-view class="cart_scroll_ul" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false" scroll-x="true">
|
||||
<view class="cart_scroll_li" v-for="(i,index) in item.list">
|
||||
<view class="cart_scroll_img">
|
||||
<image class="cart_scroll_img_url" :src="i.imgUrl" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="cart_scroll_title">{{i.title}}</view>
|
||||
<view class="cart_scroll_price price">{{i.price}}<text class="market_name prices">59.9</text></view>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="cart_bottom">
|
||||
<view class=""></view>
|
||||
<view class="cart_counter" v-if="showEdit" @click="removeCart(1,item)">
|
||||
<view class="cart_remove">删除</view>
|
||||
</view>
|
||||
<view class="cart_counter" v-else>
|
||||
<view class="cart_counter_btn border_l">
|
||||
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="cart_counter_center">1</view>
|
||||
<view class="cart_counter_btn border_r">
|
||||
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<view class="cart_items">
|
||||
<view class="cart_t">
|
||||
<view class="cart_selected">
|
||||
<view class="cart_selected_false"></view>
|
||||
</view>
|
||||
<view class="cart_scroll">
|
||||
<scroll-view class="cart_scroll_ul" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false" scroll-x="true">
|
||||
<view class="cart_scroll_li">
|
||||
<view class="cart_scroll_img">
|
||||
<image class="cart_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="cart_scroll_title">火锅配菜青菜</view>
|
||||
<view class="cart_scroll_price price">43.9<text class="market_name prices">59.9</text></view>
|
||||
</view>
|
||||
<view class="cart_scroll_li">
|
||||
<view class="cart_scroll_img">
|
||||
<image class="cart_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="cart_scroll_title">火锅配菜青菜</view>
|
||||
<view class="cart_scroll_price price">43.9<text class="market_name prices">59.9</text></view>
|
||||
</view>
|
||||
<view class="cart_scroll_li">
|
||||
<view class="cart_scroll_img">
|
||||
<image class="cart_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="cart_scroll_title">火锅配菜青菜</view>
|
||||
<view class="cart_scroll_price price">43.9<text class="market_name prices">59.9</text></view>
|
||||
</view>
|
||||
<view class="cart_scroll_li">
|
||||
<view class="cart_scroll_img">
|
||||
<image class="cart_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="cart_scroll_title">火锅配菜青菜</view>
|
||||
<view class="cart_scroll_price price">43.9<text class="market_name prices">59.9</text></view>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cart_bottom">
|
||||
<view class=""></view>
|
||||
<view class="cart_counter">
|
||||
<view class="cart_counter_btn border_l">
|
||||
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="cart_counter_center">1</view>
|
||||
<view class="cart_counter_btn border_r">
|
||||
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</uni-swipe-action-item>
|
||||
</uni-swipe-action>
|
||||
<!-- 失效商品 -->
|
||||
<view class="cart_lose">
|
||||
<!-- <view class="cart_lose">
|
||||
<view class="cart_lose_top">
|
||||
<view class="cart_lose_top_l">共5款失效商品</view>
|
||||
<view class="cart_lose_top_r">一键清空</view>
|
||||
@ -149,18 +119,13 @@
|
||||
<view class="cart_lose_desc">商品下架了</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="user_title">
|
||||
<view class="user_title" v-if="!showEdit">
|
||||
<text class="user_name">为您推荐</text>
|
||||
</view>
|
||||
|
||||
<!-- 商品区域 -->
|
||||
<view class="shop_view">
|
||||
<view class="shop_view" v-if="!showEdit">
|
||||
<view class="shop_view_ul">
|
||||
<view class="shop_view_li" @click="goDetail()">
|
||||
<view class="shop_view_img">
|
||||
@ -280,32 +245,108 @@
|
||||
<view style="height: 200rpx;"></view>
|
||||
<view class="footer">
|
||||
<view class="footer_l">
|
||||
<view class="footer_selected">
|
||||
<view class="footer_selected_false"></view>
|
||||
<view class="footer_selected" @click="allChecked">
|
||||
<view :class="allCheckedShow?'footer_selected_true':'footer_selected_false'">
|
||||
<image v-if="allCheckedShow" src="../../static/selected.png"></image>
|
||||
</view>
|
||||
<view class="footer_text">全选</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer_r">
|
||||
<view class="footer_v">
|
||||
<view class="footer_text">合计:</view>
|
||||
<view class="footer_price">39.9</view>
|
||||
<view class="footer_edit" v-if="showEdit">
|
||||
<view class="footer_edit_li footer_edit_li_border" @click="removeCart(2)">一键清空</view>
|
||||
<view class="footer_edit_li" @click="removeCart(3)">删除</view>
|
||||
</view>
|
||||
<view class="footer_btn" @click="orderConfirm">去下单</view>
|
||||
<block v-else>
|
||||
<view class="footer_v">
|
||||
<view class="footer_text">合计:</view>
|
||||
<view class="footer_price">{{totalPrice}}</view>
|
||||
</view>
|
||||
<view class="footer_btn" :class="!totalPrice?'opy':''" @click="orderConfirm">去下单</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<uni-popup ref="couponPopup" type="bottom" @change="changeCoupon">
|
||||
<view class="shop_open shop_open_bcg">
|
||||
<view class="shop_open_title">优惠券<view class="shop_open_close" @click="OpenCoupon()"><image src="../../static/order/close.png" mode="widthFix"></image></view></view>
|
||||
<view class="shop_open_desc">可使用券(2)</view>
|
||||
<view class="coupon_cont">
|
||||
<view class="coupon_item">
|
||||
<view class="coupon_item_l">
|
||||
<view class="coupon_item_absolute"></view>
|
||||
<view class="coupon_item_v">
|
||||
<view class="coupon_item_price">5</view>
|
||||
<view class="coupon_item_desc">满39可用</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coupon_item_border"></view>
|
||||
<view class="coupon_item_r">
|
||||
<view class="coupon_item_r_l">
|
||||
<view class="coupon_item_name">新人限时券</view>
|
||||
<view class="coupon_item_time">今日23:59到期</view>
|
||||
</view>
|
||||
<view class="coupon_item_r_r">领取</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coupon_item">
|
||||
<view class="coupon_item_l">
|
||||
<view class="coupon_item_absolute"></view>
|
||||
<view class="coupon_item_v">
|
||||
<view class="coupon_item_price">10</view>
|
||||
<view class="coupon_item_desc">满59可用</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coupon_item_border"></view>
|
||||
<view class="coupon_item_r">
|
||||
<view class="coupon_item_r_l">
|
||||
<view class="coupon_item_name">新人限时券</view>
|
||||
<view class="coupon_item_time">今日23:59到期</view>
|
||||
</view>
|
||||
<view class="coupon_item_r_r">领取</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed,ref } from 'vue';
|
||||
import { ref,computed } from 'vue';
|
||||
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
|
||||
import { storeToRefs } from 'pinia';//实现解构付值
|
||||
import { onLoad,onShow,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
|
||||
const counterStore = useCounterStore(); // 使用 Store
|
||||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||||
const {statusHeight,headerHeight } = storeToRefs(counterStore);
|
||||
const couponPopup = ref(null);
|
||||
const couponShow = ref(false);
|
||||
const show = ref(false);
|
||||
const showEdit = ref(false);
|
||||
const cartList = ref([]);
|
||||
const allCheckedShow = ref(false)
|
||||
const options = ref([
|
||||
{
|
||||
text: '删除',
|
||||
style: {
|
||||
backgroundColor: '#FD4955'
|
||||
}
|
||||
}
|
||||
]);
|
||||
const OpenCoupon =() =>{
|
||||
couponShow.value ? couponPopup.value.close():couponPopup.value.open()
|
||||
};
|
||||
const changeCoupon = (e)=>{
|
||||
couponShow.value = e.show;
|
||||
show.value = e.show;
|
||||
};
|
||||
const edit = (e)=>{
|
||||
showEdit.value ? showEdit.value = false:showEdit.value = true;
|
||||
};
|
||||
const onClick = (e) => {
|
||||
console.log('点击删除', e);
|
||||
};
|
||||
const goDetail= ()=>{
|
||||
uni.navigateTo({
|
||||
url:`/shopProDetail/detail/detail`
|
||||
@ -316,9 +357,155 @@ const orderConfirm = ()=>{
|
||||
url:`/order/orderConfirm/orderConfirm`
|
||||
})
|
||||
}
|
||||
// 使用 uni.onLoad 监听页面加载
|
||||
const cartData =()=>{
|
||||
let data = [{
|
||||
id:'001',
|
||||
imgUrl:'../../static/Mask.png',
|
||||
title:'新疆大盘鸡',
|
||||
desc:'比加入时下降1.1元',
|
||||
amount:1,
|
||||
price:'1',
|
||||
type:'1',
|
||||
isSelected:'1'
|
||||
},{
|
||||
id:'002',
|
||||
imgUrl:'../../static/Mask.png',
|
||||
title:'萝卜片炒腊肉',
|
||||
desc:'比加入时下降4.5元',
|
||||
amount:1,
|
||||
price:'1',
|
||||
type:'1',
|
||||
isSelected:'1'
|
||||
},{
|
||||
id:'003',
|
||||
imgUrl:'../../static/Mask.png',
|
||||
title:'盘龙鳝',
|
||||
desc:'比加入时下降1.5元',
|
||||
amount:5,
|
||||
price:'68',
|
||||
type:'1',
|
||||
isSelected:'0'
|
||||
},{
|
||||
id:'004',
|
||||
imgUrl:'../../static/Mask.png',
|
||||
title:'辣炒猪肝',
|
||||
desc:'',
|
||||
amount:1,
|
||||
price:'35',
|
||||
type:'1',
|
||||
isSelected:'0'
|
||||
},{
|
||||
id:'005',
|
||||
imgUrl:'../../static/Mask.png',
|
||||
title:'大肠刺身',
|
||||
desc:'',
|
||||
amount:1,
|
||||
price:'88',
|
||||
type:'1',
|
||||
isSelected:'0'
|
||||
},{
|
||||
id:'006',
|
||||
imgUrl:'../../static/Mask.png',
|
||||
title:'香辣螺丝',
|
||||
desc:'',
|
||||
amount:1,
|
||||
price:'10',
|
||||
type:'1',
|
||||
isSelected:'0'
|
||||
}]
|
||||
|
||||
cartList.value = data;
|
||||
//更改全选状态
|
||||
const allSelected = cartList.value.every(item => item.isSelected !== undefined && item.isSelected === '1');
|
||||
if(allSelected){
|
||||
allCheckedShow.value = true;
|
||||
}else{
|
||||
allCheckedShow.value = false;
|
||||
}
|
||||
};
|
||||
//编辑购物车商品数量
|
||||
const editAmount=(type,data)=>{
|
||||
//减数量
|
||||
if(data.amount == 1 && type == 1) return false;
|
||||
cartList.value.forEach(item=>{
|
||||
if(data.id == item.id){
|
||||
item.amount = type == 1 ? item.amount - 1 : item.amount + 1;
|
||||
}
|
||||
})
|
||||
};
|
||||
//全选
|
||||
const allChecked=()=>{
|
||||
if(allCheckedShow.value){
|
||||
allCheckedShow.value = false;
|
||||
cartList.value.forEach((item,index)=>{
|
||||
item.isSelected = '0'
|
||||
})
|
||||
}else{
|
||||
allCheckedShow.value = true;
|
||||
cartList.value.forEach((item,index)=>{
|
||||
item.isSelected = '1'
|
||||
})
|
||||
}
|
||||
};
|
||||
//商品选中未选中
|
||||
const checkedShop=(e)=>{
|
||||
//更改单商品选中状态
|
||||
cartList.value.forEach((item,index)=>{
|
||||
if(e.id == item.id){
|
||||
item.isSelected = item.isSelected === '1' ? '0' : '1'
|
||||
}
|
||||
})
|
||||
//更改全选状态
|
||||
const allSelected = cartList.value.every(item => item.isSelected !== undefined && item.isSelected === '1');
|
||||
if(allSelected){
|
||||
allCheckedShow.value = true;
|
||||
}else{
|
||||
allCheckedShow.value = false;
|
||||
}
|
||||
};
|
||||
//计算总价
|
||||
const totalPrice = computed(() => {
|
||||
//过滤出选中的对象
|
||||
const selectedItems = cartList.value.filter(item => item.isSelected === '1');
|
||||
//计算总价（考虑数量）
|
||||
return selectedItems.reduce((sum, item) => sum + item.price * item.amount, 0);
|
||||
});
|
||||
//选中多少数件
|
||||
const selectedAmount = computed(() => {
|
||||
//过滤出选中的对象
|
||||
const selectedItems = cartList.value.filter(item => item.isSelected === '1');
|
||||
return selectedItems.length
|
||||
});
|
||||
const removeCart=(type,item)=>{
|
||||
let content = '';
|
||||
if(type == 1){
|
||||
content = "确定要删除此商品吗?"
|
||||
}else if(type == 2){
|
||||
content = "确定要清空购物车所有商品吗?"
|
||||
}else{
|
||||
content = `确定要删除购物车选中的${selectedAmount.value}种商品吗?`
|
||||
}
|
||||
uni.showModal({
|
||||
content:content,
|
||||
confirmText:type == 2?'清空':'删除',
|
||||
confirmColor:'#F14D48',
|
||||
success: ({confirm}) => {
|
||||
if (confirm) {
|
||||
if(type == 1){
|
||||
console.log('单商品删除!');
|
||||
}else if(type == 2){
|
||||
console.log('清空购物车!');
|
||||
cartList.value = []
|
||||
}else{
|
||||
console.log('选中商品删除!');
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
//使用 uni.onLoad 监听页面加载
|
||||
onLoad((options) => {
|
||||
|
||||
cartData();
|
||||
});
|
||||
onShow(() => {
|
||||
|
||||
@ -333,4 +520,11 @@ onReachBottom(()=>{
|
||||
|
||||
<style lang="scss">
|
||||
@import './style.scss';
|
||||
.uni-swipe{
|
||||
margin: 0rpx 20rpx 0rpx 20rpx !important;
|
||||
margin-bottom: 20rpx !important;
|
||||
border-radius: 25rpx !important;
|
||||
background-color: #fff !important;
|
||||
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05) !important;
|
||||
}
|
||||
</style>
|
||||
@ -5,7 +5,7 @@ page{
|
||||
// 头部样式
|
||||
.head{
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
z-index: 88;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -89,6 +89,9 @@ page{
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.head_edit{
|
||||
color: #E60703;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -97,10 +100,10 @@ page{
|
||||
background: linear-gradient(180deg, #FCEEEF 0%, #f6f6f6 100%);
|
||||
background-repeat: no-repeat;
|
||||
.cart_item{
|
||||
margin: 0rpx 20rpx 20rpx 20rpx;
|
||||
border-radius: 25rpx;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
|
||||
// margin: 0rpx 20rpx 0rpx 20rpx;
|
||||
// border-radius: 25rpx;
|
||||
// background-color: #ffffff;
|
||||
// box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 0rpx 20rpx 0rpx;
|
||||
@ -116,6 +119,21 @@ page{
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #bfbfbf;
|
||||
}
|
||||
.cart_selected_true{
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #FF0000;
|
||||
border: 2rpx solid #FF0000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.cart_selected_true image{
|
||||
width: 25rpx;
|
||||
height: 25rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.cart_shop{
|
||||
width: 180rpx;
|
||||
@ -147,15 +165,14 @@ page{
|
||||
}
|
||||
}
|
||||
.cart_items{
|
||||
margin: 0rpx 20rpx 20rpx 20rpx;
|
||||
// margin: 0rpx 20rpx 20rpx 20rpx;
|
||||
border-radius: 25rpx;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
|
||||
// background-color: #ffffff;
|
||||
// box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
|
||||
padding: 20rpx 0rpx 20rpx 0rpx;
|
||||
.cart_t{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
.cart_selected{
|
||||
width: 50rpx;
|
||||
display: flex;
|
||||
@ -169,53 +186,56 @@ page{
|
||||
border: 2rpx solid #bfbfbf;
|
||||
}
|
||||
}
|
||||
.cart_scroll{
|
||||
.cart_view_scroll{
|
||||
width: 620rpx;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
.cart_scroll_ul{
|
||||
.cart_scroll_li{
|
||||
width: 180rpx;
|
||||
display: inline-block;
|
||||
margin-right: 20rpx;
|
||||
.cart_scroll_img{
|
||||
background: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
// border: 1rpx solid #F3F3F3;
|
||||
.cart_scroll{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
.cart_scroll_ul{
|
||||
.cart_scroll_li{
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
overflow: hidden;
|
||||
.cart_scroll_img_url{
|
||||
display: inline-block;
|
||||
margin-right: 20rpx;
|
||||
.cart_scroll_img{
|
||||
background: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
// border: 1rpx solid #F3F3F3;
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
.cart_scroll_img_url{
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.cart_scroll_title{
|
||||
color: #333333;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
white-space: break-spaces;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.cart_scroll_price{
|
||||
font-size: 32rpx;
|
||||
color: #FF0000;
|
||||
font-weight: 500;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.cart_scroll_market_name{
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
text-decoration: line-through;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.cart_scroll_title{
|
||||
color: #333333;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
white-space: break-spaces;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.cart_scroll_price{
|
||||
font-size: 32rpx;
|
||||
color: #FF0000;
|
||||
font-weight: 500;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.cart_scroll_market_name{
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
text-decoration: line-through;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -453,7 +473,7 @@ page{
|
||||
}
|
||||
.footer{
|
||||
position: fixed;
|
||||
z-index: 888;
|
||||
z-index: 88;
|
||||
left: 0;
|
||||
transform: translate3d(0,-100%,0);
|
||||
width: 100%;
|
||||
@ -482,6 +502,21 @@ page{
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #bfbfbf;
|
||||
}
|
||||
.footer_selected_true{
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #FF0000;
|
||||
border: 2rpx solid #FF0000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.footer_selected_true image{
|
||||
width: 25rpx;
|
||||
height: 25rpx;
|
||||
display: block;
|
||||
}
|
||||
.footer_text{
|
||||
color: #333333;
|
||||
font-size: 28rpx;
|
||||
@ -493,6 +528,28 @@ page{
|
||||
margin-right: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.footer_edit{
|
||||
display: flex;
|
||||
.footer_edit_li{
|
||||
width: 205rpx;
|
||||
height: 77rpx;
|
||||
background: linear-gradient( 90deg, #FD4955 0%, #FD343C 100%);
|
||||
border-radius: 39rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border:1px solid #FD4955;
|
||||
}
|
||||
.footer_edit_li_border{
|
||||
background: #FFFFFF;
|
||||
border:1px solid #D9D9D9;
|
||||
color: #666666;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
.footer_v{
|
||||
.footer_text{
|
||||
font-size: 28rpx;
|
||||
@ -523,7 +580,8 @@ page{
|
||||
width: 205rpx;
|
||||
height: 77rpx;
|
||||
background: linear-gradient( 90deg, #FD4955 0%, #FD343C 100%);
|
||||
border-radius: 39rpx 39rpx 39rpx 39rpx;
|
||||
border-radius: 39rpx;
|
||||
border:1px solid #FD4955;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -546,7 +604,7 @@ page{
|
||||
font-weight: 400;
|
||||
}
|
||||
.cart_bottom{
|
||||
margin-top: 10rpx;
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -594,6 +652,171 @@ page{
|
||||
border-top-right-radius: 50rpx;
|
||||
border-bottom-right-radius: 50rpx;
|
||||
}
|
||||
.cart_remove{
|
||||
width: 130rpx;
|
||||
height: 50rpx;
|
||||
border: 1rpx solid #FD4955;
|
||||
background: linear-gradient( 90deg, #FD4955 0%, #FD343C 100%);
|
||||
border-radius: 39rpx;
|
||||
font-size: 22rpx;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.shop_open{
|
||||
width: 100%;
|
||||
background-color: #FFFFFF;
|
||||
color: #333333;
|
||||
border-top-left-radius: 20rpx;
|
||||
border-top-right-radius: 20rpx;
|
||||
.shop_open_title{
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
.shop_open_close{
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.shop_open_close image{
|
||||
width: 55rpx;
|
||||
height: 55rpx;
|
||||
}
|
||||
}
|
||||
.shop_open_desc{
|
||||
padding: 0 24rpx 24rpx 24rpx ;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
}
|
||||
// 优惠券
|
||||
.coupon_cont{
|
||||
min-height: 800rpx;
|
||||
max-height: 800rpx;
|
||||
overflow-x: auto;
|
||||
.coupon_item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0 24rpx 24rpx 24rpx;
|
||||
.coupon_item_l{
|
||||
width: 198rpx;
|
||||
height: 193rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
.coupon_item_v{
|
||||
position: absolute;
|
||||
width: 198rpx;
|
||||
height: 193rpx;
|
||||
top: 0;
|
||||
left: 0;
|
||||
.coupon_item_price{
|
||||
color: #FF0000;
|
||||
font-size: 60rpx;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
margin-top: 35rpx;
|
||||
}
|
||||
.coupon_item_price::before{
|
||||
content: '¥';
|
||||
font-size: 34rpx;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
.coupon_item_desc{
|
||||
color: #999999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
.coupon_item_absolute{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 20rpx;
|
||||
height: 193rpx;
|
||||
background: #FF0000;
|
||||
border-top-left-radius: 20rpx;
|
||||
border-bottom-left-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
.coupon_item_border{
|
||||
width: 1px;
|
||||
height: 155rpx;
|
||||
border-left: 1px dashed #D9D9D9;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.coupon_item_r{
|
||||
width: 438rpx;
|
||||
height: 193rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 25rpx 0 45rpx;
|
||||
.coupon_item_r_l{
|
||||
width: 300rpx;
|
||||
.coupon_item_name{
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
font-weight: 500;
|
||||
}
|
||||
.coupon_item_time{
|
||||
color: #FF6E6E;
|
||||
font-size: 26rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
.coupon_item_r_r{
|
||||
width: 112rpx;
|
||||
height: 46rpx;
|
||||
border-radius: 30rpx;
|
||||
border: 1rpx solid #FF0000;
|
||||
font-size: 26rpx;
|
||||
color: #FF0000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.coupon_item_bottom{
|
||||
position: fixed;
|
||||
z-index: 88;
|
||||
left: 0;
|
||||
transform: translate3d(0,-100%,0);
|
||||
width: 100%;
|
||||
top: 100%;
|
||||
background: #FFFFFF;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 20rpx;
|
||||
color: #000000;
|
||||
font-size: 32rpx;
|
||||
border-top: 1rpx solid #F6F7FB;
|
||||
}
|
||||
|
||||
}
|
||||
.shop_open_bcg{
|
||||
background-color: #F6F7FB;
|
||||
}
|
||||
}
|
||||
.opy{
|
||||
opacity:0.3;
|
||||
}
|
||||
@ -37,7 +37,7 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="user_cont_list">
|
||||
<view class="user_cont_li" v-for="(item,index) in order" :key="index" :class="item.id == 5?'user_cont_li_left_boder':''">
|
||||
<view class="user_cont_li" v-for="(item,index) in order" :key="index" :class="item.id == 0?'user_cont_li_left_boder':''" @click="orderList(item)">
|
||||
<image class="user_cont_li_img" :src="item.imgUrl" mode="widthFix"></image>
|
||||
<view class="user_cont_li_name">{{item.name}}</view>
|
||||
</view>
|
||||
@ -190,22 +190,22 @@ const order = ref([
|
||||
name:'待支付'
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
id:3,
|
||||
imgUrl:'../../static/user/staytake.png',
|
||||
name:'待收货'
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
id:4,
|
||||
imgUrl:'../../static/user/evaluate.png',
|
||||
name:'待评价'
|
||||
},
|
||||
{
|
||||
id:4,
|
||||
id:5,
|
||||
imgUrl:'../../static/user/refund.png',
|
||||
name:'退款/售后'
|
||||
},
|
||||
{
|
||||
id:5,
|
||||
id:0,
|
||||
imgUrl:'../../static/user/order.png',
|
||||
name:'全部订单'
|
||||
}
|
||||
@ -237,14 +237,23 @@ const contList = ref([
|
||||
name:'地址管理'
|
||||
}
|
||||
])
|
||||
const goDetail= ()=>{
|
||||
const goDetail=()=>{
|
||||
uni.navigateTo({
|
||||
url:`/shopProDetail/detail/detail`
|
||||
})
|
||||
}
|
||||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||||
//const { count,doubleCount } = storeToRefs(counterStore);
|
||||
|
||||
const orderList=(item)=>{
|
||||
if(item.id != 5){
|
||||
uni.navigateTo({
|
||||
url:`/order/orderList/orderList?type=${item.id}`
|
||||
})
|
||||
}else{
|
||||
console.log('跳退款')
|
||||
}
|
||||
|
||||
}
|
||||
onLoad((options) => {
|
||||
|
||||
});
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
</view>
|
||||
<!-- 评论区域 -->
|
||||
<view class="item">
|
||||
<view class="shop_comment">
|
||||
<view class="shop_comment" @click="evals()">
|
||||
<view class="shop_comment_head">
|
||||
<view class="shop_comment_head_title">商品评论(1万+)</view>
|
||||
<view class="shop_comment_head_arrow">全部</view>
|
||||
@ -288,6 +288,11 @@ const goCart=()=>{
|
||||
url:`/pages/cart/cart`
|
||||
})
|
||||
};
|
||||
const evals=()=>{
|
||||
uni.navigateTo({
|
||||
url:`/shopProDetail/evallist/evallist`
|
||||
})
|
||||
};
|
||||
const handleBack = () => {
|
||||
if (getPages()) {
|
||||
// 如果有上一页，返回上一页
|
||||
|
||||
145
shopProDetail/evallist/evallist.vue
Normal file
145
shopProDetail/evallist/evallist.vue
Normal file
@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<view class="mian">
|
||||
<view class="head">
|
||||
<view class="eval_tag eval_tag_active">全部<text>5000+</text></view>
|
||||
<view class="eval_tag"><image class="eval_tag_img" src="../../static/eval/img.png" mode="widthFix"></image>图片 <text>1000+</text></view>
|
||||
<view class="eval_tag"><image class="eval_tag_img" src="../../static/eval/newest.png" mode="widthFix"></image>最新</view>
|
||||
<view class="eval_tag">品质好 <text>10</text></view>
|
||||
<view class="eval_tag">肉新鲜 <text>1</text></view>
|
||||
<view class="eval_tag">肥瘦均匀 <text>2</text></view>
|
||||
</view>
|
||||
|
||||
<view class="eval_item">
|
||||
<view class="eval_item_top">
|
||||
<view class="eval_item_l">
|
||||
<image class="eval_item_userimg" src="" mode="widthFix"></image>
|
||||
<view class="eval_item_username">*林</view>
|
||||
<view class="eval_item_userdesc">买过3次</view>
|
||||
<view class="eval_item_usertext"><image class="eval_item_usertext_img" src="../../static/eval/praise.png" mode="widthFix"></image>好评</view>
|
||||
</view>
|
||||
<view class="eval_item_r"></view>
|
||||
</view>
|
||||
<view class="eval_item_text">强烈推荐，肉质感很新鲜很嫩，强烈推荐，肉质感 很新鲜很嫩</view>
|
||||
<view class="eval_item_ul">
|
||||
<view class="eval_item_li">
|
||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="eval_item_li">
|
||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="eval_item_li">
|
||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="eval_item_li">
|
||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="eval_item_li">
|
||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="eval_item_li">
|
||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="eval_item_bottom">
|
||||
<view class="eval_item_time">25/3/8</view>
|
||||
<view class="eval_item_numa"><image src="../../static/eval/heart.png" mode="widthFix"></image>67</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="eval_item">
|
||||
<view class="eval_item_top">
|
||||
<view class="eval_item_l">
|
||||
<image class="eval_item_userimg" src="" mode="widthFix"></image>
|
||||
<view class="eval_item_username">*林</view>
|
||||
<view class="eval_item_userdesc">买过3次</view>
|
||||
<view class="eval_item_usertext"><image class="eval_item_usertext_img" src="../../static/eval/praise.png" mode="widthFix"></image>好评</view>
|
||||
</view>
|
||||
<view class="eval_item_r"></view>
|
||||
</view>
|
||||
<view class="eval_item_text">强烈推荐，肉质感很新鲜很嫩，强烈推荐，肉质感 很新鲜很嫩</view>
|
||||
<view class="eval_item_ul">
|
||||
<view class="eval_item_li">
|
||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="eval_item_li">
|
||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="eval_item_li">
|
||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="eval_item_li">
|
||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="eval_item_li">
|
||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="eval_item_li">
|
||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="eval_item_bottom">
|
||||
<view class="eval_item_time">25/3/8</view>
|
||||
<view class="eval_item_numa"><image src="../../static/eval/heart.png" mode="widthFix"></image>67</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="eval_item">
|
||||
<view class="eval_item_top">
|
||||
<view class="eval_item_l">
|
||||
<image class="eval_item_userimg" src="" mode="widthFix"></image>
|
||||
<view class="eval_item_username">*林</view>
|
||||
<view class="eval_item_userdesc">买过3次</view>
|
||||
<view class="eval_item_usertext"><image class="eval_item_usertext_img" src="../../static/eval/praise.png" mode="widthFix"></image>好评</view>
|
||||
</view>
|
||||
<view class="eval_item_r"></view>
|
||||
</view>
|
||||
<view class="eval_item_text">强烈推荐，肉质感很新鲜很嫩，强烈推荐，肉质感 很新鲜很嫩</view>
|
||||
<view class="eval_item_ul">
|
||||
<view class="eval_item_li">
|
||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="eval_item_li">
|
||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="eval_item_li">
|
||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="eval_item_li">
|
||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="eval_item_li">
|
||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="eval_item_li">
|
||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="eval_item_bottom">
|
||||
<view class="eval_item_time">25/3/8</view>
|
||||
<view class="eval_item_numa"><image src="../../static/eval/heart.png" mode="widthFix"></image>67</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
|
||||
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
|
||||
import { storeToRefs } from 'pinia';//实现解构付值
|
||||
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
|
||||
const counterStore = useCounterStore(); // 使用 Store
|
||||
const { proxy } = getCurrentInstance();
|
||||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||||
const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore);
|
||||
|
||||
onLoad((options) => {});
|
||||
onShow(() => {});
|
||||
onReady(()=>{})
|
||||
onPullDownRefresh(()=>{})
|
||||
onReachBottom(()=>{})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
156
shopProDetail/evallist/style.scss
Normal file
156
shopProDetail/evallist/style.scss
Normal file
@ -0,0 +1,156 @@
|
||||
page{
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
.mian{
|
||||
.head{
|
||||
background-color: #FFFFFF;
|
||||
padding: 0 20rpx 20rpx 20rpx;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-bottom: 1rpx solid #f6f6f6;
|
||||
.eval_tag{
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
background-color: #F5F6FA;
|
||||
border: 1rpx solid #F5F6FA;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50rpx;
|
||||
padding: 8rpx 25rpx 8rpx 25rpx;
|
||||
box-sizing: border-box;
|
||||
margin: 20rpx 0 0 20rpx ;
|
||||
.eval_tag_img{
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
display: block;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
.eval_tag text{
|
||||
color: #999999;
|
||||
}
|
||||
.eval_tag_active{
|
||||
background: #FFD7D7;
|
||||
border: 1rpx solid #FFA0A0;
|
||||
color: #FF5D5D;
|
||||
|
||||
}
|
||||
.eval_tag_active text{
|
||||
color: #FF5D5D;
|
||||
}
|
||||
}
|
||||
.eval_item{
|
||||
margin-top: 10rpx;
|
||||
background-color: #FFFFFF;
|
||||
margin: 20rpx 20rpx 0 20rpx;
|
||||
border-radius: 16rpx;
|
||||
.eval_item_top{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 23rpx 0 23rpx;
|
||||
height: 79rpx;
|
||||
|
||||
background-color: #FFFFFF;
|
||||
.eval_item_l{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.eval_item_userimg{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50rpx;
|
||||
background-color: #000
|
||||
}
|
||||
.eval_item_username{
|
||||
color: #000000;
|
||||
font-size: 24rpx;
|
||||
margin-left: 10rpx;
|
||||
|
||||
}
|
||||
.eval_item_userdesc{
|
||||
width: 95rpx;
|
||||
height: 34rpx;
|
||||
background: #FFF4CD;
|
||||
border-radius: 4rpx;
|
||||
border: 1rpx solid #F9D448;
|
||||
font-size: 22rpx;
|
||||
color: #D0AA1B;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
.eval_item_usertext{
|
||||
margin-left: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 95rpx;
|
||||
height: 34rpx;
|
||||
background: linear-gradient( 90deg, #FAEAD3 0%, #FED4AE 100%);
|
||||
border-radius: 4rpx;
|
||||
color: #745030;
|
||||
font-size: 22rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.eval_item_usertext_img{
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.eval_item_text{
|
||||
padding: 20rpx;
|
||||
font-size: 30rpx;
|
||||
color: #666666;
|
||||
}
|
||||
.eval_item_ul{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.eval_item_li{
|
||||
width: 212rpx;
|
||||
height: 212rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-left: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.eval_item_li image{
|
||||
width: 212rpx;
|
||||
height: 212rpx;
|
||||
border-radius: 8rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.eval_item_bottom{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20rpx 20rpx 20rpx;
|
||||
.eval_item_time{
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
.eval_item_numa{
|
||||
display: flex;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
align-items: center;
|
||||
}
|
||||
.eval_item_numa image{
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
display: block;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
BIN
static/eval/heart.png
Normal file
BIN
static/eval/heart.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 478 B |
BIN
static/eval/img.png
Normal file
BIN
static/eval/img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 525 B |
BIN
static/eval/newest.png
Normal file
BIN
static/eval/newest.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 732 B |
BIN
static/eval/praise.png
Normal file
BIN
static/eval/praise.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 489 B |
BIN
static/selected.png
Normal file
BIN
static/selected.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
@ -9,7 +9,8 @@ export const useCounterStore = defineStore('counter',()=>{
|
||||
const statusHeight = ref(uni.getMenuButtonBoundingClientRect()['height']);
|
||||
const headerHeight = ref(uni.getSystemInfoSync()['statusBarHeight']);
|
||||
const statusBartop = ref(uni.getMenuButtonBoundingClientRect()['top']);
|
||||
|
||||
const ButtonWidth = ref(uni.getMenuButtonBoundingClientRect().width);
|
||||
const ButtonHeight = ref(uni.getMenuButtonBoundingClientRect().height)
|
||||
|
||||
//定义数据修改的方法(action)
|
||||
const clickSType = (params)=>{
|
||||
@ -20,6 +21,8 @@ export const useCounterStore = defineStore('counter',()=>{
|
||||
|
||||
//以对象的形式return供组件调用
|
||||
return{
|
||||
ButtonWidth,
|
||||
ButtonHeight,
|
||||
statusHeight,
|
||||
headerHeight,
|
||||
statusBartop,
|
||||
|
||||
47
uni_modules/uni-swipe-action/changelog.md
Normal file
47
uni_modules/uni-swipe-action/changelog.md
Normal file
@ -0,0 +1,47 @@
|
||||
## 1.3.10（2024-01-17）
|
||||
- 修复 点击按钮时，按钮会被点击穿透导致自动收缩的 bug(兼容阿里/百度/抖音小程序)
|
||||
## 1.3.9（2024-01-17）
|
||||
- 修复 点击按钮时，按钮会被点击穿透导致自动收缩的 bug
|
||||
## 1.3.8（2023-04-13）
|
||||
- 修复`uni-swipe-action`和`uni-swipe-action-item`不同时使用导致 closeOther 方法报错的 bug
|
||||
## 1.3.7（2022-06-06）
|
||||
- 修复 vue3 下使用组件不能正常运行的Bug
|
||||
## 1.3.6（2022-05-31）
|
||||
- 修复 h5端点击click触发两次的Bug
|
||||
## 1.3.5（2022-05-23）
|
||||
- 修复 isPC 找不到的Bug
|
||||
## 1.3.4（2022-05-19）
|
||||
- 修复 在 nvue 下 disabled 失效的bug
|
||||
## 1.3.3（2022-03-31）
|
||||
- 修复 按钮字体大小不能设置的bug
|
||||
## 1.3.2（2022-03-16）
|
||||
- 修复 h5和app端下报el错误的bug
|
||||
## 1.3.1（2022-03-07）
|
||||
- 修复 HBuilderX 1.4.X 版本中，h5和app端下报错的bug
|
||||
## 1.3.0（2021-11-19）
|
||||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-swipe-action](https://uniapp.dcloud.io/component/uniui/uni-swipe-action)
|
||||
## 1.2.4（2021-08-20）
|
||||
- 优化 close-all 方法
|
||||
## 1.2.3（2021-08-20）
|
||||
- 新增 close-all 方法，关闭所有已打开的组件
|
||||
## 1.2.2（2021-08-17）
|
||||
- 新增 resize() 方法，在非微信小程序、h5、app-vue端出现不能滑动的问题的时候，重置组件
|
||||
- 修复 app 端偶尔出现类似 Page[x][-x,xx;-x,xx,x,x-x] 的问题
|
||||
- 优化 微信小程序、h5、app-vue 滑动逻辑，避免出现动态新增组件后不能滑动的问题
|
||||
## 1.2.1（2021-07-30）
|
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
- 修复 跨页面修改组件数据 ，导致不能滑动的问题
|
||||
## 1.1.10（2021-06-17）
|
||||
- 修复 按钮点击执行两次的bug
|
||||
## 1.1.9（2021-05-12）
|
||||
- 新增 项目示例地址
|
||||
## 1.1.8（2021-03-26）
|
||||
- 修复 微信小程序 nv_navigator is not defined 报错的bug
|
||||
## 1.1.7（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
- 新增 左侧滑动
|
||||
- 新增 插槽使用方式
|
||||
- 新增 threshold 属性，可以控制滑动缺省值
|
||||
- 优化 长列表滚动性能
|
||||
- 修复 滚动页面时触发组件滑动的Bug
|
||||
@ -0,0 +1,302 @@
|
||||
let bindIngXMixins = {}
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
const BindingX = uni.requireNativePlugin('bindingx');
|
||||
const dom = uni.requireNativePlugin('dom');
|
||||
const animation = uni.requireNativePlugin('animation');
|
||||
|
||||
bindIngXMixins = {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
watch: {
|
||||
show(newVal) {
|
||||
if (this.autoClose) return
|
||||
if (this.stop) return
|
||||
this.stop = true
|
||||
if (newVal) {
|
||||
this.open(newVal)
|
||||
} else {
|
||||
this.close()
|
||||
}
|
||||
},
|
||||
leftOptions() {
|
||||
this.getSelectorQuery()
|
||||
this.init()
|
||||
},
|
||||
rightOptions(newVal) {
|
||||
this.init()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.swipeaction = this.getSwipeAction()
|
||||
if (this.swipeaction && Array.isArray(this.swipeaction.children)) {
|
||||
this.swipeaction.children.push(this)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.box = this.getEl(this.$refs['selector-box--hock'])
|
||||
this.selector = this.getEl(this.$refs['selector-content--hock']);
|
||||
this.leftButton = this.getEl(this.$refs['selector-left-button--hock']);
|
||||
this.rightButton = this.getEl(this.$refs['selector-right-button--hock']);
|
||||
this.init()
|
||||
},
|
||||
// beforeDestroy() {
|
||||
// this.swipeaction.children.forEach((item, index) => {
|
||||
// if (item === this) {
|
||||
// this.swipeaction.children.splice(index, 1)
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
methods: {
|
||||
init() {
|
||||
this.$nextTick(() => {
|
||||
this.x = 0
|
||||
this.button = {
|
||||
show: false
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.getSelectorQuery()
|
||||
}, 200)
|
||||
})
|
||||
},
|
||||
onClick(index, item, position) {
|
||||
this.$emit('click', {
|
||||
content: item,
|
||||
index,
|
||||
position
|
||||
})
|
||||
},
|
||||
touchstart(e) {
|
||||
// fix by mehaotian 禁止滑动
|
||||
if (this.disabled) return
|
||||
// 每次只触发一次，避免多次监听造成闪烁
|
||||
if (this.stop) return
|
||||
this.stop = true
|
||||
if (this.autoClose && this.swipeaction) {
|
||||
this.swipeaction.closeOther(this)
|
||||
}
|
||||
|
||||
const leftWidth = this.button.left.width
|
||||
const rightWidth = this.button.right.width
|
||||
let expression = this.range(this.x, -rightWidth, leftWidth)
|
||||
let leftExpression = this.range(this.x - leftWidth, -leftWidth, 0)
|
||||
let rightExpression = this.range(this.x + rightWidth, 0, rightWidth)
|
||||
|
||||
this.eventpan = BindingX.bind({
|
||||
anchor: this.box,
|
||||
eventType: 'pan',
|
||||
props: [{
|
||||
element: this.selector,
|
||||
property: 'transform.translateX',
|
||||
expression
|
||||
}, {
|
||||
element: this.leftButton,
|
||||
property: 'transform.translateX',
|
||||
expression: leftExpression
|
||||
}, {
|
||||
element: this.rightButton,
|
||||
property: 'transform.translateX',
|
||||
expression: rightExpression
|
||||
}, ]
|
||||
}, (e) => {
|
||||
// nope
|
||||
if (e.state === 'end') {
|
||||
this.x = e.deltaX + this.x;
|
||||
this.isclick = true
|
||||
this.bindTiming(e.deltaX)
|
||||
}
|
||||
});
|
||||
},
|
||||
touchend(e) {
|
||||
if (this.isopen !== 'none' && !this.isclick) {
|
||||
this.open('none')
|
||||
}
|
||||
},
|
||||
bindTiming(x) {
|
||||
const left = this.x
|
||||
const leftWidth = this.button.left.width
|
||||
const rightWidth = this.button.right.width
|
||||
const threshold = this.threshold
|
||||
if (!this.isopen || this.isopen === 'none') {
|
||||
if (left > threshold) {
|
||||
this.open('left')
|
||||
} else if (left < -threshold) {
|
||||
this.open('right')
|
||||
} else {
|
||||
this.open('none')
|
||||
}
|
||||
} else {
|
||||
if ((x > -leftWidth && x < 0) || x > rightWidth) {
|
||||
if ((x > -threshold && x < 0) || (x - rightWidth > threshold)) {
|
||||
this.open('left')
|
||||
} else {
|
||||
this.open('none')
|
||||
}
|
||||
} else {
|
||||
if ((x < threshold && x > 0) || (x + leftWidth < -threshold)) {
|
||||
this.open('right')
|
||||
} else {
|
||||
this.open('none')
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 移动范围
|
||||
* @param {Object} num
|
||||
* @param {Object} mix
|
||||
* @param {Object} max
|
||||
*/
|
||||
range(num, mix, max) {
|
||||
return `min(max(x+${num}, ${mix}), ${max})`
|
||||
},
|
||||
|
||||
/**
|
||||
* 开启swipe
|
||||
*/
|
||||
open(type) {
|
||||
this.animation(type)
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭swipe
|
||||
*/
|
||||
close() {
|
||||
this.animation('none')
|
||||
},
|
||||
|
||||
/**
|
||||
* 开启关闭动画
|
||||
* @param {Object} type
|
||||
*/
|
||||
animation(type) {
|
||||
const time = 300
|
||||
const leftWidth = this.button.left.width
|
||||
const rightWidth = this.button.right.width
|
||||
if (this.eventpan && this.eventpan.token) {
|
||||
BindingX.unbind({
|
||||
token: this.eventpan.token,
|
||||
eventType: 'pan'
|
||||
})
|
||||
}
|
||||
|
||||
switch (type) {
|
||||
case 'left':
|
||||
Promise.all([
|
||||
this.move(this.selector, leftWidth),
|
||||
this.move(this.leftButton, 0),
|
||||
this.move(this.rightButton, rightWidth * 2)
|
||||
]).then(() => {
|
||||
this.setEmit(leftWidth, type)
|
||||
})
|
||||
break
|
||||
case 'right':
|
||||
Promise.all([
|
||||
this.move(this.selector, -rightWidth),
|
||||
this.move(this.leftButton, -leftWidth * 2),
|
||||
this.move(this.rightButton, 0)
|
||||
]).then(() => {
|
||||
this.setEmit(-rightWidth, type)
|
||||
})
|
||||
break
|
||||
default:
|
||||
Promise.all([
|
||||
this.move(this.selector, 0),
|
||||
this.move(this.leftButton, -leftWidth),
|
||||
this.move(this.rightButton, rightWidth)
|
||||
]).then(() => {
|
||||
this.setEmit(0, type)
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
setEmit(x, type) {
|
||||
const leftWidth = this.button.left.width
|
||||
const rightWidth = this.button.right.width
|
||||
this.isopen = this.isopen || 'none'
|
||||
this.stop = false
|
||||
this.isclick = false
|
||||
// 只有状态不一致才会返回结果
|
||||
if (this.isopen !== type && this.x !== x) {
|
||||
if (type === 'left' && leftWidth > 0) {
|
||||
this.$emit('change', 'left')
|
||||
}
|
||||
if (type === 'right' && rightWidth > 0) {
|
||||
this.$emit('change', 'right')
|
||||
}
|
||||
if (type === 'none') {
|
||||
this.$emit('change', 'none')
|
||||
}
|
||||
}
|
||||
this.x = x
|
||||
this.isopen = type
|
||||
},
|
||||
move(ref, value) {
|
||||
return new Promise((resolve, reject) => {
|
||||
animation.transition(ref, {
|
||||
styles: {
|
||||
transform: `translateX(${value})`,
|
||||
},
|
||||
duration: 150, //ms
|
||||
timingFunction: 'linear',
|
||||
needLayout: false,
|
||||
delay: 0 //ms
|
||||
}, function(res) {
|
||||
resolve(res)
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取ref
|
||||
* @param {Object} el
|
||||
*/
|
||||
getEl(el) {
|
||||
return el.ref
|
||||
},
|
||||
/**
|
||||
* 获取节点信息
|
||||
*/
|
||||
getSelectorQuery() {
|
||||
Promise.all([
|
||||
this.getDom('left'),
|
||||
this.getDom('right'),
|
||||
]).then((data) => {
|
||||
let show = 'none'
|
||||
if (this.autoClose) {
|
||||
show = 'none'
|
||||
} else {
|
||||
show = this.show
|
||||
}
|
||||
|
||||
if (show === 'none') {
|
||||
// this.close()
|
||||
} else {
|
||||
this.open(show)
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
},
|
||||
getDom(str) {
|
||||
return new Promise((resolve, reject) => {
|
||||
dom.getComponentRect(this.$refs[`selector-${str}-button--hock`], (data) => {
|
||||
if (data) {
|
||||
this.button[str] = data.size
|
||||
resolve(data)
|
||||
} else {
|
||||
reject()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
export default bindIngXMixins
|
||||
@ -0,0 +1,12 @@
|
||||
export function isPC() {
|
||||
var userAgentInfo = navigator.userAgent;
|
||||
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
|
||||
var flag = true;
|
||||
for (let v = 0; v < Agents.length - 1; v++) {
|
||||
if (userAgentInfo.indexOf(Agents[v]) > 0) {
|
||||
flag = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return flag;
|
||||
}
|
||||
@ -0,0 +1,195 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
x: 0,
|
||||
transition: false,
|
||||
width: 0,
|
||||
viewWidth: 0,
|
||||
swipeShow: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show(newVal) {
|
||||
if (this.autoClose) return
|
||||
if (newVal && newVal !== 'none') {
|
||||
this.transition = true
|
||||
this.open(newVal)
|
||||
} else {
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.swipeaction = this.getSwipeAction()
|
||||
if (this.swipeaction && Array.isArray(this.swipeaction.children)) {
|
||||
this.swipeaction.children.push(this)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isopen = false
|
||||
setTimeout(() => {
|
||||
this.getQuerySelect()
|
||||
}, 50)
|
||||
},
|
||||
methods: {
|
||||
appTouchStart(e) {
|
||||
const {
|
||||
clientX
|
||||
} = e.changedTouches[0]
|
||||
this.clientX = clientX
|
||||
this.timestamp = new Date().getTime()
|
||||
},
|
||||
appTouchEnd(e, index, item, position) {
|
||||
const {
|
||||
clientX
|
||||
} = e.changedTouches[0]
|
||||
// fixed by xxxx 模拟点击事件，解决 ios 13 点击区域错位的问题
|
||||
let diff = Math.abs(this.clientX - clientX)
|
||||
let time = (new Date().getTime()) - this.timestamp
|
||||
if (diff < 40 && time < 300) {
|
||||
this.$emit('click', {
|
||||
content: item,
|
||||
index,
|
||||
position
|
||||
})
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 移动触发
|
||||
* @param {Object} e
|
||||
*/
|
||||
onChange(e) {
|
||||
this.moveX = e.detail.x
|
||||
this.isclose = false
|
||||
},
|
||||
touchstart(e) {
|
||||
this.transition = false
|
||||
this.isclose = true
|
||||
if (this.autoClose && this.swipeaction) {
|
||||
this.swipeaction.closeOther(this)
|
||||
}
|
||||
},
|
||||
touchmove(e) {},
|
||||
touchend(e) {
|
||||
// 0的位置什么都不执行
|
||||
if (this.isclose && this.isopen === 'none') return
|
||||
if (this.isclose && this.isopen !== 'none') {
|
||||
this.transition = true
|
||||
this.close()
|
||||
} else {
|
||||
this.move(this.moveX + this.leftWidth)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 移动
|
||||
* @param {Object} moveX
|
||||
*/
|
||||
move(moveX) {
|
||||
// 打开关闭的处理逻辑不太一样
|
||||
this.transition = true
|
||||
// 未打开状态
|
||||
if (!this.isopen || this.isopen === 'none') {
|
||||
if (moveX > this.threshold) {
|
||||
this.open('left')
|
||||
} else if (moveX < -this.threshold) {
|
||||
this.open('right')
|
||||
} else {
|
||||
this.close()
|
||||
}
|
||||
} else {
|
||||
if (moveX < 0 && moveX < this.rightWidth) {
|
||||
const rightX = this.rightWidth + moveX
|
||||
if (rightX < this.threshold) {
|
||||
this.open('right')
|
||||
} else {
|
||||
this.close()
|
||||
}
|
||||
} else if (moveX > 0 && moveX < this.leftWidth) {
|
||||
const leftX = this.leftWidth - moveX
|
||||
if (leftX < this.threshold) {
|
||||
this.open('left')
|
||||
} else {
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 打开
|
||||
*/
|
||||
open(type) {
|
||||
this.x = this.moveX
|
||||
this.animation(type)
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭
|
||||
*/
|
||||
close() {
|
||||
this.x = this.moveX
|
||||
// TODO 解决 x 值不更新的问题，所以会多触发一次 nextTick ，待优化
|
||||
this.$nextTick(() => {
|
||||
this.x = -this.leftWidth
|
||||
if (this.isopen !== 'none') {
|
||||
this.$emit('change', 'none')
|
||||
}
|
||||
this.isopen = 'none'
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 执行结束动画
|
||||
* @param {Object} type
|
||||
*/
|
||||
animation(type) {
|
||||
this.$nextTick(() => {
|
||||
if (type === 'left') {
|
||||
this.x = 0
|
||||
} else {
|
||||
this.x = -this.rightWidth - this.leftWidth
|
||||
}
|
||||
|
||||
if (this.isopen !== type) {
|
||||
this.$emit('change', type)
|
||||
}
|
||||
this.isopen = type
|
||||
})
|
||||
|
||||
},
|
||||
getSlide(x) {},
|
||||
getQuerySelect() {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.selectAll('.movable-view--hock').boundingClientRect(data => {
|
||||
this.leftWidth = data[1].width
|
||||
this.rightWidth = data[2].width
|
||||
this.width = data[0].width
|
||||
this.viewWidth = this.width + this.rightWidth + this.leftWidth
|
||||
if (this.leftWidth === 0) {
|
||||
// TODO 疑似bug ,初始化的时候如果x 是0，会导致移动位置错误，所以让元素超出一点
|
||||
this.x = -0.1
|
||||
} else {
|
||||
this.x = -this.leftWidth
|
||||
}
|
||||
this.moveX = this.x
|
||||
this.$nextTick(() => {
|
||||
this.swipeShow = 1
|
||||
})
|
||||
|
||||
if (!this.buttonWidth) {
|
||||
this.disabledView = true
|
||||
}
|
||||
|
||||
if (this.autoClose) return
|
||||
if (this.show !== 'none') {
|
||||
this.transition = true
|
||||
this.open(this.shows)
|
||||
}
|
||||
}).exec();
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,260 @@
|
||||
let otherMixins = {}
|
||||
|
||||
// #ifndef APP-PLUS|| MP-WEIXIN || H5
|
||||
const MIN_DISTANCE = 10;
|
||||
otherMixins = {
|
||||
data() {
|
||||
// TODO 随机生生元素ID，解决百度小程序获取同一个元素位置信息的bug
|
||||
const elClass = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
|
||||
return {
|
||||
uniShow: false,
|
||||
left: 0,
|
||||
buttonShow: 'none',
|
||||
ani: false,
|
||||
moveLeft: '',
|
||||
elClass
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show(newVal) {
|
||||
if (this.autoClose) return
|
||||
this.openState(newVal)
|
||||
},
|
||||
left() {
|
||||
this.moveLeft = `translateX(${this.left}px)`
|
||||
},
|
||||
buttonShow(newVal) {
|
||||
if (this.autoClose) return
|
||||
this.openState(newVal)
|
||||
},
|
||||
leftOptions() {
|
||||
this.init()
|
||||
},
|
||||
rightOptions() {
|
||||
this.init()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.swipeaction = this.getSwipeAction()
|
||||
if (this.swipeaction && Array.isArray(this.swipeaction.children)) {
|
||||
this.swipeaction.children.push(this)
|
||||
}
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
clearTimeout(this.timer)
|
||||
this.timer = setTimeout(() => {
|
||||
this.getSelectorQuery()
|
||||
}, 100)
|
||||
// 移动距离
|
||||
this.left = 0
|
||||
this.x = 0
|
||||
},
|
||||
|
||||
closeSwipe(e) {
|
||||
if (this.autoClose && this.swipeaction) {
|
||||
this.swipeaction.closeOther(this)
|
||||
}
|
||||
},
|
||||
appTouchStart(e) {
|
||||
const {
|
||||
clientX
|
||||
} = e.changedTouches[0]
|
||||
this.clientX = clientX
|
||||
this.timestamp = new Date().getTime()
|
||||
},
|
||||
appTouchEnd(e, index, item, position) {
|
||||
const {
|
||||
clientX
|
||||
} = e.changedTouches[0]
|
||||
// fixed by xxxx 模拟点击事件，解决 ios 13 点击区域错位的问题
|
||||
let diff = Math.abs(this.clientX - clientX)
|
||||
let time = (new Date().getTime()) - this.timestamp
|
||||
if (diff < 40 && time < 300) {
|
||||
this.$emit('click', {
|
||||
content: item,
|
||||
index,
|
||||
position
|
||||
})
|
||||
}
|
||||
},
|
||||
touchstart(e) {
|
||||
if (this.disabled) return
|
||||
this.ani = false
|
||||
this.x = this.left || 0
|
||||
this.stopTouchStart(e)
|
||||
this.autoClose && this.closeSwipe()
|
||||
},
|
||||
touchmove(e) {
|
||||
if (this.disabled) return
|
||||
// 是否可以滑动页面
|
||||
this.stopTouchMove(e);
|
||||
if (this.direction !== 'horizontal') {
|
||||
return;
|
||||
}
|
||||
this.move(this.x + this.deltaX)
|
||||
return false
|
||||
},
|
||||
touchend() {
|
||||
if (this.disabled) return
|
||||
this.moveDirection(this.left)
|
||||
},
|
||||
/**
|
||||
* 设置移动距离
|
||||
* @param {Object} value
|
||||
*/
|
||||
move(value) {
|
||||
value = value || 0
|
||||
const leftWidth = this.leftWidth
|
||||
const rightWidth = this.rightWidth
|
||||
// 获取可滑动范围
|
||||
this.left = this.range(value, -rightWidth, leftWidth);
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取范围
|
||||
* @param {Object} num
|
||||
* @param {Object} min
|
||||
* @param {Object} max
|
||||
*/
|
||||
range(num, min, max) {
|
||||
return Math.min(Math.max(num, min), max);
|
||||
},
|
||||
/**
|
||||
* 移动方向判断
|
||||
* @param {Object} left
|
||||
* @param {Object} value
|
||||
*/
|
||||
moveDirection(left) {
|
||||
const threshold = this.threshold
|
||||
const isopen = this.isopen || 'none'
|
||||
const leftWidth = this.leftWidth
|
||||
const rightWidth = this.rightWidth
|
||||
if (this.deltaX === 0) {
|
||||
this.openState('none')
|
||||
return
|
||||
}
|
||||
if ((isopen === 'none' && rightWidth > 0 && -left > threshold) || (isopen !== 'none' && rightWidth >
|
||||
0 && rightWidth +
|
||||
left < threshold)) {
|
||||
// right
|
||||
this.openState('right')
|
||||
} else if ((isopen === 'none' && leftWidth > 0 && left > threshold) || (isopen !== 'none' && leftWidth >
|
||||
0 &&
|
||||
leftWidth - left < threshold)) {
|
||||
// left
|
||||
this.openState('left')
|
||||
} else {
|
||||
// default
|
||||
this.openState('none')
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 开启状态
|
||||
* @param {Boolean} type
|
||||
*/
|
||||
openState(type) {
|
||||
const leftWidth = this.leftWidth
|
||||
const rightWidth = this.rightWidth
|
||||
let left = ''
|
||||
this.isopen = this.isopen ? this.isopen : 'none'
|
||||
switch (type) {
|
||||
case "left":
|
||||
left = leftWidth
|
||||
break
|
||||
case "right":
|
||||
left = -rightWidth
|
||||
break
|
||||
default:
|
||||
left = 0
|
||||
}
|
||||
|
||||
|
||||
if (this.isopen !== type) {
|
||||
this.throttle = true
|
||||
this.$emit('change', type)
|
||||
}
|
||||
|
||||
this.isopen = type
|
||||
// 添加动画类
|
||||
this.ani = true
|
||||
this.$nextTick(() => {
|
||||
this.move(left)
|
||||
})
|
||||
// 设置最终移动位置,理论上只要进入到这个函数，肯定是要打开的
|
||||
},
|
||||
close() {
|
||||
this.openState('none')
|
||||
},
|
||||
getDirection(x, y) {
|
||||
if (x > y && x > MIN_DISTANCE) {
|
||||
return 'horizontal';
|
||||
}
|
||||
if (y > x && y > MIN_DISTANCE) {
|
||||
return 'vertical';
|
||||
}
|
||||
return '';
|
||||
},
|
||||
|
||||
/**
|
||||
* 重置滑动状态
|
||||
* @param {Object} event
|
||||
*/
|
||||
resetTouchStatus() {
|
||||
this.direction = '';
|
||||
this.deltaX = 0;
|
||||
this.deltaY = 0;
|
||||
this.offsetX = 0;
|
||||
this.offsetY = 0;
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置滑动开始位置
|
||||
* @param {Object} event
|
||||
*/
|
||||
stopTouchStart(event) {
|
||||
this.resetTouchStatus();
|
||||
const touch = event.touches[0];
|
||||
this.startX = touch.clientX;
|
||||
this.startY = touch.clientY;
|
||||
},
|
||||
|
||||
/**
|
||||
* 滑动中，是否禁止打开
|
||||
* @param {Object} event
|
||||
*/
|
||||
stopTouchMove(event) {
|
||||
const touch = event.touches[0];
|
||||
this.deltaX = touch.clientX - this.startX;
|
||||
this.deltaY = touch.clientY - this.startY;
|
||||
this.offsetX = Math.abs(this.deltaX);
|
||||
this.offsetY = Math.abs(this.deltaY);
|
||||
this.direction = this.direction || this.getDirection(this.offsetX, this.offsetY);
|
||||
},
|
||||
|
||||
getSelectorQuery() {
|
||||
const views = uni.createSelectorQuery().in(this)
|
||||
views
|
||||
.selectAll('.' + this.elClass)
|
||||
.boundingClientRect(data => {
|
||||
if (data.length === 0) return
|
||||
let show = 'none'
|
||||
if (this.autoClose) {
|
||||
show = 'none'
|
||||
} else {
|
||||
show = this.show
|
||||
}
|
||||
this.leftWidth = data[0].width || 0
|
||||
this.rightWidth = data[1].width || 0
|
||||
this.buttonShow = show
|
||||
})
|
||||
.exec()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
export default otherMixins
|
||||
@ -0,0 +1,84 @@
|
||||
let mpMixins = {}
|
||||
let is_pc = null
|
||||
// #ifdef H5
|
||||
import {
|
||||
isPC
|
||||
} from "./isPC"
|
||||
is_pc = isPC()
|
||||
// #endif
|
||||
// #ifdef APP-VUE|| MP-WEIXIN || H5
|
||||
|
||||
mpMixins = {
|
||||
data() {
|
||||
return {
|
||||
is_show: 'none'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show(newVal) {
|
||||
this.is_show = this.show
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.swipeaction = this.getSwipeAction()
|
||||
if (this.swipeaction && Array.isArray(this.swipeaction.children)) {
|
||||
this.swipeaction.children.push(this)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.is_show = this.show
|
||||
},
|
||||
methods: {
|
||||
// wxs 中调用
|
||||
closeSwipe(e) {
|
||||
if (this.autoClose && this.swipeaction) {
|
||||
this.swipeaction.closeOther(this)
|
||||
}
|
||||
},
|
||||
|
||||
change(e) {
|
||||
this.$emit('change', e.open)
|
||||
if (this.is_show !== e.open) {
|
||||
this.is_show = e.open
|
||||
}
|
||||
},
|
||||
|
||||
appTouchStart(e) {
|
||||
if (is_pc) return
|
||||
const {
|
||||
clientX
|
||||
} = e.changedTouches[0]
|
||||
this.clientX = clientX
|
||||
this.timestamp = new Date().getTime()
|
||||
},
|
||||
appTouchEnd(e, index, item, position) {
|
||||
if (is_pc) return
|
||||
const {
|
||||
clientX
|
||||
} = e.changedTouches[0]
|
||||
// fixed by xxxx 模拟点击事件，解决 ios 13 点击区域错位的问题
|
||||
let diff = Math.abs(this.clientX - clientX)
|
||||
let time = (new Date().getTime()) - this.timestamp
|
||||
if (diff < 40 && time < 300) {
|
||||
this.$emit('click', {
|
||||
content: item,
|
||||
index,
|
||||
position
|
||||
})
|
||||
}
|
||||
},
|
||||
onClickForPC(index, item, position) {
|
||||
if (!is_pc) return
|
||||
// #ifdef H5
|
||||
this.$emit('click', {
|
||||
content: item,
|
||||
index,
|
||||
position
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// #endif
|
||||
export default mpMixins
|
||||
@ -0,0 +1,270 @@
|
||||
const MIN_DISTANCE = 10;
|
||||
export default {
|
||||
showWatch(newVal, oldVal, ownerInstance, instance, self) {
|
||||
var state = self.state
|
||||
var $el = ownerInstance.$el || ownerInstance.$vm && ownerInstance.$vm.$el
|
||||
if (!$el) return
|
||||
this.getDom(instance, ownerInstance, self)
|
||||
if (newVal && newVal !== 'none') {
|
||||
this.openState(newVal, instance, ownerInstance, self)
|
||||
return
|
||||
}
|
||||
|
||||
if (state.left) {
|
||||
this.openState('none', instance, ownerInstance, self)
|
||||
}
|
||||
this.resetTouchStatus(instance, self)
|
||||
},
|
||||
|
||||
/**
|
||||
* 开始触摸操作
|
||||
* @param {Object} e
|
||||
* @param {Object} ins
|
||||
*/
|
||||
touchstart(e, ownerInstance, self) {
|
||||
let instance = e.instance;
|
||||
let disabled = instance.getDataset().disabled
|
||||
let state = self.state;
|
||||
this.getDom(instance, ownerInstance, self)
|
||||
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||
disabled = this.getDisabledType(disabled)
|
||||
if (disabled) return
|
||||
// 开始触摸时移除动画类
|
||||
instance.requestAnimationFrame(function() {
|
||||
instance.removeClass('ani');
|
||||
ownerInstance.callMethod('closeSwipe');
|
||||
})
|
||||
|
||||
// 记录上次的位置
|
||||
state.x = state.left || 0
|
||||
// 计算滑动开始位置
|
||||
this.stopTouchStart(e, ownerInstance, self)
|
||||
},
|
||||
|
||||
/**
|
||||
* 开始滑动操作
|
||||
* @param {Object} e
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
touchmove(e, ownerInstance, self) {
|
||||
let instance = e.instance;
|
||||
// 删除之后已经那不到实例了
|
||||
if (!instance) return;
|
||||
let disabled = instance.getDataset().disabled
|
||||
let state = self.state
|
||||
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||
disabled = this.getDisabledType(disabled)
|
||||
if (disabled) return
|
||||
// 是否可以滑动页面
|
||||
this.stopTouchMove(e, self);
|
||||
if (state.direction !== 'horizontal') {
|
||||
return;
|
||||
}
|
||||
if (e.preventDefault) {
|
||||
// 阻止页面滚动
|
||||
e.preventDefault()
|
||||
}
|
||||
let x = state.x + state.deltaX
|
||||
this.move(x, instance, ownerInstance, self)
|
||||
},
|
||||
|
||||
/**
|
||||
* 结束触摸操作
|
||||
* @param {Object} e
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
touchend(e, ownerInstance, self) {
|
||||
let instance = e.instance;
|
||||
let disabled = instance.getDataset().disabled
|
||||
let state = self.state
|
||||
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||
disabled = this.getDisabledType(disabled)
|
||||
|
||||
if (disabled) return
|
||||
// 滑动过程中触摸结束,通过阙值判断是开启还是关闭
|
||||
// fixed by mehaotian 定时器解决点击按钮，touchend 触发比 click 事件时机早的问题 ，主要是 ios13
|
||||
this.moveDirection(state.left, instance, ownerInstance, self)
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置移动距离
|
||||
* @param {Object} value
|
||||
* @param {Object} instance
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
move(value, instance, ownerInstance, self) {
|
||||
value = value || 0
|
||||
let state = self.state
|
||||
let leftWidth = state.leftWidth
|
||||
let rightWidth = state.rightWidth
|
||||
// 获取可滑动范围
|
||||
state.left = this.range(value, -rightWidth, leftWidth);
|
||||
instance.requestAnimationFrame(function() {
|
||||
instance.setStyle({
|
||||
transform: 'translateX(' + state.left + 'px)',
|
||||
'-webkit-transform': 'translateX(' + state.left + 'px)'
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取元素信息
|
||||
* @param {Object} instance
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
getDom(instance, ownerInstance, self) {
|
||||
var state = self.state
|
||||
var $el = ownerInstance.$el || ownerInstance.$vm && ownerInstance.$vm.$el
|
||||
var leftDom = $el.querySelector('.button-group--left')
|
||||
var rightDom = $el.querySelector('.button-group--right')
|
||||
|
||||
state.leftWidth = leftDom.offsetWidth || 0
|
||||
state.rightWidth = rightDom.offsetWidth || 0
|
||||
state.threshold = instance.getDataset().threshold
|
||||
},
|
||||
|
||||
getDisabledType(value) {
|
||||
return (typeof(value) === 'string' ? JSON.parse(value) : value) || false;
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取范围
|
||||
* @param {Object} num
|
||||
* @param {Object} min
|
||||
* @param {Object} max
|
||||
*/
|
||||
range(num, min, max) {
|
||||
return Math.min(Math.max(num, min), max);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 移动方向判断
|
||||
* @param {Object} left
|
||||
* @param {Object} value
|
||||
* @param {Object} ownerInstance
|
||||
* @param {Object} ins
|
||||
*/
|
||||
moveDirection(left, ins, ownerInstance, self) {
|
||||
var state = self.state
|
||||
var threshold = state.threshold
|
||||
var position = state.position
|
||||
var isopen = state.isopen || 'none'
|
||||
var leftWidth = state.leftWidth
|
||||
var rightWidth = state.rightWidth
|
||||
if (state.deltaX === 0) {
|
||||
this.openState('none', ins, ownerInstance, self)
|
||||
return
|
||||
}
|
||||
if ((isopen === 'none' && rightWidth > 0 && -left > threshold) || (isopen !== 'none' && rightWidth > 0 &&
|
||||
rightWidth +
|
||||
left < threshold)) {
|
||||
// right
|
||||
this.openState('right', ins, ownerInstance, self)
|
||||
} else if ((isopen === 'none' && leftWidth > 0 && left > threshold) || (isopen !== 'none' && leftWidth > 0 &&
|
||||
leftWidth - left < threshold)) {
|
||||
// left
|
||||
this.openState('left', ins, ownerInstance, self)
|
||||
} else {
|
||||
// default
|
||||
this.openState('none', ins, ownerInstance, self)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 开启状态
|
||||
* @param {Boolean} type
|
||||
* @param {Object} ins
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
openState(type, ins, ownerInstance, self) {
|
||||
let state = self.state
|
||||
let leftWidth = state.leftWidth
|
||||
let rightWidth = state.rightWidth
|
||||
let left = ''
|
||||
state.isopen = state.isopen ? state.isopen : 'none'
|
||||
switch (type) {
|
||||
case "left":
|
||||
left = leftWidth
|
||||
break
|
||||
case "right":
|
||||
left = -rightWidth
|
||||
break
|
||||
default:
|
||||
left = 0
|
||||
}
|
||||
|
||||
// && !state.throttle
|
||||
|
||||
if (state.isopen !== type) {
|
||||
state.throttle = true
|
||||
ownerInstance.callMethod('change', {
|
||||
open: type
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
state.isopen = type
|
||||
// 添加动画类
|
||||
ins.requestAnimationFrame(() => {
|
||||
ins.addClass('ani');
|
||||
this.move(left, ins, ownerInstance, self)
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
getDirection(x, y) {
|
||||
if (x > y && x > MIN_DISTANCE) {
|
||||
return 'horizontal';
|
||||
}
|
||||
if (y > x && y > MIN_DISTANCE) {
|
||||
return 'vertical';
|
||||
}
|
||||
return '';
|
||||
},
|
||||
|
||||
/**
|
||||
* 重置滑动状态
|
||||
* @param {Object} event
|
||||
*/
|
||||
resetTouchStatus(instance, self) {
|
||||
let state = self.state;
|
||||
state.direction = '';
|
||||
state.deltaX = 0;
|
||||
state.deltaY = 0;
|
||||
state.offsetX = 0;
|
||||
state.offsetY = 0;
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置滑动开始位置
|
||||
* @param {Object} event
|
||||
*/
|
||||
stopTouchStart(event, ownerInstance, self) {
|
||||
let instance = event.instance;
|
||||
let state = self.state
|
||||
this.resetTouchStatus(instance, self);
|
||||
var touch = event.touches[0];
|
||||
state.startX = touch.clientX;
|
||||
state.startY = touch.clientY;
|
||||
},
|
||||
|
||||
/**
|
||||
* 滑动中，是否禁止打开
|
||||
* @param {Object} event
|
||||
*/
|
||||
stopTouchMove(event, self) {
|
||||
let instance = event.instance;
|
||||
let state = self.state;
|
||||
let touch = event.touches[0];
|
||||
|
||||
state.deltaX = touch.clientX - state.startX;
|
||||
state.deltaY = touch.clientY - state.startY;
|
||||
state.offsetY = Math.abs(state.deltaY);
|
||||
state.offsetX = Math.abs(state.deltaX);
|
||||
state.direction = state.direction || this.getDirection(state.offsetX, state.offsetY);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,348 @@
|
||||
<template>
|
||||
<!-- 在微信小程序 app vue端 h5 使用wxs 实现-->
|
||||
<!-- #ifdef APP-VUE || MP-WEIXIN || H5 -->
|
||||
<view class="uni-swipe">
|
||||
<!-- #ifdef MP-WEIXIN || VUE3 -->
|
||||
<view class="uni-swipe_box" :change:prop="wxsswipe.showWatch" :prop="is_show" :data-threshold="threshold"
|
||||
:data-disabled="disabled" @touchstart="wxsswipe.touchstart" @touchmove="wxsswipe.touchmove"
|
||||
@touchend="wxsswipe.touchend">
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN || VUE3 -->
|
||||
<view class="uni-swipe_box" :change:prop="renderswipe.showWatch" :prop="is_show" :data-threshold="threshold"
|
||||
:data-disabled="disabled+''" @touchstart="renderswipe.touchstart" @touchmove="renderswipe.touchmove"
|
||||
@touchend="renderswipe.touchend">
|
||||
<!-- #endif -->
|
||||
<!-- 在微信小程序 app vue端 h5 使用wxs 实现-->
|
||||
<view class="uni-swipe_button-group button-group--left">
|
||||
<slot name="left">
|
||||
<view v-for="(item,index) in leftOptions" :key="index" :style="{
|
||||
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD'
|
||||
}" class="uni-swipe_button button-hock" @touchstart.stop="appTouchStart"
|
||||
@touchend.stop="appTouchEnd($event,index,item,'left')" @click.stop="onClickForPC(index,item,'left')">
|
||||
<text class="uni-swipe_button-text"
|
||||
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
<view class="uni-swipe_text--center">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<view class="uni-swipe_button-group button-group--right">
|
||||
<slot name="right">
|
||||
<view v-for="(item,index) in rightOptions" :key="index" :style="{
|
||||
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD'
|
||||
}" class="uni-swipe_button button-hock" @touchstart.stop="appTouchStart"
|
||||
@touchend.stop="appTouchEnd($event,index,item,'right')" @click.stop="onClickForPC(index,item,'right')"><text
|
||||
class="uni-swipe_button-text"
|
||||
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- app nvue端 使用 bindingx -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<view ref="selector-box--hock" class="uni-swipe" @horizontalpan="touchstart" @touchend="touchend">
|
||||
<view ref='selector-left-button--hock' class="uni-swipe_button-group button-group--left">
|
||||
<slot name="left">
|
||||
<view v-for="(item,index) in leftOptions" :key="index" :style="{
|
||||
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD'
|
||||
}" class="uni-swipe_button button-hock" @click.stop="onClick(index,item,'left')">
|
||||
<text class="uni-swipe_button-text"
|
||||
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF', fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">
|
||||
{{ item.text }}
|
||||
</text>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
<view ref='selector-right-button--hock' class="uni-swipe_button-group button-group--right">
|
||||
<slot name="right">
|
||||
<view v-for="(item,index) in rightOptions" :key="index" :style="{
|
||||
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD'
|
||||
}" class="uni-swipe_button button-hock" @click.stop="onClick(index,item,'right')"><text
|
||||
class="uni-swipe_button-text"
|
||||
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
<view ref='selector-content--hock' class="uni-swipe_box">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- 其他平台使用 js ，长列表性能可能会有影响-->
|
||||
<!-- #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ -->
|
||||
<view class="uni-swipe">
|
||||
<view class="uni-swipe_box" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"
|
||||
:style="{transform:moveLeft}" :class="{ani:ani}">
|
||||
<view class="uni-swipe_button-group button-group--left" :class="[elClass]">
|
||||
<slot name="left">
|
||||
<view v-for="(item,index) in leftOptions" :key="index" :style="{
|
||||
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
|
||||
fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
|
||||
}" class="uni-swipe_button button-hock" @touchstart.stop="appTouchStart"
|
||||
@touchend.stop="appTouchEnd($event,index,item,'left')"><text class="uni-swipe_button-text"
|
||||
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
<slot></slot>
|
||||
<view class="uni-swipe_button-group button-group--right" :class="[elClass]">
|
||||
<slot name="right">
|
||||
<view v-for="(item,index) in rightOptions" :key="index" :style="{
|
||||
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
|
||||
fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
|
||||
}" @touchstart.stop="appTouchStart" @touchend.stop="appTouchEnd($event,index,item,'right')"
|
||||
class="uni-swipe_button button-hock"><text class="uni-swipe_button-text"
|
||||
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
</template>
|
||||
<script src="./wx.wxs" module="wxsswipe" lang="wxs"></script>
|
||||
|
||||
<script module="renderswipe" lang="renderjs">
|
||||
import render from './render.js'
|
||||
export default {
|
||||
mounted(e, ins, owner) {
|
||||
this.state = {}
|
||||
},
|
||||
methods: {
|
||||
showWatch(newVal, oldVal, ownerInstance, instance) {
|
||||
render.showWatch(newVal, oldVal, ownerInstance, instance, this)
|
||||
},
|
||||
touchstart(e, ownerInstance) {
|
||||
render.touchstart(e, ownerInstance, this)
|
||||
},
|
||||
touchmove(e, ownerInstance) {
|
||||
render.touchmove(e, ownerInstance, this)
|
||||
},
|
||||
touchend(e, ownerInstance) {
|
||||
render.touchend(e, ownerInstance, this)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
import mpwxs from './mpwxs'
|
||||
import bindingx from './bindingx.js'
|
||||
import mpother from './mpother'
|
||||
|
||||
/**
|
||||
* SwipeActionItem 滑动操作子组件
|
||||
* @description 通过滑动触发选项的容器
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=181
|
||||
* @property {Boolean} show = [left|right｜none] 开启关闭组件，auto-close = false 时生效
|
||||
* @property {Boolean} disabled = [true|false] 是否禁止滑动
|
||||
* @property {Boolean} autoClose = [true|false] 滑动打开当前组件，是否关闭其他组件
|
||||
* @property {Number} threshold 滑动缺省值
|
||||
* @property {Array} leftOptions 左侧选项内容及样式
|
||||
* @property {Array} rgihtOptions 右侧选项内容及样式
|
||||
* @event {Function} click 点击选项按钮时触发事件，e = {content,index} ，content（点击内容）、index（下标)
|
||||
* @event {Function} change 组件打开或关闭时触发，left\right\none
|
||||
*/
|
||||
|
||||
export default {
|
||||
mixins: [mpwxs, bindingx, mpother],
|
||||
emits: ['click', 'change'],
|
||||
props: {
|
||||
// 控制开关
|
||||
show: {
|
||||
type: String,
|
||||
default: 'none'
|
||||
},
|
||||
|
||||
// 禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
// 是否自动关闭
|
||||
autoClose: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
|
||||
// 滑动缺省距离
|
||||
threshold: {
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
|
||||
// 左侧按钮内容
|
||||
leftOptions: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
|
||||
// 右侧按钮内容
|
||||
rightOptions: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
// #ifndef VUE3
|
||||
// TODO vue2
|
||||
destroyed() {
|
||||
if (this.__isUnmounted) return
|
||||
this.uninstall()
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
// TODO vue3
|
||||
unmounted() {
|
||||
this.__isUnmounted = true
|
||||
this.uninstall()
|
||||
},
|
||||
// #endif
|
||||
|
||||
methods: {
|
||||
uninstall() {
|
||||
if (this.swipeaction) {
|
||||
this.swipeaction.children.forEach((item, index) => {
|
||||
if (item === this) {
|
||||
this.swipeaction.children.splice(index, 1)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取父元素实例
|
||||
*/
|
||||
getSwipeAction(name = 'uniSwipeAction') {
|
||||
let parent = this.$parent;
|
||||
let parentName = parent.$options.name;
|
||||
while (parentName !== name) {
|
||||
parent = parent.$parent;
|
||||
if (!parent) return false;
|
||||
parentName = parent.$options.name;
|
||||
}
|
||||
return parent;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.uni-swipe {
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
overflow: hidden;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-swipe_box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
// touch-action: none;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.uni-swipe_content {
|
||||
// border: 1px red solid;
|
||||
}
|
||||
|
||||
.uni-swipe_text--center {
|
||||
width: 100%;
|
||||
/* #ifndef APP-NVUE */
|
||||
cursor: grab;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-swipe_button-group {
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.button-group--left {
|
||||
left: 0;
|
||||
transform: translateX(-100%)
|
||||
}
|
||||
|
||||
.button-group--right {
|
||||
right: 0;
|
||||
transform: translateX(100%)
|
||||
}
|
||||
|
||||
.uni-swipe_button {
|
||||
/* #ifdef APP-NVUE */
|
||||
flex: 1;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.uni-swipe_button-text {
|
||||
/* #ifndef APP-NVUE */
|
||||
flex-shrink: 0;
|
||||
/* #endif */
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ani {
|
||||
transition-property: transform;
|
||||
transition-duration: 0.3s;
|
||||
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
}
|
||||
|
||||
/* #ifdef MP-ALIPAY */
|
||||
.movable-area {
|
||||
/* width: 100%; */
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.movable-view {
|
||||
display: flex;
|
||||
/* justify-content: center; */
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: 45px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.movable-view-button {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
background: #C0C0C0;
|
||||
}
|
||||
|
||||
/* .transition {
|
||||
transition: all 0.3s;
|
||||
} */
|
||||
|
||||
.movable-view-box {
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
</style>
|
||||
@ -0,0 +1,341 @@
|
||||
var MIN_DISTANCE = 10;
|
||||
|
||||
/**
|
||||
* 判断当前是否为H5、app-vue
|
||||
*/
|
||||
var IS_HTML5 = false
|
||||
if (typeof window === 'object') IS_HTML5 = true
|
||||
|
||||
/**
|
||||
* 监听页面内值的变化,主要用于动态开关swipe-action
|
||||
* @param {Object} newValue
|
||||
* @param {Object} oldValue
|
||||
* @param {Object} ownerInstance
|
||||
* @param {Object} instance
|
||||
*/
|
||||
function showWatch(newVal, oldVal, ownerInstance, instance) {
|
||||
var state = instance.getState()
|
||||
getDom(instance, ownerInstance)
|
||||
if (newVal && newVal !== 'none') {
|
||||
openState(newVal, instance, ownerInstance)
|
||||
return
|
||||
}
|
||||
|
||||
if (state.left) {
|
||||
openState('none', instance, ownerInstance)
|
||||
}
|
||||
resetTouchStatus(instance)
|
||||
}
|
||||
|
||||
/**
|
||||
* 开始触摸操作
|
||||
* @param {Object} e
|
||||
* @param {Object} ins
|
||||
*/
|
||||
function touchstart(e, ownerInstance) {
|
||||
var instance = e.instance;
|
||||
var disabled = instance.getDataset().disabled
|
||||
var state = instance.getState();
|
||||
getDom(instance, ownerInstance)
|
||||
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||
disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
|
||||
if (disabled) return
|
||||
// 开始触摸时移除动画类
|
||||
instance.requestAnimationFrame(function() {
|
||||
instance.removeClass('ani');
|
||||
ownerInstance.callMethod('closeSwipe');
|
||||
})
|
||||
|
||||
// 记录上次的位置
|
||||
state.x = state.left || 0
|
||||
// 计算滑动开始位置
|
||||
stopTouchStart(e, ownerInstance)
|
||||
}
|
||||
|
||||
/**
|
||||
* 开始滑动操作
|
||||
* @param {Object} e
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
function touchmove(e, ownerInstance) {
|
||||
var instance = e.instance;
|
||||
var disabled = instance.getDataset().disabled
|
||||
var state = instance.getState()
|
||||
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||
disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
|
||||
if (disabled) return
|
||||
// 是否可以滑动页面
|
||||
stopTouchMove(e);
|
||||
if (state.direction !== 'horizontal') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.preventDefault) {
|
||||
// 阻止页面滚动
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
move(state.x + state.deltaX, instance, ownerInstance)
|
||||
}
|
||||
|
||||
/**
|
||||
* 结束触摸操作
|
||||
* @param {Object} e
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
function touchend(e, ownerInstance) {
|
||||
var instance = e.instance;
|
||||
var disabled = instance.getDataset().disabled
|
||||
var state = instance.getState()
|
||||
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||
disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
|
||||
|
||||
if (disabled) return
|
||||
// 滑动过程中触摸结束,通过阙值判断是开启还是关闭
|
||||
// fixed by mehaotian 定时器解决点击按钮，touchend 触发比 click 事件时机早的问题 ，主要是 ios13
|
||||
moveDirection(state.left, instance, ownerInstance)
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置移动距离
|
||||
* @param {Object} value
|
||||
* @param {Object} instance
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
function move(value, instance, ownerInstance) {
|
||||
value = value || 0
|
||||
var state = instance.getState()
|
||||
var leftWidth = state.leftWidth
|
||||
var rightWidth = state.rightWidth
|
||||
// 获取可滑动范围
|
||||
state.left = range(value, -rightWidth, leftWidth);
|
||||
instance.requestAnimationFrame(function() {
|
||||
instance.setStyle({
|
||||
transform: 'translateX(' + state.left + 'px)',
|
||||
'-webkit-transform': 'translateX(' + state.left + 'px)'
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取元素信息
|
||||
* @param {Object} instance
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
function getDom(instance, ownerInstance) {
|
||||
var state = instance.getState()
|
||||
var leftDom = ownerInstance.selectComponent('.button-group--left')
|
||||
var rightDom = ownerInstance.selectComponent('.button-group--right')
|
||||
var leftStyles = {
|
||||
width: 0
|
||||
}
|
||||
var rightStyles = {
|
||||
width: 0
|
||||
}
|
||||
leftStyles = leftDom.getBoundingClientRect()
|
||||
rightStyles = rightDom.getBoundingClientRect()
|
||||
|
||||
state.leftWidth = leftStyles.width || 0
|
||||
state.rightWidth = rightStyles.width || 0
|
||||
state.threshold = instance.getDataset().threshold
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取范围
|
||||
* @param {Object} num
|
||||
* @param {Object} min
|
||||
* @param {Object} max
|
||||
*/
|
||||
function range(num, min, max) {
|
||||
return Math.min(Math.max(num, min), max);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 移动方向判断
|
||||
* @param {Object} left
|
||||
* @param {Object} value
|
||||
* @param {Object} ownerInstance
|
||||
* @param {Object} ins
|
||||
*/
|
||||
function moveDirection(left, ins, ownerInstance) {
|
||||
var state = ins.getState()
|
||||
var threshold = state.threshold
|
||||
var position = state.position
|
||||
var isopen = state.isopen || 'none'
|
||||
var leftWidth = state.leftWidth
|
||||
var rightWidth = state.rightWidth
|
||||
if (state.deltaX === 0) {
|
||||
openState('none', ins, ownerInstance)
|
||||
return
|
||||
}
|
||||
if ((isopen === 'none' && rightWidth > 0 && -left > threshold) || (isopen !== 'none' && rightWidth > 0 &&
|
||||
rightWidth +
|
||||
left < threshold)) {
|
||||
// right
|
||||
openState('right', ins, ownerInstance)
|
||||
} else if ((isopen === 'none' && leftWidth > 0 && left > threshold) || (isopen !== 'none' && leftWidth > 0 &&
|
||||
leftWidth - left < threshold)) {
|
||||
// left
|
||||
openState('left', ins, ownerInstance)
|
||||
} else {
|
||||
// default
|
||||
openState('none', ins, ownerInstance)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 开启状态
|
||||
* @param {Boolean} type
|
||||
* @param {Object} ins
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
function openState(type, ins, ownerInstance) {
|
||||
var state = ins.getState()
|
||||
var leftWidth = state.leftWidth
|
||||
var rightWidth = state.rightWidth
|
||||
var left = ''
|
||||
state.isopen = state.isopen ? state.isopen : 'none'
|
||||
switch (type) {
|
||||
case "left":
|
||||
left = leftWidth
|
||||
break
|
||||
case "right":
|
||||
left = -rightWidth
|
||||
break
|
||||
default:
|
||||
left = 0
|
||||
}
|
||||
|
||||
// && !state.throttle
|
||||
|
||||
if (state.isopen !== type) {
|
||||
state.throttle = true
|
||||
ownerInstance.callMethod('change', {
|
||||
open: type
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
state.isopen = type
|
||||
// 添加动画类
|
||||
ins.requestAnimationFrame(function() {
|
||||
ins.addClass('ani');
|
||||
move(left, ins, ownerInstance)
|
||||
})
|
||||
// 设置最终移动位置,理论上只要进入到这个函数，肯定是要打开的
|
||||
}
|
||||
|
||||
|
||||
function getDirection(x, y) {
|
||||
if (x > y && x > MIN_DISTANCE) {
|
||||
return 'horizontal';
|
||||
}
|
||||
if (y > x && y > MIN_DISTANCE) {
|
||||
return 'vertical';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置滑动状态
|
||||
* @param {Object} event
|
||||
*/
|
||||
function resetTouchStatus(instance) {
|
||||
var state = instance.getState();
|
||||
state.direction = '';
|
||||
state.deltaX = 0;
|
||||
state.deltaY = 0;
|
||||
state.offsetX = 0;
|
||||
state.offsetY = 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置滑动开始位置
|
||||
* @param {Object} event
|
||||
*/
|
||||
function stopTouchStart(event) {
|
||||
var instance = event.instance;
|
||||
var state = instance.getState();
|
||||
resetTouchStatus(instance);
|
||||
var touch = event.touches[0];
|
||||
if (IS_HTML5 && isPC()) {
|
||||
touch = event;
|
||||
}
|
||||
state.startX = touch.clientX;
|
||||
state.startY = touch.clientY;
|
||||
}
|
||||
|
||||
/**
|
||||
* 滑动中，是否禁止打开
|
||||
* @param {Object} event
|
||||
*/
|
||||
function stopTouchMove(event) {
|
||||
var instance = event.instance;
|
||||
var state = instance.getState();
|
||||
var touch = event.touches[0];
|
||||
if (IS_HTML5 && isPC()) {
|
||||
touch = event;
|
||||
}
|
||||
state.deltaX = touch.clientX - state.startX;
|
||||
state.deltaY = touch.clientY - state.startY;
|
||||
state.offsetY = Math.abs(state.deltaY);
|
||||
state.offsetX = Math.abs(state.deltaX);
|
||||
state.direction = state.direction || getDirection(state.offsetX, state.offsetY);
|
||||
}
|
||||
|
||||
function isPC() {
|
||||
var userAgentInfo = navigator.userAgent;
|
||||
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
|
||||
var flag = true;
|
||||
for (var v = 0; v < Agents.length - 1; v++) {
|
||||
if (userAgentInfo.indexOf(Agents[v]) > 0) {
|
||||
flag = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return flag;
|
||||
}
|
||||
|
||||
var movable = false
|
||||
|
||||
function mousedown(e, ins) {
|
||||
if (!IS_HTML5) return
|
||||
if (!isPC()) return
|
||||
touchstart(e, ins)
|
||||
movable = true
|
||||
}
|
||||
|
||||
function mousemove(e, ins) {
|
||||
if (!IS_HTML5) return
|
||||
if (!isPC()) return
|
||||
if (!movable) return
|
||||
touchmove(e, ins)
|
||||
}
|
||||
|
||||
function mouseup(e, ins) {
|
||||
if (!IS_HTML5) return
|
||||
if (!isPC()) return
|
||||
touchend(e, ins)
|
||||
movable = false
|
||||
}
|
||||
|
||||
function mouseleave(e, ins) {
|
||||
if (!IS_HTML5) return
|
||||
if (!isPC()) return
|
||||
movable = false
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
showWatch: showWatch,
|
||||
touchstart: touchstart,
|
||||
touchmove: touchmove,
|
||||
touchend: touchend,
|
||||
mousedown: mousedown,
|
||||
mousemove: mousemove,
|
||||
mouseup: mouseup,
|
||||
mouseleave: mouseleave
|
||||
}
|
||||
@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<view>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* SwipeAction 滑动操作
|
||||
* @description 通过滑动触发选项的容器
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=181
|
||||
*/
|
||||
export default {
|
||||
name:"uniSwipeAction",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
this.children = [];
|
||||
},
|
||||
methods: {
|
||||
// 公开给用户使用，重制组件样式
|
||||
resize(){
|
||||
// wxs 会自己计算组件大小，所以无需执行下面代码
|
||||
// #ifndef APP-VUE || H5 || MP-WEIXIN
|
||||
this.children.forEach(vm=>{
|
||||
vm.init()
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
// 公开给用户使用，关闭全部 已经打开的组件
|
||||
closeAll(){
|
||||
this.children.forEach(vm=>{
|
||||
// #ifdef APP-VUE || H5 || MP-WEIXIN
|
||||
vm.is_show = 'none'
|
||||
// #endif
|
||||
|
||||
// #ifndef APP-VUE || H5 || MP-WEIXIN
|
||||
vm.close()
|
||||
// #endif
|
||||
})
|
||||
},
|
||||
closeOther(vm) {
|
||||
if (this.openItem && this.openItem !== vm) {
|
||||
// #ifdef APP-VUE || H5 || MP-WEIXIN
|
||||
this.openItem.is_show = 'none'
|
||||
// #endif
|
||||
|
||||
// #ifndef APP-VUE || H5 || MP-WEIXIN
|
||||
this.openItem.close()
|
||||
// #endif
|
||||
}
|
||||
// 记录上一个打开的 swipe-action-item ,用于 auto-close
|
||||
this.openItem = vm
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
84
uni_modules/uni-swipe-action/package.json
Normal file
84
uni_modules/uni-swipe-action/package.json
Normal file
@ -0,0 +1,84 @@
|
||||
{
|
||||
"id": "uni-swipe-action",
|
||||
"displayName": "uni-swipe-action 滑动操作",
|
||||
"version": "1.3.10",
|
||||
"description": "SwipeAction 滑动操作操作组件",
|
||||
"keywords": [
|
||||
"",
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"滑动删除",
|
||||
"侧滑删除"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": ["uni-scss"],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "y",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
11
uni_modules/uni-swipe-action/readme.md
Normal file
11
uni_modules/uni-swipe-action/readme.md
Normal file
@ -0,0 +1,11 @@
|
||||
|
||||
|
||||
## SwipeAction 滑动操作
|
||||
> **组件名：uni-swipe-action**
|
||||
> 代码块： `uSwipeAction`、`uSwipeActionItem`
|
||||
|
||||
|
||||
通过滑动触发选项的容器
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-swipe-action)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
Loading…
Reference in New Issue
Block a user