首頁
<template>
<view class="container">
<!--header-->
<view class="tui-header">
<view class="tui-category" hover-class="opcity" :hover-stay-time="150" @tap="classify">
<tui-icon name="manage-fill" color="#fff" :size="22"></tui-icon>
<view class="tui-category-scale">分類</view>
</view>
<view class="tui-rolling-search">
<image lazy-load class="logo-size" src="https://sdzkshop.oss-cn-shenzhen.aliyuncs.com/sdzkShop/fontResources/sdlogo.png"></image>
<view class="right-line-box">
<view class="right-line"></view>
</view>
<!-- #ifdef APP-PLUS || MP -->
<icon type="search" :size='13' color='#999'></icon>
<!-- #endif -->
<!-- #ifdef H5 -->
<view>
<tui-icon name="search" :size='16' color='#999'></tui-icon>
</view>
<!-- #endif -->
<swiper vertical autoplay circular interval="8000" class="tui-swiper">
<swiper-item v-for="(item,index) in hotSearch" :key="index" class="tui-swiper-item" @tap="searchk()">
<view class="tui-hot-item">{{item.key_word}}</view>
</swiper-item>
</swiper>
</view>
</view>
<!--header-->
<view class="tui-header-banner">
<view class="tui-hot-search">
<view>熱搜</view>
<scroll-view class="scroll-view_H" scroll-x="true">
<view class="flex">
<view v-for="(item,index) in hotSearch" :key="index" class="tui-hot-tag" @tap="search(item)">{{item.key_word}}</view>
</view>
</scroll-view>
</view>
<view class="tui-banner-bg">
<view class="tui-primary-bg tui-route-left"></view>
<view class="tui-primary-bg tui-route-right"></view>
<!--banner-->
<view class="tui-banner-box">
<swiper :indicator-dots="true" :autoplay="true" :interval="5000" :duration="150" class="tui-banner-swiper"
:circular="true" indicator-color="rgba(255, 255, 255, 0.8)" indicator-active-color="#fff">
<swiper-item v-for="(item,index) in banner" :key="index" @tap.stop="detail">
<image lazy-load :src="item.img" class="tui-slide-image" mode="scaleToFill" />
</swiper-item>
</swiper>
</view>
</view>
</view>
<!-- <view class="tui-product-category">
<view class="tui-category-item" v-for="(item,index) in category" :key="index" :data-key="item.name" @tap="more">
<image :src="'../../../static/images/mall/category/'+item.img" class="tui-category-img" mode="scaleToFill"></image>
<view class="tui-category-name">{{item.name}}</view>
</view>
</view> -->
<!-- <view class="tui-product-box tui-pb-20 tui-bg-white">
<view class="tui-group-name" @tap="more">
<text>新人專享</text>
<tui-icon name="arrowright" :size="20" color="#555"></tui-icon>
</view>
<view class="tui-activity-box" @tap="detail">
<image src="/static/images/mall/activity/activity_1.jpg" class="tui-activity-img" mode="widthFix"></image>
<image src="/static/images/mall/activity/activity_2.jpg" class="tui-activity-img" mode="widthFix"></image>
</view>
</view> -->
<view class="tui-product-box tui-pb-20 tui-bg-white margin-top-45">
<view class="tui-group-name" @tap="more">
<text class="tui-group-name-line"></text>
<view class="width30">租賃商品</view>
<text class="tui-group-name-line"></text>
</view>
<view class="zl-pro-box" v-for="(items,indexs) in newProduct" :key="indexs">
<view class="zl-pro-box-title">{{items.title}}</view>
<view class="tui-new-box">
<view class="tui-new-item" :class="[index!=0 && index!=1 ?'tui-new-mtop':'']" v-for="(item,index) in items.list"
:key="index" @tap="productDetail(item)">
<image lazy-load :src="'https://sdzkshop.oss-cn-shenzhen.aliyuncs.com/sdzkShop/fontResources/'+(item.type==222?'new':'')+'.png'"
class="tui-new-label" v-if="item.type"></image>
<view class="tui-title-box">
<view class="tui-new-title">{{item.productName}}</view>
<view class="tui-new-price">
<view class="tui-new-price-k">
<view class="tui-new-present">租金</view>
<view class="tui-new-present">{{item.sellPrice}}</view>
</view>
<view class="tui-new-original">￥{{item.originPrice}}</view>
</view>
</view>
<image lazy-load :src="item.newImg" class="tui-new-img"></image>
</view>
</view>
</view>
</view>
<view class="tui-product-box">
<view class="tui-group-name">
<!-- <view class="width30"></view> -->
<text class="tui-group-name-line"></text>
<view class="width30">出售商品</view>
<text class="tui-group-name-line"></text>
<!-- <view @click="goMoreClick()" class="width30 more">
<text>更多</text>
<text class="iconfont icon-next"></text>
</view> -->
</view>
<view class="zl-pro-box" v-for="(items,indexs) in productList" :key="indexs">
<view class="zl-pro-box-title">{{items.title}}</view>
<view class="tui-product-list">
<view class="tui-product-container">
<block v-for="(item,index) in items.list" :key="index" v-if="(index+1)%2!=0">
<!--商品列表-->
<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" @tap="productDetail(item)">
<image lazy-load :src="item.productImg" class="tui-pro-img" mode="widthFix" />
<view class="tui-pro-content">
<view class="tui-pro-tit">{{item.productName}}</view>
<view>
<view class="tui-pro-price">
<text class="tui-sale-price">￥{{item.sellPrice}}</text>
<text class="tui-factory-price">￥{{item.originPrice}}</text>
</view>
<view class="tui-pro-pay">{{item.payNum}}人付款</view>
</view>
</view>
</view>
<!--商品列表-->
<!-- <template is="productItem" data="{{item,index:index}}" /> -->
</block>
</view>
<view class="tui-product-container">
<block v-for="(item,index) in items.list" :key="index" v-if="(index+1)%2==0">
<!--商品列表-->
<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" @tap="productDetail(item)">
<image lazy-load :src="item.productImg" class="tui-pro-img" mode="widthFix" />
<view class="tui-pro-content">
<view class="tui-pro-tit">{{item.productName}}</view>
<view>
<view class="tui-pro-price">
<text class="tui-sale-price">￥{{item.sellPrice}}</text>
<text class="tui-factory-price">￥{{item.originPrice}}</text>
</view>
<view class="tui-pro-pay">{{item.payNum}}人付款</view>
</view>
</view>
</view>
<!--商品列表-->
<!-- <template is="productItem" data="{{item,index:index}}" /> -->
</block>
</view>
</view>
</view>
</view>
<!-- 分享有禮togglePopup('top') -->
<view @click="saveToAlbum()" class="shareposts">
<image lazy-load class="shareposts-icon-size" src="https://sdzkshop.oss-cn-shenzhen.aliyuncs.com/sdzkShop/fontResources/sharebtns.gif"></image>
</view>
<!-- 分享有禮 -->
<!--加載loadding-->
<tui-loadmore :visible="loadding" :index="3" type="red"></tui-loadmore>
<!-- <tui-nomore visible="{{!pullUpOn}}"></tui-nomore> -->
<!--加載loadding-->
<view class="tui-safearea-bottom"></view>
<!-- v-show="postShowk==true" -->
<view v-show="postShowk==true">
<tki-qrcode ref="qrcode" :val="val" :size="1000" background="#fff" foreground="#000" pdground="#000" :onval="false"
:loadMake="false" @result="qrR" :show="false"></tki-qrcode>
<view class="wrapper"><canvas class="can-sty" canvas-id="firstCanvas"></canvas></view>
</view>
<view @click="postHide" v-show="postShow==true" class="previewImaged">
<image mode="widthFix" style="width: 100%;top: 44px;padding: 0 20px;" lazy-load :src="posterSrc"></image>
<p style="margin-top: 10px;padding: 20px;color: #ffffff;font-size: 30upx;margin-top: 70upx;">保存圖片分享給好友識別二維碼進入商城購買任意商品享分成</p>
</view>
</view>
</template>
<script>
let _self;
import wx from 'weixin-js-sdk'
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
let jweixin = require('@/common/jweixin-module')
import wxcode from "@/common/getWxCode.js";
import tuiIcon from "@/components/icon/icon"
import tuiTag from "@/components/tag/tag"
import tuiLoadmore from "@/components/loadmore/loadmore"
import tuiNomore from "@/components/nomore/nomore"
export default {
components: {
tuiIcon,
tuiTag,
tuiLoadmore,
tuiNomore,
tkiQrcode
},
onLoad() {
_self = this;
if (wxcode.getUrlParam("code")) {
_self.getOpenid(wxcode.getUrlParam("code"));
} else {
wxcode.getcode(window.location.href);
}
this.val = "https://api.afhome.com.cn/sdshoptest/?otherSignk=" + uni.getStorageSync('userData').paySign;
console.log(this.val);
// 數據初始化
_self.serIndex(0);
_self.serIndex(1);
// _self.newProductData();
// _self.recordProductData();
_self.shufflingFigureData();
_self.hotSearchList();
},
methods: {
postHide() {
_self.postShow = false;
},
onPullDownRefresh() {
setTimeout(() => {
_self.pageIndex = 1;
_self.serIndex(0);
_self.serIndex(1);
// _self.newProductData();
// _self.recordProductData();
_self.shufflingFigureData();
_self.hotSearchList();
uni.stopPullDownRefresh()
}, 200);
},
async serIndex(state) {
_self.loading = true;
let rest = '';
rest = await _self.$api.serIndex({
state: state
});
if (state == 0) {
_self.newProduct = rest.data.data;
} else if (state == 1) {
_self.productList = rest.data.data;
}
},
// openid
async getOpenid(code) {
_self.loading = true;
let rest = '';
rest = await _self.$api.getOpenid({
code: code
});
uni.setStorageSync("openid", rest.data.data.loginSign);
// uni.showToast({
// icon: 'none',
// position: 'bottom',
// title: rest.data.msg
// });
},
// 熱門搜索
async hotSearchList() {
_self.loading = true;
let rest = '';
rest = await _self.$api.hotSearchList({
state: 0
});
_self.hotSearch = rest.data.data;
// uni.showToast({
// icon: 'none',
// position: 'bottom',
// title: rest.data.msg
// });
},
// 新品數據
async newProductData() {
_self.loading = true;
let rest = '';
rest = await _self.$api.newProductData({
state: 0
});
_self.newProduct = rest.data.data;
// uni.showToast({
// icon: 'none',
// position: 'bottom',
// title: rest.data.msg
// });
},
// 熱門推薦數據
async recordProductData() {
_self.loading = true;
let rest = '';
rest = await _self.$api.recordProductData({
state: 1
});
_self.productList = rest.data.data;
// uni.showToast({
// icon: 'none',
// position: 'bottom',
// title: rest.data.msg
// });
},
// 輪播圖數據
async shufflingFigureData() {
_self.loading = true;
let rest = '';
rest = await _self.$api.shufflingFigureData({});
_self.banner = rest.data.data;
// uni.showToast({
// icon: 'none',
// position: 'bottom',
// title: rest.data.msg
// });
},
// 更多商品
goMoreClick() {
uni.navigateTo({
url: 'searchRest'
})
},
// 搜索跳轉
searchk() {
uni.navigateTo({
url: 'search'
})
},
// 搜索跳轉
search(item) {
uni.navigateTo({
url: 'searchRest?searData=' + item.key_word
})
},
// 分類跳轉
classify() {
uni.reLaunch({
url: '../classification/classification'
})
},
// 輪播圖跳轉
detail() {
},
// 商品跳轉
productDetail(item) {
uni.navigateTo({
url: 'productDetail?productId=' + item.productId
})
},
qrR(path) {
let that = this;
this.qr_path = path;
let system_info = uni.getSystemInfoSync();
let ctx = uni.createCanvasContext('firstCanvas');
uni.getImageInfo({
src: that.cover,
success(res) {
console.log(res.path);
ctx.drawImage(res.path, 0, 0, uni.upx2px(750), uni.upx2px(1320));
ctx.fillStyle = '#FFFFFF';
ctx.drawImage(path, uni.upx2px(540), uni.upx2px(900), uni.upx2px(150), uni.upx2px(150));
ctx.font = '13px Arial';
ctx.fillStyle = '#000';
ctx.draw(false, (rest) => {
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: uni.upx2px(750),
height: uni.upx2px(1320),
destWidth: uni.upx2px(750),
destHeight: uni.upx2px(1320),
canvasId: 'firstCanvas',
success: function(ress) {
that.posterSrc = ress.tempFilePath;
that.postShow = true;
that.postShowk = false;
},
fail(e) {
console.log(e + "生成海報失敗");
}
});
});
},
fail(error) {
console.log(error);
}
});
},
saveToAlbum() {
if (uni.getStorageSync('token')) {
this.postShowk = true;
console.log(this.val);
setTimeout(() => {
this.$refs.qrcode._makeCode();
}, 500);
} else {
uni.showModal({
title: '提示',
content: '您還沒有登陸是否去登陸',
success: function(res) {
if (res.confirm) {
uni.navigateTo({
url: '../login/login'
})
} else if (res.cancel) {
}
}
});
}
},
closePost() {
this.postShow = false;
}
},
data() {
return {
current: 0,
tabbar: [],
hotSearch: [
"休閒零食",
"自熱火鍋",
"小冰箱迷你"
],
banner: [],
category: [],
newProduct: [],
productList: [],
pageIndex: 1,
loadding: false,
pullUpOn: true,
// 海報
postShow: false,
postShowk: false,
posterSrc: '',
val: '',
cover: 'https://api.afhome.com.cn/uploads/sdmall/share.png'
}
}
}
</script>
<style lang="scss">
page {
background: #f7f7f7;
}
.tui-group-name {
display: flex;
justify-content: center;
font-size:32rpx;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
color:rgba(228,31,25,1);
line-height:44rpx;
.icon-next {
font-size: 20rpx;
margin-left: 10rpx;
}
.width30 {
width: 33.33%;
}
.more {
line-height: 56rpx;
text-align: right;
font-size: 22rpx;
}
}
.tui-new-price-k{
display: flex;
flex-direction: column;
}
.logo-size {
width: 60rpx;
height: 15.8rpx;
}
.right-line-box {
display: flex;
justify-content: center;
align-items: center;
padding: 0 16rpx;
.right-line {
background: #999999;
height: 30rpx;
width: 2rpx;
}
}
.container {
padding-bottom: 100rpx;
color: #333;
}
/*tabbar*/
.tui-tabbar {
width: 100%;
position: fixed;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 99999;
background: #fff;
height: 100rpx;
left: 0;
bottom: 0;
padding-bottom: env(safe-area-inset-bottom);
}
.tui-safearea-bottom {
width: 100%;
height: env(safe-area-inset-bottom);
}
.tui-tabbar::before {
content: '';
width: 100%;
border-top: 1rpx solid #d9d9d9;
position: absolute;
top: 0;
left: 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.tui-tabbar-item {
flex: 1;
width: 25%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-between;
font-size: 24rpx;
color: #666;
height: 80rpx;
}
.tui-ptop-4 {
padding-top: 4rpx;
}
.tui-scale {
font-weight: bold;
transform: scale(0.8);
transform-origin: center 100%;
line-height: 30rpx;
}
.tui-item-active {
color: #e41f19 !important;
}
/*tabbar*/
.tui-header {
width: 100%;
height: 100rpx;
padding: 0 30rpx 0 20rpx;
box-sizing: border-box;
background: #e41f19;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
left: 0;
top: 0;
z-index: 999;
}
.tui-rolling-search {
width: 100%;
height: 60rpx;
border-radius: 35rpx;
padding: 0 40rpx 0 30rpx;
box-sizing: border-box;
background: #fff;
display: flex;
align-items: center;
flex-wrap: nowrap;
color: #999;
}
.tui-category {
font-size: 24rpx;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 0;
margin-right: 22rpx;
flex-shrink: 0;
}
.tui-category-scale {
transform: scale(0.7);
line-height: 24rpx;
}
.tui-icon-category {
line-height: 20px !important;
margin-bottom: 0 !important;
}
.tui-swiper {
font-size: 26rpx;
height: 60rpx;
flex: 1;
padding-left: 12rpx;
}
.tui-swiper-item {
display: flex;
align-items: center;
}
.tui-hot-item {
line-height: 26rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tui-header-banner {
box-sizing: border-box;
background: #e41f19;
padding-top: 110rpx;
}
.tui-hot-search {
color: #fff;
font-size: 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20rpx;
box-sizing: border-box;
position: relative;
z-index: 2;
}
.tui-hot-tag {
background: rgba(255, 255, 255, 0.15);
padding: 10rpx 24rpx;
border-radius: 30rpx;
display: flex;
align-items: center;
justify-content: center;
line-height: 24rpx;
margin-left: 20rpx;
min-width: 120rpx;
}
.tui-banner-bg {
display: flex;
height: 180rpx;
background: #e41f19;
position: relative;
}
.tui-primary-bg {
width: 50%;
display: inline-block;
height: 224rpx;
border: 1px solid transparent;
position: relative;
z-index: 1;
background: #e41f19;
}
.tui-route-left {
transform: skewY(8deg);
}
.tui-route-right {
transform: skewY(-8deg);
}
.tui-banner-box {
width: 100%;
padding: 0 20rpx;
box-sizing: border-box;
position: absolute;
/* overflow: hidden; */
z-index: 99;
bottom: -80rpx;
left: 0;
}
.tui-banner-swiper {
width: 100%;
height: 240rpx;
border-radius: 12rpx;
overflow: hidden;
transform: translateY(0);
}
.tui-slide-image {
width: 100%;
height: 240rpx;
display: block;
}
/* #ifdef APP-PLUS || MP */
.tui-banner-swiper .wx-swiper-dot {
width: 8rpx;
height: 8rpx;
display: inline-flex;
background: none;
justify-content: space-between;
}
.tui-banner-swiper .wx-swiper-dot::before {
content: '';
flex-grow: 1;
background: rgba(255, 255, 255, 0.8);
border-radius: 16rpx;
overflow: hidden;
}
.tui-banner-swiper .wx-swiper-dot-active::before {
background: #fff;
}
.tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
width: 16rpx;
}
/* #endif */
/* #ifdef H5 */
>>>.tui-banner-swiper .uni-swiper-dot {
width: 8rpx;
height: 8rpx;
display: inline-flex;
background: none;
justify-content: space-between;
}
>>>.tui-banner-swiper .uni-swiper-dot::before {
content: '';
flex-grow: 1;
background: rgba(255, 255, 255, 0.8);
border-radius: 16rpx;
overflow: hidden;
}
>>>.tui-banner-swiper .uni-swiper-dot-active::before {
background: #fff;
}
>>>.tui-banner-swiper .uni-swiper-dot.uni-swiper-dot-active {
width: 16rpx;
}
/* #endif */
.tui-product-category {
background: #fff;
padding: 80rpx 20rpx 30rpx 20rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
font-size: 24rpx;
color: #555;
margin-bottom: 20rpx;
}
.tui-category-item {
width: 20%;
height: 118rpx;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
padding-top: 30rpx;
}
.tui-category-img {
height: 80rpx;
width: 80rpx;
display: block;
}
.tui-category-name {
line-height: 24rpx;
}
.tui-product-box {
margin-top: 20rpx;
padding: 0 20rpx;
box-sizing: border-box;
}
.tui-pb-20 {
padding-bottom: 20rpx;
}
.tui-bg-white {
background: #fff;
}
.tui-group-name {
font-size: 32rpx;
font-weight: bold;
text-align: center;
padding: 24rpx 0;
align-items: center;
}
.tui-activity-box {
display: flex;
border-radius: 12rpx;
overflow: hidden;
}
.tui-activity-img {
width: 50%;
display: block;
}
.tui-new-box {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.tui-new-item {
width: 49%;
height: 200rpx;
padding: 0 20rpx;
box-sizing: border-box;
display: flex;
align-items: center;
background: #f5f2f9;
position: relative;
border-radius: 12rpx;
}
.tui-new-mtop {
margin-top: 2%;
}
.tui-title-box {
font-size: 24rpx;
}
.tui-new-title {
line-height: 32rpx;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.tui-new-price {
padding-top: 18rpx;
display: flex;
flex-direction: column;
}
.tui-new-present {
color: #ff201f;
font-weight: bold;
}
.tui-new-original {
display: inline-block;
color: #a0a0a0;
text-decoration: line-through;
padding-left: 12rpx;
transform: scale(0.8);
transform-origin: center center;
}
.tui-new-img {
width: 160rpx;
height: 160rpx;
display: block;
flex-shrink: 0;
}
.tui-new-label {
width: 56rpx;
height: 56rpx;
border-top-left-radius: 12rpx;
position: absolute;
left: 0;
top: 0;
}
.tui-product-list {
display: flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
box-sizing: border-box;
/* padding-top: 20rpx; */
}
.tui-product-container {
flex: 1;
margin-right: 2%;
}
.tui-product-container:last-child {
margin-right: 0;
}
.tui-pro-item {
width: 100%;
margin-bottom: 4%;
background: #fff;
box-sizing: border-box;
border-radius: 12rpx;
overflow: hidden;
}
.tui-pro-img {
width: 100%;
display: block;
}
.tui-pro-content {
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
padding: 20rpx;
}
.tui-pro-tit {
color: #2e2e2e;
font-size: 26rpx;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.tui-pro-price {
padding-top: 18rpx;
}
.tui-sale-price {
font-size: 34rpx;
font-weight: 500;
color: #e41f19;
}
.tui-factory-price {
font-size: 24rpx;
color: #a0a0a0;
text-decoration: line-through;
padding-left: 12rpx;
}
.tui-pro-pay {
padding-top: 10rpx;
font-size: 24rpx;
color: #656565;
}
.margin-top-45 {
margin-top: 45px;
}
.scroll-view_H {
width: 646rpx;
}
.shareposts {
display: flex;
position: fixed;
right: 0rpx;
top: 800rpx;
.shareposts-icon-size {
width: 120rpx;
height: 120rpx;
}
}
.post {
background: rgba($color: #000000, $alpha: 0.65);
.wrapper {
height: 800rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
.can-sty {
height: 1200rpx;
width: 750rpx;
background-color: rgb(255, 255, 255);
}
.metion {
position: relative;
top: 220rpx;
padding: 40rpx;
color: #ffffff;
font-size: 30upx;
margin-top: 70upx;
}
.previewImaged {
position: fixed;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba($color: #000000, $alpha: 0.65);
z-index: 999;
}
.zl-pro-box{
display: flex;
flex-direction: column;
}
.zl-pro-box-title{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 20rpx 0;
font-size:24rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(51,51,51,1);
line-height:34rpx;
}
.tui-group-name-line{
width:272rpx;
height:2rpx;
background: #C9C9C9;
}
</style>
