Skip to content

dev / marubi-wish-list-mp

Go to a project
Toggle navigation
Toggle navigation pinning
da367509 by simon
Options

版本提交

1 parent a616f0f9
Inline Side-by-side
Showing 36 changed files with 768 additions and 34 deletions
let app = getApp();
Component({
properties: {
// 这里定义了innerText属性，属性值可以在组件使用时指定
innerText: {
type: String,
value: 'default value',
}
},
data: {
// 这里是一些组件内部数据
someData: {}
},
methods: {
// 这里是一个自定义方法
customMethod() {
this.triggerEvent('evtcomp', {
name: "_evt_custom"
})
},
// 隐藏蒙层
hideMask() {
this.triggerEvent('evtcomp', {
name: "_evt_hide_mask"
});
},
// 打电话
onPlayTooHandler() {
app.router.push({
openType: "reLaunch",
path: "index",
})
}
}
})
@import '../../assets/scss/mixins';
@import '../../assets/scss/utils';
.comp-item {
position: relative;
width: 654px;
height: 588px;
// background-color: wheat;
.bg {
position: absolute;
width: 654px;
height: 588px;
}
.space1 {
height: 400px;
}
.btn {
position: relative;
margin: 0 auto;
@include cb(300px, 80px);
}
.call{
width: 170px;
height: 40px;
position: absolute;
// background-color: wheat;
left: 300px;
top: 294px;
}
}
<view class="comp-item">
<image class="bg" src="../../image/oss/tips/tips-group-member-coop.png" mode="widthFix" />
<view class="space1"></view>
<view bindtap="onPlayTooHandler" class="btn">我也要玩</view>
<!-- <view bindtap="onCallHandler" class="call"></view> -->
</view>
Component({
properties: {
// 这里定义了innerText属性，属性值可以在组件使用时指定
innerText: {
type: String,
value: 'default value',
}
},
data: {
// 这里是一些组件内部数据
someData: {}
},
methods: {
// 这里是一个自定义方法
customMethod() {
this.triggerEvent('evtcomp', {
name: "_evt_custom"
})
},
// 隐藏蒙层
hideMask() {
this.triggerEvent('evtcomp', {
name: "_evt_hide_mask"
});
}
}
})
@import '../../assets/scss/mixins';
@import '../../assets/scss/utils';
$contentWidth:690px;
.comp-item {
@include border-top-radius(32px);
position: relative;
background-color: #fff;
// width: 750px;
max-height: 860px;
.cont {
// width: 750px;
.nav {
width: 690px;
height: 108px;
margin: 0 auto;
border-bottom: solid 1px #e0e0e0;
display: flex;
justify-content: space-between;
align-items: center;
.place {
padding: 0 12px 0 12px;
color: #333333;
font-size: 28px;
.city {
color: #b83138;
}
}
.area {
display: flex;
align-items: center;
&-item {
@include ellipsis(1);
display: flex;
justify-content: space-between;
align-items: center;
width: 168px;
height: 62px;
border-radius: 10px;
border: solid 1px #b83138;
color: #b93138;
font-size: 24px;
@extend .bb;
padding: 0 20px;
margin-right: 10px;
.icon {
width: 30px;
height: 17px;
}
}
}
.btn {
height: 42px;
line-height: 42px;
border-radius: 21px;
background-color: #f7eaeb;
color: #b83138;
padding: 0 20px;
font-size: 26px;
@extend .bb;
}
}
.nav1 {}
.nav2 {}
// 门店坐标
.pos {
max-height: 600px;
&-item {
margin: 0 auto;
padding: 0 30px;
@extend .bb;
min-height: 196px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: solid 1px #e0e0e0;
.check {
width: 26px;
height: 20px;
padding-right: 24px;
@extend .fcc;
// @extend .bb;
.icon {
width: 26px;
height: 20px;
}
}
.info {
flex: 1;
@extend .bb;
padding: 0 40px 0 20px;
.tit {
display: flex;
align-items: center;
font-size: 32px;
color: #333333;
.name {}
.distance {
margin-left: 16px;
color: #999999;
font-size: 24px;
}
}
.address {
font-size: 20px;
color: #999999;
margin-top: 10px;
font-size: 28px;
}
}
.loc {
width: 80px;
text-align: center;
color: #b83138;
font-size: 24px;
.icon {
width: 40px;
height: 49px;
}
}
}
}
.btn-wrap {
padding: 36px 0;
// 按钮
.store-btn {
margin: 0 auto;
@include cb();
}
}
}
}
<view class="comp-item">
<view class="cont">
<!-- 导航 -->
<view wx:if="{{1>10}}" class="nav nav1">
<view class="place">
您当前所在城市：
<span class="city">深圳市</span>
</view>
<view class="btn">切换城市</view>
</view>
<view wx:else class="nav nav2">
<view class="area">
<view class="area-item">
省
<image class="icon" mode="widthFix" src="../../image/oss/icon/icon-drow-down.png" />
</view>
<view class="area-item">
市
<image class="icon" mode="widthFix" src="../../image/oss/icon/icon-drow-down.png" />
</view>
<view class="area-item">
区
<image class="icon" mode="widthFix" src="../../image/oss/icon/icon-drow-down.png" />
</view>
</view>
<view class="btn">切换城市</view>
</view>
<!-- 门店列表 -->
<scroll-view scroll-y="{{true}}" class="pos">
<view class="pos-item">
<view wx:if="{{1>10}}" class="check">
<image class="icon" mode="widthFix" src="../../image/oss/icon/icon-check.png" />
</view>
<view class="info">
<view class="tit">
<view class="name">坂田天虹店</view>
<view class="distance">距您1.2公里</view>
</view>
<view class="address">地址：安徽省安庆市大观区集贤南路43号八佰伴购物中心一楼</view>
</view>
<view class="loc">
<image class="icon" mode="widthFix" src="../../image/oss/icon/icon-loc.png" />
<view class="txt">导航</view>
</view>
</view>
<view class="pos-item">
<view class="check">
<image class="icon" mode="widthFix" src="../../image/oss/icon/icon-check.png" />
</view>
<view class="info">
<view class="tit">
<view class="name">坂田天虹店</view>
<view class="distance">距您1.2公里</view>
</view>
<view class="address">地址：安徽省安庆市大观区集贤南路43号八佰伴购物中心一楼</view>
</view>
<view class="loc">
<image class="icon" mode="widthFix" src="../../image/oss/icon/icon-loc.png" />
<view class="txt">导航</view>
</view>
</view>
</scroll-view>
<!-- 按钮 -->
<view wx:if="{{1>10}}" class="btn-wrap">
<view bindtap="onSelectHandler" class="store-btn">选择门店</view>
</view>
</view>
</view>
let app = getApp();
Component({
properties: {
// 这里定义了innerText属性，属性值可以在组件使用时指定
innerText: {
type: String,
value: 'default value',
},
eleList: {
type: Object,
value: [],
},
eleVal: {
type: Number,
value: 0,
},
wishBillInfo: {
type: Object,
value: {},
},
wishInfo: {
type: Object,
value: {},
},
wishList: {
type: Object,
value: [],
},
// 1正常(有库存) 2无库存
status: {
type: Number,
status: 2
}
},
data: {
// 这里是一些组件内部数据
someData: {}
},
methods: {
// 这里是一个自定义方法
customMethod() {
this.triggerEvent('evtcomp', {
name: "_evt_custom"
})
},
// 隐藏蒙层
hideMask() {
this.triggerEvent('evtcomp', {
name: "_evt_hide_mask"
});
},
// 自提 要带上参数
toSelfLiftHandler() {
this.hideMask();
app.router.push({
path: "prizeDetail",
query: this.properties.wishInfo
})
},
// 邮寄
toUserTableHandler() {
this.hideMask();
app.router.push({
path: "userTable",
})
},
}
})
@import '../../assets/scss/mixins';
@import '../../assets/scss/utils';
.comp-item {
position: relative;
width: 654px;
height: 732px;
font-weight: 300;
// background-color: wheat;
.bg {
position: absolute;
width: 654px;
height: 732px;
}
.cont {
position: relative;
text-align: center;
color: #333333;
.space1 {
height: 80px;
}
.tit {
color: #ba3038;
font-size: 36px;
}
.name {
margin-top: 8px;
font-size: 28px;
color: #333333;
}
.stock {
text-align: center;
margin-top: 24px;
}
// 有库存
.stock1 {
margin: 22px auto 0;
font-size: 24px;
width: 410px;
.tips {
color: #333333;
}
.tips2 {
color: #999999;
margin-top: 16px;
}
}
// 无库存
.stock2 {
.tips {
height: auto;
color: #999999;
font-size: 24px;
}
}
}
.btn-wrap {
position: absolute;
left: 0;
right: 0;
bottom: 100px;
display: flex;
justify-content: center;
padding: 0 50px;
@extend .bb;
.btn {
margin: 0 auto;
@include cb(234px, 64px);
}
.btn2 {
border: solid 1px #b83138;
background: transparent;
color: #ba3039;
}
}
}
// 心愿
.wish {
position: relative;
margin: 0 auto 0;
display: flex;
// justify-content: space-between;
justify-content: center;
@extend .bb;
// padding-top: 116px;
padding: 40px 80px 0;
&-item {
position: relative;
text-align: center;
.display {
position: relative;
height: 180px;
height: 180px;
border-radius: 90px;
background-image: radial-gradient(circle at 0 0, #ffffff, #f2e6e6);
@extend .fcc;
.prod {
max-width: 200px;
max-height: 200px;
// margin-bottom: 10px;
}
.close {
width: 30px;
height: 30px;
position: absolute;
bottom: 0;
right: 0;
}
}
.name {
width: 160px;
margin: 8px auto 0;
color: #333333;
font-size: 20px;
// font-weight: 300;
}
.val {
@extend .fcc;
color: #b93138;
font-size: 20px;
margin-top: 12px;
.icon {
margin-left: 6px;
width: 11px;
height: 18px;
}
}
}
}
<view class="comp-item">
<image class="bg" src="../../image/oss/tips/tips-border-big.png" mode="widthFix" />
<view class="cont">
<view class="space1"></view>
<view class="tit">· 恭喜获得 ·</view>
<view class="name">{{wishInfo.prizeName}}</view>
<!-- 心愿容器 -->
<view wx:if="{{wishInfo}}" class="wish">
<view class="wish-item">
<view class="display">
<image wx:if="{{wishInfo.tag}}" class="prod" mode="aspectFit" src="../../image/prize/prize-{{wishInfo.tag}}.png" />
</view>
</view>
</view>
<!-- 有库存 -->
<view wx:if="{{status == 1}}" class="stock stock1">
<view class="tips">您可选择直接邮寄到家，或到附近丸美柜台自提</view>
<view class="tips2">ps:选择之后不可修改哦!</view>
</view>
<!-- 无库存 -->
<view wx:else class="stock stock2">
<text class="tips">目前线上库存已不足\n需要女神亲自到丸美柜台领取哦！</text>
</view>
</view>
<view class="btn-wrap">
<view bindtap="toSelfLiftHandler" class="btn">门店自提</view>
<view bindtap="toUserTableHandler" wx:if="{{status == 1}}" class="btn">直接邮寄</view>
</view>
</view>

2.99 KB | W: | H:

4.44 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
......@@ -10,6 +10,7 @@ import {
let app = getApp();
Page({
data: {
groupMemberCoopVisible: true,
options: null,
wishInfo: {},
wishList: []
......
{
"navigationBarTitleText": "好友助力"
"navigationBarTitleText": "好友助力",
"usingComponents": {
"tips-group-member-coop-comp": "../../component/tips-group-member-coop-comp/tips-group-member-coop-comp",
"van-popup": "../../ui/vant-weapp/popup/index"
}
}
......
......@@ -68,3 +68,6 @@
</view>
</view>
</view>
<van-popup show="{{ groupMemberCoopVisible }}">
<tips-group-member-coop-comp bind:evtcomp="evtcomp"></tips-group-member-coop-comp>
</van-popup>
......
......@@ -5,6 +5,7 @@ import Date from '../../utils/date';
let app = getApp();
Page({
data: {
nearbyStoreVisible: true,
userInfo: {},
used: false, //优惠券已使用，另外的样式
couponInfo: {
......@@ -31,7 +32,6 @@ Page({
})
this.initData();
})
},
initData() {
// this.setData({
......@@ -42,6 +42,11 @@ Page({
onNearbyStoreHandler() {
},
hideMask() {
this.setData({
nearbyStoreVisible: false
})
},
// 子组件事件
evtcomp(evt) {
let {
......
{
"navigationBarTitleText": "券详情",
"usingComponents": {
"use-notice-comp": "../../component/use-notice-comp/use-notice-comp"
"use-notice-comp": "../../component/use-notice-comp/use-notice-comp",
"tips-nearby-store-comp": "../../component/tips-nearby-store-comp/tips-nearby-store-comp",
"van-popup": "../../ui/vant-weapp/popup/index"
}
}
......
......@@ -35,3 +35,6 @@
</view>
</view>
</view>
<van-popup show="{{ nearbyStoreVisible }}" position="bottom" bind:click-overlay="hideMask">
<tips-nearby-store-comp bind:evtcomp="evtcomp" wish-info="{{curWish}}" status="{{status}}"></tips-nearby-store-comp>
</van-popup>
......
......@@ -17,7 +17,7 @@ Page({
tipsWishVisible: false,
tipsShakeVisible: false,
tipsCommonVisible: false,
tipsCreateCompleteVisible: true,
tipsCreateCompleteVisible: false,
tipsInnerText: "",
curStatus: 1, // 当前场景
candidate: [], // 心愿候选列表
......
......@@ -21,26 +21,25 @@ Page({
},
onShareAppMessage() {},
onLoad(options) {
app.queryIndex().then((result) => {
let couponInfo = this.data.couponInfo;
let couponInfo = options;
couponInfo.startDateStr = new Date(couponInfo.startDate).toString("yyyy.MM.dd");
couponInfo.endDateStr = new Date(couponInfo.endDate).toString("yyyy.MM.dd");
this.setData({
userInfo: app.globalData.userInfo,
couponInfo: couponInfo
})
console.log("couponInfo:", couponInfo);
this.initData();
})
},
initData() {
// this.setData({
// couponInfo: app.globalData.curCoupon
// })
app.queryIndex().then((result) => {
this.setData({
userInfo: app.globalData.userInfo
})
})
},
// 查看可用门店
onNearbyStoreHandler() {
onNearbyStoreHandler(evt) {
console.log("onNearbyStoreHandler couponInfo:", this.data.couponInfo);
},
// 子组件事件
evtcomp(evt) {
......
......@@ -41,7 +41,7 @@
.main {
.top-space {
height: 52px;
height: 40px;
}
.content {
......@@ -59,7 +59,7 @@
position: relative;
margin: 32px auto 0;
width: 620px;
height: 722px;
height: 859px;
.ebg {
position: absolute;
......@@ -68,7 +68,7 @@
top: 0;
margin: 0 auto;
width: 620px;
height: 722px;
height: 859px;
}
.cont {
......@@ -80,12 +80,13 @@
// 二维码
.qrcode {
width: 340px;
height: 340px;
width: 300px;
height: 300px;
background-color: wheat;
margin: 0 auto;
}
// 数字码
.code {
margin: 24px auto 0;
border-radius: 30px;
......@@ -95,6 +96,76 @@
font-size: 38px;
}
// 预约按钮
.reservation-btn {
@include cb(300px, 80px);
margin: 74px auto 0;
font-size: 32px;
}
// 预约成功
.reservation-complete {
position: relative;
width: 520px;
margin: 32px auto 0;
.tips {
text-align: center;
font-size: 24px;
color: #ba373e;
}
.line {
margin: 24px auto 0;
width: 100%;
height: 1px;
background-color: #f0d6d7;
}
.pos {
margin: 20px auto 0;
display: flex;
justify-content: space-between;
.info {
@extend .bb;
padding: 0 40px 0 20px;
.tit {
display: flex;
align-items: center;
font-size: 24px;
color: #333333;
.name {}
.distance {
margin-left: 16px;
color: #999999;
}
}
.address {
font-size: 20px;
color: #999999;
margin-top: 10px;
}
}
.loc {
width: 80px;
text-align: center;
color: #b83138;
font-size: 24px;
.icon {
width: 40px;
height: 49px;
}
}
}
}
.top {
display: flex;
margin: 0 auto 36px;
......
......@@ -11,7 +11,7 @@
<view class="content">
<!-- 奖品 -->
<view class="prize">
<image class="ebg" mode="widthFix" src="../../image/oss/coupon-detail/cd-c1.png" />
<image class="ebg" mode="widthFix" src="../../image/oss/coupon-detail/cd-c2.png" />
<view class="cont {{used?'used':''}}">
<view class="space1"></view>
<view class="top">
......@@ -28,14 +28,32 @@
<!-- 二维码 -->
<view class="qrcode"></view>
<view class="code">{{couponInfo.couponCode}}</view>
<!-- 预约自提按钮 -->
<view wx:if="{{1<10}}" bindtap="onNearbyStoreHandler" class="reservation-btn">预约自提门店</view>
<!-- 预约成功 -->
<view wx:else class="reservation-complete">
<view class="tips">您已成功预约，请在有效期内前往领取</view>
<view class="line"></view>
<view class="pos">
<view class="info">
<view class="tit">
<view class="name">坂田天虹店</view>
<view class="distance">距您1.2公里</view>
</view>
<view class="address">地址：安徽省安庆市大观区集贤南路43号八佰伴购物中心一楼</view>
</view>
<view class="loc">
<image class="icon" mode="widthFix" src="../../image/oss/icon/icon-loc.png" />
<view class="txt">导航</view>
</view>
</view>
</view>
</view>
</view>
<!-- 使用说明 -->
<view class="use-notice">
<use-notice-comp></use-notice-comp>
</view>
<!-- 查看门店 -->
<view bindtap="onNearbyStoreHandler" class="store-btn">查看可用门店</view>
</view>
</view>
</view>
......
let app = getApp();
Page({
data: {},
data: {
tableIndex: 0, //0填写 1回显
receiverName: "",
receiverMobile: "",
receiverAddress: "",
region: [],
regionStr: "",
prize: {}
},
onShareAppMessage() {},
onLoad(options) {},
/**
* 提交表单
* @param {*} evt
*/
onSubmitHandler(evt) {
},
onSubmitHandler(evt) {},
/**
* 返回心愿单页面
* @param {*} evt
......@@ -21,6 +26,17 @@ Page({
path: "wish"
})
},
bindRegionChange(e) {
let region = e.detail.value;
let regionStr = "";
if (region.length > 0) {
regionStr = region.join("，");
}
this.setData({
region,
regionStr
})
},
// 子组件事件
evtcomp(evt) {
let {
......
......@@ -163,7 +163,7 @@ $iptHeight:80px;
display: flex;
justify-content: center;
align-items: center;
width: 150px;
width: 140px;
@extend .bb;
padding: 0 20px;
......
......@@ -22,7 +22,7 @@
<view class="table">
<image class="ebg" mode="widthFix" src="../../image/oss/user-table/user-table-c2.png" />
<!-- 编辑框 -->
<view wx:if="{{1>10}}" class="border edit">
<view wx:if="{{tableIndex == 0}}" class="border edit">
<view class="space1"></view>
<view class="tips">*请填写您的邮寄地址，我们将为您送出以上礼品</view>
<view class="form">
......@@ -36,6 +36,7 @@
</view>
<view class="ipt">
<view class="label">区域</view>
<picker class="form-detail-item-label" mode="region" bindchange="bindRegionChange" value="{{region}}">
<view class="input area">
<view class="area-item area-item2">
省
......@@ -52,6 +53,7 @@
<image class="icon" mode="widthFix" src="../../image/oss/icon/icon-drow-down.png" />
</view>
</view>
</picker>
</view>
<view class="ipt ipt2">
<view class="label">地址</view>
......
......@@ -11,10 +11,13 @@ let app = getApp();
Page({
data: {
tipsRuleVisible: false,
tipsPirzeVisible: false,
userInfo: {},
wishInfo: {},
wishList: [],
helperInfo: {}
helperInfo: {},
curWish: {},
status: 1, // 1正常(有库存) 2无库存
},
onShareAppMessage() {},
onLoad(options) {
......@@ -35,11 +38,20 @@ Page({
onGetGiftHandler(evt) {
let curData = getBindtapData(evt);
console.log("curData:", curData);
this.setData({
curWish: curData,
tipsPirzeVisible: true,
})
return;
app.poster({
url: app.api.wishbillGiftAccept,
data: curData
}).then((result) => {
// let curData
this.setData({
curWish: curData,
tipsPirzeVisible: true,
})
});
},
/**
......@@ -121,6 +133,12 @@ Page({
})
});
},
hideMask() {
this.setData({
tipsRuleVisible: false,
tipsPirzeVisible: false,
})
},
// 子组件事件
evtcomp(evt) {
let {
......@@ -130,9 +148,7 @@ Page({
switch (name) {
case "_evt_hide_mask":
this.setData({
tipsRuleVisible: false
})
this.hideMask();
break;
default:
......
......@@ -3,6 +3,7 @@
"usingComponents": {
"authorize-comp": "../../component/authorize-comp/authorize-comp",
"tips-rule-comp": "../../component/tips-rule-comp/tips-rule-comp",
"tips-prize-comp": "../../component/tips-prize-comp/tips-prize-comp",
"van-popup": "../../ui/vant-weapp/popup/index"
}
}
......
......@@ -20,7 +20,7 @@
<view class="number">{{wishInfo.member.mobile}}</view>
<view bindtap="onMyCardHandler" class="mycard">我的卡券</view>
</view>
<!-- jiangp1 -->
<!-- 奖品 -->
<view class="wish">
<view wx:for="{{wishList}}" wx:key="{{index}}" class="wish-item">
<view class="display">
......@@ -88,3 +88,6 @@
<van-popup show="{{ tipsRuleVisible }}">
<tips-rule-comp bind:evtcomp="evtcomp"></tips-rule-comp>
</van-popup>
<van-popup show="{{ tipsPirzeVisible }}">
<tips-prize-comp bind:evtcomp="evtcomp" wish-info="{{curWish}}" status="{{status}}"></tips-prize-comp>
</van-popup>
......