1163 lines
30 KiB
Vue
1163 lines
30 KiB
Vue
<template>
|
||
<div>
|
||
<div class="store-cont">
|
||
<div class="store-detail">
|
||
<!-- style="background: linear-gradient(#c8b190, #a18153)" -->
|
||
|
||
<div class="store-img">
|
||
<image mode="aspectFill" :src="storeMsg && storeMsg.MERCHANTS_LOGO
|
||
? storeMsg.MERCHANTS_LOGO
|
||
: 'https://eshangtech.com/ShopICO/no-picture.png'
|
||
" @click="seeLogo(storeMsg.MERCHANTS_LOGO)"></image>
|
||
</div>
|
||
|
||
<div class="stote-head">
|
||
<div class="store-title">
|
||
{{
|
||
storeMsg && storeMsg.MERCHANTS_NAME
|
||
? storeMsg.MERCHANTS_NAME
|
||
: "-"
|
||
}}
|
||
</div>
|
||
<div class="coupon-unit" style="margin-top: 2rpx">
|
||
公告：欢迎光临
|
||
</div>
|
||
<div class="coupon-unit" style="margin-top: 8rpx">
|
||
1评价{{ monthlySales || storeMsg.MERCHANTS_SCORE || "-" }}
|
||
<span style="margin: 0 8rpx; color: #e3e3e3">|</span>
|
||
月售{{ perCapita || storeMsg.MONTHLYSALES || 0 }}
|
||
<!-- <span v-show="storeMsg.ShopList && storeMsg.ShopList.length>0 && pageMsg.noAppoint==false" style="margin:0 8rpx;color:#E3E3E3;">|</span>
|
||
<span v-show="storeMsg.ShopList && storeMsg.ShopList.length>0 && pageMsg.noAppoint==false" @click="goShop" class="go-btn">去点餐</span>
|
||
-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tabContentBox">
|
||
<div class="tabBox">
|
||
<div :class="item.value === pageMsg.activeTabs
|
||
? 'tabItems selectTab'
|
||
: 'tabItems'
|
||
" v-for="(item, index) in tabList" :key="index" @click="handleChangeTab(item.value)" :style="{
|
||
display: item.value === 1 ? 'flex' : '',
|
||
alignItems: item.value === 1 ? 'center' : '',
|
||
}">
|
||
{{ item.label || "" }}
|
||
<span class="smallNumber" v-if="item.value === 1">{{
|
||
storeMsg.COMMENT_COUNT || ""
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
<div class="tabLine"></div>
|
||
<div class="contentList">
|
||
<div v-if="pageMsg.activeTabs === 0">
|
||
<div style="padding: 32rpx 0">
|
||
<div class="coupon-list" v-for="(item, i) in couponList" :key="i" :class="{
|
||
'coupon-bg': isBgcolor && couponOrder <= item.WITH_AMOUNT,
|
||
}">
|
||
<div class="itemleft">
|
||
<div>
|
||
<span class="leftUnit">¥</span>
|
||
<span class="money">{{ item.UseAmount }}</span>
|
||
</div>
|
||
<div v-if="!item.CouponSendId && item.CouponPoint" class="condition">
|
||
{{ item.CouponPoint }}积分兑换
|
||
</div>
|
||
<div v-else class="condition">
|
||
{{
|
||
item.WithAmount > 0
|
||
? "满" + item.WithAmount + "可用"
|
||
: "无门槛使用"
|
||
}}
|
||
</div>
|
||
</div>
|
||
<div class="itemRight">
|
||
<div>
|
||
<div class="couponName">{{ item.CouponName }}</div>
|
||
<div class="timeText">
|
||
<span class="coupon-date" v-if="item.CouponSendId">有效期至{{ item.EndTime }}</span>
|
||
<span class="coupon-date" v-else>活动至{{ item.EndTime }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="useBtn">
|
||
<span class="useBtnText" @click="goDetail(item)">{{
|
||
item.PayMethod === 2000 ? "兑换" : "领取"
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <div class="coupon-top">
|
||
<div style="width: 410rpx">
|
||
<div class="coupon-name">{{ item.CouponName }}</div>
|
||
<span v-if="item.CouponType === 2000"
|
||
><span class="coupon-price">{{
|
||
item.UseAmount * 10
|
||
}}</span
|
||
>折</span
|
||
>
|
||
<span v-else>
|
||
<block>
|
||
￥<span class="coupon-price">{{
|
||
item.UseAmount || item.WithAmount
|
||
}}</span></block
|
||
>
|
||
</span>
|
||
|
||
<div class="coupon-center">
|
||
<span class="coupon-date"
|
||
>活动时间至{{ item.EndTime }}</span
|
||
>
|
||
<block v-if="item.PayMethod === 2000">
|
||
<span class="span24"
|
||
>{{ item.CouponPoint }}积分兑换</span
|
||
>
|
||
</block>
|
||
</div>
|
||
</div>
|
||
<div class="coupon-left">
|
||
<span class="coupon-use-door" @click="goDetail(item)">{{
|
||
item.PayMethod === 2000 ? "去兑换" : "去领取"
|
||
}}</span>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
<no-data :text="'该商家最近没有优惠'" :isShow="!(couponList && couponList.length > 0)" />
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="pageMsg.activeTabs === 1">
|
||
<MerchantEvaluation ref="merchantEvaluation" :storeMsg="storeMsg" />
|
||
|
||
<div class="rate-box" @click="goEvaluate">
|
||
<div class="rate-gray">评价一下这家店...</div>
|
||
<div class="rate-ico"><i></i>评论</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div title="商家" v-if="pageMsg.activeTabs === 2">
|
||
<div style="padding: 0 16rpx 40rpx 32rpx">
|
||
<div v-if="false">
|
||
<div class="info-desc-title" v-if="storeMsg.ImgList">
|
||
<van-icon name="photo-o" size="40rpx" color="#CAA97F" custom-style="margin-right:16rpx;"></van-icon>
|
||
<text>商家实景</text>
|
||
</div>
|
||
<div class="store-photo-box" v-if="storeMsg.ImgList">
|
||
<!-- <div class="store-photo" v-for="(images,i) in storeMsg.ImgList" @click="seePhone(storeMsg.ImgList,i)" :key="i">
|
||
<image mode="aspectFill" :src="images.IMAGE_URL"></image>
|
||
</div> -->
|
||
<swiper scroll-x="true" class="swiper-image" :display-multiple-items="storeMsg.ImgList.length > 1 ? 2 : 1
|
||
" next-margin="120rpx" :style="storeMsg.ImgList.length == 1 ? 'width:405rpx' : ''">
|
||
<swiper-item v-for="(item, i) in storeMsg.ImgList" :key="i" class="store-photo"
|
||
@click="seePhone(storeMsg.ImgList, i)">
|
||
<image mode="aspectFill" :src="item.IMAGE_URL"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
</div>
|
||
<block v-if="foodImages.length > 0">
|
||
<div class="info-desc-title">
|
||
<van-icon name="photo-o" size="40rpx" color="#CAA97F"
|
||
custom-style="margin-right:16rpx;vertical-align:middle;"></van-icon>
|
||
<span>推荐商品</span>
|
||
</div>
|
||
<div class="store-photo-box">
|
||
<!-- <div class="store-photo" v-for="(images,i) in foodImages" @click="seePhone(foodImages,i)" :key="i">
|
||
<image mode="aspectFill" :src="images.IMAGE_URL"></image>
|
||
<div class="photo-name">{{images.TITLE}}</div>
|
||
</div> -->
|
||
<swiper scroll-x="true" class="swiper-image" :display-multiple-items="foodImages.length > 1 ? 2 : 1"
|
||
next-margin="120rpx" :style="foodImages.length == 1 ? 'width:405rpx' : ''">
|
||
<swiper-item v-for="(item, i) in foodImages" :key="i" class="store-photo"
|
||
@click="seePhone(foodImages, i)">
|
||
<image mode="aspectFill" :src="item.IMAGE_URL"></image>
|
||
<div class="photo-name">{{ item.TITLE }}</div>
|
||
</swiper-item>
|
||
</swiper>
|
||
</div>
|
||
</block>
|
||
</div>
|
||
|
||
<div class="storeDetail">
|
||
<div class="storeItem">
|
||
<div class="itemTop">
|
||
<div class="imgBox">
|
||
<image class="storeIcon" src="/static/images/home/MERCHANTSDESC.png" />
|
||
</div>
|
||
|
||
<span class="desc">商家介绍：</span>
|
||
</div>
|
||
<div class="infoDesc">
|
||
{{ storeMsg.MERCHANTS_DESC || "暂无" }}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="storeItem">
|
||
<div class="itemTop">
|
||
<div class="imgBox">
|
||
<image class="storeIcon" src="/static/images/home/onlineTime.png" />
|
||
</div>
|
||
|
||
<span class="desc">营业时间：</span>
|
||
</div>
|
||
<div class="infoDesc">
|
||
{{ storeMsg.BUS_STARTDATE || "暂无" }}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="storeItem">
|
||
<div class="itemTop">
|
||
<div class="imgBox">
|
||
<image class="storeIcon" src="/static/images/home/detailPhone.png" />
|
||
</div>
|
||
|
||
<span class="desc">电话：</span>
|
||
</div>
|
||
<div class="infoDesc">
|
||
{{ storeMsg.MERCHANTS_TELEPHONE || "暂无" }}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="storeItem">
|
||
<div class="itemTop">
|
||
<div class="imgBox">
|
||
<image class="storeIcon" src="/static/images/home/addressIcon.png" />
|
||
</div>
|
||
|
||
<span class="desc">地址：</span>
|
||
</div>
|
||
<div class="infoDesc">
|
||
{{ storeMsg.MERCHANTS_ADDRESS || "暂无" }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="store-info" v-if="false">
|
||
<div class="info-unit">
|
||
<van-icon name="hotel-o" size="40rpx" color="#CAA97F"
|
||
custom-style="margin-right:16rpx;vertical-align:middle;"></van-icon>
|
||
<span class="info-unit-title"> 商家介绍 </span>
|
||
<block v-if="!storeMsg.MERCHANTS_DESC">暂无</block>
|
||
</div>
|
||
<div class="info-desc" v-if="storeMsg.MERCHANTS_DESC">
|
||
{{ storeMsg.MERCHANTS_DESC || "暂无" }}
|
||
</div>
|
||
|
||
<div class="info-unit">
|
||
<van-icon name="phone-circle-o" size="40rpx" color="#CAA97F"
|
||
custom-style="margin-right:16rpx;vertical-align:middle;"></van-icon>
|
||
<span class="info-unit-title"> 商家电话 </span>
|
||
{{ storeMsg.MERCHANTS_TELEPHONE || "暂无" }}
|
||
</div>
|
||
<div class="info-unit">
|
||
<van-icon name="location-o" size="40rpx" color="#CAA97F"
|
||
custom-style="margin-right:16rpx;vertical-align:middle;"></van-icon>
|
||
<span class="info-unit-title"> 商家地址 </span>
|
||
{{ storeMsg.MERCHANTS_ADDRESS || "暂无" }}
|
||
</div>
|
||
<div class="info-unit">
|
||
<van-icon name="todo-list-o" size="40rpx" color="#CAA97F"
|
||
custom-style="margin-right:16rpx;vertical-align:middle;"></van-icon>
|
||
<span class="info-unit-title"> 营业时间 </span>
|
||
{{ storeMsg.BUS_STARTDATE || "暂无" }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<UniPopup :show="isLogin && !user.MEMBERSHIP_MOBILEPHONE" @close="isLogin = false"
|
||
custom-style="border-radius: 24rpx;">
|
||
<div class="pop-box">
|
||
<div class="pop-title">温馨提示</div>
|
||
<div class="pop-body">您还没有登录，快去登录吧!</div>
|
||
<div class="popbtn-box">
|
||
<div class="popbtn cancel-btn" @click="isLogin = false">取消</div>
|
||
<div class="popbtn confirm-btn" @click="goRegister">去登录</div>
|
||
</div>
|
||
</div>
|
||
</UniPopup>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from "vuex";
|
||
import noData from "@/components/noData.vue";
|
||
import MerchantEvaluation from "./components/merchantEvaluation.vue";
|
||
import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
|
||
export default {
|
||
data() {
|
||
return {
|
||
storeMsg: {
|
||
MERCHANTS_LOGO: "",
|
||
MERCHANTS_NAME: "",
|
||
MERCHANTS_SCORE: "",
|
||
MONTHLYSALES: "",
|
||
COMMENT_COUNT: "",
|
||
ImgList: [],
|
||
MERCHANTS_DESC: "",
|
||
BUS_STARTDATE: "",
|
||
MERCHANTS_TELEPHONE: "",
|
||
MERCHANTS_ADDRESS: "",
|
||
BUS_STARTDATE: "",
|
||
},
|
||
couponList: [],
|
||
foodImages: [],
|
||
pageMsg: {
|
||
firstLoding: 0,
|
||
activeTabs: 0,
|
||
noAppoint: true,
|
||
},
|
||
imgbg: "url(https://eshangtech.com/ShopICO/shopbg.png)",
|
||
isLogin: false,
|
||
loginType: "",
|
||
tabList: [
|
||
{ label: "优惠", value: 0 },
|
||
{ label: "评价", value: 1 },
|
||
{ label: "商家", value: 2 },
|
||
],
|
||
monthlySales: "",//月售
|
||
perCapita: '',// 人均
|
||
};
|
||
},
|
||
computed: {
|
||
...mapGetters({
|
||
user: "user",
|
||
refresh: "refresh",
|
||
}),
|
||
},
|
||
components: {
|
||
noData,
|
||
MerchantEvaluation,
|
||
UniPopup,
|
||
},
|
||
|
||
methods: {
|
||
goRegister() {
|
||
uni.navigateTo({ url: "/pages/register/index" });
|
||
},
|
||
changeActive(e) {
|
||
this.pageMsg.activeTabs = e.mp.detail.index;
|
||
},
|
||
handleChangeTab(value) {
|
||
this.pageMsg.activeTabs = value;
|
||
this.$forceUpdate();
|
||
if (this.pageMsg.activeTabs === 1) {
|
||
this.getShop(this.storeMsg.MERCHANTS_ID);
|
||
setTimeout(() => {
|
||
this.$refs.merchantEvaluation.loading();
|
||
});
|
||
}
|
||
if (this.pageMsg.activeTabs === 0) {
|
||
this.getCouponList(this.storeMsg.MERCHANTS_ID);
|
||
}
|
||
if (this.pageMsg.activeTabs === 2) {
|
||
this.getShop(this.storeMsg.MERCHANTS_ID);
|
||
this.getFoodImages(this.storeMsg.MERCHANTS_ID);
|
||
}
|
||
},
|
||
seePhone(item, i) {
|
||
let urls = [];
|
||
item.map((n) => {
|
||
urls.push(n.IMAGE_URL);
|
||
});
|
||
uni.previewImage({
|
||
current: urls[i], // 当前显示图片的http链接
|
||
urls: urls, // 需要预览的图片http链接列表
|
||
});
|
||
},
|
||
seeLogo(item) {
|
||
uni.previewImage({
|
||
current: item, // 当前显示图片的http链接
|
||
urls: [item], // 需要预览的图片http链接列表
|
||
});
|
||
},
|
||
goDetail(item) {
|
||
uni.navigateTo({ url: "/pages/couponDetail/index?id=" + item.CouponId });
|
||
},
|
||
goEvaluate(item) {
|
||
uni.navigateTo({
|
||
url:
|
||
"/pages/newEvaluate/index?merchantsId=" + this.storeMsg.MERCHANTS_ID,
|
||
});
|
||
},
|
||
// goShop () {
|
||
// if (this.user.MEMBERSHIP_MOBILEPHONE) {
|
||
// let _data = this.storeMsg.ShopList[0]
|
||
|
||
// let arr = {
|
||
// id: _data.SERVERPARTSHOP_ID,
|
||
// shopName: _data.SHOPSHORTNAME,
|
||
// serverpartId: _data.SERVERPART_ID
|
||
|
||
// }
|
||
|
||
// this.$store.commit('nowStore', arr)
|
||
// this.$store.commit('setprovinceCode', _data.PROVINCE_CODE)
|
||
// uni.redirectTo({url: '/pages/shopPages/shop/index?type=1&id=' + _data.SERVERPARTSHOP_ID})
|
||
// } else {
|
||
// this.isLogin = true
|
||
// }
|
||
// },
|
||
getShop(id) {
|
||
let _this = this;
|
||
this.$api
|
||
.getCoop({
|
||
action_type: "GetMerchantsDetails",
|
||
merchantsId: id,
|
||
})
|
||
.then(function (res) {
|
||
let _data = res.Data;
|
||
console.log("getShop", _data);
|
||
_this.storeMsg = _data;
|
||
// _this.$refs.merchantEvaluation.getRate(_data)
|
||
_this.$forceUpdate();
|
||
});
|
||
},
|
||
getCouponList(id) {
|
||
let _this = this;
|
||
_this.$api
|
||
.$get("/WeChat/GetCouponList/", { sellerId: id })
|
||
.then(function (data) {
|
||
if (data.Result_Code === 100) {
|
||
_this.couponList = data.Result_Data.List || [];
|
||
}
|
||
});
|
||
},
|
||
getFoodImages(id) {
|
||
let _this = this;
|
||
_this.$api
|
||
.getCoop({
|
||
action_type: "GetRcmContent",
|
||
rcmtagKey: "RCM_COMMODITY",
|
||
sellerId: id,
|
||
})
|
||
.then(function (data) {
|
||
_this.foodImages = data.Data.List;
|
||
});
|
||
},
|
||
},
|
||
onLoad(options) {
|
||
console.log("options", options);
|
||
// 判断是小程序还是app
|
||
let type = uni.getStorageSync("loginType");
|
||
console.log("type", type);
|
||
this.loginType = type;
|
||
|
||
if (options.monthlySales) {
|
||
this.monthlySales = options.monthlySales
|
||
}
|
||
|
||
if (options.perCapita) {
|
||
this.perCapita = options.perCapita
|
||
}
|
||
|
||
|
||
|
||
if (options.noAppoint) {
|
||
// 如果页面来源于点餐页面 则不再显示去点餐按钮
|
||
this.pageMsg.noAppoint = true;
|
||
} else {
|
||
this.pageMsg.noAppoint = false;
|
||
}
|
||
this.storeMsg.MERCHANTS_ID = options.id;
|
||
this.pageMsg.firstLoding = 1;
|
||
this.getCouponList(options.id);
|
||
this.getFoodImages(options.id);
|
||
this.getShop(options.id);
|
||
this.$utils.addUserBehaviorNew();
|
||
},
|
||
onPullDownRefresh() {
|
||
// let _this = this
|
||
// _this.couponList = []
|
||
|
||
if (this.pageMsg.activeTabs === 1) {
|
||
this.getShop(this.storeMsg.MERCHANTS_ID);
|
||
this.$refs.merchantEvaluation.loading();
|
||
}
|
||
if (this.pageMsg.activeTabs === 0) {
|
||
this.getCouponList(this.storeMsg.MERCHANTS_ID);
|
||
}
|
||
if (this.pageMsg.activeTabs === 2) {
|
||
this.getShop(this.storeMsg.MERCHANTS_ID);
|
||
this.getFoodImages(this.storeMsg.MERCHANTS_ID);
|
||
}
|
||
setTimeout(function () {
|
||
uni.stopPullDownRefresh();
|
||
}, 1000);
|
||
},
|
||
onReady() {
|
||
let _this = this;
|
||
if (this.pageMsg.firstLoding === 1) {
|
||
this.$nextTick(function () {
|
||
setTimeout(() => {
|
||
if (_this.$refs.merchantEvaluation) {
|
||
_this.$refs.merchantEvaluation.loading();
|
||
}
|
||
}, 0);
|
||
});
|
||
this.pageMsg.firstLoding = 0;
|
||
}
|
||
},
|
||
onShow() {
|
||
if (this.pageMsg.activeTabs === 1 && this.refresh) {
|
||
this.getShop(this.storeMsg.MERCHANTS_ID);
|
||
this.$refs.merchantEvaluation.loading();
|
||
this.$store.commit("refresh", false);
|
||
}
|
||
// if (this.pageMsg.activeTabs === 0) {
|
||
// this.getShop(this.storeMsg.MERCHANTS_ID)
|
||
// this.getCouponList(this.storeMsg.MERCHANTS_ID)
|
||
// }
|
||
},
|
||
onUnload() {
|
||
this.isLogin = false;
|
||
this.storeMsg = {
|
||
MERCHANTS_LOGO: "",
|
||
MERCHANTS_NAME: "",
|
||
MERCHANTS_SCORE: "",
|
||
MONTHLYSALES: "",
|
||
COMMENT_COUNT: "",
|
||
ImgList: [],
|
||
MERCHANTS_DESC: "",
|
||
BUS_STARTDATE: "",
|
||
MERCHANTS_TELEPHONE: "",
|
||
MERCHANTS_ADDRESS: "",
|
||
BUS_STARTDATE: "",
|
||
};
|
||
this.couponList = [];
|
||
this.pageMsg.activeTabs = 0;
|
||
},
|
||
onReachBottom() {
|
||
if (this.pageMsg.activeTabs === 1) {
|
||
this.$refs.merchantEvaluation.loadMore();
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
|
||
<style lang="stylus" scope>
|
||
color999 = #999;
|
||
|
||
.store-cont {
|
||
// border-bottom 1rpx solid #eee
|
||
background: #fff;
|
||
}
|
||
|
||
.store-title {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #130F05;
|
||
line-height: 44rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.img-down {
|
||
width: 13rpx;
|
||
height: 8rpx;
|
||
vertical-align: middle;
|
||
margin-left: 4rpx;
|
||
}
|
||
|
||
.store-detail {
|
||
display: flex;
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
align-items: flex-start;
|
||
background-size: cover;
|
||
background-repeat: no-repeat;
|
||
height: 200rpx;
|
||
align-items: center;
|
||
padding: 0 40rpx 0rpx 40rpx;
|
||
}
|
||
|
||
.tabContentBox {
|
||
width: 100%;
|
||
|
||
.tabBox {
|
||
width: 100%;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.tabItems {
|
||
height: 100%;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
color: #6d6b6b;
|
||
margin: 0 40rpx;
|
||
|
||
.smallNumber {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #716F69;
|
||
line-height: 28rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
|
||
.selectTab {
|
||
color: #000000;
|
||
position: relative;
|
||
}
|
||
|
||
.selectTab:after {
|
||
position: absolute;
|
||
content: '';
|
||
width: 2rem;
|
||
height: 4px;
|
||
border-radius: 4px;
|
||
background-color: #a18153;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
|
||
.tabLine {
|
||
width: 100%;
|
||
height: 1px;
|
||
background: #F6F6F6;
|
||
}
|
||
|
||
.contentList {
|
||
width: 100%;
|
||
height: calc(100% - 150px);
|
||
overflow-y: auto;
|
||
}
|
||
}
|
||
|
||
.stote-head {
|
||
// padding-top 62rpx
|
||
// padding-left 32rpx
|
||
// display flex
|
||
// flex-direction column
|
||
flex: 1;
|
||
height: 128rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-satrt;
|
||
// align-items center
|
||
// background #fff
|
||
padding-left: 16rpx;
|
||
}
|
||
|
||
// .gray-block
|
||
// background #f9f9f9
|
||
// height 16rpx
|
||
.store-info {
|
||
// position relative
|
||
// top -56rpx
|
||
overflow: hidden;
|
||
font-size: 24rpx;
|
||
// margin-top 40rpx
|
||
background: #fff;
|
||
padding: 16rpx 0rpx;
|
||
// box-shadow 0 0 4rpx #ddd
|
||
}
|
||
|
||
.storeDetail {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding-top: 24rpx;
|
||
|
||
.storeItem {
|
||
margin-bottom: 24rpx;
|
||
|
||
.itemTop {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.imgBox {
|
||
width: 2rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
|
||
.storeIcon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
|
||
.desc {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #716F69;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.infoDesc {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #130F05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
width: 100%;
|
||
text-indent: 2rem;
|
||
margin-top: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.info-desc-title {
|
||
font-size: 28rpx;
|
||
font-weight: bolder;
|
||
padding-bottom: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.store-photo-box {
|
||
white-space: nowrap;
|
||
overflow: auto;
|
||
padding-bottom: 16rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
.swiper-image {
|
||
height: 250rpx;
|
||
}
|
||
|
||
.store-photo {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
width: 266rpx;
|
||
height: 250rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
// .store-photo +.store-photo
|
||
// margin-left 16rpx
|
||
.store-photo image {
|
||
background-color: #eee;
|
||
width: 266rpx;
|
||
height: 193rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.photo-name {
|
||
padding-top: 12rpx;
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.info-desc {
|
||
color: #999;
|
||
padding-bottom: 20rpx;
|
||
border-bottom: 1rpx solid #eee;
|
||
line-height: 1.8;
|
||
font-size: 24rpx;
|
||
text-indent: 50rpx;
|
||
}
|
||
|
||
.info-unit {
|
||
// border-bottom 1rpx solid #eee
|
||
display: flex;
|
||
// justify-content space-between;
|
||
align-items: center;
|
||
height: 80rpx;
|
||
// padding-right 30rpx
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.info-unit-title {
|
||
color: #333;
|
||
margin-right: 40rpx;
|
||
font-weight: bolder;
|
||
min-width: 114rpx;
|
||
}
|
||
|
||
// .store-name + .store-name:before
|
||
// content '|'
|
||
// margin 0 10rpx
|
||
.coupon-unit {
|
||
// padding-top: 20rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716F69;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
// .border-top
|
||
// border-top 1rpx solid #eee
|
||
.store-img {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.store-img image {
|
||
width: 128rpx;
|
||
height: 128rpx;
|
||
// box-shadow 0 0 8rpx 2rpx #333
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
// .store-banner
|
||
// width 100%
|
||
// display flex
|
||
// align-items center
|
||
// justify-content center
|
||
// padding 20rpx 0
|
||
|
||
// .store-banner img
|
||
// width 686rpx
|
||
// height 176rpx
|
||
|
||
// .coupon-title
|
||
// color #333333
|
||
// font-size 32rpx
|
||
// display flex
|
||
// align-items center
|
||
// width 638rpx
|
||
// margin 30rpx auto 0 auto
|
||
|
||
// image
|
||
// width 62rpx
|
||
// height 62rpx
|
||
// margin-right 24rpx
|
||
// border-radius 36rpx
|
||
.coupon-list {
|
||
width: calc(100% - 64rpx);
|
||
margin-left: 32rpx;
|
||
height: 144rpx;
|
||
background: url('/static/images/home/validCoupons.png') no-repeat center;
|
||
background-size: contain;
|
||
box-sizing: border-box;
|
||
padding: 32rpx 0;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 32rpx;
|
||
|
||
.itemleft {
|
||
width: 190rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
border-right: 2rpx dashed #E5CD92;
|
||
|
||
.leftUnit {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 34rpx;
|
||
color: #BA922F;
|
||
line-height: 48rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.money {
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 48rpx;
|
||
color: #BA922F;
|
||
line-height: 56rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.condition {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #BA922F;
|
||
line-height: 28rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.itemRight {
|
||
flex: 1;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.couponName {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #130F05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.timeText {
|
||
.coupon-date {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #716F69;
|
||
line-height: 32rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.useBtn {
|
||
.useBtnText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
line-height: 36rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
padding: 8rpx 20rpx;
|
||
background: #BA922F;
|
||
border-radius: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.coupon-list + .coupon-list {
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.coupon-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 100%;
|
||
}
|
||
|
||
.coupon-left {
|
||
text-align: center;
|
||
color: bodyColor;
|
||
}
|
||
|
||
.coupon-price {
|
||
color: #323033;
|
||
font-size: 46rpx;
|
||
font-weight: bolder;
|
||
font-family: 'San Francisco Display Medium';
|
||
}
|
||
|
||
// .coupon-manjian
|
||
// margin-top 20rpx
|
||
.coupon-center {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
// .coupon-img
|
||
// width 110rpx
|
||
// height 110rpx
|
||
// border-radius 10rpx
|
||
// background #dddddd
|
||
// margin-right 20rpx
|
||
// .coupon-zx
|
||
// display inline-block
|
||
// padding 6rpx 10rpx
|
||
// color #be6f6b
|
||
// border 2rpx solid #edd0cc
|
||
// background #fef4f3
|
||
// border-radius 6rpx
|
||
// margin 6rpx 0
|
||
.coupon-name {
|
||
color: #000;
|
||
font-size: 26rpx;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
// .coupon-right
|
||
// display flex
|
||
// justify-content space-between
|
||
// align-items center
|
||
// padding-top 20rpx
|
||
.coupon-use-door {
|
||
background: url('https://eshangtech.com/ShopICO/coupon-btn.png') no-repeat center; // eshangtech.com/ShopICO/coupon-btn.png) no-repeat center
|
||
background-size: contain;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
display: inline-block;
|
||
width: 120rpx;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
// .coupon-door
|
||
// display inline-block
|
||
// background #f2f2f2
|
||
// color #999
|
||
// padding 6rpx 30rpx
|
||
// border-radius 20rpx
|
||
// font-size 24rpx
|
||
.coupon-date {
|
||
color: #333333;
|
||
}
|
||
|
||
.span24 {
|
||
display: block;
|
||
color: color999;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
// .line-through
|
||
// text-decoration line-through
|
||
// .coupon-btn
|
||
// height 100rpx
|
||
// width 100%
|
||
// line-height 100rpx
|
||
// background #333
|
||
// color bodyColor
|
||
// text-align center
|
||
// font-size 30rpx
|
||
// position fixed
|
||
// bottom 0rpx
|
||
// left 0rpx
|
||
// .go-btn:before
|
||
// content '预'
|
||
// color #ffffff
|
||
// background #F5BC50
|
||
// font-size 20rpx
|
||
// border-radius 4rpx
|
||
// padding 0 5rpx
|
||
// margin-right 8rpx
|
||
// .go-btn
|
||
// color #fff
|
||
|
||
// .rate-box
|
||
// width 100%
|
||
// box-sizing border-box
|
||
// position fixed
|
||
// bottom 0
|
||
// left 0
|
||
// display flex
|
||
// padding 12rpx 24rpx
|
||
// box-shadow 0 0 8rpx 2rpx #ececec
|
||
// background #fff
|
||
// .rate-gray
|
||
// background #F0F0F0
|
||
// font-size 26rpx
|
||
// width 514rpx
|
||
// height 72rpx
|
||
// line-height 72rpx
|
||
// border-radius 72rpx
|
||
// color #797979
|
||
// padding 0 24rpx
|
||
// margin-right 24rpx
|
||
// .rate-ico
|
||
// display flex
|
||
// align-items center
|
||
// font-size 26rpx
|
||
// color #B88E53
|
||
// i
|
||
// width 44rpx
|
||
// height 42rpx
|
||
// background url(../../../static/images/home/rate.png) no-repeat center
|
||
// background-size contain
|
||
// margin-right 16rpx
|
||
.rate-box {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
display: flex;
|
||
padding: 12rpx 24rpx;
|
||
box-shadow: 0 0 8rpx 2rpx #ececec;
|
||
background: #fff;
|
||
|
||
.rate-gray {
|
||
background: #F0F0F0;
|
||
font-size: 26rpx;
|
||
width: 514rpx;
|
||
height: 72rpx;
|
||
line-height: 72rpx;
|
||
border-radius: 72rpx;
|
||
color: #797979;
|
||
padding: 0 24rpx;
|
||
margin-right: 24rpx;
|
||
}
|
||
|
||
.rate-ico {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 26rpx;
|
||
color: #B88E53;
|
||
}
|
||
|
||
i {
|
||
width: 44rpx;
|
||
height: 42rpx;
|
||
background: url('/static/images/home/rate.png') no-repeat center;
|
||
background-size: contain;
|
||
margin-right: 16rpx;
|
||
}
|
||
}
|
||
|
||
.pop-box {
|
||
width: 588rpx;
|
||
height: 256rpx;
|
||
text-align: center;
|
||
padding: 40rpx 0;
|
||
border-radius: 30rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.pop-title {
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.pop-body {
|
||
font-size: 28rpx;
|
||
margin-top: 36rpx;
|
||
}
|
||
|
||
.popbtn-box {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 72rpx;
|
||
}
|
||
|
||
.popbtn {
|
||
height: 60rpx;
|
||
width: 208rpx;
|
||
border-radius: 32rpx;
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
line-height: 60rpx;
|
||
}
|
||
|
||
.popbtn+.popbtn {
|
||
margin-left: 60rpx;
|
||
}
|
||
|
||
.cancel-btn {
|
||
border: 1rpx solid #616161;
|
||
color: #616161;
|
||
}
|
||
|
||
.confirm-btn {
|
||
background: #515151;
|
||
color: #fff;
|
||
}
|
||
</style>
|