|
@@ -1,706 +0,0 @@
|
|
-<template name="buy">
|
|
|
|
- <view class="content">
|
|
|
|
- <view class="cu-bar search bg-white">
|
|
|
|
- <view class="search-form round" @click="naviageToPage('/pageA/product/search?TabCur=')">
|
|
|
|
- <text style='color: #ccc;' class="cuIcon-search"></text>
|
|
|
|
- <input type="text" placeholder="你要买什么粮?" confirm-type="search"></input>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <scroll-view scroll-x class="nav">
|
|
|
|
- <view class="flex text-center">
|
|
|
|
- <view style='position:relative;' class="cu-item flex-sub" :class="item.id==TabCur?'text-white':''" v-for="item in categoryList"@tap="tabSelect" :data-id="item.id">
|
|
|
|
- <!-- <image v-if='item.id==TabCur' style='width:100%;height:100%;position: absolute;z-index:1;left:0;' src='../../static/bg.png'></image> -->
|
|
|
|
- <text>{{item.title}}</text>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- </scroll-view>
|
|
|
|
- <view class="introduce-section">
|
|
|
|
- <view v-for="(item, index) in buyInfo" :key="index" class="guess-item" @click="navToDetailPage(item)">
|
|
|
|
- <view class="price-box">
|
|
|
|
- <view class="title">{{item.title}}</view>
|
|
|
|
- <template v-if='item.isFutures==0'>
|
|
|
|
-
|
|
|
|
- <view v-if="item.price !== 0" class="title-tip">
|
|
|
|
- <text class="price-tip">¥</text>
|
|
|
|
- <text class="price">{{item.price}}</text>
|
|
|
|
- <text class="price-tip">元/吨</text>
|
|
|
|
- </view>
|
|
|
|
- <view v-else class="title-tip">
|
|
|
|
- <text>市场价</text>
|
|
|
|
- </view>
|
|
|
|
- </template>
|
|
|
|
- <view class="title-tip" v-if='item.isFutures==1'>
|
|
|
|
- <text style='color:#828282;margin-bottom:10rpx;display:inline-block;' class="price-tip">今日基差</text>
|
|
|
|
- <view>
|
|
|
|
- <text class="price-tip">¥</text>
|
|
|
|
- <text class="price">{{item.basis}}</text>
|
|
|
|
- <text class="price-tip">元/吨</text>
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <view class='tag tag-bule radius line-pink' v-if='item.isFutures==0'>现货</view>
|
|
|
|
- <view class='tag tag-bule radius line-pink' v-if='item.isFutures==1'>期货</view>
|
|
|
|
- <view class='tag tag-green radius line-green'>{{item.goodsName}}</view>
|
|
|
|
- <view class='tag tag-yellow radius line-yellow'>易粮易运</view>
|
|
|
|
- </view>
|
|
|
|
- <view v-show="isLoadMore">
|
|
|
|
- <uni-load-more :status="loadStatus"></uni-load-more>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <u-back-top :scroll-top="scrollTop" tips="顶部" :custom-style="{backgroundColor: '#a0cfff',color: '#2979ff'}"
|
|
|
|
- :iconStyle="{color: '#2979ff',fontSize: '34rpx'}" mode="square"icon="arrow-up" ></u-back-top>
|
|
|
|
- <!-- <view class="cu-bar tabbar bg-white shadow foot">
|
|
|
|
- <view :class="PageCur=='sale'?'action text-pink':'action text-gray'" @click="NavChange" data-cur="sale">
|
|
|
|
- <view><image style='width:21px;height:23px;' :src="PageCur=='sale'?'https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/zixun_check.png':'https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/zixun.png'"></image></view> 资讯
|
|
|
|
- </view>
|
|
|
|
- <view :class="PageCur=='buy'?'action text-pink':'action text-gray'" @click="NavChange" data-cur="buy">
|
|
|
|
- <view><image style='width:25px;height:25px;' :src="PageCur=='buy'?'https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/jiaoyi_check.png':'https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/jiaoyi.png'"></image></view>交易
|
|
|
|
- </view>
|
|
|
|
- <view :class="PageCur=='trust'?'action text-pink add-action':'action text-gray add-action'" @click="NavChange"
|
|
|
|
- data-cur="trust">
|
|
|
|
- <button :class="PageCur=='trust'?'cuIcon-group':'cu-btn cuIcon-group bg-white '">
|
|
|
|
- <view v-if="liangxinTip" class="cu-tag badge">{{liangxinTip}}</view>
|
|
|
|
- </button>
|
|
|
|
- 粮信
|
|
|
|
- </view>
|
|
|
|
- <view :class="PageCur=='tran'?'action text-pink':'action text-gray'" @click="NavChange" data-cur="tran">
|
|
|
|
- <view><image style='width:25px;height:20px;' :src="PageCur=='tran'?'https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/wuliu_check.png':'https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/wuliu.png'"></image></view> 物流
|
|
|
|
- </view>
|
|
|
|
- <view :class="PageCur=='my'?'action text-pink':'action text-gray'" @click="NavChange" data-cur="my">
|
|
|
|
- <view>
|
|
|
|
- <view v-if="myTip" class="cu-tag badge">{{myTip}}</view>
|
|
|
|
- <image style='width:21px;height:21px;' :src="PageCur=='my'?'https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/wode_check.png':'https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/wode.png'"></image>
|
|
|
|
- </view>
|
|
|
|
- 我的
|
|
|
|
- </view>
|
|
|
|
- </view> -->
|
|
|
|
-
|
|
|
|
- <u-tabbar v-model="current" :list="listTab" :mid-button="true"></u-tabbar>
|
|
|
|
- <drag-button
|
|
|
|
- :isDock="true"
|
|
|
|
- :existTabBar="true"
|
|
|
|
- :isIcon="true"
|
|
|
|
- text="发布"
|
|
|
|
- location="20"
|
|
|
|
- @btnClick="fabu"
|
|
|
|
- />
|
|
|
|
- </view>
|
|
|
|
-</template>
|
|
|
|
-
|
|
|
|
-<script>
|
|
|
|
- export default {
|
|
|
|
- name: "buy",
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- PageCur: "buy",
|
|
|
|
- buyInfo: [],
|
|
|
|
- pages:1,//页数
|
|
|
|
- limit:10 ,//每次取条目数
|
|
|
|
- loadStatus:'loading', //加载样式:more-加载前样式,loading-加载中样式,nomore-没有数据样式
|
|
|
|
- isLoadMore:false ,//是否加载中
|
|
|
|
- showTran:true,
|
|
|
|
- scrollTop: 0,
|
|
|
|
- categoryList:[{title:'我要买粮',id:'0'},{title:'我要卖粮',id:'1'}],
|
|
|
|
- TabCur: 0,
|
|
|
|
- listTab: [
|
|
|
|
- {
|
|
|
|
- iconPath: "https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/zixun.png",
|
|
|
|
- selectedIconPath: "https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/zixun_check.png",
|
|
|
|
- text: '资讯',
|
|
|
|
- count: 0 ,
|
|
|
|
- isDot: true,
|
|
|
|
- customIcon: false,
|
|
|
|
- pagePath:'/pages/sale/information'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- iconPath: "https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/jiaoyi.png",
|
|
|
|
- selectedIconPath: "https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/jiaoyi_check.png",
|
|
|
|
- text: '交易',
|
|
|
|
- customIcon: false,
|
|
|
|
- pagePath:'/pages/buy/transaction'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- iconPath: "chat",
|
|
|
|
- selectedIconPath: "chat",
|
|
|
|
- text: '粮信',
|
|
|
|
- midButton: true,
|
|
|
|
- customIcon: false,
|
|
|
|
- pagePath:'/pages/home/home'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- iconPath: "https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/wuliu.png",
|
|
|
|
- selectedIconPath: "https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/wuliu_check.png",
|
|
|
|
- text: '物流',
|
|
|
|
- customIcon: false,
|
|
|
|
- pagePath:'/pages/tran/tran'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- iconPath: "https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/wode.png",
|
|
|
|
- selectedIconPath: "https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/wode_check.png",
|
|
|
|
- text: '我的',
|
|
|
|
- count: this.myTip,
|
|
|
|
- isDot: false,
|
|
|
|
- customIcon: false,
|
|
|
|
- pagePath:'/pages/user/user'
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
- current: 1
|
|
|
|
- };
|
|
|
|
- },
|
|
|
|
- onShow() {
|
|
|
|
- uni.hideTabBar()
|
|
|
|
- if(uni.getStorageSync("PageCur")){
|
|
|
|
- this.PageCur = uni.getStorageSync("PageCur");
|
|
|
|
- }
|
|
|
|
- this.showTran = uni.getStorageSync("showTran")
|
|
|
|
- console.log("buy onShow")
|
|
|
|
- },
|
|
|
|
- onLoad(options) {
|
|
|
|
- console.log("buy onload")
|
|
|
|
- // #ifdef H5
|
|
|
|
- this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
|
|
|
|
- // #endif
|
|
|
|
- this.cateId = options.tid ? options.tid : 0;
|
|
|
|
- this.keywords = options.keywords ? options.keywords : ''
|
|
|
|
- this.loadData();
|
|
|
|
- uni.hideTabBar()
|
|
|
|
- },
|
|
|
|
- onPageScroll(e) {
|
|
|
|
- this.scrollTop = e.scrollTop;
|
|
|
|
- },
|
|
|
|
- //下拉刷新
|
|
|
|
- onPullDownRefresh() {
|
|
|
|
- this.pages = 1
|
|
|
|
- this.isLoadMore = false
|
|
|
|
- this.loadStatus = 'loading'
|
|
|
|
- this.loadData()
|
|
|
|
- },
|
|
|
|
- onReachBottom(){ //上拉触底函数
|
|
|
|
- if(!this.isLoadMore){ //此处判断,上锁,防止重复请求
|
|
|
|
- this.isLoadMore=true
|
|
|
|
- this.pages += 1
|
|
|
|
- this.getIndexBuyData()
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- naviageToPage(page) {
|
|
|
|
- page=page+this.TabCur
|
|
|
|
- uni.navigateTo({
|
|
|
|
- url: page,
|
|
|
|
- fail() {
|
|
|
|
- uni.switchTab({
|
|
|
|
- url: page
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- tabSelect(e) {
|
|
|
|
- this.TabCur = e.currentTarget.dataset.id;
|
|
|
|
- this.category = this.TabCur
|
|
|
|
- this.pages = 1
|
|
|
|
- this.loadData()
|
|
|
|
- },
|
|
|
|
- fabu() {
|
|
|
|
- uni.navigateTo({
|
|
|
|
- url: `/pageB/trust/trust`
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- NavChange: function(e) {
|
|
|
|
- // console.log(e)
|
|
|
|
- var preCur = this.PageCur
|
|
|
|
- this.PageCur = e.currentTarget.dataset.cur
|
|
|
|
- uni.setStorageSync('PageCur', this.PageCur);
|
|
|
|
- switch (this.PageCur) {
|
|
|
|
- case "sale":
|
|
|
|
- uni.switchTab({
|
|
|
|
- url: '/pages/sale/information'
|
|
|
|
- });
|
|
|
|
- break;
|
|
|
|
- case "buy":
|
|
|
|
- uni.switchTab({
|
|
|
|
- url: '/pages/buy/transaction'
|
|
|
|
- });
|
|
|
|
- break;
|
|
|
|
- case "tran":
|
|
|
|
- uni.switchTab({
|
|
|
|
- url: '/pages/tran/tran'
|
|
|
|
- });
|
|
|
|
- break;
|
|
|
|
- case "trust":
|
|
|
|
- // uni.showModal({
|
|
|
|
- // title: '温馨提示',
|
|
|
|
- // content: '此功能正在开发中',
|
|
|
|
- // showCancel: false,
|
|
|
|
- // confirmText: '确定',
|
|
|
|
- // success: (e) => {
|
|
|
|
- // },
|
|
|
|
- // fail: () => {},
|
|
|
|
- // complete: () => {}
|
|
|
|
- // })
|
|
|
|
- // this.PageCur = preCur
|
|
|
|
- // uni.setStorageSync('PageCur', this.PageCur);
|
|
|
|
- uni.setTabBarItem({
|
|
|
|
- index: 0,
|
|
|
|
- pagePath:'pages/home/home'
|
|
|
|
- })
|
|
|
|
- uni.switchTab({
|
|
|
|
- url: '/pages/home/home'
|
|
|
|
- });
|
|
|
|
- break;
|
|
|
|
- case "my":
|
|
|
|
- uni.switchTab({
|
|
|
|
- url: '/pages/user/user'
|
|
|
|
- });
|
|
|
|
- break;
|
|
|
|
- };
|
|
|
|
-
|
|
|
|
- },
|
|
|
|
- //加载商品 ,带下拉刷新和上滑加载
|
|
|
|
- async loadData(type = 'add', loading) {
|
|
|
|
- const that = this
|
|
|
|
- uni.showLoading({
|
|
|
|
- title: '正在加载'
|
|
|
|
- })
|
|
|
|
- var param1= ''
|
|
|
|
- var param2=''
|
|
|
|
- if(that.TabCur==0){
|
|
|
|
- param1='integral'
|
|
|
|
- param2='getIndexData'
|
|
|
|
- }else{
|
|
|
|
- param1='buy'
|
|
|
|
- param2='getBuyListInfo'
|
|
|
|
- }
|
|
|
|
- console.log(param1, param2)
|
|
|
|
- that.$api.request(param1, param2, {
|
|
|
|
- page: 1,
|
|
|
|
- limit:10
|
|
|
|
- },failres => {
|
|
|
|
- that.$api.msg(failres.errmsg)
|
|
|
|
- that.isLoadMore=false
|
|
|
|
- that.loadStatus = 'nomore'
|
|
|
|
- if(that.pages>1){that.pages-=1}
|
|
|
|
- uni.hideLoading()
|
|
|
|
- }).then(res => {
|
|
|
|
- let data=null
|
|
|
|
- if(that.TabCur==0){
|
|
|
|
- data=res.data.saleInfo
|
|
|
|
- }else{
|
|
|
|
- data= res.data
|
|
|
|
- }
|
|
|
|
- uni.stopPullDownRefresh()
|
|
|
|
-
|
|
|
|
- //采购信息
|
|
|
|
- if(data.length > 0){
|
|
|
|
- that.buyInfo = data
|
|
|
|
- that.isLoadMore=false
|
|
|
|
- }
|
|
|
|
- else{
|
|
|
|
- if(that.pages>1){that.pages-=1}
|
|
|
|
- that.isLoadMore=true
|
|
|
|
- that.loadStatus = 'nomore'
|
|
|
|
- }
|
|
|
|
- uni.hideLoading()
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- //详情
|
|
|
|
- navToDetailPage(item) {
|
|
|
|
- let id = item.id;
|
|
|
|
- if(item.price===0){
|
|
|
|
- this.contactUs();
|
|
|
|
- }
|
|
|
|
- else{
|
|
|
|
- if(this.TabCur==0){
|
|
|
|
- uni.navigateTo({
|
|
|
|
- url: `/pageA/product/detail?id=${id}`
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
- else{
|
|
|
|
- uni.navigateTo({
|
|
|
|
- url: `/pageA/product/detail_buy?id=${id}`
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- contactUs() {
|
|
|
|
- const that = this
|
|
|
|
- uni.makePhoneCall({
|
|
|
|
- // 手机号
|
|
|
|
- phoneNumber: '15145408888',
|
|
|
|
- // 成功回调
|
|
|
|
- success: (res) => {
|
|
|
|
- console.log('调用成功!')
|
|
|
|
- },
|
|
|
|
- // 失败回调
|
|
|
|
- fail: (res) => {
|
|
|
|
- console.log('调用失败!')
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
- },
|
|
|
|
- getIndexBuyData(){
|
|
|
|
- const that = this
|
|
|
|
- var pages=that.pages
|
|
|
|
- var limit=that.limit
|
|
|
|
-
|
|
|
|
- uni.showLoading({
|
|
|
|
- title: '正在加载'
|
|
|
|
- })
|
|
|
|
- that.$api.request('buy', 'getBuyListInfo', {
|
|
|
|
- page: pages,
|
|
|
|
- limit:limit
|
|
|
|
- },failres => {
|
|
|
|
- that.$api.msg(failres.errmsg)
|
|
|
|
- that.isLoadMore=false
|
|
|
|
- that.loadStatus = 'nomore'
|
|
|
|
- if(that.pages>1){that.pages-=1}
|
|
|
|
- uni.hideLoading()
|
|
|
|
- }).then(res => {
|
|
|
|
- let data = res.data
|
|
|
|
- //采购信息
|
|
|
|
- if(data.length > 0){
|
|
|
|
- that.buyInfo = that.buyInfo.concat(data)
|
|
|
|
- that.isLoadMore=false
|
|
|
|
- }
|
|
|
|
- else{
|
|
|
|
- if(that.pages>1){that.pages-=1}
|
|
|
|
- that.isLoadMore=true
|
|
|
|
- that.loadStatus = 'nomore'
|
|
|
|
- }
|
|
|
|
- uni.hideLoading()
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- }
|
|
|
|
-</script>
|
|
|
|
-
|
|
|
|
-<style lang="scss" scoped>
|
|
|
|
- page,
|
|
|
|
- .content {
|
|
|
|
- // background: $page-color-base;
|
|
|
|
- }
|
|
|
|
- .cu-tag.badge {
|
|
|
|
- right: 26rpx;
|
|
|
|
- }
|
|
|
|
- .cu-item {
|
|
|
|
- height: 80rpx;
|
|
|
|
- display: inline-block;
|
|
|
|
- line-height: 80rpx;
|
|
|
|
- }
|
|
|
|
- .search-form{
|
|
|
|
- background:#fff;
|
|
|
|
- box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
|
|
|
- }
|
|
|
|
- .title-tip{
|
|
|
|
- color:#E63113;
|
|
|
|
- text-align: right;
|
|
|
|
- }
|
|
|
|
- .tag-bule{
|
|
|
|
- background:#CDE7FB;
|
|
|
|
- color:#0B4572;
|
|
|
|
- }
|
|
|
|
- .tag-green{
|
|
|
|
- background:#C6F7BC;
|
|
|
|
- color:#065112;
|
|
|
|
- }
|
|
|
|
- .tag-yellow{
|
|
|
|
- background:#FBF4B1;
|
|
|
|
- color:#5C4409;
|
|
|
|
- }
|
|
|
|
- .tag{
|
|
|
|
- padding:5px;
|
|
|
|
- display: inline-flex;
|
|
|
|
- font-size:22rpx;
|
|
|
|
- margin:3px;
|
|
|
|
- }
|
|
|
|
- .text-white{
|
|
|
|
- color:#fff;
|
|
|
|
- }
|
|
|
|
- .text-white text{
|
|
|
|
- position: relative;
|
|
|
|
- z-index: 2;
|
|
|
|
- background: linear-gradient(45deg, #3DC146, #B2D612);
|
|
|
|
- padding: 5px 10px;
|
|
|
|
- border-radius: 38rpx;
|
|
|
|
- }
|
|
|
|
-.guess-section{
|
|
|
|
- padding-bottom: 100upx;
|
|
|
|
- display:flex;
|
|
|
|
- flex-wrap:wrap;
|
|
|
|
- padding: 0 30upx;
|
|
|
|
- background: #fff;
|
|
|
|
- .guess-item{
|
|
|
|
- display:flex;
|
|
|
|
- flex-direction: column;
|
|
|
|
- width: 98%;
|
|
|
|
- border-bottom:1px solid #ccc;
|
|
|
|
- }
|
|
|
|
- .image-wrapper{
|
|
|
|
- width: 100%;
|
|
|
|
- height: 330upx;
|
|
|
|
- border-radius: 3px;
|
|
|
|
- overflow: hidden;
|
|
|
|
- image{
|
|
|
|
- width: 100%;
|
|
|
|
- height: 100%;
|
|
|
|
- opacity: 1;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .title{
|
|
|
|
- font-size: $font-lg;
|
|
|
|
- color: #121212;
|
|
|
|
- }
|
|
|
|
- .price-orther{
|
|
|
|
- font-size: $font-sm;
|
|
|
|
- color:$font-color-base;
|
|
|
|
- }
|
|
|
|
- .price{
|
|
|
|
- font-size: 64rpx;
|
|
|
|
- color: #39b54a;
|
|
|
|
- line-height: 1;
|
|
|
|
- padding-right: 10upx;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .goods1{
|
|
|
|
- font-size: $font-sm;
|
|
|
|
- color: $font-color-base;
|
|
|
|
- }
|
|
|
|
- .goods2{
|
|
|
|
- font-size: $font-sm;
|
|
|
|
- color: $font-color-base;
|
|
|
|
- padding-left: 10%;
|
|
|
|
- }
|
|
|
|
- .goods3{
|
|
|
|
- font-size: $font-sm;
|
|
|
|
- color: $font-color-base;
|
|
|
|
- padding-left: 10%;
|
|
|
|
- }
|
|
|
|
- .goods4{
|
|
|
|
- font-size: $font-sm;
|
|
|
|
- color: #ff5500;
|
|
|
|
- }
|
|
|
|
- .goods5{
|
|
|
|
- font-size: $font-sm;
|
|
|
|
- color: $font-color-base;
|
|
|
|
- }
|
|
|
|
- .view-item{
|
|
|
|
- width: 100%;
|
|
|
|
- // line-height: 40upx;
|
|
|
|
- padding-top: 10upx;
|
|
|
|
- }
|
|
|
|
- .confirm-btn {
|
|
|
|
- margin-left: 20%;
|
|
|
|
- }
|
|
|
|
- .date-time {
|
|
|
|
- margin-left: 30%;
|
|
|
|
- }
|
|
|
|
- .padding-xs-tmp {
|
|
|
|
- padding: 15upx 10upx 10upx 10upx;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .navbar {
|
|
|
|
- position: fixed;
|
|
|
|
- left: 0;
|
|
|
|
- top: var(--window-top);
|
|
|
|
- display: flex;
|
|
|
|
- width: 100%;
|
|
|
|
- height: 80upx;
|
|
|
|
- background: #fff;
|
|
|
|
- box-shadow: 0 2upx 10upx rgba(0, 0, 0, .06);
|
|
|
|
- z-index: 10;
|
|
|
|
-
|
|
|
|
- .nav-item {
|
|
|
|
- flex: 1;
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: center;
|
|
|
|
- align-items: center;
|
|
|
|
- height: 100%;
|
|
|
|
- font-size: 30upx;
|
|
|
|
- color: $font-color-dark;
|
|
|
|
- position: relative;
|
|
|
|
-
|
|
|
|
- &.current {
|
|
|
|
- color: $base-color;
|
|
|
|
-
|
|
|
|
- &:after {
|
|
|
|
- content: '';
|
|
|
|
- position: absolute;
|
|
|
|
- left: 50%;
|
|
|
|
- bottom: 0;
|
|
|
|
- transform: translateX(-50%);
|
|
|
|
- width: 120upx;
|
|
|
|
- height: 0;
|
|
|
|
- border-bottom: 4upx solid $base-color;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .p-box {
|
|
|
|
- display: flex;
|
|
|
|
- flex-direction: column;
|
|
|
|
-
|
|
|
|
- .yticon {
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- justify-content: center;
|
|
|
|
- width: 30upx;
|
|
|
|
- height: 14upx;
|
|
|
|
- line-height: 1;
|
|
|
|
- margin-left: 4upx;
|
|
|
|
- font-size: 26upx;
|
|
|
|
- color: #888;
|
|
|
|
-
|
|
|
|
- &.active {
|
|
|
|
- color: $base-color;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .xia {
|
|
|
|
- transform: scaleY(-1);
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .cate-item {
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: center;
|
|
|
|
- align-items: center;
|
|
|
|
- height: 100%;
|
|
|
|
- width: 80upx;
|
|
|
|
- position: relative;
|
|
|
|
- font-size: 44upx;
|
|
|
|
-
|
|
|
|
- &:after {
|
|
|
|
- content: '';
|
|
|
|
- position: absolute;
|
|
|
|
- left: 0;
|
|
|
|
- top: 50%;
|
|
|
|
- transform: translateY(-50%);
|
|
|
|
- border-left: 1px solid #ddd;
|
|
|
|
- width: 0;
|
|
|
|
- height: 36upx;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- /* 分类 */
|
|
|
|
- .cate-mask {
|
|
|
|
- position: fixed;
|
|
|
|
- left: 0;
|
|
|
|
- top: var(--window-top);
|
|
|
|
- bottom: 0;
|
|
|
|
- width: 100%;
|
|
|
|
- background: rgba(0, 0, 0, 0);
|
|
|
|
- z-index: 95;
|
|
|
|
- transition: .3s;
|
|
|
|
-
|
|
|
|
- .cate-content {
|
|
|
|
- width: 630upx;
|
|
|
|
- height: 100%;
|
|
|
|
- background: #fff;
|
|
|
|
- float: right;
|
|
|
|
- transform: translateX(100%);
|
|
|
|
- transition: .3s;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- &.none {
|
|
|
|
- display: none;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- &.show {
|
|
|
|
- background: rgba(0, 0, 0, .4);
|
|
|
|
-
|
|
|
|
- .cate-content {
|
|
|
|
- transform: translateX(0);
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .cate-list {
|
|
|
|
- display: flex;
|
|
|
|
- flex-direction: column;
|
|
|
|
- height: 100%;
|
|
|
|
-
|
|
|
|
- .cate-item {
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- height: 90upx;
|
|
|
|
- padding-left: 30upx;
|
|
|
|
- font-size: 28upx;
|
|
|
|
- color: #555;
|
|
|
|
- position: relative;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .two {
|
|
|
|
- height: 64upx;
|
|
|
|
- color: #303133;
|
|
|
|
- font-size: 30upx;
|
|
|
|
- background: #f8f8f8;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .active {
|
|
|
|
- color: $base-color;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- /* 销售信息 */
|
|
|
|
- .introduce-section {
|
|
|
|
- background: #fff;
|
|
|
|
- padding: 20upx 30upx;
|
|
|
|
- padding-bottom: 100upx;
|
|
|
|
- .guess-item {
|
|
|
|
- padding-bottom: 20upx;
|
|
|
|
- border-bottom: 1px solid #ccc;
|
|
|
|
- }
|
|
|
|
- .title {
|
|
|
|
- font-size: 28upx;
|
|
|
|
- color: $font-color-dark;
|
|
|
|
- font-weight:bold;
|
|
|
|
- height: 50upx;
|
|
|
|
- line-height: 50upx;
|
|
|
|
- flex:2.5;
|
|
|
|
- }
|
|
|
|
- .title-tip {
|
|
|
|
- flex:1;
|
|
|
|
- }
|
|
|
|
- .price-box {
|
|
|
|
- display: flex;
|
|
|
|
- align-items: baseline;
|
|
|
|
- height: 70upx;
|
|
|
|
- padding: 10upx 0;
|
|
|
|
- font-size: 26upx;
|
|
|
|
- color: $uni-color-primary;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .price {
|
|
|
|
- font-size: $font-lg + 2upx;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .m-price {
|
|
|
|
- margin: 0 12upx;
|
|
|
|
- color: $font-color-light;
|
|
|
|
- text-decoration: line-through;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .coupon-tip {
|
|
|
|
- align-items: center;
|
|
|
|
- padding: 4upx 10upx;
|
|
|
|
- background: $uni-color-primary;
|
|
|
|
- font-size: $font-sm;
|
|
|
|
- color: #fff;
|
|
|
|
- border-radius: 6upx;
|
|
|
|
- line-height: 1;
|
|
|
|
- transform: translateY(-4upx);
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .bot-row {
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- height: 50upx;
|
|
|
|
- font-size: $font-sm;
|
|
|
|
- color: $font-color-light;
|
|
|
|
-
|
|
|
|
- view {
|
|
|
|
- flex: 1;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-</style>
|
|
|