Skip to content

W
wechat-web
Commit b3d817e2 by 无尘
Options

add: 增加消费记录卡券

parent da122bf5
Showing with 637 additions and 162 deletions
package.json
...@@ -14,7 +14,8 @@ ...@@ -14,7 +14,8 @@
"jsbarcode": "^3.6.0", "jsbarcode": "^3.6.0",
"vant": "^1.4.1", "vant": "^1.4.1",
"vue": "^2.5.17", "vue": "^2.5.17",
"vue-router": "^3.0.1" "vue-router": "^3.0.1",
"vuex": "^3.1.0"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "^3.0.1", "@vue/cli-plugin-babel": "^3.0.1",
......
src/assets/css/common.css
...@@ -105,6 +105,13 @@ a { ...@@ -105,6 +105,13 @@ a {
flex: 1; flex: 1;
} }
.flex-2 {
-webkit-box-flex: 2;
-webkit-flex: 2;
-ms-flex: 2;
flex: 2;
}
.flex-row { .flex-row {
-webkit-flex-direction: row; -webkit-flex-direction: row;
-moz-flex-direction: row; -moz-flex-direction: row;
...@@ -139,6 +146,10 @@ a { ...@@ -139,6 +146,10 @@ a {
max-width: 80px; max-width: 80px;
} }
.w-0 {
width: 0;
}
/* 字体大小 */ /* 字体大小 */
.font-12 { .font-12 {
...@@ -169,6 +180,10 @@ a { ...@@ -169,6 +180,10 @@ a {
font-size: 20px; font-size: 20px;
} }
.font-30 {
font-size: 30px;
}
.font-50 { .font-50 {
font-size: 50px; font-size: 50px;
} }
...@@ -185,6 +200,10 @@ a { ...@@ -185,6 +200,10 @@ a {
color: #CFA972; color: #CFA972;
} }
.color-606266 {
color: #606266;
}
.color-666 { .color-666 {
color: #666; color: #666;
} }
...@@ -201,6 +220,10 @@ a { ...@@ -201,6 +220,10 @@ a {
background: #fff; background: #fff;
} }
.m-r-4 {
margin-right: 4px;
}
.m-t-6 { .m-t-6 {
margin-top: 6px; margin-top: 6px;
} }
...@@ -209,10 +232,18 @@ a { ...@@ -209,10 +232,18 @@ a {
margin-top: 8px; margin-top: 8px;
} }
.m-t-10 {
margin-top: 10px;
}
.padding-lr-12 { .padding-lr-12 {
padding: 0 12px; padding: 0 12px;
} }
.p-t-10 {
padding-top: 10px;
}
.border-right-1 { .border-right-1 {
position: relative; position: relative;
} }
...@@ -326,3 +357,15 @@ a { ...@@ -326,3 +357,15 @@ a {
border-right: 5px solid transparent; border-right: 5px solid transparent;
border-bottom: 10px solid #666; border-bottom: 10px solid #666;
} }
/* 无数据 */
.no-data-contain {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
src/assets/font/demo_index.html
...@@ -31,6 +31,24 @@ ...@@ -31,6 +31,24 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon font_family">&#xe639;</span>
<div class="name">优惠券为空</div>
<div class="code-name">&amp;#xe639;</div>
</li>
<li class="dib">
<span class="icon font_family">&#xe63f;</span>
<div class="name">暂无记录</div>
<div class="code-name">&amp;#xe63f;</div>
</li>
<li class="dib">
<span class="icon font_family">&#xe64d;</span>
<div class="name">门店消费记录为空</div>
<div class="code-name">&amp;#xe64d;</div>
</li>
<li class="dib">
<span class="icon font_family">&#xe7ac;</span> <span class="icon font_family">&#xe7ac;</span>
<div class="name">qiaquan-2</div> <div class="name">qiaquan-2</div>
<div class="code-name">&amp;#xe7ac;</div> <div class="code-name">&amp;#xe7ac;</div>
...@@ -93,6 +111,33 @@ ...@@ -93,6 +111,33 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon font_family icon-youhuiquanweikong"></span>
<div class="name">
优惠券为空
</div>
<div class="code-name">.icon-youhuiquanweikong
</div>
</li>
<li class="dib">
<span class="icon font_family icon-zanwujilu"></span>
<div class="name">
暂无记录
</div>
<div class="code-name">.icon-zanwujilu
</div>
</li>
<li class="dib">
<span class="icon font_family icon-mendianxiaofeijiluweikong"></span>
<div class="name">
门店消费记录为空
</div>
<div class="code-name">.icon-mendianxiaofeijiluweikong
</div>
</li>
<li class="dib">
<span class="icon font_family icon-qiaquan-"></span> <span class="icon font_family icon-qiaquan-"></span>
<div class="name"> <div class="name">
qiaquan-2 qiaquan-2
...@@ -141,6 +186,30 @@ ...@@ -141,6 +186,30 @@
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-youhuiquanweikong"></use>
</svg>
<div class="name">优惠券为空</div>
<div class="code-name">#icon-youhuiquanweikong</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zanwujilu"></use>
</svg>
<div class="name">暂无记录</div>
<div class="code-name">#icon-zanwujilu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-mendianxiaofeijiluweikong"></use>
</svg>
<div class="name">门店消费记录为空</div>
<div class="code-name">#icon-mendianxiaofeijiluweikong</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-qiaquan-"></use> <use xlink:href="#icon-qiaquan-"></use>
</svg> </svg>
<div class="name">qiaquan-2</div> <div class="name">qiaquan-2</div>
......
src/assets/font/iconfont.css
@font-face {font-family: "font_family"; @font-face {font-family: "font_family";
src: url('iconfont.eot?t=1548147637403'); /* IE9 */ src: url('iconfont.eot?t=1548667693801'); /* IE9 */
src: url('iconfont.eot?t=1548147637403#iefix') format('embedded-opentype'), /* IE6-IE8 */ src: url('iconfont.eot?t=1548667693801#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARkAAsAAAAACKgAAAQWAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCfgqEZINzATYCJAMMCwgABCAFhREHRRtkB8i+QAZyq+4gXYxFQ+E8mxMmoLck0Lf42H+9EURj6ezdhUEBQUmxjIovKhYO0ZhUCUSFFkjW//D7y3egBihJyTylkYn+u4nnNrDLSUhrt6T9n7OMWKGLmxq7HaJCu+W1KX4ooDKn7/mrAq5str7vv9HUcG5wkS00bcMy6UAjPzwsfE3U5iTAagH+D11Tvw5XAv8bgEamVXuF8YAiAiMFI3GAOPYtsos4g5c1m0C9Pi5g+yLfv6CtQI0CcVJlE7RzaqWBFmpl1UDPIu4DatMN+GsA7oX3j79gF1iSqgy13DzxYML1T/1HI87/gxwCnOmM0PqRMQMoxBZo3lSLvTMQ6h1z3Uhz5SL42f/5WZy92T88QiKqIXGjCCZE6Yo4lHNpHFEtyWiuX41aPAf4LoDOlYqy7Eyl2+Lo2PxOpwSt+wx/VGs3iq/vZg5jEb44TqvzbaquyzF+02V8yrBJaLi1TsitZa3FoWg1Y4SwfTxz3GFW/EgXR6FzShjFdy7ix5ZPdl4wxhZcncyiVUd4ZkLPSn6nVsNJHSPcYi3xWphJwynLE5wxnzYCMRmY9fM3RjS0ajulM6X8dq6Os5KJj6+kU9cMnzpnyvolIdZvU7NPaNL4YK+SfHMClpucr0sHi6Z0fjyXGKy+vduyo0u03ZL/z/9HhgcKGRfnhr7Jvd4pR9FHH5+oz2HsdjJlRykrGNaBIDVV/tTzi60vbcH993rF1tvqiHd0cqqQ31fKwLYw3yLRsY239xZPe/pyxZ6O9NDYCkl0DLS21kaoPoyJlmtrq1B3k+y+19pqaUlLLAuvhknv5RXoAJcPrVnRUSccGoD43gLIpDdoIYEVHhroE+dFP40lQeF3JtxafNxpgTN/SlhgsAfOShBd//xndeQVi/9I/hdukAeFMvKG0ED6GESOaXhR5/WxAnkAlWvfEASgovYPIX73dzy8R88d7ba0Gwr4FD/DOhV1+SQAtS/EEvxcTseC4vKQJhebTdm+JTufcUqITN2mErK3ux8u7eocT2jQleJJjQE8azAOF7AEV4E9cDU4hNeblti/QYcmNVHqMGVAwEO3bTxp9gHPuj3ABVigKlIQ4Gogw+ttxfqIDcaiB7+3jClhEwtqUVWolUVUSZd9eLRIuqL8YDsVFJUSk0t/OIpdrdDTzQMIPLHiaLo25VX2rqLCQnmZlhjZYj4WQmNJmfbYSFbKiiQ4uLvLIcWqUNwBdO0VYSTBTKhACakYNMXiwsTnxfAxnEgu4T7OB2ZLCSRqzgAI/8EischqKA/y5MajG/wkVl1TbnGcchnbToWEBclFgl9CkZNUY4KgoRK4mocZEivKAe7AgTsuJe8qXh1eKt+4kJgBWjVHihxF7TkVhSmpJVWtsljFDinbcJiZlgAAAAA=') format('woff2'), url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('iconfont.woff?t=1548147637403') format('woff'), url('iconfont.woff?t=1548667693801') format('woff'),
url('iconfont.ttf?t=1548147637403') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('iconfont.ttf?t=1548667693801') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1548147637403#font_family') format('svg'); /* iOS 4.1- */ url('iconfont.svg?t=1548667693801#font_family') format('svg'); /* iOS 4.1- */
} }
.font_family { .font_family {
...@@ -15,6 +15,18 @@ ...@@ -15,6 +15,18 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-youhuiquanweikong:before {
content: "\e639";
}
.icon-zanwujilu:before {
content: "\e63f";
}
.icon-mendianxiaofeijiluweikong:before {
content: "\e64d";
}
.icon-qiaquan-:before { .icon-qiaquan-:before {
content: "\e7ac"; content: "\e7ac";
} }
......
src/assets/js/public.js 0 → 100644
/**
* 手机号格式化
* @param {String} phone
*/
const formatPhone = (phone) => {
phone = phone.toString();
return phone.substr(0, 3) + '****' + phone.substr(7, 11);
};
/**
* 千分位格式化
* @param {数字} val
*/
const toThousands = (val) => {
let num = (val || 0).toString(),
result = '';
while (num.length > 3) {
result = ',' + num.slice(-3) + result;
num = num.slice(0, num.length - 3);
}
if (num) {
result = num + result;
}
return result;
}
export default {
formatPhone,
toThousands
}
src/main.js
import 'amfe-flexible'; import 'amfe-flexible';
import Vue from 'vue'; import Vue from 'vue';
import App from './App'; import App from './App';
import { import store from './store/index'
router import { router } from './router';
} from './router';
import './assets/font/iconfont.css'; import './assets/font/iconfont.css';
import './assets/css/common.css'; import './assets/css/common.css';
new Vue({ new Vue({
router, router,
store,
el: '#app', el: '#app',
render: h => h(App) render: h => h(App)
}); });
src/router.js
...@@ -10,7 +10,7 @@ const routes = [{ ...@@ -10,7 +10,7 @@ const routes = [{
{ {
name: 'index', name: 'index',
component: () => component: () =>
import ('./view/index'), import ('./views/index'),
meta: { meta: {
title: '首页' title: '首页'
} }
...@@ -18,7 +18,7 @@ const routes = [{ ...@@ -18,7 +18,7 @@ const routes = [{
{ {
name: 'point', name: 'point',
component: () => component: () =>
import ('./view/point'), import ('./views/point'),
meta: { meta: {
title: '积分明细' title: '积分明细'
} }
...@@ -26,15 +26,15 @@ const routes = [{ ...@@ -26,15 +26,15 @@ const routes = [{
{ {
name: 'cards', name: 'cards',
component: () => component: () =>
import ('./view/cards'), import ('./views/cards'),
meta: { meta: {
title: '卡券包' title: '卡券包'
} }
}, },
{ {
name: 'record', name: 'records',
component: () => component: () =>
import ('./view/record'), import ('./views/records'),
meta: { meta: {
title: '消费记录' title: '消费记录'
} }
......
src/store/index.js
import Vuex from 'vuex';
import Vue from 'vue';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
bodyH: document.documentElement.clientHeight,
},
mutations: {
},
action: {
}
})
src/view/cards/index.vue deleted 100644 → 0
<template>
<div>
</div>
</template>
<script>
export default {
name: "cards",
components: {
},
data() {
return {
};
},
computed: {
},
methods: {
}
};
</script>
<style lang="less" scoped>
</style>
src/view/record/index.vue deleted 100644 → 0
<template>
<div class="recorde-contian bg-f4f5f6">
<div class="list-contian">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad">
<div class="recorde-list-cell bg-fff border-box" v-for="(item,index) in list" :key="index+item.storeName">
<div
class="recorde-list-cell_title flex flex-align-center font-12 border-bottom-1 padding-lr-12 border-box">
<van-icon name="shop-o" />{{ item.storeName }}
</div>
<div class="flex border-box padding-lr-12">
<div class="recorde-list-cell_left flex-1">
<div class="list-cell_left_name font-12 color-232326">{{ item.goodsName }}</div>
</div>
<div class="recorde-list-cell_right flex-1 text-right">
<div class="list-cell_right_num font-13 color-232326 ">{{ item.newPrice }}</div>
<div class="list-cell_right_num font-13 color-848689 "><s>{{ item.oldPrice }}</s></div>
</div>
</div>
<div class="flex border-bottom-1 border-box padding-lr-12">
<div class="flex-1 font-12 color-848689">颜色分类：{{ item.color }} 尺码：{{ item.size }}</div>
<div class="flex-1 font-12 color-848689 text-right"><van-icon name="cross"></van-icon>{{ item.goodsNum}}</div>
</div>
<div class="recorde-list-cell_sub flex flex-align-center border-box padding-lr-12">
<div class="list-cell_sub_date flex-1 font-12 color-232326">{{ item.date }}购买</div>
<div class="list-cell_sub_all flex-1 font-12 color-232326 text-right">共{{ item.goodsNum }}件商品 实付款：{{ item.priceAll }}</div>
</div>
</div>
</van-list>
</div>
</div>
</template>
<script>
import { List, Icon } from 'vant';
export default {
name: "record",
components: {
[List.name]: List,
[Icon.name]: Icon
},
data() {
return {
list: [
{
storeName: 'MG江苏南京秦淮区大洋百货新街口店(MATERIAL GIRL)',
goodsName: '哥斯拉加厚白色鸭绒羽绒服女中长款2018冬装新款绿连帽外套太平鸟',
newPrice: '1059.99',
oldPrice: '1899.00',
color: '元气绿',
size: 'M',
date: '2018-12-06',
goodsNum: '1',
priceAll: '12345.90'
}
],
loading: false,
finished: false
};
},
computed: {
},
methods: {
onLoad() {
const that = this;
// 异步更新数据
setTimeout(() => {
for (let i = 0; i < 10; i++) {
// this.list.push(this.list.length + 1);
}
// 加载状态结束
that.loading = false;
// 数据全部加载完成
if (that.list.length >=1) {
that.finished = true;
}
}, 500);
}
}
};
</script>
<style lang="less" scoped>
.recorde-list-cell_title {
height: 42px;
}
.recorde-list-cell_sub {
height: 42px;
}
</style>
src/views/cards/index.vue 0 → 100644
<template>
<div class="card-contain border-box" :style="{'min-height': $store.state.bodyH + 'px'}">
<div class="card-contain-inner">
<div class="card-brand-list border-box" v-for="(item,index) in cardList" :key="index">
<div class="card-brand-title">{{item.brandName}}</div>
<template v-for="(childItem,ind) in item.cardData">
<div class="card-list-cell border-box" v-if="ind < item.showCount" :key="ind">
<div class="card-list-cell_top border-box flex ">
<div class="card-list-cell_top_left flex-1">{{childItem.cardTitle}}</div>
<div class="card-list-cell_top_right flex-1 text-right">{{childItem.cardNum}}</div>
</div>
<div class="card-list-arrow">
<div class="card-list-arrow_left"></div>
<div class="card-list-arrow_right"></div>
</div>
<div class="card-list-cell_body flex flex-align-center flex-pack-center">
<div class="card-list-cell_body_left flex-1 flex flex-align-center flex-pack-center font-30">
<span class="font-15 m-t-10">¥</span>{{childItem.cardPrice}}
</div>
<div class="card-list-cell_body_right border-box flex-2">
<div class="cell-body_right_cell">{{childItem.cardCondition}}</div>
<div class="cell-body_right_cell">{{childItem.cardDate}}</div>
<div class="cell-body_right_cell">{{childItem.cardStore}}</div>
</div>
</div>
</div>
</template>
<div
v-if="item.cardData.length > 3 && item.cardData.length > item.showCount"
class="show-all font-14 color-848689"
@click="showAllData(item)">
展开剩余{{ item.cardData.length - 3 }}张 <van-icon name="arrow-down" />
</div>
</div>
</div>
<div class="no-card-data no-data-contain" v-if="!cardList.length">
<i class="font_family icon-youhuiquanweikong font-50 color-606266"></i>
<p class="font-14 color-303133">优惠券为空</p>
</div>
</div>
</template>
<script>
// import { formatPhone } from '@/assets/js/public.js';
import { Icon } from 'vant';
export default {
name: "cards",
components: {
[Icon.name]: Icon
},
data() {
return {
cardList: [
{
brandName: 'MATERIAL GIRL',
showCount: 3, // 默认显示个数
cardData: [
{
cardTitle: '感恩节抵扣券',
cardNum: '23554666773',
cardPrice: '100',
cardDate: '2018.12.01--2018.12.31',
cardCondition: '满￥89使用',
cardStore: '仅限武林银泰店使用',
backgroundColor: '#fef5f5'
},
{
cardTitle: '感恩节抵扣券',
cardNum: '23554666773',
cardPrice: '100',
cardDate: '2018.12.01--2018.12.31',
cardCondition: '满￥89使用',
cardStore: '仅限武林银泰店使用',
backgroundColor: '#fef5f5'
},
{
cardTitle: '感恩节抵扣券',
cardNum: '23554666773',
cardPrice: '100',
cardDate: '2018.12.01--2018.12.31',
cardCondition: '满￥89使用',
cardStore: '仅限武林银泰店使用',
backgroundColor: '#fef5f5'
},
{
cardTitle: '感恩节抵扣券',
cardNum: '23554666773',
cardPrice: '100',
cardDate: '2018.12.01--2018.12.31',
cardCondition: '满￥89使用',
cardStore: '仅限武林银泰店使用',
backgroundColor: '#fef5f5'
}
]
}
]
};
},
computed: {
},
methods: {
/**
* 显示所有
*/
showAllData(item) {
item.showCount = item.cardData.length;
}
}
};
</script>
<style lang="less" scoped>
.card-contain {
position: relative;
width: 100%;
padding: 10px;
background: #f4f5f6;
.card-contain-inner {
width: 100%;
.card-brand-list {
width: 100%;
padding: 0 8px 8px 8px;
background: #fff;
border-radius: 5px;
&+.card-brand-list{
margin-top: 10px;
}
.card-brand-title {
width: 100%;
height: 45px;
line-height: 45px;
font-size: 14px;
color: #232326;
}
.card-list-cell {
width: 100%;
height: 100px;
background-image: url(../../assets/images/coupon_bg.png);
background-size: 100%;
background-repeat: no-repeat;
border-radius: 5px;
background-color: rgba(63,187,101, 0.06);
border: 1px solid rgba(63,187,101, 0.16);
font-size: 11px;
color: #333;
&+.card-list-cell {
margin-top: 10px;
}
.card-list-cell_top {
width: 100%;
height: 35px;
line-height: 35px;
padding: 0 12px;
border-bottom: 1px dashed rgba(63,187,101, 0.16);
}
.card-list-arrow {
position: relative;
&_left {
position: absolute;
left: -5px;
top: -5px;
width: 10px;
height: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
background-color: #fff;
border-right: 1px solid rgba(63,187,101, 0.3);
border-top: 1px solid rgba(63,187,101, 0.3);
}
&_right {
position: absolute;
right: -5px;
top: -5px;
width: 10px;
height: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
background-color: #fff;
border-left: 1px solid rgba(63,187,101, 0.3);
border-bottom: 1px solid rgba(63,187,101, 0.3);
}
}
.card-list-cell_body {
width: 100%;
height: 65px;
&_left {
height: 100%;
border-right: 1px dashed rgba(63,187,101, 0.13);
}
&_right {
padding-left: 15px;
}
}
}
.show-all {
width: 100%;
height: 32px;
line-height: 40px;
text-align: center;
.van-icon-arrow-down {
vertical-align: middle;
}
}
}
}
}
</style>
src/view/index/index.vue → src/views/index/index.vue
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
</section> </section>
<p class="font-12 color-848689 p-tips border-box"><a href="" class="font-12 color-848689 ">让每个人尽享时常圈的乐趣~</a></p> <p class="font-12 color-848689 p-tips border-box"><a href="" class="font-12 color-848689 ">让每个人尽享时常圈的乐趣~</a></p>
<div class="qrcode-dialog_confirm" id="dialog" v-if="qrcodeVisable"> <div class="qrcode-dialog_confirm" id="dialog" v-if="qrcodeVisable">
<div class="qrcode-mask"></div> <div class="qrcode-mask" @click="closeDialog"></div>
<div class="qrcode-dialog"> <div class="qrcode-dialog">
<span class="qrcode-dialog-close" @click="closeDialog">+</span> <span class="qrcode-dialog-close" @click="closeDialog">+</span>
<div class="qrcode-dialog_hd"> <div class="qrcode-dialog_hd">
...@@ -101,30 +101,35 @@ export default { ...@@ -101,30 +101,35 @@ export default {
brandList: [ brandList: [
{ {
src: require('../../assets/images/logo01.png'), src: require('../../assets/images/logo01.png'),
qrcode: '', imgSrc: require('../../assets/images/logo01_248_124.png'),
qrcode: require('../../assets/images/logo1.png'),
}, },
{ {
src: require('../../assets/images/logo02.png'), src: require('../../assets/images/logo02.png'),
qrcode: '', imgSrc: require('../../assets/images/logo02_248_124.png'),
qrcode: require('../../assets/images/logo1.png'),
}, },
{ {
src: require('../../assets/images/logo03.png'), src: require('../../assets/images/logo03.png'),
qrcode: '', imgSrc: require('../../assets/images/logo03_248_124.png'),
qrcode: require('../../assets/images/logo1.png'),
}, },
{ {
src: require('../../assets/images/logo04.png'), src: require('../../assets/images/logo04.png'),
qrcode: '', imgSrc: require('../../assets/images/logo04_248_124.png'),
qrcode: require('../../assets/images/logo1.png'),
}, },
{ {
src: require('../../assets/images/logo05.png'), src: require('../../assets/images/logo05.png'),
qrcode: '', imgSrc: require('../../assets/images/logo05_248_124.png'),
qrcode: require('../../assets/images/logo1.png'),
}, },
{ {
src: require('../../assets/images/logo06.png'), src: require('../../assets/images/logo06.png'),
qrcode: '', qrcode: '',
} }
], ],
qrcodeVisable: true, qrcodeVisable: false,
dialogData: { dialogData: {
logo: require('../../assets/images/logo01.png'), logo: require('../../assets/images/logo01.png'),
qrcode: require('../../assets/images/logo1.png') qrcode: require('../../assets/images/logo1.png')
...@@ -152,6 +157,10 @@ export default { ...@@ -152,6 +157,10 @@ export default {
if (!item.qrcode) { if (!item.qrcode) {
return; return;
} }
that.dialogData = {
logo: item.imgSrc,
qrcode: item.qrcode
}
that.qrcodeVisable = true; that.qrcodeVisable = true;
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
}, },
...@@ -188,7 +197,7 @@ export default { ...@@ -188,7 +197,7 @@ export default {
/* 弹窗 */ /* 弹窗 */
.qrcode-dialog_confirm { .qrcode-dialog_confirm {
position: absolute; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
...@@ -198,6 +207,7 @@ export default { ...@@ -198,6 +207,7 @@ export default {
.qrcode-dialog { .qrcode-dialog {
position: relative; position: relative;
padding: 30px 0; padding: 30px 0;
min-height: 270px;
.qrcode-dialog-close { .qrcode-dialog-close {
position: absolute; position: absolute;
......
src/view/point/index.vue → src/views/point/index.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<p class="font-13 color-cfa972">可用积分</p> <p class="font-13 color-cfa972">可用积分</p>
<div class="point-number font-50 color-cfa972">{{ pointNum }}</div> <div class="point-number font-50 color-cfa972">{{ pointNum }}</div>
</div> </div>
<div class="point-body"> <div class="point-body" :style="{'min-height': $store.state.bodyH - 113 + 'px'}">
<van-list <van-list
v-model="loading" v-model="loading"
:finished="finished" :finished="finished"
...@@ -21,6 +21,10 @@ ...@@ -21,6 +21,10 @@
</div> </div>
</div> </div>
</van-list> </van-list>
<div class="no-recorde-data no-data-contain" v-if="!list.length">
<i class="font_family icon-mendianxiaofeijiluweikong font-50 color-606266"></i>
<p class="font-14 color-303133">门店消费记录为空</p>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -37,12 +41,12 @@ export default { ...@@ -37,12 +41,12 @@ export default {
return { return {
pointNum: '10,000', pointNum: '10,000',
list: [ list: [
{ // {
name: '今日签到', // name: '今日签到',
brandName: '[MATERIAL GIRL]', // brandName: '[MATERIAL GIRL]',
date: '2018-12-06 10:32', // date: '2018-12-06 10:32',
point: '5' // point: '5'
} // }
], ],
loading: false, loading: false,
finished: false finished: false
...@@ -81,6 +85,11 @@ export default { ...@@ -81,6 +85,11 @@ export default {
background: url('../../assets/images/banner_bg.png') no-repeat center center; background: url('../../assets/images/banner_bg.png') no-repeat center center;
background-size: 100%; background-size: 100%;
} }
.point-body {
position: relative;
}
.point-list-cell { .point-list-cell {
width: 100%; width: 100%;
padding: 15px; padding: 15px;
......
src/views/records/index.vue 0 → 100644
<template>
<div class="recorde-contian bg-f4f5f6" :style="{'min-height': $store.state.bodyH + 'px'}">
<div class="list-contian">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad">
<div class="recorde-list-cell bg-fff border-box" v-for="(item,index) in list" :key="index+item.storeName">
<div
class="recorde-list-cell_title flex flex-align-center font-12 border-bottom-1 padding-lr-12 border-box">
<div class="recorde-list-cell_txt w-0 flex-1"><van-icon name="shop-o" class="m-r-4" />{{ item.storeName }}</div>
</div>
<div class="recorde-list-cell_list" v-for="(childItem,key) in item.goodsList" :key="key">
<div class="flex border-box padding-lr-12 p-t-10">
<div class="recorde-list-cell_left flex-1">
<div class="list-cell_left_name font-12 color-232326">{{ childItem.goodsName }}</div>
</div>
<div class="recorde-list-cell_right flex-1 text-right">
<div class="list-cell_right_num font-13 color-232326 ">{{ childItem.newPrice }}</div>
<div class="list-cell_right_num font-13 color-848689 "><s>{{ childItem.oldPrice }}</s></div>
</div>
</div>
<div class="recorde-list-cell_sku flex flex-align-center border-bottom-1 border-box padding-lr-12">
<div class="flex-1 font-12 color-848689">颜色分类：{{ childItem.color }} 尺码：{{ childItem.size }}</div>
<div class="flex-1 font-12 color-848689 text-right"><van-icon name="cross"></van-icon>{{ childItem.goodsNum}}</div>
</div>
</div>
<div class="recorde-list-cell_sub flex flex-align-center border-box padding-lr-12">
<div class="list-cell_sub_date flex-1 font-12 color-232326">{{ item.date }} 购买</div>
<div class="list-cell_sub_all flex-1 font-12 color-232326 text-right">共{{ item.goodsNum }}件商品 实付款：{{ item.priceAll }}</div>
</div>
</div>
</van-list>
</div>
<div class="no-recorde-data no-data-contain" v-if="!list.length">
<i class="font_family icon-mendianxiaofeijiluweikong font-50 color-606266"></i>
<p class="font-14 color-303133">门店消费记录为空</p>
</div>
</div>
</template>
<script>
import { List, Icon } from 'vant';
export default {
name: "record",
components: {
[List.name]: List,
[Icon.name]: Icon
},
data() {
return {
list: [
{
storeName: 'MG江苏南京秦淮区大洋百货新街口店(MATERIAL GIRL)333333',
goodsList: [
{
goodsName: '哥斯拉加厚白色鸭绒羽绒服女中长款2018冬装新款绿连帽外套太平鸟333333',
newPrice: '1059.99',
oldPrice: '1899.00',
color: '元气绿',
size: 'M',
goodsNum: '1'
},
{
goodsName: '哥斯拉加厚白色鸭绒羽绒服女中长款2018冬装新款绿连帽外套太平鸟333333',
newPrice: '1059.99',
oldPrice: '1899.00',
color: '元气绿',
size: 'M',
goodsNum: '1'
}
],
date: '2018-12-06',
goodsNum: '1',
priceAll: '12345.90'
},
{
storeName: 'MG江苏南京秦淮区大洋百货新街口店(MATERIAL GIRL)333333',
goodsList: [
{
goodsName: '哥斯拉加厚白色鸭绒羽绒服女中长款2018冬装新款绿连帽外套太平鸟333333',
newPrice: '1059.99',
oldPrice: '1899.00',
color: '元气绿',
size: 'M',
goodsNum: '1'
},
{
goodsName: '哥斯拉加厚白色鸭绒羽绒服女中长款2018冬装新款绿连帽外套太平鸟333333',
newPrice: '1059.99',
oldPrice: '1899.00',
color: '元气绿',
size: 'M',
goodsNum: '1'
}
],
date: '2018-12-06',
goodsNum: '1',
priceAll: '12345.90'
}
],
loading: false,
finished: false
};
},
computed: {
},
methods: {
onLoad() {
const that = this;
// 异步更新数据
setTimeout(() => {
for (let i = 0; i < 10; i++) {
// this.list.push(this.list.length + 1);
}
// 加载状态结束
that.loading = false;
// 数据全部加载完成
if (that.list.length >=1) {
that.finished = true;
}
}, 500);
}
}
};
</script>
<style lang="less" scoped>
.recorde-list-cell {
&+.recorde-list-cell {
margin-top: 10px;
}
}
.recorde-list-cell_title {
width: 100%;
height: 42px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
.van-icon-shop-o {
vertical-align: -1px;
}
.recorde-list-cell_txt {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
.recorde-list-cell_sub {
height: 42px;
}
.recorde-list-cell_left {
min-width: 70%;
.list-cell_left_name {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
box-orient: vertical;
word-break: break-all;
overflow: hidden;
}
}
.recorde-list-cell_sku {
height: 42px;
}
.van-icon-cross {
vertical-align: -2px;
}
</style>
vue.config.js
const autoprefixer = require('autoprefixer'); const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem'); const pxtorem = require('postcss-pxtorem');
const path = require('path');
module.exports = { module.exports = {
outputDir: 'dist', outputDir: 'dist',
...@@ -16,5 +17,15 @@ module.exports = { ...@@ -16,5 +17,15 @@ module.exports = {
] ]
} }
} }
},
configureWebpack: {
resolve: {
alias: {
'@': path.join(__dirname, 'src'),
'assets': path.join(__dirname, 'src/assets'),
'components': path.join(__dirname, 'src/components'),
'views': path.join(__dirname, 'src/views'),
} }
}
},
}; };
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment