羲云社区团购小程序详细页设计

功能介绍

详细页主要是展示活动内容，以及特定的营销功能，我在设计的时候，将各种营销功能进行统一整合，以达到增加订单金额的效果。
1，优惠券，优惠券在很多应用中有会有，但是我的团购中，每一个活动拥有单独的优惠券，仅该活动可用。
2，秒杀秒杀在一下大的团购小程序中也有，但是，他们的秒杀是对商品的秒杀，处了降价，没有任何的特性
本应用设计的秒杀，用户仅可以购买一件，以达到真正秒杀抢购的效果
3，满赠满赠是系统的灵魂，用户购买一定金额的货品后，可以获得一定的商品赠品，会非常有效的提高订单量。
4，阶梯价，也可以有效提高单品的销售数量
5，配送运费，为了免单，也可以提高订单量
主要营销功能处了以上外，还有一些比如全场折扣，团长CPS分成等等，均在系统中，可以满足大部分需求。
上图（图片商品仅供参考，完全非销售所用）

在一个社区团购中，非常重要的就是一个整体的设计概念，因为我有自己的实体门店，所以在设计的时候，考虑了非常多的用户购物习惯。
主页代码如下

<import src="../temp.wxml"/>
<template is="nav" data="{{nav}}"></template>
<view class="main_top m" style="background:url({{list.bg}}) no-repeat center;background-size:cover;">
</view><view class="main" style="padding-top:{{nav.top+nav.safe_top}}px;">
<view class="shop_info">
<view class="logo" style="background: url({{shop.logo}}) no-repeat center;background-size: cover;"></view>
<view class="shop_name">{{shop.shot_name}}</view>
<view class="shop_addr"><view class="icon icon-bxs-phone-call" wx:if="{{shop.phone}}" bindtap="call"></view>
<view class="icon icon-daohang" bindtap="go" data-url="/pages/map/index?lat={{shop.latitude}}&lng={{shop.longitude}}"></view>
<text wx:if="{{dis}}" bindtap="go" data-url="/pages/map/index?lat={{shop.latitude}}&lng={{shop.longitude}}">距离您{{dis}}</text>
</view>
<view class="shop_info_box">
<text wx:if="{{shop.state==1}}">已实名认证</text><text wx:if="{{shop.hd_num>0}}">{{shop.hd_num}}个活动</text><text wx:if="{{shop.gz_num>0}}">{{shop.gz_num}}人正在关注</text>
</view><view class="share_bt_box" >
<view class="icon icon-share1" bindtap="draw_hb"></view>
<view class="bt" bindtap="gz_this" wx:if="{{need_gz==1}}">订阅</view>
</view>
</view><view class="edit_box none">
<view class="title">{{list.title}}</view>
<view class="hd_info" wx:if="{{list.people_num==0}}">一大波人正在赶来下单</view>
<view class="hd_info" wx:else>{{list.view}}人看过,共{{list.people_num}}人下单</view>
<!--时间-->
<view class="is_start">
<text>{{list.hd_state}}</text>
<view class="hd_time" wx:if="{{time_show}}">
<view class="item" wx:if="{{time_show.year>0}}"><view class="val">{{time_show.year}}</view><view class="c">年</view></view>
<view class="item" wx:if="{{time_show.days>0}}"><view class="val">{{time_show.days}}</view><view class="c">天</view></view>
<view class="item" wx:if="{{time_show.hour>0}}"><view class="val">{{time_show.hour}}</view><view class="c">时</view></view>
<view class="item" wx:if="{{time_show.minit>0}}"><view class="val">{{time_show.minit}}</view><view class="c">分</view></view>
<view class="val">{{time_show.second}}</view><view class="c">秒</view>
</view>
</view>
<!--特色-->
<view class="hui_box" wx:if="{{miao || mz}}">
<view wx:if="{{miao}}" class="item"><view class="icon icon-creative"></view>仅<text>{{miao.price}}</text>元秒杀商品<text>{{miao.pro.title}}</text>。</view>
<view wx:if="{{mz}}" class="item"><view class="icon icon-creative"></view>满<text>{{mz.price}}</text>元<text>{{mz.title}}</text>。</view>
<view wx:if="{{list.zk<100}}" class="item"><view class="icon icon-jine"></view>全场<text>{{list.zk}}</text>优惠。</view>
</view><text class="info">{{list.info}}</text><!--html-->
<view class="html">
<view class="item" wx:for="{{list.html}}" wx:key="i" wx:for-index="ins">
<text wx:if="{{item.type=='text'}}" value="{{item.value}}" >{{item.value}}</text><image wx:if="{{item.type=='img'}}" src="{{item.value}}" class="img" mode="widthFix" bindtap="preview" data-url="{{item.value}}"></image>
<video wx:if="{{item.type=='vedio'}}" src="{{item.value}}" ></video><view class="small" wx:if="{{item.type=='small'}}">
<view class="item" wx:for="{{item.value}}" wx:key="i" wx:index="index" >
<view style="background:url({{item.img_240}}) no-repeat center;background-size: cover;" bindtap="preview" data-url="{{item.img_750}}"></view>
</view>
</view>
</view></view>
<!--html 结束-->
<!--tag-->
<view class="tags" wx:if="{{info.tag_num>0}}">
<view class="b">标签:</view>
<text wx:for="{{list.tag}}" wx:key="i" wx:index="index">{{index}}</text>
</view><!--活动优惠券--></view><!--商品-->
<view class="edit_box ">
<view class="edit_box_b">~~ 在售商品 ~~</view><!--秒杀-->
<view class="pro_item" wx:if="{{miao}}">
<view class="pro_img" style="background: url({{miao.pro.img[0].img_240}}) no-repeat center;background-size: cover;">
<view class="icon icon-shouqing" wx:if="{{miao.total==0}}"></view>
</view>
<view class="pro_title">{{miao.title?miao.title:miao.pro.title}}</view>
<view class="new_or_hot"><view class="is_hot" style="width:auto;padding-left:5px;padding-right: 5px;">秒杀</view></view>
<view class="pro_price"><text class="c">秒杀价￥</text>{{miao.price}}<text class="old" >{{miao.pro.old>0?miao.pro.old:miao.pro.price}}</text></view>
<view class="buy_bt_box">
<view class="icon icon-add_circle_px_rounded add_cart_bt m m {{miao.total==0?'gay_icon':''}}" bindtap="{{miao.total==0?'':'cart_add'}}" data-c="miao" data-index="0">
<text class="num" wx:if="{{cart.miao.buy>0}}">{{cart.miao.buy}}</text>
</view></view></view><view class="pro_item" wx:for="{{pro}}" wx:key="id" wx:index="index">
<view class="pro_img" style="background: url({{item.img}}) no-repeat center;background-size: cover;">
<view class="icon icon-shouqing" wx:if="{{item.total==0}}"></view>
</view>
<view class="icon edit_bt icon-bianji" wx:if="{{can_edit==1}}" bindtap="go" data-url="/pages/pro/edit?id={{item.id}}"></view>
<view class="pro_title">{{item.title}}</view>
<view class="new_or_hot">
<view class="is_new" wx:if="{{item.is_new==1}}">新</view>
<view class="is_hot" wx:if="{{item.is_hot==1}}">热</view>
</view>
<view class="pro_info" wx:if="{{item.info}}">{{item.info}}</view>
<view class="pro_price">
<text class="c">￥</text>{{item.p[0]}}.<text class="b">{{item.p[1]}}</text><text class="old" wx:if="{{item.old>item.price}}">{{item.old}}</text></view><view class="buy_bt_box {{(item.total>0 && item.total<=5)?'shengyu_show':''}}" wx:if="{{!item.data}}">
<view class="icon icon-add_circle_px_rounded add_cart_bt m {{item.total==0?'gay_icon':''}}" bindtap="cart_add" data-c="pro" data-index="{{index}}"></view>
<view class="has_buy" wx:if="{{cart.pro[index].buy>0}}">
<view class="buy_num">{{cart.pro[index].buy}}</view>
<view class="icon icon-minus-circle1 add_cart_bt" bindtap="cart_add" data-c="pro" data-index="{{index}}" data-ac="jian"></view>
</view></view><view class="buy_bt_box {{((item.total>0 && item.total<=5) || list.pro[ins]['sell']>0)?'shengyu_show':''}}" wx:if="{{item.data}}">
<view class="select_buy_bt m {{item.total==0?'gay_bt':''}}" bindtap="open_select_data" data-index="{{index}}">选规格
<text class="num" wx:if="{{cart.pro[index].buy>0}}">{{cart.pro[index].buy}}</text>
</view>
</view><view class="shengyu" wx:if="{{((item.total>0 && item.total<=5) || list.pro[ins]['sell']>0)}}">
<text wx:if="{{item.total>0 && item.total<=5}}">仅剩{{item.total}}件</text>
<text wx:else>已售{{list.pro[ins]['sell']}}件</text>
</view></view><!--赠品-->
<view class="pro_item m {{cart.mz.buy>0?'is_zeng':''}}" wx:if="{{mz}}">
<view class="icon icon-xuanzhongjiaobiao"></view>
<view class="pro_img" style="background: url({{mz.pro.img[0].img_240}}) no-repeat center;background-size: cover;">
<view class="icon icon-shouqing" wx:if="{{mz.total==0}}"></view>
</view>
<view class="pro_title">{{mz.title?mz.title:mz.pro.title}}</view>
<view class="new_or_hot"><view class="is_hot">赠</view></view>
<view class="pro_info">{{mz.info?mz.info:'赠品图片仅供参考。'}}</view>
<view class="mz_info">满<text class="c">￥</text>{{mz.price}}赠</view>
</view>
<view class="hd_warn">{{list.warn?list.warn:shop.shop_name+'对本活动拥有最终解释权。'}}</view>
</view><view class="edit_box" style="margin-top:30px;">
<view class="edit_box_b">~~ 跟团记录 ~~</view>
<view class="no_order" wx:if="{{!order}}">{{info.no_order?info.no_order:'暂时还没有跟团记录'}}</view>
<view class="order_box" wx:if="{{order}}">
<view class="order_item" wx:for="{{order}}" wx:key="i">
<view class="logo" style="background: url({{item.logo}}) no-repeat center;background-size: cover;"></view>
<view class="nickname">{{item.nickname}}<text>{{item.time}}</text></view><view class="order_pro" wx:for="{{item.pro}}" wx:key="i"><text wx:if="{{item.c=='秒杀'}}">【秒杀】</text><text wx:if="{{item.c=='赠品'}}">【赠品】</text>{{item.title}}<view>+{{item.num}}</view>
</view>
</view><view class="get_more_order" bindtap="get_more_order" wx:if="{{order_num==10}}">获取更多订单</view>
</view></view><view class="edit_box">
<view class="msg_input_box" bindtap="win_open" data-c="msg_input_show">
<text class="icon icon-bianji"></text>{{msg.total}}条留言，快来说一下您的感受吧！
</view><view class="msg_list" wx:for="{{msg.item}}" wx:key="i">
<view class="msg_user"><view class="logo" style="background:url({{item.logo}}) no-repeat center;background-size: cover;"></view><text class="nickname">{{item.nickname}}</text><text class="time">{{item.time}}</text>
</view>
<text class="msg">{{item.msg}}</text>
</view>
<view class="more_msg" bindtap="more_msg" wx:if="{{msg.num==10}}">{{more_msg_text}}</view></view></view><template is="web_bottom" data="{{can_edit}}"></template><view class="buy_bottom m {{can_edit==1?'edit_show':''}}">
<view class="buy_box">
<view class="icon_box">
<view class="icon icon-dingdan2" bindtap="go" data-url="/pages/index/order">
<view class="num" wx:if="{{my_order_num>0}}">{{my_order_num>100?'99':my_order_num}}</view>
<text>我的订单</text></view>
<view class="icon icon-gouwuche" bindtap="win_open" data-c="cart_show">
<view class="num" wx:if="{{cart_num>0}}">{{cart_num>100?'99':cart_num}}</view>
<text>购物车</text></view>
</view>
<view class="cart_total" wx:if="{{total>0}}" style="{{cart.quan?'line-height:50px':''}}">
<text class="c">合计:￥</text>{{total}}
</view>
<view class="hd_quan_info" wx:if="{{cart.quan.id>0}}">满<text>{{cart.quan.man}}</text>减<text>{{cart.quan.price}}</text>元</view><view class="buy_bt m {{can_buy==1?'':'gay_bt'}}" bindtap="{{can_buy==1?'buy':''}}">{{list.state==1?'跟团购买':'活动未开始'}}</view>
</view><view class="adm_bottom">
<view class="icon_box">
<view class="item" bindtap="go" data-url="/pages/shop/order?hd_id={{list.id}}">
<icon class="icon icon-dingdan2"></icon>
<text>订单管理</text>
</view><view class="item" bindtap="win_open" data-c="cz_show">
<icon class="icon icon-bianji"></icon>
<text>活动操作</text>
</view><view class="item" bindtap="go" data-url="/pages/adm/hd_list">
<icon class="icon icon-list"></icon>
<text>活动列表</text>
</view></view>
</view></view><view class="win m win_{{pro_select_show}}">
<view class="handle">选择商品<icon class="icon icon-close" bindtap="win_close" data-c="pro_select_show"></icon></view>
<scroll-view class="pro_data_list"><view class="stp1 {{is_select_c==index?'select':''}}" wx:for="{{select_pro.data}}" wx:key="i" wx:index="index" bindtap="{{item.num==0?'':'select_this_c'}}" data-c="{{index}}" ><view wx:if="{{item.img}}" class="item_img" style="background: url({{item.img}}) no-repeat center;background-size: cover;">
<text class="m">{{index}}</text>
<view class="icon icon-shouqing" wx:if="{{item.num==0}}"></view>
</view>
<view wx:else class="item_bt"><text class="m {{item.num==0?'gay_bt':''}}">{{index}}</text></view>
</view><view wx:if="{{select_pro.data[is_select_c]['item']}}" >
<view class="b">选择商品</view>
<view wx:for="{{select_pro.data[is_select_c]['item']}}" wx:index="index" wx:key="i" class="stp1 {{sub_index==index?'select':''}}" bindtap="{{item.num==0?'':'select_this_sub'}}" data-index="{{index}}">
<view wx:if="{{item.img}}" class="item_img" style="background: url({{item.img}}) no-repeat center;background-size: cover;">
<text class="m">{{item.title}}</text>
<view class="icon icon-shouqing" wx:if="{{item.num==0}}"></view>
</view>
<view wx:else class="item_bt"><text class="m {{item.num==0?'gay_bt':''}}">{{item.title}}</text></view>
</view></view></scroll-view>
<view class="data_buy_bottom">
<view class="select_price">
<text class="c">￥</text>{{select_price}}
<view>{{select_info}}</view>
</view><view class="select_num"><icon class="icon icon-add_circle_px_rounded" bindtap="select_num_add" data-c="add"></icon>
<text>{{select_num}}</text>
<icon class="icon icon-minus-circle-outline m {{select_num>1?'icon_show':''}}"  bindtap="select_num_add" data-c="jian"></icon>
</view><view class="select_add" bindtap="select_cart_add" data-index="{{pro_index}}"><text>￥</text>{{select_total}}</view>
</view>
</view>
<view class="bg" wx:if="{{pro_select_show=='show'}}" bindtap="win_close" data-c="pro_select_show"></view><view class="win m win_{{cz_show}}">
<view class="handle">操作<icon class="icon icon-close" bindtap="win_close" data-c="cz_show"></icon></view>
<view class="hd_cz">
<view bindtap="hd_state" data-val="1" wx:if="{{list.state==0}}">发布此活动</view>
<view bindtap="rgo" data-url="/pages/index/editor?id={{list.id}}">修改活动内容</view>
<view bindtap="go" data-url="/pages/hd/analyze?id={{list.id}}"  wx:if="{{list.state==1}}">统计活动信息</view><view bindtap="hd_state" data-val="0" wx:if="{{list.state==1}}">结束本活动</view>
<view bindtap="creat_new" data-c="copy">复制并创建新活动</view>
<view bindtap="creat_new" data-c="new">创建全新活动</view>
<view bindtap="hd_del" wx:if="{{list.state==0}}">删除此活动</view><view bindtap="win_close" data-c="cz_show">取消操作</view>
</view></view>
<view class="bg" wx:if="{{cz_show=='show'}}" bindtap="win_close" data-c="cz_show"></view><view class="win m win_{{cart_show}}">
<view class="handle">
<text bindtap="clean_cart" class="clean_cart_bt">清空购物车</text>
我的购物车<icon class="icon icon-close" bindtap="win_close" data-c="cart_show"></icon></view>
<scroll-view scroll-y="true" class="cart_list" scroll-y="true">
<view wx:if="{{!cart.pro && !cart.miao}}" class="no_cart">您的购物车还没有商品</view>
<view wx:else style="float: left;width: 100%;height: 100%;padding-bottom: 20px;"><view class="cart_item" wx:if="{{cart.miao.buy==1}}">
<view class="cart_img" style="background: url({{miao['pro']['img'][0].img_240}}) no-repeat center;background-size: cover;"></view>
<view class="cart_pro_title">{{miao['pro']['title']}}</view>
<view class="is_miao">秒杀商品</view>
<view class="cart_pro_price"><text class="c">￥</text>{{miao['price']}}<text class="x">×1</text></view>
<view class="num_box"><icon class="icon icon-shanchu" bindtap="miao_del"></icon></view>
</view><view  wx:for="{{cart.pro}}" wx:for-index="ins" wx:key="id" wx:for-item="items">
<view wx:if="{{items.data}}" class="if_box ">
<view class="if_box" wx:for="{{items.data}}" wx:key="i" wx:for-index="iix">
<view class="cart_item" wx:for="{{item}}" wx:key="i" wx:index="index"><!--存在商品分类--><view class="cart_img" style="background: url({{pro[ins]['img']}}) no-repeat center;background-size: cover;"></view>
<view class="cart_pro_title">{{pro[ins]['title']}}</view>
<view class="cart_pro_info">{{item.info}}</view>
<view class="cart_pro_price"><text class="c">￥</text>{{item['price']}}</view>
<view class="num_box">
<icon class="icon icon-add_circle_px_rounded" bindtap="cart_num_add" data-ac="data" data-c="{{iix}}" data-index="{{ins}}" data-val="1" data-ins="{{index}}"></icon>
<view>{{item.buy}}</view>
<icon class="icon icon-minus-circle1" bindtap="cart_num_add" data-ac="data" data-c="{{iix}}" data-index="{{ins}}" data-val="-1" data-ins="{{index}}"></icon>
</view></view>
</view>
</view>
<view wx:if="{{!items.data}}" class="if_box cart_item">
<view class="cart_img" style="background: url({{pro[ins]['img']}}) no-repeat center;background-size: cover;"></view>
<view class="cart_pro_title">{{pro[ins]['title']}}</view>
<view class="cart_pro_price"><text class="c">￥</text>{{pro[ins]['price']}}</view><view class="num_box">
<icon class="icon icon-add_circle_px_rounded" bindtap="cart_num_add" data-index="{{ins}}" data-val="1"></icon>
<view>{{items.buy}}</view>
<icon class="icon icon-minus-circle1" bindtap="cart_num_add" data-index="{{ins}}" data-val="-1"></icon>
</view>
</view>
</view>
<!--满赠--><view class="cart_item" wx:if="{{cart.mz.buy==1}}">
<view class="cart_img" style="background: url({{mz['pro']['img'][0].img_240}}) no-repeat center;background-size: cover;"></view>
<view class="cart_pro_title">{{mz['pro']['title']}}</view>
<view class="is_mz">下单可以获得赠品</view>
</view>
</view>
</scroll-view>
</view><view class="bg" wx:if="{{cart_show=='show'}}" bindtap="win_close" data-c="cart_show"></view><template is="quan" data="{{quan,quan_show,info}}"></template><view class="msg_win m msg_{{msg_input_show}}">
<view class="handle">留言<icon class="icon icon-close" bindtap="win_close" data-c="msg_input_show"></icon></view>
<textarea placeholder="说说您对本活动的感受！" bindinput="msg_input" value="{{msg_inout}}"></textarea>
<view class="win_bt"><view bindtap="submit_msg">提交留言</view></view>
</view>
<view class="bg" wx:if="{{msg_input_show=='show'}}" bindtap="win_close" data-c="msg_input_show"></view><view class="share_list hb_{{hb_show}}"><swiper class="share" bindchange="hb_change">
<swiper-item wx:for="{{list.img}}" wx:key="i" wx:index="index" class="share_swiper_box">
<view class="in_box">
<canvas id="hb_{{index}}" type="2d" data-index="{{index}}" disable-scroll="true"></canvas>
</view>
</swiper-item>
</swiper>
<view class="share_save_bt"><text bindtap="hb_save">保存海报</text></view>
<view class="hb_close icon icon-roundclosefill" bindtap="win_close" data-c="hb_show"></view>
</view>
<view class="bg" wx:if="{{hb_show=='show'}}" bindtap="win_close" data-c="hb_show"></view>

