yangjie
/
high-mini
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
372 Commits
7 Branches
0 Tags
16 MiB
 
 
 
 
Tag: Branch: Tree: 1dbc0c1249
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '1dbc0c1249'
${ noResults }
high-mini/pages/settleAccounts/settleAccounts.vue

327 lines
7.5 KiB
Raw Blame History

<template>
<view class="pd-main backcor9 settleAccounts">
<!-- 地址 -->
<view class="select-address backcolorfff paading10 border-8r border-bt mart10 " @click="goAddress">
<view class="address-left font16">
<view class=" " >
重庆市渝中区不是的聚钓具偶家
</view>
<view class="color999 mart3" >
<text class="address-name">明明</text>
<text class="address-phone margle10">13563256324</text>
</view>
</view>
<view class="icon-ymt to-right font14"></view>
</view>
<!-- 选购的商品信息 -->
<view class=" backcolorfff paading10 border-8r border-bt mart10 " >
<!-- 及时达 -->
<!-- <view class="container-price select-address">
<view class="beizhu font16 ">
即时达:
</view>
<view class="beizhu font16 ">
<text class="fcorred">尽快送达,预计11:58送达</text><text class="icon-ymt to-right font14"></text>
</view>
</view> -->
<!-- 当有多个商品时 -->
<view class="po-ra" v-if="isMoreThanOne" @click="showPopup('goods')">
<view class="po-ra">
<scroll-view class="settle-goods" scroll-x="true" >
<view class="settle-con">
<view class="settle-img" v-for="item in goodsData.images">
<image class="st-img" :src="item" mode="aspectFill"></image>
</view>
</view>
</scroll-view>
<view class="fix-soon fcor666">
共{{goodsData.images.length}}件<text class="icon-ymt to-right font14 fcor666"></text>
</view>
</view>
</view>
<!-- 当只有一个商品时 -->
<view v-if="!isMoreThanOne">
<view class="settle-con">
<view class="settle-img" >
<image class="st-img" :src="goodsData.images[0]" mode="aspectFill"></image>
</view>
<view class="settle-msg">
<view class="settle-title marb5">
<text>云南高山荷兰豆160g</text>
<text class="font14 fcor666">共一件</text>
</view>
<view class="settle-title">
<text>¥2.99</text>
<text class="font14 fcor666">×1</text>
</view>
</view>
</view>
</view>
</view>
<!-- 金额费用 -->
<view class=" backcolorfff paading10 border-8r border-bt mart10 " >
<!-- 商品金额 -->
<view class="container-price select-address border-bt">
<view class="address-left ">
商品金额
</view>
<view class="to-right fontwig6">
¥22.97
</view>
</view>
<!-- 运费 -->
<view class="container-price select-address border-bt">
<view class="address-left ">
运费<text class="icon-ymt question font16 paddleft5 fcor666" @click="showPopup('freight')"></text>
</view>
<view class="to-right fontwig6">
¥6
</view>
</view>
<!-- 优惠券 -->
<view class="container-price select-address border-bt">
<view class="address-left ">
优惠券
</view>
<view @click="showPopup('coupon')" class="icon-ymt to-right font14">
</view>
</view>
<!-- 积分抵现 -->
<view class="container-price select-address border-bt">
<view class="address-left ">
<text @click="showPopup('integral')">积分抵现
<text class="icon-ymt question font16 paddleft5 fcor666"></text>
</text>
<view class="font14 fcor666">当前积分63,满500可用</view>
</view>
<view class="fontwig6 font14 fcor666">
暂无可用
</view>
<!-- <view class="icon-ymt to-right font14">
</view> -->
</view>
<!-- 总结算 -->
<view class="container-price select-address ">
<view class="address-left ">
</view>
<view class=" font14">
小计:<text class="fontwig6 font18 paddleft5">¥262.2</text>
</view>
</view>
</view>
<!-- 备注 -->
<view class=" backcolorfff paading10 border-8r border-bt mart10 " >
<view class="container-price select-address">
<view class="beizhu font16">
备注:
</view>
<view class="beizhu font14 fcor666">
{{noteValue.length}}/40
</view>
</view>
<view class="width100" >
<textarea class="border-8r backcor9 paading10 note" @blur="noteBlur" @input="noteInput" :focus="true" :disable-default-padding="false" v-model="noteValue" maxlength="40" placeholder="请输入备注信息" ></textarea>
</view>
</view>
<!-- 底部结算按钮 -->
<view class="tool-contain">
<view class="adressConfirm">
送至: {{'金科西城大院 5栋1714'}}
</view>
<view class="tool-right backcolorfff">
<view class="tool-jiesuan marRight10 ">
合计:<text class="fcorred">¥{{100}}</text>
</view>
<view class="jiesuan-btn fcorfff" @click.stop="settleAccount">
去支付
</view>
</view>
</view>
<detailPopup ref="detailPopup"></detailPopup>
</view>
</template>
<script>
import detailPopup from '@/pages/settleAccounts/detail-popup/detail-popup.vue'
export default {
data(){
return{
noteValue:'这是备注',
goodsData:{
"images": ["https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg","https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg","https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg","https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg","https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg"],
},
isMoreThanOne:false,
}
},
components:{
detailPopup
},
methods:{
goAddress(){
uni.navigateTo({
url:"/pages/address/address"
})
},
// 失去焦点
noteBlur(){
console.log(12)
},
noteInput(){
console.log(12)
},
//goods货品， freight运费,integral积分,coupon优惠券
showPopup(str){
this.$refs.detailPopup.show(str);
},
// 去支付按钮
settleAccount(){
// uni.navigateTo({
// url:"/pages/classify/order/pay"
// })
}
}
}
</script>
<style lang="scss" scoped>
// 地址
.select-address{
display: flex;
justify-content: space-between;
align-items: center;
}
.border-bt{
border-bottom: 1px solid #f6f6f6;
}
.container-price{
padding: 10px;
font-size: 16px;
}
//
.settleAccounts{
box-sizing: border-box;
padding-bottom: 110px;
}
//商品图片
.po-ra{
position: relative;
}
.settle-goods{
width: auto;
}
.settle-con{
display: flex;
justify-content: flex-start;
align-items: center;
.settle-img{
font-size: 0;
margin-left: 10px;
.st-img{
width: 82px;
height: 82px;
}
}
.settle-msg{
flex: 1;
padding: 0 10px;
.settle-title{
display: flex;
justify-content: space-between;
align-items: center;
}
}
}
.fix-soon{
position: absolute;
right: 0;
top:0;
width: 82px ;
height: 82px;
line-height: 82px;
opacity: 0.8;
background-color: #ffffff;
text-align: center;
}
//备注
.note{
width: auto;
}
// 底部结算按钮
.tool-contain{
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
}
.tool-right{
flex: 1;
display: flex;
justify-content: space-between;
padding: 10px;
align-items: center;
.tool-jiesuan{
}
.jiesuan-btn{
width: 200rpx;
height:40px;
line-height: 40px;
text-align: center;
border-radius: 20px;
background: linear-gradient(to right,#FFCC1E,#FF8F19);
}
}
// 底部地址确认
.adressConfirm{
height: 20px;
padding: 10px;
line-height: 20px;
background-color:#FEFBDA;
}
</style>