liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix(特产&文玩管理):[#962]店铺/商品的链接配置功能

Browse Source
This commit is contained in:
lifizer
2024-03-01 17:33:54 +08:00
parent 1c8bbc1d26
commit 859ea13dda
8 changed files with 272 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/chose-city/chose-city.vue
-551
View File
@@ -1,551 +0,0 @@
<template>
<view class="chose-city">
<view class="header">
<view class="search-box flex jc-between ai-center">
<input type="text" v-model="keyword" placeholder="搜索城市" placeholder-style="color:#999" @confirm="search">
<image class="icon" :src="webUrl+'/20220903142935869059.png'" mode="scaleToFill" @click="search"></image>
</view>
</view>
<view class="aside">
<view class="item flex jc-center ai-center" :class="index === navActive ? 'on' : ''"
v-for="(item, index) in listGroup" :key="index" @click="asideTap(index)">
<view class="name">{{ item.label }}</view>
</view>
</view>
<view class="content">
<mescroll-body ref="mescrollRef" top="16rpx" bottom="0" class='cotent-scroll' :up="upOption" :down="downOption"
@up="upCallback" @down="downCallback" @init="mescrollInit" @emptyclick="emptyClick">
<view class="fixed-box">
<view class="line-location flex ai-center">
<image :src="webUrl+'/20220903142929759087.png'" mode="scaleToFill"></image>
<text class="bold" v-if="location">当前定位：{{ location }}</text>
<view style="color:#f66" @click="reload()" v-else>定位失败
<image :src="webUrl+'/20231215213824297278.png'" mode="scaleToFill"/>
</view>
</view>
<image class="banner" :src="banner.icon" mode="scaleToFill" v-if="banner"
@click="$global.commonJump(banner.url)"/>
<!-- <view class="top-box" v-if="listTop.length">-->
<!-- <view class="tips">特别推荐</view>-->
<!-- <view class="top-list custom-list flex ai-center">-->
<!-- <view class="item" v-for="(item,index) in listTop" :key="index" @click="select(item)">-->
<!-- <view class="has-goods" v-if="type===0 && item.hasData===0">暂无特产</view>-->
<!-- <view class="has-goods" v-if="type>0 && type<6&& item.hasShop===0">暂无店铺</view>-->
<!-- <image :src="item.icon" mode="scaleToFill"></image>-->
<!-- <view class="one-t">{{ item.cityName }}</view>-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
</view>
<!--9-2 推荐信息-->
<view class="recommendInfo" v-if="recommendInfo && type<2">
<template v-if="(type===0 && recommendInfo.hotelList) || (type===1 && recommendInfo.productList)">
<view class="red-border-title">{{ recommendInfo.title }}</view>
<image class="bg-custom" :src="recommendInfo.backgroundImage" mode="scaleToFill"/>
<scroll-view class="scroll-box flex" enable-flex scroll-x>
<!-- :style="{'backgroundImage':`url(${recommendInfo.backgroundImage})`}"-->
<view class="item flex-0 flex flex-col jc-between ai-center"
v-for="(item,index) in recommendInfo.hotelList"
:key="index" v-if="type===0" @click="goStore(item.hotelId)">
<image class="cover" :src="item.hotelImage" mode="scaleToFill"/>
<image class="logo" :src="item.hotelLogo" mode="scaleToFill"/>
<view style="width: 100%;box-sizing: border-box;padding:0 8rpx">
<view class="name tc one-t">{{ item.hotelName }}</view>
<rich-text class="text tc one-t" :nodes="item.hotelText"/>
</view>
</view>
<view class="item flex-0 flex flex-col jc-between ai-center"
v-for="(item,index) in recommendInfo.productList" :key="index" v-if="type===1"
@click="$global.navToGoods(item.productId)">
<image class="cover" :src="item.productImage" mode="scaleToFill"/>
<image class="logo" :src="item.merLogo" mode="scaleToFill"/>
<view style="width: 100%">
<view class="name tc one-t">{{ item.productName }}</view>
<rich-text class="text tc one-t" :nodes="item.productText"/>
</view>
</view>
</scroll-view>
</template>
</view>
<!-- province-name-->
<view class="red-border-title" style="margin-left: 38rpx;">{{ provinceName }}</view>
<view class="group-list custom-list flex flex-wrap">
<view class="item" v-for="(item, index) in listCity" :key="index" @click="select(item)">
<view class="has-goods" v-if="type===0 && item.hasData===0">暂无特产</view>
<view class="has-goods" v-if="type>0 && type<6&& item.hasShop===0">暂无店铺</view>
<view class="has-goods" v-if="type===6 && item.hasData===0">暂无景点</view>
<image :src="item.icon" mode="scaleToFill"></image>
<view class="one-t">{{ item.cityName }}</view>
</view>
</view>
</mescroll-body>
</view>
</view>
</template>
<script>
import MescrollMixins from "@/mixins/mescroll-mixins.js";
import {fetchCity} from "@/api/wenwan";
import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue";
import {getCurAddress, getLocation} from "@/utils/common.js";
export default {
name: "choseCity",
components: {
MescrollBody
},
props: {},
mixins: [
MescrollMixins({
getPageData(mescroll) {
// 此时mescroll会携带page的参数:
// let pageNum = mescroll.num; // 页码, 默认从1开始
// let pageSize = mescroll.size; // 页长, 默认每页10条
mescroll.endSuccess(10);
}
})
],
data() {
return {
upOption: {
noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
auto: false,
empty: {
tip: '暂无城市' // 提示
// btnText:'点击刷新'
}
},
downOption: {
auto: true
},
webUrl: this.$VUE_APP_RESOURCES_URL,
listGroup: [],
listTop: [],
provinceName: "",
listCity: [],
navActive: 0,
keyword: "",
type: null,
location: "",
banner: {},
recommendInfo: null, // 推荐信息
};
},
onLoad(options) {
this.type = Number(options.type);
this.location = options.city;
if (this.location === undefined) {
this.getMapData();
}
this.init();
},
methods: {
reload() {
uni.getSetting({
success(res) {
if (res.authSetting['scope.userLocation']) {
} else {
uni.showModal({
title: '提示',
content: '当前定位未开启，请点击确定手动开启定位',
duration: 5000,
success(result) {
if (result.confirm) {
uni.openSetting({
success(openRes) {
if (openRes.authSetting['scope.userLocation']) {
} else {
uni.showToast({
title: '你拒绝了授权，无法继续',
icon: 'none'
})
}
}
})
} else if (result.cancel) {
uni.showToast({
title: '你拒绝了授权，无法获取定位信息',
icon: 'none'
})
}
}
})
}
}
})
},
async getMapData() {
const map = await getLocation();
if (map) {
const {latitude, longitude} = map[1];
const address = await getCurAddress(latitude, longitude);
this.location = address[1].data.result.ad_info.city;
}
},
init() {
fetchCity(this.type).then(res => {
if (res.success) {
this.listGroup = res.data.group;
// this.listTop = res.data.tops;
if (this.listGroup.length > 0) {
this.listTop = this.listGroup[0].top;
this.listCity = this.listGroup[0].city;
this.provinceName = this.listGroup[0].label;
this.recommendInfo = this.listGroup[0].recommendInfo
this.banner = {
icon: this.listGroup[0].icon,
url: this.listGroup[0].uniappUrl
}
}
}
})
},
asideTap(index) {
this.navActive = index;
this.listTop = this.listGroup[index].top;
this.listCity = this.listGroup[index].city;
this.provinceName = this.listGroup[index].label;
this.recommendInfo = this.listGroup[index].recommendInfo
this.banner = {
icon: this.listGroup[index].icon,
url: this.listGroup[index].uniappUrl
}
//触发加载请求
this.mescroll.scrollTo(0, 0);
this.mescroll && this.mescroll.resetUpScroll(false);
},
emptyClick: function () {
//触发加载请求
this.mescroll && this.mescroll.triggerDownScroll()
},
search() {
this.listGroup.findIndex((group, index) => {
let result;
group.city.forEach(item => {
result = item.cityName.indexOf(this.keyword, 0);
if (result !== -1) {
this.asideTap(index);
return null;
}
})
if (result !== -1) {
return result
}
})
},
select(item) {
if (this.type === 0 && item.hasData === 0) return;
if ((this.type === 1 || this.type === 2) && item.hasShop === 0) return;
uni.setStorageSync("cityName", item.cityName)
switch (this.type) {
case 0:
uni.navigateTo({
url: `/pkg_product/views/nativeList?cityId=${item.cityId}`
})
break;
case 1:
uni.navigateTo({
url: `/wenwan/views/storeList?cityId=${item.cityId}`
})
break;
case 6:
uni.navigateTo({
url: `/pkg_product/views/scenicSpot?cityId=${item.cityId}`
})
break;
default:
uni.navigateBack()
break;
}
},
goStore(id) {
uni.navigateTo({
url: "/pagesInn/inn/innHome?id=" + id
})
},
}
};
</script>
<style scoped lang="less">
.chose-city {
height: 100%;
background: #fff;
color: #033333;
.banner {
width: 520rpx;
height: 200rpx;
vertical-align: middle;
margin: 16rpx auto 0;
border-radius: 8rpx;
}
.custom-list {
.item {
width: 160rpx;
margin-right: 20rpx;
font-size: 24rpx;
image {
width: 160rpx;
height: 160rpx;
border-radius: 8rpx;
vertical-align: middle;
}
.one-t {
margin-top: 14rpx;
line-height: 34rpx;
}
}
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 16rpx 32rpx 28rpx;
box-sizing: border-box;
background: #fff;
border-bottom: 2rpx solid #E9E9E9;
z-index: 9;
.search-box {
width: 686rpx;
height: 64rpx;
padding: 0 24rpx 0 32rpx;
box-sizing: border-box;
background: #F7F7F7;
border-radius: 32rpx;
input {
width: 560rpx;
font-size: 22rpx;
}
.icon {
width: 40rpx;
height: 40rpx;
}
}
}
.aside {
position: fixed;
width: 161rpx;
left: 0;
top: 110rpx;
bottom: 0 !important;
box-sizing: border-box;
border-right: 2rpx solid #E9E9E9;
background: #fff;
overflow-y: auto;
overflow-x: hidden;
overflow-scrolling: touch;
.item {
width: 100%;
height: 96rpx;
border-bottom: 2rpx solid #E9E9E9;
.name {
font-size: 28rpx;
text-align: center;
}
}
.item.on {
border-left: 6rpx solid #FD574B;
.name {
color: #FD574B;
font-weight: bold;
}
}
}
.aside::-webkit-scrollbar {
width: 0 !important
}
.content {
margin-left: 161rpx;
margin-top: 110rpx;
.red-border-title {
display: inline-flex;
align-items: center;
box-sizing: border-box;
margin: 18rpx 0;
padding: 8rpx 0 0 8rpx;
border-left: 6rpx solid #FD574B;
color: #262626;
font-size: 30rpx;
line-height: 30rpx;
font-weight: bold;
vertical-align: bottom;
}
.fixed-box {
padding: 32rpx 0 0 38rpx;
.line-location {
font-size: 28rpx;
image {
width: 36rpx;
height: 36rpx;
margin-right: 4rpx;
}
}
.top-box {
.tips {
margin: 36rpx 0 20rpx;
font-size: 28rpx;
line-height: 40px;
color: #666666;
}
.top-list {
overflow-x: auto;
}
.top-list::-webkit-scrollbar {
width: 0 !important
}
}
}
.recommendInfo {
position: relative;
margin-left: 38rpx;
.scroll-box {
position: relative;
width: 520rpx;
height: 314rpx;
box-sizing: border-box;
padding: 70rpx 20rpx 0 20rpx;
border-radius: 20rpx;
background-repeat: no-repeat;
background-size: 520rpx 314rpx;
}
.item {
position: relative;
width: 136rpx;
height: 220rpx;
margin-right: 28rpx;
border-radius: 8rpx;
background: linear-gradient(180deg, #08255D 0%, #6FA2FF 100%);
color: #FFFFFF;
line-height: 1;
//overflow: hidden;
image {
vertical-align: middle;
}
.cover {
width: 136rpx;
height: 136rpx;
border-radius: 8rpx;
}
.logo {
position: absolute;
left: 68rpx;
top: 136rpx;
transform: translate(-50%, -50%);
width: 40rpx;
height: 40rpx;
border-radius: 50%;
}
.name {
padding-bottom: 8rpx;
font-size: 22rpx;
line-height: 1.3;
}
.text {
padding-bottom: 8rpx;
font-size: 16rpx;
}
}
.item::after {
content: '';
position: absolute;
right: -14rpx;
top: 26rpx;
width: 2rpx;
height: 172rpx;
background: #D2E0E8;
}
.item:last-child::after{
display: none;
}
}
.province-name {
margin: 0 38rpx 24rpx;
font-size: 28rpx;
line-height: 40rpx;
color: #666666;
}
.group-list {
padding-left: 38rpx;
}
.item {
position: relative;
margin-bottom: 28rpx;
.has-goods {
position: absolute;
right: 0;
top: 0;
padding: 7rpx 8rpx;
border-radius: 0 8px 0 8px;
background: #f66;
color: #fff;
font-size: 24rpx;
line-height: 1;
}
}
}
.bg-custom {
position: absolute;
left: 0;
top: 74rpx;
width: 520rpx;
height: 314rpx;
}
}
</style>