997 lines
23 KiB
Vue
997 lines
23 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="container">
|
|
<!--外层 -->
|
|
<!-- 顶部 -->
|
|
<view class="conttainer-top">
|
|
<!-- 轮播图 -->
|
|
<view style="width: 100%;height: 300px;">
|
|
<swiper class="swiper" style="width: 100%;height: 300px;" circular :indicator-dots="indicatorDots"
|
|
:autoplay="autoplay" :interval="interval" :duration="duration">
|
|
<swiper-item v-for="(item,index) in list1" :key="index" @click="goPage(item.routeUrl)">
|
|
<view class="swiper-item uni-bg-red">
|
|
|
|
<image style="width: 100%;" :src="item.bannerUrl"></image>
|
|
</view>
|
|
<!-- <image style="width: 100%;" :src="getBannerUrl(item.bannerUrl)"></image> -->
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
|
|
<!-- 标题 -->
|
|
<view class="top-title">
|
|
出行服务 优惠加油
|
|
</view>
|
|
<view class="lan-gang">
|
|
<view class="lsiez"> <uni-icons type="checkbox" color="#ffffff" size="10"></uni-icons> 一键加油</view>
|
|
<view class="lsiez"> <uni-icons type="checkbox" color="#ffffff" size="10"></uni-icons> 最近油站</view>
|
|
<view class="lsiez"> <uni-icons type="checkbox" color="#ffffff" size="10"></uni-icons> 地址导航</view>
|
|
</view>
|
|
<!-- 金刚区 -->
|
|
<view class="conttainer-jg">
|
|
<view class="jg-box" @click="toQRcode">
|
|
<view class="jg-img">
|
|
<image src="../../static/imgs/viprwm.png" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="jg-size">二维码</view>
|
|
</view>
|
|
<view class="jg-box" @click="goActivity()">
|
|
<view class="jg-img">
|
|
<image src="../../static/imgs/bzhd.png" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="jg-size">本站活动</view>
|
|
</view>
|
|
<view class="jg-box" @click="goCard()">
|
|
<view class="jg-img">
|
|
<image src="../../static/imgs/ykcz.png" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="jg-size">油卡充值</view>
|
|
</view>
|
|
<view class="jg-box" @click="goMall()">
|
|
<view class="jg-img">
|
|
<image src="../../static/imgs/jfsc.png" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="jg-size">积分商城</view>
|
|
</view>
|
|
|
|
</view>
|
|
<!-- 金刚区结束 -->
|
|
</view>
|
|
<!-- 顶部结束 -->
|
|
<!-- centenr -->
|
|
<view class="conttainer-cetr">
|
|
<view class="conttainer-title">今日会员价</view>
|
|
<!-- <view class="conttainer-box" v-for="(item,index) in oilTypeList" :key="index">
|
|
<view class="c-box-box1">
|
|
<view class="">{{item.oilName||''}}</view>
|
|
|
|
</view>
|
|
<view class="c-box-box2">
|
|
<view class="xred">会员价</view>
|
|
<view class="dred"> <text class="xred">￥</text> {{item.oilPrice||0}}</view>
|
|
</view>
|
|
<view class="c-box-box3">
|
|
<view class="xblck">国标价</view>
|
|
<view class="dblck"> <text class="xblck">￥</text> {{item.gbPrice||0}}</view>
|
|
</view>
|
|
</view> -->
|
|
|
|
<swiper class="swiper" style="width: 100%;height: 70px;" circular
|
|
:autoplay="autoplay" :interval="interval" :vertical="true" :duration="duration">
|
|
<swiper-item class="conttainer-box" v-for="(item,index) in oilTypeList" :key="index">
|
|
<view class="c-box-box1">
|
|
<view class="">{{item.oilName||''}}</view>
|
|
|
|
</view>
|
|
<view class="c-box-box2">
|
|
<view class="xred">会员价</view>
|
|
<view class="dred"> <text class="xred">￥</text> {{item.oilPrice||0}}</view>
|
|
</view>
|
|
<view class="c-box-box3">
|
|
<view class="xblck">国标价</view>
|
|
<view class="dblck"> <text class="xblck">￥</text> {{item.gbPrice||0}}</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
</view>
|
|
<!-- centenr结束 -->
|
|
<!-- 加油站卡片-->
|
|
<view class="station">
|
|
<view class="station-box">
|
|
|
|
<view class="station-title" style="display: flex;justify-content: space-between;">
|
|
{{store.name}}{{store.description ? "("+store.description+")" : ""}}
|
|
<!-- <view class="" @click="goChooseAddress" style="width: 22%;font-size: 14px;font-weight: 400;">
|
|
<view style="font-size: 12px;">切换位置 <uni-icons type="right" color="#304fff"
|
|
size="14"></uni-icons> </view>
|
|
</view> -->
|
|
</view><!--顺通石化加油站(工业南路站)-->
|
|
<view style="display: flex;">
|
|
<view class="bule-icon" v-if="welfare.length!=0" v-for="(item,index) in welfare" :key="index">
|
|
{{item}}
|
|
</view>
|
|
</view>
|
|
<view class="dis-bt">
|
|
<view class="">
|
|
<view class="hui1">{{ store.address }}</view>
|
|
<view class="hui2" v-if="distance">{{ distance }}km</view>
|
|
</view>
|
|
<view class="lananniu" @click="goGoGo" v-if="distance!=''">
|
|
<uni-icons type="paperplane-filled" color="#195ADA" size="16"></uni-icons>
|
|
{{ distance || "0" }}KM
|
|
</view>
|
|
</view>
|
|
<u-swiper :list="list3" previousMargin="30" nextMargin="30" circular :autoplay="false" radius="5"
|
|
bgColor="#ffffff"></u-swiper>
|
|
<view class="juanniu" @click="goOil()">
|
|
<view class="">一键加油</view>
|
|
</view>
|
|
</view>
|
|
<view style="height: 88px; width: 100%;"></view>
|
|
</view>
|
|
<!-- 加油站卡片结束-->
|
|
|
|
<u-picker :columns="columns" @confirm="confirm" :show="show" @cancel="show = false"
|
|
keyName="label"></u-picker>
|
|
<u-overlay :show="shows == true">
|
|
<image src="../../static/imgs/zzxryl.png"
|
|
style="width: 280px; height: 350px; margin: 20px auto; margin-top: 200px; ">
|
|
</image>
|
|
<view class="anniuprp" @click="drawDown()">
|
|
<text>立即领取</text>
|
|
</view>
|
|
</u-overlay>
|
|
<!--外层结束 -->
|
|
<tabbar :msg="msg"></tabbar>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tabbar from "../../components/tabbar/tabbar.vue"
|
|
import config from '@/config'
|
|
import request from '../../utils/request'
|
|
import {
|
|
callWithErrorHandling
|
|
} from "vue"
|
|
export default {
|
|
data() {
|
|
return {
|
|
chainStoreId: '',
|
|
indicatorDots: true,
|
|
autoplay: true,
|
|
interval: 3000,
|
|
duration: 500,
|
|
joinmsg: '',
|
|
msg: "1",
|
|
show: false,
|
|
shows: '',
|
|
title: '',
|
|
oilTypeList: '',
|
|
columns: [],
|
|
oilInfo: {
|
|
oilName: '未添加',
|
|
oilPrice: '0',
|
|
gbPrice: '0'
|
|
},
|
|
AppToken: uni.getStorageSync("App-Token"),
|
|
|
|
list1: [],
|
|
list3: [
|
|
'http://47.95.206.185:83/topbj.png',
|
|
],
|
|
// 当前经度信息
|
|
longitude: "",
|
|
// 当前纬度信息
|
|
latitude: "",
|
|
// 店铺经度信息
|
|
lon: "",
|
|
// 店铺纬度信息
|
|
lat: "",
|
|
// 店铺信息
|
|
store: {
|
|
name: "测试油站",
|
|
description: "济南分店",
|
|
address: "济南槐荫区"
|
|
},
|
|
// 店铺福利信息
|
|
welfare: [],
|
|
distance: "",
|
|
storeId: "",
|
|
staffId: "",
|
|
baseUrl: this.$baseUrl,
|
|
}
|
|
},
|
|
async onLoad(query) {
|
|
if (query.storeId) {
|
|
// uni.setStorageSync("y_storeId", query.storeId)
|
|
uni.setStorageSync("storeId", query.storeId)
|
|
}
|
|
if (query.type) {
|
|
uni.setStorageSync("y_type", query.type)
|
|
}
|
|
if (query.userId) {
|
|
uni.setStorageSync("y_userId", query.userId)
|
|
}
|
|
if (uni.getStorageSync("appltType") == "WECHAT") {
|
|
const q = decodeURIComponent(query.q) // 获取到二维码原始链接内容
|
|
if (query.q) {
|
|
let str = q.split("?")[1];
|
|
let storeId = "";
|
|
|
|
let staffId = "";
|
|
let userId = "";
|
|
let type = "";
|
|
console.log(111);
|
|
if (str.includes("&")) {
|
|
let arr = str.split("&");
|
|
arr.forEach(item => {
|
|
if (item.includes("storeId")) {
|
|
storeId = item.split("=")[1]
|
|
} else if (item.includes("staffId")) {
|
|
staffId = item.split("=")[1]
|
|
} else if (item.includes("userId")) {
|
|
userId = item.split("=")[1]
|
|
} else if (item.includes("type")) {
|
|
type = item.split("=")[1]
|
|
}
|
|
})
|
|
} else {
|
|
storeId = str.split("=")[1]
|
|
}
|
|
|
|
|
|
uni.setStorageSync("storeId", storeId)
|
|
uni.setStorageSync("y_type", type)
|
|
uni.setStorageSync("y_userId", userId)
|
|
uni.setStorageSync("inviteStaffId", staffId)
|
|
this.storeId = uni.getStorageSync("storeId")
|
|
this.chainStoreId = uni.getStorageSync("chainStoreId")
|
|
this.staffId = uni.getStorageSync("inviteStaffId")
|
|
await this.getUserAuthority();
|
|
// await this.getOilType();
|
|
} else {
|
|
if (uni.getStorageSync("storeId")) {
|
|
this.storeId = uni.getStorageSync("storeId")
|
|
} else {
|
|
let storeId = "34";
|
|
|
|
uni.setStorageSync("storeId", storeId)
|
|
}
|
|
await this.getUserAuthority();
|
|
// await this.getOilType();
|
|
}
|
|
|
|
await this.getTheJudgmentIsTheSame();
|
|
} else {
|
|
await this.getUserAuthority();
|
|
// await this.getOilType();
|
|
await this.getTheJudgmentIsTheSame();
|
|
}
|
|
},
|
|
onShow() {
|
|
this.isJoined()
|
|
// this.getIndexBanner()
|
|
},
|
|
components: {
|
|
tabbar
|
|
},
|
|
methods: {
|
|
// 返回图片路径
|
|
getBannerUrl(url) {
|
|
let imgurl = ""
|
|
if (url.includes("http")) {
|
|
imgurl = url
|
|
} else {
|
|
imgurl = this.baseUrl + url
|
|
}
|
|
return imgurl;
|
|
},
|
|
// 跳转banner图对应的页面
|
|
goPage(url) {
|
|
uni.navigateTo({
|
|
url: url,
|
|
})
|
|
},
|
|
// 获取首页轮播图信息
|
|
getIndexBanner() {
|
|
let _this = this
|
|
if (uni.getStorageSync("storeId")) {
|
|
request({
|
|
url: 'business/indexBanner/list/' + uni.getStorageSync("storeId"),
|
|
method: 'get',
|
|
}).then(res => {
|
|
_this.list1 = res.data
|
|
if (res.data.length > 0) {
|
|
for (let i = 0; i < res.data.length; i++) {
|
|
if (res.data[i].bannerUrl.includes("http")) {
|
|
_this.list1[i].bannerUrl = res.data[i].bannerUrl
|
|
} else {
|
|
_this.list1[i].bannerUrl = _this.baseUrl + res.data[i].bannerUrl
|
|
}
|
|
}
|
|
console.log(_this.list1);
|
|
}
|
|
})
|
|
}
|
|
},
|
|
//判断是否是新人
|
|
isJoined() {
|
|
// 判断是否登录
|
|
if (!this.AppToken) {
|
|
return;
|
|
}
|
|
request({
|
|
url: 'business/marketingActivity/activeNewlywedsRecords/applet',
|
|
method: 'get',
|
|
}).then(res => {
|
|
console.log("11111" + res)
|
|
if (res.code == 200 && res.data == 1) {
|
|
this.shows = true
|
|
} else {
|
|
this.shows = false
|
|
}
|
|
})
|
|
},
|
|
//立即领取
|
|
drawDown() {
|
|
/* this.shows = false */
|
|
request({
|
|
url: 'business/marketingActivity/activeNewlywedsRecords',
|
|
method: 'post',
|
|
data: {
|
|
storeId: this.storeId,
|
|
chainStoreId: this.chainStoreId,
|
|
}
|
|
}).then(res => {
|
|
console.log("11111" + res)
|
|
if (res.code == 200 && res.data == true) {
|
|
this.shows = false
|
|
uni.showToast({
|
|
title: '领取成功！'
|
|
})
|
|
} else {
|
|
this.shows = false
|
|
uni.showToast({
|
|
title: '领取失败！'
|
|
})
|
|
}
|
|
|
|
/* if (res.code == 200 && res.data == 1) {
|
|
this.shows = true
|
|
} else {
|
|
this.shows = false
|
|
} */
|
|
})
|
|
},
|
|
//查询新人有礼礼品
|
|
selectActiveNewlyweds() {
|
|
// 判断是否登录
|
|
if (!this.AppToken) {
|
|
return;
|
|
}
|
|
request({
|
|
url: 'business/marketingActivity/activeNewlyweds/applet',
|
|
method: 'get',
|
|
}).then(res => {
|
|
console.log("11111" + res)
|
|
})
|
|
},
|
|
isExistStoreId() {
|
|
if (uni.getStorageSync("storeId")) {
|
|
this.getStore(uni.getStorageSync("storeId"));
|
|
} else {
|
|
this.getAddress(uni.getStorageSync("storeId"));
|
|
}
|
|
},
|
|
// 获取定位信息
|
|
getUserAuthority() {
|
|
let _this = this;
|
|
// this.getAddress();
|
|
uni.getSetting({
|
|
async success(res) {
|
|
if (!res.authSetting['scope.userLocation']) {
|
|
// uni.authorize({
|
|
// scope: 'scope.userLocation',
|
|
// success() {
|
|
// // 用户同意获取位置信息
|
|
// // _this.isExistStoreId()
|
|
// },
|
|
// fail() {
|
|
// // 用户拒绝
|
|
// }
|
|
// })
|
|
await _this.getAddress(uni.getStorageSync("storeId"));
|
|
} else {
|
|
// 用户同意获取位置信息
|
|
// _this.isExistStoreId()
|
|
await _this.getAddress(uni.getStorageSync("storeId"));
|
|
}
|
|
},
|
|
fail(err) {
|
|
|
|
}
|
|
})
|
|
},
|
|
// 判断token是否与当前连锁店id相同
|
|
async getTheJudgmentIsTheSame() {
|
|
console.log(this.AppToken, 547);
|
|
// 判断是否登录
|
|
if (!this.AppToken) {
|
|
return;
|
|
}
|
|
await request({
|
|
url: 'chainStoreInfo/theJudgmentIsTheSame',
|
|
method: 'get',
|
|
data: {
|
|
"chainStoreId": uni.getStorageSync("chainStoreId")
|
|
}
|
|
}).then(res => {
|
|
if (!res.data) {
|
|
uni.removeStorageSync("App-Token");
|
|
}
|
|
})
|
|
|
|
|
|
// 判断当前登录的code是否相同
|
|
if (uni.getStorageSync("appltType") == "WECHAT") {
|
|
wx.login({
|
|
success(res) {
|
|
if (res.code) {
|
|
//发起网络请求
|
|
request({
|
|
url: 'clientApi/sign/mpWxLogin2',
|
|
method: "POST",
|
|
data: {
|
|
code: res.code
|
|
}
|
|
}).then(resp => {
|
|
if (!resp.data) {
|
|
uni.removeStorageSync("App-Token");
|
|
}
|
|
})
|
|
} else {
|
|
console.log('登录失败！' + res.errMsg)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
if (uni.getStorageSync("appltType") == "ALIPAY") {
|
|
my.getAuthCode({
|
|
scopes: 'auth_base',
|
|
success: res => {
|
|
const authCode = res.authCode;
|
|
console.log(res)
|
|
request({
|
|
url: "clientApi/sign/alipayLogin/getUserid2",
|
|
method: 'post',
|
|
data: {
|
|
authCode: authCode,
|
|
storeId: uni.getStorageSync("storeId"),
|
|
},
|
|
}).then((resp) => {
|
|
console.log(resp, 85412);
|
|
if (!resp.data) {
|
|
uni.removeStorageSync("App-Token");
|
|
}
|
|
})
|
|
},
|
|
fail: err => {
|
|
console.log('my.getAuthCode 调用失败', err)
|
|
}
|
|
});
|
|
}
|
|
|
|
},
|
|
|
|
// 获取门店信息
|
|
getStore(id) {
|
|
let _this = this;
|
|
request({
|
|
url: "business/storeInformation/store/queryStoreById",
|
|
method: 'post',
|
|
data: {
|
|
"storeId": id
|
|
},
|
|
}).then((response) => {
|
|
_this.store = response.data
|
|
let welfare = response.data.welfare
|
|
uni.setStorageSync("storeId", response.data.id)
|
|
uni.setStorageSync("chainStoreId", response.data.chainStoreId)
|
|
if (welfare) {
|
|
if (welfare.includes(",")) {
|
|
_this.welfare = response.data.welfare.split(",")
|
|
} else {
|
|
_this.welfare.push(response.data.welfare)
|
|
}
|
|
}
|
|
if (response.data.doorstepPhoto) {
|
|
let list = JSON.parse(response.data.doorstepPhoto)
|
|
_this.list3 = [];
|
|
list.forEach(item => {
|
|
_this.list3.push(_this.baseUrl + item)
|
|
})
|
|
}
|
|
}).catch((res) => {
|
|
|
|
})
|
|
},
|
|
// 获取当前位置
|
|
getAddress(storeId) {
|
|
let _this = this;
|
|
uni.getLocation({
|
|
// 谷歌使用wgs84 其他使用gcj02
|
|
type: 'gcj02', // 使用国测局坐标系
|
|
success: function(res) {
|
|
if (_this.longitude == "" && _this.latitude == "") {
|
|
|
|
_this.longitude = res.longitude;
|
|
_this.latitude = res.latitude
|
|
}
|
|
console.log('经度: ' + _this.longitude);
|
|
console.log('纬度: ' + _this.latitude);
|
|
request({
|
|
url: 'business/storeInformation/store/recentlyStore',
|
|
method: 'post',
|
|
data: {
|
|
"lon": _this.longitude,
|
|
"lat": _this.latitude,
|
|
"storeId": storeId,
|
|
"isLogin": _this.AppToken ? "0" : "1", // 0为登录
|
|
|
|
},
|
|
}).then((response) => {
|
|
console.log(response, "2154");
|
|
// uni.showToast({
|
|
// title:"121984:"+storeId
|
|
// })
|
|
if (response.data.store) {
|
|
_this.distance = (Math.ceil(response.data.distance))
|
|
.toFixed(1)
|
|
_this.store = response.data.store
|
|
uni.setStorageSync("storeId", response.data.store.id)
|
|
uni.setStorageSync("chainStoreId", response.data.store.chainStoreId)
|
|
console.log(uni.getStorageSync("chainStoreId"));
|
|
if (response.data.store.welfare) {
|
|
if (response.data.store.welfare.includes(",")) {
|
|
_this.welfare = response.data.store.welfare
|
|
.split(",")
|
|
} else {
|
|
_this.welfare.push(response.data.store.welfare)
|
|
}
|
|
}
|
|
if (response.data.store.doorstepPhoto) {
|
|
let list = JSON.parse(response.data.store.doorstepPhoto)
|
|
_this.list3 = [];
|
|
list.forEach(item => {
|
|
_this.list3.push(_this.baseUrl + item)
|
|
})
|
|
}
|
|
|
|
_this.lon = _this.store.longitude,
|
|
_this.lat = _this.store.latitude,
|
|
|
|
_this.getIndexBanner()
|
|
_this.getOilType();
|
|
} else {
|
|
uni.showToast({
|
|
title: "当前店铺已关闭！！！",
|
|
icon: "none"
|
|
})
|
|
}
|
|
|
|
}).catch(err => {})
|
|
|
|
// uni.showToast({
|
|
// title: "获取位置信息成功",
|
|
// icon: "none"
|
|
// })
|
|
},
|
|
fail: function(err) {
|
|
_this.getStore(2);
|
|
// uni.showToast({
|
|
// title: "获取位置信息失败"
|
|
// })
|
|
console.log('获取位置信息失败: ' + err.errMsg);
|
|
}
|
|
});
|
|
},
|
|
|
|
//获取油站的油号信息
|
|
getOilType() {
|
|
let params = {
|
|
storeId: uni.getStorageSync("storeId")
|
|
}
|
|
console.log(uni.getStorageSync("storeId"));
|
|
request({
|
|
url: 'business/petrolStationManagement/oilNumber/getList2',
|
|
method: 'get',
|
|
params: params
|
|
}).then((res) => {
|
|
if (res.code == 200) {
|
|
this.oilTypeList = res.data.records
|
|
// console.log("aaabbb", this.oilTypeList)
|
|
if (this.oilTypeList.length > 0) {
|
|
this.oilInfo.oilName = this.oilTypeList[0].oilName,
|
|
this.oilInfo.oilPrice = this.oilTypeList[0].oilPrice,
|
|
this.oilInfo.gbPrice = this.oilTypeList[0].gbPrice
|
|
}
|
|
let oilData = []
|
|
console.log(this.oilTypeList);
|
|
this.oilTypeList.forEach(res => {
|
|
let data = {
|
|
id: res.numberId,
|
|
label: res.oilName,
|
|
oilPrice: res.oilPrice,
|
|
gbPrice: res.gbPrice
|
|
}
|
|
oilData.push(data)
|
|
})
|
|
|
|
this.columns = [oilData]
|
|
|
|
}
|
|
})
|
|
},
|
|
confirm(e) {
|
|
console.log('选中的油号', e);
|
|
this.oilInfo.oilName = e.value[0].label,
|
|
this.oilInfo.oilPrice = e.value[0].oilPrice,
|
|
this.oilInfo.gbPrice = e.value[0].gbPrice
|
|
|
|
this.show = false
|
|
},
|
|
cancel() {
|
|
this.show = false
|
|
},
|
|
/* onOverlay() {
|
|
this.drawDown();
|
|
this.shows = false
|
|
uni.showToast({
|
|
title: '领取成功'
|
|
})
|
|
}, */
|
|
goActivity() {
|
|
// 去活动页
|
|
uni.navigateTo({
|
|
url: '/pagesHome/Activity/index'
|
|
})
|
|
},
|
|
goCard() {
|
|
uni.navigateTo({
|
|
url: '/pagesHome/MyCard/MyCard'
|
|
})
|
|
},
|
|
goOil() {
|
|
uni.navigateTo({
|
|
url: '/pages/refuel/refuel'
|
|
})
|
|
},
|
|
goChooseAddress() {
|
|
uni.chooseLocation({
|
|
success: ({
|
|
name,
|
|
address,
|
|
latitude,
|
|
longitude
|
|
}) => { // 选择位置完成后的处理
|
|
// this.addressName = address;
|
|
console.log(name, address, latitude, longitude);
|
|
this.longitude = longitude;
|
|
this.latitude = latitude;
|
|
this.getAddress()
|
|
},
|
|
});
|
|
},
|
|
goMall() {
|
|
uni.navigateTo({
|
|
url: '/pagesHome/PointsMall/PointsMall'
|
|
})
|
|
},
|
|
toQRcode() {
|
|
uni.navigateTo({
|
|
url: '/pagesHome/QRcode/QRcode'
|
|
})
|
|
},
|
|
goGoGo() {
|
|
let lat = Number(this.lat)
|
|
let lon = Number(this.lon)
|
|
uni.openLocation({
|
|
latitude: lat,
|
|
longitude: lon,
|
|
name: this.store.name,
|
|
address: this.store.address,
|
|
|
|
success: function() {
|
|
console.log('success');
|
|
},
|
|
complete: function(res) {
|
|
console.log(res);
|
|
}
|
|
});
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
background: #ebf5ff;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
|
|
.conttainer-top {
|
|
width: 100%;
|
|
height: 250px;
|
|
// background-color: #3da4df;
|
|
// background: url('http://47.95.206.185:83/topbj.png')center no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
margin-bottom: 60px;
|
|
|
|
|
|
}
|
|
|
|
.top-title {
|
|
font-size: 26px;
|
|
color: white;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
line-height: 25px;
|
|
text-shadow: 0px 2px 0px #2F64CD;
|
|
position: absolute;
|
|
top: 120px;
|
|
left: 20px;
|
|
}
|
|
|
|
.lan-gang {
|
|
width: 200px;
|
|
height: 22px;
|
|
background: #2F43F7;
|
|
border-radius: 11px;
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
position: absolute;
|
|
top: 155px;
|
|
left: 20px;
|
|
color: white;
|
|
|
|
}
|
|
|
|
.lsiez {
|
|
font-size: 10px;
|
|
display: flex;
|
|
}
|
|
|
|
.conttainer-jg {
|
|
width: 95%;
|
|
border-radius: 6px;
|
|
background: white;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
height: 90px;
|
|
margin: 0px auto;
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
left: 50%;
|
|
bottom: -90px;
|
|
display: flex;
|
|
}
|
|
|
|
.conttainer-cetr {
|
|
width: 95%;
|
|
border-radius: 6px;
|
|
background: white;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
margin: 10px auto;
|
|
}
|
|
|
|
.jg-box {
|
|
width: 25%;
|
|
text-align: center;
|
|
}
|
|
|
|
.jg-img {
|
|
width: 38px;
|
|
height: 38px;
|
|
|
|
image {
|
|
width: 38px;
|
|
height: 38px;
|
|
}
|
|
|
|
margin: 5px auto;
|
|
}
|
|
|
|
.jg-size {
|
|
font-size: 14px;
|
|
|
|
}
|
|
|
|
.conttainer-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.conttainer-box {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
background: #F3F6F9;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-radius: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.c-box-box1 {
|
|
width: 33%;
|
|
height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.c-box-box2 {
|
|
width: 33%;
|
|
height: 44px;
|
|
text-align: center;
|
|
border-left: 1px solid #DDDDDD;
|
|
border-right: 1px solid #DDDDDD;
|
|
}
|
|
|
|
.c-box-box3 {
|
|
width: 33%;
|
|
height: 44px;
|
|
text-align: center;
|
|
}
|
|
|
|
.xblck {
|
|
font-size: 14px;
|
|
color: #333333;
|
|
}
|
|
|
|
.dblck {
|
|
font-size: 20px;
|
|
color: #333333;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.xred {
|
|
font-size: 14px;
|
|
color: #ED2828;
|
|
}
|
|
|
|
.dred {
|
|
font-size: 20px;
|
|
color: #ED2828;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.station {
|
|
width: 100%;
|
|
height: 120px;
|
|
background: url('http://47.95.206.185:83/centerbj.png')center no-repeat;
|
|
background-size: 100% 100%;
|
|
box-sizing: border-box;
|
|
padding-top: 30px;
|
|
}
|
|
|
|
.station-box {
|
|
width: 95%;
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
margin: 0px auto;
|
|
}
|
|
|
|
.station-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.bule-icon {
|
|
width: 85px;
|
|
font-size: 12px;
|
|
color: #195ADA;
|
|
box-sizing: border-box;
|
|
padding: 2px 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid #195ADA;
|
|
border-radius: 4px;
|
|
margin: 5px 3px;
|
|
}
|
|
|
|
.dis-bt {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.hui1 {
|
|
color: #666666;
|
|
font-size: 12px;
|
|
margin: 5px auto;
|
|
}
|
|
|
|
.hui2 {
|
|
color: #999999;
|
|
font-size: 12px;
|
|
margin: 5px auto;
|
|
}
|
|
|
|
.lananniu {
|
|
box-sizing: border-box;
|
|
padding: 3px 10px;
|
|
background: #DBE9FF;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
color: #195ADA;
|
|
|
|
}
|
|
|
|
.tabs {
|
|
width: 100%;
|
|
display: flex;
|
|
height: 44px;
|
|
|
|
}
|
|
|
|
.scrollbox {
|
|
display: flex;
|
|
}
|
|
|
|
.scrollbox-imgs {
|
|
|
|
width: 195px;
|
|
height: 100px;
|
|
border-radius: 4px;
|
|
background-color: #195ADA;
|
|
margin: 0px 10px;
|
|
}
|
|
|
|
.juanniu {
|
|
height: 36px;
|
|
background: linear-gradient(90deg, #FF7302 0%, #FF5210 100%);
|
|
border-radius: 42px;
|
|
justify-content: center;
|
|
display: flex;
|
|
align-items: center;
|
|
color: white;
|
|
margin-top: 20px;
|
|
|
|
|
|
}
|
|
|
|
.anniuprp {
|
|
width: 130px;
|
|
height: 36px;
|
|
background: linear-gradient(180deg, #FF6D3A 0%, #FF327A 100%);
|
|
box-shadow: inset 0px 0px 6px 3px rgba(255, 255, 255, 0.25);
|
|
border-radius: 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
margin: 0 auto;
|
|
}
|
|
</style> |