tmp: 部分代码与UnishopV5结合，但是代码有严重缺陷
This commit is contained in:
412
pages_tool/store/detail.vue
Normal file
412
pages_tool/store/detail.vue
Normal file
@@ -0,0 +1,412 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view class="store-detail" v-if="store">
|
||||
<view class="detail-head" :style="{ height: swiperHeight }">
|
||||
<swiper class="swiper" @change="swiperChange" autoplay="true" interval="4000" circular="true">
|
||||
<swiper-item v-for="(item, index) in store.store_images.images" :key="index" :item-id="'store_id_' + index">
|
||||
<view class="item" @click="previewMedia(index)">
|
||||
<image :src="$util.img(item)" @error="swiperImageError(index)" mode="aspectFit" />
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="img-indicator-dots" v-if="store.store_images.images && store.store_images.images.length">
|
||||
<text>{{ swiperCurrent }}</text>
|
||||
<text>/{{ store.store_images.images.length }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="detail-content">
|
||||
<view class="content-item">
|
||||
<view class="store-name multi-hidden">{{ store.store_name }}</view>
|
||||
<view class="store-state" :class="store.is_frozen.is_frozen == 1 || store.status == 0 ? 'warning' : ''">
|
||||
{{ (store.is_frozen.is_frozen == 1 && '已停业') || (store.status == 0 && '休息中') || (store.status == 1 && '营业中') || '--' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="content-item store-time-wrap" v-if="store.open_date || store.is_default || store.is_pickup || store.is_o2o || store.is_express">
|
||||
<view v-if="store.status == 0 && store.close_desc" class="close-desc">{{ store.close_desc }}</view>
|
||||
<view class="store-time" v-if="store.open_date">{{ store.open_date }}</view>
|
||||
<view class="tag-wrap" v-if="store.is_default || store.is_pickup || store.is_o2o || store.is_express">
|
||||
<text class="tag-item" v-if="store.is_default == 1">总店</text>
|
||||
<text class="tag-item" v-if="store.is_pickup == 1">门店自提</text>
|
||||
<text class="tag-item" v-if="store.is_o2o == 1">同城配送</text>
|
||||
<text class="tag-item" v-if="store.is_express == 1">物流配送</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content-item address-wrap" v-if="store.show_address || store.distance">
|
||||
<view class="address-box">
|
||||
<view class="address-name" v-if="store.show_address">{{ store.show_address }}</view>
|
||||
<view class="address-location" v-if="store.distance">
|
||||
<text class="icondiy icon-system-weizhi"></text>
|
||||
<text>距您当前位置{{ store.distance }}km</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="icondiy icon-daohang" @click="mapRoute()"></text>
|
||||
</view>
|
||||
<view class="content-item telphone-wrap" v-if="store.telphone">
|
||||
<text v-if="store.telphone" class="telphone">{{ store.telphone }}</text>
|
||||
<text class="iconfont icon-dianhua" @click="phoneCall"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="detail-map">
|
||||
<view class="map-head">门店地图</view>
|
||||
<map class="map-body" :latitude="store.latitude" :longitude="store.longitude" :markers="covers"></map>
|
||||
</view>
|
||||
<!-- <view class="store-action-fill"></view>
|
||||
<view class="store-action"><button type="primary" @click="storeTap()">进入门店</button></view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Map from '@/common/js/map/openMap.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
storeId: 0,
|
||||
latitude: null, // 纬度
|
||||
longitude: null, // 经度
|
||||
covers: [],
|
||||
store: null,
|
||||
swiperCurrent: 1,
|
||||
swiperHeight: ''
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.storeId = options.store_id || 0;
|
||||
if (this.location) {
|
||||
this.latitude = this.location.latitude;
|
||||
this.longitude = this.location.longitude;
|
||||
} else if (this.mapConfig.wap_is_open == 1) {
|
||||
this.$util.getLocation();
|
||||
}
|
||||
this.getInfo();
|
||||
},
|
||||
watch: {
|
||||
location: function(nVal) {
|
||||
if (nVal) {
|
||||
this.latitude = nVal.latitude;
|
||||
this.longitude = nVal.longitude;
|
||||
this.getInfo();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//打电话
|
||||
phoneCall() {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: this.store.telphone //仅为示例
|
||||
});
|
||||
},
|
||||
//获取门店详情
|
||||
getInfo() {
|
||||
let data = {
|
||||
store_id: this.storeId
|
||||
};
|
||||
if (this.latitude && this.longitude) {
|
||||
data.latitude = this.latitude;
|
||||
data.longitude = this.longitude;
|
||||
}
|
||||
this.$api.sendRequest({
|
||||
url: '/api/store/info',
|
||||
data: data,
|
||||
success: res => {
|
||||
if (res.data) {
|
||||
// 默认数据
|
||||
let defaultData = {
|
||||
full_address: '',
|
||||
address: '',
|
||||
store_images: []
|
||||
};
|
||||
|
||||
this.store = res.data || defaultData;
|
||||
this.covers.push({
|
||||
id: 1,
|
||||
latitude: this.store.latitude,
|
||||
longitude: this.store.longitude,
|
||||
iconPath: this.$util.img('public/uniapp/store/map_icon.png'),
|
||||
height: 25
|
||||
});
|
||||
this.store.show_address = this.store.full_address.replace(/,/g, ' ') + ' ' + this
|
||||
.store.address;
|
||||
this.handleStoreImage();
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: '门店不存在'
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.$util.redirectTo('/pages_tool/store/list', {}, 'redirectTo');
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 处理门店图片+图片高度
|
||||
handleStoreImage() {
|
||||
if (!this.store.store_images) this.store.store_images = [];
|
||||
this.store.store_images = this.store.store_images.reduce((pre, cur) => {
|
||||
// 图片
|
||||
if (!pre.images) pre.images = [];
|
||||
if (pre.images) pre.images.push(cur.pic_path);
|
||||
// 图片规格
|
||||
if (!pre.spec) pre.spec = [];
|
||||
if (pre.spec) pre.spec.push(cur.pic_spec);
|
||||
return pre;
|
||||
}, {});
|
||||
|
||||
let maxHeight = '';
|
||||
if (this.store.store_images.spec) {
|
||||
this.store.store_images.spec.forEach((item, index) => {
|
||||
if (typeof item == 'string') item = item.split('*');
|
||||
|
||||
uni.getSystemInfo({
|
||||
success: res => {
|
||||
let ratio = item[0] / res.windowWidth;
|
||||
item[0] = item[0] / ratio;
|
||||
item[1] = item[1] / ratio;
|
||||
}
|
||||
});
|
||||
|
||||
if (!maxHeight || maxHeight > item[1]) {
|
||||
maxHeight = item[1];
|
||||
}
|
||||
});
|
||||
}
|
||||
this.swiperHeight = Number(maxHeight) + 'px';
|
||||
|
||||
if (!Object.keys(this.store.store_images).length) {
|
||||
this.store.store_images = {};
|
||||
this.store.store_images.images = [this.$util.img('public/static/img/default_img/square.png')];
|
||||
this.store.store_images.spec = ['350*350'];
|
||||
this.swiperHeight = '380px';
|
||||
}
|
||||
},
|
||||
swiperChange(e) {
|
||||
this.swiperCurrent = e.detail.current + 1;
|
||||
},
|
||||
mapRoute() {
|
||||
Map.openMap(Number(this.store.latitude), Number(this.store.longitude), this.store.store_name, 'gcj02');
|
||||
},
|
||||
swiperImageError() {
|
||||
this.store.store_images.images = this.$util.img('public/static/img/default_img/square.png');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #f5f6fa;
|
||||
}
|
||||
|
||||
.store-detail {
|
||||
.detail-head {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
background-color: #fff;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 112rpx;
|
||||
background-image: linear-gradient(transparent 10%, #f5f6fa);
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.img-indicator-dots {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
bottom: 60rpx;
|
||||
right: 40rpx;
|
||||
background: rgba(100, 100, 100, 0.4);
|
||||
color: #fff;
|
||||
font-size: $font-size-tag;
|
||||
line-height: 40rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
margin: -30rpx 30rpx 30rpx;
|
||||
padding: 0 24rpx;
|
||||
border-radius: 18rpx;
|
||||
z-index: 9;
|
||||
|
||||
.content-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2rpx solid #ededed;
|
||||
padding: 24rpx 0;
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.store-name {
|
||||
font-size: $font-size-toolbar;
|
||||
font-weight: bold;
|
||||
line-height: 1.5;
|
||||
padding: 6rpx 0;
|
||||
}
|
||||
|
||||
.store-state {
|
||||
padding: 8rpx 10rpx;
|
||||
font-size: $font-size-tag;
|
||||
border: 2rpx solid #66ad95;
|
||||
color: #66ad95;
|
||||
border-radius: 4rpx;
|
||||
line-height: 1;
|
||||
&.warning{
|
||||
color:red;
|
||||
border-color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.store-time-wrap {
|
||||
flex-direction: column;
|
||||
align-items: baseline;
|
||||
|
||||
.store-time {
|
||||
font-size: $font-size-tag;
|
||||
color: $color-sub;
|
||||
}
|
||||
|
||||
.close-desc{
|
||||
color:red;
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
|
||||
.tag-wrap {
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.tag-item {
|
||||
padding: 8rpx 10rpx;
|
||||
margin-right: 10rpx;
|
||||
color: #6f7dad;
|
||||
background: #f4f5fa;
|
||||
border-radius: 6rpx;
|
||||
line-height: 1;
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.telphone-wrap {
|
||||
padding: 26rpx 0;
|
||||
|
||||
.telphone {
|
||||
font-weight: bold;
|
||||
color: $base-color;
|
||||
font-size: $font-size-sub;
|
||||
}
|
||||
|
||||
&>.iconfont {
|
||||
width: 60rpx;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
text-align: center;
|
||||
background-color: #f4f5fa;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.address-wrap {
|
||||
.address-name {
|
||||
width: 520rpx;
|
||||
line-height: 1.5;
|
||||
color: $color-sub;
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
|
||||
.address-location {
|
||||
margin-top: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: $font-size-tag;
|
||||
color: #999ca7;
|
||||
|
||||
.icondiy {
|
||||
font-size: $font-size-tag;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&>.icondiy {
|
||||
width: 60rpx;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
text-align: center;
|
||||
background-color: #f4f5fa;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail-map {
|
||||
background-color: #fff;
|
||||
margin: 0 30rpx 30rpx;
|
||||
border-radius: 18rpx;
|
||||
margin-bottom: calc(constant(safe-area-inset-bottom) + 170rpx);
|
||||
margin-bottom: calc(env(safe-area-inset-bottom) + 170rpx);
|
||||
|
||||
.map-head {
|
||||
padding-left: 24rpx;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
font-size: $font-size-toolbar;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.map-body {
|
||||
width: 100%;
|
||||
height: 460rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.store-action-fill {
|
||||
padding-bottom: calc(constant(safe-area-inset-bottom) + 170rpx);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 170rpx);
|
||||
}
|
||||
|
||||
.store-action {
|
||||
position: fixed;
|
||||
background-color: #fff;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 30rpx 0;
|
||||
|
||||
button {
|
||||
width: 406rpx;
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
444
pages_tool/store/list.vue
Normal file
444
pages_tool/store/list.vue
Normal file
@@ -0,0 +1,444 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view class="store-list-wrap">
|
||||
<view class="curr-store" v-if="globalStoreConfig && globalStoreConfig.store_business == 'store'">
|
||||
<view class="store-desc">当前定位</view>
|
||||
<view class="store-name-wrap">
|
||||
<view class="store-name multi-hidden">{{ currentPosition || '定位中...' }}</view>
|
||||
<view class="store-position" @click="reposition()">
|
||||
<text class="iconfont icon-dingwei"></text>
|
||||
<text>重新定位</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="store-list-box">
|
||||
<view class="store-list-head">
|
||||
<view class="head-name">门店列表</view>
|
||||
<view class="head-search">
|
||||
<text class="iconfont icon-sousuo" @click="getData()"></text>
|
||||
<input type="text" v-model="keyword" placeholder-class="input-placeholder" placeholder="搜索门店" @confirm="getData()" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y="true" class="store-list-body" :style="{ height: globalStoreConfig && globalStoreConfig.store_business == 'store' ? 'calc(100vh - 320rpx)' : '' }">
|
||||
<view :class="['store-item', { active: globalStoreInfo && item.store_id == globalStoreInfo.store_id }]" v-for="(item, index) in dataList" :key="index" @click="storeTap(item)">
|
||||
<view class="item-state" :class="item.is_frozen.is_frozen == 1 || item.status == 0 ? 'warning' : ''">
|
||||
{{ (item.is_frozen.is_frozen == 1 && '已停业') || (item.status == 0 && '休息中') || (item.status == 1 && '营业中') || '--' }}
|
||||
</view>
|
||||
<view class="item-name multi-hidden">{{ item.store_name }}</view>
|
||||
<view class="item-close-desc" v-if="item.status == 0 && item.close_desc">
|
||||
{{ item.close_desc }}
|
||||
</view>
|
||||
<view class="item-time">
|
||||
<view class="item-time-left">
|
||||
<text class="iconfont icon-shijian1"></text>
|
||||
<text>{{ item.open_date || '--' }}</text>
|
||||
</view>
|
||||
<view class="item-time-right" v-if="item.distance">
|
||||
{{ item.distance > 1 ? item.distance + 'km' : item.distance * 1000 + 'm' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-address">
|
||||
<text class="iconfont icon-location"></text>
|
||||
<text>{{ item.show_address }}</text>
|
||||
</view>
|
||||
<view class="item-other">
|
||||
<view class="other-tag-wrap">
|
||||
<text class="tag-item" v-if="item.is_default == 1">总店</text>
|
||||
<text class="tag-item" v-if="item.is_pickup == 1">门店自提</text>
|
||||
<text class="tag-item" v-if="item.is_o2o == 1">同城配送</text>
|
||||
<text class="tag-item" v-if="item.is_express == 1">物流配送</text>
|
||||
</view>
|
||||
<view class="other-action" @click.stop="selectStore(item)">
|
||||
<text>详情</text>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<ns-empty v-if="!dataList.length" text="您的附近暂无可选门店" :isIndex="false"></ns-empty>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<loading-cover ref="loadingCover"></loading-cover>
|
||||
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<!-- 小程序隐私协议 -->
|
||||
<privacy-popup ref="privacyPopup"></privacy-popup>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Config from '@/common/js/config.js';
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
dataList: [],
|
||||
latitude: null, // 纬度
|
||||
longitude: null, // 经度
|
||||
currentPosition: '', //当前位置
|
||||
keyword: '' //搜索内容
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
location: function(nVal) {
|
||||
if (nVal) {
|
||||
this.latitude = nVal.latitude;
|
||||
this.longitude = nVal.longitude;
|
||||
this.getData();
|
||||
this.getCurrentLocation();
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
// #ifdef H5
|
||||
// H5地图选择位置回调数据
|
||||
if (option.module && option.module == 'locationPicker') {
|
||||
this.latitude = option.latng.split(',')[0];
|
||||
this.longitude = option.latng.split(',')[1];
|
||||
this.currentPosition = option.addr + option.name;
|
||||
}
|
||||
// #endif
|
||||
|
||||
//地图选点已经选中坐标的话就不要再重复选择了
|
||||
if(!this.currentPosition){
|
||||
if (this.location) {
|
||||
this.latitude = this.location.latitude;
|
||||
this.longitude = this.location.longitude;
|
||||
this.getCurrentLocation();
|
||||
} else if (this.mapConfig.wap_is_open == 1) {
|
||||
this.$nextTick(()=>{
|
||||
this.$util.getLocation({
|
||||
fail: res => {
|
||||
// 拒绝定位
|
||||
this.currentPosition = '未获取到定位';
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
this.getData();
|
||||
},
|
||||
onShow() {
|
||||
// 定位信息过期后，重新获取定位
|
||||
if(this.mapConfig.wap_is_open == 1 && this.locationStorage && this.locationStorage.is_expired) {
|
||||
this.$util.getLocation({
|
||||
fail: (res) => {
|
||||
// 拒绝定位
|
||||
this.currentPosition = '未获取到定位';
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
let data = {};
|
||||
data.keyword = this.keyword;
|
||||
if (this.latitude && this.longitude) {
|
||||
data.latitude = this.latitude;
|
||||
data.longitude = this.longitude;
|
||||
}
|
||||
|
||||
this.$api.sendRequest({
|
||||
url: '/api/store/page',
|
||||
data: data,
|
||||
success: res => {
|
||||
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
||||
if (res.code == 0 && res.data) {
|
||||
this.dataList = res.data.list;
|
||||
this.dataList.forEach(item => {
|
||||
item.show_address = item.full_address.replace(/,/g, ' ') + ' ' + item.address;
|
||||
});
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: res => {
|
||||
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
||||
}
|
||||
});
|
||||
},
|
||||
storeTap(item) {
|
||||
uni.setStorageSync('manual_store_info', item); // 记录手动切换的门店
|
||||
this.changeStore(item, true); // 切换门店数据
|
||||
},
|
||||
selectStore(item) {
|
||||
this.$util.redirectTo('/pages_tool/store/detail', {
|
||||
store_id: item.store_id
|
||||
});
|
||||
},
|
||||
// 根据经纬度获取位置
|
||||
getCurrentLocation() {
|
||||
let data = {};
|
||||
if (this.latitude && this.longitude) {
|
||||
data.latitude = this.latitude;
|
||||
data.longitude = this.longitude;
|
||||
}
|
||||
|
||||
this.$api.sendRequest({
|
||||
url: '/api/store/getLocation',
|
||||
data: data,
|
||||
success: res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
this.currentPosition = res.data.formatted_addresses.recommend; // 结合知名地点形成的描述性地址，更具人性化特点
|
||||
} else {
|
||||
this.currentPosition = '未获取到定位';
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 打开地图重新选择位置
|
||||
reposition() {
|
||||
// #ifdef MP
|
||||
uni.chooseLocation({
|
||||
success: res => {
|
||||
this.latitude = res.latitude;
|
||||
this.longitude = res.longitude;
|
||||
this.currentPosition = res.name;
|
||||
this.getData();
|
||||
this.getCurrentLocation();
|
||||
},
|
||||
fail(res) {
|
||||
uni.getSetting({
|
||||
success: function(res) {
|
||||
var statu = res.authSetting;
|
||||
if (!statu['scope.userLocation']) {
|
||||
uni.showModal({
|
||||
title: '是否授权当前位置',
|
||||
content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
|
||||
success(tip) {
|
||||
if (tip.confirm) {
|
||||
uni.openSetting({
|
||||
success: function(data) {
|
||||
if (data.authSetting['scope.userLocation'] === true) {
|
||||
this.$util.showToast({
|
||||
title: '授权成功'
|
||||
});
|
||||
//授权成功之后，再调用chooseLocation选择地方
|
||||
setTimeout(function() {
|
||||
uni.chooseLocation({
|
||||
success: data => {
|
||||
this.latitude = res.latitude;
|
||||
this.longitude = res.longitude;
|
||||
this.currentPosition = res.name;
|
||||
this.getData();
|
||||
this.getCurrentLocation();
|
||||
}
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: '授权失败'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
|
||||
// #ifdef H5
|
||||
let backurl = Config.h5Domain + '/pages_tool/store/list'; // 地图选择位置后的回调页面路径
|
||||
window.location.href = 'https://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=' + encodeURIComponent(backurl) + '&key=' + Config.mpKey + '&referer=myapp';
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
/deep/ .input-placeholder {
|
||||
color: #b3b4b9;
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.store-list-wrap {
|
||||
.curr-store {
|
||||
background-color: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 20rpx 24rpx 0;
|
||||
|
||||
.store-desc {
|
||||
font-size: $font-size-tag;
|
||||
color: #636363;
|
||||
}
|
||||
|
||||
.store-name-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12rpx 0 30rpx;
|
||||
|
||||
.store-name {
|
||||
width: 500rpx;
|
||||
font-size: $font-size-sub;
|
||||
font-weight: bold;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.store-position {
|
||||
font-size: $font-size-tag;
|
||||
color: #df5948;
|
||||
|
||||
.iconfont {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.store-list-box {
|
||||
background-color: #fff;
|
||||
padding: 0 24rpx 24rpx;
|
||||
|
||||
.store-list-head {
|
||||
padding: 34rpx 0 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.head-name {
|
||||
font-size: $font-size-sub;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.head-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 218rpx;
|
||||
height: 68rpx;
|
||||
background-color: #f0f1f3;
|
||||
border-radius: 50rpx;
|
||||
color: #b3b4b9;
|
||||
padding: 0 26rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.iconfont {
|
||||
font-size: $font-size-sub;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
input {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.store-list-body {
|
||||
.store-item {
|
||||
margin: 20rpx 6rpx 30rpx;
|
||||
padding: 26rpx 28rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: baseline;
|
||||
box-shadow: 0 0 10rpx 0 rgba(128, 132, 148, 0.3);
|
||||
border-radius: 10rpx;
|
||||
|
||||
&.active {
|
||||
border: 2rpx solid #df5948;
|
||||
}
|
||||
|
||||
.item-state {
|
||||
padding: 8rpx 10rpx;
|
||||
font-size: $font-size-tag;
|
||||
border: 2rpx solid #66ad95;
|
||||
color: #66ad95;
|
||||
border-radius: 4rpx;
|
||||
line-height: 1;
|
||||
&.warning{
|
||||
color:red;
|
||||
border-color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.item-name {
|
||||
margin: 24rpx 0 10rpx;
|
||||
font-size: $font-size-toolbar;
|
||||
font-weight: bold;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.item-close-desc{
|
||||
font-size: $font-size-tag;
|
||||
color:red;
|
||||
}
|
||||
|
||||
.item-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
.item-time-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: $font-size-tag;
|
||||
color: #5f6067;
|
||||
|
||||
.iconfont {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-time-right {
|
||||
color: #5f6067;
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
}
|
||||
|
||||
.item-address {
|
||||
margin-top: 6rpx;
|
||||
font-size: $font-size-tag;
|
||||
color: #5f6067;
|
||||
line-height: 1.3;
|
||||
|
||||
.iconfont {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-other {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 26rpx;
|
||||
|
||||
.other-tag-wrap {
|
||||
.tag-item {
|
||||
padding: 8rpx 12rpx;
|
||||
margin-right: 20rpx;
|
||||
font-size: $font-size-tag;
|
||||
color: #77ab69;
|
||||
background-color: #f3f9ed;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.other-action {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
font-size: $font-size-tag;
|
||||
color: #df5948;
|
||||
line-height: 1;
|
||||
|
||||
.iconfont {
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
401
pages_tool/store/payment_qrcode.vue
Normal file
401
pages_tool/store/payment_qrcode.vue
Normal file
@@ -0,0 +1,401 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view class="container">
|
||||
<view v-if="payInfo && memberInfo">
|
||||
<view class="paycode-wrap">
|
||||
<view class="member-wrap">
|
||||
<view class="headimg" @click="getWxAuth">
|
||||
<image :src="memberInfo.headimg ? $util.img(memberInfo.headimg) : $util.getDefaultImage().head" mode="widthFix" @error="memberInfo.headimg = $util.getDefaultImage().head"/>
|
||||
</view>
|
||||
<view class="info-wrap">
|
||||
<view class="nickname">{{ memberInfo.nickname }}</view>
|
||||
<view class="member-level" v-if="memberInfo.member_level" @click="$util.redirectTo(memberInfo.member_level_type ? '/pages_tool/member/card' : '/pages_tool/member/level')">
|
||||
<image :src="$util.img('app/component/view/member_info/img/style_4_vip_tag.png')" mode="widthFix" class="level-icon"></image>
|
||||
<view class="level-name">{{ memberInfo.member_level_name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="recharge" v-if="addonIsExist.memberrecharge && memberrechargeConfig && memberrechargeConfig.is_use" @click="$util.redirectTo('/pages_tool/recharge/list')">
|
||||
去充值
|
||||
</view>
|
||||
</view>
|
||||
<view class="body-wrap">
|
||||
<view class="barcode-wrap">
|
||||
<image :src="payInfo.barcode" class="barcode"></image>
|
||||
</view>
|
||||
<view class="auth-code">
|
||||
<text class="price-font">{{ show ? splitFn(payInfo.auth_code) : payInfo.auth_code.substring(0, 5) + '******' }}</text>
|
||||
<text class="show" v-if="!show" @click="showAuthCode(true)">查看数字</text>
|
||||
<text class="show" v-else @click="showAuthCode(false)">隐藏数字</text>
|
||||
</view>
|
||||
<image :src="payInfo.qrcode" mode="widthFix" class="qrcode"></image>
|
||||
<view class="dynamic-code" @click="getPayAuthCode">
|
||||
<view class="code">
|
||||
动态码
|
||||
<text>{{ payInfo.dynamic_code }}</text>
|
||||
<text class="iconfont icon-shuaxin"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tips">付款码仅用于支付时向收银员出示，请勿发送给他人</view>
|
||||
</view>
|
||||
<view class="footer-wrap">
|
||||
<view class="account-item" @click="$util.redirectTo('/pages_tool/member/point')">
|
||||
<view class="value price-font">{{ parseInt(memberInfo.point) }}</view>
|
||||
<view class="title">积分</view>
|
||||
</view>
|
||||
<view class="split"></view>
|
||||
<view class="account-item" @click="$util.redirectTo('/pages_tool/member/balance')">
|
||||
<view class="value price-font">
|
||||
{{ (parseFloat(memberInfo.balance) + parseFloat(memberInfo.balance_money)) | moneyFormat }}
|
||||
</view>
|
||||
<view class="title">余额</view>
|
||||
</view>
|
||||
<view class="split"></view>
|
||||
<view class="account-item" @click="$util.redirectTo('/pages_tool/member/coupon')">
|
||||
<view class="value price-font">{{ memberInfo.coupon_num ? memberInfo.coupon_num : 0 }}</view>
|
||||
<view class="title">优惠券</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<loading-cover ref="loadingCover"></loading-cover>
|
||||
<ns-login ref="login"></ns-login>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isRepeat: false,
|
||||
payInfo: null,
|
||||
error: 0,
|
||||
timer: null,
|
||||
show: false,
|
||||
memberrechargeConfig: null,
|
||||
screenBrightness: 0
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
uni.setStorageSync('paySource', '');
|
||||
if (this.storeToken) {
|
||||
this.getCouponNum();
|
||||
this.getMemberrechargeConfig();
|
||||
this.getPayAuthCode();
|
||||
|
||||
// #ifndef H5
|
||||
uni.getScreenBrightness({
|
||||
success: res => {
|
||||
this.screenBrightness = res.value;
|
||||
}
|
||||
});
|
||||
|
||||
uni.setScreenBrightness({
|
||||
value: 1,
|
||||
success: function() {}
|
||||
});
|
||||
// #endif
|
||||
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.login.open('/pages_tool/store/payment_qrcode');
|
||||
});
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
getPayAuthCode() {
|
||||
if (this.isRepeat) return;
|
||||
this.isRepeat = true;
|
||||
|
||||
if (this.timer) clearInterval(this.timer);
|
||||
|
||||
this.$api.sendRequest({
|
||||
url: '/api/pay/memberpaycode',
|
||||
success: res => {
|
||||
this.isRepeat = false;
|
||||
if (res.code == 0 && res.data) {
|
||||
this.payInfo = res.data;
|
||||
this.error = 0;
|
||||
this.show = false;
|
||||
// this.refreshPaymentCode();
|
||||
setTimeout(() => {
|
||||
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
||||
}, 100);
|
||||
} else if (this.error < 5) {
|
||||
this.error++;
|
||||
this.getPayAuthCode();
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
refreshPaymentCode() {
|
||||
this.timer = setInterval(() => {
|
||||
this.getPayAuthCode();
|
||||
}, 30000);
|
||||
},
|
||||
showAuthCode(bool) {
|
||||
this.show = bool;
|
||||
},
|
||||
/**
|
||||
* 获取充值提现配置
|
||||
*/
|
||||
getMemberrechargeConfig() {
|
||||
this.$api.sendRequest({
|
||||
url: '/memberrecharge/api/memberrecharge/config',
|
||||
success: res => {
|
||||
if (res.code >= 0 && res.data) {
|
||||
this.memberrechargeConfig = res.data;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 查询优惠券数量
|
||||
*/
|
||||
getCouponNum() {
|
||||
this.$api.sendRequest({
|
||||
url: '/coupon/api/coupon/num',
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
this.memberInfo.coupon_num = res.data;
|
||||
this.$forceUpdate();
|
||||
this.$store.commit('setMemberInfo', this.memberInfo);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
splitFn(str, length = 4) {
|
||||
let reg = new RegExp('[^\n]{1,' + length + '}', 'g');
|
||||
let res = str.match(reg);
|
||||
return res.join(' ');
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
storeToken: function(nVal, oVal) {
|
||||
this.getPayAuthCode();
|
||||
}
|
||||
},
|
||||
onHide() {
|
||||
if (this.timer) clearInterval(this.timer);
|
||||
uni.setScreenBrightness({
|
||||
value: this.screenBrightness,
|
||||
success: function() {}
|
||||
});
|
||||
},
|
||||
onUnload() {
|
||||
if (this.timer) clearInterval(this.timer);
|
||||
|
||||
uni.setScreenBrightness({
|
||||
value: this.screenBrightness,
|
||||
success: function() {}
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
background: $base-color;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.paycode-wrap {
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.member-wrap {
|
||||
padding: 36rpx 32rpx;
|
||||
background: #f6f6f6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.headimg {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
margin-right: 20rpx;
|
||||
|
||||
image {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.member-level {
|
||||
background: #474758;
|
||||
padding: 0;
|
||||
margin: 16rpx 0 0 0;
|
||||
height: 40rpx;
|
||||
border-radius: 40rpx;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
.level-icon {
|
||||
width: 40rpx;
|
||||
vertical-align: middle;
|
||||
margin-left: -2rpx;
|
||||
}
|
||||
|
||||
.level-name {
|
||||
padding: 0 20rpx 0 6rpx;
|
||||
color: #ddc095;
|
||||
font-size: 24rpx;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.recharge {
|
||||
color: $base-color;
|
||||
border: 2rpx solid $base-color;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
border-radius: 64rpx;
|
||||
font-size: 26rpx;
|
||||
padding: 0 30rpx;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.body-wrap {
|
||||
margin: 40rpx 40rpx 0 40rpx;
|
||||
width: calc(100% -80rpx);
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
padding-bottom: 40rpx;
|
||||
position: relative;
|
||||
border-bottom: 2rpx dashed #dedede;
|
||||
|
||||
.barcode-wrap {
|
||||
width: 590rpx;
|
||||
height: 200rpx;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
|
||||
.barcode {
|
||||
width: 590rpx;
|
||||
height: 250rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.qrcode {
|
||||
width: 320rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.tips {
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.dynamic-code {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.code {
|
||||
background: #f6f6f6;
|
||||
color: #666;
|
||||
padding: 4rpx 26rpx;
|
||||
border-radius: 60rpx;
|
||||
|
||||
text {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-code {
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.price-font {
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.show {
|
||||
color: #163d8f;
|
||||
font-size: 26rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
content: ' ';
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: $base-color;
|
||||
border-radius: 50%;
|
||||
z-index: 5;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: 0;
|
||||
transform: translate(calc(50% + 40rpx), 50%);
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
transform: translate(calc(-50% - 40rpx), 50%);
|
||||
}
|
||||
}
|
||||
|
||||
.footer-wrap {
|
||||
padding: 50rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.split {
|
||||
width: 2rpx;
|
||||
background: #dddddd;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.account-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
.value {
|
||||
font-size: 32rpx;
|
||||
color: $base-color;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
193
pages_tool/store/store_payment.vue
Normal file
193
pages_tool/store/store_payment.vue
Normal file
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<scroll-view scroll-y="true" class="scroll-view" >
|
||||
<view class="container" :style="{backgroundImage: 'url('+ $util.img('/public/uniapp/store/payment/header_bg.png') +')'}">
|
||||
<view class="header-wrap"></view>
|
||||
<view class="store-wrap">
|
||||
<view class="tips">支付时请确保您的账户有足够的余额</view>
|
||||
<view class="store-list" @click="$util.redirectTo('/pages_tool/store/list')" v-if="addonIsExist.store">
|
||||
<image :src="$util.img('/public/uniapp/store/payment/vip_icon.png')" mode="widthFix"></image>
|
||||
<text>查看门店列表</text>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="menu-wrap">
|
||||
<view class="menu-list">
|
||||
<view class="menu-item" @click="redirect('/pages_tool/recharge/list')">
|
||||
<image :src="$util.img('/public/uniapp/store/payment/recharge.png')" mode="widthFix"></image>
|
||||
<view class="title">余额充值</view>
|
||||
<view class="desc">余额账户充值</view>
|
||||
</view>
|
||||
<view class="menu-item" @click="redirect('/pages_tool/recharge/order_list')">
|
||||
<image :src="$util.img('/public/uniapp/store/payment/recharge_record.png')" mode="widthFix"></image>
|
||||
<view class="title">充值记录</view>
|
||||
<view class="desc">余额充值记录</view>
|
||||
</view>
|
||||
<view class="menu-item" @click="redirect('/pages_tool/member/balance_detail')">
|
||||
<image :src="$util.img('/public/uniapp/store/payment/balance_detail.png')" mode="widthFix"></image>
|
||||
<view class="title">余额明细</view>
|
||||
<view class="desc">余额变更明细</view>
|
||||
</view>
|
||||
<view class="menu-item" @click="redirect('/pages_tool/member/balance')">
|
||||
<image :src="$util.img('/public/uniapp/store/payment/balance.png')" mode="widthFix"></image>
|
||||
<view class="title">我的余额</view>
|
||||
<view class="desc">我的余额</view>
|
||||
</view>
|
||||
<!-- <view class="menu-item" @click="redirect('/pages_tool/member/point_detail')">
|
||||
<image :src="$util.img('/public/uniapp/store/payment/point.png')" mode="widthFix"></image>
|
||||
<view class="title">积分明细</view>
|
||||
<view class="desc">积分变更明细</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="pay-btn" @click="redirect('/pages_tool/store/payment_qrcode')">立即进入支付页面</view>
|
||||
</view>
|
||||
<view class="content-wrap">
|
||||
<image :src="$util.img('/public/uniapp/store/payment/payment_tips.png')" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="content-wrap">
|
||||
<image :src="$util.img('/public/uniapp/store/payment/payment_strategy.png')" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<ns-login ref="login"></ns-login>
|
||||
<diy-bottom-nav></diy-bottom-nav>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
onLoad(options) {},
|
||||
methods: {
|
||||
/**
|
||||
* 跳转
|
||||
* @param {Object} url
|
||||
*/
|
||||
redirect(url) {
|
||||
if (!this.storeToken) {
|
||||
this.$refs.login.open(url);
|
||||
} else {
|
||||
this.$util.redirectTo(url);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.scroll-view {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.header-wrap {
|
||||
height: 200rpx;
|
||||
}
|
||||
|
||||
.store-wrap {
|
||||
margin: 0 30rpx;
|
||||
background: linear-gradient(90deg, rgba(0,0,0,0.48) 0%, rgba(0,0,0,0.88) 100%);
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx 20rpx 60rpx 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.tips {
|
||||
color: #F2C7B5;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.store-list {
|
||||
background: rgba(255, 255, 255, .2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40rpx;
|
||||
border-radius: 40rpx;
|
||||
padding: 0 10rpx 0 4rpx;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #EFCAB6;
|
||||
margin-left: 10rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-wrap {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
margin: 0 30rpx;
|
||||
padding: 30rpx 30rpx 60rpx 30rpx;
|
||||
transform: translateY(-40rpx);
|
||||
|
||||
.menu-list {
|
||||
display: flex;
|
||||
|
||||
.menu-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 10rpx;
|
||||
font-size: 28rpx;
|
||||
color: #222;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 18rpx;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay-btn {
|
||||
height: 98rpx;
|
||||
line-height: 98rpx;
|
||||
background: #F72D1E;
|
||||
border-radius: 98rpx;
|
||||
margin: 60rpx auto 0 auto;
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrap {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
margin: 30rpx;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
transform: translateY(-40rpx);
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user