1hjz
/
1hjz-h5
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

修改了首页流程

feature/feature-compatible
wangkesi 7 years ago
parent
1e33c1307e
commit
d82d67983a
17 changed files with 475 additions and 382 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/api/home.js
  2. BIN
      src/assets/images/book.png
  3. BIN
      src/assets/images/cover.jpg
  4. BIN
      src/assets/images/forest.png
  5. BIN
      src/assets/images/girl.jpg
  6. BIN
      src/assets/images/hill.png
  7. BIN
      src/assets/images/sunrise.png
  8. BIN
      src/assets/images/sunshine.png
  9. BIN
      src/assets/logo.png
  10. BIN
      src/assets/logotxt.png
  11. 9
      src/main.js
  12. 46
      src/models/coupon-model.js
  13. 7
      src/models/home-model.js
  14. 2
      src/models/utils-model.js
  15. 5
      src/view/goods-classify.vue
  16. 640
      src/view/home.vue
  17. 144
      src/view/month-card.vue

4
src/api/home.js
View File

@ -14,6 +14,10 @@ export default {
getdefaultAddress: { getdefaultAddress: {
method: 'GET', method: 'GET',
url: '/mall/web/defaultDistrict' url: '/mall/web/defaultDistrict'
},
getLocation:{
method:"get",
url:"/mall/web/addressInfo"
} }
} }

BIN
src/assets/images/book.png
View File

Before After
Width: 128  |  Height: 128  |  Size: 10 KiB

BIN
src/assets/images/cover.jpg
View File

Before After
Width: 1024  |  Height: 601  |  Size: 100 KiB

BIN
src/assets/images/forest.png
View File

Before After
Width: 480  |  Height: 360  |  Size: 396 KiB

BIN
src/assets/images/girl.jpg
View File

Before After
Width: 150  |  Height: 220  |  Size: 18 KiB

BIN
src/assets/images/hill.png
View File

Before After
Width: 200  |  Height: 150  |  Size: 46 KiB

BIN
src/assets/images/sunrise.png
View File

Before After
Width: 480  |  Height: 360  |  Size: 146 KiB

BIN
src/assets/images/sunshine.png
View File

Before After
Width: 480  |  Height: 360  |  Size: 238 KiB

BIN
src/assets/logo.png
View File

Before After
Width: 96  |  Height: 96  |  Size: 8.0 KiB

BIN
src/assets/logotxt.png
View File

Before After
Width: 86  |  Height: 52  |  Size: 8.2 KiB

9
src/main.js
View File

@ -2,7 +2,13 @@
// (runtime-only or standalone) has been set in webpack.base.conf with an alias. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue"; import Vue from "vue";
import { WechatPlugin, LoadingPlugin, ToastPlugin, AlertPlugin } from "vux";
import {
WechatPlugin,
LoadingPlugin,
ToastPlugin,
AlertPlugin,
ConfirmPlugin
} from "vux";
import App from "./App"; import App from "./App";
import router from "./router"; import router from "./router";
import "@/assets/iconfont.css"; import "@/assets/iconfont.css";
@ -20,6 +26,7 @@ import "@/models/wxShare.js";
Vue.config.productionTip = false; Vue.config.productionTip = false;
Vue.use(WechatPlugin); Vue.use(WechatPlugin);
Vue.use(ConfirmPlugin)
Vue.use(LoadingPlugin); Vue.use(LoadingPlugin);
Vue.use(ToastPlugin); Vue.use(ToastPlugin);
Vue.use(AlertPlugin); Vue.use(AlertPlugin);

46
src/models/coupon-model.js
View File

@ -1,35 +1,25 @@
import utilsModel from './utils-model'
import couponApi from '../api/coupon'
import utilsModel from "./utils-model";
import couponApi from "../api/coupon";
export default { export default {
// 获取优惠券信息 // 获取优惠券信息
getCouponInfo : (batchNo, token) =>
getCouponInfo: (batchNo, token) =>
utilsModel utilsModel
.config(couponApi.getCouponInfo, {batchNo: batchNo})
.request({
params: {
sourceType: '1'
},
headers: {
'encodeToken': token
}
}),
.config(couponApi.getCouponInfo, { batchNo: batchNo })
.request({
params: {
sourceType: "1"
}
}),
// 领取优惠券 // 领取优惠券
giveCoupon : (params, token) =>
utilsModel
.config(couponApi.giveCoupon)
.request({
params : params,
headers: {
'encodeToken': token
}
giveCoupon: (params, token) =>
utilsModel.config(couponApi.giveCoupon).request({
params: params
}), }),
//推荐用户
sourceUser : (sourceUserId) =>
utilsModel
.config(couponApi.sourceUser , {sourceUserId: sourceUserId})
.request({
}),
}
//推荐用户
sourceUser: sourceUserId =>
utilsModel
.config(couponApi.sourceUser, { sourceUserId: sourceUserId })
.request({})
};

