首页改版

components/uni-countdown/uni-countdown.vue

+<template>
+	<view class="uni-countdown">
+		<text v-if="showDay" :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ d }}</text>
+		<text v-if="showDay" :style="{ color: splitorColor }" class="uni-countdown__splitor">天</text>
+		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ h }}</text>
+		<text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '时' }}</text>
+		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ i }}</text>
+		<text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '分' }}</text>
+		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ s }}</text>
+		<text v-if="!showColon" :style="{ color: splitorColor }" class="uni-countdown__splitor">秒</text>
+	</view>
+</template>
+<script>
+	/**
+	 * Countdown 倒计时
+	 * @description 倒计时组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=25
+	 * @property {String} backgroundColor 背景色
+	 * @property {String} color 文字颜色
+	 * @property {Number} day 天数
+	 * @property {Number} hour 小时
+	 * @property {Number} minute 分钟
+	 * @property {Number} second 秒
+	 * @property {Boolean} showDay = [true|false] 是否显示天数
+	 * @property {Boolean} showColon = [true|false] 是否以冒号为分隔符
+	 * @property {String} splitorColor 分割符号颜色
+	 * @event {Function} timeup 倒计时时间到触发事件
+	 * @example <uni-countdown :day="1" :hour="1" :minute="12" :second="40"></uni-countdown>
+	 */
+	export default {
+		name: 'UniCountdown',
+		props: {
+			showDay: {
+				type: Boolean,
+				default: true
+			},
+			showColon: {
+				type: Boolean,
+				default: true
+			},
+			backgroundColor: {
+				type: String,
+				default: '#FFFFFF'
+			},
+			borderColor: {
+				type: String,
+				default: '#000000'
+			},
+			color: {
+				type: String,
+				default: '#000000'
+			},
+			splitorColor: {
+				type: String,
+				default: '#000000'
+			},
+			day: {
+				type: Number,
+				default: 0
+			},
+			hour: {
+				type: Number,
+				default: 0
+			},
+			minute: {
+				type: Number,
+				default: 0
+			},
+			second: {
+				type: Number,
+				default: 0
+			}
+		},
+		data() {
+			return {
+				timer: null,
+				syncFlag: false,
+				d: '00',
+				h: '00',
+				i: '00',
+				s: '00',
+				leftTime: 0,
+				seconds: 0
+			}
+		},
+		watch: {
+			day(val) {
+				this.changeFlag()
+			},
+			hour(val) {
+				this.changeFlag()
+			},
+			minute(val) {
+				this.changeFlag()
+			},
+			second(val) {
+				this.changeFlag()
+			}
+		},
+		created: function(e) {
+			this.startData();
+		},
+		beforeDestroy() {
+			clearInterval(this.timer)
+		},
+		methods: {
+			toSeconds(day, hours, minutes, seconds) {
+				return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds
+			},
+			timeUp() {
+				clearInterval(this.timer)
+				this.$emit('timeup')
+			},
+			countDown() {
+				let seconds = this.seconds
+				let [day, hour, minute, second] = [0, 0, 0, 0]
+				if (seconds > 0) {
+					day = Math.floor(seconds / (60 * 60 * 24))
+					hour = Math.floor(seconds / (60 * 60)) - (day * 24)
+					minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60)
+					second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
+				} else {
+					this.timeUp()
+				}
+				if (day < 10) {
+					day = '0' + day
+				}
+				if (hour < 10) {
+					hour = '0' + hour
+				}
+				if (minute < 10) {
+					minute = '0' + minute
+				}
+				if (second < 10) {
+					second = '0' + second
+				}
+				this.d = day
+				this.h = hour
+				this.i = minute
+				this.s = second
+			},
+			startData() {
+				this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
+				console.log(this.seconds)
+				if (this.seconds <= 0) {
+					return
+				}
+				this.countDown()
+				this.timer = setInterval(() => {
+					this.seconds--
+					if (this.seconds < 0) {
+						this.timeUp()
+						return
+					}
+					this.countDown()
+				}, 1000)
+			},
+			changeFlag() {
+				if (!this.syncFlag) {
+					this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
+					this.startData();
+					this.syncFlag = true;
+				}
+			}
+		}
+	}
+</script>
+<style scoped>
+	.uni-countdown {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: flex-start;
+		padding: 2rpx 0;
+	}
+
+	.uni-countdown__splitor {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		justify-content: center;
+		line-height: 48rpx;
+		padding: 5rpx;
+		font-size: 24rpx;
+	}
+
+	.uni-countdown__number {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		justify-content: center;
+		align-items: center;
+		width: 52rpx;
+		height: 48rpx;
+		line-height: 48rpx;
+		margin: 5rpx;
+		text-align: center;
+		font-size: 24rpx;
+	}
+</style>
\ No newline at end of file

main.js

 import Vue from 'vue'
 import App from './App'
-import { php } from './common/host.js';
+import store from './store/store.js';
+import { php, gp } from './common/host.js';
 
 Vue.config.productionTip = false
 
@@ -39,8 +40,31 @@ function addCart(spec_id, quantity, isLogin) {
 			});
 		}
 	})
-}
+}
 
+// 跳转商品详情页,只传一个商品ID,方便以后全局修改
+
+function jumpGoodDetail(goods_id) {
+	window.location.href = `${php}app=goods&id=${goods_id}`;
+}
+
+// 跳转外部链接,使用webview
+function jump(url) {
+	// #ifdef H5
+	window.location.href = url;
+	// #endif
+	
+	// #ifndef H5
+	const link = url
+	store.dispatch('changeWebviewUrl',link)
+	uni.redirectTo({
+		url: `/pages/web/web`,
+	});
+	// #endif
+}
+
+Vue.prototype.$jumpGoodDetail = jumpGoodDetail;
+Vue.prototype.$jump = jump;
 Vue.prototype.$addCart = addCart;
 Vue.prototype.$noGoodsImg = 'https://dbc-static.oss-cn-beijing.aliyuncs.com/credit/shangpinmorentu%402x.png';
 Vue.prototype.$defaultPortrait = 'https://dbc-static.oss-cn-beijing.aliyuncs.com/credit/default_user_portrait.gif';
@@ -49,6 +73,7 @@ Vue.prototype.$defaultClassImg = 'https://dbc-static.oss-cn-beijing.aliyuncs.com
 App.mpType = 'app'
 
 const app = new Vue({
-    ...App
+    ...App,
+	store
 })
 app.$mount()

manifest.json

