123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515 |
- <!-- 我的足迹页面 -->
- <template>
- <view class="container" :class="{container_FF: recommendLen == 0 && historyList.length == 0}">
- <!-- #ifndef MP-WEIXIN -->
- <uni-nav-bar fixed='true' color='#333' status-bar='true' :left-icon="nav_left_icon" :right-text="topRightText" title="我的足迹"
- @clickRight='clearHistory' @clickLeft="goBack"></uni-nav-bar>
- <!-- #endif -->
- <!-- #ifdef MP-WEIXIN -->
- <view class="clear_history" v-if="historyList.length > 0">
- <view class="clear_history_text" v-if="settings && settings.length > 0">
- <image :src="settings[1]" mode="" v-if="settings[1]"></image>
- <text v-if="settings[0]">{{settings[0]}}</text>
- </view>
- <view class="clear_history_btn" @click="clearHistory">{{$L('清空')}}</view>
- </view>
- <!-- #endif-->
- <!-- 空白页 start-->
- <view v-if="!historyList.length&&loadingState != 'first_loading'" class="flex_column_start_center empty_part" :class="{empty_part_FF:recommendLen == 0 && historyList.length == 0}">
- <image class="img" :src="imgUrl+'empty_footprint.png'" />
- <text class="tip_con">{{$L('暂无浏览的足迹哦')}}~</text>
- <view class="ope_btn flex_row_center_center" @click="goGoodsList()">
- {{$L('马上去逛逛')}}
- </view>
- </view>
- <!-- 空白页 end-->
- <!-- 足迹里的商品 start-->
- <view v-if='historyList.length' class="goods_list flex_column_start_start">
- <view class="history_item flex_column_start_start" v-for="(item,index) in historyList" :key='index'>
- <view class="time_tag flex_row_center_center">
- {{item.time}}
- </view>
- <goodsHistoryItemH v-for="(item_goods,index_goods) in item.productLookLogInfoList" :key='index_goods' :goods_info="item_goods" :isWeiXinBrower="isWeiXinBrower"
- @delGoods='delHistoryGoods' :goods_index='index_goods' :item_index='index_goods' @goShare="shareGoods1" @touchstart.native="handleTouchStart($event,item_goods.followId)" @touchmove.native="handleTouchMove($event,item_goods.followId)" :style="{left:is_show_btn && followId == item_goods.followId?'-160rpx':'0'}" :left="is_show_btn && followId == item_goods.followId"/>
- </view>
- </view>
- <loadingState v-if="loadingState == 'first_loading'||historyList.length > 0" :state='loadingState' :showEndFlag='showEndFlag' />
- <!-- 足迹里的商品 end-->
- <!-- 推荐商品 start-->
- <view v-if='!hasMore || !historyList.length'>
- <recommendGoods ref='recomment_goods' />
- </view>
- <!-- 推荐商品 end-->
- <uni-popup ref="popup" type="dialog">
- <uni-popup-dialog type="input" :title="$L('提示')" :content="$L('确定清空浏览记录吗?')" :duration="2000" before-close="true" @close="cancleEmpty"
- @confirm="confirmEmpty"></uni-popup-dialog>
- </uni-popup>
- <!-- 微信浏览器分享提示 start-->
- <view class="wx_brower_share_mask" v-if="showWeiXinBrowerTip">
- <view class="wx_brower_share_top_wrap">
- <image :src="imgUrl+'wx_share_tip.png'" mode="widthFix" @tap="closeShareModel" class="wx_brower_share_img"></image>
- </view>
- </view>
- <!-- 微信浏览器分享提示 end-->
- <!-- 分享弹框 start -->
- <view class="share_model" v-if="share_model" @touchmove.stop.prevent="moveHandle">
- <view class="share_model_list">
- <!-- #ifdef H5 -->
- <view class="share_model_pre" @tap.stop="sldShareBrower" v-if="isWeiXinBrower">
- <image :src="imgUrl+'goods_detail/wx_share.png'" mode=""></image>
- <text>{{$L('微信好友')}}</text>
- </view>
- <!-- #endif -->
- <!-- #ifdef MP-WEIXIN -->
- <button open-type="share" class="share_model_pre">
- <image :src="imgUrl+'goods_detail/wx_share.png'" mode=""></image>
- <text>{{$L('微信好友')}}</text>
- </button>
- <!-- #endif -->
- <!-- #ifdef APP-PLUS -->
- <view class="share_model_pre" @tap.stop="sldShare(0,'WXSceneSession')">
- <image :src="imgUrl+'goods_detail/wx_share.png'" mode=""></image>
- <text>{{$L('微信好友')}}</text>
- </view>
- <view class="share_model_pre" @tap.stop="sldShare(0,'WXSenceTimeline')">
- <image :src="imgUrl+'goods_detail/wechat_moments.png'" mode=""></image>
- <text>{{$L('微信朋友圈')}}</text>
- </view>
- <!-- #endif -->
- </view>
- <view class="share_model_close" @click="closeShareModel">
- <image :src="imgUrl+'goods_detail/share_close.png'" mode=""></image>
- </view>
- </view>
- <!-- 分享弹框 end -->
- </view>
- </template>
- <script>
- import recommendGoods from "@/components/recommend-goods.vue"
- import goodsHistoryItemH from "@/components/goods_history_item_h.vue";
- import loadingState from "@/components/loading-state.vue";
- import uniPopup from '@/components/uni-popup/uni-popup.vue'
- import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
- import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
- import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
- import {
- mapState
- } from 'vuex';
- export default {
- components: {
- recommendGoods,
- goodsHistoryItemH,
- loadingState,
- uniPopup,
- uniPopupMessage,
- uniPopupDialog,
- uniNavBar
- },
- data() {
- return {
- imgUrl: getApp().globalData.imgUrl,
- historyList: [], //足迹列表
- hasMore: true, //是否还有数据
- pageSize: 10,
- current: 1,
- loadingState: 'first_loading',
- showEndFlag: true, //设置为false则不展示最后的加载完成提示
- settings:[], //配置信息
- topRightText:'清空',
- nav_left_icon: 'back', //底部tab进入的话为空,否则为back
- share_model:false, //分享弹框
- isWeiXinBrower:false,//是否微信浏览器
- showWeiXinBrowerTip:false,//微信浏览器分享的提示操作
- recommendLen:0, //推荐商品的length长度
- followId:'',
- startX:'',
- startY:'',
- is_show_btn:false, //是否展示
- };
- },
- onLoad(option) {
- this.getSettings();
- // #ifdef H5
- this.isWeiXinBrower = this.$isWeiXinBrower();
- // #endif
- // 父页面接收子组件recommend——goods.vue传过来的值
- uni.$on("recommendGoods",(options)=>{
- this.recommendLen = JSON.parse(options.recommendLen)
- })
- },
- onShow(option){
- this.getList();
- },
- computed: {
- ...mapState(['userInfo'])
- },
- onShareAppMessage: function() {
- setTimeout(()=>{
- this.share_model=false;
- },1000);
-
- return {
- title: this.shareGoods.goodsName,
- path: '/pages/product/detail?productId='+this.shareGoods.productId+'&goodsId='+this.shareGoods.goodsId,
- imageUrl: this.shareGoods.goodsImage
- };
- },
- methods: {
- //浏览器分享
- sldShareBrower() {
- this.showWeiXinBrowerTip = true;
- this.share_model = false;
- this.$weiXinBrowerShare(1,{
- title:this.shareGoods.goodsName,
- desc:this.shareGoods.goodsBrief,
- link:this.shareGoods.shareLink,
- imgUrl:this.shareGoods.goodsImage,
- });
- },
- //分享 type:分享类型 0 图文 2图片,scene 场景 WXSceneSession:分享朋友 WXSenceTimeline:分享朋友圈
- sldShare: function(type,scene) {
- let shareData = {};
- shareData.href = this.shareGoods.shareLink;
- shareData.title = this.shareGoods.goodsName;
- shareData.summary = this.shareGoods.goodsBrief;
- shareData.imageUrl = this.shareGoods.goodsImage;
- this.$weiXinAppShare(type,scene,shareData);
- this.closeShareModel();//关闭分享
- },
- //分享当前商品
- shareGoods1(shareGoods){
- this.shareGoods = shareGoods;
- this.share_model = true;
- },
- //关闭分享弹框
- closeShareModel(){
- this.share_model = false;
- this.showWeiXinBrowerTip = false;
- },
- //清空足迹
- clearHistory(){
- this.$refs.popup.open();
- },
- //获取足迹里的商品
- getList() {
- let params = {};
- params.url = 'v3/member/front/productLookLog/list';
- params.method = 'GET';
- params.data = {};
- params.data.pageSize = this.pageSize;
- params.data.current = this.current;
- this.loadingState = this.loadingState == 'first_loading' ? this.loadingState : 'loading';
- this.$request(params).then(res => {
- if (res.state == 200) {
- if (this.current == 1) {
- this.historyList = res.data.list;
- } else {
- this.historyList = this.historyList.concat(res.data.list);
- }
- this.hasMore = this.$checkPaginationHasMore(res.data.pagination); //是否还有数据
- if (this.hasMore) {
- this.current++;
- this.loadingState = 'allow_loading_more';
- } else {
- this.loadingState = 'no_more_data';
- }
- if(this.historyList.length > 0){
- this.topRightText = '清空'
- }else{
- this.topRightText = ''
- }
- } else {
- this.$api.msg(res.msg);
- }
- }).catch((e) => {
- //异常处理
- })
- },
- //马上去逛逛事件
- goGoodsList() {
- uni.navigateTo({
- url: `/pages/product/list`
- })
- },
- //页面触底事件
- onReachBottom() {
- if (this.hasMore == false) {
- this.$refs.recomment_goods.getMoreData();
- } else {
- this.getList();
- }
- },
- //删除足迹
- delHistoryGoods(itemIndex, goodsIndex, id) {
- this.$request({
- url: 'v3/member/front/productLookLog/del',
- data: {
- logIds: id
- },
- method: 'POST'
- }).then(res => {
- this.$api.msg(res.msg);
- if (res.state == 200) {
- //更新页面数据
- // this.historyList = []
- if(this.current!=1){
- this.current-=1
- }
- this.getList();
- // if (this.historyList[itemIndex].productLookLogInfoList.length > 1) {
- // //只删除商品
- // this.historyList[itemIndex].productLookLogInfoList.splice(goodsIndex, 1);
- // } else {
- // //商品商品和日期
- // this.historyList.splice(itemIndex, 1);
- // }
- // if (this.historyList.length == 4) {
- // this.getList();
- // }
- }
- }).catch((e) => {
- //异常处理
- })
- },
- //取消清空足迹
- cancleEmpty() {
- this.$refs.popup.close();
- },
- //确认清空足迹事件
- confirmEmpty() {
- this.$request({
- url: 'v3/member/front/productLookLog/empty',
- method: 'GET'
- }).then(res => {
- this.$api.msg(res.msg);
- if (res.state == 200) {
- //更新页面数据
- this.historyList = [];
- this.topRightText = '';
- }
- this.cancleEmpty();
- }).catch((e) => {
- //异常处理
- })
- },
- //获取配置信息接口
- getSettings(){
- this.$request({
- url: 'v3/system/front/setting/getSettings',
- data: {
- names: 'basic_site_name,main_site_logo'
- },
- method: 'GET'
- }).then(res => {
- if (res.state == 200) {
- //更新页面数据
- this.settings = res.data || [];
- }
- }).catch((e) => {
- this.$api.msg(res.msg);
- //异常处理
- })
- },
- //返回上一页
- goBack(){
- uni.navigateBack()
- },
- handleTouchStart(e,followId){
- this.startX = e.touches[0].clientX;
- this.startY = e.touches[0].clientY;
- },
- handleTouchMove(e,followId){
- // 获得当前坐标
- this.followId = followId
- this.currentX = e.touches[0].clientX;
- this.currentY = e.touches[0].clientY;
- const x = this.startX - this.currentX; //横向移动距离
- const y = Math.abs(this.startY - this.currentY); //纵向移动距离,若向左移动有点倾斜也可以接受
- if (x > 5) {
- //向左滑显示
- this.is_show_btn = true
- } else if (x < 5) {
- //向右滑隐藏
- this.is_show_btn = false
- }
- if(y>50 || y<-50){
- this.is_show_btn = false
- }
- },
- onPageScroll(e){
- this.followId = ''
- },
- }
- }
- </script>
- <style lang='scss'>
- page {
- width: 750rpx;
- margin: 0 auto;
- }
- .container{
- background: $bg-color-split;
- }
- .container_FF{
- background: #FFFFFF;
- }
- .clear_history{
- background: #FFFFFF;
- padding: 30rpx;
- display: flex;
- justify-content: space-between;
- align-items: center;
- .clear_history_text{
- display: flex;
- align-items: center;
- image{
- width: 32rpx;
- height: 32rpx;
- margin-right: 10rpx;
- }
- text{
- font-size: 28rpx;
- }
- }
- .clear_history_btn{
- font-size: 28rpx;
- }
- }
- .empty_part {
- display: flex;
- flex: 1;
- width: 100%;
- height: 516rpx;
- background: #fff;
- border-top: 20rpx solid $bg-color-split;
- .img {
- width: 210rpx;
- height: 210rpx;
- margin-bottom: 37rpx;
- margin-top: 88rpx;
- }
- .tip_con {
- color: $main-third-color;
- font-size: 26rpx;
- }
- .ope_btn {
- color: $main-color;
- font-size: 28rpx;
- padding: 0 25rpx;
- height: 54rpx;
- background: rgba(252, 28, 28, .1);
- border-radius: 27rpx;
- margin-top: 20rpx;
- }
- }
- .empty_part_FF{
- height: auto;
- padding-top: 200rpx;
- }
- .goods_list {
- .history_item {
- border-top: 20rpx solid $bg-color-split;
- background: #fff;
- overflow: hidden;
- .time_tag {
- margin: 20rpx 0;
- /* width: 137rpx; */
- padding: 5rpx 10rpx;
- height: 40rpx;
- background: rgba(252, 28, 28, .05);
- border-radius: 0 20rpx 20rpx 0;
- color: $main-color;
- font-size: 28rpx;
- line-height: 40rpx;
- }
- }
- }
- /* 分享弹框 start */
- .share_model{
- width:750rpx;
- height:100%;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- margin: 0 auto;
- background: rgba(0,0,0,0.6);
- z-index: 100;
- }
- .share_model_list{
- display: flex;
- justify-content: space-around;
- padding: 0 50rpx;
- box-sizing: border-box;
- position: fixed;
- bottom: 150rpx;
- z-index: 110;
- width: 750rpx;
- .share_model_pre{
- display: flex;
- flex-direction: column;
- align-items: center;
- background: transparent;
- border-radius: 0;
- height: auto;
- line-height: auto;
- &::after{
- border-width: 0;
- }
- image{
- width: 105rpx;
- height: 105rpx;
- }
- text{
- font-size: 24rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #FFFFFF;
- line-height: 36rpx;
- margin-top: 30rpx;
- }
- }
- }
- .share_model_close{
- width: 46rpx;
- height: 46rpx;
- bottom: 60rpx;
- position: fixed;
- z-index: 110;
- left: 0;
- right: 0;
- margin: 0 auto;
- image{
- width: 46rpx;
- height: 46rpx;
- }
- }
- button{
- padding: 0;
- margin: 0;
- }
- /* 分享弹框 end */
- uni-page-body {
- display: flex;
- height: 100%;
- }
- </style>
|