wes 多宝福袋

addons/dbapp/api/config.js

@@ -3,12 +3,14 @@ export let baseURL = '/api'
 let serverURL = ''
 if (process.env.NODE_ENV === 'development') {
 	// serverURL = 'http://duobao.meikangjw.com' // 正式
-	serverURL = 'http://db.mp.dongerkj.com' // 测试
-	// serverURL = 'http://db.ylshuzi.com'
+	// serverURL = 'http://db.mp.dongerkj.com' // 测试
+	// serverURL = 'http://test.fudaiduobao.com'
+	serverURL = 'http://db.ylshuzi.com'
 } else {
 	// serverURL = 'http://duobao.meikangjw.com'  // 正式
-	serverURL = 'http://db.mp.dongerkj.com' // 测试
-	// serverURL = 'http://db.ylshuzi.com'
+	// serverURL = 'http://db.mp.dongerkj.com' // 测试
+	// serverURL = 'http://test.fudaiduobao.com'
+	serverURL = 'http://db.ylshuzi.com'
 }
 
 // #ifndef H5

addons/dbapp/manifest.json

@@ -1,6 +1,6 @@
 {
 	"name": "多宝福袋",
-	"appid": "__UNI__BBB8EDF",
+	"appid": "__UNI__3D2CA22",
 	"description": "",
 	"versionName": "1.5.0",
 	"versionCode": 150,
@@ -120,7 +120,7 @@
 	"h5": {
 		"optimization": {
 			"treeShaking": {
-				"enable": true // 开启摇树优化
+				"enable": false // 开启摇树优化
 			}
 		},
 		"devServer": {
@@ -128,11 +128,19 @@
 			"proxy": {
 				"/api": {
 					// "target" : "http://duobao.meikangjw.com",
-					"target": "https://db.ylshuzi.com",
+					// "target" : "http://test.fudaiduobao.com",
+					// "target": "http://db.ylshuzi.com",
+					// "target": "http://db.mp.dongerkj.com",
+					"target": "http://127.0.3.40",
 					"changeOrigin": true,
 					"ws": true
 				}
 			}
+		},
+		"title": "多宝福袋",
+		"router": {
+			"mode": "history",
+			"base": "./"
 		}
 	},
 	"uniStatistics": {

addons/dbapp/pages/index/components/listWaterfall.vue

@@ -1,187 +1,194 @@
-<template>
-  <view class="good-list" :style="{ paddingTop: listHeight ? listHeight : itemTop + 'px' }">
-    <view
-      class="good-item bg-white radius"
-      :style="{ position: item.position, left: item.left, top: item.top }"
-      v-for="(item, i) in listMap"
-      :key="item.id"
-      @click="$jump({ url: '/pagesGoods/goodsDetail/goodsDetail' }, { sn: item.goods_sn })"
-    >
-      <image class="cover" :src="item.goods_img"></image>
-      <!--      <view>{{ i }}</view>-->
-
-      <view class="info">
-        <u-text :text="item.goods_name" size="26rpx" lines="2"></u-text>
-
-        <view class="price flex flex-between align-center">
-          <view class="bold">
-            <text>￥</text>
-            <text class="price-num">{{ Number(item.price) }}</text>
-          </view>
-
-          <view class="limit" v-if="item.restrictions_num > 0"
-            >限购{{ item.restrictions_num }}个</view
-          >
-        </view>
-
-        <view class="score">赠送积分{{ item.rebate_score }}</view>
-
-        <view class="flex flex-between statistics">
-          <view class="sc"
-            >收藏
-            <text class="statistics_num">{{ item.attension_count }}</text>
-          </view>
-          <view class="xl"
-            >销量
-            <text class="statistics_num">{{ item.sales_volume }}</text>
-          </view>
-        </view>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script>
-export default {
-  props: {
-    list: {
-      type: Array,
-      default: () => []
-    }
-  },
-  watch: {
-    list: {
-      handler(nv, ov) {
-        // 解决下拉刷新时，list 可能比上一次 长度小的问题 分页从第n页下拉刷新到第一页
-        let listMap = nv.length >= ov.length ? [...this.listMap] : []
-        ov = nv.length >= ov.length ? ov : []
-        // console.log(ov, listMap)
-
-        let differArr = nv.slice(ov.length)
-        for (let i = 0; i < differArr.length; i++) {
-          differArr[i] = { ...differArr[i], position: 'static', top: 0, left: 0 }
-        }
-
-        this.listMap = [...listMap, ...differArr]
-
-        this.$nextTick(() => {
-          this.leftHeight = 0
-          this.rightHeight = 0
-          this.listResize()
-        })
-      },
-      deep: true
-    }
-  },
-  data() {
-    return {
-      leftHeight: 0,
-      rightHeight: 0,
-      listMap: [],
-      listHeight: ''
-    }
-  },
-  computed: {
-    itemTop() {
-      return uni.upx2px(20)
-    },
-    itemLeft() {
-      return uni.upx2px(360)
-    }
-  },
-  methods: {
-    getListHeight() {
-      let max = this.leftHeight >= this.rightHeight ? this.leftHeight : this.rightHeight
-      this.listHeight = max + this.itemTop + 'px'
-    },
-    listResize() {
-      setTimeout(() => {
-        let query = uni.createSelectorQuery().in(this)
-        query
-          .selectAll('.good-item')
-          .boundingClientRect((res = []) => {
-            for (let i = 0; i < res.length; i++) {
-              if (this.leftHeight <= this.rightHeight) {
-                this.listMap[i].top = this.leftHeight + this.itemTop + 'px'
-                this.leftHeight += res[i].height + this.itemTop
-              } else {
-                this.listMap[i].top = this.rightHeight + this.itemTop + 'px'
-                this.listMap[i].left = this.itemLeft + 'px'
-                this.rightHeight += res[i].height + this.itemTop
-              }
-              this.$nextTick(() => {
-                this.getListHeight()
-                this.listMap[i].position = 'absolute'
-              })
-            }
-          })
-          .exec()
-      }, 300)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.good-list {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: start;
-  position: relative;
-
-  .good-item {
-    //position: absolute;
-    width: 340rpx;
-    overflow: hidden;
-    border-radius: 10px;
-    //margin-top: 20rpx;
-    will-change: top, left, position;
-    transition: top, left 0.25s ease;
-
-    .cover {
-      width: 340rpx;
-      height: 340rpx;
-      border-radius: 10px 10px 0 0;
-    }
-
-    .info {
-      margin: 16rpx 18rpx;
-
-      .price {
-        color: #232323;
-        margin-top: 30rpx;
-        font-weight: bold;
-
-        .price-num {
-          font-size: 38rpx;
-        }
-
-        .limit {
-          color: #e82c45;
-          font-size: 24rpx;
-        }
-        font-weight: 500;
-      }
-
-      .score {
-        margin-top: 27rpx;
-        font-size: 26rpx;
-        font-weight: bold;
-        color: #e82c45;
-      }
-
-      .statistics {
-        margin-top: 26rpx;
-        font-size: 22rpx;
-        font-weight: 500;
-        color: #959595;
-
-        &_num {
-          margin-left: 6rpx;
-        }
-      }
-    }
-  }
-}
+<template>
+	<view class="good-list" :style="{ paddingTop: listHeight ? listHeight : itemTop + 'px' }">
+		<view class="good-item bg-white radius" :style="{ position: item.position, left: item.left, top: item.top }"
+			v-for="(item, i) in listMap" :key="item.id"
+			@click="$jump({ url: '/pagesGoods/goodsDetail/goodsDetail' }, { sn: item.goods_sn })">
+			<image class="cover" :src="item.goods_img"></image>
+			<!--      <view>{{ i }}</view>-->
+
+			<view class="info">
+				<u-text :text="item.goods_name" size="26rpx" lines="2"></u-text>
+
+				<view class="price flex flex-between align-center">
+					<view class="bold">
+						<text>￥</text>
+						<text class="price-num">{{ Number(item.price) }}</text>
+					</view>
+
+					<view class="limit" v-if="item.restrictions_num > 0">限购{{ item.restrictions_num }}个</view>
+				</view>
+
+				<view class="score">赠送积分{{ item.rebate_score }}</view>
+
+				<view class="flex flex-between statistics">
+					<view class="sc">收藏
+						<text class="statistics_num">{{ item.attension_count }}</text>
+					</view>
+					<view class="xl">销量
+						<text class="statistics_num">{{ item.sales_volume }}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			list: {
+				type: Array,
+				default: () => []
+			}
+		},
+		watch: {
+			list: {
+				handler(nv, ov) {
+					// 解决下拉刷新时，list 可能比上一次 长度小的问题 分页从第n页下拉刷新到第一页
+					let listMap = nv.length >= ov.length ? [...this.listMap] : []
+					ov = nv.length >= ov.length ? ov : []
+					// console.log(ov, listMap)
+
+					let differArr = nv.slice(ov.length)
+					for (let i = 0; i < differArr.length; i++) {
+						differArr[i] = {
+							...differArr[i],
+							position: 'static',
+							top: 0,
+							left: 0
+						}
+					}
+
+					this.listMap = [...listMap, ...differArr]
+
+					this.$nextTick(() => {
+						this.leftHeight = 0
+						this.rightHeight = 0
+						this.listResize()
+					})
+				},
+				deep: true
+			}
+		},
+		data() {
+			return {
+				leftHeight: 0,
+				rightHeight: 0,
+				listMap: [],
+				listHeight: ''
+			}
+		},
+		computed: {
+			itemTop() {
+				return uni.upx2px(20)
+			},
+			itemLeft() {
+				return uni.upx2px(360)
+			},
+		},
+		methods: {
+			goDetail(sn) {
+				console.log(sn)
+				this.$router.push({
+					path: '/pagesGoods/goodsDetail/goodsDetail',
+					query: {
+						sn: sn
+					}
+				})
+			},
+			getListHeight() {
+				let max = this.leftHeight >= this.rightHeight ? this.leftHeight : this.rightHeight
+				this.listHeight = max + this.itemTop + 'px'
+			},
+			listResize() {
+				setTimeout(() => {
+					let query = uni.createSelectorQuery().in(this)
+					query
+						.selectAll('.good-item')
+						.boundingClientRect((res = []) => {
+							for (let i = 0; i < res.length; i++) {
+								if (this.leftHeight <= this.rightHeight) {
+									this.listMap[i].top = this.leftHeight + this.itemTop + 'px'
+									this.leftHeight += res[i].height + this.itemTop
+								} else {
+									this.listMap[i].top = this.rightHeight + this.itemTop + 'px'
+									this.listMap[i].left = this.itemLeft + 'px'
+									this.rightHeight += res[i].height + this.itemTop
+								}
+								this.$nextTick(() => {
+									this.getListHeight()
+									this.listMap[i].position = 'absolute'
+								})
+							}
+						})
+						.exec()
+				}, 300)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.good-list {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		align-items: start;
+		position: relative;
+
+		.good-item {
+			//position: absolute;
+			width: 340rpx;
+			overflow: hidden;
+			border-radius: 10px;
+			//margin-top: 20rpx;
+			will-change: top, left, position;
+			transition: top, left 0.25s ease;
+
+			.cover {
+				width: 340rpx;
+				height: 340rpx;
+				border-radius: 10px 10px 0 0;
+			}
+
+			.info {
+				margin: 16rpx 18rpx;
+
+				.price {
+					color: #232323;
+					margin-top: 30rpx;
+					font-weight: bold;
+
+					.price-num {
+						font-size: 38rpx;
+					}
+
+					.limit {
+						color: #e82c45;
+						font-size: 24rpx;
+					}
+
+					font-weight: 500;
+				}
+
+				.score {
+					margin-top: 27rpx;
+					font-size: 26rpx;
+					font-weight: bold;
+					color: #e82c45;
+				}
+
+				.statistics {
+					margin-top: 26rpx;
+					font-size: 22rpx;
+					font-weight: 500;
+					color: #959595;
+
+					&_num {
+						margin-left: 6rpx;
+					}
+				}
+			}
+		}
+	}
 </style>

addons/dbapp/pages/index/components/notice.vue

@@ -1,69 +1,71 @@
-<script>
-import { mapMutations } from 'vuex'
-export default {
-  name: 'notice',
-  methods: {
-    ...mapMutations({
-      closeAdultWarn: 'closeAdultWarn'
-    })
-  }
-}
-</script>
-
-<template>
-  <view class="notice flex flex-between align-center">
-    <view class="flex flex-center">
-      <image src="/images/home/notice_icon.png" class="notice_icon" mode="widthFix"></image>
-      <text class="content">温馨提示：未满18岁 禁止预约福袋</text>
-    </view>
-    <view class="btn text-center" @click="closeAdultWarn">
-      <view class="year">(已满18岁)</view>
-      <view class="noAgain">下次不再提醒</view>
-    </view>
-  </view>
-</template>
-
-<style lang="scss" scoped>
-.notice {
-  position: fixed;
-  top: 119rpx;
-  z-index: 999;
-  width: 100%;
-  box-sizing: border-box;
-  height: 80rpx;
-  background-image: url('/static/images/home/bg_home_notice.png');
-  background-size: 100%;
-  padding: 0 28rpx 0 30rpx;
-
-  &_icon {
-    width: 30rpx;
-  }
-
-  .content {
-    margin-left: 18rpx;
-    font-size: 24rpx;
-    font-weight: 500;
-    color: #232323;
-    line-height: 28rpx;
-  }
-
-  .btn {
-    width: 158rpx;
-    height: 68rpx;
-    background: #ff2b44;
-    border-radius: 34rpx;
-    color: #ffffff;
-
-    .year {
-      font-size: 20rpx;
-      font-weight: 500;
-      color: #ffffff;
-    }
-
-    .noAgain {
-      font-size: 22rpx;
-      font-weight: bold;
-    }
-  }
-}
+<script>
+	import {
+		mapMutations
+	} from 'vuex'
+	export default {
+		name: 'notice',
+		methods: {
+			...mapMutations({
+				closeAdultWarn: 'closeAdultWarn'
+			})
+		}
+	}
+</script>
+
+<template>
+	<view class="notice flex flex-between align-center">
+		<view class="flex flex-center">
+			<image src="../../../static/images/home/notice_icon.png" class="notice_icon" mode="widthFix"></image>
+			<text class="content">温馨提示：未满18岁 禁止预约福袋</text>
+		</view>
+		<view class="btn text-center" @click="closeAdultWarn">
+			<view class="year">(已满18岁)</view>
+			<view class="noAgain">下次不再提醒</view>
+		</view>
+	</view>
+</template>
+
+<style lang="scss" scoped>
+	.notice {
+		position: fixed;
+		top: 119rpx;
+		z-index: 999;
+		width: 100%;
+		box-sizing: border-box;
+		height: 80rpx;
+		background-image: url('/static/images/home/bg_home_notice.png');
+		background-size: 100%;
+		padding: 0 28rpx 0 30rpx;
+
+		&_icon {
+			width: 30rpx;
+		}
+
+		.content {
+			margin-left: 18rpx;
+			font-size: 24rpx;
+			font-weight: 500;
+			color: #232323;
+			line-height: 28rpx;
+		}
+
+		.btn {
+			width: 158rpx;
+			height: 68rpx;
+			background: #ff2b44;
+			border-radius: 34rpx;
+			color: #ffffff;
+
+			.year {
+				font-size: 20rpx;
+				font-weight: 500;
+				color: #ffffff;
+			}
+
+			.noAgain {
+				font-size: 22rpx;
+				font-weight: bold;
+			}
+		}
+	}
 </style>

addons/dbapp/pages/index/index.vue

@@ -1,284 +1,327 @@
-<script>
-import { mapState, mapActions, mapGetters } from 'vuex'
-import api from '@/api'
-import notice from '@/pages/index/components/notice.vue'
-import listWaterfall from '@/pages/index/components/listWaterfall.vue'
-import businessCooperation from '@/pages/me/components/businessCooperation.vue'
-import VersionUp from '@/pages/index/components/versionUp.vue'
-export default {
-  components: { VersionUp, notice, listWaterfall, businessCooperation },
-  data() {
-    return {
-      banner: [],
-      tasks: [
-        { label: '关于福袋', icon: 'guanyufudai' },
-        { label: '新手教程', icon: 'xinshou_jiaoc' },
-        { label: '在线客服', icon: 'zaixian_kefu' },
-        { label: '商务合作', icon: 'shangwu_hezuo' }
-      ],
-      services: [
-        { label: '群聊', icon: 'qunliao' },
-        { label: '手机充值', icon: 'shouji_chongzhi' },
-        { label: '交电费', icon: 'jiaodianfei' },
-        { label: '酒店/民宿', icon: 'jiudian' },
-        { label: '美食/外卖', icon: 'meishi_waimai' },
-        { label: '电影演出', icon: 'dianying' },
-        { label: '飞机/火车', icon: 'feiji_hc' },
-        { label: '加油站', icon: 'jiayouzhan' }
-      ],
-      goods: [],
-
-      showToTop: false
-    }
-  },
-  computed: {
-    ...mapState({
-      user: 'user',
-      appConfig: 'appConfig',
-      adultWarn: 'adultWarn'
-    }),
-    ...mapGetters({
-      isAppVersionUp: 'isAppVersionUp'
-    })
-  },
-
-  methods: {
-    ...mapActions({
-      refreshAppVersion: 'refreshAppVersion'
-    }),
-    async getList(page) {
-      let res = await api.goodsList({ ...page, goods_type: '1' })
-      //如果是第一页需手动制空列表 追加新数据
-      this.goods = page.page === 1 ? res : [...this.goods, ...res]
-      return res.length
-    },
-    taskJump({ label }) {
-      switch (label) {
-        case '关于福袋':
-          this.$jump({ url: '/pagesUser/webview/webview' }, { url: this.appConfig.aboutbox_url })
-          break
-        case '新手教程':
-          this.$jump({ url: '/pagesUser/webview/webview' }, { url: this.appConfig.newhand_url })
-          break
-        case '在线客服':
-          this.$jump({ url: '/pagesUser/webview/webview' }, { url: this.appConfig.chat_url })
-          break
-        case '商务合作':
-          this.$refs.business.show = true
-          break
-      }
-    },
-    serviceJump({ label }) {
-      switch (label) {
-        case '群聊':
-          this.$jump({ url: '/pagesUser/chat/chat' })
-          break
-        default:
-          this.$common.toast('功能开发中')
-      }
-    },
-    // 点击回到顶部的按钮回调
-    toTopClick() {
-      if (!this.showToTop) return
-      uni.pageScrollTo({
-        scrollTop: 0,
-        duration: 300
-      })
-    }
-  },
-  async onLoad() {
-    this.banner = await api.getBanner(1)
-  },
-  onShow() {
-    this.refreshAppVersion()
-  },
-  provide() {
-    return {
-      getList: this.getList
-    }
-  },
-  onPageScroll({ scrollTop }) {
-    this.showToTop = scrollTop > 400
-  }
-}
-</script>
-
-<template>
-  <view class="page">
-    <view class="statusBarBg">
-      <image src="/static/images/home/bg_home_top.png" mode="widthFix" class="bg_top"></image>
-      <view class="placeholder"></view>
-    </view>
-
-    <view class="main">
-      <notice v-if="adultWarn" />
-
-      <scroll
-        ref="mescrollItem"
-        class="scroll"
-        :up-opt="{ toTop: { src: null } }"
-        :style="{
-          transform: adultWarn ? 'translateY(107rpx)' : '',
-          marginBottom: adultWarn ? '107rpx' : ''
-        }"
-      >
-        <view class="banner w-m">
-          <u-swiper
-            :list="banner"
-            height="260rpx"
-            circular
-            :autoplay="true"
-            radius="10px"
-            key-name="img_pic"
-            bgColor="transparent"
-            indicator
-            indicatorMode="dot"
-          ></u-swiper>
-        </view>
-
-        <view class="task w flex flex-around">
-          <view class="item" v-for="(t, i) in tasks" :key="i" @click="taskJump(t)">
-            <image :src="`/static/images/home/${t.icon}.png`" class="img" mode="widthFix"></image>
-            <view class="title">{{ t.label }}</view>
-          </view>
-        </view>
-
-        <view v-if="user.has_hiddencate === 0" class="service w-m bg-white radius">
-          <view
-            class="service_item flex flex-column align-center"
-            v-for="(s, i) in services"
-            :key="i"
-            @click="serviceJump(s)"
-          >
-            <image
-              class="service_item_icon"
-              :src="`/static/images/home/ic_${s.icon}@2x.png`"
-            ></image>
-            <view class="service_item_label"
-              ><text>{{ s.label }}</text></view
-            >
-            <image
-              v-if="s.label === '群聊'"
-              class="tag"
-              src="/static/images/home/ic_qunliao_biaoqian@2x.png"
-            ></image>
-          </view>
-        </view>
-
-        <list-waterfall class="list" :list="goods" />
-      </scroll>
-    </view>
-
-    <businessCooperation ref="business" />
-
-    <version-up v-if="isAppVersionUp" />
-
-    <!--    <mescroll-top :option="mescroll.optUp.toTop" @click="toTopClick"></mescroll-top>-->
-
-    <view class="totop" :class="{ show: showToTop }" @click="toTopClick">
-      <image class="totop_icon" src="/static/images/common/ic_hui_dingbu@2x.png"></image>
-    </view>
-  </view>
-</template>
-
-<style lang="scss" scoped>
-.page {
-  //background-color: #f76883;
-  .statusBarBg {
-    .placeholder {
-      height: 119rpx;
-    }
-
-    .bg_top {
-      width: 100%;
-      position: fixed;
-      z-index: 999;
-      top: 0;
-    }
-  }
-}
-
-.main {
-  background-image: url('/static/images/home/bg_home_bottom.png');
-  background-repeat: no-repeat;
-  background-size: 100% 332rpx;
-  overflow: hidden;
-}
-
-.scroll {
-  transition: transform 0.4s 0.1s ease;
-  will-change: transform;
-}
-
-.task {
-  margin-top: 46rpx;
-
-  .item {
-    text-align: center;
-
-    .img {
-      width: 86rpx;
-    }
-
-    .title {
-      font-size: 24rpx;
-      font-weight: 500;
-      color: #232323;
-    }
-  }
-}
-
-.service {
-  margin-top: 20rpx;
-  padding: 18rpx 0 24rpx;
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-row-gap: 20rpx;
-
-  &_item {
-    text-align: center;
-    position: relative;
-
-    &_icon {
-      width: 106rpx;
-      height: 96rpx;
-    }
-    &_label {
-      font-size: 24rpx;
-      font-weight: 500;
-      color: #232323;
-    }
-
-    .tag {
-      position: absolute;
-      left: calc(50% - 10rpx);
-      top: -9rpx;
-      width: 54rpx;
-      height: 24rpx;
-    }
-  }
-}
-
-.list {
-  margin: 0 25rpx 20rpx;
-}
-
-.totop {
-  position: fixed;
-  right: 20rpx;
-  bottom: 200rpx;
-  opacity: 0;
-  // 不接受事件
-  pointer-events: none;
-  transition: all 0.3s;
-  &_icon {
-    width: 113rpx;
-    height: 113rpx;
-  }
-
-  &.show {
-    opacity: 1;
-    pointer-events: auto;
-  }
-}
+<script>
+	import {
+		mapState,
+		mapActions,
+		mapGetters
+	} from 'vuex'
+	import api from '@/api'
+	import notice from '@/pages/index/components/notice.vue'
+	import listWaterfall from '@/pages/index/components/listWaterfall.vue'
+	import businessCooperation from '@/pages/me/components/businessCooperation.vue'
+	import VersionUp from '@/pages/index/components/versionUp.vue'
+	export default {
+		components: {
+			VersionUp,
+			notice,
+			listWaterfall,
+			businessCooperation
+		},
+		data() {
+			return {
+				banner: [],
+				tasks: [{
+						label: '关于福袋',
+						icon: 'guanyufudai'
+					},
+					{
+						label: '新手教程',
+						icon: 'xinshou_jiaoc'
+					},
+					{
+						label: '在线客服',
+						icon: 'zaixian_kefu'
+					},
+					{
+						label: '商务合作',
+						icon: 'shangwu_hezuo'
+					}
+				],
+				services: [{
+						label: '群聊',
+						icon: 'qunliao'
+					},
+					{
+						label: '手机充值',
+						icon: 'shouji_chongzhi'
+					},
+					{
+						label: '交电费',
+						icon: 'jiaodianfei'
+					},
+					{
+						label: '酒店/民宿',
+						icon: 'jiudian'
+					},
+					{
+						label: '美食/外卖',
+						icon: 'meishi_waimai'
+					},
+					{
+						label: '电影演出',
+						icon: 'dianying'
+					},
+					{
+						label: '飞机/火车',
+						icon: 'feiji_hc'
+					},
+					{
+						label: '加油站',
+						icon: 'jiayouzhan'
+					}
+				],
+				goods: [],
+
+				showToTop: false
+			}
+		},
+		computed: {
+			...mapState({
+				user: 'user',
+				appConfig: 'appConfig',
+				adultWarn: 'adultWarn'
+			}),
+			...mapGetters({
+				isAppVersionUp: 'isAppVersionUp'
+			})
+		},
+
+		methods: {
+			...mapActions({
+				refreshAppVersion: 'refreshAppVersion'
+			}),
+			async getList(page) {
+				let res = await api.goodsList({
+					...page,
+					goods_type: '1'
+				})
+				//如果是第一页需手动制空列表 追加新数据
+				this.goods = page.page === 1 ? res : [...this.goods, ...res]
+				return res.length
+			},
+			taskJump({
+				label
+			}) {
+				switch (label) {
+					case '关于福袋':
+						this.$jump({
+							url: '/pagesUser/webview/webview'
+						}, {
+							url: this.appConfig.aboutbox_url
+						})
+						break
+					case '新手教程':
+						this.$jump({
+							url: '/pagesUser/webview/webview'
+						}, {
+							url: this.appConfig.newhand_url
+						})
+						break
+					case '在线客服':
+						this.$jump({
+							url: '/pagesUser/webview/webview'
+						}, {
+							url: this.appConfig.chat_url
+						})
+						break
+					case '商务合作':
+						this.$refs.business.show = true
+						break
+				}
+			},
+			serviceJump({
+				label
+			}) {
+				switch (label) {
+					case '群聊':
+						this.$jump({
+							url: '/pagesUser/chat/chat'
+						})
+						break
+					default:
+						this.$common.toast('功能开发中')
+				}
+			},
+			// 点击回到顶部的按钮回调
+			toTopClick() {
+				if (!this.showToTop) return
+				uni.pageScrollTo({
+					scrollTop: 0,
+					duration: 300
+				})
+			}
+		},
+		async onLoad() {
+			this.banner = await api.getBanner(1)
+		},
+		onShow() {
+			this.refreshAppVersion()
+		},
+		provide() {
+			return {
+				getList: this.getList
+			}
+		},
+		onPageScroll({
+			scrollTop
+		}) {
+			this.showToTop = scrollTop > 400
+		}
+	}
+</script>
+
+<template>
+	<view class="page">
+		<view class="statusBarBg">
+			<image src="/static/images/home/bg_home_top.png" mode="widthFix" class="bg_top"></image>
+			<view class="placeholder"></view>
+		</view>
+
+		<view class="main">
+			<notice v-if="adultWarn" />
+
+			<scroll ref="mescrollItem" class="scroll" :up-opt="{ toTop: { src: null } }" :style="{
+          transform: adultWarn ? 'translateY(107rpx)' : '',
+          marginBottom: adultWarn ? '107rpx' : ''
+        }">
+				<view class="banner w-m">
+					<u-swiper :list="banner" height="260rpx" circular :autoplay="true" radius="10px" key-name="img_pic"
+						bgColor="transparent" indicator indicatorMode="dot"></u-swiper>
+				</view>
+
+				<view class="task w flex flex-around">
+					<view class="item" v-for="(t, i) in tasks" :key="i" @click="taskJump(t)">
+						<image :src="`/static/images/home/${t.icon}.png`" class="img" mode="widthFix"></image>
+						<view class="title">{{ t.label }}</view>
+					</view>
+				</view>
+
+				<view v-if="user.has_hiddencate === 0" class="service w-m bg-white radius">
+					<view class="service_item flex flex-column align-center" v-for="(s, i) in services" :key="i"
+						@click="serviceJump(s)">
+						<image class="service_item_icon" :src="`/static/images/home/ic_${s.icon}@2x.png`"></image>
+						<view class="service_item_label"><text>{{ s.label }}</text></view>
+						<image v-if="s.label === '群聊'" class="tag" src="/static/images/home/ic_qunliao_biaoqian@2x.png">
+						</image>
+					</view>
+				</view>
+
+				<list-waterfall class="list" :list="goods" />
+			</scroll>
+		</view>
+
+		<businessCooperation ref="business" />
+
+		<version-up v-if="isAppVersionUp" />
+
+		<!--    <mescroll-top :option="mescroll.optUp.toTop" @click="toTopClick"></mescroll-top>-->
+
+		<view class="totop" :class="{ show: showToTop }" @click="toTopClick">
+			<image class="totop_icon" src="/static/images/common/ic_hui_dingbu@2x.png"></image>
+		</view>
+	</view>
+</template>
+
+<style lang="scss" scoped>
+	.page {
+
+		//background-color: #f76883;
+		.statusBarBg {
+			.placeholder {
+				height: 119rpx;
+			}
+
+			.bg_top {
+				width: 100%;
+				position: fixed;
+				z-index: 999;
+				top: 0;
+			}
+		}
+	}
+
+	.main {
+		background-image: url('../../static/images/home/bg_home_bottom.png');
+		background-repeat: no-repeat;
+		background-size: 100% 332rpx;
+		overflow: hidden;
+	}
+
+	.scroll {
+		transition: transform 0.4s 0.1s ease;
+		will-change: transform;
+	}
+
+	.task {
+		margin-top: 46rpx;
+
+		.item {
+			text-align: center;
+
+			.img {
+				width: 86rpx;
+			}
+
+			.title {
+				font-size: 24rpx;
+				font-weight: 500;
+				color: #232323;
+			}
+		}
+	}
+
+	.service {
+		margin-top: 20rpx;
+		padding: 18rpx 0 24rpx;
+		display: grid;
+		grid-template-columns: repeat(4, 1fr);
+		grid-row-gap: 20rpx;
+
+		&_item {
+			text-align: center;
+			position: relative;
+
+			&_icon {
+				width: 106rpx;
+				height: 96rpx;
+			}
+
+			&_label {
+				font-size: 24rpx;
+				font-weight: 500;
+				color: #232323;
+			}
+
+			.tag {
+				position: absolute;
+				left: calc(50% - 10rpx);
+				top: -9rpx;
+				width: 54rpx;
+				height: 24rpx;
+			}
+		}
+	}
+
+	.list {
+		margin: 0 25rpx 20rpx;
+	}
+
+	.totop {
+		position: fixed;
+		right: 20rpx;
+		bottom: 200rpx;
+		opacity: 0;
+		// 不接受事件
+		pointer-events: none;
+		transition: all 0.3s;
+
+		&_icon {
+			width: 113rpx;
+			height: 113rpx;
+		}
+
+		&.show {
+			opacity: 1;
+			pointer-events: auto;
+		}
+	}
 </style>

addons/dbapp/pagesGoods/goodsDetail/goodsDetail.vue

@@ -1,407 +1,372 @@
-<script>
-import { mapState } from 'vuex'
-import api from '@/api'
-import AddOrder from '@/pagesGoods/goodsDetail/components/addOrder.vue'
-
-export default {
-  components: { AddOrder },
-  onPageScroll({ scrollTop }) {
-    if (scrollTop < 20) {
-      this.opacity = 0
-    } else if (scrollTop > 20 && scrollTop <= 100) {
-      this.opacity = scrollTop / 100
-    } else if (scrollTop > 100) {
-      this.opacity = 1
-    }
-  },
-  data() {
-    return {
-      type: '', // goods | sweepstakes
-      banner: [],
-      current: 0, // swiper cur
-      opacity: 0, // 用于标题栏透明
-
-      detail: {}, //商品详情
-      specIndex: 0, // 规格的下标
-
-      isSc: false, // 是否收藏
-
-      imgLoading: true // 图片加载时动画
-    }
-  },
-  computed: {
-    ...mapState({
-      token: 'token'
-    })
-  },
-  watch: {
-    token() {
-      this.getIsSc()
-    }
-  },
-
-  methods: {
-    async getDetail(sn) {
-      try {
-        this.detail = await api.goodsDetail(sn)
-        this.banner = this.detail.goods_img_banner
-        // 获取是否收藏
-        await this.getIsSc()
-        //   setTimeout(() => {
-        //     this.imgLoading = false
-        //   }, 300)
-      } catch (e) {}
-    },
-
-    async sc() {
-      if (!this.token) {
-        this.$jump({ url: '/pages/login/login' })
-        return
-      }
-
-      if (this.isSc) {
-        this.isSc = false
-        await api.cancelAtt(this.detail.goods_id)
-      } else {
-        await api.goodsAtt(this.detail.goods_id)
-        this.isSc = true
-        this.$common.toast('收藏成功', 'success')
-      }
-    },
-    async getIsSc() {
-      if (!this.token) return
-
-      let res = await api.isAtt(this.detail.goods_id)
-      this.isSc = res.attension === 1
-    },
-    preview(i) {
-      uni.previewImage({ urls: this.banner, current: i })
-    }
-  },
-  onLoad() {
-    let { sn, type = '' } = this.$store.state.params
-    this.getDetail(sn)
-    this.type = type
-  }
-}
-</script>
-
-<template>
-  <view>
-    <view class="nav">
-      <view :style="{ opacity: opacity }">
-        <u-navbar title="商品详情" :fixed="false">
-          <template slot="left">
-            <text></text>
-          </template>
-        </u-navbar>
-      </view>
-      <view
-        class="back flex flex-center"
-        :style="{ borderColor: `rgba(233,233,233,${1 - opacity})` }"
-        @click="$common.back()"
-      >
-        <u-icon name="arrow-left" color="#303133" size="40rpx"></u-icon>
-      </view>
-    </view>
-
-    <u-swiper
-      :loading="!Object.keys(detail).length"
-      height="750rpx"
-      circular
-      :list="banner"
-      :current="current"
-      :autoplay="false"
-      @change="e => (current = e.current)"
-      @click="preview"
-    >
-      <view slot="indicator" class="indicator-num">
-        <view class="cur">{{ current + 1 }}</view>
-        <view class="total">{{ banner.length }}</view>
-      </view>
-    </u-swiper>
-
-    <view class="main">
-      <view class="info bg-white">
-        <u-skeleton
-          v-if="!Object.keys(detail).length"
-          :loading="!Object.keys(detail).length"
-          rows="3"
-          :rowsWidth="['400rpx', '650rpx', '650rpx']"
-          :rowsHeight="['42rpx', '42rpx', '80rpx']"
-          :title="false"
-        ></u-skeleton>
-
-        <template v-else>
-          <view class="flex flex-between align-center">
-            <u-text mode="price" :text="detail.price" bold size="42rpx"></u-text>
-            <view class="rebate_score text-right" v-if="type !== 'sweepstakes'">
-              {{ `赠送${Number(detail.rebate_score)}积分` }}
-            </view>
-          </view>
-
-          <u-text :text="detail.goods_name" size="32rpx" bold margin="32rpx 0 0"></u-text>
-
-          <view class="inventory flex flex-between" v-if="type !== 'sweepstakes'">
-            <view>销量：{{ detail.sales_volume }}</view>
-            <view>库存：{{ detail.inventory }}</view>
-          </view>
-
-          <view class="limit" v-if="detail.restrictions_num > 0 && type !== 'sweepstakes'"
-            >每人限购{{ detail.restrictions_num }}个</view
-          >
-        </template>
-      </view>
-
-      <view
-        class="spec_toMore bg-white flex align-center"
-        @click="
-          () => {
-            if (Object.keys(detail).length) $refs.addOrder.show = true
-          }
-        "
-      >
-        <u-skeleton
-          v-if="!Object.keys(detail).length"
-          :loading="!Object.keys(detail).length"
-          rows="1"
-          :rowsWidth="['650rpx']"
-          :rowsHeight="['42rpx']"
-          :title="false"
-        ></u-skeleton>
-
-        <template v-else>
-          <text class="spec_text">规格</text>
-          <u-text
-            :text="detail.goods_spec && detail.goods_spec[specIndex].spec_text"
-            size="28rpx"
-          ></u-text>
-          <u-icon name="arrow-right"></u-icon>
-        </template>
-      </view>
-
-      <view class="notice bg-white">
-        <u-skeleton
-          :loading="!Object.keys(detail).length"
-          titleWidth="150"
-          titleHeight="42"
-          rows="1"
-          :rowsWidth="['650rpx']"
-          :rowsHeight="['42rpx']"
-        >
-          <u-text text="购物须知" size="28rpx" bold margin="0 0 20rpx"></u-text>
-          <rich-text class="notice_content" :nodes="detail.buyNote"></rich-text>
-        </u-skeleton>
-      </view>
-
-      <view class="mt-10 goods_detail bg-white overflow-hidden">
-        <u-skeleton
-          v-if="!Object.keys(detail).length"
-          :loading="!Object.keys(detail).length"
-          titleWidth="150"
-          titleHeight="42"
-          rows="1"
-          :rowsWidth="['650rpx']"
-          :rowsHeight="['500rpx']"
-        ></u-skeleton>
-
-        <template v-else>
-          <view class="goods_detail_title">
-            <text>商品详情</text>
-          </view>
-          <u-parse
-            :content="detail.goods_remark"
-            :tagStyle="{
-              p: 'text-align:center;display:flex;flex-flow: column nowrap;'
-            }"
-          ></u-parse>
-        </template>
-      </view>
-    </view>
-
-    <!-- 底部 -->
-    <view class="bottom flex flex-between flex-center" v-show="Object.keys(detail).length">
-      <view class="sc" @click="sc()">
-        <image
-          :src="`/static/images/goods/${isSc ? 'sc-fill' : 'sc'}.png`"
-          mode="widthFix"
-          class="sc_icon"
-        ></image>
-        <view class="sc_text">收藏</view>
-      </view>
-
-      <u-button
-        :text="type === 'sweepstakes' ? '福袋商品暂不支持直售' : '立即购买'"
-        color="#E82C45"
-        :disabled="type === 'sweepstakes'"
-        @click="$refs.addOrder.show = true"
-        custom-style="marginRight:50rpx"
-      ></u-button>
-    </view>
-
-    <add-order ref="addOrder" :detail="detail" />
-  </view>
-</template>
-
-<style lang="scss" scoped>
-.nav {
-  position: fixed;
-  top: 0;
-  z-index: 1;
-  width: 100%;
-
-  .back {
-    position: absolute;
-    left: 9px;
-    bottom: 9px;
-    z-index: 2;
-    width: 54rpx;
-    height: 54rpx;
-    border-radius: 50%;
-    border: 1px solid #e9e9e9;
-    background-color: #fff;
-  }
-}
-
-/deep/ .u-swiper__indicator {
-  bottom: 40rpx;
-  right: 24rpx;
-}
-
-.indicator-num {
-  width: 76rpx;
-  height: 36rpx;
-  line-height: 36rpx;
-  color: #ffffff;
-  text-align: center;
-  // background-color: #b3b3b3;
-  background-color: rgba(0, 0, 0, 0.3);
-  border-radius: 36rpx;
-  overflow: hidden;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .cur {
-    flex-basis: 55%;
-    background-color: rgba(0, 0, 0, 0.1);
-    border-radius: 36rpx 0 40rpx 36rpx;
-    font-size: 22rpx;
-  }
-
-  .total {
-    flex-basis: 45%;
-    height: 30rpx;
-    line-height: 30rpx;
-    font-size: 18rpx;
-
-    /* #ifdef H5 */
-    transform: scale(0.8) translateY(2rpx);
-    /* #endif */
-  }
-}
-
-.main {
-  padding: 20rpx 0 180rpx;
-
-  .info {
-    padding: 30rpx 50rpx;
-
-    .rebate_score {
-      color: #e82c45;
-      font-size: 30rpx;
-    }
-
-    .inventory {
-      margin: 26rpx 0 0;
-      color: #666666;
-      font-size: 24rpx;
-    }
-
-    .limit {
-      margin-top: 20rpx;
-      color: #e82c45;
-      font-size: 24rpx;
-    }
-  }
-
-  .spec_toMore {
-    margin-top: 20rpx;
-    padding: 20rpx 50rpx;
-
-    .spec_text {
-      color: #5d6167;
-      font-size: 26rpx;
-      margin-right: 20rpx;
-    }
-  }
-
-  .notice {
-    margin-top: 20rpx;
-    padding: 20rpx 50rpx;
-
-    &_content {
-      font-size: 24rpx;
-      line-height: 40rpx;
-    }
-  }
-}
-
-.goods_detail {
-  padding: 20rpx 35rpx;
-
-  &_title {
-    margin-bottom: 26rpx;
-    margin-left: 15rpx;
-    position: relative;
-    z-index: 1;
-
-    font-size: 30rpx;
-    font-weight: bold;
-    color: #232323;
-  }
-}
-
-.bottom {
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  height: 136rpx;
-  background-color: #fff;
-  padding-bottom: var(--window-bottom);
-  z-index: 1;
-
-  .sc {
-    width: 70rpx;
-    text-align: center;
-    margin: 0 42rpx 0 50rpx;
-
-    &_icon {
-      width: 40rpx;
-    }
-
-    &_text {
-      font-size: 24rpx;
-      font-weight: 500;
-      color: #b4b4b4;
-    }
-  }
-}
-
-/deep/ .u-number-box__minus,
-::v-deep .u-number-box__minus {
-  border-radius: 29rpx 0 0 29rpx;
-}
-
-/deep/ .u-number-box__plus,
-::v-deep .u-number-box__plus {
-  border-radius: 0 29rpx 29rpx 0;
-}
-
-/deep/ .u-number-box__input,
-::v-deep .u-number-box__input {
-  width: 58rpx !important;
-  height: 58rpx !important;
-  font-size: 30rpx;
-}
+<script>
+	import {
+		mapState
+	} from 'vuex'
+	import api from '@/api'
+	import AddOrder from '@/pagesGoods/goodsDetail/components/addOrder.vue'
+
+	export default {
+		components: {
+			AddOrder
+		},
+		onPageScroll({
+			scrollTop
+		}) {
+			if (scrollTop < 20) {
+				this.opacity = 0
+			} else if (scrollTop > 20 && scrollTop <= 100) {
+				this.opacity = scrollTop / 100
+			} else if (scrollTop > 100) {
+				this.opacity = 1
+			}
+		},
+		data() {
+			return {
+				type: '', // goods | sweepstakes
+				banner: [],
+				current: 0, // swiper cur
+				opacity: 0, // 用于标题栏透明
+
+				detail: {}, //商品详情
+				specIndex: 0, // 规格的下标
+
+				isSc: false, // 是否收藏
+
+				imgLoading: true // 图片加载时动画
+			}
+		},
+		computed: {
+			...mapState({
+				token: 'token'
+			})
+		},
+		watch: {
+			token() {
+				this.getIsSc()
+			}
+		},
+
+		methods: {
+			async getDetail(sn) {
+				try {
+					this.detail = await api.goodsDetail(sn)
+					this.banner = this.detail.goods_img_banner
+					// 获取是否收藏
+					await this.getIsSc()
+					//   setTimeout(() => {
+					//     this.imgLoading = false
+					//   }, 300)
+				} catch (e) {}
+			},
+
+			async sc() {
+				if (!this.token) {
+					this.$jump({
+						url: '/pages/login/login'
+					})
+					return
+				}
+
+				if (this.isSc) {
+					this.isSc = false
+					await api.cancelAtt(this.detail.goods_id)
+				} else {
+					await api.goodsAtt(this.detail.goods_id)
+					this.isSc = true
+					this.$common.toast('收藏成功', 'success')
+				}
+			},
+			async getIsSc() {
+				if (!this.token) return
+
+				let res = await api.isAtt(this.detail.goods_id)
+				this.isSc = res.attension === 1
+			},
+			preview(i) {
+				uni.previewImage({
+					urls: this.banner,
+					current: i
+				})
+			}
+		},
+		onLoad() {
+			console.log(this.$store.state.params)
+			// let sn = typeof(this.$route.query.sn) != 'undefined' ? this.$route.query.sn : '';
+			// let type = typeof(this.$store.state.params.type) != 'undefined' ? $store.state.params.type : '';
+			let {
+				sn,
+				type = ''
+			} = this.$store.state.params
+			this.getDetail(sn)
+			this.type = type
+		}
+	}
+</script>
+
+<template>
+	<view>
+		<view class="nav">
+			<view :style="{ opacity: opacity }">
+				<u-navbar title="商品详情" :fixed="false">
+					<template slot="left">
+						<text></text>
+					</template>
+				</u-navbar>
+			</view>
+			<view class="back flex flex-center" :style="{ borderColor: `rgba(233,233,233,${1 - opacity})` }"
+				@click="$common.back()">
+				<u-icon name="arrow-left" color="#303133" size="40rpx"></u-icon>
+			</view>
+		</view>
+
+		<u-swiper :loading="!Object.keys(detail).length" height="750rpx" circular :list="banner" :current="current"
+			:autoplay="false" @change="e => (current = e.current)" @click="preview">
+			<view slot="indicator" class="indicator-num">
+				<view class="cur">{{ current + 1 }}</view>
+				<view class="total">{{ banner.length }}</view>
+			</view>
+		</u-swiper>
+
+		<view class="main">
+			<view class="info bg-white">
+				<u-skeleton v-if="!Object.keys(detail).length" :loading="!Object.keys(detail).length" rows="3"
+					:rowsWidth="['400rpx', '650rpx', '650rpx']" :rowsHeight="['42rpx', '42rpx', '80rpx']"
+					:title="false"></u-skeleton>
+
+				<template v-else>
+					<view class="flex flex-between align-center">
+						<u-text mode="price" :text="detail.price" bold size="42rpx"></u-text>
+						<view class="rebate_score text-right" v-if="type !== 'sweepstakes'">
+							{{ `赠送${Number(detail.rebate_score)}积分` }}
+						</view>
+					</view>
+
+					<u-text :text="detail.goods_name" size="32rpx" bold margin="32rpx 0 0"></u-text>
+
+					<view class="inventory flex flex-between" v-if="type !== 'sweepstakes'">
+						<view>销量：{{ detail.sales_volume }}</view>
+						<view>库存：{{ detail.inventory }}</view>
+					</view>
+
+					<view class="limit" v-if="detail.restrictions_num > 0 && type !== 'sweepstakes'">
+						每人限购{{ detail.restrictions_num }}个</view>
+				</template>
+			</view>
+
+			<view class="spec_toMore bg-white flex align-center" @click="
+          () => {
+            if (Object.keys(detail).length) $refs.addOrder.show = true
+          }
+        ">
+				<u-skeleton v-if="!Object.keys(detail).length" :loading="!Object.keys(detail).length" rows="1"
+					:rowsWidth="['650rpx']" :rowsHeight="['42rpx']" :title="false"></u-skeleton>
+
+				<template v-else>
+					<text class="spec_text">规格</text>
+					<u-text :text="detail.goods_spec && detail.goods_spec[specIndex].spec_text" size="28rpx"></u-text>
+					<u-icon name="arrow-right"></u-icon>
+				</template>
+			</view>
+
+			<view class="notice bg-white">
+				<u-skeleton :loading="!Object.keys(detail).length" titleWidth="150" titleHeight="42" rows="1"
+					:rowsWidth="['650rpx']" :rowsHeight="['42rpx']">
+					<u-text text="购物须知" size="28rpx" bold margin="0 0 20rpx"></u-text>
+					<rich-text class="notice_content" :nodes="detail.buyNote"></rich-text>
+				</u-skeleton>
+			</view>
+
+			<view class="mt-10 goods_detail bg-white overflow-hidden">
+				<u-skeleton v-if="!Object.keys(detail).length" :loading="!Object.keys(detail).length" titleWidth="150"
+					titleHeight="42" rows="1" :rowsWidth="['650rpx']" :rowsHeight="['500rpx']"></u-skeleton>
+
+				<template v-else>
+					<view class="goods_detail_title">
+						<text>商品详情</text>
+					</view>
+					<u-parse :content="detail.goods_remark" :tagStyle="{
+              p: 'text-align:center;display:flex;flex-flow: column nowrap;'
+            }"></u-parse>
+				</template>
+			</view>
+		</view>
+
+		<!-- 底部 -->
+		<view class="bottom flex flex-between flex-center" v-show="Object.keys(detail).length">
+			<view class="sc" @click="sc()">
+				<image :src="`/static/images/goods/${isSc ? 'sc-fill' : 'sc'}.png`" mode="widthFix" class="sc_icon">
+				</image>
+				<view class="sc_text">收藏</view>
+			</view>
+
+			<u-button :text="type === 'sweepstakes' ? '福袋商品暂不支持直售' : '立即购买'" color="#E82C45"
+				:disabled="type === 'sweepstakes'" @click="$refs.addOrder.show = true" custom-style="marginRight:50rpx">
+			</u-button>
+		</view>
+
+		<add-order ref="addOrder" :detail="detail" />
+	</view>
+</template>
+
+<style lang="scss" scoped>
+	.nav {
+		position: fixed;
+		top: 0;
+		z-index: 1;
+		width: 100%;
+
+		.back {
+			position: absolute;
+			left: 9px;
+			bottom: 9px;
+			z-index: 2;
+			width: 54rpx;
+			height: 54rpx;
+			border-radius: 50%;
+			border: 1px solid #e9e9e9;
+			background-color: #fff;
+		}
+	}
+
+	/deep/ .u-swiper__indicator {
+		bottom: 40rpx;
+		right: 24rpx;
+	}
+
+	.indicator-num {
+		width: 76rpx;
+		height: 36rpx;
+		line-height: 36rpx;
+		color: #ffffff;
+		text-align: center;
+		// background-color: #b3b3b3;
+		background-color: rgba(0, 0, 0, 0.3);
+		border-radius: 36rpx;
+		overflow: hidden;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		.cur {
+			flex-basis: 55%;
+			background-color: rgba(0, 0, 0, 0.1);
+			border-radius: 36rpx 0 40rpx 36rpx;
+			font-size: 22rpx;
+		}
+
+		.total {
+			flex-basis: 45%;
+			height: 30rpx;
+			line-height: 30rpx;
+			font-size: 18rpx;
+
+			/* #ifdef H5 */
+			transform: scale(0.8) translateY(2rpx);
+			/* #endif */
+		}
+	}
+
+	.main {
+		padding: 20rpx 0 180rpx;
+
+		.info {
+			padding: 30rpx 50rpx;
+
+			.rebate_score {
+				color: #e82c45;
+				font-size: 30rpx;
+			}
+
+			.inventory {
+				margin: 26rpx 0 0;
+				color: #666666;
+				font-size: 24rpx;
+			}
+
+			.limit {
+				margin-top: 20rpx;
+				color: #e82c45;
+				font-size: 24rpx;
+			}
+		}
+
+		.spec_toMore {
+			margin-top: 20rpx;
+			padding: 20rpx 50rpx;
+
+			.spec_text {
+				color: #5d6167;
+				font-size: 26rpx;
+				margin-right: 20rpx;
+			}
+		}
+
+		.notice {
+			margin-top: 20rpx;
+			padding: 20rpx 50rpx;
+
+			&_content {
+				font-size: 24rpx;
+				line-height: 40rpx;
+			}
+		}
+	}
+
+	.goods_detail {
+		padding: 20rpx 35rpx;
+
+		&_title {
+			margin-bottom: 26rpx;
+			margin-left: 15rpx;
+			position: relative;
+			z-index: 1;
+
+			font-size: 30rpx;
+			font-weight: bold;
+			color: #232323;
+		}
+	}
+
+	.bottom {
+		position: fixed;
+		bottom: 0;
+		width: 100%;
+		height: 136rpx;
+		background-color: #fff;
+		padding-bottom: var(--window-bottom);
+		z-index: 1;
+
+		.sc {
+			width: 70rpx;
+			text-align: center;
+			margin: 0 42rpx 0 50rpx;
+
+			&_icon {
+				width: 40rpx;
+			}
+
+			&_text {
+				font-size: 24rpx;
+				font-weight: 500;
+				color: #b4b4b4;
+			}
+		}
+	}
+
+	/deep/ .u-number-box__minus,
+	::v-deep .u-number-box__minus {
+		border-radius: 29rpx 0 0 29rpx;
+	}
+
+	/deep/ .u-number-box__plus,
+	::v-deep .u-number-box__plus {
+		border-radius: 0 29rpx 29rpx 0;
+	}
+
+	/deep/ .u-number-box__input,
+	::v-deep .u-number-box__input {
+		width: 58rpx !important;
+		height: 58rpx !important;
+		font-size: 30rpx;
+	}
 </style>