Compare commits
5 Commits
cd4fcc7416
...
3a33d65d6b
| Author | SHA1 | Date |
|---|---|---|
 Boom
|
3a33d65d6b | 1 year ago |
|
Boom
|
7f4aecb936 | 1 year ago |
hupeng
|
3e08136bfa | 1 year ago |
|
hupeng
|
829fb79e21 | 1 year ago |
|
guchengwuyue
|
f76e2c7519 | 2 years ago |
48 changed files with 3045 additions and 918 deletions
@ -0,0 +1,13 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
export function getFishIndex(param) { |
||||
return request.post("/fish/index", param, { |
||||
login: false |
||||
}); |
||||
} |
||||
|
||||
export function getFishPlaceInfo(id) { |
||||
return request.get("/fish/info?id="+id,null,{ |
||||
login: false |
||||
}) |
||||
} |
||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,389 @@
|
||||
<template> |
||||
<view class="good_detail_page" v-show="data.goodsImageUrl"> |
||||
<view class="current_goods"> |
||||
<img class="main_img" :src="data.goodsImageUrl" /> |
||||
<view class="current_goods_text"> |
||||
<text class="goods_title">{{data.goodsDesc}}</text> |
||||
<view class="price"> |
||||
<text>￥{{(data.minGroupPrice - data.couponDiscount) / 100 }} |
||||
<text class="yuanjia">团购价￥{{data.minGroupPrice/100}} |
||||
原价￥{{data.minNormalPrice/100}}</text></text> |
||||
</view> |
||||
|
||||
<view class="biaoqian"> |
||||
<text v-for="(item,index) in data.unifiedTags" :key="index" class="biaoqian_text" v-if="item">{{item}}</text> |
||||
</view> |
||||
|
||||
<view class="goods_dp"> |
||||
<image class="goodsa_dp_img" :src="data.mallImgUrl" mode="aspectFit"></image> |
||||
<view class="goodsa_dp_name"> |
||||
<view>{{data.goodsName}}</view> |
||||
<view class="hot">已拼{{data.salesTip}}件</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view v-for="(item,index) in data.goodsGalleryUrls" :key="index"> |
||||
<image class="current_imgs" :src="item" mode="aspectFill"></image> |
||||
</view> |
||||
</view> |
||||
<view type="warn" class="buy_btn"> |
||||
<view class="topbtn" @click="toTop()">↑TOP</view> |
||||
<view class="price"> |
||||
<view><text class="juanhou">券后</text> |
||||
￥{{(data.minGroupPrice - data.couponDiscount) / 100 }}</view> |
||||
<view class="yuanjia">原价￥{{data.minNormalPrice/100}} 团购价￥{{data.minGroupPrice/100}} |
||||
券￥{{data.couponDiscount/100}}</view> |
||||
<button @click="buy" type="warn" class="btn">领劵购买</button> |
||||
</view> |
||||
</view> |
||||
<!-- #ifdef APP --> |
||||
<view class="fenxiang" @click="fenxiang()">分享</view> |
||||
<!-- #endif --> |
||||
<view class="tuijian_list"> |
||||
<view class="tuijian_title">为您推荐</view> |
||||
<scroll-view style="width: 100%;height: 100%;" scroll-y="true" @scrolltolower="getList()"> |
||||
<view class="tuijian_item" v-for="(item,index) in list" :key="index"> |
||||
<good :data="item" :search_id="item.search_id" :pid="pid"></good> |
||||
</view> |
||||
<uni-load-more :status="moreStatus" color="#FE5353"></uni-load-more> |
||||
</scroll-view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import good from './good_com/good.vue' |
||||
import { pddDetail,pddLink } from '@/api/store' |
||||
import fenxiang from './utils/share.js' |
||||
export default { |
||||
components: { |
||||
good |
||||
}, |
||||
|
||||
data() { |
||||
return { |
||||
goodSign:"", |
||||
hasLogin: true, |
||||
data: {}, |
||||
id: '', |
||||
list: [], |
||||
page: 1, |
||||
moreStatus: '', |
||||
search_id: '', |
||||
pid: '' |
||||
}; |
||||
}, |
||||
computed: { |
||||
price() { |
||||
if (!this.data) { |
||||
return; |
||||
} |
||||
if (this.data.coupon_discount && this.data.min_group_price) { |
||||
return (this.data.min_group_price - this.data.coupon_discount) / 100 |
||||
} |
||||
return this.data.min_group_price / 100 || '' |
||||
} |
||||
}, |
||||
// #ifdef APP |
||||
onBackPress({ |
||||
from |
||||
}) { |
||||
if (from == 'backbutton') { |
||||
this.$nextTick(function() { |
||||
uniShare.hide() |
||||
}) |
||||
return uniShare.isShow; |
||||
} |
||||
}, |
||||
// #endif |
||||
|
||||
onReachBottom() { |
||||
if (this.moreStatus != 'nomore') { |
||||
this.getList() |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.goodSign = this._route.query.goodSign; |
||||
this.getData(); |
||||
}, |
||||
methods: { |
||||
async buy() { |
||||
pddLink(this.goodSign).then(res=>{ |
||||
|
||||
uni.navigateToMiniProgram({ |
||||
appId: res.data.weAppInfo.appId, |
||||
path: res.data.weAppInfo.pagePath |
||||
}) |
||||
}) |
||||
|
||||
|
||||
|
||||
}, |
||||
doWeb() { |
||||
pddApi.promotion_url_generate(this.data.goods_sign, this.pid, this.search_id).then( |
||||
res => { |
||||
let data = res.data.goods_promotion_url_generate_response |
||||
.goods_promotion_url_list[0] |
||||
console.log('普通链接：', data) |
||||
uni.setStorageSync('webUrl', data.mobile_url) |
||||
// #ifndef MP |
||||
uni.navigateTo({ |
||||
url: '/uni_modules/aliea-goods/pages/webview/webview' |
||||
}) |
||||
// #endif |
||||
|
||||
// #ifdef MP |
||||
uni.navigateToMiniProgram({ |
||||
appId: data.we_app_info.app_id, |
||||
path: data.we_app_info.page_path |
||||
}) |
||||
// #endif |
||||
}) |
||||
}, |
||||
getData() { |
||||
pddDetail(this.goodSign).then(res=>{ |
||||
console.log(res); |
||||
this.data = res.data; |
||||
// this.getList(); |
||||
uni.setNavigationBarTitle({ |
||||
title: this.data.goodsDesc |
||||
}) |
||||
this.toTop() |
||||
}) |
||||
|
||||
}, |
||||
getList() { |
||||
this.moreStatus = 'loading' |
||||
pddApi.goodsRecommend(this.data.cat_ids[0], this.id, this.pid, this.list.length).then(res => { |
||||
res.data.goods_basic_detail_response.list.forEach((item, index) => { |
||||
item.search_id = res.data.goods_basic_detail_response.search_id |
||||
this.list.push(item) |
||||
}) |
||||
if (this.list.length == 0) { |
||||
this.moreStatus = 'nomore' |
||||
} else { |
||||
this.moreStatus = 'more' |
||||
} |
||||
}).catch(err => { |
||||
this.moreStatus = 'error' |
||||
}) |
||||
}, |
||||
|
||||
toTop() { |
||||
uni.pageScrollTo({ |
||||
duration: 0, |
||||
scrollTop: 0 |
||||
}) |
||||
}, |
||||
async fenxiang() { |
||||
//#ifdef APP |
||||
let url = "/#/uni_modules/aliea-goods/pages/goods/goodDetail?id=" + this.id + |
||||
"&search_id=" + this.search_id |
||||
if (this.pid) { |
||||
url += '&p_id=' + this.pid |
||||
} |
||||
|
||||
fenxiang(this.data.mall_name, url, this.data.goods_desc, this.data.goods_thumbnail_url) |
||||
//#endif |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.good_detail_page { |
||||
width: 100%; |
||||
height: auto; |
||||
background-color: antiquewhite; |
||||
|
||||
.fenxiang { |
||||
position: fixed; |
||||
display: flex; |
||||
flex-direction: column; |
||||
right: 15rpx; |
||||
bottom: 270rpx; |
||||
width: 60rpx; |
||||
line-height: 60rpx; |
||||
background-color: #ff5500; |
||||
border-radius: 50%; |
||||
z-index: 1000; |
||||
border: #55aa00 10rpx dashed; |
||||
color: #ffffff; |
||||
padding: 15rpx; |
||||
text-align: center; |
||||
font-size: 28rpx; |
||||
|
||||
} |
||||
|
||||
.current_goods { |
||||
width: 100%; |
||||
background-color: antiquewhite; |
||||
display: block; |
||||
|
||||
.main_img { |
||||
width: 100%; |
||||
} |
||||
|
||||
.current_imgs { |
||||
width: 750rpx; |
||||
height: 750rpx; |
||||
margin: 10rpx 0rpx; |
||||
} |
||||
|
||||
.current_goods_text { |
||||
// border: #ccc 1px solid; |
||||
margin: 30rpx; |
||||
padding: 30rpx; |
||||
border-radius: 20rpx; |
||||
background-color: #fff; |
||||
|
||||
.price { |
||||
position: relative; |
||||
margin: 20rpx 0; |
||||
font-size: 60rpx; |
||||
font-weight: 600; |
||||
color: red; |
||||
|
||||
.yuanjia { |
||||
margin-left: 20rpx; |
||||
text-decoration: line-through; |
||||
font-size: 28rpx; |
||||
color: #868686; |
||||
font-weight: normal; |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
.biaoqian { |
||||
|
||||
position: relative; |
||||
|
||||
.biaoqian_text { |
||||
display: inline-block; |
||||
background-color: #ff5500; |
||||
padding: 10rpx; |
||||
margin: 5rpx; |
||||
color: #fff; |
||||
border-radius: 15rpx; |
||||
line-height: 35rpx; |
||||
font-size: 28rpx; |
||||
} |
||||
} |
||||
|
||||
.goods_title { |
||||
margin-bottom: 20rpx; |
||||
line-height: 40rpx; |
||||
font-weight: bold; |
||||
font-size: 30rpx; |
||||
} |
||||
|
||||
.goods_dp { |
||||
width: 100%; |
||||
margin-top: 30rpx; |
||||
font-size: 28rpx; |
||||
font-weight: bold; |
||||
|
||||
.goodsa_dp_img { |
||||
width: 100rpx; |
||||
height: 100rpx; |
||||
vertical-align: top; |
||||
margin-right: 10rpx; |
||||
} |
||||
|
||||
.goodsa_dp_name { |
||||
display: inline-block; |
||||
line-height: 50rpx; |
||||
font-size: 26rpx; |
||||
|
||||
.hot { |
||||
color: #ff0000; |
||||
font-weight: bold; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
} |
||||
|
||||
.buy_btn { |
||||
|
||||
position: fixed; |
||||
background-color: #ff634e; |
||||
text-align: center; |
||||
z-index: 10; |
||||
width: 750rpx; |
||||
height: 230rpx; |
||||
bottom: 0; |
||||
color: #fff; |
||||
padding: 30rpx; |
||||
|
||||
.topbtn { |
||||
position: absolute; |
||||
right: 40rpx; |
||||
top: 0rpx; |
||||
width: 100rpx; |
||||
height: 45rpx; |
||||
background-color: #e20000; |
||||
font-size: 28rpx; |
||||
padding: 0; |
||||
line-height: 45rpx; |
||||
color: #fff; |
||||
} |
||||
|
||||
.price { |
||||
color: #fff; |
||||
font-size: 45rpx; |
||||
|
||||
.btn { |
||||
width: 250rpx; |
||||
line-height: 60rpx; |
||||
border: #efefef 1px solid; |
||||
border-radius: 20rpx; |
||||
background-color: #ec0000; |
||||
font-size: 38rpx; |
||||
} |
||||
|
||||
.juanhou { |
||||
color: #fff; |
||||
font-size: 26rpx; |
||||
} |
||||
|
||||
.yuanjia { |
||||
margin-left: 20rpx; |
||||
font-size: 26rpx; |
||||
color: #e7e7e7; |
||||
font-weight: normal; |
||||
margin: 10rpx auto; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.tuijian_list { |
||||
margin-top: 20rpx; |
||||
width: 100%; |
||||
height: 100%; |
||||
|
||||
.tuijian_title { |
||||
width: 100%; |
||||
line-height: 40rpx; |
||||
background-color: #fff; |
||||
padding: 20rpx; |
||||
margin-bottom: 20rpx; |
||||
font-size: 30rpx; |
||||
font-weight: bold; |
||||
border-top: #cfcfcf 1px solid; |
||||
border-bottom: #cfcfcf 1px solid; |
||||
} |
||||
|
||||
.tuijian_item { |
||||
display: inline-block; |
||||
width: 355rpx; |
||||
margin: 10rpx; |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
</style> |
||||
@ -0,0 +1,173 @@
|
||||
<template> |
||||
<view class="content"> |
||||
<search_bar @toPage="toList"></search_bar> |
||||
<view class="paixu"> |
||||
<view class="select"> |
||||
<picker mode="selector" :value="sort_type" :range="sort_list" range-key="text" @change="paixu"> |
||||
<view>{{sort_text}}</view> |
||||
</picker> |
||||
</view> |
||||
</view> |
||||
<view class="paixuzw"></view> |
||||
<view class="list_item" v-for="(item,index) in list.obj" :key="index"> |
||||
<good :search_id="search_id" :data="item" :pid="pid"></good> |
||||
</view> |
||||
<uni-load-more :status="list.moreStatus" color="#FE5353"></uni-load-more> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import good from './good_com/good.vue' |
||||
import search_bar from './good_com/search_bar.vue' |
||||
|
||||
import { |
||||
checkAuthority |
||||
} from './utils/util.js' |
||||
|
||||
const pddApi = uniCloud.importObject('pdd-serve') |
||||
|
||||
export default { |
||||
components: { |
||||
good, |
||||
search_bar |
||||
}, |
||||
onLoad(options) { |
||||
this.key_word = options.key_word; |
||||
this.pid = options.p_id |
||||
uni.setNavigationBarTitle({ |
||||
title: options.key_word |
||||
}) |
||||
this.search_key(); |
||||
}, |
||||
data() { |
||||
return { |
||||
list: { |
||||
obj: [], |
||||
page: 1, |
||||
pageSize: 20, |
||||
moreStatus: 'more' |
||||
}, |
||||
pid: '', |
||||
search_id: '', |
||||
list_id: '', |
||||
sort_text: '排序', |
||||
sort_type: 0, |
||||
sort_list: [{ |
||||
id: 0, |
||||
text: "综合排序" |
||||
}, { |
||||
id: 3, |
||||
text: "价格由低到高" |
||||
}, { |
||||
id: 9, |
||||
text: "券后价由低到高" |
||||
}, { |
||||
id: 10, |
||||
text: "券后价由高到低" |
||||
}, { |
||||
id: 6, |
||||
text: "销量由高到低" |
||||
}, { |
||||
id: 8, |
||||
text: "优惠券金额由高到低" |
||||
}] |
||||
|
||||
}; |
||||
}, |
||||
onReachBottom() { |
||||
if (this.list.moreStatus != 'noMore') { |
||||
this.list.page++ |
||||
this.loadData() |
||||
} |
||||
}, |
||||
methods: { |
||||
paixu(e) { |
||||
this.list.obj = [] |
||||
this.list.page = 1 |
||||
this.list.moreStatus = 'more' |
||||
this.sort_type = this.sort_list[e.detail.value].id |
||||
this.sort_text = this.sort_list[e.detail.value].text |
||||
this.loadData() |
||||
}, |
||||
search_key() { |
||||
checkAuthority(this.pid).then(res => { |
||||
if (res.mobile_url) { |
||||
uni.setStorageSync('webUrl', res.mobile_url) |
||||
// #ifndef MP |
||||
uni.navigateTo({ |
||||
url: '/uni_modules/aliea-goods/pages/webview/webview' |
||||
}) |
||||
// #endif |
||||
|
||||
// #ifdef MP |
||||
uni.navigateToMiniProgram({ |
||||
appId: data.we_app_info.app_id, |
||||
path: data.we_app_info.page_path |
||||
}) |
||||
// #endif |
||||
} else { |
||||
this.loadData() |
||||
} |
||||
}) |
||||
}, |
||||
loadData() { |
||||
this.list.moreStatus = 'loading' |
||||
pddApi.goodsSearch(this.key_word, this.list_id, '', this.pid, this.list.page, this.list.pageSize, this |
||||
.sort_type) |
||||
.then(( |
||||
res) => { |
||||
let list = res.data.goods_search_response.goods_list |
||||
this.search_id = res.data.goods_search_response.search_id |
||||
this.list_id = res.data.goods_search_response.list_id |
||||
if (list.length == 0) { |
||||
this.list.moreStatus = 'noMore' |
||||
} |
||||
this.list.obj = this.list.obj.concat(list); |
||||
}) |
||||
}, |
||||
toList(e) { |
||||
let url = '/uni_modules/aliea-goods/pages/goods/goodList?key_word=' + e.keyword |
||||
if (this.pid) { |
||||
url += '&p_id=' + this.pid |
||||
} |
||||
uni.redirectTo({ |
||||
url: url |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.content { |
||||
width: 100%; |
||||
background-color: antiquewhite; |
||||
|
||||
.paixu { |
||||
position: fixed; |
||||
width: 100%; |
||||
background-color: rgb(250 235 208); |
||||
border-bottom: #dfdfdf 5rpx solid; |
||||
z-index: 100; |
||||
|
||||
.select { |
||||
display: inline-block; |
||||
width: 100%; |
||||
line-height: 70rpx; |
||||
color: #f80000; |
||||
padding-left: 20rpx; |
||||
} |
||||
} |
||||
|
||||
.paixuzw { |
||||
width: 100%; |
||||
height: 70rpx; |
||||
} |
||||
|
||||
.list_item { |
||||
width: 335rpx; |
||||
display: inline-block; |
||||
margin: 20rpx 15rpx; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,159 @@
|
||||
<template> |
||||
<view class="goods_page"> |
||||
<view class="goods_item" @click="detail"> |
||||
<image mode="aspectFit" class="goods_img" :src="data.goods_thumbnail_url"></image> |
||||
<view class="good_group_text"> |
||||
<text class="goods_title">{{data.goods_name}}</text> |
||||
<view class="goods_description"> |
||||
<view class="juanjia"> |
||||
<text class="juanjia_title">领劵免拼</text> |
||||
<text class="juanjia_price">￥{{priceFormat(data.min_group_price-data.coupon_discount)}}</text> |
||||
</view> |
||||
<view class="yuanjia">原价￥{{priceFormat(data.min_normal_price)}}</view> |
||||
<view class="tuanjia">团购￥{{priceFormat(data.min_group_price)}}</view> |
||||
<view class="youhui" v-if="data.has_coupon">{{data.coupon_discount/100}}元卷</view> |
||||
<view class="yishou">已售{{data.sales_tip}}</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
|
||||
}; |
||||
}, |
||||
computed: { |
||||
|
||||
}, |
||||
props: { |
||||
data: { |
||||
type: Object, |
||||
default: () => { |
||||
return {} |
||||
} |
||||
}, |
||||
search_id: { |
||||
type: String, |
||||
default: () => { |
||||
return "" |
||||
} |
||||
}, |
||||
pid: { |
||||
type: [String], |
||||
default: () => { |
||||
return "" |
||||
} |
||||
} |
||||
}, |
||||
methods: { |
||||
detail() { |
||||
let url = '/uni_modules/aliea-goods/pages/goods/goodDetail?id=' + this.data.goods_sign + |
||||
'&search_id=' + this.search_id |
||||
if (this.pid) { |
||||
url += '&p_id=' + this.pid |
||||
} |
||||
uni.navigateTo({ |
||||
url: url |
||||
}) |
||||
}, |
||||
priceFormat(price) { |
||||
let sj = price / 100 |
||||
if (sj > 100) { |
||||
sj = Math.floor(sj) |
||||
} |
||||
return sj |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.goods_page { |
||||
width: 355rpx; |
||||
|
||||
|
||||
.goods_item { |
||||
width: 355rpx; |
||||
border-radius: 15rpx; |
||||
background-color: #fff; |
||||
padding: 10rpx 0; |
||||
|
||||
.goods_img { |
||||
display: block; |
||||
width: 335rpx; |
||||
height: 335rpx; |
||||
border-radius: 15rpx; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.good_group_text { |
||||
padding: 0 10rpx; |
||||
|
||||
|
||||
.goods_title { |
||||
display: block; |
||||
font-size: 30rpx; |
||||
overflow: hidden; |
||||
margin: 20rpx 0; |
||||
height: 120rpx; |
||||
} |
||||
|
||||
.goods_description { |
||||
line-height: 38rpx; |
||||
font-size: 26rpx; |
||||
|
||||
.yuanjia { |
||||
text-decoration: line-through; |
||||
color: #999; |
||||
width: 50%; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.tuanjia { |
||||
text-decoration: line-through; |
||||
width: 50%; |
||||
display: inline-block; |
||||
text-align: right; |
||||
} |
||||
|
||||
.juanjia { |
||||
color: red; |
||||
font-weight: bold; |
||||
position: relative; |
||||
|
||||
.juanjia_title { |
||||
font-size: 26rpx; |
||||
text-align: justify; |
||||
} |
||||
|
||||
.juanjia_price { |
||||
font-size: 45rpx; |
||||
position: absolute; |
||||
right: 10rpx; |
||||
top: -10rpx; |
||||
} |
||||
} |
||||
|
||||
.yishou { |
||||
color: #999; |
||||
width: 50%; |
||||
display: inline-block; |
||||
text-align: right; |
||||
} |
||||
|
||||
.youhui { |
||||
width: 50%; |
||||
display: inline-block; |
||||
color: #ff5500; |
||||
height: 40rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,207 @@
|
||||
<template> |
||||
<view class="search_page"> |
||||
<view class="search_bar"> |
||||
<view v-if="backTag" class="back_icon" @click="back"> |
||||
<uni-icons color="#ffffff" size="26" type="back"></uni-icons> |
||||
</view> |
||||
<view class="search_bar_view"> |
||||
<uni-search-bar @focus="getData" cancelButton="none" v-model="content" @confirm="confirm" /> |
||||
<!-- <button class="h5_btm" type="default" @click="confirm(content)">搜</button> --> |
||||
</view> |
||||
</view> |
||||
<view class="searchzw"></view> |
||||
<view class="search_result" v-if="lishi"> |
||||
<view class="search-title">搜索历史 |
||||
<text v-if="!close" class="edit" @click="edit">编辑</text> |
||||
<text v-else class="edit" @click="edit">取消编辑</text> |
||||
</view> |
||||
<view class="search_text" v-for="(item,index) in searchData" :key="index"> |
||||
<view v-if="close">{{item}} |
||||
<uni-icons @click="clearHis(index)" size="20" class="search_close" type="close"> |
||||
</uni-icons> |
||||
</view> |
||||
<view v-else @click="confirms(item)"> |
||||
{{item}} |
||||
</view> |
||||
</view> |
||||
<view class="guanbi" @click="closeLishi()">关闭</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'search_bar', |
||||
data() { |
||||
return { |
||||
content: '', |
||||
searchData: {}, |
||||
close: false, |
||||
closeText: "编辑", |
||||
lishi: false, |
||||
}; |
||||
}, |
||||
computed: { |
||||
backTag() { |
||||
return getCurrentPages().length > 1 && uni.getSystemInfoSync().uniPlatform=="app" |
||||
} |
||||
}, |
||||
created() { |
||||
this.content = this.getSearchData()[0] |
||||
}, |
||||
methods: { |
||||
confirm(content) { |
||||
this.confirms(content.value) |
||||
}, |
||||
confirms(content) { |
||||
this.content = content |
||||
if (!this.content) return; |
||||
this.clearHis(this.searchData.indexOf(this.content)) |
||||
this.searchData = this.setSearchData(this.content) |
||||
this.closeLishi() |
||||
this.$emit("toPage", { |
||||
keyword: this.content |
||||
}) |
||||
}, |
||||
getData() { |
||||
this.lishi = true |
||||
this.searchData = this.getSearchData() |
||||
}, |
||||
closeLishi() { |
||||
this.lishi = false |
||||
this.close = false |
||||
}, |
||||
back() { |
||||
uni.navigateBack() |
||||
}, |
||||
edit() { |
||||
this.close = !this.close |
||||
if (this.close) { |
||||
this.closeText = "取消编辑" |
||||
} else { |
||||
this.closeText = "编辑" |
||||
} |
||||
}, |
||||
clearHis(index) { |
||||
if (index < 0) return |
||||
this.searchData.splice(index, 1) |
||||
this.setSearchData(this.searchData) |
||||
}, |
||||
setSearchData(content) { |
||||
let searchHistory = uni.getStorageSync('searchHistory') |
||||
if (typeof searchHistory != "object") { |
||||
searchHistory = [] |
||||
} |
||||
if (typeof content == "string") { |
||||
if (searchHistory.indexOf(content) == -1) { |
||||
searchHistory.unshift(content) |
||||
} |
||||
} else if (typeof content == "object") { |
||||
searchHistory = content |
||||
} |
||||
uni.setStorageSync('searchHistory', searchHistory) |
||||
return searchHistory |
||||
}, |
||||
getSearchData() { |
||||
let searchHistory = uni.getStorageSync('searchHistory') |
||||
if (typeof searchHistory != "object") { |
||||
searchHistory = [] |
||||
} |
||||
return searchHistory |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.search_page { |
||||
|
||||
width: 100%; |
||||
position: relative; |
||||
|
||||
.search_bar { |
||||
position: fixed; |
||||
width: 100%; |
||||
padding-top: var(--status-bar-height); |
||||
background-color: #ff5500; |
||||
height: 115rpx; |
||||
line-height: 80rpx; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
z-index: 100; |
||||
|
||||
.back_icon { |
||||
|
||||
width: 70rpx; |
||||
text-align: right; |
||||
z-index: 100; |
||||
} |
||||
|
||||
.search_bar_view { |
||||
flex: 1; |
||||
position: relative; |
||||
|
||||
} |
||||
} |
||||
|
||||
.searchzw { |
||||
padding-top: var(--status-bar-height); |
||||
width: 100%; |
||||
height: 115rpx; |
||||
|
||||
} |
||||
|
||||
//#ifdef APP |
||||
//#endif |
||||
.search_result { |
||||
width: 710rpx; |
||||
padding: 20rpx; |
||||
line-height: 40rpx; |
||||
background-color: #f8f8f8; |
||||
border: #efefef 1px solid; |
||||
position: absolute; |
||||
top: 110rpx+var(--status-bar-height); |
||||
z-index: 200; |
||||
|
||||
|
||||
|
||||
.search-title { |
||||
font-weight: bold; |
||||
color: #666; |
||||
line-height: 80rpx; |
||||
|
||||
.edit { |
||||
position: absolute; |
||||
right: 20rpx; |
||||
display: inline-block; |
||||
text-align: right; |
||||
font-weight: normal; |
||||
color: #55aaff; |
||||
} |
||||
} |
||||
|
||||
.search_text { |
||||
background-color: #f0f0f0; |
||||
padding: 10rpx 20rpx; |
||||
display: inline-block; |
||||
margin: 10rpx 15rpx; |
||||
border-radius: 10rpx; |
||||
position: relative; |
||||
|
||||
.search_close { |
||||
position: absolute; |
||||
right: -15rpx; |
||||
top: -10rpx |
||||
} |
||||
} |
||||
|
||||
.guanbi { |
||||
width: 100rpx; |
||||
margin: 20rpx auto 0rpx auto; |
||||
color: #e3e3e3; |
||||
text-align: center; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,79 @@
|
||||
<template> |
||||
<view class="content"> |
||||
<scroll-view class="scroll" :scroll-into-view="'scroll_view_id_'+(tabIndex-1)" scroll-x="true" |
||||
show-scrollbar="false"> |
||||
|
||||
<div class="scroll_view" :id="'scroll_view_id_'+index" @click="tabClick(index)" |
||||
v-for="(item,index) in tabList" :key="index"> |
||||
<text class="tabText" :style="{ |
||||
color:tabIndex===index?activeColor:noActiveColor, |
||||
fontWeight:tabIndex===index?'bold':'normal',}">{{item.name}}</text> |
||||
<view class="active_line" |
||||
:style="tabIndex===index?'background-color:'+activeColor:'background-color:#ffffff;'"></view> |
||||
</div> |
||||
</scroll-view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return {}; |
||||
}, |
||||
props: { |
||||
activeColor: { |
||||
type: String, |
||||
default: '#1596FE' |
||||
}, |
||||
noActiveColor: { |
||||
type: String, |
||||
default: '#333333' |
||||
}, |
||||
tabList: { |
||||
type: Array, |
||||
default: ()=>{ |
||||
return [] |
||||
} |
||||
}, |
||||
tabIndex: { |
||||
type: Number, |
||||
default: 0 |
||||
} |
||||
}, |
||||
methods: { |
||||
tabClick(index) { |
||||
if (this.tabIndex === index) return; |
||||
this.$emit("change", { |
||||
detail: { |
||||
current: index |
||||
} |
||||
}) |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" > |
||||
.content { |
||||
width: 100%; |
||||
|
||||
.scroll { |
||||
background-color: #efefef; |
||||
white-space: nowrap; |
||||
position: relative; |
||||
line-height: 70rpx; |
||||
.scroll_view { |
||||
display: inline-block; |
||||
padding: 10rpx 15rpx; |
||||
.tabText{ |
||||
line-height: 50rpx; |
||||
font-size: 35rpx; |
||||
} |
||||
.active_line{ |
||||
width: 100%; |
||||
height: 8rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,368 @@
|
||||
<template> |
||||
<view class="content_index"> |
||||
<search_bar @toPage="toList"></search_bar> |
||||
<view class="tabs"> |
||||
<tabs activeColor="#FE5353" :tabList="tabList" :tabIndex="swiperIndex" @change="swiperChange"></tabs> |
||||
</view> |
||||
<view class="swiper_view" :style="'height:'+screenHeight+'px'"> |
||||
<swiper :duration="1000" :current="swiperIndex" @change="swiperChange"> |
||||
<swiper-item> |
||||
<view class="goods_list"> |
||||
<scroll-view style="width: 100%;height: 100%;" scroll-y="true" @scrolltolower="loadData"> |
||||
<view class="menu_view"> |
||||
<div class="menu_view_item" @click="menu(item)" v-for="(item,index) in menus" |
||||
:key="index"> |
||||
<img class="menu_view_item_img" :src="item.imgUrl" /> |
||||
<text class="menu_view_item_text">{{item.name}}</text> |
||||
</div> |
||||
</view> |
||||
<view class="menu_view_title">实时热销榜</view> |
||||
<view class="goods_list_item" v-for="(item,index) in recommentList.obj" :key="index"> |
||||
<good :search_id="search_id" :data="item" :pid="pid"></good> |
||||
</view> |
||||
<uni-load-more :status="recommentList.moreStatus" color="#FE5353"></uni-load-more> |
||||
</scroll-view> |
||||
</view> |
||||
</swiper-item> |
||||
<swiper-item v-for="(ite,inde) in goodList" :key="inde"> |
||||
<view class="goods_list"> |
||||
<scroll-view style="width: 100%;height: 100%;" scroll-y="true" @scrolltolower="loadData"> |
||||
<view class="goods_list_item" v-for="(item,index) in ite.obj" :key="index"> |
||||
<good :search_id="search_id" :data="item" :pid="pid"></good> |
||||
</view> |
||||
<uni-load-more :status="ite.obj.moreStatus" color="#FE5353"></uni-load-more> |
||||
</scroll-view> |
||||
</view> |
||||
</swiper-item> |
||||
</swiper> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
<script> |
||||
import good from './good_com/good.vue' |
||||
import tabs from './good_com/tabs.vue' |
||||
import search_bar from './good_com/search_bar.vue' |
||||
|
||||
import { |
||||
checkAuthority |
||||
} from './utils/util.js' |
||||
|
||||
const pddApi = uniCloud.importObject('pdd-serve') |
||||
export default { |
||||
components: { |
||||
good, |
||||
tabs, |
||||
search_bar, |
||||
}, |
||||
data() { |
||||
return { |
||||
statusBarHeight: uni.getSystemInfoSync().statusBarHeight, |
||||
swiperIndex: 0, |
||||
PageScrollTop: 0, |
||||
screenHeight: 100, |
||||
search_id: '', |
||||
goodList: [], |
||||
recommentList: { |
||||
obj: [], |
||||
page: 1, |
||||
pageSize: 20, |
||||
moreStatus: '' |
||||
}, |
||||
pid: '', |
||||
tabList: [{ |
||||
id: '', |
||||
name: '推荐' |
||||
}, { |
||||
id: 1, |
||||
name: '食品' |
||||
}, |
||||
{ |
||||
id: 743, |
||||
name: '男装' |
||||
}, |
||||
{ |
||||
id: 14, |
||||
name: '女装' |
||||
}, |
||||
{ |
||||
id: 18, |
||||
name: '电器' |
||||
}, |
||||
{ |
||||
id: 1281, |
||||
name: '鞋包' |
||||
}, |
||||
{ |
||||
id: 1282, |
||||
name: '内衣' |
||||
}, |
||||
{ |
||||
id: 16, |
||||
name: '美妆' |
||||
}, |
||||
|
||||
{ |
||||
id: 13, |
||||
name: '水果' |
||||
}, |
||||
{ |
||||
id: 818, |
||||
name: '家纺' |
||||
}, |
||||
{ |
||||
id: 2478, |
||||
name: '文具' |
||||
}, |
||||
{ |
||||
id: 1451, |
||||
name: '运动' |
||||
}, |
||||
|
||||
{ |
||||
id: 15, |
||||
name: '百货' |
||||
}, |
||||
{ |
||||
id: 4, |
||||
name: '母婴' |
||||
}, |
||||
{ |
||||
id: 2048, |
||||
name: '汽车' |
||||
}, |
||||
{ |
||||
id: 1917, |
||||
name: '家装' |
||||
}, |
||||
{ |
||||
id: 2974, |
||||
name: '家具' |
||||
} |
||||
], |
||||
menus: [{ |
||||
imgUrl: 'static/ddk/image/miaosha.png', |
||||
name: '限时秒杀', |
||||
id: 4 |
||||
}, |
||||
{ |
||||
imgUrl: 'static/ddk/image/butie.png', |
||||
name: '百亿补贴', |
||||
id: 39996 |
||||
}, |
||||
{ |
||||
imgUrl: 'static/ddk/image/lingquan.png', |
||||
name: '领券中心', |
||||
id: 40000 |
||||
}, |
||||
{ |
||||
imgUrl: 'static/ddk/image/chongzhi.png', |
||||
name: '充值中心', |
||||
id: 39997 |
||||
}, |
||||
|
||||
] |
||||
} |
||||
}, |
||||
|
||||
onLoad(e) { |
||||
this.pid = e.p_id |
||||
this.initList(); |
||||
uni.getSystemInfo({ |
||||
success: res => { |
||||
this.screenHeight = res.screenHeight - uni.upx2px(220) //将px 转换rpx |
||||
} |
||||
}); |
||||
}, |
||||
watch: { |
||||
swiperIndex(val) { |
||||
if (val > 0) { |
||||
if (this.goodList[val - 1].obj.length == 0) { |
||||
this.goodList[val - 1].page = 1; |
||||
} |
||||
} else { |
||||
if (this.recommentList.obj.length == 0) { |
||||
this.recommentList.page = 1; |
||||
} |
||||
this.recommentList.page = 1; |
||||
} |
||||
this.loadData() |
||||
} |
||||
}, |
||||
methods: { |
||||
menu(item) { |
||||
checkAuthority(this.pid).then(res => { |
||||
if (res.mobile_url) { |
||||
uni.setStorageSync('webUrl', res.mobile_url) |
||||
// #ifndef MP |
||||
uni.navigateTo({ |
||||
url: '/uni_modules/aliea-goods/pages/webview/webview' |
||||
}) |
||||
// #endif |
||||
|
||||
// #ifdef MP |
||||
uni.navigateToMiniProgram({ |
||||
appId: data.we_app_info.app_id, |
||||
path: data.we_app_info.page_path |
||||
}) |
||||
// #endif |
||||
} else { |
||||
this.doMenu(item) |
||||
} |
||||
}) |
||||
}, |
||||
doMenu(item) { |
||||
pddApi.pindao_resource(item.id, this.pid).then(res => { |
||||
let data = res.data.resource_url_response |
||||
uni.setStorageSync('webUrl', data.single_url_list.mobile_url) |
||||
// #ifndef MP |
||||
uni.navigateTo({ |
||||
url: '/uni_modules/aliea-goods/pages/webview/webview' |
||||
}) |
||||
// #endif |
||||
|
||||
// #ifdef MP |
||||
uni.navigateToMiniProgram({ |
||||
appId: data.we_app_info.app_id, |
||||
path: data.we_app_info.page_path |
||||
}) |
||||
// #endif |
||||
}) |
||||
}, |
||||
initList() { |
||||
for (let i = 1; i < this.tabList.length; i++) { |
||||
this.goodList.push({ |
||||
obj: [], |
||||
page: 1, |
||||
pageSize: 20, |
||||
moreStatus: '' |
||||
}) |
||||
} |
||||
this.loadData() |
||||
}, |
||||
loadData(e) { |
||||
if (this.swiperIndex === 0) { |
||||
if (this.recommentList.moreStatus === 'loading' || |
||||
this.recommentList.moreStatus === 'refreshing') { |
||||
return; |
||||
} |
||||
|
||||
pddApi.goodsRecommend('', '', this.pid, this.recommentList.obj.length).then(res => { |
||||
let list = [] |
||||
list = res.data.goods_basic_detail_response.list |
||||
this.recommentList.obj.concat(list) |
||||
this.search_id = res.data.goods_basic_detail_response.search_id |
||||
if (list.length == 0) { |
||||
this.this.recommentList.moreStatus = 'noMore' |
||||
return |
||||
} |
||||
this.recommentList.moreStatus = '' |
||||
this.recommentList.page++; |
||||
this.recommentList.obj = this.recommentList.obj.concat(list); |
||||
}).catch((res) => { |
||||
this.goodList[this.swiperIndex].moreStatus = 'error' |
||||
}); |
||||
} else { |
||||
if (this.goodList[this.swiperIndex - 1].moreStatus === 'loading' || |
||||
this.goodList[this.swiperIndex - 1].moreStatus === 'refreshing') { |
||||
return; |
||||
} |
||||
|
||||
pddApi.goodsSearch('', '', this.tabList[this.swiperIndex].id, this.pid, |
||||
this.goodList[this.swiperIndex - 1].page, |
||||
this.goodList[this.swiperIndex - 1].pageSize).then(res => { |
||||
let list = [] |
||||
list = res.data.goods_search_response.goods_list |
||||
this.search_id = res.data.goods_search_response.search_id |
||||
if (list.length == 0) { |
||||
this.goodList[this.swiperIndex - 1].moreStatus = 'noMore' |
||||
return |
||||
} |
||||
this.goodList[this.swiperIndex - 1].moreStatus = '' |
||||
this.goodList[this.swiperIndex - 1].page++; |
||||
this.goodList[this.swiperIndex - 1].obj = this.goodList[this.swiperIndex - 1].obj.concat( |
||||
list); |
||||
}).catch((res) => { |
||||
this.goodList[this.swiperIndex - 1].moreStatus = 'error' |
||||
}); |
||||
} |
||||
}, |
||||
toList(e) { |
||||
let url = '/uni_modules/aliea-goods/pages/goods/goodList?key_word=' + e.keyword |
||||
if (this.pid) { |
||||
url += '&p_id=' + this.pid |
||||
} |
||||
uni.navigateTo({ |
||||
url: url |
||||
}) |
||||
}, |
||||
swiperChange(e) { |
||||
this.swiperIndex = e.detail.current; |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.content_index { |
||||
width: 100%; |
||||
height: 100%; |
||||
|
||||
.tabs { |
||||
width: 100%; |
||||
} |
||||
|
||||
.swiper_view { |
||||
position: fixed; |
||||
background-color: antiquewhite; |
||||
width: 100%; |
||||
|
||||
uni-swiper { |
||||
width: 100%; |
||||
height: 100%; |
||||
|
||||
.goods_list { |
||||
height: 100%; |
||||
|
||||
.goods_list_item { |
||||
width: 355rpx; |
||||
display: inline-block; |
||||
margin: 10rpx; |
||||
border-radius: 20rpx; |
||||
} |
||||
|
||||
.menu_view { |
||||
|
||||
width: 750rpx; |
||||
padding: 10rpx; |
||||
// margin-top: 10rpx; |
||||
border-radius: 20rpx; |
||||
|
||||
.menu_view_item { |
||||
background-color: #fff; |
||||
display: inline-block; |
||||
text-align: center; |
||||
width: 162.5rpx; |
||||
padding: 20rpx 10rpx; |
||||
|
||||
.menu_view_item_img { |
||||
width: 90rpx; |
||||
height: 90rpx; |
||||
} |
||||
|
||||
.menu_view_item_text { |
||||
display: block; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.menu_view_title { |
||||
padding: 15rpx; |
||||
font-weight: bold; |
||||
background-color: #fff; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,67 @@
|
||||
import UniShare from './uni-share/js_sdk/uni-share.js' |
||||
|
||||
const uniShare = new UniShare() |
||||
|
||||
const fenxiang = async (title, url, descript, imgUrl, type = 0) => { |
||||
//#ifdef APP
|
||||
|
||||
uniShare.show({ |
||||
content: { //公共的分享类型（type）、链接（herf）、标题（title）、summary（描述）、imageUrl（缩略图）
|
||||
type: type, |
||||
href: url, |
||||
title: title, |
||||
summary: descript, |
||||
imageUrl: imgUrl + |
||||
'?x-oss-process=image/resize,m_fill,h_100,w_100' //压缩图片解决，在ios端分享图过大导致的图片失效问题
|
||||
}, |
||||
menus: [{ |
||||
"img": "static/ddk/app-plus/sharemenu/wechatfriend.png", |
||||
"text": "微信朋友", |
||||
"share": { |
||||
"provider": "weixin", |
||||
"scene": "WXSceneSession" |
||||
} |
||||
}, |
||||
{ |
||||
"img": "static/ddk/app-plus/sharemenu/wechatmoments.png", |
||||
"text": "微信朋友圈", |
||||
"share": { |
||||
"provider": "weixin", |
||||
"scene": "WXSceneTimeline" |
||||
} |
||||
}, |
||||
{ |
||||
"img": "static/ddk/app-plus/sharemenu/weibo.png", |
||||
"text": "微博", |
||||
"share": { |
||||
"provider": "sinaweibo" |
||||
} |
||||
}, |
||||
{ |
||||
"img": "static/ddk/app-plus/sharemenu/qq.png", |
||||
"text": "QQ", |
||||
"share": { |
||||
"provider": "qq" |
||||
} |
||||
}, |
||||
{ |
||||
"img": "static/ddk/app-plus/sharemenu/copyurl.png", |
||||
"text": "复制", |
||||
"share": "copyurl" |
||||
}, { |
||||
"img": "static/ddk/app-plus/sharemenu/more.png", |
||||
"text": "系统分享", |
||||
"share": "shareSystem" |
||||
} |
||||
|
||||
], |
||||
cancelText: "取消", |
||||
}, e => { //callback
|
||||
console.log(e); |
||||
}) |
||||
//#endif
|
||||
} |
||||
|
||||
export { |
||||
fenxiang |
||||
} |
||||
@ -0,0 +1,18 @@
|
||||
## 2.0.2（2021-12-16） |
||||
修复在某些情况下报：`Cannot read property 'hide' of undefined`的问题 |
||||
## 2.0.1（2021-11-29） |
||||
修改错误的scene值WXSenceTimeline(分享到朋友圈)更正为WXSceneTimeline |
||||
## 2.0.0（2021-10-14） |
||||
支持监听返回操作(如：物理返回，全面屏手机侧滑)关闭分享弹窗 |
||||
## 1.0.6（2021-08-25） |
||||
兼容vue3 |
||||
## 1.0.5（2021-08-05） |
||||
优化代码实现，修改原来用`eval()`函数实现的逻辑 |
||||
## 1.0.4（2021-06-07） |
||||
为符合苹果应用市场的审核，只显示存在对应的分享客户端的选项。如：配置包含微信分享，但是用户手机上并没有安装微信，就不显示微信分享。 |
||||
## 1.0.2（2021-05-06） |
||||
修复错误的提示：“打包时未添加oauth模块” |
||||
## 1.0.1（2021-04-30） |
||||
新增完整示例 |
||||
## 1.0.0（2021-04-28） |
||||
第1版发布 |
||||
@ -0,0 +1,204 @@
|
||||
var nvMask, nvImageMenu; |
||||
class NvImageMenu { |
||||
constructor(arg) { |
||||
this.isShow = false |
||||
} |
||||
show({ |
||||
list, |
||||
cancelText |
||||
}, callback) { |
||||
if (!list) { |
||||
list = [{ |
||||
"img": "/static/sharemenu/wechatfriend.png", |
||||
"text": "图标文字" |
||||
}] |
||||
} |
||||
//以下为计算菜单的nview绘制布局，为固定算法，使用者无关关心
|
||||
var screenWidth = plus.screen.resolutionWidth |
||||
//以360px宽度屏幕为例，上下左右边距及2排按钮边距留25像素，图标宽度55像素，同行图标间的间距在360宽的屏幕是30px，但需要动态计算，以此原则计算4列图标分别的left位置
|
||||
//图标下的按钮文字距离图标5像素，文字大小12像素
|
||||
//底部取消按钮高度固定为44px
|
||||
//TODO 未处理横屏和pad，这些情况6个图标应该一排即可
|
||||
var margin = 20, |
||||
iconWidth = 60, |
||||
icontextSpace = 5, |
||||
textHeight = 12 |
||||
var left1 = margin / 360 * screenWidth |
||||
var iconSpace = (screenWidth - (left1 * 2) - (iconWidth * 4)) / 3 //屏幕宽度减去左右留白间距，再减去4个图标的宽度，就是3个同行图标的间距
|
||||
if (iconSpace <= 5) { //屏幕过窄时，缩小边距和图标大小，再算一次
|
||||
margin = 15 |
||||
iconWidth = 40 |
||||
left1 = margin / 360 * screenWidth |
||||
iconSpace = (screenWidth - (left1 * 2) - (iconWidth * 4)) / 3 //屏幕宽度减去左右留白间距，再减去4个图标的宽度，就是3个同行图标的间距
|
||||
} |
||||
var left2 = left1 + iconWidth + iconSpace |
||||
var left3 = left1 + (iconWidth + iconSpace) * 2 |
||||
var left4 = left1 + (iconWidth + iconSpace) * 3 |
||||
var top1 = left1 |
||||
var top2 = top1 + iconWidth + icontextSpace + textHeight + left1 |
||||
|
||||
const TOP = { |
||||
top1, |
||||
top2 |
||||
}, |
||||
LEFT = { |
||||
left1, |
||||
left2, |
||||
left3, |
||||
left4 |
||||
}; |
||||
|
||||
nvMask = new plus.nativeObj.View("nvMask", { //先创建遮罩层
|
||||
top: '0px', |
||||
left: '0px', |
||||
height: '100%', |
||||
width: '100%', |
||||
backgroundColor: 'rgba(0,0,0,0.2)' |
||||
}); |
||||
nvImageMenu = new plus.nativeObj.View("nvImageMenu", { //创建底部图标菜单
|
||||
bottom: '0px', |
||||
left: '0px', |
||||
height: (iconWidth + textHeight + 2 * margin) * Math.ceil(list.length / 4) + 44 + |
||||
'px', //'264px',
|
||||
width: '100%', |
||||
backgroundColor: 'rgb(255,255,255)' |
||||
}); |
||||
nvMask.addEventListener("click", () => { //处理遮罩层点击
|
||||
// console.log('处理遮罩层点击');
|
||||
this.hide() |
||||
callback({ |
||||
event: "clickMask" |
||||
}) |
||||
}) |
||||
let myList = [] |
||||
list.forEach((item, i) => { |
||||
myList.push({ |
||||
tag: 'img', |
||||
src: item.img, |
||||
position: { |
||||
top: TOP['top' + (parseInt(i / 4) + 1)], |
||||
left: LEFT['left' + (1 + i % 4)], |
||||
width: iconWidth, |
||||
height: iconWidth |
||||
} |
||||
}) |
||||
myList.push({ |
||||
tag: 'font', |
||||
text: item.text, |
||||
textStyles: { |
||||
size: textHeight |
||||
}, |
||||
position: { |
||||
top: TOP['top' + (parseInt(i / 4) + 1)] + iconWidth + icontextSpace, |
||||
left: LEFT['left' + (1 + i % 4)], |
||||
width: iconWidth, |
||||
height: textHeight |
||||
} |
||||
}) |
||||
}) |
||||
|
||||
//绘制底部图标菜单的内容
|
||||
nvImageMenu.draw([{ |
||||
tag: 'rect', //菜单顶部的分割灰线
|
||||
color: '#e7e7e7', |
||||
position: { |
||||
top: '0px', |
||||
height: '1px' |
||||
} |
||||
}, |
||||
{ |
||||
tag: 'font', |
||||
text: cancelText, //底部取消按钮的文字
|
||||
textStyles: { |
||||
size: '14px' |
||||
}, |
||||
position: { |
||||
bottom: '0px', |
||||
height: '44px' |
||||
} |
||||
}, |
||||
{ |
||||
tag: 'rect', //底部取消按钮的顶部边线
|
||||
color: '#e7e7e7', |
||||
position: { |
||||
bottom: '45px', |
||||
height: '1px' |
||||
} |
||||
}, |
||||
...myList |
||||
]) |
||||
nvMask.show() |
||||
nvImageMenu.show() |
||||
// 开始动画
|
||||
/* |
||||
plus.nativeObj.View.startAnimation({ |
||||
type: 'slide-in-bottom', |
||||
duration: 300 |
||||
}, nvImageMenu, {}, function() { |
||||
console.log('plus.nativeObj.View.startAnimation动画结束'); |
||||
// 关闭原生动画
|
||||
plus.nativeObj.View.clearAnimation(); |
||||
nvImageMenu.show() |
||||
}); |
||||
*/ |
||||
|
||||
|
||||
this.isShow = true |
||||
nvImageMenu.addEventListener("click", e => { //处理底部图标菜单的点击事件，根据点击位置触发不同的逻辑
|
||||
// console.log("click menu"+JSON.stringify(e));
|
||||
if (e.screenY > plus.screen.resolutionHeight - 44) { //点击了底部取消按钮
|
||||
// callback({event:"clickCancelButton"})
|
||||
this.hide() |
||||
} else if (e.clientX < 5 || e.clientX > screenWidth - 5 || e.clientY < 5) { |
||||
//屏幕左右边缘5像素及菜单顶部5像素不处理点击
|
||||
} else { //点击了图标按钮
|
||||
var iClickIndex = -1 //点击的图标按钮序号，第一个图标按钮的index为0
|
||||
var iRow = e.clientY < (top2 - (left1 / 2)) ? 0 : 1 |
||||
var iCol = -1 |
||||
if (e.clientX < (left2 - (iconSpace / 2))) { |
||||
iCol = 0 |
||||
} else if (e.clientX < (left3 - (iconSpace / 2))) { |
||||
iCol = 1 |
||||
} else if (e.clientX < (left4 - (iconSpace / 2))) { |
||||
iCol = 2 |
||||
} else { |
||||
iCol = 3 |
||||
} |
||||
if (iRow == 0) { |
||||
iClickIndex = iCol |
||||
} else { |
||||
iClickIndex = iCol + 4 |
||||
} |
||||
// console.log("点击按钮的序号: " + iClickIndex);
|
||||
// if (iClickIndex >= 0 && iClickIndex <= 5) { //处理具体的点击逻辑，此处也可以自行定义逻辑。如果增减了按钮，此处也需要跟着修改
|
||||
// }
|
||||
callback({ |
||||
event: "clickMenu", |
||||
index: iClickIndex |
||||
}) |
||||
} |
||||
}) |
||||
/* nvImageMenu.addEventListener("touchstart", function(e) { |
||||
if (e.screenY > (plus.screen.resolutionHeight - 44)) { |
||||
//TODO 这里可以处理按下背景变灰的效果
|
||||
} |
||||
}) |
||||
nvImageMenu.addEventListener("touchmove", function(e) { |
||||
//TODO 这里可以处理按下背景变灰的效果
|
||||
if (e.screenY > plus.screen.resolutionHeight - 44) {} |
||||
}) |
||||
nvImageMenu.addEventListener("touchend", function(e) { |
||||
//TODO 这里可以处理释放背景恢复的效果
|
||||
}) |
||||
*/ |
||||
} |
||||
|
||||
hide() { |
||||
if (this.isShow) { |
||||
nvMask.hide() |
||||
nvImageMenu.hide() |
||||
this.isShow = false |
||||
} |
||||
} |
||||
} |
||||
export default NvImageMenu |
||||
@ -0,0 +1,98 @@
|
||||
import UniImageMenu from './uni-image-menu.js'; |
||||
class UniShare extends UniImageMenu{ |
||||
constructor(arg) { |
||||
super() |
||||
this.isShow = super.isShow |
||||
} |
||||
async show(param, callback){ |
||||
var menus = [] |
||||
plus.share.getServices(services => { //只显示有服务的项目
|
||||
services = services.filter(item => item.nativeClient) |
||||
let servicesList = services.map(e => e.id) |
||||
param.menus.forEach(item => { |
||||
if (servicesList.includes(item.share.provider) || typeof(item.share) == 'string') { |
||||
menus.push(item) |
||||
} |
||||
}) |
||||
super.show({ |
||||
list: menus, |
||||
cancelText: param.cancelText |
||||
}, e => { |
||||
callback(e) |
||||
if(e.event == 'clickMenu'){ |
||||
if (typeof(menus[e.index]['share']) == 'string') { |
||||
this[menus[e.index]['share']](param) |
||||
} else { |
||||
uni.share({ |
||||
...param.content, |
||||
...menus[e.index].share, |
||||
success: res=> { |
||||
console.log("success:" + JSON.stringify(res)); |
||||
super.hide() |
||||
}, |
||||
fail: function(err) { |
||||
console.log("fail:" + JSON.stringify(err)); |
||||
// uni.showModal({
|
||||
// content: JSON.stringify(err),
|
||||
// showCancel: false,
|
||||
// confirmText: "知道了"
|
||||
// });
|
||||
} |
||||
}) |
||||
} |
||||
} |
||||
}) |
||||
}, err => { |
||||
uni.showModal({ |
||||
title: '获取服务供应商失败：' + JSON.stringify(err), |
||||
showCancel: false, |
||||
confirmText: '知道了' |
||||
}); |
||||
console.error('获取服务供应商失败：' + JSON.stringify(err)); |
||||
}) |
||||
} |
||||
hide(){ |
||||
super.hide() |
||||
} |
||||
copyurl(param) { |
||||
console.log('copyurl',param); |
||||
uni.setClipboardData({ |
||||
data: param.content.href, |
||||
success: ()=>{ |
||||
console.log('success'); |
||||
uni.hideToast() //关闭自带的toast
|
||||
uni.showToast({ |
||||
title: '复制成功', |
||||
icon: 'none' |
||||
}); |
||||
super.hide(); |
||||
}, |
||||
fail: (err) => { |
||||
uni.showModal({ |
||||
content: JSON.stringify(err), |
||||
showCancel: false |
||||
}); |
||||
} |
||||
}); |
||||
} |
||||
// 使用系统分享发送分享消息
|
||||
shareSystem(param) { |
||||
console.log('shareSystem',param); |
||||
plus.share.sendWithSystem({ |
||||
type: 'text', |
||||
content: param.content.title + param.content.summary || '', |
||||
href: param.content.href, |
||||
}, (e)=> { |
||||
console.log('分享成功'); |
||||
super.hide() |
||||
}, (err)=> { |
||||
console.log('分享失败：' + JSON.stringify(err)); |
||||
uni.showModal({ |
||||
title: '获取服务供应商失败：' + JSON.stringify(err), |
||||
showCancel: false, |
||||
confirmText: '知道了' |
||||
}); |
||||
}); |
||||
} |
||||
} |
||||
export default UniShare |
||||
@ -0,0 +1,80 @@
|
||||
{ |
||||
"id": "uni-share", |
||||
"displayName": "uni-share", |
||||
"version": "2.0.2", |
||||
"description": "底部弹出宫格图标式的分享菜单，可覆盖原生组件。", |
||||
"keywords": [ |
||||
"分享菜单" |
||||
], |
||||
"repository": "", |
||||
"engines": { |
||||
"HBuilderX": "^3.1.0" |
||||
}, |
||||
"dcloudext": { |
||||
"category": [ |
||||
"JS SDK", |
||||
"通用 SDK" |
||||
], |
||||
"sale": { |
||||
"regular": { |
||||
"price": "0.00" |
||||
}, |
||||
"sourcecode": { |
||||
"price": "0.00" |
||||
} |
||||
}, |
||||
"contact": { |
||||
"qq": "" |
||||
}, |
||||
"declaration": { |
||||
"ads": "无", |
||||
"data": "无", |
||||
"permissions": "无" |
||||
}, |
||||
"npmurl": "" |
||||
}, |
||||
"uni_modules": { |
||||
"dependencies": [], |
||||
"encrypt": [], |
||||
"platforms": { |
||||
"cloud": { |
||||
"tcb": "y", |
||||
"aliyun": "y" |
||||
}, |
||||
"client": { |
||||
"App": { |
||||
"app-vue": "y", |
||||
"app-nvue": "y" |
||||
}, |
||||
"H5-mobile": { |
||||
"Safari": "n", |
||||
"Android Browser": "n", |
||||
"微信浏览器(Android)": "n", |
||||
"QQ浏览器(Android)": "n" |
||||
}, |
||||
"H5-pc": { |
||||
"Chrome": "n", |
||||
"IE": "n", |
||||
"Edge": "n", |
||||
"Firefox": "n", |
||||
"Safari": "n" |
||||
}, |
||||
"小程序": { |
||||
"微信": "n", |
||||
"阿里": "n", |
||||
"百度": "n", |
||||
"字节跳动": "n", |
||||
"QQ": "n" |
||||
}, |
||||
"快应用": { |
||||
"华为": "n", |
||||
"联盟": "n" |
||||
}, |
||||
"Vue": { |
||||
"vue2": "y", |
||||
"vue3": "y" |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,95 @@
|
||||
#### 本功能基于[底部图标菜单](https://ext.dcloud.net.cn/plugin?id=4858)封装而成。 |
||||
### 示例代码 |
||||
``` |
||||
<template> |
||||
<button type="default" @click="uniShare">显示</button> |
||||
</template> |
||||
<script> |
||||
import uniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js'; |
||||
export default { |
||||
onBackPress({from}) { |
||||
console.log(from); |
||||
if(from=='backbutton'){ |
||||
this.$nextTick(function(){ |
||||
uniShare.hide() |
||||
}) |
||||
return uniShare.isShow; |
||||
} |
||||
}, |
||||
methods: { |
||||
uniShare() { |
||||
uniShare.show({ |
||||
content: { //公共的分享参数配置 类型（type）、链接（herf）、标题（title）、summary（描述）、imageUrl（缩略图） |
||||
type: 0, |
||||
href: 'https://uniapp.dcloud.io/', |
||||
title: '标题', |
||||
summary: '描述', |
||||
imageUrl: 'https://img-cdn-aliyun.dcloud.net.cn/stream/icon/__UNI__HelloUniApp.png' |
||||
}, |
||||
menus: [{ |
||||
"img": "/static/app-plus/sharemenu/wechatfriend.png", |
||||
"text": "微信好友", |
||||
"share": { //当前项的分享参数配置。可覆盖公共的配置如下：分享到微信小程序，配置了type=5 |
||||
"provider": "weixin", |
||||
"scene": "WXSceneSession" |
||||
} |
||||
}, |
||||
{ |
||||
"img": "/static/app-plus/sharemenu/wechatmoments.png", |
||||
"text": "微信朋友圈", |
||||
"share": { |
||||
"provider": "weixin", |
||||
"scene": "WXSceneTimeline" |
||||
} |
||||
}, |
||||
{ |
||||
"img": "/static/app-plus/sharemenu/mp_weixin.png", |
||||
"text": "微信小程序", |
||||
"share": { |
||||
provider: "weixin", |
||||
scene: "WXSceneSession", |
||||
type: 5, |
||||
miniProgram: { |
||||
id: '123', |
||||
path: '/pages/list/detail', |
||||
webUrl: '/#/pages/list/detail', |
||||
type: 0 |
||||
}, |
||||
} |
||||
}, |
||||
{ |
||||
"img": "/static/app-plus/sharemenu/weibo.png", |
||||
"text": "微博", |
||||
"share": { |
||||
"provider": "sinaweibo" |
||||
} |
||||
}, |
||||
{ |
||||
"img": "/static/app-plus/sharemenu/qq.png", |
||||
"text": "QQ", |
||||
"share": { |
||||
"provider": "qq" |
||||
} |
||||
}, |
||||
{ |
||||
"img": "/static/app-plus/sharemenu/copyurl.png", |
||||
"text": "复制", |
||||
"share": "copyurl" |
||||
}, |
||||
{ |
||||
"img": "/static/app-plus/sharemenu/more.png", |
||||
"text": "更多", |
||||
"share": "shareSystem" |
||||
} |
||||
], |
||||
cancelText: "取消分享", |
||||
}, e => { //callback |
||||
console.log(uniShare.isShow); |
||||
console.log(e); |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
``` |
||||
@ -0,0 +1,20 @@
|
||||
// const pddApi = uniCloud.importObject('pdd-serve')
|
||||
// // 查询是否备案
|
||||
// export const checkAuthority = function(pid = '') {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// pddApi.authority_query(pid).then(res => {
|
||||
// console.log('备案数：', res.data.authority_query_response.bind)
|
||||
// if (res.data.authority_query_response && res.data.authority_query_response.bind ===
|
||||
// 0) {
|
||||
// pddApi.authority_generate(pid).then(res => {
|
||||
// let data = res.data.rp_promotion_url_generate_response
|
||||
// .url_list[0]
|
||||
// console.log('备案链接：', data);
|
||||
// resolve(data)
|
||||
// })
|
||||
// } else {
|
||||
// resolve(true)
|
||||
// }
|
||||
// })
|
||||
// })
|
||||
// }
|
||||
@ -1,57 +1,82 @@
|
||||
<template> |
||||
<map |
||||
id="map" |
||||
:longitude="map.longitude" |
||||
:latitude="map.latitude" |
||||
:markers="mapConfig" |
||||
scale="15" |
||||
show-location |
||||
style="width: 100%; height: 100%;" |
||||
></map> |
||||
<map id="map" :longitude="map.longitude" :latitude="map.latitude" :markers="mapConfig" scale="12" show-location |
||||
@regionchange="test" style="width: 100%; height: 100%;"></map> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
import { |
||||
getFishIndex, |
||||
getFishPlaceInfo |
||||
} from '@/api/fish' |
||||
|
||||
export default { |
||||
|
||||
name: "Index", |
||||
components: {}, |
||||
props: {}, |
||||
data: function() { |
||||
return { |
||||
mapConfig: { |
||||
latitude: "", |
||||
longitude: "", |
||||
name: "", |
||||
address: "" |
||||
}, |
||||
mapConfig: [], |
||||
map: { |
||||
latitude: "", |
||||
longitude: "" |
||||
} |
||||
latitude: 30.579150542191858, |
||||
longitude: 114.31590683471099 |
||||
}, |
||||
}; |
||||
}, |
||||
onShow: function() { |
||||
this.map = { |
||||
latitude: this.$yroute.query.latitude, |
||||
longitude: this.$yroute.query.longitude |
||||
}; |
||||
this.mapConfig = [{ |
||||
id: 1, |
||||
width: 50, |
||||
height: 50, |
||||
iconPath: this.$yroute.query.image, |
||||
latitude: this.$yroute.query.latitude, |
||||
longitude: this.$yroute.query.longitude, |
||||
title: this.$yroute.query.name, |
||||
name: this.$yroute.query.name, |
||||
address: this.$yroute.query.detailedAddress |
||||
}]; |
||||
console.log(this.mapConfig); |
||||
|
||||
this._mapContext = uni.createMapContext("map", this); |
||||
this._mapContext.moveToLocation() |
||||
|
||||
let that = this; |
||||
|
||||
// uni.getLocation({ |
||||
// success(localtionRs) { |
||||
// that.refresh(localtionRs); |
||||
// }, |
||||
// }) |
||||
}, |
||||
methods: { |
||||
test(res) { |
||||
console.log("res",res) |
||||
let that = this; |
||||
if (res.type == "end") { |
||||
console.log(this._mapContext) |
||||
this._mapContext.getCenterLocation({ |
||||
success(res){ |
||||
that.refresh(res) |
||||
} |
||||
}) |
||||
} |
||||
}, |
||||
refresh(location){ |
||||
let that = this; |
||||
getFishIndex(location).then(res => { |
||||
console.log(res.data) |
||||
if (res.data) { |
||||
res.data.forEach(e => { |
||||
// 需要判断不存在对应标点才继续新增,另外太近标点需要做marker聚合 |
||||
// 性能：可以考虑把之前增加的删掉（如果页面上标点太多） |
||||
that.mapConfig.push({ |
||||
alpha: .8, |
||||
height: 30, |
||||
width: 30, |
||||
id: e.id, |
||||
name: e.placeName, |
||||
latitude: Number(e.latitude), |
||||
longitude: Number(e.longitude), |
||||
iconPath: e.mode == 0 ? "/static/public_fish.png" : |
||||
"/static/business_fish.png" |
||||
}) |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
methods: {} |
||||
}; |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="less"> |
||||
page { |
||||
page { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,22 @@
|
||||
<template> |
||||
<view> |
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
|
||||
} |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
|
||||
</style> |
||||
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
Loading…
Reference in new issue