Skip to content

S
sell
Commit 3f3d17fe authored by liumiss's avatar liumiss
Browse files
Options

开始单个店铺页面功能

parent 8b03ef4b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2178 additions and 156 deletions
src/App.vue
View file @ 3f3d17fe
......@@ -4,5 +4,25 @@
</div>
</template>
<style>
</style>
<script>
export default {
name: "App",
created() {
//在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem("store")) {
this.$store.replaceState(
Object.assign(
{},
this.$store.state,
JSON.parse(sessionStorage.getItem("store"))
)
);
}
//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload", () => {
sessionStorage.setItem("store", JSON.stringify(this.$store.state));
});
}
};
</script>
src/common/serve.js
View file @ 3f3d17fe
......@@ -19,13 +19,17 @@ export const loginByCode = (phone, code) => request('login/code', {
// 新增收货地址
export const addReceivingAddress = (Data) => request('/user/address', Data, 'POST');
export const addReceivingAddress = (Data) => request('/user/address', Data);
// 编辑收货地址
export const editReceivingAddress = (Data) => request('/user/address/update', Data, 'POST');
export const editReceivingAddress = (Data) => request('/user/address/update', Data);
// 获取收货地址
export const getReceivingAddress = () => request('/user/address', {}, 'GET');
// 删除收货地址
export const deleteReceivingAddress = (address_id) => request('/user/address/delete', { address_id }, 'POST');
export const deleteReceivingAddress = (address_id) => request('/user/address/delete', { address_id });
export const getNearbyShop = (lat,lng) => request('/scope/search', { lat,lng }, 'get');
src/common/stylus/index.styl
View file @ 3f3d17fe
......@@ -43,31 +43,49 @@
bottom: 0;
left: 16px;
border-bottom: 1px solid #ebedf0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
// -webkit-transform: scaleY(0.5);
// transform: scaleY(0.5);
}
.no-data{
text-align: center;
}
.scroll-list-wrap{
position();
}
.section{
margin-top:10px;
background-color: #fff;
}
.section-hd{
line-height: 40px;
padding:4px 10px;
font-size: 18px;
font-weight: 600;
line-height: 40px;
padding:4px 10px;
font-size: 18px;
font-weight: 600;
}
.cube-loading{
display: flex;
justify-content: center;
height: 100px;
align-items: center;
display: flex;
justify-content: center;
height: 100px;
align-items: center;
}
.cube-slide-dots{
bottom:4px;
}
bottom:4px;
}
.cube-slide-dots span{
height:2px;
}
\ No newline at end of file
height:2px;
}
// vant
.van-search{
padding: 6px;
}
.van-search .van-icon{
font-size: 16px;
}
.van-tag{
line-height: 1;
}
\ No newline at end of file
src/common/stylus/mixin.styl
View file @ 3f3d17fe
@import "~cube-ui/src/common/stylus/mixin.styl"
\ No newline at end of file
@import "~cube-ui/src/common/stylus/mixin.styl"
position($pos=fixed){
position: $pos;
top:0;
bottom:0;
left:0;
right:0;
}
\ No newline at end of file
src/common/stylus/variable.styl
View file @ 3f3d17fe
......@@ -6,8 +6,10 @@ $color-background = rgba(7, 17, 27, 1)
$color-green = #07c160
$color-dark-green = #06ae57
$color-light-blue = #3ca0e6
$color-blue = #1296fa
$margin-top-10 = 10px
$margin-top-20 = 20px
......
src/common/utils/components.js
View file @ 3f3d17fe
import CubePage from "../../components/cube-page.vue";
import addressList from "../../components/address-list.vue";
function plugin (Vue){
if(plugin.installed)return;
Vue.component('cube-page',CubePage)
Vue.component('cube-address-list',addressList)
}
export default plugin;
\ No newline at end of file
src/components/address-list.vue 0 → 100644
View file @ 3f3d17fe
<template>
<div>
<div v-for="address in options" :key="address.id">
<div class="van-cell van-address-item line" @click="onSelect(address)">
<div class="van-cell__value van-cell__value--alone van-address-item__value">
<div class="van-address-item__name">
{{address.address_detail}}
<van-tag v-if="address.label==1" color="#ffe1e1" text-color="#f44">家</van-tag>
<van-tag v-else-if="address.label==2" color="#3ca0e629" text-color="#3ca0e6">公司</van-tag>
</div>
<div class>{{address.address_suffix}}</div>
<div class="text-light-grey">{{address.name}}&nbsp;&nbsp;{{address.tel}}</div>
</div>
<div v-if="edit" class="van-address-item__edit" @click="onEdit(address)">
<i class="van-icon van-icon-edit"></i>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
options: {
type: Array
},
edit: {
default: false
}
},
methods: {
onEdit(address) {
this.$emit("edit", address);
},
onSelect(address) {
this.$emit("select", address);
}
}
};
</script>
<style scoped>
.van-address-item__name {
font-weight: 600;
font-size: 15px;
}
.van-address-item__edit {
width: 20%;
display: flex;
align-items: center;
justify-content: flex-end;
}
</style>
\ No newline at end of file
src/components/cube-page.vue
View file @ 3f3d17fe
......@@ -72,7 +72,7 @@
left: 0
padding: 0 15px
color: #fc9153
>.wrapper
.header~.wrapper
height: calc(100% - 44px)
overflow-x: hidden
overflow-y: auto
......
src/components/shop-list.vue
View file @ 3f3d17fe
<template>
<div class>
<li class="card" v-for="(item,index) in options" :key="item.id">
<div @click="onItemClick(item, index)" class="card-inner">
<li class="card" v-for="(item,index) in options" :key="index">
<div @click="onSelect(item)" class="card-inner">
<div class="card-thumb">
<van-image width="90" height="90" fit="contain" :src="$globalUrlFile+item.icon"></van-image>
</div>
......@@ -34,7 +34,11 @@ export default {
computed: {},
methods: {}
methods: {
onSelect(item){
this.$router.push({name:'shop',params:{id:item.shop_id}})
}
}
};
</script>
......
src/data.js 0 → 100644
View file @ 3f3d17fe
This diff is collapsed.
src/router.js
View file @ 3f3d17fe
......@@ -7,8 +7,13 @@ const mineIndex = r => require.ensure([], () => r(require('./views/mine/index.vu
const sellAddress = r => require.ensure([], () => r(require('./views/address/select-address.vue')))
const addAddress = r => require.ensure([], () => r(require('./views/address/add-address.vue')))
const address = r => require.ensure([], () => r(require('./views/address/address.vue')))
const editAddress = r => require.ensure([], () => r(require('./views/address/edit-address.vue')))
const choiseLocation = r => require.ensure([], () => r(require('./views/location/choise.vue')))
const shop = r => require.ensure([], () => r(require('./views/shopItem/index.vue')))
/* const choiseLocation = r => require.ensure([], () => r(require('./views/location/choise.vue')))
const choiseLocation = r => require.ensure([], () => r(require('./views/location/choise.vue')))
*/
Vue.use(Router);
......@@ -53,18 +58,23 @@ export default new Router({
component: address,
meta: { title: '收货地址', keepAlive: false }
},
/*{
{
path: '/address/edit/:id',
name: 'editAddress',
component: editAddress,
meta: { title: '修改地址', keepAlive: false }
}, */
},
{
path: '/location/choise',
name: 'choiseLocation',
component: choiseLocation,
meta: { title: '收货地址', keepAlive: false }
},
{
path: '/shop/:id',
name: 'shop',
component: shop,
meta: { title: '', keepAlive: false }
},
]
});
src/store/index.js
View file @ 3f3d17fe
......@@ -6,9 +6,9 @@ import actions from './actions'
Vue.use(Vuex)
const state = {
location:{lat:'',lng:'',formattedAddress:''}
// location:'定位中'
location:{lat:'',lng:'',formattedAddress:''},
choise_position:{},
edit_address:{} // 待编辑的地址信息
}
export default new Vuex.Store({
state,
......
src/store/mutations.js
View file @ 3f3d17fe
......@@ -9,4 +9,15 @@ export default {
state.location = info;
console.log( info)
},
// 地图定位：确认收货地址
CHOISE_POSITION(state, info){
state.choise_position = info
},
// 清空 地图选点信息
CLEAR_POSITION(state){
state.choise_position = {}
},
RECORD_ADDRESSINFO(state, info){
state.edit_address = info
}
}
\ No newline at end of file
src/vant.js
View file @ 3f3d17fe
......@@ -6,19 +6,20 @@ import {
Image,
Grid,
GridItem,
AddressList,
// AddressList,
Row, Col,
Cell, CellGroup ,
Field,
Button
Button,
Tag
} from 'vant'
Vue.use(Search)
Vue.use(Image)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(AddressList);
// Vue.use(AddressList);
Vue.use(Row).use(Col);
Vue.use(Cell).use(CellGroup);
Vue.use(Field)
Vue.use(Tag)
Vue.use(Button)
src/views/address/add-address.vue
View file @ 3f3d17fe
......@@ -19,7 +19,9 @@
/>
<van-field v-model="detailedAddress" clearable label="门牌号" placeholder="例：5号楼230室" />
<van-row class="van-cell">
<van-col span="7" class="van-cell__title van-field__label"><span>标签</span></van-col>
<van-col span="7" class="van-cell__title van-field__label">
<span>标签</span>
</van-col>
<van-col span="18">
<cube-checker
v-model="checkerType"
......@@ -39,6 +41,7 @@
<script>
import { addReceivingAddress } from "../../common/serve";
import utils from "../../common/utils/mUtils";
import { mapState } from "vuex";
export default {
data() {
return {
......@@ -71,39 +74,73 @@ export default {
receiverName: "", //收货人姓名
receiverTel: "", //收货人手机号
detailedAddress: "", //详细地址
receiverArea: "", //收货地址
show: false //默认不显示地区选择
};
},
computed: {},
computed: {
...mapState(["choise_position"]),
receiverArea() {
//收货地址
return this.choise_position.name;
}
},
methods: {
//添加收货地址
async onSave() {
const position = this.choise_position;
let Data = {
name: "地址名",
address: "地址信息",
lat: "121.513211",
lng: "31.300676",
// 地图选点记录的定位信息
name: position.name,
address: position.address,
map_id: position.id,
lat: position.location.lat,
lng: position.location.lng,
p: position.location.P,
r: position.location.Q,
// input信息
phone: this.receiverTel,
user_name: this.receiverName,
address_detail: this.detailedAddress,
address_suffix: "231",
address_detail: position.name,
gender: this.checkerSex ? this.checkerSex : 0,
label: this.checkerType ? this.checkerType : 0,
area: {},
address_suffix: position.address +','+this.detailedAddress,
is_default: 1
};
if (this.receiverName == "") {
this.toast("请填写姓名");
return;
} else if (this.receiverTel == "") {
this.toast("请填写手机号");
return;
} else if (this.receiverArea == "") {
this.toast("请填写地址");
return;
} else if (this.detailedAddress == "") {
this.toast("请填写门牌号");
return;
}
let res = await addReceivingAddress(Data);
if (res.code === 0) {
this.$toast.success("添加地址成功");
if (this.orderAddress) {
this.$router.push({ name: "confirmOrder" });
} else {
this.$router.push({ name: "address" });
}
this.toast("添加地址成功");
this.$store.commit("CLEAR_POSITION")
this.$router.push({ name: "address" });
} else {
this.$createToast({
txt: res.message,
type: "error"
}).show();
}
},
onChoiseLocation(route) {
utils.onRouterLink(this,route);
utils.onRouterLink(this, route);
},
toast(content) {
this.$createToast({
txt: content,
type: "txt"
}).show();
}
}
};
......@@ -117,7 +154,7 @@ export default {
padding: 10px 0;
}
.van-cell__title span{
.van-cell__title span {
font-weight: 600;
}
......
src/views/address/address.vue
View file @ 3f3d17fe
<template>
<div>
123
<div>
<div class="scroll-list-wrap">
<cube-scroll ref="scroll">
<div class="van-address-list">
<van-row>
<van-col span="24">
<cube-address-list :options="list" :edit="true" @edit="onEdit"></cube-address-list>
</van-col>
</van-row>
</div>
</cube-scroll>
<van-button type="danger" size="large" @click="onAdd" class="van-address-list__add">新增地址</van-button>
</div>
<!-- <van-address-list
v-model="chosenAddressId"
:list="list"
:switchable="false"
@add="onAdd"
@edit="onEdit"
/>-->
</div>
</template>
<script>
import { getReceivingAddress } from "../../common/serve";
import { mapMutations, mapState } from "vuex";
export default {
data() {
return {
chosenAddressId: "-1", // 字符串类型!!!
list: []
};
},
computed: {
...mapState(["orderAddress"]),
// 当由确认页面进入时，点击地址回到上一页
isGoBack() {
return this.orderAddress;
}
},
created() {
this.getReceivingAddress();
},
methods: {
async getReceivingAddress() {
let res = await getReceivingAddress();
let _data = res.data;
_data.forEach(el => {
let _obj = {
id: el.id.toString(),
name: el.name,
tel: el.phone,
label: el.label, // 地址类型：例：家
gender: el.gender, //性别
address_detail: el.address_detail,//地址
address_suffix: el.address_suffix,//门牌号
is_default: el.is_default,
location_id:el.location_id,
position: '121.69821,31.186741'
};
this.list.push(_obj);
});
},
onAdd() {
this.$router.replace({ name: "addAddress" });
},
onEdit(item, index) {
this.$store.commit("RECORD_ADDRESSINFO", item);
this.$router.replace({
name: "editAddress",
params: { id: item.location_id },
query: { position: item.position }
});
}
}
};
</script>
<style lang="stylus" scoped>
.van-address-list {
box-sizing: border-box;
height: 100%;
padding-bottom: 100px;
}
.van-address-list__add {
position: fixed;
bottom: 0;
left: 0;
z-index: 9999;
}
</style>
\ No newline at end of file
src/views/address/edit-address.vue 0 → 100644
View file @ 3f3d17fe
<template>
<div class="add-address">
<van-cell-group>
<van-field v-model="nameValue" label="联系人" placeholder="姓名" clearable />
<van-row class="sex">
<van-col span="10" offset="7">
<cube-checker v-model="checkerSex" :options="sexOptions" type="radio" class="text-base" />
</van-col>
</van-row>
<van-field v-model="telValue" label="电话" type="tel" placeholder="手机号" clearable />
<van-field
ref="area"
class="area"
v-model="locationValue"
label="地址"
placeholder="选择收货地址"
@click="onChoiseLocation('choiseLocation')"
@focus="$refs.area.blur()"
/>
<van-field v-model="detailValue" clearable label="门牌号" placeholder="例：5号楼230室" />
<van-row class="van-cell">
<van-col span="6" class="van-cell__title van-field__label">
<span>标签</span>
</van-col>
<van-col span="18">
<cube-checker
v-model="checkerLabel"
:options="typeOptions"
type="radio"
class="text-base"
/>
</van-col>
</van-row>
</van-cell-group>
<div class="van-address-edit__buttons">
<van-button class="save" type="danger" size="large" @click="onSave">确定</van-button>
</div>
{{edit_address}}
</div>
</template>
<script>
import { editReceivingAddress } from "../../common/serve";
import utils from "../../common/utils/mUtils";
import { mapState } from "vuex";
export default {
data() {
return {
sexOptions: [
{
value: 1,
text: "先生"
},
{
value: 2,
text: "女士"
}
],
typeOptions: [
{
value: 1,
text: "家"
},
{
value: 2,
text: "公司"
},
{
value: 3,
text: "学校"
}
],
nameValue: "",
telValue: "",
locationValue: "", // 地址
detailValue: "", // 门牌号
checkerSex: "", // 性别
checkerLabel: "" // 标签
};
},
computed: {
...mapState(["choise_position", "edit_address"])
},
created() {
const choiseP = this.choise_position;
this.nameValue = this.edit_address.name;
this.telValue = this.edit_address.tel;
this.locationValue = choiseP.name
? choiseP.name
: this.edit_address.address_detail;
this.detailValue = this.edit_address.address_suffix;
this.checkerSex = this.edit_address.gender ? this.edit_address.gender : [];
this.checkerLabel = this.edit_address.label ? this.edit_address.label : [];
},
/* watch: {
choise_position: {
handler(newVal, oldVal) {
this.locationValue = newVal.name;
},
immediate: true,
deep: true
}
}, */
methods: {
async onSave() {
let Data = {
// input信息
phone: this.telValue,
user_name: this.nameValue,
address_detail: this.locationValue,
gender: this.checkerSex ? this.checkerSex : 0,
label: this.checkerLabel ? this.checkerLabel : 0,
address_suffix: this.detailValue,
is_default: 1,
address_id: 1 // 没有省市区id，默认为1
};
if (this.receiverName == "") {
this.toast("请填写姓名");
return;
} else if (this.receiverTel == "") {
this.toast("请填写手机号");
return;
} else if (this.receiverArea == "") {
this.toast("请填写地址");
return;
} else if (this.detailedAddress == "") {
this.toast("请填写门牌号");
return;
}
// 若重新选择定位，则添加地图选点记录的定位信息
const position = this.choise_position;
if (position.name) {
let mapInfo = {
name: position.name,
address: position.address,
map_id: position.id,
lat: position.location.lat,
lng: position.location.lng,
p: position.location.P,
r: position.location.Q,
address_detail: position.name
};
Object.assign(Data, mapInfo);
}
console.log(Data);
let res = await editReceivingAddress(Data);
if (res.code === 0) {
this.toast("修改地址成功");
this.$store.commit("CLEAR_POSITION");
this.$router.push({ name: "address" });
} else {
this.$createToast({
txt: res.message,
type: "error"
}).show();
}
},
onChoiseLocation(route) {
this.$router.push({ name: route, query: { position: this.$route.query.position } });
},
toast(content) {
this.$createToast({
txt: content,
type: "txt"
}).show();
}
}
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/mixin.styl';
@import '~common/stylus/variable.styl';
.sex {
padding: 10px 0;
}
.van-cell__title span {
font-weight: 600;
}
.cube-checker-item {
border-1px();
line-height: 14px;
&_active {
border-1px($color-light-blue);
color: $color-light-blue;
background: #f5fbff;
}
}
.van-address-edit__buttons {
padding: 32px 16px;
}
</style>
\ No newline at end of file
src/views/address/select-address.vue
View file @ 3f3d17fe
<template>
<cube-page type="recycle-list" title="RecycleList">
<div slot="content" class="scroll-list-wrap">
<div slot="content">
<van-search placeholder="请输入搜索关键词" shape="round"></van-search>
<div class="scroll-list-wrap">
<cube-scroll ref="scroll">
<section class="section">
<div class="cube-index-list-anchor">当前定位</div>
<van-cell :title="curLocation" icon="shop-o">
<i slot="icon" class="cubeic-navigation text-primary text-medium"></i>
<span slot="right-icon" class="text-primary" @click="onRefreshLocation">重新定位</span>
</van-cell>
</section>
<div>
<!-- 当前定位 -->
<section class="section">
<div class="cube-index-list-anchor">当前定位</div>
<van-cell :title="curLocation" icon="shop-o">
<i slot="icon" class="cubeic-navigation text-primary text-medium"></i>
<span slot="right-icon" class="text-primary" @click="onRefreshLocation">重新定位</span>
</van-cell>
</section>
<section class="section">
<van-cell>
<span slot="title" class="text-extra-small text-light-grey">收货地址</span>
<span slot="right-icon" class="text-primary" @click="onLink('address')">管理地址</span>
</van-cell>
<van-row v-for="address in addressList" :key="address.id">
<van-col span="22" offset="2">
<div class="van-cell van-address-item line">
<div class="van-cell__value van-cell__value--alone van-address-item__value">
<div class="van-address-item__name">{{address.area}}</div>
<div class>{{address.address_detail}}</div>
<div class="text-light-grey">{{address.name}}&nbsp;&nbsp;{{address.tel}}</div>
</div>
</div>
</van-col>
</van-row>
<van-row>
<van-col span="22" offset="2">
<van-cell title="新增地址" is-link class="text-primary" @click="onLink('addAddress')" />
</van-col>
</van-row>
</section>
<section class="section">
<van-cell>
<span slot="title" class="text-extra-small text-light-grey">收货地址</span>
<span slot="right-icon" class="text-primary" @click="onLink('address')">管理地址</span>
</van-cell>
<!-- 地址列表 -->
<van-row>
<van-col span="22" offset="2">
<cube-address-list :options="addressList" @select="setDefaultAddress"></cube-address-list>
</van-col>
</van-row>
<van-row>
<van-col span="22" offset="2">
<van-cell
title="新增地址"
is-link
class="text-primary"
@click="onLink('addAddress')"
/>
</van-col>
</van-row>
</section>
</div>
</cube-scroll>
</div>
</div>
......@@ -42,7 +46,7 @@
</template>
<script>
import { getReceivingAddress } from "../../common/serve";
import { getReceivingAddress, editReceivingAddress } from "../../common/serve";
import { mapState } from "vuex";
import utils from "../../common/utils/mUtils";
let map = {};
......@@ -80,17 +84,30 @@ export default {
id: el.id.toString(),
name: el.name,
tel: el.phone,
address: el.area.full_name + "," + el.address_detail,
area_id: el.area_id,
area: el.area.full_name,
label: el.label, // 地址类型：例：家
gender: el.gender, //性别
address_detail: el.address_detail,
user_name: el.name,
address_suffix: el.address_suffix,
is_default: el.is_default
};
this.addressList.push(_obj);
});
},
// 选择收货地址
async setDefaultAddress(item) {
this.$router.push({ name: "home" });
return;
Object.assign(item, { is_default: 1 });
let res = await editReceivingAddress(item);
if (res.code == 0) {
this.$router.push({ name: "home" });
} else {
this.$createToast({
txt: res.message,
type: "error"
}).show();
}
},
onSelect() {},
onRefreshLocation() {
// 重新定位后，调用定位api
......@@ -98,13 +115,16 @@ export default {
this.$store.dispatch("GET_LOCATION", map);
},
onLink(route) {
utils.onRouterLink({ name: route });
utils.onRouterLink(this, route);
}
}
};
</script>
<style scoped>
.scroll-list-wrap {
top: 30px;
}
.cube-page > .wrapper .content {
margin: 0;
}
......@@ -112,7 +132,4 @@ export default {
.cube-index-list-anchor {
background-color: transparent;
}
.van-address-item__name {
font-weight: 600;
}
</style>
src/views/home/index.vue
View file @ 3f3d17fe
......@@ -13,11 +13,13 @@
@pulling-up="onPullingUp"
>
<cube-loading v-if="loading" :size="40"></cube-loading>
<!-- 收货地址定位 -->
<div class="location" @click="onRouterLink('sellAddress')">
<i class="cubeic-location text-primary text-extra-large"></i>
<span class="text-medium">{{location.formattedAddress?location.formattedAddress:'定位中...'}}</span>
<span
class="text-medium"
>{{currentAddress.address_detail?currentAddress.address_detail:'定位中...'}}</span>
<div class="location-action">
<i class="cubeic-select text-extra-small"></i>
</div>
......@@ -74,6 +76,7 @@
import CubePage from "../../components/cube-page.vue";
import footGuide from "../../components/footer";
import shopList from "../../components/shop-list";
import { getNearbyShop, getReceivingAddress } from "../../common/serve";
import { mapGeolocation, MAP } from "../../common/utils/mUtils";
import { mapState } from "vuex";
var map = {};
......@@ -134,10 +137,10 @@ var d = [
export default {
data() {
return {
loading: false,
loading: true,
currentAddress: {}, // 当前收货地址
gridsData: d,
shopsData: [b, b, b],
scrollEvents: ["scroll"],
scrollY: 0,
......@@ -162,26 +165,65 @@ export default {
};
},
created() {
setTimeout(() => {
/* setTimeout(() => {
map = new AMap.Map("amap", {
resizeEnable: true,
zoom: 16
});
this.$store.dispatch("GET_LOCATION", map);
}, 20);
if (this.location.lat) {
this.loading = false;
}
}, 20); */
// if (this.location.lat) {
// this.loading = false;
// }
},
computed: {
...mapState(["location"])
mounted() {
this.initData();
},
/* computed: {
...mapState(["location"])
}, */
components: {
footGuide,
CubePage,
shopList
},
methods: {
async initData() {
let p2 = getReceivingAddress(); // 获取默认的收货地址
Promise.all([p2])
.then(result => {
let addressData = result[0].data;
// this.currentAddress = addressData.find(item => item.is_default==1);
this.currentAddress = addressData[4];
Object.assign(this.currentAddress, {
lat: 121.514158,
lng: 31.299059
});
})
.catch(error => {
console.log(error);
});
let msg = await getReceivingAddress(); // 获取默认的收货地址
if (msg.code == 0) {
let addressData = msg.data;
// this.currentAddress = addressData.find(item => item.is_default==1);
this.currentAddress = addressData[4];
Object.assign(this.currentAddress, {
lat: 121.514632,
lng: 31.298043
});
}
let res = await getNearbyShop(
this.currentAddress.lat,
this.currentAddress.lng
); // 获取附近的商家
if (res.code == 0) {
}
this.loading = false;
},
scrollHandler({ y }) {
this.scrollY = -y;
},
......@@ -190,12 +232,12 @@ export default {
onSlideEvent(item, index) {
console.log(item, index);
},
onRouterLink(route,query){
if(query){
this.$router.push({name:route,query:query})
onRouterLink(route, query) {
if (query) {
this.$router.push({ name: route, query: query });
return;
}
this.$router.push({name:route})
this.$router.push({ name: route });
},
// 获取数据
loadData() {
......
src/views/location/choise.vue
View file @ 3f3d17fe
<template>
<div>
<!-- 搜索框 -->
<van-search placeholder="小区/写字楼/学校等" shape="round"></van-search>
<!-- map -->
<div class="amap-page-container">
<el-amap
vid="amap"
......@@ -12,6 +16,8 @@
class="amap-demo"
></el-amap>
</div>
<!-- 搜索地址列表 -->
<div class="location-box">
<cube-scroll ref="scroll">
<van-cell-group>
......@@ -21,10 +27,13 @@
icon="location-o"
:title="item.name"
:label="item.address"
:class="{active:index==0}"
@click="selectAddress(item.id)"
/>
</van-cell-group>
<cube-loading v-if="poisData==null" :size="20">正在定位</cube-loading>
<div v-if="poisData==null" class="no-data text-base">
<cube-loading :size="24"></cube-loading>正在定位
</div>
</cube-scroll>
</div>
</div>
......@@ -36,10 +45,12 @@ let amapManager = new VueAMap.AMapManager();
export default {
computed: {
lang() {
return this.$store.state.lang;
// 是否根据已有经纬度进行定位
hasPosition() {
return this.$route.query.position ? true : false;
}
},
data() {
let self = this;
return {
......@@ -52,26 +63,19 @@ export default {
address: null
},
poisData: null,
lng: 0,
lat: 0,
lng2: 0,
lat2: 0,
loaded: false,
plugin: [
{
pName: "Geolocation",
events: {
init(o) {
// o 是高德地图定位插件实例
/* o 是高德地图定位插件实例
* 若根据已有经纬度进行定位，则禁止获取用户当前地理位置
*/
if (self.hasPosition) return;
o.getCurrentPosition((status, result) => {
if (result && result.position) {
self.lng = result.position.lng;
self.lat = result.position.lat;
self.center = [self.lng, self.lat];
self.loaded = true;
self.center = [result.position.lng, result.position.lat];
self.$nextTick();
} else {
self.loaded = true;
}
});
}
......@@ -83,19 +87,31 @@ export default {
AMapUI.loadUI(["misc/PositionPicker"], function(PositionPicker) {
var positionPicker = new PositionPicker({
mode: "dragMap", //设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
map: map //依赖地图对象
map: map, //依赖地图对象
iconStyle: {
//自定义外观
url: "//webapi.amap.com/ui/1.0/assets/position-picker2.png", //图片地址
size: [48, 48], //要显示的点大小，将缩放图片
ancher: [24, 40] //锚点的位置，即被size缩放之后，图片的什么位置作为选中的位置
}
});
positionPicker.on("success", function(positionResult) {
self.nowLocation = positionResult.regeocode.pois[0];
self.center2 = [
positionResult.position.lng,
positionResult.position.lat
];
self.poisData = positionResult.regeocode.pois;
console.log(positionResult);
self.lng2 = positionResult.position.lng;
self.lat2 = positionResult.position.lat;
self.center2 = [self.lng2, self.lat2];
if (self.loaded) {
self.poisData = positionResult.regeocode.pois;
}
});
positionPicker.start();
if (self.hasPosition) {
let position = self.$route.query.position.split(",");
positionPicker.start(position);
} else {
positionPicker.start();
}
//TODO:事件绑定、结果处理等
});
AMapUI.loadUI(["control/BasicControl"], function(BasicControl) {
......@@ -114,34 +130,21 @@ export default {
methods: {
selectAddress(id) {
let pItem = null;
for (let i = 0; this.poisData.length; i++) {
if (this.poisData[i].id == id) {
pItem = this.poisData[i];
break;
}
}
const curChoise = this.poisData.find(item => item.id == id);
console.log(curChoise)
},
goBack() {
/* if(this.locationRequest){
this.$router.push({name: this.locationRequest,params:{action:true}});
}else{
this.$router.push({name: 'dish',params:{action:true}});
} */
},
projectCallBackData() {},
add() {
this.$router.push({ name: "addressAdd", params: { action: true } });
this.$store.commit("CHOISE_POSITION", curChoise);
this.$router.go(-1);
}
}
};
</script>
<style scoped>
<style lang="stylus" scoped>
@import '~common/stylus/variable.styl';
.amap-demo {
height: 200px;
height: 210px;
}
.location-box {
position: absolute;
top: 250px;
......@@ -149,8 +152,13 @@ console.log(curChoise)
left: 0;
right: 0;
margin: auto;
}
.van-cell__title span {
font-size: 14px;
.active {
color: $color-blue;
}
.van-cell__title span {
font-size: 14px;
}
}
</style>
\ No newline at end of file
src/views/shopItem/index.vue 0 → 100644
View file @ 3f3d17fe
<template>
<cube-page type="scroll-nav-side" title="ScrollNav">
<div slot="content">
<div class="view-wrapper">
<cube-scroll-nav
:side="true"
:data="data"
:current="current"
@change="changeHandler"
@sticky-change="stickyChangeHandler">
<ul class="prepend-header" slot="prepend">
<li>11</li>
<li>22</li>
<li>333</li>
</ul>
<cube-scroll-nav-panel
v-for="item in data"
:key="item.name"
:label="item.name"
:title="item.name">
<ul>
<li v-for="food in item.foods">
<div>
<img :src="food.icon">
<p>{{food.name}}</p>
</div>
</li>
</ul>
</cube-scroll-nav-panel>
</cube-scroll-nav>
</div>
</div>
</cube-page>
</template>
<script type="text/ecmascript-6">
import CubePage from '../../components/cube-page.vue'
import goodsData from '../../data'
const goods = goodsData.goods
export default {
components: {
CubePage
},
data() {
return {
data: goods,
current: goods[3].name
}
},
methods: {
changeHandler(label) {
console.log('changed to:', label)
},
stickyChangeHandler(current) {
console.log('sticky-change', current)
}
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
.scroll-nav-side
background-color: #fff
.view-wrapper
position: fixed
top: 0
left: 0
bottom: 0
width: 100%
.prepend-header
width: 90%
margin: 20px auto
text-align: center
font-size: 20px
line-height: 1.6
border-radius: 2px
box-shadow: 0 0 4px rgba(0, 0, 0, .2)
.cube-scroll-nav-main
background-color: #efeff4
.cube-sticky-fixed
background-color: #efeff4
.cube-scroll-nav-bar
width: 120px
background-color: transparent
.cube-scroll-nav-bar-item
padding: 15px
.cube-scroll-nav-bar-item_active
background-color: #fff
.cube-scroll-nav-panels
background-color: #fff
.cube-scroll-nav-panel
img
width: 114px
height: 114px
ul
overflow: hidden
font-size: 14px
line-height: 1.4
color: #666
li
float: left
width: 50%
div
width: 114px
margin: auto
p
overflow: hidden
white-space: nowrap
text-overflow: ellipsis
.cube-scroll-nav-panel-title
padding: 15px
font-size: 16px
background-color: #fff
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment