mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2025-12-17 07:55:53 +08:00
commit message
This commit is contained in:
Chopper
355
pages/cart/coupon/couponCenter.vue
Normal file
355
pages/cart/coupon/couponCenter.vue
Normal file
@@ -0,0 +1,355 @@
|
||||
<template>
|
||||
<view class="coupon-center">
|
||||
<swiper :current="tabIndex" class="swiper-box" @change="ontabchange">
|
||||
|
||||
<swiper-item @touchmove.stop class="swiper-item" v-for="tab in categoryIndexData" :key="tab.category_id">
|
||||
<scroll-view class="scroll-v" enableBackToTop="true" scroll-y @scrolltolower="loadMore">
|
||||
<u-empty mode="coupon" text="没有优惠券了" v-if="nomsg"></u-empty>
|
||||
<view v-else class="coupon-item" v-for="(item, index) in list" :key="index">
|
||||
<view class="left">
|
||||
<view class="wave-line">
|
||||
<view class="wave" v-for="(item, index) in 12" :key="index"></view>
|
||||
</view>
|
||||
<view class="msg">
|
||||
<view>
|
||||
<span v-if="item.couponType == 'DISCOUNT'">{{ item.couponDiscount }}折</span>
|
||||
<span v-else>{{ item.price }}元</span>
|
||||
</view>
|
||||
<view>满{{ item.consumeThreshold | unitPrice }}元可用</view>
|
||||
</view>
|
||||
<view class="circle circle-top"></view>
|
||||
<view class="circle circle-bottom"></view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view>
|
||||
<view v-if="item.scopeType">
|
||||
<span v-if="item.scopeType == 'ALL' && item.id == 'platform'">全平台</span>
|
||||
<span v-if="item.scopeType == 'PORTION_CATEGORY'">仅限品类</span>
|
||||
<view v-else>{{ item.storeName == 'platform' ? '全平台' :item.storeName+'店铺' }}使用</view>
|
||||
|
||||
</view>
|
||||
<view>有效期至：{{ item.endTime.split(" ")[0] }}</view>
|
||||
</view>
|
||||
<view class="receive" @click="receive(item)">
|
||||
<text>点击</text><br />
|
||||
<text>领取</text>
|
||||
</view>
|
||||
<view class="bg-quan"> 券 </view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-load-more :status="loadStatus"></uni-load-more>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { receiveCoupons } from "@/api/members.js";
|
||||
import { getAllCoupons } from "@/api/promotions.js";
|
||||
import { getCategoryIndexData } from "@/api/home.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loadStatus: "more",
|
||||
nomsg: false,
|
||||
list: [],
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
status: 1,
|
||||
},
|
||||
storeId: "",
|
||||
categoryIndexData: [],
|
||||
currentLeft: 0,
|
||||
tabIndex: 0,
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
this.storeId = option.storeId;
|
||||
this.getCoupon();
|
||||
this.getTabbar();
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
//下拉刷新
|
||||
console.log("refresh");
|
||||
this.params.pageNumber = 1;
|
||||
this.list = [];
|
||||
this.getCoupon();
|
||||
},
|
||||
methods: {
|
||||
getCoupon() {
|
||||
//全部优惠券
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
});
|
||||
if (this.storeId) {
|
||||
getAllCoupons({ storeId: this.storeId ,...this.params })
|
||||
.then((res) => {
|
||||
uni.hideLoading();
|
||||
uni.stopPullDownRefresh();
|
||||
if (res.statusCode == 200) {
|
||||
let data = res.data.result;
|
||||
if (data.total == 0) {
|
||||
this.nomsg = true;
|
||||
} else {
|
||||
this.list.push(...data.records);
|
||||
this.loadStatus = "noMore";
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
uni.hideLoading();
|
||||
});
|
||||
} else {
|
||||
getAllCoupons(this.params)
|
||||
.then((res) => {
|
||||
uni.hideLoading();
|
||||
uni.stopPullDownRefresh();
|
||||
if (res.statusCode == 200) {
|
||||
console.log(res);
|
||||
let data = res.data.result;
|
||||
if (data.total == 0) {
|
||||
this.nomsg = true;
|
||||
console.log("这里");
|
||||
} else if (data.total < 10) {
|
||||
this.list.push(...data.records);
|
||||
this.loadStatus = "noMore";
|
||||
} else {
|
||||
this.list.push(...data.records);
|
||||
if (data.data.length < 10) this.loadStatus = "noMore";
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
uni.hideLoading();
|
||||
});
|
||||
}
|
||||
},
|
||||
receive(item) {
|
||||
//领取优惠券
|
||||
receiveCoupons(item.id).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
uni.showToast({
|
||||
title: "领取成功",
|
||||
icon: "none",
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
});
|
||||
// this.$set(this.list,0,this.list[0])
|
||||
// console.log(this.list)
|
||||
},
|
||||
getTabbar() {
|
||||
//获取顶级分类
|
||||
// uni.showLoading({
|
||||
// title: "加载中"
|
||||
// })
|
||||
let tabbar = {
|
||||
category_id: 0,
|
||||
name: "全部",
|
||||
parent_id: 0,
|
||||
category_path: "|0|",
|
||||
goods_count: 0,
|
||||
category_order: 0,
|
||||
list_show: 1,
|
||||
image:
|
||||
"https://wwwyinbeicn.oss-cn-beijing.aliyuncs.com/yinbeistore/normal/FF468285411041E1AE5C36DAD1161AE4.png",
|
||||
};
|
||||
getCategoryIndexData().then((res) => {
|
||||
console.log(res);
|
||||
this.categoryIndexData.push(tabbar, ...res.data.result);
|
||||
});
|
||||
},
|
||||
loadMore() {
|
||||
if (this.loadStatus != "noMore") {
|
||||
this.params.pageNumber++;
|
||||
this.getAllCoupons();
|
||||
}
|
||||
},
|
||||
setCat(type) {
|
||||
this.tabIndex = type;
|
||||
// this.searchStore();
|
||||
},
|
||||
ontabchange(e) {
|
||||
this.tabIndex = e.detail.current;
|
||||
if (e.detail.current > 3) {
|
||||
this.currentLeft = (e.detail.current - 3) * 90;
|
||||
} else {
|
||||
this.currentLeft = 0;
|
||||
}
|
||||
// this.searchStore();
|
||||
},
|
||||
},
|
||||
onNavigationBarButtonTap(e) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/cart/coupon/couponIntro",
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.coupon-center {
|
||||
height: 100%;
|
||||
|
||||
.list-scroll-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: $main-color;
|
||||
color: #ffffff;
|
||||
|
||||
.tab-item {
|
||||
width: 160rpx;
|
||||
height: 80rpx;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.active {
|
||||
border-bottom: 2px solid #ffffff;
|
||||
broder-width: 60rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
padding-bottom: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
height: 100%;
|
||||
|
||||
.scroll-v {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.coupon-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 220rpx;
|
||||
margin: 20rpx;
|
||||
|
||||
.left {
|
||||
height: 100%;
|
||||
width: 260rpx;
|
||||
background-color: $light-color;
|
||||
position: relative;
|
||||
.msg {
|
||||
color: $font-color-white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-top: 40rpx;
|
||||
|
||||
view:nth-child(1) {
|
||||
font-weight: bold;
|
||||
font-size: 60rpx;
|
||||
}
|
||||
|
||||
view:nth-child(2) {
|
||||
font-size: $font-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.wave-line {
|
||||
height: 220rpx;
|
||||
width: 8rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: $light-color;
|
||||
overflow: hidden;
|
||||
|
||||
.wave {
|
||||
width: 8rpx;
|
||||
height: 16rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 0 16rpx 16rpx 0;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
.circle {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-color: $bg-color;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
z-index: 111;
|
||||
}
|
||||
.circle-top {
|
||||
top: -20rpx;
|
||||
right: -20rpx;
|
||||
}
|
||||
.circle-bottom {
|
||||
bottom: -20rpx;
|
||||
right: -20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 450rpx;
|
||||
font-size: $font-sm;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
> view:nth-child(1) {
|
||||
color: #666666;
|
||||
margin-left: 20rpx;
|
||||
line-height: 3em;
|
||||
> view:nth-child(1) {
|
||||
color: #ff6262;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.receive {
|
||||
color: #ffffff;
|
||||
background-color: $main-color;
|
||||
border-radius: 50%;
|
||||
width: 86rpx;
|
||||
height: 86rpx;
|
||||
text-align: center;
|
||||
margin-right: 30rpx;
|
||||
vertical-align: middle;
|
||||
padding-top: 8rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.bg-quan {
|
||||
width: 244rpx;
|
||||
height: 244rpx;
|
||||
border: 6rpx solid $main-color;
|
||||
border-radius: 50%;
|
||||
opacity: 0.1;
|
||||
color: $main-color;
|
||||
text-align: center;
|
||||
padding-top: 30rpx;
|
||||
font-size: 130rpx;
|
||||
position: absolute;
|
||||
right: -54rpx;
|
||||
bottom: -60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
148
pages/cart/coupon/couponDetail.vue
Normal file
148
pages/cart/coupon/couponDetail.vue
Normal file
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="body">
|
||||
<view class="top-view">
|
||||
<view class="title">{{coupon.title}}</view>
|
||||
<view class="price"><text>￥</text>{{coupon.price | unitPrice}}</view>
|
||||
<view class="text">满{{coupon.consumeThreshold}}元可用</view>
|
||||
<view class="bg-quan">
|
||||
券
|
||||
</view>
|
||||
<view class="jiao-1" :class="{'used-color':coupon.used_status!=0}">
|
||||
<text class="text-1">{{coupon.used_status == 0?'新到':coupon.used_status_text}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom-view">
|
||||
<view class="text">• 使用平台：{{
|
||||
coupon.scopeType == 'ALL' && coupon.id == 'platform'
|
||||
? "全平台"
|
||||
: coupon.scopeType == "PORTION_CATEGORY"
|
||||
? "仅限品类"
|
||||
: coupon.storeName == 'platform' ? '全平台' :coupon.storeName+''
|
||||
}}使用</view>
|
||||
<view class="text">• 有效期至：{{coupon.endTime}}</view>
|
||||
|
||||
</view>
|
||||
<button class="btn" @click="gostorePage" v-if="coupon.used_status==0">立即使用</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
customStyle: {
|
||||
backgroundColor: this.lightColor,
|
||||
},
|
||||
coupon: {},
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
this.coupon = JSON.parse(decodeURIComponent(option.item));
|
||||
console.log(this.coupon);
|
||||
},
|
||||
methods: {
|
||||
gostorePage() {
|
||||
let id = this.coupon.storeId;
|
||||
if (id) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/shopPage?id=${id}`,
|
||||
});
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url: "/pages/tabbar/home/index",
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page,
|
||||
.content {
|
||||
// background: $main-color;
|
||||
height: 100%;
|
||||
}
|
||||
.body {
|
||||
.top-view {
|
||||
margin: 20rpx 20rpx 0;
|
||||
height: 290rpx;
|
||||
background: linear-gradient(
|
||||
316deg,
|
||||
$light-color 2%,
|
||||
$aider-light-color 98%
|
||||
);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: 20rpx;
|
||||
padding: 60rpx 0;
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
color: #ffee80;
|
||||
}
|
||||
.price {
|
||||
font-size: 60rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
text {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
.bg-quan {
|
||||
width: 244rpx;
|
||||
height: 244rpx;
|
||||
border: 6rpx solid #ffffff;
|
||||
border-radius: 50%;
|
||||
opacity: 0.3;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
padding-top: 30rpx;
|
||||
font-size: 130rpx;
|
||||
position: absolute;
|
||||
right: -54rpx;
|
||||
bottom: -54rpx;
|
||||
}
|
||||
|
||||
.jiao-1 {
|
||||
background-color: #ffc71c;
|
||||
width: 400rpx;
|
||||
transform: rotate(45deg);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
right: -130rpx;
|
||||
color: #ffffff;
|
||||
top: 0;
|
||||
.text-1 {
|
||||
margin-left: 68rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
.used-color {
|
||||
background-color: #ffc71c;
|
||||
}
|
||||
}
|
||||
.bottom-view {
|
||||
border-radius: 0 0 20rpx 20rpx;
|
||||
background-color: #ffffff;
|
||||
height: 580rpx;
|
||||
padding: 50rpx 50rpx;
|
||||
margin: 0 30rpx;
|
||||
line-height: 2em;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 140rpx 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
59
pages/cart/coupon/couponIntro.vue
Normal file
59
pages/cart/coupon/couponIntro.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<view class="coupin-intro">
|
||||
<view class="title">
|
||||
1.优惠券的获取
|
||||
</view>
|
||||
<view class="mb-60">
|
||||
通过活动赠送、客服补偿等获得(系统自动添加, 无需兑换);
|
||||
</view>
|
||||
<view class="title">
|
||||
2.优惠券使用
|
||||
</view>
|
||||
<view>1）每张抵用券仅能使用一次，不找零，不退换，不兑换现金</view>
|
||||
<view>2）单笔订单只能使用1张优惠券, 不支持同时使用多张, 用券后差额不找零, 不退回；</view>
|
||||
<view>3）优惠券 (包括新用户券) 不能抵扣运费, 只能抵扣商品金额。特价商品不可使用优惠券, 与其他优惠不同享；</view>
|
||||
<view>4）每张优惠券的使用条件请查看对应优惠券的使用说明；</view>
|
||||
<view>5）请在有效期内使用优惠券, 未使用的优惠券过期后, 将自动作废；</view>
|
||||
<view>6）每个用户仅限使用1张新用户专享优惠券, 同一帐号和手机号均视为同一用户；</view>
|
||||
<view>7）用券前订单满88元即可包邮（港澳台地区需满500元包邮）；</view>
|
||||
<view class="mb-60">8）使用抵用券抵扣部分的货款不开具发票</view>
|
||||
<view class="title">3.优惠券失效</view>
|
||||
<view>1）新用户券使用一张后其他新用户券失效, 取消订单后不返还；</view>
|
||||
<view>2）使用优惠券的订单, 若产生退货, 优惠券均不退回, 退款金额按优惠后的小计金额退款；</view>
|
||||
<view>3）参加满赠券活动获得的赠券,发生退货时,若订单中剩余商品不满足赠券条件,实物赠品需勾选退货并寄回,否则将从退款中扣减对应金额,客服审核通过退货申请后,所获赠券将会自动失效；</view>
|
||||
<view>4）优惠券严禁出售或转让, 如经发现并证实的, 该券将予以失效处理；</view>
|
||||
<view>5）如需了解更多, 请联系在线客服或拨打客服电话400-0000-000。</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.coupin-intro{
|
||||
background-color: #fff;
|
||||
color: #999999;
|
||||
font-size: $font-sm;
|
||||
padding: 30rpx;
|
||||
border-top: 1px solid $border-color-light;
|
||||
line-height: 2.5em;
|
||||
.title{
|
||||
font-size: $font-base;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
.mb-60{
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
378
pages/cart/coupon/index.vue
Normal file
378
pages/cart/coupon/index.vue
Normal file
@@ -0,0 +1,378 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="nomore" v-if="current === 0 && couponsList.length <= 0">
|
||||
暂无优惠券
|
||||
</div>
|
||||
<div class="nomore" v-if="current === 1 && disabledCouponsList.length <= 0">
|
||||
暂无优惠券
|
||||
</div>
|
||||
|
||||
<view class="coupon-item" v-for="(item, index) in couponsList" :key="index" v-if="item.memberCouponStatus == 'NEW'">
|
||||
<view class="left">
|
||||
<view class="wave-line">
|
||||
<view class="wave" v-for="(item, index) in 12" :key="index"></view>
|
||||
</view>
|
||||
<view class="msg">
|
||||
<view>
|
||||
<span v-if="item.couponType == 'DISCOUNT'">{{ item.discount }}折</span>
|
||||
<span v-else>{{ item.price }}元</span>
|
||||
</view>
|
||||
<view>满{{ item.consumeThreshold | unitPrice }}元可用</view>
|
||||
</view>
|
||||
<view class="circle circle-top"></view>
|
||||
<view class="circle circle-bottom"></view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view>
|
||||
<view v-if="item.scopeType">
|
||||
<span v-if="item.scopeType == 'ALL' && item.id == 'platform'">全平台</span>
|
||||
<span v-if="item.scopeType == 'PORTION_CATEGORY'">仅限品类</span>
|
||||
<view v-else>{{ item.storeName == 'platform' ? '全平台' :item.storeName+'店铺' }}使用</view>
|
||||
</view>
|
||||
<view>有效期至：{{item.endTime}}</view>
|
||||
</view>
|
||||
<view class="receive" @click="clickWay(item)">
|
||||
<text>立即</text><br />
|
||||
<text>使用</text>
|
||||
</view>
|
||||
<view class="bg-quan"> 券 </view>
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
useCoupon,
|
||||
getMemberCouponList,
|
||||
getMemberCanUse,
|
||||
} from "@/api/trade.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
list: [
|
||||
{
|
||||
name: "可用优惠券",
|
||||
},
|
||||
{
|
||||
name: "不可用优惠券",
|
||||
},
|
||||
],
|
||||
curNow: "",
|
||||
couponsList: [],
|
||||
disabledCouponsList: [],
|
||||
params: {
|
||||
memberCouponStatus: "NEW",
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
scopeId: "",
|
||||
storeId: "",
|
||||
totalPrice: "",
|
||||
// endTime: this.$u.timeFormat(new Date().getTime(),'yyyy-mm-dd hh:MM:ss')
|
||||
},
|
||||
way: [],
|
||||
routerVal: "",
|
||||
};
|
||||
},
|
||||
onReachBottom() {
|
||||
this.pageNumber++;
|
||||
this.getAllCouponsFun();
|
||||
},
|
||||
onLoad(val) {
|
||||
this.routerVal = val;
|
||||
this.params.scopeId = val.skuId;
|
||||
this.params.storeId = val.storeId;
|
||||
if (val.type) {
|
||||
this.params.endTime = new Date().getTime();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
uni.getStorage({
|
||||
key: "totalPrice",
|
||||
success: (res) => {
|
||||
this.params.totalPrice = res.data;
|
||||
this.getCoupons();
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
// 获取优惠券数量
|
||||
getCoupons() {
|
||||
getMemberCanUse(this.params).then((res) => {
|
||||
if (res.data.success) {
|
||||
|
||||
|
||||
this.couponsList = res.data.result.records;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 领取优惠券
|
||||
async clickWay(coupon) {
|
||||
useCoupon({
|
||||
memberCouponId: coupon.id,
|
||||
used: true,
|
||||
way: this.routerVal.way,
|
||||
}).then((res) => {
|
||||
if (res.data.success) {
|
||||
uni.navigateBack();
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
submitback() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
// 获取商品优惠券
|
||||
getAllCouponsFun() {},
|
||||
|
||||
sectionChange(index) {
|
||||
this.curNow = index;
|
||||
},
|
||||
|
||||
change(index) {
|
||||
this.current = index;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.nomore {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.selectBtn {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
background: #f9f9f9;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.coupon-jd {
|
||||
margin: 40rpx auto 0 auto;
|
||||
width: 700rpx;
|
||||
height: auto;
|
||||
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
.left {
|
||||
padding: 0 30rpx;
|
||||
width: 200rpx;
|
||||
background-color: $aider-light-color;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
.sum {
|
||||
margin-top: 50rpx;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
.num {
|
||||
font-size: 60rpx;
|
||||
}
|
||||
}
|
||||
.type {
|
||||
margin-bottom: 50rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
padding: 20rpx 20rpx 0;
|
||||
font-size: 28rpx;
|
||||
.top {
|
||||
border-bottom: 2rpx dashed $u-border-color;
|
||||
.title {
|
||||
margin-right: 60rpx;
|
||||
line-height: 40rpx;
|
||||
.tag {
|
||||
padding: 4rpx 20rpx;
|
||||
background-color: $aider-light-color;
|
||||
border-radius: 20rpx;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
display: flex;
|
||||
margin-top: 20rpx;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10rpx;
|
||||
.date {
|
||||
font-size: 20rpx;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tips {
|
||||
width: 100%;
|
||||
line-height: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 24rpx;
|
||||
.transpond {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.explain {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.particulars {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
box-sizing: border-box;
|
||||
padding-top: 8rpx;
|
||||
border-radius: 50%;
|
||||
background-color: $u-type-info-disabled;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.immediate-use {
|
||||
height: auto;
|
||||
padding: 0 20rpx;
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
width: 160rpx;
|
||||
margin: 20rpx 0;
|
||||
border-radius: 40rpx;
|
||||
line-height: 40rpx;
|
||||
color: $aider-light-color;
|
||||
border: 2rpx solid $aider-light-color;
|
||||
}
|
||||
|
||||
.coupon-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 220rpx;
|
||||
margin: 20rpx;
|
||||
|
||||
.left {
|
||||
height: 100%;
|
||||
width: 260rpx;
|
||||
background-color: $light-color;
|
||||
position: relative;
|
||||
.msg {
|
||||
color: $font-color-white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-top: 40rpx;
|
||||
|
||||
view:nth-child(1) {
|
||||
font-weight: bold;
|
||||
font-size: 60rpx;
|
||||
}
|
||||
|
||||
view:nth-child(2) {
|
||||
font-size: $font-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.wave-line {
|
||||
height: 220rpx;
|
||||
width: 8rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: $light-color;
|
||||
overflow: hidden;
|
||||
|
||||
.wave {
|
||||
width: 8rpx;
|
||||
height: 16rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 0 16rpx 16rpx 0;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
.circle {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-color: $bg-color;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
z-index: 111;
|
||||
}
|
||||
.circle-top {
|
||||
top: -20rpx;
|
||||
right: -20rpx;
|
||||
}
|
||||
.circle-bottom {
|
||||
bottom: -20rpx;
|
||||
right: -20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 450rpx;
|
||||
font-size: $font-sm;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
> view:nth-child(1) {
|
||||
color: #666666;
|
||||
margin-left: 20rpx;
|
||||
line-height: 3em;
|
||||
> view:nth-child(1) {
|
||||
color: #ff6262;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.receive {
|
||||
color: #ffffff;
|
||||
background-color: $main-color;
|
||||
border-radius: 50%;
|
||||
width: 86rpx;
|
||||
height: 86rpx;
|
||||
text-align: center;
|
||||
margin-right: 30rpx;
|
||||
vertical-align: middle;
|
||||
padding-top: 8rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.bg-quan {
|
||||
width: 244rpx;
|
||||
height: 244rpx;
|
||||
border: 6rpx solid $main-color;
|
||||
border-radius: 50%;
|
||||
opacity: 0.1;
|
||||
color: $main-color;
|
||||
text-align: center;
|
||||
padding-top: 30rpx;
|
||||
font-size: 130rpx;
|
||||
position: absolute;
|
||||
right: -54rpx;
|
||||
bottom: -60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
430
pages/cart/coupon/myCoupon.vue
Normal file
430
pages/cart/coupon/myCoupon.vue
Normal file
@@ -0,0 +1,430 @@
|
||||
<template>
|
||||
<view class="b-content">
|
||||
<view class="navbar">
|
||||
<view v-for="(item, index) in navList" :key="index" class="nav-item" @click="tabClick(index)"><text :class="{ current: tabCurrentIndex === index }">{{
|
||||
item.text
|
||||
}}</text></view>
|
||||
</view>
|
||||
<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
|
||||
<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
|
||||
<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
|
||||
<!-- 空白页 -->
|
||||
<empty v-if="tabItem.nomsg"></empty>
|
||||
<!-- 数据 -->
|
||||
<view v-if="tabItem.dataList && coupon" class="coupon-item" :class="{ 'coupon-used': tabIndex != 0 }" v-for="(coupon, index) in tabItem.dataList" :key="index">
|
||||
<view class="left">
|
||||
<view class="wave-line">
|
||||
<view class="wave" v-for="(item, index) in 12" :key="index"></view>
|
||||
</view>
|
||||
<view class="msg">
|
||||
<view class="price" v-if="coupon.couponType == 'DISCOUNT'">{{ coupon.discount }}折</view>
|
||||
<view class="price" v-else>{{ coupon.price }}元</view>
|
||||
<!-- <view class="price" v-if="coupon.couponType == 'PRICE'">￥{{ coupon.price | unitPrice }}</view> -->
|
||||
<!-- <view class="price" v-if="coupon.couponType == 'DISCOUNT'">￥{{ coupon.couponDiscount }}</view> -->
|
||||
<view class="sub-price">满{{ coupon.consumeThreshold | unitPrice }}可用</view>
|
||||
</view>
|
||||
<view class="circle circle-top"></view>
|
||||
<view class="circle circle-bottom"></view>
|
||||
</view>
|
||||
<view class="right" v-if="coupon">
|
||||
<view class="content">
|
||||
<view class="title-1">{{ coupon.title }}</view>
|
||||
<view class="title-2">使用平台：{{
|
||||
coupon.scopeType == 'ALL' && coupon.id == 'platform'
|
||||
? "全平台"
|
||||
: coupon.scopeType == "PORTION_CATEGORY"
|
||||
? "仅限品类"
|
||||
: coupon.storeName == 'platform' ? '全平台' :coupon.storeName+''
|
||||
}}使用</view>
|
||||
<view v-if="coupon.endTime">{{
|
||||
coupon.endTime
|
||||
}}</view>
|
||||
<view @click="couponDetail(coupon)">详细说明
|
||||
<u-icon style="float: right; margin-top: 10rpx" name="arrow-right"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="jiao-1" v-if="tabIndex == 0">
|
||||
<text class="text-1">新到</text>
|
||||
<text class="text-2" v-if="coupon.used_status == 1">将过期</text>
|
||||
</view>
|
||||
<image class="no-icon" v-if="tabIndex == 1" src="@/static/img/used.png"></image>
|
||||
<image class="no-icon" v-if="tabIndex == 2" src="@/pages/floor/imgs/overdue.png"></image>
|
||||
<view class="receive" v-if="tabIndex == 0" @click="nowUse(coupon)">
|
||||
<text>立即</text><br />
|
||||
<text>使用</text>
|
||||
</view>
|
||||
<view class="bg-quan"> 券 </view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-load-more :status="tabItem.loadStatus"></uni-load-more>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getMemberCoupons } from "@/api/members.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabCurrentIndex: 0,
|
||||
navList: [
|
||||
{
|
||||
text: "未使用",
|
||||
loadStatus: "more",
|
||||
dataList: [],
|
||||
params: {
|
||||
memberCouponStatus: "NEW",
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
status: 1,
|
||||
},
|
||||
nomsg: false,
|
||||
},
|
||||
{
|
||||
text: "已使用",
|
||||
loadStatus: "more",
|
||||
dataList: [],
|
||||
params: {
|
||||
memberCouponStatus: "USED",
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
status: 2,
|
||||
},
|
||||
nomsg: false,
|
||||
},
|
||||
{
|
||||
text: "已过期",
|
||||
loadStatus: "more",
|
||||
dataList: [],
|
||||
params: {
|
||||
memberCouponStatus: "EXPIRE",
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
status: 3,
|
||||
},
|
||||
nomsg: false,
|
||||
},
|
||||
],
|
||||
couponList: [],
|
||||
};
|
||||
},
|
||||
onNavigationBarButtonTap() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/cart/coupon/couponIntro",
|
||||
});
|
||||
},
|
||||
onLoad() {
|
||||
// this.tabCurrentIndex = 0;
|
||||
this.getData();
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
let index = this.tabCurrentIndex;
|
||||
this.navList[index].params.pageNumber = 1;
|
||||
this.navList[index].dataList = [];
|
||||
this.getData();
|
||||
},
|
||||
watch: {
|
||||
tabCurrentIndex(val) {
|
||||
if (this.navList[val].dataList.length == 0) this.getData();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
//顶部tab点击
|
||||
tabClick(index) {
|
||||
this.tabCurrentIndex = index;
|
||||
// this.loadData();
|
||||
},
|
||||
getData() {
|
||||
//读取优惠券
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
});
|
||||
let index = this.tabCurrentIndex;
|
||||
getMemberCoupons(this.navList[index].params).then((res) => {
|
||||
uni.stopPullDownRefresh();
|
||||
if (res.statusCode == 200) {
|
||||
let data = res.data.result.records;
|
||||
if (data.length == 0) {
|
||||
if (res.data.pageNumber == 1) {
|
||||
this.navList[index].nomsg = true;
|
||||
} else {
|
||||
this.navList[index].loadStatus = "noMore";
|
||||
}
|
||||
} else if (data.length < 10) {
|
||||
this.navList[index].loadStatus = "noMore";
|
||||
this.navList[index].dataList.push(...data);
|
||||
} else {
|
||||
this.navList[index].dataList.push(...data);
|
||||
}
|
||||
}
|
||||
uni.hideLoading();
|
||||
});
|
||||
},
|
||||
changeTab(e) {
|
||||
this.tabCurrentIndex = e.target.current;
|
||||
},
|
||||
loadData() {
|
||||
let index = this.tabCurrentIndex;
|
||||
if (this.navList[index].loadStatus != "noMore") {
|
||||
this.navList[index].params.pageNumber++;
|
||||
this.getData();
|
||||
}
|
||||
},
|
||||
nowUse(item) {
|
||||
console.log(item)
|
||||
return
|
||||
//立即使用
|
||||
if (item.storeId) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/shopPage?id=${item.storeId}`,
|
||||
});
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url: "/pages/tabbar/home/index",
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
couponDetail(item) {
|
||||
uni.navigateTo({
|
||||
url:
|
||||
"/pages/cart/coupon/couponDetail?item=" +
|
||||
encodeURIComponent(JSON.stringify(item)),
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
$item-color: #fff;
|
||||
|
||||
.b-content {
|
||||
background: $page-color-base;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.list-scroll-content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.coupon-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 220rpx;
|
||||
margin: 20rpx;
|
||||
|
||||
.left {
|
||||
height: 100%;
|
||||
width: 260rpx;
|
||||
background-color: $light-color;
|
||||
position: relative;
|
||||
|
||||
.msg {
|
||||
color: $font-color-white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-top: 40rpx;
|
||||
|
||||
view:nth-child(1) {
|
||||
font-weight: bold;
|
||||
font-size: 60rpx;
|
||||
}
|
||||
|
||||
view:nth-child(2) {
|
||||
font-size: $font-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.wave-line {
|
||||
height: 220rpx;
|
||||
width: 8rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: $light-color;
|
||||
overflow: hidden;
|
||||
|
||||
.wave {
|
||||
width: 8rpx;
|
||||
height: 16rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 0 16rpx 16rpx 0;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-color: $bg-color;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
z-index: 111;
|
||||
}
|
||||
|
||||
.circle-top {
|
||||
top: -20rpx;
|
||||
right: -20rpx;
|
||||
}
|
||||
|
||||
.circle-bottom {
|
||||
bottom: -20rpx;
|
||||
right: -20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 450rpx;
|
||||
font-size: $font-sm;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.content {
|
||||
color: #666666;
|
||||
margin-left: 20rpx;
|
||||
line-height: 2em;
|
||||
> view:nth-child(1) {
|
||||
color: #ff6262;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.title-1,
|
||||
.title-2,
|
||||
.title-3 {
|
||||
font-size: 25rpx;
|
||||
}
|
||||
}
|
||||
.receive {
|
||||
color: #ffffff;
|
||||
background-color: $main-color;
|
||||
border-radius: 50%;
|
||||
width: 86rpx;
|
||||
height: 86rpx;
|
||||
text-align: center;
|
||||
margin-right: 48rpx;
|
||||
vertical-align: middle;
|
||||
padding-top: 8rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.jiao-1 {
|
||||
background-color: #ffc71c;
|
||||
width: 400rpx;
|
||||
transform: rotate(45deg);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
color: #ffffff;
|
||||
right: -130rpx;
|
||||
top: 0;
|
||||
.text-1 {
|
||||
margin-left: 68rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.text-2 {
|
||||
margin-left: 68rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
.no-icon {
|
||||
border-radius: 50%;
|
||||
width: 86rpx;
|
||||
height: 86rpx;
|
||||
margin-right: 48rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.bg-quan {
|
||||
width: 244rpx;
|
||||
height: 244rpx;
|
||||
border: 6rpx solid $main-color;
|
||||
border-radius: 50%;
|
||||
opacity: 0.1;
|
||||
color: $main-color;
|
||||
text-align: center;
|
||||
padding-top: 30rpx;
|
||||
font-size: 130rpx;
|
||||
position: absolute;
|
||||
right: -54rpx;
|
||||
bottom: -60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.coupon-used {
|
||||
.left {
|
||||
background-color: #dddddd;
|
||||
.wave-line {
|
||||
background-color: #dddddd;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
color: #cccccc;
|
||||
.content {
|
||||
color: #cccccc;
|
||||
> view:nth-child(1) {
|
||||
color: #cccccc;
|
||||
}
|
||||
}
|
||||
.bg-quan {
|
||||
border: 6rpx solid #cccccc;
|
||||
color: #cccccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
height: 80rpx;
|
||||
padding: 0 5px;
|
||||
background: #fff;
|
||||
color: $light-color;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
.nav-item {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-size: 26rpx;
|
||||
color: $light-color;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text {
|
||||
line-height: 80rpx;
|
||||
}
|
||||
.current {
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
left: 108rpx;
|
||||
width: 30rpx;
|
||||
border-bottom: 2px solid $light-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
0
pages/cart/payment/error.vue
Normal file
0
pages/cart/payment/error.vue
Normal file
466
pages/cart/payment/payOrder.vue
Normal file
466
pages/cart/payment/payOrder.vue
Normal file
@@ -0,0 +1,466 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="box">
|
||||
<div class="block block-1">
|
||||
<image class="img" src="@/pages/cart/static/pay.png" />
|
||||
<p class="ptips">收银台</p>
|
||||
|
||||
<p class="ptips">剩余支付时间：
|
||||
<u-count-down :show-days="false" :show-border="true" font-size="28" color="#008ffa"
|
||||
border-color="#008ffa" ref="uCountDown" :timestamp="autoCancel"></u-count-down>
|
||||
</p>
|
||||
<p class="ptips">
|
||||
支付金额
|
||||
<span>¥{{ cashierParams.price | unitPrice }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="__pay_form__">
|
||||
</div>
|
||||
<div class="block-4" v-if="cashierParams.price > 0">
|
||||
<div class="payItem">支付方式</div>
|
||||
<div class="payItem" v-for="(item, index) in payList" :key="index">
|
||||
<u-row class="row">
|
||||
<div class="col1" @click="awaitPay(item, index)" size="100" style="text-align:left;">
|
||||
<div v-if="item == 'ALIPAY'">
|
||||
<u-icon class="method_icon" name="zhifubao-circle-fill" color="#008ffa" size="80"></u-icon>
|
||||
<span class="method_name">支付宝</span>
|
||||
</div>
|
||||
<div v-if="item == 'WECHAT'">
|
||||
<u-icon class="method_icon" name="weixin-circle-fill" color="#00c98b" size="80"></u-icon>
|
||||
<span class="method_name">微信</span>
|
||||
</div>
|
||||
<div v-if="item == 'WALLET'">
|
||||
<u-icon class="method_icon" name="red-packet-fill" color="#dd6161" size="80"></u-icon>
|
||||
<span class="method_name">余额支付(当前余额：¥{{ walletValue | unitPrice }})</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col3" @click="awaitPay(item)" textAlign="right">
|
||||
<u-icon size="26" color="#b1b1b1" name="arrow-right"></u-icon>
|
||||
</div>
|
||||
</u-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as API_Trade from "@/api/trade";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
//路径传参
|
||||
routerVal: "",
|
||||
//收银台参数
|
||||
cashierParams: "",
|
||||
//支付方式集合
|
||||
payList: "",
|
||||
//支付sn
|
||||
sn: "",
|
||||
//订单类型
|
||||
orderType: "",
|
||||
//支付异常
|
||||
exception: {},
|
||||
//支付表单
|
||||
payForm: {},
|
||||
//支付类型 APP/WECHAT_MP/H5/NATIVE app/微信小程序/h5/二维码
|
||||
paymentType: "",
|
||||
// 支付客户端 APP/NATIVE/JSAPI/H5
|
||||
paymentClient: "",
|
||||
//余额
|
||||
walletValue: 0.0,
|
||||
// 支付倒计时
|
||||
autoCancel: 0,
|
||||
};
|
||||
},
|
||||
onLoad(val) {
|
||||
this.routerVal = val;
|
||||
|
||||
//初始化参数
|
||||
// #ifdef APP-PLUS
|
||||
this.paymentType = "APP";
|
||||
this.paymentClient = "APP";
|
||||
//#endif
|
||||
// #ifdef MP-WEIXIN
|
||||
this.paymentType = "WECHAT_MP";
|
||||
this.paymentClient = "MP";
|
||||
//#endif
|
||||
// #ifdef H5
|
||||
this.paymentType = "H5";
|
||||
//如果是微信浏览器，则使用公众号支付，否则使用h5，
|
||||
// 区别是：h5是通过浏览器外部调用微信app进行支付，而JSAPI则是 在微信浏览器内部，或者小程序 调用微信支付
|
||||
this.paymentClient = this.isWeiXin() ? "JSAPI" : "H5";
|
||||
//#endif
|
||||
},
|
||||
onBackPress(e) {
|
||||
if (e.from == "backbutton") {
|
||||
uni.redirectTo({
|
||||
url: "/pages/order/myOrder?status=0",
|
||||
});
|
||||
return true; //阻止默认返回行为
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.cashierData();
|
||||
},
|
||||
methods: {
|
||||
navigateTo(url) {
|
||||
uni.navigateTo({
|
||||
url,
|
||||
});
|
||||
},
|
||||
// 获取收银详情
|
||||
cashierData() {
|
||||
let parms = {};
|
||||
|
||||
if (this.routerVal.recharge_sn) {
|
||||
this.sn = this.routerVal.recharge_sn;
|
||||
this.orderType = "RECHARGE";
|
||||
} else if (this.routerVal.trade_sn) {
|
||||
this.sn = this.routerVal.trade_sn;
|
||||
this.orderType = "TRADE";
|
||||
} else {
|
||||
this.sn = this.routerVal.order_sn;
|
||||
this.orderType = "ORDER";
|
||||
}
|
||||
parms.sn = this.sn;
|
||||
parms.orderType = this.orderType;
|
||||
parms.clientType = this.paymentType;
|
||||
|
||||
API_Trade.getCashierData(parms).then((res) => {
|
||||
this.cashierParams = res.data.result;
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
this.payList = res.data.result.support.filter((item) => {
|
||||
return item != "ALIPAY";
|
||||
});
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
this.payList = res.data.result.support;
|
||||
// #endif
|
||||
this.walletValue = res.data.result.walletValue;
|
||||
this.autoCancel =
|
||||
(res.data.result.autoCancel - new Date().getTime()) / 1000;
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
awaitPay(payment){
|
||||
|
||||
this.$u.debounce(this.pay(payment), 3000)
|
||||
|
||||
},
|
||||
|
||||
//订单支付
|
||||
async pay(payment) {
|
||||
// 支付编号
|
||||
const sn = this.sn;
|
||||
// 交易类型【交易号|订单号】
|
||||
const orderType = this.orderType;
|
||||
|
||||
const clientType = this.paymentType;
|
||||
let params = {
|
||||
sn,
|
||||
orderType,
|
||||
clientType,
|
||||
};
|
||||
|
||||
//支付方式 WECHAT/ALIPAY
|
||||
const paymentMethod = payment;
|
||||
// 客户端类型 APP/NATIVE/JSAPI/H5
|
||||
const paymentClient = this.paymentClient;
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
//APP pay
|
||||
// 初始化支付签名
|
||||
await API_Trade.initiatePay(paymentMethod, paymentClient, params).then(
|
||||
(signXml) => {
|
||||
|
||||
//如果支付异常
|
||||
if (!signXml.data.success) {
|
||||
uni.showModal({
|
||||
content: signXml.data.message,
|
||||
showCancel: false,
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
let payForm = signXml.data.result;
|
||||
|
||||
console.log(payForm)
|
||||
let paymentType = paymentMethod === "WECHAT" ? "wxpay" : "alipay";
|
||||
uni.requestPayment({
|
||||
provider: paymentType,
|
||||
orderInfo: payForm,
|
||||
success: (e) => {
|
||||
console.log(e);
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "支付成功!",
|
||||
});
|
||||
uni.navigateTo({
|
||||
url: "/pages/payment/success?paymentType=" +
|
||||
paymentType +
|
||||
"&payPrice=" +
|
||||
this.cashierParams.price,
|
||||
});
|
||||
},
|
||||
fail: (e) => {
|
||||
console.log(e);
|
||||
this.exception = e;
|
||||
uni.showModal({
|
||||
content: "支付失败,如果您已支付，请勿反复支付",
|
||||
showCancel: false,
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
);
|
||||
//APP pay
|
||||
// #endif
|
||||
|
||||
//#ifdef H5
|
||||
//H5 pay
|
||||
await API_Trade.initiatePay(paymentMethod, paymentClient, params).then(
|
||||
(res) => {
|
||||
let response = res.data;
|
||||
//如果支付异常
|
||||
if (!response.success) {
|
||||
|
||||
uni.showModal({
|
||||
content: response.message,
|
||||
showCancel: false,
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
if (paymentMethod === "ALIPAY") {
|
||||
document.write(response);
|
||||
} else if (paymentMethod === "WECHAT") {
|
||||
if (this.isWeiXin()) {
|
||||
//微信公众号支付
|
||||
WeixinJSBridge.invoke(
|
||||
"getBrandWCPayRequest",
|
||||
response.result,
|
||||
function(res) {
|
||||
if (res.err_msg == "get_brand_wcpay_request:ok") {
|
||||
// 使用以上方式判断前端返回,微信团队郑重提示：
|
||||
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "支付成功!",
|
||||
});
|
||||
uni.navigateTo({
|
||||
url: "/pages/cart/payment/success?paymentMethod=" +
|
||||
paymentMethod +
|
||||
"&payPrice=" +
|
||||
this.cashierParams.price,
|
||||
});
|
||||
} else {
|
||||
uni.showModal({
|
||||
content: "支付失败,如果您已支付，请勿反复支付",
|
||||
showCancel: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
} else {
|
||||
window.location.href = JSON.parse(response.result).h5_url;
|
||||
}
|
||||
} else if (paymentMethod === "WALLET") {
|
||||
uni.showToast({
|
||||
title: response.message,
|
||||
icon: "none",
|
||||
});
|
||||
if (response.success) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/cart/payment/success?paymentMethod=" +
|
||||
paymentMethod +
|
||||
"&payPrice=" +
|
||||
this.cashierParams.price,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
//H5pay
|
||||
// #endif
|
||||
|
||||
//#ifdef MP-WEIXIN
|
||||
//微信小程序
|
||||
await API_Trade.initiatePay(paymentMethod, paymentClient, params).then(
|
||||
(res) => {
|
||||
let response = res.data.result;
|
||||
//如果支付异常
|
||||
if (!res.data.success) {
|
||||
uni.showModal({
|
||||
content: res.data.message,
|
||||
showCancel: false,
|
||||
})
|
||||
return;
|
||||
}
|
||||
if (paymentMethod === "WECHAT") {
|
||||
uni.requestPayment({
|
||||
provider: "wxpay",
|
||||
appid: response.appid,
|
||||
timeStamp: response.timeStamp,
|
||||
nonceStr: response.nonceStr,
|
||||
package: response.package,
|
||||
signType: response.signType,
|
||||
paySign: response.paySign,
|
||||
success: (e) => {
|
||||
console.log(e);
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "支付成功!",
|
||||
});
|
||||
uni.navigateTo({
|
||||
url: "/pages/cart/payment/success?paymentMethod=" +
|
||||
paymentType +
|
||||
"&payPrice=" +
|
||||
this.cashierParams.price,
|
||||
});
|
||||
},
|
||||
fail: (e) => {
|
||||
console.log(e);
|
||||
this.exception = e;
|
||||
uni.showModal({
|
||||
content: "支付失败,如果您已支付，请勿反复支付",
|
||||
showCancel: false,
|
||||
});
|
||||
},
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "支付成功!",
|
||||
});
|
||||
uni.navigateTo({
|
||||
url: "/pages/cart/payment/success?paymentMethod=" +
|
||||
paymentMethod +
|
||||
"&payPrice=" +
|
||||
this.cashierParams.price,
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
// #endif
|
||||
},
|
||||
isWeiXin() {
|
||||
var ua = window.navigator.userAgent.toLowerCase();
|
||||
if (ua.match(/MicroMessenger/i) == "micromessenger") {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.method_icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.method_name {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
padding-left: 24rpx;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ .u-row {
|
||||
width: 100% !important;
|
||||
display: flex;
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
.method_name,
|
||||
.col1 {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.col1 {
|
||||
text-align: center;
|
||||
flex: 99;
|
||||
}
|
||||
|
||||
.col3 {
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.payItem {
|
||||
padding: 13px 25rpx;
|
||||
border-top: 1px solid #f9f9f9;
|
||||
|
||||
line-height: 100rpx;
|
||||
font-size: 36rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.ptips {
|
||||
font-size: 32rpx;
|
||||
margin: 20rpx 0;
|
||||
color: #333;
|
||||
|
||||
>span {
|
||||
font-size: 40rpx;
|
||||
color: #df5a52;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 392rpx !important;
|
||||
height: 296rpx !important;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
min-height: 100vh;
|
||||
height: auto;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.block-4 {
|
||||
background: #fff;
|
||||
color: $u-tips-color;
|
||||
|
||||
>p {
|
||||
padding: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
background: #fff;
|
||||
padding: 40rpx 0;
|
||||
// justify-content: center; //这个是X轴居中
|
||||
// align-items: center; //这个是 Y轴居中
|
||||
}
|
||||
|
||||
.block {
|
||||
text-align: center;
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.block-1 {
|
||||
margin-top: 80rpx;
|
||||
}
|
||||
|
||||
.btns {
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
</style>
|
||||
411
pages/cart/payment/popup/goods.vue
Normal file
411
pages/cart/payment/popup/goods.vue
Normal file
@@ -0,0 +1,411 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<u-popup class="popup" v-model="buyMask" :height="setup.height" closeable :mode="setup.mode" :mask-close-able="isClose" :mask="isMask" :border-radius="setup.radius" @close="closeMask()">
|
||||
<!-- 商品 -->
|
||||
<view class="goods-box bottom">
|
||||
<view class="goods-header">
|
||||
<view class="goods-img">
|
||||
<u-image width="200rpx" border-radius="20" class="uimage" height="200rpx" :src="selectedSpecImg ? selectedSpecImg : goodsDetail.thumbnail"></u-image>
|
||||
</view>
|
||||
<view class="goods-skus">
|
||||
|
||||
<!-- 有活动商品价格 -->
|
||||
<view class="goods-price " v-if="goodsDetail.promotionPrice">
|
||||
<span>
|
||||
￥
|
||||
<span class="goods-price-promotionShow goods-price-bigshow" v-if="goodsDetail.promotionPrice">{{ Fixed(goodsDetail.promotionPrice)[0] }}</span>
|
||||
.{{ Fixed(goodsDetail.promotionPrice)[1] }}
|
||||
<span></span>
|
||||
</span>
|
||||
<div class="promotion-box">
|
||||
￥
|
||||
<span class="goods-price-bigshow">{{
|
||||
Fixed(goodsDetail.price)[0]
|
||||
}}</span>
|
||||
.{{ Fixed(goodsDetail.price)[1] }}
|
||||
<span></span>
|
||||
</div>
|
||||
</view>
|
||||
<!-- 正常商品的价格 -->
|
||||
<view class="goods-price" v-else>
|
||||
￥
|
||||
<span class="goods-price-bigshow">{{
|
||||
Fixed(goodsDetail.price)[0]
|
||||
}}</span>
|
||||
.{{ Fixed(goodsDetail.price)[1] }}
|
||||
<span></span>
|
||||
</view>
|
||||
<view class="goods-check-skus">
|
||||
已选
|
||||
<span class="goods-check-skus-name">
|
||||
{{ selectName }}
|
||||
<span>，{{ num }}个</span>
|
||||
</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商品信息 -->
|
||||
<view class="goods-skus-box">
|
||||
<!-- 规格 -->
|
||||
<view class="goods-skus-view" :key="specIndex" v-for="(spec, specIndex) in formatList">
|
||||
<view class="skus-view-list">
|
||||
<view class="view-class-title">{{ spec.name }}</view>
|
||||
<view :class="{ active: spec_val.id == currentSelceted[specIndex] }" class="skus-view-item" v-for="(spec_val, spec_index) in spec.values" :key="spec_index"
|
||||
@click="handleClickSpec(spec, specIndex, spec_val)">{{ spec_val.value }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 数量 -->
|
||||
<view class="goods-skus-number">
|
||||
<view class="view-class-title">数量</view>
|
||||
<u-number-box :bg-color="numberBox.bgColor" :color="numberBox.color" :input-width="numberBox.width" :input-height="numberBox.height" :size="numberBox.size" :min="1" v-model="num">
|
||||
</u-number-box>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 按钮 -->
|
||||
<view class="btns">
|
||||
<view class="box-btn card" v-if="buyType !='PINTUAN'" @click="addToCartOrBuy('cart')">加入购物车</view>
|
||||
<view class="box-btn buy" @click="addToCartOrBuy('buy')">立即购买</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as API_trade from "@/api/trade.js";
|
||||
import setup from "./popup";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
setup,
|
||||
num: 1,
|
||||
// 步进器的大小尺寸单位是 rpx
|
||||
numberBox: {
|
||||
width: "50",
|
||||
height: "50",
|
||||
size: "22",
|
||||
color: "#333",
|
||||
bgColor: "#fff",
|
||||
},
|
||||
selectName: "", //选中商品的昵称
|
||||
selectSkuList: "", //选中商铺sku,
|
||||
selectedSpecImg: "", //选中的图片路径
|
||||
buyType: "", //用于存储促销，拼团等活动类型
|
||||
parentOrder: "", //父级拼团活动的数据 - 如果是团员则有数据
|
||||
formatList: [],
|
||||
currentSelceted: [],
|
||||
skuList: "",
|
||||
isMask:false, //是否显示遮罩层
|
||||
isClose:false, //是否可以点击遮罩关闭
|
||||
};
|
||||
},
|
||||
props: [
|
||||
|
||||
"goodsDetail",
|
||||
"buyMask",
|
||||
"selectedSku",
|
||||
"goodsSpec",
|
||||
"addr",
|
||||
],
|
||||
watch: {
|
||||
buyType: {
|
||||
handler(val) {
|
||||
this.buyType = val;
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
selectSkuList: {
|
||||
handler(val, oldval) {
|
||||
this.$emit("changed", val);
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 格式化金钱 1999 --> [1999,00]
|
||||
Fixed(val) {
|
||||
if (typeof val == "undefined") {
|
||||
return val;
|
||||
}
|
||||
return val.toFixed(2).split(".");
|
||||
},
|
||||
|
||||
closeMask() {
|
||||
this.$emit("closeBuy", false);
|
||||
},
|
||||
|
||||
/**点击规格 */
|
||||
handleClickSpec(val, index, specValue) {
|
||||
this.$set(this.currentSelceted, index, specValue.id);
|
||||
|
||||
let selectedSkuId = this.goodsSpec.find((i) => {
|
||||
let matched = true;
|
||||
let specValues = i.specValues.filter((j) => j.specName !== "images");
|
||||
|
||||
for (let n = 0; n < specValues.length; n++) {
|
||||
if (specValues[n].specValueId !== this.currentSelceted[n]) {
|
||||
matched = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (matched) {
|
||||
return i;
|
||||
}
|
||||
});
|
||||
|
||||
this.selectSkuList = {
|
||||
spec: {
|
||||
specName: val.name,
|
||||
specValue: specValue.value,
|
||||
},
|
||||
data: this.goodsDetail,
|
||||
};
|
||||
this.selectName = specValue.value;
|
||||
|
||||
this.$emit("handleClickSku", selectedSkuId.skuId,this.goodsDetail.id);
|
||||
},
|
||||
|
||||
/**
|
||||
* 添加到购物车或购买
|
||||
*/
|
||||
addToCartOrBuy(val) {
|
||||
if (!this.selectSkuList) {
|
||||
uni.showToast({
|
||||
title: "请选择规格商品",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
let data = {
|
||||
skuId: this.goodsDetail.id,
|
||||
num: this.num,
|
||||
};
|
||||
|
||||
if (val == "cart") {
|
||||
API_trade.addToCart(data).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
uni.showToast({
|
||||
title: "商品已添加到购物车",
|
||||
icon: "none",
|
||||
});
|
||||
|
||||
this.$emit("queryCart");
|
||||
this.closeMask();
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 判断是否拼团商品
|
||||
if (this.buyType) {
|
||||
data.cartType = "PINTUAN";
|
||||
} else {
|
||||
data.cartType = "BUY_NOW";
|
||||
}
|
||||
|
||||
|
||||
|
||||
API_trade.addToCart(data).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/order/fillorder?way=${data.cartType}&addr=${
|
||||
this.addr.id || ''
|
||||
}&parentOrder=${encodeURIComponent(
|
||||
JSON.stringify(this.parentOrder)
|
||||
)}`,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
formatSku(list) {
|
||||
// 格式化数据
|
||||
|
||||
let arr = [{}];
|
||||
list.forEach((item, index) => {
|
||||
item.specValues.forEach((spec, specIndex) => {
|
||||
let id = spec.specNameId;
|
||||
let name = spec.specName;
|
||||
let values = {
|
||||
id: spec.specValueId,
|
||||
value: spec.specValue,
|
||||
quantity: item.quantity,
|
||||
};
|
||||
if (name === "images") {
|
||||
return;
|
||||
}
|
||||
|
||||
arr.forEach((arrItem, arrIndex) => {
|
||||
if (
|
||||
arrItem.name == name &&
|
||||
arrItem.values &&
|
||||
!arrItem.values.find((i) => i.id === values.id)
|
||||
) {
|
||||
arrItem.values.push(values);
|
||||
}
|
||||
|
||||
let keys = arr.map((key) => {
|
||||
return key.name;
|
||||
});
|
||||
if (!keys.includes(name)) {
|
||||
arr.push({
|
||||
id: id,
|
||||
name: name,
|
||||
values: [values],
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
arr.shift();
|
||||
this.formatList = arr;
|
||||
|
||||
list.forEach((item) => {
|
||||
if (item.skuId === this.goodsDetail.id) {
|
||||
item.specValues
|
||||
.filter((i) => i.specName !== "images")
|
||||
.forEach((value, _index) => {
|
||||
this.currentSelceted[_index] = value.specValueId;
|
||||
|
||||
this.selectName = value.specValue;
|
||||
|
||||
this.selectSkuList = {
|
||||
spec: value,
|
||||
data: this.goodsDetail,
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
this.skuList = list;
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.formatSku(this.goodsSpec);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./popup.scss";
|
||||
|
||||
.buy {
|
||||
background-image: linear-gradient(135deg, #ffba0d, #ffc30d 69%, #ffcf0d);
|
||||
box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-image: linear-gradient(135deg, #f2140c, #f2270c 70%, #f24d0c);
|
||||
box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
|
||||
}
|
||||
|
||||
/deep/.u-icon-plus,
|
||||
.u-icon-minus,
|
||||
.u-icon-disabled {
|
||||
height: 30rpx !important;
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
.goods-skus-number {
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/deep/ .uni-scroll-view {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: $jd-light-color !important;
|
||||
border: 2rpx solid $jd-color;
|
||||
font-weight: bold;
|
||||
color: $jd-color !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.goods-skus-box {
|
||||
overflow-y: auto;
|
||||
height: 610rpx;
|
||||
// #ifdef MP-WEIXIN
|
||||
height: 570rpx;
|
||||
// #endif
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.goods-skus-view {
|
||||
overflow: hidden;
|
||||
|
||||
.skus-view-list {
|
||||
> .skus-view-item {
|
||||
flex: 1;
|
||||
padding: 0 36rpx;
|
||||
|
||||
overflow: hidden;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin-left: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 22rpx;
|
||||
color: #262626;
|
||||
background: #f2f2f2;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-header {
|
||||
height: 200rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
|
||||
.goods-box {
|
||||
padding: 50rpx 36rpx 0 36rpx;
|
||||
}
|
||||
|
||||
.goods-skus {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
color: $jd-color;
|
||||
line-height: 80rpx;
|
||||
display: flex;
|
||||
}
|
||||
.promotion-box {
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: line-through;
|
||||
color: #999;
|
||||
margin-left: 10rpx;
|
||||
/deep/ span {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
.promotion {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.goods-price-promotionShow {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
.goods-check-skus {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
> .goods-check-skus-name {
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
> span {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
8
pages/cart/payment/popup/popup.js
Normal file
8
pages/cart/payment/popup/popup.js
Normal file
@@ -0,0 +1,8 @@
|
||||
|
||||
|
||||
export default {
|
||||
height:"1000rpx", //弹出层高度
|
||||
mode:"bottom", //弹出层位置
|
||||
radius:"32", //圆角 rpx,
|
||||
close:false //能否点击遮罩退出
|
||||
}
|
||||
37
pages/cart/payment/popup/popup.scss
Normal file
37
pages/cart/payment/popup/popup.scss
Normal file
@@ -0,0 +1,37 @@
|
||||
.view-class-title {
|
||||
font-size: 26rpx;
|
||||
color: #262626;
|
||||
|
||||
font-weight: 700;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
.confirmBtn {
|
||||
width: 90%;
|
||||
}
|
||||
.confirmBtn,
|
||||
.box-btn {
|
||||
line-height: 80rpx;
|
||||
height: 80rpx;
|
||||
|
||||
background: $jd-color;
|
||||
color: #fff;
|
||||
border-radius: 200px;
|
||||
text-align: center;
|
||||
margin: 5rpx auto;
|
||||
}
|
||||
|
||||
.btns {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
margin: 0 auto;
|
||||
}
|
||||
.goods-price-bigshow {
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box-btn {
|
||||
flex: 1;
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
319
pages/cart/payment/shareOrderGoods.vue
Normal file
319
pages/cart/payment/shareOrderGoods.vue
Normal file
@@ -0,0 +1,319 @@
|
||||
<template>
|
||||
<view class="wrapper">
|
||||
<div class='goods' v-if="selectedGoods">
|
||||
<image class="goods-image" :src="selectedGoods.thumbnail" alt="">
|
||||
<p class="goodsName">{{selectedGoods.goodsName}}</p>
|
||||
<div class="goodsPrice">{{(selectedGoods.promotionPrice || selectedGoods.price ) | unitPrice('￥')}}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="tips">
|
||||
|
||||
<span v-if="master.toBeGroupedNum">
|
||||
还差<span class="num">{{master.toBeGroupedNum || 0}}</span>人，赶快邀请好友拼单吧
|
||||
</span>
|
||||
<span v-if="isBuy &&!master.toBeGroupedNum >0">
|
||||
已成功拼团
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="isMaster && !isOver">
|
||||
<div class="share-user" v-if="master.toBeGroupedNum" @click="share()">
|
||||
邀请好友拼团
|
||||
</div>
|
||||
<div class="home" @click="handleClickHome()">
|
||||
去首页逛逛
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!isMaster && !isOver && !isBuy">
|
||||
<div class="share-user" @click="toBuy">
|
||||
参与拼团
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!isMaster && !isOver && isBuy">
|
||||
<div class="share-user disabled">
|
||||
已购买该商品
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isOver">
|
||||
<!-- <div class="share-user disabled">
|
||||
拼团已结束
|
||||
</div> -->
|
||||
<div class="home" @click="handleClickHome()">
|
||||
去首页逛逛
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 倒计时 -->
|
||||
<div class="count-down" v-if="!isOver">
|
||||
<u-count-down bg-color="#ededed" :hide-zero-day="true" @end="isOver" :timestamp="timeStamp"></u-count-down>
|
||||
</div>
|
||||
|
||||
<div class="user-list" v-if="data.pintuanMemberVOS">
|
||||
<div class="user-item" v-for="(item,index) in data.pintuanMemberVOS" :key="index">
|
||||
<span class="master" v-if="item.orderSn == ''">团长</span>
|
||||
<image class="img" :src="item.face" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<popupGoods :addr="addr" ref="popupGoods" :buyMask="maskFlag" @closeBuy="closePopupBuy" :goodsDetail="goodsDetail" :goodsSpec="goodsSpec" v-if="goodsDetail.id " @handleClickSku="getGoodsDetail" />
|
||||
<shares @close="closeShare" :link="'/pages/cart/payment/shareOrderGoods?sn='+this.routers.sn+'&sku='+this.routers.sku+'&goodsId='+this.routers.goodsId" type="pintuan"
|
||||
:thumbnail="data.promotionGoods.thumbnail" :goodsName="data.promotionGoods.goodsName" v-if="shareFlage " />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getGoods } from "@/api/goods.js";
|
||||
import { getPinTuanShare } from "@/api/order";
|
||||
import shares from "@/components/m-share/index";
|
||||
import storage from "@/utils/storage.js";
|
||||
import popupGoods from "./popup/goods"; //购物车商品的模块
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
addr: {
|
||||
id: "",
|
||||
},
|
||||
maskFlag: false, //商品弹框
|
||||
timeStamp: 0,
|
||||
shareFlage: false,
|
||||
data: "",
|
||||
isMaster: true,
|
||||
selectedGoods: "", //选择的商品规格昵称
|
||||
routers: "", //传参数据
|
||||
goodsDetail: "", //商品详情
|
||||
goodsSpec: "",
|
||||
master: "", // 团长
|
||||
PromotionList: "", //优惠集合
|
||||
isGroup: false, //是否拼团
|
||||
isOver: false, //是否结束活动
|
||||
isBuy: false, //当前用户是是否购买
|
||||
};
|
||||
},
|
||||
components: {
|
||||
shares,
|
||||
popupGoods,
|
||||
},
|
||||
watch: {
|
||||
isGroup(val) {
|
||||
if (val) {
|
||||
let timer = setInterval(() => {
|
||||
this.$refs.popupGoods.buyType = "PINTUAN";
|
||||
clearInterval(timer);
|
||||
}, 100);
|
||||
} else {
|
||||
this.$refs.popupGoods.buyType = "";
|
||||
}
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
this.routers = options;
|
||||
},
|
||||
mounted() {
|
||||
this.init(this.routers.sn, this.routers.sku);
|
||||
},
|
||||
methods: {
|
||||
closeShare() {
|
||||
this.shareFlage = false;
|
||||
},
|
||||
// 这里的话得先跳到商品详情才能购买商品
|
||||
toBuy() {
|
||||
this.maskFlag = true;
|
||||
this.$refs.popupGoods.parentOrder = {
|
||||
...this.master,
|
||||
orderSn: this.routers.sn,
|
||||
};
|
||||
|
||||
console.log(this.$refs.popupGoods.parentOrder);
|
||||
|
||||
this.$refs.popupGoods.isMask = true;
|
||||
this.$refs.popupGoods.isClose = true;
|
||||
this.$refs.popupGoods.buyType = "PINTUAN";
|
||||
},
|
||||
// 分享
|
||||
share() {
|
||||
this.shareFlage = true;
|
||||
},
|
||||
closePopupBuy(val) {
|
||||
this.maskFlag = false;
|
||||
},
|
||||
// 实例化本页面
|
||||
async init(sn, sku) {
|
||||
let res = await getPinTuanShare(sn, sku);
|
||||
if (res.data.success) {
|
||||
this.data = res.data.result;
|
||||
this.selectedGoods = res.data.result.promotionGoods;
|
||||
let endTime = Date.parse(
|
||||
res.data.result.promotionGoods.endTime.replace(/-/g, "/")
|
||||
);
|
||||
// 获取当前剩余的拼团商品时间
|
||||
let timeStamp = Date.parse(new Date(endTime)) / 1000;
|
||||
|
||||
// 获取当前时间时间戳
|
||||
let dateTime = Date.parse(new Date()) / 1000;
|
||||
|
||||
this.timeStamp = parseInt(timeStamp - dateTime);
|
||||
|
||||
this.timeStamp <= 0 ? (this.isOver = true) : (this.isOver = false);
|
||||
|
||||
// 获取剩余拼团人数
|
||||
this.master =
|
||||
res.data.result.pintuanMemberVOS.length != 0 &&
|
||||
res.data.result.pintuanMemberVOS.filter((item) => {
|
||||
return item.orderSn == "";
|
||||
})[0];
|
||||
|
||||
// 获取当前是否是拼团本人
|
||||
if (
|
||||
storage.getUserInfo(this.routers.sku, this.routers.goodsId).id ==
|
||||
this.master.memberId
|
||||
) {
|
||||
this.isMaster = true;
|
||||
} else {
|
||||
this.isMaster = false;
|
||||
// 获取商品详情
|
||||
this.getGoodsDetail(this.routers.sku, this.routers.goodsId);
|
||||
}
|
||||
|
||||
// 获取当前商品是否已经购买
|
||||
if (storage.getUserInfo().id) {
|
||||
console.log(storage.getUserInfo().id);
|
||||
let isBuy = res.data.result.pintuanMemberVOS.filter((item) => {
|
||||
return item.memberId == storage.getUserInfo().id;
|
||||
});
|
||||
isBuy.length != 0 ? (this.isBuy = true) : (this.isBuy = false);
|
||||
}
|
||||
}
|
||||
},
|
||||
// 获取商品详情
|
||||
getGoodsDetail(id, goodsId) {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true,
|
||||
});
|
||||
getGoods(id, goodsId).then((response) => {
|
||||
this.goodsDetail = response.data.result.data;
|
||||
this.selectedGoods = response.data.result.data;
|
||||
this.goodsSpec = response.data.result.specs;
|
||||
uni.hideLoading();
|
||||
this.PromotionList = response.data.result.promotionMap;
|
||||
|
||||
// 判断是否拼团活动 如果有则显示拼团活动信息
|
||||
this.PromotionList &&
|
||||
Object.keys(this.PromotionList).forEach((item) => {
|
||||
if (item.indexOf("PINTUAN") == 0) {
|
||||
this.isGroup = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
handleClickHome() {
|
||||
uni.switchTab({
|
||||
url: "/pages/tabbar/home/index",
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
.over {
|
||||
margin: 10% 0;
|
||||
}
|
||||
.goods {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.goods-image {
|
||||
margin: 40rpx auto;
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
}
|
||||
.goodsName {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.goodsPrice {
|
||||
margin-top: 10rpx;
|
||||
font-weight: bold;
|
||||
font-size: 40rpx;
|
||||
color: $main-color;
|
||||
}
|
||||
.master {
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: $light-color;
|
||||
padding: 0 8rpx;
|
||||
border-radius: 10rpx;
|
||||
color: #fff;
|
||||
}
|
||||
.user-item {
|
||||
position: relative;
|
||||
margin: 20rpx;
|
||||
}
|
||||
.count-down {
|
||||
margin: 40rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
.img {
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid $light-color;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
.user-list {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.tips {
|
||||
margin-top: 10%;
|
||||
text-align: center;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 100rpx;
|
||||
}
|
||||
.num {
|
||||
color: $main-color;
|
||||
font-size: 60rpx;
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
.home,
|
||||
.share-user {
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
width: 80%;
|
||||
margin: 30rpx auto 0 auto;
|
||||
color: #fff;
|
||||
border-radius: 0.4em;
|
||||
}
|
||||
.share-user {
|
||||
background: $main-color;
|
||||
}
|
||||
.disabled {
|
||||
background: rgba($main-color, $alpha: 0.2);
|
||||
}
|
||||
.home {
|
||||
color: $main-color;
|
||||
border: 2rpx solid $main-color;
|
||||
}
|
||||
</style>
|
||||
304
pages/cart/payment/success.vue
Normal file
304
pages/cart/payment/success.vue
Normal file
@@ -0,0 +1,304 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="pay-wrapper">
|
||||
<div class="pay-money">
|
||||
￥{{ payPrice | unitPrice }}
|
||||
</div>
|
||||
<div class="pay-btns">
|
||||
<div v-show="!from" @click="navigateTo('/pages/order/myOrder?status=0')">查看订单</div>
|
||||
<div @click="navigateTo('/pages/tabbar/home/index', 'switch')">回到首页</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="pay-box">
|
||||
<div class="pay-tag-box">
|
||||
<h2>订单支付成功!</h2>
|
||||
|
||||
<div class="pay-item">
|
||||
<div>
|
||||
支付方式：
|
||||
</div>
|
||||
<div>{{paymentMethod | paymentTypeFilter}}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<div class="subscribe flex">
|
||||
<div>订阅订单状态</div>
|
||||
<div>
|
||||
<u-switch size="50" :disabled="checked" :active-color="activeColor" @change="changeStatus" v-model="checked"></u-switch>
|
||||
</div>
|
||||
</div>
|
||||
<!-- #endif -->
|
||||
</div>
|
||||
<div class="goods-recommend">--商品推荐--</div>
|
||||
<div class="goods-list">
|
||||
<div @click="handleClick(item)" class="goods-item" v-for="(item, item_index) in goodsList" :key="item_index">
|
||||
<div class="goods-img">
|
||||
<u-image :src="item.thumbnail" mode="aspectFill" height="350rpx" width="100%">
|
||||
<u-loading slot="loading"></u-loading>
|
||||
</u-image>
|
||||
</div>
|
||||
<div class="goods-desc">
|
||||
<div class="goods-title">
|
||||
{{ item.goodsName }}
|
||||
</div>
|
||||
<div class="goods-bottom">
|
||||
<div class="goods-price">￥{{ item.price | unitPrice }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getGoodsList } from "@/api/goods.js";
|
||||
import { getWeChatMpMessage } from "@/api/message.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: false,
|
||||
paymentMethod: "",
|
||||
from: "",
|
||||
payPrice: 0,
|
||||
goodsList: [],
|
||||
activeColor:this.$mainColor,
|
||||
params: {
|
||||
pageSize: 12,
|
||||
pageNumber: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
paymentTypeFilter(val) {
|
||||
switch (val) {
|
||||
case "WECHAT":
|
||||
return "微信";
|
||||
case "ALIPAY":
|
||||
return "支付宝";
|
||||
case "WALLET":
|
||||
return "余额支付";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
this.paymentMethod = options.paymentMethod || "";
|
||||
this.from = options.from || "";
|
||||
this.payPrice = parseInt(options.payPrice) || 0;
|
||||
//搜索商品
|
||||
this.initGoods();
|
||||
},
|
||||
methods: {
|
||||
changeStatus(val) {
|
||||
if (val) {
|
||||
this.sendMessage();
|
||||
}
|
||||
},
|
||||
async initGoods() {
|
||||
let goodsList = await getGoodsList(this.params);
|
||||
this.goodsList.push(...goodsList.data.result.content);
|
||||
},
|
||||
sendMessage() {
|
||||
//订阅消息
|
||||
//#ifdef MP-WEIXIN
|
||||
getWeChatMpMessage().then((res) => {
|
||||
var message = res.data.result;
|
||||
var templateid = message.map((item) => item.code);
|
||||
uni.requestSubscribeMessage({
|
||||
tmplIds: templateid,
|
||||
success: (res) => {
|
||||
for(let key in res){
|
||||
if(res[key] == "reject"){
|
||||
this.checked = false;
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
fail: (res) => {
|
||||
uni.removeStorageSync("acceptSubscribeMessage");
|
||||
this.checked = false;
|
||||
},
|
||||
});
|
||||
});
|
||||
//#endif
|
||||
},
|
||||
|
||||
handleClick(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
|
||||
});
|
||||
},
|
||||
|
||||
navigateTo(url, type) {
|
||||
if (type === "switch") {
|
||||
uni.switchTab({
|
||||
url,
|
||||
});
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.subscribe {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0 auto 40rpx auto;
|
||||
padding: 0 20rpx 20rpx;
|
||||
width: 80%;
|
||||
|
||||
}
|
||||
.pay-btns {
|
||||
display: flex;
|
||||
width: 50%;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto;
|
||||
color: #fff;
|
||||
|
||||
> div {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.pay-money {
|
||||
line-height: 1;
|
||||
font-size: 50rpx;
|
||||
color: #fff;
|
||||
margin-bottom: 100rpx;
|
||||
}
|
||||
|
||||
.pay-item {
|
||||
font-weight: bold;
|
||||
margin: 32rpx 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 24rpx;
|
||||
color: rgba($color: $main-color, $alpha: 0.8);
|
||||
}
|
||||
|
||||
.pay-box {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pay-tag-box {
|
||||
width: 80%;
|
||||
margin: 80rpx auto 40rpx auto;
|
||||
padding: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
background: rgba($color: $main-color, $alpha: 0.2);
|
||||
|
||||
> h2 {
|
||||
margin-top: 20rpx;
|
||||
font-size: 40rpx;
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
|
||||
.pay-wrapper {
|
||||
background-image: linear-gradient(90deg, #fa123b, #ff6b35, #ff9f28, #ffcc03);
|
||||
height: 480rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pay-box {
|
||||
transform: translateY(-100rpx);
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-top-right-radius: 100rpx;
|
||||
}
|
||||
|
||||
/**商品代码 */
|
||||
$w_94: 94%;
|
||||
|
||||
.goods-recommend {
|
||||
background: #f7f7f7;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.goods-list {
|
||||
display: flex;
|
||||
|
||||
flex-wrap: wrap;
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
width: 50%;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 0.4em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.goods-img {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
// width: 158px;
|
||||
width: $w_94;
|
||||
height: 350rpx;
|
||||
border-top-left-radius: 20rpx;
|
||||
border-top-right-radius: 20rpx;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-desc {
|
||||
border-bottom-left-radius: 20rpx;
|
||||
border-bottom-right-radius: 20rpx;
|
||||
width: $w_94;
|
||||
background: #fff;
|
||||
padding: 8rpx 0 8rpx 8rpx;
|
||||
margin: 0 auto;
|
||||
|
||||
> .goods-title {
|
||||
font-size: 12px;
|
||||
height: 70rpx;
|
||||
display: -webkit-box;
|
||||
font-weight: 500;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
-webkit-line-clamp: 2;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
> .goods-bottom {
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
|
||||
> .goods-price {
|
||||
line-height: 2;
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-icon {
|
||||
right: 10rpx;
|
||||
top: 10rpx;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
BIN
pages/cart/static/pay.png
Normal file
BIN
pages/cart/static/pay.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Reference in New Issue
Block a user