<template>
    <view style="width: 100%;overflow-x: hidden;background-color: #F8EEF7;height: 200vh;" v-if="!isLoading">
        <gui-page :customFooter="true" iphoneXButtomStyle="background:#F8EEF7;"
                  :footerSets="{height:120, zIndex:100, bg:'none'}">
            <view slot="gBody" :style="appThemeStyle" style="width: 100%;overflow-x: hidden;">
                <view style="width: 100%;overflow-x: hidden">

                    <view>
                        <image src="../../static/3334.png" style="width: 100%;z-index: 0;position: absolute;">
                        </image>
                    </view>
                    <view style="height: 40rpx;"></view>
                    <view style="font-size: 35rpx;z-index: 11;position: absolute;">
                        <view style="display: flex;width: 100%;margin-bottom: 20rpx;">


                            <view
                                style="color: #FFF; width: 20%;display:flex;justify-content: center;align-items: center;">
                                <view style="display: flex;width:100%;padding-left: 10rpx;" @click="onLocate">
                                    <u-icon name="map"></u-icon>
                                    <text class="oneline-hide" style="font-size: 28rpx;">{{ city }}</text>
                                </view>

                            </view>

                            <view style="padding: 10rpx 20rpx;position: relative;width:80%;" @click="sousuo">
                                <gui-search placeholder="请输入关键词搜索" @inputting="inputting" @confirm="confirm"
                                            disabled
                                            @tapme="sousuo"></gui-search>
                            </view>
                        </view>

                        <!--						<view class="diy-navBar" style="color: #666666;">-->
                        <!--							<view class="data-list avg-sm-5">-->
                        <!--								<view class="item-nav" v-for="(item,index) in shopList"-->
                        <!--									@click="handleTargetExtract(item.shop_id)">-->
                        <!--									<view class="nav-to">-->
                        <!--										<view class="item-image">-->
                        <!--											<image class="image" :src="item.logo_url"-->
                        <!--												style="border: 5rpx solid #633981;">-->
                        <!--											</image>-->
                        <!--										</view>-->
                        <!--										<view class="item-text oneline-hide">{{item.shop_name}}</view>-->
                        <!--									</view>-->
                        <!--								</view>-->
                        <!--							</view>-->
                        <!--						</view>-->

                        <Page :items="items"/>

                        <view v-if="!isLoading">


                            <view style="padding: 20rpx 0;background-color: #F8EEF7;">
                                <gui-switch-navigation activeLineBg="linear-gradient(to right, #9E1A91, #4D0868)"
                                                       activeLineWidth="80rpx" padding="30rpx" :size="0"
                                                       textAlign="center"
                                                       activeDirection="center"
                                                       :items="[{id:0,name:'推荐'},{id:1,name:'周末活动'},{id:2,name:'附近商品'}]"
                                                       @change="navchange"></gui-switch-navigation>
                            </view>
                            <!-- <view style="padding: 20rpx 0;background-color: #F8EEF7;" v-if="!isAuthor">
                                <gui-switch-navigation activeLineBg="linear-gradient(to right, #9E1A91, #4D0868)"
                                    activeLineWidth="80rpx" padding="30rpx" :size="0" textAlign="center"
                                    activeDirection="center" :items="[{id:0,name:'推荐'},{id:1,name:'周末活动'}]"
                                    @change="navchange"></gui-switch-navigation>
                            </view> -->
                        </view>

                        <view style="width: 99%;margin: auto">
                            <u-waterfall v-model="flowList" ref="uWaterfall">
                                <template v-slot:left="{leftList}">
                                    <view class="demo-warter" v-for="(item, index) in leftList" :key="index"
                                          @click="onTargetDetail(item.goods_id)">
                                        <view v-if="item.is_gg">

                                            <image :src="item.images"
                                                   style="width: 310rpx;height: 310rpx;border-radius: 10rpx;"
                                                   mode="aspectFill"></image>

                                            <view
                                                style=" position: absolute;left: 0;top: 20rpx;color: #fff;font-size: 20rpx;padding: 5rpx 10rpx;">
                                                <image src="../../static/zx.png" style="height: 40rpx;"
                                                       mode="heightFix">
                                                </image>
                                            </view>

                                        </view>
                                        <view v-else>

                                            <image :src="item.goods_image"
                                                   style="width: 310rpx;height: 310rpx;border-radius: 10rpx;"
                                                   mode="aspectFill"></image>


                                            <block v-if="inArray(item.goods_id,newIds)&&inArray(item.goods_id,hotIds)">
                                                <view
                                                    style="position: absolute;left: 0;top: 20rpx;color: #fff;font-size: 20rpx;padding: 5rpx 10rpx;">
                                                    <image src="../../static/zx.png" style="height: 40rpx;"
                                                           mode="heightFix">
                                                    </image>
                                                </view>
                                                <view
                                                    style="position: absolute;left: 0;top: 70rpx;color: #fff;font-size: 20rpx;padding: 5rpx 10rpx;">
                                                    <image src="../../static/hot.png" style="height: 40rpx;"
                                                           mode="heightFix">
                                                    </image>
                                                </view>

                                            </block>
                                            <block v-if="inArray(item.goods_id,newIds)&&!inArray(item.goods_id,hotIds)">
                                                <view
                                                    style="position: absolute;left: 0;top: 20rpx;color: #fff;font-size: 20rpx;padding: 5rpx 10rpx;">
                                                    <image src="../../static/zx.png" style="height: 40rpx;"
                                                           mode="heightFix">
                                                    </image>
                                                </view>

                                            </block>
                                            <block v-if="!inArray(item.goods_id,newIds)&&inArray(item.goods_id,hotIds)">
                                                <view
                                                    style="position: absolute;left: 0;top: 20rpx;color: #fff;font-size: 20rpx;padding: 5rpx 10rpx;">
                                                    <image src="../../static/hot.png" style="height: 40rpx;"
                                                           mode="heightFix">
                                                    </image>
                                                </view>


                                            </block>
                                            <view class="demo-title twoline-hide" style="font-weight: bold;">
                                                {{ item.goods_name }}
                                            </view>
                                            <view class="desc_footer">
                                                <text class="price_x">¥{{ item.goods_price_min }}</text>
                                                <text class="price_y col-9"
                                                      v-if=" item.line_price_min > 0">¥{{ item.line_price_min }}
                                                </text>
                                            </view>
                                            <view
                                                class="demo-shop gui-flex gui-rows gui-nowrap gui-align-items-center gui-space-between">
                                                <text>已售{{ item.goods_sales }}件</text>
                                                <text v-if="item.distance_unit">{{ item.distance_unit }}</text>
                                            </view>
                                            <!-- <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close"
                                        @click="remove(item.id)"></u-icon> -->

                                        </view>
                                    </view>
                                </template>
                                <template v-slot:right="{rightList}">
                                    <view class="demo-warter" v-for="(item, index) in rightList" :key="index"
                                          @click="onTargetDetail(item.goods_id)">
                                        <view v-if="item.is_gg">
                                            <image :src="item.images"
                                                   style="width: 330rpx;height: 330rpx;border-radius: 10rpx;"
                                                   mode="aspectFill"></image>
                                            <view
                                                style="position: absolute;left: 0;top: 20rpx;color: #fff;font-size: 20rpx;padding: 5rpx 10rpx;">
                                                <image src="../../static/zx.png" style="height: 40rpx;"
                                                       mode="heightFix">
                                                </image>
                                            </view>
                                        </view>
                                        <view v-else>
                                            <image :src="item.goods_image"
                                                   style="width: 330rpx;height: 330rpx;border-radius: 10rpx;"
                                                   mode="aspectFill"></image>

                                            <block v-if="inArray(item.goods_id,newIds)&&inArray(item.goods_id,hotIds)">
                                                <view
                                                    style="position: absolute;left: 0;top: 20rpx;color: #fff;font-size: 20rpx;padding: 5rpx 10rpx;">
                                                    <image src="../../static/zx.png" style="height: 40rpx;"
                                                           mode="heightFix">
                                                    </image>
                                                </view>
                                                <view
                                                    style="position: absolute;left: 0;top: 70rpx;color: #fff;font-size: 20rpx;padding: 5rpx 10rpx;">
                                                    <image src="../../static/hot.png" style="height: 40rpx;"
                                                           mode="heightFix">
                                                    </image>
                                                </view>

                                            </block>
                                            <block v-if="inArray(item.goods_id,newIds)&&!inArray(item.goods_id,hotIds)">
                                                <view
                                                    style="position: absolute;left: 0;top: 20rpx;color: #fff;font-size: 20rpx;padding: 5rpx 10rpx;">
                                                    <image src="../../static/zx.png" style="height: 40rpx;"
                                                           mode="heightFix">
                                                    </image>
                                                </view>


                                            </block>
                                            <block v-if="!inArray(item.goods_id,newIds)&&inArray(item.goods_id,hotIds)">
                                                <view
                                                    style="position: absolute;left: 0;top: 20rpx;color: #fff;font-size: 20rpx;padding: 5rpx 10rpx;">
                                                    <image src="../../static/hot.png" style="height: 40rpx;"
                                                           mode="heightFix">
                                                    </image>
                                                </view>


                                            </block>

                                            <view class="demo-title twoline-hide" style="font-weight: bold;">
                                                {{ item.goods_name }}
                                            </view>
                                            <view class="desc_footer">
                                                <text class="price_x">¥{{ item.goods_price_min }}</text>
                                                <text class="price_y col-9"
                                                      v-if=" item.line_price_min > 0">¥{{ item.line_price_min }}
                                                </text>
                                            </view>
                                            <view
                                                class="demo-shop gui-flex gui-rows gui-nowrap gui-align-items-center gui-space-between">
                                                <text>已售{{ item.goods_sales }}件</text>
                                                <text v-if="item.distance_unit">{{ item.distance_unit }}</text>
                                            </view>
                                        </view>

                                    </view>
                                </template>
                            </u-waterfall>
                        </view>

                        <view style="position: fixed;bottom: 200rpx;right: 20rpx;" v-if="top > 500">
                            <text @click="dingbu" class=" gui-icons"
                                  style="background: linear-gradient(to top, #4D0868, #9E1A91);color: #fff;padding: 20rpx;border-radius: 50%;">
                                &#xe637;
                            </text>
                        </view>
                        <view v-if="!isAuthor" class="widget-location dis-flex flex-x-center flex-y-center"
                              @click="onAuthorize()">
                            <text class="iconfont icon-locate"></text>
                        </view>

                        <view style="height: 180rpx;"></view>
                    </view>

                </view>

            </view>
            <view slot="gFooter" class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-end"
                  style="background: linear-gradient(to top, #0E001F, #7B0373 );padding-bottom: 100rpx;">
                <view class="gui-footer-icon-buttons" @tap="navChang(0)"
                      style="padding-bottom: 30rpx;;text-align: center;">
                    <view class="tab">
                        <image src="../../static/sys.png" mode="widthFix"></image>
                    </view>
                    <view style="color: #B32ABE;">
                        首页
                    </view>
                </view>

                <view class="gui-footer-icon-buttons" @tap="navChang(1)"
                      style="padding-bottom: 30rpx;;text-align: center;">
                    <view class="tab">
                        <image src="../../static/dd.png" mode="widthFix"></image>
                    </view>
                    <view>
                        订单
                    </view>
                </view>
                <view class="gui-footer-icon-buttons" @tap="navChang(2)"
                      style="padding-bottom: 30rpx;;text-align: center;">
                    <view class="tab">
                        <image src="../../static/wd.png" mode="widthFix"></image>
                    </view>
                    <view>
                        我的
                    </view>
                </view>
            </view>

            <gui-popup ref="guipopup1" :canCloseByShade="false">

                <view style="background-color: #fff;border-radius: 20rpx;">
                    <view style="width: 580rpx;height: 580rpx;">
                        <image :src="store.image_url"
                               style="width: 580rpx;height: 580rpx;border-top-left-radius:20rpx ;border-top-right-radius:20rpx ;">
                        </image>
                    </view>
                    <view v-if="store.goods_id > 0" @click="onTargetDetail(store.goods_id)"
                          style="width: 580rpx;height: 200rpx;background: rgba(187,52,238,0.2);display: flex;justify-content: center;align-items: center;">
                        <text
                            style="width: 300rpx;padding: 20rpx 0;background-color: #54125f;background: linear-gradient(to top, #4D0868, #9E1A91);color: #fff;text-align: center;border-radius: 40rpx;">
                            查看详情
                        </text>
                    </view>

                </view>
                <view style="text-align: center;color: #fff;font-size: 60rpx;margin-top: 20rpx;">
                    <text class=" gui-icons" @click="close1">&#xe78a;</text>
                </view>
            </gui-popup>

        </gui-page>


        <shortcut bottom="120rpx"/>
        <view class="settle-btn" v-if="showSettle">
            <view class="btn">
                <text @click="toSettle">我是商家，申请免费入驻互动平台</text>
                <u-icon name="close-circle-fill" color="white" @click="showSettle = false"/>
            </view>
        </view>
    </view>
