wx-qhb/pages/index/index.vue

<template>
	<!-- 商城 -->
	<view class="">
		<!-- <view class="index-navbar"> -->
		<view style="position: relative;">
			<!-- 自定义导航栏 -->
			<image src="../../static/images/index/back.png"
				style="width: 750rpx;height: 1200rpx;position: absolute;top: 0;z-index: -1;" mode=""></image>
			<u-navbar bgColor='rgba(255, 215,215, 1)' :placeholder='true' :fixed='true'>
				<view class="u-nav-slot" slot="left" style="display: flex;">
					<view class="" style="width: 40rpx;height:40rpx;position: relative;">
						<u-badge :absolute='true' :offset="[0,-8]" :type="type" max="99" :value="unReadCount"></u-badge>
						<image @click="tochat" src="../../static/images/index/xiaoxi.png" mode=""
							style="width: 40rpx;height: 40rpx;">
						</image>
					</view>
					<image @click="counter" src="../../static/images/index/compile.png" mode=""
						style="width: 40rpx;height: 40rpx;margin-left: 22rpx;"></image>
					<image src="../../static/images/index/dianhua.png" mode=""
						style="width: 40rpx;height: 40rpx;margin-left: 22rpx;" @click="callphone"></image>
				</view>
				<view class="u-nav-slot" slot="center" style="width: 320rpx;">
					<u-subsection bgColor='rgba(248, 50, 36, 0.1)' activeColor='#F83224' inactiveColor='#222'
						:list="list" :current="current" @change="sectionChange"></u-subsection>
				</view>
			</u-navbar>
		</view>
		<swiper style="height: calc(100vh - 300rpx);" class="index-swiper" :circular="false" :autoplay="false"
			:current="current" @change="swipertotabs">
			<!-- 商城 -->
			<swiper-item>
				<view>
					<kj-express ref="express" :language='language'></kj-express>
				</view>
			</swiper-item>
			<swiper-item>
				<view>
					<kj-index ref='index' :language='language'></kj-index>
				</view>
			</swiper-item>
		</swiper>
		<view class="" style="height: 160rpx;"></view>
		<kj-tabbar :value1=0 ref="kjTabbar"></kj-tabbar>
	</view>
</template>