@@ -58,7 +58,7 @@
       "disableHostCheck": true,
       "proxy": {
         "/uni/api": {
-          "target": "http://39.96.85.45:9093/",
+          "target": "http://192.168.50.133:6564/",
           "changeOrigin": true,
           "secure": false,
           "pathRewrite": {

pages.json

@@ -6,6 +6,9 @@
 				"navigationBarTitleText": "白条专区"
 			}
 		},
+		{
+			"path": "pages/home/home"
+		},
 		{
 			"path": "pages/category/category",
 			"style": {

pages/category/Category.vue

@@ -14,7 +14,7 @@
 		</view>
 		<view class="goods_box" v-if="goods_list instanceof Array">
 			<view class="goods_item" v-for="(item, index) in goods_list" :key="index">
-				<image :src="item.default_image || $noGoodsImg" @click="jumpPhpPage(`app=goods&id=${item.goods_id}`)"></image>
+				<image :src="item.default_image || $noGoodsImg" @click="$jumpPhpPage(item.goods_id)"></image>
 				<view class="goods_item_info">
 					<p>{{item.goods_name}}</p>
 					<p>{{item.goods_subname}}</p>

pages/detail/Detail.vue

@@ -15,7 +15,7 @@
 			</view>
 			<view class="goods_box" v-if="goods_list instanceof Array">
 				<view class="goods_item" v-for="(item, index) in goods_list" :key="index">
-					<image :src="item.default_image || $noGoodsImg" @click="jumpPhpPage(`app=goods&id=${item.goods_id}`)"></image>
+					<image :src="item.default_image || $noGoodsImg" @click="$jumpPhpPage(item.goods_id)"></image>
 					<view class="goods_item_info">
 						<p>{{item.goods_name}}</p>
 						<p>{{item.goods_subname}}</p>

pages/home/components/custowstyle.vue

+<template>
+	<view class="customer_content" :class="style_setting.padding_type === 1 ? 'need_padding' : ''" :style="[{'border-radius': style_setting.border_radius*2+'rpx','height': style_setting.height*2+'rpx'}, style_setting.bg_show ? {'background-image': 'url('+style_setting.bg_url+')'} : {'background-color': style_setting.bg_color}]" @click="style_setting.link ? $jump(style_setting.link) : null">
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			wrapper_props: {
+				type: Object
+			}
+		},
+		data() {
+			return {
+				style_setting: this.wrapper_props.style_setting
+			}
+		}
+	}
+</script>
+
+<style lang="less">
+	.customer_content {
+		background-repeat: no-repeat;
+		background-size: 100% 100%;
+	}
+	.need_padding {
+		width: 93.6%;
+		margin: 0 auto;
+	}
+</style>

pages/home/components/functionmenu.vue

+<template>
+	<view>
+		<view v-if="style_setting.rank === 1" class="rank rank1" :style="[style_setting.bg_show ? {'background-image':style_setting.bg_url} : {'background-color': style_setting.bg_color},{'border-bottom-left-radius':style_setting.radius_bottom_left*2+'rpx', 'border-bottom-right-radius':style_setting.radius_bottom_right*2+'rpx', 'border-top-left-radius':style_setting.radius_top_left*2+'rpx', 'border-top-right-radius':style_setting.radius_top_right*2+'rpx'}]">
+			<view class="menuItem" v-for="(item, key) in menuArray" :key="key" :style="{'width': width}" @click="$jump(item.img_href)">
+				<image :src="item.img_url" class="icon_img"></image>
+				<text v-if="style_setting.font_show" class="title" :style="{'color': style_setting.font_color}">{{item.title}}</text>
+			</view>
+		</view>
+		<swiper v-else indicator-dots="true" :style="{'height': style_setting.rank*200+10+'rpx'}">
+			<swiper-item v-for="(item, key) in menuArray" :key="key" class="rank rank1">
+				<view class="menuItem" v-for="(val, index) in item" :key="index" :style="{'width': width}" @click="$jump(item.img_href)">
+					<image :src="val.img_url" class="icon_img"></image>
+					<text v-if="style_setting.font_show" class="title" :style="{'color': style_setting.font_color}">{{val.title}}</text>
+				</view>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			wrapper_props: {
+				type: Object
+			},
+		},
+		data() {
+			return {
+				width: '',
+				menuArray: this.wrapper_props.menuList,
+				style_setting: this.wrapper_props.style_setting
+			}
+		},
+		mounted() {
+			const { rank, arrange } = this.style_setting;
+			const width = Math.floor(100/arrange);
+			this.width = width + '%';
+			if(rank != 1) {
+				const rate = rank * arrange;
+				let array = [];
+				for (var i = 0, j = this.menuArray.length; i < j; i += rate) {
+				    array.push(this.menuArray.slice(i, i + rate));
+				}
+				this.menuArray = array;
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.rank {
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+		width: 702rpx;
+		margin: 0 auto;
+	}
+	.rank1 {
+		display: flex;
+		justify-content: space-between;
+		flex-wrap: wrap;
+	}
+	.rank1:after {
+		flex: auto;
+		content: '';
+	}
+	.menuItem {
+		text-align: center;
+		padding:  22rpx 0;
+	}
+	.icon_img {
+		display: block;
+		width: 96rpx;
+		height: 96rpx;
+		margin: 0 auto;
+	}
+	.title {
+		font-size: 24rpx;
+	}
+</style>

pages/home/components/goodslist.vue

+<template>
+	<view class="goods_content">
+		<view v-if="style_setting.arrange == 1" class="goods_box" :class="dataList.length % style_setting.listType !== 0 ? 'needAfter' : ''" :style="{'background-color': style_setting.bg_color}">
+			<view v-for="(item, key) in dataList" :key="key" class="goods_item" :style="width ? {'width':width} : ''">
+				<view :class="style_setting.listType === 2 ? 'image_box2' : 'image_box'">
+					<image v-if="style_setting.sign_show" class="logo" :style="{'width': style_setting.sign_size*2+'rpx','height': style_setting.sign_size*2+'rpx'}" :src="style_setting.sign_url"></image>
+					<image class="goods_img" :src="item.default_image || $noGoodsImg" @click="$jumpGoodDetail(item.goods_id)"></image>
+				</view>
+				<text class="goods_name" v-if="style_setting.title_show">{{item.goods_name}}</text>
+				<text class="goods_sub_name" v-if="style_setting.sub_title_show">{{item.goods_subname || '　'}}</text>
+				<view class="goods_price">
+					<text v-if="style_setting.price_show">￥{{item.price}}</text>
+					<i v-if="style_setting.cart_show" @click="$addCart(item.spec_id)"></i>
+				</view>
+			</view>
+		</view>
+		
+		<swiper v-else indicator-dots="true" class="swiper_content">
+			<swiper-item v-for="(val, index) in dataList" :key="index" class="goods_box2" :class="val.length < style_setting.listType ? 'needAfter' : ''">
+				<view v-for="(item, key) in val" :key="key" class="goods_item" :style="width ? {'width':width} : ''">
+					<view :class="style_setting.listType === 2 ? 'image_box2' : 'image_box'">
+						<image v-if="style_setting.sign_show" class="logo" :style="{'width': style_setting.sign_size*2+'rpx','height': style_setting.sign_size*2+'rpx'}" :src="style_setting.sign_url"></image>
+						<image class="goods_img" :src="item.default_image || $noGoodsImg" @click="$jumpGoodDetail(item.goods_id)"></image>
+					</view>
+					<text class="goods_name" v-if="style_setting.title_show">{{item.goods_name}}</text>
+					<text class="goods_sub_name" v-if="style_setting.sub_title_show">{{item.goods_subname || '　'}}</text>
+					<view class="goods_price">
+						<text v-if="style_setting.price_show">￥{{item.price}}</text>
+						<i v-if="style_setting.cart_show" @click="$addCart(item.spec_id)"></i>
+					</view>
+				</view>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			wrapper_props: {
+				type: Object
+			}
+		},
+		data() {
+			return {
+				dataList: [],
+				style_setting: this.wrapper_props.style_setting,
+				width: ''
+			}
+		},
+		mounted() {
+			const { listType, arrange, goods_data_type } = this.style_setting;
+			const { goods_list, cate_goods_list } =this.wrapper_props;
+			if(listType == 2) {
+				this.width = '320rpx';
+			} else if (listType == 3 ) {
+				this.width = '210rpx';
+			} else {
+				this.width = '150rpx';
+			}
+			let list = [];
+			if(goods_data_type === 3) {
+				list = goods_list;
+			} else {
+				list = cate_goods_list.concat(goods_list)
+			}
+			this.dataList = list;
+			if(arrange == 2) {
+				let array = [];
+				for (var i = 0, j = list.length; i < j; i += listType) {
+				    array.push(list.slice(i, i + listType));
+				}
+				this.dataList = array;
+			}
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.swiper_content {
+		height: 320rpx;
+		width: 702rpx;
+		margin: 0 auto;
+		padding: 24rpx;
+		box-sizing: border-box;
+	}
+	.goods_box, .goods_box2 {
+		display: flex;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		width: 702rpx;
+		margin: 0 auto;
+		padding: 24rpx;
+		box-sizing: border-box;
+		.goods_item {
+			margin-bottom: 20rpx;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+		}
+	}
+	.needAfter::after {
+		// content: '';
+		flex: auto;
+	}
+	.image_box, .image_box2 {
+		width: 160rpx;
+		height: 160rpx;
+		position: relative;
+		margin-bottom: 8rpx;
+		.logo {
+			position: absolute;
+			left: 0;
+			top: 0;
+			z-index: 2;
+		}
+		.goods_img {
+			width: 100%;
+			height: 100%;
+		}
+	}
+	.image_box2 {
+		width:320rpx;
+		height: 320rpx;
+	}
+	.goods_name {
+		font-size: 22rpx;
+		color: #212121;
+		font-weight: 500;
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		height: 32rpx;
+		line-height: 32rpx;
+		margin-bottom: 6rpx;
+		width: 90%;
+	}
+	.goods_sub_name {
+		font-size: 22rpx;
+		color: #6e6e6e;
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		width: 90%;
+	}
+	.goods_price {
+		width: 90%;
+		position: relative;
+		top: -4rpx;
+		height: 40rpx;
+		line-height: 40rpx;
+		display: flex;
+		justify-content: space-between;
+		text {
+			font-size: 24rpx;
+			color: #c3a070;
+		}
+		i {
+			display: inline-block;
+			width: 40rpx;
+			height: 40rpx;
+			background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAAAAACN7WTCAAABfElEQVRIx2P4TyZgGNU4qnFUIxEafx87+eYvORqvVFRUbiTLxstTSktW/yHHj7/2FRa9ICtw/kzM2wa2/MTmzZs2gTAEbL3yi0Co7sye/A9IfcpGBVlZU/7i1/g4o/gryObzEJtgdm4uyliDX+PXgpQn2Ly0LaUNv8Z/PYl7sGlcnTiRQMpZETsXm8aJccsJaDwTXfULU9/3ouiDBDS+j4z5jKnxU3T4IwIaf+SFXMXUeCsk+jOh3NEfuBpT4+bAwl+ENK7x68bUOMOvl2B+vOmd8h1d7F+F9xKCGj/5e75DF/sc6X6MoMbfOS7oiv6/dnF5SbjomODYhV4O7HIM+ExY4z5b+1lr1gPBurVr16xZs3rVipnetpV/CWv8XmiFAbzuElPKfd4wpb8PCPr7+yeAwMRJK14Mt5L822ZQmJ6FhOOHTSDOub/EaFwVCwYfwJxFYHbcR2I03stJTk5OgqaC6xkgTjdRNv7//R0I/sEKaWTOaI08qnHoaQQAAyi97TBEkioAAAAASUVORK5CYII=) no-repeat;
+			background-size: 100% 100%;
+		}
+	}
+</style>

pages/home/components/hotrecommd.vue

+<template>
+	<view class="hot_main_content">
+		<view class="clearfix">
+			<view class="hot_head_left">
+				<view>
+					<text class="hot_title">
+						<i v-if="style_setting.icon_url_show" class="hot_icon" :style="{'background-image':'url('+style_setting.icon_url+')'}"></i>
+						{{style_setting.title}}
+					</text>
+					<text class="hot_sub_title">{{style_setting.sub_title}}</text>
+				</view>
+			</view>
+			<view class="hot_cate_list">
+				<text class="hot_cate_item" v-for="(item, key) in cate_list" :key="key" @click="changeCate(key)">{{item.cate_name}}</text>
+			</view>
+		</view>
+		<view class="flex_goods" v-for="(val, key) in cate_list" :key="key" v-if="key === hotIndex">
+			<view class="hot_goods_item" v-for="(item, index) in val.goods_list" :key="index">
+				<image class="hot_goods_icon" :src="style_setting.angle_sign_url"></image>
+				<image class="hot_goods_img" :src="item.default_image || $noGoodsImg" @click="$jumpGoodDetail(item.goods_id)"></image>
+				<text class="hot_goods_name" v-if="style_setting.title_show">{{item.title}}</text>
+				<text class="hot_goods_subname" v-if="style_setting.sub_title_show">{{item.sub_title}}</text>
+				<view class="between_price">
+					<view class="between_left" v-if="style_setting.price_show">
+						<text class="hot_pro_price">￥{{item.price}}</text>
+						<!-- <text class="hot_price">￥{{item.price}}</text> -->
+					</view>
+					<i class="hot_cart_icon" v-if="style_setting.cart_show" @click="$addCart(item.spec_id)"></i>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props:{
+			wrapper_props: {
+				type: Object
+			}
+		},
+		data() {
+			return {
+				style_setting: this.wrapper_props.style_setting,
+				cate_list: this.wrapper_props.cate_list,
+				hotIndex: 0
+			}
+		},
+		methods: {
+			changeCate(index) {
+				this.hotIndex = index
+			}
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.clearfix::after {
+		content: "";
+		display: block;
+		height: 0;
+		clear:both;
+		visibility: hidden;
+	}
+	.hot_main_content {
+		width: 93.6%;
+		margin: 0 auto;
+	}
+	.hot_head_left {
+		display: inline-block;
+		float: left;
+	}
+	.hot_icon {
+		display: inline-block;
+		width: 28rpx;
+		height: 28rpx;
+		background-repeat: no-repeat;
+		background-size: 100% 100%;
+	}
+	.hot_title {
+		font-size: 32rpx;
+		font-family: PingFangSC-Medium,PingFang SC;
+		font-weight: 500;
+		color: #464646;
+		line-height: 44rpx;
+		display: block;
+	}
+	.hot_sub_title {
+		font-size: 22rpx;
+		color: #7c7c7c;
+		line-height: 32rpx;
+		display: block;
+	}
+	.hot_cate_list {
+		white-space: nowrap;
+		overflow: scroll;
+		position: relative;
+		top: 10rpx;
+	}
+	.hot_cate_list::-webkit-scrollbar {
+		display: none;
+	}
+	.hot_cate_item {
+		width: 164rpx;
+		height: 88rpx;
+		line-height: 88rpx;
+		display: inline-block;
+		font-family: PingFangSC-Medium,PingFang SC;
+		font-weight: 500;
+		color: #464646;
+		font-size: 32rpx;
+		text-align: center;
+	}
+	.flex_goods {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		.hot_goods_item {
+			position: relative;
+			width: 346rpx;
+			text-align: center;
+			margin-top: 20rpx;
+			background: #fff;
+			padding-bottom: 12rpx;
+			.hot_goods_icon {
+				position: absolute;
+				left: 0;
+				top: 0;
+				width: 80rpx;
+				height: 80rpx;
+				z-index: 2;
+			}
+			.hot_goods_img {
+				width: 280rpx;
+				height: 280rpx;
+			}
+			.hot_goods_name, .hot_goods_subname {
+				width: 280rpx;
+				display: block;
+				text-align: left;
+				font-size: 26rpx;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+				margin: 0 auto;
+			}
+			.hot_goods_name {			
+				color: #212121;
+				margin-top: 16rpx;
+			}
+			.hot_goods_subname {
+				color: #6e6e6e;
+			}
+		}
+		.between_price {
+			position: relative;
+			width: 280rpx;
+			height: 44rpx;
+			margin: 12rpx auto 0;
+			.between_left {
+				position: absolute;
+				left: 0;
+			}
+			text {
+				display: block;
+				text-align: left;
+			}
+			.hot_pro_price {
+				font-size: 32rpx;
+				font-family: PingFangSC-Regular,PingFang SC;
+				font-weight: 400;
+				color: #c3a070;
+			}
+			.hot_price {
+				font-size: 24rpx;
+				font-family: PingFangSC-Light,PingFang SC;
+				font-weight: 300;
+				color: #aeaeae;
+				text-decoration: line-through;
+			}
+			.hot_cart_icon {
+				display: inline-block;
+				width: 44rpx;
+				height: 44rpx;
+				background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAAAAACN7WTCAAABfElEQVRIx2P4TyZgGNU4qnFUIxEafx87+eYvORqvVFRUbiTLxstTSktW/yHHj7/2FRa9ICtw/kzM2wa2/MTmzZs2gTAEbL3yi0Co7sye/A9IfcpGBVlZU/7i1/g4o/gryObzEJtgdm4uyliDX+PXgpQn2Ly0LaUNv8Z/PYl7sGlcnTiRQMpZETsXm8aJccsJaDwTXfULU9/3ouiDBDS+j4z5jKnxU3T4IwIaf+SFXMXUeCsk+jOh3NEfuBpT4+bAwl+ENK7x68bUOMOvl2B+vOmd8h1d7F+F9xKCGj/5e75DF/sc6X6MoMbfOS7oiv6/dnF5SbjomODYhV4O7HIM+ExY4z5b+1lr1gPBurVr16xZs3rVipnetpV/CWv8XmiFAbzuElPKfd4wpb8PCPr7+yeAwMRJK14Mt5L822ZQmJ6FhOOHTSDOub/EaFwVCwYfwJxFYHbcR2I03stJTk5OgqaC6xkgTjdRNv7//R0I/sEKaWTOaI08qnHoaQQAAyi97TBEkioAAAAASUVORK5CYII=) no-repeat;
+				background-size: 100% 100%;
+				position: absolute;
+				right: 0;
+				top: 0;
+			}
+		}
+	}
+</style>

pages/home/components/maintitle.vue

+<template>
+	<view>
+		<view v-if="style_setting.styleType === 1" class="maintitle_content1" :style="{'height': style_setting.titleHeight*2+'rpx','line-height': style_setting.titleHeight*2+'rpx','background-color':style_setting.bg_color,'padding-top':style_setting.padding_top*2+'rpx','padding-bottom':style_setting.padding_bottom*2+'rpx',}">
+			<view>
+				<i class="main_icon" :style="{'background-image':'url('+style_setting.icon_url+')'}" v-if="style_setting.iconShow"></i>
+				<text class="main_title" :style="{'font-size':style_setting.title_font_size*2+'rpx','color':style_setting.title_color}">{{style_setting.title}}</text>
+				<text class="main_sub_title" :style="{'font-size': style_setting.sub_title_font_size*2+'rpx','color':style_setting.sub_title_color}">{{style_setting.sub_title}}</text>
+			</view>
+			<text v-if="style_setting.view_more_show" :style="{'font-size':style_setting.view_more_font_size*2+'rpx','color': style_setting.view_more_color}" @click="jumpPage(style_setting.view_more_link)">{{style_setting.view_more_font_title}}
+				<svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg>
+			</text>
+		</view>
+		<view v-if="style_setting.styleType === 2" class="maintitle_content2" :style="{'height': style_setting.titleHeight*2+'rpx','line-height': style_setting.titleHeight*2+'rpx','background-color':style_setting.bg_color,'padding-top':style_setting.padding_top*2+'rpx','padding-bottom':style_setting.padding_bottom*2+'rpx',}">
+			<view class="main_title" :style="{'font-size':style_setting.title_font_size*2+'rpx','color':style_setting.title_color, 'height':style_setting.title_font_size*2+'rpx'}">{{style_setting.title}}</view>
+			<view class="main_sub_title" :style="{'font-size': style_setting.sub_title_font_size*2+'rpx','color':style_setting.sub_title_color,'height':style_setting.sub_title_font_size*2+'rpx'}">{{style_setting.sub_title}}</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			wrapper_props: {
+				type: Object
+			}
+		},
+		data() {
+			return {
+				style_setting: this.wrapper_props.style_setting
+			}
+		},
+		methods: {
+			jumpPage(url) {
+
+			}
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.maintitle_content1 {
+		width: 650rpx;
+		margin: 0 auto;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		border-radius: 16rpx 16rpx 0 0;
+		padding: 0 24rpx 0 28rpx;
+		text {
+			vertical-align: middle;
+			margin-left: 10rpx;
+		}
+	}
+	.maintitle_content2 {
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		border-radius: 16rpx 16rpx 0 0;
+		width: 702rpx;
+		margin: 0 auto;
+		view {
+			line-height: initial;
+			height: 50%;
+		}
+		view:nth-of-type(2) {
+			margin-top: 10rpx;
+		}
+	}
+	.main_icon {
+		display: inline-block;
+		width: 52rpx;
+		height: 52rpx;
+		vertical-align: middle;
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+	}
+</style>

pages/home/components/multimage.vue

+<template>
+	<view class="mult_content">
+		<view class="mult_item" v-for="(item, key) in list"  :key="key" :style="{'left':item.left*rate+'rpx','top':item.top*rate+'rpx','right':item.right*rate+'rpx','bottom':item.bottom*rate+'rpx','width':item.width*rate+'rpx','height':item.height*rate+'rpx'}" @click="jumpPage(item.link)">
+			<image :src="item.img_url"></image>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			wrapper_props: {
+				type: Object
+			}
+		},
+		data() {
+			return {
+				rate: 3,
+				style_setting: this.wrapper_props.style_setting,
+				list: this.wrapper_props.list
+			}
+		},
+		mounted() {
+			const { type }  = this.style_setting;
+			const rate = 750 / (type + 3);
+			this.rate = rate;
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.mult_content {
+		position: relative;
+		height: 750rpx;
+		.mult_item {
+			position: absolute;
+			image {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+</style>

pages/home/components/navigation.vue

+<template>
+	<view>
+		<view class="navigation" :style="[{'height': style_setting.height*2+'rpx', 'line-height': style_setting.height*2+'rpx'}, style_setting.bg_show ? {'background-image': 'url('+style_setting.bg_url+')'} : {'background-color': style_setting.bg_color}]">
+			<text class="navigation_text" v-for="(item, key) in list" :key="key" v-if="item.title_show" :style="[{'color': item.title_color}, item.title_bg_show ? {'background-image': 'url('+item.title_bg_url+')'} : '']">
+			<i v-if="style_setting.title_icon_show" class="navigation_icon" :style="{'background-image': 'url('+item.title_icon_url+')'}"></i>
+			<text>{{item.title}}</text>
+			</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			wrapper_props: {
+				type: Object
+			}
+		},
+		data() {
+			return {
+				style_setting: this.wrapper_props.style_setting,
+				list: this.wrapper_props.list
+			}
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.navigation {
+		white-space: nowrap;
+		overflow: scroll;
+		background-repeat: no-repeat;
+		background-size: 100% 100%;
+		.navigation_text {
+			background-size: 100% 100%;
+			background-repeat: no-repeat;
+			width: 25%;
+			text-align: center;
+			display: inline-block;
+			font-size: 32rpx;
+			text {
+				vertical-align: middle;
+			}
+			.navigation_icon {
+				display: inline-block;
+				width: 32rpx;
+				height: 32rpx;
+				background-size: 100% 100%;
+				background-repeat: no-repeat;
+				vertical-align: middle;
+				margin-right: 8rpx;
+			}
+		}
+	}
+	.navigation::-webkit-scrollbar {
+		display: none;
+	}
+</style>
\ No newline at end of file

pages/home/components/promotion.vue

+<template>
+	<view class="promo_content" :style="style_setting.bg_show ? {'background-image': 'url('+style_setting.bg_url+')'} : {'background-color': style_setting.bg_color}">
+		<view class="flex">
+			<view>
+				<i v-if="style_setting.icon_show" class="promo_icon" :style="{'background-image': 'url('+style_setting.icon_url+')'}"></i>
+				<text class="promo_title" :style="{'color': style_setting.title_color, 'font-size': style_setting.title_font*2+'rpx'}">{{style_setting.title}}</text>
+				<!-- <text class="countdown">
+					<uni-countdown :timer="style_setting.count_down_time"></uni-countdown>
+				</text> -->
+			</view>
+			<text class="check_more" @click="jumpPage(style_setting.more_link)">{{style_setting.more_title}}
+				<svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg>
+			</text>
+		</view>
+		<view class="promo_goods_content" :class="flexAutoFlag ? 'promo_goods_content_after' : ''">
+			<view class="promo_goods_item" v-for="(item,key) in list" :key="key" @click="$jumpGoodDetail(item.goods_id)"> 
+				<image :src="item.default_image || $noGoodsImg"></image>
+				<text class="pro_price">￥{{item.pro_price}}</text>
+				<text class="price">￥{{item.price}}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import uniCountdown from "@/components/uni-countdown/uni-countdown.vue"
+	export default {
+		props: {
+			wrapper_props: {
+				type: Object
+			}
+		},
+		data() {
+			return {
+				style_setting: this.wrapper_props.style_setting,
+				list: this.wrapper_props.goods_list,
+				flexAutoFlag: false
+			}
+		},
+		mounted() {
+			const num = this.list.length % 4;
+			if(num !== 0) {
+				this.flexAutoFlag = true;
+			}
+		},
+		methods: {
+			
+		},
+		components:{
+			uniCountdown
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.promo_content {
+		width: 702rpx;
+		border-radius: 16rpx;
+		background-repeat: no-repeat;
+		background-size: 100% 100%;
+		margin: 0 auto;
+		padding: 0 24rpx 0 28rpx;
+		box-sizing: border-box;
+	}
+	.flex {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		height: 88rpx;
+	}
+	.promo_icon {
+		display: inline-block;
+		width: 48rpx;
+		height: 48rpx;
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+		vertical-align: middle;
+	}
+	.promo_title {
+		font-weight: 500;
+		vertical-align: middle;
+		margin: 0 12rpx;
+	}
+	.check_more {
+		font-size: 22rpx;
+		color: rgb(33, 33, 33);
+	}
+	.promo_goods_content {
+		margin: 24rpx 0;
+		display: flex;
+		justify-content: space-between;
+		flex-wrap: wrap;
+	}
+	.promo_goods_content_after:after {
+		content: '';
+		flex: auto;
+	}
+	.promo_goods_item {
+		width: 140rpx;
+		text-align: center;
+		margin-bottom: 20rpx;
+		image {
+			width:140rpx;
+			height: 140rpx;
+		}
+		.pro_price {
+			color: #c3a070;
+			font-size: 24rpx;
+			width: 140rpx;
+			display: block;
+		}
+		.price {
+			color: #aeaeae;
+			font-size: 24rpx;
+			text-decoration: line-through;
+			width: 140rpx;
+			display: block;
+		}
+	}
+</style>

pages/home/components/searchbar.vue

+<template>
+	<view class="flex_searchbar" :style="{'background':wrapper_props.bg_color}">
+		<i class="logo" :style="{'background-image': 'url('+wrapper_props.logo_url+')'}"></i>
+		<view class="search_view flex">
+			<i class="search_icon" @click="search"></i>
+			<input type="text" class="search_input" v-model="keyword" :placeholder="wrapper_props.placeholder">
+		</view>
+		<text class="login_btn" @click="jumpPhpPage('app=member&act=login')" v-if="!isLogin">登录</text>
+		<uni-icons v-else  type="person" size="30" @click="jumpPhpPage('app=member')"></uni-icons>
+	</view>
+</template>
+
+<script>
+	import { php } from '../../../common/host.js';
+	import uniIcons from "@/components/uni-icons/uni-icons.vue";
+	export default {
+		props: {
+			wrapper_props: {
+				type: Object,
+				required: true
+			}
+		},
+		data() {
+			return {
+				isLogin: 0,
+				keyword: ''
+			}
+		},
+		methods: {
+			jumpPhpPage(url) {
+				let link = url ? `${php}${url}` : php;
+				window.location.href =  link;
+			}
+		},
+		components: {
+			uniIcons
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.flex_searchbar {
+		display: flex;
+		justify-content: space-between;
+		padding: 24rpx;
+		.flex {
+			display: flex;
+		}
+		.logo {
+			width: 192rpx;
+			height: 60rpx;
+			background-size: 100% 100%;
+			background-repeat: no-repeat;
+		}
+		.search_view {
+			width: 380rpx;
+			height: 60rpx;
+			background: #F5F5F5;
+			border-radius: 30rpx;
+		}
+		.search_icon {
+			display: inline-block;
+			width: 56rpx;
+			height: 56rpx;
+			background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAAAAAA5AE8dAAACh0lEQVRYw83ZMW/aQBTAcb7K3xaGDcQUIUWtEFKmMKRbVT5AEBOV+gFgZmEh6tatH4HIK8qUISGIFgllyFQhaqlyLjRpIR1I0jTCl9p5r81t9sk/2Xe+u3fvUtdryvLH3DylpNaQV08j16DLqwtjhNHF3BhhdHFpjDT688JIoxKt+RBdfjdGGl3OjTi6EDRvUVHzBl2KmitU2DQp2X7/jV4ZeVRqHN1HF+KmSV1fGnl0YRTQuQZq/hc6nYyGJ8PRZCqGBvudWimX9bK5Uq2zH0igYbecd7ktbr7cDZ+KBv2Kw5/FqfQfe9svVvS05d1Z7p3utU7t6AcbelZNr5hi0x8MBn6zuLpMV8+s6HsLelYCoFAf390a1wsAlKzqx2j0tArgNfz7PRP6DQ+gamuBb5Fo0EoDmfbswf1ZOwOkW0GS3u97QGZvTc1eBvD6CdCwAnjttXVtD6iE8dGuAzRma+tmDcDpxkaDMlDwIx7yC0A5iIv28kA96gvDOpDvxUU7LjCOfGoMuJ2Y6HQXKFr6twjUpvHQSQloWtAmUJrEQ0c5wLegPpAbxUOHWXAGFnTgQHYYDz3xwLWiLngnz+BNVdpUpfenNYX/VGVE/dXY338Ws5TKfKoz86usUY+sprxLtJra1312hskCNEuEAs6LSbKoLyqWWpXNo/NEoWRE1Pd2C4DtQ8n49OvBxuoDjkUj6eNVQ2wchElj/l5n9ybm3+30bv6kw20Atg4kdyfnR5sAvJTdR01eOIAjvDkbvnLgjTB6/mnHef35H24jVTa8KltzlSSCTrpDJTGjk0LSSXappOV0Eog6qU6dpKxO+lgn0a2Tktc5PFA65tA5kFE6OtI55JI4jvsF01XE0L1M7eEAAAAASUVORK5CYII=) no-repeat;
+			background-size: 100% 100%;
+		}
+		.search_input {
+			height: 60rpx;
+		}
+		.login_btn {
+			width: 92rpx;
+			height: 60rpx;
+			line-height: 60rpx;
+			background: #FFCD00;
+			border-radius: 16rpx;
+			color: #212121;
+			font-size: 28rpx;
+			text-align: center;
+		}
+	}
+</style>

pages/home/components/slide.vue

+<template>
+	<view>
+		<swiper :autoplay="slide_setting.autoplay" :style="{'background-color': slide_setting.bg_color, 'height': slide_setting.slideHeight*2+'rpx'}" circular="true" interval="3000" :indicator-dots="slide_setting.dots">
+			<swiper-item v-for="(item, key) in slide_list" :key="key">
+				<view :style="{'height': slide_setting.slideHeight*2+'rpx'}">
+					<image class="slide_img" :src="item.img_url" @click="jumpPage(item.img_href)"></image>
+				</view>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			wrapper_props: {
+				type: Object
+			}
+		},
+		data() {
+			return {
+				slide_setting: this.wrapper_props.slide_setting,
+				slide_list: this.wrapper_props.slide_list
+			}
+		},
+		methods: {
+			jumpPage(url) {
+				
+			}
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.slide_img {
+		width: 100%;
+		height: 100%;
+	}
+</style>

pages/home/home.vue

+<template>
+	<view class="homeContent">
+		<component v-for="(item, index) in data" :key="index" :is="item.name" :wrapper_props="item.wrapper_props"></component>
+		<BottomBar />
+	</view>
+</template>
+
+<script>
+	import SearchBar from './components/searchbar.vue';
+	import Navigation from './components/navigation.vue';
+	import Slide from './components/slide.vue';
+	import MainTitle from './components/maintitle.vue';
+	import GoodsList from './components/goodslist.vue';
+	import FunctionMenu from './components/functionmenu.vue';
+	import Promotion from './components/promotion.vue';
+	import HotRecommd from './components/hotrecommd.vue';
+	import CustomStyle from './components/custowstyle.vue';
+	import MultImage from './components/multimage.vue';
+	import BottomBar from "@/components/BottomBar/BottomBar.vue";
+	export default {
+		data() {
+			return {
+				data: []
+			}
+		},
+		onLoad() {
+			this.getData();
+		},
+		methods: {
+			getData() {
+				uni.request({
+					url: '/uni/api/index/style_info',
+					method: 'GET',
+					dataType: 'json',
+					success: (res) => {
+						this.data = res.data.data;
+					}
+				});
+			}
+		},
+		components: {
+			BottomBar,
+			SearchBar,
+			Navigation,
+			Slide,
+			MainTitle,
+			GoodsList,
+			FunctionMenu,
+			Promotion,
+			HotRecommd,
+			CustomStyle,
+			MultImage
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.homeContent {
+		padding-bottom: 110rpx;
+		background-color: #f8f8f8;
+	}
+</style>

pages/index/index.vue

@@ -56,7 +56,7 @@
 					</view>
 					<view class="part_three_bottom">
 						<view class="hot_goods"  v-for="(item, index) in credit_goods_list" :key="index">
-							<image :src="item.default_image || $noGoodsImg" @click="jumpPhpPage(`app=goods&id=${item.goods_id}`)"></image>
+							<image :src="item.default_image || $noGoodsImg" @click="$jumpPhpPage(item.goods_id)"></image>
 							<p>{{item.goods_name}}</p>
 							<!-- <text>9个月账期</text> -->
 						</view>

pages/web/Web.vue

@@ -11,8 +11,8 @@
 				url: ''
 			}
 		},
-		onLoad(e) {
-			this.url = e.url
+		mounted() {
+			 this.url = this.$store.state.webviewUrl;
 		}
 	}
 </script>

store/store.js

+import Vue from 'vue'
+import Vuex from 'vuex'
+Vue.use(Vuex)
+const store = new Vuex.Store({
+    state: {
+		webviewUrl: ''
+	},
+    mutations: {
+		changeWebviewUrl(state, url) {
+			state.webviewUrl = url;
+		}
+	},
+    actions: {
+		changeWebviewUrl(context, url) {
+			context.commit('changeWebviewUrl', url);
+		}
+	}
+})
+export default store
\ No newline at end of file