|
|
@@ -1,15 +1,57 @@
|
|
|
<template>
|
|
|
<view :style="{ minHeight: sys.windowHeight + 'px' }"
|
|
|
:class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
|
|
|
- <tm-menubars title="消息列表" :shadow="0" :showback="true"></tm-menubars>
|
|
|
- <div class="zhuti">
|
|
|
- <tm-sheet class="kuang" style="padding-bottom: 70px !important;">
|
|
|
- <view style="width: 94%;margin:0 auto;">
|
|
|
-
|
|
|
+ <tm-menubars title="详情" :shadow="0" :showback="true"></tm-menubars>
|
|
|
+ <image class="touimg" src="/static/img/91.png" mode="widthFix"></image>
|
|
|
+ <view class="qiehuancla">
|
|
|
+ <view :class="index==0?'border':'border1'" class="da" @click="qiehuan(0)">
|
|
|
+ <image class="xiaoimg" src="/static/img/92.png"></image>
|
|
|
+ <image v-if="index==0" class="sanjiao" src="/static/img/93.png" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ <view :class="index==1?'border':'border1'" class="da" @click="qiehuan(1)">
|
|
|
+ <image class="xiaoimg" src="/static/img/92.png"></image>
|
|
|
+ <image v-if="index==1" class="sanjiao" src="/static/img/93.png" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ <view :class="index==2?'border':'border1'" class="da" @click="qiehuan(2)">
|
|
|
+ <image class="xiaoimg" src="/static/img/92.png"></image>
|
|
|
+ <image v-if="index==2" class="sanjiao" src="/static/img/93.png" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ <view :class="index==3?'border':'border1'" class="da" @click="qiehuan(3)">
|
|
|
+ <image class="xiaoimg" src="/static/img/92.png"></image>
|
|
|
+ <image v-if="index==3" class="sanjiao" src="/static/img/93.png" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ <view :class="index==4?'border':'border1'" class="da" @click="qiehuan(4)">
|
|
|
+ <image class="xiaoimg" src="/static/img/92.png"></image>
|
|
|
+ <image v-if="index==4" class="sanjiao" src="/static/img/93.png" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ <view style="clear: both;"></view>
|
|
|
+ </view>
|
|
|
+ <tm-sheet class="contzui">
|
|
|
+ <div class="zhuti">
|
|
|
+ <view class="text-white">BALENCIAGA / adidas TRIPLE S男士运动鞋</view>
|
|
|
+ <view class="text-gray text-size-m mt-20">adidas 白色、黑色和灰色双层泡沫和网布 Triple S 运动鞋是与 adidas 携手推出的合作款。</view>
|
|
|
+ <view class="shoucang mt-30 fr">
|
|
|
+ <view class="fl di mr-20" @click="shouc">
|
|
|
+ <tm-translate ref="a_3" :auto="true" :duration="80" animation-name="zoomIn">
|
|
|
+ <image :src="shoucangsrc?'/static/img/15.png':'/static/img/8.png'" mode="widthFix" style="margin-right: 15px;"></image>
|
|
|
+ </tm-translate>
|
|
|
+ </view>
|
|
|
+ <view class="fl di" @click="zan">
|
|
|
+ <tm-translate ref="a_2" :auto="true" :duration="80" animation-name="zoomIn">
|
|
|
+ <image :src="dianzan?'/static/img/16.png':'/static/img/9.png'" mode="widthFix" style="margin-right: 15px;"></image>
|
|
|
+ </tm-translate>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </tm-sheet>
|
|
|
- <tm-button :round="24" class="sao mb-40 mt-40" block>提交</tm-button>
|
|
|
- </div>
|
|
|
+ <view style="clear: both;"></view>
|
|
|
+ </div>
|
|
|
+ </tm-sheet>
|
|
|
+ <tm-sheet :padding="[0, 0]" class="jiaoxi">
|
|
|
+ <view class="zhuti shangpin">
|
|
|
+ <view class="mb-30 mt-20 text-white">商品</view>
|
|
|
+ <tm-cartCellListFood v-on:jiaruFun="jiarufuFun" v-for="item in test" :typeclick="typeclick" :mdata="item" :cart-num.sync="item.buy"></tm-cartCellListFood>
|
|
|
+ </view>
|
|
|
+ </tm-sheet>
|
|
|
+
|
|
|
<!-- 弹出层消息 -->
|
|
|
<tm-message ref="toast"></tm-message>
|
|
|
</view>
|
|
|
@@ -19,10 +61,32 @@ import{myRequest} from '@/api/request.js'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- checked1:false,
|
|
|
- checked2:false,
|
|
|
- checked3:false,
|
|
|
- beizu:''
|
|
|
+ index:0,
|
|
|
+ shoucangsrc:true,
|
|
|
+ dianzan:true,
|
|
|
+ test: [{
|
|
|
+ img: '../../static/img/83.png',
|
|
|
+ title: '丝缎质感纹理风衣',
|
|
|
+ label: '黑色 - 6518/320',
|
|
|
+ id: 3,
|
|
|
+ buy: 0,
|
|
|
+ itemId: 0
|
|
|
+ },{
|
|
|
+ img: '../../static/img/84.png',
|
|
|
+ title: '产品3（任选）',
|
|
|
+ label: '这个产品是只有几个融会',
|
|
|
+ id: 3,
|
|
|
+ buy: 0,
|
|
|
+ itemId: 0
|
|
|
+ },{
|
|
|
+ img: '../../static/img/83.png',
|
|
|
+ title: '产品3（任选）',
|
|
|
+ label: '这个产品是只有几个融会',
|
|
|
+ id: 3,
|
|
|
+ buy: 0,
|
|
|
+ itemId: 0
|
|
|
+ }],
|
|
|
+ typeclick:3,//1加入购物车，2购物车,3详情
|
|
|
};
|
|
|
},
|
|
|
onLoad() {
|
|
|
@@ -32,21 +96,24 @@ export default {
|
|
|
this.sys = uni.getSystemInfoSync();
|
|
|
},
|
|
|
methods: {
|
|
|
- aa(num){
|
|
|
- if(num==1){
|
|
|
- this.checked1=true;
|
|
|
- this.checked2=false;
|
|
|
- this.checked3=false;
|
|
|
- }else if(num==2){
|
|
|
- this.checked1=false;
|
|
|
- this.checked2=true;
|
|
|
- this.checked3=false;
|
|
|
- }else if(num==3){
|
|
|
- this.checked1=false;
|
|
|
- this.checked2=false;
|
|
|
- this.checked3=true;
|
|
|
- }
|
|
|
+ jiarufuFun(data){
|
|
|
+ // uni.navigateTo({
|
|
|
+ // url: "/pages/gouwuche/index",
|
|
|
+ // })
|
|
|
+ console.log(data)
|
|
|
+ // this.gouwuche.push(data)
|
|
|
+ },
|
|
|
+ shouc(){
|
|
|
+ this.shoucangsrc=! this.shoucangsrc;
|
|
|
+ this.$refs.a_3.play()
|
|
|
+ },
|
|
|
+ zan(){
|
|
|
+ this.dianzan=! this.dianzan;
|
|
|
+ this.$refs.a_2.play()
|
|
|
},
|
|
|
+ qiehuan(index){
|
|
|
+ this.index=index;
|
|
|
+ }
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
@@ -57,4 +124,31 @@ export default {
|
|
|
}
|
|
|
/deep/ .zhuti{padding: 10px 10px;}
|
|
|
/deep/ .kuang{margin:0 !important;padding: 0px !important;}
|
|
|
+ .touimg{width: 100%;display: block;}
|
|
|
+ .qiehuancla{width: 100%;}
|
|
|
+ .xiaoimg{width: 100%;height: 55px;display: block;}
|
|
|
+ .qiehuancla .da{width: 19.4%;float: left;height: 55px;position:relative;}
|
|
|
+ .border{border: 1px solid #0178FD;}
|
|
|
+ .border1{border: 1px solid #0D0D0D;}
|
|
|
+ .sanjiao{width: 18px;height: 18px;position: absolute;top: -10px;left:39%;}
|
|
|
+ .shoucang image{width: 45px;}
|
|
|
+ .qiehuan{float: right;}
|
|
|
+ .qiehuan .a_1{margin-top: 25%;}
|
|
|
+ .qiehuan .anniu{width: 20px;height: 20px !important;}
|
|
|
+ .di{background: #0D0D0D;width: 45px;height: 45px;text-align: center;line-height: 50px;border-radius: 30px;}
|
|
|
+ .di image{width: 22px;margin: 0 !important;height: 20px !important;}
|
|
|
+ .contzui{margin:0;}
|
|
|
+ /deep/ .shangpin .white.bk{background-color:#1b1b1b!important;}
|
|
|
+ /deep/ .shangpin .tm-cartCellListFood{padding: 0px 10px 15px 10px !important;
|
|
|
+ margin-top: 5px !important;margin-bottom: 20px !important;
|
|
|
+ border-bottom: 1px solid #303030;}
|
|
|
+ /deep/ .shangpin .border-t-1.bk{border-top:1px solid #1B1B1B!important;}
|
|
|
+ /deep/ .shangpin .round-3{width:110px !important;height:110px !important;}
|
|
|
+ /deep/ .shangpin .tm-cartCellListFood-img{width:110px !important;height:110px !important;}
|
|
|
+ .fudong{position: fixed;right:30px;bottom:80px;background: #0DABF2;width: 60px;height:60px;
|
|
|
+ border-radius: 30px;text-align: center;}
|
|
|
+ /deep/ .shangpin .title{color: white !important;font-size: 16px;}
|
|
|
+ /deep/ .shangpin .text-red{color: white !important;}
|
|
|
+ .jiaoxi{margin: 0px;margin-top: 15px;}
|
|
|
+ /deep/ .shangpin .tm-cartCellListFood-label{font-size: 14px;color: white !important;margin-top: 10px !important;}
|
|
|
</style>
|