7
src/models/home-model.js
View File

@ -17,5 +17,12 @@ export default {
headers: { headers: {
version: "2.5.0" version: "2.5.0"
} }
}),
getLocation: params =>
utilsModel.config(homeApi.getLocation).request({
params: params,
// headers: {
// "x-forwarded-for": "113.65.207.218"
// }
}) })
}; };

2
src/models/utils-model.js
View File

@ -16,7 +16,7 @@ instance.interceptors.request.use(
} }
// config.headers.encodeToken = // config.headers.encodeToken =
// "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1NzEyMjQ3Mjc1OTcsInBheWxvYWQiOiJcIjE4MDYwMTE0MDkyODM4NDEwMXwxNTM5Njg4NzI3NTc5XCIifQ.sJBefUfJwybtWTNauW3j-w8VA6BlV56ASKmgQvDJc_Y"; // "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1NzEyMjQ3Mjc1OTcsInBheWxvYWQiOiJcIjE4MDYwMTE0MDkyODM4NDEwMXwxNTM5Njg4NzI3NTc5XCIifQ.sJBefUfJwybtWTNauW3j-w8VA6BlV56ASKmgQvDJc_Y";
console.log(config);
// console.log(config);
return config; return config;
}, },
err => { err => {

5
src/view/goods-classify.vue
View File

@ -142,14 +142,13 @@ export default {
}, },
//加载商品列表 //加载商品列表
getGoodsList() { getGoodsList() {
let that = this;
that.showLoading = true;
this.showLoading = true;
var params = { var params = {
merchantNo: this.no, merchantNo: this.no,
districtId: this.id districtId: this.id
}; };
goodsApi.getGoods(params).then(res => { goodsApi.getGoods(params).then(res => {
that.showLoading = false;
this.showLoading = false;
if (res.code == 0) { if (res.code == 0) {
this.goodsList = res.data || []; this.goodsList = res.data || [];
let list = []; let list = [];

640
src/view/home.vue
View File

@ -1,116 +1,121 @@
<template> <template>
<div class="home" style="height: auto;">
<div style="height: 0.9rem;"></div>
<div ref="header" class="page-top" id="top-nav">
<i class="position" @click="show = true"><img src="../assets/images/icon/position.png" />{{defaultCity}}</i>
<i class="logo"><img src="../assets/images/icon/logo.png" /></i>
<i class="text"><a href="tel:400-6080100">联系客服</a></i>
</div>
<div class="page-content">
<!--banner图-->
<div class="banner" v-if="bannerImgList.length > 0">
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="(item,index) in bannerImgList" :key="index">
<a :href="item.linkUrl ? item.linkUrl: 'javascript:void(0)' " class="swiper-img" :style="{backgroundImage:'url('+item.imgUrl+')'}"></a>
</swiper-slide>
</swiper>
<div class="swiper-pagination"></div>
</div>
<!-- TODO: 对应换hot 和 new 图标 -->
<div class="service f-flex" v-if="iconList.length != 0">
<div class="item" v-for="(item,index) in iconList" :key="index" v-on:click="goods(item.combinationNo)">
<a href="javascript:void(0)" class="f-relative f-inb">
<img :src="imghost + item.icon" class="icon" />
<img src="../assets/images/icon/hot.png" class="hot" v-if="item.label == '2'" />
<img src="../assets/images/icon/new.png" class="new" v-if="item.label == '1'" />
</a>
<p>{{item.combinationName}}</p>
</div>
</div>
<div class="coupon" v-if="promotionImgList.imgUrl">
<a v-if="promotionImgList.linkUrl != '' " :href="promotionImgList.linkUrl"><img :src="promotionImgList.imgUrl" /></a>
<a v-else href="javascript:void(0)"><img :src="promotionImgList.imgUrl" /></a>
</div>
<!-- TODO: 三种样式 -->
<!-- one -->
<div class="recommend f-flex" v-if="activityImgList.length == 3">
<div class="left">
<a :href="activityImgList[0].linkUrl"><img :src="activityImgList[0].imgUrl"></a>
</div>
<div class="right">
<a :href="activityImgList[1].linkUrl"><img :src="activityImgList[1].imgUrl" class="gap"></a>
<a :href="activityImgList[2].linkUrl"><img :src="activityImgList[2].imgUrl"></a>
</div>
</div>
<!-- two -->
<div class="recommend f-flex" v-if="activityImgList.length == 2">
<div class="left">
<a :href="activityImgList[0].linkUrl"><img :src="activityImgList[0].imgUrl"></a>
</div>
<div class="right">
<a :href="activityImgList[1].linkUrl"><img :src="activityImgList[1].imgUrl" class="two"></a>
</div>
</div>
<!-- three -->
<div class="recommend f-flex" v-if="activityImgList.length == 1">
<a :href="activityImgList[0].linkUrl"><img :src="activityImgList[0].imgUrl" class="three"></a>
</div>
<div class="home" style="height: auto;">
<div style="height: 0.9rem;"></div>
<div ref="header" class="page-top" id="top-nav">
<i class="position" @click="show = true"><img src="../assets/images/icon/position.png" />{{defaultCity}}</i>
<i class="logo"><img src="../assets/images/icon/logo.png" /></i>
<i class="text"><a href="tel:400-6080100">联系客服</a></i>
</div>
<div class="page-content">
<!--banner图-->
<div class="banner" v-if="bannerImgList.length > 0">
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="(item,index) in bannerImgList" :key="index">
<a :href="item.linkUrl ? item.linkUrl: 'javascript:void(0)' " class="swiper-img" :style="{backgroundImage:'url('+item.imgUrl+')'}"></a>
</swiper-slide>
</swiper>
<div class="swiper-pagination"></div>
</div>
<!-- TODO: 对应换hot 和 new 图标 -->
<div class="service f-flex" v-if="iconList.length != 0">
<div class="item" v-for="(item,index) in iconList" :key="index" v-on:click="goods(item.combinationNo)">
<a href="javascript:void(0)" class="f-relative f-inb">
<img :src="imghost + item.icon" class="icon" />
<img src="../assets/images/icon/hot.png" class="hot" v-if="item.label == '2'" />
<img src="../assets/images/icon/new.png" class="new" v-if="item.label == '1'" />
</a>
<p>{{item.combinationName}}</p>
</div>
</div>
<div class="coupon" v-if="promotionImgList.imgUrl">
<a v-if="promotionImgList.linkUrl != '' " :href="promotionImgList.linkUrl"><img :src="promotionImgList.imgUrl" /></a>
<a v-else href="javascript:void(0)"><img :src="promotionImgList.imgUrl" /></a>
</div>
<!-- TODO: 三种样式 -->
<!-- one -->
<div class="recommend f-flex" v-if="activityImgList.length == 3">
<div class="left">
<a :href="activityImgList[0].linkUrl"><img :src="activityImgList[0].imgUrl"></a>
</div>
<div class="right">
<a :href="activityImgList[1].linkUrl"><img :src="activityImgList[1].imgUrl" class="gap"></a>
<a :href="activityImgList[2].linkUrl"><img :src="activityImgList[2].imgUrl"></a>
</div>
</div>
<!-- two -->
<div class="recommend f-flex" v-if="activityImgList.length == 2">
<div class="left">
<a :href="activityImgList[0].linkUrl"><img :src="activityImgList[0].imgUrl"></a>
</div>
<div class="right">
<a :href="activityImgList[1].linkUrl"><img :src="activityImgList[1].imgUrl" class="two"></a>
</div>
</div>
<!-- three -->
<div class="recommend f-flex" v-if="activityImgList.length == 1">
<a :href="activityImgList[0].linkUrl"><img :src="activityImgList[0].imgUrl" class="three"></a>
</div>
<!--商品列表-->
<div class="new-card-box" style="padding-top: 0.3rem;">
<div class="new-card" v-if="item.goodsList.length > 0" v-for="(item,index) in goodsList" :key="index">
<div class="new-card-top">
<img :src=" imghost + item.image">
</div>
<ul class="card-list">
<li v-for="item1 in item.goodsList">
<a :href="'/mall/web/vgoods/detail/' + item1.goodsNo">
<div class="left">
<a :href="'/mall/web/vgoods/detail/' + item1.goodsNo">
<img :src=" imghost + item1.bannerImgs" />
</a>
</div>
<div class="right">
<h3>{{item1.name}}</h3>
<div class="text">{{item1.shortDesc}}</div>
<div class="card-name">
<i :style="{marginRight:(i+1)==item1.labelList.length?'0':'0.1rem'}" v-if="label.labelText" v-for="(label,i) in item1.labelList">{{label.labelText}}</i>
</div>
<div class="btn-box">
<!--originalPrice原价price优惠价 -->
<div class="btn-box-left">
<span class="price">￥ <em>{{item1.price ? item1.price/100:item1.originalPrice/100}}</em></span>
<span class="original-price" v-if="item1.price&&item1.price!=item1.originalPrice"><em>￥{{ item1.originalPrice/100}}</em></span>
</div>
<a :href="'/mall/web/vgoods/detail/' + item1.goodsNo">立即购买</a>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<div style="height:1rem"></div>
</div>
<div class="page-bottom">
<routerFooter></routerFooter>
</div>
<!--商品列表-->
<div class="new-card-box" style="padding-top: 0.3rem;">
<div class="new-card" v-if="item.goodsList.length > 0" v-for="(item,index) in goodsList" :key="index">
<div class="new-card-top">
<img :src=" imghost + item.image">
</div>
<ul class="card-list">
<li v-for="item1 in item.goodsList">
<a :href="'/mall/web/vgoods/detail/' + item1.goodsNo">
<div class="left">
<a :href="'/mall/web/vgoods/detail/' + item1.goodsNo">
<img :src=" imghost + item1.bannerImgs" />
</a>
</div>
<div class="right">
<h3>{{item1.name}}</h3>
<div class="text">{{item1.shortDesc}}</div>
<div class="card-name">
<i :style="{marginRight:(i+1)==item1.labelList.length?'0':'0.1rem'}" v-if="label.labelText" v-for="(label,i) in item1.labelList">{{label.labelText}}</i>
</div>
<div class="btn-box">
<!--originalPrice原价price优惠价 -->
<div class="btn-box-left">
<span class="price">￥ <em>{{item1.price ? item1.price/100:item1.originalPrice/100}}</em></span>
<span class="original-price" v-if="item1.price&&item1.price!=item1.originalPrice"><em>￥{{ item1.originalPrice/100}}</em></span>
</div>
<a :href="'/mall/web/vgoods/detail/' + item1.goodsNo">立即购买</a>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<div style="height:1rem"></div>
</div>
<div class="page-bottom">
<routerFooter></routerFooter>
</div>
<popup v-model="show">
<div class="picke-address">
<div class="status-btn">
<a class="cel-btn" @click="show = false">取消</a>
<a class="complete-btn" @click="getName()">完成</a>
</div>
<picker :data='addressData' :columns=3 v-model='addressValue' @on-change='change' ref="picker1"></picker>
</div>
</popup>
<div class="Loading-box">
<loading v-model="showLoading" text="loading"></loading>
</div>
</div>
<popup v-model="show">
<div class="picke-address">
<div class="status-btn">
<a class="cel-btn" @click="setShow">取消</a>
<a class="complete-btn" @click="getName()">完成</a>
</div>
<picker :data='addressData' :columns=3 v-model='addressValue' @on-change='change' ref="picker1"></picker>
</div>
</popup>
<div class="Loading-box">
<loading v-model="showLoading" text="loading"></loading>
</div>
<alert v-model="alertShow" title="自动定位地址：" @on-hide="alertHide" button-text="手动切换地址">
{{address}}
<div style="color: #2c3e50">
暂不提供服务
</div>
</alert>
</div>
</template> </template>
<script> <script>
@ -134,7 +139,6 @@ export default {
iconList: [], // 图标列表 iconList: [], // 图标列表
promotionImgList: {}, //优惠券， promotionImgList: {}, //优惠券，
goodsList: [], goodsList: [],
imghost: "http://medou.oss-cn-shenzhen.aliyuncs.com/",
swiperOption: { swiperOption: {
autoplay: { autoplay: {
disableOnInteraction: false disableOnInteraction: false
@ -144,8 +148,12 @@ export default {
el: ".swiper-pagination" el: ".swiper-pagination"
} }
}, },
showLoading: true,
searchBarFixed: false
showLoading: false,
searchBarFixed: false,
provinceId: "",
cityId: "",
alertShow: false,
address: ""
}; };
}, },
components: { components: {
@ -153,11 +161,12 @@ export default {
Popup, Popup,
Picker, Picker,
routerFooter, routerFooter,
Loading
Loading,
Alert
}, },
watch: { watch: {
$route(to, from) { $route(to, from) {
this.getCityName();
// this.getCityName();
} }
}, },
methods: { methods: {
@ -178,8 +187,10 @@ export default {
//本地存储不在 则赋予默认值 //本地存储不在 则赋予默认值
if (!name) { if (!name) {
this.defaultCity = "天河区"; this.defaultCity = "天河区";
this.merchantNo = 2; //商户编号
this.districtId = "440106000"; //区id
//商户编号
this.merchantNo = 2;
//区id
this.districtId = "440106000";
return; return;
} }
//440000000&广东省,440100000&广州市,440106000&天河区&2 //440000000&广东省,440100000&广州市,440106000&天河区&2
@ -196,55 +207,37 @@ export default {
}, },
//加载商品列表 //加载商品列表
getGoodsList() { getGoodsList() {
let that = this;
that.showLoading = true;
var params = {
merchantNo: this.merchantNo,
selectedDistrictId: this.districtId
};
homeApi.getGoods(params).then(res => {
that.showLoading = false;
if (res.code == 0) {
this.bannerImgList = res.response.bannerImgList;
this.activityImgList = res.response.activityImgList || [];
this.iconList = res.response.iconList || [];
this.promotionImgList =
res.response.promotionImgList[0] || {};
let list = res.response.goodsList;
for (let i = 0; i < list.length; i++) {
for (let y = 0; y < list[i].goodsList.length; y++) {
list[i].goodsList[y].labelList = list[i].goodsList[
y
].smallLabel
? JSON.parse(list[i].goodsList[y].smallLabel)
: "";
return new Promise((resolve, reject) => {
var params = {
merchantNo: this.merchantNo,
selectedDistrictId: this.districtId
};
homeApi.getGoods(params).then(res => {
this.showLoading = false;
if (res.code == 0) {
this.bannerImgList = res.response.bannerImgList;
this.activityImgList =
res.response.activityImgList || [];
this.iconList = res.response.iconList || [];
this.promotionImgList =
res.response.promotionImgList[0] || {};
let list = res.response.goodsList;
for (let i = 0; i < list.length; i++) {
for (let y = 0; y < list[i].goodsList.length; y++) {
list[i].goodsList[y].labelList = list[i]
.goodsList[y].smallLabel
? JSON.parse(
list[i].goodsList[y].smallLabel
)
: "";
}
} }
this.goodsList = list.slice();
} else {
this.$vux.toast.text(res.msg, "middle");
} }
this.goodsList = list.slice();
/*let goodsList = res.response.goodsList
let arr = [];
for(let i=0;i<goodsList.length;i++){
goodsList[i].combinationNo&&goodsList[i].isRelease==1?arr.push(goodsList[i].combinationNo):"";
}
let set =new Set(arr);
let list=Array.from(set);
let lastList=[];
for(let i=0;i<list.length;i++){
lastList.push({
type:list[i],
list:[],
})
for(let x=0;x<goodsList.length;x++){
if(lastList[i].type==goodsList[x].combinationNo&&goodsList[x].isRelease==1){
lastList[i].list.push(goodsList[x]);
}
}
}
this.goodsList = lastList.slice();*/
} else {
this.$vux.toast.text(res.msg, "middle");
}
resolve();
});
}); });
}, },
//加载地址数据 //加载地址数据
@ -257,35 +250,39 @@ export default {
} }
}); });
}, },
toJSON(data) {
if (data) {
return JSON.parse(data)[0].labelText;
} else {
return;
}
},
//获取默认地址信息 //获取默认地址信息
getdefaultAddress() {
homeApi.getdefaultAddress().then(res => {
if (res.code == 0) {
//如果获取的信息不存在 将从本地存储上拿
if (!res.data) {
this.show = true;
this.getCityName();
} else {
this.defaultCity = res.data.districtName;
this.districtId = res.data.districtId;
this.merchantNo = res.data.merchantNo;
this.addressValue = [];
this.addressValue.push(res.data.provinceId);
this.addressValue.push(res.data.cityId);
this.addressValue.push(res.data.districtId);
}
} else {
this.$vux.toast.text(res.msg, "middle");
}
this.getGoodsList();
});
// getdefaultAddress() {
// homeApi.getdefaultAddress().then(res => {
// if (res.code == 0) {
// //如果获取的信息不存在 将从本地存储上拿
// if (!res.data) {
// this.show = true;
// this.getCityName();
// } else {
// this.defaultCity = res.data.districtName;
// this.districtId = res.data.districtId;
// this.merchantNo = res.data.merchantNo;
// this.addressValue = [];
// this.addressValue.push(res.data.provinceId);
// this.addressValue.push(res.data.cityId);
// this.addressValue.push(res.data.districtId);
// }
// } else {
// this.$vux.toast.text(res.msg, "middle");
// }
// this.getGoodsList();
// });
// },
setShow() {
let str = localStorage.getItem("cityName") || "";
if (!str) {
this.defaultCity = "天河区";
//商户编号
this.merchantNo = 2;
//区id
this.districtId = "440106000";
}
this.show = false;
}, },
ShareWenXin() { ShareWenXin() {
var merchantNo = this.merchantNo; var merchantNo = this.merchantNo;
@ -305,12 +302,109 @@ export default {
c_no: c_no c_no: c_no
} }
}); });
},
getLocation() {
this.getId();
this.showLoading = true;
return new Promise((resolve, reject) => {
homeApi
.getLocation({
// provinceId: this.provinceId,
cityId: this.cityId ? this.cityId : ""
// districtId: this.districtId
})
.then(res => {
if (res.data.allAddress && res.data.userAddress) {
this.addressData = res.data.allAddress;
let data = res.data;
this.provinceId = data.userAddress.provinceId;
this.cityId = data.userAddress.cityId;
this.districtId = data.userAddress.districtId;
this.defaultCity = data.userAddress.districtName
? data.userAddress.districtName
: "天河区";
this.merchantNo = data.userAddress.merchantNo;
if (
data.userAddress.type != 1 &&
data.userAddress.type != 3
) {
this.addressValue = [
this.provinceId +
"&" +
data.userAddress.provinceName,
this.cityId +
"&" +
data.userAddress.cityName,
this.districtId +
"&" +
data.userAddress.districtName +
"&" +
data.userAddress.merchantNo
];
localStorage.setItem(
"cityName",
this.addressValue.slice()
);
}
// console.log(data.userAddress)
if (data.userAddress.type == 1) {
this.address =
data.userAddress.cityName +
data.userAddress.districtName;
this.alertShow = true;
} else if (data.userAddress.type == 2) {
this.$vux.confirm.show({
title: "自动定位地址：",
content:
data.userAddress.cityName +
data.userAddress.districtName,
cancelText: "切换地址",
onCancel: () => {
this.show = true;
}
});
} else if (data.userAddress.type == 0) {
this.getGoodsList();
}
resolve();
}
this.showLoading = false;
});
});
},
getId() {
let str = localStorage.getItem("cityName") || "";
if (!str) {
return;
}
let arr = str.split(",");
console.log(arr);
this.addressValue = arr;
this.provinceId = arr[0].split("&")[0];
this.cityId = arr[1].split("&")[0];
let cityNameArr = arr[2].split("&");
this.districtId = cityNameArr[0];
this.defaultCity = cityNameArr[1];
this.merchantNo = cityNameArr[2];
},
getData() {
let get = async () => {
await this.getLocation();
// await this.getGoodsList();
};
return get();
},
alertHide() {
this.show = true;
} }
}, },
mounted() { mounted() {
//异步加载
this.getdefaultAddress();
this.getAddress();
//异步加载
// this.getdefaultAddress();
// this.getAddress();
// this.getLocation();
console.log(2);
this.getData();
this.ShareWenXin(); this.ShareWenXin();
} }
}; };
@ -334,6 +428,9 @@ export default {
.swiper-pagination-bullet-active { .swiper-pagination-bullet-active {
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
} }
.weui-dialog__hd {
padding: 0;
}
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.btn-box { .btn-box {
@ -354,47 +451,47 @@ export default {
height: 100%; height: 100%;
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
position: relative; position: relative;
}
.home .page-top {
background: rgba(255, 255, 255, 1);
display: flex;
align-items: center;
justify-content: space-around;
z-index: 100;
position: fixed;
top: 0;
left: 0;
.page-top {
background: rgba(255, 255, 255, 1);
display: flex;
align-items: center;
justify-content: space-around;
z-index: 100;
position: fixed;
top: 0;
left: 0;
i {
font-style: normal;
display: flex;
align-items: center;
}
.position {
font-size: 0.26rem;
font-weight: 500;
color: rgba(153, 153, 153, 1);
img {
width: 0.2rem;
height: 0.25rem;
margin-right: 0.07rem;
}
}
.logo img {
width: 1.77rem;
height: 0.3rem;
}
.text {
height: 0.28rem;
font-size: 0.28rem;
font-weight: 400;
color: rgba(36, 158, 108, 1);
a {
position: relative;
color: rgba(36, 158, 108, 1);
}
}
}
} }
.home .page-top i {
font-style: normal;
display: flex;
align-items: center;
}
.home .page-top .position {
font-size: 0.26rem;
font-weight: 500;
color: rgba(153, 153, 153, 1);
}
.home .page-top .position img {
width: 0.2rem;
height: 0.25rem;
margin-right: 0.07rem;
}
.home .page-top .logo img {
width: 1.77rem;
height: 0.3rem;
}
.home .page-top .text {
height: 0.28rem;
font-size: 0.28rem;
font-weight: 400;
color: rgba(36, 158, 108, 1);
}
.home .page-top .text a {
position: relative;
color: rgba(36, 158, 108, 1);
}
.home .page-content { .home .page-content {
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@ -402,49 +499,49 @@ export default {
position: relative; position: relative;
top: 0; top: 0;
z-index: 10; z-index: 10;
}
.home .page-content .banner {
max-height: 3rem;
position: relative;
-webkit-overflow-scrolling: touch;
.banner {
max-height: 3rem;
position: relative;
-webkit-overflow-scrolling: touch;
a {
display: block;
}
div img {
width: 100%;
height: 3rem;
display: block;
margin: auto;
}
}
.coupon {
margin-top: 0.3rem;
img {
width: 6.8rem;
display: block;
margin: auto;
}
}
.new-card-first {
padding-top: 0.3rem;
}
.new-card .new-card-top {
padding: 0rem 0 0.3rem;
img {
width: 7.1rem;
display: block;
margin: auto;
}
}
} }
.home .page-content .banner > div { .home .page-content .banner > div {
max-height: 3rem; max-height: 3rem;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.home .page-content .banner a {
display: block;
}
.home .page-content .banner div img {
width: 100%;
height: 3rem;
display: block;
margin: auto;
}
.swiper-img { .swiper-img {
width: 100%; width: 100%;
height: 3rem; height: 3rem;
background-size: 100% 100%; background-size: 100% 100%;
} }
.home .page-content .coupon {
margin-top: 0.3rem;
}
.home .page-content .coupon img {
width: 6.8rem;
display: block;
margin: auto;
}
.home .page-content .new-card-first {
padding-top: 0.3rem;
}
.home .page-content .new-card .new-card-top {
padding: 0rem 0 0.3rem;
}
.home .page-content .new-card .new-card-top img {
width: 7.1rem;
display: block;
margin: auto;
}
.home .page-content .new-card .card-list li { .home .page-content .new-card .card-list li {
width: 7rem; width: 7rem;
height: 2.5rem; height: 2.5rem;
@ -539,17 +636,6 @@ export default {
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
} }
.home .page-content .new-card .card-list li .right .btn-box {
// width: 4.3rem;
// display: flex;
// flex-grow: 0;
// align-items: center;
// position: absolute;
// width: 100%;
// bottom: 0;
// justify-content: space-around;
// align-items: flex-end;
}
.home .page-content .new-card .card-list li .right .btn-box .price { .home .page-content .new-card .card-list li .right .btn-box .price {
color: #249e6c; color: #249e6c;
min-width: 1.4rem; min-width: 1.4rem;

144
src/view/month-card.vue
View File

@ -1,74 +1,74 @@
<template> <template>
<div class="">
<div class="m-slider">
<img src="../assets/images/slider-img.png" width="100%" height="100%" alt="">
</div>
<div class="month-card-title f-text-center">
<h4 class="">{{getData.goodsName}}</h4>
<p class="f-mt5">{{getData.shortDesc}}</p>
<p class="f-price f-mt10 f-flex justify-center">
<span class="s-gray f-mr15">市场价 : &nbsp;<span class="line-through">￥{{getData.originalPrice | numFilter}}</span></span>
<span>券后价 : </span><span class="f-font-23 s-red">￥{{getData.couponPrice | numFilter}}</span>
</p>
</div>
<div class="month-card-area">
<div class="month-card f-flex" style="margin-bottom: -35px;">
<div class="month-card-left" style="width: 76%;">
<div class="f-flex f-mt9">
<div class="f-mb20 f-mr10">
<p v-show="getData.type != 3" class="f-font-15" style="line-height:1;">￥</p>
<!-- 定额券 -->
<div v-show="getData.type == 1" class="f-bold f-font-45" style="text-shadow: 1px 1px #852B0E;">{{getData.amount | numFilter}}</div>
<!-- 满减券 -->
<div v-show="getData.type == 2" class="f-bold f-font-45" style="text-shadow: 1px 1px #852B0E;">{{getData.amount | numFilter}}</div>
<!-- 折扣 -->
<div v-show="getData.type == 3" class="f-bold f-font-45" style="text-shadow: 1px 1px #852B0E;">{{Number(getData.discount/10)}}折</div>
<!-- 定额券 -->
<p v-show="getData.type != 2" class="f-font-12 f-mt5" style="margin-left: 6px;">{{couponType[getData.type]}}</p>
<!-- 满减券 -->
<p v-show="getData.type == 2" class="f-font-12 f-mt5" style="margin-left: 6px;">满{{getData.fullAmount | numFilter}}可用</p>
</div>
<div class="f-mb20">
<p class="new-man">{{getData.batchName}}</p>
<p class="limit-buy">({{getData.goodsDesc}})</p>
<p class="end-date">{{getData.invalidTimeDesc}}</p>
</div>
</div>
</div>
<div class="month-card-right justify-center" style="margin-left:10px;">
<div v-show="getData.couponStatus == 0" class="f-mt-15 f-flex">
<img src="../assets/images/arrow-right_03.png" width="7" height="12" alt="" class="f-mr15">
<button class="get-btn" v-on:click="handleGetCoupon">点击领取</button>
</div>
<img v-show="getData.couponStatus > 0" src="../assets/images/get.png" width="60" height="60" alt="" class="f-mt-10">
</div>
</div>
<div class="f-mt10 f-text-center" v-show="getData.couponStatus > 0">
<button style="background-color:#F45252" v-show="getData.couponStatus != 30" v-on:click="handleUseCoupon" class="btn-md bg-gray s-white f-font-18">立即使用</button>
<button v-show="getData.couponStatus == 30" v-on:click="handleUseCoupon" class="btn-md bg-gray s-white f-font-18">已使用</button>
</div>
<div style="padding: 0 10px 20px;">
<p class="s-gray-1 f-font-11 f-mt20" style="line-height: 18px;">使用范围：{{getData.authAreaStr}}</p>
<p class="f-mt10 f-font-11 s-orange-2">
使用流程：领券下单→关注公众号→预约服务
</p>
<div class="f-text-center">
<div class="qrcode-img">
<img src="../assets/images/qrcode.png" width='100%' height="100%" alt="">
</div>
<p class="f-font-11 f-mt5 s-black-1">预约服务请关注公众号</p>
</div>
</div>
</div>
</div>
<div class="">
<div class="m-slider">
<img src="../assets/images/slider-img.png" width="100%" height="100%" alt="">
</div>
<div class="month-card-title f-text-center">
<h4 class="">{{getData.goodsName}}</h4>
<p class="f-mt5">{{getData.shortDesc}}</p>
<p class="f-price f-mt10 f-flex justify-center">
<span class="s-gray f-mr15">市场价 : &nbsp;<span class="line-through">￥{{getData.originalPrice | numFilter}}</span></span>
<span>券后价 : </span><span class="f-font-23 s-red">￥{{getData.couponPrice | numFilter}}</span>
</p>
</div>
<div class="month-card-area">
<div class="month-card f-flex" style="margin-bottom: -35px;">
<div class="month-card-left" style="width: 76%;">
<div class="f-flex f-mt9">
<div class="f-mb20 f-mr10">
<p v-show="getData.type != 3" class="f-font-15" style="line-height:1;">￥</p>
<!-- 定额券 -->
<div v-show="getData.type == 1" class="f-bold f-font-45" style="text-shadow: 1px 1px #852B0E;">{{getData.amount | numFilter}}</div>
<!-- 满减券 -->
<div v-show="getData.type == 2" class="f-bold f-font-45" style="text-shadow: 1px 1px #852B0E;">{{getData.amount | numFilter}}</div>
<!-- 折扣 -->
<div v-show="getData.type == 3" class="f-bold f-font-45" style="text-shadow: 1px 1px #852B0E;">{{Number(getData.discount/10)}}折</div>
<!-- 定额券 -->
<p v-show="getData.type != 2" class="f-font-12 f-mt5" style="margin-left: 6px;">{{couponType[getData.type]}}</p>
<!-- 满减券 -->
<p v-show="getData.type == 2" class="f-font-12 f-mt5" style="margin-left: 6px;">满{{getData.fullAmount | numFilter}}可用</p>
</div>
<div class="f-mb20">
<p class="new-man">{{getData.batchName}}</p>
<p class="limit-buy">({{getData.goodsDesc}})</p>
<p class="end-date">{{getData.invalidTimeDesc}}</p>
</div>
</div>
</div>
<div class="month-card-right justify-center" style="margin-left:10px;">
<div v-show="getData.couponStatus == 0" class="f-mt-15 f-flex">
<img src="../assets/images/arrow-right_03.png" width="7" height="12" alt="" class="f-mr15">
<button class="get-btn" v-on:click="handleGetCoupon">点击领取</button>
</div>
<img v-show="getData.couponStatus > 0" src="../assets/images/get.png" width="60" height="60" alt="" class="f-mt-10">
</div>
</div>
<div class="f-mt10 f-text-center" v-show="getData.couponStatus > 0">
<button style="background-color:#F45252" v-show="getData.couponStatus != 30" v-on:click="handleUseCoupon" class="btn-md bg-gray s-white f-font-18">立即使用</button>
<button v-show="getData.couponStatus == 30" v-on:click="handleUseCoupon" class="btn-md bg-gray s-white f-font-18">已使用</button>
</div>
<div style="padding: 0 10px 20px;">
<p class="s-gray-1 f-font-11 f-mt20" style="line-height: 18px;">使用范围：{{getData.authAreaStr}}</p>
<p class="f-mt10 f-font-11 s-orange-2">
使用流程：领券下单→关注公众号→预约服务
</p>
<div class="f-text-center">
<div class="qrcode-img">
<img src="../assets/images/qrcode.png" width='100%' height="100%" alt="">
</div>
<p class="f-font-11 f-mt5 s-black-1">预约服务请关注公众号</p>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
@ -146,7 +146,7 @@ export default {
if (result.code === 0 || result.code === 3) { if (result.code === 0 || result.code === 3) {
window.history.go(0); window.history.go(0);
} else if (result.code === 666) { } else if (result.code === 666) {
that.$vux.toast.text("您还没登录，请先登录!", "middle");
that.$vux.toast.text("您还没登录，请先登录!", "middle");
setTimeout(function() { setTimeout(function() {
window.location.href = window.location.href =
locationUrl + locationUrl +
@ -182,7 +182,7 @@ export default {
} }
}, },
mounted() { mounted() {
// 初始化
// 初始化
this.handleInit(); this.handleInit();
this.wxShare({ this.wxShare({
couponNo: this.batchNo, couponNo: this.batchNo,

Write Preview
Loading…
Cancel
Save