Skip to content

N
nyx
Commit b1816497 by jscat
Options

nyx weapp: 页面更新, 功能更新 

1. 主要添加订单页面的样式及功能
parent 248cb915
正在显示 包含 388 行增加 和 422 行删除
增值产品-小程序及app/nyx-master/app.json
{ {
{ {
"pages": [ "pages": [
"pages/activity/activity", "pages/activity/activity",
"pages/mall/order/order",
"pages/member/activity-post/activity-submit/activity-submit", "pages/member/activity-post/activity-submit/activity-submit",
"pages/activity/activity-list/activity-list", "pages/activity/activity-list/activity-list",
"pages/my/my-members/my-members", "pages/my/my-members/my-members",
"pages/member/activity-post/activity-edit/activity-edit", "pages/member/activity-post/activity-edit/activity-edit",
"pages/member/quiz-post/quiz-edit/quiz-edit", "pages/member/quiz-post/quiz-edit/quiz-edit",
"pages/member/schedule/schedule", "pages/member/schedule/schedule",
"pages/mall/order/order",
"pages/member/activity-post/activity-post", "pages/member/activity-post/activity-post",
"pages/activity/quiz-result/quiz-result", "pages/activity/quiz-result/quiz-result",
"pages/activity/quiz-info/quiz-info", "pages/activity/quiz-info/quiz-info",
......
增值产品-小程序及app/nyx-master/pages/activity/activity-info/activity-info.js
// pages/activity/activity-info/activity-info.js // pages/activity/activity-info/activity-info.js
...@@ -25,6 +25,7 @@ Page({ ...@@ -25,6 +25,7 @@ Page({
curIndex: 0, // 给选中的tab加粗 curIndex: 0, // 给选中的tab加粗
activityInfo: {}, // 活动基础信息 activityInfo: {}, // 活动基础信息
products: [], // 活动类别详情 products: [], // 活动类别详情
products_string : {}, //活动类别详情对应的string, 主要用于navigator传值
//点赞模块 //点赞模块
likeDictUpdate: {}, // 判断当前页面是否存在点赞操作 likeDictUpdate: {}, // 判断当前页面是否存在点赞操作
...@@ -229,7 +230,7 @@ Page({ ...@@ -229,7 +230,7 @@ Page({
//表示HTTP请求成功 //表示HTTP请求成功
console.log(res.data); console.log(res.data);
var products = [] var products = []
var products_string = {}
for (var i = 0; i < res.data.data.length; i++) { for (var i = 0; i < res.data.data.length; i++) {
var result = {} var result = {}
result["product_id"] = res.data.data[i].productId result["product_id"] = res.data.data[i].productId
...@@ -237,7 +238,6 @@ Page({ ...@@ -237,7 +238,6 @@ Page({
result["unit_price"] = res.data.data[i].unitPrice result["unit_price"] = res.data.data[i].unitPrice
result["stock"] = res.data.data[i].stock result["stock"] = res.data.data[i].stock
result["default_status"] = res.data.data[i].defaultStatus result["default_status"] = res.data.data[i].defaultStatus
products.push(result) products.push(result)
} }
_this.setData({ products }) _this.setData({ products })
...@@ -281,20 +281,32 @@ Page({ ...@@ -281,20 +281,32 @@ Page({
//跳转到结算页 order.wxml //跳转到结算页 order.wxml
toBuy: function (e) { toBuy: function (e) {
var _this = this; var _this = this;
var products_string = JSON.stringify(_this.data.products);
var url = "/pages/mall/order/order?" var url = "/pages/mall/order/order?"
+ "&activity_id=" + _this.__data__.activityInfo["activity_id"] + "&activity_id=" + _this.__data__.activityInfo["activity_id"]
+ "&product_id_string=" + "pid_001::pid_002" + "&productsstring=" + products_string
+ "&product_desc_string=" + "会员::普通会员" + "&curIndex=" + _this.data.curIndex
+ "&_unitprice_string=" + "59.00::99.00"
+ "&quantity_string=" + "1::3"
+ "&member_id=" + _this.__data__.activityInfo["member_id"]
+ "&member_name=" + _this.__data__.activityInfo["member_name"]
+ "&title=" + _this.__data__.activityInfo["title"]
wx.navigateTo({ wx.navigateTo({
url: url url: url
}); });
}, },
//跳转到结算页 order.wxml
toOrder: function (e) {
var _this = this;
var products_string = JSON.stringify(_this.data.products);
var url = "/pages/mall/order/order?"
+ "&activity_id=" + _this.__data__.activityInfo["activity_id"]
+ "&products_string=" + products_string
+ "&product_image=" + _this.__data__.activityInfo['note_image']
+ "&member_name=" + _this.__data__.activityInfo['member_name']
+ "&title=" + _this.__data__.activityInfo['title']
+ "&curIndex=" + _this.data.curIndex
wx.navigateTo({
url: url
});
},
//跳转到首页 //跳转到首页
toHome: function (e) { toHome: function (e) {
wx.switchTab({ wx.switchTab({
......
增值产品-小程序及app/nyx-master/pages/activity/activity-info/activity-info.wxml
<wxs module="tutil" src="./../../../utils/date.wxs"></wxs> <wxs module="tutil" src="./../../../utils/date.wxs"></wxs>
...@@ -99,6 +99,12 @@ ...@@ -99,6 +99,12 @@
<button class="button-red" bindtap="toBuy">立即购买</button> <button class="button-red" bindtap="toBuy">立即购买</button>
</view> </view>
</view> --> </view> -->
<!-- toOrder 仅仅是先预定 -->
<view class="weui-tabbar__item">
<view style="position: relative;display:inline-block;">
<button class="button-red" bindtap="toOrder">立即预定</button>
</view>
</view>
</view> </view>
</view> </view>
<!-- end bottom--> <!-- end bottom-->
......
增值产品-小程序及app/nyx-master/pages/activity/activity-info/activity-info.wxss
.scroll-view_H{ .scroll-view_H{
...@@ -126,6 +126,7 @@ ...@@ -126,6 +126,7 @@
height: 160rpx; height: 160rpx;
line-height: 10rpx; line-height: 10rpx;
} }
.bottom_total { .bottom_total {
position: fixed; position: fixed;
display: flex; display: flex;
...@@ -138,6 +139,7 @@ ...@@ -138,6 +139,7 @@
} }
.button-red { .button-red {
background-color: #f44336; /* 红色 */ background-color: #f44336; /* 红色 */
font-size: 14px;
} }
.button-brown { .button-brown {
background-color: #D1A96E; /* 红色 */ background-color: #D1A96E; /* 红色 */
......
增值产品-小程序及app/nyx-master/pages/mall/order/order.js
// pages/mall/order/order.js // pages/my/my-orders/my-orders.js
// pages/mall/order/order.js // pages/my/my-orders/my-orders.js
var config = wx.getStorageSync("config"); var config = wx.getStorageSync("config");
var app = getApp(); var app = getApp();
...@@ -12,107 +12,16 @@ Page({ ...@@ -12,107 +12,16 @@ Page({
nyxCode: "", nyxCode: "",
authStatus: "", authStatus: "",
userInfo: {}, userInfo: {},
members : [],
//活动列表 //活动列表
orders : [], orderInfo : {}, // 活动信息
//活动信息 orderItems: [], // 子活动列表
orderInfo_2 : {
member_name : "Renaissance Bar",
title : "酒市集",
total_price : 149.00,
order_id : "oid_000_2",
order_status : "交易成功",
product_image : "https://930-test-sh.oss-cn-shanghai.aliyuncs.com/user-dir/sakura.jpg",
order_qrcode : "https://930-test-sh.oss-cn-shanghai.aliyuncs.com/qrcode-dir/mid_11235813.png",
item_height : 80 + 20 + 120*2 + 30*3, // basic + margin-bottom(20rpx) + item(n) + margin(n+1)
order_item :[
{
product_desc :"会员",
unit_price : "59.00",
quantity : 1,
},
{
product_desc :"普通用户",
unit_price : "99.00",
quantity : 1,
}
]
},
orderInfo_1 : {
member_name : "Renaissance Bar",
title : "酒市集",
total_price : 149.00,
order_id : "oid_000_1",
order_status : "交易成功",
product_image : "https://930-test-sh.oss-cn-shanghai.aliyuncs.com/user-dir/sakura.jpg",
order_qrcode : "https://930-test-sh.oss-cn-shanghai.aliyuncs.com/qrcode-dir/mid_11235813.png",
item_height : 80 + 20 + 120 + 30*2, // 控制item的高度
order_item :[
{
product_desc :"普通用户",
unit_price : "99.00",
quantity : 1,
}
]
},
orderInfo_3 : {
member_name : "Renaissance Bar",
title : "酒市集",
total_price : 149.00,
order_id : "oid_000_3",
order_status : "交易成功",
product_image : "https://930-test-sh.oss-cn-shanghai.aliyuncs.com/user-dir/sakura.jpg",
// 130: title(36.4)+total_price(25.6)
// 20: 增加20冗余
// 120: 每个order_item
// 30: 每个order_item的margin
item_height : 80 + 20 + 120*3 + 30*4, // 控制item的高度
order_item :[
{
product_desc :"普通用户",
unit_price : "99.00",
quantity : 1,
},
{
product_desc :"普通用户",
unit_price : "99.00",
quantity : 2,
},
{
product_desc :"普通用户",
unit_price : "99.00",
quantity : 3,
},
] /* 数量加减 */
num: 0,
}, curIndex: 0,
// {
// rankId : "rid_001",
// defaultType : "1",
// matchType : "竞答",
// title : "泥煤怪兽",
// rank : "1",
// score : "200",
// ratio : "96%",
// },
isHideLoadMore: false,
/* 模态框 */
showModalPoints: false,
showModalBarcode : false,
/* 订单 可使用/不可用状态 */
selectTab : true,
matchStatus : "",
//order栏的高度
orderHeight : "",
}, },
...@@ -121,36 +30,50 @@ Page({ ...@@ -121,36 +30,50 @@ Page({
*/ */
onLoad: function (options) { onLoad: function (options) {
var _this = this; var _this = this;
wx.setNavigationBarTitle({ wx.setNavigationBarTitle({
title: '订单结算', title: '订单结算',
}) })
//初始化数据 //step1: 初始化数据
if (wx.getStorageSync('nyxCode')) { if (wx.getStorageSync('nyxCode')) {
_this.setData({ _this.setData({
nyxCode: wx.getStorageSync('nyxCode'), nyxCode: wx.getStorageSync('nyxCode'),
userInfo: wx.getStorageSync('userInfo'), userInfo: wx.getStorageSync('userInfo'),
authStatus: wx.getStorageSync('authStatus'), authStatus: wx.getStorageSync('authStatus'),
members: wx.getStorageSync('members'),
}) })
} }
//初始载入四个积分 //step2: 获取上一页面传入的数据
if(_this.__data__.orders.length == 0) var orderInfo = _this.__data__.orderInfo || {}
var orderItems = []
var curIndex = 0
if (Object.keys(orderInfo).length==0 && options.title != "")
{ {
//getPoints(scrollType, pageNum, pageCount, matchStatus) orderInfo['activity_id'] = options.activity_id;
//onLoad的时候展示可使用的积分 orderInfo['product_image'] = options.product_image
var orders = [] orderInfo['member_name'] = options.member_name
orders.push(_this.__data__.orderInfo_2) orderInfo['title'] = options.title
orders.push(_this.__data__.orderInfo_3) curIndex = options.curIndex
orders.push(_this.__data__.orderInfo_1) orderItems = JSON.parse(options.products_string)
orderInfo['item_height'] = 100 + 120*(orderItems.length) + 30 * (orderItems.length+1)
for(var i=0; i<orderItems.length; i++)
{
if(curIndex == i)
(
orderItems[i]['quantity'] = 1
)
else
{
orderItems[i]['quantity'] = 0
}
}
}
_this.setData({ orderInfo })
_this.setData({ orderItems })
_this.setData({ curIndex })
//_this.getPoints(0, 1, 4, matchStatus);
_this.setData({
orders : orders,
})
}
}, },
...@@ -204,24 +127,13 @@ Page({ ...@@ -204,24 +127,13 @@ Page({
// 用户自定义函数 // 用户自定义函数
/* /*
*/ */
/* 点击好友助力 */
onClickPoints: function(e){
var _this = this;
var indexId = e.currentTarget.dataset.id
var match_id = _this.__data__.points[indexId].match_id
_this.getBonus(match_id)
    _this.setData({
      showModalPoints: true
    })
},
/* 点击barcode */ /* 点击barcode */
onClickBarcode: function(e){ onClickBarcode: function(e){
var _this = this; var _this = this;
//指明具体是list的哪一个item //指明具体是list的哪一个item
var indexId = e.currentTarget.dataset.id var indexId = e.currentTarget.dataset.id
var qrcode_url = _this.__data__.points[indexId].qrcode_url var qrcode_url = _this.__data__.orders[indexId].order_qrcode
var qrcode = _this.__data__.points[indexId].match_id var qrcode = _this.__data__.orders[indexId].order_id
    this.setData({     this.setData({
      showModalBarcode : true,       showModalBarcode : true,
qrcode : qrcode, qrcode : qrcode,
...@@ -243,10 +155,12 @@ Page({ ...@@ -243,10 +155,12 @@ Page({
*/ */
tab: function(e) { tab: function(e) {
var _this = this; var _this = this;
var pageIndex = _this.__data__.pageIndex
//js的e.currentTarget.id 对应wxml的 id="tab0" //js的e.currentTarget.id 对应wxml的 id="tab0"
//js的e.currentTarget.dataSet.id 对应wxml的 data-id="tab0" //js的e.currentTarget.dataSet.id 对应wxml的 data-id="tab0"
var id = e.currentTarget.id; var id = e.currentTarget.id;
var dataId = e.currentTarget.dataset.id var dataId = e.currentTarget.dataset.id
_this.getOrders(0, 1, 4, dataId);
_this.setData({ _this.setData({
selectTab: dataId, selectTab: dataId,
}) })
...@@ -258,88 +172,40 @@ Page({ ...@@ -258,88 +172,40 @@ Page({
* 用户自定义函数 * 用户自定义函数
* *
*/ */
// 获取points数据 /* 加数 */
// scrollType: 是否是翻页, 0-不翻页 | 1-翻页 addCount: function (e) {
getPoints: function (scrollType, pageNum, pageCount, memberStatus) { console.log("刚刚您点击了加1");
var _this = this; var orderItems = this.data.orderItems;
var query_url = '&matchStatus='+memberStatus //js的e.currentTarget.id 对应wxml的 id="tab0"
var strUrl = config.match_query_url + "?pageCount=" + pageCount //js的e.currentTarget.dataSet.id 对应wxml的 data-id="tab0"
+ "&pageNum=" + pageNum + query_url var index = e.currentTarget.dataset.index
config.debug == 1 ? console.log("===strUrl is: \"" + strUrl + "\"") : ""
wx.request({
url: strUrl,
method: 'GET',
header: {
'Cookie': wx.getStorageSync('cookieKey'),
},
success: function (res) {
if (res.data.resultCode == 200) {
//表示HTTP请求成功
console.log(res.data);
var list = []
var bisHideLoadMoreType = false;
if (res.data.data.length < pageCount) {
bisHideLoadMoreType = true;
}
for (var i = 0; i < res.data.data.length; i++) {
var result = {}
result["total_point"] = res.data.data[i].totalPoint
result["member_name"] = res.data.data[i].memberName
result["bonus_count"] = res.data.data[i].bonusCount
result["bonus_point"] = res.data.data[i].bonusPoint
result["match_id"] = res.data.data[i].matchId
result["qrcode_url"] = res.data.data[i].qrcodeUrl
list.push(result)
}
//进行翻页设置（加载更多）
if (scrollType == 1) {
var pointsList = _this.__data__.points;
list = pointsList.concat(list)
}
_this.setData({
points: list,
pageIndex: pageNum + 1,
isHideLoadMore: bisHideLoadMoreType,
})
}
}
})
},
// 获取bonus points数据
getBonus: function (matchId) {
var _this = this;
var query_url = '?matchId='+matchId
var strUrl = config.bonus_query_url + query_url
config.debug == 1 ? console.log("===strUrl is: \"" + strUrl + "\"") : ""
wx.request({
url: strUrl,
method: 'GET',
header: {
'Cookie': wx.getStorageSync('cookieKey'),
},
success: function (res) {
if (res.data.resultCode == 200) {
//表示HTTP请求成功
console.log(res.data);
var list = []
for (var i = 0; i < res.data.data.length; i++) { // 总数量+1
var result = {} if (orderItems[index]['quantity'] < 1000) {
result["match_id"] = res.data.data[i].matchId orderItems[index]['quantity']++;
result["user_name"] = res.data.data[i].userName }
result["bonus_point"] = res.data.data[i].bonusPoint // 将数值与状态写回
list.push(result) this.setData({
} orderItems
});
},
/* 减数 */
delCount: function (e) {
console.log("刚刚您点击了减1");
var orderItems = this.data.orderItems;
//js的e.currentTarget.id 对应wxml的 id="tab0"
//js的e.currentTarget.dataSet.id 对应wxml的 data-id="tab0"
var index = e.currentTarget.dataset.index
_this.setData({ // 商品总数量-1
bonus_info: list, if (orderItems[index]['quantity'] > 0) {
}) orderItems[index]['quantity']--;
} }
} // 将数值与状态写回
}) this.setData({
orderItems
});
}, },
// 跳转到支付页面 // 跳转到支付页面
...@@ -352,4 +218,5 @@ Page({ ...@@ -352,4 +218,5 @@ Page({
}); });
}, },
}) })
\ No newline at end of file
增值产品-小程序及app/nyx-master/pages/mall/order/order.wxml
<view class="page"> <view class="page">
<view class="page"> <view class="page">
<!-- Tab: refer to 京东|有品 --> <!-- Content: refer to 有品·优惠券 + 点评(可使用) -->
<view class="weui-flex" style="height:120rpx;margin: 20rpx; width:710rpx;background:#fff"> <view class="coupon-list">
<view class="weui-flex__item weui-flex justify align" data-id="20" id="id-20" bindtap="tab"> <view class="item stamp stamp01" style="height:{{orderInfo.item_height}}rpx;">
<view class="note-info">
<view class="note-title">
<view class="title-left">李小五 137xxxx1111</view>
</view>
</view>
</view>
</view>
<!-- Content: refer to 京东; 因为有品member_name全是'有品精选' -->
<view class="coupon-list" wx:for="{{orders}}" wx:for-item="item" wx:key="{{index}}">
<view class="item stamp stamp01" style="height:{{item.item_height}}rpx;">
<!-- 商家信息 --> <!-- 商家信息 -->
<view class="note-info"> <checkbox-group class="check-group" bindchange="radioChange">
<view class="note-title">
<view class="title-left">{{item.member_name}}</view> <view class="note-row align">
</view> <checkbox class="wx-checkbox-input wx-checkbox-input-checked">
</checkbox>
<view class="note-info">
<view class="note-member" style="font-weight: bold">
<view class="member-left">{{orderInfo.member_name}}</view>
</view>
</view>
</view> </view>
<!-- 商品信息 --> <!-- 商品信息 -->
<block wx:for="{{item.order_item}}" wx:for-item="sub_item" wx:key="{{index}}">
<view class="note-row"> <block wx:for="{{orderItems}}" wx:for-item="sub_item" wx:key="{{index}}">
<image class="writer-image" src="{{item.product_image}}"/> <view class="note-row align">
<checkbox class="wx-checkbox-input wx-checkbox-input-checked" data-id="{{index}}" checked="{{sub_item.quantity>0?true:false}}" />
<image class="writer-image" src="{{orderInfo.product_image}}"/>
<view class="note-column"> <view class="note-column">
<span>{{sub_item.product_desc}}</span> <span>{{sub_item.product_desc}}</span>
<span>{{sub_item.unit_price}} x{{sub_item.quantity}}</span> <span>
</view> <view class="price-row">
<view class="sub-price">￥{{sub_item.unit_price}}</view>
<!-- start 数量加减 -->
<view class="stepper">
<!-- 减号 -->
<text class="sign {{sub_item.quantity <= 0 ? 'disabled' : 'normal'}}" bindtap="delCount" data-index="{{index}}">-</text>
<!-- 数值 -->
<input class="number" type="number" bindchange="bindManual" value="{{sub_item.quantity}}" disabled="disabled"/>
<!-- 加号 -->
<text class="sign {{sub_item.quantity >= 100 ? 'disabled' : 'normal'}}" bindtap="addCount" data-index="{{index}}">+</text>
</view>
<!-- end 数量加减 -->
</view>
</span>
</view>
</view> </view>
</block> </block>
</checkbox-group>
</view> </view>
</view> </view>
<view class='placeholder-view'></view>
<!-- start bottom--> <!-- start bottom-->
<!-- refer to https://www.jb51.net/article/129438.htm --> <!-- refer to https://www.jb51.net/article/129438.htm -->
<view class="bottom_total"> <view class="page__bd">
<view class="bottom_line"></view> <view class="weui-tabbar">
<view style="display:flex; flex-direction: row; align-items:center; vertical-align:middle;">
<view class="weui-flex" style="height: 180rpx;"> <checkbox-group class="check-group" bindchange="radioChange" style="margin-top:-8rpx">
<view class="weui-flex__item weui-flex align justify-left"><view class="placeholder"> <checkbox class="wx-checkbox-input wx-checkbox-input-checked" >
<text class="total-price">￥1231.00</text> </checkbox>
</view></view> </checkbox-group>
<view class="weui-flex__item weui-flex justify align"><view class="placeholder"> <text style="font-size:30rpx;margin-left:10rpx;">全选</text>
<button class="button-red" bindtap="toPay">去支付</button> </view>
</view></view>
</view>
</view>
<!-- end bottom-->
<!-- 查看好友助力--> <!-- todo toBuy 因为现在还没跟商家谈妥 -->
<!-- 微信小程序自定义弹框 https://blog.csdn.net/qq_39702981/article/details/85104827 --> <!-- <view class="weui-tabbar__item">
<!-- 微信小程序自定义弹框 https://blog.csdn.net/qq_39702981/article/details/85320926 --> <view style="position: relative;display:inline-block;">
<!-- start 遮罩层 --> <button class="button-red" bindtap="toBuy">立即购买</button>
<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModalPoints}}"></view> </view>
<!-- 弹出层 --> </view> -->
<view class="modalDlg" wx:if="{{showModalPoints}}"> <!-- toOrder 仅仅是先预定 -->
<!-- 二维码或其他图片 --> <view class="weui-tabbar__item">
<view class="title"> <view class="note-row align" style="margin-bottom:0; justify-content: flex-end">
<text style="color:#666666">助力清单</text> <view style="font-size:30rpx;margin-right:20rpx;color:#000">合计:
</view> <text style="color:#FF6600">￥21341223.00</text>
<view class="title-close" bindtap="ok"> </view>
<image src="../../../icon/close.png"></image> <view style="width:200rpx">
</view> <button class="button-red" bindtap="toOrder">确定(2)</button>
</view>
<view class="list-point"> </view>
<view class="text" wx:for="{{bonus_info}}" wx:for-item="item" wx:key="{{index}}" >
{{item.user_name}}助力{{item.bonus_point}}积分
</view> </view>
</view> </view>
</view> </view>
<!-- end 遮罩层 --> <!-- end bottom-->
<!-- 查看优惠券码-->
<!-- 微信小程序自定义弹框 https://blog.csdn.net/qq_39702981/article/details/85104827 -->
<!-- 微信小程序自定义弹框 https://blog.csdn.net/qq_39702981/article/details/85320926 -->
<!-- start 遮罩层 -->
<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModalBarcode}}"></view>
<!-- 弹出层 -->
<view class="modalDlg" wx:if="{{showModalBarcode}}">
<!-- 二维码或其他图片 -->
<view class="title">
<text style="color:#666666">请扫描以下券码验券 </text>
</view>
<view class="title-right" bindtap="ok">
<image src="../../../icon/close.png"></image>
</view>
<view class="list-barcode">
<view class="text">券码：{{qrcode}}</view>
<image src="{{qrcode_url}}"></image>
</view>
<view class="list-barcode-image">
</view>
</view>
<!-- end 遮罩层 -->
</view> </view>
\ No newline at end of file
增值产品-小程序及app/nyx-master/pages/mall/order/order.wxss
.page{ .page{
.page{ .page{
height: 100vh; /* height: 100vh; */
background: #F2F2F2; background: #F2F2F2;
} }
.placeholder{
margin: 0px;
text-align: center;
vertical-align: middle;
line-height: 2.3em;
color: rgba(0,0,0);
}
/* justify-content: center;(水平居中) align-items: center;(垂直居中) */
.justify{
justify-content: center;
}
.align{
align-items: center;
}
.border{
border: 3rpx solid #ccc;
border-radius: 0rpx;
padding: 10rpx;
}
.text{
font-size: 34rpx;
}
.selected{ .selected{
color: #ff0000; color: #ff0000;
} }
/* coupon css */ /* coupon css */
.coupon-list{width: 710rpx; margin: 0rpx auto; } .coupon-list{width: 100%; margin: 0 auto}
.coupon-list .item{width: 710rpx; height: 340rpx; margin-bottom: 20rpx;} .coupon-list .item{width: 100%; height: 340rpx; margin-bottom: 20rpx;}
.coupon-list .item .float-li{width: 710rpx; height: 100%; border-right: 2rpx dashed rgba(255,255,255,.3)} .coupon-list .item .float-li{width: 100%; height: 100%; border-right: 2rpx dashed rgba(255,255,255,.3)}
.coupon-list .item .float-li-right{width: 220rpx; padding-right: 20rpx; height:100%; color: #fff} .coupon-list .item .float-li-right{width: 220rpx; padding-right: 20rpx; height:100%; color: #fff}
.coupon-left{position: relative} .coupon-left{position: relative}
.coupon-left .t{position: absolute; color: #fff} .coupon-left .t{position: absolute; color: #fff}
.coupon-left .t1{width: 710rpx; display: flex; margin-left: 20rpx; margin-top: 20rpx; height: 160rpx; color: #fff} .coupon-left .t1{width: 100%; display: flex; margin-left: 20rpx; margin-top: 20rpx; height: 160rpx; color: #fff}
.coupon-left .t1-left{width: 160rpx; font-size: 70rpx; font-weight: bold} .coupon-left .t1-left{width: 160rpx; font-size: 70rpx;}
.coupon-left .t1-right{width: 520rpx; font-size: 50rpx; } .coupon-left .t1-right{width: 520rpx; font-size: 50rpx; }
/* .coupon-left .t2{left: 20rpx; top:160rpx} */ /* .coupon-left .t2{left: 20rpx; top:160rpx} */
.coupon-left .t2{width: 710rpx; display: flex; margin-left: 20rpx; margin-top: 0rpx; height: 50rpx; color: #fff} .coupon-left .t2{width: 100%; display: flex; margin-left: 20rpx; margin-top: 0rpx; height: 50rpx; color: #fff}
.coupon-left .t2-left{width: 520rpx; } .coupon-left .t2-left{width: 520rpx; }
.coupon-left .t2-right{width: 160rpx;} .coupon-left .t2-right{width: 160rpx;}
.coupon-left .t3{width: 710rpx; display: flex; margin-left: 20rpx; margin-top: 0rpx; height: 50rpx; color: #fff} .coupon-left .t3{width: 100%; display: flex; margin-left: 20rpx; margin-top: 0rpx; height: 50rpx; color: #fff}
.coupon-left .t3-left{width: 520rpx; } .coupon-left .t3-left{width: 520rpx; }
.coupon-left .t3-right{width: 160rpx;} .coupon-left .t3-right{width: 160rpx;}
.coupon-left .t3-right image{ .coupon-left .t3-right image{
...@@ -33,7 +55,7 @@ ...@@ -33,7 +55,7 @@
height: 40rpx; height: 40rpx;
font-size: 0; font-size: 0;
} }
.coupon-left .t4{width: 710rpx; display: flex; margin-left: 20rpx; margin-top: 0rpx; height: 50rpx; color: #fff} .coupon-left .t4{width: 100%; display: flex; margin-left: 20rpx; margin-top: 0rpx; height: 50rpx; color: #fff}
.coupon-left .t4-left{width: 520rpx; } .coupon-left .t4-left{width: 520rpx; }
.coupon-left .t4-right{width: 160rpx;} .coupon-left .t4-right{width: 160rpx;}
.coupon-left .t4-right image{ .coupon-left .t4-right image{
...@@ -49,8 +71,8 @@ ...@@ -49,8 +71,8 @@
.note{background: #faeab7} .note{background: #faeab7}
.stamp{width:700rpx; height: 250rpx;margin-bottom:50rpx;position:relative;overflow:hidden} .stamp{width:100%; height: 250rpx;margin-bottom:50rpx;position:relative;overflow:hidden}
.stamp i{position: absolute;left: 20%;top: 90rpx;height: 500rpx;width: 700rpx;background-color: rgba(255,255,255,.15);transform: rotate(-30deg); .stamp i{position: absolute;left: 20%;top: 90rpx;height: 500rpx;width: 100%;background-color: rgba(255,255,255,.15);transform: rotate(-30deg);
} }
.stamp01{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 30rpx, #F39B00 30rpx);background-size:10rpx 10rpx;background-position:9rpx 3rpx; background: #FFFFFF} .stamp01{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 30rpx, #F39B00 30rpx);background-size:10rpx 10rpx;background-position:9rpx 3rpx; background: #FFFFFF}
...@@ -102,7 +124,7 @@ ...@@ -102,7 +124,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.title-close{ .title-right{
display: flex; display: flex;
height: 80rpx; height: 80rpx;
position: absolute; position: absolute;
...@@ -188,6 +210,32 @@ ...@@ -188,6 +210,32 @@
} }
/* end - 小程序自定义弹框css */ /* end - 小程序自定义弹框css */
/* start 加载更多 */
.weui-loading {
margin: 0 5px;
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
-webkit-animation: weuiLoading 1s steps(12, end) infinite;
animation: weuiLoading 1s steps(12, end) infinite;
background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
background-size: 100%;
}
.weui-loadmore {
width: 65%;
margin: 1.5em auto;
line-height: 1.6em;
font-size: 14px;
text-align: center;
}
.weui-loadmore__tips {
display: inline-block;
vertical-align: middle;
}
/* end 加载更多*/
.note-info{ .note-info{
width: 100%; width: 100%;
/* position: fixed; */ /* position: fixed; */
...@@ -197,34 +245,41 @@ ...@@ -197,34 +245,41 @@
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.note-title{ .note-member{
width : 100%;
display: flex; display: flex;
font-size: 32rpx; font-size: 32rpx;
margin-left: 5%; margin-left: 20rpx;
margin-right: 5%; margin-right: 5%;
margin-top: 0; margin-top: 0;
text-align:justify; text-align:justify;
vertical-align: center; vertical-align: center;
} }
.note-title .title-left{width: 60%; font-size: 36rpx;} .note-member .member-left{width: 520rpx; flex:1}
.note-title .title-right{width: 40%;} .note-member .member-right{width: 160rpx;justify-content: flex-end;display: flex;}
.note-title .title-right image{ .note-member .member-right image{
width: 60rpx; width: 60rpx;
height: 60rpx; height: 60rpx;
font-size: 0; font-size: 0;
} }
.note-price{ /* 左边: 总价 */
color: #FF6600; .note-price-left{
color: #000;
font-size: 16px; font-size: 16px;
margin-left: 5%; margin-left: 5%;
margin-right: 5%; width: 120rpx;
}
/* 右边: 具体价格 */
.note-price-right{
color: #000;
font-size: 16px;
margin-top: 0; margin-top: 0;
text-align:justify; font-weight: bold;
} }
.note-content{ .note-content{
font-size: 16px; font-size: 16px;
...@@ -244,123 +299,164 @@ ...@@ -244,123 +299,164 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-bottom: 30rpx; margin-bottom: 30rpx;
margin-top: 30rpx; /* margin-top: 30rpx; */
} }
.note-column{ .note-column{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-left: 30rpx; margin-left: 20rpx;
margin-right: 5%;
width: 500rpx;
} }
.writer-image{ .writer-image{
width: 120rpx; width: 120rpx;
height: 120rpx; height: 120rpx;
margin-left: 10%; margin-left: 20rpx;
} }
/* start bottom style */ .price-row{
.column {
display: flex;
flex-direction: column;
}
.row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
.bottom_line {
.sub-price{
color: #FF6600;
font-size: 16px;
margin-right: 5%;
margin-top: 0;
text-align:justify;
flex: 1;
}
.sub-quantity{
display: flex;
font-size: 16px;
justify-content: flex-end;
}
.bottom_line {
width: 100%; width: 100%;
height: 2rpx; height: 2rpx;
background: lightgray; background: lightgray;
}
.bottom_placeholder {
position: relative;
width: 100%;
height: 160rpx;
line-height: 10rpx;
} }
.bottom_total {
.bottom_total {
position: fixed; position: fixed;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 180rpx;
line-height: 10rpx; line-height: 10rpx;
background: white; background: white;
} }
.button-red { .button-red {
background-color: #f44336; /* 红色 */ background-color: #f44336; /* 红色 */
} font-size: 14px;
.button-brown { }
.button-brown {
background-color: #D1A96E; /* 红色 */ background-color: #D1A96E; /* 红色 */
} }
button { button {
color: white; color: white;
text-align: center; text-align: center;
font-size: 40rpx; font-size:32rpx;
height: 2.6em; height: 2.6em;
line-height: 2.6em; line-height: 2.6em;
}
.placeholder{
margin-left: 20rpx;
margin-right: 20rpx;
text-align: center;
/* vertical-align: middle; */
padding: 0 10px;
line-height: 2.3em;
color: rgba(0,0,0);
}
/* justify-content: center;(水平居中) align-items: center;(垂直居中) */
.justify{
justify-content: center;
}
.align{
align-items: center;
}
.justify-left{
justify-content: left;
} }
.list .items{
display: flex; .weui-tabbar{
flex-direction: column; position:fixed;
text-align: center; bottom:0;
align-items: center; left:0;
} right:0;
.items image{ }
width: 80rpx;
height: 80rpx; /* 分享按钮 */
margin-top: 20rpx; .share {
font-size: 0; position: absolute;
} background-size: 50rpx 50rpx;
.items text{ opacity: 0;
/* display: block; */ border:none;
text-align: center; }
margin-top: 0rpx;
margin-bottom: 20rpx; /*checkbox 选项框大小 */
padding: 0rpx; checkbox .wx-checkbox-input{
font-size: 28rpx; border-radius: 50%; /* 圆角 */
} width: 30rpx; /* 背景的宽 */
height: 30rpx; /* 背景的高 */
}
.list{ /* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
display: flex; checkbox .wx-checkbox-input.wx-checkbox-input-checked {
flex-direction: row; background: #f44336;
justify-content: space-between;
margin-left: 30rpx;
margin-right: 30rpx;
margin-top: 20rpx;
} }
/* end bottom style */
/* 占位view */ /* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
.placeholder-view { checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
margin: 20rpx; border-radius: 50%; /* 圆角 */
width:710rpx; width: 30rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
height: 180rpx; height: 30rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
background: #F2F2F2; line-height: 30rpx;
} text-align: center;
font-size:20rpx; /* 对勾大小 30rpx */
color:#fff; /* 对勾颜色 白色 */
background: transparent;
transform:translate(-50%, -50%) scale(1);
-webkit-transform:translate(-50%, -50%) scale(1);
}
.total-price{ .check-group{
color: #FF6600; margin-left: 20rpx;
font-size: 48rpx;
margin-left: 0;
margin-right: 5%;
margin-top: 0;
} }
/* start of 数量加减 */
.stepper {
width:80px;
height: 22px;
/*给主容器设一个边框*/
border: 1rpx solid #818284;
border-radius: 3px;
/* margin:20px auto; */
background: white;
}
/*加号和减号*/
.stepper .sign {
width: 20px;
line-height: 20px;
text-align: center;
float: left;
}
/*数值*/
.stepper .number {
width: 36px;
height: 20px;
float: left;
margin: 0 auto;
text-align: center;
font-size: 14px;
color: #000;
/*给中间的input设置左右边框即可*/
border-left: 1rpx solid #818284;
border-right: 1rpx solid #818284;
}
/*普通样式*/
.stepper .normal{
color: black;
}
/*禁用样式*/
.stepper .disabled{
color: #ccc;
}
/* end of 数量加减 */
\ No newline at end of file
增值产品-小程序及app/nyx-master/pages/my/my-orders/my-orders.wxml
<view class="page"> <view class="page">
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
</view></view> </view></view>
<view class="weui-flex__item weui-flex justify align border" data-id="10" id="id-10" bindtap="tab"> <view class="weui-flex__item weui-flex justify align border" data-id="10" id="id-10" bindtap="tab">
<view class="placeholder"> <view class="placeholder">
<text class="text {{selectTab=='10'?'selected':''}}">代付款</text> <text class="text {{selectTab=='10'?'selected':''}}">待付款</text>
</view></view> </view></view>
<view class="weui-flex__item weui-flex justify align border" data-id="00::30" id="id-00::30" bindtap="tab"> <view class="weui-flex__item weui-flex justify align border" data-id="00::30" id="id-00::30" bindtap="tab">
<view class="placeholder"> <view class="placeholder">
......
增值产品-小程序及app/nyx-master/pages/my/my.wxml
<view class="page"> <view class="page">
...@@ -32,13 +32,13 @@ ...@@ -32,13 +32,13 @@
<view class="weui-cell__ft weui-cell__ft_in-access"></view> <view class="weui-cell__ft weui-cell__ft_in-access"></view>
</navigator> --> </navigator> -->
<!-- jscat 20200828 与商家商谈之后再考虑 --> <!-- jscat 20200828 与商家商谈之后再考虑 -->
<!-- <navigator class="weui-cell weui-cell_access" hover-class="weui-cell_active" url="/pages/my/my-orders/my-orders"> <navigator class="weui-cell weui-cell_access" hover-class="weui-cell_active" url="/pages/my/my-orders/my-orders">
<view class="weui-cell__hd"> <view class="weui-cell__hd">
<image src="/icon/my/activity.png" /> <image src="/icon/my/activity.png" />
</view> </view>
<view class="weui-cell__bd">我的活动</view> <view class="weui-cell__bd">我的活动</view>
<view class="weui-cell__ft weui-cell__ft_in-access"></view> <view class="weui-cell__ft weui-cell__ft_in-access"></view>
</navigator> --> </navigator>
<navigator class="weui-cell weui-cell_access" hover-class="weui-cell_active" url="/pages/my/my-collects/my-collects"> <navigator class="weui-cell weui-cell_access" hover-class="weui-cell_active" url="/pages/my/my-collects/my-collects">
<view class="weui-cell__hd"> <view class="weui-cell__hd">
<image src="/icon/my/fav.png" /> <image src="/icon/my/fav.png" />
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论