<template>
|
<div class="goods">
|
<!-- <div class="commodity-header">
|
<div class="pull-right" @click="edit()">
|
<span class="img" v-if="isshopping">编辑商品</span>
|
<span class="img" v-if="!isshopping">取消</span>
|
</div>
|
</div> -->
|
<div class="commodity-box">
|
<div class="commodity">
|
<div class="select weui-cells_checkbox">
|
<div class="weui-cell__ft">
|
<input type="checkbox" class="weui-check" name="weui-select" id="weui-select-id-画画" value="1" checked="checked" data-title="画画">
|
<span class="weui-icon-checked"></span>
|
</div>
|
</div>
|
<div style="position: relative;margin-left: 40px;">
|
<div class="img">
|
<img src="@/assets/images/detail.png" alt="">
|
</div>
|
<div class="detail">
|
<p class="name">Cache韩版打底衫</p>
|
<p class="selected">
|
<span>规格 红色 L码</span>
|
<span class="money pull-right">￥ 349</span>
|
</p>
|
<p>
|
<span class="weui-count">
|
<a class="weui-count__btn weui-count__decrease"></a>
|
<span class="weui-count__number">1</span>
|
<a class="weui-count__btn weui-count__increase"></a>
|
</span>
|
<span class="pull-right delete"><i class="fa fa-trash-o fa-lg"></i></span>
|
<span class="pull-right delete"><i class="fa fa-star fa-lg"></i></span>
|
<span class="pull-right delete"><i class="fa fa-star-o fa-lg"></i></span>
|
</p>
|
</div>
|
</div>
|
</div>
|
<div class="commodity">
|
<div class="select weui-cells_checkbox">
|
<div class="weui-cell__ft">
|
<input type="checkbox" class="weui-check" name="weui-select" id="weui-select-id-画画" value="1" checked="checked" data-title="画画">
|
<span class="weui-icon-checked"></span>
|
</div>
|
</div>
|
<div style="position: relative;margin-left: 40px;">
|
<div class="img">
|
<img src="@/assets/images/detail.png" alt="">
|
</div>
|
<div class="detail">
|
<p class="name">Cache韩版打底衫女短款时尚休闲动物图案短袖印花T恤女圆领</p>
|
<p class="selected">颜色 红色</p>
|
<p class="selected">尺码 L码</p>
|
</div>
|
<div class="valuation">
|
<p> </p>
|
<p class="money">￥ 349</p>
|
<p class="weui-count">
|
<a class="weui-count__btn weui-count__decrease"></a>
|
<input class="weui-count__number" type="number" value="1">
|
<a class="weui-count__btn weui-count__increase"></a>
|
</p>
|
</div>
|
</div>
|
</div>
|
<div class="commodity">
|
<div class="select weui-cells_checkbox">
|
<div class="weui-cell__ft">
|
<input type="checkbox" class="weui-check" name="weui-select" id="weui-select-id-画画" value="1" data-title="画画">
|
<span class="weui-icon-checked"></span>
|
</div>
|
</div>
|
<div style="position: relative;margin-left: 40px;">
|
<div class="img">
|
<img src="@/assets/images/detail.png" alt="">
|
</div>
|
<div class="detail">
|
<p class="name">Cache韩版打底衫女短款时尚休闲动物图案短袖印花T恤女圆领</p>
|
<p class="selected">颜色 红色</p>
|
<p class="selected">尺码 L码</p>
|
</div>
|
<div class="valuation">
|
<p> </p>
|
<p class="money">￥ 349</p>
|
<p class="weui-count">
|
<a class="weui-count__btn weui-count__decrease"></a>
|
<input class="weui-count__number" type="number" value="1">
|
<a class="weui-count__btn weui-count__increase"></a>
|
</p>
|
</div>
|
</div>
|
</div>
|
<div class="commodity">
|
<div class="select weui-cells_checkbox">
|
<div class="weui-cell__ft">
|
<input type="checkbox" class="weui-check" name="weui-select" id="weui-select-id-画画" value="1" checked="checked" data-title="画画">
|
<span class="weui-icon-checked"></span>
|
</div>
|
</div>
|
<div style="position: relative;margin-left: 40px;">
|
<div class="img">
|
<img src="@/assets/images/detail.png" alt="">
|
</div>
|
<div class="detail">
|
<p class="name">Cache韩版打底衫女短款时尚休闲动物图案短袖印花T恤女圆领</p>
|
<p class="selected">颜色 红色</p>
|
<p class="selected">尺码 L码</p>
|
</div>
|
<div class="valuation">
|
<p> </p>
|
<p class="money">￥ 349</p>
|
<p class="weui-count">
|
<a class="weui-count__btn weui-count__decrease"></a>
|
<input class="weui-count__number" type="number" value="1">
|
<a class="weui-count__btn weui-count__increase"></a>
|
</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="weui-tabbar" v-if="isshopping">
|
<span class="tabbar-left">
|
<div class="weui-cells_checkbox">
|
<input type="checkbox" class="weui-check" name="weui-select" id="weui-select-id-画画" value="1" data-title="画画">
|
<span class="weui-icon-checked"></span>
|
<span>全选</span>
|
</div>
|
</span>
|
<span class="tabbar-middle">
|
<p class="tabbar-label-right">合计: <span class="money">￥ 256</span></p>
|
</span>
|
<span class="tabbar-right" @click="openconfirm()">
|
<p class="tabbar-label-right">结算</p>
|
</span>
|
</div>
|
<div class="weui-tabbar" v-if="!isshopping">
|
<span class="tabbar-left move">
|
<div class="weui-cells_checkbox">
|
<input type="checkbox" class="weui-check" name="weui-select" id="weui-select-id-画画" value="1" data-title="画画">
|
<span class="weui-icon-checked"></span>
|
<span>全选</span>
|
</div>
|
</span>
|
<span class="tabbar-middle move">
|
<p class="tabbar-label-right">移至收藏夹</p>
|
</span>
|
<span class="tabbar-right" @click="openconfirm()">
|
<p class="tabbar-label-right">删除</p>
|
</span>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {dict} from '../store/dictionary'
|
export default {
|
name: 'goods',
|
components: {},
|
data () {
|
return {
|
dict: dict,
|
isshopping: true
|
}
|
},
|
methods: {
|
jumpBack () {
|
this.$router.back(-1)
|
},
|
jumpSearch () {
|
this.$router.push({name: 'login', params: {view: 'home'}})
|
},
|
edit () {
|
this.isshopping = !this.isshopping
|
}
|
},
|
mounted: function () {
|
|
}
|
}
|
</script>
|
|
<style scoped>
|
.commodity-header {
|
height: 40px;
|
padding-right: 15px;
|
line-height: 40px;
|
border-bottom: 1px solid #fafafa;
|
}
|
.weui-tabbar {
|
position: fixed;
|
height: 40px;
|
line-height: 40px;
|
}
|
.tabbar-left {
|
position: relative;
|
left: 10px;
|
width: 30%;
|
font-size: 16px;
|
text-align: left;
|
color: #000000;
|
}
|
.tabbar-middle {
|
width: 45%;
|
font-size: 16px;
|
text-align: right;
|
}
|
.tabbar-left.move {
|
width: 45%;
|
font-size: 16px;
|
}
|
.tabbar-middle.move {
|
width: 30%;
|
text-align: center;
|
color: #ffffff;
|
background: -webkit-linear-gradient(left,#FF9305, #FFCA03); /* Safari 5.1 - 6.0 */
|
background: -o-linear-gradient(right, #FF9305, #FFCA03); /* Opera 11.1 - 12.0 */
|
background: -moz-linear-gradient(right, #FF9305, #FFCA03); /* Firefox 3.6 - 15 */
|
background: linear-gradient(right, #FF9305, #FFCA03); /* 标准的语法 */
|
}
|
.tabbar-middle p {
|
/* color: #000000; */
|
padding-right: 10px;
|
}
|
.tabbar-right {
|
width: 25%;
|
font-size: 16px;
|
text-align: center;
|
padding-top: 4px;
|
}
|
.tabbar-large-item p {
|
padding: 5px 0px;
|
}
|
.weui-tabbar__icon{
|
width: 20px;
|
height: 20px;
|
}
|
.weui-tabbar__icon img{
|
width: 20px;
|
height: 20px;
|
vertical-align: bottom;
|
}
|
.tabbar-right {
|
color: #ffffff;
|
background: -webkit-linear-gradient(left,#FF0F3E, #FF592E); /* Safari 5.1 - 6.0 */
|
background: -o-linear-gradient(right, #FF0F3E, #FF592E); /* Opera 11.1 - 12.0 */
|
background: -moz-linear-gradient(right, #FF0F3E, #FF592E); /* Firefox 3.6 - 15 */
|
background: linear-gradient(right, #FF0F3E, #FF592E); /* 标准的语法 */
|
}
|
.commodity-box {
|
padding: 0px 10px 40px;
|
}
|
.commodity {
|
position: relative;
|
padding: 15px 0px 10px;
|
border-bottom: 1px solid #eeeeee;
|
}
|
.commodity .select {
|
position: absolute;
|
top: 35%;
|
}
|
.commodity .img {
|
display: inline-block;
|
width: 28%;
|
}
|
.commodity .img img {
|
width: 100%;
|
display: table-cell;
|
border-radius: 3px;
|
}
|
.commodity .detail {
|
position: absolute;
|
width: 70%;
|
height: 100%;
|
left: 30%;
|
top: 0px;
|
}
|
.commodity .detail p {
|
font-size: 13px;
|
height: 30%;
|
}
|
.commodity .detail .name {
|
width: 80%;
|
height: auto;
|
min-height: 30%;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2;
|
overflow: hidden;
|
}
|
|
.commodity .detail .selected {
|
color: #bcbcbc;
|
}
|
.weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before {
|
color: #EE0907;
|
}
|
.valuation {
|
position: absolute;
|
width: 30%;
|
height: 100%;
|
right: 10px;
|
top: 0px;
|
text-align: right;
|
}
|
.valuation p {
|
font-size: 13px;
|
height: 30%;
|
}
|
.valuation .money, .money {
|
color: red;
|
font-size: 16px;
|
}
|
.weui-count {
|
border: 1px solid #bcbcbc;
|
height: 28px;
|
line-height: 28px;
|
}
|
.weui-count .weui-count__btn {
|
height: 28px;
|
width: 28px;
|
line-height: 28px;
|
border-radius: 0px;
|
background: #efefef;
|
border: 0;
|
}
|
.weui-count .weui-count__number {
|
display: inline-block;
|
width: 24px;
|
}
|
.weui-count .weui-count__btn.weui-count__decrease {
|
border-right: 1px solid #bcbcbc;
|
}
|
.weui-count .weui-count__btn.weui-count__decrease::before {
|
background: #000000;
|
}
|
.weui-count .weui-count__increase {
|
background: #efefef;
|
border-left: 1px solid #bcbcbc;
|
}
|
.weui-count .weui-count__increase::before {
|
background: #000000;
|
}
|
.weui-count .weui-count__increase::after {
|
background: #000000;
|
}
|
.delete {
|
/* color: #ffffff; */
|
color: red;
|
padding-right: 10px;
|
font-size: 16px;
|
}
|
</style>
|