<script>
	import {
		conn,
	} from '@/utils/WebIM';
	import {
		recom
	} from "../../network/shopApi.js";
	export default {
		data() {
			return {
				recomlist: [], //推荐列表
				//顶部分段器
				// list: [],
				current: 1,
				//tabs
				list1: [{
					name: '推荐',
				}],
				//轮播图
				banner: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				show: true,
				timer: '',
				subsidylist: [], //百万补贴
				packlist: [], //拼包好物
				shippList: [], //海外包邮
				keyword: '',
				page: 1,
				index: 0,
				parent_id: '',
				last_page: '',
				configimage: '',
				url: '',
				unReadCount: 0,
				type: "error",
				language:''
			}
		},
		computed: {
			i18n() {
				return this.$t('index')
			},
			list() {
				var list = []
				list = [this.i18n.border, this.i18n.shop]
				return list
			}
		},
		onReachBottom() {
			// if (this.page < this.last_page) {
			// 	if (this.current != 0) {
			// 		this.page++
			// 		this.goods(this.parent_id)
			// 	}
			// } else {
			// 	this.$u.toast(this.i18n.Nofurtherdata)
			// }
		},
		onLoad(options) {
			// this.seater()
			// if (options.current) {
			// 	this.current = options.current
			// }
			// //商品推荐
			// this.getlista()
		},
		onShow() {
			this.$refs.express.express()
			this.$refs.express.getexpress();
			// this.$refs.express.getlist();
			this.$refs.index.getlista();
			// this.config()
			// // tabs列表
			// this.category()
			// //百万补贴
			// this.subsid()
			// //拼包好物
			// this.pack()
			// //海外包邮
			// this.shipp()
			// this.recommend()、
			this.getlist()
			
			if (uni.getStorageSync('language') != '') {
				this.language = uni.getStorageSync('language')
			}
			this.HXlogin()
			this.$refs.kjTabbar.getNumber();
		},
		methods: {
			//分享
			onShareAppMessage(res) {
				if (res.from === "button") {
					// 来自页面内分享按钮
					console.log(res.target);
				}
				return {
					title: "自定义分享标题",
					path: "/pages/index/index.vue"
				};
			},
			//左右切换
			swipertotabs(e) {
				this.current = e.detail.current
			},
			//分段器切换
			sectionChange(index) {
				this.current = index;
				// if (this.current == 0) {
				// 	uni.switchTab({
				// 		url: '/pages/express/express?current=0'
				// 	})
				// 	this.current = 1
				// }
			},
			// //获取快递列表
			// getlista() {
			// 	uni.$u.http.get('/api/express-company', {}).then((res) => {
			// 		uni.setStorageSync('radiolist1', res)
			// 	}).catch(() => {

			// 	})
			// },
			HXlogin() {
				if (uni.getStorageSync('user_no') && uni.getStorageSync('pwd')) {
					var user_no = uni.getStorageSync('user_no')
					var pwd = uni.getStorageSync('pwd')
					conn.open({
						user: user_no,
						pwd: pwd,
						appKey: conn.appkey
					}).then(() => {
						console.log('res');
						this.getlist()
					}).catch(reason => {
						console.log('失败', reason);
					})

				}
			},
			getlist() {
				this.unReadCount = 0
				conn.getServerConversations({
					pageSize: 50,
					cursor: ''
				}).then((res) => {
					console.log(res);
					res.data.conversations.forEach((item) => {
						this.unReadCount += item.unReadCount
					})
					console.log(this.unReadCount);
				})
			},
			callphone() {
				uni.$u.http.get('/api/config', {
					params: {
						module: 'basic'
					}
				}).then((res) => {
					console.log(res);
					uni.makePhoneCall({
						phoneNumber: res.service_mobile
					})
				}).catch(() => {

				})

			},
			// advert() {
			// 	uni.navigateTo({
			// 		url: this.url
			// 	})
			// },
			// //广告弹窗
			// config() {
			// 	uni.$u.http.get('api/config', {
			// 		params: {
			// 			module: 'advertising'
			// 		}
			// 	}).then((res) => {
			// 		console.log(res);
			// 		this.configimage = res.image
			// 		this.url = res.url
			// 	}).catch(() => {

			// 	})
			// },
			// //海外包邮接口
			// shipp() {
			// 	uni.$u.http.post('api/goods/shipping').then((res) => {
			// 		this.shippList = res.data.splice(0, 2)
			// 	}).catch(() => {

			// 	})
			// },
			// //拼包好物接口
			// pack() {
			// 	uni.$u.http.post('/api/goods/pack').then((res) => {
			// 		this.packlist = res.data.splice(0, 2)
			// 	}).catch(() => {

			// 	})
			// },
			// //百万补贴接口
			// subsid() {
			// 	uni.$u.http.post('/api/goods/subsidy').then((res) => {
			// 		console.log(res);
			// 		this.subsidylist = res.data.splice(0, 4)
			// 	}).catch(() => {

			// 	})
			// },
			// //标签切换
			// changetab(e) {
			// 	this.page = 1
			// 	this.last_page = 0
			// 	this.index = e.index
			// 	this.parent_id = e.id
			// 	if (this.index == 0) {
			// 		this.recommend()
			// 	} else {
			// 		this.recomlist = []
			// 		this.goods(this.parent_id)
			// 	}
			// },
			// search() {
			// 	if (this.index == 0) {
			// 		this.recommend()
			// 	} else {
			// 		this.recomlist = []
			// 		this.goods(this.parent_id)
			// 	}
			// },
			// //商品推荐
			// recommend() {
			// 	uni.$u.http.post('/api/goods/recommend', {
			// 		keyword: this.keyword
			// 	}).then((res) => {
			// 		this.recomlist = res
			// 	}).catch(() => {

			// 	})
			// },
			// //商品分类列表
			// category() {
			// 	uni.$u.http.get('/api/goods/category', {
			// 		params: {
			// 			parent_id: 0
			// 		}
			// 	}).then((res) => {
			// 		const categoryArr = res
			// 		this.list1 = [{
			// 			name: ''
			// 		}]
			// 		if (this.language == 'en-US') {
			// 			categoryArr.forEach(item => {
			// 				item.name = item.name_en
			// 			})
			// 			this.list1[0].name = 'recommend'
			// 		}
			// 		if (this.language == 'es-ES') {
			// 			categoryArr.forEach(item => {
			// 				item.name = item.name_es
			// 			})
			// 			this.list1[0].name = 'recomendación'
			// 		}
			// 		if (this.language == 'it-IT') {
			// 			categoryArr.forEach(item => {
			// 				item.name = item.name_ita
			// 			})
			// 			this.list1[0].name = 'raccomandata'
			// 		}

			// 		if (this.language == 'zh-CN') {
			// 			categoryArr.forEach(item => {
			// 				item.name = item.name_cn
			// 			})
			// 			this.list1[0].name = '推荐'
			// 		}
			// 		this.list1 = this.list1.concat(categoryArr)
			// 	}).catch(() => {

			// 	})
			// },
			// //商品列表
			// goods(id) {
			// 	uni.$u.http.get('/api/goods', {
			// 		params: {
			// 			parent_id: id,
			// 			limit: 10,
			// 			page: this.page,
			// 			keyword: this.keyword
			// 		}
			// 	}).then((res) => {
			// 		this.recomlist = this.recomlist.concat(res.data)
			// 		this.last_page = res.last_page
			// 	}).catch(() => {

			// 	})
			// },
			// //百万补贴跳转
			// subsidy(item) {
			// 	uni.navigateTo({
			// 		url: '/pageA/subsidy?show=' + item
			// 	})
			// },
			// //物流计算器
			counter() {
				uni.navigateTo({
					url: '/pageA/counter'
				})
			},
			// //消息
			tochat() {
				uni.navigateTo({
					url: '/pageA/chat/news'
				})
			},
			// //商品分类
			// shoptype() {
			// 	uni.navigateTo({
			// 		url: '/pageA/shoptype'
			// 	})
			// },

			//详情
			// todetail(id) {
			// 	uni.navigateTo({
			// 		url: '/pageA/productdetails?id=' + id
			// 	})
			// }
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: rgba(0, 0, 0, 0)
	}


	.discount {
		// width: 100rpx;
		padding: 0 6rpx;
		height: 36rpx;
		background: #ff1515;
		border-radius: 6rpx;
		position: absolute;
		left: 12rpx;
		top: 12rpx;
		z-index: 10;
		font-family: OriyaMN;
		font-size: 20rpx;
		color: #ffffff;
		line-height: 36rpx;
		text-align: center;
		font-style: normal;
	}

	.index-navbar {
		position: sticky;
		top: 0;
		left: 0;
		width: 750rpx;
		z-index: 100;
	}

	::v-deep .u-tabs {
		width: 560rpx;
	}

	.taber {
		border-radius: 4rpx;
		padding: 4rpx 8rpx;
		margin-bottom: 10rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 16rpx;
		color: #d48700;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
	}

	.title {
		font-family: SFPro, SFPro;
		font-weight: 400;
		font-size: 26rpx;
		color: #222222;
		// line-height: 30rpx;
		// text-align: left;
		// font-style: normal;
		width: 300rpx;
		// height: 70rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.weight {
		font-family: SFPro, SFPro;
		font-weight: 400;
		font-size: 20rpx;
		color: #888888;
		line-height: 24rpx;
		text-align: left;
		font-style: normal;
		margin-left: 12rpx;
	}

	.shopname {
		width: 124rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		white-space: nowrap;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #666666;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
	}

	.money {
		font-family: HarmonyOS_Sans_Medium;
		font-size: 28rpx;
		color: #f83224;
		line-height: 38rpx;
		text-align: right;
		font-style: normal;
	}

	.biaoqian {
		height: 28rpx;
		border-radius: 6rpx;
		padding: 6rpx;
		margin-left: 8rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #ffffff;
		line-height: 30rpx;
		text-align: center;
		overflow: hidden;
	}

	.tag {
		// height: 28rpx;
		border-radius: 14rpx 14rpx 14rpx 0rpx;
		border: 1rpx solid #ffffff;
		padding: 6rpx;
		text-align: center;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #ffffff;
		line-height: 28rpx;
		text-align: center;
		font-style: normal;
		box-sizing: border-box;
		// margin-left: -15rpx;
	}

	.bigbox {
		width: 340rpx;
		// height: 468rpx;
		background: #ffffff;
		border-radius: 12rpx;
		border: 2rpx solid #ffffff;
		margin-bottom: 22rpx;
		padding: 18rpx 20rpx;
		box-sizing: border-box;
	}

	.smallbox {
		width: 340rpx;
		height: 226rpx;
		background: #ffffff;
		border-radius: 12rpx;
		border: 2rpx solid #ffffff;
		margin-bottom: 22rpx;
		padding: 18rpx 20rpx;
		box-sizing: border-box;
	}

	.shopback {
		width: 750rpx;
		min-height: 1216rpx;
		background: #f4f4f4;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		padding: 26rpx 24rpx;
		box-sizing: border-box;
	}

	.fenlei {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		line-height: 40rpx;
		text-align: right;
		font-style: normal;
		margin-left: 8rpx;
	}

	.search {
		width: 702rpx;
		height: 68rpx;
		background: #ffffff;
		border-radius: 34rpx;
		padding: 6rpx 6rpx 6rpx 36rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;

		.right {
			width: 100rpx;
			height: 56rpx;
			background: #ed0909;
			border-radius: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #ffffff;
			line-height: 56rpx;
			text-align: center;
		}
	}

	.border {
		width: 2rpx;
		height: 24rpx;
		border: 2rpx solid #979797;
		opacity: 0.2;
		background-color: #979797;
	}

	// ::v-deep .u-navbar__content.data-v-1194bf80 {
	// 	background-color: rgba(0, 0, 0, 0) !important;
	// }

	// ::v-deep .u-status-bar.data-v-13f16680 {
	// 	background-color: rgba(0, 0, 0, 0) !important;
	// }

	::v-deep .u-subsection--button.data-v-b14d3440 {
		/* padding: 6rpx 34rpx !important; */
		border-radius: 64rpx !important;
	}

	::v-deep .u-subsection--button__bar.data-v-b14d3440 {
		border-radius: 32rpx !important;
	}
</style>