</template>
<script>
import store from '@/store'
import Shortcut from '@/components/shortcut'
import * as UserApi from '@/api/user'

var graceJS = require('@/GraceUI5/js/grace.js');
import {
    inArray
} from '@/utils/util'
import {
    setCartTabBadge
} from '@/core/app'
import * as Api from '@/api/page'
import Page from '@/components/page'
import * as ShopApi from '@/api/shop'
import * as GoodsApi from '@/api/goods'
import * as SettingApi from '@/api/setting'

import {
    ACCESS_TOKEN,
    USER_ID
} from '@/store/mutation-types'
import storage from '@/utils/storage'
import * as LoginApi from '@/api/login'

// 登陆成功后执行
const loginSuccess = (commit, {
    token,
    userId
}) => {
    // 过期时间30天
    const expiryTime = 30 * 86400
    // 保存tokne和userId到缓存
    storage.set(USER_ID, userId, expiryTime)
    storage.set(ACCESS_TOKEN, token, expiryTime)
    // 记录到store全局变量
    commit('SET_TOKEN', token)
    commit('SET_USER_ID', userId)
}

const App = getApp()

export default {
    components: {
        Page,
        Shortcut
    },
    data() {
        return {
            leftList: [],
            rightList: [],
            newIds: [],
            hotIds: [],
            inArray,
            top: 0,
            // 页面参数
            options: {},
            // 页面属性
            page: {},
            // 页面元素
            items: [],
            // 门店列表
            shopList: [],
            face: "https://images.unsplash.com/photo-1661956601031-4cf09efadfce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMzF8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=100&q=90",
            list: [],
            flowList: [],
            loadStatus: 'loadmore',
            // 是否授权了定位权限
            isAuthor: true,
            isLoading: true,
            city: '南宁市',
            is_locate: 0,
            is_pas: 0,
            store: '',
            navCurrent: 0,
            zxIndex: 0,
            is_kind: 0,
            is_dingwei: 0,
            page_num: 1,
            latitude: '',
            longitude: '',
            showSettle: true,
            userInfo: null,
        }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

        let _this = this
        // this.getSetting()
        // 当前页面参数
        _this.options = options
        console.log(options)


        if (options.id) {
            store.dispatch('Logout', {}).then(result => {
                console.log('logut')
            })

            uni.setStorageSync('t_id', options.id)
            uni.setStorageSync('t_token', options.token)
            _this.getUserInfo(options.id, options.token)
        }


        _this.getNews()
        _this.getHots()
        console.log(585)
        _this.loading = true
        SettingApi.data()
            .then(result => {
                _this.store = result.data.setting.store
                console.log(_this.store.logo_image_id)
                var ad_index = storage.get('index_ad')
                if (_this.store.logo_image_id > 0 && !ad_index) {
                    graceJS.getRefs('guipopup1', _this, 0, (guipopupref) => {
                        guipopupref.open();
                    });
                }

                _this.getPageData();
                _this.getShopList();
                //_this.getDWList();
                //_this.getGoodsList()
                _this.getLocation(res => {
                    _this.flowList = []
                    _this.getDWList(res.longitude, res.latitude);
                    //_this.getGoodsList(res.longitude, res.latitude)

                })

                // 模拟数据加载
                setTimeout(() => {

                    this.isLoading = false;

                }, 500)


            })

    },
    onShow() {


        // var token = storage.get(ACCESS_TOKEN)
        // if (!token) {
        // 	// 加载页面数据
        // 	var id = this.options.id ? this.options.id : uni.getStorageSync('t_id')
        // 	var t_token = this.options.token ? this.options.token : uni.getStorageSync('t_token')
        // 	this.getUserInfo(id, t_token)
        // }
        this.city = uni.getStorageSync('city')
        var is_locate = uni.getStorageSync('is_locate')
        console.log(is_locate)
        if (is_locate == 1) {
            this.page_num = 1
            this.is_pas = 0

            this.flowList = []
            this.$nextTick(() => {
                if (this.$refs.uWaterfall) this.$refs.uWaterfall.clear();
            })
            this.getGoodsList()

        }


    },
    onReachBottom() {
        this.loadStatus = 'loading';
        this.page_num = this.page_num + 1

        this.getGoodsList()
        // 模拟数据加载
        setTimeout(() => {
            this.addRandomData();
            this.loadStatus = 'loadmore';

        }, 1000)
    },
    onPageScroll: function (e) {
        this.top = e.scrollTop;
        console.log(e.scrollTop)
    },
    methods: {


        getNews() {
            const app = this
            const param = {
                categoryId: app.options.categoryId || 0,

            }
            GoodsApi.newIds(param)
                .then(result => {

                    app.newIds = result.data.newIds

                })

        },
        getHots() {
            const app = this
            const param = {
                categoryId: app.options.categoryId || 0,

            }
            GoodsApi.hotIds(param)
                .then(result => {

                    app.hotIds = result.data.hotIds

                })

        },

        navchange(e) {
            let _this = this
            _this.page_num = 1
            console.log(e)
            //_this.is_kind = e
            _this.is_pas = e
            _this.flowList = []
            _this.$refs.uWaterfall.clear();

            _this.getGoodsList()
        },
        dingbu() {
            uni.pageScrollTo({
                scrollTop: 0,
                duration: 300 // 滚动到顶部的动画时长，单位为毫秒
            });
        },
        sousuo() {
            uni.navigateTo({
                url: '/pages/search/index'
            })
        },
        navChang: function (index) {
            if (index == 1) {
                uni.navigateTo({
                    url: '/pages/order/index'
                })
            }
            if (index == 2) {
                uni.navigateTo({
                    url: '/pages/user/index'
                })
            }

        },

        getUserInfo(id, token) {
            let _this = this

            Api.getUserInfo(id, token)
                .then(result => {
                    store.dispatch('Login', {
                        mobile: result.data.mobile

                    })
                        .then(result => {
                            // 显示登录成功
                            // app.$toast(result.message)
                            // // 跳转回原页面
                            // setTimeout(() => {
                            //   app.onNavigateBack(1)
                            // }, 2000)

                            UserApi.info().then(({data: {userInfo}}) => {
                                _this.userInfo = userInfo
                            })

                        })
                        .catch(err => {

                        })
                        .finally(() => _this.isLoading = false)
                })

        },

        getSetting() {
            let _this = this
            SettingApi.data()
                .then(result => {
                    _this.store = result.data.setting.store
                    console.log(_this.store.logo_image_id)
                    if (_this.store.logo_image_id > 0) {
                        graceJS.getRefs('guipopup1', _this, 0, (guipopupref) => {
                            guipopupref.open();
                        });
                    }

                })

        },
        open1: function () {
            this.$refs.guipopup1.open();
        },
        close1: function () {
            // 过期时间30天
            const expiryTime = 86400
            // 缓存
            storage.set('index_ad', 1, expiryTime)
            this.$refs.guipopup1.close();
        },
        getDWList(longitude, latitude) {
            const app = this

            Api.LonandLat({
                longitude,
                latitude
            })
                .then(result => {
                    this.city = result.data.ads.city
                    this.is_dingwei = 1
                    this.longitude = longitude
                    this.latitude = latitude
                    uni.setStorageSync('city', result.data.ads.city);
                    this.getGoodsList()
                })

        },
        // 获取列表
        getGoodsList() {
            const app = this

            GoodsApi.sylist({
                city: app.city,
                is_kind: app.is_kind,
                is_pas: app.is_pas,
                is_dingwei: app.is_dingwei,
                longitude: app.longitude,
                latitude: app.latitude,
                page: app.page_num
            })
                .then(result => {
                    app.list = result.data.list.data

                    app.addRandomData();
                })
        },
        getLocation(callback) {
            const app = this
            uni.getLocation({
                type: 'wgs84',
                success: callback,
                fail(res) {
                    app.$toast('获取定位失败，请点击右下角按钮重新尝试定位')
                    app.isAuthor = false
                }
            })
        },
        onAuthorize() {
            const app = this
            // #ifdef MP
            uni.openSetting({
                success(res) {
                    if (res.authSetting['scope.userLocation']) {
                        app.isAuthor = true
                        setTimeout(() => {
                            // 获取用户坐标
                            app.getLocation((res) => {
                                app.getGoodsList(res.longitude, res.latitude)
                                app.getDWList(res.longitude, res.latitude);
                            })
                        }, 1000)
                    }
                }
            })
            // #endif
            // #ifdef H5
            console.log('222')
            // 获取用户坐标
            app.getLocation((res) => {
                app.getShopList(res.longitude, res.latitude)
                app.getDWList(res.longitude, res.latitude);
            })
            // #endif
        },
        onTargetDetail(goodsId) {
            console.log(goodsId)
            if (goodsId > 0) {
                // 过期时间1天
                const expiryTime = 86400
                // 缓存
                storage.set('index_ad', 1, expiryTime)
                this.$navTo('pages/goods/detail', {
                    goodsId
                })
            }
        },
        addRandomData() {
            if (this.is_pas == 0) {
                console.log(this.store)
                if (this.store.onegg_id > 0) {
                    this.flowList.push({
                        images: this.store.onegg.preview_url,
                        url: '',
                        is_gg: true,
                        goods_id: this.store.onegg_goods_id,
                    });
                }
                if (this.store.twogg_id > 0) {
                    this.flowList.push({
                        images: this.store.twogg.preview_url,
                        url: '',
                        is_gg: true,
                        goods_id: this.store.twogg_goods_id,
                    });
                }
                if (this.store.threegg_id > 0) {
                    this.flowList.push({
                        images: this.store.threegg.preview_url,
                        url: '',
                        is_gg: true,
                        goods_id: this.store.threegg_goods_id,
                    });
                }
                this.is_pas = 2
            }
            // for (let i = 0; i < this.list.length; i++) {
            // 	let index = this.$u.random(0, this.list.length - 1);
            // 	// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
            // 	let item = this.list[index]
            // 	item.id = this.$u.guid();
            // 	this.flowList.push(item);
            // }

            for (let i = 0; i < this.list.length; i++) {


                let item = this.list[i]
                this.flowList.push({
                    goods_image: item.goods_image,
                    url: '',
                    is_gg: false,
                    goods_price_min: item.goods_price_min,
                    distance_unit: item.distance_unit,
                    line_price_min: item.line_price_min,
                    goods_sales: item.goods_sales,

                    goods_name: item.goods_name,
                    goods_id: item.goods_id,
                });
            }
        },
        handleTargetExtract(shopId) {
            this.$navTo('pages/shop/detail', {
                shopId
            })
        },
        getShopList() {
            const app = this
            ShopApi.list()
                .then(result => app.shopList = result.data.list)
        },
        onLocate() {
            this.is_locate = 0
            uni.setStorageSync('is_locate', '')
            uni.navigateTo({
                url: '/pages/locate/index'
            })
        },

        /**
         * 加载页面数据
         * @param {Object} callback
         */
        getPageData(callback) {
            const app = this
            const pageId = app.options.pageId || 0
            Api.detail(pageId)
                .then(result => {
                    // 设置页面数据
                    const {
                        data: {
                            pageData
                        }
                    } = result
                    app.page = pageData.page
                    app.items = pageData.items
                    // 设置顶部导航栏栏
                    app.setPageBar();
                })
                .finally(() => callback && callback())
        },

        /**
         * 设置顶部导航栏
         */
        setPageBar() {
            const {
                page
            } = this
            // 设置页面标题
            uni.setNavigationBarTitle({
                title: page.params.title
            });
            // 设置navbar标题、颜色
            uni.setNavigationBarColor({
                frontColor: page.style.titleTextColor === 'white' ? '#ffffff' : '#000000',
                backgroundColor: page.style.titleBackgroundColor
            })
        },
        toSettle() {
            const url = parseInt(this.userInfo.is_info) === 0 ? '/pages/user/settled/index' : '/pages/user/shop/index'
            uni.navigateTo({
                url
            })
        },
    },

    /**
     * 下拉刷新
     */
    onPullDownRefresh() {
        // 获取首页数据
        this.getPageData(() => {
            uni.stopPullDownRefresh()
        })
    },

    /**
     * 分享当前页面
     */
    onShareAppMessage() {
        const app = this
        const {
            page
        } = app
        return {
            title: page.params.share_title,
            path: "/pages/index/index?" + app.$getShareUrlParams()
        }
    },

    /**
     * 分享到朋友圈
     * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
     * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
     */
    onShareTimeline() {
        const app = this
        const {
            page
        } = app
        return {
            title: page.params.share_title,
            path: "/pages/index/index?" + app.$getShareUrlParams()
        }
    }

}
</script>
<style>
page {
    background: #F8EEF7 !important;
    overflow-x: hidden;

}
</style>
<style lang="scss" scoped>
.oneline-hide {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.diy-navBar .data-list::after {
    clear: both;
    content: " ";
    display: table;
}

.item-nav {
    float: left;
    margin: 10px 0;
    text-align: center;

    .item-text {
        font-size: 26rpx;
    }

    .item-image {
        margin-bottom: 4px;
        font-size: 0;
    }

    .item-image .image {
        width: 88rpx;
        height: 88rpx;
        border-radius: 50%;
    }

}

/* 分列布局 */

.diy-navBar .avg-sm-3 > .item-nav {
    width: 33.33333333%;
}

.diy-navBar .avg-sm-4 > .item-nav {
    width: 25%;
}

.diy-navBar .avg-sm-5 > .item-nav {
    width: 20%;
}
</style>


<style lang="scss" scoped>
.col-9 {
    color: #999;
}

.price_y {
    text-decoration: line-through;
    font-size: 24rpx;
}

.price_x {
    margin-right: 16rpx;
    color: $main-bg;
    font-size: 34rpx;
    line-height: 50rpx;
}

.demo-warter {
    border-radius: 8px;
    margin: 5px;
    background-color: #ffffff;
    padding: 8px;
    position: relative;
}

.u-close {
    position: absolute;
    top: 32rpx;
    right: 32rpx;
}

.demo-image {
    width: 100%;
    border-radius: 4px;
}

.demo-title {
    font-size: 30rpx;
    margin-top: 5px;
    color: $u-main-color;
}

.demo-tag {
    display: flex;
    margin-top: 5px;
}

.demo-tag-owner {
    background-color: $u-type-error;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 4rpx 14rpx;
    border-radius: 50rpx;
    font-size: 20rpx;
    line-height: 1;
}

.demo-tag-text {
    border: 1px solid $u-type-primary;
    color: $u-type-primary;
    margin-left: 10px;
    border-radius: 50rpx;
    line-height: 1;
    padding: 4rpx 14rpx;
    display: flex;
    align-items: center;
    border-radius: 50rpx;
    font-size: 20rpx;
}

.demo-price {
    font-size: 30rpx;
    color: $u-type-error;
    margin-top: 5px;
}

.demo-shop {
    font-size: 22rpx;
    color: $u-tips-color;
    margin-top: 5px;
}

.widget-location {
    position: fixed;
    right: calc(var(--window-right) + 40rpx);
    bottom: calc(var(--window-bottom) + 150rpx);
    width: 72rpx;
    height: 72rpx;
    z-index: 200;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
    color: #555;
    font-size: 40rpx;
}

.gui-footer-icon-buttons {
    color: #FFF;
    width: 130rpx;
    // height: 80rpx;
    padding: 20rpx 10rpx 10rpx;
    flex: 1;
    position: relative;
    margin: 0;
    // background-color: #F8F8F8;
}

.tab image {
    width: 50rpx;
    height: 60rpx;
}

.gui-footer-buttons-ab {
    position: absolute;
    z-index: 101;
    left: 325rpx;
    top: 0rpx;
    width: 110rpx;
    height: 150rpx;
}

.gui-footer-buttons-ab-icon {
    width: 110rpx;
    height: 110rpx;
    line-height: 120rpx;
    text-align: center;
    font-size: 68rpx;
    background-color: #F7F8FA;
    border-radius: 100rpx;
}


.settle-btn {
    position: fixed;
    bottom: 130rpx;
    left: calc(50% - 240rpx);
    z-index: 11;
    width: 480rpx;

    .btn {
        margin: auto;
        background: linear-gradient(90deg, #B6B7F8, #B603D9);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10rpx 20rpx;
        color: #ffffff;
        text-align: center;
        font-size: 25rpx;
        border-radius: 999rpx;

        text {
            margin-right: 10rpx
        }
    }
}
</style>