新增部分组件使用说明、新增购物车组件
parent
8fbaf73ea6
commit
b8de6ba4c3
|
|
@ -0,0 +1,37 @@
|
||||||
|
第一步：引入组件
|
||||||
|
|
||||||
|
import statusContainer from '@/components/containers/status-container.vue';
|
||||||
|
|
||||||
|
第二步：注册组件
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
statusContainer
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
第三步：使用组件
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<status-container
|
||||||
|
:ifReturn="true"
|
||||||
|
:ifTitle="true"
|
||||||
|
titlet="首页"
|
||||||
|
:ifTitleCenter="true"
|
||||||
|
titlec="#000000"
|
||||||
|
returnc="#333333"
|
||||||
|
backgroundc="#FFFFFF"
|
||||||
|
></status-container>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
参数说明
|
||||||
|
|
||||||
|
ifTitle：是否显示标题，默认true
|
||||||
|
titlet：标题文字，默认标题
|
||||||
|
ifTitleCenter：标题是否居中，默认居中
|
||||||
|
titlec：标题颜色，默认#000000
|
||||||
|
ifReturn：是否显示返回键，默认显示
|
||||||
|
returnc：返回键颜色，默认#333333
|
||||||
|
backgroundc：导航栏背景色，默认#FFFFFF
|
||||||
|
|
@ -0,0 +1,155 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<swiper class="swiper-preview" :duration="500"
|
||||||
|
:style="{width:nwidth+'px',height:nheight + 'px'}"
|
||||||
|
:current="currentNum" @change="changeSwiper">
|
||||||
|
<swiper-item v-for="(item,index) in list" :key="index">
|
||||||
|
<!-- 可上下滚动框 -->
|
||||||
|
<view :class="ifCenter ? 'disjcac' : 'dis'" scroll-y="true" :style="{height:nheight + 'px'}" style="overflow: hidden;overflow-y: scroll;">
|
||||||
|
<!-- 视频 -->
|
||||||
|
<video v-if="item.src.includes('.mp4')" :src="item.src" controls enable-play-gesture show-center-play-btn></video>
|
||||||
|
<!-- 图片 -->
|
||||||
|
<image :class="'img--'+index" v-else class="width100" :src="item.src" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
<!-- 头部信息 -->
|
||||||
|
<view class="swiper-text-box">
|
||||||
|
<view class="fon28 mar-x10 disjbac fe">
|
||||||
|
<!-- 标题 -->
|
||||||
|
<view v-if="list[currentNum].title" class="clips1 width100" :style="{color:titlec}">{{list[currentNum].title}}</view>
|
||||||
|
<!-- 描述 -->
|
||||||
|
<view class="flexs pad-sx10 pad-zy20 radius10 colf" :style="{background: changeBackgroundColor}"><text>{{currentNum+1}}</text>/<text>{{list.length}}</text></view>
|
||||||
|
</view>
|
||||||
|
<!-- 当前索引-1和总数 -->
|
||||||
|
<view v-if="list[currentNum].content" class="clips2 fon24 line-h40" :style="{color:contentc}">{{list[currentNum].content}}</view>
|
||||||
|
</view>
|
||||||
|
<!-- 取消按钮 -->
|
||||||
|
<view class="swiper-close-btn" @tap="closeCustomEv">关闭</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"img-preview",
|
||||||
|
props:{
|
||||||
|
list:{
|
||||||
|
type:Array,
|
||||||
|
default:()=>{
|
||||||
|
return [
|
||||||
|
{src:'',title:'标题',content:'描述描述描述描述描述描述描述描述'},
|
||||||
|
{src:'',title:'标题',content:'描述描述描述描述描述描述描述描述'},
|
||||||
|
{src:'',title:'标题',content:'描述描述描述描述描述描述描述描述'},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 窗体宽度
|
||||||
|
nwidth:{
|
||||||
|
type:String,
|
||||||
|
default: uni.getSystemInfoSync().windowWidth+''
|
||||||
|
},
|
||||||
|
// 窗体高度
|
||||||
|
nheight:{
|
||||||
|
type:String,
|
||||||
|
default: uni.getSystemInfoSync().windowHeight+''
|
||||||
|
},
|
||||||
|
// 标题颜色
|
||||||
|
titlec:{
|
||||||
|
type:String,
|
||||||
|
default:'#FFFFFF'
|
||||||
|
},
|
||||||
|
// 描述颜色
|
||||||
|
contentc:{
|
||||||
|
type:String,
|
||||||
|
default:'#F5F5F5'
|
||||||
|
},
|
||||||
|
imgcurrent:{
|
||||||
|
type:Number,
|
||||||
|
default:0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentNum:0,
|
||||||
|
changeBackgroundColor:'#000000',
|
||||||
|
ntop: uni.getSystemInfoSync().statusBarHeight + 50,
|
||||||
|
ifCenter:true
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.currentNum = this.imgcurrent*1;
|
||||||
|
setTimeout(()=>{
|
||||||
|
this.obtainImgHeight('img--0');
|
||||||
|
},100)
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
obtainImgHeight(classStr) {
|
||||||
|
classStr = `.${classStr}`;
|
||||||
|
const query = wx.createSelectorQuery().in(this)
|
||||||
|
query.select(classStr).boundingClientRect((rect) => {
|
||||||
|
// console.log(rect.height,classStr);
|
||||||
|
console.log(this.nheight,rect.height);
|
||||||
|
if(this.nheight < rect.height) {
|
||||||
|
// 如果屏幕的高度小于当前图片的高度
|
||||||
|
this.ifCenter = false;
|
||||||
|
} else {
|
||||||
|
this.ifCenter = true;
|
||||||
|
}
|
||||||
|
}).exec()
|
||||||
|
},
|
||||||
|
// 改变预览
|
||||||
|
changeSwiper(e) {
|
||||||
|
this.currentNum = e.detail.current;//当前的指示点下标
|
||||||
|
this.obtainImgHeight(`img--${this.currentNum}`);
|
||||||
|
let colorArr = [];
|
||||||
|
for (var i = 0; i < 6; i++) {
|
||||||
|
colorArr.push(Math.floor(Math.random()*10))
|
||||||
|
}
|
||||||
|
this.changeBackgroundColor = `#${colorArr.join('')}`;
|
||||||
|
},
|
||||||
|
// 关闭预览
|
||||||
|
closeCustomEv() {
|
||||||
|
this.$emit('closeCustomEv',false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.swiper-preview{
|
||||||
|
position: fixed;top: 0;left: 0;right: 0;bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 1);
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
.swiper-img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.swiper-text-box{
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 100;
|
||||||
|
color: #000000;
|
||||||
|
background-color: rgba(0, 0, 0, .6);
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
.swiper-close-btn{
|
||||||
|
position: fixed;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
bottom: 60rpx;
|
||||||
|
padding: 20rpx 80rpx;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
color: #000000;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
z-index: 100;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
animation: closeBtn 2s ease-in-out alternate infinite;
|
||||||
|
}
|
||||||
|
@keyframes closeBtn {
|
||||||
|
from{background-color: #FFFFFF;color: #000000;}
|
||||||
|
to{background-color: #000000;color: #FFFFFF;}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
第一步：引入组件
|
||||||
|
|
||||||
|
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||||||
|
|
||||||
|
第二步：注册组件
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
footTab
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
第三步：使用组件
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<foot-tab
|
||||||
|
current="0"
|
||||||
|
isIcon="2"
|
||||||
|
backgroundImage=""
|
||||||
|
></foot-tab>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
参数说明
|
||||||
|
|
||||||
|
current：当前选中项，默认0表示第一项
|
||||||
|
isIcon：哪个图标突出，默认2表示从索引0开始数，第二个图标突出
|
||||||
|
backgroundImage：底部导航背景图片，默认空值
|
||||||
|
backgroundColor：背景颜色，默认#FFFFFF
|
||||||
|
isGradualChange：是否开启背景颜色渐变，默认开启
|
||||||
|
direction：渐变方向，默认right top
|
||||||
|
colorOne：第一种颜色，默认#FFFFFF
|
||||||
|
colorTwo：第二种颜色，默认#FFFFFF
|
||||||
|
colorThree：第三种颜色，默认#FFFFFF
|
||||||
|
colorFour：第四种颜色，默认#FFFFFF
|
||||||
|
boxShadowNum：阴影大小0~1之间 0表示没有阴影，默认0.1
|
||||||
|
|
@ -0,0 +1,78 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<block v-for="(item,index) in list" :key="index">
|
||||||
|
<view @tap="chooseEv(item.url,index)" class="disjbac fon28" :class="[ifLastLine ? 'bbot' : 'borbot',ifIcon ? 'pad-sx10' : 'pad-sx25']" :style="{borderBottomColor: linec}">
|
||||||
|
<view class="disac flexs pad-y40">
|
||||||
|
<image class="mar-y20 flexs" v-if="!item.iconsrc && ifIcon" :src="item.iconsrc" mode="aspectFill" lazy-load :style="{width:item.iconWidth+'rpx',height:item.iconHeight+'rpx'}"></image>
|
||||||
|
<view :style="{color:titlec}" class="clips1">{{item.title}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="disac">
|
||||||
|
<view v-if="item.content" class="clips1" :style="{color:item.contentColor}">{{item.content}}</view>
|
||||||
|
<i v-if="item.ifNext" class="icon icon-next" style="color: #999999;font-size: 28rpx;margin-left: 10rpx;"></i>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:'column-function',
|
||||||
|
props:{
|
||||||
|
list:{
|
||||||
|
type:Array,
|
||||||
|
default:()=>{
|
||||||
|
return [
|
||||||
|
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题一',content:'',contentColor:'#999999',ifNext:true},
|
||||||
|
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题二',content:'',contentColor:'#999999',ifNext:true},
|
||||||
|
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题三',content:'',contentColor:'#999999',ifNext:true},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 标题颜色
|
||||||
|
titlec:{
|
||||||
|
type:String,
|
||||||
|
default:'#000000'
|
||||||
|
},
|
||||||
|
// 是否显示左侧图标
|
||||||
|
ifIcon:{
|
||||||
|
type:Boolean,
|
||||||
|
default:false
|
||||||
|
},
|
||||||
|
// 是否显示下划线
|
||||||
|
ifLine:{
|
||||||
|
type:Boolean,
|
||||||
|
default:true
|
||||||
|
},
|
||||||
|
// 下划线颜色
|
||||||
|
linec:{
|
||||||
|
type:String,
|
||||||
|
default:"#EEEEEE"
|
||||||
|
},
|
||||||
|
// 是否显示最后一条下划线
|
||||||
|
ifLastLine:{
|
||||||
|
type:Boolean,
|
||||||
|
default:true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 列表选择事件
|
||||||
|
chooseEv(url,index) {
|
||||||
|
if(url) {
|
||||||
|
uni.navigateTo({url})
|
||||||
|
}
|
||||||
|
// 抛出事件
|
||||||
|
this.$emit('chooseEv',{url,index})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
第一步：引入组件
|
||||||
|
|
||||||
|
import columnFunction from '@/components/function-list/column/column-function.vue';
|
||||||
|
|
||||||
|
第二步：注册组件
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
columnFunction
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
第三步：使用组件
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<column-function @chooseEv="chooseEv"></column-function>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
参数说明
|
||||||
|
|
||||||
|
list：列表数据，默认以下数组：
|
||||||
|
[
|
||||||
|
{iconsrc:'',iconWidth:60,iconHeight:60,title:'标题一',content:'',contentColor:'#999999',ifNext:true},
|
||||||
|
{iconsrc:'',iconWidth:60,iconHeight:60,title:'标题二',content:'',contentColor:'#999999',ifNext:true},
|
||||||
|
{iconsrc:'',iconWidth:60,iconHeight:60,title:'标题三',content:'',contentColor:'#999999',ifNext:true},
|
||||||
|
]
|
||||||
|
titlec：标题颜色，默认#000000
|
||||||
|
ifIcon：是否显示左侧图标，默认false
|
||||||
|
ifLine：是否显示下划线，默认true
|
||||||
|
linec：下划线颜色，默认#EEEEEE
|
||||||
|
ifLastLine：是否显示最后一条下划线，默认true
|
||||||
|
|
||||||
|
方法使用
|
||||||
|
|
||||||
|
export default {
|
||||||
|
methods:{
|
||||||
|
chooseEv(obj) {
|
||||||
|
console.log(obj);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,86 @@
|
||||||
|
<template>
|
||||||
|
<view class="disac fw bacf" :style="{paddingBottom:itemTop}">
|
||||||
|
<block v-for="(item,index) in list" :key="index">
|
||||||
|
<view @tap="chooseGe(item.url,index)" class="disjcac fc pad-s30" :style="{width:['50%','50%','50%','33.3%','25%','20%'][rowNum],paddingTop:itemTop}">
|
||||||
|
<view class="disjcac" :style="{height: maxHeight+'rpx'}">
|
||||||
|
<image :src="item.iconsrc" mode="widthFix" :style="{width: item.iconWidth +'rpx',height: item.iconHeight +'rpx'}"></image>
|
||||||
|
</view>
|
||||||
|
<view class="clips1" :style="{color:titlec,fontSize:fonts,marginTop:titleTop}">{{item.title}}</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:'column-function',
|
||||||
|
props:{
|
||||||
|
list:{
|
||||||
|
type:Array,
|
||||||
|
default:()=>{
|
||||||
|
return [
|
||||||
|
{url:'',iconsrc:'/static/tabbar/icon-select-person.png',iconWidth:60,iconHeight:60,title:'标题一'},
|
||||||
|
{url:'',iconsrc:'/static/tabbar/icon-select-fun.png',iconWidth:60,iconHeight:60,title:'标题二'},
|
||||||
|
{url:'',iconsrc:'/static/tabbar/icon-select-home.png',iconWidth:60,iconHeight:60,title:'标题三'},
|
||||||
|
{url:'',iconsrc:'/static/tabbar/icon-select-news.png',iconWidth:60,iconHeight:60,title:'标题四'},
|
||||||
|
{url:'',iconsrc:'/static/tabbar/icon-scan.png',iconWidth:60,iconHeight:60,title:'标题五'},
|
||||||
|
{url:'',iconsrc:'/static/tabbar/icon-select-home.png',iconWidth:60,iconHeight:60,title:'标题五'},
|
||||||
|
{url:'',iconsrc:'/static/tabbar/icon-select-person.png',iconWidth:60,iconHeight:60,title:'标题五'},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 一排显示数量
|
||||||
|
rowNum:{
|
||||||
|
type:String,
|
||||||
|
default:'5'
|
||||||
|
},
|
||||||
|
// 标题颜色
|
||||||
|
titlec:{
|
||||||
|
type:String,
|
||||||
|
default:'#000000'
|
||||||
|
},
|
||||||
|
// 字体大小
|
||||||
|
fonts:{
|
||||||
|
type:String,
|
||||||
|
default:'28rpx'
|
||||||
|
},
|
||||||
|
// 字体距离图标的距离
|
||||||
|
titleTop:{
|
||||||
|
type:String,
|
||||||
|
default:'20rpx'
|
||||||
|
},
|
||||||
|
// item的顶部距离
|
||||||
|
itemTop:{
|
||||||
|
type:String,
|
||||||
|
default:'30rpx'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
// 找图标高度最大值
|
||||||
|
maxHeight() {
|
||||||
|
let arr = [];
|
||||||
|
this.list.forEach(item=>{arr.push(item.iconHeight);})
|
||||||
|
let max = arr.reduce((a,b)=>{return b > a ? b : a})
|
||||||
|
return max;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 列表选择事件
|
||||||
|
chooseGe(url,index) {
|
||||||
|
// 抛出事件
|
||||||
|
this.$emit('chooseGe',{url,index})
|
||||||
|
if(url) {
|
||||||
|
uni.navigateTo({url})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
第一步：引入组件
|
||||||
|
|
||||||
|
import gongGeFunction from '@/components/function-list/gong-ge/gong-ge-function.vue';
|
||||||
|
|
||||||
|
第二步：注册组件
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
gongGeFunction
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
第三步：使用组件
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<gong-ge-function @chooseGe="chooseGe"></gong-ge-function>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
参数说明
|
||||||
|
|
||||||
|
list：列表数据，默认以下数组：
|
||||||
|
[
|
||||||
|
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题一'},
|
||||||
|
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题二'},
|
||||||
|
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题三'},
|
||||||
|
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题四'},
|
||||||
|
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题五'},
|
||||||
|
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题五'},
|
||||||
|
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题五'},
|
||||||
|
]
|
||||||
|
rowNum：一排显示数量，默认5
|
||||||
|
titlec：标题颜色，默认#000000
|
||||||
|
fonts：字体大小，默认28rpx
|
||||||
|
titleTop：字体距离图标的距离，默认20rpx
|
||||||
|
itemTop：item的顶部距离，默认30rpx
|
||||||
|
|
||||||
|
方法使用
|
||||||
|
|
||||||
|
export default {
|
||||||
|
methods:{
|
||||||
|
chooseGe(obj) {
|
||||||
|
console.log(obj);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
第一步：引入组件
|
||||||
|
|
||||||
|
import swiperGongGe from '@/components/function-list/swiper-gong-ge/swiper-gong-ge.vue';
|
||||||
|
|
||||||
|
第二步：注册组件
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
swiperGongGe
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
第三步：使用组件
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<swiper-gong-ge @chooseGe="chooseGe"></swiper-gong-ge>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
参数说明
|
||||||
|
|
||||||
|
list：列表数据，默认以下数组：
|
||||||
|
[
|
||||||
|
[
|
||||||
|
{url:'',iconsrc:'/static/tabbar/icon-select-person.png',iconWidth:60,iconHeight:60,title:'标题一'},
|
||||||
|
{url:'',iconsrc:'/static/tabbar/icon-select-fun.png',iconWidth:60,iconHeight:60,title:'标题二'},
|
||||||
|
{url:'',iconsrc:'/static/tabbar/icon-select-home.png',iconWidth:60,iconHeight:60,title:'标题三'},
|
||||||
|
{url:'',iconsrc:'/static/tabbar/icon-select-news.png',iconWidth:60,iconHeight:60,title:'标题四'},
|
||||||
|
{url:'',iconsrc:'/static/tabbar/icon-select-news.png',iconWidth:60,iconHeight:60,title:'标题四'},
|
||||||
|
{url:'',iconsrc:'/static/tabbar/icon-select-news.png',iconWidth:60,iconHeight:60,title:'标题四'},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{url:'',iconsrc:'/static/tabbar/icon-select-person.png',iconWidth:60,iconHeight:60,title:'标题一'},
|
||||||
|
{url:'',iconsrc:'/static/tabbar/icon-select-fun.png',iconWidth:60,iconHeight:60,title:'标题二'},
|
||||||
|
{url:'',iconsrc:'/static/tabbar/icon-select-home.png',iconWidth:60,iconHeight:60,title:'标题三'},
|
||||||
|
{url:'',iconsrc:'/static/tabbar/icon-scan.png',iconWidth:60,iconHeight:60,title:'标题五'},
|
||||||
|
]
|
||||||
|
]
|
||||||
|
ifAutoplay：是否自动轮播，默认false
|
||||||
|
rowNum：一排显示数量，默认5
|
||||||
|
titlec：标题颜色，默认#000000
|
||||||
|
fonts：字体大小，默认28rpx
|
||||||
|
titleTop：字体距离图标的距离，默认20rpx
|
||||||
|
itemTop：item的顶部距离，默认30rpx
|
||||||
|
activeStop：选中时指示点的颜色，默认rgba(0,0,0,1)
|
||||||
|
moStop：未选中时指示点的颜色，默认rgba(0,0,0,.2)
|
||||||
|
|
||||||
|
方法使用
|
||||||
|
|
||||||
|
export default {
|
||||||
|
methods:{
|
||||||
|
chooseGe(obj) {
|
||||||
|
console.log(obj);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,173 @@
|
||||||
|
<template>
|
||||||
|
<view class="posir">
|
||||||
|
<swiper class="bacf width100"
|
||||||
|
:current="currentIndex"
|
||||||
|
:indicator-dots="ifAutoplay"
|
||||||
|
:autoplay="false"
|
||||||
|
:duration="500"
|
||||||
|
:style="{paddingBottom:itemTop,height: swiperHeight+'px'}"
|
||||||
|
@change="changeEv">
|
||||||
|
<swiper-item v-for="(items,indexs) in list" :key="indexs">
|
||||||
|
<view class="disac fw">
|
||||||
|
<block v-for="(item,index) in items" :key="index">
|
||||||
|
<view @tap="chooseGe(item.url,index)" class="disjcac fc swiper-item-box" :style="{width:['50%','50%','50%','33.3%','25%','20%'][rowNum],paddingTop:itemTop}">
|
||||||
|
<view class="disjcac" :style="{height: maxHeight+'rpx'}">
|
||||||
|
<!-- 图片 -->
|
||||||
|
<image :src="item.iconsrc" mode="widthFix" :style="{width: item.iconWidth +'rpx',height: item.iconHeight +'rpx'}"></image>
|
||||||
|
</view>
|
||||||
|
<!-- 标题 -->
|
||||||
|
<view class="clips1" :style="{color:titlec,fontSize:fonts,marginTop:titleTop}">{{item.title}}</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
<!-- 指示点 -->
|
||||||
|
<view class="posia disjcac width100" style="bottom: 20rpx;">
|
||||||
|
<view class="mar-y10 gong-ge-spot"
|
||||||
|
:class="currentIndex==index ? 'active-spot' : ''"
|
||||||
|
v-for="(item,index) in list.length" :key="index"
|
||||||
|
:style="{backgroundColor:currentIndex==index ? activeStop : moStop}"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import imgTools from '@/jsFile/img/yy-img.js';
|
||||||
|
export default {
|
||||||
|
name:'column-function',
|
||||||
|
props:{
|
||||||
|
list:{
|
||||||
|
type:Array,
|
||||||
|
default:()=>{
|
||||||
|
return [
|
||||||
|
[
|
||||||
|
{url:'',iconsrc:'/static/tabbar/icon-select-person.png',iconWidth:60,iconHeight:60,title:'标题一'},
|
||||||
|
{url:'',iconsrc:'/static/tabbar/icon-select-fun.png',iconWidth:60,iconHeight:60,title:'标题二'},
|
||||||
|
{url:'',iconsrc:'/static/tabbar/icon-select-home.png',iconWidth:60,iconHeight:60,title:'标题三'},
|
||||||
|
{url:'',iconsrc:'/static/tabbar/icon-select-news.png',iconWidth:60,iconHeight:60,title:'标题四'},
|
||||||
|
{url:'',iconsrc:'/static/tabbar/icon-select-news.png',iconWidth:60,iconHeight:60,title:'标题四'},
|
||||||
|
{url:'',iconsrc:'/static/tabbar/icon-select-news.png',iconWidth:60,iconHeight:60,title:'标题四'},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{url:'',iconsrc:'/static/tabbar/icon-select-person.png',iconWidth:60,iconHeight:60,title:'标题一'},
|
||||||
|
{url:'',iconsrc:'/static/tabbar/icon-select-fun.png',iconWidth:60,iconHeight:60,title:'标题二'},
|
||||||
|
{url:'',iconsrc:'/static/tabbar/icon-select-home.png',iconWidth:60,iconHeight:60,title:'标题三'},
|
||||||
|
{url:'',iconsrc:'/static/tabbar/icon-scan.png',iconWidth:60,iconHeight:60,title:'标题五'},
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 是否自动轮播
|
||||||
|
ifAutoplay:{
|
||||||
|
type:Boolean,
|
||||||
|
default:false
|
||||||
|
},
|
||||||
|
// 一排显示数量
|
||||||
|
rowNum:{
|
||||||
|
type:String,
|
||||||
|
default:'5'
|
||||||
|
},
|
||||||
|
// 标题颜色
|
||||||
|
titlec:{
|
||||||
|
type:String,
|
||||||
|
default:'#000000'
|
||||||
|
},
|
||||||
|
// 字体大小
|
||||||
|
fonts:{
|
||||||
|
type:String,
|
||||||
|
default:'28rpx'
|
||||||
|
},
|
||||||
|
// 字体距离图标的距离
|
||||||
|
titleTop:{
|
||||||
|
type:String,
|
||||||
|
default:'20rpx'
|
||||||
|
},
|
||||||
|
// item的顶部距离
|
||||||
|
itemTop:{
|
||||||
|
type:String,
|
||||||
|
default:'50rpx'
|
||||||
|
},
|
||||||
|
// 选中时指示点的颜色
|
||||||
|
activeStop:{
|
||||||
|
type:String,
|
||||||
|
default:'rgba(0,0,0,1)'
|
||||||
|
},
|
||||||
|
// 未选中时指示点的颜色
|
||||||
|
moStop: {
|
||||||
|
type:String,
|
||||||
|
default:'rgba(0,0,0,.2)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
currentIndex:0,
|
||||||
|
swiperHeight:0,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.changeHeight();
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
// 找图标高度最大值
|
||||||
|
maxHeight() {
|
||||||
|
let arr = [];
|
||||||
|
this.list.forEach(item=>{arr.push(item.iconHeight);})
|
||||||
|
let max = arr.reduce((a,b)=>{return b > a ? b : a})
|
||||||
|
return max;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 改变swiper的高度
|
||||||
|
changeHeight() {
|
||||||
|
const query = uni.createSelectorQuery().in(this)
|
||||||
|
query.select('.swiper-item-box').boundingClientRect((rect) => {
|
||||||
|
// 查询单个格子的高度，并设置swiper的高
|
||||||
|
if(this.list[this.currentIndex].length <= this.rowNum) {
|
||||||
|
// 如果每轮的数组长度，小于等于一排显示的个数，那么设置一个格子的高度
|
||||||
|
this.swiperHeight = rect.height*1 + 10;
|
||||||
|
} else {
|
||||||
|
// 如果每轮的数组长度，大于一排显示的个数，那么设置两个个格子的高度
|
||||||
|
this.swiperHeight = rect.height*2 + 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
}).exec()
|
||||||
|
},
|
||||||
|
// 列表选择事件
|
||||||
|
chooseGe(url,index) {
|
||||||
|
// console.log(imgTools.uploadImg(),137);
|
||||||
|
// imgTools.chooseCompressImg();
|
||||||
|
imgTools.chooseCompressImg().then(res=>{
|
||||||
|
console.log(imgTools.getImgInfo(res));
|
||||||
|
})
|
||||||
|
// 抛出事件
|
||||||
|
// this.$emit('chooseGe',{url,index})
|
||||||
|
// if(url) {
|
||||||
|
// uni.navigateTo({url})
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
changeEv(e) {
|
||||||
|
this.currentIndex = e.detail.current;
|
||||||
|
this.changeHeight();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.gong-ge-spot{
|
||||||
|
width: 20rpx;height: 20rpx;
|
||||||
|
border-radius: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, .2);
|
||||||
|
}
|
||||||
|
.active-spot{
|
||||||
|
background-color: rgba(0, 0, 0, .5);
|
||||||
|
animation: gongspot 3s linear alternate infinite;
|
||||||
|
}
|
||||||
|
@keyframes gongspot{
|
||||||
|
0%{background-color: rgba(0, 0, 0, 1);}
|
||||||
|
25%{background-color: rgba(255, 0, 0, 1);}
|
||||||
|
50%{background-color: rgba(0, 255, 0, 1);}
|
||||||
|
75%{background-color: rgba(0, 0, 255, 1);}
|
||||||
|
100%{background-color: rgba(0, 0, 0, 1);}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!-- 暂无更多组件参数的使用
|
||||||
|
|
||||||
|
组件一
|
||||||
|
<nothing-page
|
||||||
|
:imgSrc="图片路径可相对、可绝对、可网络"
|
||||||
|
:currentType="0,1,2,..."
|
||||||
|
:content="'-- NO MORE --'"></nothing-page>
|
||||||
|
|
||||||
|
组件二
|
||||||
|
<pitera
|
||||||
|
:textColor="'#999999'"
|
||||||
|
:textStr="'-- NO MORE --'"
|
||||||
|
:textFontSize="'24rpx'"
|
||||||
|
:ifBold="false"
|
||||||
|
:ifCenter="true"
|
||||||
|
:paddingStr="'20rpx'"></pitera>
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
第一步：引入组件
|
||||||
|
|
||||||
|
import scrollTextSlide from '@/components/scroll-views/scroll-text-slide.vue';
|
||||||
|
|
||||||
|
第二步：注册组件
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
scrollTextSlide
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
第三步：使用组件
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<scroll-text-slide></scroll-text-slide>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
参数说明
|
||||||
|
|
||||||
|
list：数据列表，默认['全部', '测试', '测试宽度', '测试宽度三号', '测试宽度四号小星星', '测试宽度五号']
|
||||||
|
activeIndex：选中索引，默认0
|
||||||
|
config：未选中、选中、下划线的样式，默认为以下对象：
|
||||||
|
{
|
||||||
|
color: '#999999',//默认时字体颜色
|
||||||
|
activeColor: '#000000',//选中时字体颜色
|
||||||
|
underLineColor: '#000000',//下滑线颜色
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,267 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="disac shopping-cart-item animated " :class="item.ifExit ? 'fadeInUp' : 'fadeOutDown'" :style="{display: item.ifShow ? 'flex' : 'none'}" v-for="(item,index) in dataList" :key="index">
|
||||||
|
<!-- 选择 -->
|
||||||
|
<view class="flexs mo-item" :class="item.ifcheck ? 'active-item' : ''" @tap="chooseEv(index)"></view>
|
||||||
|
<!-- 商品图片 -->
|
||||||
|
<view class="shopp-img imgH mar-zy20 flexs" @tap="chooseEv(index)">
|
||||||
|
<image class="shopp-img imgH width100 " :src="item.imgsrc" mode="aspectFill" lazy-load></image>
|
||||||
|
</view>
|
||||||
|
<view class="disjb fc imgH width100">
|
||||||
|
<view @tap="goDetail(item.id)">
|
||||||
|
<!-- 商品标题 -->
|
||||||
|
<view class="fon28 bold clips1">{{item.title}}{{dataList.length}}</view>
|
||||||
|
<!-- 商品描述 -->
|
||||||
|
<view class="fon24 clips2 line-h40">{{item.content}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="disjbac">
|
||||||
|
<!-- 商品价格 -->
|
||||||
|
<view class="fon24">￥：<span class="fon28 colf8 bold">{{$toolAll.tools.addXiaoShu(item.price)}}</span></view>
|
||||||
|
<!-- 商品数量 -->
|
||||||
|
<view class="disac">
|
||||||
|
<!-- 减数量 -->
|
||||||
|
<i class="icon icon-cut countBtn disjcac" @tap="addCutEv(index,0)" :style="{backgroundColor: item.num==minNum || !ifManage ? '#cccccc' : '#000000'}"></i>
|
||||||
|
<!-- 实际数量 -->
|
||||||
|
<input type="digit" @blur="blurEv(index,$event)" @focus="focusEv(item.num)" class="fon24 tcenter countInput" :disabled="!ifManage" v-model="item.num">
|
||||||
|
<!-- 加数量 -->
|
||||||
|
<i class="icon icon-add countBtn disjcac" @tap="addCutEv(index,1)" :style="{backgroundColor: item.num==maxNum || !ifManage ? '#cccccc' : '#000000'}"></i>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 管理 -->
|
||||||
|
<view v-if="dataList.length" class="shopping-manage" :style="{backgroundColor: ifManage ? 'rgba(0,0,0,.6)' : 'rgba(255,0,0,1)'}" @tap="manageEv">{{ifManage ? '管理' : '取消'}}</view>
|
||||||
|
<!-- 底部导航 -->
|
||||||
|
<view class="disjbac cart-foot-box fon24">
|
||||||
|
<view class="" v-if="ifManage">合计：<span class="fon38 colf8 bold">{{allPrice}}</span></view>
|
||||||
|
<view class="disac" v-else @tap="chooseAllEv">
|
||||||
|
<view class="flexs mo-item mar-y10" :class="ifSelectAll ? 'active-item' : ''" @tap="chooseEv(index)"></view>
|
||||||
|
<span>全选</span>
|
||||||
|
</view>
|
||||||
|
<view class="fon38 cart-submit-btn"
|
||||||
|
:style="{backgroundColor: !ifManage && !delNum ? '#cccccc' : '#FF0000'}" @tap="submitEv">{{ifManage ? `${allPrice=='0.00' ? '去购物' : '去结算'}` : `删除 (${delNum})`}}</view>
|
||||||
|
</view>
|
||||||
|
<nothing-page v-if="!ifLoading && !dataList.length" content="你的购物车：这也空空，那也空空(*^▽^*)"></nothing-page>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"cart-one",
|
||||||
|
props:{
|
||||||
|
list:{
|
||||||
|
type:Array,
|
||||||
|
default:()=>{
|
||||||
|
return [
|
||||||
|
{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
|
||||||
|
{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
|
||||||
|
{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
|
||||||
|
{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
|
||||||
|
{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
|
||||||
|
{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
|
||||||
|
{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
|
||||||
|
{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
|
||||||
|
{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
|
||||||
|
{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
|
||||||
|
{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dataList:[],
|
||||||
|
ifManage:true,//是否显示管理按钮
|
||||||
|
ifSelectAll:false,//是否全选
|
||||||
|
originalNum:0,//当前输入框原值
|
||||||
|
maxNum:20,//最大可输入数量
|
||||||
|
minNum:1,//最小可输入数量
|
||||||
|
ifLoading:true
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
// 总价及合计
|
||||||
|
allPrice() {
|
||||||
|
let allPrice = 0;
|
||||||
|
this.dataList.forEach(item=>{
|
||||||
|
if(item.ifcheck) {
|
||||||
|
allPrice += this.$toolAll.tools.operationEv(item.price,item.num,'*',2)*1;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return this.$toolAll.tools.addXiaoShu(allPrice);
|
||||||
|
},
|
||||||
|
// 要删除的数量
|
||||||
|
delNum() {
|
||||||
|
let delNum = 0;
|
||||||
|
this.dataList.forEach(item=>{
|
||||||
|
if(item.ifcheck) {
|
||||||
|
delNum += 1;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return delNum;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// this.dataList = this.list;
|
||||||
|
this.list.forEach((item,index)=>{
|
||||||
|
let obj = {
|
||||||
|
id:index,
|
||||||
|
imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||||
|
title:'商品标题'+index,
|
||||||
|
content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',
|
||||||
|
price:199,
|
||||||
|
num:index+++1,
|
||||||
|
ifcheck:false,//是否被选中
|
||||||
|
ifExit:true,//是否存在
|
||||||
|
ifShow:true//是否隐藏
|
||||||
|
}
|
||||||
|
this.dataList.push(obj);
|
||||||
|
// this.dataList = [];
|
||||||
|
this.ifLoading = false;
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 去购物、去结算、删除
|
||||||
|
submitEv(){
|
||||||
|
if(this.ifManage) {
|
||||||
|
if(this.allPrice=='0.00') {
|
||||||
|
// 去购物
|
||||||
|
console.log('去购物');
|
||||||
|
} else {
|
||||||
|
// 去结算
|
||||||
|
console.log('去结算');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 进入删除
|
||||||
|
this.dataList.forEach((item,index)=>{
|
||||||
|
// 判断商品是否被选中
|
||||||
|
if(item.ifcheck) {
|
||||||
|
// 该商品被选中
|
||||||
|
// 修改为不存在的商品
|
||||||
|
this.dataList[index].ifExit = false;
|
||||||
|
// 修改该商品不被选中
|
||||||
|
this.dataList[index].ifcheck = false;
|
||||||
|
setTimeout(()=>{
|
||||||
|
// 隐藏该商品
|
||||||
|
this.dataList[index].ifShow = false;
|
||||||
|
},1000)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
setTimeout(()=>{
|
||||||
|
// 重构数组列表，去除不存在的商品
|
||||||
|
this.dataList = this.dataList.filter(item=>item.ifExit==true);
|
||||||
|
if(!this.dataList.length) {
|
||||||
|
// 如果购物车为空按钮变为去购物，全选变为合计：0.00
|
||||||
|
this.ifManage = true;
|
||||||
|
}
|
||||||
|
},1000)
|
||||||
|
this.judgeSelectAllEv();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 全选事件
|
||||||
|
chooseAllEv(){
|
||||||
|
this.ifSelectAll = !this.ifSelectAll;
|
||||||
|
this.dataList.forEach(item=>item.ifcheck = this.ifSelectAll ? true : false);
|
||||||
|
},
|
||||||
|
// 选中事件
|
||||||
|
chooseEv(index) {
|
||||||
|
this.dataList[index].ifcheck = !this.dataList[index].ifcheck;
|
||||||
|
this.judgeSelectAllEv();
|
||||||
|
},
|
||||||
|
// 判断全选中是否被选中
|
||||||
|
judgeSelectAllEv() {
|
||||||
|
let exit = this.dataList.findIndex(item=>item.ifcheck==false);
|
||||||
|
if(exit!=-1) {
|
||||||
|
this.ifSelectAll = false
|
||||||
|
} else {
|
||||||
|
this.ifSelectAll = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 去商品详情事件
|
||||||
|
goDetail(id){
|
||||||
|
uni.navigateTo({
|
||||||
|
url:''
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 数量加减事件
|
||||||
|
addCutEv(index,num) {
|
||||||
|
// 不在管理状态下：可进行加减
|
||||||
|
if(this.ifManage) {
|
||||||
|
if(num) {
|
||||||
|
// 加 ，如果当前商品数量不等于最大值
|
||||||
|
if(this.dataList[index].num != this.maxNum) {
|
||||||
|
this.dataList[index].num++;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 减 ，如果当前商品数量大于最小值
|
||||||
|
if(this.dataList[index].num > this.minNum) {
|
||||||
|
this.dataList[index].num--;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log(this.allPrice,'总价');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 管理点击事件
|
||||||
|
manageEv(){
|
||||||
|
// 重置所有商品不被选中
|
||||||
|
this.dataList.forEach(item=>item.ifcheck=false);
|
||||||
|
// 管理状态的切换 管理/取消
|
||||||
|
this.ifManage = !this.ifManage;
|
||||||
|
// 设置底部全选框不被选中
|
||||||
|
this.ifSelectAll = false;
|
||||||
|
},
|
||||||
|
// 输入框获取焦点事件
|
||||||
|
focusEv(num) {
|
||||||
|
// 储存当前商品的原始数值
|
||||||
|
this.originalNum = num;
|
||||||
|
},
|
||||||
|
// 输入框失去焦点事件
|
||||||
|
blurEv(index,e) {
|
||||||
|
// 失去焦点时，获取当前输入框里的数值
|
||||||
|
let currentNum = e.detail.value*1;
|
||||||
|
// 如果当前输入框的值不等于0或空，并且当前输入框的值大于最大值，当前商品的数量 = 最大值， 否则为当前输入框输入的值
|
||||||
|
this.dataList[index].num = currentNum ? currentNum > this.maxNum ? this.maxNum : currentNum : this.originalNum;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.mo-item{
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
border-radius: 100%;
|
||||||
|
border: 2rpx solid #000000;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.active-item{
|
||||||
|
border: 2rpx solid #FF0000;
|
||||||
|
}
|
||||||
|
.active-item::before{
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%,-50%);
|
||||||
|
width: 20rpx;
|
||||||
|
height: 20rpx;
|
||||||
|
border-radius: 100%;
|
||||||
|
background-color: #FF0000;
|
||||||
|
}
|
||||||
|
.imgH{height: 180rpx;}
|
||||||
|
.shopping-cart-item{background-color: #FFFFFF;border-radius: 10rpx;margin-bottom: 20rpx;padding: 20rpx;}
|
||||||
|
.shopp-img{width: 180rpx;border-radius: 10rpx;}
|
||||||
|
.countBtn{font-size: 36rpx;width: 40rpx;height: 40rpx;background-color: #000000;color: #FFFFFF; border-radius: 10rpx;}
|
||||||
|
.countInput{background-color: #F5F5F5;width: 80rpx;border-radius: 10rpx;padding: 10rpx 0;margin: 0 10rpx;}
|
||||||
|
|
||||||
|
.cart-foot-box{position: fixed;bottom: 0;right: 0;left: 0;background-color: #FFFFFF; padding: 20rpx 40rpx;box-shadow: -6rpx 0rpx 10rpx rgba(0, 0, 0, .3);}
|
||||||
|
.cart-submit-btn{color: #FFFFFF;background-color: #cccccc;padding: 10rpx 40rpx;border-radius: 40rpx;}
|
||||||
|
|
||||||
|
.shopping-manage{position: fixed;right: 20rpx;bottom: 320rpx;width: 80rpx;height: 80rpx; border-radius: 100%;background-color: rgba(0, 0, 0, .6);color: #FFFFFF;font-size: 24rpx;display: flex;justify-content: center;align-items: center;}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,362 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="slide-box mar-x20 animated" v-for="(item, index) in listData" :key="index" :class="item.ifExit ? 'fadeInUp' : 'fadeOutDown'" :style="{display: item.ifShow ? 'flex' : 'none'}">
|
||||||
|
<view class="slide-list"
|
||||||
|
@touchstart="touchStart($event, index)"
|
||||||
|
@touchend="touchEnd($event, index)"
|
||||||
|
@touchmove="touchMove($event, index)"
|
||||||
|
@tap="recover(index)"
|
||||||
|
:style="{ transform: 'translate3d(' + item.slide_x + 'px, 0, 0)' }">
|
||||||
|
<view class="now-message-info" :style="{ width: windowWidth + 'px' }" @click="clickItemMethod(item)">
|
||||||
|
<view class="mo-item flexs" @tap.stop="chooseEv(index)" :class="item.ifcheck ? 'active-item' : ''"></view>
|
||||||
|
<view class="shopp-img imgH mar-zy20" @tap.stop="chooseEv(index)">
|
||||||
|
<image class="shopp-img imgH width100" :src="item.image" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="imgH disjb fc fon24 width100">
|
||||||
|
<view class="">
|
||||||
|
<view class="fon28 bold clips2">{{item.title}}</view>
|
||||||
|
<view class="clips2 line-h40">{{item.content}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="disjbac">
|
||||||
|
<!-- 商品价格 -->
|
||||||
|
<view class="fon24">￥：<span class="fon28 colf8 bold">{{$toolAll.tools.addXiaoShu(item.price)}}</span></view>
|
||||||
|
<!-- 商品数量 -->
|
||||||
|
<view class="disac">
|
||||||
|
<!-- 减数量 -->
|
||||||
|
<i class="icon icon-cut countBtn disjcac" @tap.stop="addCutEv(index,0)" :style="{backgroundColor: item.num==minNum || item.slide_x!=0 ? '#cccccc' : '#000000'}"></i>
|
||||||
|
<!-- 实际数量 -->
|
||||||
|
<input type="digit" @blur="blurEv(index,$event)" @focus="focusEv(item.num)" class="fon24 tcenter countInput" :disabled="item.slide_x!=0" v-model="item.num">
|
||||||
|
<!-- 加数量 -->
|
||||||
|
<i class="icon icon-add countBtn disjcac" @tap.stop="addCutEv(index,1)" :style="{backgroundColor: item.num==maxNum || item.slide_x!=0 ? '#cccccc' : '#000000'}"></i>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="group-btn">
|
||||||
|
<view class="btn-div" v-for="(value, key) in button" :key="key"
|
||||||
|
@tap.stop="clickMethod(item, value, index,key)" :style="{background: value.background}">
|
||||||
|
{{value.title}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 底部导航 -->
|
||||||
|
<view class="disjbac cart-foot-box fon24">
|
||||||
|
<view>合计：<span class="fon38 colf8 bold">{{allPrice}}</span></view>
|
||||||
|
<view class="fon38 cart-submit-btn" :style="{backgroundColor: !delNum ? '#cccccc' : '#FF0000'}" @tap="submitEv">{{allPrice=='0.00' ? '去购物' : '去结算'}}</view>
|
||||||
|
</view>
|
||||||
|
<nothing-page v-if="!ifLoading && !listData.length" content="你的购物车：这也空空，那也空空(*^▽^*)"></nothing-page>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'mark-slide-list',
|
||||||
|
props: {
|
||||||
|
list: { //数据list
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return [
|
||||||
|
{id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
|
||||||
|
{id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
|
||||||
|
{id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
|
||||||
|
{id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
|
||||||
|
{id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
|
||||||
|
{id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
button: { //按钮数据list
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return [
|
||||||
|
{title: '分享',background: '#c4c7cd'},
|
||||||
|
{title: '删除',background: '#ff3b32'}
|
||||||
|
];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
windowWidth() {
|
||||||
|
return uni.getSystemInfoSync().windowWidth - 20;
|
||||||
|
},
|
||||||
|
// 总价及合计
|
||||||
|
allPrice() {
|
||||||
|
let allPrice = 0;
|
||||||
|
this.listData.forEach(item=>{
|
||||||
|
if(item.ifcheck) {
|
||||||
|
allPrice += this.$toolAll.tools.operationEv(item.price,item.num,'*',2)*1;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return this.$toolAll.tools.addXiaoShu(allPrice);
|
||||||
|
},
|
||||||
|
// 要删除的数量
|
||||||
|
delNum() {
|
||||||
|
let delNum = 0;
|
||||||
|
this.listData.forEach(item=>{
|
||||||
|
if(item.ifcheck) {
|
||||||
|
delNum += 1;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return delNum;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
listData: [],
|
||||||
|
start_slide_x: 0,
|
||||||
|
btnWidth: 0,
|
||||||
|
startX: 0,
|
||||||
|
LastX: 0,
|
||||||
|
startTime: 0,
|
||||||
|
itemIndex: 0,
|
||||||
|
ifSelectAll:false,//是否全选
|
||||||
|
originalNum:0,//当前输入框原值
|
||||||
|
maxNum:20,//最大可输入数量
|
||||||
|
minNum:1,//最小可输入数量
|
||||||
|
ifLoading:true
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.listData = this.list;
|
||||||
|
this.ifLoading = false;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 去购物、去结算、删除
|
||||||
|
submitEv(){
|
||||||
|
if(this.allPrice=='0.00') {
|
||||||
|
// 去购物
|
||||||
|
console.log('去购物');
|
||||||
|
} else {
|
||||||
|
// 去结算
|
||||||
|
console.log('去结算');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 选中事件
|
||||||
|
chooseEv(index) {
|
||||||
|
this.listData[index].ifcheck = !this.listData[index].ifcheck;
|
||||||
|
},
|
||||||
|
// 去商品详情事件
|
||||||
|
goDetail(id){
|
||||||
|
uni.navigateTo({
|
||||||
|
url:''
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 数量加减事件
|
||||||
|
addCutEv(index,num) {
|
||||||
|
if(this.listData[index].slide_x==0){
|
||||||
|
if(num) {
|
||||||
|
// 加 ，如果当前商品数量不等于最大值
|
||||||
|
if(this.listData[index].num != this.maxNum) {
|
||||||
|
this.listData[index].num++;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 减 ，如果当前商品数量大于最小值
|
||||||
|
if(this.listData[index].num > this.minNum) {
|
||||||
|
this.listData[index].num--;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log(this.allPrice,'总价');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 输入框获取焦点事件
|
||||||
|
focusEv(num) {
|
||||||
|
// 储存当前商品的原始数值
|
||||||
|
this.originalNum = num;
|
||||||
|
},
|
||||||
|
// 输入框失去焦点事件
|
||||||
|
blurEv(index,e) {
|
||||||
|
// 失去焦点时，获取当前输入框里的数值
|
||||||
|
let currentNum = e.detail.value*1;
|
||||||
|
// 如果当前输入框的值不等于0或空，并且当前输入框的值大于最大值，当前商品的数量 = 最大值， 否则为当前输入框输入的值
|
||||||
|
this.listData[index].num = currentNum ? currentNum > this.maxNum ? this.maxNum : currentNum : this.originalNum;
|
||||||
|
},
|
||||||
|
clone(data) {
|
||||||
|
const type = typeof data
|
||||||
|
let obj;
|
||||||
|
if (type === 'array') {
|
||||||
|
obj = [];
|
||||||
|
} else if (type === 'object') {
|
||||||
|
obj = {};
|
||||||
|
} else {
|
||||||
|
// 不再具有下一层次
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
if (type === 'array') {
|
||||||
|
for (let i = 0, len = data.length; i < len; i++) {
|
||||||
|
obj.push(this.clone(data[i]));
|
||||||
|
}
|
||||||
|
} else if (type === 'object') {
|
||||||
|
// 对原型上的方法也拷贝了....
|
||||||
|
for (const key in data) {
|
||||||
|
obj[key] = this.clone(data[key]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return obj;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 滑动开始
|
||||||
|
touchStart(e, index) {
|
||||||
|
if (this.itemIndex == index) {
|
||||||
|
this.itemIndex = index
|
||||||
|
}
|
||||||
|
//记录手指放上去的时间
|
||||||
|
this.startTime = e.timeStamp;
|
||||||
|
//记录滑块的初始位置
|
||||||
|
this.start_slide_x = this.listData[index].slide_x;
|
||||||
|
// 按钮宽度
|
||||||
|
//#ifdef MP-WEIXIN
|
||||||
|
uni.createSelectorQuery().in(this).selectAll('.group-btn').boundingClientRect(res => {
|
||||||
|
if (res != null) {
|
||||||
|
this.btnWidth = res[index].width * -1;
|
||||||
|
}
|
||||||
|
}).exec();
|
||||||
|
//#endif
|
||||||
|
//#ifdef H5 || APP-PLUS
|
||||||
|
uni.createSelectorQuery()
|
||||||
|
.selectAll('.group-btn')
|
||||||
|
.boundingClientRect()
|
||||||
|
.exec(res => {
|
||||||
|
if (res[0] != null) {
|
||||||
|
this.btnWidth = res[0][index].width * -1;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
//#endif
|
||||||
|
// 记录上一次开始时手指所处位置
|
||||||
|
this.startX = e.touches[0].pageX;
|
||||||
|
// 记录上一次手指位置
|
||||||
|
this.lastX = this.startX;
|
||||||
|
//初始化非当前滑动消息列的位置
|
||||||
|
for (var i in this.listData) {
|
||||||
|
if (index != i) {
|
||||||
|
this.listData[i].slide_x = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 滑动中
|
||||||
|
touchMove(e, index) {
|
||||||
|
const endX = e.touches[0].pageX;
|
||||||
|
const distance = endX - this.lastX;
|
||||||
|
// 预测滑块所处位置
|
||||||
|
const duang = this.listData[index].slide_x + distance;
|
||||||
|
// 如果在可行区域内
|
||||||
|
if (duang <= 0 && duang >= this.btnWidth) {
|
||||||
|
this.listData[index].slide_x = duang;
|
||||||
|
}
|
||||||
|
// 此处手指所处位置将成为下次手指移动时的上一次位置
|
||||||
|
this.lastX = endX;
|
||||||
|
},
|
||||||
|
// 滑动结束
|
||||||
|
touchEnd(e, index) {
|
||||||
|
let distance = 10;
|
||||||
|
const endTime = e.timeStamp;
|
||||||
|
const x_end_distance = this.startX - this.lastX;
|
||||||
|
if (Math.abs(endTime - this.startTime) > 200) {
|
||||||
|
distance = this.btnWidth / -2;
|
||||||
|
}
|
||||||
|
// 判断手指最终位置与手指开始位置的位置差距
|
||||||
|
if (x_end_distance > distance) {
|
||||||
|
this.listData[index].slide_x = this.btnWidth;
|
||||||
|
} else if (x_end_distance < distance * -1) {
|
||||||
|
this.listData[index].slide_x = 0;
|
||||||
|
} else {
|
||||||
|
this.listData[index].slide_x = this.start_slide_x;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 点击回复原状
|
||||||
|
recover(index) {
|
||||||
|
this.listData[index].slide_x = 0;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 点击按钮触发事件
|
||||||
|
* @param {Object} item 列表数据
|
||||||
|
* @param {Object} buttonItem 按钮数据
|
||||||
|
* @param {Object} index 列表数据key
|
||||||
|
*/
|
||||||
|
clickMethod(item, buttonItem, index,key) {
|
||||||
|
// this.$emit("change", item, buttonItem, index);
|
||||||
|
if(key) {
|
||||||
|
// 进入删除
|
||||||
|
// 修改为不存在的商品
|
||||||
|
this.listData[index].ifExit = false;
|
||||||
|
// 修改该商品不被选中
|
||||||
|
this.listData[index].ifcheck = false;
|
||||||
|
setTimeout(()=>{
|
||||||
|
// 隐藏该商品
|
||||||
|
this.listData[index].ifShow = false;
|
||||||
|
},1000)
|
||||||
|
setTimeout(()=>{
|
||||||
|
// 重构数组列表，去除不存在的商品
|
||||||
|
this.listData = this.listData.filter(item=>item.ifExit==true);
|
||||||
|
},1000)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 点击按钮触发事件
|
||||||
|
* @param {Object} item 列表数据
|
||||||
|
*/
|
||||||
|
clickItemMethod(item) {
|
||||||
|
this.$emit("click", item)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.slide-box {
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
}
|
||||||
|
.slide-list {
|
||||||
|
transition: all 100ms;
|
||||||
|
transition-timing-function: ease-out;
|
||||||
|
min-width: 200%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.now-message-info {
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
clear: both;
|
||||||
|
padding: 20rpx;
|
||||||
|
background: #ffffff;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgH{height: 180rpx;}
|
||||||
|
.shopp-img{width: 180rpx;border-radius: 10rpx;}
|
||||||
|
|
||||||
|
.group-btn {
|
||||||
|
float: left;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
height: 220rpx;
|
||||||
|
min-width: 100rpx;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-div {
|
||||||
|
height: 220rpx;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 50rpx;
|
||||||
|
font-size: 34rpx;
|
||||||
|
line-height: 220rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top {
|
||||||
|
background-color: #c4c7cd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.removeM {
|
||||||
|
background-color: #ff3b32;
|
||||||
|
}
|
||||||
|
.countBtn{font-size: 36rpx;width: 40rpx;height: 40rpx;background-color: #000000;color: #FFFFFF; border-radius: 10rpx;}
|
||||||
|
.countInput{background-color: #F5F5F5;width: 80rpx;border-radius: 10rpx;padding: 10rpx 0;margin: 0 10rpx;}
|
||||||
|
.cart-foot-box{position: fixed;bottom: 0;right: 0;left: 0;background-color: #FFFFFF; padding: 20rpx 40rpx;box-shadow: -6rpx 0rpx 10rpx rgba(0, 0, 0, .3);}
|
||||||
|
.cart-submit-btn{color: #FFFFFF;background-color: #cccccc;padding: 10rpx 40rpx;border-radius: 40rpx;}
|
||||||
|
|
||||||
|
.shopping-manage{position: fixed;right: 20rpx;bottom: 320rpx;width: 80rpx;height: 80rpx; border-radius: 100%;background-color: rgba(0, 0, 0, .6);color: #FFFFFF;font-size: 24rpx;display: flex;justify-content: center;align-items: center;}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
第一步：引入组件
|
||||||
|
|
||||||
|
import statusNav from '@/components/status-navs/status-nav.vue';
|
||||||
|
|
||||||
|
第二步：注册组件
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
statusNav
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
第三步：使用组件
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<status-nav
|
||||||
|
:ifReturn="true"
|
||||||
|
:ifTitle="true"
|
||||||
|
navBarTitle=""
|
||||||
|
:ifCenter="true"
|
||||||
|
titleColor="#000000"
|
||||||
|
returnc="#333333"
|
||||||
|
backgroudColor="#FFFFFF"
|
||||||
|
navBarHeight="40px"
|
||||||
|
clipNumber="1"
|
||||||
|
marginBottom="20rpx"
|
||||||
|
></status-nav>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
参数说明
|
||||||
|
|
||||||
|
ifTitle：是否显示标题，默认true
|
||||||
|
navBarTitle：导航栏标题，默认空值
|
||||||
|
ifCenter：标题是否居中，默认居中
|
||||||
|
titleColor：标题颜色，默认#000000
|
||||||
|
ifReturn：是否显示返回键，默认显示
|
||||||
|
returnc：返回键颜色，默认#333333
|
||||||
|
backgroudColor：状态栏、导航栏背景颜色，默认#FFFFFF
|
||||||
|
navBarHeight：导航栏高度，默认40px
|
||||||
|
clipNumber：标题最多几行显示，默认1
|
||||||
|
marginBottom：底部距离内容多高，默认20rpx
|
||||||
|
|
@ -88,11 +88,6 @@
|
||||||
type:Boolean,
|
type:Boolean,
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
// 来自哪里
|
|
||||||
fromWhere: {
|
|
||||||
type:Number,
|
|
||||||
default:0
|
|
||||||
},
|
|
||||||
// 底部距离内容多高
|
// 底部距离内容多高
|
||||||
marginBottom: {
|
marginBottom: {
|
||||||
type:String,
|
type:String,
|
||||||
|
|
@ -137,25 +132,14 @@
|
||||||
},
|
},
|
||||||
//返回事件
|
//返回事件
|
||||||
backEv(){
|
backEv(){
|
||||||
if(uni.getStorageSync('outside')*1==2){
|
uni.navigateBack({
|
||||||
this.fromWhere = uni.getStorageSync('outside')*1;
|
delta:1,
|
||||||
}
|
success: (res) => {},fail: (err) => {
|
||||||
switch (this.fromWhere){
|
uni.reLaunch({
|
||||||
case 1:
|
url:'/pages/tabbar/pagehome/pagehome'
|
||||||
case 2:
|
})
|
||||||
uni.navigateTo({
|
}
|
||||||
url:'/pages/tabbar/pagehome/pagehome'
|
})
|
||||||
})
|
|
||||||
uni.setStorageSync('outside',0)
|
|
||||||
break;
|
|
||||||
case 0:
|
|
||||||
uni.navigateBack({
|
|
||||||
delta:1
|
|
||||||
})
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
第一步：引入组件
|
||||||
|
|
||||||
|
import swiperPu from '@/components/swipers/swiper-pu.vue';
|
||||||
|
|
||||||
|
第二步：注册组件
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
'custom-swiper':swiperPu
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
第三步：使用组件
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<custom-swiper></custom-swiper>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
参数说明
|
||||||
|
|
||||||
|
isplay：是否自动轮播，默认不轮播
|
||||||
|
isDot：是否显示指示点，默认显示
|
||||||
|
bannerList：默认轮播图片，默认值为以下数组：
|
||||||
|
[
|
||||||
|
{imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',url:'',isVideo:false,poster:''},
|
||||||
|
{imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',url:'',isVideo:false,poster:''},
|
||||||
|
{imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',url:'',isVideo:false,poster:''},
|
||||||
|
]
|
||||||
|
newHeight：swiper的高，默认200px
|
||||||
|
newBottom：指示点距离底部位置，默认18px
|
||||||
|
newRadius：图片圆角，默认0px
|
||||||
|
browseP：是否可预览，默认不能预览
|
||||||
|
|
@ -1,5 +1,10 @@
|
||||||
const arrTool = {
|
const arrTool = {
|
||||||
oneArrToTwo(arr, size) { // arr是一维数组 size是二维数组包含几条数据
|
/**
|
||||||
|
* @description 一维数组变二维数组
|
||||||
|
* @param {Array} arr
|
||||||
|
* @param {Number} size
|
||||||
|
*/
|
||||||
|
oneArrToTwo(arr, size) {
|
||||||
var arrTwo = []
|
var arrTwo = []
|
||||||
for (var i = 0; i < arr.length; i = i + size) {
|
for (var i = 0; i < arr.length; i = i + size) {
|
||||||
arrTwo.push(arr.slice(i, i + size))
|
arrTwo.push(arr.slice(i, i + size))
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,168 @@
|
||||||
|
const imgTools = {
|
||||||
|
/**
|
||||||
|
* @description 图片多选，并返回图片数组
|
||||||
|
* @param {Number} count 1
|
||||||
|
*/
|
||||||
|
chooseImg(count=1) {
|
||||||
|
return new Promise((resolve,reject)=>{
|
||||||
|
let imgArr = [];
|
||||||
|
uni.chooseImage({
|
||||||
|
count:count,
|
||||||
|
sizeType:['compressed'],
|
||||||
|
sourceType:['album'],
|
||||||
|
success: (res) => {
|
||||||
|
let files = res.tempFilePaths
|
||||||
|
files.forEach(item=>{
|
||||||
|
imgArr.push(item);
|
||||||
|
})
|
||||||
|
resolve(imgArr);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 选择图片并压缩图片
|
||||||
|
* @param {Number} cutQuality 80
|
||||||
|
* @param {Number} cutWidth 200
|
||||||
|
* @param {Number} cutWidth 200
|
||||||
|
*/
|
||||||
|
chooseCompressImg(cutQuality=80,cutWidth=200,cutHeight=200) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
uni.chooseImage({
|
||||||
|
count:1,
|
||||||
|
sourceType:['album','camera'],
|
||||||
|
extension:['png'],//选择图片类型
|
||||||
|
crop:{//图像裁剪参数，设置后 sizeType 失效
|
||||||
|
quality:cutQuality,//1~100
|
||||||
|
width:cutWidth,
|
||||||
|
height:cutHeight,
|
||||||
|
resize:false//是否将width和height作为裁剪保存图片真实的像素值。默认值为true。注：设置为false时在裁剪编辑界面显示图片的像素值，设置为true时不显示
|
||||||
|
},
|
||||||
|
success: (res) => {
|
||||||
|
uni.compressImage({
|
||||||
|
src: res.tempFilePaths[0],
|
||||||
|
quality:100,//压缩质量，范围0～100，数值越小，质量越低，压缩率越高（仅对jpg有效）
|
||||||
|
width:cutWidth,
|
||||||
|
height:cutHeight,
|
||||||
|
rotate:0,//旋转度数，范围0～360
|
||||||
|
success: res => {
|
||||||
|
resolve(res.tempFilePath)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 预览图片
|
||||||
|
* @param {Number} current 0
|
||||||
|
* @param {Array} imgArr []
|
||||||
|
*/
|
||||||
|
previewImg(current=0,imgArr=[]) {
|
||||||
|
uni.previewImage({
|
||||||
|
current:current,
|
||||||
|
urls: imgArr,
|
||||||
|
indicator:'number',//图片指示器样式，可取值："default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器。
|
||||||
|
loop:false,//是否可循环预览，默认值为 false
|
||||||
|
longPressActions: {
|
||||||
|
itemList: ['发送给朋友', '保存图片', '收藏'],
|
||||||
|
itemColor:'#000000',//按钮的文字颜色，字符串格式，默认为"#000000"
|
||||||
|
success:(data)=> {
|
||||||
|
// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
|
||||||
|
switch (data.tapIndex){
|
||||||
|
case 0:
|
||||||
|
// 发送给朋友
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
// 保存图片
|
||||||
|
this.saveImg(imgArr[data.index]);
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
// 收藏
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 保存图片
|
||||||
|
* @param {String} src
|
||||||
|
*/
|
||||||
|
saveImg(src) {
|
||||||
|
uni.saveImageToPhotosAlbum({
|
||||||
|
filePath: src,
|
||||||
|
success: ()=> {}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 压缩图片
|
||||||
|
* @param {String} imgsrc
|
||||||
|
* @param {Number} quality 裁剪质量(1~100)，默认：80
|
||||||
|
* @param {Number} width 裁剪宽度，默认：不设置
|
||||||
|
* @param {Number} height 裁剪宽度，默认：不设置
|
||||||
|
* @param {Number} rotate 裁剪角度(0～360)，默认：0
|
||||||
|
*/
|
||||||
|
compressImg(imgsrc, quality=80, width='', height='', rotate=0) {
|
||||||
|
return new Promise((resolve, reject)=>{
|
||||||
|
uni.compressImage({
|
||||||
|
src: imgsrc,
|
||||||
|
quality,//压缩质量，范围0～100，数值越小，质量越低，压缩率越高（仅对jpg有效）
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
rotate,//旋转度数，范围0～360
|
||||||
|
success: res => {
|
||||||
|
resolve(res.tempFilePath);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 获取图片信息
|
||||||
|
* @param {String} src
|
||||||
|
*/
|
||||||
|
getImgInfo(src) {
|
||||||
|
return new Promise((resolve, reject)=>{
|
||||||
|
uni.getImageInfo({
|
||||||
|
src,
|
||||||
|
success: (image)=> {
|
||||||
|
resolve(image)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 选择并裁剪图片
|
||||||
|
* @param {Number} cutQuality 裁剪质量(1~100)，默认：100
|
||||||
|
* @param {Number} cutWidth 裁剪宽度，默认：200
|
||||||
|
* @param {Number} cutHeight 裁剪高度，默认：200
|
||||||
|
* @param {Number} cutRotate 裁剪角度(0～360)，默认：0
|
||||||
|
*/
|
||||||
|
cutImg(cutQuality=100,cutWidth=200,cutHeight=200, cutRotate=0) {
|
||||||
|
return new Promise((resolve, reject)=>{
|
||||||
|
uni.chooseImage({
|
||||||
|
count:1,
|
||||||
|
sourceType:['album','camera'],
|
||||||
|
crop:{//图像裁剪参数，设置后 sizeType 失效
|
||||||
|
quality:cutQuality,//1~100
|
||||||
|
width:cutWidth,
|
||||||
|
height:cutHeight,
|
||||||
|
resize:false//是否将width和height作为裁剪保存图片真实的像素值。默认值为true。注：设置为false时在裁剪编辑界面显示图片的像素值，设置为true时不显示
|
||||||
|
},
|
||||||
|
success: (res) => {
|
||||||
|
uni.compressImage({
|
||||||
|
src: res.tempFilePaths[0],
|
||||||
|
quality:100,//压缩质量，范围0～100，数值越小，质量越低，压缩率越高（仅对jpg有效）
|
||||||
|
width:cutWidth,
|
||||||
|
height:cutHeight,
|
||||||
|
rotate:cutRotate,//旋转度数，范围0～360
|
||||||
|
success: res => {
|
||||||
|
resolve(res.tempFilePath)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default imgTools;
|
||||||
|
|
@ -0,0 +1,272 @@
|
||||||
|
/**
|
||||||
|
* 本模块封装了Android、iOS的应用权限判断、打开应用权限设置界面、以及位置系统服务是否开启
|
||||||
|
*/
|
||||||
|
|
||||||
|
var isIos
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
isIos = (plus.os.name == "iOS")
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// 判断推送权限是否开启
|
||||||
|
function judgeIosPermissionPush() {
|
||||||
|
var result = false;
|
||||||
|
var UIApplication = plus.ios.import("UIApplication");
|
||||||
|
var app = UIApplication.sharedApplication();
|
||||||
|
var enabledTypes = 0;
|
||||||
|
if (app.currentUserNotificationSettings) {
|
||||||
|
var settings = app.currentUserNotificationSettings();
|
||||||
|
enabledTypes = settings.plusGetAttribute("types");
|
||||||
|
console.log("enabledTypes1:" + enabledTypes);
|
||||||
|
if (enabledTypes == 0) {
|
||||||
|
console.log("推送权限没有开启");
|
||||||
|
} else {
|
||||||
|
result = true;
|
||||||
|
console.log("已经开启推送功能!")
|
||||||
|
}
|
||||||
|
plus.ios.deleteObject(settings);
|
||||||
|
} else {
|
||||||
|
enabledTypes = app.enabledRemoteNotificationTypes();
|
||||||
|
if (enabledTypes == 0) {
|
||||||
|
console.log("推送权限没有开启!");
|
||||||
|
} else {
|
||||||
|
result = true;
|
||||||
|
console.log("已经开启推送功能!")
|
||||||
|
}
|
||||||
|
console.log("enabledTypes2:" + enabledTypes);
|
||||||
|
}
|
||||||
|
plus.ios.deleteObject(app);
|
||||||
|
plus.ios.deleteObject(UIApplication);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断定位权限是否开启
|
||||||
|
function judgeIosPermissionLocation() {
|
||||||
|
var result = false;
|
||||||
|
var cllocationManger = plus.ios.import("CLLocationManager");
|
||||||
|
var status = cllocationManger.authorizationStatus();
|
||||||
|
result = (status != 2)
|
||||||
|
console.log("定位权限开启：" + result);
|
||||||
|
// 以下代码判断了手机设备的定位是否关闭，推荐另行使用方法 checkSystemEnableLocation
|
||||||
|
/* var enable = cllocationManger.locationServicesEnabled();
|
||||||
|
var status = cllocationManger.authorizationStatus();
|
||||||
|
console.log("enable:" + enable);
|
||||||
|
console.log("status:" + status);
|
||||||
|
if (enable && status != 2) {
|
||||||
|
result = true;
|
||||||
|
console.log("手机定位服务已开启且已授予定位权限");
|
||||||
|
} else {
|
||||||
|
console.log("手机系统的定位没有打开或未给予定位权限");
|
||||||
|
} */
|
||||||
|
plus.ios.deleteObject(cllocationManger);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断麦克风权限是否开启
|
||||||
|
function judgeIosPermissionRecord() {
|
||||||
|
var result = false;
|
||||||
|
var avaudiosession = plus.ios.import("AVAudioSession");
|
||||||
|
var avaudio = avaudiosession.sharedInstance();
|
||||||
|
var permissionStatus = avaudio.recordPermission();
|
||||||
|
console.log("permissionStatus:" + permissionStatus);
|
||||||
|
if (permissionStatus == 1684369017 || permissionStatus == 1970168948) {
|
||||||
|
console.log("麦克风权限没有开启");
|
||||||
|
} else {
|
||||||
|
result = true;
|
||||||
|
console.log("麦克风权限已经开启");
|
||||||
|
}
|
||||||
|
plus.ios.deleteObject(avaudiosession);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断相机权限是否开启
|
||||||
|
function judgeIosPermissionCamera() {
|
||||||
|
var result = false;
|
||||||
|
var AVCaptureDevice = plus.ios.import("AVCaptureDevice");
|
||||||
|
var authStatus = AVCaptureDevice.authorizationStatusForMediaType('vide');
|
||||||
|
console.log("authStatus:" + authStatus);
|
||||||
|
if (authStatus == 3) {
|
||||||
|
result = true;
|
||||||
|
console.log("相机权限已经开启");
|
||||||
|
} else {
|
||||||
|
console.log("相机权限没有开启");
|
||||||
|
}
|
||||||
|
plus.ios.deleteObject(AVCaptureDevice);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断相册权限是否开启
|
||||||
|
function judgeIosPermissionPhotoLibrary() {
|
||||||
|
var result = false;
|
||||||
|
var PHPhotoLibrary = plus.ios.import("PHPhotoLibrary");
|
||||||
|
var authStatus = PHPhotoLibrary.authorizationStatus();
|
||||||
|
console.log("authStatus:" + authStatus);
|
||||||
|
if (authStatus == 3) {
|
||||||
|
result = true;
|
||||||
|
console.log("相册权限已经开启");
|
||||||
|
} else {
|
||||||
|
console.log("相册权限没有开启");
|
||||||
|
}
|
||||||
|
plus.ios.deleteObject(PHPhotoLibrary);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断通讯录权限是否开启
|
||||||
|
function judgeIosPermissionContact() {
|
||||||
|
var result = false;
|
||||||
|
var CNContactStore = plus.ios.import("CNContactStore");
|
||||||
|
var cnAuthStatus = CNContactStore.authorizationStatusForEntityType(0);
|
||||||
|
if (cnAuthStatus == 3) {
|
||||||
|
result = true;
|
||||||
|
console.log("通讯录权限已经开启");
|
||||||
|
} else {
|
||||||
|
console.log("通讯录权限没有开启");
|
||||||
|
}
|
||||||
|
plus.ios.deleteObject(CNContactStore);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断日历权限是否开启
|
||||||
|
function judgeIosPermissionCalendar() {
|
||||||
|
var result = false;
|
||||||
|
var EKEventStore = plus.ios.import("EKEventStore");
|
||||||
|
var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(0);
|
||||||
|
if (ekAuthStatus == 3) {
|
||||||
|
result = true;
|
||||||
|
console.log("日历权限已经开启");
|
||||||
|
} else {
|
||||||
|
console.log("日历权限没有开启");
|
||||||
|
}
|
||||||
|
plus.ios.deleteObject(EKEventStore);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断备忘录权限是否开启
|
||||||
|
function judgeIosPermissionMemo() {
|
||||||
|
var result = false;
|
||||||
|
var EKEventStore = plus.ios.import("EKEventStore");
|
||||||
|
var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(1);
|
||||||
|
if (ekAuthStatus == 3) {
|
||||||
|
result = true;
|
||||||
|
console.log("备忘录权限已经开启");
|
||||||
|
} else {
|
||||||
|
console.log("备忘录权限没有开启");
|
||||||
|
}
|
||||||
|
plus.ios.deleteObject(EKEventStore);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Android权限查询
|
||||||
|
function requestAndroidPermission(permissionID) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
plus.android.requestPermissions(
|
||||||
|
[permissionID], // 理论上支持多个权限同时查询，但实际上本函数封装只处理了一个权限的情况。有需要的可自行扩展封装
|
||||||
|
function(resultObj) {
|
||||||
|
var result = 0;
|
||||||
|
for (var i = 0; i < resultObj.granted.length; i++) {
|
||||||
|
var grantedPermission = resultObj.granted[i];
|
||||||
|
console.log('已获取的权限：' + grantedPermission);
|
||||||
|
result = 1
|
||||||
|
}
|
||||||
|
for (var i = 0; i < resultObj.deniedPresent.length; i++) {
|
||||||
|
var deniedPresentPermission = resultObj.deniedPresent[i];
|
||||||
|
console.log('拒绝本次申请的权限：' + deniedPresentPermission);
|
||||||
|
result = 0
|
||||||
|
}
|
||||||
|
for (var i = 0; i < resultObj.deniedAlways.length; i++) {
|
||||||
|
var deniedAlwaysPermission = resultObj.deniedAlways[i];
|
||||||
|
console.log('永久拒绝申请的权限：' + deniedAlwaysPermission);
|
||||||
|
result = -1
|
||||||
|
}
|
||||||
|
resolve(result);
|
||||||
|
// 若所需权限被拒绝,则打开APP设置界面,可以在APP设置界面打开相应权限
|
||||||
|
// if (result != 1) {
|
||||||
|
// gotoAppPermissionSetting()
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
function(error) {
|
||||||
|
console.log('申请权限错误：' + error.code + " = " + error.message);
|
||||||
|
resolve({
|
||||||
|
code: error.code,
|
||||||
|
message: error.message
|
||||||
|
});
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用一个方法，根据参数判断权限
|
||||||
|
function judgeIosPermission(permissionID) {
|
||||||
|
if (permissionID == "location") {
|
||||||
|
return judgeIosPermissionLocation()
|
||||||
|
} else if (permissionID == "camera") {
|
||||||
|
return judgeIosPermissionCamera()
|
||||||
|
} else if (permissionID == "photoLibrary") {
|
||||||
|
return judgeIosPermissionPhotoLibrary()
|
||||||
|
} else if (permissionID == "record") {
|
||||||
|
return judgeIosPermissionRecord()
|
||||||
|
} else if (permissionID == "push") {
|
||||||
|
return judgeIosPermissionPush()
|
||||||
|
} else if (permissionID == "contact") {
|
||||||
|
return judgeIosPermissionContact()
|
||||||
|
} else if (permissionID == "calendar") {
|
||||||
|
return judgeIosPermissionCalendar()
|
||||||
|
} else if (permissionID == "memo") {
|
||||||
|
return judgeIosPermissionMemo()
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 跳转到**应用**的权限页面
|
||||||
|
function gotoAppPermissionSetting() {
|
||||||
|
if (isIos) {
|
||||||
|
var UIApplication = plus.ios.import("UIApplication");
|
||||||
|
var application2 = UIApplication.sharedApplication();
|
||||||
|
var NSURL2 = plus.ios.import("NSURL");
|
||||||
|
// var setting2 = NSURL2.URLWithString("prefs:root=LOCATION_SERVICES");
|
||||||
|
var setting2 = NSURL2.URLWithString("app-settings:");
|
||||||
|
application2.openURL(setting2);
|
||||||
|
|
||||||
|
plus.ios.deleteObject(setting2);
|
||||||
|
plus.ios.deleteObject(NSURL2);
|
||||||
|
plus.ios.deleteObject(application2);
|
||||||
|
} else {
|
||||||
|
// console.log(plus.device.vendor);
|
||||||
|
var Intent = plus.android.importClass("android.content.Intent");
|
||||||
|
var Settings = plus.android.importClass("android.provider.Settings");
|
||||||
|
var Uri = plus.android.importClass("android.net.Uri");
|
||||||
|
var mainActivity = plus.android.runtimeMainActivity();
|
||||||
|
var intent = new Intent();
|
||||||
|
intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
|
||||||
|
var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);
|
||||||
|
intent.setData(uri);
|
||||||
|
mainActivity.startActivity(intent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查系统的设备服务是否开启
|
||||||
|
// var checkSystemEnableLocation = async function () {
|
||||||
|
function checkSystemEnableLocation() {
|
||||||
|
if (isIos) {
|
||||||
|
var result = false;
|
||||||
|
var cllocationManger = plus.ios.import("CLLocationManager");
|
||||||
|
var result = cllocationManger.locationServicesEnabled();
|
||||||
|
console.log("系统定位开启:" + result);
|
||||||
|
plus.ios.deleteObject(cllocationManger);
|
||||||
|
return result;
|
||||||
|
} else {
|
||||||
|
var context = plus.android.importClass("android.content.Context");
|
||||||
|
var locationManager = plus.android.importClass("android.location.LocationManager");
|
||||||
|
var main = plus.android.runtimeMainActivity();
|
||||||
|
var mainSvr = main.getSystemService(context.LOCATION_SERVICE);
|
||||||
|
var result = mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER);
|
||||||
|
console.log("系统定位开启:" + result);
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
judgeIosPermission: judgeIosPermission,
|
||||||
|
requestAndroidPermission: requestAndroidPermission,
|
||||||
|
checkSystemEnableLocation: checkSystemEnableLocation,
|
||||||
|
gotoAppPermissionSetting: gotoAppPermissionSetting
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
第一步：引入js
|
||||||
|
|
||||||
|
import permision from "@/jsFile/permission/permission.js";
|
||||||
|
|
||||||
|
第二步：使用js里的方法
|
||||||
|
|
||||||
|
let permisionID = '';
|
||||||
|
|
||||||
|
ios系统：
|
||||||
|
|
||||||
|
permisionID：可取以下值
|
||||||
|
location：位置权限
|
||||||
|
camera：摄像头权限
|
||||||
|
photoLibrary：相册权限
|
||||||
|
record：麦克风权限
|
||||||
|
push：推送权限
|
||||||
|
contact：通讯录权限
|
||||||
|
calendar：日历权限
|
||||||
|
memo：备忘录权限
|
||||||
|
|
||||||
|
Android系统：
|
||||||
|
|
||||||
|
permisionID：可取以下值
|
||||||
|
android.permission.ACCESS_FINE_LOCATION：位置权限
|
||||||
|
android.permission.ACCESS_COARSE_LOCATION：模糊位置权限(蓝牙\ble依赖)
|
||||||
|
android.permission.CAMERA：摄像头权限
|
||||||
|
android.permission.READ_EXTERNAL_STORAGE：外部存储(含相册)读取权限
|
||||||
|
android.permission.WRITE_EXTERNAL_STORAGE：外部存储(含相册)写入权限
|
||||||
|
android.permission.RECORD_AUDIO：麦克风权限
|
||||||
|
android.permission.READ_CONTACTS：通讯录读取权限
|
||||||
|
android.permission.WRITE_CONTACTS：通讯录写入权限
|
||||||
|
android.permission.READ_CALENDAR：日历读取权限
|
||||||
|
android.permission.WRITE_CALENDAR：日历写入权限
|
||||||
|
android.permission.READ_SMS：短信读取权限
|
||||||
|
android.permission.SEND_SMS：短信发送权限
|
||||||
|
android.permission.RECEIVE_SMS：接收新短信权限
|
||||||
|
android.permission.READ_PHONE_STATE：获取手机识别码等信息的权限
|
||||||
|
android.permission.CALL_PHONE：拨打电话权限
|
||||||
|
android.permission.READ_CALL_LOG：获取通话记录权限
|
||||||
|
|
||||||
|
|
||||||
|
let result = permision.judgeIosPermission(permisionID);
|
||||||
|
if(!result) {
|
||||||
|
//未开启权限，并前往应用设置
|
||||||
|
permision.gotoAppPermissionSetting()
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,138 @@
|
||||||
|
const videoTools = {
|
||||||
|
/**
|
||||||
|
* @description 视频选择，并返回
|
||||||
|
*/
|
||||||
|
chooseVideo() {
|
||||||
|
return new Promise((resolve,reject)=>{
|
||||||
|
let videoObj = {};
|
||||||
|
uni.chooseVideo({
|
||||||
|
sourceType: ['camera', 'album'],
|
||||||
|
compressed:true,//是否压缩所选的视频源文件，默认值为 true，需要压缩。
|
||||||
|
maxDuration:60,//拍摄视频最长拍摄时间，单位秒。最长支持 60 秒。
|
||||||
|
camera: 'back',//'front'、'back'，默认'back'
|
||||||
|
success: (res)=> {
|
||||||
|
console.log(res,'视频');
|
||||||
|
// #ifdef H5
|
||||||
|
videoObj = {
|
||||||
|
size:res.size,//视频大小
|
||||||
|
path:res.name,//视频名称
|
||||||
|
lastModified:res.tempFile.lastModified,//最后修改时间
|
||||||
|
type:res.tempFile.type,//视频类型
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifdef APP-PLUS || MP-WEIXIN
|
||||||
|
videoObj = {
|
||||||
|
size:res.size,//视频大小
|
||||||
|
path:res.tempFilePath,//视频名称
|
||||||
|
duration:res.duration,//播放总时长单位秒
|
||||||
|
width:res.width,//视频宽
|
||||||
|
height:res.height,//视频高
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
resolve(videoObj)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 选择视频并压缩视频，不支持H5
|
||||||
|
*/
|
||||||
|
chooseCompressVideo() {
|
||||||
|
return new Promise((resolve, reject)=>{
|
||||||
|
uni.chooseVideo({
|
||||||
|
sourceType: ['camera', 'album'],
|
||||||
|
compressed:true,//是否压缩所选的视频源文件，默认值为 true，需要压缩。
|
||||||
|
maxDuration:60,//拍摄视频最长拍摄时间，单位秒。最长支持 60 秒。
|
||||||
|
camera: 'back',//'front'、'back'，默认'back'
|
||||||
|
success: (res)=> {
|
||||||
|
let exit = res.tempFilePath.split('.').includes('mp4');
|
||||||
|
if(exit) {
|
||||||
|
// #ifdef APP-PLUS || MP-WEIXIN
|
||||||
|
uni.compressVideo({
|
||||||
|
src:res.tempFilePath,
|
||||||
|
quality:'medium',//low:低 medium:中 high:高
|
||||||
|
bitrate: 100000,//码率，单位 kbps
|
||||||
|
fps: 100,//帧率
|
||||||
|
resolution:1,//相对于原视频的分辨率比例，取值范围(0, 1]
|
||||||
|
success: rescomp => {
|
||||||
|
resolve({path:rescomp.tempFilePath,size:rescomp.size})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
} else {
|
||||||
|
uni.showToast({title:'请选择mp4格式的视频',icon:'none'})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 预览视频，仅仅微信小程序生效
|
||||||
|
* @param {Number} current 0
|
||||||
|
* @param {Array} videoArr [{url:'',type:'video',poster:''}]
|
||||||
|
*/
|
||||||
|
previewVideo(current=0,videoArr=[]) {
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
uni.previewMedia({
|
||||||
|
current:current,
|
||||||
|
sources:videoArr
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 保存视频，不支持H5
|
||||||
|
* @param {String} src
|
||||||
|
*/
|
||||||
|
saveVideo(src) {
|
||||||
|
uni.saveVideoToPhotosAlbum({
|
||||||
|
filePath: src,
|
||||||
|
success: ()=> {}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 压缩视频，不支持H5
|
||||||
|
* @param {String} src
|
||||||
|
*/
|
||||||
|
compressVideo(src) {
|
||||||
|
return new Promise((resolve, reject)=>{
|
||||||
|
// #ifdef APP-PLUS || MP-WEIXIN
|
||||||
|
uni.compressVideo({
|
||||||
|
src,
|
||||||
|
quality:'medium',//low:低 medium:中 high:高
|
||||||
|
bitrate: 100000,//码率，单位 kbps
|
||||||
|
fps: 100,//帧率
|
||||||
|
resolution:1,//相对于原视频的分辨率比例，取值范围(0, 1]
|
||||||
|
success: rescomp => {
|
||||||
|
resolve({path:rescomp.tempFilePath,size:rescomp.size})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 获取视频信息
|
||||||
|
* @param {String} src
|
||||||
|
*/
|
||||||
|
getVideoInfo(src) {
|
||||||
|
return new Promise((resolve, reject)=>{
|
||||||
|
uni.getVideoInfo({
|
||||||
|
src,
|
||||||
|
success: (video)=> {
|
||||||
|
let obj = {
|
||||||
|
orientation:video.orientation,//画面方向 微信小程序、App（3.1.14+）
|
||||||
|
type:video.type,//视频格式 微信小程序、App（3.1.14+）
|
||||||
|
duration:video.duration,//视频长度 微信小程序、App（3.1.10+）、H5
|
||||||
|
size:video.size,//视频大小，单位 kB 微信小程序、App（3.1.10+）、H5
|
||||||
|
height:video.height,//视频的长，单位 px 微信小程序、App（3.1.10+）、H5
|
||||||
|
width:video.width,//视频的宽，单位 px 微信小程序、App（3.1.10+）、H5
|
||||||
|
fps:video.fps,//视频帧率 微信小程序、App（3.1.14+）
|
||||||
|
bitrate:video.bitrate,//视频码率，单位 kbps 微信小程序、App（3.1.14+）
|
||||||
|
}
|
||||||
|
resolve(obj)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default videoTools;
|
||||||
36
pages.json
36
pages.json
|
|
@ -88,6 +88,42 @@
|
||||||
"enablePullDownRefresh": false
|
"enablePullDownRefresh": false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
,{
|
||||||
|
"path" : "yy-video/yy-video",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
,{
|
||||||
|
"path" : "yy-img/yy-img",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
,{
|
||||||
|
"path" : "shopping-cart/shopping-cart",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
,{
|
||||||
|
"path" : "shopping-cart-slide/shopping-cart-slide",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{ //B包
|
{ //B包
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<status-container titlet="购物车">
|
||||||
|
<view slot="content">
|
||||||
|
<cart-slide></cart-slide>
|
||||||
|
</view>
|
||||||
|
</status-container>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import cartSlide from '@/components/shopping-carts/cart-slide';
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
cartSlide
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<status-container titlet="购物车">
|
||||||
|
<view slot="content">
|
||||||
|
<cart-one></cart-one>
|
||||||
|
</view>
|
||||||
|
</status-container>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import cartOne from '@/components/shopping-carts/cart-one.vue';
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
cartOne
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<status-container titlet="图片">
|
||||||
|
<view slot="content">
|
||||||
|
<column-function :list="list" @chooseEv="chooseEv"></column-function>
|
||||||
|
<view v-if="ifPreview">
|
||||||
|
<img-video-preview :imgcurrent="imgcurrent" :list="imgList" @closeCustomEv="ifPreview=false"></img-video-preview>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</status-container>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import columnFunction from '@/components/function-list/column/column-function.vue';
|
||||||
|
import imgTools from '@/jsFile/img/yy-img.js';
|
||||||
|
import imgVideoPreview from '@/components/custom-preview/img-video-preview.vue';
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
columnFunction,
|
||||||
|
imgVideoPreview
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list:[
|
||||||
|
{url:'',title:'选择图片可传递数量',iconsrc:'',iconWidth:60,iconHeight:60,content:'',contentColor:'#999999',ifNext:true},
|
||||||
|
{url:'',title:'自定义图片预览',iconsrc:'',iconWidth:60,iconHeight:60,content:'',contentColor:'#999999',ifNext:true},
|
||||||
|
],
|
||||||
|
imgList:[
|
||||||
|
// {src:'/static/deleteImg/公式.mp4',title:'标题',content:'描述描述描述描述描述描述描述描述'},
|
||||||
|
],
|
||||||
|
ifPreview:false,
|
||||||
|
imgcurrent:0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
chooseEv(obj) {
|
||||||
|
switch (obj.index){
|
||||||
|
case 0:
|
||||||
|
imgTools.chooseImg(9).then(res=>{
|
||||||
|
res.forEach((item,index)=>{
|
||||||
|
this.imgList.push({src:item,title:`标题${index+1}`,content:`描述描述描述描述描述描述描述描述${index+1}`})
|
||||||
|
})
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
if(this.imgList.length) {
|
||||||
|
this.imgcurrent = 0;
|
||||||
|
this.ifPreview = true;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<status-container titlet="视频">
|
||||||
|
<view slot="content">
|
||||||
|
<column-function :list="list" @chooseEv="chooseEv"></column-function>
|
||||||
|
</view>
|
||||||
|
</status-container>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import columnFunction from '@/components/function-list/column/column-function.vue';
|
||||||
|
import videoTools from '@/jsFile/video/yy-video.js';
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
columnFunction
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list:[
|
||||||
|
{url:'',title:'单选视频',iconsrc:'',iconWidth:60,iconHeight:60,content:'',contentColor:'#999999',ifNext:true},
|
||||||
|
{url:'',title:'选择视频并压缩视频',iconsrc:'',iconWidth:60,iconHeight:60,content:'',contentColor:'#999999',ifNext:true},
|
||||||
|
{url:'',title:'预览视频',iconsrc:'',iconWidth:60,iconHeight:60,content:'',contentColor:'#999999',ifNext:true},
|
||||||
|
],
|
||||||
|
videoArr:[]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
chooseEv(obj) {
|
||||||
|
switch (obj.index){
|
||||||
|
case 0:
|
||||||
|
videoTools.chooseVideo().then(res=>{
|
||||||
|
console.log(res,30);
|
||||||
|
let obj = {
|
||||||
|
url:res.path,
|
||||||
|
type:'video',
|
||||||
|
poster:''
|
||||||
|
}
|
||||||
|
this.videoArr.push(obj);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
videoTools.chooseCompressVideo().then(res=>{
|
||||||
|
console.log(res,30);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
console.log(this.videoArr)
|
||||||
|
uni.previewMedia({
|
||||||
|
current:1,
|
||||||
|
sources:this.videoArr
|
||||||
|
})
|
||||||
|
// videoTools.previewVideo(1,this.videoArr)
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue