Leadfyy.co
/
ec.uniapp-master
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

文章详情 优惠券首页 商品详情 海报生成 购物车

master
Enzo 4 years ago
parent
465427ca89
commit
79bed38195
9 changed files with 2357 additions and 1418 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      common/js/config.js
  2. 6
      components/lf-price/lf-price.vue
  3. 63
      pages.json
  4. 54
      pages/article/details.vue
  5. 596
      pages/coupon/index/index.vue
  6. 445
      pages/coupon/index/index1.vue
  7. 574
      pages/shop/goodsdetail.vue
  8. 1079
      pages/store/cart/cart.vue
  9. 956
      pages/store/cart/carttemplate.vue

2
common/js/config.js
View File

@ -16,7 +16,7 @@ export default {
//https://demo-guojiang-ec-api.guojiang.club/ //https://demo-guojiang-ec-api.guojiang.club/
baseUrl: process.env.NODE_ENV === 'development' ? baseUrl: process.env.NODE_ENV === 'development' ?
'http://192.168.2.221/' : 'https://v3-ec-admin-dev.guojiang.club/', // 运行时自动替换变量
'http://192.168.3.29/' : 'https://v3-ec-admin-dev.guojiang.club/', // 运行时自动替换变量
}, },
PACKAGES: { PACKAGES: {
activity: false, activity: false,

6
components/lf-price/lf-price.vue
View File

@ -5,7 +5,7 @@
<text class="lf-font-28 lf-font-bold lf-color-price">.{{ showPrice(2) }}</text> <text class="lf-font-28 lf-font-bold lf-color-price">.{{ showPrice(2) }}</text>
</block> </block>
<block v-else> <block v-else>
<text class="text-price lf-font-48 lf-font-bold lf-color-price">{{ showPrice() }} <text class="lf-font-24 lf-color-777 lf-m-l-10">起</text> </text>
<text class="text-price lf-font-48 lf-font-bold lf-color-price">{{ showPrice() }} <text class="lf-font-24 lf-color-777 lf-m-l-10"><text v-if="iftext">起</text></text> </text>
</block> </block>
</view> </view>
</template> </template>
@ -16,6 +16,10 @@
price: { price: {
type: [Number, String], type: [Number, String],
default: '' default: ''
},
iftext: {
type: Boolean,
default: true
} }
}, },
computed: { computed: {

63
pages.json
View File

@ -3,6 +3,44 @@
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue" "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
}, },
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/shop/goodsdetail",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/coupon/index/index",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/store/list/list",
"style": {
"navigationBarTitleText": "商品列表"
}
},
{
"path": "pages/store/comment/comment",
"style": {
"navigationBarTitleText": "商品评论"
}
},
{
"path": "pages/store/cart/cart",
"style": {
"navigationBarTitleText": "购物车",
"navigationStyle": "custom"
}
},
{
"path": "pages/article/details",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
},
{ {
"path": "pages/order/index/onlineorder", "path": "pages/order/index/onlineorder",
"style": { "style": {
@ -224,12 +262,6 @@
"navigationBarTitleText": "商品列表" "navigationBarTitleText": "商品列表"
} }
}, },
{
"path": "pages/coupon/index/index",
"style": {
"navigationBarTitleText": "优惠券列表"
}
},
{ {
"path": "pages/coupon/offDetail/offDetail", "path": "pages/coupon/offDetail/offDetail",
"style": { "style": {
@ -248,12 +280,6 @@
"navigationBarTitleText": "" "navigationBarTitleText": ""
} }
}, },
{
"path": "pages/store/list/list",
"style": {
"navigationBarTitleText": "商品列表"
}
},
{ {
"path": "pages/store/search/search", "path": "pages/store/search/search",
"style": { "style": {
@ -266,25 +292,12 @@
"navigationBarTitleText": "开具发票" "navigationBarTitleText": "开具发票"
} }
}, },
{
"path": "pages/store/cart/cart",
"style": {
"navigationBarTitleText": "购物车",
"navigationStyle": "custom"
}
},
{ {
"path": "pages/store/detail/detail", "path": "pages/store/detail/detail",
"style": { "style": {
"navigationBarTitleText": "" "navigationBarTitleText": ""
} }
}, },
{
"path": "pages/store/comment/comment",
"style": {
"navigationBarTitleText": "商品评论"
}
},
{ {
"path": "pages/store/order/order", "path": "pages/store/order/order",
"style": { "style": {

54
pages/article/details.vue
View File

@ -0,0 +1,54 @@
<template>
<view>
<lf-nav :spreadOut="true" :showIcon="true" bgColor="#F8F8F8" title="文章详情"></lf-nav>
<view style="height: 30rpx;"></view>
<view class="lf-m-l-32 lf-m-r-32">
<view>
<view class="lf-font-36 lf-color-222 lf-m-b-20 lf-font-bold">
苦等一年！阳澄湖大闸蟹又肥了，让你安心吃螃蟹的文章也来了
</view>
<view class="lf-flex lf-m-b-24">
<view class="lf-font-28" style="color: #2D6361;">
金城优选线上商城
</view>
<view class="lf-color-777 lf-font-28 lf-m-l-25">
2021.09.01 16:28:22
</view>
</view>
</view>
<rich-text :nodes="content" v-if="content"></rich-text>
<!-- <lf-nocontent v-else></lf-nocontent> -->
<!-- 回到顶部 -->
<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top>
</view>
</view>
</template>
<script>
export default {
data(){
return {
content: '',
notice_id: 0,
title_content: ''
}
},
onLoad(e){
this.notice_id = e.notice_id;
if(this.notice_id) {
// this.getData();
}
},
methods: {
getData(){
this.$http(this.API.API_NOTICEDETAILS,{id:this.notice_id}).then(res => {
this.content = res.data?.content;
this.title_content = res.data
})
}
}
}
</script>
<style>
</style>

596
pages/coupon/index/index.vue
View File

@ -1,445 +1,161 @@
<template> <template>
<view id="coupon-index">
<view class="navbar mx-1px-top">
<block v-for="(item, index) in tabList" :key="index">
<view :id="index" class="navbar-item activity" :hidden="activeIndex != index"
:style="'color: ' + config.mainColor" @tap="tabClick">
<view class="navbar-title">{{item.title}}</view>
</view>
<view :id="index" :hidden="activeIndex == index" class="navbar-item" @tap="tabClick">
<view class="navbar-title">{{item.title}}</view>
</view>
</block>
<view class="navbar-slider"
:style="'width: ' + width + 'px; transform: translateX(' + sliderOffset + 'px); -webkit-transform: translateX(' + sliderOffset + 'px); background: ' + config.mainColor"></view>
</view>
<view class="tab-panel">
<view class="tab-content" :hidden="activeIndex != 0">
<view class="no-list" v-if="(!dataList[0].length || !dataList[0][0].length) && tabList[0].init">
<i class="iconfont icon-youhuiquan"></i>
<view>报告主人，您暂无
<span v-if="is_coupon == 1">优惠券~</span>
<span v-else>促销活动</span>
</view>
</view>
<view v-for="(items, idx) in dataList[0]" :key="idx">
<view class="coupon" :data-id="item.discount.id" @tap="jumpDetailOn"
v-for="(item, index) in dataList[0][idx]" :key="index">
<view class="coupon-left" :class="is_coupon != 1 ? 'discount' : ''"
:style="'background: ' + config.mainColor">
<view class="text-wrap">
<view class="text-box">
<view class="text">
<text class="money" v-if="item.discount.action_type.type == 'cash'">￥</text>
<span>{{ item.discount.action_type.value }}</span>
<text class="money" v-if="item.discount.action_type.type == 'discount'">折</text>
</view>
<text class="label text">{{ item.discount.label }}</text>
</view>
</view>
<view class="dot-wrap">
<view class="dot-item">
</view>
<view class="dot-item">
</view>
<view class="dot-item">
</view>
<view class="dot-item">
</view>
<view class="dot-item">
</view>
<view class="dot-item">
</view>
</view>
</view>
<view class="coupon-right">
<view class="top">
<span class="type">
<span v-if="item.discount.channel == 'ec'">商城</span>
<span v-else>门店</span>
</span>
<text class="info">{{item.discount.title}}</text>
</view>
<view class="bottom">
<view class="bottom-use">
<view class="tiem-box">
<text>{{item.discount.use_start_time}}至{{item.discount.use_end_time}}</text>
</view>
<view v-if="is_coupon == 1">
<!--<view class="btn use" data-code="item.discount.code" data-index="idx"-->
<!--data-findex="index" v-if="!item.discount.has_get" @tap.stop="getCoupon">-->
<!--点击领取-->
<!--</view>-->
<!---->
<view class="btn already"
:style="'color: ' + config.mainColor + '; border-color: ' + config.mainColor"
:data-id="item.id" @tap.stop="jumpList">
去使用
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="tab-content" :hidden="activeIndex != 1">
<view class="no-list" v-if="(!dataList[1].length || !dataList[1][0].length) && tabList[1].init">
<i class="iconfont icon-youhuiquan"></i>
<view>报告主人，您暂无
<span v-if="is_coupon == 1">优惠券~</span>
<span v-else>促销活动</span>
</view>
</view>
<view v-for="(items, idx) in dataList[1]" :key="idx">
<view class="coupon" :data-id="item.discount.id" :data-coupon="item.id" @tap="jumpDetail"
v-for="(item, index) in dataList[1][idx]" :key="index">
<view class="coupon-left" :class="is_coupon != 1 ? 'discount' : ''"
:style="'background: ' + config.mainColor">
<view class="text-wrap">
<view class="text-box">
<view class="text">
<text class="money" v-if="item.discount.action_type.type == 'cash'">￥</text>
<span>{{ item.discount.action_type.value }}</span>
<text class="money" v-if="item.discount.action_type.type == 'discount'">折</text>
</view>
<text class="label text">{{ item.discount.label }}</text>
</view>
</view>
<view class="dot-wrap">
<view class="dot-item">
</view>
<view class="dot-item">
</view>
<view class="dot-item">
</view>
<view class="dot-item">
</view>
<view class="dot-item">
</view>
<view class="dot-item">
</view>
</view>
</view>
<view class="coupon-right">
<view class="top">
<span class="type">
<span v-if="item.discount.channel == 'ec'">商城</span>
<span v-else>门店</span>
</span>
<text class="info">{{item.discount.title}}</text>
</view>
<view class="bottom">
<view class="bottom-use">
<view class="tiem-box">
<text>{{item.discount.use_start_time}}至{{item.discount.use_end_time}}</text>
</view>
<view v-if="is_coupon == 1">
<!--<view class="btn use" :data-code="item.discount.code"
:data-index="idx" :data-findex="index"
v-if="!item.discount.has_get" @tap.stop="getCoupon">
点击领取
</view>-->
<view class="btn already"
:style="'color: ' + config.mainColor + '; border-color: ' + config.mainColor"
:data-id="item.discount.id" :data-coupon="item.id" @tap.stop="jumpDetail">
去使用
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="see-over" @tap="toast">
查看已失效优惠券
</view>
</view>
<view>
<lf-nav :spreadOut="true" :showIcon="true" bgColor="white" title="优惠券"></lf-nav>
<view class="special_tab">
<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
</view>
<view class="coupon-wrap">
<view class="coupon-card lf-m-b-30" v-for="i of 3">
<view class="coupon-circle-top">
<view class="coupon-circle1"></view>
</view>
<view class="coupon-circle-bottom">
<view class="coupon-circle1"></view>
</view>
<view class="coupon-radius">
<view class="coupon-left">
<view class="lf-font-24 lf-color-white">￥<text class="lf-font-36 lf-color-white lf-font-bold">200</text></view>
<view class="coupon-tag">
待使用
</view>
</view>
<view class="coupon-right">
<view class="lf-font-32 lf-font-bold lf-color-white">满1200减200</view>
<view class="lf-font-24 lf-color-white">有效期2021.09.09-2021-09.15</view>
</view>
</view>
</view>
</view>
</view>
</template> </template>
<script>
import {pageLogin, getUrl, config} from '@/common/js/utils.js';
export default {
data() {
return {
activeIndex: 0,
sliderOffset: 0,
width: 0,
tabList: [{
title: '线上',
init: false,
page: 0,
more: true
}, {
title: '线下',
init: false,
page: 0,
more: true
}],
dataList: {
0: [],
1: []
},
is_coupon: 1,
// 用于判断是否为优惠券 1：优惠券 0：促销折扣
gbConfig: '',
};
},
onReachBottom(e) {
var status = this.activeIndex;
var page = this.tabList[status].page + 1;
var tabList = `tabList[${status}]`;
if (this.tabList[status].more) {
this.queryCouponList(status, page);
} else {
wx.showToast({
image: '../../../static/error.png',
title: '再拉也没有啦'
});
}
},
onShow(e) {
wx.getSystemInfo({
success: res => {
this.setData({
width: res.windowWidth / this.tabList.length,
sliderOffset: res.windowWidth / this.tabList.length * this.activeIndex
});
}
});
},
onLoad(e) {
// 第三方平台配置颜色
var gbConfig = this.$cookieStorage.get('globalConfig') || '';
// this.setData({
// config: gbConfig
// });
//
this.config = gbConfig;
if (e.type) {
this.setData({
activeIndex: e.type
});
}
;
this.queryCouponList();
},
components: {},
props: {},
methods: {
tabClick(e) {
var status = e.currentTarget.id;
this.setData({
sliderOffset: e.currentTarget.offsetLeft,
activeIndex: status
});
if (!this.tabList[status].init) {
this.queryCouponList(status);
}
},
jumpOff() {
wx.navigateTo({
url: '/pages/coupon/over/over'
});
},
jumpDetailOn(e) {
var id = e.currentTarget.dataset.id;
wx.navigateTo({
url: '/pages/coupon/onDetail/onDetail?id=' + id + '&is_coupon=' + this.is_coupon
});
},
jumpDetail(e) {
var id = e.currentTarget.dataset.id;
var coupon_id = e.currentTarget.dataset.coupon;
wx.navigateTo({
url: '/pages/coupon/offDetail/offDetail?id=' + id + '&is_coupon=' + this.is_coupon + '&coupon_id=' + coupon_id
});
},
jumpList(e) {
var id = e.currentTarget.dataset.id;
wx.navigateTo({
url: '/pages/coupon/goods/goods?id=' + id
});
},
convert() {
var code = this.code;
if (code == '') {
wx.showModal({
title: '',
content: "请输入兑换码",
showCancel: false
});
} else {
this.convertCoupon(code);
}
},
input(e) {
var vlaue = e.detail.value;
this.setData({
code: vlaue
});
},
viewDetail(e) {
var type = e.currentTarget.dataset.info.discount.type;
var id = e.currentTarget.dataset.info.id;
if (type == 0) {
wx.navigateTo({
url: '/pages/coupon/onDetail/onDetail?id=' + id
});
} else {
wx.navigateTo({
url: '/pages/coupon/offDetail/offDetail?id=' + id
});
}
},
// 查询优惠券列表
queryCouponList(type = 0, page = 1) {
wx.showLoading({
title: "加载中",
mask: true
});
var token = this.$cookieStorage.get('user_token') || '';
this.$http.get({
api: 'api/coupon',
header: {
Authorization: token
},
data: {
page,
channel: type ? 'shop' : 'ec',
is_active: 1
}
}).then(res => {
if (res.statusCode == 200) {
res = res.data;
if (res.status) {
var pages = res.meta.pagination;
var current_page = pages.current_page;
var total_pages = pages.total_pages;
// var tabList = `tabList[${type}]`;
// this.setData({
// [`dataList.${type}[${page - 1}]`]: res.data,
// [`${tabList}.init`]: true,
// [`${tabList}.page`]: current_page,
// [`${tabList}.more`]: current_page < total_pages
// });
this.dataList[type][page - 1] = res.data;
this.tabList[type].init = true;
this.tabList[type].page = current_page;
this.tabList[type].more = current_page < total_pages;
} else {
wx.showModal({
content: res.message || '请求失败',
showCancel: false
});
}
} else {
wx.showModal({
content: res.message || '请求失败',
showCancel: false
});
}
wx.hideLoading();
}).catch(rej => {
wx.hideLoading();
wx.showModal({
content: res.message || '请求失败',
showCancel: false
});
});
},
toast() {
wx.navigateTo({
url: '/pages/coupon/over/over'
});
},
setData: function (obj) {
let that = this;
let keys = [];
let val, data;
Object.keys(obj).forEach(function (key) {
keys = key.split('.');
val = obj[key];
data = that.$data;
keys.forEach(function (key2, index) {
if (index + 1 == keys.length) {
that.$set(data, key2, val);
} else {
if (!data[key2]) {
that.$set(data, key2, {});
}
}
data = data[key2];
});
});
}
},
computed: {},
watch: {}
};
<script>
export default {
data() {
return {
current: 0,
tab_list: [
{name: '全部'},
{name: '待使用'},
{name: '已使用'},
{name: '已过期'}
]
}
},
methods: {
tabChange(index){
this.current = index;
},
}
}
</script> </script>
<style rel="stylesheet/less" lang="less">
@import "index";
<style scoped lang="scss">
.coupon-circle1 {
width: 40rpx;
height: 40rpx;
background-color: white;
border-radius: 50%;
}
.coupon-circle-top {
width: 50rpx;
height: 50rpx;
border-radius: 50%;
// background-color: red;
position: absolute;
border: 1px dashed #ccc;
left: 190rpx;
top: -20rpx;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
}
.coupon-circle-bottom {
width: 50rpx;
height: 50rpx;
border-radius: 50%;
// background-color: red;
position: absolute;
border: 1px dashed #ccc;
left: 190rpx;
bottom: -20rpx;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
}
.coupon-right {
text-align: left;
justify-content: center;
align-items: flex-start;
display: flex;
flex-direction: column;
margin-left: 84rpx;
}
.coupon-left {
margin-left: 40rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.coupon-tag {
width: max-content;
margin-top: 10rpx;
padding: 0 24rpx;
height: 43rpx;
border-radius: 22rpx;
border: 2rpx solid #FFFFFF;
font-size: 24rpx;
color: white;
}
.coupon-wrap {
display: flex;
justify-content: center;
margin-top: 30rpx;
flex-direction: column;
align-content: center;
align-items: center;
}
.coupon-card {
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 674rpx;
// display: flex;
height: 171rpx;
// opacity: 0.59;
// border: 1rpx solid #FFFFFF;
background: #15716E;
border-radius: 20rpx;
}
.coupon-radius {
width: 664rpx;
display: flex;
height: 161rpx;
border: 1rpx dashed #ccc;
// background: #15716E;
border-radius: 20rpx;
}
/deep/.u-scroll-box {
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
}
/deep/.special_tab .u-tabs .u-scroll-box .u-tab-bar {
background-color: #15716E!important;
width: 80rpx!important;
position: absolute;
height: 10rpx;
left: 0;
border-radius: 8rpx 8rpx 0px 0px!important;
bottom: -12rpx;
}
/deep/ .u-tab-item {
font-size: 28rpx!important;
}
</style> </style>

445
pages/coupon/index/index1.vue
View File

@ -0,0 +1,445 @@
<template>
<view id="coupon-index">
<view class="navbar mx-1px-top">
<block v-for="(item, index) in tabList" :key="index">
<view :id="index" class="navbar-item activity" :hidden="activeIndex != index"
:style="'color: ' + config.mainColor" @tap="tabClick">
<view class="navbar-title">{{item.title}}</view>
</view>
<view :id="index" :hidden="activeIndex == index" class="navbar-item" @tap="tabClick">
<view class="navbar-title">{{item.title}}</view>
</view>
</block>
<view class="navbar-slider"
:style="'width: ' + width + 'px; transform: translateX(' + sliderOffset + 'px); -webkit-transform: translateX(' + sliderOffset + 'px); background: ' + config.mainColor"></view>
</view>
<view class="tab-panel">
<view class="tab-content" :hidden="activeIndex != 0">
<view class="no-list" v-if="(!dataList[0].length || !dataList[0][0].length) && tabList[0].init">
<i class="iconfont icon-youhuiquan"></i>
<view>报告主人，您暂无
<span v-if="is_coupon == 1">优惠券~</span>
<span v-else>促销活动</span>
</view>
</view>
<view v-for="(items, idx) in dataList[0]" :key="idx">
<view class="coupon" :data-id="item.discount.id" @tap="jumpDetailOn"
v-for="(item, index) in dataList[0][idx]" :key="index">
<view class="coupon-left" :class="is_coupon != 1 ? 'discount' : ''"
:style="'background: ' + config.mainColor">
<view class="text-wrap">
<view class="text-box">
<view class="text">
<text class="money" v-if="item.discount.action_type.type == 'cash'">￥</text>
<span>{{ item.discount.action_type.value }}</span>
<text class="money" v-if="item.discount.action_type.type == 'discount'">折</text>
</view>
<text class="label text">{{ item.discount.label }}</text>
</view>
</view>
<view class="dot-wrap">
<view class="dot-item">
</view>
<view class="dot-item">
</view>
<view class="dot-item">
</view>
<view class="dot-item">
</view>
<view class="dot-item">
</view>
<view class="dot-item">
</view>
</view>
</view>
<view class="coupon-right">
<view class="top">
<span class="type">
<span v-if="item.discount.channel == 'ec'">商城</span>
<span v-else>门店</span>
</span>
<text class="info">{{item.discount.title}}</text>
</view>
<view class="bottom">
<view class="bottom-use">
<view class="tiem-box">
<text>{{item.discount.use_start_time}}至{{item.discount.use_end_time}}</text>
</view>
<view v-if="is_coupon == 1">
<!--<view class="btn use" data-code="item.discount.code" data-index="idx"-->
<!--data-findex="index" v-if="!item.discount.has_get" @tap.stop="getCoupon">-->
<!--点击领取-->
<!--</view>-->
<!---->
<view class="btn already"
:style="'color: ' + config.mainColor + '; border-color: ' + config.mainColor"
:data-id="item.id" @tap.stop="jumpList">
去使用
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="tab-content" :hidden="activeIndex != 1">
<view class="no-list" v-if="(!dataList[1].length || !dataList[1][0].length) && tabList[1].init">
<i class="iconfont icon-youhuiquan"></i>
<view>报告主人，您暂无
<span v-if="is_coupon == 1">优惠券~</span>
<span v-else>促销活动</span>
</view>
</view>
<view v-for="(items, idx) in dataList[1]" :key="idx">
<view class="coupon" :data-id="item.discount.id" :data-coupon="item.id" @tap="jumpDetail"
v-for="(item, index) in dataList[1][idx]" :key="index">
<view class="coupon-left" :class="is_coupon != 1 ? 'discount' : ''"
:style="'background: ' + config.mainColor">
<view class="text-wrap">
<view class="text-box">
<view class="text">
<text class="money" v-if="item.discount.action_type.type == 'cash'">￥</text>
<span>{{ item.discount.action_type.value }}</span>
<text class="money" v-if="item.discount.action_type.type == 'discount'">折</text>
</view>
<text class="label text">{{ item.discount.label }}</text>
</view>
</view>
<view class="dot-wrap">
<view class="dot-item">
</view>
<view class="dot-item">
</view>
<view class="dot-item">
</view>
<view class="dot-item">
</view>
<view class="dot-item">
</view>
<view class="dot-item">
</view>
</view>
</view>
<view class="coupon-right">
<view class="top">
<span class="type">
<span v-if="item.discount.channel == 'ec'">商城</span>
<span v-else>门店</span>
</span>
<text class="info">{{item.discount.title}}</text>
</view>
<view class="bottom">
<view class="bottom-use">
<view class="tiem-box">
<text>{{item.discount.use_start_time}}至{{item.discount.use_end_time}}</text>
</view>
<view v-if="is_coupon == 1">
<!--<view class="btn use" :data-code="item.discount.code"
:data-index="idx" :data-findex="index"
v-if="!item.discount.has_get" @tap.stop="getCoupon">
点击领取
</view>-->
<view class="btn already"
:style="'color: ' + config.mainColor + '; border-color: ' + config.mainColor"
:data-id="item.discount.id" :data-coupon="item.id" @tap.stop="jumpDetail">
去使用
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="see-over" @tap="toast">
查看已失效优惠券
</view>
</view>
</template>
<script>
import {pageLogin, getUrl, config} from '@/common/js/utils.js';
export default {
data() {
return {
activeIndex: 0,
sliderOffset: 0,
width: 0,
tabList: [{
title: '线上',
init: false,
page: 0,
more: true
}, {
title: '线下',
init: false,
page: 0,
more: true
}],
dataList: {
0: [],
1: []
},
is_coupon: 1,
// 用于判断是否为优惠券 1：优惠券 0：促销折扣
gbConfig: '',
};
},
onReachBottom(e) {
var status = this.activeIndex;
var page = this.tabList[status].page + 1;
var tabList = `tabList[${status}]`;
if (this.tabList[status].more) {
this.queryCouponList(status, page);
} else {
wx.showToast({
image: '../../../static/error.png',
title: '再拉也没有啦'
});
}
},
onShow(e) {
wx.getSystemInfo({
success: res => {
this.setData({
width: res.windowWidth / this.tabList.length,
sliderOffset: res.windowWidth / this.tabList.length * this.activeIndex
});
}
});
},
onLoad(e) {
// 第三方平台配置颜色
var gbConfig = this.$cookieStorage.get('globalConfig') || '';
// this.setData({
// config: gbConfig
// });
//
this.config = gbConfig;
if (e.type) {
this.setData({
activeIndex: e.type
});
}
;
this.queryCouponList();
},
components: {},
props: {},
methods: {
tabClick(e) {
var status = e.currentTarget.id;
this.setData({
sliderOffset: e.currentTarget.offsetLeft,
activeIndex: status
});
if (!this.tabList[status].init) {
this.queryCouponList(status);
}
},
jumpOff() {
wx.navigateTo({
url: '/pages/coupon/over/over'
});
},
jumpDetailOn(e) {
var id = e.currentTarget.dataset.id;
wx.navigateTo({
url: '/pages/coupon/onDetail/onDetail?id=' + id + '&is_coupon=' + this.is_coupon
});
},
jumpDetail(e) {
var id = e.currentTarget.dataset.id;
var coupon_id = e.currentTarget.dataset.coupon;
wx.navigateTo({
url: '/pages/coupon/offDetail/offDetail?id=' + id + '&is_coupon=' + this.is_coupon + '&coupon_id=' + coupon_id
});
},
jumpList(e) {
var id = e.currentTarget.dataset.id;
wx.navigateTo({
url: '/pages/coupon/goods/goods?id=' + id
});
},
convert() {
var code = this.code;
if (code == '') {
wx.showModal({
title: '',
content: "请输入兑换码",
showCancel: false
});
} else {
this.convertCoupon(code);
}
},
input(e) {
var vlaue = e.detail.value;
this.setData({
code: vlaue
});
},
viewDetail(e) {
var type = e.currentTarget.dataset.info.discount.type;
var id = e.currentTarget.dataset.info.id;
if (type == 0) {
wx.navigateTo({
url: '/pages/coupon/onDetail/onDetail?id=' + id
});
} else {
wx.navigateTo({
url: '/pages/coupon/offDetail/offDetail?id=' + id
});
}
},
// 查询优惠券列表
queryCouponList(type = 0, page = 1) {
wx.showLoading({
title: "加载中",
mask: true
});
var token = this.$cookieStorage.get('user_token') || '';
this.$http.get({
api: 'api/coupon',
header: {
Authorization: token
},
data: {
page,
channel: type ? 'shop' : 'ec',
is_active: 1
}
}).then(res => {
if (res.statusCode == 200) {
res = res.data;
if (res.status) {
var pages = res.meta.pagination;
var current_page = pages.current_page;
var total_pages = pages.total_pages;
// var tabList = `tabList[${type}]`;
// this.setData({
// [`dataList.${type}[${page - 1}]`]: res.data,
// [`${tabList}.init`]: true,
// [`${tabList}.page`]: current_page,
// [`${tabList}.more`]: current_page < total_pages
// });
this.dataList[type][page - 1] = res.data;
this.tabList[type].init = true;
this.tabList[type].page = current_page;
this.tabList[type].more = current_page < total_pages;
} else {
wx.showModal({
content: res.message || '请求失败',
showCancel: false
});
}
} else {
wx.showModal({
content: res.message || '请求失败',
showCancel: false
});
}
wx.hideLoading();
}).catch(rej => {
wx.hideLoading();
wx.showModal({
content: res.message || '请求失败',
showCancel: false
});
});
},
toast() {
wx.navigateTo({
url: '/pages/coupon/over/over'
});
},
setData: function (obj) {
let that = this;
let keys = [];
let val, data;
Object.keys(obj).forEach(function (key) {
keys = key.split('.');
val = obj[key];
data = that.$data;
keys.forEach(function (key2, index) {
if (index + 1 == keys.length) {
that.$set(data, key2, val);
} else {
if (!data[key2]) {
that.$set(data, key2, {});
}
}
data = data[key2];
});
});
}
},
computed: {},
watch: {}
};
</script>
<style rel="stylesheet/less" lang="less">
@import "index";
</style>

574
pages/shop/goodsdetail.vue
View File

@ -0,0 +1,574 @@
<template>
<view>
<lf-nav :spreadOut="false" :showIcon="true" bgColor="transparent!important"></lf-nav>
<skeleton :loading="skeletonLoading" :row="12" :showAvatar="false" :showTitle="true">
<block>
<!-- 商品图片轮播 -->
<swiper :current="current" :indicator-dots="2 > 1 ? false : true" :circular="true" class="swiper-box" indicator-active-color="#1998FE">
<swiper-item v-for="(item, index) in pictures" :key="index">
<image mode="aspectFill" :src="item" style="width: 100%; height: 100%;" @click="lookImg(index)"></image>
</swiper-item>
</swiper>
<!-- 商品主要信息 -->
<view class="head-info">
<view class="lf-row-between">
<lf-price :iftext="false" :price="111"></lf-price>
<text class="lf-iconfont icon-fenxiang lf-font-40" @click="shareGraphic()"></text>
</view>
<view class="lf-row-between lf-font-24 lf-m-t-20 lf-p-b-20">
<view class="lf-font-bold lf-font-32 lf-color-222">颐莲喷雾 500ml</view>
</view>
<view class="lf-row-between lf-font-24 lf-p-b-30">
<view class="lf-font-28 lf-color-777">门店自提</view>
</view>
</view>
<self-line></self-line>
<view class="bg-white">
<view class="cu-bar padding-lr">
<view class="lf-flex">
<text class="lf-color-777 lf-font-28">优惠</text>
<view v-if="orderDetails.coupon == ''">
<text class="lf-color-price lf-font-28 lf-m-l-10" v-for="(item,index) of orderDetails.coupon">{{item.tag}}</text>
</view>
<view v-else>
<text class="lf-color-222 lf-font-26 lf-m-l-30">化妆品教师节满1200减200</text>
</view>
</view>
<view>
<text class="lf-font-24 lf-color-777 lf-iconfont icon-xiangyou"></text>
</view>
</view>
</view>
<self-line></self-line>
<view class="bg-white">
<view class="cu-bar padding-lr">
<view class="lf-flex">
<text class="lf-color-777 lf-font-28">服务</text>
<view style="width: 600rpx;flex-wrap: wrap;display: flex;margin-top: 32rpx;">
<view class="lf-m-l-30" v-for="i of 5">
<text class="lf-iconfont icon-xuanzhong lf-font-30" style="color: #15716E;"></text>
<text class="lf-m-l-10 lf-font-26 lf-color-black">正品保障</text>
</view>
</view>
</view>
<view>
<text class="lf-font-24 lf-color-777 lf-iconfont icon-xiangyou"></text>
</view>
</view>
</view>
<view class="bg-white">
<view class="cu-bar padding-lr">
<view class="lf-flex">
<text class="lf-color-777 lf-font-28">已选</text>
<text class="lf-color-222 lf-font-26 lf-m-l-30">已选500ml x1</text>
</view>
<view>
<text class="lf-font-24 lf-color-777 lf-iconfont icon-xiangyou"></text>
</view>
</view>
</view>
<self-line></self-line>
<view>
<view class="user-top">
<view class="lf-row-between lf-w-100">
<view class="lf-flex">
<view class="tag-father">
<image src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill" class="head-img"></image>
</view>
<view class="lf-flex-column lf-m-l-20">
<text class="lf-font-28 lf-color-black lf-font-bold">颐莲官方店</text>
<view class="lf-font-24 lf-color-777"><u-icon name="map" class="lf-m-r-10"></u-icon>L2</view>
</view>
</view>
<view>
<button class="head-btn"><u-icon name="chat" class="lf-m-r-10"></u-icon>客服</button>
</view>
</view>
</view>
<scroll-view class="scroll-view" :scroll-x="true">
<view class="scroll-content">
<view class="goods-item" v-for="(item, index) in 5" :key="index">
<image class="goods-img"></image>
<view class="goods-info">
<view class="lf-line-1">猪大肠卖咯 5毛钱一斤咯</view>
<view>￥0.5</view>
</view>
</view>
<view class="goods-item">
<view class="more-box">
<text>查看更多</text>
<text class="lf-iconfont icon--2 lf-text-vertical"></text>
</view>
</view>
</view>
</scroll-view>
</view>
<!-- 商品详情 -->
<view class="goods-detail">
<view class="lf-font-32 lf-font-bold lf-m-b-20">商品详情</view>
<rich-text :nodes="formatRichText('商品详情商品详情商品详情商品详情商品详情商品详情商品详情商品详情商品详情商品详情商品详情商品详情')"></rich-text>
<!-- <image class="goods-img" :src="item" v-for="(item, index) in goods_detail.content" :key="index" v-if="goods_detail.content_type == 'img'"></image> -->
</view>
<!-- 修饰专用 -->
<view class="extra"></view>
<!-- 吸底操作按钮 -->
<view class="lf-row-between fixed-bottom">
<view class="lf-flex lf-p-t-10 lf-p-b-10">
<view class="lf-flex-column lf-row-center icon-item" open-type="contact">
<text class="lf-iconfont icon-shoucang icon-img"></text>
<view class="lf-m-t-1">客服</view>
</view>
<view class="lf-flex-column lf-row-center icon-item" @click="switchCollect">
<text class="lf-iconfont icon-shoucang icon-img" v-if="is_collect"></text>
<text class="lf-iconfont icon-shoucang icon-img" v-else></text>
<view class="lf-m-t-1">{{ is_collect ? '已收藏' : '收藏' }}</view>
</view>
<button class="lf-flex-column lf-row-center icon-item">
<text class="lf-iconfont icon-shoucang icon-img"></text>
<view class="lf-m-t-1">购物车</view>
</button>
</view>
<view class="lf-flex">
<button class="btn1" @click="toAddOrder">加入购物车</button>
<button class="btn lf-m-l-15" @click="toAddOrder">立即购买</button>
</view>
</view>
<!-- 回到顶部 -->
<!-- <u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}" :icon-style="{color: '#ffffff'}"></u-back-top> -->
<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top>
</block>
</skeleton>
</view>
</template>
<script>
export default {
data(){
return {
current: 0, // 轮播下标
goods_id: 0,
goods_detail: {},
is_collect: false, // 1为当前收藏商品了，0为否
skeletonLoading: false,
pictures: [
'https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png',
'https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png',
'https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png'
]
}
},
onLoad(options){
this.goods_id = options.goods_id;
console.log('商品',this.goods_id)
// this.getGoodsDetail();
},
computed: {
isRight() {
return function(val) {
return this.$shared.isRight(val);
}
}
},
methods: {
shareGraphic(){
this.getCreateShareImg();
},
//请求h5的图片接口
getCreateShareImg(){
wx.showLoading({
title:"生成中",
mask:true
})
let origin = window.location.origin;
let share_url = origin+'/pages/store/detail/detail';
this.$http.get({
api:'api/distribution/createH5ShareImg',
data:{
goods_id:this.id,
share_url:share_url
}
}).then(res=>{
res = res.data;
if(res.status){
this.qr_code_image = res.data.image;
if(this.qr_code_image){
this.share_gaphic =!this.share_gaphic;
this.is_toggle_share = false;
}
} else{
wx.showModal({
content: res.message || '请求失败，请重试',
showCancel: false
});
}
wx.hideLoading()
}).catch(rej=>{
wx.hideLoading()
wx.showModal({
content: rej.message || '内部错误，请重试',
showCancel: false
});
})
},
getGoodsDetail(){
this.$http(this.API.API_ADVICEDETAILS, {id: this.goods_id}).then(res => {
this.skeletonLoading = false;
this.goods_detail = res.data;
this.is_collect = Boolean(res.data.is_collect) || false;
}).catch(err => {
this.skeletonLoading = false;
setTimeout(() => {
this.$toBack();
}, 1000);
})
},
// 切换商品收藏
switchCollect(){
let userInfo = uni.getStorageSync('userinfo') || {};
if(!userInfo.id || !userInfo.nickname || !userInfo.avatar){
this.$url('/pages/login/index?type=userinfo');
return;
}
if(this.is_collect) {
this.$http(this.API.API_DELCOLLECT, {agent_product_id:this.goods_id}).then(res => {
this.$msg('取消收藏成功!')
this.is_collect = false
console.log(res)
})
}else {
this.$http(this.API.API_ADDCOLLECT, {agent_product_id:this.goods_id}).then(res => {
this.$msg('添加收藏成功!')
this.is_collect = true
console.log(res)
})
}
},
// 拨打电话
makePhoneCall(phoneStr){
uni.makePhoneCall({
phoneNumber: String(phoneStr)
})
},
// 打开地图
openMap(){
let { address, lat, lng } = this.goods_detail?.store || {};
uni.openLocation({
longitude: Number(lat),
latitude: Number(lng),
scale: 20,
name: address
});
},
// 跳转到确认下单页面
toAddOrder(){
let goods_id = this.goods_detail.id;
this.$url('/pages/order/confirm_order?goods_id='+ goods_id);
},
// 预览图片
lookImg(index){
this.$u.throttle(() => {
let goods_banner = this.goods_detail.banners || [];
let banners = goods_banner.map(item => item.cover);
uni.previewImage({
urls: banners,
current: index
})
}, 200);
},
// 富文本处理
formatRichText(richText){
if(richText != null){
let newRichText= richText.replace(/<img[^>]*>/gi, function(match, capture){
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
return match;
});
newRichText = newRichText.replace(/style="[^"]+"/gi,function(match, capture){
match = match.replace(/width:[^;]+;/gi, 'width:100%;').replace(/width:[^;]+;/gi, 'width:100%;');
return match;
});
newRichText = newRichText.replace(/<br[^>]*\/>/gi, '');
newRichText = newRichText.replace(/\<img/gi, '<img style="width:100%;height:auto;display:block;margin:10px 0;"');
return newRichText;
}else{
return null;
}
}
},
onShareAppMessage(){
let goods = this.goods_detail;
let title = goods.name;
let imageUrl = goods.share_cover || goods.cover;
let path = '/pages/route/index?route=goods_detail&id='+ goods.id;
return {
title,
path,
imageUrl
}
}
}
</script>
<style>
page{
background-color: #f5f5f5;
overflow-x: hidden;
}
</style>
<style lang="scss" scoped="scoped">
//商品上去scrollview部分
.scroll-view{
height: 310rpx;
width: 100%;
// margin-top: 20rpx;
padding: 0 30rpx 30rpx 30rpx;
background-color: white;
.scroll-content{
display: flex;
width: 100%;
.goods-item{
margin-right: 15rpx;
width: 180rpx;
}
.goods-img{
width: 180rpx;
height: 180rpx;
background-color: #EEEEEE;
}
.goods-info{
text-align: center;
color: #222222;
&>view:nth-child(1n){
font-size: 24rpx;
}
&>view:nth-child(2n){
font-size: 28rpx;
font-weight: bold;
text-align: left;
color: #F63434;
}
}
.more-box{
width: 180rpx;
height: 180rpx;
background-color: #EEEEEE;
text-align: center;
line-height: 180rpx;
font-size: 24rpx;
}
}
}
//scrollview结束
.tag-father {
position: relative;
}
.head-tag {
color: white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 24rpx;
width: 36rpx;
height: 36rpx;
border-radius: 50%;
background-color: #15716E;
border: 1rpx solid #FFFFFF;
position: absolute;
left: 76rpx;
top: 86rpx;
z-index: 99;
}
.qzone-img {
width: 220rpx;
height: 220rpx;
border-radius: 10rpx;
margin-right: 12rpx;
&:nth-child(3n) {
margin-right: 0;
}
&:nth-child(n + 4) {
margin-top: 12rpx;
}
}
.user-top {
background-color: #F3F8F8;
padding: 30rpx;
display: flex;
align-items: center;
background-color: white;
}
.head-img {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
}
.head-btn {
display: flex;
width: max-content;
height: 45rpx;
background: white;
border: 2rpx solid #15716E;
align-items: center;
font-size: 22rpx;
color: #15716E;
justify-content: space-between;
border-radius: 35rpx;
padding: 10rpx!important;
}
.swiper-box{
width: 750rpx;
height: 750rpx;
background-color: #FFFFFF;
}
.head-info{
width: 750rpx;
height: auto;
box-sizing: border-box;
padding: 0 32rpx;
padding-top: 20rpx;
background-color: #FFFFFF;
// .price>view:nth-of-type(1){
// color: #FF0000;
// margin-right: 22rpx;
// font-weight: bold;
// }
.price>view:nth-of-type(1){
text-decoration: line-through;
color: #777777;
margin-right: 22rpx;
}
.price>view:nth-of-type(2){
width: max-content;
padding: 0 18rpx;
height: 46rpx;
background-color: #1998FE;
border-radius: 10rpx;
display: flex;
justify-content: center;
align-items: center;
color: #FFFFFF;
}
.label-box{
min-height: 130rpx;
width: 100%;
border-top: 1rpx solid #E5E5E5;
display: flex;
flex-wrap: wrap;
padding: 30rpx 0 10rpx 0;
.label-item{
width: max-content;
padding: 20rpx;
height: 70rpx;
border-radius: 10rpx;
border: 2rpx solid #1998FE;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
color: #1998FE;
margin-right: 20rpx;
margin-bottom: 20rpx;
}
}
}
.address-box{
width: 750rpx;
height: auto;
box-sizing: border-box;
background-color: #FFFFFF;
padding: 32rpx;
margin-top: 20rpx;
.shop-img{
width: 60rpx;
height: 60rpx;
border-radius: 50%;
}
}
.goods-detail{
width: 750rpx;
height: auto;
background-color: #FFFFFF;
padding: 32rpx;
box-sizing: border-box;
margin-top: 20rpx;
.goods-img{
width: 100%;
}
}
.extra{
width: 100%;
height: 110rpx;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
box-sizing: content-box;
}
.fixed-bottom{
position: fixed;
bottom: 0;
left: 0;
background-color: #FFFFFF;
width: 100%;
height: auto;
padding: 0 32rpx;
border-top: 1rpx solid #e5e5e5;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.icon-item{
text-align: center;
margin-right: 16rpx;
background-color: transparent;
margin: 0;
line-height: initial;
font-size: 28rpx;
font-weight: inherit;
margin-right: 10rpx;
padding: 0;
width: 88rpx;
position: relative;
&:first-child{
padding-left: 0;
}
.icon-img{
height: 50rpx;
width: 50rpx;
}
}
.btn1{
margin: 0;
width: max-content;
height: 80rpx;
background-color: rgba(21, 113, 110, 0.1);
color: #15716E;
line-height: 80rpx;
font-size: 32rpx;
padding: 0 20rpx;
border-radius: 42rpx;
font-size: 26rpx;
border: 2rpx solid #15716E;
}
.btn{
margin: 0;
padding: 0 20rpx;
width: max-content;
height: 80rpx;
background-color: #15716E;
color: #FFFFFF;
line-height: 80rpx;
font-size: 26rpx;
border-radius: 42rpx;
}
}
</style>

1079
pages/store/cart/cart.vue
File diff suppressed because it is too large
View File

956
pages/store/cart/carttemplate.vue
View File

@ -0,0 +1,956 @@
<template>
<view id="store-cart">
<lf-nav title="购物车"></lf-nav>
<view class="discount-box">
<!--登录状态-->
<view class="is-login" v-if="(is_login && discounts.length) || (is_login && coupons.length)">
<view class="promotion-box">
<view class="promotion" @tap="changeDiscounts" v-if="discounts.length">
<view class="title" :style="'color: ' + config.mainColor + '; border-color: ' + config.mainColor">
{{discounts[0].tags}}
</view>
<view>
{{discounts[0].label}} >
</view>
</view>
</view>
<view class="coupon mx-1px-left" :style="'color: ' + config.mainColor + ';'" @tap="changeCoupons" v-if="coupons.length">
优惠券
</view>
</view>
<!--未登录状态-->
<div class="no-login" v-if="!is_login" @tap="goLogin">
<div class="left">
<i class="iconfont icon-warning"></i>
<div>
<span>登录</span>后查看是否享受优惠
</div>
</div>
<div class="right">
登录 >
</div>
</div>
</view>
<view class="no-goods" v-if="list && list.length == 0">
<image mode="widthFix" src="https://cdn.guojiang.club/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20200323164958.png"></image>
</view>
<view class="goods-box" v-if="list && list.length">
<checkbox-group @change="changeCheck">
<view class="goods-item mx-1px-bottom" v-for="(item, index) in list" :key="index">
<view class="input">
<label class="checkbox">
<!-- #ifdef APP-PLUS -->
<checkbox :value="String(index)" color="red" :checked="item.checked"></checkbox>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<checkbox :value="String(index)" color="#FFFFFF" :checked="item.checked"></checkbox>
<!-- #endif -->
<!-- #ifdef H5 -->
<checkbox :value="String(index)" color="red" :checked="item.checked"></checkbox>
<!-- #endif -->
{{item.value!=undefined?item.value:''}}
</label>
</view>
<view class="img-box" :data-id="item.com_id" @tap.stop="jump">
<image :src="item.img"></image>
</view>
<view class="item-info">
<view class="name" :data-id="item.com_id" @tap.stop="jump">
{{item.name}}
</view>
<view class="money-box" :data-id="item.com_id" @tap.stop="jump">
<view class="model">
{{item.color}} <span v-if="item.color && item.size">,</span> {{item.size}}
</view>
<view class="money">
￥{{item.total}}
</view>
</view>
<view class="mun-box">
<view class="change-num">
<view class="ul-list-content">
<view class="item" :data-index="index" data-change="0" @tap="changeCount">-</view>
<view class="item"><input type="number" :value="item.qty" :data-index="index" @change="modifyCount" /></view>
<view class="item" :data-index="index" data-change="1" @tap="changeCount">+</view>
</view>
</view>
<view class="remove" @tap="removeFromCart" :data-index="index">
移除
</view>
</view>
</view>
</view>
</checkbox-group>
</view>
<view class="buy-box">
<label class="checkbox">
<!-- #ifdef APP-PLUS -->
<checkbox value="all" color="red" :checked="allCheck" @tap="selectAll"></checkbox>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<checkbox value="all" color="#FFFFFF" :checked="allCheck" @tap="selectAll"></checkbox>
<!-- #endif -->
<!-- #ifdef H5 -->
<checkbox value="all" color="red" :checked="allCheck" @tap="selectAll"></checkbox>
<!-- #endif -->
<text>全选</text>
</label>
<view class="money-box">
商品总计：<text>￥{{select_products.total!=undefined?select_products.total:''}}</text>
</view>
<button class="num-box" :style="'background: ' + config.mainColor" @tap="order" :loading="loading">
结算<text>{{'('+ select_products.count + ')' || 0}}</text>
</button>
</view>
<!--选择优惠券部分-->
<view class="maks" :class="show_coupons ? 'cur' : ''" @tap="showCoupons">
</view>
<view class="select-coupon-box" :class="show_coupons ? 'cur' : ''">
<view class="select-coupon">
<view class="select-coupon-top">
<view class="title">
领取优惠券
<view class="close" @tap="showCoupons">
X
</view>
</view>
</view>
<view class="select-coupon-bottom">
<view class="title">
可领优惠券
</view>
<view class="coupon-box">
<view class="coupon-item" v-for="(item, index) in coupons" :key="index" v-if="item.is_open">
<view class="coupon">
<view class="coupon-left">
<view class="text-wrap">
<view class="text-box">
<view class="text">
<span class="money" v-if="item.action_type.type == 'cash'">￥</span>
<span class="num">{{ item.action_type.value }}</span>
<span class="money" v-if="item.action_type.type == 'discount'">折</span>
</view>
<span class="label text">{{ item.label }}</span>
</view>
</view>
<view class="dot-wrap">
<view class="dot-item">
</view>
<view class="dot-item">
</view>
<view class="dot-item">
</view>
<view class="dot-item">
</view>
<view class="dot-item">
</view>
</view>
</view>
<view class="coupon-right">
<view class="top">
<span>
<span class="type" v-if="item.channel == 'ec'">商店</span>
<span class="type" v-if="item.channel == 'shop'">门店</span>
</span>
<span class="info">{{item.title}}</span>
</view>
<view class="bottom">
<view class="bottom-use">
<view class="tiem-box">
<text>{{item.use_start_time}}至{{item.use_end_time}}</text>
</view>
<view class="btn use" :style="'background: ' + config.mainColor + '; border-color: ' + config.mainColor" :data-code="item.code" :data-index="index" v-if="!coupons[index].receive" @tap="getCoupon">
点击领取
</view>
<view class="btn already" v-else>
已领取
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!--查看促销部分-->
<view class="maks" :class="show_discounts ? 'cur' : ''" @tap="showDiscounts">
</view>
<view class="see-discounts-box" :class="show_discounts ? 'cur' : ''">
<view class="select-discounts">
<view class="select-discounts-top">
<view class="title">
促销
<view class="close" @tap="showDiscounts">
X
</view>
</view>
</view>
<view class="select-discounts-bottom">
<view class="discounts-box">
<view class="disconts-item mx-1px-bottom" v-for="(item, index) in discounts" :key="index">
<view class="discounts-tags-title" :style="'color: ' + config.mainColor + '; border-color: ' + config.mainColor">
{{item.tags}}
</view>
<view class="tags-item">
{{item.label}}
</view>
</view>
</view>
</view>
</view>
</view>
<lf-tabbar></lf-tabbar>
</view>
</template>
<script>
import {pageLogin, getUrl,config} from '@/common/js/utils.js';
import lfNav from '@/components/lf-nav/lf-nav.vue';
import lfTabbar from '@/components/lf-tabbar/lf-tabbar.vue';
export default {
data() {
return {
is_login: '',
list: [],
groupList: [],
select_products: {},
allCheck: true,
channel: 'normal',
loading: false,
show_coupons: false,
// 领取优惠券
show_discounts: false,
// 查看促销活动
goodsList: [],
// 购物车里存在的商品id
config: '',
author: config.PACKAGES.author,
discounts:'',
coupons:''
};
},
onShow() {
// var oauth = Cache.get(cache_keys.token);
// var locals = Cache.get(cache_keys.cart);
var is_login = this.$cookieStorage.get('user_token');
this.setData({
is_login: is_login,
loading: false
});
var oauth = this.is_login;
var locals = this.$cookieStorage.get('cart');
if (oauth && locals && locals.length) {
// 提交本地购物车
this.appendToCart(locals);
} else {
this.queryCartList();
} // let app =getApp();
// app.isBirthday().then(()=>{
// if(this.$cookieStorage.get("birthday_gift")){
// var giftData=this.$cookieStorage.get("birthday_gift").data;
// new app.ToastPannel().__page.showText(giftData);
// }
// });
},
onLoad() {
// 第三方平台配置颜色
var bgConfig = this.$cookieStorage.get('globalConfig') || '';
this.setData({
config: bgConfig
});
},
components: {
lfNav,
lfTabbar
},
props: {},
methods: {
jump(e) {
var id = e.currentTarget.dataset.id;
wx.navigateTo({
url: '/pages/store/detail/detail?id=' + id
});
},
select_product() {
var data = {
count: 0,
total: 0,
__ids: []
};
this.list.forEach(v => {
if (v.checked) {
data.count += parseInt(v.qty);
data.total += Number(v.total);
data.__ids.push(v.__raw_id || v.index);
} else {
this.setData({
allCheck: false
});
}
});
this.setData({
select_products: data
});
},
addCart(success, message) {
// this.$refs.button.finish();
// this.setData({
// loading: false
// });
console.log(success);
this.loading=false;
if (success) {
this.$cookieStorage.clear('cart'); // wx.removeStorageSync('cart')
// TODO
//this.$emit('readyCheckout');
this.queryCartList();
} else {
this.$cookieStorage.clear('cart'); // wx.removeStorageSync('cart')
wx.showModal({
title: message || '保存本地购物车失败,请重试！'
});
}
},
order() {
var data = this.select_products;
if (!data.count) {
// this.$refs.button.finish();
return;
}
;
this.setData({
loading: true
});
var oauth = this.is_login;
if (!oauth) {
// 滚去登录
var url = getUrl(); // this.$router.go({ name: 'user-quick-login', query: { source: this.$route.path } });
wx.navigateTo({
url: '/pages/user/register/register?url=' + url
});
return;
} // var locals = wx.getStorageSync('cart');
var locals = this.$cookieStorage.get('cart');
if (locals && locals.length) {
// 提交本地购物车
this.appendToCart(locals);
return;
}
this.readyCheckout();
},
readyCheckout() {
var ids = this.select_products.__ids;
var type = this.channel;
this.checkoutOrder(ids, type);
},
checkoutOrder(ids, type) {
var oauth = this.is_login;
var cart_ids = ids.filter(id => id);
var wechat_group_id = this.$cookieStorage.get('openGId') || '';
var that = this;
this.$http.post({
api: `api/shopping/order/checkout`,
data: {
cart_ids,
type,
wechat_group_id
},
header: {
Authorization: oauth
},
method: 'POST'
}).then(res => {
res = res.data;
if (res.status) {
// Cache.set(cache_keys.order, res.data);
// wx.setStorageSync('local_order',res.data)
this.$cookieStorage.set('local_order', res.data);
that.checkout(true);
} else {
that.checkout(false, res.message);
}
}).catch(() => {
that.checkout(false);
});
},
checkout(success, message) {
// this.$refs.button.finish();
this.setData({
loading: false
});
if (success) {
// this.$router.go({ name: 'store-order'});
wx.navigateTo({
url: '/pages/store/order/order'
});
} else {
// this.$Alert(message || '结算失败，请重试!');
if (message == 'User unbind mobile') {
wx.showModal({
content: '请先绑定手机号',
showCancel: false,
success: res => {
if (res.confirm || !res.cancel && !res.confirm) {
wx.navigateTo({
url: '/pages/user/phone/phone?url=' + getUrl()
});
}
}
});
} else {
wx.showModal({
content: message || '结算失败,请重试！',
showCancel: false
});
}
}
},
queryCartList() {
// var data = wx.getStorageSync('cart') || [];
var data = this.$cookieStorage.get('cart') || []; // var oauth = Cache.get(cache_keys.token);
var oauth = this.is_login;
if (!oauth) {
this.setData({
list: data
});
this.select_product();
this.groupListF();
return;
}
var that = this;
this.$http.get({
api: `api/shopping/cart`,
header: {
Authorization: oauth
}
}).then(res => {
res = res.data;
var data = [];
if (res.status && res.data) {
data = Object.keys(res.data).map(key => {
res.data[key].checked = true;
return res.data[key];
}).concat(data); // 购物车领券
if (data.length) {
var list = [];
data.forEach(v => {
if (that.goodsList.indexOf(v.com_id) == -1) {
list.push(v.com_id);
}
;
});
this.setData({
goodsList: list
});
this.cardDiscount(list);
}
}
that.setData({
list: data
});
that.select_product();
that.groupListF();
}).catch(rej=> {
this.addCart(false);
});
},
updated(success, data, item, index) {
if (success) {
item.qty = data.qty;
item.total = data.total;
} else {
// TODO;
item.qty = data.qty;
item.total = item.qty * Number(item.price);
wx.showToast({
title: '超过最大库存',
image: '../../../static/error.png'
});
}
var list = this.list;
list[index] = item;
this.setData({
list: list
});
this.select_product();
this.groupListF();
},
change(item, data, index) {
if (item.local) {
var locals = uni.getStorageInfo('cart') || [];
locals[item.index].qty = data.qty;
locals[item.index].total = data.total; // Cache.set(cache_keys.cart, locals, 0, null);
// wx.setStorageSync('cart',locals)
this.$cookieStorage.set('cart', locals); // this.$emit('updated', true, data, item);
this.updated(true, data, item, index);
} else {
// clearTimeout(this.countTimer);
//
// this.countTimer = setTimeout(() => {
// this.updateToCart(data, item);
// }, 200);
this.updateToCart(data, item, index);
}
},
modifyCount(e) {
var index = e.currentTarget.dataset.index;
var item = this.list[index];
var val = e.detail.value;
var store_count = item.store_count;
if (!val) {
val = 1;
} else if (!/^[1-9]\d*$/.test(val)) {
val = val.replace(/[^\d].*$/, '');
val = parseInt(val) || 1;
}
if (store_count != undefined) {
if (val > store_count) {
val = store_count;
wx.showToast({
title: '超过最大库存'
});
}
}
var data = {
qty: val,
total: val * Number(item.price)
};
this.change(item, data);
},
updateToCart(attr, data, index) {
var oauth = this.is_login;
var that = this;
this.$http.ajax({
api: `api/shopping/cart/${data.__raw_id}`,
data: {
attributes: {
qty: attr.qty
}
},
method: 'PUT',
header: {
Authorization: oauth
}
}).then(res => {
res = res.data;
if (res.status !== false) {
// this.$emit('updated', true, attr, data);
that.updated(true, attr, data, index);
} else {
// this.$emit('updated', false, { qty: res.data.stock_qty }, data);
that.updated(false, {
qty: res.data.stock_qty
}, data, index);
}
});
},
changeCount(e) {
var index = e.currentTarget.dataset.index,
change = e.currentTarget.dataset.change,
list = this.list,
val = (parseInt(list[index].qty) || 0) + (parseInt(change) ? 1 : -1),
store_count = list[index].store_count;
if (store_count == undefined) {
if (val > 0 && val <= 99) {
var data = {
qty: val,
total: val * Number(list[index].price)
};
this.change(list[index], data, index);
}
} else {
if (val > 0 && val <= store_count) {
var data = {
qty: val,
total: val * Number(list[index].price)
};
this.change(list[index], data, index);
} else {
wx.showToast({
title: '超过最大库存',
image: '../../../static/error.png'
});
}
}
},
groupListF() {
if (this.list) {
var data = [];
var groups = {};
this.list.forEach((v, i) => {
let channel = v.channel || 'normal';
if (groups[channel] !== undefined) {
data[groups[channel]].items.push(v);
data[groups[channel]].index.push(i);
} else {
groups[channel] = data.length;
data.push({
channel,
items: [v],
checked: [],
index: [i]
});
}
});
}
this.setData({
groupList: data
});
},
appendToCart(data) {
// var oauth = Cache.get(cache_keys.token);
var oauth = this.is_login;
if (!oauth) return;
if (!Array.isArray(data)) {
data = [data];
}
var json = {};
data.forEach((v, i) => json[i] = v);
data = json;
var that = this;
this.$http.post({
api: `api/shopping/cart`,
data: data,
header: {
Authorization: oauth
}
}).then(res => {
res = res.data;
if (res.status) {
that.addCart(true);
} else {
that.addCart(false, res.message);
}
}).catch(rej => {
that.addCart(false);
});
},
removeFromCart(e) {
var oauth = this.is_login;
var index = e.currentTarget.dataset.index;
var list = this.list;
var data = list[index];
if (list[index].local) {
// var locals = wx.getStorageSync('cart') || [];
var locals = this.$cookieStorage.get('cart') || [];
for (let i = 0; i < locals.length; i++) {
if (locals[i].index === list[index].index) {
locals.splice(i, 1);
break;
}
}
if (locals.length) {
this.$cookieStorage.set('cart', locals); // wx.setStorageSync('cart',locals)
} else {
this.$cookieStorage.clear('cart'); // wx.removeStorageSync('cart')
}
this.removed(true, index);
} else {
this.$http.ajax({
api: `api/shopping/cart/${data.__raw_id}`,
header: {
Authorization: oauth
},
method: 'DELETE'
}).then(res => {
res = res.data;
this.removed(true, index);
}).catch(rej => {
this.removed(false);
});
}
},
removed(success, index) {
if (success) {
var list = this.list;
var product = list.splice(index, 1)[0];
this.setData({
list: list
});
this.select_product();
this.groupListF();
} else {
wx.showToast({
title: '删除购物车商品失败！',
image: '../../../static/error.png'
});
}
},
changeCheck(e) {
var ids = e.detail.value;
var list = this.list;
list.forEach(item => {
item.checked = false;
});
ids.forEach(item => {
list[item].checked = true;
});
this.setData({
list: list
});
this.select_product();
this.groupListF();
},
selectAll(e) {
var allCheck = this.allCheck;
var list = this.list;
this.setData({
allCheck: !allCheck
});
list.forEach(item => {
item.checked = this.allCheck ? true : false;
});
this.setData({
list: list
});
this.select_product();
this.groupListF();
},
showCoupons() {
this.setData({
show_coupons: !this.show_coupons
});
},
showDiscounts() {
this.setData({
show_discounts: !this.show_discounts
});
},
getCoupon(e) {
var is_login = this.$cookieStorage.get('user_token');
var code = e.currentTarget.dataset.code;
var index = e.currentTarget.dataset.index;
if (is_login) {
this.goodsConvertCoupon(code, index);
} else {
var url = getUrl();
wx.showModal({
tiele: '',
content: '请先登录',
success: res => {
if (res.confirm) {
wx.navigateTo({
url: '/pages/user/register/register?url=' + url
});
}
}
});
}
},
// 领取优惠券
goodsConvertCoupon(code, index) {
var token = this.$cookieStorage.get('user_token');
this.$http.post({
api: 'api/coupon/convert',
header: {
Authorization: token
},
data: {
coupon_code: code
}
}).then(res => {
if (res.statusCode == 200) {
res = res.data;
if (res.status) {
this.coupons[index].receive = true;
wx.showToast({
title: '领取成功'
});
} else {
wx.showToast({
title: res.message,
image: '../../../static/error.png'
});
}
} else {
wx.showToast({
title: '领取失败',
image: '../../../static/error.png'
});
}
});
},
goLogin() {
var url = getUrl();
wx.navigateTo({
url: '/pages/user/register/register?url=' + url
});
},
changeCoupons() {
this.setData({
show_coupons: !this.show_coupons
});
},
changeDiscounts() {
this.setData({
show_discounts: !this.show_discounts
});
},
// 购物车领券
cardDiscount(ids) {
var wechat_group_id = this.$cookieStorage.get('openGId') || '';
wx.request({
url: config.GLOBAL.baseUrl + 'api/shoppingCart/discount',
method: 'POST',
data: {
ids: ids,
wechat_group_id: wechat_group_id
},
success: res => {
if (res.statusCode == 200) {
res = res.data;
if (res.status && res.data) {
res.data.coupons.forEach(v => v.receive = false);
// this.setData({
// coupons: res.data.coupons,
// discounts: res.data.discounts
// });
this.coupons=res.data.coupons;
this.discounts=res.data.discounts;
}
}
}
});
},
setData: function (obj) {
let that = this;
let keys = [];
let val, data;
Object.keys(obj).forEach(function (key) {
keys = key.split('.');
val = obj[key];
data = that.$data;
keys.forEach(function (key2, index) {
if (index + 1 == keys.length) {
that.$set(data, key2, val);
} else {
if (!data[key2]) {
that.$set(data, key2, {});
}
}
data = data[key2];
});
});
}
},
computed: {},
watch: {}
};
</script>
<style rel="stylesheet/less" lang="less">
@import "cart";
</style>
Write Preview
Loading…
Cancel
Save