|
|
@@ -1,769 +1,793 @@
|
|
|
<template>
|
|
|
- <view class="page-container">
|
|
|
- <view class="swiper">
|
|
|
- <u-swiper :list="list"></u-swiper>
|
|
|
- </view>
|
|
|
- <view class="tag">
|
|
|
- <view class="item" v-for="item in tagList">
|
|
|
- <img src="/static/index/Frame.png" alt="" />
|
|
|
- {{item.value}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="recommend">
|
|
|
- <view class="tuijian_img">
|
|
|
- <img src="/static/index/tuijian.png" alt="" />
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="recommend_js" v-for="(item,index) in rankList" :key="index" @click="goPDetails(item)">
|
|
|
- <view class="js_img">
|
|
|
- <!-- <image src="/static/index/ranking.png" mode=""></image> -->
|
|
|
- <view class="border">
|
|
|
- <image :src="$globalData.publicUrl + item.cPortrait" mode="" ></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- {{item.cNickName}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="content">
|
|
|
- <view class="selcet_box">
|
|
|
- <view class="options" :class="{ 'hover': current == index }"
|
|
|
- v-for="(item, index) in selectList" :key="index"
|
|
|
- @click="onSelect(item, index)">
|
|
|
- {{item.cdescribe}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="menu">
|
|
|
- <view class="project" v-for="(item,index) in pojectList" :key="index" @click="goGDetails(item.cId)">
|
|
|
- <view class="img">
|
|
|
- <image :src="$globalData.publicUrl + item.cCover"></image>
|
|
|
- <!-- <view class="time">
|
|
|
+ <view class="page-container">
|
|
|
+ <view class="swiper">
|
|
|
+ <u-swiper :list="list"></u-swiper>
|
|
|
+ </view>
|
|
|
+ <view class="tag">
|
|
|
+ <view class="item" v-for="item in tagList">
|
|
|
+ <img src="/static/index/Frame.png" alt="" />
|
|
|
+ {{ item.value }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="recommend">
|
|
|
+ <view class="tuijian_img">
|
|
|
+ <img src="/static/index/tuijian.png" alt="" />
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view
|
|
|
+ class="recommend_js"
|
|
|
+ v-for="(item, index) in rankList"
|
|
|
+ :key="index"
|
|
|
+ @click="goPDetails(item)"
|
|
|
+ >
|
|
|
+ <view class="js_img">
|
|
|
+ <!-- <image src="/static/index/ranking.png" mode=""></image> -->
|
|
|
+ <view class="border">
|
|
|
+ <image
|
|
|
+ :src="$globalData.publicUrl + item.cPortrait"
|
|
|
+ mode=""
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ {{ item.cNickName }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="selcet_box">
|
|
|
+ <view
|
|
|
+ class="options"
|
|
|
+ :class="{ hover: current == index }"
|
|
|
+ v-for="(item, index) in selectList"
|
|
|
+ :key="index"
|
|
|
+ @click="onSelect(item, index)"
|
|
|
+ >
|
|
|
+ {{ item.cdescribe }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="menu">
|
|
|
+ <view
|
|
|
+ class="project"
|
|
|
+ v-for="(item, index) in pojectList"
|
|
|
+ :key="index"
|
|
|
+ @click="goGDetails(item.cId)"
|
|
|
+ >
|
|
|
+ <view class="img">
|
|
|
+ <image :src="$globalData.publicUrl + item.cCover"></image>
|
|
|
+ <!-- <view class="time">
|
|
|
{{item.nMinute}}分钟
|
|
|
</view> -->
|
|
|
- </view>
|
|
|
- <view class="describe">
|
|
|
- <view class="name">
|
|
|
- {{item.cTitle}}
|
|
|
- </view>
|
|
|
- <view class="num">
|
|
|
- <view class="time">
|
|
|
- <img src="/static/index/time.png" alt="" />
|
|
|
- {{item.nMinute}}分钟
|
|
|
- </view>
|
|
|
- <view class="time">
|
|
|
- <img src="/static/index/people.png" alt="" />
|
|
|
- {{item.nSaleNumber}}人选择
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="num">
|
|
|
- {{item.cLdList}}
|
|
|
- </view>
|
|
|
- <!-- <view class="num">
|
|
|
+ </view>
|
|
|
+ <view class="describe">
|
|
|
+ <view class="name">
|
|
|
+ {{ item.cTitle }}
|
|
|
+ </view>
|
|
|
+ <view class="num">
|
|
|
+ <view class="time">
|
|
|
+ <img src="/static/index/time.png" alt="" />
|
|
|
+ {{ item.nMinute }}分钟
|
|
|
+ </view>
|
|
|
+ <view class="time">
|
|
|
+ <img src="/static/index/people.png" alt="" />
|
|
|
+ {{ item.nSaleNumber }}人选择
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="num">
|
|
|
+ {{ item.cLdList }}
|
|
|
+ </view>
|
|
|
+ <!-- <view class="num">
|
|
|
超{{item.nSaleNumber}}人选择
|
|
|
</view> -->
|
|
|
- <view class="price_box">
|
|
|
- <view class="price">
|
|
|
- ￥<text>{{item.dPrice}}</text>
|
|
|
- </view>
|
|
|
- <view class="make" @click.stop="onSubmit(item.cId)">
|
|
|
- 预约
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="modal-container" v-if="showCoupon">
|
|
|
- <view class="coupon-content show">
|
|
|
- <view class="coupon-box">
|
|
|
- <image class="imgs" src="/static/index/popup_bgi.png" mode=""></image>
|
|
|
- <view class="border">
|
|
|
- <image class="imgs" src="/static/index/border.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="close" @click="onClose('showCoupon')">
|
|
|
- <image src="/static/other/cut.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="btn" @click="receiveAllCoupon">
|
|
|
- <image class="imgs" src="/static/index/collection.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="coupon">
|
|
|
- <view class="item" v-for="(item, index) in couponList" :key="index">
|
|
|
- <view class="left">
|
|
|
- <text v-if="item.discountType == 3">￥{{item.discountValue}}<br /></text>
|
|
|
- <text v-else>{{item.rebValue}}折券<br /></text>
|
|
|
- <text>有效期{{item.termDays}}天</text>
|
|
|
- </view>
|
|
|
- <view class="right" v-if="item.discountType == 3">
|
|
|
- 满{{item.thresholdAmount}}减{{item.discountValue}}
|
|
|
- </view>
|
|
|
- <view class="right" v-else>
|
|
|
- 满{{item.thresholdAmount}}可用
|
|
|
- </view>
|
|
|
- <view class="one_btn" @click.stop="receiveCoupon(item)">
|
|
|
- <image src="/static/index/one.png" mode=""></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- <view class="coupon-header">恭喜您获得优惠券</view>
|
|
|
+ <view class="price_box">
|
|
|
+ <view class="price">
|
|
|
+ ￥<text>{{ item.dPrice }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="make" @click.stop="onSubmit(item.cId)"> 预约 </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="modal-container" v-if="showCoupon">
|
|
|
+ <view class="coupon-content show">
|
|
|
+ <view class="coupon-box">
|
|
|
+ <image class="imgs" src="/static/index/popup_bgi.png" mode=""></image>
|
|
|
+ <view class="border">
|
|
|
+ <image class="imgs" src="/static/index/border.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="close" @click="onClose('showCoupon')">
|
|
|
+ <image src="/static/other/cut.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="btn" @click="receiveAllCoupon">
|
|
|
+ <image
|
|
|
+ class="imgs"
|
|
|
+ src="/static/index/collection.png"
|
|
|
+ mode=""
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ <view class="coupon">
|
|
|
+ <view class="item" v-for="(item, index) in couponList" :key="index">
|
|
|
+ <view class="left">
|
|
|
+ <text v-if="item.discountType == 3"
|
|
|
+ >￥{{ item.discountValue }}<br
|
|
|
+ /></text>
|
|
|
+ <text v-else>{{ item.rebValue }}折券<br /></text>
|
|
|
+ <text>有效期{{ item.termDays }}天</text>
|
|
|
+ </view>
|
|
|
+ <view class="right" v-if="item.discountType == 3">
|
|
|
+ 满{{ item.thresholdAmount }}减{{ item.discountValue }}
|
|
|
+ </view>
|
|
|
+ <view class="right" v-else>
|
|
|
+ 满{{ item.thresholdAmount }}可用
|
|
|
+ </view>
|
|
|
+ <view class="one_btn" @click.stop="receiveCoupon(item)">
|
|
|
+ <image src="/static/index/one.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- <view class="coupon-header">恭喜您获得优惠券</view>
|
|
|
<view class="coupon-amount">{{ couponAmount }}</view>
|
|
|
<view class="coupon-desc">{{ couponDesc }}</view>
|
|
|
<button class="coupon-btn" @click="receiveCoupon">立即领取</button> -->
|
|
|
- </view>
|
|
|
- <view class="mask show"></view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
+ <view class="mask show"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
- getCateList,
|
|
|
- getBannerList,
|
|
|
- getCouponList,
|
|
|
- getProjectList,
|
|
|
- getAccessToken,
|
|
|
- getRecommendList,
|
|
|
- netCouponReceive,
|
|
|
-} from '@/api/index';
|
|
|
+ getCateList,
|
|
|
+ getBannerList,
|
|
|
+ getCouponList,
|
|
|
+ getProjectList,
|
|
|
+ getAccessToken,
|
|
|
+ getRecommendList,
|
|
|
+ netCouponReceive,
|
|
|
+} from '@/api/index'
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- showCoupon: false,
|
|
|
- list: [],
|
|
|
- rankList: [],
|
|
|
- selectList: [],
|
|
|
- pojectList: [],
|
|
|
- couponList: [],
|
|
|
- current: 0,
|
|
|
- selectCurrent: '',
|
|
|
- tagList: [
|
|
|
- {
|
|
|
- value: '实名认证'
|
|
|
- },
|
|
|
- {
|
|
|
- value: '爽约包赔'
|
|
|
- },
|
|
|
- {
|
|
|
- value: '超时秒退'
|
|
|
- },
|
|
|
- {
|
|
|
- value: '资质证书'
|
|
|
- }
|
|
|
- ],
|
|
|
- }
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- // 获取城市
|
|
|
- this.getCity();
|
|
|
- // 获取banner
|
|
|
- this.getBanner();
|
|
|
- // 获取商品
|
|
|
- this.getProject();
|
|
|
- // 获取商品分类
|
|
|
- this.getCatetory();
|
|
|
- // 获取坐标
|
|
|
- this.getLocaltion();
|
|
|
- // 获取优惠劵
|
|
|
- this.getCoupon();
|
|
|
- // 获取推荐数据
|
|
|
- this.getRanking();
|
|
|
- },
|
|
|
- onLoad(query) {
|
|
|
- // 静默登录
|
|
|
- if (query.code) this.onLogin();
|
|
|
-
|
|
|
- // uni.setStorageSync('wx_copenid', 'o-HEJ6VP2YNi0HPeLaIHCQsQD69s')
|
|
|
- // uni.setStorageSync('access-token', 'eyJhbGciOiJIUzUxMiJ9.eyJ0ZjoiOiJlNGNiNjY0ZS05Y2Q5LTRlOWItODU1Yy0zN2RlNjRiOGI3ZDIifQ.xj0ZBULLc7wYOaUgDQd_zbeynbJ8M3M-UQM6JPUKcV9rIWVlax8dJnU247om39nialcKnklKFZ8m8oerc-NY0A')
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 获取城市
|
|
|
- getCity() {
|
|
|
- uni.request({
|
|
|
- url: 'https://restapi.amap.com/v3/ip?parameters',
|
|
|
- data: {
|
|
|
- key: '5457092e6c62b83c1b2e45dbe973d858'
|
|
|
- },
|
|
|
- success: (res) => {
|
|
|
- uni.setStorageSync('selectCity', res.data.city.slice(0, 2));
|
|
|
- }
|
|
|
- });
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showCoupon: false,
|
|
|
+ list: [],
|
|
|
+ rankList: [],
|
|
|
+ selectList: [],
|
|
|
+ pojectList: [],
|
|
|
+ couponList: [],
|
|
|
+ current: 0,
|
|
|
+ selectCurrent: '',
|
|
|
+ tagList: [
|
|
|
+ {
|
|
|
+ value: '实名认证',
|
|
|
},
|
|
|
- // 获取推荐数据
|
|
|
- getRanking() {
|
|
|
- let params = {
|
|
|
- deptName: uni.getStorageSync('selectCity')
|
|
|
- }
|
|
|
- this.rankList = [];
|
|
|
- getRecommendList(params).then(res => {
|
|
|
- if (res.data.data) {
|
|
|
- this.rankList = res.data.data.slice(0, 4);
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- // 获取坐标
|
|
|
- getLocaltion() {
|
|
|
- uni.getLocation({
|
|
|
- type: 'wgs84',
|
|
|
- success: function(res) {
|
|
|
- uni.setStorageSync('latitude', res.latitude)
|
|
|
- uni.setStorageSync('longitude', res.longitude)
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- // 获取商品分类
|
|
|
- getCatetory() {
|
|
|
- this.selectList = [
|
|
|
- { cdescribe: "热门" },
|
|
|
- ]
|
|
|
- getCateList().then(res => {
|
|
|
- if (res.data.code == 200) {
|
|
|
- this.selectList = [
|
|
|
- ...this.selectList,
|
|
|
- ...res.data.data
|
|
|
- ];
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 获取商品
|
|
|
- getProject() {
|
|
|
- this.pojectList = [];
|
|
|
- getProjectList({
|
|
|
- current: 1,
|
|
|
- size: 10,
|
|
|
- cLdList: this.selectCurrent
|
|
|
- }).then(res => {
|
|
|
- if (res.data.code == 200) {
|
|
|
- this.pojectList = res.data.data;
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 获取banner
|
|
|
- getBanner() {
|
|
|
- this.list = [];
|
|
|
- getBannerList({
|
|
|
- current: 1,
|
|
|
- size: 10,
|
|
|
- }).then(res => {
|
|
|
- if (res.data.code == 200) {
|
|
|
- this.list = res.data.data.map(item => this.$globalData.publicUrl + item.cImgUrl);
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 获取优惠劵
|
|
|
- getCoupon() {
|
|
|
- let params = {
|
|
|
- openid: uni.getStorageSync('wx_copenid'),
|
|
|
- deptName: uni.getStorageSync('selectCity')
|
|
|
- }
|
|
|
- getCouponList(params).then(res => {
|
|
|
- if (res.data.data && res.data.data.length > 0) {
|
|
|
- this.showCoupon = true;
|
|
|
- this.couponList = res.data.data;
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 关闭事件
|
|
|
- onClose(n) {
|
|
|
- this[n] = false;
|
|
|
- },
|
|
|
- // 一键领取优惠券
|
|
|
- receiveAllCoupon() {
|
|
|
- let params = {
|
|
|
- openId: uni.getStorageSync('wx_copenid'),
|
|
|
- couponIds: this.couponList.map(item => item.id),
|
|
|
- }
|
|
|
- netCouponReceive(params).then(res => {
|
|
|
- this.showCoupon = false
|
|
|
- uni.showToast({
|
|
|
- title: '已领取',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- // 领取优惠券
|
|
|
- receiveCoupon(item) {
|
|
|
- let params = {
|
|
|
- couponIds: [item.id],
|
|
|
- openId: uni.getStorageSync('wx_copenid')
|
|
|
- }
|
|
|
- netCouponReceive(params).then(res => {
|
|
|
- this.showCoupon = false
|
|
|
- uni.showToast({
|
|
|
- title: '已领取',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- // 正则匹配请求地址中的参数函数
|
|
|
- getUrlCode(name) {
|
|
|
- return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [,
|
|
|
- ''
|
|
|
- ])[1].replace(/\+/g, '%20')) || null
|
|
|
- },
|
|
|
- // 静默登录
|
|
|
- onLogin() {
|
|
|
- let wxCode = this.getUrlCode('code');
|
|
|
- let params = {
|
|
|
- code: wxCode
|
|
|
- }
|
|
|
- if (wxCode !== '') {
|
|
|
- getAccessToken(params).then(res => {
|
|
|
- if (res.data.code == 200) {
|
|
|
- uni.setStorageSync('wx_copenid', res.data.data.copenid)
|
|
|
- uni.setStorageSync('access-token', res.data.data.token)
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- // tab选择
|
|
|
- onSelect(item, index) {
|
|
|
- this.current = index
|
|
|
- if (item.cdescribe == '热门') {
|
|
|
- this.selectCurrent = ''
|
|
|
- } else {
|
|
|
- this.selectCurrent = item.cdescribe
|
|
|
- }
|
|
|
- this.getProject()
|
|
|
- },
|
|
|
- // 下单
|
|
|
- onSubmit(cId) {
|
|
|
- uni.setStorageSync('projectId', cId)
|
|
|
- uni.switchTab({
|
|
|
- url: '/pages/identify/identify',
|
|
|
- })
|
|
|
- },
|
|
|
- // 跳转详情页
|
|
|
- goGDetails(cid) {
|
|
|
- let str = uni.$u.queryParams({
|
|
|
- cid: cid,
|
|
|
- deptName: uni.getStorageSync('selectCity')
|
|
|
- });
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages/index/details${str}`
|
|
|
- });
|
|
|
- },
|
|
|
- goPDetails(item){
|
|
|
- if (!this.$utils.checkLogin({ type: 'modal' })) return;
|
|
|
- let str = uni.$u.queryParams({
|
|
|
- id: item.id,
|
|
|
- });
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages/identify/details${str}`
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
+ {
|
|
|
+ value: '爽约包赔',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '超时秒退',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '资质证书',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ // 获取城市
|
|
|
+ this.getCity()
|
|
|
+ // 获取banner
|
|
|
+ this.getBanner()
|
|
|
+ // 获取商品
|
|
|
+ this.getProject()
|
|
|
+ // 获取商品分类
|
|
|
+ this.getCatetory()
|
|
|
+ // 获取坐标
|
|
|
+ this.getLocaltion()
|
|
|
+ // 获取优惠劵
|
|
|
+ this.getCoupon()
|
|
|
+ // 获取推荐数据
|
|
|
+ this.getRanking()
|
|
|
+ },
|
|
|
+ onLoad(query) {
|
|
|
+ // 静默登录
|
|
|
+ if (query.code) this.onLogin()
|
|
|
+
|
|
|
+ // uni.setStorageSync('wx_copenid', 'o-HEJ6VP2YNi0HPeLaIHCQsQD69s')
|
|
|
+ // uni.setStorageSync('access-token', 'eyJhbGciOiJIUzUxMiJ9.eyJ0ZjoiOiJlNGNiNjY0ZS05Y2Q5LTRlOWItODU1Yy0zN2RlNjRiOGI3ZDIifQ.xj0ZBULLc7wYOaUgDQd_zbeynbJ8M3M-UQM6JPUKcV9rIWVlax8dJnU247om39nialcKnklKFZ8m8oerc-NY0A')
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取城市
|
|
|
+ getCity() {
|
|
|
+ uni.request({
|
|
|
+ url: 'https://restapi.amap.com/v3/ip?parameters',
|
|
|
+ data: {
|
|
|
+ key: '5457092e6c62b83c1b2e45dbe973d858',
|
|
|
+ },
|
|
|
+ success: res => {
|
|
|
+ uni.setStorageSync('selectCity', res.data.city.slice(0, 2))
|
|
|
+ uni.setStorageSync('selectCitycode', res.data.adcode)
|
|
|
+ },
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取推荐数据
|
|
|
+ getRanking() {
|
|
|
+ let params = {
|
|
|
+ deptName: uni.getStorageSync('selectCity'),
|
|
|
+ }
|
|
|
+ this.rankList = []
|
|
|
+ getRecommendList(params).then(res => {
|
|
|
+ if (res.data.data) {
|
|
|
+ this.rankList = res.data.data.slice(0, 4)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取坐标
|
|
|
+ getLocaltion() {
|
|
|
+ uni.getLocation({
|
|
|
+ type: 'wgs84',
|
|
|
+ success: function (res) {
|
|
|
+ uni.setStorageSync('latitude', res.latitude)
|
|
|
+ uni.setStorageSync('longitude', res.longitude)
|
|
|
+ },
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取商品分类
|
|
|
+ getCatetory() {
|
|
|
+ this.selectList = [{ cdescribe: '热门' }]
|
|
|
+ getCateList().then(res => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ this.selectList = [...this.selectList, ...res.data.data]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取商品
|
|
|
+ getProject() {
|
|
|
+ this.pojectList = []
|
|
|
+ getProjectList({
|
|
|
+ current: 1,
|
|
|
+ size: 10,
|
|
|
+ cLdList: this.selectCurrent,
|
|
|
+ }).then(res => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ this.pojectList = res.data.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取banner
|
|
|
+ getBanner() {
|
|
|
+ this.list = []
|
|
|
+ getBannerList({
|
|
|
+ current: 1,
|
|
|
+ size: 10,
|
|
|
+ }).then(res => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ this.list = res.data.data.map(
|
|
|
+ item => this.$globalData.publicUrl + item.cImgUrl
|
|
|
+ )
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取优惠劵
|
|
|
+ getCoupon() {
|
|
|
+ let params = {
|
|
|
+ openid: uni.getStorageSync('wx_copenid'),
|
|
|
+ deptName: uni.getStorageSync('selectCity'),
|
|
|
+ }
|
|
|
+ getCouponList(params).then(res => {
|
|
|
+ if (res.data.data && res.data.data.length > 0) {
|
|
|
+ this.showCoupon = true
|
|
|
+ this.couponList = res.data.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 关闭事件
|
|
|
+ onClose(n) {
|
|
|
+ this[n] = false
|
|
|
+ },
|
|
|
+ // 一键领取优惠券
|
|
|
+ receiveAllCoupon() {
|
|
|
+ let params = {
|
|
|
+ openId: uni.getStorageSync('wx_copenid'),
|
|
|
+ couponIds: this.couponList.map(item => item.id),
|
|
|
+ }
|
|
|
+ netCouponReceive(params).then(res => {
|
|
|
+ this.showCoupon = false
|
|
|
+ uni.showToast({
|
|
|
+ title: '已领取',
|
|
|
+ icon: 'none',
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 领取优惠券
|
|
|
+ receiveCoupon(item) {
|
|
|
+ let params = {
|
|
|
+ couponIds: [item.id],
|
|
|
+ openId: uni.getStorageSync('wx_copenid'),
|
|
|
+ }
|
|
|
+ netCouponReceive(params).then(res => {
|
|
|
+ this.showCoupon = false
|
|
|
+ uni.showToast({
|
|
|
+ title: '已领取',
|
|
|
+ icon: 'none',
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 正则匹配请求地址中的参数函数
|
|
|
+ getUrlCode(name) {
|
|
|
+ return (
|
|
|
+ decodeURIComponent(
|
|
|
+ (new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(
|
|
|
+ location.href
|
|
|
+ ) || [, ''])[1].replace(/\+/g, '%20')
|
|
|
+ ) || null
|
|
|
+ )
|
|
|
+ },
|
|
|
+ // 静默登录
|
|
|
+ onLogin() {
|
|
|
+ let wxCode = this.getUrlCode('code')
|
|
|
+ let params = {
|
|
|
+ code: wxCode,
|
|
|
+ }
|
|
|
+ if (wxCode !== '') {
|
|
|
+ getAccessToken(params).then(res => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ uni.setStorageSync('wx_copenid', res.data.data.copenid)
|
|
|
+ uni.setStorageSync('access-token', res.data.data.token)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // tab选择
|
|
|
+ onSelect(item, index) {
|
|
|
+ this.current = index
|
|
|
+ if (item.cdescribe == '热门') {
|
|
|
+ this.selectCurrent = ''
|
|
|
+ } else {
|
|
|
+ this.selectCurrent = item.cdescribe
|
|
|
+ }
|
|
|
+ this.getProject()
|
|
|
+ },
|
|
|
+ // 下单
|
|
|
+ onSubmit(cId) {
|
|
|
+ uni.setStorageSync('projectId', cId)
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/identify/identify',
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 跳转详情页
|
|
|
+ goGDetails(cid) {
|
|
|
+ let str = uni.$u.queryParams({
|
|
|
+ cid: cid,
|
|
|
+ deptName: uni.getStorageSync('selectCity'),
|
|
|
+ })
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/index/details${str}`,
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goPDetails(item) {
|
|
|
+ if (!this.$utils.checkLogin({ type: 'modal' })) return
|
|
|
+ let str = uni.$u.queryParams({
|
|
|
+ id: item.id,
|
|
|
+ })
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/identify/details${str}`,
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.page-container {
|
|
|
- width: 100vw;
|
|
|
- height: 100%;
|
|
|
- background: linear-gradient(to bottom right, rgb(246, 249, 242), rgb(210, 241, 243));
|
|
|
- overflow-y: auto;
|
|
|
-
|
|
|
- .swiper {
|
|
|
- padding: 16rpx 32rpx;
|
|
|
-
|
|
|
- ::v-deepuni-swiper {
|
|
|
- height: 320rpx !important;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .tag {
|
|
|
- width: 100%;
|
|
|
- padding: 0px 32rpx;
|
|
|
- margin: 28rpx 0px;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
-
|
|
|
- .item {
|
|
|
- width: 160rpx;
|
|
|
- height: 44rpx;
|
|
|
- background: rgba(0, 184, 151, 0.06);
|
|
|
- border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #0FB4AC;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- img {
|
|
|
- margin-right: 8rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .recommend {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- width: calc(100% - 64rpx);
|
|
|
- margin: 12rpx auto 16rpx;
|
|
|
- height: 218rpx;
|
|
|
- padding: 40rpx 30rpx;
|
|
|
- position: relative;
|
|
|
- background: #FFFFFF;
|
|
|
- box-shadow: 0px 4rpx 12rpx 0px rgba(88, 209, 187, 0.15);
|
|
|
- border-radius: 24rpx;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .tuijian_img {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 75rpx;
|
|
|
- height: 40rpx;
|
|
|
-
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .recommend_js {
|
|
|
- text-align: center;
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #333333;
|
|
|
- .js_img{
|
|
|
- width: 120rpx;
|
|
|
- height: 120rpx;
|
|
|
- position: relative;
|
|
|
- border-radius: 50%;
|
|
|
- // overflow: hidden;
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- margin-bottom: 12rpx;
|
|
|
- // z-index: 9;
|
|
|
- z-index: 999;
|
|
|
- }
|
|
|
- .border{
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 120rpx;
|
|
|
- height: 120rpx;
|
|
|
-
|
|
|
- image{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: 99;
|
|
|
- margin: 0;
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .content {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 40rpx 40rpx 0px 0px;
|
|
|
- margin-top: 28rpx;
|
|
|
- // padding: 32rpx;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .selcet_box {
|
|
|
- width: 100%;
|
|
|
- overflow-x: auto;
|
|
|
- box-sizing: border-box;
|
|
|
- white-space: nowrap;
|
|
|
- padding: 20rpx 32rpx;
|
|
|
-
|
|
|
- .options {
|
|
|
- display: inline-block;
|
|
|
- font-size: 30rpx;
|
|
|
- margin-right: 24rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .hover {
|
|
|
- color: #03C8BE;
|
|
|
- font-weight: 700;
|
|
|
- border-bottom: 4rpx solid #03C8BE;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .menu {
|
|
|
- flex: 1;
|
|
|
- width: 100%;
|
|
|
- padding: 0 24rpx 32rpx;
|
|
|
-
|
|
|
- .project {
|
|
|
- background: linear-gradient(180deg, #F7FFFF 0%, #E9FFFB 100%);
|
|
|
- box-shadow: 0px 4rpx 12rpx 0px rgba(88, 209, 187, 0.2);
|
|
|
- border-radius: 24rpx;
|
|
|
- margin-bottom: 24rpx;
|
|
|
- padding: 16rpx 32rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- overflow: hidden;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .img {
|
|
|
- width: 168rpx;
|
|
|
- height: 168rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- overflow: hidden;
|
|
|
- margin-right: 34rpx;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- // .time {
|
|
|
- // position: absolute;
|
|
|
- // top: 0;
|
|
|
- // right: 0;
|
|
|
- // padding: 0px 10px;
|
|
|
- // background-color: #333;
|
|
|
- // opacity: .7;
|
|
|
- // border-radius: 0px 0px 0px 10px;
|
|
|
- // color: #fff;
|
|
|
- // }
|
|
|
- }
|
|
|
-
|
|
|
- .describe {
|
|
|
- flex: 1;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- .name {
|
|
|
- width: 100%;
|
|
|
- font-size: 32rpx;
|
|
|
- line-height: 24rpx;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
-
|
|
|
- .num {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #808080;
|
|
|
- display: flex;
|
|
|
- margin-top: 16rpx;
|
|
|
-
|
|
|
- .time {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #666666;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-right: 26rpx;
|
|
|
-
|
|
|
- img {
|
|
|
- width: 24rpx;
|
|
|
- height: 24rpx;
|
|
|
- margin-right: 4rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .price_box {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .price {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #f53e54;
|
|
|
- display: flex;
|
|
|
- align-items: baseline;
|
|
|
-
|
|
|
- text {
|
|
|
- font-weight: 500;
|
|
|
- font-size: 48rpx
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .make {
|
|
|
- width: 124rpx;
|
|
|
- height: 56rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- color: #fff;
|
|
|
- background: linear-gradient(135deg, #1AD8CF 0%, #21C8C0 100%);
|
|
|
- border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
|
- padding: 0px 20rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .modal-container {
|
|
|
- height: 100vh;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .coupon-content {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 300rpx;
|
|
|
- transform: translateY(100%);
|
|
|
- border-radius: 20rpx 20rpx 0 0;
|
|
|
- box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
|
|
|
- opacity: 1;
|
|
|
- transition: all 0.3s;
|
|
|
- z-index: 9999;
|
|
|
-
|
|
|
- .coupon-box {
|
|
|
- width: 350px;
|
|
|
- height: 500px;
|
|
|
- margin: 0 auto;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .imgs {
|
|
|
- width: 350px;
|
|
|
- height: 500px;
|
|
|
- }
|
|
|
-
|
|
|
- .close {
|
|
|
- width: 80rpx;
|
|
|
- height: 80rpx;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- z-index: 99999;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .border {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .btn {
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .coupon {
|
|
|
- width: 230px;
|
|
|
- height: 230px;
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- overflow-y: auto;
|
|
|
-
|
|
|
- .item {
|
|
|
- width: 85%;
|
|
|
- height: 70px;
|
|
|
- background-image: url('/static/index/item.png');
|
|
|
- // background-repeat: no-repeat;
|
|
|
- background-size: cover;
|
|
|
- background-position: center;
|
|
|
- padding: 10rpx 25rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
- margin-bottom: 10rpx;
|
|
|
-
|
|
|
- .left {
|
|
|
- color: #ff0000;
|
|
|
- }
|
|
|
-
|
|
|
- .right {
|
|
|
- height: 100%;
|
|
|
- padding-top: 30px;
|
|
|
- margin-left: 20rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .one_btn {
|
|
|
- position: absolute;
|
|
|
- top: 10%;
|
|
|
- right: 2%;
|
|
|
- width: 30px;
|
|
|
- height: 60px;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .coupon-header {
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
- margin: 40rpx 0 20rpx 0;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .coupon-amount {
|
|
|
- font-size: 80rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #ff0000;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .coupon-desc {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #666;
|
|
|
- margin: 30rpx 0;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .coupon-btn {
|
|
|
- margin: 20rpx auto 0 auto;
|
|
|
- width: 500rpx;
|
|
|
- height: 80rpx;
|
|
|
- border: none;
|
|
|
- border-radius: 40rpx;
|
|
|
- background-color: #ff0000;
|
|
|
- color: #fff;
|
|
|
- font-size: 36rpx;
|
|
|
- display: block;
|
|
|
- text-align: center;
|
|
|
- line-height: 80rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .mask {
|
|
|
- position: fixed;
|
|
|
- background-color: rgba(0, 0, 0, 0.5);
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: 999;
|
|
|
- opacity: 0;
|
|
|
- transition: all 0.3s;
|
|
|
- }
|
|
|
-
|
|
|
- .show {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- }
|
|
|
+ width: 100vw;
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(
|
|
|
+ to bottom right,
|
|
|
+ rgb(246, 249, 242),
|
|
|
+ rgb(210, 241, 243)
|
|
|
+ );
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .swiper {
|
|
|
+ padding: 16rpx 32rpx;
|
|
|
+
|
|
|
+ ::v-deepuni-swiper {
|
|
|
+ height: 320rpx !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0px 32rpx;
|
|
|
+ margin: 28rpx 0px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ background: rgba(0, 184, 151, 0.06);
|
|
|
+ border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #0fb4ac;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ img {
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .recommend {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: calc(100% - 64rpx);
|
|
|
+ margin: 12rpx auto 16rpx;
|
|
|
+ height: 218rpx;
|
|
|
+ padding: 40rpx 30rpx;
|
|
|
+ position: relative;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 4rpx 12rpx 0px rgba(88, 209, 187, 0.15);
|
|
|
+ border-radius: 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .tuijian_img {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 75rpx;
|
|
|
+ height: 40rpx;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .recommend_js {
|
|
|
+ text-align: center;
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #333333;
|
|
|
+ .js_img {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ position: relative;
|
|
|
+ border-radius: 50%;
|
|
|
+ // overflow: hidden;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+ // z-index: 9;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+ .border {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 99;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 40rpx 40rpx 0px 0px;
|
|
|
+ margin-top: 28rpx;
|
|
|
+ // padding: 32rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .selcet_box {
|
|
|
+ width: 100%;
|
|
|
+ overflow-x: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ white-space: nowrap;
|
|
|
+ padding: 20rpx 32rpx;
|
|
|
+
|
|
|
+ .options {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 30rpx;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hover {
|
|
|
+ color: #03c8be;
|
|
|
+ font-weight: 700;
|
|
|
+ border-bottom: 4rpx solid #03c8be;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu {
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 24rpx 32rpx;
|
|
|
+
|
|
|
+ .project {
|
|
|
+ background: linear-gradient(180deg, #f7ffff 0%, #e9fffb 100%);
|
|
|
+ box-shadow: 0px 4rpx 12rpx 0px rgba(88, 209, 187, 0.2);
|
|
|
+ border-radius: 24rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ padding: 16rpx 32rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 168rpx;
|
|
|
+ height: 168rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-right: 34rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ // .time {
|
|
|
+ // position: absolute;
|
|
|
+ // top: 0;
|
|
|
+ // right: 0;
|
|
|
+ // padding: 0px 10px;
|
|
|
+ // background-color: #333;
|
|
|
+ // opacity: .7;
|
|
|
+ // border-radius: 0px 0px 0px 10px;
|
|
|
+ // color: #fff;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+
|
|
|
+ .describe {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 32rpx;
|
|
|
+ line-height: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .num {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #808080;
|
|
|
+ display: flex;
|
|
|
+ margin-top: 16rpx;
|
|
|
+
|
|
|
+ .time {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666666;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 26rpx;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 24rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ margin-right: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .price_box {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #f53e54;
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 48rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .make {
|
|
|
+ width: 124rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #fff;
|
|
|
+ background: linear-gradient(135deg, #1ad8cf 0%, #21c8c0 100%);
|
|
|
+ border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
|
+ padding: 0px 20rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-container {
|
|
|
+ height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .coupon-content {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 300rpx;
|
|
|
+ transform: translateY(100%);
|
|
|
+ border-radius: 20rpx 20rpx 0 0;
|
|
|
+ box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
|
|
|
+ opacity: 1;
|
|
|
+ transition: all 0.3s;
|
|
|
+ z-index: 9999;
|
|
|
+
|
|
|
+ .coupon-box {
|
|
|
+ width: 350px;
|
|
|
+ height: 500px;
|
|
|
+ margin: 0 auto;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .imgs {
|
|
|
+ width: 350px;
|
|
|
+ height: 500px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .close {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ z-index: 99999;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .border {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .coupon {
|
|
|
+ width: 230px;
|
|
|
+ height: 230px;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: 85%;
|
|
|
+ height: 70px;
|
|
|
+ background-image: url('/static/index/item.png');
|
|
|
+ // background-repeat: no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ padding: 10rpx 25rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ height: 100%;
|
|
|
+ padding-top: 30px;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .one_btn {
|
|
|
+ position: absolute;
|
|
|
+ top: 10%;
|
|
|
+ right: 2%;
|
|
|
+ width: 30px;
|
|
|
+ height: 60px;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .coupon-header {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ margin: 40rpx 0 20rpx 0;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .coupon-amount {
|
|
|
+ font-size: 80rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ff0000;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .coupon-desc {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666;
|
|
|
+ margin: 30rpx 0;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .coupon-btn {
|
|
|
+ margin: 20rpx auto 0 auto;
|
|
|
+ width: 500rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border: none;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ background-color: #ff0000;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 36rpx;
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 80rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mask {
|
|
|
+ position: fixed;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 999;
|
|
|
+ opacity: 0;
|
|
|
+ transition: all 0.3s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .show {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
