Compare commits
2 Commits
dd9a270507
...
789f8bb290
| Author | SHA1 | Date | |
|---|---|---|---|
|
789f8bb290 | ||
|
|
8983c50e47 |
1
.gitignore
vendored
1
.gitignore
vendored
@ -1 +1,2 @@
|
|||||||
unpackage/
|
unpackage/
|
||||||
|
.hbuilderx
|
||||||
File diff suppressed because it is too large
Load Diff
3877
address/citys.js
Normal file
3877
address/citys.js
Normal file
File diff suppressed because it is too large
Load Diff
488
address/selectCity.vue
Normal file
488
address/selectCity.vue
Normal file
@ -0,0 +1,488 @@
|
|||||||
|
<template>
|
||||||
|
<view class="nyn-city-list-container">
|
||||||
|
<!-- 搜索框 -->
|
||||||
|
<!-- <view class="search">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="请输入城市名称"
|
||||||
|
placeholder-style="font-size:20rpx"
|
||||||
|
@input="bindinputCitys"
|
||||||
|
/>
|
||||||
|
</view> -->
|
||||||
|
<uni-nav-bar
|
||||||
|
title=""
|
||||||
|
:fixed="true"
|
||||||
|
:border="false"
|
||||||
|
:left-width="'60rpx'"
|
||||||
|
:right-width="'160rpx'"
|
||||||
|
:statusBar="true"
|
||||||
|
:height="'34px'"
|
||||||
|
>
|
||||||
|
<block slot="left">
|
||||||
|
<view class="left-block" @click="handerSkip">
|
||||||
|
<image
|
||||||
|
style="
|
||||||
|
width: 11px;
|
||||||
|
height: 18px;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-left: 6px;
|
||||||
|
"
|
||||||
|
lazy-load
|
||||||
|
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAA2CAYAAABJN/BMAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIaADAAQAAAABAAAANgAAAADEgMuSAAAF8ElEQVRYCc2Ya2hcVRDHk91sHo3mTR5rbJrnapsYTKIfWmMSapWKICJCoeCHfgqCKGh9VFRE1FiFopQYEbRYW1SsobVfpFahjRoxEYvGmDQJeZAHTbJ5rtnNY9ffhNzl3JtNzN3cBA8Md86ce2b+Z2bOnHNvRMT/oNm3GUNkXl7ezvj4+Pnp6elFzbZNY7bjWVBQsBs756Kjo4+q9rbLEzY8UBwIBC5iXIDUJCcnBwDT4vF4FrYDhC0/P78qMjLyE4wXKB4oi42NbXe73e1bHo7CwsI78EA9dJsCIAJQP8fExDQhC0SqAxbzNnKgVEIAORXdC/CXvF7vY0NDQ/+IfKs8YcMD+/1+/xchAHyJ7IgGQEBsiSdIwrvQfRbKV20Qgkb6td3d3Td4BltUkLOGseOBiqWlpQuoS1dUzsNfIBEPt7W1Ca9rVobDjgceIATiASOAz9iOtaEACBrLwsE23Eusz6Azx6D3bFxc3JMAcIvBUM0KT9iLioruAcA3GNgFaQvzkQOny8vLH18PgIDSJggfTrOzDR8iBO8zeaeiwAf/8eLi4kv9/f0Tijwku6mKCYAqPPARmm+FggvCA6cA9kJfX99kSKsGYXCiQb5ut7q6OmpgYKCSlxoBkai87AXAp11dXbU8A4p8XdZ0TgiAwcHBh9F62gjAZrN9gPGjZgAIOtPhiIqKug/jH0K3qMvDcD30Kl6YVuUb4TccDrLcMTk5uR/jX6E4XlE+B99AFXzGrAc0HRsKxwqARwEgx7EKQA6g96gDr4QLQIBsKBwYeZB366FMmaS0dxl7kzowq8hMs+uGQzwwNTV1UE5DNMcq2j2s/AQheFmRhc2uGY4VAIcAIHVAB4D+O7Ozs3VhWzVMXDMcuPkRckAqoXoYRbAN6+bm5o6PjIxIPljSVoXD6XTuAMATeOA4LlfH5+ieJATPWWJZUaK7TwgAzvyn8MAxAwAvHmiw2+2vK3MtY3UgAHAQzc9DNxksnMMzr1GIZgxyS7q6xGT1slL1LFg2gtxJpTQCswSAKNGBoH8V8suA2ghPJVe2Ezk5OVmq3CpetzsSExNbiL3cC+QrSU1KAetibA/fkY3qd6QVQHQgOBtmU1JSrqD4dqgAUj0lfCFhKUlNTb3Ml5NlW1QHAiMRExMTHlb7LTshmW4JpEte+nlQVkZGxtWxsTE5vDbdVoEQjbh7jtA04X5JxnJIfU/43eyW3NLS0vO9vb2rcohxU01VrptIaLxc4a/4fL4MBooh1SMyr5hzJQ+wP8i7uskmO2uCED3Dw8MLGPmOLSrdOyH1DBGZizG+8pN/JIxyuQ2rqYkXUgHu9s7Pz7/N4FuQMRljkB0BSB3bWN1NIXWtJTQz0c4HzosYC1VR5VP/JDvnWEdHh+mqum44DMgDuLwpLS3NDRBJ1psN4yXIYzl/mkdHR1d9bxre1XXNgJCJgdzc3Gskq3xV10Bqjjjol7FrHNSQy/AbbmZBSLL68cg1knGAEFRhaYdizYE3Kil4dq4Dv8zMzMgPkf9spkFoGgHyB8Y66UtoUjX5yrPC4XD4AdKyESBhgxBjALlOCf+b1R+gq56y0cju5neAh3d+WgG25mNTINAaIP7deKSZ0AiQBGh5x9GPhr8fkFMJCQm/U9CCP0+R69pmQSwrY7UDGGtm9aUInFBw6yPbB6AZit6aQCwBIUjwyBBAfsWo7Jo0ka00KWh7oRG88ZsmVJ9BxKpwM7zL5crlv8R5wOxBj1qR/XhEquvnXBN1Jd4yT2jAx8fHJ9PT07+nXriQ7VKAyILlz+6NrKysPyloS/SXm+UgRCtA3ABpAkgFXfmHpbU4mH1cFa8Tvr80oeXh0BTLk6uAXJrPQfdCUlG1No9HDiUlJV1sbW3d2h/s7BpfZmbmJVYu/zLkyqh5Xp41nM49eKRDTRwNpaXP9vb2YU7Xp1n51wbFEhrZOf4tByGGOzs7x8rKyg7DnoLkFuaB3mCXnOEZ/kWEyaab5AgeeZbtO9zT09OAgk3fT02DkAnZ2dlx8vNNnfwvwX82xj5+deEAAAAASUVORK5CYII="
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
<view class="input-view">
|
||||||
|
<uni-icons
|
||||||
|
type="search"
|
||||||
|
size="22"
|
||||||
|
color="#666666"
|
||||||
|
style="line-height: 60rpx"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
confirm-type="search"
|
||||||
|
class="input"
|
||||||
|
type="text"
|
||||||
|
placeholder="输入城市名进行搜索"
|
||||||
|
@input="bindinputCitys"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</uni-nav-bar>
|
||||||
|
<!-- 热门城市 -->
|
||||||
|
<view class="ynq-AutoAddress">
|
||||||
|
<text class="iconfontAili icon-dingwei1"></text>
|
||||||
|
<text style="margin: 0 12rpx">当前定位城市</text>
|
||||||
|
<text>{{ loactionCity }}</text>
|
||||||
|
</view>
|
||||||
|
<text>热门城市</text>
|
||||||
|
<view class="hot">
|
||||||
|
<view
|
||||||
|
class="hot-item"
|
||||||
|
v-for="item in hotList"
|
||||||
|
:key="item.id"
|
||||||
|
@tap="bindCity(item)"
|
||||||
|
:data-city="item.name"
|
||||||
|
>{{ item.name }}</view
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
<!-- 首字母检索 -->
|
||||||
|
<view class="searchLetter touchClass">
|
||||||
|
<!-- 右边字母数据数据 触摸事件-->
|
||||||
|
<view
|
||||||
|
v-for="item in searchLetter"
|
||||||
|
:key="item.name"
|
||||||
|
:data-letter="item.name"
|
||||||
|
:style="{ height: `${itemH}px` }"
|
||||||
|
@touchstart.stop="searchStart"
|
||||||
|
@touchmove.stop="searchMove"
|
||||||
|
@touchend.stop="searchEnd"
|
||||||
|
>{{ item.name }}</view
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
<!-- 左边字母跟右边字母true时 屏幕中心显示选中的首字母-->
|
||||||
|
<!-- 居中首字母样式 -->
|
||||||
|
<view class="cont_Letter" v-if="isShowLetter">
|
||||||
|
{{ showLetter }}
|
||||||
|
</view>
|
||||||
|
<scroll-view
|
||||||
|
scroll-y="true"
|
||||||
|
:style="{ height: `${winHeight}px` }"
|
||||||
|
:scroll-top="scrollTop"
|
||||||
|
enhanced
|
||||||
|
:show-scrollbar="false"
|
||||||
|
v-if="!search"
|
||||||
|
>
|
||||||
|
<!-- 循环城市数据 -->
|
||||||
|
<view v-for="(value, key) in cityList" :key="key">
|
||||||
|
<!-- 循环首字母检索信息 -->
|
||||||
|
<view class="list_letter">{{ key }}</view>
|
||||||
|
<!-- 城市ID城市名称 -->
|
||||||
|
<view
|
||||||
|
class="item_city"
|
||||||
|
v-for="item in value"
|
||||||
|
:key="item.id"
|
||||||
|
:data-city="item.name"
|
||||||
|
@tap="bindCity(item)"
|
||||||
|
>{{ item.name }}</view
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<!-- 搜索列表 -->
|
||||||
|
<view class="list" v-if="search">
|
||||||
|
<view
|
||||||
|
class="text"
|
||||||
|
v-for="item in searchList"
|
||||||
|
:key="item.id"
|
||||||
|
@tap="bindCity(item)"
|
||||||
|
:data-city="item.name"
|
||||||
|
>{{ item.name }}</view
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import address from "./citys.js";
|
||||||
|
export default {
|
||||||
|
name: "NynCityList",
|
||||||
|
props: {
|
||||||
|
hot: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isShowLetter: false, //拖动时，是否显示中间字母
|
||||||
|
showLetter: "A", //中间字母
|
||||||
|
searchLetter: [], //字母检索列表
|
||||||
|
itemH: 0, //字母列表的高度
|
||||||
|
startPageY: 0, //开始拖动字母时Y坐标
|
||||||
|
bHeight: 0,
|
||||||
|
tHeight: 0,
|
||||||
|
CityName: "",
|
||||||
|
scrollTop: 0, //城市列表容器滚动条的位置
|
||||||
|
winHeight: 0, //城市列表窗口高度
|
||||||
|
cityList: [], //城市列表
|
||||||
|
hotList: [], //热门列表
|
||||||
|
search: false, //是否搜索
|
||||||
|
searchList: [],
|
||||||
|
time: 0,
|
||||||
|
loactionCity: "无法定位",
|
||||||
|
isAdd: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
let currentAddress = uni.getStorageSync("currentAddress");
|
||||||
|
let loactionCity = uni.getStorageSync("loactionCity");
|
||||||
|
if (currentAddress) {
|
||||||
|
if (currentAddress.area) {
|
||||||
|
this.loactionCity = currentAddress.area;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!currentAddress.area && currentAddress.city) {
|
||||||
|
this.loactionCity = currentAddress.city;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!currentAddress.area && !currentAddress.city && currentAddress.addr) {
|
||||||
|
let regex = /(\S+市)/g;
|
||||||
|
let matches = currentAddress.addr.match(regex);
|
||||||
|
if (matches && matches.length > 0) {
|
||||||
|
let firstMatch = matches[0]; // 第一个匹配的“xx市”
|
||||||
|
this.loactionCity = firstMatch;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.loactionCity = loactionCity;
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if (options.isAdd) {
|
||||||
|
this.isAdd = options.isAdd;
|
||||||
|
}
|
||||||
|
this.initList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handerSkip() {
|
||||||
|
uni.navigateBack();
|
||||||
|
},
|
||||||
|
/* 列表初始化 */
|
||||||
|
initList() {
|
||||||
|
let searchLetter = [];
|
||||||
|
for (let key in address.cities) {
|
||||||
|
searchLetter.push(key);
|
||||||
|
}
|
||||||
|
let hotList = address.hotCities;
|
||||||
|
let cityList = address.cities;
|
||||||
|
let sysInfo = uni.getSystemInfoSync();
|
||||||
|
let winHeight = sysInfo.windowHeight;
|
||||||
|
//添加要匹配的字母范围值
|
||||||
|
//更加屏幕高度设置子元素的高度
|
||||||
|
let itemH = winHeight / searchLetter.length;
|
||||||
|
let tempObj = [];
|
||||||
|
for (let i = 0; i < searchLetter.length; i++) {
|
||||||
|
let temp = {};
|
||||||
|
temp.name = searchLetter[i];
|
||||||
|
temp.tHeight = i * itemH;
|
||||||
|
temp.bHeight = (i + 1) * itemH;
|
||||||
|
tempObj.push(temp);
|
||||||
|
}
|
||||||
|
this.winHeight = winHeight;
|
||||||
|
this.itemH = itemH - "20";
|
||||||
|
this.searchLetter = tempObj;
|
||||||
|
this.cityList = cityList;
|
||||||
|
this.hotList = hotList;
|
||||||
|
},
|
||||||
|
/* 搜索城市时触发 */
|
||||||
|
bindinputCitys(e) {
|
||||||
|
if (this.time !== null) {
|
||||||
|
clearTimeout(this.time);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.time = setTimeout(() => {
|
||||||
|
if (e.detail.value != "") {
|
||||||
|
this.search = true;
|
||||||
|
} else {
|
||||||
|
this.search = false;
|
||||||
|
}
|
||||||
|
let cities = this.cityList;
|
||||||
|
let cyits = [];
|
||||||
|
for (let key in cities) {
|
||||||
|
for (let i = 0; i < cities[key].length; i++) {
|
||||||
|
if (
|
||||||
|
cities[key][i].name.search(e.detail.value) != -1 ||
|
||||||
|
cities[key][i].spell.search(e.detail.value) != -1
|
||||||
|
) {
|
||||||
|
cyits.push(cities[key][i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.searchList = cyits;
|
||||||
|
}, 300);
|
||||||
|
},
|
||||||
|
/* 检索字母拖动开始 */
|
||||||
|
searchStart(e) {
|
||||||
|
let showLetter = e.currentTarget.dataset.letter;
|
||||||
|
let pageY = e.touches[0].pageY;
|
||||||
|
this.setScrollTop(showLetter);
|
||||||
|
this.nowLetter(pageY);
|
||||||
|
this.showLetter = showLetter;
|
||||||
|
this.startPageY = pageY;
|
||||||
|
this.isShowLetter = true;
|
||||||
|
// let pageY = e.touches[0].pageY;
|
||||||
|
// this.nowLetter(pageY);
|
||||||
|
// this.startPageY = pageY;
|
||||||
|
// this.isShowLetter = true
|
||||||
|
},
|
||||||
|
/* 检索字母拖动中 */
|
||||||
|
searchMove(e) {
|
||||||
|
let pageY = e.touches[0].pageY;
|
||||||
|
let startPageY = this.startPageY;
|
||||||
|
let tHeight = this.tHeight;
|
||||||
|
let bHeight = this.bHeight;
|
||||||
|
// let showLetter = 0;
|
||||||
|
if (startPageY - pageY > 0) {
|
||||||
|
//向上移动
|
||||||
|
if (pageY < tHeight) {
|
||||||
|
this.nowLetter(pageY);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
//向下移动
|
||||||
|
if (pageY > bHeight) {
|
||||||
|
this.nowLetter(pageY);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/* 检索字母拖动结束 */
|
||||||
|
searchEnd() {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.isShowLetter = false;
|
||||||
|
}, 1000);
|
||||||
|
},
|
||||||
|
/* 点击城市 */
|
||||||
|
bindCity(item) {
|
||||||
|
// 向外传递这个城市
|
||||||
|
// this.$emit("bindCity", item);
|
||||||
|
uni.setStorageSync("city", item.name);
|
||||||
|
uni.navigateBack();
|
||||||
|
},
|
||||||
|
/* 设置scroll-view滚动距离 */
|
||||||
|
setScrollTop(showLetter) {
|
||||||
|
let scrollTop = 0;
|
||||||
|
let cityList = this.cityList;
|
||||||
|
let cityCount = 0;
|
||||||
|
let initialCount = 0;
|
||||||
|
for (let key in cityList) {
|
||||||
|
if (showLetter == key) {
|
||||||
|
scrollTop = initialCount * 30 + cityCount * 41;
|
||||||
|
break;
|
||||||
|
} else {
|
||||||
|
initialCount++;
|
||||||
|
cityCount += cityList[key].length;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.scrollTop = scrollTop;
|
||||||
|
},
|
||||||
|
/* */
|
||||||
|
nowLetter(pageY) {
|
||||||
|
let letterData = this.searchLetter;
|
||||||
|
let bHeight = 0;
|
||||||
|
let tHeight = 0;
|
||||||
|
let showLetter = "";
|
||||||
|
for (let i = 0; i < letterData.length; i++) {
|
||||||
|
if (letterData[i].tHeight <= pageY && pageY <= letterData[i].bHeight) {
|
||||||
|
bHeight = letterData[i].bHeight;
|
||||||
|
tHeight = letterData[i].tHeight;
|
||||||
|
showLetter = letterData[i].name;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// this.setScrollTop(showLetter);
|
||||||
|
this.bHeight = bHeight;
|
||||||
|
this.tHeight = tHeight;
|
||||||
|
this.showLetter = showLetter;
|
||||||
|
this.startPageY = pageY;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.nyn-city-list-container {
|
||||||
|
padding: 0 48rpx;
|
||||||
|
background: #fff;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.ynq-AutoAddress {
|
||||||
|
margin: 48rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 隐藏滚动条 */
|
||||||
|
.scroll-view {
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-view::-webkit-scrollbar {
|
||||||
|
display: none; /* Chrome, Safari */
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-view {
|
||||||
|
width: 92%;
|
||||||
|
display: flex;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
height: 60rpx;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
padding: 0 4%;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
margin: 10rpx 0;
|
||||||
|
line-height: 60rpx;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
color: #b9b9b9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-view .uni-icon {
|
||||||
|
line-height: 60rpx !important;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-view .uni-icons {
|
||||||
|
font-size: 32rpx !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-view .input {
|
||||||
|
height: 60rpx;
|
||||||
|
line-height: 60rpx;
|
||||||
|
width: 94%;
|
||||||
|
padding: 0 2%;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.search {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border: 1px solid #cccccc;
|
||||||
|
width: 686rpx;
|
||||||
|
border-radius: 100rpx;
|
||||||
|
margin: 20rpx auto;
|
||||||
|
padding: 4rpx;
|
||||||
|
input {
|
||||||
|
line-height: 60rpx;
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 首字母样式 */
|
||||||
|
.searchLetter {
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
top: 20%;
|
||||||
|
width: 30px;
|
||||||
|
height: 80%;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
color: #666;
|
||||||
|
background-color: #fff;
|
||||||
|
z-index: 1;
|
||||||
|
view {
|
||||||
|
height: 50rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 右边首字母样式 */
|
||||||
|
.touchClass {
|
||||||
|
color: #666;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
/* 居中显示的选中首字母 */
|
||||||
|
.cont_Letter {
|
||||||
|
background-color: #666;
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin: -50px;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: 26px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
/* 循环数据首字母检索 */
|
||||||
|
.list_letter {
|
||||||
|
display: flex;
|
||||||
|
background-color: #fff;
|
||||||
|
height: 30px;
|
||||||
|
color: #2a2a2a;
|
||||||
|
font-size: 26rpx;
|
||||||
|
align-items: center;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
/* 城市样式 */
|
||||||
|
.item_city {
|
||||||
|
display: flex;
|
||||||
|
background-color: #fff;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
color: #2a2a2a;
|
||||||
|
font-size: 28rpx;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px solid #f8f8f8;
|
||||||
|
}
|
||||||
|
.hot {
|
||||||
|
background: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: wrap;
|
||||||
|
margin: 10px 0px;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.hot-item {
|
||||||
|
font-size: 28rpx;
|
||||||
|
padding: 4px 11px;
|
||||||
|
border-radius: 6px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
background: #f5f5f6;
|
||||||
|
width: 17%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.list {
|
||||||
|
.eng {
|
||||||
|
background: #ffffff;
|
||||||
|
padding: 30rpx;
|
||||||
|
color: #212121;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
color: #212121;
|
||||||
|
font-size: 28rpx;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
border-bottom: 1px solid #e6e6e6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
867
address/selectShippingAddress.vue
Normal file
867
address/selectShippingAddress.vue
Normal file
@ -0,0 +1,867 @@
|
|||||||
|
<template>
|
||||||
|
<view class="address-container">
|
||||||
|
<view class="hander">
|
||||||
|
<uni-nav-bar
|
||||||
|
title=""
|
||||||
|
:fixed="true"
|
||||||
|
:statusBar="false"
|
||||||
|
:border="false"
|
||||||
|
:left-width="'132rpx'"
|
||||||
|
:right-width="'0rpx'"
|
||||||
|
>
|
||||||
|
<block slot="left">
|
||||||
|
<view class="left-block" @click="handerSkip">
|
||||||
|
<text class="iconfontAili icon-dingwei1"></text>
|
||||||
|
<text class="city-block">{{
|
||||||
|
originalData.result.addressComponent.city
|
||||||
|
}}</text>
|
||||||
|
<text class="iconfontAili icon-xiala"></text>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
<view class="input-view">
|
||||||
|
<uni-icons
|
||||||
|
type="search"
|
||||||
|
size="22"
|
||||||
|
color="#666666"
|
||||||
|
style="line-height: 60rpx"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
confirm-type="search"
|
||||||
|
class="input"
|
||||||
|
type="text"
|
||||||
|
placeholder="请输入收货地址"
|
||||||
|
@click="onSearch"
|
||||||
|
@input="handerAddress"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</uni-nav-bar>
|
||||||
|
</view>
|
||||||
|
<scroll-view
|
||||||
|
v-if="!showSearchAddress"
|
||||||
|
class="uni-swiper-list"
|
||||||
|
scroll-y
|
||||||
|
@scroll="onScroll"
|
||||||
|
scroll-with-animation="true"
|
||||||
|
:scroll-top="scrollTop"
|
||||||
|
>
|
||||||
|
<view class="address-block">
|
||||||
|
<view class="address-box">
|
||||||
|
<view class="address-left-block">{{
|
||||||
|
originalData.result.sematic_description
|
||||||
|
}}</view>
|
||||||
|
<view class="address-right-block" @click="anewLoction">
|
||||||
|
<text class="iconfontAili icon-zhongxindingwei"></text>
|
||||||
|
<view style="padding-left: 8rpx">重新定位</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="list-block"
|
||||||
|
v-if="userInfo.token && formatAddreesList.length > 0"
|
||||||
|
>
|
||||||
|
<view class="list-title-block">
|
||||||
|
<text class="iconfontAili icon-dianpu"></text>
|
||||||
|
<text class="title-block">我的收货地址</text>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="list-item"
|
||||||
|
v-for="(item, index) of formatAddreesList"
|
||||||
|
:key="index"
|
||||||
|
@click="handerSetAddress(item, 'my')"
|
||||||
|
>
|
||||||
|
<view class="item-info">
|
||||||
|
<text
|
||||||
|
:class="['item-lable', lableCalss(item.ud_label)]"
|
||||||
|
v-if="
|
||||||
|
item.ud_label == 1 || item.ud_label == 2 || item.ud_label == 3
|
||||||
|
"
|
||||||
|
>{{ labelList[item.ud_label] }}</text
|
||||||
|
>
|
||||||
|
<text class="item-address">{{ item.ud_marker }}</text>
|
||||||
|
<text class="item-detailed-address">{{ item.ud_street_no }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="item-role-info">
|
||||||
|
<text class="item-name">{{ item.ud_name }}</text>
|
||||||
|
<text class="item-sex">{{ item.sex == 0 ? "先生" : "女士" }}</text>
|
||||||
|
<text class="item-mobile">{{ item.ud_mobile }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="tips"
|
||||||
|
@click="handerList"
|
||||||
|
v-if="formatAddreesList.length > 4"
|
||||||
|
>
|
||||||
|
{{ showFormatAddreesList ? "收起全部地址" : "展开更多地址" }}
|
||||||
|
<text
|
||||||
|
:class="[
|
||||||
|
'iconfontAili ',
|
||||||
|
showFormatAddreesList ? 'icon-top' : 'icon-xiala',
|
||||||
|
]"
|
||||||
|
></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="list-block">
|
||||||
|
<view class="list-title-block">
|
||||||
|
<text class="iconfontAili icon-dingwei1"></text>
|
||||||
|
<text class="title-block">附近地址</text>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="list-item"
|
||||||
|
v-for="(item, index) of nearbyAddressList"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<view class="item-info" @click="handerSetAddress(item)">
|
||||||
|
<text class="item-address">{{ item.name }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<uMask :show="showMask" :zIndex="2" @click="showMask = false"></uMask>
|
||||||
|
</scroll-view>
|
||||||
|
<scroll-view
|
||||||
|
v-if="showSearchAddress && searchAddress.length > 0"
|
||||||
|
class="uni-swiper-list"
|
||||||
|
scroll-y
|
||||||
|
@scroll="onScroll"
|
||||||
|
scroll-with-animation="true"
|
||||||
|
:scroll-top="scrollTop"
|
||||||
|
>
|
||||||
|
<view class="search-address-list">
|
||||||
|
<view
|
||||||
|
class="search-address-item"
|
||||||
|
v-for="(item, index) of searchAddress"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="search-address-item-left"
|
||||||
|
@click="handerSetAddress(item)"
|
||||||
|
>
|
||||||
|
<view class="item-left-name" v-html="item.searchName"></view>
|
||||||
|
<view class="item-left-address">{{
|
||||||
|
item.detailedInformation
|
||||||
|
}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="search-address-item-right">{{ item.distance }}km</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<view class="u-btn u-btn-default" @click="AddAddress">
|
||||||
|
<text class="iconfontAili icon-zengjiatianjiajiahao"></text>
|
||||||
|
<text>新增收货地址</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import uMask from "./umask.vue";
|
||||||
|
import BMapLib from "../helpers/GeoUtils.js";
|
||||||
|
import { mapState, mapMutations } from "vuex";
|
||||||
|
|
||||||
|
var bmap = require("../libs/bmap-wx.js");
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
uMask,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
scrollTop: 0,
|
||||||
|
showMask: false,
|
||||||
|
originalData: {
|
||||||
|
result: {
|
||||||
|
addressComponent: {
|
||||||
|
city: "正在定位",
|
||||||
|
},
|
||||||
|
sematic_description: "定位中..",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
addressList: [],
|
||||||
|
formatAddreesList: [],
|
||||||
|
showFormatAddreesList: false,
|
||||||
|
nearbyAddressList: [],
|
||||||
|
showSearchAddress: false,
|
||||||
|
time: 0,
|
||||||
|
searchAddress: [],
|
||||||
|
labelList: ["", "家", "公司", "学校"],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: mapState([
|
||||||
|
"Config",
|
||||||
|
"StateCode",
|
||||||
|
"notice",
|
||||||
|
"plantformInfo",
|
||||||
|
"shopInfo",
|
||||||
|
"userInfo",
|
||||||
|
"hasLogin",
|
||||||
|
]),
|
||||||
|
onLoad(options) {
|
||||||
|
console.log("options", options);
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
if (this.userInfo.token) {
|
||||||
|
this.getAddressList();
|
||||||
|
}
|
||||||
|
let city = uni.getStorageSync("city");
|
||||||
|
if (!city) {
|
||||||
|
this.isPhoneLocationEnabled();
|
||||||
|
} else {
|
||||||
|
this.originalData.result.addressComponent.city = city;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onUnload() {
|
||||||
|
uni.switchTab({
|
||||||
|
url: `/pages/index/index`,
|
||||||
|
});
|
||||||
|
uni.removeStorageSync("city");
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
lableCalss(number) {
|
||||||
|
if (number == 1) {
|
||||||
|
return "item-lable-1";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (number == 2) {
|
||||||
|
return "item-lable-2";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (number == 3) {
|
||||||
|
return "item-lable-3";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getAddressList() {
|
||||||
|
console.log();
|
||||||
|
|
||||||
|
let that = this;
|
||||||
|
that.$.request({
|
||||||
|
url: that.Config.URL.user.address_lists,
|
||||||
|
data: {},
|
||||||
|
success: function (data, status, msg, code) {
|
||||||
|
if (200 == status) {
|
||||||
|
if (data.items.length > 0) {
|
||||||
|
console.log(that.addressList);
|
||||||
|
that.addressList = data.items;
|
||||||
|
that.formatAddreesList = that.addressList.slice(0, 4);
|
||||||
|
} else {
|
||||||
|
that.setData({
|
||||||
|
isdata: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
uni.stopPullDownRefresh();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
AddAddress() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/member/address/manage",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handerSetAddress(item, type) {
|
||||||
|
if (type == "my") {
|
||||||
|
let group = {
|
||||||
|
name: item.ud_marker,
|
||||||
|
location: {
|
||||||
|
lat: item.ud_latitude,
|
||||||
|
lng: item.ud_longitude,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
uni.setStorageSync("currentAddress", group);
|
||||||
|
} else {
|
||||||
|
uni.setStorageSync("currentAddress", item);
|
||||||
|
}
|
||||||
|
|
||||||
|
uni.switchTab({
|
||||||
|
url: "/pages/index/index",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
anewLoction() {
|
||||||
|
uni.removeStorageSync("currentAddress");
|
||||||
|
uni.switchTab({
|
||||||
|
url: "/pages/index/index",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
isPhoneLocationEnabled() {
|
||||||
|
let _this = this;
|
||||||
|
// 获取用户手机系统信息
|
||||||
|
uni.getSystemInfo({
|
||||||
|
success: (res) => {
|
||||||
|
const locationEnabled = res.locationEnabled;
|
||||||
|
if (locationEnabled) {
|
||||||
|
// 手机GPS定位已开启则判断微信APP是否已获取访问定位信息的权限
|
||||||
|
_this.isAppAuthorized();
|
||||||
|
} else {
|
||||||
|
// 手机GPS定位未开启则引导用户手动前往开启
|
||||||
|
uni.showModal({
|
||||||
|
title: "提示",
|
||||||
|
content:
|
||||||
|
'小程序需要基于您的手机定位信息为您提供服务，当前检测到您的手机并未打开定位开关，请关闭小程序后前往 "设置 - 定位服务/位置信息" 开启手机定位，然后重新进入小程序~',
|
||||||
|
showCancel: false,
|
||||||
|
confirmText: "我已知悉",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.log("用户手机系统信息获取失败", err);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
isAuthorized(a = "scope.userLocation") {
|
||||||
|
// 检查当前是否已经授权访问scope属性
|
||||||
|
let _this = this;
|
||||||
|
uni.getSetting({
|
||||||
|
success: (res) => {
|
||||||
|
let userLocation = res.authSetting[a];
|
||||||
|
if (!userLocation) {
|
||||||
|
// 判断当前是否获得授权，如果没有就去申请授权
|
||||||
|
_this.getAuthorize();
|
||||||
|
} else {
|
||||||
|
_this.getLocation();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
_this.openSetting();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
isAppAuthorized() {
|
||||||
|
let _this = this;
|
||||||
|
// 微信APP授权设置
|
||||||
|
const appAuthorizeSetting = uni.getAppAuthorizeSetting();
|
||||||
|
// 是否允许微信使用定位信息的开关
|
||||||
|
let locationAuthorized = appAuthorizeSetting.locationAuthorized;
|
||||||
|
switch (locationAuthorized) {
|
||||||
|
case "authorized":
|
||||||
|
_this.isAuthorized();
|
||||||
|
break;
|
||||||
|
case "denied":
|
||||||
|
uni.showModal({
|
||||||
|
title: "提示",
|
||||||
|
content:
|
||||||
|
"已拒绝微信获取定位权限，即将打开权限管理页面，请把定位权限设置为允许~",
|
||||||
|
confirmText: "前往设置",
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
_this.openAppAuthorizeSetting();
|
||||||
|
} else if (res.cancel) {
|
||||||
|
_this.rejectGetLocation();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "not determined":
|
||||||
|
uni.showModal({
|
||||||
|
title: "提示",
|
||||||
|
content: "请授权微信获取定位权限~",
|
||||||
|
confirmText: "同意授权",
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
_this.openAppAuthorizeSetting();
|
||||||
|
} else if (res.cancel) {
|
||||||
|
_this.rejectGetLocation();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getAuthorize(a = "scope.userLocation") {
|
||||||
|
let _this = this;
|
||||||
|
// uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
|
||||||
|
uni.authorize({
|
||||||
|
scope: a,
|
||||||
|
success: () => {
|
||||||
|
_this.getLocation();
|
||||||
|
},
|
||||||
|
fail: () => {
|
||||||
|
_this.openSetting();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
openSetting() {
|
||||||
|
let _this = this;
|
||||||
|
uni.showModal({
|
||||||
|
title: "提示",
|
||||||
|
content: "我们需要获取您的位置信息，为您提供服务~",
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
uni.openSetting({
|
||||||
|
success: (res) => {
|
||||||
|
if (res.authSetting["scope.userLocation"] === true) {
|
||||||
|
_this.getLocation();
|
||||||
|
} else {
|
||||||
|
_this.rejectGetLocation();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.log("小程序授权弹窗打开失败", err);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} else if (res.cancel) {
|
||||||
|
_this.rejectGetLocation();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
rejectGetLocation() {
|
||||||
|
uni.showToast({
|
||||||
|
title: "您拒绝了位置授权，小程序无法继续提供出行服务~",
|
||||||
|
icon: "none",
|
||||||
|
duration: 3000,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
openAppAuthorizeSetting() {
|
||||||
|
let _this = this;
|
||||||
|
uni.openAppAuthorizeSetting({
|
||||||
|
success: (res) => {
|
||||||
|
console.log("打开系统微信授权管理页成功", res);
|
||||||
|
_this.isAuthorized();
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.log("打开系统微信授权管理页失败", err);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getLocation() {
|
||||||
|
var that = this;
|
||||||
|
|
||||||
|
let location = "";
|
||||||
|
let currentAddress = uni.getStorageSync("currentAddress");
|
||||||
|
if (currentAddress) {
|
||||||
|
if (currentAddress.point) {
|
||||||
|
location = currentAddress.point.y + "," + currentAddress.point.x;
|
||||||
|
} else {
|
||||||
|
location =
|
||||||
|
currentAddress.location.lat + "," + currentAddress.location.lng;
|
||||||
|
}
|
||||||
|
let BMap = new bmap.BMapWX({
|
||||||
|
ak: "LkqqCMB1qZmjYEkzx0Y1PTfmAUrkWPog",
|
||||||
|
});
|
||||||
|
let fail = function (res) {
|
||||||
|
console.log("fail", res);
|
||||||
|
};
|
||||||
|
let success = function (res) {
|
||||||
|
console.log("结果地址", res);
|
||||||
|
that.originalData = res.originalData;
|
||||||
|
that.originalData.result.sematic_description = currentAddress.name;
|
||||||
|
let city = uni.getStorageSync("city");
|
||||||
|
if (city) {
|
||||||
|
that.originalData.result.addressComponent.city = city;
|
||||||
|
}
|
||||||
|
that.nearbyAddressList = res.originalData.result.pois;
|
||||||
|
};
|
||||||
|
BMap.regeocoding({
|
||||||
|
location: location,
|
||||||
|
coordtype: "gcj02ll",
|
||||||
|
ret_coordtype: "gcj02ll",
|
||||||
|
fail: fail,
|
||||||
|
success: success,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
uni.getLocation({
|
||||||
|
type: "wgs84",
|
||||||
|
isHighAccuracy: true,
|
||||||
|
success: function (res) {
|
||||||
|
location = res.latitude + "," + res.longitude;
|
||||||
|
|
||||||
|
let BMap = new bmap.BMapWX({
|
||||||
|
ak: "LkqqCMB1qZmjYEkzx0Y1PTfmAUrkWPog",
|
||||||
|
});
|
||||||
|
|
||||||
|
let fail = function (res) {
|
||||||
|
console.log("fail", res);
|
||||||
|
};
|
||||||
|
|
||||||
|
let success = function (res) {
|
||||||
|
console.log("结果地址", res);
|
||||||
|
that.address = res.originalData.result.sematic_description;
|
||||||
|
that.originalData = res.originalData;
|
||||||
|
|
||||||
|
let city = uni.getStorageSync("city");
|
||||||
|
if (city) {
|
||||||
|
that.originalData.result.addressComponent.city = city;
|
||||||
|
}
|
||||||
|
that.nearbyAddressList = res.originalData.result.pois;
|
||||||
|
};
|
||||||
|
|
||||||
|
BMap.regeocoding({
|
||||||
|
location: location,
|
||||||
|
coordtype: "wgs84ll",
|
||||||
|
ret_coordtype: "gcj02ll",
|
||||||
|
fail: fail,
|
||||||
|
success: success,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail: function (error) {
|
||||||
|
console.error("获取位置失败：", error);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handerSkip() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/address/selectCity`,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onSearch() {
|
||||||
|
this.showMask = true;
|
||||||
|
},
|
||||||
|
handerList() {
|
||||||
|
this.showFormatAddreesList = !this.showFormatAddreesList;
|
||||||
|
if (this.showFormatAddreesList) {
|
||||||
|
this.formatAddreesList = this.addressList;
|
||||||
|
} else {
|
||||||
|
this.formatAddreesList = this.addressList.slice(0, 4);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onScroll() {},
|
||||||
|
// 搜索地址
|
||||||
|
handerAddress(e) {
|
||||||
|
let that = this;
|
||||||
|
|
||||||
|
let value = e.target.value;
|
||||||
|
if (value.length == 0) {
|
||||||
|
this.showSearchAddress = false;
|
||||||
|
} else {
|
||||||
|
this.showSearchAddress = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
var fail = function (res) {
|
||||||
|
console.log("fail", res);
|
||||||
|
};
|
||||||
|
|
||||||
|
var currentPoint = {
|
||||||
|
lat: that.originalData.result.location.lat,
|
||||||
|
lng: that.originalData.result.location.lng,
|
||||||
|
};
|
||||||
|
|
||||||
|
var metersToKilometers = function (meters) {
|
||||||
|
let kilometers = meters / 1000;
|
||||||
|
|
||||||
|
// 保留两位小数
|
||||||
|
return kilometers.toFixed(2);
|
||||||
|
};
|
||||||
|
|
||||||
|
var success = function (res) {
|
||||||
|
console.log("结果地址", res);
|
||||||
|
if (res.data.status != 0) {
|
||||||
|
uni.showToast({
|
||||||
|
title: res.message,
|
||||||
|
icon: "none",
|
||||||
|
duration: 3000,
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
that.searchAddress = res.data.result
|
||||||
|
.filter((item) => "location" in item)
|
||||||
|
.map((item) => {
|
||||||
|
let obj = {
|
||||||
|
...item,
|
||||||
|
name: item.name,
|
||||||
|
detailedInformation: item.address.replace(/-/g, ""),
|
||||||
|
distance: metersToKilometers(
|
||||||
|
BMapLib.GeoUtils.getDistance(currentPoint, item.location)
|
||||||
|
),
|
||||||
|
};
|
||||||
|
return obj;
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log("that.searchAddress", that.searchAddress);
|
||||||
|
|
||||||
|
that.searchAddress.forEach((item) => {
|
||||||
|
if (item.name.indexOf(value) >= 0) {
|
||||||
|
item.searchName = item.name.replaceAll(
|
||||||
|
value,
|
||||||
|
"<font style='color:#ee852f;padding:0 4px'>" + value + "</font>"
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
item.searchName = item.name;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
console.log("searchAddress", that.searchAddress);
|
||||||
|
};
|
||||||
|
|
||||||
|
let params = {
|
||||||
|
query: value,
|
||||||
|
region: this.originalData.result.addressComponent.city,
|
||||||
|
output: "json",
|
||||||
|
city_limit: true,
|
||||||
|
ak: "vMqiMPVK8i30Q5VOCDI3LWxgZqR2tfKa",
|
||||||
|
ret_coordtype: "gcj02ll",
|
||||||
|
};
|
||||||
|
|
||||||
|
let city = that.originalData.result.addressComponent.city;
|
||||||
|
if (city) {
|
||||||
|
params.center = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.time !== null) {
|
||||||
|
clearTimeout(this.time);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.time = setTimeout(() => {
|
||||||
|
uni.request({
|
||||||
|
url: `https://api.map.baidu.com/place/v2/suggestion`,
|
||||||
|
data: params,
|
||||||
|
success: success,
|
||||||
|
fail: fail,
|
||||||
|
});
|
||||||
|
}, 600);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.address-container {
|
||||||
|
height: calc(100vh - 88rpx);
|
||||||
|
background: #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.item-lable-1 {
|
||||||
|
background: #fdf3da;
|
||||||
|
color: #de8a48;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-lable-2 {
|
||||||
|
background: #e5eefb;
|
||||||
|
color: #4687e4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-lable-3 {
|
||||||
|
background: #eff9e7;
|
||||||
|
color: #6eb768;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hander {
|
||||||
|
.uni-navbar__header {
|
||||||
|
align-items: center;
|
||||||
|
padding: 10rpx 20rpx !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-block {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
line-height: 60rpx;
|
||||||
|
}
|
||||||
|
.city-block {
|
||||||
|
white-space: nowrap; /* 确保文本在一行内显示 */
|
||||||
|
overflow: hidden; /* 隐藏超出容器的文本 */
|
||||||
|
text-overflow: ellipsis; /* 使用省略符号表示文本超出 */
|
||||||
|
max-width: 140rpx;
|
||||||
|
padding-right: 4rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-dingwei {
|
||||||
|
font-size: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-right {
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-block {
|
||||||
|
margin: 20rpx 0;
|
||||||
|
padding: 20rpx 32rpx;
|
||||||
|
border-top: 2rpx solid #f0f0f0;
|
||||||
|
border-bottom: 2rpx solid #f0f0f0;
|
||||||
|
|
||||||
|
.address-box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.address-left-block {
|
||||||
|
font-size: 32rpx;
|
||||||
|
white-space: nowrap; /* 确保文本在一行内显示 */
|
||||||
|
overflow: hidden; /* 隐藏超出容器的文本 */
|
||||||
|
text-overflow: ellipsis; /* 使用省略符号表示文本超出 */
|
||||||
|
max-width: 520rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-right-block {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: #de8a48;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-block {
|
||||||
|
padding: 0 32rpx;
|
||||||
|
border-bottom: 2rpx solid #f8f8f8;
|
||||||
|
|
||||||
|
.list-title-block {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
padding: 12rpx 0;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
.title-block {
|
||||||
|
font-size: 28rpx;
|
||||||
|
padding-left: 6rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item {
|
||||||
|
margin: 0 32rpx;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
border-bottom: 2rpx solid #f0f0f0;
|
||||||
|
|
||||||
|
.item-lable {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 9px;
|
||||||
|
padding: 0px 8px;
|
||||||
|
width: 32px;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-address {
|
||||||
|
margin-right: 8rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-detailed-address {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-role-info {
|
||||||
|
color: #848484;
|
||||||
|
font-size: 24rpx;
|
||||||
|
|
||||||
|
.item-name {
|
||||||
|
padding-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-mobile {
|
||||||
|
margin-left: 40rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tips {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin: 20rpx 32rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-zengjiatianjiajiahao {
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #3579ff;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-address-list {
|
||||||
|
margin: 40rpx;
|
||||||
|
|
||||||
|
.search-address-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
border-bottom: 2rpx solid #f0f0f0;
|
||||||
|
|
||||||
|
.search-address-item-left {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-address-item-right {
|
||||||
|
color: #d7d7d7;
|
||||||
|
width: 20%;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
rich-text {
|
||||||
|
// max-width: 90%;
|
||||||
|
max-height: 27px;
|
||||||
|
overflow: hidden;
|
||||||
|
word-break: break-all; /* break-all(允许在单词内换行。) */
|
||||||
|
text-overflow: ellipsis; /* 超出部分省略号 */
|
||||||
|
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
|
||||||
|
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
|
||||||
|
-webkit-line-clamp: 2; /** 显示的行数 **/
|
||||||
|
}
|
||||||
|
|
||||||
|
// .item-left-name rich-text {
|
||||||
|
// white-space: nowrap; /* 确保文本在一行内显示 */
|
||||||
|
// overflow: hidden; /* 隐藏超出容器的文本 */
|
||||||
|
// text-overflow: ellipsis; /* 使用省略符号表示文本超出 */
|
||||||
|
// -webkit-box-orient: vertical;
|
||||||
|
// max-width: 90%;
|
||||||
|
// display: -webkit-box;
|
||||||
|
// box-sizing: border-box;
|
||||||
|
// }
|
||||||
|
|
||||||
|
.item-left-address {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #848484;
|
||||||
|
white-space: nowrap; /* 确保文本在一行内显示 */
|
||||||
|
overflow: hidden; /* 隐藏超出容器的文本 */
|
||||||
|
text-overflow: ellipsis; /* 使用省略符号表示文本超出 */
|
||||||
|
max-width: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-view {
|
||||||
|
width: 92%;
|
||||||
|
display: flex;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
height: 60rpx;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
padding: 0 4%;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
margin: 10rpx 0;
|
||||||
|
line-height: 60rpx;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
color: #b9b9b9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-view .uni-icon {
|
||||||
|
line-height: 60rpx !important;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-view .uni-icons {
|
||||||
|
font-size: 32rpx !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-view .input {
|
||||||
|
height: 60rpx;
|
||||||
|
line-height: 60rpx;
|
||||||
|
width: 94%;
|
||||||
|
padding: 0 2%;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-swiper-list {
|
||||||
|
height: calc(100vh - 98px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-btn-default {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
background: #fff;
|
||||||
|
color: #000;
|
||||||
|
z-index: 1;
|
||||||
|
margin: 0;
|
||||||
|
height: 120rpx;
|
||||||
|
line-height: 120rpx;
|
||||||
|
bottom: constant(safe-area-inset-bottom);
|
||||||
|
// bottom: env(safe-area-inset-bottom);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>.
|
||||||
130
address/umask.vue
Normal file
130
address/umask.vue
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
<template>
|
||||||
|
<view
|
||||||
|
class="u-mask"
|
||||||
|
hover-stop-propagation
|
||||||
|
:style="[maskStyle, zoomStyle]"
|
||||||
|
@tap="click"
|
||||||
|
@touchmove.stop.prevent="() => {}"
|
||||||
|
:class="{
|
||||||
|
'u-mask-zoom': zoom,
|
||||||
|
'u-mask-show': show,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* mask 遮罩
|
||||||
|
* @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
|
||||||
|
* @tutorial https://www.uviewui.com/components/mask.html
|
||||||
|
* @property {Boolean} show 是否显示遮罩（默认false）
|
||||||
|
* @property {String Number} z-index z-index 层级（默认1070）
|
||||||
|
* @property {Object} custom-style 自定义样式对象，见上方说明
|
||||||
|
* @property {String Number} duration 动画时长，单位毫秒（默认300）
|
||||||
|
* @property {Boolean} zoom 是否使用scale对遮罩进行缩放（默认true）
|
||||||
|
* @property {Boolean} mask-click-able 遮罩是否可点击，为false时点击不会发送click事件（默认true）
|
||||||
|
* @event {Function} click mask-click-able为true时，点击遮罩发送此事件
|
||||||
|
* @example <u-mask :show="show" @click="show = false"></u-mask>
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: "u-mask",
|
||||||
|
props: {
|
||||||
|
// 是否显示遮罩
|
||||||
|
show: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
// 层级z-index
|
||||||
|
zIndex: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
// 用户自定义样式
|
||||||
|
customStyle: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 遮罩的动画样式， 是否使用使用zoom进行scale进行缩放
|
||||||
|
zoom: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
// 遮罩的过渡时间，单位为ms
|
||||||
|
duration: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 300,
|
||||||
|
},
|
||||||
|
// 是否可以通过点击遮罩进行关闭
|
||||||
|
maskClickAble: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
zoomStyle: {
|
||||||
|
transform: "",
|
||||||
|
},
|
||||||
|
scale: "scale(1.2, 1.2)",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
show(n) {
|
||||||
|
if (n && this.zoom) {
|
||||||
|
// 当展示遮罩的时候，设置scale为1，达到缩小(原来为1.2)的效果
|
||||||
|
this.zoomStyle.transform = "scale(1, 1)";
|
||||||
|
} else if (!n && this.zoom) {
|
||||||
|
// 当隐藏遮罩的时候，设置scale为1.2，达到放大(因为显示遮罩时已重置为1)的效果
|
||||||
|
this.zoomStyle.transform = this.scale;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
maskStyle() {
|
||||||
|
let style = {};
|
||||||
|
style.backgroundColor = "rgba(0, 0, 0, 0.6)";
|
||||||
|
if (this.show)
|
||||||
|
style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.mask;
|
||||||
|
else style.zIndex = -1;
|
||||||
|
style.transition = `all ${this.duration / 1000}s ease-in-out`;
|
||||||
|
// 判断用户传递的对象是否为空，不为空就进行合并
|
||||||
|
if (Object.keys(this.customStyle).length)
|
||||||
|
style = {
|
||||||
|
...style,
|
||||||
|
...this.customStyle,
|
||||||
|
};
|
||||||
|
return style;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
click() {
|
||||||
|
if (!this.maskClickAble) return;
|
||||||
|
this.$emit("click");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.u-mask {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
opacity: 0;
|
||||||
|
transition: transform 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-mask-show {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-mask-zoom {
|
||||||
|
transform: scale(1.2, 1.2);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,369 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="swiperContent">
|
|
||||||
<swiper
|
|
||||||
@change="change"
|
|
||||||
@animationfinish="animationfinish"
|
|
||||||
:indicator-dots="indicatorDots"
|
|
||||||
:indicator-active-color="indicatorActiveColor"
|
|
||||||
:indicator-color="indicatorColor"
|
|
||||||
:current="current"
|
|
||||||
:interval="interval"
|
|
||||||
:duration="duration"
|
|
||||||
:circular="circular"
|
|
||||||
:vertical="vertical"
|
|
||||||
:previous-margin="previousMargin"
|
|
||||||
:next-margin="nextMargin"
|
|
||||||
:display-multiple-items="displayMultipleItems"
|
|
||||||
:skip-hidden-item-layout="skipHiddenItemLayout"
|
|
||||||
:autoplay="(autoplay && flag)"
|
|
||||||
:style="{'height':swiperHeight+'px'}"
|
|
||||||
:class="(swiperType && displayMultipleItems ==1 && !vertical && !fullScreen)?'cardSwiper':'' "
|
|
||||||
class="screen-swiper"
|
|
||||||
>
|
|
||||||
<swiper-item class="swiper-item" v-for="(item,index) in swiperList" :key="index" :class="(cardCur==index && displayMultipleItems ==1 && !vertical && !fullScreen)?'cur':''" @tap="tplGoToPage" :data-id="(item.did)" :data-name="(item.name)" :data-type="(item.selectType)" :data-keyword="(item.keyWord)" :data-appid="(item.AppId)" :data-appurl="(item.AppUrl)" :data-MinAppUrl="(item.MinAppUrl)">
|
|
||||||
<view v-if="item[imageKey] && !item[videoKey]">
|
|
||||||
<image :src="item[imageKey]" :style="{'height':swiperHeight+'px'}"></image>
|
|
||||||
<text v-if="textTip" class="swiperText" :style="{
|
|
||||||
'bottom':(swiperType?(textStyleBottom+12):textStyleBottom)+'%',
|
|
||||||
'right':textStyleRight+'%',
|
|
||||||
'color':textStyleColor,
|
|
||||||
'background':textStyleBgcolor,
|
|
||||||
'font-size':rpxtopx(textStyleSize)
|
|
||||||
}">{{item[textKey]}}</text>
|
|
||||||
</view>
|
|
||||||
<view v-if="item[videoKey]">
|
|
||||||
<video :src="item[videoKey]" @play="play" @pause="pause" :style="{'height':swiperHeight+'px'}" autoplay loop muted :autoplay="videoAutoplay" objectFit="cover"></video>
|
|
||||||
</view>
|
|
||||||
</swiper-item>
|
|
||||||
<swiper-item class="swiper-item" v-if="swiperList.length==0" >
|
|
||||||
<text></text>
|
|
||||||
</swiper-item>
|
|
||||||
</swiper>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name:'bw-swiper',
|
|
||||||
created:function(){
|
|
||||||
var that = this;
|
|
||||||
if(this.fullScreen){
|
|
||||||
uni.getSystemInfo({
|
|
||||||
success:function(e){
|
|
||||||
that.swiperHeight = e.screenHeight -44
|
|
||||||
}})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted:function(){
|
|
||||||
if(!this.fullScreen){
|
|
||||||
const query = uni.createSelectorQuery().in(this);
|
|
||||||
query.select('.swiper-item').boundingClientRect(data => {
|
|
||||||
if(!!data){
|
|
||||||
this.swiperHeight = data.width/this.w_h;
|
|
||||||
}
|
|
||||||
}).exec();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
fullScreen:{ // 是否全屏
|
|
||||||
type:Boolean,
|
|
||||||
default:false
|
|
||||||
},
|
|
||||||
swiperList:{ // 滑块视图容器数据
|
|
||||||
type:Array,
|
|
||||||
required: true,
|
|
||||||
default:function(){
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
swiperType:{ // false => 全屏限高轮播图 true => 卡塔式轮播图
|
|
||||||
type:Boolean,
|
|
||||||
default:false
|
|
||||||
},
|
|
||||||
videoAutoplay:{ // true =>自动播放
|
|
||||||
type:Boolean,
|
|
||||||
default:false
|
|
||||||
},
|
|
||||||
videoKey:{ // 视频映射的键
|
|
||||||
type:String,
|
|
||||||
default:'src'
|
|
||||||
},
|
|
||||||
imageKey:{ // 图片映射的键
|
|
||||||
type:String,
|
|
||||||
default:'img'
|
|
||||||
},
|
|
||||||
textKey:{ // 文字说明映射的键
|
|
||||||
type:String,
|
|
||||||
default:'text'
|
|
||||||
},
|
|
||||||
textTip:{ // 图片文字说明 false => 隐藏
|
|
||||||
type:Boolean,
|
|
||||||
default:false
|
|
||||||
},
|
|
||||||
textStyleSize:{ // 图片文字大小
|
|
||||||
type:Number,
|
|
||||||
default:24
|
|
||||||
},
|
|
||||||
textStyleBottom:{ // 图片文字位置
|
|
||||||
type:Number,
|
|
||||||
default:5
|
|
||||||
},
|
|
||||||
textStyleRight:{ // 图片文字位置
|
|
||||||
type:Number,
|
|
||||||
default:5
|
|
||||||
},
|
|
||||||
textStyleColor:{ // 图片文字颜色
|
|
||||||
type:String,
|
|
||||||
default:'#ffffff'
|
|
||||||
},
|
|
||||||
textStyleBgcolor:{ // 图片文字背景色
|
|
||||||
type:String,
|
|
||||||
default:'transparent'
|
|
||||||
},
|
|
||||||
w_h:{ //宽高比 推荐 w/h => 2
|
|
||||||
type:Number,
|
|
||||||
default:2
|
|
||||||
},
|
|
||||||
skipHiddenItemLayout:{ //是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息
|
|
||||||
type:Boolean,
|
|
||||||
default:false
|
|
||||||
},
|
|
||||||
displayMultipleItems:{ //同时显示的滑块数量
|
|
||||||
type:Number,
|
|
||||||
default:1
|
|
||||||
},
|
|
||||||
nextMargin:{ // 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 头条小程序不支持
|
|
||||||
type:String,
|
|
||||||
default:'0px'
|
|
||||||
},
|
|
||||||
previousMargin:{//前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值头条小程序不支持
|
|
||||||
type:String,
|
|
||||||
default:'0px'
|
|
||||||
},
|
|
||||||
vertical:{ //滑动方向是否为纵向 卡牌 不支持纵向以及同时显示的2块以上滑块数量
|
|
||||||
type:Boolean,
|
|
||||||
default:false
|
|
||||||
},
|
|
||||||
circular:{ // 是否采用衔接滑动
|
|
||||||
type:Boolean,
|
|
||||||
default:true
|
|
||||||
},
|
|
||||||
duration:{ // 滑动动画时长
|
|
||||||
type:Number,
|
|
||||||
default:400
|
|
||||||
},
|
|
||||||
interval:{ // 自动切换时间间隔
|
|
||||||
type:Number,
|
|
||||||
default:2500
|
|
||||||
},
|
|
||||||
current:{ // 当前所在滑块的 index
|
|
||||||
type:Number,
|
|
||||||
default:0
|
|
||||||
},
|
|
||||||
autoplay:{ // 是否自动切换
|
|
||||||
type:Boolean,
|
|
||||||
default:false
|
|
||||||
},
|
|
||||||
indicatorColor:{ // 指示点颜色
|
|
||||||
type:String,
|
|
||||||
default:'#CCCCCC'
|
|
||||||
},
|
|
||||||
indicatorActiveColor: { // 当前选中的指示点颜色
|
|
||||||
type: String,
|
|
||||||
default: '#ffffff'
|
|
||||||
},
|
|
||||||
indicatorDots: { // 是否显示面板指示点
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
flag:true,
|
|
||||||
cardCur:0,
|
|
||||||
swiperHeight:300
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed:{
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
rpxtopx:function(size){
|
|
||||||
// #ifdef MP-WEIXIN
|
|
||||||
return uni.upx2px(size)+'px'
|
|
||||||
// #endif
|
|
||||||
// #ifndef MP-WEIXIN
|
|
||||||
return size+'rpx';
|
|
||||||
// #endif
|
|
||||||
},
|
|
||||||
play:function(){
|
|
||||||
this.flag = false
|
|
||||||
},
|
|
||||||
pause:function(){
|
|
||||||
this.flag = true
|
|
||||||
},
|
|
||||||
|
|
||||||
tplGoToPage: function(e) {
|
|
||||||
let that = this;
|
|
||||||
var t = e.currentTarget.dataset;
|
|
||||||
switch (parseInt(t.type)) {
|
|
||||||
case 1:
|
|
||||||
that.$.gopage("/pages/product/detail?pid=" + t.id);
|
|
||||||
break;
|
|
||||||
case 2:
|
|
||||||
that.$.gopage("/pages/product/list?category_id=" + (t.id || 0) + "&cname=" + t.name);
|
|
||||||
break;
|
|
||||||
case 3:
|
|
||||||
that.$.gopage("/pages/product/list?pname=" + t.keyword);
|
|
||||||
break;
|
|
||||||
case 4: //快捷入口
|
|
||||||
if (t.appurl.indexOf("article-list") >= 0) {
|
|
||||||
that.$.gopage('/pagesub/article/list');
|
|
||||||
} else if (t.appurl.indexOf("fightgroupsorderlist") >= 0) {
|
|
||||||
that.$.gopage('/activity/fightgroup/order');
|
|
||||||
} else if (t.appurl.indexOf("fightgroupslist/fightgroupslist") >= 0) {
|
|
||||||
that.$.gopage('/activity/fightgroup/list');
|
|
||||||
} else if (t.appurl.indexOf("bargainlist/bargainlist") >= 0) {
|
|
||||||
that.$.gopage('/activity/cutprice/list');
|
|
||||||
} else if (t.appurl.indexOf("receivecontent/receivecontent") >= 0) {
|
|
||||||
that.$.gopage('/activity/coupon/list');
|
|
||||||
} else if (t.appurl.indexOf("cashaccount/cashaccount") >= 0) {
|
|
||||||
that.$.gopage('/member/cash/predeposit');
|
|
||||||
} else if (t.appurl.indexOf("fanslist/fanslist") >= 0) {
|
|
||||||
that.$.gopage('/member/fans/list');
|
|
||||||
} else if (t.appurl.indexOf("nearbylist/nearbylist") >= 0) {
|
|
||||||
that.$.gopage('/chain/chain/list');
|
|
||||||
} else if (t.appurl.indexOf("kind_id=1202") >= 0) {
|
|
||||||
that.$.gopage('/member/order/list?kind_id=1202');
|
|
||||||
} else if (t.appurl.indexOf("endorsement/endorsement") >= 0) {
|
|
||||||
that.$.gopage('/member/fans/endorsement');
|
|
||||||
} else if (t.appurl.indexOf("?type=3&sl=3") >= 0) {
|
|
||||||
that.$.gopage('/member/order/list?type=3&sl=3');
|
|
||||||
} else if (t.appurl.indexOf("goodcollection/goodcollection") >= 0) {
|
|
||||||
that.$.gopage('/member/member/favorites');
|
|
||||||
} else if (t.appurl.indexOf("fansrank/fansrank") >= 0) {
|
|
||||||
that.$.gopage('/member/fans/fansrank');
|
|
||||||
} else if (t.appurl.indexOf("favorable/favorable") >= 0) {
|
|
||||||
that.$.gopage('/chain/chain/favorable');
|
|
||||||
} else if (t.appurl.indexOf("fanslist/fanslist") >= 0) {
|
|
||||||
that.$.gopage('/member/fans/list');
|
|
||||||
} else if (t.appurl.indexOf("scan/scan") >= 0) {
|
|
||||||
that.$.gopage('/chain/chain/scan');
|
|
||||||
} else if (t.appurl.indexOf("smashgoldeneggs/smashgoldeneggs") >= 0) {
|
|
||||||
that.$.gopage('/activity/smashgoldeneggs/detail');
|
|
||||||
} else if (t.appurl.indexOf("luckydraw/luckydraw") >= 0) {
|
|
||||||
that.$.gopage('/member/luckydraw/detail');
|
|
||||||
} else {
|
|
||||||
that.$.gopage(t.appurl);
|
|
||||||
}
|
|
||||||
|
|
||||||
break;
|
|
||||||
case 5:
|
|
||||||
if (t.appurl.indexOf("fanslist/fanslist") >= 0) {
|
|
||||||
that.$.gopage('/member/fans/list');
|
|
||||||
} else {
|
|
||||||
that.$.gopage("/pagesub/article/list?category_id=" + (t.id || 0));
|
|
||||||
}
|
|
||||||
//that.$.gopage(t.appurl);
|
|
||||||
break;
|
|
||||||
case 6:
|
|
||||||
that.$.gopage("/pagesub/article/detail?id=" + t.id);
|
|
||||||
//that.$.gopage(t.appurl);
|
|
||||||
break;
|
|
||||||
case 7:
|
|
||||||
uni.navigateToMiniProgram({
|
|
||||||
appId: t.appid,
|
|
||||||
path: t.appurl || ""
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case 8:
|
|
||||||
that.$.gopage("/pagesub/diy-page/diy-page?id=" + t.id);
|
|
||||||
break;
|
|
||||||
case 9:
|
|
||||||
that.$.gopage("/pagesub/webpage/webpage?u=" + encodeURIComponent(t.appurl) + "&tn=" + t.name + "&tc=" + t.appid + "&tb=" +
|
|
||||||
t.keyword);
|
|
||||||
break;
|
|
||||||
case 99:
|
|
||||||
that.$.gopage(
|
|
||||||
'/pagesub/webpage/web?u=' +
|
|
||||||
encodeURIComponent(t.appurl) +
|
|
||||||
'&tn=' +
|
|
||||||
t.name +
|
|
||||||
'&tc=' +
|
|
||||||
t.appid +
|
|
||||||
'&tb=' +
|
|
||||||
t.keyword
|
|
||||||
);
|
|
||||||
|
|
||||||
case 10:
|
|
||||||
that.$.gopage(t.appurl);
|
|
||||||
break;
|
|
||||||
case 11:
|
|
||||||
that.$.gopage(t.appurl);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
clickItem:function(index){
|
|
||||||
if(this.swiperList.length>0){
|
|
||||||
this.$emit('clickItem',this.swiperList[index])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
change:function(e){
|
|
||||||
this.$emit('change',e)
|
|
||||||
},
|
|
||||||
animationfinish:function(e){
|
|
||||||
this.cardCur = e.detail.current;
|
|
||||||
this.$emit('animationfinish',e)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.cardSwiper .swiper-item{
|
|
||||||
width:86%!important;
|
|
||||||
overflow: initial;
|
|
||||||
}
|
|
||||||
.cardSwiper .swiper-item view{
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 10rpx;
|
|
||||||
transform: scale(0.9,0.8);
|
|
||||||
opacity: 0.7;
|
|
||||||
transition: all 0.1s ease-in 0s;
|
|
||||||
overflow: hidden;
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin-left:8.1%;
|
|
||||||
}
|
|
||||||
.cardSwiper .cur view{
|
|
||||||
transform: initial;
|
|
||||||
opacity: 1;
|
|
||||||
transition: all 0.1s ease-in 0s;
|
|
||||||
}
|
|
||||||
.swiper-item view{
|
|
||||||
height:100%;
|
|
||||||
width:100%;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.swiperText{
|
|
||||||
position: absolute;
|
|
||||||
color:#ffffff;
|
|
||||||
z-index:2;
|
|
||||||
border-radius: 4rpx;
|
|
||||||
padding:0 4rpx;
|
|
||||||
}
|
|
||||||
.screen-swiper image{
|
|
||||||
width:100%;
|
|
||||||
}
|
|
||||||
.screen-swiper video,
|
|
||||||
.swiper-item video {
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.swiperContent{
|
|
||||||
width:100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,267 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class='keyboard' @click.stop='_handleKeyPress'>
|
|
||||||
<view class='key-row'>
|
|
||||||
<view class='key-cell cell_b' data-num='7'>7</view>
|
|
||||||
<view class='key-cell cell_b' data-num='8'>8</view>
|
|
||||||
<view class='key-cell cell_b' data-num='9'>9</view>
|
|
||||||
<view class='key-cell cell_b' data-num='-1'></view>
|
|
||||||
</view>
|
|
||||||
<view class='key-row'>
|
|
||||||
<view class='key-cell cell_b' data-num='4'>4</view>
|
|
||||||
<view class='key-cell cell_b' data-num='5'>5</view>
|
|
||||||
<view class='key-cell cell_b' data-num='6'>6</view>
|
|
||||||
<view class='key-cell cell_b' data-num='-1'></view>
|
|
||||||
</view>
|
|
||||||
<view class='key-row'>
|
|
||||||
<view class='key-cell cell_b' data-num='1'>1</view>
|
|
||||||
<view class='key-cell cell_b' data-num='2'>2</view>
|
|
||||||
<view class='key-cell cell_b' data-num='3'>3</view>
|
|
||||||
<view class='key-cell cell_b' data-num='-1'></view>
|
|
||||||
</view>
|
|
||||||
<view class="key-zero-and-point">
|
|
||||||
<view class="a cell_b zero" data-num='0'>0</view>
|
|
||||||
<view class="a cell_b point" data-num='.'>.</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view @touchstart="touchstart" @touchend="touchend" data-num='D' class="key-confirm2">
|
|
||||||
<text data-num='D'>C</text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class='key-confirm' :style="{'background':btnColor}" data-num='S'>
|
|
||||||
<view data-num='S' class="">
|
|
||||||
<view data-num='S' class="title">{{title}}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default{
|
|
||||||
name:"keyBoard",
|
|
||||||
props:{
|
|
||||||
title:{
|
|
||||||
default:'确认',
|
|
||||||
type:String
|
|
||||||
},
|
|
||||||
btnColor:{
|
|
||||||
default:'green',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data(){
|
|
||||||
return {
|
|
||||||
money:'',
|
|
||||||
Cdel:'',
|
|
||||||
Time:''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
watch:{
|
|
||||||
money(val){
|
|
||||||
this.$emit('update:money',val);
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods : {
|
|
||||||
touchstart(){
|
|
||||||
this.Time=setInterval(()=>{
|
|
||||||
//console.log(this.money);
|
|
||||||
if(this.money==''){
|
|
||||||
clearInterval();
|
|
||||||
}
|
|
||||||
this.money = this.money.substring(0,this.money.length - 1);
|
|
||||||
},200)
|
|
||||||
},
|
|
||||||
touchend(){
|
|
||||||
clearInterval(this.Time);
|
|
||||||
},
|
|
||||||
//处理按键
|
|
||||||
_handleKeyPress(e) {
|
|
||||||
// //console.log('点击传e',e.target.dataset.num);
|
|
||||||
let num = e.target.dataset.num;
|
|
||||||
//不同按键处理逻辑
|
|
||||||
// -1 代表无效按键，直接返回
|
|
||||||
if (num == -1) return false;
|
|
||||||
switch (String(num)) {
|
|
||||||
//小数点
|
|
||||||
case '.':
|
|
||||||
this._handleDecimalPoint();
|
|
||||||
break;
|
|
||||||
//删除键
|
|
||||||
case 'D':
|
|
||||||
this._handleDeleteKey();
|
|
||||||
break;
|
|
||||||
//清空键
|
|
||||||
case 'C':
|
|
||||||
this._handleClearKey();
|
|
||||||
break;
|
|
||||||
//确认键
|
|
||||||
case 'S':
|
|
||||||
this._handleConfirmKey();
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
this._handleNumberKey(num);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
//处理小数点函数
|
|
||||||
_handleDecimalPoint() {
|
|
||||||
//如果包含小数点，直接返回
|
|
||||||
if (this.money.indexOf('.') > -1) return false;
|
|
||||||
//如果小数点是第一位，补0
|
|
||||||
if (!this.money.length)
|
|
||||||
this.money = '0.';
|
|
||||||
//如果不是，添加一个小数点
|
|
||||||
else
|
|
||||||
this.money = this.money + '.';
|
|
||||||
},
|
|
||||||
//处理删除键
|
|
||||||
_handleDeleteKey() {
|
|
||||||
let S = this.money;
|
|
||||||
//如果没有输入，直接返回
|
|
||||||
if (!S.length) return false;
|
|
||||||
//否则删除最后一个
|
|
||||||
this.money = S.substring(0, S.length - 1);
|
|
||||||
},
|
|
||||||
|
|
||||||
//处理清空键
|
|
||||||
_handleClearKey() {
|
|
||||||
this.money = '';
|
|
||||||
},
|
|
||||||
|
|
||||||
//处理数字
|
|
||||||
_handleNumberKey(num) {
|
|
||||||
if(this.money.length==10){
|
|
||||||
return
|
|
||||||
}
|
|
||||||
let S = this.money;
|
|
||||||
//如果有小数点且小数点位数不小于2
|
|
||||||
if ( S.indexOf('.') > -1 && S.substring(S.indexOf('.') + 1).length < 2)
|
|
||||||
this.money = S + num;
|
|
||||||
//没有小数点
|
|
||||||
if (!(S.indexOf('.') > -1)) {
|
|
||||||
//如果第一位是0，只能输入小数点
|
|
||||||
if (num == 0 && S.length == 0)
|
|
||||||
this.money = '0.';
|
|
||||||
else {
|
|
||||||
if (S.length && Number(S.charAt(0)) === 0) return;
|
|
||||||
this.money = S + num;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
//提交
|
|
||||||
_handleConfirmKey() {
|
|
||||||
let S = this.money;
|
|
||||||
//未输入
|
|
||||||
if (!S.length||S==0){
|
|
||||||
uni.showToast({
|
|
||||||
title: '请输入正确的数值',
|
|
||||||
icon:'none',
|
|
||||||
duration: 1000
|
|
||||||
});
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
//将 8. 这种转换成 8.00
|
|
||||||
if (S.indexOf('.') > -1 && S.indexOf('.') == (S.length - 1))
|
|
||||||
S = Number(S.substring(0, S.length - 1)).toFixed(2);
|
|
||||||
//保留两位
|
|
||||||
S = Number(S).toFixed(2);
|
|
||||||
this.$emit('confirmEvent',S); //提交参数
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.cell_b{
|
|
||||||
border-right: 1px solid #d5d5d6;
|
|
||||||
border-bottom: 1px solid #d5d5d6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.key-container {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.keyboard {
|
|
||||||
flex: 1;
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 40vh;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
background: #FFFFFF;
|
|
||||||
}
|
|
||||||
.keyboard .key-row {
|
|
||||||
display: flex;
|
|
||||||
display: -webkit-flex;
|
|
||||||
position: relative;
|
|
||||||
height: 10vh;
|
|
||||||
line-height: 10vh;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.keyboard .key-cell {
|
|
||||||
flex: 1;
|
|
||||||
-webkit-box-flex: 1;
|
|
||||||
font-size: 60rpx;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.keyboard .key-confirm {
|
|
||||||
position: absolute;
|
|
||||||
text-align: center;
|
|
||||||
height: 30vh;
|
|
||||||
width: 25%;
|
|
||||||
line-height: 30vh;
|
|
||||||
color: #FFFFFF;
|
|
||||||
z-index: 5;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
|
|
||||||
display:flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.keyboard .key-confirm2 {
|
|
||||||
position: absolute;
|
|
||||||
height: 10vh;
|
|
||||||
width: 25%;
|
|
||||||
line-height: 10vh;
|
|
||||||
z-index: 9999;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.key-zero-and-point{
|
|
||||||
display: flex;height: 10vh;justify-content: center;align-items: center;width:75%;font-size: 60rpx;
|
|
||||||
.zero{
|
|
||||||
display: flex;justify-content: center;align-items: center;width: 66.66%;font-size: 60rpx;text-align: center;height: 100%;
|
|
||||||
}
|
|
||||||
.point{
|
|
||||||
display: flex;justify-content: center;align-items: center;width: 33.33%;font-size: 60rpx;text-align: center;height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.key-cell:active{
|
|
||||||
color: white;
|
|
||||||
background: black; //黑色
|
|
||||||
opacity: 0.1; //这里重要，就是通过这个透明度来设置
|
|
||||||
}
|
|
||||||
.a:active,.key-confirm2:active{
|
|
||||||
color: white;
|
|
||||||
background: black; //黑色
|
|
||||||
opacity: 0.1; //这里重要，就是通过这个透明度来设置
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,184 +0,0 @@
|
|||||||
const citys = [
|
|
||||||
{
|
|
||||||
"letter": "A",
|
|
||||||
"list": [
|
|
||||||
"安远","安义","安溪","安丘","安宁","安吉","安福","阿城","安阳","安顺","鞍山","安庆","安康","阿里",
|
|
||||||
"阿勒泰","阿拉善盟","阿克苏","阿坝"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"letter": "B",
|
|
||||||
"list": [
|
|
||||||
"北京","博兴","博罗","博爱","璧山","宾阳","宾县","滨海","巴彦","宝应","亳州","博尔塔拉","滨州","毕节",
|
|
||||||
"本溪","北海","巴中","巴音郭楞","巴彦淖尔","包头","保山","宝鸡","保定","蚌埠","白银","白山","百色","白城"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"letter": "C",
|
|
||||||
"list": [
|
|
||||||
"成都","常州","长沙","长春","重庆","朝阳","巢湖","长治","昌吉","昌都","常德","沧州","郴州","承德","潮州",
|
|
||||||
"滁州","楚雄","崇左","池州","赤峰","枞阳","从化","慈溪","淳安","崇州","崇义","崇仁","茌平","成武","城口",
|
|
||||||
"呈贡","潮安","昌邑","长兴","长汀","长泰","常熟","常山","昌乐","长乐","长海","长丰","长岛","曹县","苍山",
|
|
||||||
"苍南"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"letter": "D",
|
|
||||||
"list": [
|
|
||||||
"丹东","大理","东莞","大连","大兴安岭","大同","大庆","德州","德阳","德宏","达州","大丰","东营","迪庆",
|
|
||||||
"定西","单县","当涂","砀山","岱山","大邑","大田","大埔","丹阳","德化","德安","大足","大余","德庆","德清",
|
|
||||||
"登封","德惠","定南","垫江","电白","德兴","东海","东阿","定远","定陶","东台","东山","东平","东明","东源",
|
|
||||||
"东阳","东乡","洞头","都江堰","都昌","东至"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"letter": "E",
|
|
||||||
"list": [
|
|
||||||
"鄂尔多斯","恩施","恩平","鄂州"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"letter": "F",
|
|
||||||
"list": [
|
|
||||||
"佛山","福州","防城港","抚顺","阜新","阜阳","抚州","法库","富阳","福清","阜宁","阜南","富民","浮梁","福鼎",
|
|
||||||
"福安","佛冈","分宜","凤阳","奉新","丰县","凤台","丰顺","封开","奉节","奉化","丰都","丰城","费县","肥西",
|
|
||||||
"肥东","肥城","方正","繁昌"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"letter": "G",
|
|
||||||
"list": [
|
|
||||||
"广州","贵阳","甘南","赣州","甘孜","广安","广元","贵港","桂林","果洛","固原","赣县","赣榆","高安","固镇",
|
|
||||||
"古田","贵溪","灌云","冠县","灌南","光泽","广饶","广宁","广丰","广德","广昌","巩义","高州","高邮","高邑",
|
|
||||||
"高要","高唐","高青","高密","高陵","皋兰","高淳","藁城"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"letter": "H",
|
|
||||||
"list": [
|
|
||||||
"杭州","哈尔滨","邯郸","海口","黑河","合肥","鹤岗","河池","鹤壁","汉中","哈密","海西","海南","海东","海北",
|
|
||||||
"惠州","呼伦贝尔","葫芦岛","呼和浩特","黄石","黄山","黄南","黄冈","淮南","怀化","淮北","淮安","红河","贺州",
|
|
||||||
"菏泽","河源","和田地","衡阳","衡水","怀远","怀宁","怀集","桦甸","华安","洪泽","和县","鹤山","和平","横县",
|
|
||||||
"横峰","合川","含山","海阳","海盐","海宁","海门","海丰","海安","湖州","户县","霍山","霍邱","呼兰","湖口",
|
|
||||||
"惠民","惠来","惠东","会昌","惠安","化州","桓台"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"letter": "J",
|
|
||||||
"list": [
|
|
||||||
"鸡西","酒泉","九江","锦州","晋中","济宁","金华","荆州","荆门","景德镇","晋城","金昌","揭阳","嘉峪关","吉安",
|
|
||||||
"江门","佳木斯","济南","吉林","嘉兴","焦作","井冈山","旌德","靖安","即墨","揭西","界首","揭东","嘉祥","嘉善",
|
|
||||||
"胶州","胶南","蕉岭","蛟河","吉安","建阳","建瓯","建宁","建湖","江阴","姜堰","江山","将乐","江津","江都","建德",
|
|
||||||
"九台","九江","吉水","晋州","金寨","缙云","金乡","金溪","进贤","金堂","金坛","晋宁","金门","晋江","金湖","井陉",
|
|
||||||
"泾县","景宁","靖江","巨野","莒县","句容","莒南","鄄城","济源","济阳","绩溪"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"letter": "K",
|
|
||||||
"list": [
|
|
||||||
"昆明","开封","喀什地","克拉玛依","克孜勒","开化","开平","开县","开阳","康平","垦利","昆山"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"letter": "L",
|
|
||||||
"list": [
|
|
||||||
"连云港","凉山","乐山","拉萨","廊坊","莱芜","来宾","洛阳","柳州","兰州","六盘水","六安","丽水","林芝","临沂","临夏",
|
|
||||||
"临汾","临沧","丽江","辽源","辽阳","聊城","乐亭","乐清","乐平","乐陵","雷州","乐昌","乐安","兰溪","蓝田","郎溪",
|
|
||||||
"莱州","莱阳","莱西","来安","吕梁","泸州","漯河","娄底","龙岩","陇南","临邑","临沭","临朐","临泉","临清","临海",
|
|
||||||
"陵县","灵寿","灵璧","临安","利津","黎川","辽中","连州","涟水","连山","连平","连南","廉江","连江","莲花","梁山",
|
|
||||||
"梁平","连城","鹿寨","芦溪","禄劝","鹿泉","罗源","洛宁","罗定","庐江","陆河","陆丰","滦县","滦南","栾川","栾城",
|
|
||||||
"龙游","龙泉","龙南","龙门","龙口","龙海","龙川","隆安","溧阳","利辛","浏阳","柳江","柳城","溧水"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"letter": "M",
|
|
||||||
"list": [
|
|
||||||
"马鞍山","茂名","眉山","梅州","绵阳","牡丹江","马山","梅县","蒙城","孟津","蒙阴","孟州","明光","明溪","闽侯","闽清",
|
|
||||||
"木兰"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"letter": "N",
|
|
||||||
"list": [
|
|
||||||
"南昌","南京","南宁","南通","宁波","南充","南平","南阳","那曲","内江","宁德","怒江","南安","南澳","南城","南川","南丰",
|
|
||||||
"南靖","南康","南陵","南雄","宁都","宁国","宁海","宁化","宁津","宁乡","宁阳","农安"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"letter": "P",
|
|
||||||
"list": [
|
|
||||||
"盘锦","攀枝花","平顶山","平凉","萍乡","普洱","莆田","濮阳","磐安","磐石","沛县","蓬莱","彭水","彭泽","彭州","平度",
|
|
||||||
"平和","平湖","屏南","平山","平潭","平阳","平阴","平邑","平原","平远","郫县","邳州","鄱阳","浦城","浦江","蒲江","普兰店",
|
|
||||||
"普宁"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"letter": "Q",
|
|
||||||
"list": [
|
|
||||||
"青岛","泉州","黔东","黔南","黔西南","庆阳","清远","秦皇岛","钦州","齐齐哈尔","七台河","曲靖","衢州","迁安","潜山","铅山",
|
|
||||||
"迁西","启东","齐河","綦江","祁门","清流","青田","清新","青阳","庆元","庆云","清镇","青州","沁阳","邛崃","栖霞","全椒",
|
|
||||||
"曲江","曲阜","全南"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"letter": "R",
|
|
||||||
"list": [
|
|
||||||
"日喀则","日照","饶平","仁化","融安","荣昌","荣成","融水","如东","如皋","瑞安","瑞昌","瑞金","乳山","汝阳","乳源"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"letter": "S",
|
|
||||||
"list": [
|
|
||||||
"上海","沈阳","深圳","石家庄","苏州","三门峡","三明","三亚","商丘","商洛","上饶","汕尾","汕头","绍兴","韶关","山南","邵阳",
|
|
||||||
"十堰","双鸭山","石嘴山","绥化","松原","四平","朔州","泗阳","泗县","泗水","四会","泗洪","沭阳","顺昌","舒兰","舒城","双流",
|
|
||||||
"双城","寿县","寿宁","寿光","石柱","始兴","石台","石狮","石林","石城","射阳","歙县","深泽","莘县","嵊州","嵊泗","沙县","绍兴",
|
|
||||||
"邵武","尚志","上虞","上犹","上饶","上林","上栗","商河","上杭","上高","诏安","三门","三江","松阳","嵩县","松溪","嵩明","宿州",
|
|
||||||
"宿迁","随州","遂宁","宿松","遂溪","濉溪","睢宁","遂川","遂昌","宿豫"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"letter": "T",
|
|
||||||
"list": [
|
|
||||||
"天津","台州","唐山","塔城地","泰安","太原","泰州","天水","铁岭","铜川","通化","通辽","铜陵","铜仁", "通州","桐乡","铜山","潼南",
|
|
||||||
"桐庐","铜陵","铜梁","通河","铜鼓","桐城","天台","天长","滕州","唐海","郯城","泰兴","泰顺","台山","泰宁","太湖","泰和","太和","太仓",
|
|
||||||
"吐鲁番"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"letter": "W",
|
|
||||||
"list": [
|
|
||||||
"潍坊","威海","武汉","无锡","渭南","文山","温州","乌海","芜湖","乌兰察布","乌鲁木齐","武威","吴忠","武陟","婺源","武夷山","武义","巫溪",
|
|
||||||
"无为","巫山","武平","武宁","武鸣","武隆","五莲","吴江","无极","五华","芜湖","五河","无棣","吴川","武城","五常","涡阳","温县","汶上",
|
|
||||||
"温岭","翁源","文登","文成","微山","万载","万年","望江","望城","万安","瓦房店","梧州"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"letter": "X",
|
|
||||||
"list": [
|
|
||||||
"厦门","西安","许昌","徐州","襄樊","湘潭","湘西","咸宁","咸阳","孝感","锡林郭勒盟","兴安盟","邢台","西宁","新乡","信阳","新余","忻州",
|
|
||||||
"西双版纳","宣城","峡江","夏津","象山","响水","仙居","仙游","萧县","霞浦","息烽","新安","新昌","信丰","新丰","新干","兴国","兴化","兴宁",
|
|
||||||
"行唐","荥阳","星子","辛集","新建","新津","新乐","新民","新密","新泰","新兴","新沂","信宜","新郑","休宁","秀山","修水","修文","修武",
|
|
||||||
"寻甸","盱眙","徐闻","寻乌"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"letter": "Y",
|
|
||||||
"list": [
|
|
||||||
"扬州","烟台","雅安","延安","延边","盐城","阳江","阳泉","宜宾","宜昌","伊春","宜春","伊犁哈萨克","银川","营口","鹰潭","益阳","永州","岳阳",
|
|
||||||
"玉林","榆林","运城","云浮","玉树","玉溪","阳春","阳东","阳谷","阳山","阳信","阳西","扬中","偃师","延寿","兖州","伊川","宜丰","宜黄","依兰",
|
|
||||||
"宜良","沂南","英德","颍上","沂水","义乌","黟县","宜兴","弋阳","宜阳","沂源","仪征","永安","永川","永春","永登","永定","永丰","永吉","永嘉",
|
|
||||||
"永康","邕宁","永泰","永新","永修","尤溪","酉阳","元氏","禹城","于都","岳西","余干","玉环","余江","郁南","云安","郓城","云和","云霄","云阳",
|
|
||||||
"玉山","榆树","鱼台","玉田","余姚","榆中"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"letter": "Z",
|
|
||||||
"list": [
|
|
||||||
"漳州","遵化","郑州","中山","珠海","枣庄","张家界","张家口","张掖","湛江","肇庆","昭通","镇江","中卫","周口","舟山","驻马店","株洲","淄博",
|
|
||||||
"自贡","资阳","遵义","赞皇","增城","张家港","漳平","漳浦","章丘","樟树","沾化","赵县","招远","正定","政和","柘荣","中牟","忠县","周宁",
|
|
||||||
"周至","庄河","诸城","诸暨","紫金","资溪","邹城","邹平"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
export default citys
|
|
||||||
@ -1,150 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="select-city-wrap">
|
|
||||||
<view class="select-city">
|
|
||||||
<view class="index">
|
|
||||||
<view class="index-item" @click="scrollTo('#')">#</view>
|
|
||||||
<view class="index-item" v-for="item in citys" :key="item.letter" @click="scrollTo(item.letter)">{{item.letter}}</view>
|
|
||||||
</view>
|
|
||||||
<scroll-view :scroll-into-view="scrollIntoId" :scroll-y="true" :scroll-with-animation="true" :style="{height:windowHeight}">
|
|
||||||
<view class="content">
|
|
||||||
<view class="section" id="current">
|
|
||||||
<view class="city-title">{{__('当前城市')}}</view>
|
|
||||||
<view class="city-list">
|
|
||||||
<view class="city-item">{{current}}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="section" id="hot" v-if="hotCitys.length">
|
|
||||||
<view class="city-title">{{__('热门城市')}}</view>
|
|
||||||
<view class="city-list">
|
|
||||||
<view class="city-item" :class="{active: current === city.subsite_name}" v-for="(city, i) in hotCitys" :key="i" @click="onSelect(city)">{{city.subsite_name}}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="section" :id="item.letter" v-for="item in citys" :key="item.letter">
|
|
||||||
<view class="letter">{{item.letter}}</view>
|
|
||||||
<view class="city-list">
|
|
||||||
<view class="city-item" :class="{active: current === city.subsite_name}" v-for="(city,itemIndex) in item.list" :key="itemIndex" @click="onSelect(city)">{{city.subsite_name}}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
//import Citys from './citys'
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
citys: {
|
|
||||||
type: Array,
|
|
||||||
default () {
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
hotCitys: {
|
|
||||||
type: Array,
|
|
||||||
default () {
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
subsite_current: {
|
|
||||||
type: Object,
|
|
||||||
default () {
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
windowHeight: '',
|
|
||||||
scrollIntoId: 'F',
|
|
||||||
current: this.subsite_current.subsite_name
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
let that = this;
|
|
||||||
this.getSystemInfo()
|
|
||||||
|
|
||||||
setTimeout(function(){that.current = that.subsite_current.subsite_name}, 400)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getSystemInfo() {
|
|
||||||
uni.getSystemInfo().then(res => {
|
|
||||||
let [error, data] = res
|
|
||||||
this.windowHeight = `${data.windowHeight}px`
|
|
||||||
})
|
|
||||||
},
|
|
||||||
scrollTo(letter) {
|
|
||||||
this.scrollIntoId = letter === '#' ? 'current' : letter
|
|
||||||
},
|
|
||||||
onSelect(city) {
|
|
||||||
this.current = city.subsite_name
|
|
||||||
this.$emit('input', city)
|
|
||||||
this.$emit('on-select', city)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.select-city-wrap {
|
|
||||||
position: relative;
|
|
||||||
padding: 0 30rpx;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
.select-city {
|
|
||||||
.index {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
bottom: 20rpx;
|
|
||||||
z-index: 999;
|
|
||||||
color: #2f9bfe;
|
|
||||||
font-size: 32rpx;
|
|
||||||
.index-item {
|
|
||||||
width: 40rpx;
|
|
||||||
height: 42rpx;
|
|
||||||
line-height: 42rpx;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.section {
|
|
||||||
margin-bottom: 19rpx;
|
|
||||||
.city-title {
|
|
||||||
color: #333;
|
|
||||||
font-size: 28rpx;
|
|
||||||
margin-bottom: 28rpx;
|
|
||||||
}
|
|
||||||
.letter {
|
|
||||||
width: 44rpx;
|
|
||||||
height: 44rpx;
|
|
||||||
color: #fff;
|
|
||||||
border-radius: 100%;
|
|
||||||
background-color: #2f9bfe;
|
|
||||||
font-size: 28rpx;
|
|
||||||
line-height: 44rpx;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 30rpx;
|
|
||||||
}
|
|
||||||
.city-list {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
.city-item {
|
|
||||||
width: 190rpx;
|
|
||||||
height: 55rpx;
|
|
||||||
margin-right: 36rpx;
|
|
||||||
margin-bottom: 28rpx;
|
|
||||||
line-height: 55rpx;
|
|
||||||
text-align: center;
|
|
||||||
border: 1px solid #dcdcdc;
|
|
||||||
border-radius: 6rpx;
|
|
||||||
color: #999;
|
|
||||||
font-size: 28rpx;
|
|
||||||
&.active {
|
|
||||||
background-color: #d5ebff;
|
|
||||||
border-color: #2f9bfe;
|
|
||||||
color: #2f9bfe;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,349 +1,388 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="uni-navbar" :class="{'uni-dark':dark}">
|
<view class="uni-navbar" :class="{ 'uni-dark': dark }">
|
||||||
<view :class="{ 'uni-navbar--fixed': fixed, 'uni-navbar--shadow': shadow, 'uni-navbar--border': border }"
|
<view
|
||||||
:style="{ 'background-color': themeBgColor }" class="uni-navbar__content">
|
:class="{
|
||||||
<status-bar v-if="statusBar" />
|
'uni-navbar--fixed': fixed,
|
||||||
<view :style="{ color: themeColor,backgroundColor: themeBgColor ,height:navbarHeight}"
|
'uni-navbar--shadow': shadow,
|
||||||
class="uni-navbar__header">
|
'uni-navbar--border': border,
|
||||||
<view @tap="onClickLeft" class="uni-navbar__header-btns uni-navbar__header-btns-left"
|
}"
|
||||||
:style="{width:leftIconWidth}">
|
:style="{ 'background-color': themeBgColor }"
|
||||||
<slot name="left">
|
class="uni-navbar__content"
|
||||||
<view class="uni-navbar__content_view" v-if="leftIcon.length > 0">
|
>
|
||||||
<uni-icons :color="themeColor" :type="leftIcon" size="20" />
|
<status-bar v-if="statusBar" />
|
||||||
</view>
|
<view
|
||||||
<view :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length > 0 }" class="uni-navbar-btn-text"
|
:style="{
|
||||||
v-if="leftText.length">
|
color: themeColor,
|
||||||
<text :style="{ color: themeColor, fontSize: '12px' }">{{ leftText }}</text>
|
backgroundColor: themeBgColor,
|
||||||
</view>
|
height: navbarHeight,
|
||||||
</slot>
|
}"
|
||||||
</view>
|
class="uni-navbar__header"
|
||||||
<view class="uni-navbar__header-container " @tap="onClickTitle">
|
>
|
||||||
<slot>
|
<view
|
||||||
<view class="uni-navbar__header-container-inner" v-if="title.length>0">
|
@tap="onClickLeft"
|
||||||
<text class="uni-nav-bar-text uni-ellipsis-1"
|
class="uni-navbar__header-btns uni-navbar__header-btns-left"
|
||||||
:style="{color: themeColor }">{{ title }}</text>
|
:style="{ minWidth: leftIconWidth }"
|
||||||
</view>
|
>
|
||||||
</slot>
|
<slot name="left">
|
||||||
</view>
|
<view class="uni-navbar__content_view" v-if="leftIcon.length > 0">
|
||||||
<view @click="onClickRight" class="uni-navbar__header-btns uni-navbar__header-btns-right"
|
<uni-icons :color="themeColor" :type="leftIcon" size="20" />
|
||||||
:style="{width:rightIconWidth}">
|
</view>
|
||||||
<slot name="right">
|
<view
|
||||||
<view v-if="rightIcon.length">
|
:class="{ 'uni-navbar-btn-icon-left': !leftIcon.length > 0 }"
|
||||||
<uni-icons :color="themeColor" :type="rightIcon" size="22" />
|
class="uni-navbar-btn-text"
|
||||||
</view>
|
v-if="leftText.length"
|
||||||
<view class="uni-navbar-btn-text" v-if="rightText.length && !rightIcon.length">
|
>
|
||||||
<text class="uni-nav-bar-right-text" :style="{ color: themeColor}">{{ rightText }}</text>
|
<text :style="{ color: themeColor, fontSize: '12px' }">{{
|
||||||
</view>
|
leftText
|
||||||
</slot>
|
}}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</slot>
|
||||||
</view>
|
</view>
|
||||||
<view class="uni-navbar__placeholder" v-if="fixed">
|
<view class="uni-navbar__header-container" @tap="onClickTitle">
|
||||||
<status-bar v-if="statusBar" />
|
<slot>
|
||||||
<view class="uni-navbar__placeholder-view" :style="{ height:navbarHeight}" />
|
<view
|
||||||
</view>
|
class="uni-navbar__header-container-inner"
|
||||||
</view>
|
v-if="title.length > 0"
|
||||||
|
>
|
||||||
|
<text
|
||||||
|
class="uni-nav-bar-text uni-ellipsis-1"
|
||||||
|
:style="{ color: themeColor }"
|
||||||
|
>{{ title }}</text
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
@click="onClickRight"
|
||||||
|
class="uni-navbar__header-btns uni-navbar__header-btns-right"
|
||||||
|
:style="{ width: rightIconWidth }"
|
||||||
|
>
|
||||||
|
<slot name="right">
|
||||||
|
<view v-if="rightIcon.length">
|
||||||
|
<uni-icons :color="themeColor" :type="rightIcon" size="22" />
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="uni-navbar-btn-text"
|
||||||
|
v-if="rightText.length && !rightIcon.length"
|
||||||
|
>
|
||||||
|
<text
|
||||||
|
class="uni-nav-bar-right-text"
|
||||||
|
:style="{ color: themeColor }"
|
||||||
|
>{{ rightText }}</text
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="uni-navbar__placeholder" v-if="fixed">
|
||||||
|
<status-bar v-if="statusBar" />
|
||||||
|
<view
|
||||||
|
class="uni-navbar__placeholder-view"
|
||||||
|
:style="{ height: navbarHeight }"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import statusBar from "./uni-status-bar.vue";
|
import statusBar from "./uni-status-bar.vue";
|
||||||
const getVal = (val) => typeof val === 'number' ? val + 'px' : val;
|
const getVal = (val) => (typeof val === "number" ? val + "px" : val);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* NavBar 自定义导航栏
|
* NavBar 自定义导航栏
|
||||||
* @description 导航栏组件，主要用于头部导航
|
* @description 导航栏组件，主要用于头部导航
|
||||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=52
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=52
|
||||||
* @property {Boolean} dark 开启黑暗模式
|
* @property {Boolean} dark 开启黑暗模式
|
||||||
* @property {String} title 标题文字
|
* @property {String} title 标题文字
|
||||||
* @property {String} leftText 左侧按钮文本
|
* @property {String} leftText 左侧按钮文本
|
||||||
* @property {String} rightText 右侧按钮文本
|
* @property {String} rightText 右侧按钮文本
|
||||||
* @property {String} leftIcon 左侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
|
* @property {String} leftIcon 左侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
|
||||||
* @property {String} rightIcon 右侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
|
* @property {String} rightIcon 右侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
|
||||||
* @property {String} color 图标和文字颜色
|
* @property {String} color 图标和文字颜色
|
||||||
* @property {String} backgroundColor 导航栏背景颜色
|
* @property {String} backgroundColor 导航栏背景颜色
|
||||||
* @property {Boolean} fixed = [true|false] 是否固定顶部
|
* @property {Boolean} fixed = [true|false] 是否固定顶部
|
||||||
* @property {Boolean} statusBar = [true|false] 是否包含状态栏
|
* @property {Boolean} statusBar = [true|false] 是否包含状态栏
|
||||||
* @property {Boolean} shadow = [true|false] 导航栏下是否有阴影
|
* @property {Boolean} shadow = [true|false] 导航栏下是否有阴影
|
||||||
* @property {Boolean} stat 是否开启统计标题上报
|
* @property {Boolean} stat 是否开启统计标题上报
|
||||||
* @event {Function} clickLeft 左侧按钮点击时触发
|
* @event {Function} clickLeft 左侧按钮点击时触发
|
||||||
* @event {Function} clickRight 右侧按钮点击时触发
|
* @event {Function} clickRight 右侧按钮点击时触发
|
||||||
* @event {Function} clickTitle 中间标题点击时触发
|
* @event {Function} clickTitle 中间标题点击时触发
|
||||||
*/
|
*/
|
||||||
export default {
|
export default {
|
||||||
name: "UniNavBar",
|
name: "UniNavBar",
|
||||||
components: {
|
components: {
|
||||||
statusBar
|
statusBar,
|
||||||
},
|
},
|
||||||
emits: ['clickLeft', 'clickRight', 'clickTitle'],
|
emits: ["clickLeft", "clickRight", "clickTitle"],
|
||||||
props: {
|
props: {
|
||||||
dark: {
|
dark: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false,
|
||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ""
|
default: "",
|
||||||
},
|
},
|
||||||
leftText: {
|
leftText: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ""
|
default: "",
|
||||||
},
|
},
|
||||||
rightText: {
|
rightText: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ""
|
default: "",
|
||||||
},
|
},
|
||||||
leftIcon: {
|
leftIcon: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ""
|
default: "",
|
||||||
},
|
},
|
||||||
rightIcon: {
|
rightIcon: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ""
|
default: "",
|
||||||
},
|
},
|
||||||
fixed: {
|
fixed: {
|
||||||
type: [Boolean, String],
|
type: [Boolean, String],
|
||||||
default: false
|
default: false,
|
||||||
},
|
},
|
||||||
color: {
|
color: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ""
|
default: "",
|
||||||
},
|
},
|
||||||
backgroundColor: {
|
backgroundColor: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ""
|
default: "",
|
||||||
},
|
},
|
||||||
statusBar: {
|
statusBar: {
|
||||||
type: [Boolean, String],
|
type: [Boolean, String],
|
||||||
default: false
|
default: false,
|
||||||
},
|
},
|
||||||
shadow: {
|
shadow: {
|
||||||
type: [Boolean, String],
|
type: [Boolean, String],
|
||||||
default: false
|
default: false,
|
||||||
},
|
},
|
||||||
border: {
|
border: {
|
||||||
type: [Boolean, String],
|
type: [Boolean, String],
|
||||||
default: true
|
default: true,
|
||||||
},
|
},
|
||||||
height: {
|
height: {
|
||||||
type: [Number, String],
|
type: [Number, String],
|
||||||
default: 44
|
default: 44,
|
||||||
},
|
},
|
||||||
leftWidth: {
|
leftWidth: {
|
||||||
type: [Number, String],
|
type: [Number, String],
|
||||||
default: 60
|
default: 60,
|
||||||
},
|
},
|
||||||
rightWidth: {
|
rightWidth: {
|
||||||
type: [Number, String],
|
type: [Number, String],
|
||||||
default: 60
|
default: 60,
|
||||||
},
|
},
|
||||||
stat: {
|
stat: {
|
||||||
type: [Boolean, String],
|
type: [Boolean, String],
|
||||||
default: ''
|
default: "",
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
themeBgColor() {
|
themeBgColor() {
|
||||||
if (this.dark) {
|
if (this.dark) {
|
||||||
// 默认值
|
// 默认值
|
||||||
if (this.backgroundColor) {
|
if (this.backgroundColor) {
|
||||||
return this.backgroundColor
|
return this.backgroundColor;
|
||||||
} else {
|
} else {
|
||||||
return this.dark ? '#333' : '#FFF'
|
return this.dark ? "#333" : "#FFF";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return this.backgroundColor || '#FFF'
|
return this.backgroundColor || "#FFF";
|
||||||
},
|
},
|
||||||
themeColor() {
|
themeColor() {
|
||||||
if (this.dark) {
|
if (this.dark) {
|
||||||
// 默认值
|
// 默认值
|
||||||
if (this.color) {
|
if (this.color) {
|
||||||
return this.color
|
return this.color;
|
||||||
} else {
|
} else {
|
||||||
return this.dark ? '#fff' : '#333'
|
return this.dark ? "#fff" : "#333";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return this.color || '#333'
|
return this.color || "#333";
|
||||||
},
|
},
|
||||||
navbarHeight() {
|
navbarHeight() {
|
||||||
return getVal(this.height)
|
return getVal(this.height);
|
||||||
},
|
},
|
||||||
leftIconWidth() {
|
leftIconWidth() {
|
||||||
return getVal(this.leftWidth)
|
return getVal(this.leftWidth);
|
||||||
},
|
},
|
||||||
rightIconWidth() {
|
rightIconWidth() {
|
||||||
return getVal(this.rightWidth)
|
return getVal(this.rightWidth);
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
if (uni.report && this.stat && this.title !== '') {
|
if (uni.report && this.stat && this.title !== "") {
|
||||||
uni.report('title', this.title)
|
uni.report("title", this.title);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onClickLeft() {
|
onClickLeft() {
|
||||||
this.$emit("clickLeft");
|
this.$emit("clickLeft");
|
||||||
},
|
},
|
||||||
onClickRight() {
|
onClickRight() {
|
||||||
this.$emit("clickRight");
|
this.$emit("clickRight");
|
||||||
},
|
},
|
||||||
onClickTitle() {
|
onClickTitle() {
|
||||||
this.$emit("clickTitle");
|
this.$emit("clickTitle");
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
$nav-height: 44px;
|
$nav-height: 44px;
|
||||||
|
|
||||||
.uni-navbar {
|
.uni-navbar {
|
||||||
// box-sizing: border-box;
|
// box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-nav-bar-text {
|
.uni-nav-bar-text {
|
||||||
/* #ifdef APP-PLUS */
|
/* #ifdef APP-PLUS */
|
||||||
font-size: 34rpx;
|
font-size: 34rpx;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
/* #ifndef APP-PLUS */
|
/* #ifndef APP-PLUS */
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-nav-bar-right-text {
|
.uni-nav-bar-right-text {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-navbar__content {
|
.uni-navbar__content {
|
||||||
position: relative;
|
position: relative;
|
||||||
// background-color: #fff;
|
// background-color: #fff;
|
||||||
// box-sizing: border-box;
|
// box-sizing: border-box;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-navbar__content_view {
|
.uni-navbar__content_view {
|
||||||
// box-sizing: border-box;
|
// box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-navbar-btn-text {
|
.uni-navbar-btn-text {
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
display: flex;
|
display: flex;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
line-height: 12px;
|
line-height: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-navbar__header {
|
.uni-navbar__header {
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
display: flex;
|
display: flex;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
padding: 0 10px;
|
padding: 5px 10px;
|
||||||
padding-top: 10rpx;
|
flex-direction: row;
|
||||||
flex-direction: row;
|
height: $nav-height;
|
||||||
height: $nav-height;
|
font-size: 12px;
|
||||||
font-size: 12px;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-navbar__header-btns {
|
.uni-navbar__header-btns {
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
width: 120rpx;
|
// width: 120rpx;
|
||||||
// padding: 0 6px;
|
// padding: 0 6px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
/* #ifdef H5 */
|
/* #ifdef H5 */
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-navbar__header-btns-left {
|
.uni-navbar__header-btns-left {
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
display: flex;
|
display: flex;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
width: 120rpx;
|
min-width: 120rpx;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-navbar__header-btns-right {
|
.uni-navbar__header-btns-right {
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
display: flex;
|
display: flex;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
// width: 150rpx;
|
// width: 150rpx;
|
||||||
// padding-right: 30rpx;
|
// padding-right: 30rpx;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-navbar__header-container {
|
.uni-navbar__header-container {
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
display: flex;
|
display: flex;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-navbar__header-container-inner {
|
.uni-navbar__header-container-inner {
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
display: flex;
|
display: flex;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
flex: 1;
|
flex: 1;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
// box-sizing: border-box;
|
// box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.uni-navbar__placeholder-view {
|
||||||
|
height: $nav-height;
|
||||||
|
}
|
||||||
|
|
||||||
.uni-navbar__placeholder-view {
|
.uni-navbar--fixed {
|
||||||
height: $nav-height;
|
position: fixed;
|
||||||
}
|
z-index: 998;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
left: var(--window-left);
|
||||||
|
right: var(--window-right);
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef H5 */
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
.uni-navbar--fixed {
|
.uni-navbar--shadow {
|
||||||
position: fixed;
|
box-shadow: 0 1px 6px #ccc;
|
||||||
z-index: 998;
|
}
|
||||||
/* #ifdef H5 */
|
|
||||||
left: var(--window-left);
|
|
||||||
right: var(--window-right);
|
|
||||||
/* #endif */
|
|
||||||
/* #ifndef H5 */
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
/* #endif */
|
|
||||||
|
|
||||||
}
|
.uni-navbar--border {
|
||||||
|
border-bottom-width: 1rpx;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
.uni-navbar--shadow {
|
.uni-ellipsis-1 {
|
||||||
box-shadow: 0 1px 6px #ccc;
|
overflow: hidden;
|
||||||
}
|
/* #ifndef APP-NVUE */
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
lines: 1;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
.uni-navbar--border {
|
// 暗主题配置
|
||||||
border-bottom-width: 1rpx;
|
.uni-dark {
|
||||||
border-bottom-style: solid;
|
}
|
||||||
border-bottom-color: #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-ellipsis-1 {
|
|
||||||
overflow: hidden;
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
/* #endif */
|
|
||||||
/* #ifdef APP-NVUE */
|
|
||||||
lines: 1;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
// 暗主题配置
|
|
||||||
.uni-dark {}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
505
helpers/GeoUtils.js
Normal file
505
helpers/GeoUtils.js
Normal file
@ -0,0 +1,505 @@
|
|||||||
|
/**
|
||||||
|
* @fileoverview GeoUtils类提供若干几何算法，用来帮助用户判断点与矩形、
|
||||||
|
* 圆形、多边形线、多边形面的关系,并提供计算折线长度和多边形的面积的公式。
|
||||||
|
* 主入口类是<a href="symbols/BMapLib.GeoUtils.html">GeoUtils</a>，
|
||||||
|
* 基于Baidu Map API 1.2。
|
||||||
|
*
|
||||||
|
* @author Baidu Map Api Group
|
||||||
|
* @version 1.2
|
||||||
|
*/
|
||||||
|
|
||||||
|
//BMapLib.GeoUtils.degreeToRad(Number)
|
||||||
|
//将度转化为弧度
|
||||||
|
|
||||||
|
//BMapLib.GeoUtils.getDistance(Point, Point)
|
||||||
|
//计算两点之间的距离,两点坐标必须为经纬度
|
||||||
|
|
||||||
|
//BMapLib.GeoUtils.getPolygonArea(polygon)
|
||||||
|
//计算多边形面或点数组构建图形的面积,注意：坐标类型只能是经纬度，且不适合计算自相交多边形的面积(封闭的面积)
|
||||||
|
|
||||||
|
//BMapLib.GeoUtils.getPolylineDistance(polyline)
|
||||||
|
//计算折线或者点数组的长度
|
||||||
|
|
||||||
|
//BMapLib.GeoUtils.isPointInCircle(point, circle)
|
||||||
|
//判断点是否在圆形内
|
||||||
|
|
||||||
|
//BMapLib.GeoUtils.isPointInPolygon(point, polygon)
|
||||||
|
//判断点是否多边形内
|
||||||
|
|
||||||
|
//BMapLib.GeoUtils.isPointInRect(point, bounds)
|
||||||
|
//判断点是否在矩形内
|
||||||
|
|
||||||
|
//BMapLib.GeoUtils.isPointOnPolyline(point, polyline)
|
||||||
|
//判断点是否在折线上
|
||||||
|
|
||||||
|
//BMapLib.GeoUtils.radToDegree(Number)
|
||||||
|
//将弧度转化为度
|
||||||
|
|
||||||
|
function getCenterPoint(path)
|
||||||
|
{
|
||||||
|
//var path = e.;//Array<Point> 返回多边型的点数组
|
||||||
|
//var ret=parseFloat(num1)+parseFloat(num2);
|
||||||
|
var x = 0.0;
|
||||||
|
var y = 0.0;
|
||||||
|
for(var i=0;i<path.length;i++){
|
||||||
|
x=x+ parseFloat(path[i].lng);
|
||||||
|
y=y+ parseFloat(path[i].lat);
|
||||||
|
}
|
||||||
|
x=x/path.length;
|
||||||
|
y=y/path.length;
|
||||||
|
return new BMap.Point(x,y);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @namespace BMap的所有library类均放在BMapLib命名空间下
|
||||||
|
*/
|
||||||
|
var BMapLib = {};
|
||||||
|
(function () {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 地球半径
|
||||||
|
*/
|
||||||
|
var EARTHRADIUS = 6370996.81;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @exports GeoUtils as BMapLib.GeoUtils
|
||||||
|
*/
|
||||||
|
var GeoUtils =
|
||||||
|
/**
|
||||||
|
* GeoUtils类，静态类，勿需实例化即可使用
|
||||||
|
* @class GeoUtils类的<b>入口</b>。
|
||||||
|
* 该类提供的都是静态方法，勿需实例化即可使用。
|
||||||
|
*/
|
||||||
|
BMapLib.GeoUtils = function () {
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 判断点是否在矩形内
|
||||||
|
* @param {Point} point 点对象
|
||||||
|
* @param {Bounds} bounds 矩形边界对象
|
||||||
|
* @returns {Boolean} 点在矩形内返回true,否则返回false
|
||||||
|
*/
|
||||||
|
GeoUtils.isPointInRect = function (point, bounds) {
|
||||||
|
//检查类型是否正确
|
||||||
|
if (!(point instanceof BMap.Point) ||
|
||||||
|
!(bounds instanceof BMap.Bounds)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
var sw = bounds.getSouthWest(); //西南脚点
|
||||||
|
var ne = bounds.getNorthEast(); //东北脚点
|
||||||
|
return (point.lng >= sw.lng && point.lng <= ne.lng && point.lat >= sw.lat && point.lat <= ne.lat);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 判断点是否在圆形内
|
||||||
|
* @param {Point} point 点对象
|
||||||
|
* @param {Circle} circle 圆形对象
|
||||||
|
* @returns {Boolean} 点在圆形内返回true,否则返回false
|
||||||
|
*/
|
||||||
|
GeoUtils.isPointInCircle = function (point, circle) {
|
||||||
|
//检查类型是否正确
|
||||||
|
if (!(point instanceof BMap.Point) ||
|
||||||
|
!(circle instanceof BMap.Circle)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
//point与圆心距离小于圆形半径，则点在圆内，否则在圆外
|
||||||
|
var c = circle.getCenter();
|
||||||
|
var r = circle.getRadius();
|
||||||
|
|
||||||
|
var dis = GeoUtils.getDistance(point, c);
|
||||||
|
if (dis <= r) {
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 判断点是否在折线上
|
||||||
|
* @param {Point} point 点对象
|
||||||
|
* @param {Polyline} polyline 折线对象
|
||||||
|
* @returns {Boolean} 点在折线上返回true,否则返回false
|
||||||
|
*/
|
||||||
|
GeoUtils.isPointOnPolyline = function (point, polyline) {
|
||||||
|
//检查类型
|
||||||
|
if (!(point instanceof BMap.Point) ||
|
||||||
|
!(polyline instanceof BMap.Polyline)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
//首先判断点是否在线的外包矩形内，如果在，则进一步判断，否则返回false
|
||||||
|
var lineBounds = polyline.getBounds();
|
||||||
|
if (!this.isPointInRect(point, lineBounds)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
//判断点是否在线段上，设点为Q，线段为P1P2 ，
|
||||||
|
//判断点Q在该线段上的依据是：( Q - P1 ) × ( P2 - P1 ) = 0，且 Q 在以 P1，P2为对角顶点的矩形内
|
||||||
|
var pts = polyline.getPath();
|
||||||
|
for (var i = 0; i < pts.length - 1; i++) {
|
||||||
|
var curPt = pts[i];
|
||||||
|
var nextPt = pts[i + 1];
|
||||||
|
//首先判断point是否在curPt和nextPt之间，即：此判断该点是否在该线段的外包矩形内
|
||||||
|
if (point.lng >= Math.min(curPt.lng, nextPt.lng) && point.lng <= Math.max(curPt.lng, nextPt.lng) &&
|
||||||
|
point.lat >= Math.min(curPt.lat, nextPt.lat) && point.lat <= Math.max(curPt.lat, nextPt.lat)) {
|
||||||
|
//判断点是否在直线上公式
|
||||||
|
var precision = (curPt.lng - point.lng) * (nextPt.lat - point.lat) - (nextPt.lng - point.lng) * (curPt.lat - point.lat);
|
||||||
|
if (precision < 2e-10 && precision > -2e-10) {//实质判断是否接近0
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 判断点是否多边形内
|
||||||
|
* @param {Point} point 点对象
|
||||||
|
* @param {Polyline} polygon 多边形对象
|
||||||
|
* @returns {Boolean} 点在多边形内返回true,否则返回false
|
||||||
|
*/
|
||||||
|
GeoUtils.isPointInPolygon = function (point, polygon) {
|
||||||
|
//检查类型
|
||||||
|
if (!(point instanceof BMap.Point) ||
|
||||||
|
!(polygon instanceof BMap.Polygon)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
//首先判断点是否在多边形的外包矩形内，如果在，则进一步判断，否则返回false
|
||||||
|
var polygonBounds = polygon.getBounds();
|
||||||
|
if (!this.isPointInRect(point, polygonBounds)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
var pts = polygon.getPath(); //获取多边形点
|
||||||
|
|
||||||
|
//下述代码来源：http://paulbourke.net/geometry/insidepoly/，进行了部分修改
|
||||||
|
//基本思想是利用射线法，计算射线与多边形各边的交点，如果是偶数，则点在多边形外，否则
|
||||||
|
//在多边形内。还会考虑一些特殊情况，如点在多边形顶点上，点在多边形边上等特殊情况。
|
||||||
|
|
||||||
|
var N = pts.length;
|
||||||
|
var boundOrVertex = true; //如果点位于多边形的顶点或边上，也算做点在多边形内，直接返回true
|
||||||
|
var intersectCount = 0; //cross points count of x
|
||||||
|
var precision = 2e-10; //浮点类型计算时候与0比较时候的容差
|
||||||
|
var p1, p2; //neighbour bound vertices
|
||||||
|
var p = point; //测试点
|
||||||
|
|
||||||
|
p1 = pts[0]; //left vertex
|
||||||
|
for (var i = 1; i <= N; ++i) {//check all rays
|
||||||
|
if (p.equals(p1)) {
|
||||||
|
return boundOrVertex; //p is an vertex
|
||||||
|
}
|
||||||
|
|
||||||
|
p2 = pts[i % N]; //right vertex
|
||||||
|
if (p.lat < Math.min(p1.lat, p2.lat) || p.lat > Math.max(p1.lat, p2.lat)) {//ray is outside of our interests
|
||||||
|
p1 = p2;
|
||||||
|
continue; //next ray left point
|
||||||
|
}
|
||||||
|
if (p.lat > Math.min(p1.lat, p2.lat) && p.lat < Math.max(p1.lat, p2.lat)) {//ray is crossing over by the algorithm (common part of)
|
||||||
|
if (p.lng <= Math.max(p1.lng, p2.lng)) {//x is before of ray
|
||||||
|
if (p1.lat == p2.lat && p.lng >= Math.min(p1.lng, p2.lng)) {//overlies on a horizontal ray
|
||||||
|
return boundOrVertex;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (p1.lng == p2.lng) {//ray is vertical
|
||||||
|
|
||||||
|
|
||||||
|
if (p1.lng == p.lng) {//overlies on a vertical ray
|
||||||
|
return boundOrVertex;
|
||||||
|
} else {//before ray
|
||||||
|
++intersectCount;
|
||||||
|
}
|
||||||
|
} else {//cross point on the left side
|
||||||
|
|
||||||
|
|
||||||
|
var xinters = (p.lat - p1.lat) * (p2.lng - p1.lng) / (p2.lat - p1.lat) + p1.lng; //cross point of lng
|
||||||
|
|
||||||
|
|
||||||
|
if (Math.abs(p.lng - xinters) < precision) {//overlies on a ray
|
||||||
|
return boundOrVertex;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (p.lng < xinters) {//before ray
|
||||||
|
++intersectCount;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {//special case when ray is crossing through the vertex
|
||||||
|
if (p.lat == p2.lat && p.lng <= p2.lng) {//p crossing over p2
|
||||||
|
var p3 = pts[(i + 1) % N]; //next vertex
|
||||||
|
|
||||||
|
|
||||||
|
if (p.lat >= Math.min(p1.lat, p3.lat) && p.lat <= Math.max(p1.lat, p3.lat)) {//p.lat lies between p1.lat & p3.lat
|
||||||
|
++intersectCount;
|
||||||
|
} else {
|
||||||
|
intersectCount += 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
p1 = p2; //next ray left point
|
||||||
|
}
|
||||||
|
|
||||||
|
if (intersectCount % 2 == 0) {//偶数在多边形外
|
||||||
|
return false;
|
||||||
|
} else { //奇数在多边形内
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 将度转化为弧度
|
||||||
|
* @param {degree} Number 度
|
||||||
|
* @returns {Number} 弧度
|
||||||
|
*/
|
||||||
|
GeoUtils.degreeToRad = function (degree) {
|
||||||
|
return Math.PI * degree / 180;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 将弧度转化为度
|
||||||
|
* @param {radian} Number 弧度
|
||||||
|
* @returns {Number} 度
|
||||||
|
*/
|
||||||
|
GeoUtils.radToDegree = function (rad) {
|
||||||
|
return (180 * rad) / Math.PI;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 将v值限定在a,b之间，纬度使用
|
||||||
|
*/
|
||||||
|
function _getRange(v, a, b) {
|
||||||
|
if (a != null) {
|
||||||
|
v = Math.max(v, a);
|
||||||
|
}
|
||||||
|
if (b != null) {
|
||||||
|
v = Math.min(v, b);
|
||||||
|
}
|
||||||
|
return v;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 将v值限定在a,b之间，经度使用
|
||||||
|
*/
|
||||||
|
function _getLoop(v, a, b) {
|
||||||
|
while (v > b) {
|
||||||
|
v -= b - a
|
||||||
|
}
|
||||||
|
while (v < a) {
|
||||||
|
v += b - a
|
||||||
|
}
|
||||||
|
return v;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 计算两点之间的距离,两点坐标必须为经纬度
|
||||||
|
* @param {point1} Point 点对象
|
||||||
|
* @param {point2} Point 点对象
|
||||||
|
* @returns {Number} 两点之间距离，单位为米
|
||||||
|
*/
|
||||||
|
GeoUtils.getDistance = function (point1, point2) {
|
||||||
|
//判断类型
|
||||||
|
// debugger;
|
||||||
|
// if (!(point1 instanceof BMap.Point) ||
|
||||||
|
// !(point2 instanceof BMap.Point)) {
|
||||||
|
// return 0;
|
||||||
|
// }
|
||||||
|
|
||||||
|
point1.lng = _getLoop(point1.lng, -180, 180);
|
||||||
|
point1.lat = _getRange(point1.lat, -74, 74);
|
||||||
|
point2.lng = _getLoop(point2.lng, -180, 180);
|
||||||
|
point2.lat = _getRange(point2.lat, -74, 74);
|
||||||
|
|
||||||
|
var x1, x2, y1, y2;
|
||||||
|
x1 = GeoUtils.degreeToRad(point1.lng);
|
||||||
|
y1 = GeoUtils.degreeToRad(point1.lat);
|
||||||
|
x2 = GeoUtils.degreeToRad(point2.lng);
|
||||||
|
y2 = GeoUtils.degreeToRad(point2.lat);
|
||||||
|
|
||||||
|
return EARTHRADIUS * Math.acos((Math.sin(y1) * Math.sin(y2) + Math.cos(y1) * Math.cos(y2) * Math.cos(x2 - x1)));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 计算折线或者点数组的长度
|
||||||
|
* @param {Polyline|Array<Point>} polyline 折线对象或者点数组
|
||||||
|
* @returns {Number} 折线或点数组对应的长度
|
||||||
|
*/
|
||||||
|
GeoUtils.getPolylineDistance = function (polyline) {
|
||||||
|
//检查类型
|
||||||
|
if (polyline instanceof BMap.Polyline ||
|
||||||
|
polyline instanceof Array) {
|
||||||
|
//将polyline统一为数组
|
||||||
|
var pts;
|
||||||
|
if (polyline instanceof BMap.Polyline) {
|
||||||
|
pts = polyline.getPath();
|
||||||
|
} else {
|
||||||
|
pts = polyline;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (pts.length < 2) {//小于2个点，返回0
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
//遍历所有线段将其相加，计算整条线段的长度
|
||||||
|
var totalDis = 0;
|
||||||
|
for (var i = 0; i < pts.length - 1; i++) {
|
||||||
|
var curPt = pts[i];
|
||||||
|
var nextPt = pts[i + 1]
|
||||||
|
var dis = GeoUtils.getDistance(curPt, nextPt);
|
||||||
|
totalDis += dis;
|
||||||
|
}
|
||||||
|
|
||||||
|
return totalDis;
|
||||||
|
|
||||||
|
} else {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 计算多边形面或点数组构建图形的面积,注意：坐标类型只能是经纬
|
||||||
|
|
||||||
|
度，且不适合计算自相交多边形的面积
|
||||||
|
* @param {Polygon|Array<Point>} polygon 多边形面对象或者点数
|
||||||
|
|
||||||
|
组
|
||||||
|
* @returns {Number} 多边形面或点数组构成图形的面积
|
||||||
|
*/
|
||||||
|
GeoUtils.getPolygonArea = function (polygon) {
|
||||||
|
//检查类型
|
||||||
|
if (!(polygon instanceof BMap.Polygon) &&
|
||||||
|
!(polygon instanceof Array)) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
var pts;
|
||||||
|
if (polygon instanceof BMap.Polygon) {
|
||||||
|
pts = polygon.getPath();
|
||||||
|
} else {
|
||||||
|
pts = polygon;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (pts.length < 3) {//小于3个顶点，不能构建面
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
var totalArea = 0; //初始化总面积
|
||||||
|
var LowX = 0.0;
|
||||||
|
var LowY = 0.0;
|
||||||
|
var MiddleX = 0.0;
|
||||||
|
var MiddleY = 0.0;
|
||||||
|
var HighX = 0.0;
|
||||||
|
var HighY = 0.0;
|
||||||
|
var AM = 0.0;
|
||||||
|
var BM = 0.0;
|
||||||
|
var CM = 0.0;
|
||||||
|
var AL = 0.0;
|
||||||
|
var BL = 0.0;
|
||||||
|
var CL = 0.0;
|
||||||
|
var AH = 0.0;
|
||||||
|
var BH = 0.0;
|
||||||
|
var CH = 0.0;
|
||||||
|
var CoefficientL = 0.0;
|
||||||
|
var CoefficientH = 0.0;
|
||||||
|
var ALtangent = 0.0;
|
||||||
|
var BLtangent = 0.0;
|
||||||
|
var CLtangent = 0.0;
|
||||||
|
var AHtangent = 0.0;
|
||||||
|
var BHtangent = 0.0;
|
||||||
|
var CHtangent = 0.0;
|
||||||
|
var ANormalLine = 0.0;
|
||||||
|
var BNormalLine = 0.0;
|
||||||
|
var CNormalLine = 0.0;
|
||||||
|
var OrientationValue = 0.0;
|
||||||
|
var AngleCos = 0.0;
|
||||||
|
var Sum1 = 0.0;
|
||||||
|
var Sum2 = 0.0;
|
||||||
|
var Count2 = 0;
|
||||||
|
var Count1 = 0;
|
||||||
|
var Sum = 0.0;
|
||||||
|
var Radius = EARTHRADIUS; //6378137.0,WGS84椭球半径
|
||||||
|
var Count = pts.length;
|
||||||
|
for (var i = 0; i < Count; i++) {
|
||||||
|
if (i == 0) {
|
||||||
|
LowX = pts[Count - 1].lng * Math.PI / 180;
|
||||||
|
LowY = pts[Count - 1].lat * Math.PI / 180;
|
||||||
|
MiddleX = pts[0].lng * Math.PI / 180;
|
||||||
|
MiddleY = pts[0].lat * Math.PI / 180;
|
||||||
|
HighX = pts[1].lng * Math.PI / 180;
|
||||||
|
HighY = pts[1].lat * Math.PI / 180;
|
||||||
|
}
|
||||||
|
else if (i == Count - 1) {
|
||||||
|
LowX = pts[Count - 2].lng * Math.PI / 180;
|
||||||
|
LowY = pts[Count - 2].lat * Math.PI / 180;
|
||||||
|
MiddleX = pts[Count - 1].lng * Math.PI / 180;
|
||||||
|
MiddleY = pts[Count - 1].lat * Math.PI / 180;
|
||||||
|
HighX = pts[0].lng * Math.PI / 180;
|
||||||
|
HighY = pts[0].lat * Math.PI / 180;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
LowX = pts[i - 1].lng * Math.PI / 180;
|
||||||
|
LowY = pts[i - 1].lat * Math.PI / 180;
|
||||||
|
MiddleX = pts[i].lng * Math.PI / 180;
|
||||||
|
MiddleY = pts[i].lat * Math.PI / 180;
|
||||||
|
HighX = pts[i + 1].lng * Math.PI / 180;
|
||||||
|
HighY = pts[i + 1].lat * Math.PI / 180;
|
||||||
|
}
|
||||||
|
AM = Math.cos(MiddleY) * Math.cos(MiddleX);
|
||||||
|
BM = Math.cos(MiddleY) * Math.sin(MiddleX);
|
||||||
|
CM = Math.sin(MiddleY);
|
||||||
|
AL = Math.cos(LowY) * Math.cos(LowX);
|
||||||
|
BL = Math.cos(LowY) * Math.sin(LowX);
|
||||||
|
CL = Math.sin(LowY);
|
||||||
|
AH = Math.cos(HighY) * Math.cos(HighX);
|
||||||
|
BH = Math.cos(HighY) * Math.sin(HighX);
|
||||||
|
CH = Math.sin(HighY);
|
||||||
|
CoefficientL = (AM * AM + BM * BM + CM * CM) / (AM * AL + BM * BL + CM * CL);
|
||||||
|
CoefficientH = (AM * AM + BM * BM + CM * CM) / (AM * AH + BM * BH + CM * CH);
|
||||||
|
ALtangent = CoefficientL * AL - AM;
|
||||||
|
BLtangent = CoefficientL * BL - BM;
|
||||||
|
CLtangent = CoefficientL * CL - CM;
|
||||||
|
AHtangent = CoefficientH * AH - AM;
|
||||||
|
BHtangent = CoefficientH * BH - BM;
|
||||||
|
CHtangent = CoefficientH * CH - CM;
|
||||||
|
AngleCos = (AHtangent * ALtangent + BHtangent * BLtangent + CHtangent * CLtangent) / (Math.sqrt(AHtangent * AHtangent + BHtangent * BHtangent + CHtangent * CHtangent) * Math.sqrt(ALtangent * ALtangent + BLtangent * BLtangent + CLtangent * CLtangent));
|
||||||
|
AngleCos = Math.acos(AngleCos);
|
||||||
|
ANormalLine = BHtangent * CLtangent - CHtangent * BLtangent;
|
||||||
|
BNormalLine = 0 - (AHtangent * CLtangent - CHtangent * ALtangent);
|
||||||
|
CNormalLine = AHtangent * BLtangent - BHtangent * ALtangent;
|
||||||
|
if (AM != 0)
|
||||||
|
OrientationValue = ANormalLine / AM;
|
||||||
|
else if (BM != 0)
|
||||||
|
OrientationValue = BNormalLine / BM;
|
||||||
|
else
|
||||||
|
OrientationValue = CNormalLine / CM;
|
||||||
|
if (OrientationValue > 0) {
|
||||||
|
Sum1 += AngleCos;
|
||||||
|
Count1++;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
Sum2 += AngleCos;
|
||||||
|
Count2++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var tempSum1, tempSum2;
|
||||||
|
tempSum1 = Sum1 + (2 * Math.PI * Count2 - Sum2);
|
||||||
|
tempSum2 = (2 * Math.PI * Count1 - Sum1) + Sum2;
|
||||||
|
if (Sum1 > Sum2) {
|
||||||
|
if ((tempSum1 - (Count - 2) * Math.PI) < 1)
|
||||||
|
Sum = tempSum1;
|
||||||
|
else
|
||||||
|
Sum = tempSum2;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if ((tempSum2 - (Count - 2) * Math.PI) < 1)
|
||||||
|
Sum = tempSum2;
|
||||||
|
else
|
||||||
|
Sum = tempSum1;
|
||||||
|
}
|
||||||
|
totalArea = (Sum - (Count - 2) * Math.PI) * Radius * Radius;
|
||||||
|
return totalArea; //返回总面积
|
||||||
|
}
|
||||||
|
|
||||||
|
})(); //闭包结束
|
||||||
|
|
||||||
|
export default BMapLib
|
||||||
@ -59,6 +59,7 @@
|
|||||||
document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
|
document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.baseUrl %>static/index.css" />
|
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.baseUrl %>static/index.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
455
libs/bmap-wx.js
Normal file
455
libs/bmap-wx.js
Normal file
@ -0,0 +1,455 @@
|
|||||||
|
/**
|
||||||
|
* @file 微信小程序JSAPI
|
||||||
|
* @author 崔健 cuijian03@baidu.com 2017.01.10
|
||||||
|
* @update 邓淑芳 623996689@qq.com 2019.07.03
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 百度地图微信小程序API类
|
||||||
|
*
|
||||||
|
* @class
|
||||||
|
*/
|
||||||
|
class BMapWX {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 百度地图微信小程序API类
|
||||||
|
*
|
||||||
|
* @constructor
|
||||||
|
*/
|
||||||
|
constructor(param) {
|
||||||
|
this.ak = param["ak"];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 使用微信接口进行定位
|
||||||
|
*
|
||||||
|
* @param {string} type 坐标类型
|
||||||
|
* @param {Function} success 成功执行
|
||||||
|
* @param {Function} fail 失败执行
|
||||||
|
* @param {Function} complete 完成后执行
|
||||||
|
*/
|
||||||
|
getWXLocation(type, success, fail, complete) {
|
||||||
|
type = type || 'gcj02',
|
||||||
|
success = success || function () { };
|
||||||
|
fail = fail || function () { };
|
||||||
|
complete = complete || function () { };
|
||||||
|
wx.getLocation({
|
||||||
|
type: type,
|
||||||
|
success: success,
|
||||||
|
fail: fail,
|
||||||
|
complete: complete
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* POI周边检索
|
||||||
|
*
|
||||||
|
* @param {Object} param 检索配置
|
||||||
|
* 参数对象结构可以参考
|
||||||
|
* http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-placeapi
|
||||||
|
*/
|
||||||
|
search(param) {
|
||||||
|
var that = this;
|
||||||
|
param = param || {};
|
||||||
|
let searchparam = {
|
||||||
|
query: param["query"] || '生活服务$美食&酒店',
|
||||||
|
scope: param["scope"] || 1,
|
||||||
|
filter: param["filter"] || '',
|
||||||
|
coord_type: param["coord_type"] || 2,
|
||||||
|
page_size: param["page_size"] || 10,
|
||||||
|
page_num: param["page_num"] || 0,
|
||||||
|
output: param["output"] || 'json',
|
||||||
|
ak: that.ak,
|
||||||
|
sn: param["sn"] || '',
|
||||||
|
timestamp: param["timestamp"] || '',
|
||||||
|
radius: param["radius"] || 2000,
|
||||||
|
ret_coordtype: 'gcj02ll'
|
||||||
|
};
|
||||||
|
let otherparam = {
|
||||||
|
iconPath: param["iconPath"],
|
||||||
|
iconTapPath: param["iconTapPath"],
|
||||||
|
width: param["width"],
|
||||||
|
height: param["height"],
|
||||||
|
alpha: param["alpha"] || 1,
|
||||||
|
success: param["success"] || function () { },
|
||||||
|
fail: param["fail"] || function () { }
|
||||||
|
};
|
||||||
|
let type = 'gcj02';
|
||||||
|
let locationsuccess = function (result) {
|
||||||
|
searchparam["location"] = result["latitude"] + ',' + result["longitude"];
|
||||||
|
wx.request({
|
||||||
|
url: 'https://api.map.baidu.com/place/v2/search',
|
||||||
|
data: searchparam,
|
||||||
|
header: {
|
||||||
|
"content-type": "application/json"
|
||||||
|
},
|
||||||
|
method: 'GET',
|
||||||
|
success(data) {
|
||||||
|
let res = data["data"];
|
||||||
|
if (res["status"] === 0) {
|
||||||
|
let poiArr = res["results"];
|
||||||
|
// outputRes 包含两个对象，
|
||||||
|
// originalData为百度接口返回的原始数据
|
||||||
|
// wxMarkerData为小程序规范的marker格式
|
||||||
|
let outputRes = {};
|
||||||
|
outputRes["originalData"] = res;
|
||||||
|
outputRes["wxMarkerData"] = [];
|
||||||
|
for (let i = 0; i < poiArr.length; i++) {
|
||||||
|
outputRes["wxMarkerData"][i] = {
|
||||||
|
id: i,
|
||||||
|
latitude: poiArr[i]["location"]["lat"],
|
||||||
|
longitude: poiArr[i]["location"]["lng"],
|
||||||
|
title: poiArr[i]["name"],
|
||||||
|
iconPath: otherparam["iconPath"],
|
||||||
|
iconTapPath: otherparam["iconTapPath"],
|
||||||
|
address: poiArr[i]["address"],
|
||||||
|
telephone: poiArr[i]["telephone"],
|
||||||
|
alpha: otherparam["alpha"],
|
||||||
|
width: otherparam["width"],
|
||||||
|
height: otherparam["height"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
otherparam.success(outputRes);
|
||||||
|
} else {
|
||||||
|
otherparam.fail({
|
||||||
|
errMsg: res["message"],
|
||||||
|
statusCode: res["status"]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail(data) {
|
||||||
|
otherparam.fail(data);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
let locationfail = function (result) {
|
||||||
|
otherparam.fail(result);
|
||||||
|
};
|
||||||
|
let locationcomplete = function (result) {
|
||||||
|
};
|
||||||
|
if (!param["location"]) {
|
||||||
|
that.getWXLocation(type, locationsuccess, locationfail, locationcomplete);
|
||||||
|
} else {
|
||||||
|
let longitude = param.location.split(',')[1];
|
||||||
|
let latitude = param.location.split(',')[0];
|
||||||
|
let errMsg = 'input location';
|
||||||
|
let res = {
|
||||||
|
errMsg: errMsg,
|
||||||
|
latitude: latitude,
|
||||||
|
longitude: longitude
|
||||||
|
};
|
||||||
|
locationsuccess(res);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* sug模糊检索
|
||||||
|
*
|
||||||
|
* @param {Object} param 检索配置
|
||||||
|
* 参数对象结构可以参考
|
||||||
|
* http://lbsyun.baidu.com/index.php?title=webapi/place-suggestion-api
|
||||||
|
*/
|
||||||
|
suggestion(param) {
|
||||||
|
var that = this;
|
||||||
|
param = param || {};
|
||||||
|
let suggestionparam = {
|
||||||
|
query: param["query"] || '',
|
||||||
|
region: param["region"] || '全国',
|
||||||
|
city_limit: param["city_limit"] || false,
|
||||||
|
output: param["output"] || 'json',
|
||||||
|
ak: that.ak,
|
||||||
|
sn: param["sn"] || '',
|
||||||
|
timestamp: param["timestamp"] || '',
|
||||||
|
ret_coordtype: 'gcj02ll'
|
||||||
|
};
|
||||||
|
let otherparam = {
|
||||||
|
success: param["success"] || function () { },
|
||||||
|
fail: param["fail"] || function () { }
|
||||||
|
};
|
||||||
|
wx.request({
|
||||||
|
url: 'https://api.map.baidu.com/place/v2/suggestion',
|
||||||
|
data: suggestionparam,
|
||||||
|
header: {
|
||||||
|
"content-type": "application/json"
|
||||||
|
},
|
||||||
|
method: 'GET',
|
||||||
|
success(data) {
|
||||||
|
let res = data["data"];
|
||||||
|
if (res["status"] === 0) {
|
||||||
|
otherparam.success(res);
|
||||||
|
} else {
|
||||||
|
otherparam.fail({
|
||||||
|
errMsg: res["message"],
|
||||||
|
statusCode: res["status"]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail(data) {
|
||||||
|
otherparam.fail(data);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* rgc检索（逆地理编码：经纬度->地点描述）
|
||||||
|
*
|
||||||
|
* @param {Object} param 检索配置
|
||||||
|
* 参数对象结构可以参考
|
||||||
|
* https://lbs.baidu.com/index.php?title=webapi/guide/webservice-geocoding-abroad
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
regeocoding (param) {
|
||||||
|
var that = this;
|
||||||
|
param = param || {};
|
||||||
|
let regeocodingparam = {
|
||||||
|
coordtype: param["coordtype"] || 'gcj02ll',
|
||||||
|
ret_coordtype: param['ret_coordtype'] || 'gcj02ll',
|
||||||
|
radius: param["radius"] || 1000,
|
||||||
|
ak: that.ak,
|
||||||
|
sn: param["sn"] || '',
|
||||||
|
output: param["output"] || 'json',
|
||||||
|
callback: param["callback"] || function () { },
|
||||||
|
extensions_poi: param["extensions_poi"] || 1,
|
||||||
|
extensions_road: param["extensions_road"] || false,
|
||||||
|
extensions_town: param["extensions_town"] || false,
|
||||||
|
language: param["language"] || 'zh-CN',
|
||||||
|
language_auto: param["language_auto"] || 0,
|
||||||
|
poi_types:param['poi_types'] || "美食|酒店|购物|休闲娱乐|教育培训|医疗|金融|房地产|政府机构|铁路"
|
||||||
|
};
|
||||||
|
let otherparam = {
|
||||||
|
iconPath: param["iconPath"],
|
||||||
|
iconTapPath: param["iconTapPath"],
|
||||||
|
width: param["width"],
|
||||||
|
height: param["height"],
|
||||||
|
alpha: param["alpha"] || 1,
|
||||||
|
success: param["success"] || function () { },
|
||||||
|
fail: param["fail"] || function () { }
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
let type = 'gcj02';
|
||||||
|
let locationsuccess = function (result) {
|
||||||
|
regeocodingparam["location"] = result["latitude"] + ',' + result["longitude"];
|
||||||
|
wx.request({
|
||||||
|
url: 'https://api.map.baidu.com/reverse_geocoding/v3',
|
||||||
|
data: regeocodingparam,
|
||||||
|
header: {
|
||||||
|
"content-type": "application/json"
|
||||||
|
},
|
||||||
|
method: 'GET',
|
||||||
|
success(data) {
|
||||||
|
let res = data["data"];
|
||||||
|
if (res["status"] === 0) {
|
||||||
|
let poiObj = res["result"];
|
||||||
|
// outputRes 包含两个对象：
|
||||||
|
// originalData为百度接口返回的原始数据
|
||||||
|
// wxMarkerData为小程序规范的marker格式
|
||||||
|
let outputRes = {};
|
||||||
|
outputRes["originalData"] = res;
|
||||||
|
outputRes["wxMarkerData"] = [];
|
||||||
|
outputRes["wxMarkerData"][0] = {
|
||||||
|
id: 0,
|
||||||
|
latitude: result["latitude"],
|
||||||
|
longitude: result["longitude"],
|
||||||
|
address: poiObj["formatted_address"],
|
||||||
|
iconPath: otherparam["iconPath"],
|
||||||
|
iconTapPath: otherparam["iconTapPath"],
|
||||||
|
desc: poiObj["sematic_description"],
|
||||||
|
business: poiObj["business"],
|
||||||
|
alpha: otherparam["alpha"],
|
||||||
|
width: otherparam["width"],
|
||||||
|
height: otherparam["height"]
|
||||||
|
}
|
||||||
|
otherparam.success(outputRes);
|
||||||
|
} else {
|
||||||
|
otherparam.fail({
|
||||||
|
errMsg: res["message"],
|
||||||
|
statusCode: res["status"]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail(data) {
|
||||||
|
otherparam.fail(data);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
let locationfail = function (result) {
|
||||||
|
otherparam.fail(result);
|
||||||
|
}
|
||||||
|
let locationcomplete = function (result) {
|
||||||
|
};
|
||||||
|
if (!param["location"]) {
|
||||||
|
that.getWXLocation(type, locationsuccess, locationfail, locationcomplete);
|
||||||
|
} else {
|
||||||
|
let longitude = param.location.split(',')[1];
|
||||||
|
let latitude = param.location.split(',')[0];
|
||||||
|
let errMsg = 'input location';
|
||||||
|
let res = {
|
||||||
|
errMsg: errMsg,
|
||||||
|
latitude: latitude,
|
||||||
|
longitude: longitude
|
||||||
|
};
|
||||||
|
locationsuccess(res);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* gc检索（地理编码：地点->经纬度）
|
||||||
|
*
|
||||||
|
* @param {Object} param 检索配置
|
||||||
|
* 参数对象结构可以参考
|
||||||
|
* https://lbs.baidu.com/index.php?title=webapi/guide/webservice-geocoding
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
geocoding(param) {
|
||||||
|
var that = this;
|
||||||
|
param = param || {};
|
||||||
|
let geocodingparam = {
|
||||||
|
address: param["address"] || '',
|
||||||
|
city: param["city"] || '',
|
||||||
|
ret_coordtype: param["coordtype"] || 'gcj02ll',
|
||||||
|
ak: that.ak,
|
||||||
|
sn: param["sn"] || '',
|
||||||
|
output: param["output"] || 'json',
|
||||||
|
callback: param["callback"] || function () { }
|
||||||
|
};
|
||||||
|
let otherparam = {
|
||||||
|
iconPath: param["iconPath"],
|
||||||
|
iconTapPath: param["iconTapPath"],
|
||||||
|
width: param["width"],
|
||||||
|
height: param["height"],
|
||||||
|
alpha: param["alpha"] || 1,
|
||||||
|
success: param["success"] || function () { },
|
||||||
|
fail: param["fail"] || function () { }
|
||||||
|
};
|
||||||
|
if (param["address"]) {
|
||||||
|
wx.request({
|
||||||
|
url: 'https://api.map.baidu.com/geocoding/v3',
|
||||||
|
data: geocodingparam,
|
||||||
|
header: {
|
||||||
|
"content-type": "application/json"
|
||||||
|
},
|
||||||
|
method: 'GET',
|
||||||
|
success(data) {
|
||||||
|
let res = data["data"];
|
||||||
|
if (res["status"] === 0){
|
||||||
|
let poiObj = res["result"];
|
||||||
|
// outputRes 包含两个对象：
|
||||||
|
// originalData为百度接口返回的原始数据
|
||||||
|
// wxMarkerData为小程序规范的marker格式
|
||||||
|
let outputRes = res;
|
||||||
|
outputRes["originalData"] = res;
|
||||||
|
outputRes["wxMarkerData"] = [];
|
||||||
|
outputRes["wxMarkerData"][0] = {
|
||||||
|
id: 0,
|
||||||
|
latitude: poiObj["location"]["lat"],
|
||||||
|
longitude: poiObj["location"]["lng"],
|
||||||
|
iconPath: otherparam["iconPath"],
|
||||||
|
iconTapPath: otherparam["iconTapPath"],
|
||||||
|
alpha: otherparam["alpha"],
|
||||||
|
width: otherparam["width"],
|
||||||
|
height: otherparam["height"]
|
||||||
|
}
|
||||||
|
otherparam.success(outputRes);
|
||||||
|
} else {
|
||||||
|
otherparam.fail({
|
||||||
|
errMsg: res["message"],
|
||||||
|
statusCode: res["status"]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail(data) {
|
||||||
|
otherparam.fail(data);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
let errMsg = 'input address!';
|
||||||
|
let res = {
|
||||||
|
errMsg: errMsg
|
||||||
|
};
|
||||||
|
otherparam.fail(res);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 天气检索
|
||||||
|
*
|
||||||
|
* @param {Object} param 检索配置
|
||||||
|
*/
|
||||||
|
weather(param) {
|
||||||
|
var that = this;
|
||||||
|
param = param || {};
|
||||||
|
let weatherparam = {
|
||||||
|
coord_type: param["coord_type"] || 'gcj02',
|
||||||
|
output: param["output"] || 'json',
|
||||||
|
ak: that.ak,
|
||||||
|
sn: param["sn"] || '',
|
||||||
|
timestamp: param["timestamp"] || ''
|
||||||
|
};
|
||||||
|
let otherparam = {
|
||||||
|
success: param["success"] || function () { },
|
||||||
|
fail: param["fail"] || function () { }
|
||||||
|
};
|
||||||
|
let type = 'gcj02';
|
||||||
|
let locationsuccess = function (result) {
|
||||||
|
weatherparam["location"] = result["longitude"] + ',' + result["latitude"];
|
||||||
|
wx.request({
|
||||||
|
url: 'https://api.map.baidu.com/telematics/v3/weather',
|
||||||
|
data: weatherparam,
|
||||||
|
header: {
|
||||||
|
"content-type": "application/json"
|
||||||
|
},
|
||||||
|
method: 'GET',
|
||||||
|
success(data) {
|
||||||
|
let res = data["data"];
|
||||||
|
if (res["error"] === 0 && res["status"] === 'success') {
|
||||||
|
let weatherArr = res["results"];
|
||||||
|
// outputRes 包含两个对象，
|
||||||
|
// originalData为百度接口返回的原始数据
|
||||||
|
// wxMarkerData为小程序规范的marker格式
|
||||||
|
let outputRes = {};
|
||||||
|
outputRes["originalData"] = res;
|
||||||
|
outputRes["currentWeather"] = [];
|
||||||
|
outputRes["currentWeather"][0] = {
|
||||||
|
currentCity: weatherArr[0]["currentCity"],
|
||||||
|
pm25: weatherArr[0]["pm25"],
|
||||||
|
date: weatherArr[0]["weather_data"][0]["date"],
|
||||||
|
temperature: weatherArr[0]["weather_data"][0]["temperature"],
|
||||||
|
weatherDesc: weatherArr[0]["weather_data"][0]["weather"],
|
||||||
|
wind: weatherArr[0]["weather_data"][0]["wind"]
|
||||||
|
};
|
||||||
|
otherparam.success(outputRes);
|
||||||
|
} else {
|
||||||
|
otherparam.fail({
|
||||||
|
errMsg: res["message"],
|
||||||
|
statusCode: res["status"]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail(data) {
|
||||||
|
otherparam.fail(data);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
let locationfail = function (result) {
|
||||||
|
otherparam.fail(result);
|
||||||
|
}
|
||||||
|
let locationcomplete = function (result) {
|
||||||
|
}
|
||||||
|
if (!param["location"]) {
|
||||||
|
that.getWXLocation(type, locationsuccess, locationfail, locationcomplete);
|
||||||
|
} else {
|
||||||
|
let longitude = param.location.split(',')[0];
|
||||||
|
let latitude = param.location.split(',')[1];
|
||||||
|
let errMsg = 'input location';
|
||||||
|
let res = {
|
||||||
|
errMsg: errMsg,
|
||||||
|
latitude: latitude,
|
||||||
|
longitude: longitude
|
||||||
|
};
|
||||||
|
locationsuccess(res);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports.BMapWX = BMapWX;
|
||||||
@ -238,6 +238,7 @@
|
|||||||
"mp-weixin" : {
|
"mp-weixin" : {
|
||||||
/* 小程序特有相关 */
|
/* 小程序特有相关 */
|
||||||
"usingComponents" : true,
|
"usingComponents" : true,
|
||||||
|
"requiredPrivateInfos" : [ "getLocation", "chooseLocation" ], //开启定位权限
|
||||||
"appid" : "wx5a73f844dac0da5c",
|
"appid" : "wx5a73f844dac0da5c",
|
||||||
"setting" : {
|
"setting" : {
|
||||||
"urlCheck" : false,
|
"urlCheck" : false,
|
||||||
@ -282,6 +283,13 @@
|
|||||||
},
|
},
|
||||||
"devServer" : {
|
"devServer" : {
|
||||||
"port" : 12000
|
"port" : 12000
|
||||||
|
},
|
||||||
|
"sdkConfigs" : {
|
||||||
|
"maps" : {
|
||||||
|
"bmap" : {
|
||||||
|
"key" : "xSeK5okwxCQbcwdGoOufv2EMuMdvsVFI"
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"mp-baidu" : {
|
"mp-baidu" : {
|
||||||
|
|||||||
@ -1,7 +1,41 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="page">
|
<view class="page member-addrsss-list-container">
|
||||||
<view v-if="(isdata)" class="m-ad-list">
|
<view v-if="isdata" class="m-ad-list">
|
||||||
<view v-for="(item, i) in addresslist" :key="i" class="m-ad-item" :data-id="(item.ud_id)" :data-ud_id="(item.ud_id)" @longpress="modify">
|
<view
|
||||||
|
class="list-item"
|
||||||
|
v-for="(item, index) of addresslist"
|
||||||
|
:key="index"
|
||||||
|
@tap="SelectAddress(item)"
|
||||||
|
>
|
||||||
|
<view class="item-left">
|
||||||
|
<view class="item-info">
|
||||||
|
<text
|
||||||
|
:class="['item-lable', lableCalss(item.ud_label)]"
|
||||||
|
v-if="
|
||||||
|
item.ud_label == 1 || item.ud_label == 2 || item.ud_label == 3
|
||||||
|
"
|
||||||
|
>{{ labelList[item.ud_label] }}</text
|
||||||
|
>
|
||||||
|
<text class="item-address">{{ item.ud_marker }}</text>
|
||||||
|
<text class="item-detailed-address">{{ item.ud_street_no }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="item-role-info">
|
||||||
|
<text class="item-name">{{ item.ud_name }}</text>
|
||||||
|
<text class="item-sex">{{
|
||||||
|
item.ud_gender == 1 ? "先生" : "女士"
|
||||||
|
}}</text>
|
||||||
|
<text class="item-mobile">{{ item.ud_mobile }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="item-right">
|
||||||
|
<label
|
||||||
|
:data-ud_id="item.ud_id"
|
||||||
|
@click.stop="EditAddress"
|
||||||
|
class="iconfont icon-edit"
|
||||||
|
></label>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- <view v-for="(item, i) in addresslist" :key="i" class="m-ad-item" :data-id="(item.ud_id)" :data-ud_id="(item.ud_id)" @longpress="modify">
|
||||||
<view class="m-ad-l" :data-sel="ud_id" :data-ud_id="(item.ud_id)" :data-address="(item.ud_address)" @tap="SelectAddress">
|
<view class="m-ad-l" :data-sel="ud_id" :data-ud_id="(item.ud_id)" :data-address="(item.ud_address)" @tap="SelectAddress">
|
||||||
<view class="m-ad-i-top">
|
<view class="m-ad-i-top">
|
||||||
<text>{{item.ud_name}}</text><label>({{item.ud_intl}}){{item.ud_mobile}}</label>
|
<text>{{item.ud_name}}</text><label>({{item.ud_intl}}){{item.ud_mobile}}</label>
|
||||||
@ -15,291 +49,428 @@
|
|||||||
<label class="iconfont icon-delete" :data-ud_id="(item.ud_id)" @click="DelAddress"></label>
|
<label class="iconfont icon-delete" :data-ud_id="(item.ud_id)" @click="DelAddress"></label>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<button class="u-btn u-btn-default" @click="AddAddress" style="margin-top:50rpx;">{{__('添加地址')}}</button>
|
<button class="u-btn u-btn-default" @click="AddAddress" style="margin-top:50rpx;">{{__('添加地址')}}</button> -->
|
||||||
</view>
|
</view>
|
||||||
<view class="m-nullpage" v-else @click="AddAddress">
|
<view class="m-nullpage" v-else @click="AddAddress">
|
||||||
<view class="m-nullpage-middle">
|
<view class="m-nullpage-middle">
|
||||||
<label class="iconfont icon-dizhi"></label>
|
<label class="iconfont icon-dizhi"></label>
|
||||||
<view class="m-null-tip">
|
<view class="m-null-tip">
|
||||||
<text>{{__('想把你的宝贝寄到哪去')}}</text>
|
<text>您还没有添加收货地址哦！</text>
|
||||||
<text class="m-null-tipck">{{__('马上去添加地址')}}</text>
|
<text class="m-null-tipck">{{ __("马上去添加地址") }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
<view class="u-btn u-btn-default" @click="AddAddress" v-if="isdata">
|
||||||
|
<text class="iconfontAili icon-zengjiatianjiajiahao"></text>
|
||||||
|
<text>新增收货地址</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import "../../styles/_variables";
|
@import "../../styles/_variables";
|
||||||
|
|
||||||
.m-ad-item:after {
|
.member-addrsss-list-container {
|
||||||
content: " ";
|
background: #fff;
|
||||||
position: absolute;
|
overflow: hidden;
|
||||||
border-bottom: 1px solid #ebebe7;
|
|
||||||
left: 0;
|
.m-nullpage-middle {
|
||||||
right: 0;
|
height: 100vh;
|
||||||
bottom: 0;
|
}
|
||||||
height: 1px;
|
|
||||||
transform-origin: 0 100%;
|
.m-ad-list {
|
||||||
transform: scaleY(0.5);
|
background: #fff;
|
||||||
color: #ebebe7;
|
height: calc(100vh - 106px);
|
||||||
|
|
||||||
|
/* #ifdef MP-WEIXIN */
|
||||||
|
height: calc(100vh - 120rpx);
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-zengjiatianjiajiahao {
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #3579ff;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0 32rpx;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
border-bottom: 2rpx solid #f0f0f0;
|
||||||
|
|
||||||
|
.item-lable {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 9px;
|
||||||
|
padding: 0px 8px;
|
||||||
|
width: 32px;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.m-ad-item {
|
.item-lable-1 {
|
||||||
background-color: #fff;
|
background: #fdf3da;
|
||||||
padding: 24rpx 20rpx 24rpx 30rpx;
|
color: #de8a48;
|
||||||
position: relative;
|
}
|
||||||
/*border-bottom: 1px solid #d5d5d5;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
.m-ad-l {
|
.item-lable-2 {
|
||||||
width: 70%;
|
background: #e5eefb;
|
||||||
display: inline-block;
|
color: #4687e4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.m-ad-i-top {
|
.item-lable-3 {
|
||||||
font-size: 16px;
|
background: #eff9e7;
|
||||||
line-height: 20px;
|
color: #6eb768;
|
||||||
}
|
}
|
||||||
|
|
||||||
.m-ad-i-top text {
|
.item-left {
|
||||||
margin-right: 20rpx;
|
max-width: 86%;
|
||||||
}
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
.m-ad-i-bot {
|
.icon-edit {
|
||||||
font-size: 14px;
|
font-size: 44rpx;
|
||||||
color: #888;
|
color: #848484;
|
||||||
line-height: 20px;
|
}
|
||||||
margin-top: 10rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
.item-address {
|
||||||
|
margin-right: 8rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
.m-ad-icon {
|
.item-detailed-address {
|
||||||
font-size: 12px;
|
font-weight: 700;
|
||||||
padding: 4rpx 8rpx;
|
font-size: 30rpx;
|
||||||
background-color: $default-skin-bg;
|
}
|
||||||
color: #fff;
|
|
||||||
border-radius: 8rpx;
|
|
||||||
margin-right: 8rpx;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.m-ad-edit {
|
.item-role-info {
|
||||||
position: absolute;
|
color: #848484;
|
||||||
right: 20rpx;
|
font-size: 24rpx;
|
||||||
top: 50%;
|
|
||||||
width: 80rpx;
|
|
||||||
height: 100rpx;
|
|
||||||
margin-top: -50rpx;
|
|
||||||
padding-left: 40rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.m-ad-edit label {
|
.item-name {
|
||||||
width: 40rpx;
|
padding-right: 20rpx;
|
||||||
height: 50rpx;
|
}
|
||||||
line-height: 50rpx;
|
|
||||||
font-size: 35rpx;
|
|
||||||
display: block;
|
|
||||||
vertical-align: middle;
|
|
||||||
text-align: center;
|
|
||||||
color: #888888;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
.item-mobile {
|
||||||
|
margin-left: 40rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-btn-default {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
background: #fff;
|
||||||
|
color: #000;
|
||||||
|
z-index: 1;
|
||||||
|
margin: 0;
|
||||||
|
height: 120rpx;
|
||||||
|
line-height: 120rpx;
|
||||||
|
bottom: constant(safe-area-inset-bottom);
|
||||||
|
// bottom: env(safe-area-inset-bottom);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-ad-item:after {
|
||||||
|
content: " ";
|
||||||
|
position: absolute;
|
||||||
|
border-bottom: 1px solid #ebebe7;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: 1px;
|
||||||
|
transform-origin: 0 100%;
|
||||||
|
transform: scaleY(0.5);
|
||||||
|
color: #ebebe7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-ad-item {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 24rpx 20rpx 24rpx 30rpx;
|
||||||
|
position: relative;
|
||||||
|
/*border-bottom: 1px solid #d5d5d5;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-ad-l {
|
||||||
|
width: 70%;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-ad-i-top {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-ad-i-top text {
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-ad-i-bot {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #888;
|
||||||
|
line-height: 20px;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-ad-icon {
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 4rpx 8rpx;
|
||||||
|
background-color: $default-skin-bg;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
margin-right: 8rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-ad-edit {
|
||||||
|
position: absolute;
|
||||||
|
right: 20rpx;
|
||||||
|
top: 50%;
|
||||||
|
width: 80rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
margin-top: -50rpx;
|
||||||
|
padding-left: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-ad-edit label {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
line-height: 50rpx;
|
||||||
|
font-size: 35rpx;
|
||||||
|
display: block;
|
||||||
|
vertical-align: middle;
|
||||||
|
text-align: center;
|
||||||
|
color: #888888;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { mapState, mapMutations } from "vuex";
|
||||||
|
|
||||||
import {
|
export default {
|
||||||
mapState,
|
data() {
|
||||||
mapMutations
|
return {
|
||||||
} from 'vuex'
|
options: {},
|
||||||
|
addresslist: [],
|
||||||
|
isdata: false,
|
||||||
|
spid: "",
|
||||||
|
ud_id: 0,
|
||||||
|
labelList: ["", "家", "公司", "学校"],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: mapState([
|
||||||
|
"Config",
|
||||||
|
"StateCode",
|
||||||
|
"notice",
|
||||||
|
"plantformInfo",
|
||||||
|
"shopInfo",
|
||||||
|
"userInfo",
|
||||||
|
"hasLogin",
|
||||||
|
]),
|
||||||
|
onLoad: function (options) {
|
||||||
|
uni.setNavigationBarTitle({
|
||||||
|
title: this.__("地址列表"),
|
||||||
|
});
|
||||||
|
|
||||||
|
this.setData({
|
||||||
|
ud_id: options.ud_id || 0,
|
||||||
|
spid: options.spid || "",
|
||||||
|
options: options,
|
||||||
|
isdata: false,
|
||||||
|
});
|
||||||
|
|
||||||
export default {
|
var that = this;
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
options:{},
|
|
||||||
addresslist: [],
|
|
||||||
isdata: false,
|
|
||||||
spid: "",
|
|
||||||
ud_id: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
|
||||||
onLoad: function(options) {
|
|
||||||
uni.setNavigationBarTitle({
|
|
||||||
title:this.__('地址列表')
|
|
||||||
});
|
|
||||||
|
|
||||||
this.setData({
|
that.notice.addNotification("RefreshAddress", that.RefreshMethod, that);
|
||||||
ud_id: options.ud_id || 0,
|
},
|
||||||
spid: options.spid || "",
|
onShow: function () {
|
||||||
options: options,
|
this.GetAddressList();
|
||||||
isdata: false
|
},
|
||||||
});
|
onUnload: function () {
|
||||||
|
// 离开页面，注销事件
|
||||||
|
var that = this;
|
||||||
|
this.notice.removeNotification("RefreshAddress", that);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 页面相关事件处理函数--监听用户下拉动作
|
||||||
|
*/
|
||||||
|
onPullDownRefresh: function () {
|
||||||
|
this.GetAddressList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapMutations([
|
||||||
|
"login",
|
||||||
|
"logout",
|
||||||
|
"getPlantformInfo",
|
||||||
|
"forceUserInfo",
|
||||||
|
"getUserInfo",
|
||||||
|
]),
|
||||||
|
lableCalss(number) {
|
||||||
|
if (number == 1) {
|
||||||
|
return "item-lable-1";
|
||||||
|
}
|
||||||
|
|
||||||
var that = this;
|
if (number == 2) {
|
||||||
this.GetAddressList();
|
return "item-lable-2";
|
||||||
|
}
|
||||||
|
|
||||||
that.notice.addNotification("RefreshAddress", that.RefreshMethod, that);
|
if (number == 3) {
|
||||||
},
|
return "item-lable-3";
|
||||||
onShow: function() {
|
}
|
||||||
},
|
},
|
||||||
onUnload: function() {
|
RefreshMethod: function () {
|
||||||
// 离开页面，注销事件
|
//console.info('.........RefreshMethod');
|
||||||
var that = this
|
this.GetAddressList();
|
||||||
this.notice.removeNotification("RefreshAddress", that);
|
},
|
||||||
},
|
GetAddressList: function () {
|
||||||
/**
|
var that = this;
|
||||||
* 页面相关事件处理函数--监听用户下拉动作
|
var params = {};
|
||||||
*/
|
|
||||||
onPullDownRefresh: function () {
|
that.setData({
|
||||||
this.GetAddressList();
|
isdata: false,
|
||||||
|
addresslist: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
that.$.request({
|
||||||
|
url: that.Config.URL.user.address_lists,
|
||||||
|
data: params,
|
||||||
|
success: function (data, status, msg, code) {
|
||||||
|
if (200 == status) {
|
||||||
|
if (data.items.length > 0) {
|
||||||
|
//that.addresslist = data.items;
|
||||||
|
|
||||||
|
that.setData({
|
||||||
|
isdata: true,
|
||||||
|
addresslist: data.items,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
that.setData({
|
||||||
|
isdata: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
uni.stopPullDownRefresh();
|
||||||
},
|
},
|
||||||
methods: {
|
});
|
||||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
},
|
||||||
RefreshMethod: function() {
|
modify: function (e) {
|
||||||
//console.info('.........RefreshMethod');
|
var that = this;
|
||||||
this.GetAddressList()
|
e.currentTarget.dataset.ud_id;
|
||||||
},
|
|
||||||
GetAddressList: function() {
|
|
||||||
var that = this;
|
|
||||||
var params = {};
|
|
||||||
|
|
||||||
that.setData({
|
let itemList = [that.__("编辑"), that.__("删除")];
|
||||||
isdata: false,
|
|
||||||
addresslist: []
|
|
||||||
});
|
|
||||||
|
|
||||||
that.$.request({
|
uni.showActionSheet({
|
||||||
url: that.Config.URL.user.address_lists,
|
itemList: itemList,
|
||||||
data: params,
|
success: (res) => {
|
||||||
success: function(data, status, msg, code) {
|
if (res.tapIndex == 0) {
|
||||||
if (200 == status) {
|
that.EditAddress(e);
|
||||||
if (data.items.length > 0) {
|
} else {
|
||||||
|
that.DelAddress(e);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
SelectAddress: function (item) {
|
||||||
|
// if (obj.currentTarget.dataset.sel) {
|
||||||
|
// var that = this;
|
||||||
|
// var options = that.options;
|
||||||
|
// options.ud_id = obj.currentTarget.dataset.ud_id;
|
||||||
|
// options.address = obj.currentTarget.dataset.address;
|
||||||
|
// that.$.navigateBack(1, function () {
|
||||||
|
// //console.info('SelectAddress')
|
||||||
|
// that.notice.postNotificationName("RefreshOrder", options);
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
if (item) {
|
||||||
|
var that = this;
|
||||||
|
var options = that.options;
|
||||||
|
options.ud_id = item.ud_id;
|
||||||
|
options.address = item.ud_address;
|
||||||
|
that.$.navigateBack(1, function () {
|
||||||
|
//console.info('SelectAddress')
|
||||||
|
that.notice.postNotificationName("RefreshOrder", options);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
EditAddress: function (obj) {
|
||||||
|
var that = this;
|
||||||
|
var options = this.options;
|
||||||
|
options.ud_id = obj.currentTarget.dataset.ud_id;
|
||||||
|
|
||||||
//that.addresslist = data.items;
|
if (that.ud_id != 0) {
|
||||||
|
that.$.redirectTo({
|
||||||
|
url: that.$.createUrl("/member/address/manage", options),
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
that.$.navigateTo({
|
||||||
|
url: that.$.createUrl("/member/address/manage", options),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
that.setData({
|
AddAddress: function () {
|
||||||
isdata: true,
|
var that = this;
|
||||||
addresslist: data.items
|
//var options = that.options;
|
||||||
});
|
|
||||||
|
|
||||||
} else {
|
if (that.options.issub) {
|
||||||
that.setData({
|
var options = { issub: 1 };
|
||||||
isdata: false
|
} else {
|
||||||
});
|
var options = {};
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
uni.stopPullDownRefresh()
|
if (that.ud_id != 0) {
|
||||||
}
|
that.$.redirectTo({
|
||||||
});
|
url: that.$.createUrl("/member/address/manage", options),
|
||||||
},
|
});
|
||||||
modify: function(e) {
|
} else {
|
||||||
var that = this;
|
that.$.navigateTo({
|
||||||
e.currentTarget.dataset.ud_id;
|
url: that.$.createUrl("/member/address/manage", options),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
let itemList = [that.__('编辑'), that.__('删除')]
|
DelAddress: function (e) {
|
||||||
|
var that = this;
|
||||||
|
that.$.showModal({
|
||||||
|
title: that.__("提示"),
|
||||||
|
content: that.__("确认删除这个地址吗？"),
|
||||||
|
showCancel: true,
|
||||||
|
success: function (n) {
|
||||||
|
if (n.confirm) {
|
||||||
|
var params = {
|
||||||
|
ud_id: e.currentTarget.dataset.ud_id,
|
||||||
|
};
|
||||||
|
that.$.request({
|
||||||
|
url: that.Config.URL.user.address_remove,
|
||||||
|
data: params,
|
||||||
|
success: function (data, status, msg, code) {
|
||||||
|
if (200 == status) {
|
||||||
|
that.$.showToast({
|
||||||
|
title: that.__("删除成功！"),
|
||||||
|
});
|
||||||
|
|
||||||
uni.showActionSheet({
|
that.notice.postNotificationName("RefreshOrder", 0);
|
||||||
itemList: itemList,
|
that.GetAddressList();
|
||||||
success: (res) => {
|
}
|
||||||
if (res.tapIndex == 0)
|
},
|
||||||
{
|
});
|
||||||
that.EditAddress(e);
|
}
|
||||||
}
|
},
|
||||||
else
|
});
|
||||||
{
|
},
|
||||||
that.DelAddress(e);
|
},
|
||||||
}
|
};
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
},
|
|
||||||
SelectAddress: function(obj) {
|
|
||||||
if (obj.currentTarget.dataset.sel)
|
|
||||||
{
|
|
||||||
var that = this;
|
|
||||||
var options = that.options;
|
|
||||||
options.ud_id = obj.currentTarget.dataset.ud_id;
|
|
||||||
options.address = obj.currentTarget.dataset.address;
|
|
||||||
that.$.navigateBack(1, function() {
|
|
||||||
//console.info('SelectAddress')
|
|
||||||
that.notice.postNotificationName("RefreshOrder", options)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
EditAddress: function(obj) {
|
|
||||||
var that = this;
|
|
||||||
var options = this.options;
|
|
||||||
options.ud_id = obj.currentTarget.dataset.ud_id;
|
|
||||||
|
|
||||||
if (that.ud_id != 0) {
|
|
||||||
that.$.redirectTo({
|
|
||||||
url: that.$.createUrl("/member/address/manage", options)
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
that.$.navigateTo({
|
|
||||||
url: that.$.createUrl("/member/address/manage", options)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
AddAddress: function() {
|
|
||||||
var that = this;
|
|
||||||
//var options = that.options;
|
|
||||||
|
|
||||||
if (that.options.issub)
|
|
||||||
{
|
|
||||||
var options = { issub: 1 };
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
var options = {};
|
|
||||||
}
|
|
||||||
|
|
||||||
if (that.ud_id != 0) {
|
|
||||||
that.$.redirectTo({
|
|
||||||
url: that.$.createUrl("/member/address/manage", options)
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
that.$.navigateTo({
|
|
||||||
url: that.$.createUrl("/member/address/manage", options)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
DelAddress: function(e) {
|
|
||||||
var that = this;
|
|
||||||
that.$.showModal({
|
|
||||||
title: that.__("提示"),
|
|
||||||
content: that.__("确认删除这个地址吗？"),
|
|
||||||
showCancel: true,
|
|
||||||
success: function(n) {
|
|
||||||
if (n.confirm) {
|
|
||||||
var params = {
|
|
||||||
ud_id: e.currentTarget.dataset.ud_id
|
|
||||||
};
|
|
||||||
that.$.request({
|
|
||||||
url: that.Config.URL.user.address_remove,
|
|
||||||
data: params,
|
|
||||||
success: function(data, status, msg, code) {
|
|
||||||
if (200 == status) {
|
|
||||||
that.$.showToast({
|
|
||||||
title: that.__("删除成功！")
|
|
||||||
});
|
|
||||||
|
|
||||||
that.notice.postNotificationName("RefreshOrder", 0);
|
|
||||||
that.GetAddressList();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
BIN
member/address/static/no-sele.png
Normal file
BIN
member/address/static/no-sele.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
BIN
member/address/static/sele.png
Normal file
BIN
member/address/static/sele.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 639 B |
130
member/address/umask.vue
Normal file
130
member/address/umask.vue
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
<template>
|
||||||
|
<view
|
||||||
|
class="u-mask"
|
||||||
|
hover-stop-propagation
|
||||||
|
:style="[maskStyle, zoomStyle]"
|
||||||
|
@tap="click"
|
||||||
|
@touchmove.stop.prevent="() => {}"
|
||||||
|
:class="{
|
||||||
|
'u-mask-zoom': zoom,
|
||||||
|
'u-mask-show': show,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* mask 遮罩
|
||||||
|
* @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
|
||||||
|
* @tutorial https://www.uviewui.com/components/mask.html
|
||||||
|
* @property {Boolean} show 是否显示遮罩（默认false）
|
||||||
|
* @property {String Number} z-index z-index 层级（默认1070）
|
||||||
|
* @property {Object} custom-style 自定义样式对象，见上方说明
|
||||||
|
* @property {String Number} duration 动画时长，单位毫秒（默认300）
|
||||||
|
* @property {Boolean} zoom 是否使用scale对遮罩进行缩放（默认true）
|
||||||
|
* @property {Boolean} mask-click-able 遮罩是否可点击，为false时点击不会发送click事件（默认true）
|
||||||
|
* @event {Function} click mask-click-able为true时，点击遮罩发送此事件
|
||||||
|
* @example <u-mask :show="show" @click="show = false"></u-mask>
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: "u-mask",
|
||||||
|
props: {
|
||||||
|
// 是否显示遮罩
|
||||||
|
show: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
// 层级z-index
|
||||||
|
zIndex: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
// 用户自定义样式
|
||||||
|
customStyle: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 遮罩的动画样式， 是否使用使用zoom进行scale进行缩放
|
||||||
|
zoom: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
// 遮罩的过渡时间，单位为ms
|
||||||
|
duration: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 300,
|
||||||
|
},
|
||||||
|
// 是否可以通过点击遮罩进行关闭
|
||||||
|
maskClickAble: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
zoomStyle: {
|
||||||
|
transform: "",
|
||||||
|
},
|
||||||
|
scale: "scale(1.2, 1.2)",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
show(n) {
|
||||||
|
if (n && this.zoom) {
|
||||||
|
// 当展示遮罩的时候，设置scale为1，达到缩小(原来为1.2)的效果
|
||||||
|
this.zoomStyle.transform = "scale(1, 1)";
|
||||||
|
} else if (!n && this.zoom) {
|
||||||
|
// 当隐藏遮罩的时候，设置scale为1.2，达到放大(因为显示遮罩时已重置为1)的效果
|
||||||
|
this.zoomStyle.transform = this.scale;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
maskStyle() {
|
||||||
|
let style = {};
|
||||||
|
style.backgroundColor = "rgba(0, 0, 0, 0.6)";
|
||||||
|
if (this.show)
|
||||||
|
style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.mask;
|
||||||
|
else style.zIndex = -1;
|
||||||
|
style.transition = `all ${this.duration / 1000}s ease-in-out`;
|
||||||
|
// 判断用户传递的对象是否为空，不为空就进行合并
|
||||||
|
if (Object.keys(this.customStyle).length)
|
||||||
|
style = {
|
||||||
|
...style,
|
||||||
|
...this.customStyle,
|
||||||
|
};
|
||||||
|
return style;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
click() {
|
||||||
|
if (!this.maskClickAble) return;
|
||||||
|
this.$emit("click");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.u-mask {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
opacity: 0;
|
||||||
|
transition: transform 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-mask-show {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-mask-zoom {
|
||||||
|
transform: scale(1.2, 1.2);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,193 +1,233 @@
|
|||||||
<template>
|
<template>
|
||||||
<scroll-view @scrolltolower="scrollbottom" class="m-orderlist" scroll-y="true" v-if="message_rows.length >0">
|
<scroll-view
|
||||||
<view class="m-panel-bd">
|
@scrolltolower="scrollbottom"
|
||||||
<view class="m-media-box m-media-box-small-appmsg">
|
class="m-orderlist"
|
||||||
<view class="m-cells">
|
scroll-y="true"
|
||||||
<block v-for="(item, idx) in message_rows" :key="idx">
|
v-if="message_rows.length > 0"
|
||||||
<view :class="['m-cell','m-cell-access', item.message_is_read?'':'active']" style='padding:38rpx 30rpx;color:#747474' @click="showMsgDetail(item.message_id)">
|
>
|
||||||
<view class="m-cell-hd " style="color:#44afa4">
|
<view class="m-panel-bd">
|
||||||
<view class='commodity_shopImg'>
|
<view class="m-media-box m-media-box-small-appmsg">
|
||||||
<image class='commodity_shopImg' :src='item.user_other_avatar'></image>
|
<view class="m-cells">
|
||||||
</view>
|
<block v-for="(item, idx) in message_rows" :key="idx">
|
||||||
</view>
|
<view
|
||||||
<view class="m-cell-bd m-cell-primary">
|
:class="[
|
||||||
<p style="font-size: 24rpx;padding-left:30rpx">
|
'm-cell',
|
||||||
<label style="color:#007AFF;padding-right:10rpx" v-if="!item.message_is_read">{{__('未读')}}</label> <label style="color:#007AFF;padding-right:10rpx">{{item.message_time_str}}</label>
|
'm-cell-access',
|
||||||
<u-parse :content="item.message_content + ''" :imageProp="{lazyLoad:true}"></u-parse>
|
item.message_is_read ? '' : 'active',
|
||||||
</p>
|
]"
|
||||||
</view>
|
style="padding: 38rpx 30rpx; color: #747474"
|
||||||
<span class="qkk hide">{{__('去看看')}}</span>
|
@click="showMsgDetail(item.message_id)"
|
||||||
<text class="m-cell-ft hide"></text>
|
>
|
||||||
</view>
|
<view class="m-cell-hd" style="color: #44afa4">
|
||||||
</block>
|
<view class="commodity_shopImg">
|
||||||
</view>
|
<image
|
||||||
</view>
|
class="commodity_shopImg"
|
||||||
</view>
|
:src="item.user_other_avatar"
|
||||||
<view class="m-loading-box">
|
></image>
|
||||||
<block v-if="ispage">
|
</view>
|
||||||
<view class="u-loadmore">
|
</view>
|
||||||
<label class="u-loading"></label>
|
<view class="m-cell-bd m-cell-primary">
|
||||||
<text class="u-loadmore-tips">{{__('正在加载')}}</text>
|
<p style="font-size: 24rpx; padding-left: 30rpx">
|
||||||
</view>
|
<label
|
||||||
<view>
|
style="color: #007aff; padding-right: 10rpx"
|
||||||
<text></text>
|
v-if="!item.message_is_read"
|
||||||
</view>
|
>{{ __("未读") }}</label
|
||||||
</block>
|
>
|
||||||
<block v-else>
|
<label style="color: #007aff; padding-right: 10rpx">{{
|
||||||
<view class="u-loadmore u-loadmore-line">
|
item.message_time_str
|
||||||
<text class="u-loadmore-tips" style='background-color: #fff'>{{__('已经没有了')}}</text>
|
}}</label>
|
||||||
</view>
|
<u-parse
|
||||||
</block>
|
:content="item.message_content + ''"
|
||||||
</view>
|
:imageProp="{ lazyLoad: true }"
|
||||||
</scroll-view>
|
></u-parse>
|
||||||
<view class="m-nullpage" v-else>
|
</p>
|
||||||
<view class="m-nullpage-middle">
|
</view>
|
||||||
<view class="m-null-tip">
|
<span class="qkk hide">{{ __("去看看") }}</span>
|
||||||
<text>{{__('没有社区相关消息')}}</text>
|
<text class="m-cell-ft hide"></text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</block>
|
||||||
</view>
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="m-loading-box">
|
||||||
|
<block v-if="ispage">
|
||||||
|
<view class="u-loadmore">
|
||||||
|
<label class="u-loading"></label>
|
||||||
|
<text class="u-loadmore-tips">{{ __("正在加载") }}</text>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<text></text>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
<block v-else>
|
||||||
|
<view class="u-loadmore u-loadmore-line">
|
||||||
|
<text class="u-loadmore-tips" style="background-color: #fff">{{
|
||||||
|
__("已经没有了")
|
||||||
|
}}</text>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<view class="m-nullpage" v-else>
|
||||||
|
<view class="m-nullpage-middle">
|
||||||
|
<view class="m-null-tip">
|
||||||
|
<text>{{ __("没有社区相关消息") }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import dateUtil from "../../helpers/util_date";
|
import dateUtil from "../../helpers/util_date";
|
||||||
import uParse from '@/components/u-parse/u-parse.vue'
|
import uParse from "@/components/u-parse/u-parse.vue";
|
||||||
|
|
||||||
import {
|
import { mapState, mapMutations } from "vuex";
|
||||||
mapState,
|
|
||||||
mapMutations
|
|
||||||
} from 'vuex'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
uParse
|
uParse,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
message_rows: [],
|
message_rows: [],
|
||||||
page: 1,
|
page: 1,
|
||||||
ispage: false,
|
ispage: false,
|
||||||
flag: false
|
flag: false,
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
computed: mapState([
|
||||||
onLoad(options) {
|
"Config",
|
||||||
uni.setNavigationBarTitle({
|
"StateCode",
|
||||||
title: this.__('消息')
|
"notice",
|
||||||
});
|
"plantformInfo",
|
||||||
var that = this;
|
"shopInfo",
|
||||||
that.getUserMessage();
|
"userInfo",
|
||||||
},
|
"hasLogin",
|
||||||
methods: {
|
]),
|
||||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
onLoad(options) {
|
||||||
|
uni.setNavigationBarTitle({
|
||||||
|
title: this.__("消息"),
|
||||||
|
});
|
||||||
|
var that = this;
|
||||||
|
that.getUserMessage();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapMutations([
|
||||||
|
"login",
|
||||||
|
"logout",
|
||||||
|
"getPlantformInfo",
|
||||||
|
"forceUserInfo",
|
||||||
|
"getUserInfo",
|
||||||
|
]),
|
||||||
|
|
||||||
getUserMessage: function() {
|
getUserMessage: function () {
|
||||||
let that = this;
|
let that = this;
|
||||||
var params = {
|
var params = {
|
||||||
page: this.page
|
page: this.page,
|
||||||
};
|
};
|
||||||
|
|
||||||
that.$.request({
|
that.$.request({
|
||||||
url: this.Config.URL.user.msg_lists,
|
url: this.Config.URL.user.msg_lists,
|
||||||
data: params,
|
data: params,
|
||||||
success: function(data, status, msg, code) {
|
success: function (data, status, msg, code) {
|
||||||
if (data.items.length > 0) {
|
if (data && data.items.length > 0) {
|
||||||
for (var r = 0; r < data.items.length; r++) {
|
for (var r = 0; r < data.items.length; r++) {
|
||||||
data.items[r]['message_time_str'] = dateUtil.dateUtils.format(that.$.datetimeFormatter(data.items[r]['message_time']));
|
data.items[r]["message_time_str"] = dateUtil.dateUtils.format(
|
||||||
}
|
that.$.datetimeFormatter(data.items[r]["message_time"])
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
if (data.page >= data.total) {
|
if (data.page >= data.total) {
|
||||||
that.setData({
|
that.setData({
|
||||||
message_rows: that.message_rows.concat(data.items),
|
message_rows: that.message_rows.concat(data.items),
|
||||||
flag: false,
|
flag: false,
|
||||||
ispage: false
|
ispage: false,
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
that.setData({
|
that.setData({
|
||||||
message_rows: that.message_rows.concat(data.items),
|
message_rows: that.message_rows.concat(data.items),
|
||||||
flag: true,
|
flag: true,
|
||||||
ispage: true
|
ispage: true,
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
that.setData({
|
||||||
|
flag: false,
|
||||||
|
ispage: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
} else {
|
scrollbottom: function (a) {
|
||||||
that.setData({
|
if (this.flag && this.ispage) {
|
||||||
flag: false,
|
var e = this;
|
||||||
ispage: false
|
e.setData({
|
||||||
})
|
flag: false,
|
||||||
}
|
}),
|
||||||
}
|
clearTimeout(t);
|
||||||
});
|
var t = setTimeout(function () {
|
||||||
},
|
e.setData({
|
||||||
|
page: parseInt(e.page) + 1,
|
||||||
|
}),
|
||||||
|
e.getUserMessage();
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showMsgDetail(message_id) {
|
||||||
|
let url = "/member/member/messagedetail?message_id=" + message_id;
|
||||||
|
|
||||||
scrollbottom: function(a) {
|
for (var r = 0; r < this.message_rows.length; r++) {
|
||||||
if (this.flag && this.ispage) {
|
if (message_id == this.message_rows[r]["message_id"]) {
|
||||||
var e = this;
|
this.$set(this.message_rows[r], "message_is_read", 1);
|
||||||
e.setData({
|
}
|
||||||
flag: false
|
}
|
||||||
}), clearTimeout(t);
|
|
||||||
var t = setTimeout(function() {
|
|
||||||
e.setData({
|
|
||||||
page: parseInt(e.page) + 1
|
|
||||||
}), e.getUserMessage()
|
|
||||||
}, 500)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
showMsgDetail(message_id) {
|
|
||||||
let url = '/member/member/messagedetail?message_id=' + message_id;
|
|
||||||
|
|
||||||
for (var r = 0; r < this.message_rows.length; r++) {
|
uni.navigateTo({
|
||||||
if (message_id == this.message_rows[r]['message_id']) {
|
url: url,
|
||||||
this.$set(this.message_rows[r], 'message_is_read', 1);
|
});
|
||||||
}
|
},
|
||||||
}
|
|
||||||
|
|
||||||
uni.navigateTo({
|
preview(src, e) {
|
||||||
url: url
|
// do something
|
||||||
})
|
},
|
||||||
},
|
navigate(href, e) {
|
||||||
|
// do something
|
||||||
|
console.info(href);
|
||||||
|
console.info(e);
|
||||||
|
|
||||||
preview(src, e) {
|
//this.$.gopage(href);
|
||||||
// do something
|
},
|
||||||
},
|
},
|
||||||
navigate(href, e) {
|
};
|
||||||
// do something
|
|
||||||
console.info(href);
|
|
||||||
console.info(e);
|
|
||||||
|
|
||||||
//this.$.gopage(href);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import "../../styles/_variables";
|
@import "../../styles/_variables";
|
||||||
@import url("@/components/u-parse/u-parse.css");
|
@import url("@/components/u-parse/u-parse.css");
|
||||||
|
|
||||||
|
.qkk {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commodity_shopImg {
|
||||||
|
width: 70rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
border-radius: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.qkk {
|
.m-orderlist {
|
||||||
font-size: 24rpx;
|
position: absolute;
|
||||||
color: #999999
|
top: 0;
|
||||||
}
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.commodity_shopImg {
|
.m-cell.active {
|
||||||
width: 70rpx;
|
font-weight: 700;
|
||||||
height: 70rpx;
|
}
|
||||||
border-radius: 100%;
|
|
||||||
overflow: hidden
|
|
||||||
}
|
|
||||||
|
|
||||||
.m-orderlist {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.m-cell.active {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
@ -71,444 +71,454 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapState, mapMutations } from 'vuex';
|
import { mapState, mapMutations } from "vuex";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
data_info: { order: {item:{}}, comment_image: [] },
|
data_info: { order: { item: {} }, comment_image: [] },
|
||||||
CommentImgList: [],
|
CommentImgList: [],
|
||||||
isDisable: false,
|
isDisable: false,
|
||||||
show: false,
|
show: false,
|
||||||
Info: '',
|
Info: "",
|
||||||
is_data: false,
|
is_data: false,
|
||||||
param: {},
|
param: {},
|
||||||
|
|
||||||
order_item_id: '',
|
order_item_id: "",
|
||||||
return_buyer_message:'',
|
return_buyer_message: "",
|
||||||
return_refund_amount:'',
|
return_refund_amount: "",
|
||||||
return_item_num:'',
|
return_item_num: "",
|
||||||
return_tel: ''
|
return_tel: "",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: mapState([
|
computed: mapState([
|
||||||
'Config',
|
"Config",
|
||||||
'StateCode',
|
"StateCode",
|
||||||
'notice',
|
"notice",
|
||||||
'plantformInfo',
|
"plantformInfo",
|
||||||
'shopInfo',
|
"shopInfo",
|
||||||
'userInfo',
|
"userInfo",
|
||||||
'hasLogin'
|
"hasLogin",
|
||||||
]),
|
]),
|
||||||
onLoad: function(options) {
|
onLoad: function (options) {
|
||||||
uni.setNavigationBarTitle({
|
uni.setNavigationBarTitle({
|
||||||
title:this.__('售后申请')
|
title: this.__("售后申请"),
|
||||||
});
|
});
|
||||||
|
|
||||||
this.setData({
|
this.setData({
|
||||||
order_item_id: options.order_item_id
|
order_item_id: options.order_item_id,
|
||||||
})
|
});
|
||||||
this.refreshData(options)
|
this.refreshData(options);
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
...mapMutations([
|
||||||
refreshData: function(options){
|
"login",
|
||||||
var that = this;
|
"logout",
|
||||||
var params = { order_id: options.order_id, order_item_id: options.order_item_id };
|
"getPlantformInfo",
|
||||||
|
"forceUserInfo",
|
||||||
|
"getUserInfo",
|
||||||
|
]),
|
||||||
|
refreshData: function (options) {
|
||||||
|
var that = this;
|
||||||
|
var params = {
|
||||||
|
order_id: options.order_id,
|
||||||
|
order_item_id: options.order_item_id,
|
||||||
|
};
|
||||||
|
|
||||||
that.$.request({
|
that.$.request({
|
||||||
url: this.Config.URL.user.return_item,
|
url: this.Config.URL.user.return_item,
|
||||||
data: params,
|
data: params,
|
||||||
success: function(data, status, msg, code) {
|
success: function (data, status, msg, code) {
|
||||||
data.comment_image = [];
|
data.comment_image = [];
|
||||||
|
|
||||||
if (status == 200) {
|
if (status == 200) {
|
||||||
that.setData({ data_info: data, is_data: true, param: params });
|
that.setData({ data_info: data, is_data: true, param: params });
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
inputOpinion: function(e) {
|
inputOpinion: function (e) {
|
||||||
var param = this.param;
|
var param = this.param;
|
||||||
param.return_buyer_message = e.detail.value;
|
param.return_buyer_message = e.detail.value;
|
||||||
|
|
||||||
this.setData({ param: param });
|
this.setData({ param: param });
|
||||||
},
|
},
|
||||||
upImgs: function(e) {
|
upImgs: function (e) {
|
||||||
var that = this;
|
var that = this;
|
||||||
var dataInfo = this.data_info;
|
var dataInfo = this.data_info;
|
||||||
if (dataInfo.comment_image && dataInfo.comment_image.length == 9) {
|
if (dataInfo.comment_image && dataInfo.comment_image.length == 9) {
|
||||||
that.$.alert('最多上传9张图片！');
|
that.$.alert("最多上传9张图片！");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
let ukey = uni.getStorageSync('ukey');
|
let ukey = uni.getStorageSync("ukey");
|
||||||
//that.$.showLoading();
|
//that.$.showLoading();
|
||||||
that.$.chooseImage({
|
that.$.chooseImage({
|
||||||
count: 1,
|
count: 1,
|
||||||
sizeType: ['compressed'],
|
sizeType: ["compressed"],
|
||||||
success: function(n) {
|
success: function (n) {
|
||||||
that.$.showLoading();
|
that.$.showLoading();
|
||||||
var r = n.tempFilePaths;
|
var r = n.tempFilePaths;
|
||||||
that.$.uploadFile({
|
that.$.uploadFile({
|
||||||
url: that.Config.URL.upload,
|
url: that.Config.URL.upload,
|
||||||
method: 'POST',
|
method: "POST",
|
||||||
filePath: r[0],
|
filePath: r[0],
|
||||||
name: 'upfile',
|
name: "upfile",
|
||||||
formData: {'perm_key':ukey},
|
formData: { perm_key: ukey },
|
||||||
//header: { 'content-type': 'multipart/form-data' },
|
//header: { 'content-type': 'multipart/form-data' },
|
||||||
success: function(n) {
|
success: function (n) {
|
||||||
that.$.hideLoading();
|
that.$.hideLoading();
|
||||||
var up_res = that.$.parseJSON(n.data);
|
var up_res = that.$.parseJSON(n.data);
|
||||||
|
debugger;
|
||||||
|
var s = up_res.data.url;
|
||||||
|
dataInfo.comment_image.push(s);
|
||||||
|
that.setData({ data_info: dataInfo });
|
||||||
|
},
|
||||||
|
fail: function (e) {
|
||||||
|
that.$.hideLoading();
|
||||||
|
},
|
||||||
|
complete: function (e) {
|
||||||
|
that.$.hideLoading();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail: function (e) {
|
||||||
|
that.$.hideLoading();
|
||||||
|
},
|
||||||
|
complete: function (e) {
|
||||||
|
that.$.hideLoading();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
delImg: function (e) {
|
||||||
|
//console.info(e);
|
||||||
|
var dataInfo = this.data_info;
|
||||||
|
var that = this;
|
||||||
|
that.$.confirm(
|
||||||
|
"是否放弃上传本张图片?",
|
||||||
|
function (n) {
|
||||||
|
if (n.confirm) {
|
||||||
|
var i = [];
|
||||||
|
for (let s = 0; s < dataInfo.comment_image.length; s++) {
|
||||||
|
if (s != e.target.dataset.index) {
|
||||||
|
var o = dataInfo.comment_image[s];
|
||||||
|
i.push(o);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dataInfo.comment_image = i;
|
||||||
|
|
||||||
var s = up_res.data.url;
|
that.setData({ data_info: dataInfo });
|
||||||
dataInfo.comment_image.push(s);
|
}
|
||||||
that.setData({ data_info: dataInfo });
|
},
|
||||||
},
|
true
|
||||||
fail: function(e) {
|
);
|
||||||
that.$.hideLoading();
|
},
|
||||||
},
|
submitComment: function (e) {
|
||||||
complete: function(e) {
|
var that = this;
|
||||||
that.$.hideLoading();
|
var dataInfo = this.data_info;
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
fail: function(e) {
|
|
||||||
that.$.hideLoading();
|
|
||||||
},
|
|
||||||
complete: function(e) {
|
|
||||||
that.$.hideLoading();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
delImg: function(e) {
|
|
||||||
//console.info(e);
|
|
||||||
var dataInfo = this.data_info;
|
|
||||||
var that = this;
|
|
||||||
that.$.confirm(
|
|
||||||
'是否放弃上传本张图片?',
|
|
||||||
function(n) {
|
|
||||||
if (n.confirm) {
|
|
||||||
var i = [];
|
|
||||||
for (let s = 0; s < dataInfo.comment_image.length; s++) {
|
|
||||||
if (s != e.target.dataset.index) {
|
|
||||||
var o = dataInfo.comment_image[s];
|
|
||||||
i.push(o);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
dataInfo.comment_image = i;
|
|
||||||
|
|
||||||
that.setData({ data_info: dataInfo });
|
if (!that.return_refund_amount) {
|
||||||
}
|
that.$.showModal({
|
||||||
},
|
title: "提示",
|
||||||
true
|
content: "退款金额必填！",
|
||||||
);
|
showCancel: false,
|
||||||
},
|
});
|
||||||
submitComment: function(e) {
|
return;
|
||||||
var that = this;
|
}
|
||||||
var dataInfo = this.data_info;
|
|
||||||
|
|
||||||
if (!that.return_refund_amount)
|
|
||||||
{
|
|
||||||
that.$.showModal({
|
|
||||||
title: "提示",
|
|
||||||
content: "退款金额必填！",
|
|
||||||
showCancel: false,
|
|
||||||
})
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (that.return_refund_amount < 0)
|
|
||||||
{
|
|
||||||
that.$.showModal({
|
|
||||||
title: "提示",
|
|
||||||
content: "退款金额必须是正数！",
|
|
||||||
showCancel: false,
|
|
||||||
})
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (that.return_refund_amount > dataInfo.order.item.order_item_can_refund_amount)
|
|
||||||
{
|
|
||||||
that.$.showModal({
|
|
||||||
title: "提示",
|
|
||||||
content: "退款金额必须小于可退金额！",
|
|
||||||
showCancel: false,
|
|
||||||
})
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (that.return_item_num > that.data_info.order.item.order_item_can_return_num)
|
if (that.return_refund_amount < 0) {
|
||||||
{
|
that.$.showModal({
|
||||||
that.$.showModal({
|
title: "提示",
|
||||||
title: "提示",
|
content: "退款金额必须是正数！",
|
||||||
content: "退货数量必须小于等于可退数量！",
|
showCancel: false,
|
||||||
showCancel: false,
|
});
|
||||||
})
|
return;
|
||||||
return;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
if (!that.return_item_num)
|
if (
|
||||||
{
|
that.return_refund_amount >
|
||||||
that.$.showModal({
|
dataInfo.order.item.order_item_can_refund_amount
|
||||||
title: "提示",
|
) {
|
||||||
content: "退货数量必填！",
|
that.$.showModal({
|
||||||
showCancel: false,
|
title: "提示",
|
||||||
})
|
content: "退款金额必须小于可退金额！",
|
||||||
return;
|
showCancel: false,
|
||||||
}
|
});
|
||||||
|
return;
|
||||||
var g = /^[1-9]*[1-9][0-9]*$/;
|
}
|
||||||
if(!g.test(that.return_item_num))
|
|
||||||
{
|
|
||||||
that.$.showModal({
|
|
||||||
title: "提示",
|
|
||||||
content: "退货数量必须是正整数！",
|
|
||||||
showCancel: false,
|
|
||||||
})
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
that.$.confirm(
|
if (
|
||||||
'确认退货?',
|
that.return_item_num >
|
||||||
function(e) {
|
that.data_info.order.item.order_item_can_return_num
|
||||||
if (e.confirm) {
|
) {
|
||||||
var comment_image = ''
|
that.$.showModal({
|
||||||
if (dataInfo.comment_image) {
|
title: "提示",
|
||||||
comment_image = dataInfo.comment_image.toString()
|
content: "退货数量必须小于等于可退数量！",
|
||||||
}
|
showCancel: false,
|
||||||
var params = {
|
});
|
||||||
order_id: dataInfo.order.order_id,
|
return;
|
||||||
order_item_id: that.order_item_id,
|
}
|
||||||
return_refund_amount:that.return_refund_amount,
|
|
||||||
return_item_num:that.return_item_num,
|
|
||||||
return_buyer_message:that.return_buyer_message,
|
|
||||||
upload_img:comment_image,
|
|
||||||
refund_type: 2,
|
|
||||||
return_tel: that.return_tel,
|
|
||||||
};
|
|
||||||
that.$.request({
|
|
||||||
url: that.Config.URL.user.return_add_one,
|
|
||||||
data: params,
|
|
||||||
success: function(data, status, msg, code) {
|
|
||||||
if (status == 200) {
|
|
||||||
that.$.alert('申请退货成功！', function() {
|
|
||||||
let url = that.$.sprintf('/member/member/returndetail?return_id=%s', data.return.return_id)
|
|
||||||
that.$.gopage(url);
|
|
||||||
|
|
||||||
/*
|
if (!that.return_item_num) {
|
||||||
|
that.$.showModal({
|
||||||
|
title: "提示",
|
||||||
|
content: "退货数量必填！",
|
||||||
|
showCancel: false,
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var g = /^[1-9]*[1-9][0-9]*$/;
|
||||||
|
if (!g.test(that.return_item_num)) {
|
||||||
|
that.$.showModal({
|
||||||
|
title: "提示",
|
||||||
|
content: "退货数量必须是正整数！",
|
||||||
|
showCancel: false,
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
that.$.confirm(
|
||||||
|
"确认退货?",
|
||||||
|
function (e) {
|
||||||
|
if (e.confirm) {
|
||||||
|
var comment_image = "";
|
||||||
|
if (dataInfo.comment_image) {
|
||||||
|
comment_image = dataInfo.comment_image.toString();
|
||||||
|
}
|
||||||
|
var params = {
|
||||||
|
order_id: dataInfo.order.order_id,
|
||||||
|
order_item_id: that.order_item_id,
|
||||||
|
return_refund_amount: that.return_refund_amount,
|
||||||
|
return_item_num: that.return_item_num,
|
||||||
|
return_buyer_message: that.return_buyer_message,
|
||||||
|
upload_img: comment_image,
|
||||||
|
refund_type: 2,
|
||||||
|
return_tel: that.return_tel,
|
||||||
|
};
|
||||||
|
that.$.request({
|
||||||
|
url: that.Config.URL.user.return_add_one,
|
||||||
|
data: params,
|
||||||
|
success: function (data, status, msg, code) {
|
||||||
|
if (status == 200) {
|
||||||
|
that.$.alert("申请退货成功！", function () {
|
||||||
|
let url = that.$.sprintf(
|
||||||
|
"/member/member/returndetail?return_id=%s",
|
||||||
|
data.return.return_id
|
||||||
|
);
|
||||||
|
that.$.gopage(url);
|
||||||
|
|
||||||
|
/*
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
that.$.navigateBack(1);
|
that.$.navigateBack(1);
|
||||||
}, 2e3);
|
}, 2e3);
|
||||||
*/
|
*/
|
||||||
});
|
});
|
||||||
}
|
} else {
|
||||||
else
|
that.$.showModal({
|
||||||
{
|
title: "提示",
|
||||||
that.$.showModal({
|
content: msg,
|
||||||
title: "提示",
|
showCancel: false,
|
||||||
content: msg,
|
});
|
||||||
showCancel: false,
|
}
|
||||||
})
|
},
|
||||||
}
|
});
|
||||||
}
|
}
|
||||||
});
|
},
|
||||||
}
|
true
|
||||||
},
|
);
|
||||||
true
|
},
|
||||||
);
|
ImgTap: function (e) {
|
||||||
},
|
var that = this,
|
||||||
ImgTap: function(e) {
|
urls = [];
|
||||||
var that = this,
|
|
||||||
urls = [];
|
|
||||||
|
|
||||||
for (var i in this.data_info.comment_image) {
|
for (var i in this.data_info.comment_image) {
|
||||||
urls.push(this.data_info.comment_image[i]);
|
urls.push(this.data_info.comment_image[i]);
|
||||||
}
|
}
|
||||||
var s = e.target.dataset.src;
|
var s = e.target.dataset.src;
|
||||||
|
|
||||||
that.$.previewImage({ current: s, urls: urls });
|
that.$.previewImage({ current: s, urls: urls });
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import '../../styles/_variables';
|
@import "../../styles/_variables";
|
||||||
|
|
||||||
.m-box-item {
|
.m-box-item {
|
||||||
margin-bottom: 20rpx;
|
margin-bottom: 20rpx;
|
||||||
}
|
}
|
||||||
.m-title {
|
.m-title {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: 260rpx;
|
height: 260rpx;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid #eee;
|
||||||
padding: 20rpx;
|
padding: 20rpx;
|
||||||
height:120rpx;
|
height: 120rpx;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
}
|
}
|
||||||
.m-pimg {
|
.m-pimg {
|
||||||
width: 90rpx;
|
width: 90rpx;
|
||||||
height: 90rpx;
|
height: 90rpx;
|
||||||
background-color: sandybrown;
|
background-color: sandybrown;
|
||||||
margin-right: 20rpx;
|
margin-right: 20rpx;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
.m-pimg image {
|
.m-pimg image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.m-start {
|
.m-start {
|
||||||
height: 70rpx;
|
height: 70rpx;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
line-height: 70rpx;
|
line-height: 70rpx;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
.m-label {
|
.m-label {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #333;
|
color: #333;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
margin-right: 10rpx;
|
margin-right: 10rpx;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
line-height: 80rpx;
|
line-height: 80rpx;
|
||||||
height: 80rpx;
|
height: 80rpx;
|
||||||
width: 120rpx;
|
width: 120rpx;
|
||||||
}
|
}
|
||||||
.m-startBox {
|
.m-startBox {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
/* color: #eee; */
|
/* color: #eee; */
|
||||||
width: 360rpx;
|
width: 360rpx;
|
||||||
}
|
}
|
||||||
.m-startBox label {
|
.m-startBox label {
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
font-size: 36rpx;
|
font-size: 36rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.m-right {
|
.m-right {
|
||||||
width: 260rpx;
|
width: 260rpx;
|
||||||
color: #36BC9B;
|
color: #36bc9b;
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sel {
|
.sel {
|
||||||
color: $default-skin-bg;
|
color: $default-skin-bg;
|
||||||
}
|
}
|
||||||
.m-VComment {
|
.m-VComment {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
padding: 20rpx;
|
padding: 20rpx;
|
||||||
margin-top: 20rpx;
|
margin-top: 20rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.m-VConmmenBox {
|
.m-VConmmenBox {
|
||||||
/* margin-bottom: 10rpx; */
|
/* margin-bottom: 10rpx; */
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.m-VConmmenBox:first-child {
|
.m-VConmmenBox:first-child {
|
||||||
/* margin-bottom: 10rpx; */
|
/* margin-bottom: 10rpx; */
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
}
|
}
|
||||||
.m-text {
|
.m-text {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 10rpx 10rpx 0 10rpx;
|
padding: 10rpx 10rpx 0 10rpx;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
min-height: 100rpx;
|
min-height: 100rpx;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
line-height: 40rpx;
|
line-height: 40rpx;
|
||||||
}
|
}
|
||||||
.m-text textarea {
|
.m-text textarea {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.m-upImg {
|
.m-upImg {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 20rpx;
|
padding: 20rpx;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
.m-upImg-item {
|
.m-upImg-item {
|
||||||
width: 120rpx;
|
width: 120rpx;
|
||||||
height: 120rpx;
|
height: 120rpx;
|
||||||
border: 1px solid #eee;
|
border: 1px solid #eee;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 9rpx;
|
margin: 9rpx;
|
||||||
border-radius: 4rpx;
|
border-radius: 4rpx;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.m-upImg-item image {
|
.m-upImg-item image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.u-del-item {
|
.u-del-item {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 40rpx;
|
height: 40rpx;
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 40rpx;
|
line-height: 40rpx;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
}
|
}
|
||||||
.u-del-item label {
|
.u-del-item label {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
}
|
}
|
||||||
.upSelect {
|
.upSelect {
|
||||||
background-color: #eee;
|
background-color: #eee;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 120rpx;
|
line-height: 120rpx;
|
||||||
}
|
}
|
||||||
.upSelect label {
|
.upSelect label {
|
||||||
font-size: 40rpx;
|
font-size: 40rpx;
|
||||||
}
|
}
|
||||||
.m-submitComment {
|
.m-submitComment {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
height: 100rpx;
|
height: 100rpx;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-top: 1px solid #eee;
|
border-top: 1px solid #eee;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
.m-subBtn {
|
.m-subBtn {
|
||||||
float: right;
|
float: right;
|
||||||
padding: 0 20rpx;
|
padding: 0 20rpx;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: $default-skin-bg;
|
background-color: $default-skin-bg;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
line-height: 100rpx;
|
line-height: 100rpx;
|
||||||
}
|
}
|
||||||
.m-media-box-desc {
|
.m-media-box-desc {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.alert {
|
.alert {
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
width: 70%;
|
width: 70%;
|
||||||
padding: 0 40rpx;
|
padding: 0 40rpx;
|
||||||
height: 200rpx;
|
height: 200rpx;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 10%;
|
left: 10%;
|
||||||
top: 40%;
|
top: 40%;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 10rpx;
|
border-radius: 10rpx;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
}
|
}
|
||||||
.cover {
|
.cover {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
background: rgba(0, 0, 0, 0.4);
|
background: rgba(0, 0, 0, 0.4);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
z-index: 998;
|
z-index: 998;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
24
pages.json
24
pages.json
@ -212,7 +212,29 @@
|
|||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
],
|
],
|
||||||
"subPackages": [{
|
"subPackages": [
|
||||||
|
{
|
||||||
|
"root": "address",
|
||||||
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "selectShippingAddress",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "选择收货地址"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "selectCity",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"app-plus": {
|
||||||
|
"titleNView": false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
"root": "member",
|
"root": "member",
|
||||||
"pages": [{
|
"pages": [{
|
||||||
"path": "member/protocol",
|
"path": "member/protocol",
|
||||||
|
|||||||
2561
pages/cart/cart.vue
2561
pages/cart/cart.vue
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,35 +1,88 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<tp-search id="tp-search" class="tp-search" :search-text="options.pname" :placeholder="tpSearchPlaceholder" :style="tpSearchStyle" @change="search"></tp-search>
|
<tp-search
|
||||||
<scroll-view scroll-y="true" class="m-product-all u-pa" @scrolltolower="scrollbottom" :scroll-top="scposition"
|
id="tp-search"
|
||||||
@scroll="scroll" scroll-with-animation="true" :style="ptSearchStyle">
|
class="tp-search"
|
||||||
|
:search-text="options.pname"
|
||||||
|
:placeholder="tpSearchPlaceholder"
|
||||||
|
:style="tpSearchStyle"
|
||||||
|
@change="search"
|
||||||
|
></tp-search>
|
||||||
|
<scroll-view
|
||||||
|
scroll-y="true"
|
||||||
|
class="m-product-all u-pa"
|
||||||
|
@scrolltolower="scrollbottom"
|
||||||
|
:scroll-top="scposition"
|
||||||
|
@scroll="scroll"
|
||||||
|
scroll-with-animation="true"
|
||||||
|
:style="ptSearchStyle"
|
||||||
|
>
|
||||||
<view class="fixPaddingTop" v-if="loadPageFlag">
|
<view class="fixPaddingTop" v-if="loadPageFlag">
|
||||||
<diy id="diy" :BgConfig="BgConfig" :PageContent="PageContent" :pageId="pageId" :PageNav="PageNav"
|
<diy
|
||||||
:loadPageFlag="loadPageFlag"></diy>
|
id="diy"
|
||||||
|
:BgConfig="BgConfig"
|
||||||
|
:PageContent="PageContent"
|
||||||
|
:pageId="pageId"
|
||||||
|
:PageNav="PageNav"
|
||||||
|
:loadPageFlag="loadPageFlag"
|
||||||
|
></diy>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!--第七个模版-->
|
<!--第七个模版-->
|
||||||
<scroll-view scroll-x="true" v-if="cat_self.length>0 || cat_child.length>0"
|
<scroll-view
|
||||||
:class="{'box-grids':1, 'box-grids-border':0, fixPaddingTop:!loadPageFlag}">
|
scroll-x="true"
|
||||||
|
v-if="cat_self.length > 0 || cat_child.length > 0"
|
||||||
|
:class="{
|
||||||
|
'box-grids': 1,
|
||||||
|
'box-grids-border': 0,
|
||||||
|
fixPaddingTop: !loadPageFlag,
|
||||||
|
}"
|
||||||
|
>
|
||||||
<view>
|
<view>
|
||||||
<!-- 当前分类 -->
|
<!-- 当前分类 -->
|
||||||
<view :class="{'box-grid':1, 'box-grid-border':0}" v-for="(items, ii) in cat_self"
|
<view
|
||||||
:key="items.id"
|
:class="{ 'box-grid': 1, 'box-grid-border': 0 }"
|
||||||
:style="{width:((100/5))+'%','padding-top':(10)+'px','padding-bottom':(10)+'px','padding-left':(10)+'px','padding-right':(10)+'px','background-color':'transparent'}"
|
v-for="(items, ii) in cat_self"
|
||||||
@click="onCategory(items.category_id)">
|
:key="items.id"
|
||||||
|
:style="{
|
||||||
|
width: 100 / 5 + '%',
|
||||||
|
'padding-top': 10 + 'px',
|
||||||
|
'padding-bottom': 10 + 'px',
|
||||||
|
'padding-left': 10 + 'px',
|
||||||
|
'padding-right': 10 + 'px',
|
||||||
|
'background-color': 'transparent',
|
||||||
|
}"
|
||||||
|
@click="onCategory(items.category_id)"
|
||||||
|
>
|
||||||
<view class="box-grid-icon">
|
<view class="box-grid-icon">
|
||||||
<image lazy-load :src="($.img(items.category_image, 80, 80))"></image>
|
<image
|
||||||
|
lazy-load
|
||||||
|
:src="$.img(items.category_image, 80, 80)"
|
||||||
|
></image>
|
||||||
</view>
|
</view>
|
||||||
<label class="box-grid-label">{{ items.category_name }}</label>
|
<label class="box-grid-label">{{ items.category_name }}</label>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 子分类 -->
|
<!-- 子分类 -->
|
||||||
<view :class="{'box-grid':1, 'box-grid-border':0}" v-for="(items, ii) in cat_child"
|
<view
|
||||||
:key="items.id"
|
:class="{ 'box-grid': 1, 'box-grid-border': 0 }"
|
||||||
:style="{width:((100/5))+'%','padding-top':(10)+'px','padding-bottom':(10)+'px','padding-left':(10)+'px','padding-right':(10)+'px','background-color':'transparent'}"
|
v-for="(items, ii) in cat_child"
|
||||||
@click="onCategory(items.category_id)">
|
:key="items.id"
|
||||||
|
:style="{
|
||||||
|
width: 100 / 5 + '%',
|
||||||
|
'padding-top': 10 + 'px',
|
||||||
|
'padding-bottom': 10 + 'px',
|
||||||
|
'padding-left': 10 + 'px',
|
||||||
|
'padding-right': 10 + 'px',
|
||||||
|
'background-color': 'transparent',
|
||||||
|
}"
|
||||||
|
@click="onCategory(items.category_id)"
|
||||||
|
>
|
||||||
<view class="box-grid-icon">
|
<view class="box-grid-icon">
|
||||||
<image lazy-load :src="($.img(items.category_image, 80, 80))"></image>
|
<image
|
||||||
|
lazy-load
|
||||||
|
:src="$.img(items.category_image, 80, 80)"
|
||||||
|
></image>
|
||||||
</view>
|
</view>
|
||||||
<label class="box-grid-label">{{ items.category_name }}</label>
|
<label class="box-grid-label">{{ items.category_name }}</label>
|
||||||
</view>
|
</view>
|
||||||
@ -38,24 +91,44 @@
|
|||||||
<!--第七个模版-->
|
<!--第七个模版-->
|
||||||
|
|
||||||
<!--301模板-->
|
<!--301模板-->
|
||||||
<product-list v-if="loaded" ref="productList" :showCatFlag="true" :uniId="ptConfig.uniId" :isFilterFixed="ptConfig.isFilterFixed" :fix-top="ptConfig.topDistance"
|
<product-list
|
||||||
:isShowFilter="ptConfig.isShowFilter" :isShowLoading="ptConfig.isShowLoading"
|
v-if="loaded"
|
||||||
:options="ptConfig.options" :viewtype="ptConfig.viewtype" :titleText="ptConfig.titleText"
|
ref="productList"
|
||||||
:titleColor="ptConfig.titleColor" :bgColor="ptConfig.bgColor" :paddingLeft="ptConfig.paddingLeft"
|
:showCatFlag="true"
|
||||||
:paddingRight="ptConfig.paddingRight" :css="ptConfig.css"
|
:uniId="ptConfig.uniId"
|
||||||
:style="{backgroundColor: 'transparent'}"></product-list>
|
:isFilterFixed="ptConfig.isFilterFixed"
|
||||||
|
:fix-top="ptConfig.topDistance"
|
||||||
|
:isShowFilter="ptConfig.isShowFilter"
|
||||||
|
:isShowLoading="ptConfig.isShowLoading"
|
||||||
|
:options="ptConfig.options"
|
||||||
|
:viewtype="ptConfig.viewtype"
|
||||||
|
:titleText="ptConfig.titleText"
|
||||||
|
:titleColor="ptConfig.titleColor"
|
||||||
|
:bgColor="ptConfig.bgColor"
|
||||||
|
:paddingLeft="ptConfig.paddingLeft"
|
||||||
|
:paddingRight="ptConfig.paddingRight"
|
||||||
|
:css="ptConfig.css"
|
||||||
|
:style="{ backgroundColor: 'transparent' }"
|
||||||
|
></product-list>
|
||||||
<!--301模板-->
|
<!--301模板-->
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
|
|
||||||
<view class="u-top-default">
|
<view class="u-top-default"> </view>
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="u-top">
|
<view class="u-top">
|
||||||
<movable-area class="movableArea">
|
<movable-area class="movableArea">
|
||||||
<movable-view class="movableView" @touchmove.stop.prevent="doNothing" direction="all" :x="returnPos.initX"
|
<movable-view
|
||||||
:y="returnPos.initY">
|
class="movableView"
|
||||||
<image src='https://static.lancerdt.com/xcxfile/appicon/nav/black/nav_gotop.png'
|
@touchmove.stop.prevent="doNothing"
|
||||||
:class='(isQuickNav?"quicknav":"hide")' @tap="returnTop"></image>
|
direction="all"
|
||||||
|
:x="returnPos.initX"
|
||||||
|
:y="returnPos.initY"
|
||||||
|
>
|
||||||
|
<image
|
||||||
|
src="https://static.lancerdt.com/xcxfile/appicon/nav/black/nav_gotop.png"
|
||||||
|
:class="isQuickNav ? 'quicknav' : 'hide'"
|
||||||
|
@tap="returnTop"
|
||||||
|
></image>
|
||||||
</movable-view>
|
</movable-view>
|
||||||
</movable-area>
|
</movable-area>
|
||||||
</view>
|
</view>
|
||||||
@ -64,13 +137,13 @@
|
|||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import uniDrawer from '@/components/uni-drawer.vue';
|
import uniDrawer from "@/components/uni-drawer.vue";
|
||||||
import uniTag from '@/components/uni-tag/uni-tag.vue';
|
import uniTag from "@/components/uni-tag/uni-tag.vue";
|
||||||
import diy from '@/components/themes/diy.vue'
|
import diy from "@/components/themes/diy.vue";
|
||||||
|
|
||||||
import ProductList from "@/components/product-list";
|
import ProductList from "@/components/product-list";
|
||||||
|
|
||||||
import {mapMutations, mapState} from 'vuex';
|
import { mapMutations, mapState } from "vuex";
|
||||||
import SearchBox from "@/uni_modules/search-box/components/search-box/search-box";
|
import SearchBox from "@/uni_modules/search-box/components/search-box/search-box";
|
||||||
import TpSearch from "@/components/tp-search/tp-search";
|
import TpSearch from "@/components/tp-search/tp-search";
|
||||||
|
|
||||||
@ -85,17 +158,23 @@ export default {
|
|||||||
|
|
||||||
sort: 2,
|
sort: 2,
|
||||||
|
|
||||||
|
|
||||||
PageContent: [],
|
PageContent: [],
|
||||||
BgConfig: {BackgroundObj: {type: 1, bgColor: '#ffffff', "pathColor": "#f8f8f8", "path": ""}},
|
BgConfig: {
|
||||||
|
BackgroundObj: {
|
||||||
|
type: 1,
|
||||||
|
bgColor: "#ffffff",
|
||||||
|
pathColor: "#f8f8f8",
|
||||||
|
path: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
PageNav: {
|
PageNav: {
|
||||||
window: {
|
window: {
|
||||||
"navigationBarBackgroundColor": "#ffffff",
|
navigationBarBackgroundColor: "#ffffff",
|
||||||
"navigationBarTextStyle": "black",
|
navigationBarTextStyle: "black",
|
||||||
"navigationBarTitleText": "",
|
navigationBarTitleText: "",
|
||||||
"backgroundColor": "#f8f8f8",
|
backgroundColor: "#f8f8f8",
|
||||||
"backgroundTextStyle": "dark"
|
backgroundTextStyle: "dark",
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
loadPageFlag: false,
|
loadPageFlag: false,
|
||||||
loaded: false,
|
loaded: false,
|
||||||
@ -104,29 +183,28 @@ export default {
|
|||||||
|
|
||||||
shareImg: "",
|
shareImg: "",
|
||||||
shareTitle: "",
|
shareTitle: "",
|
||||||
chatUrl: '',
|
chatUrl: "",
|
||||||
timer: null,
|
timer: null,
|
||||||
|
|
||||||
|
|
||||||
ptConfig: {
|
ptConfig: {
|
||||||
uniId: 'category',
|
uniId: "category",
|
||||||
isFilterFixed: true,
|
isFilterFixed: true,
|
||||||
topDistance:44,
|
topDistance: 44,
|
||||||
isShowFilter: true,
|
isShowFilter: true,
|
||||||
isShowLoading: true,
|
isShowLoading: true,
|
||||||
options: {},
|
options: {},
|
||||||
viewtype: 1,
|
viewtype: 1,
|
||||||
titleText: '',
|
titleText: "",
|
||||||
titleColor: '',
|
titleColor: "",
|
||||||
bgColor: '',
|
bgColor: "",
|
||||||
paddingLeft: 0,
|
paddingLeft: 0,
|
||||||
paddingRight: 0,
|
paddingRight: 0,
|
||||||
css: {padding: "0 10rpx"},
|
css: { padding: "0 10rpx" },
|
||||||
},
|
},
|
||||||
|
|
||||||
returnPos: {
|
returnPos: {
|
||||||
initX: '690',
|
initX: "690",
|
||||||
initY: '1336',
|
initY: "1336",
|
||||||
},
|
},
|
||||||
|
|
||||||
scposition: 0,
|
scposition: 0,
|
||||||
@ -137,9 +215,9 @@ export default {
|
|||||||
opacity: 1,
|
opacity: 1,
|
||||||
background: "f1f1f1",
|
background: "f1f1f1",
|
||||||
|
|
||||||
ptSearchStyle:"z-index: 5;",
|
ptSearchStyle: "z-index: 5;",
|
||||||
tpSearchStyle:"z-index: 5;",
|
tpSearchStyle: "z-index: 5;",
|
||||||
tpSearchPlaceholder:"",
|
tpSearchPlaceholder: "",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -149,55 +227,56 @@ export default {
|
|||||||
uniDrawer,
|
uniDrawer,
|
||||||
uniTag,
|
uniTag,
|
||||||
diy,
|
diy,
|
||||||
ProductList
|
ProductList,
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: mapState([
|
computed: mapState([
|
||||||
'Config',
|
"Config",
|
||||||
'StateCode',
|
"StateCode",
|
||||||
'notice',
|
"notice",
|
||||||
'plantformInfo',
|
"plantformInfo",
|
||||||
'shopInfo',
|
"shopInfo",
|
||||||
'userInfo',
|
"userInfo",
|
||||||
'hasLogin'
|
"hasLogin",
|
||||||
]),
|
]),
|
||||||
mounted() {
|
mounted() {
|
||||||
this.initReturnPos();
|
this.initReturnPos();
|
||||||
|
|
||||||
uni.$on('onOpenFilter', data => {
|
uni.$on("onOpenFilter", (data) => {
|
||||||
if (data) {
|
if (data) {
|
||||||
this.tpSearchStyle = "z-index: 5;"
|
this.tpSearchStyle = "z-index: 5;";
|
||||||
this.ptSearchStyle = "z-index: 6;"
|
this.ptSearchStyle = "z-index: 6;";
|
||||||
} else {
|
} else {
|
||||||
this.tpSearchStyle = "z-index: 6;"
|
this.tpSearchStyle = "z-index: 6;";
|
||||||
this.ptSearchStyle = "z-index: 5;"
|
this.ptSearchStyle = "z-index: 5;";
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
async onLoad(options) {
|
async onLoad(options) {
|
||||||
await this.$onLaunched;
|
await this.$onLaunched;
|
||||||
this.loaded = true;
|
this.loaded = true;
|
||||||
|
|
||||||
// #ifdef MP-WEIXIN || MP-ALIPAY
|
// #ifdef MP-WEIXIN || MP-ALIPAY
|
||||||
this.ptConfig.topDistance = (this.statusBar - 7 + 44);
|
this.ptConfig.topDistance = this.statusBar - 7 + 44;
|
||||||
// #endif
|
// #endif
|
||||||
|
|
||||||
|
|
||||||
uni.setNavigationBarTitle({
|
uni.setNavigationBarTitle({
|
||||||
title: this.__('商品列表')
|
title: this.__("商品列表"),
|
||||||
});
|
});
|
||||||
|
|
||||||
var that = this;
|
var that = this;
|
||||||
this.setData({options: options});
|
this.setData({ options: options });
|
||||||
|
|
||||||
this.pageId = options.page_id ? options.page_id : 0;
|
this.pageId = options.page_id ? options.page_id : 0;
|
||||||
|
|
||||||
that.$.setNavigationBarTitle({title: options.pname || options.cname || this.__('商品列表')});
|
that.$.setNavigationBarTitle({
|
||||||
|
title: options.pname || options.cname || this.__("商品列表"),
|
||||||
|
});
|
||||||
|
|
||||||
that.$.getSystemInfo({
|
that.$.getSystemInfo({
|
||||||
success: function (t) {
|
success: function (t) {
|
||||||
that.setData({screenHeight: t.screenHeight})
|
that.setData({ screenHeight: t.screenHeight });
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -211,8 +290,8 @@ export default {
|
|||||||
|
|
||||||
that.ptConfig.options = {
|
that.ptConfig.options = {
|
||||||
store_id: options.store_id,
|
store_id: options.store_id,
|
||||||
sidx: 'product_sale_num',
|
sidx: "product_sale_num",
|
||||||
sort: 'DESC',
|
sort: "DESC",
|
||||||
keywords: options.pname,
|
keywords: options.pname,
|
||||||
store_category_ids: options.store_category_id,
|
store_category_ids: options.store_category_id,
|
||||||
category_id: options.category_id,
|
category_id: options.category_id,
|
||||||
@ -222,56 +301,79 @@ export default {
|
|||||||
store_type: options.store_type,
|
store_type: options.store_type,
|
||||||
page: 1,
|
page: 1,
|
||||||
|
|
||||||
product_unit_price_min: options.product_unit_price_min ? options.product_unit_price_min : '',
|
product_unit_price_min: options.product_unit_price_min
|
||||||
product_unit_price_max: options.product_unit_price_max ? options.product_unit_price_max : '',
|
? options.product_unit_price_min
|
||||||
|
: "",
|
||||||
|
product_unit_price_max: options.product_unit_price_max
|
||||||
|
? options.product_unit_price_max
|
||||||
|
: "",
|
||||||
|
|
||||||
sp_from: options.sp_from ? options.sp_from : '',
|
sp_from: options.sp_from ? options.sp_from : "",
|
||||||
sp_to: options.sp_to ? options.sp_to : '',
|
sp_to: options.sp_to ? options.sp_to : "",
|
||||||
|
|
||||||
points_from: options.points_from ? options.points_from : '',
|
points_from: options.points_from ? options.points_from : "",
|
||||||
points_to: options.points_to ? options.points_to : '',
|
points_to: options.points_to ? options.points_to : "",
|
||||||
|
|
||||||
virtual: options.virtual ? options.virtual : 0,
|
virtual: options.virtual ? options.virtual : 0,
|
||||||
activity_type_ids: options.activity_type_id ? [options.activity_type_id] : [],
|
activity_type_ids: options.activity_type_id
|
||||||
contract_type_ids: options.contract_type_id ? [options.contract_type_id] : [],
|
? [options.activity_type_id]
|
||||||
market_category_ids: options.market_category_id ? [options.market_category_id] : [],
|
: [],
|
||||||
item_ids: options.item_ids ? options.item_ids : '',
|
contract_type_ids: options.contract_type_id
|
||||||
|
? [options.contract_type_id]
|
||||||
|
: [],
|
||||||
|
market_category_ids: options.market_category_id
|
||||||
|
? [options.market_category_id]
|
||||||
|
: [],
|
||||||
|
item_ids: options.item_ids ? options.item_ids : "",
|
||||||
// assist: []
|
// assist: []
|
||||||
}
|
};
|
||||||
|
|
||||||
if (this.pageId) {
|
if (this.pageId) {
|
||||||
//this.getPageInfo(false);
|
//this.getPageInfo(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.tpSearchPlaceholder = this.$.__("请输入商品名称");
|
||||||
this.tpSearchPlaceholder = this.$.__('请输入商品名称')
|
|
||||||
|
|
||||||
if (options.category_id && options.cname) {
|
if (options.category_id && options.cname) {
|
||||||
this.tpSearchPlaceholder = that.$.sprintf(this.$.__('请输入分类 %s 下商品名称'), options.cname)
|
this.tpSearchPlaceholder = that.$.sprintf(
|
||||||
|
this.$.__("请输入分类 %s 下商品名称"),
|
||||||
|
options.cname
|
||||||
|
);
|
||||||
}
|
}
|
||||||
// this.GetPlist(function() {
|
// this.GetPlist(function() {
|
||||||
// that.pdlist.length == 0 ? that.setData({ isdata: false }) : that.setData({ isdata: true });
|
// that.pdlist.length == 0 ? that.setData({ isdata: false }) : that.setData({ isdata: true });
|
||||||
// });
|
// });
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
...mapMutations([
|
||||||
|
"login",
|
||||||
|
"logout",
|
||||||
|
"getPlantformInfo",
|
||||||
|
"forceUserInfo",
|
||||||
|
"getUserInfo",
|
||||||
|
]),
|
||||||
initReturnPos: function () {
|
initReturnPos: function () {
|
||||||
let view = uni.createSelectorQuery().in(this).select(".movableArea");
|
let view = uni.createSelectorQuery().in(this).select(".movableArea");
|
||||||
let that = this;
|
let that = this;
|
||||||
|
|
||||||
view.fields({
|
view
|
||||||
size: true,
|
.fields(
|
||||||
scrollOffset: true
|
{
|
||||||
}, data => {
|
size: true,
|
||||||
if (data) {
|
scrollOffset: true,
|
||||||
that.returnPos.initX = data.width;
|
},
|
||||||
that.returnPos.initY = data.height - 100;
|
(data) => {
|
||||||
}
|
if (data) {
|
||||||
}).exec();
|
that.returnPos.initX = data.width;
|
||||||
|
that.returnPos.initY = data.height - 100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.exec();
|
||||||
|
|
||||||
uni.$on('returnTop', function (data) {
|
uni.$on("returnTop", function (data) {
|
||||||
that.returnTop();
|
that.returnTop();
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
getPageInfo: function (force_refresh) {
|
getPageInfo: function (force_refresh) {
|
||||||
var that = this;
|
var that = this;
|
||||||
@ -281,7 +383,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
var params = {
|
var params = {
|
||||||
page_id: that.pageId
|
page_id: that.pageId,
|
||||||
};
|
};
|
||||||
|
|
||||||
that.$.request({
|
that.$.request({
|
||||||
@ -289,7 +391,7 @@ export default {
|
|||||||
data: params,
|
data: params,
|
||||||
ajaxCache: {
|
ajaxCache: {
|
||||||
timeout: this.Config.CACHE_EXPIRE,
|
timeout: this.Config.CACHE_EXPIRE,
|
||||||
forceRefresh: force_refresh
|
forceRefresh: force_refresh,
|
||||||
},
|
},
|
||||||
success: function (data, status, msg, code) {
|
success: function (data, status, msg, code) {
|
||||||
that.$.stopPullDownRefresh();
|
that.$.stopPullDownRefresh();
|
||||||
@ -302,39 +404,42 @@ export default {
|
|||||||
BgConfig: that.$.parseJSON(data.page_config),
|
BgConfig: that.$.parseJSON(data.page_config),
|
||||||
PageNav: that.$.parseJSON(data.page_nav),
|
PageNav: that.$.parseJSON(data.page_nav),
|
||||||
shareImg: data.page_share_image,
|
shareImg: data.page_share_image,
|
||||||
shareTitle: data.page_share_title
|
shareTitle: data.page_share_title,
|
||||||
});
|
});
|
||||||
|
|
||||||
if (that.PageNav.window.navigationBarTextStyle == 'black') {
|
if (that.PageNav.window.navigationBarTextStyle == "black") {
|
||||||
that.PageNav.window.navigationBarTextStyle = '#000000'
|
that.PageNav.window.navigationBarTextStyle = "#000000";
|
||||||
}
|
}
|
||||||
|
|
||||||
if (that.PageNav.window.navigationBarTextStyle == 'white') {
|
if (that.PageNav.window.navigationBarTextStyle == "white") {
|
||||||
that.PageNav.window.navigationBarTextStyle = '#ffffff'
|
that.PageNav.window.navigationBarTextStyle = "#ffffff";
|
||||||
}
|
}
|
||||||
|
|
||||||
that.$.setNavigationBarColor({
|
that.$.setNavigationBarColor({
|
||||||
frontColor: that.PageNav.window.navigationBarTextStyle,
|
frontColor: that.PageNav.window.navigationBarTextStyle,
|
||||||
backgroundColor: that.PageNav.window.navigationBarBackgroundColor
|
backgroundColor: that.PageNav.window.navigationBarBackgroundColor,
|
||||||
})
|
});
|
||||||
|
|
||||||
if (data.page_name) {
|
if (data.page_name) {
|
||||||
that.$.setNavigationBarTitle({
|
that.$.setNavigationBarTitle({
|
||||||
title: data.page_name
|
title: data.page_name,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (that.hasLogin && data.im_enable) {
|
if (that.hasLogin && data.im_enable) {
|
||||||
var perm_id = that.$.getStorageSync('uid');
|
var perm_id = that.$.getStorageSync("uid");
|
||||||
var perm_key = that.$.getStorageSync('ukey');
|
var perm_key = that.$.getStorageSync("ukey");
|
||||||
let chat_url = that.$.sprintf("/im/chat/chat?uid=%s", data.im_user_id);
|
let chat_url = that.$.sprintf(
|
||||||
|
"/im/chat/chat?uid=%s",
|
||||||
|
data.im_user_id
|
||||||
|
);
|
||||||
|
|
||||||
that.setData({
|
that.setData({
|
||||||
chatUrl: chat_url
|
chatUrl: chat_url,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -349,73 +454,72 @@ export default {
|
|||||||
this.setData({
|
this.setData({
|
||||||
pdlist: [],
|
pdlist: [],
|
||||||
ispage: true, //loading
|
ispage: true, //loading
|
||||||
post: post
|
post: post,
|
||||||
});
|
});
|
||||||
|
|
||||||
this.GetPlist();
|
this.GetPlist();
|
||||||
},
|
},
|
||||||
|
|
||||||
doNothing() {
|
doNothing() {},
|
||||||
},
|
|
||||||
|
|
||||||
scroll: function (t) {
|
scroll: function (t) {
|
||||||
let that = this;
|
let that = this;
|
||||||
|
|
||||||
that.setData({oldscposition: t.detail.scrollTop});
|
that.setData({ oldscposition: t.detail.scrollTop });
|
||||||
|
|
||||||
if (100 < t.detail.scrollTop) {
|
if (100 < t.detail.scrollTop) {
|
||||||
that.setData({opacity: 1, background: "f8f8f8"});
|
that.setData({ opacity: 1, background: "f8f8f8" });
|
||||||
} else {
|
} else {
|
||||||
that.setData({
|
that.setData({
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
background: "fff"
|
background: "fff",
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
if (t.detail.scrollTop >= this.screenHeight) {
|
if (t.detail.scrollTop >= this.screenHeight) {
|
||||||
this.setData({isQuickNav: true})
|
this.setData({ isQuickNav: true });
|
||||||
} else {
|
} else {
|
||||||
this.setData({isQuickNav: false})
|
this.setData({ isQuickNav: false });
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
scrollbottom: function (e) {
|
scrollbottom: function (e) {
|
||||||
let that = this;
|
let that = this;
|
||||||
uni.$emit('diy-scrollbottom', {uniId: that.ptConfig.uniId})
|
uni.$emit("diy-scrollbottom", { uniId: that.ptConfig.uniId });
|
||||||
},
|
},
|
||||||
|
|
||||||
search: function (e) {
|
search: function (e) {
|
||||||
uni.$emit('returnTop')
|
uni.$emit("returnTop");
|
||||||
|
|
||||||
let that = this;
|
let that = this;
|
||||||
|
|
||||||
let opts = Object.assign({}, that.ptConfig.options);
|
let opts = Object.assign({}, that.ptConfig.options);
|
||||||
opts.keywords = e;
|
opts.keywords = e;
|
||||||
|
|
||||||
that.ptConfig.options = opts
|
that.ptConfig.options = opts;
|
||||||
that.$forceUpdate() //二维数组，开启强制渲染
|
that.$forceUpdate(); //二维数组，开启强制渲染
|
||||||
},
|
},
|
||||||
|
|
||||||
returnTop: function () {
|
returnTop: function () {
|
||||||
let that = this;
|
let that = this;
|
||||||
|
|
||||||
//视图会发生重新渲染
|
//视图会发生重新渲染
|
||||||
that.scposition = that.oldscposition
|
that.scposition = that.oldscposition;
|
||||||
|
|
||||||
//当视图渲染结束 重新设置为0
|
//当视图渲染结束 重新设置为0
|
||||||
that.$nextTick(() => {
|
that.$nextTick(() => {
|
||||||
that.scposition = 0
|
that.scposition = 0;
|
||||||
});
|
});
|
||||||
|
|
||||||
this.setData({isQuickNav: false})
|
this.setData({ isQuickNav: false });
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import '../../styles/_variables.scss';
|
@import "../../styles/_variables.scss";
|
||||||
|
|
||||||
.m-product-all{
|
.m-product-all {
|
||||||
margin-top: 44px;
|
margin-top: 44px;
|
||||||
height: calc(100% - var(--window-top) - 44px);
|
height: calc(100% - var(--window-top) - 44px);
|
||||||
}
|
}
|
||||||
@ -448,13 +552,11 @@ export default {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
|
||||||
.box-grid {
|
.box-grid {
|
||||||
padding: 40rpx 20rpx;
|
padding: 40rpx 20rpx;
|
||||||
width: 33.33333333%;
|
width: 33.33333333%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 36rpx;
|
font-size: 36rpx;
|
||||||
@ -486,7 +588,6 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.box-grid-label {
|
.box-grid-label {
|
||||||
|
|||||||
@ -1,199 +1,246 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="page" v-if="loadPageFlag" :style="{background:(BgConfig.BackgroundObj.type==1?BgConfig.BackgroundObj.bgColor:('url('+BgConfig.BackgroundObj.path+') no-repeat '+ BgConfig.BackgroundObj.pathColor))}">
|
<view
|
||||||
<status-bar :backgroundColor="BgConfig.BackgroundObj.bgColor"></status-bar>
|
class="page"
|
||||||
|
v-if="loadPageFlag"
|
||||||
|
:style="{
|
||||||
|
background:
|
||||||
|
BgConfig.BackgroundObj.type == 1
|
||||||
|
? BgConfig.BackgroundObj.bgColor
|
||||||
|
: 'url(' +
|
||||||
|
BgConfig.BackgroundObj.path +
|
||||||
|
') no-repeat ' +
|
||||||
|
BgConfig.BackgroundObj.pathColor,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<status-bar :backgroundColor="BgConfig.BackgroundObj.bgColor"></status-bar>
|
||||||
|
|
||||||
<diy :BgConfig="BgConfig" :PageContent="PageContent" :pageId="pageId" :PageNav="PageNav" :loadPageFlag="loadPageFlag"></diy>
|
<diy
|
||||||
|
:BgConfig="BgConfig"
|
||||||
|
:PageContent="PageContent"
|
||||||
|
:pageId="pageId"
|
||||||
|
:PageNav="PageNav"
|
||||||
|
:loadPageFlag="loadPageFlag"
|
||||||
|
></diy>
|
||||||
|
|
||||||
<guess-you-like ref="guessYouLike" :options="options"></guess-you-like>
|
<guess-you-like ref="guessYouLike" :options="options"></guess-you-like>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import "../../styles/_variables.scss";
|
@import "../../styles/_variables.scss";
|
||||||
|
|
||||||
@import '../../styles/layout.scss';
|
@import "../../styles/layout.scss";
|
||||||
|
|
||||||
.page {
|
.page {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
background-size: cover !important;
|
background-size: cover !important;
|
||||||
background-position: top center !important;
|
background-position: top center !important;
|
||||||
margin-bottom:var(--window-bottom);
|
margin-bottom: var(--window-bottom);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import statusBar from '../../components/status-bar.vue'
|
import statusBar from "../../components/status-bar.vue";
|
||||||
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
|
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue";
|
||||||
|
import diy from "../../components/themes/diy.vue";
|
||||||
|
import guessYouLike from "@/components/guess-you-like.vue";
|
||||||
|
|
||||||
import diy from '../../components/themes/diy.vue'
|
import { mapState, mapMutations } from "vuex";
|
||||||
|
|
||||||
import bwSwiper from '@/components/bw-swiper/bw-swiper.vue'
|
export default {
|
||||||
|
/**
|
||||||
|
* 页面的初始数据
|
||||||
|
*/
|
||||||
|
data: function () {
|
||||||
|
return {
|
||||||
|
options: {},
|
||||||
|
pageId: "",
|
||||||
|
loadPageFlag: false,
|
||||||
|
PageContent: [],
|
||||||
|
BgConfig: {
|
||||||
|
BackgroundObj: {
|
||||||
|
type: 1,
|
||||||
|
bgColor: "#ffffff",
|
||||||
|
pathColor: "#f8f8f8",
|
||||||
|
path: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
PageNav: {
|
||||||
|
window: {
|
||||||
|
navigationBarBackgroundColor: "#ffffff",
|
||||||
|
navigationBarTextStyle: "black",
|
||||||
|
navigationBarTitleText: "",
|
||||||
|
backgroundColor: "#f8f8f8",
|
||||||
|
backgroundTextStyle: "dark",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
shareImg: "",
|
||||||
|
ShareTitle: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: mapState([
|
||||||
|
"Config",
|
||||||
|
"StateCode",
|
||||||
|
"notice",
|
||||||
|
"plantformInfo",
|
||||||
|
"shopInfo",
|
||||||
|
"userInfo",
|
||||||
|
"hasLogin",
|
||||||
|
]),
|
||||||
|
components: {
|
||||||
|
diy,
|
||||||
|
statusBar,
|
||||||
|
uniNavBar,
|
||||||
|
guessYouLike,
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 生命周期函数--监听页面加载
|
||||||
|
*/
|
||||||
|
onLoad: function (options) {
|
||||||
|
var that = this;
|
||||||
|
|
||||||
import guessYouLike from '@/components/guess-you-like.vue'
|
if (options.scene) {
|
||||||
|
var scene = decodeURIComponent(options.scene);
|
||||||
|
var opts = {};
|
||||||
|
|
||||||
import {
|
opts = that.$.parse_str(scene);
|
||||||
mapState,
|
|
||||||
mapMutations
|
|
||||||
} from 'vuex'
|
|
||||||
|
|
||||||
export default {
|
options = Object.assign(options, opts);
|
||||||
/**
|
}
|
||||||
* 页面的初始数据
|
|
||||||
*/
|
|
||||||
data: function() {
|
|
||||||
return {
|
|
||||||
options:{},
|
|
||||||
pageId: '',
|
|
||||||
loadPageFlag: false,
|
|
||||||
PageContent: [],
|
|
||||||
BgConfig: {BackgroundObj:{type:1, bgColor:'#ffffff' ,"pathColor":"#f8f8f8","path":""}},
|
|
||||||
PageNav:{window:{"navigationBarBackgroundColor":"#ffffff","navigationBarTextStyle":"black","navigationBarTitleText":"","backgroundColor":"#f8f8f8","backgroundTextStyle":"dark"}},
|
|
||||||
shareImg: "",
|
|
||||||
ShareTitle: ""
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
|
||||||
components: {
|
|
||||||
diy,
|
|
||||||
statusBar,
|
|
||||||
uniNavBar,
|
|
||||||
bwSwiper,
|
|
||||||
guessYouLike
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 生命周期函数--监听页面加载
|
|
||||||
*/
|
|
||||||
onLoad: function(options) {
|
|
||||||
var that = this;
|
|
||||||
|
|
||||||
if (options.scene) {
|
that.setData({
|
||||||
var scene = decodeURIComponent(options.scene);
|
options: options,
|
||||||
var opts = {};
|
});
|
||||||
|
|
||||||
opts = that.$.parse_str(scene);
|
that.initData(false);
|
||||||
|
},
|
||||||
|
|
||||||
options = Object.assign(options, opts);
|
/**
|
||||||
}
|
* 页面相关事件处理函数--监听用户下拉动作
|
||||||
|
*/
|
||||||
|
onPullDownRefresh: function () {
|
||||||
|
this.initData(true);
|
||||||
|
},
|
||||||
|
|
||||||
that.setData({
|
/**
|
||||||
options: options
|
* 页面上拉触底事件的处理函数
|
||||||
})
|
*/
|
||||||
|
onReachBottom: function () {
|
||||||
|
this.$refs.guessYouLike.scrollbottom();
|
||||||
|
},
|
||||||
|
|
||||||
that.initData(false);
|
/**
|
||||||
},
|
* 用户点击右上角分享
|
||||||
|
*/
|
||||||
|
onShareAppMessage: function () {
|
||||||
|
return {
|
||||||
|
title: this.ShareTitle,
|
||||||
|
imageUrl: this.shareImg,
|
||||||
|
path: this.sprintf(
|
||||||
|
"/pagesub/product/tag?tag_id=%s&uid=%s",
|
||||||
|
this.options.tag_id,
|
||||||
|
this.userInfo.user_id
|
||||||
|
),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
methods: {
|
||||||
* 页面相关事件处理函数--监听用户下拉动作
|
...mapMutations([
|
||||||
*/
|
"login",
|
||||||
onPullDownRefresh: function() {
|
"logout",
|
||||||
this.initData(true)
|
"getPlantformInfo",
|
||||||
},
|
"forceUserInfo",
|
||||||
|
"getUserInfo",
|
||||||
|
"showCartNum",
|
||||||
|
]),
|
||||||
|
//读取diy内容
|
||||||
|
getDivModel: function (force_refresh) {
|
||||||
|
var that = this,
|
||||||
|
params = {};
|
||||||
|
|
||||||
/**
|
let site_id = that.$.getStorageSync("site_id");
|
||||||
* 页面上拉触底事件的处理函数
|
|
||||||
*/
|
|
||||||
onReachBottom: function() {
|
|
||||||
this.$refs.guessYouLike.scrollbottom();
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
if (site_id) {
|
||||||
* 用户点击右上角分享
|
params["site_id"] = site_id;
|
||||||
*/
|
}
|
||||||
onShareAppMessage: function() {
|
|
||||||
return {
|
|
||||||
title: this.ShareTitle,
|
|
||||||
imageUrl: this.shareImg,
|
|
||||||
path: this.sprintf("/pagesub/product/tag?tag_id=%s&uid=%s", this.options.tag_id, this.userInfo.user_id)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
that.$.request({
|
||||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo', 'showCartNum']),
|
url: that.Config.URL.index_app,
|
||||||
//读取diy内容
|
data: params,
|
||||||
getDivModel: function(force_refresh) {
|
ajaxCache: {
|
||||||
var that = this,
|
timeout: that.Config.CACHE_EXPIRE,
|
||||||
params = {};
|
forceRefresh: force_refresh,
|
||||||
|
},
|
||||||
|
success: function (data, status, msg, code) {
|
||||||
|
uni.stopPullDownRefresh();
|
||||||
|
that.setData({
|
||||||
|
loadPageFlag: true,
|
||||||
|
});
|
||||||
|
|
||||||
let site_id = that.$.getStorageSync('site_id');
|
that.setData({
|
||||||
|
pageId: data.page_id,
|
||||||
|
PageContent: that.$.parseJSON(data.page_code),
|
||||||
|
BgConfig: that.$.parseJSON(data.page_config),
|
||||||
|
PageNav: that.$.parseJSON(data.page_nav),
|
||||||
|
shareImg: data.page_share_image,
|
||||||
|
ShareTitle: data.page_share_title,
|
||||||
|
});
|
||||||
|
|
||||||
if (site_id)
|
// #ifndef APP-PLUS
|
||||||
{
|
that.$.setNavigationBarColor({
|
||||||
params['site_id'] = site_id;
|
frontColor:
|
||||||
}
|
that.PageNav.window.navigationBarTextStyle == "white"
|
||||||
|
? "#ffffff"
|
||||||
|
: "#000000",
|
||||||
|
backgroundColor: that.PageNav.window.navigationBarBackgroundColor,
|
||||||
|
});
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
if (data.page_name) {
|
||||||
|
that.$.setNavigationBarTitle({
|
||||||
|
title: data.page_name,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
that.$.request({
|
//
|
||||||
url: that.Config.URL.index_app,
|
let $title = data.page_name;
|
||||||
data: params,
|
let $desc = "";
|
||||||
ajaxCache: {
|
let $link = that.$.sprintf(
|
||||||
timeout: that.Config.CACHE_EXPIRE,
|
"%s/h5/pagesub/product/tag?tag_id=%s&uid=%s",
|
||||||
forceRefresh: force_refresh
|
that.Config.SiteUrl,
|
||||||
},
|
that.options.tag_id,
|
||||||
success: function(data, status, msg, code) {
|
that.userInfo.user_id
|
||||||
uni.stopPullDownRefresh()
|
);
|
||||||
that.setData({
|
let $img_url = that.shareImg;
|
||||||
loadPageFlag: true
|
|
||||||
});
|
|
||||||
|
|
||||||
that.setData({
|
//初始化微信分享
|
||||||
pageId: data.page_id,
|
that.$.wxShare($title, $desc, $link, $img_url);
|
||||||
PageContent: that.$.parseJSON(data.page_code),
|
},
|
||||||
BgConfig: that.$.parseJSON(data.page_config),
|
});
|
||||||
PageNav: that.$.parseJSON(data.page_nav),
|
},
|
||||||
shareImg: data.page_share_image,
|
|
||||||
ShareTitle: data.page_share_title
|
|
||||||
});
|
|
||||||
|
|
||||||
// #ifndef APP-PLUS
|
//初始化数据
|
||||||
that.$.setNavigationBarColor({
|
initData: function (force_refresh) {
|
||||||
frontColor: that.PageNav.window.navigationBarTextStyle == 'white'
|
var that = this;
|
||||||
? '#ffffff'
|
var param = {};
|
||||||
: '#000000',
|
|
||||||
backgroundColor: that.PageNav.window.navigationBarBackgroundColor
|
|
||||||
});
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
if (data.page_name)
|
that.getDivModel(force_refresh);
|
||||||
{
|
},
|
||||||
that.$.setNavigationBarTitle({
|
|
||||||
title: data.page_name
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
search() {
|
||||||
let $title = data.page_name;
|
uni.showToast({
|
||||||
let $desc = '';
|
title: "搜索",
|
||||||
let $link = that.$.sprintf("%s/h5/pagesub/product/tag?tag_id=%s&uid=%s", that.Config.SiteUrl, that.options.tag_id, that.userInfo.user_id);
|
});
|
||||||
let $img_url = that.shareImg;
|
},
|
||||||
|
onSearch(e) {
|
||||||
//初始化微信分享
|
let that = this;
|
||||||
that.$.wxShare($title, $desc, $link, $img_url)
|
that.$.gopage("/pagesub/search/search");
|
||||||
}
|
},
|
||||||
});
|
},
|
||||||
},
|
};
|
||||||
|
|
||||||
//初始化数据
|
|
||||||
initData: function(force_refresh) {
|
|
||||||
var that = this;
|
|
||||||
var param = {};
|
|
||||||
|
|
||||||
that.getDivModel(force_refresh)
|
|
||||||
},
|
|
||||||
|
|
||||||
search() {
|
|
||||||
uni.showToast({
|
|
||||||
title: '搜索'
|
|
||||||
})
|
|
||||||
},
|
|
||||||
onSearch(e) {
|
|
||||||
let that = this;
|
|
||||||
that.$.gopage("/pagesub/search/search");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
1824
seller/user/cart.vue
1824
seller/user/cart.vue
File diff suppressed because it is too large
Load Diff
BIN
static/iconfont.ttf
Normal file
BIN
static/iconfont.ttf
Normal file
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
BIN
static/images/marker.png
Normal file
BIN
static/images/marker.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
BIN
static/images/sele2.png
Normal file
BIN
static/images/sele2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
45
styles/iconfontAili.css
Normal file
45
styles/iconfontAili.css
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: "iconfontAili"; /* Project id 4752539 */
|
||||||
|
src: url('/static/iconfont.ttf?t=1733159098566') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfontAili {
|
||||||
|
font-family: "iconfontAili" !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-zengjiatianjiajiahao:before {
|
||||||
|
content: "\e62a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-top:before {
|
||||||
|
content: "\e663";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-xiala:before {
|
||||||
|
content: "\e6b9";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-dingwei1:before {
|
||||||
|
content: "\e609";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-dianpu:before {
|
||||||
|
content: "\e61b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-zhongxindingwei:before {
|
||||||
|
content: "\e644";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-right:before {
|
||||||
|
content: "\e7eb";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-dingwei:before {
|
||||||
|
content: "\e65f";
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user