Skip to content

7
7-Eleven
Commit 28e0ebf8 by 赵雅纹
Options

订单和选择优惠券

parent 8359e7ce
Showing with 753 additions and 2 deletions
src/app.json
......@@ -23,7 +23,8 @@
"component/buyImageSwiper/buyImageSwiper",
"pages/myShare/myShare",
"pages/user-center/user-center",
"pages/productDetail/productDetail"
"pages/productDetail/productDetail",
"pages/confirmOrder/confirmOrder"
],
"subPackages": [
{
......
src/app.wxss
......@@ -17,4 +17,8 @@ page {
box-sizing: border-box;
}
.theme-color{
background-color: #CB3C3C;
}
src/component/selectCoupon/selectCoupon.js 0 → 100644
// component/selectCoupon/selectCoupon.js
Component({
/**
* 组件的属性列表
*/
properties: {
show: { // 显示标识
type: Boolean,
value: false
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
},
hidePopup: function () { // 隐藏弹出框
this.setData({
show: false
})
},
})
src/component/selectCoupon/selectCoupon.json 0 → 100644
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
src/component/selectCoupon/selectCoupon.wxml 0 → 100644
<view class="modal-container{{show ? ' active' : ''}}" bindtap="hidePopup"></view>
<view class="modal-content{{show ? ' active' : ''}}">
<view class="modal-header">
<image src="/assets/imgs/7_1_0/arrow-right.png" class="modal-to-back" mode="widthFix"></image>
<text class="modal-title">选择优惠券</text>
<image class="modal-close" mode="widthFix" src="/assets/imgs/7_1_0/arrow-right.png" bindtap="hidePopup"></image>
</view>
<view class="modal-info">
<view class="coupon-list">
<image class="coupon-bg" src="/assets/imgs/7_1_0/coupon-bg.png" mode="widthFix"></image>
<view class="coupon-info">
<view class="left-price">
<view class="top-price">
<text>￥</text>
<text class="amount">50</text>
</view>
<view class="bottom-desc">
满99可用
</view>
</view>
<view class="right-info">
<view class="coupon-title">新人礼包劵</view>
<view class="coupon-time">有效期</view>
<view class="coupon-desc">拼团及特殊商品不可用</view>
</view>
<view></view>
</view>
</view>
<!-- <view class="coupon-list">
<image class="coupon-bg" src="/assets/imgs/7_1_0/coupon-bg.png" mode="widthFix"></image>
<view class="coupon-info">
<view class="left-price">
<view class="top-price">
<text>￥</text>
<text class="amount">50</text>
</view>
<view class="bottom-desc">
满99可用
</view>
</view>
<view class="right-info">
<view class="coupon-title">新人礼包劵</view>
<view class="coupon-time">有效期</view>
<view class="coupon-desc">拼团及特殊商品不可用</view>
</view>
<view></view>
</view>
</view>
<view class="coupon-list">
<image class="coupon-bg" src="/assets/imgs/7_1_0/coupon-bg.png" mode="widthFix"></image>
<view class="coupon-info">
<view class="left-price">
<view class="top-price">
<text>￥</text>
<text class="amount">50</text>
</view>
<view class="bottom-desc">
满99可用
</view>
</view>
<view class="right-info">
<view class="coupon-title">新人礼包劵</view>
<view class="coupon-time">有效期</view>
<view class="coupon-desc">拼团及特殊商品不可用</view>
</view>
<view></view>
</view>
</view> -->
<view class="empty-coupon">
暂无可用优惠券
</view>
</view>
</view>
src/component/selectCoupon/selectCoupon.wxss 0 → 100644
/* component/selectCoupon/selectCoupon.wxss */
.modal-container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
transform: translateY(100%);
opacity: 0;
transition: opacity 200ms;
z-index: 98;
}
.modal-container.active {
opacity: 1;
transform: translateY(0); }
.modal-content.active {
transform: translateY(0); }
.out-stock {
background: #FFB400!important;
}
.modal-content {
position: fixed;
z-index: 99;
width: 100%;
bottom: 0;
left: 0;
background: #ffffff;
transition: transform 300ms;
transform: translateY(100%);
height: 1000rpx;
}
.modal-content .modal-close {
position: absolute;
right: 24rpx;
top: 35rpx;
width: 18rpx;
}
.modal-to-back{
width: 18rpx;
position: absolute;
left: 24rpx;
top: 35rpx;
}
.modal-title{
color: #333333;
font-size: 32rpx;
position: absolute;
left: 295rpx;
top: 28rpx;
}
.coupon-list{
width: 702rpx;
height: 174rpx;
position: relative;
margin-bottom: 25rpx;
}
.coupon-bg{
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.modal-info{
padding: 0 24rpx;
margin-top: 95rpx;
}
.left-price,.right-info{
display: inline-block;
}
.left-price{
font-size: 18rpx;
color:#CB3C3C;
position: absolute;
top: 36rpx;
left: 48rpx;
}
.amount{
font-size: 54rpx;
}
.right-info{
position: absolute;
top: 33rpx;
left: 205rpx;
}
.coupon-title{
font-size: 28rpx;
color: #333333;
}
.coupon-time{
color: #aaaaaa;
font-size: 20rpx;
}
.coupon-desc{
color: #aaaaaa;
font-size: 22rpx;
margin-top: 12rpx;
}
.modal-info{
max-height: 900rpx;
overflow: scroll;
}
.empty-coupon{
width: 100%;
color: #aaaaaa;
margin-top:211rpx ;
text-align: center;
}
src/pages/confirmOrder/confirmOrder.js 0 → 100644
// pages/confirmOrder/confirmOrder.js
Page({
/**
* 页面的初始数据
*/
data: {
addressInfo:'',
showSelectCoupon:false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
//获取微信地址
chooseWxAddress(){
wx.chooseAddress({
success: (res) => {
console.log(res)
this.setData({
addressInfo:res
})
},
fail: function (err) {
console.log(err)
}
})
},
//选择优惠券
selectCoupon(){
this.setData({
showSelectCoupon:true
})
}
})
\ No newline at end of file
src/pages/confirmOrder/confirmOrder.json 0 → 100644
{
"navigationBarTitleText": "确认订单",
"usingComponents": {
"select-coupon": "/component/selectCoupon/selectCoupon"
}
}
\ No newline at end of file
src/pages/confirmOrder/confirmOrder.wxml 0 → 100644
<!--pages/confirmOrder/confirmOrder.wxml-->
<view class="page-confirm-order">
<view class="address-wrap">
<block wx:if="{{false}}">
<view class="address-section">
<input class="address-input" placeholder="请输入收货人姓名"></input>
<input class="address-input" placeholder="请输入手机号码"></input>
</view>
<view class="address-section">
<!-- <view class="">所在区域</view> -->
<picker class="address-input address-picker" mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
<view class="picker-choose">
</view>
</picker>
</view>
<view class="address-section">
<input class="address-input address-detail" placeholder="请输入路名门牌号"></input>
</view>
</block>
<block>
<view class="address-list">
<view class="address-info">
<view>
<text class="user-name">{{addressInfo.userName}}</text>
<text class="phone-number">{{addressInfo.telNumber}}</text>
</view>
<view class="address-list-detail">
{{addressInfo.provinceName}} {{addressInfo.cityName}} {{addressInfo.countyName}} {{addressInfo.detailInfo}}
</view>
<view class="arrow-right-wrap">
<image class="arrow-right" src="/assets/imgs/7_1_0/arrow-right.png"></image>
</view>
</view>
</view>
</block>
<view class="wx-address" bindtap="chooseWxAddress">
+ 使用微信地址
</view>
</view>
<view class="address-line">
<image src="/assets/imgs/7_1_0/address-line.png"></image>
</view>
<!-- 分割线 -->
<view class="gray-line"></view>
<!-- 商品列表 -->
<view class="pro-wrap">
<view class="pro-list">
<image class="pro-img" src="/assets/imgs/7_1_0/address-line.png"></image>
<view class="pro-info">
<view class="pro-name">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名</view>
<view class="pro-desc">
规格
</view>
<view class="pro-price">
<text class="price">￥258</text>
<text class="number">x 1</text>
</view>
</view>
</view>
<view class="pro-list">
<image class="pro-img" src="/assets/imgs/7_1_0/address-line.png"></image>
<view class="pro-info">
<view class="pro-name">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名</view>
<view class="pro-desc">
规格
</view>
<view class="pro-price">
<text class="price">￥258</text>
<text class="number">x 1</text>
</view>
</view>
</view>
</view>
<!-- 分割线 -->
<view class="gray-line"></view>
<!-- 商品合计 -->
<view class="pro-sum">
<view class="plus-wrap">
<view class="plus-top-text">
<image src="/assets/imgs/7_1_0/plus-icon.png"></image>
<text>现在勾选</text>
</view>
<view class="plus-bottom-text">
<text>vip可尊享N大权益</text>
<image src="/assets/imgs/7_1_0/explain.png"></image>
</view>
<view class="select-desc">
<!-- <image src="{{isSelect ? '/assets/imgs/7_1_0/selected.png' : '/assets/imgs/7_1_0/unselect.png'}}" class="{{isSelect ? 'select-tip' : 'unselect-tip'}}"></image> -->
<text>{{isSelect ? '已勾选，即享优惠' : '勾选开通'}}</text>
</view>
<view class="select-type {{isSelect ? 'theme-color' : ''}}">
<image src="{{isSelect ? '/assets/imgs/7_1_0/tick-success.png' : '/assets/imgs/7_1_0/tick.png'}}"></image>
</view>
</view>
<view class="order-sum">
<view class="order-price">
<view class="pro-total-price">
<text class="price-label">商品合计</text>
<text class="total-price">￥306</text>
</view>
<view class="plus-price">
<view class="plus-info">
<text class="price-label">plus会员价</text>
<text class="member-price">-￥20</text>
</view>
<text class="plus-member-price">￥289</text>
</view>
</view>
<view class="coupon">
<view>
<text class="price-label">优惠券</text>
<view class="select-coupon" bindtap="selectCoupon">
<text class="{{haveCoupon ? 'coupon-price' : 'no-coupon'}}">{{haveCoupon ? '-￥100' : '无可用优惠券'}}</text>
<image class="arrow-right" src="/assets/imgs/7_1_0/arrow-right.png"></image>
</view>
</view>
</view>
<view class="coupon">
<view>
<text class="price-label">VIP会员年费</text>
<text class="vip-desc"> （不可使用任何优惠或积分）</text>
<view class="select-coupon">
<text class="coupon-price">+￥100</text>
<image class="arrow-right" src="/assets/imgs/7_1_0/arrow-right.png"></image>
</view>
</view>
</view>
<!-- <view class="total">
<text class="total-label">小计：</text>
<text class="total-numer">￥186</text>
</view> -->
</view>
</view>
<view class="pro-footer">
<view class="cost">
<text class="cost-label">实付款：</text>
<text class="cost-price">￥306</text>
</view>
<view class="theme-color buy-btn">立即购买</view>
</view>
</view>
<select-coupon
show="{{showSelectCoupon}}"
/>
\ No newline at end of file
src/pages/confirmOrder/confirmOrder.wxss 0 → 100644
/* pages/confirmOrder/confirmOrder.wxss */
.address-wrap{
padding: 0 30rpx;
}
.address-section{
display: flex;
justify-content: space-between;
}
.address-input{
width: 293rpx;
height: 60rpx;
border-radius: 5rpx;
background-color: rgba(238, 238, 238, 1);
opacity: 0.5;
padding: 0 20rpx;
color: rgba(0, 0, 0, 0.25);
font-size: 28rpx;
margin-bottom: 18rpx;
}
.address-detail{
flex: 1;
}
.address-picker{
flex: 1;
}
.picker-choose{
color: rgba(0, 0, 0, 0.25);
font-size: 28rpx;
line-height: 60rpx;
}
.wx-address{
width: 244rpx;
height: 46rpx;
line-height: 46rpx;
margin: 4rpx auto 22rpx;
color: #C09A74;
font-size: 24rpx;
text-align: center;
}
.address-line{
height: 6rpx;
position: relative;
}
.address-line image{
width: 750rpx;
height: 6rpx;
position: absolute;
}
.gray-line{
width: 750rpx;
height: 22rpx;
background-color: rgba(249, 249, 249, 1);
}
.pro-wrap{
padding: 0 32rpx 0 30rpx;
}
.pro-list{
border-bottom: 1px solid rgba(151,151,151,0.3);
padding:31rpx 0 25rpx;
}
.pro-list:last-child{
border-bottom: none;
}
.pro-img{
width: 160rpx;
height: 160rpx;
vertical-align: top;
}
.pro-info{
display: inline-block;
margin-left: 28rpx;
vertical-align: top;
}
.pro-name{
font-size: 25rpx;
color: #333333;
width: 500rpx;
line-height:36rpx;
}
.pro-desc{
font-size: 22rpx;
color: #aaaaaa;
margin-top: 10rpx;
}
.pro-price{
margin-top: 16rpx;
}
.price{
color: #cb3c3c;
font-size: 32rpx;
}
.number{
float: right;
font-size: 26rpx;
color: #808080;
}
.pro-sum{
padding: 0 20rpx 90rpx;
}
.plus-wrap{
background-color: rgba(192, 154, 116, 0.07);
margin-top: 21rpx;
padding: 21rpx 29rpx 15rpx 33rpx;
position: relative;
}
.plus-top-text image{
width: 36rpx;
height: 20rpx;
vertical-align: middle;
}
.plus-top-text text{
color: #333333;
font-size: 23rpx;
margin-left: 16rpx;
vertical-align: middle;
}
.plus-bottom-text{
margin-top: 7rpx;
}
.plus-bottom-text text{
font-size: 20rpx;
color: #c09a74;
vertical-align: middle;
}
.plus-bottom-text image{
width: 16rpx;
height: 16rpx;
vertical-align: middle;
margin-left: 7rpx;
}
.select-type{
width: 32rpx;
height: 32rpx;
background-color: #D8D8D8;
border-radius: 50%;
position: absolute;
top: 34rpx;
right: 29rpx;
}
.select-type image{
width: 18rpx;
height: 12rpx;
position: absolute;
top: 10rpx;
left: 7rpx;
}
/* .select-info{
position: absolute;
right: 0
} */
.select-desc{
}
.select-desc text{
font-size: 18rpx;
color: #ffffff;
position: absolute;
top: 6rpx;
}
.select-desc image{
/* position: absolute; */
position: absolute;
top: 0;
left: 0;
}
.select-desc .unselect-tip{
width: 112rpx;
height: 50rpx;
}
.order-price,.coupon{
padding: 24rpx 20rpx;
border-bottom: 1px solid rgba(151, 151, 151, 0.3);
}
.coupon:last-child{
border-bottom: none;
}
.price-label{
color: #333333;
font-size: 28rpx;
}
.total-price{
float: right;
color: #aaaaaa;
}
.member-price{
color: #CB3C3C;
font-size: 22rpx;
margin-left: 24rpx;
}
.plus-price{
margin-top: 20rpx;
}
.plus-info{
display: inline-block;
}
.plus-member-price{
float: right;
}
.select-coupon{
float: right;
}
.coupon-price{
color: #cb3c3c;
font-size: 22rpx;
}
.no-coupon{
color: #aaaaaa;
font-size: 22rpx;
}
.arrow-right{
width: 13rpx;
height: 21rpx;
vertical-align: middle;
margin-left: 14rpx;
}
.total{
float: right;
margin: 22rpx 0;
}
.total-numer{
font-size: 36rpx;
color: #cb3c3c;
font-weight: 600;
}
.address-list{
padding: 45rpx 0 42rpx 25rpx;
}
.user-name{
font-size: 28rpx;
color: #333333;
margin-left: 42rpx;
}
.phone-number{
font-size: 28rpx;
color: #333333;
margin-left: 37rpx;
}
.address-list-detail{
color: #787878;
font-size: 26rpx;
margin-top: 12rpx;
}
.address-info{
position: relative;
}
.arrow-right-wrap{
position: absolute;
right: 0;
top: 20rpx;
}
.pro-footer{
position: fixed;
bottom: 0;
height: 88rpx;
/* margin-top: 100rpx; */
}
.cost{
width: 497rpx;
height: 88rpx;
line-height: 80rpx;
display: inline-block;
border-top: 1px solid rgba(151, 151, 151, 0.3);
text-align: right;
padding-right: 39rpx;
background-color: #ffffff;
}
.cost-label{
font-size: 26rpx;
color: #808080;
}
.cost-price{
color: #cb3c3c;
font-size: 32rpx;
}
.buy-btn{
width: 214rpx;
height: 88rpx;
text-align: center;
line-height: 88rpx;
color: #ffffff;
display: inline-block;
font-size: 25rpx;
}
.vip-desc{
font-size: 22rpx;
color: #aaaaaa;
}
\ No newline at end of file
src/pages/productDetail/productDetail.wxss
......@@ -26,6 +26,7 @@
}
.product-detail-wrap{
padding: 0 16rpx 0 24rpx;
margin-top: 17rpx;
}
.price-icon{
display: inline-block;
......
src/project.config.json
......@@ -39,7 +39,7 @@
"list": []
},
"miniprogram": {
"current": 17,
"current": 18,
"list": [
{
"id": -1,
......@@ -150,6 +150,13 @@
"id": -1,
"name": "商品详情页",
"pathName": "pages/productDetail/productDetail",
"query": "",
"scene": null
},
{
"id": -1,
"name": "确认订单",
"pathName": "pages/confirmOrder/confirmOrder",
"scene": null
}
]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment