兑换积分商品的全部列表页面实施。地址页面优化与对里面的bug调整。

This commit is contained in:
77 2024-10-31 16:14:58 +08:00
parent 2dd82f6240
commit de5eb74256
7 changed files with 383 additions and 355 deletions

View File

@ -196,9 +196,14 @@
"plugins": {}, "plugins": {},
"lazyCodeLoading": "requiredComponents", "lazyCodeLoading": "requiredComponents",
"usingComponents": {}, "usingComponents": {},
"permission": {}, "permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于选择定位"
}
},
"requiredPrivateInfos": [ "requiredPrivateInfos": [
"chooseAddress" "chooseAddress",
"getLocation"
] ]
}, },
"mp-alipay": { "mp-alipay": {

View File

@ -1,100 +1,48 @@
<!-- 自定义页面支持装修 -->
<template> <template>
<s-layout title="兑换商品列表" :bgStyle="{ color: '#fff' }"> <s-layout title="商品列表" :bgStyle="{ color: '#fff' }">
<!-- 营销组件积分商城 --> <view style="margin-top:10px;">
<view class="goods-lg-box"> <s-block v-for="(item, index) in state.components" :key="index">
<view class="goods-box" v-for="item in pointList" <!-- <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" /> -->
:key="item.id"> <!-- 营销组件积分商城 -->
<s-goods-column class="goods-card" size="lg" :data="item" <s-point-block v-if="item.id === 'PromotionPoint'" :data="item.property" :styles="item.property.style" />
@tap="sheep.$router.go('/pages/goods/point', { id: item.activityId })"> </s-block>
<!-- 购买按钮 --> </view>
<template v-slot:cart> </s-layout>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
去兑换
</button>
</template>
</s-goods-column>
</view>
</view>
</s-layout>
</template> </template>
<script setup> <script setup>
import { import { reactive } from 'vue';
computed, import { onLoad, onPageScroll } from '@dcloudio/uni-app';
ref import DiyApi from '@/sheep/api/promotion/diy';
} from 'vue';
import sheep from '@/sheep';
import request from '@/sheep/request';
import {
baseUrl,
apiPath
} from '@/sheep/config';
const pointList = ref([]);
function getList() {
request({
// url: `${baseUrl}${apiPath}/h5/reservation/list`,
url: `${baseUrl}${apiPath}/promotion/point-activity/pointActivityList`,
method: 'GET',
// params: {
// userId: this.memberId,
// },
custom: {
showLoading: false,
},
}).then((res) => {
pointList.value = res.data;
console.log('this.reservationList', this.reservationList)
});
}
getList(); const state = reactive({
name: '',
components: [],
navigationBar: {},
page: {},
});
onLoad(async (options) => {
let id = options.id
// #ifdef MP
//
if (options.scene) {
const sceneParams = decodeURIComponent(options.scene).split('=');
id = sceneParams[1];
}
// #endif
const { code, data } = await DiyApi.getDiyPage(id);
if (code === 0) {
state.name = data.name;
state.components = data.property?.components;
state.navigationBar = data.property?.navigationBar;
state.page = data.property?.page;
}
});
onPageScroll(() => {});
</script> </script>
<style></style>
<style lang="scss" scoped>
.goods-md-wrap {
width: 100%;
}
.goods-list-box {
width: 50%;
box-sizing: border-box;
.left-list {
&:nth-last-child(1) {
margin-bottom: 0 !important;
}
}
.right-list {
&:nth-last-child(1) {
margin-bottom: 0 !important;
}
}
}
.goods-box {
&:nth-last-of-type(1) {
margin-bottom: 0 !important;
}
}
.goods-md-box,
.goods-sl-box,
.goods-lg-box {
position: relative;
.cart-btn {
position: absolute;
bottom: 18rpx;
right: 20rpx;
z-index: 11;
height: 50rpx;
line-height: 50rpx;
padding: 0 20rpx;
border-radius: 25rpx;
font-size: 24rpx;
color: #fff;
}
}
</style>

View File

@ -1,275 +1,348 @@
<template> <template>
<s-layout title="选择自提门店" :bgStyle="{ color: '#FFF' }"> <s-layout title="选择自提门店" :bgStyle="{ color: '#FFF' }">
<view class="storeBox" ref="container"> <view class="storeBox" ref="container">
<view class="storeBox-box" v-for="(item, index) in state.storeList" :key="index" @tap="checked(item)"> <view class="storeBox-box" v-for="(item, index) in state.storeList" :key="index" @tap="checked(item)">
<view class="store-img"> <view class="store-img">
<image :src="item.logo" class="img" /> <image :src="item.logo" class="img" />
</view> </view>
<view class="store-cent-left"> <view class="store-cent-left">
<view class="store-name">{{ item.name }}</view> <view class="store-name">{{ item.name }}</view>
<view class="store-address line1"> <view class="store-address line1">
{{ item.areaName }}{{ ', ' + item.detailAddress }} {{ item.areaName }}{{ ', ' + item.detailAddress }}
</view> </view>
</view> <view class="store-address line1">
<view class="row-right ss-flex-col ss-col-center"> 营业时间{{item.openingTime[0] + ":" + item.openingTime[1]}}-{{item.closingTime[0] + ":" + item.closingTime[1]}}
<view> </view>
<!-- #ifdef H5 --> <view class="status" v-if="item.stat == 0">未营业</view>
<a class="store-phone" :href="'tel:' + item.phone"> <view class="status" v-if="item.stat == 1">营业中</view>
<view class="iconfont"> </view>
<view class="ss-rest-button"> <view class="row-right ss-flex-col ss-col-center">
<text class="_icon-forward" /> <view>
</view> <!-- #ifdef H5 -->
</view> <!-- <a class="store-phone" :href="'tel:' + item.phone">
</a> <view class="iconfont">
<!-- #endif --> <view class="ss-rest-button">
<!-- #ifdef MP --> <text class="_icon-forward" />
<view class="store-phone" @click="call(item.phone)"> </view>
<view class="iconfont"> </view>
<view class="ss-rest-button"> </a> -->
<text class="_icon-forward" /> <!-- #endif -->
</view> <!-- #ifdef MP -->
</view> <!-- <view class="store-phone" @click="call(item.phone)">
</view> <view class="iconfont">
<!-- #endif --> <view class="ss-rest-button">
</view> <text class="_icon-forward" />
<view class="store-distance ss-flex ss-row-center" @tap.stop="showMaoLocation(item)"> </view>
<text class="addressTxt" v-if="item.distance">距离{{ item.distance.toFixed(2) }}千米</text> </view>
<text class="addressTxt" v-else>查看地图</text> </view> -->
<view class="iconfont"> <!-- #endif -->
<view class="ss-rest-button"> </view>
<text class="_icon-forward" /> <view class="store-distance ss-flex ss-row-center">
</view> <view class="addressTxt" v-if="item.distance==0 || item.distance">
</view> 距离{{ item.distance.toFixed(2) }}km</view>
</view> <!-- <text class="addressTxt" v-else>查看地图</text> -->
</view> <!-- <view class="iconfont">
</view> <view class="ss-rest-button">
</view> <text class="_icon-forward" />
</s-layout> </view>
</view> -->
<view class="tb">
<image @tap.stop="showMaoLocation(item)" style="margin-right:10px;"
src="https://zysc.fjptzykj.com:3000/shangcheng/c7362f85726ef0030b407f1c3749c710ca0caa51fee5cc8ffbb64e11226354a8.png"
class="img"></image>
<image @click="call(item.phone)"
src="https://zysc.fjptzykj.com:3000/shangcheng/535ee6f79e04d4b6e46fcfa59ed052f214ad6ab756c340c0c040e68357f68e9a.png"
class="img"></image>
</view>
</view>
</view>
</view>
</view>
</s-layout>
</template> </template>
<script setup> <script setup>
import DeliveryApi from '@/sheep/api/trade/delivery'; import DeliveryApi from '@/sheep/api/trade/delivery';
import { onMounted, reactive } from 'vue'; import {
import { onLoad } from '@dcloudio/uni-app'; onMounted,
import sheep from '@/sheep'; reactive
} from 'vue';
import {
onLoad
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
const LONGITUDE = 'user_longitude'; const LONGITUDE = 'user_longitude';
const LATITUDE = 'user_latitude'; const LATITUDE = 'user_latitude';
const state = reactive({ const state = reactive({
loaded: false, loaded: false,
loading: false, loading: false,
storeList: [], storeList: [],
system_store: {}, system_store: {},
locationShow: false, locationShow: false,
user_latitude: 0, user_latitude: 0,
user_longitude: 0, user_longitude: 0,
}); });
const call = (phone) => { const call = (phone) => {
uni.makePhoneCall({ uni.makePhoneCall({
phoneNumber: phone, phoneNumber: phone,
}); });
}; };
const selfLocation = () => { const selfLocation = () => {
// #ifdef H5 // #ifdef H5
const jsWxSdk = sheep.$platform.useProvider('wechat').jsWxSdk; const jsWxSdk = sheep.$platform.useProvider('wechat').jsWxSdk;
if (jsWxSdk.isWechat()) { if (!!jsWxSdk?.isWechat()) {
jsWxSdk.getLocation((res) => { jsWxSdk.getLocation((res) => {
console.log(res); state.user_latitude = res.latitude;
state.user_latitude = res.latitude; state.user_longitude = res.longitude;
state.user_longitude = res.longitude; uni.setStorageSync(LATITUDE, res.latitude);
uni.setStorageSync(LATITUDE, res.latitude); uni.setStorageSync(LONGITUDE, res.longitude);
uni.setStorageSync(LONGITUDE, res.longitude); getList();
getList(); });
}); } else {
} else { // #endif
// #endif uni.getLocation({
uni.getLocation({ type: 'gcj02',
type: 'gcj02', success: (res) => {
success: (res) => { console.log(res.latitude, "--------经纬度-----");
try { try {
state.user_latitude = res.latitude; state.user_latitude = res.latitude;
state.user_longitude = res.longitude; state.user_longitude = res.longitude;
uni.setStorageSync(LATITUDE, res.latitude); uni.setStorageSync(LATITUDE, res.latitude);
uni.setStorageSync(LONGITUDE, res.longitude); uni.setStorageSync(LONGITUDE, res.longitude);
} catch { } catch {}
}
getList();
},
complete: () => {
getList();
},
});
// #ifdef H5
}
// #endif
};
const showMaoLocation = (e) => {
// #ifdef H5
const jsWxSdk = sheep.$platform.useProvider('wechat').jsWxSdk;
if (jsWxSdk.isWechat()) {
jsWxSdk.openLocation({
latitude: Number(e.latitude),
longitude: Number(e.longitude),
name: e.name,
address: `${e.areaName}-${e.detailAddress}`
});
} else {
// #endif
uni.openLocation({
latitude: Number(e.latitude),
longitude: Number(e.longitude),
name: e.name,
address: `${e.areaName}-${e.detailAddress}`,
success: function() {
console.log('success');
},
});
// #ifdef H5
}
// #endif
};
/** getList();
* 选中门店 },
*/ complete: () => {
const checked = (addressInfo) => { getList();
uni.$emit('SELECT_PICK_UP_INFO', { },
addressInfo, fail(error) {
}); console.log(error, "错误")
sheep.$router.back(); }
}; });
console.log("有执行")
// #ifdef H5
}
// #endif
};
const showMaoLocation = (e) => {
// #ifdef H5
const jsWxSdk = sheep.$platform.useProvider('wechat').jsWxSdk;
if (jsWxSdk.isWechat()) {
jsWxSdk.openLocation({
latitude: Number(e.latitude),
longitude: Number(e.longitude),
name: e.name,
address: `${e.areaName}-${e.detailAddress}`
});
} else {
// #endif
uni.openLocation({
latitude: Number(e.latitude),
longitude: Number(e.longitude),
name: e.name,
address: `${e.areaName}-${e.detailAddress}`,
success: function() {
console.log('success');
},
});
// #ifdef H5
}
// #endif
};
/** /**
* 获取门店列表数据 * 选中门店
*/ */
const getList = async () => { const checked = (addressInfo) => {
if (state.loading || state.loaded) { uni.$emit('SELECT_PICK_UP_INFO', {
return; addressInfo,
} });
state.loading = true; sheep.$router.back();
const { data, code } = await DeliveryApi.getDeliveryPickUpStoreList({ };
latitude: state.user_latitude,
longitude: state.user_longitude,
});
if (code !== 0) {
return;
}
state.loading = false;
state.storeList = data;
};
onMounted(() => { /**
if (state.user_latitude && state.user_longitude) { * 获取门店列表数据
getList(); */
} else { const getList = async () => {
selfLocation(); if (state.loading || state.loaded) {
getList(); return;
} }
}); state.loading = true;
onLoad(() => { console.log(state.user_latitude, state.user_longitude, "------user_longitude-------")
try { const data2 = {
state.user_latitude = uni.getStorageSync(LATITUDE); latitude: state.user_latitude,
state.user_longitude = uni.getStorageSync(LONGITUDE); longitude: state.user_longitude,
} catch (e) { };
// error const {
} data,
}); code
} = await DeliveryApi.getDeliveryPickUpStoreList(data2);
if (code !== 0) {
return;
}
state.loading = false;
state.storeList = data;
};
onMounted(() => {
if (state.user_latitude && state.user_longitude) {
getList();
} else {
selfLocation();
getList();
}
});
onLoad(() => {
try {
state.user_latitude = uni.getStorageSync(LATITUDE);
state.user_longitude = uni.getStorageSync(LONGITUDE);
console.log(state.user_latitude, state.user_longitude, "user_longitude");
} catch (e) {
// error
}
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.line1 { .status {
overflow: hidden; background: rgba(214, 81, 42);
text-overflow: ellipsis; width: 56px;
white-space: nowrap text-align: center;
} color: white;
border-radius: 3px;
margin-top: 10px;
}
.geoPage { .line1 {
position: fixed; overflow: hidden;
width: 100%; text-overflow: ellipsis;
height: 100%; white-space: nowrap
top: 0; }
z-index: 10000;
}
.storeBox { .geoPage {
width: 100%; position: fixed;
background-color: #fff; width: 100%;
padding: 0 30rpx; height: 100%;
} top: 0;
z-index: 10000;
}
.storeBox-box { .storeBox {
width: 100%; width: 100%;
height: auto; }
display: flex;
align-items: center;
padding: 23rpx 0;
justify-content: space-between;
border-bottom: 1px solid #eee;
}
.store-cent { .storeBox-box {
display: flex; background-color: #fff;
align-items: center; // width: 100%;
width: 80%; height: auto;
} display: flex;
align-items: center;
padding: 23rpx;
justify-content: space-around;
border-bottom: 1px solid #eee;
margin: 10px 10px;
boeder-radius: 10px;
}
.store-cent-left { .store-cent {
width: 177px; display: flex;
// flex: 2; align-items: center;
} width: 80%;
}
.store-img { .store-cent-left {
// flex: 1; // width: 177px;
width: 120rpx; flex: 1;
height: 120rpx; max-width: 185px;
border-radius: 6rpx; position: relative;
margin-right: 22rpx; padding-right: 10px;
}
.store-img .img { &::after {
width: 100%; position: absolute;
height: 100%; content: '';
} width: 2px;
height: 100%;
background: rgba(223, 223, 223);
right: 0;
top: 0;
}
.store-name { }
color: #282828;
font-size: 30rpx;
margin-bottom: 22rpx;
font-weight: 800;
}
.store-address { .store-img {
color: #666666; // flex: 1;
font-size: 24rpx; width: 120rpx;
} height: 120rpx;
border-radius: 6rpx;
margin-right: 22rpx;
}
.store-phone { .store-img .img {
width: 50rpx; width: 100%;
height: 50rpx; height: 100%;
color: #fff; }
border-radius: 50%;
display: block;
text-align: center;
line-height: 48rpx;
background-color: #e83323;
margin-bottom: 22rpx;
text-decoration: none;
}
.store-distance { .store-name {
font-size: 22rpx; color: #282828;
color: #e83323; font-size: 30rpx;
} margin-bottom: 22rpx;
font-weight: 800;
}
.iconfont { .store-address {
font-size: 20rpx; color: #666666;
} font-size: 24rpx;
}
.row-right { .store-phone {
flex: 2; width: 50rpx;
//display: flex; height: 50rpx;
//flex-direction: column; color: #fff;
//align-items: flex-end; border-radius: 50%;
//width: 33.5%; display: block;
} text-align: center;
line-height: 48rpx;
background-color: #e83323;
margin-bottom: 22rpx;
text-decoration: none;
}
.store-distance {
font-size: 22rpx;
color: #e83323;
flex-wrap: wrap;
.addressTxt {
width: 100%;
text-align: center;
margin-bottom: 10px;
}
.tb {
display: flex;
align-items: center;
justify-content: space-around;
.img {
width: 30px;
height: 30px;
}
}
}
.iconfont {
font-size: 20rpx;
}
.row-right {
flex: 1;
margin-left:10px;
//display: flex;
//flex-direction: column;
//align-items: flex-end;
//width: 33.5%;
}
</style> </style>

View File

@ -271,7 +271,7 @@
.swiper { .swiper {
position: relative; position: relative;
top: -353px; top: -288px;
.new-img { .new-img {
width: 90%; width: 90%;
@ -300,7 +300,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 100%; width: 100%;
height: 415px; height: 348px;
background-color: #3b5086; background-color: #3b5086;
.picTxt { .picTxt {
@ -351,8 +351,8 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 690rpx; width: 690rpx;
height: 360rpx; height: 144px;
margin: -315px auto 0 auto; margin: -275px auto 0 auto;
border-radius: 23rpx; border-radius: 23rpx;
padding: 22rpx 27rpx; padding: 22rpx 27rpx;
box-sizing: border-box; box-sizing: border-box;
@ -535,7 +535,7 @@
.public_title { .public_title {
color: #282828; color: #282828;
font-size: 30rpx; font-size: 30rpx;
align-items: center;
.icons { .icons {
width: 6rpx; width: 6rpx;
height: 28rpx; height: 28rpx;

View File

@ -9,9 +9,10 @@ const DeliveryApi = {
}); });
}, },
// 获得自提门店列表 // 获得自提门店列表
getDeliveryPickUpStoreList: () => { getDeliveryPickUpStoreList: (data) => {
return request({ return request({
url: `/trade/delivery/pick-up-store/list`, url: `/trade/delivery/pick-up-store/list`,
params:data,
method: 'get', method: 'get',
}); });
}, },

View File

@ -369,7 +369,7 @@
import { import {
PromotionActivityTypeEnum PromotionActivityTypeEnum
} from '@/sheep/util/const'; } from '@/sheep/util/const';
console.log(PromotionActivityTypeEnum,"PromotionActivityTypeEnum")
// //
const props = defineProps({ const props = defineProps({
goodsFields: { goodsFields: {

View File

@ -130,6 +130,7 @@
btnBuy, btnBuy,
activityIds activityIds
} = props.data || {}; } = props.data || {};
const { const {
marginLeft, marginLeft,
marginRight marginRight
@ -217,7 +218,7 @@
for (const activity of activityList) { for (const activity of activityList) {
state.spuList.push(await getSpuDetail(activity.spuId)); state.spuList.push(await getSpuDetail(activity.spuId));
} }
console.log(state.spuList,"state.spuList");
// //
activityList.forEach((activity) => { activityList.forEach((activity) => {
// spu // spu