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