wardrobe/pages/shop/index.vue

<template>
	<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>
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() {
		
	},
	created() {
		this.sys = uni.getSystemInfoSync();
	},
	methods: {
		lunboFun(e){
			this.current=e;
		},
		okCity(e){
			console.log(e);
			this.addr = e;
		},
		qugowuche(){
			
		},
		sosoFun(){
			uni.navigateTo({
				url: "/pages/shopsoso/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>

<style lang="scss">
	/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>