parent
d000d47f64
commit
29e46fa74a
@ -0,0 +1,182 @@ |
||||
<template> |
||||
<div> |
||||
<video |
||||
id="video" |
||||
loop="true" |
||||
:autoplay="autoPlay" |
||||
:src="url" |
||||
:danmu-list="danmuList" |
||||
enable-danmu="true" |
||||
danmu-btn="true" |
||||
:style="{ width: screenWidth }" |
||||
:poster="poster" |
||||
@fullscreenchange="setFullScreenStatus" |
||||
@timeupdate="timeUpdate" |
||||
> |
||||
</video> |
||||
<div class="video-process-bar" :style="{'background-color':processBarColor,width:processBarWidth}"></div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
props: { |
||||
autoPlay:{ |
||||
type:Boolean, |
||||
default:true |
||||
}, |
||||
url: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
poster: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
danmuList: { |
||||
type: Array, |
||||
default: [] |
||||
}, |
||||
showBackBtn:{ |
||||
type:Boolean, |
||||
default:false |
||||
}, |
||||
showDownloadBtn:{ |
||||
type:Boolean, |
||||
default:true |
||||
}, |
||||
processBarColor:{ |
||||
type:String, |
||||
default:"#39BFFD" |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
screenWidth: 750, |
||||
isFullScreen: false, |
||||
isDownloading: false, |
||||
downloadTask: null, |
||||
progressValue:0, |
||||
processBarWidth:0, |
||||
}; |
||||
}, |
||||
created() { |
||||
this.screenWidth = uni.getSystemInfoSync().windowWidth; |
||||
}, |
||||
methods: { |
||||
showToast(title) { |
||||
uni.showToast({ |
||||
title: title, |
||||
icon: 'none' |
||||
}) |
||||
}, |
||||
downLoadFile(url) { |
||||
var that=this; |
||||
that.showToast('开始下载'); |
||||
that.downloadTask = uni.downloadFile({ |
||||
url: url, |
||||
success: (res) => { |
||||
if (res.statusCode === 200) { |
||||
console.log(res.tempFilePath) |
||||
var tempFilePath=res.tempFilePath; |
||||
uni.saveFile({ |
||||
tempFilePath:tempFilePath, |
||||
success(res) { |
||||
console.log(res.savedFilePath) |
||||
that.showToast('下载成功,文件已保存到'+res.savedFilePath); |
||||
},fail() { |
||||
that.showToast('下载失败，请稍后重试'); |
||||
} |
||||
}) |
||||
} else { |
||||
that.showToast('下载失败'); |
||||
} |
||||
}, |
||||
complete:()=>{ |
||||
that.isDownloading=false; |
||||
} |
||||
}) |
||||
}, |
||||
download(url) { |
||||
var that=this; |
||||
that.progressValue=0; |
||||
if (!that.isDownloading) { |
||||
that.isDownloading = true; |
||||
that.downLoadFile( url); |
||||
that.downloadTask.onProgressUpdate(res => { |
||||
that.progressValue=res.progress; |
||||
}); |
||||
}else{ |
||||
if(that.downloadTask!=null){ |
||||
that.downloadTask.abort(); |
||||
that.isDownloading=false; |
||||
that.showToast('取消下载'); |
||||
} |
||||
} |
||||
}, |
||||
timeUpdate(e){ |
||||
this.processBarWidth=(e.detail.currentTime/e.detail.duration)*this.screenWidth; |
||||
}, |
||||
setFullScreenStatus(e) { |
||||
if (e.detail.direction == 'horizontal') { |
||||
this.isFullScreen = true; |
||||
} else { |
||||
this.isFullScreen = false; |
||||
} |
||||
}, |
||||
back() { |
||||
uni.navigateBack(); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="scss"> |
||||
.back-button { |
||||
width: 30px; |
||||
height: 30px; |
||||
align-items: center; |
||||
justify-content: center; |
||||
opacity: 0.8; |
||||
margin-top: 25px; |
||||
margin-left: 15px; |
||||
border-radius: 50%; |
||||
background-color: rgba($color: #000000, $alpha: 0.8); |
||||
} |
||||
.back-icon { |
||||
width: 20px; |
||||
height: 20px; |
||||
} |
||||
.download-button { |
||||
position: absolute; |
||||
top: 90px; |
||||
right: 15px; |
||||
width: 30px; |
||||
height: 30px; |
||||
align-items: center; |
||||
justify-content: center; |
||||
opacity: 0.8; |
||||
border-radius: 50%; |
||||
background-color: rgba($color: #000000, $alpha: 0.8); |
||||
} |
||||
.process-text { |
||||
color: #fff; |
||||
font-size: 10px; |
||||
} |
||||
.video-process-bar{ |
||||
height: 2px; |
||||
} |
||||
.download-icon-horizontal{ |
||||
position: absolute; |
||||
right: 30px; |
||||
width: 30px; |
||||
height: 30px; |
||||
align-items: center; |
||||
justify-content: center; |
||||
opacity: 0.8; |
||||
border-radius: 50%; |
||||
background-color: rgba($color: #000000, $alpha: 0.8); |
||||
} |
||||
.process-text-horizontal { |
||||
color: #fff; |
||||
font-size: 5px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,13 @@ |
||||
{ |
||||
"id": "xiao-video-component", |
||||
"name": "视频播放器组件", |
||||
"version": "1.0.0", |
||||
"description": "基于uniapp小程序视频播放器组件", |
||||
"keywords": [ |
||||
"视频", |
||||
"播放器", |
||||
"video", |
||||
"player", |
||||
"uniapp" |
||||
] |
||||
} |
||||
@ -1,241 +0,0 @@ |
||||
<template> |
||||
<view> |
||||
<view class="chat-list"> |
||||
<view class="chat" v-for="(chat,index) in chatList" :key="index"> |
||||
<view class="row" @tap="toChat(chat)"> |
||||
<view class="left"> |
||||
<image :src="chat.face"></image> |
||||
</view> |
||||
<view class="right"> |
||||
<view class="top"> |
||||
<view class="username">{{chat.username}}</view> |
||||
<view class="time">{{chat.time}}</view> |
||||
</view> |
||||
<view class="bottom"> |
||||
<view class="msg">{{chat.msg}}</view> |
||||
<view class="tis" v-if="chat.tisNum>0">{{chat.tisNum}}</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
chatList:[ |
||||
{ |
||||
uid:1, |
||||
username:"鲜果蔬专营店", |
||||
face:"/static/img/im/face/face_1.jpg", |
||||
time:"13:08", |
||||
msg:"亲，20点前下单都是当天送达的", |
||||
tisNum:1 |
||||
}, |
||||
{ |
||||
uid:2, |
||||
username:"官店大欺客旗舰店", |
||||
face:"/static/img/im/face/face_2.jpg", |
||||
time:"13:05", |
||||
msg:"问那么多干什么？不想买就滚~", |
||||
tisNum:0 |
||||
}, |
||||
{ |
||||
uid:3, |
||||
username:"妙不可言", |
||||
face:"/static/img/im/face/face_3.jpg", |
||||
time:"12:15", |
||||
msg:"推荐一个商品呗？", |
||||
tisNum:0 |
||||
}, |
||||
{ |
||||
uid:4, |
||||
username:"茶叶专卖", |
||||
face:"/static/img/im/face/face_4.jpg", |
||||
time:"12:11", |
||||
msg:"现在卖的都是未过青的茶哦", |
||||
tisNum:0 |
||||
}, |
||||
{ |
||||
uid:5, |
||||
username:"likeKiss客服", |
||||
face:"/static/img/im/face/face_5.jpg", |
||||
time:"12:10", |
||||
msg:"你好，发福建快递多久送到的？", |
||||
tisNum:0 |
||||
}, |
||||
{ |
||||
uid:6, |
||||
username:"白开水", |
||||
face:"/static/img/im/face/face_6.jpg", |
||||
time:"12:10", |
||||
msg:"在吗？", |
||||
tisNum:0 |
||||
}, |
||||
{ |
||||
uid:7, |
||||
username:"衣帽间的叹息", |
||||
face:"/static/img/im/face/face_7.jpg", |
||||
time:"11:56", |
||||
msg:"新品上市，欢迎选购", |
||||
tisNum:0 |
||||
}, |
||||
{ |
||||
uid:8, |
||||
username:"景萧疏", |
||||
face:"/static/img/im/face/face_8.jpg", |
||||
time:"11:56", |
||||
msg:"商品七天无理由退换的", |
||||
tisNum:0 |
||||
}, |
||||
{ |
||||
uid:9, |
||||
username:"文宁先生", |
||||
face:"/static/img/im/face/face_9.jpg", |
||||
time:"12:15", |
||||
msg:"星期天再发货的", |
||||
tisNum:0 |
||||
}, |
||||
{ |
||||
uid:10, |
||||
username:"高端Chieh", |
||||
face:"/static/img/im/face/face_10.jpg", |
||||
time:"12:36", |
||||
msg:"建议你直接先测量好尺码在选购的。", |
||||
tisNum:0 |
||||
}, |
||||
{ |
||||
uid:11, |
||||
username:"mode旗舰店", |
||||
face:"/static/img/im/face/face_11.jpg", |
||||
time:"12:40", |
||||
msg:"新品5折，还有大量优惠券。", |
||||
tisNum:0 |
||||
}, |
||||
{ |
||||
uid:12, |
||||
username:"敏萘客服", |
||||
face:"/static/img/im/face/face_12.jpg", |
||||
time:"12:36", |
||||
msg:"还没有用，等我明天早上试一下", |
||||
tisNum:0 |
||||
}, |
||||
{ |
||||
uid:13, |
||||
username:"春天里的花", |
||||
face:"/static/img/im/face/face_13.jpg", |
||||
time:"12:36", |
||||
msg:"适用于成年人的，小孩不适用的", |
||||
tisNum:0 |
||||
}, |
||||
{ |
||||
uid:14, |
||||
username:"电脑外设专业户", |
||||
face:"/static/img/im/face/face_13.jpg", |
||||
time:"12:36", |
||||
msg:"把上面的螺丝拆下来，把铁片撬开就能看见了", |
||||
tisNum:0 |
||||
}, |
||||
{ |
||||
uid:15, |
||||
username:"至善汽车用品", |
||||
face:"/static/img/im/face/face_15.jpg", |
||||
time:"12:36", |
||||
msg:"这个产品是原车配件，完美装上的", |
||||
tisNum:0 |
||||
} |
||||
|
||||
] |
||||
} |
||||
}, |
||||
//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true |
||||
onPullDownRefresh() { |
||||
setTimeout(function () { |
||||
uni.stopPullDownRefresh(); |
||||
}, 1000); |
||||
}, |
||||
onLoad() { |
||||
|
||||
}, |
||||
methods: { |
||||
toChat(chat){ |
||||
// uni.navigateTo({ |
||||
// url:"chat/chat?name="+chat.username |
||||
// }) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
page{ |
||||
background-color: rgba(0,0,0,0); |
||||
} |
||||
.chat-list{ |
||||
width: 94%; |
||||
padding: 0 3%; |
||||
.chat{ |
||||
width: 100%; |
||||
height: 100upx; |
||||
padding: 20upx 0; |
||||
border-bottom: solid 1upx #eaeaea; |
||||
.row{ |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
.left{ |
||||
flex-shrink:0; |
||||
width: 100upx; |
||||
height: 100upx; |
||||
image{ |
||||
width: 100upx; |
||||
height: 100upx; |
||||
border-radius: 20upx; |
||||
} |
||||
} |
||||
.right{ |
||||
flex-shrink:1; |
||||
width: 98%; |
||||
padding-left: 2%; |
||||
.top{ |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: flex-end; |
||||
.usernam{ |
||||
font-size: 26upx; |
||||
} |
||||
.time{ |
||||
font-size: 22upx; |
||||
color: #bebebe; |
||||
} |
||||
} |
||||
.bottom{ |
||||
width: 100%; |
||||
height: 40upx; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
.msg{ |
||||
font-size: 25upx; |
||||
color: #777; |
||||
} |
||||
.tis{ |
||||
width: 35upx; |
||||
height: 35upx; |
||||
font-size: 22upx; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
background-color: #eb4d3d; |
||||
color: #fff; |
||||
border-radius: 100%; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,582 +0,0 @@ |
||||
<template> |
||||
<view> |
||||
<view v-if="showHeader" class="status" :style="{position:headerPosition,top:statusTop}"></view> |
||||
<view v-if="showHeader" class="header" :style="{position:headerPosition,top:headerTop}"> |
||||
<view class="title">购物车</view> |
||||
</view> |
||||
<!-- 占位 --> |
||||
<view v-if="showHeader" class="place"></view> |
||||
<!-- 商品列表 --> |
||||
<view class="goods-list"> |
||||
<view class="tis" v-if="goodsList.length==0">购物车是空的哦~</view> |
||||
<view class="row" v-for="(row,index) in goodsList" :key="index" > |
||||
<!-- 删除按钮 --> |
||||
<view class="menu" @tap.stop="deleteGoods(row.id)"> |
||||
<view class="icon shanchu"></view> |
||||
</view> |
||||
<!-- 商品 --> |
||||
<view class="carrier" :class="[theIndex==index?'open':oldIndex==index?'close':'']" @touchstart="touchStart(index,$event)" @touchmove="touchMove(index,$event)" @touchend="touchEnd(index,$event)"> |
||||
<!-- checkbox --> |
||||
<view class="checkbox-box" @tap="selected(index)"> |
||||
<view class="checkbox"> |
||||
<view :class="[row.selected?'on':'']"></view> |
||||
</view> |
||||
</view> |
||||
<!-- 商品信息 --> |
||||
<view class="goods-info" @tap="toGoods(row)"> |
||||
<view class="img"> |
||||
<image :src="row.img"></image> |
||||
</view> |
||||
<view class="info"> |
||||
<view class="title">{{row.name}}</view> |
||||
<view class="spec">{{row.spec}}</view> |
||||
<view class="price-number"> |
||||
<view class="price">￥{{row.price}}</view> |
||||
<view class="number"> |
||||
<view class="sub" @tap.stop="sub(index)"> |
||||
<view class="icon jian"></view> |
||||
</view> |
||||
<view class="input" @tap.stop="discard"> |
||||
<input type="number" v-model="row.number" @input="sum($event,index)" /> |
||||
</view> |
||||
<view class="add" @tap.stop="add(index)"> |
||||
<view class="icon jia"></view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<!-- 脚部菜单 --> |
||||
<view class="footer" :style="{bottom:footerbottom}"> |
||||
<view class="checkbox-box" @tap="allSelect"> |
||||
<view class="checkbox"> |
||||
<view :class="[isAllselected?'on':'']"></view> |
||||
</view> |
||||
<view class="text">全选</view> |
||||
</view> |
||||
<view class="delBtn" @tap="deleteList" v-if="selectedList.length>0">删除</view> |
||||
<view class="settlement"> |
||||
<view class="sum">合计:<view class="money">￥{{sumPrice}}</view></view> |
||||
<view class="btn" @tap="toConfirmation">结算({{selectedList.length}})</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
sumPrice:'0.00', |
||||
headerPosition:"fixed", |
||||
headerTop:null, |
||||
statusTop:null, |
||||
showHeader:true, |
||||
selectedList:[], |
||||
isAllselected:false, |
||||
goodsList:[ |
||||
{id:1,img:'/static/img/banner1.png',name:'100元卡券',spec:'规格:S码',price:127.5,number:1,selected:false}, |
||||
{id:2,img:'/static/img/banner1.png',name:'200元卡券',spec:'规格:S码',price:127.5,number:1,selected:false}, |
||||
{id:3,img:'/static/img/banner1.png',name:'150中石化卡券',spec:'规格:S码',price:127.5,number:1,selected:false}, |
||||
{id:4,img:'/static/img/banner1.png',name:'200中石化卡券',spec:'规格:S码',price:127.5,number:1,selected:false}, |
||||
{id:5,img:'/static/img/banner1.png',name:'100其他卡券',spec:'规格:S码',price:127.5,number:1,selected:false} |
||||
], |
||||
//控制滑动效果 |
||||
theIndex:null, |
||||
oldIndex:null, |
||||
isStop:false |
||||
} |
||||
}, |
||||
onPageScroll(e){ |
||||
//兼容iOS端下拉时顶部漂移 |
||||
this.headerPosition = e.scrollTop>=0?"fixed":"absolute"; |
||||
this.headerTop = e.scrollTop>=0?null:0; |
||||
this.statusTop = e.scrollTop>=0?null:-this.statusHeight+'px'; |
||||
}, |
||||
//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true |
||||
onPullDownRefresh() { |
||||
setTimeout(function () { |
||||
uni.stopPullDownRefresh(); |
||||
}, 1000); |
||||
}, |
||||
onLoad() { |
||||
//兼容H5下结算条位置 |
||||
// #ifdef H5 |
||||
this.footerbottom = document.getElementsByTagName('uni-tabbar')[0].offsetHeight+'px'; |
||||
// #endif |
||||
// #ifdef APP-PLUS |
||||
this.showHeader = false; |
||||
this.statusHeight = plus.navigator.getStatusbarHeight(); |
||||
// #endif |
||||
}, |
||||
methods: { |
||||
//加入商品 参数 goods:商品数据 |
||||
joinGoods(goods){ |
||||
/* |
||||
* 这里只是展示一种添加逻辑，模板并没有做从其他页面加入商品到购物车的具体动作， |
||||
* 在实际应用上，前端并不会直接插入记录到goodsList这一个动作，一般是更新列表和本地列表缓存。 |
||||
* 一般商城购物车的增删改动作是由后端来完成的, |
||||
* 后端记录后返回前端更新前端缓存 |
||||
*/ |
||||
let len = this.goodsList.length; |
||||
let isFind = false;//是否找到ID一样的商品 |
||||
for(let i=0;i<len;i++){ |
||||
let row = this.goodsList[i]; |
||||
if(row.id==goods.id ) |
||||
{ //找到商品一样的商品 |
||||
this.goodsList[i].number++;//数量自增 |
||||
isFind = true;//找到一样的商品 |
||||
break;//跳出循环 |
||||
} |
||||
} |
||||
if(!isFind){ |
||||
//没有找到一样的商品，新增一行到购物车商品列表头部 |
||||
this.goodsList[i].unshift(goods); |
||||
} |
||||
}, |
||||
//控制左滑删除效果-begin |
||||
touchStart(index,event){ |
||||
//多点触控不触发 |
||||
if(event.touches.length>1){ |
||||
this.isStop = true; |
||||
return ; |
||||
} |
||||
this.oldIndex = this.theIndex; |
||||
this.theIndex = null; |
||||
//初始坐标 |
||||
this.initXY = [event.touches[0].pageX,event.touches[0].pageY]; |
||||
}, |
||||
touchMove(index,event){ |
||||
//多点触控不触发 |
||||
if(event.touches.length>1){ |
||||
this.isStop = true; |
||||
return ; |
||||
} |
||||
let moveX = event.touches[0].pageX - this.initXY[0]; |
||||
let moveY = event.touches[0].pageY - this.initXY[1]; |
||||
|
||||
if(this.isStop||Math.abs(moveX)<5){ |
||||
return ; |
||||
} |
||||
if (Math.abs(moveY) > Math.abs(moveX)){ |
||||
// 竖向滑动-不触发左滑效果 |
||||
this.isStop = true; |
||||
return; |
||||
} |
||||
|
||||
if(moveX<0){ |
||||
this.theIndex = index; |
||||
this.isStop = true; |
||||
}else if(moveX>0){ |
||||
if(this.theIndex!=null&&this.oldIndex==this.theIndex){ |
||||
this.oldIndex = index; |
||||
this.theIndex = null; |
||||
this.isStop = true; |
||||
setTimeout(()=>{ |
||||
this.oldIndex = null; |
||||
},150) |
||||
} |
||||
} |
||||
}, |
||||
touchEnd(index,$event){ |
||||
//结束禁止触发效果 |
||||
this.isStop = false; |
||||
}, |
||||
//控制左滑删除效果-end |
||||
|
||||
|
||||
//商品跳转 |
||||
toGoods(e){ |
||||
uni.showToast({title: '商品'+e.id,icon:"none"}); |
||||
uni.navigateTo({ |
||||
url: '../../goods/goods' |
||||
}); |
||||
}, |
||||
//跳转确认订单页面 |
||||
toConfirmation(){ |
||||
let tmpList=[]; |
||||
let len = this.goodsList.length; |
||||
for(let i=0;i<len;i++){ |
||||
if(this.goodsList[i].selected) { |
||||
tmpList.push(this.goodsList[i]); |
||||
} |
||||
} |
||||
if(tmpList.length<1){ |
||||
uni.showToast({ |
||||
title:'请选择商品结算', |
||||
icon:'none' |
||||
}); |
||||
return ; |
||||
} |
||||
uni.setStorage({ |
||||
key:'buylist', |
||||
data:tmpList, |
||||
success: () => { |
||||
uni.navigateTo({ |
||||
url:'../../order/confirmation' |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
//删除商品 |
||||
deleteGoods(id){ |
||||
let len = this.goodsList.length; |
||||
for(let i=0;i<len;i++){ |
||||
if(id==this.goodsList[i].id){ |
||||
this.goodsList.splice(i, 1); |
||||
break; |
||||
} |
||||
} |
||||
this.selectedList.splice(this.selectedList.indexOf(id), 1); |
||||
this.sum(); |
||||
this.oldIndex = null; |
||||
this.theIndex = null; |
||||
}, |
||||
// 删除商品s |
||||
deleteList(){ |
||||
let len = this.selectedList.length; |
||||
while (this.selectedList.length>0) |
||||
{ |
||||
this.deleteGoods(this.selectedList[0]); |
||||
} |
||||
this.selectedList = []; |
||||
this.isAllselected = this.selectedList.length == this.goodsList.length && this.goodsList.length>0; |
||||
this.sum(); |
||||
}, |
||||
// 选中商品 |
||||
selected(index){ |
||||
this.goodsList[index].selected = this.goodsList[index].selected?false:true; |
||||
let i = this.selectedList.indexOf(this.goodsList[index].id); |
||||
i>-1?this.selectedList.splice(i, 1):this.selectedList.push(this.goodsList[index].id); |
||||
this.isAllselected = this.selectedList.length == this.goodsList.length; |
||||
this.sum(); |
||||
}, |
||||
//全选 |
||||
allSelect(){ |
||||
let len = this.goodsList.length; |
||||
let arr = []; |
||||
for(let i=0;i<len;i++){ |
||||
this.goodsList[i].selected = this.isAllselected? false : true; |
||||
arr.push(this.goodsList[i].id); |
||||
} |
||||
this.selectedList = this.isAllselected?[]:arr; |
||||
this.isAllselected = this.isAllselected||this.goodsList.length==0?false : true; |
||||
this.sum(); |
||||
}, |
||||
// 减少数量 |
||||
sub(index){ |
||||
if(this.goodsList[index].number<=1){ |
||||
return; |
||||
} |
||||
this.goodsList[index].number--; |
||||
this.sum(); |
||||
}, |
||||
// 增加数量 |
||||
add(index){ |
||||
this.goodsList[index].number++; |
||||
this.sum(); |
||||
}, |
||||
// 合计 |
||||
sum(e,index){ |
||||
this.sumPrice=0; |
||||
let len = this.goodsList.length; |
||||
for(let i=0;i<len;i++){ |
||||
if(this.goodsList[i].selected) { |
||||
if(e && i==index){ |
||||
this.sumPrice = this.sumPrice + (e.detail.value*this.goodsList[i].price); |
||||
}else{ |
||||
this.sumPrice = this.sumPrice + (this.goodsList[i].number*this.goodsList[i].price); |
||||
} |
||||
} |
||||
} |
||||
this.sumPrice = this.sumPrice.toFixed(2); |
||||
}, |
||||
discard() { |
||||
//丢弃 |
||||
} |
||||
|
||||
|
||||
} |
||||
} |
||||
</script> |
||||
<style lang="scss"> |
||||
page{position: relative;background-color: #fff;} |
||||
.checkbox-box{ |
||||
display: flex; |
||||
align-items: center; |
||||
.checkbox{ |
||||
width: 35upx; |
||||
height: 35upx; |
||||
border-radius: 100%; |
||||
border: solid 2upx #0083f5; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.on{ |
||||
width: 25upx; |
||||
height: 25upx; |
||||
border-radius: 100%; |
||||
background-color: #0083f5; |
||||
} |
||||
} |
||||
.text{ |
||||
font-size: 28upx; |
||||
margin-left: 10upx; |
||||
} |
||||
} |
||||
.status { |
||||
width: 100%; |
||||
height: 0; |
||||
position: fixed; |
||||
z-index: 10; |
||||
background-color: #fff; |
||||
top: 0; |
||||
/* #ifdef APP-PLUS */ |
||||
height: var(--status-bar-height);//覆盖样式 |
||||
/* #endif */ |
||||
} |
||||
|
||||
.header{ |
||||
width: 92%; |
||||
padding: 0 4%; |
||||
height: 100upx; |
||||
display: flex; |
||||
align-items: center; |
||||
position: fixed; |
||||
top: 0; |
||||
z-index: 10; |
||||
background-color: #fff; |
||||
/* #ifdef APP-PLUS */ |
||||
top: var(--status-bar-height); |
||||
/* #endif */ |
||||
.title{ |
||||
font-size: 36upx; |
||||
} |
||||
|
||||
} |
||||
.place{ |
||||
|
||||
background-color: #ffffff; |
||||
height: 100upx; |
||||
/* #ifdef APP-PLUS */ |
||||
margin-top: var(--status-bar-height); |
||||
/* #endif */ |
||||
} |
||||
.goods-list{ |
||||
width: 100%; |
||||
padding: 20upx 0 120upx 0; |
||||
.tis{ |
||||
width: 100%; |
||||
height: 60upx; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-size: 32upx; |
||||
} |
||||
.row{ |
||||
width: calc(92%); |
||||
height: calc(22vw + 40upx); |
||||
margin: 20upx auto; |
||||
|
||||
border-radius: 15upx; |
||||
box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1); |
||||
display: flex; |
||||
align-items: center; |
||||
position: relative; |
||||
overflow: hidden; |
||||
z-index: 4; |
||||
border: 0; |
||||
.menu{ |
||||
.icon{ |
||||
color: #fff; |
||||
// font-size: 25upx; |
||||
} |
||||
position: absolute; |
||||
width: 30%; |
||||
height: 100%; |
||||
right: 0; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
background-color: red; |
||||
color: #fff; |
||||
z-index: 2; |
||||
} |
||||
.carrier{ |
||||
@keyframes showMenu { |
||||
0% {transform: translateX(0);}100% {transform: translateX(-30%);} |
||||
} |
||||
@keyframes closeMenu { |
||||
0% {transform: translateX(-30%);}100% {transform: translateX(0);} |
||||
} |
||||
&.open{ |
||||
animation: showMenu 0.25s linear both; |
||||
} |
||||
&.close{ |
||||
animation: closeMenu 0.15s linear both; |
||||
} |
||||
background-color: #fff; |
||||
.checkbox-box{ |
||||
padding-left: 20upx; |
||||
flex-shrink: 0; |
||||
height: 22vw; |
||||
margin-right: 20upx; |
||||
} |
||||
position: absolute; |
||||
width: 100%; |
||||
padding: 0 0; |
||||
height: 100%; |
||||
z-index: 3; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.goods-info{ |
||||
width: 100%; |
||||
display: flex; |
||||
padding-right: 20upx; |
||||
.img{ |
||||
width: 22vw; |
||||
height: 22vw; |
||||
border-radius: 10upx; |
||||
overflow: hidden; |
||||
flex-shrink: 0; |
||||
margin-right: 10upx; |
||||
image{ |
||||
width: 22vw; |
||||
height: 22vw; |
||||
} |
||||
} |
||||
.info{ |
||||
width: 100%; |
||||
height: 22vw; |
||||
overflow: hidden; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
position: relative; |
||||
.title{ |
||||
width: 100%; |
||||
font-size: 28upx; |
||||
display: -webkit-box; |
||||
-webkit-box-orient: vertical; |
||||
-webkit-line-clamp: 2; |
||||
// text-align: justify; |
||||
overflow: hidden; |
||||
} |
||||
.spec{ |
||||
font-size: 20upx; |
||||
background-color: #f3f3f3; |
||||
color: #a7a7a7; |
||||
height: 30upx; |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 0 10upx; |
||||
border-radius: 15upx; |
||||
margin-bottom: 20vw; |
||||
} |
||||
.price-number{ |
||||
position: absolute; |
||||
width: 100%; |
||||
bottom: 0upx; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: flex-end; |
||||
font-size: 28upx; |
||||
height: 60upx; |
||||
.price{ |
||||
} |
||||
.number{ |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: flex-end; |
||||
.input{ |
||||
width: 60upx; |
||||
height: 60upx; |
||||
margin: 0 10upx; |
||||
background-color: #f3f3f3; |
||||
input{ |
||||
width: 60upx; |
||||
height: 60upx; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
text-align: center; |
||||
font-size: 26upx; |
||||
} |
||||
} |
||||
.sub ,.add{ |
||||
width: 45upx; |
||||
height: 45upx; |
||||
background-color: #f3f3f3; |
||||
border-radius: 5upx; |
||||
.icon{ |
||||
font-size: 22upx; |
||||
width: 45upx; |
||||
height: 45upx; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.footer{ |
||||
width: 92%; |
||||
padding: 0 4%; |
||||
background-color: #fbfbfb; |
||||
height: 100upx; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
font-size: 28upx; |
||||
position: fixed; |
||||
bottom: 0upx; |
||||
z-index: 5; |
||||
.delBtn{ |
||||
border: solid 1upx #0083f5; |
||||
color: #0083f5; |
||||
padding: 0 30upx; |
||||
height: 50upx; |
||||
border-radius: 30upx; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
.settlement{ |
||||
width: 60%; |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
align-items: center; |
||||
.sum{ |
||||
width: 50%; |
||||
font-size: 28upx; |
||||
margin-right: 10upx; |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
.money{ |
||||
font-weight: 600; |
||||
} |
||||
} |
||||
.btn{ |
||||
padding: 0 30upx; |
||||
height: 50upx; |
||||
background-color: #0083f5; |
||||
color: #fff; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
border-radius: 30upx; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,239 +0,0 @@ |
||||
<template> |
||||
<view> |
||||
<view class="content"> |
||||
<view class="list"> |
||||
<view class="row" v-for="(row,index) in addressList" :key="index" @tap="select(row)"> |
||||
<view class="left"> |
||||
<view class="head"> |
||||
{{row.head}} |
||||
</view> |
||||
</view> |
||||
<view class="center"> |
||||
<view class="name-tel"> |
||||
<view class="name">{{row.name}}</view> |
||||
<view class="tel">{{row.tel}}</view> |
||||
<view class="default" v-if="row.isDefault"> |
||||
默认 |
||||
</view> |
||||
</view> |
||||
<view class="address"> |
||||
{{row.address.region.label}} {{row.address.detailed}} |
||||
</view> |
||||
</view> |
||||
<view class="right"> |
||||
<view class="icon bianji" @tap.stop="edit(row)"> |
||||
|
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="add"> |
||||
<view class="btn" @tap="add"> |
||||
<view class="icon tianjia"></view>新增地址 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
isSelect:false, |
||||
addressList:[ |
||||
{id:1,name:"大黑哥",head:"大",tel:"18816881688",address:{region:{"label":"广东省-深圳市-福田区","value":[18,2,1],"cityCode":"440304"},detailed:'深南大道1111号无名摩登大厦6楼A2'},isDefault:true}, |
||||
{id:2,name:"大黑哥",head:"大",tel:"15812341234",address:{region:{"label":"广东省-深圳市-福田区","value":[18,2,1],"cityCode":"440304"},detailed:'深北小道2222号有名公寓502'},isDefault:false}, |
||||
{id:3,name:"老大哥",head:"老",tel:"18155467897",address:{region:{"label":"广东省-深圳市-福田区","value":[18,2,1],"cityCode":"440304"},detailed:'深南大道1111号无名摩登大厦6楼A2'},isDefault:false}, |
||||
{id:4,name:"王小妹",head:"王",tel:"13425654895",address:{region:{"label":"广东省-深圳市-福田区","value":[18,2,1],"cityCode":"440304"},detailed:'深南大道1111号无名摩登大厦6楼A2'},isDefault:false}, |
||||
] |
||||
}; |
||||
}, |
||||
onShow() { |
||||
|
||||
uni.getStorage({ |
||||
key:'delAddress', |
||||
success: (e) => { |
||||
let len = this.addressList.length; |
||||
if(e.data.hasOwnProperty('id')){ |
||||
for(let i=0;i<len;i++){ |
||||
if(this.addressList[i].id==e.data.id){ |
||||
this.addressList.splice(i,1); |
||||
break; |
||||
} |
||||
} |
||||
} |
||||
uni.removeStorage({ |
||||
key:'delAddress' |
||||
}) |
||||
} |
||||
}) |
||||
uni.getStorage({ |
||||
key:'saveAddress', |
||||
success: (e) => { |
||||
let len = this.addressList.length; |
||||
if(e.data.hasOwnProperty('id')){ |
||||
for(let i=0;i<len;i++){ |
||||
if(this.addressList[i].id==e.data.id){ |
||||
this.addressList.splice(i,1,e.data); |
||||
break; |
||||
} |
||||
} |
||||
}else{ |
||||
let lastid = this.addressList[len-1]; |
||||
lastid++; |
||||
e.data.id = lastid; |
||||
this.addressList.push(e.data); |
||||
} |
||||
uni.removeStorage({ |
||||
key:'saveAddress' |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
onLoad(e) { |
||||
if(e.type=='select'){ |
||||
this.isSelect = true; |
||||
} |
||||
}, |
||||
methods:{ |
||||
edit(row){ |
||||
uni.setStorage({ |
||||
key:'address', |
||||
data:row, |
||||
success() { |
||||
uni.navigateTo({ |
||||
url:"edit/edit?type=edit" |
||||
}) |
||||
} |
||||
}); |
||||
|
||||
}, |
||||
add(){ |
||||
uni.navigateTo({ |
||||
url:"edit/edit?type=add" |
||||
}) |
||||
}, |
||||
select(row){ |
||||
//是否需要返回地址(从订单确认页跳过来选收货地址) |
||||
if(!this.isSelect){ |
||||
return ; |
||||
} |
||||
uni.setStorage({ |
||||
key:'selectAddress', |
||||
data:row, |
||||
success() { |
||||
uni.navigateBack(); |
||||
} |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
view{ |
||||
display: flex; |
||||
} |
||||
.icon { |
||||
// &.bianji { |
||||
// &:before{content:"\e61b";} |
||||
// } |
||||
// &.tianjia { |
||||
// &:before{content:"\e81a";} |
||||
// } |
||||
} |
||||
.add{ |
||||
position: fixed; |
||||
bottom: 0; |
||||
width: 100%; |
||||
height: 120upx; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.btn{ |
||||
box-shadow: 0upx 5upx 10upx rgba(0,0,0,0.4); |
||||
width: 70%; |
||||
height: 80upx; |
||||
border-radius: 80upx; |
||||
background-color: #0083f5; |
||||
color: #fff; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.icon{ |
||||
height: 80upx; |
||||
color: #fff; |
||||
font-size: 30upx; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
font-size: 30upx; |
||||
} |
||||
} |
||||
.list{ |
||||
flex-wrap: wrap; |
||||
.row{ |
||||
width: 96%; |
||||
padding: 20upx 2%; |
||||
.left{ |
||||
width: 90upx; |
||||
flex-shrink: 0; |
||||
align-items: center; |
||||
.head{ |
||||
width: 70upx; |
||||
height: 70upx; |
||||
background:linear-gradient(to right,#ccc,#aaa); |
||||
color: #fff; |
||||
justify-content: center; |
||||
align-items: center; |
||||
border-radius: 60upx; |
||||
font-size: 35upx; |
||||
} |
||||
} |
||||
.center{ |
||||
width: 100%; |
||||
flex-wrap: wrap; |
||||
.name-tel{ |
||||
width: 100%; |
||||
align-items: baseline; |
||||
.name{ |
||||
font-size: 34upx; |
||||
} |
||||
.tel{ |
||||
margin-left: 30upx; |
||||
font-size: 24upx; |
||||
color: #777; |
||||
} |
||||
.default{ |
||||
|
||||
font-size: 22upx; |
||||
|
||||
background-color: #0083f5; |
||||
color: #fff; |
||||
padding: 0 18upx; |
||||
border-radius: 24upx; |
||||
margin-left: 20upx; |
||||
} |
||||
} |
||||
.address{ |
||||
width: 100%; |
||||
font-size: 24upx; |
||||
align-items: baseline; |
||||
color: #777; |
||||
} |
||||
} |
||||
.right{ |
||||
flex-shrink: 0; |
||||
align-items: center; |
||||
margin-left: 20upx; |
||||
.icon{ |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 80upx; |
||||
height: 60upx; |
||||
border-left: solid 1upx #aaa; |
||||
font-size: 40upx; |
||||
color: #777; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,261 +0,0 @@ |
||||
<template> |
||||
<view> |
||||
<view class="content"> |
||||
<view class="row"> |
||||
<view class="nominal"> |
||||
收件人 |
||||
</view> |
||||
<view class="input"> |
||||
<input placeholder="请输入收件人姓名" type="text" v-model="name" /> |
||||
</view> |
||||
</view> |
||||
<view class="row"> |
||||
<view class="nominal"> |
||||
电话号码 |
||||
</view> |
||||
<view class="input"> |
||||
<input placeholder="请输入收件人电话号码" type="text" v-model="tel" /> |
||||
</view> |
||||
</view> |
||||
<view class="row"> |
||||
<view class="nominal"> |
||||
所在地区 |
||||
</view> |
||||
<view class="input" @tap="chooseCity"> |
||||
{{region.label}} |
||||
</view> |
||||
|
||||
</view> |
||||
<view class="row"> |
||||
<view class="nominal"> |
||||
详细地址 |
||||
</view> |
||||
<view class="input"> |
||||
<textarea v-model="detailed" auto-height="true" placeholder="输入详细地址"></textarea> |
||||
</view> |
||||
</view> |
||||
<view class="row"> |
||||
<view class="nominal"> |
||||
设置默认地址 |
||||
</view> |
||||
<view class="input switch"> |
||||
<switch color="#0083f5" :checked="isDefault" @change=isDefaultChange /> |
||||
</view> |
||||
</view> |
||||
<view class="row" v-if="editType=='edit'" @tap="del"> |
||||
<view class="del"> |
||||
删除收货地址 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="save" @tap="save"> |
||||
<view class="btn"> |
||||
保存地址 |
||||
</view> |
||||
</view> |
||||
<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValue" @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue' |
||||
export default { |
||||
components: { |
||||
mpvueCityPicker |
||||
}, |
||||
data() { |
||||
return { |
||||
editType:'edit', |
||||
id:'', |
||||
name:'', |
||||
tel:'', |
||||
detailed:'', |
||||
isDefault:false, |
||||
cityPickerValue: [0, 0, 1], |
||||
themeColor: '#007AFF', |
||||
region:{label:"请点击选择地址",value:[],cityCode:""} |
||||
}; |
||||
}, |
||||
methods: { |
||||
onCancel(e) { |
||||
console.log(e) |
||||
}, |
||||
chooseCity() { |
||||
this.$refs.mpvueCityPicker.show() |
||||
}, |
||||
onConfirm(e) { |
||||
this.region = e; |
||||
this.cityPickerValue = e.value; |
||||
}, |
||||
isDefaultChange(e){ |
||||
this.isDefault = e.detail.value; |
||||
}, |
||||
del(){ |
||||
uni.showModal({ |
||||
title: '删除提示', |
||||
content: '你将删除这个收货地址', |
||||
success: (res)=>{ |
||||
if (res.confirm) { |
||||
uni.setStorage({ |
||||
key:'delAddress', |
||||
data:{id:this.id}, |
||||
success() { |
||||
uni.navigateBack(); |
||||
} |
||||
}) |
||||
} else if (res.cancel) { |
||||
console.log('用户点击取消'); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
}, |
||||
save(){ |
||||
let data={"name":this.name,"head":this.name.substr(0,1),"tel":this.tel,"address":{"region":this.region,"detailed":this.detailed},"isDefault":this.isDefault} |
||||
if(this.editType=='edit'){ |
||||
data.id = this.id |
||||
} |
||||
if(!data.name){ |
||||
uni.showToast({title:'请输入收件人姓名',icon:'none'}); |
||||
return ; |
||||
} |
||||
if(!data.tel){ |
||||
uni.showToast({title:'请输入收件人电话号码',icon:'none'}); |
||||
return ; |
||||
} |
||||
if(!data.address.detailed){ |
||||
uni.showToast({title:'请输入收件人详细地址',icon:'none'}); |
||||
return ; |
||||
} |
||||
if(data.address.region.value.length==0){ |
||||
uni.showToast({title:'请选择收件地址',icon:'none'}); |
||||
return ; |
||||
} |
||||
uni.showLoading({ |
||||
title:'正在提交' |
||||
}) |
||||
//实际应用中请提交ajax,模板定时器模拟提交效果 |
||||
setTimeout(()=>{ |
||||
uni.setStorage({ |
||||
key:'saveAddress', |
||||
data:data, |
||||
success() { |
||||
uni.hideLoading(); |
||||
uni.navigateBack(); |
||||
} |
||||
}) |
||||
},300) |
||||
|
||||
|
||||
} |
||||
}, |
||||
onLoad(e) { |
||||
//获取传递过来的参数 |
||||
|
||||
this.editType = e.type; |
||||
if(e.type=='edit'){ |
||||
uni.getStorage({ |
||||
key:'address', |
||||
success: (e) => { |
||||
this.id = e.data.id; |
||||
this.name = e.data.name; |
||||
this.tel = e.data.tel; |
||||
this.detailed = e.data.address.detailed; |
||||
this.isDefault = e.data.isDefault; |
||||
this.cityPickerValue = e.data.address.region.value; |
||||
this.region = e.data.address.region; |
||||
} |
||||
}) |
||||
} |
||||
|
||||
}, |
||||
onBackPress() { |
||||
if (this.$refs.mpvueCityPicker.showPicker) { |
||||
this.$refs.mpvueCityPicker.pickerCancel(); |
||||
return true; |
||||
} |
||||
}, |
||||
onUnload() { |
||||
if (this.$refs.mpvueCityPicker.showPicker) { |
||||
this.$refs.mpvueCityPicker.pickerCancel() |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="scss"> |
||||
|
||||
.save{ |
||||
view{ |
||||
display: flex; |
||||
} |
||||
position: fixed; |
||||
bottom: 0; |
||||
width: 100%; |
||||
height: 120upx; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.btn{ |
||||
box-shadow: 0upx 5upx 10upx rgba(0,0,0,0.4); |
||||
width: 70%; |
||||
height: 80upx; |
||||
border-radius: 80upx; |
||||
background-color: #0083f5; |
||||
color: #fff; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.icon{ |
||||
height: 80upx; |
||||
color: #fff; |
||||
font-size: 30upx; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
font-size: 30upx; |
||||
} |
||||
} |
||||
.content{ |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
view{ |
||||
display: flex; |
||||
} |
||||
.row{ |
||||
width: 94%; |
||||
|
||||
margin: 0 3%; |
||||
border-top: solid 1upx #eee; |
||||
.nominal{ |
||||
width: 30%; |
||||
height: 120upx; |
||||
font-weight: 200; |
||||
font-size: 30upx; |
||||
align-items: center; |
||||
} |
||||
.input{ |
||||
width: 70%; |
||||
padding: 20upx 0; |
||||
align-items: center; |
||||
font-size: 30upx; |
||||
&.switch{ |
||||
justify-content: flex-end; |
||||
} |
||||
.textarea{ |
||||
margin: 20upx 0; |
||||
min-height: 120upx; |
||||
} |
||||
} |
||||
.del{ |
||||
width: 100%; |
||||
height: 100upx; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-size: 36upx; |
||||
color: #0083f5; |
||||
background-color: rgba(255,0,0,0.05); |
||||
border-bottom: solid 1upx #eee; |
||||
} |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
@ -1,396 +0,0 @@ |
||||
<template> |
||||
<view> |
||||
<view class="tabr" :style="{top:headerTop}"> |
||||
<view :class="{on:typeClass=='goods'}" @tap="switchType('goods')">商品({{goodsList.length}})</view> |
||||
<view :class="{on:typeClass=='shop'}" @tap="switchType('shop')">店铺({{shopList.length}})</view> |
||||
<view class="border" :class="typeClass"></view> |
||||
</view> |
||||
<view class="place" ></view> |
||||
<view class="list"> |
||||
<!-- 优惠券列表 --> |
||||
<view class="sub-list goods" :class="subState"> |
||||
<view class="tis" v-if="goodsList.length==0">没有数据~</view> |
||||
<view class="row" v-for="(row,index) in goodsList" :key="index" > |
||||
<!-- 删除按钮 --> |
||||
<view class="menu" @tap.stop="deleteCoupon(row.id,goodsList)"> |
||||
<view class="icon shanchu"></view> |
||||
</view> |
||||
<!-- content --> |
||||
<view class="carrier" :class="[typeClass=='goods'?theIndex==index?'open':oldIndex==index?'close':'':'']" @touchstart="touchStart(index,$event)" @touchmove="touchMove(index,$event)" @touchend="touchEnd(index,$event)"> |
||||
<view class="goods-info" @tap="toGoods(row)"> |
||||
<view class="img"> |
||||
<image :src="row.img"></image> |
||||
</view> |
||||
<view class="info"> |
||||
<view class="title">{{row.name}}</view> |
||||
<view class="price-number"> |
||||
<view class="keep-num"> |
||||
905人收藏 |
||||
</view> |
||||
<view class="price">￥{{row.price}}</view> |
||||
|
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="sub-list shop" :class="subState"> |
||||
<view class="tis" v-if="shopList.length==0">没有数据~</view> |
||||
<view class="row" v-for="(row,index) in shopList" :key="index" > |
||||
<!-- 删除按钮 --> |
||||
<view class="menu" @tap.stop="deleteCoupon(row.id,shopList)"> |
||||
<view class="icon shanchu"></view> |
||||
</view> |
||||
<!-- content --> |
||||
<view class="carrier" :class="[typeClass=='shop'?theIndex==index?'open':oldIndex==index?'close':'':'']" @touchstart="touchStart(index,$event)" @touchmove="touchMove(index,$event)" @touchend="touchEnd(index,$event)"> |
||||
<view class="left"> |
||||
<image :src="row.img"></image> |
||||
</view> |
||||
<view class="right"> |
||||
<view class="name"> |
||||
{{row.name}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
goodsList:[ |
||||
{id:1,img:'/static/img/goods/p1.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false}, |
||||
{id:2,img:'/static/img/goods/p1.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false}, |
||||
{id:3,img:'/static/img/goods/p1.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false}, |
||||
], |
||||
shopList:[ |
||||
{id:1,name:"冰鲜专卖店",img:"/static/img/shop/1.jpg"}, |
||||
{id:2,name:"果蔬天下",img:"/static/img/shop/2.jpg"}, |
||||
{id:3,name:"办公耗材用品店",img:"/static/img/shop/3.jpg"}, |
||||
{id:4,name:"天天看好书",img:"/static/img/shop/4.jpg"} |
||||
], |
||||
headerTop:0, |
||||
//控制滑动效果 |
||||
typeClass:'goods', |
||||
subState:'', |
||||
theIndex:null, |
||||
oldIndex:null, |
||||
isStop:false |
||||
} |
||||
}, |
||||
onPageScroll(e){ |
||||
|
||||
}, |
||||
//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true |
||||
onPullDownRefresh() { |
||||
setTimeout(function () { |
||||
uni.stopPullDownRefresh(); |
||||
}, 1000); |
||||
}, |
||||
onLoad() { |
||||
//兼容H5下排序栏位置 |
||||
// #ifdef H5 |
||||
//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。 |
||||
let Timer = setInterval(()=>{ |
||||
let uniHead = document.getElementsByTagName('uni-page-head'); |
||||
if(uniHead.length>0){ |
||||
this.headerTop = uniHead[0].offsetHeight+'px'; |
||||
clearInterval(Timer);//清除定时器 |
||||
} |
||||
},1); |
||||
// #endif |
||||
}, |
||||
methods: { |
||||
switchType(type){ |
||||
if(this.typeClass==type){ |
||||
return ; |
||||
} |
||||
uni.pageScrollTo({ |
||||
scrollTop:0, |
||||
duration:0 |
||||
}) |
||||
this.typeClass = type; |
||||
this.subState = this.typeClass==''?'':'show'+type; |
||||
setTimeout(()=>{ |
||||
this.oldIndex = null; |
||||
this.theIndex = null; |
||||
this.subState = this.typeClass=='goods'?'':this.subState; |
||||
},200) |
||||
}, |
||||
//控制左滑删除效果-begin |
||||
touchStart(index,event){ |
||||
//多点触控不触发 |
||||
if(event.touches.length>1){ |
||||
this.isStop = true; |
||||
return ; |
||||
} |
||||
this.oldIndex = this.theIndex; |
||||
this.theIndex = null; |
||||
//初始坐标 |
||||
this.initXY = [event.touches[0].pageX,event.touches[0].pageY]; |
||||
}, |
||||
touchMove(index,event){ |
||||
//多点触控不触发 |
||||
if(event.touches.length>1){ |
||||
this.isStop = true; |
||||
return ; |
||||
} |
||||
let moveX = event.touches[0].pageX - this.initXY[0]; |
||||
let moveY = event.touches[0].pageY - this.initXY[1]; |
||||
|
||||
if(this.isStop||Math.abs(moveX)<5){ |
||||
return ; |
||||
} |
||||
if (Math.abs(moveY) > Math.abs(moveX)){ |
||||
// 竖向滑动-不触发左滑效果 |
||||
this.isStop = true; |
||||
return; |
||||
} |
||||
|
||||
if(moveX<0){ |
||||
this.theIndex = index; |
||||
this.isStop = true; |
||||
}else if(moveX>0){ |
||||
if(this.theIndex!=null&&this.oldIndex==this.theIndex){ |
||||
this.oldIndex = index; |
||||
this.theIndex = null; |
||||
this.isStop = true; |
||||
setTimeout(()=>{ |
||||
this.oldIndex = null; |
||||
},150) |
||||
} |
||||
} |
||||
}, |
||||
|
||||
touchEnd(index,$event){ |
||||
//解除禁止触发状态 |
||||
this.isStop = false; |
||||
}, |
||||
|
||||
//删除商品 |
||||
deleteCoupon(id,List){ |
||||
let len = List.length; |
||||
for(let i=0;i<len;i++){ |
||||
if(id==List[i].id){ |
||||
List.splice(i, 1); |
||||
break; |
||||
} |
||||
} |
||||
this.oldIndex = null; |
||||
this.theIndex = null; |
||||
}, |
||||
|
||||
discard() { |
||||
//丢弃 |
||||
} |
||||
|
||||
|
||||
} |
||||
} |
||||
</script> |
||||
<style lang="scss"> |
||||
view{ |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
|
||||
} |
||||
page{position: relative;background-color: #f5f5f5;} |
||||
|
||||
.hidden{ |
||||
display: none !important; |
||||
} |
||||
.place{ |
||||
width: 100%; |
||||
height: 95upx; |
||||
} |
||||
.tabr{ |
||||
background-color: #fff; |
||||
width: 94%; |
||||
height: 95upx; |
||||
padding: 0 3%; |
||||
border-bottom: solid 1upx #dedede; |
||||
position: fixed; |
||||
top: 0; |
||||
z-index: 10; |
||||
view{ |
||||
width: 50%; |
||||
height: 90upx; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-size: 32upx; |
||||
color: #999; |
||||
} |
||||
.on{ |
||||
color: #0083f5; |
||||
} |
||||
.border{ |
||||
height: 4upx; |
||||
background-color: #0083f5; |
||||
transition: all .3s ease-out; |
||||
&.shop{ |
||||
transform: translate3d(100%,0,0); |
||||
} |
||||
} |
||||
|
||||
} |
||||
.list{ |
||||
width: 100%; |
||||
display: block; |
||||
position: relative; |
||||
} |
||||
@keyframes showGoods { |
||||
0% {transform: translateX(-100%);}100% {transform: translateX(0);} |
||||
} |
||||
@keyframes showShop { |
||||
0% {transform: translateX(0);}100% {transform: translateX(-100%);} |
||||
} |
||||
.sub-list{ |
||||
&.shop{ |
||||
position: absolute; |
||||
top: 0; |
||||
left:100%; |
||||
display: none; |
||||
} |
||||
&.showgoods{ |
||||
display: flex; |
||||
animation: showGoods 0.20s linear both; |
||||
} |
||||
&.showshop{ |
||||
display: flex; |
||||
animation: showShop 0.20s linear both; |
||||
} |
||||
width: 100%; |
||||
padding: 20upx 0 120upx 0; |
||||
.tis{ |
||||
width: 100%; |
||||
height: 60upx; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-size: 32upx; |
||||
} |
||||
&.shop{ |
||||
.row{ |
||||
height: 20vw; |
||||
.left{ |
||||
width: 20vw; |
||||
height: 20vw; |
||||
padding-left: 20upx; |
||||
align-items: center; |
||||
image{ |
||||
width: 18vw; |
||||
height: 18vw; |
||||
border-radius: 100%; |
||||
} |
||||
} |
||||
.right{ |
||||
height: 20vw; |
||||
align-items: center; |
||||
font-size: 32upx; |
||||
} |
||||
} |
||||
} |
||||
.row{ |
||||
width: 100%; |
||||
height: 30vw; |
||||
align-items: center; |
||||
position: relative; |
||||
overflow: hidden; |
||||
border-bottom: solid 1upx #dedede; |
||||
.menu{ |
||||
.icon{ |
||||
color: #fff; |
||||
font-size:50upx; |
||||
} |
||||
position: absolute; |
||||
width: 28%; |
||||
height: 100%; |
||||
right: 0; |
||||
justify-content: center; |
||||
align-items: center; |
||||
background-color: red; |
||||
color: #fff; |
||||
z-index: 2; |
||||
} |
||||
|
||||
.carrier{ |
||||
@keyframes showMenu { |
||||
0% {transform: translateX(0);}100% {transform: translateX(-28%);} |
||||
} |
||||
@keyframes closeMenu { |
||||
0% {transform: translateX(-28%);}100% {transform: translateX(0);} |
||||
} |
||||
&.open{ |
||||
animation: showMenu 0.25s linear both; |
||||
} |
||||
&.close{ |
||||
animation: closeMenu 0.15s linear both; |
||||
} |
||||
background-color: #fff; |
||||
|
||||
position: absolute; |
||||
width: 100%; |
||||
padding: 0 0; |
||||
height: 100%; |
||||
z-index: 3; |
||||
flex-wrap: nowrap; |
||||
.goods-info{ |
||||
width: calc(100% - 40upx); |
||||
padding: 20upx; |
||||
flex-wrap: nowrap; |
||||
.img{ |
||||
width: calc(30vw - 40upx); |
||||
height: calc(30vw - 40upx); |
||||
border-radius: 10upx; |
||||
overflow: hidden; |
||||
flex-shrink: 0; |
||||
margin-right: 20upx; |
||||
image{ |
||||
width: calc(30vw - 40upx); |
||||
height: calc(30vw - 40upx); |
||||
} |
||||
} |
||||
.info{ |
||||
width: 100%; |
||||
height: calc(30vw - 40upx); |
||||
overflow: hidden; |
||||
flex-wrap: wrap; |
||||
align-content: space-between; |
||||
position: relative; |
||||
.title{ |
||||
width: 100%; |
||||
font-size: 28upx; |
||||
display: -webkit-box; |
||||
-webkit-box-orient: vertical; |
||||
-webkit-line-clamp: 2; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.price-number{ |
||||
width: 100%; |
||||
justify-content: space-between; |
||||
align-items: baseline; |
||||
|
||||
.keep-num{ |
||||
font-size: 26upx; |
||||
color: #999; |
||||
} |
||||
.price{ |
||||
font-size: 30upx; |
||||
color: #0083f5; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
</style> |
||||
@ -1,135 +0,0 @@ |
||||
<template> |
||||
<view> |
||||
<view class="content"> |
||||
<view class="list"> |
||||
<view class="row"> |
||||
<view class="title">头像</view> |
||||
<view class="right"><view class="tis"> |
||||
<image src="/static/img/face.jpg" mode="widthFix"></image> |
||||
</view><view class="icon xiangyou"></view></view> |
||||
</view> |
||||
<view class="row"> |
||||
<view class="title">昵称</view> |
||||
<view class="right"><view class="tis">大黑哥</view><view class="icon xiangyou"></view></view> |
||||
</view> |
||||
<view class="row"> |
||||
<view class="title">个性签名</view> |
||||
<view class="right"><view class="tis">这人太懒了，什么都不写</view><view class="icon xiangyou"></view></view> |
||||
</view> |
||||
<view class="row"> |
||||
<view class="title">收货地址</view> |
||||
<view class="right"><view class="tis"></view><view class="icon xiangyou"></view></view> |
||||
</view> |
||||
<view class="row"> |
||||
<view class="title">账户安全</view> |
||||
<view class="right"><view class="tis"></view><view class="icon xiangyou"></view></view> |
||||
</view> |
||||
</view> |
||||
<view class="list"> |
||||
<view class="row"> |
||||
<view class="title">通知提醒</view> |
||||
<view class="right"><view class="tis"></view><view class="icon xiangyou"></view></view> |
||||
</view> |
||||
<view class="row"> |
||||
<view class="title">支付设置</view> |
||||
<view class="right"><view class="tis"></view><view class="icon xiangyou"></view></view> |
||||
</view> |
||||
<view class="row"> |
||||
<view class="title">通用</view> |
||||
<view class="right"><view class="tis"></view><view class="icon xiangyou"></view></view> |
||||
</view> |
||||
</view> |
||||
<view class="list"> |
||||
<view class="row"> |
||||
<view class="title">版本升级</view> |
||||
<view class="right"><view class="tis">v1.0.0</view><view class="icon xiangyou"></view></view> |
||||
</view> |
||||
<view class="row"> |
||||
<view class="title">清除缓存</view> |
||||
<view class="right"><view class="tis"></view><view class="icon xiangyou"></view></view> |
||||
</view> |
||||
<view class="row"> |
||||
<view class="title">问题反馈</view> |
||||
<view class="right"><view class="tis"></view><view class="icon xiangyou"></view></view> |
||||
</view> |
||||
<view class="row"> |
||||
<view class="title">关于商城</view> |
||||
<view class="right"><view class="tis"></view><view class="icon xiangyou"></view></view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
|
||||
}; |
||||
}, |
||||
methods: { |
||||
showType(tbIndex){ |
||||
this.tabbarIndex = tbIndex; |
||||
this.list = this.orderList[tbIndex]; |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
page{ |
||||
background-color: #f3f3f3; |
||||
} |
||||
|
||||
.icon { |
||||
font-size: 30upx; |
||||
|
||||
} |
||||
.content{ |
||||
padding-bottom: 20upx; |
||||
.list{ |
||||
width: 96%; |
||||
padding-left: 4%; |
||||
background-color: #fff; |
||||
margin-bottom: 20upx; |
||||
.row{ |
||||
widows: 100%; |
||||
min-height: 90upx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
border-bottom: solid 1upx #eee; |
||||
&:last-child{ |
||||
border-bottom: none; |
||||
} |
||||
.title{ |
||||
font-size: 32upx; |
||||
color: #333; |
||||
} |
||||
.right{ |
||||
display: flex; |
||||
align-items: center; |
||||
color: #999; |
||||
.tis{ |
||||
font-size: 26upx; |
||||
margin-right: 5upx; |
||||
max-height: 120upx; |
||||
image{ |
||||
width: 100upx; |
||||
height: 100upx; |
||||
border-radius: 100%; |
||||
margin: 10upx 0; |
||||
} |
||||
} |
||||
.icon{ |
||||
width: 40upx; |
||||
color: #cecece; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
|
Before Width: | Height: | Size: 113 KiB |
|
After Width: | Height: | Size: 927 B |
|
Before Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
Loading…
Reference in new issue