liujd 6 жил өмнө
parent
commit
28d70991d3

+ 1 - 1
mobile-code/src/pages.json

@@ -206,7 +206,7 @@
 				{
 				{
 					"path": "goods-name",
 					"path": "goods-name",
 					"style": {
 					"style": {
-						"navigationBarTitleText": "设置商品名称"
+						"navigationBarTitleText": "填写商品信息"
 					}
 					}
 				},
 				},
 				{
 				{

+ 59 - 3
mobile-code/src/pages/goodsManage/freight.vue

@@ -1,13 +1,69 @@
 <template>
 <template>
-  <div class="app-content"></div>
+	<div class="app-content">
+		<div class="module-com new_wrap">
+			<div class="module-det">
+				<div>
+					<input type="text" class="setting-inp" />
+					<span>公里内免运费,超过 5 公里每增加1公里,</span>
+				</div>
+				<div>
+					<span>运费增加</span>
+					<input type="text" class="setting-inp" />
+					<span>元。</span>
+				</div>
+			</div>
+		</div>
+		<div class="admin-button-com blue big">确认</div>
+	</div>
 </template>
 </template>
 
 
 <script>
 <script>
 export default {
 export default {
-	name: 'freight-setting'
+	name: 'setting-freight',
+	data() {
+		return {}
+	},
+	methods: {}
 }
 }
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
-
+	.module-com {
+		margin-bottom: 20px;
+		padding: 30px;
+		background-color: #fff;
+		color: $fontColor2;
+	}
+	.admin-button-com {
+		width: calc(100% - 100px);
+		margin: 60px 30px 0;
+	}
+	.new_wrap {
+		.module-det {
+			color: $fontColor3;
+			font-size: 28px;
+			& > div {
+				@include disFlex(center, flex-start);
+				flex-wrap: wrap;
+				margin-bottom: 20px;
+				&:last-child {
+					margin-bottom: 0;
+				}
+			}
+			.setting-inp {
+				width: 140px;
+				height: 70px;
+				border: 2px solid $borderColor;
+				border-radius: 10px;
+				margin: 0 16px;
+				text-align: center;
+				&:first-child {
+					margin-left: 0;
+				}
+				&:last-child {
+					margin-right: 0;
+				}
+			}
+		}
+	}
 </style>
 </style>

+ 45 - 3
mobile-code/src/pages/goodsManage/goods-name.vue

@@ -1,13 +1,55 @@
 <template>
 <template>
-  <div class="app-content"></div>
+	<div class="app-content">
+		<!-- 商品 -->
+		<div class="prompt-text">客户想买此商品,但没价格,请设置</div>
+		<div class="img-wrap">
+			<img class="goods-img" src="../../static/images/logout.png" mode="widthFix" alt="商品图片" />
+		</div>
+		<!-- 信息 -->
+		<div class="input-line-wrap">
+			<tui-list-cell class="line-cell" :hover="false">
+				<div class="tui-title">名称</div>
+				<input placeholder-class="phcolor" class="tui-input" name="phone" placeholder="请输入" maxlength="50" type="number" />
+			</tui-list-cell>
+			<tui-list-cell class="line-cell" :hover="false">
+				<div class="tui-title">价格</div>
+				<input placeholder-class="phcolor" class="tui-input" name="phone" placeholder="请输入" maxlength="50" type="number" />
+				<div class="tui-prompt">元</div>
+			</tui-list-cell>
+		</div>
+		<!-- button -->
+		<button class="admin-button-com blue big confirm-btn">确定</button>
+	</div>
 </template>
 </template>
 
 
 <script>
 <script>
+import TuiListCell from '@/components/plugin/list-cell'
 export default {
 export default {
-	name: 'goods-name-setting'
+	name: 'goods-name-setting',
+	components: {
+		TuiListCell
+	}
 }
 }
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
-
+	.prompt-text {
+		color: $fontColor2;
+		font-size: 32px;
+		padding: 36px 0;
+		text-align: center;
+	}
+	.img-wrap {
+		width: 80%;
+		background-color: #fff;
+		margin: 0 auto 54px;
+		padding: 20px;
+		.goods-img {
+			width: 100%;
+		}
+	}
+	.confirm-btn {
+		width: calc(100% - 60px);
+		margin: 60px 30px 0;
+	}
 </style>
 </style>

+ 124 - 3
mobile-code/src/pages/goodsManage/img-store.vue

@@ -1,13 +1,134 @@
 <template>
 <template>
-  <div class="app-content"></div>
+	<div class="app-content">
+		<!-- 图片上传成功! -->
+		<modal-module :show="settingModal" :custom="true" @cancel="modalCancel" @click="modalClick" padding="30rpx 30rpx">
+			<template>
+				<div class="upload-confirm-wrap">
+					<!--  -->
+					<div class="modal-tit">
+						<i class="iconfont iconxuanzhong"></i>
+						<span>图片上传成功!</span>
+					</div>
+					<!-- 选择分类 -->
+					<div class="sel-wrap">
+						<div class="sel-tit">选择分类(可多选)</div>
+						<div class="sel-btn">
+							<button class="admin-button-com" :class="[index == 2 ? 'default' : '']" v-for="(item, index) in selBtnData" :key="index">{{ item.name }}</button>
+						</div>
+					</div>
+					<!-- 输入框 -->
+					<div class="app-modal-input-wrap">
+						<div class="inp-list-line">
+							<div class="line-label">售价</div>
+							<div class="line-input">
+								<input type="text" class="inp-input" placeholder="填价格,图片可当商品卖(选填)" />
+								<div class="inp-prompt">元</div>
+							</div>
+						</div>
+						<div class="inp-list-line">
+							<div class="line-label">名称</div>
+							<div class="line-input">
+								<input type="text" class="inp-input" placeholder="选填" />
+							</div>
+						</div>
+					</div>
+					<!-- button -->
+					<div class="redeem-btn">
+						<div class="admin-button-com default big" @click="modalCancel">取消</div>
+						<div class="admin-button-com blue big">确定</div>
+					</div>
+				</div>
+			</template>
+		</modal-module>
+	</div>
 </template>
 </template>
 
 
 <script>
 <script>
+import ModalModule from '@/components/plugin/modal'
 export default {
 export default {
-	name: 'image-store'
+	name: 'image-store',
+	components: {
+		ModalModule
+	},
+	data() {
+		return {
+			settingModal: false,
+			// modal 选择分类
+			selBtnData: [
+				{
+					name: '花束/花盒'
+				},
+				{
+					name: '花篮'
+				},
+				{
+					name: '散花'
+				},
+				{
+					name: '绿树'
+				},
+				{
+					name: '永生花'
+				},
+				{
+					name: '婚车/手捧'
+				},
+				{
+					name: '其它'
+				}
+			]
+		}
+	},
+	methods: {
+		modalCancel() {
+			this.settingModal = false
+		}
+	}
 }
 }
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
-
+	// 弹窗
+	.upload-confirm-wrap {
+		.modal-tit {
+			@include disFlex(center, center);
+			font-size: 40px;
+			margin-top: 30px;
+			margin-bottom: 50px;
+			.iconfont {
+				color: #09bb07;
+				margin-right: 20px;
+				font-size: 50px;
+			}
+		}
+		//  分类
+		.sel-wrap {
+			color: $fontColor2;
+			font-size: 32px;
+			.sel-btn {
+				@include disFlex(center, flex-start);
+				flex-wrap: wrap;
+				padding: 10px 0 40px;
+				.admin-button-com {
+					width: 170px;
+					margin-left: 20px;
+					margin-top: 20px;
+					padding-top: 16px;
+					padding-bottom: 16px;
+					border-radius: 4px;
+					&:nth-child(3n + 1) {
+						margin-left: 0;
+					}
+				}
+			}
+		}
+		.redeem-btn {
+			@include disFlex(center, space-between);
+			margin-top: 40px;
+			width: 100%;
+			.admin-button-com {
+				width: 40%;
+			}
+		}
+	}
 </style>
 </style>

+ 92 - 3
mobile-code/src/pages/goodsManage/price-increase.vue

@@ -1,13 +1,102 @@
 <template>
 <template>
-  <div class="app-content"></div>
+	<div class="app-content">
+		<div class="module-com flex-center-between switch-blo">
+			<div class="app-size-32">开启自动涨价</div>
+			<div>
+				<switch checked @change="switchChangeFn" />
+			</div>
+		</div>
+		<!-- 选项设置 -->
+		<div class="input-line-wrap new-wrap">
+			<tui-list-cell class="line-cell" :hover="false">
+				<div class="tui-title">旧密码</div>
+				<div class="tui-input button-wrap">
+					<button class="admin-button-com">2.14情人节</button>
+					<button class="admin-button-com default">七夕节</button>
+					<button class="admin-button-com">母亲节</button>
+				</div>
+			</tui-list-cell>
+			<tui-list-cell class="line-cell" :hover="false">
+				<div class="tui-title">涨价方式</div>
+				<radio-group class="tui-input flex-center-between" @change="radioChange">
+					<label class="list" for="customLink">
+						<radio id="customLink" value="自定义链接" checked="checked" />
+						<span class="checkbox-text">按百分比</span>
+					</label>
+					<label class="list" for="goodsLink">
+						<radio id="goodsLink" value="链接商品" />
+						<span class="checkbox-text">按金额</span>
+					</label>
+				</radio-group>
+			</tui-list-cell>
+			<tui-list-cell class="line-cell" :hover="false">
+				<div class="tui-title">比例</div>
+				<input placeholder-class="phcolor" class="tui-input" name="phone" placeholder="涨价10%,请输入10" maxlength="50" type="number" />
+			</tui-list-cell>
+		</div>
+		<div class="prompt-text">提示:在节日的前一天和当天,商城设置自动涨价的商品将会全部 统一涨价。过后自动恢复原价。</div>
+		<button class="admin-button-com blue big confirm-btn">确定</button>
+	</div>
 </template>
 </template>
 
 
 <script>
 <script>
+import TuiListCell from '@/components/plugin/list-cell'
 export default {
 export default {
-	name: 'price-increase'
+	name: 'setting-price-increase',
+	components: {
+		TuiListCell
+	},
+	data() {
+		return {}
+	},
+	methods: {
+		switchChangeFn(e) {
+			console.log('switch1 发生 change 事件,携带值为', e.target.value)
+		},
+		radioChange() {}
+	}
 }
 }
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
-
+	.prompt-text {
+		color: $fontColor3;
+		padding-bottom: 20px;
+		padding-left: 30px;
+	}
+	.module-com {
+		margin-bottom: 20px;
+		padding: 30px;
+		background-color: #fff;
+		color: $fontColor2;
+		.module-tit {
+			font-size: 28px;
+		}
+	}
+	.confirm-btn {
+		width: calc(100% - 60px);
+		margin: 60px 30px 0;
+	}
+	.switch-blo {
+		padding: 15px 30px;
+	}
+	.new-wrap {
+		margin-bottom: 20px;
+		.checkbox-text {
+			color: $fontColor2;
+		}
+		.button-wrap {
+			justify-content: flex-start;
+			flex-wrap: wrap;
+			.admin-button-com {
+				padding-top: 12px;
+				padding-bottom: 12px;
+				margin-left: 20px;
+				border-radius: 4px;
+				&:first-child {
+					margin-left: 0;
+				}
+			}
+		}
+	}
 </style>
 </style>

+ 6 - 0
mobile-code/src/static/css/common.scss

@@ -150,6 +150,7 @@ body {
         .tui-title {
         .tui-title {
             width: 210px;
             width: 210px;
             color: $fontColor2;
             color: $fontColor2;
+            flex-shrink: 0;
         }
         }
         .tui-input {
         .tui-input {
             width: calc(100% - 210px);
             width: calc(100% - 210px);
@@ -169,6 +170,11 @@ body {
         .phcolor {
         .phcolor {
             color: #ccc;
             color: #ccc;
         }
         }
+        .tui-prompt {
+            flex-shrink: 0;
+            color: $fontColor2;
+            margin-left: 20px;
+        }
     }
     }
     .prompt-text {
     .prompt-text {
         color: $fontColor3;
         color: $fontColor3;