CSS

page{background: #fff;}
.main_top{position: absolute;width: 100%;height:300px;z-index: 0;}
.main{float: left;width: 100%;padding:15px;}
.main_top::after{position: absolute;width: 100%;z-index: 1;background:  linear-gradient(rgba(255,255,255,0), #fff);bottom: 0;left: 0;height:150rpx;content: '';}
.shop_info{float: left;width: 100%;margin-top:50px;padding-left:180rpx;min-height: 180rpx;color: #fff;margin-bottom:20px;}
.shop_info .logo{position: absolute;width:140rpx;height: 140rpx;left:10rpx;top: 0;border-radius: 50%;border:4px solid rgba(255,255,255,.8);}
.shop_info .shop_name{float: left;width: 100%;height:40rpx;line-height:40rpx;font-size: 22px;overflow: hidden;font-weight: bold;margin-top:6rpx;text-shadow: 1px 1px #666;}
.nav{overflow: visible;}
.shop_addr{float: left;width: 100%;line-height:20px;margin-top: 5px;font-size: 13px;z-index: 100;}
.shop_addr .icon{float: left;width:20px;height:20px;background: rgba(0,0,0,.3);border-radius: 50%;margin-right: 5px;line-height: 20px !important;text-align: center;}
.shop_addr text{float: left;}
.shop_info_box{float: left;width:80%;}
.shop_info_box text{float: left;padding-left:6px;padding-right:6px;height: 18px;line-height: 18px;background: rgba(0,0,0,.3);border-radius:3px;margin-right:3px;font-size: 12px;margin-top:3px;color: #eee;}
.share_bt_box{position: absolute;right: 0;top:-20px;z-index: 100;}
.share_bt_box .icon{float: right;width:36px;height: 36px;background: rgba(0,0,0,.3);color: #fff;line-height: 36px;text-align: center;border-radius: 50%;margin-right: 10px;font-size: 20px;}
.share_bt_box .bt{float: right;height: 36px;line-height: 36px;margin-right: 10px;padding-right: 15px;padding-left: 15px;border-radius: 18px;background: #00a47c;font-size: 14px;}.nav_icon{width: 36px;background: rgba(0,0,0,.3);color: #fff;border: none;border-radius: 50%;height: 36px;padding: 0;}
.nav_icon .icon{float: left;width: 100%;height: 100%;padding: 0;margin: 0;text-align: center;font-weight: normal;color: rgba(255,255,255,.8);}
.edit_box{float: left;width: 100%;margin-top: 10px;border-radius:10px}
.title{float: left;width: 100%;line-height:32px;font-size:25px;font-weight:bold;}
.hd_info{float: left;width: 100%;margin-top:8px;color: #ccc;}
.edit_box .info{float: left;width: 100%;line-height:30px;margin-top:10px;font-size: 18px;}.tags{float: left;width: 100%;margin-top:10px;z-index: 100;}
.tags .b{float: left;width: 100%;font-size: 18px;font-weight: bold;}
.tags text{color: #00a47c;margin-right: 10px;height: 32px;line-height: 32px;}
.hui_box{float: left;width: 100%;margin-top: 10px;padding:15px;background: #e4fff8;border-radius: 10px;}
.hui_box .item{float: left;width: 100%;height:24px;line-height: 24px;color: #aaa;}
.hui_box text{font-weight: bold;margin-left: 2px;margin-right: 2px;color: #00a47c;}
.hui_box .icon{float: left;margin-right: 5px;height: 24px !important;line-height: 24px !important;color: #00a47c;font-size: 17px !important;}.html{float: left;width: 100%;}
.html .item{float: left;width: 100%;z-index: 100;}
.html .img{float: left;width: 100%;margin-top:10px;z-index:100;}.small{float: left;width: 100%;z-index: 100;margin-top: 10px;}
.small .item{float: left;width:33.33%;padding: 5px;}
.small .item view{float: left;width: 100%;height:180rpx;}
.small text{position: absolute;font-size: 20px;top: 10px;right: 10px;color: #fff;z-index: 100;}
.small .add{background: #efefef;line-height: 160rpx;font-size: 40px;color: #999;text-align: center;}
.html video{float: left;width: 100%;}
.html text{float: left;width: 100%;margin-top:10px;line-height:30px;font-size: 18px;}.edit_box_b{float: left;width: 100%;text-align: center;font-size:22px;font-weight: bold;margin-bottom: 5px;}
.pro_item{float: left;width: 100%;min-height:220rpx;padding-left: 250rpx;margin-top:15px;border-radius:10px;padding-top:5px;background: #fff;box-shadow:0px 20px 20px -15px rgba(0,0,0,0.2),1px 0px 0px 0px rgba(0,0,0,0.05) ,-1px -1px 0px 0 rgba(0,0,0,0.05);overflow: hidden;}
.pro_item .icon-shouqing{position: absolute;width:100%;height:220rpx;line-height: 220rpx;text-align: center;font-size:80px;color: rgba(255,255,255,.75);background: rgba(0,0,0,.4);}
.gay_bt{background: #aaa !important;}
.gay_icon{color: #aaa !important;}
.pro_img{position: absolute;width:230rpx;height:220rpx;left: 0;top: 0;}
.pro_title{float: left;width: 100%;line-height:22px;font-size:18px;font-weight: bold;max-height: 44px;overflow: hidden;}.pro_price{position: absolute;width: 100%;bottom:10rpx;left: 0;padding-left: 250rpx;color: crimson;font-size:24px;font-weight: bold;}
.pro_info{float: left;width: 100%;color: crimson;font-size: 14px;margin-top: 3px;}
.pro_price .c{font-size: 12px;font-weight: normal;}
.pro_price .old{color: #999;font-weight: normal;text-decoration: line-through;margin-left: 10px;font-size: 11px;}
.pro_price .b{font-size: 18px;}
.buy_bt_box{position: absolute;right: 0rpx;bottom:10rpx;z-index: 100;padding-right: 10px;}
.add_cart_bt{font-size:38px;color: #00a47c;float:right;height: 40px;line-height: 40px;}
.buy_bt_box .num{position: absolute;width:20px;height:20px;color: #fff;font-size: 12px;text-align: center;line-height:20px;border-radius: 50%;z-index: 100;top:-2px;background: #00a47c;right: 0px;overflow: hidden;}.shengyu{position: absolute;right:15px;bottom:10rpx;color:crimson;font-size:13px;}
.buy_bt_box .icon-minus-circle1{color: #eee;font-size:36px;height: 40px;line-height: 40px;}.buy_bt_box .buy_num{float: right;height:40px;line-height: 40px;padding-left:5px;padding-right:5px;font-size:20px;}
.buy_bt_box .has_buy{float: right;}
.select_buy_bt{float: right;height:36px;line-height: 36px;padding-right: 15px;padding-left: 15px;background: #00a47c;color: #fff;font-size: 16px;border-radius: 20px;}
.select_buy_bt .num{top:-5px}.new_or_hot{float: left;width: 100%;}
.new_or_hot view{float: left;width:22px;line-height: 22px;text-align: center;line-height: 22px;border-radius:6px;font-size: 12px;color: #fff;margin-right: 5px;margin-top: 5px;}
.new_or_hot .is_new{background: #00a47c;}
.new_or_hot .is_hot{background: crimson;}
.shengyu_show{bottom: 40rpx;}
.mz_info{position: absolute;width: 100%;bottom: 20rpx;padding-left: 250rpx;color:#00a47c;font-size: 18px;font-weight: bold;left: 0;}
.mz_info .c{font-size: 14px;}
.pro_item .icon-xuanzhongjiaobiao{position: absolute;bottom:-2px;right:-2px;font-size: 40px;color: #00a47c;display: none;}
.is_zeng{background: #e1fff0 !important;}
.is_zeng .icon-xuanzhongjiaobiao{display: block;}.buy_bottom{position: fixed;width: 100%;left: 0;bottom:-60px;background: #fff;text-align: center;z-index: 1000;}
.buy_bottom .buy_box{float: left;width: 100%;height:70px;padding-left:110px;box-shadow: 0px -1px 5px 0 #ccc;padding-right:290rpx;}
.buy_bottom .icon_box{position: absolute;width:100px;left: 0;top:15px;height: 40px;}
.buy_bottom .icon_box .icon{float: left;width: 50%;text-align: center;height:50px;line-height:28px;font-size:30px;}
.buy_bottom .icon_box .icon text{position: absolute;width: 100%;bottom: 0;left: 0;font-size: 12px;color: #666;}
.buy_bottom .icon_box .num{position: absolute;width: 18px;height: 18px;line-height: 18px;font-size: 11px;background: #00a47c;color: #fff;border-radius: 50%;top:-5px;right:10%;}
.buy_bottom .buy_bt{position: absolute;width: 270rpx;right: 10px;top:10px;height:50px;line-height: 50px;border-radius:25px;background: #00a47c;color: #fff;font-size: 16px;text-align: center;}
.cart_total{float: left;width: 100%;height: 60px;line-height: 60px;color: crimson;font-size:22px;font-weight: bold;text-align: left;margin-top:8px;}
.cart_total .c{font-size: 12px;font-weight: normal;}
.hd_quan_info{position: absolute;width: 100%;left: 0;bottom:6px;color: #999;height: 16px;line-height: 16px;font-size: 13px;padding-left:110px;text-align: left;}
.hd_quan_info text{color: #00a47c;font-weight: bold;padding-left: 2px;padding-right: 2px;}.edit_show{bottom: 0;}.adm_bottom{width: 100%;height:60px;bottom: 0;left: 0;background: #fff;z-index: 1000;float: left;box-shadow:0px -1px 0 0 #eee;z-index: 100;text-align: center;}
.adm_bottom .icon_box{float: left;width: 100%;z-index: 100;margin-top: -10px;}
.adm_bottom .item{float: left;width: 33.33%;text-align: center;color: #00a47c;}
.adm_bottom .item .icon{float: left;width: 100%;height:30px;line-height: 30px;font-size: 30px;text-align: center !important;}
.adm_bottom .item text{float: left;width: 100%;height: 20px;line-height: 20px;font-size: 11px;color: #666;}.hd_cz{float: left;width: 100%;padding-bottom: 20px;}
.hd_cz view{float: left;width: 100%;height:60px;line-height:60px;font-size: 18px;text-align: center;}
.no_order{float: left;width: 100%;margin-top:10px;text-align: center;color: #999;font-size: 17px;}
.hd_warn{float: left;width: 100%;margin-top: 10px;color: crimson;font-size: 14px;line-height:18px;}.edit_box .handle{float: left;width: 100%;height: 32px;line-height: 32px;font-size: 18px;font-weight: bold;}.cart_list{float: left;width: 100%;max-height:75vh;min-height: 30vh;overflow: hidden;padding-left: 10px;padding-right: 10px;padding-bottom:10px;border-bottom: 1px solid #eee;}
.cart_item{float: left;width: 100%;height:160rpx;margin-top: 5px;padding-left:180rpx;padding-top: 10rpx;}
.cart_item .cart_img{position: absolute;width: 160rpx;height: 140rpx;top: 10rpx;left:0;border-radius: 5px;}
.cart_pro_title{float: left;width: 100%;line-height: 20px;max-height: 40px;overflow: hidden;font-size: 17px;font-weight: bold;}
.cart_pro_price{position: absolute;width: 100%;color: #00a47c;bottom: 10rpx;padding-left: 180rpx;left: 0;font-size:20px;}
.cart_pro_price .c{font-size: 12px;}
.cart_pro_price .x{margin-left: 10px;color: #000;font-size: 16px;}
.cart_pro_info{float: left;width: 100%;line-height: 20px;color: crimson;}
.num_box .icon-shanchu{font-size: 22px !important;color: #999;}
.num_box{position: absolute;bottom:0rpx;right: 0;z-index: 100;}
.num_box icon{float: right;font-size:32px;height: 32px;line-height: 32px;}
.num_box view{float: right;height: 32px;line-height: 32px;width:20px;font-size:18px;text-align: center;}
.num_box .icon-add_circle_px_rounded{color: #00a47c;}
.num_box .icon-minus-circle1{color: #eee;}
.cart_item .is_miao{float: left;height: 20px;line-height: 20px;background:crimson;color: #fff;font-size: 12px;padding-left: 5px;padding-right: 5px;border-radius: 5px;margin-top: 5px;}
.cart_item .is_mz{float: left;margin-top: 5px;font-weight: bold;color:#00a47c;font-size:16px;}
.is_start{float: left;width: 100%;font-size: 16px;font-weight: normal;margin-top:8px;}
.is_start text{float: left;color: #ccc;margin-right:5px;height: 24px;line-height: 24px;}.hd_time{float: left;}
.hd_time .item{float: left;}
.hd_time .val{float: left;padding-left:5px;padding-right:5px;color: #fff;height: 24px;line-height: 24px;background:#00a47c;border-radius:5px;margin-left: 3px;min-width:24px;text-align: center;font-size: 14px;font-weight: bold;}
.hd_time .c{float: left;height: 24px;line-height: 24px;color: #666;font-size: 14px;margin-left: 3px;}.no_cart{float: left;width: 100%;color: #999;margin-top: 10px;font-size: 16px;}
.clean_cart_bt{position: absolute;left: 10px;font-size:15px;color:#00a47c;font-weight: normal;top:8px;z-index: 100;}.pro_data_list{float: left;width:100%;padding-left: 5px;padding-right:5px;min-height:50vh;padding-bottom:70px;position: relative;max-height: 75vh;}
.pro_data_list .stp1{float: left;width: 33.33%;padding: 5px;text-align: center;}
.pro_data_list .item_img{float: left;width: 100%;height:180rpx;border-radius: 5px;overflow: hidden;}
.pro_data_list .item_img text{position: absolute;width: 100%;height: 25px;line-height: 25px;bottom: 0;left: 0;background: rgba(0,0,0,.5);color: #fff;font-size: 13px;overflow: hidden;}
.item_img .icon-shouqing{position: absolute;width: 100%;height:180rpx;line-height: 180rpx;background: rgba(0,0,0,.4);color: rgba(255,255,255,.5);text-align: center;font-size:60px;}.pro_data_list .b{float: left;width: 100%;height: 32px;line-height:32px;border-bottom: 1px solid #eee;margin-bottom: 5px;}.pro_data_list .item_bt{float: left;width: 100%;height: 180rpx;}
.pro_data_list .item_bt text{float: left;width: 100%;height: 80rpx;line-height: 80rpx;border-radius: 40rpx;padding-left: 10px;padding-right: 10px;background: #efefef;font-size: 13px;overflow: hidden;margin-top: 50rpx;}.pro_data_list .select text{background: #00a47c;color: #fff;}
.data_buy_bottom{position: absolute;width: 100%;height:70px;bottom: 0;left: 0;padding-left: 10px;padding-right: 120px;padding-bottom:15px;box-shadow: -1px 0 5px 0px #ccc;}
.select_price{float: left;width:50%;height: 50px;line-height:35px;font-size: 20px;font-weight: bold;color: crimson;margin-top: 5px;}
.select_price text{float: left;font-size: 12px;font-weight: normal;}
.select_price view{position: absolute;width: 100%;bottom: 0;color: #00a47c;font-size: 14px;left: 0;font-weight: normal;margin-top: 5px;line-height: 16px;}
.select_num{float:right;width: 50%;margin-top: 5px;}
.select_num icon{float: right;height: 50px;line-height: 50px;font-size: 30px;color: crimson;}
.select_num  text{float: right;height: 50px;line-height: 50px;padding-left: 5px;padding-right: 5px;font-size: 18px;}
.select_add{position: absolute;width: 100px;height: 40px;line-height: 40px;top:10px;right:10px;background: crimson;color: #fff;font-size:16px;border-radius: 20px;text-align: center;}
.select_add text{font-size: 12px;}
.select_num .icon-minus-circle-outline{color: #ccc;}
.select_num .icon_show{color: #999;}
.if_box{float: left;width: 100%;}.win .handle{height:50px;line-height:50px;border-bottom: 1px solid #eee;}
.win{padding-top:50px;}.order_box{float: left;width: 100%;}
.order_item{float: left;width: 100%;padding-left:50px;border-bottom: 1px solid #eee;margin-top: 10px;padding-bottom:8px;}
.order_item .logo{position: absolute;width:40px;height:40px;border-radius: 50%;left: 0;top:0px;}
.order_item .nickname{float: left;width: 100%;height:40px;line-height: 40px;font-size:18px;font-weight: bold;padding-right: 100px;overflow: hidden;}
.order_item .nickname text{position: absolute;right: 0;top: 0;font-size: 13px;font-weight: normal;color: #999;}
.order_pro{float: left;width: 100%;height:26px;line-height: 26px;font-size: 15px;text-align: right;overflow: hidden;padding-right:30px;}
.order_pro view{position: absolute;width:30px;color: #000;right: 0;top: 0;font-weight: bold;}
.order_pro text{font-weight: bold;color: crimson;}
.get_more_order{float: left;width: 100%;margin-top: 10px;color: #ccc;text-align: center;font-size: 15px;z-index: 100;}
.none{display: block;}
.edit_bt{position: absolute;right: 5px;top: 5px;z-index: 100;color: crimson;font-size: 20px;}.msg_input_box{float: left;width: 100%;margin-top: 20px;height:50px;line-height: 50px;text-align: center;border-radius: 5px;background: #efefef;color: #666;}.msg_win textarea{float: left;width: 100%;margin-top: 10px;height:100px;}
.win_bt{float: left;padding-left: 10%;padding-right: 10%;margin-top: 5px;}
.win_bt view{float: left;width: 100%;height:50px;line-height:50px;background: #00a47c;color: #fff;text-align: center;font-size: 17px;border-radius: 5px;z-index: 100;}.msg_list{float: left;width: 100%;padding-top: 10px;padding-bottom: 10px;border-bottom: 1px solid #eee;}
.msg_user{float: left;width: 100%;height: 36px;line-height: 36px;padding-left: 42px;padding-right: 50px;}
.msg_user .logo{position: absolute;width: 36px;height: 36px;left: 0;top: 0;border-radius: 50%;}
.msg_user .nickname{float: left;width: 100%;overflow: hidden;font-size: 17px;}
.msg_user .time{position: absolute;right: 0;color: #999;font-size: 14px;}
.msg_list .msg{float: left;width: 100%;line-height:26px;font-size: 15px;margin-top: 10px;color: #666;}
.more_msg{float: left;width: 100%;margin-top: 10px;color: #999;text-align: center;font-size: 14px;}.share{width: 100%;padding-left: 20px;padding-right: 20px;height:70vh;overflow: hidden;float: left;}
.share_swiper_box{float: left;width: 100%;height:70vh;}
.share_swiper_box .in_box{float: left;width: 100%;height: 100%;}
canvas{float: left;width: 100%;height: 100%;}
.share_list{position: fixed;width: 100%;height: 100vh;left: 0;top: 0;z-index: 10000000;padding-top: 10vh;display: none;}
.share_save_bt{float: left;width: 100%;text-align: center;margin-top: 40px;}
.share_save_bt text{padding-top: 15px;padding-right:40px;padding-left:40px;padding-bottom: 15px;border-radius: 5px;color: #fff;background: #00a47c;z-index: 1000;}
.hb_show{display: block;}
.hb_close{font-size: 40px;color: rgba(255,255,255,.5);float: left;margin-top:30px;z-index: 1000;text-align: center;width: 100%;}

JS代码由于没有统一的设计以及代码还处于开发阶段，所以暂时不提供

测试地址：app.zjhn.top/test/
试用地址:app.zjhn.top
注册后可以完全免费测试和试用，代码会不断的进行更新

羲云社区团购微信小程序活动详细页（界面及功能设计）相关推荐

社区团购微信小程序的设计与实现
目录 1 系统简介 2 系统相关技术 2.1微信开发者工具 2.2前端开发技术 2.3后端开发技术 2.4数据库技术 3 需求分析 3.1 功能模块 3.1.1 系统功能模块模型 3.2 系统核心业务 ...
基于java springboot 社区团购微信小程序源码
去年火了一整年的社区团购,一直将战火烧到了2021年春节.春节期间,一些菜市场和小店暂停营业,居民置办年货和买菜的需求剧增,各大以买菜为主要卖点的社区团购平台,盯上了这个难得的冲单时机. 后台主要用到 ...
为什么社区团购需要小程序？
很多人将社区团购的火爆归因于团长模式的创新,却忽视了小程序的主推作用. 可以说没有小程序就没有社区团购的火爆,那么社区团购为何需要小程序,社区拼团小程序又需要哪些功能,下面一一为你解答: 一.为什么社 ...
多模板DIY代付社区团购商城小程序开发
多模板DIY代付社区团购商城小程序开发后台功能商家端强大基础功能.店铺管理.商品管理.订单管理.会员管理.营销管理.财务管理.分销配置.商城设置.系统配置.模板市场.实体商品.订单列表.会员信息. ...
独立版狮子鱼15.0.1社区团购直播小程序商城源码
之前公司做社区团购项目买的源码.现在还在一直更新中,以后有新的版本出来,我尽量也发上来. 本人不懂技术,是否有后门请自行检查. 官方文档: 数据库对比独立版安装教程: 升级日志: V15.0.1 [ ...
独立版狮子鱼16.0.2社区团购直播小程序商城+团长功能+接龙分销+拼团秒杀
介绍: [优化] 非预售vip会员商品价格 [优化] 非预售vip会员满减活动重要提醒:(升级前请务必做好代码.数据库备份) 本次更新需要重新上传小程序,小程序在Data/V16.0.2/wepro ...
做一个社区配送的小程序利用小程序搭建自己的社区配送营销商城，小程序社区O2O，社区网络超市微信小程序开发
小程序线上入口开放越来越多,进入小程序的行业也逐渐增多,尤其是这几个月,线下实体行业纷纷转向小程序,其中尤其以零售店,便利店为主,所以今天和大家一起来聊聊社区网络超市微信小程,便利店小程序. 一般的社 ...
华为云物联网平台的微信小程序开发
第0章简介上上期出了一个华为云物联网平台的Android APP应用开发教程, 根据后台的私信,包括华为云物联网IOT论坛里和公众号里,发现大家对物联网平台的移动端的开发需求还是很大的,接下来,带 ...
***腾讯云直播（含微信小程序直播）研究资料汇总-原创
***腾讯云直播(含微信小程序直播)研究资料汇总-原创原文: ***腾讯云直播(含微信小程序直播)研究资料汇总-原创这段时间抽空研究了下直播技术,综合比较了下腾讯云直播的技术和文档方面最齐全,现把 ...

羲云社区团购微信小程序活动详细页（界面及功能设计）

羲云社区团购小程序详细页设计

功能介绍

羲云社区团购微信小程序活动详细页（界面及功能设计）相关推荐

最新文章

热门文章

羲云社区团购微信小程序 活动详细页 （界面及功能设计）

羲云社区团购小程序 详细页设计

功能介绍

羲云社区团购微信小程序 活动详细页 （界面及功能设计）相关推荐

最新文章

热门文章

羲云社区团购微信小程序活动详细页（界面及功能设计）

羲云社区团购小程序详细页设计

羲云社区团购微信小程序活动详细页（界面及功能设计）相关推荐