|
@@ -1,9 +1,92 @@
|
|
|
<template>
|
|
|
- <view :style="{ minHeight: sys.windowHeight + 'px' }"
|
|
|
- :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
|
|
|
- <tm-message ref="toast"></tm-message>
|
|
|
- <tm-menubars title="商城" :shadow="0" :showback="false"></tm-menubars>
|
|
|
+ <view :style="{ minHeight: sys.windowHeight + 'px' }" :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
|
|
|
+ <tm-menubars title="" :shadow="0" :showback="false"></tm-menubars>
|
|
|
+ <view class="C1b1b1b pb-40">
|
|
|
+ <view class="sousuo">
|
|
|
+ <tm-pickersCity class="dingwei fl" btn-color="bg-gradient-blue-accent" @confirm="okCity" :default-value="addr">
|
|
|
+ <view>
|
|
|
+ <text class="text-size-n">{{addr[1]}}</text>
|
|
|
+ <tm-icons :size="24" color="white" name="icon-angle-down"></tm-icons>
|
|
|
+ </view>
|
|
|
+ </tm-pickersCity>
|
|
|
+ <tm-search v-model="soso" class="fr shuruk" color="white" confirm-text="" @click="sosoFun"></tm-search>
|
|
|
+ </view>
|
|
|
+ <view style="clear: both;"></view>
|
|
|
+ </view>
|
|
|
+ <view class="lunbo">
|
|
|
+ <tm-swiper :previmage="false" @change="lunboFun" :list="list" :height="400" :current="current"></tm-swiper>
|
|
|
+ <tm-translate class="anniu1 fl" :auto="true" ref="a_1" :duration="80" animation-name="zoomIn">
|
|
|
+ <image v-if="current!=0" @click="xia()" class="qiehuan" src="/static/img/68.png" mode="widthFix"></image>
|
|
|
+ </tm-translate>
|
|
|
+ <tm-translate class="anniu2 fr" :auto="true" ref="a_5" :duration="80" animation-name="zoomIn">
|
|
|
+ <image v-if="current<(list.length-1)" @click="shang()" class="qiehuan" src="/static/img/67.png" mode="widthFix"></image>
|
|
|
+ </tm-translate>
|
|
|
+ </view>
|
|
|
|
|
|
+ <view class="zhuti">
|
|
|
+ <tm-sheet :shadow="24" class="jiaoxi">
|
|
|
+ <tm-grid @change="zhonglei" class="mt-20 mb-20" :grid="5" :list="list3" :icon-size="120" font-color="white"></tm-grid>
|
|
|
+ </tm-sheet>
|
|
|
+ <tm-sheet :shadow="24" class="jiaoxi xiao">
|
|
|
+ <view class="yifu1 fl">
|
|
|
+ <image src="/static/img/78.png" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ <view class="yifu2 fr">
|
|
|
+ <image class="yifu21" src="/static/img/77.png" mode="widthFix"></image>
|
|
|
+ <view>
|
|
|
+ <image style="width:50%;" src="/static/img/75.png" mode="widthFix"></image>
|
|
|
+ <image style="width:50%;" class="yifu21" src="/static/img/76.png" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view style="clear: both;"></view>
|
|
|
+ </tm-sheet>
|
|
|
+ <tm-sheet :shadow="24" class="jiaoxi xiao">
|
|
|
+ <tm-tabs align="center" class="qiehuan1" v-model="activeIndex" :list="list2" range-key="title"></tm-tabs>
|
|
|
+ </tm-sheet>
|
|
|
+ <tm-sheet :shadow="24" class="jiaoxi xiao" style="height:160px;">
|
|
|
+ <tm-dragGrid :list="list1" :col="3" disabled="false" class="mt-40 mb-40 remen" :icon-size="160">
|
|
|
+ <template v-slot:default="{item}">
|
|
|
+ <view class="flex-center flex-col">
|
|
|
+ <tm-icons :size="160" :name="item.icon" :color="item.color"></tm-icons>
|
|
|
+ <text class="text-size-m text-white pt-10">{{item.text}}</text>
|
|
|
+ <text class="text-size-m text-white pt-10">{{item.jie}}</text>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </tm-dragGrid>
|
|
|
+ </tm-sheet>
|
|
|
+ </view>
|
|
|
+ <view class="guanggao">
|
|
|
+ <image style="width:100%;" src="/static/img/82.png" mode="widthFix"></image>
|
|
|
+ <view class="wenzi">
|
|
|
+ <view class="mt-10">额外打九折</view>
|
|
|
+ <view>高达75%的折扣!</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view style="height:160px;" class="mt-40 jiage pt-40">
|
|
|
+ <tm-dragGrid :list="list4" :col="3" disabled="false" class="remen" :icon-size="160">
|
|
|
+ <template v-slot:default="{item}">
|
|
|
+ <view class="flex-center flex-col">
|
|
|
+ <tm-icons :size="200" :name="item.icon" :color="item.color"></tm-icons>
|
|
|
+ <text class="text-size-m text-white pt-10">{{item.text}}</text>
|
|
|
+ <text class="text-size-m text-white pt-10">{{item.jie}}</text>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </tm-dragGrid>
|
|
|
+ </view>
|
|
|
+ <tm-sheet :shadow="24" class="jiaoxi xiao">
|
|
|
+ <tm-tabs align="center" class="qiehuan1" v-model="activeIndex" :list="list5" range-key="title"></tm-tabs>
|
|
|
+ </tm-sheet>
|
|
|
+ <!-- 单品 -->
|
|
|
+ <view class="zhuti shangpin">
|
|
|
+ <tm-sheet :padding="[0, 0]" class="jiaoxi xiao">
|
|
|
+ <tm-cartCellListFood v-on:jiaruFun="jiarufuFun" v-for="item in test" :typeclick="typeclick" :mdata="item" :cart-num.sync="item.buy"></tm-cartCellListFood>
|
|
|
+ </tm-sheet>
|
|
|
+ </view>
|
|
|
+ <!-- <view v-if="gouwuche.length!=0" class="fudong" @click="qugowuche">
|
|
|
+ <image src="../../static/img/87.png" mode="widthFix"></image>
|
|
|
+ <view class="shuzigwc">{{gouwuche.length}}</view>
|
|
|
+ </view> -->
|
|
|
+ <view style="width:100%;height:60px;"></view>
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
@@ -11,7 +94,63 @@ import{myRequest} from '@/api/request.js'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ current:1,
|
|
|
+ activeIndex:0,
|
|
|
+ soso:'',
|
|
|
+ addr:['江西省','南昌市','西湖区'],
|
|
|
+ value:'',
|
|
|
+ list:[
|
|
|
+ '/static/img/66.png',
|
|
|
+ '/static/img/66.png',
|
|
|
+ '/static/img/66.png',
|
|
|
+ '/static/img/66.png'
|
|
|
+ ],
|
|
|
+ list1:[
|
|
|
+ {icon:'/static/img/79.png',text:'服装',jie:'Accessories'},
|
|
|
+ {icon:'/static/img/80.png',text:'家具',jie:'Sunglasses'},
|
|
|
+ {icon:'/static/img/81.png',text:'箱包',jie:'Suitcases'},
|
|
|
+ ],
|
|
|
+ list2:[ '热门','折扣'],
|
|
|
+ list3:[
|
|
|
+ {icon:'/static/img/69.png',text:'服装'},
|
|
|
+ {icon:'/static/img/70.png',text:'家具'},
|
|
|
+ {icon:'/static/img/71.png',text:'箱包'},
|
|
|
+ {icon:'/static/img/72.png',text:'配饰'},
|
|
|
+ {icon:'/static/img/74.png',text:'更多'},
|
|
|
+ ],
|
|
|
+ list4:[
|
|
|
+ {icon:'/static/img/83.png',text:'双面穿千鸟格风衣',jie:'¥ 899.00'},
|
|
|
+ {icon:'/static/img/84.png',text:'休闲版型风衣',jie:'¥ 899.00'},
|
|
|
+ {icon:'/static/img/85.png',text:'防水双面穿风衣',jie:'¥ 899.00'},
|
|
|
+ ],
|
|
|
+ list5:[ '推荐单品'],
|
|
|
+ test: [{
|
|
|
+ img: '../../static/img/83.png',
|
|
|
+ title: '丝缎质感纹理风衣',
|
|
|
+ label: '黑色 - 6518/320',
|
|
|
+ price: '1299',
|
|
|
+ id: 3,
|
|
|
+ buy: 0,
|
|
|
+ itemId: 0
|
|
|
+ },{
|
|
|
+ img: '../../static/img/84.png',
|
|
|
+ title: '产品3(任选)',
|
|
|
+ label: '这个产品是只有几个融会',
|
|
|
+ price: 36.2,
|
|
|
+ id: 3,
|
|
|
+ buy: 0,
|
|
|
+ itemId: 0
|
|
|
+ },{
|
|
|
+ img: '../../static/img/83.png',
|
|
|
+ title: '产品3(任选)',
|
|
|
+ label: '这个产品是只有几个融会',
|
|
|
+ price: 36.2,
|
|
|
+ id: 3,
|
|
|
+ buy: 0,
|
|
|
+ itemId: 0
|
|
|
+ }],
|
|
|
+ typeclick:1,//1加入购物车,2购物车
|
|
|
+ gouwuche:[],
|
|
|
};
|
|
|
},
|
|
|
onLoad() {
|
|
@@ -21,6 +160,45 @@ export default {
|
|
|
this.sys = uni.getSystemInfoSync();
|
|
|
},
|
|
|
methods: {
|
|
|
+ lunboFun(e){
|
|
|
+ this.current=e;
|
|
|
+ },
|
|
|
+ okCity(e){
|
|
|
+ console.log(e);
|
|
|
+ this.addr = e;
|
|
|
+ },
|
|
|
+ qugowuche(){
|
|
|
+
|
|
|
+ },
|
|
|
+ sosoFun(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/sousuo/index",
|
|
|
+ })
|
|
|
+ },
|
|
|
+ shang(){
|
|
|
+ this.$refs.a_5.play()
|
|
|
+ this.current=this.current+1;
|
|
|
+ console.log(this.current)
|
|
|
+ },
|
|
|
+ xia(){
|
|
|
+ this.$refs.a_1.play()
|
|
|
+ this.current=this.current-1;
|
|
|
+ console.log(this.current)
|
|
|
+ },
|
|
|
+ jiarufuFun(data){
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/gouwuche/index",
|
|
|
+ })
|
|
|
+ // console.log(data)
|
|
|
+ // this.gouwuche.push(data)
|
|
|
+ },
|
|
|
+ zhonglei(e){
|
|
|
+ if(e.index==4){
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/gengduo/index",
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
@@ -29,4 +207,52 @@ export default {
|
|
|
/deep/ .tm-menubars .body{
|
|
|
background-color: #1b1b1b !important;
|
|
|
}
|
|
|
+ /deep/ .icon-search{
|
|
|
+ font-size: 23px !important;
|
|
|
+ color: #8E8E93 !important;
|
|
|
+ }
|
|
|
+ /deep/ .tm-search{
|
|
|
+ width: 80%;
|
|
|
+ background-color: #414141 !important;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ /deep/ .tm-search .grey-darken-5{
|
|
|
+ background-color: #414141 !important;
|
|
|
+ }
|
|
|
+ .dingwei{width: 21%;margin-top:3%;}
|
|
|
+ .shuruk{width: 77%;}
|
|
|
+ .sousuo{width:94%;margin:0 auto;}
|
|
|
+ .qiehuan{width:40px;height:40px;}
|
|
|
+ .lunbo{position: relative;}
|
|
|
+ .anniu1{position: absolute;top:0px;z-index: 9999;top:43%;left:0;}
|
|
|
+ .anniu2{position: absolute;top:0px;z-index: 9999;top:43%;right:0;}
|
|
|
+ /deep/ .jiaoxi{margin:0 !important;padding: 8px !important;}
|
|
|
+ /deep/ .tm-col{width: 20% !important;}
|
|
|
+ .yifu1{width: 40%;}
|
|
|
+ .yifu2{width: 58%;}
|
|
|
+ .yifu1 image,.yifu21{width: 100%;}
|
|
|
+ .xiao{margin-top:15px !important;}
|
|
|
+ /deep/ .qiehuan1 .text-primary{color: white !important;}
|
|
|
+ .guanggao{position: relative;}
|
|
|
+ .wenzi{position: absolute;bottom:1px;right:0px;background: #000000;
|
|
|
+ width: 140px;
|
|
|
+ height: 55px;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ /deep/ .jiage{background: #1b1b1b;}
|
|
|
+ /deep/ .shangpin .white.bk{background-color:#1b1b1b!important;}
|
|
|
+ /deep/ .shangpin .tm-cartCellListFood{ padding: 0px 0px 15px 0px !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:90px !important;height:90px !important;}
|
|
|
+ /deep/ .shangpin .tm-cartCellListFood-img{width:90px !important;height:90px !important;}
|
|
|
+ .fudong{position: fixed;right:30px;bottom:80px;background: #0DABF2;width: 60px;height:60px;
|
|
|
+ border-radius: 30px;text-align: center;}
|
|
|
+ .fudong image{width:40px;margin-top: 6px;}
|
|
|
+ .shuzigwc{color: white;font-weight: 700;position: absolute;right:5px;background: red;
|
|
|
+ padding:2px;border-radius: 30px;top:2px;width:15px;height:15px;font-size: 12px;}
|
|
|
+ /deep/ .shangpin .title{color: white !important;}
|
|
|
+ /deep/ .shangpin .text-red{color: white !important;}
|
|
|
</style>
|