兑换积分商品的全部列表页面实施。地址页面优化与对里面的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": {},
"lazyCodeLoading": "requiredComponents",
"usingComponents": {},
"permission": {},
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于选择定位"
}
},
"requiredPrivateInfos": [
"chooseAddress"
"chooseAddress",
"getLocation"
]
},
"mp-alipay": {

View File

@ -1,100 +1,48 @@
<!-- 自定义页面支持装修 -->
<template>
<s-layout title="兑换商品列表" :bgStyle="{ color: '#fff' }">
<!-- 营销组件积分商城 -->
<view class="goods-lg-box">
<view class="goods-box" v-for="item in pointList"
:key="item.id">
<s-goods-column class="goods-card" size="lg" :data="item"
@tap="sheep.$router.go('/pages/goods/point', { id: item.activityId })">
<!-- 购买按钮 -->
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
去兑换
</button>
</template>
</s-goods-column>
</view>
</view>
</s-layout>
<s-layout title="商品列表" :bgStyle="{ color: '#fff' }">
<view style="margin-top:10px;">
<s-block v-for="(item, index) in state.components" :key="index">
<!-- <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" /> -->
<!-- 营销组件积分商城 -->
<s-point-block v-if="item.id === 'PromotionPoint'" :data="item.property" :styles="item.property.style" />
</s-block>
</view>
</s-layout>
</template>
<script setup>
import {
computed,
ref
} 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)
});
}
import { reactive } from 'vue';
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
import DiyApi from '@/sheep/api/promotion/diy';
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>
<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>
<style></style>

View File

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

View File

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

View File

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

View File

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

View File

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