mashangyoujiu/Application/Vip/View/Turntable/choose_store.html

<!DOCTYPE html>
<html>
<!--[1.4.13]-->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/vue/element-ui.2.8.2.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/vue/element-ui.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Retail/css/myscroll.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/common-upload.css">
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/js/vue2.5.16.js"></script>
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/element-ui.2.8.2.js"></script>
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/element-ui.js"></script>
    <title>选择门店</title>
    <style>
        body {
            background-color: #F6F6F6;
            font-size: 36px;
        }

        /* 列表 */
        .contents {
            margin: 3vw 0 3vw 2vw;
            padding: 0 4vw;
            width: 86vw;
            background-color: #FFFFFF;
            border-radius: 20px;
            height: 225px;
        }

        .contents > div {
            display: flex;
        }

        .contents > div:nth-child(1) {
            border-bottom: 2px solid #E5E5E5;
            padding: 2vh 0;
        }

        .contents > div:nth-child(2) {
            margin-top: 2vh;
        }

        .item1 {
            justify-content: space-between;
        }

        /* 领取按钮 */
        .buttons1 {
            background-color: #FF5C6D;
            width: 86vw;
            height: 120px;
            line-height: 120px;
            text-align: center;
            color: #FFFFFF;
            border-radius: 60px;
            position: fixed;
            left: 6vw;
            bottom: 3vh;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="main">
        <div class="contents" v-for="(item,index) in list1" :key="index" @click="chooseStore(item,index)">
            <div class="item1">
                <div>{{item.storetag}}</div>
                <div>
                    <img src="/Public/activity/kao.png" v-if="store_index==index">
                    <img src="/Public/activity/kas.png" v-if="store_index!=index">
                </div>
            </div>
            <div class="item1">
                <div>{{item.storetag}}距您{{item.juli}}米</div>
                <div><img src="/Public/activity/you.png"></div>
            </div>
        </div>
        <!-- 领取 -->
        <div class="buttons1" @click="Determine">确定</div>
    </div>
</div>
</body>
<script type="text/javascript" src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return (false);
    }
</script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: function () {
            return {
                list1: [],//门店信息
                choose_store_id: '',//选择的门店id
                store_index: null,//已选门店下标
                win_id: '',//中奖记录ID
                latitudes: '',// 纬度
                longitudes: '',// 经度
            }
        },
        methods: {
            getLatLng() {
                wx.ready(function () {
                    wx.checkJsApi({
                        jsApiList: [
                            'getLocation'
                        ],
                        success: function (res) {
                            if (res.checkResult.getLocation == false) {
                                alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
                                return;
                            }
                        }
                    });
                    wx.getLocation({
                        success: function (res) {
                            var latitude = res.latitude;        // 纬度，浮点数，范围为90 ~ -90
                            var longitude = res.longitude;      // 经度，浮点数，范围为180 ~ -180。
                            this.latitudes = latitude
                            this.longitudes = longitude
                        },
                        cancel: function (res) {
                            alertBtn('用户拒绝授权获取地理位置');
                        }
                    })
                })
            },
            // 门店信息
            mentions() {
                $.ajax({
                    url: '{:u("Turntable/getDeliveryStore")}',
                    type: 'post',
                    data: {
                        win_id: this.win_id,//中奖记录ID
                        latitude: this.latitudes,
                        longitude: this.longitudes
                    },
                    dataType: 'json',
                    success: res => {
                        this.list1 = res.data
                    }
                })
            },
            chooseStore(item, index) {
                this.store_index = index
                this.choose_store_id = item.id
            },
            Determine() {
                let choose_store_id = this.choose_store_id;
                let win_id = this.win_id
                let prize_id = getQueryVariable('prize_id')
                window.location.href = `{:U('choose_send_type')}?choose_store_id=${choose_store_id}&win_id=${win_id}&prize_id=${prize_id}`;
            }
        },
        mounted: function () {
            this.win_id = getQueryVariable('win_id');
            this.mentions();
        },
        created:function () {
            this.getLatLng()
        }
    })
    wx.config({
        debug: false,
        appId: '{$signPackage.appId}',
        timestamp: '{$signPackage.timestamp}',
        nonceStr: '{$signPackage.nonceStr}',
        signature: '{$signPackage.signature}',
        jsApiList:
            [
                'checkJsApi',
                'openLocation',
                'getLocation',
                'onMenuShareAppMessage',
                'onMenuShareTimeline'
            ]
    });
</script>
</html>