miniprogram / shengxianmini · 提交

转到一个项目

作者 suhang
提交 4ab97f6c6d375682497d22c1be03238964b1f269 0 个父辈

生鲜

内嵌 并排对比
正在显示 62 个修改的文件 包含 4352 行增加 和 0 行删除

要显示太多修改。
重新载入完整差异 差异文件 邮件补丁

为保证性能只显示 62 of 62+ 个文件。

//app.js
App({
onLaunch: function () {
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
// 获取用户信息
// 添加显示条数
// wx.setTabBarItem({
// index: 4,
// text: '1',
// // iconPath: 'images/index1.png',
// // selectedIconPath: 'images/index1.png'
// })
},
changeToken() {
let url = '/api/user/codeToToken',
t = this;
wx.login({
success: function (res) {
t.post(url, {
code: res.code
}).then((r) => {
wx.setStorageSync('token', r.userInfo.token)
})
}
})
},
// post: function (url, data,requestHeader ) {
// let app = this;
// /**
// * 自定义post函数，返回Promise
// * +-------------------
// * @param {String} url 接口网址
// * @param {arrayObject} data 要传的数组对象 like: {name: 'name', age: 32}
// * +-------------------
// * @return {Promise} promise 返回promise供后续操作
// */
// wx.showLoading({
// title: '加载中',
// })
// wx.showNavigationBarLoading()
// var promise = new Promise((resolve, reject) => {
// //init
// let that = this,
// token = wx.getStorageSync('token'),
// header = requestHeader?
// {
// 'content-type': 'application/x-www-form-urlencoded',
// 'XX-Device-Type':'wxapp',
// }: {
// 'content-type': 'application/x-www-form-urlencoded',
// 'XX-Device-Type': 'wxapp',
// ' XX-Token': token
// };
// //网络请求
// wx.request({
// url: this.globalData.baseUrl + url,
// data: data,
// method: 'POST',
// header: header,
// success: function (res) { //返回取得的数据
// if (res.data.code == '1') {
// resolve(res.data.data);
// } else if (res.data.code == '201') {
// resolve(res.data);
// } else if (res.data.code == '401') {
// wx.showToast({
// title: res.data.msg,
// icon: 'none',
// })
// setTimeout(() => {
// wx.navigateTo({
// url: '/pages/register/register',
// })
// }, 1200)
// } else {
// wx.showToast({
// title: res.data.msg,
// icon: 'none',
// })
// reject(res.data)
// if (res.data.code == '401') {
// if (!app.globalData.register) {
// // setTimeout(() => {
// wx.navigateTo({
// url: '/pages/register/register',
// })
// // }, 1200)
// }
// }
// }
// wx.hideLoading() ;
// wx.hideNavigationBarLoading()
// },
// fail: function (e) {
// reject('网络出错');
// wx.hideLoading() ;
// wx.hideNavigationBarLoading()
// }
// })
// });
// return promise;
// },
post: function (url, data, headerParams, showLoad) {
wx.showNavigationBarLoading()
var promise = new Promise((resolve, reject) => {
//init
let that = this;
let postData = data;
let baseUrl = 'http://www.himrhi.com/api';
//网络请求
let header = {
'XX-Device-Type': 'wxapp',
'XX-Token': wx.getStorageSync("token") || ''
}
header = Object.assign(header, headerParams)
//网络请求
wx.request({
url: baseUrl + url,
data: postData,
method: 'POST',
header: header,
success: function (res) { //返回取得的数据
if (res.statusCode == '200') {
resolve(res.data.data);
} else if (res.statusCode == '201') {
resolve(res.data);
} else {
reject(res)
}
// else if (res.data.code == '42002') {
// }
// setTimeout(function () {
// wx.hideNavigationBarLoading()
// }, 600)
},
fail: function (e) {
reject('网络出错');
// wx.hideLoading()
wx.hideNavigationBarLoading()
},
complete: function () {
wx.hideNavigationBarLoading()
},
})
});
return promise;
},
timeFormate(timestamp, timeType) {
if (timestamp) {
var timeStamp = timestamp.length == 13 ? timestamp : timestamp * 1000
var date = new Date(timeStamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
var Y = date.getFullYear() + '-';
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
var D = date.getDate() + ' ';
var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours())+":";
var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
var s = date.getSeconds();
if (timeType == 'YYMMDD') {
return Y + M + D;
} else if (timeType == 'YYMMDDHHMM') {
return Y + M + D + " " + h + m;
} else {
return h + m;
}
}
},
globalData: {
userInfo: null,
baseUrl: 'http://www.himrhi.com/api',
imgUrl: 'http://www.himrhi.com',
}
})
\ No newline at end of file
... ...
{
"pages": [
"pages/start/start",
"pages/index/index",
"pages/my/orderDetail/orderDetail",
"pages/my/big/big",
"pages/my/activityInformation/activityInformation",
"pages/my/serach/serach",
"pages/my/selectAddress/selectAddress",
"pages/my/editAddress2/editAddress2",
"pages/my/edit_address/edit_address",
"pages/my/editAddress/editAddress",
"pages/index/production_steps/production_steps",
"pages/my/myCollection/myCollection",
"pages/index/goodsDetial2/goodsDetial2",
"pages/index/goodsDetial/goodsDetial",
"pages/my/modifyPersonInformation/modifyPersonInformation",
"pages/my/modifyName/modifyName",
"pages/my/invitationList/invitationList",
"pages/my/invoiceInformation/invoiceInformation",
"pages/my/invoice/invoice",
"pages/my/commonProblems/commonProblems",
"pages/my/myAddress/myAddress",
"pages/my/invitationPolite/invitationPolite",
"pages/my/comment/comment",
"pages/my/coupons/coupons",
"pages/my/balance _center2/balance _center2",
"pages/my/charger_code/charger_code",
"pages/my/balance _center/balance _center",
"pages/my/my",
"pages/cart/cart",
"pages/index/selectAddress/selectAddress",
"pages/my/newAddress/newAddress",
"pages/my/modifyPhone/modifyPhone",
"pages/my/personal_center/personal_center",
"pages/my/showComment/showComment",
"pages/index/replaceDishes/replaceDishes",
"pages/cart/mask/mask",
"pages/my/question_two/question_two",
"pages/my/cancelOrder/cancelOrder",
"pages/my/deliveryTime/deliveryTime",
"pages/my/settle_account/settle_account",
"pages/start/e/e",
"pages/my/notice_detail/notice_detail",
"pages/index/select_index/select_index"
],
"window": {
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#1a191f",
"navigationBarTitleText": "HI，鲜生",
"navigationBarTextStyle": "white"
},
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
"tabBar": {
"selectedColor": "#222222",
"list": [
{
"selectedIconPath": "pages/imgs/nav02@2x.png",
"iconPath": "pages/imgs/nav01@2x.png",
"pagePath": "pages/index/index",
"text": "首页"
},
{
"selectedIconPath": "pages/imgs/nav04@2x.png",
"iconPath": "pages/imgs/nav03@2x.png",
"pagePath": "pages/cart/cart",
"text": "购物车"
},
{
"selectedIconPath": "pages/imgs/nav06@2x.png",
"iconPath": "pages/imgs/nav05@2x.png",
"pagePath": "pages/my/my",
"text": "个人中心"
}
]
},
"networkTimeout": {
"request": 1000,
"connectSocket": 1000,
"uploadFile": 1000,
"downloadFile": 1000
},
"sitemapLocation": "sitemap.json"
}
\ No newline at end of file
... ...
/**app.wxss**/
/* @font-face {
font-family: 'pingfang';
src: url('pages/src/fonts/PingFangLight.ttf');
font-family: 'pingfanglight';
src: url('pages/src/fonts/PingFangLight.ttf');
} */
@font-face {
font-family: 'iconfont'; /* project id 636259 */
src: url('//at.alicdn.com/t/font_636259_k8ji2vkx80b.eot');
src: url('//at.alicdn.com/t/font_636259_k8ji2vkx80b.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_636259_k8ji2vkx80b.woff2') format('woff2'),
url('//at.alicdn.com/t/font_636259_k8ji2vkx80b.woff') format('woff'),
url('//at.alicdn.com/t/font_636259_k8ji2vkx80b.ttf') format('truetype'),
url('//at.alicdn.com/t/font_636259_k8ji2vkx80b.svg#iconfont') format('svg');
}
/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img,
ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure,
figcaption, footer, header, menu, nav, output, ruby, section, summary, time,
mark, audio, video, input, view, text, template, blockquote, page, image {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
vertical-align: baseline;
box-sizing: border-box;
font-family: 'pingfang';
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, menu, nav, section {
display: block;
}
body {
line-height: 1;
height: 100%;
position: relative;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html, body {
width: 100%;
}
/* custom */
a {
color: #000;
text-decoration: none;
-webkit-backface-visibility: hidden;
}
li {
list-style: none;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track-piece {
background-color: rgba(0, 0, 0, 0.2);
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
height: 5px;
background-color: rgba(125, 125, 125, 0.7);
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal {
width: 5px;
background-color: rgba(125, 125, 125, 0.7);
-webkit-border-radius: 6px;
}
body {
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
img {
border: 0;
margin: 0;
}
input, textarea {
height: 100%;
width: 100%;
border: 0;
outline: none;
background: none;
}
.rmb {
font-size: 22rpx;
color: #222;
}
.nav_type_box {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 24rpx;
color: #222;
padding: 29rpx 23rpx;
border-bottom: 1rpx solid #f2f2f2;
background-color: #fff;
}
.nav_type_left {
display: flex;
align-items: center;
flex: 1;
}
.nav_type {
display: flex;
align-items: center;
margin-right: 30rpx;
}
.nav_type .iconfont, .nav_type_right .iconfont {
font-size: 24rpx;
margin: 0 11rpx 0 0;
}
.nav_type_right {
display: flex;
align-items: center;
}
.type_active {
color: #ffda44;
}
/* 单个商品列表样式 */
.goodbox {
background-color: #fff;
}
.good_item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 50rpx 22rpx;
border-bottom: 1rpx solid #f2f2f2;
}
.good_img {
width: 225rpx;
height: 217rpx;
display: flex;
align-items: center;
justify-content: center;
}
.good_right {
flex: 2;
margin-left: 20rpx;
}
.good_name {
color: #222;
font-size: 30rpx;
padding: 0 0 10rpx 0;
}
.good_stand {
font-size: 24rpx;
color: #888;
}
.rmb {
font-size: 22rpx;
}
.good_pprice {
font-size: 26rpx;
color: #222;
font-weight: bold;
padding: 0 10rpx;
}
.good_oprice {
font-size: 22rpx;
color: #888;
}
.good_vip {
color: #f44;
font-size: 34rpx;
font-weight: bold;
}
.good_vipbox {
display: flex;
align-items: center;
justify-content: space-between;
}
.good_vipbox_left {
display: flex;
align-items: center;
flex: 1;
}
.good_vip_spec {
font-size: 18rpx;
height: 25rpx;
background-color: #f44;
padding: 3rpx;
text-align: center;
color: #fff;
line-height: 100%;
margin-left: 5rpx;
/* background-image: url('../imgs/') */
}
.good_btn {
height: 60rpx;
width: 60rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffda44;
box-shadow: 5rpx 0px 5rpx rgba(248, 207, 38, 0.3);
}
.icon-gouwuche {
font-size: 29rpx;
color: #444;
}
/* 头部信息 */
.banner {
height: 86rpx;
width: 100%;
overflow: hidden;
line-height: 80rpx;
background: #fff;
display: flex;
font-size: 34rpx;
color: #222;
border-bottom: 1rpx solid #ededed;
padding: 0 26rpx;
box-sizing: border-box;
}
.coupons {
font-weight: bold;
margin: 0 auto;
}
@font-face {
font-family: 'iconfont'; /* project id 636259 */
src: url('//at.alicdn.com/t/font_636259_xrf3sdkafk.eot');
src: url('//at.alicdn.com/t/font_636259_xrf3sdkafk.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_636259_xrf3sdkafk.woff') format('woff'),
url('//at.alicdn.com/t/font_636259_xrf3sdkafk.ttf') format('truetype'),
url('//at.alicdn.com/t/font_636259_xrf3sdkafk.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-vip:before {
content: "\e62f";
}
.icon-jia:before {
content: "\e65b";
}
.icon-jiantouarrow486:before {
content: "\e6aa";
}
.icon-quan:before {
content: "\e741";
}
.icon-gouwuche:before {
content: "\e6be";
}
.icon-cuowu:before {
content: "\e657";
}
.icon-icondayu:before {
content: "\e632";
}
.icon-huangguan:before {
content: "\e640";
}
.icon-3:before {
content: "\e62c";
}
.icon-one-off:before {
content: "\e62d";
}
.icon-two-off:before {
content: "\e62e";
}
.icon-shangyinhao:before {
content: "\e63f";
}
.icon-xiaoyu:before {
content: "\e74c";
}
.icon-diandian:before {
content: "\e631";
}
.icon-location:before {
content: "\e601";
}
.icon-search:before {
content: "\e602";
}
.icon-message:before {
content: "\e603";
}
.icon-fenlei:before {
content: "\e604";
}
.icon-jiance:before {
content: "\e605";
}
.icon-xingzhuang:before {
content: "\e606";
}
.icon-xingzhuang1:before {
content: "\e607";
}
.icon-datu:before {
content: "\e608";
}
.icon-wangge:before {
content: "\e609";
}
.icon-liebiao:before {
content: "\e60a";
}
.icon-shaixuan:before {
content: "\e60b";
}
.icon-chakanguize:before {
content: "\e600";
}
.icon-tianxie:before {
content: "\e60c";
}
.icon-xingzhuang2:before {
content: "\e60d";
}
.icon-fanhui:before {
content: "\e60e";
}
.icon-dingwei:before {
content: "\e60f";
}
.icon-lishisousuo:before {
content: "\e610";
}
.icon-remensousuo:before {
content: "\e611";
}
.icon-quxiao:before {
content: "\e612";
}
.icon-shanchu:before {
content: "\e613";
}
.icon-zhankai:before {
content: "\e614";
}
.icon-meipingfen:before {
content: "\e615";
}
.icon-maishoutuijian:before {
content: "\e616";
}
.icon-shoucang:before {
content: "\e617";
}
.icon-jinru:before {
content: "\e618";
}
.icon-pingfen:before {
content: "\e619";
}
.icon-genghuan:before {
content: "\e630";
}
.icon-location1:before {
content: "\e61a";
}
.icon-weixuanzhong:before {
content: "\e61b";
}
.icon-time:before {
content: "\e61c";
}
.icon-xuanzhong:before {
content: "\e61d";
}
.icon-fenxiangyouli:before {
content: "\e61e";
}
.icon-wodeshoucang:before {
content: "\e61f";
}
.icon-location2:before {
content: "\e620";
}
.icon-yonghuzhinan:before {
content: "\e621";
}
.icon-yijianfankui:before {
content: "\e622";
}
.icon-qiandao:before {
content: "\e623";
}
.icon-zhangdanmingxi:before {
content: "\e624";
}
.icon-chuxuyouli:before {
content: "\e625";
}
.icon-saoma:before {
content: "\e626";
}
.icon-pingjia:before {
content: "\e627";
}
.icon-cai:before {
content: "\e628";
}
.icon-zan:before {
content: "\e629";
}
.icon-kefu:before {
content: "\e62a";
}
.icon-quxiao1:before {
content: "\e62b";
}
.icon-dangqian:before {
content: "\e64a";
}
.icon-meipingfen-copy:before {
content: "\e6bf";
}
.icon-collection:before{
content: "\e607"
}
.icon-position:before{
content: "\e634"
}
.icon-suggest:before{
content: "\e635"
}
.top_label {
height: 85rpx;
display: flex;
background-color: #FFF;
font-size: 34rpx;
color: #26363A;
align-items: center;
font-weight: bold;
width: 100%;
justify-content: center;
position: relative;
}
.del_btn{
font-size: 28rpx;
color: #222222;
position: absolute;
top: 50%;
right: 26rpx;
transform: translateY(-50%);
}
\ No newline at end of file
... ...
// pages/cart/cart.js
Page({
/**
* 页面的初始数据
*/
data: {
choose:false,
chooseAll:false,
number:1
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
// 再逛逛
get_return(){
wx.switchTab({
url: '../../pages/index/index'
});
},
//选中商品
choose(){
this.setData({
choose:!this.data.choose
});
},
//减少对应的数量
dec(){
if(this.data.number<=1){
return;
}else{
var number=this.data.number;
number--;
this.setData({
number:number
});
}
},
//选中所有商品
chooseAll(){
},
//增加商品数量
add(){
var number = this.data.number;
number++;
this.setData({
number:number
});
},
//去结算
account(){
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
... ...
{}
\ No newline at end of file
... ...
<!--pages/cart/cart.wxml-->
<view class='cart_box'>
<view class='top_label'>
购物车
<view class='del_btn'>删除</view>
</view>
<view class='tips'>
<view class='left'>
<view class='note'>提示</view>满200元包邮,还差36包邮
</view>
<view class='right' catchtap='get_return'>再逛逛 <icon class='iconfont icon-icondayu'></icon></view>
</view>
<!-- 商品列表 -->
<view class='product_list'>
<view class='singlepart'>
<view class='single_part_top'>
<view class='single_part_left'>
<view class='iconfont icon-weixuanzhong {{chooseAll?"active":""}}' bindtap='chooseAll'></view>
标签01商品
</view>
<view class='single_part_right'>
鲜橙促销 买1送1
<view class='iconfont icon-icondayu'></view>
</view>
</view>
<view class='single_part_items'>
<view class='single_part_item'>
<view class='iconfont icon-weixuanzhong {{choose?"active":""}}' bindtap='choose'></view>
<view class='single_part_imgbox'>
<image src='/pages/imgs/icon32.png' mode='widthFix'></image>
</view>
<view class='single_part_detail'>
<view class='product_title'>泰式冬阴功秘制虾汤620g</view>
<view class='product_type'>小份 切丝</view>
<view class='product_action'>
<view class='price'>￥<text class='detail_price'>26</text></view>
<view class='action_box'>
<view class='short action_btn' bindtap='dec'>-</view>
<view class='detail_num'>{{number}}</view>
<view class='action_btn' bindtap='add'>+</view>
</view>
</view>
</view>
</view>
<view class='single_part_item'>
<view class='iconfont icon-weixuanzhong'></view>
<view class='single_part_imgbox'>
<image src='/pages/imgs/icon32.png' mode='widthFix'></image>
</view>
<view class='single_part_detail'>
<view class='product_title'>泰式冬阴功秘制虾汤620g</view>
<view class='product_type'>小份 切丝</view>
<view class='product_action'>
<view class='price'>￥<text class='detail_price'>26</text></view>
<view class='action_box'>
<view class='short action_btn'>-</view>
<view class='detail_num'>1</view>
<view class='action_btn'>+</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class='singlepart'>
<view class='single_part_top'>
<view class='single_part_left'>
<view class='iconfont icon-weixuanzhong'></view>
标签01商品
</view>
<view class='single_part_right'>
鲜橙促销 买1送1
<view class='iconfont icon-icondayu'></view>
</view>
</view>
<view class='single_part_items'>
<view class='single_part_item'>
<view class='iconfont icon-weixuanzhong'></view>
<view class='single_part_imgbox'>
<image src='/pages/imgs/icon32.png' mode='widthFix'></image>
</view>
<view class='single_part_detail'>
<view class='product_title'>泰式冬阴功秘制虾汤620g</view>
<view class='product_type'>小份 切丝</view>
<view class='product_action'>
<view class='price'>￥<text class='detail_price'>26</text></view>
<view class='action_box'>
<view class='short action_btn'>-</view>
<view class='detail_num'>1</view>
<view class='action_btn'>+</view>
</view>
</view>
</view>
</view>
<view class='single_part_item'>
<view class='iconfont icon-weixuanzhong'></view>
<view class='single_part_imgbox'>
<image src='/pages/imgs/icon32.png' mode='widthFix'></image>
</view>
<view class='single_part_detail'>
<view class='product_title'>泰式冬阴功秘制虾汤620g</view>
<view class='product_type'>小份 切丝</view>
<view class='product_action'>
<view class='price'>￥<text class='detail_price'>26</text></view>
<view class='action_box'>
<view class='short action_btn'>-</view>
<view class='detail_num'>1</view>
<view class='action_btn'>+</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class='bottom_ac'>
<view class='choose'>
<view class='iconfont icon-weixuanzhong'></view> 全选
</view>
<view class='count'>
<view class='count_top'>
合计：<view class='price'>￥<text class='detail_price'>26</text></view>
</view>
<view class='fee'>
含运费10元
</view>
</view>
<view class='count_btn' bindtap='account'>
结算
</view>
</view>
\ No newline at end of file
... ...
/* pages/cart/cart.wxss */
page{
background: #FFF;
display: flex;
flex-flow: column;
height: 100%;
}
.cart_box{
flex: 1;
display: flex;
flex-flow: column;
}
.top_label {
height: 85rpx;
display: flex;
background-color: #FFF;
font-size: 34rpx;
color: #26363A;
align-items: center;
font-weight: bold;
width: 100%;
justify-content: center;
position: relative;
}
.del_btn{
font-size: 28rpx;
color: #222222;
position: absolute;
top: 50%;
right: 26rpx;
transform: translateY(-50%);
}
.tips{
height: 50rpx;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #FFDA44;
color: #333;
font-size: 24rpx;
padding: 0 40rpx;
}
.left,.right,icon{
display: flex;
align-items: center;
justify-content: center;
color: #222;
}
.note{
height: 32rpx;
border-radius: 16rpx;
font-size: 24rpx;
background-color: #fff;
padding: 0 12rpx;
width: 80rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 30rpx;
}
.product_list{
padding: 0 25rpx;
flex: 1;
overflow-y: scroll;
}
.singlepart{
border-top: 22rpx solid #FAFAFA;
}
.single_part_top{
height: 90rpx;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 24rpx;
color: #888;
border-bottom: 1rpx solid #EDEDED;
}
.single_part_right,.single_part_left{
display: flex;
}
.single_part_left{
color: #222222;
font-size: 30rpx;
font-weight: 800;
}
.single_part_left .iconfont{
color: #EDEDED;
font-size: 40rpx;
margin-right: 24rpx;
}
.single_part_left .iconfont.active,.icon-weixuanzhong.active{
color:#FFDA44
}
.single_part_item{
display: flex;
margin: 30rpx 0 60rpx;
height: 140rpx;
align-items: center;
}
.iconfont{
font-size: 40rpx;
color: #EDEDED;
}
.single_part_imgbox{
width: 140rpx;
height: 140rpx;
overflow: hidden;
margin-left: 20rpx;
margin-right: 40rpx;
}
.single_part_imgbox image{
width: 100%;
}
.single_part_detail{
flex:1;
height: 100%;
display: flex;
flex-flow: column;
}
.product_action{
font-size: 28rpx;
color: #333;
line-height: 1;
margin-top: auto;
}
.product_title{
color: #333;
font-size: 28rpx;
margin-bottom: 10rpx;
}
.product_type {
color: #888;
font-size: 24rpx;
}
.product_action{
display: flex;
justify-content: space-between;
}
.price{
font-size: 24rpx;
color: #FF4444;
}
.detail_price{
font-size: 34rpx;
font-weight: bold;
}
.action_box{
display: flex;
align-items: center;
font-size: 30rpx;
}
.action_btn {
display: flex;
height: 38rpx;
width: 38rpx;
border-radius: 50%;
border: 1rpx solid #94999A;
align-items: center;
justify-content: center;
font-size: 30rpx;
}
.detail_num{
padding: 0 16rpx;
}
.bottom_ac{
height: 100rpx;
display: flex;
padding-left:25rpx;
background: #FFF;
align-items: center;
border-top: 1px solid #EFEFEF;
}
.choose{
display: flex;
font-size: 26rpx;
color: #888;
}
.choose .iconfont {
margin-right: 24rpx;
}
.count{
font-size: 26rpx;
margin-left: 45rpx;
}
.count_top{
display: flex;
align-items: center;
}
.fee{
color: #888;
font-size: 24rpx;
}
.count_btn{
width: 236rpx;
height: 100rpx;
background:linear-gradient(135deg, rgba(249, 145, 21, 1), rgba(245, 104, 0, 1));
display: flex;
align-items: center;
justify-content: center;
color: #FFF;
font-size: 26rpx;
justify-self: flex-end;
margin-left: auto;
-webkit-margin-start: auto;
}
\ No newline at end of file
... ...
// pages/cart/mask/mask.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
... ...
{
"usingComponents": {}
}
\ No newline at end of file
... ...
<!--pages/cart/mask/mask.wxml-->
<view class='cart_mask'>
<view class='cart_mask_center'>
</view>
</view>
... ...
/* pages/cart/mask/mask.wxss */
.cart_mask{
width: 100%;
height: 100%;
position: absolute;
background: rgba(0,0,0,0.8);
}
.cart_mask_center{
width: 600rpx;
height: 540rpx;
background:rgba(255,255,255,1);
border-radius:10px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin:auto;
}
\ No newline at end of file
... ...
// pages/index/goodsDetial/goodsDetial.js
Page({
/**
* 页面的初始数据
*/
data: {
shoucang:false,
active:true,
flag:1,
show:false
},
//切换分量
changeFlag1(){
this.setData({
flag:1
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var query = wx.createSelectorQuery();
var offset = query.select('.itme_list5');
console.log(offset);
},
// 返回上一页
get_back() {
wx.navigateBack({})
},
// 跳转图文食谱
get_recipe(){
wx.navigateTo({
url: '../production_steps/production_steps',
})
},
// 跳转购物车
get_car() {
this.setData({
show:!this.data.show
});
wx.switchTab({
url: '/pages/cart/cart'
});
},
//隐藏mask
hide_mask(){
this.setData({
show: !this.data.show
});
},
//跳至图文详情
jump_detail(){
this.setData({
active:false
});
wx.pageScrollTo({
scrollTop: 1400,
duration: 300
})
},
//收藏
collection(){
this.setData({
shoucang:!this.data.shoucang
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})
\ No newline at end of file
... ...
{}
\ No newline at end of file
... ...
<!--pages/index/goodsDetial/goodsDetial.wxml-->
<view class='detail_container'>
<view class='banner'>
<view class='iconfont icon-fanhui' catchtap='get_back'></view>
<view class='coupons'>
<view class='goods_detail {{active?"active":""}}' bindtap='details'>商品详情</view>
<view class='graphic_detail {{!active?"active":""}}' bindtap='jump_detail'>图文详情</view>
</view>
<view class='share'>分享</view>
</view>
<view class='banner_box'>
<view class='banner_img'>
<image src='../../imgs/caipu.png'></image>
</view>
</view>
<view class='content_item'>
<view class='item_list'>
<view class='banner_title'>泰式冬阴功升级版秘制虾汤620g</view>
<view class='introduce'>量大好吃无限回购</view>
<view class='banner_character'>
<view class='banner_price'>
<view class=''>
<text class='money_icon'>￥</text>
<text class='money'>26.0</text>
<text class='original_price'>￥52.0</text>
</view>
<view class='display_box'>
<text class='money_icon2'>￥</text>
<text class='money2'>20.0</text>
<text class='vip'>会员专享</text>
</view>
</view>
<view>已售出：1566份</view>
</view>
</view>
<view class='item_list'>
<view class='list_content'>
<view class='content_title'>
<view class='title'>商品规格</view>
<view class='content'>选择 处理方式 份量</view>
</view>
<view class='iconfont icon-jinru'></view>
</view>
<view class='list_content'>
<view class='content_title'>
<view class='title'>基本参数</view>
<view class='content'>重量：500g*包 场地/品牌：大理弥渡 ...</view>
</view>
<view class='iconfont icon-jinru'></view>
</view>
</view>
<view class='item_list7'>
<view class='list_content'>
<view>
<view class='attribute'>
<view class='attribute_titel'>难度</view>
<view class='stars'>
<view class='iconfont icon-pingfen'></view>
<view class='iconfont icon-pingfen'></view>
<view class='iconfont icon-pingfen'></view>
<view class='iconfont icon-pingfen'></view>
<view class='iconfont icon-pingfen'></view>
</view>
</view>
<view class='attribute'>
<view class='attribute_titel'>难度</view>
<view class='stars'>10分钟</view>
</view>
</view>
<view>
<view class='attribute'>
<view class='attribute_titel'>难度</view>
<view class='attribute_content'>微辣</view>
</view>
<view class='attribute'>
<view class='attribute_titel'>难度</view>
<view class='attribute_content'>10分钟</view>
</view>
</view>
</view>
<view class='more_box'>
<view>展开更多</view>
<view class='iconfont icon-zhankai'></view>
</view>
</view>
<view class='item_list1'>
<view class='hint1'>
<view>15元升级SVIP，立享5特权</view>
<view class='cash_back'>
本商品
<text class='red_font'>更返2元</text>
</view>
</view>
<view class='hint1'>
<view>15元升级SVIP，立享5特权</view>
<view class='cash_back'>
本商品
<text class='red_font'>更返2元</text>
</view>
</view>
</view>
<view class='item_list2'>
<view class='user_evaluation'>
<view class='user_evaluation_title'>用户评价</view>
<view class='user_evaluation_time'>
<view>(26)</view>
<view class='iconfont icon-jinru'></view>
</view>
</view>
<view class='user_information_box'>
<view class='user_information'>
<view class='the_star'>
<view class='head_portrait'>
<image src='../../imgs/icon32.png'></image>
</view>
<view class='star_box'>
<view class='user_name'>叶晓林</view>
<view class='stars1'>
<view class='iconfont icon-pingfen'></view>
<view class='iconfont icon-pingfen'></view>
<view class='iconfont icon-pingfen'></view>
<view class='iconfont icon-pingfen'></view>
<view class='iconfont icon-pingfen'></view>
</view>
</view>
</view>
<view class='title'>2017-04-23</view>
</view>
<view class='evaluation'>第一次用Hi,鲜生，准时送达，送货上门，主动联系，态度很好,配送很快.感觉挺好。期待下一次购物~</view>
<view class='evaluation_img'>
<view class='upload_img_box'>
<view class='upload_img'>
<image src='../../imgs/pic38.png'></image>
</view>
<view class='upload_img'>
<image src='../../imgs/pic38.png'></image>
</view>
<view class='upload_img'>
<image src='../../imgs/pic38.png'></image>
</view>
</view>
</view>
<view class='comments_btn'>
<view class='iconfont icon-message'></view>
<view class='comments'>评论</view>
</view>
</view>
</view>
<view class='item_list3'>
<view class='package_title'>购买含本商品套餐更优惠</view>
<view class='package_box'>
<view class='package_img_box'>
<view class='package_img'>
<image src='../../imgs/pic38.png'></image>
</view>
<view class='package_img'>
<image src='../../imgs/pic38.png'></image>
</view>
<view class='package_img'>
<image src='../../imgs/pic38.png'></image>
</view>
<view class='package_img'>
<image src='../../imgs/pic38.png'></image>
</view>
</view>
<view class='package_content'>
<view>粤菜大礼包 春节团圆系列</view>
<view class='package_hint'>为大家精选挑选的菜系</view>
<view class='pickage_display'>最多可省
<text class='money_icon2'>￥</text>
<text class='money2'>65.0</text> </view>
</view>
</view>
</view>
<view class='item_list4'>
<view class='detection'>
<view class='line1'></view>
<view class='detection_title'>安心检测</view>
<view class='line2'></view>
</view>
<view class='detection_hint'>经过14项感官排查，100%可溯，点标签查看。</view>
<view class='detection_item'>
<view class='detection_box'>
<view class='detection_img'>
<image src='../../imgs/visual.png'></image>
</view>
<view>可视化种植</view>
</view>
<view class='detection_box'>
<view class='detection_img'>
<image src='../../imgs/organic.png'></image>
</view>
<view>有机认证</view>
</view>
<view class='detection_box'>
<view class='detection_img'>
<image src='../../imgs/helpsale.png'></image>
</view>
<view>帮帮卖</view>
</view>
<view class='detection_box'>
<view class='detection_img'>
<image src='../../imgs/localfood.png'></image>
</view>
<view>本地食材</view>
</view>
</view>
</view>
<view class='itme_list5' bindtap='checkHeight'>
<view class='recommended_box'>
<view class='iconfont icon-maishoutuijian'></view>
<view>买手推荐</view>
</view>
<view class='foretaste_box'>
<view class='head_portrait'>
<image src='../../imgs/icon32.png'></image>
</view>
<view class='buyer_recommend'>
<view class='buyer_name'>杨军</view>
<view>被称为挑剔的试吃官，力求让每个家庭吃上安心蔬菜</view>
</view>
</view>
<view class='aaa'></view>
<view class='recommend_content'>
<view class='iconfont icon-shangyinhao'></view>
<view class='recommend_character'>沃柑生产于广西，南方温和气候有着充足的日照环境，使其沃柑更甘甜水润。沃柑个大皮薄，容易剥皮，果肉脆嫩，粒粒果肉饱满，容易剥皮，果汁多易化渣。看得到的鲜嫩美味。</view>
<view class='triangle'></view>
</view>
<view class='ingredients'>
<view class='ingredients_title'>食材包内含20件</view>
<view class='ingredients_box'>
<view class='ingredients_img'>
<image src='../../imgs/icon32.png'></image>
</view>
<view>
<view class='ingredients_item'>
<view class='ingredients_name'>主料</view>
<view class='ingredients_content'>
<view> 排骨</view>
<view> 排骨</view>
<view> 排骨</view>
<view> 排骨</view>
<view> 排骨</view>
</view>
</view>
<view class='ingredients_item'>
<view class='ingredients_name'>主料</view>
<view class='ingredients_content'>
<view> 排骨</view>
<view> 排骨</view>
<view> 排骨</view>
<view> 排骨</view>
<view> 排骨</view>
</view>
</view>
</view>
</view>
</view>
<view class='graphic_ingredients_box'>
<view class='graphic_ingredients' bindtap='get_recipe'>
<view class='graphic_ingredients_background'>
<view class='graphic_ingredients_border'>浏览图文食谱</view>
</view>
</view>
<view class='graphic_ingredients' bindtap='get_recipe'>
<view class='graphic_ingredients_background'>
<view class='graphic_ingredients_border'>浏览图文食谱</view>
</view>
</view>
</view>
</view>
<view class='item_list6'>
<view class='collocation_title'>建议搭配 酸梅汁或红酒 解腻助消化</view>
<view class='collocation'>
<view class='collocation_box'>
<view class='collocation_img'>
<image src='../../imgs/pic43.png'></image>
</view>
<view class='collocation_content'>
<view>泰式冬阴功秘制虾汤...</view>
<view class='introduce'>量大好吃无限回购</view>
<view class=''>
<text class='money_icon2'>￥</text>
<text class='money2'>20.0</text>
<text class='original_price'>￥52.0</text>
</view>
</view>
</view>
<view class='collocation_box'>
<view class='collocation_img'>
<image src='../../imgs/pic43.png'></image>
</view>
<view class='collocation_content'>
<view>泰式冬阴功秘制虾汤...</view>
<view class='introduce'>量大好吃无限回购</view>
<view class=''>
<text class='money_icon2'>￥</text>
<text class='money2'>20.0</text>
<text class='original_price'>￥52.0</text>
</view>
</view>
</view>
</view>
</view>
</view>
<view class='bottom_btn'>
<view class='hint_btn'>
<view class='shop_car' bindtap='get_car'>
<view class='iconfont icon-gouwuche'></view>
<view>购物车</view>
</view>
<view bindtap='collection'>
<view class='iconfont icon-shoucang {{shoucang?"active":""}}'></view>
<view class='shop_car {{shoucang?"active":""}}'>收藏</view>
</view>
</view>
<view class='join_btn' bindtap='get_car'>加入购物车</view>
<view class='immediately_btn'>立即购买</view>
</view>
</view>
<view class='cart_mask' wx:if='{{show}}'>
<view class='cart_mask_diceng'>
<view class='goods_name'>菜品名称</view>
<view class='weight'>
<view class='weight_view'>份量</view>
<view class='quality'>
<view class='{{flag===1?"active":""}} quality_left' bindtap='changeFlag1'>小份300g</view>
<view class='{{flag===2?"active":""}} quality_left'bindtap='changeFlag2'>大份400g</view>
</view>
</view>
<view class='weight'>
<view class='weight_view'>份量</view>
<view class='quality'>
<view class='{{flag===1?"active":""}} quality_left' bindtap='changeFlag1'>小份300g</view>
<view class='{{flag===2?"active":""}} quality_left'bindtap='changeFlag2'>大份400g</view>
</view>
</view>
<view class='last_box'>
<view class='last_box_top'>
<view class='last_box_top_price'>
<view>￥16</view>
<text>(小份300g\t\t不处理)</text>
</view>
</view>
<view class='last_box_top'>
<view class='last_box_top_price'>
<view class='member_price'>￥12</view>
<text class='member'>会员专享</text>
</view>
<view class='purchase' bindtap='hide_mask'>加入购物车</view>
</view>
</view>
</view>
</view>
\ No newline at end of file
... ...
/* pages/index/goodsDetial/goodsDetial.wxss */
page {
background: #f3f5f5;
}
.coupons {
font-size: 30rpx;
color: #222;
display: flex;
}
.goods_detail {
font-weight: bold;
}
.goods_detail.active{
border-bottom: 3rpx solid #ffda44;
}
.graphic_detail {
font-weight: bold;
margin-left: 56rpx;
}
.graphic_detail.active{
border-bottom: 3rpx solid #ffda44;
}
.share {
font-size: 28rpx;
color: #222;
}
.banner{
position: fixed;
}
.banner_img {
height: 630rpx;
padding-top:80rpx;
box-sizing: border-box
}
.banner_img image {
width: 100%;
height: 100%;
}
.item_list {
padding: 32rpx 25rpx;
background-color: #fff;
margin-bottom: 20rpx;
}
.banner_title {
font-size: 34rpx;
color: #222;
}
.introduce {
font-size: 28rpx;
color: #888;
}
.banner_character {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 24rpx;
color: #888;
margin-top: 40rpx;
}
.banner_price {
display: flex;
/* align-items: center; */
}
.money_icon {
font-size: 22rpx;
color: #222;
}
.money {
font-size: 38rpx;
font-weight: bold;
color: #222;
}
.original_price {
color: #888;
text-decoration: line-through;
}
.display_box {
margin-left: 40rpx;
}
.money_icon2 {
font-size: 22rpx;
color: #f44;
}
.money2 {
font-size: 38rpx;
font-weight: bold;
color: #f44;
}
.vip {
color: #fff;
background-color: #f44;
margin-left: 5rpx;
}
.list_content {
display: flex;
justify-content: space-between;
align-items: center;
}
.content_title {
display: flex;
}
.title {
font-size: 24rpx;
color: #888;
}
.content {
font-size: 24rpx;
color: #222;
margin-left: 47rpx;
}
.icon-jinru {
font-size: 22rpx;
color: #c7c7c7;
}
.more_box {
font-size: 24rpx;
color: #949a9a;
border-top: 1rpx solid #ededed;
display: flex;
justify-content: center;
align-items: center;
padding-top: 24rpx;
margin-top: 35rpx;
}
.icon-zhankai {
font-size: 14rpx;
margin-left: 10rpx;
}
.item_list1 {
background-color: #fff;
margin-bottom: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding: 19rpx 16rpx;
}
.hint1 {
font-size: 22rpx;
color: #222;
background-color: #fafafa;
border-radius: 12rpx;
padding: 25rpx 39rpx;
}
.cash_back {
font-size: 28rpx;
font-weight: bold;
color: #222;
}
.red_font {
font-weight: bold;
color: #f44;
}
.item_list7 {
padding: 31rpx 25rpx 25rpx 25rpx;
}
.attribute {
width: 375rpx;
display: flex;
align-items: center;
/* margin-left: 49rpx; */
}
.attribute_titel {
font-size: 26rpx;
color: #94999a;
}
.stars {
display: flex;
font-size: 26rpx;
color: #222;
margin-left: 35rpx;
}
.icon-pingfen {
font-size: 26rpx;
color: #222;
}
.attribute_content {
font-size: 26rpx;
color: #222;
margin-left: 113rpx;
}
.item_list2, .item_list3, .item_list4, .itme_list5, .item_list6, .item_list7 {
background-color: #fff;
margin-bottom: 20rpx;
}
.user_evaluation {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1rpx solid #f3f5f5;
padding: 31rpx 25rpx;
}
.user_evaluation_title {
font-size: 30rpx;
font-weight: bold;
color: #222;
}
.user_evaluation_time {
font-size: 24rpx;
color: #c7c7c7;
display: flex;
align-items: center;
}
.comments_btn {
display: flex;
justify-content: flex-end;
align-items: center;
font-size: 23rpx;
color: #949a9a;
margin-top: 24rpx;
}
.icon-message {
font-size: 22rpx;
color: #949a9a;
margin-right: 10rpx;
}
.user_information_box {
padding: 31rpx 25rpx 25rpx 25rpx;
}
.user_information {
display: flex;
justify-content: space-between;
align-items: center;
}
.head_portrait {
width: 62rpx;
height: 62rpx;
}
.head_portrait image {
width: 100%;
height: 100%;
}
.star_box {
margin-left: 25rpx;
}
.the_star {
display: flex;
align-items: center;
}
.stars1 {
display: flex;
}
.user_name {
font-size: 26rpx;
color: #222;
}
.evaluation {
font-size: 24rpx;
color: #222;
margin-top: 25rpx;
}
.evaluation_img {
margin-top: 21rpx;
}
.upload_img_box {
display: flex;
}
.upload_img {
width: 160rpx;
height: 160rpx;
margin-right: 20rpx;
}
.upload_img image {
width: 100%;
height: 100%;
}
.item_list3 {
padding: 39rpx 25rpx 40rpx 25rpx;
}
.package_title {
font-size: 30rpx;
font-weight: bold;
color: #222;
}
.package_box {
display: flex;
margin-top: 44rpx;
}
.package_img_box {
width: 200rpx;
height: 200rpx;
display: flex;
flex-wrap: wrap;
/* justify-content: flex-end;
align-content: space-between; */
}
.package_img {
width: 95rpx;
height: 95rpx;
}
.package_img image {
width: 100%;
height: 100%;
}
.package_content {
font-size: 30rpx;
color: #222;
margin-left: 40rpx;
}
.package_hint {
font-size: 24rpx;
color: #94999a;
}
.pickage_display {
font-size: 24rpx;
color: #f44;
margin-top: 47rpx;
}
.item_list4 {
padding: 46rpx 44rpx;
}
.detection_item {
display: flex;
justify-content: space-around;
margin-top: 58rpx;
}
.detection {
display: flex;
justify-content: center;
align-items: center;
}
.line1 {
width: 115rpx;
height: 1rpx;
background: linear-gradient(to right, #fff, #bbb);
}
.line2 {
width: 115rpx;
height: 1rpx;
background: linear-gradient(to left, #fff, #bbb);
}
.detection_title {
font-size: 26rpx;
color: #222;
margin: 0 30rpx;
}
.detection_box {
font-size: 26rpx;
color: #222;
}
.detection_img {
margin: 0 auto 23rpx;
width: 54rpx;
height: 54rpx;
}
.detection_img image {
width: 100%;
height: 100%;
}
.detection_hint {
font-size: 22rpx;
color: #94999a;
text-align: center;
margin-top: 20rpx;
}
.itme_list5 {
position: relative;
padding: 45rpx 25rpx 30rpx 25rpx;
box-sizing: border-box;
}
.recommended_box {
width: 150rpx;
height: 45rpx;
display: flex;
align-items: center;
justify-content: center;
background: #ffda44;
border-radius: 0 0 16rpx 16rpx;
font-size: 22rpx;
color: #333;
position: absolute;
right: 24rpx;
top: 0;
}
.foretaste_box {
display: flex;
align-items: center;
font-size: 30rpx;
}
.buyer_recommend {
font-size: 22rpx;
color: #94999a;
margin-left: 20rpx;
}
.buyer_name {
font-size: 30rpx;
color: #222;
}
.recommend_content {
background-color: #fafafa;
border-radius: 16rpx;
padding: 25rpx 25rpx 25rpx 25rpx;
margin-top: 30rpx;
font-size: 26rpx;
color: #222;
position: relative;
}
.icon-shangyinhao {
font-size: 22rpx;
color: #e3e3e3;
}
.triangle {
width: 0;
height: 0;
border-left: 60rpx solid #fafafa;
border-top: 30rpx solid transparent;
border-bottom: 30rpx solid transparent;
position: absolute;
top: -30rpx;
left: 50rpx;
}
.recommend_character {
margin-left: 10rpx;
}
.ingredients {
margin-top: 40rpx;
}
.ingredients_title {
font-size: 30rpx;
font-weight: bold;
color: #222;
text-align: center;
}
.ingredients_img {
width: 280rpx;
height: 280rpx;
}
.ingredients_box {
display: flex;
}
.ingredients_img image {
width: 100%;
height: 100%;
}
.ingredients_item {
width: 400rpx;
font-size: 26rpx;
display: flex;
/* margin-left: 34rpx; */
margin-top: 34rpx;
border: 1px solid red;
}
.ingredients_name {
color: #94999a;
width: 80rpx;
}
.ingredients_content {
width: 300rpx;
display: flex;
flex-wrap: wrap;
margin-left: 30rpx;
border: 1px solid red;
}
.graphic_ingredients_box {
margin-top: 40rpx;
}
.graphic_ingredients {
height: 200rpx;
border: 1rpx solid red;
display: flex;
align-items: center;
justify-content: center;
background-image: url('http://hifresh.w.bronet.cn/assets/wxapp/keshihua@2x.png');
margin-bottom: 20rpx;
}
.graphic_ingredients_background {
width: 450rpx;
height: 110rpx;
background-color: #ffb244;
display: flex;
align-items: center;
justify-content: center;
}
.graphic_ingredients_border {
font-size: 38rpx;
color: #fff;
width: 430rpx;
height: 90rpx;
border: 1rpx solid #fff;
display: flex;
align-items: center;
justify-content: center;
}
.item_list6 {
padding: 30rpx 25rpx;
margin-bottom:120rpx;
}
.collocation_title {
font-size: 30rpx;
font-weight: bold;
color: #222;
margin-bottom: 40rpx;
}
.collocation {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.collocation_box {
width: 340rpx;
border: 1rpx solid red;
border-radius: 16rpx;
overflow: hidden;
/* margin-left: 20rpx; */
}
.collocation_img {
width: 340rpx;
height: 340rpx;
}
.collocation_img image {
width: 100%;
height: 100%;
}
.collocation_content {
background: #fafafa;
font-size: 30rpx;
color: #222;
padding: 22rpx;
}
.bottom_btn {
height: 100rpx;
background: #fff;
display: flex;
justify-content: flex-end;
align-items: center;
position: fixed;
bottom: 0;
left: 0
}
.hint_btn {
width: 218rpx;
display: flex;
justify-content: space-around;
align-items: center;
}
.icon-shoucang.active{
color:#ff6700;
}
.shop_car {
font-size: 18rpx;
color: #747b7d;
}
.shop_car.active{
color:#ff6700;
}
.join_btn {
width: 266rpx;
height: 100rpx;
background: linear-gradient(to left, #ffda44, #ffb244);
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #fff;
}
.immediately_btn {
width: 266rpx;
height: 100rpx;
background: linear-gradient(to left, #f99115, #f56800);
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #fff;
}
/*购物车添加状态*/
.cart_mask{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8)
}
.cart_mask_diceng{
width: 80%;
height: 550rpx;
position: absolute;
left: 0;
top: 0;
bottom:0;
right:0;
margin:auto;
background:rgba(255,255,255,1);
border-radius:10px;
}
.goods_name{
font-size:30rpx;
font-family:PingFang-SC-Bold;
font-weight:bold;
color:rgba(51,51,51,1);
line-height:36rpx;
text-align: center;
margin-top:50rpx;
}
.weight{
height: 100rpx;
margin-top:44rpx;
margin-bottom:44rpx;
padding:0 47rpx 0 36rpx;
box-sizing: border-box
}
.weight_view{
font-size:26rpx;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(51,51,51,1);
line-height:36rpx;
}
.quality{
margin-top:24rpx;
}
.quality_left{
width:150rpx;
height:50rpx;
background:rgba(247,247,247,1);
border-radius:10rpx;
text-align: center;
line-height: 50rpx;
font-size:26rpx;
font-family:FZY3JW--GB1-0;
font-weight:400;
color:rgba(26,26,26,1);
float: left;
margin-right:30rpx;
}
.quality_left.active{
background:rgba(255,218,68,1);
}
.last_box{
height: 110rpx;
background:rgba(247,247,247,1);
border-radius:0px 0px 10px 10px;
margin-top:70rpx;
padding:18rpx 0 0 51rpx;
box-sizing: border-box;
position: relative
}
.last_box_top{
font-size: 26rpx;
}
.last_box_top_price{
display: flex;
color: #f44;
line-height: 36rpx;
font-family:PingFang-SC-Bold;
font-weight:bold;
}
.last_box_top_price text{
color:#333;
font-size: 18rpx;
margin-left:10rpx;
}
.member_price{
color:rgba(187,138,54,1);
}
.member{
text-align: center;
font-family:PingFang-SC-Medium;
margin-left:24rpx;
background:linear-gradient(-90deg,rgba(244,243,200,1),rgba(250,216,90,1));
border-radius:5px;
color:rgba(187,138,54,1);
padding:4rpx -2rpx;
box-sizing: border-box;
/* margin-top:8rpx; */
font-size: 18rpx;
font-weight: 400;
}
.purchase{
width:160rpx;
height:50rpx;
background:rgba(255,218,68,1);
border-radius:25rpx;
font-size:24rpx;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(26,26,26,1);
line-height:50rpx;
text-align: center;
position: absolute;
right:36rpx;
top:30rpx;
}
\ No newline at end of file
... ...
// pages/index/goodsDetial2/goodsDetial2.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
// 返回上一页
get_back(){
wx.navigateBack({})
},
// 商品包内容详情
getdetails_shop(){
wx.navigateTo({
url: '../goodsDetial/goodsDetial',
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
... ...
{}
\ No newline at end of file
... ...
<!--pages/index/goodsDetial/goodsDetial.wxml-->
<view>
<view class='banner'>
<view class='iconfont icon-fanhui' catchtap='get_back'></view>
<view class='coupons'>商品详情</view>
<view class='share'>分享</view>
</view>
<view class='banner_box'>
<view class='banner_img'>
<image src='../../imgs/caipu.png'></image>
</view>
<view class='banner_img'>
<image src='../../imgs/caipu.png'></image>
</view>
<view class='banner_img'>
<image src='../../imgs/caipu.png'></image>
</view>
<view class='banner_img'>
<image src='../../imgs/caipu.png'></image>
</view>
</view>
<view class='content_item'>
<view class='item_list'>
<view class='banner_title'>泰式冬阴功升级版秘制虾汤620g</view>
<view class='introduce'>量大好吃无限回购</view>
<view class='banner_character'>
<view class='banner_price'>
<view class=''>
<text class='money_icon'>￥</text>
<text class='money'>26.0</text>
<text class='original_price'>￥52.0</text>
</view>
<view class='display_box'>
<text class='money_icon2'>￥</text>
<text class='money2'>20.0</text>
<text class='vip'>会员专享</text>
</view>
</view>
<view>已售出：1566份</view>
</view>
</view>
<view class='item_list2'>
<view class='user_evaluation'>
<view class='user_evaluation_title'>用户评价</view>
<view class='user_evaluation_time'>
<view>(26)</view>
<view class='iconfont icon-jinru'></view>
</view>
</view>
<view class='user_information_box'>
<view class='user_information'>
<view class='the_star'>
<view class='head_portrait'>
<image src='../../imgs/icon32.png'></image>
</view>
<view class='star_box'>
<view class='user_name'>叶晓林</view>
<view class='stars1'>
<view class='iconfont icon-pingfen'></view>
<view class='iconfont icon-pingfen'></view>
<view class='iconfont icon-pingfen'></view>
<view class='iconfont icon-pingfen'></view>
<view class='iconfont icon-pingfen'></view>
</view>
</view>
</view>
<view class='title'>2017-04-23</view>
</view>
<view class='evaluation'>第一次用Hi,鲜生，准时送达，送货上门，主动联系，态度很好,配送很快.感觉挺好。期待下一次购物~</view>
<view class='evaluation_img'>
<view class='upload_img_box'>
<view class='upload_img'>
<image src='../../imgs/pic38.png'></image>
</view>
<view class='upload_img'>
<image src='../../imgs/pic38.png'></image>
</view>
<view class='upload_img'>
<image src='../../imgs/pic38.png'></image>
</view>
</view>
</view>
<view class='comments_btn'>
<view class='iconfont icon-message'></view>
<view class='comments'>评论</view>
</view>
</view>
</view>
<view class='item_list1'>
<view class='hint1'>
<view>15元升级SVIP，立享5特权</view>
<view class='cash_back'>
本商品
<text class='red_font'>更返2元</text>
</view>
</view>
<view class='hint1'>
<view>15元升级SVIP，立享5特权</view>
<view class='cash_back'>
本商品
<text class='red_font'>更返2元</text>
</view>
</view>
</view>
<view class='item_list3'>
<view class='detection'>
<view class='line1'></view>
<view class='detection_title'>安心检测</view>
<view class='line2'></view>
</view>
<view class='detection_hint'>经过14项感官排查，100%可溯，点标签查看。</view>
<view class='detection_item'>
<view class='detection_box'>
<view class='detection_img'>
<image src='../../imgs/pic38.png'></image>
</view>
<view>可视化种植</view>
</view>
<view class='detection_box'>
<view class='detection_img'>
<image src='../../imgs/pic38.png'></image>
</view>
<view>可视化种植</view>
</view>
<view class='detection_box'>
<view class='detection_img'>
<image src='../../imgs/pic38.png'></image>
</view>
<view>可视化种植</view>
</view>
<view class='detection_box'>
<view class='detection_img'>
<image src='../../imgs/pic38.png'></image>
</view>
<view>可视化种植</view>
</view>
</view>
</view>
<view class='itme_list5'>
<view class='recommended_box'>
<view class='iconfont icon-maishoutuijian'></view>
<view>买手推荐</view>
</view>
<view class='foretaste_box'>
<view class='head_portrait'>
<image src='../../imgs/icon32.png'></image>
</view>
<view class='buyer_recommend'>
<view class='buyer_name'>杨军</view>
<view>被称为挑剔的试吃官，力求让每个家庭吃上安心蔬菜</view>
</view>
</view>
<view class='recommend_content'>
<view class='iconfont icon-shangyinhao'></view>
<view class='recommend_character'>沃柑生产于广西，南方温和气候有着充足的日照环境，使其沃柑更甘甜水润。沃柑个大皮薄，容易剥皮，果肉脆嫩，粒粒果肉饱满，容易剥皮，果汁多易化渣。看得到的鲜嫩美味。</view>
<view class='triangle'></view>
</view>
</view>
<view class='item_list4'>
<view class='detection'>
<view class='line1'></view>
<view class='detection_title'>商品包内容</view>
<view class='line2'></view>
</view>
<view class='detection_hint'>经过14项感官排查，100%可溯，点标签查看。</view>
<view class='collocation'>
<view class='collocation_box' bindtap='getdetails_shop'>
<view class='collocation_img'>
<image src='../../imgs/pic43.png'></image>
</view>
<view class='collocation_content'>
<view>泰式冬阴功秘制虾汤...</view>
<view class='introduce'>量大好吃无限回购</view>
</view>
</view>
<view class='collocation_box' bindtap='getdetails_shop'>
<view class='collocation_img'>
<image src='../../imgs/pic43.png'></image>
</view>
<view class='collocation_content'>
<view>泰式冬阴功秘制虾汤...</view>
<view class='introduce'>量大好吃无限回购</view>
</view>
</view>
<view class='collocation_box' bindtap='getdetails_shop'>
<view class='collocation_img'>
<image src='../../imgs/pic43.png'></image>
</view>
<view class='collocation_content'>
<view>泰式冬阴功秘制虾汤...</view>
<view class='introduce'>量大好吃无限回购</view>
</view>
</view>
<view class='collocation_box' bindtap='getdetails_shop'>
<view class='collocation_img'>
<image src='../../imgs/pic43.png'></image>
</view>
<view class='collocation_content'>
<view>泰式冬阴功秘制虾汤...</view>
<view class='introduce'>量大好吃无限回购</view>
</view>
</view>
</view>
<view class='charge_btn'>
<view class='iconfont icon-genghuan'></view>
<view>更换菜品</view>
</view>
</view>
<view class='tips'>
<view class='item_list7'>
<view class='detection'>
<view class='line1'></view>
<view class='detection_title'>小贴士</view>
<view class='line2'></view>
</view>
<view class='tips_content'>
<view>01 烤翅中时，在烤盘底部刷一层油再放入烤箱中烤，这样就不会粘盘。</view>
<view>02 将腌制好的翅中再涂一层蜂蜜，这样会给翅中提鲜，烤出的翅中肉质更细嫩可口。</view>
<view>03 用翅中和香菇一起烹煮，可令两种食物中的纤维效果加倍，双重营养，使人体更容易消化吸收。</view>
</view>
</view>
</view>
<view class='item_list6'>
<view class='collocation_title'>建议搭配 酸梅汁或红酒 解腻助消化</view>
<view class='collocation'>
<view class='collocation_box' bindtap='getdetails_shop'>
<view class='collocation_img'>
<image src='../../imgs/pic43.png'></image>
</view>
<view class='collocation_content'>
<view>泰式冬阴功秘制虾汤...</view>
<view class='introduce'>量大好吃无限回购</view>
<view class=''>
<text class='money_icon2'>￥</text>
<text class='money2'>20.0</text>
<text class='original_price'>￥52.0</text>
</view>
</view>
</view>
<view class='collocation_box' bindtap='getdetails_shop'>
<view class='collocation_img'>
<image src='../../imgs/pic43.png'></image>
</view>
<view class='collocation_content'>
<view>泰式冬阴功秘制虾汤...</view>
<view class='introduce'>量大好吃无限回购</view>
<view class=''>
<text class='money_icon2'>￥</text>
<text class='money2'>20.0</text>
<text class='original_price'>￥52.0</text>
</view>
</view>
</view>
</view>
</view>
</view>
<view class='bottom_btn'>
<view class='hint_btn'>
<view class='shop_car'>
<view class='iconfont icon-gouwuche'></view>
<view>购物车</view>
</view>
<view>
<view class='iconfont icon-shoucang'></view>
<view class='shop_car'>收藏</view>
</view>
</view>
<view class='join_btn'>加入购物车</view>
<view class='immediately_btn'>立即购买</view>
</view>
</view>
\ No newline at end of file
... ...
/* pages/index/goodsDetial/goodsDetial.wxss */
page {
background: #f3f5f5;
}
.coupons {
font-size: 30rpx;
color: #222;
display: flex;
}
.goods_detail {
font-weight: bold;
border-bottom: 3rpx solid #ffda44;
}
.graphic_detail {
font-weight: bold;
margin-left: 56rpx;
}
.share {
font-size: 28rpx;
color: #222;
}
.banner_box {
display: flex;
flex-wrap: wrap;
}
.banner_img {
width: 370rpx;
height: 315rpx;
}
.banner_img image {
width: 100%;
height: 100%;
}
.item_list {
padding: 32rpx 25rpx;
background-color: #fff;
margin-bottom: 20rpx;
}
.banner_title {
font-size: 34rpx;
color: #222;
}
.introduce {
font-size: 28rpx;
color: #888;
}
.banner_character {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 24rpx;
color: #888;
margin-top: 40rpx;
}
.banner_price {
display: flex;
/* align-items: center; */
}
.money_icon {
font-size: 22rpx;
color: #222;
}
.money {
font-size: 38rpx;
font-weight: bold;
color: #222;
}
.original_price {
color: #888;
text-decoration: line-through;
}
.display_box {
margin-left: 40rpx;
}
.money_icon2 {
font-size: 22rpx;
color: #f44;
}
.money2 {
font-size: 38rpx;
font-weight: bold;
color: #f44;
}
.vip {
color: #fff;
background-color: #f44;
margin-left: 5rpx;
}
.list_content {
display: flex;
justify-content: space-between;
align-items: center;
}
.content_title {
display: flex;
}
.title {
font-size: 24rpx;
color: #888;
}
.content {
font-size: 24rpx;
color: #222;
margin-left: 47rpx;
}
.icon-jinru {
font-size: 22rpx;
color: #c7c7c7;
}
.more_box {
font-size: 24rpx;
color: #949a9a;
border-top: 1rpx solid #ededed;
display: flex;
justify-content: center;
align-items: center;
padding-top: 24rpx;
margin-top: 35rpx;
}
.icon-zhankai {
font-size: 14rpx;
margin-left: 10rpx;
}
.item_list1 {
background-color: #fff;
margin-bottom: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding: 19rpx 16rpx;
}
.hint1 {
font-size: 22rpx;
color: #222;
background-color: #fafafa;
border-radius: 12rpx;
padding: 25rpx 39rpx;
}
.cash_back {
font-size: 28rpx;
font-weight: bold;
color: #222;
}
.red_font {
font-weight: bold;
color: #f44;
}
.attribute {
width: 375rpx;
display: flex;
align-items: center;
/* margin-left: 49rpx; */
}
.attribute_titel {
font-size: 26rpx;
color: #94999a;
}
.stars {
display: flex;
font-size: 26rpx;
color: #222;
margin-left: 35rpx;
}
.icon-pingfen {
font-size: 26rpx;
color: #222;
}
.attribute_content {
font-size: 26rpx;
color: #222;
margin-left: 113rpx;
}
.item_list2, .item_list3, .item_list4, .itme_list5, .item_list6 {
background-color: #fff;
margin-bottom: 20rpx;
}
.user_evaluation {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1rpx solid #f3f5f5;
padding: 31rpx 25rpx;
}
.user_evaluation_title {
font-size: 30rpx;
font-weight: bold;
color: #222;
}
.user_evaluation_time {
font-size: 24rpx;
color: #c7c7c7;
display: flex;
align-items: center;
}
.comments_btn {
display: flex;
justify-content: flex-end;
align-items: center;
font-size: 23rpx;
color: #949a9a;
margin-top: 24rpx;
}
.icon-message {
font-size: 22rpx;
color: #949a9a;
margin-right: 10rpx;
}
.user_information_box {
padding: 31rpx 25rpx 25rpx 25rpx;
}
.user_information {
display: flex;
justify-content: space-between;
align-items: center;
}
.head_portrait {
width: 62rpx;
height: 62rpx;
}
.head_portrait image {
width: 100%;
height: 100%;
}
.star_box {
margin-left: 25rpx;
}
.the_star {
display: flex;
align-items: center;
}
.stars1 {
display: flex;
}
.user_name {
font-size: 26rpx;
color: #222;
}
.evaluation {
font-size: 24rpx;
color: #222;
margin-top: 25rpx;
}
.evaluation_img {
margin-top: 21rpx;
}
.upload_img_box {
display: flex;
}
.upload_img {
width: 160rpx;
height: 160rpx;
margin-right: 20rpx;
}
.upload_img image {
width: 100%;
height: 100%;
}
.item_list3 {
padding: 46rpx 44rpx;
}
.item_list4 {
padding: 30rpx 25rpx;
}
.charge_btn {
height: 80rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 26rpx;
color: #f44;
border: 1rpx solid #f44;
border-radius: 40rpx;
margin-top: 30rpx;
}
.detection_item {
display: flex;
justify-content: space-around;
margin-top: 58rpx;
}
.detection {
display: flex;
justify-content: center;
align-items: center;
}
.line1 {
width: 115rpx;
height: 1rpx;
background: linear-gradient(to right, #fff, #bbb);
}
.line2 {
width: 115rpx;
height: 1rpx;
background: linear-gradient(to left, #fff, #bbb);
}
.detection_title {
font-size: 26rpx;
font-weight: bold;
color: #222;
margin: 0 30rpx;
}
.detection_box {
font-size: 26rpx;
color: #222;
}
.detection_img {
margin: 0 auto;
width: 54rpx;
height: 54rpx;
}
.detection_img image {
width: 100%;
height: 100%;
}
.detection_hint {
font-size: 22rpx;
color: #94999a;
text-align: center;
margin-top: 20rpx;
}
.itme_list5 {
position: relative;
padding: 45rpx 25rpx 30rpx 25rpx;
box-sizing: border-box;
}
.recommended_box {
width: 150rpx;
height: 45rpx;
display: flex;
align-items: center;
justify-content: center;
background: #ffda44;
border-radius: 0 0 16rpx 16rpx;
font-size: 22rpx;
color: #333;
position: absolute;
right: 24rpx;
top: 0;
}
.foretaste_box {
display: flex;
align-items: center;
font-size: 30rpx;
}
.buyer_recommend {
font-size: 22rpx;
color: #94999a;
margin-left: 20rpx;
}
.buyer_name {
font-size: 30rpx;
color: #222;
}
.recommend_content {
background-color: #fafafa;
border-radius: 16rpx;
padding: 25rpx 25rpx 25rpx 25rpx;
margin-top: 30rpx;
font-size: 26rpx;
color: #222;
position: relative;
}
.icon-shangyinhao {
font-size: 22rpx;
color: #e3e3e3;
}
.triangle {
width: 0;
height: 0;
border-left: 60rpx solid #fafafa;
border-top: 30rpx solid transparent;
border-bottom: 30rpx solid transparent;
position: absolute;
top: -30rpx;
left: 50rpx;
}
.recommend_character {
margin-left: 10rpx;
}
.ingredients {
margin-top: 40rpx;
}
.ingredients_title {
font-size: 30rpx;
font-weight: bold;
color: #222;
text-align: center;
}
.ingredients_img {
width: 280rpx;
height: 280rpx;
}
.ingredients_box {
display: flex;
}
.ingredients_img image {
width: 100%;
height: 100%;
}
.ingredients_item {
width: 400rpx;
font-size: 26rpx;
display: flex;
/* margin-left: 34rpx; */
margin-top: 34rpx;
border: 1px solid red;
}
.ingredients_name {
color: #94999a;
width: 80rpx;
}
.ingredients_content {
width: 300rpx;
display: flex;
flex-wrap: wrap;
margin-left: 30rpx;
border: 1px solid red;
}
.graphic_ingredients_box {
margin-top: 40rpx;
}
.graphic_ingredients {
height: 200rpx;
border: 1rpx solid red;
display: flex;
align-items: center;
justify-content: center;
background-image: url('http://hifresh.w.bronet.cn/assets/wxapp/keshihua@2x.png');
margin-bottom: 20rpx;
}
.graphic_ingredients_background {
width: 450rpx;
height: 110rpx;
background-color: #ffb244;
display: flex;
align-items: center;
justify-content: center;
}
.graphic_ingredients_border {
font-size: 38rpx;
color: #fff;
width: 430rpx;
height: 90rpx;
border: 1rpx solid #fff;
display: flex;
align-items: center;
justify-content: center;
}
.item_list6 {
padding: 30rpx 25rpx 0rpx;
margin-bottom:120rpx
}
.collocation_title {
font-size: 30rpx;
font-weight: bold;
color: #222;
margin-bottom: 40rpx;
}
.collocation {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 39rpx;
}
.collocation_box {
width: 340rpx;
border: 1rpx solid red;
border-radius: 16rpx;
overflow: hidden;
margin-bottom: 20rpx;
}
.collocation_img {
width: 340rpx;
height: 340rpx;
}
.collocation_img image {
width: 100%;
height: 100%;
}
.collocation_content {
background: #fafafa;
font-size: 30rpx;
color: #222;
padding: 22rpx;
}
.bottom_btn {
height: 100rpx;
background: #fff;
display: flex;
justify-content: flex-end;
align-items: center;
position: fixed;
bottom:0;
left: 0;
}
.hint_btn {
width: 218rpx;
display: flex;
justify-content: space-around;
align-items: center;
}
.shop_car {
font-size: 18rpx;
color: #747b7d;
}
.join_btn {
width: 266rpx;
height: 100rpx;
background: linear-gradient(to left, #ffda44, #ffb244);
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #fff;
}
.immediately_btn {
width: 266rpx;
height: 100rpx;
background: linear-gradient(to left, #f99115, #f56800);
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #fff;
}
.tips{
padding: 0 25rpx;
box-sizing: border-box;
}
.tips_content{
margin-top: 30rpx;
line-height: 40rpx;
}
.item_list7 {
height: 368rpx;
background: rgba(255, 255, 255, 1);
border-radius: 16rpx;
box-shadow: 15rpx 0rpx 30rpx rgba(214, 214, 214, 0.6);
font-size: 26rpx;
color: #222;
margin: 0 auto;
margin-bottom: 20rpx;
padding: 34rpx 49rpx;
}
... ...
// pages/cart/cart.js
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
const app=getApp();
var qqmapsdk;
Page({
/**
* 页面的初始数据
*/
data: {
city: '',
imgUrls: [
1, 2, 2
],
num: 3,
count:1,
erji:3,
current_index: 0,
showad: true, //首页广告控制显示
popup_state: false,
nav: 0,
flag: false,
all: false,
currentIndex: 0,
hotList:[],
category:[],
photo:[],
banner:{},
special:[],
state:0,
product_item:[],
cookCategory:[],
goods:[],
two_banner:"",
select:[],
select_item:[],
id:0,
currnetindexs:0,
mainindex:0,
main:0
},
//切换筛选id
changeId(e){
console.log(e)
let id=e.currentTarget.dataset.id;
this.setData({
id:id,
currnetindexs:e.currentTarget.dataset.index,
mainindex: e.currentTarget.dataset.indexs,
main: e.currentTarget.dataset.indexs,
});
console.log(this.data.mainindex);
console.log(this.data.main)
},
//操作筛选
operation_all(){
this.setData({
all:!this.data.all
});
},
//关闭筛选
close_all(){
this.setData({
flag: !this.data.flag
});
let url ='/wxapp/product/getProductSku';
app.post(url).then(r=>{
console.log(r);
});
},
//关闭全部分类
cancel_both_category(){
this.setData({
all:!this.data.all
});
},
// 热卖
hotList() {
let url = '/portal/index/index';
app.post(url).then(r => {
console.log(r);
this.setData({
hotList: r.gohi,
category: r.categories,
special: r.special,
banner:r.welcome,
select: r.screen,
product_item:r.recommended
})
})
},
//获取分类菜谱
category(){
let url ='/portal/index/getCookBookByCategory';
let params={
id:this.data.nav
};
app.post(url,params).then(r=>{
console.log(r);
for(var i=0;i<r.categories.length;i++){
if (r.categories[i].id===this.data.nav){
var two_banner=r.categories[i].more.banner;
this.setData({
two_banner: two_banner,
select:r.screen,
});
}
}
let goods=r.list.goods;
this.setData({
goods:goods
});
});
},
//切换导航
changeNav1() {
this.setData({
nav: 0
});
this.hotList();
},
changeNav2(e) {
let id=e.currentTarget.dataset.id;
this.setData({
nav:id
});
this.category();
},
//筛选
select() {
this.setData({
flag: !this.data.flag
});
},
//重置筛选完成
close_success(){
this.setData({
flag:!this.data.flag
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
qqmapsdk = new QQMapWX({
key: 'KLXBZ-KAFCF-6LVJZ-JQAAL-NCI65-XTF52'
});
this.getaddress();
this.hotList();
this.category();
},
active_btn(e) {
this.setData({
current_index: 1
})
},
getaddress() {
var that = this
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success: function(res) {
var latitude = res.latitude
var longitude = res.longitude
qqmapsdk.reverseGeocoder({
location: {
latitude: latitude,
longitude: longitude
},
success: function(res) {
var ctiy = res.result.address_component.district
that.setData({
city: ctiy
})
},
fail: function(res) {
},
complete: function(res) {
}
});
}
})
},
//中间实现凹凸
// handle_aotu:function(e){
// console.log(e);
// this.setData({
// // currentIndex: e.detail.current
// })
// },
// 跳转至详情
get_contant() {
wx.navigateTo({
url: '../../pages/my/big/big',
})
},
// 跳转商品详情
get_goodsDetial() {
wx.navigateTo({
url: '/pages/index/goodsDetial/goodsDetial',
})
},
toMessage() {
wx.navigateTo({
url: '/pages/my/activityInformation/activityInformation',
})
},
chooseAdress() {
wx.navigateTo({
url: '/pages/my/selectAddress/selectAddress',
})
},
search() {
wx.navigateTo({
url: '/pages/my/serach/serach',
})
},
//控制广告
show_ad() {
this.setData({
showad: false
})
},
//广告页的跳转
goad() {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})
\ No newline at end of file
... ...
{}
\ No newline at end of file
... ...
<view class='page'>
<view class='index_top'>
<view class='index_add' bindtap='chooseAdress'>
<view class='iconfont icon-location'></view>
<text class='city_box'>{{city}}</text>
</view>
<view class='index_input' bindtap='search'>
<input placeholder='有机红颜草莓' placeholder-class='holder'></input>
<icon type='search' size='16' color='#222'></icon>
</view>
<view class='iconfont icon-message' bindtap='toMessage'></view>
</view>
<view class='nav_box'>
<swiper display-multiple-items='{{num}}' class='swiper_nav_box'>
<swiper-item>
<text class='font-nav {{nav===0?"nav_swiper_active":""}}' bindtap='changeNav1'>
推荐
</text>
</swiper-item>
<swiper-item bindtap='active_btn' wx:for='{{category}}' wx:key='{{item.id}}' class='swiper_item'>
<text class='font-nav {{nav===item.id?"nav_swiper_active":""}}' bindtap='changeNav2' data-id='{{item.id}}'>{{item.name}}</text>
</swiper-item>
</swiper>
<view class='nav_text' bindtap='operation_all'>
<text class='iconfont icon-fenlei'></text>
</view>
</view>
<block wx:if='{{nav===0}}'>
<swiper previous-margin='40rpx' next-margin='40rpx' circular='true' display-multiple-items='1' class='swiper_banner_box'>
<swiper-item wx:for='{{special}}' wx:key='{{item.id}}'>
<image src='{{item.image}}' class="slide-image {{currentIndex == 0 ? 'active': ''}}"></image>
</swiper-item>
</swiper>
<view class='safe_box'>
<view>
<text class='iconfont icon-jiance'></text>
<text>安心检测</text>
</view>
<view>
<text class='iconfont icon-xingzhuang'></text>
<text>优选源头</text>
</view>
<view>
<text class='iconfont icon-xingzhuang1'></text>
<text>赔付保证</text>
</view>
</view>
<view class='classfy'>
<!-- <navigator to='{{banner.url}}'> -->
<image src='{{banner.image}}'></image>
<!-- </navigator> -->
</view>
<view class="safety_box function">
<navigator class="safe_item clo" url='goods_detial/goods_detial' hover-class="none">
<image src="../imgs/ic01@2x.png" alt="" mode='aspectFit'></image>
<text>会员俱乐部</text>
</navigator>
<navigator url='../my/balance _center2/balance _center2' class="safe_item clo" hover-class="none">
<image src="../imgs/ic02@2x.png" alt="" mode='aspectFit'></image>
<text>储值送券</text>
</navigator>
<navigator url="../my/balance _center2/balance _center2" class="safe_item clo" hover-class="none">
<image src="../imgs/ic03@2x.png" alt="" mode='aspectFit'></image>
<text>邀请有礼</text>
</navigator>
<navigator href="" class="safe_item clo" hover-class="none">
<image src="../imgs/ic04@2x.png" alt="" mode='aspectFit'></image>
<text>每日签到</text>
</navigator>
</view>
<view class='new_person_box'>
<view class="index_title">
<text class="title_left"></text>
<text class="title_mid">超值新人礼包</text>
<text class="title_right"></text>
</view>
<scroll-view class='scroll_box' scroll-x>
<navigator url='/pages/index/goodsDetial/goodsDetial' class='new_person_item'>
<image src='../imgs/pic1.png'></image>
<view class='goods_name'>三纹鱼片</view>
<view>
<text class='rmb'>￥</text>
<text class='pprice'>26.0</text>
<text class='oprice'>￥52.0</text>
</view>
</navigator>
<navigator url='/pages/index/goodsDetial/goodsDetial' class='new_person_item'>
<image src='../imgs/pic1.png'></image>
<view class='goods_name'>三纹鱼片</view>
<view>
<text class='rmb'>￥</text>
<text class='pprice'>26.0</text>
<text class='oprice'>￥52.0</text>
</view>
</navigator>
<navigator url='/pages/index/goodsDetial/goodsDetial' class='new_person_item'>
<image src='../imgs/pic1.png'></image>
<view class='goods_name'>三纹鱼片</view>
<view>
<text class='rmb'>￥</text>
<text class='pprice'>26.0</text>
<text class='oprice'>￥52.0</text>
</view>
</navigator>
</scroll-view>
</view>
<view class='nav_type_box'>
<view class='nav_type_left'>
<view class='nav_type type_active'>
<text class='iconfont icon-liebiao'></text>
<text>列表</text>
</view>
<view class='nav_type'>
<text class='iconfont icon-wangge'></text>
<text>网格</text>
</view>
<view class='nav_type'>
<text class='iconfont icon-datu'></text>
<text>大图</text>
</view>
</view>
<view class='nav_type_right'>
<text class='iconfont icon-shaixuan'></text>
<text bindtap='select'>筛选</text>
</view>
</view>
<view wx:for='{{product_item}}' wx:key='{{item.id}}'>
<view class='classfy' style='padding-top:40rpx;'>
<image src='{{item.more.banner}}' bindtap='get_contant'></image>
</view>
<view class='goodbox'>
<view class='good_item' bindtap='get_goodsDetial' wx:for='{{item.product_item}}' wx:key='{{item.id}}'>
<view class='good_img'>
<image src='{{item.more.thumbnail}}'></image>
</view>
<view class='good_right'>
<view class='good_name'>{{item.title}}</view>
<view class='good_stand'>{{item.label}}</view>
<view>
<text class='good_pprice'><text class='rmb'>￥</text>{{item.price}}</text>
<text class='good_oprice'><text class='rmb'>￥</text>{{item.old_price}}</text>
</view>
<view>
<view class='good_vipbox'>
<view class='good_vipbox_left'>
<text class='good_vip'><text class='rmb'>￥</text> {{item.vip_price}}</text>
<view class='good_vip_spec'>会员专享</view>
</view>
<view class='good_btn'>
<view class='iconfont icon-gouwuche'></view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class='ad_box' bindtap='show_ad' wx:if='{{showad}}'>
<image src='../imgs/atan@2x.png' mode='widthFix' catchtap='goad'></image>
<view class='iconfont icon-quxiao'></view>
</view>
</view>
<!-- 筛选弹窗LXY -->
<view class='masx_box' bindtap='cancleMask' wx:if='{{popup_state}}'>
<view class='popup_box'>
<view class='popup_content'>
<view class='popup_title'>烹饪时间</view>
<view class='popup_item'>
<view class='popup_item_content'>10分钟</view>
<view class='popup_item_content'>10分钟</view>
<view class='popup_item_content'>10分钟</view>
</view>
</view>
<view class='popup_content'>
<view class='popup_title'>烹饪时间</view>
<view class='popup_item'>
<view class='popup_item_content'>1~2星</view>
<view class='popup_item_content'>1~2星</view>
<view class='popup_item_content'>1~2星</view>
</view>
</view>
<view class='popup_content'>
<view class='popup_title'>烹饪时间</view>
<view class='popup_item'>
<view class='popup_item_content'>微辣</view>
<view class='popup_item_content'>微辣</view>
<view class='popup_item_content'>微辣</view>
<view class='popup_item_content'>微辣</view>
</view>
</view>
<view class='popup_content'>
<view class='popup_title'>烹饪时间</view>
<view class='popup_item'>
<view class='popup_item_content'>
<text class='iconfont icon-xiaoyu'></text>500cal </view>
<view class='popup_item_content'> 500~2000cal </view>
<view class='popup_item_content'> >2000cal</view>
</view>
</view>
<view class='popup_content'>
<view class='popup_title'>烹饪时间</view>
<view class='popup_item'>
<view class='popup_item_content'>10分钟</view>
<view class='popup_item_content'>10分钟</view>
<view class='popup_item_content'>10分钟</view>
</view>
</view>
<view class='popup_content'>
<view class='popup_title'>饮食禁忌/过敏（多选）</view>
<view class='popup_item'>
<view class='popup_item_content'>鸡蛋</view>
<view class='popup_item_content'>乳制品</view>
<view class='popup_item_content'>海鲜</view>
<view class='popup_item_content'>鸡蛋</view>
<view class='popup_item_content'>乳制品</view>
<view class='popup_item_content'>海鲜</view>
<view class='popup_item_content'>鸡蛋</view>
<view class='popup_item_content'>乳制品</view>
<view class='popup_item_content'>后台自定义</view>
</view>
</view>
<view class='popup_hint'>菜系（↓往下轮播可筛选更多属性）</view>
<view class='popup_btn'>
<view class='btn1'>重置</view>
<view class='btn2'>完成</view>
</view>
</view>
</view>
</block>
<block wx:if='{{nav===item.id}}' wx:for='{{category}}' wx:key='{{item.id}}'>
<swiper previous-margin='40rpx' next-margin='40rpx' circular='true' display-multiple-items='1' class='swiper_banner_box'>
<swiper-item>
<image src='{{two_banner}}'></image>
</swiper-item>
</swiper>
<swiper class='swiper_nav_boxs' display-multiple-items='{{count}}'>
<swiper-item class='swiper_items' wx:for='{{goods}}' wx:key='{{item.id}}'>
<view class='{{erji===item.id?"active":""}}'>{{item.name}}</view>
</swiper-item>
</swiper>
<view class='nav_type_box'>
<view class='nav_type_left'>
<view class='nav_type type_active'>
<text class='iconfont icon-liebiao'></text>
<text>列表</text>
</view>
<view class='nav_type'>
<text class='iconfont icon-wangge'></text>
<text>网格</text>
</view>
<view class='nav_type'>
<text class='iconfont icon-datu'></text>
<text>大图</text>
</view>
</view>
<view class='nav_type_right' bindtap='select'>
<text class='iconfont icon-shaixuan'></text>
<text>筛选</text>
</view>
</view>
<block wx:for='{{goods}}' wx:key='{{item.id}}'>
<view class='classfy' style='padding-top:40rpx;'>
<image src='{{item.more.banner}}' bindtap='get_contant'></image>
</view>
<view class='goodbox'>
<view class='good_item' bindtap='get_goodsDetial' wx:for='{{goods[0].child}}' wx:key='{{item.id}}'>
<view class='good_img'>
<image src='{{item.image[0]}}'></image>
</view>
<view class='good_right'>
<view class='good_name'>{{item.title}}</view>
<view class='good_stand'>量大好吃无限回购</view>
<view>
<text class='good_pprice'><text class='rmb'>￥</text>{{item.price}}</text>
<text class='good_oprice'><text class='rmb'>￥</text>{{item.old_price}}</text>
</view>
<view>
<view class='good_vipbox'>
<view class='good_vipbox_left'>
<text class='good_vip'><text class='rmb'>￥</text> {{item.vip_price}}</text>
<view class='good_vip_spec'>会员专享</view>
</view>
<view class='good_btn'>
<view class='iconfont icon-gouwuche'></view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class='ad_box' bindtap='show_ad' wx:if='{{showad}}'>
<image src='../imgs/atan@2x.png' mode='widthFix' catchtap='goad'></image>
<view class='iconfont icon-quxiao'></view>
</view>
</block>
</block>
<!-- 筛选弹窗LXY -->
<view class='masx_box' wx:if='{{flag}}'>
<view class='popup_box'>
<view class='popup_content' wx:for='{{select}}' wx:key='{{item.id}}' wx:for-item="cell" wx:for-index="cellindex" >
<view class='popup_title'>{{cell.name}}</view>
<view class='popup_item'>
<view class='popup_item_content {{currnetindexs===index&&main==mainindex?"active":""}}' wx:for='{{cell.item}}' wx:key='{{item.attribute_value}}' data-id='{{item.id}}' data-indexs="{{cellindex}}" data-index="{{index}}" bindtap='changeId'>{{item.attribute_value}}</view>
</view>
</view>
</view>
<view class='popup_hint' wx:if='{{select.length>5}}'>菜系（↓往下轮播可筛选更多属性）</view>
<view class='popup_btn'>
<view class='btn1'>重置</view>
<view class='btn2' bindtap='close_all'>完成</view>
</view>
</view>
<view class='index_top_mask' wx:if='{{all}}'>
<view class='all_classify'>
<view class='all_classify_one'>
全部分类
<view class='cuowu' bindtap='cancel_both_category'>×</view>
</view>
<view class='all_classify_two'>
<view class='all_classify_two_item'>
<image src='../imgs/goods_1.png'></image>
<text>热卖</text>
</view>
<view class='all_classify_two_item'>
<image src='../imgs/goods_1.png'></image>
<text>热卖</text>
</view>
<view class='all_classify_two_item'>
<image src='../imgs/goods_1.png'></image>
<text>热卖</text>
</view>
<view class='all_classify_two_item'>
<image src='../imgs/goods_1.png'></image>
<text>热卖</text>
</view>
<view class='all_classify_two_item'>
<image src='../imgs/goods_1.png'></image>
<text>热卖</text>
</view>
<view class='all_classify_two_item'>
<image src='../imgs/goods_1.png'></image>
<text>热卖</text>
</view>
</view>
</view>
</view>
</view>
\ No newline at end of file
... ...